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

src/components/control-tray/ControlTray.tsx

@@ -1,4 +1,4 @@
-// ... (ایمپورت‌ها و SVGهای دیگر مثل قبل) ...
+// ... (ایمپورت‌ها و SVGهای آیکون‌ها مثل قبل) ...
 import cn from "classnames";
 import React, { memo, ReactNode, RefObject, useEffect, useState } from "react";
 import { useLiveAPIContext } from "../../contexts/LiveAPIContext";
@@ -9,7 +9,8 @@ const SvgCameraIcon = () => <svg width="40" height="40" viewBox="0 0 40 40" fill
 const SvgStopCamIcon = () => <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg"><path opacity="0.4" d="M29.0785 10.8076L6.91966 32.9665C4.61316 31.5002 3.70703 28.8807 3.70703 26.36V13.18C3.70703 7.54555 5.89821 5.35437 11.5327 5.35437H21.4177C26.1789 5.35437 28.4854 6.9195 29.0785 10.8076Z" fill="#2252A0"/><path opacity="0.4" d="M29.2427 15.2394V26.36C29.2427 26.4918 29.2262 26.5907 29.2262 26.706C29.2262 26.8213 29.2097 26.9366 29.2097 27.052H29.2262C29.045 32.1757 26.8208 34.1856 21.417 34.1856H11.532C11.1202 34.1856 10.7412 34.1692 10.3623 34.1197L29.2427 15.2394Z" fill="#2252A0"/><path opacity="0.4" d="M29.21 27.052C29.21 26.9366 29.2264 26.8213 29.2264 26.706C29.2429 26.8213 29.2429 26.9366 29.2264 27.052H29.21Z" fill="#2252A0"/><path opacity="0.4" d="M29.2264 12.4716C29.2429 12.5869 29.2429 12.7187 29.2264 12.834C29.2264 12.7187 29.21 12.6034 29.21 12.488L29.2264 12.4716Z" fill="#2252A0"/><path d="M37.4804 13.8061V25.734C37.4804 28.0899 36.3436 29.029 35.6682 29.3749C35.3551 29.5397 34.8774 29.7209 34.2678 29.7209C33.5594 29.7209 32.6697 29.4903 31.6483 28.7654L29.2264 27.052H29.21C29.21 26.9366 29.2264 26.8213 29.2264 26.706C29.2264 26.5907 29.2429 26.4918 29.2429 26.36V15.2394L34.6302 9.85205C35.0751 9.885 35.421 10.0168 35.6682 10.1651C36.3436 10.5111 37.4804 11.4501 37.4804 13.8061Z" fill="#2252A0"/><path d="M35.8666 3.67393C35.3723 3.17968 34.565 3.17968 34.0708 3.67393L3.6744 34.0868C3.18015 34.581 3.18015 35.3883 3.6744 35.8826C3.92152 36.1132 4.23455 36.245 4.56405 36.245C4.89355 36.245 5.20657 36.1132 5.4537 35.8661L35.8666 5.45323C36.3773 4.95898 36.3773 4.16818 35.8666 3.67393Z" fill="#2252A0"/></svg>;
 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>;
 
