Improve call room view stability

This commit is contained in:
Gigiaj 2025-05-10 08:58:32 -05:00
parent 9ae7c318ab
commit cd233053bc

View file

@ -14,6 +14,7 @@ import { markAsRead } from '../../../client/action/notifications';
import { useMatrixClient } from '../../hooks/useMatrixClient'; import { useMatrixClient } from '../../hooks/useMatrixClient';
import { useRoomMembers } from '../../hooks/useRoomMembers'; import { useRoomMembers } from '../../hooks/useRoomMembers';
import { CallView } from './CallView'; import { CallView } from './CallView';
import { useCallState } from '../../pages/client/CallProvider';
export function Room() { export function Room() {
const { eventId } = useParams(); const { eventId } = useParams();
@ -22,6 +23,7 @@ export function Room() {
const [isDrawer] = useSetting(settingsAtom, 'isPeopleDrawer'); const [isDrawer] = useSetting(settingsAtom, 'isPeopleDrawer');
const [hideActivity] = useSetting(settingsAtom, 'hideActivity'); const [hideActivity] = useSetting(settingsAtom, 'hideActivity');
const { isChatOpen } = useCallState();
const screenSize = useScreenSizeContext(); const screenSize = useScreenSizeContext();
const powerLevels = usePowerLevels(room); const powerLevels = usePowerLevels(room);
const members = useRoomMembers(mx, room?.roomId); const members = useRoomMembers(mx, room?.roomId);
@ -50,26 +52,27 @@ export function Room() {
}} }}
> >
<CallView room={room} eventId={eventId} /> <CallView room={room} eventId={eventId} />
{(!room.isCallRoom() || isChatOpen) && (
<Box <Box
grow="Yes" grow="Yes"
style={{ style={{
width: room.isCallRoom() ? '50%' : '100%', width: room.isCallRoom() ? (isChatOpen ? '40%' : '0%') : '100%',
height: '100%', height: '100%',
display: 'flex', display: 'flex',
flexDirection: 'column', flexDirection: 'column',
}} }}
> >
<Box style={{ flex: 1, minHeight: 0, overflowY: 'auto', background: '#fff' }}> <Box style={{ flex: 1, minHeight: 0, overflowY: 'auto', background: '#fff' }}>
<RoomView room={room} eventId={eventId} /> <RoomView room={room} eventId={eventId} />
</Box>
{screenSize === ScreenSize.Desktop && isDrawer && (
<>
<Line variant="Background" direction="Vertical" size="300" />
<MembersDrawer key={room.roomId} room={room} members={members} />
</>
)}
</Box> </Box>
{screenSize === ScreenSize.Desktop && isDrawer && ( )}
<>
<Line variant="Background" direction="Vertical" size="300" />
<MembersDrawer key={room.roomId} room={room} members={members} />
</>
)}
</Box>
</Box> </Box>
</PowerLevelsContextProvider> </PowerLevelsContextProvider>
); );