@remotion/media 4.0.445 → 4.0.447

package/dist/audio/props.d.ts

@@ -9,6 +9,14 @@ export type FallbackHtml5AudioProps = {
 };
 export type AudioProps = {
     src: string;
+    /**
+     * When set, `<Audio>` applies timing via an inner `<Sequence layout="none">` that is hidden from the timeline (`showInTimeline={false}`) so the clip still appears once as media.
+     */
+    from?: number;
+    /**
+     * When set with `from`, bounds the clip in frames. Defaults to `Infinity` like `<Sequence>`.
+     */
+    durationInFrames?: number;
     trimBefore?: number;
     trimAfter?: number;
     volume?: VolumeProp;

package/dist/draw-with-object-fit.d.ts

@@ -0,0 +1,14 @@
+export type ObjectFitValue = 'fill' | 'contain' | 'cover' | 'none' | 'scale-down';
+/**
+ * Draws a source image onto a canvas context with the specified object-fit behavior.
+ * This implements object-fit at the canvas drawing level, which is more reliable
+ * than CSS object-fit on canvas elements.
+ */
+export declare const drawWithObjectFit: (ctx: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D, source: CanvasImageSource, options: {
+    sourceWidth: number;
+    sourceHeight: number;
+    destWidth: number;
+    destHeight: number;
+    fit: ObjectFitValue;
+}) => void;
+export declare const parseObjectFit: (value: string | undefined) => ObjectFitValue | null;

package/dist/esm/index.mjs

@@ -37,7 +37,7 @@ var __callDispose = (stack, error, hasError) => {
 };
 
 // src/audio/audio.tsx
-import { Internals as Internals19, useRemotionEnvironment as useRemotionEnvironment2 } from "remotion";
+import { Internals as Internals19, Sequence, useRemotionEnvironment as useRemotionEnvironment2 } from "remotion";
 
 // src/audio/audio-for-preview.tsx
 import { useContext as useContext3, useEffect as useEffect2, useMemo as useMemo2, useRef, useState as useState2 } from "react";
@@ -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,
@@ -4469,29 +4471,40 @@ var audioSchema = {
   loop: { type: "boolean", default: false, description: "Loop" }
 };
 var AudioInner = (props) => {
-  const { name, stack, showInTimeline, controls, ...otherProps } = props;
+  const {
+    name,
+    stack,
+    showInTimeline,
+    controls,
+    from,
+    durationInFrames,
+    ...otherProps
+  } = props;
   const environment = useRemotionEnvironment2();
   if (typeof props.src !== "string") {
     throw new TypeError(`The \`<Audio>\` tag requires a string for \`src\`, but got ${JSON.stringify(props.src)} instead.`);
   }
   validateMediaProps({ playbackRate: props.playbackRate, volume: props.volume }, "Audio");
-  if (environment.isRendering) {
-    return /* @__PURE__ */ jsx3(AudioForRendering, {
+  return /* @__PURE__ */ jsx3(Sequence, {
+    layout: "none",
+    from: from ?? 0,
+    durationInFrames: durationInFrames ?? Infinity,
+    showInTimeline: false,
+    children: environment.isRendering ? /* @__PURE__ */ jsx3(AudioForRendering, {
       ...otherProps
-    });
-  }
-  return /* @__PURE__ */ jsx3(AudioForPreview, {
-    name,
-    ...otherProps,
-    stack: stack ?? null,
-    controls
+    }) : /* @__PURE__ */ jsx3(AudioForPreview, {
+      name,
+      ...otherProps,
+      stack: stack ?? null,
+      controls
+    })
   });
 };
 var Audio = Internals19.wrapInSchema(AudioInner, audioSchema);
 Internals19.addSequenceStackTraces(Audio);
 
 // src/video/video.tsx
-import { Internals as Internals23, useRemotionEnvironment as useRemotionEnvironment4 } from "remotion";
+import { Internals as Internals23, Sequence as Sequence2, useRemotionEnvironment as useRemotionEnvironment4 } from "remotion";
 
 // src/video/video-for-preview.tsx
 import {
@@ -4510,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/;
@@ -4570,7 +4606,8 @@ var VideoForPreviewAssertedShowing = ({
   onError,
   credentials,
   controls,
-  objectFit: objectFitProp
+  objectFit: objectFitProp,
+  _experimentalInitiallyDrawCachedFrame
 }) => {
   const src = usePreload2(unpreloadedSrc);
   const canvasRef = useRef2(null);
@@ -4647,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;
@@ -4715,6 +4790,7 @@ var VideoForPreviewAssertedShowing = ({
         if (result.type === "success") {
           setMediaPlayerReady(true);
           setMediaDurationInSeconds(result.durationInSeconds);
+          hasDrawnRealFrameRef.current = true;
         }
       }).catch((error) => {
         const [action, errorToUse] = callOnErrorAndResolve({
@@ -4752,6 +4828,7 @@ var VideoForPreviewAssertedShowing = ({
       }
       setMediaPlayerReady(false);
       setShouldFallbackToNativeVideo(false);
+      hasDrawnRealFrameRef.current = false;
     };
   }, [
     audioStreamIndex,
@@ -5272,7 +5349,8 @@ var InnerVideo = ({
   onError,
   credentials,
   controls,
-  objectFit
+  objectFit,
+  _experimentalInitiallyDrawCachedFrame
 }) => {
   const environment = useRemotionEnvironment4();
   if (typeof src !== "string") {
@@ -5344,7 +5422,8 @@ var InnerVideo = ({
     onError,
     credentials,
     controls,
-    objectFit
+    objectFit,
+    _experimentalInitiallyDrawCachedFrame
   });
 };
 var VideoInner = ({
@@ -5375,38 +5454,48 @@ var VideoInner = ({
   onError,
   credentials,
   controls,
-  objectFit
+  objectFit,
+  _experimentalInitiallyDrawCachedFrame,
+  from,
+  durationInFrames
 }) => {
   const fallbackLogLevel = Internals23.useLogLevel();
-  return /* @__PURE__ */ jsx6(InnerVideo, {
-    audioStreamIndex: audioStreamIndex ?? 0,
-    className,
-    delayRenderRetries: delayRenderRetries ?? null,
-    delayRenderTimeoutInMilliseconds: delayRenderTimeoutInMilliseconds ?? null,
-    disallowFallbackToOffthreadVideo: disallowFallbackToOffthreadVideo ?? false,
-    fallbackOffthreadVideoProps: fallbackOffthreadVideoProps ?? {},
-    logLevel: logLevel ?? fallbackLogLevel,
-    loop: loop ?? false,
-    loopVolumeCurveBehavior: loopVolumeCurveBehavior ?? "repeat",
-    muted: muted ?? false,
-    name,
-    onVideoFrame,
-    playbackRate: playbackRate ?? 1,
-    showInTimeline: showInTimeline ?? true,
-    src,
-    style: style ?? {},
-    trimAfter,
-    trimBefore,
-    volume: volume ?? 1,
-    toneFrequency: toneFrequency ?? 1,
-    stack,
-    debugOverlay: debugOverlay ?? false,
-    debugAudioScheduling: debugAudioScheduling ?? false,
-    headless: headless ?? false,
-    onError,
-    credentials,
-    controls,
-    objectFit: objectFit ?? "contain"
+  return /* @__PURE__ */ jsx6(Sequence2, {
+    layout: "none",
+    from: from ?? 0,
+    durationInFrames: durationInFrames ?? Infinity,
+    showInTimeline: false,
+    children: /* @__PURE__ */ jsx6(InnerVideo, {
+      audioStreamIndex: audioStreamIndex ?? 0,
+      className,
+      delayRenderRetries: delayRenderRetries ?? null,
+      delayRenderTimeoutInMilliseconds: delayRenderTimeoutInMilliseconds ?? null,
+      disallowFallbackToOffthreadVideo: disallowFallbackToOffthreadVideo ?? false,
+      fallbackOffthreadVideoProps: fallbackOffthreadVideoProps ?? {},
+      logLevel: logLevel ?? fallbackLogLevel,
+      loop: loop ?? false,
+      loopVolumeCurveBehavior: loopVolumeCurveBehavior ?? "repeat",
+      muted: muted ?? false,
+      name,
+      onVideoFrame,
+      playbackRate: playbackRate ?? 1,
+      showInTimeline: showInTimeline ?? true,
+      src,
+      style: style ?? {},
+      trimAfter,
+      trimBefore,
+      volume: volume ?? 1,
+      toneFrequency: toneFrequency ?? 1,
+      stack,
+      debugOverlay: debugOverlay ?? false,
+      debugAudioScheduling: debugAudioScheduling ?? false,
+      headless: headless ?? false,
+      onError,
+      credentials,
+      controls,
+      objectFit: objectFit ?? "contain",
+      _experimentalInitiallyDrawCachedFrame: _experimentalInitiallyDrawCachedFrame ?? false
+    })
   });
 };
 var Video = Internals23.wrapInSchema(VideoInner, videoSchema);

package/dist/index.d.ts

@@ -39,7 +39,11 @@ 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;
+}>;
 export { AudioForPreview } from './audio/audio-for-preview';
 export { AudioProps, FallbackHtml5AudioProps } from './audio/props';
 export { MediaErrorAction } from './on-error';

package/dist/video/props.d.ts

@@ -51,7 +51,17 @@ 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>;
+export type VideoProps = MandatoryVideoProps & Partial<OuterVideoProps> & Partial<OptionalVideoProps> & {
+    /**
+     * When set, `<Video>` applies timing via an inner `<Sequence layout="none">` that is hidden from the timeline (`showInTimeline={false}`) so the clip still appears once as media.
+     */
+    from?: number;
+    /**
+     * Bounds the clip in frames together with `from`. Defaults to `Infinity` like `<Sequence>`.
+     */
+    durationInFrames?: number;
+};
 export {};

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,4 +31,8 @@ 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.445",
+	"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.445",
+		"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.445",
+		"@remotion/eslint-config-internal": "4.0.447",
 		"@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;