Fix comment add avatar when unlogged

[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 b2e1ef46eac4f47af403c645c7959453d3368045..fdc8268d88b36927af0b85020bd1634cc16e7e86 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,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,14 @@ 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.channel) return VideoChannel.GET_DEFAULT_AVATAR_URL(this.getSizeNumber())
+
+    return Account.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 +71,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()