feat: Add themed FFT waveform visualization to detail panel

Backend:
- Install ffmpeg + numpy in Docker image
- New waveform.py: FFT-based SVG generator with 64 frequency bands
- GET /api/clips/{id}/waveform — generates on demand, caches to /data/waveforms/
- DELETE /api/clips/{id} now cascade-removes waveform SVG
- Warm amber-to-orange HSL gradient (25° to 35° hue)
- Mirrored bars: top full opacity, bottom 60% opacity

Frontend:
- DetailPanel shows waveform image beneath album art (80px height)
- Only shown for clips with status='ready'

Storage: /data/waveforms/ persisted via existing ./data volume mount
This commit is contained in:
rin.kagamine committed 2026-05-29 20:11:01 -04:00
1 parent 3c6a5d1a84
commit 8f5c8a87d1
6 files changed
+330

No files matched your search

+11
View File
@@ -141,6 +141,17 @@ export default function DetailPanel({ clip, onClose, onRename, onDelete, onUploa
/>
</div>
{/* FFT Waveform */}
{clip.status === 'ready' && (
<div className="rounded-lg overflow-hidden">
<img
src={`/api/clips/${clip.id}/waveform`}
alt="Waveform"
className="w-full h-20 object-cover"
/>
</div>
)}
{/* Title */}
<div>
<div className="flex items-center justify-between mb-1">