Fix displaying remote actor avatars

client/src/app/shared/shared-actor-image/actor-avatar.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input, OnChanges } from '@angular/core'
+import { Component, Input, OnChanges, OnInit } 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 implements OnChanges {
+export class ActorAvatarComponent implements OnInit, OnChanges {
   private _title: string
 
   @Input() actor: ActorInput
@@ -43,31 +43,25 @@ export class ActorAvatarComponent implements OnChanges {
   }
 
   classes: string[] = []
+  alt: string
+  defaultAvatarUrl: string
+  avatarUrl: string
 
-  get alt () {
-    if (this.isAccount()) return $localize`Account avatar`
-    if (this.isChannel()) return $localize`Channel avatar`
+  ngOnInit () {
+    this.buildDefaultAvatarUrl()
 
-    return ''
-  }
-
-  get defaultAvatarUrl () {
-    if (this.isChannel()) return VideoChannel.GET_DEFAULT_AVATAR_URL(this.getSizeNumber())
-
-    // account or unlogged
-    return Account.GET_DEFAULT_AVATAR_URL(this.getSizeNumber())
+    this.buildClasses()
+    this.buildAlt()
+    this.buildAvatarUrl()
   }
 
-  get avatarUrl () {
-    if (!this.actor) return ''
-
-    if (this.isAccount()) return Account.GET_ACTOR_AVATAR_URL(this.actor, this.getSizeNumber())
-    if (this.isChannel()) return VideoChannel.GET_ACTOR_AVATAR_URL(this.actor, this.getSizeNumber())
-
-    return ''
+  ngOnChanges () {
+    this.buildClasses()
+    this.buildAlt()
+    this.buildAvatarUrl()
   }
 
-  ngOnChanges () {
+  private buildClasses () {
     this.classes = [ 'avatar' ]
 
     if (this.size) {
@@ -87,6 +81,37 @@ export class ActorAvatarComponent implements OnChanges {
     }
   }
 
+  private buildAlt () {
+    if (this.isAccount()) this.alt = $localize`Account avatar`
+    else if (this.isChannel()) this.alt = $localize`Channel avatar`
+    else this.alt = ''
+  }
+
+  private buildDefaultAvatarUrl () {
+    this.defaultAvatarUrl = this.isChannel()
+      ? VideoChannel.GET_DEFAULT_AVATAR_URL(this.getSizeNumber())
+      : Account.GET_DEFAULT_AVATAR_URL(this.getSizeNumber())
+  }
+
+  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 = ''
+  }
+
   displayImage () {
     if (this.actorType === 'unlogged') return true
 

client/src/app/shared/shared-main/account/actor.model.ts

@@ -23,7 +23,7 @@ export abstract class Actor implements ServerActor {
   static GET_ACTOR_AVATAR_URL (actor: { avatars: { width: number, url?: string, path: string }[] }, size?: number) {
     const avatarsAscWidth = actor.avatars.sort((a, b) => a.width - b.width)
 
-    const avatar = size
+    const avatar = size && avatarsAscWidth.length > 1
       ? avatarsAscWidth.find(a => a.width >= size)
       : avatarsAscWidth[avatarsAscWidth.length - 1] // Bigger one