remotion 4.1.0-alpha1 → 4.1.0-alpha11

package/dist/esm/index.mjs

@@ -16,13 +16,14 @@ const NativeLayersProvider = ({ children, }) => {
             clipRegion,
         };
     }, [clipRegion, setClipRegion]);
-    useLayoutEffect(() => {
-        if (typeof window !== 'undefined') {
+    if (typeof window !== 'undefined') {
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        useLayoutEffect(() => {
             window.remotion_getClipRegion = () => {
                 return clipRegion;
             };
-        }
-    }, [clipRegion, setClipRegion]);
+        }, [clipRegion, setClipRegion]);
+    }
     return (jsx(NativeLayersContext.Provider, { value: context, children: children }));
 };
 
@@ -58,7 +59,7 @@ function truthy(value) {
 }
 
 // Automatically generated on publish
-const VERSION = '4.1.0-alpha1';
+const VERSION = '4.1.0-alpha11';
 
 const checkMultipleRemotionVersions = () => {
     if (typeof globalThis === 'undefined') {
@@ -292,6 +293,142 @@ const CompositionManager = createContext({
     currentCompositionMetadata: null,
 });
 
+const problematicCharacters = {
+    '%3A': ':',
+    '%2F': '/',
+    '%3F': '?',
+    '%23': '#',
+    '%5B': '[',
+    '%5D': ']',
+    '%40': '@',
+    '%21': '!',
+    '%24': '$',
+    '%26': '&',
+    '%27': "'",
+    '%28': '(',
+    '%29': ')',
+    '%2A': '*',
+    '%2B': '+',
+    '%2C': ',',
+    '%3B': ';',
+};
+const didWarn$1 = {};
+const warnOnce$1 = (message) => {
+    if (didWarn$1[message]) {
+        return;
+    }
+    console.warn(message);
+    didWarn$1[message] = true;
+};
+const includesHexOfUnsafeChar = (path) => {
+    for (const key of Object.keys(problematicCharacters)) {
+        if (path.includes(key)) {
+            return { containsHex: true, hexCode: key };
+        }
+    }
+    return { containsHex: false };
+};
+const trimLeadingSlash = (path) => {
+    if (path.startsWith('/')) {
+        return trimLeadingSlash(path.substring(1));
+    }
+    return path;
+};
+const inner = (path) => {
+    if (typeof window !== 'undefined' && window.remotion_staticBase) {
+        return `${window.remotion_staticBase}/${trimLeadingSlash(path)}`;
+    }
+    return `/${trimLeadingSlash(path)}`;
+};
+const encodeBySplitting = (path) => {
+    const splitBySlash = path.split('/');
+    const encodedArray = splitBySlash.map((element) => {
+        return encodeURIComponent(element);
+    });
+    const merged = encodedArray.join('/');
+    return merged;
+};
+/**
+ * @description Reference a file from the public/ folder. If the file does not appear in the autocomplete, type the path manually.
+ * @see [Documentation](https://www.remotion.dev/docs/staticfile)
+ */
+const staticFile = (path) => {
+    if (path.startsWith('http://') || path.startsWith('https://')) {
+        throw new TypeError(`staticFile() does not support remote URLs - got "${path}". Instead, pass the URL without wrapping it in staticFile(). See: https://remotion.dev/docs/staticfile-remote-urls`);
+    }
+    if (path.startsWith('..') || path.startsWith('./')) {
+        throw new TypeError(`staticFile() does not support relative paths - got "${path}". Instead, pass the name of a file that is inside the public/ folder. See: https://remotion.dev/docs/staticfile-relative-paths`);
+    }
+    if (path.startsWith('/Users') ||
+        path.startsWith('/home') ||
+        path.startsWith('/tmp') ||
+        path.startsWith('/etc') ||
+        path.startsWith('/opt') ||
+        path.startsWith('/var') ||
+        path.startsWith('C:') ||
+        path.startsWith('D:') ||
+        path.startsWith('E:')) {
+        throw new TypeError(`staticFile() does not support absolute paths - got "${path}". Instead, pass the name of a file that is inside the public/ folder. See: https://remotion.dev/docs/staticfile-relative-paths`);
+    }
+    if (path.startsWith('public/')) {
+        throw new TypeError(`Do not include the public/ prefix when using staticFile() - got "${path}". See: https://remotion.dev/docs/staticfile-relative-paths`);
+    }
+    const includesHex = includesHexOfUnsafeChar(path);
+    if (includesHex.containsHex) {
+        warnOnce$1(`WARNING: You seem to pass an already encoded path (path contains ${includesHex.hexCode}). Since Remotion 4.0, the encoding is done by staticFile() itself. You may want to remove a encodeURIComponent() wrapping.`);
+    }
+    const preprocessed = encodeBySplitting(path);
+    const preparsed = inner(preprocessed);
+    if (!preparsed.startsWith('/')) {
+        return `/${preparsed}`;
+    }
+    return preparsed;
+};
+
+// Must keep this file in sync with the one in packages/lambda/src/shared/serialize-props.ts!
+const DATE_TOKEN = 'remotion-date:';
+const FILE_TOKEN = 'remotion-file:';
+const serializeJSONWithDate = ({ data, indent, staticBase, }) => {
+    let customDateUsed = false;
+    let customFileUsed = false;
+    let mapUsed = false;
+    let setUsed = false;
+    const serializedString = JSON.stringify(data, function (key, value) {
+        const item = this[key];
+        if (item instanceof Date) {
+            customDateUsed = true;
+            return `${DATE_TOKEN}${item.toISOString()}`;
+        }
+        if (item instanceof Map) {
+            mapUsed = true;
+            return value;
+        }
+        if (item instanceof Set) {
+            setUsed = true;
+            return value;
+        }
+        if (typeof item === 'string' &&
+            staticBase !== null &&
+            item.startsWith(staticBase)) {
+            customFileUsed = true;
+            return `${FILE_TOKEN}${item.replace(staticBase + '/', '')}`;
+        }
+        return value;
+    }, indent);
+    return { serializedString, customDateUsed, customFileUsed, mapUsed, setUsed };
+};
+const deserializeJSONWithCustomFields = (data) => {
+    return JSON.parse(data, (_, value) => {
+        if (typeof value === 'string' && value.startsWith(DATE_TOKEN)) {
+            return new Date(value.replace(DATE_TOKEN, ''));
+        }
+        if (typeof value === 'string' && value.startsWith(FILE_TOKEN)) {
+            return staticFile(value.replace(FILE_TOKEN, ''));
+        }
+        return value;
+    });
+};
+
 let didWarnSSRImport = false;
 const warnOnceSSRImport = () => {
     if (didWarnSSRImport) {
@@ -315,7 +452,7 @@ const getInputProps = () => {
     if (!param) {
         return {};
     }
-    const parsed = JSON.parse(param);
+    const parsed = deserializeJSONWithCustomFields(param);
     return parsed;
 };
 
@@ -344,7 +481,7 @@ const EditorPropsProvider = ({ children }) => {
     return (jsx(EditorPropsContext.Provider, { value: ctx, children: children }));
 };
 
-const validateDimension = (amount, nameOfProp, location) => {
+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}`);
     }
@@ -360,9 +497,13 @@ const validateDimension = (amount, nameOfProp, location) => {
     if (amount <= 0) {
         throw new TypeError(`The "${nameOfProp}" prop ${location} must be positive, but got ${amount}.`);
     }
-};
+}
 
-const validateDurationInFrames = ({ allowFloats, component, durationInFrames, }) => {
+function validateDurationInFrames(durationInFrames, options) {
+    const { allowFloats, component } = options;
+    if (typeof durationInFrames === 'undefined') {
+        throw new Error(`The "durationInFrames" prop ${component} is missing.`);
+    }
     if (typeof durationInFrames !== 'number') {
         throw new Error(`The "durationInFrames" prop ${component} must be a number, but you passed a value of type ${typeof durationInFrames}`);
     }
@@ -375,21 +516,35 @@ const validateDurationInFrames = ({ allowFloats, component, durationInFrames, })
     if (!Number.isFinite(durationInFrames)) {
         throw new TypeError(`The "durationInFrames" prop ${component} must be finite, but got ${durationInFrames}.`);
     }
-};
+}
 
-const resolveVideoConfig = ({ composition, editorProps: editorPropsOrUndefined, signal, }) => {
-    var _a, _b, _c, _d, _e, _f;
+function validateFps(fps, location, isGif) {
+    if (typeof fps !== 'number') {
+        throw new Error(`"fps" must be a number, but you passed a value of type ${typeof fps} ${location}`);
+    }
+    if (!Number.isFinite(fps)) {
+        throw new Error(`"fps" must be a finite, but you passed ${fps} ${location}`);
+    }
+    if (isNaN(fps)) {
+        throw new Error(`"fps" must not be NaN, but got ${fps} ${location}`);
+    }
+    if (fps <= 0) {
+        throw new TypeError(`"fps" must be positive, but got ${fps} ${location}`);
+    }
+    if (isGif && fps > 50) {
+        throw new TypeError(`The FPS for a GIF cannot be higher than 50. Use the --every-nth-frame option to lower the FPS: https://remotion.dev/docs/render-as-gif`);
+    }
+}
+
+const resolveVideoConfig = ({ composition, editorProps: editorPropsOrUndefined, signal, inputProps, }) => {
+    var _a, _b, _c, _d, _e, _f, _g;
     const calculatedProm = composition.calculateMetadata
         ? composition.calculateMetadata({
             defaultProps: (_a = composition.defaultProps) !== null && _a !== void 0 ? _a : {},
             props: {
                 ...((_b = composition.defaultProps) !== null && _b !== void 0 ? _b : {}),
                 ...(editorPropsOrUndefined !== null && editorPropsOrUndefined !== void 0 ? editorPropsOrUndefined : {}),
-                ...(typeof window === 'undefined' ||
-                    getRemotionEnvironment() === 'player-development' ||
-                    getRemotionEnvironment() === 'player-production'
-                    ? {}
-                    : (_c = getInputProps()) !== null && _c !== void 0 ? _c : {}),
+                ...inputProps,
             },
             abortSignal: signal,
         })
@@ -398,7 +553,7 @@ const resolveVideoConfig = ({ composition, editorProps: editorPropsOrUndefined,
         typeof calculatedProm === 'object' &&
         'then' in calculatedProm) {
         return calculatedProm.then((c) => {
-            var _a, _b;
+            var _a, _b, _c;
             const { height, width, durationInFrames, fps } = validateCalculated({
                 calculated: c,
                 composition,
@@ -409,7 +564,8 @@ const resolveVideoConfig = ({ composition, editorProps: editorPropsOrUndefined,
                 fps,
                 durationInFrames,
                 id: composition.id,
-                defaultProps: (_b = (_a = c.props) !== null && _a !== void 0 ? _a : composition.defaultProps) !== null && _b !== void 0 ? _b : {},
+                defaultProps: (_a = composition.defaultProps) !== null && _a !== void 0 ? _a : {},
+                props: (_c = (_b = c.props) !== null && _b !== void 0 ? _b : composition.defaultProps) !== null && _c !== void 0 ? _c : {},
             };
         });
     }
@@ -421,40 +577,34 @@ const resolveVideoConfig = ({ composition, editorProps: editorPropsOrUndefined,
         return {
             ...data,
             id: composition.id,
-            defaultProps: (_d = composition === null || composition === void 0 ? void 0 : composition.defaultProps) !== null && _d !== void 0 ? _d : {},
+            defaultProps: (_c = composition.defaultProps) !== null && _c !== void 0 ? _c : {},
+            props: {
+                ...((_d = composition.defaultProps) !== null && _d !== void 0 ? _d : {}),
+                ...(inputProps !== null && inputProps !== void 0 ? inputProps : {}),
+            },
         };
     }
     return {
         ...data,
         id: composition.id,
-        defaultProps: (_f = (_e = calculatedProm === null || calculatedProm === void 0 ? void 0 : calculatedProm.props) !== null && _e !== void 0 ? _e : composition.defaultProps) !== null && _f !== void 0 ? _f : {},
+        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 : {},
     };
 };
 const validateCalculated = ({ composition, calculated, }) => {
     var _a, _b, _c, _d, _e, _f, _g, _h;
-    const potentialErrorLocation = `calculated by calculateMetadata() for the composition "${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 : null;
-    if (!width) {
-        throw new TypeError('Composition width was neither specified via the `width` prop nor the `calculateMetadata()` function.');
-    }
-    validateDimension(width, 'width', potentialErrorLocation);
-    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 : null;
-    if (!height) {
-        throw new TypeError('Composition height was neither specified via the `height` prop nor the `calculateMetadata()` function.');
-    }
-    validateDimension(width, 'height', potentialErrorLocation);
+    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;
-    if (!fps) {
-        throw new TypeError('Composition fps was neither specified via the `fps` prop nor the `calculateMetadata()` function.');
-    }
+    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;
-    if (!durationInFrames) {
-        throw new TypeError('Composition durationInFrames was neither specified via the `durationInFrames` prop nor the `calculateMetadata()` function.');
-    }
-    validateDurationInFrames({
-        durationInFrames,
-        component: potentialErrorLocation,
+    validateDurationInFrames(durationInFrames, {
         allowFloats: false,
+        component: `of the "<Composition />" component with the id "${composition.id}"`,
     });
     return { width, height, fps, durationInFrames };
 };
@@ -481,12 +631,23 @@ const ResolveCompositionConfig = ({ children }) => {
             : {};
     }, [allEditorProps, renderModalComposition]);
     const doResolution = useCallback((composition, editorProps) => {
+        var _a;
         const controller = new AbortController();
         if (currentCompositionMetadata) {
             return controller;
         }
+        const inputProps = typeof window === 'undefined' ||
+            getRemotionEnvironment() === 'player-development' ||
+            getRemotionEnvironment() === 'player-production'
+            ? {}
+            : (_a = getInputProps()) !== null && _a !== void 0 ? _a : {};
         const { signal } = controller;
-        const promOrNot = resolveVideoConfig({ composition, editorProps, signal });
+        const promOrNot = resolveVideoConfig({
+            composition,
+            editorProps,
+            inputProps,
+            signal,
+        });
         if (typeof promOrNot === 'object' && 'then' in promOrNot) {
             setResolvedConfigs((r) => ({
                 ...r,
@@ -601,7 +762,7 @@ const useResolvedVideoConfig = (preferredCompositionId) => {
         return composition ? (_a = allEditorProps[composition.id]) !== null && _a !== void 0 ? _a : {} : {};
     }, [allEditorProps, composition]);
     return useMemo(() => {
-        var _a, _b, _c;
+        var _a, _b, _c, _d;
         if (!composition) {
             return null;
         }
@@ -611,7 +772,8 @@ const useResolvedVideoConfig = (preferredCompositionId) => {
                 result: {
                     ...currentCompositionMetadata,
                     id: composition.id,
-                    defaultProps: (_a = currentCompositionMetadata.defaultProps) !== null && _a !== void 0 ? _a : {},
+                    props: currentCompositionMetadata.props,
+                    defaultProps: (_a = composition.defaultProps) !== null && _a !== void 0 ? _a : {},
                 },
             };
         }
@@ -619,15 +781,20 @@ const useResolvedVideoConfig = (preferredCompositionId) => {
             return {
                 type: 'success',
                 result: {
-                    ...composition,
-                    defaultProps: {
-                        ...((_b = composition.defaultProps) !== null && _b !== void 0 ? _b : {}),
+                    width: composition.width,
+                    height: composition.height,
+                    fps: composition.fps,
+                    id: composition.id,
+                    durationInFrames: composition.durationInFrames,
+                    defaultProps: (_b = composition.defaultProps) !== null && _b !== void 0 ? _b : {},
+                    props: {
+                        ...((_c = composition.defaultProps) !== null && _c !== void 0 ? _c : {}),
                         ...(selectedEditorProps !== null && selectedEditorProps !== void 0 ? selectedEditorProps : {}),
                         ...(typeof window === 'undefined' ||
                             getRemotionEnvironment() === 'player-development' ||
                             getRemotionEnvironment() === 'player-production'
                             ? {}
-                            : (_c = getInputProps()) !== null && _c !== void 0 ? _c : {}),
+                            : (_d = getInputProps()) !== null && _d !== void 0 ? _d : {}),
                     },
                 },
             };
@@ -646,7 +813,7 @@ const useVideo = () => {
     });
     const resolved = useResolvedVideoConfig(context.currentComposition);
     return useMemo(() => {
-        var _a;
+        var _a, _b;
         if (!resolved) {
             return null;
         }
@@ -661,18 +828,18 @@ const useVideo = () => {
         }
         return {
             ...resolved.result,
-            defaultProps: selected.defaultProps,
+            defaultProps: (_a = selected.defaultProps) !== null && _a !== void 0 ? _a : {},
             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
-            ...((_a = context.currentCompositionMetadata) !== null && _a !== void 0 ? _a : {}),
+            ...((_b = context.currentCompositionMetadata) !== null && _b !== void 0 ? _b : {}),
             component: selected.component,
         };
     }, [context.currentCompositionMetadata, resolved, selected]);
 };
 
 const TimelineContext = createContext({
-    frame: 0,
+    frame: {},
     playing: false,
     playbackRate: 1,
     rootId: '',
@@ -692,16 +859,32 @@ const SetTimelineContext = createContext({
         throw new Error('default');
     },
 });
+const makeKey = (composition) => {
+    return `remotion.time.${composition}`;
+};
+const persistCurrentFrame = (frame, composition) => {
+    localStorage.setItem(makeKey(composition), String(frame));
+};
+const getFrameForComposition = (composition) => {
+    var _a, _b;
+    const frame = localStorage.getItem(makeKey(composition));
+    return frame
+        ? Number(frame)
+        : (_b = (typeof window === 'undefined' ? 0 : (_a = window.remotion_initialFrame) !== null && _a !== void 0 ? _a : 0)) !== null && _b !== void 0 ? _b : 0;
+};
 const useTimelinePosition = () => {
+    var _a, _b;
     const videoConfig = useVideo();
     const state = useContext(TimelineContext);
-    // A dynamically calculated duration using calculateMetadata()
-    // may lead to the frame being bigger than the duration.
-    // If we have the config, we clamp the frame to the duration.
     if (!videoConfig) {
-        return state.frame;
+        return typeof window === 'undefined'
+            ? 0
+            : (_a = window.remotion_initialFrame) !== null && _a !== void 0 ? _a : 0;
     }
-    return Math.min(videoConfig.durationInFrames - 1, state.frame);
+    const unclamped = (_b = state.frame[videoConfig.id]) !== null && _b !== void 0 ? _b : (typeof window !== 'undefined' && window.remotion_isPlayer
+        ? 0
+        : getFrameForComposition(videoConfig.id));
+    return Math.min(videoConfig.durationInFrames - 1, unclamped);
 };
 const useTimelineSetFrame = () => {
     const { setFrame } = useContext(SetTimelineContext);
@@ -717,6 +900,8 @@ var TimelinePosition = /*#__PURE__*/Object.freeze({
     __proto__: null,
     TimelineContext: TimelineContext,
     SetTimelineContext: SetTimelineContext,
+    persistCurrentFrame: persistCurrentFrame,
+    getFrameForComposition: getFrameForComposition,
     useTimelinePosition: useTimelinePosition,
     useTimelineSetFrame: useTimelineSetFrame,
     usePlayingState: usePlayingState
@@ -736,7 +921,7 @@ const useUnsafeVideoConfig = () => {
         if (!video) {
             return null;
         }
-        const { id, durationInFrames, fps, height, width, defaultProps } = video;
+        const { id, durationInFrames, fps, height, width, defaultProps, props } = video;
         return {
             id,
             width,
@@ -744,6 +929,7 @@ const useUnsafeVideoConfig = () => {
             fps,
             durationInFrames: ctxDuration !== null && ctxDuration !== void 0 ? ctxDuration : durationInFrames,
             defaultProps,
+            props,
         };
     }, [ctxDuration, video]);
 };
@@ -917,8 +1103,7 @@ const useCurrentFrame = () => {
 const Loop = ({ durationInFrames, times = Infinity, children, name, ...props }) => {
     const currentFrame = useCurrentFrame();
     const { durationInFrames: compDuration } = useVideoConfig();
-    validateDurationInFrames({
-        durationInFrames,
+    validateDurationInFrames(durationInFrames, {
         component: 'of the <Loop /> component',
         allowFloats: true,
     });
@@ -1277,13 +1462,13 @@ const evaluateVolume = ({ frame, volume, mediaVolume = 1, allowAmplificationDuri
     return Math.max(0, Math.min(maxVolume, evaluated));
 };
 
-const didWarn$1 = {};
-const warnOnce$1 = (message) => {
-    if (didWarn$1[message]) {
+const didWarn = {};
+const warnOnce = (message) => {
+    if (didWarn[message]) {
         return;
     }
     console.warn(message);
-    didWarn$1[message] = true;
+    didWarn[message] = true;
 };
 const useMediaInTimeline = ({ volume, mediaVolume, mediaRef, src, mediaType, playbackRate, }) => {
     const videoConfig = useVideoConfig();
@@ -1321,7 +1506,7 @@ const useMediaInTimeline = ({ volume, mediaVolume, mediaRef, src, mediaType, pla
     }, [duration, startsAt, volume, mediaVolume]);
     useEffect(() => {
         if (typeof volume === 'number' && volume !== initialVolume) {
-            warnOnce$1(`Remotion: The ${mediaType} with src ${src} has changed it's volume. Prefer the callback syntax for setting volume to get better timeline display: https://www.remotion.dev/docs/using-audio/#controlling-volume`);
+            warnOnce(`Remotion: The ${mediaType} with src ${src} has changed it's volume. Prefer the callback syntax for setting volume to get better timeline display: https://www.remotion.dev/docs/using-audio/#controlling-volume`);
         }
     }, [initialVolume, mediaType, src, volume]);
     useEffect(() => {
@@ -1880,7 +2065,11 @@ const SharedAudioContextProvider = ({ children, numberOfAudioTags, component })
         };
     }, [component, resetAudio]);
     return (jsxs(SharedAudioContext.Provider, { value: value, children: [refs.map(({ id, ref }) => {
-                return jsx("audio", { ref: ref, src: EMPTY_AUDIO }, id);
+                return (
+                // Without preload="metadata", iOS will seek the time internally
+                // but not actually with sound. Adding `preload="metadata"` helps here.
+                // https://discord.com/channels/809501355504959528/817306414069710848/1130519583367888906
+                jsx("audio", { ref: ref, preload: "metadata", src: EMPTY_AUDIO }, id));
             }), children] }));
 };
 const useSharedAudio = (aud, audioId) => {
@@ -2008,7 +2197,7 @@ const AudioForDevelopmentForwardRefFunction = (props, ref) => {
     if (initialShouldPreMountAudioElements) {
         return null;
     }
-    return jsx("audio", { ref: audioRef, ...propsToPass });
+    return jsx("audio", { ref: audioRef, preload: "metadata", ...propsToPass });
 };
 const AudioForDevelopment = forwardRef(AudioForDevelopmentForwardRefFunction);
 
@@ -2051,7 +2240,9 @@ if (typeof window !== 'undefined') {
     window.remotion_renderReady = false;
 }
 let handles = [];
-const timeouts = {};
+if (typeof window !== 'undefined') {
+    window.remotion_delayRenderTimeouts = {};
+}
 const DELAY_RENDER_CALLSTACK_TOKEN = 'The delayRender was called:';
 const defaultTimeout = 30000;
 /**
@@ -2073,18 +2264,23 @@ const delayRender = (label) => {
         const timeoutToUse = typeof window === 'undefined'
             ? defaultTimeout
             : ((_c = window.remotion_puppeteerTimeout) !== null && _c !== void 0 ? _c : defaultTimeout) - 2000;
-        timeouts[handle] = setTimeout(() => {
-            const message = [
-                `A delayRender()`,
-                label ? `"${label}"` : null,
-                `was called but not cleared after ${timeoutToUse}ms. See https://remotion.dev/docs/timeout for help.`,
-                DELAY_RENDER_CALLSTACK_TOKEN,
-                called,
-            ]
-                .filter(truthy)
-                .join(' ');
-            throw new Error(message);
-        }, timeoutToUse);
+        if (typeof window !== 'undefined') {
+            window.remotion_delayRenderTimeouts[handle] = {
+                label: label !== null && label !== void 0 ? label : null,
+                timeout: setTimeout(() => {
+                    const message = [
+                        `A delayRender()`,
+                        label ? `"${label}"` : null,
+                        `was called but not cleared after ${timeoutToUse}ms. See https://remotion.dev/docs/timeout for help.`,
+                        DELAY_RENDER_CALLSTACK_TOKEN,
+                        called,
+                    ]
+                        .filter(truthy)
+                        .join(' ');
+                    throw new Error(message);
+                }, timeoutToUse),
+            };
+        }
     }
     if (typeof window !== 'undefined') {
         window.remotion_renderReady = false;
@@ -2107,7 +2303,8 @@ const continueRender = (handle) => {
     handles = handles.filter((h) => {
         if (h === handle) {
             if (getRemotionEnvironment() === 'rendering') {
-                clearTimeout(timeouts[handle]);
+                clearTimeout(window.remotion_delayRenderTimeouts[handle].timeout);
+                delete window.remotion_delayRenderTimeouts[handle];
             }
             return false;
         }
@@ -2393,24 +2590,6 @@ const validateDefaultAndInputProps = (defaultProps, name, compositionId) => {
     }
 };
 
-const validateFps = (fps, location, isGif) => {
-    if (typeof fps !== 'number') {
-        throw new Error(`"fps" must be a number, but you passed a value of type ${typeof fps} ${location}`);
-    }
-    if (!Number.isFinite(fps)) {
-        throw new Error(`"fps" must be a finite, but you passed ${fps} ${location}`);
-    }
-    if (isNaN(fps)) {
-        throw new Error(`"fps" must not be NaN, but got ${fps} ${location}`);
-    }
-    if (fps <= 0) {
-        throw new TypeError(`"fps" must be positive, but got ${fps} ${location}`);
-    }
-    if (isGif && fps > 50) {
-        throw new TypeError(`The FPS for a GIF cannot be higher than 50. Use the --every-nth-frame option to lower the FPS: https://remotion.dev/docs/render-as-gif`);
-    }
-};
-
 const Fallback = () => {
     useEffect(() => {
         const fallback = delayRender('Waiting for Root component to unsuspend');
@@ -2445,20 +2624,12 @@ const Composition = ({ width, height, fps, durationInFrames, id, defaultProps, s
             throw new Error('No id for composition passed.');
         }
         validateCompositionId(id);
-        validateDimension(width, 'width', 'of the <Composition/> component');
-        validateDimension(height, 'height', 'of the <Composition/> component');
-        validateDurationInFrames({
-            durationInFrames,
-            component: 'of the <Composition/> component',
-            allowFloats: false,
-        });
-        validateFps(fps, 'as a prop of the <Composition/> component', false);
         validateDefaultAndInputProps(defaultProps, 'defaultProps', id);
         registerComposition({
-            durationInFrames,
-            fps,
-            height,
-            width,
+            durationInFrames: durationInFrames !== null && durationInFrames !== void 0 ? durationInFrames : undefined,
+            fps: fps !== null && fps !== void 0 ? fps : undefined,
+            height: height !== null && height !== void 0 ? height : undefined,
+            width: width !== null && width !== void 0 ? width : undefined,
             id,
             folderName,
             component: lazy,
@@ -2493,14 +2664,14 @@ const Composition = ({ width, height, fps, durationInFrames, id, defaultProps, s
         if (resolved === null || resolved.type !== 'success') {
             return null;
         }
-        return createPortal(jsx(ClipComposition, { children: jsx(CanUseRemotionHooksProvider, { children: jsx(Suspense, { fallback: jsx(Loading, {}), children: jsx(Comp, { ...((_a = resolved.result.defaultProps) !== null && _a !== void 0 ? _a : {}) }) }) }) }), portalNode());
+        return createPortal(jsx(ClipComposition, { children: jsx(CanUseRemotionHooksProvider, { children: jsx(Suspense, { fallback: jsx(Loading, {}), children: jsx(Comp, { ...((_a = resolved.result.props) !== null && _a !== void 0 ? _a : {}) }) }) }) }), portalNode());
     }
     if (environment === 'rendering' && video && video.component === lazy) {
         const Comp = lazy;
         if (resolved === null || resolved.type !== 'success') {
             return null;
         }
-        return createPortal(jsx(CanUseRemotionHooksProvider, { children: jsx(Suspense, { fallback: jsx(Fallback, {}), children: jsx(Comp, { ...((_b = resolved.result.defaultProps) !== null && _b !== void 0 ? _b : {}) }) }) }), portalNode());
+        return createPortal(jsx(CanUseRemotionHooksProvider, { children: jsx(Suspense, { fallback: jsx(Fallback, {}), children: jsx(Comp, { ...((_b = resolved.result.props) !== null && _b !== void 0 ? _b : {}) }) }) }), portalNode());
     }
     return null;
 };
@@ -2712,6 +2883,7 @@ class Easing {
  * @see [Documentation](https://www.remotion.dev/docs/freeze)
  */
 const Freeze = ({ frame, children }) => {
+    const videoConfig = useVideoConfig();
     if (typeof frame === 'undefined') {
         throw new Error(`The <Freeze /> component requires a 'frame' prop, but none was passed.`);
     }
@@ -2732,9 +2904,11 @@ const Freeze = ({ frame, children }) => {
             imperativePlaying: {
                 current: false,
             },
-            frame,
+            frame: {
+                [videoConfig.id]: frame,
+            },
         };
-    }, [context, frame]);
+    }, [context, frame, videoConfig.id]);
     return (jsx(TimelineContext.Provider, { value: value, children: jsx(SequenceContext.Provider, { value: null, children: children }) }));
 };
 
