Optimize realtime display processing

www/core/audio.js

@@ -9,6 +9,7 @@ import { getRtwCenters } from './rtw_centers.js';
 let phoenixSocket = null;
 let phoenixSpectroSocket = null;
 let phoenixSpectroRetryTimer = null;
+let phoenixSpectroDemanded = false;
 let pendingSpectroBuffer = null;
 let phoenixSpectroRaf = 0;
 let phoenixVisualsSocket = null;
@@ -99,6 +100,7 @@ function closePhoenixSocket() {
     } catch (_) {}
   }
   phoenixSpectroSocket = null;
+  phoenixSpectroDemanded = false;
   pendingSpectroBuffer = null;
   if (phoenixSpectroRaf) cancelAnimationFrame(phoenixSpectroRaf);
   phoenixSpectroRaf = 0;
@@ -253,6 +255,7 @@ function copyPhoenixSpectroBins(audioState, spectro, frameDelta = 1) {
 }
 
 function openPhoenixSpectroSocket(baseUrl, env) {
+  if (!phoenixSpectroDemanded) return;
   if (phoenixSpectroSocket && (
     phoenixSpectroSocket.readyState === WebSocket.OPEN
     || phoenixSpectroSocket.readyState === WebSocket.CONNECTING
@@ -269,7 +272,7 @@ function openPhoenixSpectroSocket(baseUrl, env) {
 
   const retry = () => {
     if (phoenixSpectroSocket === socket) phoenixSpectroSocket = null;
-    if (!phoenixSocket || phoenixSocket.readyState !== WebSocket.OPEN) return;
+    if (!phoenixSpectroDemanded || !phoenixSocket || phoenixSocket.readyState !== WebSocket.OPEN) return;
     if (phoenixSpectroRetryTimer) clearTimeout(phoenixSpectroRetryTimer);
     phoenixSpectroRetryTimer = setTimeout(() => {
       phoenixSpectroRetryTimer = null;
@@ -280,6 +283,31 @@ function openPhoenixSpectroSocket(baseUrl, env) {
   socket.onclose = retry;
 }
 
+function setPhoenixSpectroDemand(baseUrl, env, demanded) {
+  const next = !!demanded;
+  phoenixSpectroDemanded = next;
+  if (next) {
+    if (phoenixSocket?.readyState === WebSocket.OPEN) openPhoenixSpectroSocket(baseUrl, env);
+    return;
+  }
+  if (phoenixSpectroRetryTimer) clearTimeout(phoenixSpectroRetryTimer);
+  phoenixSpectroRetryTimer = null;
+  if (phoenixSpectroSocket) {
+    const socket = phoenixSpectroSocket;
+    phoenixSpectroSocket = null;
+    try {
+      socket.onopen = null;
+      socket.onmessage = null;
+      socket.onerror = null;
+      socket.onclose = null;
+      socket.close();
+    } catch (_) {}
+  }
+  pendingSpectroBuffer = null;
+  if (phoenixSpectroRaf) cancelAnimationFrame(phoenixSpectroRaf);
+  phoenixSpectroRaf = 0;
+}
+
 function scheduleSpectroBufferPump(env) {
   if (phoenixSpectroRaf || !pendingSpectroBuffer) return;
   phoenixSpectroRaf = requestAnimationFrame(() => {
@@ -1043,6 +1071,7 @@ async function initPhoenixAudio(env) {
       ? cfg
       : ((typeof env?.getProcessingProfile === 'function') ? env.getProcessingProfile() : null);
     const profile = rawProfile || {};
+    setPhoenixSpectroDemand(baseUrl, env, profile.needSpectro);
     if (!profile.needXy) {
       env.audio.xyL = null;
       env.audio.xyR = null;
@@ -1057,6 +1086,9 @@ async function initPhoenixAudio(env) {
       resetWaveformStateFallback(env.audio.waveformFallback);
     }
   };
+  env.audio.updateProcessingConfig(
+    (typeof env?.getProcessingProfile === 'function') ? env.getProcessingProfile() : null,
+  );
 
   const pushPhoenixGlobalConfig = async () => {
     const response = await requestPhoenixGlobalConfigUpdate(baseUrl, buildPhoenixGlobalConfigPayload());
@@ -1105,7 +1137,7 @@ async function initPhoenixAudio(env) {
     };
 
     socket.onopen = () => {
-      openPhoenixSpectroSocket(baseUrl, env);
+      if (phoenixSpectroDemanded) openPhoenixSpectroSocket(baseUrl, env);
       openPhoenixVisualsSocket(baseUrl, env);
       finish(true);
     };