VIDSOL-143: Implement configuration file, VIDSOL-195: Resolve camera LED bug turning on when not publishing video

config.example.json

@@ -0,0 +1,26 @@
+{
+  "videoSettings": {
+    "allowBackgroundEffects": true,
+    "allowCameraControl": true,
+    "allowVideoOnJoin": true,
+    "defaultResolution": "1280x720"
+  },
+  "audioSettings": {
+    "allowAdvancedNoiseSuppression": true,
+    "allowAudioOnJoin": true,
+    "allowMicrophoneControl": true
+  },
+  "waitingRoomSettings": {
+    "allowDeviceSelection": true
+  },
+  "meetingRoomSettings": {
+    "allowArchiving": true,
+    "allowCaptions": true,
+    "allowChat": true,
+    "allowDeviceSelection": true,
+    "allowEmojis": true,
+    "allowScreenShare": true,
+    "defaultLayoutMode": "active-speaker",
+    "showParticipantList": true
+  }
+}

frontend/src/App.spec.tsx

@@ -1,6 +1,6 @@
 import { render, screen } from '@testing-library/react';
 import { describe, it, expect, vi, afterEach } from 'vitest';
-import React from 'react';
+import { PropsWithChildren } from 'react';
 import App from './App';
 
 // Mock the page components to make text assertions easy
