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

prepare to feed this to child elements for visibility handling

Browse source
This commit is contained in:
Gigiaj 2025-05-08 17:56:49 -05:00
parent 824be5bdc2
commit 9e919ea761
1 changed files with 53 additions and 89 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -28,7 +28,16 @@ interface PersistentCallContainerProps {
viewedRoomId: string; viewedRoomId: string;
} }
export function PersistentCallContainer({ isVisible, viewedRoomId }: PersistentCallContainerProps) { export function PersistentCallContainer({
isVisible,
viewedRoomId,
iframeRef,
widgetApiRef,
smallWidgetRef,
backupIframeRef,
backupWidgetApiRef,
backupSmallWidgetRef,
}: PersistentCallContainerProps) {
const { const {
activeCallRoomId, activeCallRoomId,
isChatOpen, isChatOpen,
@ -51,14 +60,6 @@ export function PersistentCallContainer({ isVisible, viewedRoomId }: PersistentC
logger.info(room); logger.info(room);
const iframeRef = useRef<HTMLIFrameElement | null>(null);
const widgetApiRef = useRef<ClientWidgetApi | null>(null);
const smallWidgetRef = useRef<SmallWidget | null>(null);
const backupIframeRef = useRef<HTMLIFrameElement | null>(null);
const backupWidgetApiRef = useRef<ClientWidgetApi | null>(null);
const backupSmallWidgetRef = useRef<SmallWidget | null>(null);
const setupWidget = (widgetApiRef, smallWidgetRef, iframeRef, skipLobby) => { const setupWidget = (widgetApiRef, smallWidgetRef, iframeRef, skipLobby) => {
const cleanupRoomId = smallWidgetRef.current?.roomId; const cleanupRoomId = smallWidgetRef.current?.roomId;
logger.debug(`PersistentCallContainer effect running. activeCallRoomId: ${activeCallRoomId}`); logger.debug(`PersistentCallContainer effect running. activeCallRoomId: ${activeCallRoomId}`);
@ -171,95 +172,58 @@ export function PersistentCallContainer({ isVisible, viewedRoomId }: PersistentC
}; };
return ( return (
<Page style={containerStyle}> <Box direction="Row" grow="Yes" style={{ height: '0%', width: '0%' }}>
<Box direction="Row" grow="Yes" style={{ height: '100%', width: '100%' }}> <Box
{activeCallRoomId && roomId && room !== null && ( direction="Column"
<Box style={{
shrink="No" position: 'relative',
style={{ zIndex: 0,
height: '100%', display: isMobile && isChatOpen ? 'none' : 'flex',
overflowY: 'auto', width: isMobile && isChatOpen ? '0%' : '100%',
}} height: isMobile && isChatOpen ? '0%' : '100%',
> }}
<PowerLevelsContainer> >
<PageRoot
nav={
<MobileFriendlyPageNav path={SPACE_PATH}>
<Space />
</MobileFriendlyPageNav>
}
/>
</PowerLevelsContainer>
</Box>
)}
<Box <Box
direction="Column" grow="Yes"
style={{ style={{
position: 'relative', position: 'relative',
overflow: 'hidden',
zIndex: 0,
display: isMobile && isChatOpen ? 'none' : 'flex',
width: isMobile && isChatOpen ? '0%' : '100%',
height: isMobile && isChatOpen ? '0%' : '100%',
}} }}
> >
{activeCallRoomId && roomId && room !== null && ( <iframe
<Box direction="Column" style={{ width: '100%' }}> ref={iframeRef}
<PowerLevelsContainer>
<RoomViewHeader />
</PowerLevelsContainer>
</Box>
)}
<Box
grow="Yes"
style={{ style={{
position: 'relative', position: 'absolute',
top: 0,
left: 0,
display: isPrimaryIframe || isViewingActiveCall ? 'flex' : 'none',
width: '100%',
height: '100%',
border: 'none',
}} }}
> title={`Persistent Element Call`}
<iframe sandbox="allow-forms allow-scripts allow-same-origin allow-popups allow-modals allow-downloads"
ref={iframeRef} allow="microphone; camera; display-capture; autoplay; clipboard-write;"
style={{ src="about:blank"
position: 'absolute', />
top: 0, <iframe
left: 0, ref={backupIframeRef}
display: isPrimaryIframe || isViewingActiveCall ? 'flex' : 'none', style={{
width: '100%', position: 'absolute',
height: '100%', top: 0,
border: 'none', left: 0,
}} width: '100%',
title={`Persistent Element Call`} height: '100%',
sandbox="allow-forms allow-scripts allow-same-origin allow-popups allow-modals allow-downloads" border: 'none',
allow="microphone; camera; display-capture; autoplay; clipboard-write;"
src="about:blank"
/>
<iframe
ref={backupIframeRef}
style={{
position: 'absolute',
top: 0,
left: 0,
width: '100%',
height: '100%',
border: 'none',
display: !isPrimaryIframe || isViewingActiveCall ? 'none' : 'flex', display: !isPrimaryIframe || isViewingActiveCall ? 'none' : 'flex',
}} }}
title={`Persistent Element Call`} title={`Persistent Element Call`}
sandbox="allow-forms allow-scripts allow-same-origin allow-popups allow-modals allow-downloads" sandbox="allow-forms allow-scripts allow-same-origin allow-popups allow-modals allow-downloads"
allow="microphone; camera; display-capture; autoplay; clipboard-write;" allow="microphone; camera; display-capture; autoplay; clipboard-write;"
src="about:blank" src="about:blank"
/> />
</Box>
</Box>
<Box grow="Yes" direction="Column" style={{ position: 'relative' }}>
{isChatOpen && activeCallRoomId && roomId && room !== null && (
<PowerLevelsContainer>
<RoomView room={room} eventId={eventId} />
</PowerLevelsContainer>
)}
</Box> </Box>
</Box> </Box>
</Page> </Box>
); );
} }