@stream-io/video-react-sdk 1.3.6 → 1.4.0

package/dist/latency-chart-Bj5OSYzg.es.js

@@ -0,0 +1,57 @@
+import { jsx } from 'react/jsx-runtime';
+import { Chart, CategoryScale, LinearScale, LineElement, PointElement } from 'chart.js';
+import { Line } from 'react-chartjs-2';
+import { useMemo } from 'react';
+
+// NOTE: this is a side effect by definition, but this component is
+// isolated in a separate chunk, and it won't affect the rest of the app.
+// See CallStats.tsx for more details.
+Chart.register(CategoryScale, LinearScale, LineElement, PointElement);
+const CallStatsLatencyChart = (props) => {
+    const { values } = props;
+    let max = 0;
+    const data = {
+        labels: values.map((point) => {
+            const date = new Date(point.x * 1000);
+            return `${date.getHours()}:${date.getMinutes()}`;
+        }),
+        datasets: [
+            {
+                data: values.map((point) => {
+                    const { y } = point;
+                    max = Math.max(max, y);
+                    return point;
+                }),
+                borderColor: '#00e2a1',
+                backgroundColor: '#00e2a1',
+            },
+        ],
+    };
+    const options = useMemo(() => getLineOptions(max), [max]);
+    return (jsx("div", { className: "str-video__call-stats-line-chart-container", children: jsx(Line, { options: options, data: data, className: "str-video__call-stats__latencychart" }) }));
+};
+const getLineOptions = (max) => ({
+    maintainAspectRatio: false,
+    animation: { duration: 0 },
+    elements: {
+        line: { borderWidth: 1 },
+        point: { radius: 2 },
+    },
+    scales: {
+        y: {
+            position: 'right',
+            stacked: true,
+            min: 0,
+            max: Math.max(180, Math.ceil((max + 10) / 10) * 10),
+            grid: { display: true, color: '#979ca0' },
+            ticks: { stepSize: 30 },
+        },
+        x: {
+            grid: { display: false },
+            ticks: { display: false },
+        },
+    },
+});
+
+export { CallStatsLatencyChart as default };
+//# sourceMappingURL=latency-chart-Bj5OSYzg.es.js.map

