@remotion/promo-pages 4.0.355 → 4.0.357

package/dist/Homepage.js

@@ -87,7 +87,7 @@ import {
   useState as useState7
 } from "react";
 import { jsx as jsx11 } from "react/jsx-runtime";
-import { forwardRef as forwardRef6, useCallback as useCallback11, useContext as useContext25 } from "react";
+import { forwardRef as forwardRef6, useCallback as useCallback11, useContext as useContext26 } from "react";
 import React10, { createContext as createContext11, useMemo as useMemo11 } from "react";
 import { jsx as jsx12 } from "react/jsx-runtime";
 import { useContext as useContext13 } from "react";
@@ -97,8 +97,8 @@ import { createContext as createContext13, useMemo as useMemo12, useReducer } fr
 import { jsx as jsx14 } from "react/jsx-runtime";
 import {
   forwardRef as forwardRef4,
-  useContext as useContext23,
-  useEffect as useEffect13,
+  useContext as useContext24,
+  useEffect as useEffect14,
   useImperativeHandle as useImperativeHandle5,
   useMemo as useMemo20,
   useRef as useRef11,
@@ -144,12 +144,13 @@ import { jsx as jsx16 } from "react/jsx-runtime";
 import React16 from "react";
 import { useEffect as useEffect10, useState as useState13 } from "react";
 import { useEffect as useEffect11, useRef as useRef9 } from "react";
-import { createContext as createContext16, useContext as useContext22, useMemo as useMemo19 } from "react";
+import { useContext as useContext22, useEffect as useEffect13 } from "react";
+import { createContext as createContext16, useContext as useContext23, useMemo as useMemo19 } from "react";
 import { jsx as jsx17 } from "react/jsx-runtime";
 import {
   forwardRef as forwardRef5,
-  useContext as useContext24,
-  useEffect as useEffect14,
+  useContext as useContext25,
+  useEffect as useEffect15,
   useImperativeHandle as useImperativeHandle6,
   useLayoutEffect as useLayoutEffect6,
   useMemo as useMemo21,
@@ -157,9 +158,9 @@ import {
 } from "react";
 import { jsx as jsx18 } from "react/jsx-runtime";
 import { jsx as jsx19 } from "react/jsx-runtime";
-import { Suspense, useContext as useContext27, useEffect as useEffect16 } from "react";
+import { Suspense, useContext as useContext28, useEffect as useEffect17 } from "react";
 import { createPortal } from "react-dom";
-import { createContext as createContext17, useContext as useContext26, useEffect as useEffect15, useMemo as useMemo222 } from "react";
+import { createContext as createContext17, useContext as useContext27, useEffect as useEffect16, useMemo as useMemo222 } from "react";
 import { jsx as jsx20 } from "react/jsx-runtime";
 import { jsx as jsx21, jsxs as jsxs22 } from "react/jsx-runtime";
 import React20, { useMemo as useMemo23 } from "react";
@@ -169,7 +170,7 @@ import { jsx as jsx23 } from "react/jsx-runtime";
 import {
   forwardRef as forwardRef8,
   useCallback as useCallback13,
-  useContext as useContext28,
+  useContext as useContext29,
   useImperativeHandle as useImperativeHandle7,
   useLayoutEffect as useLayoutEffect7,
   useRef as useRef13
@@ -185,7 +186,7 @@ import React24, {
 } from "react";
 import { jsx as jsx25 } from "react/jsx-runtime";
 import {
-  useEffect as useEffect17,
+  useEffect as useEffect18,
   useLayoutEffect as useLayoutEffect8,
   useMemo as useMemo25,
   useRef as useRef15,
@@ -193,41 +194,41 @@ import {
 } from "react";
 import { jsx as jsx26 } from "react/jsx-runtime";
 import React26, { createContext as createContext18 } from "react";
+import { useCallback as useCallback16 } from "react";
 import {
-  forwardRef as forwardRef9,
-  useContext as useContext29,
+  useCallback as useCallback15,
+  useContext as useContext30,
   useEffect as useEffect19,
-  useImperativeHandle as useImperativeHandle9,
+  useLayoutEffect as useLayoutEffect9,
   useMemo as useMemo26,
-  useRef as useRef16,
   useState as useState18
 } from "react";
-import { useEffect as useEffect18 } from "react";
 import { jsx as jsx27 } from "react/jsx-runtime";
-import React28, { useMemo as useMemo27 } from "react";
-import { jsx as jsx28 } from "react/jsx-runtime";
-import { Children, forwardRef as forwardRef10, useMemo as useMemo28 } from "react";
-import React29 from "react";
-import React30, { createContext as createContext19 } from "react";
-import { jsx as jsx29 } from "react/jsx-runtime";
-import { jsx as jsx30 } from "react/jsx-runtime";
-import React322 from "react";
-import { useCallback as useCallback16 } from "react";
 import {
-  useCallback as useCallback15,
-  useContext as useContext30,
-  useEffect as useEffect20,
-  useLayoutEffect as useLayoutEffect9,
-  useMemo as useMemo29,
+  forwardRef as forwardRef9,
+  useContext as useContext31,
+  useEffect as useEffect21,
+  useImperativeHandle as useImperativeHandle9,
+  useMemo as useMemo27,
+  useRef as useRef16,
   useState as useState19
 } from "react";
+import { useEffect as useEffect20 } from "react";
+import { jsx as jsx28 } from "react/jsx-runtime";
+import { jsx as jsx29 } from "react/jsx-runtime";
+import React30, { useMemo as useMemo28 } from "react";
+import { jsx as jsx30 } from "react/jsx-runtime";
+import { Children, forwardRef as forwardRef10, useMemo as useMemo29 } from "react";
+import React31 from "react";
+import React322, { createContext as createContext19 } from "react";
 import { jsx as jsx31 } from "react/jsx-runtime";
 import { jsx as jsx322 } from "react/jsx-runtime";
-import { forwardRef as forwardRef12, useCallback as useCallback17, useContext as useContext32 } from "react";
+import React34 from "react";
+import { forwardRef as forwardRef12, useCallback as useCallback17, useContext as useContext33 } from "react";
 import {
   forwardRef as forwardRef11,
-  useContext as useContext31,
-  useEffect as useEffect21,
+  useContext as useContext32,
+  useEffect as useEffect222,
   useImperativeHandle as useImperativeHandle10,
   useLayoutEffect as useLayoutEffect10,
   useMemo as useMemo30,
@@ -439,19 +440,19 @@ function exponentialBackoff(errorCount) {
   return 1000 * 2 ** (errorCount - 1);
 }
 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,
@@ -739,7 +740,7 @@ var __defProp2, __export2 = (target, all) => {
   });
 }, useIsPlayer = () => {
   return useContext(IsPlayerContext);
-}, VERSION = "4.0.355", checkMultipleRemotionVersions = () => {
+}, VERSION = "4.0.357", checkMultipleRemotionVersions = () => {
   if (typeof globalThis === "undefined") {
     return;
   }
@@ -1720,7 +1721,9 @@ Check that all your Remotion packages are on the same version. If your dependenc
       height: height ?? parentSequence?.height ?? null,
       width: width ?? parentSequence?.width ?? null,
       premounting,
-      postmounting
+      postmounting,
+      premountDisplay: premountDisplay ?? null,
+      postmountDisplay: postmountDisplay ?? null
     };
   }, [
     cumulatedFrom,
@@ -1731,7 +1734,9 @@ Check that all your Remotion packages are on the same version. If your dependenc
     height,
     width,
     premounting,
-    postmounting
+    postmounting,
+    premountDisplay,
+    postmountDisplay
   ]);
   const timelineClipName = useMemo9(() => {
     return name ?? "";
@@ -2356,17 +2361,17 @@ Check that all your Remotion packages are on the same version. If your dependenc
   }
   return new URL(relativeSrc, window.origin).href;
 }, calculateLoopDuration = ({
-  endAt,
-  mediaDuration,
+  trimAfter,
+  mediaDurationInFrames,
   playbackRate,
-  startFrom
+  trimBefore
 }) => {
-  let duration = mediaDuration;
-  if (typeof endAt !== "undefined") {
-    duration = endAt;
+  let duration = mediaDurationInFrames;
+  if (typeof trimAfter !== "undefined") {
+    duration = trimAfter;
   }
-  if (typeof startFrom !== "undefined") {
-    duration -= startFrom;
+  if (typeof trimBefore !== "undefined") {
+    duration -= trimBefore;
   }
   const actualDuration = duration / playbackRate;
   return Math.floor(actualDuration);
@@ -3329,7 +3334,6 @@ Check that all your Remotion packages are on the same version. If your dependenc
 }, useMediaInTimeline = ({
   volume,
   mediaVolume,
-  mediaRef,
   src,
   mediaType,
   playbackRate,
@@ -3338,22 +3342,16 @@ Check that all your Remotion packages are on the same version. If your dependenc
   stack,
   showInTimeline,
   premountDisplay,
-  postmountDisplay,
-  onAutoPlayError,
-  isPremounting,
-  isPostmounting
+  postmountDisplay
 }) => {
   const videoConfig = useVideoConfig();
-  const { rootId, audioAndVideoTags } = useContext18(TimelineContext);
   const parentSequence = useContext18(SequenceContext);
   const actualFrom = parentSequence ? parentSequence.relativeFrom + parentSequence.cumulatedFrom : 0;
-  const { imperativePlaying } = useContext18(TimelineContext);
   const startsAt = useMediaStartsAt();
   const { registerSequence, unregisterSequence } = useContext18(SequenceManager);
   const [initialVolume] = useState11(() => volume);
-  const logLevel = useLogLevel();
-  const mountTime = useMountTime();
   const nonce = useNonce();
+  const { rootId } = useContext18(TimelineContext);
   const duration = parentSequence ? Math.min(parentSequence.durationInFrames, videoConfig.durationInFrames) : videoConfig.durationInFrames;
   const doesVolumeChange = typeof volume === "function";
   const volumes = useMemo15(() => {
@@ -3375,9 +3373,6 @@ Check that all your Remotion packages are on the same version. If your dependenc
   }, [initialVolume, mediaType, src, volume]);
   const env = useRemotionEnvironment();
   useEffect8(() => {
-    if (!mediaRef.current) {
-      return;
-    }
     if (!src) {
       throw new Error("No src passed");
     }
@@ -3423,7 +3418,6 @@ Check that all your Remotion packages are on the same version. If your dependenc
     volumes,
     doesVolumeChange,
     nonce,
-    mediaRef,
     mediaType,
     startsAt,
     playbackRate,
@@ -3434,44 +3428,6 @@ Check that all your Remotion packages are on the same version. If your dependenc
     postmountDisplay,
     env.isStudio
   ]);
-  useEffect8(() => {
-    const tag = {
-      id,
-      play: (reason) => {
-        if (!imperativePlaying.current) {
-          return;
-        }
-        if (isPremounting || isPostmounting) {
-          return;
-        }
-        return playAndHandleNotAllowedError({
-          mediaRef,
-          mediaType,
-          onAutoPlayError,
-          logLevel,
-          mountTime,
-          reason,
-          isPlayer: env.isPlayer
-        });
-      }
-    };
-    audioAndVideoTags.current.push(tag);
-    return () => {
-      audioAndVideoTags.current = audioAndVideoTags.current.filter((a) => a.id !== id);
-    };
-  }, [
-    audioAndVideoTags,
-    id,
-    mediaRef,
-    mediaType,
-    onAutoPlayError,
-    imperativePlaying,
-    isPremounting,
-    isPostmounting,
-    logLevel,
-    mountTime,
-    env.isPlayer
-  ]);
 }, useBufferManager = (logLevel, mountTime) => {
   const [blocks, setBlocks] = useState12([]);
   const [onBufferingCallbacks, setOnBufferingCallbacks] = useState12([]);
@@ -4181,15 +4137,65 @@ Check that all your Remotion packages are on the same version. If your dependenc
     mediaTagCurrentTime,
     env.isPlayer
   ]);
+}, useMediaTag = ({
+  mediaRef,
+  id,
+  mediaType,
+  onAutoPlayError,
+  isPremounting,
+  isPostmounting
+}) => {
+  const { audioAndVideoTags, imperativePlaying } = useContext22(TimelineContext);
+  const logLevel = useLogLevel();
+  const mountTime = useMountTime();
+  const env = useRemotionEnvironment();
+  useEffect13(() => {
+    const tag = {
+      id,
+      play: (reason) => {
+        if (!imperativePlaying.current) {
+          return;
+        }
+        if (isPremounting || isPostmounting) {
+          return;
+        }
+        return playAndHandleNotAllowedError({
+          mediaRef,
+          mediaType,
+          onAutoPlayError,
+          logLevel,
+          mountTime,
+          reason,
+          isPlayer: env.isPlayer
+        });
+      }
+    };
+    audioAndVideoTags.current.push(tag);
+    return () => {
+      audioAndVideoTags.current = audioAndVideoTags.current.filter((a) => a.id !== id);
+    };
+  }, [
+    audioAndVideoTags,
+    id,
+    mediaRef,
+    mediaType,
+    onAutoPlayError,
+    imperativePlaying,
+    isPremounting,
+    isPostmounting,
+    logLevel,
+    mountTime,
+    env.isPlayer
+  ]);
 }, MediaVolumeContext, SetMediaVolumeContext, useMediaVolumeState = () => {
-  const { mediaVolume } = useContext22(MediaVolumeContext);
-  const { setMediaVolume } = useContext22(SetMediaVolumeContext);
+  const { mediaVolume } = useContext23(MediaVolumeContext);
+  const { setMediaVolume } = useContext23(SetMediaVolumeContext);
   return useMemo19(() => {
     return [mediaVolume, setMediaVolume];
   }, [mediaVolume, setMediaVolume]);
 }, useMediaMutedState = () => {
-  const { mediaMuted } = useContext22(MediaVolumeContext);
-  const { setMediaMuted } = useContext22(SetMediaVolumeContext);
+  const { mediaMuted } = useContext23(MediaVolumeContext);
+  const { setMediaMuted } = useContext23(SetMediaVolumeContext);
   return useMemo19(() => {
     return [mediaMuted, setMediaMuted];
   }, [mediaMuted, setMediaMuted]);
@@ -4237,12 +4243,12 @@ Check that all your Remotion packages are on the same version. If your dependenc
   const [mediaVolume] = useMediaVolumeState();
   const [mediaMuted] = useMediaMutedState();
   const volumePropFrame = useFrameForVolumeProp(loopVolumeCurveBehavior ?? "repeat");
-  const { hidden } = useContext23(SequenceVisibilityToggleContext);
+  const { hidden } = useContext24(SequenceVisibilityToggleContext);
   if (!src) {
     throw new TypeError("No 'src' was passed to <Audio>.");
   }
   const preloadedSrc = usePreload(src);
-  const sequenceContext = useContext23(SequenceContext);
+  const sequenceContext = useContext24(SequenceContext);
   const [timelineId] = useState14(() => String(Math.random()));
   const isSequenceHidden = hidden[timelineId] ?? false;
   const userPreferredVolume = evaluateVolume({
@@ -4281,7 +4287,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
     props.muted,
     props.loop
   ]);
-  const context = useContext23(SharedAudioContext);
+  const context = useContext24(SharedAudioContext);
   if (!context) {
     throw new Error("SharedAudioContext not found");
   }
@@ -4293,7 +4299,6 @@ Check that all your Remotion packages are on the same version. If your dependenc
   useMediaInTimeline({
     volume,
     mediaVolume,
-    mediaRef: audioRef,
     src,
     mediaType: "audio",
     playbackRate: playbackRate ?? 1,
@@ -4301,11 +4306,8 @@ Check that all your Remotion packages are on the same version. If your dependenc
     id: timelineId,
     stack: _remotionInternalStack,
     showInTimeline,
-    premountDisplay: null,
-    postmountDisplay: null,
-    onAutoPlayError: null,
-    isPremounting: Boolean(sequenceContext?.premounting),
-    isPostmounting: Boolean(sequenceContext?.postmounting)
+    premountDisplay: sequenceContext?.premountDisplay ?? null,
+    postmountDisplay: sequenceContext?.postmountDisplay ?? null
   });
   useMediaPlayback({
     mediaRef: audioRef,
@@ -4319,6 +4321,14 @@ Check that all your Remotion packages are on the same version. If your dependenc
     pauseWhenBuffering,
     onAutoPlayError: null
   });
+  useMediaTag({
+    id: timelineId,
+    isPostmounting: Boolean(sequenceContext?.postmounting),
+    isPremounting: Boolean(sequenceContext?.premounting),
+    mediaRef: audioRef,
+    mediaType: "audio",
+    onAutoPlayError: null
+  });
   useVolume({
     logLevel,
     mediaRef: audioRef,
@@ -4331,7 +4341,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
   }, [audioRef]);
   const currentOnDurationCallback = useRef11(onDuration);
   currentOnDurationCallback.current = onDuration;
-  useEffect13(() => {
+  useEffect14(() => {
     const { current } = audioRef;
     if (!current) {
       return;
@@ -4380,8 +4390,8 @@ Check that all your Remotion packages are on the same version. If your dependenc
   const absoluteFrame = useTimelinePosition();
   const volumePropFrame = useFrameForVolumeProp(loopVolumeCurveBehavior ?? "repeat");
   const frame = useCurrentFrame();
-  const sequenceContext = useContext24(SequenceContext);
-  const { registerRenderAsset, unregisterRenderAsset } = useContext24(RenderAssetManager);
+  const sequenceContext = useContext25(SequenceContext);
+  const { registerRenderAsset, unregisterRenderAsset } = useContext25(RenderAssetManager);
   const { delayRender: delayRender2, continueRender: continueRender2 } = useDelayRender();
   const id = useMemo21(() => `audio-${random(props.src ?? "")}-${sequenceContext?.relativeFrom}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.durationInFrames}`, [
     props.src,
@@ -4398,7 +4408,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
   useImperativeHandle6(ref, () => {
     return audioRef.current;
   }, []);
-  useEffect14(() => {
+  useEffect15(() => {
     if (!props.src) {
       throw new Error("No src passed");
     }
@@ -4419,7 +4429,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
       volume,
       mediaFrame: frame,
       playbackRate: props.playbackRate ?? 1,
-      toneFrequency: toneFrequency ?? null,
+      toneFrequency: toneFrequency ?? 1,
       audioStartFrame: Math.max(0, -(sequenceContext?.relativeFrom ?? 0)),
       audioStreamIndex: audioStreamIndex ?? 0
     });
@@ -4488,7 +4498,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
     onError: onNativeError
   });
 }, AudioForRendering, AudioRefForwardingFunction = (props, ref) => {
-  const audioContext = useContext25(SharedAudioContext);
+  const audioContext = useContext26(SharedAudioContext);
   const {
     startFrom,
     endAt,
@@ -4504,7 +4514,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
   const { loop, ...propsOtherThanLoop } = props;
   const { fps } = useVideoConfig();
   const environment = useRemotionEnvironment();
-  const { durations, setDurations } = useContext25(DurationsContext);
+  const { durations, setDurations } = useContext26(DurationsContext);
   if (typeof props.src !== "string") {
     throw new TypeError(`The \`<Audio>\` tag requires a string for \`src\`, but got ${JSON.stringify(props.src)} instead.`);
   }
@@ -4546,10 +4556,10 @@ Check that all your Remotion packages are on the same version. If your dependenc
     return /* @__PURE__ */ jsx19(Loop, {
       layout: "none",
       durationInFrames: calculateLoopDuration({
-        endAt: trimAfterValue ?? endAt,
-        mediaDuration: duration,
+        trimAfter: trimAfterValue,
+        mediaDurationInFrames: duration,
         playbackRate: props.playbackRate ?? 1,
-        startFrom: trimBeforeValue ?? startFrom
+        trimBefore: trimBeforeValue
       }),
       children: /* @__PURE__ */ jsx19(Audio, {
         ...propsOtherThanLoop,
@@ -4573,7 +4583,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
       })
     });
   }
-  validateMediaProps(props, "Audio");
+  validateMediaProps({ playbackRate: props.playbackRate, volume: props.volume }, "Audio");
   if (environment.isRendering) {
     return /* @__PURE__ */ jsx19(AudioForRendering, {
       onDuration,
@@ -4702,7 +4712,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
   }
 }, Fallback = () => {
   const { continueRender: continueRender2, delayRender: delayRender2 } = useDelayRender();
-  useEffect16(() => {
+  useEffect17(() => {
     const fallback = delayRender2("Waiting for Root component to unsuspend");
     return () => continueRender2(fallback);
   }, [continueRender2, delayRender2]);
@@ -4717,7 +4727,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
   schema,
   ...compProps
 }) => {
-  const compManager = useContext27(CompositionSetters);
+  const compManager = useContext28(CompositionSetters);
   const { registerComposition, unregisterComposition } = compManager;
   const video = useVideo();
   const lazy = useLazyComponent({
@@ -4728,15 +4738,18 @@ Check that all your Remotion packages are on the same version. If your dependenc
   const nonce = useNonce();
   const isPlayer = useIsPlayer();
   const environment = useRemotionEnvironment();
-  const canUseComposition = useContext27(CanUseRemotionHooks);
+  const canUseComposition = useContext28(CanUseRemotionHooks);
+  if (typeof window !== "undefined") {
+    window.remotion_seenCompositionIds = Array.from(new Set([...window.remotion_seenCompositionIds ?? [], id]));
+  }
   if (canUseComposition) {
     if (isPlayer) {
       throw new Error("<Composition> was mounted inside the `component` that was passed to the <Player>. See https://remotion.dev/docs/wrong-composition-mount for help.");
     }
     throw new Error("<Composition> mounted inside another composition. See https://remotion.dev/docs/wrong-composition-mount for help.");
   }
-  const { folderName, parentName } = useContext27(FolderContext);
-  useEffect16(() => {
+  const { folderName, parentName } = useContext28(FolderContext);
+  useEffect17(() => {
     if (!id) {
       throw new Error("No id for composition passed.");
     }
@@ -4775,7 +4788,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
     registerComposition,
     unregisterComposition
   ]);
-  useEffect16(() => {
+  useEffect17(() => {
     window.dispatchEvent(new CustomEvent(PROPS_UPDATED_EXTERNALLY, {
       detail: {
         resetUnsaved: id
@@ -4813,7 +4826,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
   }
   return null;
 }, Composition = (props2) => {
-  const { onlyRenderComposition } = useContext27(CompositionSetters);
+  const { onlyRenderComposition } = useContext28(CompositionSetters);
   if (onlyRenderComposition && onlyRenderComposition !== props2.id) {
     return null;
   }
@@ -4864,7 +4877,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
   const imageRef = useRef13(null);
   const errors = useRef13({});
   const { delayPlayback } = useBufferState();
-  const sequenceContext = useContext28(SequenceContext);
+  const sequenceContext = useContext29(SequenceContext);
   if (!src) {
     throw new Error('No "src" prop was passed to <Img>.');
   }
@@ -5235,7 +5248,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
       }
     };
   }, []);
-  useEffect17(() => {
+  useEffect18(() => {
     if (typeof __webpack_module__ !== "undefined") {
       if (__webpack_module__.hot) {
         __webpack_module__.hot.addStatusHandler((status) => {
@@ -5318,11 +5331,218 @@ Check that all your Remotion packages are on the same version. If your dependenc
     return ratio;
   }
   return Number(previewSize);
+}, 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)}`;
+}, 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 = useContext30(SequenceContext);
+  const mediaStartsAt = useMediaStartsAt();
+  const { registerRenderAsset, unregisterRenderAsset } = useContext30(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);
+  useEffect19(() => {
+    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
+  });
 }, useEmitVideoFrame = ({
   ref,
   onVideoFrame
 }) => {
-  useEffect18(() => {
+  useEffect20(() => {
     const { current } = ref;
     if (!current) {
       return;
@@ -5344,12 +5564,12 @@ Check that all your Remotion packages are on the same version. If your dependenc
     };
   }, [onVideoFrame, ref]);
 }, VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
-  const context = useContext29(SharedAudioContext);
+  const context = useContext31(SharedAudioContext);
   if (!context) {
     throw new Error("SharedAudioContext not found");
   }
   const videoRef = useRef16(null);
-  const sharedSource = useMemo26(() => {
+  const sharedSource = useMemo27(() => {
     if (!context.audioContext) {
       return null;
     }
@@ -5392,11 +5612,11 @@ Check that all your Remotion packages are on the same version. If your dependenc
   }
   const volumePropFrame = useFrameForVolumeProp(loopVolumeCurveBehavior ?? "repeat");
   const { fps, durationInFrames } = useVideoConfig();
-  const parentSequence = useContext29(SequenceContext);
-  const { hidden } = useContext29(SequenceVisibilityToggleContext);
+  const parentSequence = useContext31(SequenceContext);
+  const { hidden } = useContext31(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.");
@@ -5410,7 +5630,6 @@ Check that all your Remotion packages are on the same version. If your dependenc
   });
   warnAboutTooHighVolume(userPreferredVolume);
   useMediaInTimeline({
-    mediaRef: videoRef,
     volume,
     mediaVolume,
     mediaType: "video",
@@ -5420,11 +5639,8 @@ Check that all your Remotion packages are on the same version. If your dependenc
     id: timelineId,
     stack: _remotionInternalStack,
     showInTimeline,
-    premountDisplay: null,
-    postmountDisplay: null,
-    onAutoPlayError: onAutoPlayError ?? null,
-    isPremounting: Boolean(parentSequence?.premounting),
-    isPostmounting: Boolean(parentSequence?.postmounting)
+    premountDisplay: parentSequence?.premountDisplay ?? null,
+    postmountDisplay: parentSequence?.postmountDisplay ?? null
   });
   useMediaPlayback({
     mediaRef: videoRef,
@@ -5438,6 +5654,14 @@ Check that all your Remotion packages are on the same version. If your dependenc
     pauseWhenBuffering,
     onAutoPlayError: onAutoPlayError ?? null
   });
+  useMediaTag({
+    id: timelineId,
+    isPostmounting: Boolean(parentSequence?.postmounting),
+    isPremounting: Boolean(parentSequence?.premounting),
+    mediaRef: videoRef,
+    mediaType: "video",
+    onAutoPlayError: onAutoPlayError ?? null
+  });
   useVolume({
     logLevel,
     mediaRef: videoRef,
@@ -5457,13 +5681,13 @@ Check that all your Remotion packages are on the same version. If your dependenc
   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(() => {
+  useEffect21(() => {
     const { current } = videoRef;
     if (!current) {
       return;
@@ -5494,7 +5718,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
   const currentOnDurationCallback = useRef16(onDuration);
   currentOnDurationCallback.current = onDuration;
   useEmitVideoFrame({ ref: videoRef, onVideoFrame });
-  useEffect19(() => {
+  useEffect21(() => {
     const { current } = videoRef;
     if (!current) {
       return;
@@ -5511,7 +5735,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
       current.removeEventListener("loadedmetadata", onLoadedMetadata);
     };
   }, [src]);
-  useEffect19(() => {
+  useEffect21(() => {
     const { current } = videoRef;
     if (!current) {
       return;
@@ -5522,7 +5746,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
       current.preload = "auto";
     }
   }, []);
-  const actualStyle = useMemo26(() => {
+  const actualStyle = useMemo27(() => {
     return {
       ...style,
       opacity: isSequenceHidden ? 0 : style?.opacity ?? 1
@@ -5532,7 +5756,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
     crossOrigin,
     requestsVideoFrame: Boolean(onVideoFrame)
   });
-  return /* @__PURE__ */ jsx27("video", {
+  return /* @__PURE__ */ jsx28("video", {
     ref: videoRef,
     muted: muted || mediaMuted || isSequenceHidden || userPreferredVolume <= 0,
     playsInline: true,
@@ -5543,31 +5767,181 @@ Check that all your Remotion packages are on the same version. If your dependenc
     crossOrigin: crossOriginValue,
     ...nativeProps
   });
-}, VideoForPreview, WATCH_REMOTION_STATIC_FILES = "remotion_staticFilesChanged", RemotionContextProvider = (props2) => {
+}, VideoForPreview, 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.`);
+  }
+  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
+  });
+}, 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
+  });
+}, WATCH_REMOTION_STATIC_FILES = "remotion_staticFilesChanged", 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
                         })
@@ -5606,36 +5980,36 @@ Check that all your Remotion packages are on the same version. If your dependenc
     throw new RangeError(`Cannot use frame ${frame}: Duration of composition is ${durationInFrames}, therefore the highest frame that can be rendered is ${durationInFrames - 1}`);
   }
 }, 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);
     return flatChildren;
   }, []);
 }, IsInsideSeriesContext, IsInsideSeriesContainer = ({ children }) => {
-  return /* @__PURE__ */ jsx29(IsInsideSeriesContext.Provider, {
+  return /* @__PURE__ */ jsx31(IsInsideSeriesContext.Provider, {
     value: true,
     children
   });
 }, IsNotInsideSeriesProvider = ({ children }) => {
-  return /* @__PURE__ */ jsx29(IsInsideSeriesContext.Provider, {
+  return /* @__PURE__ */ jsx31(IsInsideSeriesContext.Provider, {
     value: false,
     children
   });
 }, useRequireToBeInsideSeries = () => {
-  const isInsideSeries = React30.useContext(IsInsideSeriesContext);
+  const isInsideSeries = React322.useContext(IsInsideSeriesContext);
   if (!isInsideSeries) {
     throw new Error("This component must be inside a <Series /> component.");
   }
 }, SeriesSequenceRefForwardingFunction = ({ children }, _ref) => {
   useRequireToBeInsideSeries();
-  return /* @__PURE__ */ jsx30(IsNotInsideSeriesProvider, {
+  return /* @__PURE__ */ jsx322(IsNotInsideSeriesProvider, {
     children
   });
 }, SeriesSequence, Series = (props2) => {
-  const childrenValue = useMemo28(() => {
+  const childrenValue = useMemo29(() => {
     let startFrame = 0;
     const flattenedChildren = flattenChildren(props2.children);
     return Children.map(flattenedChildren, (child, i) => {
@@ -5679,7 +6053,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
       }
       const currentStartFrame = startFrame + offset;
       startFrame += durationInFramesProp + offset;
-      return /* @__PURE__ */ jsx30(Sequence, {
+      return /* @__PURE__ */ jsx322(Sequence, {
         name: name || "<Series.Sequence>",
         from: currentStartFrame,
         durationInFrames: durationInFramesProp,
@@ -5690,14 +6064,14 @@ Check that all your Remotion packages are on the same version. If your dependenc
     });
   }, [props2.children]);
   if (ENABLE_V5_BREAKING_CHANGES) {
-    return /* @__PURE__ */ jsx30(IsInsideSeriesContainer, {
-      children: /* @__PURE__ */ jsx30(Sequence, {
+    return /* @__PURE__ */ jsx322(IsInsideSeriesContainer, {
+      children: /* @__PURE__ */ jsx322(Sequence, {
         ...props2,
         children: childrenValue
       })
     });
   }
-  return /* @__PURE__ */ jsx30(IsInsideSeriesContainer, {
+  return /* @__PURE__ */ jsx322(IsInsideSeriesContainer, {
     children: childrenValue
   });
 }, validateSpringDuration = (dur) => {
@@ -5917,13 +6291,13 @@ Check that all your Remotion packages are on the same version. If your dependenc
   const volumePropsFrame = useFrameForVolumeProp(loopVolumeCurveBehavior ?? "repeat");
   const videoConfig = useUnsafeVideoConfig();
   const videoRef = useRef17(null);
-  const sequenceContext = useContext31(SequenceContext);
+  const sequenceContext = useContext32(SequenceContext);
   const mediaStartsAt = useMediaStartsAt();
   const environment = useRemotionEnvironment();
   const logLevel = useLogLevel();
   const mountTime = useMountTime();
   const { delayRender: delayRender2, continueRender: continueRender2 } = useDelayRender();
-  const { registerRenderAsset, unregisterRenderAsset } = useContext31(RenderAssetManager);
+  const { registerRenderAsset, unregisterRenderAsset } = useContext32(RenderAssetManager);
   const id = useMemo30(() => `video-${random(props2.src ?? "")}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.relativeFrom}-${sequenceContext?.durationInFrames}`, [
     props2.src,
     sequenceContext?.cumulatedFrom,
@@ -5939,7 +6313,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
     mediaVolume: 1
   });
   warnAboutTooHighVolume(volume);
-  useEffect21(() => {
+  useEffect222(() => {
     if (!props2.src) {
       throw new Error("No src passed");
     }
@@ -5960,7 +6334,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
       volume,
       mediaFrame: frame,
       playbackRate: playbackRate ?? 1,
-      toneFrequency: toneFrequency ?? null,
+      toneFrequency: toneFrequency ?? 1,
       audioStartFrame: Math.max(0, -(sequenceContext?.relativeFrom ?? 0)),
       audioStreamIndex: audioStreamIndex ?? 0
     });
@@ -5982,7 +6356,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
   useImperativeHandle10(ref, () => {
     return videoRef.current;
   }, []);
-  useEffect21(() => {
+  useEffect222(() => {
     if (!window.remotion_videoEnabled) {
       return;
     }
@@ -6122,7 +6496,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
   const { loop, ...propsOtherThanLoop } = props2;
   const { fps } = useVideoConfig();
   const environment = useRemotionEnvironment();
-  const { durations, setDurations } = useContext32(DurationsContext);
+  const { durations, setDurations } = useContext33(DurationsContext);
   if (typeof ref === "string") {
     throw new Error("string refs are not supported");
   }
@@ -6153,10 +6527,10 @@ Check that all your Remotion packages are on the same version. If your dependenc
     const mediaDuration = durationFetched * fps;
     return /* @__PURE__ */ jsx34(Loop, {
       durationInFrames: calculateLoopDuration({
-        endAt: trimAfterValue ?? undefined,
-        mediaDuration,
+        trimAfter: trimAfterValue,
+        mediaDurationInFrames: mediaDuration,
         playbackRate: props2.playbackRate ?? 1,
-        startFrom: trimBeforeValue ?? undefined
+        trimBefore: trimBeforeValue
       }),
       layout: "none",
       name,
@@ -6181,7 +6555,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
       })
     });
   }
-  validateMediaProps(props2, "Video");
+  validateMediaProps({ playbackRate: props2.playbackRate, volume: props2.volume }, "Video");
   if (environment.isRendering) {
     return /* @__PURE__ */ jsx34(VideoForRendering, {
       onDuration,
@@ -6545,6 +6919,7 @@ var init_esm = __esm(() => {
     size: { size: "auto", translation: { x: 0, y: 0 } }
   });
   VideoForPreview = forwardRef9(VideoForDevelopmentRefForwardingFunction);
+  addSequenceStackTraces(OffthreadVideo);
   compositionSelectorRef = createRef3();
   Internals = {
     useUnsafeVideoConfig,
@@ -6566,6 +6941,7 @@ var init_esm = __esm(() => {
     getRoot,
     useMediaVolumeState,
     useMediaMutedState,
+    useMediaInTimeline,
     useLazyComponent,
     truthy,
     SequenceContext,
@@ -6579,6 +6955,7 @@ var init_esm = __esm(() => {
     SharedAudioContext,
     SharedAudioContextProvider,
     invalidCompositionErrorMessage,
+    calculateLoopDuration,
     isCompositionIdValid,
     getPreviewDomElement,
     compositionsRef,
@@ -6625,7 +7002,8 @@ var init_esm = __esm(() => {
     RemotionEnvironmentContext,
     warnAboutTooHighVolume,
     AudioForPreview,
-    OBJECTFIT_CONTAIN_CLASS_NAME
+    OBJECTFIT_CONTAIN_CLASS_NAME,
+    InnerOffthreadVideo
   };
   PERCENTAGE = NUMBER + "%";
   IsInsideSeriesContext = createContext19(false);
@@ -8379,7 +8757,7 @@ var PricingBulletPoint = ({ text, checked, children }) => {
         style: greyCircle
       }),
       /* @__PURE__ */ jsxs3("div", {
-        className: "fontbrand text-lg	",
+        className: "fontbrand text-lg\t",
         children: [
           text,
           children
@@ -11823,13 +12201,13 @@ import { jsx as jsx35, jsxs as jsxs10 } from "react/jsx-runtime";
 import { jsx as jsx210, jsxs as jsxs23, Fragment } from "react/jsx-runtime";
 import React6 from "react";
 import { useContext as useContext210, useEffect as useEffect23, useState as useState20 } from "react";
-import { useContext as useContext33, useEffect as useEffect24 } from "react";
+import { useContext as useContext34, useEffect as useEffect24 } from "react";
 import { jsx as jsx36 } from "react/jsx-runtime";
 import { useCallback as useCallback18, useRef as useRef18 } from "react";
 import { useEffect as useEffect32, useState as useState23 } from "react";
 import { useContext as useContext42, useEffect as useEffect62, useRef as useRef42 } from "react";
 import { useEffect as useEffect42 } from "react";
-import { useCallback as useCallback23, useContext as useContext34, useMemo as useMemo31, useRef as useRef22, useState as useState32 } from "react";
+import { useCallback as useCallback23, useContext as useContext35, useMemo as useMemo31, useRef as useRef22, useState as useState32 } from "react";
 import { useEffect as useEffect52, useRef as useRef32 } from "react";
 import { useCallback as useCallback32, useEffect as useEffect72, useMemo as useMemo210, useState as useState42 } from "react";
 import {
@@ -12465,7 +12843,7 @@ var getAbsoluteSrc2 = (relativeSrc) => {
   }
   return new URL(relativeSrc, window.origin).href;
 };
-var getOffthreadVideoSource = ({
+var getOffthreadVideoSource2 = ({
   src,
   transparent,
   currentTime,
@@ -12489,7 +12867,7 @@ var NoReactInternals = {
   DELAY_RENDER_RETRY_TOKEN: DELAY_RENDER_RETRY_TOKEN2,
   DELAY_RENDER_CLEAR_TOKEN: DELAY_RENDER_CLEAR_TOKEN2,
   DELAY_RENDER_ATTEMPT_TOKEN: DELAY_RENDER_RETRIES_LEFT2,
-  getOffthreadVideoSource,
+  getOffthreadVideoSource: getOffthreadVideoSource2,
   getExpectedMediaFrameUncorrected: getExpectedMediaFrameUncorrected2,
   ENABLE_V5_BREAKING_CHANGES: ENABLE_V5_BREAKING_CHANGES2,
   MIN_NODE_VERSION: ENABLE_V5_BREAKING_CHANGES2 ? 18 : 16,
@@ -12956,7 +13334,7 @@ class ThumbnailEmitter {
   };
 }
 var useBufferStateEmitter = (emitter) => {
-  const bufferManager = useContext33(Internals.BufferingContextReact);
+  const bufferManager = useContext34(Internals.BufferingContextReact);
   if (!bufferManager) {
     throw new Error("BufferingContextReact not found");
   }
@@ -13039,20 +13417,20 @@ var usePlayer = () => {
   const playStart = useRef22(frame);
   const setFrame = Internals.Timeline.useTimelineSetFrame();
   const setTimelinePosition = Internals.Timeline.useTimelineSetFrame();
-  const audioContext = useContext34(Internals.SharedAudioContext);
-  const { audioAndVideoTags } = useContext34(Internals.Timeline.TimelineContext);
+  const audioContext = useContext35(Internals.SharedAudioContext);
+  const { audioAndVideoTags } = useContext35(Internals.Timeline.TimelineContext);
   const frameRef = useRef22(frame);
   frameRef.current = frame;
   const video = Internals.useVideo();
   const config = Internals.useUnsafeVideoConfig();
-  const emitter = useContext34(PlayerEventEmitterContext);
+  const emitter = useContext35(PlayerEventEmitterContext);
   const lastFrame = (config?.durationInFrames ?? 1) - 1;
   const isLastFrame = frame === lastFrame;
   const isFirstFrame = frame === 0;
   if (!emitter) {
     throw new TypeError("Expected Player event emitter context");
   }
-  const bufferingContext = useContext34(Internals.BufferingContextReact);
+  const bufferingContext = useContext35(Internals.BufferingContextReact);
   if (!bufferingContext) {
     throw new Error("Missing the buffering context. Most likely you have a Remotion version mismatch.");
   }
@@ -16628,7 +17006,7 @@ var UNDERLAY_RED = curriedTransparentize$1(0.9, RED);
 var BLUE_TEXT = curriedDarken$1(0.3, "#42e9f5");
 
 // src/components/homepage/layout/use-color-mode.tsx
-import React11, { useContext as useContext35, useMemo as useMemo33 } from "react";
+import React11, { useContext as useContext36, useMemo as useMemo33 } from "react";
 import { jsx as jsx37 } from "react/jsx-runtime";
 var Context = React11.createContext(undefined);
 var ColorModeProvider = ({
@@ -16645,7 +17023,7 @@ var ColorModeProvider = ({
   });
 };
 function useColorMode() {
-  const context = useContext35(Context);
+  const context = useContext36(Context);
   if (context === null || context === undefined) {
     throw new Error("ColorModeProvider");
   }
@@ -17847,7 +18225,7 @@ var DoneCheckmark = () => {
 };
 
 // ../shapes/dist/esm/index.mjs
-import React34, { useMemo as useMemo37 } from "react";
+import React29, { useMemo as useMemo37 } from "react";
 import { version } from "react-dom";
 import { jsx as jsx60, jsxs as jsxs21 } from "react/jsx-runtime";
 import { jsx as jsx212 } from "react/jsx-runtime";