/* ======================================================================== LUMINA — Floating Preview & Live Output monitors Always-visible draggable monitors. Pin them anywhere on the UI. ======================================================================== */ (function () { const { useState, useEffect, useRef } = React; function findStageCanvas() { // The Stage panel renders a canvas inside .screen-frame const frames = document.querySelectorAll(".screen-frame canvas"); return frames[0] || null; } function Monitor({ label, color, defaultPos, isLive, onClose }) { const [pos, setPos] = useState(defaultPos); const [size, setSize] = useState({ w: 320, h: 200 }); const [collapsed, setCollapsed] = useState(false); const cnvRef = useRef(null); useEffect(() => { let raf; const tick = (t) => { const out = cnvRef.current; if (out && !collapsed) { const dpr = 1.5; const W = Math.floor(size.w * dpr); const H = Math.floor(size.h * dpr); if (out.width !== W) out.width = W; if (out.height !== H) out.height = H; out.style.width = size.w + "px"; out.style.height = size.h + "px"; const ctx = out.getContext("2d"); const B = window.__blind; if (!isLive && B && B.armed) { // PREVIEW monitor in blind mode → render the STAGED look, // not what's on air. This is where you sculpt before TAKE. try { const A = window.AudioEngine || {}; const audio = { bass: A.bass || 0, mid: A.mid || 0, high: A.high || 0, energy: A.energy || 0, beat: A.beat || 0, freq: A.freq, wave: A.wave }; const VIS = window.VISUALIZERS || []; const viz = VIS.find(v => v.id === B.vizId) || VIS[0]; const computed = window.Prog ? window.Prog.computeParams(B.params || {}, audio, t / 1000) : (B.params || {}); ctx.fillStyle = "#05050a"; ctx.fillRect(0, 0, W, H); if (viz) viz.draw(ctx, W, H, audio, computed, t / 1000); // staged badge ctx.fillStyle = "rgba(255,174,58,0.92)"; ctx.font = "bold 11px monospace"; ctx.textAlign = "left"; ctx.textBaseline = "top"; ctx.fillText("STAGED · TAKE to launch", 8, 6); } catch (e) {} } else { const src = findStageCanvas(); if (src && src.width > 0) { try { ctx.imageSmoothingQuality = "high"; ctx.drawImage(src, 0, 0, W, H); } catch (e) {} } else if (window.LuminaComposite) { // Stage not mounted (other workspace active) → render the // composite directly so the monitor NEVER goes dark try { window.LuminaComposite(ctx, W, H, t / 1000); } catch (e) {} } } } raf = requestAnimationFrame(tick); }; raf = requestAnimationFrame(tick); return () => cancelAnimationFrame(raf); }, [size, collapsed]); const startDrag = (e) => { if (["BUTTON", "INPUT"].includes(e.target.tagName)) return; const start = { x: e.clientX, y: e.clientY }; const sp = { ...pos }; const onMove = (m) => setPos({ x: sp.x + (m.clientX - start.x), y: sp.y + (m.clientY - start.y) }); const onUp = () => { window.removeEventListener("mousemove", onMove); window.removeEventListener("mouseup", onUp); }; window.addEventListener("mousemove", onMove); window.addEventListener("mouseup", onUp); }; const startResize = (e) => { e.stopPropagation(); const start = { x: e.clientX, y: e.clientY }; const ss = { ...size }; const onMove = (m) => setSize({ w: Math.max(180, ss.w + (m.clientX - start.x)), h: Math.max(110, ss.h + (m.clientY - start.y)), }); const onUp = () => { window.removeEventListener("mousemove", onMove); window.removeEventListener("mouseup", onUp); }; window.addEventListener("mousemove", onMove); window.addEventListener("mouseup", onUp); }; return (
{/* Title bar */}
{label} {size.w}×{size.h}
{/* Canvas */} {!collapsed && (
{/* Resize handle */}
)}
); } function MonitorButtons() { const [preview, setPreview] = useState(false); const [output, setOutput] = useState(false); const openPopupMirror = () => { window.open("popup-monitor.html", "lumina_output_mirror_" + Date.now(), "width=960,height=540,menubar=no,toolbar=no,location=no,status=no"); }; const openNewWindow = () => { window.open(window.location.href, "lumina_window_" + Date.now(), "width=1400,height=900,menubar=no,toolbar=no,location=no,status=no"); }; return ( <>
{preview && ( setPreview(false)} /> )} {output && ( setOutput(false)} /> )} ); } function mount() { if (!window.React || !window.ReactDOM) { setTimeout(mount, 100); return; } let host = document.getElementById("__monitors_panel"); if (!host) { host = document.createElement("div"); host.id = "__monitors_panel"; document.body.appendChild(host); } ReactDOM.createRoot(host).render(); } if (document.readyState === "complete" || document.readyState === "interactive") setTimeout(mount, 800); else document.addEventListener("DOMContentLoaded", () => setTimeout(mount, 800)); })();