package/dist/latency-chart-Bj5OSYzg.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"latency-chart-Bj5OSYzg.es.js","sources":["../../src/components/CallStats/CallStatsLatencyChart.tsx"],"sourcesContent":["import {\n  CategoryScale,\n  Chart as ChartJS,\n  ChartData,\n  ChartOptions,\n  LinearScale,\n  LineElement,\n  PointElement,\n} from 'chart.js';\nimport { Line } from 'react-chartjs-2';\nimport { useMemo } from 'react';\n\n// NOTE: this is a side effect by definition, but this component is\n// isolated in a separate chunk, and it won't affect the rest of the app.\n// See CallStats.tsx for more details.\nChartJS.register(CategoryScale, LinearScale, LineElement, PointElement);\n\nconst CallStatsLatencyChart = (props: {\n  values: Array<{ x: number; y: number }>;\n}) => {\n  const { values } = props;\n  let max = 0;\n  const data: ChartData<'line'> = {\n    labels: values.map((point) => {\n      const date = new Date(point.x * 1000);\n      return `${date.getHours()}:${date.getMinutes()}`;\n    }),\n    datasets: [\n      {\n        data: values.map((point) => {\n          const { y } = point;\n          max = Math.max(max, y);\n          return point;\n        }),\n        borderColor: '#00e2a1',\n        backgroundColor: '#00e2a1',\n      },\n    ],\n  };\n\n  const options = useMemo(() => getLineOptions(max), [max]);\n  return (\n    <div className=\"str-video__call-stats-line-chart-container\">\n      <Line\n        options={options}\n        data={data}\n        className=\"str-video__call-stats__latencychart\"\n      />\n    </div>\n  );\n};\n\nexport default CallStatsLatencyChart;\n\nconst getLineOptions = (max: number): ChartOptions<'line'> => ({\n  maintainAspectRatio: false,\n  animation: { duration: 0 },\n  elements: {\n    line: { borderWidth: 1 },\n    point: { radius: 2 },\n  },\n  scales: {\n    y: {\n      position: 'right',\n      stacked: true,\n      min: 0,\n      max: Math.max(180, Math.ceil((max + 10) / 10) * 10),\n      grid: { display: true, color: '#979ca0' },\n      ticks: { stepSize: 30 },\n    },\n    x: {\n      grid: { display: false },\n      ticks: { display: false },\n    },\n  },\n});\n"],"names":["ChartJS","_jsx"],"mappings":";;;;;AAYA;AACA;AACA;AACAA,KAAO,CAAC,QAAQ,CAAC,aAAa,EAAE,WAAW,EAAE,WAAW,EAAE,YAAY,CAAC,CAAC;AAExE,MAAM,qBAAqB,GAAG,CAAC,KAE9B,KAAI;AACH,IAAA,MAAM,EAAE,MAAM,EAAE,GAAG,KAAK,CAAC;IACzB,IAAI,GAAG,GAAG,CAAC,CAAC;AACZ,IAAA,MAAM,IAAI,GAAsB;QAC9B,MAAM,EAAE,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,KAAI;YAC3B,MAAM,IAAI,GAAG,IAAI,IAAI,CAAC,KAAK,CAAC,CAAC,GAAG,IAAI,CAAC,CAAC;YACtC,OAAO,CAAA,EAAG,IAAI,CAAC,QAAQ,EAAE,CAAI,CAAA,EAAA,IAAI,CAAC,UAAU,EAAE,CAAA,CAAE,CAAC;AACnD,SAAC,CAAC;AACF,QAAA,QAAQ,EAAE;AACR,YAAA;gBACE,IAAI,EAAE,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,KAAI;AACzB,oBAAA,MAAM,EAAE,CAAC,EAAE,GAAG,KAAK,CAAC;oBACpB,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC;AACvB,oBAAA,OAAO,KAAK,CAAC;AACf,iBAAC,CAAC;AACF,gBAAA,WAAW,EAAE,SAAS;AACtB,gBAAA,eAAe,EAAE,SAAS;AAC3B,aAAA;AACF,SAAA;KACF,CAAC;AAEF,IAAA,MAAM,OAAO,GAAG,OAAO,CAAC,MAAM,cAAc,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC;IAC1D,QACEC,aAAK,SAAS,EAAC,4CAA4C,EACzD,QAAA,EAAAA,GAAA,CAAC,IAAI,EAAA,EACH,OAAO,EAAE,OAAO,EAChB,IAAI,EAAE,IAAI,EACV,SAAS,EAAC,qCAAqC,EAAA,CAC/C,EACE,CAAA,EACN;AACJ,EAAE;AAIF,MAAM,cAAc,GAAG,CAAC,GAAW,MAA4B;AAC7D,IAAA,mBAAmB,EAAE,KAAK;AAC1B,IAAA,SAAS,EAAE,EAAE,QAAQ,EAAE,CAAC,EAAE;AAC1B,IAAA,QAAQ,EAAE;AACR,QAAA,IAAI,EAAE,EAAE,WAAW,EAAE,CAAC,EAAE;AACxB,QAAA,KAAK,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE;AACrB,KAAA;AACD,IAAA,MAAM,EAAE;AACN,QAAA,CAAC,EAAE;AACD,YAAA,QAAQ,EAAE,OAAO;AACjB,YAAA,OAAO,EAAE,IAAI;AACb,YAAA,GAAG,EAAE,CAAC;YACN,GAAG,EAAE,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC,GAAG,GAAG,EAAE,IAAI,EAAE,CAAC,GAAG,EAAE,CAAC;YACnD,IAAI,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,SAAS,EAAE;AACzC,YAAA,KAAK,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE;AACxB,SAAA;AACD,QAAA,CAAC,EAAE;AACD,YAAA,IAAI,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE;AACxB,YAAA,KAAK,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE;AAC1B,SAAA;AACF,KAAA;AACF,CAAA,CAAC;;;;"}

