create iframe view and fix preview map

src/renderer/App.tsx

@@ -12,6 +12,7 @@ import { NotificationOverlay } from "./components/notification/notification-over
 import { PageStateService } from "./services/page-state.service";
 import MapsPage from "./pages/maps-page.component";
 import "tailwindcss/tailwind.css";
+import { BsmIframeView } from "./components/shared/bsm-map-preview.component";
 
 export default function App() {
 
@@ -38,6 +39,7 @@ export default function App() {
       <Modal/>
       <NavBar/>
       <NotificationOverlay/>
+      <BsmIframeView/>
       <div className="relative flex flex-col grow max-w-full min-w-0">
         <TitleBar/>
         <div className="bg-light-main-color-2 dark:bg-main-color-2 relative rounded-tl-lg grow overflow-hidden max-w-full">

src/renderer/components/maps-mangement-components/map-item.component.tsx

@@ -222,11 +222,6 @@ export const MapItem = memo(({hash, title, autor, songAutor, coverUrl, songUrl,
 }, areEqual)
 
 function areEqual(prevProps: MapItemProps, nextProps: MapItemProps): boolean {
-    Array.from(Object.entries(prevProps)).forEach(v => {
-        if(!equal(prevProps[v[0]], nextProps[v[0]])){
-            console.log(v[0]);
-        }
-    });
     return equal(prevProps, nextProps);
 }
 

src/renderer/components/modal/modal-types/iframe-modal.component.tsx

@@ -1,9 +0,0 @@
-import { ModalComponent } from "renderer/services/modale.service"
-
-export const IframeModal: ModalComponent<void, string> = ({resolver, data}) => {
-  return (
-    <div className="w-[calc(100vw-250px)] h-[calc(100vh-250px)]">
-        <iframe className="w-full h-full" src={data}></iframe>
-    </div>
-  )
-}

src/renderer/components/shared/bsm-map-preview.component.tsx

@@ -0,0 +1,28 @@
+import { AnimatePresence, motion } from "framer-motion";
+import { useRef } from "react";
+import { useClickOutside } from "renderer/hooks/use-click-outside.hook";
+import { useObservable } from "renderer/hooks/use-observable.hook"
+import { LinkOpenerService } from "renderer/services/link-opener.service";
+
+export function BsmIframeView() {
+
+    const linkService = LinkOpenerService.getInstance()
+
+    const iframeUrl = useObservable(linkService.iframeLink$);
+    const ref = useRef(null);
+    useClickOutside(ref, () => linkService.closeIframe());
+
+    return (
+        <AnimatePresence>
+            {iframeUrl && (
+                <div className="top-0 absolute w-screen h-screen flex content-center items-center justify-center z-50">
+                    <motion.span className="absolute w-full h-full bg-black top-0 right-0" initial={{opacity: 0}} animate={{opacity: .60}} exit={{opacity: 0}} transition={{duration: .2}}/>
+                    <motion.div ref={ref} className="z-[1] w-[calc(100vw-250px)] h-[calc(100vh-250px)] shadow-black shadow-md rounded-md overflow-hidden bg-black" initial={{y: "100vh"}} animate={{y: 0}} exit={{y: "100vh"}}>
+                        <iframe className="w-full h-full" src={iframeUrl}/>
+                    </motion.div>
+                </div>
+            )}
+            
+        </AnimatePresence>
+    )
+}

src/renderer/services/link-opener.service.ts

@@ -1,13 +1,14 @@
-import { IframeModal } from "renderer/components/modal/modal-types/iframe-modal.component";
+import { Observable } from "rxjs";
+import { Subject } from "rxjs";
 import { IpcService } from "./ipc.service";
-import { ModalService } from "./modale.service";
 
 export class LinkOpenerService{
 
     private static instance: LinkOpenerService;
 
     private readonly ipcService: IpcService;
-    private readonly modals: ModalService;
+    
+    private readonly _iframeLink$: Subject<string> = new Subject();
 
     public static getInstance(): LinkOpenerService{
         if(!LinkOpenerService.instance){ LinkOpenerService.instance = new LinkOpenerService(); }
@@ -16,15 +17,21 @@ export class LinkOpenerService{
 
     private constructor(){
         this.ipcService = IpcService.getInstance();
-        this.modals = ModalService.getInsance();
     }
 
     public open(url: string, internal?: boolean): void{
         if(internal){
-            this.modals.openModal(IframeModal, url);
-            return;
+            return this._iframeLink$.next(url);
         }
         this.ipcService.sendLazy("new-window", {args: url});
     }
 
+    public closeIframe(){
+        this._iframeLink$.next(null);
+    }
+
+    public get iframeLink$(): Observable<string>{
+        return this._iframeLink$.asObservable();
+    }
+
 }