From 8ed3f405d2f725ba94fb6a4bbb3050cf7074ff2b Mon Sep 17 00:00:00 2001
From: Quentin  VERDIER <quent1.verdier@gmail.com>
Date: Wed, 8 Oct 2025 16:07:08 +0200
Subject: [PATCH 1/2] =?UTF-8?q?=E2=9C=A8=20Implement=20iframe=20caching=20?=
 =?UTF-8?q?mechanism:=20add=20IframeCacheProvider=20and=20CachedIframePort?=
 =?UTF-8?q?al=20components,=20update=20ChatItem=20and=20StreamItem=20to=20?=
 =?UTF-8?q?utilize=20caching?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/IframeCache/IframeCache.tsx    | 94 +++++++++++++++++++
 .../gridItems/ChatItem/ChatItem.tsx           |  3 +-
 .../gridItems/GridItem/GridItem.tsx           | 35 ++++---
 .../gridItems/StreamItem/StreamItem.tsx       | 10 +-
 src/routes/watch.tsx                          | 79 ++++++++--------
 5 files changed, 167 insertions(+), 54 deletions(-)
 create mode 100644 src/components/IframeCache/IframeCache.tsx

diff --git a/src/components/IframeCache/IframeCache.tsx b/src/components/IframeCache/IframeCache.tsx
new file mode 100644
index 0000000..5071f9f
--- /dev/null
+++ b/src/components/IframeCache/IframeCache.tsx
@@ -0,0 +1,94 @@
+import { createContext, useCallback, useContext, useEffect, useMemo, useRef, type ReactNode } from 'react';
+import { createPortal } from 'react-dom';
+
+interface IframeCacheContextValue {
+  getIframeContainer: (key: string) => HTMLDivElement;
+  releaseIframeContainer: (key: string) => void;
+}
+
+const IframeCacheContext = createContext<IframeCacheContextValue | null>(null);
+
+export const useIframeCache = () => {
+  const context = useContext(IframeCacheContext);
+  if (!context) {
+    throw new Error('useIframeCache must be used within IframeCacheProvider');
+  }
+  return context;
+};
+
+interface IframeCacheProviderProps {
+  readonly children: ReactNode;
+}
+
+export function IframeCacheProvider({ children }: IframeCacheProviderProps) {
+  const containerMapRef = useRef<Map<string, HTMLDivElement>>(new Map());
+  const hiddenContainerRef = useRef<HTMLDivElement | null>(null);
+
+  useEffect(() => {
+    // Create hidden container for cached iframes
+    const hiddenDiv = document.createElement('div');
+    hiddenDiv.style.position = 'fixed';
+    hiddenDiv.style.top = '-9999px';
+    hiddenDiv.style.left = '-9999px';
+    hiddenDiv.style.width = '0';
+    hiddenDiv.style.height = '0';
+    hiddenDiv.style.overflow = 'hidden';
+    hiddenDiv.style.pointerEvents = 'none';
+    document.body.appendChild(hiddenDiv);
+    hiddenContainerRef.current = hiddenDiv;
+
+    return () => {
+      hiddenDiv.remove();
+    };
+  }, []);
+
+  const getIframeContainer = useCallback((key: string): HTMLDivElement => {
+    if (!containerMapRef.current.has(key)) {
+      const container = document.createElement('div');
+      container.style.width = '100%';
+      container.style.height = '100%';
+      containerMapRef.current.set(key, container);
+    }
+    return containerMapRef.current.get(key)!;
+  }, []);
+
+  const releaseIframeContainer = useCallback((key: string) => {
+    const container = containerMapRef.current.get(key);
+    if (container) {
+      // Move to hidden container to keep iframe alive
+      hiddenContainerRef.current?.appendChild(container);
+    }
+  }, []);
+
+  const value = useMemo(
+    () => ({ getIframeContainer, releaseIframeContainer }),
+    [getIframeContainer, releaseIframeContainer]
+  );
+
+  return <IframeCacheContext.Provider value={value}>{children}</IframeCacheContext.Provider>;
+}
+
+interface CachedIframePortalProps {
+  cacheKey: string;
+  targetRef: React.RefObject<HTMLDivElement | null>;
+  children: ReactNode;
+}
+
+export function CachedIframePortal({ cacheKey, targetRef, children }: CachedIframePortalProps) {
+  const { getIframeContainer, releaseIframeContainer } = useIframeCache();
+  const container = getIframeContainer(cacheKey);
+
+  useEffect(() => {
+    // Move container to target when mounted
+    if (targetRef.current) {
+      targetRef.current.appendChild(container);
+    }
+
+    return () => {
+      // Release container when unmounted
+      releaseIframeContainer(cacheKey);
+    };
+  }, [cacheKey, container, targetRef, releaseIframeContainer]);
+
+  return createPortal(children, container);
+}
diff --git a/src/components/gridItems/ChatItem/ChatItem.tsx b/src/components/gridItems/ChatItem/ChatItem.tsx
index 6417448..2cd456e 100644
--- a/src/components/gridItems/ChatItem/ChatItem.tsx
+++ b/src/components/gridItems/ChatItem/ChatItem.tsx
@@ -11,9 +11,10 @@ const ChatItem = memo(
   ({ streamName, isDarkThemePreferred = false }: ChatItemProps) => {
     const title = `Chat: ${streamName}`;
     const iframeSrc = `https://www.twitch.tv/embed/${streamName}/chat?parent=${window.location.hostname}${isDarkThemePreferred ? '&darkpopout' : ''}`;
+    const cacheKey = `chat-${streamName}`;
 
     return (
-      <GridItem title={title} iframeSrc={iframeSrc} streamName={streamName}>
+      <GridItem title={title} iframeSrc={iframeSrc} streamName={streamName} cacheKey={cacheKey}>
         <ChatItemHeader streamName={streamName} />
       </GridItem>
     );
diff --git a/src/components/gridItems/GridItem/GridItem.tsx b/src/components/gridItems/GridItem/GridItem.tsx
index c13ce8e..155aeb3 100644
--- a/src/components/gridItems/GridItem/GridItem.tsx
+++ b/src/components/gridItems/GridItem/GridItem.tsx
@@ -1,5 +1,6 @@
+import { CachedIframePortal } from '@/components/IframeCache/IframeCache';
 import { useIframeRefresh } from '@/hooks/useIframeRefresh';
-import { forwardRef, memo, useImperativeHandle, type ReactNode } from 'react';
+import { forwardRef, memo, useImperativeHandle, useRef, type ReactNode } from 'react';
 import GridItemHeader from './GridItemHeader/GridItemHeader';
 
 interface GridItemProps {
@@ -9,6 +10,7 @@ interface GridItemProps {
   streamName?: string;
   onRefresh?: () => void;
   children?: ReactNode;
+  cacheKey: string;
 }
 
 export interface GridItemRef {
@@ -17,8 +19,9 @@ export interface GridItemRef {
 
 const GridItem = memo(
   forwardRef<GridItemRef, GridItemProps>(
-    ({ title, iframeSrc, allowFullScreen, streamName, onRefresh, children }, ref) => {
+    ({ title, iframeSrc, allowFullScreen, streamName, onRefresh, children, cacheKey }, ref) => {
       const { iframeRef, refreshIframe } = useIframeRefresh(onRefresh);
+      const iframeContainerRef = useRef<HTMLDivElement>(null);
 
       useImperativeHandle(ref, () => ({ refreshIframe }), [refreshIframe]);
 
@@ -30,18 +33,22 @@ const GridItem = memo(
           <GridItemHeader title={title} streamName={streamName}>
             {children}
           </GridItemHeader>
-          <iframe
-            ref={iframeRef}
-            key={iframeSrc}
-            title={title}
-            src={iframeSrc}
-            height="100%"
-            width="100%"
-            allowFullScreen={allowFullScreen}
-            loading="lazy"
-            className="transition-all duration-300 ease-in-out group-hover:mt-12"
-            style={{ transform: 'translateZ(0)' }}
-          />
+          <div ref={iframeContainerRef} className="relative h-full w-full">
+            <CachedIframePortal cacheKey={cacheKey} targetRef={iframeContainerRef}>
+              <iframe
+                ref={iframeRef}
+                key={iframeSrc}
+                title={title}
+                src={iframeSrc}
+                height="100%"
+                width="100%"
+                allowFullScreen={allowFullScreen}
+                loading="lazy"
+                className="transition-all duration-300 ease-in-out group-hover:mt-12"
+                style={{ transform: 'translateZ(0)' }}
+              />
+            </CachedIframePortal>
+          </div>
         </section>
       );
     }
diff --git a/src/components/gridItems/StreamItem/StreamItem.tsx b/src/components/gridItems/StreamItem/StreamItem.tsx
index 5e8627f..8976d63 100644
--- a/src/components/gridItems/StreamItem/StreamItem.tsx
+++ b/src/components/gridItems/StreamItem/StreamItem.tsx
@@ -13,13 +13,21 @@ const StreamItem = memo(
     const title = `Stream: ${streamName}`;
 
     const iframeSrc = `https://player.twitch.tv/?channel=${streamName}&parent=${window.location.hostname}`;
+    const cacheKey = `stream-${streamName}`;
 
     const handleRefresh = useCallback(() => {
       gridItemRef.current?.refreshIframe();
     }, []);
 
     return (
-      <GridItem ref={gridItemRef} title={title} iframeSrc={iframeSrc} allowFullScreen streamName={streamName}>
+      <GridItem
+        ref={gridItemRef}
+        title={title}
+        iframeSrc={iframeSrc}
+        allowFullScreen
+        streamName={streamName}
+        cacheKey={cacheKey}
+      >
         <StreamItemHeader streamName={streamName} handleRefresh={handleRefresh} />
       </GridItem>
     );
diff --git a/src/routes/watch.tsx b/src/routes/watch.tsx
index 36b1a06..9298495 100644
--- a/src/routes/watch.tsx
+++ b/src/routes/watch.tsx
@@ -1,6 +1,7 @@
 import ChatItem from '@/components/gridItems/ChatItem/ChatItem';
 import StreamItem from '@/components/gridItems/StreamItem/StreamItem';
 import GridToolsBar from '@/components/GridToolsBar/GridToolsBar';
+import { IframeCacheProvider } from '@/components/IframeCache/IframeCache';
 import useWindowDimensions from '@/hooks/useWindowDimensions';
 import { useStreamStore } from '@/stores/streamStore';
 import { createFileRoute, redirect, useNavigate } from '@tanstack/react-router';
@@ -55,46 +56,48 @@ function Watch() {
   const rowHeight = useMemo(() => Math.max(24, Math.floor(dimensions.height / 12)), [dimensions.height]);
 
   return (
-    <div className="min-h-dvh w-full">
-      <GridToolsBar />
-      <ReactGridLayout
-        className="layout"
-        layout={layout}
-        cols={12}
-        rowHeight={rowHeight}
-        width={dimensions.hasVerticalScrollbar ? dimensions.width - 1 : dimensions.width}
-        isDraggable
-        isResizable
-        resizeHandles={['se', 'sw', 'ne', 'nw']}
-        margin={[0, 0]}
-        containerPadding={[0, 0]}
-        useCSSTransforms
-        transformScale={1}
-        verticalCompact
-        onLayoutChange={handleLayoutChange}
-      >
-        {layout.map(item => {
-          const [type, streamName] = item.i.split('-', 2);
+    <IframeCacheProvider>
+      <div className="min-h-dvh w-full">
+        <GridToolsBar />
+        <ReactGridLayout
+          className="layout"
+          layout={layout}
+          cols={12}
+          rowHeight={rowHeight}
+          width={dimensions.hasVerticalScrollbar ? dimensions.width - 1 : dimensions.width}
+          isDraggable
+          isResizable
+          resizeHandles={['se', 'sw', 'ne', 'nw']}
+          margin={[0, 0]}
+          containerPadding={[0, 0]}
+          useCSSTransforms
+          transformScale={1}
+          verticalCompact
+          onLayoutChange={handleLayoutChange}
+        >
+          {layout.map(item => {
+            const [type, streamName] = item.i.split('-', 2);
 
-          if (type === 'stream') {
-            return (
-              <div key={item.i}>
-                <StreamItem streamName={streamName} />
-              </div>
-            );
-          }
+            if (type === 'stream') {
+              return (
+                <div key={item.i}>
+                  <StreamItem streamName={streamName} />
+                </div>
+              );
+            }
 
-          if (type === 'chat') {
-            return (
-              <div key={item.i} className={isActiveChat(streamName) ? '' : 'hidden'}>
-                <ChatItem streamName={streamName} isDarkThemePreferred={isDarkThemePreferred} />
-              </div>
-            );
-          }
+            if (type === 'chat') {
+              return (
+                <div key={item.i} className={isActiveChat(streamName) ? '' : 'hidden'}>
+                  <ChatItem streamName={streamName} isDarkThemePreferred={isDarkThemePreferred} />
+                </div>
+              );
+            }
 
-          return null;
-        })}
-      </ReactGridLayout>
-    </div>
+            return null;
+          })}
+        </ReactGridLayout>
+      </div>
+    </IframeCacheProvider>
   );
 }

From 30e8bf9d647f1a1fb6ea84ad6387c9c31206de8a Mon Sep 17 00:00:00 2001
From: Quentin  VERDIER <quent1.verdier@gmail.com>
Date: Wed, 8 Oct 2025 16:54:45 +0200
Subject: [PATCH 2/2] =?UTF-8?q?=F0=9F=94=A7=20Implement=20cache=20cleanup?=
 =?UTF-8?q?=20for=20IframeCacheProvider:=20add=20interval=20to=20remove=20?=
 =?UTF-8?q?stale=20iframe=20containers=20after=2010=20minutes?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/IframeCache/IframeCache.tsx | 20 ++++++++++++++++++++
 1 file changed, 20 insertions(+)

diff --git a/src/components/IframeCache/IframeCache.tsx b/src/components/IframeCache/IframeCache.tsx
index 5071f9f..fc23a92 100644
--- a/src/components/IframeCache/IframeCache.tsx
+++ b/src/components/IframeCache/IframeCache.tsx
@@ -22,6 +22,7 @@ interface IframeCacheProviderProps {
 
 export function IframeCacheProvider({ children }: IframeCacheProviderProps) {
   const containerMapRef = useRef<Map<string, HTMLDivElement>>(new Map());
+  const lastUsedRef = useRef<Map<string, number>>(new Map());
   const hiddenContainerRef = useRef<HTMLDivElement | null>(null);
 
   useEffect(() => {
@@ -37,12 +38,31 @@ export function IframeCacheProvider({ children }: IframeCacheProviderProps) {
     document.body.appendChild(hiddenDiv);
     hiddenContainerRef.current = hiddenDiv;
 
+    const cleanupInterval = setInterval(
+      () => {
+        const now = Date.now();
+        const CACHE_TTL = 10 * 60 * 1000; // 10 minutes
+
+        for (const [key, lastUsed] of lastUsedRef.current.entries()) {
+          if (now - lastUsed > CACHE_TTL) {
+            const container = containerMapRef.current.get(key);
+            container?.remove();
+            containerMapRef.current.delete(key);
+            lastUsedRef.current.delete(key);
+          }
+        }
+      },
+      5 * 60 * 1000
+    );
+
     return () => {
       hiddenDiv.remove();
+      clearInterval(cleanupInterval);
     };
   }, []);
 
   const getIframeContainer = useCallback((key: string): HTMLDivElement => {
+    lastUsedRef.current.set(key, Date.now());
     if (!containerMapRef.current.has(key)) {
       const container = document.createElement('div');
       container.style.width = '100%';