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

web/src/components/menu/GeneralSettings.tsx

@@ -346,7 +346,9 @@ export default function GeneralSettings({ className }: GeneralSettingsProps) {
               <Portal>
                 <SubItemContent
                   className={
-                    isDesktop ? "" : "w-[92%] rounded-lg md:rounded-2xl"
+                    isDesktop
+                      ? ""
+                      : "scrollbar-container max-h-[75dvh] w-[92%] overflow-y-scroll rounded-lg md:rounded-2xl"
                   }
                 >
                   <span tabIndex={0} className="sr-only" />

web/src/components/overlay/ExportDialog.tsx

@@ -433,137 +433,139 @@ function CustomTimeSelector({
       className={`mt-3 flex items-center rounded-lg bg-secondary text-secondary-foreground ${isDesktop ? "mx-8 gap-2 px-2" : "pl-2"}`}
     >
       <FaCalendarAlt />
-      <Popover
-        open={startOpen}
-        onOpenChange={(open) => {
-          if (!open) {
-            setStartOpen(false);
-          }
-        }}
-      >
-        <PopoverTrigger asChild>
-          <Button
-            className={`text-primary ${isDesktop ? "" : "text-xs"}`}
-            aria-label={t("export.time.start.title")}
-            variant={startOpen ? "select" : "default"}
-            size="sm"
-            onClick={() => {
-              setStartOpen(true);
-              setEndOpen(false);
-            }}
-          >
-            {formattedStart}
-          </Button>
-        </PopoverTrigger>
-        <PopoverContent className="flex flex-col items-center">
-          <TimezoneAwareCalendar
-            timezone={config?.ui.timezone}
-            selectedDay={new Date(startTime * 1000)}
-            onSelect={(day) => {
-              if (!day) {
-                return;
-              }
-
-              setRange({
-                before: endTime,
-                after: day.getTime() / 1000 + 1,
-              });
-            }}
-          />
-          <SelectSeparator className="bg-secondary" />
-          <input
-            className="text-md mx-4 w-full border border-input bg-background p-1 text-secondary-foreground hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
-            id="startTime"
-            type="time"
-            value={startClock}
-            step={isIOS ? "60" : "1"}
-            onChange={(e) => {
-              const clock = e.target.value;
-              const [hour, minute, second] = isIOS
-                ? [...clock.split(":"), "00"]
-                : clock.split(":");
-
-              const start = new Date(startTime * 1000);
-              start.setHours(
-                parseInt(hour),
-                parseInt(minute),
-                parseInt(second ?? 0),
-                0,
-              );
-              setRange({
-                before: endTime,
-                after: start.getTime() / 1000,
-              });
-            }}
-          />
-        </PopoverContent>
-      </Popover>
-      <FaArrowRight className="size-4 text-primary" />
-      <Popover
-        open={endOpen}
-        onOpenChange={(open) => {
-          if (!open) {
-            setEndOpen(false);
-          }
-        }}
-      >
-        <PopoverTrigger asChild>
-          <Button
-            className={`text-primary ${isDesktop ? "" : "text-xs"}`}
-            aria-label={t("export.time.end.title")}
-            variant={endOpen ? "select" : "default"}
-            size="sm"
-            onClick={() => {
-              setEndOpen(true);
+      <div className="flex flex-wrap items-center">
+        <Popover
+          open={startOpen}
+          onOpenChange={(open) => {
+            if (!open) {
               setStartOpen(false);
-            }}
-          >
-            {formattedEnd}
-          </Button>
-        </PopoverTrigger>
-        <PopoverContent className="flex flex-col items-center">
-          <TimezoneAwareCalendar
-            timezone={config?.ui.timezone}
-            selectedDay={new Date(endTime * 1000)}
-            onSelect={(day) => {
-              if (!day) {
-                return;
-              }
+            }
+          }}
+        >
+          <PopoverTrigger asChild>
+            <Button
+              className={`text-primary ${isDesktop ? "" : "text-xs"}`}
+              aria-label={t("export.time.start.title")}
+              variant={startOpen ? "select" : "default"}
+              size="sm"
+              onClick={() => {
+                setStartOpen(true);
+                setEndOpen(false);
+              }}
+            >
+              {formattedStart}
+            </Button>
+          </PopoverTrigger>
+          <PopoverContent className="flex flex-col items-center">
+            <TimezoneAwareCalendar
+              timezone={config?.ui.timezone}
+              selectedDay={new Date(startTime * 1000)}
+              onSelect={(day) => {
+                if (!day) {
+                  return;
+                }
 
-              setRange({
-                after: startTime,
-                before: day.getTime() / 1000,
-              });
-            }}
-          />
-          <SelectSeparator className="bg-secondary" />
-          <input
-            className="text-md mx-4 w-full border border-input bg-background p-1 text-secondary-foreground hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
-            id="startTime"
-            type="time"
-            value={endClock}
-            step={isIOS ? "60" : "1"}
-            onChange={(e) => {
-              const clock = e.target.value;
-              const [hour, minute, second] = isIOS
-                ? [...clock.split(":"), "00"]
-                : clock.split(":");
+                setRange({
+                  before: endTime,
+                  after: day.getTime() / 1000 + 1,
+                });
+              }}
+            />
+            <SelectSeparator className="bg-secondary" />
+            <input
+              className="text-md mx-4 w-full border border-input bg-background p-1 text-secondary-foreground hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
+              id="startTime"
+              type="time"
+              value={startClock}
+              step={isIOS ? "60" : "1"}
+              onChange={(e) => {
+                const clock = e.target.value;
+                const [hour, minute, second] = isIOS
+                  ? [...clock.split(":"), "00"]
+                  : clock.split(":");
 
-              const end = new Date(endTime * 1000);
-              end.setHours(
-                parseInt(hour),
-                parseInt(minute),
-                parseInt(second ?? 0),
-                0,
-              );
-              setRange({
-                before: end.getTime() / 1000,
-                after: startTime,
-              });
-            }}
-          />
-        </PopoverContent>
-      </Popover>
+                const start = new Date(startTime * 1000);
+                start.setHours(
+                  parseInt(hour),
+                  parseInt(minute),
+                  parseInt(second ?? 0),
+                  0,
+                );
+                setRange({
+                  before: endTime,
+                  after: start.getTime() / 1000,
+                });
+              }}
+            />
+          </PopoverContent>
+        </Popover>
+        <FaArrowRight className="size-4 text-primary" />
+        <Popover
+          open={endOpen}
+          onOpenChange={(open) => {
+            if (!open) {
+              setEndOpen(false);
+            }
+          }}
+        >
+          <PopoverTrigger asChild>
+            <Button
+              className={`text-primary ${isDesktop ? "" : "text-xs"}`}
+              aria-label={t("export.time.end.title")}
+              variant={endOpen ? "select" : "default"}
+              size="sm"
+              onClick={() => {
+                setEndOpen(true);
+                setStartOpen(false);
+              }}
+            >
+              {formattedEnd}
+            </Button>
+          </PopoverTrigger>
+          <PopoverContent className="flex flex-col items-center">
+            <TimezoneAwareCalendar
+              timezone={config?.ui.timezone}
+              selectedDay={new Date(endTime * 1000)}
+              onSelect={(day) => {
+                if (!day) {
+                  return;
+                }
+
+                setRange({
+                  after: startTime,
+                  before: day.getTime() / 1000,
+                });
+              }}
+            />
+            <SelectSeparator className="bg-secondary" />
+            <input
+              className="text-md mx-4 w-full border border-input bg-background p-1 text-secondary-foreground hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
+              id="startTime"
+              type="time"
+              value={endClock}
+              step={isIOS ? "60" : "1"}
+              onChange={(e) => {
+                const clock = e.target.value;
+                const [hour, minute, second] = isIOS
+                  ? [...clock.split(":"), "00"]
+                  : clock.split(":");
+
+                const end = new Date(endTime * 1000);
+                end.setHours(
+                  parseInt(hour),
+                  parseInt(minute),
+                  parseInt(second ?? 0),
+                  0,
+                );
+                setRange({
+                  before: end.getTime() / 1000,
+                  after: startTime,
+                });
+              }}
+            />
+          </PopoverContent>
+        </Popover>
+      </div>
     </div>
   );
 }

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