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

Remove unused imports and restructure to support being parent to clientlayout

Browse source
This commit is contained in:
Gigiaj 2025-05-09 11:12:48 -05:00
parent a690dbd2ca
commit 6714300779
1 changed files with 61 additions and 75 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,7 +1,8 @@
import React, { useEffect, useMemo, useRef } from 'react'; import React, { createContext, ReactNode, useEffect, useMemo, useRef } from 'react';
import { logger } from 'matrix-js-sdk/lib/logger'; import { logger } from 'matrix-js-sdk/lib/logger';
import { ClientWidgetApi, IWidgetApiRequest } from 'matrix-widget-api'; import { ClientWidgetApi } from 'matrix-widget-api';
import { Box } from 'folds'; import { Box } from 'folds';
import { Outlet, useParams } from 'react-router-dom';
import { useCallState } from '../client/CallProvider'; import { useCallState } from '../client/CallProvider';
import { import {
createVirtualWidget, createVirtualWidget,
@ -10,49 +11,38 @@ import {
getWidgetUrl, getWidgetUrl,
} from '../../features/room/SmallWidget'; } from '../../features/room/SmallWidget';
import { useMatrixClient } from '../../hooks/useMatrixClient'; import { useMatrixClient } from '../../hooks/useMatrixClient';
import { RoomViewHeader } from '../../features/room/RoomViewHeader';
import { Page, PageRoot } from '../../components/page';
import { RouteSpaceProvider, Space, SpaceRouteRoomProvider } from '../client/space';
import { MobileFriendlyPageNav } from '../MobileFriendly';
import { SPACE_PATH } from '../paths';
import { PowerLevelsContextProvider, usePowerLevels } from '../../hooks/usePowerLevels';
import { useSelectedRoom } from '../../hooks/router/useSelectedRoom'; import { useSelectedRoom } from '../../hooks/router/useSelectedRoom';
import { useClientConfig } from '../../hooks/useClientConfig'; import { useClientConfig } from '../../hooks/useClientConfig';
import { RoomView } from '../../features/room/RoomView';
import { useParams } from 'react-router-dom';
import { PowerLevelsContainer } from './PowerLevelsContainer';
import { ScreenSize, useScreenSizeContext } from '../../hooks/useScreenSize'; import { ScreenSize, useScreenSizeContext } from '../../hooks/useScreenSize';
interface PersistentCallContainerProps { interface PersistentCallContainerProps {
isVisible: boolean; children: ReactNode;
viewedRoomId: string;
} }
export function PersistentCallContainer({ export const RefContext = createContext(null);
isVisible,
viewedRoomId, export function PersistentCallContainer({ children }: PersistentCallContainerProps) {
iframeRef, const iframeRef = useRef<HTMLIFrameElement | null>(null);
widgetApiRef, const widgetApiRef = useRef<ClientWidgetApi | null>(null);
smallWidgetRef, const smallWidgetRef = useRef<SmallWidget | null>(null);
backupIframeRef,
backupWidgetApiRef, const backupIframeRef = useRef<HTMLIFrameElement | null>(null);
backupSmallWidgetRef, const backupWidgetApiRef = useRef<ClientWidgetApi | null>(null);
}: PersistentCallContainerProps) { const backupSmallWidgetRef = useRef<SmallWidget | null>(null);
const { const {
activeCallRoomId, activeCallRoomId,
isChatOpen, isChatOpen,
isCallActive, isCallActive,
isPrimaryIframe, isPrimaryIframe,
setActiveCallRoomId,
registerActiveClientWidgetApi, registerActiveClientWidgetApi,
} = useCallState(); } = useCallState();
const { eventId } = useParams();
const mx = useMatrixClient(); const mx = useMatrixClient();
const roomId = useSelectedRoom(); const roomId = useSelectedRoom();
const clientConfig = useClientConfig(); const clientConfig = useClientConfig();
const room = mx.getRoom(roomId) ?? null; const room = mx.getRoom(roomId) ?? null;
const screenSize = useScreenSizeContext(); const screenSize = useScreenSizeContext();
const isMobile = screenSize === ScreenSize.Mobile; const isMobile = screenSize === ScreenSize.Mobile;
const { roomIdOrAlias: viewedRoomId } = useParams();
const isViewingActiveCall = useMemo( const isViewingActiveCall = useMemo(
() => activeCallRoomId !== null && activeCallRoomId === viewedRoomId, () => activeCallRoomId !== null && activeCallRoomId === viewedRoomId,
[activeCallRoomId, viewedRoomId] [activeCallRoomId, viewedRoomId]
@ -164,66 +154,62 @@ export function PersistentCallContainer({
setupWidget(backupWidgetApiRef, backupSmallWidgetRef, backupIframeRef, false); setupWidget(backupWidgetApiRef, backupSmallWidgetRef, backupIframeRef, false);
}); });
const containerStyle: React.CSSProperties = {
width: '100%',
height: '100%',
display: isVisible ? 'flex' : 'none',
flexDirection: 'row',
};
return ( return (
<Box direction="Row" grow="Yes" style={{ height: '0%', width: '0%' }}> <RefContext.Provider value={{ iframeRef, backupIframeRef }}>
<Box <Box grow="No">
direction="Column"
style={{
position: 'relative',
zIndex: 0,
display: isMobile && isChatOpen ? 'none' : 'flex',
width: isMobile && isChatOpen ? '0%' : '100%',
height: isMobile && isChatOpen ? '0%' : '100%',
}}
>
<Box <Box
grow="Yes" direction="Column"
style={{ style={{
position: 'relative', position: 'relative',
zIndex: 0,
display: isMobile && isChatOpen ? 'none' : 'flex',
width: isMobile && isChatOpen ? '0%' : '100%',
height: isMobile && isChatOpen ? '0%' : '100%',
}} }}
> >
<iframe <Box
ref={iframeRef} grow="Yes"
style={{ style={{
position: 'absolute', position: 'relative',
top: 0,
left: 0,
display: isPrimaryIframe || isViewingActiveCall ? 'flex' : 'none',
width: '100%',
height: '100%',
border: 'none',
}} }}
title={`Persistent Element Call`} >
sandbox="allow-forms allow-scripts allow-same-origin allow-popups allow-modals allow-downloads" <iframe
allow="microphone; camera; display-capture; autoplay; clipboard-write;" ref={iframeRef}
src="about:blank" style={{
/> position: 'absolute',
<iframe top: 0,
ref={backupIframeRef} left: 0,
style={{ display: isPrimaryIframe || isViewingActiveCall ? 'none' : 'none',
position: 'absolute', width: '100%',
top: 0, height: '100%',
left: 0, border: 'none',
width: '100%', }}
height: '100%', title={`Persistent Element Call`}
border: 'none', sandbox="allow-forms allow-scripts allow-same-origin allow-popups allow-modals allow-downloads"
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>
</Box> </Box>
</Box> {children}
</RefContext.Provider>
); );
} }