Refactor actor avatar component

9 files changed, 69 insertions, 50 deletions

diff --git a/client/src/app/shared/shared-abuse-list/abuse-details.component.html b/client/src/app/shared/shared-abuse-list/abuse-details.component.html
index b04d46e32..fdf700f7c 100644
--- a/client/src/app/shared/shared-abuse-list/abuse-details.component.html
+++ b/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>
diff --git a/client/src/app/shared/shared-abuse-list/abuse-list-table.component.html b/client/src/app/shared/shared-abuse-list/abuse-list-table.component.html
index f79054d03..5f9db2b3b 100644
--- a/client/src/app/shared/shared-abuse-list/abuse-list-table.component.html
+++ b/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>
diff --git a/client/src/app/shared/shared-actor-image-edit/actor-avatar-edit.component.html b/client/src/app/shared/shared-actor-image-edit/actor-avatar-edit.component.html
index b63bf1f92..6459c5ffe 100644
--- a/client/src/app/shared/shared-actor-image-edit/actor-avatar-edit.component.html
+++ b/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">
 
diff --git a/client/src/app/shared/shared-actor-image-edit/actor-avatar-edit.component.ts b/client/src/app/shared/shared-actor-image-edit/actor-avatar-edit.component.ts
index 01bb401fb..b71a3c485 100644
--- a/client/src/app/shared/shared-actor-image-edit/actor-avatar-edit.component.ts
+++ b/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 () {
-    return !!(this.actor as VideoChannel).ownerAccount
-  }
-
-  getChannel (): VideoChannel {
-    if (this.isChannel()) return this.actor as VideoChannel
-
-    return undefined
-  }
-
-  getAccount (): Account {
-    if (this.isChannel()) return undefined
+  getActorType () {
+    if ((this.actor as VideoChannel).ownerAccount) return 'channel'
 
-    return this.actor as Account
+    return 'account'
   }
 }
diff --git a/client/src/app/shared/shared-actor-image/actor-avatar.component.html b/client/src/app/shared/shared-actor-image/actor-avatar.component.html
index ba025da4d..fb9efc20a 100644
--- a/client/src/app/shared/shared-actor-image/actor-avatar.component.html
+++ b/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">
-    <span>{{ initial }}</span>
+  <div *ngIf="displayActorInitial()" [ngClass]="classes">
+    <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>
diff --git a/client/src/app/shared/shared-actor-image/actor-avatar.component.ts b/client/src/app/shared/shared-actor-image/actor-avatar.component.ts
index fdc8268d8..437de1d50 100644
--- a/client/src/app/shared/shared-actor-image/actor-avatar.component.ts
+++ b/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() channel: ActorInput
+  @Input() actor: 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.channel) return $localize`${this.channel.name} (channel page)`
+    if (this.isAccount()) return $localize`${this.actor.name} (account 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.channel) return $localize`Channel avatar`
+    if (this.isAccount()) return $localize`Account 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.channel) return VideoChannel.GET_ACTOR_AVATAR_URL(this.channel, this.getSizeNumber())
+    if (!this.actor) return ''
 
-    return ''
-  }
-
-  get initial () {
-    const name = this.account?.name
-    if (!name) return ''
+    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 name.slice(0, 1)
+    return ''
   }
 
   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')
-    else this.classes.push('account')
+    if (this.isChannel()) {
+      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 () {
-    return !!this.account || !!this.channel
+  displayImage () {
+    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 = {
diff --git a/client/src/app/shared/shared-custom-markup/peertube-custom-tags/channel-miniature-markup.component.html b/client/src/app/shared/shared-custom-markup/peertube-custom-tags/channel-miniature-markup.component.html
index 52a402329..395cc8562 100644
--- a/client/src/app/shared/shared-custom-markup/peertube-custom-tags/channel-miniature-markup.component.html
+++ b/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">
diff --git a/client/src/app/shared/shared-moderation/account-blocklist.component.html b/client/src/app/shared/shared-moderation/account-blocklist.component.html
index 131110318..fef24cfdf 100644
--- a/client/src/app/shared/shared-moderation/account-blocklist.component.html
+++ b/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>
diff --git a/client/src/app/shared/shared-video-miniature/video-miniature.component.html b/client/src/app/shared/shared-video-miniature/video-miniature.component.html
index 3cf128de0..e8d2ca1c4 100644
--- a/client/src/app/shared/shared-video-miniature/video-miniature.component.html
+++ b/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>