Listen for events and manage button state

dailyjs/live-transcription/components/TranscriptionAside/TranscriptionAside.js

@@ -11,8 +11,9 @@ export const TRANSCRIPTION_ASIDE = 'transcription';
 export const TranscriptionAside = () => {
   const { callObject } = useCallState();
   const { showAside, setShowAside } = useUIState();
-  const { _sendMessage, transcriptionHistory } = useTranscription();
+  const { transcriptionHistory } = useTranscription();
-  const { _allParticipants, isOwner } = useParticipants();
+  const [isTranscribing, setIsTranscribing] = useState(false);
+  const { isOwner } = useParticipants();
 
   const msgWindowRef = useRef();
 
@@ -27,30 +28,35 @@ export const TranscriptionAside = () => {
     return null;
   }
 
-  function startTranscription() {
+  async function startTranscription() {
-    callObject.startTranscription();
+    setIsTranscribing(true);
+    await callObject.startTranscription();
   }
 
-  function stopTranscription() {
+  async function stopTranscription() {
-    callObject.stopTranscription();
+    setIsTranscribing(false);
+    await callObject.stopTranscription();
   }
 
   return (
     <Aside onClose={() => setShowAside(false)}>
         {isOwner && (
           <div className="owner-actions">
+
             <Button
               fullWidth
               size="tiny"
+              disabled={isTranscribing}
               onClick={() =>
                 startTranscription()
               }
             >
-              Start transcribing
+              {isTranscribing ? 'Transcribing' : 'Start transcribing'}
             </Button>
             <Button
               fullWidth
               size="tiny"
+              disabled={!isTranscribing}
               onClick={() =>
                 stopTranscription()
               }

dailyjs/live-transcription/contexts/TranscriptionProvider.js

@@ -15,16 +15,19 @@ export const TranscriptionProvider = ({ children }) => {
   const { callObject } = useCallState();
   const [transcriptionHistory, setTranscriptionHistory] = useState([]);
   const [hasNewMessages, setHasNewMessages] = useState(false);
+  const [isTranscribing, setIsTranscribing] = useState(false);
 
   const handleNewMessage = useCallback(
     (e) => {
+      const participants = callObject.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) {
-        console.log(`${JSON.stringify(e.data)}: ${JSON.stringify(callObject.participants())}`)
-
-      const sender = e.data.user_name 
-        ? e.data.user_name
-        : 'Guest';
 
+      // Get the sender's current display name or the local name
+      const sender = e.data?.session_id !== participants.local.session_id
+        ? participants[e.data.session_id].user_name
+        : participants.local.user_name;
         
         setTranscriptionHistory((oldState) => [
           ...oldState,
@@ -37,6 +40,16 @@ export const TranscriptionProvider = ({ children }) => {
     [callObject]
   );
 
+  const handleTranscriptionStarted = useCallback(() => {
+    console.log('💬 Live stream started');
+    setIsTranscribing(true);
+  }, []);
+
+  const handleTranscriptionStopped = useCallback(() => {
+    console.log('💬 Live stream stopped');
+    setIsTranscribing(false);
+  }, []);
+
   useEffect(() => {
     if (!callObject) {
       return false;
@@ -46,12 +59,16 @@ export const TranscriptionProvider = ({ children }) => {
 
     callObject.on('app-message', handleNewMessage);
 
+    callObject.on('transcription-started', handleTranscriptionStarted);
+    callObject.on('transcription-stopped', handleTranscriptionStopped);
+
     return () => callObject.off('app-message', handleNewMessage);
-  }, [callObject, handleNewMessage]);
+  }, [callObject, handleNewMessage, handleTranscriptionStarted, handleTranscriptionStopped]);
 
   return (
     <TranscriptionContext.Provider
       value={{
+        isTranscribing,
         transcriptionHistory,
         hasNewMessages,
         setHasNewMessages,