Use room event from bridge between livekit - redux, unify and fix toggle...

RayoProton · MargeBot · commit e09f9766b052 · 2026-06-08T09:08:27.000Z
diff --git a/applications/meet/src/app/contexts/MediaManagementProvider/MediaManagementContext.tsx b/applications/meet/src/app/contexts/MediaManagementProvider/MediaManagementContext.tsx
@@ -2,21 +2,13 @@ import { createContext, useContext } from 'react';
 
 import debounce from 'lodash/debounce';
 
-import type { SwitchActiveDevice, ToggleVideoType } from '../../types';
+import type { SwitchActiveDevice, ToggleAudioType, ToggleVideoType } from '../../types';
 
 export interface MediaManagementContextType {
     isVideoEnabled: boolean;
     isAudioEnabled: boolean;
     toggleVideo: ToggleVideoType;
-    toggleAudio: ({
-        isEnabled,
-        audioDeviceId,
-        preserveCache,
-    }: {
-        isEnabled?: boolean;
-        audioDeviceId?: string;
-        preserveCache?: boolean;
-    }) => Promise<boolean | undefined>;
+    toggleAudio: ToggleAudioType;
     backgroundBlur: boolean;
     toggleBackgroundBlur: ReturnType<typeof debounce>;
     isBackgroundBlurSupported: boolean;
diff --git a/applications/meet/src/app/contexts/MediaManagementProvider/MediaManagementProvider.tsx b/applications/meet/src/app/contexts/MediaManagementProvider/MediaManagementProvider.tsx
@@ -39,7 +39,6 @@ import { TimeoutError, withTimeout } from '@proton/meet/utils/withTimeout';
 import { isMobile } from '@proton/shared/lib/helpers/browser';
 import { wait } from '@proton/shared/lib/helpers/promise';
 
-import { useDeviceData } from '../../hooks/bridges/useDeviceData';
 import { useStableCallback } from '../../hooks/useStableCallback';
 import { preloadBackgroundProcessorAssets } from '../../processors/background-processor/createBackgroundProcessor';
 import type { SwitchActiveDevice } from '../../types';
@@ -50,9 +49,7 @@ import { PermissionsModal } from './PermissionsModal/PermissionsModal';
 import { useAudioToggle } from './mediaToggle/useAudioToggle';
 import { useVideoToggle } from './mediaToggle/useVideoToggle';
 import { useCameraPreview } from './useCameraPreview';
-import { useDeviceListSync } from './useDeviceListSync';
-import { useDevicePermissionChangeListener } from './useDevicePermissionChangeListener';
-import { useDynamicDeviceHandling } from './useDynamicDeviceHandling';
+import { useDeviceManagement } from './useDeviceManagement/useDeviceManagement';
 import { useMicrophoneVolumeAnalysis } from './useMicrophoneVolumeAnalysis';
 
 const SWITCH_DEVICE_TIMEOUT_MS = 5000;
@@ -64,8 +61,6 @@ export const MediaManagementProvider = ({ children }: { children: React.ReactNod
     const dispatch = useMeetDispatch();
     const store = useMeetStore();
 
-    useDeviceListSync();
-
     const initialCameraState = useMeetSelector(selectInitialCameraState);
     const initialAudioState = useMeetSelector(selectInitialAudioState);
 
@@ -187,6 +182,8 @@ export const MediaManagementProvider = ({ children }: { children: React.ReactNod
 
     const { toggleAudio, noiseFilter, toggleNoiseFilter, isAudioEnabled } = useAudioToggle(switchActiveDevice);
 
+    const { permissionsLoading } = useDeviceManagement({ toggleAudio, toggleVideo, switchActiveDevice });
+
     const { handlePreviewCameraToggle, cleanupCameraPreview, cleanupPreviewTrack } = useCameraPreview({
         selectedCameraId: activeCameraDeviceId,
         facingMode: 'user',
@@ -371,16 +368,6 @@ export const MediaManagementProvider = ({ children }: { children: React.ReactNod
         }
     };
 
-    useDeviceData();
-
-    const { permissionsLoading } = useDevicePermissionChangeListener();
-
-    useDynamicDeviceHandling({
-        toggleAudio,
-        toggleVideo,
-        switchActiveDevice,
-    });
-
     const initializedDevices = useRef({
         video: false,
         audio: false,
diff --git a/applications/meet/src/app/contexts/MediaManagementProvider/mediaToggle/useAudioToggle.ts b/applications/meet/src/app/contexts/MediaManagementProvider/mediaToggle/useAudioToggle.ts
@@ -24,7 +24,7 @@ import { wait } from '@proton/shared/lib/helpers/promise';
 
 import { useStableCallback } from '../../../hooks/useStableCallback';
 import { audioQuality } from '../../../qualityConstants';
-import type { SwitchActiveDevice } from '../../../types';
+import type { AudioToggleParams, SwitchActiveDevice, ToggleAudioType } from '../../../types';
 import { getPersistedNoiseFilter, persistNoiseFilter } from '../../../utils/noiseFilterPersistence';
 import {
     RNNoiseFilter,
@@ -42,13 +42,6 @@ const NOISE_FILTER_SETTLE_DELAY_MS = 600;
 /** Longer delay after device change to let the track and devicechange events settle */
 const NOISE_FILTER_DEVICE_CHANGE_DELAY_MS = 1500;
 const SAFARI_DEVICE_RELEASE_DELAY_MS = 300;
-interface AudioToggleParams {
-    isEnabled: boolean;
-    audioDeviceId: string;
-    preserveCache: boolean;
-    /** Skip noise filter setup — used by track-ended recovery to get audio working immediately */
-    skipNoiseFilter: boolean;
-}
 
 const DEBUG_PREFIX = '[AudioToggle]';
 
@@ -446,7 +439,7 @@ export const useAudioToggle = (switchActiveDevice: SwitchActiveDevice) => {
      * (LiveKit restarts it internally). If the track was replaced (new ID), schedules
      * a fresh noise filter attach with a longer delay to let devicechange events settle.
      */
-    const toggleAudio = useStableCallback(async (params: Partial<AudioToggleParams> = {}) => {
+    const toggleAudio: ToggleAudioType = useStableCallback(async (params) => {
         let toggleResult = false;
         const operationId = ++toggleOperationId.current;
 
@@ -456,7 +449,7 @@ export const useAudioToggle = (switchActiveDevice: SwitchActiveDevice) => {
         const {
             isEnabled = !currentMuteState,
             audioDeviceId = activeMicrophoneDeviceId,
-            preserveCache,
+            preserveCache = false,
             skipNoiseFilter = false,
         } = params;
 
diff --git a/applications/meet/src/app/contexts/MediaManagementProvider/mediaToggle/useVideoToggle.ts b/applications/meet/src/app/contexts/MediaManagementProvider/mediaToggle/useVideoToggle.ts
@@ -22,7 +22,7 @@ import {
     createBackgroundProcessor,
     ensureBackgroundBlurProcessor,
 } from '../../../processors/background-processor/createBackgroundProcessor';
-import type { SwitchActiveDevice } from '../../../types';
+import type { SwitchActiveDevice, ToggleVideoType } from '../../../types';
 import { getPersistedBackgroundBlur, persistBackgroundBlur } from '../../../utils/backgroundBlurPersistance';
 import { ERRORS_SIGNALING_POTENTIAL_STALE_DEVICE_STATE } from './constants';
 
@@ -78,28 +78,17 @@ export const useVideoToggle = (switchActiveDevice: SwitchActiveDevice) => {
         }
     });
 
-    const toggleVideo = useStableCallback(
-        async (
-            params: {
-                isEnabled?: boolean;
-                videoDeviceId?: string;
-                facingMode?: 'environment' | 'user';
-                preserveCache?: boolean;
-                recoveringFromError?: boolean;
-                updateUserIntent?: boolean;
-            } = {}
-        ) => {
+    const toggleVideo: ToggleVideoType = useStableCallback(
+        async ({
+            isEnabled = userCameraIntent ?? initialCameraState,
+            videoDeviceId = activeCameraDeviceId,
+            facingMode: customFacingMode,
+            preserveCache,
+            recoveringFromError = false,
+            updateUserIntent = true,
+        } = {}) => {
             let toggleResult = false;
 
-            const {
-                isEnabled = userCameraIntent ?? initialCameraState,
-                videoDeviceId = activeCameraDeviceId,
-                facingMode: customFacingMode,
-                preserveCache,
-                recoveringFromError = false,
-                updateUserIntent = true,
-            } = params;
-
             const deviceId = videoDeviceId;
 
             if (toggleInProgress.current || (!deviceId && !isMobile())) {
diff --git a/applications/meet/src/app/contexts/MediaManagementProvider/useDeviceManagement/useActiveDeviceSync.ts b/applications/meet/src/app/contexts/MediaManagementProvider/useDeviceManagement/useActiveDeviceSync.ts
@@ -0,0 +1,34 @@
+import { useEffect } from 'react';
+
+import { useRoomContext } from '@livekit/components-react';
+import { RoomEvent } from 'livekit-client';
+
+import { useMeetDispatch } from '@proton/meet/store/hooks';
+import { setActiveDevice } from '@proton/meet/store/slices/deviceManagementSlice';
+
+/**
+ * Bridges LiveKit's active device state to the Redux store by subscribing to
+ * `RoomEvent.ActiveDeviceChanged`.
+ *
+ * The previous `useMediaDeviceSelect` + useEffect approach was unreliable: the
+ * effect intermittently didn't run on initial load, leaving the active deviceId
+ * unset in Redux.
+ */
+export const useActiveDeviceSync = () => {
+    const dispatch = useMeetDispatch();
+    const room = useRoomContext();
+
+    useEffect(() => {
+        const handleActiveDeviceChanged = (kind: MediaDeviceKind, deviceId: string) => {
+            // 'default' is not a real enumerated videoinput id
+            const normalizedDeviceId = kind === 'videoinput' && deviceId === 'default' ? '' : deviceId;
+            dispatch(setActiveDevice({ kind, deviceId: normalizedDeviceId }));
+        };
+
+        room.on(RoomEvent.ActiveDeviceChanged, handleActiveDeviceChanged);
+
+        return () => {
+            room.off(RoomEvent.ActiveDeviceChanged, handleActiveDeviceChanged);
+        };
+    }, [room, dispatch]);
+};
diff --git a/applications/meet/src/app/contexts/MediaManagementProvider/useDeviceManagement/useDeviceListSync.ts b/applications/meet/src/app/contexts/MediaManagementProvider/useDeviceManagement/useDeviceListSync.ts
@@ -2,9 +2,9 @@ import { useEffect, useRef } from 'react';
 
 import { useMeetStore } from '@proton/meet/store/hooks';
 import { setDeviceList } from '@proton/meet/store/slices/deviceManagementSlice';
+import type { DeviceKind } from '@proton/meet/store/slices/deviceManagementSlice/types';
 import { toSerializableDevice } from '@proton/meet/utils/deviceUtils';
 
-type DeviceKind = 'audioinput' | 'audiooutput' | 'videoinput';
 const KINDS: DeviceKind[] = ['audioinput', 'audiooutput', 'videoinput'];
 
 const RECHECK_DELAY_MS = 150;
diff --git a/applications/meet/src/app/contexts/MediaManagementProvider/useDeviceManagement/useDeviceManagement.ts b/applications/meet/src/app/contexts/MediaManagementProvider/useDeviceManagement/useDeviceManagement.ts
@@ -0,0 +1,29 @@
+import type { SwitchActiveDevice, ToggleAudioType, ToggleVideoType } from '../../../types';
+import { useActiveDeviceSync } from './useActiveDeviceSync';
+import { useDeviceListSync } from './useDeviceListSync';
+import { useDevicePermissionsSync } from './useDevicePermissionsSync';
+import { useDynamicDeviceHandling } from './useDynamicDeviceHandling';
+
+export const useDeviceManagement = ({
+    toggleAudio,
+    toggleVideo,
+    switchActiveDevice,
+}: {
+    toggleAudio: ToggleAudioType;
+    toggleVideo: ToggleVideoType;
+    switchActiveDevice: SwitchActiveDevice;
+}) => {
+    // Sync device list from browser to redux
+    useDeviceListSync();
+
+    // Sync active device from livekit to redux
+    useActiveDeviceSync();
+
+    // Handle dynamic device (unplugging, plugging, etc.)
+    useDynamicDeviceHandling({ toggleAudio, toggleVideo, switchActiveDevice });
+
+    // Sync device permissions from browser to redux
+    const { permissionsLoading } = useDevicePermissionsSync();
+
+    return { permissionsLoading };
+};
diff --git a/applications/meet/src/app/contexts/MediaManagementProvider/useDeviceManagement/useDevicePermissionsSync.ts b/applications/meet/src/app/contexts/MediaManagementProvider/useDeviceManagement/useDevicePermissionsSync.ts
@@ -16,7 +16,7 @@ import { isFirefox, isSafari } from '@proton/shared/lib/helpers/browser';
  * Permission requests are not triggered here — they are initiated by the user
  * via the DevicesNeededConfirmation modal.
  */
-export const useDevicePermissionChangeListener = () => {
+export const useDevicePermissionsSync = () => {
     const dispatch = useMeetDispatch();
     const [permissionsLoading, setPermissionsLoading] = useState(true);
 
diff --git a/applications/meet/src/app/contexts/MediaManagementProvider/useDeviceManagement/useDynamicDeviceHandling.ts b/applications/meet/src/app/contexts/MediaManagementProvider/useDeviceManagement/useDynamicDeviceHandling.ts
@@ -14,12 +14,13 @@ import {
     selectPreferredCameraId,
     selectSpeakerState,
 } from '@proton/meet/store/slices/deviceManagementSlice/selectors';
+import type { DeviceKind } from '@proton/meet/store/slices/deviceManagementSlice/types';
 import { filterDevices, getDefaultDevice, isDefaultDevice } from '@proton/meet/utils/deviceUtils';
 import isTruthy from '@proton/utils/isTruthy';
 
-import { useStableCallback } from '../../hooks/useStableCallback';
-import type { SwitchActiveDevice } from '../../types';
-import { supportsSetSinkId } from '../../utils/browser';
+import { useStableCallback } from '../../../hooks/useStableCallback';
+import type { SwitchActiveDevice, ToggleAudioType, ToggleVideoType } from '../../../types';
+import { supportsSetSinkId } from '../../../utils/browser';
 
 const dynamicDeviceUpdate = ({
     deviceList,
@@ -80,28 +81,8 @@ interface DeviceIdSets {
 }
 
 interface UseDynamicDeviceHandlingParams {
-    toggleVideo: ({
-        isEnabled,
-        videoDeviceId,
-        forceUpdate,
-        preserveCache,
-        updateUserIntent,
-    }: {
-        isEnabled?: boolean;
-        videoDeviceId?: string;
-        forceUpdate?: boolean;
-        preserveCache?: boolean;
-        updateUserIntent?: boolean;
-    }) => Promise<boolean | undefined>;
-    toggleAudio: ({
-        isEnabled,
-        audioDeviceId,
-        preserveCache,
-    }: {
-        isEnabled?: boolean;
-        audioDeviceId?: string;
-        preserveCache?: boolean;
-    }) => Promise<boolean | undefined>;
+    toggleVideo: ToggleVideoType;
+    toggleAudio: ToggleAudioType;
     switchActiveDevice: SwitchActiveDevice;
 }
 
@@ -110,13 +91,15 @@ export const useDynamicDeviceHandling = ({
     toggleVideo,
     switchActiveDevice,
 }: UseDynamicDeviceHandlingParams) => {
+    const room = useRoomContext();
+
     const activeMicrophoneDeviceId = useMeetSelector(selectActiveMicrophoneId);
     const activeAudioOutputDeviceId = useMeetSelector(selectActiveAudioOutputId);
     const activeCameraDeviceId = useMeetSelector(selectActiveCameraId);
+
     const preferredCameraId = useMeetSelector(selectPreferredCameraId);
     const microphoneState = useMeetSelector(selectMicrophoneState);
     const speakerState = useMeetSelector(selectSpeakerState);
-    const room = useRoomContext();
 
     const previousDevices = useRef<{
         microphones: MediaDeviceInfo[];
@@ -146,7 +129,7 @@ export const useDynamicDeviceHandling = ({
     }
 
     const handleDeviceChange = useStableCallback(async () => {
-        const getLocalDevicesWithErrorHandling = async (deviceType: 'audioinput' | 'videoinput' | 'audiooutput') => {
+        const getLocalDevicesWithErrorHandling = async (deviceType: DeviceKind) => {
             try {
                 return await Room.getLocalDevices(deviceType, false);
             } catch (error) {
@@ -253,7 +236,6 @@ export const useDynamicDeviceHandling = ({
 
                             void toggleVideo({
                                 videoDeviceId: newDeviceId,
-                                forceUpdate: true,
                                 preserveCache: true,
                                 updateUserIntent: false,
                             });
diff --git a/applications/meet/src/app/hooks/bridges/useDeviceData.ts b/applications/meet/src/app/hooks/bridges/useDeviceData.ts
diff --git a/applications/meet/src/app/hooks/usePictureInPicture/usePiPMediaSession.ts b/applications/meet/src/app/hooks/usePictureInPicture/usePiPMediaSession.ts
diff --git a/applications/meet/src/app/types.ts b/applications/meet/src/app/types.ts
