Refactor actor avatar component

client/src/app/+accounts/account-video-channels/account-video-channels.component.html

@@ -9,7 +9,7 @@
 
       <div class="channel-avatar-row">
         <my-actor-avatar
-          [channel]="videoChannel"
+          [actor]="videoChannel" actorType="channel"
           [internalHref]="getVideoChannelLink(videoChannel)"
           i18n-title
           title="See this video channel"

client/src/app/+accounts/accounts.component.html

@@ -2,7 +2,7 @@
   <div class="account-info">
 
     <div class="account-avatar-row">
-      <my-actor-avatar class="main-avatar" [account]="account"></my-actor-avatar>
+      <my-actor-avatar class="main-avatar" actorType="account" [actor]="account"></my-actor-avatar>
 
       <div>
         <div class="section-label" i18n>ACCOUNT</div>

client/src/app/+admin/overview/comments/video-comment-list.component.html

@@ -68,7 +68,7 @@
       <td>
         <a [href]="videoComment.account.localUrl" i18n-title title="Open account in a new tab" target="_blank" rel="noopener noreferrer">
           <div class="chip two-lines">
-            <my-actor-avatar [account]="videoComment.account" size="32"></my-actor-avatar>
+            <my-actor-avatar [actor]="videoComment.account" actorType="account" size="32"></my-actor-avatar>
           <div>
               {{ videoComment.account.displayName }}
               <span>{{ videoComment.by }}</span>

client/src/app/+admin/overview/users/user-list/user-list.component.html

@@ -93,8 +93,8 @@
       <td *ngIf="isSelected('username')" class="cell-username">
         <a i18n-title title="Open account in a new tab" target="_blank" rel="noopener noreferrer" [routerLink]="[ '/a/' + user.username ]">
           <div class="chip two-lines">
-            <my-actor-avatar [account]="user?.account" size="32"></my-actor-avatar>
+            <my-actor-avatar [actor]="user?.account" actorType="account" size="32"></my-actor-avatar>
-           <div>
+            <div>
               <span class="user-table-primary-text">{{ user.account.displayName }}</span>
               <span class="muted">{{ user.username }}</span>
             </div>

client/src/app/+admin/overview/users/user-list/user-list.component.ts

@@ -190,7 +190,6 @@ export class UserListComponent extends RestTable implements OnInit {
   }
 
   getUserVideoQuotaDailyPercentage (user: UserForList) {
-    console.log(user.rawVideoQuotaUsedDaily * 100 / user.rawVideoQuotaDaily)
     return user.rawVideoQuotaUsedDaily * 100 / user.rawVideoQuotaDaily
   }
 

client/src/app/+my-library/+my-video-channels/my-video-channels.component.html

@@ -19,7 +19,7 @@
 
 <div class="video-channels">
   <div *ngFor="let videoChannel of videoChannels; let i = index" class="video-channel">
-    <my-actor-avatar [channel]="videoChannel" [internalHref]="[ '/c', videoChannel.nameWithHost ]" size="80"></my-actor-avatar>
+    <my-actor-avatar [actor]="videoChannel" actorType="channel" [internalHref]="[ '/c', videoChannel.nameWithHost ]" size="80"></my-actor-avatar>
 
     <div class="video-channel-info">
       <a [routerLink]="[ '/c', videoChannel.nameWithHost ]" class="video-channel-names" i18n-title title="Channel page">

client/src/app/+my-library/my-follows/my-followers.component.html

@@ -14,7 +14,7 @@
 
 <div class="actors" myInfiniteScroller (nearOfBottom)="onNearOfBottom()" [dataObservable]="onDataSubject.asObservable()">
   <div *ngFor="let follow of follows" class="actor">
-    <my-actor-avatar [account]="follow.follower" [href]="follow.follower.url" size="40"></my-actor-avatar>
+    <my-actor-avatar [actor]="follow.follower" actorType="account" [href]="follow.follower.url" size="40"></my-actor-avatar>
 
     <div class="actor-info">
       <a [href]="follow.follower.url" class="actor-names" rel="noopener noreferrer" target="_blank" i18n-title title="Follower page">

