@remotion/media 4.0.462 → 4.0.464

package/dist/audio/audio.d.ts

@@ -20,4 +20,4 @@ export declare const Audio: React.ComponentType<{
     delayRenderTimeoutInMilliseconds?: number | undefined;
     onError?: import("../on-error").MediaOnError | undefined;
     credentials?: RequestCredentials | undefined;
-} & Pick<import("remotion").SequenceProps, "durationInFrames" | "from" | "name" | "showInTimeline">>;
+} & Pick<import("remotion").SequenceProps, "durationInFrames" | "from" | "hidden" | "name" | "showInTimeline">>;

package/dist/audio/props.d.ts

@@ -6,6 +6,7 @@ export type FallbackHtml5AudioProps = {
     useWebAudioApi?: boolean;
     acceptableTimeShiftInSeconds?: number;
     pauseWhenBuffering?: boolean;
+    preservePitch?: boolean;
 };
 export type AudioProps = {
     src: string;
@@ -31,4 +32,4 @@ export type AudioProps = {
     delayRenderTimeoutInMilliseconds?: number;
     onError?: MediaOnError;
     credentials?: RequestCredentials;
-} & Pick<SequenceProps, 'from' | 'durationInFrames' | 'name' | 'showInTimeline'>;
+} & Pick<SequenceProps, 'from' | 'durationInFrames' | 'name' | 'showInTimeline' | 'hidden'>;

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

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

package/dist/esm/index.mjs

