Dynamic audio level indicator
This commit is contained in:
parent
ac59dec5aa
commit
e6223b6a11
24 changed files with 323 additions and 123 deletions
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue