remotion 4.0.88 → 4.0.90

package/dist/esm/index.mjs

@@ -51,51 +51,27 @@ const Clipper = ({ height, width, x, y }) => {
  * @see [Documentation](https://www.remotion.dev/docs/get-remotion-environment)
  */
 const getRemotionEnvironment = () => {
-    if (process.env.NODE_ENV === 'production') {
-        // Check if inside a Remotion bundle.
-        // Must be a variable in index-html.ts and be defined before setupEnvVariables()
-        if (typeof window !== 'undefined' &&
-            typeof window.remotion_editorName !== 'undefined' &&
-            typeof window.remotion_projectName !== 'undefined') {
-            return {
-                isStudio: false,
-                isRendering: true,
-                isPlayer: false,
-            };
-        }
-        return {
-            isStudio: false,
-            isRendering: false,
-            isPlayer: typeof window !== 'undefined' && window.remotion_isPlayer,
-        };
-    }
-    // The Vitest framework sets NODE_ENV as test.
-    // Right now we don't need to treat it in a special
-    // way which is good - defaulting to `rendering`.
-    if (process.env.NODE_ENV === 'test') {
-        return {
-            isStudio: false,
-            isRendering: true,
-            isPlayer: false,
-        };
-    }
-    if (typeof window !== 'undefined' && window.remotion_isPlayer) {
-        return {
-            isStudio: false,
-            isRendering: false,
-            isPlayer: true,
-        };
-    }
+    const isPlayer = typeof window !== 'undefined' && window.remotion_isPlayer;
+    const isRendering = process.env.NODE_ENV === 'test' ||
+        (process.env.NODE_ENV === 'production' &&
+            typeof window !== 'undefined' &&
+            typeof window.remotion_puppeteerTimeout !== 'undefined');
+    const isStudio = typeof window !== 'undefined' && window.remotion_isStudio;
     return {
-        isStudio: true,
-        isRendering: false,
-        isPlayer: false,
+        isStudio,
+        isRendering,
+        isPlayer,
     };
 };
 
 const originalCreateElement = React.createElement;
 const componentsToAddStacksTo = [];
+// Gets called when a new component is added,
+// also when the Studio is mounted
 const enableSequenceStackTraces = () => {
+    if (!getRemotionEnvironment().isStudio) {
+        return;
+    }
     const proxy = new Proxy(originalCreateElement, {
         apply(target, thisArg, argArray) {
             if (componentsToAddStacksTo.includes(argArray[0])) {
@@ -112,9 +88,6 @@ const enableSequenceStackTraces = () => {
     React.createElement = proxy;
 };
 const addSequenceStackTraces = (component) => {
-    if (!getRemotionEnvironment().isStudio) {
-        return;
-    }
     componentsToAddStacksTo.push(component);
     enableSequenceStackTraces();
 };
@@ -132,7 +105,7 @@ function truthy(value) {
 }
 
 // Automatically generated on publish
-const VERSION = '4.0.88';
+const VERSION = '4.0.90';
 
 const checkMultipleRemotionVersions = () => {
     if (typeof globalThis === 'undefined') {
@@ -3477,353 +3450,87 @@ const getPreviewDomElement = () => {
     return document.getElementById(REMOTION_STUDIO_CONTAINER_ELEMENT);
 };
 
-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)
+ * Copied from:
+ * https://github.com/software-mansion/react-native-reanimated/blob/master/src/reanimated2/Colors.ts
  */
-const registerRoot = (comp) => {
-    if (!comp) {
-        throw new Error(`You must pass a React component to registerRoot(), but ${JSON.stringify(comp)} was passed.`);
+// 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})$/;
     }
-    if (Root) {
-        throw new Error('registerRoot() was called more than once.');
+    return cachedMatchers;
+}
+function hue2rgb(p, q, t) {
+    if (t < 0) {
+        t += 1;
     }
-    Root = comp;
-    listeners.forEach((l) => {
-        l(comp);
-    });
-};
-const getRoot = () => {
-    return Root;
-};
-const waitForRoot = (fn) => {
-    if (Root) {
-        fn(Root);
-        return () => undefined;
+    if (t > 1) {
+        t -= 1;
     }
-    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) => {
-                const id = delayRender(`Setting the current frame to ${f}`);
-                setFrame((s) => ({
-                    ...s,
-                    [composition]: f,
-                }));
-                requestAnimationFrame(() => continueRender(id));
-            };
-            window.remotion_isPlayer = false;
-        }, []);
+    if (t < 1 / 6) {
+        return p + (q - p) * 6 * t;
     }
-    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 };
+    if (t < 1 / 2) {
+        return q;
     }
-    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 (t < 2 / 3) {
+        return p + (q - p) * (2 / 3 - t) * 6;
     }
-    throw new Error('Can only call getEnvVariables() if environment is `rendering` or `preview`');
-};
-const setupEnvVariables = () => {
-    const env = getEnvVariables();
-    if (!window.process) {
-        window.process = {};
+    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 (!window.process.env) {
-        window.process.env = {};
+    if (int > 255) {
+        return 255;
     }
-    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) {
-        // eslint-disable-next-line no-console
-        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,
-    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,
-};
-
-/**
- * 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;
+    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;
@@ -3841,7 +3548,7 @@ function parsePercentage(str) {
     }
     return int / 100;
 }
-const names = {
+const colorNames = {
     transparent: 0x00000000,
     // http://www.w3.org/TR/css3-color/#svg-color
     aliceblue: 0xf0f8ffff,
@@ -4003,8 +3710,8 @@ function normalizeColor(color) {
             return Number.parseInt(match[1] + 'ff', 16) >>> 0;
         }
     }
-    if (names[color] !== undefined) {
-        return names[color];
+    if (colorNames[color] !== undefined) {
+        return colorNames[color];
     }
     if (matchers.rgb) {
         if ((match = matchers.rgb.exec(color))) {
@@ -4136,6 +3843,274 @@ const interpolateColors = (input, inputRange, outputRange) => {
     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) => {
+                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: children }) }) }) }) }) }) }) }));
+};
+
+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('process.env.NODE_ENV 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 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 };
+    }
+    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,
+    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,
+    enableSequenceStackTraces,
+    colorNames,
+};
+
 const validateFrame = ({ allowFloats, durationInFrames, frame, }) => {
     if (typeof frame === 'undefined') {
         throw new TypeError(`Argument missing for parameter "frame"`);
@@ -4812,7 +4787,7 @@ const seekToTimeMultipleUntilRight = (element, desiredTime, fps) => {
         const firstSeek = seekToTime(element, desiredTime + threshold);
         firstSeek.wait.then((seekedTo) => {
             const difference = Math.abs(desiredTime - seekedTo);
-            if (difference < threshold) {
+            if (difference <= threshold) {
                 return resolve();
             }
             const sign = desiredTime > seekedTo ? 1 : -1;
@@ -4821,12 +4796,12 @@ const seekToTimeMultipleUntilRight = (element, desiredTime, fps) => {
             newSeek.wait
                 .then((newTime) => {
                 const newDifference = Math.abs(desiredTime - newTime);
-                if (newDifference < threshold) {
+                if (newDifference <= threshold) {
                     return resolve();
                 }
                 const thirdSeek = seekToTime(element, desiredTime);
                 currentCancel = thirdSeek.cancel;
-                thirdSeek.wait.then(() => {
+                return thirdSeek.wait.then(() => {
                     resolve();
                 });
             })
@@ -5059,12 +5034,11 @@ const VideoForwardingFunction = (props, ref) => {
     }
     return (jsx(VideoForDevelopment, { onlyWarnForMediaSeekingError: false, ...otherProps, ref: ref, onDuration: onDuration, _remotionInternalStack: stack !== null && stack !== void 0 ? stack : null, _remotionInternalNativeLoopPassed: _remotionInternalNativeLoopPassed !== null && _remotionInternalNativeLoopPassed !== void 0 ? _remotionInternalNativeLoopPassed : false }));
 };
-const forward = forwardRef;
 /**
  * @description allows you to include a video file in your Remotion project. It wraps the native HTMLVideoElement.
  * @see [Documentation](https://www.remotion.dev/docs/video)
  */
-const Video = forward(VideoForwardingFunction);
+const Video = forwardRef(VideoForwardingFunction);
 addSequenceStackTraces(Video);
 
 checkMultipleRemotionVersions();