@remotion/promo-pages 4.0.464 → 4.0.465

package/dist/Homepage.js

@@ -1088,8 +1088,7 @@ import {
   useContext as useContext32,
   useImperativeHandle as useImperativeHandle6,
   useLayoutEffect as useLayoutEffect10,
-  useRef as useRef21,
-  useState as useState17
+  useRef as useRef21
 } from "react";
 import { jsx as jsx26 } from "react/jsx-runtime";
 import { createRef as createRef3 } from "react";
@@ -1099,7 +1098,7 @@ import {
   useImperativeHandle as useImperativeHandle7,
   useMemo as useMemo31,
   useRef as useRef22,
-  useState as useState18
+  useState as useState17
 } from "react";
 import { jsx as jsx27 } from "react/jsx-runtime";
 import React29 from "react";
@@ -1116,7 +1115,7 @@ import {
   useEffect as useEffect16,
   useLayoutEffect as useLayoutEffect11,
   useMemo as useMemo34,
-  useState as useState19
+  useState as useState18
 } from "react";
 import { jsx as jsx30 } from "react/jsx-runtime";
 import React34, {
@@ -1126,7 +1125,7 @@ import React34, {
   useImperativeHandle as useImperativeHandle8,
   useMemo as useMemo35,
   useRef as useRef23,
-  useState as useState20,
+  useState as useState19,
   useCallback as useCallback20
 } from "react";
 import { useEffect as useEffect17 } from "react";
@@ -1188,20 +1187,70 @@ var CompositionRenderErrorContext = createContext3({
   setError: () => {},
   clearError: () => {}
 });
+var getHot = () => {
+  try {
+    if (typeof __webpack_module__ === "undefined") {
+      return null;
+    }
+    return __webpack_module__.hot ?? null;
+  } catch {
+    return null;
+  }
+};
 
 class CompositionErrorBoundary extends React2.Component {
   state = { hasError: false };
+  hmrStatusHandler = null;
   static getDerivedStateFromError() {
     return { hasError: true };
   }
   componentDidCatch(error) {
     this.props.onError(error);
+    this.subscribeToHmrReset();
   }
-  componentDidUpdate(_prevProps) {
+  componentDidMount() {
     if (!this.state.hasError) {
       this.props.onClear();
     }
   }
+  componentDidUpdate(_prevProps, prevState) {
+    if (prevState.hasError && !this.state.hasError) {
+      this.props.onClear();
+    }
+  }
+  componentWillUnmount() {
+    this.unsubscribeFromHmrReset();
+  }
+  subscribeToHmrReset() {
+    if (this.hmrStatusHandler) {
+      return;
+    }
+    const hot = getHot();
+    if (!hot) {
+      return;
+    }
+    const handler = (status) => {
+      if (status !== "idle") {
+        return;
+      }
+      this.unsubscribeFromHmrReset();
+      this.setState({ hasError: false });
+    };
+    this.hmrStatusHandler = handler;
+    hot.addStatusHandler(handler);
+  }
+  unsubscribeFromHmrReset() {
+    const handler = this.hmrStatusHandler;
+    if (!handler) {
+      return;
+    }
+    this.hmrStatusHandler = null;
+    const hot = getHot();
+    if (!hot) {
+      return;
+    }
+    hot.removeStatusHandler(handler);
+  }
   render() {
     if (this.state.hasError) {
       return null;
@@ -2224,7 +2273,7 @@ var getComponentsToAddStacksTo = () => componentsToAddStacksTo;
 var addSequenceStackTraces = (component) => {
   componentsToAddStacksTo.push(component);
 };
-var VERSION = "4.0.464";
+var VERSION = "4.0.465";
 var checkMultipleRemotionVersions = () => {
   if (typeof globalThis === "undefined") {
     return;
@@ -3269,7 +3318,7 @@ var RegularSequenceRefForwardingFunction = ({
   showInTimeline = true,
   hidden = false,
   _experimentalControls: controls,
-  _experimentalEffects,
+  _remotionInternalEffects,
   _remotionInternalLoopDisplay: loopDisplay,
   _remotionInternalStack: stack,
   _remotionInternalPremountDisplay: premountDisplay,
@@ -3351,28 +3400,49 @@ var RegularSequenceRefForwardingFunction = ({
       return;
     }
     if (isMedia) {
-      registerSequence({
-        type: isMedia.type,
-        controls: controls ?? null,
-        effects: _experimentalEffects ?? [],
-        displayName: timelineClipName,
-        doesVolumeChange: isMedia.data.doesVolumeChange,
-        duration: actualDurationInFrames,
-        from,
-        id,
-        loopDisplay,
-        nonce: nonce.get(),
-        parent: parentSequence?.id ?? null,
-        playbackRate: isMedia.data.playbackRate,
-        postmountDisplay: postmountDisplay ?? null,
-        premountDisplay: premountDisplay ?? null,
-        rootId,
-        showInTimeline,
-        src: isMedia.data.src,
-        getStack: () => stackRef.current,
-        startMediaFrom: isMedia.data.startMediaFrom,
-        volume: isMedia.data.volumes
-      });
+      if (isMedia.type === "image") {
+        registerSequence({
+          type: "image",
+          controls: controls ?? null,
+          effects: _remotionInternalEffects ?? [],
+          displayName: timelineClipName,
+          duration: actualDurationInFrames,
+          from,
+          id,
+          loopDisplay,
+          nonce: nonce.get(),
+          parent: parentSequence?.id ?? null,
+          postmountDisplay: postmountDisplay ?? null,
+          premountDisplay: premountDisplay ?? null,
+          rootId,
+          showInTimeline,
+          src: isMedia.src,
+          getStack: () => stackRef.current
+        });
+      } else {
+        registerSequence({
+          type: isMedia.type,
+          controls: controls ?? null,
+          effects: _remotionInternalEffects ?? [],
+          displayName: timelineClipName,
+          doesVolumeChange: isMedia.data.doesVolumeChange,
+          duration: actualDurationInFrames,
+          from,
+          id,
+          loopDisplay,
+          nonce: nonce.get(),
+          parent: parentSequence?.id ?? null,
+          playbackRate: isMedia.data.playbackRate,
+          postmountDisplay: postmountDisplay ?? null,
+          premountDisplay: premountDisplay ?? null,
+          rootId,
+          showInTimeline,
+          src: isMedia.data.src,
+          getStack: () => stackRef.current,
+          startMediaFrom: isMedia.data.startMediaFrom,
+          volume: isMedia.data.volumes
+        });
+      }
       return () => {
         unregisterSequence(id);
       };
@@ -3392,7 +3462,7 @@ var RegularSequenceRefForwardingFunction = ({
       premountDisplay: premountDisplay ?? null,
       postmountDisplay: postmountDisplay ?? null,
       controls: controls ?? null,
-      effects: _experimentalEffects ?? []
+      effects: _remotionInternalEffects ?? []
     });
     return () => {
       unregisterSequence(id);
@@ -3415,7 +3485,7 @@ var RegularSequenceRefForwardingFunction = ({
     postmountDisplay,
     env.isStudio,
     controls,
-    _experimentalEffects,
+    _remotionInternalEffects,
     isMedia
   ]);
   const endThreshold = Math.ceil(cumulatedFrom + from + durationInFrames - 1);
@@ -3693,6 +3763,7 @@ var runEffectChain = async ({
   if (isCancelled()) {
     return false;
   }
+  let flipWebGLSourceY = true;
   for (let runIndex = 0;runIndex < runs.length; runIndex++) {
     const run = runs[runIndex];
     const [a, b] = state.pool.getPair(run.backend);
@@ -3707,9 +3778,11 @@ var runEffectChain = async ({
         params: eff.params,
         width,
         height,
-        gpuDevice
+        gpuDevice,
+        flipSourceY: run.backend === "webgl2" ? flipWebGLSourceY : false
       });
       if (run.backend === "webgl2") {
+        flipWebGLSourceY = false;
         state.pool.assertContextNotLost(dst);
       }
       currentImage = dst;
@@ -3718,12 +3791,20 @@ var runEffectChain = async ({
     lastTarget = currentImage ?? lastTarget;
     const nextRun = runs[runIndex + 1];
     if (nextRun && nextRun.backend !== run.backend && lastTarget) {
-      const bitmap = await createImageBitmap(lastTarget);
-      if (isCancelled()) {
-        bitmap.close();
-        return false;
+      if (run.backend === "2d" && nextRun.backend === "webgl2") {
+        currentImage = lastTarget;
+        flipWebGLSourceY = true;
+      } else {
+        const bitmap = await createImageBitmap(lastTarget);
+        if (isCancelled()) {
+          bitmap.close();
+          return false;
+        }
+        currentImage = bitmap;
+        if (nextRun.backend === "webgl2") {
+          flipWebGLSourceY = false;
+        }
       }
-      currentImage = bitmap;
     }
   }
   if (!lastTarget) {
@@ -4169,7 +4250,7 @@ var AnimatedImageInner = ({
   className,
   style,
   durationInFrames,
-  _experimentalEffects: effects = [],
+  effects = [],
   _experimentalControls: controls,
   ref,
   ...sequenceProps
@@ -4194,7 +4275,7 @@ var AnimatedImageInner = ({
     durationInFrames: resolvedDuration,
     name: "<AnimatedImage>",
     _experimentalControls: controls,
-    _experimentalEffects: memoizedEffectDefinitions,
+    _remotionInternalEffects: memoizedEffectDefinitions,
     ...sequenceProps,
     children: /* @__PURE__ */ jsx13(AnimatedImageContent, {
       ...animatedImageProps,
@@ -4233,7 +4314,7 @@ var SolidInner = ({
   color,
   width,
   height,
-  _experimentalEffects: experimentalEffects = [],
+  effects = [],
   className,
   style,
   overrideId,
@@ -4242,7 +4323,7 @@ var SolidInner = ({
   const { delayRender: delayRender2, continueRender: continueRender2, cancelRender: cancelRender2 } = useDelayRender();
   const [outputCanvas, setOutputCanvas] = useState7(null);
   const memoizedEffects = useMemoizedEffects({
-    effects: experimentalEffects,
+    effects,
     overrideId: overrideId ?? null
   });
   const sourceCanvas = useMemo17(() => {
@@ -4322,7 +4403,7 @@ var SolidInner = ({
   });
 };
 var SolidOuter = forwardRef5(({
-  _experimentalEffects = [],
+  effects = [],
   _experimentalControls: controls,
   color,
   height,
@@ -4336,14 +4417,14 @@ var SolidOuter = forwardRef5(({
   showInTimeline,
   ...props
 }, ref) => {
-  const memoizedEffectDefinitions = useMemoizedEffectDefinitions(_experimentalEffects);
+  const memoizedEffectDefinitions = useMemoizedEffectDefinitions(effects);
   return /* @__PURE__ */ jsx14(Sequence, {
     layout: "none",
     from,
     hidden,
     showInTimeline,
     _experimentalControls: controls,
-    _experimentalEffects: memoizedEffectDefinitions,
+    _remotionInternalEffects: memoizedEffectDefinitions,
     durationInFrames,
     name: name ?? "<Solid>",
     ...props,
@@ -4355,7 +4436,7 @@ var SolidOuter = forwardRef5(({
       width,
       className,
       style,
-      _experimentalEffects
+      effects
     })
   });
 });
@@ -4570,7 +4651,7 @@ HtmlInCanvasContent.displayName = "HtmlInCanvasContent";
 var HtmlInCanvasInner = forwardRef6(({
   width,
   height,
-  _experimentalEffects: effects = [],
+  effects = [],
   children,
   onPaint,
   onInit,
@@ -4587,7 +4668,7 @@ var HtmlInCanvasInner = forwardRef6(({
     durationInFrames: resolvedDuration,
     name: name ?? "<HtmlInCanvas>",
     _experimentalControls: controls,
-    _experimentalEffects: memoizedEffectDefinitions,
+    _remotionInternalEffects: memoizedEffectDefinitions,
     layout: "none",
     ...sequenceProps,
     children: /* @__PURE__ */ jsx15(HtmlInCanvasContent, {
@@ -6109,85 +6190,6 @@ var useBasicMediaInTimeline = ({
   ]);
   return memoizedResult;
 };
-var useImageInTimeline = ({
-  src,
-  displayName,
-  id,
-  getStack,
-  showInTimeline,
-  premountDisplay,
-  postmountDisplay,
-  loopDisplay,
-  controls
-}) => {
-  const parentSequence = useContext24(SequenceContext);
-  const { registerSequence, unregisterSequence } = useContext24(SequenceManager);
-  const { durationInFrames } = useVideoConfig();
-  const mediaStartsAt = useMediaStartsAt();
-  const { duration, nonce, rootId, finalDisplayName } = useBasicMediaInTimeline({
-    volume: undefined,
-    mediaVolume: 0,
-    mediaType: "image",
-    src,
-    displayName,
-    trimAfter: undefined,
-    trimBefore: undefined,
-    playbackRate: 1,
-    sequenceDurationInFrames: durationInFrames,
-    mediaStartsAt,
-    loop: false
-  });
-  const { isStudio } = useRemotionEnvironment();
-  useEffect8(() => {
-    if (!src) {
-      throw new Error("No src passed");
-    }
-    if (!isStudio && window.process?.env?.NODE_ENV !== "test") {
-      return;
-    }
-    if (!showInTimeline) {
-      return;
-    }
-    registerSequence({
-      type: "image",
-      src,
-      id,
-      duration,
-      from: 0,
-      parent: parentSequence?.id ?? null,
-      displayName: finalDisplayName,
-      rootId,
-      showInTimeline: true,
-      nonce: nonce.get(),
-      loopDisplay,
-      getStack,
-      premountDisplay,
-      postmountDisplay,
-      controls,
-      effects: []
-    });
-    return () => {
-      unregisterSequence(id);
-    };
-  }, [
-    duration,
-    id,
-    parentSequence,
-    src,
-    registerSequence,
-    unregisterSequence,
-    nonce,
-    getStack,
-    showInTimeline,
-    premountDisplay,
-    postmountDisplay,
-    isStudio,
-    loopDisplay,
-    rootId,
-    finalDisplayName,
-    controls
-  ]);
-};
 var useMediaInTimeline = ({
   volume,
   mediaVolume,
@@ -7874,34 +7876,28 @@ var ImgInner = ({
   stack,
   showInTimeline,
   src,
+  from,
+  durationInFrames,
   _experimentalControls: controls,
   ...props2
 }) => {
-  const sequenceContext = useContext32(SequenceContext);
-  const [timelineId] = useState17(() => String(Math.random()));
   if (!src) {
     throw new Error('No "src" prop was passed to <Img>.');
   }
-  const stackRef = useRef21(null);
-  stackRef.current = stack ?? null;
-  const getStack = useCallback17(() => stackRef.current, []);
-  useImageInTimeline({
-    src,
-    displayName: name ?? null,
-    id: timelineId,
-    getStack,
+  return /* @__PURE__ */ jsx26(Sequence, {
+    layout: "none",
+    from: from ?? 0,
+    durationInFrames: durationInFrames ?? Infinity,
+    _remotionInternalStack: stack,
+    _remotionInternalIsMedia: { type: "image", src },
+    name: name ?? "<Img>",
+    _experimentalControls: controls,
     showInTimeline: showInTimeline ?? true,
-    premountDisplay: sequenceContext?.premountDisplay ?? null,
-    postmountDisplay: sequenceContext?.postmountDisplay ?? null,
-    loopDisplay: undefined,
-    controls: controls ?? null
-  });
-  if (hidden) {
-    return null;
-  }
-  return /* @__PURE__ */ jsx26(ImgContent, {
-    src,
-    ...props2
+    hidden,
+    children: /* @__PURE__ */ jsx26(ImgContent, {
+      src,
+      ...props2
+    })
   });
 };
 var imgSchema = {
@@ -7918,9 +7914,9 @@ var CompositionManagerProvider = ({
   initialCompositions,
   initialCanvasContent
 }) => {
-  const [folders, setFolders] = useState18([]);
-  const [canvasContent, setCanvasContent] = useState18(initialCanvasContent);
-  const [compositions, setCompositions] = useState18(initialCompositions);
+  const [folders, setFolders] = useState17([]);
+  const [canvasContent, setCanvasContent] = useState17(initialCanvasContent);
+  const [compositions, setCompositions] = useState17(initialCompositions);
   const currentcompositionsRef = useRef22(compositions);
   const updateCompositions = useCallback18((updateComps) => {
     setCompositions((comps) => {
@@ -8516,7 +8512,7 @@ var OffthreadVideoForRendering = ({
       toneMapped
     });
   }, [toneMapped, currentTime, src, transparent]);
-  const [imageSrc, setImageSrc] = useState19(null);
+  const [imageSrc, setImageSrc] = useState18(null);
   const { delayRender: delayRender2, continueRender: continueRender2 } = useDelayRender();
   useLayoutEffect11(() => {
     if (!window.remotion_videoEnabled) {
@@ -8714,7 +8710,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
   const parentSequence = useContext35(SequenceContext);
   const logLevel = useLogLevel();
   const mountTime = useMountTime();
-  const [timelineId] = useState20(() => String(Math.random()));
+  const [timelineId] = useState19(() => String(Math.random()));
   if (typeof acceptableTimeShift !== "undefined") {
     throw new Error("acceptableTimeShift has been removed. Use acceptableTimeShiftInSeconds instead.");
   }
@@ -8783,7 +8779,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
   useImperativeHandle8(ref, () => {
     return videoRef.current;
   }, []);
-  useState20(() => playbackLogging({
+  useState19(() => playbackLogging({
     logLevel,
     message: `Mounting video with source = ${actualSrc}, v=${VERSION}, user agent=${typeof navigator === "undefined" ? "server" : navigator.userAgent}`,
     tag: "video",
@@ -11961,7 +11957,7 @@ var getDefaultConfig = () => {
 var twMerge = /* @__PURE__ */ createTailwindMerge(getDefaultConfig);
 
 // ../design/dist/esm/index.mjs
-import React33, { useEffect as useEffect20, useMemo as useMemo42, useState as useState21 } from "react";
+import React33, { useEffect as useEffect20, useMemo as useMemo42, useState as useState20 } from "react";
 
 // ../paths/dist/esm/index.mjs
 var cutLInstruction = ({
@@ -16702,7 +16698,7 @@ var getAngle = (ref, coordinates) => {
 };
 var lastCoordinates = null;
 var useMousePosition = (ref) => {
-  const [angle, setAngle] = useState21(getAngle(ref.current, lastCoordinates));
+  const [angle, setAngle] = useState20(getAngle(ref.current, lastCoordinates));
   useEffect20(() => {
     const element = ref.current;
     if (!element) {
@@ -25372,14 +25368,14 @@ import { createContext as createContext32 } from "react";
 import { jsx as jsx56, jsxs as jsxs13 } from "react/jsx-runtime";
 import { jsx as jsx214, jsxs as jsxs24, Fragment as Fragment11 } from "react/jsx-runtime";
 import React56 from "react";
-import { useContext as useContext210, useEffect as useEffect42, useState as useState38 } from "react";
+import { useContext as useContext210, useEffect as useEffect42, useState as useState39 } from "react";
 import { useContext as useContext44, useLayoutEffect as useLayoutEffect17 } from "react";
 import { jsx as jsx313 } from "react/jsx-runtime";
-import { useEffect as useEffect24, useState as useState210 } from "react";
+import { useEffect as useEffect24, useState as useState24 } from "react";
 import { useLayoutEffect as useLayoutEffect23 } from "react";
 import { useContext as useContext45, useEffect as useEffect52, useRef as useRef43 } from "react";
 import { useEffect as useEffect310, useRef as useRef27 } from "react";
-import { useCallback as useCallback35, useContext as useContext39, useMemo as useMemo52, useRef as useRef44, useState as useState39 } from "react";
+import { useCallback as useCallback35, useContext as useContext39, useMemo as useMemo52, useRef as useRef44, useState as useState310 } from "react";
 import { useEffect as useEffect43, useRef as useRef310 } from "react";
 import { useCallback as useCallback210, useEffect as useEffect62, useMemo as useMemo212, useState as useState42 } from "react";
 import {
@@ -26836,7 +26832,7 @@ var useBufferStateEmitter = (emitter) => {
   }, [bufferManager, emitter]);
 };
 var PlayerEmitterProvider = ({ children, currentPlaybackRate }) => {
-  const [emitter] = useState38(() => new PlayerEmitter);
+  const [emitter] = useState39(() => new PlayerEmitter);
   const bufferManager = useContext210(Internals.BufferingContextReact);
   if (!bufferManager) {
     throw new Error("BufferingContextReact not found");
@@ -26853,7 +26849,7 @@ var PlayerEmitterProvider = ({ children, currentPlaybackRate }) => {
   });
 };
 var useHoverState = (ref, hideControlsWhenPointerDoesntMove) => {
-  const [hovered, setHovered] = useState210(false);
+  const [hovered, setHovered] = useState24(false);
   useEffect24(() => {
     const { current } = ref;
     if (!current) {
@@ -26894,7 +26890,7 @@ var useHoverState = (ref, hideControlsWhenPointerDoesntMove) => {
 };
 var usePlayer = () => {
   const [playing, setPlaying, imperativePlaying] = Internals.Timeline.usePlayingState();
-  const [hasPlayed, setHasPlayed] = useState39(false);
+  const [hasPlayed, setHasPlayed] = useState310(false);
   const frame = Internals.Timeline.useTimelinePosition();
   const playStart = useRef44(frame);
   const setFrame = Internals.Timeline.useTimelineSetFrame();
@@ -29934,7 +29930,7 @@ import {
   useEffect as useEffect58,
   useMemo as useMemo66,
   useRef as useRef55,
-  useState as useState56
+  useState as useState54
 } from "react";
 
 // ../../node_modules/.bun/@babel+runtime@7.27.1/node_modules/@babel/runtime/helpers/esm/extends.js
@@ -30708,7 +30704,7 @@ function useColorMode() {
 }
 
 // ../media/dist/esm/index.mjs
-import { useState as useState311 } from "react";
+import { useState as useState312 } from "react";
 import { useMemo as useMemo312 } from "react";
 import { useContext as useContext212, useEffect as useEffect44, useMemo as useMemo56, useRef as useRef46, useState as useState40 } from "react";
 import { ALL_FORMATS, Input as Input2, UrlSource } from "mediabunny";
@@ -30716,7 +30712,7 @@ import { AudioBufferSink, InputDisposedError } from "mediabunny";
 import { CanvasSink } from "mediabunny";
 import { useContext as useContext48, useLayoutEffect as useLayoutEffect18 } from "react";
 import { jsx as jsx58 } from "react/jsx-runtime";
-import { useContext as useContext311, useLayoutEffect as useLayoutEffect24, useMemo as useMemo213, useState as useState212 } from "react";
+import { useContext as useContext311, useLayoutEffect as useLayoutEffect24, useMemo as useMemo213, useState as useState210 } from "react";
 import React211 from "react";
 import {
   ALL_FORMATS as ALL_FORMATS2,
@@ -31552,6 +31548,83 @@ var makeNonceManager = () => {
     createAsyncOperation
   };
 };
+
+class PremountAwareDelayPlayback {
+  isPremounting;
+  isPostmounting;
+  activeHandles = new Set;
+  delayPlayback;
+  constructor({
+    bufferState,
+    isPremounting,
+    isPostmounting
+  }) {
+    this.delayPlayback = bufferState.delayPlayback;
+    this.isPremounting = isPremounting;
+    this.isPostmounting = isPostmounting;
+  }
+  shouldDelayPlayback() {
+    return !this.isPremounting && !this.isPostmounting;
+  }
+  syncHandles() {
+    for (const handle of this.activeHandles) {
+      if (this.shouldDelayPlayback()) {
+        handle.arm();
+      } else {
+        handle.disarm();
+      }
+    }
+  }
+  setIsPremounting(isPremounting) {
+    this.isPremounting = isPremounting;
+    this.syncHandles();
+  }
+  setIsPostmounting(isPostmounting) {
+    this.isPostmounting = isPostmounting;
+    this.syncHandles();
+  }
+  createHandle() {
+    let armed = false;
+    let unblock = null;
+    let disposed = false;
+    const arm = () => {
+      if (armed || disposed) {
+        return;
+      }
+      unblock = this.delayPlayback().unblock;
+      armed = true;
+    };
+    const disarm = () => {
+      if (!armed) {
+        return;
+      }
+      unblock?.();
+      unblock = null;
+      armed = false;
+    };
+    const entry = {
+      arm,
+      disarm,
+      dispose: () => {}
+    };
+    entry.dispose = () => {
+      if (disposed) {
+        return;
+      }
+      disposed = true;
+      disarm();
+      this.activeHandles.delete(entry);
+    };
+    this.activeHandles.add(entry);
+    if (this.shouldDelayPlayback()) {
+      arm();
+    }
+    return {
+      unblock: entry.dispose,
+      [Symbol.dispose]: entry.dispose
+    };
+  }
+}
 var BUFFER_SIZE = 3;
 var canvasesAheadOfTime = (videoSink, startTimestamp) => {
   const iterator = videoSink.canvases(startTimestamp);
@@ -31972,9 +32045,7 @@ class MediaPlayer {
   getEffects;
   getEffectChainState;
   initializationPromise = null;
-  bufferState;
-  isPremounting;
-  isPostmounting;
+  premountAwareDelayPlayback;
   seekPromiseChain = Promise.resolve();
   constructor({
     canvas,
@@ -32013,9 +32084,11 @@ class MediaPlayer {
     this.audioStreamIndex = audioStreamIndex;
     this.fps = fps;
     this.debugOverlay = debugOverlay;
-    this.bufferState = bufferState;
-    this.isPremounting = isPremounting;
-    this.isPostmounting = isPostmounting;
+    this.premountAwareDelayPlayback = new PremountAwareDelayPlayback({
+      bufferState,
+      isPremounting,
+      isPostmounting
+    });
     this.sequenceDurationInFrames = durationInFrames;
     this.nonceManager = makeNonceManager();
     this.onVideoFrameCallback = onVideoFrameCallback;
@@ -32271,19 +32344,7 @@ class MediaPlayer {
     this.drawDebugOverlay();
   }
   delayPlaybackHandleIfNotPremounting = () => {
-    if (this.isPremounting || this.isPostmounting) {
-      return {
-        unblock: () => {},
-        [Symbol.dispose]: () => {}
-      };
-    }
-    const { unblock } = this.bufferState.delayPlayback();
-    return {
-      unblock,
-      [Symbol.dispose]: () => {
-        unblock();
-      }
-    };
+    return this.premountAwareDelayPlayback.createHandle();
   };
   pause() {
     if (!this.playing) {
@@ -32356,10 +32417,10 @@ class MediaPlayer {
     }
   }
   setIsPremounting(isPremounting) {
-    this.isPremounting = isPremounting;
+    this.premountAwareDelayPlayback.setIsPremounting(isPremounting);
   }
   setIsPostmounting(isPostmounting) {
-    this.isPostmounting = isPostmounting;
+    this.premountAwareDelayPlayback.setIsPostmounting(isPostmounting);
   }
   async setLoop(loop, unloopedTimeInSeconds) {
     const previousLoop = this.loop;
@@ -34805,7 +34866,7 @@ var AudioForRendering2 = ({
   }
   const { fps } = videoConfig;
   const { delayRender: delayRender2, continueRender } = useDelayRender();
-  const [replaceWithHtml5Audio, setReplaceWithHtml5Audio] = useState212(false);
+  const [replaceWithHtml5Audio, setReplaceWithHtml5Audio] = useState210(false);
   const sequenceContext = useContext311(Internals.SequenceContext);
   const id = useMemo213(() => `media-audio-${random(src)}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.relativeFrom}-${sequenceContext?.durationInFrames}`, [
     src,
@@ -35021,7 +35082,7 @@ var AudioInner = (props) => {
     mediaStartsAt,
     loop: props.loop ?? false
   });
-  const [mediaDurationInSeconds, setMediaDurationInSeconds] = useState311(null);
+  const [mediaDurationInSeconds, setMediaDurationInSeconds] = useState312(null);
   const loopDisplay = useMemo312(() => getLoopDisplay({
     loop: props.loop ?? false,
     mediaDurationInSeconds,
@@ -35148,7 +35209,7 @@ var VideoForPreviewAssertedShowing = ({
   credentials,
   objectFit: objectFitProp,
   _experimentalInitiallyDrawCachedFrame,
-  _experimentalEffects,
+  effects,
   setMediaDurationInSeconds
 }) => {
   const src = usePreload22(unpreloadedSrc);
@@ -35178,8 +35239,8 @@ var VideoForPreviewAssertedShowing = ({
   }
   warnAboutTooHighVolume22(userPreferredVolume);
   const effectChainState = useEffectChainState2();
-  const experimentalEffectsRef = useRef210(_experimentalEffects);
-  experimentalEffectsRef.current = _experimentalEffects;
+  const effectsRef = useRef210(effects);
+  effectsRef.current = effects;
   const effectChainStateRef = useRef210(effectChainState);
   effectChainStateRef.current = effectChainState;
   const parentSequence = useContext47(SequenceContext22);
@@ -35286,7 +35347,7 @@ var VideoForPreviewAssertedShowing = ({
         sequenceOffset: initialSequenceOffset.current,
         credentials,
         tagType: "video",
-        getEffects: () => experimentalEffectsRef.current,
+        getEffects: () => effectsRef.current,
         getEffectChainState: (width, height) => effectChainStateRef.current?.get(width, height)
       });
       mediaPlayerRef.current = player;
@@ -35428,7 +35489,7 @@ var VideoForPreviewAssertedShowing = ({
       return;
     }
     mediaPlayer.redrawVideoEffects().catch(() => {});
-  }, [_experimentalEffects, mediaPlayerReady, mediaPlayerRef]);
+  }, [effects, mediaPlayerReady, mediaPlayerRef]);
   const actualStyle = useMemo412(() => {
     return {
       ...style2,
@@ -35845,7 +35906,7 @@ var InnerVideo = ({
   _experimentalControls: controls,
   objectFit,
   _experimentalInitiallyDrawCachedFrame,
-  _experimentalEffects,
+  effects,
   setMediaDurationInSeconds
 }) => {
   const environment = useRemotionEnvironment();
@@ -35917,7 +35978,7 @@ var InnerVideo = ({
     credentials,
     controls,
     objectFit,
-    _experimentalEffects,
+    effects,
     _experimentalInitiallyDrawCachedFrame
   });
 };
@@ -35950,7 +36011,7 @@ var VideoInner = ({
   _experimentalControls: controls,
   objectFit,
   _experimentalInitiallyDrawCachedFrame,
-  _experimentalEffects,
+  effects,
   durationInFrames,
   from,
   hidden
@@ -35996,10 +36057,10 @@ var VideoInner = ({
     data: basicInfo
   }), [basicInfo]);
   const memoizedEffects = Internals.useMemoizedEffects({
-    effects: _experimentalEffects ?? [],
+    effects: effects ?? [],
     overrideId: controls?.overrideId ?? null
   });
-  const memoizedEffectDefinitions = Internals.useMemoizedEffectDefinitions(_experimentalEffects ?? []);
+  const memoizedEffectDefinitions = Internals.useMemoizedEffectDefinitions(effects ?? []);
   if (sequenceDurationInFrames === 0) {
     return null;
   }
@@ -36012,7 +36073,7 @@ var VideoInner = ({
     name: name ?? "<Video>",
     _experimentalControls: controls,
     _remotionInternalLoopDisplay: loopDisplay,
-    _experimentalEffects: memoizedEffectDefinitions,
+    _remotionInternalEffects: memoizedEffectDefinitions,
     showInTimeline: showInTimeline ?? true,
     hidden,
     children: /* @__PURE__ */ jsx65(InnerVideo, {
@@ -36043,7 +36104,7 @@ var VideoInner = ({
       _experimentalControls: controls,
       objectFit: objectFit ?? "contain",
       _experimentalInitiallyDrawCachedFrame: _experimentalInitiallyDrawCachedFrame ?? false,
-      _experimentalEffects: memoizedEffects,
+      effects: memoizedEffects,
       setMediaDurationInSeconds
     })
   });
@@ -36052,7 +36113,7 @@ var Video = Internals.wrapInSchema(VideoInner, videoSchema);
 Internals.addSequenceStackTraces(Video);
 
 // src/components/homepage/Demo/Comp.tsx
-import { useCallback as useCallback43, useEffect as useEffect50, useMemo as useMemo59, useState as useState48 } from "react";
+import { useCallback as useCallback43, useEffect as useEffect50, useMemo as useMemo59, useState as useState47 } from "react";
 
 // src/components/homepage/Demo/Cards.tsx
 import {
@@ -36060,7 +36121,7 @@ import {
   useCallback as useCallback41,
   useEffect as useEffect49,
   useRef as useRef50,
-  useState as useState47
+  useState as useState46
 } from "react";
 
 // src/components/homepage/Demo/Card.tsx
@@ -36433,7 +36494,7 @@ import {
 
 // ../lottie/dist/esm/index.mjs
 import lottie from "lottie-web";
-import { useEffect as useEffect46, useRef as useRef48, useState as useState44 } from "react";
+import { useEffect as useEffect46, useRef as useRef48, useState as useState41 } from "react";
 import { jsx as jsx69 } from "react/jsx-runtime";
 var getLottieMetadata = (animationData) => {
   const width2 = animationData.w;
@@ -36508,7 +36569,7 @@ var Lottie = ({
   const onAnimationLoadedRef = useRef48(onAnimationLoaded);
   onAnimationLoadedRef.current = onAnimationLoaded;
   const { delayRender: delayRender2, continueRender } = useDelayRender();
-  const [handle] = useState44(() => delayRender2("Waiting for Lottie animation to load"));
+  const [handle] = useState41(() => delayRender2("Waiting for Lottie animation to load"));
   useEffect46(() => {
     return () => {
       continueRender(handle);
@@ -36604,12 +36665,12 @@ var Lottie = ({
 };
 
 // src/components/homepage/Demo/DisplayedEmoji.tsx
-import { useEffect as useEffect47, useMemo as useMemo57, useState as useState46 } from "react";
+import { useEffect as useEffect47, useMemo as useMemo57, useState as useState44 } from "react";
 import { jsx as jsx70 } from "react/jsx-runtime";
 var DisplayedEmoji = ({ emoji }) => {
-  const [data, setData] = useState46(null);
+  const [data, setData] = useState44(null);
   const { durationInFrames, fps } = useVideoConfig();
-  const [browser, setBrowser] = useState46(typeof document !== "undefined");
+  const [browser, setBrowser] = useState44(typeof document !== "undefined");
   const { delayRender: delayRender2, continueRender, cancelRender: cancelRender2 } = useDelayRender();
   const src = useMemo57(() => {
     if (emoji === "melting") {
@@ -36623,7 +36684,7 @@ var DisplayedEmoji = ({ emoji }) => {
     }
     throw new Error("Unknown emoji");
   }, [emoji]);
-  const [handle] = useState46(() => delayRender2("Loading emojis!"));
+  const [handle] = useState44(() => delayRender2("Loading emojis!"));
   useEffect47(() => {
     fetch(src).then((res) => res.json()).then((json) => {
       setData({
@@ -37155,7 +37216,7 @@ var Cards = ({
   trending
 }) => {
   const container4 = useRef50(null);
-  const [refs] = useState47(() => {
+  const [refs] = useState46(() => {
     return new Array(4).fill(true).map(() => {
       return createRef4();
     });
@@ -37253,7 +37314,7 @@ var HomepageVideoComp = ({
   onClickLeft,
   onClickRight
 }) => {
-  const [rerenders, setRerenders] = useState48(0);
+  const [rerenders, setRerenders] = useState47(0);
   const onUpdate = useCallback43((newIndices) => {
     setRerenders(rerenders + 1);
     updateCardOrder(newIndices);
@@ -37352,7 +37413,7 @@ import {
 import { BufferTarget, StreamTarget } from "mediabunny";
 
 // ../core/dist/esm/version.mjs
-var VERSION2 = "4.0.464";
+var VERSION2 = "4.0.465";
 
 // ../web-renderer/dist/esm/index.mjs
 import { AudioSample, VideoSample } from "mediabunny";
@@ -37360,7 +37421,7 @@ import { AudioSampleSource } from "mediabunny";
 import { createRef as createRef6 } from "react";
 import { flushSync as flushSync22 } from "react-dom";
 import ReactDOM6 from "react-dom/client";
-import { useImperativeHandle as useImperativeHandle13, useState as useState49 } from "react";
+import { useImperativeHandle as useImperativeHandle13, useState as useState48 } from "react";
 import { flushSync as flushSync3 } from "react-dom";
 import { jsx as jsx88 } from "react/jsx-runtime";
 import { jsx as jsx217 } from "react/jsx-runtime";
@@ -37991,7 +38052,7 @@ var UpdateTime = ({
   initialFrame,
   timeUpdater
 }) => {
-  const [frame, setFrame] = useState49(initialFrame);
+  const [frame, setFrame] = useState48(initialFrame);
   useImperativeHandle13(timeUpdater, () => ({
     update: (f) => {
       flushSync3(() => {
@@ -42357,12 +42418,12 @@ var DragAndDropNudge = () => {
 };
 
 // src/components/homepage/Demo/PlayerSeekBar.tsx
-import { useCallback as useCallback47, useEffect as useEffect53, useMemo as useMemo64, useRef as useRef51, useState as useState51 } from "react";
+import { useCallback as useCallback47, useEffect as useEffect53, useMemo as useMemo64, useRef as useRef51, useState as useState50 } from "react";
 
 // src/components/homepage/layout/use-el-size.ts
-import { useCallback as useCallback46, useEffect as useEffect51, useMemo as useMemo61, useState as useState50 } from "react";
+import { useCallback as useCallback46, useEffect as useEffect51, useMemo as useMemo61, useState as useState49 } from "react";
 var useElementSize2 = (ref) => {
-  const [size4, setSize] = useState50(null);
+  const [size4, setSize] = useState49(null);
   const observer = useMemo61(() => {
     if (typeof ResizeObserver === "undefined") {
       return;
@@ -42439,7 +42500,7 @@ var findBodyInWhichDivIsLocated2 = (div) => {
   return current;
 };
 var useHoverState2 = (ref, hideControlsWhenPointerDoesntMove) => {
-  const [hovered, setHovered] = useState51(false);
+  const [hovered, setHovered] = useState50(false);
   useEffect53(() => {
     const { current } = ref;
     if (!current) {
@@ -42489,8 +42550,8 @@ var PlayerSeekBar2 = ({
   const containerRef = useRef51(null);
   const barHovered = useHoverState2(containerRef, false);
   const size4 = useElementSize2(containerRef.current);
-  const [playing, setPlaying] = useState51(false);
-  const [frame, setFrame] = useState51(0);
+  const [playing, setPlaying] = useState50(false);
+  const [frame, setFrame] = useState50(0);
   useEffect53(() => {
     const { current } = playerRef;
     if (!current) {
@@ -42522,7 +42583,7 @@ var PlayerSeekBar2 = ({
       current.removeEventListener("pause", onPause);
     };
   }, [playerRef]);
-  const [dragging, setDragging] = useState51({
+  const [dragging, setDragging] = useState50({
     dragging: false
   });
   const width2 = size4?.width ?? 0;
@@ -42635,7 +42696,7 @@ var PlayerSeekBar2 = ({
 };
 
 // src/components/homepage/Demo/PlayerVolume.tsx
-import { useCallback as useCallback48, useEffect as useEffect55, useRef as useRef53, useState as useState54 } from "react";
+import { useCallback as useCallback48, useEffect as useEffect55, useRef as useRef53, useState as useState51 } from "react";
 
 // src/components/homepage/Demo/icons.tsx
 import { jsx as jsx101 } from "react/jsx-runtime";
@@ -42693,8 +42754,8 @@ var IsMutedIcon = (props) => {
 // src/components/homepage/Demo/PlayerVolume.tsx
 import { jsx as jsx105 } from "react/jsx-runtime";
 var PlayerVolume = ({ playerRef }) => {
-  const [muted, setIsMuted] = useState54(() => playerRef.current?.isMuted() ?? true);
-  const [isHovered, setIsHovered] = useState54(false);
+  const [muted, setIsMuted] = useState51(() => playerRef.current?.isMuted() ?? true);
+  const [isHovered, setIsHovered] = useState51(false);
   const timerRef = useRef53(null);
   useEffect55(() => {
     const { current } = playerRef;
@@ -42983,12 +43044,12 @@ var playerWrapper = {
 };
 var Demo = () => {
   const { colorMode } = useColorMode();
-  const [data2, setData] = useState56(null);
+  const [data2, setData] = useState54(null);
   const ref = useRef55(null);
-  const [isFullscreen, setIsFullscreen] = useState56(false);
-  const [cardOrder, setCardOrder] = useState56([0, 1, 2, 3]);
-  const [emojiIndex, setEmojiIndex] = useState56(0);
-  const [error2, setError] = useState56(false);
+  const [isFullscreen, setIsFullscreen] = useState54(false);
+  const [cardOrder, setCardOrder] = useState54([0, 1, 2, 3]);
+  const [emojiIndex, setEmojiIndex] = useState54(0);
+  const [error2, setError] = useState54(false);
   useEffect58(() => {
     getDataAndProps().then((d2) => {
       setData(d2);
@@ -43147,7 +43208,7 @@ import { forwardRef as forwardRef39, useEffect as useEffect60, useImperativeHand
 // src/components/homepage/VideoPlayerWithControls.tsx
 import Hls from "hls.js";
 import"plyr/dist/plyr.css";
-import { forwardRef as forwardRef38, useCallback as useCallback51, useEffect as useEffect59, useRef as useRef56, useState as useState57 } from "react";
+import { forwardRef as forwardRef38, useCallback as useCallback51, useEffect as useEffect59, useRef as useRef56, useState as useState56 } from "react";
 import { jsx as jsx116 } from "react/jsx-runtime";
 var useCombinedRefs = function(...refs) {
   const targetRef = useRef56(null);
@@ -43168,7 +43229,7 @@ var VideoPlayerWithControls = forwardRef38(({ playbackId, poster, currentTime, o
   const videoRef = useRef56(null);
   const metaRef = useCombinedRefs(ref, videoRef);
   const playerRef = useRef56(null);
-  const [playerInitTime] = useState57(Date.now());
+  const [playerInitTime] = useState56(Date.now());
   const videoError = useCallback51((event) => onError(event), [onError]);
   const onImageLoad = useCallback51((event) => {
     const [w, h] = [event.target.width, event.target.height];
@@ -43368,10 +43429,10 @@ var EditorStarterSection = () => {
 var EditorStarterSection_default = EditorStarterSection;
 
 // src/components/homepage/EvaluateRemotion.tsx
-import { useEffect as useEffect61, useState as useState58 } from "react";
+import { useEffect as useEffect61, useState as useState57 } from "react";
 import { jsx as jsx119, jsxs as jsxs40 } from "react/jsx-runtime";
 var EvaluateRemotionSection = () => {
-  const [dailyAvatars, setDailyAvatars] = useState58([]);
+  const [dailyAvatars, setDailyAvatars] = useState57([]);
   useEffect61(() => {
     const avatars = experts.map((expert) => expert.image);
     const selectedAvatars = [];
@@ -43469,7 +43530,7 @@ var EvaluateRemotionSection = () => {
 var EvaluateRemotion_default = EvaluateRemotionSection;
 
 // src/components/homepage/IfYouKnowReact.tsx
-import { useEffect as useEffect63, useState as useState59 } from "react";
+import { useEffect as useEffect63, useState as useState58 } from "react";
 import { jsx as jsx120, jsxs as jsxs41 } from "react/jsx-runtime";
 var isWebkit = () => {
   if (typeof window === "undefined") {
@@ -43484,7 +43545,7 @@ var icon2 = {
   marginLeft: 10
 };
 var IfYouKnowReact = () => {
-  const [vid, setVid] = useState59("/img/compose.webm");
+  const [vid, setVid] = useState58("/img/compose.webm");
   useEffect63(() => {
     if (isWebkit()) {
       setVid("/img/compose.mp4");
@@ -43544,12 +43605,12 @@ var IfYouKnowReact = () => {
 };
 
 // src/components/homepage/NewsletterButton.tsx
-import { useCallback as useCallback53, useState as useState60 } from "react";
+import { useCallback as useCallback53, useState as useState59 } from "react";
 import { jsx as jsx121, jsxs as jsxs44 } from "react/jsx-runtime";
 var NewsletterButton = () => {
-  const [email, setEmail] = useState60("");
-  const [submitting, setSubmitting] = useState60(false);
-  const [subscribed, setSubscribed] = useState60(false);
+  const [email, setEmail] = useState59("");
+  const [submitting, setSubmitting] = useState59(false);
+  const [subscribed, setSubscribed] = useState59(false);
   const handleSubmit = useCallback53(async (e) => {
     try {
       setSubmitting(true);
@@ -43632,7 +43693,7 @@ var NewsletterButton = () => {
 };
 
 // src/components/homepage/ParameterizeAndEdit.tsx
-import { useEffect as useEffect65, useRef as useRef58, useState as useState61 } from "react";
+import { useEffect as useEffect65, useRef as useRef58, useState as useState60 } from "react";
 import { jsx as jsx124, jsxs as jsxs46 } from "react/jsx-runtime";
 var icon3 = {
   height: 16,
@@ -43640,7 +43701,7 @@ var icon3 = {
 };
 var ParameterizeAndEdit = () => {
   const ref = useRef58(null);
-  const [vid, setVid] = useState61("/img/editing-vp9-chrome.webm");
+  const [vid, setVid] = useState60("/img/editing-vp9-chrome.webm");
   useEffect65(() => {
     if (isWebkit()) {
       setVid("/img/editing-safari.mp4");
@@ -43755,7 +43816,7 @@ var ParameterizeAndEdit = () => {
 };
 
 // src/components/homepage/RealMp4Videos.tsx
-import { useEffect as useEffect66, useRef as useRef59, useState as useState64 } from "react";
+import { useEffect as useEffect66, useRef as useRef59, useState as useState61 } from "react";
 import { jsx as jsx126, jsxs as jsxs47 } from "react/jsx-runtime";
 var icon4 = {
   height: 16,
@@ -43764,7 +43825,7 @@ var icon4 = {
 var RealMP4Videos = () => {
   const ref = useRef59(null);
   const videoRef = useRef59(null);
-  const [vid, setVid] = useState64("/img/render-progress.webm");
+  const [vid, setVid] = useState61("/img/render-progress.webm");
   useEffect66(() => {
     if (isWebkit()) {
       setVid("/img/render-progress.mp4");
@@ -44016,7 +44077,7 @@ var TrustedByBanner = () => {
 var TrustedByBanner_default = TrustedByBanner;
 
 // src/components/homepage/VideoAppsShowcase.tsx
-import { useRef as useRef60, useState as useState66 } from "react";
+import { useRef as useRef60, useState as useState64 } from "react";
 import { jsx as jsx128, jsxs as jsxs49 } from "react/jsx-runtime";
 var tabs = [
   "Music visualization",
@@ -44069,10 +44130,10 @@ var icon5 = {
   marginLeft: 10
 };
 var VideoAppsShowcase = () => {
-  const [activeTab, setActiveTab] = useState66(0);
-  const [isMuted, setIsMuted] = useState66(true);
-  const [isPlaying, setIsPlaying] = useState66(false);
-  const [videoLoaded, setVideoLoaded] = useState66(false);
+  const [activeTab, setActiveTab] = useState64(0);
+  const [isMuted, setIsMuted] = useState64(true);
+  const [isPlaying, setIsPlaying] = useState64(false);
+  const [videoLoaded, setVideoLoaded] = useState64(false);
   const videoRef = useRef60(null);
   const containerRef = useRef60(null);
   const handleTabChange = (index2) => {
@@ -45592,7 +45653,7 @@ var ChooseTemplate = () => {
 };
 
 // src/components/homepage/GetStartedStrip.tsx
-import { useState as useState67 } from "react";
+import { useState as useState66 } from "react";
 
 // src/components/homepage/GitHubButton.tsx
 import { jsx as jsx164, jsxs as jsxs65 } from "react/jsx-runtime";
@@ -45627,7 +45688,7 @@ var GithubButton = () => {
 // src/components/homepage/GetStartedStrip.tsx
 import { jsx as jsx166, jsxs as jsxs66 } from "react/jsx-runtime";
 var GetStarted = () => {
-  const [clicked, setClicked] = useState67(null);
+  const [clicked, setClicked] = useState66(null);
   return /* @__PURE__ */ jsxs66("div", {
     className: "flex flex-col lg:flex-row items-center justify-center text-center w-full",
     children: [