@remotion/media 4.0.464 → 4.0.466

package/dist/esm/index.mjs

@@ -853,6 +853,84 @@ var makeNonceManager = () => {
   };
 };
 
+// src/premount-aware-delay-playback.ts
+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
+    };
+  }
+}
+
 // src/video-iterator-manager.ts
 import { CanvasSink } from "mediabunny";
 import { Internals as Internals4 } from "remotion";
@@ -1287,9 +1365,7 @@ class MediaPlayer {
   getEffects;
   getEffectChainState;
   initializationPromise = null;
-  bufferState;
-  isPremounting;
-  isPostmounting;
+  premountAwareDelayPlayback;
   seekPromiseChain = Promise.resolve();
   constructor({
     canvas,
@@ -1328,9 +1404,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;
@@ -1586,19 +1664,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) {
@@ -1671,10 +1737,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;
@@ -4477,6 +4543,7 @@ var AudioInner = (props) => {
     _remotionInternalStack: stack,
     _remotionInternalIsMedia: isMedia,
     name: name ?? "<Audio>",
+    _remotionInternalDocumentationLink: name === undefined ? "https://www.remotion.dev/docs/media/audio" : undefined,
     _experimentalControls: controls,
     _remotionInternalLoopDisplay: loopDisplay,
     showInTimeline: showInTimeline ?? true,
@@ -4600,7 +4667,7 @@ var VideoForPreviewAssertedShowing = ({
   credentials,
   objectFit: objectFitProp,
   _experimentalInitiallyDrawCachedFrame,
-  _experimentalEffects,
+  effects,
   setMediaDurationInSeconds
 }) => {
   const src = usePreload2(unpreloadedSrc);
@@ -4630,8 +4697,8 @@ var VideoForPreviewAssertedShowing = ({
   }
   warnAboutTooHighVolume2(userPreferredVolume);
   const effectChainState = useEffectChainState();
-  const experimentalEffectsRef = useRef2(_experimentalEffects);
-  experimentalEffectsRef.current = _experimentalEffects;
+  const effectsRef = useRef2(effects);
+  effectsRef.current = effects;
   const effectChainStateRef = useRef2(effectChainState);
   effectChainStateRef.current = effectChainState;
   const parentSequence = useContext4(SequenceContext2);
@@ -4738,7 +4805,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;
@@ -4880,7 +4947,7 @@ var VideoForPreviewAssertedShowing = ({
       return;
     }
     mediaPlayer.redrawVideoEffects().catch(() => {});
-  }, [_experimentalEffects, mediaPlayerReady, mediaPlayerRef]);
+  }, [effects, mediaPlayerReady, mediaPlayerRef]);
   const actualStyle = useMemo4(() => {
     return {
       ...style,
@@ -5319,7 +5386,7 @@ var InnerVideo = ({
   _experimentalControls: controls,
   objectFit,
   _experimentalInitiallyDrawCachedFrame,
-  _experimentalEffects,
+  effects,
   setMediaDurationInSeconds
 }) => {
   const environment = useRemotionEnvironment4();
@@ -5391,7 +5458,7 @@ var InnerVideo = ({
     credentials,
     controls,
     objectFit,
-    _experimentalEffects,
+    effects,
     _experimentalInitiallyDrawCachedFrame
   });
 };
@@ -5424,7 +5491,7 @@ var VideoInner = ({
   _experimentalControls: controls,
   objectFit,
   _experimentalInitiallyDrawCachedFrame,
-  _experimentalEffects,
+  effects,
   durationInFrames,
   from,
   hidden
@@ -5470,10 +5537,10 @@ var VideoInner = ({
     data: basicInfo
   }), [basicInfo]);
   const memoizedEffects = Internals20.useMemoizedEffects({
-    effects: _experimentalEffects ?? [],
+    effects: effects ?? [],
     overrideId: controls?.overrideId ?? null
   });
-  const memoizedEffectDefinitions = Internals20.useMemoizedEffectDefinitions(_experimentalEffects ?? []);
+  const memoizedEffectDefinitions = Internals20.useMemoizedEffectDefinitions(effects ?? []);
   if (sequenceDurationInFrames === 0) {
     return null;
   }
@@ -5484,9 +5551,10 @@ var VideoInner = ({
     _remotionInternalStack: stack,
     _remotionInternalIsMedia: isMedia,
     name: name ?? "<Video>",
+    _remotionInternalDocumentationLink: name === undefined ? "https://www.remotion.dev/docs/media/video" : undefined,
     _experimentalControls: controls,
     _remotionInternalLoopDisplay: loopDisplay,
-    _experimentalEffects: memoizedEffectDefinitions,
+    _remotionInternalEffects: memoizedEffectDefinitions,
     showInTimeline: showInTimeline ?? true,
     hidden,
     children: /* @__PURE__ */ jsx6(InnerVideo, {
@@ -5517,7 +5585,7 @@ var VideoInner = ({
       _experimentalControls: controls,
       objectFit: objectFit ?? "contain",
       _experimentalInitiallyDrawCachedFrame: _experimentalInitiallyDrawCachedFrame ?? false,
-      _experimentalEffects: memoizedEffects,
+      effects: memoizedEffects,
       setMediaDurationInSeconds
     })
   });

package/dist/index.d.ts

@@ -59,7 +59,7 @@ export declare const experimental_Video: import("react").ComponentType<{
     credentials: RequestCredentials | undefined;
     objectFit: import(".").VideoObjectFit;
     _experimentalInitiallyDrawCachedFrame: boolean;
-    _experimentalEffects: import("remotion").EffectsProp;
+    effects: import("remotion").EffectsProp;
 }> & Pick<import("remotion").SequenceProps, "durationInFrames" | "from" | "hidden" | "name">>;
 export { AudioForPreview } from './audio/audio-for-preview';
 export { AudioProps, FallbackHtml5AudioProps } from './audio/props';

package/dist/media-player.d.ts

@@ -43,9 +43,7 @@ export declare class MediaPlayer {
     private getEffects;
     private getEffectChainState;
     private initializationPromise;
-    private bufferState;
-    private isPremounting;
-    private isPostmounting;
+    private premountAwareDelayPlayback;
     private seekPromiseChain;
     constructor({ canvas, src, logLevel, sharedAudioContext, loop, trimBefore, trimAfter, playbackRate, globalPlaybackRate, audioStreamIndex, fps, debugOverlay, bufferState, isPremounting, isPostmounting, durationInFrames, onVideoFrameCallback, playing, sequenceOffset, credentials, tagType, getEffects, getEffectChainState }: {
         canvas: HTMLCanvasElement | OffscreenCanvas | null;

package/dist/premount-aware-delay-playback.d.ts

@@ -0,0 +1,18 @@
+import type { useBufferState } from 'remotion';
+import type { DelayPlaybackIfNotPremounting } from './delay-playback-if-not-premounting';
+export declare class PremountAwareDelayPlayback {
+    private isPremounting;
+    private isPostmounting;
+    private readonly activeHandles;
+    private readonly delayPlayback;
+    constructor({ bufferState, isPremounting, isPostmounting }: {
+        bufferState: ReturnType<typeof useBufferState>;
+        isPremounting: boolean;
+        isPostmounting: boolean;
+    });
+    private shouldDelayPlayback;
+    private syncHandles;
+    setIsPremounting(isPremounting: boolean): void;
+    setIsPostmounting(isPostmounting: boolean): void;
+    createHandle(): DelayPlaybackIfNotPremounting;
+}

package/dist/video/props.d.ts

@@ -51,10 +51,10 @@ type OptionalVideoProps = {
     credentials: RequestCredentials | undefined;
     objectFit: VideoObjectFit;
     _experimentalInitiallyDrawCachedFrame: boolean;
-    _experimentalEffects: EffectsProp;
+    effects: EffectsProp;
 };
-export type InnerVideoProps = MandatoryVideoProps & OuterVideoProps & Omit<OptionalVideoProps, '_experimentalEffects'> & {
-    _experimentalEffects: EffectDefinitionAndStack<unknown>[];
+export type InnerVideoProps = MandatoryVideoProps & OuterVideoProps & Omit<OptionalVideoProps, 'effects'> & {
+    effects: EffectDefinitionAndStack<unknown>[];
 };
 export type VideoProps = MandatoryVideoProps & Partial<OuterVideoProps> & Partial<OptionalVideoProps> & Pick<SequenceProps, 'durationInFrames' | 'from' | 'name' | 'hidden'>;
 export {};

package/dist/video/video-for-preview.d.ts

@@ -27,7 +27,7 @@ type VideoForPreviewProps = {
     readonly objectFit: VideoObjectFit;
     readonly setMediaDurationInSeconds: (durationInSeconds: number) => void;
     readonly _experimentalInitiallyDrawCachedFrame: boolean;
-    readonly _experimentalEffects: EffectDefinitionAndStack<unknown>[];
+    readonly effects: EffectDefinitionAndStack<unknown>[];
 };
 export declare const VideoForPreview: React.FC<VideoForPreviewProps & {
     readonly controls: SequenceControls | undefined;

package/dist/video/video.d.ts

@@ -30,5 +30,5 @@ export declare const Video: React.ComponentType<{
     credentials: RequestCredentials | undefined;
     objectFit: import("./props").VideoObjectFit;
     _experimentalInitiallyDrawCachedFrame: boolean;
-    _experimentalEffects: import("remotion").EffectsProp;
+    effects: import("remotion").EffectsProp;
 }> & Pick<import("remotion").SequenceProps, "durationInFrames" | "from" | "hidden" | "name">>;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@remotion/media",
-	"version": "4.0.464",
+	"version": "4.0.466",
 	"main": "dist/index.js",
 	"types": "dist/index.d.ts",
 	"module": "dist/esm/index.mjs",
@@ -23,7 +23,7 @@
 	},
 	"dependencies": {
 		"mediabunny": "1.45.0",
-		"remotion": "4.0.464",
+		"remotion": "4.0.466",
 		"zod": "4.3.6"
 	},
 	"peerDependencies": {
@@ -31,7 +31,7 @@
 		"react-dom": ">=16.8.0"
 	},
 	"devDependencies": {
-		"@remotion/eslint-config-internal": "4.0.464",
+		"@remotion/eslint-config-internal": "4.0.466",
 		"@vitest/browser-webdriverio": "4.0.9",
 		"eslint": "9.19.0",
 		"react": "19.2.3",