From 5b648e170a456b6175838e0f5025aff2b05e1755 Mon Sep 17 00:00:00 2001
From: Nicolas Mowen <nickmowen213@gmail.com>
Date: Thu, 14 Mar 2024 17:12:02 -0600
Subject: [PATCH] Don't use loading

---
 web/src/components/player/HlsVideoPlayer.tsx    |  3 +++
 .../player/dynamic/DynamicVideoPlayer.tsx       | 17 +++++++++--------
 2 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/web/src/components/player/HlsVideoPlayer.tsx b/web/src/components/player/HlsVideoPlayer.tsx
index 6d6df7268..0ede0ea3c 100644
--- a/web/src/components/player/HlsVideoPlayer.tsx
+++ b/web/src/components/player/HlsVideoPlayer.tsx
@@ -42,6 +42,7 @@ type HlsVideoPlayerProps = {
   onClipEnded?: () => void;
   onPlayerLoaded?: () => void;
   onTimeUpdate?: (time: number) => void;
+  onPlaying?: () => void;
 };
 export default function HlsVideoPlayer({
   className,
@@ -51,6 +52,7 @@ export default function HlsVideoPlayer({
   onClipEnded,
   onPlayerLoaded,
   onTimeUpdate,
+  onPlaying,
 }: HlsVideoPlayerProps) {
   // playback
 
@@ -183,6 +185,7 @@ export default function HlsVideoPlayer({
             setMobileCtrlTimeout(setTimeout(() => setControls(false), 4000));
           }
         }}
+        onPlaying={onPlaying}
         onPause={() => {
           setIsPlaying(false);
 
diff --git a/web/src/components/player/dynamic/DynamicVideoPlayer.tsx b/web/src/components/player/dynamic/DynamicVideoPlayer.tsx
index 90948185f..eaaf3aecf 100644
--- a/web/src/components/player/dynamic/DynamicVideoPlayer.tsx
+++ b/web/src/components/player/dynamic/DynamicVideoPlayer.tsx
@@ -8,7 +8,6 @@ import { Preview } from "@/types/preview";
 import PreviewPlayer, { PreviewController } from "../PreviewPlayer";
 import { DynamicVideoController } from "./DynamicVideoController";
 import HlsVideoPlayer from "../HlsVideoPlayer";
-import { Skeleton } from "@/components/ui/skeleton";
 
 /**
  * Dynamically switches between video playback and scrubbing preview player.
@@ -98,6 +97,12 @@ export default function DynamicVideoPlayer({
 
   // start at correct time
 
+  useEffect(() => {
+    if (isScrubbing) {
+      setIsLoading(true);
+    }
+  }, [isScrubbing]);
+
   const onPlayerLoaded = useCallback(() => {
     if (!controller || !startTimestamp) {
       return;
@@ -112,13 +117,9 @@ export default function DynamicVideoPlayer({
         return;
       }
 
-      if (isLoading) {
-        setIsLoading(false);
-      }
-
       onTimestampUpdate(controller.getProgress(time));
     },
-    [controller, isLoading, onTimestampUpdate],
+    [controller, onTimestampUpdate],
   );
 
   // state of playback player
@@ -168,6 +169,7 @@ export default function DynamicVideoPlayer({
           onTimeUpdate={onTimeUpdate}
           onPlayerLoaded={onPlayerLoaded}
           onClipEnded={onClipEnded}
+          onPlaying={() => setIsLoading(false)}
         >
           {config && focusedItem && (
             <TimelineEventOverlay
@@ -177,9 +179,8 @@ export default function DynamicVideoPlayer({
           )}
         </HlsVideoPlayer>
       </div>
-      {isLoading && !isScrubbing && <Skeleton className="size-full" />}
       <PreviewPlayer
-        className={`${isScrubbing ? "visible" : "hidden"} ${className ?? ""}`}
+        className={`${isScrubbing || isLoading ? "visible" : "hidden"} ${className ?? ""}`}
         camera={camera}
         timeRange={timeRange}
         cameraPreviews={cameraPreviews}