mirror of
https://github.com/cinnyapp/cinny.git
synced 2025-11-13 18:50:29 +03:00
adjust room header for calling
This commit is contained in:
parent
4403eacdf1
commit
7712e34d22
1 changed files with 35 additions and 22 deletions
|
|
@ -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>
|
||||||
);
|
);
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue