mirrors/signal-desktop
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages 2 Wiki Activity Actions

Speaking indicator for group calls

Browse source 
Co-authored-by: Peter Thatcher <peter@signal.org>
Co-authored-by: Jim Gustafson <jim@signal.org>
Co-authored-by: Josh Perez <60019601+josh-signal@users.noreply.github.com>
This commit is contained in:
Evan Hahn 2022-02-08 12:30:33 -06:00 • committed by GitHub
parent cb5131420f
commit 5ce26eb91a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
35 changed files with 482 additions and 42 deletions
Download patch file Download diff file Expand all files Collapse all files

4
ts/components/CallManager.stories.tsx
View file

@ -1,4 +1,4 @@
// Copyright 2020-2021 Signal Messenger, LLC
// Copyright 2020-2022 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
import * as React from 'react';
@ -144,6 +144,7 @@ story.add('Ongoing Group Call', () => (
groupMembers: [],
peekedParticipants: [],
remoteParticipants: [],
speakingDemuxIds: new Set<number>(),
},
})}
/>
@ -218,6 +219,7 @@ story.add('Group call - Safety Number Changed', () => (
groupMembers: [],
peekedParticipants: [],
remoteParticipants: [],
speakingDemuxIds: new Set<number>(),
},
})}
/>

2
ts/components/CallManager.tsx
View file

@ -1,4 +1,4 @@
// Copyright 2020-2021 Signal Messenger, LLC
// Copyright 2020-2022 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
import React, { useCallback, useEffect } from 'react';

3
ts/components/CallScreen.stories.tsx
View file