@@ -1120,13 +1120,16 @@ var videoIteratorManager = async ({
   getStartTime,
   getIsLooping,
   getEffects,
-  getEffectChainState,
-  getCurrentFrame
+  getEffectChainState
 }) => {
   let videoIteratorsCreated = 0;
   let videoFrameIterator = null;
   let framesRendered = 0;
   let currentDelayHandle = null;
+  let lastDrawnFrame = null;
+  const clearLastDrawnFrame = () => {
+    lastDrawnFrame = null;
+  };
   if (canvas) {
     const displayWidth = await videoTrack.getDisplayWidth();
     const displayHeight = await videoTrack.getDisplayHeight();
@@ -1141,7 +1144,7 @@ var videoIteratorManager = async ({
     alpha: true
   });
   const prewarmedVideoIteratorCache = makePrewarmedVideoIteratorCache(canvasSink);
-  const drawFrame = async (frame) => {
+  const paintFrame = async (frame) => {
     if (context && canvas) {
       const effects = getEffects();
       const chainState = getEffectChainState(canvas.width, canvas.height);
@@ -1151,7 +1154,6 @@ var videoIteratorManager = async ({
           source: frame.canvas,
           effects,
           output: canvas,
-          frame: getCurrentFrame(),
           width: canvas.width,
           height: canvas.height
         });
@@ -1160,6 +1162,10 @@ var videoIteratorManager = async ({
         context.drawImage(frame.canvas, 0, 0);
       }
     }
+  };
+  const drawFrame = async (frame) => {
+    await paintFrame(frame);
+    lastDrawnFrame = frame;
     framesRendered++;
     drawDebugOverlay();
     const callback = getOnVideoFrameCallback();
@@ -1168,9 +1174,22 @@ var videoIteratorManager = async ({
     }
     Internals4.Log.trace({ logLevel, tag: "@remotion/media" }, `[MediaPlayer] Drew frame ${frame.timestamp.toFixed(3)}s`);
   };
+  const redrawCurrentFrame = async () => {
+    if (!lastDrawnFrame) {
+      return;
+    }
+    await paintFrame(lastDrawnFrame);
+    drawDebugOverlay();
+    const callback = getOnVideoFrameCallback();
+    if (callback) {
+      callback(lastDrawnFrame.canvas);
+    }
+    Internals4.Log.trace({ logLevel, tag: "@remotion/media" }, `[MediaPlayer] Redrew frame ${lastDrawnFrame.timestamp.toFixed(3)}s with updated effects`);
+  };
   const startVideoIterator = async (timeToSeek, nonce) => {
     let __stack = [];
     try {
+      clearLastDrawnFrame();
       videoFrameIterator?.destroy();
       const delayHandle = __using(__stack, delayPlaybackHandleIfNotPremounting(), 0);
       currentDelayHandle = delayHandle;
@@ -1222,6 +1241,7 @@ var videoIteratorManager = async ({
     getVideoIteratorsCreated: () => videoIteratorsCreated,
     seek,
     destroy: () => {
+      clearLastDrawnFrame();
       prewarmedVideoIteratorCache.destroy();
       videoFrameIterator?.destroy();
       if (context && canvas) {
@@ -1235,6 +1255,7 @@ var videoIteratorManager = async ({
     },
     getVideoFrameIterator: () => videoFrameIterator,
     drawFrame,
+    redrawCurrentFrame,
     getFramesRendered: () => framesRendered
   };
 };
@@ -1265,7 +1286,6 @@ class MediaPlayer {
   onVideoFrameCallback = null;
   getEffects;
   getEffectChainState;
-  getCurrentFrame;
   initializationPromise = null;
   bufferState;
   isPremounting;
@@ -1294,8 +1314,7 @@ class MediaPlayer {
     credentials,
     tagType,
     getEffects,
-    getEffectChainState,
-    getCurrentFrame
+    getEffectChainState
   }) {
     this.canvas = canvas ?? null;
     this.src = src;
@@ -1326,7 +1345,6 @@ class MediaPlayer {
     this.tagType = tagType;
     this.getEffects = getEffects;
     this.getEffectChainState = getEffectChainState;
-    this.getCurrentFrame = getCurrentFrame;
     if (canvas) {
       const context = canvas.getContext("2d", {
         alpha: true,
@@ -1436,8 +1454,7 @@ class MediaPlayer {
             getStartTime: () => this.getStartTime(),
             getIsLooping: () => this.loop,
             getEffects: this.getEffects,
-            getEffectChainState: this.getEffectChainState,
-            getCurrentFrame: this.getCurrentFrame
+            getEffectChainState: this.getEffectChainState
           });
         }
         const startTime = this.getTrimmedTime(startTimeUnresolved);
@@ -1749,6 +1766,9 @@ class MediaPlayer {
   setVideoFrameCallback(callback) {
     this.onVideoFrameCallback = callback;
   }
+  async redrawVideoEffects() {
+    await this.videoIteratorManager?.redrawCurrentFrame();
+  }
   drawDebugOverlay = () => {
     if (!this.debugOverlay)
       return;
@@ -2093,8 +2113,7 @@ var AudioForPreviewAssertedShowing = ({
         credentials,
         tagType: "audio",
         getEffects: () => [],
-        getEffectChainState: () => null,
-        getCurrentFrame: () => 0
+        getEffectChainState: () => null
       });
       mediaPlayerRef.current = player;
       player.initialize(currentTimeRef.current, initialMuted.current).then((result) => {
@@ -4363,6 +4382,7 @@ var AudioForRendering = ({
       onError: fallbackHtml5AudioProps?.onError,
       toneFrequency,
       acceptableTimeShiftInSeconds: fallbackHtml5AudioProps?.acceptableTimeShiftInSeconds,
+      preservePitch: fallbackHtml5AudioProps?.preservePitch ?? true,
       name,
       showInTimeline
     });
@@ -4389,7 +4409,8 @@ var audioSchema = {
     default: 1,
     description: "Playback Rate"
   },
-  loop: { type: "boolean", default: false, description: "Loop" }
+  loop: { type: "boolean", default: false, description: "Loop" },
+  hidden: Internals16.hiddenField
 };
 var AudioInner = (props) => {
   const {
@@ -4399,6 +4420,7 @@ var AudioInner = (props) => {
     _experimentalControls: controls,
     from,
     durationInFrames,
+    hidden,
     ...otherProps
   } = props;
   const environment = useRemotionEnvironment2();
@@ -4458,6 +4480,7 @@ var AudioInner = (props) => {
     _experimentalControls: controls,
     _remotionInternalLoopDisplay: loopDisplay,
     showInTimeline: showInTimeline ?? true,
+    hidden,
     children: environment.isRendering ? /* @__PURE__ */ jsx3(AudioForRendering, {
       ...otherProps
     }) : /* @__PURE__ */ jsx3(AudioForPreview, {
@@ -4611,8 +4634,6 @@ var VideoForPreviewAssertedShowing = ({
   experimentalEffectsRef.current = _experimentalEffects;
   const effectChainStateRef = useRef2(effectChainState);
   effectChainStateRef.current = effectChainState;
-  const frameRef = useRef2(frame);
-  frameRef.current = frame;
   const parentSequence = useContext4(SequenceContext2);
   const isPremounting = Boolean(parentSequence?.premounting);
   const isPostmounting = Boolean(parentSequence?.postmounting);
@@ -4718,8 +4739,7 @@ var VideoForPreviewAssertedShowing = ({
         credentials,
         tagType: "video",
         getEffects: () => experimentalEffectsRef.current,
-        getEffectChainState: (width, height) => effectChainStateRef.current?.get(width, height),
-        getCurrentFrame: () => frameRef.current
+        getEffectChainState: (width, height) => effectChainStateRef.current?.get(width, height)
       });
       mediaPlayerRef.current = player;
       player.initialize(currentTimeRef.current, initialMuted.current).then((result) => {
@@ -4854,6 +4874,13 @@ var VideoForPreviewAssertedShowing = ({
     }
     mediaPlayer.setVideoFrameCallback(onVideoFrame ?? null);
   }, [onVideoFrame, mediaPlayerReady]);
+  useLayoutEffect3(() => {
+    const mediaPlayer = mediaPlayerRef.current;
+    if (!mediaPlayer || !mediaPlayerReady) {
+      return;
+    }
+    mediaPlayer.redrawVideoEffects().catch(() => {});
+  }, [_experimentalEffects, mediaPlayerReady, mediaPlayerRef]);
   const actualStyle = useMemo4(() => {
     return {
       ...style,
@@ -5202,6 +5229,7 @@ var VideoForRendering = ({
       trimAfter: trimAfterValue,
       trimBefore: trimBeforeValue,
       useWebAudioApi: fallbackOffthreadVideoProps?.useWebAudioApi ?? false,
+      preservePitch: fallbackOffthreadVideoProps?.preservePitch ?? true,
       startFrom: undefined,
       endAt: undefined,
       stack,
@@ -5255,8 +5283,13 @@ var videoSchema = {
     default: 1,
     description: "Playback Rate"
   },
+  hidden: {
+    type: "boolean",
+    default: false,
+    description: "Hidden"
+  },
   loop: { type: "boolean", default: false, description: "Loop" },
-  ...Internals20.sequenceStyleSchema
+  ...Internals20.sequenceVisualStyleSchema
 };
 var InnerVideo = ({
   src,
@@ -5393,7 +5426,8 @@ var VideoInner = ({
   _experimentalInitiallyDrawCachedFrame,
   _experimentalEffects,
   durationInFrames,
-  from
+  from,
+  hidden
 }) => {
   const fallbackLogLevel = Internals20.useLogLevel();
   const [mediaVolume] = Internals20.useMediaVolumeState();
@@ -5454,6 +5488,7 @@ var VideoInner = ({
     _remotionInternalLoopDisplay: loopDisplay,
     _experimentalEffects: memoizedEffectDefinitions,
     showInTimeline: showInTimeline ?? true,
+    hidden,
     children: /* @__PURE__ */ jsx6(InnerVideo, {
       audioStreamIndex: audioStreamIndex ?? 0,
       className,

package/dist/index.d.ts

@@ -24,7 +24,7 @@ export declare const experimental_Audio: import("react").ComponentType<{
     delayRenderTimeoutInMilliseconds?: number | undefined;
     onError?: import("./on-error").MediaOnError | undefined;
     credentials?: RequestCredentials | undefined;
-} & Pick<import("remotion").SequenceProps, "durationInFrames" | "from" | "name" | "showInTimeline">>;
+} & Pick<import("remotion").SequenceProps, "durationInFrames" | "from" | "hidden" | "name" | "showInTimeline">>;
 /**
  * @deprecated Now just `Video`
  */
@@ -60,7 +60,7 @@ export declare const experimental_Video: import("react").ComponentType<{
     objectFit: import(".").VideoObjectFit;
     _experimentalInitiallyDrawCachedFrame: boolean;
     _experimentalEffects: import("remotion").EffectsProp;
-}> & Pick<import("remotion").SequenceProps, "durationInFrames" | "from" | "name">>;
+}> & Pick<import("remotion").SequenceProps, "durationInFrames" | "from" | "hidden" | "name">>;
 export { AudioForPreview } from './audio/audio-for-preview';
 export { AudioProps, FallbackHtml5AudioProps } from './audio/props';
 export { MediaErrorAction } from './on-error';

package/dist/media-player.d.ts

@@ -42,13 +42,12 @@ export declare class MediaPlayer {
     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, getEffects, getEffectChainState, getCurrentFrame }: {
+    constructor({ canvas, src, logLevel, sharedAudioContext, loop, trimBefore, trimAfter, playbackRate, globalPlaybackRate, audioStreamIndex, fps, debugOverlay, bufferState, isPremounting, isPostmounting, durationInFrames, onVideoFrameCallback, playing, sequenceOffset, credentials, tagType, getEffects, getEffectChainState }: {
         canvas: HTMLCanvasElement | OffscreenCanvas | null;
         src: string;
         logLevel: LogLevel;
@@ -72,7 +71,6 @@ export declare class MediaPlayer {
         tagType: 'audio' | 'video';
         getEffects: () => EffectDefinitionAndStack<unknown>[];
         getEffectChainState: (width: number, height: number) => EffectChainState | null;
-        getCurrentFrame: () => number;
     });
     private input;
     private isDisposalError;
@@ -107,6 +105,7 @@ export declare class MediaPlayer {
     private getTargetTime;
     private scheduleAudioNode;
     setVideoFrameCallback(callback: null | ((frame: CanvasImageSource) => void)): void;
+    redrawVideoEffects(): Promise<void>;
     private drawDebugOverlay;
     audioSyncAnchorChanged: () => void;
 }

package/dist/video/props.d.ts

@@ -13,6 +13,7 @@ export type FallbackOffthreadVideoProps = {
     useWebAudioApi?: boolean;
     pauseWhenBuffering?: boolean;
     onAutoPlayError?: null | (() => void);
+    preservePitch?: boolean;
 };
 type MandatoryVideoProps = {
     src: string;
@@ -55,5 +56,5 @@ type OptionalVideoProps = {
 export type InnerVideoProps = MandatoryVideoProps & OuterVideoProps & Omit<OptionalVideoProps, '_experimentalEffects'> & {
     _experimentalEffects: EffectDefinitionAndStack<unknown>[];
 };
-export type VideoProps = MandatoryVideoProps & Partial<OuterVideoProps> & Partial<OptionalVideoProps> & Pick<SequenceProps, 'durationInFrames' | 'from' | 'name'>;
+export type VideoProps = MandatoryVideoProps & Partial<OuterVideoProps> & Partial<OptionalVideoProps> & Pick<SequenceProps, 'durationInFrames' | 'from' | 'name' | 'hidden'>;
 export {};

package/dist/video/video.d.ts

@@ -31,4 +31,4 @@ export declare const Video: React.ComponentType<{
     objectFit: import("./props").VideoObjectFit;
     _experimentalInitiallyDrawCachedFrame: boolean;
     _experimentalEffects: import("remotion").EffectsProp;
-}> & Pick<import("remotion").SequenceProps, "durationInFrames" | "from" | "name">>;
+}> & Pick<import("remotion").SequenceProps, "durationInFrames" | "from" | "hidden" | "name">>;

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

@@ -2,7 +2,7 @@ import type { InputVideoTrack, WrappedCanvas } from 'mediabunny';
 import type { EffectChainState, EffectDefinitionAndStack } 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, getEffects, getEffectChainState, getCurrentFrame, }: {
+export declare const videoIteratorManager: ({ delayPlaybackHandleIfNotPremounting, canvas, context, drawDebugOverlay, logLevel, getOnVideoFrameCallback, videoTrack, getLoopSegmentMediaEndTimestamp, getStartTime, getIsLooping, getEffects, getEffectChainState, }: {
     videoTrack: InputVideoTrack;
     delayPlaybackHandleIfNotPremounting: () => DelayPlaybackIfNotPremounting;
     context: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D | null;
@@ -15,7 +15,6 @@ export declare const videoIteratorManager: ({ delayPlaybackHandleIfNotPremountin
     getIsLooping: () => boolean;
     getEffects: () => EffectDefinitionAndStack<unknown>[];
     getEffectChainState: (width: number, height: number) => EffectChainState | null;
-    getCurrentFrame: () => number;
 }) => Promise<{
     startVideoIterator: (timeToSeek: number, nonce: Nonce) => Promise<void>;
     getVideoIteratorsCreated: () => number;
@@ -37,6 +36,7 @@ export declare const videoIteratorManager: ({ delayPlaybackHandleIfNotPremountin
         };
     } | null;
     drawFrame: (frame: WrappedCanvas) => Promise<void>;
+    redrawCurrentFrame: () => Promise<void>;
     getFramesRendered: () => number;
 }>;
 export type VideoIteratorManager = Awaited<ReturnType<typeof videoIteratorManager>>;

package/package.json

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