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

refactor: make Liang skin image-only

Browse Source
This commit is contained in:
Leon
2026-08-18 19:03:18 +08:00
parent cfaa104fcb
commit 4060b9fb84
11 changed files with 22 additions and 144 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
lib/client.js
View File

@@ -42,7 +42,6 @@ body[data-liang-skin="on"] .liang-skin-backdrop {
opacity: 1;
}
.liang-skin-backdrop video,
.liang-skin-backdrop img {
position: absolute;
top: 50%;
@@ -63,7 +62,6 @@ body[data-liang-skin="on"] .liang-skin-backdrop {
display: none;
}
.liang-skin-backdrop[data-media="sequence"] video,
.liang-skin-backdrop[data-media="sequence"] .liang-skin-poster {
display: none;
}
@@ -73,12 +71,6 @@ body[data-liang-skin="on"] .liang-skin-backdrop {
opacity: var(--liang-portrait-opacity, 0.82);
}
.liang-skin-backdrop[data-media="video"] .liang-skin-sequence-frame,
.liang-skin-backdrop[data-media="video"] .liang-skin-poster {
display: none;
}
.liang-skin-backdrop[data-media="poster"] video,
.liang-skin-backdrop[data-media="poster"] .liang-skin-sequence-frame {
display: none;
}
@@ -87,7 +79,6 @@ body[data-liang-skin="on"] .liang-skin-backdrop {
display: block;
}
.liang-skin-backdrop[data-media="color"] video,
.liang-skin-backdrop[data-media="color"] img {
display: none;
}
@@ -652,7 +643,6 @@ body[data-liang-skin="on"] .liang-effort-control__range::-webkit-slider-thumb {
width: 92px;
}
.liang-skin-backdrop video,
.liang-skin-backdrop img {
right: -18vw;
width: 92vw;
@@ -663,7 +653,6 @@ body[data-liang-skin="on"] .liang-effort-control__range::-webkit-slider-thumb {
@media (prefers-reduced-motion: reduce) {
.liang-skin-backdrop,
.liang-skin-backdrop video,
.liang-skin-backdrop img,
body[data-liang-skin="on"] button,
body[data-liang-skin="on"] input,
@@ -797,7 +786,6 @@ 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 VIDEO_DURATION = 8.033;
var BIND_EFFORT_KEY = "dsh-liang-intensity-skin.bind-effort";
var PORTRAIT_ANCHORS = [
{ level: 0, file: "stage-00.png" },
@@ -825,6 +813,7 @@ var PORTRAIT_ANCHORS = [
{ level: 29, file: "level-29.png" },
{ level: 30, file: "stage-30.png" }
];
var ANCHOR_LEVELS = PORTRAIT_ANCHORS.map((anchor) => anchor.level);
var cssVariables = [
"--liang-strength",
"--liang-page",
@@ -846,7 +835,6 @@ var SkinPresenter = class {
scope;
theme;
root;
video;
poster;
portrait;
preloads;
@@ -866,17 +854,6 @@ var SkinPresenter = class {
this.root.dataset.plugin = PACKAGE_ID;
this.root.dataset.media = "sequence";
this.root.setAttribute("aria-hidden", "true");
this.video = document.createElement("video");
this.video.muted = true;
this.video.playsInline = true;
this.video.preload = "auto";
const webm = document.createElement("source");
webm.src = `${ASSET_PREFIX}/liang-evolution.webm`;
webm.type = "video/webm";
const mp4 = document.createElement("source");
mp4.src = `${ASSET_PREFIX}/liang-evolution.mp4`;
mp4.type = "video/mp4";
this.video.append(webm, mp4);
this.poster = document.createElement("img");
this.poster.className = "liang-skin-poster";
this.poster.src = `${ASSET_PREFIX}/liang-poster.png`;
@@ -885,29 +862,22 @@ var SkinPresenter = class {
this.portrait.className = "liang-skin-sequence-frame";
this.portrait.alt = "";
this.portrait.draggable = false;
this.portrait.decoding = "async";
this.portrait.addEventListener("error", this.handleSequenceError);
this.preloads = PORTRAIT_ANCHORS.map(({ file }) => {
const image = new Image();
image.decoding = "async";
image.src = `${ASSET_PREFIX}/portrait-source-v2/${file}`;
return image;
});
this.root.append(this.video, this.portrait, this.poster);
this.root.append(this.portrait, this.poster);
document.body.prepend(this.root);
this.video.addEventListener("loadedmetadata", this.handleMetadata);
this.video.addEventListener("error", this.handleVideoError);
this.poster.addEventListener("error", this.handlePosterError);
this.video.load();
this.unsubscribe = scope.subscribe(() => this.syncSettings());
this.syncSettings();
}
handleMetadata = () => {
this.seek(this.frame);
};
handleVideoError = () => {
this.root.dataset.media = "poster";
};
handleSequenceError = () => {
this.root.dataset.media = "video";
this.root.dataset.media = "poster";
};
handlePosterError = () => {
this.root.dataset.media = "color";
@@ -966,7 +936,6 @@ var SkinPresenter = class {
body.style.setProperty("--liang-hover", palette.hover);
body.style.setProperty("--liang-portrait-opacity", palette.portraitOpacity);
this.updatePortrait(palette.level);
this.seek(this.frame);
}
syncNativeTheme(theme = paletteForFrame(this.frame).stage === 5 ? "dark" : "light") {
if (!this.enabled || this.theme.getTheme().preference === theme) return;
@@ -975,7 +944,7 @@ var SkinPresenter = class {
updatePortrait(level) {
const { lowerIndex, upperIndex, mix: mix2 } = portraitBlendForLevel(
level,
PORTRAIT_ANCHORS.map((anchor) => anchor.level)
ANCHOR_LEVELS
);
const lower = PORTRAIT_ANCHORS[lowerIndex];
const upper = PORTRAIT_ANCHORS[upperIndex];
@@ -983,12 +952,6 @@ var SkinPresenter = class {
const source = `${ASSET_PREFIX}/portrait-source-v2/${selected.file}`;
if (this.portrait.getAttribute("src") !== source) this.portrait.src = source;
}
seek(frame) {
if (this.video.readyState < 1 || this.video.duration === 0) return;
const duration = Number.isFinite(this.video.duration) ? this.video.duration : VIDEO_DURATION;
const target = Math.min(Math.max(0, duration - 1e-3), frame / PREVIEW_MAX_FRAME * duration);
if (Math.abs(this.video.currentTime - target) > 0.025) this.video.currentTime = target;
}
async choose(enabled) {
this.setEnabled(enabled);
try {
@@ -1003,9 +966,6 @@ var SkinPresenter = class {
this.disposed = true;
this.unsubscribe();
if (this.raf !== 0) cancelAnimationFrame(this.raf);
this.video.pause();
this.video.removeEventListener("loadedmetadata", this.handleMetadata);
this.video.removeEventListener("error", this.handleVideoError);
this.portrait.removeEventListener("error", this.handleSequenceError);
this.poster.removeEventListener("error", this.handlePosterError);
for (const image of this.preloads) image.src = "";