{label}

{displayValue}

); } // ============ WAVEFORM (Rekordbox-style) ============ // Two views stacked: // 1. Overview — static thumbnail of the whole track (scrubbable) // 2. Phase — zoomed, scrolling live view with centered playhead + beatgrid + freq-band color function Waveform({ trackId, progress, onScrub, cue, loop, seed = 1, empty, time, duration, bpm, firstBeat }) { // Deterministic multi-band data const bands = useMemo(() => { if (!seed) return null; const N = 320; // resolution of the overview const rngL = mulberry32(seed * 9301); const rngM = mulberry32(seed * 7919 + 13); const rngH = mulberry32(seed * 2477 + 91); const low = [], mid = [], high = []; for (let i = 0; i < N; i++) { const t = i / N; // intro/build/drop/outro envelope const envMain = 0.35 + 0.65 * Math.sin(t * Math.PI) * Math.sin(t * Math.PI * 1.3); const drop = Math.max(0, 1 - Math.abs(t - 0.45) * 8) * 0.35; // first drop around 45% const drop2 = Math.max(0, 1 - Math.abs(t - 0.78) * 10) * 0.3; // second drop const env = Math.min(1, envMain + drop + drop2); // kick/bass — dominant in drops low.push(Math.max(0.08, env * (0.4 + rngL() * 0.6) * (0.7 + drop + drop2))); // mids — vocals/synths, more even mid.push(Math.max(0.06, env * (0.35 + rngM() * 0.55))); // highs — hats/cymbals, more uniform but spiky high.push(Math.max(0.04, env * (0.25 + rngH() * 0.6))); } return { low, mid, high }; }, [seed]); const ref = useRef(null); const phaseRef = useRef(null); const handleScrub = (e) => { if (empty) return; const rect = ref.current.getBoundingClientRect(); const x = (e.clientX - rect.left) / rect.width; onScrub(Math.max(0, Math.min(1, x))); }; const handlePointerDown = (e) => { if (empty) return; handleScrub(e); const move = (ev) => handleScrub(ev); const up = () => { window.removeEventListener('pointermove', move); window.removeEventListener('pointerup', up); }; window.addEventListener('pointermove', move); window.addEventListener('pointerup', up); }; // ----- Phase waveform: scrub by horizontal drag (1 sec per 40px) ----- const handlePhasePointerDown = (e) => { if (empty || !duration) return; // Drag scrubs: dx px / pxPerSec -> seconds delta const pxPerSec = 40; const dur = typeof duration === 'string' ? null : duration; // fallback // We'll compute dur from the numeric duration prop if string ('mm:ss') let totalSec = 0; if (typeof duration === 'string' && duration.includes(':')) { const [m, s] = duration.split(':').map(Number); totalSec = (m || 0) * 60 + (s || 0); } if (!totalSec) return; const startX = e.clientX; const startProgress = progress; const move = (ev) => { const dx = ev.clientX - startX; const dSec = -dx / pxPerSec; // drag right -> rewind (like rekordbox) const next = Math.max(0, Math.min(1, startProgress + dSec / totalSec)); onScrub(next); }; const up = () => { window.removeEventListener('pointermove', move); window.removeEventListener('pointerup', up); }; window.addEventListener('pointermove', move); window.addEventListener('pointerup', up); }; // ----- Phase view parameters ----- // Show ~12 seconds of audio, 6 on each side of the playhead const PHASE_WINDOW_SEC = 12; let totalSec = 0; if (typeof duration === 'string' && duration.includes(':')) { const [m, s] = duration.split(':').map(Number); totalSec = (m || 0) * 60 + (s || 0); } const currentSec = progress * totalSec; const bpmVal = bpm || 120; const beatSec = 60 / bpmVal; return (

{/* ---------- PHASE (zoomed, scrolling) ---------- */}

{empty &&

— load a track —

} {!empty && bands && totalSec > 0 && ( )} {/* Centered playhead */} {!empty &&

} {/* Time readout */} {!empty &&

{time} / {duration}

}

{/* ---------- OVERVIEW (whole track, scrubbable) ---------- */}

