feat: improve video URL detection to handle query parameters

Enhanced the `isVideoUrl` function to more accurately detect video URLs by: - Adding support for URL query parameters and fragments - Creating helper function `extractExtension` to handle URI decoding - Checking multiple candidate values from different parts of the URL - Maintaining backward compatibility with existing video detection This improves reliability when detecting video URLs that contain query parameters or encoded characters.
2026-03-21 21:22:11 -03:00 · 2025-10-27 12:21:51 +08:00
parent 136d3153fa
commit 8508763831
2 changed files with 212 additions and 5 deletions
--- a/tests/frontend/components/modelVersionsTab.media.test.js
+++ b/tests/frontend/components/modelVersionsTab.media.test.js
@@ -0,0 +1,149 @@
+import { describe, it, beforeEach, afterEach, expect, vi } from 'vitest';
+
+const {
+  MODEL_VERSIONS_MODULE,
+  API_FACTORY_MODULE,
+  DOWNLOAD_MANAGER_MODULE,
+  UI_HELPERS_MODULE,
+  STATE_MODULE,
+  I18N_HELPERS_MODULE,
+  UTILS_MODULE,
+} = vi.hoisted(() => ({
+  MODEL_VERSIONS_MODULE: new URL('../../../static/js/components/shared/ModelVersionsTab.js', import.meta.url).pathname,
+  API_FACTORY_MODULE: new URL('../../../static/js/api/modelApiFactory.js', import.meta.url).pathname,
+  DOWNLOAD_MANAGER_MODULE: new URL('../../../static/js/managers/DownloadManager.js', import.meta.url).pathname,
+  UI_HELPERS_MODULE: new URL('../../../static/js/utils/uiHelpers.js', import.meta.url).pathname,
+  STATE_MODULE: new URL('../../../static/js/state/index.js', import.meta.url).pathname,
+  I18N_HELPERS_MODULE: new URL('../../../static/js/utils/i18nHelpers.js', import.meta.url).pathname,
+  UTILS_MODULE: new URL('../../../static/js/components/shared/utils.js', import.meta.url).pathname,
+}));
+
+vi.mock(DOWNLOAD_MANAGER_MODULE, () => ({
+  downloadManager: {
+    downloadVersionWithDefaults: vi.fn(),
+  },
+}));
+
+vi.mock(UI_HELPERS_MODULE, () => ({
+  showToast: vi.fn(),
+}));
+
+const stateMock = { global: { settings: { autoplay_on_hover: false } } };
+vi.mock(STATE_MODULE, () => ({
+  state: stateMock,
+}));
+
+vi.mock(I18N_HELPERS_MODULE, () => ({
+  translate: vi.fn((_, __, fallback) => fallback ?? ''),
+}));
+
+vi.mock(UTILS_MODULE, () => ({
+  formatFileSize: vi.fn(() => '1 MB'),
+}));
+
+vi.mock(API_FACTORY_MODULE, () => ({
+  getModelApiClient: vi.fn(),
+}));
+
+describe('ModelVersionsTab media rendering', () => {
+  let getModelApiClient;
+  let fetchModelUpdateVersions;
+
+  beforeEach(async () => {
+    vi.resetModules();
+    document.body.innerHTML = `
+      <div id="model-versions-modal">
+        <div id="versions-tab">
+          <div class="model-versions-tab"></div>
+        </div>
+      </div>
+    `;
+    stateMock.global.settings.autoplay_on_hover = false;
+    ({ getModelApiClient } = await import(API_FACTORY_MODULE));
+    fetchModelUpdateVersions = vi.fn();
+    getModelApiClient.mockReturnValue({
+      fetchModelUpdateVersions,
+      setModelUpdateIgnore: vi.fn(),
+      setVersionUpdateIgnore: vi.fn(),
+      deleteModel: vi.fn(),
+    });
+  });
+
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  it('renders video preview when preview URL references a video file in a query parameter', async () => {
+    const previewUrl = '/api/lm/previews?path=%2Fhome%2Fexample%2Fvideo-preview.mp4';
+    fetchModelUpdateVersions.mockResolvedValue({
+      success: true,
+      record: {
+        shouldIgnore: false,
+        inLibraryVersionIds: [2],
+        versions: [
+          {
+            versionId: 2,
+            name: 'v1.0',
+            previewUrl,
+            baseModel: 'SDXL',
+            sizeBytes: 1024,
+            isInLibrary: true,
+            shouldIgnore: false,
+          },
+        ],
+      },
+    });
+
+    const { initVersionsTab } = await import(MODEL_VERSIONS_MODULE);
+    const controller = initVersionsTab({
+      modalId: 'model-versions-modal',
+      modelType: 'loras',
+      modelId: 123,
+      currentVersionId: null,
+    });
+
+    await controller.load();
+
+    const videoElement = document.querySelector('.version-media video');
+    expect(videoElement).toBeTruthy();
+    expect(videoElement?.getAttribute('src')).toBe(previewUrl);
+    expect(document.querySelector('.version-media img')).toBeFalsy();
+  });
+
+  it('renders image preview when preview URL does not reference a video', async () => {
+    const previewUrl = '/api/lm/previews?path=%2Fhome%2Fexample%2Fpreview-image.png';
+    fetchModelUpdateVersions.mockResolvedValue({
+      success: true,
+      record: {
+        shouldIgnore: false,
+        inLibraryVersionIds: [3],
+        versions: [
+          {
+            versionId: 3,
+            name: 'v1.1',
+            previewUrl,
+            baseModel: 'SDXL',
+            sizeBytes: 2048,
+            isInLibrary: true,
+            shouldIgnore: false,
+          },
+        ],
+      },
+    });
+
+    const { initVersionsTab } = await import(MODEL_VERSIONS_MODULE);
+    const controller = initVersionsTab({
+      modalId: 'model-versions-modal',
+      modelType: 'loras',
+      modelId: 456,
+      currentVersionId: null,
+    });
+
+    await controller.load();
+
+    const imageElement = document.querySelector('.version-media img');
+    expect(imageElement).toBeTruthy();
+    expect(imageElement?.getAttribute('src')).toBe(previewUrl);
+    expect(document.querySelector('.version-media video')).toBeFalsy();
+  });
+});