Update src/components/control-tray/ControlTray.tsx

src/components/control-tray/ControlTray.tsx

@@ -1,11 +1,10 @@
 // src/components/control-tray/ControlTray.tsx
 
 import cn from "classnames";
-import React, { memo, RefObject, useEffect, useState, useCallback } from "react";
+import React, { memo, RefObject, useEffect, useState, useCallback, useRef } from "react";
 import { useLiveAPIContext } from "../../contexts/LiveAPIContext";
 import { AudioRecorder } from "../../lib/audio-recorder";
-import Logo from '../logo/Logo';
-import { pauseIcon, microphoneIcon, cameraIcon, stopCamIcon } from '../icons';
+import { PauseIconWithPulse, microphoneIcon, cameraIcon, stopCamIcon } from '../icons';
 
 const SvgSwitchCameraIcon = () => <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="w-[22px] h-[22px]"><path d="M11 19H4a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2h5"/><path d="M13 5h7a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-5"/><path d="m17 12-3-3 3-3"/><path d="m7 12 3 3-3 3"/></svg>;
 
@@ -19,40 +18,59 @@ export type ControlTrayProps = {
   onAppCamToggle: (active: boolean) => void;
   currentFacingMode: 'user' | 'environment';
   onFacingModeChange: (mode: 'user' | 'environment') => void;
+  onUserSpeakingChange: (isSpeaking: boolean) => void;
 };
 
