27hrs/dsh-long-skin
1
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: use portrait frame as loading fallback

Browse Source
This commit is contained in:
kingOfSoySauce
2026-08-21 11:22:40 +08:00
parent d2d605a0bd
commit 976fcbf9b4
7 changed files with 29 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
lib/client.js
View File

@@ -62,23 +62,11 @@ body[data-liang-skin="on"] .liang-skin-backdrop {
display: none;
}
.liang-skin-backdrop[data-media="sequence"] .liang-skin-poster {
display: none;
}
.liang-skin-backdrop[data-media="sequence"] .liang-skin-sequence-frame {
display: block;
opacity: var(--liang-portrait-opacity, 0.82);
}
.liang-skin-backdrop[data-media="poster"] .liang-skin-sequence-frame {
display: none;
}
.liang-skin-backdrop[data-media="poster"] .liang-skin-poster {
display: block;
}
.liang-skin-backdrop[data-media="color"] img {
display: none;
}
@@ -786,6 +774,7 @@ var import_jsx_runtime = require("react/jsx-runtime");
var PACKAGE_ID = "dsh-client-liang-intensity-skin";
var LOCALE_NAMESPACE = "liang.skin";
var ASSET_PREFIX = `/plugins/${PACKAGE_ID}/assets`;
var FIRST_PORTRAIT_FILE = "portrait-source-v2/stage-00.webp";
var BIND_EFFORT_KEY = "dsh-liang-intensity-skin.bind-effort";
var PORTRAIT_ANCHORS = [
{ level: 0, file: "stage-00.webp" },
@@ -835,7 +824,6 @@ var SkinPresenter = class {
scope;
theme;
root;
poster;
portrait;
preloads;
portraitReady = false;
@@ -853,17 +841,14 @@ var SkinPresenter = class {
this.root = document.createElement("div");
this.root.className = "liang-skin-backdrop";
this.root.dataset.plugin = PACKAGE_ID;
this.root.dataset.media = "poster";
this.root.dataset.media = "sequence";
this.root.setAttribute("aria-hidden", "true");
this.poster = document.createElement("img");
this.poster.className = "liang-skin-poster";
this.poster.src = `${ASSET_PREFIX}/liang-poster.webp`;
this.poster.alt = "";
this.portrait = document.createElement("img");
this.portrait.className = "liang-skin-sequence-frame";
this.portrait.alt = "";
this.portrait.draggable = false;
this.portrait.decoding = "async";
this.portrait.src = `${ASSET_PREFIX}/${FIRST_PORTRAIT_FILE}`;
this.portrait.addEventListener("error", this.handleSequenceError);
this.preloads = PORTRAIT_ANCHORS.map(({ file }) => {
const image = new Image();
@@ -880,20 +865,21 @@ var SkinPresenter = class {
this.updatePortrait(paletteForFrame(this.frame).level);
},
() => {
if (!this.disposed) this.root.dataset.media = "poster";
}
);
this.root.append(this.portrait, this.poster);
this.root.append(this.portrait);
document.body.prepend(this.root);
this.poster.addEventListener("error", this.handlePosterError);
this.unsubscribe = scope.subscribe(() => this.syncSettings());
this.syncSettings();
}
handleSequenceError = () => {
this.root.dataset.media = "poster";
};
handlePosterError = () => {
this.root.dataset.media = "color";
if (this.portrait.src.endsWith(FIRST_PORTRAIT_FILE)) {
this.root.dataset.media = "color";
return;
}
this.portraitReady = false;
this.portrait.src = `${ASSET_PREFIX}/${FIRST_PORTRAIT_FILE}`;
this.root.dataset.media = "sequence";
};
syncSettings() {
this.setEnabled(this.scope.getSnapshot().enabled);
@@ -981,7 +967,6 @@ var SkinPresenter = class {
this.unsubscribe();
if (this.raf !== 0) cancelAnimationFrame(this.raf);
this.portrait.removeEventListener("error", this.handleSequenceError);
this.poster.removeEventListener("error", this.handlePosterError);
for (const image of this.preloads) image.src = "";
this.root.remove();
document.body.removeAttribute("data-liang-skin");