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

Update Room.tsx to accomodate restructuring of Room, RoomView and CallView

Browse source
This commit is contained in:
Gimle Larpes 2025-07-31 20:36:16 +02:00 • committed by GitHub
parent 77f8a0409a
commit fb9ca31a43
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 15 additions and 43 deletions
Download patch file Download diff file Expand all files Collapse all files

58
src/app/features/room/Room.tsx
View file

@ -1,4 +1,3 @@
/* 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,7 +14,6 @@ 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 '../call/CallView'; import { CallView } from '../call/CallView';
import { useCallState } from '../../pages/client/call/CallProvider';
import { RoomViewHeader } from './RoomViewHeader'; import { RoomViewHeader } from './RoomViewHeader';
export function Room() { export function Room() {
@ -25,7 +23,6 @@ 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);
@ -44,48 +41,23 @@ export function Room() {
return ( return (
<PowerLevelsContextProvider value={powerLevels}> <PowerLevelsContextProvider value={powerLevels}>
<Box <Box grow="Yes">
grow="Yes" <Box grow="Yes" direction="Column">
style={{ <RoomViewHeader />
width: '100%', <Box grow="Yes">
height: '100%', <CallView room={room} />
display: 'flex', {room.isCallRoom() && screenSize === ScreenSize.Desktop && (
flexDirection: 'column',
}}
>
{room.isCallRoom() && <RoomViewHeader />}
<Box
grow="Yes"
style={{
width: '100%',
height: '100%',
display: 'flex',
flexDirection: 'row',
}}
>
<CallView room={room} />
{(!room.isCallRoom() || isChatOpen) && (
<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>
)}
{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} /> )}
</> <RoomView room={room} eventId={eventId} />
)} </Box>
</Box> </Box>
{!room.isCallRoom() && screenSize === ScreenSize.Desktop && isDrawer && (
<>
<Line variant="Background" direction="Vertical" size="300" />
<MembersDrawer key={room.roomId} room={room} members={members} />
</>
)}
</Box> </Box>
</PowerLevelsContextProvider> </PowerLevelsContextProvider>
); );