remotion 4.0.139 → 4.0.140

package/dist/cjs/CompositionManager.d.ts

@@ -54,6 +54,7 @@ export type TSequence = {
     nonce: number;
     loopDisplay: LoopDisplay | undefined;
     stack: string | null;
+    premountDisplay: number | null;
 } & EnhancedTSequenceData;
 export type TRenderAsset = {
     type: 'audio' | 'video';

package/dist/cjs/IFrame.d.ts

@@ -3,4 +3,7 @@ import React from 'react';
  * @description The <IFrame /> can be used like a regular <iframe> HTML tag.
  * @see [Documentation](https://www.remotion.dev/docs/iframe)
  */
-export declare const IFrame: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.IframeHTMLAttributes<HTMLIFrameElement>, HTMLIFrameElement>, "ref"> & React.RefAttributes<HTMLIFrameElement>>;
+export declare const IFrame: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLIFrameElement> & React.IframeHTMLAttributes<HTMLIFrameElement> & {
+    readonly delayRenderRetries?: number | undefined;
+    readonly delayRenderTimeoutInMilliseconds?: number | undefined;
+}, "ref"> & React.RefAttributes<HTMLIFrameElement>>;

package/dist/cjs/IFrame.js

@@ -4,8 +4,11 @@ exports.IFrame = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const delay_render_js_1 = require("./delay-render.js");
-const IFrameRefForwarding = ({ onLoad, onError, ...props }, ref) => {
-    const [handle] = (0, react_1.useState)(() => (0, delay_render_js_1.delayRender)(`Loading <IFrame> with source ${props.src}`));
+const IFrameRefForwarding = ({ onLoad, onError, delayRenderRetries, delayRenderTimeoutInMilliseconds, ...props }, ref) => {
+    const [handle] = (0, react_1.useState)(() => (0, delay_render_js_1.delayRender)(`Loading <IFrame> with source ${props.src}`, {
+        retries: delayRenderRetries !== null && delayRenderRetries !== void 0 ? delayRenderRetries : undefined,
+        timeoutInMilliseconds: delayRenderTimeoutInMilliseconds !== null && delayRenderTimeoutInMilliseconds !== void 0 ? delayRenderTimeoutInMilliseconds : undefined,
+    }));
     const didLoad = (0, react_1.useCallback)((e) => {
         (0, delay_render_js_1.continueRender)(handle);
         onLoad === null || onLoad === void 0 ? void 0 : onLoad(e);

package/dist/cjs/Img.d.ts

@@ -1,8 +1,10 @@
 import React from 'react';
 export type ImgProps = Omit<React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, 'src'> & {
-    maxRetries?: number;
-    pauseWhenLoading?: boolean;
-    src: string;
+    readonly maxRetries?: number;
+    readonly pauseWhenLoading?: boolean;
+    readonly delayRenderRetries?: number;
+    readonly delayRenderTimeoutInMilliseconds?: number;
+    readonly src: string;
 };
 /**
  * @description Works just like a regular HTML img tag. When you use the <Img> tag, Remotion will ensure that the image is loaded before rendering the frame.

package/dist/cjs/Img.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Img = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const SequenceContext_js_1 = require("./SequenceContext.js");
 const cancel_render_js_1 = require("./cancel-render.js");
 const delay_render_js_1 = require("./delay-render.js");
 const prefetch_js_1 = require("./prefetch.js");
@@ -10,10 +11,11 @@ const use_buffer_state_js_1 = require("./use-buffer-state.js");
 function exponentialBackoff(errorCount) {
     return 1000 * 2 ** (errorCount - 1);
 }
-const ImgRefForwarding = ({ onError, maxRetries = 2, src, pauseWhenLoading, ...props }, ref) => {
+const ImgRefForwarding = ({ onError, maxRetries = 2, src, pauseWhenLoading, delayRenderRetries, delayRenderTimeoutInMilliseconds, ...props }, ref) => {
     const imageRef = (0, react_1.useRef)(null);
     const errors = (0, react_1.useRef)({});
     const { delayPlayback } = (0, use_buffer_state_js_1.useBufferState)();
+    const sequenceContext = (0, react_1.useContext)(SequenceContext_js_1.SequenceContext);
     if (!src) {
         throw new Error('No "src" prop was passed to <Img>.');
     }
@@ -68,8 +70,11 @@ const ImgRefForwarding = ({ onError, maxRetries = 2, src, pauseWhenLoading, ...p
             if (process.env.NODE_ENV === 'test') {
                 return;
             }
-            const newHandle = (0, delay_render_js_1.delayRender)('Loading <Img> with src=' + actualSrc);
-            const unblock = pauseWhenLoading
+            const newHandle = (0, delay_render_js_1.delayRender)('Loading <Img> with src=' + actualSrc, {
+                retries: delayRenderRetries !== null && delayRenderRetries !== void 0 ? delayRenderRetries : undefined,
+                timeoutInMilliseconds: delayRenderTimeoutInMilliseconds !== null && delayRenderTimeoutInMilliseconds !== void 0 ? delayRenderTimeoutInMilliseconds : undefined,
+            });
+            const unblock = pauseWhenLoading && !(sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.premounting)
                 ? delayPlayback().unblock
                 : () => undefined;
             const { current } = imageRef;
@@ -98,7 +103,14 @@ const ImgRefForwarding = ({ onError, maxRetries = 2, src, pauseWhenLoading, ...p
                 unblock();
                 (0, delay_render_js_1.continueRender)(newHandle);
             };
-        }, [actualSrc, delayPlayback, pauseWhenLoading]);
+        }, [
+            actualSrc,
+            delayPlayback,
+            delayRenderRetries,
+            delayRenderTimeoutInMilliseconds,
+            pauseWhenLoading,
+            sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.premounting,
+        ]);
     }
     return ((0, jsx_runtime_1.jsx)("img", { ...props, ref: imageRef, src: actualSrc, onError: didGetError }));
 };

package/dist/cjs/RemotionRoot.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 export declare const RemotionRoot: React.FC<{
-    children: React.ReactNode;
-    numberOfAudioTags: number;
+    readonly children: React.ReactNode;
+    readonly numberOfAudioTags: number;
 }>;

package/dist/cjs/RemotionRoot.js

@@ -24,7 +24,8 @@ const RemotionRoot = ({ children, numberOfAudioTags }) => {
     if (typeof window !== 'undefined') {
         // eslint-disable-next-line react-hooks/rules-of-hooks
         (0, react_1.useLayoutEffect)(() => {
-            window.remotion_setFrame = (f, composition) => {
+            window.remotion_setFrame = (f, composition, attempt) => {
+                window.remotion_attempt = attempt;
                 const id = (0, delay_render_js_1.delayRender)(`Setting the current frame to ${f}`);
                 setFrame((s) => ({
                     ...s,

package/dist/cjs/Sequence.d.ts

@@ -2,6 +2,7 @@ import React from 'react';
 import type { LoopDisplay } from './CompositionManager.js';
 export type LayoutAndStyle = {
     layout?: 'absolute-fill';
+    premountFor?: number;
     style?: React.CSSProperties;
     className?: string;
 } | {
@@ -17,11 +18,19 @@ export type SequencePropsWithoutDuration = {
     /**
      * @deprecated For internal use only.
      */
-    loopDisplay?: LoopDisplay;
+    _remotionInternalLoopDisplay?: LoopDisplay;
     /**
      * @deprecated For internal use only.
      */
-    stack?: string;
+    _remotionInternalPremountDisplay?: number | null;
+    /**
+     * @deprecated For internal use only.
+     */
+    _remotionInternalStack?: string;
+    /**
+     * @deprecated For internal use only.
+     */
+    _remotionInternalIsPremounting?: boolean;
 } & LayoutAndStyle;
 export type SequenceProps = {
     durationInFrames?: number;

package/dist/cjs/Sequence.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Sequence = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+/* eslint-disable @typescript-eslint/no-use-before-define */
 const react_1 = require("react");
 const AbsoluteFill_js_1 = require("./AbsoluteFill.js");
 const SequenceContext_js_1 = require("./SequenceContext.js");
@@ -10,7 +11,9 @@ const get_remotion_environment_js_1 = require("./get-remotion-environment.js");
 const nonce_js_1 = require("./nonce.js");
 const timeline_position_state_js_1 = require("./timeline-position-state.js");
 const use_video_config_js_1 = require("./use-video-config.js");
-const SequenceRefForwardingFunction = ({ from = 0, durationInFrames = Infinity, children, name, height, width, showInTimeline = true, loopDisplay, stack, ...other }, ref) => {
+const freeze_js_1 = require("./freeze.js");
+const use_current_frame_1 = require("./use-current-frame");
+const RegularSequenceRefForwardingFunction = ({ from = 0, durationInFrames = Infinity, children, name, height, width, showInTimeline = true, _remotionInternalLoopDisplay: loopDisplay, _remotionInternalStack: stack, _remotionInternalPremountDisplay: premountDisplay, ...other }, ref) => {
     var _a;
     const { layout = 'absolute-fill' } = other;
     const [id] = (0, react_1.useState)(() => String(Math.random()));
@@ -47,6 +50,10 @@ const SequenceRefForwardingFunction = ({ from = 0, durationInFrames = Infinity,
     const actualDurationInFrames = Math.max(0, Math.min(videoConfig.durationInFrames - from, parentSequenceDuration));
     const { registerSequence, unregisterSequence } = (0, react_1.useContext)(SequenceManager_js_1.SequenceManager);
     const { hidden } = (0, react_1.useContext)(SequenceManager_js_1.SequenceVisibilityToggleContext);
+    const premounting = (0, react_1.useMemo)(() => {
+        var _a;
+        return ((_a = parentSequence === null || parentSequence === void 0 ? void 0 : parentSequence.premounting) !== null && _a !== void 0 ? _a : Boolean(other._remotionInternalIsPremounting));
+    }, [other._remotionInternalIsPremounting, parentSequence === null || parentSequence === void 0 ? void 0 : parentSequence.premounting]);
     const contextValue = (0, react_1.useMemo)(() => {
         var _a, _b, _c;
         return {
@@ -57,6 +64,7 @@ const SequenceRefForwardingFunction = ({ from = 0, durationInFrames = Infinity,
             id,
             height: (_b = height !== null && height !== void 0 ? height : parentSequence === null || parentSequence === void 0 ? void 0 : parentSequence.height) !== null && _b !== void 0 ? _b : null,
             width: (_c = width !== null && width !== void 0 ? width : parentSequence === null || parentSequence === void 0 ? void 0 : parentSequence.width) !== null && _c !== void 0 ? _c : null,
+            premounting,
         };
     }, [
         cumulatedFrom,
@@ -66,6 +74,7 @@ const SequenceRefForwardingFunction = ({ from = 0, durationInFrames = Infinity,
         id,
         height,
         width,
+        premounting,
     ]);
     const timelineClipName = (0, react_1.useMemo)(() => {
         return name !== null && name !== void 0 ? name : '';
@@ -87,6 +96,7 @@ const SequenceRefForwardingFunction = ({ from = 0, durationInFrames = Infinity,
             nonce,
             loopDisplay,
             stack: stack !== null && stack !== void 0 ? stack : null,
+            premountDisplay: premountDisplay !== null && premountDisplay !== void 0 ? premountDisplay : null,
         });
         return () => {
             unregisterSequence(id);
@@ -106,6 +116,7 @@ const SequenceRefForwardingFunction = ({ from = 0, durationInFrames = Infinity,
         nonce,
         loopDisplay,
         stack,
+        premountDisplay,
     ]);
     // Ceil to support floats
     // https://github.com/remotion-dev/remotion/issues/2958
@@ -133,6 +144,35 @@ const SequenceRefForwardingFunction = ({ from = 0, durationInFrames = Infinity,
     }
     return ((0, jsx_runtime_1.jsx)(SequenceContext_js_1.SequenceContext.Provider, { value: contextValue, children: content === null ? null : other.layout === 'none' ? (content) : ((0, jsx_runtime_1.jsx)(AbsoluteFill_js_1.AbsoluteFill, { ref: ref, style: defaultStyle, className: other.className, children: content })) }));
 };
+const RegularSequence = (0, react_1.forwardRef)(RegularSequenceRefForwardingFunction);
+const PremountedSequenceRefForwardingFunction = (props, ref) => {
+    const frame = (0, use_current_frame_1.useCurrentFrame)();
+    if (props.layout === 'none') {
+        throw new Error('`<Sequence>` with `premountFor` prop does not support layout="none"');
+    }
+    const { style: passedStyle, from = 0, premountFor = 0, name, ...otherProps } = props;
+    const premountingActive = frame < from && frame >= from - premountFor;
+    const style = (0, react_1.useMemo)(() => {
+        var _a;
+        return {
+            ...passedStyle,
+            opacity: premountingActive ? 0 : 1,
+            pointerEvents: premountingActive
+                ? 'none'
+                : (_a = passedStyle === null || passedStyle === void 0 ? void 0 : passedStyle.pointerEvents) !== null && _a !== void 0 ? _a : undefined,
+        };
+    }, [premountingActive, passedStyle]);
+    return ((0, jsx_runtime_1.jsx)(freeze_js_1.Freeze, { frame: from, active: premountingActive, children: (0, jsx_runtime_1.jsx)(exports.Sequence, { ref: ref, from: from, style: style, _remotionInternalPremountDisplay: premountFor, _remotionInternalIsPremounting: premountingActive, ...otherProps }) }));
+};
+const PremountedSequence = (0, react_1.forwardRef)(PremountedSequenceRefForwardingFunction);
+const SequenceRefForwardingFunction = (props, ref) => {
+    if (props.layout !== 'none' &&
+        props.premountFor &&
+        !(0, get_remotion_environment_js_1.getRemotionEnvironment)().isRendering) {
+        return (0, jsx_runtime_1.jsx)(PremountedSequence, { ...props, ref: ref });
+    }
+    return (0, jsx_runtime_1.jsx)(RegularSequence, { ...props, ref: ref });
+};
 /**
  * @description A component that time-shifts its children and wraps them in an absolutely positioned <div>.
  * @see [Documentation](https://www.remotion.dev/docs/sequence)

package/dist/cjs/SequenceContext.d.ts

@@ -8,4 +8,5 @@ export type SequenceContextType = {
     id: string;
     width: number | null;
     height: number | null;
+    premounting: boolean;
 };

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

@@ -15,6 +15,8 @@ export declare const Audio: React.ForwardRefExoticComponent<Omit<Omit<React.Deta
     toneFrequency?: number | undefined;
     pauseWhenBuffering?: boolean | undefined;
     showInTimeline?: boolean | undefined;
+    delayRenderTimeoutInMilliseconds?: number | undefined;
+    delayRenderRetries?: number | undefined;
 } & RemotionMainAudioProps & {
     /**
      * @deprecated For internal use only

package/dist/cjs/audio/AudioForPreview.js

@@ -78,6 +78,7 @@ const AudioForDevelopmentForwardRefFunction = (props, ref) => {
         id: timelineId,
         stack: _remotionInternalStack,
         showInTimeline,
+        premountDisplay: null,
     });
     (0, use_media_playback_js_1.useMediaPlayback)({
         mediaRef: audioRef,
@@ -87,7 +88,11 @@ const AudioForDevelopmentForwardRefFunction = (props, ref) => {
         onlyWarnForMediaSeekingError: false,
         acceptableTimeshift: acceptableTimeShiftInSeconds !== null && acceptableTimeShiftInSeconds !== void 0 ? acceptableTimeShiftInSeconds : use_media_playback_js_1.DEFAULT_ACCEPTABLE_TIMESHIFT,
     });
-    (0, use_media_buffering_js_1.useMediaBuffering)(audioRef, pauseWhenBuffering);
+    (0, use_media_buffering_js_1.useMediaBuffering)({
+        element: audioRef,
+        shouldBuffer: pauseWhenBuffering,
+        isPremounting: Boolean(sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.premounting),
+    });
     (0, react_1.useImperativeHandle)(ref, () => {
         return audioRef.current;
     }, [audioRef]);

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

@@ -11,6 +11,8 @@ export declare const AudioForRendering: ForwardRefExoticComponent<Omit<React.Det
     toneFrequency?: number | undefined;
     pauseWhenBuffering?: boolean | undefined;
     showInTimeline?: boolean | undefined;
+    delayRenderTimeoutInMilliseconds?: number | undefined;
+    delayRenderRetries?: number | undefined;
 } & {
-    onDuration: (src: string, durationInSeconds: number) => void;
+    readonly onDuration: (src: string, durationInSeconds: number) => void;
 } & RefAttributes<HTMLAudioElement>>;

package/dist/cjs/audio/AudioForRendering.js

@@ -30,7 +30,7 @@ const AudioForRenderingRefForwardingFunction = (props, ref) => {
         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, _remotionInternalNativeLoopPassed, acceptableTimeShiftInSeconds, name, onError, ...nativeProps } = props;
+    const { volume: volumeProp, playbackRate, allowAmplificationDuringRender, onDuration, toneFrequency, _remotionInternalNeedsDurationCalculation, _remotionInternalNativeLoopPassed, acceptableTimeShiftInSeconds, name, onError, delayRenderRetries, delayRenderTimeoutInMilliseconds, ...nativeProps } = props;
     const volume = (0, volume_prop_js_1.evaluateVolume)({
         volume: volumeProp,
         frame: volumePropFrame,
@@ -93,7 +93,10 @@ const AudioForRenderingRefForwardingFunction = (props, ref) => {
         if (!needsToRenderAudioTag) {
             return;
         }
-        const newHandle = (0, delay_render_js_1.delayRender)('Loading <Audio> duration with src=' + src);
+        const newHandle = (0, delay_render_js_1.delayRender)('Loading <Audio> duration with src=' + src, {
+            retries: delayRenderRetries !== null && delayRenderRetries !== void 0 ? delayRenderRetries : undefined,
+            timeoutInMilliseconds: delayRenderTimeoutInMilliseconds !== null && delayRenderTimeoutInMilliseconds !== void 0 ? delayRenderTimeoutInMilliseconds : undefined,
+        });
         const { current } = audioRef;
         const didLoad = () => {
             if (current === null || current === void 0 ? void 0 : current.duration) {
@@ -113,7 +116,13 @@ const AudioForRenderingRefForwardingFunction = (props, ref) => {
             current === null || current === void 0 ? void 0 : current.removeEventListener('loadedmetadata', didLoad);
             (0, delay_render_js_1.continueRender)(newHandle);
         };
-    }, [src, onDuration, needsToRenderAudioTag]);
+    }, [
+        src,
+        onDuration,
+        needsToRenderAudioTag,
+        delayRenderRetries,
+        delayRenderTimeoutInMilliseconds,
+    ]);
     if (!needsToRenderAudioTag) {
         return null;
     }

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

@@ -15,4 +15,6 @@ export type RemotionAudioProps = Omit<React.DetailedHTMLProps<React.AudioHTMLAtt
     toneFrequency?: number;
     pauseWhenBuffering?: boolean;
     showInTimeline?: boolean;
+    delayRenderTimeoutInMilliseconds?: number;
+    delayRenderRetries?: number;
 };

package/dist/cjs/delay-render.d.ts

@@ -1,11 +1,17 @@
 export declare const DELAY_RENDER_CALLSTACK_TOKEN = "The delayRender was called:";
+export declare const DELAY_RENDER_RETRIES_LEFT = "Retries left: ";
+export declare const DELAY_RENDER_RETRY_TOKEN = "- Rendering the frame will be retried.";
+export type DelayRenderOptions = {
+    timeoutInMilliseconds?: number;
+    retries?: number;
+};
 /**
  * @description Call this function to tell Remotion to wait before capturing this frame until data has loaded. Use continueRender() to unblock the render.
  * @param label _optional_ A label to identify the call in case it does time out.
  * @returns {number} An identifier to be passed to continueRender().
  * @see [Documentation](https://www.remotion.dev/docs/delay-render)
  */
-export declare const delayRender: (label?: string) => number;
+export declare const delayRender: (label?: string, options?: DelayRenderOptions) => number;
 /**
  * @description Unblock a render that has been blocked by delayRender()
  * @param handle The return value of delayRender().

package/dist/cjs/delay-render.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.continueRender = exports.delayRender = exports.DELAY_RENDER_CALLSTACK_TOKEN = void 0;
+exports.continueRender = exports.delayRender = exports.DELAY_RENDER_RETRY_TOKEN = exports.DELAY_RENDER_RETRIES_LEFT = exports.DELAY_RENDER_CALLSTACK_TOKEN = void 0;
+const cancel_render_js_1 = require("./cancel-render.js");
 const get_remotion_environment_js_1 = require("./get-remotion-environment.js");
 const truthy_js_1 = require("./truthy.js");
 if (typeof window !== 'undefined') {
@@ -11,6 +12,8 @@ if (typeof window !== 'undefined') {
     window.remotion_delayRenderTimeouts = {};
 }
 exports.DELAY_RENDER_CALLSTACK_TOKEN = 'The delayRender was called:';
+exports.DELAY_RENDER_RETRIES_LEFT = 'Retries left: ';
+exports.DELAY_RENDER_RETRY_TOKEN = '- Rendering the frame will be retried.';
 const defaultTimeout = 30000;
 /**
  * @description Call this function to tell Remotion to wait before capturing this frame until data has loaded. Use continueRender() to unblock the render.
@@ -18,8 +21,8 @@ const defaultTimeout = 30000;
  * @returns {number} An identifier to be passed to continueRender().
  * @see [Documentation](https://www.remotion.dev/docs/delay-render)
  */
-const delayRender = (label) => {
-    var _a, _b, _c;
+const delayRender = (label, options) => {
+    var _a, _b, _c, _d, _e;
     if (typeof label !== 'string' && typeof label !== 'undefined') {
         throw new Error('The label parameter of delayRender() must be a string or undefined, got: ' +
             JSON.stringify(label));
@@ -28,10 +31,11 @@ const delayRender = (label) => {
     handles.push(handle);
     const called = (_b = (_a = Error().stack) === null || _a === void 0 ? void 0 : _a.replace(/^Error/g, '')) !== null && _b !== void 0 ? _b : '';
     if ((0, get_remotion_environment_js_1.getRemotionEnvironment)().isRendering) {
-        const timeoutToUse = typeof window === 'undefined'
+        const timeoutToUse = ((_c = options === null || options === void 0 ? void 0 : options.timeoutInMilliseconds) !== null && _c !== void 0 ? _c : (typeof window === 'undefined'
             ? defaultTimeout
-            : ((_c = window.remotion_puppeteerTimeout) !== null && _c !== void 0 ? _c : defaultTimeout) - 2000;
+            : (_d = window.remotion_puppeteerTimeout) !== null && _d !== void 0 ? _d : defaultTimeout)) - 2000;
         if (typeof window !== 'undefined') {
+            const retriesLeft = ((_e = options === null || options === void 0 ? void 0 : options.retries) !== null && _e !== void 0 ? _e : 0) - (window.remotion_attempt - 1);
             window.remotion_delayRenderTimeouts[handle] = {
                 label: label !== null && label !== void 0 ? label : null,
                 timeout: setTimeout(() => {
@@ -39,12 +43,14 @@ const delayRender = (label) => {
                         `A delayRender()`,
                         label ? `"${label}"` : null,
                         `was called but not cleared after ${timeoutToUse}ms. See https://remotion.dev/docs/timeout for help.`,
+                        retriesLeft > 0 ? exports.DELAY_RENDER_RETRIES_LEFT + retriesLeft : null,
+                        retriesLeft > 0 ? exports.DELAY_RENDER_RETRY_TOKEN : null,
                         exports.DELAY_RENDER_CALLSTACK_TOKEN,
                         called,
                     ]
                         .filter(truthy_js_1.truthy)
                         .join(' ');
-                    throw new Error(message);
+                    (0, cancel_render_js_1.cancelRender)(Error(message));
                 }, timeoutToUse),
             };
         }

package/dist/cjs/freeze.js

@@ -12,6 +12,7 @@ const use_video_config_js_1 = require("./use-video-config.js");
  * @see [Documentation](https://www.remotion.dev/docs/freeze)
  */
 const Freeze = ({ frame: frameToFreeze, children, active = true, }) => {
+    var _a;
     const frame = (0, use_current_frame_js_1.useCurrentFrame)();
     const videoConfig = (0, use_video_config_js_1.useVideoConfig)();
     if (typeof frameToFreeze === 'undefined') {
@@ -36,6 +37,7 @@ const Freeze = ({ frame: frameToFreeze, children, active = true, }) => {
     }, [active, frame]);
     const timelineContext = (0, react_1.useContext)(timeline_position_state_js_1.TimelineContext);
     const sequenceContext = (0, react_1.useContext)(SequenceContext_js_1.SequenceContext);
+    const relativeFrom = (_a = sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.relativeFrom) !== null && _a !== void 0 ? _a : 0;
     const timelineValue = (0, react_1.useMemo)(() => {
         if (!isActive) {
             return timelineContext;
@@ -47,16 +49,10 @@ const Freeze = ({ frame: frameToFreeze, children, active = true, }) => {
                 current: false,
             },
             frame: {
-                [videoConfig.id]: frameToFreeze,
+                [videoConfig.id]: frameToFreeze + relativeFrom,
             },
         };
-    }, [timelineContext, frameToFreeze, isActive, videoConfig.id]);
-    const sequenceValue = (0, react_1.useMemo)(() => {
-        if (isActive) {
-            return null;
-        }
-        return sequenceContext;
-    }, [isActive, sequenceContext]);
-    return ((0, jsx_runtime_1.jsx)(timeline_position_state_js_1.TimelineContext.Provider, { value: timelineValue, children: (0, jsx_runtime_1.jsx)(SequenceContext_js_1.SequenceContext.Provider, { value: sequenceValue, children: children }) }));
+    }, [isActive, timelineContext, videoConfig.id, frameToFreeze, relativeFrom]);
+    return ((0, jsx_runtime_1.jsx)(timeline_position_state_js_1.TimelineContext.Provider, { value: timelineValue, children: children }));
 };
 exports.Freeze = Freeze;

package/dist/cjs/index.d.ts

@@ -33,7 +33,8 @@ declare global {
         remotion_projectName: string;
         remotion_cwd: string;
         remotion_studioServerCommand: string;
-        remotion_setFrame: (frame: number, composition: string) => void;
+        remotion_setFrame: (frame: number, composition: string, attempt: number) => void;
+        remotion_attempt: number;
         remotion_initialFrame: number;
         remotion_proxyPort: number;
         remotion_audioEnabled: boolean;

package/dist/cjs/internals.d.ts

@@ -18,8 +18,8 @@ export declare const Internals: {
     readonly SequenceManager: import("react").Context<import("./SequenceManager.js").SequenceManagerContext>;
     readonly SequenceVisibilityToggleContext: import("react").Context<import("./SequenceManager.js").SequenceVisibilityToggleState>;
     readonly RemotionRoot: import("react").FC<{
-        children: import("react").ReactNode;
-        numberOfAudioTags: number;
+        readonly children: import("react").ReactNode;
+        readonly numberOfAudioTags: number;
     }>;
     readonly useVideo: () => (import("./video-config.js").VideoConfig & {
         component: import("react").LazyExoticComponent<import("react").ComponentType<Record<string, unknown>>>;

package/dist/cjs/loop/index.js

@@ -40,6 +40,6 @@ const Loop = ({ durationInFrames, times = Infinity, children, name, ...props })
             durationInFrames,
         };
     }, [actualTimes, durationInFrames, from]);
-    return ((0, jsx_runtime_1.jsx)(Sequence_js_1.Sequence, { durationInFrames: durationInFrames, from: from, name: name !== null && name !== void 0 ? name : '<Loop>', loopDisplay: loopDisplay, layout: props.layout, style: style, children: children }));
+    return ((0, jsx_runtime_1.jsx)(Sequence_js_1.Sequence, { durationInFrames: durationInFrames, from: from, name: name !== null && name !== void 0 ? name : '<Loop>', _remotionInternalLoopDisplay: loopDisplay, layout: props.layout, style: style, children: children }));
 };
 exports.Loop = Loop;

package/dist/cjs/no-react.d.ts

@@ -29,6 +29,8 @@ export declare const NoReactInternals: {
     bundleMapName: string;
     deserializeJSONWithCustomFields: <T = Record<string, unknown>>(data: string) => T;
     DELAY_RENDER_CALLSTACK_TOKEN: string;
+    DELAY_RENDER_RETRY_TOKEN: string;
+    DELAY_RENDER_ATTEMPT_TOKEN: string;
     getOffthreadVideoSource: ({ src, transparent, currentTime, toneMapped, }: {
         src: string;
         transparent: boolean;

package/dist/cjs/no-react.js

@@ -29,6 +29,8 @@ exports.NoReactInternals = {
     bundleMapName: 'bundle.js.map',
     deserializeJSONWithCustomFields: input_props_serialization_1.deserializeJSONWithCustomFields,
     DELAY_RENDER_CALLSTACK_TOKEN: delay_render_1.DELAY_RENDER_CALLSTACK_TOKEN,
+    DELAY_RENDER_RETRY_TOKEN: delay_render_1.DELAY_RENDER_RETRY_TOKEN,
+    DELAY_RENDER_ATTEMPT_TOKEN: delay_render_1.DELAY_RENDER_RETRIES_LEFT,
     getOffthreadVideoSource: offthread_video_source_1.getOffthreadVideoSource,
     getExpectedMediaFrameUncorrected: get_current_time_1.getExpectedMediaFrameUncorrected,
 };

package/dist/cjs/use-media-buffering.d.ts

@@ -1,2 +1,6 @@
 import type React from 'react';
-export declare const useMediaBuffering: (element: React.RefObject<HTMLVideoElement | HTMLAudioElement>, shouldBuffer: boolean) => void;
+export declare const useMediaBuffering: ({ element, shouldBuffer, isPremounting, }: {
+    element: React.RefObject<HTMLVideoElement | HTMLAudioElement>;
+    shouldBuffer: boolean;
+    isPremounting: boolean;
+}) => void;

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

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useMediaBuffering = void 0;
 const react_1 = require("react");
 const use_buffer_state_1 = require("./use-buffer-state");
-const useMediaBuffering = (element, shouldBuffer) => {
+const useMediaBuffering = ({ element, shouldBuffer, isPremounting, }) => {
     const buffer = (0, use_buffer_state_1.useBufferState)();
     (0, react_1.useEffect)(() => {
         let cleanup = () => undefined;
@@ -14,6 +14,9 @@ const useMediaBuffering = (element, shouldBuffer) => {
         if (!shouldBuffer) {
             return;
         }
+        if (isPremounting) {
+            return;
+        }
         const onWaiting = () => {
             const { unblock } = buffer.delayPlayback();
             const onCanPlay = () => {
@@ -37,6 +40,6 @@ const useMediaBuffering = (element, shouldBuffer) => {
         return () => {
             cleanup();
         };
-    }, [buffer, element, shouldBuffer]);
+    }, [buffer, element, isPremounting, shouldBuffer]);
 };
 exports.useMediaBuffering = useMediaBuffering;

package/dist/cjs/use-media-in-timeline.d.ts

@@ -1,6 +1,6 @@
 import type { RefObject } from 'react';
 import type { VolumeProp } from './volume-prop.js';
-export declare const useMediaInTimeline: ({ volume, mediaVolume, mediaRef, src, mediaType, playbackRate, displayName, id, stack, showInTimeline, }: {
+export declare const useMediaInTimeline: ({ volume, mediaVolume, mediaRef, src, mediaType, playbackRate, displayName, id, stack, showInTimeline, premountDisplay, }: {
     volume: VolumeProp | undefined;
     mediaVolume: number;
     mediaRef: RefObject<HTMLAudioElement | HTMLVideoElement>;
@@ -11,4 +11,5 @@ export declare const useMediaInTimeline: ({ volume, mediaVolume, mediaRef, src,
     id: string;
     stack: string | null;
     showInTimeline: boolean;
+    premountDisplay: number | null;
 }) => void;

package/dist/cjs/use-media-in-timeline.js

@@ -21,7 +21,7 @@ const warnOnce = (message) => {
     console.warn(message);
     didWarn[message] = true;
 };
-const useMediaInTimeline = ({ volume, mediaVolume, mediaRef, src, mediaType, playbackRate, displayName, id, stack, showInTimeline, }) => {
+const useMediaInTimeline = ({ volume, mediaVolume, mediaRef, src, mediaType, playbackRate, displayName, id, stack, showInTimeline, premountDisplay, }) => {
     const videoConfig = (0, use_video_config_js_1.useVideoConfig)();
     const { rootId, audioAndVideoTags } = (0, react_1.useContext)(timeline_position_state_js_1.TimelineContext);
     const parentSequence = (0, react_1.useContext)(SequenceContext_js_1.SequenceContext);
@@ -89,6 +89,7 @@ const useMediaInTimeline = ({ volume, mediaVolume, mediaRef, src, mediaType, pla
             loopDisplay: undefined,
             playbackRate,
             stack,
+            premountDisplay,
         });
         return () => {
             unregisterSequence(id);
@@ -113,6 +114,7 @@ const useMediaInTimeline = ({ volume, mediaVolume, mediaRef, src, mediaType, pla
         displayName,
         stack,
         showInTimeline,
+        premountDisplay,
     ]);
     (0, react_1.useEffect)(() => {
         const tag = {

package/dist/cjs/version.d.ts

@@ -1 +1 @@
-export declare const VERSION = "4.0.139";
+export declare const VERSION = "4.0.140";

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.139';
+exports.VERSION = '4.0.140';

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

@@ -13,6 +13,8 @@ export declare const Video: React.ForwardRefExoticComponent<Omit<Omit<React.Deta
     toneFrequency?: number | undefined;
     pauseWhenBuffering?: boolean | undefined;
     showInTimeline?: boolean | undefined;
+    delayRenderTimeoutInMilliseconds?: number | undefined;
+    delayRenderRetries?: number | undefined;
 } & RemotionMainVideoProps & {
     /**
      * @deprecated For internal use only

package/dist/cjs/video/VideoForPreview.js

@@ -44,6 +44,7 @@ const VideoForDevelopmentRefForwardingFunction = (props, ref) => {
         id: timelineId,
         stack: _remotionInternalStack,
         showInTimeline,
+        premountDisplay: null,
     });
     (0, use_sync_volume_with_media_tag_js_1.useSyncVolumeWithMediaTag)({
         volumePropFrame,
@@ -60,7 +61,11 @@ const VideoForDevelopmentRefForwardingFunction = (props, ref) => {
         onlyWarnForMediaSeekingError,
         acceptableTimeshift: acceptableTimeShiftInSeconds !== null && acceptableTimeShiftInSeconds !== void 0 ? acceptableTimeShiftInSeconds : use_media_playback_js_1.DEFAULT_ACCEPTABLE_TIMESHIFT,
     });
-    (0, use_media_buffering_js_1.useMediaBuffering)(videoRef, pauseWhenBuffering);
+    (0, use_media_buffering_js_1.useMediaBuffering)({
+        element: videoRef,
+        shouldBuffer: pauseWhenBuffering,
+        isPremounting: Boolean(parentSequence === null || parentSequence === void 0 ? void 0 : parentSequence.premounting),
+    });
     const actualFrom = parentSequence
         ? parentSequence.relativeFrom + parentSequence.cumulatedFrom
         : 0;