From 6166898bfb78cc13fe96fedc433165f32554cd2b Mon Sep 17 00:00:00 2001 From: Jon Date: Tue, 15 Jun 2021 17:32:27 +0100 Subject: [PATCH 1/6] created useCallUI hook to simplify cross demo call loop --- dailyjs/basic-call/components/App/App.js | 70 ++-------------- .../components/HairCheck/HairCheck.js | 0 .../components/HairCheck/index.js | 0 .../components/MessageCard/MessageCard.js | 0 .../components/MessageCard/index.js | 0 dailyjs/shared/hooks/useCallUI.js | 80 +++++++++++++++++++ 6 files changed, 88 insertions(+), 62 deletions(-) rename dailyjs/{basic-call => shared}/components/HairCheck/HairCheck.js (100%) rename dailyjs/{basic-call => shared}/components/HairCheck/index.js (100%) rename dailyjs/{basic-call => shared}/components/MessageCard/MessageCard.js (100%) rename dailyjs/{basic-call => shared}/components/MessageCard/index.js (100%) create mode 100644 dailyjs/shared/hooks/useCallUI.js diff --git a/dailyjs/basic-call/components/App/App.js b/dailyjs/basic-call/components/App/App.js index 045c303..fdc6849 100644 --- a/dailyjs/basic-call/components/App/App.js +++ b/dailyjs/basic-call/components/App/App.js @@ -1,77 +1,23 @@ -import React, { useCallback, useEffect, useMemo } from 'react'; -import Loader from '@dailyjs/shared/components/Loader'; +import React, { useMemo } from 'react'; import { useCallState } from '@dailyjs/shared/contexts/CallProvider'; -import { - CALL_STATE_ENDED, - CALL_STATE_JOINED, - CALL_STATE_JOINING, - CALL_STATE_LOBBY, - CALL_STATE_NOT_FOUND, - CALL_STATE_NOT_BEFORE, - CALL_STATE_READY, - CALL_STATE_REDIRECTING, -} from '@dailyjs/shared/contexts/useCallMachine'; +import { useCallUI } from '@dailyjs/shared/hooks/useCallUI'; -import { useRouter } from 'next/router'; -import HairCheck from '../HairCheck'; -import MessageCard from '../MessageCard'; import Room from '../Room'; import { Modals } from './Modals'; export const App = () => { const { state, leave } = useCallState(); - const router = useRouter(); - useEffect(() => { - console.log(`%c🔀 App state changed: ${state}`, `color: gray;`); - }, [state]); - - const renderState = useCallback(() => { - // Show loader when state is undefined or ready to join - if (!state || [CALL_STATE_READY, CALL_STATE_JOINING].includes(state)) { - return ; - } - - // Update the UI based on the state of our call - switch (state) { - case CALL_STATE_NOT_FOUND: - router.replace('/not-found'); - return null; - case CALL_STATE_NOT_BEFORE: - return ( - - This room has `nbf` set, meaning you cannot join the call before the - owner - - ); - case CALL_STATE_LOBBY: - return ; - case CALL_STATE_JOINED: - return leave()} />; - case CALL_STATE_REDIRECTING: - case CALL_STATE_ENDED: - // Note: you could set a manual redirect here but we'll show just an exit screen - return ( - window.location.reload()}> - You have left the call. We hope you had fun! - - ); - default: - break; - } - - return ( - - An unknown error has occured in the call loop. This should not happen! - - ); - }, [leave, router, state]); + const componentForState = useCallUI({ + state, + room: () => leave()} />, + }); // Memoize children to avoid unnecassary renders from HOC return useMemo( () => (
- {renderState()} + {componentForState()}
), - [renderState] + [componentForState] ); }; diff --git a/dailyjs/basic-call/components/HairCheck/HairCheck.js b/dailyjs/shared/components/HairCheck/HairCheck.js similarity index 100% rename from dailyjs/basic-call/components/HairCheck/HairCheck.js rename to dailyjs/shared/components/HairCheck/HairCheck.js diff --git a/dailyjs/basic-call/components/HairCheck/index.js b/dailyjs/shared/components/HairCheck/index.js similarity index 100% rename from dailyjs/basic-call/components/HairCheck/index.js rename to dailyjs/shared/components/HairCheck/index.js diff --git a/dailyjs/basic-call/components/MessageCard/MessageCard.js b/dailyjs/shared/components/MessageCard/MessageCard.js similarity index 100% rename from dailyjs/basic-call/components/MessageCard/MessageCard.js rename to dailyjs/shared/components/MessageCard/MessageCard.js diff --git a/dailyjs/basic-call/components/MessageCard/index.js b/dailyjs/shared/components/MessageCard/index.js similarity index 100% rename from dailyjs/basic-call/components/MessageCard/index.js rename to dailyjs/shared/components/MessageCard/index.js diff --git a/dailyjs/shared/hooks/useCallUI.js b/dailyjs/shared/hooks/useCallUI.js new file mode 100644 index 0000000..65ef647 --- /dev/null +++ b/dailyjs/shared/hooks/useCallUI.js @@ -0,0 +1,80 @@ +import React, { useCallback, useEffect } from 'react'; +import Loader from '@dailyjs/shared/components/Loader'; +import MessageCard from '@dailyjs/shared/components/MessageCard'; +import { + CALL_STATE_ENDED, + CALL_STATE_JOINED, + CALL_STATE_JOINING, + CALL_STATE_LOBBY, + CALL_STATE_NOT_FOUND, + CALL_STATE_NOT_BEFORE, + CALL_STATE_READY, + CALL_STATE_REDIRECTING, +} from '@dailyjs/shared/contexts/useCallMachine'; +import { useRouter } from 'next/router'; +import HairCheck from '../components/HairCheck'; + +export const useCallUI = ({ + state, + room, + haircheck, + redirectUrl, + notFoundRedirect = 'not-found', +}) => { + const router = useRouter(); + + useEffect(() => { + console.log(`%c🔀 App state changed: ${state}`, `color: gray;`); + }, [state]); + + const renderByState = useCallback(() => { + // Show loader when state is undefined or ready to join + if (!state || [CALL_STATE_READY, CALL_STATE_JOINING].includes(state)) { + return ; + } + + // Update the UI based on the state of our call + switch (state) { + case CALL_STATE_NOT_FOUND: + router.replace(notFoundRedirect); + return null; + case CALL_STATE_NOT_BEFORE: + return ( + + This room has `nbf` set, meaning you cannot join the call before the + owner + + ); + case CALL_STATE_LOBBY: + return haircheck ? haircheck() : ; + case CALL_STATE_REDIRECTING: + window.location = redirectUrl; + break; + case CALL_STATE_JOINED: + return room ? ( + room() + ) : ( + + ); + case CALL_STATE_ENDED: + // Note: you could set a manual redirect here but we'll show just an exit screen + return ( + window.location.reload()}> + You have left the call. We hope you had fun! + + ); + default: + break; + } + + return ( + + An unknown error has occured in the call loop. This should not happen! + + ); + }, [state, notFoundRedirect, redirectUrl, haircheck, room, router]); + + return renderByState; +}; + +export default useCallUI; From 7f90489160710001a873a8229454d82fc993bc06 Mon Sep 17 00:00:00 2001 From: Jon Date: Tue, 15 Jun 2021 17:37:10 +0100 Subject: [PATCH 2/6] added call ended to useCallUI --- dailyjs/shared/hooks/useCallUI.js | 16 +++++++++++++--- 1 file changed, 13 insertions(+), 3 deletions(-) diff --git a/dailyjs/shared/hooks/useCallUI.js b/dailyjs/shared/hooks/useCallUI.js index 65ef647..b8feaec 100644 --- a/dailyjs/shared/hooks/useCallUI.js +++ b/dailyjs/shared/hooks/useCallUI.js @@ -19,6 +19,7 @@ export const useCallUI = ({ room, haircheck, redirectUrl, + callEnded, notFoundRedirect = 'not-found', }) => { const router = useRouter(); @@ -57,8 +58,9 @@ export const useCallUI = ({ ); case CALL_STATE_ENDED: - // Note: you could set a manual redirect here but we'll show just an exit screen - return ( + return callEnded ? ( + callEnded() + ) : ( window.location.reload()}> You have left the call. We hope you had fun! @@ -72,7 +74,15 @@ export const useCallUI = ({ An unknown error has occured in the call loop. This should not happen! ); - }, [state, notFoundRedirect, redirectUrl, haircheck, room, router]); + }, [ + state, + notFoundRedirect, + redirectUrl, + haircheck, + room, + callEnded, + router, + ]); return renderByState; }; From 3031884e52d8f88368d24c301c8ddb0d8ec0a6cc Mon Sep 17 00:00:00 2001 From: Jon Date: Tue, 15 Jun 2021 18:07:38 +0100 Subject: [PATCH 3/6] squashed conflict --- dailyjs/basic-call/components/Room/Room.js | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/dailyjs/basic-call/components/Room/Room.js b/dailyjs/basic-call/components/Room/Room.js index 212fd09..b78228b 100644 --- a/dailyjs/basic-call/components/Room/Room.js +++ b/dailyjs/basic-call/components/Room/Room.js @@ -7,11 +7,7 @@ import { useCallState } from '@dailyjs/shared/contexts/CallProvider'; import { useMediaDevices } from '@dailyjs/shared/contexts/MediaDeviceProvider'; import { useParticipants } from '@dailyjs/shared/contexts/ParticipantsProvider'; import { useUIState } from '@dailyjs/shared/contexts/UIStateProvider'; -<<<<<<< HEAD import { useWaitingRoom } from '@dailyjs/shared/contexts/WaitingRoomProvider'; - -======= ->>>>>>> e47ada8fa4389bbfbeb7c97a6d80731a33d24b01 import { ReactComponent as IconCameraOff } from '@dailyjs/shared/icons/camera-off-md.svg'; import { ReactComponent as IconCameraOn } from '@dailyjs/shared/icons/camera-on-md.svg'; import { ReactComponent as IconLeave } from '@dailyjs/shared/icons/leave-md.svg'; @@ -30,6 +26,7 @@ export const Room = ({ onLeave }) => { const { setShowDeviceModal } = useUIState(); const { isCamMuted, isMicMuted } = useMediaDevices(); const { setShowModal, showModal } = useWaitingRoom(); + const { localParticipant } = useParticipants(); const toggleCamera = (newState) => { if (!callObject) return false; From 9d8c64d7c492a6f023a0d99d3ae507a246d0e912 Mon Sep 17 00:00:00 2001 From: Jon Date: Wed, 16 Jun 2021 11:06:10 +0100 Subject: [PATCH 4/6] fixed exitredirect issue --- dailyjs/shared/contexts/CallProvider.js | 4 ++-- dailyjs/shared/contexts/useCallMachine.js | 7 ++++--- dailyjs/shared/hooks/useCallUI.js | 10 +++++++--- 3 files changed, 13 insertions(+), 8 deletions(-) diff --git a/dailyjs/shared/contexts/CallProvider.js b/dailyjs/shared/contexts/CallProvider.js index 1fa331a..b884666 100644 --- a/dailyjs/shared/contexts/CallProvider.js +++ b/dailyjs/shared/contexts/CallProvider.js @@ -33,7 +33,7 @@ export const CallProvider = ({ const [preJoinNonAuthorized, setPreJoinNonAuthorized] = useState(false); // Daily CallMachine hook (primarily handles status of the call) - const { daily, leave, join, state } = useCallMachine({ + const { daily, leave, state, setRedirectOnLeave } = useCallMachine({ domain, room, token, @@ -71,10 +71,10 @@ export const CallProvider = ({ addFakeParticipant, preJoinNonAuthorized, leave, - join, videoQuality, setVideoQuality, setBandwidth, + setRedirectOnLeave, subscribeToTracksAutomatically, }} > diff --git a/dailyjs/shared/contexts/useCallMachine.js b/dailyjs/shared/contexts/useCallMachine.js index 542be7d..848e1fd 100644 --- a/dailyjs/shared/contexts/useCallMachine.js +++ b/dailyjs/shared/contexts/useCallMachine.js @@ -38,7 +38,7 @@ export const useCallMachine = ({ }) => { const [daily, setDaily] = useState(null); const [state, setState] = useState(CALL_STATE_READY); - const [redirectOnLeave, setRedirectOnLeave] = useState(true); + const [redirectOnLeave, setRedirectOnLeave] = useState(false); const url = useMemo( () => (domain && room ? `https://${domain}.daily.co/${room}` : null), @@ -245,8 +245,9 @@ export const useCallMachine = ({ break; case 'left-meeting': daily.destroy(); - if (!redirectOnLeave) return; - setState(CALL_STATE_REDIRECTING); + setState( + !redirectOnLeave ? CALL_STATE_ENDED : CALL_STATE_REDIRECTING + ); break; case 'error': switch (ev?.error?.type) { diff --git a/dailyjs/shared/hooks/useCallUI.js b/dailyjs/shared/hooks/useCallUI.js index b8feaec..45ecc3f 100644 --- a/dailyjs/shared/hooks/useCallUI.js +++ b/dailyjs/shared/hooks/useCallUI.js @@ -48,15 +48,19 @@ export const useCallUI = ({ ); case CALL_STATE_LOBBY: return haircheck ? haircheck() : ; - case CALL_STATE_REDIRECTING: - window.location = redirectUrl; - break; + case CALL_STATE_JOINED: return room ? ( room() ) : ( ); + case CALL_STATE_REDIRECTING: + if (!redirectUrl) { + break; + } + window.location = redirectUrl; + break; case CALL_STATE_ENDED: return callEnded ? ( callEnded() From b80b8cc1b56c0862c94516cf5514f346ffdb8916 Mon Sep 17 00:00:00 2001 From: Jon Date: Wed, 16 Jun 2021 11:59:46 +0100 Subject: [PATCH 5/6] added active speaker border. Fixed tile avatar glitch --- dailyjs/basic-call/components/Audio/Audio.js | 6 +++--- dailyjs/shared/components/Tile/Tile.js | 6 ++++++ dailyjs/shared/components/Tile/avatar.svg | 7 +------ 3 files changed, 10 insertions(+), 9 deletions(-) diff --git a/dailyjs/basic-call/components/Audio/Audio.js b/dailyjs/basic-call/components/Audio/Audio.js index 788737d..3e5b7f1 100644 --- a/dailyjs/basic-call/components/Audio/Audio.js +++ b/dailyjs/basic-call/components/Audio/Audio.js @@ -10,15 +10,15 @@ const AudioItem = React.memo(({ participant }) => { useEffect(() => { if (!audioTrack || !audioRef.current) return; - // sanity check to make sure this is an audio track - if (audioTrack && audioTrack !== 'audio') return; + // quick sanity to check to make sure this is an audio track... + if (audioTrack.kind !== 'audio') return; audioRef.current.srcObject = new MediaStream([audioTrack]); }, [audioTrack]); return ( <> -