@remotion/media 4.0.454 → 4.0.455

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

@@ -86,7 +86,7 @@ export declare const drawPreviewOverlay: ({ context, audioTime, audioContextStat
                 frame: import("mediabunny").WrappedCanvas;
             };
         } | null;
-        drawFrame: (frame: import("mediabunny").WrappedCanvas) => void;
+        drawFrame: (frame: import("mediabunny").WrappedCanvas) => Promise<void>;
         getFramesRendered: () => number;
     } | null;
     playbackRate: number;

package/dist/esm/index.mjs

@@ -765,6 +765,21 @@ var getDurationOrCompute = async (input) => {
   }) ?? input.computeDuration(undefined, { skipLiveWait: true });
 };
 
+// src/helpers/resolve-audio-track.ts
+var resolveAudioTrack = async ({
+  videoTrack,
+  audioTracks,
+  audioStreamIndex
+}) => {
+  if (audioStreamIndex !== null) {
+    return audioTracks[audioStreamIndex] ?? null;
+  }
+  if (videoTrack) {
+    return await videoTrack.getPrimaryPairableAudioTrack() ?? null;
+  }
+  return audioTracks[0] ?? null;
+};
+
 // src/is-type-of-error.ts
 function isNetworkError(error) {
   if (error.message.includes("Failed to fetch") || error.message.includes("Load failed") || error.message.includes("NetworkError when attempting to fetch resource")) {
@@ -1020,6 +1035,7 @@ var createVideoIterator = async (timeToSeek, cache) => {
 };
 
 // src/video-iterator-manager.ts
+var { runEffectChain } = Internals3;
 var videoIteratorManager = async ({
   delayPlaybackHandleIfNotPremounting,
   canvas,
@@ -1030,7 +1046,10 @@ var videoIteratorManager = async ({
   videoTrack,
   getLoopSegmentMediaEndTimestamp,
   getStartTime,
-  getIsLooping
+  getIsLooping,
+  getEffects,
+  getEffectChainState,
+  getCurrentFrame
 }) => {
   let videoIteratorsCreated = 0;
   let videoFrameIterator = null;
@@ -1050,10 +1069,24 @@ var videoIteratorManager = async ({
     alpha: true
   });
   const prewarmedVideoIteratorCache = makePrewarmedVideoIteratorCache(canvasSink);
-  const drawFrame = (frame) => {
+  const drawFrame = async (frame) => {
     if (context && canvas) {
-      context.clearRect(0, 0, canvas.width, canvas.height);
-      context.drawImage(frame.canvas, 0, 0);
+      const effects = getEffects();
+      const chainState = getEffectChainState(canvas.width, canvas.height);
+      if (effects.length > 0 && chainState && canvas instanceof HTMLCanvasElement) {
+        await runEffectChain({
+          state: chainState,
+          source: frame.canvas,
+          effects,
+          output: canvas,
+          frame: getCurrentFrame(),
+          width: canvas.width,
+          height: canvas.height
+        });
+      } else {
+        context.clearRect(0, 0, canvas.width, canvas.height);
+        context.drawImage(frame.canvas, 0, 0);
+      }
     }
     framesRendered++;
     drawDebugOverlay();
@@ -1084,7 +1117,7 @@ var videoIteratorManager = async ({
       if (!iterator.initialFrame) {
         return;
       }
-      drawFrame(iterator.initialFrame);
+      await drawFrame(iterator.initialFrame);
     } catch (_catch) {
       var _err = _catch, _hasErr = 1;
     } finally {
@@ -1104,7 +1137,7 @@ var videoIteratorManager = async ({
     }
     const videoSatisfyResult = videoFrameIterator.tryToSatisfySeek(newTime);
     if (videoSatisfyResult.type === "satisfied") {
-      drawFrame(videoSatisfyResult.frame);
+      await drawFrame(videoSatisfyResult.frame);
       return;
     }
     if (nonce.isStale()) {
@@ -1158,6 +1191,9 @@ class MediaPlayer {
   debugOverlay = false;
   nonceManager;
   onVideoFrameCallback = null;
+  getEffects;
+  getEffectChainState;
+  getCurrentFrame;
   initializationPromise = null;
   bufferState;
   isPremounting;
@@ -1184,7 +1220,10 @@ class MediaPlayer {
     playing,
     sequenceOffset,
     credentials,
-    tagType
+    tagType,
+    getEffects,
+    getEffectChainState,
+    getCurrentFrame
   }) {
     this.canvas = canvas ?? null;
     this.src = src;
@@ -1213,6 +1252,9 @@ class MediaPlayer {
       formats: ALL_FORMATS
     });
     this.tagType = tagType;
+    this.getEffects = getEffects;
+    this.getEffectChainState = getEffectChainState;
+    this.getCurrentFrame = getCurrentFrame;
     if (canvas) {
       const context = canvas.getContext("2d", {
         alpha: true,
@@ -1288,7 +1330,11 @@ class MediaPlayer {
           return { type: "disposed" };
         }
         this.totalDuration = durationInSeconds;
-        const audioTrack = await (this.audioStreamIndex === null ? videoTrack?.getPrimaryPairableAudioTrack() : audioTracks[this.audioStreamIndex] ?? null);
+        const audioTrack = await resolveAudioTrack({
+          videoTrack,
+          audioTracks,
+          audioStreamIndex: this.audioStreamIndex
+        });
         if (!videoTrack && !audioTrack) {
           return { type: "no-tracks" };
         }
@@ -1316,7 +1362,10 @@ class MediaPlayer {
             drawDebugOverlay: this.drawDebugOverlay,
             getLoopSegmentMediaEndTimestamp: () => this.getLoopSegmentMediaEndTimestamp(),
             getStartTime: () => this.getStartTime(),
-            getIsLooping: () => this.loop
+            getIsLooping: () => this.loop,
+            getEffects: this.getEffects,
+            getEffectChainState: this.getEffectChainState,
+            getCurrentFrame: this.getCurrentFrame
           });
         }
         const startTime = this.getTrimmedTime(startTimeUnresolved);
@@ -1877,7 +1926,8 @@ var useMediaInTimeline = ({
   loopDisplay,
   trimBefore,
   trimAfter,
-  controls
+  controls,
+  _experimentalEffects
 }) => {
   const parentSequence = useContext2(Internals7.SequenceContext);
   const startsAt = Internals7.useMediaStartsAt();
@@ -1930,7 +1980,8 @@ var useMediaInTimeline = ({
       stack,
       premountDisplay,
       postmountDisplay,
-      controls: controls ?? null
+      controls: controls ?? null,
+      effects: _experimentalEffects
     });
     return () => {
       unregisterSequence(mediaId);
@@ -1957,7 +2008,8 @@ var useMediaInTimeline = ({
     startsAt,
     unregisterSequence,
     volumes,
-    trimBefore
+    trimBefore,
+    _experimentalEffects
   ]);
   return {
     id: mediaId
@@ -2042,6 +2094,9 @@ var AudioForPreviewAssertedShowing = ({
     trimAfter,
     trimBefore
   });
+  const effects = useMemo2(() => {
+    return [];
+  }, []);
   useMediaInTimeline({
     volume,
     mediaVolume,
@@ -2056,7 +2111,8 @@ var AudioForPreviewAssertedShowing = ({
     loopDisplay,
     trimAfter,
     trimBefore,
-    controls
+    controls,
+    _experimentalEffects: effects
   });
   const bufferingContext = useContext3(Internals8.BufferingContextReact);
   if (!bufferingContext) {
@@ -2138,7 +2194,10 @@ var AudioForPreviewAssertedShowing = ({
         playing: initialPlaying.current,
         sequenceOffset: initialSequenceOffset.current,
         credentials,
-        tagType: "audio"
+        tagType: "audio",
+        getEffects: () => [],
+        getEffectChainState: () => null,
+        getCurrentFrame: () => 0
       });
       mediaPlayerRef.current = player;
       player.initialize(currentTimeRef.current, initialMuted.current).then((result) => {
@@ -3555,8 +3614,15 @@ var getSinks = async (src, credentials) => {
     if (format === "network-error") {
       return "network-error";
     }
-    const videoTrack = await input.getPrimaryVideoTrack();
-    const audioTrack = videoTrack === null ? (await input.getAudioTracks())[index ?? 0] : await (index === null ? videoTrack?.getPrimaryPairableAudioTrack() : (await input.getAudioTracks())[index] ?? null);
+    const [videoTrack, audioTracks] = await Promise.all([
+      input.getPrimaryVideoTrack(),
+      input.getAudioTracks()
+    ]);
+    const audioTrack = await resolveAudioTrack({
+      videoTrack,
+      audioTracks,
+      audioStreamIndex: index
+    });
     if (!audioTrack) {
       return "no-audio-track";
     }
@@ -4533,7 +4599,9 @@ var {
   warnAboutTooHighVolume: warnAboutTooHighVolume2,
   usePreload: usePreload2,
   SequenceContext: SequenceContext2,
-  SequenceVisibilityToggleContext
+  SequenceVisibilityToggleContext,
+  useEffectChainState,
+  useMemoizedEffects
 } = Internals19;
 var VideoForPreviewAssertedShowing = ({
   src: unpreloadedSrc,
@@ -4560,7 +4628,8 @@ var VideoForPreviewAssertedShowing = ({
   credentials,
   controls,
   objectFit: objectFitProp,
-  _experimentalInitiallyDrawCachedFrame
+  _experimentalInitiallyDrawCachedFrame,
+  _experimentalEffects
 }) => {
   const src = usePreload2(unpreloadedSrc);
   const canvasRef = useRef2(null);
@@ -4591,6 +4660,14 @@ var VideoForPreviewAssertedShowing = ({
     throw new Error("No video config found");
   }
   warnAboutTooHighVolume2(userPreferredVolume);
+  const effectChainState = useEffectChainState();
+  const experimentalEffectsRef = useRef2(_experimentalEffects);
+  experimentalEffectsRef.current = _experimentalEffects;
+  const memoizedEffects = useMemoizedEffects(_experimentalEffects.flat());
+  const effectChainStateRef = useRef2(effectChainState);
+  effectChainStateRef.current = effectChainState;
+  const frameRef = useRef2(frame);
+  frameRef.current = frame;
   const parentSequence = useContext5(SequenceContext2);
   const isPremounting = Boolean(parentSequence?.premounting);
   const isPostmounting = Boolean(parentSequence?.postmounting);
@@ -4616,7 +4693,8 @@ var VideoForPreviewAssertedShowing = ({
     mediaVolume,
     trimAfter,
     trimBefore,
-    controls
+    controls,
+    _experimentalEffects: memoizedEffects
   });
   const isSequenceHidden = hidden[timelineId] ?? false;
   const currentTime = frame / videoConfig.fps;
@@ -4718,7 +4796,10 @@ var VideoForPreviewAssertedShowing = ({
         playing: initialPlaying.current,
         sequenceOffset: initialSequenceOffset.current,
         credentials,
-        tagType: "video"
+        tagType: "video",
+        getEffects: () => experimentalEffectsRef.current,
+        getEffectChainState: (width, height) => effectChainStateRef.current?.get(width, height),
+        getCurrentFrame: () => frameRef.current
       });
       mediaPlayerRef.current = player;
       player.initialize(currentTimeRef.current, initialMuted.current).then((result) => {
@@ -5314,7 +5395,8 @@ var InnerVideo = ({
   credentials,
   controls,
   objectFit,
-  _experimentalInitiallyDrawCachedFrame
+  _experimentalInitiallyDrawCachedFrame,
+  _experimentalEffects
 }) => {
   const environment = useRemotionEnvironment4();
   if (typeof src !== "string") {
@@ -5386,6 +5468,7 @@ var InnerVideo = ({
     credentials,
     controls,
     objectFit,
+    _experimentalEffects,
     _experimentalInitiallyDrawCachedFrame
   });
 };
@@ -5418,6 +5501,7 @@ var VideoInner = ({
   controls,
   objectFit,
   _experimentalInitiallyDrawCachedFrame,
+  _experimentalEffects,
   from,
   durationInFrames
 }) => {
@@ -5455,7 +5539,8 @@ var VideoInner = ({
       credentials,
       controls,
       objectFit: objectFit ?? "contain",
-      _experimentalInitiallyDrawCachedFrame: _experimentalInitiallyDrawCachedFrame ?? false
+      _experimentalInitiallyDrawCachedFrame: _experimentalInitiallyDrawCachedFrame ?? false,
+      _experimentalEffects: _experimentalEffects ?? []
     })
   });
 };

package/dist/helpers/resolve-audio-track.d.ts

@@ -0,0 +1,6 @@
+import type { InputAudioTrack, InputVideoTrack } from 'mediabunny';
+export declare const resolveAudioTrack: ({ videoTrack, audioTracks, audioStreamIndex, }: {
+    videoTrack: InputVideoTrack | null;
+    audioTracks: InputAudioTrack[];
+    audioStreamIndex: number | null;
+}) => Promise<InputAudioTrack | null>;

package/dist/index.d.ts

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

package/dist/media-player.d.ts

@@ -1,4 +1,6 @@
 import type { LogLevel, useBufferState } from 'remotion';
+import type { EffectChainState } from 'remotion';
+import type { EffectsProp } from 'remotion';
 import { type AudioIteratorManager } from './audio-iterator-manager';
 import type { SharedAudioContextForMediaPlayer } from './shared-audio-context-for-media-player';
 import type { VideoIteratorManager } from './video-iterator-manager';
@@ -39,12 +41,15 @@ export declare class MediaPlayer {
     private debugOverlay;
     private nonceManager;
     private onVideoFrameCallback;
+    private getEffects;
+    private getEffectChainState;
+    private getCurrentFrame;
     private initializationPromise;
     private bufferState;
     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, tagType }: {
+    constructor({ canvas, src, logLevel, sharedAudioContext, loop, trimBefore, trimAfter, playbackRate, globalPlaybackRate, audioStreamIndex, fps, debugOverlay, bufferState, isPremounting, isPostmounting, durationInFrames, onVideoFrameCallback, playing, sequenceOffset, credentials, tagType, getEffects, getEffectChainState, getCurrentFrame }: {
         canvas: HTMLCanvasElement | OffscreenCanvas | null;
         src: string;
         logLevel: LogLevel;
@@ -66,6 +71,9 @@ export declare class MediaPlayer {
         sequenceOffset: number;
         credentials: RequestCredentials | undefined;
         tagType: 'audio' | 'video';
+        getEffects: () => EffectsProp;
+        getEffectChainState: (width: number, height: number) => EffectChainState | null;
+        getCurrentFrame: () => number;
     });
     private input;
     private isDisposalError;

package/dist/use-media-in-timeline.d.ts

@@ -1,6 +1,6 @@
-import type { LoopDisplay, SequenceControls } from 'remotion';
+import type { EffectDefinitionAndStack, LoopDisplay, SequenceControls } from 'remotion';
 import { type VolumeProp } from 'remotion';
-export declare const useMediaInTimeline: ({ volume, mediaVolume, src, mediaType, playbackRate, displayName, stack, showInTimeline, premountDisplay, postmountDisplay, loopDisplay, trimBefore, trimAfter, controls, }: {
+export declare const useMediaInTimeline: ({ volume, mediaVolume, src, mediaType, playbackRate, displayName, stack, showInTimeline, premountDisplay, postmountDisplay, loopDisplay, trimBefore, trimAfter, controls, _experimentalEffects, }: {
     volume: VolumeProp | undefined;
     mediaVolume: number;
     src: string | undefined;
@@ -15,6 +15,7 @@ export declare const useMediaInTimeline: ({ volume, mediaVolume, src, mediaType,
     trimBefore: number | undefined;
     trimAfter: number | undefined;
     controls: SequenceControls | undefined;
+    _experimentalEffects: EffectDefinitionAndStack<unknown>[];
 }) => {
     id: string;
 };

package/dist/video/props.d.ts

@@ -1,4 +1,5 @@
 import type { LogLevel, LoopVolumeCurveBehavior, OnVideoFrame, VolumeProp } from 'remotion';
+import type { EffectsProp } from 'remotion';
 import type { MediaOnError } from '../on-error';
 export type MediaErrorEvent = {
     error: Error;
@@ -51,6 +52,7 @@ type OptionalVideoProps = {
     credentials: RequestCredentials | undefined;
     objectFit: VideoObjectFit;
     _experimentalInitiallyDrawCachedFrame: boolean;
+    _experimentalEffects: EffectsProp;
 };
 export type InnerVideoProps = MandatoryVideoProps & OuterVideoProps & OptionalVideoProps;
 export type VideoProps = MandatoryVideoProps & Partial<OuterVideoProps> & Partial<OptionalVideoProps> & {

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { LogLevel, LoopVolumeCurveBehavior, SequenceControls, VolumeProp } from 'remotion';
+import type { EffectsProp, LogLevel, LoopVolumeCurveBehavior, SequenceControls, VolumeProp } from 'remotion';
 import { type MediaOnError } from '../on-error';
 import type { FallbackOffthreadVideoProps, VideoObjectFit } from './props';
 type VideoForPreviewProps = {
@@ -27,6 +27,7 @@ type VideoForPreviewProps = {
     readonly credentials: RequestCredentials | undefined;
     readonly objectFit: VideoObjectFit;
     readonly _experimentalInitiallyDrawCachedFrame: boolean;
+    readonly _experimentalEffects: EffectsProp;
 };
 export declare const VideoForPreview: React.FC<VideoForPreviewProps & {
     readonly controls: SequenceControls | undefined;

package/dist/video/video.d.ts

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

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

@@ -1,7 +1,8 @@
 import type { InputVideoTrack, WrappedCanvas } from 'mediabunny';
+import type { EffectChainState, EffectsProp } from 'remotion';
 import type { DelayPlaybackIfNotPremounting } from './delay-playback-if-not-premounting';
 import type { Nonce } from './nonce-manager';
-export declare const videoIteratorManager: ({ delayPlaybackHandleIfNotPremounting, canvas, context, drawDebugOverlay, logLevel, getOnVideoFrameCallback, videoTrack, getLoopSegmentMediaEndTimestamp, getStartTime, getIsLooping, }: {
+export declare const videoIteratorManager: ({ delayPlaybackHandleIfNotPremounting, canvas, context, drawDebugOverlay, logLevel, getOnVideoFrameCallback, videoTrack, getLoopSegmentMediaEndTimestamp, getStartTime, getIsLooping, getEffects, getEffectChainState, getCurrentFrame, }: {
     videoTrack: InputVideoTrack;
     delayPlaybackHandleIfNotPremounting: () => DelayPlaybackIfNotPremounting;
     context: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D | null;
@@ -12,6 +13,9 @@ export declare const videoIteratorManager: ({ delayPlaybackHandleIfNotPremountin
     getLoopSegmentMediaEndTimestamp: () => number;
     getStartTime: () => number;
     getIsLooping: () => boolean;
+    getEffects: () => EffectsProp;
+    getEffectChainState: (width: number, height: number) => EffectChainState | null;
+    getCurrentFrame: () => number;
 }) => Promise<{
     startVideoIterator: (timeToSeek: number, nonce: Nonce) => Promise<void>;
     getVideoIteratorsCreated: () => number;
@@ -32,7 +36,7 @@ export declare const videoIteratorManager: ({ delayPlaybackHandleIfNotPremountin
             frame: WrappedCanvas;
         };
     } | null;
-    drawFrame: (frame: WrappedCanvas) => void;
+    drawFrame: (frame: WrappedCanvas) => Promise<void>;
     getFramesRendered: () => number;
 }>;
 export type VideoIteratorManager = Awaited<ReturnType<typeof videoIteratorManager>>;

package/package.json

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