diff --git a/ts/components/CallingAudioIndicator.tsx b/ts/components/CallingAudioIndicator.tsx
index f87f8c1f5d..14f7c50999 100644
--- a/ts/components/CallingAudioIndicator.tsx
+++ b/ts/components/CallingAudioIndicator.tsx
@@ -9,50 +9,29 @@ import animationData from '../../images/lottie-animations/CallingSpeakingIndicat
import { Lottie } from './Lottie';
const SPEAKING_LINGER_MS = 100;
-const SPEAKING_BACKGROUND_LINGER_MS = 500;
const BASE_CLASS_NAME = 'CallingAudioIndicator';
const CONTENT_CLASS_NAME = `${BASE_CLASS_NAME}__content`;
-enum SpeakingState {
- None = 'None',
- Speaking = 'Speaking',
- BackgroundOnly = 'BackgroundOnly',
-}
-
export function CallingAudioIndicator({
hasAudio,
isSpeaking,
}: Readonly<{ hasAudio: boolean; isSpeaking: boolean }>): ReactElement {
- const [speakingState, setSpeakingState] = useState(
- isSpeaking ? SpeakingState.Speaking : SpeakingState.None
- );
+ const [shouldShowSpeaking, setShouldShowSpeaking] = useState(isSpeaking);
useEffect(() => {
if (isSpeaking) {
- setSpeakingState(SpeakingState.Speaking);
- return noop;
- }
-
- if (speakingState === SpeakingState.None) {
- return noop;
- }
-
- let timeout: NodeJS.Timeout;
- if (speakingState === SpeakingState.Speaking) {
- timeout = setTimeout(() => {
- setSpeakingState(SpeakingState.BackgroundOnly);
+ setShouldShowSpeaking(true);
+ } else if (shouldShowSpeaking) {
+ const timeout = setTimeout(() => {
+ setShouldShowSpeaking(false);
}, SPEAKING_LINGER_MS);
- } else if (speakingState === SpeakingState.BackgroundOnly) {
- timeout = setTimeout(() => {
- setSpeakingState(SpeakingState.None);
- }, SPEAKING_BACKGROUND_LINGER_MS);
+ return () => {
+ clearTimeout(timeout);
+ };
}
-
- return () => {
- clearTimeout(timeout);
- };
- }, [isSpeaking, speakingState]);
+ return noop;
+ }, [isSpeaking, shouldShowSpeaking]);
if (!hasAudio) {
return (
@@ -72,14 +51,7 @@ export function CallingAudioIndicator({
);
}
- if (speakingState !== SpeakingState.None) {
- let maybeAnimation: React.ReactElement | undefined;
- if (speakingState === SpeakingState.Speaking) {
- maybeAnimation = (
-