/* ======================================================================== LUMINA — Stage panel (canvas + overlays + cast/fullscreen) ======================================================================== */ const { useEffect: useEffectS, useRef: useRefS, useState: useStateS } = React; function Stage({ vizId, params, onParam, cast, setCast, recording, setRecording, exportFormat, exportRes, exportOrient, audio, fileName, projectName, liveMode, requestGoLive, panicKill }) { const canvasRef = useRefS(null); const fsCanvasRef = useRefS(null); const offRef = useRefS(null); const rafRef = useRefS(0); const tStartRef = useRefS(performance.now()); const [tab, setTab] = useStateS("preview"); // preview | master | output // animation loop useEffectS(() => { const cnv = canvasRef.current; const fcnv = fsCanvasRef.current; if (!cnv) return; const ctx = cnv.getContext("2d"); const A = window.AudioEngine; function resize() { const parent = cnv.parentElement; if (!parent) return; const r = parent.getBoundingClientRect(); if (r.width < 4 || r.height < 4) { requestAnimationFrame(resize); return; } const dpr = Math.min(2, window.devicePixelRatio || 1); cnv.width = Math.max(2, Math.floor(r.width * dpr)); cnv.height = Math.max(2, Math.floor(r.height * dpr)); // Match CSS size to layout box — using px not % cnv.style.width = r.width + "px"; cnv.style.height = r.height + "px"; cnv.style.display = "block"; ctx.setTransform(dpr, 0, 0, dpr, 0, 0); if (fcnv && cast) { fcnv.width = window.innerWidth; fcnv.height = window.innerHeight; } } // Multi-pass resize to catch post-layout reflows resize(); requestAnimationFrame(resize); setTimeout(resize, 100); setTimeout(resize, 400); const ro = new ResizeObserver(resize); ro.observe(cnv.parentElement); window.addEventListener("resize", resize); const tick = () => { const tStart = performance.now(); const t = (tStart - tStartRef.current) / 1000; // Per-frame resync — catches stale buffer/CSS mismatches reliably. const parent = cnv.parentElement; const dpr = Math.min(2, window.devicePixelRatio || 1); if (parent) { const cw = parent.clientWidth, chh = parent.clientHeight; if (cw > 4 && chh > 4) { const wantW = Math.floor(cw * dpr); const wantH = Math.floor(chh * dpr); if (cnv.width !== wantW || cnv.height !== wantH) { cnv.width = wantW; cnv.height = wantH; cnv.style.width = cw + "px"; cnv.style.height = chh + "px"; ctx.setTransform(dpr, 0, 0, dpr, 0, 0); } } } const w = cnv.width / dpr; const h = cnv.height / dpr; if (w < 4 || h < 4) { rafRef.current = requestAnimationFrame(tick); return; } const viz = window.VISUALIZERS.find(v => v.id === vizId) || window.VISUALIZERS[0]; const audioState = { freq: A.freq, wave: A.wave, bass: A.bass, mid: A.mid, high: A.high, energy: A.energy, beat: A.beat }; const computedParams = window.Prog ? window.Prog.computeParams(params, audioState, t) : params; // ── Layered compositor (Resolume-style) ── // Renders every enabled layer with its own source + opacity + blend mode. // Falls back to single viz when stack unavailable or only Main is active. const composite = (tctx, tw, th, tdpr) => { const stack = window.LuminaStack; const VIS = window.VISUALIZERS; if (!stack || !stack.layers || !stack.layers.length) { viz.draw(tctx, tw, th, audioState, computedParams, t); return; } const anySolo = stack.layers.some(l => l.solo); const active = stack.layers.filter(l => anySolo ? l.solo : l.enabled); if (!active.length) { tctx.clearRect(0, 0, tw, th); return; } // Single opaque normal layer → draw direct (fast path, identical to legacy) if (active.length === 1 && active[0].opacity >= 0.999 && active[0].blend === "normal") { const vid = (active[0].source && active[0].source !== "stage") ? active[0].source : vizId; const v = VIS.find(x => x.id === vid) || viz; v.draw(tctx, tw, th, audioState, computedParams, t); return; } // Multi-layer: render each to offscreen, blend onto target let off = offRef.current; if (!off) { off = offRef.current = document.createElement("canvas"); } if (off.width !== tw * tdpr || off.height !== th * tdpr) { off.width = tw * tdpr; off.height = th * tdpr; } const octx = off.getContext("2d"); tctx.clearRect(0, 0, tw, th); active.forEach((layer, idx) => { const vid = (layer.source && layer.source !== "stage") ? layer.source : vizId; const v = VIS.find(x => x.id === vid) || viz; octx.setTransform(tdpr, 0, 0, tdpr, 0, 0); octx.globalAlpha = 1; octx.globalCompositeOperation = "source-over"; octx.clearRect(0, 0, tw, th); v.draw(octx, tw, th, audioState, computedParams, t); tctx.globalAlpha = Math.max(0, Math.min(1, layer.opacity)); tctx.globalCompositeOperation = (idx === 0 || layer.blend === "normal") ? "source-over" : layer.blend; tctx.drawImage(off, 0, 0, tw, th); }); tctx.globalAlpha = 1; tctx.globalCompositeOperation = "source-over"; }; composite(ctx, w, h, dpr); // Apply FX chain (Bloom, Pixelate, Chromatic, Echo, Kaleido, Dither, etc.) if (window.Prog && window.Prog.fxChain.length) { window.Prog.applyFXChain(ctx, w, h, audioState); } // Visual stingers (one-shot overlays from Live Loops triggers) if (window.Stingers) window.Stingers.tick(ctx, w, h); // Strobo overlay if (window.Strobo) { window.Strobo.tick(audioState, t); window.Strobo.render(ctx, w, h); } // mirror to fullscreen canvas if casting AND we're allowed to (liveMode) if (cast && fcnv && liveMode) { const fctx = fcnv.getContext("2d"); const fw = fcnv.width, fh = fcnv.height; composite(fctx, fw, fh, 1); if (window.Prog && window.Prog.fxChain.length) window.Prog.applyFXChain(fctx, fw, fh, audioState); if (window.Stingers) window.Stingers.tick(fctx, fw, fh); if (window.Strobo) window.Strobo.render(fctx, fw, fh); } // Report frame time to Perf monitor if (window.Perf) window.Perf.report(performance.now() - tStart); rafRef.current = requestAnimationFrame(tick); }; rafRef.current = requestAnimationFrame(tick); return () => { cancelAnimationFrame(rafRef.current); ro.disconnect(); window.removeEventListener("resize", resize); }; }, [vizId, params, cast, liveMode]); // export resolution display const [rw, rh] = exportRes.split("x").map(Number); const oriented = exportOrient === "portrait" ? [rh, rw] : [rw, rh]; return (
{["preview", "master", "output"].map(t => (
setTab(t)}>{t}
))}
{/* PREVIEW / ON AIR indicator */}
{liveMode ? "On Air" : "Preview"}
{oriented[0]}×{oriented[1]} · {exportFormat.toUpperCase()}
{liveMode ? "● ON AIR" : "○ PREVIEW (not transmitting)"} · {window.VISUALIZERS.find(v => v.id === vizId)?.name || "—"}
{projectName} · {(audio?.energy * 100 || 0).toFixed(0)} dB
♫ {fileName || "no signal"}
{oriented[0]}×{oriented[1]} @ 60fps
{recording && (
REC · {exportFormat.toUpperCase()} · {oriented[0]}×{oriented[1]}
)}
FX 0.5} onChange={v => onParam("glow", v ? 1 : 0.2)} /> Glow
onParam("mirror", v)} /> Mirror
{/* GO LIVE / PANIC */} {!liveMode ? ( ) : ( )}
0.4} color="red" /> Beat 0.3} color="amber" /> Bass 0.3} color="green" /> Mid 0.3} color="cyan" /> Hi
{cast && (
PRESENTATION · {window.VISUALIZERS.find(v => v.id === vizId)?.name}
)}
); } window.Stage = Stage;