@remotion/media 4.0.446 → 4.0.448

package/dist/audio-decode-scheduler.d.ts

@@ -0,0 +1,14 @@
+export declare class AudioDecodeScheduler {
+    private activeTurns;
+    private nextId;
+    private queue;
+    private pendingBatch;
+    private batchTimer;
+    requestTurn(priority: number): Promise<number>;
+    releaseTurn(id: number): void;
+    private processBatch;
+    private grant;
+    private getMinActivePriority;
+    private grantEligibleWaiters;
+}
+export declare const getAudioDecodeScheduler: (audioContext: AudioContext) => AudioDecodeScheduler;

package/dist/convert-audiodata/resample-audiodata.d.ts

@@ -1,5 +1,5 @@
 export declare const TARGET_NUMBER_OF_CHANNELS = 2;
-export declare const TARGET_SAMPLE_RATE = 48000;
+export declare const getTargetSampleRate: () => number;
 export declare const resampleAudioData: ({ srcNumberOfChannels, sourceChannels, destination, targetFrames, chunkSize, }: {
     srcNumberOfChannels: number;
     sourceChannels: Int16Array<ArrayBufferLike>;

package/dist/esm/index.mjs

@@ -381,7 +381,7 @@ var isAlreadyQueued = (time, queuedPeriod) => {
 
 // src/make-iterator-with-priming.ts
 var AUDIO_PRIMING_SECONDS = 0.5;
-var PREDECODE_AHEAD_SECONDS = 8;
+var PREDECODE_AHEAD_SECONDS = 2;
 function makePredecodingIterator(inner) {
   const buffer = [];
   let consumerEndTime = 0;
@@ -564,7 +564,7 @@ var makePrewarmedAudioIteratorCache = (audioSink) => {
 };
 
 // src/audio-iterator-manager.ts
-var MAX_BUFFER_AHEAD_SECONDS = 8;
+var MAX_BUFFER_AHEAD_SECONDS = 2;
 var audioIteratorManager = ({
   audioTrack,
   delayPlaybackHandleIfNotPremounting,
@@ -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,
@@ -3259,7 +3261,12 @@ var applyVolume = (array, volume) => {
 
 // src/convert-audiodata/resample-audiodata.ts
 var TARGET_NUMBER_OF_CHANNELS = 2;
-var TARGET_SAMPLE_RATE = 48000;
+var getTargetSampleRate = () => {
+  if (typeof window !== "undefined" && window.remotion_sampleRate) {
+    return window.remotion_sampleRate;
+  }
+  return 48000;
+};
 var fixFloatingPoint = (value) => {
   if (value % 1 < 0.0000001) {
     return Math.floor(value);
@@ -3392,7 +3399,7 @@ var convertAudioData = ({
     sampleRate: currentSampleRate,
     numberOfFrames
   } = audioData;
-  const ratio = currentSampleRate / TARGET_SAMPLE_RATE;
+  const ratio = currentSampleRate / getTargetSampleRate();
   const frameOffset = Math.floor(fixFloatingPoint2(trimStartInSeconds * audioData.sampleRate));
   const unroundedFrameCount = numberOfFrames - trimEndInSeconds * audioData.sampleRate - frameOffset;
   const frameCount = isLast ? ceilButNotIfFloatingPointIssue(unroundedFrameCount) : Math.round(unroundedFrameCount);
@@ -3439,7 +3446,7 @@ var convertAudioData = ({
       data: srcChannels,
       numberOfFrames: newNumberOfFrames,
       timestamp: audioDataTimestamp * 1e6 + fixFloatingPoint2(timestampOffsetMicroseconds),
-      durationInMicroSeconds: fixFloatingPoint2(newNumberOfFrames / TARGET_SAMPLE_RATE * 1e6)
+      durationInMicroSeconds: fixFloatingPoint2(newNumberOfFrames / getTargetSampleRate() * 1e6)
     };
   }
   resampleAudioData({
@@ -3453,7 +3460,7 @@ var convertAudioData = ({
     data,
     numberOfFrames: newNumberOfFrames,
     timestamp: audioDataTimestamp * 1e6 + fixFloatingPoint2(timestampOffsetMicroseconds),
-    durationInMicroSeconds: fixFloatingPoint2(newNumberOfFrames / TARGET_SAMPLE_RATE * 1e6)
+    durationInMicroSeconds: fixFloatingPoint2(newNumberOfFrames / getTargetSampleRate() * 1e6)
   };
   return newAudioData;
 };
@@ -3725,12 +3732,12 @@ var extractAudioInternal = async ({
       if (isFirstSample) {
         trimStartInSeconds = fixFloatingPoint2(timeInSeconds - sample.timestamp);
         if (trimStartInSeconds < 0) {
-          const silenceFrames = Math.ceil(fixFloatingPoint2(-trimStartInSeconds * TARGET_SAMPLE_RATE));
+          const silenceFrames = Math.ceil(fixFloatingPoint2(-trimStartInSeconds * getTargetSampleRate()));
           leadingSilence = {
             data: new Int16Array(silenceFrames * TARGET_NUMBER_OF_CHANNELS),
             numberOfFrames: silenceFrames,
             timestamp: timeInSeconds * 1e6,
-            durationInMicroSeconds: silenceFrames / TARGET_SAMPLE_RATE * 1e6
+            durationInMicroSeconds: silenceFrames / getTargetSampleRate() * 1e6
           };
           trimStartInSeconds = 0;
         }
@@ -4381,7 +4388,7 @@ var AudioForRendering = ({
           audio: environment.isClientSideRendering ? audio.data : Array.from(audio.data),
           frame: absoluteFrame,
           timestamp: audio.timestamp,
-          duration: audio.numberOfFrames / TARGET_SAMPLE_RATE * 1e6,
+          duration: audio.numberOfFrames / getTargetSampleRate() * 1e6,
           toneFrequency: toneFrequency ?? 1
         });
       }
@@ -4521,6 +4528,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 +4611,8 @@ var VideoForPreviewAssertedShowing = ({
   onError,
   credentials,
   controls,
-  objectFit: objectFitProp
+  objectFit: objectFitProp,
+  _experimentalInitiallyDrawCachedFrame
 }) => {
   const src = usePreload2(unpreloadedSrc);
   const canvasRef = useRef2(null);
@@ -4658,6 +4689,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 +4795,7 @@ var VideoForPreviewAssertedShowing = ({
         if (result.type === "success") {
           setMediaPlayerReady(true);
           setMediaDurationInSeconds(result.durationInSeconds);
+          hasDrawnRealFrameRef.current = true;
         }
       }).catch((error) => {
         const [action, errorToUse] = callOnErrorAndResolve({
@@ -4763,6 +4833,7 @@ var VideoForPreviewAssertedShowing = ({
       }
       setMediaPlayerReady(false);
       setShouldFallbackToNativeVideo(false);
+      hasDrawnRealFrameRef.current = false;
     };
   }, [
     audioStreamIndex,
@@ -5087,7 +5158,7 @@ var VideoForRendering = ({
           audio: environment.isClientSideRendering ? audio.data : Array.from(audio.data),
           frame: absoluteFrame,
           timestamp: audio.timestamp,
-          duration: audio.numberOfFrames / TARGET_SAMPLE_RATE * 1e6,
+          duration: audio.numberOfFrames / getTargetSampleRate() * 1e6,
           toneFrequency
         });
       }
@@ -5283,7 +5354,8 @@ var InnerVideo = ({
   onError,
   credentials,
   controls,
-  objectFit
+  objectFit,
+  _experimentalInitiallyDrawCachedFrame
 }) => {
   const environment = useRemotionEnvironment4();
   if (typeof src !== "string") {
@@ -5355,7 +5427,8 @@ var InnerVideo = ({
     onError,
     credentials,
     controls,
-    objectFit
+    objectFit,
+    _experimentalInitiallyDrawCachedFrame
   });
 };
 var VideoInner = ({
@@ -5387,6 +5460,7 @@ var VideoInner = ({
   credentials,
   controls,
   objectFit,
+  _experimentalInitiallyDrawCachedFrame,
   from,
   durationInFrames
 }) => {
@@ -5424,7 +5498,8 @@ var VideoInner = ({
       onError,
       credentials,
       controls,
-      objectFit: objectFit ?? "contain"
+      objectFit: objectFit ?? "contain",
+      _experimentalInitiallyDrawCachedFrame: _experimentalInitiallyDrawCachedFrame ?? false
     })
   });
 };
@@ -5435,6 +5510,7 @@ Internals23.addSequenceStackTraces(Video);
 var experimental_Audio = Audio;
 var experimental_Video = Video;
 export {
+  getTargetSampleRate,
   experimental_Video,
   experimental_Audio,
   Video,

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;
@@ -47,4 +48,5 @@ export { AudioForPreview } from './audio/audio-for-preview';
 export { AudioProps, FallbackHtml5AudioProps } from './audio/props';
 export { MediaErrorAction } from './on-error';
 export { FallbackOffthreadVideoProps, VideoObjectFit, VideoProps, } from './video/props';
+export { getTargetSampleRate } from './convert-audiodata/resample-audiodata';
 export { Audio, Video };

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