allow owner of the call to change the class state

custom/fitness-demo/components/App/App.js

@@ -7,6 +7,7 @@ import PropTypes from 'prop-types';
 import { ChatProvider } from '../../contexts/ChatProvider';
 import { LiveStreamingProvider } from '../../contexts/LiveStreamingProvider';
 import { RecordingProvider } from '../../contexts/RecordingProvider';
+import { ViewProvider } from '../../contexts/ViewProvider';
 import Room from '../Call/Room';
 import { Asides } from './Asides';
 import { Modals } from './Modals';
@@ -27,23 +28,25 @@ export const App = ({ customComponentForState }) => {
         <ChatProvider>
           <RecordingProvider>
             <LiveStreamingProvider>
-              {roomExp && <ExpiryTimer expiry={roomExp} />}
+              <ViewProvider>
-              <div className="app">
+                {roomExp && <ExpiryTimer expiry={roomExp} />}
-                {componentForState()}
+                <div className="app">
-                <Modals />
+                  {componentForState()}
-                <Asides />
+                  <Modals />
-                <style jsx>{`
+                  <Asides />
-                  color: white;
+                  <style jsx>{`
-                  height: 100vh;
+                    color: white;
-                  display: flex;
+                    height: 100vh;
-                  align-items: center;
+                    display: flex;
-                  justify-content: center;
+                    align-items: center;
+                    justify-content: center;
         
-                  .loader {
+                    .loader {
-                    margin: 0 auto;
+                      margin: 0 auto;
-                  }
+                    }
-                `}</style>
+                  `}</style>
-              </div>
+                </div>
+              </ViewProvider>
             </LiveStreamingProvider>
           </RecordingProvider>
         </ChatProvider>

custom/fitness-demo/components/Call/ChatAside.js

@@ -26,7 +26,7 @@ export const ChatAside = () => {
     if (showAside === CHAT_ASIDE) {
       setHasNewMessages(false);
     }
-  }, [showAside, chatHistory.length, setHasNewMessages]);
+  }, [showAside, chatHistory?.length, setHasNewMessages]);
 
   useEffect(() => {
     if (hasNewMessages && showAside !== CHAT_ASIDE) {
@@ -49,7 +49,7 @@ export const ChatAside = () => {
   return (
     <Aside onClose={() => setShowAside(false)}>
       <div className="messages-container" ref={chatWindowRef}>
-        {chatHistory.map((chatItem) => (
+        {chatHistory?.map((chatItem) => (
           <div
             className={isLocalUser(chatItem.senderID) ? 'message local' : 'message'}
             key={chatItem.id}

custom/fitness-demo/components/Tray/View.js

@@ -2,26 +2,27 @@ import React from 'react';
 
 import { TrayButton } from '@custom/shared/components/Tray';
 import { useParticipants } from '@custom/shared/contexts/ParticipantsProvider';
-import { useUIState, VIEW_MODE_GRID, VIEW_MODE_SPEAKER } from '@custom/shared/contexts/UIStateProvider';
+import { VIEW_MODE_GRID, VIEW_MODE_SPEAKER } from '@custom/shared/contexts/UIStateProvider';
 import { ReactComponent as IconGridView } from '@custom/shared/icons/grid-md.svg';
 import { ReactComponent as IconSpeakerView } from '@custom/shared/icons/speaker-view-md.svg';
+import { useView } from '../../contexts/ViewProvider';
 
 export const ViewTray = () => {
   const { participants, localParticipant } = useParticipants();
-  const { viewMode, setPreferredViewMode } = useUIState();
+  const { view, setView } = useView();
 
   const onViewClick = () =>
-    setPreferredViewMode(viewMode === VIEW_MODE_SPEAKER ? VIEW_MODE_GRID : VIEW_MODE_SPEAKER);
+    setView(view === VIEW_MODE_SPEAKER ? VIEW_MODE_GRID : VIEW_MODE_SPEAKER);
 
   if (!localParticipant.isOwner) return null;
 
   return (
     <TrayButton
-      label={viewMode === VIEW_MODE_GRID ? 'Speaker': 'Grid'}
+      label={view === VIEW_MODE_GRID ? 'Speaker': 'Grid'}
       disabled={participants.length < 2}
       onClick={onViewClick}
     >
-      {viewMode === VIEW_MODE_SPEAKER ? <IconGridView />: <IconSpeakerView />}
+      {view === VIEW_MODE_SPEAKER ? <IconGridView />: <IconSpeakerView />}
     </TrayButton>
   );
 };

custom/fitness-demo/contexts/ViewProvider.js

@@ -0,0 +1,40 @@
+import React, {
+  createContext,
+  useContext,
+  useCallback,
+  useMemo,
+  useEffect,
+} from 'react';
+import { useUIState } from '@custom/shared/contexts/UIStateProvider';
+import { useSharedState } from '@custom/shared/hooks/useSharedState';
+import PropTypes from 'prop-types';
+
+export const ViewContext = createContext();
+
+export const ViewProvider = ({ children }) => {
+  const { viewMode, setPreferredViewMode } = useUIState();
+
+  const { sharedState, setSharedState } = useSharedState({
+    initialValues: { viewMode },
+  });
+
+  const view = useMemo(() => sharedState.viewMode, [sharedState.viewMode]);
+  const setView = useCallback((view) => setSharedState({ viewMode: view }), [setSharedState]);
+
+  useEffect(() => {
+    if (viewMode === sharedState.viewMode) return;
+    setPreferredViewMode(sharedState.viewMode);
+  }, [setPreferredViewMode, sharedState.viewMode, viewMode]);
+
+  return (
+    <ViewContext.Provider value={{ view, setView }}>
+      {children}
+    </ViewContext.Provider>
+  );
+};
+
+ViewProvider.propTypes = {
+  children: PropTypes.node,
+};
+
+export const useView = () => useContext(ViewContext);