mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-02-26 09:44:06 +00:00
9c0b3c4f7d
## Summary
Implements a comprehensive media asset card component system for the
Asset Manager sidebar, enabling display and interaction with various
media types (images, videos, audio, and 3D models).
## Changes
### New Components
- **MediaAssetCard**: Main card component for displaying media assets
- **Media type-specific components**: Specialized display logic for each
media type
- MediaImageTop/Bottom
- MediaVideoTop/Bottom
- MediaAudioTop/Bottom
- Media3DTop/Bottom
- **MediaAssetActions**: Top-left action buttons (delete, download, more
options)
- **MediaAssetMoreMenu**: Dropdown menu for additional actions
- **SquareChip**: Chip component for displaying duration and file format
with dark/light variants
- **MediaAssetButtonDivider**: Visual separator for button groups
### Features
- **Video playback**: Autoplay with native video controls
- Dynamic duration chip positioning based on control visibility
- Hides overlays when video is playing
- **Audio playback**: Audio icon with HTML5 audio element
- Duration chip with consistent positioning
- **3D model support**: Icon display for 3D assets
- **Selection state**: Proper hover and selected state handling with CSS
priority fixes
### Architecture Improvements
- **Domain-Driven Design structure**: Organized under
`src/platform/mediaAsset/` following DDD principles
- **Provide/Inject pattern**: Eliminates props drilling with
MediaAssetKey InjectionKey
- **Composable pattern**: `useMediaAssetActions` manages all action
handlers
- **Type safety**: Comprehensive TypeScript types for media assets and
actions
### UI/UX Enhancements
- **CardTop component**: Added custom class props for slot positioning
- **SquareChip component**: Backdrop blur effects with variant system
- **Lazy loading**: Image optimization with LazyImage component
- **Responsive states**: Loading, selected, and hover states
### Utilities
- **formatDuration**: Converts milliseconds to human-readable format
(45s, 1m 23s, 1h 2m)
## Testing
- Comprehensive Storybook stories for all media types
- Grid layout examples
- Loading and selected state demonstrations
## File Structure
```
src/platform/assets/
├── components/
│ ├── MediaAssetCard.vue
│ ├── MediaAssetCard.stories.ts
│ ├── MediaAssetActions.vue
│ ├── MediaAssetMoreMenu.vue
│ ├── MediaAssetButtonDivider.vue
│ ├── MediaImageTop.vue
│ ├── MediaImageBottom.vue
│ ├── MediaVideoTop.vue
│ ├── MediaVideoBottom.vue
│ ├── MediaAudioTop.vue
│ ├── MediaAudioBottom.vue
│ ├── Media3DTop.vue
│ └── Media3DBottom.vue
├── composables/
│ └── useMediaAssetActions.ts
└── schemas/
└── mediaAssetSchema.ts
```
## Screenshots
[media_asset_record.webm](https://github.com/user-attachments/assets/d13b5cc0-a262-4850-bb81-ca1daa0dd969)
---------
Co-authored-by: Claude <noreply@anthropic.com>
Co-authored-by: GitHub Action <action@github.com>
Co-authored-by: github-actions <github-actions@github.com>
86 lines
2.0 KiB
Vue
86 lines
2.0 KiB
Vue
<template>
|
|
<div :class="containerClasses">
|
|
<slot name="top"></slot>
|
|
<slot name="bottom"></slot>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { computed } from 'vue'
|
|
|
|
import { cn } from '@/utils/tailwindUtil'
|
|
|
|
const {
|
|
size = 'regular',
|
|
variant = 'default',
|
|
rounded = 'md',
|
|
customAspectRatio,
|
|
hasBorder = true,
|
|
hasBackground = true,
|
|
hasShadow = true,
|
|
hasCursor = true,
|
|
class: customClass = ''
|
|
} = defineProps<{
|
|
size?: 'mini' | 'compact' | 'regular' | 'portrait' | 'tall'
|
|
variant?: 'default' | 'ghost' | 'outline'
|
|
rounded?: 'none' | 'md' | 'lg' | 'xl'
|
|
customAspectRatio?: string
|
|
hasBorder?: boolean
|
|
hasBackground?: boolean
|
|
hasShadow?: boolean
|
|
hasCursor?: boolean
|
|
class?: string
|
|
}>()
|
|
|
|
// Base structure classes
|
|
const structureClasses = 'flex flex-col overflow-hidden'
|
|
|
|
// Rounded corners
|
|
const roundedClasses = {
|
|
none: 'rounded-none',
|
|
md: 'rounded',
|
|
lg: 'rounded-lg',
|
|
xl: 'rounded-xl'
|
|
} as const
|
|
|
|
const containerClasses = computed(() => {
|
|
// Variant styles
|
|
const variantClasses = {
|
|
default: cn(
|
|
hasBackground && 'bg-white dark-theme:bg-zinc-800',
|
|
hasBorder && 'border border-zinc-200 dark-theme:border-zinc-700',
|
|
hasShadow && 'shadow-sm',
|
|
hasCursor && 'cursor-pointer'
|
|
),
|
|
ghost: cn(
|
|
hasCursor && 'cursor-pointer',
|
|
'p-2 transition-colors duration-200'
|
|
),
|
|
outline: cn(
|
|
hasBorder && 'border-2 border-zinc-300 dark-theme:border-zinc-600',
|
|
hasCursor && 'cursor-pointer',
|
|
'hover:border-zinc-400 dark-theme:hover:border-zinc-500 transition-colors'
|
|
)
|
|
}
|
|
|
|
// Size/aspect ratio
|
|
const aspectRatio = customAspectRatio
|
|
? `aspect-[${customAspectRatio}]`
|
|
: {
|
|
mini: 'aspect-100/120',
|
|
compact: 'aspect-240/311',
|
|
regular: 'aspect-256/308',
|
|
portrait: 'aspect-256/325',
|
|
tall: 'aspect-256/353'
|
|
}[size]
|
|
|
|
return cn(
|
|
structureClasses,
|
|
roundedClasses[rounded],
|
|
variantClasses[variant],
|
|
aspectRatio,
|
|
customClass
|
|
)
|
|
})
|
|
</script>
|