remotion 4.0.357 → 4.0.360

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

@@ -1,5 +1,36 @@
 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;

package/dist/cjs/audio/Audio.js

@@ -1,12 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Audio = void 0;
+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 Sequence_js_1 = require("../Sequence.js");
 const absolute_src_js_1 = require("../absolute-src.js");
-const calculate_loop_js_1 = require("../calculate-loop.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");
@@ -28,7 +28,7 @@ const AudioRefForwardingFunction = (props, ref) => {
     const environment = (0, use_remotion_environment_js_1.useRemotionEnvironment)();
     const { durations, setDurations } = (0, react_1.useContext)(duration_state_js_1.DurationsContext);
     if (typeof props.src !== 'string') {
-        throw new TypeError(`The \`<Audio>\` tag requires a string for \`src\`, but got ${JSON.stringify(props.src)} instead.`);
+        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) => {
@@ -63,21 +63,21 @@ const AudioRefForwardingFunction = (props, ref) => {
     });
     if (loop && durationFetched !== undefined) {
         if (!Number.isFinite(durationFetched)) {
-            return ((0, jsx_runtime_1.jsx)(exports.Audio, { ...propsOtherThanLoop, ref: ref, _remotionInternalNativeLoopPassed: true }));
+            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_loop_js_1.calculateLoopDuration)({
+        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.Audio, { ...propsOtherThanLoop, ref: ref, _remotionInternalNativeLoopPassed: true }) }));
+            }), 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.Audio, { _remotionInternalNeedsDurationCalculation: Boolean(loop), pauseWhenBuffering: pauseWhenBuffering !== null && pauseWhenBuffering !== void 0 ? pauseWhenBuffering : false, ...otherProps, ref: ref }) }));
+        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 }, 'Audio');
+    (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) }));
     }
