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

src/components/control-tray/ControlTray.tsx

@@ -1,28 +1,15 @@
 /**
  * Copyright 2024 Google LLC
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
+ * ... (لایسنس و توضیحات دیگر مثل قبل) ...
  */
 
 import cn from "classnames";
-
 import { memo, ReactNode, RefObject, useEffect, useRef, useState } from "react";
 import { useLiveAPIContext } from "../../contexts/LiveAPIContext";
 import { UseMediaStreamResult } from "../../hooks/use-media-stream-mux";
 import { useScreenCapture } from "../../hooks/use-screen-capture";
 import { useWebcam } from "../../hooks/use-webcam";
 import { AudioRecorder } from "../../lib/audio-recorder";
-import { audioContext } from "../../lib/utils";
 import { isIOS } from "../../lib/platform";
 import AudioPulse from "../audio-pulse/AudioPulse";
 import "./control-tray.scss";
@@ -40,19 +27,17 @@ type MediaStreamButtonProps = {
   offIcon: string;
   start: () => Promise<any>;
   stop: () => any;
+  disabled?: boolean;
 };
 
-/**
- * button used for triggering webcam or screen-capture
- */
 const MediaStreamButton = memo(
-  ({ isStreaming, onIcon, offIcon, start, stop }: MediaStreamButtonProps) =>
+  ({ isStreaming, onIcon, offIcon, start, stop, disabled }: MediaStreamButtonProps) =>
     isStreaming ? (
-      <button className="action-button" onClick={stop}>
+      <button className="action-button" onClick={stop} title={`Stop ${offIcon}`} disabled={disabled}>
         <span className="material-symbols-outlined">{onIcon}</span>
       </button>
     ) : (
-      <button className="action-button" onClick={start}>
+      <button className="action-button" onClick={start} title={`Start ${offIcon}`} disabled={disabled}>
         <span className="material-symbols-outlined">{offIcon}</span>
       </button>
     ),
@@ -64,50 +49,56 @@ function ControlTray({
   onVideoStreamChange = () => {},
   supportsVideo,
 }: ControlTrayProps) {
-  const videoStreams = [useWebcam(), useScreenCapture()];
-  const [activeVideoStream, setActiveVideoStream] =
-    useState<MediaStream | null>(null);
-  const [webcam, screenCapture] = videoStreams;
+  const webcam = useWebcam();
+  const screenCapture = useScreenCapture();
+
+  const [activeVideoStream, setActiveVideoStream] = useState<MediaStream | null>(null);
+  const [currentFacingMode, setCurrentFacingMode] = useState<'user' | 'environment' | null>(null);
+  const [isSwitchingCamera, setIsSwitchingCamera] = useState(false);
+  const [isLikelyDesktop, setIsLikelyDesktop] = useState(false); // <-- State برای تشخیص دسکتاپ
   const [inVolume, setInVolume] = useState(0);
   const [audioRecorder] = useState(() => new AudioRecorder());
   const [muted, setMuted] = useState(false);
-  const [videoDevices, setVideoDevices] = useState<MediaDeviceInfo[]>([]);
-  const [currentDeviceIndex, setCurrentDeviceIndex] = useState(0);
   const renderCanvasRef = useRef<HTMLCanvasElement>(null);
   const connectButtonRef = useRef<HTMLButtonElement>(null);
   const [simulatedVolume, setSimulatedVolume] = useState(0);
   const isIOSDevice = isIOS();
 
-  const { client, connected, connect, disconnect, volume } =
-    useLiveAPIContext();
-
-  // Add iOS detection
+  const { client, connected, connect, disconnect, volume } = useLiveAPIContext();
   const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
 
+  // --- useEffect ها ---
+
+  // بررسی نوع دستگاه (دسکتاپ یا موبایل/تبلت) در زمان Mount
+  useEffect(() => {
+    // navigator.maxTouchPoints > 0 معمولا نشان‌دهنده دستگاه لمسی است
+    const desktopCheck = typeof navigator !== 'undefined' && navigator.maxTouchPoints <= 0;
+    setIsLikelyDesktop(desktopCheck);
+    console.log(`Device check: Likely Desktop? ${desktopCheck} (maxTouchPoints: ${navigator.maxTouchPoints})`);
+  }, []); // فقط یک بار در زمان Mount اجرا شود
+
+  // Focus effect
   useEffect(() => {
     if (!connected && connectButtonRef.current) {
-      console.log('🎯 Setting focus on connect button - connection status:', connected);
       connectButtonRef.current.focus();
     }
   }, [connected]);
 
-  // Add iOS volume simulation effect
+  // iOS volume simulation
   useEffect(() => {
+    let interval: number | undefined;
     if (isIOSDevice && connected && !muted) {
-      console.log('📱 Starting iOS volume simulation');
-      const interval = setInterval(() => {
-        // Create a smooth pulsing effect
-        const pulse = (Math.sin(Date.now() / 500) + 1) / 2; // Values between 0 and 1
-        setSimulatedVolume(0.02 + pulse * 0.03); // Small range for subtle effect
+      interval = window.setInterval(() => {
+        const pulse = (Math.sin(Date.now() / 500) + 1) / 2;
+        setSimulatedVolume(0.02 + pulse * 0.03);
       }, 50);
-      
-      return () => {
-        console.log('🛑 Stopping iOS volume simulation');
-        clearInterval(interval);
-      };
     }
+    return () => {
+      if (interval) clearInterval(interval);
+    };
   }, [connected, muted, isIOSDevice]);
 
+  // CSS volume update
   useEffect(() => {
     document.documentElement.style.setProperty(
       "--volume",
@@ -115,236 +106,239 @@ function ControlTray({
     );
   }, [inVolume, simulatedVolume, isIOSDevice]);
 
+  // Audio recording
   useEffect(() => {
     const onData = (base64: string) => {
-      console.log('🎤 Sending audio data chunk');
-      client.sendRealtimeInput([
-        {
-          mimeType: "audio/pcm;rate=16000",
-          data: base64,
-        },
-      ]);
+      if (client && connected) {
+        client.sendRealtimeInput([{ mimeType: "audio/pcm;rate=16000", data: base64 }]);
+      }
     };
-
     if (connected && !muted && audioRecorder) {
-      console.log('🎙️ Starting audio recorder');
       audioRecorder.on("data", onData).on("volume", setInVolume).start();
-    } else {
-      console.log('⏹️ Stopping audio recorder');
+    } else if (audioRecorder) {
       audioRecorder.stop();
     }
-
     return () => {
-      console.log('🧹 Cleaning up audio recorder listeners');
-      audioRecorder.off("data", onData).off("volume", setInVolume);
+      if (audioRecorder) {
+        audioRecorder.off("data", onData).off("volume", setInVolume).stop();
+      }
     };
   }, [connected, client, muted, audioRecorder]);
 
+  // Stop video on disconnect
   useEffect(() => {
-    if (videoRef.current) {
-      console.log('🎥 Setting video stream:', activeVideoStream ? 'active' : 'null');
-      videoRef.current.srcObject = activeVideoStream;
+    if (!connected && activeVideoStream) {
+      console.log('🔌 Disconnected, stopping video stream.');
+      activeVideoStream.getTracks().forEach(track => track.stop());
+      setActiveVideoStream(null);
+      onVideoStreamChange(null);
+      setCurrentFacingMode(null);
+      setIsSwitchingCamera(false);
+      webcam.stop();
+      screenCapture.stop();
     }
+  }, [connected, activeVideoStream, onVideoStreamChange, webcam, screenCapture]);
 
+  // Video frame sending
+  useEffect(() => {
     let timeoutId = -1;
-
     function sendVideoFrame() {
-      const video = videoRef.current;
-      const canvas = renderCanvasRef.current;
-
-      if (!video || !canvas) {
-        console.log('⚠️ Missing video or canvas reference');
-        return;
-      }
-
-      const ctx = canvas.getContext("2d")!;
-      canvas.width = video.videoWidth * 0.25;
-      canvas.height = video.videoHeight * 0.25;
-      if (canvas.width + canvas.height > 0) {
-        ctx.drawImage(videoRef.current, 0, 0, canvas.width, canvas.height);
-        const base64 = canvas.toDataURL("image/jpeg", 1.0);
-        const data = base64.slice(base64.indexOf(",") + 1, Infinity);
-        console.log('📸 Sending video frame');
-        client.sendRealtimeInput([{ mimeType: "image/jpeg", data }]);
-      }
-      if (connected) {
+      if (connected && activeVideoStream) {
         timeoutId = window.setTimeout(sendVideoFrame, 1000 / 0.5);
       }
+      const video = videoRef.current; const canvas = renderCanvasRef.current;
+      if (!video || !canvas || video.readyState < video.HAVE_METADATA || video.paused || video.ended || !client) return;
+      try {
+        const ctx = canvas.getContext("2d"); if (!ctx) return;
+        const scale = 0.25; 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);
+          client.sendRealtimeInput([{ mimeType: "image/jpeg", data }]);
+        }
+      } catch (error) { console.error("❌ Error processing video frame:", error); }
     }
-    if (connected && activeVideoStream !== null) {
-      console.log('🎬 Starting video frame capture');
-      requestAnimationFrame(sendVideoFrame);
-    }
-    return () => {
-      console.log('⏹️ Stopping video frame capture');
-      clearTimeout(timeoutId);
-    };
+    if (connected && activeVideoStream && videoRef.current) { setTimeout(sendVideoFrame, 200); }
+    return () => { clearTimeout(timeoutId); };
   }, [connected, activeVideoStream, client, videoRef]);
 
-  // Add effect to track available video devices
+  // Assign stream to video element
   useEffect(() => {
-    async function getVideoDevices() {
-      console.log('📹 Enumerating video devices...');
-      try {
-        const devices = await navigator.mediaDevices.enumerateDevices();
-        const videoInputs = devices.filter(device => device.kind === 'videoinput');
-        console.log('��� Available video devices:', videoInputs.length);
-        videoInputs.forEach((device, index) => {
-          console.log(`📹 Device ${index}:`, {
-            deviceId: device.deviceId,
-            label: device.label
-          });
-        });
-        setVideoDevices(videoInputs);
-      } catch (error) {
-        console.error('❌ Error enumerating devices:', error);
+    if (videoRef.current) {
+      if (videoRef.current.srcObject !== activeVideoStream) {
+        videoRef.current.srcObject = activeVideoStream;
+        if (activeVideoStream) { videoRef.current.play().catch(e => console.warn("Video play failed:", e)); }
       }
     }
+  }, [activeVideoStream, videoRef]);
+  // --- پایان useEffect ها ---
 
-    // Get initial device list
-    getVideoDevices();
 
-    // Listen for device changes
-    navigator.mediaDevices.addEventListener('devicechange', getVideoDevices);
-    return () => {
-      navigator.mediaDevices.removeEventListener('devicechange', getVideoDevices);
-    };
-  }, []);
+  // Function to stop all video streams
+  const stopAllVideoStreams = () => {
+    console.log('⏹️ Stopping all video streams...');
+    if (activeVideoStream) {
+      activeVideoStream.getTracks().forEach(track => track.stop());
+      setActiveVideoStream(null);
+      onVideoStreamChange(null);
+    }
+    webcam.stop(); screenCapture.stop(); setCurrentFacingMode(null); setIsSwitchingCamera(false);
+  };
 
-  const rotateWebcam = async () => {
-    console.log('🔄 Rotating webcam...');
-    if (videoDevices.length <= 1) {
-      console.log('⚠️ Not enough video devices to rotate');
-      return;
+  // Handler for starting/stopping webcam or screen share
+  const changeStreams = (streamType: 'webcam' | 'screen' | 'none') => async () => {
+    if (isSwitchingCamera) return;
+    // Only allow starting screen share if it's likely a desktop
+    if (streamType === 'screen' && !isLikelyDesktop) {
+        console.warn("Screen share requested on non-desktop device, ignoring.");
+        return;
     }
 
-    const nextIndex = (currentDeviceIndex + 1) % videoDevices.length;
-    console.log(`🎯 Switching to device index ${nextIndex}`);
-    
+    stopAllVideoStreams();
+
+    if (streamType === 'webcam') {
+      const initialFacingMode = 'user'; console.log(`🚀 Starting webcam with initial facingMode: ${initialFacingMode}`);
+      try {
+        const mediaStream = await navigator.mediaDevices.getUserMedia({ video: { facingMode: initialFacingMode }, audio: false });
+        setActiveVideoStream(mediaStream); onVideoStreamChange(mediaStream); setCurrentFacingMode(initialFacingMode);
+      } catch (error) {
+        console.error(`❌ Error starting webcam with ${initialFacingMode}:`, error);
+        try { // Fallback
+            const fallbackStream = await navigator.mediaDevices.getUserMedia({ video: { facingMode: 'environment' }, audio: false });
+            setActiveVideoStream(fallbackStream); onVideoStreamChange(fallbackStream); setCurrentFacingMode('environment');
+        } catch (fallbackError) { console.error('❌ Error starting webcam fallback:', fallbackError); setActiveVideoStream(null); onVideoStreamChange(null); setCurrentFacingMode(null); }
+      }
+    } else if (streamType === 'screen' && isLikelyDesktop) { // Double check desktop condition
+      console.log('🚀 Starting screen capture');
+      try {
+        const mediaStream = await screenCapture.start();
+        setActiveVideoStream(mediaStream); onVideoStreamChange(mediaStream); setCurrentFacingMode(null);
+      } catch (error) { console.error('❌ Error starting screen capture:', error); setActiveVideoStream(null); onVideoStreamChange(null); setCurrentFacingMode(null); }
+    } else { console.log('ℹ️ Video stream turned off or invalid request.'); }
+  };
+
+  // Handler for rotating webcam
+  const rotateWebcam = async () => {
+    if (isSwitchingCamera || !activeVideoStream || currentFacingMode === null) return;
+    const targetFacingMode = currentFacingMode === 'user' ? 'environment' : 'user';
+    console.log(`🔄 Rotating webcam... Target: ${targetFacingMode}`);
+    setIsSwitchingCamera(true);
+    activeVideoStream.getTracks().forEach(track => track.stop()); // Stop tracks only
+
     try {
-      const newStream = await navigator.mediaDevices.getUserMedia({
-        video: { deviceId: { exact: videoDevices[nextIndex].deviceId } },
-        audio: false
-      });
-      
-      console.log('✅ Got new video stream');
-      setActiveVideoStream(newStream);
-      onVideoStreamChange(newStream);
-      setCurrentDeviceIndex(nextIndex);
-      
-      // Clean up old stream
-      if (activeVideoStream) {
-        activeVideoStream.getTracks().forEach(track => track.stop());
+      const newStream = await navigator.mediaDevices.getUserMedia({ video: { facingMode: { exact: targetFacingMode } }, audio: false });
+      if (videoRef.current) { videoRef.current.srcObject = newStream; videoRef.current.play().catch(e => console.warn("Play fail switch:", e)); }
+      setActiveVideoStream(newStream); onVideoStreamChange(newStream); setCurrentFacingMode(targetFacingMode);
+    } catch (error: any) {
+      console.error(`❌ Error switching camera:`, error.name);
+      let recoveredStream: MediaStream | null = null; // Fallback logic...
+      if (error.name === 'OverconstrainedError' || error.name === 'ConstraintNotSatisfiedError') {
+          try { recoveredStream = await navigator.mediaDevices.getUserMedia({ video: { facingMode: targetFacingMode }, audio: false }); setCurrentFacingMode(targetFacingMode); } catch (retryError: any) { console.error(`Retry fail:`, retryError.name); }
       }
-    } catch (error) {
-      console.error('❌ Error rotating webcam:', error);
+      if (!recoveredStream) { try { recoveredStream = await navigator.mediaDevices.getUserMedia({ video: { facingMode: { exact: currentFacingMode } }, audio: false }); } catch (restoreError) { console.error(`Restore fail:`, restoreError); } }
+      if (recoveredStream) { if (videoRef.current) { videoRef.current.srcObject = recoveredStream; videoRef.current.play().catch(e => console.warn("Play fail recovery:", e)); } setActiveVideoStream(recoveredStream); onVideoStreamChange(recoveredStream); }
+      else { if (videoRef.current) videoRef.current.srcObject = null; setActiveVideoStream(null); onVideoStreamChange(null); setCurrentFacingMode(null); }
+    } finally {
+      setIsSwitchingCamera(false);
     }
   };
 
-  //handler for swapping from one video-stream to the next
-  const changeStreams = (next?: UseMediaStreamResult) => async () => {
-    if (next) {
-      console.log('🔄 Starting new video stream');
-      const mediaStream = await next.start();
-      setActiveVideoStream(mediaStream);
-      onVideoStreamChange(mediaStream);
-    } else {
-      console.log('⏹️ Stopping video stream');
-      setActiveVideoStream(null);
-      onVideoStreamChange(null);
-    }
+  // Determine stable streaming states
+  const isWebcamStableStreaming = activeVideoStream !== null && currentFacingMode !== null;
+  const isScreenCaptureStreaming = screenCapture.isStreaming && activeVideoStream !== null && currentFacingMode === null;
+
+  // Determine if the webcam button should appear active
+  const showWebcamAsActive = isWebcamStableStreaming || (isSwitchingCamera && currentFacingMode !== null);
+
+  // **** Condition to show Screen Share Button ****
+  const showScreenShareButton = supportsVideo && !isIOSDevice && isLikelyDesktop;
 
-    videoStreams.filter((msr) => msr !== next).forEach((msr) => {
-      console.log('🛑 Stopping other video streams');
-      msr.stop();
-    });
-  };
 
   return (
     <section className="control-tray">
       <canvas style={{ display: "none" }} ref={renderCanvasRef} />
+
       <nav className={cn("actions-nav", { disabled: !connected })}>
+        {/* Mic Button */}
         <button
           className={cn("action-button mic-button")}
           onClick={() => setMuted(!muted)}
+          disabled={!connected || isSwitchingCamera}
+          title={muted ? "Unmute Microphone" : "Mute Microphone"}
         >
-          {!muted ? (
-            <span className="material-symbols-outlined filled">mic</span>
-          ) : (
-            <span className="material-symbols-outlined filled">mic_off</span>
-          )}
+          <span className="material-symbols-outlined filled">{muted ? "mic_off" : "mic"}</span>
         </button>
 
+        {/* Volume Indicator */}
         <div className="action-button no-action outlined">
-          <AudioPulse volume={volume} active={connected} hover={false} />
+          <AudioPulse volume={volume} active={connected && !muted} hover={false} />
         </div>
 
+        {/* Video Controls */}
         {supportsVideo && (
           <>
-            {!isIOSDevice && (
+            {/* Screen Share Button (Show only on non-iOS Desktop-like devices) */}
+            {showScreenShareButton && ( // <-- شرط جدید اینجا اعمال شده
               <MediaStreamButton
-                isStreaming={screenCapture.isStreaming}
-                start={changeStreams(screenCapture)}
-                stop={changeStreams()}
+                isStreaming={isScreenCaptureStreaming}
+                start={changeStreams('screen')}
+                stop={changeStreams('none')}
                 onIcon="cancel_presentation"
                 offIcon="present_to_all"
+                // Disable screen share button also if webcam is active or switching? Your choice.
+                // disabled={!connected || isSwitchingCamera || showWebcamAsActive}
+                disabled={!connected || isSwitchingCamera } // Kept simpler for now
               />
             )}
-            {webcam.isStreaming && videoDevices.length > 1 && (
-              <button 
-                className="action-button" 
+
+            {/* Switch Camera Button */}
+            { (isWebcamStableStreaming || isSwitchingCamera) && (
+              <button
+                className="action-button"
                 onClick={rotateWebcam}
                 title="Switch camera"
+                disabled={!connected || isSwitchingCamera}
               >
                 <span className="material-symbols-outlined">switch_camera</span>
               </button>
             )}
+
+            {/* Webcam On/Off Button */}
             <MediaStreamButton
-              isStreaming={webcam.isStreaming}
-              start={changeStreams(webcam)}
-              stop={changeStreams()}
+              isStreaming={showWebcamAsActive}
+              start={changeStreams('webcam')}
+              stop={changeStreams('none')}
               onIcon="videocam_off"
               offIcon="videocam"
+              disabled={!connected || isSwitchingCamera}
             />
           </>
         )}
         {children}
       </nav>
 
+      {/* Connection Controls */}
       <div className={cn("connection-container", { connected })}>
         <div className="connection-button-container">
           <button
             ref={connectButtonRef}
             className={cn("action-button connect-toggle", { connected })}
             onClick={async () => {
-              console.log('🎮 ControlTray: Connection button clicked');
-              try {
-                if (connected) {
-                  console.log('📴 ControlTray: Initiating disconnect...');
-                  await disconnect();
-                  console.log('✅ ControlTray: Disconnected successfully');
-                } else {
-                  console.log('🔌 ControlTray: Starting connection process...');
-                  console.log('📱 ControlTray: Device info:', { isIOSDevice, isSafari });
-                  
-                  console.log('📞 ControlTray: Calling LiveAPIContext.connect()...');
-                  await connect();
-                  console.log('✅ ControlTray: Connected successfully via LiveAPIContext');
-                }
-              } catch (err) {
-                console.error('❌ ControlTray: Connection error:', err);
-              }
+              if (isSwitchingCamera) return;
+              try { if (connected) { await disconnect(); } else { await connect(); } }
+              catch (err) { console.error('❌ Connection/Disconnection error:', err); }
             }}
+            disabled={isSwitchingCamera}
+            title={connected ? "Disconnect Stream" : "Connect Stream"}
           >
-            <span className="material-symbols-outlined filled">
-              {connected ? "pause" : "play_arrow"}
-            </span>
+            <span className="material-symbols-outlined filled">{connected ? "pause" : "play_arrow"}</span>
           </button>
         </div>
-        <span className="text-indicator">Streaming</span>
+        <span className="text-indicator">{connected ? "Streaming" : "Paused"}</span>
       </div>
     </section>
   );
 }
 
-export default memo(ControlTray);
+export default memo(ControlTray);