link accept/decline and endcall buttons to the webrtc background

ts/components/session/calling/CallContainer.tsx

@@ -1,9 +1,8 @@
 import React, { useState } from 'react';
 import styled from 'styled-components';
 import _ from 'underscore';
-import { ConversationModel } from '../../../models/conversation';
-// tslint:disable-next-line: no-submodule-imports
 import { getConversationController } from '../../../session/conversations/ConversationController';
+import { CallManager } from '../../../session/utils';
 import { SessionButton, SessionButtonColor } from '../SessionButton';
 import { SessionWrapperModal } from '../SessionWrapperModal';
 
@@ -35,7 +34,7 @@ const CallWindowHeader = styled.div`
 `;
 
 // TODO: Add proper styling for this
-const VideoContainer = styled.div`
+const VideoContainer = styled.video`
   width: 200px;
   height: 200px;
 `;
@@ -65,7 +64,9 @@ const CallWindowControls = styled.div`
 //     left: string;
 // } | null;
 
-type CallStateType = 'connecting' | 'ongoing' | 'incoming' | null
+type CallStateType = 'connecting' | 'ongoing' | 'incoming' | null;
+
+const fakeCaller = '054774a456f15c7aca42fe8d245983549000311aaebcf58ce246250c41fe227676';
 
 export const CallContainer = () => {
   const conversations = getConversationController().getConversations();
@@ -80,76 +81,75 @@ export const CallContainer = () => {
   // const [callWindowPosition, setCallWindowPosition] = useState<WindowPositionType>(null)
 
   // picking a conversation at random to test with
-    let randConvo = _.sample(conversations) as ConversationModel;
+  const foundConvo = conversations.find(convo => convo.id === fakeCaller);
-    randConvo.callState = 'incoming';
+
-    console.warn({ randConvo });
+  if (!foundConvo) {
+    throw new Error('fakeconvo not found');
+  }
+  foundConvo.callState = 'incoming';
+  console.warn('foundConvo: ', foundConvo);
 
   const firstCallingConvo = _.first(conversations.filter(convo => convo.callState !== undefined));
 
   //#region input handlers
-    const handleAcceptIncomingCall = () => {
+  const handleAcceptIncomingCall = async () => {
     console.warn('accept call');
 
     if (firstCallingConvo) {
       setConnectionState('connecting');
       firstCallingConvo.callState = 'connecting';
-
+      await CallManager.USER_acceptIncomingCallRequest(fakeCaller);
       // some delay
       setConnectionState('ongoing');
       firstCallingConvo.callState = 'ongoing';
     }
     // set conversationState = setting up
-    }
+  };
 
-    const handleDeclineIncomingCall = () => {
+  const handleDeclineIncomingCall = async () => {
     // set conversation.callState = null or undefined
     // close the modal
     if (firstCallingConvo) {
       firstCallingConvo.callState = undefined;
     }
     console.warn('declined call');
-    }
+    await CallManager.USER_rejectIncomingCallRequest(fakeCaller);
+  };
 
-    const handleEndCall = () => {
+  const handleEndCall = async () => {
     // call method to end call connection
-        console.warn("ending the call");
+    console.warn('ending the call');
-    }
+    await CallManager.USER_rejectIncomingCallRequest(fakeCaller);
+  };
 
   const handleMouseDown = () => {
     // reposition call window
-    }
+  };
   //#endregion
 
   return (
     <>
-            {connectionState === 'connecting' ?
+      {connectionState === 'connecting' ? 'connecting...' : null}
-                'connecting...'
+      {connectionState === 'ongoing' ? (
-                : null
-            }
-            {connectionState === 'ongoing' ?
         <CallWindow onMouseDown={handleMouseDown}>
           <CallWindowInner>
             <CallWindowHeader>
-                            { firstCallingConvo ? firstCallingConvo.getName() : 'Group name not found'}
+              {firstCallingConvo ? firstCallingConvo.getName() : 'Group name not found'}
             </CallWindowHeader>
-                        <VideoContainer></VideoContainer>
+            <VideoContainer />
             <CallWindowControls>
               <SessionButton text={'end call'} onClick={handleEndCall} />
               <SessionButton text={'end call'} onClick={handleEndCall} />
             </CallWindowControls>
           </CallWindowInner>
         </CallWindow>
-                : null
+      ) : null}
-            }
 
-            {!connectionState ?
+      {!connectionState ? (
-                <SessionWrapperModal title={'incoming call'}>
+        <SessionWrapperModal title={'incoming call'}>'none'</SessionWrapperModal>
-                    'none'
+      ) : null}
-                </SessionWrapperModal>
-                : null
-            }
 
-            {connectionState === 'incoming' ?
+      {connectionState === 'incoming' ? (
         <SessionWrapperModal title={'incoming call'}>
           <div className="session-modal__button-group">
             <SessionButton text={'decline'} onClick={handleDeclineIncomingCall} />
@@ -160,9 +160,7 @@ export const CallContainer = () => {
             />
           </div>
         </SessionWrapperModal>
-                : null
+      ) : null}
-            }
     </>
   );
 };
-

ts/session/utils/CallManager.ts

@@ -138,6 +138,19 @@ const openMediaDevices = async () => {
   });
 };
 
