remotion 4.0.71 → 4.0.72

package/dist/esm/index.mjs

@@ -59,7 +59,7 @@ function truthy(value) {
 }
 
 // Automatically generated on publish
-const VERSION = '4.0.71';
+const VERSION = '4.0.72';
 
 const checkMultipleRemotionVersions = () => {
     if (typeof globalThis === 'undefined') {
@@ -426,35 +426,6 @@ const staticFile = (path) => {
 // Must keep this file in sync with the one in packages/lambda/src/shared/serialize-props.ts!
 const DATE_TOKEN = 'remotion-date:';
 const FILE_TOKEN = 'remotion-file:';
-const serializeJSONWithDate = ({ data, indent, staticBase, }) => {
-    let customDateUsed = false;
-    let customFileUsed = false;
-    let mapUsed = false;
-    let setUsed = false;
-    const serializedString = JSON.stringify(data, function (key, value) {
-        const item = this[key];
-        if (item instanceof Date) {
-            customDateUsed = true;
-            return `${DATE_TOKEN}${item.toISOString()}`;
-        }
-        if (item instanceof Map) {
-            mapUsed = true;
-            return value;
-        }
-        if (item instanceof Set) {
-            setUsed = true;
-            return value;
-        }
-        if (typeof item === 'string' &&
-            staticBase !== null &&
-            item.startsWith(staticBase)) {
-            customFileUsed = true;
-            return `${FILE_TOKEN}${item.replace(staticBase + '/', '')}`;
-        }
-        return value;
-    }, indent);
-    return { serializedString, customDateUsed, customFileUsed, mapUsed, setUsed };
-};
 const deserializeJSONWithCustomFields = (data) => {
     return JSON.parse(data, (_, value) => {
         if (typeof value === 'string' && value.startsWith(DATE_TOKEN)) {
@@ -3387,141 +3358,403 @@ 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;
-    }
-    if (t < 1 / 6) {
-        return p + (q - p) * 6 * t;
+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 / 2) {
-        return q;
+    if (Root) {
+        throw new Error('registerRoot() was called more than once.');
     }
-    if (t < 2 / 3) {
-        return p + (q - p) * (2 / 3 - t) * 6;
+    Root = comp;
+    listeners.forEach((l) => {
+        l(comp);
+    });
+};
+const getRoot = () => {
+    return Root;
+};
+const waitForRoot = (fn) => {
+    if (Root) {
+        fn(Root);
+        return () => undefined;
     }
-    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;
+    listeners.push(fn);
+    return () => {
+        listeners = listeners.filter((l) => l !== fn);
+    };
+};
+
+const RemotionRoot = ({ children, numberOfAudioTags }) => {
+    const [remotionRootId] = useState(() => String(random(null)));
+    const [frame, setFrame] = useState({});
+    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) => {
+                const id = delayRender(`Setting the current frame to ${f}`);
+                setFrame((s) => ({
+                    ...s,
+                    [composition]: f,
+                }));
+                requestAnimationFrame(() => continueRender(id));
+            };
+            window.remotion_isPlayer = false;
+        }, []);
     }
-    if (int > 255) {
-        return 255;
+    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().isRendering) {
+        const param = window.remotion_envVariables;
+        if (!param) {
+            return {};
+        }
+        return { ...JSON.parse(param), NODE_ENV: process.env.NODE_ENV };
     }
-    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 (getRemotionEnvironment().isStudio) {
+        // For the Studio, we already set the environment variables in index-html.ts.
+        // We just add NODE_ENV here.
+        return {
+            NODE_ENV: 'development',
+        };
     }
-    if (num > 1) {
-        return 255;
+    throw new Error('Can only call getEnvVariables() if environment is `rendering` or `preview`');
+};
+const setupEnvVariables = () => {
+    const env = getEnvVariables();
+    if (!window.process) {
+        window.process = {};
     }
-    return Math.round(num * 255);
-}
-function parsePercentage(str) {
-    // parseFloat conveniently ignores the final %
-    const int = Number.parseFloat(str);
-    if (int < 0) {
-        return 0;
+    if (!window.process.env) {
+        window.process.env = {};
     }
-    if (int > 100) {
-        return 1;
+    Object.keys(env).forEach((key) => {
+        window.process.env[key] = env[key];
+    });
+};
+
+const WATCH_REMOTION_STATIC_FILES = 'remotion_staticFilesChanged';
+/**
+ * @description Watch for changes in a specific static file.
+ * @param {string} fileName - The name of the static file to watch for changes.
+ * @param {WatcherCallback} callback - A callback function to be called when the file changes.
+ * @returns {{cancel: () => void}} A function that can be used to cancel the event listener.
+ * @see [Documentation](https://www.remotion.dev/docs/watchstaticfile)
+ */
+const watchStaticFile = (fileName, callback) => {
+    // Check if function is called in Remotion Studio
+    if (!getRemotionEnvironment().isStudio) {
+        console.warn('The API is only available while using the Remotion Studio.');
+        return { cancel: () => undefined };
     }
-    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,
+    let prevFileData = window.remotion_staticFiles.find((file) => file.name === fileName);
+    // Check if the specified static file has updated or deleted
+    const checkFile = (event) => {
+        const staticFiles = event.detail.files;
+        // Check for user specified file
+        const newFileData = staticFiles.find((file) => file.name === fileName);
+        if (!newFileData) {
+            // File is deleted
+            if (prevFileData !== undefined) {
+                callback(null);
+            }
+            prevFileData = undefined;
+            return;
+        }
+        if (prevFileData === undefined ||
+            prevFileData.lastModified !== newFileData.lastModified) {
+            callback(newFileData); // File is added or modified
+            prevFileData = newFileData;
+        }
+    };
+    window.addEventListener(WATCH_REMOTION_STATIC_FILES, checkFile);
+    const cancel = () => {
+        return window.removeEventListener(WATCH_REMOTION_STATIC_FILES, checkFile);
+    };
+    return { cancel };
+};
+
+function useRemotionContexts() {
+    const compositionManagerCtx = React.useContext(CompositionManager);
+    const timelineContext = React.useContext(TimelineContext);
+    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);
+    return useMemo(() => ({
+        compositionManagerCtx,
+        timelineContext,
+        setTimelineContext,
+        sequenceContext,
+        nonceContext,
+        canUseRemotionHooksContext,
+        nativeLayersContext,
+        preloadContext,
+        resolveCompositionContext,
+        renderAssetManagerContext,
+        sequenceManagerContext,
+    }), [
+        compositionManagerCtx,
+        nonceContext,
+        sequenceContext,
+        setTimelineContext,
+        timelineContext,
+        canUseRemotionHooksContext,
+        nativeLayersContext,
+        preloadContext,
+        resolveCompositionContext,
+        renderAssetManagerContext,
+        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(RenderAssetManager.Provider, { value: contexts.renderAssetManagerContext, children: jsx(ResolveCompositionContext.Provider, { value: contexts.resolveCompositionContext, children: jsx(TimelineContext.Provider, { value: contexts.timelineContext, children: jsx(SetTimelineContext.Provider, { value: contexts.setTimelineContext, children: jsx(SequenceContext.Provider, { value: contexts.sequenceContext, children: children }) }) }) }) }) }) }) }) }) }) }));
+};
+
+// 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,
+    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,
+};
+
+/**
+ * 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,
@@ -3681,225 +3914,103 @@ function normalizeColor(color) {
                 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])) |
-                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({});
-    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) => {
-                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);
-                    }
-                });
-            }
+            16) >>> 0);
         }
-    }, []);
-    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().isRendering) {
-        const param = window.remotion_envVariables;
-        if (!param) {
-            return {};
+    }
+    // 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;
         }
-        return { ...JSON.parse(param), NODE_ENV: process.env.NODE_ENV };
     }
-    if (getRemotionEnvironment().isStudio) {
-        // For the Studio, we already set the environment variables in index-html.ts.
-        // We just add NODE_ENV here.
-        return {
-            NODE_ENV: 'development',
-        };
+    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);
+        }
     }
-    throw new Error('Can only call getEnvVariables() if environment is `rendering` or `preview`');
-};
-const setupEnvVariables = () => {
-    const env = getEnvVariables();
-    if (!window.process) {
-        window.process = {};
+    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 (!window.process.env) {
-        window.process.env = {};
+    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);
+        }
     }
-    Object.keys(env).forEach((key) => {
-        window.process.env[key] = env[key];
+    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);
 };
 
 const validateFrame = ({ allowFloats, durationInFrames, frame, }) => {
@@ -3923,157 +4034,6 @@ const validateFrame = ({ allowFloats, durationInFrames, frame, }) => {
     }
 };
 
-const WATCH_REMOTION_STATIC_FILES = 'remotion_staticFilesChanged';
-/**
- * @description Watch for changes in a specific static file.
- * @param {string} fileName - The name of the static file to watch for changes.
- * @param {WatcherCallback} callback - A callback function to be called when the file changes.
- * @returns {{cancel: () => void}} A function that can be used to cancel the event listener.
- * @see [Documentation](https://www.remotion.dev/docs/watchstaticfile)
- */
-const watchStaticFile = (fileName, callback) => {
-    // Check if function is called in Remotion Studio
-    if (!getRemotionEnvironment().isStudio) {
-        console.warn('The API is only available while using the Remotion Studio.');
-        return { cancel: () => undefined };
-    }
-    let prevFileData = window.remotion_staticFiles.find((file) => file.name === fileName);
-    // Check if the specified static file has updated or deleted
-    const checkFile = (event) => {
-        const staticFiles = event.detail.files;
-        // Check for user specified file
-        const newFileData = staticFiles.find((file) => file.name === fileName);
-        if (!newFileData) {
-            // File is deleted
-            if (prevFileData !== undefined) {
-                callback(null);
-            }
-            prevFileData = undefined;
-            return;
-        }
-        if (prevFileData === undefined ||
-            prevFileData.lastModified !== newFileData.lastModified) {
-            callback(newFileData); // File is added or modified
-            prevFileData = newFileData;
-        }
-    };
-    window.addEventListener(WATCH_REMOTION_STATIC_FILES, checkFile);
-    const cancel = () => {
-        return window.removeEventListener(WATCH_REMOTION_STATIC_FILES, checkFile);
-    };
-    return { cancel };
-};
-
-function useRemotionContexts() {
-    const compositionManagerCtx = React.useContext(CompositionManager);
-    const timelineContext = React.useContext(TimelineContext);
-    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);
-    return useMemo(() => ({
-        compositionManagerCtx,
-        timelineContext,
-        setTimelineContext,
-        sequenceContext,
-        nonceContext,
-        canUseRemotionHooksContext,
-        nativeLayersContext,
-        preloadContext,
-        resolveCompositionContext,
-        renderAssetManagerContext,
-        sequenceManagerContext,
-    }), [
-        compositionManagerCtx,
-        nonceContext,
-        sequenceContext,
-        setTimelineContext,
-        timelineContext,
-        canUseRemotionHooksContext,
-        nativeLayersContext,
-        preloadContext,
-        resolveCompositionContext,
-        renderAssetManagerContext,
-        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(RenderAssetManager.Provider, { value: contexts.renderAssetManagerContext, children: jsx(ResolveCompositionContext.Provider, { value: contexts.resolveCompositionContext, children: jsx(TimelineContext.Provider, { value: contexts.timelineContext, children: jsx(SetTimelineContext.Provider, { value: contexts.setTimelineContext, children: jsx(SequenceContext.Provider, { value: contexts.sequenceContext, children: children }) }) }) }) }) }) }) }) }) }) }));
-};
-
-// 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,
-    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,
-    validateFrame,
-    EditorPropsProvider,
-    EditorPropsContext,
-    usePreload,
-    processColor,
-    NonceContext,
-    resolveVideoConfig,
-    useResolvedVideoConfig,
-    resolveCompositionsRef,
-    ResolveCompositionConfig,
-    REMOTION_STUDIO_CONTAINER_ELEMENT,
-    RenderAssetManager,
-    bundleName: 'bundle.js',
-    bundleMapName: 'bundle.js.map',
-    persistCurrentFrame,
-    useTimelineSetFrame,
-    serializeJSONWithDate,
-    deserializeJSONWithCustomFields,
-    FILE_TOKEN,
-    DATE_TOKEN,
-    NativeLayersProvider,
-    ClipComposition,
-    isIosSafari,
-    WATCH_REMOTION_STATIC_FILES,
-};
-
 const flattenChildren = (children) => {
     const childrenArray = React.Children.toArray(children);
     return childrenArray.reduce((flatChildren, child) => {