remotion 4.0.60 → 4.0.62

package/dist/cjs/audio/AudioForDevelopment.d.ts

@@ -1,6 +1,6 @@
 import type { ForwardRefExoticComponent, RefAttributes } from 'react';
 import React from 'react';
-export declare const AudioForDevelopment: ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.AudioHTMLAttributes<HTMLAudioElement>, HTMLAudioElement>, "autoPlay" | "controls" | "onEnded" | "nonce" | "onResize" | "onResizeCapture"> & {
+export declare const AudioForDevelopment: ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.AudioHTMLAttributes<HTMLAudioElement>, HTMLAudioElement>, "nonce" | "onEnded" | "onResize" | "onResizeCapture" | "autoPlay" | "controls"> & {
     volume?: import("../volume-prop.js").VolumeProp | undefined;
     playbackRate?: number | undefined;
     acceptableTimeShiftInSeconds?: number | undefined;

package/dist/cjs/audio/AudioForRendering.d.ts

@@ -1,6 +1,6 @@
 import type { ForwardRefExoticComponent, RefAttributes } from 'react';
 import React from 'react';
-export declare const AudioForRendering: ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.AudioHTMLAttributes<HTMLAudioElement>, HTMLAudioElement>, "autoPlay" | "controls" | "onEnded" | "nonce" | "onResize" | "onResizeCapture"> & {
+export declare const AudioForRendering: ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.AudioHTMLAttributes<HTMLAudioElement>, HTMLAudioElement>, "nonce" | "onEnded" | "onResize" | "onResizeCapture" | "autoPlay" | "controls"> & {
     volume?: import("../volume-prop.js").VolumeProp | undefined;
     playbackRate?: number | undefined;
     acceptableTimeShiftInSeconds?: number | undefined;

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.60";
+export declare const VERSION = "4.0.62";

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.60';
+exports.VERSION = '4.0.62';

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

@@ -4,7 +4,7 @@ import type { RemotionMainVideoProps } from './props.js';
  * @description allows you to include a video file in your Remotion project. It wraps the native HTMLVideoElement.
  * @see [Documentation](https://www.remotion.dev/docs/video)
  */
-export declare const Video: (props: Omit<React.DetailedHTMLProps<React.VideoHTMLAttributes<HTMLVideoElement>, HTMLVideoElement>, "autoPlay" | "controls" | "onEnded" | "nonce"> & {
+export declare const Video: (props: Omit<React.DetailedHTMLProps<React.VideoHTMLAttributes<HTMLVideoElement>, HTMLVideoElement>, "nonce" | "onEnded" | "autoPlay" | "controls"> & {
     volume?: import("../volume-prop.js").VolumeProp | undefined;
     playbackRate?: number | undefined;
     acceptableTimeShiftInSeconds?: number | undefined;

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

@@ -1,6 +1,6 @@
 import type { ForwardRefExoticComponent, RefAttributes } from 'react';
 import React from 'react';
-export declare const VideoForDevelopment: ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.VideoHTMLAttributes<HTMLVideoElement>, HTMLVideoElement>, "autoPlay" | "controls" | "onEnded" | "nonce"> & {
+export declare const VideoForDevelopment: ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.VideoHTMLAttributes<HTMLVideoElement>, HTMLVideoElement>, "nonce" | "onEnded" | "autoPlay" | "controls"> & {
     volume?: import("../volume-prop.js").VolumeProp | undefined;
     playbackRate?: number | undefined;
     acceptableTimeShiftInSeconds?: number | undefined;

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

@@ -1,6 +1,6 @@
 import type { ForwardRefExoticComponent, RefAttributes } from 'react';
 import React from 'react';
-export declare const VideoForRendering: ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.VideoHTMLAttributes<HTMLVideoElement>, HTMLVideoElement>, "autoPlay" | "controls" | "onEnded" | "nonce"> & {
+export declare const VideoForRendering: ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.VideoHTMLAttributes<HTMLVideoElement>, HTMLVideoElement>, "nonce" | "onEnded" | "autoPlay" | "controls"> & {
     volume?: import("../volume-prop.js").VolumeProp | undefined;
     playbackRate?: number | undefined;
     acceptableTimeShiftInSeconds?: number | undefined;

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.60';
+const VERSION = '4.0.62';
 
 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.60';
+const VERSION = '4.0.62';
 
 export { VERSION };

package/package.json

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

package/dist/cjs/get-environment.d.ts

@@ -1,3 +0,0 @@
-export type RemotionEnvironment = 'preview' | 'rendering' | 'player-development' | 'player-production';
-export declare const getRemotionEnvironment: () => RemotionEnvironment;
-export declare const useRemotionEnvironment: () => RemotionEnvironment;

package/dist/cjs/get-environment.js

@@ -1,34 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useRemotionEnvironment = exports.getRemotionEnvironment = void 0;
-const is_player_js_1 = require("./is-player.js");
-const getRemotionEnvironment = () => {
-    if (process.env.NODE_ENV === 'production') {
-        if (typeof window !== 'undefined' && window.remotion_isPlayer) {
-            return 'player-production';
-        }
-        return 'rendering';
-    }
-    // The Vitest framework sets NODE_ENV as test.
-    // Right now we don't need to treat it in a special
-    // way which is good - defaulting to `rendering`.
-    if (process.env.NODE_ENV === 'test') {
-        return 'rendering';
-    }
-    if (typeof window !== 'undefined' && window.remotion_isPlayer) {
-        return 'player-development';
-    }
-    return 'preview';
-};
-exports.getRemotionEnvironment = getRemotionEnvironment;
-const useRemotionEnvironment = () => {
-    const isPlayer = (0, is_player_js_1.useIsPlayer)();
-    if (isPlayer) {
-        if (process.env.NODE_ENV === 'production') {
-            return 'player-production';
-        }
-        return 'player-development';
-    }
-    return (0, exports.getRemotionEnvironment)();
-};
-exports.useRemotionEnvironment = useRemotionEnvironment;