further audio fixes

components/AudioControls.tsx

@@ -8,19 +8,17 @@ interface AudioControlsProps {
 }
 
 export default function AudioControls({ isPlaying, isLoading, isSynthesizingAudio, handlePlayPause }: AudioControlsProps) {
-  const [isPaused, setIsPaused] = useState(false);
   const [buttonState, setButtonState] = useState<'play' | 'pause' | 'resume' | 'loading'>('play');
 
   useEffect(() => {
-    console.log('isLoading:', isLoading, 'isSynthesizingAudio:', isSynthesizingAudio, 'isPlaying:', isPlaying);
     if (isLoading || isSynthesizingAudio) {
       setButtonState('loading');
-    } else if (isPlaying && !isPaused) {
+    } else if (isPlaying) {
       setButtonState('pause');
     } else {
       setButtonState(buttonState === 'pause' ? 'resume' : 'play');
     }
-  }, [isPlaying, isLoading, isSynthesizingAudio, isPaused]);
+  }, [isPlaying, isLoading, isSynthesizingAudio]);
 
   const getButtonText = () => {
     switch (buttonState) {
@@ -32,10 +30,7 @@ export default function AudioControls({ isPlaying, isLoading, isSynthesizingAudi
   };
 
   const handleClick = () => {
-    if (isPlaying || isPaused) {
-      setIsPaused(!isPaused);
-    }
-    handlePlayPause();
+        handlePlayPause();
   };
 
   return (

hooks/useAudioControls.ts

@@ -1,50 +1,54 @@
-import {
-  hasAudioStarted,
-  isAudioLoading,
-  isPlaying,
-  pauseResumeAudio,
-  playFullDebate,
-  resetAudioState,
-  isSynthesizing
-} from 'lib/audioUtils.ts';
-import type { Personality } from 'lib/debate/personalities.ts';
-import { useCallback, useEffect, useState } from 'preact/hooks';
+import { pauseResumeAudio, playFullDebate, processQueue } from "lib/audioUtils.ts";
+import { Personality } from "lib/debate/personalities.ts";
+import { useCallback, useEffect } from "preact/hooks";
+import { useAudioState } from "./useAudioState.ts";
 
-export function useAudioControls(debate: Array<{ role: string; content: string }>, agentDetails: Required<Personality>[]) {
-  const [isLoading, setIsLoading] = useState(false);
-  const [isSynthesizingAudio, setIsSynthesizingAudio] = useState(false);
+export const useAudioControls = (
+  debate: Array<{ role: string; content: string }>,
+  agentDetails: Required<Personality>[]
+) => {
+  const audioState = useAudioState();
+  const {
+    isProcessingQueue,
+    isPaused,
+    isLoading,
+    isSynthesizingAudio,
+    audioQueue,
+    currentQueueIndex,
+    resetAudioState,
+    setIsPaused,
+    setIsProcessingQueue,
+  } = audioState;
+
+  const isPlaying = isProcessingQueue && !isPaused;
 
   useEffect(() => {
-    const checkStatus = () => {
-      setIsLoading(isAudioLoading());
-      setIsSynthesizingAudio(isSynthesizing());
+    return () => {
+      resetAudioState();
     };
-
-    const intervalId = setInterval(checkStatus, 100);
-    return () => clearInterval(intervalId);
   }, []);
 
-  const handlePlayPause = useCallback(async () => {
-    if (isPlaying()) {
-      pauseResumeAudio();
+  useEffect(() => {
+    if (audioQueue.length > 0 && !isProcessingQueue && !isPaused) {
+      processQueue(audioState);
+    }
+  }, [audioQueue, isProcessingQueue, isPaused]);
+
+  const handlePlayPause = useCallback(() => {
+    if (audioQueue.length === 0 && currentQueueIndex === 0) {
+      playFullDebate(debate, agentDetails, audioState).then(() => {
+        setIsProcessingQueue(true);
+        processQueue(audioState);
+      });
     } else {
-      setIsLoading(true);
-      setIsSynthesizingAudio(true);
-      if (!hasAudioStarted()) {
-        resetAudioState();
-        await playFullDebate(debate, agentDetails);
-      } else {
-        pauseResumeAudio();
-      }
-      setIsLoading(false);
-      setIsSynthesizingAudio(false);
+      pauseResumeAudio(audioState);
     }
-  }, [debate, agentDetails]);
+  }, [debate, agentDetails, audioState, audioQueue, currentQueueIndex]);
 
   return {
-    isPlaying: isPlaying(),
+    isPlaying,
     isLoading,
     isSynthesizingAudio,
     handlePlayPause,
   };
-}
+};

hooks/useAudioState.ts

@@ -0,0 +1,42 @@
+import { useState } from "preact/hooks";
+
+export const useAudioState = () => {
+  const [audioQueue, setAudioQueue] = useState<Array<{ content: string; voice: string }>>([]);
+  const [isProcessingQueue, setIsProcessingQueue] = useState(false);
+  const [currentAudio, setCurrentAudio] = useState<HTMLAudioElement | null>(null);
+  const [isPaused, setIsPaused] = useState(false);
+  const [currentPlaybackPosition, setCurrentPlaybackPosition] = useState(0);
+  const [isLoading, setIsLoading] = useState(false);
+  const [currentQueueIndex, setCurrentQueueIndex] = useState(0);
+  const [isSynthesizingAudio, setIsSynthesizingAudio] = useState(false);
+
+  const resetAudioState = () => {
+    setAudioQueue([]);
+    setIsProcessingQueue(false);
+    setCurrentAudio(null);
+    setIsPaused(false);
+    setCurrentPlaybackPosition(0);
+    setCurrentQueueIndex(0);
+    setIsLoading(false);
+  };
+
+  return {
+    audioQueue,
+    setAudioQueue,
+    isProcessingQueue,
+    setIsProcessingQueue,
+    currentAudio,
+    setCurrentAudio,
+    isPaused,
+    setIsPaused,
+    currentPlaybackPosition,
+    setCurrentPlaybackPosition,
+    isLoading,
+    setIsLoading,
+    currentQueueIndex,
+    setCurrentQueueIndex,
+    isSynthesizingAudio,
+    setIsSynthesizingAudio,
+    resetAudioState,
+  };
+};

hooks/useDebateState.ts

@@ -177,8 +177,7 @@ export function useDebateState() {
       setIsDebateFinished(true);
     } catch (error) {
       if (error.name === "AbortError") {
-        console.log("Fetch aborted");
-      } else {
+              } else {
         console.error("Error in debate:", error);
         setErrors(["An error occurred while debating. Please try again."]);
       }

islands/DebateForm.tsx

@@ -28,11 +28,11 @@ export default function DebateForm() {
   } = useDebateState();
 
   const {
-  isPlaying,
-  isLoading: isAudioLoading,
-  isSynthesizingAudio,
-  handlePlayPause,
-} = useAudioControls(debate, agentDetails);
+    isPlaying,
+    isLoading: isAudioLoading,
+    isSynthesizingAudio,
+    handlePlayPause,
+  } = useAudioControls(debate, agentDetails);
 
   return (
     <div>