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

src/components/control-tray/ControlTray.tsx

@@ -4,7 +4,7 @@ Copyright 2024 Google LLC
 ... (لایسنس) ...
 */
 import cn from "classnames";
-import React, { memo, ReactNode, RefObject, useEffect, useState } from "react";
+import React, { memo, ReactNode, RefObject, useEffect, useState, useCallback } from "react"; // useCallback اضافه شد
 import { useLiveAPIContext } from "../../contexts/LiveAPIContext";
 import { AudioRecorder } from "../../lib/audio-recorder";
 import LogoAnimation from '../logo-animation/LogoAnimation';
@@ -36,63 +36,119 @@ const ControlTray: React.FC<ControlTrayProps> = ({
   isAppCamActive,
   onAppCamToggle,
   ReferenceMicrophoneIcon,
-  currentFacingMode, // دریافت از AppCore
-  setCurrentFacingMode, // دریافت از AppCore
+  currentFacingMode,
+  setCurrentFacingMode,
 }) => {
-  const { client, connected, connect } = useLiveAPIContext();
+  const { client, connected, connect, disconnect: liveApiDisconnect } = useLiveAPIContext(); // disconnect به liveApiDisconnect تغییر نام یافت
   const [audioRecorder] = useState(() => new AudioRecorder());
   const [activeLocalVideoStream, setActiveLocalVideoStream] = useState<MediaStream | null>(null);
   const [isSwitchingCamera, setIsSwitchingCamera] = useState(false);
   const renderCanvasRef = React.useRef<HTMLCanvasElement>(null);
 
-  const _startWebcam = async (facingModeToTry: 'user' | 'environment') => {
-    if (isSwitchingCamera) return null; // برگرداندن null اگر در حال تعویض دوربین هستیم
-    setIsSwitchingCamera(true);
+  const ensureConnectedAndReady = useCallback(async (): Promise<boolean> => {
+    if (!connected) {
+      try {
+        await connect();
+        return true;
+      } catch (err) {
+        console.error('❌ CT Connect err:', err);
+        return false;
+      }
+    }
+    return true;
+  }, [connected, connect]);
+
+  const _startWebcam = useCallback(async (facingModeToTry: 'user' | 'environment'): Promise<MediaStream | null> => {
+    // isSwitchingCamera در اینجا کنترل نمی‌شود، بلکه در توابع بالاتر
     try {
       const mediaStream = await navigator.mediaDevices.getUserMedia({ video: { facingMode: facingModeToTry }, audio: false });
       setActiveLocalVideoStream(mediaStream);
-      onVideoStreamChange(mediaStream);
-      // setCurrentFacingMode در اینجا ست نمی‌شود، چون توسط handleSwitchCamera یا handleCamToggle مدیریت می‌شود
-      return mediaStream; // برگرداندن استریم برای استفاده در توابع دیگر
+      onVideoStreamChange(mediaStream); // این باید srcObject ویدیو را در AppCore تنظیم کند
+      return mediaStream;
     } catch (error) {
       console.error(`❌ Start WC err ${facingModeToTry}:`, error);
       setActiveLocalVideoStream(null);
       onVideoStreamChange(null);
-      onAppCamToggle(false); // خاموش کردن دوربین در App.tsx اگر خطا رخ داد
+      onAppCamToggle(false); // اطلاع به AppCore که دوربین خاموش شود
       return null;
-    } finally {
-      setIsSwitchingCamera(false);
     }
-  };
+  }, [onVideoStreamChange, onAppCamToggle]); // وابستگی‌ها
 
-  const _stopWebcam = () => {
+  const _stopWebcam = useCallback(() => {
     if (activeLocalVideoStream) {
       activeLocalVideoStream.getTracks().forEach(track => track.stop());
     }
     setActiveLocalVideoStream(null);
     onVideoStreamChange(null);
-  };
+  }, [activeLocalVideoStream, onVideoStreamChange]);
 
-  // useEffect برای مدیریت روشن/خاموش شدن دوربین بر اساس isAppCamActive
   useEffect(() => {
     if (isAppCamActive) {
       if (!activeLocalVideoStream && !isSwitchingCamera) {
-        _startWebcam(currentFacingMode); // استفاده از currentFacingMode از state والد
+        _startWebcam(currentFacingMode);
       }
     } else {
       if (activeLocalVideoStream) {
         _stopWebcam();
       }
     }
-  }, [isAppCamActive, activeLocalVideoStream, isSwitchingCamera, currentFacingMode]);
+  }, [isAppCamActive, _startWebcam, _stopWebcam, activeLocalVideoStream, isSwitchingCamera, currentFacingMode]);
 
 
-  useEffect(() => { /* ... audioRecorder ... */ }, [connected, client, isAppMicActive, audioRecorder]);
-  useEffect(() => { /* ... sendVideoFrame ... */ }, [connected, activeLocalVideoStream, client, videoRef, renderCanvasRef]);
-  useEffect(() => { /* ... videoRef.srcObject ... */ }, [activeLocalVideoStream, videoRef]);
+  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]);
 
