add a ringing and establishing connection label video calls

_locales/en/messages.json

@@ -436,6 +436,8 @@
   "surveyTitle": "Take our Session Survey",
   "goToOurSurvey": "Go to our survey",
   "incomingCallFrom": "Incoming call from '$name$'",
+  "ringing": "Ringing...",
+  "establishingConnection": "Establishing connection...",
   "accept": "Accept",
   "decline": "Decline",
   "endCall": "End call",

ts/components/session/calling/CallInFullScreenContainer.tsx

@@ -1,5 +1,6 @@
 import React, { useEffect } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
+// tslint:disable-next-line: no-submodule-imports
 import useKey from 'react-use/lib/useKey';
 import styled from 'styled-components';
 import { useVideoCallEventsListener } from '../../../hooks/useVideoEventListener';

ts/components/session/calling/InConversationCallContainer.tsx

@@ -7,6 +7,8 @@ import { CallManager, ToastUtils, UserUtils } from '../../../session/utils';
 import {
   getHasOngoingCallWith,
   getHasOngoingCallWithFocusedConvo,
+  getHasOngoingCallWithFocusedConvoIsOffering,
+  getHasOngoingCallWithFocusedConvosIsConnecting,
   getHasOngoingCallWithPubkey,
 } from '../../../state/selectors/conversations';
 import { SessionIconButton } from '../icon';
@@ -244,6 +246,34 @@ const handleMicrophoneToggle = async (
   }
 };
 
+const StyledCenteredLabel = styled.div`
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  height: min-content;
+  white-space: nowrap;
+  color: white;
+  text-shadow: 0px 0px 8px white;
+`;
+
+const RingingLabel = () => {
+  const ongoingCallWithFocusedIsRinging = useSelector(getHasOngoingCallWithFocusedConvoIsOffering);
+  if (!ongoingCallWithFocusedIsRinging) {
+    return null;
+  }
+  return <StyledCenteredLabel>{window.i18n('ringing')}</StyledCenteredLabel>;
+};
+
+const ConnectingLabel = () => {
+  const ongoingCallWithFocusedIsConnecting = useSelector(
+    getHasOngoingCallWithFocusedConvosIsConnecting
+  );
+  if (!ongoingCallWithFocusedIsConnecting) {
+    return null;
+  }
+  return <StyledCenteredLabel>{window.i18n('establishingConnection')}</StyledCenteredLabel>;
+};
+
 // tslint:disable-next-line: max-func-body-length
 export const InConversationCallContainer = () => {
   const ongoingCallProps = useSelector(getHasOngoingCallWith);
@@ -287,6 +317,8 @@ export const InConversationCallContainer = () => {
   return (
     <InConvoCallWindow>
       <RelativeCallWindow>
+        <RingingLabel />
+        <ConnectingLabel />
         <VideoContainer>
           <StyledVideoElement
             ref={videoRefRemote}

ts/components/session/conversation/SessionConversation.tsx

@@ -38,6 +38,7 @@ import { updateConfirmModal } from '../../../state/ducks/modalDialog';
 import { addStagedAttachmentsInConversation } from '../../../state/ducks/stagedAttachments';
 import { InConversationCallContainer } from '../calling/InConversationCallContainer';
 import { SplitViewContainer } from '../SplitViewContainer';
+// tslint:disable: jsx-curly-spacing
 
 interface State {
   showRecordingView: boolean;

ts/components/session/menu/Menu.tsx

@@ -378,7 +378,7 @@ export function getStartCallMenuItem(conversationId: string): JSX.Element | null
           }
 
           if (convo) {
-            convo.callState = 'connecting';
+            convo.callState = 'offering';
             await convo.commit();
             await CallManager.USER_callRecipient(convo.id);
           }

ts/state/selectors/conversations.ts

@@ -149,6 +149,32 @@ export const getHasOngoingCallWithFocusedConvo = createSelector(
   }
 );
 
+export const getHasOngoingCallWithFocusedConvoIsOffering = createSelector(
+  getConversations,
+  getSelectedConversationKey,
+  (state: ConversationsStateType, selectedConvoPubkey?: string): boolean => {
+    if (!selectedConvoPubkey) {
+      return false;
+    }
+    const isOffering = state.conversationLookup[selectedConvoPubkey]?.callState === 'offering';
+
+    return Boolean(isOffering);
+  }
+);
+
+export const getHasOngoingCallWithFocusedConvosIsConnecting = createSelector(
+  getConversations,
+  getSelectedConversationKey,
+  (state: ConversationsStateType, selectedConvoPubkey?: string): boolean => {
+    if (!selectedConvoPubkey) {
+      return false;
+    }
+    const isOffering = state.conversationLookup[selectedConvoPubkey]?.callState === 'connecting';
+
+    return Boolean(isOffering);
+  }
+);
+
 export const getHasOngoingCallWithNonFocusedConvo = createSelector(
   getHasOngoingCallWithPubkey,
   getSelectedConversationKey,