vizcore 1.1.0 → 1.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: c750ff1ca41db0024074232a588262d5220e4063cdb057421c25465b1de102eb
-  data.tar.gz: 3123d34ed03e497dde1530bc41ade0c5177c519072713817429d5e8187d97059
+  metadata.gz: 7944c441173090fb3e3ed70588cc7a6705697c140f516bc9502c5208c76577d3
+  data.tar.gz: 34896b6dedbb509e42d36a36a22d19f775e1f1a56031890bcf1d295744e331bb
 SHA512:
-  metadata.gz: ce9f65e426497957526ce5e73cd6eb4cfb0f5981fb1f3151cb12a39201d4d0bb3b5dad0b2563e5fe7220c2357e94e5efcb7956e49efd8167f836cbf89d22b875
-  data.tar.gz: b6ba9c3755a3ca4ba4e1fb4f163d55e0275c7ba513d8d39891893528238e39fe553cc020c14538bfac49e1a1f355e161e899904c1c0f57e77aa47e027444c774
+  metadata.gz: 3f86f14c01cfc947279eab536433e6f95fd2ee1abdaa0b1e55fc617af28c555f2241bc929113679fc247dd847099c08bc554a7126dacda16b8c689773f9f59d4
+  data.tar.gz: 2ec0d8c023f3657250e5752475df36c7c50dac117153df03618c9bdb21c19f7f8bcdbd5028c365be96e9fc633a8b62a718a32d04fc5edca2f08f7d00cf74e93a

data/frontend/index.html

@@ -459,6 +459,7 @@
       <p id="ws-status">WebSocket: connecting...</p>
       <p id="scene-status">Scene: unknown</p>
       <p id="transition-status">Transition: none</p>
+      <p id="runtime-error-status">Runtime: ok</p>
       <p id="frame-status">Amplitude: 0.0000</p>
       <p id="bpm-status" class="is-accent">BPM: --</p>
       <p id="beat-status">Beat: off | Count: 0</p>
@@ -467,7 +468,7 @@
         <button id="freeze-toggle" type="button" aria-pressed="false">Freeze</button>
         <p id="live-control-status" class="live-controls__status">Live: output</p>
       </div>
-      <p id="performance-monitor" class="performance-monitor">Perf: -- FPS | Frame -- | WS -- | RTT -- | Clock -- | Drop 0 | Audio -- | Shader -- | Reconnect 0</p>
+      <p id="performance-monitor" class="performance-monitor">Perf: -- FPS | Frame -- | WS -- | RTT -- | Probe max -- | Probe p95 -- | Clock -- | Drop 0 | BDrop 0 | WSLag --f | Audio -- | Capture -- | Analyze -- | Build -- | Shader -- | DPR -- | MaxTex -- | DrawBuf -- | floatColorBuffer no | textureFloat no | Safe off | Backpressure -- | Reconnect 0</p>
       <div class="audio-inspector" aria-label="Audio inspector">
         <div class="audio-inspector__header">
           <span>Audio</span>
@@ -501,6 +502,7 @@
         <div id="fft-preview" class="fft-preview" aria-label="FFT preview"></div>
       </div>
       <p id="audio-source-status">Audio Source: unknown</p>
+      <p id="audio-health-status">Audio Health: unknown</p>
       <p id="audio-track-status">Track: none</p>
       <p id="audio-playback-status">Playback: unavailable</p>
       <div class="reactivity-controls" aria-label="Visual reactivity controls">
