Improve audio playback and audio/text timing

client/src/components/AudioOutput.jsx

@@ -1,31 +1,56 @@
-// In the AudioOutput component
 import React, { useEffect, useRef } from "react";
 
-function AudioOutput({ currentAudioMessage }) {
+function AudioOutput({ currentAudioMessage, isPaused }) {
   const audioRef = useRef(null);
+  const urlRef = useRef(null);
 
   useEffect(() => {
+    // Initialize the audio element if it does not exist
+    if (!audioRef.current) {
+      audioRef.current = new Audio();
+    }
+    return () => {
+      audioRef.current && audioRef.current.pause();
+    };
+  }, []);
+
+  useEffect(() => {
+    // Handle updating the audio source when the message changes
     if (currentAudioMessage) {
+      // Revoke the old URL to avoid memory leaks
+      if (urlRef.current?.url) {
+        URL.revokeObjectURL(urlRef.current.url);
+      }
+      // Create a new URL for the updated audio blob
       const blob = new Blob([currentAudioMessage.audio], { type: "audio/mp3" });
-      const url = URL.createObjectURL(blob);
-      audioRef.current.src = url;
+      urlRef.current = {
+        url: URL.createObjectURL(blob),
+        id: currentAudioMessage.id,
+      };
+      audioRef.current.src = urlRef.current.url;
+      audioRef.current.load();
+
+      // Auto-play the new audio if not paused
+      if (!isPaused) {
+        audioRef.current
+          .play()
+          .catch((err) => console.error("Error playing audio:", err));
+      }
+    }
+  }, [currentAudioMessage]);
+
+  useEffect(() => {
+    // Manage playback based on isPaused state
+    if (!isPaused && currentAudioMessage) {
       audioRef.current
         .play()
         .catch((err) => console.error("Error playing audio:", err));
-
-      return () => {
-        URL.revokeObjectURL(url);
-      };
+    } else {
+      audioRef.current.pause();
     }
-  }, [currentAudioMessage]);
+  }, [isPaused]);
 
-  return (
-    <audio
-      ref={audioRef}
-      controls
-      autoPlay
-    />
-  );
+  return null; // This component does not render anything itself
 }
 
 export default AudioOutput;

client/src/components/Output.jsx

@@ -8,24 +8,25 @@ function Output({ conversation, audioMessages }) {
   const [currentSnippetIndex, setCurrentSnippetIndex] = useState(0);
   const [currentMessageTextSnippet, setCurrentMessageTextSnippet] =
     useState("");
-  const [isPaused, setIsPaused] = useState(false);
-  const [isReadyMeeting, setIsReadyMeeting] = useState(false);
+  const [currentAudioMessage, setCurrentAudioMessage] = useState(null);
+  const [isReady, setIsReady] = useState(false);
+  const [isPaused, setIsPaused] = useState(true); // Assume initially paused until ready
 
   useEffect(() => {
-    if (!isReadyMeeting) {
-      const currentAudioMessage = audioMessages.find(
-        (a) => a.message_index === currentMessageIndex
-      );
-
-      console.log(currentAudioMessage);
-
-      if (currentAudioMessage) {
-        console.log("Ready!");
+    console.log("Updated audioMessages");
+  }, [audioMessages]);
 
-        setIsReadyMeeting(true);
-      }
+  useEffect(() => {
+    // Find the audio message only when currentMessageIndex changes
+    const foundAudioMessage = audioMessages.find(
+      (a) => a.message_index === currentMessageIndex
+    );
+    if (foundAudioMessage) {
+      setCurrentAudioMessage(foundAudioMessage);
+      setIsReady(true);
+      setIsPaused(false); // Start playing the new message immediately
     }
-  }, [audioMessages, currentMessageIndex, isReadyMeeting]);
+  }, [currentMessageIndex, audioMessages]); // Include audioMessages to update the message if it changes
 
   useEffect(() => {
     if (conversation.length > 0 && !isPaused) {
@@ -41,33 +42,39 @@ function Output({ conversation, audioMessages }) {
             setCurrentSnippetIndex(0);
           }
         }, calculateDisplayTime(snippets[currentSnippetIndex]) * 1000);
-        return () => clearTimeout(timeout); // Cleanup timeout on unmount or dependency change
+        return () => clearTimeout(timeout);
       }
     }
   }, [currentMessageIndex, currentSnippetIndex, conversation, isPaused]);
 
