Show active speaker in group calling PiP

This commit is contained in:
Evan Hahn 2020-12-01 17:52:09 -06:00 committed by GitHub
parent b3c161f484
commit f3f2cb2b5e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
9 changed files with 144 additions and 13 deletions

View file

@ -1,13 +1,18 @@
// Copyright 2020 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
import React from 'react';
import React, { useMemo } from 'react';
import { maxBy } from 'lodash';
import { Avatar } from './Avatar';
import { CallBackgroundBlur } from './CallBackgroundBlur';
import { DirectCallRemoteParticipant } from './DirectCallRemoteParticipant';
import { GroupCallRemoteParticipant } from './GroupCallRemoteParticipant';
import { LocalizerType } from '../types/Util';
import { CallMode, VideoFrameSource } from '../types/Calling';
import {
CallMode,
GroupCallRemoteParticipantType,
VideoFrameSource,
} from '../types/Calling';
import { ActiveCallType, SetRendererCanvasType } from '../state/ducks/calling';
const NoVideo = ({
@ -61,7 +66,20 @@ export const CallingPipRemoteVideo = ({
i18n,
setRendererCanvas,
}: PropsType): JSX.Element => {
const { call, conversation } = activeCall;
const { call, conversation, groupCallParticipants } = activeCall;
const activeGroupCallSpeaker:
| undefined
| GroupCallRemoteParticipantType = useMemo(() => {
if (call.callMode !== CallMode.Group) {
return undefined;
}
return maxBy(
groupCallParticipants,
participant => participant.speakerTime || -Infinity
);
}, [call.callMode, groupCallParticipants]);
if (call.callMode === CallMode.Direct) {
if (!call.hasRemoteVideo) {
@ -81,10 +99,7 @@ export const CallingPipRemoteVideo = ({
}
if (call.callMode === CallMode.Group) {
const { groupCallParticipants } = activeCall;
const speaker = groupCallParticipants[0];
if (!speaker) {
if (!activeGroupCallSpeaker) {
return <NoVideo activeCall={activeCall} i18n={i18n} />;
}
@ -94,8 +109,7 @@ export const CallingPipRemoteVideo = ({
getGroupCallVideoFrameSource={getGroupCallVideoFrameSource}
i18n={i18n}
isInPip
key={speaker.demuxId}
remoteParticipant={speaker}
remoteParticipant={activeGroupCallSpeaker}
/>
</div>
);