remotion 4.0.70 → 4.0.72

package/dist/esm/index.mjs

@@ -59,7 +59,7 @@ function truthy(value) {
 }
 
 // Automatically generated on publish
-const VERSION = '4.0.70';
+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)) {
@@ -1552,7 +1523,7 @@ const warnOnce = (message) => {
     console.warn(message);
     didWarn[message] = true;
 };
-const useMediaInTimeline = ({ volume, mediaVolume, mediaRef, src, mediaType, playbackRate, }) => {
+const useMediaInTimeline = ({ volume, mediaVolume, mediaRef, src, mediaType, playbackRate, displayName, }) => {
     const videoConfig = useVideoConfig();
     const { rootId, audioAndVideoTags } = useContext(TimelineContext);
     const parentSequence = useContext(SequenceContext);
@@ -1608,7 +1579,7 @@ const useMediaInTimeline = ({ volume, mediaVolume, mediaRef, src, mediaType, pla
             duration,
             from: 0,
             parent: (_a = parentSequence === null || parentSequence === void 0 ? void 0 : parentSequence.id) !== null && _a !== void 0 ? _a : null,
-            displayName: getAssetDisplayName(src),
+            displayName: displayName !== null && displayName !== void 0 ? displayName : getAssetDisplayName(src),
             rootId,
             volume: volumes,
             showInTimeline: true,
@@ -1638,6 +1609,7 @@ const useMediaInTimeline = ({ volume, mediaVolume, mediaRef, src, mediaType, pla
         mediaType,
         startsAt,
         playbackRate,
+        displayName,
     ]);
     useEffect(() => {
         const tag = {
@@ -1801,19 +1773,19 @@ const getMediaTime = ({ fps, frame, src, playbackRate, startFrom, mediaType, })
 const toSeconds = (time, fps) => {
     return Math.round((time / fps) * 100) / 100;
 };
+const isIosSafari = () => {
+    return typeof window === 'undefined'
+        ? false
+        : /iP(ad|od|hone)/i.test(window.navigator.userAgent) &&
+            Boolean(navigator.userAgent.match(/Version\/[\d.]+.*Safari/));
+};
 // https://github.com/remotion-dev/remotion/issues/1655
-const isIOSSafariCase = (actualSrc) => {
-    if (typeof window === 'undefined') {
-        return false;
-    }
-    const isIpadIPodIPhone = /iP(ad|od|hone)/i.test(window.navigator.userAgent);
-    const isSafari = Boolean(navigator.userAgent.match(/Version\/[\d.]+.*Safari/));
-    const isChrome = Boolean(navigator.userAgent.match(/CriOS\//));
-    return (isIpadIPodIPhone && (isSafari || isChrome) && actualSrc.startsWith('blob:'));
+const isIOSSafariAndBlob = (actualSrc) => {
+    return isIosSafari() && actualSrc.startsWith('blob:');
 };
 const appendVideoFragment = ({ actualSrc, actualFrom, duration, fps, }) => {
     var _a;
-    if (isIOSSafariCase(actualSrc)) {
+    if (isIOSSafariAndBlob(actualSrc)) {
         return actualSrc;
     }
     if (actualSrc.startsWith('data:')) {
@@ -1854,12 +1826,6 @@ const useAppendVideoFragment = ({ actualSrc: initialActualSrc, actualFrom: initi
     });
     return appended;
 };
-const isIosSafari = () => {
-    return typeof window === 'undefined'
-        ? false
-        : /iP(ad|od|hone)/i.test(window.navigator.userAgent) &&
-            Boolean(navigator.userAgent.match(/Version\/[\d.]+.*Safari/));
-};
 
 const alreadyWarned = {};
 const warnAboutNonSeekableMedia = (ref, type) => {
@@ -2284,7 +2250,7 @@ const AudioForDevelopmentForwardRefFunction = (props, ref) => {
     const [mediaVolume] = useMediaVolumeState();
     const [mediaMuted] = useMediaMutedState();
     const volumePropFrame = useFrameForVolumeProp();
-    const { volume, muted, playbackRate, shouldPreMountAudioTags, src, onDuration, acceptableTimeShiftInSeconds, _remotionInternalNeedsDurationCalculation, allowAmplificationDuringRender, ...nativeProps } = props;
+    const { volume, muted, playbackRate, shouldPreMountAudioTags, src, onDuration, acceptableTimeShiftInSeconds, _remotionInternalNeedsDurationCalculation, allowAmplificationDuringRender, name, ...nativeProps } = props;
     if (!src) {
         throw new TypeError("No 'src' was passed to <Audio>.");
     }
@@ -2323,6 +2289,7 @@ const AudioForDevelopmentForwardRefFunction = (props, ref) => {
         src,
         mediaType: 'audio',
         playbackRate: playbackRate !== null && playbackRate !== void 0 ? playbackRate : 1,
+        displayName: name !== null && name !== void 0 ? name : null,
     });
     useMediaPlayback({
         mediaRef: audioRef,
@@ -2496,7 +2463,7 @@ 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, acceptableTimeShiftInSeconds, ...nativeProps } = props;
+    const { volume: volumeProp, playbackRate, allowAmplificationDuringRender, onDuration, toneFrequency, _remotionInternalNeedsDurationCalculation, acceptableTimeShiftInSeconds, name, ...nativeProps } = props;
     const volume = evaluateVolume({
         volume: volumeProp,
         frame: volumePropFrame,
@@ -2590,7 +2557,7 @@ const AudioForRendering = forwardRef(AudioForRenderingRefForwardingFunction);
 const AudioRefForwardingFunction = (props, ref) => {
     var _a;
     const audioContext = useContext(SharedAudioContext);
-    const { startFrom, endAt, ...otherProps } = props;
+    const { startFrom, endAt, name, ...otherProps } = props;
     const { loop, ...propsOtherThanLoop } = props;
     const { fps } = useVideoConfig();
     const environment = getRemotionEnvironment();
@@ -2627,7 +2594,7 @@ const AudioRefForwardingFunction = (props, ref) => {
         validateStartFromProps(startFrom, endAt);
         const startFromFrameNo = startFrom !== null && startFrom !== void 0 ? startFrom : 0;
         const endAtFrameNo = endAt !== null && endAt !== void 0 ? endAt : Infinity;
-        return (jsx(Sequence, { layout: "none", from: 0 - startFromFrameNo, showInTimeline: false, durationInFrames: endAtFrameNo, children: jsx(Audio, { _remotionInternalNeedsDurationCalculation: Boolean(loop), ...otherProps, ref: ref }) }));
+        return (jsx(Sequence, { layout: "none", from: 0 - startFromFrameNo, showInTimeline: false, durationInFrames: endAtFrameNo, name: name, children: jsx(Audio, { _remotionInternalNeedsDurationCalculation: Boolean(loop), ...otherProps, ref: ref }) }));
     }
     validateMediaProps(props, 'Audio');
     if (environment.isRendering) {
@@ -2641,7 +2608,7 @@ const AudioRefForwardingFunction = (props, ref) => {
  */
 const Audio = forwardRef(AudioRefForwardingFunction);
 
-const getRegex$1 = () => /^([a-zA-Z0-9-])+$/g;
+const getRegex$1 = () => /^([a-zA-Z0-9-\u4E00-\u9FFF])+$/g;
 const isFolderNameValid = (name) => name.match(getRegex$1());
 const validateFolderName = (name) => {
     if (name === undefined || name === null) {
@@ -2756,7 +2723,7 @@ const useLazyComponent = (compProps) => {
     return lazy;
 };
 
-const getRegex = () => /^([a-zA-Z0-9-])+$/g;
+const getRegex = () => /^([a-zA-Z0-9-\u4E00-\u9FFF])+$/g;
 const isCompositionIdValid = (id) => id.match(getRegex());
 const validateCompositionId = (id) => {
     if (!isCompositionIdValid(id)) {
@@ -3391,126 +3358,388 @@ 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,
+    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,
@@ -3694,216 +3923,94 @@ function normalizeColor(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);
-                    }
-                });
-            }
+    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);
         }
-    }, []);
-    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 {};
+    }
+    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);
         }
-        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.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('Can only call getEnvVariables() if environment is `rendering` or `preview`');
+    throw new Error(`invalid color string ${color} provided`);
+}
+const opacity = (c) => {
+    return ((c >> 24) & 255) / 255;
 };
-const setupEnvVariables = () => {
-    const env = getEnvVariables();
-    if (!window.process) {
-        window.process = {};
+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 (!window.process.env) {
-        window.process.env = {};
+    if (typeof inputRange === 'undefined') {
+        throw new TypeError('inputRange can not be undefined');
     }
-    Object.keys(env).forEach((key) => {
-        window.process.env[key] = env[key];
-    });
+    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, }) => {
@@ -3927,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) => {
@@ -4430,7 +4386,7 @@ const Still = (props) => {
     return React.createElement((Composition), newProps);
 };
 
-const OffthreadVideoForRendering = ({ onError, volume: volumeProp, playbackRate, src, muted, allowAmplificationDuringRender, transparent = false, toneFrequency, ...props }) => {
+const OffthreadVideoForRendering = ({ onError, volume: volumeProp, playbackRate, src, muted, allowAmplificationDuringRender, transparent = false, toneFrequency, name, ...props }) => {
     const absoluteFrame = useTimelinePosition();
     const frame = useCurrentFrame();
     const volumePropsFrame = useFrameForVolumeProp();
@@ -4530,7 +4486,7 @@ const VideoForDevelopmentRefForwardingFunction = (props, ref) => {
     const parentSequence = useContext(SequenceContext);
     const { volume, muted, playbackRate, onlyWarnForMediaSeekingError, src, onDuration, 
     // @ts-expect-error
-    acceptableTimeShift, acceptableTimeShiftInSeconds, toneFrequency, ...nativeProps } = props;
+    acceptableTimeShift, acceptableTimeShiftInSeconds, toneFrequency, name, ...nativeProps } = props;
     if (typeof acceptableTimeShift !== 'undefined') {
         throw new Error('acceptableTimeShift has been removed. Use acceptableTimeShiftInSeconds instead.');
     }
@@ -4544,6 +4500,7 @@ const VideoForDevelopmentRefForwardingFunction = (props, ref) => {
         mediaType: 'video',
         src,
         playbackRate: (_a = props.playbackRate) !== null && _a !== void 0 ? _a : 1,
+        displayName: name !== null && name !== void 0 ? name : null,
     });
     useSyncVolumeWithMediaTag({
         volumePropFrame,
@@ -4620,11 +4577,24 @@ const VideoForDevelopmentRefForwardingFunction = (props, ref) => {
             current.removeEventListener('loadedmetadata', onLoadedMetadata);
         };
     }, [src]);
-    return (jsx("video", { ref: videoRef, 
+    useEffect(() => {
+        const { current } = videoRef;
+        if (!current) {
+            return;
+        }
         // Without this, on iOS Safari, the video cannot be seeked.
         // if a seek is triggered before `loadedmetadata` is fired,
         // the video will not seek, even if `loadedmetadata` is fired afterwards.
-        preload: isIosSafari() ? 'metadata' : 'auto', muted: muted || mediaMuted, playsInline: true, src: actualSrc, ...nativeProps }));
+        // Also, this needs to happen in a useEffect, because otherwise
+        // the SSR props will be applied.
+        if (isIosSafari()) {
+            current.preload = 'metadata';
+        }
+        else {
+            current.preload = 'auto';
+        }
+    }, []);
+    return (jsx("video", { ref: videoRef, muted: muted || mediaMuted, playsInline: true, src: actualSrc, ...nativeProps }));
 };
 // Copy types from forwardRef but not necessary to remove ref
 const VideoForDevelopment = forwardRef(VideoForDevelopmentRefForwardingFunction);
@@ -4636,7 +4606,7 @@ const VideoForDevelopment = forwardRef(VideoForDevelopmentRefForwardingFunction)
 const OffthreadVideo = (props) => {
     // Should only destruct `startFrom` and `endAt` from props,
     // rest gets drilled down
-    const { startFrom, endAt, ...otherProps } = props;
+    const { startFrom, endAt, name, ...otherProps } = props;
     const environment = getRemotionEnvironment();
     const onDuration = useCallback(() => undefined, []);
     if (typeof props.src !== 'string') {
@@ -4649,7 +4619,7 @@ const OffthreadVideo = (props) => {
         validateStartFromProps(startFrom, endAt);
         const startFromFrameNo = startFrom !== null && startFrom !== void 0 ? startFrom : 0;
         const endAtFrameNo = endAt !== null && endAt !== void 0 ? endAt : Infinity;
-        return (jsx(Sequence, { layout: "none", from: 0 - startFromFrameNo, showInTimeline: false, durationInFrames: endAtFrameNo, children: jsx(OffthreadVideo, { ...otherProps }) }));
+        return (jsx(Sequence, { layout: "none", from: 0 - startFromFrameNo, showInTimeline: false, durationInFrames: endAtFrameNo, name: name, children: jsx(OffthreadVideo, { ...otherProps }) }));
     }
     validateMediaProps(props, 'Video');
     if (environment.isRendering) {
@@ -4659,7 +4629,7 @@ const OffthreadVideo = (props) => {
     return (jsx(VideoForDevelopment, { onDuration: onDuration, onlyWarnForMediaSeekingError: true, ...withoutTransparent }));
 };
 
-const VideoForRenderingForwardFunction = ({ onError, volume: volumeProp, allowAmplificationDuringRender, playbackRate, onDuration, toneFrequency, ...props }, ref) => {
+const VideoForRenderingForwardFunction = ({ onError, volume: volumeProp, allowAmplificationDuringRender, playbackRate, onDuration, toneFrequency, name, ...props }, ref) => {
     const absoluteFrame = useTimelinePosition();
     const frame = useCurrentFrame();
     const volumePropsFrame = useFrameForVolumeProp();
@@ -4853,7 +4823,7 @@ const VideoForRendering = forwardRef(VideoForRenderingForwardFunction);
 
 const VideoForwardingFunction = (props, ref) => {
     var _a;
-    const { startFrom, endAt, ...otherProps } = props;
+    const { startFrom, endAt, name, ...otherProps } = props;
     const { loop, ...propsOtherThanLoop } = props;
     const { fps } = useVideoConfig();
     const environment = getRemotionEnvironment();
@@ -4875,13 +4845,13 @@ const VideoForwardingFunction = (props, ref) => {
                 mediaDuration,
                 playbackRate: (_a = props.playbackRate) !== null && _a !== void 0 ? _a : 1,
                 startFrom,
-            }), layout: "none", children: jsx(Video, { ...propsOtherThanLoop, ref: ref }) }));
+            }), layout: "none", name: name, children: jsx(Video, { ...propsOtherThanLoop, ref: ref }) }));
     }
     if (typeof startFrom !== 'undefined' || typeof endAt !== 'undefined') {
         validateStartFromProps(startFrom, endAt);
         const startFromFrameNo = startFrom !== null && startFrom !== void 0 ? startFrom : 0;
         const endAtFrameNo = endAt !== null && endAt !== void 0 ? endAt : Infinity;
-        return (jsx(Sequence, { layout: "none", from: 0 - startFromFrameNo, showInTimeline: false, durationInFrames: endAtFrameNo, children: jsx(Video, { ...otherProps, ref: ref }) }));
+        return (jsx(Sequence, { layout: "none", from: 0 - startFromFrameNo, showInTimeline: false, durationInFrames: endAtFrameNo, name: name, children: jsx(Video, { ...otherProps, ref: ref }) }));
     }
     validateMediaProps(props, 'Video');
     if (environment.isRendering) {