commit b837e8ffdcf33261a3cd98aa4f0c7f4ea94a066c
author Charlie <charlie_duquette@hotmail.fr> Mon Nov 28 19:18:46 2022 -0500
committer Charlie Duquette <charlie_duquette@hotmail.fr> Tue Nov 29 16:21:33 2022 -0500
tree 137e4266b4786d0f328eed2ad3de56dc36f66439
parent 89615937e25e7d7ab99e31cd7ac56291a57f43c8

End call when connection is lost

- Automatically end call when WebRTC connection is lost
- Remove state when in call

GitLab: 182
Change-Id: I259eccda82db7304542bef863c429c9313b4145a

client/src/contexts/CallProvider.tsx

diff --git a/client/src/contexts/CallProvider.tsx b/client/src/contexts/CallProvider.tsx
index e99399d..f54b75f 100644
--- a/client/src/contexts/CallProvider.tsx
+++ b/client/src/contexts/CallProvider.tsx
@@ -110,11 +110,8 @@
   webSocket: IWebSocketContext;
   webRtcConnection: RTCPeerConnection;
 }) => {
-  const {
-    queryParams: { role: callRole },
-    state: routeState,
-  } = useUrlParams<CallRouteParams>();
-  const { remoteStreams, sendWebRtcOffer, isConnected } = useContext(WebRtcContext);
+  const { state: routeState } = useUrlParams<CallRouteParams>();
+  const { remoteStreams, sendWebRtcOffer, iceConnectionState } = useContext(WebRtcContext);
   const { conversationId, conversation } = useContext(ConversationContext);
   const navigate = useNavigate();
 
@@ -128,6 +125,7 @@
   const [isChatShown, setIsChatShown] = useState(false);
   const [isFullscreen, setIsFullscreen] = useState(false);
   const [callStatus, setCallStatus] = useState(routeState?.callStatus);
+  const [callRole] = useState(routeState?.role);
   const [callStartTime, setCallStartTime] = useState<Date | undefined>(undefined);
 
   // TODO: This logic will have to change to support multiple people in a call. Could we move this logic to the server?
@@ -298,13 +296,16 @@
   }, [webSocket, navigate, conversationId, quitCall]);
 
   useEffect(() => {
-    if (callStatus === CallStatus.Connecting && isConnected) {
+    if (
+      callStatus === CallStatus.Connecting &&
+      (iceConnectionState === 'connected' || iceConnectionState === 'completed')
+    ) {
       console.info('Changing call status to InCall');
       setCallStatus(CallStatus.InCall);
       setVideoStatus(isVideoOn);
       setCallStartTime(new Date());
     }
-  }, [isConnected, callStatus, setVideoStatus, isVideoOn]);
+  }, [iceConnectionState, callStatus, setVideoStatus, isVideoOn]);
 
   const acceptCall = useCallback(
     (withVideoOn: boolean) => {
@@ -334,6 +335,13 @@
   }, [webSocket, contactUri, conversationId, quitCall]);
 
   useEffect(() => {
+    if (iceConnectionState === 'disconnected') {
+      console.info('ICE connection disconnected');
+      endCall();
+    }
+  }, [iceConnectionState, callStatus, setVideoStatus, isVideoOn, endCall]);
+
+  useEffect(() => {
     const checkStatusTimeout = () => {
       if (callStatus !== CallStatus.InCall) {
         endCall();
@@ -346,6 +354,13 @@
     };
   }, [callStatus, endCall]);
 
+  useEffect(() => {
+    navigate('.', {
+      replace: true,
+      state: {},
+    });
+  }, [navigate]);
+
   if (!callRole || callStatus === undefined) {
     console.error('Invalid route. Redirecting...');
     return <Navigate to={'/'} />;