Update src/App.tsx

src/App.tsx

@@ -12,20 +12,17 @@ limitations under the License.
 */
 
 import React, { useEffect, useRef, useState, useCallback } from "react";
-import "./App.scss"; // Updated SCSS file
+import "./App.scss";
 import { LiveAPIProvider, useLiveAPIContext } from "./contexts/LiveAPIContext";
-// SidePanel and Altair are part of the original Gemini UI.
-// You need to decide if/how they fit into the new UI.
-// For now, we'll include them but they might need styling or to be conditionally rendered.
 // import SidePanel from "./components/side-panel/SidePanel"; // اگر استفاده نمیکنید کامنت کنید
 import { Altair } from "./components/altair/Altair";
-import ControlTray from "./components/control-tray/ControlTray"; // This will be our new footer
+import ControlTray from "./components/control-tray/ControlTray";
 import { IOSModal } from "./components/ios-modal/IOSModal";
 import { isIOS } from "./lib/platform";
 import { LiveConfig } from "./multimodal-live-types";
 
-// --- 👇 دامنه مجاز خودتان را اینجا قرار دهید (با https یا http) 👇 ---
-const ALLOWED_ORIGIN = "https://www.aisada.ir"; // یا "http://www.aisada.ir"; // یا "https://aisada.ir"; // یا "http://aisada.ir" اگر سایتتان http است
+// --- 👇 دامنه **ممنوع** شما 👇 ---
+const FORBIDDEN_ORIGIN = "https://www.aisada.ir"; // یا "http://www.aisada.ir";
 // --- 👆 ---
 
 // --- 👇 دستورالعمل شخصی‌سازی شما (بدون تغییر) 👇 ---
@@ -101,16 +98,13 @@ const myCustomInstruction = `
 `.trim();
 // --- 👆 ---
 
-// --- 👇 تنظیمات اولیه (بدون تغییر) 👇 ---
 const initialAppConfig: LiveConfig = {
-    model: "models/gemini-2.0-flash-exp", // یا هر مدلی که استفاده می‌کنید
+    model: "models/gemini-2.0-flash-exp",
     systemInstruction: {
         parts: [{ text: myCustomInstruction }]
     }
 };
-// --- 👆 ---
 
-// SVG Icons (as React components or functions returning JSX)
 const NotificationIcon = () => (
     <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>
 );
