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
diff --git a/client/src/components/ConversationView.tsx b/client/src/components/ConversationView.tsx
index 5f76add..b636ec3 100644
--- a/client/src/components/ConversationView.tsx
+++ b/client/src/components/ConversationView.tsx
@@ -16,10 +16,8 @@
* <https://www.gnu.org/licenses/>.
*/
import { Divider, Stack, Typography } from '@mui/material';
-import { useContext } from 'react';
-import { CallManagerContext } from '../contexts/CallManagerProvider';
-import { useCallContext } from '../contexts/CallProvider';
+import { useCallManagerContext } from '../contexts/CallManagerProvider';
import { useConversationContext } from '../contexts/ConversationProvider';
import CallInterface from '../pages/CallInterface';
import ChatInterface from '../pages/ChatInterface';
@@ -27,10 +25,9 @@
const ConversationView = () => {
const { conversationId } = useConversationContext();
- const callContext = useCallContext(true);
- const { callData } = useContext(CallManagerContext);
+ const { callData } = useCallManagerContext();
- if (callContext && callData?.conversationId === conversationId) {
+ if (callData?.conversationId === conversationId) {
return <CallInterface />;
}
@@ -49,7 +46,7 @@
const ConversationHeader = () => {
const { conversationId, conversationDisplayName } = useConversationContext();
- const { startCall } = useContext(CallManagerContext);
+ const { startCall } = useCallManagerContext();
return (
<Stack direction="row" padding="16px" overflow="hidden">
@@ -59,8 +56,8 @@
</Typography>
</Stack>
<Stack direction="row" spacing="20px">
- <StartAudioCallButton onClick={() => startCall({ conversationId, role: 'caller' })} />
- <StartVideoCallButton onClick={() => startCall({ conversationId, role: 'caller', withVideoOn: true })} />
+ <StartAudioCallButton onClick={() => startCall(conversationId)} />
+ <StartVideoCallButton onClick={() => startCall(conversationId, true)} />
<AddParticipantButton />
<ShowOptionsMenuButton />
</Stack>