Remove unused imports and restructure to support being parent to clientlayout

This commit is contained in:
Gigiaj 2025-05-09 11:12:48 -05:00
parent a690dbd2ca
commit 6714300779

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,15 +154,9 @@ 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 grow="No">
<Box <Box
direction="Column" direction="Column"
style={{ style={{
@ -195,7 +179,7 @@ export function PersistentCallContainer({
position: 'absolute', position: 'absolute',
top: 0, top: 0,
left: 0, left: 0,
display: isPrimaryIframe || isViewingActiveCall ? 'flex' : 'none', display: isPrimaryIframe || isViewingActiveCall ? 'none' : 'none',
width: '100%', width: '100%',
height: '100%', height: '100%',
border: 'none', border: 'none',
@ -225,5 +209,7 @@ export function PersistentCallContainer({
</Box> </Box>
</Box> </Box>
</Box> </Box>
{children}
</RefContext.Provider>
); );
} }