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/overlay/detail/TrackingDetails.tsx

@@ -56,6 +56,7 @@ export function TrackingDetails({
   const apiHost = useApiHost();
   const imgRef = useRef<HTMLImageElement | null>(null);
   const [imgLoaded, setImgLoaded] = useState(false);
+  const [isVideoLoading, setIsVideoLoading] = useState(true);
   const [displaySource, _setDisplaySource] = useState<"video" | "image">(
     "video",
   );
@@ -70,6 +71,10 @@ export function TrackingDetails({
     (event.start_time ?? 0) + annotationOffset / 1000 - REVIEW_PADDING,
   );
 
+  useEffect(() => {
+    setIsVideoLoading(true);
+  }, [event.id]);
+
   const { data: eventSequence } = useSWR<TrackingDetailsSequence[]>([
     "timeline",
     {
@@ -527,22 +532,28 @@ export function TrackingDetails({
           )}
         >
           {displaySource == "video" && (
-            <HlsVideoPlayer
-              videoRef={videoRef}
-              containerRef={containerRef}
-              visible={true}
-              currentSource={videoSource}
-              hotKeys={false}
-              supportsFullscreen={false}
-              fullscreen={false}
-              frigateControls={true}
-              onTimeUpdate={handleTimeUpdate}
-              onSeekToTime={handleSeekToTime}
-              onUploadFrame={onUploadFrameToPlus}
-              isDetailMode={true}
-              camera={event.camera}
-              currentTimeOverride={currentTime}
-            />
+            <>
+              <HlsVideoPlayer
+                videoRef={videoRef}
+                containerRef={containerRef}
+                visible={true}
+                currentSource={videoSource}
+                hotKeys={false}
+                supportsFullscreen={false}
+                fullscreen={false}
+                frigateControls={true}
+                onTimeUpdate={handleTimeUpdate}
+                onSeekToTime={handleSeekToTime}
+                onUploadFrame={onUploadFrameToPlus}
+                onPlaying={() => setIsVideoLoading(false)}
+                isDetailMode={true}
+                camera={event.camera}
+                currentTimeOverride={currentTime}
+              />
+              {isVideoLoading && (
+                <ActivityIndicator className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2" />
+              )}
+            </>
           )}
           {displaySource == "image" && (
             <>