Improve call interface UI
Fix call interface taking the whole screen and making the buttons behind
it unusable
GitLab: #155
Change-Id: I88a5bbbd543064e7c0221fffc9b061197f7c7c6d
diff --git a/client/src/components/ConversationView.tsx b/client/src/components/ConversationView.tsx
index 73c65d7..c638295 100644
--- a/client/src/components/ConversationView.tsx
+++ b/client/src/components/ConversationView.tsx
@@ -31,7 +31,7 @@
const { conversationId, conversation } = useContext(ConversationContext);
return (
- <Stack height="100%">
+ <Stack flexGrow={1} height="100%">
<ConversationHeader
account={account}
members={conversation.getMembers()}
diff --git a/client/src/pages/CallInterface.tsx b/client/src/pages/CallInterface.tsx
index d49a367..c5c0922 100644
--- a/client/src/pages/CallInterface.tsx
+++ b/client/src/pages/CallInterface.tsx
@@ -50,16 +50,17 @@
export default () => {
const { callRole, callStatus } = useContext(CallContext);
- if (callStatus === CallStatus.InCall) {
- return <CallInterface />;
+ if (callStatus !== CallStatus.InCall) {
+ return (
+ <CallPending
+ pending={callRole}
+ caller={callStatus === CallStatus.Ringing ? 'calling' : 'connecting'}
+ medium="audio"
+ />
+ );
}
- return (
- <CallPending
- pending={callRole}
- caller={callStatus === CallStatus.Ringing ? 'calling' : 'connecting'}
- medium="audio"
- />
- );
+
+ return <CallInterface />;
};
interface Props {
@@ -86,25 +87,15 @@
return (
<>
- {/* Guest video, takes the whole screen */}
<video
ref={remoteVideoRef}
autoPlay
- style={{ zIndex: -1, backgroundColor: 'black', width: '100%', height: '100%', position: 'absolute' }}
+ style={{ zIndex: -1, backgroundColor: 'black', position: 'absolute', height: '100%', width: '100%' }}
/>
- <Stack
- position="absolute"
- direction="column"
- spacing={1}
- margin={2}
- sx={{ left: 0, right: 0, top: 0, bottom: 0 }}
- >
- {/* Top panel with guest information */}
- <Box>
- <CallInterfaceInformation />
- </Box>
- {/* Local video, with empty space to be moved around and stickied to walls */}
- <Box height="100%">
+ <Box flexGrow={1} margin={2} display="flex" flexDirection="column">
+ {/* Guest video, takes the whole screen */}
+ <CallInterfaceInformation />
+ <Box flexGrow={1} marginY={2} position="relative">
<Draggable bounds="parent" nodeRef={localVideoRef ?? undefined}>
<video
ref={localVideoRef}
@@ -112,18 +103,14 @@
style={{
position: 'absolute',
right: 0,
- zIndex: 2,
borderRadius: '12px',
- minWidth: '25%',
- minHeight: '25%',
- maxWidth: '50%',
maxHeight: '50%',
+ maxWidth: '50%',
visibility: isVideoOn ? 'visible' : 'hidden',
}}
/>
</Draggable>
</Box>
- {/* Bottom panel with calling buttons */}
<Grid container>
<Grid item xs />
<Grid item sx={{ display: 'flex', justifyContent: 'center' }}>
@@ -135,7 +122,7 @@
<CallInterfaceSecondaryButtons gridItemRef={gridItemRef} />
</Grid>
</Grid>
- </Stack>
+ </Box>
</>
);
};
diff --git a/client/src/pages/CallPending.tsx b/client/src/pages/CallPending.tsx
index 6c0fc06..a9e2807 100644
--- a/client/src/pages/CallPending.tsx
+++ b/client/src/pages/CallPending.tsx
@@ -45,6 +45,7 @@
alignItems="center"
height="100%"
spacing={4}
+ flexGrow={1}
sx={{
backgroundColor: 'black',
}}
diff --git a/client/src/pages/Messenger.tsx b/client/src/pages/Messenger.tsx
index e711608..9b28a28 100644
--- a/client/src/pages/Messenger.tsx
+++ b/client/src/pages/Messenger.tsx
@@ -15,7 +15,7 @@
* License along with this program. If not, see
* <https://www.gnu.org/licenses/>.
*/
-import { Stack } from '@mui/material';
+import { Box, Stack } from '@mui/material';
import { Contact, Conversation, WebSocketMessageType } from 'jami-web-common';
import { useContext, useEffect, useState } from 'react';
import { Outlet } from 'react-router-dom';
@@ -91,7 +91,7 @@
}, [accountId, searchQuery, axiosInstance]);
return (
- <Stack direction="row" height="100vh" width="100vw">
+ <Box display="flex" height="100%">
<Stack flexGrow={0} flexShrink={0} overflow="auto">
<Header />
<NewContactForm onChange={setSearchQuery} />
@@ -104,10 +104,10 @@
</div>
)}
</Stack>
- <Stack flexGrow={1}>
+ <Box flexGrow={1} display="flex" position="relative">
<Outlet />
- </Stack>
- </Stack>
+ </Box>
+ </Box>
);
};