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:
1 parent
3c6a5d1a84
commit
8f5c8a87d1
6 files changed
+330
No files matched your search
@@ -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">
|
||||
|
||||
Reference in new issue
Block a user