mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-05-24 22:58:08 +00:00
fix(assets): recognise m4v and mkv as video extensions (#12088)
## Summary `.m4v` and `.mkv` files render as a generic file icon in the assets sidebar instead of a video preview because `VIDEO_EXTENSIONS` doesn't list them, even though both formats are widely produced by ComfyUI custom nodes and are browser-playable when written with common codecs. ## Changes - **What**: Add `m4v` and `mkv` to `VIDEO_EXTENSIONS` in `packages/shared-frontend-utils/src/formatUtil.ts` and extend the existing test cases. Aligns with ComfyUI core's canonical video extension list (`tests-unit/folder_paths_test/filter_by_content_types_test.py:13`), which includes both. The frontend's format registry at `src/platform/workflow/core/types/formats.ts` also lists `.m4v` with mime `video/x-m4v` — `formatUtil.ts` was the inconsistent surface. - **Breaking**: None. - **Dependencies**: None. ## Review Focus `m4v` is Apple's MP4 container variant; `mkv` is the Matroska container. ComfyUI custom nodes most commonly produce both with H.264/VP9 codecs, which play natively in modern browsers via `<video>`. Adding the extensions routes those files through the existing `MediaVideoTop` component without any new rendering logic. If a user's `.mkv` happens to use an exotic codec the browser can't play (e.g. H.265/HEVC in Chrome), they get the same controllable failure mode as today's `.avi` entries — a `<video>` element with the browser's native unsupported-source UI. That is no worse than the current "show a generic file icon" behavior, and strictly better in the common case. ## Screenshots (if applicable) > **Note**: Screenshots taken from the OSS *input* assets sidebar with [#12086](https://github.com/Comfy-Org/ComfyUI_frontend/pull/12086) also applied locally. That PR fixes a separate regression where OSS input filenames carry a `[input]` annotation suffix that breaks all extension-based media detection — without it, `m4v`/`mkv` files (and every other file in that sidebar) still render as the generic icon. This PR alone is sufficient for cloud assets and OSS output history; the input-sidebar previews require both PRs. Before: <img width="1197" height="714" alt="2026-05-09-031123_hyprshot" src="https://github.com/user-attachments/assets/5c6ebc2d-aac2-411f-a2e4-51a111033184" /> After: <img width="1042" height="723" alt="2026-05-09-031005_hyprshot" src="https://github.com/user-attachments/assets/f0acc2cf-8571-4fd0-b0cd-2b8b87ff9b74" />
This commit is contained in:
@@ -85,9 +85,11 @@ describe('formatUtil', () => {
|
||||
describe('video files', () => {
|
||||
it('should identify video extensions correctly', () => {
|
||||
expect(getMediaTypeFromFilename('video.mp4')).toBe('video')
|
||||
expect(getMediaTypeFromFilename('apple.m4v')).toBe('video')
|
||||
expect(getMediaTypeFromFilename('clip.webm')).toBe('video')
|
||||
expect(getMediaTypeFromFilename('movie.mov')).toBe('video')
|
||||
expect(getMediaTypeFromFilename('film.avi')).toBe('video')
|
||||
expect(getMediaTypeFromFilename('episode.mkv')).toBe('video')
|
||||
})
|
||||
})
|
||||
|
||||
|
||||
@@ -581,7 +581,7 @@ const IMAGE_EXTENSIONS = [
|
||||
'tiff',
|
||||
'svg'
|
||||
] as const
|
||||
const VIDEO_EXTENSIONS = ['mp4', 'webm', 'mov', 'avi'] as const
|
||||
const VIDEO_EXTENSIONS = ['mp4', 'm4v', 'webm', 'mov', 'avi', 'mkv'] as const
|
||||
const AUDIO_EXTENSIONS = ['mp3', 'wav', 'ogg', 'flac'] as const
|
||||
const THREE_D_EXTENSIONS = ['obj', 'fbx', 'gltf', 'glb', 'usdz'] as const
|
||||
const TEXT_EXTENSIONS = [
|
||||
|
||||
Reference in New Issue
Block a user