client/src/app/+my-library/my-follows/my-subscriptions.component.html

@@ -14,7 +14,7 @@
 
 <div class="actors" myInfiniteScroller (nearOfBottom)="onNearOfBottom()" [dataObservable]="onDataSubject.asObservable()">
   <div *ngFor="let videoChannel of videoChannels" class="actor">
-    <my-actor-avatar [channel]="videoChannel" [internalHref]="[ '/c', videoChannel.nameWithHost ]" size="80"></my-actor-avatar>
+    <my-actor-avatar [actor]="videoChannel" actorType="channel" [internalHref]="[ '/c', videoChannel.nameWithHost ]" size="80"></my-actor-avatar>
 
     <div class="actor-info">
       <a [routerLink]="[ '/c', videoChannel.nameWithHost ]" class="actor-names" i18n-title title="Channel page">
@@ -27,7 +27,7 @@
       <a [routerLink]="[ '/a', videoChannel.ownerBy ]" i18n-title title="Owner account page" class="actor-owner">
         <span i18n>Created by {{ videoChannel.ownerBy }}</span>
 
-        <my-actor-avatar [account]="videoChannel.ownerAccount" size="18"></my-actor-avatar>
+        <my-actor-avatar [actor]="videoChannel.ownerAccount" actorType="account" size="18"></my-actor-avatar>
       </a>
     </div>
 

client/src/app/+my-library/my-ownership/my-ownership.component.html

@@ -37,7 +37,7 @@
       <td>
         <a [href]="videoChangeOwnership.initiatorAccount.url" i18n-title title="Open account in a new tab" target="_blank" rel="noopener noreferrer">
           <div class="chip two-lines">
-            <my-actor-avatar [account]="videoChangeOwnership.initiatorAccount" size="32"></my-actor-avatar>
+            <my-actor-avatar [actor]="videoChangeOwnership.initiatorAccount" actorType="account" size="32"></my-actor-avatar>
             <div>
               {{ videoChangeOwnership.initiatorAccount.displayName }}
               <span class="muted">{{ videoChangeOwnership.initiatorAccount.nameWithHost }}</span>

client/src/app/+search/search.component.html

@@ -36,7 +36,7 @@
   <ng-container *ngFor="let result of results">
     <div *ngIf="isVideoChannel(result)" class="entry video-channel">
 
-      <my-actor-avatar [channel]="result" [internalHref]="getInternalChannelUrl(result)" [href]="getExternalChannelUrl(result)" size="120"></my-actor-avatar>
+      <my-actor-avatar [actor]="result" actorType="channel" [internalHref]="getInternalChannelUrl(result)" [href]="getExternalChannelUrl(result)" size="120"></my-actor-avatar>
 
       <div class="video-channel-info">
         <a *ngIf="!isExternalChannelUrl()" [routerLink]="getInternalChannelUrl(result)" class="video-channel-names">

client/src/app/+video-channels/video-channels.component.html

@@ -23,7 +23,7 @@
         <div class="section-label" i18n>OWNER ACCOUNT</div>
 
         <div class="avatar-row">
-          <my-actor-avatar class="account-avatar" [account]="ownerAccount" [internalHref]="getAccountUrl()"></my-actor-avatar>
+          <my-actor-avatar class="account-avatar" [actor]="ownerAccount" actorType="account" [internalHref]="getAccountUrl()"></my-actor-avatar>
 
           <div class="actor-info">
             <h4>
@@ -51,7 +51,7 @@
     </ng-template>
 
     <div class="channel-avatar-row">
-      <my-actor-avatar class="main-avatar" [channel]="videoChannel"></my-actor-avatar>
+      <my-actor-avatar class="main-avatar" [actor]="videoChannel" actorType="channel"></my-actor-avatar>
 
       <div>
         <div class="section-label" i18n>VIDEO CHANNEL</div>

