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 `
+
+ `;
+ }
+
+ const imageUrl = previewUrl || PREVIEW_PLACEHOLDER_URL;
+ return ``;
+}
+
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) {