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 {window.i18n('ringing')};
+};
+
+const ConnectingLabel = () => {
+ const ongoingCallWithFocusedIsConnecting = useSelector(
+ getHasOngoingCallWithFocusedConvosIsConnecting
+ );
+ if (!ongoingCallWithFocusedIsConnecting) {
+ return null;
+ }
+ return {window.i18n('establishingConnection')};
+};
+
// tslint:disable-next-line: max-func-body-length
export const InConversationCallContainer = () => {
const ongoingCallProps = useSelector(getHasOngoingCallWith);
@@ -287,6 +317,8 @@ export const InConversationCallContainer = () => {
return (
+
+
{
+ 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,