remotion 4.0.356 → 4.0.358

package/dist/cjs/Composition.js

@@ -28,7 +28,7 @@ const Fallback = () => {
     return null;
 };
 const InnerComposition = ({ width, height, fps, durationInFrames, id, defaultProps, schema, ...compProps }) => {
-    var _a, _b;
+    var _a, _b, _c;
     const compManager = (0, react_1.useContext)(CompositionManagerContext_js_1.CompositionSetters);
     const { registerComposition, unregisterComposition } = compManager;
     const video = (0, use_video_js_1.useVideo)();
@@ -41,6 +41,10 @@ const InnerComposition = ({ width, height, fps, durationInFrames, id, defaultPro
     const isPlayer = (0, is_player_js_1.useIsPlayer)();
     const environment = (0, use_remotion_environment_js_1.useRemotionEnvironment)();
     const canUseComposition = (0, react_1.useContext)(CanUseRemotionHooks_js_1.CanUseRemotionHooks);
+    // Record seen composition IDs as early as possible so that overlays can access them
+    if (typeof window !== 'undefined') {
+        window.remotion_seenCompositionIds = Array.from(new Set([...((_a = window.remotion_seenCompositionIds) !== null && _a !== void 0 ? _a : []), id]));
+    }
     if (canUseComposition) {
         if (isPlayer) {
             throw new Error('<Composition> was mounted inside the `component` that was passed to the <Player>. See https://remotion.dev/docs/wrong-composition-mount for help.');
@@ -104,7 +108,7 @@ const InnerComposition = ({ width, height, fps, durationInFrames, id, defaultPro
                 resolved.type !== 'success-and-refreshing')) {
             return null;
         }
-        return (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)(CanUseRemotionHooks_js_1.CanUseRemotionHooksProvider, { children: (0, jsx_runtime_1.jsx)(react_1.Suspense, { fallback: (0, jsx_runtime_1.jsx)(loading_indicator_js_1.Loading, {}), children: (0, jsx_runtime_1.jsx)(Comp, { ...((_a = resolved.result.props) !== null && _a !== void 0 ? _a : {}) }) }) }), (0, portal_node_js_1.portalNode)());
+        return (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)(CanUseRemotionHooks_js_1.CanUseRemotionHooksProvider, { children: (0, jsx_runtime_1.jsx)(react_1.Suspense, { fallback: (0, jsx_runtime_1.jsx)(loading_indicator_js_1.Loading, {}), children: (0, jsx_runtime_1.jsx)(Comp, { ...((_b = resolved.result.props) !== null && _b !== void 0 ? _b : {}) }) }) }), (0, portal_node_js_1.portalNode)());
     }
     if (environment.isRendering && video && video.component === lazy) {
         const Comp = lazy;
@@ -113,7 +117,7 @@ const InnerComposition = ({ width, height, fps, durationInFrames, id, defaultPro
                 resolved.type !== 'success-and-refreshing')) {
             return null;
         }
-        return (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)(CanUseRemotionHooks_js_1.CanUseRemotionHooksProvider, { children: (0, jsx_runtime_1.jsx)(react_1.Suspense, { fallback: (0, jsx_runtime_1.jsx)(Fallback, {}), children: (0, jsx_runtime_1.jsx)(Comp, { ...((_b = resolved.result.props) !== null && _b !== void 0 ? _b : {}) }) }) }), (0, portal_node_js_1.portalNode)());
+        return (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)(CanUseRemotionHooks_js_1.CanUseRemotionHooksProvider, { children: (0, jsx_runtime_1.jsx)(react_1.Suspense, { fallback: (0, jsx_runtime_1.jsx)(Fallback, {}), children: (0, jsx_runtime_1.jsx)(Comp, { ...((_c = resolved.result.props) !== null && _c !== void 0 ? _c : {}) }) }) }), (0, portal_node_js_1.portalNode)());
     }
     return null;
 };

package/dist/cjs/CompositionManager.d.ts

@@ -75,10 +75,9 @@ export type InlineAudioAsset = {
     id: string;
     audio: number[];
     frame: number;
-    sampleRate: number;
-    numberOfChannels: number;
     timestamp: number;
     duration: number;
+    toneFrequency: number;
 };
 type DiscriminatedArtifact = {
     contentType: 'binary';

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)({
-                endAt: trimAfterValue,
-                mediaDuration: duration,
+        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,
-                startFrom: trimBeforeValue,
-            }), children: (0, jsx_runtime_1.jsx)(exports.Audio, { ...propsOtherThanLoop, ref: ref, _remotionInternalNativeLoopPassed: true }) }));
+                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.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

@@ -12,6 +12,7 @@ const random_js_1 = require("../random.js");
 const use_amplification_js_1 = require("../use-amplification.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");
 const volume_position_state_js_1 = require("../volume-position-state.js");
 const volume_prop_js_1 = require("../volume-prop.js");
 const volume_safeguard_js_1 = require("../volume-safeguard.js");
@@ -36,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);
@@ -92,7 +93,6 @@ const AudioForDevelopmentForwardRefFunction = (props, ref) => {
     (0, use_media_in_timeline_js_1.useMediaInTimeline)({
         volume,
         mediaVolume,
-        mediaRef: audioRef,
         src,
         mediaType: 'audio',
         playbackRate: playbackRate !== null && playbackRate !== void 0 ? playbackRate : 1,
@@ -102,9 +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,
-        onAutoPlayError: null,
-        isPremounting: Boolean(sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.premounting),
-        isPostmounting: Boolean(sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.postmounting),
+        loopDisplay: undefined,
     });
     // putting playback before useVolume
     // because volume looks at playbackrate
@@ -120,6 +118,14 @@ const AudioForDevelopmentForwardRefFunction = (props, ref) => {
         pauseWhenBuffering,
         onAutoPlayError: null,
     });
