Log device-change events and optimize banners

Wire up stage event logging for device changes and improve device banner behavior.

- Import and use useStageEventLogger in FixAV and VideoCall, and call logEvent on user device selections.
- Propagate logEvent through useDeviceAlignment and add detailed device-changed events for user-select, auto-fallback, alignment, and recovery flows.
- Clean up speaker label handling and remove noisy console logs.
- Optimize useDeviceBanners.clearBannersForDevice to return the same array reference when nothing is removed (prevents unnecessary re-renders) and ensure timers for removed banners are cleared.

Files updated: FixAV.jsx, VideoCall.jsx, useDeviceAlignment.js, useDeviceBanners.js.

Author: JamesPHoughton

client/src/call/FixAV.jsx

@@ -21,6 +21,7 @@ import {
   generateRecoverySummary,
 } from "./utils/avRecovery";
 import { findMatchingDevice } from "./utils/deviceAlignment";
+import { useStageEventLogger } from "./hooks/eventLogger";
 
 /**
  * Collects comprehensive diagnostic data for A/V troubleshooting.
@@ -285,6 +286,7 @@ export function useFixAV(
   const [audioLevel, setAudioLevel] = useState(0);
   const [speakerError, setSpeakerError] = useState(null);
   const audioRef = useRef(null);
+  const logEvent = useStageEventLogger();
 
   // ------------------- audio level monitoring for mic picker ---------------------
   useAudioLevelObserver(
@@ -313,10 +315,11 @@ export function useFixAV(
         message: `Camera changed to "${label || selectedId}"`,
         level: "info",
       });
+      logEvent("device-changed", { deviceType: "camera", reason: "user-select-fixav", toId: selectedId, toLabel: label });
     } catch (err) {
       console.warn("[FixAV] Failed to set camera:", err);
     }
-  }, [devices, player]);
+  }, [devices, player, logEvent]);
 
   const handleMicChange = useCallback(async (e) => {
     const selectedId = e.target.value;
@@ -336,10 +339,11 @@ export function useFixAV(
         message: `Microphone changed to "${label || selectedId}"`,
         level: "info",
       });
+      logEvent("device-changed", { deviceType: "microphone", reason: "user-select-fixav", toId: selectedId, toLabel: label });
     } catch (err) {
       console.warn("[FixAV] Failed to set microphone:", err);
     }
-  }, [devices, player]);
+  }, [devices, player, logEvent]);
 
   const handleSpeakerChange = useCallback(async (e) => {
     const selectedId = e.target.value;
@@ -360,6 +364,7 @@ export function useFixAV(
         message: `Speaker changed to "${label || selectedId}"`,
         level: "info",
       });
+      logEvent("device-changed", { deviceType: "speaker", reason: "user-select-fixav", toId: selectedId, toLabel: label });
     } catch (err) {
       const isGestureGated =
         err?.name === "NotAllowedError" ||
@@ -371,7 +376,7 @@ export function useFixAV(
         console.warn("[FixAV] Failed to set speaker:", err);
       }
     }
-  }, [devices, player]);
+  }, [devices, player, logEvent]);
 
   const handleTestSound = useCallback(() => {
     if (audioRef.current) {

client/src/call/VideoCall.jsx

@@ -14,7 +14,7 @@ import {
 
 import { Tray } from "./Tray";
 import { Call } from "./Call";
-import { useDailyEventLogger } from "./hooks/eventLogger";
+import { useDailyEventLogger, useStageEventLogger } from "./hooks/eventLogger";
 import { useAutoDiagnostics } from "./hooks/useAutoDiagnostics";
 import { useAudioContextMonitor } from "./hooks/useAudioContextMonitor";
 import { useDisplayNameSync } from "./hooks/useDisplayNameSync";
@@ -155,6 +155,8 @@ export function VideoCall({
     deviceBanners, addDeviceBanner, clearDeviceBanner, clearBannersForDevice,
   } = useDeviceBanners();
 
+  const logEvent = useStageEventLogger();
+
   // ------------------- device errors + Daily event listeners ---------------------
   const {
     cameraError, setCameraError,
@@ -208,7 +210,7 @@ export function VideoCall({
     { setCameraError, setMicError, setSpeakerError },
     { handleSetupFailure, setPendingGestureOperations, setPendingOperationDetails },
     { cameraError, micError, speakerError },
-    { addDeviceBanner, clearBannersForDevice }
+    { addDeviceBanner, clearBannersForDevice, logEvent }
   );
 
   // ------------------- Fix A/V ref for banner → modal link ---------------------

client/src/call/hooks/useDeviceAlignment.js

@@ -36,7 +36,7 @@ export function useDeviceAlignment(
     handleSetupFailure, setPendingGestureOperations, setPendingOperationDetails,
   } = gestureHandlers;
   const { cameraError, micError, speakerError } = errorValues;
-  const { addDeviceBanner, clearBannersForDevice } = bannerCallbacks;
+  const { addDeviceBanner, clearBannersForDevice, logEvent } = bannerCallbacks;
 
   const preferredCameraId = player?.get("cameraId") ?? "waiting";
   const preferredMicId = player?.get("micId") ?? "waiting";
@@ -72,23 +72,29 @@ export function useDeviceAlignment(
       try {
         if (deviceType === "camera") {
           await callObject.setInputDevicesAsync({ videoDeviceId: deviceId });
+          const toLabel = devices?.cameras?.find((c) => c.device.deviceId === deviceId)?.device?.label || null;
           player?.set("cameraId", deviceId);
           loggedUnavailableCameraRef.current = null;
+          if (logEvent) logEvent("device-changed", { deviceType, reason: "user-select", toId: deviceId, toLabel });
         } else if (deviceType === "microphone") {
           await callObject.setInputDevicesAsync({ audioDeviceId: deviceId });
+          const toLabel = devices?.microphones?.find((m) => m.device.deviceId === deviceId)?.device?.label || null;
           player?.set("micId", deviceId);
           loggedUnavailableMicRef.current = null;
+          if (logEvent) logEvent("device-changed", { deviceType, reason: "user-select", toId: deviceId, toLabel });
         } else if (deviceType === "speaker") {
           await devices.setSpeaker(deviceId);
-          player?.set("speakerId", deviceId);
-          // Also save the label so future Safari ID-rotation fallback works
           const selectedSpeaker = devices?.speakers?.find(
             (s) => s.device.deviceId === deviceId
           );
+          const toLabel = selectedSpeaker?.device?.label || null;
+          player?.set("speakerId", deviceId);
+          // Also save the label so future Safari ID-rotation fallback works
           if (selectedSpeaker) {
-            player?.set("speakerLabel", selectedSpeaker.device.label);
+            player?.set("speakerLabel", toLabel);
           }
           loggedUnavailableSpeakerRef.current = null;
+          if (logEvent) logEvent("device-changed", { deviceType, reason: "user-select", toId: deviceId, toLabel });
         }
         // Clear only the error for the device that was just switched
         if (deviceType === "camera") setCameraError(null);
@@ -111,7 +117,7 @@ export function useDeviceAlignment(
         }
       }
     },
-    [callObject, player, devices, handleSetupFailure, setCameraError, setMicError, setSpeakerError]
+    [callObject, player, devices, handleSetupFailure, setCameraError, setMicError, setSpeakerError, logEvent]
   );
 
   // ------------------- alignment effect ---------------------
@@ -183,6 +189,13 @@ export function useDeviceAlignment(
               message: `"${prefName}" disconnected — switched to "${fallbackLabel}"`,
             });
           }
+          if (logEvent) {
+            logEvent("device-changed", {
+              deviceType, reason: "auto-fallback",
+              toId: targetId, toLabel: fallbackLabel,
+              preferredId, preferredLabel,
+            });
+          }
         } catch (err) {
           console.error(
             `Failed to auto-switch ${deviceType} to fallback`,
@@ -197,19 +210,25 @@ export function useDeviceAlignment(
 
       // Skip if we're already using this device
       if (currentDeviceId === targetId) {
-        // Clear any stale banner if the device is now matched
-        if (clearBannersForDevice) clearBannersForDevice(deviceType);
-        // If we previously fell back, clear the ref and show recovery banner
+        // If we previously fell back, show recovery banner.
+        // addDeviceBanner internally clears existing banners for this device
+        // type first, so no separate clearBannersForDevice call is needed.
         if (loggedUnavailableRef.current === preferredId) {
           // eslint-disable-next-line no-param-reassign
           loggedUnavailableRef.current = null;
+          const deviceName = targetDevice.device.label || preferredLabel || preferredId;
           if (addDeviceBanner) {
-            const deviceName = targetDevice.device.label || preferredLabel || preferredId;
             addDeviceBanner({
               deviceType,
               message: `"${deviceName}" reconnected — switched back`,
             });
           }
+          if (logEvent) {
+            logEvent("device-changed", {
+              deviceType, reason: "recovery-already-active",
+              toId: targetId, toLabel: deviceName, preferredId, preferredLabel,
+            });
+          }
         }
         return;
       }
@@ -224,9 +243,6 @@ export function useDeviceAlignment(
         },
       });
 
-      console.log(`Setting ${deviceType} via ${matchType} match`, {
-        preferredId, preferredLabel, targetId, targetLabel: targetDevice.device.label, matchType,
-      });
       // Check if this is a recovery (we previously fell back for this device)
       const isRecovery = loggedUnavailableRef.current === preferredId;
       // eslint-disable-next-line no-param-reassign
@@ -249,6 +265,16 @@ export function useDeviceAlignment(
               message: `"${deviceName}" reconnected — switched back`,
             });
           }
+          if (logEvent) {
+            logEvent("device-changed", {
+              deviceType,
+              reason: isRecovery ? "recovery" : "alignment",
+              matchType,
+              fromId: currentDeviceId,
+              toId: targetId,
+              toLabel: targetDevice.device.label,
+            });
+          }
         }
       } catch (err) {
         console.error(`Failed to set ${deviceType} via ${matchType} match`, err);
@@ -327,6 +353,13 @@ export function useDeviceAlignment(
               message: `"${prefName}" disconnected — switched to "${fallbackLabel}"`,
             });
           }
+          if (logEvent) {
+            logEvent("device-changed", {
+              deviceType: "speaker", reason: "auto-fallback",
+              toId: targetId, toLabel: fallbackLabel,
+              preferredId: preferredSpeakerId, preferredLabel: preferredSpeakerLabel,
+            });
+          }
         } catch (err) {
           console.error(
             "Failed to auto-switch speaker to fallback",
@@ -351,17 +384,24 @@ export function useDeviceAlignment(
       }
 
       if (devices?.currentSpeaker?.device?.deviceId === targetId) {
-        if (clearBannersForDevice) clearBannersForDevice("speaker");
-        // If we previously fell back, clear the ref and show recovery banner
+        // If we previously fell back, show recovery banner.
+        // addDeviceBanner internally clears existing banners for speaker first.
         if (loggedUnavailableSpeakerRef.current === preferredSpeakerId) {
           loggedUnavailableSpeakerRef.current = null;
+          const deviceName = targetSpeaker.device.label || preferredSpeakerLabel || preferredSpeakerId;
           if (addDeviceBanner) {
-            const deviceName = targetSpeaker.device.label || preferredSpeakerLabel || preferredSpeakerId;
             addDeviceBanner({
               deviceType: "speaker",
               message: `"${deviceName}" reconnected — switched back`,
             });
           }
+          if (logEvent) {
+            logEvent("device-changed", {
+              deviceType: "speaker", reason: "recovery-already-active",
+              toId: targetId, toLabel: deviceName,
+              preferredId: preferredSpeakerId, preferredLabel: preferredSpeakerLabel,
+            });
+          }
         }
         return;
       }
@@ -379,10 +419,6 @@ export function useDeviceAlignment(
         },
       });
 
-      console.log(`Setting speaker via ${matchType} match`, {
-        preferredSpeakerId, preferredSpeakerLabel,
-        targetId, targetLabel: targetSpeaker.device.label, matchType,
-      });
       const isSpeakerRecovery = loggedUnavailableSpeakerRef.current === preferredSpeakerId;
       loggedUnavailableSpeakerRef.current = null;
       updatingSpeakerRef.current = true;
@@ -402,6 +438,15 @@ export function useDeviceAlignment(
               message: `"${deviceName}" reconnected — switched back`,
             });
           }
+          if (logEvent) {
+            logEvent("device-changed", {
+              deviceType: "speaker",
+              reason: isSpeakerRecovery ? "recovery" : "alignment",
+              matchType,
+              toId: targetId,
+              toLabel: targetSpeaker.device.label,
+            });
+          }
           setPendingGestureOperations((prev) => ({ ...prev, speaker: false }));
           setPendingOperationDetails((prev) => ({ ...prev, speaker: null }));
         }
@@ -515,6 +560,7 @@ export function useDeviceAlignment(
     setPendingOperationDetails,
     addDeviceBanner,
     clearBannersForDevice,
+    logEvent,
   ]);
 
   return { handleSwitchDevice };

client/src/call/hooks/useDeviceBanners.js

@@ -31,15 +31,20 @@ export function useDeviceBanners() {
 
   const clearBannersForDevice = useCallback((deviceType) => {
     setBanners((prev) => {
-      const removed = prev.filter((b) => b.deviceType === deviceType);
-      removed.forEach((b) => {
-        const timer = timerRefs.current.get(b.id);
-        if (timer) {
-          clearTimeout(timer);
-          timerRefs.current.delete(b.id);
+      const remaining = prev.filter((b) => b.deviceType !== deviceType);
+      // Bail out with same reference if nothing was removed — prevents
+      // unnecessary re-renders that can cause infinite loops in effects.
+      if (remaining.length === prev.length) return prev;
+      prev.forEach((b) => {
+        if (b.deviceType === deviceType) {
+          const timer = timerRefs.current.get(b.id);
+          if (timer) {
+            clearTimeout(timer);
+            timerRefs.current.delete(b.id);
+          }
         }
       });
-      return prev.filter((b) => b.deviceType !== deviceType);
+      return remaining;
     });
   }, []);