feat(dogfood): Extend stats report with audio statistics (#2033)

### 💡 Overview
Update dogfood `CallStats` with audio statistics publish/subscribe
jitter and bitrate.

Author: jdimovska

sample-apps/react-native/dogfood/src/components/CallStats.tsx

@@ -20,20 +20,31 @@ enum Status {
 export type CallStatsProps = {
   latencyLowBound?: number;
   latencyHighBound?: number;
+  audioJitterLowBound?: number;
+  audioJitterHighBound?: number;
+  videoJitterLowBound?: number;
+  videoJitterHighBound?: number;
   showCodecInfo?: boolean;
 };
 
 export const CallStats = (props: CallStatsProps) => {
   const {
     latencyLowBound = 75,
     latencyHighBound = 400,
+    audioJitterLowBound = 10,
+    audioJitterHighBound = 30,
+    videoJitterLowBound = 20,
+    videoJitterHighBound = 50,
     showCodecInfo = false,
   } = props;
   const styles = useStyles();
   const { t } = useI18n();
   const call = useCall();
   const [publishBitrate, setPublishBitrate] = useState('-');
   const [subscribeBitrate, setSubscribeBitrate] = useState('-');
+
+  const [publishAudioBitrate, setPublishAudioBitrate] = useState('-');
+  const [subscribeAudioBitrate, setSubscribeAudioBitrate] = useState('-');
   const previousStats = useRef<CallStatsReport | undefined>(undefined);
 
   const { useCallStatsReport } = useCallStateHooks();
@@ -58,7 +69,18 @@ export const CallStats = (props: CallStatsProps) => {
         callStatsReport,
       );
     });
-
+    setPublishAudioBitrate(() => {
+      return calculatePublishAudioBitrate(
+        previousCallStatsReport,
+        callStatsReport,
+      );
+    });
+    setSubscribeAudioBitrate(() => {
+      return calculateSubscribeAudioBitrate(
+        previousCallStatsReport,
+        callStatsReport,
+      );
+    });
     previousStats.current = callStatsReport;
   }, [callStatsReport]);
 
@@ -68,6 +90,16 @@ export const CallStats = (props: CallStatsProps) => {
     value: callStatsReport?.publisherStats.averageRoundTripTimeInMs,
   };
 
+  const audioJitterComparison = {
+    lowBound: audioJitterLowBound,
+    highBound: audioJitterHighBound,
+  };
+
+  const videoJitterComparison = {
+    lowBound: videoJitterLowBound,
+    highBound: videoJitterHighBound,
+  };
+
   return (
     <View style={styles.container}>
       <View style={styles.titleContainer}>
@@ -93,18 +125,36 @@ export const CallStats = (props: CallStatsProps) => {
           </View>
           <View style={styles.row}>
             <StatCard
-              label={t('Receive jitter')}
+              label={t('Receive video jitter')}
               value={`${callStatsReport.subscriberStats.averageJitterInMs} ms.`}
               comparison={{
-                ...latencyComparison,
+                ...videoJitterComparison,
                 value: callStatsReport.subscriberStats.averageJitterInMs,
               }}
             />
             <StatCard
-              label={t('Publish jitter')}
+              label={t('Publish video jitter')}
+              value={`${callStatsReport.publisherStats.averageJitterInMs} ms.`}
+              comparison={{
+                ...videoJitterComparison,
+                value: callStatsReport.publisherStats.averageJitterInMs,
+              }}
+            />
+          </View>
+          <View style={styles.row}>
+            <StatCard
+              label={t('Receive audio jitter')}
+              value={`${callStatsReport.subscriberAudioStats.averageJitterInMs} ms.`}
+              comparison={{
+                ...audioJitterComparison,
+                value: callStatsReport.subscriberAudioStats.averageJitterInMs,
+              }}
+            />
+            <StatCard
+              label={t('Publish audio jitter')}
               value={`${callStatsReport.publisherStats.averageJitterInMs} ms.`}
               comparison={{
-                ...latencyComparison,
+                ...audioJitterComparison,
                 value: callStatsReport.publisherStats.averageJitterInMs,
               }}
             />
@@ -132,8 +182,21 @@ export const CallStats = (props: CallStatsProps) => {
         </>
       )}
       <View style={styles.row}>
-        <StatCard label={t('Publish bitrate')} value={publishBitrate} />
-        <StatCard label={t('Receiving bitrate')} value={subscribeBitrate} />
+        <StatCard label={t('Publish video bitrate')} value={publishBitrate} />
+        <StatCard
+          label={t('Receiving video bitrate')}
+          value={subscribeBitrate}
+        />
+      </View>
+      <View style={styles.row}>
+        <StatCard
+          label={t('Publish audio bitrate')}
+          value={publishAudioBitrate}
+        />
+        <StatCard
+          label={t('Receiving audio bitrate')}
+          value={subscribeAudioBitrate}
+        />
       </View>
     </View>
   );
@@ -282,6 +345,34 @@ const calculateSubscribeBitrate = (
   return `${((bytesReceived * 8) / timeElapsed).toFixed(2)} kbps`;
 };
 
+const calculatePublishAudioBitrate = (
+  previousCallStatsReport: CallStatsReport,
+  callStatsReport: CallStatsReport,
+) => {
+  const previousAudioStats = previousCallStatsReport.publisherAudioStats;
+  const audioStats = callStatsReport.publisherAudioStats;
+
+  const bytesSent =
+    audioStats.totalBytesSent - previousAudioStats.totalBytesSent;
+  const timeElapsed = audioStats.timestamp - previousAudioStats.timestamp;
+
+  return `${((bytesSent * 8) / timeElapsed).toFixed(2)} kbps`;
+};
+
+const calculateSubscribeAudioBitrate = (
+  previousCallStatsReport: CallStatsReport,
+  callStatsReport: CallStatsReport,
+) => {
+  const previousAudioStats = previousCallStatsReport.subscriberAudioStats;
+  const audioStats = callStatsReport.subscriberAudioStats;
+
+  const bytesReceived =
+    audioStats.totalBytesReceived - previousAudioStats.totalBytesReceived;
+  const timeElapsed = audioStats.timestamp - previousAudioStats.timestamp;
+
+  return `${((bytesReceived * 8) / timeElapsed).toFixed(2)} kbps`;
+};
+
 const useStyles = () => {
   const {
     theme: { colors, variants },