X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;f=client%2Fsrc%2Fapp%2Fshared%2Fshared-actor-image%2Factor-avatar.component.ts;h=fdc8268d88b36927af0b85020bd1634cc16e7e86;hb=b713976afbe47d06941222ad462bc68b3decd723;hp=b06c2bae6547cf6946e5da965fcccf24fcffdd36;hpb=c27463a603186b623500b03c6a56b330a6568350;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 b06c2bae6..fdc8268d8 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,27 @@
-import { Component, Input } from '@angular/core'
-import { SafeResourceUrl } from '@angular/platform-browser'
+import { Component, Input, OnChanges } 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' | '32' | '34' | '36' | '40' | '100' | '120'
+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 {
+export class ActorAvatarComponent implements OnChanges {
+  private _title: string
+
   @Input() account: ActorInput
   @Input() channel: ActorInput
 
-  @Input() previewImage: SafeResourceUrl
+  @Input() previewImage: string
 
   @Input() size: ActorAvatarSize
 
@@ -33,8 +34,6 @@ 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)`
@@ -43,6 +42,8 @@ export class ActorAvatarComponent {
     return ''
   }
 
+  classes: string[] = []
+
   get alt () {
     if (this.account) return $localize`Account avatar`
     if (this.channel) return $localize`Channel avatar`
@@ -50,31 +51,15 @@ export class ActorAvatarComponent {
     return ''
   }
 
-  getClass (type: 'avatar' | 'initial') {
-    const base = [ 'avatar' ]
-
-    if (this.size) base.push(`avatar-${this.size}`)
-
-    if (this.channel) base.push('channel')
-    else base.push('account')
-
-    if (type === 'initial' && this.initial) {
-      base.push('initial')
-      base.push(this.getColorTheme())
-    }
-
-    return base
-  }
-
   get defaultAvatarUrl () {
-    if (this.channel) return VideoChannel.GET_DEFAULT_AVATAR_URL()
+    if (this.channel) return VideoChannel.GET_DEFAULT_AVATAR_URL(this.getSizeNumber())
 
-    return Account.GET_DEFAULT_AVATAR_URL()
+    return Account.GET_DEFAULT_AVATAR_URL(this.getSizeNumber())
   }
 
   get avatarUrl () {
-    if (this.account) return Account.GET_ACTOR_AVATAR_URL(this.account)
-    if (this.channel) return VideoChannel.GET_ACTOR_AVATAR_URL(this.channel)
+    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())
 
     return ''
   }
@@ -86,14 +71,36 @@ export class ActorAvatarComponent {
     return name.slice(0, 1)
   }
 
+  ngOnChanges () {
+    this.classes = [ 'avatar' ]
+
+    if (this.size) this.classes.push(`avatar-${this.size}`)
+
+    if (this.channel) this.classes.push('channel')
+    else this.classes.push('account')
+
+    if (!this.avatarUrl && this.initial) {
+      this.classes.push('initial')
+      this.classes.push(this.getColorTheme())
+    }
+  }
+
   hasActor () {
     return !!this.account || !!this.channel
   }
 
+  private getSizeNumber () {
+    if (this.size) return +this.size
+
+    return undefined
+  }
+
   private getColorTheme () {
+    const initialLowercase = this.initial.toLowerCase()
+
     // Keep consistency with CSS
     const themes = {
-      abc: 'blue',
+      '0123456789abc': 'blue',
       def: 'green',
       ghi: 'purple',
       jkl: 'gray',
@@ -104,7 +111,7 @@ export class ActorAvatarComponent {
     }
 
     const theme = Object.keys(themes)
-                        .find(chars => chars.includes(this.initial))
+                        .find(chars => chars.includes(initialLowercase))
 
     return themes[theme]
   }