Dynamic audio level indicator

ts/components/GroupCallRemoteParticipant.stories.tsx

@@ -4,6 +4,7 @@
 import * as React from 'react';
 import { memoize, noop } from 'lodash';
 import { storiesOf } from '@storybook/react';
+import { select } from '@storybook/addon-knobs';
 
 import type { PropsType } from './GroupCallRemoteParticipant';
 import { GroupCallRemoteParticipant } from './GroupCallRemoteParticipant';
@@ -14,7 +15,9 @@ import enMessages from '../../_locales/en/messages.json';
 
 const i18n = setupI18n('en', enMessages);
 
-type OverridePropsType =
+type OverridePropsType = {
+  audioLevel?: number;
+} & (
   | {
       isInPip: true;
     }
@@ -24,22 +27,29 @@ type OverridePropsType =
       left: number;
       top: number;
       width: number;
-    };
+    }
+);
 
 const getFrameBuffer = memoize(() => Buffer.alloc(FRAME_BUFFER_SIZE));
 
 const createProps = (
   overrideProps: OverridePropsType,
-  isBlocked?: boolean
+  {
+    isBlocked = false,
+    hasRemoteAudio = false,
+  }: {
+    isBlocked?: boolean;
+    hasRemoteAudio?: boolean;
+  } = {}
 ): PropsType => ({
   getFrameBuffer,
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   getGroupCallVideoFrameSource: noop as any,
   i18n,
-  isSpeaking: false,
+  audioLevel: 0,
   remoteParticipant: {
     demuxId: 123,
-    hasRemoteAudio: false,
+    hasRemoteAudio,
     hasRemoteVideo: true,
     presenting: false,
     sharingScreen: false,
@@ -52,7 +62,6 @@ const createProps = (
     }),
   },
   ...overrideProps,
-  ...(overrideProps.isInPip ? {} : { isSpeaking: false }),
 });
 
 const story = storiesOf('Components/GroupCallRemoteParticipant', module);
@@ -69,6 +78,22 @@ story.add('Default', () => (
   />
 ));
 
+story.add('Speaking', () => (
+  <GroupCallRemoteParticipant
+    {...createProps(
+      {
+        isInPip: false,
+        height: 120,
+        left: 0,
+        top: 0,
+        width: 120,
+        audioLevel: select('audioLevel', [0, 0.5, 1], 0.5),
+      },
+      { hasRemoteAudio: true }
+    )}
+  />
+));
+
 story.add('isInPip', () => (
   <GroupCallRemoteParticipant
     {...createProps({
@@ -87,7 +112,7 @@ story.add('Blocked', () => (
         top: 0,
         width: 120,
       },
-      true
+      { isBlocked: true }
     )}
   />
 ));