-export type ControlTrayProps = {
+
+export type ControlTrayProps = { /* ... (props بدون تغییر) ... */ 
   videoRef: RefObject<HTMLVideoElement>;
   supportsVideo: boolean;
   onVideoStreamChange: (stream: MediaStream | null) => void;
@@ -21,8 +22,7 @@ export type ControlTrayProps = {
   ReferenceMicrophoneIcon: () => JSX.Element;
 };
 
-const ControlTray: React.FC<ControlTrayProps> = ({
-  // ... (props و state ها بدون تغییر) ...
+const ControlTray: React.FC<ControlTrayProps> = ({ /* ... (props بدون تغییر) ... */ 
   videoRef,
   onVideoStreamChange,
   supportsVideo,
@@ -33,6 +33,7 @@ const ControlTray: React.FC<ControlTrayProps> = ({
   createLogoFunction,
   ReferenceMicrophoneIcon,
 }) => {
+  // ... (state ها و useEffect ها و توابع handle بدون تغییر) ...
   const { client, connected, connect } = useLiveAPIContext();
   const [audioRecorder] = useState(() => new AudioRecorder());
   const [activeLocalVideoStream, setActiveLocalVideoStream] = useState<MediaStream | null>(null);
@@ -40,191 +41,51 @@ const ControlTray: React.FC<ControlTrayProps> = ({
   const [isSwitchingCamera, setIsSwitchingCamera] = useState(false);
   const renderCanvasRef = React.useRef<HTMLCanvasElement>(null);
 
-  // ... (useEffect ها و توابع handle بدون تغییر) ...
-  useEffect(() => {
-    if (isAppCamActive && !activeLocalVideoStream && !isSwitchingCamera) {
-      startWebcam();
-    } else if (!isAppCamActive && activeLocalVideoStream) {
-      stopWebcam();
-    }
-  }, [isAppCamActive, activeLocalVideoStream, isSwitchingCamera]);
-
-  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]);
-
-  useEffect(() => {
-    let timeoutId = -1;
-    function sendVideoFrame() {
-      if (connected && activeLocalVideoStream && client && videoRef.current) {
-        const video = videoRef.current;
-        const canvas = renderCanvasRef.current;
-        if (!canvas || video.readyState < video.HAVE_METADATA || video.paused || video.ended) {
-          if (activeLocalVideoStream) timeoutId = window.setTimeout(sendVideoFrame, 1000 / 4);
-          return;
-        }
-        try {
-          const ctx = canvas.getContext("2d");
-          if (!ctx) return;
-          const scale = 0.5;
-          canvas.width = video.videoWidth * scale;
-          canvas.height = video.videoHeight * scale;
-          if (canvas.width > 0 && canvas.height > 0) {
-            ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
-            const base64 = canvas.toDataURL("image/jpeg", 0.8);
-            const data = base64.slice(base64.indexOf(",") + 1);
-            if (data) client.sendRealtimeInput([{ mimeType: "image/jpeg", data }]);
-          }
-        } catch (error) { console.error("❌ Error frame:", error); }
-      }
-      if (connected && activeLocalVideoStream) {
-         timeoutId = window.setTimeout(sendVideoFrame, 1000 / 4);
-      }
-    }
-    if (connected && activeLocalVideoStream && videoRef.current) {
-      timeoutId = window.setTimeout(sendVideoFrame, 200);
-    }
-    return () => clearTimeout(timeoutId);
-  }, [connected, activeLocalVideoStream, client, videoRef, renderCanvasRef]);
-
-  useEffect(() => {
-    if (videoRef.current) {
-      if (videoRef.current.srcObject !== activeLocalVideoStream) {
-        videoRef.current.srcObject = activeLocalVideoStream;
-        if (activeLocalVideoStream) {
-          videoRef.current.play().catch(e => console.warn("Video play failed:", e));
-        }
-      }
-    }
-  }, [activeLocalVideoStream, videoRef]);
-
-  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);
-  };
-
-  const startWebcam = async (facingModeToTry: 'user' | 'environment' = currentFacingMode) => {
-    if (isSwitchingCamera) return;
-    setIsSwitchingCamera(true);
-    try {
-      const mediaStream = await navigator.mediaDevices.getUserMedia({ video: { facingMode: facingModeToTry }, audio: false });
-      setActiveLocalVideoStream(mediaStream); onVideoStreamChange(mediaStream); setCurrentFacingMode(facingModeToTry);
-    } catch (error) {
-      console.error(`❌ Start WC err ${facingModeToTry}:`, error);
-      setActiveLocalVideoStream(null); onVideoStreamChange(null); onAppCamToggle(false);
-    } finally { setIsSwitchingCamera(false); }
-  };
-
-  const stopWebcam = () => {
-    if (activeLocalVideoStream) activeLocalVideoStream.getTracks().forEach(track => track.stop());
-    setActiveLocalVideoStream(null); onVideoStreamChange(null);
-  };
-
- const handleCamToggle = async () => {
-    if (isSwitchingCamera) return;
-    const newCamState = !isAppCamActive;
-
-    if (newCamState) { 
-        if (!(await ensureConnectedAndReady())) {
-            onAppCamToggle(false);
-            return;
-        }
-        if (!isAppMicActive) {
-            onAppMicToggle(true);
-        }
-        onAppCamToggle(true);
-    } else { 
-        onAppCamToggle(false);
-    }
-};
-
-  const handleSwitchCamera = async () => {
-    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 } }, audio: false });
-      setActiveLocalVideoStream(newStream); onVideoStreamChange(newStream); setCurrentFacingMode(targetFacingMode);
-    } catch (error) {
-      console.error(`❌ Switch Cam err ${targetFacingMode}:`, error);
-      try {
-        const restoredStream = await navigator.mediaDevices.getUserMedia({ video: { facingMode: currentFacingMode }, audio: false });
-        setActiveLocalVideoStream(restoredStream); onVideoStreamChange(restoredStream);
-      } catch (restoreError) {
-        console.error('❌ Restore Cam err:', restoreError);
-        setActiveLocalVideoStream(null); onVideoStreamChange(null); onAppCamToggle(false);
-      }
-    } finally { setIsSwitchingCamera(false); }
-  };
-
+  useEffect(() => { if (isAppCamActive && !activeLocalVideoStream && !isSwitchingCamera) { startWebcam(); } else if (!isAppCamActive && activeLocalVideoStream) { stopWebcam(); } }, [isAppCamActive, activeLocalVideoStream, isSwitchingCamera]);
+  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]);
+  useEffect(() => { let timeoutId = -1; function sendVideoFrame() { if (connected && activeLocalVideoStream && client && videoRef.current) { const video = videoRef.current; const canvas = renderCanvasRef.current; if (!canvas || video.readyState < video.HAVE_METADATA || video.paused || video.ended) { if (activeLocalVideoStream) timeoutId = window.setTimeout(sendVideoFrame, 1000 / 4); return; } try { const ctx = canvas.getContext("2d"); if (!ctx) return; const scale = 0.5; canvas.width = video.videoWidth * scale; canvas.height = video.videoHeight * scale; if (canvas.width > 0 && canvas.height > 0) { ctx.drawImage(video, 0, 0, canvas.width, canvas.height); const base64 = canvas.toDataURL("image/jpeg", 0.8); const data = base64.slice(base64.indexOf(",") + 1); if (data) client.sendRealtimeInput([{ mimeType: "image/jpeg", data }]); } } catch (error) { console.error("❌ Error frame:", error); } } if (connected && activeLocalVideoStream) { timeoutId = window.setTimeout(sendVideoFrame, 1000 / 4); } } if (connected && activeLocalVideoStream && videoRef.current) { timeoutId = window.setTimeout(sendVideoFrame, 200); } return () => clearTimeout(timeoutId); }, [connected, activeLocalVideoStream, client, videoRef, renderCanvasRef]);
+  useEffect(() => { if (videoRef.current) { if (videoRef.current.srcObject !== activeLocalVideoStream) { videoRef.current.srcObject = activeLocalVideoStream; if (activeLocalVideoStream) { videoRef.current.play().catch(e => console.warn("Video play failed:", e)); } } } }, [activeLocalVideoStream, videoRef]);
+  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); };
+  const startWebcam = async (facingModeToTry: 'user' | 'environment' = currentFacingMode) => { if (isSwitchingCamera) return; setIsSwitchingCamera(true); try { const mediaStream = await navigator.mediaDevices.getUserMedia({ video: { facingMode: facingModeToTry }, audio: false }); setActiveLocalVideoStream(mediaStream); onVideoStreamChange(mediaStream); setCurrentFacingMode(facingModeToTry); } catch (error) { console.error(`❌ Start WC err ${facingModeToTry}:`, error); setActiveLocalVideoStream(null); onVideoStreamChange(null); onAppCamToggle(false); } finally { setIsSwitchingCamera(false); } };
+  const stopWebcam = () => { if (activeLocalVideoStream) activeLocalVideoStream.getTracks().forEach(track => track.stop()); setActiveLocalVideoStream(null); onVideoStreamChange(null); };
+  const handleCamToggle = async () => { if (isSwitchingCamera) return; const newCamState = !isAppCamActive; if (newCamState) { if (!(await ensureConnectedAndReady())) { onAppCamToggle(false); return; } if (!isAppMicActive) { onAppMicToggle(true); } onAppCamToggle(true); } else { onAppCamToggle(false); } };
+  const handleSwitchCamera = async () => { 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 } }, audio: false }); setActiveLocalVideoStream(newStream); onVideoStreamChange(newStream); setCurrentFacingMode(targetFacingMode); } catch (error) { console.error(`❌ Switch Cam err ${targetFacingMode}:`, error); try { const restoredStream = await navigator.mediaDevices.getUserMedia({ video: { facingMode: currentFacingMode }, audio: false }); setActiveLocalVideoStream(restoredStream); onVideoStreamChange(restoredStream); } catch (restoreError) { console.error('❌ Restore Cam err:', restoreError); setActiveLocalVideoStream(null); onVideoStreamChange(null); onAppCamToggle(false); } } finally { setIsSwitchingCamera(false); } };
+
+
+  // استفاده از کلاس 'footer-controls' که در App.scss استایل‌دهی می‌شود
+  // ترتیب دکمه‌ها: دوربین (چپ)، لوگو (وسط اگر دوربین فعال)، میکروفون (راست)
+  // این ترتیب با HTML مرجع شما (میکروفون چپ، دوربین راست) متفاوت است،
+  // برای تطابق با HTML، ترتیب JSX را باید تغییر دهید و رنگ‌ها را هم در App.scss جابجا کنید.
+  // در اینجا، ترتیب قبلی (دوربین چپ، میکروفون راست) را حفظ می‌کنیم.
   return (
-    <footer id="footer-controls" className="footer-controls-html-like">
+    <footer id="footer-controls" className="footer-controls"> {/* استفاده از کلاس پایدارتر قبلی */}
       <canvas style={{ display: "none" }} ref={renderCanvasRef} />
 
-      <div
-        id="mic-button"
-        className="control-button mic-button-color"
-        onClick={handleMicToggle}
-      >
-        {isAppMicActive ? <SvgPauseIcon /> : <ReferenceMicrophoneIcon />}
+      {/* Cam Button (Left) */}
+      <div id="cam-button-wrapper" className="control-button-wrapper">
+        <button id="cam-button" className="control-button cam-button-color" onClick={handleCamToggle} disabled={isSwitchingCamera || !supportsVideo}>
+          {isAppCamActive ? <SvgStopCamIcon /> : <SvgCameraIcon />}
+        </button>
+        <div id="switch-camera-button-container" className={cn("switch-camera-button-container", { visible: isAppCamActive && !isSwitchingCamera })}>
+          <button id="switch-camera-button" aria-label="Switch Camera" className="switch-camera-button-content group" onClick={handleSwitchCamera} disabled={!isAppCamActive || isSwitchingCamera}>
+            <SvgSwitchCameraIcon/>
+          </button>
+        </div>
       </div>
 
+      {/* Small Logo Container (Middle - Only when Cam is Active) */}
       {isAppCamActive && (
-        <div id="small-logo-footer-container" className="small-logo-footer-html-like">
+        <div className="small-logo-footer"> {/* کلاس برای موقعیت‌دهی لوگوی کوچک */}
             {createLogoFunction(true, true, 'human', true)}
         </div>
       )}
 
-      <div id="cam-button-wrapper" className="control-button-wrapper cam-wrapper-html-like">
-        <div
-          id="cam-button"
-          className="control-button cam-button-color"
-          onClick={handleCamToggle}
-        >
-          {isAppCamActive ? <SvgStopCamIcon /> : <SvgCameraIcon />}
-        </div>
-        <div
-          id="switch-camera-button-container"
-          className={cn("switch-camera-button-container", { visible: isAppCamActive && !isSwitchingCamera })}
-        >
-          <button
-            id="switch-camera-button"
-            aria-label="Switch Camera"
-            className="switch-camera-button-content group"
-            onClick={handleSwitchCamera}
-            disabled={!isAppCamActive || isSwitchingCamera}
-          >
-            <SvgSwitchCameraIcon/>
-          </button>
-        </div>
+      {/* Mic Button (Right) */}
+      <div id="mic-button-wrapper" className="control-button-wrapper">
+        <button id="mic-button" className="control-button mic-button-color" onClick={handleMicToggle} disabled={isSwitchingCamera} >
+          {isAppMicActive ? <SvgPauseIcon /> : <ReferenceMicrophoneIcon />}
+        </button>
       </div>
     </footer>
   );