// ... (ایمپورتها و SVGهای آیکونها مثل قبل) ...
import cn from "classnames";
import React, { memo, ReactNode, RefObject, useEffect, useState } from "react";
import { useLiveAPIContext } from "../../contexts/LiveAPIContext";
import { AudioRecorder } from "../../lib/audio-recorder";
const SvgPauseIcon = () => ;
const SvgCameraIcon = () => ;
const SvgStopCamIcon = () => ;
const SvgSwitchCameraIcon = () => ;
export type ControlTrayProps = { /* ... (props بدون تغییر) ... */
videoRef: RefObject;
supportsVideo: boolean;
onVideoStreamChange: (stream: MediaStream | null) => void;
isAppMicActive: boolean;
onAppMicToggle: (active: boolean) => void;
isAppCamActive: boolean;
onAppCamToggle: (active: boolean) => void;
createLogoFunction: (isMini: boolean, isActive: boolean, type?: 'human' | 'ai', forFooter?: boolean) => ReactNode;
ReferenceMicrophoneIcon: () => JSX.Element;
};
const ControlTray: React.FC = ({ /* ... (props بدون تغییر) ... */
videoRef,
onVideoStreamChange,
supportsVideo,
isAppMicActive,
onAppMicToggle,
isAppCamActive,
onAppCamToggle,
createLogoFunction,
ReferenceMicrophoneIcon,
}) => {
// ... (state ها و useEffect ها و توابع handle بدون تغییر) ...
const { client, connected, connect } = useLiveAPIContext();
const [audioRecorder] = useState(() => new AudioRecorder());
const [activeLocalVideoStream, setActiveLocalVideoStream] = useState(null);
const [currentFacingMode, setCurrentFacingMode] = useState<'user' | 'environment'>('user');
const [isSwitchingCamera, setIsSwitchingCamera] = useState(false);
const renderCanvasRef = React.useRef(null);
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 => { 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 (
);
};
export default memo(ControlTray);