client/src/app/+videos/+video-watch/shared/comment/video-comment-add.component.html

@@ -1,6 +1,6 @@
 <form novalidate [formGroup]="form" (ngSubmit)="formValidated()">
   <div class="avatar-and-textarea">
-    <my-actor-avatar [account]="user?.account" size="25"></my-actor-avatar>
+    <my-actor-avatar [actor]="user?.account" [actorType]="getAvatarActorType()" size="25"></my-actor-avatar>
 
     <div class="textarea-wrapper">
       <textarea i18n-placeholder placeholder="Add comment..." myAutoResize

client/src/app/+videos/+video-watch/shared/comment/video-comment-add.component.ts

@@ -57,6 +57,7 @@ export class VideoCommentAddComponent extends FormReactive implements OnChanges,
   }
 
   get emojiMarkupList () {
+    console.log('hi')
     const emojiMarkupObjectList = require('markdown-it-emoji/lib/data/light.json')
 
     // Populate emoji-markup-list from object to array to avoid keys alphabetical order
@@ -174,6 +175,12 @@ export class VideoCommentAddComponent extends FormReactive implements OnChanges,
     return getLocaleDirection(this.localeId) === 'rtl'
   }
 
+  getAvatarActorType () {
+    if (this.user) return 'account'
+
+    return 'unlogged'
+  }
+
   private addCommentReply (commentCreate: VideoCommentCreate) {
     return this.videoCommentService
       .addCommentReply(this.video.uuid, this.parentComment.id, commentCreate)

client/src/app/+videos/+video-watch/shared/comment/video-comment.component.html

@@ -1,6 +1,10 @@
 <div *ngIf="isCommentDisplayed()" class="root-comment" [ngClass]="{ 'is-child': isChild() }">
   <div class="left">
-    <my-actor-avatar *ngIf="!comment.isDeleted" [href]="comment.account.url" [account]="comment.account" [size]="isChild() ? '25' : '36'"></my-actor-avatar>
+    <my-actor-avatar
+      *ngIf="!comment.isDeleted" [href]="comment.account.url"
+      [actor]="comment.account" actorType="account" [size]="isChild() ? '25' : '36'"
+    ></my-actor-avatar>
+
     <div class="vertical-border"></div>
   </div>
 

client/src/app/+videos/+video-watch/shared/metadata/video-avatar-channel.component.html

@@ -2,7 +2,7 @@
   <my-actor-avatar
     *ngIf="showChannel"
     class="channel"
-    [channel]="video.channel"
+    [actor]="video.channel" actorType="channel"
     [internalHref]="[ '/c', video.byVideoChannel ]"
     [title]="channelLinkTitle"
     size="35"
@@ -12,7 +12,7 @@
     *ngIf="showAccount"
     class="account"
     [class.second-avatar]="showChannel"
-    [account]="video.account"
+    [actor]="video.account" actorType="account"
     [internalHref]="[ '/a', video.byAccount ]"
     [title]="accountLinkTitle"
     size="35">

client/src/app/+videos/video-list/overview/video-overview.component.html

@@ -33,7 +33,7 @@
       <div class="section channel videos" *ngFor="let object of overview.channels">
         <div class="section-title">
           <a class="link-orange" [routerLink]="[ '/c', buildVideoChannelBy(object) ]">
-            <my-actor-avatar [channel]="buildVideoChannel(object)" size="28"></my-actor-avatar>
+            <my-actor-avatar [actor]="buildVideoChannel(object)" actorType="channel" size="28"></my-actor-avatar>
 
             <h2 class="section-title">{{ object.channel.displayName }}</h2>
           </a>

client/src/app/menu/menu.component.html

@@ -8,7 +8,8 @@
             [container]="dropdownContainer" (openChange)="onDropdownOpenChange($event)" autoClose="outside"
           >
             <div ngbDropdownToggle>
-              <my-actor-avatar [account]="user.account" size="34"></my-actor-avatar>
+              <my-actor-avatar [actor]="user.account" actorType="account" size="34"></my-actor-avatar>
+
               <div class="logged-in-info">
                 <div class="logged-in-display-name">{{ user.account?.displayName }}</div>
 

client/src/app/shared/shared-abuse-list/abuse-details.component.html

@@ -10,7 +10,7 @@
         <a [routerLink]="[ '.' ]" [queryParams]="{ 'search': 'reporter:&quot;' + abuse.reporterAccount.displayName + '&quot;' }"
           class="chip"
         >
-          <my-actor-avatar size="18" [account]="abuse.reporterAccount"></my-actor-avatar>
+          <my-actor-avatar size="18" [actor]="abuse.reporterAccount" actorType="account"></my-actor-avatar>
           <div>
             <span class="muted">{{ abuse.reporterAccount.nameWithHost }}</span>
           </div>
@@ -31,7 +31,7 @@
         <a [routerLink]="[ '.' ]" [queryParams]="{ 'search': 'reportee:&quot;' +abuse.flaggedAccount.displayName + '&quot;' }"
           class="chip"
         >
-          <my-actor-avatar size="18" [account]="abuse.flaggedAccount"></my-actor-avatar>
+          <my-actor-avatar size="18" [actor]="abuse.flaggedAccount" actorType="account"></my-actor-avatar>
           <div>
             <span class="muted">{{ abuse.flaggedAccount ? abuse.flaggedAccount.nameWithHost : '' }}</span>
           </div>

client/src/app/shared/shared-abuse-list/abuse-list-table.component.html

@@ -43,7 +43,7 @@
       <td *ngIf="isAdminView()">
         <a *ngIf="abuse.reporterAccount" [href]="abuse.reporterAccount.url" i18n-title title="Open account in a new tab" target="_blank" rel="noopener noreferrer">
           <div class="chip two-lines">
-            <my-actor-avatar [account]="abuse.reporterAccount" size="32"></my-actor-avatar>
+            <my-actor-avatar [actor]="abuse.reporterAccount" actorType="account" size="32"></my-actor-avatar>
             <div>
               {{ abuse.reporterAccount.displayName }}
               <span>{{ abuse.reporterAccount.nameWithHost }}</span>

client/src/app/shared/shared-actor-image-edit/actor-avatar-edit.component.html

@@ -1,6 +1,6 @@
 <div class="actor" *ngIf="actor">
   <div class="d-flex">
-    <my-actor-avatar [channel]="getChannel()" [account]="getAccount()" [previewImage]="preview" size="100"></my-actor-avatar>
+    <my-actor-avatar [actor]="actor" [actorType]="getActorType()" [previewImage]="preview" size="100"></my-actor-avatar>
 
     <div class="actor-img-edit-container">
 

client/src/app/shared/shared-actor-image-edit/actor-avatar-edit.component.ts

@@ -75,19 +75,9 @@ export class ActorAvatarEditComponent implements OnInit {
     return !!this.preview || this.actor.avatars.length !== 0
   }
 
-  isChannel () {
+  getActorType () {
-    return !!(this.actor as VideoChannel).ownerAccount
+    if ((this.actor as VideoChannel).ownerAccount) return 'channel'
-  }
 
-  getChannel (): VideoChannel {
+    return 'account'
-    if (this.isChannel()) return this.actor as VideoChannel
-
-    return undefined
-  }
-
-  getAccount (): Account {
-    if (this.isChannel()) return undefined
-
-    return this.actor as Account
   }
 }

client/src/app/shared/shared-actor-image/actor-avatar.component.html

@@ -1,19 +1,21 @@
 <ng-template #img>
-  <img *ngIf="previewImage || avatarUrl || !initial" [class]="classes" [src]="previewImage || avatarUrl || defaultAvatarUrl" [alt]="alt" />
+  <img *ngIf="displayImage()" [class]="classes" [src]="previewImage || avatarUrl || defaultAvatarUrl" [alt]="alt" />
 
-  <div *ngIf="!avatarUrl && initial" [ngClass]="classes">
+  <div *ngIf="displayActorInitial()" [ngClass]="classes">
-    <span>{{ initial }}</span>
+    <span>{{ getActorInitial() }}</span>
   </div>
+
+  <div *ngIf="displayPlaceholder()" [ngClass]="classes"></div>
 </ng-template>
 
-<a *ngIf="hasActor() && href" [href]="href" target="_blank" rel="noopener noreferrer" [title]="title">
+<a *ngIf="actor && href" [href]="href" target="_blank" rel="noopener noreferrer" [title]="title">
   <ng-template *ngTemplateOutlet="img"></ng-template>
 </a>
 
-<a *ngIf="hasActor() && internalHref" [routerLink]="internalHref" [title]="title">
+<a *ngIf="actor && internalHref" [routerLink]="internalHref" [title]="title">
   <ng-template *ngTemplateOutlet="img"></ng-template>
 </a>
 
-<ng-container *ngIf="!hasActor() || (!href && !internalHref)">
+<ng-container *ngIf="!actor || (!href && !internalHref)">
   <ng-template *ngTemplateOutlet="img"></ng-template>
 </ng-container>

client/src/app/shared/shared-actor-image/actor-avatar.component.ts

@@ -18,8 +18,8 @@ export type ActorAvatarSize = '18' | '25' | '28' | '32' | '34' | '35' | '36' | '
 export class ActorAvatarComponent implements OnChanges {
   private _title: string
 
-  @Input() account: ActorInput
+  @Input() actor: ActorInput
-  @Input() channel: ActorInput
+  @Input() actorType: 'channel' | 'account' | 'unlogged'
 
   @Input() previewImage: string
 
@@ -36,8 +36,8 @@ export class ActorAvatarComponent implements OnChanges {
 
   get title () {
     if (this._title) return this._title
-    if (this.account) return $localize`${this.account.name} (account page)`
+    if (this.isAccount()) return $localize`${this.actor.name} (account page)`
-    if (this.channel) return $localize`${this.channel.name} (channel page)`
+    if (this.isChannel()) return $localize`${this.actor.name} (channel page)`
 
     return ''
   }
@@ -45,48 +45,75 @@ export class ActorAvatarComponent implements OnChanges {
   classes: string[] = []
 
   get alt () {
-    if (this.account) return $localize`Account avatar`
+    if (this.isAccount()) return $localize`Account avatar`
-    if (this.channel) return $localize`Channel avatar`
+    if (this.isChannel()) return $localize`Channel avatar`
 
     return ''
   }
 
   get defaultAvatarUrl () {
-    if (this.channel) return VideoChannel.GET_DEFAULT_AVATAR_URL(this.getSizeNumber())
+    if (this.isChannel()) return VideoChannel.GET_DEFAULT_AVATAR_URL(this.getSizeNumber())
 
+    // account or unlogged
     return Account.GET_DEFAULT_AVATAR_URL(this.getSizeNumber())
   }
 
   get avatarUrl () {
-    if (this.account) return Account.GET_ACTOR_AVATAR_URL(this.account, this.getSizeNumber())
+    if (!this.actor) return ''
-    if (this.channel) return VideoChannel.GET_ACTOR_AVATAR_URL(this.channel, this.getSizeNumber())
+
+    if (this.isAccount()) return Account.GET_ACTOR_AVATAR_URL(this.actor, this.getSizeNumber())
+    if (this.isChannel()) return VideoChannel.GET_ACTOR_AVATAR_URL(this.actor, this.getSizeNumber())
 
     return ''
   }
 
-  get initial () {
-    const name = this.account?.name
-    if (!name) return ''
-
-    return name.slice(0, 1)
-  }
-
   ngOnChanges () {
     this.classes = [ 'avatar' ]
 
-    if (this.size) this.classes.push(`avatar-${this.size}`)
+    if (this.size) {
+      this.classes.push(`avatar-${this.size}`)
+    }
 
-    if (this.channel) this.classes.push('channel')
+    if (this.isChannel()) {
-    else this.classes.push('account')
+      this.classes.push('channel')
+    } else {
+      this.classes.push('account')
+    }
 
-    if (!this.avatarUrl && this.initial) {
+    // No avatar, use actor name initial
+    if (this.displayActorInitial()) {
       this.classes.push('initial')
       this.classes.push(this.getColorTheme())
     }
   }
 
-  hasActor () {
+  displayImage () {
-    return !!this.account || !!this.channel
+    if (this.actorType === 'unlogged') return true
+
+    return !!(this.actor && this.avatarUrl)
+  }
+
+  displayActorInitial () {
+    return this.actor && !this.avatarUrl
+  }
+
+  displayPlaceholder () {
+    return this.actorType !== 'unlogged' && !this.actor
+  }
+
+  getActorInitial () {
+    const name = this.actor?.name
+    if (!name) return ''
+
+    return name.slice(0, 1)
+  }
+
+  private isAccount () {
+    return this.actorType === 'account'
+  }
+
+  private isChannel () {
+    return this.actorType === 'channel'
   }
 
   private getSizeNumber () {
@@ -96,7 +123,7 @@ export class ActorAvatarComponent implements OnChanges {
   }
 
   private getColorTheme () {
-    const initialLowercase = this.initial.toLowerCase()
+    const initialLowercase = this.getActorInitial().toLowerCase()
 
     // Keep consistency with CSS
     const themes = {

client/src/app/shared/shared-custom-markup/peertube-custom-tags/channel-miniature-markup.component.html

@@ -1,7 +1,7 @@
 <div *ngIf="channel" class="channel">
 
   <div class="channel-avatar-row">
-    <my-actor-avatar [channel]="channel" [internalHref]="getVideoChannelLink()" i18n-title title="See this video channel" size="75"></my-actor-avatar>
+    <my-actor-avatar [actor]="channel" actorType="channel" [internalHref]="getVideoChannelLink()" i18n-title title="See this video channel" size="75"></my-actor-avatar>
 
     <h6>
       <a [routerLink]="getVideoChannelLink()" i18n-title title="See this video channel">

client/src/app/shared/shared-moderation/account-blocklist.component.html

@@ -33,7 +33,7 @@
       <td>
         <a [href]="accountBlock.blockedAccount.url" i18n-title title="Open account in a new tab" target="_blank" rel="noopener noreferrer">
           <div class="chip two-lines">
-            <my-actor-avatar [account]="accountBlock.blockedAccount" size="32"></my-actor-avatar>
+            <my-actor-avatar [actor]="accountBlock.blockedAccount" actorType="account" size="32"></my-actor-avatar>
             <div>
               {{ accountBlock.blockedAccount.displayName }}
               <span class="muted">{{ accountBlock.blockedAccount.nameWithHost }}</span>

client/src/app/shared/shared-video-miniature/video-miniature.component.html

@@ -12,13 +12,13 @@
       <div class="d-flex video-miniature-meta">
         <my-actor-avatar
           *ngIf="displayOptions.avatar && displayOwnerVideoChannel() && !displayAsRow" [title]="channelLinkTitle"
-          [channel]="video.channel" [size]="actorImageSize" [internalHref]="[ '/c', video.byVideoChannel ]"
+          [actor]="video.channel" actorType="channel" [size]="actorImageSize" [internalHref]="[ '/c', video.byVideoChannel ]"
           size="32"
         ></my-actor-avatar>
 
         <my-actor-avatar
           *ngIf="displayOptions.avatar && displayOwnerAccount() && !displayAsRow" [title]="channelLinkTitle"
-          [account]="video.account" [size]="actorImageSize" [internalHref]="[ '/c', video.byVideoChannel ]"
+          [actor]="video.account" actorType="channel" [size]="actorImageSize" [internalHref]="[ '/c', video.byVideoChannel ]"
           size="32"
         ></my-actor-avatar>