// ==================================================================== // lw-studio-record.jsx — Champion: the recording STUDIO screen // One beat at a time (Concept C) + centered recipient pill & revealable // example script (Concept D). Record overlays fade out / review controls // slide up when entering review, and the reverse on the next beat; the // lemon filmstrip highlight slides to the active beat. // ==================================================================== const { useState: useStateST, useEffect: useEffectST, useRef: useRefST, useLayoutEffect: useLayoutEffectST } = React; // ── The studio ────────────────────────────────────────────────────── function StudioScreen({ bene, theme, beats, segClips, setSegClips, rec, onReviewAll, onExit, logActivity, startAt = 0 }) { const [active, setActive] = useStateST(Math.min(startAt, Math.max(0, beats.length - 1))); const [showEx, setShowEx] = useStateST(false); const [altIdx, setAltIdx] = useStateST(-1); // -1 = the main example line const [phase, setPhase] = useStateST("live"); // live | preview | reviewBeat const [confirmOpen, setConfirmOpen] = useStateST(false); const pendingNavRef = useRefST(null); // review playback (lifted so the bar can live in a separate, sliding layer) const playRef = useRefST(null); const [playing, setPlaying] = useStateST(false); const [cur, setCur] = useStateST(0); const [dur, setDur] = useStateST(0); // filmstrip moving highlight const cardRefs = useRefST([]); const [hl, setHl] = useStateST(null); // live mic monitoring — proves audio is flowing, and catches a hijacked/silent // mic (e.g. a conferencing app holding the device) instead of shipping silence. const micBandsRef = useRefST([]); // per-band magnitudes → equalizer const [micSilent, setMicSilent] = useStateST(false); const heardRef = useRefST(false); const beat = beats[active] || {}; const recording = rec.status === "recording"; const doneCount = segClips.filter(Boolean).length; const allDone = beats.length > 0 && doneCount === beats.length; const isReview = phase === "preview" || phase === "reviewBeat"; const reviewClip = phase === "preview" ? { url: rec.recordedUrl, mock: rec.mode === "mock", dur: rec.elapsed } : phase === "reviewBeat" ? segClips[active] : null; useEffectST(() => { setShowEx(false); setAltIdx(-1); }, [active]); // recorder finished → straight into review (the layers cross-fade/slide) useEffectST(() => { if (rec.status === "recorded") setPhase("preview"); }, [rec.status]); // reset playback whenever the clip under review changes useEffectST(() => { setPlaying(false); setCur(0); setDur((reviewClip && reviewClip.dur) || 0); // eslint-disable-next-line react-hooks/exhaustive-deps }, [phase, active]); // slide the lemon highlight to the active beat card useLayoutEffectST(() => { const el = cardRefs.current[active]; if (el) setHl({ left: el.offsetLeft, top: el.offsetTop, width: el.offsetWidth, height: el.offsetHeight }); }, [active, beats.length]); // tap the live mic so we can show a waveform and detect silent capture useEffectST(() => { if (rec.mode !== "live" || !rec.streamRef.current) { micBandsRef.current = []; return; } const stop = lwMonitorAudioLevel(rec.streamRef.current, (lvl, meta) => { micBandsRef.current = (meta && meta.bands) || []; if (lvl > 0.06) heardRef.current = true; }); return stop; // eslint-disable-next-line react-hooks/exhaustive-deps }, [rec.mode, rec.streamRef.current, phase]); // while recording a live take, flag if we never hear anything for ~2.5s — // the tell-tale sign the mic was captured by other software. useEffectST(() => { if (!(recording && rec.mode === "live")) { setMicSilent(false); return; } heardRef.current = false; setMicSilent(false); const t = setTimeout(() => { if (!heardRef.current) setMicSilent(true); }, 2500); return () => clearTimeout(t); // eslint-disable-next-line react-hooks/exhaustive-deps }, [recording, rec.mode]); const exampleText = altIdx < 0 ? beat.ex : (beat.alts && beat.alts[altIdx]) || beat.ex; const startStop = async () => { if (recording) { await rec.stop(); /* → preview via effect */ } else { setPhase("live"); rec.start(); } }; const commitTake = () => { // store the take; we deliberately do NOT revoke the previous blob url here — // a redone beat can still be referenced elsewhere, and revoking caused black frames setSegClips((s) => { const n = [...s]; n[active] = { url: rec.recordedUrl, dur: rec.elapsed, mock: rec.mode === "mock" }; return n; }); logActivity && logActivity(`Recorded “${beat.t}”`, `${theme.label} · beat ${active + 1}`); rec.retake(false); // clear current take, keep url alive in segClips }; const keepTake = () => { commitTake(); const nextEmpty = beats.findIndex((_, i) => i !== active && !segClips[i]); if (nextEmpty >= 0) { setActive(nextEmpty); setPhase("live"); } else onReviewAll(); // that was the last beat → stitched review }; const runPending = () => { const fn = pendingNavRef.current; pendingNavRef.current = null; setConfirmOpen(false); if (fn) fn(); }; const discardTake = () => { rec.retake(true); setPhase("live"); }; const reRecordBeat = () => { setPhase("live"); }; const looksGood = () => { const next = beats.findIndex((_, i) => !segClips[i]); if (next >= 0) setActive(next); setPhase("live"); }; // Save & Exit — commit any take currently in preview, then jump straight to the // final review even if some beats are still empty. ReviewStage drops the empties. const saveAndExit = () => { if (recording) return; // can't save mid-recording if (phase === "preview") commitTake(); // persist the just-recorded take first onReviewAll(); }; const doJumpTo = (i) => { if (rec.status === "recorded") rec.retake(true); setActive(i); setPhase(segClips[i] ? "reviewBeat" : "live"); }; const jumpTo = (i) => { if (recording) return; if (phase === "preview") { pendingNavRef.current = () => doJumpTo(i); setConfirmOpen(true); return; } doJumpTo(i); }; const requestExit = () => { if (phase === "preview") { pendingNavRef.current = () => onExit(); setConfirmOpen(true); return; } onExit(); }; // review-bar content depends on which review we're in const barTitle = phase === "reviewBeat" ? `Reviewing · beat ${active + 1}` : "How was that take?"; const barMsg = phase === "reviewBeat" ? beat.t : (rec.mode === "mock" ? "Preview mode — imagine your take here." : "Watch it back, then keep it or try again."); const allRec = beats.every((b, i) => segClips[i]); const barReRecord = phase === "reviewBeat" ? reRecordBeat : discardTake; const barKeep = phase === "reviewBeat" ? (allRec ? onReviewAll : looksGood) : keepTake; const barKeepLabel = phase === "reviewBeat" ? (allRec ? "Review it all together" : "Looks good — next beat") : (beats.every((_, i) => i === active || segClips[i]) ? "Save & review all together" : "Keep & next beat"); // playback helpers const togglePlay = () => { const v = playRef.current; if (!v) return; if (v.paused) { v.play(); setPlaying(true); } else { v.pause(); setPlaying(false); } }; const onTime = () => { const v = playRef.current; if (!v) return; setCur(v.currentTime || 0); if (v.duration && isFinite(v.duration)) setDur(v.duration); }; const seek = (e) => { const v = playRef.current; const d = dur || (v && v.duration) || 0; if (!d) return; const r = e.currentTarget.getBoundingClientRect(); const p = Math.max(0, Math.min(1, (e.clientX - r.left) / r.width)); if (v) { v.currentTime = p * d; setCur(p * d); } }; const pct = dur ? Math.min(100, (cur / dur) * 100) : 0; const recVisible = phase === "live"; return (
{/* CAMERA AREA */}
{/* base video layer */} {isReview ? (
{reviewClip && reviewClip.url ?
) : } {/* exit (always) */} {recording &&
} {rec.mode === "mock" && phase === "live" && !recording && (
Camera off · preview mode
)} {/* ── RECORD OVERLAYS (fade out → review; fade in ← review) ── */}
{/* recipient pill — center, by the lens */}
Recording for {bene.firstName}
{/* compact beat prompt — upper-left (fades out with the rest in review) */}
Beat {active + 1} of {beats.length}{segClips[active] ? " · recorded" : ""}
{beat.t}
{beat.h}
{beat.ex && ( )}
{/* example — small box, center-top near the lens */} {showEx && beat.ex && (
{altIdx < 0 ? "You could say" : "Another way to say it"} {beat.alts && beat.alts.length > 0 && ( )}

“{exampleText}”

)} {/* silent-mic warning — the conferencing-app capture symptom */} {micSilent && recording && (
We can’t hear your microphone
Another app may be holding the mic. Your video is still recording — but the sound is silent.
)} {/* bottom record controls */}
{rec.mode === "live" ? :
} beat.ex && setShowEx((v) => !v)}>
{/* ── REVIEW BAR (slides up from the bottom) ── */}
{barTitle}
{barMsg}
{lwFmt(cur)} / {lwFmt(dur)}
{/* ── FILMSTRIP ── */}
{/* sliding lemon highlight */} {hl &&
} {beats.map((b, i) => { const clip = segClips[i]; return ( ); })}
{doneCount} of {beats.length} beats recorded
{doneCount > 0 && !allDone && (
Unrecorded beats are left out of the video.
)}
{/* unsaved-take guard */} {confirmOpen && (
{ pendingNavRef.current = null; setConfirmOpen(false); }} style={{ position: "absolute", inset: 0, zIndex: 40, background: "rgba(6,10,6,.62)", backdropFilter: "blur(4px)", display: "flex", alignItems: "center", justifyContent: "center", padding: 30 }} className="lw-fade-plain">
e.stopPropagation()} style={{ width: 440, maxWidth: "100%", background: "var(--helm-white)", borderRadius: 22, border: "1px solid var(--helm-dark-green)", boxShadow: "var(--shadow-card-lg)", padding: 28 }}>