@@ -124,19 +118,16 @@ const HumanIconSVG = ({ width = 70, height = 70 }: { width?: number, height?: nu
 );
 
 const LogoDisplay = ({ isMini, isHumanActive }: { isMini: boolean, isHumanActive: boolean }) => {
-    if (!isHumanActive) return null; // Simplified: only show human logo
-
+    if (!isHumanActive) return null;
     const size = isMini ? 80 : 200;
     const iconSize = isMini ? 35 : 70;
     const insetBase = isMini
-        ? { ping: 10, outer: 0, mid: 5, inner: 12, icon: 22.5 } // Centered icon
-        : { ping: 40, outer: 0, mid: 20, inner: 50, icon: 65 };  // Centered icon
-    const bgColorBase = 'blue'; // Simplified to blue for human
+        ? { ping: 10, outer: 0, mid: 5, inner: 12, icon: 22.5 }
+        : { ping: 40, outer: 0, mid: 20, inner: 50, icon: 65 };
+    const bgColorBase = 'blue';
 
     return (
         <div className="relative" style={{ width: `${size}px`, height: `${size}px` }}>
-            {/* These divs are for Tailwind JIT, not strictly needed if classes are used directly */}
-            {/* <div className="hidden bg-blue-200 bg-blue-300 bg-blue-400"></div> */}
             <div className={`absolute rounded-full opacity-50 animate-ping bg-${bgColorBase}-200 dark:bg-${bgColorBase}-700`} style={{ inset: `${insetBase.ping}px` }}></div>
             <div className={`absolute rounded-full opacity-50 bg-${bgColorBase}-200 dark:bg-${bgColorBase}-700`} style={{ inset: `${insetBase.outer}px` }}></div>
             <div className={`absolute rounded-full opacity-50 bg-${bgColorBase}-300 dark:bg-${bgColorBase}-600`} style={{ inset: `${insetBase.mid}px` }}></div>
@@ -148,54 +139,57 @@ const LogoDisplay = ({ isMini, isHumanActive }: { isMini: boolean, isHumanActive
     );
 };
 
-
 function AppContent() {
     const videoRef = useRef<HTMLVideoElement>(null);
-    const [videoStream, setVideoStream] = useState<MediaStream | null>(null);
     const [showIOSModal, setShowIOSModal] = useState(false);
-    const [isAllowedOrigin, setIsAllowedOrigin] = useState<boolean | null>(null);
-    const [isNotificationOpen, setIsNotificationOpen] = useState(false); // <--- اصلاح در این خط
+    const [isAllowedOrigin, setIsAllowedOrigin] = useState<boolean | null>(null); // true: allowed, false: blocked
+    const [isNotificationOpen, setIsNotificationOpen] = useState(false);
     const notificationPopoverRef = useRef<HTMLDivElement>(null);
     const notificationButtonRef = useRef<HTMLButtonElement>(null);
 
-    // States for new UI, to be controlled by ControlTray or LiveAPIContext
-    const [isMicActive, setIsMicActive] = useState(false); // Is microphone capturing
-    const [isCamActive, setIsCamActive] = useState(false); // Is camera capturing
+    const [isMicActive, setIsMicActive] = useState(false);
+    const [isCamActive, setIsCamActive] = useState(false);
 
-    const { connected, volume } = useLiveAPIContext(); // Get connection status and volume
+    const { connected, volume } = useLiveAPIContext();
 
     useEffect(() => {
         if (isIOS()) {
             setShowIOSModal(true);
         }
 
+        // --- 👇 منطق بررسی دامنه مجاز (معکوس شده) 👇 ---
         try {
-            if (window.self !== window.top) {
+            if (window.self !== window.top) { // App is in an iframe
                 if (window.location.ancestorOrigins && window.location.ancestorOrigins.length > 0) {
                     const parentOrigin = window.location.ancestorOrigins[0];
-                    if (parentOrigin === ALLOWED_ORIGIN) {
-                        setIsAllowedOrigin(true);
+                    console.log("Parent Origin:", parentOrigin);
+                    if (parentOrigin === FORBIDDEN_ORIGIN) {
+                        console.warn(`Blocked load from forbidden origin: ${parentOrigin}`);
+                        setIsAllowedOrigin(false); // Block if from forbidden origin
                     } else {
-                        console.warn(`Blocked load from origin: ${parentOrigin}`);
-                        setIsAllowedOrigin(false);
+                        console.log(`Allowed load from origin: ${parentOrigin}`);
+                        setIsAllowedOrigin(true); // Allow if from any other origin
                     }
                 } else {
-                    console.warn("Cannot verify parent origin (ancestorOrigins not available/empty). Blocking.");
-                    setIsAllowedOrigin(false);
+                    // Cannot verify parent origin, but it's in an iframe.
+                    // For "allow everywhere except specific site", we can assume allow here.
+                    console.warn("Cannot verify parent origin (ancestorOrigins not available/empty), but in iframe. Allowing.");
+                    setIsAllowedOrigin(true);
                 }
-            } else {
-                console.warn("App loaded directly, not in an iframe. Blocking.");
-                setIsAllowedOrigin(false); // For security, must be in iframe from allowed origin
+            } else { // App loaded directly, not in an iframe
+                console.log("App loaded directly. Allowing.");
+                setIsAllowedOrigin(true); // Allow if loaded directly
             }
         } catch (e) {
-            console.error("Cross-origin access error, cannot verify parent. Blocking.", e);
-            setIsAllowedOrigin(false);
+            // Cross-origin access error. This usually happens if the iframe has sandbox attributes
+            // that prevent accessing ancestorOrigins. In this "allow everywhere except" scenario,
+            // it's safer to allow if we can't determine, or block if you prefer higher security.
+            // Let's allow for wider compatibility, assuming it's not the forbidden one.
+            console.error("Cross-origin access error, cannot verify parent. Allowing by default.", e);
+            setIsAllowedOrigin(true);
         }
+        // --- 👆 ---
 
-        // Dark mode toggle for testing (can be removed or integrated with a theme switcher)
-        // document.documentElement.classList.add('dark');
-
-        // Click outside listener for notification popover
         const handleClickOutside = (event: MouseEvent) => {
             if (isNotificationOpen &&
                 notificationPopoverRef.current &&
@@ -213,10 +207,8 @@ function AppContent() {
 
     }, [isNotificationOpen]);
 
-
     const handleVideoStreamChange = useCallback((stream: MediaStream | null) => {
-        setVideoStream(stream);
-        setIsCamActive(!!stream); // Update cam active state based on stream
+        setIsCamActive(!!stream);
         if (videoRef.current) {
              videoRef.current.srcObject = stream;
              if (stream) {
@@ -224,32 +216,35 @@ function AppContent() {
              }
         }
     }, []);
-    
+
     useEffect(() => {
-        // This useEffect was intended for CSS --volume for mic pulse,
-        // but ControlTray.tsx now handles its own inVolume for that.
-        // This 'volume' from useLiveAPIContext is usually output volume.
-        // If you need to visualize output volume elsewhere, you can use it.
+        // This effect is for potential output volume visualization, not currently used for mic pulse
     }, [volume]);
 
-
     if (isAllowedOrigin === null) {
         return <div style={{ padding: '20px', textAlign: 'center' }}>در حال بررسی دسترسی...</div>;
     }
 
+    // --- 👇 رندر شرطی با پیام خطای جدید 👇 ---
     if (isAllowedOrigin === false) {
-        return <div style={{ padding: '20px', textAlign: 'center', color: 'red' }}>دسترسی غیرمجاز! اگر چت صوتی و تصویری برای شما باز نمیشود این لینک رو با مرورگر کروم باز کنید و همچنین مرورگر کروم رو به عنوان مرورگر پیشفرض گوشی خود قرار دهید تا هر بار زدن روی دکمه شروع داخل برنامه لینک با مرورگر کروم باز بشه، برای پیشفرض قرار دادن مرورگر کروم وارد تنظیمات گوشی خود شوید قسمت برنامه ها ، مدیریت برنامه ها رو کلیک کنید بالای صفحه روی سه نقطه بزنید و تنظیمات بیشتر رو انتخاب کنید بعدا وارد قسمت برنامه های پیش فرض شوید و مرورگر کروم رو به عنوان مرورگر پیشفرض خود قرار دهید، اگر مشکلی بود حتماً به پشتیبانی برنامه پیام بفرستید</div>;
+        // این پیام زمانی نمایش داده می‌شود که برنامه در iframe سایت ممنوعه (aisada.ir) بارگذاری شود.
+        return (
+            <div style={{ padding: '20px', textAlign: 'center', color: 'red', direction: 'rtl' }}>
+                دسترسی به این محتوا از دامنه شما ({FORBIDDEN_ORIGIN}) مجاز نمی‌باشد.
+                <br />
+                لطفا این اسپیس را مستقیما یا از طریق دامنه‌های مجاز دیگر باز کنید.
+            </div>
+        );
     }
+    // --- 👆 ---
 
+    // اگر isAllowedOrigin === true بود، برنامه اصلی رندر می‌شود
     return (
-        <div className="App"> {/* Main container from original Gemini App */}
-            {/* <SidePanel />  // اگر استفاده نمیکنید کامنت کنید یا حذف کنید */}
-            <main> {/* Original main, Altair will go here */}
-                <div className="main-app-area"> {/* For Altair and video */}
-                     {/* Altair is the chat bubbles. Position it as needed. */}
+        <div className="App">
+            {/* <SidePanel /> */}
+            <main>
+                <div className="main-app-area">
                     <Altair />
-
-                    {/* Header */}
                     <div className="header-controls">
                         <button
                             id="notification-button"
@@ -268,7 +263,6 @@ function AppContent() {
                         </button>
                     </div>
 
-                    {/* Notification Popover */}
                     <div id="notification-popover-wrapper" className="notification-popover-wrapper">
                         <div
                             id="notification-popover"
@@ -281,7 +275,6 @@ function AppContent() {
                         </div>
                     </div>
                     
-                    {/* Media Area (Video feed and Logos) */}
                     <div className="media-toggle-area">
                         <video
                             id="video-feed"
@@ -290,23 +283,20 @@ function AppContent() {
                             playsInline
                             className={`video-feed ${!isCamActive ? 'hidden' : ''}`}
                         />
-                        {!isCamActive && isMicActive && ( // Show large logo if mic is on and cam is off
+                        {!isCamActive && isMicActive && (
                             <div id="large-logo-container" className="large-logo-container">
                                 <LogoDisplay isMini={false} isHumanActive={true} />
                             </div>
                         )}
-                        {/* The small logo is part of the footer logic in ControlTray */}
                     </div>
                 </div>
 
-                {/* Footer Controls */}
                 <ControlTray
-                    videoRef={videoRef} // Pass videoRef for video operations
+                    videoRef={videoRef}
                     onVideoStreamChange={handleVideoStreamChange}
-                    // Pass setters for App to know mic/cam state for UI logic (e.g., logos)
                     setIsMicActive={setIsMicActive}
-                    setIsCamActiveExternal={setIsCamActive} // Renamed to avoid conflict if ControlTray has its own isCamActive
-                    isCamActiveApp={isCamActive} // Pass down App's view of cam state
+                    setIsCamActiveExternal={setIsCamActive}
+                    isCamActiveApp={isCamActive}
                 />
             </main>