remotion 4.0.537 → 4.0.539

package/dist/cjs/use-request-video-callback-time.d.ts

@@ -1,8 +1,8 @@
 import type { RefObject } from 'react';
 export declare const useRequestVideoCallbackTime: ({ mediaRef, mediaType, lastSeek, onVariableFpsVideoDetected, }: {
-    mediaRef: RefObject<HTMLAudioElement | HTMLVideoElement | null>;
-    mediaType: "audio" | "video";
-    lastSeek: RefObject<number | null>;
+    mediaRef: RefObject<HTMLVideoElement | HTMLAudioElement | null>;
+    mediaType: 'video' | 'audio';
+    lastSeek: React.RefObject<number | null>;
     onVariableFpsVideoDetected: () => void;
 }) => RefObject<{
     time: number;

package/dist/cjs/use-schema.d.ts

@@ -119,18 +119,18 @@ export type GetDragOverrides = (nodePath: SequencePropsSubscriptionKey) => DragO
 export type GetEffectDragOverrides = (nodePath: SequencePropsSubscriptionKey, effectIndex: number) => Record<string, DragOverrideValue>;
 export declare const makeStaticDragOverride: (value: unknown) => DragOverrideValue;
 export declare const makeKeyframedDragOverride: ({ status, frame, value, defaultEasing, }: {
-    status: CanUpdateSequencePropStatusKeyframed<number>;
+    status: CanUpdateSequencePropStatusKeyframed;
     frame: number;
     value: unknown;
-    defaultEasing?: CanUpdateSequencePropStatusEasing | undefined;
+    defaultEasing?: CanUpdateSequencePropStatusEasing;
 }) => DragOverrideValue;
 export declare const getStaticDragOverrideValue: (dragOverrideValue: DragOverrideValue | undefined) => unknown;
-export declare const isKeyframedStatus: (status: CanUpdateSequencePropStatus<number> | null) => status is CanUpdateSequencePropStatusKeyframed<number>;
+export declare const isKeyframedStatus: (status: CanUpdateSequencePropStatus | null) => status is CanUpdateSequencePropStatusKeyframed;
 export declare const computeEffectiveSchemaValuesDotNotation: ({ schema, currentValue, overrideValues, propStatus, frame, }: {
     schema: InteractivitySchema;
     currentValue: Record<string, unknown>;
     overrideValues: Record<string, DragOverrideValue>;
-    propStatus: Record<string, CanUpdateSequencePropStatus<number>> | undefined;
+    propStatus: Record<string, CanUpdateSequencePropStatus> | undefined;
     frame: number | null;
 }) => {
     merged: Record<string, unknown>;

package/dist/cjs/use-video.js

@@ -55,7 +55,7 @@ const VideoProvider = ({ children }) => {
         resolved,
         selected,
     ]);
-    return (jsx_runtime_1.jsx(exports.VideoContext.Provider, { value: video, children: children }));
+    return ((0, jsx_runtime_1.jsx)(exports.VideoContext.Provider, { value: video, children: children }));
 };
 exports.VideoProvider = VideoProvider;
 const useVideo = () => {

package/dist/cjs/validate-media-props.d.ts

@@ -3,4 +3,4 @@ export declare const validateMediaProps: (props: {
     volume: VolumeProp | undefined;
     playbackRate: number | undefined;
     preservePitch?: boolean | undefined;
-}, component: "Audio" | "Html5Audio" | "Html5Video" | "Video") => void;
+}, component: 'Html5Video' | 'Html5Audio' | 'Audio' | 'Video') => void;

package/dist/cjs/validation/validate-default-props.d.ts

@@ -1 +1 @@
-export declare const validateDefaultAndInputProps: (defaultProps: unknown, name: "defaultProps" | "inputProps", compositionId: string | null) => void;
+export declare const validateDefaultAndInputProps: (defaultProps: unknown, name: 'defaultProps' | 'inputProps', compositionId: string | null) => void;

package/dist/cjs/version.d.ts

