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

Dynamic audio level indicator

Browse source
This commit is contained in:
Fedor Indutny 2022-05-18 20:28:51 -07:00 • committed by GitHub
parent ac59dec5aa
commit e6223b6a11
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
24 changed files with 323 additions and 123 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -50,7 +50,7 @@ const getCommonActiveCallData = () => ({
joinedAt: Date.now(),
hasLocalAudio: boolean('hasLocalAudio', true),
hasLocalVideo: boolean('hasLocalVideo', false),
amISpeaking: boolean('amISpeaking', false),
localAudioLevel: select('localAudioLevel', [0, 0.5, 1], 0),
isInSpeakerView: boolean('isInSpeakerView', false),
outgoingRing: boolean('outgoingRing', true),
pip: boolean('pip', false),
@ -145,7 +145,7 @@ story.add('Ongoing Group Call', () => (
groupMembers: [],
peekedParticipants: [],
remoteParticipants: [],
speakingDemuxIds: new Set<number>(),
remoteAudioLevels: new Map<number, number>(),
},
})}
/>
@ -220,7 +220,7 @@ story.add('Group call - Safety Number Changed', () => (
groupMembers: [],
peekedParticipants: [],
remoteParticipants: [],
speakingDemuxIds: new Set<number>(),
remoteAudioLevels: new Map<number, number>(),
},
})}
/>

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

