integrate voiceToVoice websocket

src/pages/voiceToVoice/index.tsx

@@ -1,15 +1,71 @@
-import { Box, Button } from "@mui/material";
-import React, { useState } from "react";
+import { Box, Button, CircularProgress, Snackbar, Alert } from "@mui/material";
+import React, { useState, useEffect, useRef } from "react";
+
+import { useBeep } from "../../hooks/useBeep";
+import { useTimer } from "../../hooks/useTimer";
+import { useWebRTC } from "../../hooks/useWebRTC";
 
 const gifSrc = new URL("./assets/animation.gif", import.meta.url).href;
 const imgSrc = new URL("./assets/img.png", import.meta.url).href;
 
 const VoiceToVoice: React.FC = () => {
-  const [listening, setIsListening] = useState<boolean>(false);
+  const { startCall, endCall, remoteStream, isConnected, error } = useWebRTC();
+  const { timer, startTimer, stopTimer } = useTimer();
+  const { startBeeping, stopBeeping } = useBeep();
+  const [listening, setListening] = useState<boolean>(false);
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+  const [showError, setShowError] = useState<boolean>(false);
+  const audioRef = useRef<HTMLAudioElement>(null);
+
+  useEffect(() => {
+    if (audioRef.current && remoteStream) {
+      audioRef.current.srcObject = remoteStream;
+      audioRef.current.play().catch(() => setShowError(true));
+    }
+  }, [remoteStream]);
+
+  const handleClick = async () => {
+    if (listening) {
+      setIsLoading(true);
+      try {
+        endCall();
+        stopTimer();
+        stopBeeping();
+        setListening(false);
+      } finally {
+        setIsLoading(false);
+      }
+    } else {
+      setIsLoading(true);
+      setListening(true);
+      startBeeping();
+      try {
+        await startCall();
+        stopBeeping();
+        startTimer();
+      } catch {
+        stopBeeping();
+        stopTimer();
+        setListening(false);
+        endCall();
+        setShowError(true);
+      } finally {
+        setIsLoading(false);
+      }
+    }
+  };
 
-  function handleClick() {
-    setIsListening((prevState) => !prevState);
-  }
+  useEffect(() => {
+    setListening(isConnected);
+  }, [isConnected]);
+
+  useEffect(() => {
+    if (!isConnected && listening) {
+      setListening(false);
+      stopTimer();
+      stopBeeping();
+    }
+  }, [isConnected, listening, stopTimer, stopBeeping]);
 
   return (
     <Box
@@ -20,40 +76,104 @@ const VoiceToVoice: React.FC = () => {
         justifyContent: "center",
         height: "100vh",
         width: "100vw",
+        bgcolor: "#f5f5f5",
       }}
     >
+      <audio ref={audioRef} autoPlay playsInline style={{ display: "none" }} />
+
       <Box
         sx={{
-          width: "200px",
+          width: "280px",
+          padding: "20px",
+          backgroundColor: "white",
+          borderRadius: "12px",
+          boxShadow: "0 4px 6px rgba(0, 0, 0, 0.1)",
           display: "flex",
           flexDirection: "column",
           alignItems: "center",
         }}
       >
-        <Box sx={{ mb: "10px" }}>
+        <Box
+          sx={{
+            mb: "20px",
+            position: "relative",
+            width: "200px",
+            height: "200px",
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
+          }}
+        >
+          {isLoading ? (
+            <CircularProgress
+              size={60}
+              sx={{
+                position: "absolute",
+                color: listening ? "rgb(218, 176, 176)" : "rgb(126, 184, 203)",
+              }}
+            />
+          ) : null}
           {listening ? (
-            <img src={gifSrc} alt="Listening animation" width={200} height={200} />
+            <img
+              src={gifSrc}
+              alt="Listening animation"
+              width={200}
+              height={200}
+              style={{
+                opacity: isLoading ? 0.5 : 1,
+                transition: "opacity 0.3s ease",
+              }}
+            />
           ) : (
-            <img src={imgSrc} alt="Static image" width={200} />
+            <img
+              src={imgSrc}
+              alt="Static image"
+              width={200}
+              style={{
+                opacity: isLoading ? 0.5 : 1,
+                transition: "opacity 0.3s ease",
+              }}
+            />
           )}
         </Box>
+
         <Button
           onClick={handleClick}
           variant="contained"
+          disabled={isLoading}
           sx={{
             width: "100%",
-            height: "30px",
-            borderRadius: "5%",
+            height: "40px",
+            borderRadius: "20px",
             backgroundColor: listening ? "rgb(218, 176, 176)" : "rgb(126, 184, 203)",
+            fontWeight: "bold",
+            letterSpacing: "1px",
             "&:hover": {
-              backgroundColor: "rgb(199, 206, 208)",
-              transition: "background-color 0.3s ease",
+              backgroundColor: listening ? "rgb(198, 156, 156)" : "rgb(106, 164, 183)",
+              transform: "translateY(-1px)",
+              boxShadow: "0 4px 8px rgba(0, 0, 0, 0.2)",
+            },
+            transition: "all 0.3s ease",
+            "&:disabled": {
+              backgroundColor: "rgba(0, 0, 0, 0.12)",
+              color: "rgba(0, 0, 0, 0.26)",
             },
           }}
         >
-          {listening ? "STOP" : "SPEAK"}
+          {isLoading ? "Processing..." : listening ? `STOP (${timer})` : "SPEAK"}
         </Button>
       </Box>
+
+      <Snackbar
+        open={showError}
+        autoHideDuration={6000}
+        onClose={() => setShowError(false)}
+        anchorOrigin={{ vertical: "bottom", horizontal: "center" }}
+      >
+        <Alert onClose={() => setShowError(false)} severity="error" sx={{ width: "100%" }}>
+          {error || "An error occurred. Please try again."}
+        </Alert>
+      </Snackbar>
     </Box>
   );
 };