implement new approach

Signed-off-by: RMidhunSuresh <rmidhunsuresh@gmail.com>

src/platform/web/Platform.js

@@ -36,6 +36,7 @@ import {BlobHandle} from "./dom/BlobHandle.js";
 import {hasReadPixelPermission, ImageHandle, VideoHandle} from "./dom/ImageHandle.js";
 import {downloadInIframe} from "./dom/download.js";
 import {Disposables} from "../../utils/Disposables.js";
+import {handleAvatarError} from "./ui/avatar.js";
 
 function addScript(src) {
     return new Promise(function (resolve, reject) {
@@ -189,6 +190,7 @@ export class Platform {
                 this._disposables.track(disposable);
             }
         }
+        this._container.addEventListener("error", handleAvatarError, true);
         window.__hydrogenViewModel = vm;
         const view = new RootView(vm);
         this._container.appendChild(view.mount());

src/platform/web/ui/avatar.js

@@ -108,16 +108,32 @@ export function renderStaticAvatar(vm, size, extraClasses = undefined) {
     let avatarClasses = classNames({
         avatar: true,
         [`size-${size}`]: true,
-        [`usercolor${vm.avatarColorNumber}`]: !hasAvatar,
+        [`usercolor${vm.avatarColorNumber}`]: true, 
+        ['has-image']: true
     });
     if (extraClasses) {
         avatarClasses += ` ${extraClasses}`;
     }
     const avatarContent = hasAvatar ? renderImg(vm, size) : text(vm.avatarLetter);
-    return tag.div({className: avatarClasses}, [avatarContent]);
+    return tag.div({className: avatarClasses, 'data-avatar-letter': vm.avatarLetter}, [avatarContent]);
 }
 
 function renderImg(vm, size) {
     const sizeStr = size.toString();
     return tag.img({src: vm.avatarUrl(size), width: sizeStr, height: sizeStr, title: vm.avatarTitle});
 }
+
+function isAvatarEvent(e) {
+    const element = e.target;
+    const parent = element.parentElement;
+    return element.tagName === "IMG" && parent.classList.contains("avatar");
+}
+
+export function handleAvatarError(e) {
+    if (!isAvatarEvent(e)) { return; }
+    const parent = e.target.parentElement;
+    const avatarLetter = parent.getAttribute("data-avatar-letter");
+    const letterNode = document.createTextNode(avatarLetter);
+    parent.appendChild(letterNode);
+    parent.classList.remove("has-image");
+}

src/platform/web/ui/css/avatar.css

@@ -31,6 +31,10 @@ limitations under the License.
     speak: none;
 }
 
+.hydrogen .avatar:not(.has-image) img{
+    display: none;
+}
+
 .hydrogen .avatar img {
     width: 100%;
     height: 100%;