remotion 4.0.354 → 4.0.356

package/dist/esm/index.mjs

@@ -105,7 +105,7 @@ function truthy(value) {
 }
 
 // src/version.ts
-var VERSION = "4.0.354";
+var VERSION = "4.0.356";
 
 // src/multiple-versions-warning.ts
 var checkMultipleRemotionVersions = () => {
@@ -1413,7 +1413,9 @@ var RegularSequenceRefForwardingFunction = ({
       height: height ?? parentSequence?.height ?? null,
       width: width ?? parentSequence?.width ?? null,
       premounting,
-      postmounting
+      postmounting,
+      premountDisplay: premountDisplay ?? null,
+      postmountDisplay: postmountDisplay ?? null
     };
   }, [
     cumulatedFrom,
@@ -1424,7 +1426,9 @@ var RegularSequenceRefForwardingFunction = ({
     height,
     width,
     premounting,
-    postmounting
+    postmounting,
+    premountDisplay,
+    postmountDisplay
   ]);
   const timelineClipName = useMemo9(() => {
     return name ?? "";
@@ -4600,8 +4604,8 @@ var AudioForDevelopmentForwardRefFunction = (props, ref) => {
     id: timelineId,
     stack: _remotionInternalStack,
     showInTimeline,
-    premountDisplay: null,
-    postmountDisplay: null,
+    premountDisplay: sequenceContext?.premountDisplay ?? null,
+    postmountDisplay: sequenceContext?.postmountDisplay ?? null,
     onAutoPlayError: null,
     isPremounting: Boolean(sequenceContext?.premounting),
     isPostmounting: Boolean(sequenceContext?.postmounting)
@@ -4732,7 +4736,7 @@ var AudioForRenderingRefForwardingFunction = (props, ref) => {
       volume,
       mediaFrame: frame,
       playbackRate: props.playbackRate ?? 1,
-      toneFrequency: toneFrequency ?? null,
+      toneFrequency: toneFrequency ?? 1,
       audioStartFrame: Math.max(0, -(sequenceContext?.relativeFrom ?? 0)),
       audioStreamIndex: audioStreamIndex ?? 0
     });
@@ -4864,10 +4868,10 @@ var AudioRefForwardingFunction = (props, ref) => {
     return /* @__PURE__ */ jsx19(Loop, {
       layout: "none",
       durationInFrames: calculateLoopDuration({
-        endAt: trimAfterValue ?? endAt,
+        endAt: trimAfterValue,
         mediaDuration: duration,
         playbackRate: props.playbackRate ?? 1,
-        startFrom: trimBeforeValue ?? startFrom
+        startFrom: trimBeforeValue
       }),
       children: /* @__PURE__ */ jsx19(Audio, {
         ...propsOtherThanLoop,
@@ -4891,7 +4895,7 @@ var AudioRefForwardingFunction = (props, ref) => {
       })
     });
   }
-  validateMediaProps(props, "Audio");
+  validateMediaProps({ playbackRate: props.playbackRate, volume: props.volume }, "Audio");
   if (environment.isRendering) {
     return /* @__PURE__ */ jsx19(AudioForRendering, {
       onDuration,
@@ -6069,24 +6073,251 @@ var useCurrentScale = (options) => {
   });
 };
 
+// src/video/OffthreadVideo.tsx
+import { useCallback as useCallback16 } from "react";
+
+// src/video/OffthreadVideoForRendering.tsx
+import {
+  useCallback as useCallback15,
+  useContext as useContext29,
+  useEffect as useEffect18,
+  useLayoutEffect as useLayoutEffect9,
+  useMemo as useMemo26,
+  useState as useState18
+} from "react";
+
+// src/video/offthread-video-source.ts
+var getOffthreadVideoSource = ({
+  src,
+  transparent,
+  currentTime,
+  toneMapped
+}) => {
+  return `http://localhost:${window.remotion_proxyPort}/proxy?src=${encodeURIComponent(getAbsoluteSrc(src))}&time=${encodeURIComponent(Math.max(0, currentTime))}&transparent=${String(transparent)}&toneMapped=${String(toneMapped)}`;
+};
+
+// src/video/OffthreadVideoForRendering.tsx
+import { jsx as jsx27 } from "react/jsx-runtime";
+var OffthreadVideoForRendering = ({
+  onError,
+  volume: volumeProp,
+  playbackRate,
+  src,
+  muted,
+  allowAmplificationDuringRender,
+  transparent,
+  toneMapped,
+  toneFrequency,
+  name,
+  loopVolumeCurveBehavior,
+  delayRenderRetries,
+  delayRenderTimeoutInMilliseconds,
+  onVideoFrame,
+  crossOrigin,
+  audioStreamIndex,
+  ...props2
+}) => {
+  const absoluteFrame = useTimelinePosition();
+  const frame = useCurrentFrame();
+  const volumePropsFrame = useFrameForVolumeProp(loopVolumeCurveBehavior);
+  const videoConfig = useUnsafeVideoConfig();
+  const sequenceContext = useContext29(SequenceContext);
+  const mediaStartsAt = useMediaStartsAt();
+  const { registerRenderAsset, unregisterRenderAsset } = useContext29(RenderAssetManager);
+  if (!src) {
+    throw new TypeError("No `src` was passed to <OffthreadVideo>.");
+  }
+  const id = useMemo26(() => `offthreadvideo-${random(src)}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.relativeFrom}-${sequenceContext?.durationInFrames}`, [
+    src,
+    sequenceContext?.cumulatedFrom,
+    sequenceContext?.relativeFrom,
+    sequenceContext?.durationInFrames
+  ]);
+  if (!videoConfig) {
+    throw new Error("No video config found");
+  }
+  const volume = evaluateVolume({
+    volume: volumeProp,
+    frame: volumePropsFrame,
+    mediaVolume: 1
+  });
+  warnAboutTooHighVolume(volume);
+  useEffect18(() => {
+    if (!src) {
+      throw new Error("No src passed");
+    }
+    if (!window.remotion_audioEnabled) {
+      return;
+    }
+    if (muted) {
+      return;
+    }
+    if (volume <= 0) {
+      return;
+    }
+    registerRenderAsset({
+      type: "video",
+      src: getAbsoluteSrc(src),
+      id,
+      frame: absoluteFrame,
+      volume,
+      mediaFrame: frame,
+      playbackRate,
+      toneFrequency,
+      audioStartFrame: Math.max(0, -(sequenceContext?.relativeFrom ?? 0)),
+      audioStreamIndex
+    });
+    return () => unregisterRenderAsset(id);
+  }, [
+    muted,
+    src,
+    registerRenderAsset,
+    id,
+    unregisterRenderAsset,
+    volume,
+    frame,
+    absoluteFrame,
+    playbackRate,
+    toneFrequency,
+    sequenceContext?.relativeFrom,
+    audioStreamIndex
+  ]);
+  const currentTime = useMemo26(() => {
+    return getExpectedMediaFrameUncorrected({
+      frame,
+      playbackRate: playbackRate || 1,
+      startFrom: -mediaStartsAt
+    }) / videoConfig.fps;
+  }, [frame, mediaStartsAt, playbackRate, videoConfig.fps]);
+  const actualSrc = useMemo26(() => {
+    return getOffthreadVideoSource({
+      src,
+      currentTime,
+      transparent,
+      toneMapped
+    });
+  }, [toneMapped, currentTime, src, transparent]);
+  const [imageSrc, setImageSrc] = useState18(null);
+  const { delayRender: delayRender2, continueRender: continueRender2 } = useDelayRender();
+  useLayoutEffect9(() => {
+    if (!window.remotion_videoEnabled) {
+      return;
+    }
+    const cleanup = [];
+    setImageSrc(null);
+    const controller = new AbortController;
+    const newHandle = delayRender2(`Fetching ${actualSrc} from server`, {
+      retries: delayRenderRetries ?? undefined,
+      timeoutInMilliseconds: delayRenderTimeoutInMilliseconds ?? undefined
+    });
+    const execute = async () => {
+      try {
+        const res = await fetch(actualSrc, {
+          signal: controller.signal,
+          cache: "no-store"
+        });
+        if (res.status !== 200) {
+          if (res.status === 500) {
+            const json = await res.json();
+            if (json.error) {
+              const cleanedUpErrorMessage = json.error.replace(/^Error: /, "");
+              throw new Error(cleanedUpErrorMessage);
+            }
+          }
+          throw new Error(`Server returned status ${res.status} while fetching ${actualSrc}`);
+        }
+        const blob = await res.blob();
+        const url = URL.createObjectURL(blob);
+        cleanup.push(() => URL.revokeObjectURL(url));
+        setImageSrc({
+          src: url,
+          handle: newHandle
+        });
+      } catch (err) {
+        if (err.message.includes("aborted")) {
+          continueRender2(newHandle);
+          return;
+        }
+        if (controller.signal.aborted) {
+          continueRender2(newHandle);
+          return;
+        }
+        if (err.message.includes("Failed to fetch")) {
+          err = new Error(`Failed to fetch ${actualSrc}. This could be caused by Chrome rejecting the request because the disk space is low. Consider increasing the disk size of your environment.`, { cause: err });
+        }
+        if (onError) {
+          onError(err);
+        } else {
+          cancelRender(err);
+        }
+      }
+    };
+    execute();
+    cleanup.push(() => {
+      if (controller.signal.aborted) {
+        return;
+      }
+      controller.abort();
+    });
+    return () => {
+      cleanup.forEach((c2) => c2());
+    };
+  }, [
+    actualSrc,
+    delayRenderRetries,
+    delayRenderTimeoutInMilliseconds,
+    onError,
+    continueRender2,
+    delayRender2
+  ]);
+  const onErr = useCallback15(() => {
+    if (onError) {
+      onError?.(new Error("Failed to load image with src " + imageSrc));
+    } else {
+      cancelRender("Failed to load image with src " + imageSrc);
+    }
+  }, [imageSrc, onError]);
+  const className = useMemo26(() => {
+    return [OBJECTFIT_CONTAIN_CLASS_NAME, props2.className].filter(truthy).join(" ");
+  }, [props2.className]);
+  const onImageFrame = useCallback15((img) => {
+    if (onVideoFrame) {
+      onVideoFrame(img);
+    }
+  }, [onVideoFrame]);
+  if (!imageSrc || !window.remotion_videoEnabled) {
+    return null;
+  }
+  continueRender2(imageSrc.handle);
+  return /* @__PURE__ */ jsx27(Img, {
+    src: imageSrc.src,
+    delayRenderRetries,
+    delayRenderTimeoutInMilliseconds,
+    onImageFrame,
+    ...props2,
+    onError: onErr,
+    className
+  });
+};
+
 // src/video/VideoForPreview.tsx
 import {
   forwardRef as forwardRef9,
-  useContext as useContext29,
-  useEffect as useEffect19,
+  useContext as useContext30,
+  useEffect as useEffect20,
   useImperativeHandle as useImperativeHandle9,
-  useMemo as useMemo26,
+  useMemo as useMemo27,
   useRef as useRef16,
-  useState as useState18
+  useState as useState19
 } from "react";
 
 // src/video/emit-video-frame.ts
-import { useEffect as useEffect18 } from "react";
+import { useEffect as useEffect19 } from "react";
 var useEmitVideoFrame = ({
   ref,
   onVideoFrame
 }) => {
-  useEffect18(() => {
+  useEffect19(() => {
     const { current } = ref;
     if (!current) {
       return;
@@ -6110,14 +6341,14 @@ var useEmitVideoFrame = ({
 };
 
 // src/video/VideoForPreview.tsx
-import { jsx as jsx27 } from "react/jsx-runtime";
+import { jsx as jsx28 } from "react/jsx-runtime";
 var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
-  const context = useContext29(SharedAudioContext);
+  const context = useContext30(SharedAudioContext);
   if (!context) {
     throw new Error("SharedAudioContext not found");
   }
   const videoRef = useRef16(null);
-  const sharedSource = useMemo26(() => {
+  const sharedSource = useMemo27(() => {
     if (!context.audioContext) {
       return null;
     }
@@ -6160,11 +6391,11 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
   }
   const volumePropFrame = useFrameForVolumeProp(loopVolumeCurveBehavior ?? "repeat");
   const { fps, durationInFrames } = useVideoConfig();
-  const parentSequence = useContext29(SequenceContext);
-  const { hidden } = useContext29(SequenceVisibilityToggleContext);
+  const parentSequence = useContext30(SequenceContext);
+  const { hidden } = useContext30(SequenceVisibilityToggleContext);
   const logLevel = useLogLevel();
   const mountTime = useMountTime();
-  const [timelineId] = useState18(() => String(Math.random()));
+  const [timelineId] = useState19(() => String(Math.random()));
   const isSequenceHidden = hidden[timelineId] ?? false;
   if (typeof acceptableTimeShift !== "undefined") {
     throw new Error("acceptableTimeShift has been removed. Use acceptableTimeShiftInSeconds instead.");
@@ -6188,8 +6419,8 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
     id: timelineId,
     stack: _remotionInternalStack,
     showInTimeline,
-    premountDisplay: null,
-    postmountDisplay: null,
+    premountDisplay: parentSequence?.premountDisplay ?? null,
+    postmountDisplay: parentSequence?.postmountDisplay ?? null,
     onAutoPlayError: onAutoPlayError ?? null,
     isPremounting: Boolean(parentSequence?.premounting),
     isPostmounting: Boolean(parentSequence?.postmounting)
@@ -6225,13 +6456,13 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
   useImperativeHandle9(ref, () => {
     return videoRef.current;
   }, []);
-  useState18(() => playbackLogging({
+  useState19(() => playbackLogging({
     logLevel,
     message: `Mounting video with source = ${actualSrc}, v=${VERSION}, user agent=${typeof navigator === "undefined" ? "server" : navigator.userAgent}`,
     tag: "video",
     mountTime
   }));
-  useEffect19(() => {
+  useEffect20(() => {
     const { current } = videoRef;
     if (!current) {
       return;
@@ -6262,7 +6493,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
   const currentOnDurationCallback = useRef16(onDuration);
   currentOnDurationCallback.current = onDuration;
   useEmitVideoFrame({ ref: videoRef, onVideoFrame });
-  useEffect19(() => {
+  useEffect20(() => {
     const { current } = videoRef;
     if (!current) {
       return;
@@ -6279,7 +6510,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
       current.removeEventListener("loadedmetadata", onLoadedMetadata);
     };
   }, [src]);
-  useEffect19(() => {
+  useEffect20(() => {
     const { current } = videoRef;
     if (!current) {
       return;
@@ -6290,7 +6521,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
       current.preload = "auto";
     }
   }, []);
-  const actualStyle = useMemo26(() => {
+  const actualStyle = useMemo27(() => {
     return {
       ...style,
       opacity: isSequenceHidden ? 0 : style?.opacity ?? 1
@@ -6300,7 +6531,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
     crossOrigin,
     requestsVideoFrame: Boolean(onVideoFrame)
   });
-  return /* @__PURE__ */ jsx27("video", {
+  return /* @__PURE__ */ jsx28("video", {
     ref: videoRef,
     muted: muted || mediaMuted || isSequenceHidden || userPreferredVolume <= 0,
     playsInline: true,
@@ -6314,13 +6545,169 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
 };
 var VideoForPreview = forwardRef9(VideoForDevelopmentRefForwardingFunction);
 
-// src/watch-static-file.ts
-var WATCH_REMOTION_STATIC_FILES = "remotion_staticFilesChanged";
-var watchStaticFile = (fileName, callback) => {
-  if (ENABLE_V5_BREAKING_CHANGES) {
-    throw new Error("watchStaticFile() has moved into the `@remotion/studio` package. Update your imports.");
+// src/video/OffthreadVideo.tsx
+import { jsx as jsx29 } from "react/jsx-runtime";
+var InnerOffthreadVideo = (props2) => {
+  const {
+    startFrom,
+    endAt,
+    trimBefore,
+    trimAfter,
+    name,
+    pauseWhenBuffering,
+    stack,
+    showInTimeline,
+    ...otherProps
+  } = props2;
+  const environment = useRemotionEnvironment();
+  const onDuration = useCallback16(() => {
+    return;
+  }, []);
+  if (typeof props2.src !== "string") {
+    throw new TypeError(`The \`<OffthreadVideo>\` tag requires a string for \`src\`, but got ${JSON.stringify(props2.src)} instead.`);
   }
-  if (!getRemotionEnvironment().isStudio) {
+  validateMediaTrimProps({ startFrom, endAt, trimBefore, trimAfter });
+  const { trimBeforeValue, trimAfterValue } = resolveTrimProps({
+    startFrom,
+    endAt,
+    trimBefore,
+    trimAfter
+  });
+  if (typeof trimBeforeValue !== "undefined" || typeof trimAfterValue !== "undefined") {
+    return /* @__PURE__ */ jsx29(Sequence, {
+      layout: "none",
+      from: 0 - (trimBeforeValue ?? 0),
+      showInTimeline: false,
+      durationInFrames: trimAfterValue,
+      name,
+      children: /* @__PURE__ */ jsx29(InnerOffthreadVideo, {
+        pauseWhenBuffering: pauseWhenBuffering ?? false,
+        ...otherProps,
+        trimAfter: undefined,
+        name: undefined,
+        showInTimeline,
+        trimBefore: undefined,
+        stack: undefined,
+        startFrom: undefined,
+        endAt: undefined
+      })
+    });
+  }
+  validateMediaProps(props2, "Video");
+  if (environment.isRendering) {
+    return /* @__PURE__ */ jsx29(OffthreadVideoForRendering, {
+      pauseWhenBuffering: pauseWhenBuffering ?? false,
+      ...otherProps,
+      trimAfter: undefined,
+      name: undefined,
+      showInTimeline,
+      trimBefore: undefined,
+      stack: undefined,
+      startFrom: undefined,
+      endAt: undefined
+    });
+  }
+  const {
+    transparent,
+    toneMapped,
+    onAutoPlayError,
+    onVideoFrame,
+    crossOrigin,
+    delayRenderRetries,
+    delayRenderTimeoutInMilliseconds,
+    ...propsForPreview
+  } = otherProps;
+  return /* @__PURE__ */ jsx29(VideoForPreview, {
+    _remotionInternalStack: stack ?? null,
+    onDuration,
+    onlyWarnForMediaSeekingError: true,
+    pauseWhenBuffering: pauseWhenBuffering ?? false,
+    showInTimeline: showInTimeline ?? true,
+    onAutoPlayError: onAutoPlayError ?? undefined,
+    onVideoFrame: onVideoFrame ?? null,
+    crossOrigin,
+    ...propsForPreview,
+    _remotionInternalNativeLoopPassed: false
+  });
+};
+var OffthreadVideo = ({
+  src,
+  acceptableTimeShiftInSeconds,
+  allowAmplificationDuringRender,
+  audioStreamIndex,
+  className,
+  crossOrigin,
+  delayRenderRetries,
+  delayRenderTimeoutInMilliseconds,
+  id,
+  loopVolumeCurveBehavior,
+  muted,
+  name,
+  onAutoPlayError,
+  onError,
+  onVideoFrame,
+  pauseWhenBuffering,
+  playbackRate,
+  showInTimeline,
+  style,
+  toneFrequency,
+  toneMapped,
+  transparent,
+  trimAfter,
+  trimBefore,
+  useWebAudioApi,
+  volume,
+  _remotionInternalNativeLoopPassed,
+  endAt,
+  stack,
+  startFrom,
+  imageFormat
+}) => {
+  if (imageFormat) {
+    throw new TypeError(`The \`<OffthreadVideo>\` tag does no longer accept \`imageFormat\`. Use the \`transparent\` prop if you want to render a transparent video.`);
+  }
+  return /* @__PURE__ */ jsx29(InnerOffthreadVideo, {
+    acceptableTimeShiftInSeconds,
+    allowAmplificationDuringRender: allowAmplificationDuringRender ?? true,
+    audioStreamIndex: audioStreamIndex ?? 0,
+    className,
+    crossOrigin,
+    delayRenderRetries,
+    delayRenderTimeoutInMilliseconds,
+    id,
+    loopVolumeCurveBehavior: loopVolumeCurveBehavior ?? "repeat",
+    muted: muted ?? false,
+    name,
+    onAutoPlayError: onAutoPlayError ?? null,
+    onError,
+    onVideoFrame,
+    pauseWhenBuffering: pauseWhenBuffering ?? true,
+    playbackRate: playbackRate ?? 1,
+    toneFrequency: toneFrequency ?? 1,
+    showInTimeline: showInTimeline ?? true,
+    src,
+    stack,
+    startFrom,
+    _remotionInternalNativeLoopPassed: _remotionInternalNativeLoopPassed ?? false,
+    endAt,
+    style,
+    toneMapped: toneMapped ?? true,
+    transparent: transparent ?? false,
+    trimAfter,
+    trimBefore,
+    useWebAudioApi: useWebAudioApi ?? false,
+    volume
+  });
+};
+addSequenceStackTraces(OffthreadVideo);
+
+// src/watch-static-file.ts
+var WATCH_REMOTION_STATIC_FILES = "remotion_staticFilesChanged";
+var watchStaticFile = (fileName, callback) => {
+  if (ENABLE_V5_BREAKING_CHANGES) {
+    throw new Error("watchStaticFile() has moved into the `@remotion/studio` package. Update your imports.");
+  }
+  if (!getRemotionEnvironment().isStudio) {
     console.warn("The watchStaticFile() API is only available while using the Remotion Studio.");
     return { cancel: () => {
       return;
@@ -6352,22 +6739,22 @@ var watchStaticFile = (fileName, callback) => {
 };
 
 // src/wrap-remotion-context.tsx
-import React28, { useMemo as useMemo27 } from "react";
-import { jsx as jsx28 } from "react/jsx-runtime";
+import React30, { useMemo as useMemo28 } from "react";
+import { jsx as jsx30 } from "react/jsx-runtime";
 function useRemotionContexts() {
-  const compositionManagerCtx = React28.useContext(CompositionManager);
-  const timelineContext = React28.useContext(TimelineContext);
-  const setTimelineContext = React28.useContext(SetTimelineContext);
-  const sequenceContext = React28.useContext(SequenceContext);
-  const nonceContext = React28.useContext(NonceContext);
-  const canUseRemotionHooksContext = React28.useContext(CanUseRemotionHooks);
-  const preloadContext = React28.useContext(PreloadContext);
-  const resolveCompositionContext = React28.useContext(ResolveCompositionContext);
-  const renderAssetManagerContext = React28.useContext(RenderAssetManager);
-  const sequenceManagerContext = React28.useContext(SequenceManager);
-  const bufferManagerContext = React28.useContext(BufferingContextReact);
-  const logLevelContext = React28.useContext(LogLevelContext);
-  return useMemo27(() => ({
+  const compositionManagerCtx = React30.useContext(CompositionManager);
+  const timelineContext = React30.useContext(TimelineContext);
+  const setTimelineContext = React30.useContext(SetTimelineContext);
+  const sequenceContext = React30.useContext(SequenceContext);
+  const nonceContext = React30.useContext(NonceContext);
+  const canUseRemotionHooksContext = React30.useContext(CanUseRemotionHooks);
+  const preloadContext = React30.useContext(PreloadContext);
+  const resolveCompositionContext = React30.useContext(ResolveCompositionContext);
+  const renderAssetManagerContext = React30.useContext(RenderAssetManager);
+  const sequenceManagerContext = React30.useContext(SequenceManager);
+  const bufferManagerContext = React30.useContext(BufferingContextReact);
+  const logLevelContext = React30.useContext(LogLevelContext);
+  return useMemo28(() => ({
     compositionManagerCtx,
     timelineContext,
     setTimelineContext,
@@ -6397,29 +6784,29 @@ function useRemotionContexts() {
 }
 var RemotionContextProvider = (props2) => {
   const { children, contexts } = props2;
-  return /* @__PURE__ */ jsx28(LogLevelContext.Provider, {
+  return /* @__PURE__ */ jsx30(LogLevelContext.Provider, {
     value: contexts.logLevelContext,
-    children: /* @__PURE__ */ jsx28(CanUseRemotionHooks.Provider, {
+    children: /* @__PURE__ */ jsx30(CanUseRemotionHooks.Provider, {
       value: contexts.canUseRemotionHooksContext,
-      children: /* @__PURE__ */ jsx28(NonceContext.Provider, {
+      children: /* @__PURE__ */ jsx30(NonceContext.Provider, {
         value: contexts.nonceContext,
-        children: /* @__PURE__ */ jsx28(PreloadContext.Provider, {
+        children: /* @__PURE__ */ jsx30(PreloadContext.Provider, {
           value: contexts.preloadContext,
-          children: /* @__PURE__ */ jsx28(CompositionManager.Provider, {
+          children: /* @__PURE__ */ jsx30(CompositionManager.Provider, {
             value: contexts.compositionManagerCtx,
-            children: /* @__PURE__ */ jsx28(SequenceManager.Provider, {
+            children: /* @__PURE__ */ jsx30(SequenceManager.Provider, {
               value: contexts.sequenceManagerContext,
-              children: /* @__PURE__ */ jsx28(RenderAssetManager.Provider, {
+              children: /* @__PURE__ */ jsx30(RenderAssetManager.Provider, {
                 value: contexts.renderAssetManagerContext,
-                children: /* @__PURE__ */ jsx28(ResolveCompositionContext.Provider, {
+                children: /* @__PURE__ */ jsx30(ResolveCompositionContext.Provider, {
                   value: contexts.resolveCompositionContext,
-                  children: /* @__PURE__ */ jsx28(TimelineContext.Provider, {
+                  children: /* @__PURE__ */ jsx30(TimelineContext.Provider, {
                     value: contexts.timelineContext,
-                    children: /* @__PURE__ */ jsx28(SetTimelineContext.Provider, {
+                    children: /* @__PURE__ */ jsx30(SetTimelineContext.Provider, {
                       value: contexts.setTimelineContext,
-                      children: /* @__PURE__ */ jsx28(SequenceContext.Provider, {
+                      children: /* @__PURE__ */ jsx30(SequenceContext.Provider, {
                         value: contexts.sequenceContext,
-                        children: /* @__PURE__ */ jsx28(BufferingContextReact.Provider, {
+                        children: /* @__PURE__ */ jsx30(BufferingContextReact.Provider, {
                           value: contexts.bufferManagerContext,
                           children
                         })
@@ -6517,7 +6904,8 @@ var Internals = {
   RemotionEnvironmentContext,
   warnAboutTooHighVolume,
   AudioForPreview,
-  OBJECTFIT_CONTAIN_CLASS_NAME
+  OBJECTFIT_CONTAIN_CLASS_NAME,
+  InnerOffthreadVideo
 };
 // src/interpolate-colors.ts
 var NUMBER = "[-+]?\\d*\\.?\\d+";
@@ -6882,25 +7270,15 @@ var validateFrame = ({
     throw new RangeError(`Cannot use frame ${frame}: Duration of composition is ${durationInFrames}, therefore the highest frame that can be rendered is ${durationInFrames - 1}`);
   }
 };
-
-// src/video/offthread-video-source.ts
-var getOffthreadVideoSource = ({
-  src,
-  transparent,
-  currentTime,
-  toneMapped
-}) => {
-  return `http://localhost:${window.remotion_proxyPort}/proxy?src=${encodeURIComponent(getAbsoluteSrc(src))}&time=${encodeURIComponent(Math.max(0, currentTime))}&transparent=${String(transparent)}&toneMapped=${String(toneMapped)}`;
-};
 // src/series/index.tsx
-import { Children, forwardRef as forwardRef10, useMemo as useMemo28 } from "react";
+import { Children, forwardRef as forwardRef10, useMemo as useMemo29 } from "react";
 
 // src/series/flatten-children.tsx
-import React29 from "react";
+import React31 from "react";
 var flattenChildren = (children) => {
-  const childrenArray = React29.Children.toArray(children);
+  const childrenArray = React31.Children.toArray(children);
   return childrenArray.reduce((flatChildren, child) => {
-    if (child.type === React29.Fragment) {
+    if (child.type === React31.Fragment) {
       return flatChildren.concat(flattenChildren(child.props.children));
     }
     flatChildren.push(child);
@@ -6909,39 +7287,39 @@ var flattenChildren = (children) => {
 };
 
 // src/series/is-inside-series.tsx
-import React30, { createContext as createContext19 } from "react";
-import { jsx as jsx29 } from "react/jsx-runtime";
+import React32, { createContext as createContext19 } from "react";
+import { jsx as jsx31 } from "react/jsx-runtime";
 var IsInsideSeriesContext = createContext19(false);
 var IsInsideSeriesContainer = ({ children }) => {
-  return /* @__PURE__ */ jsx29(IsInsideSeriesContext.Provider, {
+  return /* @__PURE__ */ jsx31(IsInsideSeriesContext.Provider, {
     value: true,
     children
   });
 };
 var IsNotInsideSeriesProvider = ({ children }) => {
-  return /* @__PURE__ */ jsx29(IsInsideSeriesContext.Provider, {
+  return /* @__PURE__ */ jsx31(IsInsideSeriesContext.Provider, {
     value: false,
     children
   });
 };
 var useRequireToBeInsideSeries = () => {
-  const isInsideSeries = React30.useContext(IsInsideSeriesContext);
+  const isInsideSeries = React32.useContext(IsInsideSeriesContext);
   if (!isInsideSeries) {
     throw new Error("This component must be inside a <Series /> component.");
   }
 };
 
 // src/series/index.tsx
-import { jsx as jsx30 } from "react/jsx-runtime";
+import { jsx as jsx32 } from "react/jsx-runtime";
 var SeriesSequenceRefForwardingFunction = ({ children }, _ref) => {
   useRequireToBeInsideSeries();
-  return /* @__PURE__ */ jsx30(IsNotInsideSeriesProvider, {
+  return /* @__PURE__ */ jsx32(IsNotInsideSeriesProvider, {
     children
   });
 };
 var SeriesSequence = forwardRef10(SeriesSequenceRefForwardingFunction);
 var Series = (props2) => {
-  const childrenValue = useMemo28(() => {
+  const childrenValue = useMemo29(() => {
     let startFrame = 0;
     const flattenedChildren = flattenChildren(props2.children);
     return Children.map(flattenedChildren, (child, i) => {
@@ -6985,7 +7363,7 @@ var Series = (props2) => {
       }
       const currentStartFrame = startFrame + offset;
       startFrame += durationInFramesProp + offset;
-      return /* @__PURE__ */ jsx30(Sequence, {
+      return /* @__PURE__ */ jsx32(Sequence, {
         name: name || "<Series.Sequence>",
         from: currentStartFrame,
         durationInFrames: durationInFramesProp,
@@ -6996,14 +7374,14 @@ var Series = (props2) => {
     });
   }, [props2.children]);
   if (ENABLE_V5_BREAKING_CHANGES) {
-    return /* @__PURE__ */ jsx30(IsInsideSeriesContainer, {
-      children: /* @__PURE__ */ jsx30(Sequence, {
+    return /* @__PURE__ */ jsx32(IsInsideSeriesContainer, {
+      children: /* @__PURE__ */ jsx32(Sequence, {
         ...props2,
         children: childrenValue
       })
     });
   }
-  return /* @__PURE__ */ jsx30(IsInsideSeriesContainer, {
+  return /* @__PURE__ */ jsx32(IsInsideSeriesContainer, {
     children: childrenValue
   });
 };
@@ -7340,302 +7718,14 @@ var staticFile = (path) => {
   return preparsed;
 };
 // src/Still.tsx
-import React32 from "react";
+import React34 from "react";
 var Still = (props2) => {
   const newProps = {
     ...props2,
     durationInFrames: 1,
     fps: 1
   };
-  return React32.createElement(Composition, newProps);
-};
-// src/video/OffthreadVideo.tsx
-import { useCallback as useCallback16 } from "react";
-
-// src/video/OffthreadVideoForRendering.tsx
-import {
-  useCallback as useCallback15,
-  useContext as useContext30,
-  useEffect as useEffect20,
-  useLayoutEffect as useLayoutEffect9,
-  useMemo as useMemo29,
-  useState as useState19
-} from "react";
-import { jsx as jsx31 } from "react/jsx-runtime";
-var OffthreadVideoForRendering = ({
-  onError,
-  volume: volumeProp,
-  playbackRate,
-  src,
-  muted,
-  allowAmplificationDuringRender,
-  transparent = false,
-  toneMapped = true,
-  toneFrequency,
-  name,
-  loopVolumeCurveBehavior,
-  delayRenderRetries,
-  delayRenderTimeoutInMilliseconds,
-  onVideoFrame,
-  crossOrigin,
-  audioStreamIndex,
-  ...props2
-}) => {
-  const absoluteFrame = useTimelinePosition();
-  const frame = useCurrentFrame();
-  const volumePropsFrame = useFrameForVolumeProp(loopVolumeCurveBehavior ?? "repeat");
-  const videoConfig = useUnsafeVideoConfig();
-  const sequenceContext = useContext30(SequenceContext);
-  const mediaStartsAt = useMediaStartsAt();
-  const { registerRenderAsset, unregisterRenderAsset } = useContext30(RenderAssetManager);
-  if (!src) {
-    throw new TypeError("No `src` was passed to <OffthreadVideo>.");
-  }
-  const id = useMemo29(() => `offthreadvideo-${random(src ?? "")}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.relativeFrom}-${sequenceContext?.durationInFrames}`, [
-    src,
-    sequenceContext?.cumulatedFrom,
-    sequenceContext?.relativeFrom,
-    sequenceContext?.durationInFrames
-  ]);
-  if (!videoConfig) {
-    throw new Error("No video config found");
-  }
-  const volume = evaluateVolume({
-    volume: volumeProp,
-    frame: volumePropsFrame,
-    mediaVolume: 1
-  });
-  warnAboutTooHighVolume(volume);
-  useEffect20(() => {
-    if (!src) {
-      throw new Error("No src passed");
-    }
-    if (!window.remotion_audioEnabled) {
-      return;
-    }
-    if (muted) {
-      return;
-    }
-    if (volume <= 0) {
-      return;
-    }
-    registerRenderAsset({
-      type: "video",
-      src: getAbsoluteSrc(src),
-      id,
-      frame: absoluteFrame,
-      volume,
-      mediaFrame: frame,
-      playbackRate: playbackRate ?? 1,
-      toneFrequency: toneFrequency ?? null,
-      audioStartFrame: Math.max(0, -(sequenceContext?.relativeFrom ?? 0)),
-      audioStreamIndex: audioStreamIndex ?? 0
-    });
-    return () => unregisterRenderAsset(id);
-  }, [
-    muted,
-    src,
-    registerRenderAsset,
-    id,
-    unregisterRenderAsset,
-    volume,
-    frame,
-    absoluteFrame,
-    playbackRate,
-    toneFrequency,
-    sequenceContext?.relativeFrom,
-    audioStreamIndex
-  ]);
-  const currentTime = useMemo29(() => {
-    return getExpectedMediaFrameUncorrected({
-      frame,
-      playbackRate: playbackRate || 1,
-      startFrom: -mediaStartsAt
-    }) / videoConfig.fps;
-  }, [frame, mediaStartsAt, playbackRate, videoConfig.fps]);
-  const actualSrc = useMemo29(() => {
-    return getOffthreadVideoSource({
-      src,
-      currentTime,
-      transparent,
-      toneMapped
-    });
-  }, [toneMapped, currentTime, src, transparent]);
-  const [imageSrc, setImageSrc] = useState19(null);
-  const { delayRender: delayRender2, continueRender: continueRender2 } = useDelayRender();
-  useLayoutEffect9(() => {
-    if (!window.remotion_videoEnabled) {
-      return;
-    }
-    const cleanup = [];
-    setImageSrc(null);
-    const controller = new AbortController;
-    const newHandle = delayRender2(`Fetching ${actualSrc} from server`, {
-      retries: delayRenderRetries ?? undefined,
-      timeoutInMilliseconds: delayRenderTimeoutInMilliseconds ?? undefined
-    });
-    const execute = async () => {
-      try {
-        const res = await fetch(actualSrc, {
-          signal: controller.signal,
-          cache: "no-store"
-        });
-        if (res.status !== 200) {
-          if (res.status === 500) {
-            const json = await res.json();
-            if (json.error) {
-              const cleanedUpErrorMessage = json.error.replace(/^Error: /, "");
-              throw new Error(cleanedUpErrorMessage);
-            }
-          }
-          throw new Error(`Server returned status ${res.status} while fetching ${actualSrc}`);
-        }
-        const blob = await res.blob();
-        const url = URL.createObjectURL(blob);
-        cleanup.push(() => URL.revokeObjectURL(url));
-        setImageSrc({
-          src: url,
-          handle: newHandle
-        });
-      } catch (err) {
-        if (err.message.includes("aborted")) {
-          continueRender2(newHandle);
-          return;
-        }
-        if (controller.signal.aborted) {
-          continueRender2(newHandle);
-          return;
-        }
-        if (err.message.includes("Failed to fetch")) {
-          err = new Error(`Failed to fetch ${actualSrc}. This could be caused by Chrome rejecting the request because the disk space is low. Consider increasing the disk size of your environment.`, { cause: err });
-        }
-        if (onError) {
-          onError(err);
-        } else {
-          cancelRender(err);
-        }
-      }
-    };
-    execute();
-    cleanup.push(() => {
-      if (controller.signal.aborted) {
-        return;
-      }
-      controller.abort();
-    });
-    return () => {
-      cleanup.forEach((c2) => c2());
-    };
-  }, [
-    actualSrc,
-    delayRenderRetries,
-    delayRenderTimeoutInMilliseconds,
-    onError,
-    continueRender2,
-    delayRender2
-  ]);
-  const onErr = useCallback15(() => {
-    if (onError) {
-      onError?.(new Error("Failed to load image with src " + imageSrc));
-    } else {
-      cancelRender("Failed to load image with src " + imageSrc);
-    }
-  }, [imageSrc, onError]);
-  const className = useMemo29(() => {
-    return [OBJECTFIT_CONTAIN_CLASS_NAME, props2.className].filter(truthy).join(" ");
-  }, [props2.className]);
-  const onImageFrame = useCallback15((img) => {
-    if (onVideoFrame) {
-      onVideoFrame(img);
-    }
-  }, [onVideoFrame]);
-  if (!imageSrc || !window.remotion_videoEnabled) {
-    return null;
-  }
-  continueRender2(imageSrc.handle);
-  return /* @__PURE__ */ jsx31(Img, {
-    src: imageSrc.src,
-    className,
-    delayRenderRetries,
-    delayRenderTimeoutInMilliseconds,
-    onImageFrame,
-    ...props2,
-    onError: onErr
-  });
-};
-
-// src/video/OffthreadVideo.tsx
-import { jsx as jsx32 } from "react/jsx-runtime";
-var OffthreadVideo = (props2) => {
-  const {
-    startFrom,
-    endAt,
-    trimBefore,
-    trimAfter,
-    name,
-    pauseWhenBuffering,
-    stack,
-    showInTimeline,
-    ...otherProps
-  } = props2;
-  const environment = useRemotionEnvironment();
-  const onDuration = useCallback16(() => {
-    return;
-  }, []);
-  if (typeof props2.src !== "string") {
-    throw new TypeError(`The \`<OffthreadVideo>\` tag requires a string for \`src\`, but got ${JSON.stringify(props2.src)} instead.`);
-  }
-  if (props2.imageFormat) {
-    throw new TypeError(`The \`<OffthreadVideo>\` tag does no longer accept \`imageFormat\`. Use the \`transparent\` prop if you want to render a transparent video.`);
-  }
-  validateMediaTrimProps({ startFrom, endAt, trimBefore, trimAfter });
-  const { trimBeforeValue, trimAfterValue } = resolveTrimProps({
-    startFrom,
-    endAt,
-    trimBefore,
-    trimAfter
-  });
-  if (typeof trimBeforeValue !== "undefined" || typeof trimAfterValue !== "undefined") {
-    return /* @__PURE__ */ jsx32(Sequence, {
-      layout: "none",
-      from: 0 - (trimBeforeValue ?? 0),
-      showInTimeline: false,
-      durationInFrames: trimAfterValue,
-      name,
-      children: /* @__PURE__ */ jsx32(OffthreadVideo, {
-        pauseWhenBuffering: pauseWhenBuffering ?? false,
-        ...otherProps
-      })
-    });
-  }
-  validateMediaProps(props2, "Video");
-  if (environment.isRendering) {
-    return /* @__PURE__ */ jsx32(OffthreadVideoForRendering, {
-      ...otherProps
-    });
-  }
-  const {
-    transparent,
-    toneMapped,
-    onAutoPlayError,
-    onVideoFrame,
-    crossOrigin,
-    delayRenderRetries,
-    delayRenderTimeoutInMilliseconds,
-    ...propsForPreview
-  } = otherProps;
-  return /* @__PURE__ */ jsx32(VideoForPreview, {
-    _remotionInternalStack: stack ?? null,
-    _remotionInternalNativeLoopPassed: false,
-    onDuration,
-    onlyWarnForMediaSeekingError: true,
-    pauseWhenBuffering: pauseWhenBuffering ?? false,
-    showInTimeline: showInTimeline ?? true,
-    onAutoPlayError: onAutoPlayError ?? undefined,
-    onVideoFrame: onVideoFrame ?? null,
-    crossOrigin,
-    ...propsForPreview
-  });
+  return React34.createElement(Composition, newProps);
 };
 // src/video/Video.tsx
 import { forwardRef as forwardRef12, useCallback as useCallback17, useContext as useContext32 } from "react";
@@ -7840,7 +7930,7 @@ var VideoForRenderingForwardFunction = ({
       volume,
       mediaFrame: frame,
       playbackRate: playbackRate ?? 1,
-      toneFrequency: toneFrequency ?? null,
+      toneFrequency: toneFrequency ?? 1,
       audioStartFrame: Math.max(0, -(sequenceContext?.relativeFrom ?? 0)),
       audioStreamIndex: audioStreamIndex ?? 0
     });
@@ -8038,10 +8128,10 @@ var VideoForwardingFunction = (props2, ref) => {
     const mediaDuration = durationFetched * fps;
     return /* @__PURE__ */ jsx34(Loop, {
       durationInFrames: calculateLoopDuration({
-        endAt: trimAfterValue ?? undefined,
+        endAt: trimAfterValue,
         mediaDuration,
         playbackRate: props2.playbackRate ?? 1,
-        startFrom: trimBeforeValue ?? undefined
+        startFrom: trimBeforeValue
       }),
       layout: "none",
       name,
@@ -8066,7 +8156,7 @@ var VideoForwardingFunction = (props2, ref) => {
       })
     });
   }
-  validateMediaProps(props2, "Video");
+  validateMediaProps({ playbackRate: props2.playbackRate, volume: props2.volume }, "Video");
   if (environment.isRendering) {
     return /* @__PURE__ */ jsx34(VideoForRendering, {
       onDuration,