From c052ff45a000a9f3ad7223a7b189a3fa512ce0f6 Mon Sep 17 00:00:00 2001 From: harshithpabbati Date: Mon, 10 Jan 2022 22:11:55 +0530 Subject: [PATCH] display class state in the header --- custom/fitness-demo/components/App/App.js | 6 +-- custom/fitness-demo/components/Call/Header.js | 39 +++++++++++++-- custom/fitness-demo/components/Tray/View.js | 30 ------------ custom/fitness-demo/components/Tray/index.js | 2 - .../contexts/ClassStateProvider.js | 48 +++++++++++++++++++ custom/fitness-demo/contexts/ViewProvider.js | 40 ---------------- custom/shared/icons/play-sm.svg | 3 ++ 7 files changed, 90 insertions(+), 78 deletions(-) delete mode 100644 custom/fitness-demo/components/Tray/View.js create mode 100644 custom/fitness-demo/contexts/ClassStateProvider.js delete mode 100644 custom/fitness-demo/contexts/ViewProvider.js create mode 100644 custom/shared/icons/play-sm.svg diff --git a/custom/fitness-demo/components/App/App.js b/custom/fitness-demo/components/App/App.js index da1fd96..ccf5e7f 100644 --- a/custom/fitness-demo/components/App/App.js +++ b/custom/fitness-demo/components/App/App.js @@ -5,9 +5,9 @@ import { useCallUI } from '@custom/shared/hooks/useCallUI'; import PropTypes from 'prop-types'; import { ChatProvider } from '../../contexts/ChatProvider'; +import { ClassStateProvider } from '../../contexts/ClassStateProvider'; 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'; @@ -28,7 +28,7 @@ export const App = ({ customComponentForState }) => { - + {roomExp && }
{componentForState()} @@ -46,7 +46,7 @@ export const App = ({ customComponentForState }) => { } `}
- + diff --git a/custom/fitness-demo/components/Call/Header.js b/custom/fitness-demo/components/Call/Header.js index 8688550..2da7f90 100644 --- a/custom/fitness-demo/components/Call/Header.js +++ b/custom/fitness-demo/components/Call/Header.js @@ -1,15 +1,44 @@ -import React, { useMemo } from 'react'; +import React, { useMemo, useCallback } from 'react'; +import Button from '@custom/shared/components/Button'; import HeaderCapsule from '@custom/shared/components/HeaderCapsule'; import { useCallState } from '@custom/shared/contexts/CallProvider'; import { useParticipants } from '@custom/shared/contexts/ParticipantsProvider'; import { useUIState } from '@custom/shared/contexts/UIStateProvider'; import { ReactComponent as IconLock } from '@custom/shared/icons/lock-md.svg'; +import { ReactComponent as IconPlay } from '@custom/shared/icons/play-sm.svg'; import { slugify } from '@custom/shared/lib/slugify'; +import { useClassState, PRE_CLASS_LOBBY, CLASS_IN_SESSION } from '../../contexts/ClassStateProvider'; export const Header = () => { const { roomInfo } = useCallState(); - const { participantCount } = useParticipants(); + const { participantCount, localParticipant } = useParticipants(); const { customCapsule } = useUIState(); + const { classType, setClassType } = useClassState(); + + const capsuleLabel = useCallback(() => { + if (!localParticipant.isOwner) return; + if (classType === PRE_CLASS_LOBBY) + return ( + + ) + if (classType === CLASS_IN_SESSION) + return ( + + ) + }, [classType, localParticipant.isOwner, setClassType]); return useMemo( () => ( @@ -37,6 +66,10 @@ export const Header = () => { {customCapsule.label} )} + + {classType} + {capsuleLabel()} + ), - [roomInfo.privacy, roomInfo.name, participantCount, customCapsule] + [roomInfo.privacy, roomInfo.name, participantCount, customCapsule, classType, capsuleLabel] ); }; diff --git a/custom/fitness-demo/components/Tray/View.js b/custom/fitness-demo/components/Tray/View.js deleted file mode 100644 index b73e67d..0000000 --- a/custom/fitness-demo/components/Tray/View.js +++ /dev/null @@ -1,30 +0,0 @@ -import React from 'react'; - -import { TrayButton } from '@custom/shared/components/Tray'; -import { useParticipants } from '@custom/shared/contexts/ParticipantsProvider'; -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 { view, setView } = useView(); - - const onViewClick = () => - setView(view === VIEW_MODE_SPEAKER ? VIEW_MODE_GRID : VIEW_MODE_SPEAKER); - - if (!localParticipant.isOwner) return null; - - return ( - - {view === VIEW_MODE_SPEAKER ? : } - - ); -}; - -export default ViewTray; \ No newline at end of file diff --git a/custom/fitness-demo/components/Tray/index.js b/custom/fitness-demo/components/Tray/index.js index b68da84..ea94d25 100644 --- a/custom/fitness-demo/components/Tray/index.js +++ b/custom/fitness-demo/components/Tray/index.js @@ -3,7 +3,6 @@ import ChatTray from './Chat'; import RecordTray from './Record'; import ScreenShareTray from './ScreenShare'; import StreamTray from './Stream'; -import ViewTray from './View'; export const Tray = () => { return ( @@ -12,7 +11,6 @@ export const Tray = () => { - ); }; diff --git a/custom/fitness-demo/contexts/ClassStateProvider.js b/custom/fitness-demo/contexts/ClassStateProvider.js new file mode 100644 index 0000000..ee7b07e --- /dev/null +++ b/custom/fitness-demo/contexts/ClassStateProvider.js @@ -0,0 +1,48 @@ +import React, { + createContext, + useContext, + useCallback, + useMemo, + useEffect, +} from 'react'; +import { useUIState, VIEW_MODE_SPEAKER, VIEW_MODE_GRID } from '@custom/shared/contexts/UIStateProvider'; +import { useSharedState } from '@custom/shared/hooks/useSharedState'; +import PropTypes from 'prop-types'; + +export const PRE_CLASS_LOBBY = 'Pre-class lobby'; +export const CLASS_IN_SESSION = 'Class-in session'; +export const POST_CLASS_LOBBY = 'Post-class lobby'; + +export const ClassStateContext = createContext(); + +export const ClassStateProvider = ({ children }) => { + const { setPreferredViewMode } = useUIState(); + + const { sharedState, setSharedState } = useSharedState({ + initialValues: { type: PRE_CLASS_LOBBY }, + }); + + const classType = useMemo(() => sharedState.type, [sharedState.type]); + + const setClassType = useCallback(() => { + if (sharedState.type === PRE_CLASS_LOBBY) setSharedState({ type: CLASS_IN_SESSION }); + if (sharedState.type === CLASS_IN_SESSION) setSharedState({ type: POST_CLASS_LOBBY }); + }, [sharedState.type, setSharedState]); + + useEffect(() => { + if (sharedState.type === CLASS_IN_SESSION) setPreferredViewMode(VIEW_MODE_SPEAKER); + else setPreferredViewMode(VIEW_MODE_GRID); + }, [setPreferredViewMode, sharedState.type]); + + return ( + + {children} + + ); +}; + +ClassStateProvider.propTypes = { + children: PropTypes.node, +}; + +export const useClassState = () => useContext(ClassStateContext); \ No newline at end of file diff --git a/custom/fitness-demo/contexts/ViewProvider.js b/custom/fitness-demo/contexts/ViewProvider.js deleted file mode 100644 index 37fa225..0000000 --- a/custom/fitness-demo/contexts/ViewProvider.js +++ /dev/null @@ -1,40 +0,0 @@ -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 ( - - {children} - - ); -}; - -ViewProvider.propTypes = { - children: PropTypes.node, -}; - -export const useView = () => useContext(ViewContext); \ No newline at end of file diff --git a/custom/shared/icons/play-sm.svg b/custom/shared/icons/play-sm.svg new file mode 100644 index 0000000..58d6dbb --- /dev/null +++ b/custom/shared/icons/play-sm.svg @@ -0,0 +1,3 @@ + + +