adjust room header for calling

This commit is contained in:
Gigiaj 2025-06-18 17:42:53 -05:00
parent 4403eacdf1
commit 7712e34d22

View file

@ -1,3 +1,4 @@
/* eslint-disable no-nested-ternary */
import React, { useCallback } from 'react'; import React, { useCallback } from 'react';
import { Box, Line } from 'folds'; import { Box, Line } from 'folds';
import { useParams } from 'react-router-dom'; import { useParams } from 'react-router-dom';
@ -15,6 +16,7 @@ import { useMatrixClient } from '../../hooks/useMatrixClient';
import { useRoomMembers } from '../../hooks/useRoomMembers'; import { useRoomMembers } from '../../hooks/useRoomMembers';
import { CallView } from '../call/CallView'; import { CallView } from '../call/CallView';
import { useCallState } from '../../pages/client/call/CallProvider'; import { useCallState } from '../../pages/client/call/CallProvider';
import { RoomViewHeader } from './RoomViewHeader';
export function Room() { export function Room() {
const { eventId } = useParams(); const { eventId } = useParams();
@ -48,31 +50,42 @@ export function Room() {
width: '100%', width: '100%',
height: '100%', height: '100%',
display: 'flex', display: 'flex',
flexDirection: 'row', flexDirection: 'column',
}} }}
> >
<CallView room={room} eventId={eventId} /> {room.isCallRoom() && <RoomViewHeader />}
{(!room.isCallRoom() || isChatOpen) && ( <Box
<Box grow="Yes"
grow="Yes" style={{
style={{ width: '100%',
width: room.isCallRoom() ? (isChatOpen ? '40%' : '0%') : '100%', height: '100%',
height: '100%', display: 'flex',
display: 'flex', flexDirection: 'row',
flexDirection: 'column', }}
}} >
> <CallView room={room} />
<Box style={{ flex: 1, minHeight: 0, overflowY: 'auto', background: '#fff' }}> {(!room.isCallRoom() || isChatOpen) && (
<RoomView room={room} eventId={eventId} /> <Box
grow="Yes"
style={{
width: room.isCallRoom() ? (isChatOpen ? '40%' : '0%') : '100%',
height: '100%',
display: 'flex',
flexDirection: 'column',
}}
>
<Box style={{ flex: 1, minHeight: 0, overflowY: 'auto', background: '#fff' }}>
<RoomView room={room} eventId={eventId} />
</Box>
</Box> </Box>
</Box> )}
)} {screenSize === ScreenSize.Desktop && !room.isCallRoom() && isDrawer && (
{screenSize === ScreenSize.Desktop && !room.isCallRoom() && isDrawer && ( <>
<> <Line variant="Background" direction="Vertical" size="300" />
<Line variant="Background" direction="Vertical" size="300" /> <MembersDrawer key={room.roomId} room={room} members={members} />
<MembersDrawer key={room.roomId} room={room} members={members} /> </>
</> )}
)} </Box>
</Box> </Box>
</PowerLevelsContextProvider> </PowerLevelsContextProvider>
); );