remotion 4.0.63 → 4.0.66

package/dist/cjs/audio/AudioForRendering.js

@@ -24,7 +24,12 @@ const AudioForRenderingRefForwardingFunction = (props, ref) => {
     const id = (0, react_1.useMemo)(() => {
         var _a;
         return `audio-${(0, random_js_1.random)((_a = props.src) !== null && _a !== void 0 ? _a : '')}-${sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.relativeFrom}-${sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.cumulatedFrom}-${sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.durationInFrames}`;
-    }, [props.src, sequenceContext]);
+    }, [
+        props.src,
+        sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.relativeFrom,
+        sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.cumulatedFrom,
+        sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.durationInFrames,
+    ]);
     const { volume: volumeProp, playbackRate, allowAmplificationDuringRender, onDuration, toneFrequency, _remotionInternalNeedsDurationCalculation, acceptableTimeShiftInSeconds, ...nativeProps } = props;
     const volume = (0, volume_prop_js_1.evaluateVolume)({
         volume: volumeProp,

package/dist/cjs/spring/index.js

@@ -57,7 +57,7 @@ function spring({ frame: passedFrame, fps, config = {}, from = 0, to = 1, durati
     const durationProcessed = passedDurationInFrames === undefined
         ? delayProcessed
         : delayProcessed / (passedDurationInFrames / naturalDurationGetter.get());
-    if (passedDurationInFrames && durationProcessed > passedDurationInFrames) {
+    if (passedDurationInFrames && delayProcessed > passedDurationInFrames) {
         return to;
     }
     const spr = (0, spring_utils_js_1.springCalculation)({

package/dist/cjs/version.d.ts

@@ -1 +1 @@
-export declare const VERSION = "4.0.63";
+export declare const VERSION = "4.0.66";

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.63';
+exports.VERSION = '4.0.66';

package/dist/esm/index.mjs

@@ -59,7 +59,7 @@ function truthy(value) {
 }
 
 // Automatically generated on publish
-const VERSION = '4.0.63';
+const VERSION = '4.0.66';
 
 const checkMultipleRemotionVersions = () => {
     if (typeof globalThis === 'undefined') {
@@ -318,11 +318,11 @@ const CompositionManager = createContext({
     unregisterComposition: () => undefined,
     registerFolder: () => undefined,
     unregisterFolder: () => undefined,
-    currentComposition: null,
-    setCurrentComposition: () => undefined,
     setCurrentCompositionMetadata: () => undefined,
     folders: [],
     currentCompositionMetadata: null,
+    canvasContent: null,
+    setCanvasContent: () => undefined,
 });
 
 const problematicCharacters = {
@@ -515,6 +515,31 @@ const EditorPropsProvider = ({ children }) => {
     return (jsx(EditorPropsContext.Provider, { value: ctx, children: children }));
 };
 
+const validCodecs = [
+    'h264',
+    'h265',
+    'vp8',
+    'vp9',
+    'mp3',
+    'aac',
+    'wav',
+    'prores',
+    'h264-mkv',
+    'gif',
+];
+
+function validateDefaultCodec(defaultCodec, location) {
+    if (typeof defaultCodec === 'undefined') {
+        return;
+    }
+    if (typeof defaultCodec !== 'string') {
+        throw new TypeError(`The "defaultCodec" prop ${location} must be a string, but you passed a value of type ${typeof defaultCodec}.`);
+    }
+    if (!validCodecs.includes(defaultCodec)) {
+        throw new Error(`The "defaultCodec" prop ${location} must be one of ${validCodecs.join(', ')}, but you passed ${defaultCodec}.`);
+    }
+}
+
 function validateDimension(amount, nameOfProp, location) {
     if (typeof amount !== 'number') {
         throw new Error(`The "${nameOfProp}" prop ${location} must be a number, but you passed a value of type ${typeof amount}`);
@@ -570,6 +595,25 @@ function validateFps(fps, location, isGif) {
     }
 }
 
+const validateCalculated = ({ composition, calculated, }) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h;
+    const calculateMetadataErrorLocation = `calculated by calculateMetadata() for the composition "${composition.id}"`;
+    const defaultErrorLocation = `of the "<Composition />" component with the id "${composition.id}"`;
+    const width = (_b = (_a = calculated === null || calculated === void 0 ? void 0 : calculated.width) !== null && _a !== void 0 ? _a : composition.width) !== null && _b !== void 0 ? _b : undefined;
+    validateDimension(width, 'width', (calculated === null || calculated === void 0 ? void 0 : calculated.width) ? calculateMetadataErrorLocation : defaultErrorLocation);
+    const height = (_d = (_c = calculated === null || calculated === void 0 ? void 0 : calculated.height) !== null && _c !== void 0 ? _c : composition.height) !== null && _d !== void 0 ? _d : undefined;
+    validateDimension(height, 'height', (calculated === null || calculated === void 0 ? void 0 : calculated.height) ? calculateMetadataErrorLocation : defaultErrorLocation);
+    const fps = (_f = (_e = calculated === null || calculated === void 0 ? void 0 : calculated.fps) !== null && _e !== void 0 ? _e : composition.fps) !== null && _f !== void 0 ? _f : null;
+    validateFps(fps, (calculated === null || calculated === void 0 ? void 0 : calculated.fps) ? calculateMetadataErrorLocation : defaultErrorLocation, false);
+    const durationInFrames = (_h = (_g = calculated === null || calculated === void 0 ? void 0 : calculated.durationInFrames) !== null && _g !== void 0 ? _g : composition.durationInFrames) !== null && _h !== void 0 ? _h : null;
+    validateDurationInFrames(durationInFrames, {
+        allowFloats: false,
+        component: `of the "<Composition />" component with the id "${composition.id}"`,
+    });
+    const defaultCodec = calculated === null || calculated === void 0 ? void 0 : calculated.defaultCodec;
+    validateDefaultCodec(defaultCodec, calculateMetadataErrorLocation);
+    return { width, height, fps, durationInFrames, defaultCodec };
+};
 const resolveVideoConfig = ({ composition, editorProps: editorPropsOrUndefined, signal, inputProps, }) => {
     var _a, _b, _c, _d, _e, _f, _g;
     const calculatedProm = composition.calculateMetadata
@@ -592,7 +636,7 @@ const resolveVideoConfig = ({ composition, editorProps: editorPropsOrUndefined,
         'then' in calculatedProm) {
         return calculatedProm.then((c) => {
             var _a, _b;
-            const { height, width, durationInFrames, fps } = validateCalculated({
+            const { height, width, durationInFrames, fps, defaultCodec } = validateCalculated({
                 calculated: c,
                 composition,
             });
@@ -604,6 +648,7 @@ const resolveVideoConfig = ({ composition, editorProps: editorPropsOrUndefined,
                 id: composition.id,
                 defaultProps: (_a = composition.defaultProps) !== null && _a !== void 0 ? _a : {},
                 props: (_b = c.props) !== null && _b !== void 0 ? _b : fallbackProps,
+                defaultCodec: defaultCodec !== null && defaultCodec !== void 0 ? defaultCodec : null,
             };
         });
     }
@@ -617,39 +662,29 @@ const resolveVideoConfig = ({ composition, editorProps: editorPropsOrUndefined,
             id: composition.id,
             defaultProps: (_d = composition.defaultProps) !== null && _d !== void 0 ? _d : {},
             props: fallbackProps,
+            defaultCodec: null,
         };
     }
     return {
         ...data,
         id: composition.id,
         defaultProps: (_e = composition.defaultProps) !== null && _e !== void 0 ? _e : {},
-        props: (_g = (_f = calculatedProm.props) !== null && _f !== void 0 ? _f : composition.defaultProps) !== null && _g !== void 0 ? _g : {},
+        props: (_f = calculatedProm.props) !== null && _f !== void 0 ? _f : fallbackProps,
+        defaultCodec: (_g = calculatedProm.defaultCodec) !== null && _g !== void 0 ? _g : null,
     };
 };
-const validateCalculated = ({ composition, calculated, }) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h;
-    const calculateMetadataErrorLocation = `calculated by calculateMetadata() for the composition "${composition.id}"`;
-    const defaultErrorLocation = `of the "<Composition />" component with the id "${composition.id}"`;
-    const width = (_b = (_a = calculated === null || calculated === void 0 ? void 0 : calculated.width) !== null && _a !== void 0 ? _a : composition.width) !== null && _b !== void 0 ? _b : undefined;
-    validateDimension(width, 'width', (calculated === null || calculated === void 0 ? void 0 : calculated.width) ? calculateMetadataErrorLocation : defaultErrorLocation);
-    const height = (_d = (_c = calculated === null || calculated === void 0 ? void 0 : calculated.height) !== null && _c !== void 0 ? _c : composition.height) !== null && _d !== void 0 ? _d : undefined;
-    validateDimension(height, 'height', (calculated === null || calculated === void 0 ? void 0 : calculated.height) ? calculateMetadataErrorLocation : defaultErrorLocation);
-    const fps = (_f = (_e = calculated === null || calculated === void 0 ? void 0 : calculated.fps) !== null && _e !== void 0 ? _e : composition.fps) !== null && _f !== void 0 ? _f : null;
-    validateFps(fps, (calculated === null || calculated === void 0 ? void 0 : calculated.fps) ? calculateMetadataErrorLocation : defaultErrorLocation, false);
-    const durationInFrames = (_h = (_g = calculated === null || calculated === void 0 ? void 0 : calculated.durationInFrames) !== null && _g !== void 0 ? _g : composition.durationInFrames) !== null && _h !== void 0 ? _h : null;
-    validateDurationInFrames(durationInFrames, {
-        allowFloats: false,
-        component: `of the "<Composition />" component with the id "${composition.id}"`,
-    });
-    return { width, height, fps, durationInFrames };
-};
 
 const ResolveCompositionContext = createContext(null);
 const resolveCompositionsRef = createRef();
+const needsResolution = (composition) => {
+    return Boolean(composition.calculateMetadata);
+};
 const ResolveCompositionConfig = ({ children }) => {
     const [currentRenderModalComposition, setCurrentRenderModalComposition] = useState(null);
-    const { compositions, currentComposition, currentCompositionMetadata } = useContext(CompositionManager);
-    const selectedComposition = compositions.find((c) => c.id === currentComposition);
+    const { compositions, canvasContent, currentCompositionMetadata } = useContext(CompositionManager);
+    const selectedComposition = compositions.find((c) => canvasContent &&
+        canvasContent.type === 'composition' &&
+        canvasContent.compositionId === c.id);
     const renderModalComposition = compositions.find((c) => c.id === currentRenderModalComposition);
     const { props: allEditorProps } = useContext(EditorPropsContext);
     const [resolvedConfigs, setResolvedConfigs] = useState({});
@@ -725,6 +760,7 @@ const ResolveCompositionConfig = ({ children }) => {
         }
         return controller;
     }, [currentCompositionMetadata]);
+    const currentComposition = (canvasContent === null || canvasContent === void 0 ? void 0 : canvasContent.type) === 'composition' ? canvasContent.compositionId : null;
     useImperativeHandle(resolveCompositionsRef, () => {
         return {
             setCurrentRenderModalComposition: (id) => {
@@ -781,13 +817,11 @@ const ResolveCompositionConfig = ({ children }) => {
     }, [compositions, resolvedConfigs]);
     return (jsx(ResolveCompositionContext.Provider, { value: resolvedConfigsIncludingStaticOnes, children: children }));
 };
-const needsResolution = (composition) => {
-    return Boolean(composition.calculateMetadata);
-};
 const useResolvedVideoConfig = (preferredCompositionId) => {
     const context = useContext(ResolveCompositionContext);
     const { props: allEditorProps } = useContext(EditorPropsContext);
-    const { compositions, currentComposition, currentCompositionMetadata } = useContext(CompositionManager);
+    const { compositions, canvasContent, currentCompositionMetadata } = useContext(CompositionManager);
+    const currentComposition = (canvasContent === null || canvasContent === void 0 ? void 0 : canvasContent.type) === 'composition' ? canvasContent.compositionId : null;
     const compositionId = preferredCompositionId !== null && preferredCompositionId !== void 0 ? preferredCompositionId : currentComposition;
     const composition = compositions.find((c) => c.id === compositionId);
     const selectedEditorProps = useMemo(() => {
@@ -807,6 +841,7 @@ const useResolvedVideoConfig = (preferredCompositionId) => {
                     id: composition.id,
                     props: currentCompositionMetadata.props,
                     defaultProps: (_a = composition.defaultProps) !== null && _a !== void 0 ? _a : {},
+                    defaultCodec: currentCompositionMetadata.defaultCodec,
                 },
             };
         }
@@ -828,6 +863,7 @@ const useResolvedVideoConfig = (preferredCompositionId) => {
                             ? {}
                             : (_d = getInputProps()) !== null && _d !== void 0 ? _d : {}),
                     },
+                    defaultCodec: null,
                 },
             };
         }
@@ -839,13 +875,15 @@ const useResolvedVideoConfig = (preferredCompositionId) => {
 };
 
 const useVideo = () => {
-    const context = useContext(CompositionManager);
-    const selected = context.compositions.find((c) => {
-        return c.id === context.currentComposition;
+    var _a;
+    const { canvasContent, compositions, currentCompositionMetadata } = useContext(CompositionManager);
+    const selected = compositions.find((c) => {
+        return ((canvasContent === null || canvasContent === void 0 ? void 0 : canvasContent.type) === 'composition' &&
+            c.id === canvasContent.compositionId);
     });
-    const resolved = useResolvedVideoConfig(context.currentComposition);
+    const resolved = useResolvedVideoConfig((_a = selected === null || selected === void 0 ? void 0 : selected.id) !== null && _a !== void 0 ? _a : null);
     return useMemo(() => {
-        var _a, _b;
+        var _a;
         if (!resolved) {
             return null;
         }
@@ -864,10 +902,10 @@ const useVideo = () => {
             id: selected.id,
             // We override the selected metadata with the metadata that was passed to renderMedia(),
             // and don't allow it to be changed during render anymore
-            ...((_b = context.currentCompositionMetadata) !== null && _b !== void 0 ? _b : {}),
+            ...(currentCompositionMetadata !== null && currentCompositionMetadata !== void 0 ? currentCompositionMetadata : {}),
             component: selected.component,
         };
-    }, [context.currentCompositionMetadata, resolved, selected]);
+    }, [currentCompositionMetadata, resolved, selected]);
 };
 
 const TimelineContext = createContext({
@@ -953,7 +991,7 @@ const useUnsafeVideoConfig = () => {
         if (!video) {
             return null;
         }
-        const { id, durationInFrames, fps, height, width, defaultProps, props } = video;
+        const { id, durationInFrames, fps, height, width, defaultProps, props, defaultCodec, } = video;
         return {
             id,
             width,
@@ -962,6 +1000,7 @@ const useUnsafeVideoConfig = () => {
             durationInFrames: ctxDuration !== null && ctxDuration !== void 0 ? ctxDuration : durationInFrames,
             defaultProps,
             props,
+            defaultCodec,
         };
     }, [ctxDuration, video]);
 };
@@ -1082,7 +1121,9 @@ const SequenceRefForwardingFunction = ({ from = 0, durationInFrames = Infinity,
         nonce,
         loopDisplay,
     ]);
-    const endThreshold = cumulatedFrom + from + durationInFrames - 1;
+    // Ceil to support floats
+    // https://github.com/remotion-dev/remotion/issues/2958
+    const endThreshold = Math.ceil(cumulatedFrom + from + durationInFrames - 1);
     const content = absoluteFrame < cumulatedFrom + from
         ? null
         : absoluteFrame > endThreshold
@@ -1102,7 +1143,7 @@ const SequenceRefForwardingFunction = ({ from = 0, durationInFrames = Infinity,
 };
 /**
  * @description A component that time-shifts its children and wraps them in an absolutely positioned <div>.
- * @see [Documentation](https://www.remotion.dev/docs/sequence]
+ * @see [Documentation](https://www.remotion.dev/docs/sequence)
  */
 const Sequence = forwardRef(SequenceRefForwardingFunction);
 
@@ -1318,10 +1359,18 @@ const prefetch = (src, options) => {
         if (!buf) {
             return;
         }
+        if (!buf.type.startsWith('video/') &&
+            !buf.type.startsWith('audio/') &&
+            !(options === null || options === void 0 ? void 0 : options.contentType)) {
+            console.warn(`Called prefetch() on ${src} which returned a "Content-Type" of ${buf.type}. Prefetched content should have a proper content type (video/... or audio/...) or a contentType passed the options of prefetch(). Otherwise, prefetching will not work properly in all browsers.`);
+        }
+        const actualBlob = (options === null || options === void 0 ? void 0 : options.contentType)
+            ? new Blob([buf], { type: options.contentType })
+            : buf;
         if (method === 'base64') {
-            return blobToBase64(buf);
+            return blobToBase64(actualBlob);
         }
-        return URL.createObjectURL(buf);
+        return URL.createObjectURL(actualBlob);
     })
         .then((url) => {
         if (canceled) {
@@ -1749,33 +1798,6 @@ const getMediaTime = ({ fps, frame, src, playbackRate, startFrom, mediaType, })
 const toSeconds = (time, fps) => {
     return Math.round((time / fps) * 100) / 100;
 };
-const isSubsetOfDuration = (prevStartFrom, newStartFrom, prevDuration, newDuration) => {
-    return (prevStartFrom <= newStartFrom &&
-        prevStartFrom + prevDuration >= newStartFrom + newDuration);
-};
-const useAppendVideoFragment = ({ actualSrc: initialActualSrc, actualFrom: initialActualFrom, duration: initialDuration, fps, }) => {
-    const actualFromRef = useRef(initialActualFrom);
-    const actualDuration = useRef(initialDuration);
-    const actualSrc = useRef(initialActualSrc);
-    if (!isSubsetOfDuration || initialActualSrc !== actualSrc.current) {
-        actualFromRef.current = initialActualFrom;
-        actualDuration.current = initialDuration;
-        actualSrc.current = initialActualSrc;
-    }
-    const appended = appendVideoFragment({
-        actualSrc: actualSrc.current,
-        actualFrom: actualFromRef.current,
-        duration: actualDuration.current,
-        fps,
-    });
-    return appended;
-};
-const isIosSafari = () => {
-    return typeof window === 'undefined'
-        ? false
-        : /iP(ad|od|hone)/i.test(window.navigator.userAgent) &&
-            Boolean(navigator.userAgent.match(/Version\/[\d.]+.*Safari/));
-};
 // https://github.com/remotion-dev/remotion/issues/1655
 const isIOSSafariCase = (actualSrc) => {
     return typeof window === 'undefined'
@@ -1806,6 +1828,33 @@ const appendVideoFragment = ({ actualSrc, actualFrom, duration, fps, }) => {
     actualSrc += `,${toSeconds(duration, fps)}`;
     return actualSrc;
 };
+const isSubsetOfDuration = (prevStartFrom, newStartFrom, prevDuration, newDuration) => {
+    return (prevStartFrom <= newStartFrom &&
+        prevStartFrom + prevDuration >= newStartFrom + newDuration);
+};
+const useAppendVideoFragment = ({ actualSrc: initialActualSrc, actualFrom: initialActualFrom, duration: initialDuration, fps, }) => {
+    const actualFromRef = useRef(initialActualFrom);
+    const actualDuration = useRef(initialDuration);
+    const actualSrc = useRef(initialActualSrc);
+    if (!isSubsetOfDuration || initialActualSrc !== actualSrc.current) {
+        actualFromRef.current = initialActualFrom;
+        actualDuration.current = initialDuration;
+        actualSrc.current = initialActualSrc;
+    }
+    const appended = appendVideoFragment({
+        actualSrc: actualSrc.current,
+        actualFrom: actualFromRef.current,
+        duration: actualDuration.current,
+        fps,
+    });
+    return appended;
+};
+const isIosSafari = () => {
+    return typeof window === 'undefined'
+        ? false
+        : /iP(ad|od|hone)/i.test(window.navigator.userAgent) &&
+            Boolean(navigator.userAgent.match(/Version\/[\d.]+.*Safari/));
+};
 
 const alreadyWarned = {};
 const warnAboutNonSeekableMedia = (ref, type) => {
@@ -2389,6 +2438,7 @@ const continueRender = (handle) => {
 };
 
 const RenderAssetManager = createContext({
+    // Must be undefined, otherwise error in Player
     registerRenderAsset: () => undefined,
     unregisterRenderAsset: () => undefined,
     renderAssets: [],
@@ -2435,8 +2485,13 @@ const AudioForRenderingRefForwardingFunction = (props, ref) => {
     const id = useMemo(() => {
         var _a;
         return `audio-${random((_a = props.src) !== null && _a !== void 0 ? _a : '')}-${sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.relativeFrom}-${sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.cumulatedFrom}-${sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.durationInFrames}`;
-    }, [props.src, sequenceContext]);
-    const { volume: volumeProp, playbackRate, allowAmplificationDuringRender, onDuration, _remotionInternalNeedsDurationCalculation, acceptableTimeShiftInSeconds, ...nativeProps } = props;
+    }, [
+        props.src,
+        sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.relativeFrom,
+        sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.cumulatedFrom,
+        sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.durationInFrames,
+    ]);
+    const { volume: volumeProp, playbackRate, allowAmplificationDuringRender, onDuration, toneFrequency, _remotionInternalNeedsDurationCalculation, acceptableTimeShiftInSeconds, ...nativeProps } = props;
     const volume = evaluateVolume({
         volume: volumeProp,
         frame: volumePropFrame,
@@ -2469,6 +2524,7 @@ const AudioForRenderingRefForwardingFunction = (props, ref) => {
             mediaFrame: frame,
             playbackRate: (_a = props.playbackRate) !== null && _a !== void 0 ? _a : 1,
             allowAmplificationDuringRender: allowAmplificationDuringRender !== null && allowAmplificationDuringRender !== void 0 ? allowAmplificationDuringRender : false,
+            toneFrequency: toneFrequency !== null && toneFrequency !== void 0 ? toneFrequency : null,
         });
         return () => unregisterRenderAsset(id);
     }, [
@@ -2484,6 +2540,7 @@ const AudioForRenderingRefForwardingFunction = (props, ref) => {
         playbackRate,
         props.playbackRate,
         allowAmplificationDuringRender,
+        toneFrequency,
     ]);
     const { src } = props;
     // The <audio> tag is only rendered if the duration needs to be calculated for the `loop`
@@ -2578,6 +2635,8 @@ const AudioRefForwardingFunction = (props, ref) => {
  */
 const Audio = forwardRef(AudioRefForwardingFunction);
 
+const getRegex$1 = () => /^([a-zA-Z0-9-])+$/g;
+const isFolderNameValid = (name) => name.match(getRegex$1());
 const validateFolderName = (name) => {
     if (name === undefined || name === null) {
         throw new TypeError('You must pass a name to a <Folder />.');
@@ -2589,8 +2648,6 @@ const validateFolderName = (name) => {
         throw new Error(`Folder name can only contain a-z, A-Z, 0-9 and -. You passed ${name}`);
     }
 };
-const getRegex$1 = () => /^([a-zA-Z0-9-])+$/g;
-const isFolderNameValid = (name) => name.match(getRegex$1());
 
 const FolderContext = createContext({
     folderName: null,
@@ -2693,13 +2750,13 @@ const useLazyComponent = (compProps) => {
     return lazy;
 };
 
+const getRegex = () => /^([a-zA-Z0-9-])+$/g;
+const isCompositionIdValid = (id) => id.match(getRegex());
 const validateCompositionId = (id) => {
     if (!isCompositionIdValid(id)) {
         throw new Error(`Composition id can only contain a-z, A-Z, 0-9 and -. You passed ${id}`);
     }
 };
-const getRegex = () => /^([a-zA-Z0-9-])+$/g;
-const isCompositionIdValid = (id) => id.match(getRegex());
 const invalidCompositionErrorMessage = `Composition ID must match ${String(getRegex())}`;
 
 const validateDefaultAndInputProps = (defaultProps, name, compositionId) => {
@@ -2714,6 +2771,20 @@ const validateDefaultAndInputProps = (defaultProps, name, compositionId) => {
     }
 };
 
+const ClipComposition = ({ children }) => {
+    const { clipRegion } = useContext(NativeLayersContext);
+    const style = useMemo(() => {
+        return {
+            display: 'flex',
+            flexDirection: 'row',
+            opacity: clipRegion === 'hide' ? 0 : 1,
+            clipPath: clipRegion && clipRegion !== 'hide'
+                ? `polygon(${clipRegion.x}px ${clipRegion.y}px, ${clipRegion.x}px ${clipRegion.height + clipRegion.y}px, ${clipRegion.width + clipRegion.x}px ${clipRegion.height + clipRegion.y}px, ${clipRegion.width + clipRegion.x}px ${clipRegion.y}px)`
+                : undefined,
+        };
+    }, [clipRegion]);
+    return jsx(AbsoluteFill, { style: style, children: children });
+};
 const Fallback = () => {
     useEffect(() => {
         const fallback = delayRender('Waiting for Root component to unsuspend');
@@ -2799,20 +2870,6 @@ const Composition = ({ width, height, fps, durationInFrames, id, defaultProps, s
     }
     return null;
 };
-const ClipComposition = ({ children }) => {
-    const { clipRegion } = useContext(NativeLayersContext);
-    const style = useMemo(() => {
-        return {
-            display: 'flex',
-            flexDirection: 'row',
-            opacity: clipRegion === 'hide' ? 0 : 1,
-            clipPath: clipRegion && clipRegion !== 'hide'
-                ? `polygon(${clipRegion.x}px ${clipRegion.y}px, ${clipRegion.x}px ${clipRegion.height + clipRegion.y}px, ${clipRegion.width + clipRegion.x}px ${clipRegion.height + clipRegion.y}px, ${clipRegion.width + clipRegion.x}px ${clipRegion.y}px)`
-                : undefined,
-        };
-    }, [clipRegion]);
-    return jsx(AbsoluteFill, { style: style, children: children });
-};
 
 // Taken from https://github.com/facebook/react-native/blob/0b9ea60b4fee8cacc36e7160e31b91fc114dbc0d/Libraries/Animated/src/bezier.js
 const NEWTON_ITERATIONS = 4;
@@ -3191,8 +3248,8 @@ const CompositionManagerProvider = ({ children, numberOfAudioTags }) => {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const [compositions, setCompositions] = useState([]);
     const currentcompositionsRef = useRef(compositions);
-    const [currentComposition, setCurrentComposition] = useState(null);
     const [folders, setFolders] = useState([]);
+    const [canvasContent, setCanvasContent] = useState(null);
     const [currentCompositionMetadata, setCurrentCompositionMetadata] = useState(null);
     const updateCompositions = useCallback((
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -3241,29 +3298,32 @@ const CompositionManagerProvider = ({ children, numberOfAudioTags }) => {
             getCompositions: () => currentcompositionsRef.current,
         };
     }, []);
-    const composition = compositions.find((c) => c.id === currentComposition);
+    const composition = compositions.find((c) => (canvasContent === null || canvasContent === void 0 ? void 0 : canvasContent.type) === 'composition'
+        ? c.id === canvasContent.compositionId
+        : null);
     const contextValue = useMemo(() => {
         return {
             compositions,
             registerComposition,
             unregisterComposition,
-            currentComposition,
-            setCurrentComposition,
             folders,
             registerFolder,
             unregisterFolder,
             currentCompositionMetadata,
             setCurrentCompositionMetadata,
+            canvasContent,
+            setCanvasContent,
         };
     }, [
         compositions,
         registerComposition,
         unregisterComposition,
-        currentComposition,
         folders,
         registerFolder,
         unregisterFolder,
         currentCompositionMetadata,
+        canvasContent,
+        setCanvasContent,
     ]);
     return (jsx(CompositionManager.Provider, { value: contextValue, children: jsx(SequenceManagerProvider, { children: jsx(RenderAssetManagerProvider, { children: jsx(ResolveCompositionConfig, { children: jsx(SharedAudioContextProvider, { numberOfAudioTags: numberOfAudioTags, component: (_a = composition === null || composition === void 0 ? void 0 : composition.component) !== null && _a !== void 0 ? _a : null, children: children }) }) }) }) }));
 };
@@ -3861,6 +3921,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);
@@ -3904,12 +4005,11 @@ const RemotionContextProvider = (props) => {
     return (jsx(CanUseRemotionHooks.Provider, { value: contexts.canUseRemotionHooksContext, children: jsx(NonceContext.Provider, { value: contexts.nonceContext, children: jsx(NativeLayersContext.Provider, { value: contexts.nativeLayersContext, children: jsx(PreloadContext.Provider, { value: contexts.preloadContext, children: jsx(CompositionManager.Provider, { value: contexts.compositionManagerCtx, children: jsx(SequenceManager.Provider, { value: contexts.sequenceManagerContext, children: jsx(RenderAssetManager.Provider, { value: contexts.renderAssetManagerContext, children: jsx(ResolveCompositionContext.Provider, { value: contexts.resolveCompositionContext, children: jsx(TimelineContext.Provider, { value: contexts.timelineContext, children: jsx(SetTimelineContext.Provider, { value: contexts.setTimelineContext, children: jsx(SequenceContext.Provider, { value: contexts.sequenceContext, children: children }) }) }) }) }) }) }) }) }) }) }));
 };
 
-const Timeline = TimelinePosition;
 // Mark them as Internals so use don't assume this is public
 // API and are less likely to use it
 const Internals = {
     useUnsafeVideoConfig,
-    Timeline,
+    Timeline: TimelinePosition,
     CompositionManager,
     SequenceManager,
     RemotionRoot,
@@ -3968,6 +4068,8 @@ const Internals = {
     DATE_TOKEN,
     NativeLayersProvider,
     ClipComposition,
+    isIosSafari,
+    WATCH_REMOTION_STATIC_FILES,
 };
 
 const flattenChildren = (children) => {
@@ -4004,10 +4106,10 @@ const Series = ({ children }) => {
                 if (castedChild.trim() === '') {
                     return null;
                 }
-                throw new TypeError(`The <Series /> component only accepts a list of <Series.Sequence /> components as it's children, but you passed a string "${castedChild}"`);
+                throw new TypeError(`The <Series /> component only accepts a list of <Series.Sequence /> components as its children, but you passed a string "${castedChild}"`);
             }
             if (castedChild.type !== SeriesSequence) {
-                throw new TypeError(`The <Series /> component only accepts a list of <Series.Sequence /> components as it's children, but got ${castedChild} instead`);
+                throw new TypeError(`The <Series /> component only accepts a list of <Series.Sequence /> components as its children, but got ${castedChild} instead`);
             }
             const debugInfo = `index = ${i}, duration = ${castedChild.props.durationInFrames}`;
             if (!(castedChild === null || castedChild === void 0 ? void 0 : castedChild.props.children)) {
@@ -4160,6 +4262,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)
@@ -4183,6 +4286,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;
@@ -4220,6 +4336,7 @@ function measureSpring({ fps, config = {}, threshold = 0.005, from = 0, to = 1,
             finishedFrame = frame + 1;
         }
     }
+    cache.set(cacheKey, finishedFrame);
     return finishedFrame;
 }
 
@@ -4267,14 +4384,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 && delayProcessed > passedDurationInFrames) {
+        return to;
+    }
     const spr = springCalculation({
         fps,
-        frame: passedDurationInFrames === undefined
-            ? frame
-            : frame / (passedDurationInFrames / naturalDurationGetter.get()),
+        frame: durationProcessed,
         config,
         from,
         to,
@@ -4302,7 +4424,7 @@ const Still = (props) => {
     return React.createElement((Composition), newProps);
 };
 
-const OffthreadVideoForRendering = ({ onError, volume: volumeProp, playbackRate, src, muted, allowAmplificationDuringRender, transparent = false, ...props }) => {
+const OffthreadVideoForRendering = ({ onError, volume: volumeProp, playbackRate, src, muted, allowAmplificationDuringRender, transparent = false, toneFrequency, ...props }) => {
     const absoluteFrame = useTimelinePosition();
     const frame = useCurrentFrame();
     const volumePropsFrame = useFrameForVolumeProp();
@@ -4352,6 +4474,7 @@ const OffthreadVideoForRendering = ({ onError, volume: volumeProp, playbackRate,
             mediaFrame: frame,
             playbackRate: playbackRate !== null && playbackRate !== void 0 ? playbackRate : 1,
             allowAmplificationDuringRender: allowAmplificationDuringRender !== null && allowAmplificationDuringRender !== void 0 ? allowAmplificationDuringRender : false,
+            toneFrequency: toneFrequency !== null && toneFrequency !== void 0 ? toneFrequency : null,
         });
         return () => unregisterRenderAsset(id);
     }, [
@@ -4365,6 +4488,7 @@ const OffthreadVideoForRendering = ({ onError, volume: volumeProp, playbackRate,
         absoluteFrame,
         playbackRate,
         allowAmplificationDuringRender,
+        toneFrequency,
     ]);
     const currentTime = useMemo(() => {
         return (getExpectedMediaFrameUncorrected({
@@ -4400,7 +4524,7 @@ const VideoForDevelopmentRefForwardingFunction = (props, ref) => {
     const parentSequence = useContext(SequenceContext);
     const { volume, muted, playbackRate, onlyWarnForMediaSeekingError, src, onDuration, 
     // @ts-expect-error
-    acceptableTimeShift, acceptableTimeShiftInSeconds, ...nativeProps } = props;
+    acceptableTimeShift, acceptableTimeShiftInSeconds, toneFrequency, ...nativeProps } = props;
     if (typeof acceptableTimeShift !== 'undefined') {
         throw new Error('acceptableTimeShift has been removed. Use acceptableTimeShiftInSeconds instead.');
     }
@@ -4529,7 +4653,7 @@ const OffthreadVideo = (props) => {
     return (jsx(VideoForDevelopment, { onDuration: onDuration, onlyWarnForMediaSeekingError: true, ...withoutTransparent }));
 };
 
-const VideoForRenderingForwardFunction = ({ onError, volume: volumeProp, allowAmplificationDuringRender, playbackRate, onDuration, ...props }, ref) => {
+const VideoForRenderingForwardFunction = ({ onError, volume: volumeProp, allowAmplificationDuringRender, playbackRate, onDuration, toneFrequency, ...props }, ref) => {
     const absoluteFrame = useTimelinePosition();
     const frame = useCurrentFrame();
     const volumePropsFrame = useFrameForVolumeProp();
@@ -4581,6 +4705,7 @@ const VideoForRenderingForwardFunction = ({ onError, volume: volumeProp, allowAm
             mediaFrame: frame,
             playbackRate: playbackRate !== null && playbackRate !== void 0 ? playbackRate : 1,
             allowAmplificationDuringRender: allowAmplificationDuringRender !== null && allowAmplificationDuringRender !== void 0 ? allowAmplificationDuringRender : false,
+            toneFrequency: toneFrequency !== null && toneFrequency !== void 0 ? toneFrequency : null,
         });
         return () => unregisterRenderAsset(id);
     }, [
@@ -4594,6 +4719,7 @@ const VideoForRenderingForwardFunction = ({ onError, volume: volumeProp, allowAm
         absoluteFrame,
         playbackRate,
         allowAmplificationDuringRender,
+        toneFrequency,
     ]);
     useImperativeHandle(ref, () => {
         return videoRef.current;
@@ -4742,7 +4868,7 @@ const VideoForwardingFunction = (props, ref) => {
                 mediaDuration,
                 playbackRate: (_a = props.playbackRate) !== null && _a !== void 0 ? _a : 1,
                 startFrom,
-            }), children: jsx(Video, { ...propsOtherThanLoop, ref: ref }) }));
+            }), layout: "none", children: jsx(Video, { ...propsOtherThanLoop, ref: ref }) }));
     }
     if (typeof startFrom !== 'undefined' || typeof endAt !== 'undefined') {
         validateStartFromProps(startFrom, endAt);
@@ -4763,47 +4889,6 @@ const forward = forwardRef;
  */
 const Video = forward(VideoForwardingFunction);
 
-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 };
-};
-
 checkMultipleRemotionVersions();
 const Experimental = {
     /**

package/dist/esm/version.mjs

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

package/package.json

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