Merge pull request #2165 from Bilb/fix-call-bugs

Fix call bugs

* add local stream display in fullscreen 
* pick a sample of 2 iceservers for init connection
* show video controls when the mouse is over the app anywhere

ts/components/calling/CallButtons.tsx

@@ -3,7 +3,7 @@ import { animation, contextMenu, Item, Menu } from 'react-contexify';
 import { InputItem } from '../../session/utils/calling/CallManager';
 import { setFullScreenCall } from '../../state/ducks/call';
 import { CallManager, ToastUtils } from '../../session/utils';
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { getHasOngoingCallWithPubkey } from '../../state/selectors/call';
 import { DropDownAndToggleButton } from '../icon/DropDownAndToggleButton';
@@ -317,7 +317,7 @@ const handleSpeakerToggle = async (
   }
 };
 
-const StyledCallWindowControls = styled.div`
+const StyledCallWindowControls = styled.div<{ makeVisible: boolean }>`
   position: absolute;
 
   bottom: 0px;
@@ -335,10 +335,7 @@ const StyledCallWindowControls = styled.div`
   display: flex;
 
   justify-content: center;
-  opacity: 0;
-  &:hover {
-    opacity: 1;
-  }
+  opacity: ${props => (props.makeVisible ? 1 : 0)};
 `;
 
 export const CallWindowControls = ({
@@ -360,8 +357,27 @@ export const CallWindowControls = ({
   currentConnectedCameras: Array<InputItem>;
   isFullScreen: boolean;
 }) => {
+  const [makeVisible, setMakeVisible] = useState(true);
+
+  const setMakeVisibleTrue = () => {
+    setMakeVisible(true);
+  };
+  const setMakeVisibleFalse = () => {
+    setMakeVisible(false);
+  };
+
+  useEffect(() => {
+    setMakeVisibleTrue();
+    document.addEventListener('mouseenter', setMakeVisibleTrue);
+    document.addEventListener('mouseleave', setMakeVisibleFalse);
+
+    return () => {
+      document.removeEventListener('mouseenter', setMakeVisibleTrue);
+      document.removeEventListener('mouseleave', setMakeVisibleFalse);
+    };
+  }, [isFullScreen]);
   return (
-    <StyledCallWindowControls>
+    <StyledCallWindowControls makeVisible={makeVisible}>
       {!remoteStreamVideoIsMuted && <ShowInFullScreenButton isFullScreen={isFullScreen} />}
 
       <VideoInputButton

ts/components/calling/CallInFullScreenContainer.tsx

@@ -26,6 +26,15 @@ const CallInFullScreenVisible = styled.div`
   opacity: 1;
 `;
 
+const StyledLocalVideoElement = styled.video<{ isVideoMuted: boolean }>`
+  height: 20%;
+  width: 20%;
+  bottom: 0;
+  right: 0;
+  position: absolute;
+  opacity: ${props => (props.isVideoMuted ? 0 : 1)};
+`;
+
 export const CallInFullScreenContainer = () => {
   const dispatch = useDispatch();
   const ongoingCallWithFocused = useSelector(getHasOngoingCallWithFocusedConvo);
@@ -34,6 +43,7 @@ export const CallInFullScreenContainer = () => {
   const {
     remoteStream,
     remoteStreamVideoIsMuted,
+    localStream,
     currentConnectedAudioInputs,
     currentConnectedAudioOutputs,
     currentConnectedCameras,
@@ -43,6 +53,7 @@ export const CallInFullScreenContainer = () => {
   } = useVideoCallEventsListener('CallInFullScreenContainer', true);
 
   const videoRefRemote = React.useRef<HTMLVideoElement>(null);
+  const videoRefLocal = React.useRef<HTMLVideoElement>(null);
 
   function toggleFullScreenOFF() {
     dispatch(setFullScreenCall(false));
@@ -69,6 +80,12 @@ export const CallInFullScreenContainer = () => {
     }
   }
 
+  if (videoRefLocal?.current) {
+    if (videoRefLocal.current.srcObject !== localStream) {
+      videoRefLocal.current.srcObject = localStream;
+    }
+  }
+
   return (
     <CallInFullScreenVisible onClick={toggleFullScreenOFF}>
       <StyledVideoElement
@@ -76,6 +93,11 @@ export const CallInFullScreenContainer = () => {
         autoPlay={true}
         isVideoMuted={remoteStreamVideoIsMuted}
       />
+      <StyledLocalVideoElement
+        ref={videoRefLocal}
+        autoPlay={true}
+        isVideoMuted={localStreamVideoIsMuted}
+      />
       <CallWindowControls
         currentConnectedAudioInputs={currentConnectedAudioInputs}
         currentConnectedAudioOutputs={currentConnectedAudioOutputs}

ts/components/calling/DraggableCallContainer.tsx

@@ -53,11 +53,6 @@ const CenteredAvatarInDraggable = styled.div`
   align-items: center;
 `;
 
-// TODO:
-/**
- * Add mute input, deafen, end call, possibly add person to call
- * duration - look at how duration calculated for recording.
- */
 export const DraggableCallContainer = () => {
   const ongoingCallProps = useSelector(getHasOngoingCallWith);
   const selectedConversationKey = useSelector(getSelectedConversationKey);

ts/components/conversation/composition/CompositionBox.tsx

@@ -986,15 +986,15 @@ class CompositionBoxInner extends React.Component<Props, State> {
 
     // update our selection because updating text programmatically
     // will put the selection at the end of the textarea
-    const selectionStart = currentSelectionStart + Number(colons.length);
-    messageBox.selectionStart = selectionStart;
-    messageBox.selectionEnd = selectionStart;
-
-    // Sometimes, we have to repeat the set of the selection position with a timeout to be effective
-    setTimeout(() => {
-      messageBox.selectionStart = selectionStart;
-      messageBox.selectionEnd = selectionStart;
-    }, 20);
+    // const selectionStart = currentSelectionStart + Number(1);
+    // messageBox.selectionStart = selectionStart;
+    // messageBox.selectionEnd = selectionStart;
+
+    // // Sometimes, we have to repeat the set of the selection position with a timeout to be effective
+    // setTimeout(() => {
+    //   messageBox.selectionStart = selectionStart;
+    //   messageBox.selectionEnd = selectionStart;
+    // }, 20);
   }
 
   private focusCompositionBox() {

ts/session/utils/calling/CallManager.ts

@@ -120,46 +120,51 @@ let ignoreOffer = false;
 let isSettingRemoteAnswerPending = false;
 let lastOutgoingOfferTimestamp = -Infinity;
 
+/**
+ * This array holds all of the ice servers Session can contact.
+ * They are all contacted at the same time, so before triggering the request, we get only a subset of those, randomly
+ */
+const iceServersFullArray = [
+  {
+    urls: 'turn:freyr.getsession.org',
+    username: 'session202111',
+    credential: '053c268164bc7bd7',
+  },
+  {
+    urls: 'turn:fenrir.getsession.org',
+    username: 'session202111',
+    credential: '053c268164bc7bd7',
+  },
+  {
+    urls: 'turn:frigg.getsession.org',
+    username: 'session202111',
+    credential: '053c268164bc7bd7',
+  },
+  {
+    urls: 'turn:angus.getsession.org',
+    username: 'session202111',
+    credential: '053c268164bc7bd7',
+  },
+  {
+    urls: 'turn:hereford.getsession.org',
+    username: 'session202111',
+    credential: '053c268164bc7bd7',
+  },
+  {
+    urls: 'turn:holstein.getsession.org',
+    username: 'session202111',
+    credential: '053c268164bc7bd7',
+  },
+  {
+    urls: 'turn:brahman.getsession.org',
+    username: 'session202111',
+    credential: '053c268164bc7bd7',
+  },
+];
+
 const configuration: RTCConfiguration = {
   bundlePolicy: 'max-bundle',
   rtcpMuxPolicy: 'require',
-  iceServers: [
-    {
-      urls: 'turn:freyr.getsession.org',
-      username: 'session202111',
-      credential: '053c268164bc7bd7',
-    },
-    {
-      urls: 'turn:fenrir.getsession.org',
-      username: 'session202111',
-      credential: '053c268164bc7bd7',
-    },
-    {
-      urls: 'turn:frigg.getsession.org',
-      username: 'session202111',
-      credential: '053c268164bc7bd7',
-    },
-    {
-      urls: 'turn:angus.getsession.org',
-      username: 'session202111',
-      credential: '053c268164bc7bd7',
-    },
-    {
-      urls: 'turn:hereford.getsession.org',
-      username: 'session202111',
-      credential: '053c268164bc7bd7',
-    },
-    {
-      urls: 'turn:holstein.getsession.org',
-      username: 'session202111',
-      credential: '053c268164bc7bd7',
-    },
-    {
-      urls: 'turn:brahman.getsession.org',
-      username: 'session202111',
-      credential: '053c268164bc7bd7',
-    },
-  ],
   // iceTransportPolicy: 'relay', // for now, this cause the connection to break after 30-40 sec if we enable this
 };
 
@@ -701,7 +706,8 @@ function createOrGetPeerConnection(withPubkey: string) {
     return peerConnection;
   }
   remoteStream = new MediaStream();
-  peerConnection = new RTCPeerConnection(configuration);
+  const sampleOfICeServers = _.sampleSize(iceServersFullArray, 2);
+  peerConnection = new RTCPeerConnection({ ...configuration, iceServers: sampleOfICeServers });
   dataChannel = peerConnection.createDataChannel('session-datachannel', {
     ordered: true,
     negotiated: true,