package/dist/latency-chart-CpL1M_s0.cjs.js

@@ -0,0 +1,59 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var chart_js = require('chart.js');
+var reactChartjs2 = require('react-chartjs-2');
+var react = require('react');
+
+// NOTE: this is a side effect by definition, but this component is
+// isolated in a separate chunk, and it won't affect the rest of the app.
+// See CallStats.tsx for more details.
+chart_js.Chart.register(chart_js.CategoryScale, chart_js.LinearScale, chart_js.LineElement, chart_js.PointElement);
+const CallStatsLatencyChart = (props) => {
+    const { values } = props;
+    let max = 0;
+    const data = {
+        labels: values.map((point) => {
+            const date = new Date(point.x * 1000);
+            return `${date.getHours()}:${date.getMinutes()}`;
+        }),
+        datasets: [
+            {
+                data: values.map((point) => {
+                    const { y } = point;
+                    max = Math.max(max, y);
+                    return point;
+                }),
+                borderColor: '#00e2a1',
+                backgroundColor: '#00e2a1',
+            },
+        ],
+    };
+    const options = react.useMemo(() => getLineOptions(max), [max]);
+    return (jsxRuntime.jsx("div", { className: "str-video__call-stats-line-chart-container", children: jsxRuntime.jsx(reactChartjs2.Line, { options: options, data: data, className: "str-video__call-stats__latencychart" }) }));
+};
+const getLineOptions = (max) => ({
+    maintainAspectRatio: false,
+    animation: { duration: 0 },
+    elements: {
+        line: { borderWidth: 1 },
+        point: { radius: 2 },
+    },
+    scales: {
+        y: {
+            position: 'right',
+            stacked: true,
+            min: 0,
+            max: Math.max(180, Math.ceil((max + 10) / 10) * 10),
+            grid: { display: true, color: '#979ca0' },
+            ticks: { stepSize: 30 },
+        },
+        x: {
+            grid: { display: false },
+            ticks: { display: false },
+        },
+    },
+});
+
+exports.default = CallStatsLatencyChart;
+//# sourceMappingURL=latency-chart-CpL1M_s0.cjs.js.map

