commit 255682e08a2c8a636ada6f730451d0fa1f290835
author idillon <io.daza-dillon@savoirfairelinux.com> Mon Feb 06 13:25:26 2023 -0500
committer Io Daza-Dillon <io.daza-dillon@savoirfairelinux.com> Fri Feb 24 10:48:00 2023 -0500
tree 44fd3a8c1d098e1275646252f303608db5d0a4f0
parent 5d25d1142999143618c7aea2fbebd2981f8e5f72

Transform CallProvider into 'CallManager' hook, review WebSocket messages for calls

- These changes allowed to remove more cascading effects. It is now possible to reactivate StrictMode. Downside is we lost the 'optional context' of CallProvider: the call logic will be loaded even if there is no call.
- The WebSocket messages have been changed so the client does not have to know the conversation members before a call. Previously, the client had to fetch the conversation members for a call, which was causing cascading effects.
- Accidentally, moving the handling of conversation members to the server added some logic for calls with more than two participants, but it is still not ready to work.

* CallProvider.tsx will be renamed in next commit in order to make it easier to track its file history

Change-Id: Iae711009adafce065ac3defc1c91c7ca0f37898c

client/src/components/CallButtons.tsx

diff --git a/client/src/components/CallButtons.tsx b/client/src/components/CallButtons.tsx
index d853cc1..0ee463e 100644
--- a/client/src/components/CallButtons.tsx
+++ b/client/src/components/CallButtons.tsx
@@ -20,7 +20,8 @@
 import { styled } from '@mui/material/styles';
 import { ChangeEvent, useMemo } from 'react';
 
-import { CallStatus, useCallContext, VideoStatus } from '../contexts/CallProvider';
+import { useCallManagerContext } from '../contexts/CallManagerProvider';
+import { CallStatus, VideoStatus } from '../contexts/CallProvider';
 import { useUserMediaContext } from '../contexts/UserMediaProvider';
 import {
   ColoredRoundButton,
@@ -58,7 +59,7 @@
 });
 
 export const CallingChatButton = (props: ExpandableButtonProps) => {
-  const { setIsChatShown } = useCallContext();
+  const { setIsChatShown } = useCallManagerContext();
   return (
     <CallButton
       aria-label="chat"
@@ -72,7 +73,7 @@
 };
 
 export const CallingEndButton = (props: ExpandableButtonProps) => {
-  const { endCall } = useCallContext();
+  const { endCall } = useCallManagerContext();
   return (
     <ColoredRoundButton
       paletteColor={(theme) => theme.palette.error}
@@ -91,7 +92,7 @@
 };
 
 export const CallingFullScreenButton = (props: ExpandableButtonProps) => {
-  const { setIsFullscreen } = useCallContext();
+  const { setIsFullscreen } = useCallManagerContext();
   return (
     <CallButton
       aria-label="full screen"
@@ -123,7 +124,7 @@
 };
 
 const ToggleScreenShareIconButton = (props: IconButtonProps) => {
-  const { videoStatus, updateVideoStatus } = useCallContext();
+  const { videoStatus, updateVideoStatus } = useCallManagerContext();
 
   return (
     <ToggleIconButton
@@ -194,7 +195,7 @@
 };
 
 const ToggleAudioCameraIconButton = (props: IconButtonProps) => {
-  const { isAudioOn, setIsAudioOn } = useCallContext();
+  const { isAudioOn, setIsAudioOn } = useCallManagerContext();
   return (
     <ToggleIconButton
       IconOn={MicroIcon}
@@ -220,7 +221,7 @@
 };
 
 const ToggleVideoCameraIconButton = (props: IconButtonProps) => {
-  const { videoStatus, updateVideoStatus } = useCallContext();
+  const { videoStatus, updateVideoStatus } = useCallManagerContext();
   return (
     <ToggleIconButton
       IconOn={VideoCameraIcon}
@@ -236,7 +237,7 @@
 
 // Calling pending/receiving interface
 export const CallingCancelButton = (props: IconButtonProps) => {
-  const { endCall } = useCallContext();
+  const { endCall } = useCallManagerContext();
 
   return (
     <ColoredRoundButton
@@ -252,7 +253,7 @@
 };
 
 export const CallingAnswerAudioButton = (props: IconButtonProps) => {
-  const { acceptCall, callStatus } = useCallContext();
+  const { acceptCall, callStatus } = useCallManagerContext();
 
   return (
     <ColoredRoundButton
@@ -269,7 +270,7 @@
 };
 
 export const CallingAnswerVideoButton = (props: IconButtonProps) => {
-  const { acceptCall, callStatus } = useCallContext();
+  const { acceptCall, callStatus } = useCallManagerContext();
   return (
     <ColoredRoundButton
       disabled={callStatus === CallStatus.Connecting || callStatus === CallStatus.Loading}
@@ -285,7 +286,7 @@
 };
 
 export const CallingRefuseButton = (props: IconButtonProps) => {
-  const { endCall } = useCallContext();
+  const { endCall } = useCallManagerContext();
   return (
     <ColoredRoundButton
       aria-label="refuse call"