Fixed remote icon loader for local icons

modules/renderer/IconHelper.ts

@@ -1,15 +1,17 @@
 import * as electron from "electron";
+import {NativeImage} from "electron";
 import * as loader from "tc-loader";
 import {Stage} from "tc-loader";
 
 import {
-    spriteUrl as kClientSpriteUrl,
+    ClientIcon,
-    spriteWidth as kClientSpriteWidth,
+    spriteEntries as kClientSpriteEntries,
     spriteHeight as kClientSpriteHeight,
-    spriteEntries as kClientSpriteEntries, ClientIcon
+    spriteUrl as kClientSpriteUrl,
+    spriteWidth as kClientSpriteWidth
 } from "svg-sprites/client-icons";
-import {NativeImage} from "electron";
 import {RemoteIcon} from "tc-shared/file/Icons";
+import {LogCategory, logError} from "tc-shared/log";
 
 let nativeSprite: NativeImage;
 
@@ -107,34 +109,49 @@ export class RemoteIconWrapper {
         }
     }
 
-    private handleIconStateChanged() {
+    private async handleIconStateChanged() {
         if(this.icon.getState() === "loaded") {
-            const imageUrl = this.icon.getImageUrl();
+            let imageUrl, dataUrl;
-            this.currentImageUrl = this.icon.getImageUrl();
+            try {
-
+                if(this.icon.iconId >= 0 && this.icon.iconId <= 1000) {
-            const image = new Image();
+                    imageUrl = "local-" + this.icon.iconId;
-            image.src = imageUrl;
+                    dataUrl = clientIconClassToImage(ClientIcon["Group_" + this.icon.iconId]).toDataURL();
-
-            new Promise((resolve, reject) => {
-                image.onload = resolve;
-                image.onerror = reject;
-            }).then(() => {
-                if(this.currentImageUrl !== imageUrl) { return; }
-
-                const canvas = document.createElement("canvas");
-                if(image.naturalWidth > 1000 || image.naturalHeight > 1000) {
-                    throw "image dimensions are too large";
                 } else {
-                    canvas.width = image.naturalWidth;
+                    imageUrl = this.icon.getImageUrl();
-                    canvas.height = image.naturalHeight;
+                    this.currentImageUrl = imageUrl;
+
+                    const image = new Image();
+                    image.src = imageUrl;
+
+                    await new Promise((resolve, reject) => {
+                        image.onload = resolve;
+                        image.onerror = reject;
+                    });
+
+                    if(this.currentImageUrl !== imageUrl) { return; }
+
+                    const canvas = document.createElement("canvas");
+                    if(image.naturalWidth > 1000 || image.naturalHeight > 1000) {
+                        throw "image dimensions are too large";
+                    } else {
+                        canvas.width = image.naturalWidth;
+                        canvas.height = image.naturalHeight;
+                    }
+
+                    canvas.getContext("2d").drawImage(image, 0, 0);
+                    dataUrl = canvas.toDataURL();
+
+                    /* We need to reset the current image URL in order to fire a changed event */
+                    this.currentImageUrl = undefined;
                 }
+            } catch (error) {
+                logError(LogCategory.GENERAL, tr("Failed to render remote icon %s-%d: %o"), this.icon.serverUniqueId, this.icon.iconId, error);
 
-                canvas.getContext("2d").drawImage(image, 0, 0);
+                imageUrl = "--error--" + Date.now();
+                dataUrl = clientIconClassToImage(ClientIcon.Error).toDataURL();
+            }
 
-                this.setDataUrl(imageUrl, canvas.toDataURL());
+            this.setDataUrl(imageUrl, dataUrl);
-            }).catch(() => {
-                this.setDataUrl(imageUrl, clientIconClassToImage(ClientIcon.Error).toDataURL());
-            });
         } else if(this.icon.getState() === "error") {
             this.setDataUrl(undefined, clientIconClassToImage(ClientIcon.Error).toDataURL());
         } else {
@@ -143,7 +160,7 @@ export class RemoteIconWrapper {
     }
 
     private setDataUrl(sourceImageUrl: string | undefined, dataUrl: string) {
-        if(sourceImageUrl && this.currentImageUrl !== sourceImageUrl) { return; }
+        if(sourceImageUrl && this.currentImageUrl === sourceImageUrl) { return; }
         this.currentImageUrl = undefined; /* no image is loading any more */
 
         if(this.dataUrl === dataUrl) { return; }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "TeaClient",
-  "version": "1.5.0-5",
+  "version": "1.5.0-6",
   "description": "",
   "main": "main.js",
   "scripts": {