side-effect for updating iframe

Author: sphinxrave

packages/react/src/components/chat/YTChat.tsx

@@ -1,15 +1,33 @@
 import { darkAtom } from "@/hooks/useTheme";
 import { replayReloadContinuation } from "@/lib/ytChatTokenGen";
 import { videoStatusAtomFamily } from "@/store/player";
-import { useAtomValue } from "jotai";
+import { getDefaultStore, useAtomValue } from "jotai";
 import { useEffect, useRef } from "react";
-
 interface YTChatProps {
   id: string;
   status: VideoStatus;
   channelId?: string;
 }
 
+// Keep track of chat iframes to publish to
+const chatIframeRefs = new Map<string, HTMLIFrameElement>();
+
+// Subscribe to video status updates outside of React
+export function subscribeToVideoProgress(videoId: string) {
+  const videoStatusAtom = videoStatusAtomFamily(videoId);
+  const store = getDefaultStore();
+  return store.sub(videoStatusAtom, () => {
+    const videoStatus = store.get(videoStatusAtom);
+    const iframe = chatIframeRefs.get(videoId);
+    if (iframe?.contentWindow && videoStatus?.progress !== undefined) {
+      iframe.contentWindow.postMessage(
+        { "yt-player-video-progress": videoStatus.progress },
+        "*",
+      );
+    }
+  });
+}
+
 export function YTChat({ id, status, channelId }: YTChatProps) {
   const dark = useAtomValue(darkAtom);
   const ref = useRef<HTMLIFrameElement>(null);
@@ -30,26 +48,34 @@ export function YTChat({ id, status, channelId }: YTChatProps) {
     ? `https://www.youtube.com/live_chat_replay?${q}`
     : `https://www.youtube.com/live_chat?${q}`;
 
-  const videoStatus = useAtomValue(videoStatusAtomFamily(id));
+  // const videoStatus = useAtomValue(videoStatusAtomFamily(id));
 
   useEffect(() => {
-    if (
-      isArchive &&
-      channelId &&
-      ref.current?.contentWindow &&
-      videoStatus?.progress !== undefined
-    ) {
-      ref.current.contentWindow.postMessage(
-        { "yt-player-video-progress": videoStatus.progress },
-        "*",
-      );
-    }
-  }, [isArchive, channelId, videoStatus?.progress]);
+    if (!ref.current || !isArchive || !channelId) return;
+
+    // Store ref in map
+    chatIframeRefs.set(id, ref.current);
+
+    // Initialize progress
+    ref.current.contentWindow?.postMessage(
+      { "yt-player-video-progress": 0 },
+      "*",
+    );
+
+    // Set up subscription
+    const unsubscribe = subscribeToVideoProgress(id);
+
+    // Cleanup
+    return () => {
+      unsubscribe();
+      chatIframeRefs.delete(id);
+    };
+  }, [id, isArchive, channelId]);
 
   return (
     <iframe
       className="flex grow"
-      key={src} // prevent push history
+      key={src}
       ref={ref}
       src={src}
       onLoad={() => {