add channel avatar to watch view
This commit is contained in:
Rigel Kent
parent
44efbebac4
commit
dd4f25eea8
|
|
@ -0,0 +1,8 @@
|
|||
<div class="wrapper">
|
||||
<a [routerLink]="[ '/video-channels', video.byVideoChannel ]" i18n-title title="Go the channel page">
|
||||
<img [src]="video.videoChannelAvatarUrl" alt="Channel avatar" />
|
||||
</a>
|
||||
<a [routerLink]="[ '/accounts', video.byAccount ]" i18n-title title="Go to the account page">
|
||||
<img [src]="video.accountAvatarUrl" alt="Account avatar" />
|
||||
</a>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
@import '_mixins';
|
||||
|
||||
.wrapper {
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
min-width: 35px;
|
||||
min-height: 35px;
|
||||
position: relative;
|
||||
margin-right: 5px;
|
||||
|
||||
a {
|
||||
@include disable-outline;
|
||||
}
|
||||
|
||||
a img {
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
position: absolute;
|
||||
top:50%;
|
||||
left:50%;
|
||||
border-radius: 50%;
|
||||
transform: translate(-50%,-50%)
|
||||
}
|
||||
|
||||
a:nth-of-type(2) img {
|
||||
height: 60%;
|
||||
width: 60%;
|
||||
border: 2px solid var(--mainBackgroundColor);
|
||||
transform: translateX(15%);
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
import { Component, Input } from '@angular/core'
|
||||
import { VideoDetails } from '../video/video-details.model'
|
||||
|
||||
@Component({
|
||||
selector: 'avatar-channel',
|
||||
templateUrl: './avatar.component.html',
|
||||
styleUrls: [ './avatar.component.scss' ]
|
||||
})
|
||||
export class AvatarComponent {
|
||||
@Input() video: VideoDetails
|
||||
}
|
||||
|
|
@ -66,6 +66,7 @@ import { OverviewService } from '@app/shared/overview'
|
|||
import { UserBanModalComponent } from '@app/shared/moderation'
|
||||
import { UserModerationDropdownComponent } from '@app/shared/moderation/user-moderation-dropdown.component'
|
||||
import { BlocklistService } from '@app/shared/blocklist'
|
||||
import { AvatarComponent } from '@app/shared/channel/avatar.component'
|
||||
import { TopMenuDropdownComponent } from '@app/shared/menu/top-menu-dropdown.component'
|
||||
import { UserHistoryService } from '@app/shared/users/user-history.service'
|
||||
import { UserNotificationService } from '@app/shared/users/user-notification.service'
|
||||
|
|
@ -158,6 +159,7 @@ import { InputReadonlyCopyComponent } from '@app/shared/forms/input-readonly-cop
|
|||
TimestampInputComponent,
|
||||
InputReadonlyCopyComponent,
|
||||
|
||||
AvatarComponent,
|
||||
SubscribeButtonComponent,
|
||||
RemoteSubscribeComponent,
|
||||
InstanceFeaturesTableComponent,
|
||||
|
|
@ -228,6 +230,7 @@ import { InputReadonlyCopyComponent } from '@app/shared/forms/input-readonly-cop
|
|||
PeertubeCheckboxComponent,
|
||||
TimestampInputComponent,
|
||||
|
||||
AvatarComponent,
|
||||
SubscribeButtonComponent,
|
||||
RemoteSubscribeComponent,
|
||||
InstanceFeaturesTableComponent,
|
||||
|
|
|
|||
|
|
@ -136,26 +136,26 @@
|
|||
</div>
|
||||
|
||||
|
||||
<div class="pt-3 border-top video-info-channel">
|
||||
<a [routerLink]="[ '/video-channels', video.byVideoChannel ]" i18n-title title="Go the channel page">
|
||||
<img [src]="video.videoChannelAvatarUrl" alt="Video channel avatar" />
|
||||
{{ video.channel.displayName }}
|
||||
</a>
|
||||
<div class="pt-3 border-top video-info-channel d-flex">
|
||||
<div class="video-info-channel-left d-flex">
|
||||
<avatar-channel [video]="video"></avatar-channel>
|
||||
<div class="video-info-channel-left-links ml-1">
|
||||
<a [routerLink]="[ '/video-channels', video.byVideoChannel ]" i18n-title title="Go the channel page">
|
||||
{{ video.channel.displayName }}
|
||||
</a>
|
||||
<a [routerLink]="[ '/accounts', video.byAccount ]" i18n-title title="Go to the account page">
|
||||
<span i18n>By {{ video.byAccount }}</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<my-subscribe-button #subscribeButton [videoChannel]="video.channel" size="small"></my-subscribe-button>
|
||||
</div>
|
||||
|
||||
<div class="video-info-by">
|
||||
<a [routerLink]="[ '/accounts', video.byAccount ]" i18n-title title="Go to the account page">
|
||||
<img [src]="video.accountAvatarUrl" alt="Account avatar" />
|
||||
<span i18n>By {{ video.byAccount }}</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="video-info-description ml-4">
|
||||
<div class="video-info-description">
|
||||
<div class="video-info-description-html" [innerHTML]="videoHTMLDescription"></div>
|
||||
|
||||
<div class="video-info-description-more" *ngIf="completeDescriptionShown === false && video.description?.length >= 250" (click)="showMoreDescription()">
|
||||
|
|
@ -170,7 +170,7 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="video-attributes mb-3 ml-4">
|
||||
<div class="video-attributes mb-3">
|
||||
<div class="video-attribute">
|
||||
<span i18n class="video-attribute-label">Privacy</span>
|
||||
<span class="video-attribute-value">{{ video.privacy.label }}</span>
|
||||
|
|
|
|||
|
|
@ -3,8 +3,8 @@
|
|||
@import '_bootstrap-variables';
|
||||
@import '_miniature';
|
||||
|
||||
$other-videos-width: 260px;
|
||||
$player-factor: 1.7; // 16/9
|
||||
$video-info-margin-left: 44px;
|
||||
|
||||
@function getPlayerHeight($width){
|
||||
@return calc(#{$width} / #{$player-factor})
|
||||
|
|
@ -180,43 +180,27 @@ $player-factor: 1.7; // 16/9
|
|||
}
|
||||
}
|
||||
|
||||
.video-info-channel-left {
|
||||
flex-grow: 1;
|
||||
|
||||
.video-info-channel-left-links {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
line-height: 1.3;
|
||||
|
||||
a:nth-of-type(2) {
|
||||
font-weight: 500;
|
||||
font-size: 90%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
my-subscribe-button {
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.video-info-by {
|
||||
|
||||
a {
|
||||
@include disable-default-a-behaviour;
|
||||
|
||||
display: inline;
|
||||
align-items: center;
|
||||
font-size: 13px;
|
||||
color: var(--mainForegroundColor);
|
||||
|
||||
span:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
span {
|
||||
margin-left: 2px;
|
||||
}
|
||||
|
||||
img {
|
||||
@include avatar(18px);
|
||||
|
||||
margin: -2px 5px 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
my-help {
|
||||
position: relative;
|
||||
top: 1px;
|
||||
margin-left: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
my-feed {
|
||||
margin-left: 5px;
|
||||
margin-top: 1px;
|
||||
|
|
@ -330,6 +314,7 @@ $player-factor: 1.7; // 16/9
|
|||
|
||||
.video-info-description {
|
||||
margin: 20px 0;
|
||||
margin-left: $video-info-margin-left;
|
||||
font-size: 15px;
|
||||
|
||||
.video-info-description-html {
|
||||
|
|
@ -357,6 +342,10 @@ $player-factor: 1.7; // 16/9
|
|||
}
|
||||
}
|
||||
|
||||
.video-attributes {
|
||||
margin-left: $video-info-margin-left;
|
||||
}
|
||||
|
||||
.video-attributes .video-attribute {
|
||||
font-size: 13px;
|
||||
display: block;
|
||||
|
|
@ -391,11 +380,9 @@ $player-factor: 1.7; // 16/9
|
|||
|
||||
::ng-deep .other-videos {
|
||||
padding-left: 15px;
|
||||
flex-basis: $other-videos-width;
|
||||
min-width: $other-videos-width;
|
||||
|
||||
.title-page {
|
||||
margin-top: 0 !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
.video-miniature {
|
||||
|
|
|
|||
Loading…
Reference in New Issue