/* ======================================================================== LUMINA — Workspace: Composition (GarageBand Live Loops + Resolume + DJ mixer) Track icons LEFT · clip grid CENTER · scene triggers BOTTOM · DJ mixer ======================================================================== */ const { useState: useStateCmp, useEffect: useEffectCmp, useRef: useRefCmp, useMemo: useMemoCmp } = React; /* Track config — each row is a "layer track" with a distinctive look */ const TRACK_DEFS = [ { id: "beat", name: "Beat Driver", color: "#ff7a1a", icon: "drums", vizs: ["bars", "radial", "tunnel", "kaleido"] }, { id: "atmos", name: "Atmosphere", color: "#4be6ff", icon: "synth", vizs: ["liquid", "terrain", "wave", "lissajous"] }, { id: "particle",name: "Particle FX", color: "#b785ff", icon: "particles", vizs: ["particles", "radial", "kaleido", "liquid"] }, { id: "image", name: "Image / Photo", color: "#7cff4f", icon: "image", vizs: ["imageFrame", "imageBurst", "photoStrip", "imageFrame"] }, { id: "video", name: "Video / Live", color: "#ff4ea6", icon: "video", vizs: ["videoTD", "videoMosh", "videoTD", "videoMosh"] }, { id: "text", name: "Text / Title", color: "#ffae3a", icon: "text", vizs: ["type", "type", "type", "type"] }, { id: "3d", name: "3D Scene", color: "#ff3b3b", icon: "cube", vizs: ["tunnel", "radial", "kaleido", "particles"] }, ]; const SCENE_NAMES = ["Intro", "Build", "Verse", "Pre-Drop", "Drop", "Break", "Chorus", "Outro"]; /* ===== Track icon (skeu instrument) ===== */ function TrackIcon({ kind, color }) { const c = color || "#ffae3a"; return ( {kind === "drums" && (<> )} {kind === "synth" && (<> )} {kind === "particles" && (<> )} {kind === "image" && (<> )} {kind === "video" && (<> )} {kind === "text" && (<> Aa )} {kind === "cube" && (<> )} ); } /* ===== Clip thumbnail (SVG, GarageBand-style abstract waveform) ===== */ function ClipThumb({ kind, active, seed = 0 }) { // generate a deterministic mini-wave or circle thumb const c = active ? "#fff" : "rgba(255,255,255,0.85)"; if (kind === "image" || kind === "video") { return ( ); } if (kind === "text") { return ( Aa ); } if (kind === "cube") { return ( ); } if (kind === "synth" || kind === "drums") { // concentric circle / radial bars const N = 28; const r = 14; const cx = 20, cy = 20; let path = ""; for (let i = 0; i < N; i++) { const ang = (i / N) * Math.PI * 2; const v = 0.55 + Math.sin(i * 1.7 + seed * 0.6) * 0.3 + Math.sin(i * 0.5 + seed) * 0.15; const r1 = r * 0.65, r2 = r * (0.65 + 0.35 * v); path += `M${cx + Math.cos(ang) * r1} ${cy + Math.sin(ang) * r1} L${cx + Math.cos(ang) * r2} ${cy + Math.sin(ang) * r2} `; } return ( ); } // default: waveform const N = 22; const pts = []; for (let i = 0; i < N; i++) { const x = 4 + (i / (N - 1)) * 32; const v = 0.4 + Math.sin(i * 0.8 + seed) * 0.5 + Math.sin(i * 1.6 + seed * 1.2) * 0.15; const y = 20 + (i % 2 ? -v : v) * 12; pts.push(`${x},${y}`); } return ( ); } /* ===== DJ Channel Strip ===== */ function ChannelStrip({ idx, color, name, fader, setFader, eq, setEq, gain, setGain, muted, setMuted, cued, setCued }) { return (
{name}
setEq({...eq, hi: v})} min={-12} max={12} step={0.1} label="HI" unit="" bipolar /> setEq({...eq, mid: v})} min={-12} max={12} step={0.1} label="MID" unit="" bipolar /> setEq({...eq, lo: v})} min={-12} max={12} step={0.1} label="LO" unit="" bipolar />
{/* VU */}
); } /* ===== Main composition workspace ===== */ function CompositionDeck({ vizId, setVizId, params, onParam, audio }) { // tracks = rows const tracks = TRACK_DEFS; const cols = SCENE_NAMES.length; // active clip per track (null = nothing playing on this track) const [active, setActive] = useStateCmp(() => tracks.map(() => null)); const [hovered, setHovered] = useStateCmp(null); // currently playing scene column (the "vertical trigger") const [playingScene, setPlayingScene] = useStateCmp(null); const [autopilot, setAutopilot] = useStateCmp(false); const [autopilotBars, setAutopilotBars] = useStateCmp(4); const [snapMode, setSnapMode] = useStateCmp(true); const [pendingScene, setPendingScene] = useStateCmp(null); const [pendingCell, setPendingCell] = useStateCmp(null); const autopilotRef = useRefCmp(0); // per-track mute / solo const [tState, setTState] = useStateCmp(() => tracks.map(() => ({ muted: false, solo: false, opacity: 0.9, blend: "normal" }))); const updT = (i, patch) => { setTState(s => s.map((t, k) => k === i ? { ...t, ...patch } : t)); // propagate live changes to the track's compositor layer if it's playing const S = window.LuminaStack; if (S && active[i] != null) { const L = S.layers[i]; if (L) { const p = {}; if ("opacity" in patch) p.opacity = patch.opacity; if ("blend" in patch) p.blend = patch.blend; if ("muted" in patch) p.enabled = !patch.muted; if ("solo" in patch) p.solo = patch.solo; if (Object.keys(p).length) S.update(L.id, p); } } }; // map each track row → a dedicated compositor layer (Resolume layers × columns) const trackLayer = (r) => { const S = window.LuminaStack; if (!S) return null; while (S.layers.length <= r) S.add(); return S.layers[r]; }; // BPM tap const [bpm, setBpm] = useStateCmp(128); const tapsRef = useRefCmp([]); const onTap = () => { const now = performance.now(); tapsRef.current.push(now); while (tapsRef.current.length > 6) tapsRef.current.shift(); if (tapsRef.current.length >= 2) { const d = []; for (let i = 1; i < tapsRef.current.length; i++) d.push(tapsRef.current[i] - tapsRef.current[i-1]); const avg = d.reduce((a,b)=>a+b,0) / d.length; setBpm(Math.round(60000 / avg)); } }; // grid: row=track, col=scene // clip configuration deterministic const grid = useMemoCmp(() => tracks.map((t, r) => Array.from({ length: cols }, (_, c) => ({ vizId: t.vizs[c % t.vizs.length], seed: r * 7 + c * 3, }))) , []); // Autopilot: auto-advance scene every N bars useEffectCmp(() => { if (!autopilot || !window.LuminaClock) return; const C = window.LuminaClock; autopilotRef.current = C.bar; const id = setInterval(() => { const bars = C.bar - autopilotRef.current; if (bars >= autopilotBars) { autopilotRef.current = C.bar; const next = playingScene == null ? 0 : (playingScene + 1) % cols; triggerScene(next); } }, 100); return () => clearInterval(id); }, [autopilot, autopilotBars, playingScene]); const triggerCell = (r, c) => { const fire = () => { const S = window.LuminaStack; // toggle off if re-triggering the playing clip if (active[r] === c) { const L = trackLayer(r); if (L && S) S.update(L.id, { enabled: false }); setActive(a => a.map((v, i) => i === r ? null : v)); setPendingCell(null); return; } setActive(a => a.map((v, i) => i === r ? c : v)); const L = trackLayer(r); if (L && S) S.update(L.id, { source: grid[r][c].vizId, enabled: !tState[r].muted, opacity: tState[r].opacity, blend: tState[r].blend, solo: tState[r].solo, }); if (r === 0) setVizId(grid[r][c].vizId); setPendingCell(null); }; if (snapMode && window.LuminaClock && window.LuminaClock.snap !== "off") { setPendingCell({ r, c }); window.LuminaClock.onSnap(fire); } else fire(); }; const triggerScene = (c) => { const fire = () => { const S = window.LuminaStack; setActive(a => a.map(() => c)); tracks.forEach((t, r) => { const L = trackLayer(r); if (L && S) S.update(L.id, { source: grid[r][c].vizId, enabled: !tState[r].muted, opacity: tState[r].opacity, blend: tState[r].blend, solo: tState[r].solo, }); }); setVizId(grid[0][c].vizId); setPlayingScene(c); setPendingScene(null); }; if (snapMode && window.LuminaClock && window.LuminaClock.snap !== "off") { setPendingScene(c); window.LuminaClock.onSnap(fire); } else fire(); }; // ── MIDI mapping: expose triggers + register every cell/scene as a learnable // MIDI target so a hardware controller (APC40 / Launchpad …) drives clips ── const [midiMap, setMidiMap] = useStateCmp(false); // "MIDI map" arm mode const [, forceMidi] = useStateCmp(0); const trigCellRef = useRefCmp(triggerCell); const trigSceneRef = useRefCmp(triggerScene); trigCellRef.current = triggerCell; trigSceneRef.current = triggerScene; useEffectCmp(() => { window.__triggerComposScene = (c) => trigSceneRef.current(c); window.__triggerComposCell = (r, c) => trigCellRef.current(r, c); // Register stable MIDI targets for all cells + scenes const M = window.MidiTargets; if (M) { for (let r = 0; r < tracks.length; r++) for (let c = 0; c < cols; c++) M[`cell-${r}-${c}`] = { onTrigger: () => trigCellRef.current(r, c) }; for (let c = 0; c < cols; c++) M[`scene-${c}`] = { onTrigger: () => trigSceneRef.current(c) }; M["blackout"] = { onTrigger: () => { const S = window.LuminaStack; if (S) S.setMasterBlackout(b => !b); } }; M["stopall"] = { onTrigger: () => stopAll() }; M["master-dim"] = { onValue: (v) => { const S = window.LuminaStack; if (S) S.setMasterOpacity(v); } }; } const off = window.LuminaMidi?.on?.(() => forceMidi(x => x + 1)); return () => { delete window.__triggerComposScene; delete window.__triggerComposCell; off?.(); }; }, [cols, tracks.length]); const cellBound = (r, c) => !!window.LuminaMidi?.findBinding?.(`cell-${r}-${c}`); const sceneBound = (c) => !!window.LuminaMidi?.findBinding?.(`scene-${c}`); const armLearn = (id) => { if (!window.LuminaMidi) return; window.LuminaMidi.startLearn({ id, kind: "trigger" }); forceMidi(x => x + 1); }; const stopAll = () => { const S = window.LuminaStack; tracks.forEach((t, r) => { const L = trackLayer(r); if (L && S) S.update(L.id, { enabled: false }); }); setActive(a => a.map(() => null)); setPlayingScene(null); }; // ── KEYBOARD LAUNCH SURFACE (Resolume-style hands-free triggering) ── // Digit row → launch whole SCENE columns 1..10 // Letter grid→ launch individual cells (3 rows = tracks 0,1,2 · 8 cols) // Space → blackout / stop all · B → master blackout toggle const [kbd, setKbd] = useStateCmp(() => { try { return localStorage.getItem("lumina_kbd_launch") !== "0"; } catch (e) { return true; } }); const CELL_KEY_ROWS = ["qwertyui", "asdfghjk", "zxcvbnm,"]; const keyForCell = (r, c) => { if (r < CELL_KEY_ROWS.length && c < 8) return CELL_KEY_ROWS[r][c]; return null; }; const sceneKeyFor = (c) => (c < 10 ? String((c + 1) % 10) : null); useEffectCmp(() => { try { localStorage.setItem("lumina_kbd_launch", kbd ? "1" : "0"); } catch (e) {} if (!kbd) return; const onKey = (e) => { // ignore when typing in a field or using a modifier (those are app shortcuts) const tag = (e.target.tagName || "").toLowerCase(); if (tag === "input" || tag === "textarea" || tag === "select" || e.target.isContentEditable) return; if (e.metaKey || e.ctrlKey || e.altKey) return; const k = e.key.toLowerCase(); if (e.key === " ") { e.preventDefault(); stopAll(); flashKey("␣"); return; } if (k === "b") { const S = window.LuminaStack; if (S && S.setMasterBlackout) S.setMasterBlackout(b => !b); flashKey("B"); return; } // digit → scene column if (/^[0-9]$/.test(k)) { const col = (parseInt(k, 10) + 9) % 10; // '1'→0 ... '0'→9 if (col < cols) { triggerScene(col); flashKey(k); e.preventDefault(); } return; } // letter grid → individual cell for (let r = 0; r < CELL_KEY_ROWS.length; r++) { const ci = CELL_KEY_ROWS[r].indexOf(k); if (ci >= 0 && r < tracks.length && ci < cols) { triggerCell(r, ci); flashKey(k); e.preventDefault(); return; } } }; window.addEventListener("keydown", onKey); return () => window.removeEventListener("keydown", onKey); }, [kbd, snapMode, cols, grid, tState]); const [keyFlash, setKeyFlash] = useStateCmp(null); const flashKey = (k) => { setKeyFlash(k); setTimeout(() => setKeyFlash(f => f === k ? null : f), 220); }; // crossfader const [xfade, setXfade] = useStateCmp(0.5); const [deck, setDeck] = useStateCmp("A"); const [mixerOpen, setMixerOpen] = useStateCmp(() => { try { return localStorage.getItem("lumina_mixer_open") !== "0"; } catch (e) { return true; } }); useEffectCmp(() => { try { localStorage.setItem("lumina_mixer_open", mixerOpen ? "1" : "0"); } catch (e) {} }, [mixerOpen]); // master output blackout state (mirrors LuminaStack for button feedback) const [masterBO, setMasterBO] = useStateCmp(false); useEffectCmp(() => { const S = window.LuminaStack; if (!S) return; setMasterBO(!!S.masterBlackout); return S.on(s => setMasterBO(!!s.masterBlackout)); }, []); const flashOutput = () => { if (window.Strobo) window.Strobo.fire("#ffffff"); }; const [strobeOn, setStrobeOn] = useStateCmp(false); // mixer state const [strip, setStrip] = useStateCmp(() => tracks.map((t, i) => ({ fader: i === 0 ? 1 : 0.6, gain: 0, eq: { hi: 0, mid: 0, lo: 0 }, muted: false, cued: false, }))); const updS = (i, patch) => setStrip(s => s.map((v, k) => k === i ? { ...v, ...patch } : v)); return (
{/* Top toolbar (GarageBand-style) */}
Live Loops
♩ {bpm} BPM
{/* Bar timeline header (numbered) */}
{Array.from({ length: cols }, (_, i) => (
{i * 4 + 1} {i === 0 && A} {i === 4 && B}
{kbd && sceneKeyFor(i) && (
{sceneKeyFor(i)}
)}
))}
{/* MAIN GRID — tracks left, clips center. minHeight keeps the clip grid usable even with the mixer expanded */}
{/* Left: track icons column */}
{tracks.map((t, r) => (
{t.name}
))}
{/* CENTER GRID */}
{tracks.map((t, r) => (
{grid[r].map((clip, c) => { const isActive = active[r] === c; const isScene = playingScene === c; const isPending = (pendingScene === c) || (pendingCell?.r === r && pendingCell?.c === c); return ( ); })}
))}
{/* RIGHT: Scene Outliner */}
{/* SCENE TRIGGERS (bottom row, GarageBand-style) */}
SCENES
{SCENE_NAMES.map((name, c) => { const isOn = playingScene === c; return ( ); })}
{playingScene !== null ? SCENE_NAMES[playingScene] : "—"}
{/* DJ MIXER — collapsible + scrollable so the clip grid ALWAYS has room */}
setMixerOpen(o => !o)} title={mixerOpen ? "Comprimi il mixer (più spazio alla griglia clip)" : "Espandi il mixer"} style={{ display: "flex", alignItems: "center", gap: 8, padding: "5px 14px", background: "linear-gradient(180deg, #1a1a20, #121216)", borderTop: "2px solid rgba(0,0,0,0.6)", cursor: "pointer", userSelect: "none", flexShrink: 0, }}> VJ · DJ Mixer
{mixerOpen ? "▾ comprimi" : "▴ espandi"}
{mixerOpen && (
{/* left badge */}
M
VJ · DJ MIXER
{/* channel strips */}
{tracks.map((t, i) => ( updS(i, { fader: v })} eq={strip[i].eq} setEq={v => updS(i, { eq: v })} gain={strip[i].gain} setGain={v => updS(i, { gain: v })} muted={strip[i].muted} setMuted={v => updS(i, { muted: typeof v === "function" ? v(strip[i].muted) : v })} cued={strip[i].cued} setCued={v => updS(i, { cued: typeof v === "function" ? v(strip[i].cued) : v })} /> ))} {/* MASTER strip */}
MASTER
{}} min={-20} max={6} step={0.1} label="GAIN" unit="dB" />
{}} min={0} max={1} height={130} label="" />
{/* Crossfader area */}
CROSSFADER
{Math.round((1 - xfade) * 100)}% {Math.round(xfade * 100)}%
{[ { n: "Flash", c: "red", on: false, fn: flashOutput }, { n: "Strobe", c: "amber", on: strobeOn, fn: () => { if (window.Strobo) { window.Strobo.enabled = !window.Strobo.enabled; setStrobeOn(window.Strobo.enabled); } } }, { n: "Black", c: "green", on: masterBO, fn: () => { const S = window.LuminaStack; if (S) S.setMasterBlackout(b => !b); } }, { n: "Snap", c: "cyan", on: snapMode, fn: () => setSnapMode(s => !s) }, ].map((b, i) => ( ))}
)}
); } /* ===== Scene Outliner (right side panel inside composition) ===== */ function SceneOutliner({ tracks, active, grid, tState, playingScene, bpm, stripState }) { const sceneName = playingScene !== null ? SCENE_NAMES[playingScene] : "— no scene —"; return (
Scene Outliner {bpm} BPM
ACTIVE SCENE
{sceneName}
{active.filter(a => a !== null).length} / {tracks.length} layers playing
{/* Per-track */} {tracks.map((t, r) => { const a = active[r]; const playing = a !== null && !tState[r].muted; const viz = a !== null && window.VISUALIZERS.find(v => v.id === grid[r][a].vizId); return (
{t.name} {Math.round(stripState[r].fader * 100)}%
{a !== null && (
└ {viz?.name || "—"}{tState[r].muted ? " · MUTED" : ""}
)}
); })} {/* Counts row */}
Behaviors
{window.Prog?.behaviors?.length || 0}
FX
{window.Prog?.fxChain?.length || 0}
); } window.CompositionDeck = CompositionDeck;