@@ -549,7 +551,12 @@
     window.__vizcoreMainStarted = false;
     (function () {
       var protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
-      var websocketUrl = protocol + "//" + window.location.host + "/ws";
+      var pathname = String(window.location.pathname || "");
+      var search = String(window.location.search || "");
+      var params = new URLSearchParams(search);
+      var mode = String(params.get("mode") || "").toLowerCase();
+      var role = mode === "projector" || pathname.indexOf("/projector") === 0 ? "projector" : (mode === "monitor" ? "monitor" : "control");
+      var websocketUrl = protocol + "//" + window.location.host + "/ws?role=" + encodeURIComponent(role);
       var fallbackTimer = window.setTimeout(function () {
         if (window.__vizcoreMainStarted) return;
 
@@ -559,6 +566,7 @@
         var bpmStatus = document.getElementById("bpm-status");
         var beatStatus = document.getElementById("beat-status");
         var audioSourceStatus = document.getElementById("audio-source-status");
+        var audioHealthStatus = document.getElementById("audio-health-status");
         var peakStatus = document.getElementById("inspector-peak");
         var ampValue = document.getElementById("inspector-amplitude-value");
         var ampFill = document.getElementById("inspector-amplitude-fill");
@@ -582,6 +590,20 @@
             if (runtime && audioSourceStatus) {
               audioSourceStatus.textContent = "Audio Source: " + runtime.audio_source;
             }
+            if (runtime && audioHealthStatus) {
+              var input = runtime.input || {};
+              var ringBuffer = input.ring_buffer || {};
+              var sampleRate = Number(input.sample_rate || 0);
+              var requestedRate = Number(input.requested_sample_rate || 0);
+              var frameSize = Number(input.frame_size || 0);
+              var overrun = Number(ringBuffer.overrun_count || 0);
+              var underrun = Number(ringBuffer.underrun_count || 0);
+              var mismatch = input.sample_rate_mismatch ? " mismatched" : "";
+              var rateText = "Rate: " + (sampleRate > 0 ? sampleRate : "--") + "Hz" + (requestedRate > 0 && requestedRate !== sampleRate ? " (req " + requestedRate + "Hz)" : "");
+              var frameText = "Frame: " + (frameSize > 0 ? frameSize : "--");
+              var healthText = "Ring: " + overrun + "/" + underrun + " over/under";
+              audioHealthStatus.textContent = "Audio Health: " + rateText + ", " + frameText + mismatch + ", " + healthText;
+            }
           })
           .catch(function () {});
 

data/frontend/src/audio-inspector.js

@@ -6,14 +6,23 @@ export const buildAudioInspectorState = (audio, fftBins = DEFAULT_FFT_BINS) => {
     result[key] = clamp01(audio?.bands?.[key]);
     return result;
   }, {});
+  const bandPeaks = BAND_KEYS.reduce((result, key) => {
+    result[key] = clamp01(audio?.band_peaks?.[key]);
+    return result;
+  }, {});
 
   return {
     amplitude: clamp01(audio?.amplitude),
     bands,
+    bandPeaks,
     fft: normalizeFft(audio?.fft, fftBins),
     bpm: Number(audio?.bpm || 0),
     beat: !!audio?.beat,
     beatPulse: clamp01(audio?.beat_pulse),
+    beatPhase: clamp01(audio?.beat_phase),
+    barPhase: clamp01(audio?.bar_phase),
+    barCount: Math.max(0, Number(audio?.bar_count || 0) || 0),
+    phraseCount: Math.max(0, Number(audio?.phrase_count || 0) || 0),
     peakFrequency: Math.max(0, Number(audio?.peak_frequency || 0) || 0),
   };
 };

data/frontend/src/live-controls.js

@@ -1,24 +1,185 @@
+const finiteFloat = (value) => {
+  const numeric = Number(value);
+  return Number.isFinite(numeric) ? numeric : null;
+};
+
+const clamp01 = (value) => {
+  if (!Number.isFinite(value)) {
+    return null;
+  }
+  return Math.min(1, Math.max(0, value));
+};
+
+const parseHexColor = (value) => {
+  const raw = String(value || "").trim();
+  if (!raw.startsWith("#")) {
+    return null;
+  }
+
+  const rawHex = raw.slice(1);
+  const isShort = rawHex.length === 3 || rawHex.length === 4;
+  const isLong = rawHex.length === 6 || rawHex.length === 8;
+  if (!/^[0-9a-fA-F]+$/.test(rawHex) || (!isShort && !isLong)) {
+    return null;
+  }
+
+  const expanded = isShort
+    ? rawHex.split("").map((entry) => `${entry}${entry}`).join("")
+    : rawHex;
+
+  const channels = [];
+  for (let index = 0; index < expanded.length; index += 2) {
+    const channel = Number.parseInt(expanded.slice(index, index + 2), 16);
+    channels.push(clamp01(channel / 255));
+  }
+
+  return channels;
+};
+
+const normalizeColorChannels = (value, hasAlpha = false) => {
+  const values = Array.from(value || []);
+  if (values.length < 3 || values.length > 4) {
+    return null;
+  }
+
+  const rgbValues = values.slice(0, 3);
+  const shouldScaleRgbBy255 = rgbValues.some((channel) => channel > 1);
+  const rgb = rgbValues.map((channel) => (shouldScaleRgbBy255 ? clamp01(channel / 255) : clamp01(channel)));
+  const alpha = values.length === 4 ? clamp01(values[3] > 1 ? values[3] / 255 : values[3]) : null;
+  if (rgb.includes(null) || (values.length === 4 && alpha === null)) {
+    return null;
+  }
+
+  return hasAlpha ? [...rgb, alpha] : rgb;
+};
+
+const normalizeLiveControlColor = (value) => {
+  if (value == null) {
+    return null;
+  }
+
+  if (Array.isArray(value)) {
+    const channels = Array.from(value)
+      .slice(0, 4)
+      .map((channel) => Number(channel));
+    if (channels.length < 3 || channels.some((channel) => !Number.isFinite(channel))) {
+      return null;
+    }
+
+    const rgbValues = channels.slice(0, 3);
+    const alpha = channels.length === 4 ? clamp01(channels[3] > 1 ? channels[3] / 255 : channels[3]) : null;
+    if (channels.length === 4 && alpha === null) {
+      return null;
+    }
+
+    const shouldScaleRgbBy255 = rgbValues.some((channel) => channel > 1);
+    const normalizedRgb = rgbValues.map((channel) => (shouldScaleRgbBy255 ? clamp01(channel / 255) : clamp01(channel)));
+    return channels.length === 4 ? [...normalizedRgb, alpha] : normalizedRgb;
+  }
+
+  const parsed = parseHexColor(value);
+  if (!parsed) {
+    return null;
+  }
+
+  return normalizeColorChannels(parsed, parsed.length === 4);
+};
+
+const createLiveControlEntry = (enabled = false, fade = undefined, release = undefined, color = undefined) => {
+  return compactLiveControlEntry({
+    enabled: !!enabled,
+    fade: finiteFloat(fade),
+    release: finiteFloat(release),
+    color: normalizeLiveControlColor(color),
+  });
+};
+
+const compactLiveControlEntry = (entry) => {
+  const output = { ...entry };
+  if (!Object.prototype.hasOwnProperty.call(output, "fade")) {
+    return output;
+  }
+  if (output.fade === null || output.fade === undefined) {
+    delete output.fade;
+  }
+  if (output.release === null || output.release === undefined) {
+    delete output.release;
+  }
+  if (output.color === null || output.color === undefined) {
+    delete output.color;
+  }
+  return output;
+};
+
+const normalizeLiveControlState = (value) => {
+  if (value && typeof value === "object" && !Array.isArray(value)) {
+    if (Object.prototype.hasOwnProperty.call(value, "value")) {
+      return compactLiveControlEntry(createLiveControlEntry(
+        !!value.value,
+        value.fade,
+        value.release,
+        value.color
+      ));
+    }
+
+    return compactLiveControlEntry(createLiveControlEntry(
+      Object.prototype.hasOwnProperty.call(value, "enabled") ? !!value.enabled : false,
+      value.fade,
+      value.release,
+      value.color
+    ));
+  }
+
+  return compactLiveControlEntry(createLiveControlEntry(!!value));
+};
+
 export const createLiveControlState = () => ({
-  blackout: false,
-  freeze: false,
+  blackout: createLiveControlEntry(false),
+  freeze: createLiveControlEntry(false),
 });
 