-const ControlTray: React.FC<ControlTrayProps> = ({
-  videoRef,
-  onVideoStreamChange,
-  supportsVideo,
-  isAppMicActive,
-  onAppMicToggle,
-  isAppCamActive,
-  onAppCamToggle,
-  currentFacingMode,
-  onFacingModeChange,
-}) => {
-  const { client, connected, connect, volume } = useLiveAPIContext();
-  const [audioRecorder] = useState(() => new AudioRecorder());
+const ControlTray: React.FC<ControlTrayProps> = ({ videoRef, onVideoStreamChange, supportsVideo, isAppMicActive, onAppMicToggle, isAppCamActive, onAppCamToggle, currentFacingMode, onFacingModeChange, onUserSpeakingChange }) => {
+  const { client, connected, connect } = useLiveAPIContext();
+  const audioRecorderRef = useRef<AudioRecorder | null>(null);
   const [activeLocalVideoStream, setActiveLocalVideoStream] = useState<MediaStream | null>(null);
   const [isSwitchingCamera, setIsSwitchingCamera] = useState(false);
   const renderCanvasRef = React.useRef<HTMLCanvasElement>(null);
+  const [userVolume, setUserVolume] = useState(0);
 
+  useEffect(() => {
+    if (!audioRecorderRef.current) {
+        audioRecorderRef.current = new AudioRecorder();
+    }
+    const audioRecorder = audioRecorderRef.current;
+    
+    const onData = (base64: string, volume: number) => {
+      if (client && connected && isAppMicActive) {
+        client.sendRealtimeInput([{ mimeType: "audio/pcm;rate=16000", data: base64 }]);
+        setUserVolume(volume);
+        onUserSpeakingChange(volume > 0.01);
+      }
+    };
+    const onStop = () => {
+        setUserVolume(0);
+        onUserSpeakingChange(false);
+    }
+
+    if (connected && isAppMicActive) {
+      audioRecorder.on("data", onData).on("stop", onStop).start();
+    } else {
+      if (audioRecorder.recording) audioRecorder.stop();
+    }
+    return () => {
+        if (audioRecorder) {
+          audioRecorder.off("data", onData).off("stop", onStop);
+          if (audioRecorder.recording) audioRecorder.stop();
+        }
+    };
+  }, [connected, client, isAppMicActive, onUserSpeakingChange]);
+  
   useEffect(() => {
     if (videoRef.current) {
       if (videoRef.current.srcObject !== activeLocalVideoStream) {
         videoRef.current.srcObject = activeLocalVideoStream;
-        if (activeLocalVideoStream) {
-          videoRef.current.play().catch(e => console.warn("Video play failed:", e));
-        }
+        if (activeLocalVideoStream) videoRef.current.play().catch(e => console.warn("Video play failed:", e));
       }
     }
   }, [activeLocalVideoStream, videoRef]);
 
   const stopWebcam = useCallback(() => {
-    if (activeLocalVideoStream) {
-      activeLocalVideoStream.getTracks().forEach(track => track.stop());
-    }
+    if (activeLocalVideoStream) activeLocalVideoStream.getTracks().forEach(track => track.stop());
     setActiveLocalVideoStream(null);
     onVideoStreamChange(null);
   }, [activeLocalVideoStream, onVideoStreamChange]);
@@ -60,11 +78,7 @@ const ControlTray: React.FC<ControlTrayProps> = ({
   const startWebcam = useCallback(async (facingModeToTry: 'user' | 'environment') => {
     if (isSwitchingCamera) return;
     setIsSwitchingCamera(true);
-
-    if (activeLocalVideoStream) {
-        activeLocalVideoStream.getTracks().forEach(track => track.stop());
-    }
-
+    if (activeLocalVideoStream) activeLocalVideoStream.getTracks().forEach(track => track.stop());
     try {
       const mediaStream = await navigator.mediaDevices.getUserMedia({ video: { facingMode: facingModeToTry }, audio: false });
       setActiveLocalVideoStream(mediaStream);
@@ -78,13 +92,7 @@ const ControlTray: React.FC<ControlTrayProps> = ({
     } finally {
       setIsSwitchingCamera(false);
     }
-  }, [
-    isSwitchingCamera,
-    activeLocalVideoStream,
-    onVideoStreamChange,
-    onFacingModeChange,
-    onAppCamToggle,
-  ]);
+  }, [isSwitchingCamera, activeLocalVideoStream, onVideoStreamChange, onFacingModeChange, onAppCamToggle]);
   
   useEffect(() => {
     if (isAppCamActive && !activeLocalVideoStream && !isSwitchingCamera) {
@@ -94,26 +102,6 @@ const ControlTray: React.FC<ControlTrayProps> = ({
     }
   }, [isAppCamActive, activeLocalVideoStream, isSwitchingCamera, startWebcam, stopWebcam, currentFacingMode]);
 
-
-  useEffect(() => {
-    const onData = (base64: string) => {
-      if (client && connected && isAppMicActive) {
-        client.sendRealtimeInput([{ mimeType: "audio/pcm;rate=16000", data: base64 }]);
-      }
-    };
-    if (connected && isAppMicActive && audioRecorder) {
-      audioRecorder.on("data", onData).start();
-    } else if (audioRecorder && audioRecorder.recording) {
-      audioRecorder.stop();
-    }
-    return () => {
-      if (audioRecorder) {
-        audioRecorder.off("data", onData);
-        if (audioRecorder.recording) audioRecorder.stop();
-      }
-    };
-  }, [connected, client, isAppMicActive, audioRecorder]);
-
   useEffect(() => {
     let timeoutId = -1;
     function sendVideoFrame() {
@@ -138,13 +126,9 @@ const ControlTray: React.FC<ControlTrayProps> = ({
           }
         } catch (error) { console.error("❌ Error frame:", error); }
       }
-      if (connected && activeLocalVideoStream) {
-         timeoutId = window.setTimeout(sendVideoFrame, 1000 / 4);
-      }
-    }
-    if (connected && activeLocalVideoStream && videoRef.current) {
-      timeoutId = window.setTimeout(sendVideoFrame, 200);
+      if (connected && activeLocalVideoStream) timeoutId = window.setTimeout(sendVideoFrame, 1000 / 4);
     }
+    if (connected && activeLocalVideoStream && videoRef.current) timeoutId = window.setTimeout(sendVideoFrame, 200);
     return () => clearTimeout(timeoutId);
   }, [connected, activeLocalVideoStream, client, videoRef, renderCanvasRef]);
 
@@ -168,15 +152,9 @@ const ControlTray: React.FC<ControlTrayProps> = ({
   const handleCamToggle = async () => {
     if (isSwitchingCamera) return;
     const newCamState = !isAppCamActive;
-
     if (newCamState) {
-        if (!(await ensureConnectedAndReady())) {
-            onAppCamToggle(false);
-            return;
-        }
-        if (!isAppMicActive) {
-            onAppMicToggle(true);
-        }
+        if (!(await ensureConnectedAndReady())) { onAppCamToggle(false); return; }
+        if (!isAppMicActive) onAppMicToggle(true);
         onAppCamToggle(true);
     } else {
         onAppCamToggle(false);
@@ -186,13 +164,10 @@ const ControlTray: React.FC<ControlTrayProps> = ({
   const handleSwitchCamera = async () => {
     if (!isAppCamActive || !activeLocalVideoStream || isSwitchingCamera) return;
     setIsSwitchingCamera(true);
-    
     const targetFacingMode = currentFacingMode === 'user' ? 'environment' : 'user';
-    
     activeLocalVideoStream.getTracks().forEach(track => track.stop());
     setActiveLocalVideoStream(null);
     onVideoStreamChange(null);
-
     try {
       const newStream = await navigator.mediaDevices.getUserMedia({ video: { facingMode: { exact: targetFacingMode } }, audio: false });
       setActiveLocalVideoStream(newStream);
@@ -201,7 +176,6 @@ const ControlTray: React.FC<ControlTrayProps> = ({
     } catch (error) {
       console.error(`❌ Switch Cam err to ${targetFacingMode}:`, error);
       try {
-        console.log(`Attempting to restore to ${currentFacingMode}`);
         const restoredStream = await navigator.mediaDevices.getUserMedia({ video: { facingMode: {exact: currentFacingMode } }, audio: false });
         setActiveLocalVideoStream(restoredStream);
         onVideoStreamChange(restoredStream);
@@ -219,50 +193,15 @@ const ControlTray: React.FC<ControlTrayProps> = ({
   return (
     <footer id="footer-controls" className="footer-controls-html-like">
       <canvas style={{ display: "none" }} ref={renderCanvasRef} />
-
-      <div
-        id="mic-button"
-        className="control-button mic-button-color"
-        onClick={handleMicToggle}
-      >
-        {isAppMicActive ? pauseIcon : microphoneIcon}
+      <div id="mic-button" className="control-button mic-button-color" onClick={handleMicToggle}>
+        {isAppMicActive ? <PauseIconWithPulse userVolume={userVolume} /> : microphoneIcon}
       </div>
-
-      {(isAppMicActive || isAppCamActive) && (
-        <div 
-          id="small-logo-footer-container" 
-          className={cn("small-logo-footer-html-like", {
-            'user-is-speaking-pulse': isAppMicActive,
-          })}
-        >
-            <Logo 
-                isMini={true} 
-                isActive={true} 
-                isAi={false}
-                speakingVolume={volume}
-            />
-        </div>
-      )}
-
       <div id="cam-button-wrapper" className="control-button-wrapper cam-wrapper-html-like">
-        <div
-          id="cam-button"
-          className="control-button cam-button-color"
-          onClick={handleCamToggle}
-        >
+        <div id="cam-button" className="control-button cam-button-color" onClick={handleCamToggle}>
           {isAppCamActive ? stopCamIcon : cameraIcon}
         </div>
-        <div
-          id="switch-camera-button-container"
-          className={cn("switch-camera-button-container", { visible: isAppCamActive && !isSwitchingCamera })}
-        >
-          <button
-            id="switch-camera-button"
-            aria-label="Switch Camera"
-            className="switch-camera-button-content group"
-            onClick={handleSwitchCamera}
-            disabled={!isAppCamActive || isSwitchingCamera}
-          >
+        <div id="switch-camera-button-container" className={cn("switch-camera-button-container", { visible: isAppCamActive && !isSwitchingCamera })}>
+          <button id="switch-camera-button" aria-label="Switch Camera" className="switch-camera-button-content group" onClick={handleSwitchCamera} disabled={!isAppCamActive || isSwitchingCamera}>
             <SvgSwitchCameraIcon/>
           </button>
         </div>