Keep this take?

You just recorded “{beat.t}.” Save it to this beat, or discard it before moving on.

)}
); } // live mic equalizer — a fixed row of bars that grow & shrink IN PLACE with the // voice (iOS "now playing" style), drawn from per-band frequency data. Loudest // energy sits in the CENTER and tapers to the edges. Helm chartreuse; amber if silent. function WaveMeter({ bandsRef, silent, w = 56, h = 30 }) { const ref = useRefST(null); const easeRef = useRefST([]); useEffectST(() => { const cv = ref.current; if (!cv) return; const dpr = window.devicePixelRatio || 1; cv.width = w * dpr; cv.height = h * dpr; const ctx = cv.getContext("2d"); const NB = 7, center = (NB - 1) / 2; const color = silent ? "#D38D54" : "#8D9933"; const slot = cv.width / NB, barW = slot * 0.56, r = Math.min(barW / 2, 3 * dpr); const mid = cv.height / 2, minH = barW; let raf; const draw = () => { ctx.clearRect(0, 0, cv.width, cv.height); ctx.fillStyle = color; const bands = bandsRef.current || [], ease = easeRef.current; for (let i = 0; i < NB; i++) { // mirror around the center: distance-from-center picks the band, so the // strongest (low-freq) energy lands in the middle and falls off outward. const band = bands[Math.abs(i - center)] || 0; const target = silent ? 0 : Math.min(1, band); ease[i] = (ease[i] == null ? 0 : ease[i]) * 0.68 + target * 0.32; // settle in place const bh = Math.max(minH, ease[i] * cv.height * 0.92); const x = i * slot + (slot - barW) / 2, y = mid - bh / 2; ctx.beginPath(); ctx.moveTo(x + r, y); ctx.arcTo(x + barW, y, x + barW, y + bh, r); ctx.arcTo(x + barW, y + bh, x, y + bh, r); ctx.arcTo(x, y + bh, x, y, r); ctx.arcTo(x, y, x + barW, y, r); ctx.fill(); } raf = requestAnimationFrame(draw); }; draw(); return () => cancelAnimationFrame(raf); }, [silent, w, h]); return ; } // the equalizer dressed as a bottom-bar control (sits left of the record button, // in the slot the unused Replay button used to occupy). Light, glass-like surface. function WaveMeterControl({ bandsRef, silent }) { return (
{silent ? "No sound" : "Mic"}
); } // circular control button used in the studio control bar function ControlIcon({ children, label, onClick, disabled, active }) { return (
{label}
); } // ── StitchPlayer — plays the kept beats back-to-back as one video ──── function StitchPlayer({ segments, poster, accent = "var(--helm-lemon)" }) { const [idx, setIdx] = useStateST(0); const [playing, setPlaying] = useStateST(false); const vidRef = useRefST(null); const mockT = useRefST(null); // Only stitch beats that were actually recorded — empty beats are skipped // so a partial "Save & exit" video plays as one continuous piece. const segs = (segments || []).filter((s) => s && s.clip); const cur = segs[idx] || {}; const clip = cur.clip; const isLive = clip && clip.url; const playFrom = (i) => { setIdx(i); setPlaying(true); }; const next = () => { if (idx < segs.length - 1) playFrom(idx + 1); else { setPlaying(false); setIdx(0); } }; useEffectST(() => { if (!playing) { if (mockT.current) clearTimeout(mockT.current); return; } if (isLive && vidRef.current) { vidRef.current.src = clip.url; vidRef.current.play().catch(() => {}); } else { mockT.current = setTimeout(next, Math.max(2200, (clip?.dur || 5) * 1000)); } return () => { if (mockT.current) clearTimeout(mockT.current); }; }, [playing, idx]); return (
{isLive ?