support video

Author: Kitenite

apps/web/client/src/app/project/[id]/_components/left-panel/code-panel/code-tab/file-content/code-editor.tsx

@@ -1,6 +1,6 @@
 import { EditorView, keymap, ViewUpdate } from '@codemirror/view';
 import type { CodeNavigationTarget } from '@onlook/models';
-import { convertToBase64DataUrl, getMimeType, isVideoFile } from '@onlook/utility/src/file';
+import { convertToBase64DataUrl, getMimeType, isVideoFile } from '@onlook/utility';
 import CodeMirror from '@uiw/react-codemirror';
 import { type RefObject, useEffect, useMemo, useRef, useState } from 'react';
 import type { BinaryEditorFile, EditorFile } from '../shared/types';

packages/utility/src/file.ts

@@ -118,11 +118,11 @@ export const isImageFile = (fileName: string): boolean => {
  * @returns True if the file is a video, false otherwise
  */
 export const isVideoFile = (fileNameOrMimeType: string): boolean => {
-    // If it looks like a MIME type (contains '/'), check it directly
-    if (fileNameOrMimeType.includes('/')) {
+    // If it looks like a MIME type (starts with 'video/' pattern), check it directly
+    if (fileNameOrMimeType.startsWith('video/') || fileNameOrMimeType.startsWith('audio/') || fileNameOrMimeType.startsWith('image/')) {
         return fileNameOrMimeType.startsWith('video/');
     }
-    // Otherwise, treat it as a filename
+    // Otherwise, treat it as a filename or file path
     const mimeType = getMimeType(fileNameOrMimeType);
     return mimeType.startsWith('video/');
 };

packages/utility/test/file.test.ts

@@ -232,5 +232,13 @@ describe('isVideoFile', () => {
             expect(isVideoFile('视频.mp4')).toBe(true);
             expect(isVideoFile('ビデオ.webm')).toBe(true);
         });
+
+        it('handles full file paths with slashes', () => {
+            expect(isVideoFile('/public/gradient.mp4')).toBe(true);
+            expect(isVideoFile('/path/to/video.webm')).toBe(true);
+            expect(isVideoFile('./assets/video.mov')).toBe(true);
+            expect(isVideoFile('../videos/clip.avi')).toBe(true);
+            expect(isVideoFile('/public/image.jpg')).toBe(false);
+        });
     });
 });