Comfy-Org / Comfy-Org/ComfyUI_frontend

Long-term: implement video/audio previews as part of the selection widget (remove App mode loader-node special-casing)

Open
#14,377 2 comments 2 reactions 1 assignee Claimed by @AustinMroz View on GitHub
area:previews area:widgets enhancement
Dominant language
TypeScript
Stars
2k
Forks
702
Avg merge
1d 7h
Merged PRs (30d)
490

Description

## Summary

Long-term follow-up to FE-1344 ("Native Load Video node doesn't preview video in App mode").

Video/audio previews for native loader nodes (`LoadVideo`, `LoadAudio`, and implicitly `LoadImage`) are not implemented as widgets — they are DOM elements attached ad-hoc to the LiteGraph node (`useNodeVideo`/`useNodeImage` in `src/composables/node/useNodeImage.ts`) or, in App mode, a one-off hard-coded drop-zone (`getLoaderDropIndicator` in `src/components/builder/useLoaderDropIndicator.ts`, consumed by `AppModeWidgetList.vue`). App mode only knows how to render **widgets**, so every loader-style node needs its own hard-coded branch to get a preview in App mode.

## Problem

- `AppModeWidgetList.vue` special-cases `LoadImage`/`LoadVideo`/`LoadAudio` by node type to build a preview, duplicating logic that already exists for the normal editor (`NodeContent.vue`, `VideoPreview.vue`, `AudioPreview.vue`).
- Any new node type that wants an inline media preview (custom-node loaders, future first-party nodes) will not get one in App mode unless someone adds another hard-coded branch to the allowlist.
- This was called out explicitly in the FE-1344 due-diligence discussion: short-term the fix is to hard-code Load Video/Load Audio like Load Image; long-term the preview should be part of the selection widget itself so App mode needs no special-case logic — it just renders the widget like it does every other widget type.

## Proposed direction

Make the media preview a first-class part of the file-selection widget (the combo/upload widget rendered by `useComboWidget`/`useImageUploadWidget` and friends for `LoadImage`/`LoadVideo`/`LoadAudio`), so that:

1. The widget itself renders its own preview (image/video/audio) as part of its Vue component, rather than living as a sibling `NodeContent` concern outside the widget tree.
2. App mode (`AppModeWidgetList.vue`) can drop the loader-node special-casing entirely and rely on the generic widget-rendering path (`NodeWidgets.vue`) it already uses for every other widget type.
3. New loader-style nodes (present or future, first-party or custom) get a working App mode preview for free, with no frontend changes required per node type.

## Related work

- Linear: FE-1344 (short-term hard-code fix) — https://linear.app/comfyorg/issue/FE-1344
- Linear: FE-1445 (this long-term ticket) — https://linear.app/comfyorg/issue/FE-1445/long-term-implement-videoaudio-previews-as-part-of-the-selection
- #10808 already implements the short-term hard-code approach for `LoadImage`/`LoadVideo` (missing `LoadAudio` coverage and e2e tests as of this writing) — worth reviewing before starting this rework, since it documents the exact special-case surface this long-term fix should eliminate.

---
Created by Claude Tag

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.