-<div class="wrapper" [ngClass]="'avatar-' + size">
- <ng-container *ngIf="!isChannelAvatarNull() && !genericChannel">
- <a [routerLink]="[ '/video-channels', video.byVideoChannel ]" [title]="channelLinkTitle">
- <img [src]="video.videoChannelAvatarUrl" i18n-alt alt="Channel avatar" class="channel-avatar" />
- </a>
-
- <my-actor-avatar [account]="video.account" [title]="accountLinkTitle" [internalHref]="[ '/accounts', video.byAccount ]"></my-actor-avatar>
-</ng-container>
-
- <ng-container *ngIf="!isChannelAvatarNull() && genericChannel">
- <my-actor-avatar [account]="video.account" [title]="accountLinkTitle" [internalHref]="[ '/accounts', video.byAccount ]"></my-actor-avatar>
-
- <a [routerLink]="[ '/video-channels', video.byVideoChannel ]" [title]="channelLinkTitle">
- <img [src]="video.videoChannelAvatarUrl" i18n-alt alt="Channel avatar" class="channel-avatar" />
- </a>
- </ng-container>
-
- <ng-container *ngIf="isChannelAvatarNull()">
- <my-actor-avatar [account]="video.account" [title]="accountLinkTitle" [internalHref]="[ '/accounts', video.byAccount ]"></my-actor-avatar>
- </ng-container>
+<div class="wrapper" [ngClass]="{ 'generic-channel': genericChannel }">
+ <my-actor-avatar
+ class="channel" [channel]="video.channel"
+ [internalHref]="[ '/video-channels', video.byVideoChannel ]" [title]="channelLinkTitle"
+ ></my-actor-avatar>
+
+ <my-actor-avatar
+ class="account" [account]="video.account"
+ [internalHref]="[ '/accounts', video.byAccount ]" [title]="accountLinkTitle">
+ </my-actor-avatar>
</div>
@import '_mixins';
+@mixin main {
+ @include actor-avatar-size(35px);
+}
+
+@mixin secondary {
+ height: 60%;
+ width: 60%;
+ position: absolute;
+ bottom: -5px;
+ right: -5px;
+ background-color: rgba(0, 0, 0, 0);
+}
+
.wrapper {
- $avatar-size: 35px;
+ @include actor-avatar-size(35px);
- width: $avatar-size;
- height: $avatar-size;
position: relative;
margin-right: 5px;
margin-bottom: 5px;
- &.avatar-sm {
- width: 28px;
- height: 28px;
- margin-bottom: 3px;
- }
+ &.generic-channel {
+ .account {
+ @include main();
+ }
- a {
- @include disable-outline;
+ .channel {
+ display: none !important;
+ }
}
- a img {
- height: 100%;
- object-fit: cover;
- position: absolute;
- top:50%;
- left:50%;
- transform: translate(-50%,-50%);
- border-radius: 5px;
-
- &:not(.channel-avatar) {
- border-radius: 50%;
+ &:not(.generic-channel) {
+ .account {
+ @include secondary();
}
- }
- a:nth-of-type(2) img {
- height: 60%;
- width: 60%;
- border: 2px solid pvar(--mainBackgroundColor);
- transform: translateX(15%);
- position: relative;
- background-color: pvar(--mainBackgroundColor);
+ .channel {
+ @include main();
+ }
}
}
@Input() video: Video
@Input() byAccount: string
- @Input() size: 'md' | 'sm' = 'md'
@Input() genericChannel: boolean
channelLinkTitle = ''
get avatarUrl () {
if (this.account) return Account.GET_ACTOR_AVATAR_URL(this.account)
- if (this.channel) return VideoChannel.GET_ACTOR_AVATAR_URL(this.account)
+ if (this.channel) return VideoChannel.GET_ACTOR_AVATAR_URL(this.channel)
return ''
}
constructor (hash: ServerAccount) {
super(hash)
- this.updateComputedAttributes()
-
this.displayName = hash.displayName
this.description = hash.description
this.userId = hash.userId
updateAvatar (newAvatar: ActorImage) {
this.avatar = newAvatar
-
- this.updateComputedAttributes()
}
resetAvatar () {
this.avatar = null
- this.avatarUrl = null
- }
-
- private updateComputedAttributes () {
- this.avatarUrl = Account.GET_ACTOR_AVATAR_URL(this)
}
}
updatedAt: Date | string
avatar: ActorImage
- avatarUrl: string
isLocal: boolean
ownerAccount?: ServerAccount
ownerBy?: string
- ownerAvatarUrl?: string
videosCount?: number
if (hash.ownerAccount) {
this.ownerAccount = hash.ownerAccount
this.ownerBy = Actor.CREATE_BY_STRING(hash.ownerAccount.name, hash.ownerAccount.host)
- this.ownerAvatarUrl = Account.GET_ACTOR_AVATAR_URL(this.ownerAccount)
}
this.updateComputedAttributes()
}
updateComputedAttributes () {
- this.avatarUrl = VideoChannel.GET_ACTOR_AVATAR_URL(this)
this.bannerUrl = VideoChannel.GET_ACTOR_BANNER_URL(this)
}
}
byVideoChannel: string
byAccount: string
- videoChannelAvatarUrl: string
-
createdAt: Date
updatedAt: Date
publishedAt: Date
this.byAccount = Actor.CREATE_BY_STRING(hash.account.name, hash.account.host)
this.byVideoChannel = Actor.CREATE_BY_STRING(hash.channel.name, hash.channel.host)
- this.videoChannelAvatarUrl = VideoChannel.GET_ACTOR_AVATAR_URL(this.channel)
this.category.label = peertubeTranslate(this.category.label, translations)
this.licence.label = peertubeTranslate(this.licence.label, translations)
return ''
}
- getAvatarUrl () {
- if (this.displayOwnerAccount()) {
- return this.video.account.avatar?.url
- }
-
- return this.video.videoChannelAvatarUrl
- }
-
loadActions () {
if (this.displayVideoActions) this.showActions = true
embedUrl: string
ownerBy: string
- ownerAvatarUrl: string
videoChannelBy?: string
- videoChannelAvatarUrl?: string
private thumbnailVersion: number
private originThumbnailUrl: string
this.ownerAccount = hash.ownerAccount
this.ownerBy = Actor.CREATE_BY_STRING(hash.ownerAccount.name, hash.ownerAccount.host)
- this.ownerAvatarUrl = Account.GET_ACTOR_AVATAR_URL(this.ownerAccount)
if (hash.videoChannel) {
this.videoChannel = hash.videoChannel
this.videoChannelBy = Actor.CREATE_BY_STRING(hash.videoChannel.name, hash.videoChannel.host)
- this.videoChannelAvatarUrl = VideoChannel.GET_ACTOR_AVATAR_URL(this.videoChannel)
}
this.privacy.label = peertubeTranslate(this.privacy.label, translations)