package/dist/latency-chart-CpL1M_s0.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"latency-chart-CpL1M_s0.cjs.js","sources":["../../src/components/CallStats/CallStatsLatencyChart.tsx"],"sourcesContent":["import {\n  CategoryScale,\n  Chart as ChartJS,\n  ChartData,\n  ChartOptions,\n  LinearScale,\n  LineElement,\n  PointElement,\n} from 'chart.js';\nimport { Line } from 'react-chartjs-2';\nimport { useMemo } from 'react';\n\n// NOTE: this is a side effect by definition, but this component is\n// isolated in a separate chunk, and it won't affect the rest of the app.\n// See CallStats.tsx for more details.\nChartJS.register(CategoryScale, LinearScale, LineElement, PointElement);\n\nconst CallStatsLatencyChart = (props: {\n  values: Array<{ x: number; y: number }>;\n}) => {\n  const { values } = props;\n  let max = 0;\n  const data: ChartData<'line'> = {\n    labels: values.map((point) => {\n      const date = new Date(point.x * 1000);\n      return `${date.getHours()}:${date.getMinutes()}`;\n    }),\n    datasets: [\n      {\n        data: values.map((point) => {\n          const { y } = point;\n          max = Math.max(max, y);\n          return point;\n        }),\n        borderColor: '#00e2a1',\n        backgroundColor: '#00e2a1',\n      },\n    ],\n  };\n\n  const options = useMemo(() => getLineOptions(max), [max]);\n  return (\n    <div className=\"str-video__call-stats-line-chart-container\">\n      <Line\n        options={options}\n        data={data}\n        className=\"str-video__call-stats__latencychart\"\n      />\n    </div>\n  );\n};\n\nexport default CallStatsLatencyChart;\n\nconst getLineOptions = (max: number): ChartOptions<'line'> => ({\n  maintainAspectRatio: false,\n  animation: { duration: 0 },\n  elements: {\n    line: { borderWidth: 1 },\n    point: { radius: 2 },\n  },\n  scales: {\n    y: {\n      position: 'right',\n      stacked: true,\n      min: 0,\n      max: Math.max(180, Math.ceil((max + 10) / 10) * 10),\n      grid: { display: true, color: '#979ca0' },\n      ticks: { stepSize: 30 },\n    },\n    x: {\n      grid: { display: false },\n      ticks: { display: false },\n    },\n  },\n});\n"],"names":["ChartJS","CategoryScale","LinearScale","LineElement","PointElement","useMemo","_jsx","Line"],"mappings":";;;;;;;AAYA;AACA;AACA;AACAA,cAAO,CAAC,QAAQ,CAACC,sBAAa,EAAEC,oBAAW,EAAEC,oBAAW,EAAEC,qBAAY,CAAC,CAAC;AAExE,MAAM,qBAAqB,GAAG,CAAC,KAE9B,KAAI;AACH,IAAA,MAAM,EAAE,MAAM,EAAE,GAAG,KAAK,CAAC;IACzB,IAAI,GAAG,GAAG,CAAC,CAAC;AACZ,IAAA,MAAM,IAAI,GAAsB;QAC9B,MAAM,EAAE,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,KAAI;YAC3B,MAAM,IAAI,GAAG,IAAI,IAAI,CAAC,KAAK,CAAC,CAAC,GAAG,IAAI,CAAC,CAAC;YACtC,OAAO,CAAA,EAAG,IAAI,CAAC,QAAQ,EAAE,CAAI,CAAA,EAAA,IAAI,CAAC,UAAU,EAAE,CAAA,CAAE,CAAC;AACnD,SAAC,CAAC;AACF,QAAA,QAAQ,EAAE;AACR,YAAA;gBACE,IAAI,EAAE,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,KAAI;AACzB,oBAAA,MAAM,EAAE,CAAC,EAAE,GAAG,KAAK,CAAC;oBACpB,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC;AACvB,oBAAA,OAAO,KAAK,CAAC;AACf,iBAAC,CAAC;AACF,gBAAA,WAAW,EAAE,SAAS;AACtB,gBAAA,eAAe,EAAE,SAAS;AAC3B,aAAA;AACF,SAAA;KACF,CAAC;AAEF,IAAA,MAAM,OAAO,GAAGC,aAAO,CAAC,MAAM,cAAc,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC;IAC1D,QACEC,wBAAK,SAAS,EAAC,4CAA4C,EACzD,QAAA,EAAAA,cAAA,CAACC,kBAAI,EAAA,EACH,OAAO,EAAE,OAAO,EAChB,IAAI,EAAE,IAAI,EACV,SAAS,EAAC,qCAAqC,EAAA,CAC/C,EACE,CAAA,EACN;AACJ,EAAE;AAIF,MAAM,cAAc,GAAG,CAAC,GAAW,MAA4B;AAC7D,IAAA,mBAAmB,EAAE,KAAK;AAC1B,IAAA,SAAS,EAAE,EAAE,QAAQ,EAAE,CAAC,EAAE;AAC1B,IAAA,QAAQ,EAAE;AACR,QAAA,IAAI,EAAE,EAAE,WAAW,EAAE,CAAC,EAAE;AACxB,QAAA,KAAK,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE;AACrB,KAAA;AACD,IAAA,MAAM,EAAE;AACN,QAAA,CAAC,EAAE;AACD,YAAA,QAAQ,EAAE,OAAO;AACjB,YAAA,OAAO,EAAE,IAAI;AACb,YAAA,GAAG,EAAE,CAAC;YACN,GAAG,EAAE,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC,GAAG,GAAG,EAAE,IAAI,EAAE,CAAC,GAAG,EAAE,CAAC;YACnD,IAAI,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,SAAS,EAAE;AACzC,YAAA,KAAK,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE;AACxB,SAAA;AACD,QAAA,CAAC,EAAE;AACD,YAAA,IAAI,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE;AACxB,YAAA,KAAK,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE;AAC1B,SAAA;AACF,KAAA;AACF,CAAA,CAAC;;;;"}

