X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;ds=sidebyside;f=client%2Fsrc%2Fapp%2Fshared%2Fshared-actor-image%2Factor-avatar.component.ts;h=fa4f1e51f99678d04e2f3650119d93854fa8073c;hb=714e33a7428b71ef98129ce85a4bd64140bcd912;hp=b2e1ef46eac4f47af403c645c7959453d3368045;hpb=28dca0a2211524bbf3ad17666c607eb6325763b8;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 b2e1ef46e..fa4f1e51f 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,4 +1,4 @@
-import { Component, Input } from '@angular/core'
+import { Component, Input, OnChanges } from '@angular/core'
 import { VideoChannel } from '../shared-main'
 import { Account } from '../shared-main/account/account.model'
 
@@ -15,7 +15,7 @@ export type ActorAvatarSize = '18' | '25' | '28' | '32' | '34' | '35' | '36' | '
   styleUrls: [ './actor-avatar.component.scss' ],
   templateUrl: './actor-avatar.component.html'
 })
-export class ActorAvatarComponent {
+export class ActorAvatarComponent implements OnChanges {
   private _title: string
 
   @Input() account: ActorInput
@@ -23,7 +23,7 @@ export class ActorAvatarComponent {
 
   @Input() previewImage: string
 
-  @Input() size: ActorAvatarSize = '32'
+  @Input() size: ActorAvatarSize
 
   // Use an external link
   @Input() href: string
@@ -42,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,13 +52,13 @@ export class ActorAvatarComponent {
   }
 
   get defaultAvatarUrl () {
-    if (this.account) return Account.GET_DEFAULT_AVATAR_URL(+this.size)
-    if (this.channel) return VideoChannel.GET_DEFAULT_AVATAR_URL(+this.size)
+    if (this.account) return Account.GET_DEFAULT_AVATAR_URL(this.getSizeNumber())
+    if (this.channel) return VideoChannel.GET_DEFAULT_AVATAR_URL(this.getSizeNumber())
   }
 
   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)
+    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 ''
   }
@@ -68,26 +70,30 @@ export class ActorAvatarComponent {
     return name.slice(0, 1)
   }
 
-  getClass (type: 'avatar' | 'initial') {
-    const base = [ 'avatar' ]
+  ngOnChanges () {
+    this.classes = [ 'avatar' ]
 
-    if (this.size) base.push(`avatar-${this.size}`)
+    if (this.size) this.classes.push(`avatar-${this.size}`)
 
-    if (this.channel) base.push('channel')
-    else base.push('account')
+    if (this.channel) this.classes.push('channel')
+    else this.classes.push('account')
 
-    if (type === 'initial' && this.initial) {
-      base.push('initial')
-      base.push(this.getColorTheme())
+    if (!this.avatarUrl && this.initial) {
+      this.classes.push('initial')
+      this.classes.push(this.getColorTheme())
     }
-
-    return base
   }
 
   hasActor () {
     return !!this.account || !!this.channel
   }
 
+  private getSizeNumber () {
+    if (this.size) return +this.size
+
+    return undefined
+  }
+
   private getColorTheme () {
     const initialLowercase = this.initial.toLowerCase()