037881a821
Store waveform peaks inline in audio_versions (JSONB columns) so WaveSurfer
can render the waveform immediately on page load without waiting for audio
decode. Adds a 100-point mini-waveform for version selector thumbnails.
Backend:
- Migration 0006: adds waveform_peaks and waveform_peaks_mini JSONB columns
- Worker generates both resolutions (500-pt full, 100-pt mini) during transcode
and stores them directly in DB — replaces file-based waveform_url approach
- AudioVersionRead schema exposes both fields inline (no extra HTTP round-trip)
- GET /versions/{id}/waveform reads from DB; adds ?resolution=mini support
Frontend:
- audioService.initialize() accepts peaks and calls ws.load(url, Float32Array)
so waveform renders instantly without audio decode
- useWaveform hook threads peaks option through to audioService
- PlayerPanel passes waveform_peaks from the active version to the hook
- New MiniWaveform SVG component (no WaveSurfer) renders mini peaks in the
version selector buttons
Fix: docker-compose.dev.yml now runs alembic upgrade head before starting
the API server, so a fresh volume gets the full schema automatically.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
63 lines
1.6 KiB
TypeScript
63 lines
1.6 KiB
TypeScript
/**
|
|
* MiniWaveform — pure SVG component for rendering waveform_peaks_mini.
|
|
*
|
|
* Renders pre-computed 100-point peaks as vertical bars. No WaveSurfer dependency —
|
|
* lightweight enough to use in library/song list views for every song card.
|
|
*
|
|
* Props:
|
|
* peaks — array of 0-1 normalized peak values (ideally 100 points), or null
|
|
* width — SVG width in px
|
|
* height — SVG height in px
|
|
* color — bar fill color (default: teal accent)
|
|
*/
|
|
|
|
interface MiniWaveformProps {
|
|
peaks: number[] | null;
|
|
width: number;
|
|
height: number;
|
|
color?: string;
|
|
}
|
|
|
|
export function MiniWaveform({
|
|
peaks,
|
|
width,
|
|
height,
|
|
color = "#14b8a6",
|
|
}: MiniWaveformProps) {
|
|
const isEmpty = !peaks || peaks.length === 0;
|
|
|
|
if (isEmpty) {
|
|
return (
|
|
<svg width={width} height={height} viewBox={`0 0 ${width} ${height}`} aria-hidden="true">
|
|
<rect x={0} y={0} width={width} height={height} fill="rgba(255,255,255,0.06)" rx={2} />
|
|
</svg>
|
|
);
|
|
}
|
|
|
|
const barCount = peaks.length;
|
|
const gap = 1;
|
|
const barWidth = Math.max(1, (width - gap * (barCount - 1)) / barCount);
|
|
const midY = height / 2;
|
|
|
|
return (
|
|
<svg width={width} height={height} viewBox={`0 0 ${width} ${height}`} aria-hidden="true">
|
|
{peaks.map((peak, i) => {
|
|
const barHeight = Math.max(1, peak * height);
|
|
const x = i * (barWidth + gap);
|
|
const y = midY - barHeight / 2;
|
|
return (
|
|
<rect
|
|
key={i}
|
|
x={x}
|
|
y={y}
|
|
width={barWidth}
|
|
height={barHeight}
|
|
fill={color}
|
|
rx={0.5}
|
|
/>
|
|
);
|
|
})}
|
|
</svg>
|
|
);
|
|
}
|