mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-02-28 18:54:09 +00:00
25880aa024
## Summary Render generated video previews in list items using a real video element (instead of an image element (this caused errors before)) and include a custom play button with dimming per [the designs](https://www.figma.com/design/LVilZgHGk5RwWOkVN6yCEK/Queue-Progress-Modal?node-id=3928-39270&m=dev). ## Changes - **What**: - List item preview path now renders a `video` element when `isVideoPreview` is true. - Video list preview uses `preload="metadata"`, `muted`, `playsinline`, and `pointer-events-none` so row click behavior stays unchanged. - Kept the custom overlay/play affordance and increased overlay dimming from `bg-black/10` to `bg-black/15`. - Updated tests for `AssetsListItem`, `MediaVideoTop`, and `AssetsSidebarListView`. ## Review Focus - Confirm list item click behavior still opens/selects asset (no inline playback interaction). - Confirm video list previews now show actual video frame path instead of broken image fallback. ## Limitation Backend does not currently provide a dedicated poster/thumbnail image for video outputs in the job preview payload. In the frontend today, we can either show a video icon placeholder, or load/render the full video itself to obtain a preview frame. ## Screenshots (if applicable) <img width="427" height="499" alt="image" src="https://github.com/user-attachments/assets/3f974817-9d73-4fee-9fa5-2f1f68942c06" /> <img width="230" height="92" alt="image" src="https://github.com/user-attachments/assets/1fbfdd6a-72dd-47e2-96bf-8f7eb41c36f2" />
39 lines
1.3 KiB
TypeScript
39 lines
1.3 KiB
TypeScript
import { mount } from '@vue/test-utils'
|
|
import { describe, expect, it } from 'vitest'
|
|
|
|
import AssetsListItem from './AssetsListItem.vue'
|
|
|
|
describe('AssetsListItem', () => {
|
|
it('renders video element with play overlay for video previews', () => {
|
|
const wrapper = mount(AssetsListItem, {
|
|
props: {
|
|
previewUrl: 'https://example.com/preview.mp4',
|
|
previewAlt: 'clip.mp4',
|
|
isVideoPreview: true
|
|
}
|
|
})
|
|
|
|
const video = wrapper.find('video')
|
|
expect(video.exists()).toBe(true)
|
|
expect(video.attributes('src')).toBe('https://example.com/preview.mp4')
|
|
expect(video.attributes('preload')).toBe('metadata')
|
|
expect(wrapper.find('img').exists()).toBe(false)
|
|
expect(wrapper.find('.bg-black\\/15').exists()).toBe(true)
|
|
expect(wrapper.find('.icon-\\[lucide--play\\]').exists()).toBe(true)
|
|
})
|
|
|
|
it('does not show play overlay for non-video previews', () => {
|
|
const wrapper = mount(AssetsListItem, {
|
|
props: {
|
|
previewUrl: 'https://example.com/preview.jpg',
|
|
previewAlt: 'image.png',
|
|
isVideoPreview: false
|
|
}
|
|
})
|
|
|
|
expect(wrapper.find('img').exists()).toBe(true)
|
|
expect(wrapper.find('video').exists()).toBe(false)
|
|
expect(wrapper.find('.icon-\\[lucide--play\\]').exists()).toBe(false)
|
|
})
|
|
})
|