feat: Add album artwork support
- Backend: artwork_filename column on clips table (auto-migration)
- Backend: PATCH /api/clips/{id}/artwork (upload image, 5MB limit)
- Backend: GET /api/clips/{id}/artwork (serve image with correct content-type)
- Backend: DELETE /api/clips/{id}/artwork (remove artwork file + null out DB)
- Backend: DELETE /api/clips/{id} now cascade-removes artwork file
- Frontend: Clip interface includes artwork_filename
- Frontend: Gallery ribbons show artwork thumbnail with hover overlay (play + upload)
- Frontend: Gallery tiles show artwork with hover overlay (play + upload)
- Frontend: DetailPanel shows full artwork with upload/change/remove controls
- Frontend: App.tsx handleUploadArtwork + handleRemoveArtwork handlers
- Storage: /data/artwork/ directory for image files
This commit is contained in:
rin.kagamine committed
1 parent
23672387e5
commit
8ba7133269
10 files changed
+1030
-59
No files matched your search
@@ -0,0 +1,227 @@
|
||||
import { useRef } from 'react'
|
||||
|
||||
interface Clip {
|
||||
id: string
|
||||
title?: string
|
||||
prompt: string
|
||||
model: string
|
||||
duration_seconds: number
|
||||
status: string
|
||||
error_message?: string
|
||||
file_size_bytes?: number
|
||||
artwork_filename?: string | null
|
||||
created_at: string
|
||||
}
|
||||
|
||||
interface Props {
|
||||
clip: Clip
|
||||
onClose: () => void
|
||||
onRename: (id: string, title: string) => void
|
||||
onDelete: (id: string) => void
|
||||
onUploadArtwork: (id: string, file: File) => void
|
||||
onRemoveArtwork: (id: string) => void
|
||||
}
|
||||
|
||||
const modelName = (modelId: string) => {
|
||||
const names: Record<string, string> = {
|
||||
'lyria-3-clip-preview': 'Clip Preview',
|
||||
'lyria-3-pro-preview': 'Pro',
|
||||
}
|
||||
return names[modelId] || modelId
|
||||
}
|
||||
|
||||
export default function DetailPanel({ clip, onClose, onRename, onDelete, onUploadArtwork, onRemoveArtwork }: Props) {
|
||||
const artworkInputRef = useRef<HTMLInputElement>(null)
|
||||
const handleRename = () => {
|
||||
const newTitle = window.prompt('Rename track:', clip.title || '')
|
||||
if (newTitle !== null) {
|
||||
onRename(clip.id, newTitle)
|
||||
}
|
||||
}
|
||||
|
||||
const formatDate = (dateStr: string) => {
|
||||
return new Date(dateStr).toLocaleDateString('en-US', {
|
||||
weekday: 'short',
|
||||
year: 'numeric',
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
})
|
||||
}
|
||||
|
||||
const statusColor = (status: string) => {
|
||||
switch (status) {
|
||||
case 'ready': return 'bg-green-500/20 text-green-400'
|
||||
case 'generating': return 'bg-yellow-500/20 text-yellow-400'
|
||||
case 'failed': return 'bg-red-500/20 text-red-400'
|
||||
default: return 'bg-white/10 text-lyria-muted'
|
||||
}
|
||||
}
|
||||
|
||||
const statusLabel = (status: string) => {
|
||||
switch (status) {
|
||||
case 'ready': return 'Ready'
|
||||
case 'generating': return 'Generating...'
|
||||
case 'failed': return 'Failed'
|
||||
default: return status
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* Backdrop */}
|
||||
<div
|
||||
className="fixed inset-0 bg-black/50 z-40"
|
||||
onClick={onClose}
|
||||
/>
|
||||
{/* Panel */}
|
||||
<div className="fixed right-0 top-0 bottom-0 w-full max-w-md bg-lyria-panel border-l border-white/10 z-50 overflow-y-auto">
|
||||
{/* Header */}
|
||||
<div className="sticky top-0 bg-lyria-panel border-b border-white/10 px-5 py-4 flex items-center justify-between">
|
||||
<h2 className="text-sm font-semibold text-white uppercase tracking-wider">Track Details</h2>
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="text-lyria-muted hover:text-white transition-colors"
|
||||
>
|
||||
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="p-5 space-y-5">
|
||||
{/* Album Artwork */}
|
||||
<div>
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<label className="text-xs text-lyria-muted uppercase tracking-wider">Album Art</label>
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
onClick={() => artworkInputRef.current?.click()}
|
||||
className="text-xs text-lyria-accent hover:text-lyria-accent/80 transition-colors"
|
||||
>
|
||||
{clip.artwork_filename ? 'Change' : 'Upload'}
|
||||
</button>
|
||||
{clip.artwork_filename && (
|
||||
<button
|
||||
onClick={() => onRemoveArtwork(clip.id)}
|
||||
className="text-xs text-red-400 hover:text-red-300 transition-colors"
|
||||
>
|
||||
Remove
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
{clip.artwork_filename ? (
|
||||
<img
|
||||
src={`/api/clips/${clip.id}/artwork`}
|
||||
alt="Album art"
|
||||
className="w-full aspect-square rounded-lg object-cover"
|
||||
/>
|
||||
) : (
|
||||
<div className="w-full aspect-square bg-white/5 rounded-lg flex flex-col items-center justify-center text-lyria-muted/40">
|
||||
<svg className="w-12 h-12" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
|
||||
</svg>
|
||||
<span className="text-xs mt-1">No album art</span>
|
||||
</div>
|
||||
)}
|
||||
<input
|
||||
ref={artworkInputRef}
|
||||
type="file"
|
||||
accept="image/jpeg,image/png,image/gif,image/webp"
|
||||
className="hidden"
|
||||
onChange={(e) => {
|
||||
const file = e.target.files?.[0]
|
||||
if (file) {
|
||||
onUploadArtwork(clip.id, file)
|
||||
}
|
||||
e.target.value = ''
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Title */}
|
||||
<div>
|
||||
<div className="flex items-center justify-between mb-1">
|
||||
<label className="text-xs text-lyria-muted uppercase tracking-wider">Title</label>
|
||||
<button
|
||||
onClick={handleRename}
|
||||
className="text-xs text-lyria-accent hover:text-lyria-accent/80 transition-colors"
|
||||
>
|
||||
Rename
|
||||
</button>
|
||||
</div>
|
||||
<p className="text-white text-lg font-medium">
|
||||
{clip.title || <span className="text-lyria-muted italic">Untitled</span>}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Prompt */}
|
||||
<div>
|
||||
<label className="text-xs text-lyria-muted uppercase tracking-wider mb-1 block">Prompt</label>
|
||||
<p className="text-sm text-white/90 whitespace-pre-wrap break-words bg-white/5 rounded-md p-3">
|
||||
{clip.prompt}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Status */}
|
||||
<div>
|
||||
<label className="text-xs text-lyria-muted uppercase tracking-wider mb-1 block">Status</label>
|
||||
<span className={`text-xs px-2 py-1 rounded ${statusColor(clip.status)}`}>
|
||||
{statusLabel(clip.status)}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Error message */}
|
||||
{clip.status === 'failed' && clip.error_message && (
|
||||
<div>
|
||||
<label className="text-xs text-lyria-muted uppercase tracking-wider mb-1 block">Error</label>
|
||||
<p className="text-sm text-red-400/90 bg-red-500/10 rounded-md p-3 break-words">
|
||||
{clip.error_message}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Metadata grid */}
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<div>
|
||||
<label className="text-xs text-lyria-muted uppercase tracking-wider block">Model</label>
|
||||
<p className="text-sm text-white">{modelName(clip.model)}</p>
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-xs text-lyria-muted uppercase tracking-wider block">Duration</label>
|
||||
<p className="text-sm text-white">{clip.duration_seconds}s</p>
|
||||
</div>
|
||||
{clip.file_size_bytes && (
|
||||
<div>
|
||||
<label className="text-xs text-lyria-muted uppercase tracking-wider block">File Size</label>
|
||||
<p className="text-sm text-white">{(clip.file_size_bytes / 1024).toFixed(0)} KB</p>
|
||||
</div>
|
||||
)}
|
||||
<div>
|
||||
<label className="text-xs text-lyria-muted uppercase tracking-wider block">Created</label>
|
||||
<p className="text-sm text-white">{formatDate(clip.created_at)}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* ID (for reference) */}
|
||||
<div>
|
||||
<label className="text-xs text-lyria-muted uppercase tracking-wider mb-1 block">Clip ID</label>
|
||||
<p className="text-xs text-lyria-muted/60 font-mono break-all">{clip.id}</p>
|
||||
</div>
|
||||
|
||||
{/* Actions */}
|
||||
<div className="pt-3 border-t border-white/5">
|
||||
<button
|
||||
onClick={() => { onDelete(clip.id); onClose() }}
|
||||
className="w-full py-2 text-sm text-red-400 bg-red-500/10 hover:bg-red-500/20 rounded-md transition-colors"
|
||||
>
|
||||
Delete Track
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
Reference in new issue
Block a user