Implement raise hand

client/src/components/AudioOutput.jsx

@@ -1,10 +1,14 @@
 import React, { useEffect, useRef } from "react";
 
-function AudioOutput({ currentAudioMessage, onFinishedPlaying }) {
+function AudioOutput({ currentAudioMessage, onFinishedPlaying, stopAudio }) {
   const audioRef = useRef(null);
   const urlRef = useRef(null);
   const checkPlaybackIntervalRef = useRef(null);
 
+  useEffect(() => {
+    audioRef.current && audioRef.current.pause();
+  }, [stopAudio]);
+
   useEffect(() => {
     // Initialize the audio element if it does not exist
     if (!audioRef.current) {

client/src/components/ConversationControls.jsx

@@ -6,11 +6,14 @@ function ConversationControls({
   onSkipForward,
   onRaiseHandOrNevermind,
   isRaisedHand,
+  humanInterjection,
 }) {
   return (
     <div style={{ pointerEvents: "auto" }}>
-      <button onClick={onPauseResume}>{isPaused ? "Resume" : "Pause"}</button>
-      <button onClick={onSkipForward}>Skip forward</button>
+      {/* <button onClick={onPauseResume}>{isPaused ? "Resume" : "Pause"}</button> */}
+      {!humanInterjection && (
+        <button onClick={onSkipForward}>Skip forward</button>
+      )}
       <button onClick={onRaiseHandOrNevermind}>
         {isRaisedHand ? "Nevermind" : "Raise hand"}
       </button>

client/src/components/Council.jsx

@@ -18,6 +18,8 @@ function Council({ options }) {
   const [audioMessages, setAudioMessages] = useState([]); // To store multiple ArrayBuffers
   const [isReady, setIsReady] = useState(false);
   const [isRaisedHand, setIsRaisedHand] = useState(false);
+  const [humanInterjection, setHumanInterjection] = useState(false);
+  const [skipForward, setSkipForward] = useState(false);
 
   const socketRef = useRef(null); // Using useRef to persist socket instance
 
@@ -71,11 +73,18 @@ function Council({ options }) {
     setIsReady(true);
   }
 
+  function handleOnSkipForward() {
+    setSkipForward(!skipForward);
+  }
+
   function handleOnRaiseHandOrNevermind() {
-    console.log("Setting isRaisedHand...");
     setIsRaisedHand((prev) => !prev);
   }
 
+  function handleOnHumanInterjection(value) {
+    setHumanInterjection(value);
+  }
+
   function displayResetWarning() {
     setActiveOverlay("reset");
   }
@@ -96,17 +105,23 @@ function Council({ options }) {
           className="text-container"
           style={{ justifyContent: "end" }}
         >
+          {humanInterjection && <HumanInput />}
           <Output
             textMessages={textMessages}
             audioMessages={audioMessages}
             isActiveOverlay={activeOverlay !== ""}
             isRaisedHand={isRaisedHand}
             onIsReady={handleOnIsReady}
+            onHumanInterjection={handleOnHumanInterjection}
+            humanInterjection={humanInterjection}
+            skipForward={skipForward}
           />
           {isReady && (
             <ConversationControls
+              onSkipForward={handleOnSkipForward}
               onRaiseHandOrNevermind={handleOnRaiseHandOrNevermind}
               isRaisedHand={isRaisedHand}
+              humanInterjection={humanInterjection}
             />
           )}
         </div>

client/src/components/HumanInput.jsx

@@ -2,11 +2,10 @@ import React from "react";
 
 function HumanInput() {
   return (
-    <div>
+    <div style={{ pointerEvents: "auto" }}>
       <textarea
         rows="2"
         placeholder="your input"
-        style={{ width: "80%" }}
       />
     </div>
   );

client/src/components/Output.jsx

@@ -8,17 +8,29 @@ function Output({
   isActiveOverlay,
   isRaisedHand,
   onIsReady,
+  onHumanInterjection,
+  humanInterjection,
+  skipForward,
 }) {
   const [currentMessageIndex, setCurrentMessageIndex] = useState(0);
   const [currentTextMessage, setCurrentTextMessage] = useState(null);
   const [currentAudioMessage, setCurrentAudioMessage] = useState(null);
+  const [stopAudio, setStopAudio] = useState(false);
 
-  // useEffect for raising hand or nevermind when a food is talking
+  useEffect(() => {
+    if (currentTextMessage && currentAudioMessage) {
+      console.log("Skipping forward");
+      proceedToNextMessage();
+    }
+  }, [skipForward]);
+
+  // useEffect for checking for raised hand when changing message index (inbetween food talking)
   useEffect(() => {
     if (!isRaisedHand) {
       tryFindTextAndAudio();
     } else {
-      console.log("Human interjection time!");
+      setStopAudio(!stopAudio);
+      onHumanInterjection(true);
     }
   }, [currentMessageIndex]);
 
@@ -29,6 +41,7 @@ function Output({
       currentTextMessage === null &&
       currentAudioMessage === null
     ) {
+      onHumanInterjection(false);
       tryFindTextAndAudio();
     }
   }, [isRaisedHand]);
@@ -37,10 +50,6 @@ function Output({
     tryFindTextAndAudio();
   }, [textMessages, audioMessages]);
 
-  useEffect(() => {
-    console.log("Hand raised: ", isRaisedHand);
-  }, [isRaisedHand]);
-
   function tryFindTextAndAudio() {
     const textMessage = textMessages[currentMessageIndex];
     const audioMessage = audioMessages.find(
@@ -62,21 +71,28 @@ function Output({
     }
   }
 
-  function handleOnFinishedPlaying() {
+  function proceedToNextMessage() {
     setCurrentTextMessage((prev) => null);
     setCurrentAudioMessage((prev) => null);
     setCurrentMessageIndex((prev) => prev + 1);
   }
 
+  function handleOnFinishedPlaying() {
+    proceedToNextMessage();
+  }
+
   return (
     <>
-      <TextOutput
-        currentTextMessage={currentTextMessage}
-        currentAudioMessage={currentAudioMessage}
-      />
+      {!humanInterjection && (
+        <TextOutput
+          currentTextMessage={currentTextMessage}
+          currentAudioMessage={currentAudioMessage}
+        />
+      )}
       <AudioOutput
         currentAudioMessage={currentAudioMessage}
         onFinishedPlaying={handleOnFinishedPlaying}
+        stopAudio={stopAudio}
       />
     </>
   );