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/pages/CallPending.tsx b/client/src/pages/CallPending.tsx
index c965d45..0ff1b9e 100644
--- a/client/src/pages/CallPending.tsx
+++ b/client/src/pages/CallPending.tsx
@@ -28,7 +28,8 @@
CallingRefuseButton,
} from '../components/CallButtons';
import ConversationAvatar from '../components/ConversationAvatar';
-import { CallStatus, useCallContext } from '../contexts/CallProvider';
+import { useCallManagerContext } from '../contexts/CallManagerProvider';
+import { CallStatus } from '../contexts/CallProvider';
import { useConversationContext } from '../contexts/ConversationProvider';
import { useUserMediaContext } from '../contexts/UserMediaProvider';
import { VideoElementWithSinkId } from '../utils/utils';
@@ -36,7 +37,7 @@
export const CallPending = () => {
const { conversationDisplayName } = useConversationContext();
const { localStream } = useUserMediaContext();
- const { callRole } = useCallContext();
+ const { callData } = useCallManagerContext();
const localVideoRef = useRef<VideoElementWithSinkId | null>(null);
useEffect(() => {
@@ -107,7 +108,7 @@
/>
</Box>
</Box>
- {callRole === 'caller' ? <CallPendingCallerInterface /> : <CallPendingReceiverInterface />}
+ {callData?.role === 'caller' ? <CallPendingCallerInterface /> : <CallPendingReceiverInterface />}
</Stack>
);
};
@@ -146,7 +147,7 @@
};
export const CallPendingCallerInterface = () => {
- const { callStatus } = useCallContext();
+ const { callStatus } = useCallManagerContext();
const { t } = useTranslation();
const { members } = useConversationContext();
const memberName = useMemo(() => members[0].getDisplayName(), [members]);
@@ -179,7 +180,7 @@
export const CallPendingReceiverInterface = () => {
const { state } = useLocation();
- const { callStatus } = useCallContext();
+ const { callStatus } = useCallManagerContext();
const { t } = useTranslation();
const { members } = useConversationContext();