remotion 4.0.59 → 4.0.61

package/dist/cjs/index.d.ts

@@ -98,6 +98,7 @@ export * from './use-video-config.js';
 export * from './version.js';
 export * from './video-config.js';
 export * from './video/index.js';
+export { watchStaticFile } from './watch-static-file.js';
 export declare const Experimental: {
     /**
      * @description This is a special component that will cause Remotion to only partially capture the frame of the video.

package/dist/cjs/index.js

@@ -14,7 +14,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Config = exports.Experimental = exports.useCurrentFrame = exports.staticFile = exports.Series = exports.Sequence = exports.registerRoot = exports.random = exports.prefetch = exports.Loop = exports.interpolate = exports.interpolateColors = exports.Img = exports.getStaticFiles = exports.getRemotionEnvironment = exports.delayRender = exports.continueRender = exports.getInputProps = exports.Composition = exports.cancelRender = void 0;
+exports.Config = exports.Experimental = exports.watchStaticFile = exports.useCurrentFrame = exports.staticFile = exports.Series = exports.Sequence = exports.registerRoot = exports.random = exports.prefetch = exports.Loop = exports.interpolate = exports.interpolateColors = exports.Img = exports.getStaticFiles = exports.getRemotionEnvironment = exports.delayRender = exports.continueRender = exports.getInputProps = exports.Composition = exports.cancelRender = void 0;
 require("./asset-types.js");
 const Clipper_js_1 = require("./Clipper.js");
 const is_player_js_1 = require("./is-player.js");
@@ -69,6 +69,8 @@ __exportStar(require("./use-video-config.js"), exports);
 __exportStar(require("./version.js"), exports);
 __exportStar(require("./video-config.js"), exports);
 __exportStar(require("./video/index.js"), exports);
+var watch_static_file_js_1 = require("./watch-static-file.js");
+Object.defineProperty(exports, "watchStaticFile", { enumerable: true, get: function () { return watch_static_file_js_1.watchStaticFile; } });
 exports.Experimental = {
     /**
      * @description This is a special component that will cause Remotion to only partially capture the frame of the video.

package/dist/cjs/internals.d.ts

@@ -13,6 +13,7 @@ import { validateDimension } from './validation/validate-dimensions.js';
 import { validateDurationInFrames } from './validation/validate-duration-in-frames.js';
 import { validateFps } from './validation/validate-fps.js';
 import type { MediaVolumeContextValue, SetMediaVolumeContextValue } from './volume-position-state.js';
+import type { WatchRemotionStaticFilesPayload } from './watch-static-file.js';
 import { useRemotionContexts } from './wrap-remotion-context.js';
 export declare const Internals: {
     readonly useUnsafeVideoConfig: () => import("./video-config.js").VideoConfig | null;
@@ -144,5 +145,6 @@ export declare const Internals: {
         children?: import("react").ReactNode;
     }>;
     readonly isIosSafari: () => boolean;
+    readonly WATCH_REMOTION_STATIC_FILES: "remotion_staticFilesChanged";
 };
-export type { TComposition, TimelinePosition as Timeline, TCompMetadata, TSequence, TRenderAsset as TAsset, TimelineContextValue, SetTimelineContextValue, CompProps, CompositionManagerContext, MediaVolumeContextValue, SetMediaVolumeContextValue, RemotionEnvironment, SerializedJSONWithCustomFields, };
+export type { TComposition, TimelinePosition as Timeline, TCompMetadata, TSequence, TRenderAsset as TAsset, TimelineContextValue, SetTimelineContextValue, CompProps, CompositionManagerContext, MediaVolumeContextValue, SetMediaVolumeContextValue, RemotionEnvironment, SerializedJSONWithCustomFields, WatchRemotionStaticFilesPayload, };

package/dist/cjs/internals.js

@@ -65,6 +65,7 @@ const validate_fps_js_1 = require("./validation/validate-fps.js");
 const duration_state_js_1 = require("./video/duration-state.js");
 const video_fragment_js_1 = require("./video/video-fragment.js");
 const volume_position_state_js_1 = require("./volume-position-state.js");
+const watch_static_file_js_1 = require("./watch-static-file.js");
 const wrap_remotion_context_js_1 = require("./wrap-remotion-context.js");
 // Mark them as Internals so use don't assume this is public
 // API and are less likely to use it
@@ -130,4 +131,5 @@ exports.Internals = {
     NativeLayersProvider: NativeLayers_js_1.NativeLayersProvider,
     ClipComposition: Composition_js_1.ClipComposition,
     isIosSafari: video_fragment_js_1.isIosSafari,
+    WATCH_REMOTION_STATIC_FILES: watch_static_file_js_1.WATCH_REMOTION_STATIC_FILES,
 };

package/dist/cjs/spring/index.js

@@ -50,14 +50,19 @@ function spring({ frame: passedFrame, fps, config = {}, from = 0, to = 1, durati
                 throw new Error('did not calculate natural duration, this is an error with Remotion. Please report');
             },
         };
-    const frame = (reverse
+    const reverseProcessed = reverse
         ? (passedDurationInFrames !== null && passedDurationInFrames !== void 0 ? passedDurationInFrames : naturalDurationGetter.get()) - passedFrame
-        : passedFrame) - (reverse ? -delay : delay);
+        : passedFrame;
+    const delayProcessed = reverseProcessed + (reverse ? delay : -delay);
+    const durationProcessed = passedDurationInFrames === undefined
+        ? delayProcessed
+        : delayProcessed / (passedDurationInFrames / naturalDurationGetter.get());
+    if (passedDurationInFrames && durationProcessed > passedDurationInFrames) {
+        return to;
+    }
     const spr = (0, spring_utils_js_1.springCalculation)({
         fps,
-        frame: passedDurationInFrames === undefined
-            ? frame
-            : frame / (passedDurationInFrames / naturalDurationGetter.get()),
+        frame: durationProcessed,
         config,
         from,
         to,

package/dist/cjs/spring/measure-spring.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.measureSpring = void 0;
 const validate_fps_js_1 = require("../validation/validate-fps.js");
 const spring_utils_js_1 = require("./spring-utils.js");
+const cache = new Map();
 /**
  * @description The function returns how long it takes for a spring animation to settle
  * @see [Documentation](https://www.remotion.dev/docs/measure-spring)
@@ -26,6 +27,19 @@ function measureSpring({ fps, config = {}, threshold = 0.005, from = 0, to = 1,
     if (threshold < 0) {
         throw new TypeError('Threshold is below 0');
     }
+    const cacheKey = [
+        fps,
+        config.damping,
+        config.mass,
+        config.overshootClamping,
+        config.stiffness,
+        from,
+        to,
+        threshold,
+    ].join('-');
+    if (cache.has(cacheKey)) {
+        return cache.get(cacheKey);
+    }
     (0, validate_fps_js_1.validateFps)(fps, 'to the measureSpring() function', false);
     const range = Math.abs(from - to);
     let frame = 0;
@@ -63,6 +77,7 @@ function measureSpring({ fps, config = {}, threshold = 0.005, from = 0, to = 1,
             finishedFrame = frame + 1;
         }
     }
+    cache.set(cacheKey, finishedFrame);
     return finishedFrame;
 }
 exports.measureSpring = measureSpring;

package/dist/cjs/version.d.ts

@@ -1 +1 @@
-export declare const VERSION = "4.0.59";
+export declare const VERSION = "4.0.61";

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 = '4.0.59';
+exports.VERSION = '4.0.61';

package/dist/cjs/watch-static-file.d.ts

@@ -0,0 +1,17 @@
+import type { StaticFile } from './get-static-files';
+type WatcherCallback = (newData: StaticFile | null) => void;
+export declare const WATCH_REMOTION_STATIC_FILES = "remotion_staticFilesChanged";
+export type WatchRemotionStaticFilesPayload = {
+    files: StaticFile[];
+};
+/**
+ * @description Watch for changes in a specific static file.
+ * @param {string} fileName - The name of the static file to watch for changes.
+ * @param {WatcherCallback} callback - A callback function to be called when the file changes.
+ * @returns {{cancel: () => void}} A function that can be used to cancel the event listener.
+ * @see [Documentation](https://www.remotion.dev/docs/watchstaticfile)
+ */
+export declare const watchStaticFile: (fileName: string, callback: WatcherCallback) => {
+    cancel: () => void;
+};
+export {};

package/dist/cjs/watch-static-file.js

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.watchStaticFile = exports.WATCH_REMOTION_STATIC_FILES = void 0;
+const get_remotion_environment_1 = require("./get-remotion-environment");
+exports.WATCH_REMOTION_STATIC_FILES = 'remotion_staticFilesChanged';
+/**
+ * @description Watch for changes in a specific static file.
+ * @param {string} fileName - The name of the static file to watch for changes.
+ * @param {WatcherCallback} callback - A callback function to be called when the file changes.
+ * @returns {{cancel: () => void}} A function that can be used to cancel the event listener.
+ * @see [Documentation](https://www.remotion.dev/docs/watchstaticfile)
+ */
+const watchStaticFile = (fileName, callback) => {
+    // Check if function is called in Remotion Studio
+    if (!(0, get_remotion_environment_1.getRemotionEnvironment)().isStudio) {
+        console.warn('The API is only available while using the Remotion Studio.');
+        return { cancel: () => undefined };
+    }
+    let prevFileData = window.remotion_staticFiles.find((file) => file.name === fileName);
+    // Check if the specified static file has updated or deleted
+    const checkFile = (event) => {
+        const staticFiles = event.detail.files;
+        // Check for user specified file
+        const newFileData = staticFiles.find((file) => file.name === fileName);
+        if (!newFileData) {
+            // File is deleted
+            if (prevFileData !== undefined) {
+                callback(null);
+            }
+            prevFileData = undefined;
+            return;
+        }
+        if (prevFileData === undefined ||
+            prevFileData.lastModified !== newFileData.lastModified) {
+            callback(newFileData); // File is added or modified
+            prevFileData = newFileData;
+        }
+    };
+    window.addEventListener(exports.WATCH_REMOTION_STATIC_FILES, checkFile);
+    const cancel = () => {
+        return window.removeEventListener(exports.WATCH_REMOTION_STATIC_FILES, checkFile);
+    };
+    return { cancel };
+};
+exports.watchStaticFile = watchStaticFile;

package/dist/esm/index.mjs

@@ -59,7 +59,7 @@ function truthy(value) {
 }
 
 // Automatically generated on publish
-const VERSION = '4.0.59';
+const VERSION = '4.0.61';
 
 const checkMultipleRemotionVersions = () => {
     if (typeof globalThis === 'undefined') {
@@ -3916,6 +3916,47 @@ const validateFrame = ({ allowFloats, durationInFrames, frame, }) => {
     }
 };
 
+const WATCH_REMOTION_STATIC_FILES = 'remotion_staticFilesChanged';
+/**
+ * @description Watch for changes in a specific static file.
+ * @param {string} fileName - The name of the static file to watch for changes.
+ * @param {WatcherCallback} callback - A callback function to be called when the file changes.
+ * @returns {{cancel: () => void}} A function that can be used to cancel the event listener.
+ * @see [Documentation](https://www.remotion.dev/docs/watchstaticfile)
+ */
+const watchStaticFile = (fileName, callback) => {
+    // Check if function is called in Remotion Studio
+    if (!getRemotionEnvironment().isStudio) {
+        console.warn('The API is only available while using the Remotion Studio.');
+        return { cancel: () => undefined };
+    }
+    let prevFileData = window.remotion_staticFiles.find((file) => file.name === fileName);
+    // Check if the specified static file has updated or deleted
+    const checkFile = (event) => {
+        const staticFiles = event.detail.files;
+        // Check for user specified file
+        const newFileData = staticFiles.find((file) => file.name === fileName);
+        if (!newFileData) {
+            // File is deleted
+            if (prevFileData !== undefined) {
+                callback(null);
+            }
+            prevFileData = undefined;
+            return;
+        }
+        if (prevFileData === undefined ||
+            prevFileData.lastModified !== newFileData.lastModified) {
+            callback(newFileData); // File is added or modified
+            prevFileData = newFileData;
+        }
+    };
+    window.addEventListener(WATCH_REMOTION_STATIC_FILES, checkFile);
+    const cancel = () => {
+        return window.removeEventListener(WATCH_REMOTION_STATIC_FILES, checkFile);
+    };
+    return { cancel };
+};
+
 function useRemotionContexts() {
     const compositionManagerCtx = React.useContext(CompositionManager);
     const timelineContext = React.useContext(TimelineContext);
@@ -4023,6 +4064,7 @@ const Internals = {
     NativeLayersProvider,
     ClipComposition,
     isIosSafari,
+    WATCH_REMOTION_STATIC_FILES,
 };
 
 const flattenChildren = (children) => {
@@ -4215,6 +4257,7 @@ function springCalculation({ from = 0, to = 1, frame, fps, config = {}, }) {
     return animation;
 }
 
+const cache = new Map();
 /**
  * @description The function returns how long it takes for a spring animation to settle
  * @see [Documentation](https://www.remotion.dev/docs/measure-spring)
@@ -4238,6 +4281,19 @@ function measureSpring({ fps, config = {}, threshold = 0.005, from = 0, to = 1,
     if (threshold < 0) {
         throw new TypeError('Threshold is below 0');
     }
+    const cacheKey = [
+        fps,
+        config.damping,
+        config.mass,
+        config.overshootClamping,
+        config.stiffness,
+        from,
+        to,
+        threshold,
+    ].join('-');
+    if (cache.has(cacheKey)) {
+        return cache.get(cacheKey);
+    }
     validateFps(fps, 'to the measureSpring() function', false);
     const range = Math.abs(from - to);
     let frame = 0;
@@ -4275,6 +4331,7 @@ function measureSpring({ fps, config = {}, threshold = 0.005, from = 0, to = 1,
             finishedFrame = frame + 1;
         }
     }
+    cache.set(cacheKey, finishedFrame);
     return finishedFrame;
 }
 
@@ -4322,14 +4379,19 @@ function spring({ frame: passedFrame, fps, config = {}, from = 0, to = 1, durati
                 throw new Error('did not calculate natural duration, this is an error with Remotion. Please report');
             },
         };
-    const frame = (reverse
+    const reverseProcessed = reverse
         ? (passedDurationInFrames !== null && passedDurationInFrames !== void 0 ? passedDurationInFrames : naturalDurationGetter.get()) - passedFrame
-        : passedFrame) - (reverse ? -delay : delay);
+        : passedFrame;
+    const delayProcessed = reverseProcessed + (reverse ? delay : -delay);
+    const durationProcessed = passedDurationInFrames === undefined
+        ? delayProcessed
+        : delayProcessed / (passedDurationInFrames / naturalDurationGetter.get());
+    if (passedDurationInFrames && durationProcessed > passedDurationInFrames) {
+        return to;
+    }
     const spr = springCalculation({
         fps,
-        frame: passedDurationInFrames === undefined
-            ? frame
-            : frame / (passedDurationInFrames / naturalDurationGetter.get()),
+        frame: durationProcessed,
         config,
         from,
         to,
@@ -4861,4 +4923,4 @@ const Config = new Proxy(proxyObj, {
     },
 });
 
-export { AbsoluteFill, Audio, Composition, Config, Easing, Experimental, Folder, FolderContext, Freeze, IFrame, Img, Internals, Loop, OffthreadVideo, Sequence, Series, Still, VERSION, Video, cancelRender, continueRender, delayRender, getInputProps, getRemotionEnvironment, getStaticFiles, interpolate, interpolateColors, measureSpring, prefetch, random, registerRoot, spring, staticFile, useCurrentFrame, useVideoConfig };
+export { AbsoluteFill, Audio, Composition, Config, Easing, Experimental, Folder, FolderContext, Freeze, IFrame, Img, Internals, Loop, OffthreadVideo, Sequence, Series, Still, VERSION, Video, cancelRender, continueRender, delayRender, getInputProps, getRemotionEnvironment, getStaticFiles, interpolate, interpolateColors, measureSpring, prefetch, random, registerRoot, spring, staticFile, useCurrentFrame, useVideoConfig, watchStaticFile };

package/dist/esm/version.mjs

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

package/package.json

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