From a1c0b79cbddc2c1601c2d2b52b4137d8098fbcc8 Mon Sep 17 00:00:00 2001
From: Gigiaj <gigiaboone@yahoo.com>
Date: Sat, 10 May 2025 20:41:06 -0500
Subject: [PATCH] split into two refs

---
 src/app/features/room/CallView.tsx | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/src/app/features/room/CallView.tsx b/src/app/features/room/CallView.tsx
index d6539369..7cf6735c 100644
--- a/src/app/features/room/CallView.tsx
+++ b/src/app/features/room/CallView.tsx
@@ -4,7 +4,7 @@ import { useCallback, useEffect, useRef } from 'react';
 import { Box } from 'folds';
 import { RoomViewHeader } from './RoomViewHeader';
 import { useCallState } from '../../pages/client/CallProvider';
-import { RefContext } from '../../pages/call/PersistentCallContainer';
+import { PrimaryRefContext, BackupRefContext } from '../../pages/call/PersistentCallContainer';
 import { ScreenSize, useScreenSizeContext } from '../../hooks/useScreenSize';
 
 function debounce<F extends (...args: any[]) => any>(func: F, waitFor: number) {
@@ -31,26 +31,26 @@ type OriginalStyles = {
 };
 
 interface CallViewOutletContext {
-  iframeRef: React.RefObject<HTMLIFrameElement | null>;
+  primaryIframeRef: React.RefObject<HTMLIFrameElement | null>;
   backupIframeRef: React.RefObject<HTMLIFrameElement | null>;
 }
 
 export function CallView({ room, eventId }: { room: Room; eventId?: string }) {
-  const { iframeRef, backupIframeRef } = useContext(RefContext);
+  const primaryIframeRef = useContext(PrimaryRefContext);
+  const backupIframeRef = useContext(BackupRefContext);
   const iframeHostRef = useRef<HTMLDivElement>(null);
 
   const originalIframeStylesRef = useRef<OriginalStyles | null>(null);
   const { activeCallRoomId, isPrimaryIframe, isChatOpen } = useCallState();
   const isViewingActiveCall = useMemo(
     () => activeCallRoomId !== null && activeCallRoomId === room.roomId,
-    [activeCallRoomId]
+    [activeCallRoomId, room.roomId]
   );
 
   const screenSize = useScreenSizeContext();
   const isMobile = screenSize === ScreenSize.Mobile;
 
-  const activeIframeDisplayRef =
-    !isPrimaryIframe || isViewingActiveCall ? iframeRef : backupIframeRef;
+  const activeIframeDisplayRef = isPrimaryIframe ? primaryIframeRef : backupIframeRef;
 
   const applyFixedPositioningToIframe = useCallback(() => {
     const iframeElement = activeIframeDisplayRef?.current;
@@ -86,16 +86,18 @@ export function CallView({ room, eventId }: { room: Room; eventId?: string }) {
       iframeElement.style.visibility = 'visible';
       iframeElement.style.pointerEvents = 'auto';
     }
-  }, [activeIframeDisplayRef, iframeHostRef]);
+  }, [activeIframeDisplayRef, room]);
 
   const debouncedApplyFixedPositioning = useCallback(debounce(applyFixedPositioningToIframe, 50), [
     applyFixedPositioningToIframe,
+    primaryIframeRef,
+    backupIframeRef,
   ]);
   useEffect(() => {
     const iframeElement = activeIframeDisplayRef?.current;
     const hostElement = iframeHostRef?.current;
 
-    if (isPrimaryIframe || (isViewingActiveCall && iframeElement && hostElement)) {
+    if (!isPrimaryIframe || (isViewingActiveCall && iframeElement && hostElement)) {
       applyFixedPositioningToIframe();
 
       const resizeObserver = new ResizeObserver(debouncedApplyFixedPositioning);