@remotion/promo-pages 4.0.356 → 4.0.357

package/.turbo/turbo-make.log

@@ -1,8 +1,8 @@
 
 
-> @remotion/promo-pages@4.0.356 make /Users/jonathanburger/remotion/packages/promo-pages
+> @remotion/promo-pages@4.0.357 make /Users/jonathanburger/remotion/packages/promo-pages
 > bun --env-file=../.env.bundle bundle.ts
 
 ≈ tailwindcss v4.1.1
 
-Done in 63ms
+Done in 25ms

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,
@@ -196,8 +197,8 @@ import React26, { createContext as createContext18 } from "react";
 import { useCallback as useCallback16 } from "react";
 import {
   useCallback as useCallback15,
-  useContext as useContext29,
-  useEffect as useEffect18,
+  useContext as useContext30,
+  useEffect as useEffect19,
   useLayoutEffect as useLayoutEffect9,
   useMemo as useMemo26,
   useState as useState18
@@ -205,14 +206,14 @@ import {
 import { jsx as jsx27 } from "react/jsx-runtime";
 import {
   forwardRef as forwardRef9,
-  useContext as useContext30,
-  useEffect as useEffect20,
+  useContext as useContext31,
+  useEffect as useEffect21,
   useImperativeHandle as useImperativeHandle9,
   useMemo as useMemo27,
   useRef as useRef16,
   useState as useState19
 } from "react";
-import { useEffect as useEffect19 } 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";
@@ -223,11 +224,11 @@ import React322, { createContext as createContext19 } from "react";
 import { jsx as jsx31 } from "react/jsx-runtime";
 import { jsx as jsx322 } from "react/jsx-runtime";
 import React34 from "react";
-import { forwardRef as forwardRef12, useCallback as useCallback17, useContext as useContext32 } 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,
@@ -739,7 +740,7 @@ var __defProp2, __export2 = (target, all) => {
   });
 }, useIsPlayer = () => {
   return useContext(IsPlayerContext);
-}, VERSION = "4.0.356", checkMultipleRemotionVersions = () => {
+}, VERSION = "4.0.357", checkMultipleRemotionVersions = () => {
   if (typeof globalThis === "undefined") {
     return;
   }
@@ -2360,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);
@@ -3333,7 +3334,6 @@ Check that all your Remotion packages are on the same version. If your dependenc
 }, useMediaInTimeline = ({
   volume,
   mediaVolume,
-  mediaRef,
   src,
   mediaType,
   playbackRate,
@@ -3342,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(() => {
@@ -3379,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");
     }
@@ -3427,7 +3418,6 @@ Check that all your Remotion packages are on the same version. If your dependenc
     volumes,
     doesVolumeChange,
     nonce,
-    mediaRef,
     mediaType,
     startsAt,
     playbackRate,
@@ -3438,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([]);
@@ -4185,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]);
@@ -4241,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({
@@ -4285,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");
   }
@@ -4297,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,
@@ -4306,10 +4307,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
     stack: _remotionInternalStack,
     showInTimeline,
     premountDisplay: sequenceContext?.premountDisplay ?? null,
-    postmountDisplay: sequenceContext?.postmountDisplay ?? null,
-    onAutoPlayError: null,
-    isPremounting: Boolean(sequenceContext?.premounting),
-    isPostmounting: Boolean(sequenceContext?.postmounting)
+    postmountDisplay: sequenceContext?.postmountDisplay ?? null
   });
   useMediaPlayback({
     mediaRef: audioRef,
@@ -4323,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,
@@ -4335,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;
@@ -4384,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,
@@ -4402,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");
     }
@@ -4492,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,
@@ -4508,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.`);
   }
@@ -4550,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,
-        mediaDuration: duration,
+        trimAfter: trimAfterValue,
+        mediaDurationInFrames: duration,
         playbackRate: props.playbackRate ?? 1,
-        startFrom: trimBeforeValue
+        trimBefore: trimBeforeValue
       }),
       children: /* @__PURE__ */ jsx19(Audio, {
         ...propsOtherThanLoop,
@@ -4706,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]);
@@ -4721,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({
@@ -4732,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.");
     }
@@ -4779,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
@@ -4817,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;
   }
@@ -4868,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>.');
   }
@@ -5239,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) => {
@@ -5352,9 +5361,9 @@ Check that all your Remotion packages are on the same version. If your dependenc
   const frame = useCurrentFrame();
   const volumePropsFrame = useFrameForVolumeProp(loopVolumeCurveBehavior);
   const videoConfig = useUnsafeVideoConfig();
-  const sequenceContext = useContext29(SequenceContext);
+  const sequenceContext = useContext30(SequenceContext);
   const mediaStartsAt = useMediaStartsAt();
-  const { registerRenderAsset, unregisterRenderAsset } = useContext29(RenderAssetManager);
+  const { registerRenderAsset, unregisterRenderAsset } = useContext30(RenderAssetManager);
   if (!src) {
     throw new TypeError("No `src` was passed to <OffthreadVideo>.");
   }
@@ -5373,7 +5382,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
     mediaVolume: 1
   });
   warnAboutTooHighVolume(volume);
-  useEffect18(() => {
+  useEffect19(() => {
     if (!src) {
       throw new Error("No src passed");
     }
@@ -5533,7 +5542,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
   ref,
   onVideoFrame
 }) => {
-  useEffect19(() => {
+  useEffect20(() => {
     const { current } = ref;
     if (!current) {
       return;
@@ -5555,7 +5564,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
     };
   }, [onVideoFrame, ref]);
 }, VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
-  const context = useContext30(SharedAudioContext);
+  const context = useContext31(SharedAudioContext);
   if (!context) {
     throw new Error("SharedAudioContext not found");
   }
@@ -5603,8 +5612,8 @@ 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 = useContext30(SequenceContext);
-  const { hidden } = useContext30(SequenceVisibilityToggleContext);
+  const parentSequence = useContext31(SequenceContext);
+  const { hidden } = useContext31(SequenceVisibilityToggleContext);
   const logLevel = useLogLevel();
   const mountTime = useMountTime();
   const [timelineId] = useState19(() => String(Math.random()));
@@ -5621,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",
@@ -5632,10 +5640,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
     stack: _remotionInternalStack,
     showInTimeline,
     premountDisplay: parentSequence?.premountDisplay ?? null,
-    postmountDisplay: parentSequence?.postmountDisplay ?? null,
-    onAutoPlayError: onAutoPlayError ?? null,
-    isPremounting: Boolean(parentSequence?.premounting),
-    isPostmounting: Boolean(parentSequence?.postmounting)
+    postmountDisplay: parentSequence?.postmountDisplay ?? null
   });
   useMediaPlayback({
     mediaRef: videoRef,
@@ -5649,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,
@@ -5674,7 +5687,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
     tag: "video",
     mountTime
   }));
-  useEffect20(() => {
+  useEffect21(() => {
     const { current } = videoRef;
     if (!current) {
       return;
@@ -5705,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 });
-  useEffect20(() => {
+  useEffect21(() => {
     const { current } = videoRef;
     if (!current) {
       return;
@@ -5722,7 +5735,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
       current.removeEventListener("loadedmetadata", onLoadedMetadata);
     };
   }, [src]);
-  useEffect20(() => {
+  useEffect21(() => {
     const { current } = videoRef;
     if (!current) {
       return;
@@ -6278,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,
@@ -6300,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");
     }
@@ -6343,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;
     }
@@ -6483,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");
   }
@@ -6514,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,
-        mediaDuration,
+        trimAfter: trimAfterValue,
+        mediaDurationInFrames: mediaDuration,
         playbackRate: props2.playbackRate ?? 1,
-        startFrom: trimBeforeValue
+        trimBefore: trimBeforeValue
       }),
       layout: "none",
       name,
@@ -6928,6 +6941,7 @@ var init_esm = __esm(() => {
     getRoot,
     useMediaVolumeState,
     useMediaMutedState,
+    useMediaInTimeline,
     useLazyComponent,
     truthy,
     SequenceContext,
@@ -6941,6 +6955,7 @@ var init_esm = __esm(() => {
     SharedAudioContext,
     SharedAudioContextProvider,
     invalidCompositionErrorMessage,
+    calculateLoopDuration,
     isCompositionIdValid,
     getPreviewDomElement,
     compositionsRef,
@@ -8742,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
@@ -12186,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 {
@@ -13319,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");
   }
@@ -13402,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.");
   }
@@ -16991,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 = ({
@@ -17008,7 +17023,7 @@ var ColorModeProvider = ({
   });
 };
 function useColorMode() {
-  const context = useContext35(Context);
+  const context = useContext36(Context);
   if (context === null || context === undefined) {
     throw new Error("ColorModeProvider");
   }

package/dist/homepage/Pricing.js

@@ -1532,7 +1532,7 @@ var PricingBulletPoint = ({ text, checked, children }) => {
         style: greyCircle
       }),
       /* @__PURE__ */ jsxs3("div", {
-        className: "fontbrand text-lg	",
+        className: "fontbrand text-lg\t",
         children: [
           text,
           children

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remotion/promo-pages",
-  "version": "4.0.356",
+  "version": "4.0.357",
   "publishConfig": {
     "access": "public"
   },
@@ -10,14 +10,14 @@
     "polished": "4.3.1",
     "zod": "3.22.3",
     "bun-plugin-tailwind": "0.0.15",
-    "@remotion/animated-emoji": "4.0.356",
-    "@remotion/lambda": "4.0.356",
-    "@remotion/shapes": "4.0.356",
-    "create-video": "4.0.356",
-    "@remotion/player": "4.0.356",
-    "@remotion/paths": "4.0.356",
-    "@remotion/lottie": "4.0.356",
-    "remotion": "4.0.356"
+    "@remotion/lottie": "4.0.357",
+    "@remotion/paths": "4.0.357",
+    "@remotion/lambda": "4.0.357",
+    "@remotion/player": "4.0.357",
+    "@remotion/shapes": "4.0.357",
+    "remotion": "4.0.357",
+    "create-video": "4.0.357",
+    "@remotion/animated-emoji": "4.0.357"
   },
   "devDependencies": {
     "@eslint/eslintrc": "3.1.0",
@@ -34,7 +34,7 @@
     "tailwind-merge": "2.5.2",
     "bun-plugin-tailwind": "0.0.13",
     "clsx": "2.1.1",
-    "@remotion/eslint-config-internal": "4.0.356"
+    "@remotion/eslint-config-internal": "4.0.357"
   },
   "repository": {
     "url": "https://github.com/remotion-dev/remotion/tree/main/packages/promo-pages"