From d7ae0eedf89e14f297093ac5c8042862034cbaeb Mon Sep 17 00:00:00 2001
From: Nicolas Mowen <nickmowen213@gmail.com>
Date: Sun, 14 Apr 2024 14:43:43 -0600
Subject: [PATCH] More UI tweaks (#10974)

* Show loading indicator when switching between preview and recording if it takes a while

* Scroll down to avoid automatic upscroll
---
 .../player/dynamic/DynamicVideoPlayer.tsx         | 15 ++++++++++++---
 web/src/pages/Logs.tsx                            |  3 +++
 2 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/web/src/components/player/dynamic/DynamicVideoPlayer.tsx b/web/src/components/player/dynamic/DynamicVideoPlayer.tsx
index 42dc817ee..d3cf4ee66 100644
--- a/web/src/components/player/dynamic/DynamicVideoPlayer.tsx
+++ b/web/src/components/player/dynamic/DynamicVideoPlayer.tsx
@@ -8,6 +8,7 @@ import PreviewPlayer, { PreviewController } from "../PreviewPlayer";
 import { DynamicVideoController } from "./DynamicVideoController";
 import HlsVideoPlayer from "../HlsVideoPlayer";
 import { TimeRange } from "@/types/timeline";
+import ActivityIndicator from "@/components/indicators/activity-indicator";
 
 /**
  * Dynamically switches between video playback and scrubbing preview player.
@@ -77,6 +78,7 @@ export default function DynamicVideoPlayer({
   // initial state
 
   const [isLoading, setIsLoading] = useState(false);
+  const [loadingTimeout, setLoadingTimeout] = useState<NodeJS.Timeout>();
   const [source, setSource] = useState(
     `${apiHost}vod/${camera}/start/${timeRange.after}/end/${timeRange.before}/master.m3u8`,
   );
@@ -84,8 +86,8 @@ export default function DynamicVideoPlayer({
   // start at correct time
 
   useEffect(() => {
-    if (isScrubbing) {
-      setIsLoading(true);
+    if (!isScrubbing) {
+      setLoadingTimeout(setTimeout(() => setIsLoading(true), 1000));
     }
   }, [isScrubbing]);
 
@@ -133,7 +135,7 @@ export default function DynamicVideoPlayer({
     setSource(
       `${apiHost}vod/${camera}/start/${timeRange.after}/end/${timeRange.before}/master.m3u8`,
     );
-    setIsLoading(true);
+    setLoadingTimeout(setTimeout(() => setIsLoading(true), 1000));
 
     controller.newPlayback({
       recordings: recordings ?? [],
@@ -158,6 +160,10 @@ export default function DynamicVideoPlayer({
             playerRef.current?.pause();
           }
 
+          if (loadingTimeout) {
+            clearTimeout(loadingTimeout);
+          }
+
           setIsLoading(false);
         }}
       />
@@ -172,6 +178,9 @@ export default function DynamicVideoPlayer({
           setPreviewController(previewController);
         }}
       />
+      {isLoading && (
+        <ActivityIndicator className="absolute left-1/2 top-1/2 -translate-x1/2 -translate-y-1/2" />
+      )}
     </>
   );
 }
diff --git a/web/src/pages/Logs.tsx b/web/src/pages/Logs.tsx
index ec860848f..e735d9a6f 100644
--- a/web/src/pages/Logs.tsx
+++ b/web/src/pages/Logs.tsx
@@ -279,6 +279,9 @@ function Logs() {
                 }
               })
               .catch(() => {});
+            contentRef.current?.scrollBy({
+              top: 10,
+            });
           }
         });
         if (node) startObserver.current.observe(node);