remotion 4.0.537 → 4.0.539

package/dist/cjs/animated-image/AnimatedImage.d.ts

@@ -3,52 +3,52 @@ import type { SequenceControls } from '../CompositionManager.js';
 import type { EffectsProp, EffectsOutputSize } from '../effects/effect-types.js';
 export declare const animatedImageSchema: {
     readonly 'style.transformOrigin': {
-        readonly type: "transform-origin";
+        readonly type: 'transform-origin';
         readonly step: 1;
-        readonly default: "50% 50%";
-        readonly description: "Transform origin";
+        readonly default: '50% 50%';
+        readonly description: 'Transform origin';
     };
     readonly 'style.translate': {
-        readonly type: "translate";
+        readonly type: 'translate';
         readonly step: 1;
-        readonly default: "0px 0px";
-        readonly description: "Offset";
+        readonly default: '0px 0px';
+        readonly description: 'Offset';
     };
     readonly 'style.scale': {
-        readonly type: "scale";
+        readonly type: 'scale';
         readonly max: 100;
         readonly step: 0.01;
         readonly default: 1;
-        readonly description: "Scale";
-        readonly defaultKeyframeOutput: "perceptual-scale";
+        readonly description: 'Scale';
+        readonly defaultKeyframeOutput: 'perceptual-scale';
     };
     readonly 'style.rotate': {
-        readonly type: "rotation-css";
+        readonly type: 'rotation-css';
         readonly step: 1;
-        readonly default: "0deg";
-        readonly description: "Rotation";
+        readonly default: '0deg';
+        readonly description: 'Rotation';
     };
     readonly 'style.opacity': {
-        readonly type: "number";
+        readonly type: 'number';
         readonly min: 0;
         readonly max: 1;
         readonly step: 0.01;
         readonly default: 1;
-        readonly description: "Opacity";
+        readonly description: 'Opacity';
         readonly hiddenFromList: false;
     };
     readonly 'style.borderWidth': {
-        readonly type: "number";
+        readonly type: 'number';
         readonly default: undefined;
         readonly min: 0;
         readonly step: 1;
-        readonly description: "Border width";
+        readonly description: 'Border width';
         readonly hiddenFromList: false;
     };
     readonly 'style.borderStyle': {
-        readonly type: "enum";
-        readonly default: "none";
-        readonly description: "Border style";
+        readonly type: 'enum';
+        readonly default: 'none';
+        readonly description: 'Border style';
         readonly variants: {
             readonly none: {};
             readonly hidden: {};
@@ -63,67 +63,67 @@ export declare const animatedImageSchema: {
         };
     };
     readonly 'style.borderColor': {
-        readonly type: "color";
+        readonly type: 'color';
         readonly default: undefined;
-        readonly description: "Border color";
+        readonly description: 'Border color';
     };
     readonly 'style.borderRadius': {
-        readonly type: "number";
+        readonly type: 'number';
         readonly default: 0;
         readonly min: 0;
         readonly step: 1;
-        readonly description: "Border radius";
+        readonly description: 'Border radius';
         readonly hiddenFromList: false;
         readonly keyframable: true;
     };
     readonly 'style.borderTopLeftRadius': {
-        readonly type: "number";
+        readonly type: 'number';
         readonly default: 0;
         readonly min: 0;
         readonly step: 1;
-        readonly description: "Top left radius";
+        readonly description: 'Top left radius';
         readonly hiddenFromList: false;
     };
     readonly 'style.borderTopRightRadius': {
-        readonly type: "number";
+        readonly type: 'number';
         readonly default: 0;
         readonly min: 0;
         readonly step: 1;
-        readonly description: "Top right radius";
+        readonly description: 'Top right radius';
         readonly hiddenFromList: false;
     };
     readonly 'style.borderBottomRightRadius': {
-        readonly type: "number";
+        readonly type: 'number';
         readonly default: 0;
         readonly min: 0;
         readonly step: 1;
-        readonly description: "Bottom right radius";
+        readonly description: 'Bottom right radius';
         readonly hiddenFromList: false;
     };
     readonly 'style.borderBottomLeftRadius': {
-        readonly type: "number";
+        readonly type: 'number';
         readonly default: 0;
         readonly min: 0;
         readonly step: 1;
-        readonly description: "Bottom left radius";
+        readonly description: 'Bottom left radius';
         readonly hiddenFromList: false;
     };
     readonly 'style.backgroundColor': {
-        readonly type: "color";
-        readonly default: "transparent";
-        readonly description: "Color";
+        readonly type: 'color';
+        readonly default: 'transparent';
+        readonly description: 'Color';
     };
     readonly premountFor: {
-        readonly type: "number";
+        readonly type: 'number';
         readonly default: undefined;
-        readonly description: "Premount For";
+        readonly description: 'Premount For';
         readonly min: 0;
         readonly step: 1;
         readonly hiddenFromList: false;
         readonly keyframable: false;
     };
     readonly postmountFor: {
-        readonly type: "number";
+        readonly type: 'number';
         readonly default: 0;
         readonly min: 0;
         readonly step: 1;
@@ -131,9 +131,9 @@ export declare const animatedImageSchema: {
         readonly keyframable: false;
     };
     readonly cropLeft: {
-        readonly type: "number";
+        readonly type: 'number';
         readonly default: 0;
-        readonly description: "Crop left";
+        readonly description: 'Crop left';
         readonly min: 0;
         readonly max: 1;
         readonly step: 0.01;
@@ -141,9 +141,9 @@ export declare const animatedImageSchema: {
         readonly keyframable: true;
     };
     readonly cropRight: {
-        readonly type: "number";
+        readonly type: 'number';
         readonly default: 0;
-        readonly description: "Crop right";
+        readonly description: 'Crop right';
         readonly min: 0;
         readonly max: 1;
         readonly step: 0.01;
@@ -151,9 +151,9 @@ export declare const animatedImageSchema: {
         readonly keyframable: true;
     };
     readonly cropTop: {
-        readonly type: "number";
+        readonly type: 'number';
         readonly default: 0;
-        readonly description: "Crop top";
+        readonly description: 'Crop top';
         readonly min: 0;
         readonly max: 1;
         readonly step: 0.01;
@@ -161,9 +161,9 @@ export declare const animatedImageSchema: {
         readonly keyframable: true;
     };
     readonly cropBottom: {
-        readonly type: "number";
+        readonly type: 'number';
         readonly default: 0;
-        readonly description: "Crop bottom";
+        readonly description: 'Crop bottom';
         readonly min: 0;
         readonly max: 1;
         readonly step: 0.01;
@@ -171,36 +171,36 @@ export declare const animatedImageSchema: {
         readonly keyframable: true;
     };
     readonly durationInFrames: {
-        readonly type: "number";
+        readonly type: 'number';
         readonly default: undefined;
         readonly min: 1;
         readonly step: 1;
         readonly hiddenFromList: true;
     };
     readonly from: {
-        readonly type: "number";
+        readonly type: 'number';
         readonly default: 0;
         readonly step: 1;
         readonly hiddenFromList: true;
     };
     readonly trimBefore: {
-        readonly type: "number";
+        readonly type: 'number';
         readonly default: 0;
         readonly min: 0;
         readonly step: 1;
         readonly hiddenFromList: true;
     };
     readonly playbackRate: {
-        readonly type: "number";
+        readonly type: 'number';
         readonly default: 1;
         readonly min: 0.01;
         readonly step: 0.1;
-        readonly description: "Playback rate";
+        readonly description: 'Playback rate';
         readonly hiddenFromList: false;
         readonly keyframable: false;
     };
     readonly freeze: {
-        readonly type: "number";
+        readonly type: 'number';
         readonly default: null;
         readonly step: 1;
         readonly hiddenFromList: true;
@@ -209,35 +209,35 @@ export declare const animatedImageSchema: {
     readonly name: import("../interactivity-schema.js").HiddenFieldSchema;
     readonly showInTimeline: import("../interactivity-schema.js").HiddenFieldSchema;
     readonly src: {
-        readonly type: "asset";
-        readonly assetType: "image";
+        readonly type: 'asset';
+        readonly assetType: 'image';
         readonly default: undefined;
-        readonly description: "Source";
+        readonly description: 'Source';
         readonly keyframable: false;
     };
     readonly loop: {
-        readonly type: "boolean";
+        readonly type: 'boolean';
         readonly default: false;
-        readonly description: "Loop";
+        readonly description: 'Loop';
         readonly keyframable: false;
     };
 };
 export declare const AnimatedImage: React.ComponentType<import("../Interactive.js").InteractiveBaseProps & import("../Interactive.js").InteractiveCropProps & import("../Interactive.js").InteractivePremountProps & {
     src: string;
-    width?: number | undefined;
-    height?: number | undefined;
-    onError?: ((error: Error) => void) | undefined;
-    fit?: import("../calculate-image-fit.js").ImageFit | undefined;
-    playbackRate?: number | undefined;
-    style?: React.CSSProperties | undefined;
-    loopBehavior?: import("./props").RemotionAnimatedImageLoopBehavior | undefined;
-    id?: string | undefined;
-    className?: string | undefined;
-    requestInit?: RequestInit | undefined;
+    width?: number;
+    height?: number;
+    onError?: (error: Error) => void;
+    fit?: import("./props").AnimatedImageFillMode;
+    playbackRate?: number;
+    style?: React.CSSProperties;
+    loopBehavior?: import("./props").RemotionAnimatedImageLoopBehavior;
+    id?: string;
+    className?: string;
+    requestInit?: RequestInit;
 } & React.AriaAttributes & Record<`data-${string}`, string | undefined> & {
-    readonly effects?: EffectsProp | undefined;
-    readonly effectsOutputSize?: EffectsOutputSize | undefined;
+    readonly effects?: EffectsProp;
+    readonly effectsOutputSize?: EffectsOutputSize;
 } & {
     readonly controls?: SequenceControls | undefined;
-    readonly ref?: React.Ref<HTMLCanvasElement> | undefined;
+    readonly ref?: React.Ref<HTMLCanvasElement>;
 }>;

package/dist/cjs/animated-image/AnimatedImage.js

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AnimatedImage = exports.animatedImageSchema = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const jsx_runtime_1 = require("react/jsx-runtime");
 const react_2 = require("react");
 const use_memoized_effects_js_1 = require("../effects/use-memoized-effects.js");
 const enable_sequence_stack_traces_js_1 = require("../enable-sequence-stack-traces.js");
@@ -204,7 +204,7 @@ const AnimatedImageContent = (0, react_2.forwardRef)(({ src, width, height, onEr
         effectsOutputSize === null || effectsOutputSize === void 0 ? void 0 : effectsOutputSize.width,
         effectsOutputSize === null || effectsOutputSize === void 0 ? void 0 : effectsOutputSize.height,
     ]);
-    return (jsx_runtime_1.jsx(canvas_1.Canvas, { ref: ref, width: width, height: height, fit: fit, effects: memoizedEffects, effectsOutputSize: effectsOutputSize !== null && effectsOutputSize !== void 0 ? effectsOutputSize : null, ...props }));
+    return ((0, jsx_runtime_1.jsx)(canvas_1.Canvas, { ref: ref, width: width, height: height, fit: fit, effects: memoizedEffects, effectsOutputSize: effectsOutputSize !== null && effectsOutputSize !== void 0 ? effectsOutputSize : null, ...props }));
 });
 AnimatedImageContent.displayName = 'AnimatedImageContent';
 const AnimatedImageInner = ({ src, width, height, onError, fit, playbackRate, loopBehavior, id, className, style, durationInFrames, from, premountFor, postmountFor, styleWhilePremounted, styleWhilePostmounted, cropLeft, cropRight, cropTop, cropBottom, requestInit, effects = [], effectsOutputSize, controls, ref, ...sequenceProps }) => {
@@ -249,7 +249,7 @@ const AnimatedImageInner = ({ src, width, height, onError, fit, playbackRate, lo
         requestInit,
         ...canvasProps,
     };
-    return (jsx_runtime_1.jsx(freeze_js_1.Freeze, { frame: freezeFrame, active: isPremountingOrPostmounting, _remotionInternalIsPremounting: premountingActive, children: jsx_runtime_1.jsx(Sequence_js_1.Sequence, { layout: "none", from: from !== null && from !== void 0 ? from : 0, playbackRate: playbackRate, durationInFrames: durationInFrames, name: "<AnimatedImage>", _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/animatedimage", controls: controls, _remotionInternalEffects: memoizedEffectDefinitions, _remotionInternalPremountDisplay: effectivePremountFor || null, _remotionInternalPostmountDisplay: effectivePostmountFor || null, _remotionInternalIsPremounting: premountingActive, _remotionInternalIsPostmounting: postmountingActive, ...sequenceProps, children: jsx_runtime_1.jsx(sequence_activity_context_js_1.SequenceContent, { children: jsx_runtime_1.jsx(AnimatedImageContent, { ...animatedImageProps, ref: actualRef, effects: effects, effectsOutputSize: effectsOutputSize !== null && effectsOutputSize !== void 0 ? effectsOutputSize : null, controls: controls }) }) }) }));
+    return ((0, jsx_runtime_1.jsx)(freeze_js_1.Freeze, { frame: freezeFrame, active: isPremountingOrPostmounting, _remotionInternalIsPremounting: premountingActive, children: (0, jsx_runtime_1.jsx)(Sequence_js_1.Sequence, { layout: "none", from: from !== null && from !== void 0 ? from : 0, playbackRate: playbackRate, durationInFrames: durationInFrames, name: "<AnimatedImage>", _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/animatedimage", controls: controls, _remotionInternalEffects: memoizedEffectDefinitions, _remotionInternalPremountDisplay: effectivePremountFor || null, _remotionInternalPostmountDisplay: effectivePostmountFor || null, _remotionInternalIsPremounting: premountingActive, _remotionInternalIsPostmounting: postmountingActive, ...sequenceProps, children: (0, jsx_runtime_1.jsx)(sequence_activity_context_js_1.SequenceContent, { children: (0, jsx_runtime_1.jsx)(AnimatedImageContent, { ...animatedImageProps, ref: actualRef, effects: effects, effectsOutputSize: effectsOutputSize !== null && effectsOutputSize !== void 0 ? effectsOutputSize : null, controls: controls }) }) }) }));
 };
 const AnimatedImageWithIntrinsicDuration = (props) => {
     const { fps } = (0, use_video_config_js_1.useVideoConfig)();
@@ -308,16 +308,16 @@ const AnimatedImageWithIntrinsicDuration = (props) => {
     if (duration === null || failedHandle !== null) {
         return null;
     }
-    return (jsx_runtime_1.jsx(AnimatedImageInner, { ...props, durationInFrames: duration.durationInFrames }));
+    return ((0, jsx_runtime_1.jsx)(AnimatedImageInner, { ...props, durationInFrames: duration.durationInFrames }));
 };
 const AnimatedImageComponent = (props) => {
     var _a;
     if (props.loop && props.durationInFrames === undefined) {
         const resolvedSrc = (0, resolve_image_source_1.resolveAnimatedImageSource)(props.src);
         const requestInitKey = (0, request_init_1.serializeRequestInit)(props.requestInit);
-        return (react_1.createElement(AnimatedImageWithIntrinsicDuration, { ...props, key: `${resolvedSrc}-${requestInitKey}-${(_a = props.trimBefore) !== null && _a !== void 0 ? _a : 0}` }));
+        return ((0, react_1.createElement)(AnimatedImageWithIntrinsicDuration, { ...props, key: `${resolvedSrc}-${requestInitKey}-${(_a = props.trimBefore) !== null && _a !== void 0 ? _a : 0}` }));
     }
-    return jsx_runtime_1.jsx(AnimatedImageInner, { ...props });
+    return (0, jsx_runtime_1.jsx)(AnimatedImageInner, { ...props });
 };
 exports.AnimatedImage = (0, with_interactivity_schema_js_1.withInteractivitySchema)({
     Component: AnimatedImageComponent,

package/dist/cjs/animated-image/canvas.d.ts

@@ -1,16 +1,17 @@
 import React from 'react';
 import type { EffectDefinitionAndStack, EffectsOutputSize } from '../effects/effect-types.js';
+import type { AnimatedImageFillMode } from './props';
 export type AnimatedImageCanvasRef = {
     readonly draw: (imageData: VideoFrame) => Promise<boolean>;
     readonly getCanvas: () => HTMLCanvasElement | null;
     clear: () => void;
 };
 export declare const Canvas: React.ForwardRefExoticComponent<{
-    readonly width?: number | undefined;
-    readonly height?: number | undefined;
-    readonly fit: import("../calculate-image-fit.js").ImageFit;
-    readonly className?: string | undefined;
-    readonly style?: React.CSSProperties | undefined;
+    readonly width?: number;
+    readonly height?: number;
+    readonly fit: AnimatedImageFillMode;
+    readonly className?: string;
+    readonly style?: React.CSSProperties;
     readonly effects: EffectDefinitionAndStack<unknown>[];
     readonly effectsOutputSize: EffectsOutputSize | null;
 } & React.AriaAttributes & Record<`data-${string}`, string | undefined> & React.RefAttributes<AnimatedImageCanvasRef>>;

package/dist/cjs/animated-image/canvas.js

@@ -101,6 +101,6 @@ const CanvasRefForwardingFunction = ({ width, height, fit, className, style, eff
             },
         };
     }, [draw]);
-    return (jsx_runtime_1.jsx("canvas", { ref: canvasRef, className: className, style: style, ...props }));
+    return ((0, jsx_runtime_1.jsx)("canvas", { ref: canvasRef, className: className, style: style, ...props }));
 };
 exports.Canvas = react_1.default.forwardRef(CanvasRefForwardingFunction);

package/dist/cjs/animated-image/create-image-decoder.d.ts

@@ -1,7 +1,7 @@
 export declare const createImageDecoder: ({ resolvedSrc, signal, requestInit, contentType, }: {
     resolvedSrc: string;
     signal: AbortSignal;
-    requestInit?: RequestInit | undefined;
+    requestInit?: RequestInit;
     contentType: string | null;
 }) => Promise<{
     decoder: ImageDecoder;

package/dist/cjs/animated-image/decode-image.d.ts

@@ -12,7 +12,7 @@ export type RemotionImageDecoder = {
 export declare const decodeImage: ({ resolvedSrc, signal, requestInit, currentTime, initialLoopBehavior, }: {
     resolvedSrc: string;
     signal: AbortSignal;
-    requestInit?: RequestInit | undefined;
+    requestInit?: RequestInit;
     currentTime: number;
     initialLoopBehavior: RemotionAnimatedImageLoopBehavior;
 }) => Promise<RemotionImageDecoder>;

package/dist/cjs/animated-image/decode-image.js

@@ -45,6 +45,7 @@ const decodeImage = async ({ resolvedSrc, signal, requestInit, currentTime, init
         };
     };
     const clearCache = (closeToTimeInSec) => {
+        var _a;
         const itemsInCache = cache.filter((c) => c.frame);
         const sortByClosestToCurrentTime = itemsInCache.sort((a, b) => {
             const aDiff = Math.abs(a.timeInSeconds - closeToTimeInSec);
@@ -56,6 +57,7 @@ const decodeImage = async ({ resolvedSrc, signal, requestInit, currentTime, init
                 continue;
             }
             const item = sortByClosestToCurrentTime[i];
+            (_a = item.frame) === null || _a === void 0 ? void 0 : _a.close();
             item.frame = null;
         }
     };

package/dist/cjs/animated-image/get-duration-in-seconds.d.ts

@@ -1,6 +1,6 @@
 export declare const getAnimatedImageDurationInSeconds: ({ resolvedSrc, signal, requestInit, contentType, }: {
     resolvedSrc: string;
     signal: AbortSignal;
-    requestInit?: RequestInit | undefined;
+    requestInit?: RequestInit;
     contentType: string | null;
 }) => Promise<number>;

package/dist/cjs/animated-image/index.js

@@ -1,5 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AnimatedImage = void 0;
-const AnimatedImage_1 = require("./AnimatedImage");
+var AnimatedImage_1 = require("./AnimatedImage");
 Object.defineProperty(exports, "AnimatedImage", { enumerable: true, get: function () { return AnimatedImage_1.AnimatedImage; } });

package/dist/cjs/audio/AudioForPreview.js

@@ -45,6 +45,7 @@ const random_js_1 = require("../random.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");
@@ -154,40 +155,16 @@ const AudioForDevelopmentForwardRefFunction = (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(() => {
-                cleanupOnMediaTagUnmount();
-            });
-        };
+        return use_media_duration_js_1.scheduleMediaSourceCleanup.bind(null, cleanupOnMediaTagUnmount);
     }, [cleanupOnMediaTagUnmount]);
     (0, react_2.useImperativeHandle)(ref, () => {
         return audioRef.current;
     }, [audioRef]);
-    const currentOnDurationCallback = (0, react_2.useRef)(onDuration);
-    currentOnDurationCallback.current = onDuration;
-    (0, react_2.useEffect)(() => {
-        var _a;
-        const { current } = audioRef;
-        if (!current) {
-            return;
-        }
-        if (current.duration) {
-            (_a = currentOnDurationCallback.current) === null || _a === void 0 ? void 0 : _a.call(currentOnDurationCallback, current.src, current.duration);
-            return;
-        }
-        const onLoadedMetadata = () => {
-            var _a;
-            (_a = currentOnDurationCallback.current) === null || _a === void 0 ? void 0 : _a.call(currentOnDurationCallback, current.src, current.duration);
-        };
-        current.addEventListener('loadedmetadata', onLoadedMetadata);
-        return () => {
-            current.removeEventListener('loadedmetadata', onLoadedMetadata);
-        };
-    }, [audioRef, src]);
+    (0, use_media_duration_js_1.useMediaDuration)(audioRef, onDuration, src, true);
     if (initialShouldPreMountAudioElements) {
         return null;
     }
-    const audio = (jsx_runtime_1.jsx("audio", { ref: audioRef, preload: "metadata", crossOrigin: crossOriginValue, ...propsToPass }));
+    const audio = ((0, jsx_runtime_1.jsx)("audio", { ref: audioRef, preload: "metadata", crossOrigin: crossOriginValue, ...propsToPass }));
     return audio;
 };
 const AudioForPreviewContent = (0, react_2.forwardRef)(AudioForDevelopmentForwardRefFunction);
@@ -234,6 +211,6 @@ const AudioForPreviewRefForwardingFunction = (props, ref) => {
             outlineChildrenRef: null,
         }
         : null, [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(AudioForPreviewContent, { ...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)(AudioForPreviewContent, { ...props, ref: ref, timelineId: timelineId, userPreferredVolume: userPreferredVolume, isMutedForPlayback: isMutedForPlayback }) }) }));
 };
 exports.AudioForPreview = (0, react_2.forwardRef)(AudioForPreviewRefForwardingFunction);

package/dist/cjs/audio/AudioForRendering.d.ts

@@ -1,24 +1,9 @@
 import type { ForwardRefExoticComponent, RefAttributes } from 'react';
 import React from 'react';
-export declare const AudioForRendering: ForwardRefExoticComponent<import("./props.js").NativeAudioProps & {
-    name?: string | undefined;
-    volume?: import("../volume-prop.js").VolumeProp | undefined;
-    playbackRate?: number | undefined;
-    preservePitch?: boolean | undefined;
-    acceptableTimeShiftInSeconds?: number | undefined;
-    allowAmplificationDuringRender?: boolean | undefined;
-    _remotionInternalNeedsDurationCalculation?: boolean | undefined;
-    _remotionInternalNativeLoopPassed?: boolean | undefined;
-    toneFrequency?: number | undefined;
-    useWebAudioApi?: boolean | undefined;
-    pauseWhenBuffering?: boolean | undefined;
-    showInTimeline?: boolean | undefined;
-    delayRenderTimeoutInMilliseconds?: number | undefined;
-    delayRenderRetries?: number | undefined;
-    loopVolumeCurveBehavior?: import("./use-audio-frame.js").LoopVolumeCurveBehavior | undefined;
-    onError?: ((err: Error) => void) | undefined;
-    audioStreamIndex?: number | undefined;
-} & {
+import type { RemotionAudioProps } from './props.js';
+type AudioForRenderingProps = RemotionAudioProps & {
     readonly onDuration: (src: string, durationInSeconds: number) => void;
     readonly onNativeError: React.ReactEventHandler<HTMLAudioElement>;
-} & RefAttributes<HTMLAudioElement>>;
+};
+export declare const AudioForRendering: ForwardRefExoticComponent<AudioForRenderingProps & RefAttributes<HTMLAudioElement>>;
+export {};

package/dist/cjs/audio/AudioForRendering.js

@@ -1,8 +1,41 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AudioForRendering = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
+const react_1 = __importStar(require("react"));
 const absolute_src_js_1 = require("../absolute-src.js");
 const random_js_1 = require("../random.js");
 const RenderAssetManager_js_1 = require("../RenderAssetManager.js");
@@ -18,14 +51,13 @@ const use_media_audio_state_js_1 = require("./use-media-audio-state.js");
 const AudioForRenderingRefForwardingFunction = (props, ref) => {
     var _a, _b;
     const audioRef = (0, react_1.useRef)(null);
-    const { volume: volumeProp, playbackRate, allowAmplificationDuringRender, onDuration, toneFrequency, _remotionInternalNeedsDurationCalculation, _remotionInternalNativeLoopPassed, acceptableTimeShiftInSeconds, name, onNativeError, delayRenderRetries, delayRenderTimeoutInMilliseconds, loopVolumeCurveBehavior, pauseWhenBuffering, audioStreamIndex, preservePitch: _preservePitch, ...nativeProps } = props;
+    const { registerRenderAsset, unregisterRenderAsset, volume: volumeProp, playbackRate, allowAmplificationDuringRender, onDuration, toneFrequency, _remotionInternalNeedsDurationCalculation, _remotionInternalNativeLoopPassed, acceptableTimeShiftInSeconds, name, onNativeError, delayRenderRetries, delayRenderTimeoutInMilliseconds, loopVolumeCurveBehavior, pauseWhenBuffering, audioStreamIndex, preservePitch, ...nativeProps } = props;
     const absoluteFrame = (0, timeline_position_state_js_1.useTimelinePosition)();
     const volumePropFrame = (0, use_audio_frame_js_1.useFrameForVolumeProp)(loopVolumeCurveBehavior !== null && loopVolumeCurveBehavior !== void 0 ? loopVolumeCurveBehavior : 'repeat');
     const frame = (0, use_current_frame_js_1.useCurrentFrame)();
     const sequenceContext = (0, react_1.useContext)(SequenceContext_js_1.SequenceContext);
     const sequencePlaybackRate = (_a = sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.playbackRate) !== null && _a !== void 0 ? _a : 1;
     const audioStartFrame = (0, react_1.useContext)(use_audio_frame_js_1.Html5MediaTrimContext);
-    const { registerRenderAsset, unregisterRenderAsset } = (0, react_1.useContext)(RenderAssetManager_js_1.RenderAssetManager);
     const { delayRender, continueRender } = (0, use_delay_render_js_1.useDelayRender)();
     // Generate a string that's as unique as possible for this asset
     // but at the same time the same on all threads
@@ -73,6 +105,7 @@ const AudioForRenderingRefForwardingFunction = (props, ref) => {
             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);
     }, [
@@ -91,6 +124,7 @@ const AudioForRenderingRefForwardingFunction = (props, ref) => {
         audioStartFrame,
         sequencePlaybackRate,
         audioStreamIndex,
+        preservePitch,
     ]);
     const { src } = props;
     // The <audio> tag is only rendered if the duration needs to be calculated for the `loop`
@@ -140,6 +174,11 @@ const AudioForRenderingRefForwardingFunction = (props, ref) => {
     if (!needsToRenderAudioTag) {
         return null;
     }
-    return jsx_runtime_1.jsx("audio", { ref: audioRef, ...nativeProps, onError: onNativeError });
+    return (0, jsx_runtime_1.jsx)("audio", { ref: audioRef, ...nativeProps, onError: onNativeError });
 };
-exports.AudioForRendering = (0, react_1.forwardRef)(AudioForRenderingRefForwardingFunction);
+// Asset collection updates the context, but the audio component only needs its callbacks.
+const MemoAudioForRendering = react_1.default.memo((0, react_1.forwardRef)(AudioForRenderingRefForwardingFunction));
+exports.AudioForRendering = (0, react_1.forwardRef)((props, ref) => {
+    const { registerRenderAsset, unregisterRenderAsset } = (0, react_1.useContext)(RenderAssetManager_js_1.RenderAssetManager);
+    return ((0, jsx_runtime_1.jsx)(MemoAudioForRendering, { ...props, ref: ref, registerRenderAsset: registerRenderAsset, unregisterRenderAsset: unregisterRenderAsset }));
+});