Merge remote-tracking branch 'origin/master' into dev

web/src/components/player/GenericVideoPlayer.tsx

@@ -1,4 +1,10 @@
-import React, { useState, useRef, useEffect, useCallback } from "react";
+import React, {
+  useState,
+  useRef,
+  useEffect,
+  useCallback,
+  useMemo,
+} from "react";
 import { useVideoDimensions } from "@/hooks/use-video-dimensions";
 import HlsVideoPlayer from "./HlsVideoPlayer";
 import ActivityIndicator from "../indicators/activity-indicator";
@@ -89,6 +95,12 @@ export function GenericVideoPlayer({
     },
   );
 
+  const hlsSource = useMemo(() => {
+    return {
+      playlist: source,
+    };
+  }, [source]);
+
   return (
     <div ref={containerRef} className="relative flex h-full w-full flex-col">
       <div className="relative flex flex-grow items-center justify-center">
@@ -107,9 +119,7 @@ export function GenericVideoPlayer({
             >
               <HlsVideoPlayer
                 videoRef={videoRef}
-                currentSource={{
-                  playlist: source,
-                }}
+                currentSource={hlsSource}
                 hotKeys
                 visible
                 frigateControls={false}

web/src/components/player/HlsVideoPlayer.tsx

@@ -123,13 +123,6 @@ export default function HlsVideoPlayer({
       return;
     }
 
-    // we must destroy the hlsRef every time the source changes
-    // so that we can create a new HLS instance with startPosition
-    // set at the optimal point in time
-    if (hlsRef.current) {
-      hlsRef.current.destroy();
-    }
-
     hlsRef.current = new Hls({
       maxBufferLength: 10,
       maxBufferSize: 20 * 1000 * 1000,
@@ -138,6 +131,15 @@ export default function HlsVideoPlayer({
     hlsRef.current.attachMedia(videoRef.current);
     hlsRef.current.loadSource(currentSource.playlist);
     videoRef.current.playbackRate = currentPlaybackRate;
+
+    return () => {
+      // we must destroy the hlsRef every time the source changes
+      // so that we can create a new HLS instance with startPosition
+      // set at the optimal point in time
+      if (hlsRef.current) {
+        hlsRef.current.destroy();
+      }
+    }
   }, [videoRef, hlsRef, useHlsCompat, currentSource]);
 
   // state handling

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",

web/src/components/player/LivePlayer.tsx

@@ -82,7 +82,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,

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;

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">

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",