@remotion/promo-pages 4.0.355 → 4.0.356

package/.turbo/turbo-make.log

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

package/dist/Homepage.js

@@ -193,36 +193,36 @@ 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,
+  useCallback as useCallback15,
   useContext as useContext29,
-  useEffect as useEffect19,
-  useImperativeHandle as useImperativeHandle9,
+  useEffect as useEffect18,
+  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,
+  forwardRef as forwardRef9,
   useContext as useContext30,
   useEffect as useEffect20,
-  useLayoutEffect as useLayoutEffect9,
-  useMemo as useMemo29,
+  useImperativeHandle as useImperativeHandle9,
+  useMemo as useMemo27,
+  useRef as useRef16,
   useState as useState19
 } from "react";
+import { useEffect as useEffect19 } 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 React34 from "react";
 import { forwardRef as forwardRef12, useCallback as useCallback17, useContext as useContext32 } from "react";
 import {
   forwardRef as forwardRef11,
@@ -439,19 +439,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 +739,7 @@ var __defProp2, __export2 = (target, all) => {
   });
 }, useIsPlayer = () => {
   return useContext(IsPlayerContext);
-}, VERSION = "4.0.355", checkMultipleRemotionVersions = () => {
+}, VERSION = "4.0.356", checkMultipleRemotionVersions = () => {
   if (typeof globalThis === "undefined") {
     return;
   }
@@ -1720,7 +1720,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 +1733,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 ?? "";
@@ -4301,8 +4305,8 @@ Check that all your Remotion packages are on the same version. If your dependenc
     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)
@@ -4419,7 +4423,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
     });
@@ -4546,10 +4550,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,
+        endAt: trimAfterValue,
         mediaDuration: duration,
         playbackRate: props.playbackRate ?? 1,
-        startFrom: trimBeforeValue ?? startFrom
+        startFrom: trimBeforeValue
       }),
       children: /* @__PURE__ */ jsx19(Audio, {
         ...propsOtherThanLoop,
@@ -4573,7 +4577,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,
@@ -5318,11 +5322,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 = 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
+  });
 }, useEmitVideoFrame = ({
   ref,
   onVideoFrame
 }) => {
-  useEffect18(() => {
+  useEffect19(() => {
     const { current } = ref;
     if (!current) {
       return;
@@ -5344,12 +5555,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 = 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;
     }
@@ -5392,11 +5603,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 = 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.");
@@ -5420,8 +5631,8 @@ Check that all your Remotion packages are on the same version. If your dependenc
     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)
@@ -5457,13 +5668,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(() => {
+  useEffect20(() => {
     const { current } = videoRef;
     if (!current) {
       return;
@@ -5494,7 +5705,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(() => {
+  useEffect20(() => {
     const { current } = videoRef;
     if (!current) {
       return;
@@ -5511,7 +5722,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
       current.removeEventListener("loadedmetadata", onLoadedMetadata);
     };
   }, [src]);
-  useEffect19(() => {
+  useEffect20(() => {
     const { current } = videoRef;
     if (!current) {
       return;
@@ -5522,7 +5733,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 +5743,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 +5754,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 +5967,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 +6040,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 +6051,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) => {
@@ -5960,7 +6321,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
     });
@@ -6153,10 +6514,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,
+        endAt: trimAfterValue,
         mediaDuration,
         playbackRate: props2.playbackRate ?? 1,
-        startFrom: trimBeforeValue ?? undefined
+        startFrom: trimBeforeValue
       }),
       layout: "none",
       name,
@@ -6181,7 +6542,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 +6906,7 @@ var init_esm = __esm(() => {
     size: { size: "auto", translation: { x: 0, y: 0 } }
   });
   VideoForPreview = forwardRef9(VideoForDevelopmentRefForwardingFunction);
+  addSequenceStackTraces(OffthreadVideo);
   compositionSelectorRef = createRef3();
   Internals = {
     useUnsafeVideoConfig,
@@ -6625,7 +6987,8 @@ var init_esm = __esm(() => {
     RemotionEnvironmentContext,
     warnAboutTooHighVolume,
     AudioForPreview,
-    OBJECTFIT_CONTAIN_CLASS_NAME
+    OBJECTFIT_CONTAIN_CLASS_NAME,
+    InnerOffthreadVideo
   };
   PERCENTAGE = NUMBER + "%";
   IsInsideSeriesContext = createContext19(false);
@@ -12465,7 +12828,7 @@ var getAbsoluteSrc2 = (relativeSrc) => {
   }
   return new URL(relativeSrc, window.origin).href;
 };
-var getOffthreadVideoSource = ({
+var getOffthreadVideoSource2 = ({
   src,
   transparent,
   currentTime,
@@ -12489,7 +12852,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,
@@ -17847,7 +18210,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";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remotion/promo-pages",
-  "version": "4.0.355",
+  "version": "4.0.356",
   "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.355",
-    "@remotion/lambda": "4.0.355",
-    "@remotion/lottie": "4.0.355",
-    "@remotion/player": "4.0.355",
-    "@remotion/paths": "4.0.355",
-    "remotion": "4.0.355",
-    "create-video": "4.0.355",
-    "@remotion/shapes": "4.0.355"
+    "@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"
   },
   "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.355"
+    "@remotion/eslint-config-internal": "4.0.356"
   },
   "repository": {
     "url": "https://github.com/remotion-dev/remotion/tree/main/packages/promo-pages"