@ -44,7 +44,7 @@ const conversation = getDefaultConversation({
type OverridePropsBase = {
hasLocalAudio?: boolean;
hasLocalVideo?: boolean;
amISpeaking?: boolean;
localAudioLevel?: number;
isInSpeakerView?: boolean;
};
@ -104,7 +104,7 @@ const createActiveGroupCallProp = (overrideProps: GroupCallOverrideProps) => ({
peekedParticipants:
overrideProps.peekedParticipants || overrideProps.remoteParticipants || [],
remoteParticipants: overrideProps.remoteParticipants || [],
speakingDemuxIds: new Set<number>(),
remoteAudioLevels: new Map<number, number>(),
});
const createActiveCallProp = (
@ -121,7 +121,11 @@ const createActiveCallProp = (
'hasLocalVideo',
overrideProps.hasLocalVideo || false
),
amISpeaking: boolean('amISpeaking', overrideProps.amISpeaking || false),
localAudioLevel: select(
'localAudioLevel',
[0, 0.5, 1],
overrideProps.localAudioLevel || 0
),
isInSpeakerView: boolean(
'isInSpeakerView',
overrideProps.isInSpeakerView || false

6
ts/components/CallScreen.tsx
View file

@ -130,7 +130,7 @@ export const CallScreen: React.FC<PropsType> = ({
conversation,
hasLocalAudio,
hasLocalVideo,
amISpeaking,
localAudioLevel,
isInSpeakerView,
presentingSource,
remoteParticipants,
@ -296,7 +296,7 @@ export const CallScreen: React.FC<PropsType> = ({
isInSpeakerView={isInSpeakerView}
remoteParticipants={activeCall.remoteParticipants}
setGroupCallVideoRequest={setGroupCallVideoRequest}
speakingDemuxIds={activeCall.speakingDemuxIds}
remoteAudioLevels={activeCall.remoteAudioLevels}
/>
);
break;
@ -514,7 +514,7 @@ export const CallScreen: React.FC<PropsType> = ({
{localPreviewNode}
<CallingAudioIndicator
hasAudio={hasLocalAudio}
isSpeaking={amISpeaking}
audioLevel={localAudioLevel}
/>
</div>
</div>

17
ts/components/CallingAudioIndicator.stories.tsx Normal file
View file

@ -0,0 +1,17 @@
// Copyright 2022 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
import React from 'react';
import { storiesOf } from '@storybook/react';
import { boolean, select } from '@storybook/addon-knobs';
import { CallingAudioIndicator } from './CallingAudioIndicator';
const story = storiesOf('Components/CallingAudioIndicator', module);
story.add('Default', () => (
<CallingAudioIndicator
hasAudio={boolean('hasAudio', true)}
audioLevel={select('audioLevel', [0, 0.25, 0.5, 0.75, 1], 0.5)}
/>
));

117
ts/components/CallingAudioIndicator.tsx
View file

@ -4,23 +4,112 @@
import classNames from 'classnames';
import { noop } from 'lodash';
import type { ReactElement } from 'react';
import React, { useEffect, useState } from 'react';
import animationData from '../../images/lottie-animations/CallingSpeakingIndicator.json';
import { Lottie } from './Lottie';
import React, { useEffect, useCallback, useState } from 'react';
import { useSpring, animated } from '@react-spring/web';
const SPEAKING_LINGER_MS = 100;
import { AUDIO_LEVEL_INTERVAL_MS } from '../calling/constants';
import { missingCaseError } from '../util/missingCaseError';
const SPEAKING_LINGER_MS = 500;
const BASE_CLASS_NAME = 'CallingAudioIndicator';
const CONTENT_CLASS_NAME = `${BASE_CLASS_NAME}__content`;
export function CallingAudioIndicator({
hasAudio,
isSpeaking,
}: Readonly<{ hasAudio: boolean; isSpeaking: boolean }>): ReactElement {
const [shouldShowSpeaking, setShouldShowSpeaking] = useState(isSpeaking);
const MIN_BAR_HEIGHT = 2;
const SIDE_SCALE_FACTOR = 0.75;
const MAX_CENTRAL_BAR_DELTA = 9;
/* Should match css */
const CONTENT_WIDTH = 14;
const CONTENT_HEIGHT = 14;
const BAR_WIDTH = 2;
const CONTENT_PADDING = 1;
enum BarPosition {
Left,
Center,
Right,
}
function generateBarPath(position: BarPosition, audioLevel: number): string {
let x: number;
if (position === BarPosition.Left) {
x = CONTENT_PADDING;
} else if (position === BarPosition.Center) {
x = CONTENT_WIDTH / 2 - CONTENT_PADDING;
} else if (position === BarPosition.Right) {
x = CONTENT_WIDTH - CONTENT_PADDING - BAR_WIDTH;
} else {
throw missingCaseError(position);
}
let height: number;
if (position === BarPosition.Left || position === BarPosition.Right) {
height =
MIN_BAR_HEIGHT + audioLevel * MAX_CENTRAL_BAR_DELTA * SIDE_SCALE_FACTOR;
} else if (position === BarPosition.Center) {
height = MIN_BAR_HEIGHT + audioLevel * MAX_CENTRAL_BAR_DELTA;
} else {
throw missingCaseError(position);
}
// Take the round corners off the height
height -= 2;
const y = (CONTENT_HEIGHT - height) / 2;
const top = y;
const bottom = top + height;
return (
`M ${x} ${top} ` +
`L ${x} ${bottom} ` +
`A 0.5 0.5 0 0 0 ${x + BAR_WIDTH} ${bottom} ` +
`L ${x + BAR_WIDTH} ${top} ` +
`A 0.5 0.5 0 0 0 ${x} ${top}`
);
}
function Bar({
position,
audioLevel,
}: {
position: BarPosition;
audioLevel: number;
}): ReactElement {
const animatedProps = useSpring({
from: { audioLevel: 0 },
config: { duration: AUDIO_LEVEL_INTERVAL_MS },
});
const levelToPath = useCallback(
(animatedLevel: number): string => {
return generateBarPath(position, animatedLevel);
},
[position]
);
useEffect(() => {
if (isSpeaking) {
animatedProps.audioLevel.stop();
animatedProps.audioLevel.start(audioLevel);
}, [audioLevel, animatedProps]);
return (
<animated.path
d={animatedProps.audioLevel.to(levelToPath)}
fill="#ffffff"
/>
);
}
export function CallingAudioIndicator({
hasAudio,
audioLevel,
}: Readonly<{ hasAudio: boolean; audioLevel: number }>): ReactElement {
const [shouldShowSpeaking, setShouldShowSpeaking] = useState(audioLevel > 0);
useEffect(() => {
if (audioLevel > 0) {
setShouldShowSpeaking(true);
} else if (shouldShowSpeaking) {
const timeout = setTimeout(() => {
@ -31,7 +120,7 @@ export function CallingAudioIndicator({
};
}
return noop;
}, [isSpeaking, shouldShowSpeaking]);
}, [audioLevel, shouldShowSpeaking]);
if (!hasAudio) {
return (
@ -59,7 +148,11 @@ export function CallingAudioIndicator({
`${BASE_CLASS_NAME}--with-content`
)}
>
<Lottie animationData={animationData} className={CONTENT_CLASS_NAME} />
<svg className={CONTENT_CLASS_NAME}>
<Bar position={BarPosition.Left} audioLevel={audioLevel} />
<Bar position={BarPosition.Center} audioLevel={audioLevel} />
<Bar position={BarPosition.Right} audioLevel={audioLevel} />
</svg>
</div>
);
}

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

@ -4,7 +4,7 @@
import * as React from 'react';
import { times } from 'lodash';
import { storiesOf } from '@storybook/react';
import { boolean } from '@storybook/addon-knobs';
import { boolean, select } from '@storybook/addon-knobs';
import { action } from '@storybook/addon-actions';
import { AvatarColors } from '../types/Colors';
@ -39,7 +39,7 @@ const getCommonActiveCallData = () => ({
conversation,
hasLocalAudio: boolean('hasLocalAudio', true),
hasLocalVideo: boolean('hasLocalVideo', false),
amISpeaking: boolean('amISpeaking', false),
localAudioLevel: select('localAudioLevel', [0, 0.5, 1], 0),
isInSpeakerView: boolean('isInSpeakerView', false),
joinedAt: Date.now(),
outgoingRing: true,
@ -120,7 +120,7 @@ story.add('Group Call', () => {
deviceCount: 0,
peekedParticipants: [],
remoteParticipants: [],
speakingDemuxIds: new Set<number>(),
remoteAudioLevels: new Map<number, number>(),
},
});
return <CallingPip {...props} />;

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

@ -39,7 +39,7 @@ const defaultProps = {
getGroupCallVideoFrameSource: fakeGetGroupCallVideoFrameSource,
i18n,
onParticipantVisibilityChanged: action('onParticipantVisibilityChanged'),
speakingDemuxIds: new Set<number>(),
remoteAudioLevels: new Map<number, number>(),
};
// This component is usually rendered on a call screen.

6
ts/components/GroupCallOverflowArea.tsx
View file

@ -24,7 +24,7 @@ type PropsType = {
isVisible: boolean
) => unknown;
overflowedParticipants: ReadonlyArray<GroupCallRemoteParticipantType>;
speakingDemuxIds: Set<number>;
remoteAudioLevels: Map<number, number>;
};
export const GroupCallOverflowArea: FC<PropsType> = ({
@ -33,7 +33,7 @@ export const GroupCallOverflowArea: FC<PropsType> = ({
i18n,
onParticipantVisibilityChanged,
overflowedParticipants,
speakingDemuxIds,
remoteAudioLevels,
}) => {
const overflowRef = useRef<HTMLDivElement | null>(null);
const [overflowScrollTop, setOverflowScrollTop] = useState(0);
@ -116,7 +116,7 @@ export const GroupCallOverflowArea: FC<PropsType> = ({
getFrameBuffer={getFrameBuffer}
getGroupCallVideoFrameSource={getGroupCallVideoFrameSource}
i18n={i18n}
isSpeaking={speakingDemuxIds.has(remoteParticipant.demuxId)}
audioLevel={remoteAudioLevels.get(remoteParticipant.demuxId) ?? 0}
onVisibilityChanged={onParticipantVisibilityChanged}
width={OVERFLOW_PARTICIPANT_WIDTH}
height={Math.floor(

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

@ -4,6 +4,7 @@
import * as React from 'react';
import { memoize, noop } from 'lodash';
import { storiesOf } from '@storybook/react';
import { select } from '@storybook/addon-knobs';
import type { PropsType } from './GroupCallRemoteParticipant';
import { GroupCallRemoteParticipant } from './GroupCallRemoteParticipant';
@ -14,7 +15,9 @@ import enMessages from '../../_locales/en/messages.json';
const i18n = setupI18n('en', enMessages);
type OverridePropsType =
type OverridePropsType = {
audioLevel?: number;
} & (
| {
isInPip: true;
}
@ -24,22 +27,29 @@ type OverridePropsType =
left: number;
top: number;
width: number;
};
}
);
const getFrameBuffer = memoize(() => Buffer.alloc(FRAME_BUFFER_SIZE));
const createProps = (
overrideProps: OverridePropsType,
isBlocked?: boolean
{
isBlocked = false,
hasRemoteAudio = false,
}: {
isBlocked?: boolean;
hasRemoteAudio?: boolean;
} = {}
): PropsType => ({
getFrameBuffer,
// eslint-disable-next-line @typescript-eslint/no-explicit-any
getGroupCallVideoFrameSource: noop as any,
i18n,
isSpeaking: false,
audioLevel: 0,
remoteParticipant: {
demuxId: 123,
hasRemoteAudio: false,
hasRemoteAudio,
hasRemoteVideo: true,
presenting: false,
sharingScreen: false,
@ -52,7 +62,6 @@ const createProps = (
}),
},
...overrideProps,
...(overrideProps.isInPip ? {} : { isSpeaking: false }),
});
const story = storiesOf('Components/GroupCallRemoteParticipant', module);
@ -69,6 +78,22 @@ story.add('Default', () => (
/>
));
story.add('Speaking', () => (
<GroupCallRemoteParticipant
{...createProps(
{
isInPip: false,
height: 120,
left: 0,
top: 0,
width: 120,
audioLevel: select('audioLevel', [0, 0.5, 1], 0.5),
},
{ hasRemoteAudio: true }
)}
/>
));
story.add('isInPip', () => (
<GroupCallRemoteParticipant
{...createProps({
@ -87,7 +112,7 @@ story.add('Blocked', () => (
top: 0,
width: 120,
},
true
{ isBlocked: true }
)}
/>
));

4
ts/components/GroupCallRemoteParticipant.tsx
View file

@ -42,7 +42,7 @@ type InPipPropsType = {
type InOverflowAreaPropsType = {
height: number;
isInPip?: false;
isSpeaking: boolean;
audioLevel: number;
width: number;
};
@ -282,7 +282,7 @@ export const GroupCallRemoteParticipant: React.FC<PropsType> = React.memo(
/>
<CallingAudioIndicator
hasAudio={hasRemoteAudio}
isSpeaking={props.isSpeaking}
audioLevel={props.audioLevel}
/>
</div>
)}

10
ts/components/GroupCallRemoteParticipants.tsx
View file

@ -48,7 +48,7 @@ type PropsType = {
isInSpeakerView: boolean;
remoteParticipants: ReadonlyArray<GroupCallRemoteParticipantType>;
setGroupCallVideoRequest: (_: Array<GroupCallVideoRequest>) => void;
speakingDemuxIds: Set<number>;
remoteAudioLevels: Map<number, number>;
};
enum VideoRequestMode {
@ -86,7 +86,7 @@ export const GroupCallRemoteParticipants: React.FC<PropsType> = ({
isInSpeakerView,
remoteParticipants,
setGroupCallVideoRequest,
speakingDemuxIds,
remoteAudioLevels,
}) => {
const [containerDimensions, setContainerDimensions] = useState<Dimensions>({
width: 0,
@ -270,7 +270,7 @@ export const GroupCallRemoteParticipants: React.FC<PropsType> = ({
return remoteParticipantsInRow.map(remoteParticipant => {
const { demuxId, videoAspectRatio } = remoteParticipant;
const isSpeaking = speakingDemuxIds.has(demuxId);
const audioLevel = remoteAudioLevels.get(demuxId) ?? 0;
const renderedWidth = Math.floor(
videoAspectRatio * gridParticipantHeight
@ -286,7 +286,7 @@ export const GroupCallRemoteParticipants: React.FC<PropsType> = ({
getGroupCallVideoFrameSource={getGroupCallVideoFrameSource}
height={gridParticipantHeight}
i18n={i18n}
isSpeaking={isSpeaking}
audioLevel={audioLevel}
left={left}
remoteParticipant={remoteParticipant}
top={top}
@ -418,7 +418,7 @@ export const GroupCallRemoteParticipants: React.FC<PropsType> = ({
i18n={i18n}
onParticipantVisibilityChanged={onParticipantVisibilityChanged}
overflowedParticipants={overflowedParticipants}
speakingDemuxIds={speakingDemuxIds}
remoteAudioLevels={remoteAudioLevels}
/>
</div>
)}