Improve permission handling in call flow
Improve permission handling by asking the user to give mic and camera permissions before sending `CallBegin` or `CallAccept` for the caller and receiver respectively.
Followed the flow described here: https://developer.mozilla.org/en-US/docs/Web/API/WebRTC_API/Connectivity#session_descriptions
CallProvider:
- Change functions order to place listeners under the function that sends the corresponding WebSocket message.
- Replace `Default` CallStatus with `Loading` for when asking user permissions before sending the `CallBegin`/`CallAccept` message.
- Remove `localStream` and `remoteStream` from `CallContext`. They are now available only in `WebRtcContext`.
- Replace `setAudioStatus` and `setVideoStatus` with `setIsAudioOn` and `setIsVideoOn`. A `useEffect` is now used to disable the tracks when the audio/video status changes.
WebRtcProvider:
- Move WebRTC connection close logic to WebRtcProvider
- Remove `webRtcConnection` from `WebRtcContext`. `WebRtcProvider` is now in charge of setting everything related to the WebRTC Connection.
UI:
- Add `CallPermissionDenied` page for when permissions are denied.
- Rework `CallPending` to display `Loading...` when waiting for user permissions
Change-Id: I48153577cca4c73cdb9b81d2fa78cfdfe2e06d69
diff --git a/client/src/pages/CallPermissionDenied.tsx b/client/src/pages/CallPermissionDenied.tsx
new file mode 100644
index 0000000..5fe0897
--- /dev/null
+++ b/client/src/pages/CallPermissionDenied.tsx
@@ -0,0 +1,45 @@
+/*
+ * Copyright (C) 2022 Savoir-faire Linux Inc.
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation; either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public
+ * License along with this program. If not, see
+ * <https://www.gnu.org/licenses/>.
+ */
+import { Stack, Typography } from '@mui/material';
+import { useTranslation } from 'react-i18next';
+
+export default () => {
+ const { t } = useTranslation();
+
+ // TODO: The UI of this page needs to be improved
+ return (
+ <Stack
+ alignItems="center"
+ justifyContent="center"
+ textAlign="center"
+ spacing={1}
+ paddingX={8}
+ sx={{
+ flexGrow: 1,
+ backgroundColor: 'black',
+ }}
+ >
+ <Typography variant="h1" color="white">
+ {t('permission_denied_title')}
+ </Typography>
+ <Typography variant="h2" color="white">
+ {t('permission_denied_details')}
+ </Typography>
+ </Stack>
+ );
+};