From afd4118fdb6dd076d3b81fa25a1ae29ae747a740 Mon Sep 17 00:00:00 2001
From: xuejianwu <374601383@qq.com>
Date: Thu, 30 Jul 2026 09:55:29 +0800
Subject: [PATCH] fix: match candidate previews to video ratio
---
public/app.js | 16 ++++++++++++++++
public/index.html | 4 ++--
public/styles.css | 8 +++++---
3 files changed, 23 insertions(+), 5 deletions(-)
diff --git a/public/app.js b/public/app.js
index 4666c20..27942d0 100644
--- a/public/app.js
+++ b/public/app.js
@@ -224,6 +224,7 @@ el.videoForm.addEventListener("submit", async (event) => {
createdAt: Date.now(),
lastCheckedAt: null,
progress: 5,
+ ratio: shot.ratio,
};
shot.versions.push(version);
state.activeGenerationShotId = shot.id;
@@ -692,10 +693,16 @@ function renderVersionList() {
card.className = `version-card${shot.selectedVersionId === version.id ? " selected" : ""}`;
const preview = document.createElement("div");
preview.className = "version-preview";
+ setVersionPreviewRatio(preview, version.ratio || shot.ratio);
if (version.videoUrl) {
const video = document.createElement("video");
video.src = version.videoUrl;
video.controls = true;
+ video.playsInline = true;
+ video.preload = "metadata";
+ video.addEventListener("loadedmetadata", () => {
+ if (video.videoWidth && video.videoHeight) setVersionPreviewRatio(preview, `${video.videoWidth}:${video.videoHeight}`);
+ }, { once: true });
preview.appendChild(video);
} else preview.textContent = version.status === "running" ? "生成中" : version.status === "failed" ? "生成失败" : "暂无预览";
const details = document.createElement("div");
@@ -734,6 +741,15 @@ function renderVersionList() {
});
}
+function setVersionPreviewRatio(preview, ratio) {
+ const [width, height] = String(ratio || "16:9").split(":").map(Number);
+ const safeWidth = width > 0 ? width : 16;
+ const safeHeight = height > 0 ? height : 9;
+ preview.style.setProperty("--preview-ratio", `${safeWidth} / ${safeHeight}`);
+ preview.classList.toggle("portrait", safeHeight > safeWidth);
+ preview.classList.toggle("square", safeHeight === safeWidth);
+}
+
function videoProxyUrl(taskId) {
const base = API_BASE || location.origin;
return `${base}/api/videos/${encodeURIComponent(taskId)}/video.mp4`;
diff --git a/public/index.html b/public/index.html
index 8028e5c..0c562d3 100644
--- a/public/index.html
+++ b/public/index.html
@@ -4,7 +4,7 @@
营响力｜AI 短剧数字人 Demo
-
+