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 } from '../icons';
+import { PauseIconWithSurroundPulse, microphoneIcon, cameraIcon, stopCamIcon, pauseIcon } 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: aiVolume } = useLiveAPIContext();
+  const { client, connected, connect, volume } = useLiveAPIContext();
   const audioRecorderRef = useRef<AudioRecorder | null>(null);
   const [activeLocalVideoStream, setActiveLocalVideoStream] = useState<MediaStream | null>(null);
   const [isSwitchingCamera, setIsSwitchingCamera] = useState(false);
@@ -32,43 +32,37 @@ const ControlTray: React.FC<ControlTrayProps> = ({ videoRef, onVideoStreamChange
 
   useEffect(() => {
     if (!audioRecorderRef.current) {
-      audioRecorderRef.current = new AudioRecorder();
+        audioRecorderRef.current = new AudioRecorder();
     }
     const audioRecorder = audioRecorderRef.current;
-
-    const handleData = (base64: string) => {
+    
+    // --- 👇 تغییر اصلی اینجاست: دریافت ولوم از رویداد data 👇 ---
+    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 handleVolume = (volume: number) => {
-      setUserVolume(volume);
-      onUserSpeakingChange(volume > 0.01);
-    };
-
-    const handleStop = () => {
-      setUserVolume(0);
-      onUserSpeakingChange(false);
-    };
+    const onStop = () => {
+        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();
+    if (connected && isAppMicActive) {
+      audioRecorder.on("data", onData).on("stop", onStop).start();
+    } else {
+      if (audioRecorder.recording) audioRecorder.stop();
     }
-    
     return () => {
-      audioRecorder.off('data', handleData);
-      audioRecorder.off('volume', handleVolume);
-      audioRecorder.off('stop', handleStop);
+        if (audioRecorder) {
+          audioRecorder.off("data", onData).off("stop", onStop);
+          if (audioRecorder.recording) audioRecorder.stop();
+        }
     };
-  }, [isAppMicActive, connected, client, onUserSpeakingChange]);
+  }, [connected, client, isAppMicActive, onUserSpeakingChange]);
   
-  // ... (بقیه useEffect ها و توابع بدون تغییر باقی می‌مانند)
   useEffect(() => {
     if (videoRef.current) {
       if (videoRef.current.srcObject !== activeLocalVideoStream) {
@@ -199,10 +193,13 @@ 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} />
       <div id="mic-button" className="control-button mic-button-color" onClick={handleMicToggle}>
+        {/* استفاده از آیکون جدید با انیمیشن */}
         {isAppMicActive ? <PauseIconWithSurroundPulse userVolume={userVolume} /> : microphoneIcon}
       </div>
       
@@ -212,8 +209,8 @@ const ControlTray: React.FC<ControlTrayProps> = ({ videoRef, onVideoStreamChange
                 isMini={true} 
                 isActive={true} 
                 isAi={false}
-                speakingVolume={aiVolume}
-                isUserSpeaking={userVolume > 0.01}
+                speakingVolume={volume}
+                isUserSpeaking={isSpeaking}
             />
         </div>
       )}