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

src/components/control-tray/ControlTray.tsx

@@ -2,7 +2,7 @@
 
 import cn from "classnames";
 import React, { memo, RefObject, useEffect, useState, useCallback, useRef } from "react";
-import { useLiveAPIContext } from "../../contexts/LiveAPIContext";
+import { useAppContext } from "../../contexts/AppContext"; // <-- تغییر اصلی اینجاست
 import { AudioRecorder } from "../../lib/audio-recorder";
 import Logo from '../logo/Logo';
 import { PauseIconWithSurroundPulse, microphoneIcon, cameraIcon, stopCamIcon } from '../icons';
@@ -11,19 +11,17 @@ const SvgSwitchCameraIcon = () => <svg xmlns="http://www.w3.org/2000/svg" viewBo
 
 export type ControlTrayProps = {
   videoRef: RefObject<HTMLVideoElement>;
-  supportsVideo: boolean;
-  onVideoStreamChange: (stream: MediaStream | null) => void;
+  onUserSpeakingChange: (isSpeaking: boolean) => void;
   isAppMicActive: boolean;
   onAppMicToggle: (active: boolean) => void;
   isAppCamActive: boolean;
   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, onUserSpeakingChange }) => {
-  const { client, connected, connect, volume } = useLiveAPIContext();
+const ControlTray: React.FC<ControlTrayProps> = ({ videoRef, onUserSpeakingChange, isAppMicActive, onAppMicToggle, isAppCamActive, onAppCamToggle, currentFacingMode, onFacingModeChange }) => {
+  const { client, connected, connect, volume } = useAppContext(); // <-- تغییر اصلی اینجاست
   const audioRecorderRef = useRef<AudioRecorder | null>(null);
   const [activeLocalVideoStream, setActiveLocalVideoStream] = useState<MediaStream | null>(null);
   const [isSwitchingCamera, setIsSwitchingCamera] = useState(false);
@@ -58,7 +56,7 @@ const ControlTray: React.FC<ControlTrayProps> = ({ videoRef, onVideoStreamChange
         audioRecorder.start();
       }
     } else {
-      if (audioRecorder.recording) {
+      if (audioRecorder?.recording) {
         audioRecorder.stop();
       }
     }
@@ -80,12 +78,6 @@ const ControlTray: React.FC<ControlTrayProps> = ({ videoRef, onVideoStreamChange
     }
   }, [activeLocalVideoStream, videoRef]);
 
-  const stopWebcam = useCallback(() => {
-    if (activeLocalVideoStream) activeLocalVideoStream.getTracks().forEach(track => track.stop());
-    setActiveLocalVideoStream(null);
-    onVideoStreamChange(null);
-  }, [activeLocalVideoStream, onVideoStreamChange]);
-
   const startWebcam = useCallback(async (facingModeToTry: 'user' | 'environment') => {
     if (isSwitchingCamera) return;
     setIsSwitchingCamera(true);
@@ -93,25 +85,24 @@ const ControlTray: React.FC<ControlTrayProps> = ({ videoRef, onVideoStreamChange
     try {
       const mediaStream = await navigator.mediaDevices.getUserMedia({ video: { facingMode: facingModeToTry }, audio: false });
       setActiveLocalVideoStream(mediaStream);
-      onVideoStreamChange(mediaStream);
       onFacingModeChange(facingModeToTry);
     } catch (error) {
       console.error(`❌ Start WC err ${facingModeToTry}:`, error);
       setActiveLocalVideoStream(null);
-      onVideoStreamChange(null);
       onAppCamToggle(false);
     } finally {
       setIsSwitchingCamera(false);
     }
-  }, [isSwitchingCamera, activeLocalVideoStream, onVideoStreamChange, onFacingModeChange, onAppCamToggle]);
-  
+  }, [isSwitchingCamera, activeLocalVideoStream, onFacingModeChange, onAppCamToggle]);
+
   useEffect(() => {
     if (isAppCamActive && !activeLocalVideoStream && !isSwitchingCamera) {
       startWebcam(currentFacingMode);
     } else if (!isAppCamActive && activeLocalVideoStream) {
-      stopWebcam();
+      activeLocalVideoStream.getTracks().forEach(track => track.stop());
+      setActiveLocalVideoStream(null);
     }
-  }, [isAppCamActive, activeLocalVideoStream, isSwitchingCamera, startWebcam, stopWebcam, currentFacingMode]);
+  }, [isAppCamActive, activeLocalVideoStream, isSwitchingCamera, startWebcam, currentFacingMode]);
 
   useEffect(() => {
     let timeoutId = -1;
@@ -178,22 +169,18 @@ const ControlTray: React.FC<ControlTrayProps> = ({ videoRef, onVideoStreamChange
     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);
-      onVideoStreamChange(newStream);
       onFacingModeChange(targetFacingMode);
     } catch (error) {
       console.error(`❌ Switch Cam err to ${targetFacingMode}:`, error);
       try {
         const restoredStream = await navigator.mediaDevices.getUserMedia({ video: { facingMode: {exact: currentFacingMode } }, audio: false });
         setActiveLocalVideoStream(restoredStream);
-        onVideoStreamChange(restoredStream);
       } catch (restoreError) {
         console.error(`❌ Restore Cam err to ${currentFacingMode}:`, restoreError);
         setActiveLocalVideoStream(null);
-        onVideoStreamChange(null);
         onAppCamToggle(false);
       }
     } finally {
@@ -222,7 +209,7 @@ const ControlTray: React.FC<ControlTrayProps> = ({ videoRef, onVideoStreamChange
         </div>
       )}
 
-      <div id="cam-button-wrapper" className="control-button-wrapper cam-wrapper-html-like">
+      <div id="cam-button-wrapper" className="control-button-wrapper">
         <div id="cam-button" className="control-button cam-button-color" onClick={handleCamToggle}>
           {isAppCamActive ? stopCamIcon : cameraIcon}
         </div>