Comfy-Org / Comfy-Org/ComfyUI_frontend

Assets lightbox navigation does not update between video items

Open Beginner friendly
#13,564 2 comments 1 reaction 0 assignees View on GitHub
area:previews Potential Bug
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.