/**
Copyright 2024 Google LLC
... (لایسنس و توضیحات دیگر مثل قبل) ...
*/
import cn from "classnames";
import React, { memo, ReactNode, RefObject, useEffect, useState } from "react";
import { useLiveAPIContext } from "../../contexts/LiveAPIContext";
import { AudioRecorder } from "../../lib/audio-recorder";
// SVG Icons for Controls
const SvgPauseIcon = () => ;
// SvgMicrophoneIcon ( قبلی ) دیگر استفاده نمی شود، SvgReferenceMicrophoneIcon جایگزین آن می شود
const SvgCameraIcon = () => ;
const SvgStopCamIcon = () => ;
const SvgSwitchCameraIcon = () => ;
export type ControlTrayProps = {
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; // *** NEW: Prop for reference mic icon ***
};
const ControlTray: React.FC = ({
videoRef,
onVideoStreamChange,
supportsVideo,
isAppMicActive,
onAppMicToggle,
isAppCamActive,
onAppCamToggle,
createLogoFunction,
ReferenceMicrophoneIcon, // *** NEW ***
}) => {
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 mic is not active when turning on cam, also turn on mic.
// This is because the large logo (mic only) should disappear.
// And the small logo (mic + cam) should appear or video feed.
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); }
};
// *** MODIFIED: Footer layout for fixed positions and middle logo ***
return (
);
};
export default memo(ControlTray);