Show default avatar on network error for comments

diff --git a/client/src/app/shared/actor/actor.model.ts b/client/src/app/shared/actor/actor.model.ts
index 285f71ce0d1dc3c0627223a3d7fba85ff12b5830..9cc51b9489027cac44e8ee6713532899a4603870 100644 (file)
--- 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 d71077d1064e5d5da963fd6335fe8553b8842e6c..6e17957f88b78e388ecc56bd6565f419c843813b 100644 (file)
--- 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 b1d1fc0b5257a7f3d4c5795e5c8727cab9ab7810..096fd61e2ed81389b8b8dedec53625baf9e18457 100644 (file)
--- 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 246a0843533da0046f0e87e4ac2deb5e662f39c9..617d0fa4128f3d968843789f7e1bc278ad86e586 100644 (file)
--- 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 0c18b6e5d5b872a030d34d37a327c4c78dae57c1..61f9335d194cba0a1c01e4dad84f04809ce43bef 100644 (file)
--- 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