diff --git a/app/packages/looker/src/elements/common/actions.ts b/app/packages/looker/src/elements/common/actions.ts index c498abd7970..6f25129914e 100644 --- a/app/packages/looker/src/elements/common/actions.ts +++ b/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 = { 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 { diff --git a/app/packages/playback/src/lib/use-create-timeline.ts b/app/packages/playback/src/lib/use-create-timeline.ts index 182f0afd528..b2157e99be2 100644 --- a/app/packages/playback/src/lib/use-create-timeline.ts +++ b/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 }; };