fix: respect call type settings when applying persisted device preferеnces (#1879)

Before applying local preferences, we now check whether the appropriate
device kind is enabled on the call type level.
This is especially important for customers using default and audio-only
call types in the same app.

Although preferences can be kept under a different key depending on the
call type, it is good to handle this in the hook itself, too.

Author: oliverlaz

packages/react-sdk/src/hooks/usePersistedDevicePreferences.ts

@@ -75,10 +75,11 @@ export const usePersistedDevicePreferences = (
       setApplyingState('applying');
 
       (async () => {
-        for (const [deviceKey, state, defaultMuted] of [
-          ['microphone', microphoneState, !settings.audio.mic_default_on],
-          ['camera', cameraState, !settings.video.camera_default_on],
-          ['speaker', speakerState, false],
+        const { audio, video } = settings;
+        for (const [deviceKey, state, defaultMuted, enabledInCallType] of [
+          ['microphone', microphoneState, !audio.mic_default_on, true],
+          ['camera', cameraState, !video.camera_default_on, video.enabled],
+          ['speaker', speakerState, false, true],
         ] as const) {
           const preferences = parseLocalDevicePreferences(key);
           const preference = preferences[deviceKey];
@@ -91,8 +92,9 @@ export const usePersistedDevicePreferences = (
                 manager,
                 [preference].flat(),
                 state.devices,
+                enabledInCallType,
               )
-            : applyMutedState(manager, defaultMuted);
+            : applyMutedState(manager, defaultMuted, enabledInCallType);
 
           await applyPromise.catch((err) => {
             console.warn(
@@ -327,6 +329,7 @@ const applyLocalDevicePreference = async (
   manager: DeviceManagerLike,
   preference: LocalDevicePreference[],
   devices: MediaDeviceInfo[],
+  enabledInCallType: boolean,
 ): Promise<void> => {
   let muted: boolean | undefined;
 
@@ -352,12 +355,16 @@ const applyLocalDevicePreference = async (
   }
 
   if (typeof muted === 'boolean') {
-    await applyMutedState(manager, muted);
+    await applyMutedState(manager, muted, enabledInCallType);
   }
 };
 
-const applyMutedState = async (manager: DeviceManagerLike, muted: boolean) => {
-  if (!manager.state.status) {
+const applyMutedState = async (
+  manager: DeviceManagerLike,
+  muted: boolean,
+  enabledInCallType: boolean,
+) => {
+  if (enabledInCallType && !manager.state.status) {
     await manager[muted ? 'disable' : 'enable']?.();
   }
 };

sample-apps/react/react-dogfood/components/Lobby.tsx

@@ -53,12 +53,14 @@ export const Lobby = ({ onJoin, mode = 'regular' }: LobbyProps) => {
     useCallSession,
     useCallMembers,
     useCallCustomData,
+    useCallSettings,
   } = useCallStateHooks();
   const { hasBrowserPermission: hasMicPermission } = useMicrophoneState();
   const { hasBrowserPermission: hasCameraPermission, isMute: isCameraMute } =
     useCameraState();
   const callSession = useCallSession();
   const members = useCallMembers();
+  const settings = useCallSettings();
   const currentUser = useConnectedUser();
   const isProntoEnvironment = useIsProntoEnvironment();
   const isDemoEnvironment = useIsDemoEnvironment();
@@ -154,13 +156,15 @@ export const Lobby = ({ onJoin, mode = 'regular' }: LobbyProps) => {
                     />
                     <div className="rd__lobby-media-toggle">
                       <ToggleAudioPreviewButton Menu={null} />
-                      <ToggleVideoPreviewButton Menu={null} />
+                      {settings?.video.enabled && (
+                        <ToggleVideoPreviewButton Menu={null} />
+                      )}
                     </div>
                   </div>
                   <div className="rd__lobby-controls">
                     <div className="rd__lobby-media">
                       <ToggleMicButton />
-                      <ToggleCameraButton />
+                      {settings?.video.enabled && <ToggleCameraButton />}
                     </div>
 
                     <div className="rd__lobby-settings">