Merge pull request #5368 from voxel51/feat/imavid-configurable-frame-…

…rate

get dynamic groups target frame rate from app config instead of harcoded value

app/packages/core/src/components/Modal/ImaVidLooker.tsx

@@ -37,6 +37,9 @@ export const ImaVidLookerReact = React.memo(
   ({ sample: sampleDataWithExtraParams }: ImaVidLookerReactProps) => {
     const [id] = useState(() => uuid());
     const colorScheme = useRecoilValue(fos.colorScheme);
+    const dynamicGroupsTargetFrameRate = useRecoilValue(
+      fos.dynamicGroupsTargetFrameRate
+    );
 
     const { sample } = sampleDataWithExtraParams;
 
@@ -219,8 +222,9 @@ export const ImaVidLookerReact = React.memo(
       }
 
       return {
-        totalFrames: totalFrameCount,
         loop: (looker as ImaVidLooker).options.loop,
+        targetFrameRate: dynamicGroupsTargetFrameRate,
+        totalFrames: totalFrameCount,
       } as FoTimelineConfig;
     }, [totalFrameCount, (looker as ImaVidLooker).options.loop]);
 

app/packages/looker/src/elements/imavid/index.ts

@@ -4,7 +4,6 @@
 
 import {
   BUFFERING_PAUSE_TIMEOUT,
-  DEFAULT_FRAME_RATE,
   DEFAULT_PLAYBACK_RATE,
   LOOK_AHEAD_MULTIPLIER,
 } from "../../lookers/imavid/constants";
@@ -80,9 +79,9 @@ export class ImaVidElement extends BaseElement<ImaVidState, HTMLImageElement> {
   private canvas: HTMLCanvasElement;
   private ctx: CanvasRenderingContext2D;
   private playBackRate = DEFAULT_PLAYBACK_RATE;
-  // adding a new state to track it because we want to compute it conditionally in renderSelf and not drawFrame
-  private setTimeoutDelay = getMillisecondsFromPlaybackRate(this.playBackRate);
   private frameNumber = 1;
+  private setTimeoutDelay: number;
+  private targetFrameRate: number;
   private isThumbnail: boolean;
   private thumbnailSrc: string;
   /**
@@ -349,7 +348,9 @@ export class ImaVidElement extends BaseElement<ImaVidState, HTMLImageElement> {
 
     const offset = this.isSeeking
       ? 2
-      : DEFAULT_FRAME_RATE * LOOK_AHEAD_MULTIPLIER * frameCountMultiplierWeight;
+      : this.targetFrameRate *
+        LOOK_AHEAD_MULTIPLIER *
+        frameCountMultiplierWeight;
 
     const frameRangeMax = Math.min(
       Math.trunc(currentFrameNumber + offset),
@@ -425,7 +426,7 @@ export class ImaVidElement extends BaseElement<ImaVidState, HTMLImageElement> {
   renderSelf(state: Readonly<ImaVidState>) {
     const {
       options: { playbackRate, loop },
-      config: { thumbnail, src: thumbnailSrc },
+      config: { thumbnail, src: thumbnailSrc, frameRate },
       currentFrameNumber,
       seeking,
       hovering,
@@ -447,10 +448,14 @@ export class ImaVidElement extends BaseElement<ImaVidState, HTMLImageElement> {
     this.isSeeking = seeking;
     this.isThumbnail = thumbnail;
     this.frameNumber = currentFrameNumber;
+    this.targetFrameRate = frameRate;
 
-    if (this.playBackRate !== playbackRate) {
+    if (this.playBackRate !== playbackRate || !this.setTimeoutDelay) {
       this.playBackRate = playbackRate;
-      this.setTimeoutDelay = getMillisecondsFromPlaybackRate(playbackRate);
+      this.setTimeoutDelay = getMillisecondsFromPlaybackRate(
+        frameRate,
+        playbackRate
+      );
     }
 
     // `destroyed` is called when looker is reset

app/packages/looker/src/lookers/imavid/constants.ts

@@ -1,4 +1,3 @@
-export const DEFAULT_FRAME_RATE = 30;
 export const DEFAULT_PLAYBACK_RATE = 1.5;
 export const BUFFERING_PAUSE_TIMEOUT = 250;
 export const BUFFERS_REFRESH_TIMEOUT_YIELD = 500;

app/packages/looker/src/lookers/imavid/controller.ts

@@ -2,7 +2,7 @@ import * as foq from "@fiftyone/relay";
 import { BufferManager } from "@fiftyone/utilities";
 import { Environment, Subscription, fetchQuery } from "relay-runtime";
 import { BufferRange, ImaVidState, StateUpdate } from "../../state";
-import { BUFFERS_REFRESH_TIMEOUT_YIELD, DEFAULT_FRAME_RATE } from "./constants";
+import { BUFFERS_REFRESH_TIMEOUT_YIELD } from "./constants";
 import {
   ImaVidFrameSamples,
   ModalSampleExtendedWithImage,
@@ -12,9 +12,9 @@ import { ImaVidStore } from "./store";
 const BUFFER_METADATA_FETCHING = "fetching";
 
 export class ImaVidFramesController {
-  private frameRate = DEFAULT_FRAME_RATE;
   private mediaField = "filepath";
   private subscription: Subscription;
+  private targetFrameRate: number;
   private timeoutId: number;
 
   public fetchBufferManager = new BufferManager();
@@ -32,6 +32,7 @@ export class ImaVidFramesController {
       page: any;
       key: string;
       totalFrameCountPromise: Promise<number>;
+      targetFrameRate: number;
     }
   ) {
     this.storeBufferManager = new BufferManager([
@@ -40,6 +41,7 @@ export class ImaVidFramesController {
     config.totalFrameCountPromise.then((frameCount) => {
       this.totalFrameCount = frameCount;
     });
+    this.targetFrameRate = config.targetFrameRate;
   }
 
   public setImaVidStateUpdater(updater: StateUpdate<ImaVidState>) {
@@ -150,7 +152,7 @@ export class ImaVidFramesController {
   }
 
   public get currentFrameRate() {
-    return this.frameRate;
+    return this.targetFrameRate;
   }
 
   public get isStoreBufferManagerEmpty() {
@@ -181,15 +183,15 @@ export class ImaVidFramesController {
   }
 
   public setFrameRate(newFrameRate: number) {
-    if (newFrameRate > 24) {
-      throw new Error("max frame rate is 24");
+    if (newFrameRate > 60) {
+      throw new Error("max frame rate is 60");
     }
 
     if (newFrameRate < 1) {
       throw new Error("min frame rate is 1");
     }
 
-    this.frameRate = newFrameRate;
+    this.targetFrameRate = newFrameRate;
   }
 
   public setMediaField(mediaField: string) {

app/packages/looker/src/util.ts

@@ -22,7 +22,6 @@ import {
   ServerError,
   getFetchParameters,
 } from "@fiftyone/utilities";
-import { DEFAULT_FRAME_RATE } from "./lookers/imavid/constants";
 import LookerWorker from "./worker/index.ts?worker&inline";
 
 /**
@@ -254,11 +253,12 @@ export const ensureCanvasSize = (
 };
 
 export const getMillisecondsFromPlaybackRate = (
+  frameRate: number,
   playbackRate: number
 ): number => {
   const normalizedPlaybackRate =
     playbackRate > 1 ? playbackRate * 1.5 : playbackRate;
-  return 1000 / (DEFAULT_FRAME_RATE * normalizedPlaybackRate);
+  return 1000 / (frameRate * normalizedPlaybackRate);
 };
 
 /**