Miscellaneous Fixes (#20989)

* Include DB in safe mode config

Copy DB when going into safe mode to avoid creating a new one if a user has configured a separate location

* Fix documentation for example log module

* Set minimum duration for recording segments

Due to the inpoint logic, some recordings would get clipped on the end of the segment with a non-zero duration but not enough duration to include a frame. 100 ms is a safe value for any video that is 10fps or higher to have a frame

* Add docs to explain object assignment for classification

* Add warning for Intel GPU stats bug

Add warning with explanation on GPU stats page when all Intel GPU values are 0

* Update docs with creation instructions

* reset loading state when moving through events in tracking details

* disable pip on preview players

* Improve HLS handling for startPosition

The startPosition was incorrectly calculated assuming continuous recordings, when it needs to consider only some segments exist. This extracts that logic to a utility so all can use it.

---------

Co-authored-by: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>

web/src/components/player/dynamic/DynamicVideoPlayer.tsx

@@ -14,7 +14,10 @@ import { VideoResolutionType } from "@/types/live";
 import axios from "axios";
 import { cn } from "@/lib/utils";
 import { useTranslation } from "react-i18next";
-import { calculateInpointOffset } from "@/utils/videoUtil";
+import {
+  calculateInpointOffset,
+  calculateSeekPosition,
+} from "@/utils/videoUtil";
 import { isFirefox } from "react-device-detect";
 
 /**
@@ -109,10 +112,10 @@ export default function DynamicVideoPlayer({
   const [isLoading, setIsLoading] = useState(false);
   const [isBuffering, setIsBuffering] = useState(false);
   const [loadingTimeout, setLoadingTimeout] = useState<NodeJS.Timeout>();
-  const [source, setSource] = useState<HlsSource>({
-    playlist: `${apiHost}vod/${camera}/start/${timeRange.after}/end/${timeRange.before}/master.m3u8`,
-    startPosition: startTimestamp ? startTimestamp - timeRange.after : 0,
-  });
+
+  // Don't set source until recordings load - we need accurate startPosition
+  // to avoid hls.js clamping to video end when startPosition exceeds duration
+  const [source, setSource] = useState<HlsSource | undefined>(undefined);
 
   // start at correct time
 
@@ -184,7 +187,7 @@ export default function DynamicVideoPlayer({
   );
 
   useEffect(() => {
-    if (!controller || !recordings?.length) {
+    if (!recordings?.length) {
       if (recordings?.length == 0) {
         setNoRecording(true);
       }
@@ -192,10 +195,6 @@ export default function DynamicVideoPlayer({
       return;
     }
 
-    if (playerRef.current) {
-      playerRef.current.autoplay = !isScrubbing;
-    }
-
     let startPosition = undefined;
 
     if (startTimestamp) {
@@ -203,14 +202,12 @@ export default function DynamicVideoPlayer({
         recordingParams.after,
         (recordings || [])[0],
       );
-      const idealStartPosition = Math.max(
-        0,
-        startTimestamp - timeRange.after - inpointOffset,
-      );
 
-      if (idealStartPosition >= recordings[0].start_time - timeRange.after) {
-        startPosition = idealStartPosition;
-      }
+      startPosition = calculateSeekPosition(
+        startTimestamp,
+        recordings,
+        inpointOffset,
+      );
     }
 
     setSource({
@@ -218,6 +215,18 @@ export default function DynamicVideoPlayer({
       startPosition,
     });
 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [recordings]);
+
+  useEffect(() => {
+    if (!controller || !recordings?.length) {
+      return;
+    }
+
+    if (playerRef.current) {
+      playerRef.current.autoplay = !isScrubbing;
+    }
+
     setLoadingTimeout(setTimeout(() => setIsLoading(true), 1000));
 
     controller.newPlayback({
@@ -225,7 +234,7 @@ export default function DynamicVideoPlayer({
       timeRange,
     });
 
-    // we only want this to change when recordings update
+    // we only want this to change when controller or recordings update
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [controller, recordings]);
 
@@ -263,46 +272,48 @@ export default function DynamicVideoPlayer({
 
   return (
     <>
-      <HlsVideoPlayer
-        videoRef={playerRef}
-        containerRef={containerRef}
-        visible={!(isScrubbing || isLoading)}
-        currentSource={source}
-        hotKeys={hotKeys}
-        supportsFullscreen={supportsFullscreen}
-        fullscreen={fullscreen}
-        inpointOffset={inpointOffset}
-        onTimeUpdate={onTimeUpdate}
-        onPlayerLoaded={onPlayerLoaded}
-        onClipEnded={onValidateClipEnd}
-        onSeekToTime={(timestamp, play) => {
-          if (onSeekToTime) {
-            onSeekToTime(timestamp, play);
-          }
-        }}
-        onPlaying={() => {
-          if (isScrubbing) {
-            playerRef.current?.pause();
-          }
+      {source && (
+        <HlsVideoPlayer
+          videoRef={playerRef}
+          containerRef={containerRef}
+          visible={!(isScrubbing || isLoading)}
+          currentSource={source}
+          hotKeys={hotKeys}
+          supportsFullscreen={supportsFullscreen}
+          fullscreen={fullscreen}
+          inpointOffset={inpointOffset}
+          onTimeUpdate={onTimeUpdate}
+          onPlayerLoaded={onPlayerLoaded}
+          onClipEnded={onValidateClipEnd}
+          onSeekToTime={(timestamp, play) => {
+            if (onSeekToTime) {
+              onSeekToTime(timestamp, play);
+            }
+          }}
+          onPlaying={() => {
+            if (isScrubbing) {
+              playerRef.current?.pause();
+            }
 
-          if (loadingTimeout) {
-            clearTimeout(loadingTimeout);
-          }
+            if (loadingTimeout) {
+              clearTimeout(loadingTimeout);
+            }
 
-          setNoRecording(false);
-        }}
-        setFullResolution={setFullResolution}
-        onUploadFrame={onUploadFrameToPlus}
-        toggleFullscreen={toggleFullscreen}
-        onError={(error) => {
-          if (error == "stalled" && !isScrubbing) {
-            setIsBuffering(true);
-          }
-        }}
-        isDetailMode={isDetailMode}
-        camera={contextCamera || camera}
-        currentTimeOverride={currentTime}
-      />
+            setNoRecording(false);
+          }}
+          setFullResolution={setFullResolution}
+          onUploadFrame={onUploadFrameToPlus}
+          toggleFullscreen={toggleFullscreen}
+          onError={(error) => {
+            if (error == "stalled" && !isScrubbing) {
+              setIsBuffering(true);
+            }
+          }}
+          isDetailMode={isDetailMode}
+          camera={contextCamera || camera}
+          currentTimeOverride={currentTime}
+        />
+      )}
       <PreviewPlayer
         className={cn(
           className,