From 5093c30c061937c8b73a6f02292bc3a13f0a1ff8 Mon Sep 17 00:00:00 2001
From: Will Miao <willmiao.dev@gmail.com>
Date: Wed, 19 Nov 2025 22:42:58 +0800
Subject: [PATCH] feat: add video support to model version delete preview

- Extend CSS to style video elements in delete previews
- Add video rendering logic for model version previews
- Use consistent placeholder image for missing previews
- Maintain existing image preview functionality while adding video support

This allows users to see video previews when deleting model versions, improving the user experience for video-based models.
---
 static/css/components/modal/_base.css         |  5 ++--
 .../js/components/shared/ModelVersionsTab.js  | 25 ++++++++++++++++---
 2 files changed, 25 insertions(+), 5 deletions(-)

diff --git a/static/css/components/modal/_base.css b/static/css/components/modal/_base.css
index e98e7009..c90eebf5 100644
--- a/static/css/components/modal/_base.css
+++ b/static/css/components/modal/_base.css
@@ -315,7 +315,8 @@ button:disabled,
     overflow: hidden;
 }
 
-.delete-preview img {
+.delete-preview img,
+.delete-preview video {
     width: 100%;
     height: auto;
     max-height: 150px;
@@ -345,4 +346,4 @@ button:disabled,
     font-style: italic;
     margin-top: var(--space-1);
     text-align: center;
-}
\ No newline at end of file
+}
diff --git a/static/js/components/shared/ModelVersionsTab.js b/static/js/components/shared/ModelVersionsTab.js
index 456c17f5..cf9a402a 100644
--- a/static/js/components/shared/ModelVersionsTab.js
+++ b/static/js/components/shared/ModelVersionsTab.js
@@ -7,6 +7,7 @@ import { state } from '../../state/index.js';
 import { formatFileSize } from './utils.js';
 
 const VIDEO_EXTENSIONS = ['.mp4', '.webm', '.mov', '.mkv'];
+const PREVIEW_PLACEHOLDER_URL = '/loras_static/images/no-preview.png';
 
 function buildCivitaiVersionUrl(modelId, versionId) {
     if (modelId == null || versionId == null) {
@@ -265,6 +266,25 @@ function renderMediaMarkup(version) {
     `;
 }
 
+function renderDeletePreview(version, versionName) {
+    const previewUrl = version?.previewUrl;
+    if (previewUrl && isVideoUrl(previewUrl)) {
+        return `
+            <video
+                src="${escapeHtml(previewUrl)}"
+                controls
+                muted
+                loop
+                playsinline
+                preload="metadata"
+            ></video>
+        `;
+    }
+
+    const imageUrl = previewUrl || PREVIEW_PLACEHOLDER_URL;
+    return `<img src="${escapeHtml(imageUrl)}" alt="${escapeHtml(versionName)}" onerror="this.src='${PREVIEW_PLACEHOLDER_URL}'">`;
+}
+
 function renderRow(version, options) {
     const { latestLibraryVersionId, currentVersionId, modelId: parentModelId } = options;
     const isCurrent = currentVersionId && version.versionId === currentVersionId;
@@ -796,9 +816,8 @@ function render(record) {
         const versionName =
             version.name ||
             translate('modals.model.versions.labels.unnamed', {}, 'Untitled Version');
-        const previewUrl =
-            version.previewUrl || '/loras_static/images/no-preview.png';
         const metaMarkup = buildMetaMarkup(version);
+        const previewMarkup = renderDeletePreview(version, versionName);
 
         const modalElement = modalRecord.element;
         const originalMarkup = modalElement.innerHTML;
@@ -809,7 +828,7 @@ function render(record) {
                 <p class="delete-message">${escapeHtml(confirmMessage)}</p>
                 <div class="delete-model-info">
                     <div class="delete-preview">
-                        <img src="${escapeHtml(previewUrl)}" alt="${escapeHtml(versionName)}" onerror="this.src='/loras_static/images/no-preview.png'">
+                        ${previewMarkup}
                     </div>
                     <div class="delete-info">
                         <h3>${escapeHtml(versionName)}</h3>