@@ -2852,7 +3026,7 @@ const ImgRefForwarding = ({ onError, maxRetries = 2, src, ...props }, ref) => {
             if (process.env.NODE_ENV === 'test') {
                 return;
             }
-            const newHandle = delayRender('Loading <Img> with src=' + src);
+            const newHandle = delayRender('Loading <Img> with src=' + actualSrc);
             const { current } = imageRef;
             const onComplete = () => {
                 var _a, _b, _c, _d;
@@ -2876,7 +3050,7 @@ const ImgRefForwarding = ({ onError, maxRetries = 2, src, ...props }, ref) => {
                 current === null || current === void 0 ? void 0 : current.removeEventListener('load', didLoad);
                 continueRender(newHandle);
             };
-        }, [src]);
+        }, [actualSrc]);
     }
     return (jsx("img", { ...props, ref: imageRef, src: actualSrc, onError: didGetError }));
 };
@@ -3455,9 +3629,8 @@ const waitForRoot = (fn) => {
 };
 
 const RemotionRoot = ({ children, numberOfAudioTags }) => {
-    var _a;
     const [remotionRootId] = useState(() => String(random(null)));
-    const [frame, setFrame] = useState((_a = window.remotion_initialFrame) !== null && _a !== void 0 ? _a : 0);
+    const [frame, setFrame] = useState({});
     const [playing, setPlaying] = useState(false);
     const imperativePlaying = useRef(false);
     const [fastRefreshes, setFastRefreshes] = useState(0);
@@ -3466,9 +3639,12 @@ const RemotionRoot = ({ children, numberOfAudioTags }) => {
     if (typeof window !== 'undefined') {
         // eslint-disable-next-line react-hooks/rules-of-hooks
         useLayoutEffect(() => {
-            window.remotion_setFrame = (f) => {
+            window.remotion_setFrame = (f, composition) => {
                 const id = delayRender(`Setting the current frame to ${f}`);
-                setFrame(f);
+                setFrame((s) => ({
+                    ...s,
+                    [composition]: f,
+                }));
                 requestAnimationFrame(() => continueRender(id));
             };
             window.remotion_isPlayer = false;
@@ -3662,6 +3838,15 @@ const Internals = {
     REMOTION_STUDIO_CONTAINER_ELEMENT,
     AssetManager,
     bundleName: 'bundle.js',
+    bundleMapName: 'bundle.js.map',
+    persistCurrentFrame,
+    useTimelineSetFrame,
+    serializeJSONWithDate,
+    deserializeJSONWithCustomFields,
+    FILE_TOKEN,
+    DATE_TOKEN,
+    NativeLayersProvider,
+    ClipComposition,
 };
 
 const flattenChildren = (children) => {
@@ -3708,11 +3893,10 @@ const Series = ({ children }) => {
                 throw new TypeError(`A <Series.Sequence /> component (${debugInfo}) was detected to not have any children. Delete it to fix this error.`);
             }
             const durationInFramesProp = castedChild.props.durationInFrames;
-            const { durationInFrames, children: _children, ...passedProps } = castedChild.props;
+            const { durationInFrames, children: _children, from, ...passedProps } = castedChild.props; // `from` is not accepted and must be filtered out if used in JS
             if (i !== flattenedChildren.length - 1 ||
                 durationInFramesProp !== Infinity) {
-                validateDurationInFrames({
-                    durationInFrames: durationInFramesProp,
+                validateDurationInFrames(durationInFramesProp, {
                     component: `of a <Series.Sequence /> component`,
                     allowFloats: true,
                 });
@@ -3964,7 +4148,7 @@ function spring({ frame: passedFrame, fps, config = {}, from = 0, to = 1, durati
         };
     const frame = (reverse
         ? (passedDurationInFrames !== null && passedDurationInFrames !== void 0 ? passedDurationInFrames : naturalDurationGetter.get()) - passedFrame
-        : passedFrame) - delay;
+        : passedFrame) - (reverse ? -delay : delay);
     const spr = springCalculation({
         fps,
         frame: passedDurationInFrames === undefined
@@ -3983,89 +4167,6 @@ function spring({ frame: passedFrame, fps, config = {}, from = 0, to = 1, durati
     return Math.max(spr.current, to);
 }
 
-const problematicCharacters = {
-    '%3A': ':',
-    '%2F': '/',
-    '%3F': '?',
-    '%23': '#',
-    '%5B': '[',
-    '%5D': ']',
-    '%40': '@',
-    '%21': '!',
-    '%24': '$',
-    '%26': '&',
-    '%27': "'",
-    '%28': '(',
-    '%29': ')',
-    '%2A': '*',
-    '%2B': '+',
-    '%2C': ',',
-    '%3B': ';',
-};
-const didWarn = {};
-const warnOnce = (message) => {
-    if (didWarn[message]) {
-        return;
-    }
-    console.warn(message);
-    didWarn[message] = true;
-};
-const includesHexOfUnsafeChar = (path) => {
-    for (const key of Object.keys(problematicCharacters)) {
-        if (path.includes(key)) {
-            return { containsHex: true, hexCode: key };
-        }
-    }
-    return { containsHex: false };
-};
-const trimLeadingSlash = (path) => {
-    if (path.startsWith('/')) {
-        return trimLeadingSlash(path.substring(1));
-    }
-    return path;
-};
-const inner = (path) => {
-    if (typeof window !== 'undefined' && window.remotion_staticBase) {
-        return `${window.remotion_staticBase}/${trimLeadingSlash(path)}`;
-    }
-    return `/${trimLeadingSlash(path)}`;
-};
-/**
- * @description Reference a file from the public/ folder. If the file does not appear in the autocomplete, type the path manually.
- * @see [Documentation](https://www.remotion.dev/docs/staticfile)
- */
-const staticFile = (path) => {
-    if (path.startsWith('http://') || path.startsWith('https://')) {
-        throw new TypeError(`staticFile() does not support remote URLs - got "${path}". Instead, pass the URL without wrapping it in staticFile(). See: https://remotion.dev/docs/staticfile-remote-urls`);
-    }
-    if (path.startsWith('..') || path.startsWith('./')) {
-        throw new TypeError(`staticFile() does not support relative paths - got "${path}". Instead, pass the name of a file that is inside the public/ folder. See: https://remotion.dev/docs/staticfile-relative-paths`);
-    }
-    if (path.startsWith('/Users') ||
-        path.startsWith('/home') ||
-        path.startsWith('/tmp') ||
-        path.startsWith('/etc') ||
-        path.startsWith('/opt') ||
-        path.startsWith('/var') ||
-        path.startsWith('C:') ||
-        path.startsWith('D:') ||
-        path.startsWith('E:')) {
-        throw new TypeError(`staticFile() does not support absolute paths - got "${path}". Instead, pass the name of a file that is inside the public/ folder. See: https://remotion.dev/docs/staticfile-relative-paths`);
-    }
-    if (path.startsWith('public/')) {
-        throw new TypeError(`Do not include the public/ prefix when using staticFile() - got "${path}". See: https://remotion.dev/docs/staticfile-relative-paths`);
-    }
-    const includesHex = includesHexOfUnsafeChar(path);
-    if (includesHex.containsHex) {
-        warnOnce(`WARNING: You seem to pass an already encoded path (path contains ${includesHex.hexCode}). The encoding gets automatically handled by staticFile()  `);
-    }
-    const preparsed = inner(encodeURIComponent(path));
-    if (!preparsed.startsWith('/')) {
-        return `/${preparsed}`;
-    }
-    return preparsed;
-};
-
 /**
  * @description A `<Still />` is a `<Composition />` that is only 1 frame long.
  * @see [Documentation](https://www.remotion.dev/docs/still)
@@ -4155,8 +4256,13 @@ const OffthreadVideoForRendering = ({ onError, volume: volumeProp, playbackRate,
         return `http://localhost:${window.remotion_proxyPort}/proxy?src=${encodeURIComponent(getAbsoluteSrc(src))}&time=${encodeURIComponent(currentTime)}&transparent=${String(transparent)}`;
     }, [currentTime, src, transparent]);
     const onErr = useCallback((e) => {
-        onError === null || onError === void 0 ? void 0 : onError(e);
-    }, [onError]);
+        if (onError) {
+            onError === null || onError === void 0 ? void 0 : onError(e);
+        }
+        else {
+            cancelRender('Failed to load image with src ' + actualSrc);
+        }
+    }, [actualSrc, onError]);
     const className = useMemo(() => {
         return [OFFTHREAD_VIDEO_CLASS_NAME, props.className]
             .filter(truthy)
@@ -4328,7 +4434,9 @@ const VideoForDevelopment = forwardRef(VideoForDevelopmentRefForwardingFunction)
  * @see [Documentation](https://www.remotion.dev/docs/offthreadvideo)
  */
 const OffthreadVideo = (props) => {
-    const { startFrom, endAt, imageFormat, ...otherProps } = props;
+    // Should only destruct `startFrom` and `endAt` from props,
+    // rest gets drilled down
+    const { startFrom, endAt, ...otherProps } = props;
     const environment = useRemotionEnvironment();
     const onDuration = useCallback(() => undefined, []);
     if (typeof props.src !== 'string') {
@@ -4345,9 +4453,10 @@ const OffthreadVideo = (props) => {
     }
     validateMediaProps(props, 'Video');
     if (environment === 'rendering') {
-        return (jsx(OffthreadVideoForRendering, { imageFormat: imageFormat, ...otherProps }));
+        return jsx(OffthreadVideoForRendering, { ...otherProps });
     }
-    return (jsx(VideoForDevelopment, { onDuration: onDuration, onlyWarnForMediaSeekingError: true, ...otherProps }));
+    const { transparent, ...withoutTransparent } = otherProps;
+    return (jsx(VideoForDevelopment, { onDuration: onDuration, onlyWarnForMediaSeekingError: true, ...withoutTransparent }));
 };
 
 const VideoForRenderingForwardFunction = ({ onError, volume: volumeProp, allowAmplificationDuringRender, playbackRate, onDuration, ...props }, ref) => {
@@ -4614,7 +4723,7 @@ const Config = new Proxy(proxyObj, {
             console.warn('+ Replace:');
             console.warn('import {Config} from "@remotion/cli/config";');
             console.warn();
-            console.warn('For more information, see https://v4.remotion.dev/docs/4-0-migration.');
+            console.warn('For more information, see https://www.remotion.dev/docs/4-0-migration.');
             process.exit(1);
         };
     },