remotion 4.0.0-webhook.27 → 4.1.0-alpha2

package/dist/esm/index.mjs

@@ -0,0 +1,4623 @@
+import React, { createContext, useState, useMemo, useLayoutEffect, useContext, useEffect, forwardRef, Children, isValidElement, useRef, useCallback, createRef, useImperativeHandle, useReducer, Suspense } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { createPortal } from 'react-dom';
+
+const NativeLayersContext = createContext({
+    setClipRegion: () => {
+        throw new Error('NativeLayers not set');
+    },
+    clipRegion: null,
+});
+const NativeLayersProvider = ({ children, }) => {
+    const [clipRegion, setClipRegion] = useState(null);
+    const context = useMemo(() => {
+        return {
+            setClipRegion,
+            clipRegion,
+        };
+    }, [clipRegion, setClipRegion]);
+    useLayoutEffect(() => {
+        if (typeof window !== 'undefined') {
+            window.remotion_getClipRegion = () => {
+                return clipRegion;
+            };
+        }
+    }, [clipRegion, setClipRegion]);
+    return (jsx(NativeLayersContext.Provider, { value: context, children: children }));
+};
+
+const Clipper = ({ height, width, x, y }) => {
+    const { setClipRegion } = useContext(NativeLayersContext);
+    useEffect(() => {
+        setClipRegion((c) => {
+            if (c === 'hide') {
+                throw new Error('Cannot render <Clipper>, because another <Null> is already rendered');
+            }
+            if (c === null) {
+                return { height, width, x, y };
+            }
+            throw new Error('Cannot render <Clipper>, because another component clipping the region was already rendered (most likely <Clipper>)');
+        });
+        return () => {
+            setClipRegion(null);
+        };
+    }, [height, setClipRegion, width, x, y]);
+    return null;
+};
+
+const IsPlayerContext = createContext(false);
+const IsPlayerContextProvider = ({ children, }) => {
+    return jsx(IsPlayerContext.Provider, { value: true, children: children });
+};
+const useIsPlayer = () => {
+    return useContext(IsPlayerContext);
+};
+
+function truthy(value) {
+    return Boolean(value);
+}
+
+// Automatically generated on publish
+const VERSION = '4.1.0-alpha2';
+
+const checkMultipleRemotionVersions = () => {
+    if (typeof globalThis === 'undefined') {
+        return;
+    }
+    const alreadyImported = globalThis.remotion_imported ||
+        (typeof window !== 'undefined' && window.remotion_imported);
+    if (alreadyImported) {
+        if (alreadyImported === VERSION) {
+            // Next.JS will reload the package and cause a server-side warning.
+            // It's okay if this happens during SSR in developement
+            return;
+        }
+        throw new TypeError(`🚨 Multiple versions of Remotion detected: ${[
+            VERSION,
+            typeof alreadyImported === 'string'
+                ? alreadyImported
+                : 'an older version',
+        ]
+            .filter(truthy)
+            .join(' and ')}. This will cause things to break in an unexpected way.\nCheck that all your Remotion packages are on the same version. If your dependencies depend on Remotion, make them peer dependencies. You can also run \`npx remotion versions\` from your terminal to see which versions are mismatching.`);
+    }
+    globalThis.remotion_imported = VERSION;
+    if (typeof window !== 'undefined') {
+        window.remotion_imported = VERSION;
+    }
+};
+
+const Null = () => {
+    const { setClipRegion } = useContext(NativeLayersContext);
+    useEffect(() => {
+        setClipRegion((c) => {
+            if (c === null) {
+                return 'hide';
+            }
+            // Rendering multiple <Null> is fine, because they are all hidden
+            if (c === 'hide') {
+                return 'hide';
+            }
+            throw new Error('Cannot render <Null>, because another component clipping the region was already rendered (most likely <Clipper>)');
+        });
+        return () => {
+            setClipRegion(null);
+        };
+    }, [setClipRegion]);
+    return null;
+};
+
+const AbsoluteFillRefForwarding = (props, ref) => {
+    const { style, ...other } = props;
+    const actualStyle = useMemo(() => {
+        return {
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            width: '100%',
+            height: '100%',
+            display: 'flex',
+            flexDirection: 'column',
+            ...style,
+        };
+    }, [style]);
+    return jsx("div", { ref: ref, style: actualStyle, ...other });
+};
+/**
+ * @description An absolutely positioned <div> element with 100% width, height, and a column flex style
+ * @see [Documentation](https://www.remotion.dev/docs/absolute-fill)
+ */
+const AbsoluteFill = forwardRef(AbsoluteFillRefForwarding);
+
+const getAbsoluteSrc = (relativeSrc) => {
+    return new URL(relativeSrc, window.location.origin).href;
+};
+
+const isErrorLike = (err) => {
+    if (err === null) {
+        return false;
+    }
+    if (typeof err !== 'object') {
+        return false;
+    }
+    if (!('stack' in err)) {
+        return false;
+    }
+    // eslint-disable-next-line @typescript-eslint/prefer-ts-expect-error
+    // @ts-ignore we just asserted
+    if (typeof err.stack !== 'string') {
+        return false;
+    }
+    if (!('message' in err)) {
+        return false;
+    }
+    // eslint-disable-next-line @typescript-eslint/prefer-ts-expect-error
+    // @ts-ignore we just asserted
+    if (typeof err.message !== 'string') {
+        return false;
+    }
+    return true;
+};
+/**
+ * @description When you invoke this function, Remotion will stop rendering all the frames without any retries
+ * @see [Documentation](https://www.remotion.dev/docs/cancel-render)
+ */
+function cancelRender(err) {
+    let error;
+    if (isErrorLike(err)) {
+        error = err;
+    }
+    else if (typeof err === 'string') {
+        error = Error(err);
+    }
+    else {
+        error = Error('Rendering was cancelled');
+    }
+    window.remotion_cancelledError = error.stack;
+    throw error;
+}
+
+const getRemotionEnvironment = () => {
+    if (process.env.NODE_ENV === 'production') {
+        if (typeof window !== 'undefined' && window.remotion_isPlayer) {
+            return 'player-production';
+        }
+        return 'rendering';
+    }
+    // The Vitest framework sets NODE_ENV as test.
+    // Right now we don't need to treat it in a special
+    // way which is good - defaulting to `rendering`.
+    if (process.env.NODE_ENV === 'test') {
+        return 'rendering';
+    }
+    if (typeof window !== 'undefined' && window.remotion_isPlayer) {
+        return 'player-development';
+    }
+    return 'preview';
+};
+const useRemotionEnvironment = () => {
+    const isPlayer = useIsPlayer();
+    if (isPlayer) {
+        if (process.env.NODE_ENV === 'production') {
+            return 'player-production';
+        }
+        return 'player-development';
+    }
+    return getRemotionEnvironment();
+};
+
+const HIDDEN_NAMES = ['__WEBPACK_DEFAULT_EXPORT__'];
+const getTimelineClipName = (children) => {
+    var _a;
+    const tree = (_a = Children.map(children, (ch) => {
+        if (!isValidElement(ch)) {
+            return null;
+        }
+        // Must be name, not ID
+        const name = typeof ch.type !== 'string' && ch.type.name;
+        if (name && !HIDDEN_NAMES.includes(name)) {
+            return name;
+        }
+        if (ch.props.children) {
+            const chName = getTimelineClipName(ch.props.children);
+            return chName;
+        }
+        return null;
+    })) === null || _a === void 0 ? void 0 : _a.filter(Boolean);
+    return (tree === null || tree === void 0 ? void 0 : tree.length) ? tree[0] : '';
+};
+
+const NonceContext = createContext({
+    getNonce: () => 0,
+    fastRefreshes: 0,
+});
+const useNonce = () => {
+    const context = useContext(NonceContext);
+    const [nonce, setNonce] = useState(() => context.getNonce());
+    const lastContext = useRef(context);
+    // Only if context changes, but not initially
+    useEffect(() => {
+        if (lastContext.current === context) {
+            return;
+        }
+        lastContext.current = context;
+        setNonce(context.getNonce);
+    }, [context]);
+    return nonce;
+};
+
+const SequenceContext = createContext(null);
+
+const SequenceManager = React.createContext({
+    registerSequence: () => {
+        throw new Error('SequenceManagerContext not initialized');
+    },
+    unregisterSequence: () => {
+        throw new Error('SequenceManagerContext not initialized');
+    },
+    sequences: [],
+});
+const SequenceManagerProvider = ({ children }) => {
+    const [sequences, setSequences] = useState([]);
+    const registerSequence = useCallback((seq) => {
+        setSequences((seqs) => {
+            return [...seqs, seq];
+        });
+    }, []);
+    const unregisterSequence = useCallback((seq) => {
+        setSequences((seqs) => seqs.filter((s) => s.id !== seq));
+    }, []);
+    const context = useMemo(() => {
+        return {
+            registerSequence,
+            sequences,
+            unregisterSequence,
+        };
+    }, [registerSequence, sequences, unregisterSequence]);
+    return (jsx(SequenceManager.Provider, { value: context, children: children }));
+};
+
+const CompositionManager = createContext({
+    compositions: [],
+    registerComposition: () => undefined,
+    unregisterComposition: () => undefined,
+    registerFolder: () => undefined,
+    unregisterFolder: () => undefined,
+    currentComposition: null,
+    setCurrentComposition: () => undefined,
+    setCurrentCompositionMetadata: () => undefined,
+    folders: [],
+    currentCompositionMetadata: null,
+});
+
+let didWarnSSRImport = false;
+const warnOnceSSRImport = () => {
+    if (didWarnSSRImport) {
+        return;
+    }
+    didWarnSSRImport = true;
+    console.warn('Called `getInputProps()` on the server. This function is not available server-side and has returned an empty object.');
+    console.warn("To hide this warning, don't call this function on the server:");
+    console.warn("  typeof window === 'undefined' ? {} : getInputProps()");
+};
+const getInputProps = () => {
+    if (typeof window === 'undefined') {
+        warnOnceSSRImport();
+        return {};
+    }
+    if (getRemotionEnvironment() === 'player-development' ||
+        getRemotionEnvironment() === 'player-production') {
+        throw new Error('You cannot call `getInputProps()` from a <Player>. Instead, the props are available as React props from component that you passed as `component` prop.');
+    }
+    const param = window.remotion_inputProps;
+    if (!param) {
+        return {};
+    }
+    const parsed = JSON.parse(param);
+    return parsed;
+};
+
+const EditorPropsContext = createContext({
+    props: {},
+    updateProps: () => {
+        throw new Error('Not implemented');
+    },
+});
+const EditorPropsProvider = ({ children }) => {
+    const [props, setProps] = React.useState({});
+    const updateProps = useCallback(({ defaultProps, id, newProps, }) => {
+        setProps((prev) => {
+            var _a;
+            return {
+                ...prev,
+                [id]: typeof newProps === 'function'
+                    ? newProps((_a = prev[id]) !== null && _a !== void 0 ? _a : defaultProps)
+                    : newProps,
+            };
+        });
+    }, []);
+    const ctx = useMemo(() => {
+        return { props, updateProps };
+    }, [props, updateProps]);
+    return (jsx(EditorPropsContext.Provider, { value: ctx, children: children }));
+};
+
+const 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}`);
+    }
+    if (isNaN(amount)) {
+        throw new TypeError(`The "${nameOfProp}" prop ${location} must not be NaN, but is NaN.`);
+    }
+    if (!Number.isFinite(amount)) {
+        throw new TypeError(`The "${nameOfProp}" prop ${location} must be finite, but is ${amount}.`);
+    }
+    if (amount % 1 !== 0) {
+        throw new TypeError(`The "${nameOfProp}" prop ${location} must be an integer, but is ${amount}.`);
+    }
+    if (amount <= 0) {
+        throw new TypeError(`The "${nameOfProp}" prop ${location} must be positive, but got ${amount}.`);
+    }
+};
+
+const validateDurationInFrames = ({ allowFloats, component, durationInFrames, }) => {
+    if (typeof durationInFrames !== 'number') {
+        throw new Error(`The "durationInFrames" prop ${component} must be a number, but you passed a value of type ${typeof durationInFrames}`);
+    }
+    if (durationInFrames <= 0) {
+        throw new TypeError(`The "durationInFrames" prop ${component} must be positive, but got ${durationInFrames}.`);
+    }
+    if (!allowFloats && durationInFrames % 1 !== 0) {
+        throw new TypeError(`The "durationInFrames" prop ${component} must be an integer, but got ${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;
+    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 : {}),
+            },
+            abortSignal: signal,
+        })
+        : null;
+    if (calculatedProm !== null &&
+        typeof calculatedProm === 'object' &&
+        'then' in calculatedProm) {
+        return calculatedProm.then((c) => {
+            var _a, _b;
+            const { height, width, durationInFrames, fps } = validateCalculated({
+                calculated: c,
+                composition,
+            });
+            return {
+                width,
+                height,
+                fps,
+                durationInFrames,
+                id: composition.id,
+                defaultProps: (_b = (_a = c.props) !== null && _a !== void 0 ? _a : composition.defaultProps) !== null && _b !== void 0 ? _b : {},
+            };
+        });
+    }
+    const data = validateCalculated({
+        calculated: calculatedProm,
+        composition,
+    });
+    if (calculatedProm === null) {
+        return {
+            ...data,
+            id: composition.id,
+            defaultProps: (_d = composition === null || composition === void 0 ? void 0 : composition.defaultProps) !== null && _d !== void 0 ? _d : {},
+        };
+    }
+    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 : {},
+    };
+};
+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 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.');
+    }
+    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,
+        allowFloats: false,
+    });
+    return { width, height, fps, durationInFrames };
+};
+
+const ResolveCompositionContext = createContext(null);
+const resolveCompositionsRef = createRef();
+const ResolveCompositionConfig = ({ children }) => {
+    const [currentRenderModalComposition, setCurrentRenderModalComposition] = useState(null);
+    const { compositions, currentComposition, currentCompositionMetadata } = useContext(CompositionManager);
+    const selectedComposition = compositions.find((c) => c.id === currentComposition);
+    const renderModalComposition = compositions.find((c) => c.id === currentRenderModalComposition);
+    const { props: allEditorProps } = useContext(EditorPropsContext);
+    const [resolvedConfigs, setResolvedConfigs] = useState({});
+    const selectedEditorProps = useMemo(() => {
+        var _a;
+        return selectedComposition
+            ? (_a = allEditorProps[selectedComposition.id]) !== null && _a !== void 0 ? _a : {}
+            : {};
+    }, [allEditorProps, selectedComposition]);
+    const renderModalProps = useMemo(() => {
+        var _a;
+        return renderModalComposition
+            ? (_a = allEditorProps[renderModalComposition.id]) !== null && _a !== void 0 ? _a : {}
+            : {};
+    }, [allEditorProps, renderModalComposition]);
+    const doResolution = useCallback((composition, editorProps) => {
+        const controller = new AbortController();
+        if (currentCompositionMetadata) {
+            return controller;
+        }
+        const { signal } = controller;
+        const promOrNot = resolveVideoConfig({ composition, editorProps, signal });
+        if (typeof promOrNot === 'object' && 'then' in promOrNot) {
+            setResolvedConfigs((r) => ({
+                ...r,
+                [composition.id]: {
+                    type: 'loading',
+                },
+            }));
+            promOrNot
+                .then((c) => {
+                if (controller.signal.aborted) {
+                    return;
+                }
+                setResolvedConfigs((r) => ({
+                    ...r,
+                    [composition.id]: {
+                        type: 'success',
+                        result: c,
+                    },
+                }));
+            })
+                .catch((err) => {
+                if (controller.signal.aborted) {
+                    return;
+                }
+                setResolvedConfigs((r) => ({
+                    ...r,
+                    [composition.id]: {
+                        type: 'error',
+                        error: err,
+                    },
+                }));
+            });
+        }
+        else {
+            setResolvedConfigs((r) => ({
+                ...r,
+                [composition.id]: {
+                    type: 'success',
+                    result: promOrNot,
+                },
+            }));
+        }
+        return controller;
+    }, [currentCompositionMetadata]);
+    useImperativeHandle(resolveCompositionsRef, () => {
+        return {
+            setCurrentRenderModalComposition: (id) => {
+                setCurrentRenderModalComposition(id);
+            },
+            reloadCurrentlySelectedComposition: () => {
+                var _a;
+                if (!currentComposition) {
+                    return;
+                }
+                const composition = compositions.find((c) => c.id === currentComposition);
+                if (!composition) {
+                    throw new Error(`Could not find composition with id ${currentComposition}`);
+                }
+                const editorProps = (_a = allEditorProps[currentComposition]) !== null && _a !== void 0 ? _a : {};
+                doResolution(composition, editorProps);
+            },
+        };
+    }, [allEditorProps, compositions, currentComposition, doResolution]);
+    const isTheSame = (selectedComposition === null || selectedComposition === void 0 ? void 0 : selectedComposition.id) === (renderModalComposition === null || renderModalComposition === void 0 ? void 0 : renderModalComposition.id);
+    useEffect(() => {
+        if (selectedComposition && needsResolution(selectedComposition)) {
+            const controller = doResolution(selectedComposition, selectedEditorProps);
+            return () => {
+                controller.abort();
+            };
+        }
+    }, [doResolution, selectedComposition, selectedEditorProps]);
+    useEffect(() => {
+        if (renderModalComposition && !isTheSame) {
+            const controller = doResolution(renderModalComposition, renderModalProps);
+            return () => {
+                controller.abort();
+            };
+        }
+    }, [doResolution, isTheSame, renderModalComposition, renderModalProps]);
+    const resolvedConfigsIncludingStaticOnes = useMemo(() => {
+        const staticComps = compositions.filter((c) => {
+            return c.calculateMetadata === null;
+        });
+        return {
+            ...resolvedConfigs,
+            ...staticComps.reduce((acc, curr) => {
+                var _a;
+                return {
+                    ...acc,
+                    [curr.id]: {
+                        type: 'success',
+                        result: { ...curr, defaultProps: (_a = curr.defaultProps) !== null && _a !== void 0 ? _a : {} },
+                    },
+                };
+            }, {}),
+        };
+    }, [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 compositionId = preferredCompositionId !== null && preferredCompositionId !== void 0 ? preferredCompositionId : currentComposition;
+    const composition = compositions.find((c) => c.id === compositionId);
+    const selectedEditorProps = useMemo(() => {
+        var _a;
+        return composition ? (_a = allEditorProps[composition.id]) !== null && _a !== void 0 ? _a : {} : {};
+    }, [allEditorProps, composition]);
+    return useMemo(() => {
+        var _a, _b, _c;
+        if (!composition) {
+            return null;
+        }
+        if (currentCompositionMetadata) {
+            return {
+                type: 'success',
+                result: {
+                    ...currentCompositionMetadata,
+                    id: composition.id,
+                    defaultProps: (_a = currentCompositionMetadata.defaultProps) !== null && _a !== void 0 ? _a : {},
+                },
+            };
+        }
+        if (!needsResolution(composition)) {
+            return {
+                type: 'success',
+                result: {
+                    ...composition,
+                    defaultProps: {
+                        ...((_b = composition.defaultProps) !== null && _b !== void 0 ? _b : {}),
+                        ...(selectedEditorProps !== null && selectedEditorProps !== void 0 ? selectedEditorProps : {}),
+                        ...(typeof window === 'undefined' ||
+                            getRemotionEnvironment() === 'player-development' ||
+                            getRemotionEnvironment() === 'player-production'
+                            ? {}
+                            : (_c = getInputProps()) !== null && _c !== void 0 ? _c : {}),
+                    },
+                },
+            };
+        }
+        if (!context[composition.id]) {
+            return null;
+        }
+        return context[composition.id];
+    }, [composition, context, currentCompositionMetadata, selectedEditorProps]);
+};
+
+const useVideo = () => {
+    const context = useContext(CompositionManager);
+    const selected = context.compositions.find((c) => {
+        return c.id === context.currentComposition;
+    });
+    const resolved = useResolvedVideoConfig(context.currentComposition);
+    return useMemo(() => {
+        var _a;
+        if (!resolved) {
+            return null;
+        }
+        if (resolved.type === 'error') {
+            return null;
+        }
+        if (resolved.type === 'loading') {
+            return null;
+        }
+        if (!selected) {
+            return null;
+        }
+        return {
+            ...resolved.result,
+            defaultProps: selected.defaultProps,
+            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 : {}),
+            component: selected.component,
+        };
+    }, [context.currentCompositionMetadata, resolved, selected]);
+};
+
+const TimelineContext = createContext({
+    frame: 0,
+    playing: false,
+    playbackRate: 1,
+    rootId: '',
+    imperativePlaying: {
+        current: false,
+    },
+    setPlaybackRate: () => {
+        throw new Error('default');
+    },
+    audioAndVideoTags: { current: [] },
+});
+const SetTimelineContext = createContext({
+    setFrame: () => {
+        throw new Error('default');
+    },
+    setPlaying: () => {
+        throw new Error('default');
+    },
+});
+const useTimelinePosition = () => {
+    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 Math.min(videoConfig.durationInFrames - 1, state.frame);
+};
+const useTimelineSetFrame = () => {
+    const { setFrame } = useContext(SetTimelineContext);
+    return setFrame;
+};
+const usePlayingState = () => {
+    const { playing, imperativePlaying } = useContext(TimelineContext);
+    const { setPlaying } = useContext(SetTimelineContext);
+    return useMemo(() => [playing, setPlaying, imperativePlaying], [imperativePlaying, playing, setPlaying]);
+};
+
+var TimelinePosition = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    TimelineContext: TimelineContext,
+    SetTimelineContext: SetTimelineContext,
+    useTimelinePosition: useTimelinePosition,
+    useTimelineSetFrame: useTimelineSetFrame,
+    usePlayingState: usePlayingState
+});
+
+const CanUseRemotionHooks = createContext(false);
+const CanUseRemotionHooksProvider = ({ children }) => {
+    return (jsx(CanUseRemotionHooks.Provider, { value: true, children: children }));
+};
+
+const useUnsafeVideoConfig = () => {
+    var _a;
+    const context = useContext(SequenceContext);
+    const ctxDuration = (_a = context === null || context === void 0 ? void 0 : context.durationInFrames) !== null && _a !== void 0 ? _a : null;
+    const video = useVideo();
+    return useMemo(() => {
+        if (!video) {
+            return null;
+        }
+        const { id, durationInFrames, fps, height, width, defaultProps } = video;
+        return {
+            id,
+            width,
+            height,
+            fps,
+            durationInFrames: ctxDuration !== null && ctxDuration !== void 0 ? ctxDuration : durationInFrames,
+            defaultProps,
+        };
+    }, [ctxDuration, video]);
+};
+
+/**
+ * /**
+ * @description Get some info about the context of the video that you are making.
+ * @see [Documentation](https://www.remotion.dev/docs/use-video-config)
+ * @returns Returns an object containing `fps`, `width`, `height` and `durationInFrames`, all of type `number`.
+ */
+const useVideoConfig = () => {
+    const videoConfig = useUnsafeVideoConfig();
+    const context = useContext(CanUseRemotionHooks);
+    const isPlayer = useIsPlayer();
+    if (!videoConfig) {
+        if ((typeof window !== 'undefined' && window.remotion_isPlayer) ||
+            isPlayer) {
+            throw new Error([
+                'No video config found. Likely reasons:',
+                '- You are probably calling useVideoConfig() from outside the component passed to <Player />. See https://www.remotion.dev/docs/player/examples for how to set up the Player correctly.',
+                '- You have multiple versions of Remotion installed which causes the React context to get lost.',
+            ].join('-'));
+        }
+        throw new Error('No video config found. You are probably calling useVideoConfig() from a component which has not been registered as a <Composition />. See https://www.remotion.dev/docs/the-fundamentals#defining-compositions for more information.');
+    }
+    if (!context) {
+        throw new Error('Called useVideoConfig() outside a Remotion composition.');
+    }
+    return videoConfig;
+};
+
+const SequenceRefForwardingFunction = ({ from = 0, durationInFrames = Infinity, children, name, showInTimeline = true, loopDisplay, ...other }, ref) => {
+    const { layout = 'absolute-fill' } = other;
+    const [id] = useState(() => String(Math.random()));
+    const parentSequence = useContext(SequenceContext);
+    const { rootId } = useContext(TimelineContext);
+    const cumulatedFrom = parentSequence
+        ? parentSequence.cumulatedFrom + parentSequence.relativeFrom
+        : 0;
+    const nonce = useNonce();
+    const environment = useRemotionEnvironment();
+    if (layout !== 'absolute-fill' && layout !== 'none') {
+        throw new TypeError(`The layout prop of <Sequence /> expects either "absolute-fill" or "none", but you passed: ${layout}`);
+    }
+    // @ts-expect-error
+    if (layout === 'none' && typeof other.style !== 'undefined') {
+        throw new TypeError('If layout="none", you may not pass a style.');
+    }
+    if (typeof durationInFrames !== 'number') {
+        throw new TypeError(`You passed to durationInFrames an argument of type ${typeof durationInFrames}, but it must be a number.`);
+    }
+    if (durationInFrames <= 0) {
+        throw new TypeError(`durationInFrames must be positive, but got ${durationInFrames}`);
+    }
+    if (typeof from !== 'number') {
+        throw new TypeError(`You passed to the "from" props of your <Sequence> an argument of type ${typeof from}, but it must be a number.`);
+    }
+    if (!Number.isFinite(from)) {
+        throw new TypeError(`The "from" prop of a sequence must be finite, but got ${from}.`);
+    }
+    const absoluteFrame = useTimelinePosition();
+    const videoConfig = useVideoConfig();
+    const parentSequenceDuration = parentSequence
+        ? Math.min(parentSequence.durationInFrames - from, durationInFrames)
+        : durationInFrames;
+    const actualDurationInFrames = Math.max(0, Math.min(videoConfig.durationInFrames - from, parentSequenceDuration));
+    const { registerSequence, unregisterSequence } = useContext(SequenceManager);
+    const contextValue = useMemo(() => {
+        var _a;
+        return {
+            cumulatedFrom,
+            relativeFrom: from,
+            durationInFrames: actualDurationInFrames,
+            parentFrom: (_a = parentSequence === null || parentSequence === void 0 ? void 0 : parentSequence.relativeFrom) !== null && _a !== void 0 ? _a : 0,
+            id,
+        };
+    }, [
+        cumulatedFrom,
+        from,
+        actualDurationInFrames,
+        parentSequence === null || parentSequence === void 0 ? void 0 : parentSequence.relativeFrom,
+        id,
+    ]);
+    const timelineClipName = useMemo(() => {
+        return name !== null && name !== void 0 ? name : getTimelineClipName(children);
+    }, [children, name]);
+    useEffect(() => {
+        var _a;
+        if (environment !== 'preview') {
+            return;
+        }
+        registerSequence({
+            from,
+            duration: actualDurationInFrames,
+            id,
+            displayName: timelineClipName,
+            parent: (_a = parentSequence === null || parentSequence === void 0 ? void 0 : parentSequence.id) !== null && _a !== void 0 ? _a : null,
+            type: 'sequence',
+            rootId,
+            showInTimeline,
+            nonce,
+            loopDisplay,
+        });
+        return () => {
+            unregisterSequence(id);
+        };
+    }, [
+        durationInFrames,
+        id,
+        name,
+        registerSequence,
+        timelineClipName,
+        unregisterSequence,
+        parentSequence === null || parentSequence === void 0 ? void 0 : parentSequence.id,
+        actualDurationInFrames,
+        rootId,
+        from,
+        showInTimeline,
+        nonce,
+        loopDisplay,
+        environment,
+    ]);
+    const endThreshold = cumulatedFrom + from + durationInFrames - 1;
+    const content = absoluteFrame < cumulatedFrom + from
+        ? null
+        : absoluteFrame > endThreshold
+            ? null
+            : children;
+    const styleIfThere = other.layout === 'none' ? undefined : other.style;
+    const defaultStyle = useMemo(() => {
+        return {
+            flexDirection: undefined,
+            ...(styleIfThere !== null && styleIfThere !== void 0 ? styleIfThere : {}),
+        };
+    }, [styleIfThere]);
+    if (ref !== null && layout === 'none') {
+        throw new TypeError('It is not supported to pass both a `ref` and `layout="none"` to <Sequence />.');
+    }
+    return (jsx(SequenceContext.Provider, { value: contextValue, children: content === null ? null : other.layout === 'none' ? (content) : (jsx(AbsoluteFill, { ref: ref, style: defaultStyle, className: other.className, children: content })) }));
+};
+/**
+ * @description A component that time-shifts its children and wraps them in an absolutely positioned <div>.
+ * @see [Documentation](https://www.remotion.dev/docs/sequence]
+ */
+const Sequence = forwardRef(SequenceRefForwardingFunction);
+
+/**
+ * @description Get the current frame of the video. Frames are 0-indexed, meaning the first frame is 0, the last frame is the duration of the composition in frames minus one.
+ * @see [Documentation](https://remotion.dev/docs/use-current-frame)
+ */
+const useCurrentFrame = () => {
+    const canUseRemotionHooks = useContext(CanUseRemotionHooks);
+    if (!canUseRemotionHooks) {
+        if (typeof window !== 'undefined' && window.remotion_isPlayer) {
+            throw new Error(`useCurrentFrame can only be called inside a component that was passed to <Player>. See: https://www.remotion.dev/docs/player/examples`);
+        }
+        throw new Error(`useCurrentFrame() can only be called inside a component that was registered as a composition. See https://www.remotion.dev/docs/the-fundamentals#defining-compositions`);
+    }
+    const frame = useTimelinePosition();
+    const context = useContext(SequenceContext);
+    const contextOffset = context
+        ? context.cumulatedFrom + context.relativeFrom
+        : 0;
+    return frame - contextOffset;
+};
+
+/**
+ * @description This component allows you to quickly lay out an animation so it repeats itself.
+ * @see [Documentation](https://www.remotion.dev/docs/loop)
+ */
+const Loop = ({ durationInFrames, times = Infinity, children, name, ...props }) => {
+    const currentFrame = useCurrentFrame();
+    const { durationInFrames: compDuration } = useVideoConfig();
+    validateDurationInFrames({
+        durationInFrames,
+        component: 'of the <Loop /> component',
+        allowFloats: true,
+    });
+    if (typeof times !== 'number') {
+        throw new TypeError(`You passed to "times" an argument of type ${typeof times}, but it must be a number.`);
+    }
+    if (times !== Infinity && times % 1 !== 0) {
+        throw new TypeError(`The "times" prop of a loop must be an integer, but got ${times}.`);
+    }
+    if (times < 0) {
+        throw new TypeError(`The "times" prop of a loop must be at least 0, but got ${times}`);
+    }
+    const maxTimes = Math.ceil(compDuration / durationInFrames);
+    const actualTimes = Math.min(maxTimes, times);
+    const style = props.layout === 'none' ? undefined : props.style;
+    const maxFrame = durationInFrames * (actualTimes - 1);
+    const start = Math.floor(currentFrame / durationInFrames) * durationInFrames;
+    const from = Math.min(start, maxFrame);
+    const loopDisplay = useMemo(() => {
+        return {
+            numberOfTimes: actualTimes,
+            startOffset: -from,
+            durationInFrames,
+        };
+    }, [actualTimes, durationInFrames, from]);
+    return (jsx(Sequence, { durationInFrames: durationInFrames, from: from, name: name, loopDisplay: loopDisplay, layout: props.layout, style: style, children: children }));
+};
+
+const validateMediaProps = (props, component) => {
+    if (typeof props.volume !== 'number' &&
+        typeof props.volume !== 'function' &&
+        typeof props.volume !== 'undefined') {
+        throw new TypeError(`You have passed a volume of type ${typeof props.volume} to your <${component} /> component. Volume must be a number or a function with the signature '(frame: number) => number' undefined.`);
+    }
+    if (typeof props.volume === 'number' && props.volume < 0) {
+        throw new TypeError(`You have passed a volume below 0 to your <${component} /> component. Volume must be between 0 and 1`);
+    }
+    if (typeof props.playbackRate !== 'number' &&
+        typeof props.playbackRate !== 'undefined') {
+        throw new TypeError(`You have passed a playbackRate of type ${typeof props.playbackRate} to your <${component} /> component. Playback rate must a real number or undefined.`);
+    }
+    if (typeof props.playbackRate === 'number' &&
+        (isNaN(props.playbackRate) ||
+            !Number.isFinite(props.playbackRate) ||
+            props.playbackRate <= 0)) {
+        throw new TypeError(`You have passed a playbackRate of ${props.playbackRate} to your <${component} /> component. Playback rate must be a real number above 0.`);
+    }
+};
+
+const validateStartFromProps = (startFrom, endAt) => {
+    if (typeof startFrom !== 'undefined') {
+        if (typeof startFrom !== 'number') {
+            throw new TypeError(`type of startFrom prop must be a number, instead got type ${typeof startFrom}.`);
+        }
+        if (isNaN(startFrom) || startFrom === Infinity) {
+            throw new TypeError('startFrom prop can not be NaN or Infinity.');
+        }
+        if (startFrom < 0) {
+            throw new TypeError(`startFrom must be greater than equal to 0 instead got ${startFrom}.`);
+        }
+    }
+    if (typeof endAt !== 'undefined') {
+        if (typeof endAt !== 'number') {
+            throw new TypeError(`type of endAt prop must be a number, instead got type ${typeof endAt}.`);
+        }
+        if (isNaN(endAt)) {
+            throw new TypeError('endAt prop can not be NaN.');
+        }
+        if (endAt <= 0) {
+            throw new TypeError(`endAt must be a positive number, instead got ${endAt}.`);
+        }
+    }
+    if (endAt < startFrom) {
+        throw new TypeError('endAt prop must be greater than startFrom prop.');
+    }
+};
+
+const durationReducer = (state, action) => {
+    switch (action.type) {
+        case 'got-duration':
+            return {
+                ...state,
+                [getAbsoluteSrc(action.src)]: action.durationInSeconds,
+            };
+        default:
+            return state;
+    }
+};
+const DurationsContext = createContext({
+    durations: {},
+    setDurations: () => {
+        throw new Error('context missing');
+    },
+});
+const DurationsContextProvider = ({ children }) => {
+    const [durations, setDurations] = useReducer(durationReducer, {});
+    const value = useMemo(() => {
+        return {
+            durations,
+            setDurations,
+        };
+    }, [durations]);
+    return (jsx(DurationsContext.Provider, { value: value, children: children }));
+};
+
+const PreloadContext = createContext({});
+let preloads = {};
+let updaters = [];
+const setPreloads = (updater) => {
+    preloads = updater(preloads);
+    updaters.forEach((u) => u());
+};
+const PrefetchProvider = ({ children }) => {
+    const [_preloads, _setPreloads] = useState(() => preloads);
+    useEffect(() => {
+        const updaterFunction = () => {
+            _setPreloads(preloads);
+        };
+        updaters.push(updaterFunction);
+        return () => {
+            updaters = updaters.filter((u) => u !== updaterFunction);
+        };
+    }, []);
+    return (jsx(PreloadContext.Provider, { value: _preloads, children: children }));
+};
+
+const usePreload = (src) => {
+    var _a;
+    const preloads = useContext(PreloadContext);
+    return (_a = preloads[src]) !== null && _a !== void 0 ? _a : src;
+};
+const blobToBase64 = function (blob) {
+    const reader = new FileReader();
+    return new Promise((resolve, reject) => {
+        reader.onload = function () {
+            const dataUrl = reader.result;
+            resolve(dataUrl);
+        };
+        reader.onerror = (err) => {
+            return reject(err);
+        };
+        reader.readAsDataURL(blob);
+    });
+};
+/**
+ * @description When you call the preFetch() function, an asset will be fetched and kept in memory so it is ready when you want to play it in a <Player>.
+ * @see [Documentation](https://www.remotion.dev/docs/prefetch)
+ */
+const prefetch = (src, options) => {
+    var _a;
+    const method = (_a = options === null || options === void 0 ? void 0 : options.method) !== null && _a !== void 0 ? _a : 'blob-url';
+    if (getRemotionEnvironment() === 'rendering') {
+        return {
+            free: () => undefined,
+            waitUntilDone: () => Promise.resolve(src),
+        };
+    }
+    let canceled = false;
+    let objectUrl = null;
+    let resolve = () => undefined;
+    let reject = () => undefined;
+    const waitUntilDone = new Promise((res, rej) => {
+        resolve = res;
+        reject = rej;
+    });
+    const controller = new AbortController();
+    let canBeAborted = true;
+    fetch(src, {
+        signal: controller.signal,
+    })
+        .then((res) => {
+        canBeAborted = false;
+        if (canceled) {
+            return null;
+        }
+        if (!res.ok) {
+            throw new Error(`HTTP error, status = ${res.status}`);
+        }
+        return res.blob();
+    })
+        .then((buf) => {
+        if (!buf) {
+            return;
+        }
+        if (method === 'base64') {
+            return blobToBase64(buf);
+        }
+        return URL.createObjectURL(buf);
+    })
+        .then((url) => {
+        if (canceled) {
+            return;
+        }
+        objectUrl = url;
+        setPreloads((p) => ({
+            ...p,
+            [src]: objectUrl,
+        }));
+        resolve(objectUrl);
+    })
+        .catch((err) => {
+        reject(err);
+    });
+    return {
+        free: () => {
+            if (objectUrl) {
+                if (method === 'blob-url') {
+                    URL.revokeObjectURL(objectUrl);
+                }
+                setPreloads((p) => {
+                    const copy = { ...p };
+                    delete copy[src];
+                    return copy;
+                });
+            }
+            else {
+                canceled = true;
+                if (canBeAborted) {
+                    try {
+                        controller.abort();
+                    }
+                    catch (e) { }
+                }
+            }
+        },
+        waitUntilDone: () => {
+            return waitUntilDone;
+        },
+    };
+};
+
+/* eslint-disable no-bitwise */
+function mulberry32(a) {
+    let t = a + 0x6d2b79f5;
+    t = Math.imul(t ^ (t >>> 15), t | 1);
+    t ^= t + Math.imul(t ^ (t >>> 7), t | 61);
+    return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+}
+function hashCode(str) {
+    let i = 0;
+    let chr = 0;
+    let hash = 0;
+    for (i = 0; i < str.length; i++) {
+        chr = str.charCodeAt(i);
+        hash = (hash << 5) - hash + chr;
+        hash |= 0; // Convert to 32bit integer
+    }
+    return hash;
+}
+/**
+ * @description A deterministic pseudo-random number generator. Pass in the same seed and get the same pseudorandom number.
+ * @see [Documentation](https://remotion.dev/docs/random)
+ */
+const random = (seed, dummy) => {
+    if (dummy !== undefined) {
+        throw new TypeError('random() takes only one argument');
+    }
+    if (seed === null) {
+        return Math.random();
+    }
+    if (typeof seed === 'string') {
+        return mulberry32(hashCode(seed));
+    }
+    if (typeof seed === 'number') {
+        return mulberry32(seed * 10000000000);
+    }
+    throw new Error('random() argument must be a number or a string');
+};
+
+const useMediaStartsAt = () => {
+    var _a;
+    const parentSequence = useContext(SequenceContext);
+    const startsAt = Math.min(0, (_a = parentSequence === null || parentSequence === void 0 ? void 0 : parentSequence.relativeFrom) !== null && _a !== void 0 ? _a : 0);
+    return startsAt;
+};
+/**
+ * When passing a function as the prop for `volume`,
+ * we calculate the way more intuitive value for currentFrame
+ */
+const useFrameForVolumeProp = () => {
+    const frame = useCurrentFrame();
+    const startsAt = useMediaStartsAt();
+    return frame + startsAt;
+};
+
+const getAssetDisplayName = (filename) => {
+    if (/data:|blob:/.test(filename.substring(0, 5))) {
+        return 'Data URL';
+    }
+    const splitted = filename
+        .split('/')
+        .map((s) => s.split('\\'))
+        .flat(1);
+    return splitted[splitted.length - 1];
+};
+
+const playAndHandleNotAllowedError = (mediaRef, mediaType) => {
+    const { current } = mediaRef;
+    if (!current) {
+        return;
+    }
+    const prom = current.play();
+    if (prom.catch) {
+        prom.catch((err) => {
+            if (!current) {
+                return;
+            }
+            // Pause was called after play in Chrome
+            if (err.message.includes('request was interrupted by a call to pause')) {
+                return;
+            }
+            // Pause was called after play in Safari
+            if (err.message.includes('The operation was aborted.')) {
+                return;
+            }
+            // Pause was called after play in Firefox
+            if (err.message.includes('The fetching process for the media resource was aborted by the user agent')) {
+                return;
+            }
+            // Got replaced by a different audio source in Chromium
+            if (err.message.includes('request was interrupted by a new load request')) {
+                return;
+            }
+            // Audio tag got unmounted
+            if (err.message.includes('because the media was removed from the document')) {
+                return;
+            }
+            console.log(`Could not play ${mediaType} due to following error: `, err);
+            if (!current.muted) {
+                console.log(`The video will be muted and we'll retry playing it.`, err);
+                current.muted = true;
+                current.play();
+            }
+        });
+    }
+};
+
+const evaluateVolume = ({ frame, volume, mediaVolume = 1, allowAmplificationDuringRender, }) => {
+    const maxVolume = allowAmplificationDuringRender ? Infinity : 1;
+    if (typeof volume === 'number') {
+        return Math.min(maxVolume, volume * mediaVolume);
+    }
+    if (typeof volume === 'undefined') {
+        return Number(mediaVolume);
+    }
+    const evaluated = volume(frame) * mediaVolume;
+    if (typeof evaluated !== 'number') {
+        throw new TypeError(`You passed in a a function to the volume prop but it did not return a number but a value of type ${typeof evaluated} for frame ${frame}`);
+    }
+    if (Number.isNaN(evaluated)) {
+        throw new TypeError(`You passed in a function to the volume prop but it returned NaN for frame ${frame}.`);
+    }
+    if (!Number.isFinite(evaluated)) {
+        throw new TypeError(`You passed in a function to the volume prop but it returned a non-finite number for frame ${frame}.`);
+    }
+    return Math.max(0, Math.min(maxVolume, evaluated));
+};
+
+const didWarn$1 = {};
+const warnOnce$1 = (message) => {
+    if (didWarn$1[message]) {
+        return;
+    }
+    console.warn(message);
+    didWarn$1[message] = true;
+};
+const useMediaInTimeline = ({ volume, mediaVolume, mediaRef, src, mediaType, playbackRate, }) => {
+    const videoConfig = useVideoConfig();
+    const { rootId, audioAndVideoTags } = useContext(TimelineContext);
+    const parentSequence = useContext(SequenceContext);
+    const actualFrom = parentSequence
+        ? parentSequence.relativeFrom + parentSequence.cumulatedFrom
+        : 0;
+    const [playing] = usePlayingState();
+    const startsAt = useMediaStartsAt();
+    const { registerSequence, unregisterSequence } = useContext(SequenceManager);
+    const [id] = useState(() => String(Math.random()));
+    const [initialVolume] = useState(() => volume);
+    const nonce = useNonce();
+    const duration = parentSequence
+        ? Math.min(parentSequence.durationInFrames, videoConfig.durationInFrames)
+        : videoConfig.durationInFrames;
+    const doesVolumeChange = typeof volume === 'function';
+    const environment = useRemotionEnvironment();
+    const volumes = useMemo(() => {
+        if (typeof volume === 'number') {
+            return volume;
+        }
+        return new Array(Math.floor(Math.max(0, duration + startsAt)))
+            .fill(true)
+            .map((_, i) => {
+            return evaluateVolume({
+                frame: i + startsAt,
+                volume,
+                mediaVolume,
+                allowAmplificationDuringRender: false,
+            });
+        })
+            .join(',');
+    }, [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`);
+        }
+    }, [initialVolume, mediaType, src, volume]);
+    useEffect(() => {
+        var _a;
+        if (!mediaRef.current) {
+            return;
+        }
+        if (!src) {
+            throw new Error('No src passed');
+        }
+        if (environment !== 'preview' && process.env.NODE_ENV !== 'test') {
+            return;
+        }
+        registerSequence({
+            type: mediaType,
+            src,
+            id,
+            duration,
+            from: 0,
+            parent: (_a = parentSequence === null || parentSequence === void 0 ? void 0 : parentSequence.id) !== null && _a !== void 0 ? _a : null,
+            displayName: getAssetDisplayName(src),
+            rootId,
+            volume: volumes,
+            showInTimeline: true,
+            nonce,
+            startMediaFrom: 0 - startsAt,
+            doesVolumeChange,
+            loopDisplay: undefined,
+            playbackRate,
+        });
+        return () => {
+            unregisterSequence(id);
+        };
+    }, [
+        actualFrom,
+        duration,
+        id,
+        parentSequence,
+        src,
+        registerSequence,
+        rootId,
+        unregisterSequence,
+        videoConfig,
+        volumes,
+        doesVolumeChange,
+        nonce,
+        mediaRef,
+        mediaType,
+        startsAt,
+        playbackRate,
+        environment,
+    ]);
+    useEffect(() => {
+        const tag = {
+            id,
+            play: () => {
+                if (!playing) {
+                    // Don't play if for example in a <Freeze> state.
+                    return;
+                }
+                return playAndHandleNotAllowedError(mediaRef, mediaType);
+            },
+        };
+        audioAndVideoTags.current.push(tag);
+        return () => {
+            audioAndVideoTags.current = audioAndVideoTags.current.filter((a) => a.id !== id);
+        };
+    }, [audioAndVideoTags, id, mediaRef, mediaType, playing]);
+};
+
+// Taken from https://github.com/facebook/react-native/blob/0b9ea60b4fee8cacc36e7160e31b91fc114dbc0d/Libraries/Animated/src/nodes/AnimatedInterpolation.js
+function interpolateFunction(input, inputRange, outputRange, options) {
+    const { extrapolateLeft, extrapolateRight, easing } = options;
+    let result = input;
+    const [inputMin, inputMax] = inputRange;
+    const [outputMin, outputMax] = outputRange;
+    if (result < inputMin) {
+        if (extrapolateLeft === 'identity') {
+            return result;
+        }
+        if (extrapolateLeft === 'clamp') {
+            result = inputMin;
+        }
+    }
+    if (result > inputMax) {
+        if (extrapolateRight === 'identity') {
+            return result;
+        }
+        if (extrapolateRight === 'clamp') {
+            result = inputMax;
+        }
+    }
+    if (outputMin === outputMax) {
+        return outputMin;
+    }
+    // Input Range
+    result = (result - inputMin) / (inputMax - inputMin);
+    // Easing
+    result = easing(result);
+    // Output Range
+    result = result * (outputMax - outputMin) + outputMin;
+    return result;
+}
+function findRange(input, inputRange) {
+    let i;
+    for (i = 1; i < inputRange.length - 1; ++i) {
+        if (inputRange[i] >= input) {
+            break;
+        }
+    }
+    return i - 1;
+}
+function checkValidInputRange(arr) {
+    for (let i = 1; i < arr.length; ++i) {
+        if (!(arr[i] > arr[i - 1])) {
+            throw new Error(`inputRange must be strictly monotonically non-decreasing but got [${arr.join(',')}]`);
+        }
+    }
+}
+function checkInfiniteRange(name, arr) {
+    if (arr.length < 2) {
+        throw new Error(name + ' must have at least 2 elements');
+    }
+    for (const index in arr) {
+        if (typeof arr[index] !== 'number') {
+            throw new Error(`${name} must contain only numbers`);
+        }
+        if (arr[index] === -Infinity || arr[index] === Infinity) {
+            throw new Error(`${name} must contain only finite numbers, but got [${arr.join(',')}]`);
+        }
+    }
+}
+/**
+ * Map a value from an input range to an output range.
+ * @link https://www.remotion.dev/docs/interpolate
+ * @param {!number} input value to interpolate
+ * @param {!number[]} inputRange range of values that you expect the input to assume.
+ * @param {!number[]} outputRange range of output values that you want the input to map to.
+ * @param {?object} options
+ * @param {?Function} options.easing easing function which allows you to customize the input, for example to apply a certain easing function. By default, the input is left unmodified, resulting in a pure linear interpolation {@link https://www.remotion.dev/docs/easing}
+ * @param {string=} [options.extrapolateLeft="extend"] What should happen if the input value is outside left the input range, default: "extend" {@link https://www.remotion.dev/docs/interpolate#extrapolateleft}
+ * @param {string=} [options.extrapolateRight="extend"] Same as extrapolateLeft, except for values outside right the input range {@link https://www.remotion.dev/docs/interpolate#extrapolateright}
+ */
+function interpolate(input, inputRange, outputRange, options) {
+    var _a;
+    if (typeof input === 'undefined') {
+        throw new Error('input can not be undefined');
+    }
+    if (typeof inputRange === 'undefined') {
+        throw new Error('inputRange can not be undefined');
+    }
+    if (typeof outputRange === 'undefined') {
+        throw new Error('outputRange can not be undefined');
+    }
+    if (inputRange.length !== outputRange.length) {
+        throw new Error('inputRange (' +
+            inputRange.length +
+            ') and outputRange (' +
+            outputRange.length +
+            ') must have the same length');
+    }
+    checkInfiniteRange('inputRange', inputRange);
+    checkInfiniteRange('outputRange', outputRange);
+    checkValidInputRange(inputRange);
+    const easing = (_a = options === null || options === void 0 ? void 0 : options.easing) !== null && _a !== void 0 ? _a : ((num) => num);
+    let extrapolateLeft = 'extend';
+    if ((options === null || options === void 0 ? void 0 : options.extrapolateLeft) !== undefined) {
+        extrapolateLeft = options.extrapolateLeft;
+    }
+    let extrapolateRight = 'extend';
+    if ((options === null || options === void 0 ? void 0 : options.extrapolateRight) !== undefined) {
+        extrapolateRight = options.extrapolateRight;
+    }
+    if (typeof input !== 'number') {
+        throw new TypeError('Cannot interpolate an input which is not a number');
+    }
+    const range = findRange(input, inputRange);
+    return interpolateFunction(input, [inputRange[range], inputRange[range + 1]], [outputRange[range], outputRange[range + 1]], {
+        easing,
+        extrapolateLeft,
+        extrapolateRight,
+    });
+}
+
+// Calculate the `.currentTime` of a video or audio element
+const getExpectedMediaFrameUncorrected = ({ frame, playbackRate, startFrom, }) => {
+    return interpolate(frame, [-1, startFrom, startFrom + 1], [-1, startFrom, startFrom + playbackRate]);
+};
+const getMediaTime = ({ fps, frame, src, playbackRate, startFrom, mediaType, }) => {
+    const expectedFrame = getExpectedMediaFrameUncorrected({
+        frame,
+        playbackRate,
+        startFrom,
+    });
+    const isChrome = typeof window !== 'undefined' &&
+        window.navigator.userAgent.match(/Chrome\/([0-9]+)/);
+    if (isChrome &&
+        Number(isChrome[1]) < 112 &&
+        mediaType === 'video' &&
+        src.endsWith('.mp4')) {
+        // In Chrome, for MP4s, if 30fps, the first frame is still displayed at 0.033333
+        // even though after that it increases by 0.033333333 each.
+        // So frame = 0 in Remotion is like frame = 1 for the browser
+        return (expectedFrame + 1) / fps;
+    }
+    // For WebM videos, we need to add a little bit of shift to get the right frame.
+    const msPerFrame = 1000 / fps;
+    const msShift = msPerFrame / 2;
+    return (expectedFrame * msPerFrame + msShift) / 1000;
+};
+
+const alreadyWarned = {};
+const warnAboutNonSeekableMedia = (ref, type) => {
+    // Media is not loaded yet, but this does not yet mean something is wrong with the media
+    if (ref === null) {
+        return;
+    }
+    if (ref.seekable.length === 0) {
+        return;
+    }
+    if (ref.seekable.length > 1) {
+        return;
+    }
+    if (alreadyWarned[ref.src]) {
+        return;
+    }
+    const range = { start: ref.seekable.start(0), end: ref.seekable.end(0) };
+    if (range.start === 0 && range.end === 0) {
+        const msg = `The media ${ref.src} cannot be seeked. This could be one of two reasons: 1) The media resource was replaced while the video is playing but it was not loaded yet. 2) The media does not support seeking. Please see https://remotion.dev/docs/non-seekable-media for assistance.`;
+        if (type === 'console-error') {
+            console.error(msg);
+        }
+        else if (type === 'console-warning') {
+            console.warn(`The media ${ref.src} does not support seeking. The video will render fine, but may not play correctly in the Remotion Studio and in the <Player>. See https://remotion.dev/docs/non-seekable-media for an explanation.`);
+        }
+        else {
+            throw new Error(msg);
+        }
+        alreadyWarned[ref.src] = true;
+    }
+};
+
+const DEFAULT_ACCEPTABLE_TIMESHIFT = 0.45;
+const useMediaPlayback = ({ mediaRef, src, mediaType, playbackRate: localPlaybackRate, onlyWarnForMediaSeekingError, acceptableTimeshift, }) => {
+    const { playbackRate: globalPlaybackRate } = useContext(TimelineContext);
+    const frame = useCurrentFrame();
+    const absoluteFrame = useTimelinePosition();
+    const [playing] = usePlayingState();
+    const { fps } = useVideoConfig();
+    const mediaStartsAt = useMediaStartsAt();
+    const playbackRate = localPlaybackRate * globalPlaybackRate;
+    useEffect(() => {
+        var _a;
+        if (!playing) {
+            (_a = mediaRef.current) === null || _a === void 0 ? void 0 : _a.pause();
+        }
+    }, [mediaRef, mediaType, playing]);
+    useEffect(() => {
+        const tagName = mediaType === 'audio' ? '<Audio>' : '<Video>';
+        if (!mediaRef.current) {
+            throw new Error(`No ${mediaType} ref found`);
+        }
+        if (!src) {
+            throw new Error(`No 'src' attribute was passed to the ${tagName} element.`);
+        }
+        mediaRef.current.playbackRate = Math.max(0, playbackRate);
+        const shouldBeTime = getMediaTime({
+            fps,
+            frame,
+            src,
+            playbackRate: localPlaybackRate,
+            startFrom: -mediaStartsAt,
+            mediaType,
+        });
+        const isTime = mediaRef.current.currentTime;
+        const timeShift = Math.abs(shouldBeTime - isTime);
+        if (timeShift > acceptableTimeshift && !mediaRef.current.ended) {
+            // If scrubbing around, adjust timing
+            // or if time shift is bigger than 0.2sec
+            mediaRef.current.currentTime = shouldBeTime;
+            if (!onlyWarnForMediaSeekingError) {
+                warnAboutNonSeekableMedia(mediaRef.current, onlyWarnForMediaSeekingError ? 'console-warning' : 'console-error');
+            }
+        }
+        // Only perform a seek if the time is not already the same.
+        // Chrome rounds to 6 digits, so 0.033333333 -> 0.033333,
+        // therefore a threshold is allowed.
+        // Refer to the https://github.com/remotion-dev/video-buffering-example
+        // which is fixed by only seeking conditionally.
+        const makesSenseToSeek = Math.abs(mediaRef.current.currentTime - shouldBeTime) > 0.00001;
+        if (!playing || absoluteFrame === 0) {
+            if (makesSenseToSeek) {
+                mediaRef.current.currentTime = shouldBeTime;
+            }
+        }
+        if (mediaRef.current.paused && !mediaRef.current.ended && playing) {
+            if (makesSenseToSeek) {
+                mediaRef.current.currentTime = shouldBeTime;
+            }
+            playAndHandleNotAllowedError(mediaRef, mediaType);
+        }
+    }, [
+        absoluteFrame,
+        fps,
+        playbackRate,
+        frame,
+        mediaRef,
+        mediaType,
+        playing,
+        src,
+        mediaStartsAt,
+        localPlaybackRate,
+        onlyWarnForMediaSeekingError,
+        acceptableTimeshift,
+    ]);
+};
+
+// Returns the real volume of the audio or video while playing,
+// no matter what the supposed volume should be
+const useMediaTagVolume = (mediaRef) => {
+    const [actualVolume, setActualVolume] = useState(1);
+    useEffect(() => {
+        const ref = mediaRef.current;
+        if (!ref) {
+            return;
+        }
+        const onChange = () => {
+            setActualVolume(ref.volume);
+        };
+        ref.addEventListener('volumechange', onChange);
+        return () => ref.removeEventListener('volumechange', onChange);
+    }, [mediaRef]);
+    useEffect(() => {
+        const ref = mediaRef.current;
+        if (!ref) {
+            return;
+        }
+        if (ref.volume !== actualVolume) {
+            setActualVolume(ref.volume);
+        }
+    }, [actualVolume, mediaRef]);
+    return actualVolume;
+};
+
+const FLOATING_POINT_ERROR_THRESHOLD = 0.00001;
+const isApproximatelyTheSame = (num1, num2) => {
+    return Math.abs(num1 - num2) < FLOATING_POINT_ERROR_THRESHOLD;
+};
+
+const useSyncVolumeWithMediaTag = ({ volumePropFrame, actualVolume, volume, mediaVolume, mediaRef, }) => {
+    useEffect(() => {
+        const userPreferredVolume = evaluateVolume({
+            frame: volumePropFrame,
+            volume,
+            mediaVolume,
+            allowAmplificationDuringRender: false,
+        });
+        if (!isApproximatelyTheSame(userPreferredVolume, actualVolume) &&
+            mediaRef.current) {
+            mediaRef.current.volume = userPreferredVolume;
+        }
+    }, [actualVolume, volumePropFrame, mediaRef, volume, mediaVolume]);
+};
+
+const MediaVolumeContext = createContext({
+    mediaMuted: false,
+    mediaVolume: 1,
+});
+const SetMediaVolumeContext = createContext({
+    setMediaMuted: () => {
+        throw new Error('default');
+    },
+    setMediaVolume: () => {
+        throw new Error('default');
+    },
+});
+const useMediaVolumeState = () => {
+    const { mediaVolume } = useContext(MediaVolumeContext);
+    const { setMediaVolume } = useContext(SetMediaVolumeContext);
+    return useMemo(() => {
+        return [mediaVolume, setMediaVolume];
+    }, [mediaVolume, setMediaVolume]);
+};
+const useMediaMutedState = () => {
+    const { mediaMuted } = useContext(MediaVolumeContext);
+    const { setMediaMuted } = useContext(SetMediaVolumeContext);
+    return useMemo(() => {
+        return [mediaMuted, setMediaMuted];
+    }, [mediaMuted, setMediaMuted]);
+};
+
+const EMPTY_AUDIO = 'data:audio/mp3;base64,/+MYxAAJcAV8AAgAABn//////+/gQ5BAMA+D4Pg+BAQBAEAwD4Pg+D4EBAEAQDAPg++hYBH///hUFQVBUFREDQNHmf///////+MYxBUGkAGIMAAAAP/29Xt6lUxBTUUzLjEwMFVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVV/+MYxDUAAANIAAAAAFVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVV';
+const compareProps = (obj1, obj2) => {
+    const keysA = Object.keys(obj1).sort();
+    const keysB = Object.keys(obj2).sort();
+    if (keysA.length !== keysB.length) {
+        return false;
+    }
+    for (let i = 0; i < keysA.length; i++) {
+        // Not the same keys
+        if (keysA[i] !== keysB[i]) {
+            return false;
+        }
+        // Not the same values
+        if (obj1[keysA[i]] !== obj2[keysB[i]]) {
+            return false;
+        }
+    }
+    return true;
+};
+const didPropChange = (key, newProp, prevProp) => {
+    // /music.mp3 and http://localhost:3000/music.mp3 are the same
+    if (key === 'src' &&
+        !prevProp.startsWith('data:') &&
+        !newProp.startsWith('data:')) {
+        return (new URL(prevProp, window.location.origin).toString() !==
+            new URL(newProp, window.location.origin).toString());
+    }
+    if (prevProp === newProp) {
+        return false;
+    }
+    return true;
+};
+const SharedAudioContext = createContext(null);
+const SharedAudioContextProvider = ({ children, numberOfAudioTags, component }) => {
+    const audios = useRef([]);
+    const [initialNumberOfAudioTags] = useState(numberOfAudioTags);
+    if (numberOfAudioTags !== initialNumberOfAudioTags) {
+        throw new Error('The number of shared audio tags has changed dynamically. Once you have set this property, you cannot change it afterwards.');
+    }
+    const refs = useMemo(() => {
+        return new Array(numberOfAudioTags).fill(true).map(() => {
+            return { id: Math.random(), ref: createRef() };
+        });
+    }, [numberOfAudioTags]);
+    const takenAudios = useRef(new Array(numberOfAudioTags).fill(false));
+    const rerenderAudios = useCallback(() => {
+        refs.forEach(({ ref, id }) => {
+            var _a;
+            const data = (_a = audios.current) === null || _a === void 0 ? void 0 : _a.find((a) => a.id === id);
+            const { current } = ref;
+            if (!current) {
+                // Whole player has been unmounted, the refs don't exist anymore.
+                // It is not an error anymore though
+                return;
+            }
+            if (data === undefined) {
+                current.src = EMPTY_AUDIO;
+                return;
+            }
+            if (!data) {
+                throw new TypeError('Expected audio data to be there');
+            }
+            Object.keys(data.props).forEach((key) => {
+                // @ts-expect-error
+                if (didPropChange(key, data.props[key], current[key])) {
+                    // @ts-expect-error
+                    current[key] = data.props[key];
+                }
+            });
+        });
+    }, [refs]);
+    const registerAudio = useCallback((aud, audioId) => {
+        var _a, _b;
+        const found = (_a = audios.current) === null || _a === void 0 ? void 0 : _a.find((a) => a.audioId === audioId);
+        if (found) {
+            return found;
+        }
+        const firstFreeAudio = takenAudios.current.findIndex((a) => a === false);
+        if (firstFreeAudio === -1) {
+            throw new Error(`Tried to simultaneously mount ${numberOfAudioTags + 1} <Audio /> tags at the same time. With the current settings, the maximum amount of <Audio /> tags is limited to ${numberOfAudioTags} at the same time. Remotion pre-mounts silent audio tags to help avoid browser autoplay restrictions. See https://remotion.dev/docs/player/autoplay#use-the-numberofsharedaudiotags-property for more information on how to increase this limit.`);
+        }
+        const { id, ref } = refs[firstFreeAudio];
+        const cloned = [...takenAudios.current];
+        cloned[firstFreeAudio] = id;
+        takenAudios.current = cloned;
+        const newElem = {
+            props: aud,
+            id,
+            el: ref,
+            audioId,
+        };
+        (_b = audios.current) === null || _b === void 0 ? void 0 : _b.push(newElem);
+        rerenderAudios();
+        return newElem;
+    }, [numberOfAudioTags, refs, rerenderAudios]);
+    const unregisterAudio = useCallback((id) => {
+        var _a;
+        const cloned = [...takenAudios.current];
+        const index = refs.findIndex((r) => r.id === id);
+        if (index === -1) {
+            throw new TypeError('Error occured in ');
+        }
+        cloned[index] = false;
+        takenAudios.current = cloned;
+        audios.current = (_a = audios.current) === null || _a === void 0 ? void 0 : _a.filter((a) => a.id !== id);
+        rerenderAudios();
+    }, [refs, rerenderAudios]);
+    const updateAudio = useCallback(({ aud, audioId, id, }) => {
+        var _a;
+        let changed = false;
+        audios.current = (_a = audios.current) === null || _a === void 0 ? void 0 : _a.map((prevA) => {
+            if (prevA.id === id) {
+                const isTheSame = compareProps(aud, prevA.props);
+                if (isTheSame) {
+                    return prevA;
+                }
+                changed = true;
+                return {
+                    ...prevA,
+                    props: aud,
+                    audioId,
+                };
+            }
+            return prevA;
+        });
+        if (changed) {
+            rerenderAudios();
+        }
+    }, [rerenderAudios]);
+    const playAllAudios = useCallback(() => {
+        refs.forEach((ref) => {
+            var _a;
+            (_a = ref.ref.current) === null || _a === void 0 ? void 0 : _a.play();
+        });
+    }, [refs]);
+    const value = useMemo(() => {
+        return {
+            registerAudio,
+            unregisterAudio,
+            updateAudio,
+            playAllAudios,
+            numberOfAudioTags,
+        };
+    }, [
+        numberOfAudioTags,
+        playAllAudios,
+        registerAudio,
+        unregisterAudio,
+        updateAudio,
+    ]);
+    // Fixing a bug: In React, if a component is unmounted using useInsertionEffect, then
+    // the cleanup function does sometimes not work properly. That is why when we
+    // are changing the composition, we reset the audio state.
+    // TODO: Possibly this does not save the problem completely, since the
+    // if an audio tag that is inside a sequence will also not be removed
+    // from the shared audios.
+    const resetAudio = useCallback(() => {
+        takenAudios.current = new Array(numberOfAudioTags).fill(false);
+        audios.current = [];
+        rerenderAudios();
+    }, [numberOfAudioTags, rerenderAudios]);
+    useEffect(() => {
+        return () => {
+            resetAudio();
+        };
+    }, [component, resetAudio]);
+    return (jsxs(SharedAudioContext.Provider, { value: value, children: [refs.map(({ id, ref }) => {
+                return jsx("audio", { ref: ref, src: EMPTY_AUDIO }, id);
+            }), children] }));
+};
+const useSharedAudio = (aud, audioId) => {
+    var _a;
+    const ctx = useContext(SharedAudioContext);
+    /**
+     * We work around this in React 18 so an audio tag will only register itself once
+     */
+    const [elem] = useState(() => {
+        if (ctx && ctx.numberOfAudioTags > 0) {
+            return ctx.registerAudio(aud, audioId);
+        }
+        return {
+            el: React.createRef(),
+            id: Math.random(),
+            props: aud,
+            audioId,
+        };
+    });
+    /**
+     * Effects in React 18 fire twice, and we are looking for a way to only fire it once.
+     * - useInsertionEffect only fires once. If it's available we are in React 18.
+     * - useLayoutEffect only fires once in React 17.
+     *
+     * Need to import it from React to fix React 17 ESM support.
+     */
+    const effectToUse = (_a = React.useInsertionEffect) !== null && _a !== void 0 ? _a : React.useLayoutEffect;
+    if (typeof document !== 'undefined') {
+        effectToUse(() => {
+            if (ctx && ctx.numberOfAudioTags > 0) {
+                ctx.updateAudio({ id: elem.id, aud, audioId });
+            }
+        }, [aud, ctx, elem.id, audioId]);
+        effectToUse(() => {
+            return () => {
+                if (ctx && ctx.numberOfAudioTags > 0) {
+                    ctx.unregisterAudio(elem.id);
+                }
+            };
+        }, [ctx, elem.id]);
+    }
+    return elem;
+};
+
+const AudioForDevelopmentForwardRefFunction = (props, ref) => {
+    const [initialShouldPreMountAudioElements] = useState(props.shouldPreMountAudioTags);
+    if (props.shouldPreMountAudioTags !== initialShouldPreMountAudioElements) {
+        throw new Error('Cannot change the behavior for pre-mounting audio tags dynamically.');
+    }
+    const [mediaVolume] = useMediaVolumeState();
+    const [mediaMuted] = useMediaMutedState();
+    const volumePropFrame = useFrameForVolumeProp();
+    const { volume, muted, playbackRate, shouldPreMountAudioTags, src, onDuration, acceptableTimeShiftInSeconds, ...nativeProps } = props;
+    if (!src) {
+        throw new TypeError("No 'src' was passed to <Audio>.");
+    }
+    const preloadedSrc = usePreload(src);
+    const propsToPass = useMemo(() => {
+        return {
+            muted: muted || mediaMuted,
+            src: preloadedSrc,
+            ...nativeProps,
+        };
+    }, [mediaMuted, muted, nativeProps, preloadedSrc]);
+    const sequenceContext = useContext(SequenceContext);
+    // Generate a string that's as unique as possible for this asset
+    // but at the same time deterministic. We use it to combat strict mode issues.
+    const id = useMemo(() => `audio-${random(src !== null && src !== void 0 ? 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}-muted:${props.muted}-loop:${props.loop}`, [
+        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,
+        props.muted,
+        props.loop,
+    ]);
+    const audioRef = useSharedAudio(propsToPass, id).el;
+    const actualVolume = useMediaTagVolume(audioRef);
+    useSyncVolumeWithMediaTag({
+        volumePropFrame,
+        actualVolume,
+        volume,
+        mediaVolume,
+        mediaRef: audioRef,
+    });
+    useMediaInTimeline({
+        volume,
+        mediaVolume,
+        mediaRef: audioRef,
+        src,
+        mediaType: 'audio',
+        playbackRate: playbackRate !== null && playbackRate !== void 0 ? playbackRate : 1,
+    });
+    useMediaPlayback({
+        mediaRef: audioRef,
+        src,
+        mediaType: 'audio',
+        playbackRate: playbackRate !== null && playbackRate !== void 0 ? playbackRate : 1,
+        onlyWarnForMediaSeekingError: false,
+        acceptableTimeshift: acceptableTimeShiftInSeconds !== null && acceptableTimeShiftInSeconds !== void 0 ? acceptableTimeShiftInSeconds : DEFAULT_ACCEPTABLE_TIMESHIFT,
+    });
+    useImperativeHandle(ref, () => {
+        return audioRef.current;
+    }, [audioRef]);
+    const currentOnDurationCallback = useRef();
+    currentOnDurationCallback.current = onDuration;
+    useEffect(() => {
+        var _a;
+        const { current } = audioRef;
+        if (!current) {
+            return;
+        }
+        if (current.duration) {
+            (_a = currentOnDurationCallback.current) === null || _a === void 0 ? void 0 : _a.call(currentOnDurationCallback, current.src, current.duration);
+            return;
+        }
+        const onLoadedMetadata = () => {
+            var _a;
+            (_a = currentOnDurationCallback.current) === null || _a === void 0 ? void 0 : _a.call(currentOnDurationCallback, current.src, current.duration);
+        };
+        current.addEventListener('loadedmetadata', onLoadedMetadata);
+        return () => {
+            current.removeEventListener('loadedmetadata', onLoadedMetadata);
+        };
+    }, [audioRef, src]);
+    if (initialShouldPreMountAudioElements) {
+        return null;
+    }
+    return jsx("audio", { ref: audioRef, ...propsToPass });
+};
+const AudioForDevelopment = forwardRef(AudioForDevelopmentForwardRefFunction);
+
+const AssetManager = createContext({
+    registerAsset: () => undefined,
+    unregisterAsset: () => undefined,
+    assets: [],
+});
+const AssetManagerProvider = ({ children }) => {
+    const [assets, setAssets] = useState([]);
+    const registerAsset = useCallback((asset) => {
+        setAssets((assts) => {
+            return [...assts, asset];
+        });
+    }, []);
+    const unregisterAsset = useCallback((id) => {
+        setAssets((assts) => {
+            return assts.filter((a) => a.id !== id);
+        });
+    }, []);
+    useLayoutEffect(() => {
+        if (typeof window !== 'undefined') {
+            window.remotion_collectAssets = () => {
+                setAssets([]); // clear assets at next render
+                return assets;
+            };
+        }
+    }, [assets]);
+    const contextValue = useMemo(() => {
+        return {
+            registerAsset,
+            unregisterAsset,
+            assets,
+        };
+    }, [assets, registerAsset, unregisterAsset]);
+    return (jsx(AssetManager.Provider, { value: contextValue, children: children }));
+};
+
+if (typeof window !== 'undefined') {
+    window.remotion_renderReady = false;
+}
+let handles = [];
+const timeouts = {};
+const DELAY_RENDER_CALLSTACK_TOKEN = 'The delayRender was called:';
+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.
+ * @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)
+ */
+const delayRender = (label) => {
+    var _a, _b, _c;
+    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));
+    }
+    const handle = Math.random();
+    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 (getRemotionEnvironment() === 'rendering') {
+        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_renderReady = false;
+    }
+    return handle;
+};
+/**
+ * @description Unblock a render that has been blocked by delayRender()
+ * @param handle The return value of delayRender().
+ * @see [Documentation](https://www.remotion.dev/docs/continue-render)
+ */
+const continueRender = (handle) => {
+    if (typeof handle === 'undefined') {
+        throw new TypeError('The continueRender() method must be called with a parameter that is the return value of delayRender(). No value was passed.');
+    }
+    if (typeof handle !== 'number') {
+        throw new TypeError('The parameter passed into continueRender() must be the return value of delayRender() which is a number. Got: ' +
+            JSON.stringify(handle));
+    }
+    handles = handles.filter((h) => {
+        if (h === handle) {
+            if (getRemotionEnvironment() === 'rendering') {
+                clearTimeout(timeouts[handle]);
+            }
+            return false;
+        }
+        return true;
+    });
+    if (handles.length === 0 && typeof window !== 'undefined') {
+        window.remotion_renderReady = true;
+    }
+};
+
+const AudioForRenderingRefForwardingFunction = (props, ref) => {
+    const audioRef = useRef(null);
+    const absoluteFrame = useTimelinePosition();
+    const volumePropFrame = useFrameForVolumeProp();
+    const frame = useCurrentFrame();
+    const sequenceContext = useContext(SequenceContext);
+    const { registerAsset, unregisterAsset } = useContext(AssetManager);
+    const environment = useRemotionEnvironment();
+    // Generate a string that's as unique as possible for this asset
+    // but at the same time the same on all threads
+    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, ...nativeProps } = props;
+    const volume = evaluateVolume({
+        volume: volumeProp,
+        frame: volumePropFrame,
+        mediaVolume: 1,
+        allowAmplificationDuringRender: allowAmplificationDuringRender !== null && allowAmplificationDuringRender !== void 0 ? allowAmplificationDuringRender : false,
+    });
+    useImperativeHandle(ref, () => {
+        return audioRef.current;
+    }, []);
+    useEffect(() => {
+        var _a;
+        if (!props.src) {
+            throw new Error('No src passed');
+        }
+        if (!window.remotion_audioEnabled) {
+            return;
+        }
+        if (props.muted) {
+            return;
+        }
+        if (volume <= 0) {
+            return;
+        }
+        registerAsset({
+            type: 'audio',
+            src: getAbsoluteSrc(props.src),
+            id,
+            frame: absoluteFrame,
+            volume,
+            mediaFrame: frame,
+            playbackRate: (_a = props.playbackRate) !== null && _a !== void 0 ? _a : 1,
+            allowAmplificationDuringRender: allowAmplificationDuringRender !== null && allowAmplificationDuringRender !== void 0 ? allowAmplificationDuringRender : false,
+        });
+        return () => unregisterAsset(id);
+    }, [
+        props.muted,
+        props.src,
+        registerAsset,
+        absoluteFrame,
+        id,
+        unregisterAsset,
+        volume,
+        volumePropFrame,
+        frame,
+        playbackRate,
+        props.playbackRate,
+        allowAmplificationDuringRender,
+    ]);
+    const { src } = props;
+    // If audio source switches, make new handle
+    if (environment === 'rendering') {
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        useLayoutEffect(() => {
+            if (process.env.NODE_ENV === 'test') {
+                return;
+            }
+            const newHandle = delayRender('Loading <Audio> duration with src=' + src);
+            const { current } = audioRef;
+            const didLoad = () => {
+                if (current === null || current === void 0 ? void 0 : current.duration) {
+                    onDuration(current.src, current.duration);
+                }
+                continueRender(newHandle);
+            };
+            if (current === null || current === void 0 ? void 0 : current.duration) {
+                onDuration(current.src, current.duration);
+                continueRender(newHandle);
+            }
+            else {
+                current === null || current === void 0 ? void 0 : current.addEventListener('loadedmetadata', didLoad, { once: true });
+            }
+            // If tag gets unmounted, clear pending handles because video metadata is not going to load
+            return () => {
+                current === null || current === void 0 ? void 0 : current.removeEventListener('loadedmetadata', didLoad);
+                continueRender(newHandle);
+            };
+        }, [src, onDuration]);
+    }
+    return jsx("audio", { ref: audioRef, ...nativeProps });
+};
+const AudioForRendering = forwardRef(AudioForRenderingRefForwardingFunction);
+
+const AudioRefForwardingFunction = (props, ref) => {
+    var _a;
+    const audioContext = useContext(SharedAudioContext);
+    const { startFrom, endAt, ...otherProps } = props;
+    const { loop, ...propsOtherThanLoop } = props;
+    const { fps } = useVideoConfig();
+    const environment = useRemotionEnvironment();
+    const { durations, setDurations } = useContext(DurationsContext);
+    if (typeof props.src !== 'string') {
+        throw new TypeError(`The \`<Audio>\` tag requires a string for \`src\`, but got ${JSON.stringify(props.src)} instead.`);
+    }
+    const onError = useCallback((e) => {
+        console.log(e.currentTarget.error);
+        cancelRender(new Error(`Could not play audio with src ${otherProps.src}: ${e.currentTarget.error}. See https://remotion.dev/docs/media-playback-error for help.`));
+    }, [otherProps.src]);
+    const onDuration = useCallback((src, durationInSeconds) => {
+        setDurations({ type: 'got-duration', durationInSeconds, src });
+    }, [setDurations]);
+    if (loop && props.src && durations[getAbsoluteSrc(props.src)] !== undefined) {
+        const duration = Math.floor(durations[getAbsoluteSrc(props.src)] * fps);
+        const playbackRate = (_a = props.playbackRate) !== null && _a !== void 0 ? _a : 1;
+        const actualDuration = duration / playbackRate;
+        return (jsx(Loop, { layout: "none", durationInFrames: Math.floor(actualDuration), children: jsx(Audio, { ...propsOtherThanLoop, ref: ref }) }));
+    }
+    if (typeof startFrom !== 'undefined' || typeof endAt !== 'undefined') {
+        validateStartFromProps(startFrom, endAt);
+        const startFromFrameNo = startFrom !== null && startFrom !== void 0 ? startFrom : 0;
+        const endAtFrameNo = endAt !== null && endAt !== void 0 ? endAt : Infinity;
+        return (jsx(Sequence, { layout: "none", from: 0 - startFromFrameNo, showInTimeline: false, durationInFrames: endAtFrameNo, children: jsx(Audio, { ...otherProps, ref: ref }) }));
+    }
+    validateMediaProps(props, 'Audio');
+    if (environment === 'rendering') {
+        return (jsx(AudioForRendering, { onDuration: onDuration, ...props, ref: ref, onError: onError }));
+    }
+    return (jsx(AudioForDevelopment, { shouldPreMountAudioTags: audioContext !== null && audioContext.numberOfAudioTags > 0, ...props, ref: ref, onError: onError, onDuration: onDuration }));
+};
+/**
+ * @description With this component, you can add audio to your video. All audio formats which are supported by Chromium are supported by the component.
+ * @see [Documentation](https://www.remotion.dev/docs/audio)
+ */
+const Audio = forwardRef(AudioRefForwardingFunction);
+
+const validateFolderName = (name) => {
+    if (name === undefined || name === null) {
+        throw new TypeError('You must pass a name to a <Folder />.');
+    }
+    if (typeof name !== 'string') {
+        throw new TypeError(`The "name" you pass into <Folder /> must be a string. Got: ${typeof name}`);
+    }
+    if (!isFolderNameValid(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,
+    parentName: null,
+});
+/**
+ * @description By wrapping a <Composition /> inside a <Folder />, you can visually categorize it in your sidebar, should you have many compositions.
+ * @see [Documentation](https://www.remotion.dev/docs/folder)
+ */
+const Folder = ({ name, children, }) => {
+    const parent = useContext(FolderContext);
+    const { registerFolder, unregisterFolder } = useContext(CompositionManager);
+    validateFolderName(name);
+    const parentNameArr = [parent.parentName, parent.folderName].filter(truthy);
+    const parentName = parentNameArr.length === 0 ? null : parentNameArr.join('/');
+    const value = useMemo(() => {
+        return {
+            folderName: name,
+            parentName,
+        };
+    }, [name, parentName]);
+    useEffect(() => {
+        registerFolder(name, parentName);
+        return () => {
+            unregisterFolder(name, parentName);
+        };
+    }, [name, parent.folderName, parentName, registerFolder, unregisterFolder]);
+    return (jsx(FolderContext.Provider, { value: value, children: children }));
+};
+
+const rotate = {
+    transform: `rotate(90deg)`,
+};
+const ICON_SIZE = 40;
+const label = {
+    color: 'white',
+    fontSize: 14,
+    fontFamily: 'sans-serif',
+};
+const container = {
+    justifyContent: 'center',
+    alignItems: 'center',
+};
+const Loading = () => {
+    return (jsxs(AbsoluteFill, { style: container, id: "remotion-comp-loading", children: [jsx("style", { type: "text/css", children: `
+				@keyframes anim {
+					from {
+						opacity: 0
+					}
+					to {
+						opacity: 1
+					}
+				}
+				#remotion-comp-loading {
+					animation: anim 2s;
+					animation-fill-mode: forwards;
+				}
+			` }), jsx("svg", { width: ICON_SIZE, height: ICON_SIZE, viewBox: "-100 -100 400 400", style: rotate, children: jsx("path", { fill: "#555", stroke: "#555", strokeWidth: "100", strokeLinejoin: "round", d: "M 2 172 a 196 100 0 0 0 195 5 A 196 240 0 0 0 100 2.259 A 196 240 0 0 0 2 172 z" }) }), jsxs("p", { style: label, children: ["Resolving ", '<Suspense>', "..."] })] }));
+};
+
+let _portalNode = null;
+const portalNode = () => {
+    if (!_portalNode) {
+        if (typeof document === 'undefined') {
+            throw new Error('Tried to call an API that only works in the browser from outside the browser');
+        }
+        _portalNode = document.createElement('div');
+        _portalNode.style.position = 'absolute';
+        _portalNode.style.top = '0px';
+        _portalNode.style.left = '0px';
+        _portalNode.style.right = '0px';
+        _portalNode.style.bottom = '0px';
+        _portalNode.style.width = '100%';
+        _portalNode.style.height = '100%';
+        _portalNode.style.display = 'flex';
+        _portalNode.style.flexDirection = 'column';
+    }
+    return _portalNode;
+};
+
+// Expected, it can be any component props
+const useLazyComponent = (compProps) => {
+    const lazy = useMemo(() => {
+        if ('lazyComponent' in compProps) {
+            return React.lazy(compProps.lazyComponent);
+        }
+        if ('component' in compProps) {
+            // In SSR, suspense is not yet supported, we cannot use React.lazy
+            if (typeof document === 'undefined') {
+                return compProps.component;
+            }
+            return React.lazy(() => Promise.resolve({ default: compProps.component }));
+        }
+        throw new Error("You must pass either 'component' or 'lazyComponent'");
+        // Very important to leave the dependencies as they are, or instead
+        // the player will remount on every frame.
+        // @ts-expect-error
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [compProps.component, compProps.lazyComponent]);
+    return lazy;
+};
+
+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) => {
+    if (!defaultProps) {
+        return;
+    }
+    if (typeof defaultProps !== 'object') {
+        throw new Error(`"${name}" must be an object, but you passed a value of type ${typeof defaultProps}`);
+    }
+    if (Array.isArray(defaultProps)) {
+        throw new Error(`"${name}" must be an object, an array was passed ${compositionId ? `for composition "${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');
+        return () => continueRender(fallback);
+    }, []);
+    return null;
+};
+/**
+ * @description This component is used to register a video to make it renderable and make it show in the sidebar, in dev mode.
+ * @see [Documentation](https://www.remotion.dev/docs/composition)
+ */
+const Composition = ({ width, height, fps, durationInFrames, id, defaultProps, schema, ...compProps }) => {
+    var _a, _b;
+    const { registerComposition, unregisterComposition } = useContext(CompositionManager);
+    const video = useVideo();
+    const lazy = useLazyComponent(compProps);
+    const nonce = useNonce();
+    const environment = useRemotionEnvironment();
+    const canUseComposition = useContext(CanUseRemotionHooks);
+    if (canUseComposition) {
+        if (environment === 'player-development' ||
+            environment === 'player-production') {
+            throw new Error('<Composition> was mounted inside the `component` that was passed to the <Player>. See https://remotion.dev/docs/wrong-composition-mount for help.');
+        }
+        throw new Error('<Composition> mounted inside another composition. See https://remotion.dev/docs/wrong-composition-mount for help.');
+    }
+    const { folderName, parentName } = useContext(FolderContext);
+    useEffect(() => {
+        var _a;
+        // Ensure it's a URL safe id
+        if (!id) {
+            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,
+            id,
+            folderName,
+            component: lazy,
+            defaultProps: defaultProps,
+            nonce,
+            parentFolderName: parentName,
+            schema: schema !== null && schema !== void 0 ? schema : null,
+            calculateMetadata: (_a = compProps.calculateMetadata) !== null && _a !== void 0 ? _a : null,
+        });
+        return () => {
+            unregisterComposition(id);
+        };
+    }, [
+        durationInFrames,
+        fps,
+        height,
+        lazy,
+        id,
+        folderName,
+        defaultProps,
+        registerComposition,
+        unregisterComposition,
+        width,
+        nonce,
+        parentName,
+        schema,
+        compProps.calculateMetadata,
+    ]);
+    const resolved = useResolvedVideoConfig(id);
+    if (environment === 'preview' && video && video.component === lazy) {
+        const Comp = lazy;
+        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());
+    }
+    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 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;
+const NEWTON_MIN_SLOPE = 0.001;
+const SUBDIVISION_PRECISION = 0.0000001;
+const SUBDIVISION_MAX_ITERATIONS = 10;
+const kSplineTableSize = 11;
+const kSampleStepSize = 1.0 / (kSplineTableSize - 1.0);
+const float32ArraySupported = typeof Float32Array === 'function';
+function a(aA1, aA2) {
+    return 1.0 - 3.0 * aA2 + 3.0 * aA1;
+}
+function b(aA1, aA2) {
+    return 3.0 * aA2 - 6.0 * aA1;
+}
+function c(aA1) {
+    return 3.0 * aA1;
+}
+// Returns x(t) given t, x1, and x2, or y(t) given t, y1, and y2.
+function calcBezier(aT, aA1, aA2) {
+    return ((a(aA1, aA2) * aT + b(aA1, aA2)) * aT + c(aA1)) * aT;
+}
+// Returns dx/dt given t, x1, and x2, or dy/dt given t, y1, and y2.
+function getSlope(aT, aA1, aA2) {
+    return 3.0 * a(aA1, aA2) * aT * aT + 2.0 * b(aA1, aA2) * aT + c(aA1);
+}
+function binarySubdivide({ aX, _aA, _aB, mX1, mX2, }) {
+    let currentX;
+    let currentT;
+    let i = 0;
+    let aA = _aA;
+    let aB = _aB;
+    do {
+        currentT = aA + (aB - aA) / 2.0;
+        currentX = calcBezier(currentT, mX1, mX2) - aX;
+        if (currentX > 0.0) {
+            aB = currentT;
+        }
+        else {
+            aA = currentT;
+        }
+    } while (Math.abs(currentX) > SUBDIVISION_PRECISION &&
+        ++i < SUBDIVISION_MAX_ITERATIONS);
+    return currentT;
+}
+function newtonRaphsonIterate(aX, _aGuessT, mX1, mX2) {
+    let aGuessT = _aGuessT;
+    for (let i = 0; i < NEWTON_ITERATIONS; ++i) {
+        const currentSlope = getSlope(aGuessT, mX1, mX2);
+        if (currentSlope === 0.0) {
+            return aGuessT;
+        }
+        const currentX = calcBezier(aGuessT, mX1, mX2) - aX;
+        aGuessT -= currentX / currentSlope;
+    }
+    return aGuessT;
+}
+function bezier(mX1, mY1, mX2, mY2) {
+    if (!(mX1 >= 0 && mX1 <= 1 && mX2 >= 0 && mX2 <= 1)) {
+        throw new Error('bezier x values must be in [0, 1] range');
+    }
+    // Precompute samples table
+    const sampleValues = float32ArraySupported
+        ? new Float32Array(kSplineTableSize)
+        : new Array(kSplineTableSize);
+    if (mX1 !== mY1 || mX2 !== mY2) {
+        for (let i = 0; i < kSplineTableSize; ++i) {
+            sampleValues[i] = calcBezier(i * kSampleStepSize, mX1, mX2);
+        }
+    }
+    function getTForX(aX) {
+        let intervalStart = 0.0;
+        let currentSample = 1;
+        const lastSample = kSplineTableSize - 1;
+        for (; currentSample !== lastSample && sampleValues[currentSample] <= aX; ++currentSample) {
+            intervalStart += kSampleStepSize;
+        }
+        --currentSample;
+        // Interpolate to provide an initial guess for t
+        const dist = (aX - sampleValues[currentSample]) /
+            (sampleValues[currentSample + 1] - sampleValues[currentSample]);
+        const guessForT = intervalStart + dist * kSampleStepSize;
+        const initialSlope = getSlope(guessForT, mX1, mX2);
+        if (initialSlope >= NEWTON_MIN_SLOPE) {
+            return newtonRaphsonIterate(aX, guessForT, mX1, mX2);
+        }
+        if (initialSlope === 0.0) {
+            return guessForT;
+        }
+        return binarySubdivide({
+            aX,
+            _aA: intervalStart,
+            _aB: intervalStart + kSampleStepSize,
+            mX1,
+            mX2,
+        });
+    }
+    return function (x) {
+        if (mX1 === mY1 && mX2 === mY2) {
+            return x; // linear
+        }
+        // Because JavaScript number are imprecise, we should guarantee the extremes are right.
+        if (x === 0) {
+            return 0;
+        }
+        if (x === 1) {
+            return 1;
+        }
+        return calcBezier(getTForX(x), mY1, mY2);
+    };
+}
+
+// Taken from https://github.com/facebook/react-native/blob/0b9ea60b4fee8cacc36e7160e31b91fc114dbc0d/Libraries/Animated/src/Easing.js
+/**
+ * @description The Easing module implements common easing functions. You can use it with the interpolate() API.
+ * @see [Documentation](https://www.remotion.dev/docs/easing)
+ */
+class Easing {
+    static step0(n) {
+        return n > 0 ? 1 : 0;
+    }
+    static step1(n) {
+        return n >= 1 ? 1 : 0;
+    }
+    static linear(t) {
+        return t;
+    }
+    static ease(t) {
+        return Easing.bezier(0.42, 0, 1, 1)(t);
+    }
+    static quad(t) {
+        return t * t;
+    }
+    static cubic(t) {
+        return t * t * t;
+    }
+    static poly(n) {
+        return (t) => t ** n;
+    }
+    static sin(t) {
+        return 1 - Math.cos((t * Math.PI) / 2);
+    }
+    static circle(t) {
+        return 1 - Math.sqrt(1 - t * t);
+    }
+    static exp(t) {
+        return 2 ** (10 * (t - 1));
+    }
+    static elastic(bounciness = 1) {
+        const p = bounciness * Math.PI;
+        return (t) => 1 - Math.cos((t * Math.PI) / 2) ** 3 * Math.cos(t * p);
+    }
+    static back(s = 1.70158) {
+        return (t) => t * t * ((s + 1) * t - s);
+    }
+    static bounce(t) {
+        if (t < 1 / 2.75) {
+            return 7.5625 * t * t;
+        }
+        if (t < 2 / 2.75) {
+            const t2_ = t - 1.5 / 2.75;
+            return 7.5625 * t2_ * t2_ + 0.75;
+        }
+        if (t < 2.5 / 2.75) {
+            const t2_ = t - 2.25 / 2.75;
+            return 7.5625 * t2_ * t2_ + 0.9375;
+        }
+        const t2 = t - 2.625 / 2.75;
+        return 7.5625 * t2 * t2 + 0.984375;
+    }
+    static bezier(x1, y1, x2, y2) {
+        return bezier(x1, y1, x2, y2);
+    }
+    static in(easing) {
+        return easing;
+    }
+    static out(easing) {
+        return (t) => 1 - easing(1 - t);
+    }
+    static inOut(easing) {
+        return (t) => {
+            if (t < 0.5) {
+                return easing(t * 2) / 2;
+            }
+            return 1 - easing((1 - t) * 2) / 2;
+        };
+    }
+}
+
+/**
+ * @description This method freezes all of its children to the frame that you specify as a prop
+ * @see [Documentation](https://www.remotion.dev/docs/freeze)
+ */
+const Freeze = ({ frame, children }) => {
+    if (typeof frame === 'undefined') {
+        throw new Error(`The <Freeze /> component requires a 'frame' prop, but none was passed.`);
+    }
+    if (typeof frame !== 'number') {
+        throw new Error(`The 'frame' prop of <Freeze /> must be a number, but is of type ${typeof frame}`);
+    }
+    if (Number.isNaN(frame)) {
+        throw new Error(`The 'frame' prop of <Freeze /> must be a real number, but it is NaN.`);
+    }
+    if (!Number.isFinite(frame)) {
+        throw new Error(`The 'frame' prop of <Freeze /> must be a finite number, but it is ${frame}.`);
+    }
+    const context = useContext(TimelineContext);
+    const value = useMemo(() => {
+        return {
+            ...context,
+            playing: false,
+            imperativePlaying: {
+                current: false,
+            },
+            frame,
+        };
+    }, [context, frame]);
+    return (jsx(TimelineContext.Provider, { value: value, children: jsx(SequenceContext.Provider, { value: null, children: children }) }));
+};
+
+let warnedServer = false;
+let warnedPlayer = false;
+const warnServerOnce = () => {
+    if (warnedServer) {
+        return;
+    }
+    warnedServer = true;
+    console.warn('Called getStaticFiles() on the server. The API is only available in the browser. An empty array was returned.');
+};
+const warnPlayerOnce = () => {
+    if (warnedPlayer) {
+        return;
+    }
+    warnedPlayer = true;
+    console.warn('Called getStaticFiles() while using the Remotion Player. The API is only available while using the Remotion Studio. An empty array was returned.');
+};
+/**
+ * @description The function array containing all files in the public/ folder. You can reference them by using staticFile().
+ * @see [Documentation](https://www.remotion.dev/docs/getstaticfiles)
+ */
+const getStaticFiles = () => {
+    if (typeof document === 'undefined') {
+        warnServerOnce();
+        return [];
+    }
+    if (window.remotion_isPlayer) {
+        warnPlayerOnce();
+        return [];
+    }
+    return window.remotion_staticFiles;
+};
+
+const IFrameRefForwarding = ({ onLoad, onError, ...props }, ref) => {
+    const [handle] = useState(() => delayRender(`Loading <IFrame> with source ${props.src}`));
+    const didLoad = useCallback((e) => {
+        continueRender(handle);
+        onLoad === null || onLoad === void 0 ? void 0 : onLoad(e);
+    }, [handle, onLoad]);
+    const didGetError = useCallback((e) => {
+        continueRender(handle);
+        if (onError) {
+            onError(e);
+        }
+        else {
+            console.error('Error loading iframe:', e, 'Handle the event using the onError() prop to make this message disappear.');
+        }
+    }, [handle, onError]);
+    return jsx("iframe", { ...props, ref: ref, onError: didGetError, onLoad: didLoad });
+};
+/**
+ * @description The <IFrame /> can be used like a regular <iframe> HTML tag.
+ * @see [Documentation](https://www.remotion.dev/docs/iframe)
+ */
+const IFrame = forwardRef(IFrameRefForwarding);
+
+function exponentialBackoff(errorCount) {
+    return 1000 * 2 ** (errorCount - 1);
+}
+const ImgRefForwarding = ({ onError, maxRetries = 2, src, ...props }, ref) => {
+    const imageRef = useRef(null);
+    const errors = useRef({});
+    if (!src) {
+        throw new Error('No "src" prop was passed to <Img>.');
+    }
+    useImperativeHandle(ref, () => {
+        return imageRef.current;
+    }, []);
+    const actualSrc = usePreload(src);
+    const retryIn = useCallback((timeout) => {
+        if (!imageRef.current) {
+            return;
+        }
+        const currentSrc = imageRef.current.src;
+        setTimeout(() => {
+            var _a;
+            if (!imageRef.current) {
+                // Component has been unmounted, do not retry
+                return;
+            }
+            const newSrc = (_a = imageRef.current) === null || _a === void 0 ? void 0 : _a.src;
+            if (newSrc !== currentSrc) {
+                // src has changed, do not retry
+                return;
+            }
+            imageRef.current.removeAttribute('src');
+            imageRef.current.setAttribute('src', newSrc);
+        }, timeout);
+    }, []);
+    const didGetError = useCallback((e) => {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+        if (!errors.current) {
+            return;
+        }
+        errors.current[(_a = imageRef.current) === null || _a === void 0 ? void 0 : _a.src] =
+            ((_c = errors.current[(_b = imageRef.current) === null || _b === void 0 ? void 0 : _b.src]) !== null && _c !== void 0 ? _c : 0) + 1;
+        if (onError &&
+            ((_e = errors.current[(_d = imageRef.current) === null || _d === void 0 ? void 0 : _d.src]) !== null && _e !== void 0 ? _e : 0) > maxRetries) {
+            onError(e);
+            return;
+        }
+        if (((_g = errors.current[(_f = imageRef.current) === null || _f === void 0 ? void 0 : _f.src]) !== null && _g !== void 0 ? _g : 0) <= maxRetries) {
+            const backoff = exponentialBackoff((_j = errors.current[(_h = imageRef.current) === null || _h === void 0 ? void 0 : _h.src]) !== null && _j !== void 0 ? _j : 0);
+            console.warn(`Could not load image with source ${(_k = imageRef.current) === null || _k === void 0 ? void 0 : _k.src}, retrying again in ${backoff}ms`);
+            retryIn(backoff);
+            return;
+        }
+        cancelRender('Error loading image with src: ' + ((_l = imageRef.current) === null || _l === void 0 ? void 0 : _l.src));
+    }, [maxRetries, onError, retryIn]);
+    if (typeof window !== 'undefined') {
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        useLayoutEffect(() => {
+            if (process.env.NODE_ENV === 'test') {
+                return;
+            }
+            const newHandle = delayRender('Loading <Img> with src=' + src);
+            const { current } = imageRef;
+            const onComplete = () => {
+                var _a, _b, _c, _d;
+                if (((_b = errors.current[(_a = imageRef.current) === null || _a === void 0 ? void 0 : _a.src]) !== null && _b !== void 0 ? _b : 0) > 0) {
+                    delete errors.current[(_c = imageRef.current) === null || _c === void 0 ? void 0 : _c.src];
+                    console.info(`Retry successful - ${(_d = imageRef.current) === null || _d === void 0 ? void 0 : _d.src} is now loaded`);
+                }
+                continueRender(newHandle);
+            };
+            const didLoad = () => {
+                onComplete();
+            };
+            if (current === null || current === void 0 ? void 0 : current.complete) {
+                onComplete();
+            }
+            else {
+                current === null || current === void 0 ? void 0 : current.addEventListener('load', didLoad, { once: true });
+            }
+            // If tag gets unmounted, clear pending handles because image is not going to load
+            return () => {
+                current === null || current === void 0 ? void 0 : current.removeEventListener('load', didLoad);
+                continueRender(newHandle);
+            };
+        }, [src]);
+    }
+    return (jsx("img", { ...props, ref: imageRef, src: actualSrc, onError: didGetError }));
+};
+/**
+ * @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.
+ * @see [Documentation](https://www.remotion.dev/docs/img)
+ */
+const Img = forwardRef(ImgRefForwarding);
+
+const compositionsRef = React.createRef();
+const CompositionManagerProvider = ({ children, numberOfAudioTags }) => {
+    var _a;
+    // Wontfix, expected to have
+    // 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 [currentCompositionMetadata, setCurrentCompositionMetadata] = useState(null);
+    const updateCompositions = useCallback((
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    updateComps) => {
+        setCompositions((comps) => {
+            const updated = updateComps(comps);
+            currentcompositionsRef.current = updated;
+            return updated;
+        });
+    }, []);
+    const registerComposition = useCallback((comp) => {
+        updateCompositions((comps) => {
+            if (comps.find((c) => c.id === comp.id)) {
+                throw new Error(`Multiple composition with id ${comp.id} are registered.`);
+            }
+            const value = [...comps, comp]
+                .slice()
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                .sort((a, b) => a.nonce - b.nonce);
+            return value;
+        });
+    }, [updateCompositions]);
+    const unregisterComposition = useCallback((id) => {
+        setCompositions((comps) => {
+            return comps.filter((c) => c.id !== id);
+        });
+    }, []);
+    const registerFolder = useCallback((name, parent) => {
+        setFolders((prevFolders) => {
+            return [
+                ...prevFolders,
+                {
+                    name,
+                    parent,
+                },
+            ];
+        });
+    }, []);
+    const unregisterFolder = useCallback((name, parent) => {
+        setFolders((prevFolders) => {
+            return prevFolders.filter((p) => !(p.name === name && p.parent === parent));
+        });
+    }, []);
+    useImperativeHandle(compositionsRef, () => {
+        return {
+            getCompositions: () => currentcompositionsRef.current,
+        };
+    }, []);
+    const composition = compositions.find((c) => c.id === currentComposition);
+    const contextValue = useMemo(() => {
+        return {
+            compositions,
+            registerComposition,
+            unregisterComposition,
+            currentComposition,
+            setCurrentComposition,
+            folders,
+            registerFolder,
+            unregisterFolder,
+            currentCompositionMetadata,
+            setCurrentCompositionMetadata,
+        };
+    }, [
+        compositions,
+        registerComposition,
+        unregisterComposition,
+        currentComposition,
+        folders,
+        registerFolder,
+        unregisterFolder,
+        currentCompositionMetadata,
+    ]);
+    return (jsx(CompositionManager.Provider, { value: contextValue, children: jsx(SequenceManagerProvider, { children: jsx(AssetManagerProvider, { 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 }) }) }) }) }));
+};
+
+const injected = {};
+const injectCSS = (css) => {
+    // Skip in node
+    if (typeof document === 'undefined') {
+        return;
+    }
+    if (injected[css]) {
+        return;
+    }
+    const head = document.head || document.getElementsByTagName('head')[0];
+    const style = document.createElement('style');
+    style.appendChild(document.createTextNode(css));
+    head.prepend(style);
+    injected[css] = true;
+};
+const OFFTHREAD_VIDEO_CLASS_NAME = '__remotion_offthreadvideo';
+const makeDefaultCSS = (scope, backgroundColor) => {
+    if (!scope) {
+        return `
+    * {
+      box-sizing: border-box;
+    }
+    body {
+      margin: 0;
+	    background-color: ${backgroundColor};
+    }
+    .${OFFTHREAD_VIDEO_CLASS_NAME} {
+      object-fit: contain;
+    }
+    `;
+    }
+    return `
+    ${scope} * {
+      box-sizing: border-box;
+    }
+    ${scope} *:-webkit-full-screen {
+      width: 100%;
+      height: 100%;
+    }
+    ${scope} .${OFFTHREAD_VIDEO_CLASS_NAME} {
+      object-fit: contain;
+    }
+  `;
+};
+
+var CSSUtils = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    injectCSS: injectCSS,
+    OFFTHREAD_VIDEO_CLASS_NAME: OFFTHREAD_VIDEO_CLASS_NAME,
+    makeDefaultCSS: makeDefaultCSS
+});
+
+const REMOTION_STUDIO_CONTAINER_ELEMENT = '__remotion-studio-container';
+const getPreviewDomElement = () => {
+    return document.getElementById(REMOTION_STUDIO_CONTAINER_ELEMENT);
+};
+
+/**
+ * Copied from:
+ * https://github.com/software-mansion/react-native-reanimated/blob/master/src/reanimated2/Colors.ts
+ */
+// var INTEGER = '[-+]?\\d+';
+const NUMBER = '[-+]?\\d*\\.?\\d+';
+const PERCENTAGE = NUMBER + '%';
+function call(...args) {
+    return '\\(\\s*(' + args.join(')\\s*,\\s*(') + ')\\s*\\)';
+}
+function getMatchers() {
+    const cachedMatchers = {
+        rgb: undefined,
+        rgba: undefined,
+        hsl: undefined,
+        hsla: undefined,
+        hex3: undefined,
+        hex4: undefined,
+        hex5: undefined,
+        hex6: undefined,
+        hex8: undefined,
+    };
+    if (cachedMatchers.rgb === undefined) {
+        cachedMatchers.rgb = new RegExp('rgb' + call(NUMBER, NUMBER, NUMBER));
+        cachedMatchers.rgba = new RegExp('rgba' + call(NUMBER, NUMBER, NUMBER, NUMBER));
+        cachedMatchers.hsl = new RegExp('hsl' + call(NUMBER, PERCENTAGE, PERCENTAGE));
+        cachedMatchers.hsla = new RegExp('hsla' + call(NUMBER, PERCENTAGE, PERCENTAGE, NUMBER));
+        cachedMatchers.hex3 = /^#([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/;
+        cachedMatchers.hex4 =
+            /^#([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/;
+        cachedMatchers.hex6 = /^#([0-9a-fA-F]{6})$/;
+        cachedMatchers.hex8 = /^#([0-9a-fA-F]{8})$/;
+    }
+    return cachedMatchers;
+}
+function hue2rgb(p, q, t) {
+    if (t < 0) {
+        t += 1;
+    }
+    if (t > 1) {
+        t -= 1;
+    }
+    if (t < 1 / 6) {
+        return p + (q - p) * 6 * t;
+    }
+    if (t < 1 / 2) {
+        return q;
+    }
+    if (t < 2 / 3) {
+        return p + (q - p) * (2 / 3 - t) * 6;
+    }
+    return p;
+}
+function hslToRgb(h, s, l) {
+    const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+    const p = 2 * l - q;
+    const r = hue2rgb(p, q, h + 1 / 3);
+    const g = hue2rgb(p, q, h);
+    const b = hue2rgb(p, q, h - 1 / 3);
+    return ((Math.round(r * 255) << 24) |
+        (Math.round(g * 255) << 16) |
+        (Math.round(b * 255) << 8));
+}
+function parse255(str) {
+    const int = Number.parseInt(str, 10);
+    if (int < 0) {
+        return 0;
+    }
+    if (int > 255) {
+        return 255;
+    }
+    return int;
+}
+function parse360(str) {
+    const int = Number.parseFloat(str);
+    return (((int % 360) + 360) % 360) / 360;
+}
+function parse1(str) {
+    const num = Number.parseFloat(str);
+    if (num < 0) {
+        return 0;
+    }
+    if (num > 1) {
+        return 255;
+    }
+    return Math.round(num * 255);
+}
+function parsePercentage(str) {
+    // parseFloat conveniently ignores the final %
+    const int = Number.parseFloat(str);
+    if (int < 0) {
+        return 0;
+    }
+    if (int > 100) {
+        return 1;
+    }
+    return int / 100;
+}
+const names = {
+    transparent: 0x00000000,
+    // http://www.w3.org/TR/css3-color/#svg-color
+    aliceblue: 0xf0f8ffff,
+    antiquewhite: 0xfaebd7ff,
+    aqua: 0x00ffffff,
+    aquamarine: 0x7fffd4ff,
+    azure: 0xf0ffffff,
+    beige: 0xf5f5dcff,
+    bisque: 0xffe4c4ff,
+    black: 0x000000ff,
+    blanchedalmond: 0xffebcdff,
+    blue: 0x0000ffff,
+    blueviolet: 0x8a2be2ff,
+    brown: 0xa52a2aff,
+    burlywood: 0xdeb887ff,
+    burntsienna: 0xea7e5dff,
+    cadetblue: 0x5f9ea0ff,
+    chartreuse: 0x7fff00ff,
+    chocolate: 0xd2691eff,
+    coral: 0xff7f50ff,
+    cornflowerblue: 0x6495edff,
+    cornsilk: 0xfff8dcff,
+    crimson: 0xdc143cff,
+    cyan: 0x00ffffff,
+    darkblue: 0x00008bff,
+    darkcyan: 0x008b8bff,
+    darkgoldenrod: 0xb8860bff,
+    darkgray: 0xa9a9a9ff,
+    darkgreen: 0x006400ff,
+    darkgrey: 0xa9a9a9ff,
+    darkkhaki: 0xbdb76bff,
+    darkmagenta: 0x8b008bff,
+    darkolivegreen: 0x556b2fff,
+    darkorange: 0xff8c00ff,
+    darkorchid: 0x9932ccff,
+    darkred: 0x8b0000ff,
+    darksalmon: 0xe9967aff,
+    darkseagreen: 0x8fbc8fff,
+    darkslateblue: 0x483d8bff,
+    darkslategray: 0x2f4f4fff,
+    darkslategrey: 0x2f4f4fff,
+    darkturquoise: 0x00ced1ff,
+    darkviolet: 0x9400d3ff,
+    deeppink: 0xff1493ff,
+    deepskyblue: 0x00bfffff,
+    dimgray: 0x696969ff,
+    dimgrey: 0x696969ff,
+    dodgerblue: 0x1e90ffff,
+    firebrick: 0xb22222ff,
+    floralwhite: 0xfffaf0ff,
+    forestgreen: 0x228b22ff,
+    fuchsia: 0xff00ffff,
+    gainsboro: 0xdcdcdcff,
+    ghostwhite: 0xf8f8ffff,
+    gold: 0xffd700ff,
+    goldenrod: 0xdaa520ff,
+    gray: 0x808080ff,
+    green: 0x008000ff,
+    greenyellow: 0xadff2fff,
+    grey: 0x808080ff,
+    honeydew: 0xf0fff0ff,
+    hotpink: 0xff69b4ff,
+    indianred: 0xcd5c5cff,
+    indigo: 0x4b0082ff,
+    ivory: 0xfffff0ff,
+    khaki: 0xf0e68cff,
+    lavender: 0xe6e6faff,
+    lavenderblush: 0xfff0f5ff,
+    lawngreen: 0x7cfc00ff,
+    lemonchiffon: 0xfffacdff,
+    lightblue: 0xadd8e6ff,
+    lightcoral: 0xf08080ff,
+    lightcyan: 0xe0ffffff,
+    lightgoldenrodyellow: 0xfafad2ff,
+    lightgray: 0xd3d3d3ff,
+    lightgreen: 0x90ee90ff,
+    lightgrey: 0xd3d3d3ff,
+    lightpink: 0xffb6c1ff,
+    lightsalmon: 0xffa07aff,
+    lightseagreen: 0x20b2aaff,
+    lightskyblue: 0x87cefaff,
+    lightslategray: 0x778899ff,
+    lightslategrey: 0x778899ff,
+    lightsteelblue: 0xb0c4deff,
+    lightyellow: 0xffffe0ff,
+    lime: 0x00ff00ff,
+    limegreen: 0x32cd32ff,
+    linen: 0xfaf0e6ff,
+    magenta: 0xff00ffff,
+    maroon: 0x800000ff,
+    mediumaquamarine: 0x66cdaaff,
+    mediumblue: 0x0000cdff,
+    mediumorchid: 0xba55d3ff,
+    mediumpurple: 0x9370dbff,
+    mediumseagreen: 0x3cb371ff,
+    mediumslateblue: 0x7b68eeff,
+    mediumspringgreen: 0x00fa9aff,
+    mediumturquoise: 0x48d1ccff,
+    mediumvioletred: 0xc71585ff,
+    midnightblue: 0x191970ff,
+    mintcream: 0xf5fffaff,
+    mistyrose: 0xffe4e1ff,
+    moccasin: 0xffe4b5ff,
+    navajowhite: 0xffdeadff,
+    navy: 0x000080ff,
+    oldlace: 0xfdf5e6ff,
+    olive: 0x808000ff,
+    olivedrab: 0x6b8e23ff,
+    orange: 0xffa500ff,
+    orangered: 0xff4500ff,
+    orchid: 0xda70d6ff,
+    palegoldenrod: 0xeee8aaff,
+    palegreen: 0x98fb98ff,
+    paleturquoise: 0xafeeeeff,
+    palevioletred: 0xdb7093ff,
+    papayawhip: 0xffefd5ff,
+    peachpuff: 0xffdab9ff,
+    peru: 0xcd853fff,
+    pink: 0xffc0cbff,
+    plum: 0xdda0ddff,
+    powderblue: 0xb0e0e6ff,
+    purple: 0x800080ff,
+    rebeccapurple: 0x663399ff,
+    red: 0xff0000ff,
+    rosybrown: 0xbc8f8fff,
+    royalblue: 0x4169e1ff,
+    saddlebrown: 0x8b4513ff,
+    salmon: 0xfa8072ff,
+    sandybrown: 0xf4a460ff,
+    seagreen: 0x2e8b57ff,
+    seashell: 0xfff5eeff,
+    sienna: 0xa0522dff,
+    silver: 0xc0c0c0ff,
+    skyblue: 0x87ceebff,
+    slateblue: 0x6a5acdff,
+    slategray: 0x708090ff,
+    slategrey: 0x708090ff,
+    snow: 0xfffafaff,
+    springgreen: 0x00ff7fff,
+    steelblue: 0x4682b4ff,
+    tan: 0xd2b48cff,
+    teal: 0x008080ff,
+    thistle: 0xd8bfd8ff,
+    tomato: 0xff6347ff,
+    turquoise: 0x40e0d0ff,
+    violet: 0xee82eeff,
+    wheat: 0xf5deb3ff,
+    white: 0xffffffff,
+    whitesmoke: 0xf5f5f5ff,
+    yellow: 0xffff00ff,
+    yellowgreen: 0x9acd32ff,
+};
+function normalizeColor(color) {
+    const matchers = getMatchers();
+    let match;
+    // Ordered based on occurrences on Facebook codebase
+    if (matchers.hex6) {
+        if ((match = matchers.hex6.exec(color))) {
+            return Number.parseInt(match[1] + 'ff', 16) >>> 0;
+        }
+    }
+    if (names[color] !== undefined) {
+        return names[color];
+    }
+    if (matchers.rgb) {
+        if ((match = matchers.rgb.exec(color))) {
+            return (
+            // b
+            ((parse255(match[1]) << 24) | // r
+                (parse255(match[2]) << 16) | // g
+                (parse255(match[3]) << 8) |
+                0x000000ff) >>> // a
+                0);
+        }
+    }
+    if (matchers.rgba) {
+        if ((match = matchers.rgba.exec(color))) {
+            return (
+            // b
+            ((parse255(match[1]) << 24) | // r
+                (parse255(match[2]) << 16) | // g
+                (parse255(match[3]) << 8) |
+                parse1(match[4])) >>> // a
+                0);
+        }
+    }
+    if (matchers.hex3) {
+        if ((match = matchers.hex3.exec(color))) {
+            return (Number.parseInt(match[1] +
+                match[1] + // r
+                match[2] +
+                match[2] + // g
+                match[3] +
+                match[3] + // b
+                'ff', // a
+            16) >>> 0);
+        }
+    }
+    // https://drafts.csswg.org/css-color-4/#hex-notation
+    if (matchers.hex8) {
+        if ((match = matchers.hex8.exec(color))) {
+            return Number.parseInt(match[1], 16) >>> 0;
+        }
+    }
+    if (matchers.hex4) {
+        if ((match = matchers.hex4.exec(color))) {
+            return (Number.parseInt(match[1] +
+                match[1] + // r
+                match[2] +
+                match[2] + // g
+                match[3] +
+                match[3] + // b
+                match[4] +
+                match[4], // a
+            16) >>> 0);
+        }
+    }
+    if (matchers.hsl) {
+        if ((match = matchers.hsl.exec(color))) {
+            return ((hslToRgb(parse360(match[1]), // h
+            parsePercentage(match[2]), // s
+            parsePercentage(match[3]) // l
+            ) |
+                0x000000ff) >>> // a
+                0);
+        }
+    }
+    if (matchers.hsla) {
+        if ((match = matchers.hsla.exec(color))) {
+            return ((hslToRgb(parse360(match[1]), // h
+            parsePercentage(match[2]), // s
+            parsePercentage(match[3]) // l
+            ) |
+                parse1(match[4])) >>> // a
+                0);
+        }
+    }
+    throw new Error(`invalid color string ${color} provided`);
+}
+const opacity = (c) => {
+    return ((c >> 24) & 255) / 255;
+};
+const red = (c) => {
+    return (c >> 16) & 255;
+};
+const green = (c) => {
+    return (c >> 8) & 255;
+};
+const blue = (c) => {
+    return c & 255;
+};
+const rgbaColor = (r, g, b, alpha) => {
+    return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+};
+function processColor(color) {
+    const normalizedColor = normalizeColor(color);
+    return ((normalizedColor << 24) | (normalizedColor >>> 8)) >>> 0; // argb
+}
+const interpolateColorsRGB = (value, inputRange, colors) => {
+    const [r, g, b, a] = [red, green, blue, opacity].map((f) => {
+        const unrounded = interpolate(value, inputRange, colors.map((c) => f(c)), {
+            extrapolateLeft: 'clamp',
+            extrapolateRight: 'clamp',
+        });
+        if (f === opacity) {
+            return Number(unrounded.toFixed(3));
+        }
+        return Math.round(unrounded);
+    });
+    return rgbaColor(r, g, b, a);
+};
+/**
+ * @description This function allows you to map a range of values to colors using a concise syntax.
+ * @see [Documentation](https://www.remotion.dev/docs/interpolate-colors)
+ */
+const interpolateColors = (input, inputRange, outputRange) => {
+    if (typeof input === 'undefined') {
+        throw new TypeError('input can not be undefined');
+    }
+    if (typeof inputRange === 'undefined') {
+        throw new TypeError('inputRange can not be undefined');
+    }
+    if (typeof outputRange === 'undefined') {
+        throw new TypeError('outputRange can not be undefined');
+    }
+    if (inputRange.length !== outputRange.length) {
+        throw new TypeError('inputRange (' +
+            inputRange.length +
+            ' values provided) and outputRange (' +
+            outputRange.length +
+            ' values provided) must have the same length');
+    }
+    const processedOutputRange = outputRange.map((c) => processColor(c));
+    return interpolateColorsRGB(input, inputRange, processedOutputRange);
+};
+
+let Root = null;
+let listeners = [];
+/**
+ * @description This function registers the root component of the Remotion project
+ * @see [Documentation](https://www.remotion.dev/docs/register-root)
+ */
+const registerRoot = (comp) => {
+    if (!comp) {
+        throw new Error(`You must pass a React component to registerRoot(), but ${JSON.stringify(comp)} was passed.`);
+    }
+    if (Root) {
+        throw new Error('registerRoot() was called more than once.');
+    }
+    Root = comp;
+    listeners.forEach((l) => {
+        l(comp);
+    });
+};
+const getRoot = () => {
+    return Root;
+};
+const waitForRoot = (fn) => {
+    if (Root) {
+        fn(Root);
+        return () => undefined;
+    }
+    listeners.push(fn);
+    return () => {
+        listeners = listeners.filter((l) => l !== 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 [playing, setPlaying] = useState(false);
+    const imperativePlaying = useRef(false);
+    const [fastRefreshes, setFastRefreshes] = useState(0);
+    const [playbackRate, setPlaybackRate] = useState(1);
+    const audioAndVideoTags = useRef([]);
+    if (typeof window !== 'undefined') {
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        useLayoutEffect(() => {
+            window.remotion_setFrame = (f) => {
+                const id = delayRender(`Setting the current frame to ${f}`);
+                setFrame(f);
+                requestAnimationFrame(() => continueRender(id));
+            };
+            window.remotion_isPlayer = false;
+        }, []);
+    }
+    const timelineContextValue = useMemo(() => {
+        return {
+            frame,
+            playing,
+            imperativePlaying,
+            rootId: remotionRootId,
+            playbackRate,
+            setPlaybackRate,
+            audioAndVideoTags,
+        };
+    }, [frame, playbackRate, playing, remotionRootId]);
+    const setTimelineContextValue = useMemo(() => {
+        return {
+            setFrame,
+            setPlaying,
+        };
+    }, []);
+    const nonceContext = useMemo(() => {
+        let counter = 0;
+        return {
+            getNonce: () => counter++,
+            fastRefreshes,
+        };
+    }, [fastRefreshes]);
+    useEffect(() => {
+        if (typeof __webpack_module__ !== 'undefined') {
+            if (__webpack_module__.hot) {
+                __webpack_module__.hot.addStatusHandler((status) => {
+                    if (status === 'idle') {
+                        setFastRefreshes((i) => i + 1);
+                    }
+                });
+            }
+        }
+    }, []);
+    return (jsx(NonceContext.Provider, { value: nonceContext, children: jsx(TimelineContext.Provider, { value: timelineContextValue, children: jsx(SetTimelineContext.Provider, { value: setTimelineContextValue, children: jsx(EditorPropsProvider, { children: jsx(PrefetchProvider, { children: jsx(NativeLayersProvider, { children: jsx(CompositionManagerProvider, { numberOfAudioTags: numberOfAudioTags, children: jsx(DurationsContextProvider, { children: children }) }) }) }) }) }) }) }));
+};
+
+const getEnvVariables = () => {
+    if (getRemotionEnvironment() === 'rendering') {
+        const param = window.remotion_envVariables;
+        if (!param) {
+            return {};
+        }
+        return { ...JSON.parse(param), NODE_ENV: process.env.NODE_ENV };
+    }
+    if (getRemotionEnvironment() === 'preview') {
+        // For the Preview, we already set the environment variables in index-html.ts.
+        // We just add NODE_ENV here.
+        return {
+            NODE_ENV: 'development',
+        };
+    }
+    throw new Error('Can only call getEnvVariables() if environment is `rendering` or `preview`');
+};
+const setupEnvVariables = () => {
+    const env = getEnvVariables();
+    if (!window.process) {
+        window.process = {};
+    }
+    if (!window.process.env) {
+        window.process.env = {};
+    }
+    Object.keys(env).forEach((key) => {
+        window.process.env[key] = env[key];
+    });
+};
+
+const validateFrame = ({ allowFloats, durationInFrames, frame, }) => {
+    if (typeof frame === 'undefined') {
+        throw new TypeError(`Argument missing for parameter "frame"`);
+    }
+    if (typeof frame !== 'number') {
+        throw new TypeError(`Argument passed for "frame" is not a number: ${frame}`);
+    }
+    if (!Number.isFinite(frame)) {
+        throw new RangeError(`Frame ${frame} is not finite`);
+    }
+    if (frame % 1 !== 0 && !allowFloats) {
+        throw new RangeError(`Argument for frame must be an integer, but got ${frame}`);
+    }
+    if (frame < 0 && frame < -durationInFrames) {
+        throw new RangeError(`Cannot use frame ${frame}: Duration of composition is ${durationInFrames}, therefore the lowest frame that can be rendered is ${-durationInFrames}`);
+    }
+    if (frame > durationInFrames - 1) {
+        throw new RangeError(`Cannot use frame ${frame}: Duration of composition is ${durationInFrames}, therefore the highest frame that can be rendered is ${durationInFrames - 1}`);
+    }
+};
+
+function useRemotionContexts() {
+    const compositionManagerCtx = React.useContext(CompositionManager);
+    const timelineContext = React.useContext(TimelineContext);
+    const setTimelineContext = React.useContext(SetTimelineContext);
+    const sequenceContext = React.useContext(SequenceContext);
+    const nonceContext = React.useContext(NonceContext);
+    const canUseRemotionHooksContext = React.useContext(CanUseRemotionHooks);
+    const nativeLayersContext = React.useContext(NativeLayersContext);
+    const preloadContext = React.useContext(PreloadContext);
+    const resolveCompositionContext = React.useContext(ResolveCompositionContext);
+    const assetManagerContext = React.useContext(AssetManager);
+    const sequenceManagerContext = React.useContext(SequenceManager);
+    return useMemo(() => ({
+        compositionManagerCtx,
+        timelineContext,
+        setTimelineContext,
+        sequenceContext,
+        nonceContext,
+        canUseRemotionHooksContext,
+        nativeLayersContext,
+        preloadContext,
+        resolveCompositionContext,
+        assetManagerContext,
+        sequenceManagerContext,
+    }), [
+        compositionManagerCtx,
+        nonceContext,
+        sequenceContext,
+        setTimelineContext,
+        timelineContext,
+        canUseRemotionHooksContext,
+        nativeLayersContext,
+        preloadContext,
+        resolveCompositionContext,
+        assetManagerContext,
+        sequenceManagerContext,
+    ]);
+}
+const RemotionContextProvider = (props) => {
+    const { children, contexts } = 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(AssetManager.Provider, { value: contexts.assetManagerContext, 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,
+    CompositionManager,
+    SequenceManager,
+    RemotionRoot,
+    useVideo,
+    getRoot,
+    useMediaVolumeState,
+    useMediaMutedState,
+    useLazyComponent,
+    truthy,
+    SequenceContext,
+    useRemotionContexts,
+    RemotionContextProvider,
+    CSSUtils,
+    setupEnvVariables,
+    MediaVolumeContext,
+    SetMediaVolumeContext,
+    validateDurationInFrames,
+    validateFps,
+    validateDefaultAndInputProps,
+    validateDimension,
+    getRemotionEnvironment,
+    SharedAudioContext,
+    SharedAudioContextProvider,
+    invalidCompositionErrorMessage,
+    isCompositionIdValid,
+    getPreviewDomElement,
+    compositionsRef,
+    DELAY_RENDER_CALLSTACK_TOKEN,
+    portalNode,
+    waitForRoot,
+    CanUseRemotionHooksProvider,
+    CanUseRemotionHooks,
+    PrefetchProvider,
+    DurationsContextProvider,
+    IsPlayerContextProvider,
+    useIsPlayer,
+    useRemotionEnvironment,
+    validateFrame,
+    EditorPropsProvider,
+    EditorPropsContext,
+    usePreload,
+    processColor,
+    NonceContext,
+    resolveVideoConfig,
+    useResolvedVideoConfig,
+    resolveCompositionsRef,
+    ResolveCompositionConfig,
+    REMOTION_STUDIO_CONTAINER_ELEMENT,
+    AssetManager,
+    bundleName: 'bundle.js',
+};
+
+const flattenChildren = (children) => {
+    const childrenArray = React.Children.toArray(children);
+    return childrenArray.reduce((flatChildren, child) => {
+        if (child.type === React.Fragment) {
+            return flatChildren.concat(flattenChildren(child.props
+                .children));
+        }
+        flatChildren.push(child);
+        return flatChildren;
+    }, []);
+};
+
+const SeriesSequenceRefForwardingFunction = ({ children }, _ref) => {
+    // Discard ref
+    // eslint-disable-next-line react/jsx-no-useless-fragment
+    return jsx(Fragment, { children: children });
+};
+const SeriesSequence = forwardRef(SeriesSequenceRefForwardingFunction);
+/**
+ * @description with this component, you can easily stitch together scenes that should play sequentially after another.
+ * @see [Documentation](https://www.remotion.dev/docs/series)
+ */
+const Series = ({ children }) => {
+    const childrenValue = useMemo(() => {
+        let startFrame = 0;
+        const flattenedChildren = flattenChildren(children);
+        return Children.map(flattenedChildren, (child, i) => {
+            var _a;
+            const castedChild = child;
+            if (typeof castedChild === 'string') {
+                // Don't throw if it's just some accidential whitespace
+                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}"`);
+            }
+            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`);
+            }
+            const debugInfo = `index = ${i}, duration = ${castedChild.props.durationInFrames}`;
+            if (!(castedChild === null || castedChild === void 0 ? void 0 : castedChild.props.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;
+            if (i !== flattenedChildren.length - 1 ||
+                durationInFramesProp !== Infinity) {
+                validateDurationInFrames({
+                    durationInFrames: durationInFramesProp,
+                    component: `of a <Series.Sequence /> component`,
+                    allowFloats: true,
+                });
+            }
+            const offset = (_a = castedChild.props.offset) !== null && _a !== void 0 ? _a : 0;
+            if (Number.isNaN(offset)) {
+                throw new TypeError(`The "offset" property of a <Series.Sequence /> must not be NaN, but got NaN (${debugInfo}).`);
+            }
+            if (!Number.isFinite(offset)) {
+                throw new TypeError(`The "offset" property of a <Series.Sequence /> must be finite, but got ${offset} (${debugInfo}).`);
+            }
+            if (offset % 1 !== 0) {
+                throw new TypeError(`The "offset" property of a <Series.Sequence /> must be finite, but got ${offset} (${debugInfo}).`);
+            }
+            const currentStartFrame = startFrame + offset;
+            startFrame += durationInFramesProp + offset;
+            return (jsx(Sequence, { from: currentStartFrame, durationInFrames: durationInFramesProp, ...passedProps, ref: castedChild.ref, children: child }));
+        });
+    }, [children]);
+    /* eslint-disable react/jsx-no-useless-fragment */
+    return jsx(Fragment, { children: childrenValue });
+};
+Series.Sequence = SeriesSequence;
+
+const validateSpringDuration = (dur) => {
+    if (typeof dur === 'undefined') {
+        return;
+    }
+    if (typeof dur !== 'number') {
+        throw new TypeError(`A "duration" of a spring must be a "number" but is "${typeof dur}"`);
+    }
+    if (Number.isNaN(dur)) {
+        throw new TypeError('A "duration" of a spring is NaN, which it must not be');
+    }
+    if (!Number.isFinite(dur)) {
+        throw new TypeError('A "duration" of a spring must be finite, but is ' + dur);
+    }
+    if (dur <= 0) {
+        throw new TypeError('A "duration" of a spring must be positive, but is ' + dur);
+    }
+};
+
+const defaultSpringConfig = {
+    damping: 10,
+    mass: 1,
+    stiffness: 100,
+    overshootClamping: false,
+};
+const advanceCache = {};
+function advance({ animation, now, config, }) {
+    const { toValue, lastTimestamp, current, velocity } = animation;
+    const deltaTime = Math.min(now - lastTimestamp, 64);
+    const c = config.damping;
+    const m = config.mass;
+    const k = config.stiffness;
+    const cacheKey = [
+        toValue,
+        lastTimestamp,
+        current,
+        velocity,
+        c,
+        m,
+        k,
+        now,
+    ].join('-');
+    if (advanceCache[cacheKey]) {
+        return advanceCache[cacheKey];
+    }
+    const v0 = -velocity;
+    const x0 = toValue - current;
+    const zeta = c / (2 * Math.sqrt(k * m)); // damping ratio
+    const omega0 = Math.sqrt(k / m); // undamped angular frequency of the oscillator (rad/ms)
+    const omega1 = omega0 * Math.sqrt(1 - zeta ** 2); // exponential decay
+    const t = deltaTime / 1000;
+    const sin1 = Math.sin(omega1 * t);
+    const cos1 = Math.cos(omega1 * t);
+    // under damped
+    const underDampedEnvelope = Math.exp(-zeta * omega0 * t);
+    const underDampedFrag1 = underDampedEnvelope *
+        (sin1 * ((v0 + zeta * omega0 * x0) / omega1) + x0 * cos1);
+    const underDampedPosition = toValue - underDampedFrag1;
+    // This looks crazy -- it's actually just the derivative of the oscillation function
+    const underDampedVelocity = zeta * omega0 * underDampedFrag1 -
+        underDampedEnvelope *
+            (cos1 * (v0 + zeta * omega0 * x0) - omega1 * x0 * sin1);
+    // critically damped
+    const criticallyDampedEnvelope = Math.exp(-omega0 * t);
+    const criticallyDampedPosition = toValue - criticallyDampedEnvelope * (x0 + (v0 + omega0 * x0) * t);
+    const criticallyDampedVelocity = criticallyDampedEnvelope *
+        (v0 * (t * omega0 - 1) + t * x0 * omega0 * omega0);
+    const animationNode = {
+        toValue,
+        prevPosition: current,
+        lastTimestamp: now,
+        current: zeta < 1 ? underDampedPosition : criticallyDampedPosition,
+        velocity: zeta < 1 ? underDampedVelocity : criticallyDampedVelocity,
+    };
+    advanceCache[cacheKey] = animationNode;
+    return animationNode;
+}
+const calculationCache = {};
+function springCalculation({ from = 0, to = 1, frame, fps, config = {}, }) {
+    const cacheKey = [
+        from,
+        to,
+        frame,
+        fps,
+        config.damping,
+        config.mass,
+        config.overshootClamping,
+        config.stiffness,
+    ].join('-');
+    if (calculationCache[cacheKey]) {
+        return calculationCache[cacheKey];
+    }
+    let animation = {
+        lastTimestamp: 0,
+        current: from,
+        toValue: to,
+        velocity: 0,
+        prevPosition: 0,
+    };
+    const frameClamped = Math.max(0, frame);
+    const unevenRest = frameClamped % 1;
+    for (let f = 0; f <= Math.floor(frameClamped); f++) {
+        if (f === Math.floor(frameClamped)) {
+            f += unevenRest;
+        }
+        const time = (f / fps) * 1000;
+        animation = advance({
+            animation,
+            now: time,
+            config: {
+                ...defaultSpringConfig,
+                ...config,
+            },
+        });
+    }
+    calculationCache[cacheKey] = animation;
+    return animation;
+}
+
+/**
+ * @description The function returns how long it takes for a spring animation to settle
+ * @see [Documentation](https://www.remotion.dev/docs/measure-spring)
+ */
+function measureSpring({ fps, config = {}, threshold = 0.005, from = 0, to = 1, }) {
+    if (typeof threshold !== 'number') {
+        throw new TypeError(`threshold must be a number, got ${threshold} of type ${typeof threshold}`);
+    }
+    if (threshold === 0) {
+        return Infinity;
+    }
+    if (threshold === 1) {
+        return 0;
+    }
+    if (isNaN(threshold)) {
+        throw new TypeError('Threshold is NaN');
+    }
+    if (!Number.isFinite(threshold)) {
+        throw new TypeError('Threshold is not finite');
+    }
+    if (threshold < 0) {
+        throw new TypeError('Threshold is below 0');
+    }
+    validateFps(fps, 'to the measureSpring() function', false);
+    const range = Math.abs(from - to);
+    let frame = 0;
+    let finishedFrame = 0;
+    const calc = () => {
+        return springCalculation({
+            fps,
+            frame,
+            config,
+            from,
+            to,
+        });
+    };
+    let animation = calc();
+    const calcDifference = () => {
+        return (Math.abs(animation.current - animation.toValue) /
+            (range === 0 ? 1 : range));
+    };
+    let difference = calcDifference();
+    while (difference >= threshold) {
+        frame++;
+        animation = calc();
+        difference = calcDifference();
+    }
+    // Since spring is bouncy, just because it's under the threshold we
+    // cannot be sure it's done. We need to animate further until it stays in the
+    // threshold for, say, 20 frames.
+    finishedFrame = frame;
+    for (let i = 0; i < 20; i++) {
+        frame++;
+        animation = calc();
+        difference = calcDifference();
+        if (difference >= threshold) {
+            i = 0;
+            finishedFrame = frame + 1;
+        }
+    }
+    return finishedFrame;
+}
+
+/**
+ * @description Calculates a position based on physical parameters, start and end value, and time.
+ * @see [Documentation](https://www.remotion.dev/docs/spring)
+ * @param {number} frame The current time value. Most of the time you want to pass in the return value of useCurrentFrame.
+ * @param {number} fps The framerate at which the animation runs. Pass in the value obtained by `useVideoConfig()`.
+ * @param {?boolean} reverse Whether the animation plays in reverse or not. Default `false`.
+ * @param {?Object} config optional object that allows you to customize the physical properties of the animation.
+ * @param {number} [config.mass=1] The weight of the spring. If you reduce the mass, the animation becomes faster!
+ * @param {number} [config.damping=10] How hard the animation decelerates.
+ * @param {number} [config.stiffness=100] Affects bounciness of the animation.
+ * @param {boolean} [config.overshootClamping=false] Whether to prevent the animation going beyond the target value.
+ * @param {?number} [config.from] The initial value of the animation. Default `0`
+ * @param {?number} [config.to] The end value of the animation. Default `1`
+ * @param {?number} [config.durationInFrames] Stretch the duration of an animation to  a set value.. Default `undefined`
+ * @param {?number} [config.durationThreshold] How close to the end the animation is considered to be done. Default `0.005`
+ * @param {?number} [config.delay] Delay the animation for this amount of frames. Default `0`
+ */
+function spring({ frame: passedFrame, fps, config = {}, from = 0, to = 1, durationInFrames: passedDurationInFrames, durationRestThreshold, delay = 0, reverse = false, }) {
+    validateSpringDuration(passedDurationInFrames);
+    validateFrame({
+        frame: passedFrame,
+        durationInFrames: Infinity,
+        allowFloats: true,
+    });
+    validateFps(fps, 'to spring()', false);
+    const needsToCalculateNaturalDuration = reverse || typeof passedDurationInFrames !== 'undefined';
+    const naturalDuration = needsToCalculateNaturalDuration
+        ? measureSpring({
+            fps,
+            config,
+            from,
+            to,
+            threshold: durationRestThreshold,
+        })
+        : undefined;
+    const naturalDurationGetter = needsToCalculateNaturalDuration
+        ? {
+            get: () => naturalDuration,
+        }
+        : {
+            get: () => {
+                throw new Error('did not calculate natural duration, this is an error with Remotion. Please report');
+            },
+        };
+    const frame = (reverse
+        ? (passedDurationInFrames !== null && passedDurationInFrames !== void 0 ? passedDurationInFrames : naturalDurationGetter.get()) - passedFrame
+        : passedFrame) - delay;
+    const spr = springCalculation({
+        fps,
+        frame: passedDurationInFrames === undefined
+            ? frame
+            : frame / (passedDurationInFrames / naturalDurationGetter.get()),
+        config,
+        from,
+        to,
+    });
+    if (!config.overshootClamping) {
+        return spr.current;
+    }
+    if (to >= from) {
+        return Math.min(spr.current, to);
+    }
+    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)
+ */
+const Still = (props) => {
+    const newProps = {
+        ...props,
+        durationInFrames: 1,
+        fps: 1,
+    };
+    // @ts-expect-error TypeScript does not understand it, but should still fail on type mismatch
+    return React.createElement((Composition), newProps);
+};
+
+const OffthreadVideoForRendering = ({ onError, volume: volumeProp, playbackRate, src, muted, allowAmplificationDuringRender, transparent = false, ...props }) => {
+    const absoluteFrame = useTimelinePosition();
+    const frame = useCurrentFrame();
+    const volumePropsFrame = useFrameForVolumeProp();
+    const videoConfig = useUnsafeVideoConfig();
+    const sequenceContext = useContext(SequenceContext);
+    const mediaStartsAt = useMediaStartsAt();
+    const { registerAsset, unregisterAsset } = useContext(AssetManager);
+    if (!src) {
+        throw new TypeError('No `src` was passed to <OffthreadVideo>.');
+    }
+    // Generate a string that's as unique as possible for this asset
+    // but at the same time the same on all threads
+    const id = useMemo(() => `offthreadvideo-${random(src !== null && src !== void 0 ? src : '')}-${sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.cumulatedFrom}-${sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.relativeFrom}-${sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.durationInFrames}`, [
+        src,
+        sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.cumulatedFrom,
+        sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.relativeFrom,
+        sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.durationInFrames,
+    ]);
+    if (!videoConfig) {
+        throw new Error('No video config found');
+    }
+    const volume = evaluateVolume({
+        volume: volumeProp,
+        frame: volumePropsFrame,
+        mediaVolume: 1,
+        allowAmplificationDuringRender: allowAmplificationDuringRender !== null && allowAmplificationDuringRender !== void 0 ? allowAmplificationDuringRender : false,
+    });
+    useEffect(() => {
+        if (!src) {
+            throw new Error('No src passed');
+        }
+        if (!window.remotion_audioEnabled) {
+            return;
+        }
+        if (muted) {
+            return;
+        }
+        if (volume <= 0) {
+            return;
+        }
+        registerAsset({
+            type: 'video',
+            src: getAbsoluteSrc(src),
+            id,
+            frame: absoluteFrame,
+            volume,
+            mediaFrame: frame,
+            playbackRate: playbackRate !== null && playbackRate !== void 0 ? playbackRate : 1,
+            allowAmplificationDuringRender: allowAmplificationDuringRender !== null && allowAmplificationDuringRender !== void 0 ? allowAmplificationDuringRender : false,
+        });
+        return () => unregisterAsset(id);
+    }, [
+        muted,
+        src,
+        registerAsset,
+        id,
+        unregisterAsset,
+        volume,
+        frame,
+        absoluteFrame,
+        playbackRate,
+        allowAmplificationDuringRender,
+    ]);
+    const currentTime = useMemo(() => {
+        return (getExpectedMediaFrameUncorrected({
+            frame,
+            playbackRate: playbackRate || 1,
+            startFrom: -mediaStartsAt,
+        }) / videoConfig.fps);
+    }, [frame, mediaStartsAt, playbackRate, videoConfig.fps]);
+    const actualSrc = useMemo(() => {
+        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]);
+    const className = useMemo(() => {
+        return [OFFTHREAD_VIDEO_CLASS_NAME, props.className]
+            .filter(truthy)
+            .join(' ');
+    }, [props.className]);
+    return (jsx(Img, { src: actualSrc, className: className, ...props, onError: onErr }));
+};
+
+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;
+};
+// https://github.com/remotion-dev/remotion/issues/1655
+const isIOSSafariCase = (actualSrc) => {
+    return typeof window === 'undefined'
+        ? false
+        : /iP(ad|od|hone)/i.test(window.navigator.userAgent) &&
+            Boolean(navigator.userAgent.match(/Version\/[\d.]+.*Safari/)) &&
+            actualSrc.startsWith('blob:');
+};
+const appendVideoFragment = ({ actualSrc, actualFrom, duration, fps, }) => {
+    var _a;
+    if (isIOSSafariCase(actualSrc)) {
+        return actualSrc;
+    }
+    if (actualSrc.startsWith('data:')) {
+        return actualSrc;
+    }
+    const existingHash = Boolean(new URL(actualSrc, (_a = (typeof window === 'undefined' ? null : window.location.href)) !== null && _a !== void 0 ? _a : 'http://localhost:3000').hash);
+    if (existingHash) {
+        return actualSrc;
+    }
+    if (!Number.isFinite(actualFrom)) {
+        return actualSrc;
+    }
+    actualSrc += `#t=${toSeconds(-actualFrom, fps)}`;
+    if (!Number.isFinite(duration)) {
+        return actualSrc;
+    }
+    actualSrc += `,${toSeconds(duration, fps)}`;
+    return actualSrc;
+};
+
+const VideoForDevelopmentRefForwardingFunction = (props, ref) => {
+    var _a, _b;
+    const videoRef = useRef(null);
+    const volumePropFrame = useFrameForVolumeProp();
+    const { fps, durationInFrames } = useVideoConfig();
+    const parentSequence = useContext(SequenceContext);
+    const { volume, muted, playbackRate, onlyWarnForMediaSeekingError, src, onDuration, 
+    // @ts-expect-error
+    acceptableTimeShift, acceptableTimeShiftInSeconds, ...nativeProps } = props;
+    if (typeof acceptableTimeShift !== 'undefined') {
+        throw new Error('acceptableTimeShift has been removed. Use acceptableTimeShiftInSeconds instead.');
+    }
+    const actualVolume = useMediaTagVolume(videoRef);
+    const [mediaVolume] = useMediaVolumeState();
+    const [mediaMuted] = useMediaMutedState();
+    useMediaInTimeline({
+        mediaRef: videoRef,
+        volume,
+        mediaVolume,
+        mediaType: 'video',
+        src,
+        playbackRate: (_a = props.playbackRate) !== null && _a !== void 0 ? _a : 1,
+    });
+    useSyncVolumeWithMediaTag({
+        volumePropFrame,
+        actualVolume,
+        volume,
+        mediaVolume,
+        mediaRef: videoRef,
+    });
+    useMediaPlayback({
+        mediaRef: videoRef,
+        src,
+        mediaType: 'video',
+        playbackRate: (_b = props.playbackRate) !== null && _b !== void 0 ? _b : 1,
+        onlyWarnForMediaSeekingError,
+        acceptableTimeshift: acceptableTimeShiftInSeconds !== null && acceptableTimeShiftInSeconds !== void 0 ? acceptableTimeShiftInSeconds : DEFAULT_ACCEPTABLE_TIMESHIFT,
+    });
+    const actualFrom = parentSequence
+        ? parentSequence.relativeFrom + parentSequence.cumulatedFrom
+        : 0;
+    const duration = parentSequence
+        ? Math.min(parentSequence.durationInFrames, durationInFrames)
+        : durationInFrames;
+    const actualSrc = useAppendVideoFragment({
+        actualSrc: usePreload(src),
+        actualFrom,
+        duration,
+        fps,
+    });
+    useImperativeHandle(ref, () => {
+        return videoRef.current;
+    }, []);
+    useEffect(() => {
+        const { current } = videoRef;
+        if (!current) {
+            return;
+        }
+        const errorHandler = () => {
+            var _a;
+            if (current === null || current === void 0 ? void 0 : current.error) {
+                console.error('Error occurred in video', current === null || current === void 0 ? void 0 : current.error);
+                // If user is handling the error, we don't cause an unhandled exception
+                if (props.onError) {
+                    return;
+                }
+                throw new Error(`The browser threw an error while playing the video ${src}: Code ${current.error.code} - ${(_a = current === null || current === void 0 ? void 0 : current.error) === null || _a === void 0 ? void 0 : _a.message}. See https://remotion.dev/docs/media-playback-error for help. Pass an onError() prop to handle the error.`);
+            }
+            else {
+                throw new Error('The browser threw an error');
+            }
+        };
+        current.addEventListener('error', errorHandler, { once: true });
+        return () => {
+            current.removeEventListener('error', errorHandler);
+        };
+    }, [props.onError, src]);
+    const currentOnDurationCallback = useRef();
+    currentOnDurationCallback.current = onDuration;
+    useEffect(() => {
+        var _a;
+        const { current } = videoRef;
+        if (!current) {
+            return;
+        }
+        if (current.duration) {
+            (_a = currentOnDurationCallback.current) === null || _a === void 0 ? void 0 : _a.call(currentOnDurationCallback, src, current.duration);
+            return;
+        }
+        const onLoadedMetadata = () => {
+            var _a;
+            (_a = currentOnDurationCallback.current) === null || _a === void 0 ? void 0 : _a.call(currentOnDurationCallback, src, current.duration);
+        };
+        current.addEventListener('loadedmetadata', onLoadedMetadata);
+        return () => {
+            current.removeEventListener('loadedmetadata', onLoadedMetadata);
+        };
+    }, [src]);
+    return (jsx("video", { ref: videoRef, muted: muted || mediaMuted, playsInline: true, src: actualSrc, ...nativeProps }));
+};
+// Copy types from forwardRef but not necessary to remove ref
+const VideoForDevelopment = forwardRef(VideoForDevelopmentRefForwardingFunction);
+
+/**
+ * @description This method imports and displays a video, similar to <Video />. During rendering, it extracts the exact frame from the video and displays it in an <img> tag
+ * @see [Documentation](https://www.remotion.dev/docs/offthreadvideo)
+ */
+const OffthreadVideo = (props) => {
+    const { startFrom, endAt, imageFormat, ...otherProps } = props;
+    const environment = useRemotionEnvironment();
+    const onDuration = useCallback(() => undefined, []);
+    if (typeof props.src !== 'string') {
+        throw new TypeError(`The \`<OffthreadVideo>\` tag requires a string for \`src\`, but got ${JSON.stringify(props.src)} instead.`);
+    }
+    if (props.imageFormat) {
+        throw new TypeError(`The \`<OffthreadVideo>\` tag does no longer accept \`imageFormat\`. Use the \`transparent\` prop if you want to render a transparent video.`);
+    }
+    if (typeof startFrom !== 'undefined' || typeof endAt !== 'undefined') {
+        validateStartFromProps(startFrom, endAt);
+        const startFromFrameNo = startFrom !== null && startFrom !== void 0 ? startFrom : 0;
+        const endAtFrameNo = endAt !== null && endAt !== void 0 ? endAt : Infinity;
+        return (jsx(Sequence, { layout: "none", from: 0 - startFromFrameNo, showInTimeline: false, durationInFrames: endAtFrameNo, children: jsx(OffthreadVideo, { ...otherProps }) }));
+    }
+    validateMediaProps(props, 'Video');
+    if (environment === 'rendering') {
+        return (jsx(OffthreadVideoForRendering, { imageFormat: imageFormat, ...otherProps }));
+    }
+    return (jsx(VideoForDevelopment, { onDuration: onDuration, onlyWarnForMediaSeekingError: true, ...otherProps }));
+};
+
+const VideoForRenderingForwardFunction = ({ onError, volume: volumeProp, allowAmplificationDuringRender, playbackRate, onDuration, ...props }, ref) => {
+    const absoluteFrame = useTimelinePosition();
+    const frame = useCurrentFrame();
+    const volumePropsFrame = useFrameForVolumeProp();
+    const videoConfig = useUnsafeVideoConfig();
+    const videoRef = useRef(null);
+    const sequenceContext = useContext(SequenceContext);
+    const mediaStartsAt = useMediaStartsAt();
+    const environment = useRemotionEnvironment();
+    const { registerAsset, unregisterAsset } = useContext(AssetManager);
+    // Generate a string that's as unique as possible for this asset
+    // but at the same time the same on all threads
+    const id = useMemo(() => {
+        var _a;
+        return `video-${random((_a = props.src) !== null && _a !== void 0 ? _a : '')}-${sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.cumulatedFrom}-${sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.relativeFrom}-${sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.durationInFrames}`;
+    }, [
+        props.src,
+        sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.cumulatedFrom,
+        sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.relativeFrom,
+        sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.durationInFrames,
+    ]);
+    if (!videoConfig) {
+        throw new Error('No video config found');
+    }
+    const volume = evaluateVolume({
+        volume: volumeProp,
+        frame: volumePropsFrame,
+        mediaVolume: 1,
+        allowAmplificationDuringRender: allowAmplificationDuringRender !== null && allowAmplificationDuringRender !== void 0 ? allowAmplificationDuringRender : false,
+    });
+    useEffect(() => {
+        if (!props.src) {
+            throw new Error('No src passed');
+        }
+        if (props.muted) {
+            return;
+        }
+        if (volume <= 0) {
+            return;
+        }
+        if (!window.remotion_audioEnabled) {
+            return;
+        }
+        registerAsset({
+            type: 'video',
+            src: getAbsoluteSrc(props.src),
+            id,
+            frame: absoluteFrame,
+            volume,
+            mediaFrame: frame,
+            playbackRate: playbackRate !== null && playbackRate !== void 0 ? playbackRate : 1,
+            allowAmplificationDuringRender: allowAmplificationDuringRender !== null && allowAmplificationDuringRender !== void 0 ? allowAmplificationDuringRender : false,
+        });
+        return () => unregisterAsset(id);
+    }, [
+        props.muted,
+        props.src,
+        registerAsset,
+        id,
+        unregisterAsset,
+        volume,
+        frame,
+        absoluteFrame,
+        playbackRate,
+        allowAmplificationDuringRender,
+    ]);
+    useImperativeHandle(ref, () => {
+        return videoRef.current;
+    }, []);
+    useEffect(() => {
+        if (!window.remotion_videoEnabled) {
+            return;
+        }
+        const { current } = videoRef;
+        if (!current) {
+            return;
+        }
+        const currentTime = (() => {
+            return getMediaTime({
+                fps: videoConfig.fps,
+                frame,
+                src: props.src,
+                playbackRate: playbackRate || 1,
+                startFrom: -mediaStartsAt,
+                mediaType: 'video',
+            });
+        })();
+        const handle = delayRender(`Rendering <Video /> with src="${props.src}"`);
+        if (process.env.NODE_ENV === 'test') {
+            continueRender(handle);
+            return;
+        }
+        if (isApproximatelyTheSame(current.currentTime, currentTime)) {
+            if (current.readyState >= 2) {
+                continueRender(handle);
+                return;
+            }
+            const loadedDataHandler = () => {
+                continueRender(handle);
+            };
+            current.addEventListener('loadeddata', loadedDataHandler, { once: true });
+            return () => {
+                current.removeEventListener('loadeddata', loadedDataHandler);
+            };
+        }
+        current.currentTime = currentTime;
+        const seekedHandler = () => {
+            warnAboutNonSeekableMedia(current, 'exception');
+            if (window.navigator.platform.startsWith('Mac')) {
+                // Improve me: This is ensures frame perfectness but slows down render.
+                // Please see this issue for context: https://github.com/remotion-dev/remotion/issues/200
+                // Only affects macOS since it uses VideoToolbox decoding.
+                setTimeout(() => {
+                    continueRender(handle);
+                }, 100);
+            }
+            else {
+                continueRender(handle);
+            }
+        };
+        current.addEventListener('seeked', seekedHandler, { once: true });
+        const endedHandler = () => {
+            continueRender(handle);
+        };
+        current.addEventListener('ended', endedHandler, { once: true });
+        const errorHandler = () => {
+            var _a;
+            if (current === null || current === void 0 ? void 0 : current.error) {
+                console.error('Error occurred in video', current === null || current === void 0 ? void 0 : current.error);
+                // If user is handling the error, we don't cause an unhandled exception
+                if (onError) {
+                    return;
+                }
+                throw new Error(`The browser threw an error while playing the video ${props.src}: Code ${current.error.code} - ${(_a = current === null || current === void 0 ? void 0 : current.error) === null || _a === void 0 ? void 0 : _a.message}. See https://remotion.dev/docs/media-playback-error for help. Pass an onError() prop to handle the error.`);
+            }
+            else {
+                throw new Error('The browser threw an error');
+            }
+        };
+        current.addEventListener('error', errorHandler, { once: true });
+        // If video skips to another frame or unmounts, we clear the created handle
+        return () => {
+            current.removeEventListener('ended', endedHandler);
+            current.removeEventListener('error', errorHandler);
+            current.removeEventListener('seeked', seekedHandler);
+            continueRender(handle);
+        };
+    }, [
+        volumePropsFrame,
+        props.src,
+        playbackRate,
+        videoConfig.fps,
+        frame,
+        mediaStartsAt,
+        onError,
+    ]);
+    const { src } = props;
+    // If video source switches, make new handle
+    if (environment === 'rendering') {
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        useLayoutEffect(() => {
+            if (process.env.NODE_ENV === 'test') {
+                return;
+            }
+            const newHandle = delayRender('Loading <Video> duration with src=' + src);
+            const { current } = videoRef;
+            const didLoad = () => {
+                if (current === null || current === void 0 ? void 0 : current.duration) {
+                    onDuration(src, current.duration);
+                }
+                continueRender(newHandle);
+            };
+            if (current === null || current === void 0 ? void 0 : current.duration) {
+                onDuration(src, current.duration);
+                continueRender(newHandle);
+            }
+            else {
+                current === null || current === void 0 ? void 0 : current.addEventListener('loadedmetadata', didLoad, { once: true });
+            }
+            // If tag gets unmounted, clear pending handles because video metadata is not going to load
+            return () => {
+                current === null || current === void 0 ? void 0 : current.removeEventListener('loadedmetadata', didLoad);
+                continueRender(newHandle);
+            };
+        }, [src, onDuration]);
+    }
+    return jsx("video", { ref: videoRef, ...props, onError: onError });
+};
+const VideoForRendering = forwardRef(VideoForRenderingForwardFunction);
+
+const VideoForwardingFunction = (props, ref) => {
+    var _a;
+    const { startFrom, endAt, ...otherProps } = props;
+    const { loop, ...propsOtherThanLoop } = props;
+    const { fps } = useVideoConfig();
+    const environment = useRemotionEnvironment();
+    const { durations, setDurations } = useContext(DurationsContext);
+    if (typeof ref === 'string') {
+        throw new Error('string refs are not supported');
+    }
+    if (typeof props.src !== 'string') {
+        throw new TypeError(`The \`<Video>\` tag requires a string for \`src\`, but got ${JSON.stringify(props.src)} instead.`);
+    }
+    const onDuration = useCallback((src, durationInSeconds) => {
+        setDurations({ type: 'got-duration', durationInSeconds, src });
+    }, [setDurations]);
+    if (loop && props.src && durations[getAbsoluteSrc(props.src)] !== undefined) {
+        const naturalDuration = durations[getAbsoluteSrc(props.src)] * fps;
+        const playbackRate = (_a = props.playbackRate) !== null && _a !== void 0 ? _a : 1;
+        const durationInFrames = Math.floor(naturalDuration / playbackRate);
+        return (jsx(Loop, { durationInFrames: durationInFrames, children: jsx(Video, { ...propsOtherThanLoop, ref: ref }) }));
+    }
+    if (typeof startFrom !== 'undefined' || typeof endAt !== 'undefined') {
+        validateStartFromProps(startFrom, endAt);
+        const startFromFrameNo = startFrom !== null && startFrom !== void 0 ? startFrom : 0;
+        const endAtFrameNo = endAt !== null && endAt !== void 0 ? endAt : Infinity;
+        return (jsx(Sequence, { layout: "none", from: 0 - startFromFrameNo, showInTimeline: false, durationInFrames: endAtFrameNo, children: jsx(Video, { ...otherProps, ref: ref }) }));
+    }
+    validateMediaProps(props, 'Video');
+    if (environment === 'rendering') {
+        return (jsx(VideoForRendering, { onDuration: onDuration, ...otherProps, ref: ref }));
+    }
+    return (jsx(VideoForDevelopment, { onlyWarnForMediaSeekingError: false, ...otherProps, ref: ref, onDuration: onDuration }));
+};
+const forward = forwardRef;
+/**
+ * @description allows you to include a video file in your Remotion project. It wraps the native HTMLVideoElement.
+ * @see [Documentation](https://www.remotion.dev/docs/video)
+ */
+const Video = forward(VideoForwardingFunction);
+
+checkMultipleRemotionVersions();
+const Experimental = {
+    /**
+     * @description This is a special component that will cause Remotion to only partially capture the frame of the video.
+     * @see [Documentation](https://www.remotion.dev/docs/clipper)
+     */
+    Clipper,
+    /**
+     * @description This is a special component, that, when rendered, will skip rendering the frame altogether.
+     * @see [Documentation](https://www.remotion.dev/docs/null)
+     */
+    Null,
+    useIsPlayer,
+};
+const proxyObj = {};
+const Config = new Proxy(proxyObj, {
+    get(_, prop) {
+        if (prop === 'Bundling' ||
+            prop === 'Rendering' ||
+            prop === 'Log' ||
+            prop === 'Puppeteer' ||
+            prop === 'Output') {
+            return Config;
+        }
+        return () => {
+            console.warn('⚠️  The CLI configuration has been extracted from Remotion Core.');
+            console.warn('Update the import from the config file:');
+            console.warn();
+            console.warn('- Delete:');
+            console.warn('import {Config} from "remotion";');
+            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.');
+            process.exit(1);
+        };
+    },
+});
+
+export { AbsoluteFill, Audio, Composition, Config, Easing, Experimental, Folder, FolderContext, Freeze, IFrame, Img, Internals, Loop, OffthreadVideo, Sequence, Series, Still, VERSION, Video, cancelRender, continueRender, delayRender, getInputProps, getStaticFiles, interpolate, interpolateColors, measureSpring, prefetch, random, registerRoot, spring, staticFile, useCurrentFrame, useVideoConfig };