From 198e53bd42fff1086a38fc2d42254a7ee7f5598b Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Mon, 1 Sep 2025 19:23:44 -0500
Subject: [PATCH] Fix stream stats display (#19874)

* Fix stats calculations and labels

* fix linter from complaining

* fix mse calc

* label
---
 web/src/components/player/JSMpegPlayer.tsx | 2 +-
 web/src/components/player/LivePlayer.tsx   | 2 +-
 web/src/components/player/MsePlayer.tsx    | 4 ++--
 web/src/components/player/PlayerStats.tsx  | 4 ++--
 web/src/components/player/WebRTCPlayer.tsx | 2 +-
 5 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/web/src/components/player/JSMpegPlayer.tsx b/web/src/components/player/JSMpegPlayer.tsx
index 3753a9e46..f85535013 100644
--- a/web/src/components/player/JSMpegPlayer.tsx
+++ b/web/src/components/player/JSMpegPlayer.tsx
@@ -164,7 +164,7 @@ export default function JSMpegPlayer({
         statsIntervalRef.current = setInterval(() => {
           const currentTimestamp = Date.now();
           const timeDiff = (currentTimestamp - lastTimestampRef.current) / 1000; // in seconds
-          const bitrate = (bytesReceivedRef.current * 8) / timeDiff / 1000; // in kbps
+          const bitrate = bytesReceivedRef.current / timeDiff / 1000; // in kBps
 
           setStats?.({
             streamType: "jsmpeg",
diff --git a/web/src/components/player/LivePlayer.tsx b/web/src/components/player/LivePlayer.tsx
index 3d8df2b34..d6f751499 100644
--- a/web/src/components/player/LivePlayer.tsx
+++ b/web/src/components/player/LivePlayer.tsx
@@ -80,7 +80,7 @@ export default function LivePlayer({
 
   const [stats, setStats] = useState<PlayerStatsType>({
     streamType: "-",
-    bandwidth: 0, // in kbps
+    bandwidth: 0, // in kBps
     latency: undefined, // in seconds
     totalFrames: 0,
     droppedFrames: undefined,
diff --git a/web/src/components/player/MsePlayer.tsx b/web/src/components/player/MsePlayer.tsx
index f3ef17a24..7c831e596 100644
--- a/web/src/components/player/MsePlayer.tsx
+++ b/web/src/components/player/MsePlayer.tsx
@@ -338,7 +338,7 @@ function MSEPlayer({
           // console.debug("VideoRTC.buffer", b.byteLength, bufLen);
         } else {
           try {
-            sb?.appendBuffer(data);
+            sb?.appendBuffer(data as ArrayBuffer);
           } catch (e) {
             // no-op
           }
@@ -592,7 +592,7 @@ function MSEPlayer({
         const now = Date.now();
         const bytesLoaded = totalBytesLoaded.current;
         const timeElapsed = (now - lastTimestamp) / 1000; // seconds
-        const bandwidth = (bytesLoaded - lastLoadedBytes) / timeElapsed / 1024; // kbps
+        const bandwidth = (bytesLoaded - lastLoadedBytes) / timeElapsed / 1000; // kBps
 
         lastLoadedBytes = bytesLoaded;
         lastTimestamp = now;
diff --git a/web/src/components/player/PlayerStats.tsx b/web/src/components/player/PlayerStats.tsx
index baea08b35..6d7e19f5e 100644
--- a/web/src/components/player/PlayerStats.tsx
+++ b/web/src/components/player/PlayerStats.tsx
@@ -17,7 +17,7 @@ export function PlayerStats({ stats, minimal }: PlayerStatsProps) {
       </p>
       <p>
         <span className="text-white/70">{t("stats.bandwidth.title")}</span>{" "}
-        <span className="text-white">{stats.bandwidth.toFixed(2)} kbps</span>
+        <span className="text-white">{stats.bandwidth.toFixed(2)} kBps</span>
       </p>
       {stats.latency != undefined && (
         <p>
@@ -66,7 +66,7 @@ export function PlayerStats({ stats, minimal }: PlayerStatsProps) {
       </div>
       <div className="flex flex-col items-center gap-1">
         <span className="text-white/70">{t("stats.bandwidth.short")}</span>{" "}
-        <span className="text-white">{stats.bandwidth.toFixed(2)} kbps</span>
+        <span className="text-white">{stats.bandwidth.toFixed(2)} kBps</span>
       </div>
       {stats.latency != undefined && (
         <div className="hidden flex-col items-center gap-1 md:flex">
diff --git a/web/src/components/player/WebRTCPlayer.tsx b/web/src/components/player/WebRTCPlayer.tsx
index b4c9ea6b2..81d6a72dd 100644
--- a/web/src/components/player/WebRTCPlayer.tsx
+++ b/web/src/components/player/WebRTCPlayer.tsx
@@ -266,7 +266,7 @@ export default function WebRtcPlayer({
         const bitrate =
           timeDiff > 0
             ? (bytesReceived - lastBytesReceived) / timeDiff / 1000
-            : 0; // in kbps
+            : 0; // in kBps
 
         setStats?.({
           streamType: "WebRTC",