-  const calculateDisplayTime = (text) => Math.max(3, text.length * 0.055);
+  const calculateDisplayTime = (text) => {
+    const baseTimePerCharacter = 0.052; // Time per character in seconds
+    const baseTime = Math.max(3, text.length * baseTimePerCharacter);
+    const additionalTimeForCommas = (text.match(/,/g) || []).length * 0.5; // 0.4 seconds for each comma
+    return baseTime + additionalTimeForCommas;
+  };
 
   function handlePauseResume() {
-    setIsPaused(!isPaused); // Toggle pause state
+    setIsPaused(!isPaused);
   }
 
   function handleSkipForward() {
-    if (conversation.length > currentMessageIndex) {
-      const snippets =
-        conversation[currentMessageIndex].text.split(/(?<=\.\s)/);
-      if (currentSnippetIndex < snippets.length - 1) {
-        setCurrentSnippetIndex(currentSnippetIndex + 1);
-      } else if (currentMessageIndex < conversation.length - 1) {
-        setCurrentMessageIndex(currentMessageIndex + 1);
-        setCurrentSnippetIndex(0);
-      }
+    if (currentMessageIndex < conversation.length - 1) {
+      const newIndex = currentMessageIndex + 1;
+      setCurrentMessageIndex(newIndex);
+      setCurrentSnippetIndex(0);
+      // Update the current audio message immediately when skipping
+      const newAudioMessage = audioMessages.find(
+        (a) => a.message_index === newIndex
+      );
+      setCurrentAudioMessage(newAudioMessage);
+      setIsPaused(false); // Optionally start playing the new message immediately
     }
   }
 
   return (
     <div style={{ textAlign: "center", width: "75%" }}>
-      {isReadyMeeting ? (
+      {isReady ? (
         <>
           <h2>
             Speaker:{" "}
@@ -77,9 +84,8 @@ function Output({ conversation, audioMessages }) {
           </h2>
           <TextOutput currentMessageTextSnippet={currentMessageTextSnippet} />
           <AudioOutput
-            currentAudioMessage={audioMessages.find(
-              (a) => a.message_index === currentMessageIndex
-            )}
+            currentAudioMessage={currentAudioMessage}
+            isPaused={isPaused}
           />
           <ConversationControls
             isPaused={isPaused}
@@ -88,7 +94,7 @@ function Output({ conversation, audioMessages }) {
           />
         </>
       ) : (
-        <h2>The council is getting ready...</h2>
+        <h3>The council is getting ready...</h3>
       )}
     </div>
   );

client/src/components/ResetWarning.jsx

@@ -3,28 +3,26 @@ import { capitalizeFirstLetter } from "../utils";
 
 function ResetWarning({ message, onReset, onCancel }) {
   return (
+    <div>
+      <h4>
+        {message ? capitalizeFirstLetter(message) : "This"} will restart the
+        discussion
+      </h4>
       <div>
-        <h4>
-          {message
-            ? capitalizeFirstLetter(message)
-            : capitalizeFirstLetter("this")}{" "}
-          will restart the discussion
-        </h4>
-        <div>
-          <button
-            className="outline-button"
-            onClick={onReset}
-            style={{ marginRight: "9px" }}
-          >
-            I understand
-          </button>
-          <button
-            className="outline-button"
-            onClick={onCancel}
-            style={{ marginLeft: "9px" }}
-          >
-            Cancel
-          </button>
+        <button
+          className="outline-button"
+          onClick={onReset}
+          style={{ marginRight: "9px" }}
+        >
+          I understand
+        </button>
+        <button
+          className="outline-button"
+          onClick={onCancel}
+          style={{ marginLeft: "9px" }}
+        >
+          Cancel
+        </button>
       </div>
     </div>
   );

client/src/components/TextOutput.jsx

@@ -7,7 +7,7 @@ function TextOutput({ currentMessageTextSnippet }) {
   };
 
   return (
-    <div style={{ textAlign: "center", width: "75%" }}>
+    <div style={{ textAlign: "center" }}>
       <h2 style={textOutputStyle}>{currentMessageTextSnippet || ""}</h2>
     </div>
   );

server/server.js

@@ -10,10 +10,12 @@ const httpServer = http.createServer(app);
 const io = new Server(httpServer);
 const openai = new OpenAI(process.env.OPENAI_API_KEY);
 
+console.log(process.env.OPENAI_API_KEY);
+
 //Names of OpenAI voices
 const audioVoices = ["alloy", "echo", "fable", "onyx", "nova", "shimmer"];
 
-if(process.env.NODE_ENV != 'development'){
+if (process.env.NODE_ENV != "development") {
   //Don't server the static build in development
   app.use(express.static(path.join(__dirname, "../client/build")));
 }