| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| import { useEffect, useRef, useState } from 'react' |
| import { createRoot } from 'react-dom/client' |
| import { DreamknobProvider, Rack, MetalKnob, PanKnob, Fader, IndicatorLamp, linearTaper, logTaper, powTaper } from 'dreamknob' |
|
|
| const MONO = "'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace" |
| const TAPERS = { lin: linearTaper, log: logTaper, pow2: powTaper(2) } |
| const SECTIONS = ['OUTPUT', 'EQ', 'FX', 'SCOPE'] |
|
|
| const api = () => window.mindxStudio |
| const colors = () => (api() && api().colors ? api().colors() : {}) |
|
|
| function themeFrom(c, light) { |
| return { |
| accent: c.gold || '#d6b25e', |
| track: c.line2 || 'rgba(232,230,223,.08)', |
| face: c.canvas || '#0a0d0c', |
| text: c.text || '#e8e6df', |
| label: c.text3 || '#6d7771', |
| ticks: c.text3 || '#6d7771', |
| focusRing: c.gold || '#d6b25e', |
| panel: light ? 'rgba(255,255,255,.85)' : 'rgba(14,18,17,.85)', |
| ledGreen: c.green || '#52d98a', |
| ledAmber: c.gold || '#d6b25e', |
| fontMono: MONO, |
| } |
| } |
|
|
| function useWidth(ref) { |
| const [w, setW] = useState(800) |
| useEffect(() => { |
| const el = ref.current |
| if (!el) return |
| const measure = () => setW(el.clientWidth || 800) |
| measure() |
| if (typeof ResizeObserver !== 'undefined') { const ro = new ResizeObserver(measure); ro.observe(el); return () => ro.disconnect() } |
| window.addEventListener('resize', measure) |
| return () => window.removeEventListener('resize', measure) |
| }, [ref]) |
| return w |
| } |
|
|
| function Cell({ k, size }) { |
| const set = (v) => api().setKnob(k.id, v) |
| const common = { |
| value: k.value, min: k.min, max: k.max, step: k.step || undefined, taper: TAPERS[k.taper] || linearTaper, |
| defaultValue: k.def, onChange: set, label: k.label, 'aria-label': k.label, |
| detents: k.detents, origin: k.origin, wheelRequiresFocus: true, |
| } |
| const c = colors() |
| let control |
| if (k.kind === 'fader') { |
| control = <Fader {...common} orientation="horizontal" fill breadth={40} showValue valuePosition="end" |
| format={() => k.text} color={c.gold} tickCount={9} editable /> |
| } else if (k.kind === 'pan') { |
| control = <PanKnob {...common} size={size} showValue format={() => k.text} color={c.gold} /> |
| } else { |
| control = <MetalKnob {...common} size={size} tone="dark" color={k.live ? c.green : c.gold} showValue format={() => k.text} |
| sublabel={k.sub || undefined} valueBubble bubbleFormat={() => k.text} editable /> |
| } |
| return ( |
| <div className={'sr-cell' + (k.kind === 'fader' ? ' sr-wide' : '')}> |
| {control} |
| <button type="button" className={'sr-map' + (k.mapped ? ' on' : '')} onClick={() => api().focusMapping(k.id)} |
| title={k.mapped ? 'mapped to ' + k.mapped + (k.live ? ' (live)' : ' (source idle: turns by hand)') : 'map this knob to a sense'}> |
| {k.mapped ? (k.live ? '● ' : '○ ') + k.mapped : 'map…'} |
| </button> |
| </div> |
| ) |
| } |
|
|
| function StudioRack() { |
| const [, tick] = useState(0) |
| const [light, setLight] = useState(() => document.documentElement.style.colorScheme === 'light' || getComputedStyle(document.documentElement).colorScheme === 'light') |
| const ref = useRef(document.getElementById('rack')) |
| const width = useWidth(ref) |
| useEffect(() => { |
| const on = () => tick((n) => n + 1) |
| const th = () => { setLight(getComputedStyle(document.documentElement).colorScheme === 'light'); tick((n) => n + 1) } |
| window.addEventListener('mindx:studio', on) |
| window.addEventListener('mindx:studio-theme', th) |
| return () => { window.removeEventListener('mindx:studio', on); window.removeEventListener('mindx:studio-theme', th) } |
| }, []) |
| const knobs = api().knobs() |
| const size = width < 420 ? 58 : width < 760 ? 64 : 72 |
| const anyLive = knobs.some((k) => k.live) |
| return ( |
| <DreamknobProvider base={light ? 'light' : 'dark'} theme={themeFrom(colors(), light)}> |
| <div className="sr-wrap"> |
| {SECTIONS.map((sec) => ( |
| <div className="sr-sec" key={sec}> |
| <Rack orientation="column" title={sec} gap={8} padding={10} accentColor={colors().gold} style={{ width: '100%', boxSizing: 'border-box', minWidth: 0 }}> |
| <div className="sr-knobs"> |
| {knobs.filter((k) => k.sec === sec).map((k) => <Cell key={k.id} k={k} size={size} />)} |
| </div> |
| </Rack> |
| </div> |
| ))} |
| </div> |
| <div style={{ marginTop: 8 }}> |
| <IndicatorLamp readOnly on={anyLive} color={colors().green} label={anyLive ? 'a sense is turning a knob' : 'every knob by hand'} labelSize={11} /> |
| </div> |
| </DreamknobProvider> |
| ) |
| } |
|
|
| function mount() { |
| const host = document.getElementById('rack') |
| if (!host || !window.mindxStudio || host.__mounted) return !!(host && host.__mounted) |
| host.__mounted = true |
| window.__mindxStudioRack = true |
| createRoot(host).render(<StudioRack />) |
| return true |
| } |
| if (!mount()) { |
| const t0 = Date.now() |
| const iv = setInterval(() => { if (mount() || Date.now() - t0 > 10000) clearInterval(iv) }, 120) |
| } |
|
|
