Group calling enhancements

This commit is contained in:
Josh Perez 2020-11-17 10:07:53 -05:00 committed by Josh Perez
parent 72e4ec95ce
commit 1f0c091e13
27 changed files with 1038 additions and 451 deletions

View file

@ -0,0 +1,105 @@
// Copyright 2020 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
import React from 'react';
import { Avatar } from './Avatar';
import { CallBackgroundBlur } from './CallBackgroundBlur';
import { DirectCallRemoteParticipant } from './DirectCallRemoteParticipant';
import { GroupCallRemoteParticipant } from './GroupCallRemoteParticipant';
import { LocalizerType } from '../types/Util';
import { ConversationType } from '../state/ducks/conversations';
import {
CallMode,
CanvasVideoRenderer,
VideoFrameSource,
} from '../types/Calling';
import {
DirectCallStateType,
GroupCallStateType,
SetRendererCanvasType,
} from '../state/ducks/calling';
export interface PropsType {
call: DirectCallStateType | GroupCallStateType;
conversation: ConversationType;
createCanvasVideoRenderer: () => CanvasVideoRenderer;
getGroupCallVideoFrameSource: (demuxId: number) => VideoFrameSource;
i18n: LocalizerType;
setRendererCanvas: (_: SetRendererCanvasType) => void;
}
export const CallingPipRemoteVideo = ({
call,
conversation,
createCanvasVideoRenderer,
getGroupCallVideoFrameSource,
i18n,
setRendererCanvas,
}: PropsType): JSX.Element => {
if (call.callMode === CallMode.Direct) {
if (!call.hasRemoteVideo) {
const {
avatarPath,
color,
name,
phoneNumber,
profileName,
title,
} = conversation;
return (
<div className="module-calling-pip__video--remote">
<CallBackgroundBlur avatarPath={avatarPath} color={color}>
<div className="module-calling-pip__video--avatar">
<Avatar
avatarPath={avatarPath}
color={color || 'ultramarine'}
noteToSelf={false}
conversationType="direct"
i18n={i18n}
name={name}
phoneNumber={phoneNumber}
profileName={profileName}
title={title}
size={52}
/>
</div>
</CallBackgroundBlur>
</div>
);
}
return (
<div className="module-calling-pip__video--remote">
<DirectCallRemoteParticipant
conversation={conversation}
hasRemoteVideo={call.hasRemoteVideo}
i18n={i18n}
setRendererCanvas={setRendererCanvas}
/>
</div>
);
}
if (call.callMode === CallMode.Group) {
const speaker = call.remoteParticipants[0];
return (
<div className="module-calling-pip__video--remote">
<GroupCallRemoteParticipant
key={speaker.demuxId}
createCanvasVideoRenderer={createCanvasVideoRenderer}
demuxId={speaker.demuxId}
getGroupCallVideoFrameSource={getGroupCallVideoFrameSource}
hasRemoteVideo={speaker.hasRemoteVideo}
height="100%"
left={0}
top={0}
width="100%"
/>
</div>
);
}
throw new Error('CallingRemoteVideo: Unknown Call Mode');
};