diff --git a/modules/renderer/IconHelper.ts b/modules/renderer/IconHelper.ts index 6459510..e5e2689 100644 --- a/modules/renderer/IconHelper.ts +++ b/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, - spriteWidth as kClientSpriteWidth, + ClientIcon, + 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(); - this.currentImageUrl = this.icon.getImageUrl(); - - const image = new Image(); - image.src = imageUrl; - - 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"; + let imageUrl, dataUrl; + try { + if(this.icon.iconId >= 0 && this.icon.iconId <= 1000) { + imageUrl = "local-" + this.icon.iconId; + dataUrl = clientIconClassToImage(ClientIcon["Group_" + this.icon.iconId]).toDataURL(); } else { - canvas.width = image.naturalWidth; - canvas.height = image.naturalHeight; + imageUrl = this.icon.getImageUrl(); + 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()); - }).catch(() => { - this.setDataUrl(imageUrl, clientIconClassToImage(ClientIcon.Error).toDataURL()); - }); + this.setDataUrl(imageUrl, dataUrl); } 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; } diff --git a/package.json b/package.json index 6da7bc7..a199095 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "TeaClient", - "version": "1.5.0-5", + "version": "1.5.0-6", "description": "", "main": "main.js", "scripts": {