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

Show local speaking indicator for group calls

Browse source
This commit is contained in:
Evan Hahn 2022-02-25 09:24:05 -06:00 • committed by GitHub
parent dbb732e7cf
commit 41b4cce6ec
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
14 changed files with 87 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
stylesheets/_modules.scss
View file

@ -4291,17 +4291,10 @@ button.module-image__border-overlay:focus {
}
}
&--audio-muted::before {
@include color-svg(
'../images/icons/v2/mic-off-solid-28.svg',
$color-white
);
.CallingAudioIndicator {
bottom: 6px;
content: '';
height: 14px;
position: absolute;
right: 6px;
width: 14px;
z-index: $z-index-base;
}
}

5
ts/calling/constants.ts
View file

@ -1,6 +1,9 @@
// Copyright 2020-2021 Signal Messenger, LLC
// Copyright 2020-2022 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
export const AUDIO_LEVEL_INTERVAL_MS = 250;
export const AUDIO_LEVEL_FOR_SPEAKING = 0.25;
export const REQUESTED_VIDEO_WIDTH = 640;
export const REQUESTED_VIDEO_HEIGHT = 480;
export const REQUESTED_VIDEO_FRAMERATE = 30;

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

@ -50,6 +50,7 @@ const getCommonActiveCallData = () => ({
joinedAt: Date.now(),
hasLocalAudio: boolean('hasLocalAudio', true),
hasLocalVideo: boolean('hasLocalVideo', false),
amISpeaking: boolean('amISpeaking', false),
isInSpeakerView: boolean('isInSpeakerView', false),
outgoingRing: boolean('outgoingRing', true),
pip: boolean('pip', false),

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

@ -44,6 +44,7 @@ const conversation = getDefaultConversation({
type OverridePropsBase = {
hasLocalAudio?: boolean;
hasLocalVideo?: boolean;
amISpeaking?: boolean;
isInSpeakerView?: boolean;
};
@ -120,6 +121,7 @@ const createActiveCallProp = (
'hasLocalVideo',
overrideProps.hasLocalVideo || false
),
amISpeaking: boolean('amISpeaking', overrideProps.amISpeaking || false),
isInSpeakerView: boolean(
'isInSpeakerView',
overrideProps.isInSpeakerView || false

13
ts/components/CallScreen.tsx
View file

@ -38,6 +38,7 @@ import { NeedsScreenRecordingPermissionsModal } from './NeedsScreenRecordingPerm
import { missingCaseError } from '../util/missingCaseError';
import * as KeyboardLayout from '../services/keyboardLayout';
import { useActivateSpeakerViewOnPresenting } from '../hooks/useActivateSpeakerViewOnPresenting';
import { CallingAudioIndicator } from './CallingAudioIndicator';
export type PropsType = {
activeCall: ActiveCallType;
@ -125,6 +126,7 @@ export const CallScreen: React.FC<PropsType> = ({
conversation,
hasLocalAudio,
hasLocalVideo,
amISpeaking,
isInSpeakerView,
presentingSource,
remoteParticipants,
@ -501,13 +503,12 @@ export const CallScreen: React.FC<PropsType> = ({
onClick={hangUpActiveCall}
/>
</div>
<div
className={classNames('module-ongoing-call__footer__local-preview', {
'module-ongoing-call__footer__local-preview--audio-muted':
!hasLocalAudio,
})}
>
<div className="module-ongoing-call__footer__local-preview">
{localPreviewNode}
<CallingAudioIndicator
hasAudio={hasLocalAudio}
isSpeaking={amISpeaking}
/>
</div>
</div>
</div>

32
ts/components/CallingAudioIndicator.tsx
View file

@ -1,25 +1,41 @@
// Copyright 2022 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
import { noop } from 'lodash';
import type { ReactElement } from 'react';
import React from 'react';
import React, { useEffect, useState } from 'react';
import animationData from '../../images/lottie-animations/CallingSpeakingIndicator.json';
import { Lottie } from './Lottie';
const SPEAKING_LINGER_MS = 100;
export function CallingAudioIndicator({
hasRemoteAudio,
hasAudio,
isSpeaking,
}: Readonly<{
hasRemoteAudio: boolean;
isSpeaking: boolean;
}>): ReactElement {
if (!hasRemoteAudio) {
}: Readonly<{ hasAudio: boolean; isSpeaking: boolean }>): ReactElement {
const [shouldShowSpeaking, setShouldShowSpeaking] = useState(isSpeaking);
useEffect(() => {
if (isSpeaking) {
setShouldShowSpeaking(true);
} else if (shouldShowSpeaking) {
const timeout = setTimeout(() => {
setShouldShowSpeaking(false);
}, SPEAKING_LINGER_MS);
return () => {
clearTimeout(timeout);
};
}
return noop;
}, [isSpeaking, shouldShowSpeaking]);
if (!hasAudio) {
return (
<div className="CallingAudioIndicator CallingAudioIndicator--muted" />
);
}
if (isSpeaking) {
if (shouldShowSpeaking) {
return (
<Lottie animationData={animationData} className="CallingAudioIndicator" />
);

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

@ -39,6 +39,7 @@ const getCommonActiveCallData = () => ({
conversation,
hasLocalAudio: boolean('hasLocalAudio', true),
hasLocalVideo: boolean('hasLocalVideo', false),
amISpeaking: boolean('amISpeaking', false),
isInSpeakerView: boolean('isInSpeakerView', false),
joinedAt: Date.now(),
outgoingRing: true,

2
ts/components/GroupCallRemoteParticipant.tsx
View file

@ -285,7 +285,7 @@ export const GroupCallRemoteParticipant: React.FC<PropsType> = React.memo(
title={title}
/>
<CallingAudioIndicator
hasRemoteAudio={hasRemoteAudio}
hasAudio={hasRemoteAudio}
isSpeaking={props.isSpeaking}
/>
</div>

7
ts/services/calling.ts
View file

@ -82,6 +82,7 @@ import type { ProcessedEnvelope } from '../textsecure/Types.d';
import { missingCaseError } from '../util/missingCaseError';
import { normalizeGroupCallTimestamp } from '../util/ringrtc/normalizeGroupCallTimestamp';
import {
AUDIO_LEVEL_INTERVAL_MS,
REQUESTED_VIDEO_WIDTH,
REQUESTED_VIDEO_HEIGHT,
REQUESTED_VIDEO_FRAMERATE,
@ -624,7 +625,7 @@ export class CallingClass {
groupIdBuffer,
this.sfuUrl,
Buffer.alloc(0),
500,
AUDIO_LEVEL_INTERVAL_MS,
{
onLocalDeviceStateChanged: groupCall => {
const localDeviceState = groupCall.getLocalDeviceState();
@ -677,9 +678,11 @@ export class CallingClass {
if (!remoteDeviceStates) {
return;
}
const localAudioLevel = groupCall.getLocalDeviceState().audioLevel;
this.uxActions?.groupCallAudioLevelsChange({
conversationId,
localAudioLevel,
remoteDeviceStates,
});
},
@ -1971,7 +1974,7 @@ export class CallingClass {
hideIp: shouldRelayCalls || isContactUnknown,
bandwidthMode: BandwidthMode.Normal,
// TODO: DESKTOP-3101
// audioLevelsIntervalMillis: 500,
// audioLevelsIntervalMillis: AUDIO_LEVEL_INTERVAL_MS,
};
}

26
ts/state/ducks/calling.ts
View file

@ -15,6 +15,7 @@ import { getPlatform } from '../selectors/user';
import { isConversationTooBigToRing } from '../../conversations/isConversationTooBigToRing';
import { missingCaseError } from '../../util/missingCaseError';
import { calling } from '../../services/calling';
import { AUDIO_LEVEL_FOR_SPEAKING } from '../../calling/constants';
import type { StateType as RootStateType } from '../reducer';
import type {
ChangeIODevicePayloadType,
@ -102,6 +103,7 @@ export type ActiveCallStateType = {
conversationId: string;
hasLocalAudio: boolean;
hasLocalVideo: boolean;
amISpeaking: boolean;
isInSpeakerView: boolean;
joinedAt?: number;
outgoingRing: boolean;
@ -463,6 +465,7 @@ type DeclineCallActionType = {
type GroupCallAudioLevelsChangeActionPayloadType = Readonly<{
conversationId: string;
localAudioLevel: number;
remoteDeviceStates: ReadonlyArray<{ audioLevel: number; demuxId: number }>;
}>;
@ -1431,6 +1434,7 @@ export function reducer(
conversationId: action.payload.conversationId,
hasLocalAudio: action.payload.hasLocalAudio,
hasLocalVideo: action.payload.hasLocalVideo,
amISpeaking: false,
isInSpeakerView: false,
pip: false,
safetyNumberChangedUuids: [],
@ -1458,6 +1462,7 @@ export function reducer(
conversationId: action.payload.conversationId,
hasLocalAudio: action.payload.hasLocalAudio,
hasLocalVideo: action.payload.hasLocalVideo,
amISpeaking: false,
isInSpeakerView: false,
pip: false,
safetyNumberChangedUuids: [],
@ -1480,6 +1485,7 @@ export function reducer(
conversationId: action.payload.conversationId,
hasLocalAudio: true,
hasLocalVideo: action.payload.asVideoCall,
amISpeaking: false,
isInSpeakerView: false,
pip: false,
safetyNumberChangedUuids: [],
@ -1633,6 +1639,7 @@ export function reducer(
conversationId: action.payload.conversationId,
hasLocalAudio: action.payload.hasLocalAudio,
hasLocalVideo: action.payload.hasLocalVideo,
amISpeaking: false,
isInSpeakerView: false,
pip: false,
safetyNumberChangedUuids: [],
@ -1690,24 +1697,36 @@ export function reducer(
}
if (action.type === GROUP_CALL_AUDIO_LEVELS_CHANGE) {
const { conversationId, remoteDeviceStates } = action.payload;
const { conversationId, localAudioLevel, remoteDeviceStates } =
action.payload;
const { activeCallState } = state;
const existingCall = getGroupCall(conversationId, state);
if (!existingCall) {
// The PiP check is an optimization. We don't need to update audio levels if the user
// cannot see them.
if (!activeCallState || activeCallState.pip || !existingCall) {
return state;
}
const amISpeaking = localAudioLevel > AUDIO_LEVEL_FOR_SPEAKING;
const speakingDemuxIds = new Set<number>();
remoteDeviceStates.forEach(({ audioLevel, demuxId }) => {
// We expect `audioLevel` to be a number but have this check just in case.
if (typeof audioLevel === 'number' && audioLevel > 0.25) {
if (
typeof audioLevel === 'number' &&
audioLevel > AUDIO_LEVEL_FOR_SPEAKING
) {
speakingDemuxIds.add(demuxId);
}
});
// This action is dispatched frequently. This equality check helps avoid re-renders.
const oldAmISpeaking = activeCallState.amISpeaking;
const oldSpeakingDemuxIds = existingCall.speakingDemuxIds;
if (
oldAmISpeaking === amISpeaking &&
oldSpeakingDemuxIds &&
setUtil.isEqual(oldSpeakingDemuxIds, speakingDemuxIds)
) {
@ -1716,6 +1735,7 @@ export function reducer(
return {
...state,
activeCallState: { ...activeCallState, amISpeaking },
callsByConversation: {
...callsByConversation,
[conversationId]: { ...existingCall, speakingDemuxIds },

1
ts/state/smart/CallManager.tsx
View file

@ -130,6 +130,7 @@ const mapStateToActiveCallProp = (
conversation,
hasLocalAudio: activeCallState.hasLocalAudio,
hasLocalVideo: activeCallState.hasLocalVideo,
amISpeaking: activeCallState.amISpeaking,
isInSpeakerView: activeCallState.isInSpeakerView,
joinedAt: activeCallState.joinedAt,
outgoingRing: activeCallState.outgoingRing,

14
ts/test-electron/state/ducks/calling_test.ts
View file

@ -50,6 +50,7 @@ describe('calling duck', () => {
conversationId: 'fake-direct-call-conversation-id',
hasLocalAudio: true,
hasLocalVideo: false,
amISpeaking: false,
isInSpeakerView: false,
showParticipantsList: false,
safetyNumberChangedUuids: [],
@ -128,6 +129,7 @@ describe('calling duck', () => {
conversationId: 'fake-group-call-conversation-id',
hasLocalAudio: true,
hasLocalVideo: false,
amISpeaking: false,
isInSpeakerView: false,
showParticipantsList: false,
safetyNumberChangedUuids: [],
@ -433,6 +435,7 @@ describe('calling duck', () => {
conversationId: 'fake-direct-call-conversation-id',
hasLocalAudio: true,
hasLocalVideo: true,
amISpeaking: false,
isInSpeakerView: false,
showParticipantsList: false,
safetyNumberChangedUuids: [],
@ -525,6 +528,7 @@ describe('calling duck', () => {
conversationId: 'fake-group-call-conversation-id',
hasLocalAudio: true,
hasLocalVideo: true,
amISpeaking: false,
isInSpeakerView: false,
showParticipantsList: false,
safetyNumberChangedUuids: [],
@ -762,6 +766,7 @@ describe('calling duck', () => {
it("does nothing if there's no relevant call", () => {
const action = groupCallAudioLevelsChange({
conversationId: 'garbage',
localAudioLevel: 1,
remoteDeviceStates,
});
@ -784,6 +789,7 @@ describe('calling duck', () => {
};
const action = groupCallAudioLevelsChange({
conversationId: 'fake-group-call-conversation-id',
localAudioLevel: 0.1,
remoteDeviceStates,
});
@ -792,13 +798,16 @@ describe('calling duck', () => {
assert.strictEqual(result, state);
});
it('updates the set of speaking participants', () => {
it('updates the set of speaking participants, including yourself', () => {
const action = groupCallAudioLevelsChange({
conversationId: 'fake-group-call-conversation-id',
localAudioLevel: 0.8,
remoteDeviceStates,
});
const result = reducer(stateWithActiveGroupCall, action);
assert.isTrue(result.activeCallState?.amISpeaking);
const call =
result.callsByConversation['fake-group-call-conversation-id'];
if (call?.callMode !== CallMode.Group) {
@ -1100,6 +1109,7 @@ describe('calling duck', () => {
conversationId: 'fake-group-call-conversation-id',
hasLocalAudio: true,
hasLocalVideo: false,
amISpeaking: false,
isInSpeakerView: false,
showParticipantsList: false,
safetyNumberChangedUuids: [],
@ -1628,6 +1638,7 @@ describe('calling duck', () => {
conversationId: 'fake-conversation-id',
hasLocalAudio: true,
hasLocalVideo: true,
amISpeaking: false,
isInSpeakerView: false,
showParticipantsList: false,
safetyNumberChangedUuids: [],
@ -1913,6 +1924,7 @@ describe('calling duck', () => {
conversationId: 'fake-conversation-id',
hasLocalAudio: true,
hasLocalVideo: false,
amISpeaking: false,
isInSpeakerView: false,
showParticipantsList: false,
safetyNumberChangedUuids: [],

3
ts/test-electron/state/selectors/calling_test.ts
View file

@ -1,4 +1,4 @@
// Copyright 2019-2021 Signal Messenger, LLC
// Copyright 2019-2022 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
import { assert } from 'chai';
@ -51,6 +51,7 @@ describe('state/selectors/calling', () => {
conversationId: 'fake-direct-call-conversation-id',
hasLocalAudio: true,
hasLocalVideo: false,
amISpeaking: false,
isInSpeakerView: false,
showParticipantsList: false,
safetyNumberChangedUuids: [],

3
ts/types/Calling.ts
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 { AudioDevice } from 'ringrtc';
@ -28,6 +28,7 @@ type ActiveCallBaseType = {
conversation: ConversationType;
hasLocalAudio: boolean;
hasLocalVideo: boolean;
amISpeaking: boolean;
isInSpeakerView: boolean;
isSharingScreen?: boolean;
joinedAt?: number;