Show default avatar on network error for comments

client/src/app/shared/actor/actor.model.ts

@@ -20,6 +20,10 @@ export abstract class Actor implements ActorServer {
 
     if (actor && actor.avatar) return absoluteAPIUrl + actor.avatar.path
 
+    this.GET_DEFAULT_AVATAR_URL()
+  }
+
+  static GET_DEFAULT_AVATAR_URL () {
     return window.location.origin + '/client/assets/images/default-avatar.png'
   }
 

client/src/app/shared/angular/timestamp-route-transformer.directive.ts

@@ -1,9 +1,6 @@
 import { Directive, ElementRef, HostListener, Output, EventEmitter } from '@angular/core'
 import { Router } from '@angular/router'
-
+import { ElementEvent } from '@app/shared/misc/utils'
-type ElementEvent = Omit<Event, 'target'> & {
-  target: HTMLInputElement
-}
 
 @Directive({
   selector: '[timestampRouteTransformer]'

client/src/app/shared/misc/utils.ts

@@ -4,6 +4,10 @@ import { DatePipe } from '@angular/common'
 import { environment } from '../../../environments/environment'
 import { AuthService } from '../../core/auth'
 
+type ElementEvent = Omit<Event, 'target'> & {
+  target: HTMLElement
+}
+
 function getParameterByName (name: string, url: string) {
   if (!url) url = window.location.href
   name = name.replace(/[\[\]]/g, '\\$&')
@@ -190,6 +194,7 @@ function isXPercentInViewport (el: HTMLElement, percentVisible: number) {
 }
 
 export {
+  ElementEvent,
   sortBy,
   durationToString,
   lineFeedToHtml,

client/src/app/videos/+video-watch/comment/video-comment.component.html

@@ -4,6 +4,7 @@
       <img
         class="comment-avatar"
         [src]="comment.accountAvatarUrl"
+        (error)="switchToDefaultAvatar($event)"
         alt="Avatar"
       />
     </a>

client/src/app/videos/+video-watch/comment/video-comment.component.ts

@@ -9,6 +9,7 @@ import { MarkdownService } from '@app/shared/renderer'
 import { Account } from '@app/shared/account/account.model'
 import { Notifier } from '@app/core'
 import { UserService } from '@app/shared'
+import { Actor } from '@app/shared/actor/actor.model'
 
 @Component({
   selector: 'my-video-comment',
@@ -101,6 +102,10 @@ export class VideoCommentComponent implements OnInit, OnChanges {
       )
   }
 
+  switchToDefaultAvatar ($event: Event) {
+    ($event.target as HTMLImageElement).src = Actor.GET_DEFAULT_AVATAR_URL()
+  }
+
   private getUserIfNeeded (account: Account) {
     if (!account.userId) return
     if (!this.authService.isLoggedIn()) return