remotion 4.0.455 → 4.0.456

package/dist/cjs/HtmlInCanvas.js

@@ -83,7 +83,7 @@ const htmlInCanvasSchema = {
         description: 'Opacity',
     },
 };
-const HtmlInCanvasInner = (0, react_1.forwardRef)(({ width, height, _experimentalEffects: experimentalEffects = [], children, onPaint, onInit, controls, style, durationInFrames, ...sequenceProps }, ref) => {
+const HtmlInCanvasInner = (0, react_1.forwardRef)(({ width, height, _experimentalEffects: experimentalEffects = [], children, onPaint, onInit, _experimentalControls: controls, style, durationInFrames, ...sequenceProps }, ref) => {
     assertHtmlInCanvasDimensions(width, height);
     const { continueRender, cancelRender } = (0, use_delay_render_js_1.useDelayRender)();
     if (!(0, exports.isHtmlInCanvasSupported)()) {
@@ -246,7 +246,7 @@ const HtmlInCanvasInner = (0, react_1.forwardRef)(({ width, height, _experimenta
             ...style,
         };
     }, [width, height, style]);
-    return ((0, jsx_runtime_1.jsx)(Sequence_js_1.Sequence, { durationInFrames: resolvedDuration, name: "<HtmlInCanvas>", controls: controls, layout: "none", ...sequenceProps, children: (0, jsx_runtime_1.jsx)("canvas", { ref: setLayoutCanvasRef, width: width, height: height, children: (0, jsx_runtime_1.jsx)("div", { ref: divRef, style: innerStyle, children: children }) }) }));
+    return ((0, jsx_runtime_1.jsx)(Sequence_js_1.Sequence, { durationInFrames: resolvedDuration, name: "<HtmlInCanvas>", _experimentalControls: controls, layout: "none", ...sequenceProps, children: (0, jsx_runtime_1.jsx)("canvas", { ref: setLayoutCanvasRef, width: width, height: height, children: (0, jsx_runtime_1.jsx)("div", { ref: divRef, style: innerStyle, children: children }) }) }));
 });
 HtmlInCanvasInner.displayName = 'HtmlInCanvas';
 const HtmlInCanvasWrapped = (0, wrap_in_schema_js_1.wrapInSchema)(HtmlInCanvasInner, htmlInCanvasSchema);

package/dist/cjs/Img.js

@@ -54,7 +54,7 @@ const imgSchema = {
         description: 'Opacity',
     },
 };
-const ImgInner = ({ onError, maxRetries = 2, src, pauseWhenLoading, delayRenderRetries, delayRenderTimeoutInMilliseconds, onImageFrame, crossOrigin, showInTimeline, name, stack, ref, controls, ...props }) => {
+const ImgInner = ({ onError, maxRetries = 2, src, pauseWhenLoading, delayRenderRetries, delayRenderTimeoutInMilliseconds, onImageFrame, crossOrigin, showInTimeline, name, stack, ref, _experimentalControls: controls, ...props }) => {
     var _a, _b;
     const imageRef = (0, react_1.useRef)(null);
     const errors = (0, react_1.useRef)({});

package/dist/cjs/Sequence.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import type { LoopDisplay, SequenceControls } from './CompositionManager.js';
 import type { EffectsProp } from './effects/effect-types.js';
+import type { BasicMediaInTimelineReturnType } from './use-media-in-timeline.js';
 export type AbsoluteFillLayout = {
     layout?: 'absolute-fill';
     premountFor?: number;
@@ -20,7 +21,7 @@ export type SequencePropsWithoutDuration = {
     readonly from?: number;
     readonly name?: string;
     readonly showInTimeline?: boolean;
-    readonly controls?: SequenceControls;
+    readonly _experimentalControls?: SequenceControls;
     readonly _experimentalEffects?: EffectsProp;
     /**
      * @deprecated For internal use only.
@@ -46,6 +47,13 @@ export type SequencePropsWithoutDuration = {
      * @deprecated For internal use only.
      */
     readonly _remotionInternalIsPostmounting?: boolean;
+    /**
+     * @deprecated For internal use only.
+     */
+    readonly _remotionInternalIsMedia?: {
+        type: 'video' | 'audio';
+        data: BasicMediaInTimelineReturnType;
+    };
 } & LayoutAndStyle;
 export type SequenceProps = {
     readonly durationInFrames?: number;

package/dist/cjs/Sequence.js

@@ -17,7 +17,7 @@ const use_current_frame_1 = require("./use-current-frame");
 const use_remotion_environment_js_1 = require("./use-remotion-environment.js");
 const use_video_config_js_1 = require("./use-video-config.js");
 const v5_flag_js_1 = require("./v5-flag.js");
-const RegularSequenceRefForwardingFunction = ({ from = 0, durationInFrames = Infinity, children, name, height, width, showInTimeline = true, controls, _experimentalEffects, _remotionInternalLoopDisplay: loopDisplay, _remotionInternalStack: stack, _remotionInternalPremountDisplay: premountDisplay, _remotionInternalPostmountDisplay: postmountDisplay, ...other }, ref) => {
+const RegularSequenceRefForwardingFunction = ({ from = 0, durationInFrames = Infinity, children, name, height, width, showInTimeline = true, _experimentalControls: controls, _experimentalEffects, _remotionInternalLoopDisplay: loopDisplay, _remotionInternalStack: stack, _remotionInternalPremountDisplay: premountDisplay, _remotionInternalPostmountDisplay: postmountDisplay, _remotionInternalIsMedia: isMedia, ...other }, ref) => {
     var _a, _b;
     const { layout = 'absolute-fill' } = other;
     const [id] = (0, react_1.useState)(() => String(Math.random()));
@@ -99,16 +99,43 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, durationInFrames = Inf
     const inheritedStack = (_a = other === null || other === void 0 ? void 0 : other.stack) !== null && _a !== void 0 ? _a : null;
     const memoizedEffects = (0, use_memoized_effects_js_1.useMemoizedEffects)((0, effect_internals_js_1.flattenEffects)(_experimentalEffects !== null && _experimentalEffects !== void 0 ? _experimentalEffects : []));
     (0, react_1.useEffect)(() => {
-        var _a;
+        var _a, _b;
         if (!env.isStudio) {
             return;
         }
+        if (isMedia) {
+            registerSequence({
+                type: isMedia.type,
+                controls: controls !== null && controls !== void 0 ? controls : null,
+                effects: memoizedEffects,
+                displayName: timelineClipName,
+                doesVolumeChange: isMedia.data.doesVolumeChange,
+                duration: actualDurationInFrames,
+                from,
+                id,
+                loopDisplay,
+                nonce: nonce.get(),
+                parent: (_a = parentSequence === null || parentSequence === void 0 ? void 0 : parentSequence.id) !== null && _a !== void 0 ? _a : null,
+                playbackRate: isMedia.data.playbackRate,
+                postmountDisplay: postmountDisplay !== null && postmountDisplay !== void 0 ? postmountDisplay : null,
+                premountDisplay: premountDisplay !== null && premountDisplay !== void 0 ? premountDisplay : null,
+                rootId,
+                showInTimeline,
+                src: isMedia.data.src,
+                stack: stack !== null && stack !== void 0 ? stack : inheritedStack,
+                startMediaFrom: isMedia.data.startMediaFrom,
+                volume: isMedia.data.volumes,
+            });
+            return () => {
+                unregisterSequence(id);
+            };
+        }
         registerSequence({
             from,
             duration: actualDurationInFrames,
             id,
             displayName: timelineClipName,
-            parent: (_a = parentSequence === null || parentSequence === void 0 ? void 0 : parentSequence.id) !== null && _a !== void 0 ? _a : null,
+            parent: (_b = parentSequence === null || parentSequence === void 0 ? void 0 : parentSequence.id) !== null && _b !== void 0 ? _b : null,
             type: 'sequence',
             rootId,
             showInTimeline,
@@ -144,6 +171,7 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, durationInFrames = Inf
         inheritedStack,
         controls,
         memoizedEffects,
+        isMedia,
     ]);
     // Ceil to support floats
     // https://github.com/remotion-dev/remotion/issues/2958

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

@@ -5,52 +5,52 @@ import type { RemotionMainAudioProps } from './props.js';
  * @see [Documentation](https://remotion.dev/docs/html5-audio)
  */
 export declare const Html5Audio: React.ForwardRefExoticComponent<Omit<import("./props.js").NativeAudioProps & {
-    name?: string;
-    volume?: import("../volume-prop.js").VolumeProp;
-    playbackRate?: number;
-    acceptableTimeShiftInSeconds?: number;
-    allowAmplificationDuringRender?: boolean;
-    _remotionInternalNeedsDurationCalculation?: boolean;
-    _remotionInternalNativeLoopPassed?: boolean;
-    toneFrequency?: number;
-    useWebAudioApi?: boolean;
-    pauseWhenBuffering?: boolean;
-    showInTimeline?: boolean;
-    delayRenderTimeoutInMilliseconds?: number;
-    delayRenderRetries?: number;
-    loopVolumeCurveBehavior?: import("./use-audio-frame.js").LoopVolumeCurveBehavior;
-    onError?: (err: Error) => void;
-    audioStreamIndex?: number;
+    name?: string | undefined;
+    volume?: import("../volume-prop.js").VolumeProp | undefined;
+    playbackRate?: number | 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;
 } & RemotionMainAudioProps & {
     /**
      * @deprecated For internal use only
      */
-    readonly stack?: string;
+    readonly stack?: string | undefined;
 }, "ref"> & React.RefAttributes<HTMLAudioElement>>;
 /**
  * @deprecated This component has been renamed to `Html5Audio`.
  * @see [Documentation](https://remotion.dev/docs/mediabunny/new-video)
  */
 export declare const Audio: React.ForwardRefExoticComponent<Omit<import("./props.js").NativeAudioProps & {
-    name?: string;
-    volume?: import("../volume-prop.js").VolumeProp;
-    playbackRate?: number;
-    acceptableTimeShiftInSeconds?: number;
-    allowAmplificationDuringRender?: boolean;
-    _remotionInternalNeedsDurationCalculation?: boolean;
-    _remotionInternalNativeLoopPassed?: boolean;
-    toneFrequency?: number;
-    useWebAudioApi?: boolean;
-    pauseWhenBuffering?: boolean;
-    showInTimeline?: boolean;
-    delayRenderTimeoutInMilliseconds?: number;
-    delayRenderRetries?: number;
-    loopVolumeCurveBehavior?: import("./use-audio-frame.js").LoopVolumeCurveBehavior;
-    onError?: (err: Error) => void;
-    audioStreamIndex?: number;
+    name?: string | undefined;
+    volume?: import("../volume-prop.js").VolumeProp | undefined;
+    playbackRate?: number | 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;
 } & RemotionMainAudioProps & {
     /**
      * @deprecated For internal use only
      */
-    readonly stack?: string;
+    readonly stack?: string | undefined;
 }, "ref"> & React.RefAttributes<HTMLAudioElement>>;

package/dist/cjs/audio/Audio.js

@@ -66,25 +66,25 @@ const AudioRefForwardingFunction = (props, ref) => {
     });
     if (loop && durationFetched !== undefined) {
         if (!Number.isFinite(durationFetched)) {
-            return ((0, jsx_runtime_1.jsx)(exports.Html5Audio, { ...propsOtherThanLoop, ref: ref, _remotionInternalNativeLoopPassed: true }));
+            return (jsx_runtime_1.jsx(exports.Html5Audio, { ...propsOtherThanLoop, ref: ref, _remotionInternalNativeLoopPassed: true }));
         }
         const duration = durationFetched * fps;
-        return ((0, jsx_runtime_1.jsx)(index_js_1.Loop, { layout: "none", durationInFrames: (0, calculate_media_duration_js_1.calculateMediaDuration)({
+        return (jsx_runtime_1.jsx(index_js_1.Loop, { layout: "none", durationInFrames: (0, calculate_media_duration_js_1.calculateMediaDuration)({
                 trimAfter: trimAfterValue,
                 mediaDurationInFrames: duration,
                 playbackRate: (_b = props.playbackRate) !== null && _b !== void 0 ? _b : 1,
                 trimBefore: trimBeforeValue,
-            }), children: (0, jsx_runtime_1.jsx)(exports.Html5Audio, { ...propsOtherThanLoop, ref: ref, _remotionInternalNativeLoopPassed: true }) }));
+            }), children: jsx_runtime_1.jsx(exports.Html5Audio, { ...propsOtherThanLoop, ref: ref, _remotionInternalNativeLoopPassed: true }) }));
     }
     if (typeof trimBeforeValue !== 'undefined' ||
         typeof trimAfterValue !== 'undefined') {
-        return ((0, jsx_runtime_1.jsx)(Sequence_js_1.Sequence, { layout: "none", from: 0 - (trimBeforeValue !== null && trimBeforeValue !== void 0 ? trimBeforeValue : 0), showInTimeline: false, durationInFrames: trimAfterValue, name: name, children: (0, jsx_runtime_1.jsx)(exports.Html5Audio, { _remotionInternalNeedsDurationCalculation: Boolean(loop), pauseWhenBuffering: pauseWhenBuffering !== null && pauseWhenBuffering !== void 0 ? pauseWhenBuffering : false, ...otherProps, ref: ref }) }));
+        return (jsx_runtime_1.jsx(Sequence_js_1.Sequence, { layout: "none", from: 0 - (trimBeforeValue !== null && trimBeforeValue !== void 0 ? trimBeforeValue : 0), showInTimeline: false, durationInFrames: trimAfterValue, name: name, children: jsx_runtime_1.jsx(exports.Html5Audio, { _remotionInternalNeedsDurationCalculation: Boolean(loop), pauseWhenBuffering: pauseWhenBuffering !== null && pauseWhenBuffering !== void 0 ? pauseWhenBuffering : false, ...otherProps, ref: ref }) }));
     }
     (0, validate_media_props_js_1.validateMediaProps)({ playbackRate: props.playbackRate, volume: props.volume }, 'Html5Audio');
     if (environment.isRendering) {
-        return ((0, jsx_runtime_1.jsx)(AudioForRendering_js_1.AudioForRendering, { onDuration: onDuration, ...props, ref: ref, onNativeError: onError, _remotionInternalNeedsDurationCalculation: Boolean(loop) }));
+        return (jsx_runtime_1.jsx(AudioForRendering_js_1.AudioForRendering, { onDuration: onDuration, ...props, ref: ref, onNativeError: onError, _remotionInternalNeedsDurationCalculation: Boolean(loop) }));
     }
-    return ((0, jsx_runtime_1.jsx)(AudioForPreview_js_1.AudioForPreview, { _remotionInternalNativeLoopPassed: (_c = props._remotionInternalNativeLoopPassed) !== null && _c !== void 0 ? _c : false, _remotionInternalStack: stack !== null && stack !== void 0 ? stack : null, shouldPreMountAudioTags: audioTagsContext !== null && audioTagsContext.numberOfAudioTags > 0, ...props, ref: ref, onNativeError: onError, onDuration: onDuration, 
+    return (jsx_runtime_1.jsx(AudioForPreview_js_1.AudioForPreview, { _remotionInternalNativeLoopPassed: (_c = props._remotionInternalNativeLoopPassed) !== null && _c !== void 0 ? _c : false, _remotionInternalStack: stack !== null && stack !== void 0 ? stack : null, shouldPreMountAudioTags: audioTagsContext !== null && audioTagsContext.numberOfAudioTags > 0, ...props, ref: ref, onNativeError: onError, onDuration: onDuration, 
         // Proposal: Make this default to true in v5
         pauseWhenBuffering: pauseWhenBuffering !== null && pauseWhenBuffering !== void 0 ? pauseWhenBuffering : false, _remotionInternalNeedsDurationCalculation: Boolean(loop), showInTimeline: showInTimeline !== null && showInTimeline !== void 0 ? showInTimeline : true }));
 };

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

@@ -0,0 +1,56 @@
+import React from 'react';
+import type { RemotionMainAudioProps } from './props.js';
+/**
+ * @description With this component, you can add audio to your video. All audio formats which are supported by Chromium are supported by the component.
+ * @see [Documentation](https://remotion.dev/docs/html5-audio)
+ */
+export declare const Html5Audio: React.ForwardRefExoticComponent<Omit<import("./props.js").NativeAudioProps & {
+    name?: string;
+    volume?: import("../volume-prop.js").VolumeProp;
+    playbackRate?: number;
+    acceptableTimeShiftInSeconds?: number;
+    allowAmplificationDuringRender?: boolean;
+    _remotionInternalNeedsDurationCalculation?: boolean;
+    _remotionInternalNativeLoopPassed?: boolean;
+    toneFrequency?: number;
+    useWebAudioApi?: boolean;
+    pauseWhenBuffering?: boolean;
+    showInTimeline?: boolean;
+    delayRenderTimeoutInMilliseconds?: number;
+    delayRenderRetries?: number;
+    loopVolumeCurveBehavior?: import("./use-audio-frame.js").LoopVolumeCurveBehavior;
+    onError?: (err: Error) => void;
+    audioStreamIndex?: number;
+} & RemotionMainAudioProps & {
+    /**
+     * @deprecated For internal use only
+     */
+    readonly stack?: string;
+}, "ref"> & React.RefAttributes<HTMLAudioElement>>;
+/**
+ * @deprecated This component has been renamed to `Html5Audio`.
+ * @see [Documentation](https://remotion.dev/docs/mediabunny/new-video)
+ */
+export declare const Audio: React.ForwardRefExoticComponent<Omit<import("./props.js").NativeAudioProps & {
+    name?: string;
+    volume?: import("../volume-prop.js").VolumeProp;
+    playbackRate?: number;
+    acceptableTimeShiftInSeconds?: number;
+    allowAmplificationDuringRender?: boolean;
+    _remotionInternalNeedsDurationCalculation?: boolean;
+    _remotionInternalNativeLoopPassed?: boolean;
+    toneFrequency?: number;
+    useWebAudioApi?: boolean;
+    pauseWhenBuffering?: boolean;
+    showInTimeline?: boolean;
+    delayRenderTimeoutInMilliseconds?: number;
+    delayRenderRetries?: number;
+    loopVolumeCurveBehavior?: import("./use-audio-frame.js").LoopVolumeCurveBehavior;
+    onError?: (err: Error) => void;
+    audioStreamIndex?: number;
+} & RemotionMainAudioProps & {
+    /**
+     * @deprecated For internal use only
+     */
+    readonly stack?: string;
+}, "ref"> & React.RefAttributes<HTMLAudioElement>>;

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

@@ -0,0 +1,101 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Audio = exports.Html5Audio = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/* eslint-disable @typescript-eslint/no-use-before-define */
+const react_1 = require("react");
+const absolute_src_js_1 = require("../absolute-src.js");
+const calculate_media_duration_js_1 = require("../calculate-media-duration.js");
+const cancel_render_js_1 = require("../cancel-render.js");
+const enable_sequence_stack_traces_js_1 = require("../enable-sequence-stack-traces.js");
+const index_js_1 = require("../loop/index.js");
+const prefetch_js_1 = require("../prefetch.js");
+const Sequence_js_1 = require("../Sequence.js");
+const use_remotion_environment_js_1 = require("../use-remotion-environment.js");
+const use_video_config_js_1 = require("../use-video-config.js");
+const validate_media_props_js_1 = require("../validate-media-props.js");
+const validate_start_from_props_js_1 = require("../validate-start-from-props.js");
+const duration_state_js_1 = require("../video/duration-state.js");
+const AudioForPreview_js_1 = require("./AudioForPreview.js");
+const AudioForRendering_js_1 = require("./AudioForRendering.js");
+const shared_audio_tags_js_1 = require("./shared-audio-tags.js");
+const AudioRefForwardingFunction = (props, ref) => {
+    var _a, _b, _c;
+    const audioTagsContext = (0, react_1.useContext)(shared_audio_tags_js_1.SharedAudioTagsContext);
+    const { startFrom, endAt, trimBefore, trimAfter, name, stack, pauseWhenBuffering, showInTimeline, onError: onRemotionError, ...otherProps } = props;
+    const { loop, ...propsOtherThanLoop } = props;
+    const { fps } = (0, use_video_config_js_1.useVideoConfig)();
+    const environment = (0, use_remotion_environment_js_1.useRemotionEnvironment)();
+    if (environment.isClientSideRendering) {
+        throw new Error('<Html5Audio> is not supported in @remotion/web-renderer. Use <Audio> from @remotion/media instead. See https://remotion.dev/docs/client-side-rendering/limitations');
+    }
+    const { durations, setDurations } = (0, react_1.useContext)(duration_state_js_1.DurationsContext);
+    if (typeof props.src !== 'string') {
+        throw new TypeError(`The \`<Html5Audio>\` tag requires a string for \`src\`, but got ${JSON.stringify(props.src)} instead.`);
+    }
+    const preloadedSrc = (0, prefetch_js_1.usePreload)(props.src);
+    const onError = (0, react_1.useCallback)((e) => {
+        // eslint-disable-next-line no-console
+        console.log(e.currentTarget.error);
+        // If there is no `loop` property, we don't need to get the duration
+        // and this does not need to be a fatal error
+        const errMessage = `Could not play audio with src ${preloadedSrc}: ${e.currentTarget.error}. See https://remotion.dev/docs/media-playback-error for help.`;
+        if (loop) {
+            if (onRemotionError) {
+                onRemotionError(new Error(errMessage));
+                return;
+            }
+            (0, cancel_render_js_1.cancelRender)(new Error(errMessage));
+        }
+        else {
+            onRemotionError === null || onRemotionError === void 0 ? void 0 : onRemotionError(new Error(errMessage));
+            // eslint-disable-next-line no-console
+            console.warn(errMessage);
+        }
+    }, [loop, onRemotionError, preloadedSrc]);
+    const onDuration = (0, react_1.useCallback)((src, durationInSeconds) => {
+        setDurations({ type: 'got-duration', durationInSeconds, src });
+    }, [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 });
+    const { trimBeforeValue, trimAfterValue } = (0, validate_start_from_props_js_1.resolveTrimProps)({
+        startFrom,
+        endAt,
+        trimBefore,
+        trimAfter,
+    });
+    if (loop && durationFetched !== undefined) {
+        if (!Number.isFinite(durationFetched)) {
+            return ((0, jsx_runtime_1.jsx)(exports.Html5Audio, { ...propsOtherThanLoop, ref: ref, _remotionInternalNativeLoopPassed: true }));
+        }
+        const duration = durationFetched * fps;
+        return ((0, jsx_runtime_1.jsx)(index_js_1.Loop, { layout: "none", durationInFrames: (0, calculate_media_duration_js_1.calculateMediaDuration)({
+                trimAfter: trimAfterValue,
+                mediaDurationInFrames: duration,
+                playbackRate: (_b = props.playbackRate) !== null && _b !== void 0 ? _b : 1,
+                trimBefore: trimBeforeValue,
+            }), children: (0, jsx_runtime_1.jsx)(exports.Html5Audio, { ...propsOtherThanLoop, ref: ref, _remotionInternalNativeLoopPassed: true }) }));
+    }
+    if (typeof trimBeforeValue !== 'undefined' ||
+        typeof trimAfterValue !== 'undefined') {
+        return ((0, jsx_runtime_1.jsx)(Sequence_js_1.Sequence, { layout: "none", from: 0 - (trimBeforeValue !== null && trimBeforeValue !== void 0 ? trimBeforeValue : 0), showInTimeline: false, durationInFrames: trimAfterValue, name: name, children: (0, jsx_runtime_1.jsx)(exports.Html5Audio, { _remotionInternalNeedsDurationCalculation: Boolean(loop), pauseWhenBuffering: pauseWhenBuffering !== null && pauseWhenBuffering !== void 0 ? pauseWhenBuffering : false, ...otherProps, ref: ref }) }));
+    }
+    (0, validate_media_props_js_1.validateMediaProps)({ playbackRate: props.playbackRate, volume: props.volume }, 'Html5Audio');
+    if (environment.isRendering) {
+        return ((0, jsx_runtime_1.jsx)(AudioForRendering_js_1.AudioForRendering, { onDuration: onDuration, ...props, ref: ref, onNativeError: onError, _remotionInternalNeedsDurationCalculation: Boolean(loop) }));
+    }
+    return ((0, jsx_runtime_1.jsx)(AudioForPreview_js_1.AudioForPreview, { _remotionInternalNativeLoopPassed: (_c = props._remotionInternalNativeLoopPassed) !== null && _c !== void 0 ? _c : false, _remotionInternalStack: stack !== null && stack !== void 0 ? stack : null, shouldPreMountAudioTags: audioTagsContext !== null && audioTagsContext.numberOfAudioTags > 0, ...props, ref: ref, onNativeError: onError, onDuration: onDuration, 
+        // Proposal: Make this default to true in v5
+        pauseWhenBuffering: pauseWhenBuffering !== null && pauseWhenBuffering !== void 0 ? pauseWhenBuffering : false, _remotionInternalNeedsDurationCalculation: Boolean(loop), showInTimeline: showInTimeline !== null && showInTimeline !== void 0 ? showInTimeline : true }));
+};
+/**
+ * @description With this component, you can add audio to your video. All audio formats which are supported by Chromium are supported by the component.
+ * @see [Documentation](https://remotion.dev/docs/html5-audio)
+ */
+exports.Html5Audio = (0, react_1.forwardRef)(AudioRefForwardingFunction);
+(0, enable_sequence_stack_traces_js_1.addSequenceStackTraces)(exports.Html5Audio);
+/**
+ * @deprecated This component has been renamed to `Html5Audio`.
+ * @see [Documentation](https://remotion.dev/docs/mediabunny/new-video)
+ */
+exports.Audio = exports.Html5Audio;

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

@@ -1,2 +1,2 @@
-export { Audio, Html5Audio } from './Audio.js';
+export { Audio, Html5Audio } from './html5-audio.js';
 export * from './props.js';

package/dist/cjs/audio/index.js

@@ -15,7 +15,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Html5Audio = exports.Audio = void 0;
-var Audio_js_1 = require("./Audio.js");
-Object.defineProperty(exports, "Audio", { enumerable: true, get: function () { return Audio_js_1.Audio; } });
-Object.defineProperty(exports, "Html5Audio", { enumerable: true, get: function () { return Audio_js_1.Html5Audio; } });
+var html5_audio_js_1 = require("./html5-audio.js");
+Object.defineProperty(exports, "Audio", { enumerable: true, get: function () { return html5_audio_js_1.Audio; } });
+Object.defineProperty(exports, "Html5Audio", { enumerable: true, get: function () { return html5_audio_js_1.Html5Audio; } });
 __exportStar(require("./props.js"), exports);

package/dist/cjs/get-timeline-duration.d.ts

@@ -1,7 +1,8 @@
-export declare const getTimelineDuration: ({ compositionDurationInFrames, playbackRate, trimBefore, trimAfter, parentSequenceDurationInFrames, }: {
+export declare const getTimelineDuration: ({ compositionDurationInFrames, playbackRate, trimBefore, trimAfter, parentSequenceDurationInFrames, loop, }: {
     compositionDurationInFrames: number;
     playbackRate: number;
     trimBefore: number | undefined;
     trimAfter: number | undefined;
     parentSequenceDurationInFrames: number | null;
+    loop: boolean;
 }) => number;

package/dist/cjs/get-timeline-duration.js

@@ -2,7 +2,10 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getTimelineDuration = void 0;
 const calculate_media_duration_js_1 = require("./calculate-media-duration.js");
-const getTimelineDuration = ({ compositionDurationInFrames, playbackRate, trimBefore, trimAfter, parentSequenceDurationInFrames, }) => {
+const getTimelineDuration = ({ compositionDurationInFrames, playbackRate, trimBefore, trimAfter, parentSequenceDurationInFrames, loop, }) => {
+    if (loop) {
+        return compositionDurationInFrames;
+    }
     const mediaDuration = (0, calculate_media_duration_js_1.calculateMediaDuration)({
         mediaDurationInFrames: compositionDurationInFrames * playbackRate + (trimBefore !== null && trimBefore !== void 0 ? trimBefore : 0),
         playbackRate,

package/dist/cjs/internals.d.ts

@@ -87,7 +87,7 @@ export declare const Internals: {
         values: T;
     };
     readonly wrapInSchema: <S extends SequenceSchema, Props extends object>(Component: React.ComponentType<Props & {
-        readonly controls: import("./CompositionManager.js").SequenceControls | undefined;
+        readonly _experimentalControls: import("./CompositionManager.js").SequenceControls | undefined;
     }>, schema: S) => React.ComponentType<Props>;
     readonly useSequenceControlOverride: (key: string) => unknown | undefined;
     readonly RemotionRootContexts: import("react").FC<{
@@ -401,7 +401,7 @@ export declare const Internals: {
     }, "ref"> & import("react").RefAttributes<HTMLAudioElement>>;
     readonly OBJECTFIT_CONTAIN_CLASS_NAME: "__remotion_objectfitcontain";
     readonly InnerOffthreadVideo: import("react").FC<import("./video/props.js").AllOffthreadVideoProps>;
-    readonly useBasicMediaInTimeline: ({ volume, mediaVolume, mediaType, src, displayName, trimBefore, trimAfter, playbackRate, }: {
+    readonly useBasicMediaInTimeline: ({ volume, mediaVolume, mediaType, src, displayName, trimBefore, trimAfter, playbackRate, sequenceDurationInFrames, mediaStartsAt, loop, }: {
         volume: import("./volume-prop.js").VolumeProp | undefined;
         mediaVolume: number;
         mediaType: "audio" | "video" | "image";
@@ -410,14 +410,19 @@ export declare const Internals: {
         trimBefore: number | undefined;
         trimAfter: number | undefined;
         playbackRate: number;
+        sequenceDurationInFrames: number;
+        mediaStartsAt: number;
+        loop: boolean;
     }) => {
         volumes: string | number;
         duration: number;
         doesVolumeChange: boolean;
         nonce: import("./nonce.js").NonceHistoryContext;
         rootId: string;
-        isStudio: boolean;
         finalDisplayName: string;
+        startMediaFrom: number;
+        src: string;
+        playbackRate: number;
     };
     readonly getInputPropsOverride: () => Record<string, unknown> | null;
     readonly setInputPropsOverride: (override: Record<string, unknown> | null) => void;

package/dist/cjs/loop/index.d.ts

@@ -1,11 +1,11 @@
 import React from 'react';
-import type { LayoutAndStyle } from '../Sequence.js';
+import type { LayoutAndStyle, SequenceProps } from '../Sequence.js';
 export type LoopProps = {
     readonly durationInFrames: number;
     readonly times?: number;
     readonly name?: string;
     readonly children: React.ReactNode;
-} & LayoutAndStyle;
+} & LayoutAndStyle & Pick<SequenceProps, 'showInTimeline'>;
 type LoopContextType = {
     iteration: number;
     durationInFrames: number;

package/dist/cjs/loop/index.js

@@ -48,7 +48,7 @@ const useLoop = () => {
  * @description This component allows you to quickly lay out an animation so it repeats itself.
  * @see [Documentation](https://remotion.dev/docs/loop)
  */
-const Loop = ({ durationInFrames, times = Infinity, children, name, ...props }) => {
+const Loop = ({ durationInFrames, times = Infinity, children, name, showInTimeline, ...props }) => {
     const currentFrame = (0, use_current_frame_js_1.useCurrentFrame)();
     const { durationInFrames: compDuration } = (0, use_video_config_js_1.useVideoConfig)();
     (0, validate_duration_in_frames_js_1.validateDurationInFrames)(durationInFrames, {
@@ -84,7 +84,7 @@ const Loop = ({ durationInFrames, times = Infinity, children, name, ...props })
             durationInFrames,
         };
     }, [currentFrame, durationInFrames]);
-    return ((0, jsx_runtime_1.jsx)(LoopContext.Provider, { value: loopContext, children: (0, jsx_runtime_1.jsx)(Sequence_js_1.Sequence, { durationInFrames: durationInFrames, from: from, name: name !== null && name !== void 0 ? name : '<Loop>', _remotionInternalLoopDisplay: loopDisplay, layout: props.layout, style: style, children: children }) }));
+    return ((0, jsx_runtime_1.jsx)(LoopContext.Provider, { value: loopContext, children: (0, jsx_runtime_1.jsx)(Sequence_js_1.Sequence, { durationInFrames: durationInFrames, from: from, name: name !== null && name !== void 0 ? name : '<Loop>', _remotionInternalLoopDisplay: loopDisplay, layout: props.layout, style: style, showInTimeline: showInTimeline, children: children }) }));
 };
 exports.Loop = Loop;
 exports.Loop.useLoop = useLoop;

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

@@ -1,6 +1,6 @@
 import type { LoopDisplay, SequenceControls } from './CompositionManager.js';
 import type { VolumeProp } from './volume-prop.js';
-export declare const useBasicMediaInTimeline: ({ volume, mediaVolume, mediaType, src, displayName, trimBefore, trimAfter, playbackRate, }: {
+export declare const useBasicMediaInTimeline: ({ volume, mediaVolume, mediaType, src, displayName, trimBefore, trimAfter, playbackRate, sequenceDurationInFrames, mediaStartsAt, loop, }: {
     volume: VolumeProp | undefined;
     mediaVolume: number;
     mediaType: "audio" | "video" | "image";
@@ -9,15 +9,21 @@ export declare const useBasicMediaInTimeline: ({ volume, mediaVolume, mediaType,
     trimBefore: number | undefined;
     trimAfter: number | undefined;
     playbackRate: number;
+    sequenceDurationInFrames: number;
+    mediaStartsAt: number;
+    loop: boolean;
 }) => {
     volumes: string | number;
     duration: number;
     doesVolumeChange: boolean;
     nonce: import("./nonce.js").NonceHistoryContext;
     rootId: string;
-    isStudio: boolean;
     finalDisplayName: string;
+    startMediaFrom: number;
+    src: string;
+    playbackRate: number;
 };
+export type BasicMediaInTimelineReturnType = ReturnType<typeof useBasicMediaInTimeline>;
 export declare const useImageInTimeline: ({ src, displayName, id, stack, showInTimeline, premountDisplay, postmountDisplay, loopDisplay, controls, }: {
     src: string | undefined;
     displayName: string | null;