@@ -3,4 +3,4 @@
  * @see [Documentation](https://remotion.dev/docs/version)
  * @returns {string} The current version of the remotion package
  */
-export declare const VERSION = "4.0.537";
+export declare const VERSION = "4.0.539";

package/dist/cjs/version.js

@@ -7,4 +7,4 @@ exports.VERSION = void 0;
  * @see [Documentation](https://remotion.dev/docs/version)
  * @returns {string} The current version of the remotion package
  */
-exports.VERSION = '4.0.537';
+exports.VERSION = '4.0.539';

package/dist/cjs/video/MediaPlaybackError.js

@@ -2,7 +2,6 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.MediaPlaybackError = void 0;
 class MediaPlaybackError extends Error {
-    src;
     constructor({ message, src }) {
         super(message);
         this.name = 'MediaPlaybackError';

package/dist/cjs/video/OffthreadVideo.js

@@ -48,18 +48,18 @@ const InnerOffthreadVideo = (props) => {
     });
     if (typeof trimBeforeValue !== 'undefined' ||
         typeof effectiveTrimAfter !== 'undefined') {
-        return (jsx_runtime_1.jsx(use_audio_frame_js_1.Html5MediaTrimContext.Provider, { value: trimBeforeValue !== null && trimBeforeValue !== void 0 ? trimBeforeValue : 0, children: jsx_runtime_1.jsx(Sequence_js_1.Sequence, { layout: "none", from: 0 - (trimBeforeValue !== null && trimBeforeValue !== void 0 ? trimBeforeValue : 0), showInTimeline: false, durationInFrames: effectiveTrimAfter === undefined
+        return ((0, jsx_runtime_1.jsx)(use_audio_frame_js_1.Html5MediaTrimContext.Provider, { value: trimBeforeValue !== null && trimBeforeValue !== void 0 ? trimBeforeValue : 0, children: (0, jsx_runtime_1.jsx)(Sequence_js_1.Sequence, { layout: "none", from: 0 - (trimBeforeValue !== null && trimBeforeValue !== void 0 ? trimBeforeValue : 0), showInTimeline: false, durationInFrames: effectiveTrimAfter === undefined
                     ? undefined
                     : (trimBeforeValue !== null && trimBeforeValue !== void 0 ? trimBeforeValue : 0) +
                         (effectiveTrimAfter - (trimBeforeValue !== null && trimBeforeValue !== void 0 ? trimBeforeValue : 0)) /
-                            ((_a = props.playbackRate) !== null && _a !== void 0 ? _a : 1), name: name, children: jsx_runtime_1.jsx(exports.InnerOffthreadVideo, { pauseWhenBuffering: shouldPauseWhenBuffering, ...otherProps, trimAfter: undefined, durationInFrames: undefined, name: undefined, showInTimeline: showInTimeline, trimBefore: undefined, _remotionInternalStack: undefined, startFrom: undefined, endAt: undefined }) }) }));
+                            ((_a = props.playbackRate) !== null && _a !== void 0 ? _a : 1), name: name, children: (0, jsx_runtime_1.jsx)(exports.InnerOffthreadVideo, { pauseWhenBuffering: shouldPauseWhenBuffering, ...otherProps, trimAfter: undefined, durationInFrames: undefined, name: undefined, showInTimeline: showInTimeline, trimBefore: undefined, _remotionInternalStack: undefined, startFrom: undefined, endAt: undefined }) }) }));
     }
     (0, validate_media_props_js_1.validateMediaProps)(props, 'Video');
     if (environment.isRendering) {
-        return (jsx_runtime_1.jsx(OffthreadVideoForRendering_js_1.OffthreadVideoForRendering, { pauseWhenBuffering: shouldPauseWhenBuffering, ...otherProps, trimAfter: undefined, durationInFrames: undefined, name: undefined, showInTimeline: showInTimeline, trimBefore: undefined, _remotionInternalStack: undefined, startFrom: undefined, endAt: undefined }));
+        return ((0, jsx_runtime_1.jsx)(OffthreadVideoForRendering_js_1.OffthreadVideoForRendering, { pauseWhenBuffering: shouldPauseWhenBuffering, ...otherProps, trimAfter: undefined, durationInFrames: undefined, name: undefined, showInTimeline: showInTimeline, trimBefore: undefined, _remotionInternalStack: undefined, startFrom: undefined, endAt: undefined }));
     }
     const { transparent, toneMapped, onAutoPlayError, onVideoFrame, crossOrigin, delayRenderRetries, delayRenderTimeoutInMilliseconds, ...propsForPreview } = otherProps;
-    return (jsx_runtime_1.jsx(VideoForPreview_js_1.VideoForPreview, { _remotionInternalStack: _remotionInternalStack !== null && _remotionInternalStack !== void 0 ? _remotionInternalStack : null, onDuration: onDuration, onlyWarnForMediaSeekingError: true, pauseWhenBuffering: shouldPauseWhenBuffering, showInTimeline: showInTimeline !== null && showInTimeline !== void 0 ? showInTimeline : true, onAutoPlayError: onAutoPlayError !== null && onAutoPlayError !== void 0 ? onAutoPlayError : undefined, onVideoFrame: onVideoFrame !== null && onVideoFrame !== void 0 ? onVideoFrame : null, crossOrigin: crossOrigin, ...propsForPreview, _remotionInternalNativeLoopPassed: false }));
+    return ((0, jsx_runtime_1.jsx)(VideoForPreview_js_1.VideoForPreview, { _remotionInternalStack: _remotionInternalStack !== null && _remotionInternalStack !== void 0 ? _remotionInternalStack : null, onDuration: onDuration, onlyWarnForMediaSeekingError: true, pauseWhenBuffering: shouldPauseWhenBuffering, showInTimeline: showInTimeline !== null && showInTimeline !== void 0 ? showInTimeline : true, onAutoPlayError: onAutoPlayError !== null && onAutoPlayError !== void 0 ? onAutoPlayError : undefined, onVideoFrame: onVideoFrame !== null && onVideoFrame !== void 0 ? onVideoFrame : null, crossOrigin: crossOrigin, ...propsForPreview, _remotionInternalNativeLoopPassed: false }));
 };
 exports.InnerOffthreadVideo = InnerOffthreadVideo;
 /*
@@ -70,7 +70,7 @@ const OffthreadVideo = ({ src, acceptableTimeShiftInSeconds, allowAmplificationD
     if (imageFormat) {
         throw new TypeError(`The \`<OffthreadVideo>\` tag does no longer accept \`imageFormat\`. Use the \`transparent\` prop if you want to render a transparent video.`);
     }
-    return (jsx_runtime_1.jsx(exports.InnerOffthreadVideo, { acceptableTimeShiftInSeconds: acceptableTimeShiftInSeconds, allowAmplificationDuringRender: allowAmplificationDuringRender !== null && allowAmplificationDuringRender !== void 0 ? allowAmplificationDuringRender : true, audioStreamIndex: audioStreamIndex !== null && audioStreamIndex !== void 0 ? audioStreamIndex : 0, crossOrigin: crossOrigin, delayRenderRetries: delayRenderRetries, delayRenderTimeoutInMilliseconds: delayRenderTimeoutInMilliseconds, loopVolumeCurveBehavior: loopVolumeCurveBehavior !== null && loopVolumeCurveBehavior !== void 0 ? loopVolumeCurveBehavior : 'repeat', muted: muted !== null && muted !== void 0 ? muted : false, name: name, onAutoPlayError: onAutoPlayError !== null && onAutoPlayError !== void 0 ? onAutoPlayError : null, onError: onError, onVideoFrame: onVideoFrame, pauseWhenBuffering: (0, v5_flag_js_1.resolveV5Default)(pauseWhenBuffering), playbackRate: playbackRate !== null && playbackRate !== void 0 ? playbackRate : 1, preservePitch: preservePitch, toneFrequency: toneFrequency !== null && toneFrequency !== void 0 ? toneFrequency : 1, showInTimeline: showInTimeline !== null && showInTimeline !== void 0 ? showInTimeline : true, src: src, _remotionInternalStack: _remotionInternalStack, startFrom: startFrom, _remotionInternalNativeLoopPassed: _remotionInternalNativeLoopPassed !== null && _remotionInternalNativeLoopPassed !== void 0 ? _remotionInternalNativeLoopPassed : false, endAt: endAt, style: style, toneMapped: toneMapped !== null && toneMapped !== void 0 ? toneMapped : true, transparent: transparent !== null && transparent !== void 0 ? transparent : false, trimAfter: trimAfter, durationInFrames: durationInFrames, trimBefore: trimBefore, useWebAudioApi: useWebAudioApi !== null && useWebAudioApi !== void 0 ? useWebAudioApi : false, volume: volume, ...props }));
+    return ((0, jsx_runtime_1.jsx)(exports.InnerOffthreadVideo, { acceptableTimeShiftInSeconds: acceptableTimeShiftInSeconds, allowAmplificationDuringRender: allowAmplificationDuringRender !== null && allowAmplificationDuringRender !== void 0 ? allowAmplificationDuringRender : true, audioStreamIndex: audioStreamIndex !== null && audioStreamIndex !== void 0 ? audioStreamIndex : 0, crossOrigin: crossOrigin, delayRenderRetries: delayRenderRetries, delayRenderTimeoutInMilliseconds: delayRenderTimeoutInMilliseconds, loopVolumeCurveBehavior: loopVolumeCurveBehavior !== null && loopVolumeCurveBehavior !== void 0 ? loopVolumeCurveBehavior : 'repeat', muted: muted !== null && muted !== void 0 ? muted : false, name: name, onAutoPlayError: onAutoPlayError !== null && onAutoPlayError !== void 0 ? onAutoPlayError : null, onError: onError, onVideoFrame: onVideoFrame, pauseWhenBuffering: (0, v5_flag_js_1.resolveV5Default)(pauseWhenBuffering), playbackRate: playbackRate !== null && playbackRate !== void 0 ? playbackRate : 1, preservePitch: preservePitch, toneFrequency: toneFrequency !== null && toneFrequency !== void 0 ? toneFrequency : 1, showInTimeline: showInTimeline !== null && showInTimeline !== void 0 ? showInTimeline : true, src: src, _remotionInternalStack: _remotionInternalStack, startFrom: startFrom, _remotionInternalNativeLoopPassed: _remotionInternalNativeLoopPassed !== null && _remotionInternalNativeLoopPassed !== void 0 ? _remotionInternalNativeLoopPassed : false, endAt: endAt, style: style, toneMapped: toneMapped !== null && toneMapped !== void 0 ? toneMapped : true, transparent: transparent !== null && transparent !== void 0 ? transparent : false, trimAfter: trimAfter, durationInFrames: durationInFrames, trimBefore: trimBefore, useWebAudioApi: useWebAudioApi !== null && useWebAudioApi !== void 0 ? useWebAudioApi : false, volume: volume, ...props }));
 };
 exports.OffthreadVideo = OffthreadVideo;
 (0, enable_sequence_stack_traces_js_1.addSequenceStackTraces)(exports.OffthreadVideo);

package/dist/cjs/video/OffthreadVideoForRendering.js

@@ -6,7 +6,6 @@ const react_1 = require("react");
 const absolute_src_js_1 = require("../absolute-src.js");
 const use_audio_frame_js_1 = require("../audio/use-audio-frame.js");
 const use_media_audio_state_js_1 = require("../audio/use-media-audio-state.js");
-const cancel_render_js_1 = require("../cancel-render.js");
 const default_css_js_1 = require("../default-css.js");
 const Img_js_1 = require("../Img.js");
 const random_js_1 = require("../random.js");
@@ -25,7 +24,7 @@ const offthread_video_source_js_1 = require("./offthread-video-source.js");
 const OffthreadVideoForRendering = ({ onError, volume: volumeProp, playbackRate, src, muted, allowAmplificationDuringRender, transparent, toneMapped, toneFrequency, name, loopVolumeCurveBehavior, delayRenderRetries, delayRenderTimeoutInMilliseconds, onVideoFrame, 
 // Remove crossOrigin prop during rendering
 // https://discord.com/channels/809501355504959528/844143007183667220/1311639632496033813
-crossOrigin, audioStreamIndex, preservePitch: _preservePitch, ...props }) => {
+crossOrigin, audioStreamIndex, preservePitch, ...props }) => {
     var _a;
     const absoluteFrame = (0, timeline_position_state_js_1.useTimelinePosition)();
     const frame = (0, use_current_frame_js_1.useCurrentFrame)();
@@ -80,6 +79,7 @@ crossOrigin, audioStreamIndex, preservePitch: _preservePitch, ...props }) => {
             toneFrequency,
             audioStartFrame,
             audioStreamIndex,
+            preservePitch: preservePitch !== null && preservePitch !== void 0 ? preservePitch : true,
         });
         return () => unregisterRenderAsset(id);
     }, [
@@ -96,6 +96,7 @@ crossOrigin, audioStreamIndex, preservePitch: _preservePitch, ...props }) => {
         audioStartFrame,
         sequencePlaybackRate,
         audioStreamIndex,
+        preservePitch,
     ]);
     const currentTime = (0, react_1.useMemo)(() => {
         return ((0, get_current_time_js_1.getExpectedMediaFrameUncorrected)({
@@ -113,7 +114,7 @@ crossOrigin, audioStreamIndex, preservePitch: _preservePitch, ...props }) => {
         });
     }, [toneMapped, currentTime, src, transparent]);
     const [imageSrc, setImageSrc] = (0, react_1.useState)(null);
-    const { delayRender, continueRender } = (0, use_delay_render_js_1.useDelayRender)();
+    const { delayRender, continueRender, cancelRender } = (0, use_delay_render_js_1.useDelayRender)();
     (0, react_1.useLayoutEffect)(() => {
         if (!window.remotion_videoEnabled) {
             return;
@@ -167,7 +168,7 @@ crossOrigin, audioStreamIndex, preservePitch: _preservePitch, ...props }) => {
                     onError(err);
                 }
                 else {
-                    (0, cancel_render_js_1.cancelRender)(err);
+                    cancelRender(err);
                 }
             }
         };
@@ -187,6 +188,7 @@ crossOrigin, audioStreamIndex, preservePitch: _preservePitch, ...props }) => {
         delayRenderTimeoutInMilliseconds,
         onError,
         continueRender,
+        cancelRender,
         delayRender,
     ]);
     const onErr = (0, react_1.useCallback)(() => {
@@ -194,9 +196,9 @@ crossOrigin, audioStreamIndex, preservePitch: _preservePitch, ...props }) => {
             onError === null || onError === void 0 ? void 0 : onError(new Error('Failed to load image with src ' + imageSrc));
         }
         else {
-            (0, cancel_render_js_1.cancelRender)('Failed to load image with src ' + imageSrc);
+            cancelRender('Failed to load image with src ' + imageSrc);
         }
-    }, [imageSrc, onError]);
+    }, [imageSrc, onError, cancelRender]);
     const className = (0, react_1.useMemo)(() => {
         return [default_css_js_1.OBJECTFIT_CONTAIN_CLASS_NAME, props.className]
             .filter(truthy_js_1.truthy)
@@ -211,6 +213,6 @@ crossOrigin, audioStreamIndex, preservePitch: _preservePitch, ...props }) => {
         return null;
     }
     continueRender(imageSrc.handle);
-    return (jsx_runtime_1.jsx(Img_js_1.Img, { src: imageSrc.src, delayRenderRetries: delayRenderRetries, delayRenderTimeoutInMilliseconds: delayRenderTimeoutInMilliseconds, onImageFrame: onImageFrame, ...props, onError: onErr, className: className }));
+    return ((0, jsx_runtime_1.jsx)(Img_js_1.Img, { src: imageSrc.src, delayRenderRetries: delayRenderRetries, delayRenderTimeoutInMilliseconds: delayRenderTimeoutInMilliseconds, onImageFrame: onImageFrame, ...props, onError: onErr, className: className }));
 };
 exports.OffthreadVideoForRendering = OffthreadVideoForRendering;

package/dist/cjs/video/VideoForPreview.js

@@ -48,6 +48,7 @@ const prefetch_js_1 = require("../prefetch.js");
 const sequence_activity_context_js_1 = require("../sequence-activity-context.js");
 const SequenceContext_js_1 = require("../SequenceContext.js");
 const use_amplification_js_1 = require("../use-amplification.js");
+const use_media_duration_js_1 = require("../use-media-duration.js");
 const use_media_in_timeline_js_1 = require("../use-media-in-timeline.js");
 const use_media_playback_js_1 = require("../use-media-playback.js");
 const use_media_tag_js_1 = require("../use-media-tag.js");
@@ -89,11 +90,8 @@ const VideoForDevelopmentRefForwardingFunction = (props, ref) => {
     // But useInsertionEffect will fire before other effects, meaning the
     // nodes might still be used. Using rAF to ensure it's after other effects.
     effectToUse(() => {
-        return () => {
-            requestAnimationFrame(() => {
-                sharedSource === null || sharedSource === void 0 ? void 0 : sharedSource.cleanup();
-            });
-        };
+        var _a;
+        return use_media_duration_js_1.scheduleMediaSourceCleanup.bind(null, (_a = sharedSource === null || sharedSource === void 0 ? void 0 : sharedSource.cleanup) !== null && _a !== void 0 ? _a : null);
     }, [sharedSource]);
     const { timelineId, userPreferredVolume, isMutedForPlayback, volume, muted, playbackRate, preservePitch, onlyWarnForMediaSeekingError, src, onDuration, 
     // @ts-expect-error
@@ -205,28 +203,8 @@ const VideoForDevelopmentRefForwardingFunction = (props, ref) => {
             current.removeEventListener('error', errorHandler);
         };
     }, [onError, src]);
-    const currentOnDurationCallback = (0, react_1.useRef)(onDuration);
-    currentOnDurationCallback.current = onDuration;
     (0, emit_video_frame_js_1.useEmitVideoFrame)({ ref: videoRef, onVideoFrame });
-    (0, react_1.useEffect)(() => {
-        var _a;
-        const { current } = videoRef;
-        if (!current) {
-            return;
-        }
-        if (current.duration) {
-            (_a = currentOnDurationCallback.current) === null || _a === void 0 ? void 0 : _a.call(currentOnDurationCallback, src, current.duration);
-            return;
-        }
-        const onLoadedMetadata = () => {
-            var _a;
-            (_a = currentOnDurationCallback.current) === null || _a === void 0 ? void 0 : _a.call(currentOnDurationCallback, src, current.duration);
-        };
-        current.addEventListener('loadedmetadata', onLoadedMetadata);
-        return () => {
-            current.removeEventListener('loadedmetadata', onLoadedMetadata);
-        };
-    }, [src]);
+    (0, use_media_duration_js_1.useMediaDuration)(videoRef, onDuration, src, false);
     (0, react_1.useEffect)(() => {
         const { current } = videoRef;
         if (!current) {
@@ -254,7 +232,7 @@ const VideoForDevelopmentRefForwardingFunction = (props, ref) => {
         requestsVideoFrame: Boolean(onVideoFrame),
         isClientSideRendering: false,
     });
-    const video = (jsx_runtime_1.jsx("video", { ...nativeProps, ref: videoRef, muted: isMutedForPlayback, playsInline: true, src: actualSrc, loop: _remotionInternalNativeLoopPassed, style: actualStyle, disableRemotePlayback: true, crossOrigin: crossOriginValue, controls: false }));
+    const video = ((0, jsx_runtime_1.jsx)("video", { ...nativeProps, ref: videoRef, muted: isMutedForPlayback, playsInline: true, src: actualSrc, loop: _remotionInternalNativeLoopPassed, style: actualStyle, disableRemotePlayback: true, crossOrigin: crossOriginValue, controls: false }));
     return video;
 };
 const VideoForPreviewContent = (0, react_1.forwardRef)(VideoForDevelopmentRefForwardingFunction);
@@ -303,6 +281,6 @@ const VideoForPreviewRefForwardingFunction = (props, ref) => {
             outlineChildrenRef: automaticOutlineRef,
         }
         : null, [automaticOutlineRef, isStudio, registration, timelineId]);
-    return (jsx_runtime_1.jsx(committed_metadata_js_1.CommittedMetadataProvider, { value: null, _remotionCommitMetadata: metadata, children: jsx_runtime_1.jsx(sequence_activity_context_js_1.SequenceContent, { children: jsx_runtime_1.jsx(VideoForPreviewContent, { ...props, ref: ref, timelineId: timelineId, userPreferredVolume: userPreferredVolume, isMutedForPlayback: isMutedForPlayback }) }) }));
+    return ((0, jsx_runtime_1.jsx)(committed_metadata_js_1.CommittedMetadataProvider, { value: null, _remotionCommitMetadata: metadata, children: (0, jsx_runtime_1.jsx)(sequence_activity_context_js_1.SequenceContent, { children: (0, jsx_runtime_1.jsx)(VideoForPreviewContent, { ...props, ref: ref, timelineId: timelineId, userPreferredVolume: userPreferredVolume, isMutedForPlayback: isMutedForPlayback }) }) }));
 };
 exports.VideoForPreview = (0, react_1.forwardRef)(VideoForPreviewRefForwardingFunction);

package/dist/cjs/video/VideoForRendering.d.ts

@@ -1,6 +1,8 @@
 import type { ForwardRefExoticComponent, RefAttributes } from 'react';
 import type { OnVideoFrame, RemotionVideoProps } from './props';
-export declare const VideoForRendering: ForwardRefExoticComponent<Omit<RemotionVideoProps, "onVideoFrame"> & {
+type VideoForRenderingProps = Omit<RemotionVideoProps, 'onVideoFrame'> & {
     readonly onDuration: (src: string, durationInSeconds: number) => void;
-    readonly onVideoFrame: OnVideoFrame | null;
-} & RefAttributes<HTMLVideoElement>>;
+    readonly onVideoFrame: null | OnVideoFrame;
+};
+export declare const VideoForRendering: ForwardRefExoticComponent<VideoForRenderingProps & RefAttributes<HTMLVideoElement>>;
+export {};

package/dist/cjs/video/VideoForRendering.js

@@ -23,7 +23,7 @@ const emit_video_frame_js_1 = require("./emit-video-frame.js");
 const get_current_time_js_1 = require("./get-current-time.js");
 const MediaPlaybackError_js_1 = require("./MediaPlaybackError.js");
 const seek_until_right_js_1 = require("./seek-until-right.js");
-const VideoForRenderingForwardFunction = ({ onError, volume: volumeProp, allowAmplificationDuringRender, playbackRate, onDuration, toneFrequency, name, acceptableTimeShiftInSeconds, delayRenderRetries, delayRenderTimeoutInMilliseconds, loopVolumeCurveBehavior, audioStreamIndex, onVideoFrame, preservePitch: _preservePitch, ...props }, ref) => {
+const VideoForRenderingForwardFunction = ({ onError, volume: volumeProp, allowAmplificationDuringRender, playbackRate, onDuration, toneFrequency, name, acceptableTimeShiftInSeconds, delayRenderRetries, delayRenderTimeoutInMilliseconds, loopVolumeCurveBehavior, audioStreamIndex, onVideoFrame, preservePitch, ...props }, ref) => {
     var _a, _b;
     const absoluteFrame = (0, timeline_position_state_js_1.useTimelinePosition)();
     const frame = (0, use_current_frame_js_1.useCurrentFrame)();
@@ -83,6 +83,7 @@ const VideoForRenderingForwardFunction = ({ onError, volume: volumeProp, allowAm
             toneFrequency: toneFrequency !== null && toneFrequency !== void 0 ? toneFrequency : 1,
             audioStartFrame,
             audioStreamIndex: audioStreamIndex !== null && audioStreamIndex !== void 0 ? audioStreamIndex : 0,
+            preservePitch: preservePitch !== null && preservePitch !== void 0 ? preservePitch : true,
         });
         return () => unregisterRenderAsset(id);
     }, [
@@ -99,6 +100,7 @@ const VideoForRenderingForwardFunction = ({ onError, volume: volumeProp, allowAm
         audioStartFrame,
         sequencePlaybackRate,
         audioStreamIndex,
+        preservePitch,
     ]);
     (0, react_1.useImperativeHandle)(ref, () => {
         return videoRef.current;
@@ -239,6 +241,6 @@ const VideoForRenderingForwardFunction = ({ onError, volume: volumeProp, allowAm
             delayRender,
         ]);
     }
-    return jsx_runtime_1.jsx("video", { ref: videoRef, disableRemotePlayback: true, ...props });
+    return (0, jsx_runtime_1.jsx)("video", { ref: videoRef, disableRemotePlayback: true, ...props });
 };
 exports.VideoForRendering = (0, react_1.forwardRef)(VideoForRenderingForwardFunction);

package/dist/cjs/video/duration-state.d.ts

@@ -10,6 +10,7 @@ type TDurationsContext = {
     durations: DurationState;
     setDurations: React.Dispatch<DurationAction>;
 };
+export declare const onMediaDuration: (setDurations: TDurationsContext['setDurations'], src: string, durationInSeconds: number) => void;
 export declare const DurationsContext: React.Context<TDurationsContext>;
 export declare const DurationsContextProvider: React.FC<{
     readonly children: React.ReactNode;

package/dist/cjs/video/duration-state.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DurationsContextProvider = exports.DurationsContext = exports.durationReducer = void 0;
+exports.DurationsContextProvider = exports.DurationsContext = exports.onMediaDuration = exports.durationReducer = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const absolute_src_js_1 = require("../absolute-src.js");
@@ -21,6 +21,12 @@ const durationReducer = (state, action) => {
     }
 };
 exports.durationReducer = durationReducer;
+// Bind this function outside component render scopes so the stable duration
+// callback cannot keep unrelated, replaced media props alive.
+const onMediaDuration = (setDurations, src, durationInSeconds) => {
+    setDurations({ type: 'got-duration', durationInSeconds, src });
+};
+exports.onMediaDuration = onMediaDuration;
 exports.DurationsContext = (0, react_1.createContext)({
     durations: {},
     setDurations: () => {
@@ -35,6 +41,6 @@ const DurationsContextProvider = ({ children }) => {
             setDurations,
         };
     }, [durations]);
-    return (jsx_runtime_1.jsx(exports.DurationsContext.Provider, { value: value, children: children }));
+    return ((0, jsx_runtime_1.jsx)(exports.DurationsContext.Provider, { value: value, children: children }));
 };
 exports.DurationsContextProvider = DurationsContextProvider;

package/dist/cjs/video/emit-video-frame.d.ts

@@ -1,5 +1,5 @@
 import type { OnVideoFrame } from './props';
 export declare const useEmitVideoFrame: ({ ref, onVideoFrame, }: {
-    ref: import("react").RefObject<HTMLVideoElement | null>;
+    ref: React.RefObject<HTMLVideoElement | null>;
     onVideoFrame: OnVideoFrame | null;
 }) => void;

package/dist/cjs/video/html5-video.d.ts

@@ -4,54 +4,54 @@ import React from 'react';
  * @see [Documentation](https://www.remotion.dev/docs/html5-video)
  */
 export declare const Html5Video: React.ForwardRefExoticComponent<Omit<import("./props").NativeVideoProps & {
-    name?: string | undefined;
-    volume?: import("../volume-prop.js").VolumeProp | undefined;
-    playbackRate?: number | undefined;
-    preservePitch?: boolean | undefined;
-    acceptableTimeShiftInSeconds?: number | undefined;
-    allowAmplificationDuringRender?: boolean | undefined;
-    useWebAudioApi?: boolean | undefined;
-    toneFrequency?: number | undefined;
-    pauseWhenBuffering?: boolean | undefined;
-    showInTimeline?: boolean | undefined;
-    delayRenderTimeoutInMilliseconds?: number | undefined;
-    loopVolumeCurveBehavior?: import("../index.js").LoopVolumeCurveBehavior | undefined;
-    delayRenderRetries?: number | undefined;
-    onError?: ((err: Error) => void) | undefined;
-    onAutoPlayError?: (() => void) | null | undefined;
-    onVideoFrame?: import("./props").OnVideoFrame | undefined;
-    audioStreamIndex?: number | undefined;
+    name?: string;
+    volume?: import("../volume-prop.js").VolumeProp;
+    playbackRate?: number;
+    preservePitch?: boolean;
+    acceptableTimeShiftInSeconds?: number;
+    allowAmplificationDuringRender?: boolean;
+    useWebAudioApi?: boolean;
+    toneFrequency?: number;
+    pauseWhenBuffering?: boolean;
+    showInTimeline?: boolean;
+    delayRenderTimeoutInMilliseconds?: number;
+    loopVolumeCurveBehavior?: import("../index.js").LoopVolumeCurveBehavior;
+    delayRenderRetries?: number;
+    onError?: (err: Error) => void;
+    onAutoPlayError?: null | (() => void);
+    onVideoFrame?: import("./props").OnVideoFrame;
+    audioStreamIndex?: number;
 } & Partial<import("./props").CommonVideoProps> & {
     /**
      * @deprecated For internal use only
      */
-    readonly _remotionInternalStack?: string | undefined;
+    readonly _remotionInternalStack?: string;
 }, "ref"> & React.RefAttributes<HTMLVideoElement>>;
 /**
  * @deprecated This component has been renamed to `Html5Video`.
  * @see [Documentation](https://www.remotion.dev/docs/html5-video)
  */
 export declare const Video: React.ForwardRefExoticComponent<Omit<import("./props").NativeVideoProps & {
-    name?: string | undefined;
-    volume?: import("../volume-prop.js").VolumeProp | undefined;
-    playbackRate?: number | undefined;
-    preservePitch?: boolean | undefined;
-    acceptableTimeShiftInSeconds?: number | undefined;
-    allowAmplificationDuringRender?: boolean | undefined;
-    useWebAudioApi?: boolean | undefined;
-    toneFrequency?: number | undefined;
-    pauseWhenBuffering?: boolean | undefined;
-    showInTimeline?: boolean | undefined;
-    delayRenderTimeoutInMilliseconds?: number | undefined;
-    loopVolumeCurveBehavior?: import("../index.js").LoopVolumeCurveBehavior | undefined;
-    delayRenderRetries?: number | undefined;
-    onError?: ((err: Error) => void) | undefined;
-    onAutoPlayError?: (() => void) | null | undefined;
-    onVideoFrame?: import("./props").OnVideoFrame | undefined;
-    audioStreamIndex?: number | undefined;
+    name?: string;
+    volume?: import("../volume-prop.js").VolumeProp;
+    playbackRate?: number;
+    preservePitch?: boolean;
+    acceptableTimeShiftInSeconds?: number;
+    allowAmplificationDuringRender?: boolean;
+    useWebAudioApi?: boolean;
+    toneFrequency?: number;
+    pauseWhenBuffering?: boolean;
+    showInTimeline?: boolean;
+    delayRenderTimeoutInMilliseconds?: number;
+    loopVolumeCurveBehavior?: import("../index.js").LoopVolumeCurveBehavior;
+    delayRenderRetries?: number;
+    onError?: (err: Error) => void;
+    onAutoPlayError?: null | (() => void);
+    onVideoFrame?: import("./props").OnVideoFrame;
+    audioStreamIndex?: number;
 } & Partial<import("./props").CommonVideoProps> & {
     /**
      * @deprecated For internal use only
      */
-    readonly _remotionInternalStack?: string | undefined;
+    readonly _remotionInternalStack?: string;
 }, "ref"> & React.RefAttributes<HTMLVideoElement>>;

package/dist/cjs/video/html5-video.js

@@ -38,9 +38,7 @@ const VideoForwardingFunction = (props, ref) => {
         throw new TypeError(`The \`<Html5Video>\` tag requires a string for \`src\`, but got ${JSON.stringify(props.src)} instead.`);
     }
     const preloadedSrc = (0, prefetch_js_1.usePreload)(props.src);
-    const onDuration = (0, react_1.useCallback)((src, durationInSeconds) => {
-        setDurations({ type: 'got-duration', durationInSeconds, src });
-    }, [setDurations]);
+    const onDuration = (0, react_1.useMemo)(() => duration_state_js_1.onMediaDuration.bind(null, setDurations), [setDurations]);
     const durationFetched = (_a = durations[(0, absolute_src_js_1.getAbsoluteSrc)(preloadedSrc)]) !== null && _a !== void 0 ? _a : durations[(0, absolute_src_js_1.getAbsoluteSrc)(props.src)];
     (0, validate_start_from_props_js_1.validateMediaTrimProps)({ startFrom, endAt, trimBefore, trimAfter });
     if (durationInFrames !== undefined) {
@@ -65,22 +63,22 @@ const VideoForwardingFunction = (props, ref) => {
     const loopDuration = effectiveTrimAfter !== null && effectiveTrimAfter !== void 0 ? effectiveTrimAfter : (durationFetched === undefined ? undefined : durationFetched * fps);
     if (loop && loopDuration !== undefined) {
         if (!Number.isFinite(loopDuration)) {
-            return (jsx_runtime_1.jsx(exports.Html5Video, { ...propsOtherThanLoop, ref: ref, _remotionInternalStack: _remotionInternalStack, _remotionInternalNativeLoopPassed: true }));
+            return ((0, jsx_runtime_1.jsx)(exports.Html5Video, { ...propsOtherThanLoop, ref: ref, _remotionInternalStack: _remotionInternalStack, _remotionInternalNativeLoopPassed: true }));
         }
-        return (jsx_runtime_1.jsx(index_js_1.Loop, { durationInFrames: (0, calculate_media_duration_js_1.calculateMediaDuration)({
+        return ((0, jsx_runtime_1.jsx)(index_js_1.Loop, { durationInFrames: (0, calculate_media_duration_js_1.calculateMediaDuration)({
                 trimAfter: effectiveTrimAfter,
                 mediaDurationInFrames: loopDuration,
                 playbackRate: (_b = props.playbackRate) !== null && _b !== void 0 ? _b : 1,
                 trimBefore: trimBeforeValue,
-            }), layout: "none", name: name, showInTimeline: false, children: jsx_runtime_1.jsx(exports.Html5Video, { ...propsOtherThanLoop, ref: ref, _remotionInternalStack: _remotionInternalStack, _remotionInternalNativeLoopPassed: true }) }));
+            }), layout: "none", name: name, showInTimeline: false, children: (0, jsx_runtime_1.jsx)(exports.Html5Video, { ...propsOtherThanLoop, ref: ref, _remotionInternalStack: _remotionInternalStack, _remotionInternalNativeLoopPassed: true }) }));
     }
     if (typeof trimBeforeValue !== 'undefined' ||
         typeof effectiveTrimAfter !== 'undefined') {
-        return (jsx_runtime_1.jsx(use_audio_frame_js_1.Html5MediaTrimContext.Provider, { value: trimBeforeValue !== null && trimBeforeValue !== void 0 ? trimBeforeValue : 0, children: jsx_runtime_1.jsx(Sequence_js_1.Sequence, { layout: "none", from: 0 - (trimBeforeValue !== null && trimBeforeValue !== void 0 ? trimBeforeValue : 0), showInTimeline: false, durationInFrames: effectiveTrimAfter === undefined
+        return ((0, jsx_runtime_1.jsx)(use_audio_frame_js_1.Html5MediaTrimContext.Provider, { value: trimBeforeValue !== null && trimBeforeValue !== void 0 ? trimBeforeValue : 0, children: (0, jsx_runtime_1.jsx)(Sequence_js_1.Sequence, { layout: "none", from: 0 - (trimBeforeValue !== null && trimBeforeValue !== void 0 ? trimBeforeValue : 0), showInTimeline: false, durationInFrames: effectiveTrimAfter === undefined
                     ? undefined
                     : (trimBeforeValue !== null && trimBeforeValue !== void 0 ? trimBeforeValue : 0) +
                         (effectiveTrimAfter - (trimBeforeValue !== null && trimBeforeValue !== void 0 ? trimBeforeValue : 0)) /
-                            ((_c = props.playbackRate) !== null && _c !== void 0 ? _c : 1), name: name, children: jsx_runtime_1.jsx(exports.Html5Video, { pauseWhenBuffering: shouldPauseWhenBuffering, onVideoFrame: onVideoFrame, ...otherProps, ref: ref, showInTimeline: showInTimeline, _remotionInternalStack: _remotionInternalStack }) }) }));
+                            ((_c = props.playbackRate) !== null && _c !== void 0 ? _c : 1), name: name, children: (0, jsx_runtime_1.jsx)(exports.Html5Video, { pauseWhenBuffering: shouldPauseWhenBuffering, onVideoFrame: onVideoFrame, ...otherProps, ref: ref, showInTimeline: showInTimeline, _remotionInternalStack: _remotionInternalStack }) }) }));
     }
     (0, validate_media_props_js_1.validateMediaProps)({
         playbackRate: props.playbackRate,
@@ -88,9 +86,9 @@ const VideoForwardingFunction = (props, ref) => {
         volume: props.volume,
     }, 'Html5Video');
     if (environment.isRendering) {
-        return (jsx_runtime_1.jsx(VideoForRendering_js_1.VideoForRendering, { onDuration: onDuration, onVideoFrame: onVideoFrame !== null && onVideoFrame !== void 0 ? onVideoFrame : null, ...otherProps, ref: ref }));
+        return ((0, jsx_runtime_1.jsx)(VideoForRendering_js_1.VideoForRendering, { onDuration: onDuration, onVideoFrame: onVideoFrame !== null && onVideoFrame !== void 0 ? onVideoFrame : null, ...otherProps, ref: ref }));
     }
-    return (jsx_runtime_1.jsx(VideoForPreview_js_1.VideoForPreview, { onlyWarnForMediaSeekingError: false, ...otherProps, ref: ref, onVideoFrame: onVideoFrame !== null && onVideoFrame !== void 0 ? onVideoFrame : null, pauseWhenBuffering: shouldPauseWhenBuffering, onDuration: onDuration, _remotionInternalStack: _remotionInternalStack !== null && _remotionInternalStack !== void 0 ? _remotionInternalStack : null, _remotionInternalNativeLoopPassed: _remotionInternalNativeLoopPassed !== null && _remotionInternalNativeLoopPassed !== void 0 ? _remotionInternalNativeLoopPassed : false, showInTimeline: showInTimeline !== null && showInTimeline !== void 0 ? showInTimeline : true, onAutoPlayError: onAutoPlayError !== null && onAutoPlayError !== void 0 ? onAutoPlayError : undefined }));
+    return ((0, jsx_runtime_1.jsx)(VideoForPreview_js_1.VideoForPreview, { onlyWarnForMediaSeekingError: false, ...otherProps, ref: ref, onVideoFrame: onVideoFrame !== null && onVideoFrame !== void 0 ? onVideoFrame : null, pauseWhenBuffering: shouldPauseWhenBuffering, onDuration: onDuration, _remotionInternalStack: _remotionInternalStack !== null && _remotionInternalStack !== void 0 ? _remotionInternalStack : null, _remotionInternalNativeLoopPassed: _remotionInternalNativeLoopPassed !== null && _remotionInternalNativeLoopPassed !== void 0 ? _remotionInternalNativeLoopPassed : false, showInTimeline: showInTimeline !== null && showInTimeline !== void 0 ? showInTimeline : true, onAutoPlayError: onAutoPlayError !== null && onAutoPlayError !== void 0 ? onAutoPlayError : undefined }));
 };
 /**
  * @description Wraps the native `<video>` element to include video in your component that is synchronized with Remotion's time.

package/dist/cjs/video/index.js

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Video = exports.Html5Video = exports.OffthreadVideo = void 0;
-const OffthreadVideo_js_1 = require("./OffthreadVideo.js");
+var OffthreadVideo_js_1 = require("./OffthreadVideo.js");
 Object.defineProperty(exports, "OffthreadVideo", { enumerable: true, get: function () { return OffthreadVideo_js_1.OffthreadVideo; } });
-const html5_video_js_1 = require("./html5-video.js");
+var html5_video_js_1 = require("./html5-video.js");
 Object.defineProperty(exports, "Html5Video", { enumerable: true, get: function () { return html5_video_js_1.Html5Video; } });
 Object.defineProperty(exports, "Video", { enumerable: true, get: function () { return html5_video_js_1.Video; } });

package/dist/cjs/video/seek-until-right.d.ts

@@ -1,7 +1,8 @@
+import { type LogLevel } from '../log';
 export declare const seekToTime: ({ element, desiredTime, logLevel, mountTime, }: {
     element: HTMLVideoElement;
     desiredTime: number;
-    logLevel: "error" | "info" | "trace" | "verbose" | "warn";
+    logLevel: LogLevel;
     mountTime: number;
 }) => {
     wait: Promise<number>;
@@ -11,7 +12,7 @@ export declare const seekToTimeMultipleUntilRight: ({ element, desiredTime, fps,
     element: HTMLVideoElement;
     desiredTime: number;
     fps: number;
-    logLevel: "error" | "info" | "trace" | "verbose" | "warn";
+    logLevel: LogLevel;
     mountTime: number;
 }) => {
     prom: Promise<void>;

package/dist/cjs/warn-about-non-seekable-media.d.ts

@@ -1 +1 @@
-export declare const warnAboutNonSeekableMedia: (ref: HTMLMediaElement | null, type: "console-error" | "console-warning" | "exception") => void;
+export declare const warnAboutNonSeekableMedia: (ref: HTMLMediaElement | null, type: 'console-warning' | 'console-error' | 'exception') => void;

package/dist/cjs/with-interactivity-schema.d.ts

@@ -7,7 +7,7 @@ export declare const getRuntimeValueForSchemaKey: ({ flatSchema, key, props, }:
     key: string;
     props: Record<string, unknown>;
 }) => unknown;
-export declare const readValuesFromProps: (props: Record<string, unknown>, keys: string[], flatSchema?: InteractivitySchema | undefined) => Record<string, unknown>;
+export declare const readValuesFromProps: (props: Record<string, unknown>, keys: string[], flatSchema?: InteractivitySchema) => Record<string, unknown>;
 export declare const selectActiveKeys: (schema: InteractivitySchema, values: Record<string, unknown>) => string[];
 export declare const mergeValues: ({ flatSchema, props, valuesDotNotation, schemaKeys, propsToDelete, }: {
     flatSchema: InteractivitySchema;

package/dist/cjs/with-interactivity-schema.js

@@ -167,8 +167,6 @@ const withInteractivitySchema = ({ Component, componentName, componentIdentity =
             });
         }
         // eslint-disable-next-line react-hooks/rules-of-hooks
-        const { propStatuses } = (0, react_1.useContext)(SequenceManager_js_1.VisualModePropStatusesContext);
-        // eslint-disable-next-line react-hooks/rules-of-hooks
         const nodePathMapping = (0, react_1.useContext)(sequence_node_path_js_1.OverrideIdsToNodePathsGettersContext);
         // eslint-disable-next-line react-hooks/rules-of-hooks
         const videoConfig = (0, use_unsafe_video_config_js_1.useUnsafeVideoConfig)();
@@ -228,12 +226,9 @@ const withInteractivitySchema = ({ Component, componentName, componentIdentity =
         // eslint-disable-next-line react-hooks/rules-of-hooks
         const dragOverrides = (0, SequenceManager_js_1.useDragOverridesForNodePath)(nodePath);
         // eslint-disable-next-line react-hooks/rules-of-hooks
-        const propStatus = (0, react_1.useMemo)(() => nodePath === null
-            ? undefined
-            : (0, use_memoized_effects_js_1.getPropStatusesCtx)(propStatuses, {
-                ...nodePath,
-                videoConfigValues,
-            }), [nodePath, propStatuses, videoConfigValues]);
+        const sequenceStatus = (0, SequenceManager_js_1.usePropStatusForNodePath)(nodePath);
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        const propStatus = (0, react_1.useMemo)(() => (0, use_memoized_effects_js_1.getPropStatusesForSequenceStatus)(sequenceStatus, videoConfigValues), [sequenceStatus, videoConfigValues]);
         // Runtime props already update through their owner. Only overrides with
         // keyframes need this wrapper to subscribe to the advancing clock.
         const needsFrame = flatKeys.some((key) => {

package/dist/cjs/wrap-remotion-context.d.ts

@@ -16,17 +16,17 @@ export declare function useRemotionContexts(): {
     };
     resolveCompositionContext: {
         [x: string]: ({
-            type: "loading";
+            type: 'loading';
         } | {
-            type: "success";
+            type: 'success';
             result: import("./video-config.js").VideoConfig;
             metadataSource: import("./resolve-video-config.js").VideoConfigMetadataSource | null;
         } | {
-            type: "success-and-refreshing";
+            type: 'success-and-refreshing';
             result: import("./video-config.js").VideoConfig;
             metadataSource: import("./resolve-video-config.js").VideoConfigMetadataSource | null;
         } | {
-            type: "error";
+            type: 'error';
             error: Error;
         }) | undefined;
     } | null;