commit 20cf1c8b62a1b090e0c05094dd7e6d7a40f6fe78
author Misha Krieger-Raynauld <mkriegerraynauld@gmail.com> Wed Nov 23 20:26:50 2022 -0500
committer Misha Krieger-Raynauld <mkriegerraynauld@gmail.com> Thu Nov 24 14:41:56 2022 -0500
tree 48307e17a108ea2747b467b2e9d47aff830c3ee0
parent 86917ea0fbd53db69f5f77a22fcdc89c3bb6d3c0

Refactor WebSocket message interfaces

Changes:
- Replace AccountTextMessage with an extendable ContactMessage interface
- Add accountId parameter to server-side WebSocket callbacks
- Set the accountId for WebRTC messages on server-side for security
- Rename all WebRTC and SDP variables to proper camelCase or PascalCase

GitLab: #147
Change-Id: I125b5431821b03ef4d46b751eb1c13830017ccff

client/src/contexts/CallProvider.tsx

diff --git a/client/src/contexts/CallProvider.tsx b/client/src/contexts/CallProvider.tsx
index 0cc667a..a17e738 100644
--- a/client/src/contexts/CallProvider.tsx
+++ b/client/src/contexts/CallProvider.tsx
@@ -15,16 +15,15 @@
  * License along with this program.  If not, see
  * <https://www.gnu.org/licenses/>.
  */
-import { AccountTextMessage, WebSocketMessageType } from 'jami-web-common';
-import React, { createContext, useCallback, useContext, useEffect, useMemo, useState } from 'react';
+import { CallAction, WebSocketMessageType } from 'jami-web-common';
+import { createContext, useCallback, useContext, useEffect, useMemo, useState } from 'react';
 import { Navigate } from 'react-router-dom';
 
 import { useUrlParams } from '../hooks/useUrlParams';
 import { CallRouteParams } from '../router';
 import { WithChildren } from '../utils/utils';
-import { useAuthContext } from './AuthProvider';
 import { ConversationContext } from './ConversationProvider';
-import { WebRTCContext } from './WebRTCProvider';
+import { WebRtcContext } from './WebRtcProvider';
 import { WebSocketContext } from './WebSocketProvider';
 
 export type CallRole = 'caller' | 'receiver';
@@ -77,10 +76,9 @@
   const {
     queryParams: { role: callRole },
   } = useUrlParams<CallRouteParams>();
-  const { account } = useAuthContext();
   const webSocket = useContext(WebSocketContext);
-  const { webRTCConnection, remoteStreams, sendWebRTCOffer, isConnected } = useContext(WebRTCContext);
-  const { conversation } = useContext(ConversationContext);
+  const { webRtcConnection, remoteStreams, sendWebRtcOffer, isConnected } = useContext(WebRtcContext);
+  const { conversationId, conversation } = useContext(ConversationContext);
 
   const [mediaDevices, setMediaDevices] = useState<Record<MediaDeviceKind, MediaDeviceInfo[]>>(
     defaultCallContext.mediaDevices
@@ -135,12 +133,12 @@
   }, [setLocalStream]);
 
   useEffect(() => {
-    if (localStream && webRTCConnection) {
+    if (localStream && webRtcConnection) {
       for (const track of localStream.getTracks()) {
-        webRTCConnection.addTrack(track, localStream);
+        webRtcConnection.addTrack(track, localStream);
       }
     }
-  }, [localStream, webRTCConnection]);
+  }, [localStream, webRtcConnection]);
 
   const setAudioStatus = useCallback(
     (isOn: boolean) => {
@@ -173,22 +171,22 @@
   );
 
   useEffect(() => {
-    if (!webSocket || !webRTCConnection) {
+    if (!webSocket || !webRtcConnection) {
       return;
     }
 
     if (callRole === 'caller' && callStatus === CallStatus.Ringing) {
-      const callAcceptListener = (data: AccountTextMessage<undefined>) => {
-        console.info('Received event on CallAccept', data);
+      const callAcceptListener = (_data: CallAction) => {
+        console.info('Received event on CallAccept');
         setCallStatus(CallStatus.Connecting);
 
-        webRTCConnection
+        webRtcConnection
           .createOffer({
             offerToReceiveAudio: true,
             offerToReceiveVideo: true,
           })
-          .then((offerSDP) => {
-            sendWebRTCOffer(offerSDP);
+          .then((sdp) => {
+            sendWebRtcOffer(sdp);
           });
       };
 
@@ -198,7 +196,7 @@
         webSocket.unbind(WebSocketMessageType.CallAccept, callAcceptListener);
       };
     }
-  }, [callRole, webSocket, webRTCConnection, sendWebRTCOffer, callStatus]);
+  }, [callRole, webSocket, webRtcConnection, sendWebRtcOffer, callStatus]);
 
   useEffect(() => {
     if (callStatus === CallStatus.Connecting && isConnected) {
@@ -212,16 +210,15 @@
       throw new Error('Could not accept call');
     }
 
-    const callAccept = {
-      from: account.getId(),
-      to: contactUri,
-      message: undefined,
+    const callAccept: CallAction = {
+      contactId: contactUri,
+      conversationId,
     };
 
     console.info('Sending CallAccept', callAccept);
     webSocket.send(WebSocketMessageType.CallAccept, callAccept);
     setCallStatus(CallStatus.Connecting);
-  }, [webSocket, account, contactUri]);
+  }, [webSocket, contactUri, conversationId]);
 
   if (!callRole) {
     console.error('Call role not defined. Redirecting...');