@remotion/media 4.0.446 → 4.0.447

package/dist/esm/index.mjs

@@ -1093,8 +1093,10 @@ var videoIteratorManager = ({
   let framesRendered = 0;
   let currentDelayHandle = null;
   if (canvas) {
-    canvas.width = videoTrack.displayWidth;
-    canvas.height = videoTrack.displayHeight;
+    if (canvas.width !== videoTrack.displayWidth || canvas.height !== videoTrack.displayHeight) {
+      canvas.width = videoTrack.displayWidth;
+      canvas.height = videoTrack.displayHeight;
+    }
   }
   const canvasSink = new CanvasSink(videoTrack, {
     poolSize: 2,
@@ -4521,6 +4523,29 @@ import {
   useVideoConfig as useVideoConfig3
 } from "remotion";
 
+// src/video/video-frame-cache.ts
+var cache = new Map;
+var cacheVideoFrame = (src, sourceCanvas) => {
+  const { width, height } = sourceCanvas;
+  if (width === 0 || height === 0) {
+    return;
+  }
+  let cached = cache.get(src);
+  if (!cached || cached.width !== width || cached.height !== height) {
+    cached = new OffscreenCanvas(width, height);
+    cache.set(src, cached);
+  }
+  const ctx = cached.getContext("2d");
+  if (!ctx) {
+    return;
+  }
+  ctx.clearRect(0, 0, width, height);
+  ctx.drawImage(sourceCanvas, 0, 0);
+};
+var getCachedVideoFrame = (src) => {
+  return cache.get(src) ?? null;
+};
+
 // src/video/warn-object-fit-css.ts
 import { Internals as Internals20 } from "remotion";
 var OBJECT_FIT_CLASS_PATTERN = /\bobject-(contain|cover|fill|none|scale-down)\b/;
@@ -4581,7 +4606,8 @@ var VideoForPreviewAssertedShowing = ({
   onError,
   credentials,
   controls,
-  objectFit: objectFitProp
+  objectFit: objectFitProp,
+  _experimentalInitiallyDrawCachedFrame
 }) => {
   const src = usePreload2(unpreloadedSrc);
   const canvasRef = useRef2(null);
@@ -4658,6 +4684,44 @@ var VideoForPreviewAssertedShowing = ({
   const initialMuted = useRef2(effectiveMuted);
   const initialDurationInFrames = useRef2(videoConfig.durationInFrames);
   const initialSequenceOffset = useRef2(sequenceOffset);
+  const hasDrawnRealFrameRef = useRef2(false);
+  const isPremountingRef = useRef2(isPremounting);
+  isPremountingRef.current = isPremounting;
+  useLayoutEffect3(() => {
+    if (!_experimentalInitiallyDrawCachedFrame) {
+      return;
+    }
+    const canvas = canvasRef.current;
+    if (!canvas) {
+      return;
+    }
+    const cached = getCachedVideoFrame(src);
+    if (!cached) {
+      return;
+    }
+    canvas.width = cached.width;
+    canvas.height = cached.height;
+    const ctx = canvas.getContext("2d", {
+      alpha: true,
+      desynchronized: true
+    });
+    if (!ctx) {
+      return;
+    }
+    ctx.drawImage(cached, 0, 0);
+  }, [_experimentalInitiallyDrawCachedFrame, src]);
+  useLayoutEffect3(() => {
+    if (!_experimentalInitiallyDrawCachedFrame) {
+      return;
+    }
+    const canvas = canvasRef.current;
+    return () => {
+      if (!canvas || !hasDrawnRealFrameRef.current || isPremountingRef.current) {
+        return;
+      }
+      cacheVideoFrame(src, canvas);
+    };
+  }, [_experimentalInitiallyDrawCachedFrame, src]);
   useEffect3(() => {
     if (!sharedAudioContext)
       return;
@@ -4726,6 +4790,7 @@ var VideoForPreviewAssertedShowing = ({
         if (result.type === "success") {
           setMediaPlayerReady(true);
           setMediaDurationInSeconds(result.durationInSeconds);
+          hasDrawnRealFrameRef.current = true;
         }
       }).catch((error) => {
         const [action, errorToUse] = callOnErrorAndResolve({
@@ -4763,6 +4828,7 @@ var VideoForPreviewAssertedShowing = ({
       }
       setMediaPlayerReady(false);
       setShouldFallbackToNativeVideo(false);
+      hasDrawnRealFrameRef.current = false;
     };
   }, [
     audioStreamIndex,
@@ -5283,7 +5349,8 @@ var InnerVideo = ({
   onError,
   credentials,
   controls,
-  objectFit
+  objectFit,
+  _experimentalInitiallyDrawCachedFrame
 }) => {
   const environment = useRemotionEnvironment4();
   if (typeof src !== "string") {
@@ -5355,7 +5422,8 @@ var InnerVideo = ({
     onError,
     credentials,
     controls,
-    objectFit
+    objectFit,
+    _experimentalInitiallyDrawCachedFrame
   });
 };
 var VideoInner = ({
@@ -5387,6 +5455,7 @@ var VideoInner = ({
   credentials,
   controls,
   objectFit,
+  _experimentalInitiallyDrawCachedFrame,
   from,
   durationInFrames
 }) => {
@@ -5424,7 +5493,8 @@ var VideoInner = ({
       onError,
       credentials,
       controls,
-      objectFit: objectFit ?? "contain"
+      objectFit: objectFit ?? "contain",
+      _experimentalInitiallyDrawCachedFrame: _experimentalInitiallyDrawCachedFrame ?? false
     })
   });
 };

package/dist/index.d.ts

@@ -39,6 +39,7 @@ export declare const experimental_Video: import("react").ComponentType<{
     onError: import("./on-error").MediaOnError | undefined;
     credentials: RequestCredentials | undefined;
     objectFit: import(".").VideoObjectFit;
+    _experimentalInitiallyDrawCachedFrame: boolean;
 }> & {
     from?: number | undefined;
     durationInFrames?: number | undefined;

package/dist/video/props.d.ts

@@ -51,6 +51,7 @@ type OptionalVideoProps = {
     onError: MediaOnError | undefined;
     credentials: RequestCredentials | undefined;
     objectFit: VideoObjectFit;
+    _experimentalInitiallyDrawCachedFrame: boolean;
 };
 export type InnerVideoProps = MandatoryVideoProps & OuterVideoProps & OptionalVideoProps;
 export type VideoProps = MandatoryVideoProps & Partial<OuterVideoProps> & Partial<OptionalVideoProps> & {

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

@@ -27,6 +27,7 @@ type VideoForPreviewProps = {
     readonly onError: MediaOnError | undefined;
     readonly credentials: RequestCredentials | undefined;
     readonly objectFit: VideoObjectFit;
+    readonly _experimentalInitiallyDrawCachedFrame: boolean;
 };
 export declare const VideoForPreview: React.FC<VideoForPreviewProps & {
     readonly controls: SequenceControls | undefined;

package/dist/video/video-frame-cache.d.ts

@@ -0,0 +1,2 @@
+export declare const cacheVideoFrame: (src: string, sourceCanvas: HTMLCanvasElement | OffscreenCanvas) => void;
+export declare const getCachedVideoFrame: (src: string) => OffscreenCanvas | null;

package/dist/video/video.d.ts

@@ -31,6 +31,7 @@ export declare const Video: React.ComponentType<{
     onError: import("../on-error").MediaOnError | undefined;
     credentials: RequestCredentials | undefined;
     objectFit: import("./props").VideoObjectFit;
+    _experimentalInitiallyDrawCachedFrame: boolean;
 }> & {
     from?: number | undefined;
     durationInFrames?: number | undefined;

package/package.json

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