[feat] seek video and update frame

examples/worldview/src/features/renderer/index.js

@@ -7,6 +7,7 @@ export {
   signalRendering,
   signalPreviewing,
   stopVideo,
+  seekTime,
   filenameChange,
   formatChange,
   formatConfigsChange,

examples/worldview/src/features/renderer/rendererMiddleware.js

@@ -6,6 +6,7 @@ import {
   PreviewEncoder,
   GifEncoder
 } from '@hubble.gl/core';
+import {updateFrame} from '../timeline/timelineSlice';
 
 import {
   setupRenderer,
@@ -14,6 +15,7 @@ import {
   signalRendering,
   signalPreviewing,
   stopVideo,
+  seekTime,
   encoderSettingsSelector,
   busySelector,
   durationSelector
@@ -99,6 +101,20 @@ export const rendererMiddleware = store => {
         }
         break;
       }
+      case seekTime.type: {
+        if (!busySelector(store.getState()) && adapter && adapter.scene) {
+          adapter.seek(action.payload);
+          const sceneFrame = Object.entries(adapter.scene.keyframes).reduce(
+            (frame, [key, keyframe]) => {
+              frame[key] = keyframe.getFrame();
+              return frame;
+            },
+            {}
+          );
+          store.dispatch(updateFrame(sceneFrame));
+        }
+        break;
+      }
       default: {
         break;
       }

examples/worldview/src/features/renderer/rendererSlice.js

@@ -11,6 +11,9 @@ export const previewVideo = createAction('renderer/previewVideo');
 /** @param payload: getCameraKeyframes, onStop */
 export const renderVideo = createAction('renderer/renderVideo');
 
+/** @param payload: timeMs, getCameraKeyframes, getKeyframes */
+export const seekTime = createAction('renderer/seekTime');
+
 /** @param payload: boolean */
 export const signalRendering = createAction('renderer/signalRendering', busy => {
   if (busy) return {payload: 'rendering'};

examples/worldview/src/features/timeline/timelineSlice.js

@@ -4,7 +4,8 @@ import {createSlice} from '@reduxjs/toolkit';
 const initialState = {
   cameraKeyframes: undefined, // keyframe object
   filterKeyframes: undefined, // keyframe object
-  layerKeyframes: {} // name: keyframe object
+  layerKeyframes: {}, // name: keyframe object
+  frame: {}
 };
 
 const timelineSlice = createSlice({
@@ -14,14 +15,16 @@ const timelineSlice = createSlice({
     updateCameraKeyframes: (state, action) => void (state.cameraKeyframes = action.payload),
     updateFilterKeyframes: (state, action) => void (state.filterKeyframes = action.payload),
     updateLayerKeyframes: (state, action) =>
-      void (state.layerKeyframes = {...state.layerKeyframes, ...action.payload})
+      void (state.layerKeyframes = {...state.layerKeyframes, ...action.payload}),
+    updateFrame: (state, action) => void (state.frame = action.payload)
   }
 });
 
 export const {
   updateCameraKeyframes,
   updateFilterKeyframes,
-  updateLayerKeyframes
+  updateLayerKeyframes,
+  updateFrame
 } = timelineSlice.actions;
 
 export default timelineSlice.reducer;
@@ -33,3 +36,4 @@ export default timelineSlice.reducer;
 export const cameraKeyframeSelector = state => state.hubbleGl.timeline.cameraKeyframes;
 export const filterKeyframeSelector = state => state.hubbleGl.timeline.filterKeyframes;
 export const layerKeyframeSelector = state => state.hubbleGl.timeline.layerKeyframes;
+export const frameSelector = state => state.hubbleGl.timeline.frame;

modules/core/docs/deck-adapter.md

@@ -47,10 +47,14 @@ Start rendering.
 
 Parameters:
 
-* **`getCameraKeyframes` (`() => CameraKeyframes`, Optional).**
+* **`getCameraKeyframes` (`() => CameraKeyframes`, Optional) - Default: `undefined`.**
 
 This function is used to access the camera's keyframes, and is called just prior to rendering.
 
+* **`getKeyframes` (`() => Object<string, Keyframes>`, Optional) - Default: `undefined`.**
+
+This function is called after the last frame is rendered and a file is created for download. It does not get called when a render is interrupted with `stop()`.
+
 * **`Encoder` (`typeof FrameEncoder`, Optional) - Default: `PreviewEncoder`.**
 
 Provide a FrameEncoder class for capturing deck canvas. See [Encoders Overview](/modules/core/docs/encoder) for options.
@@ -61,10 +65,6 @@ See [FrameEncoder](/modules/core/docs/encoder/frame-encoder#constructor-1) for i
 
 * **`onStop` (`() => void`, Optional) - Default: `undefined`.**
 
-* **`getKeyframes` (`() => Object<string, Keyframes>`, Optional) - Default: `undefined`.**
-
-This function is called after the last frame is rendered and a file is created for download. It does not get called when a render is interrupted with `stop()`.
-
 ##### `stop(callback)`
 
 Interrupt rendering and saves partial result. This is useful for handling user interruptions.
@@ -73,6 +73,22 @@ Parameters:
 
 * `callback` (`() => void`, Optional) - Callback indicating the rendering is finished.
 
+##### `seek({timeMs, getCameraKeyframes, getKeyframes})`
+
+Move time to set a new position. Useful for peeking at different times in an animation without rendering.
+
+Parameters:
+
+* **`timeMs` (`number`)**
+
+* **`getCameraKeyframes` (`() => CameraKeyframes`, Optional) - Default: `undefined`.**
+
+This function is used to access the camera's keyframes, and is called just prior to rendering.
+
+* **`getKeyframes` (`() => Object<string, Keyframes>`, Optional) - Default: `undefined`.**
+
+This function is called after the last frame is rendered and a file is created for download. It does not get called when a render is interrupted with `stop()`.
+
 ## Source
 
 [modules/main/src/adapters/deck-adapter.js](https://github.com/uber/hubble.gl/blob/master/modules/main/src/adapters/deck-adapter.js)

modules/core/src/adapters/deck-adapter.js

@@ -48,6 +48,7 @@ export default class DeckAdapter {
     this.getProps = this.getProps.bind(this);
     this.render = this.render.bind(this);
     this.stop = this.stop.bind(this);
+    this.seek = this.seek.bind(this);
     this._deckOnLoad = this._deckOnLoad.bind(this);
     this._getViewState = this._getViewState.bind(this);
     this._getLayers = this._getLayers.bind(this);
@@ -108,17 +109,17 @@ export default class DeckAdapter {
   /**
    * @param {Object} params
    * @param {() => import('../keyframes').CameraKeyframes} params.getCameraKeyframes
+   * @param {() => Object<string, import('../keyframes').Keyframes>} params.getKeyframes
    * @param {typeof import('../encoders').FrameEncoder} params.Encoder
    * @param {import('types').FrameEncoderSettings} params.encoderSettings
    * @param {() => void} params.onStop
-   * @param {() => Object<string, import('../keyframes').Keyframes>} params.getKeyframes
    */
   render({
     getCameraKeyframes = undefined,
+    getKeyframes = undefined,
     Encoder = PreviewEncoder,
     encoderSettings = {},
-    onStop = undefined,
-    getKeyframes = undefined
+    onStop = undefined
   }) {
     if (getCameraKeyframes) {
       this.scene.setCameraKeyframes(getCameraKeyframes());
@@ -148,6 +149,24 @@ export default class DeckAdapter {
     this.videoCapture.stop(callback);
   }
 
+  /**
+   * @param {Object} params
+   * @param {number} params.timeMs
+   * @param {() => import('../keyframes').CameraKeyframes} params.getCameraKeyframes
+   * @param {() => Object<string, import('../keyframes').Keyframes>} params.getKeyframes
+   */
+  seek({timeMs, getCameraKeyframes = undefined, getKeyframes = undefined}) {
+    if (this.scene) {
+      if (getCameraKeyframes) {
+        this.scene.setCameraKeyframes(getCameraKeyframes());
+      }
+      if (getKeyframes) {
+        this.scene.setKeyframes(getKeyframes());
+      }
+      this.scene.animationLoop.timeline.setTime(timeMs);
+    }
+  }
+
   async _deckOnLoad(deck) {
     this.deck = deck;