Fixed remote icon loader for local icons

This commit is contained in:
WolverinDEV 2020-12-29 17:52:30 +01:00
parent 150224a1c6
commit 90b5f3eacf
2 changed files with 46 additions and 29 deletions

View File

@ -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; }

View File

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