xuejianwu/yingxiangli-duanju
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: match candidate previews to video ratio

Browse Source
This commit is contained in:
xuejianwu
2026-07-30 09:55:29 +08:00
parent f9869601a3
commit afd4118fdb
3 changed files with 23 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
public/app.js
View File

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