@@ -13,22 +13,27 @@ vi.mock('./pages/UnsupportedBrowserPage', () => ({
 // Mock context providers and wrappers
 vi.mock('./Context/PreviewPublisherProvider', () => ({
   __esModule: true,
-  PreviewPublisherProvider: ({ children }: React.PropsWithChildren) => children,
-  default: ({ children }: React.PropsWithChildren) => children,
+  PreviewPublisherProvider: ({ children }: PropsWithChildren) => children,
+  default: ({ children }: PropsWithChildren) => children,
 }));
 vi.mock('./Context/PublisherProvider', () => ({
   __esModule: true,
-  PublisherProvider: ({ children }: React.PropsWithChildren) => children,
-  default: ({ children }: React.PropsWithChildren) => children,
+  PublisherProvider: ({ children }: PropsWithChildren) => children,
+  default: ({ children }: PropsWithChildren) => children,
 }));
 vi.mock('./Context/SessionProvider/session', () => ({
-  default: ({ children }: React.PropsWithChildren) => children,
+  default: ({ children }: PropsWithChildren) => children,
 }));
 vi.mock('./components/RedirectToWaitingRoom', () => ({
-  default: ({ children }: React.PropsWithChildren) => children,
+  default: ({ children }: PropsWithChildren) => children,
 }));
 vi.mock('./Context/RoomContext', () => ({
-  default: ({ children }: React.PropsWithChildren) => children,
+  default: ({ children }: PropsWithChildren) => children,
+}));
+vi.mock('./Context/ConfigProvider', () => ({
+  __esModule: true,
+  ConfigContextProvider: ({ children }: PropsWithChildren) => children,
+  default: ({ children }: PropsWithChildren) => children,
 }));
 
 afterEach(() => {

frontend/src/App.tsx

@@ -11,7 +11,6 @@ import { PublisherProvider } from './Context/PublisherProvider';
 import RedirectToWaitingRoom from './components/RedirectToWaitingRoom';
 import UnsupportedBrowserPage from './pages/UnsupportedBrowserPage';
 import RoomContext from './Context/RoomContext';
-import { BackgroundPublisherProvider } from './Context/BackgroundPublisherProvider';
 
 const App = () => {
   return (
@@ -21,11 +20,9 @@ const App = () => {
           <Route
             path="/waiting-room/:roomName"
             element={
-              <BackgroundPublisherProvider>
-                <PreviewPublisherProvider>
-                  <WaitingRoom />
-                </PreviewPublisherProvider>
-              </BackgroundPublisherProvider>
+              <PreviewPublisherProvider>
+                <WaitingRoom />
+              </PreviewPublisherProvider>
             }
           />
           <Route
@@ -34,9 +31,7 @@ const App = () => {
               <SessionProvider>
                 <RedirectToWaitingRoom>
                   <PublisherProvider>
-                    <BackgroundPublisherProvider>
-                      <Room />
-                    </BackgroundPublisherProvider>
+                    <Room />
                   </PublisherProvider>
                 </RedirectToWaitingRoom>
               </SessionProvider>

frontend/src/Context/BackgroundPublisherProvider/useBackgroundPublisher/useBackgroundPublisher.spec.tsx

@@ -1,6 +1,11 @@
 import { act, cleanup, renderHook } from '@testing-library/react';
 import { afterAll, afterEach, beforeEach, describe, expect, it, Mock, vi } from 'vitest';
-import { hasMediaProcessorSupport, initPublisher, Publisher } from '@vonage/client-sdk-video';
+import {
+  hasMediaProcessorSupport,
+  initPublisher,
+  Publisher,
+  PublisherProperties,
+} from '@vonage/client-sdk-video';
 import EventEmitter from 'events';
 import useBackgroundPublisher from './useBackgroundPublisher';
 import { UserContextType } from '../../user';
@@ -14,17 +19,20 @@ import {
   defaultVideoDevice,
 } from '../../../utils/mockData/device';
 import { DEVICE_ACCESS_STATUS } from '../../../utils/constants';
+import usePublisherOptions from '../../PublisherProvider/usePublisherOptions';
 
 vi.mock('@vonage/client-sdk-video');
 vi.mock('../../../hooks/useUserContext.tsx');
 vi.mock('../../../hooks/usePermissions.tsx');
 vi.mock('../../../hooks/useDevices.tsx');
+vi.mock('../../PublisherProvider/usePublisherOptions');
 const mockUseUserContext = useUserContext as Mock<[], UserContextType>;
 const mockUsePermissions = usePermissions as Mock<[], PermissionsHookType>;
 const mockUseDevices = useDevices as Mock<
   [],
   { allMediaDevices: AllMediaDevices; getAllMediaDevices: () => void }
 >;
+const mockUsePublisherOptions = usePublisherOptions as Mock<[], PublisherProperties>;
 
 const defaultSettings = {
   publishAudio: false,
@@ -66,6 +74,9 @@ describe('useBackgroundPublisher', () => {
       accessStatus: DEVICE_ACCESS_STATUS.PENDING,
       setAccessStatus: mockSetAccessStatus,
     });
+    mockUsePublisherOptions.mockReturnValue({
+      publishVideo: true,
+    });
   });
 
   afterEach(() => {

frontend/src/Context/BackgroundPublisherProvider/useBackgroundPublisher/useBackgroundPublisher.tsx

@@ -60,14 +60,14 @@ const useBackgroundPublisher = (): BackgroundPublisherContextType => {
   >();
   const { setAccessStatus, accessStatus } = usePermissions();
   const backgroundPublisherRef = useRef<Publisher | null>(null);
-  const [isPublishing, setIsPublishing] = useState(false);
+  const [isPublishing, setIsPublishing] = useState<boolean>(false);
   const initialBackgroundRef = useRef<VideoFilter | undefined>(
     user.defaultSettings.backgroundFilter
   );
   const [backgroundFilter, setBackgroundFilter] = useState<VideoFilter | undefined>(
     user.defaultSettings.backgroundFilter
   );
-  const [isVideoEnabled, setIsVideoEnabled] = useState(true);
+  const [isVideoEnabled, setIsVideoEnabled] = useState<boolean>(true);
   const [localVideoSource, setLocalVideoSource] = useState<string | undefined>(undefined);
   const deviceStoreRef = useRef<DeviceStore>(new DeviceStore());
 
@@ -180,6 +180,8 @@ const useBackgroundPublisher = (): BackgroundPublisherContextType => {
       videoFilter,
       resolution: '1280x720',
       videoSource,
+      publishAudio: false,
+      publishVideo: isVideoEnabled,
     };
 
     backgroundPublisherRef.current = initPublisher(undefined, publisherOptions, (err: unknown) => {
@@ -191,7 +193,7 @@ const useBackgroundPublisher = (): BackgroundPublisherContextType => {
       }
     });
     addPublisherListeners(backgroundPublisherRef.current);
-  }, [addPublisherListeners]);
+  }, [addPublisherListeners, isVideoEnabled]);
 
   /**
    * Destroys the background publisher

frontend/src/Context/ConfigProvider/index.tsx

@@ -0,0 +1,33 @@
+import { createContext, ReactNode, useMemo } from 'react';
+import useConfig, { defaultConfig } from './useConfig';
+
+export type ConfigProviderProps = {
+  children: ReactNode;
+};
+
+export type ConfigContextType = ReturnType<typeof useConfig>;
+
+export const ConfigContext = createContext<ConfigContextType>({
+  audioSettings: defaultConfig.audioSettings,
+  meetingRoomSettings: defaultConfig.meetingRoomSettings,
+  waitingRoomSettings: defaultConfig.waitingRoomSettings,
+  videoSettings: defaultConfig.videoSettings,
+});
+
+/**
+ * ConfigProvider - React Context Provider for ConfigContext
+ * ConfigContext contains all application configuration including video settings, audio settings,
+ * waiting room settings, and meeting room settings loaded from config.json.
+ * We use Context to make the configuration available in many components across the app without
+ * prop drilling: https://react.dev/learn/passing-data-deeply-with-context#use-cases-for-context
+ * See useConfig.tsx for configuration structure and loading logic
+ * @param {ConfigProviderProps} props - The provider properties
+ *  @property {ReactNode} children - The content to be rendered
+ * @returns {ConfigContext} a context provider for application configuration
+ */
+export const ConfigProvider = ({ children }: ConfigProviderProps) => {
+  const config = useConfig();
+  const value = useMemo(() => config, [config]);
+
+  return <ConfigContext.Provider value={value}>{children}</ConfigContext.Provider>;
+};

frontend/src/Context/ConfigProvider/useConfig/index.tsx

@@ -0,0 +1,4 @@
+import useConfig, { defaultConfig } from './useConfig';
+
+export { defaultConfig };
+export default useConfig;

frontend/src/Context/ConfigProvider/useConfig/useConfig.spec.tsx

@@ -0,0 +1,131 @@
+import { afterAll, afterEach, beforeAll, beforeEach, describe, expect, it, vi } from 'vitest';
+import { renderHook, waitFor } from '@testing-library/react';
+import useConfig, { AppConfig } from './useConfig';
+
+describe('useConfig', () => {
+  let nativeFetch: typeof global.fetch;
+  const defaultConfig: AppConfig = {
+    videoSettings: {
+      allowCameraControl: true,
+      defaultResolution: '1280x720',
+      allowVideoOnJoin: true,
+      allowBackgroundEffects: true,
+    },
+    audioSettings: {
+      allowAdvancedNoiseSuppression: true,
+      allowAudioOnJoin: true,
+      allowMicrophoneControl: true,
+    },
+    waitingRoomSettings: {
+      allowDeviceSelection: true,
+    },
+    meetingRoomSettings: {
+      allowArchiving: true,
+      allowCaptions: true,
+      allowChat: true,
+      allowDeviceSelection: true,
+      allowEmojis: true,
+      allowScreenShare: true,
+      defaultLayoutMode: 'active-speaker',
+      showParticipantList: true,
+    },
+  };
+  const consoleErrorSpy = vi.spyOn(console, 'error');
+  const consoleInfoSpy = vi.spyOn(console, 'info');
+
+  beforeAll(() => {
+    nativeFetch = global.fetch;
+  });
+
+  beforeEach(() => {
+    global.fetch = vi.fn().mockResolvedValue({
+      json: async () => ({}),
+    });
+  });
+
+  afterEach(() => {
+    vi.resetAllMocks();
+  });
+
+  afterAll(() => {
+    global.fetch = nativeFetch;
+  });
+
+  it('returns the default config when no config.json is loaded', async () => {
+    const { result } = renderHook(() => useConfig());
+
+    await waitFor(() => {
+      expect(result.current).toEqual(defaultConfig);
+    });
+  });
+
+  it('merges config.json values if loaded (mocked fetch)', async () => {
+    // All values in this config should override the defaultConfig
+    const mockConfig: AppConfig = {
+      videoSettings: {
+        allowCameraControl: false,
+        defaultResolution: '640x480',
+        allowVideoOnJoin: false,
+        allowBackgroundEffects: false,
+      },
+      audioSettings: {
+        allowAdvancedNoiseSuppression: false,
+        allowAudioOnJoin: false,
+        allowMicrophoneControl: false,
+      },
+      waitingRoomSettings: {
+        allowDeviceSelection: false,
+      },
+      meetingRoomSettings: {
+        allowArchiving: false,
+        allowCaptions: false,
+        allowChat: false,
+        allowDeviceSelection: false,
+        allowEmojis: false,
+        allowScreenShare: false,
+        defaultLayoutMode: 'grid',
+        showParticipantList: false,
+      },
+    };
+    global.fetch = vi.fn().mockResolvedValue({
+      json: async () => mockConfig,
+      headers: {
+        get: () => 'application/json',
+      },
+    });
+    const { result } = renderHook(() => useConfig());
+
+    await waitFor(() => {
+      expect(result.current).toMatchObject(mockConfig);
+    });
+  });
+
+  it('falls back to defaultConfig if fetch fails', async () => {
+    const mockFetchError = new Error('mocking a failure to fetch');
+    global.fetch = vi.fn().mockRejectedValue(mockFetchError);
+    const { result } = renderHook(() => useConfig());
+
+    await waitFor(() => {
+      expect(result.current).toEqual(defaultConfig);
+    });
+    expect(consoleErrorSpy).toHaveBeenCalledWith('Error loading config:', expect.any(Error));
+  });
+
+  it('falls back to defaultConfig if no config.json is found', async () => {
+    global.fetch = vi.fn().mockResolvedValue({
+      ok: false,
+      status: 404,
+      statusText: 'Not Found',
+      headers: {
+        get: () => 'text/html',
+      },
+    });
+    const { result } = renderHook(() => useConfig());
+
+    await waitFor(() => {
+      expect(result.current).toEqual(defaultConfig);
+    });
+    expect(consoleInfoSpy).toHaveBeenCalledWith('No valid JSON found, using default config');
+    expect(consoleErrorSpy).not.toHaveBeenCalled();
+  });
+});