+    (0, use_media_tag_js_1.useMediaTag)({
+        id: timelineId,
+        isPostmounting: Boolean(sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.postmounting),
+        isPremounting: Boolean(sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.premounting),
+        mediaRef: audioRef,
+        mediaType: 'audio',
+        onAutoPlayError: null,
+    });
     (0, use_amplification_js_1.useVolume)({
         logLevel,
         mediaRef: audioRef,

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-media-duration.d.ts

@@ -0,0 +1,6 @@
+export declare const calculateMediaDuration: ({ trimAfter, mediaDurationInFrames, playbackRate, trimBefore, }: {
+    mediaDurationInFrames: number;
+    playbackRate: number;
+    trimBefore: number | undefined;
+    trimAfter: number | undefined;
+}) => number;

package/dist/cjs/calculate-media-duration.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.calculateMediaDuration = void 0;
+const calculateMediaDuration = ({ trimAfter, mediaDurationInFrames, playbackRate, trimBefore, }) => {
+    let duration = mediaDurationInFrames;
+    // Account for trimAfter
+    if (typeof trimAfter !== 'undefined') {
+        duration = trimAfter;
+    }
+    // Account for trimBefore
+    if (typeof trimBefore !== 'undefined') {
+        duration -= trimBefore;
+    }
+    const actualDuration = duration / playbackRate;
+    return Math.floor(actualDuration);
+};
+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';
@@ -22,6 +22,7 @@ declare global {
         };
         remotion_cancelledError: string | undefined;
         remotion_getCompositionNames: () => string[];
+        remotion_seenCompositionIds: string[];
         getStaticCompositions: () => Promise<VideoConfigWithSerializedProps[]>;
         remotion_calculateComposition: (compId: string) => Promise<VideoConfigWithSerializedProps>;
         remotion_setBundleMode: (bundleMode: BundleState) => void;
@@ -85,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';
@@ -122,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';
@@ -148,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,6 +85,20 @@ 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, loopDisplay, }: {
+        volume: import("./volume-prop.js").VolumeProp | undefined;
+        mediaVolume: number;
+        src: string | undefined;
+        mediaType: "audio" | "video";
+        playbackRate: number;
+        displayName: string | null;
+        id: string;
+        stack: string | null;
+        showInTimeline: boolean;
+        premountDisplay: number | null;
+        postmountDisplay: number | null;
+        loopDisplay: import("./CompositionManager.js").LoopDisplay | undefined;
+    }) => void;
     readonly useLazyComponent: <Props>({ compProps, componentName, noSuspense, }: {
         compProps: CompProps<Props>;
         componentName: string;
@@ -132,6 +146,12 @@ export declare const Internals: {
         readonly audioLatencyHint: AudioContextLatencyCategory;
     }>;
     readonly invalidCompositionErrorMessage: string;
+    readonly calculateMediaDuration: ({ trimAfter, mediaDurationInFrames, playbackRate, trimBefore, }: {
+        mediaDurationInFrames: number;
+        playbackRate: number;
+        trimBefore: number | undefined;
+        trimAfter: number | undefined;
+    }) => number;
     readonly isCompositionIdValid: (id: string) => RegExpMatchArray | null;
     readonly getPreviewDomElement: () => HTMLElement | null;
     readonly compositionsRef: import("react").RefObject<{
@@ -283,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;
@@ -312,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,6 +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_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");
@@ -71,6 +72,7 @@ const timeline_position_state_js_1 = require("./timeline-position-state.js");
 const truthy_js_1 = require("./truthy.js");
 const use_current_scale_js_1 = require("./use-current-scale.js");
 const use_lazy_component_js_1 = require("./use-lazy-component.js");
+const use_media_in_timeline_js_1 = require("./use-media-in-timeline.js");
 const use_unsafe_video_config_js_1 = require("./use-unsafe-video-config.js");
 const use_video_js_1 = require("./use-video.js");
 const validate_media_props_js_1 = require("./validate-media-props.js");
@@ -110,6 +112,7 @@ exports.Internals = {
     getRoot: register_root_js_1.getRoot,
     useMediaVolumeState: volume_position_state_js_1.useMediaVolumeState,
     useMediaMutedState: volume_position_state_js_1.useMediaMutedState,
+    useMediaInTimeline: use_media_in_timeline_js_1.useMediaInTimeline,
     useLazyComponent: use_lazy_component_js_1.useLazyComponent,
     truthy: truthy_js_1.truthy,
     SequenceContext: SequenceContext_js_1.SequenceContext,
@@ -123,6 +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,
+    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,
@@ -171,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,9 +1,26 @@
-import type { RefObject } from 'react';
+import type { LoopDisplay } from './CompositionManager.js';
 import type { VolumeProp } from './volume-prop.js';
-export declare const useMediaInTimeline: ({ volume, mediaVolume, mediaRef, src, mediaType, playbackRate, displayName, id, stack, showInTimeline, premountDisplay, postmountDisplay, onAutoPlayError, isPremounting, isPostmounting, }: {
+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;
-    mediaRef: RefObject<HTMLAudioElement | HTMLVideoElement | null>;
     src: string | undefined;
     mediaType: "audio" | "video";
     playbackRate: number;
@@ -13,7 +30,5 @@ export declare const useMediaInTimeline: ({ volume, mediaVolume, mediaRef, src,
     showInTimeline: boolean;
     premountDisplay: number | null;
     postmountDisplay: number | null;
-    onAutoPlayError: null | (() => void);
-    isPremounting: boolean;
-    isPostmounting: boolean;
+    loopDisplay: LoopDisplay | undefined;
 }) => void;