Persist device preference in localStorage

Author: arnaud-lebreton-rofim

frontend/src/Context/PreviewPublisherProvider/usePreviewPublisher/usePreviewPublisher.tsx

@@ -229,6 +229,9 @@ const usePreviewPublisher = (): PreviewPublisherContextType => {
     if (publisherRef.current) {
       return;
     }
+    // We reset user preferences as we want to start with both devices enabled
+    setStorageItem(STORAGE_KEYS.AUDIO_SOURCE_ENABLED, 'true');
+    setStorageItem(STORAGE_KEYS.VIDEO_SOURCE_ENABLED, 'true');
 
     // Set videoFilter based on user's selected background
     let videoFilter: VideoFilter | undefined;
@@ -283,6 +286,7 @@ const usePreviewPublisher = (): PreviewPublisherContextType => {
       return;
     }
     publisherRef.current.publishVideo(!isVideoEnabled);
+    setStorageItem(STORAGE_KEYS.VIDEO_SOURCE_ENABLED, isVideoEnabled ? 'true' : 'false');
     setIsVideoEnabled(!isVideoEnabled);
     if (setUser) {
       setUser((prevUser: UserType) => ({
@@ -307,6 +311,7 @@ const usePreviewPublisher = (): PreviewPublisherContextType => {
     }
     publisherRef.current.publishAudio(!isAudioEnabled);
     setIsAudioEnabled(!isAudioEnabled);
+    setStorageItem(STORAGE_KEYS.AUDIO_SOURCE_ENABLED, isAudioEnabled ? 'true' : 'false');
     if (setUser) {
       setUser((prevUser: UserType) => ({
         ...prevUser,

frontend/src/Context/PublisherProvider/usePublisher/usePublisher.tsx

@@ -12,6 +12,7 @@ import usePublisherQuality, { NetworkQuality } from '../usePublisherQuality/useP
 import usePublisherOptions from '../usePublisherOptions';
 import useSessionContext from '../../../hooks/useSessionContext';
 import applyBackgroundFilter from '../../../utils/backgroundFilter/applyBackgroundFilter/applyBackgroundFilter';
+import { setStorageItem, STORAGE_KEYS } from '../../../utils/storage';
 
 type PublisherStreamCreatedEvent = Event<'streamCreated', Publisher> & {
   stream: Stream;
@@ -291,6 +292,7 @@ const usePublisher = (): PublisherContextType => {
     }
     publisherRef.current.publishVideo(!isVideoEnabled);
     setIsVideoEnabled(!isVideoEnabled);
+    setStorageItem(STORAGE_KEYS.VIDEO_SOURCE_ENABLED, isVideoEnabled ? 'true' : 'false');
   };
 
   /**
@@ -305,6 +307,7 @@ const usePublisher = (): PublisherContextType => {
     }
     publisherRef.current.publishAudio(!isAudioEnabled);
     setIsAudioEnabled(!isAudioEnabled);
+    setStorageItem(STORAGE_KEYS.AUDIO_SOURCE_ENABLED, isAudioEnabled ? 'true' : 'false');
     setIsForceMuted(false);
   };
 

frontend/src/Context/PublisherProvider/usePublisherOptions/usePublisherOptions.spec.tsx

@@ -182,4 +182,18 @@ describe('usePublisherOptions', () => {
       });
     });
   });
+
+  it('should disable audio and video from storage options', async () => {
+    vi.spyOn(OT, 'hasMediaProcessorSupport').mockReturnValue(true);
+    setStorageItem(STORAGE_KEYS.AUDIO_SOURCE_ENABLED, 'false');
+    setStorageItem(STORAGE_KEYS.VIDEO_SOURCE_ENABLED, 'true');
+
+    await deviceStore.init();
+    mockUseUserContext.mockImplementation(() => mockUserContextWithCustomSettings);
+    const { result } = renderHook(() => usePublisherOptions());
+    await waitFor(() => {
+      expect(result.current?.publishAudio).toBe(false);
+      expect(result.current?.publishVideo).toBe(true);
+    });
+  });
 });

frontend/src/Context/PublisherProvider/usePublisherOptions/usePublisherOptions.tsx

@@ -9,6 +9,7 @@ import useUserContext from '../../../hooks/useUserContext';
 import getInitials from '../../../utils/getInitials';
 import DeviceStore from '../../../utils/DeviceStore';
 import useConfigContext from '../../../hooks/useConfigContext';
+import { getStorageItem, STORAGE_KEYS } from '../../../utils/storage';
 
 /**
  * React hook to get PublisherProperties combining default options and options set in UserContext
@@ -51,14 +52,17 @@ const usePublisherOptions = (): PublisherProperties | null => {
       const videoFilter: VideoFilter | undefined =
         backgroundFilter && hasMediaProcessorSupport() ? backgroundFilter : undefined;
 
+      const isAudioEnabled = getStorageItem(STORAGE_KEYS.AUDIO_SOURCE_ENABLED) === 'true';
+      const isVideoEnabled = getStorageItem(STORAGE_KEYS.VIDEO_SOURCE_ENABLED) === 'true';
+
       setPublisherOptions({
         audioFallback: { publisher: true },
         audioSource,
         initials,
         insertDefaultUI: false,
         name,
-        publishAudio: allowAudioOnJoin && publishAudio,
-        publishVideo: allowVideoOnJoin && publishVideo,
+        publishAudio: allowAudioOnJoin && publishAudio && isAudioEnabled,
+        publishVideo: allowVideoOnJoin && publishVideo && isVideoEnabled,
         resolution: defaultResolution,
         audioFilter,
         videoFilter,

frontend/src/utils/storage.ts

@@ -1,6 +1,8 @@
 export const STORAGE_KEYS = {
   AUDIO_SOURCE: 'audioSource',
+  AUDIO_SOURCE_ENABLED: 'audioSourceEnabled',
   VIDEO_SOURCE: 'videoSource',
+  VIDEO_SOURCE_ENABLED: 'videoSourceEnabled',
   NOISE_SUPPRESSION: 'noiseSuppression',
   BACKGROUND_REPLACEMENT: 'backgroundReplacement',
   USERNAME: 'username',