feat: extract video metadata client-side with mediabunny

.github/workflows/ci-oss-assets-validation.yaml

@@ -112,7 +112,7 @@ jobs:
             --summary \
             --excludePackages '@comfyorg/comfyui-frontend;@comfyorg/design-system;@comfyorg/ingest-types;@comfyorg/registry-types;@comfyorg/shared-frontend-utils;@comfyorg/tailwind-utils;@comfyorg/comfyui-electron-types' \
             --clarificationsFile .github/license-clarifications.json \
-            --onlyAllow 'MIT;MIT*;Apache-2.0;BSD-2-Clause;BSD-3-Clause;ISC;0BSD;BlueOak-1.0.0;Python-2.0;CC0-1.0;Unlicense;(MIT OR Apache-2.0);(MIT OR GPL-3.0);(Apache-2.0 OR MIT);(MPL-2.0 OR Apache-2.0);CC-BY-4.0;CC-BY-3.0;GPL-3.0-only'; then
+            --onlyAllow 'MIT;MIT*;Apache-2.0;BSD-2-Clause;BSD-3-Clause;ISC;0BSD;BlueOak-1.0.0;Python-2.0;CC0-1.0;Unlicense;(MIT OR Apache-2.0);(MIT OR GPL-3.0);(Apache-2.0 OR MIT);(MPL-2.0 OR Apache-2.0);MPL-2.0;CC-BY-4.0;CC-BY-3.0;GPL-3.0-only'; then
             echo ''
             echo '✅ All production dependency licenses are approved!'
           else

package.json

@@ -122,6 +122,7 @@
     "jsonata": "catalog:",
     "loglevel": "^1.9.2",
     "marked": "^15.0.11",
+    "mediabunny": "catalog:",
     "minisearch": "catalog:",
     "pinia": "catalog:",
     "posthog-js": "catalog:",

pnpm-workspace.yaml

@@ -102,6 +102,7 @@ catalog:
   lenis: ^1.3.21
   lint-staged: ^16.2.7
   markdown-table: ^3.0.4
+  mediabunny: ^1.53.1
   minisearch: ^7.2.0
   mixpanel-browser: ^2.71.0
   monocart-coverage-reports: ^2.12.9

src/composables/video/useVideoFilmstrip.test.ts

@@ -188,7 +188,6 @@ describe('useVideoFilmstrip', () => {
     vi.mocked(fetchVideoMetadata).mockResolvedValueOnce({
       fps: 24,
       duration: 10,
-      frame_count: 240,
       width: 512,
       height: 512,
       size: 5 * 1024 * 1024
@@ -219,7 +218,6 @@ describe('useVideoFilmstrip', () => {
     vi.mocked(fetchVideoMetadata).mockResolvedValueOnce({
       fps: 24,
       duration: 8,
-      frame_count: null,
       width: 640,
       height: 360,
       size: 1024

src/composables/video/useVideoFilmstrip.ts

@@ -267,10 +267,8 @@ export function useVideoFilmstrip(
       width.value = metadata?.width ?? video.videoWidth
       height.value = metadata?.height ?? video.videoHeight
       fps.value = metadata?.fps ?? options.fps ?? DEFAULT_VIDEO_FPS
-      fileSize.value = metadata?.size
-      totalFrames.value =
-        metadata?.frame_count ??
-        Math.max(Math.round(effectiveDuration * fps.value), 1)
+      fileSize.value = metadata?.size ?? undefined
+      totalFrames.value = Math.max(Math.round(effectiveDuration * fps.value), 1)
 
       const capturedThumbnail = await captureRepresentativeFrame(
         video,