remotion 4.0.442 → 4.0.444

package/dist/cjs/Composition.js

@@ -5,6 +5,8 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const react_dom_1 = require("react-dom");
 const CanUseRemotionHooks_js_1 = require("./CanUseRemotionHooks.js");
+const composition_render_error_context_js_1 = require("./composition-render-error-context.js");
+const CompositionErrorBoundary_js_1 = require("./CompositionErrorBoundary.js");
 const CompositionManagerContext_js_1 = require("./CompositionManagerContext.js");
 const Folder_js_1 = require("./Folder.js");
 const input_props_serialization_js_1 = require("./input-props-serialization.js");
@@ -28,7 +30,7 @@ const Fallback = () => {
     return null;
 };
 const InnerComposition = ({ width, height, fps, durationInFrames, id, defaultProps, schema, ...compProps }) => {
-    var _a, _b, _c;
+    var _a, _b, _c, _d;
     const compManager = (0, react_1.useContext)(CompositionManagerContext_js_1.CompositionSetters);
     const { registerComposition, unregisterComposition } = compManager;
     const video = (0, use_video_js_1.useVideo)();
@@ -52,6 +54,7 @@ const InnerComposition = ({ width, height, fps, durationInFrames, id, defaultPro
         throw new Error('<Composition> mounted inside another composition. See https://remotion.dev/docs/wrong-composition-mount for help.');
     }
     const { folderName, parentName } = (0, react_1.useContext)(Folder_js_1.FolderContext);
+    const stack = (_b = compProps.stack) !== null && _b !== void 0 ? _b : null;
     (0, react_1.useEffect)(() => {
         var _a;
         // Ensure it's a URL safe id
@@ -73,6 +76,7 @@ const InnerComposition = ({ width, height, fps, durationInFrames, id, defaultPro
             parentFolderName: parentName,
             schema: schema !== null && schema !== void 0 ? schema : null,
             calculateMetadata: (_a = compProps.calculateMetadata) !== null && _a !== void 0 ? _a : null,
+            stack,
         });
         return () => {
             unregisterComposition(id);
@@ -90,10 +94,18 @@ const InnerComposition = ({ width, height, fps, durationInFrames, id, defaultPro
         parentName,
         schema,
         compProps.calculateMetadata,
+        stack,
         registerComposition,
         unregisterComposition,
     ]);
     const resolved = (0, ResolveCompositionConfig_js_1.useResolvedVideoConfig)(id);
+    const { setError, clearError } = (0, react_1.useContext)(composition_render_error_context_js_1.CompositionRenderErrorContext);
+    const onError = (0, react_1.useCallback)((error) => {
+        setError(error);
+    }, [setError]);
+    const onClear = (0, react_1.useCallback)(() => {
+        clearError();
+    }, [clearError]);
     if (environment.isStudio &&
         video &&
         video.component === lazy &&
@@ -104,7 +116,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, { ...((_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)(CompositionErrorBoundary_js_1.CompositionErrorBoundary, { onError: onError, onClear: onClear, 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, { ...((_c = resolved.result.props) !== null && _c !== void 0 ? _c : {}) }) }) }) }), (0, portal_node_js_1.portalNode)());
     }
     if (environment.isRendering &&
         video &&
@@ -116,7 +128,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, { ...((_c = resolved.result.props) !== null && _c !== void 0 ? _c : {}) }) }) }), (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, { ...((_d = resolved.result.props) !== null && _d !== void 0 ? _d : {}) }) }) }), (0, portal_node_js_1.portalNode)());
     }
     return null;
 };

package/dist/cjs/CompositionErrorBoundary.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+type Props = {
+    readonly children: React.ReactNode;
+    readonly onError: (error: Error) => void;
+    readonly onClear: () => void;
+};
+type State = {
+    hasError: boolean;
+};
+export declare class CompositionErrorBoundary extends React.Component<Props, State> {
+    state: State;
+    static getDerivedStateFromError(): Partial<State>;
+    componentDidCatch(error: Error): void;
+    componentDidUpdate(_prevProps: Props): void;
+    render(): React.ReactNode;
+}
+export {};

