remotion 3.3.91 → 3.3.92

package/dist/cjs/spring/index.d.ts

@@ -4,6 +4,7 @@ import type { SpringConfig } from './spring-utils.js';
  * @see [Documentation](https://www.remotion.dev/docs/spring)
  * @param {number} frame The current time value. Most of the time you want to pass in the return value of useCurrentFrame.
  * @param {number} fps The framerate at which the animation runs. Pass in the value obtained by `useVideoConfig()`.
+ * @param {?boolean} reverse Whether the animation plays in reverse or not. Default `false`.
  * @param {?Object} config optional object that allows you to customize the physical properties of the animation.
  * @param {number} [config.mass=1] The weight of the spring. If you reduce the mass, the animation becomes faster!
  * @param {number} [config.damping=10] How hard the animation decelerates.
@@ -15,7 +16,7 @@ import type { SpringConfig } from './spring-utils.js';
  * @param {?number} [config.durationThreshold] How close to the end the animation is considered to be done. Default `0.005`
  * @param {?number} [config.delay] Delay the animation for this amount of frames. Default `0`
  */
-export declare function spring({ frame: passedFrame, fps, config, from, to, durationInFrames, durationRestThreshold, delay, }: {
+export declare function spring({ frame: passedFrame, fps, config, from, to, durationInFrames: passedDurationInFrames, durationRestThreshold, delay, reverse, }: {
     frame: number;
     fps: number;
     config?: Partial<SpringConfig>;
@@ -24,6 +25,7 @@ export declare function spring({ frame: passedFrame, fps, config, from, to, dura
     durationInFrames?: number;
     durationRestThreshold?: number;
     delay?: number;
+    reverse?: boolean;
 }): number;
 export { measureSpring } from './measure-spring.js';
 export { SpringConfig } from './spring-utils.js';

package/dist/cjs/spring/index.js

@@ -11,6 +11,7 @@ const spring_utils_js_1 = require("./spring-utils.js");
  * @see [Documentation](https://www.remotion.dev/docs/spring)
  * @param {number} frame The current time value. Most of the time you want to pass in the return value of useCurrentFrame.
  * @param {number} fps The framerate at which the animation runs. Pass in the value obtained by `useVideoConfig()`.
+ * @param {?boolean} reverse Whether the animation plays in reverse or not. Default `false`.
  * @param {?Object} config optional object that allows you to customize the physical properties of the animation.
  * @param {number} [config.mass=1] The weight of the spring. If you reduce the mass, the animation becomes faster!
  * @param {number} [config.damping=10] How hard the animation decelerates.
@@ -22,29 +23,42 @@ const spring_utils_js_1 = require("./spring-utils.js");
  * @param {?number} [config.durationThreshold] How close to the end the animation is considered to be done. Default `0.005`
  * @param {?number} [config.delay] Delay the animation for this amount of frames. Default `0`
  */
-function spring({ frame: passedFrame, fps, config = {}, from = 0, to = 1, durationInFrames, durationRestThreshold, delay = 0, }) {
-    (0, validation_spring_duration_js_1.validateSpringDuration)(durationInFrames);
+function spring({ frame: passedFrame, fps, config = {}, from = 0, to = 1, durationInFrames: passedDurationInFrames, durationRestThreshold, delay = 0, reverse = false, }) {
+    (0, validation_spring_duration_js_1.validateSpringDuration)(passedDurationInFrames);
     (0, validate_frame_js_1.validateFrame)({
         frame: passedFrame,
         durationInFrames: Infinity,
         allowFloats: true,
     });
     (0, validate_fps_js_1.validateFps)(fps, 'to spring()', false);
-    const durationRatio = durationInFrames === undefined
-        ? 1
-        : durationInFrames /
-            (0, measure_spring_js_1.measureSpring)({
-                fps,
-                config,
-                from,
-                to,
-                threshold: durationRestThreshold,
-            });
-    // Delay the spring by telling the calculation we're at an earlier frame.
-    const frame = passedFrame - delay;
+    const needsToCalculateNaturalDuration = reverse || typeof passedDurationInFrames !== 'undefined';
+    const naturalDuration = needsToCalculateNaturalDuration
+        ? (0, measure_spring_js_1.measureSpring)({
+            fps,
+            config,
+            from,
+            to,
+            threshold: durationRestThreshold,
+        })
+        : undefined;
+    const naturalDurationGetter = needsToCalculateNaturalDuration
+        ? {
+            get: () => naturalDuration,
+        }
+        : {
+            get: () => {
+                throw new Error('did not calculate natural duration, this is an error with Remotion. Please report');
+            },
+        };
+    const frame = reverse
+        ? (passedDurationInFrames !== null && passedDurationInFrames !== void 0 ? passedDurationInFrames : naturalDurationGetter.get()) - passedFrame
+        : passedFrame;
     const spr = (0, spring_utils_js_1.springCalculation)({
         fps,
-        frame: frame / durationRatio,
+        frame: (passedDurationInFrames === undefined
+            ? frame
+            : frame / (passedDurationInFrames / naturalDurationGetter.get())) -
+            delay,
         config,
         from,
         to,

package/dist/cjs/use-media-playback.js

@@ -51,12 +51,21 @@ const useMediaPlayback = ({ mediaRef, src, mediaType, playbackRate: localPlaybac
                 (0, warn_about_non_seekable_media_js_1.warnAboutNonSeekableMedia)(mediaRef.current, onlyWarnForMediaSeekingError ? 'console-warning' : 'console-error');
             }
         }
+        // Only perform a seek if the time is not already the same.
+        // Chrome rounds to 6 digits, so 0.033333333 -> 0.033333,
+        // therefore a threshold is allowed.
+        // Refer to the https://github.com/remotion-dev/video-buffering-example
+        // which is fixed by only seeking conditionally.
+        const makesSenseToSeek = Math.abs(mediaRef.current.currentTime - shouldBeTime) > 0.00001;
         if (!playing || absoluteFrame === 0) {
-            mediaRef.current.currentTime = shouldBeTime;
+            if (makesSenseToSeek) {
+                mediaRef.current.currentTime = shouldBeTime;
+            }
         }
         if (mediaRef.current.paused && !mediaRef.current.ended && playing) {
-            const { current } = mediaRef;
-            current.currentTime = shouldBeTime;
+            if (makesSenseToSeek) {
+                mediaRef.current.currentTime = shouldBeTime;
+            }
             (0, play_and_handle_not_allowed_error_js_1.playAndHandleNotAllowedError)(mediaRef, mediaType);
         }
     }, [

package/dist/cjs/version.d.ts

@@ -1 +1 @@
-export declare const VERSION = "3.3.91";
+export declare const VERSION = "3.3.92";

package/dist/cjs/version.js

@@ -2,4 +2,4 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.VERSION = void 0;
 // Automatically generated on publish
-exports.VERSION = '3.3.91';
+exports.VERSION = '3.3.92';

package/dist/cjs/video/props.d.ts

@@ -14,6 +14,7 @@ export declare type OffthreadVideoImageFormat = 'png' | 'jpeg';
 export declare type OffthreadVideoProps = {
     src: string;
     className?: string;
+    id?: string;
     style?: React.CSSProperties;
     volume?: VolumeProp;
     playbackRate?: number;

package/dist/esm/index.mjs

@@ -58,7 +58,7 @@ function truthy(value) {
 }
 
 // Automatically generated on publish
-const VERSION = '3.3.91';
+const VERSION = '3.3.92';
 
 const checkMultipleRemotionVersions = () => {
     if (typeof globalThis === 'undefined') {
@@ -1505,12 +1505,21 @@ const useMediaPlayback = ({ mediaRef, src, mediaType, playbackRate: localPlaybac
                 warnAboutNonSeekableMedia(mediaRef.current, onlyWarnForMediaSeekingError ? 'console-warning' : 'console-error');
             }
         }
+        // Only perform a seek if the time is not already the same.
+        // Chrome rounds to 6 digits, so 0.033333333 -> 0.033333,
+        // therefore a threshold is allowed.
+        // Refer to the https://github.com/remotion-dev/video-buffering-example
+        // which is fixed by only seeking conditionally.
+        const makesSenseToSeek = Math.abs(mediaRef.current.currentTime - shouldBeTime) > 0.00001;
         if (!playing || absoluteFrame === 0) {
-            mediaRef.current.currentTime = shouldBeTime;
+            if (makesSenseToSeek) {
+                mediaRef.current.currentTime = shouldBeTime;
+            }
         }
         if (mediaRef.current.paused && !mediaRef.current.ended && playing) {
-            const { current } = mediaRef;
-            current.currentTime = shouldBeTime;
+            if (makesSenseToSeek) {
+                mediaRef.current.currentTime = shouldBeTime;
+            }
             playAndHandleNotAllowedError(mediaRef, mediaType);
         }
     }, [
@@ -3562,6 +3571,7 @@ function measureSpring({ fps, config = {}, threshold = 0.005, from = 0, to = 1,
  * @see [Documentation](https://www.remotion.dev/docs/spring)
  * @param {number} frame The current time value. Most of the time you want to pass in the return value of useCurrentFrame.
  * @param {number} fps The framerate at which the animation runs. Pass in the value obtained by `useVideoConfig()`.
+ * @param {?boolean} reverse Whether the animation plays in reverse or not. Default `false`.
  * @param {?Object} config optional object that allows you to customize the physical properties of the animation.
  * @param {number} [config.mass=1] The weight of the spring. If you reduce the mass, the animation becomes faster!
  * @param {number} [config.damping=10] How hard the animation decelerates.
@@ -3573,29 +3583,42 @@ function measureSpring({ fps, config = {}, threshold = 0.005, from = 0, to = 1,
  * @param {?number} [config.durationThreshold] How close to the end the animation is considered to be done. Default `0.005`
  * @param {?number} [config.delay] Delay the animation for this amount of frames. Default `0`
  */
-function spring({ frame: passedFrame, fps, config = {}, from = 0, to = 1, durationInFrames, durationRestThreshold, delay = 0, }) {
-    validateSpringDuration(durationInFrames);
+function spring({ frame: passedFrame, fps, config = {}, from = 0, to = 1, durationInFrames: passedDurationInFrames, durationRestThreshold, delay = 0, reverse = false, }) {
+    validateSpringDuration(passedDurationInFrames);
     validateFrame({
         frame: passedFrame,
         durationInFrames: Infinity,
         allowFloats: true,
     });
     validateFps(fps, 'to spring()', false);
-    const durationRatio = durationInFrames === undefined
-        ? 1
-        : durationInFrames /
-            measureSpring({
-                fps,
-                config,
-                from,
-                to,
-                threshold: durationRestThreshold,
-            });
-    // Delay the spring by telling the calculation we're at an earlier frame.
-    const frame = passedFrame - delay;
+    const needsToCalculateNaturalDuration = reverse || typeof passedDurationInFrames !== 'undefined';
+    const naturalDuration = needsToCalculateNaturalDuration
+        ? measureSpring({
+            fps,
+            config,
+            from,
+            to,
+            threshold: durationRestThreshold,
+        })
+        : undefined;
+    const naturalDurationGetter = needsToCalculateNaturalDuration
+        ? {
+            get: () => naturalDuration,
+        }
+        : {
+            get: () => {
+                throw new Error('did not calculate natural duration, this is an error with Remotion. Please report');
+            },
+        };
+    const frame = reverse
+        ? (passedDurationInFrames !== null && passedDurationInFrames !== void 0 ? passedDurationInFrames : naturalDurationGetter.get()) - passedFrame
+        : passedFrame;
     const spr = springCalculation({
         fps,
-        frame: frame / durationRatio,
+        frame: (passedDurationInFrames === undefined
+            ? frame
+            : frame / (passedDurationInFrames / naturalDurationGetter.get())) -
+            delay,
         config,
         from,
         to,

package/dist/esm/version.mjs

@@ -1,4 +1,4 @@
 // Automatically generated on publish
-const VERSION = '3.3.91';
+const VERSION = '3.3.92';
 
 export { VERSION };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "remotion",
-  "version": "3.3.91",
+  "version": "3.3.92",
   "description": "Render videos in React",
   "main": "dist/cjs/index.js",
   "types": "dist/cjs/index.d.ts",