From aea4e77d69324bec43344cde46b0457703817f35 Mon Sep 17 00:00:00 2001
From: Nicolas Mowen <nickmowen213@gmail.com>
Date: Wed, 1 May 2024 10:24:21 -0600
Subject: [PATCH] motion video controls handle current time better

---
 web/src/views/events/EventView.tsx | 61 ++++++++++++++++--------------
 1 file changed, 32 insertions(+), 29 deletions(-)

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}
+      />
     </>
   );
 }