package/dist/cjs/CompositionErrorBoundary.js

@@ -0,0 +1,31 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CompositionErrorBoundary = void 0;
+const react_1 = __importDefault(require("react"));
+class CompositionErrorBoundary extends react_1.default.Component {
+    constructor() {
+        super(...arguments);
+        this.state = { hasError: false };
+    }
+    static getDerivedStateFromError() {
+        return { hasError: true };
+    }
+    componentDidCatch(error) {
+        this.props.onError(error);
+    }
+    componentDidUpdate(_prevProps) {
+        if (!this.state.hasError) {
+            this.props.onClear();
+        }
+    }
+    render() {
+        if (this.state.hasError) {
+            return null;
+        }
+        return this.props.children;
+    }
+}
+exports.CompositionErrorBoundary = CompositionErrorBoundary;

package/dist/cjs/CompositionManager.d.ts

@@ -18,6 +18,7 @@ export type TComposition<Schema extends AnyZodObject, Props extends Record<strin
     nonce: NonceHistory;
     schema: Schema | null;
     calculateMetadata: CalculateMetadataFunction<InferProps<Schema, Props>> | null;
+    stack: string | null;
 } & PropsIfHasProps<Schema, Props>;
 export type AnyComposition = TComposition<AnyZodObject, Record<string, unknown>>;
 export type TCompMetadataWithCalcFunction<Schema extends AnyZodObject, Props extends Record<string, unknown>> = Pick<TComposition<Schema, Props>, 'id' | 'height' | 'width' | 'fps' | 'durationInFrames' | 'defaultProps' | 'calculateMetadata'>;

package/dist/cjs/Img.d.ts

@@ -14,5 +14,18 @@ export type ImgProps = NativeImgProps & {
      */
     readonly stack?: string;
 };
-export declare const Img: React.ForwardRefExoticComponent<Omit<ImgProps, "ref"> & React.RefAttributes<HTMLImageElement>>;
+export declare const Img: React.ComponentType<NativeImgProps & {
+    readonly maxRetries?: number;
+    readonly pauseWhenLoading?: boolean;
+    readonly delayRenderRetries?: number;
+    readonly delayRenderTimeoutInMilliseconds?: number;
+    readonly onImageFrame?: (imageElement: HTMLImageElement) => void;
+    readonly src: string;
+    readonly showInTimeline?: boolean;
+    readonly name?: string;
+    /**
+     * @deprecated For internal use only
+     */
+    readonly stack?: string;
+}>;
 export {};

package/dist/cjs/Img.js

@@ -11,10 +11,41 @@ const use_buffer_state_js_1 = require("./use-buffer-state.js");
 const use_delay_render_js_1 = require("./use-delay-render.js");
 const use_media_in_timeline_js_1 = require("./use-media-in-timeline.js");
 const use_remotion_environment_js_1 = require("./use-remotion-environment.js");
+const wrap_in_schema_js_1 = require("./wrap-in-schema.js");
 function exponentialBackoff(errorCount) {
     return 1000 * 2 ** (errorCount - 1);
 }
