use useDailyEvent hook

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 = () => (

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';
 

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 = () => {

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(() => {
+  const handleOnJoinCleanUp = useCallback(() => {
-    if (!daily) return;
+    if (cleanURLOnJoin) router.replace(`/${room}`);
+  }, [cleanURLOnJoin, room, router]);
 
-    if (cleanURLOnJoin)
+  useDailyEvent('joined-meeting', handleOnJoinCleanUp);
-      daily.on('joined-meeting', () => router.replace(`/${room}`));
-
-    return () => daily.off('joined-meeting', () => router.replace(`/${room}`));
-  }, [cleanURLOnJoin, daily, room, router]);
 
   return (
     <CallContext.Provider

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(() => {
+  useDailyEvent('app-message', handleNewMessage);
-    if (!callObject) {
+  useDailyEvent('transcription-started', handleTranscriptionStarted);
-      return false;
+  useDailyEvent('transcription-stopped', handleTranscriptionStopped);
-    }
+  useDailyEvent('transcription-error', handleTranscriptionError);
-
-    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]);
 
   return (
     <TranscriptionContext.Provider

custom/shared/hooks/useJoinSound.js

@@ -1,13 +1,13 @@
-import { useEffect, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 
-import { useCallState } from '../contexts/CallProvider';
+import { useDaily, useDailyEvent } from '@daily-co/daily-react-hooks';
 import { useSoundLoader } from './useSoundLoader';
 
 /**
  * Convenience hook to play `join.mp3` when first other participants joins.
  */
 export const useJoinSound = () => {
-  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(() => {
+  const handleParticipantJoined = useCallback(() => {
-    if (!daily) return;
+    // first other participant joined --> play sound
-    const handleParticipantJoined = () => {
+    if (!playJoinSound || Object.keys(daily.participants()).length !== 2)
-      // first other participant joined --> play sound
+      return;
-      if (!playJoinSound || Object.keys(daily.participants()).length !== 2)
+    joinSound.play();
-        return;
-      joinSound.play();
-    };
-
-    daily.on('participant-joined', handleParticipantJoined);
-    return () => {
-      daily.off('participant-joined', handleParticipantJoined);
-    };
   }, [daily, joinSound, playJoinSound]);
+
+  useDailyEvent('participant-joined', handleParticipantJoined);
 };