@@ -85,9 +85,14 @@ const AudioRefForwardingFunction = (props, ref) => {
         // 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/audio)
+ * @see [Documentation](https://remotion.dev/docs/html5-audio)
  */
-exports.Audio = (0, react_1.forwardRef)(AudioRefForwardingFunction);
-(0, enable_sequence_stack_traces_js_1.addSequenceStackTraces)(exports.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/AudioForPreview.js

@@ -37,7 +37,7 @@ const AudioForDevelopmentForwardRefFunction = (props, ref) => {
     const volumePropFrame = (0, use_audio_frame_js_1.useFrameForVolumeProp)(loopVolumeCurveBehavior !== null && loopVolumeCurveBehavior !== void 0 ? loopVolumeCurveBehavior : 'repeat');
     const { hidden } = (0, react_1.useContext)(SequenceManager_js_1.SequenceVisibilityToggleContext);
     if (!src) {
-        throw new TypeError("No 'src' was passed to <Audio>.");
+        throw new TypeError("No 'src' was passed to <Html5Audio>.");
     }
     const preloadedSrc = (0, prefetch_js_1.usePreload)(src);
     const sequenceContext = (0, react_1.useContext)(SequenceContext_js_1.SequenceContext);
@@ -102,6 +102,7 @@ const AudioForDevelopmentForwardRefFunction = (props, ref) => {
         showInTimeline,
         premountDisplay: (_b = sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.premountDisplay) !== null && _b !== void 0 ? _b : null,
         postmountDisplay: (_c = sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.postmountDisplay) !== null && _c !== void 0 ? _c : null,
+        loopDisplay: undefined,
     });
     // putting playback before useVolume
     // because volume looks at playbackrate

package/dist/cjs/audio/AudioForRendering.js

@@ -98,7 +98,7 @@ const AudioForRenderingRefForwardingFunction = (props, ref) => {
         if (!needsToRenderAudioTag) {
             return;
         }
-        const newHandle = delayRender('Loading <Audio> duration with src=' + src, {
+        const newHandle = delayRender('Loading <Html5Audio> duration with src=' + src, {
             retries: delayRenderRetries !== null && delayRenderRetries !== void 0 ? delayRenderRetries : undefined,
             timeoutInMilliseconds: delayRenderTimeoutInMilliseconds !== null && delayRenderTimeoutInMilliseconds !== void 0 ? delayRenderTimeoutInMilliseconds : undefined,
         });

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

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

package/dist/cjs/audio/index.js

@@ -14,5 +14,8 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./Audio.js"), exports);
+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; } });
 __exportStar(require("./props.js"), exports);

package/dist/cjs/audio/shared-audio-tags.d.ts

@@ -5,7 +5,7 @@ import type { SharedElementSourceNode } from './shared-element-source-node.js';
  * This functionality of Remotion will keep a certain amount
  * of <audio> tags pre-mounted and by default filled with an empty audio track.
  * If the user interacts, the empty audio will be played.
- * If one of Remotions <Audio /> tags get mounted, the audio will not be rendered at this location, but into one of the prerendered audio tags.
+ * If one of Remotions <Html5Audio /> tags get mounted, the audio will not be rendered at this location, but into one of the prerendered audio tags.
  *
  * This helps with autoplay issues on iOS Safari and soon other browsers,
  * which only allow audio playback upon user interaction.

package/dist/cjs/audio/shared-audio-tags.js

@@ -133,7 +133,7 @@ const SharedAudioContextProvider = ({ children, numberOfAudioTags, component, au
         }
         const firstFreeAudio = takenAudios.current.findIndex((a) => a === false);
         if (firstFreeAudio === -1) {
-            throw new Error(`Tried to simultaneously mount ${numberOfAudioTags + 1} <Audio /> tags at the same time. With the current settings, the maximum amount of <Audio /> tags is limited to ${numberOfAudioTags} at the same time. Remotion pre-mounts silent audio tags to help avoid browser autoplay restrictions. See https://remotion.dev/docs/player/autoplay#using-the-numberofsharedaudiotags-prop for more information on how to increase this limit.`);
+            throw new Error(`Tried to simultaneously mount ${numberOfAudioTags + 1} <Html5Audio /> tags at the same time. With the current settings, the maximum amount of <Html5Audio /> tags is limited to ${numberOfAudioTags} at the same time. Remotion pre-mounts silent audio tags to help avoid browser autoplay restrictions. See https://remotion.dev/docs/player/autoplay#using-the-numberofsharedaudiotags-prop for more information on how to increase this limit.`);
         }
         const { id, ref, mediaElementSourceNode } = refs[firstFreeAudio];
         const cloned = [...takenAudios.current];

package/dist/cjs/{calculate-loop.d.ts → calculate-media-duration.d.ts}

@@ -1,4 +1,4 @@
-export declare const calculateLoopDuration: ({ trimAfter, mediaDurationInFrames, playbackRate, trimBefore, }: {
+export declare const calculateMediaDuration: ({ trimAfter, mediaDurationInFrames, playbackRate, trimBefore, }: {
     mediaDurationInFrames: number;
     playbackRate: number;
     trimBefore: number | undefined;

package/dist/cjs/{calculate-loop.js → calculate-media-duration.js}

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.calculateLoopDuration = void 0;
-const calculateLoopDuration = ({ trimAfter, mediaDurationInFrames, playbackRate, trimBefore, }) => {
+exports.calculateMediaDuration = void 0;
+const calculateMediaDuration = ({ trimAfter, mediaDurationInFrames, playbackRate, trimBefore, }) => {
     let duration = mediaDurationInFrames;
     // Account for trimAfter
     if (typeof trimAfter !== 'undefined') {
@@ -14,4 +14,4 @@ const calculateLoopDuration = ({ trimAfter, mediaDurationInFrames, playbackRate,
     const actualDuration = duration / playbackRate;
     return Math.floor(actualDuration);
 };
-exports.calculateLoopDuration = calculateLoopDuration;
+exports.calculateMediaDuration = calculateMediaDuration;

package/dist/cjs/get-static-files.d.ts

@@ -1,7 +1,7 @@
 export declare const getStaticFiles: () => StaticFile[];
 export type StaticFile = {
     /**
-     * A string that you can pass to the `src` attribute of an `<Audio>`, `<Img>` and `<Video>` element.
+     * A string that you can pass to the `src` attribute of an `<Audio>`, `<Img>`, `<Video>`, `<Html5Audio>`, `<Html5Video>` or `<OffthreadVideo>` element.
      */
     src: string;
     /**

package/dist/cjs/index.d.ts

@@ -1,7 +1,7 @@
 import './_check-rsc.js';
 import './asset-types.js';
 import type { Codec } from './codec.js';
-import type { AnyCompMetadata, AnyComposition, AudioOrVideoAsset, TRenderAsset } from './CompositionManager.js';
+import type { AnyCompMetadata, AnyComposition, AudioOrVideoAsset, LoopDisplay, TRenderAsset } from './CompositionManager.js';
 import type { StaticFile } from './get-static-files.js';
 import type { LogLevel } from './log.js';
 import type { PixelFormat, VideoImageFormat } from './render-types.js';
@@ -86,7 +86,7 @@ export type BundleState = BundleIndexState | BundleEvaluationState | BundleCompo
 export * from './AbsoluteFill.js';
 export * from './animated-image/index.js';
 export { Artifact } from './Artifact.js';
-export * from './audio/index.js';
+export { Audio, Html5Audio, RemotionAudioProps } from './audio/index.js';
 export type { LoopVolumeCurveBehavior } from './audio/use-audio-frame.js';
 export { cancelRender } from './cancel-render.js';
 export { CalculateMetadataFunction, Composition, CompositionProps, CompProps, StillProps, } from './Composition.js';
@@ -123,7 +123,7 @@ export { useRemotionEnvironment } from './use-remotion-environment.js';
 export * from './use-video-config.js';
 export * from './version.js';
 export * from './video-config.js';
-export * from './video/index.js';
+export { Html5Video, OffthreadVideo, OffthreadVideoProps, RemotionMainVideoProps, RemotionOffthreadVideoProps, RemotionVideoProps, Video, } from './video/index.js';
 export type { OnVideoFrame } from './video/props.js';
 export type { VolumeProp } from './volume-prop.js';
 export { watchStaticFile } from './watch-static-file.js';
@@ -149,4 +149,5 @@ export type _InternalTypes = {
     AnyCompMetadata: AnyCompMetadata;
     AudioOrVideoAsset: AudioOrVideoAsset;
     TRenderAsset: TRenderAsset;
+    LoopDisplay: LoopDisplay;
 };

package/dist/cjs/index.js

@@ -14,7 +14,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Config = exports.Experimental = exports.watchStaticFile = exports.useRemotionEnvironment = exports.useDelayRender = exports.useCurrentScale = exports.useCurrentFrame = exports.useBufferState = exports.staticFile = exports.Series = exports.Sequence = exports.registerRoot = exports.prefetch = exports.random = exports.interpolate = exports.Loop = exports.interpolateColors = exports.Img = exports.getStaticFiles = exports.getRemotionEnvironment = exports.delayRender = exports.continueRender = exports.getInputProps = exports.Composition = exports.cancelRender = exports.Artifact = void 0;
+exports.Config = exports.Experimental = exports.watchStaticFile = exports.Video = exports.OffthreadVideo = exports.Html5Video = exports.useRemotionEnvironment = exports.useDelayRender = exports.useCurrentScale = exports.useCurrentFrame = exports.useBufferState = exports.staticFile = exports.Series = exports.Sequence = exports.registerRoot = exports.prefetch = exports.random = exports.interpolate = exports.Loop = exports.interpolateColors = exports.Img = exports.getStaticFiles = exports.getRemotionEnvironment = exports.delayRender = exports.continueRender = exports.getInputProps = exports.Composition = exports.cancelRender = exports.Html5Audio = exports.Audio = exports.Artifact = void 0;
 require("./_check-rsc.js");
 require("./asset-types.js");
 const Clipper_js_1 = require("./Clipper.js");
@@ -28,7 +28,9 @@ __exportStar(require("./AbsoluteFill.js"), exports);
 __exportStar(require("./animated-image/index.js"), exports);
 var Artifact_js_1 = require("./Artifact.js");
 Object.defineProperty(exports, "Artifact", { enumerable: true, get: function () { return Artifact_js_1.Artifact; } });
-__exportStar(require("./audio/index.js"), exports);
+var index_js_1 = require("./audio/index.js");
+Object.defineProperty(exports, "Audio", { enumerable: true, get: function () { return index_js_1.Audio; } });
+Object.defineProperty(exports, "Html5Audio", { enumerable: true, get: function () { return index_js_1.Html5Audio; } });
 var cancel_render_js_1 = require("./cancel-render.js");
 Object.defineProperty(exports, "cancelRender", { enumerable: true, get: function () { return cancel_render_js_1.cancelRender; } });
 var Composition_js_1 = require("./Composition.js");
@@ -51,8 +53,8 @@ Object.defineProperty(exports, "Img", { enumerable: true, get: function () { ret
 __exportStar(require("./internals.js"), exports);
 var interpolate_colors_js_1 = require("./interpolate-colors.js");
 Object.defineProperty(exports, "interpolateColors", { enumerable: true, get: function () { return interpolate_colors_js_1.interpolateColors; } });
-var index_js_1 = require("./loop/index.js");
-Object.defineProperty(exports, "Loop", { enumerable: true, get: function () { return index_js_1.Loop; } });
+var index_js_2 = require("./loop/index.js");
+Object.defineProperty(exports, "Loop", { enumerable: true, get: function () { return index_js_2.Loop; } });
 var no_react_1 = require("./no-react");
 Object.defineProperty(exports, "interpolate", { enumerable: true, get: function () { return no_react_1.interpolate; } });
 Object.defineProperty(exports, "random", { enumerable: true, get: function () { return no_react_1.random; } });
@@ -62,8 +64,8 @@ var register_root_js_1 = require("./register-root.js");
 Object.defineProperty(exports, "registerRoot", { enumerable: true, get: function () { return register_root_js_1.registerRoot; } });
 var Sequence_js_2 = require("./Sequence.js");
 Object.defineProperty(exports, "Sequence", { enumerable: true, get: function () { return Sequence_js_2.Sequence; } });
-var index_js_2 = require("./series/index.js");
-Object.defineProperty(exports, "Series", { enumerable: true, get: function () { return index_js_2.Series; } });
+var index_js_3 = require("./series/index.js");
+Object.defineProperty(exports, "Series", { enumerable: true, get: function () { return index_js_3.Series; } });
 __exportStar(require("./spring/index.js"), exports);
 var static_file_js_1 = require("./static-file.js");
 Object.defineProperty(exports, "staticFile", { enumerable: true, get: function () { return static_file_js_1.staticFile; } });
@@ -81,7 +83,10 @@ Object.defineProperty(exports, "useRemotionEnvironment", { enumerable: true, get
 __exportStar(require("./use-video-config.js"), exports);
 __exportStar(require("./version.js"), exports);
 __exportStar(require("./video-config.js"), exports);
-__exportStar(require("./video/index.js"), exports);
+var index_js_4 = require("./video/index.js");
+Object.defineProperty(exports, "Html5Video", { enumerable: true, get: function () { return index_js_4.Html5Video; } });
+Object.defineProperty(exports, "OffthreadVideo", { enumerable: true, get: function () { return index_js_4.OffthreadVideo; } });
+Object.defineProperty(exports, "Video", { enumerable: true, get: function () { return index_js_4.Video; } });
 var watch_static_file_js_1 = require("./watch-static-file.js");
 Object.defineProperty(exports, "watchStaticFile", { enumerable: true, get: function () { return watch_static_file_js_1.watchStaticFile; } });
 exports.Experimental = {

package/dist/cjs/internals.d.ts

@@ -31,7 +31,7 @@ export declare const Internals: {
     readonly validateMediaProps: (props: {
         volume: import("./volume-prop.js").VolumeProp | undefined;
         playbackRate: number | undefined;
-    }, component: "Video" | "Audio") => void;
+    }, component: "Html5Video" | "Html5Audio" | "Audio" | "Video") => void;
     readonly resolveTrimProps: ({ startFrom, endAt, trimBefore, trimAfter, }: {
         startFrom: number | undefined;
         endAt: number | undefined;
@@ -85,7 +85,7 @@ export declare const Internals: {
     readonly getRoot: () => import("react").FC<{}> | null;
     readonly useMediaVolumeState: () => readonly [number, (u: number) => void];
     readonly useMediaMutedState: () => readonly [boolean, (u: React.SetStateAction<boolean>) => void];
-    readonly useMediaInTimeline: ({ volume, mediaVolume, src, mediaType, playbackRate, displayName, id, stack, showInTimeline, premountDisplay, postmountDisplay, }: {
+    readonly useMediaInTimeline: ({ volume, mediaVolume, src, mediaType, playbackRate, displayName, id, stack, showInTimeline, premountDisplay, postmountDisplay, loopDisplay, }: {
         volume: import("./volume-prop.js").VolumeProp | undefined;
         mediaVolume: number;
         src: string | undefined;
@@ -97,6 +97,7 @@ export declare const Internals: {
         showInTimeline: boolean;
         premountDisplay: number | null;
         postmountDisplay: number | null;
+        loopDisplay: import("./CompositionManager.js").LoopDisplay | undefined;
     }) => void;
     readonly useLazyComponent: <Props>({ compProps, componentName, noSuspense, }: {
         compProps: CompProps<Props>;
@@ -145,7 +146,7 @@ export declare const Internals: {
         readonly audioLatencyHint: AudioContextLatencyCategory;
     }>;
     readonly invalidCompositionErrorMessage: string;
-    readonly calculateLoopDuration: ({ trimAfter, mediaDurationInFrames, playbackRate, trimBefore, }: {
+    readonly calculateMediaDuration: ({ trimAfter, mediaDurationInFrames, playbackRate, trimBefore, }: {
         mediaDurationInFrames: number;
         playbackRate: number;
         trimBefore: number | undefined;
@@ -302,7 +303,7 @@ export declare const Internals: {
     } | null>;
     readonly RemotionEnvironmentContext: import("react").Context<RemotionEnvironment | null>;
     readonly warnAboutTooHighVolume: (volume: number) => void;
-    readonly AudioForPreview: import("react").ForwardRefExoticComponent<Omit<import("./index.js").NativeAudioProps & {
+    readonly AudioForPreview: import("react").ForwardRefExoticComponent<Omit<import("./audio/props.js").NativeAudioProps & {
         name?: string;
         volume?: import("./volume-prop.js").VolumeProp;
         playbackRate?: number;
@@ -331,5 +332,23 @@ 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, }: {
+        volume: import("./volume-prop.js").VolumeProp | undefined;
+        mediaVolume: number;
+        mediaType: "audio" | "video";
+        src: string | undefined;
+        displayName: string | null;
+        trimBefore: number | undefined;
+        trimAfter: number | undefined;
+        playbackRate: number;
+    }) => {
+        volumes: string | number;
+        duration: number;
+        doesVolumeChange: boolean;
+        nonce: number;
+        rootId: string;
+        isStudio: boolean;
+        finalDisplayName: string;
+    };
 };
 export type { CompositionManagerContext, CompProps, LoggingContextValue, MediaVolumeContextValue, RemotionEnvironment, SerializedJSONWithCustomFields, SetMediaVolumeContextValue, SetTimelineContextValue, TCompMetadata, TComposition, TimelineContextValue, TRenderAsset, TSequence, WatchRemotionStaticFilesPayload, };

package/dist/cjs/internals.js

@@ -40,7 +40,7 @@ const AudioForPreview_js_1 = require("./audio/AudioForPreview.js");
 const shared_audio_tags_js_1 = require("./audio/shared-audio-tags.js");
 const use_audio_frame_js_1 = require("./audio/use-audio-frame.js");
 const buffering_js_1 = require("./buffering.js");
-const calculate_loop_js_1 = require("./calculate-loop.js");
+const calculate_media_duration_js_1 = require("./calculate-media-duration.js");
 const CanUseRemotionHooks_js_1 = require("./CanUseRemotionHooks.js");
 const CompositionManager_js_1 = require("./CompositionManager.js");
 const CompositionManagerContext_js_1 = require("./CompositionManagerContext.js");
@@ -126,7 +126,7 @@ exports.Internals = {
     SharedAudioContext: shared_audio_tags_js_1.SharedAudioContext,
     SharedAudioContextProvider: shared_audio_tags_js_1.SharedAudioContextProvider,
     invalidCompositionErrorMessage: validate_composition_id_js_1.invalidCompositionErrorMessage,
-    calculateLoopDuration: calculate_loop_js_1.calculateLoopDuration,
+    calculateMediaDuration: calculate_media_duration_js_1.calculateMediaDuration,
     isCompositionIdValid: validate_composition_id_js_1.isCompositionIdValid,
     getPreviewDomElement: get_preview_dom_element_js_1.getPreviewDomElement,
     compositionsRef: CompositionManager_js_1.compositionsRef,
@@ -175,4 +175,5 @@ exports.Internals = {
     AudioForPreview: AudioForPreview_js_1.AudioForPreview,
     OBJECTFIT_CONTAIN_CLASS_NAME: default_css_js_1.OBJECTFIT_CONTAIN_CLASS_NAME,
     InnerOffthreadVideo: OffthreadVideo_js_1.InnerOffthreadVideo,
+    useBasicMediaInTimeline: use_media_in_timeline_js_1.useBasicMediaInTimeline,
 };

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

@@ -1,5 +1,24 @@
+import type { LoopDisplay } from './CompositionManager.js';
 import type { VolumeProp } from './volume-prop.js';
-export declare const useMediaInTimeline: ({ volume, mediaVolume, src, mediaType, playbackRate, displayName, id, stack, showInTimeline, premountDisplay, postmountDisplay, }: {
+export declare const useBasicMediaInTimeline: ({ volume, mediaVolume, mediaType, src, displayName, trimBefore, trimAfter, playbackRate, }: {
+    volume: VolumeProp | undefined;
+    mediaVolume: number;
+    mediaType: "audio" | "video";
+    src: string | undefined;
+    displayName: string | null;
+    trimBefore: number | undefined;
+    trimAfter: number | undefined;
+    playbackRate: number;
+}) => {
+    volumes: string | number;
+    duration: number;
+    doesVolumeChange: boolean;
+    nonce: number;
+    rootId: string;
+    isStudio: boolean;
+    finalDisplayName: string;
+};
+export declare const useMediaInTimeline: ({ volume, mediaVolume, src, mediaType, playbackRate, displayName, id, stack, showInTimeline, premountDisplay, postmountDisplay, loopDisplay, }: {
     volume: VolumeProp | undefined;
     mediaVolume: number;
     src: string | undefined;
@@ -11,4 +30,5 @@ export declare const useMediaInTimeline: ({ volume, mediaVolume, src, mediaType,
     showInTimeline: boolean;
     premountDisplay: number | null;
     postmountDisplay: number | null;
+    loopDisplay: LoopDisplay | undefined;
 }) => void;

package/dist/cjs/use-media-in-timeline.js

@@ -1,10 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useMediaInTimeline = void 0;
+exports.useMediaInTimeline = exports.useBasicMediaInTimeline = void 0;
 const react_1 = require("react");
 const SequenceContext_js_1 = require("./SequenceContext.js");
 const SequenceManager_js_1 = require("./SequenceManager.js");
 const use_audio_frame_js_1 = require("./audio/use-audio-frame.js");
+const calculate_media_duration_js_1 = require("./calculate-media-duration.js");
 const get_asset_file_name_js_1 = require("./get-asset-file-name.js");
 const nonce_js_1 = require("./nonce.js");
 const timeline_position_state_js_1 = require("./timeline-position-state.js");
@@ -20,21 +21,23 @@ const warnOnce = (message) => {
     console.warn(message);
     didWarn[message] = true;
 };
-const useMediaInTimeline = ({ volume, mediaVolume, src, mediaType, playbackRate, displayName, id, stack, showInTimeline, premountDisplay, postmountDisplay, }) => {
-    const videoConfig = (0, use_video_config_js_1.useVideoConfig)();
-    const parentSequence = (0, react_1.useContext)(SequenceContext_js_1.SequenceContext);
-    const actualFrom = parentSequence
-        ? parentSequence.relativeFrom + parentSequence.cumulatedFrom
-        : 0;
+const useBasicMediaInTimeline = ({ volume, mediaVolume, mediaType, src, displayName, trimBefore, trimAfter, playbackRate, }) => {
+    if (!src) {
+        throw new Error('No src passed');
+    }
     const startsAt = (0, use_audio_frame_js_1.useMediaStartsAt)();
-    const { registerSequence, unregisterSequence } = (0, react_1.useContext)(SequenceManager_js_1.SequenceManager);
+    const parentSequence = (0, react_1.useContext)(SequenceContext_js_1.SequenceContext);
+    const videoConfig = (0, use_video_config_js_1.useVideoConfig)();
     const [initialVolume] = (0, react_1.useState)(() => volume);
-    const nonce = (0, nonce_js_1.useNonce)();
-    const { rootId } = (0, react_1.useContext)(timeline_position_state_js_1.TimelineContext);
+    const mediaDuration = (0, calculate_media_duration_js_1.calculateMediaDuration)({
+        mediaDurationInFrames: videoConfig.durationInFrames,
+        playbackRate,
+        trimBefore,
+        trimAfter,
+    });
     const duration = parentSequence
-        ? Math.min(parentSequence.durationInFrames, videoConfig.durationInFrames)
-        : videoConfig.durationInFrames;
-    const doesVolumeChange = typeof volume === 'function';
+        ? Math.min(parentSequence.durationInFrames, mediaDuration)
+        : mediaDuration;
     const volumes = (0, react_1.useMemo)(() => {
         if (typeof volume === 'number') {
             return volume;
@@ -55,13 +58,41 @@ const useMediaInTimeline = ({ volume, mediaVolume, src, mediaType, playbackRate,
             warnOnce(`Remotion: The ${mediaType} with src ${src} has changed it's volume. Prefer the callback syntax for setting volume to get better timeline display: https://www.remotion.dev/docs/audio/volume`);
         }
     }, [initialVolume, mediaType, src, volume]);
+    const doesVolumeChange = typeof volume === 'function';
+    const nonce = (0, nonce_js_1.useNonce)();
+    const { rootId } = (0, react_1.useContext)(timeline_position_state_js_1.TimelineContext);
     const env = (0, use_remotion_environment_js_1.useRemotionEnvironment)();
+    return {
+        volumes,
+        duration,
+        doesVolumeChange,
+        nonce,
+        rootId,
+        isStudio: env.isStudio,
+        finalDisplayName: displayName !== null && displayName !== void 0 ? displayName : (0, get_asset_file_name_js_1.getAssetDisplayName)(src),
+    };
+};
+exports.useBasicMediaInTimeline = useBasicMediaInTimeline;
+const useMediaInTimeline = ({ volume, mediaVolume, src, mediaType, playbackRate, displayName, id, stack, showInTimeline, premountDisplay, postmountDisplay, loopDisplay, }) => {
+    const parentSequence = (0, react_1.useContext)(SequenceContext_js_1.SequenceContext);
+    const startsAt = (0, use_audio_frame_js_1.useMediaStartsAt)();
+    const { registerSequence, unregisterSequence } = (0, react_1.useContext)(SequenceManager_js_1.SequenceManager);
+    const { volumes, duration, doesVolumeChange, nonce, rootId, isStudio, finalDisplayName, } = (0, exports.useBasicMediaInTimeline)({
+        volume,
+        mediaVolume,
+        mediaType,
+        src,
+        displayName,
+        trimAfter: undefined,
+        trimBefore: undefined,
+        playbackRate,
+    });
     (0, react_1.useEffect)(() => {
         var _a, _b, _c;
         if (!src) {
             throw new Error('No src passed');
         }
-        if (!env.isStudio && ((_b = (_a = window.process) === null || _a === void 0 ? void 0 : _a.env) === null || _b === void 0 ? void 0 : _b.NODE_ENV) !== 'test') {
+        if (!isStudio && ((_b = (_a = window.process) === null || _a === void 0 ? void 0 : _a.env) === null || _b === void 0 ? void 0 : _b.NODE_ENV) !== 'test') {
             return;
         }
         if (!showInTimeline) {
@@ -74,14 +105,14 @@ const useMediaInTimeline = ({ volume, mediaVolume, src, mediaType, playbackRate,
             duration,
             from: 0,
             parent: (_c = parentSequence === null || parentSequence === void 0 ? void 0 : parentSequence.id) !== null && _c !== void 0 ? _c : null,
-            displayName: displayName !== null && displayName !== void 0 ? displayName : (0, get_asset_file_name_js_1.getAssetDisplayName)(src),
+            displayName: finalDisplayName,
             rootId,
             volume: volumes,
             showInTimeline: true,
             nonce,
             startMediaFrom: 0 - startsAt,
             doesVolumeChange,
-            loopDisplay: undefined,
+            loopDisplay,
             playbackRate,
             stack,
             premountDisplay,
@@ -91,27 +122,26 @@ const useMediaInTimeline = ({ volume, mediaVolume, src, mediaType, playbackRate,
             unregisterSequence(id);
         };
     }, [
-        actualFrom,
         duration,
         id,
         parentSequence,
         src,
         registerSequence,
-        rootId,
         unregisterSequence,
-        videoConfig,
         volumes,
         doesVolumeChange,
         nonce,
         mediaType,
         startsAt,
         playbackRate,
-        displayName,
         stack,
         showInTimeline,
         premountDisplay,
         postmountDisplay,
-        env.isStudio,
+        isStudio,
+        loopDisplay,
+        rootId,
+        finalDisplayName,
     ]);
 };
 exports.useMediaInTimeline = useMediaInTimeline;

package/dist/cjs/use-media-playback.js

@@ -141,7 +141,7 @@ const useMediaPlayback = ({ mediaRef, src, mediaType, playbackRate: localPlaybac
     }, [mediaRef, playbackRate]);
     (0, react_1.useEffect)(() => {
         var _a, _b, _c;
-        const tagName = mediaType === 'audio' ? '<Audio>' : '<Video>';
+        const tagName = mediaType === 'audio' ? '<Html5Audio>' : '<Html5Video>';
         if (!mediaRef.current) {
             throw new Error(`No ${mediaType} ref found`);
         }

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

@@ -2,4 +2,4 @@ import type { VolumeProp } from './volume-prop.js';
 export declare const validateMediaProps: (props: {
     volume: VolumeProp | undefined;
     playbackRate: number | undefined;
-}, component: "Video" | "Audio") => void;
+}, component: "Html5Video" | "Html5Audio" | "Audio" | "Video") => 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.357";
+export declare const VERSION = "4.0.360";

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.357';
+exports.VERSION = '4.0.360';

package/dist/cjs/video/OffthreadVideo.js

@@ -39,7 +39,7 @@ const InnerOffthreadVideo = (props) => {
 };
 exports.InnerOffthreadVideo = InnerOffthreadVideo;
 /*
- * @description This method imports and displays a video, similar to <Video />. During rendering, it extracts the exact frame from the video and displays it in an <img> tag
+ * @description This method imports and displays a video, similar to <Html5Video />. During rendering, it extracts the exact frame from the video and displays it in an <img> tag
  * @see [Documentation](https://www.remotion.dev/docs/offthreadvideo)
  */
 const OffthreadVideo = ({ src, acceptableTimeShiftInSeconds, allowAmplificationDuringRender, audioStreamIndex, className, crossOrigin, delayRenderRetries, delayRenderTimeoutInMilliseconds, id, loopVolumeCurveBehavior, muted, name, onAutoPlayError, onError, onVideoFrame, pauseWhenBuffering, playbackRate, showInTimeline, style, toneFrequency, toneMapped, transparent, trimAfter, trimBefore, useWebAudioApi, volume, _remotionInternalNativeLoopPassed, endAt, stack, startFrom, imageFormat, }) => {