Show loading indicators for previews on recordings page

web/src/components/player/PreviewPlayer.tsx

@@ -14,6 +14,7 @@ import { isCurrentHour } from "@/utils/dateUtil";
 import { baseUrl } from "@/api/baseUrl";
 import { isAndroid, isChrome, isMobile } from "react-device-detect";
 import { TimeRange } from "@/types/timeline";
+import { Skeleton } from "../ui/skeleton";
 
 type PreviewPlayerProps = {
   className?: string;
@@ -143,6 +144,8 @@ function PreviewVideoPlayer({
 
   // initial state
 
+  const [firstLoad, setFirstLoad] = useState(true);
+
   const initialPreview = useMemo(() => {
     return cameraPreviews.find(
       (preview) =>
@@ -253,6 +256,10 @@ function PreviewVideoPlayer({
         disableRemotePlayback
         onSeeked={onPreviewSeeked}
         onLoadedData={() => {
+          if (firstLoad) {
+            setFirstLoad(false);
+          }
+
           if (controller) {
             controller.previewReady();
           } else {
@@ -280,6 +287,7 @@ function PreviewVideoPlayer({
           No Preview Found
         </div>
       )}
+      {firstLoad && <Skeleton className="absolute size-full aspect-video" />}
     </div>
   );
 }
@@ -427,6 +435,8 @@ function PreviewFramesPlayer({
 
   // initial state
 
+  const [firstLoad, setFirstLoad] = useState(true);
+
   useEffect(() => {
     if (!controller) {
       return;
@@ -441,6 +451,8 @@ function PreviewFramesPlayer({
   }, [controller]);
 
   const onImageLoaded = useCallback(() => {
+    setFirstLoad(false);
+
     if (!controller) {
       return;
     }
@@ -477,6 +489,7 @@ function PreviewFramesPlayer({
           No Preview Found
         </div>
       )}
+      {firstLoad && <Skeleton className="absolute size-full aspect-video" />}
     </div>
   );
 }

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

@@ -1,5 +1,4 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import TimelineEventOverlay from "../../overlay/TimelineDataOverlay";
 import { useApiHost } from "@/api";
 import useSWR from "swr";
 import { FrigateConfig } from "@/types/frigateConfig";
@@ -8,7 +7,7 @@ import { Preview } from "@/types/preview";
 import PreviewPlayer, { PreviewController } from "../PreviewPlayer";
 import { DynamicVideoController } from "./DynamicVideoController";
 import HlsVideoPlayer from "../HlsVideoPlayer";
-import { TimeRange, Timeline } from "@/types/timeline";
+import { TimeRange } from "@/types/timeline";
 
 /**
  * Dynamically switches between video playback and scrubbing preview player.
@@ -45,9 +44,6 @@ export default function DynamicVideoPlayer({
   const playerRef = useRef<HTMLVideoElement | null>(null);
   const [previewController, setPreviewController] =
     useState<PreviewController | null>(null);
-  const [focusedItem, setFocusedItem] = useState<Timeline | undefined>(
-    undefined,
-  );
   const controller = useMemo(() => {
     if (!config || !playerRef.current || !previewController) {
       return undefined;
@@ -59,7 +55,7 @@ export default function DynamicVideoPlayer({
       previewController,
       (config.cameras[camera]?.detect?.annotation_offset || 0) / 1000,
       isScrubbing ? "scrubbing" : "playback",
-      setFocusedItem,
+      () => {},
     );
     // we only want to fire once when players are ready
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -164,14 +160,7 @@ export default function DynamicVideoPlayer({
 
           setIsLoading(false);
         }}
-      >
-        {config && focusedItem && (
-          <TimelineEventOverlay
-            timeline={focusedItem}
-            cameraConfig={config.cameras[camera]}
-          />
-        )}
-      </HlsVideoPlayer>
+      />
       <PreviewPlayer
         className={`${isScrubbing || isLoading ? "visible" : "hidden"} ${className}`}
         camera={camera}