X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;f=client%2Fsrc%2Fapp%2Fshared%2Fshared-actor-image%2Factor-avatar.component.ts;h=f1c1aa03f388215b06a849776abb9ef414b4b1a0;hb=d0fbc9fd0a29c37f3ff9b99030351e90b276fe7d;hp=6bb3b65fa31a826835a24285d050ba3e7a353da8;hpb=746018f6b81b40e8858303662ac9ec5ce59ac6eb;p=github%2FChocobozzz%2FPeerTube.git

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 6bb3b65fa..f1c1aa03f 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
@@ -1,26 +1,29 @@
-import { Component, Input } from '@angular/core'
-import { SafeResourceUrl } from '@angular/platform-browser'
+import { Component, Input, OnChanges, OnInit } from '@angular/core'
 import { VideoChannel } from '../shared-main'
 import { Account } from '../shared-main/account/account.model'
 
 type ActorInput = {
   name: string
-  avatar?: { url?: string, path: string }
+  avatars: { width: number, url?: string, path: string }[]
   url: string
 }
 
+export type ActorAvatarSize = '18' | '25' | '28' | '32' | '34' | '35' | '36' | '40' | '48' | '75' | '80' | '100' | '120'
+
 @Component({
   selector: 'my-actor-avatar',
   styleUrls: [ './actor-avatar.component.scss' ],
   templateUrl: './actor-avatar.component.html'
 })
-export class ActorAvatarComponent {
-  @Input() account: ActorInput
-  @Input() channel: ActorInput
+export class ActorAvatarComponent implements OnInit, OnChanges {
+  private _title: string
 
-  @Input() previewImage: SafeResourceUrl
+  @Input() actor: ActorInput
+  @Input() actorType: 'channel' | 'account' | 'unlogged'
 
-  @Input() size: '18' | '25' | '32' | '34' | '36' | '40' | '100' | '120'
+  @Input() previewImage: string
+
+  @Input() size: ActorAvatarSize
 
   // Use an external link
   @Input() href: string
@@ -31,80 +34,129 @@ export class ActorAvatarComponent {
     this._title = value
   }
 
-  private _title: string
-
   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 ''
   }
 
-  get alt () {
-    if (this.account) return $localize`Account avatar`
-    if (this.channel) return $localize`Channel avatar`
+  classes: string[] = []
+  defaultAvatarUrl: string
+  avatarUrl: string
 
-    return ''
+  ngOnInit () {
+    this.buildDefaultAvatarUrl()
+
+    this.buildAvatarUrl()
+    this.buildClasses()
   }
 
-  get class () {
-    const base = [ 'avatar' ]
+  ngOnChanges () {
+    this.buildAvatarUrl()
+    this.buildClasses()
+  }
 
-    if (this.size) base.push(`avatar-${this.size}`)
+  private buildClasses () {
+    this.classes = [ 'avatar' ]
 
-    if (this.account) base.push('account')
-    else base.push('channel')
+    if (this.size) {
+      this.classes.push(`avatar-${this.size}`)
+    }
 
-    if (this.initial) {
-      base.push('initial')
-      base.push(this.getColorTheme())
+    if (this.isChannel()) {
+      this.classes.push('channel')
+    } else {
+      this.classes.push('account')
     }
 
-    return base
+    // No avatar, use actor name initial
+    if (this.displayActorInitial()) {
+      this.classes.push('initial')
+      this.classes.push(this.getColorTheme())
+    }
   }
 
-  get defaultAvatarUrl () {
-    if (this.account) Account.GET_DEFAULT_AVATAR_URL()
-    if (this.channel) return VideoChannel.GET_DEFAULT_AVATAR_URL()
+  private buildDefaultAvatarUrl () {
+    this.defaultAvatarUrl = this.isChannel()
+      ? VideoChannel.GET_DEFAULT_AVATAR_URL(this.getSizeNumber())
+      : Account.GET_DEFAULT_AVATAR_URL(this.getSizeNumber())
+  }
 
-    return ''
+  private buildAvatarUrl () {
+    if (!this.actor) {
+      this.avatarUrl = ''
+      return
+    }
+
+    if (this.isAccount()) {
+      this.avatarUrl = Account.GET_ACTOR_AVATAR_URL(this.actor, this.getSizeNumber())
+      return
+    }
+
+    if (this.isChannel()) {
+      this.avatarUrl = VideoChannel.GET_ACTOR_AVATAR_URL(this.actor, this.getSizeNumber())
+      return
+    }
+
+    this.avatarUrl = ''
   }
 
-  get avatarUrl () {
-    if (this.account) return Account.GET_ACTOR_AVATAR_URL(this.account)
-    if (this.channel) return VideoChannel.GET_ACTOR_AVATAR_URL(this.account)
+  displayImage () {
+    if (this.actorType === 'unlogged') return true
+    if (this.previewImage) return true
 
-    return ''
+    return !!(this.actor && this.avatarUrl)
+  }
+
+  displayActorInitial () {
+    return !this.displayImage() && this.actor && !this.avatarUrl
+  }
+
+  displayPlaceholder () {
+    return this.actorType !== 'unlogged' && !this.actor
   }
 
-  get initial () {
-    const name = this.account?.name
+  getActorInitial () {
+    const name = this.actor?.name
     if (!name) return ''
 
     return name.slice(0, 1)
   }
 
-  hasActor () {
-    return !!this.account || !!this.channel
+  private isAccount () {
+    return this.actorType === 'account'
+  }
+
+  private isChannel () {
+    return this.actorType === 'channel'
+  }
+
+  private getSizeNumber () {
+    if (this.size) return +this.size
+
+    return undefined
   }
 
   private getColorTheme () {
+    const initialLowercase = this.getActorInitial().toLowerCase()
+
     // Keep consistency with CSS
     const themes = {
-      abc: 'blue',
-      def: 'green',
-      ghi: 'purple',
-      jkl: 'gray',
-      mno: 'yellow',
-      pqr: 'orange',
-      stv: 'red',
-      wxyz: 'dark-blue'
+      '0123456789abc': 'blue',
+      'def': 'green',
+      'ghi': 'purple',
+      'jkl': 'gray',
+      'mno': 'yellow',
+      'pqr': 'orange',
+      'stvu': 'red',
+      'wxyz': 'dark-blue'
     }
 
     const theme = Object.keys(themes)
-                        .find(chars => chars.includes(this.initial))
+                        .find(chars => chars.includes(initialLowercase))
 
-    return themes[theme]
+    return themes[theme] || 'blue'
   }
 }