Comfy-Org / Comfy-Org/ComfyUI_frontend
Assets lightbox navigation does not update between video items
- Dominant language
- TypeScript
- Stars
- 2k
- Forks
- 704
- Avg merge
- 1d 8h
- Merged PRs (30d)
- 512
Description
### Prerequisites
- [x] I am running the latest version of ComfyUI
- [x] I have custom nodes enabled
### What happened?
# Assets lightbox navigation does not update between video items
### Prerequisites
- [x] I have searched existing issues to make sure this is not a duplicate.
- [ ] I have reproduced this with all custom nodes disabled.
- [x] The affected component pattern is still present on the current frontend `main` branch.
### What happened?
When previewing video files from the **Assets** sidebar (Imported or Generated),
the previous/next buttons and Left/Right arrow keys advance the lightbox's active
index, but the displayed video remains on the previous asset. This makes the
navigation controls appear not to work for consecutive video items.
Image-to-image navigation works correctly.
### Steps to reproduce
1. Put at least two playable video files in ComfyUI's input folder, or generate
at least two video outputs.
2. Open the **Assets** sidebar.
3. Select **Imported** (or **Generated**) and inspect the first video.
4. Click the right navigation button, or press the Right Arrow key.
5. Observe that the lightbox remains on the first video even though its active
index has advanced.
6. Close the lightbox and inspect the second video directly to confirm that it
is a different, playable asset.
### Expected behavior
Navigating to another video should display and load that video's URL from the
beginning, just as navigating between images displays the newly selected image.
### Actual behavior
The same `` element remains visible with the previous media loaded.
### Suspected root cause
`MediaLightbox.vue` keys `ComfyImage` by URL, but does not key `ResultVideo`:
```vue
```
`ResultVideo.vue` renders a persistent media element with a nested source:
```vue
```
When navigation changes from one video item to another, Vue reuses the same
`ResultVideo` and `` elements. Updating the `src` attribute of a nested
`` does not make an already-loaded HTML media element select and load
the new resource. The component must be remounted or `video.load()` must be
called after the source changes.
The same unkeyed `ResultVideo` pattern existed in the older `ResultGallery.vue`
used by `comfyui-frontend-package` 1.42.15, and is still present in the current
`MediaLightbox.vue` on `main`.
### Suggested fix
The smallest fix is to key video previews by their URL so Vue remounts the media
element when the active asset changes:
```vue
```
Alternatively, give `ResultVideo` a template ref, watch `url`, and call
`video.load()` after Vue updates the nested ``.
It may be worth applying the same key/reload handling to `ResultAudio`, which
uses the same nested-source pattern.
### How is this affecting you?
Video assets cannot be reviewed sequentially from the Assets lightbox. The
lightbox must be closed and each video opened individually.
### Environment
- ComfyUI frontend package: `1.42.15`
- ComfyUI checkout: `fce03984`
- OS: Windows
- Browser: `[fill in browser and version]`
### Console errors
```text
No relevant error observed.
```
### Additional context
Related but not a duplicate: #7192 reports video inspection failing because of
incorrect subfolder/API URLs. In this case both video URLs are independently
playable; the failure occurs only when navigating between them in one open
lightbox.
Current source locations:
- `src/components/sidebar/tabs/queue/MediaLightbox.vue`
- `src/components/sidebar/tabs/queue/ResultVideo.vue`
### Steps to Reproduce
1.
2.
3.
### How is this affecting you?
Crashes ComfyUI completely
### ComfyUI Frontend Version
1.45.20
### Browser
Chrome/Chromium
### Console Errors
```javascript
```
### Logs
```shell
```
### Additional Context
_No response_
Contributor guide
Research direction
Start by reading src/components/sidebar/tabs/queue/MediaLightbox.vue and src/components/sidebar/tabs/queue/ResultVideo.vue, focusing on how the active asset changes during lightbox navigation. Reproduce the issue with two playable videos in Imported or Generated assets, then verify that previous/next controls and arrow keys display and load the newly selected video from the beginning.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Quiet
- Clarity
- Clearly specified
- Newbie friendliness
- 78/100