Redux state: Allow multiple calls to be stored
This commit is contained in:
parent
753e0279c6
commit
3468de255d
21 changed files with 1191 additions and 515 deletions
|
@ -5,7 +5,6 @@ import React, { useState, useRef, useEffect, useCallback } from 'react';
|
|||
import { noop } from 'lodash';
|
||||
import classNames from 'classnames';
|
||||
import {
|
||||
CallDetailsType,
|
||||
HangUpType,
|
||||
SetLocalAudioType,
|
||||
SetLocalPreviewType,
|
||||
|
@ -20,13 +19,22 @@ import { ColorType } from '../types/Colors';
|
|||
import { LocalizerType } from '../types/Util';
|
||||
|
||||
export type PropsType = {
|
||||
callDetails?: CallDetailsType;
|
||||
callState?: CallState;
|
||||
conversation: {
|
||||
id: string;
|
||||
avatarPath?: string;
|
||||
color?: ColorType;
|
||||
title: string;
|
||||
name?: string;
|
||||
phoneNumber?: string;
|
||||
profileName?: string;
|
||||
};
|
||||
callState: CallState;
|
||||
hangUp: (_: HangUpType) => void;
|
||||
hasLocalAudio: boolean;
|
||||
hasLocalVideo: boolean;
|
||||
hasRemoteVideo: boolean;
|
||||
i18n: LocalizerType;
|
||||
joinedAt?: number;
|
||||
me: {
|
||||
avatarPath?: string;
|
||||
color?: ColorType;
|
||||
|
@ -44,13 +52,14 @@ export type PropsType = {
|
|||
};
|
||||
|
||||
export const CallScreen: React.FC<PropsType> = ({
|
||||
callDetails,
|
||||
callState,
|
||||
conversation,
|
||||
hangUp,
|
||||
hasLocalAudio,
|
||||
hasLocalVideo,
|
||||
hasRemoteVideo,
|
||||
i18n,
|
||||
joinedAt,
|
||||
me,
|
||||
setLocalAudio,
|
||||
setLocalVideo,
|
||||
|
@ -59,29 +68,17 @@ export const CallScreen: React.FC<PropsType> = ({
|
|||
togglePip,
|
||||
toggleSettings,
|
||||
}) => {
|
||||
const { acceptedTime, callId } = callDetails || {};
|
||||
|
||||
const toggleAudio = useCallback(() => {
|
||||
if (!callId) {
|
||||
return;
|
||||
}
|
||||
|
||||
setLocalAudio({
|
||||
callId,
|
||||
enabled: !hasLocalAudio,
|
||||
});
|
||||
}, [callId, setLocalAudio, hasLocalAudio]);
|
||||
}, [setLocalAudio, hasLocalAudio]);
|
||||
|
||||
const toggleVideo = useCallback(() => {
|
||||
if (!callId) {
|
||||
return;
|
||||
}
|
||||
|
||||
setLocalVideo({
|
||||
callId,
|
||||
enabled: !hasLocalVideo,
|
||||
});
|
||||
}, [callId, setLocalVideo, hasLocalVideo]);
|
||||
}, [setLocalVideo, hasLocalVideo]);
|
||||
|
||||
const [acceptedDuration, setAcceptedDuration] = useState<number | null>(null);
|
||||
const [showControls, setShowControls] = useState(true);
|
||||
|
@ -100,15 +97,15 @@ export const CallScreen: React.FC<PropsType> = ({
|
|||
}, [setLocalPreview, setRendererCanvas]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!acceptedTime) {
|
||||
if (!joinedAt) {
|
||||
return noop;
|
||||
}
|
||||
// It's really jumpy with a value of 500ms.
|
||||
const interval = setInterval(() => {
|
||||
setAcceptedDuration(Date.now() - acceptedTime);
|
||||
setAcceptedDuration(Date.now() - joinedAt);
|
||||
}, 100);
|
||||
return clearInterval.bind(null, interval);
|
||||
}, [acceptedTime]);
|
||||
}, [joinedAt]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!showControls) {
|
||||
|
@ -147,10 +144,6 @@ export const CallScreen: React.FC<PropsType> = ({
|
|||
|
||||
const isAudioOnly = !hasLocalVideo && !hasRemoteVideo;
|
||||
|
||||
if (!callDetails || !callState) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const controlsFadeClass = classNames({
|
||||
'module-ongoing-call__controls--fadeIn':
|
||||
(showControls || isAudioOnly) && callState !== CallState.Accepted,
|
||||
|
@ -181,7 +174,7 @@ export const CallScreen: React.FC<PropsType> = ({
|
|||
)}
|
||||
>
|
||||
<div className="module-calling__header--header-name">
|
||||
{callDetails.title}
|
||||
{conversation.title}
|
||||
</div>
|
||||
{renderHeaderMessage(i18n, callState, acceptedDuration)}
|
||||
<div className="module-calling-tools">
|
||||
|
@ -205,7 +198,7 @@ export const CallScreen: React.FC<PropsType> = ({
|
|||
ref={remoteVideoRef}
|
||||
/>
|
||||
) : (
|
||||
renderAvatar(i18n, callDetails)
|
||||
renderAvatar(i18n, conversation)
|
||||
)}
|
||||
<div className="module-ongoing-call__footer">
|
||||
{/* This layout-only element is not ideal.
|
||||
|
@ -233,7 +226,7 @@ export const CallScreen: React.FC<PropsType> = ({
|
|||
buttonType={CallingButtonType.HANG_UP}
|
||||
i18n={i18n}
|
||||
onClick={() => {
|
||||
hangUp({ callId });
|
||||
hangUp({ conversationId: conversation.id });
|
||||
}}
|
||||
tooltipDistance={24}
|
||||
/>
|
||||
|
@ -269,16 +262,22 @@ export const CallScreen: React.FC<PropsType> = ({
|
|||
|
||||
function renderAvatar(
|
||||
i18n: LocalizerType,
|
||||
callDetails: CallDetailsType
|
||||
): JSX.Element {
|
||||
const {
|
||||
{
|
||||
avatarPath,
|
||||
color,
|
||||
name,
|
||||
phoneNumber,
|
||||
profileName,
|
||||
title,
|
||||
} = callDetails;
|
||||
}: {
|
||||
avatarPath?: string;
|
||||
color?: ColorType;
|
||||
title: string;
|
||||
name?: string;
|
||||
phoneNumber?: string;
|
||||
profileName?: string;
|
||||
}
|
||||
): JSX.Element {
|
||||
return (
|
||||
<div className="module-ongoing-call__remote-video-disabled">
|
||||
<Avatar
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue