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>;
 
@@ -30,39 +30,56 @@ const ControlTray: React.FC<ControlTrayProps> = ({ videoRef, onVideoStreamChange
   const renderCanvasRef = React.useRef<HTMLCanvasElement>(null);
   const [userVolume, setUserVolume] = useState(0);
 
+  // --- 👇 تغییر اصلی اینجاست 👇 ---
+  // Event-handler جدید برای دریافت هر دو مقدار
+  const handleAudioData = useCallback((base64: string, vol: number) => {
+    if (client && connected && isAppMicActive) {
+      // فقط دیتای صدا را به سرور بفرست
+      if (base64) {
+        client.sendRealtimeInput([{ mimeType: "audio/pcm;rate=16000", data: base64 }]);
+      }
+      // حجم صدا را برای انیمیشن‌ها آپدیت کن
+      setUserVolume(vol);
+      onUserSpeakingChange(vol > 0.01);
+    }
+  }, [client, connected, isAppMicActive, onUserSpeakingChange]);
+
   useEffect(() => {
     if (!audioRecorderRef.current) {
         audioRecorderRef.current = new AudioRecorder();
     }
     const audioRecorder = audioRecorderRef.current;
     
-    // --- 👇 تغییر اصلی اینجاست: دریافت ولوم از رویداد 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);
-      }
-    };
-    
+    // Event listener برای توقف ضبط
     const onStop = () => {
         setUserVolume(0);
         onUserSpeakingChange(false);
     }
 
-    if (connected && isAppMicActive) {
-      audioRecorder.on("data", onData).on("stop", onStop).start();
+    if (isAppMicActive && connected) {
+      // ثبت کردن event handlerها
+      audioRecorder.on("data", handleAudioData);
+      audioRecorder.on("stop", onStop);
+      if (!audioRecorder.recording) {
+        audioRecorder.start();
+      }
     } else {
-      if (audioRecorder.recording) audioRecorder.stop();
+      if (audioRecorder.recording) {
+        audioRecorder.stop();
+      }
     }
+    
+    // Cleanup function
     return () => {
         if (audioRecorder) {
-          audioRecorder.off("data", onData).off("stop", onStop);
-          if (audioRecorder.recording) audioRecorder.stop();
+          audioRecorder.off("data", handleAudioData);
+          audioRecorder.off("stop", onStop);
         }
     };
-  }, [connected, client, isAppMicActive, onUserSpeakingChange]);
+  }, [isAppMicActive, connected, handleAudioData, onUserSpeakingChange]);
   
+  // --- 👆 پایان تغییرات اصلی 👆 ---
+
   useEffect(() => {
     if (videoRef.current) {
       if (videoRef.current.srcObject !== activeLocalVideoStream) {
@@ -193,13 +210,12 @@ const ControlTray: React.FC<ControlTrayProps> = ({ videoRef, onVideoStreamChange
     }
   };
   
-  const isSpeaking = onUserSpeakingChange.length > 0 && userVolume > 0.01;
+  const isSpeaking = 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>