Enable chat toggle for call rooms (still needs cleaner UI, but works as intended)

This commit is contained in:
GigiaJ 2025-04-22 22:29:43 -04:00
parent c8790a5284
commit 6691467545

View file

@ -21,18 +21,22 @@ import { useClientConfig } from '../../hooks/useClientConfig';
import { RoomView } from '../../features/room/RoomView'; import { RoomView } from '../../features/room/RoomView';
import { useParams } from 'react-router-dom'; import { useParams } from 'react-router-dom';
import { PowerLevelsContainer } from './PowerLevelsContainer'; import { PowerLevelsContainer } from './PowerLevelsContainer';
import { ScreenSize, useScreenSizeContext } from '../../hooks/useScreenSize';
interface PersistentCallContainerProps { interface PersistentCallContainerProps {
isVisible: boolean; isVisible: boolean;
} }
export function PersistentCallContainer({ isVisible }: PersistentCallContainerProps) { export function PersistentCallContainer({ isVisible }: PersistentCallContainerProps) {
const { activeCallRoomId, setActiveCallRoomId, registerActiveTransport } = useCallState(); const { activeCallRoomId, isChatOpen, setActiveCallRoomId, registerActiveTransport } =
useCallState();
const { eventId } = useParams(); 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 isMobile = screenSize === ScreenSize.Mobile;
logger.info(room); logger.info(room);
@ -167,7 +171,14 @@ export function PersistentCallContainer({ isVisible }: PersistentCallContainerPr
<Box <Box
direction="Column" direction="Column"
style={{ position: 'relative', height: '100%', width: '100%', overflow: 'hidden' }} style={{
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 && ( {activeCallRoomId && roomId && room !== null && (
<Box direction="Column" style={{ width: '100%' }}> <Box direction="Column" style={{ width: '100%' }}>
@ -176,13 +187,19 @@ export function PersistentCallContainer({ isVisible }: PersistentCallContainerPr
</PowerLevelsContainer> </PowerLevelsContainer>
</Box> </Box>
)} )}
<Box grow="Yes" style={{ position: 'relative' }}> <Box
grow="Yes"
style={{
position: 'relative',
}}
>
<iframe <iframe
ref={iframeRef} ref={iframeRef}
style={{ style={{
position: 'absolute', position: 'absolute',
top: 0, top: 0,
left: 0, left: 0,
// display: isMobile && isChatOpen ? 'none' : 'flex',
width: '100%', width: '100%',
height: '100%', height: '100%',
border: 'none', border: 'none',
@ -194,8 +211,9 @@ export function PersistentCallContainer({ isVisible }: PersistentCallContainerPr
/> />
</Box> </Box>
</Box> </Box>
<Box direction="Column" style={{ position: 'relative' }}> <Box grow="Yes" direction="Column" style={{ position: 'relative' }}>
{false && activeCallRoomId && roomId && room !== null && ( {/* Mobile should remove the iframe visibility when chat is toggled */}
{isChatOpen && activeCallRoomId && roomId && room !== null && (
<PowerLevelsContainer> <PowerLevelsContainer>
<RoomView room={room} eventId={eventId} /> <RoomView room={room} eventId={eventId} />
</PowerLevelsContainer> </PowerLevelsContainer>