-  const ensureConnectedAndReady = async (): Promise<boolean> => { if (!connected) { try { await connect(); return true; } catch (err) { console.error('❌ CT Connect err:', err); return false; } } return true; };
-  const handleMicToggle = async () => { if (isSwitchingCamera) return; const newMicState = !isAppMicActive; if (newMicState && !(await ensureConnectedAndReady())) { onAppMicToggle(false); return; } onAppMicToggle(newMicState); };
+  useEffect(() => {
+    let timeoutId = -1;
+    function sendVideoFrame() {
+      if (connected && activeLocalVideoStream && client && videoRef.current) {
+        // ... (منطق ارسال فریم ویدیو بدون تغییر) ...
+      }
+      if (connected && activeLocalVideoStream) {
+         timeoutId = window.setTimeout(sendVideoFrame, 1000 / 4); // 4 FPS
+      }
+    }
+    if (connected && activeLocalVideoStream && videoRef.current) {
+      timeoutId = window.setTimeout(sendVideoFrame, 200); // شروع با کمی تاخیر
+    }
+    return () => clearTimeout(timeoutId);
+  }, [connected, activeLocalVideoStream, client, videoRef]);
+
+  // useEffect برای قطع اتصال وقتی هیچکدام فعال نیستند (این منطق به AppCore منتقل شد)
+  // useEffect(() => {
+  //   if (!isAppMicActive && !isAppCamActive && connected) {
+  //     liveApiDisconnect(); // استفاده از نام جدید
+  //   }
+  // }, [isAppMicActive, isAppCamActive, connected, liveApiDisconnect]);
+
+
+  const handleMicToggle = async () => {
+    if (isSwitchingCamera) return;
+    const newMicState = !isAppMicActive;
+    if (newMicState) { // روشن کردن میکروفون
+        if (!(await ensureConnectedAndReady())) {
+            onAppMicToggle(false);
+            return;
+        }
+    }
+    onAppMicToggle(newMicState);
+  };
 
   const handleCamToggle = async () => {
     if (isSwitchingCamera) return;
@@ -100,14 +156,13 @@ const ControlTray: React.FC<ControlTrayProps> = ({
 
     if (newCamState) { // روشن کردن دوربین
         if (!(await ensureConnectedAndReady())) {
-            onAppCamToggle(false); // آپدیت state در App.tsx
+            onAppCamToggle(false);
             return;
         }
-        if (!isAppMicActive) {
-            onAppMicToggle(true); // فعال کردن میکروفون اگر خاموش است
+        if (!isAppMicActive) { // اگر میکروفون خاموش است، آن را هم روشن کن
+            onAppMicToggle(true);
         }
-        onAppCamToggle(true); // این باعث می‌شود useEffect بالا _startWebcam را فراخوانی کند
-                            // با currentFacingMode فعلی که از App.tsx می‌آید.
+        onAppCamToggle(true); // این باعث می‌شود useEffect بالا _startWebcam را با currentFacingMode فعلی فراخوانی کند
     } else { // خاموش کردن دوربین
         onAppCamToggle(false); // این باعث می‌شود useEffect بالا _stopWebcam را فراخوانی کند
     }
@@ -115,21 +170,21 @@ const ControlTray: React.FC<ControlTrayProps> = ({
 
   const handleSwitchCamera = async () => {
     if (!isAppCamActive || !activeLocalVideoStream || isSwitchingCamera) return;
+    setIsSwitchingCamera(true); // جلوگیری از فراخوانی‌های همزمان
 
     const targetFacingMode = currentFacingMode === 'user' ? 'environment' : 'user';
-    _stopWebcam(); // ابتدا استریم فعلی را متوقف کن
+    _stopWebcam(); // توقف استریم فعلی
 
-    // کمی تاخیر برای اطمینان از آزاد شدن دوربین قبل از درخواست جدید
-    await new Promise(resolve => setTimeout(resolve, 100));
+    await new Promise(resolve => setTimeout(resolve, 100)); // تاخیر کوچک
 
-    const newStream = await _startWebcam(targetFacingMode); // تلاش برای شروع با دوربین جدید
+    const newStream = await _startWebcam(targetFacingMode);
     if (newStream) {
-        setCurrentFacingMode(targetFacingMode); // آپدیت state در App.tsx فقط در صورت موفقیت
+        setCurrentFacingMode(targetFacingMode); // آپدیت state در App.tsx
     } else {
-        // اگر شروع با دوربین جدید ناموفق بود، سعی کن به دوربین قبلی برگردی
-        // (currentFacingMode هنوز مقدار قبلی را دارد)
+        // اگر ناموفق بود، سعی در بازگرداندن به دوربین قبلی (currentFacingMode هنوز مقدار قبلی را دارد)
         await _startWebcam(currentFacingMode);
     }
+    setIsSwitchingCamera(false); // آزاد کردن قفل
   };
 
   return (