Merge pull request #5309 from voxel51/fix/video-looker-range-error

fix video looker range error
voxel51 · Dec 20, 2024 · e5771c6 · e5771c6
2 parents 50970e9 + b9ab1be
commit e5771c6
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 27 deletions.
diff --git 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
@@ -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<VideoState, VideoSample> {
     }
 
     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
@@ -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;
     }