added view mode to UIState

dailyjs/live-fitness/components/App/App.js

@@ -5,6 +5,7 @@ import FlyingEmojiOverlay from '@dailyjs/flying-emojis/components/FlyingEmojis';
 import { LiveStreamingProvider } from '@dailyjs/live-streaming/contexts/LiveStreamingProvider';
 import { RecordingProvider } from '@dailyjs/recording/contexts/RecordingProvider';
 import { ChatProvider } from '@dailyjs/text-chat/contexts/ChatProvider';
+import { ClassStateProvider } from '../../context/ClassStateProvider';
 import Room from '../Room';
 
 /**
@@ -15,12 +16,14 @@ export const LiveFitnessApp = () => (
   <ChatProvider>
     <LiveStreamingProvider>
       <RecordingProvider>
-        <FlyingEmojiOverlay />
-        <App
-          customComponentForState={{
-            room: () => <Room />,
-          }}
-        />
+        <ClassStateProvider>
+          <FlyingEmojiOverlay />
+          <App
+            customComponentForState={{
+              room: () => <Room />,
+            }}
+          />
+        </ClassStateProvider>
       </RecordingProvider>
     </LiveStreamingProvider>
   </ChatProvider>

dailyjs/live-fitness/context/ClassStateProvider.js

@@ -0,0 +1,37 @@
+import React, { createContext, useContext, useEffect, useState } from 'react';
+
+import { useParticipants } from '@dailyjs/shared/contexts/ParticipantsProvider';
+import PropTypes from 'prop-types';
+
+export const CLASS_STATE_PRE_LOBBY = 'pre-lobby';
+export const CLASS_STATE_IN_SESSION = 'in_session';
+export const CLASS_STATE_POST_LOBBY = 'post-lobby';
+
+const ClassStateContext = createContext();
+
+export const ClassStateProvider = ({ children }) => {
+  const [classState, setClassState] = useState(CLASS_STATE_PRE_LOBBY);
+
+  const { isOwner } = useParticipants();
+
+  useEffect(() => {
+    console.log('🧘 Class provider initialised');
+  }, []);
+
+  return (
+    <ClassStateContext.Provider
+      value={{
+        classState,
+        setClassState,
+      }}
+    >
+      {children}
+    </ClassStateContext.Provider>
+  );
+};
+
+ClassStateProvider.propTypes = {
+  children: PropTypes.node,
+};
+
+export const useClassState = () => useContext(ClassStateContext);

dailyjs/shared/contexts/UIStateProvider.js

@@ -1,15 +1,28 @@
-import React, { useCallback, createContext, useContext, useState } from 'react';
+import React, {
+  useCallback,
+  createContext,
+  useContext,
+  useState,
+  useEffect,
+} from 'react';
 import PropTypes from 'prop-types';
 import { useDeepCompareMemo } from 'use-deep-compare';
 
 export const UIStateContext = createContext();
 
+export const VIEW_MODE_GRID = 'grid';
+export const VIEW_MODE_SPEAKER = 'speaker';
+export const VIEW_MODE_MOBILE = 'mobile';
+
 export const UIStateProvider = ({
   asides = [],
   modals = [],
   customTrayComponent,
   children,
 }) => {
+  const [preferredViewMode, setPreferredViewMode] = useState(VIEW_MODE_SPEAKER);
+  const [viewMode, setViewMode] = useState(preferredViewMode);
+  const [isShowingScreenshare, setIsShowingScreenshare] = useState(false);
   const [showAside, setShowAside] = useState();
   const [activeModals, setActiveModals] = useState({});
   const [customCapsule, setCustomCapsule] = useState();
@@ -42,6 +55,13 @@ export const UIStateProvider = ({
     setShowAside(null);
   }, []);
 
+  useEffect(() => {
+    if (isShowingScreenshare) {
+      setViewMode(VIEW_MODE_SPEAKER);
+    }
+    setViewMode(preferredViewMode);
+  }, [isShowingScreenshare, preferredViewMode]);
+
   return (
     <UIStateContext.Provider
       value={{
@@ -55,6 +75,8 @@ export const UIStateProvider = ({
         toggleAside,
         showAside,
         setShowAside,
+        setIsShowingScreenshare,
+        setPreferredViewMode,
         customCapsule,
         setCustomCapsule,
       }}

dailyjs/shared/hooks/useCallUI.js

@@ -15,7 +15,6 @@ import {
 } from '@dailyjs/shared/contexts/useCallMachine';
 import { useRouter } from 'next/router';
 import HairCheck from '../components/HairCheck';
-import { useUIState } from '../contexts/UIStateProvider';
 
 export const useCallUI = ({
   state,
@@ -26,7 +25,6 @@ export const useCallUI = ({
   notFoundRedirect = 'not-found',
 }) => {
   const router = useRouter();
-  const { closeAside, closeModal } = useUIState();
 
   useEffect(() => {
     console.log(`%c🔀 App state changed: ${state}`, `color: gray;`);
@@ -38,10 +36,6 @@ export const useCallUI = ({
       return <Loader />;
     }
 
-    // Make sure we hide any active asides or modals when the state changes
-    closeAside();
-    closeModal();
-
     // Update the UI based on the state of our call
     switch (state) {
       case CALL_STATE_NOT_FOUND: