Add routing for call page
Enable buttons to start a call.
Improve ConversationListItem context menu layout.
Move calling buttons from `Button.tsx` to `CallButtons.tsx`.
Add CallProvider
GitLab: #78
Change-Id: I921aa11383bf39fae18e59b01afb00dc66b0d5e6
diff --git a/client/src/pages/CallInterface.tsx b/client/src/pages/CallInterface.tsx
index 61c90bb..adc12c7 100644
--- a/client/src/pages/CallInterface.tsx
+++ b/client/src/pages/CallInterface.tsx
@@ -16,6 +16,7 @@
* <https://www.gnu.org/licenses/>.
*/
import { Box, Card, Grid, Stack, Typography } from '@mui/material';
+import React from 'react';
import {
CallingChatButton,
@@ -28,9 +29,24 @@
CallingScreenShareButton,
CallingVideoCameraButton,
CallingVolumeButton,
-} from '../components/Button';
+} from '../components/CallButtons';
+import CallProvider from '../contexts/CallProvider';
+import { useUrlParams } from '../utils/hooks';
+import { CallRouteParams } from './JamiMessenger';
-export default function CallInterface() {
+export default () => {
+ const {
+ queryParams: { video },
+ } = useUrlParams<CallRouteParams>();
+
+ return (
+ <CallProvider camOn={video === 'true'}>
+ <CallInterface />
+ </CallProvider>
+ );
+};
+
+const CallInterface = () => {
return (
<>
<Box sx={{ backgroundColor: 'blue', width: '100%', height: '100%', position: 'absolute' }}>
@@ -77,7 +93,7 @@
</Stack>
</>
);
-}
+};
const CallInterfaceInformation = () => {
return (
diff --git a/client/src/pages/JamiMessenger.tsx b/client/src/pages/JamiMessenger.tsx
index 197a3fb..2cb485b 100644
--- a/client/src/pages/JamiMessenger.tsx
+++ b/client/src/pages/JamiMessenger.tsx
@@ -17,13 +17,18 @@
*/
import { Route, Routes } from 'react-router-dom';
+import { RouteParams } from '../utils/hooks';
+import CallInterface from './CallInterface';
import Messenger from './Messenger';
+export type CallRouteParams = RouteParams<{ conversationId: string }, { video?: 'true' }>;
+
export default function JamiMessenger() {
return (
<Routes>
<Route path="addContact/:contactId" element={<Messenger />} />
<Route path="conversation/:conversationId" element={<Messenger />} />
+ <Route path="call/:conversationId" element={<CallInterface />} />
<Route path="*" element={<Messenger />} />
</Routes>
);