// Human review — listen, then slice. Marking a span on the main wave splits it out // as its own audit track that carries a tag + comment and can be auditioned alone. // Geometry follows the kit: tracks 56, label col 223, r12 cards, Open Sans 18/24 · 12/16. function HumanReviewView({ art, onBack, onRecord, arts, onSelect, onAddComment }) { const A = art; const DUR = A ? A.dur : 60; // real takes carry the measured file duration const [mode, setMode] = React.useState('listen'); // listen | review const [t, setT] = React.useState(0); const [playing, setPlaying] = React.useState(false); const [scope, setScope] = React.useState(null); // [t0,t1] currently auditioned const [sel, setSel] = React.useState(null); // selected mark id const [pending, setPending] = React.useState(null); // fresh selection awaiting commit const [marks, setMarks] = React.useState([]); const [lang, setLang] = React.useState('Original'); const [notes, setNotes] = React.useState(false); const [zoom, setZoom] = React.useState(0.62); const [packed, setPacked] = React.useState(false); // share lanes when slices don't overlap // Slices move only — horizontally along the take and vertically between audit // lines. They are never resized: a slice's bounds are part of a recorded review. const lanesRef = React.useRef(null); const startDrag = (e, m) => { e.stopPropagation(); e.preventDefault(); const host = lanesRef.current; if (!host) return; const perPx = DUR / host.getBoundingClientRect().width; const x0 = e.clientX, y0 = e.clientY, a0 = m.t0, len = m.t1 - m.t0; const rowH = 64, baseLane = laneOf[m.id] || 0; const node = e.currentTarget; try { node.setPointerCapture(e.pointerId); } catch (err) {} setSel(m.id); let moved = false; const mv = ev => { if (Math.abs(ev.clientX - x0) > 2 || Math.abs(ev.clientY - y0) > 2) moved = true; const t0 = Math.max(0, Math.min(DUR - len, a0 + (ev.clientX - x0) * perPx)); const lane = Math.max(0, baseLane + Math.round((ev.clientY - y0) / rowH)); setMarks(ms => ms.map(x => x.id === m.id ? { ...x, t0, t1: t0 + len, lane } : x)); }; const up = () => { try { node.releasePointerCapture(e.pointerId); } catch (err) {} node.removeEventListener('pointermove', mv); node.removeEventListener('pointerup', up); node.removeEventListener('pointercancel', up); // a press without travel is an audition, not a move if (!moved) playFrom(m.t0, m.t1); }; node.addEventListener('pointermove', mv); node.addEventListener('pointerup', up); node.addEventListener('pointercancel', up); }; // send a slice to a row of its own, below every row currently in use const detach = (e, m) => { e.stopPropagation(); const free = Math.max(-1, ...Object.values(laneOf)) + 1; setMarks(ms => ms.map(x => x.id === m.id ? { ...x, lane: free } : x)); setSel(m.id); }; // pack marks onto as few lanes as possible without overlapping const laneOf = React.useMemo(() => { if (!packed) { // an explicit lane (set by dragging a slice up or down) wins over source order const out = {}; marks.forEach((m, i) => { out[m.id] = m.lane == null ? i : m.lane; }); return out; } const ends = []; const out = {}; [...marks].sort((a, b) => a.t0 - b.t0).forEach(m => { let r = ends.findIndex(e => e <= m.t0 - 0.05); if (r < 0) r = ends.length; ends[r] = m.t1; out[m.id] = r; }); return out; }, [marks, packed]); const laneCount = Math.max(-1, ...Object.values(laneOf)) + 1; const seed = A ? A.seed : 3.2; const clip = A && A.clip; const peaks = React.useMemo(() => wavePeaks(seed, 240, clip), [seed, clip]); const ovPeaks = React.useMemo(() => wavePeaks(seed + 0.4, 200, clip), [seed, clip]); // ---- transport ---- const stop = () => { Player.stop(); setPlaying(false); setScope(null); }; const playFrom = (from, until) => { if (!A) return; Player.start({ dur: DUR, seed, voice: A.voice, g: (LAB.voices[A.voice] || {}).g, src: A.src, clip: A.clip }, from, seed, tt => { setT(tt); setPlaying(true); }, () => { setPlaying(false); setScope(null); }, until); setT(from); setPlaying(true); setScope(until ? [from, until] : null); }; const toggle = () => playing ? stop() : playFrom(t >= DUR ? 0 : t); React.useEffect(() => () => Player.stop(), []); // A queue selection swaps the artifact without unmounting this view. Reset // all take-specific transport and review state so the new voice never // inherits the previous take's playhead, playback flag or marked regions. React.useEffect(() => { Player.stop(); setMode('listen'); setT(0); setPlaying(false); setScope(null); setSel(null); setPending(null); setMarks([]); setLang('Original'); setNotes(false); setZoom(0.62); setPacked(false); setDraft(''); }, [A && A.id]); // ---- marking ---- const commit = (t0, t1, tag) => { const id = 'm' + (marks.length + 1); setMarks(m => [...m, { id, t0, t1, tag: tag || null, comment: '', n: m.length + 1 }]); setSel(id); setPending(null); }; const onRegion = ([f0, f1]) => { if (mode !== 'review') return; const t0 = f0 * DUR, t1 = f1 * DUR; if (t1 - t0 < 0.4) return; setPending([t0, t1]); }; const patch = (id, k, v) => setMarks(m => m.map(x => x.id === id ? { ...x, [k]: v } : x)); const drop = id => { setMarks(m => m.filter(x => x.id !== id)); if (sel === id) setSel(null); }; const cur = marks.find(m => m.id === sel) || null; const clock = s => `${String(Math.floor(s / 60)).padStart(2, '0')}:${String(Math.floor(s % 60)).padStart(2, '0')}`; const tc = s => `${clock(s)}:${String(Math.floor((s % 1) * 100)).padStart(2, '0')}`; const pct = s => (s / DUR) * 100; // one row per lane: a single slice keeps its own name, a shared lane becomes an audit line const rows = [{ id: 'main', name: 'Main', sub: lang, tone: 'blue', items: [{ t0: 0, t1: DUR, seed }] }]; for (let r = 0; r < laneCount; r++) { const items = marks.filter(m => laneOf[m.id] === r); if (!items.length) continue; rows.push({ id: 'lane' + r, name: items.length === 1 ? `Marked tag ${items[0].n}` : `Audit line ${r + 1}`, sub: items.length === 1 ? (items[0].tag || 'untagged') : `${items.length} slices`, tone: items.some(m => m.tag) ? 'pink' : 'pink-l', items: items.map(m => ({ ...m, seed: seed + m.n })) }); } const [draft, setDraft] = React.useState(''); const comments = (A && A.comments) || []; const VOICE = (A && LAB.voices[A.voice]) || { name: '—', g: '—', lang: '—' }; const cmtAt = cur ? cur.t0 : t; const cmtTo = cur ? cur.t1 : t; const addCmt = () => { if (!draft.trim() || !A || !onAddComment) return; onAddComment(A.id, cmtAt, cmtTo, draft.trim()); setDraft(''); }; const ruleMarks = Array.from({ length: 6 }, (_, i) => Math.round((i / 5) * DUR)); // ---- review-state submenu ---- const STATES = [ { id: 'unreviewed', label: 'Unreviewed', icon: 'clock' }, { id: 'reviewed', label: 'Reviewed', icon: 'eq' }, { id: 'approved', label: 'Approved', icon: 'check' }, { id: 'rejected', label: 'Rejected', icon: 'close' }, { id: 'hold', label: 'Hold', icon: 'pause' } ]; const all = arts || []; // 'reviewed' is now a real state in the inbox, so match on it directly — // a derived "everything not unreviewed" view would double-count the other buckets. const inState = id => all.filter(x => x.state === id); const [bucket, setBucket] = React.useState('reviewed'); React.useEffect(() => { if (A && A.state !== bucket) setBucket(A.state); }, [A && A.id]); const inBucket = inState(bucket); const [railOpen, setRailOpen] = React.useState(() => localStorage.getItem('vlc_hrrail') !== '0'); const [infoOpen, setInfoOpen] = React.useState(() => localStorage.getItem('vlc_hrinfo') !== '0'); React.useEffect(() => { localStorage.setItem('vlc_hrinfo', infoOpen ? '1' : '0'); }, [infoOpen]); React.useEffect(() => { localStorage.setItem('vlc_hrrail', railOpen ? '1' : '0'); }, [railOpen]); return
{railOpen && Review Queue}
{STATES.map(s => { const n = inState(s.id).length; return ; })}
{railOpen && {inBucket.length} take{inBucket.length === 1 ? '' : 's'}}
{inBucket.map(x => )} {!inBucket.length && railOpen && Nothing in this state.}
{/* ---------- player card ---------- */}
{A ? `${A.voice}-${A.file.replace(/\.wav$/, '')}` : 'No take selected'} 12:54   {clock(DUR)}   {A ? `ckpt_${A.ckpt}` : 'Original'}
m.t0 / DUR)} onSeek={f => { setT(f * DUR); if (playing) playFrom(f * DUR); }} onRegion={onRegion}/>
{ruleMarks.map((m, i) => {clock(m)})}
{mode === 'review' && !pending && !marks.length &&
Drag across the wave to mark a section
}
{/* fresh selection → commit bar */} {pending &&
{tc(pending[0])} → {tc(pending[1])} ({(pending[1] - pending[0]).toFixed(1)}s)
{LAB.rejectTags.slice(0, 5).map(tg => )}
}
{ const r = e.currentTarget.getBoundingClientRect(); const nt = ((e.clientX - r.left) / r.width) * DUR; setT(nt); if (playing) playFrom(nt); }}> {marks.map(m => )}
{clock(t)}{clock(DUR)}
{tc(t)}
{/* Edit flips listen → review, which is what turns the wave into a slicing surface */}
{/* ---------- audit timeline ---------- */}
{clock(t)}/{clock(DUR)}
setLang('Original')}>Original setLang('English')}>English
{rows.map(tr =>
i.id === sel) ? ' on' : '')} onClick={() => tr.id !== 'main' && setSel(tr.items[0].id)}>
{tr.name}{tr.sub}
{tr.id === 'main' ? : <> }
)} {!marks.length &&
Nothing marked yet. Hit Edit, then drag across the wave.
}
{ruleMarks.map((m, i) => {clock(m)} )}
{rows.map(tr =>
{tr.items.map((it, ix) => { const isMain = tr.id === 'main'; const trimming = false; // two slices sitting flush against each other come from different // parts of the take — the join badge pulls them apart onto their own lines const next = tr.items[ix + 1]; const joined = !isMain && !!next; return { if (!isMain) startDrag(e, it); }} onClick={e => { e.stopPropagation(); if (isMain) playFrom(0); }}> {!isMain && } {joined && } ; })}
)} {scope && }
{/* inspector: the marked slice's tag + comment */}
{ const r = e.currentTarget.getBoundingClientRect(); setZoom(Math.max(0, Math.min(1, (e.clientX - r.left) / r.width))); }}>
{cur ? <>
Marked tag {cur.n} {tc(cur.t0)} → {tc(cur.t1)}
{LAB.rejectTags.slice(0, 8).map(tg => )}