From 28dd871d44fe089c9bb7973d540e0d0cf5b12217 Mon Sep 17 00:00:00 2001
From: Nicolas Mowen <nickmowen213@gmail.com>
Date: Wed, 1 May 2024 20:23:03 -0600
Subject: [PATCH] Show motion playback on page initially (#11196)

* motion video controls handle current time better

* Make sure state is updated
---
 web/src/hooks/use-overlay-state.tsx | 10 +++--
 web/src/views/events/EventView.tsx  | 61 +++++++++++++++--------------
 2 files changed, 38 insertions(+), 33 deletions(-)

diff --git a/web/src/hooks/use-overlay-state.tsx b/web/src/hooks/use-overlay-state.tsx
index 656b61bda..391712c6a 100644
--- a/web/src/hooks/use-overlay-state.tsx
+++ b/web/src/hooks/use-overlay-state.tsx
@@ -8,7 +8,8 @@ export function useOverlayState<S>(
 ): [S | undefined, (value: S, replace?: boolean) => void] {
   const location = useLocation();
   const navigate = useNavigate();
-  const currentLocationState = location.state;
+
+  const currentLocationState = useMemo(() => location.state, [location]);
 
   const setOverlayStateValue = useCallback(
     (value: S, replace: boolean = false) => {
@@ -18,7 +19,7 @@ export function useOverlayState<S>(
     },
     // we know that these deps are correct
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [key, navigate],
+    [key, currentLocationState, navigate],
   );
 
   const overlayStateValue = useMemo<S | undefined>(
@@ -39,7 +40,8 @@ export function usePersistedOverlayState<S extends string>(
   );
   const location = useLocation();
   const navigate = useNavigate();
-  const currentLocationState = location.state;
+
+  const currentLocationState = useMemo(() => location.state, [location]);
 
   const setOverlayStateValue = useCallback(
     (value: S | undefined, replace: boolean = false) => {
@@ -50,7 +52,7 @@ export function usePersistedOverlayState<S extends string>(
     },
     // we know that these deps are correct
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [key, navigate],
+    [key, currentLocationState, navigate],
   );
 
   const overlayStateValue = useMemo<S | undefined>(
diff --git a/web/src/views/events/EventView.tsx b/web/src/views/events/EventView.tsx
index 7c33648f0..18f7731dd 100644
--- a/web/src/views/events/EventView.tsx
+++ b/web/src/views/events/EventView.tsx
@@ -805,6 +805,11 @@ function MotionReview({
         return;
       }
 
+      if (nextTimestamp >= timeRange.before - 4) {
+        setPlaying(false);
+        return;
+      }
+
       const handleTimeout = () => {
         setCurrentTime(nextTimestamp);
         timeoutIdRef.current = setTimeout(handleTimeout, 500 / playbackRate);
@@ -818,7 +823,7 @@ function MotionReview({
         }
       };
     }
-  }, [playing, playbackRate, nextTimestamp]);
+  }, [playing, playbackRate, nextTimestamp, setPlaying, timeRange]);
 
   const { alignStartDateToTimeline } = useTimelineUtils({
     segmentDuration,
@@ -962,37 +967,35 @@ function MotionReview({
         )}
       </div>
 
-      {!scrubbing && (
-        <VideoControls
-          className="absolute bottom-16 left-1/2 -translate-x-1/2 bg-secondary"
-          features={{
-            volume: false,
-            seek: true,
-            playbackRate: true,
-          }}
-          isPlaying={playing}
-          playbackRates={[4, 8, 12, 16]}
-          playbackRate={playbackRate}
-          controlsOpen={controlsOpen}
-          setControlsOpen={setControlsOpen}
-          onPlayPause={setPlaying}
-          onSeek={(diff) => {
-            const wasPlaying = playing;
+      <VideoControls
+        className="absolute bottom-16 left-1/2 -translate-x-1/2 bg-secondary"
+        features={{
+          volume: false,
+          seek: true,
+          playbackRate: true,
+        }}
+        isPlaying={playing}
+        show={!scrubbing}
+        playbackRates={[4, 8, 12, 16]}
+        playbackRate={playbackRate}
+        controlsOpen={controlsOpen}
+        setControlsOpen={setControlsOpen}
+        onPlayPause={setPlaying}
+        onSeek={(diff) => {
+          const wasPlaying = playing;
 
-            if (wasPlaying) {
-              setPlaying(false);
-            }
+          if (wasPlaying) {
+            setPlaying(false);
+          }
 
-            setCurrentTime(currentTime + diff);
+          setCurrentTime(currentTime + diff);
 
-            if (wasPlaying) {
-              setTimeout(() => setPlaying(true), 100);
-            }
-          }}
-          onSetPlaybackRate={setPlaybackRate}
-          show={currentTime < timeRange.before - 4}
-        />
-      )}
+          if (wasPlaying) {
+            setTimeout(() => setPlaying(true), 100);
+          }
+        }}
+        onSetPlaybackRate={setPlaybackRate}
+      />
     </>
   );
 }