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..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 { useTranscription } from '@custom/shared/contexts/TranscriptionProvider'; import { useUIState } from '@custom/shared/contexts/UIStateProvider'; -import { useTranscription } from '../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..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 '../contexts/TranscriptionProvider'; import { TRANSCRIPTION_ASIDE } from './TranscriptionAside'; export const Tray = () => { 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 a084a3a..14048b1 100644 --- a/custom/shared/contexts/CallProvider.js +++ b/custom/shared/contexts/CallProvider.js @@ -127,8 +127,9 @@ export const CallProvider = ({ useEffect(() => { if (!daily) return; - if (cleanURLOnJoin) + if (cleanURLOnJoin) { daily.on('joined-meeting', () => router.replace(`/${room}`)); + } return () => daily.off('joined-meeting', () => router.replace(`/${room}`)); }, [cleanURLOnJoin, daily, room, router]); diff --git a/custom/live-transcription/contexts/TranscriptionProvider.js b/custom/shared/contexts/TranscriptionProvider.js similarity index 71% rename from custom/live-transcription/contexts/TranscriptionProvider.js rename to custom/shared/contexts/TranscriptionProvider.js index 6703901..5f810af 100644 --- a/custom/live-transcription/contexts/TranscriptionProvider.js +++ b/custom/shared/contexts/TranscriptionProvider.js @@ -2,24 +2,23 @@ import React, { createContext, useCallback, useContext, - useEffect, useState, } from 'react'; -import { useCallState } from '@custom/shared/contexts/CallProvider'; +import { useDaily, useDailyEvent } from '@daily-co/daily-react-hooks'; import { nanoid } from 'nanoid'; import PropTypes from 'prop-types'; export const TranscriptionContext = createContext(); export const TranscriptionProvider = ({ children }) => { - 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