@remotion/media 4.0.463 → 4.0.464

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

@@ -1126,6 +1126,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 +1144,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 +1162,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 +1174,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 +1241,7 @@ var videoIteratorManager = async ({
     getVideoIteratorsCreated: () => videoIteratorsCreated,
     seek,
     destroy: () => {
+      clearLastDrawnFrame();
       prewarmedVideoIteratorCache.destroy();
       videoFrameIterator?.destroy();
       if (context && canvas) {
@@ -1233,6 +1255,7 @@ var videoIteratorManager = async ({
     },
     getVideoFrameIterator: () => videoFrameIterator,
     drawFrame,
+    redrawCurrentFrame,
     getFramesRendered: () => framesRendered
   };
 };
@@ -1743,6 +1766,9 @@ class MediaPlayer {
   setVideoFrameCallback(callback) {
     this.onVideoFrameCallback = callback;
   }
+  async redrawVideoEffects() {
+    await this.videoIteratorManager?.redrawCurrentFrame();
+  }
   drawDebugOverlay = () => {
     if (!this.debugOverlay)
       return;
@@ -4848,6 +4874,13 @@ var VideoForPreviewAssertedShowing = ({
     }
     mediaPlayer.setVideoFrameCallback(onVideoFrame ?? null);
   }, [onVideoFrame, mediaPlayerReady]);
+  useLayoutEffect3(() => {
+    const mediaPlayer = mediaPlayerRef.current;
+    if (!mediaPlayer || !mediaPlayerReady) {
+      return;
+    }
+    mediaPlayer.redrawVideoEffects().catch(() => {});
+  }, [_experimentalEffects, mediaPlayerReady, mediaPlayerRef]);
   const actualStyle = useMemo4(() => {
     return {
       ...style,
@@ -5256,7 +5289,7 @@ var videoSchema = {
     description: "Hidden"
   },
   loop: { type: "boolean", default: false, description: "Loop" },
-  ...Internals20.sequenceStyleSchema
+  ...Internals20.sequenceVisualStyleSchema
 };
 var InnerVideo = ({
   src,

package/dist/media-player.d.ts

@@ -105,6 +105,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/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.464",
 	"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.464",
 		"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.464",
 		"@vitest/browser-webdriverio": "4.0.9",
 		"eslint": "9.19.0",
 		"react": "19.2.3",