Show local speaking indicator for group calls

ts/components/CallingAudioIndicator.tsx

@@ -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" />
     );