Show local speaking indicator for group calls

ts/components/CallManager.stories.tsx

@@ -50,6 +50,7 @@ const getCommonActiveCallData = () => ({
   joinedAt: Date.now(),
   hasLocalAudio: boolean('hasLocalAudio', true),
   hasLocalVideo: boolean('hasLocalVideo', false),
+  amISpeaking: boolean('amISpeaking', false),
   isInSpeakerView: boolean('isInSpeakerView', false),
   outgoingRing: boolean('outgoingRing', true),
   pip: boolean('pip', false),

ts/components/CallScreen.stories.tsx

@@ -44,6 +44,7 @@ const conversation = getDefaultConversation({
 type OverridePropsBase = {
   hasLocalAudio?: boolean;
   hasLocalVideo?: boolean;
+  amISpeaking?: boolean;
   isInSpeakerView?: boolean;
 };
 
@@ -120,6 +121,7 @@ const createActiveCallProp = (
       'hasLocalVideo',
       overrideProps.hasLocalVideo || false
     ),
+    amISpeaking: boolean('amISpeaking', overrideProps.amISpeaking || false),
     isInSpeakerView: boolean(
       'isInSpeakerView',
       overrideProps.isInSpeakerView || false

ts/components/CallScreen.tsx

@@ -38,6 +38,7 @@ import { NeedsScreenRecordingPermissionsModal } from './NeedsScreenRecordingPerm
 import { missingCaseError } from '../util/missingCaseError';
 import * as KeyboardLayout from '../services/keyboardLayout';
 import { useActivateSpeakerViewOnPresenting } from '../hooks/useActivateSpeakerViewOnPresenting';
+import { CallingAudioIndicator } from './CallingAudioIndicator';
 
 export type PropsType = {
   activeCall: ActiveCallType;
@@ -125,6 +126,7 @@ export const CallScreen: React.FC<PropsType> = ({
     conversation,
     hasLocalAudio,
     hasLocalVideo,
+    amISpeaking,
     isInSpeakerView,
     presentingSource,
     remoteParticipants,
@@ -501,13 +503,12 @@ export const CallScreen: React.FC<PropsType> = ({
             onClick={hangUpActiveCall}
           />
         </div>
-        <div
-          className={classNames('module-ongoing-call__footer__local-preview', {
-            'module-ongoing-call__footer__local-preview--audio-muted':
-              !hasLocalAudio,
-          })}
-        >
+        <div className="module-ongoing-call__footer__local-preview">
           {localPreviewNode}
+          <CallingAudioIndicator
+            hasAudio={hasLocalAudio}
+            isSpeaking={amISpeaking}
+          />
         </div>
       </div>
     </div>

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

ts/components/CallingPip.stories.tsx

@@ -39,6 +39,7 @@ const getCommonActiveCallData = () => ({
   conversation,
   hasLocalAudio: boolean('hasLocalAudio', true),
   hasLocalVideo: boolean('hasLocalVideo', false),
+  amISpeaking: boolean('amISpeaking', false),
   isInSpeakerView: boolean('isInSpeakerView', false),
   joinedAt: Date.now(),
   outgoingRing: true,

ts/components/GroupCallRemoteParticipant.tsx

@@ -285,7 +285,7 @@ export const GroupCallRemoteParticipant: React.FC<PropsType> = React.memo(
                 title={title}
               />
               <CallingAudioIndicator
-                hasRemoteAudio={hasRemoteAudio}
+                hasAudio={hasRemoteAudio}
                 isSpeaking={props.isSpeaking}
               />
             </div>