remotion 4.0.142 → 4.0.144

package/dist/esm/index.mjs

@@ -1,5 +1,5 @@
 import React, { createContext, useState, useMemo, useLayoutEffect, useContext, useEffect, forwardRef, useCallback, useRef, createRef, useImperativeHandle, useReducer, Suspense, Children } from 'react';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { createPortal } from 'react-dom';
 
 const NativeLayersContext = createContext({
@@ -105,7 +105,12 @@ function truthy(value) {
 }
 
 // Automatically generated on publish
-const VERSION = '4.0.142';
+/**
+ * @description Provides the current version number of the Remotion library.
+ * @see [Documentation](https://remotion.dev/docs/version)
+ * @returns {string} The current version of the remotion package
+ */
+const VERSION = '4.0.144';
 
 const checkMultipleRemotionVersions = () => {
     if (typeof globalThis === 'undefined') {
@@ -926,10 +931,9 @@ const useUnsafeVideoConfig = () => {
 };
 
 /**
- * /**
  * @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`.
+ * @returns Returns an object containing `fps`, `width`, `height`, `durationInFrames`, `id` and `defaultProps`.
  */
 const useVideoConfig = () => {
     const videoConfig = useUnsafeVideoConfig();
@@ -1252,6 +1256,10 @@ function cancelRender(err) {
     throw error;
 }
 
+const LoopContext = createContext(null);
+const useLoop = () => {
+    return React.useContext(LoopContext);
+};
 /**
  * @description This component allows you to quickly lay out an animation so it repeats itself.
  * @see [Documentation](https://www.remotion.dev/docs/loop)
@@ -1276,7 +1284,8 @@ const Loop = ({ durationInFrames, times = Infinity, children, name, ...props })
     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 iteration = Math.floor(currentFrame / durationInFrames);
+    const start = iteration * durationInFrames;
     const from = Math.min(start, maxFrame);
     const loopDisplay = useMemo(() => {
         return {
@@ -1285,8 +1294,15 @@ const Loop = ({ durationInFrames, times = Infinity, children, name, ...props })
             durationInFrames,
         };
     }, [actualTimes, durationInFrames, from]);
-    return (jsx(Sequence, { durationInFrames: durationInFrames, from: from, name: name !== null && name !== void 0 ? name : '<Loop>', _remotionInternalLoopDisplay: loopDisplay, layout: props.layout, style: style, children: children }));
+    const loopContext = useMemo(() => {
+        return {
+            iteration: Math.floor(currentFrame / durationInFrames),
+            durationInFrames,
+        };
+    }, [currentFrame, durationInFrames]);
+    return (jsx(LoopContext.Provider, { value: loopContext, children: jsx(Sequence, { durationInFrames: durationInFrames, from: from, name: name !== null && name !== void 0 ? name : '<Loop>', _remotionInternalLoopDisplay: loopDisplay, layout: props.layout, style: style, children: children }) }));
 };
+Loop.useLoop = useLoop;
 
 const PreloadContext = createContext({});
 let preloads = {};
@@ -1698,10 +1714,14 @@ const useMediaStartsAt = () => {
  * When passing a function as the prop for `volume`,
  * we calculate the way more intuitive value for currentFrame
  */
-const useFrameForVolumeProp = () => {
+const useFrameForVolumeProp = (behavior) => {
+    const loop = Loop.useLoop();
     const frame = useCurrentFrame();
     const startsAt = useMediaStartsAt();
-    return frame + startsAt;
+    if (behavior === 'repeat' || loop === null) {
+        return frame + startsAt;
+    }
+    return frame + startsAt + loop.durationInFrames * loop.iteration;
 };
 
 const getAssetDisplayName = (filename) => {
@@ -2076,15 +2096,19 @@ const appendVideoFragment = ({ actualSrc, actualFrom, duration, fps, }) => {
     actualSrc += `,${toSeconds(duration, fps)}`;
     return actualSrc;
 };
-const isSubsetOfDuration = (prevStartFrom, newStartFrom, prevDuration, newDuration) => {
-    return (prevStartFrom <= newStartFrom &&
-        prevStartFrom + prevDuration >= newStartFrom + newDuration);
-};
+const isSubsetOfDuration = ({ prevStartFrom, newStartFrom, prevDuration, newDuration, }) => 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) {
+    if (!isSubsetOfDuration({
+        prevStartFrom: actualFromRef.current,
+        newStartFrom: initialActualFrom,
+        prevDuration: actualDuration.current,
+        newDuration: initialDuration,
+    }) ||
+        initialActualSrc !== actualSrc.current) {
         actualFromRef.current = initialActualFrom;
         actualDuration.current = initialDuration;
         actualSrc.current = initialActualSrc;
@@ -2537,10 +2561,10 @@ const AudioForDevelopmentForwardRefFunction = (props, ref) => {
     if (props.shouldPreMountAudioTags !== initialShouldPreMountAudioElements) {
         throw new Error('Cannot change the behavior for pre-mounting audio tags dynamically.');
     }
+    const { volume, muted, playbackRate, shouldPreMountAudioTags, src, onDuration, acceptableTimeShiftInSeconds, _remotionInternalNeedsDurationCalculation, _remotionInternalNativeLoopPassed, _remotionInternalStack, allowAmplificationDuringRender, name, pauseWhenBuffering, showInTimeline, loopVolumeCurveBehavior, stack, ...nativeProps } = props;
     const [mediaVolume] = useMediaVolumeState();
     const [mediaMuted] = useMediaMutedState();
-    const volumePropFrame = useFrameForVolumeProp();
-    const { volume, muted, playbackRate, shouldPreMountAudioTags, src, onDuration, acceptableTimeShiftInSeconds, _remotionInternalNeedsDurationCalculation, _remotionInternalNativeLoopPassed, _remotionInternalStack, allowAmplificationDuringRender, name, pauseWhenBuffering, showInTimeline, ...nativeProps } = props;
+    const volumePropFrame = useFrameForVolumeProp(loopVolumeCurveBehavior !== null && loopVolumeCurveBehavior !== void 0 ? loopVolumeCurveBehavior : 'repeat');
     const { hidden } = useContext(SequenceVisibilityToggleContext);
     if (!src) {
         throw new TypeError("No 'src' was passed to <Audio>.");
@@ -2762,8 +2786,9 @@ const continueRender = (handle) => {
 
 const AudioForRenderingRefForwardingFunction = (props, ref) => {
     const audioRef = useRef(null);
+    const { volume: volumeProp, playbackRate, allowAmplificationDuringRender, onDuration, toneFrequency, _remotionInternalNeedsDurationCalculation, _remotionInternalNativeLoopPassed, acceptableTimeShiftInSeconds, name, onError, delayRenderRetries, delayRenderTimeoutInMilliseconds, loopVolumeCurveBehavior, ...nativeProps } = props;
     const absoluteFrame = useTimelinePosition();
-    const volumePropFrame = useFrameForVolumeProp();
+    const volumePropFrame = useFrameForVolumeProp(loopVolumeCurveBehavior !== null && loopVolumeCurveBehavior !== void 0 ? loopVolumeCurveBehavior : 'repeat');
     const frame = useCurrentFrame();
     const sequenceContext = useContext(SequenceContext);
     const { registerRenderAsset, unregisterRenderAsset } = useContext(RenderAssetManager);
@@ -2778,7 +2803,6 @@ const AudioForRenderingRefForwardingFunction = (props, ref) => {
         sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.cumulatedFrom,
         sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.durationInFrames,
     ]);
-    const { volume: volumeProp, playbackRate, allowAmplificationDuringRender, onDuration, toneFrequency, _remotionInternalNeedsDurationCalculation, _remotionInternalNativeLoopPassed, acceptableTimeShiftInSeconds, name, onError, delayRenderRetries, delayRenderTimeoutInMilliseconds, ...nativeProps } = props;
     const volume = evaluateVolume({
         volume: volumeProp,
         frame: volumePropFrame,
@@ -3487,6 +3511,7 @@ const ImgRefForwarding = ({ onError, maxRetries = 2, src, pauseWhenLoading, dela
         cancelRender('Error loading image with src: ' + ((_l = imageRef.current) === null || _l === void 0 ? void 0 : _l.src));
     }, [maxRetries, onError, retryIn]);
     if (typeof window !== 'undefined') {
+        const isPremounting = Boolean(sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.premounting);
         // eslint-disable-next-line react-hooks/rules-of-hooks
         useLayoutEffect(() => {
             if (process.env.NODE_ENV === 'test') {
@@ -3496,7 +3521,7 @@ const ImgRefForwarding = ({ onError, maxRetries = 2, src, pauseWhenLoading, dela
                 retries: delayRenderRetries !== null && delayRenderRetries !== void 0 ? delayRenderRetries : undefined,
                 timeoutInMilliseconds: delayRenderTimeoutInMilliseconds !== null && delayRenderTimeoutInMilliseconds !== void 0 ? delayRenderTimeoutInMilliseconds : undefined,
             });
-            const unblock = pauseWhenLoading && !(sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.premounting)
+            const unblock = pauseWhenLoading && !isPremounting
                 ? delayPlayback().unblock
                 : () => undefined;
             const { current } = imageRef;
@@ -3531,7 +3556,7 @@ const ImgRefForwarding = ({ onError, maxRetries = 2, src, pauseWhenLoading, dela
             delayRenderRetries,
             delayRenderTimeoutInMilliseconds,
             pauseWhenLoading,
-            sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.premounting,
+            isPremounting,
         ]);
     }
     return (jsx("img", { ...props, ref: imageRef, src: actualSrc, onError: didGetError }));
@@ -3645,7 +3670,7 @@ const injectCSS = (css) => {
     injected[css] = true;
 };
 const OFFTHREAD_VIDEO_CLASS_NAME = '__remotion_offthreadvideo';
-const makeDefaultCSS = (scope, backgroundColor) => {
+const makeDefaultPreviewCSS = (scope, backgroundColor) => {
     if (!scope) {
         return `
     * {
@@ -3678,7 +3703,7 @@ var CSSUtils = /*#__PURE__*/Object.freeze({
     __proto__: null,
     injectCSS: injectCSS,
     OFFTHREAD_VIDEO_CLASS_NAME: OFFTHREAD_VIDEO_CLASS_NAME,
-    makeDefaultCSS: makeDefaultCSS
+    makeDefaultPreviewCSS: makeDefaultPreviewCSS
 });
 
 const REMOTION_STUDIO_CONTAINER_ELEMENT = '__remotion-studio-container';
@@ -3686,115 +3711,445 @@ const getPreviewDomElement = () => {
     return document.getElementById(REMOTION_STUDIO_CONTAINER_ELEMENT);
 };
 
+let Root = null;
+let listeners = [];
 /**
- * Copied from:
- * https://github.com/software-mansion/react-native-reanimated/blob/master/src/reanimated2/Colors.ts
+ * @description This function registers the root component of the Remotion project
+ * @see [Documentation](https://www.remotion.dev/docs/register-root)
  */
-// 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;
+const registerRoot = (comp) => {
+    if (!comp) {
+        throw new Error(`You must pass a React component to registerRoot(), but ${JSON.stringify(comp)} was passed.`);
     }
-    if (t < 1 / 6) {
-        return p + (q - p) * 6 * t;
+    if (Root) {
+        throw new Error('registerRoot() was called more than once.');
     }
-    if (t < 1 / 2) {
-        return q;
+    Root = comp;
+    listeners.forEach((l) => {
+        l(comp);
+    });
+};
+const getRoot = () => {
+    return Root;
+};
+const waitForRoot = (fn) => {
+    if (Root) {
+        fn(Root);
+        return () => undefined;
     }
-    if (t < 2 / 3) {
-        return p + (q - p) * (2 / 3 - t) * 6;
+    listeners.push(fn);
+    return () => {
+        listeners = listeners.filter((l) => l !== fn);
+    };
+};
+
+const RemotionRoot = ({ children, numberOfAudioTags }) => {
+    const [remotionRootId] = useState(() => String(random(null)));
+    const [frame, setFrame] = useState(() => getInitialFrameState());
+    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, composition, attempt) => {
+                window.remotion_attempt = attempt;
+                const id = delayRender(`Setting the current frame to ${f}`);
+                setFrame((s) => ({
+                    ...s,
+                    [composition]: f,
+                }));
+                requestAnimationFrame(() => continueRender(id));
+            };
+            window.remotion_isPlayer = false;
+        }, []);
     }
-    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));
+    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: jsx(BufferingProvider, { children: children }) }) }) }) }) }) }) }) }));
+};
+
+// https://github.com/remotion-dev/remotion/issues/3412#issuecomment-1910120552
+// eslint-disable-next-line no-useless-concat
+function getEnvVar() {
+    const parts = ['proc', 'ess', '.', 'en', 'v', '.', 'NOD', 'E_EN', 'V'];
+    return parts.join('');
 }
-function parse255(str) {
-    const int = Number.parseInt(str, 10);
-    if (int < 0) {
-        return 0;
+const getEnvVariables = () => {
+    if (getRemotionEnvironment().isRendering) {
+        const param = window.remotion_envVariables;
+        if (!param) {
+            return {};
+        }
+        return { ...JSON.parse(param), NODE_ENV: process.env.NODE_ENV };
     }
-    if (int > 255) {
-        return 255;
+    // For the Studio, we already set the environment variables in index-html.ts.
+    // We just add NODE_ENV here.
+    if (!process.env.NODE_ENV) {
+        throw new Error(`${getEnvVar()} is not set`);
     }
-    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;
+    return {
+        NODE_ENV: process.env.NODE_ENV,
+    };
+};
+const setupEnvVariables = () => {
+    const env = getEnvVariables();
+    if (!window.process) {
+        window.process = {};
     }
-    if (num > 1) {
-        return 255;
+    if (!window.process.env) {
+        window.process.env = {};
     }
-    return Math.round(num * 255);
-}
-function parsePercentage(str) {
-    // parseFloat conveniently ignores the final %
-    const int = Number.parseFloat(str);
-    if (int < 0) {
-        return 0;
+    Object.keys(env).forEach((key) => {
+        window.process.env[key] = env[key];
+    });
+};
+
+const CurrentScaleContext = React.createContext(null);
+const PreviewSizeContext = createContext({
+    setSize: () => undefined,
+    size: { size: 'auto', translation: { x: 0, y: 0 } },
+});
+const calculateScale = ({ canvasSize, compositionHeight, compositionWidth, previewSize, }) => {
+    const heightRatio = canvasSize.height / compositionHeight;
+    const widthRatio = canvasSize.width / compositionWidth;
+    const ratio = Math.min(heightRatio, widthRatio);
+    return previewSize === 'auto' ? ratio : Number(previewSize);
+};
+/**
+ * Gets the current scale of the container in which the component is being rendered.
+ * Only works in the Remotion Studio and in the Remotion Player.
+ */
+const useCurrentScale = (options) => {
+    const hasContext = React.useContext(CurrentScaleContext);
+    const zoomContext = React.useContext(PreviewSizeContext);
+    const config = useUnsafeVideoConfig();
+    if (hasContext === null || config === null || zoomContext === null) {
+        if (options === null || options === void 0 ? void 0 : options.dontThrowIfOutsideOfRemotion) {
+            return 1;
+        }
+        if (getRemotionEnvironment().isRendering) {
+            return 1;
+        }
+        throw new Error([
+            'useCurrentScale() was called outside of a Remotion context.',
+            'This hook can only be called in a component that is being rendered by Remotion.',
+            'If you want to this hook to return 1 outside of Remotion, pass {dontThrowIfOutsideOfRemotion: true} as an option.',
+            'If you think you called this hook in a Remotion component, make sure all versions of Remotion are aligned.',
+        ].join('\n'));
     }
-    if (int > 100) {
-        return 1;
+    if (hasContext.type === 'scale') {
+        return hasContext.scale;
     }
-    return int / 100;
-}
-const colorNames = {
-    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,
+    return calculateScale({
+        canvasSize: hasContext.canvasSize,
+        compositionHeight: config.height,
+        compositionWidth: config.width,
+        previewSize: zoomContext.size.size,
+    });
+};
+
+const WATCH_REMOTION_STATIC_FILES = 'remotion_staticFilesChanged';
+/**
+ * @description Watch for changes in a specific static file.
+ * @param {string} fileName - The name of the static file to watch for changes.
+ * @param {WatcherCallback} callback - A callback function to be called when the file changes.
+ * @returns {{cancel: () => void}} A function that can be used to cancel the event listener.
+ * @see [Documentation](https://www.remotion.dev/docs/watchstaticfile)
+ */
+const watchStaticFile = (fileName, callback) => {
+    // Check if function is called in Remotion Studio
+    if (!getRemotionEnvironment().isStudio) {
+        // eslint-disable-next-line no-console
+        console.warn('The API is only available while using the Remotion Studio.');
+        return { cancel: () => undefined };
+    }
+    const withoutStaticBase = fileName.startsWith(window.remotion_staticBase)
+        ? fileName.replace(window.remotion_staticBase, '')
+        : fileName;
+    const withoutLeadingSlash = withoutStaticBase.startsWith('/')
+        ? withoutStaticBase.slice(1)
+        : withoutStaticBase;
+    let prevFileData = window.remotion_staticFiles.find((file) => file.name === withoutLeadingSlash);
+    // Check if the specified static file has updated or deleted
+    const checkFile = (event) => {
+        const staticFiles = event.detail.files;
+        // Check for user specified file
+        const newFileData = staticFiles.find((file) => file.name === withoutLeadingSlash);
+        if (!newFileData) {
+            // File is deleted
+            if (prevFileData !== undefined) {
+                callback(null);
+            }
+            prevFileData = undefined;
+            return;
+        }
+        if (prevFileData === undefined ||
+            prevFileData.lastModified !== newFileData.lastModified) {
+            callback(newFileData); // File is added or modified
+            prevFileData = newFileData;
+        }
+    };
+    window.addEventListener(WATCH_REMOTION_STATIC_FILES, checkFile);
+    const cancel = () => {
+        return window.removeEventListener(WATCH_REMOTION_STATIC_FILES, checkFile);
+    };
+    return { cancel };
+};
+
+function useRemotionContexts() {
+    const compositionManagerCtx = React.useContext(CompositionManager);
+    const timelineContext = React.useContext(TimelineContext);
+    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 renderAssetManagerContext = React.useContext(RenderAssetManager);
+    const sequenceManagerContext = React.useContext(SequenceManager);
+    const bufferManagerContext = React.useContext(BufferingContextReact);
+    return useMemo(() => ({
+        compositionManagerCtx,
+        timelineContext,
+        setTimelineContext,
+        sequenceContext,
+        nonceContext,
+        canUseRemotionHooksContext,
+        nativeLayersContext,
+        preloadContext,
+        resolveCompositionContext,
+        renderAssetManagerContext,
+        sequenceManagerContext,
+        bufferManagerContext,
+    }), [
+        compositionManagerCtx,
+        nonceContext,
+        sequenceContext,
+        setTimelineContext,
+        timelineContext,
+        canUseRemotionHooksContext,
+        nativeLayersContext,
+        preloadContext,
+        resolveCompositionContext,
+        renderAssetManagerContext,
+        sequenceManagerContext,
+        bufferManagerContext,
+    ]);
+}
+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(RenderAssetManager.Provider, { value: contexts.renderAssetManagerContext, children: jsx(ResolveCompositionContext.Provider, { value: contexts.resolveCompositionContext, children: jsx(TimelineContext.Provider, { value: contexts.timelineContext, children: jsx(SetTimelineContext.Provider, { value: contexts.setTimelineContext, children: jsx(SequenceContext.Provider, { value: contexts.sequenceContext, children: jsx(BufferingContextReact.Provider, { value: contexts.bufferManagerContext, children: children }) }) }) }) }) }) }) }) }) }) }) }));
+};
+
+// Mark them as Internals so use don't assume this is public
+// API and are less likely to use it
+const Internals = {
+    useUnsafeVideoConfig,
+    Timeline: TimelinePosition,
+    CompositionManager,
+    SequenceManager,
+    SequenceVisibilityToggleContext,
+    RemotionRoot,
+    useVideo,
+    getRoot,
+    useMediaVolumeState,
+    useMediaMutedState,
+    useLazyComponent,
+    truthy,
+    SequenceContext,
+    useRemotionContexts,
+    RemotionContextProvider,
+    CSSUtils,
+    setupEnvVariables,
+    MediaVolumeContext,
+    SetMediaVolumeContext,
+    getRemotionEnvironment,
+    SharedAudioContext,
+    SharedAudioContextProvider,
+    invalidCompositionErrorMessage,
+    isCompositionIdValid,
+    getPreviewDomElement,
+    compositionsRef,
+    portalNode,
+    waitForRoot,
+    CanUseRemotionHooksProvider,
+    CanUseRemotionHooks,
+    PrefetchProvider,
+    DurationsContextProvider,
+    IsPlayerContextProvider,
+    useIsPlayer,
+    EditorPropsProvider,
+    EditorPropsContext,
+    usePreload,
+    NonceContext,
+    resolveVideoConfig,
+    useResolvedVideoConfig,
+    resolveCompositionsRef,
+    ResolveCompositionConfig,
+    REMOTION_STUDIO_CONTAINER_ELEMENT,
+    RenderAssetManager,
+    persistCurrentFrame,
+    useTimelineSetFrame,
+    NativeLayersProvider,
+    ClipComposition,
+    isIosSafari,
+    WATCH_REMOTION_STATIC_FILES,
+    addSequenceStackTraces,
+    useMediaStartsAt,
+    BufferingProvider,
+    BufferingContextReact,
+    enableSequenceStackTraces,
+    CurrentScaleContext,
+    PreviewSizeContext,
+    calculateScale,
+};
+
+/**
+ * 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 colorNames = {
+    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,
@@ -4001,415 +4356,82 @@ function normalizeColor(color) {
                 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])) |
-                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])) |
-                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 }) => {
-    const [remotionRootId] = useState(() => String(random(null)));
-    const [frame, setFrame] = useState(() => getInitialFrameState());
-    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, composition, attempt) => {
-                window.remotion_attempt = attempt;
-                const id = delayRender(`Setting the current frame to ${f}`);
-                setFrame((s) => ({
-                    ...s,
-                    [composition]: 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: jsx(BufferingProvider, { children: children }) }) }) }) }) }) }) }) }));
-};
-
-// https://github.com/remotion-dev/remotion/issues/3412#issuecomment-1910120552
-// eslint-disable-next-line no-useless-concat
-function getEnvVar() {
-    const parts = ['proc', 'ess', '.', 'en', 'v', '.', 'NOD', 'E_EN', 'V'];
-    return parts.join('');
-}
-const getEnvVariables = () => {
-    if (getRemotionEnvironment().isRendering) {
-        const param = window.remotion_envVariables;
-        if (!param) {
-            return {};
-        }
-        return { ...JSON.parse(param), NODE_ENV: process.env.NODE_ENV };
-    }
-    // For the Studio, we already set the environment variables in index-html.ts.
-    // We just add NODE_ENV here.
-    if (!process.env.NODE_ENV) {
-        throw new Error(`${getEnvVar()} is not set`);
-    }
-    return {
-        NODE_ENV: process.env.NODE_ENV,
-    };
-};
-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 CurrentScaleContext = React.createContext(null);
-const PreviewSizeContext = createContext({
-    setSize: () => undefined,
-    size: { size: 'auto', translation: { x: 0, y: 0 } },
-});
-const calculateScale = ({ canvasSize, compositionHeight, compositionWidth, previewSize, }) => {
-    const heightRatio = canvasSize.height / compositionHeight;
-    const widthRatio = canvasSize.width / compositionWidth;
-    const ratio = Math.min(heightRatio, widthRatio);
-    return previewSize === 'auto' ? ratio : Number(previewSize);
-};
-/**
- * Gets the current scale of the container in which the component is being rendered.
- * Only works in the Remotion Studio and in the Remotion Player.
- */
-const useCurrentScale = (options) => {
-    const hasContext = React.useContext(CurrentScaleContext);
-    const zoomContext = React.useContext(PreviewSizeContext);
-    const config = useUnsafeVideoConfig();
-    if (hasContext === null || config === null || zoomContext === null) {
-        if (options === null || options === void 0 ? void 0 : options.dontThrowIfOutsideOfRemotion) {
-            return 1;
-        }
-        if (getRemotionEnvironment().isRendering) {
-            return 1;
+    }
+    if (matchers.hsl) {
+        if ((match = matchers.hsl.exec(color))) {
+            return ((hslToRgb(parse360(match[1]), // h
+            parsePercentage(match[2]), // s
+            parsePercentage(match[3])) |
+                0x000000ff) >>> // a
+                0);
         }
-        throw new Error([
-            'useCurrentScale() was called outside of a Remotion context.',
-            'This hook can only be called in a component that is being rendered by Remotion.',
-            'If you want to this hook to return 1 outside of Remotion, pass {dontThrowIfOutsideOfRemotion: true} as an option.',
-            'If you think you called this hook in a Remotion component, make sure all versions of Remotion are aligned.',
-        ].join('\n'));
     }
-    if (hasContext.type === 'scale') {
-        return hasContext.scale;
+    if (matchers.hsla) {
+        if ((match = matchers.hsla.exec(color))) {
+            return ((hslToRgb(parse360(match[1]), // h
+            parsePercentage(match[2]), // s
+            parsePercentage(match[3])) |
+                parse1(match[4])) >>> // a
+                0);
+        }
     }
-    return calculateScale({
-        canvasSize: hasContext.canvasSize,
-        compositionHeight: config.height,
-        compositionWidth: config.width,
-        previewSize: zoomContext.size.size,
+    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);
 };
-
-const WATCH_REMOTION_STATIC_FILES = 'remotion_staticFilesChanged';
 /**
- * @description Watch for changes in a specific static file.
- * @param {string} fileName - The name of the static file to watch for changes.
- * @param {WatcherCallback} callback - A callback function to be called when the file changes.
- * @returns {{cancel: () => void}} A function that can be used to cancel the event listener.
- * @see [Documentation](https://www.remotion.dev/docs/watchstaticfile)
+ * @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 watchStaticFile = (fileName, callback) => {
-    // Check if function is called in Remotion Studio
-    if (!getRemotionEnvironment().isStudio) {
-        // eslint-disable-next-line no-console
-        console.warn('The API is only available while using the Remotion Studio.');
-        return { cancel: () => undefined };
+const interpolateColors = (input, inputRange, outputRange) => {
+    if (typeof input === 'undefined') {
+        throw new TypeError('input can not be undefined');
     }
-    const withoutStaticBase = fileName.startsWith(window.remotion_staticBase)
-        ? fileName.replace(window.remotion_staticBase, '')
-        : fileName;
-    const withoutLeadingSlash = withoutStaticBase.startsWith('/')
-        ? withoutStaticBase.slice(1)
-        : withoutStaticBase;
-    let prevFileData = window.remotion_staticFiles.find((file) => file.name === withoutLeadingSlash);
-    // Check if the specified static file has updated or deleted
-    const checkFile = (event) => {
-        const staticFiles = event.detail.files;
-        // Check for user specified file
-        const newFileData = staticFiles.find((file) => file.name === withoutLeadingSlash);
-        if (!newFileData) {
-            // File is deleted
-            if (prevFileData !== undefined) {
-                callback(null);
-            }
-            prevFileData = undefined;
-            return;
-        }
-        if (prevFileData === undefined ||
-            prevFileData.lastModified !== newFileData.lastModified) {
-            callback(newFileData); // File is added or modified
-            prevFileData = newFileData;
-        }
-    };
-    window.addEventListener(WATCH_REMOTION_STATIC_FILES, checkFile);
-    const cancel = () => {
-        return window.removeEventListener(WATCH_REMOTION_STATIC_FILES, checkFile);
-    };
-    return { cancel };
-};
-
-function useRemotionContexts() {
-    const compositionManagerCtx = React.useContext(CompositionManager);
-    const timelineContext = React.useContext(TimelineContext);
-    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 renderAssetManagerContext = React.useContext(RenderAssetManager);
-    const sequenceManagerContext = React.useContext(SequenceManager);
-    const bufferManagerContext = React.useContext(BufferingContextReact);
-    return useMemo(() => ({
-        compositionManagerCtx,
-        timelineContext,
-        setTimelineContext,
-        sequenceContext,
-        nonceContext,
-        canUseRemotionHooksContext,
-        nativeLayersContext,
-        preloadContext,
-        resolveCompositionContext,
-        renderAssetManagerContext,
-        sequenceManagerContext,
-        bufferManagerContext,
-    }), [
-        compositionManagerCtx,
-        nonceContext,
-        sequenceContext,
-        setTimelineContext,
-        timelineContext,
-        canUseRemotionHooksContext,
-        nativeLayersContext,
-        preloadContext,
-        resolveCompositionContext,
-        renderAssetManagerContext,
-        sequenceManagerContext,
-        bufferManagerContext,
-    ]);
-}
-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(RenderAssetManager.Provider, { value: contexts.renderAssetManagerContext, children: jsx(ResolveCompositionContext.Provider, { value: contexts.resolveCompositionContext, children: jsx(TimelineContext.Provider, { value: contexts.timelineContext, children: jsx(SetTimelineContext.Provider, { value: contexts.setTimelineContext, children: jsx(SequenceContext.Provider, { value: contexts.sequenceContext, children: jsx(BufferingContextReact.Provider, { value: contexts.bufferManagerContext, children: children }) }) }) }) }) }) }) }) }) }) }) }));
-};
-
-// Mark them as Internals so use don't assume this is public
-// API and are less likely to use it
-const Internals = {
-    useUnsafeVideoConfig,
-    Timeline: TimelinePosition,
-    CompositionManager,
-    SequenceManager,
-    SequenceVisibilityToggleContext,
-    RemotionRoot,
-    useVideo,
-    getRoot,
-    useMediaVolumeState,
-    useMediaMutedState,
-    useLazyComponent,
-    truthy,
-    SequenceContext,
-    useRemotionContexts,
-    RemotionContextProvider,
-    CSSUtils,
-    setupEnvVariables,
-    MediaVolumeContext,
-    SetMediaVolumeContext,
-    getRemotionEnvironment,
-    SharedAudioContext,
-    SharedAudioContextProvider,
-    invalidCompositionErrorMessage,
-    isCompositionIdValid,
-    getPreviewDomElement,
-    compositionsRef,
-    portalNode,
-    waitForRoot,
-    CanUseRemotionHooksProvider,
-    CanUseRemotionHooks,
-    PrefetchProvider,
-    DurationsContextProvider,
-    IsPlayerContextProvider,
-    useIsPlayer,
-    EditorPropsProvider,
-    EditorPropsContext,
-    usePreload,
-    NonceContext,
-    resolveVideoConfig,
-    useResolvedVideoConfig,
-    resolveCompositionsRef,
-    ResolveCompositionConfig,
-    REMOTION_STUDIO_CONTAINER_ELEMENT,
-    RenderAssetManager,
-    persistCurrentFrame,
-    useTimelineSetFrame,
-    FILE_TOKEN,
-    DATE_TOKEN,
-    NativeLayersProvider,
-    ClipComposition,
-    isIosSafari,
-    WATCH_REMOTION_STATIC_FILES,
-    addSequenceStackTraces,
-    useMediaStartsAt,
-    BufferingProvider,
-    BufferingContextReact,
-    enableSequenceStackTraces,
-    colorNames,
-    CurrentScaleContext,
-    PreviewSizeContext,
-    calculateScale,
+    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);
 };
 
 const validateFrame = ({ allowFloats, durationInFrames, frame, }) => {
@@ -4449,10 +4471,25 @@ const flattenChildren = (children) => {
     }, []);
 };
 
+const IsInsideSeriesContext = createContext(false);
+const IsInsideSeriesContainer = ({ children }) => {
+    return (jsx(IsInsideSeriesContext.Provider, { value: true, children: children }));
+};
+const IsNotInsideSeriesProvider = ({ children }) => {
+    return (jsx(IsInsideSeriesContext.Provider, { value: false, children: children }));
+};
+const useRequireToBeInsideSeries = () => {
+    const isInsideSeries = React.useContext(IsInsideSeriesContext);
+    if (!isInsideSeries) {
+        throw new Error('This component must be inside a <Series /> component.');
+    }
+};
+
 const SeriesSequenceRefForwardingFunction = ({ children }, _ref) => {
+    useRequireToBeInsideSeries();
     // Discard ref
     // eslint-disable-next-line react/jsx-no-useless-fragment
-    return jsx(Fragment, { children: children });
+    return jsx(IsNotInsideSeriesProvider, { children: children });
 };
 const SeriesSequence = forwardRef(SeriesSequenceRefForwardingFunction);
 /**
@@ -4504,8 +4541,7 @@ const Series = ({ children }) => {
             return (jsx(Sequence, { name: name || '<Series.Sequence>', from: currentStartFrame, durationInFrames: durationInFramesProp, ...passedProps, ref: castedChild.ref, children: child }));
         });
     }, [children]);
-    /* eslint-disable react/jsx-no-useless-fragment */
-    return jsx(Fragment, { children: childrenValue });
+    return jsx(IsInsideSeriesContainer, { children: childrenValue });
 };
 Series.Sequence = SeriesSequence;
 addSequenceStackTraces(SeriesSequence);
@@ -4587,10 +4623,10 @@ function advance({ animation, now, config, }) {
     return animationNode;
 }
 const calculationCache = {};
-function springCalculation({ from = 0, to = 1, frame, fps, config = {}, }) {
+function springCalculation({ frame, fps, config = {}, }) {
+    const from = 0;
+    const to = 1;
     const cacheKey = [
-        from,
-        to,
         frame,
         fps,
         config.damping,
@@ -4674,8 +4710,6 @@ function measureSpring({ fps, config = {}, threshold = 0.005, from = 0, to = 1,
             fps,
             frame,
             config,
-            from,
-            to,
         });
     };
     let animation = calc();
@@ -4764,16 +4798,14 @@ function spring({ frame: passedFrame, fps, config = {}, from = 0, to = 1, durati
         fps,
         frame: durationProcessed,
         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 inner = config.overshootClamping
+        ? to >= from
+            ? Math.min(spr.current, to)
+            : Math.max(spr.current, to)
+        : spr.current;
+    const interpolated = from === 0 && to === 1 ? inner : interpolate(inner, [0, 1], [from, to]);
+    return interpolated;
 }
 
 /**
@@ -4790,10 +4822,10 @@ const Still = (props) => {
     return React.createElement((Composition), newProps);
 };
 
-const OffthreadVideoForRendering = ({ onError, volume: volumeProp, playbackRate, src, muted, allowAmplificationDuringRender, transparent = false, toneMapped = true, toneFrequency, name, ...props }) => {
+const OffthreadVideoForRendering = ({ onError, volume: volumeProp, playbackRate, src, muted, allowAmplificationDuringRender, transparent = false, toneMapped = true, toneFrequency, name, loopVolumeCurveBehavior, ...props }) => {
     const absoluteFrame = useTimelinePosition();
     const frame = useCurrentFrame();
-    const volumePropsFrame = useFrameForVolumeProp();
+    const volumePropsFrame = useFrameForVolumeProp(loopVolumeCurveBehavior !== null && loopVolumeCurveBehavior !== void 0 ? loopVolumeCurveBehavior : 'repeat');
     const videoConfig = useUnsafeVideoConfig();
     const sequenceContext = useContext(SequenceContext);
     const mediaStartsAt = useMediaStartsAt();
@@ -4893,15 +4925,15 @@ const OffthreadVideoForRendering = ({ onError, volume: volumeProp, playbackRate,
 const VideoForDevelopmentRefForwardingFunction = (props, ref) => {
     var _a, _b, _c;
     const videoRef = useRef(null);
-    const volumePropFrame = useFrameForVolumeProp();
+    const { volume, muted, playbackRate, onlyWarnForMediaSeekingError, src, onDuration, 
+    // @ts-expect-error
+    acceptableTimeShift, acceptableTimeShiftInSeconds, toneFrequency, name, _remotionInternalNativeLoopPassed, _remotionInternalStack, style, pauseWhenBuffering, showInTimeline, loopVolumeCurveBehavior, ...nativeProps } = props;
+    const volumePropFrame = useFrameForVolumeProp(loopVolumeCurveBehavior !== null && loopVolumeCurveBehavior !== void 0 ? loopVolumeCurveBehavior : 'repeat');
     const { fps, durationInFrames } = useVideoConfig();
     const parentSequence = useContext(SequenceContext);
     const { hidden } = useContext(SequenceVisibilityToggleContext);
     const [timelineId] = useState(() => String(Math.random()));
     const isSequenceHidden = (_a = hidden[timelineId]) !== null && _a !== void 0 ? _a : false;
-    const { volume, muted, playbackRate, onlyWarnForMediaSeekingError, src, onDuration, 
-    // @ts-expect-error
-    acceptableTimeShift, acceptableTimeShiftInSeconds, toneFrequency, name, _remotionInternalNativeLoopPassed, _remotionInternalStack, style, pauseWhenBuffering, showInTimeline, ...nativeProps } = props;
     if (typeof acceptableTimeShift !== 'undefined') {
         throw new Error('acceptableTimeShift has been removed. Use acceptableTimeShiftInSeconds instead.');
     }
@@ -4941,9 +4973,7 @@ const VideoForDevelopmentRefForwardingFunction = (props, ref) => {
         shouldBuffer: pauseWhenBuffering,
         isPremounting: Boolean(parentSequence === null || parentSequence === void 0 ? void 0 : parentSequence.premounting),
     });
-    const actualFrom = parentSequence
-        ? parentSequence.relativeFrom + parentSequence.cumulatedFrom
-        : 0;
+    const actualFrom = parentSequence ? parentSequence.relativeFrom : 0;
     const duration = parentSequence
         ? Math.min(parentSequence.durationInFrames, durationInFrames)
         : durationInFrames;
@@ -5149,10 +5179,10 @@ const seekToTimeMultipleUntilRight = (element, desiredTime, fps) => {
     };
 };
 
-const VideoForRenderingForwardFunction = ({ onError, volume: volumeProp, allowAmplificationDuringRender, playbackRate, onDuration, toneFrequency, name, acceptableTimeShiftInSeconds, delayRenderRetries, delayRenderTimeoutInMilliseconds, ...props }, ref) => {
+const VideoForRenderingForwardFunction = ({ onError, volume: volumeProp, allowAmplificationDuringRender, playbackRate, onDuration, toneFrequency, name, acceptableTimeShiftInSeconds, delayRenderRetries, delayRenderTimeoutInMilliseconds, loopVolumeCurveBehavior, ...props }, ref) => {
     const absoluteFrame = useTimelinePosition();
     const frame = useCurrentFrame();
-    const volumePropsFrame = useFrameForVolumeProp();
+    const volumePropsFrame = useFrameForVolumeProp(loopVolumeCurveBehavior !== null && loopVolumeCurveBehavior !== void 0 ? loopVolumeCurveBehavior : 'repeat');
     const videoConfig = useUnsafeVideoConfig();
     const videoRef = useRef(null);
     const sequenceContext = useContext(SequenceContext);