AudioRackPanel.tish

// I/O Rack — pick the SPEAKERS (main mix) and HEADPHONES (cue) output devices, like a DJ mixer's booth/
// monitor outs. Enumerates the browser's audio outputs (one-time audio permission reveals real names),
// persists the choice (AudioDeviceSettings), and applies it to the live audio store (setSinkId on the two
// <audio> sinks). A cue-level slider sets the headphone volume. Per-deck CUE toggles live in the DeckMixer.

import { h, Fragment, useState, useEffect, useRef } from '@tishlang/lattish'
import { IkSelect } from './InstrumentKit.tish'
import { createAudioDeviceSettings } from '../core/AudioDeviceSettings.tish'
import { applyOutputDevices, setCueLevel, setCueSyncOffset, setMainAutoSync, setDrawDisabled, suspendDrawsAround } from '../audio/Engine.tish'

export fn AudioRackPanel(audioStore) {
  let storeRef = useRef(null)
  if (!storeRef.current) {
    storeRef.current = createAudioDeviceSettings()
  }
  let settings = storeRef.current
  let [devices, setDevices] = useState([])
  let [sel, setSel] = useState(settings.get())
  let [supported, setSupported] = useState(true)

  fn enumerate() {
    navigator.mediaDevices.enumerateDevices().then((list) => {
      let outs = []
      let i = 0
      while (i < list.length) {
        if (list[i].kind === "audiooutput") {
          outs.push({ id: list[i].deviceId, label: list[i].label })
        }
        i = i + 1
      }
      setDevices(outs)
    }, (e) => {})
  }

  // askPermission=true requests a one-time audio grant so device LABELS (names) are revealed; the mic is
  // stopped immediately (we only needed the permission). Falls back to generic names if denied.
  fn refresh(askPermission) {
    if (typeof navigator === "undefined" || !navigator.mediaDevices || !navigator.mediaDevices.enumerateDevices) {
      setSupported(false)
      return
    }
    if (askPermission && navigator.mediaDevices.getUserMedia) {
      navigator.mediaDevices.getUserMedia({ audio: true }).then((stream) => {
        let tracks = stream.getTracks()
        let t = 0
        while (t < tracks.length) {
          tracks[t].stop()
          t = t + 1
        }
        enumerate()
      }, (e) => {
        enumerate()
      })
    } else {
      enumerate()
    }
  }

  useEffect(() => {
    refresh(true)
    if (typeof navigator !== "undefined" && navigator.mediaDevices && navigator.mediaDevices.addEventListener) {
      navigator.mediaDevices.addEventListener("devicechange", () => {
        refresh(false)
      })
    }
  }, [])

  // isSwitch = this change reroutes the audio graph / sinks (device pick, auto-sync) → do it inside a
  // draw-quiet window. Param tweaks (cue level, offset, draw toggle) apply immediately.
  fn applyAll(next, isSwitch) {
    setSel(next)
    settings.save(next)
    if (!audioStore) {
      return
    }
    setDrawDisabled(audioStore, next.drawOff)
    setCueLevel(audioStore, next.cueLevel)
    setCueSyncOffset(audioStore, next.cueOffsetMs)
    if (isSwitch) {
      suspendDrawsAround(audioStore, () => {
        // Reroute MAIN onto/off the matched <audio> path FIRST, so the device routing below picks the right sink.
        setMainAutoSync(audioStore, next.autoSync)
        applyOutputDevices(audioStore, next.speakers, next.headphones)
      })
    }
  }
  fn baseNext() {
    return { speakers: sel.speakers, headphones: sel.headphones, cueLevel: sel.cueLevel, cueOffsetMs: sel.cueOffsetMs, autoSync: sel.autoSync, drawOff: sel.drawOff, cuePauseDraws: sel.cuePauseDraws }
  }
  fn onPick(role, id) {
    let next = baseNext()
    next[role] = id
    applyAll(next, true)
  }
  fn onCue(v) {
    let next = baseNext()
    next.cueLevel = Number(v)
    applyAll(next, false)
  }
  fn onCueOffset(v) {
    let next = baseNext()
    next.cueOffsetMs = Number(v)
    applyAll(next, false)
  }
  fn onAutoSync() {
    let next = baseNext()
    next.autoSync = !sel.autoSync
    applyAll(next, true)
  }
  fn onDrawToggle() {
    let next = baseNext()
    next.drawOff = !sel.drawOff
    applyAll(next, false)
  }
  fn onCuePause() {
    let next = baseNext()
    next.cuePauseDraws = !sel.cuePauseDraws
    applyAll(next, false)
  }

  fn deviceOptions() {
    let opts = [{ value: "", label: "— default —" }]
    let di = 0
    while (di < devices.length) {
      let d = devices[di]
      let label = d.label && String(d.label).length > 0 ? String(d.label) : ("Output " + String(di + 1))
      opts.push({ value: d.id, label: label })
      di = di + 1
    }
    return opts
  }

  if (!supported) {
    return <div class="io-rack io-rack-off">{"I/O RACK — this browser can't route multiple audio outputs (use Chrome / Edge)."}</div>
  }
  return (
    <div class="io-rack">
      <label class="io-slot">
        <span class="io-slot-label">{"SPEAKERS"}</span>
        {IkSelect({ class: "io-select", value: sel.speakers, options: deviceOptions(), onChange: (v) => onPick("speakers", v) })}
      </label>
      <label class="io-slot">
        <span class="io-slot-label io-slot-hp">{"HEADPHONES"}</span>
        {IkSelect({ class: "io-select", value: sel.headphones, options: deviceOptions(), onChange: (v) => onPick("headphones", v) })}
      </label>
      <label class="io-slot io-cue">
        <span class="io-slot-label">{"CUE"}</span>
        <input type="range" min="0" max="1.2" step="0.01" value={String(sel.cueLevel)} onmousedown={(e) => e.stopPropagation()} oninput={(e) => onCue(e.target.value)} />
      </label>
      <button
        type="button"
        class={sel.autoSync ? "io-autosync io-autosync-on" : "io-autosync"}
        title="AUTO-SYNC — route the speakers through the same buffered path as the headphones so the cue stays in time automatically (no manual offset). Adds a little latency to the main out; turn off for the lowest-latency speaker path."
        onmousedown={(e) => e.stopPropagation()}
        onclick={() => onAutoSync()}
      >
        {sel.autoSync ? "SYNC: AUTO" : "SYNC: MANUAL"}
      </button>
      {sel.autoSync ? null : (
        <label class="io-slot io-cue" title="Monitor offset — delay the speakers to line them up with the (buffered) headphone cue. Dial by ear until they're in time.">
          <span class="io-slot-label">{"OFFSET " + String(Math.round(Number(sel.cueOffsetMs))) + "ms"}</span>
          <input type="range" min="0" max="500" step="1" value={String(sel.cueOffsetMs)} onmousedown={(e) => e.stopPropagation()} oninput={(e) => onCueOffset(e.target.value)} />
        </label>
      )}
      <button type="button" class="io-refresh" title="Re-scan audio devices" onclick={() => refresh(true)}>{"⟳"}</button>
    </div>
  )
}