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

src/components/control-tray/ControlTray.tsx

@@ -4,6 +4,7 @@ import cn from "classnames";
 import React, { memo, RefObject, useEffect, useState, useCallback, useRef } from "react";
 import { useLiveAPIContext } from "../../contexts/LiveAPIContext";
 import { AudioRecorder } from "../../lib/audio-recorder";
+import Logo from '../logo/Logo'; // لوگو اینجا استفاده می‌شود
 import { PauseIconWithPulse, microphoneIcon, cameraIcon, stopCamIcon } from '../icons';
 
 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>;
@@ -22,7 +23,7 @@ export type ControlTrayProps = {
 };
 
 const ControlTray: React.FC<ControlTrayProps> = ({ videoRef, onVideoStreamChange, supportsVideo, isAppMicActive, onAppMicToggle, isAppCamActive, onAppCamToggle, currentFacingMode, onFacingModeChange, onUserSpeakingChange }) => {
-  const { client, connected, connect } = useLiveAPIContext();
+  const { client, connected, connect, volume } = useLiveAPIContext();
   const audioRecorderRef = useRef<AudioRecorder | null>(null);
   const [activeLocalVideoStream, setActiveLocalVideoStream] = useState<MediaStream | null>(null);
   const [isSwitchingCamera, setIsSwitchingCamera] = useState(false);
@@ -196,6 +197,21 @@ const ControlTray: React.FC<ControlTrayProps> = ({ videoRef, onVideoStreamChange
       <div id="mic-button" className="control-button mic-button-color" onClick={handleMicToggle}>
         {isAppMicActive ? <PauseIconWithPulse userVolume={userVolume} /> : microphoneIcon}
       </div>
+
+      {/* --- 👇 تغییر اصلی اینجاست 👇 --- */}
+      {/* اگر دوربین فعال است، لوگو را در وسط نمایش بده */}
+      {isAppCamActive && (
+        <div id="small-logo-footer-container" className="small-logo-footer-html-like">
+            <Logo 
+                isMini={true} 
+                isActive={true} 
+                isAi={false}
+                speakingVolume={volume}
+                isUserSpeaking={onUserSpeakingChange.length > 0 && userVolume > 0.01}
+            />
+        </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 ? stopCamIcon : cameraIcon}