{step.title}

{step.detail || step.description}

{stepSrc ? (

) : (

step {stepIdx + 1} reference shot

)} {(step.media && step.media.caption) || (step.title || "").toLowerCase()}

chef's note —

{step.tip}

{minutes > 0 && this step ~ {minutes} min} · {(doneSteps || new Set()).size} of {total} steps complete

use the player below to advance

{String(stepIdx + 1).padStart(2, "0")}/{String(total).padStart(2, "0")} {step.title}

{ let v = elapsed; if (e.key === "ArrowRight" || e.key === "ArrowUp") v = Math.min(dur, elapsed + 5); else if (e.key === "ArrowLeft" || e.key === "ArrowDown") v = Math.max(0, elapsed - 5); else if (e.key === "Home") v = 0; else if (e.key === "End") v = dur; else return; e.preventDefault(); setElapsed(v); }} onClick={(e) => { const r = e.currentTarget.getBoundingClientRect(); const pct = Math.max(0, Math.min(1, (e.clientX - r.left) / r.width)); setElapsed(Math.round(pct * dur)); }} >

{fmtTime(elapsed)} {running ? "● cooking" : (doneSteps || new Set()).has(stepIdx) ? "✓ done" : "ready"} {fmtTime(dur)}

{steps.map((s, i) => { const isDone = (doneSteps || new Set()).has(i); const isNow = i === stepIdx; return (

); } // ─── FULL FDA-SHAPED NUTRITION SECTION ─────────────────────────────────── // Compact table row: name · value+unit · thin %DV bar · percent. Packs tightly // (auto-fill grid → multiple columns) so the panel reads dense, not sparse. function NutrientCell({ row }) { const [name, val, unit, dv, flag] = row; const fillPct = dv != null ? Math.min(100, Math.max(0, dv)) : 0; const flagClass = flag === 'high' ? ' flag-high' : flag === 'warn' ? ' flag-warn' : ''; const barClass = flag === 'warn' ? 'warn' : (dv != null && dv > 100) ? 'over' : ''; return (

{name} {val}{unit} {dv != null ? ( {dv}% ) : ( no DV )}

); } function NutritionSection({ nutrition, embedded }) { const [tab, setTab] = useState('all'); // Macros + micros in one list, so every nutrient shows together (matching // the ingredient detail page). Per-group tabs filter within it. const groups = (nutrition && nutrition.groups) || [...((nutrition && nutrition.macro) || []), ...((nutrition && nutrition.micro) || [])]; if (!groups.length) return null; const totalFields = groups.reduce((n, g) => n + g.rows.length, 0); const visibleGroups = tab === 'all' ? groups : groups.filter(g => g.name === tab); return (

{embedded ? (

{nutrition.basis} · {nutrition.source}

) : (

full nutrient profile · {nutrition.servings > 1 ? `${nutrition.servings} servings` : 'per serving'}

The whole FDA panel

Every nutrient derived from each ingredient's USDA FoodData Central record, scaled to {nutrition.servings > 1 ? `${nutrition.servings} servings` : 'a single serving'}. Rows with no data are hidden.

{nutrition.basis} {nutrition.source}

)} {groups.length > 1 && (

{groups.map(g => ( ))}

)} {visibleGroups.map(g => (

{g.name} {g.rows.length} fields

{g.rows.map((row, i) => )}

))}

high · ≥ 20% DV

watch · over recommended limit

regular contribution

%DV based on a 2,000 kcal reference diet

Note — values are estimates based on average ingredient profiles and the amounts in this recipe. They do not account for cooking losses, brand variation, or individual portion weighing.

); } // ─── SERVINGS SLIDER CARD ───────────────────────────────────────────────── // Standalone control that scales the whole recipe (ingredients + nutrition). // Slider 1 → max (6), defaults to 2. Mirrors the Flutter ServingSelectorCard. function ServingSlider({ servings, setServings, min = 1, max = 6 }) { const val = Math.max(min, Math.min(max, servings || 2)); const fillPct = ((val - min) / (max - min)) * 100; return (

servings

slide to scale ingredients & nutrition

{val}

setServings(Number(e.target.value))} aria-label="Servings" />