@ -1,4 +1,4 @@
// Copyright 2020-2021 Signal Messenger, LLC
// Copyright 2020-2022 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
import * as React from 'react';
@ -103,6 +103,7 @@ const createActiveGroupCallProp = (overrideProps: GroupCallOverrideProps) => ({
peekedParticipants:
overrideProps.peekedParticipants || overrideProps.remoteParticipants || [],
remoteParticipants: overrideProps.remoteParticipants || [],
speakingDemuxIds: new Set<number>(),
});
const createActiveCallProp = (

3
ts/components/CallScreen.tsx
View file

@ -1,4 +1,4 @@
// Copyright 2020-2021 Signal Messenger, LLC
// Copyright 2020-2022 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
import type { ReactNode } from 'react';
@ -299,6 +299,7 @@ export const CallScreen: React.FC<PropsType> = ({
isInSpeakerView={isInSpeakerView}
remoteParticipants={activeCall.remoteParticipants}
setGroupCallVideoRequest={setGroupCallVideoRequest}
speakingDemuxIds={activeCall.speakingDemuxIds}
/>
);
break;

30
ts/components/CallingAudioIndicator.tsx Normal file
View file

@ -0,0 +1,30 @@
// Copyright 2022 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
import type { ReactElement } from 'react';
import React from 'react';
import animationData from '../../images/lottie-animations/CallingSpeakingIndicator.json';
import { Lottie } from './Lottie';
export function CallingAudioIndicator({
hasRemoteAudio,
isSpeaking,
}: Readonly<{
hasRemoteAudio: boolean;
isSpeaking: boolean;
}>): ReactElement {
if (!hasRemoteAudio) {
return (
<div className="CallingAudioIndicator CallingAudioIndicator--muted" />
);
}
if (isSpeaking) {
return (
<Lottie animationData={animationData} className="CallingAudioIndicator" />
);
}
// Render an empty spacer so that names don't move around.
return <div className="CallingAudioIndicator" />;
}

3
ts/components/CallingPip.stories.tsx
View file

@ -1,4 +1,4 @@
// Copyright 2020-2021 Signal Messenger, LLC
// Copyright 2020-2022 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
import * as React from 'react';
@ -119,6 +119,7 @@ story.add('Group Call', () => {
deviceCount: 0,
peekedParticipants: [],
remoteParticipants: [],
speakingDemuxIds: new Set<number>(),
},
});
return <CallingPip {...props} />;

2
ts/components/CallingPip.tsx
View file

@ -1,4 +1,4 @@
// Copyright 2020-2021 Signal Messenger, LLC
// Copyright 2020-2022 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
import React from 'react';

2
ts/components/CallingPipRemoteVideo.tsx
View file

@ -1,4 +1,4 @@
// Copyright 2020-2021 Signal Messenger, LLC
// Copyright 2020-2022 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
import React, { useMemo, useEffect } from 'react';

3
ts/components/GroupCallOverflowArea.stories.tsx
View file

@ -1,4 +1,4 @@
// Copyright 2021 Signal Messenger, LLC
// Copyright 2021-2022 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
import type { FC } from 'react';
@ -39,6 +39,7 @@ const defaultProps = {
getGroupCallVideoFrameSource: fakeGetGroupCallVideoFrameSource,
i18n,
onParticipantVisibilityChanged: action('onParticipantVisibilityChanged'),
speakingDemuxIds: new Set<number>(),
};
// This component is usually rendered on a call screen.

5
ts/components/GroupCallOverflowArea.tsx
View file

@ -1,4 +1,4 @@
// Copyright 2021 Signal Messenger, LLC
// Copyright 2021-2022 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
import type { FC, ReactElement } from 'react';
@ -24,6 +24,7 @@ type PropsType = {
isVisible: boolean
) => unknown;
overflowedParticipants: ReadonlyArray<GroupCallRemoteParticipantType>;
speakingDemuxIds: Set<number>;
};
export const GroupCallOverflowArea: FC<PropsType> = ({
@ -32,6 +33,7 @@ export const GroupCallOverflowArea: FC<PropsType> = ({
i18n,
onParticipantVisibilityChanged,
overflowedParticipants,
speakingDemuxIds,
}) => {
const overflowRef = useRef<HTMLDivElement | null>(null);
const [overflowScrollTop, setOverflowScrollTop] = useState(0);
@ -114,6 +116,7 @@ export const GroupCallOverflowArea: FC<PropsType> = ({
getFrameBuffer={getFrameBuffer}
getGroupCallVideoFrameSource={getGroupCallVideoFrameSource}
i18n={i18n}
isSpeaking={speakingDemuxIds.has(remoteParticipant.demuxId)}
onVisibilityChanged={onParticipantVisibilityChanged}
width={OVERFLOW_PARTICIPANT_WIDTH}
height={Math.floor(

4
ts/components/GroupCallRemoteParticipant.stories.tsx
View file

@ -1,4 +1,4 @@
// Copyright 2020-2021 Signal Messenger, LLC
// Copyright 2020-2022 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
import * as React from 'react';
@ -36,6 +36,7 @@ const createProps = (
// eslint-disable-next-line @typescript-eslint/no-explicit-any
getGroupCallVideoFrameSource: noop as any,
i18n,
isSpeaking: false,
remoteParticipant: {
demuxId: 123,
hasRemoteAudio: false,
@ -51,6 +52,7 @@ const createProps = (
}),
},
...overrideProps,
...(overrideProps.isInPip ? {} : { isSpeaking: false }),
});
const story = storiesOf('Components/GroupCallRemoteParticipant', module);

8
ts/components/GroupCallRemoteParticipant.tsx
View file

@ -1,4 +1,4 @@
// Copyright 2020-2021 Signal Messenger, LLC
// Copyright 2020-2022 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
import type { CSSProperties } from 'react';
@ -16,6 +16,7 @@ import type { GroupCallRemoteParticipantType } from '../types/Calling';
import type { LocalizerType } from '../types/Util';
import { AvatarColors } from '../types/Colors';
import { CallBackgroundBlur } from './CallBackgroundBlur';
import { CallingAudioIndicator } from './CallingAudioIndicator';
import { Avatar, AvatarSize } from './Avatar';
import { ConfirmationDialog } from './ConfirmationDialog';
import { Intl } from './Intl';
@ -41,6 +42,7 @@ type InPipPropsType = {
type InOverflowAreaPropsType = {
height: number;
isInPip?: false;
isSpeaking: boolean;
width: number;
};
@ -282,6 +284,10 @@ export const GroupCallRemoteParticipant: React.FC<PropsType> = React.memo(
module="module-ongoing-call__group-call-remote-participant__info__contact-name"
title={title}
/>
<CallingAudioIndicator
hasRemoteAudio={hasRemoteAudio}
isSpeaking={props.isSpeaking}
/>
</div>
)}
{wantsToShowVideo && (

14
ts/components/GroupCallRemoteParticipants.tsx
View file

@ -1,4 +1,4 @@
// Copyright 2020-2021 Signal Messenger, LLC
// Copyright 2020-2022 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
import React, { useCallback, useState, useMemo, useEffect } from 'react';
@ -48,6 +48,7 @@ type PropsType = {
isInSpeakerView: boolean;
remoteParticipants: ReadonlyArray<GroupCallRemoteParticipantType>;
setGroupCallVideoRequest: (_: Array<GroupCallVideoRequest>) => void;
speakingDemuxIds: Set<number>;
};
enum VideoRequestMode {
@ -85,6 +86,7 @@ export const GroupCallRemoteParticipants: React.FC<PropsType> = ({
isInSpeakerView,
remoteParticipants,
setGroupCallVideoRequest,
speakingDemuxIds,
}) => {
const [containerDimensions, setContainerDimensions] = useState<Dimensions>({
width: 0,
@ -266,8 +268,12 @@ export const GroupCallRemoteParticipants: React.FC<PropsType> = ({
let rowWidthSoFar = 0;
return remoteParticipantsInRow.map(remoteParticipant => {
const { demuxId, videoAspectRatio } = remoteParticipant;
const isSpeaking = speakingDemuxIds.has(demuxId);
const renderedWidth = Math.floor(
remoteParticipant.videoAspectRatio * gridParticipantHeight
videoAspectRatio * gridParticipantHeight
);
const left = rowWidthSoFar + leftOffset;
@ -275,11 +281,12 @@ export const GroupCallRemoteParticipants: React.FC<PropsType> = ({
return (
<GroupCallRemoteParticipant
key={remoteParticipant.demuxId}
key={demuxId}
getFrameBuffer={getFrameBuffer}
getGroupCallVideoFrameSource={getGroupCallVideoFrameSource}
height={gridParticipantHeight}
i18n={i18n}
isSpeaking={isSpeaking}
left={left}
remoteParticipant={remoteParticipant}
top={top}
@ -411,6 +418,7 @@ export const GroupCallRemoteParticipants: React.FC<PropsType> = ({
i18n={i18n}
onParticipantVisibilityChanged={onParticipantVisibilityChanged}
overflowedParticipants={overflowedParticipants}
speakingDemuxIds={speakingDemuxIds}
/>
</div>
)}

21
ts/components/Lottie.stories.tsx Normal file
View file

@ -0,0 +1,21 @@
// Copyright 2022 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
import React from 'react';
import { storiesOf } from '@storybook/react';
import { Lottie } from './Lottie';
import testAnimationData from '../../fixtures/lottie-loader-by-lucas-bariani.json';
const STORYBOOK_CONTAINER_CLASS_NAME = 'lottie-test-storybook-container';
const story = storiesOf('Components/Lottie', module);
story.add('Default', () => (
<Lottie
animationData={testAnimationData}
className={STORYBOOK_CONTAINER_CLASS_NAME}
style={{ width: 300, height: 300 }}
/>
));

42
ts/components/Lottie.tsx Normal file
View file

@ -0,0 +1,42 @@
// Copyright 2022 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
import type { CSSProperties, ReactElement } from 'react';
import React, { useEffect, useRef } from 'react';
import lottie from '@evanhahn/lottie-web-light';
import { lottieNoopAudioFactory } from '../util/lottieNoopAudioFactory';
export function Lottie({
animationData,
className,
style,
}: Readonly<{
animationData: unknown;
className?: string;
style?: CSSProperties;
}>): ReactElement {
const containerRef = useRef<null | HTMLDivElement>(null);
useEffect(() => {
const container = containerRef.current;
if (!container) {
return;
}
const animationItem = lottie.loadAnimation({
container,
renderer: 'svg',
loop: true,
autoplay: true,
animationData,
audioFactory: lottieNoopAudioFactory,
});
return () => {
animationItem.destroy();
};
}, [animationData]);
return <div className={className} ref={containerRef} style={style} />;
}