@remotion/media 4.0.484 → 4.0.485

package/dist/canvas-ahead-of-time.d.ts

@@ -6,6 +6,7 @@ export type CanvasAheadOfTimeNext = {
     type: 'pending';
     wait: () => Promise<WrappedCanvas | null>;
 };
+export declare const releaseStableFrame: (frame: WrappedCanvas | null) => void;
 export declare const canvasesAheadOfTime: (videoSink: CanvasSink, startTimestamp?: number | undefined) => {
     next: () => CanvasAheadOfTimeNext;
     closeIterator: () => Promise<void>;

package/dist/esm/index.mjs

@@ -100,13 +100,13 @@ var getTimeInSeconds = ({
   if (mediaDurationInSeconds === null && loop && ifNoMediaDuration === "fail") {
     throw new Error(`Could not determine duration of ${src}, but "loop" was set.`);
   }
-  const loopDuration = loop ? Internals2.calculateMediaDuration({
+  const loopDurationInFrames = loop ? Internals2.calculateMediaDuration({
     trimAfter,
     mediaDurationInFrames: mediaDurationInSeconds ? mediaDurationInSeconds * fps : Infinity,
     playbackRate: 1,
     trimBefore
-  }) / fps : Infinity;
-  const timeInSeconds = unloopedTimeInSeconds * playbackRate % loopDuration;
+  }) : Infinity;
+  const timeInSeconds = loop ? unloopedTimeInSeconds * playbackRate * fps % loopDurationInFrames / fps : unloopedTimeInSeconds * playbackRate;
   if ((trimAfter ?? null) !== null && !loop) {
     const time = (trimAfter - (trimBefore ?? 0)) / fps;
     if (timeInSeconds >= time) {
@@ -1043,6 +1043,43 @@ var roundTo4Digits = (timestamp) => {
 
 // src/canvas-ahead-of-time.ts
 var BUFFER_SIZE = 3;
+var releaseCanvas = Symbol("releaseCanvas");
+var releaseStableFrame = (frame) => {
+  frame?.[releaseCanvas]?.();
+};
+var makeStableFramePool = () => {
+  const availableCanvases = [];
+  const makeStableFrame = (frame) => {
+    const { canvas } = frame;
+    const stableCanvas = availableCanvases.pop() ?? new OffscreenCanvas(canvas.width, canvas.height);
+    if (stableCanvas.width !== canvas.width) {
+      stableCanvas.width = canvas.width;
+    }
+    if (stableCanvas.height !== canvas.height) {
+      stableCanvas.height = canvas.height;
+    }
+    const context = stableCanvas.getContext("2d");
+    if (!context) {
+      throw new Error("Could not create canvas context");
+    }
+    context.drawImage(canvas, 0, 0);
+    let released = false;
+    const stableFrame = {
+      canvas: stableCanvas,
+      duration: frame.duration,
+      timestamp: frame.timestamp,
+      [releaseCanvas]: () => {
+        if (released) {
+          return;
+        }
+        released = true;
+        availableCanvases.push(stableCanvas);
+      }
+    };
+    return stableFrame;
+  };
+  return { makeStableFrame };
+};
 var canvasesAheadOfTime = (videoSink, startTimestamp) => {
   const iterator = videoSink.canvases(startTimestamp);
   const buffer = [];
@@ -1050,8 +1087,9 @@ var canvasesAheadOfTime = (videoSink, startTimestamp) => {
   let reachedEnd = false;
   let closed = false;
   let inFlight = null;
-  const closeFrame = (frame) => {
-    frame.close?.();
+  const stableFramePool = makeStableFramePool();
+  const takeFrame = (frame) => {
+    return stableFramePool.makeStableFrame(frame);
   };
   const fillNext = () => {
     if (chaining || reachedEnd || closed)
@@ -1062,17 +1100,18 @@ var canvasesAheadOfTime = (videoSink, startTimestamp) => {
     const slot = { promise: iterator.next(), resolved: null };
     buffer.push(slot);
     inFlight = slot.promise.then((result) => {
-      slot.resolved = result;
       chaining = false;
       inFlight = null;
       if (result.done) {
+        slot.resolved = result;
         reachedEnd = true;
         return;
       }
       if (closed) {
-        closeFrame(result.value);
+        slot.resolved = { done: true, value: undefined };
         return;
       }
+      slot.resolved = { ...result, value: takeFrame(result.value) };
       fillNext();
     }, () => {
       chaining = false;
@@ -1100,7 +1139,7 @@ var canvasesAheadOfTime = (videoSink, startTimestamp) => {
             return next2.resolved.done ? null : next2.resolved.value;
           }
           const result = await next2.promise;
-          return result.done ? null : result.value;
+          return result.done ? null : takeFrame(result.value);
         }
       };
     }
@@ -1114,7 +1153,10 @@ var canvasesAheadOfTime = (videoSink, startTimestamp) => {
       type: "pending",
       wait: async () => {
         const result = await slot.promise;
-        return result.done ? null : result.value;
+        if (slot.resolved) {
+          return slot.resolved.done ? null : slot.resolved.value;
+        }
+        return result.done ? null : takeFrame(result.value);
       }
     };
   };
@@ -1122,7 +1164,7 @@ var canvasesAheadOfTime = (videoSink, startTimestamp) => {
     closed = true;
     for (const slot of buffer) {
       if (slot.resolved && !slot.resolved.done) {
-        closeFrame(slot.resolved.value);
+        releaseStableFrame(slot.resolved.value);
       }
     }
     buffer.length = 0;
@@ -1169,6 +1211,12 @@ var createVideoIterator = async (timeToSeek, cache) => {
   const initialFrame = firstAwait && firstAwait.type === "ready" ? firstAwait.frame : await firstAwait.wait();
   let lastReturnedFrame = initialFrame;
   let peekedFrame = null;
+  const setLastReturnedFrame = (frame) => {
+    if (lastReturnedFrame !== frame) {
+      releaseStableFrame(lastReturnedFrame);
+    }
+    lastReturnedFrame = frame;
+  };
   const peek = async () => {
     if (peekedFrame) {
       return peekedFrame;
@@ -1184,7 +1232,7 @@ var createVideoIterator = async (timeToSeek, cache) => {
   const getNextOrNullIfNotAvailable = () => {
     if (peekedFrame) {
       const frame = peekedFrame;
-      lastReturnedFrame = frame;
+      setLastReturnedFrame(frame);
       const retValue = {
         type: "got-frame-or-end",
         frame
@@ -1199,7 +1247,7 @@ var createVideoIterator = async (timeToSeek, cache) => {
         waitPromise: async () => {
           const res = await next.wait();
           if (res) {
-            lastReturnedFrame = res;
+            setLastReturnedFrame(res);
           } else {
             iteratorEnded = true;
           }
@@ -1208,7 +1256,7 @@ var createVideoIterator = async (timeToSeek, cache) => {
       };
     }
     if (next.frame) {
-      lastReturnedFrame = next.frame;
+      setLastReturnedFrame(next.frame);
     } else {
       iteratorEnded = true;
     }
@@ -1219,15 +1267,21 @@ var createVideoIterator = async (timeToSeek, cache) => {
   };
   const destroy = () => {
     destroyed = true;
+    releaseStableFrame(lastReturnedFrame);
+    if (peekedFrame !== lastReturnedFrame) {
+      releaseStableFrame(peekedFrame);
+    }
     lastReturnedFrame = null;
+    peekedFrame = null;
     iterator.closeIterator().catch(() => {
       return;
     });
   };
   const tryToSatisfySeek = async (time) => {
+    const timestamp = roundTo4Digits(time);
     if (lastReturnedFrame) {
       const frameTimestamp = roundTo4Digits(lastReturnedFrame.timestamp);
-      if (roundTo4Digits(time) < frameTimestamp) {
+      if (timestamp < frameTimestamp) {
         const lastFrameWasInitialFrame = lastReturnedFrame === initialFrame;
         const firstFrameDoesSatisfy = lastFrameWasInitialFrame && roundTo4Digits(time) >= roundTo4Digits(timeToSeek);
         if (firstFrameDoesSatisfy) {
@@ -1249,7 +1303,6 @@ var createVideoIterator = async (timeToSeek, cache) => {
         }
       }
       const frameEndTimestamp = roundTo4Digits(lastReturnedFrame.timestamp + lastFrameDuration);
-      const timestamp = roundTo4Digits(time);
       if (frameTimestamp <= timestamp && frameEndTimestamp > timestamp) {
         return {
           type: "satisfied",
@@ -1293,7 +1346,6 @@ var createVideoIterator = async (timeToSeek, cache) => {
         }
         const frameTimestamp = roundTo4Digits(frame.frame.timestamp);
         const frameEndTimestamp = roundTo4Digits(frame.frame.timestamp + frame.frame.duration);
-        const timestamp = roundTo4Digits(time);
         if (frameTimestamp <= timestamp && frameEndTimestamp > timestamp) {
           return {
             type: "satisfied",
@@ -1349,7 +1401,7 @@ var videoIteratorManager = async ({
     }
   }
   const canvasSink = new CanvasSink(videoTrack, {
-    poolSize: 2,
+    poolSize: 3,
     fit: "contain",
     alpha: true
   });
@@ -4905,6 +4957,8 @@ var VideoForPreviewAssertedShowing = ({
   const effectChainState = useEffectChainState();
   const effectsRef = useRef2(effects);
   effectsRef.current = effects;
+  const onErrorRef = useRef2(onError);
+  onErrorRef.current = onError;
   const effectChainStateRef = useRef2(effectChainState);
   effectChainStateRef.current = effectChainState;
   const parentSequence = useContext4(SequenceContext2);
@@ -5009,7 +5063,7 @@ var VideoForPreviewAssertedShowing = ({
         }
         const handleError = (error, fallbackMessage) => {
           const [action, errorToUse] = callOnErrorAndResolve({
-            onError,
+            onError: onErrorRef.current,
             error,
             disallowFallback: disallowFallbackToOffthreadVideo,
             isClientSideRendering: false,
@@ -5044,7 +5098,7 @@ var VideoForPreviewAssertedShowing = ({
         }
       }).catch((error) => {
         const [action, errorToUse] = callOnErrorAndResolve({
-          onError,
+          onError: onErrorRef.current,
           error,
           disallowFallback: disallowFallbackToOffthreadVideo,
           isClientSideRendering: false,
@@ -5059,7 +5113,7 @@ var VideoForPreviewAssertedShowing = ({
     } catch (error) {
       const [action, errorToUse] = callOnErrorAndResolve({
         error,
-        onError,
+        onError: onErrorRef.current,
         disallowFallback: disallowFallbackToOffthreadVideo,
         isClientSideRendering: false,
         clientSideError: error
@@ -5090,7 +5144,6 @@ var VideoForPreviewAssertedShowing = ({
     preloadedSrc,
     sharedAudioContext,
     videoConfig.fps,
-    onError,
     credentials,
     initialRequestInit,
     setMediaDurationInSeconds

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@remotion/media",
-	"version": "4.0.484",
+	"version": "4.0.485",
 	"main": "dist/index.js",
 	"types": "dist/index.d.ts",
 	"module": "dist/esm/index.mjs",
@@ -22,8 +22,8 @@
 		"make": "tsgo && bun --env-file=../.env.bundle bundle.ts"
 	},
 	"dependencies": {
-		"mediabunny": "1.47.0",
-		"remotion": "4.0.484",
+		"mediabunny": "1.50.3",
+		"remotion": "4.0.485",
 		"zod": "4.3.6"
 	},
 	"peerDependencies": {
@@ -31,8 +31,8 @@
 		"react-dom": ">=16.8.0"
 	},
 	"devDependencies": {
-		"@remotion/eslint-config-internal": "4.0.484",
-		"@remotion/player": "4.0.484",
+		"@remotion/eslint-config-internal": "4.0.485",
+		"@remotion/player": "4.0.485",
 		"@vitest/browser-webdriverio": "4.0.9",
 		"eslint": "9.19.0",
 		"react": "19.2.3",