Show motion playback on page initially (blakeblackshear#11196)

* motion video controls handle current time better * Make sure state is updated
guxiaoqi2007 · May 2, 2024 · 28dd871 · 28dd871
1 parent 2e63941
commit 28dd871
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 34 deletions.
diff --git 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
@@ -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;
-
-  if (wasPlaying) {
-  setPlaying(false);
-  }
+ <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);
+ }
 
-  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}
+ />
  </>
  );
 }