package/dist/src/components/CallStats/CallStats.d.ts

@@ -1,21 +1,11 @@
 import { ReactNode } from 'react';
-export declare enum Statuses {
-    GOOD = "Good",
-    OK = "Ok",
-    BAD = "Bad"
-}
-export type Status = Statuses.GOOD | Statuses.OK | Statuses.BAD;
-export declare const CallStats: (props: {
+export type CallStatsProps = {
     latencyLowBound?: number;
     latencyHighBound?: number;
-}) => import("react/jsx-runtime").JSX.Element;
-export declare const StatCardExplanation: (props: {
-    description: string;
-}) => import("react/jsx-runtime").JSX.Element;
-export declare const StatsTag: ({ children, status, }: {
-    children: ReactNode;
-    status: Statuses.GOOD | Statuses.OK | Statuses.BAD;
-}) => import("react/jsx-runtime").JSX.Element;
+    showCodecInfo?: boolean;
+    LatencyChartSuspenseFallback?: ReactNode;
+};
+export declare const CallStats: (props: CallStatsProps) => import("react/jsx-runtime").JSX.Element;
 export declare const StatCard: (props: {
     label: string;
     value: string | ReactNode;

package/dist/src/components/CallStats/CallStatsLatencyChart.d.ts

@@ -1,6 +1,7 @@
-export declare const CallStatsLatencyChart: (props: {
+declare const CallStatsLatencyChart: (props: {
     values: Array<{
         x: number;
         y: number;
     }>;
 }) => import("react/jsx-runtime").JSX.Element;
+export default CallStatsLatencyChart;

package/dist/src/components/CallStats/index.d.ts

@@ -1,2 +1 @@
 export * from './CallStats';
-export * from './CallStatsLatencyChart';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stream-io/video-react-sdk",
-  "version": "1.3.6",
+  "version": "1.4.0",
   "packageManager": "yarn@3.2.4",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.es.js",
@@ -27,12 +27,15 @@
     "LICENSE",
     "CHANGELOG.md"
   ],
+  "sideEffects": [
+    "*.css"
+  ],
   "dependencies": {
-    "@floating-ui/react": "^0.26.5",
-    "@stream-io/video-client": "1.6.5",
-    "@stream-io/video-filters-web": "0.1.3",
-    "@stream-io/video-react-bindings": "1.0.5",
-    "chart.js": "^4.4.1",
+    "@floating-ui/react": "^0.26.24",
+    "@stream-io/video-client": "1.7.0",
+    "@stream-io/video-filters-web": "0.1.4",
+    "@stream-io/video-react-bindings": "1.0.6",
+    "chart.js": "^4.4.4",
     "clsx": "^2.0.0",
     "react-chartjs-2": "^5.2.0"
   },
@@ -42,16 +45,16 @@
   },
   "devDependencies": {
     "@rollup/plugin-json": "^6.1.0",
-    "@rollup/plugin-replace": "^5.0.5",
+    "@rollup/plugin-replace": "^5.0.7",
     "@rollup/plugin-typescript": "^11.1.6",
-    "@stream-io/audio-filters-web": "^0.2.1",
+    "@stream-io/audio-filters-web": "^0.2.2",
     "@stream-io/video-styling": "^1.0.6",
     "@types/react": "^18.3.2",
     "@types/react-dom": "^18.3.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "rimraf": "^5.0.7",
-    "rollup": "^3.29.4",
+    "rollup": "^4.22.0",
     "typescript": "^5.5.2"
   }
 }

package/src/components/CallStats/CallStats.tsx

@@ -1,52 +1,35 @@
-import { ReactNode, useEffect, useRef, useState } from 'react';
+import { lazy, ReactNode, Suspense, useEffect, useRef, useState } from 'react';
 import clsx from 'clsx';
 import {
   AggregatedStatsReport,
   CallStatsReport,
 } from '@stream-io/video-client';
 import { useCallStateHooks, useI18n } from '@stream-io/video-react-bindings';
-
 import { useFloating, useHover, useInteractions } from '@floating-ui/react';
-
-import { CallStatsLatencyChart } from './CallStatsLatencyChart';
 import { Icon } from '../Icon';
 
-export enum Statuses {
+const CallStatsLatencyChart = lazy(() => import('./CallStatsLatencyChart'));
+
+enum Status {
   GOOD = 'Good',
   OK = 'Ok',
   BAD = 'Bad',
 }
-export type Status = Statuses.GOOD | Statuses.OK | Statuses.BAD;
-
-const statsStatus = ({
-  value,
-  lowBound,
-  highBound,
-}: {
-  value: number;
-  lowBound: number;
-  highBound: number;
-}): Status => {
-  if (value <= lowBound) {
-    return Statuses.GOOD;
-  }
-
-  if (value >= lowBound && value <= highBound) {
-    return Statuses.OK;
-  }
-
-  if (value >= highBound) {
-    return Statuses.BAD;
-  }
-
-  return Statuses.GOOD;
-};
 
-export const CallStats = (props: {
+export type CallStatsProps = {
   latencyLowBound?: number;
   latencyHighBound?: number;
-}) => {
-  const { latencyLowBound = 75, latencyHighBound = 400 } = props;
+  showCodecInfo?: boolean;
+  LatencyChartSuspenseFallback?: ReactNode;
+};
+
+export const CallStats = (props: CallStatsProps) => {
+  const {
+    latencyLowBound = 75,
+    latencyHighBound = 400,
+    showCodecInfo = false,
+    LatencyChartSuspenseFallback = null,
+  } = props;
   const [latencyBuffer, setLatencyBuffer] = useState<
     Array<{ x: number; y: number }>
   >(() => {
@@ -116,7 +99,9 @@ export const CallStats = (props: {
           </div>
 
           <div className="str-video__call-stats__latencychart">
-            <CallStatsLatencyChart values={latencyBuffer} />
+            <Suspense fallback={LatencyChartSuspenseFallback}>
+              <CallStatsLatencyChart values={latencyBuffer} />
+            </Suspense>
           </div>
 
           <div className="str-video__call-stats__header">
@@ -156,7 +141,7 @@ export const CallStats = (props: {
               }}
             />
             <StatCard
-              label={t('Publish resolution')}
+              label={`${t('Publish resolution')}${showCodecInfo ? formatCodec(callStatsReport) : ''}`}
               value={toFrameSize(callStatsReport.publisherStats)}
             />
             <StatCard
@@ -180,7 +165,7 @@ export const CallStats = (props: {
   );
 };
 
-export const StatCardExplanation = (props: { description: string }) => {
+const StatCardExplanation = (props: { description: string }) => {
   const { description } = props;
   const [isOpen, setIsOpen] = useState(false);
 
@@ -216,19 +201,14 @@ export const StatCardExplanation = (props: { description: string }) => {
   );
 };
 
-export const StatsTag = ({
-  children,
-  status = Statuses.GOOD,
-}: {
-  children: ReactNode;
-  status: Statuses.GOOD | Statuses.OK | Statuses.BAD;
-}) => {
+const StatsTag = (props: { children: ReactNode; status: Status }) => {
+  const { children, status } = props;
   return (
     <div
       className={clsx('str-video__call-stats__tag', {
-        'str-video__call-stats__tag--good': status === Statuses.GOOD,
-        'str-video__call-stats__tag--ok': status === Statuses.OK,
-        'str-video__call-stats__tag--bad': status === Statuses.BAD,
+        'str-video__call-stats__tag--good': status === Status.GOOD,
+        'str-video__call-stats__tag--ok': status === Status.OK,
+        'str-video__call-stats__tag--bad': status === Status.BAD,
       })}
     >
       <div className="str-video__call-stats__tag__text">{children}</div>
@@ -245,7 +225,7 @@ export const StatCard = (props: {
   const { label, value, description, comparison } = props;
 
   const { t } = useI18n();
-  const status = comparison ? statsStatus(comparison) : undefined;
+  const status = comparison ? toStatus(comparison) : undefined;
 
   return (
     <div className="str-video__call-stats__card">
@@ -256,11 +236,23 @@ export const StatCard = (props: {
         </div>
         <div className="str-video__call-stats__card-value">{value}</div>
       </div>
-      {comparison && status && <StatsTag status={status}>{t(status)}</StatsTag>}
+      {status && <StatsTag status={status}>{t(status)}</StatsTag>}
     </div>
   );
 };
 
+const toStatus = (config: {
+  value: number;
+  lowBound: number;
+  highBound: number;
+}): Status => {
+  const { value, lowBound, highBound } = config;
+  if (value <= lowBound) return Status.GOOD;
+  if (value >= lowBound && value <= highBound) return Status.OK;
+  if (value >= highBound) return Status.BAD;
+  return Status.GOOD;
+};
+
 const toFrameSize = (stats: AggregatedStatsReport) => {
   const {
     highestFrameWidth: w,
@@ -277,6 +269,13 @@ const toFrameSize = (stats: AggregatedStatsReport) => {
   return size;
 };
 
+const formatCodec = (callStatsReport: CallStatsReport): string => {
+  const { codec } = callStatsReport.publisherStats;
+  if (!codec) return '';
+  const [, name] = codec.split('/');
+  return name ? ` (${name})` : '';
+};
+
 const calculatePublishBitrate = (
   previousCallStatsReport: CallStatsReport,
   callStatsReport: CallStatsReport,

package/src/components/CallStats/CallStatsLatencyChart.tsx

@@ -10,9 +10,12 @@ import {
 import { Line } from 'react-chartjs-2';
 import { useMemo } from 'react';
 
+// NOTE: this is a side effect by definition, but this component is
+// isolated in a separate chunk, and it won't affect the rest of the app.
+// See CallStats.tsx for more details.
 ChartJS.register(CategoryScale, LinearScale, LineElement, PointElement);
 
-export const CallStatsLatencyChart = (props: {
+const CallStatsLatencyChart = (props: {
   values: Array<{ x: number; y: number }>;
 }) => {
   const { values } = props;
@@ -35,46 +38,7 @@ export const CallStatsLatencyChart = (props: {
     ],
   };
 
-  const options = useMemo<ChartOptions<'line'>>(() => {
-    return {
-      maintainAspectRatio: false,
-      animation: {
-        duration: 0,
-      },
-      elements: {
-        line: {
-          borderWidth: 1,
-        },
-        point: {
-          radius: 2,
-        },
-      },
-      scales: {
-        y: {
-          position: 'right',
-          stacked: true,
-          min: 0,
-          max: Math.max(180, Math.ceil((max + 10) / 10) * 10),
-          grid: {
-            display: true,
-            color: '#979ca0',
-          },
-          ticks: {
-            stepSize: 30,
-          },
-        },
-        x: {
-          grid: {
-            display: false,
-          },
-          ticks: {
-            display: false,
-          },
-        },
-      },
-    };
-  }, [max]);
-
+  const options = useMemo(() => getLineOptions(max), [max]);
   return (
     <div className="str-video__call-stats-line-chart-container">
       <Line
@@ -85,3 +49,28 @@ export const CallStatsLatencyChart = (props: {
     </div>
   );
 };
+
+export default CallStatsLatencyChart;
+
+const getLineOptions = (max: number): ChartOptions<'line'> => ({
+  maintainAspectRatio: false,
+  animation: { duration: 0 },
+  elements: {
+    line: { borderWidth: 1 },
+    point: { radius: 2 },
+  },
+  scales: {
+    y: {
+      position: 'right',
+      stacked: true,
+      min: 0,
+      max: Math.max(180, Math.ceil((max + 10) / 10) * 10),
+      grid: { display: true, color: '#979ca0' },
+      ticks: { stepSize: 30 },
+    },
+    x: {
+      grid: { display: false },
+      ticks: { display: false },
+    },
+  },
+});

package/src/components/CallStats/index.ts

@@ -1,2 +1 @@
 export * from './CallStats';
-export * from './CallStatsLatencyChart';