+export const isLiveControlEnabled = (state) => {
+  if (!state) {
+    return false;
+  }
+
+  if (typeof state === "object") {
+    return !!state.enabled;
+  }
+
+  return !!state;
+};
+
+export const isLiveControlActive = (state) => {
+  if (!state || typeof state !== "object" || Array.isArray(state)) {
+    return isLiveControlEnabled(state);
+  }
+
+  return !!state.enabled;
+};
+
 export const toggleLiveControl = (state, key) => {
   const control = String(key || "");
   if (control !== "blackout" && control !== "freeze") {
     return { ...state };
   }
 
+  const current = normalizeLiveControlState(state?.[control]);
   return {
     ...state,
-    [control]: !state?.[control],
+    [control]: {
+      ...current,
+      enabled: !current.enabled,
+    },
   };
 };
 
+export const normalizeLiveControlPayload = (state) => normalizeLiveControlState(state);
+
 export const liveControlStatusText = (state) => {
   const values = [];
-  if (state?.blackout) values.push("Blackout");
-  if (state?.freeze) values.push("Freeze");
+  if (isLiveControlActive(state?.blackout)) values.push("Blackout");
+  if (isLiveControlActive(state?.freeze)) values.push("Freeze");
   return values.length ? `Live: ${values.join(" + ")}` : "Live: output";
 };
 
@@ -107,17 +268,59 @@ const normalizeKeyboardAction = (action) => {
   const type = String(action?.type || "").trim();
   if (type === "switch_scene") {
     const scene = String(action?.scene || "").trim();
-    return scene ? { type, scene } : null;
+    if (!scene) {
+      return null;
+    }
+    const effect = normalizeTransitionEffect(action?.effect);
+    return effect ? { type, scene, effect } : { type, scene };
   }
 
   if (type === "live_control") {
     const control = String(action?.control || "").trim();
-    return control === "blackout" || control === "freeze" ? { type, control } : null;
+    if (control !== "blackout" && control !== "freeze") {
+      return null;
+    }
+
+    const payload = { type, control };
+    if (Object.prototype.hasOwnProperty.call(action, "value")) {
+      payload.value = action.value;
+    }
+
+    const fade = finiteFloat(action?.fade);
+    if (fade !== null) {
+      payload.fade = fade;
+    }
+
+    const release = finiteFloat(action?.release);
+    if (release !== null) {
+      payload.release = release;
+    }
+
+    const color = normalizeLiveControlColor(action?.color);
+    if (color !== null) {
+      payload.color = color;
+    }
+
+    return payload;
   }
 
   return null;
 };
 
+const normalizeTransitionEffect = (effect) => {
+  if (!effect) {
+    return null;
+  }
+  if (typeof effect === "string" || typeof effect === "number" || typeof effect === "symbol") {
+    return { name: String(effect) };
+  }
+  if (typeof effect !== "object" || Array.isArray(effect)) {
+    return null;
+  }
+
+  return effect;
+};
+
 export const isEditableShortcutTarget = (target) => {
   if (!target) {
     return false;
@@ -129,3 +332,12 @@ export const isEditableShortcutTarget = (target) => {
     || tagName === "select"
     || target.isContentEditable === true;
 };
+
+const clamp = (value, min, max) => {
+  const numeric = Number(value);
+  if (!Number.isFinite(numeric)) {
+    return 0;
+  }
+
+  return Math.min(max, Math.max(min, numeric));
+};