VIDSOL-105: Background Replacement Support for Web VERA (#190)

Author: OscarFava

frontend/public/background/bookshelf-room.jpg

@@ -11,6 +11,7 @@ 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 (
@@ -20,9 +21,11 @@ const App = () => {
           <Route
             path="/waiting-room/:roomName"
             element={
-              <PreviewPublisherProvider>
-                <WaitingRoom />
-              </PreviewPublisherProvider>
+              <BackgroundPublisherProvider>
+                <PreviewPublisherProvider>
+                  <WaitingRoom />
+                </PreviewPublisherProvider>
+              </BackgroundPublisherProvider>
             }
           />
           <Route
@@ -31,7 +34,9 @@ const App = () => {
               <SessionProvider>
                 <RedirectToWaitingRoom>
                   <PublisherProvider>
-                    <Room />
+                    <BackgroundPublisherProvider>
+                      <Room />
+                    </BackgroundPublisherProvider>
                   </PublisherProvider>
                 </RedirectToWaitingRoom>
               </SessionProvider>

frontend/public/background/busy-room.jpg

@@ -0,0 +1,31 @@
+import { ReactElement, ReactNode, createContext, useMemo } from 'react';
+import useBackgroundPublisher from './useBackgroundPublisher';
+
+export type BackgroundPublisherContextType = ReturnType<typeof useBackgroundPublisher>;
+export const BackgroundPublisherContext = createContext({} as BackgroundPublisherContextType);
+
+export type BackgroundPublisherProviderProps = {
+  children: ReactNode;
+};
+
+/**
+ * BackgroundPublisherProvider - React Context Provider for BackgroundPublisherContext
+ * BackgroundPublisherContextType contains all state and methods for local video publisher
+ * See useBackgroundPublisher.tsx for methods and state
+ * @param {BackgroundPublisherProviderProps} props - Background publisher provider properties
+ *  @property {ReactNode} children - The content to be rendered
+ * @returns {BackgroundPublisherContext} a context provider for a publisher Background
+ */
+export const BackgroundPublisherProvider = ({
+  children,
+}: {
+  children: ReactNode;
+}): ReactElement => {
+  const backgroundPublisherContext = useBackgroundPublisher();
+  const value = useMemo(() => backgroundPublisherContext, [backgroundPublisherContext]);
+  return (
+    <BackgroundPublisherContext.Provider value={value}>
+      {children}
+    </BackgroundPublisherContext.Provider>
+  );
+};