@remotion/media 4.0.453 → 4.0.455

package/dist/audio-extraction/extract-audio.d.ts

@@ -7,7 +7,7 @@ type ExtractAudioParams = {
     logLevel: LogLevel;
     loop: boolean;
     playbackRate: number;
-    audioStreamIndex: number;
+    audioStreamIndex: number | null;
     trimBefore: number | undefined;
     trimAfter: number | undefined;
     fps: number;

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

@@ -758,6 +758,28 @@ var drawPreviewOverlay = ({
   }
 };
 
+// src/get-duration-or-compute.ts
+var getDurationOrCompute = async (input) => {
+  return await input.getDurationFromMetadata(undefined, {
+    skipLiveWait: true
+  }) ?? 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")) {
@@ -1013,7 +1035,8 @@ var createVideoIterator = async (timeToSeek, cache) => {
 };
 
 // src/video-iterator-manager.ts
-var videoIteratorManager = ({
+var { runEffectChain } = Internals3;
+var videoIteratorManager = async ({
   delayPlaybackHandleIfNotPremounting,
   canvas,
   context,
@@ -1023,16 +1046,21 @@ var videoIteratorManager = ({
   videoTrack,
   getLoopSegmentMediaEndTimestamp,
   getStartTime,
-  getIsLooping
+  getIsLooping,
+  getEffects,
+  getEffectChainState,
+  getCurrentFrame
 }) => {
   let videoIteratorsCreated = 0;
   let videoFrameIterator = null;
   let framesRendered = 0;
   let currentDelayHandle = null;
   if (canvas) {
-    if (canvas.width !== videoTrack.displayWidth || canvas.height !== videoTrack.displayHeight) {
-      canvas.width = videoTrack.displayWidth;
-      canvas.height = videoTrack.displayHeight;
+    const displayWidth = await videoTrack.getDisplayWidth();
+    const displayHeight = await videoTrack.getDisplayHeight();
+    if (canvas.width !== displayWidth || canvas.height !== displayHeight) {
+      canvas.width = displayWidth;
+      canvas.height = displayHeight;
     }
   }
   const canvasSink = new CanvasSink(videoTrack, {
@@ -1041,10 +1069,24 @@ var videoIteratorManager = ({
     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();
@@ -1075,7 +1117,7 @@ var videoIteratorManager = ({
       if (!iterator.initialFrame) {
         return;
       }
-      drawFrame(iterator.initialFrame);
+      await drawFrame(iterator.initialFrame);
     } catch (_catch) {
       var _err = _catch, _hasErr = 1;
     } finally {
@@ -1095,7 +1137,7 @@ var videoIteratorManager = ({
     }
     const videoSatisfyResult = videoFrameIterator.tryToSatisfySeek(newTime);
     if (videoSatisfyResult.type === "satisfied") {
-      drawFrame(videoSatisfyResult.frame);
+      await drawFrame(videoSatisfyResult.frame);
       return;
     }
     if (nonce.isStale()) {
@@ -1149,6 +1191,9 @@ class MediaPlayer {
   debugOverlay = false;
   nonceManager;
   onVideoFrameCallback = null;
+  getEffects;
+  getEffectChainState;
+  getCurrentFrame;
   initializationPromise = null;
   bufferState;
   isPremounting;
@@ -1175,7 +1220,10 @@ class MediaPlayer {
     playing,
     sequenceOffset,
     credentials,
-    tagType
+    tagType,
+    getEffects,
+    getEffectChainState,
+    getCurrentFrame
   }) {
     this.canvas = canvas ?? null;
     this.src = src;
@@ -1186,7 +1234,7 @@ class MediaPlayer {
     this.loop = loop;
     this.trimBefore = trimBefore;
     this.trimAfter = trimAfter;
-    this.audioStreamIndex = audioStreamIndex ?? 0;
+    this.audioStreamIndex = audioStreamIndex;
     this.fps = fps;
     this.debugOverlay = debugOverlay;
     this.bufferState = bufferState;
@@ -1204,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,
@@ -1271,7 +1322,7 @@ class MediaPlayer {
           return { type: "unknown-container-format" };
         }
         const [durationInSeconds, videoTrack, audioTracks] = await Promise.all([
-          this.input.computeDuration(),
+          getDurationOrCompute(this.input),
           this.input.getPrimaryVideoTrack(),
           this.input.getAudioTracks()
         ]);
@@ -1279,11 +1330,21 @@ class MediaPlayer {
           return { type: "disposed" };
         }
         this.totalDuration = durationInSeconds;
-        const audioTrack = audioTracks[this.audioStreamIndex] ?? null;
+        const audioTrack = await resolveAudioTrack({
+          videoTrack,
+          audioTracks,
+          audioStreamIndex: this.audioStreamIndex
+        });
         if (!videoTrack && !audioTrack) {
           return { type: "no-tracks" };
         }
         if (videoTrack && this.tagType === "video") {
+          if (await videoTrack.isLive()) {
+            throw new Error("Live streams are not currently supported by Remotion. Sorry! Source: " + this.src);
+          }
+          if (await videoTrack.isRelativeToUnixEpoch()) {
+            throw new Error("Streams with UNIX timestamps are not currently supported by Remotion. Sorry! Source: " + this.src);
+          }
           const canDecode = await videoTrack.canDecode();
           if (!canDecode) {
             return { type: "cannot-decode" };
@@ -1291,7 +1352,7 @@ class MediaPlayer {
           if (this.input.disposed) {
             return { type: "disposed" };
           }
-          this.videoIteratorManager = videoIteratorManager({
+          this.videoIteratorManager = await videoIteratorManager({
             videoTrack,
             delayPlaybackHandleIfNotPremounting: this.delayPlaybackHandleIfNotPremounting,
             context: this.context,
@@ -1301,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);
@@ -1309,6 +1373,12 @@ class MediaPlayer {
           throw new Error(`should have asserted that the time is not null`);
         }
         if (audioTrack && this.sharedAudioContext) {
+          if (await audioTrack.isLive()) {
+            throw new Error("Live streams are not currently supported by Remotion. Sorry! Source: " + this.src);
+          }
+          if (await audioTrack.isRelativeToUnixEpoch()) {
+            throw new Error("Streams with UNIX timestamps are not currently supported by Remotion. Sorry! Source: " + this.src);
+          }
           const canDecode = await audioTrack.canDecode();
           if (!canDecode) {
             return { type: "cannot-decode" };
@@ -1856,7 +1926,8 @@ var useMediaInTimeline = ({
   loopDisplay,
   trimBefore,
   trimAfter,
-  controls
+  controls,
+  _experimentalEffects
 }) => {
   const parentSequence = useContext2(Internals7.SequenceContext);
   const startsAt = Internals7.useMediaStartsAt();
@@ -1909,7 +1980,8 @@ var useMediaInTimeline = ({
       stack,
       premountDisplay,
       postmountDisplay,
-      controls: controls ?? null
+      controls: controls ?? null,
+      effects: _experimentalEffects
     });
     return () => {
       unregisterSequence(mediaId);
@@ -1936,7 +2008,8 @@ var useMediaInTimeline = ({
     startsAt,
     unregisterSequence,
     volumes,
-    trimBefore
+    trimBefore,
+    _experimentalEffects
   ]);
   return {
     id: mediaId
@@ -2021,6 +2094,9 @@ var AudioForPreviewAssertedShowing = ({
     trimAfter,
     trimBefore
   });
+  const effects = useMemo2(() => {
+    return [];
+  }, []);
   useMediaInTimeline({
     volume,
     mediaVolume,
@@ -2035,7 +2111,8 @@ var AudioForPreviewAssertedShowing = ({
     loopDisplay,
     trimAfter,
     trimBefore,
-    controls
+    controls,
+    _experimentalEffects: effects
   });
   const bufferingContext = useContext3(Internals8.BufferingContextReact);
   if (!bufferingContext) {
@@ -2106,7 +2183,7 @@ var AudioForPreviewAssertedShowing = ({
         fps: videoConfig.fps,
         canvas: null,
         playbackRate: initialPlaybackRate.current,
-        audioStreamIndex: audioStreamIndex ?? 0,
+        audioStreamIndex: audioStreamIndex ?? null,
         debugOverlay: false,
         bufferState: buffer,
         isPostmounting: initialIsPostmounting.current,
@@ -2117,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) => {
@@ -2283,7 +2363,7 @@ var AudioForPreview = ({
     return null;
   }
   return /* @__PURE__ */ jsx(AudioForPreviewAssertedShowing, {
-    audioStreamIndex: audioStreamIndex ?? 0,
+    audioStreamIndex,
     src: preloadedSrc,
     playbackRate,
     logLevel: logLevel ?? defaultLogLevel,
@@ -3495,6 +3575,12 @@ var getSinks = async (src, credentials) => {
     if (!videoTrack) {
       return "no-video-track";
     }
+    if (await videoTrack.isLive()) {
+      throw new Error("Live streams are not currently supported by Remotion. Sorry! Source: " + src);
+    }
+    if (await videoTrack.isRelativeToUnixEpoch()) {
+      throw new Error("Streams with UNIX timestamps are not currently supported by Remotion. Sorry! Source: " + src);
+    }
     const canDecode = await videoTrack.canDecode();
     if (!canDecode) {
       return "cannot-decode";
@@ -3528,8 +3614,15 @@ var getSinks = async (src, credentials) => {
     if (format === "network-error") {
       return "network-error";
     }
-    const audioTracks = await input.getAudioTracks();
-    const audioTrack = audioTracks[index];
+    const [videoTrack, audioTracks] = await Promise.all([
+      input.getPrimaryVideoTrack(),
+      input.getAudioTracks()
+    ]);
+    const audioTrack = await resolveAudioTrack({
+      videoTrack,
+      audioTracks,
+      audioStreamIndex: index
+    });
     if (!audioTrack) {
       return "no-audio-track";
     }
@@ -3542,11 +3635,12 @@ var getSinks = async (src, credentials) => {
     };
   };
   const getAudioSinksPromise = (index) => {
-    if (audioSinksPromise[index]) {
-      return audioSinksPromise[index];
+    const keyIndex = index === null ? -1 : index;
+    if (audioSinksPromise[keyIndex]) {
+      return audioSinksPromise[keyIndex];
     }
-    audioSinksPromise[index] = getAudioSinks(index);
-    return audioSinksPromise[index];
+    audioSinksPromise[keyIndex] = getAudioSinks(index);
+    return audioSinksPromise[keyIndex];
   };
   return {
     getVideo: () => getVideoSinksPromise(),
@@ -3554,7 +3648,7 @@ var getSinks = async (src, credentials) => {
     actualMatroskaTimestamps: rememberActualMatroskaTimestamps(isMatroska),
     isMatroska,
     getDuration: () => {
-      return input.computeDuration();
+      return getDurationOrCompute(input);
     }
   };
 };
@@ -4250,7 +4344,7 @@ var AudioForRendering = ({
       includeVideo: false,
       isClientSideRendering: environment.isClientSideRendering,
       loop: loop ?? false,
-      audioStreamIndex: audioStreamIndex ?? 0,
+      audioStreamIndex: audioStreamIndex ?? null,
       trimAfter,
       trimBefore,
       fps,
@@ -4505,7 +4599,9 @@ var {
   warnAboutTooHighVolume: warnAboutTooHighVolume2,
   usePreload: usePreload2,
   SequenceContext: SequenceContext2,
-  SequenceVisibilityToggleContext
+  SequenceVisibilityToggleContext,
+  useEffectChainState,
+  useMemoizedEffects
 } = Internals19;
 var VideoForPreviewAssertedShowing = ({
   src: unpreloadedSrc,
@@ -4532,7 +4628,8 @@ var VideoForPreviewAssertedShowing = ({
   credentials,
   controls,
   objectFit: objectFitProp,
-  _experimentalInitiallyDrawCachedFrame
+  _experimentalInitiallyDrawCachedFrame,
+  _experimentalEffects
 }) => {
   const src = usePreload2(unpreloadedSrc);
   const canvasRef = useRef2(null);
@@ -4563,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);
@@ -4588,7 +4693,8 @@ var VideoForPreviewAssertedShowing = ({
     mediaVolume,
     trimAfter,
     trimBefore,
-    controls
+    controls,
+    _experimentalEffects: memoizedEffects
   });
   const isSequenceHidden = hidden[timelineId] ?? false;
   const currentTime = frame / videoConfig.fps;
@@ -4690,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) => {
@@ -5286,7 +5395,8 @@ var InnerVideo = ({
   credentials,
   controls,
   objectFit,
-  _experimentalInitiallyDrawCachedFrame
+  _experimentalInitiallyDrawCachedFrame,
+  _experimentalEffects
 }) => {
   const environment = useRemotionEnvironment4();
   if (typeof src !== "string") {
@@ -5358,6 +5468,7 @@ var InnerVideo = ({
     credentials,
     controls,
     objectFit,
+    _experimentalEffects,
     _experimentalInitiallyDrawCachedFrame
   });
 };
@@ -5390,6 +5501,7 @@ var VideoInner = ({
   controls,
   objectFit,
   _experimentalInitiallyDrawCachedFrame,
+  _experimentalEffects,
   from,
   durationInFrames
 }) => {
@@ -5427,7 +5539,8 @@ var VideoInner = ({
       credentials,
       controls,
       objectFit: objectFit ?? "contain",
-      _experimentalInitiallyDrawCachedFrame: _experimentalInitiallyDrawCachedFrame ?? false
+      _experimentalInitiallyDrawCachedFrame: _experimentalInitiallyDrawCachedFrame ?? false,
+      _experimentalEffects: _experimentalEffects ?? []
     })
   });
 };

package/dist/extract-frame-and-audio.d.ts

@@ -8,7 +8,7 @@ export declare const extractFrameAndAudio: ({ src, timeInSeconds, logLevel, dura
     includeAudio: boolean;
     includeVideo: boolean;
     loop: boolean;
-    audioStreamIndex: number;
+    audioStreamIndex: number | null;
     trimAfter: number | undefined;
     trimBefore: number | undefined;
     fps: number;

package/dist/get-duration-or-compute.d.ts

@@ -0,0 +1,2 @@
+import type { Input } from 'mediabunny';
+export declare const getDurationOrCompute: (input: Input<import("mediabunny").Source>) => Promise<number>;

package/dist/get-sink.d.ts

@@ -2,7 +2,7 @@ import type { GetSink } from './video-extraction/get-frames-since-keyframe';
 export declare const sinkPromises: Record<string, Promise<GetSink>>;
 export declare const getSink: (src: string, logLevel: "error" | "info" | "trace" | "verbose" | "warn", credentials: RequestCredentials | undefined) => Promise<{
     getVideo: () => Promise<import("./video-extraction/get-frames-since-keyframe").VideoSinkResult>;
-    getAudio: (index: number) => Promise<import("./video-extraction/get-frames-since-keyframe").AudioSinkResult>;
+    getAudio: (index: number | null) => Promise<import("./video-extraction/get-frames-since-keyframe").AudioSinkResult>;
     actualMatroskaTimestamps: {
         observeTimestamp: (startTime: number) => void;
         getRealTimestamp: (observedTimestamp: number) => number | null;

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;
@@ -54,7 +59,7 @@ export declare class MediaPlayer {
         trimAfter: number | undefined;
         playbackRate: number;
         globalPlaybackRate: number;
-        audioStreamIndex: number;
+        audioStreamIndex: number | null;
         fps: number;
         debugOverlay: boolean;
         bufferState: ReturnType<typeof useBufferState>;
@@ -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-extraction/add-broadcast-channel-listener.d.ts

@@ -38,7 +38,7 @@ export type ExtractFrameRequest = {
     includeAudio: boolean;
     includeVideo: boolean;
     loop: boolean;
-    audioStreamIndex: number;
+    audioStreamIndex: number | null;
     trimAfter: number | undefined;
     trimBefore: number | undefined;
     fps: number;

package/dist/video-extraction/extract-frame-via-broadcast-channel.d.ts

@@ -25,7 +25,7 @@ export declare const extractFrameViaBroadcastChannel: ({ src, timeInSeconds, log
     includeVideo: boolean;
     isClientSideRendering: boolean;
     loop: boolean;
-    audioStreamIndex: number;
+    audioStreamIndex: number | null;
     trimAfter: number | undefined;
     trimBefore: number | undefined;
     fps: number;

package/dist/video-extraction/get-frames-since-keyframe.d.ts

@@ -9,7 +9,7 @@ export type AudioSinkResult = AudioSinks | 'no-audio-track' | 'cannot-decode-aud
 export type VideoSinkResult = VideoSinks | 'no-video-track' | 'cannot-decode' | 'cannot-decode-alpha' | 'unknown-container-format' | 'network-error';
 export declare const getSinks: (src: string, credentials: RequestCredentials | undefined) => Promise<{
     getVideo: () => Promise<VideoSinkResult>;
-    getAudio: (index: number) => Promise<AudioSinkResult>;
+    getAudio: (index: number | null) => Promise<AudioSinkResult>;
     actualMatroskaTimestamps: {
         observeTimestamp: (startTime: number) => void;
         getRealTimestamp: (observedTimestamp: number) => number | null;

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,7 +13,10 @@ 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;
     seek: ({ newTime, nonce }: {
@@ -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 = ReturnType<typeof videoIteratorManager>;
+}>;
+export type VideoIteratorManager = Awaited<ReturnType<typeof videoIteratorManager>>;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@remotion/media",
-	"version": "4.0.453",
+	"version": "4.0.455",
 	"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.39.2",
-		"remotion": "4.0.453",
+		"mediabunny": "1.42.0",
+		"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.453",
+		"@remotion/eslint-config-internal": "4.0.455",
 		"@vitest/browser-webdriverio": "4.0.9",
 		"eslint": "9.19.0",
 		"react": "19.2.3",