{!empty && bands && ( )} {empty &&

Drop a YouTube / SoundCloud link

} {!empty && ( <>

{cue != null &&

} {loop &&

} )}

); } // Sub-component: the scrolling zoomed phase waveform (Rekordbox-style) function PhaseWaveform({ bands, trackId, currentSec, totalSec, windowSec, beatSec, firstBeat = 0 }) { // Map each band sample to a time. bands has N entries spanning totalSec. const N = bands.low.length; const secPerSample = totalSec / N; // How many samples in the visible window? const sampleWindow = Math.ceil(windowSec / secPerSample); const startSample = Math.max(0, Math.floor((currentSec - windowSec / 2) / secPerSample)); const endSample = Math.min(N, startSample + sampleWindow); // Fractional offset so the waveform scrolls smoothly between samples const subSample = ((currentSec - windowSec / 2) / secPerSample) - Math.floor((currentSec - windowSec / 2) / secPerSample); // SVG viewBox: 0..VB_W x 0..VB_H; each sample = VB_W / sampleWindow wide const VB_W = 600; const VB_H = 120; const pxPerSample = VB_W / sampleWindow; const centerY = VB_H / 2; const maxH = VB_H * 0.44; // Beatgrid ticks: anchored at firstBeat, spaced by beatSec. // beat index n is at time = firstBeat + n*beatSec; we render every beat in // the visible window and tag every 4th as a downbeat (bold yellow). const firstVisibleSec = currentSec - windowSec / 2; const lastVisibleSec = currentSec + windowSec / 2; const firstBeatIdx = Math.ceil((firstVisibleSec - firstBeat) / beatSec); const lastBeatIdx = Math.floor((lastVisibleSec - firstBeat) / beatSec); const ticks = []; for (let b = firstBeatIdx; b <= lastBeatIdx; b++) { const tSec = firstBeat + b * beatSec; const x = ((tSec - firstVisibleSec) / windowSec) * VB_W; // Downbeats: every 4th beat. Anchor "1" at the first beat after firstBeat // (b=0). Negative b values still mod correctly. ticks.push({ x, downbeat: ((b % 4) + 4) % 4 === 0, idx: b }); } const bars = []; for (let i = startSample; i < endSample; i++) { const localIdx = i - startSample; const x = localIdx * pxPerSample - subSample * pxPerSample; const lo = bands.low[i] || 0; const mi = bands.mid[i] || 0; const hi = bands.high[i] || 0; const loH = lo * maxH; const miH = mi * maxH * 0.75; const hiH = hi * maxH * 0.55; bars.push({ x, loH, miH, hiH }); } return ( ); } function mulberry32(a) { return function() { var t = a += 0x6D2B79F5; t = Math.imul(t ^ t >>> 15, t | 1); t ^= t + Math.imul(t ^ t >>> 7, t | 61); return ((t ^ t >>> 14) >>> 0) / 4294967296; }; } // ============ FADER ============ function Fader({ value, onChange, orientation = 'vertical', className = '' }) { const ref = useRef(null); const dragStart = useRef(null); const handlePointerDown = (e) => { e.preventDefault(); const rect = ref.current.getBoundingClientRect(); if (orientation === 'vertical') { const y = (e.clientY - rect.top) / rect.height; onChange(Math.max(0, Math.min(1, 1 - y))); } else { const x = (e.clientX - rect.left) / rect.width; onChange(Math.max(0, Math.min(1, x))); } const move = (ev) => { if (orientation === 'vertical') { const y = (ev.clientY - rect.top) / rect.height; onChange(Math.max(0, Math.min(1, 1 - y))); } else { const x = (ev.clientX - rect.left) / rect.width; onChange(Math.max(0, Math.min(1, x))); } }; const up = () => { window.removeEventListener('pointermove', move); window.removeEventListener('pointerup', up); }; window.addEventListener('pointermove', move); window.addEventListener('pointerup', up); }; if (orientation === 'vertical') { return (

{Array.from({ length: 11 }).map((_, i) => (

))}

); } return (

); } // ============ EXPORT TO WINDOW ============ Object.assign(window, { Icon, Knob, Waveform, Fader, mulberry32 });