@remotion/media 4.0.463 → 4.0.465

package/dist/debug-overlay/preview-overlay.d.ts

@@ -87,6 +87,7 @@ export declare const drawPreviewOverlay: ({ context, audioTime, audioContextStat
             };
         } | null;
         drawFrame: (frame: import("mediabunny").WrappedCanvas) => Promise<void>;
+        redrawCurrentFrame: () => Promise<void>;
         getFramesRendered: () => number;
     } | null;
     playbackRate: number;

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";
@@ -1126,6 +1204,10 @@ var videoIteratorManager = async ({
   let videoFrameIterator = null;
   let framesRendered = 0;
   let currentDelayHandle = null;
+  let lastDrawnFrame = null;
+  const clearLastDrawnFrame = () => {
+    lastDrawnFrame = null;
+  };
   if (canvas) {
     const displayWidth = await videoTrack.getDisplayWidth();
     const displayHeight = await videoTrack.getDisplayHeight();
@@ -1140,7 +1222,7 @@ var videoIteratorManager = async ({
     alpha: true
   });
   const prewarmedVideoIteratorCache = makePrewarmedVideoIteratorCache(canvasSink);
-  const drawFrame = async (frame) => {
+  const paintFrame = async (frame) => {
     if (context && canvas) {
       const effects = getEffects();
       const chainState = getEffectChainState(canvas.width, canvas.height);
@@ -1158,6 +1240,10 @@ var videoIteratorManager = async ({
         context.drawImage(frame.canvas, 0, 0);
       }
     }
+  };
+  const drawFrame = async (frame) => {
+    await paintFrame(frame);
+    lastDrawnFrame = frame;
     framesRendered++;
     drawDebugOverlay();
     const callback = getOnVideoFrameCallback();
@@ -1166,9 +1252,22 @@ var videoIteratorManager = async ({
     }
     Internals4.Log.trace({ logLevel, tag: "@remotion/media" }, `[MediaPlayer] Drew frame ${frame.timestamp.toFixed(3)}s`);
   };
+  const redrawCurrentFrame = async () => {
+    if (!lastDrawnFrame) {
+      return;
+    }
+    await paintFrame(lastDrawnFrame);
+    drawDebugOverlay();
+    const callback = getOnVideoFrameCallback();
+    if (callback) {
+      callback(lastDrawnFrame.canvas);
+    }
+    Internals4.Log.trace({ logLevel, tag: "@remotion/media" }, `[MediaPlayer] Redrew frame ${lastDrawnFrame.timestamp.toFixed(3)}s with updated effects`);
+  };
   const startVideoIterator = async (timeToSeek, nonce) => {
     let __stack = [];
     try {
+      clearLastDrawnFrame();
       videoFrameIterator?.destroy();
       const delayHandle = __using(__stack, delayPlaybackHandleIfNotPremounting(), 0);
       currentDelayHandle = delayHandle;
@@ -1220,6 +1319,7 @@ var videoIteratorManager = async ({
     getVideoIteratorsCreated: () => videoIteratorsCreated,
     seek,
     destroy: () => {
+      clearLastDrawnFrame();
       prewarmedVideoIteratorCache.destroy();
       videoFrameIterator?.destroy();
       if (context && canvas) {
@@ -1233,6 +1333,7 @@ var videoIteratorManager = async ({
     },
     getVideoFrameIterator: () => videoFrameIterator,
     drawFrame,
+    redrawCurrentFrame,
     getFramesRendered: () => framesRendered
   };
 };
@@ -1264,9 +1365,7 @@ class MediaPlayer {
   getEffects;
   getEffectChainState;
   initializationPromise = null;
-  bufferState;
-  isPremounting;
-  isPostmounting;
+  premountAwareDelayPlayback;
   seekPromiseChain = Promise.resolve();
   constructor({
     canvas,
@@ -1305,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;
@@ -1563,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) {
@@ -1648,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;
@@ -1743,6 +1832,9 @@ class MediaPlayer {
   setVideoFrameCallback(callback) {
     this.onVideoFrameCallback = callback;
   }
+  async redrawVideoEffects() {
+    await this.videoIteratorManager?.redrawCurrentFrame();
+  }
   drawDebugOverlay = () => {
     if (!this.debugOverlay)
       return;
@@ -4574,7 +4666,7 @@ var VideoForPreviewAssertedShowing = ({
   credentials,
   objectFit: objectFitProp,
   _experimentalInitiallyDrawCachedFrame,
-  _experimentalEffects,
+  effects,
   setMediaDurationInSeconds
 }) => {
   const src = usePreload2(unpreloadedSrc);
@@ -4604,8 +4696,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);
@@ -4712,7 +4804,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;
@@ -4848,6 +4940,13 @@ var VideoForPreviewAssertedShowing = ({
     }
     mediaPlayer.setVideoFrameCallback(onVideoFrame ?? null);
   }, [onVideoFrame, mediaPlayerReady]);
+  useLayoutEffect3(() => {
+    const mediaPlayer = mediaPlayerRef.current;
+    if (!mediaPlayer || !mediaPlayerReady) {
+      return;
+    }
+    mediaPlayer.redrawVideoEffects().catch(() => {});
+  }, [effects, mediaPlayerReady, mediaPlayerRef]);
   const actualStyle = useMemo4(() => {
     return {
       ...style,
@@ -5256,7 +5355,7 @@ var videoSchema = {
     description: "Hidden"
   },
   loop: { type: "boolean", default: false, description: "Loop" },
-  ...Internals20.sequenceStyleSchema
+  ...Internals20.sequenceVisualStyleSchema
 };
 var InnerVideo = ({
   src,
@@ -5286,7 +5385,7 @@ var InnerVideo = ({
   _experimentalControls: controls,
   objectFit,
   _experimentalInitiallyDrawCachedFrame,
-  _experimentalEffects,
+  effects,
   setMediaDurationInSeconds
 }) => {
   const environment = useRemotionEnvironment4();
@@ -5358,7 +5457,7 @@ var InnerVideo = ({
     credentials,
     controls,
     objectFit,
-    _experimentalEffects,
+    effects,
     _experimentalInitiallyDrawCachedFrame
   });
 };
@@ -5391,7 +5490,7 @@ var VideoInner = ({
   _experimentalControls: controls,
   objectFit,
   _experimentalInitiallyDrawCachedFrame,
-  _experimentalEffects,
+  effects,
   durationInFrames,
   from,
   hidden
@@ -5437,10 +5536,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;
   }
@@ -5453,7 +5552,7 @@ var VideoInner = ({
     name: name ?? "<Video>",
     _experimentalControls: controls,
     _remotionInternalLoopDisplay: loopDisplay,
-    _experimentalEffects: memoizedEffectDefinitions,
+    _remotionInternalEffects: memoizedEffectDefinitions,
     showInTimeline: showInTimeline ?? true,
     hidden,
     children: /* @__PURE__ */ jsx6(InnerVideo, {
@@ -5484,7 +5583,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;
@@ -105,6 +103,7 @@ export declare class MediaPlayer {
     private getTargetTime;
     private scheduleAudioNode;
     setVideoFrameCallback(callback: null | ((frame: CanvasImageSource) => void)): void;
+    redrawVideoEffects(): Promise<void>;
     private drawDebugOverlay;
     audioSyncAnchorChanged: () => void;
 }

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/dist/video-iterator-manager.d.ts

@@ -36,6 +36,7 @@ export declare const videoIteratorManager: ({ delayPlaybackHandleIfNotPremountin
         };
     } | null;
     drawFrame: (frame: WrappedCanvas) => Promise<void>;
+    redrawCurrentFrame: () => Promise<void>;
     getFramesRendered: () => number;
 }>;
 export type VideoIteratorManager = Awaited<ReturnType<typeof videoIteratorManager>>;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@remotion/media",
-	"version": "4.0.463",
+	"version": "4.0.465",
 	"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.463",
+		"remotion": "4.0.465",
 		"zod": "4.3.6"
 	},
 	"peerDependencies": {
@@ -31,7 +31,7 @@
 		"react-dom": ">=16.8.0"
 	},
 	"devDependencies": {
-		"@remotion/eslint-config-internal": "4.0.463",
+		"@remotion/eslint-config-internal": "4.0.465",
 		"@vitest/browser-webdriverio": "4.0.9",
 		"eslint": "9.19.0",
 		"react": "19.2.3",