@remotion/media 4.0.452 → 4.0.453

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

@@ -0,0 +1,13 @@
+import type { CanvasSink, WrappedCanvas } from 'mediabunny';
+export type CanvasAheadOfTimeNext = {
+    type: 'ready';
+    frame: WrappedCanvas | null;
+} | {
+    type: 'pending';
+    wait: () => Promise<WrappedCanvas | null>;
+};
+export declare const canvasesAheadOfTime: (videoSink: CanvasSink, startTimestamp?: number | undefined) => {
+    next: () => CanvasAheadOfTimeNext;
+    closeIterator: () => Promise<void>;
+};
+export type CanvasAheadOfTimeIterator = ReturnType<typeof canvasesAheadOfTime>;

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

@@ -78,13 +78,13 @@ export declare const drawPreviewOverlay: ({ context, audioTime, audioContextStat
             destroy: () => void;
             initialFrame: import("mediabunny").WrappedCanvas | null;
             isDestroyed: () => boolean;
-            tryToSatisfySeek: (time: number) => Promise<{
+            tryToSatisfySeek: (time: number) => {
                 type: "not-satisfied";
                 reason: string;
             } | {
                 type: "satisfied";
                 frame: import("mediabunny").WrappedCanvas;
-            }>;
+            };
         } | null;
         drawFrame: (frame: import("mediabunny").WrappedCanvas) => void;
         getFramesRendered: () => number;

package/dist/esm/index.mjs

@@ -45,7 +45,7 @@ import {
   Internals as Internals8,
   Audio as RemotionAudio,
   useBufferState,
-  useCurrentFrame as useCurrentFrame2,
+  useCurrentFrame,
   useVideoConfig as useVideoConfig2
 } from "remotion";
 
@@ -788,12 +788,77 @@ var makeNonceManager = () => {
 import { CanvasSink } from "mediabunny";
 import { Internals as Internals3 } from "remotion";
 
+// src/canvas-ahead-of-time.ts
+var canvasesAheadOfTime = (videoSink, startTimestamp) => {
+  const iterator = videoSink.canvases(startTimestamp);
+  let inFlight = iterator.next();
+  let resolved = null;
+  const trackResolution = () => {
+    const captured = inFlight;
+    captured.then((result) => {
+      if (captured === inFlight) {
+        resolved = result;
+      }
+    }, () => {
+      return;
+    });
+  };
+  trackResolution();
+  const advance = () => {
+    inFlight = iterator.next();
+    resolved = null;
+    trackResolution();
+  };
+  const next = () => {
+    if (resolved) {
+      if (resolved.done) {
+        return { type: "ready", frame: null };
+      }
+      const frame = resolved.value;
+      advance();
+      return { type: "ready", frame };
+    }
+    const captured = inFlight;
+    return {
+      type: "pending",
+      wait: async () => {
+        const result = await captured;
+        if (captured === inFlight && !result.done) {
+          advance();
+        }
+        return result.done ? null : result.value;
+      }
+    };
+  };
+  const closeFrame = (frame) => {
+    frame.close?.();
+  };
+  const closeIterator = async () => {
+    if (resolved) {
+      if (!resolved.done) {
+        closeFrame(resolved.value);
+      }
+    } else {
+      const captured = inFlight;
+      captured.then((result) => {
+        if (!result.done) {
+          closeFrame(result.value);
+        }
+      }, () => {
+        return;
+      });
+    }
+    await iterator.return();
+  };
+  return { next, closeIterator };
+};
+
 // src/prewarm-iterator-for-looping.ts
 var makePrewarmedVideoIteratorCache = (videoSink) => {
   const prewarmedVideoIterators = new Map;
   const prewarmIteratorForLooping = ({ timeToSeek }) => {
     if (!prewarmedVideoIterators.has(timeToSeek)) {
-      prewarmedVideoIterators.set(timeToSeek, videoSink.canvases(timeToSeek));
+      prewarmedVideoIterators.set(timeToSeek, canvasesAheadOfTime(videoSink, timeToSeek));
     }
   };
   const makeIteratorOrUsePrewarmed = (timeToSeek) => {
@@ -802,12 +867,11 @@ var makePrewarmedVideoIteratorCache = (videoSink) => {
       prewarmedVideoIterators.delete(timeToSeek);
       return prewarmedIterator;
     }
-    const iterator = videoSink.canvases(timeToSeek);
-    return iterator;
+    return canvasesAheadOfTime(videoSink, timeToSeek);
   };
   const destroy = () => {
     for (const iterator of prewarmedVideoIterators.values()) {
-      iterator.return();
+      iterator.closeIterator();
     }
     prewarmedVideoIterators.clear();
   };
@@ -828,48 +892,43 @@ var createVideoIterator = async (timeToSeek, cache) => {
   let destroyed = false;
   const iterator = cache.makeIteratorOrUsePrewarmed(timeToSeek);
   let iteratorEnded = false;
-  const initialFrame = (await iterator.next())?.value ?? null;
+  const firstAwait = iterator.next();
+  const initialFrame = firstAwait && firstAwait.type === "ready" ? firstAwait.frame : await firstAwait.wait();
   let lastReturnedFrame = initialFrame;
-  const getNextOrNullIfNotAvailable = async () => {
+  const getNextOrNullIfNotAvailable = () => {
     const next = iterator.next();
-    const result = await Promise.race([
-      next,
-      new Promise((resolve) => {
-        Promise.resolve().then(() => resolve());
-      })
-    ]);
-    if (!result) {
+    if (next.type === "pending") {
       return {
         type: "need-to-wait-for-it",
         waitPromise: async () => {
-          const res = await next;
-          if (res.value) {
-            lastReturnedFrame = res.value;
+          const res = await next.wait();
+          if (res) {
+            lastReturnedFrame = res;
           } else {
             iteratorEnded = true;
           }
-          return res.value;
+          return res;
         }
       };
     }
-    if (result.value) {
-      lastReturnedFrame = result.value;
+    if (next.frame) {
+      lastReturnedFrame = next.frame;
     } else {
       iteratorEnded = true;
     }
     return {
       type: "got-frame-or-end",
-      frame: result.value ?? null
+      frame: next.frame ?? null
     };
   };
   const destroy = () => {
     destroyed = true;
     lastReturnedFrame = null;
-    iterator.return().catch(() => {
+    iterator.closeIterator().catch(() => {
       return;
     });
   };
-  const tryToSatisfySeek = async (time) => {
+  const tryToSatisfySeek = (time) => {
     if (lastReturnedFrame) {
       const frameTimestamp = roundTo4Digits(lastReturnedFrame.timestamp);
       if (roundTo4Digits(time) < frameTimestamp) {
@@ -908,7 +967,7 @@ var createVideoIterator = async (timeToSeek, cache) => {
       };
     }
     while (true) {
-      const frame = await getNextOrNullIfNotAvailable();
+      const frame = getNextOrNullIfNotAvailable();
       if (frame.type === "need-to-wait-for-it") {
         return {
           type: "not-satisfied",
@@ -1034,7 +1093,7 @@ var videoIteratorManager = ({
         });
       }
     }
-    const videoSatisfyResult = await videoFrameIterator.tryToSatisfySeek(newTime);
+    const videoSatisfyResult = videoFrameIterator.tryToSatisfySeek(newTime);
     if (videoSatisfyResult.type === "satisfied") {
       drawFrame(videoSatisfyResult.frame);
       return;
@@ -1068,6 +1127,7 @@ var videoIteratorManager = ({
 
 // src/media-player.ts
 class MediaPlayer {
+  tagType;
   canvas;
   context;
   src;
@@ -1114,7 +1174,8 @@ class MediaPlayer {
     onVideoFrameCallback,
     playing,
     sequenceOffset,
-    credentials
+    credentials,
+    tagType
   }) {
     this.canvas = canvas ?? null;
     this.src = src;
@@ -1142,6 +1203,7 @@ class MediaPlayer {
       } : undefined),
       formats: ALL_FORMATS
     });
+    this.tagType = tagType;
     if (canvas) {
       const context = canvas.getContext("2d", {
         alpha: true,
@@ -1221,7 +1283,7 @@ class MediaPlayer {
         if (!videoTrack && !audioTrack) {
           return { type: "no-tracks" };
         }
-        if (videoTrack) {
+        if (videoTrack && this.tagType === "video") {
           const canDecode = await videoTrack.canDecode();
           if (!canDecode) {
             return { type: "cannot-decode" };
@@ -1778,8 +1840,8 @@ var useCommonEffects = ({
 };
 
 // src/use-media-in-timeline.ts
-import { useContext as useContext2, useState, useEffect } from "react";
-import { Internals as Internals7, useCurrentFrame } from "remotion";
+import { useContext as useContext2, useEffect, useState } from "react";
+import { Internals as Internals7 } from "remotion";
 var useMediaInTimeline = ({
   volume,
   mediaVolume,
@@ -1799,9 +1861,7 @@ var useMediaInTimeline = ({
   const parentSequence = useContext2(Internals7.SequenceContext);
   const startsAt = Internals7.useMediaStartsAt();
   const { registerSequence, unregisterSequence } = useContext2(Internals7.SequenceManager);
-  const [sequenceId] = useState(() => String(Math.random()));
   const [mediaId] = useState(() => String(Math.random()));
-  const frame = useCurrentFrame();
   const {
     volumes,
     duration,
@@ -1830,32 +1890,13 @@ var useMediaInTimeline = ({
     if (!showInTimeline) {
       return;
     }
-    const loopIteration = loopDisplay ? Math.floor(frame / loopDisplay.durationInFrames) : 0;
-    if (loopDisplay) {
-      registerSequence({
-        type: "sequence",
-        premountDisplay,
-        postmountDisplay,
-        parent: parentSequence?.id ?? null,
-        displayName: finalDisplayName,
-        rootId,
-        showInTimeline: true,
-        nonce: nonce.get(),
-        loopDisplay,
-        stack,
-        from: 0,
-        duration,
-        id: sequenceId,
-        controls: null
-      });
-    }
     registerSequence({
       type: mediaType,
       src,
       id: mediaId,
-      duration: loopDisplay?.durationInFrames ?? duration,
-      from: loopDisplay ? loopIteration * loopDisplay.durationInFrames : 0,
-      parent: loopDisplay ? sequenceId : parentSequence?.id ?? null,
+      duration,
+      from: 0,
+      parent: parentSequence?.id ?? null,
       displayName: finalDisplayName,
       rootId,
       volume: volumes,
@@ -1863,17 +1904,14 @@ var useMediaInTimeline = ({
       nonce: nonce.get(),
       startMediaFrom: 0 - startsAt + (trimBefore ?? 0),
       doesVolumeChange,
-      loopDisplay: undefined,
+      loopDisplay,
       playbackRate,
       stack,
-      premountDisplay: null,
-      postmountDisplay: null,
+      premountDisplay,
+      postmountDisplay,
       controls: controls ?? null
     });
     return () => {
-      if (loopDisplay) {
-        unregisterSequence(sequenceId);
-      }
       unregisterSequence(mediaId);
     };
   }, [
@@ -1892,14 +1930,12 @@ var useMediaInTimeline = ({
     premountDisplay,
     registerSequence,
     rootId,
-    sequenceId,
     showInTimeline,
     src,
     stack,
     startsAt,
     unregisterSequence,
     volumes,
-    frame,
     trimBefore
   ]);
   return {
@@ -1943,7 +1979,7 @@ var AudioForPreviewAssertedShowing = ({
   controls
 }) => {
   const videoConfig = useUnsafeVideoConfig();
-  const frame = useCurrentFrame2();
+  const frame = useCurrentFrame();
   const mediaPlayerRef = useRef(null);
   const initialTrimBeforeRef = useRef(trimBefore);
   const initialTrimAfterRef = useRef(trimAfter);
@@ -2080,7 +2116,8 @@ var AudioForPreviewAssertedShowing = ({
         onVideoFrameCallback: null,
         playing: initialPlaying.current,
         sequenceOffset: initialSequenceOffset.current,
-        credentials
+        credentials,
+        tagType: "audio"
       });
       mediaPlayerRef.current = player;
       player.initialize(currentTimeRef.current, initialMuted.current).then((result) => {
@@ -2218,7 +2255,7 @@ var AudioForPreview = ({
 }) => {
   const preloadedSrc = usePreload(src);
   const defaultLogLevel = Internals8.useLogLevel();
-  const frame = useCurrentFrame2();
+  const frame = useCurrentFrame();
   const videoConfig = useVideoConfig2();
   const currentTime = frame / videoConfig.fps;
   const showShow = useMemo2(() => {
@@ -2275,7 +2312,7 @@ import {
   Html5Audio,
   Internals as Internals16,
   random,
-  useCurrentFrame as useCurrentFrame3,
+  useCurrentFrame as useCurrentFrame2,
   useDelayRender,
   useRemotionEnvironment
 } from "remotion";
@@ -4157,7 +4194,7 @@ var AudioForRendering = ({
 }) => {
   const defaultLogLevel = Internals16.useLogLevel();
   const logLevel = overriddenLogLevel ?? defaultLogLevel;
-  const frame = useCurrentFrame3();
+  const frame = useCurrentFrame2();
   const absoluteFrame = Internals16.useTimelinePosition();
   const videoConfig = Internals16.useUnsafeVideoConfig();
   const { registerRenderAsset, unregisterRenderAsset } = useContext4(Internals16.RenderAssetManager);
@@ -4408,7 +4445,7 @@ import {
   Html5Video,
   Internals as Internals19,
   useBufferState as useBufferState2,
-  useCurrentFrame as useCurrentFrame4,
+  useCurrentFrame as useCurrentFrame3,
   useVideoConfig as useVideoConfig3
 } from "remotion";
 
@@ -4500,7 +4537,7 @@ var VideoForPreviewAssertedShowing = ({
   const src = usePreload2(unpreloadedSrc);
   const canvasRef = useRef2(null);
   const videoConfig = useUnsafeVideoConfig2();
-  const frame = useCurrentFrame4();
+  const frame = useCurrentFrame3();
   const mediaPlayerRef = useRef2(null);
   const initialTrimBeforeRef = useRef2(trimBefore);
   const initialTrimAfterRef = useRef2(trimAfter);
@@ -4652,7 +4689,8 @@ var VideoForPreviewAssertedShowing = ({
         onVideoFrameCallback: initialOnVideoFrameRef.current ?? null,
         playing: initialPlaying.current,
         sequenceOffset: initialSequenceOffset.current,
-        credentials
+        credentials,
+        tagType: "video"
       });
       mediaPlayerRef.current = player;
       player.initialize(currentTimeRef.current, initialMuted.current).then((result) => {
@@ -4821,7 +4859,7 @@ var VideoForPreviewAssertedShowing = ({
   });
 };
 var VideoForPreview = (props) => {
-  const frame = useCurrentFrame4();
+  const frame = useCurrentFrame3();
   const videoConfig = useVideoConfig3();
   const currentTime = frame / videoConfig.fps;
   const showShow = useMemo4(() => {
@@ -4866,7 +4904,7 @@ import {
   Internals as Internals20,
   Loop,
   random as random2,
-  useCurrentFrame as useCurrentFrame5,
+  useCurrentFrame as useCurrentFrame4,
   useDelayRender as useDelayRender2,
   useRemotionEnvironment as useRemotionEnvironment3,
   useVideoConfig as useVideoConfig4
@@ -4901,7 +4939,7 @@ var VideoForRendering = ({
   if (!src) {
     throw new TypeError("No `src` was passed to <Video>.");
   }
-  const frame = useCurrentFrame5();
+  const frame = useCurrentFrame4();
   const absoluteFrame = Internals20.useTimelinePosition();
   const { fps } = useVideoConfig4();
   const { registerRenderAsset, unregisterRenderAsset } = useContext6(Internals20.RenderAssetManager);

package/dist/media-player.d.ts

@@ -17,6 +17,7 @@ export type MediaPlayerInitResult = {
     type: 'disposed';
 };
 export declare class MediaPlayer {
+    private tagType;
     private canvas;
     private context;
     private src;
@@ -43,7 +44,7 @@ export declare class MediaPlayer {
     private isPremounting;
     private isPostmounting;
     private seekPromiseChain;
-    constructor({ canvas, src, logLevel, sharedAudioContext, loop, trimBefore, trimAfter, playbackRate, globalPlaybackRate, audioStreamIndex, fps, debugOverlay, bufferState, isPremounting, isPostmounting, durationInFrames, onVideoFrameCallback, playing, sequenceOffset, credentials }: {
+    constructor({ canvas, src, logLevel, sharedAudioContext, loop, trimBefore, trimAfter, playbackRate, globalPlaybackRate, audioStreamIndex, fps, debugOverlay, bufferState, isPremounting, isPostmounting, durationInFrames, onVideoFrameCallback, playing, sequenceOffset, credentials, tagType }: {
         canvas: HTMLCanvasElement | OffscreenCanvas | null;
         src: string;
         logLevel: LogLevel;
@@ -64,6 +65,7 @@ export declare class MediaPlayer {
         playing: boolean;
         sequenceOffset: number;
         credentials: RequestCredentials | undefined;
+        tagType: 'audio' | 'video';
     });
     private input;
     private isDisposalError;

package/dist/prewarm-iterator-for-looping.d.ts

@@ -1,9 +1,12 @@
-import type { CanvasSink, WrappedCanvas } from 'mediabunny';
+import type { CanvasSink } from 'mediabunny';
 export declare const makePrewarmedVideoIteratorCache: (videoSink: CanvasSink) => {
     prewarmIteratorForLooping: ({ timeToSeek }: {
         timeToSeek: number;
     }) => void;
-    makeIteratorOrUsePrewarmed: (timeToSeek: number) => AsyncGenerator<WrappedCanvas, void, unknown>;
+    makeIteratorOrUsePrewarmed: (timeToSeek: number) => {
+        next: () => import("./canvas-ahead-of-time").CanvasAheadOfTimeNext;
+        closeIterator: () => Promise<void>;
+    };
     destroy: () => void;
 };
 export type PrewarmedVideoIteratorCache = ReturnType<typeof makePrewarmedVideoIteratorCache>;

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

@@ -3,18 +3,21 @@ export declare const createVideoIterator: (timeToSeek: number, cache: {
     prewarmIteratorForLooping: ({ timeToSeek }: {
         timeToSeek: number;
     }) => void;
-    makeIteratorOrUsePrewarmed: (timeToSeek: number) => AsyncGenerator<WrappedCanvas, void, unknown>;
+    makeIteratorOrUsePrewarmed: (timeToSeek: number) => {
+        next: () => import("../canvas-ahead-of-time").CanvasAheadOfTimeNext;
+        closeIterator: () => Promise<void>;
+    };
     destroy: () => void;
 }) => Promise<{
     destroy: () => void;
     initialFrame: WrappedCanvas | null;
     isDestroyed: () => boolean;
-    tryToSatisfySeek: (time: number) => Promise<{
+    tryToSatisfySeek: (time: number) => {
         type: "not-satisfied";
         reason: string;
     } | {
         type: "satisfied";
         frame: WrappedCanvas;
-    }>;
+    };
 }>;
 export type VideoIterator = Awaited<ReturnType<typeof createVideoIterator>>;

package/dist/video-iterator-manager.d.ts

@@ -24,13 +24,13 @@ export declare const videoIteratorManager: ({ delayPlaybackHandleIfNotPremountin
         destroy: () => void;
         initialFrame: WrappedCanvas | null;
         isDestroyed: () => boolean;
-        tryToSatisfySeek: (time: number) => Promise<{
+        tryToSatisfySeek: (time: number) => {
             type: "not-satisfied";
             reason: string;
         } | {
             type: "satisfied";
             frame: WrappedCanvas;
-        }>;
+        };
     } | null;
     drawFrame: (frame: WrappedCanvas) => void;
     getFramesRendered: () => number;

package/package.json

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

package/dist/calculate-playbacktime.d.ts

@@ -1,5 +0,0 @@
-export declare const calculatePlaybackTime: ({ audioSyncAnchor, currentTime, playbackRate, }: {
-    audioSyncAnchor: number;
-    currentTime: number;
-    playbackRate: number;
-}) => number;

package/dist/set-global-time-anchor.d.ts

@@ -1,11 +0,0 @@
-export declare const ALLOWED_GLOBAL_TIME_ANCHOR_SHIFT = 0.1;
-export declare const setGlobalTimeAnchor: ({ audioContext, audioSyncAnchor, absoluteTimeInSeconds, globalPlaybackRate, debugAudioScheduling, logLevel, }: {
-    audioContext: AudioContext;
-    audioSyncAnchor: {
-        value: number;
-    };
-    absoluteTimeInSeconds: number;
-    globalPlaybackRate: number;
-    debugAudioScheduling: boolean;
-    logLevel: "error" | "info" | "trace" | "verbose" | "warn";
-}) => void;