remotion 4.0.71 → 4.0.73

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.73';
 
 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)) {
@@ -1907,6 +1878,14 @@ const useMediaPlayback = ({ mediaRef, src, mediaType, playbackRate: localPlaybac
     const { fps } = useVideoConfig();
     const mediaStartsAt = useMediaStartsAt();
     const playbackRate = localPlaybackRate * globalPlaybackRate;
+    // For short audio, a lower acceptable time shift is used
+    const acceptableTimeShiftButLessThanDuration = (() => {
+        var _a;
+        if ((_a = mediaRef.current) === null || _a === void 0 ? void 0 : _a.duration) {
+            return Math.min(mediaRef.current.duration, acceptableTimeshift !== null && acceptableTimeshift !== void 0 ? acceptableTimeshift : DEFAULT_ACCEPTABLE_TIMESHIFT);
+        }
+        return acceptableTimeshift;
+    })();
     useEffect(() => {
         var _a;
         if (!playing) {
@@ -1933,13 +1912,25 @@ const useMediaPlayback = ({ mediaRef, src, mediaType, playbackRate: localPlaybac
             startFrom: -mediaStartsAt,
             mediaType,
         });
+        console.log({
+            desiredUnclampedTime,
+            cur: mediaRef.current.currentTime,
+            paused: mediaRef.current.paused,
+            ended: mediaRef.current.ended,
+            loadedStart: mediaRef.current.seekable.length > 0
+                ? mediaRef.current.seekable.start(0)
+                : null,
+            loadedEnd: mediaRef.current.seekable.length > 0
+                ? mediaRef.current.seekable.end(0)
+                : null,
+        });
         const { duration } = mediaRef.current;
         const shouldBeTime = !Number.isNaN(duration) && Number.isFinite(duration)
             ? Math.min(duration, desiredUnclampedTime)
             : desiredUnclampedTime;
         const isTime = mediaRef.current.currentTime;
         const timeShift = Math.abs(shouldBeTime - isTime);
-        if (timeShift > acceptableTimeshift) {
+        if (timeShift > acceptableTimeShiftButLessThanDuration) {
             // If scrubbing around, adjust timing
             // or if time shift is bigger than 0.45sec
             seek(mediaRef, shouldBeTime);
@@ -1978,6 +1969,7 @@ const useMediaPlayback = ({ mediaRef, src, mediaType, playbackRate: localPlaybac
         localPlaybackRate,
         onlyWarnForMediaSeekingError,
         acceptableTimeshift,
+        acceptableTimeShiftButLessThanDuration,
     ]);
 };
 
@@ -2279,7 +2271,7 @@ const AudioForDevelopmentForwardRefFunction = (props, ref) => {
     const [mediaVolume] = useMediaVolumeState();
     const [mediaMuted] = useMediaMutedState();
     const volumePropFrame = useFrameForVolumeProp();
-    const { volume, muted, playbackRate, shouldPreMountAudioTags, src, onDuration, acceptableTimeShiftInSeconds, _remotionInternalNeedsDurationCalculation, allowAmplificationDuringRender, name, ...nativeProps } = props;
+    const { volume, muted, playbackRate, shouldPreMountAudioTags, src, onDuration, acceptableTimeShiftInSeconds, _remotionInternalNeedsDurationCalculation, _remotionInternalNativeLoopPassed, allowAmplificationDuringRender, name, ...nativeProps } = props;
     if (!src) {
         throw new TypeError("No 'src' was passed to <Audio>.");
     }
@@ -2288,9 +2280,16 @@ const AudioForDevelopmentForwardRefFunction = (props, ref) => {
         return {
             muted: muted || mediaMuted,
             src: preloadedSrc,
+            loop: _remotionInternalNativeLoopPassed,
             ...nativeProps,
         };
-    }, [mediaMuted, muted, nativeProps, preloadedSrc]);
+    }, [
+        _remotionInternalNativeLoopPassed,
+        mediaMuted,
+        muted,
+        nativeProps,
+        preloadedSrc,
+    ]);
     const sequenceContext = useContext(SequenceContext);
     // Generate a string that's as unique as possible for this asset
     // but at the same time deterministic. We use it to combat strict mode issues.
@@ -2492,7 +2491,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, name, ...nativeProps } = props;
+    const { volume: volumeProp, playbackRate, allowAmplificationDuringRender, onDuration, toneFrequency, _remotionInternalNeedsDurationCalculation, _remotionInternalNativeLoopPassed, acceptableTimeShiftInSeconds, name, ...nativeProps } = props;
     const volume = evaluateVolume({
         volume: volumeProp,
         frame: volumePropFrame,
@@ -2584,7 +2583,7 @@ const AudioForRenderingRefForwardingFunction = (props, ref) => {
 const AudioForRendering = forwardRef(AudioForRenderingRefForwardingFunction);
 
 const AudioRefForwardingFunction = (props, ref) => {
-    var _a;
+    var _a, _b;
     const audioContext = useContext(SharedAudioContext);
     const { startFrom, endAt, name, ...otherProps } = props;
     const { loop, ...propsOtherThanLoop } = props;
@@ -2617,7 +2616,7 @@ const AudioRefForwardingFunction = (props, ref) => {
                 mediaDuration: duration,
                 playbackRate: (_a = props.playbackRate) !== null && _a !== void 0 ? _a : 1,
                 startFrom,
-            }), children: jsx(Audio, { ...propsOtherThanLoop, ref: ref }) }));
+            }), children: jsx(Audio, { ...propsOtherThanLoop, ref: ref, _remotionInternalNativeLoopPassed: true }) }));
     }
     if (typeof startFrom !== 'undefined' || typeof endAt !== 'undefined') {
         validateStartFromProps(startFrom, endAt);
@@ -2629,7 +2628,7 @@ const AudioRefForwardingFunction = (props, ref) => {
     if (environment.isRendering) {
         return (jsx(AudioForRendering, { onDuration: onDuration, ...props, ref: ref, onError: onError, _remotionInternalNeedsDurationCalculation: Boolean(loop) }));
     }
-    return (jsx(AudioForDevelopment, { shouldPreMountAudioTags: audioContext !== null && audioContext.numberOfAudioTags > 0, ...props, ref: ref, onError: onError, onDuration: onDuration, _remotionInternalNeedsDurationCalculation: Boolean(loop) }));
+    return (jsx(AudioForDevelopment, { _remotionInternalNativeLoopPassed: (_b = props._remotionInternalNativeLoopPassed) !== null && _b !== void 0 ? _b : false, shouldPreMountAudioTags: audioContext !== null && audioContext.numberOfAudioTags > 0, ...props, ref: ref, onError: onError, onDuration: onDuration, _remotionInternalNeedsDurationCalculation: Boolean(loop) }));
 };
 /**
  * @description With this component, you can add audio to your video. All audio formats which are supported by Chromium are supported by the component.
@@ -3387,133 +3386,395 @@ 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,
+    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,
@@ -3683,223 +3944,101 @@ function normalizeColor(color) {
                 '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);
-                    }
-                });
-            }
-        }
-    }, []);
-    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 +4062,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) => {
@@ -4526,7 +4514,7 @@ const VideoForDevelopmentRefForwardingFunction = (props, ref) => {
     const parentSequence = useContext(SequenceContext);
     const { volume, muted, playbackRate, onlyWarnForMediaSeekingError, src, onDuration, 
     // @ts-expect-error
-    acceptableTimeShift, acceptableTimeShiftInSeconds, toneFrequency, name, ...nativeProps } = props;
+    acceptableTimeShift, acceptableTimeShiftInSeconds, toneFrequency, name, _remotionInternalNativeLoopPassed, ...nativeProps } = props;
     if (typeof acceptableTimeShift !== 'undefined') {
         throw new Error('acceptableTimeShift has been removed. Use acceptableTimeShiftInSeconds instead.');
     }
@@ -4634,7 +4622,7 @@ const VideoForDevelopmentRefForwardingFunction = (props, ref) => {
             current.preload = 'auto';
         }
     }, []);
-    return (jsx("video", { ref: videoRef, muted: muted || mediaMuted, playsInline: true, src: actualSrc, ...nativeProps }));
+    return (jsx("video", { ref: videoRef, muted: muted || mediaMuted, playsInline: true, src: actualSrc, loop: _remotionInternalNativeLoopPassed, ...nativeProps }));
 };
 // Copy types from forwardRef but not necessary to remove ref
 const VideoForDevelopment = forwardRef(VideoForDevelopmentRefForwardingFunction);
@@ -4666,10 +4654,10 @@ const OffthreadVideo = (props) => {
         return jsx(OffthreadVideoForRendering, { ...otherProps });
     }
     const { transparent, ...withoutTransparent } = otherProps;
-    return (jsx(VideoForDevelopment, { onDuration: onDuration, onlyWarnForMediaSeekingError: true, ...withoutTransparent }));
+    return (jsx(VideoForDevelopment, { _remotionInternalNativeLoopPassed: false, onDuration: onDuration, onlyWarnForMediaSeekingError: true, ...withoutTransparent }));
 };
 
-const VideoForRenderingForwardFunction = ({ onError, volume: volumeProp, allowAmplificationDuringRender, playbackRate, onDuration, toneFrequency, name, ...props }, ref) => {
+const VideoForRenderingForwardFunction = ({ onError, volume: volumeProp, allowAmplificationDuringRender, playbackRate, onDuration, toneFrequency, name, acceptableTimeShiftInSeconds, ...props }, ref) => {
     const absoluteFrame = useTimelinePosition();
     const frame = useCurrentFrame();
     const volumePropsFrame = useFrameForVolumeProp();
@@ -4863,7 +4851,7 @@ const VideoForRendering = forwardRef(VideoForRenderingForwardFunction);
 
 const VideoForwardingFunction = (props, ref) => {
     var _a;
-    const { startFrom, endAt, name, ...otherProps } = props;
+    const { startFrom, endAt, name, _remotionInternalNativeLoopPassed, ...otherProps } = props;
     const { loop, ...propsOtherThanLoop } = props;
     const { fps } = useVideoConfig();
     const environment = getRemotionEnvironment();
@@ -4885,7 +4873,7 @@ const VideoForwardingFunction = (props, ref) => {
                 mediaDuration,
                 playbackRate: (_a = props.playbackRate) !== null && _a !== void 0 ? _a : 1,
                 startFrom,
-            }), layout: "none", name: name, children: jsx(Video, { ...propsOtherThanLoop, ref: ref }) }));
+            }), layout: "none", name: name, children: jsx(Video, { ...propsOtherThanLoop, ref: ref, _remotionInternalNativeLoopPassed: true }) }));
     }
     if (typeof startFrom !== 'undefined' || typeof endAt !== 'undefined') {
         validateStartFromProps(startFrom, endAt);
@@ -4897,7 +4885,7 @@ const VideoForwardingFunction = (props, ref) => {
     if (environment.isRendering) {
         return (jsx(VideoForRendering, { onDuration: onDuration, ...otherProps, ref: ref }));
     }
-    return (jsx(VideoForDevelopment, { onlyWarnForMediaSeekingError: false, ...otherProps, ref: ref, onDuration: onDuration }));
+    return (jsx(VideoForDevelopment, { onlyWarnForMediaSeekingError: false, ...otherProps, ref: ref, onDuration: onDuration, _remotionInternalNativeLoopPassed: _remotionInternalNativeLoopPassed !== null && _remotionInternalNativeLoopPassed !== void 0 ? _remotionInternalNativeLoopPassed : false }));
 };
 const forward = forwardRef;
 /**