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

src/components/control-tray/ControlTray.tsx

@@ -3,7 +3,7 @@ Copyright 2024 Google LLC
 ... (لایسنس و توضیحات دیگر مثل قبل) ...
 */
 import cn from "classnames";
-import React, { memo, ReactNode, RefObject, useEffect, useRef, useState } from "react";
+import React, { memo, ReactNode, RefObject, useEffect, useState } from "react"; // removed useRef as renderCanvasRef is now passed if needed or handled differently
 import { useLiveAPIContext } from "../../contexts/LiveAPIContext";
 import { AudioRecorder } from "../../lib/audio-recorder";
 
@@ -26,7 +26,7 @@ export type ControlTrayProps = {
   createLogoFunction: (isMini: boolean, isActive: boolean, type?: 'human' | 'ai') => ReactNode;
 };
 
-function ControlTray({
+const ControlTray: React.FC<ControlTrayProps> = ({
   videoRef,
   onVideoStreamChange,
   supportsVideo,
@@ -35,15 +35,15 @@ function ControlTray({
   isAppCamActive,
   onAppCamToggle,
   createLogoFunction,
-}: ControlTrayProps) {
-  const { client, connected, connect, disconnect } = useLiveAPIContext();
+}) => {
+  const { client, connected, connect } = useLiveAPIContext(); // disconnect is handled in AppInternalLogic
   const [audioRecorder] = useState(() => new AudioRecorder());
   const [activeLocalVideoStream, setActiveLocalVideoStream] = useState<MediaStream | null>(null);
   const [currentFacingMode, setCurrentFacingMode] = useState<'user' | 'environment'>('user');
   const [isSwitchingCamera, setIsSwitchingCamera] = useState(false);
-  const renderCanvasRef = useRef<HTMLCanvasElement>(null);
+  const renderCanvasRef = React.useRef<HTMLCanvasElement>(null);
+
 
-  // Manage webcam based on app-level camera active state
   useEffect(() => {
     if (isAppCamActive && !activeLocalVideoStream && !isSwitchingCamera) {
       startWebcam();
@@ -53,7 +53,6 @@ function ControlTray({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isAppCamActive]);
 
-  // Audio Recorder Logic
   useEffect(() => {
     const onData = (base64: string) => {
       if (client && connected && isAppMicActive) {
@@ -61,7 +60,7 @@ function ControlTray({
       }
     };
     if (connected && isAppMicActive && audioRecorder) {
-      audioRecorder.on("data", onData).start(); // Removed .on("volume", setInVolume) if not used
+      audioRecorder.on("data", onData).start();
     } else if (audioRecorder && audioRecorder.recording) {
       audioRecorder.stop();
     }
@@ -73,11 +72,9 @@ function ControlTray({
     };
   }, [connected, client, isAppMicActive, audioRecorder]);
 
-  // Send Video Frame Logic
   useEffect(() => {
     let timeoutId = -1;
     function sendVideoFrame() {
-      // ... (مثل قبل، با فرکانس 4FPS و scale 0.5) ...
       if (connected && activeLocalVideoStream && client && videoRef.current) {
         const video = videoRef.current;
         const canvas = renderCanvasRef.current;
@@ -96,7 +93,6 @@ function ControlTray({
             const base64 = canvas.toDataURL("image/jpeg", 0.8);
             const data = base64.slice(base64.indexOf(",") + 1);
             if (data) {
-              // console.log(`🖼️ Sending video frame`);
               client.sendRealtimeInput([{ mimeType: "image/jpeg", data }]);
             }
           }
@@ -115,7 +111,6 @@ function ControlTray({
   }, [connected, activeLocalVideoStream, client, videoRef, renderCanvasRef]);
 
 
-  // Assign stream to video element
   useEffect(() => {
     if (videoRef.current) {
       if (videoRef.current.srcObject !== activeLocalVideoStream) {
@@ -130,9 +125,7 @@ function ControlTray({
   const ensureConnectedAndReady = async (): Promise<boolean> => {
     if (!connected) {
       try {
-        console.log("ControlTray: Not connected. Attempting to connect...");
         await connect();
-        console.log("ControlTray: Connection successful.");
         return true;
       } catch (err) {
         console.error('❌ ControlTray: Connection error:', err);
@@ -146,21 +139,18 @@ function ControlTray({
     if (isSwitchingCamera) return;
     const newMicState = !isAppMicActive;
 
-    if (newMicState) { // Turning mic ON
+    if (newMicState) {
       if (!(await ensureConnectedAndReady())) {
-        onAppMicToggle(false); // Keep mic state off if connection fails
+        onAppMicToggle(false);
         return;
       }
     }
     onAppMicToggle(newMicState);
-    console.log(`ControlTray: Mic toggled to ${newMicState}`);
   };
 
   const startWebcam = async (facingModeToTry: 'user' | 'environment' = currentFacingMode) => {
     if (isSwitchingCamera) return;
     setIsSwitchingCamera(true);
-
-    // ensureConnectedAndReady is now called by handleCamToggle before this
     try {
       const mediaStream = await navigator.mediaDevices.getUserMedia({
         video: { facingMode: facingModeToTry },
@@ -169,12 +159,11 @@ function ControlTray({
       setActiveLocalVideoStream(mediaStream);
       onVideoStreamChange(mediaStream); 
       setCurrentFacingMode(facingModeToTry);
-      console.log(`ControlTray: Webcam started with ${facingModeToTry}`);
     } catch (error) {
-      console.error(`❌ ControlTray: Error starting webcam with ${facingModeToTry}:`, error);
+      console.error(`❌ Error starting webcam with ${facingModeToTry}:`, error);
       setActiveLocalVideoStream(null);
       onVideoStreamChange(null);
-      onAppCamToggle(false); // Signal App to turn off cam state if start fails
+      onAppCamToggle(false);
     } finally {
       setIsSwitchingCamera(false);
     }
@@ -186,40 +175,31 @@ function ControlTray({
     }
     setActiveLocalVideoStream(null);
     onVideoStreamChange(null);
-    console.log("ControlTray: Webcam stopped.");
   };
 
   const handleCamToggle = async () => {
     if (isSwitchingCamera) return;
     const newCamState = !isAppCamActive;
 
-    if (newCamState) { // Turning camera ON
+    if (newCamState) {
       if (!(await ensureConnectedAndReady())) {
-        onAppCamToggle(false); // Keep cam state off if connection fails
+        onAppCamToggle(false);
         return;
       }
-      // If mic is not already active, activate it as well
       if (!isAppMicActive) {
-        onAppMicToggle(true); // This will trigger AudioRecorder via useEffect
-        console.log("ControlTray: Mic also activated with camera.");
+        onAppMicToggle(true);
       }
-      onAppCamToggle(true); // This will trigger startWebcam via useEffect
-    } else { // Turning camera OFF
-      onAppCamToggle(false); // This will trigger stopWebcam via useEffect
-      // The disconnect logic if both are off is now in App.tsx's AppLogic
+      onAppCamToggle(true);
+    } else {
+      onAppCamToggle(false);
     }
-    console.log(`ControlTray: Camera toggled to ${newCamState}`);
   };
 
   const handleSwitchCamera = async () => {
-    // ... (منطق تعویض دوربین مثل قبل، اما مطمئن شوید که isAppCamActive را به درستی مدیریت می‌کند) ...
     if (!isAppCamActive || !activeLocalVideoStream || isSwitchingCamera) return;
-    
     setIsSwitchingCamera(true);
     const targetFacingMode = currentFacingMode === 'user' ? 'environment' : 'user';
-    
     activeLocalVideoStream.getTracks().forEach(track => track.stop());
-
     try {
       const newStream = await navigator.mediaDevices.getUserMedia({
         video: { facingMode: { exact: targetFacingMode } },
@@ -244,29 +224,43 @@ function ControlTray({
       setIsSwitchingCamera(false);
     }
   };
+  
+  // کلاس‌های footer-controls از HTML مرجع برای موقعیت‌یابی و چیدمان
+  const footerClasses = cn(
+    "footer-controls w-full flex gap-4 absolute bottom-0 p-8 items-center z-50", // Tailwind: md:p-12
+    {
+      "layout-default justify-between": !isAppCamActive, // justify-between از HTML
+      "layout-with-small-logo justify-around": isAppCamActive, // justify-around از HTML
+    }
+  );
 
   return (
-    <footer id="footer-controls" className={cn("footer-controls fixed bottom-0 left-1/2 transform -translate-x-1/2 z-50", {
-        'layout-default': !isAppCamActive,
-        'layout-with-small-logo': isAppCamActive
-    })}>
+    <footer id="footer-controls" className={footerClasses}>
       <canvas style={{ display: "none" }} ref={renderCanvasRef} />
       
+      {/* Cam Button Wrapper (Now on the Left) */}
       <div id="cam-button-wrapper" className="relative flex justify-center">
         <button
           id="cam-button"
-          className="control-button cam-button-color"
+          className="control-button cam-button-color" // کلاس‌های HTML مرجع
           onClick={handleCamToggle}
           disabled={isSwitchingCamera || !supportsVideo}
           title={isAppCamActive ? "Stop Camera & Mic (if not used)" : "Start Camera & Mic"}
         >
           {isAppCamActive ? <SvgStopCamIcon /> : <SvgCameraIcon />}
         </button>
-        <div id="switch-camera-button-container" className={cn("switch-camera-button-container", { 'visible': isAppCamActive && !isSwitchingCamera })}>
+        {/* Switch Camera Button - نمایش فقط وقتی دوربین فعال است */}
+        <div
+          id="switch-camera-button-container"
+          className={cn(
+            "switch-camera-button-container", // کلاس‌های HTML مرجع
+            { visible: isAppCamActive && !isSwitchingCamera }
+          )}
+        >
           <button
             id="switch-camera-button"
             aria-label="Switch Camera"
-            className="switch-camera-button-content group"
+            className="switch-camera-button-content group" // کلاس‌های HTML مرجع
             onClick={handleSwitchCamera}
             disabled={!isAppCamActive || isSwitchingCamera}
           >
@@ -275,15 +269,17 @@ function ControlTray({
         </div>
       </div>
 
+      {/* Small Logo Container (Center, if cam active) */}
       {isAppCamActive && (
-        <div id="small-logo-container" className="flex items-center justify-center">
+        <div id="small-logo-container" className="flex items-center justify-center"> {/* کلاس HTML مرجع */}
             {createLogoFunction(true, isAppCamActive, 'human')}
         </div>
       )}
 
+      {/* Mic Button (Now on the Right) */}
       <button
         id="mic-button"
-        className="control-button mic-button-color"
+        className="control-button mic-button-color" // کلاس‌های HTML مرجع
         onClick={handleMicToggle}
         disabled={isSwitchingCamera} 
         title={isAppMicActive ? "Mute Microphone" : "Unmute Microphone"}
@@ -292,6 +288,6 @@ function ControlTray({
       </button>
     </footer>
   );
-}
+};
 
 export default memo(ControlTray);