add a ringing and establishing connection label video calls
This commit is contained in:
parent
dd25d9cb7f
commit
27e87edac2
|
@ -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",
|
||||
|
|
|
@ -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';
|
||||
|
|
|
@ -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}
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
|
|
|
@ -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,
|
||||
|
|
Loading…
Reference in New Issue