remotion 4.0.176 → 4.0.178

package/dist/cjs/Composition.js

@@ -12,6 +12,7 @@ const NativeLayers_js_1 = require("./NativeLayers.js");
 const ResolveCompositionConfig_js_1 = require("./ResolveCompositionConfig.js");
 const delay_render_js_1 = require("./delay-render.js");
 const get_remotion_environment_js_1 = require("./get-remotion-environment.js");
+const input_props_serialization_js_1 = require("./input-props-serialization.js");
 const is_player_js_1 = require("./is-player.js");
 const loading_indicator_js_1 = require("./loading-indicator.js");
 const nonce_js_1 = require("./nonce.js");
@@ -78,7 +79,7 @@ const Composition = ({ width, height, fps, durationInFrames, id, defaultProps, s
             id,
             folderName,
             component: lazy,
-            defaultProps: defaultProps,
+            defaultProps: (0, input_props_serialization_js_1.serializeThenDeserializeInStudio)((defaultProps !== null && defaultProps !== void 0 ? defaultProps : {})),
             nonce,
             parentFolderName: parentName,
             schema: schema !== null && schema !== void 0 ? schema : null,

package/dist/cjs/ResolveCompositionConfig.js

@@ -56,7 +56,7 @@ const ResolveCompositionConfig = ({ children }) => {
             return controller;
         }
         const { signal } = controller;
-        const promOrNot = (0, resolve_video_config_js_1.resolveVideoConfig)({
+        const result = (0, resolve_video_config_js_1.resolveVideoConfigOrCatch)({
             compositionId,
             calculateMetadata,
             originalProps: combinedProps,
@@ -67,6 +67,17 @@ const ResolveCompositionConfig = ({ children }) => {
             compositionHeight,
             compositionWidth,
         });
+        if (result.type === 'error') {
+            setResolvedConfigs((r) => ({
+                ...r,
+                [compositionId]: {
+                    type: 'error',
+                    error: result.error,
+                },
+            }));
+            return controller;
+        }
+        const promOrNot = result.result;
         if (typeof promOrNot === 'object' && 'then' in promOrNot) {
             setResolvedConfigs((r) => {
                 const prev = r[compositionId];

package/dist/cjs/buffer-until-first-frame.d.ts

@@ -1,7 +1,8 @@
-export declare const useBufferUntilFirstFrame: ({ mediaRef, mediaType, }: {
+export declare const useBufferUntilFirstFrame: ({ mediaRef, mediaType, onVariableFpsVideoDetected, }: {
     mediaRef: React.RefObject<HTMLVideoElement | HTMLAudioElement>;
     mediaType: 'video' | 'audio';
+    onVariableFpsVideoDetected: () => void;
 }) => {
     isBuffering: () => boolean;
-    bufferUntilFirstFrame: () => void;
+    bufferUntilFirstFrame: (requestedTime: number) => void;
 };

package/dist/cjs/buffer-until-first-frame.js

@@ -3,10 +3,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useBufferUntilFirstFrame = void 0;
 const react_1 = require("react");
 const use_buffer_state_1 = require("./use-buffer-state");
-const useBufferUntilFirstFrame = ({ mediaRef, mediaType, }) => {
+const useBufferUntilFirstFrame = ({ mediaRef, mediaType, onVariableFpsVideoDetected, }) => {
     const bufferingRef = (0, react_1.useRef)(false);
     const { delayPlayback } = (0, use_buffer_state_1.useBufferState)();
-    const bufferUntilFirstFrame = (0, react_1.useCallback)(() => {
+    const bufferUntilFirstFrame = (0, react_1.useCallback)((requestedTime) => {
         if (mediaType !== 'video') {
             return;
         }
@@ -34,7 +34,11 @@ const useBufferUntilFirstFrame = ({ mediaRef, mediaType, }) => {
         const onEndedOrPause = () => {
             unblock();
         };
-        current.requestVideoFrameCallback(() => {
+        current.requestVideoFrameCallback((_, info) => {
+            const differenceFromRequested = Math.abs(info.mediaTime - requestedTime);
+            if (differenceFromRequested > 0.5) {
+                onVariableFpsVideoDetected();
+            }
             // Safari often seeks and then stalls.
             // This makes sure that the video actually starts playing.
             current.requestVideoFrameCallback(() => {
@@ -43,7 +47,7 @@ const useBufferUntilFirstFrame = ({ mediaRef, mediaType, }) => {
         });
         current.addEventListener('ended', onEndedOrPause, { once: true });
         current.addEventListener('pause', onEndedOrPause, { once: true });
-    }, [delayPlayback, mediaRef, mediaType]);
+    }, [delayPlayback, mediaRef, mediaType, onVariableFpsVideoDetected]);
     return (0, react_1.useMemo)(() => {
         return {
             isBuffering: () => bufferingRef.current,

package/dist/cjs/input-props-serialization.d.ts

@@ -13,3 +13,4 @@ export declare const serializeJSONWithDate: ({ data, indent, staticBase, }: {
     staticBase: string | null;
 }) => SerializedJSONWithCustomFields;
 export declare const deserializeJSONWithCustomFields: <T = Record<string, unknown>>(data: string) => T;
+export declare const serializeThenDeserializeInStudio: (props: Record<string, unknown>) => Record<string, unknown>;

package/dist/cjs/input-props-serialization.js

@@ -1,7 +1,8 @@
 "use strict";
 // Must keep this file in sync with the one in packages/lambda/src/shared/serialize-props.ts!
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.deserializeJSONWithCustomFields = exports.serializeJSONWithDate = exports.FILE_TOKEN = exports.DATE_TOKEN = void 0;
+exports.serializeThenDeserializeInStudio = exports.deserializeJSONWithCustomFields = exports.serializeJSONWithDate = exports.FILE_TOKEN = exports.DATE_TOKEN = void 0;
+const get_remotion_environment_js_1 = require("./get-remotion-environment.js");
 const static_file_js_1 = require("./static-file.js");
 exports.DATE_TOKEN = 'remotion-date:';
 exports.FILE_TOKEN = 'remotion-file:';
@@ -10,29 +11,35 @@ const serializeJSONWithDate = ({ data, indent, staticBase, }) => {
     let customFileUsed = false;
     let mapUsed = false;
     let setUsed = false;
-    const serializedString = JSON.stringify(data, function (key, value) {
-        const item = this[key];
-        if (item instanceof Date) {
-            customDateUsed = true;
-            return `${exports.DATE_TOKEN}${item.toISOString()}`;
-        }
-        if (item instanceof Map) {
-            mapUsed = true;
-            return value;
-        }
-        if (item instanceof Set) {
-            setUsed = true;
+    try {
+        const serializedString = JSON.stringify(data, function (key, value) {
+            const item = this[key];
+            if (item instanceof Date) {
+                customDateUsed = true;
+                return `${exports.DATE_TOKEN}${item.toISOString()}`;
+            }
+            if (item instanceof Map) {
+                mapUsed = true;
+                return value;
+            }
+            if (item instanceof Set) {
+                setUsed = true;
+                return value;
+            }
+            if (typeof item === 'string' &&
+                staticBase !== null &&
+                item.startsWith(staticBase)) {
+                customFileUsed = true;
+                return `${exports.FILE_TOKEN}${item.replace(staticBase + '/', '')}`;
+            }
             return value;
-        }
-        if (typeof item === 'string' &&
-            staticBase !== null &&
-            item.startsWith(staticBase)) {
-            customFileUsed = true;
-            return `${exports.FILE_TOKEN}${item.replace(staticBase + '/', '')}`;
-        }
-        return value;
-    }, indent);
-    return { serializedString, customDateUsed, customFileUsed, mapUsed, setUsed };
+        }, indent);
+        return { serializedString, customDateUsed, customFileUsed, mapUsed, setUsed };
+    }
+    catch (err) {
+        throw new Error('Could not serialize the passed input props to JSON: ' +
+            err.message);
+    }
 };
 exports.serializeJSONWithDate = serializeJSONWithDate;
 const deserializeJSONWithCustomFields = (data) => {
@@ -47,3 +54,16 @@ const deserializeJSONWithCustomFields = (data) => {
     });
 };
 exports.deserializeJSONWithCustomFields = deserializeJSONWithCustomFields;
+const serializeThenDeserializeInStudio = (props) => {
+    // Serializing once in the Studio, to catch potential serialization errors before
+    // you only get them during rendering
+    if ((0, get_remotion_environment_js_1.getRemotionEnvironment)().isStudio) {
+        return (0, exports.deserializeJSONWithCustomFields)((0, exports.serializeJSONWithDate)({
+            data: props,
+            indent: 2,
+            staticBase: window.remotion_staticBase,
+        }).serializedString);
+    }
+    return props;
+};
+exports.serializeThenDeserializeInStudio = serializeThenDeserializeInStudio;

package/dist/cjs/resolve-video-config.d.ts

@@ -2,7 +2,7 @@ import type { AnyZodObject } from 'zod';
 import type { CalculateMetadataFunction } from './Composition.js';
 import type { InferProps } from './props-if-has-props.js';
 import type { VideoConfig } from './video-config.js';
-export declare const resolveVideoConfig: ({ calculateMetadata, signal, defaultProps, originalProps, compositionId, compositionDurationInFrames, compositionFps, compositionHeight, compositionWidth, }: {
+type ResolveVideoConfigParams = {
     compositionId: string;
     compositionWidth: number | null;
     compositionHeight: number | null;
@@ -12,4 +12,13 @@ export declare const resolveVideoConfig: ({ calculateMetadata, signal, defaultPr
     signal: AbortSignal;
     defaultProps: Record<string, unknown>;
     originalProps: Record<string, unknown>;
-}) => VideoConfig | Promise<VideoConfig>;
+};
+export declare const resolveVideoConfig: ({ calculateMetadata, signal, defaultProps, originalProps, compositionId, compositionDurationInFrames, compositionFps, compositionHeight, compositionWidth, }: ResolveVideoConfigParams) => VideoConfig | Promise<VideoConfig>;
+export declare const resolveVideoConfigOrCatch: (params: ResolveVideoConfigParams) => {
+    type: 'success';
+    result: VideoConfig | Promise<VideoConfig>;
+} | {
+    type: 'error';
+    error: Error;
+};
+export {};

package/dist/cjs/resolve-video-config.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.resolveVideoConfig = void 0;
+exports.resolveVideoConfigOrCatch = exports.resolveVideoConfig = void 0;
+const input_props_serialization_js_1 = require("./input-props-serialization.js");
 const validate_default_codec_js_1 = require("./validation/validate-default-codec.js");
 const validate_dimensions_js_1 = require("./validation/validate-dimensions.js");
 const validate_duration_in_frames_js_1 = require("./validation/validate-duration-in-frames.js");
@@ -53,8 +54,8 @@ const resolveVideoConfig = ({ calculateMetadata, signal, defaultProps, originalP
                 fps,
                 durationInFrames,
                 id: compositionId,
-                defaultProps,
-                props: (_a = c.props) !== null && _a !== void 0 ? _a : originalProps,
+                defaultProps: (0, input_props_serialization_js_1.serializeThenDeserializeInStudio)(defaultProps),
+                props: (0, input_props_serialization_js_1.serializeThenDeserializeInStudio)((_a = c.props) !== null && _a !== void 0 ? _a : originalProps),
                 defaultCodec: defaultCodec !== null && defaultCodec !== void 0 ? defaultCodec : null,
             };
         });
@@ -71,17 +72,33 @@ const resolveVideoConfig = ({ calculateMetadata, signal, defaultProps, originalP
         return {
             ...data,
             id: compositionId,
-            defaultProps: defaultProps !== null && defaultProps !== void 0 ? defaultProps : {},
-            props: originalProps,
+            defaultProps: (0, input_props_serialization_js_1.serializeThenDeserializeInStudio)(defaultProps !== null && defaultProps !== void 0 ? defaultProps : {}),
+            props: (0, input_props_serialization_js_1.serializeThenDeserializeInStudio)(originalProps),
             defaultCodec: null,
         };
     }
     return {
         ...data,
         id: compositionId,
-        defaultProps: defaultProps !== null && defaultProps !== void 0 ? defaultProps : {},
-        props: (_a = calculatedProm.props) !== null && _a !== void 0 ? _a : originalProps,
+        defaultProps: (0, input_props_serialization_js_1.serializeThenDeserializeInStudio)(defaultProps !== null && defaultProps !== void 0 ? defaultProps : {}),
+        props: (0, input_props_serialization_js_1.serializeThenDeserializeInStudio)((_a = calculatedProm.props) !== null && _a !== void 0 ? _a : originalProps),
         defaultCodec: (_b = calculatedProm.defaultCodec) !== null && _b !== void 0 ? _b : null,
     };
 };
 exports.resolveVideoConfig = resolveVideoConfig;
+const resolveVideoConfigOrCatch = (params) => {
+    try {
+        const promiseOrReturnValue = (0, exports.resolveVideoConfig)(params);
+        return {
+            type: 'success',
+            result: promiseOrReturnValue,
+        };
+    }
+    catch (err) {
+        return {
+            type: 'error',
+            error: err,
+        };
+    }
+};
+exports.resolveVideoConfigOrCatch = resolveVideoConfigOrCatch;

package/dist/cjs/use-lazy-component.js

@@ -28,7 +28,8 @@ const react_1 = __importStar(require("react"));
 // Expected, it can be any component props
 const useLazyComponent = (compProps) => {
     const lazy = (0, react_1.useMemo)(() => {
-        if ('lazyComponent' in compProps) {
+        if ('lazyComponent' in compProps &&
+            typeof compProps.lazyComponent !== 'undefined') {
             return react_1.default.lazy(compProps.lazyComponent);
         }
         if ('component' in compProps) {

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

@@ -31,6 +31,7 @@ const useMediaPlayback = ({ mediaRef, src, mediaType, playbackRate: localPlaybac
     const buffering = (0, react_1.useContext)(buffering_js_1.BufferingContextReact);
     const { fps } = (0, use_video_config_js_1.useVideoConfig)();
     const mediaStartsAt = (0, use_audio_frame_js_1.useMediaStartsAt)();
+    const lastSeekDueToShift = (0, react_1.useRef)(null);
     if (!buffering) {
         throw new Error('useMediaPlayback must be used inside a <BufferingContext>');
     }
@@ -46,9 +47,21 @@ const useMediaPlayback = ({ mediaRef, src, mediaType, playbackRate: localPlaybac
         shouldBuffer: pauseWhenBuffering,
         isPremounting,
     });
+    const isVariableFpsVideoMap = (0, react_1.useRef)({});
+    const onVariableFpsVideoDetected = (0, react_1.useCallback)(() => {
+        if (!src) {
+            return;
+        }
+        if (debugSeeking) {
+            // eslint-disable-next-line no-console
+            console.log(`Detected ${src} as a variable FPS video. Disabling buffering while seeking.`);
+        }
+        isVariableFpsVideoMap.current[src] = true;
+    }, [debugSeeking, src]);
     const { bufferUntilFirstFrame, isBuffering } = (0, buffer_until_first_frame_js_1.useBufferUntilFirstFrame)({
         mediaRef,
         mediaType,
+        onVariableFpsVideoDetected,
     });
     const playbackRate = localPlaybackRate * globalPlaybackRate;
     // For short audio, a lower acceptable time shift is used
@@ -94,31 +107,42 @@ const useMediaPlayback = ({ mediaRef, src, mediaType, playbackRate: localPlaybac
         const shouldBeTime = !Number.isNaN(duration) && Number.isFinite(duration)
             ? Math.min(duration, desiredUnclampedTime)
             : desiredUnclampedTime;
-        const isTime = mediaRef.current.currentTime;
+        const mediaTagTime = mediaRef.current.currentTime;
         const rvcTime = (_a = currentTime.current) !== null && _a !== void 0 ? _a : null;
-        const timeShiftMediaTag = Math.abs(shouldBeTime - isTime);
+        const isVariableFpsVideo = isVariableFpsVideoMap.current[src];
+        const timeShiftMediaTag = Math.abs(shouldBeTime - mediaTagTime);
         const timeShiftRvcTag = rvcTime ? Math.abs(shouldBeTime - rvcTime) : null;
-        const timeShift = timeShiftRvcTag ? timeShiftRvcTag : timeShiftMediaTag;
+        const timeShift = timeShiftRvcTag && !isVariableFpsVideo
+            ? timeShiftRvcTag
+            : timeShiftMediaTag;
         if (debugSeeking) {
             // eslint-disable-next-line no-console
             console.log({
-                isTime,
+                mediaTagTime,
                 rvcTime,
                 shouldBeTime,
                 state: mediaRef.current.readyState,
                 playing: !mediaRef.current.paused,
+                isVariableFpsVideo,
             });
         }
-        if (timeShift > acceptableTimeShiftButLessThanDuration) {
+        if (timeShift > acceptableTimeShiftButLessThanDuration &&
+            lastSeekDueToShift.current !== shouldBeTime) {
             // If scrubbing around, adjust timing
             // or if time shift is bigger than 0.45sec
             if (debugSeeking) {
                 // eslint-disable-next-line no-console
-                console.log('Seeking', { shouldBeTime, isTime, rvcTime, timeShift });
+                console.log('Seeking', {
+                    shouldBeTime,
+                    isTime: mediaTagTime,
+                    rvcTime,
+                    timeShift,
+                });
             }
             seek(mediaRef, shouldBeTime);
-            if (playing) {
-                bufferUntilFirstFrame();
+            lastSeekDueToShift.current = shouldBeTime;
+            if (playing && !isVariableFpsVideo) {
+                bufferUntilFirstFrame(shouldBeTime);
                 if (mediaRef.current.paused) {
                     (0, play_and_handle_not_allowed_error_js_1.playAndHandleNotAllowedError)(mediaRef, mediaType);
                 }
@@ -150,7 +174,9 @@ const useMediaPlayback = ({ mediaRef, src, mediaType, playbackRate: localPlaybac
                 seek(mediaRef, shouldBeTime);
             }
             (0, play_and_handle_not_allowed_error_js_1.playAndHandleNotAllowedError)(mediaRef, mediaType);
-            bufferUntilFirstFrame();
+            if (!isVariableFpsVideo) {
+                bufferUntilFirstFrame(shouldBeTime);
+            }
         }
     }, [
         absoluteFrame,

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

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.176';
+exports.VERSION = '4.0.178';

package/dist/cjs/video/OffthreadVideoForRendering.js

@@ -102,9 +102,9 @@ const OffthreadVideoForRendering = ({ onError, volume: volumeProp, playbackRate,
             toneMapped,
         });
     }, [toneMapped, currentTime, src, transparent]);
-    const onErr = (0, react_1.useCallback)((e) => {
+    const onErr = (0, react_1.useCallback)(() => {
         if (onError) {
-            onError === null || onError === void 0 ? void 0 : onError(e);
+            onError === null || onError === void 0 ? void 0 : onError(new Error('Failed to load image with src ' + actualSrc));
         }
         else {
             (0, cancel_render_js_1.cancelRender)('Failed to load image with src ' + actualSrc);

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

@@ -4,7 +4,7 @@ import type { RemotionMainVideoProps } from './props';
  * @description allows you to include a video file in your Remotion project. It wraps the native HTMLVideoElement.
  * @see [Documentation](https://www.remotion.dev/docs/video)
  */
-export declare const Video: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.VideoHTMLAttributes<HTMLVideoElement>, HTMLVideoElement>, "nonce" | "onEnded" | "autoPlay" | "controls"> & {
+export declare const Video: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.VideoHTMLAttributes<HTMLVideoElement>, HTMLVideoElement>, "nonce" | "onError" | "onEnded" | "autoPlay" | "controls"> & {
     name?: string | undefined;
     volume?: import("../volume-prop.js").VolumeProp | undefined;
     playbackRate?: number | undefined;
@@ -16,6 +16,7 @@ export declare const Video: React.ForwardRefExoticComponent<Omit<Omit<React.Deta
     delayRenderTimeoutInMilliseconds?: number | undefined;
     loopVolumeCurveBehavior?: import("../audio/use-audio-frame.js").LoopVolumeCurveBehavior | undefined;
     delayRenderRetries?: number | undefined;
+    onError?: ((err: Error) => void) | undefined;
 } & RemotionMainVideoProps & {
     /**
      * @deprecated For internal use only

package/dist/cjs/video/VideoForPreview.js

@@ -19,7 +19,7 @@ const VideoForDevelopmentRefForwardingFunction = (props, ref) => {
     const videoRef = (0, react_1.useRef)(null);
     const { volume, muted, playbackRate, onlyWarnForMediaSeekingError, src, onDuration, 
     // @ts-expect-error
-    acceptableTimeShift, acceptableTimeShiftInSeconds, toneFrequency, name, _remotionInternalNativeLoopPassed, _remotionInternalStack, _remotionDebugSeeking, style, pauseWhenBuffering, showInTimeline, loopVolumeCurveBehavior, ...nativeProps } = props;
+    acceptableTimeShift, acceptableTimeShiftInSeconds, toneFrequency, name, _remotionInternalNativeLoopPassed, _remotionInternalStack, _remotionDebugSeeking, style, pauseWhenBuffering, showInTimeline, loopVolumeCurveBehavior, onError, ...nativeProps } = props;
     const volumePropFrame = (0, use_audio_frame_js_1.useFrameForVolumeProp)(loopVolumeCurveBehavior !== null && loopVolumeCurveBehavior !== void 0 ? loopVolumeCurveBehavior : 'repeat');
     const { fps, durationInFrames } = (0, use_video_config_js_1.useVideoConfig)();
     const parentSequence = (0, react_1.useContext)(SequenceContext_js_1.SequenceContext);
@@ -83,24 +83,32 @@ const VideoForDevelopmentRefForwardingFunction = (props, ref) => {
         }
         const errorHandler = () => {
             var _a;
-            if (current === null || current === void 0 ? void 0 : current.error) {
+            if (current.error) {
                 // eslint-disable-next-line no-console
                 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 (props.onError) {
+                if (onError) {
+                    const err = new Error(`Code ${current.error.code}: ${current.error.message}`);
+                    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.`);
             }
             else {
-                throw new Error('The browser threw an error');
+                // 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}`);
+                    onError(err);
+                    return;
+                }
+                throw new Error('The browser threw an error while playing the video');
             }
         };
         current.addEventListener('error', errorHandler, { once: true });
         return () => {
             current.removeEventListener('error', errorHandler);
         };
-    }, [props.onError, src]);
+    }, [onError, src]);
     const currentOnDurationCallback = (0, react_1.useRef)();
     currentOnDurationCallback.current = onDuration;
     (0, react_1.useEffect)(() => {

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

@@ -1,6 +1,6 @@
 import type { ForwardRefExoticComponent, RefAttributes } from 'react';
 import React from 'react';
-export declare const VideoForRendering: ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.VideoHTMLAttributes<HTMLVideoElement>, HTMLVideoElement>, "nonce" | "onEnded" | "autoPlay" | "controls"> & {
+export declare const VideoForRendering: ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.VideoHTMLAttributes<HTMLVideoElement>, HTMLVideoElement>, "nonce" | "onError" | "onEnded" | "autoPlay" | "controls"> & {
     name?: string | undefined;
     volume?: import("../volume-prop.js").VolumeProp | undefined;
     playbackRate?: number | undefined;
@@ -12,6 +12,7 @@ export declare const VideoForRendering: ForwardRefExoticComponent<Omit<React.Det
     delayRenderTimeoutInMilliseconds?: number | undefined;
     loopVolumeCurveBehavior?: import("../audio/use-audio-frame.js").LoopVolumeCurveBehavior | undefined;
     delayRenderRetries?: number | undefined;
+    onError?: ((err: Error) => void) | undefined;
 } & {
     readonly onDuration: (src: string, durationInSeconds: number) => void;
 } & RefAttributes<HTMLVideoElement>>;

package/dist/cjs/video/VideoForRendering.js

@@ -203,6 +203,6 @@ const VideoForRenderingForwardFunction = ({ onError, volume: volumeProp, allowAm
             };
         }, [src, onDuration, delayRenderRetries, delayRenderTimeoutInMilliseconds]);
     }
-    return (0, jsx_runtime_1.jsx)("video", { ref: videoRef, ...props, onError: onError });
+    return (0, jsx_runtime_1.jsx)("video", { ref: videoRef, ...props });
 };
 exports.VideoForRendering = (0, react_1.forwardRef)(VideoForRenderingForwardFunction);

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

@@ -10,7 +10,7 @@ export type RemotionMainVideoProps = {
     _remotionInternalNativeLoopPassed?: boolean;
     _remotionDebugSeeking?: boolean;
 };
-export type RemotionVideoProps = Omit<React.DetailedHTMLProps<React.VideoHTMLAttributes<HTMLVideoElement>, HTMLVideoElement>, 'autoPlay' | 'controls' | 'onEnded' | 'nonce'> & {
+export type RemotionVideoProps = Omit<React.DetailedHTMLProps<React.VideoHTMLAttributes<HTMLVideoElement>, HTMLVideoElement>, 'autoPlay' | 'controls' | 'onEnded' | 'nonce' | 'onError'> & {
     name?: string;
     volume?: VolumeProp;
     playbackRate?: number;
@@ -22,6 +22,7 @@ export type RemotionVideoProps = Omit<React.DetailedHTMLProps<React.VideoHTMLAtt
     delayRenderTimeoutInMilliseconds?: number;
     loopVolumeCurveBehavior?: LoopVolumeCurveBehavior;
     delayRenderRetries?: number;
+    onError?: (err: Error) => void;
 };
 type DeprecatedOffthreadVideoProps = {
     /**
@@ -38,7 +39,7 @@ export type OffthreadVideoProps = {
     volume?: VolumeProp;
     playbackRate?: number;
     muted?: boolean;
-    onError?: React.ReactEventHandler<HTMLVideoElement | HTMLImageElement>;
+    onError?: (err: Error) => void;
     acceptableTimeShiftInSeconds?: number;
     allowAmplificationDuringRender?: boolean;
     toneFrequency?: number;
@@ -47,6 +48,7 @@ export type OffthreadVideoProps = {
     pauseWhenBuffering?: boolean;
     loopVolumeCurveBehavior?: LoopVolumeCurveBehavior;
     delayRenderTimeoutInMilliseconds?: number;
+    delayRenderRetries?: number;
     /**
      * @deprecated For internal use only
      */