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 = ( - - ); - } - + if (shouldShowSpeaking) { return (
- {maybeAnimation} +
); }