remotion 4.0.443 → 4.0.445

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");
@@ -97,6 +99,13 @@ const InnerComposition = ({ width, height, fps, durationInFrames, id, defaultPro
         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 &&
@@ -107,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, { ...((_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)(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 &&

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/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,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.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");
@@ -88,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 = {

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/sequence-timing-schema.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Visual-mode fields for clip timing. Used by `<Sequence>` and merged into media schemas (e.g. `@remotion/media` `<Video>`).
+ */
+export declare const SEQUENCE_TIMING_SCHEMA: {
+    readonly from: {
+        readonly type: "number";
+        readonly min: 0;
+        readonly step: 1;
+        readonly default: 0;
+        readonly description: "From";
+    };
+    readonly durationInFrames: {
+        readonly type: "number";
+        readonly min: 0.01;
+        readonly step: 0.01;
+        readonly default: undefined;
+        readonly description: "Duration in frames";
+    };
+};

package/dist/cjs/sequence-timing-schema.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SEQUENCE_TIMING_SCHEMA = void 0;
+/**
+ * Visual-mode fields for clip timing. Used by `<Sequence>` and merged into media schemas (e.g. `@remotion/media` `<Video>`).
+ */
+exports.SEQUENCE_TIMING_SCHEMA = {
+    from: {
+        type: 'number',
+        min: 0,
+        step: 1,
+        default: 0,
+        description: 'From',
+    },
+    durationInFrames: {
+        type: 'number',
+        min: 0.01,
+        step: 0.01,
+        default: undefined,
+        description: 'Duration in frames',
+    },
+};

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;

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

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.443';
+exports.VERSION = '4.0.445';

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 });