Update src/App.tsx

src/App.tsx

@@ -1,16 +1,4 @@
-/**
-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.
-*/
-
+// ... (ایمپورت‌ها، myCustomInstruction, initialAppConfig، تعریف SvgHumanIcon و SvgReferenceMicrophoneIcon بدون تغییر) ...
 import React, { useEffect, useRef, useState } from "react";
 import './App.scss';
 import { LiveAPIProvider, useLiveAPIContext } from "./contexts/LiveAPIContext";
@@ -119,6 +107,7 @@ const SvgReferenceMicrophoneIcon = () => (
     </svg>
 );
 
+
 const AppInternalLogic: React.FC<{
   isMicActive: boolean;
   isCamActive: boolean;
@@ -140,7 +129,7 @@ const AppInternalLogic: React.FC<{
   notificationPopoverRef,
   notificationButtonRef,
   isNotificationOpen,
-  setIsNotificationOpen // اطمینان از وجود کاما در صورت نیاز در کپی پیست‌های قبلی
+  setIsNotificationOpen
 }) => {
   const { connected, disconnect } = useLiveAPIContext();
 
@@ -153,6 +142,7 @@ const AppInternalLogic: React.FC<{
   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 Notification Popover بدون تغییر) ... */}
         <div className="header-controls">
           <div id="notification-trigger-container">
             <button
@@ -194,6 +184,7 @@ const AppInternalLogic: React.FC<{
           </div>
         </div>
 
+
         <div className="media-area w-full flex flex-col items-center justify-center flex-grow relative">
           <video
             id="video-feed"
@@ -205,11 +196,13 @@ const AppInternalLogic: React.FC<{
               { "hidden": !isCamActive }
             )}
           />
+          {/* نمایش لوگوی بزرگ فقط زمانی که میکروفون فعال است و دوربین غیرفعال */}
           {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"
+              className="large-logo-container-class" // استفاده از کلاس برای استایل دهی بهتر
             >
+              {/* پارامتر forFooter اینجا false است چون برای لوگوی بزرگ است */}
               {createLogoFunction(false, true, 'human', false)}
             </div>
           )}
@@ -229,7 +222,7 @@ const AppInternalLogic: React.FC<{
       </div>
     </div>
   );
-};
+}
 
 const logoColorConfig = {
   blue: {
@@ -238,13 +231,8 @@ const logoColorConfig = {
     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: {
+  // ... (رنگ‌های دیگر اگر نیاز باشد) ...
+  gray: { // fallback
     ping: "bg-gray-200 dark:bg-gray-700",
     outer: "bg-gray-200 dark:bg-gray-700",
     mid: "bg-gray-300 dark:bg-gray-600",
@@ -253,6 +241,7 @@ const logoColorConfig = {
 };
 
 function App() {
+  // ... (state ها و useEffect های دیگر بدون تغییر) ...
   const videoRef = useRef<HTMLVideoElement>(null);
   const [showIOSModal, setShowIOSModal] = useState(false);
   const [isAllowedOrigin, setIsAllowedOrigin] = useState<boolean | null>(null);
@@ -296,33 +285,38 @@ function App() {
     return <div style={{ padding: '20px', textAlign: 'center' }}>در حال بررسی دسترسی...</div>;
   }
 
+
   const createLogoFunction = (isMini: boolean, isActive: boolean, type: 'human' | 'ai' = 'human', forFooter: boolean = false) => {
     if (!isActive) return null;
 
-    const colorKey = type === 'human' ? 'blue' : (type === 'ai' ? 'green' : 'gray');
-    const currentColors = logoColorConfig[colorKey as keyof typeof logoColorConfig] || logoColorConfig.gray;
+    const colorKey = type === 'human' ? 'blue' : 'gray'; // Simplified for now
+    const currentColors = logoColorConfig[colorKey as keyof typeof logoColorConfig];
 
-    const size = isMini ? 80 : 200;
-    const iconDisplaySize = isMini ? 35 : 70;
-    const iconInset = (size - iconDisplaySize) / 2;
+    const size = isMini ? 80 : 200; // اندازه کلی کانتینر لوگو
+    const iconDisplaySize = isMini ? 35 : 70; // اندازه بصری آیکون SVG
 
-    const insetValues = {
-        ping: isMini ? 10 : 40,
-        outer: 0,
-        mid: isMini ? 5 : 20,
-        inner: isMini ? 12 : 50,
-        icon: iconInset
-    };
+    const iconInset = (size - iconDisplaySize) / 2; // محاسبه برای وسط چین کردن
+
+    // مقادیر inset برای حلقه‌ها از HTML مرجع شما (با توجه به isMini)
+    const baseInsets = isMini
+        ? { ping: 10, outer: 0, mid: 5, inner: 12 } // مقادیر HTML برای isMini=true
+        : { ping: 40, outer: 0, mid: 20, inner: 50 };// مقادیر HTML برای isMini=false
 
     const IconComponent = type === 'human' ? SvgHumanIcon : null;
 
     return (
+      // کانتینر اصلی با اندازه مشخص شده
       <div className={cn("logo-animation-wrapper", {"for-footer": forFooter})} style={{ width: `${size}px`, height: `${size}px` }}>
-        <div className={`absolute rounded-full opacity-50 animate-ping ${currentColors.ping}`} style={{ inset: `${insetValues.ping}px` }}></div>
-        <div className={`absolute rounded-full opacity-50 ${currentColors.outer}`} style={{ inset: `${insetValues.outer}px` }}></div>
-        <div className={`absolute rounded-full opacity-50 ${currentColors.mid}`} style={{ inset: `${insetValues.mid}px` }}></div>
-        <div className={`absolute rounded-full opacity-50 ${currentColors.inner}`} style={{ inset: `${insetValues.inner}px` }}></div>
-        <div className="z-10 absolute flex items-center justify-center" style={{ inset: `${insetValues.icon}px`, width: `${iconDisplaySize}px`, height: `${iconDisplaySize}px` }}>
+        {/* حلقه پینگ */}
+        <div className={`absolute rounded-full opacity-50 animate-ping ${currentColors.ping}`} style={{ inset: `${baseInsets.ping}px` }}></div>
+        {/* حلقه بیرونی */}
+        <div className={`absolute rounded-full opacity-50 ${currentColors.outer}`} style={{ inset: `${baseInsets.outer}px` }}></div>
+        {/* حلقه میانی */}
+        <div className={`absolute rounded-full opacity-50 ${currentColors.mid}`} style={{ inset: `${baseInsets.mid}px` }}></div>
+        {/* حلقه داخلی */}
+        <div className={`absolute rounded-full opacity-50 ${currentColors.inner}`} style={{ inset: `${baseInsets.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 />}
         </div>
       </div>