{Array.from({ length: max - min + 1 }, (_, i) => min + i).map((n) => ( {n} ))}

); } // ─── COOK NOW CTA ───────────────────────────────────────────────────────── function CookCta({ recipe, resumeStep, onCookNow }) { const steps = (recipe.steps || []).length; const mins = recipe.totalMinutes || recipe.minutes || 0; const resuming = resumeStep > 0 && resumeStep < steps; const sub = [resuming ? `resume · step ${resumeStep + 1}` : "guided", steps ? `${steps} steps` : null, mins ? `~${mins} min` : null].filter(Boolean).join(" · "); return ( ); } // ─── METHOD (collapsed steps overview) ──────────────────────────────────── function MethodCard({ recipe, onPlayStep }) { const steps = recipe.steps || []; return (

{steps.map((s, i) => ( ))}

); } // ─── FULL-SCREEN COOKING PLAYER ─────────────────────────────────────────── // Immersive "now playing" overlay: the step photo fills the screen, caption + // a big countdown sit over a scrim, transport advances steps, and the Web // Speech API narrates each step. Mirrors the Flutter CookingPlayerScreen. function CookingPlayerOverlay({ recipe, stepIdx, setStepIdx, doneSteps, setDoneSteps, onClose }) { const steps = recipe.steps || []; const total = steps.length; const step = steps[stepIdx] || {}; const [running, setRunning] = useState(false); const [elapsed, setElapsed] = useState(0); const [narrate, setNarrate] = useState(true); const stepSrc = (step.media && step.media.src) || step.image || ""; const dur = step.duration || 0; const remaining = Math.max(0, dur - elapsed); const segPct = dur ? Math.min(100, (elapsed / dur) * 100) : 0; const speak = () => { if (!narrate || !window.speechSynthesis) return; try { window.speechSynthesis.cancel(); const txt = `Step ${stepIdx + 1}. ${step.title || ""}. ${step.detail || step.description || ""}`; const u = new SpeechSynthesisUtterance(txt); u.rate = 1.0; u.lang = "en-US"; window.speechSynthesis.speak(u); } catch (_e) {} }; const stopSpeak = () => { try { window.speechSynthesis && window.speechSynthesis.cancel(); } catch (_e) {} }; useEffect(() => { setElapsed(0); }, [stepIdx]); useEffect(() => { speak(); return stopSpeak; }, [stepIdx]); // narrate on step enter useEffect(() => stopSpeak, []); // stop on unmount useEffect(() => { // lock body scroll while open const prev = document.body.style.overflow; document.body.style.overflow = "hidden"; return () => { document.body.style.overflow = prev; }; }, []); useEffect(() => { if (!running || !dur) return; const id = setInterval(() => { setElapsed((e) => { const next = e + 1; if (next >= dur) { setDoneSteps((p) => new Set([...p, stepIdx])); if (stepIdx < total - 1) setTimeout(() => setStepIdx(stepIdx + 1), 400); else setRunning(false); return dur; } return next; }); }, 1000); return () => clearInterval(id); }, [running, dur, stepIdx, total]); function toggleNarrate() { const next = !narrate; setNarrate(next); if (next) { const u = new SpeechSynthesisUtterance(`Step ${stepIdx + 1}. ${step.title || ""}. ${step.detail || step.description || ""}`); u.rate = 1.0; u.lang = "en-US"; try { window.speechSynthesis.cancel(); window.speechSynthesis.speak(u); } catch (_e) {} } else stopSpeak(); } function jump(delta) { const n = stepIdx + delta; if (n < 0 || n >= total) return; if (delta > 0) setDoneSteps((p) => new Set([...p, stepIdx])); setRunning(false); setStepIdx(n); } function jumpTo(i) { if (i === stepIdx) return; if (i > stepIdx) { const ds = new Set(doneSteps); for (let k = stepIdx; k < i; k++) ds.add(k); setDoneSteps(ds); } setRunning(false); setStepIdx(i); } function finish() { setDoneSteps((p) => new Set([...p, stepIdx])); stopSpeak(); onClose(); } return (

{titleParts[0]} {titleParts.slice(1).join(" ")}

{step.title}

{title} {count !== undefined && · {count}}

The whole FDA panel

servings

{step.title}