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

src/components/control-tray/ControlTray.tsx

@@ -5,7 +5,7 @@ import React, { memo, RefObject, useEffect, useState, useCallback, useRef } from
 import { useLiveAPIContext } from "../../contexts/LiveAPIContext";
 import { AudioRecorder } from "../../lib/audio-recorder";
 import Logo from '../logo/Logo';
-import { PauseIconWithSurroundPulse, microphoneIcon, cameraIcon, stopCamIcon, pauseIcon } from '../icons';
+import { PauseIconWithSurroundPulse, 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>;
 
@@ -23,7 +23,7 @@ export type ControlTrayProps = {
 };
 
 const ControlTray: React.FC<ControlTrayProps> = ({ videoRef, onVideoStreamChange, supportsVideo, isAppMicActive, onAppMicToggle, isAppCamActive, onAppCamToggle, currentFacingMode, onFacingModeChange, onUserSpeakingChange }) => {
-  const { client, connected, connect, volume } = useLiveAPIContext();
+  const { client, connected, connect, volume: aiVolume } = useLiveAPIContext();
   const audioRecorderRef = useRef<AudioRecorder | null>(null);
   const [activeLocalVideoStream, setActiveLocalVideoStream] = useState<MediaStream | null>(null);
   const [isSwitchingCamera, setIsSwitchingCamera] = useState(false);
@@ -32,35 +32,43 @@ const ControlTray: React.FC<ControlTrayProps> = ({ videoRef, onVideoStreamChange
 
   useEffect(() => {
     if (!audioRecorderRef.current) {
-        audioRecorderRef.current = new AudioRecorder();
+      audioRecorderRef.current = new AudioRecorder();
     }
     const audioRecorder = audioRecorderRef.current;
-    
-    const onData = (base64: string, volume: number) => {
+
+    const handleData = (base64: string) => {
       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);
-    }
+    
+    const handleVolume = (volume: number) => {
+      setUserVolume(volume);
+      onUserSpeakingChange(volume > 0.01);
+    };
 
-    if (connected && isAppMicActive) {
-      audioRecorder.on("data", onData).on("stop", onStop).start();
-    } else {
-      if (audioRecorder.recording) audioRecorder.stop();
+    const handleStop = () => {
+      setUserVolume(0);
+      onUserSpeakingChange(false);
+    };
+
+    if (isAppMicActive && !audioRecorder.recording) {
+      audioRecorder.on('data', handleData);
+      audioRecorder.on('volume', handleVolume);
+      audioRecorder.on('stop', handleStop);
+      audioRecorder.start();
+    } else if (!isAppMicActive && audioRecorder.recording) {
+      audioRecorder.stop();
     }
+    
     return () => {
-        if (audioRecorder) {
-          audioRecorder.off("data", onData).off("stop", onStop);
-          if (audioRecorder.recording) audioRecorder.stop();
-        }
+      audioRecorder.off('data', handleData);
+      audioRecorder.off('volume', handleVolume);
+      audioRecorder.off('stop', handleStop);
     };
-  }, [connected, client, isAppMicActive, onUserSpeakingChange]);
+  }, [isAppMicActive, connected, client, onUserSpeakingChange]);
   
+  // ... (بقیه useEffect ها و توابع بدون تغییر باقی می‌مانند)
   useEffect(() => {
     if (videoRef.current) {
       if (videoRef.current.srcObject !== activeLocalVideoStream) {
@@ -191,8 +199,6 @@ const ControlTray: React.FC<ControlTrayProps> = ({ videoRef, onVideoStreamChange
     }
   };
   
-  const isSpeaking = onUserSpeakingChange.length > 0 && userVolume > 0.01;
-
   return (
     <footer id="footer-controls" className="footer-controls-html-like">
       <canvas style={{ display: "none" }} ref={renderCanvasRef} />
@@ -206,8 +212,8 @@ const ControlTray: React.FC<ControlTrayProps> = ({ videoRef, onVideoStreamChange
                 isMini={true} 
                 isActive={true} 
                 isAi={false}
-                speakingVolume={volume}
-                isUserSpeaking={isSpeaking}
+                speakingVolume={aiVolume}
+                isUserSpeaking={userVolume > 0.01}
             />
         </div>
       )}