mirrors/cinny
1
0
Fork 0
mirror of https://github.com/cinnyapp/cinny.git synced 2025-11-06 15:30:27 +03:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

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

Browse source
This commit is contained in:
Gigiaj 2025-05-10 20:42:21 -05:00
parent 1b89831c10
commit 6601c47abc
1 changed files with 189 additions and 143 deletions
Download patch file Download diff file Expand all files Collapse all files

122
src/app/pages/call/PersistentCallContainer.tsx
View file

@ -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}`);
@ -63,7 +66,7 @@ export function PersistentCallContainer({ children }: PersistentCallContainerPro
* Might also be able to keep the iframe alive and instead navigate to a new "room" to make the transition smoother
*/
const cleanup = () => {
//logger.error(`CallContext: Cleaning up for previous room: ${cleanupRoomId}`);
// logger.error(`CallContext: Cleaning up for previous room: ${cleanupRoomId}`);
if (smallWidgetRef.current) {
// smallWidgetRef.current.stopMessaging();
@ -72,27 +75,33 @@ export function PersistentCallContainer({ children }: PersistentCallContainerPro
if (widgetApiRef.current) {
// widgetApiRef.current.stop?.();
}
//widgetApiRef.current = null;
//smallWidgetRef.current = null;
//if (iframeRef.current) iframeRef.current.src = 'about:blank';
// widgetApiRef.current = null;
// smallWidgetRef.current = null;
// 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>
);
}