From 27e87edac2f7a3ee0c512e00d5e23067b78922ce Mon Sep 17 00:00:00 2001
From: Audric Ackermann <audric@loki.network>
Date: Thu, 4 Nov 2021 14:13:01 +1100
Subject: [PATCH] add a ringing and establishing connection label video calls

---
 _locales/en/messages.json                     |  2 ++
 .../calling/CallInFullScreenContainer.tsx     |  1 +
 .../calling/InConversationCallContainer.tsx   | 32 +++++++++++++++++++
 .../conversation/SessionConversation.tsx      |  1 +
 ts/components/session/menu/Menu.tsx           |  2 +-
 ts/state/selectors/conversations.ts           | 26 +++++++++++++++
 6 files changed, 63 insertions(+), 1 deletion(-)

diff --git a/_locales/en/messages.json b/_locales/en/messages.json
index 7762475d7..14c7f8fc9 100644
--- a/_locales/en/messages.json
+++ b/_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",
diff --git a/ts/components/session/calling/CallInFullScreenContainer.tsx b/ts/components/session/calling/CallInFullScreenContainer.tsx
index a38f4040a..2ad6acf77 100644
--- a/ts/components/session/calling/CallInFullScreenContainer.tsx
+++ b/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';
diff --git a/ts/components/session/calling/InConversationCallContainer.tsx b/ts/components/session/calling/InConversationCallContainer.tsx
index ea76e8640..a2db31e70 100644
--- a/ts/components/session/calling/InConversationCallContainer.tsx
+++ b/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}
diff --git a/ts/components/session/conversation/SessionConversation.tsx b/ts/components/session/conversation/SessionConversation.tsx
index 7f9640f70..01902344a 100644
--- a/ts/components/session/conversation/SessionConversation.tsx
+++ b/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;
diff --git a/ts/components/session/menu/Menu.tsx b/ts/components/session/menu/Menu.tsx
index 651de525e..4f9635404 100644
--- a/ts/components/session/menu/Menu.tsx
+++ b/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);
           }
diff --git a/ts/state/selectors/conversations.ts b/ts/state/selectors/conversations.ts
index 026886997..40034835d 100644
--- a/ts/state/selectors/conversations.ts
+++ b/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,