play/pause on space

app/packages/looker/src/elements/common/actions.ts

@@ -2,7 +2,6 @@
  * Copyright 2017-2024, Voxel51, Inc.
  */
 
-import { is } from "immutable";
 import { SCALE_FACTOR } from "../../constants";
 import { ImaVidFramesController } from "../../lookers/imavid/controller";
 import {
@@ -477,18 +476,8 @@ export const playPause: Control<VideoState | ImaVidState> = {
       const isImaVid = (state.config as ImaVidConfig)
         .frameStoreController as ImaVidFramesController;
       if (isImaVid) {
-        const {
-          currentFrameNumber,
-          playing,
-          config: { frameStoreController },
-        } = state as ImaVidState;
-        const reachedEnd =
-          currentFrameNumber >= frameStoreController.totalFrameCount;
-        return {
-          currentFrameNumber: reachedEnd ? 1 : currentFrameNumber,
-          options: { showJSON: false },
-          playing: !playing || reachedEnd,
-        };
+        // do nothing, is handled in React component
+        return {};
       }
 
       const {

app/packages/playback/src/lib/use-create-timeline.ts

@@ -1,4 +1,4 @@
-import { Optional, useEventHandler } from "@fiftyone/state";
+import { Optional, useEventHandler, useKeyDown } from "@fiftyone/state";
 import { useAtomValue, useSetAtom } from "jotai";
 import { useAtomCallback } from "jotai/utils";
 import { useCallback, useEffect, useMemo, useRef } from "react";
@@ -282,6 +282,10 @@ export const useCreateTimeline = (
     )
   );
 
+  /**
+   * This effect synchronizes all timelines with the frame number
+   * on load.
+   */
   useEffect(() => {
     if (!isTimelineInitialized) {
       return;
@@ -292,5 +296,20 @@ export const useCreateTimeline = (
     });
   }, [isTimelineInitialized, refresh]);
 
+  const spaceKeyDownHandler = useCallback(
+    (_, e: KeyboardEvent) => {
+      if (playHeadState === "paused") {
+        play();
+      } else {
+        pause();
+      }
+      e.stopPropagation();
+      e.preventDefault();
+    },
+    [play, pause, playHeadState]
+  );
+
+  useKeyDown(" ", spaceKeyDownHandler, [spaceKeyDownHandler]);
+
   return { isTimelineInitialized, refresh, subscribe };
 };