Persist device preference in localStorage

Author: arnaud-lebreton-rofim

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

@@ -226,6 +226,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, JSON.stringify(true));
+    setStorageItem(STORAGE_KEYS.VIDEO_SOURCE_ENABLED, JSON.stringify(true));
 
     // Set videoFilter based on user's selected background
     let videoFilter: VideoFilter | undefined;
@@ -280,6 +283,7 @@ const usePreviewPublisher = (): PreviewPublisherContextType => {
       return;
     }
     publisherRef.current.publishVideo(!isVideoEnabled);
+    setStorageItem(STORAGE_KEYS.VIDEO_SOURCE_ENABLED, JSON.stringify(!isVideoEnabled));
     setIsVideoEnabled(!isVideoEnabled);
     if (setUser) {
       setUser((prevUser: UserType) => ({
@@ -304,6 +308,7 @@ const usePreviewPublisher = (): PreviewPublisherContextType => {
     }
     publisherRef.current.publishAudio(!isAudioEnabled);
     setIsAudioEnabled(!isAudioEnabled);
+    setStorageItem(STORAGE_KEYS.AUDIO_SOURCE_ENABLED, JSON.stringify(!isAudioEnabled));
     if (setUser) {
       setUser((prevUser: UserType) => ({
         ...prevUser,

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

@@ -15,6 +15,7 @@ import getAccessDeniedError, {
   PublishingErrorType,
 } from '../../../utils/getAccessDeniedError/getAccessDeniedError';
 import applyBackgroundFilter from '../../../utils/backgroundFilter/applyBackgroundFilter/applyBackgroundFilter';
+import { setStorageItem, STORAGE_KEYS } from '../../../utils/storage';
 
 type PublisherStreamCreatedEvent = Event<'streamCreated', Publisher> & {
   stream: Stream;
@@ -285,6 +286,7 @@ const usePublisher = (): PublisherContextType => {
     }
     publisherRef.current.publishVideo(!isVideoEnabled);
     setIsVideoEnabled(!isVideoEnabled);
+    setStorageItem(STORAGE_KEYS.VIDEO_SOURCE_ENABLED, JSON.stringify(!isVideoEnabled));
   };
 
   /**
@@ -299,6 +301,7 @@ const usePublisher = (): PublisherContextType => {
     }
     publisherRef.current.publishAudio(!isAudioEnabled);
     setIsAudioEnabled(!isAudioEnabled);
+    setStorageItem(STORAGE_KEYS.AUDIO_SOURCE_ENABLED, JSON.stringify(!isAudioEnabled));
     setIsForceMuted(false);
   };
 

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

@@ -140,4 +140,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

@@ -8,6 +8,7 @@ import {
 import useUserContext from '../../../hooks/useUserContext';
 import getInitials from '../../../utils/getInitials';
 import DeviceStore from '../../../utils/DeviceStore';
+import { getStorageItem, STORAGE_KEYS } from '../../../utils/storage';
 
 /**
  * React hook to get PublisherProperties combining default options and options set in UserContext
@@ -53,8 +54,10 @@ const usePublisherOptions = (): PublisherProperties | null => {
         initials,
         insertDefaultUI: false,
         name,
-        publishAudio: !!publishAudio,
-        publishVideo: !!publishVideo,
+        publishAudio:
+          !!publishAudio && getStorageItem(STORAGE_KEYS.AUDIO_SOURCE_ENABLED) !== 'false',
+        publishVideo:
+          !!publishVideo && getStorageItem(STORAGE_KEYS.VIDEO_SOURCE_ENABLED) !== 'false',
         resolution: '1280x720',
         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',