Update src/App.tsx

src/App.tsx

@@ -1,4 +1,4 @@
-// ... (ایمپورت‌ها، myCustomInstruction, initialAppConfig, SvgHumanIcon, SvgReferenceMicrophoneIcon بدون تغییر) ...
+// ... (ایمپورت‌ها، myCustomInstruction, initialAppConfig, SvgHumanIcon, SvgReferenceMicrophoneIcon، AppInternalLogic بدون تغییر) ...
 import React, { useEffect, useRef, useState } from "react";
 import './App.scss';
 import { LiveAPIProvider, useLiveAPIContext } from "./contexts/LiveAPIContext";
@@ -92,7 +92,6 @@ const initialAppConfig: LiveConfig = {
   },
 };
 
-
 const SvgHumanIcon = () => (
     <svg width="100%" height="100%" viewBox="0 0 88 89" fill="none" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet">
         <path d="M75.1481 81.6361H12.9259C9.66667 81.6361 7 78.9721 7 75.7161V58.5112C7 57.5862 7 57.1052 7.44444 56.2172C8.85185 52.9612 13 50.2232 19.4815 47.8922C24.1111 56.6982 33.3704 62.6921 44 62.6921C54.6296 62.6921 63.9259 56.6982 68.5185 47.8922C75 50.1862 79.1852 52.9982 80.5556 56.2172C81 56.6612 81 57.6232 81 58.5112V75.7161C81 78.9721 78.3333 81.6361 75.0741 81.6361H75.1481Z" stroke="currentColor" strokeWidth="6.42146" strokeLinecap="round" strokeLinejoin="round"/>
@@ -107,186 +106,76 @@ const SvgReferenceMicrophoneIcon = () => (
     </svg>
 );
 
-// ... (AppInternalLogic بدون تغییر) ...
-const AppInternalLogic: React.FC<{
-  isMicActive: boolean;
-  isCamActive: boolean;
-  setIsMicActive: React.Dispatch<React.SetStateAction<boolean>>;
-  setIsCamActive: React.Dispatch<React.SetStateAction<boolean>>;
-  createLogoFunction: (isMini: boolean, isActive: boolean, type?: 'human' | 'ai', forFooter?: boolean) => React.ReactNode;
-  videoRef: React.RefObject<HTMLVideoElement>;
-  notificationPopoverRef: React.RefObject<HTMLDivElement>;
-  notificationButtonRef: React.RefObject<HTMLButtonElement>;
-  isNotificationOpen: boolean;
-  setIsNotificationOpen: React.Dispatch<React.SetStateAction<boolean>>;
-}> = ({
-  isMicActive,
-  isCamActive,
-  setIsMicActive,
-  setIsCamActive,
-  createLogoFunction,
-  videoRef,
-  notificationPopoverRef,
-  notificationButtonRef,
-  isNotificationOpen,
-  setIsNotificationOpen
+const AppInternalLogic: React.FC<{ /* ...props... */ }> = ({ /* ...props... */
+  isMicActive, isCamActive, setIsMicActive, setIsCamActive, createLogoFunction,
+  videoRef, notificationPopoverRef, notificationButtonRef, isNotificationOpen, setIsNotificationOpen
 }) => {
   const { connected, disconnect } = useLiveAPIContext();
-
-  useEffect(() => {
-    if (!isMicActive && !isCamActive && connected) {
-      disconnect();
-    }
-  }, [isMicActive, isCamActive, connected, disconnect]);
+  useEffect(() => { if (!isMicActive && !isCamActive && connected) { disconnect(); } }, [isMicActive, isCamActive, connected, disconnect]);
 
   return (
     <div className="w-full flex flex-col items-center justify-center min-h-screen text-foreground antialiased">
       <div className="main-wrapper max-w-3xl w-full flex flex-col items-center justify-center h-full relative">
+        {/* Header and Popover ... */}
         <div className="header-controls">
           <div id="notification-trigger-container">
-            <button
-              ref={notificationButtonRef}
-              id="notification-button"
-              aria-label="Notifications"
-              className="header-button"
-              onClick={(e) => {
-                  e.stopPropagation();
-                  setIsNotificationOpen(!isNotificationOpen);
-                }}
-            >
+            <button ref={notificationButtonRef} id="notification-button" aria-label="Notifications" className="header-button" onClick={(e) => { e.stopPropagation(); setIsNotificationOpen(!isNotificationOpen); }}>
               <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="12"></line><line x1="12" y1="16" x2="12.01" y2="16"></line></svg>
             </button>
           </div>
           <div className="back-button-container">
-            <button
-              id="back-button"
-              aria-label="Go back"
-              className="header-button"
-              onClick={() => alert('Back clicked (implement navigation)')}
-            >
+            <button id="back-button" aria-label="Go back" className="header-button" onClick={() => alert('Back clicked (implement navigation)')}>
               <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="m15 18-6-6 6-6"></path></svg>
             </button>
           </div>
         </div>
-
         <div ref={notificationPopoverRef} id="notification-popover-wrapper" className="notification-popover-wrapper">
-          <div
-            id="notification-popover"
-            className={cn("popover-content", {
-              "open animate-popover-open-top-center": isNotificationOpen,
-              "animate-popover-close-top-center": !isNotificationOpen && document.getElementById('notification-popover')?.classList.contains('open'),
-            })}
-          >
-            <div className="notification-popover-text-content">
-              مدل‌های هوش مصنوعی می‌توانند اشتباه کنند، صحت اطلاعات مهم را بررسی کنید و از وارد کردن اطلاعات حساس بپرهیزید.
-            </div>
+          <div id="notification-popover" className={cn("popover-content", { "open animate-popover-open-top-center": isNotificationOpen, "animate-popover-close-top-center": !isNotificationOpen && document.getElementById('notification-popover')?.classList.contains('open'), })}>
+            <div className="notification-popover-text-content"> مدل‌های هوش مصنوعی می‌توانند اشتباه کنند، صحت اطلاعات مهم را بررسی کنید و از وارد کردن اطلاعات حساس بپرهیزید. </div>
           </div>
         </div>
 
         <div className="media-area w-full flex flex-col items-center justify-center flex-grow relative">
-          <video
-            id="video-feed"
-            ref={videoRef}
-            autoPlay
-            playsInline
-            className={cn(
-              "absolute top-0 left-0 w-full h-full object-cover scale-x-[-1]",
-              { "hidden": !isCamActive }
-            )}
-          />
+          <video id="video-feed" ref={videoRef} autoPlay playsInline className={cn("absolute top-0 left-0 w-full h-full object-cover scale-x-[-1]", { "hidden": !isCamActive })} />
+          {/* *** MODIFIED: Ensure large logo is displayed correctly *** */}
           {isMicActive && !isCamActive && (
-            <div
-              id="large-logo-container"
-              className="absolute top-0 left-0 w-full h-full flex items-center justify-center pointer-events-none"
-            >
+            <div id="large-logo-container" className="large-logo-container-style">
               {createLogoFunction(false, true, 'human', false)}
             </div>
           )}
         </div>
-
-        <ControlTray
-          videoRef={videoRef}
-          supportsVideo={true}
-          onVideoStreamChange={(stream) => { /* ... */ }}
-          isAppMicActive={isMicActive}
-          onAppMicToggle={setIsMicActive}
-          isAppCamActive={isCamActive}
-          onAppCamToggle={setIsCamActive}
+        <ControlTray /* ...props... */ 
+          videoRef={videoRef} supportsVideo={true} onVideoStreamChange={() => {}}
+          isAppMicActive={isMicActive} onAppMicToggle={setIsMicActive}
+          isAppCamActive={isCamActive} onAppCamToggle={setIsCamActive}
           createLogoFunction={createLogoFunction}
           ReferenceMicrophoneIcon={SvgReferenceMicrophoneIcon}
         />
       </div>
     </div>
   );
-}
-
+};
 
-const logoColorConfig = {
-  blue: {
-    ping: "bg-blue-200 dark:bg-blue-700",
-    outer: "bg-blue-200 dark:bg-blue-700",
-    mid: "bg-blue-300 dark:bg-blue-600",
-    inner: "bg-blue-400 dark:bg-blue-500",
-  },
-  green: {
-    ping: "bg-green-200 dark:bg-green-700",
-    outer: "bg-green-200 dark:bg-green-700",
-    mid: "bg-green-300 dark:bg-green-600",
-    inner: "bg-green-400 dark:bg-green-500",
-  },
-  gray: {
-    ping: "bg-gray-200 dark:bg-gray-700",
-    outer: "bg-gray-200 dark:bg-gray-700",
-    mid: "bg-gray-300 dark:bg-gray-600",
-    inner: "bg-gray-400 dark:bg-gray-500",
-  }
+const logoColorConfig = { /* ... (بدون تغییر) ... */
+  blue: { ping: "bg-blue-200 dark:bg-blue-700", outer: "bg-blue-200 dark:bg-blue-700", mid: "bg-blue-300 dark:bg-blue-600", inner: "bg-blue-400 dark:bg-blue-500", },
+  green: { ping: "bg-green-200 dark:bg-green-700", outer: "bg-green-200 dark:bg-green-700", mid: "bg-green-300 dark:bg-green-600", inner: "bg-green-400 dark:bg-green-500", },
+  gray: { ping: "bg-gray-200 dark:bg-gray-700", outer: "bg-gray-200 dark:bg-gray-700", mid: "bg-gray-300 dark:bg-gray-600", inner: "bg-gray-400 dark:bg-gray-500", }
 };
 
-function App() {
+function App() { /* ... (state ها و useEffect ها بدون تغییر) ... */
   const videoRef = useRef<HTMLVideoElement>(null);
   const [showIOSModal, setShowIOSModal] = useState(false);
   const [isAllowedOrigin, setIsAllowedOrigin] = useState<boolean | null>(null);
-
   const [isMicActive, setIsMicActive] = useState(false);
   const [isCamActive, setIsCamActive] = useState(false);
   const [isNotificationOpen, setIsNotificationOpen] = useState(false);
-
   const notificationPopoverRef = useRef<HTMLDivElement>(null);
   const notificationButtonRef = useRef<HTMLButtonElement>(null);
+  useEffect(() => { if (isIOS()) { setShowIOSModal(true); } const timer = setTimeout(() => { setIsAllowedOrigin(true); }, 100); return () => clearTimeout(timer); }, []);
+  useEffect(() => { const handleClickOutside = (event: MouseEvent) => { if (isNotificationOpen && notificationPopoverRef.current && !notificationPopoverRef.current.contains(event.target as Node) && notificationButtonRef.current && !notificationButtonRef.current.contains(event.target as Node)) { setIsNotificationOpen(false); } }; document.addEventListener("mousedown", handleClickOutside); return () => { document.removeEventListener("mousedown", handleClickOutside); }; }, [isNotificationOpen]);
+  if (isAllowedOrigin === null) { return <div style={{ padding: '20px', textAlign: 'center' }}>در حال بررسی دسترسی...</div>; }
 
-  useEffect(() => {
-    if (isIOS()) {
-      setShowIOSModal(true);
-    }
-    const timer = setTimeout(() => {
-        setIsAllowedOrigin(true);
-    }, 100);
-    return () => clearTimeout(timer);
-  }, []);
-
-  useEffect(() => {
-    const handleClickOutside = (event: MouseEvent) => {
-      if (
-        isNotificationOpen &&
-        notificationPopoverRef.current &&
-        !notificationPopoverRef.current.contains(event.target as Node) &&
-        notificationButtonRef.current &&
-        !notificationButtonRef.current.contains(event.target as Node)
-      ) {
-        setIsNotificationOpen(false);
-      }
-    };
-    document.addEventListener("mousedown", handleClickOutside);
-    return () => {
-      document.removeEventListener("mousedown", handleClickOutside);
-    };
-  }, [isNotificationOpen]);
-
-  if (isAllowedOrigin === null) {
-    return <div style={{ padding: '20px', textAlign: 'center' }}>در حال بررسی دسترسی...</div>;
-  }
-
-  // *** MODIFIED: createLogoFunction با دقت بیشتر در inset ها و رنگ ها ***
+  // *** MODIFIED createLogoFunction for complete animation ***
   const createLogoFunction = (isMini: boolean, isActive: boolean, type: 'human' | 'ai' = 'human', forFooter: boolean = false) => {
     if (!isActive) return null;
 
@@ -297,25 +186,23 @@ function App() {
     const iconDisplaySize = isMini ? 35 : 70;
     const iconInset = (size - iconDisplaySize) / 2;
 
-    // مقادیر inset برای حلقه‌ها از HTML مرجع شما (با توجه به isMini)
-    // این مقادیر باید دقیق باشند تا حلقه‌ها درست نمایش داده شوند.
-    const pingInset = isMini ? 10 : 40;
-    const outerInset = 0; // در HTML مرجع شما، outer ring معمولاً inset صفر دارد
-    const midInset = isMini ? 5 : 20;
-    const innerInset = isMini ? 12 : 50;
+    // مقادیر inset برای حلقه‌ها از HTML مرجع شما (مهم)
+    // این مقادیر باید فاصله حلقه‌ها از لبه کانتینر اصلی لوگو باشند
+    const insetsForRings = isMini 
+        ? { ping: 10, outer: 0, mid: 5, inner: 12 } // مقادیر HTML برای لوگوی کوچک
+        : { ping: 40, outer: 0, mid: 20, inner: 50 }; // مقادیر HTML برای لوگوی بزرگ
 
     const IconComponent = type === 'human' ? SvgHumanIcon : null;
 
     return (
+      // کلاس logo-animation-wrapper در App.scss استایل‌های position:relative و flex را دارد
       <div className={cn("logo-animation-wrapper", {"for-footer": forFooter})} style={{ width: `${size}px`, height: `${size}px` }}>
-        {/* حلقه Ping (متحرک) */}
-        <div className={`absolute rounded-full opacity-50 animate-ping ${currentColors.ping}`} style={{ inset: `${pingInset}px` }}></div>
-        {/* حلقه بیرونی */}
-        <div className={`absolute rounded-full opacity-50 ${currentColors.outer}`} style={{ inset: `${outerInset}px` }}></div>
-        {/* حلقه میانی */}
-        <div className={`absolute rounded-full opacity-50 ${currentColors.mid}`} style={{ inset: `${midInset}px` }}></div>
-        {/* حلقه داخلی */}
-        <div className={`absolute rounded-full opacity-50 ${currentColors.inner}`} style={{ inset: `${innerInset}px` }}></div>
+        {/* حلقه‌های انیمیشن با inset های صحیح */}
+        <div className={`absolute rounded-full opacity-50 animate-ping ${currentColors.ping}`} style={{ inset: `${insetsForRings.ping}px` }}></div>
+        <div className={`absolute rounded-full opacity-50 ${currentColors.outer}`} style={{ inset: `${insetsForRings.outer}px` }}></div>
+        <div className={`absolute rounded-full opacity-50 ${currentColors.mid}`} style={{ inset: `${insetsForRings.mid}px` }}></div>
+        <div className={`absolute rounded-full opacity-50 ${currentColors.inner}`} style={{ inset: `${insetsForRings.inner}px` }}></div>
+        
         {/* کانتینر آیکون */}
         <div className="z-10 absolute flex items-center justify-center" style={{ inset: `${iconInset}px`, width: `${iconDisplaySize}px`, height: `${iconDisplaySize}px` }}>
           {IconComponent && <IconComponent />}
@@ -326,17 +213,13 @@ function App() {
 
   return (
     <LiveAPIProvider initialConfig={initialAppConfig}>
-      <AppInternalLogic
-        isMicActive={isMicActive}
-        setIsMicActive={setIsMicActive}
-        isCamActive={isCamActive}
-        setIsCamActive={setIsCamActive}
+      <AppInternalLogic /* ...props... */ 
+        isMicActive={isMicActive} setIsMicActive={setIsMicActive}
+        isCamActive={isCamActive} setIsCamActive={setIsCamActive}
         createLogoFunction={createLogoFunction}
         videoRef={videoRef}
-        notificationPopoverRef={notificationPopoverRef}
-        notificationButtonRef={notificationButtonRef}
-        isNotificationOpen={isNotificationOpen}
-        setIsNotificationOpen={setIsNotificationOpen}
+        notificationPopoverRef={notificationPopoverRef} notificationButtonRef={notificationButtonRef}
+        isNotificationOpen={isNotificationOpen} setIsNotificationOpen={setIsNotificationOpen}
       />
       <IOSModal isOpen={showIOSModal} onClose={() => setShowIOSModal(false)} />
     </LiveAPIProvider>