mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-04-27 01:39:47 +00:00
feat: Improve MediaAssetCard video controls and add gallery view (#6065)
## Summary - Enhanced video control visibility logic for better UX - Added fullscreen gallery view with zoom-in button - Fixed hover interaction issues with overlays ## Changes ### Video Controls - **Before**: Controls hidden when not hovering - **After**: Controls always visible when not playing, hover-based during playback ### Overlay Behavior - **Before**: All overlays hidden during video playback - **After**: All overlays (actions, tags, layers) show on hover even during playback ### Gallery View - Added zoom-in button to top-right corner (all media types except 3D) - Integrated with existing ResultGallery component - Gallery closes when clicking dimmed background area ### Bug Fixes - Fixed hover flicker issue by proper event handling on overlay elements ## Test Plan - [x] Test video controls visibility (paused vs playing) - [x] Test overlay hover behavior during video playback - [x] Test zoom-in button opens gallery view - [x] Test gallery closes on background click - [x] Test 3D assets don't show zoom button - [x] Test in Storybook with various media types 🤖 Generated with [Claude Code](https://claude.ai/code) ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-6065-feat-Improve-MediaAssetCard-video-controls-and-add-gallery-view-28d6d73d3650818c90cfc5d0d00e4826) by [Unito](https://www.unito.io) --------- Co-authored-by: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -1,6 +1,7 @@
|
||||
<template>
|
||||
<div class="flex flex-col">
|
||||
<IconTextButton
|
||||
v-if="asset?.kind !== '3D'"
|
||||
type="transparent"
|
||||
class="dark-theme:text-white"
|
||||
label="Inspect asset"
|
||||
@@ -93,6 +94,7 @@ import { computed, inject } from 'vue'
|
||||
import IconTextButton from '@/components/button/IconTextButton.vue'
|
||||
|
||||
import { useMediaAssetActions } from '../composables/useMediaAssetActions'
|
||||
import { useMediaAssetGalleryStore } from '../composables/useMediaAssetGalleryStore'
|
||||
import { MediaAssetKey } from '../schemas/mediaAssetSchema'
|
||||
import MediaAssetButtonDivider from './MediaAssetButtonDivider.vue'
|
||||
|
||||
@@ -102,14 +104,13 @@ const { close } = defineProps<{
|
||||
|
||||
const { asset, context } = inject(MediaAssetKey)!
|
||||
const actions = useMediaAssetActions()
|
||||
const galleryStore = useMediaAssetGalleryStore()
|
||||
|
||||
const showWorkflowOptions = computed(() => {
|
||||
return context.value.type
|
||||
})
|
||||
const showWorkflowOptions = computed(() => context.value.type)
|
||||
|
||||
const handleInspect = () => {
|
||||
if (asset.value) {
|
||||
actions.viewAsset(asset.value.id)
|
||||
galleryStore.openSingle(asset.value)
|
||||
}
|
||||
close()
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user