-const ImgRefForwarding = ({ onError, maxRetries = 2, src, pauseWhenLoading, delayRenderRetries, delayRenderTimeoutInMilliseconds, onImageFrame, crossOrigin, showInTimeline, name, stack, ...props }, ref) => {
+const imgSchema = {
+    'style.translate': {
+        type: 'translate',
+        step: 1,
+        default: '0px 0px',
+        description: 'Position',
+    },
+    'style.scale': {
+        type: 'number',
+        min: 0.05,
+        max: 100,
+        step: 0.01,
+        default: 1,
+        description: 'Scale',
+    },
+    'style.rotate': {
+        type: 'rotation',
+        step: 1,
+        default: '0deg',
+        description: 'Rotation',
+    },
+    'style.opacity': {
+        type: 'number',
+        min: 0,
+        max: 1,
+        step: 0.01,
+        default: 1,
+        description: 'Opacity',
+    },
+};
+const ImgInner = ({ onError, maxRetries = 2, src, pauseWhenLoading, delayRenderRetries, delayRenderTimeoutInMilliseconds, onImageFrame, crossOrigin, showInTimeline, name, stack, ref, controls, ...props }) => {
     var _a, _b;
     const imageRef = (0, react_1.useRef)(null);
     const errors = (0, react_1.useRef)({});
@@ -40,6 +71,7 @@ const ImgRefForwarding = ({ onError, maxRetries = 2, src, pauseWhenLoading, dela
         premountDisplay: (_a = sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.premountDisplay) !== null && _a !== void 0 ? _a : null,
         postmountDisplay: (_b = sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.postmountDisplay) !== null && _b !== void 0 ? _b : null,
         loopDisplay: undefined,
+        controls: controls !== null && controls !== void 0 ? controls : null,
     });
     const actualSrc = (0, prefetch_js_1.usePreload)(src);
     const retryIn = (0, react_1.useCallback)((timeout) => {
@@ -188,5 +220,5 @@ const ImgRefForwarding = ({ onError, maxRetries = 2, src, pauseWhenLoading, dela
  * @description Works just like a regular HTML img tag. When you use the <Img> tag, Remotion will ensure that the image is loaded before rendering the frame.
  * @see [Documentation](https://remotion.dev/docs/img)
  */
-exports.Img = (0, react_1.forwardRef)(ImgRefForwarding);
+exports.Img = (0, wrap_in_schema_js_1.wrapInSchema)(ImgInner, imgSchema);
 (0, enable_sequence_stack_traces_js_1.addSequenceStackTraces)(exports.Img);

package/dist/cjs/composition-render-error-context.d.ts

@@ -0,0 +1,5 @@
+export type CompositionRenderErrorContextType = {
+    setError: (error: Error) => void;
+    clearError: () => void;
+};
+export declare const CompositionRenderErrorContext: import("react").Context<CompositionRenderErrorContextType>;

package/dist/cjs/composition-render-error-context.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CompositionRenderErrorContext = void 0;
+const react_1 = require("react");
+exports.CompositionRenderErrorContext = (0, react_1.createContext)({
+    setError: () => { },
+    clearError: () => { },
+});

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

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

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

@@ -0,0 +1,17 @@
+"use strict";
+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 mediaDuration = (0, calculate_media_duration_js_1.calculateMediaDuration)({
+        mediaDurationInFrames: compositionDurationInFrames * playbackRate + (trimBefore !== null && trimBefore !== void 0 ? trimBefore : 0),
+        playbackRate,
+        trimBefore,
+        trimAfter,
+    });
+    if (parentSequenceDurationInFrames !== null) {
+        return Math.floor(Math.min(parentSequenceDurationInFrames * playbackRate, mediaDuration));
+    }
+    return mediaDuration;
+};
+exports.getTimelineDuration = getTimelineDuration;

package/dist/cjs/index.d.ts

@@ -132,6 +132,7 @@ export * from './use-video-config.js';
 export * from './version.js';
 export * from './video-config.js';
 export { Html5Video, OffthreadVideo, OffthreadVideoProps, RemotionMainVideoProps, RemotionOffthreadVideoProps, RemotionVideoProps, Video, } from './video/index.js';
+export { MediaPlaybackError } from './video/MediaPlaybackError.js';
 export type { OnVideoFrame } from './video/props.js';
 export type { VolumeProp } from './volume-prop.js';
 export { watchStaticFile } from './watch-static-file.js';

package/dist/cjs/index.js

@@ -14,10 +14,11 @@ 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.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;
+exports.Config = exports.Experimental = exports.watchStaticFile = exports.MediaPlaybackError = 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");
+const Composition_js_1 = require("./Composition.js");
 const enable_sequence_stack_traces_js_1 = require("./enable-sequence-stack-traces.js");
 const is_player_js_1 = require("./is-player.js");
 const multiple_versions_warning_js_1 = require("./multiple-versions-warning.js");
@@ -33,8 +34,8 @@ Object.defineProperty(exports, "Audio", { enumerable: true, get: function () { r
 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");
-Object.defineProperty(exports, "Composition", { enumerable: true, get: function () { return Composition_js_1.Composition; } });
+var Composition_js_2 = require("./Composition.js");
+Object.defineProperty(exports, "Composition", { enumerable: true, get: function () { return Composition_js_2.Composition; } });
 var input_props_js_1 = require("./config/input-props.js");
 Object.defineProperty(exports, "getInputProps", { enumerable: true, get: function () { return input_props_js_1.getInputProps; } });
 var delay_render_js_1 = require("./delay-render.js");
@@ -87,6 +88,8 @@ 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 MediaPlaybackError_js_1 = require("./video/MediaPlaybackError.js");
+Object.defineProperty(exports, "MediaPlaybackError", { enumerable: true, get: function () { return MediaPlaybackError_js_1.MediaPlaybackError; } });
 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 = {
@@ -130,3 +133,4 @@ exports.Config = new Proxy(proxyObj, {
 });
 Sequence_js_1.Sequence.displayName = 'Sequence';
 (0, enable_sequence_stack_traces_js_1.addSequenceStackTraces)(Sequence_js_1.Sequence);
+(0, enable_sequence_stack_traces_js_1.addSequenceStackTraces)(Composition_js_1.Composition);

package/dist/cjs/internals.d.ts

@@ -440,5 +440,6 @@ export declare const Internals: {
         defaultValue: unknown;
         shouldResortToDefaultValueIfUndefined: boolean;
     }) => unknown;
+    readonly CompositionRenderErrorContext: import("react").Context<import("./composition-render-error-context.js").CompositionRenderErrorContextType>;
 };
 export type { CompositionManagerContext, ResolvedStackLocation, CompProps, LoggingContextValue, MediaVolumeContextValue, RemotionEnvironment, SequenceFieldSchema, SequenceSchema, SerializedJSONWithCustomFields, SetMediaVolumeContextValue, SetTimelineContextValue, TCompMetadata, TComposition, TimelineContextValue, TRenderAsset, TSequence, WatchRemotionStaticFilesPayload, ScheduleAudioNodeOptions, CanUpdateSequencePropStatus, ScheduleAudioNodeResult, NonceHistory, };

package/dist/cjs/internals.js

@@ -42,6 +42,7 @@ 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 composition_render_error_context_js_1 = require("./composition-render-error-context.js");
 const CompositionManager_js_1 = require("./CompositionManager.js");
 const CompositionManagerContext_js_1 = require("./CompositionManagerContext.js");
 const CompositionManagerProvider_js_1 = require("./CompositionManagerProvider.js");
@@ -208,4 +209,5 @@ exports.Internals = {
     AbsoluteTimeContext: TimelineContext_js_1.AbsoluteTimeContext,
     RenderAssetManagerProvider: RenderAssetManager_js_1.RenderAssetManagerProvider,
     getEffectiveVisualModeValue: get_effective_visual_mode_value_js_1.getEffectiveVisualModeValue,
+    CompositionRenderErrorContext: composition_render_error_context_js_1.CompositionRenderErrorContext,
 };

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

@@ -1,18 +1,13 @@
 import type { FC, PropsWithChildren } from 'react';
 import React from 'react';
 import type { LayoutAndStyle, SequenceProps } from '../Sequence.js';
-import { ENABLE_V5_BREAKING_CHANGES } from '../v5-flag.js';
 type SeriesSequenceProps = PropsWithChildren<{
     readonly durationInFrames: number;
     readonly offset?: number;
     readonly className?: string;
 } & Pick<SequenceProps, 'layout' | 'name'> & LayoutAndStyle>;
 declare const SeriesSequence: React.ForwardRefExoticComponent<SeriesSequenceProps & React.RefAttributes<HTMLDivElement>>;
-type V4Props = {
-    children: React.ReactNode;
-};
-type V5Props = SequenceProps;
-type SeriesProps = true extends typeof ENABLE_V5_BREAKING_CHANGES ? V5Props : V4Props;
+type SeriesProps = SequenceProps;
 /**
  * @description with this component, you can easily stitch together scenes that should play sequentially after another.
  * @see [Documentation](https://www.remotion.dev/docs/series)

package/dist/cjs/series/index.js

@@ -5,7 +5,6 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const enable_sequence_stack_traces_js_1 = require("../enable-sequence-stack-traces.js");
 const Sequence_js_1 = require("../Sequence.js");
-const v5_flag_js_1 = require("../v5-flag.js");
 const validate_duration_in_frames_js_1 = require("../validation/validate-duration-in-frames.js");
 const flatten_children_js_1 = require("./flatten-children.js");
 const is_inside_series_js_1 = require("./is-inside-series.js");
@@ -64,11 +63,9 @@ const Series = (props) => {
             return ((0, jsx_runtime_1.jsx)(Sequence_js_1.Sequence, { name: name || '<Series.Sequence>', from: currentStartFrame, durationInFrames: durationInFramesProp, ...passedProps, ref: castedChild.ref, children: child }));
         });
     }, [props.children]);
-    if (v5_flag_js_1.ENABLE_V5_BREAKING_CHANGES) {
-        return ((0, jsx_runtime_1.jsx)(is_inside_series_js_1.IsInsideSeriesContainer, { children: (0, jsx_runtime_1.jsx)(Sequence_js_1.Sequence, { ...props, children: childrenValue }) }));
-    }
-    return (0, jsx_runtime_1.jsx)(is_inside_series_js_1.IsInsideSeriesContainer, { children: childrenValue });
+    return ((0, jsx_runtime_1.jsx)(is_inside_series_js_1.IsInsideSeriesContainer, { children: (0, jsx_runtime_1.jsx)(Sequence_js_1.Sequence, { layout: "none", name: "<Series>", ...props, children: childrenValue }) }));
 };
 exports.Series = Series;
 Series.Sequence = SeriesSequence;
+(0, enable_sequence_stack_traces_js_1.addSequenceStackTraces)(Series);
 (0, enable_sequence_stack_traces_js_1.addSequenceStackTraces)(SeriesSequence);

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

@@ -1,4 +1,4 @@
-import type { LoopDisplay } from './CompositionManager.js';
+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, }: {
     volume: VolumeProp | undefined;
@@ -18,7 +18,7 @@ export declare const useBasicMediaInTimeline: ({ volume, mediaVolume, mediaType,
     isStudio: boolean;
     finalDisplayName: string;
 };
-export declare const useImageInTimeline: ({ src, displayName, id, stack, showInTimeline, premountDisplay, postmountDisplay, loopDisplay, }: {
+export declare const useImageInTimeline: ({ src, displayName, id, stack, showInTimeline, premountDisplay, postmountDisplay, loopDisplay, controls, }: {
     src: string | undefined;
     displayName: string | null;
     id: string;
@@ -27,6 +27,7 @@ export declare const useImageInTimeline: ({ src, displayName, id, stack, showInT
     premountDisplay: number | null;
     postmountDisplay: number | null;
     loopDisplay: LoopDisplay | undefined;
+    controls: SequenceControls | null;
 }) => void;
 export declare const useMediaInTimeline: ({ volume, mediaVolume, src, mediaType, playbackRate, displayName, id, stack, showInTimeline, premountDisplay, postmountDisplay, loopDisplay, }: {
     volume: VolumeProp | undefined;

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

@@ -3,8 +3,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useMediaInTimeline = exports.useImageInTimeline = exports.useBasicMediaInTimeline = void 0;
 const react_1 = require("react");
 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 get_timeline_duration_js_1 = require("./get-timeline-duration.js");
 const nonce_js_1 = require("./nonce.js");
 const SequenceContext_js_1 = require("./SequenceContext.js");
 const SequenceManager_js_1 = require("./SequenceManager.js");
@@ -22,6 +22,7 @@ const warnOnce = (message) => {
     didWarn[message] = true;
 };
 const useBasicMediaInTimeline = ({ volume, mediaVolume, mediaType, src, displayName, trimBefore, trimAfter, playbackRate, }) => {
+    var _a;
     if (!src) {
         throw new Error('No src passed');
     }
@@ -29,15 +30,13 @@ const useBasicMediaInTimeline = ({ volume, mediaVolume, mediaType, src, displayN
     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 mediaDuration = (0, calculate_media_duration_js_1.calculateMediaDuration)({
-        mediaDurationInFrames: videoConfig.durationInFrames + (trimBefore !== null && trimBefore !== void 0 ? trimBefore : 0),
+    const duration = (0, get_timeline_duration_js_1.getTimelineDuration)({
+        compositionDurationInFrames: videoConfig.durationInFrames,
         playbackRate,
         trimBefore,
         trimAfter,
+        parentSequenceDurationInFrames: (_a = parentSequence === null || parentSequence === void 0 ? void 0 : parentSequence.durationInFrames) !== null && _a !== void 0 ? _a : null,
     });
-    const duration = parentSequence
-        ? Math.min(parentSequence.durationInFrames, mediaDuration)
-        : mediaDuration;
     const volumes = (0, react_1.useMemo)(() => {
         if (typeof volume === 'number') {
             return volume;
@@ -73,7 +72,7 @@ const useBasicMediaInTimeline = ({ volume, mediaVolume, mediaType, src, displayN
     };
 };
 exports.useBasicMediaInTimeline = useBasicMediaInTimeline;
-const useImageInTimeline = ({ src, displayName, id, stack, showInTimeline, premountDisplay, postmountDisplay, loopDisplay, }) => {
+const useImageInTimeline = ({ src, displayName, id, stack, showInTimeline, premountDisplay, postmountDisplay, loopDisplay, controls, }) => {
     const parentSequence = (0, react_1.useContext)(SequenceContext_js_1.SequenceContext);
     const { registerSequence, unregisterSequence } = (0, react_1.useContext)(SequenceManager_js_1.SequenceManager);
     const { duration, nonce, rootId, isStudio, finalDisplayName } = (0, exports.useBasicMediaInTimeline)({
@@ -112,7 +111,7 @@ const useImageInTimeline = ({ src, displayName, id, stack, showInTimeline, premo
             stack,
             premountDisplay,
             postmountDisplay,
-            controls: null,
+            controls,
         });
         return () => {
             unregisterSequence(id);
@@ -133,6 +132,7 @@ const useImageInTimeline = ({ src, displayName, id, stack, showInTimeline, premo
         loopDisplay,
         rootId,
         finalDisplayName,
+        controls,
     ]);
 };
 exports.useImageInTimeline = useImageInTimeline;

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.442";
+export declare const VERSION = "4.0.444";

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.442';
+exports.VERSION = '4.0.444';

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

@@ -0,0 +1,7 @@
+export declare class MediaPlaybackError extends Error {
+    readonly src: string;
+    constructor({ message, src }: {
+        message: string;
+        src: string;
+    });
+}

package/dist/cjs/video/MediaPlaybackError.js

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

package/dist/cjs/video/VideoForPreview.js

@@ -55,6 +55,7 @@ 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");
 const emit_video_frame_js_1 = require("./emit-video-frame.js");
+const MediaPlaybackError_js_1 = require("./MediaPlaybackError.js");
 const video_fragment_js_1 = require("./video-fragment.js");
 const VideoForDevelopmentRefForwardingFunction = (props, ref) => {
     var _a, _b, _c, _d, _e, _f;
@@ -192,20 +193,32 @@ const VideoForDevelopmentRefForwardingFunction = (props, ref) => {
                 console.error('Error occurred in video', current === null || current === void 0 ? void 0 : current.error);
                 // If user is handling the error, we don't cause an unhandled exception
                 if (onError) {
-                    const err = new Error(`Code ${current.error.code}: ${current.error.message}`);
+                    const err = new MediaPlaybackError_js_1.MediaPlaybackError({
+                        message: `Code ${current.error.code}: ${current.error.message}`,
+                        src: src,
+                    });
                     onError(err);
                     return;
                 }
-                throw new Error(`The browser threw an error while playing the video ${src}: Code ${current.error.code} - ${(_a = current === null || current === void 0 ? void 0 : current.error) === null || _a === void 0 ? void 0 : _a.message}. See https://remotion.dev/docs/media-playback-error for help. Pass an onError() prop to handle the error.`);
+                throw new MediaPlaybackError_js_1.MediaPlaybackError({
+                    message: `The browser threw an error while playing the video ${src}: Code ${current.error.code} - ${(_a = current === null || current === void 0 ? void 0 : current.error) === null || _a === void 0 ? void 0 : _a.message}. See https://remotion.dev/docs/media-playback-error for help. Pass an onError() prop to handle the error.`,
+                    src: src,
+                });
             }
             else {
                 // If user is handling the error, we don't cause an unhandled exception
                 if (onError) {
-                    const err = new Error(`The browser threw an error while playing the video ${src}`);
+                    const err = new MediaPlaybackError_js_1.MediaPlaybackError({
+                        message: `The browser threw an error while playing the video ${src}`,
+                        src: src,
+                    });
                     onError(err);
                     return;
                 }
-                throw new Error('The browser threw an error while playing the video');
+                throw new MediaPlaybackError_js_1.MediaPlaybackError({
+                    message: 'The browser threw an error while playing the video',
+                    src: src,
+                });
             }
         };
         current.addEventListener('error', errorHandler, { once: true });

package/dist/cjs/video/VideoForRendering.js

@@ -18,6 +18,7 @@ const use_unsafe_video_config_js_1 = require("../use-unsafe-video-config.js");
 const volume_prop_js_1 = require("../volume-prop.js");
 const volume_safeguard_js_1 = require("../volume-safeguard.js");
 const get_current_time_js_1 = require("./get-current-time.js");
+const MediaPlaybackError_js_1 = require("./MediaPlaybackError.js");
 const seek_until_right_js_1 = require("./seek-until-right.js");
 const VideoForRenderingForwardFunction = ({ onError, volume: volumeProp, allowAmplificationDuringRender, playbackRate, onDuration, toneFrequency, name, acceptableTimeShiftInSeconds, delayRenderRetries, delayRenderTimeoutInMilliseconds, loopVolumeCurveBehavior, audioStreamIndex, onVideoFrame, ...props }, ref) => {
     const absoluteFrame = (0, timeline_position_state_js_1.useTimelinePosition)();
@@ -155,10 +156,16 @@ const VideoForRenderingForwardFunction = ({ onError, volume: volumeProp, allowAm
                 if (onError) {
                     return;
                 }
-                throw new Error(`The browser threw an error while playing the video ${props.src}: Code ${current.error.code} - ${(_a = current === null || current === void 0 ? void 0 : current.error) === null || _a === void 0 ? void 0 : _a.message}. See https://remotion.dev/docs/media-playback-error for help. Pass an onError() prop to handle the error.`);
+                throw new MediaPlaybackError_js_1.MediaPlaybackError({
+                    message: `The browser threw an error while playing the video ${props.src}: Code ${current.error.code} - ${(_a = current === null || current === void 0 ? void 0 : current.error) === null || _a === void 0 ? void 0 : _a.message}. See https://remotion.dev/docs/media-playback-error for help. Pass an onError() prop to handle the error.`,
+                    src: props.src,
+                });
             }
             else {
-                throw new Error('The browser threw an error');
+                throw new MediaPlaybackError_js_1.MediaPlaybackError({
+                    message: 'The browser threw an error',
+                    src: props.src,
+                });
             }
         };
         current.addEventListener('error', errorHandler, { once: true });