Redux state: Allow multiple calls to be stored

This commit is contained in:
Evan Hahn 2020-11-06 11:36:37 -06:00 committed by GitHub
parent 753e0279c6
commit 3468de255d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
21 changed files with 1191 additions and 515 deletions

View file

@ -3,7 +3,6 @@
import React from 'react';
import {
CallDetailsType,
SetLocalAudioType,
SetLocalPreviewType,
SetLocalVideoType,
@ -15,10 +14,15 @@ import {
} from './CallingButton';
import { CallBackgroundBlur } from './CallBackgroundBlur';
import { LocalizerType } from '../types/Util';
import { ColorType } from '../types/Colors';
export type PropsType = {
availableCameras: Array<MediaDeviceInfo>;
callDetails: CallDetailsType;
conversation: {
avatarPath?: string;
color?: ColorType;
title: string;
};
hasLocalAudio: boolean;
hasLocalVideo: boolean;
i18n: LocalizerType;
@ -34,7 +38,7 @@ export type PropsType = {
export const CallingLobby = ({
availableCameras,
callDetails,
conversation,
hasLocalAudio,
hasLocalVideo,
i18n,
@ -50,20 +54,12 @@ export const CallingLobby = ({
const localVideoRef = React.useRef(null);
const toggleAudio = React.useCallback((): void => {
if (!callDetails) {
return;
}
setLocalAudio({ enabled: !hasLocalAudio });
}, [callDetails, hasLocalAudio, setLocalAudio]);
}, [hasLocalAudio, setLocalAudio]);
const toggleVideo = React.useCallback((): void => {
if (!callDetails) {
return;
}
setLocalVideo({ enabled: !hasLocalVideo });
}, [callDetails, hasLocalVideo, setLocalVideo]);
}, [hasLocalVideo, setLocalVideo]);
React.useEffect(() => {
setLocalPreview({ element: localVideoRef });
@ -112,7 +108,7 @@ export const CallingLobby = ({
<div className="module-calling__container">
<div className="module-calling__header">
<div className="module-calling__header--header-name">
{callDetails.title}
{conversation.title}
</div>
<div className="module-calling-tools">
{isGroupCall ? (
@ -136,8 +132,8 @@ export const CallingLobby = ({
<video ref={localVideoRef} autoPlay />
) : (
<CallBackgroundBlur
avatarPath={callDetails.avatarPath}
color={callDetails.color}
avatarPath={conversation.avatarPath}
color={conversation.color}
>
<div className="module-calling-lobby__video-off--icon" />
<span className="module-calling-lobby__video-off--text">