Fix avatar with username starting with numbers

[github/Chocobozzz/PeerTube.git] / client / src / app / shared / shared-actor-image / actor-avatar.component.ts

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 b06c2bae6547cf6946e5da965fcccf24fcffdd36..b2e1ef46eac4f47af403c645c7959453d3368045 100644 (file)
--- 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,15 +1,14 @@
 import { Component, Input } from '@angular/core'
-import { SafeResourceUrl } from '@angular/platform-browser'
 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',
@@ -17,12 +16,14 @@ export type ActorAvatarSize = '18' | '25' | '32' | '34' | '36' | '40' | '100' |
   templateUrl: './actor-avatar.component.html'
 })
 export class ActorAvatarComponent {
+  private _title: string
+
   @Input() account: ActorInput
   @Input() channel: ActorInput
 
-  @Input() previewImage: SafeResourceUrl
+  @Input() previewImage: string
 
-  @Input() size: ActorAvatarSize
+  @Input() size: ActorAvatarSize = '32'
 
   // Use an external link
   @Input() href: string
@@ -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)`
@@ -50,6 +49,25 @@ export class ActorAvatarComponent {
     return ''
   }
 
+  get defaultAvatarUrl () {
+    if (this.account) return Account.GET_DEFAULT_AVATAR_URL(+this.size)
+    if (this.channel) return VideoChannel.GET_DEFAULT_AVATAR_URL(+this.size)
+  }
+
+  get avatarUrl () {
+    if (this.account) return Account.GET_ACTOR_AVATAR_URL(this.account, +this.size)
+    if (this.channel) return VideoChannel.GET_ACTOR_AVATAR_URL(this.channel, +this.size)
+
+    return ''
+  }
+
+  get initial () {
+    const name = this.account?.name
+    if (!name) return ''
+
+    return name.slice(0, 1)
+  }
+
   getClass (type: 'avatar' | 'initial') {
     const base = [ 'avatar' ]
 
@@ -66,34 +84,16 @@ export class ActorAvatarComponent {
     return base
   }
 
-  get defaultAvatarUrl () {
-    if (this.channel) return VideoChannel.GET_DEFAULT_AVATAR_URL()
-
-    return Account.GET_DEFAULT_AVATAR_URL()
-  }
-
-  get avatarUrl () {
-    if (this.account) return Account.GET_ACTOR_AVATAR_URL(this.account)
-    if (this.channel) return VideoChannel.GET_ACTOR_AVATAR_URL(this.channel)
-
-    return ''
-  }
-
-  get initial () {
-    const name = this.account?.name
-    if (!name) return ''
-
-    return name.slice(0, 1)
-  }
-
   hasActor () {
     return !!this.account || !!this.channel
   }
 
   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 +104,7 @@ export class ActorAvatarComponent {
     }
 
     const theme = Object.keys(themes)
-                        .find(chars => chars.includes(this.initial))
+                        .find(chars => chars.includes(initialLowercase))
 
     return themes[theme]
   }