+const findLastMessageTypeFromSender = (sender: string, msgType: SignalService.CallMessage.Type) => {
+  const msgCacheFromSender = callCache.get(sender);
+  if (!msgCacheFromSender) {
+    return undefined;
+  }
+  const lastOfferMessage = _.findLast(msgCacheFromSender, m => m.type === msgType);
+
+  if (!lastOfferMessage) {
+    return undefined;
+  }
+  return lastOfferMessage;
+};
+
 // tslint:disable-next-line: function-name
 export async function USER_acceptIncomingCallRequest(fromSender: string) {
   const msgCacheFromSender = callCache.get(fromSender);
@@ -147,9 +160,9 @@ export async function USER_acceptIncomingCallRequest(fromSender: string) {
     );
     return;
   }
-  const lastOfferMessage = _.findLast(
+  const lastOfferMessage = findLastMessageTypeFromSender(
-    msgCacheFromSender,
+    fromSender,
-    m => m.type === SignalService.CallMessage.Type.OFFER
+    SignalService.CallMessage.Type.OFFER
   );
 
   if (!lastOfferMessage) {
@@ -217,6 +230,22 @@ export async function USER_acceptIncomingCallRequest(fromSender: string) {
     type: SignalService.CallMessage.Type.ANSWER,
     sdps: [answerSdp],
   });
+
+  const lastCandidatesFromSender = findLastMessageTypeFromSender(
+    fromSender,
+    SignalService.CallMessage.Type.ICE_CANDIDATES
+  );
+
+  if (lastCandidatesFromSender) {
+    console.warn('found sender ice candicate message already sent. Using it');
+    for (let index = 0; index < lastCandidatesFromSender.sdps.length; index++) {
+      const sdp = lastCandidatesFromSender.sdps[index];
+      const sdpMLineIndex = lastCandidatesFromSender.sdpMLineIndexes[index];
+      const sdpMid = lastCandidatesFromSender.sdpMids[index];
+      const candicate = new RTCIceCandidate({ sdpMid, sdpMLineIndex, candidate: sdp });
+      await peerConnection.addIceCandidate(candicate);
+    }
+  }
   window.log.info('sending ANSWER MESSAGE');
 
   await getMessageQueue().sendToPubKeyNonDurably(PubKey.cast(fromSender), callAnswerMessage);
@@ -254,8 +283,6 @@ export async function handleOfferCallMessage(
   }
   callCache.get(sender)?.push(callMessage);
   window.inboxStore?.dispatch(incomingCall({ sender }));
-  //FIXME audric. thiis should not be auto accepted here
-  await USER_acceptIncomingCallRequest(sender);
 }
 
 export async function handleCallAnsweredMessage(