From f924be587487e161cda50f483f2fe97bbbbb3ff8 Mon Sep 17 00:00:00 2001 From: harshithpabbati Date: Thu, 7 Apr 2022 14:35:07 +0530 Subject: [PATCH 1/3] use useDailyEvent hook --- custom/live-transcription/components/App.js | 2 +- .../components/TranscriptionAside.js | 2 +- custom/live-transcription/components/Tray.js | 2 +- custom/shared/contexts/CallProvider.js | 13 ++++----- .../contexts/TranscriptionProvider.js | 28 ++++++------------- custom/shared/hooks/useJoinSound.js | 26 +++++++---------- 6 files changed, 26 insertions(+), 47 deletions(-) rename custom/{live-transcription => shared}/contexts/TranscriptionProvider.js (71%) diff --git a/custom/live-transcription/components/App.js b/custom/live-transcription/components/App.js index 064f8c2..a04e9b2 100644 --- a/custom/live-transcription/components/App.js +++ b/custom/live-transcription/components/App.js @@ -1,7 +1,7 @@ import React from 'react'; import App from '@custom/basic-call/components/App'; -import { TranscriptionProvider } from '../contexts/TranscriptionProvider'; +import { TranscriptionProvider } from '@custom/shared/contexts/TranscriptionProvider'; // Extend our basic call app component with the Live Transcription context export const AppWithTranscription = () => ( diff --git a/custom/live-transcription/components/TranscriptionAside.js b/custom/live-transcription/components/TranscriptionAside.js index 7b17dd5..a5dd650 100644 --- a/custom/live-transcription/components/TranscriptionAside.js +++ b/custom/live-transcription/components/TranscriptionAside.js @@ -4,7 +4,7 @@ import Button from '@custom/shared/components/Button'; import { useCallState } from '@custom/shared/contexts/CallProvider'; import { useParticipants } from '@custom/shared/contexts/ParticipantsProvider'; import { useUIState } from '@custom/shared/contexts/UIStateProvider'; -import { useTranscription } from '../contexts/TranscriptionProvider'; +import { useTranscription } from '@custom/shared/contexts/TranscriptionProvider'; export const TRANSCRIPTION_ASIDE = 'transcription'; diff --git a/custom/live-transcription/components/Tray.js b/custom/live-transcription/components/Tray.js index 5041ab6..d23b240 100644 --- a/custom/live-transcription/components/Tray.js +++ b/custom/live-transcription/components/Tray.js @@ -3,7 +3,7 @@ import React from 'react'; import { TrayButton } from '@custom/shared/components/Tray'; import { useUIState } from '@custom/shared/contexts/UIStateProvider'; import { ReactComponent as IconTranscription } from '@custom/shared/icons/chat-md.svg'; -import { useTranscription } from '../contexts/TranscriptionProvider'; +import { useTranscription } from '@custom/shared/contexts/TranscriptionProvider'; import { TRANSCRIPTION_ASIDE } from './TranscriptionAside'; export const Tray = () => { diff --git a/custom/shared/contexts/CallProvider.js b/custom/shared/contexts/CallProvider.js index a084a3a..b207cf9 100644 --- a/custom/shared/contexts/CallProvider.js +++ b/custom/shared/contexts/CallProvider.js @@ -13,7 +13,7 @@ import React, { useState, } from 'react'; import DailyIframe from '@daily-co/daily-js'; -import { DailyProvider } from '@daily-co/daily-react-hooks'; +import { DailyProvider, useDailyEvent } from '@daily-co/daily-react-hooks'; import Bowser from 'bowser'; import { useRouter } from 'next/router'; import PropTypes from 'prop-types'; @@ -124,14 +124,11 @@ export const CallProvider = ({ setPreJoinNonAuthorized(requiresPermission && !token); }, [state, daily, token]); - useEffect(() => { - if (!daily) return; + const handleOnJoinCleanUp = useCallback(() => { + if (cleanURLOnJoin) router.replace(`/${room}`); + }, [cleanURLOnJoin, room, router]); - if (cleanURLOnJoin) - daily.on('joined-meeting', () => router.replace(`/${room}`)); - - return () => daily.off('joined-meeting', () => router.replace(`/${room}`)); - }, [cleanURLOnJoin, daily, room, router]); + useDailyEvent('joined-meeting', handleOnJoinCleanUp); return ( { - const { callObject } = useCallState(); + const daily = useDaily(); const [transcriptionHistory, setTranscriptionHistory] = useState([]); const [hasNewMessages, setHasNewMessages] = useState(false); const [isTranscribing, setIsTranscribing] = useState(false); const handleNewMessage = useCallback( (e) => { - const participants = callObject.participants(); + const participants = daily.participants(); // Collect only transcription messages, and gather enough // words to be able to post messages at sentence intervals if (e.fromId === 'transcription' && e.data?.is_final) { @@ -37,7 +36,7 @@ export const TranscriptionProvider = ({ children }) => { setHasNewMessages(true); }, - [callObject] + [daily] ); const handleTranscriptionStarted = useCallback(() => { @@ -55,21 +54,10 @@ export const TranscriptionProvider = ({ children }) => { setIsTranscribing(false); }, []); - useEffect(() => { - if (!callObject) { - return false; - } - - console.log(`💬 Transcription provider listening for app messages`); - - callObject.on('app-message', handleNewMessage); - - callObject.on('transcription-started', handleTranscriptionStarted); - callObject.on('transcription-stopped', handleTranscriptionStopped); - callObject.on('transcription-error', handleTranscriptionError); - - return () => callObject.off('app-message', handleNewMessage); - }, [callObject, handleNewMessage, handleTranscriptionStarted, handleTranscriptionStopped, handleTranscriptionError]); + useDailyEvent('app-message', handleNewMessage); + useDailyEvent('transcription-started', handleTranscriptionStarted); + useDailyEvent('transcription-stopped', handleTranscriptionStopped); + useDailyEvent('transcription-error', handleTranscriptionError); return ( { - const { callObject: daily } = useCallState(); + const daily = useDaily(); const { joinSound } = useSoundLoader(); const [playJoinSound, setPlayJoinSound] = useState(false); @@ -25,18 +25,12 @@ export const useJoinSound = () => { }, 2000); }, [daily]); - useEffect(() => { - if (!daily) return; - const handleParticipantJoined = () => { - // first other participant joined --> play sound - if (!playJoinSound || Object.keys(daily.participants()).length !== 2) - return; - joinSound.play(); - }; - - daily.on('participant-joined', handleParticipantJoined); - return () => { - daily.off('participant-joined', handleParticipantJoined); - }; + const handleParticipantJoined = useCallback(() => { + // first other participant joined --> play sound + if (!playJoinSound || Object.keys(daily.participants()).length !== 2) + return; + joinSound.play(); }, [daily, joinSound, playJoinSound]); + + useDailyEvent('participant-joined', handleParticipantJoined); }; \ No newline at end of file From 8a7d1f384649132cf69a5bf643d26cb0c4c8f336 Mon Sep 17 00:00:00 2001 From: harshithpabbati Date: Thu, 7 Apr 2022 14:38:35 +0530 Subject: [PATCH 2/3] fix eslint errors --- custom/live-transcription/components/TranscriptionAside.js | 2 +- custom/live-transcription/components/Tray.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/custom/live-transcription/components/TranscriptionAside.js b/custom/live-transcription/components/TranscriptionAside.js index a5dd650..c4792a1 100644 --- a/custom/live-transcription/components/TranscriptionAside.js +++ b/custom/live-transcription/components/TranscriptionAside.js @@ -3,8 +3,8 @@ import { Aside } from '@custom/shared/components/Aside'; import Button from '@custom/shared/components/Button'; import { useCallState } from '@custom/shared/contexts/CallProvider'; import { useParticipants } from '@custom/shared/contexts/ParticipantsProvider'; -import { useUIState } from '@custom/shared/contexts/UIStateProvider'; import { useTranscription } from '@custom/shared/contexts/TranscriptionProvider'; +import { useUIState } from '@custom/shared/contexts/UIStateProvider'; export const TRANSCRIPTION_ASIDE = 'transcription'; diff --git a/custom/live-transcription/components/Tray.js b/custom/live-transcription/components/Tray.js index d23b240..b328feb 100644 --- a/custom/live-transcription/components/Tray.js +++ b/custom/live-transcription/components/Tray.js @@ -1,9 +1,9 @@ import React from 'react'; import { TrayButton } from '@custom/shared/components/Tray'; +import { useTranscription } from '@custom/shared/contexts/TranscriptionProvider'; import { useUIState } from '@custom/shared/contexts/UIStateProvider'; import { ReactComponent as IconTranscription } from '@custom/shared/icons/chat-md.svg'; -import { useTranscription } from '@custom/shared/contexts/TranscriptionProvider'; import { TRANSCRIPTION_ASIDE } from './TranscriptionAside'; export const Tray = () => { From 9eac0eb2ade35c35641577251da466b3e3deaddf Mon Sep 17 00:00:00 2001 From: harshithpabbati Date: Fri, 8 Apr 2022 13:19:17 +0530 Subject: [PATCH 3/3] address suggestions --- custom/live-transcription/pages/index.js | 6 +++++- custom/shared/contexts/CallProvider.js | 14 +++++++++----- 2 files changed, 14 insertions(+), 6 deletions(-) diff --git a/custom/live-transcription/pages/index.js b/custom/live-transcription/pages/index.js index 84a3f53..cf46307 100644 --- a/custom/live-transcription/pages/index.js +++ b/custom/live-transcription/pages/index.js @@ -6,7 +6,11 @@ export async function getStaticProps() { // Pass through domain as prop return { - props: defaultProps, + props: { + ...defaultProps, + forceFetchToken: true, + forceOwner: true, + }, }; } diff --git a/custom/shared/contexts/CallProvider.js b/custom/shared/contexts/CallProvider.js index b207cf9..14048b1 100644 --- a/custom/shared/contexts/CallProvider.js +++ b/custom/shared/contexts/CallProvider.js @@ -13,7 +13,7 @@ import React, { useState, } from 'react'; import DailyIframe from '@daily-co/daily-js'; -import { DailyProvider, useDailyEvent } from '@daily-co/daily-react-hooks'; +import { DailyProvider } from '@daily-co/daily-react-hooks'; import Bowser from 'bowser'; import { useRouter } from 'next/router'; import PropTypes from 'prop-types'; @@ -124,11 +124,15 @@ export const CallProvider = ({ setPreJoinNonAuthorized(requiresPermission && !token); }, [state, daily, token]); - const handleOnJoinCleanUp = useCallback(() => { - if (cleanURLOnJoin) router.replace(`/${room}`); - }, [cleanURLOnJoin, room, router]); + useEffect(() => { + if (!daily) return; - useDailyEvent('joined-meeting', handleOnJoinCleanUp); + if (cleanURLOnJoin) { + daily.on('joined-meeting', () => router.replace(`/${room}`)); + } + + return () => daily.off('joined-meeting', () => router.replace(`/${room}`)); + }, [cleanURLOnJoin, daily, room, router]); return (