From 5f1346568de7ff814799ac43b1981e0ff3417b5f Mon Sep 17 00:00:00 2001
From: RMidhunSuresh <rmidhunsuresh@gmail.com>
Date: Mon, 28 Jun 2021 23:18:07 +0530
Subject: [PATCH] Handle avatar error

Signed-off-by: RMidhunSuresh <rmidhunsuresh@gmail.com>
---
 src/platform/web/ui/avatar.js | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/src/platform/web/ui/avatar.js b/src/platform/web/ui/avatar.js
index 8845f887..715a4890 100644
--- a/src/platform/web/ui/avatar.js
+++ b/src/platform/web/ui/avatar.js
@@ -44,6 +44,11 @@ export class AvatarView extends BaseUpdateView {
         return false;
     }
 
+    setAvatarError() {
+        this._avatarError = true;
+        this.update(this.value);
+    }
+
     _avatarTitleChanged() {
         if (this.value.avatarTitle !== this._avatarTitle) {
             this._avatarTitle = this.value.avatarTitle;
@@ -65,6 +70,8 @@ export class AvatarView extends BaseUpdateView {
         this._avatarLetterChanged();
         this._avatarTitleChanged();
         this._root = renderStaticAvatar(this.value, this._size);
+        const image = this._root.firstChild;
+        image?.addEventListener("error", () => this.setAvatarError());
         // takes care of update being called when needed
         super.mount(options);
         return this._root;
@@ -76,10 +83,10 @@ export class AvatarView extends BaseUpdateView {
 
     update(vm) {
         // important to always call _...changed for every prop 
-        if (this._avatarUrlChanged()) {
+        if (this._avatarUrlChanged() || this._avatarError) {
             // avatarColorNumber won't change, it's based on room/user id
             const bgColorClass = `usercolor${vm.avatarColorNumber}`;
-            if (vm.avatarUrl(this._size)) {
+            if (vm.avatarUrl(this._size) && !this._avatarError) {
                 this._root.replaceChild(renderImg(vm, this._size), this._root.firstChild);
                 this._root.classList.remove(bgColorClass);
             } else {
@@ -87,7 +94,7 @@ export class AvatarView extends BaseUpdateView {
                 this._root.classList.add(bgColorClass);
             }
         }
-        const hasAvatar = !!vm.avatarUrl(this._size);
+        const hasAvatar = !!(vm.avatarUrl(this._size) && !vm._avatarError);
         if (this._avatarTitleChanged() && hasAvatar) {
             const img = this._root.firstChild;
             img.setAttribute("title", vm.avatarTitle);
@@ -95,6 +102,7 @@ export class AvatarView extends BaseUpdateView {
         if (this._avatarLetterChanged() && !hasAvatar) {
             this._root.firstChild.textContent = vm.avatarLetter;
         }
+        if (this._avatarError) { this._avatarError = false;}
     }
 }
 
@@ -104,7 +112,7 @@ export class AvatarView extends BaseUpdateView {
  * @return {Element}
  */
 export function renderStaticAvatar(vm, size, extraClasses = undefined) {
-    const hasAvatar = !!vm.avatarUrl(size);
+    const hasAvatar = !!(vm.avatarUrl(size) && !vm.avatarError);
     let avatarClasses = classNames({
         avatar: true,
         [`size-${size}`]: true,