Skip to content

Commit

Permalink
fix: render thumbinal empty when resizing;
Browse files Browse the repository at this point in the history
  • Loading branch information
@MapoMagpie
MapoMagpie committed Aug 27, 2024
1 parent 560423f commit 37fae50
Show file tree
Hide file tree
Showing 3 changed files with 65 additions and 46 deletions.
55 changes: 32 additions & 23 deletions eh-view-enhance.user.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1326,7 +1326,10 @@ Report issues here: <a target="_blank" href="https://github.com/MapoMagpie/eh-vi
}
this.node.blobSrc = transient.imgSrcCSP ? this.node.originSrc : URL.createObjectURL(new Blob([this.data], { type: this.contentType }));
this.node.mimeType = this.contentType;
this.node.render(() => this.rendered = false);
this.node.render((reason) => {
evLog("error", "render image failed, " + reason);
this.rendered = false;
});
this.stage = 3 /* DONE */;
case 3 /* DONE */:
return null;
Expand Down Expand Up @@ -1363,7 +1366,10 @@ Report issues here: <a target="_blank" href="https://github.com/MapoMagpie/eh-vi
this.node.picked = picked;
if (!this.rendered) {
this.rendered = true;
this.node.render(() => this.rendered = false);
this.node.render((reason) => {
evLog("error", "render image failed, " + reason);
this.rendered = false;
});
this.node.changeStyle(this.stage === 3 /* DONE */ ? "fetched" : void 0, this.failedReason);
} else if (shouldChangeStyle) {
let status;
Expand Down Expand Up @@ -2602,6 +2608,7 @@ Report issues here: <a target="_blank" href="https://github.com/MapoMagpie/eh-vi
mimeType;
downloadBar;
picked = true;
debouncer = new Debouncer();
constructor(thumbnailSrc, href, title, delaySRC, originSrc) {
this.thumbnailSrc = thumbnailSrc;
this.href = href;
Expand Down Expand Up @@ -2652,32 +2659,34 @@ Report issues here: <a target="_blank" href="https://github.com/MapoMagpie/eh-vi
this.canvasCtx?.drawImage(this.imgElement, 0, 0, this.canvasElement.width, this.canvasElement.height);
this.imgElement.src = "";
} else {
resizing(this.imgElement, this.canvasElement).then(() => this.imgElement.src = "").catch(() => this.imgElement.src = this.canvasCtx?.drawImage(this.imgElement, 0, 0, this.canvasElement.width, this.canvasElement.height) || "");
resizing(this.imgElement, this.canvasElement).then(() => window.setTimeout(() => this.imgElement.src = "", 100)).catch(() => this.imgElement.src = this.canvasCtx?.drawImage(this.imgElement, 0, 0, this.canvasElement.width, this.canvasElement.height) || "");
}
}
render(onfailed) {
if (!this.imgElement)
return onfailed("element undefined");
let justThumbnail = !this.blobSrc;
if (this.mimeType === "image/gif" || this.mimeType?.startsWith("video")) {
const tip = OVERLAY_TIP.cloneNode(true);
tip.firstChild.textContent = this.mimeType.split("/")[1].toUpperCase();
this.root?.appendChild(tip);
justThumbnail = true;
}
this.imgElement.onload = () => this.resize(onfailed);
this.imgElement.onerror = () => onfailed("img load error");
if (justThumbnail) {
const delaySRC = this.delaySRC;
this.delaySRC = void 0;
if (delaySRC) {
delaySRC.then((src) => (this.thumbnailSrc = src) && this.render(onfailed)).catch(onfailed);
this.debouncer.addEvent("IMG-RENDER", () => {
if (!this.imgElement)
return onfailed("element undefined");
let justThumbnail = !this.blobSrc;
if (this.mimeType === "image/gif" || this.mimeType?.startsWith("video")) {
const tip = OVERLAY_TIP.cloneNode(true);
tip.firstChild.textContent = this.mimeType.split("/")[1].toUpperCase();
this.root?.appendChild(tip);
justThumbnail = true;
}
this.imgElement.onload = () => this.resize(onfailed);
this.imgElement.onerror = () => onfailed("img load error");
if (justThumbnail) {
const delaySRC = this.delaySRC;
this.delaySRC = void 0;
if (delaySRC) {
delaySRC.then((src) => (this.thumbnailSrc = src) && this.render(onfailed)).catch(onfailed);
} else {
this.imgElement.src = this.thumbnailSrc || this.blobSrc || DEFAULT_THUMBNAIL;
}
} else {
this.imgElement.src = this.thumbnailSrc || this.blobSrc || DEFAULT_THUMBNAIL;
this.imgElement.src = this.blobSrc || this.thumbnailSrc || DEFAULT_THUMBNAIL;
}
} else {
this.imgElement.src = this.blobSrc || this.thumbnailSrc || DEFAULT_THUMBNAIL;
}
}, 30);
}
unrender() {
if (!this.imgElement)
Expand Down
10 changes: 8 additions & 2 deletions src/img-fetcher.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -127,7 +127,10 @@ export class IMGFetcher implements VisualNode {
}
this.node.blobSrc = transient.imgSrcCSP ? this.node.originSrc : URL.createObjectURL(new Blob([this.data], { type: this.contentType }));
this.node.mimeType = this.contentType;
this.node.render(() => this.rendered = false);
this.node.render((reason) => {
evLog("error", "render image failed, " + reason);
this.rendered = false;
});
this.stage = FetchState.DONE;
case FetchState.DONE:
return null;
Expand Down Expand Up @@ -167,7 +170,10 @@ export class IMGFetcher implements VisualNode {
if (!this.rendered) {
// evLog("info", `img node [${this.index}] rendered`);
this.rendered = true;
this.node.render(() => this.rendered = false);
this.node.render((reason) => {
evLog("error", "render image failed, " + reason);
this.rendered = false;
});
this.node.changeStyle(this.stage === FetchState.DONE ? "fetched" : undefined, this.failedReason);
} else if (shouldChangeStyle) {
let status: "fetching" | "fetched" | "failed" | "init" | undefined;
Expand Down
46 changes: 25 additions & 21 deletions src/img-node.ts
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import { DownloadState } from "./img-fetcher";
import { Chapter } from "./page-fetcher";
import { Debouncer } from "./utils/debouncer";
import { resizing } from "./utils/image-resizing";

const DEFAULT_THUMBNAIL = "data:image/gif;base64,R0lGODlhAQABAIAAAMLCwgAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==";
Expand Down Expand Up @@ -40,6 +41,7 @@ export default class ImageNode {
mimeType?: string;
private downloadBar?: HTMLElement;
picked: boolean = true;
private debouncer: Debouncer = new Debouncer();
constructor(thumbnailSrc: string, href: string, title: string, delaySRC?: Promise<string>, originSrc?: string) {
this.thumbnailSrc = thumbnailSrc;
this.href = href;
Expand Down Expand Up @@ -93,33 +95,35 @@ export default class ImageNode {
this.imgElement!.src = "";
} else {
resizing(this.imgElement, this.canvasElement)
.then(() => this.imgElement!.src = "")
.then(() => window.setTimeout(() => this.imgElement!.src = "", 100))
.catch(() => this.imgElement!.src = this.canvasCtx?.drawImage(this.imgElement!, 0, 0, this.canvasElement!.width, this.canvasElement!.height) || "");
}
}

render(onfailed: Onfailed) {
if (!this.imgElement) return onfailed("element undefined");
let justThumbnail = !this.blobSrc;
if (this.mimeType === "image/gif" || this.mimeType?.startsWith("video")) {
const tip = OVERLAY_TIP.cloneNode(true);
tip.firstChild!.textContent = this.mimeType.split("/")[1].toUpperCase();
this.root?.appendChild(tip);
justThumbnail = true;
}
this.imgElement.onload = () => this.resize(onfailed);
this.imgElement.onerror = () => onfailed("img load error");
if (justThumbnail) {
const delaySRC = this.delaySRC;
this.delaySRC = undefined;
if (delaySRC) {
delaySRC.then(src => (this.thumbnailSrc = src) && this.render(onfailed)).catch(onfailed);
} else { // normally set src
this.imgElement.src = this.thumbnailSrc || this.blobSrc || DEFAULT_THUMBNAIL;
this.debouncer.addEvent("IMG-RENDER", () => {
if (!this.imgElement) return onfailed("element undefined");
let justThumbnail = !this.blobSrc;
if (this.mimeType === "image/gif" || this.mimeType?.startsWith("video")) {
const tip = OVERLAY_TIP.cloneNode(true);
tip.firstChild!.textContent = this.mimeType.split("/")[1].toUpperCase();
this.root?.appendChild(tip);
justThumbnail = true;
}
} else {
this.imgElement.src = this.blobSrc || this.thumbnailSrc || DEFAULT_THUMBNAIL;
}
this.imgElement.onload = () => this.resize(onfailed);
this.imgElement.onerror = () => onfailed("img load error");
if (justThumbnail) {
const delaySRC = this.delaySRC;
this.delaySRC = undefined;
if (delaySRC) {
delaySRC.then(src => (this.thumbnailSrc = src) && this.render(onfailed)).catch(onfailed);
} else { // normally set src
this.imgElement.src = this.thumbnailSrc || this.blobSrc || DEFAULT_THUMBNAIL;
}
} else {
this.imgElement.src = this.blobSrc || this.thumbnailSrc || DEFAULT_THUMBNAIL;
}
}, 30);
}

unrender() {
Expand Down

0 comments on commit 37fae50

Please sign in to comment.