(broken) juggle the iframe states proper... still needs fixing

src/app/pages/call/PersistentCallContainer.tsx

@@ -1,8 +1,8 @@
-import React, { createContext, ReactNode, useEffect, useMemo, useRef } from 'react';
+import React, { createContext, ReactNode, useCallback, useEffect, useMemo, useRef } from 'react';
 import { logger } from 'matrix-js-sdk/lib/logger';
 import { ClientWidgetApi } from 'matrix-widget-api';
 import { Box } from 'folds';
-import { Outlet, useParams } from 'react-router-dom';
+import { useParams } from 'react-router-dom';
 import { useCallState } from '../client/CallProvider';
 import {
   createVirtualWidget,
@@ -19,27 +19,28 @@ interface PersistentCallContainerProps {
   children: ReactNode;
 }
 
-export const RefContext = createContext(null);
+export const PrimaryRefContext = createContext(null);
+export const BackupRefContext = createContext(null);
 
 export function PersistentCallContainer({ children }: PersistentCallContainerProps) {
-  const iframeRef = useRef<HTMLIFrameElement | null>(null);
-  const widgetApiRef = useRef<ClientWidgetApi | null>(null);
-  const smallWidgetRef = useRef<SmallWidget | null>(null);
+  const primaryIframeRef = useRef<HTMLIFrameElement | null>(null);
+  const primaryWidgetApiRef = useRef<ClientWidgetApi | null>(null);
+  const primarySmallWidgetRef = useRef<SmallWidget | null>(null);
 
   const backupIframeRef = useRef<HTMLIFrameElement | null>(null);
   const backupWidgetApiRef = useRef<ClientWidgetApi | null>(null);
   const backupSmallWidgetRef = useRef<SmallWidget | null>(null);
   const {
     activeCallRoomId,
+    viewedCallRoomId,
     isChatOpen,
     isCallActive,
     isPrimaryIframe,
     registerActiveClientWidgetApi,
+    registerViewedClientWidgetApi,
   } = useCallState();
   const mx = useMatrixClient();
-  const roomId = useSelectedRoom();
   const clientConfig = useClientConfig();
-  const room = mx.getRoom(roomId) ?? null;
   const screenSize = useScreenSizeContext();
   const isMobile = screenSize === ScreenSize.Mobile;
   const { roomIdOrAlias: viewedRoomId } = useParams();
@@ -48,9 +49,11 @@ export function PersistentCallContainer({ children }: PersistentCallContainerPro
     [activeCallRoomId, viewedRoomId]
   );
 
-  logger.info(room);
+  //  logger.error('RANDOM LOG RANDOM LOG RANDOM LOG\n\n\n\n\n\n');
+  //  logger.error(room?.normalizedName);
 
-  const setupWidget = (widgetApiRef, smallWidgetRef, iframeRef, skipLobby) => {
+  const setupWidget = useCallback(
+    (widgetApiRef, smallWidgetRef, iframeRef, skipLobby) => {
       const cleanupRoomId = smallWidgetRef.current?.roomId;
       logger.debug(`PersistentCallContainer effect running. activeCallRoomId: ${activeCallRoomId}`);
 
@@ -77,22 +80,28 @@ export function PersistentCallContainer({ children }: PersistentCallContainerPro
         // if (iframeRef.current) iframeRef.current.src = 'about:blank';
       };
 
-    if (activeCallRoomId && mx?.getUserId()) {
-      if (cleanupRoomId !== activeCallRoomId && !isCallActive) {
-        const newUrl = getWidgetUrl(mx, roomId, clientConfig.elementCallUrl ?? '', {
-          skipLobby,
+      if (mx?.getUserId()) {
+        if (
+          (isCallActive && activeCallRoomId !== viewedCallRoomId) ||
+          //          &&  backupIframeRef.current && primaryIframeRef.current.src
+          (cleanupRoomId !== activeCallRoomId && !isCallActive)
+        ) {
+          //logger.error('PersistentCallContainer Re-render');
+          const roomIdToSet = skipLobby ? activeCallRoomId : viewedCallRoomId;
+          const newUrl = getWidgetUrl(mx, roomIdToSet, clientConfig.elementCallUrl ?? '', {
+            skipLobby: skipLobby.toString(),
             returnToLobby: 'true',
             perParticipentE2EE: 'true',
           });
           if (iframeRef.current && iframeRef.current.src !== newUrl.toString()) {
             logger.info(
-            `PersistentCallContainer: Updating iframe src for ${activeCallRoomId} to ${newUrl.toString()}`
+              `PersistentCallContainer: Updating iframe src for ${roomIdToSet} to ${newUrl.toString()}`
             );
             cleanup();
             iframeRef.current.src = newUrl.toString();
           } else if (iframeRef.current && !iframeRef.current.src) {
             logger.info(
-            `PersistentCallContainer: Setting initial iframe src for ${activeCallRoomId} to ${newUrl.toString()}`
+              `PersistentCallContainer: Setting initial iframe src for ${roomIdToSet} to ${newUrl.toString()}`
             );
             iframeRef.current.src = newUrl.toString();
           }
@@ -106,32 +115,39 @@ export function PersistentCallContainer({ children }: PersistentCallContainerPro
           const userId = mx.getUserId() ?? '';
           const app = createVirtualWidget(
             mx,
-          `element-call-${activeCallRoomId}-${Date.now()}`,
+            `element-call-${roomIdToSet}-${Date.now()}`,
             userId,
             'Element Call',
             'm.call',
             newUrl,
-          false,
-          getWidgetData(mx, activeCallRoomId, {}, { skipLobby: true }),
-          activeCallRoomId
+            true,
+            getWidgetData(mx, roomIdToSet, {}, { skipLobby: true }),
+            roomIdToSet
           );
 
-        logger.debug(
-          `PersistentCallContainer: Creating new SmallWidget/API for ${activeCallRoomId}`
-        );
+          logger.error(`PersistentCallContainer: Creating new SmallWidget/API for ${roomIdToSet}`);
           const smallWidget = new SmallWidget(app);
           smallWidgetRef.current = smallWidget;
 
           try {
             const widgetApiInstance = smallWidget.startMessaging(iframeElement);
             widgetApiRef.current = widgetApiInstance;
-          if (skipLobby) registerActiveClientWidgetApi(activeCallRoomId, widgetApiRef.current);
+            logger.error('Pre-register');
+
+            logger.error(`This is our check: ${skipLobby}`);
+            if (skipLobby) {
+              registerActiveClientWidgetApi(activeCallRoomId, widgetApiRef.current);
+            } else {
+              registerViewedClientWidgetApi(viewedCallRoomId, widgetApiRef.current);
+              logger.error('Post view register');
+            }
+
             widgetApiInstance.once('ready', () => {
-            logger.info(`PersistentCallContainer: Widget for ${activeCallRoomId} is ready.`);
+              logger.info(`PersistentCallContainer: Widget for ${roomIdToSet} is ready.`);
             });
           } catch (error) {
             logger.error(
-            `PersistentCallContainer: Error initializing widget messaging for ${activeCallRoomId}:`,
+              `PersistentCallContainer: Error initializing widget messaging for ${roomIdToSet}:`,
               error
             );
             cleanup();
@@ -147,15 +163,44 @@ export function PersistentCallContainer({ children }: PersistentCallContainerPro
         }
       }
       return cleanup;
-  };
+    },
+    [
+      activeCallRoomId,
+      mx,
+      viewedCallRoomId,
+      isCallActive,
+      clientConfig.elementCallUrl,
+      registerActiveClientWidgetApi,
+      registerViewedClientWidgetApi,
+    ]
+  );
 
   useEffect(() => {
-    setupWidget(widgetApiRef, smallWidgetRef, iframeRef, true);
-    setupWidget(backupWidgetApiRef, backupSmallWidgetRef, backupIframeRef, false);
-  });
+    logger.error(`This is our param: ${isPrimaryIframe}`);
+    setupWidget(primaryWidgetApiRef, primarySmallWidgetRef, primaryIframeRef, isPrimaryIframe);
+    setupWidget(backupWidgetApiRef, backupSmallWidgetRef, backupIframeRef, !isPrimaryIframe);
+  }, [
+    setupWidget,
+    primaryWidgetApiRef,
+    primarySmallWidgetRef,
+    primaryIframeRef,
+    backupWidgetApiRef,
+    backupSmallWidgetRef,
+    backupIframeRef,
+    registerActiveClientWidgetApi,
+    registerViewedClientWidgetApi,
+    activeCallRoomId,
+    viewedCallRoomId,
+    isCallActive,
+    isPrimaryIframe,
+  ]);
+
+  const memoizedIframeRef = useMemo(() => primaryIframeRef, [primaryIframeRef]);
+  const memoizedBackupIframeRef = useMemo(() => backupIframeRef, [backupIframeRef]);
 
   return (
-    <RefContext.Provider value={{ iframeRef, backupIframeRef }}>
+    <PrimaryRefContext.Provider value={memoizedIframeRef}>
+      <BackupRefContext.Provider value={memoizedBackupIframeRef}>
         <Box grow="No">
           <Box
             direction="Column"
@@ -174,7 +219,7 @@ export function PersistentCallContainer({ children }: PersistentCallContainerPro
               }}
             >
               <iframe
-              ref={iframeRef}
+                ref={primaryIframeRef}
                 style={{
                   position: 'absolute',
                   top: 0,
@@ -198,7 +243,7 @@ export function PersistentCallContainer({ children }: PersistentCallContainerPro
                   width: '100%',
                   height: '100%',
                   border: 'none',
-                display: !isPrimaryIframe || isViewingActiveCall ? 'flex' : 'none',
+                  display: !isPrimaryIframe && isViewingActiveCall ? 'flex' : 'none',
                 }}
                 title={`Persistent Element Call`}
                 sandbox="allow-forms allow-scripts allow-same-origin allow-popups allow-modals allow-downloads"
@@ -209,6 +254,7 @@ export function PersistentCallContainer({ children }: PersistentCallContainerPro
           </Box>
         </Box>
         {children}
-    </RefContext.Provider>
+      </BackupRefContext.Provider>
+    </PrimaryRefContext.Provider>
   );
 }