Show default avatar on network error for comments

5 files changed, 16 insertions, 4 deletions

diff --git a/client/src/app/shared/actor/actor.model.ts b/client/src/app/shared/actor/actor.model.ts
index 285f71ce0..9cc51b948 100644
--- a/client/src/app/shared/actor/actor.model.ts
+++ b/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'
   }
 
diff --git a/client/src/app/shared/angular/timestamp-route-transformer.directive.ts b/client/src/app/shared/angular/timestamp-route-transformer.directive.ts
index d71077d10..6e17957f8 100644
--- a/client/src/app/shared/angular/timestamp-route-transformer.directive.ts
+++ b/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'
-
-type ElementEvent = Omit<Event, 'target'> & {
-  target: HTMLInputElement
-}
+import { ElementEvent } from '@app/shared/misc/utils'
 
 @Directive({
   selector: '[timestampRouteTransformer]'
diff --git a/client/src/app/shared/misc/utils.ts b/client/src/app/shared/misc/utils.ts
index b1d1fc0b5..096fd61e2 100644
--- a/client/src/app/shared/misc/utils.ts
+++ b/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,
diff --git a/client/src/app/videos/+video-watch/comment/video-comment.component.html b/client/src/app/videos/+video-watch/comment/video-comment.component.html
index 246a08435..617d0fa41 100644
--- a/client/src/app/videos/+video-watch/comment/video-comment.component.html
+++ b/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>
diff --git a/client/src/app/videos/+video-watch/comment/video-comment.component.ts b/client/src/app/videos/+video-watch/comment/video-comment.component.ts
index 0c18b6e5d..61f9335d1 100644
--- a/client/src/app/videos/+video-watch/comment/video-comment.component.ts
+++ b/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