diff --git a/app/packages/core/src/components/Modal/VideoLooker.tsx b/app/packages/core/src/components/Modal/VideoLooker.tsx index 9c8f9b0cd2..e5c7467a1a 100644 --- a/app/packages/core/src/components/Modal/VideoLooker.tsx +++ b/app/packages/core/src/components/Modal/VideoLooker.tsx @@ -50,31 +50,27 @@ export const VideoLookerReact = (props: VideoLookerReactProps) => { ); }; -const TimelineController = ({ - looker, - totalFrames, -}: { - looker: VideoLooker; - totalFrames: number; -}) => { - const { getName } = useDefaultTimelineNameImperative(); - const timelineName = React.useMemo(() => getName(), [getName]); +const TimelineController = React.memo( + ({ looker, totalFrames }: { looker: VideoLooker; totalFrames: number }) => { + const { getName } = useDefaultTimelineNameImperative(); + const timelineName = React.useMemo(() => getName(), [getName]); - useCreateTimeline({ - name: timelineName, - config: totalFrames - ? { - totalFrames, - loop: true, - } - : undefined, - optOutOfAnimation: true, - }); + useCreateTimeline({ + name: timelineName, + config: totalFrames + ? { + totalFrames, + loop: true, + } + : undefined, + optOutOfAnimation: true, + }); - const { pause, play } = useTimeline(timelineName); + const { pause, play } = useTimeline(timelineName); - fos.useEventHandler(looker, "pause", pause); - fos.useEventHandler(looker, "play", play); + fos.useEventHandler(looker, "pause", pause); + fos.useEventHandler(looker, "play", play); - return null; -}; + return null; + } +); diff --git a/app/packages/looker/src/lookers/video.ts b/app/packages/looker/src/lookers/video.ts index af4405e3ba..d1f94328b4 100644 --- a/app/packages/looker/src/lookers/video.ts +++ b/app/packages/looker/src/lookers/video.ts @@ -1,5 +1,5 @@ import { setFrameNumberAtom } from "@fiftyone/playback"; -import { getDefaultStore } from "jotai"; +import { jotaiStore } from "@fiftyone/state/src/jotai"; import { getVideoElements } from "../elements"; import { VIDEO_SHORTCUTS } from "../elements/common"; import { getFrameNumber } from "../elements/util"; @@ -353,7 +353,7 @@ export class VideoLooker extends AbstractLooker { } if (this.state.config.enableTimeline) { - getDefaultStore().set(setFrameNumberAtom, { + jotaiStore.set(setFrameNumberAtom, { name: `timeline-${this.state.config.sampleId}`, newFrameNumber: this.state.frameNumber, }); diff --git a/app/packages/playback/src/lib/state.ts b/app/packages/playback/src/lib/state.ts index ba410c67f3..92425444df 100644 --- a/app/packages/playback/src/lib/state.ts +++ b/app/packages/playback/src/lib/state.ts @@ -319,7 +319,7 @@ export const setFrameNumberAtom = atom( ) => { const subscribers = get(_subscribers(name)); - if (!subscribers) { + if (!subscribers || subscribers.size === 0) { set(_frameNumbers(name), newFrameNumber); return; }