remotion - npm Package Compare versions

Comparing version 1.4.0-alpha.eb6dead8 to 1.4.0

dist/Composition.js

@@ -45,4 +45,28 @@ "use strict";
         if (!id.match(/^([a-zA-Z0-9-])+$/g)) {
-            throw new Error(`Composition id can only contain a-z, A-Z, 0-9 and -. You passed ${name}`);
+            throw new Error(`Composition id can only contain a-z, A-Z, 0-9 and -. You passed ${id}`);
         }
+        if (typeof width !== 'number') {
+            throw new Error(`The "width" of a composition must be a number, but you passed a ${typeof width}`);
+        }
+        if (width <= 0) {
+            throw new TypeError(`The "width" of a composition must be positive, but got ${width}.`);
+        }
+        if (typeof height !== 'number') {
+            throw new Error(`The "height" of a composition must be a number, but you passed a ${typeof height}`);
+        }
+        if (height <= 0) {
+            throw new TypeError(`The "height" of a composition must be positive, but got ${height}.`);
+        }
+        if (typeof durationInFrames !== 'number') {
+            throw new Error(`The "durationInFrames" of a composition must be a number, but you passed a ${typeof durationInFrames}`);
+        }
+        if (durationInFrames <= 0) {
+            throw new TypeError(`The "durationInFrames" of a composition must be positive, but got ${durationInFrames}.`);
+        }
+        if (typeof fps !== 'number') {
+            throw new Error(`The "fps" of a composition must be a number, but you passed a ${typeof fps}`);
+        }
+        if (fps <= 0) {
+            throw new TypeError(`The "fps" of a composition must be positive, but got ${fps}.`);
+        }
         registerComposition({
@@ -49,0 +73,0 @@ durationInFrames,

dist/config/index.d.ts

@@ -0,5 +1,6 @@
+import { Codec } from './codec';
 import { Concurrency } from './concurrency';
+import { ImageFormat } from './image-format';
 import { WebpackConfiguration, WebpackOverrideFn } from './override-webpack';
 import { PixelFormat } from './pixel-format';
-import { OutputFormat } from './render-mode';
 export declare const Config: {
@@ -27,2 +28,7 @@ readonly Bundling: {
         readonly setQuality: (q: number | undefined) => void;
+        /**
+         * Decide in which image format to render. Can be either 'jpeg' or 'png'.
+         * PNG is slower, but supports transparency.
+         */
+        readonly setImageFormat: (format: "png" | "jpeg") => void;
     };
@@ -40,11 +46,26 @@ readonly Output: {
          */
-        readonly setPixelFormat: (format: "yuv420p" | "yuv422p" | "yuv444p" | "yuv420p10le" | "yuv422p10le" | "yuv444p10le") => void;
+        readonly setPixelFormat: (format: "yuv420p" | "yuva420p" | "yuv422p" | "yuv444p" | "yuv420p10le" | "yuv422p10le" | "yuv444p10le") => void;
         /**
-         * Specify what kind of output you, want, either 'mp4' or 'png-sequence'.
-         * Default: 'mp4'
+         * @deprecated Use setCodec() and setImageSequence() instead.
+         * Specify what kind of output you, either `mp4` or `png-sequence`.
          */
-        readonly setOutputFormat: (newRenderMode: "png-sequence" | "mp4") => void;
+        readonly setOutputFormat: (newLegacyFormat: "mp4" | "png-sequence") => void;
+        /**
+         * Specify the codec for stitching the frames into a video.
+         * Can be `h264` (default), `h265`, `vp8` or `vp9`
+         */
+        readonly setCodec: (newCodec: import("./codec").CodecOrUndefined) => void;
+        /**
+         * Set the Constant Rate Factor to pass to FFMPEG.
+         * Lower values mean better quality, but be aware that the ranges of
+         * possible values greatly differs between codecs.
+         */
+        readonly setCrf: (newCrf: number | undefined) => void;
+        /**
+         * Set to true if don't want a video but an image sequence as the output.
+         */
+        readonly setImageSequence: (newImageSequence: boolean) => void;
     };
 };
-export type { PixelFormat, Concurrency, OutputFormat, WebpackConfiguration, WebpackOverrideFn, };
+export type { PixelFormat, Concurrency, WebpackConfiguration, WebpackOverrideFn, ImageFormat, Codec, };
 //# sourceMappingURL=index.d.ts.map

dist/config/index.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Config = void 0;
+const codec_1 = require("./codec");
 const concurrency_1 = require("./concurrency");
+const crf_1 = require("./crf");
+const image_format_1 = require("./image-format");
+const image_sequence_1 = require("./image-sequence");
 const override_webpack_1 = require("./override-webpack");
@@ -9,3 +13,2 @@ const overwrite_1 = require("./overwrite");
 const quality_1 = require("./quality");
-const render_mode_1 = require("./render-mode");
 exports.Config = {
@@ -33,2 +36,7 @@ Bundling: {
         setQuality: quality_1.setQuality,
+        /**
+         * Decide in which image format to render. Can be either 'jpeg' or 'png'.
+         * PNG is slower, but supports transparency.
+         */
+        setImageFormat: image_format_1.setImageFormat,
     },
@@ -48,8 +56,23 @@ Output: {
         /**
-         * Specify what kind of output you, want, either 'mp4' or 'png-sequence'.
-         * Default: 'mp4'
+         * @deprecated Use setCodec() and setImageSequence() instead.
+         * Specify what kind of output you, either `mp4` or `png-sequence`.
          */
-        setOutputFormat: render_mode_1.setOutputFormat,
+        setOutputFormat: codec_1.setOutputFormat,
+        /**
+         * Specify the codec for stitching the frames into a video.
+         * Can be `h264` (default), `h265`, `vp8` or `vp9`
+         */
+        setCodec: codec_1.setCodec,
+        /**
+         * Set the Constant Rate Factor to pass to FFMPEG.
+         * Lower values mean better quality, but be aware that the ranges of
+         * possible values greatly differs between codecs.
+         */
+        setCrf: crf_1.setCrf,
+        /**
+         * Set to true if don't want a video but an image sequence as the output.
+         */
+        setImageSequence: image_sequence_1.setImageSequence,
     },
 };
 //# sourceMappingURL=index.js.map

dist/config/pixel-format.d.ts

@@ -1,6 +0,9 @@
-declare const validOptions: readonly ["yuv420p", "yuv422p", "yuv444p", "yuv420p10le", "yuv422p10le", "yuv444p10le"];
+import { Codec } from './codec';
+declare const validOptions: readonly ["yuv420p", "yuva420p", "yuv422p", "yuv444p", "yuv420p10le", "yuv422p10le", "yuv444p10le"];
 export declare type PixelFormat = typeof validOptions[number];
+export declare const DEFAULT_PIXEL_FORMAT: PixelFormat;
 export declare const setPixelFormat: (format: PixelFormat) => void;
-export declare const getPixelFormat: () => "yuv420p" | "yuv422p" | "yuv444p" | "yuv420p10le" | "yuv422p10le" | "yuv444p10le";
+export declare const getPixelFormat: () => "yuv420p" | "yuva420p" | "yuv422p" | "yuv444p" | "yuv420p10le" | "yuv422p10le" | "yuv444p10le";
+export declare const validateSelectedPixelFormatAndCodecCombination: (pixelFormat: PixelFormat, codec: Codec) => void;
 export {};
 //# sourceMappingURL=pixel-format.d.ts.map

dist/config/pixel-format.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getPixelFormat = exports.setPixelFormat = void 0;
+exports.validateSelectedPixelFormatAndCodecCombination = exports.getPixelFormat = exports.setPixelFormat = exports.DEFAULT_PIXEL_FORMAT = void 0;
 const validOptions = [
     'yuv420p',
+    'yuva420p',
     'yuv422p',
@@ -12,6 +13,7 @@ 'yuv444p',
 ];
-let currentPixelFormat = 'yuv420p';
+exports.DEFAULT_PIXEL_FORMAT = 'yuv420p';
+let currentPixelFormat = exports.DEFAULT_PIXEL_FORMAT;
 const setPixelFormat = (format) => {
     if (!validOptions.includes(format)) {
-        throw new Error(`Value ${format} is not valid as a pixel format.`);
+        throw new TypeError(`Value ${format} is not valid as a pixel format.`);
     }
@@ -25,2 +27,11 @@ currentPixelFormat = format;
 exports.getPixelFormat = getPixelFormat;
+const validateSelectedPixelFormatAndCodecCombination = (pixelFormat, codec) => {
+    if (pixelFormat !== 'yuva420p') {
+        return;
+    }
+    if (codec !== 'vp8' && codec !== 'vp9') {
+        throw new TypeError("Pixel format was set to 'yuva420p' but codec is not 'vp8' or 'vp8'. To render videos with alpha channel, you must choose a codec that supports it.");
+    }
+};
+exports.validateSelectedPixelFormatAndCodecCombination = validateSelectedPixelFormatAndCodecCombination;
 //# sourceMappingURL=pixel-format.js.map

dist/config/render-mode.d.ts

@@ -1,6 +0,6 @@
-declare const validRenderModes: readonly ["png-sequence", "mp4"];
+declare const validRenderModes: readonly ["png", "mp4", "h264", "h265", "vp8", "vp9"];
 export declare type OutputFormat = typeof validRenderModes[number];
-export declare const getFormat: () => OutputFormat;
+export declare const getOutputFormat: () => OutputFormat;
 export declare const setOutputFormat: (newRenderMode: OutputFormat) => void;
 export {};
 //# sourceMappingURL=render-mode.d.ts.map

dist/config/render-mode.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.setOutputFormat = exports.getFormat = void 0;
-const validRenderModes = ['png-sequence', 'mp4'];
+exports.setOutputFormat = exports.getOutputFormat = void 0;
+const validRenderModes = ['png', 'mp4', 'h264', 'h265', 'vp8', 'vp9'];
 let format = 'mp4';
-const getFormat = () => {
+const getOutputFormat = () => {
     return format;
 };
-exports.getFormat = getFormat;
+exports.getOutputFormat = getOutputFormat;
 const setOutputFormat = (newRenderMode) => {
@@ -11,0 +11,0 @@ if (!validRenderModes.includes(newRenderMode)) {

dist/get-timeline-clip-name.js

@@ -11,3 +11,3 @@ "use strict";
         const root = name ? ('  '.repeat(i) + name) : null;
-        if (ch.props.children) {
+        if (ch === null || ch === void 0 ? void 0 : ch.props.children) {
             const chName = exports.getTimelineClipName(children.props.children, i + 1);
@@ -14,0 +14,0 @@ return [root, chName].filter(Boolean).join('\n');

dist/IFrame.d.ts

 import React from 'react';
-export declare const IFrame: React.ForwardRefExoticComponent<Pick<React.DetailedHTMLProps<React.IframeHTMLAttributes<HTMLIFrameElement>, HTMLIFrameElement>, "width" | "height" | "id" | "slot" | "style" | "title" | "children" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "allow" | "allowFullScreen" | "allowTransparency" | "frameBorder" | "loading" | "marginHeight" | "marginWidth" | "name" | "referrerPolicy" | "sandbox" | "scrolling" | "seamless" | "src" | "srcDoc"> & React.RefAttributes<HTMLIFrameElement>>;
+export declare const IFrame: React.ForwardRefExoticComponent<Pick<React.DetailedHTMLProps<React.IframeHTMLAttributes<HTMLIFrameElement>, HTMLIFrameElement>, "width" | "height" | "id" | "children" | "slot" | "style" | "title" | "onLoad" | "onError" | "key" | "allow" | "allowFullScreen" | "allowTransparency" | "frameBorder" | "loading" | "marginHeight" | "marginWidth" | "name" | "referrerPolicy" | "sandbox" | "scrolling" | "seamless" | "src" | "srcDoc" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoadCapture" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture"> & React.RefAttributes<HTMLIFrameElement>>;
 //# sourceMappingURL=IFrame.d.ts.map

dist/IFrame.js

@@ -7,3 +7,3 @@ "use strict";
 const ready_manager_1 = require("./ready-manager");
-const IFrameRefForwarding = ({ onLoad, ...props }, ref) => {
+const IFrameRefForwarding = ({ onLoad, onError, ...props }, ref) => {
     const [handle] = react_1.useState(() => ready_manager_1.delayRender());
@@ -14,5 +14,14 @@ const didLoad = react_1.useCallback((e) => {
     }, [handle, onLoad]);
-    return jsx_runtime_1.jsx("iframe", Object.assign({}, props, { ref: ref, onLoad: didLoad }), void 0);
+    const didGetError = react_1.useCallback((e) => {
+        ready_manager_1.continueRender(handle);
+        if (onError) {
+            onError(e);
+        }
+        else {
+            console.error('Error loading iframe:', e, 'Handle the event using the onError() prop to make this message disappear.');
+        }
+    }, [handle, onError]);
+    return jsx_runtime_1.jsx("iframe", Object.assign({}, props, { ref: ref, onError: didGetError, onLoad: didLoad }), void 0);
 };
 exports.IFrame = react_1.forwardRef(IFrameRefForwarding);
 //# sourceMappingURL=IFrame.js.map

dist/Img.d.ts

 import React from 'react';
-export declare const Img: React.ForwardRefExoticComponent<Pick<React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "width" | "height" | "id" | "slot" | "style" | "title" | "children" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "loading" | "referrerPolicy" | "src" | "alt" | "crossOrigin" | "decoding" | "sizes" | "srcSet" | "useMap"> & React.RefAttributes<HTMLImageElement>>;
+export declare const Img: React.ForwardRefExoticComponent<Pick<React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "width" | "height" | "id" | "children" | "slot" | "style" | "title" | "onLoad" | "onError" | "key" | "loading" | "referrerPolicy" | "src" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoadCapture" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "alt" | "crossOrigin" | "decoding" | "sizes" | "srcSet" | "useMap"> & React.RefAttributes<HTMLImageElement>>;
 //# sourceMappingURL=Img.d.ts.map

dist/Img.js

@@ -7,3 +7,3 @@ "use strict";
 const ready_manager_1 = require("./ready-manager");
-const ImgRefForwarding = ({ onLoad, ...props }, ref) => {
+const ImgRefForwarding = ({ onLoad, onError, ...props }, ref) => {
     const [handle] = react_1.useState(() => ready_manager_1.delayRender());
@@ -14,5 +14,14 @@ const didLoad = react_1.useCallback((e) => {
     }, [handle, onLoad]);
-    return jsx_runtime_1.jsx("img", Object.assign({}, props, { ref: ref, onLoad: didLoad }), void 0);
+    const didGetError = react_1.useCallback((e) => {
+        ready_manager_1.continueRender(handle);
+        if (onError) {
+            onError(e);
+        }
+        else {
+            console.error('Error loading image:', e, 'Handle the event using the onError() prop to make this message disappear.');
+        }
+    }, [handle, onError]);
+    return jsx_runtime_1.jsx("img", Object.assign({}, props, { ref: ref, onLoad: didLoad, onError: didGetError }), void 0);
 };
 exports.Img = react_1.forwardRef(ImgRefForwarding);
 //# sourceMappingURL=Img.js.map

dist/index.d.ts

@@ -11,2 +11,3 @@ import './asset-types';
 export * from './interpolate';
+export * from './random';
 export * from './ready-manager';
@@ -13,0 +14,0 @@ export { registerRoot } from './register-root';

dist/index.js

@@ -24,2 +24,3 @@ "use strict";
 __exportStar(require("./interpolate"), exports);
+__exportStar(require("./random"), exports);
 __exportStar(require("./ready-manager"), exports);
@@ -26,0 +27,0 @@ var register_root_1 = require("./register-root");

dist/internals.d.ts

@@ -16,10 +16,24 @@ /// <reference types="react" />
     getIsEvaluation: () => boolean;
-    getPixelFormat: () => "yuv420p" | "yuv422p" | "yuv444p" | "yuv420p10le" | "yuv422p10le" | "yuv444p10le";
+    getPixelFormat: () => "yuv420p" | "yuva420p" | "yuv422p" | "yuv444p" | "yuv420p10le" | "yuv422p10le" | "yuv444p10le";
     getConcurrency: () => number | null;
     getShouldOverwrite: () => boolean;
-    getFormat: () => "png-sequence" | "mp4";
+    getOutputCodecOrUndefined: () => import("./config/codec").CodecOrUndefined;
     getWebpackOverrideFn: () => WebpackOverrideFn;
     getQuality: () => number | undefined;
+    getShouldOutputImageSequence: () => boolean;
+    validateSelectedCrfAndCodecCombination: (crf: number, codec: "h264" | "h265" | "vp8" | "vp9") => void;
+    getFinalOutputCodec: ({ codec: inputCodec, fileExtension, emitWarning, }: {
+        codec: import("./config/codec").CodecOrUndefined;
+        fileExtension: string | null;
+        emitWarning: boolean;
+    }) => "h264" | "h265" | "vp8" | "vp9";
+    DEFAULT_CODEC: "h264" | "h265" | "vp8" | "vp9";
+    DEFAULT_PIXEL_FORMAT: "yuv420p" | "yuva420p" | "yuv422p" | "yuv444p" | "yuv420p10le" | "yuv422p10le" | "yuv444p10le";
+    getDefaultCrfForCodec: (codec: "h264" | "h265" | "vp8" | "vp9") => number;
+    getActualCrf: (codec: "h264" | "h265" | "vp8" | "vp9") => number;
+    getUserPreferredImageFormat: () => "png" | "jpeg" | undefined;
+    validateSelectedPixelFormatAndImageFormatCombination: (pixelFormat: "yuv420p" | "yuva420p" | "yuv422p" | "yuv444p" | "yuv420p10le" | "yuv422p10le" | "yuv444p10le", imageFormat: "png" | "jpeg") => void;
+    validateSelectedPixelFormatAndCodecCombination: (pixelFormat: "yuv420p" | "yuva420p" | "yuv422p" | "yuv444p" | "yuv420p10le" | "yuv422p10le" | "yuv444p10le", codec: "h264" | "h265" | "vp8" | "vp9") => void;
 };
 export type { TComposition, Timeline, TCompMetadata, TSequence, WebpackOverrideFn, };
 //# sourceMappingURL=internals.d.ts.map

dist/internals.js

@@ -24,3 +24,7 @@ "use strict";
 const CompositionManager_1 = require("./CompositionManager");
+const codec_1 = require("./config/codec");
 const concurrency_1 = require("./config/concurrency");
+const crf_1 = require("./config/crf");
+const image_format_1 = require("./config/image-format");
+const image_sequence_1 = require("./config/image-sequence");
 const override_webpack_1 = require("./config/override-webpack");
@@ -30,3 +34,2 @@ const overwrite_1 = require("./config/overwrite");
 const quality_1 = require("./config/quality");
-const render_mode_1 = require("./config/render-mode");
 const perf = __importStar(require("./perf"));
@@ -53,6 +56,16 @@ const register_root_1 = require("./register-root");
     getShouldOverwrite: overwrite_1.getShouldOverwrite,
-    getFormat: render_mode_1.getFormat,
+    getOutputCodecOrUndefined: codec_1.getOutputCodecOrUndefined,
     getWebpackOverrideFn: override_webpack_1.getWebpackOverrideFn,
     getQuality: quality_1.getQuality,
+    getShouldOutputImageSequence: image_sequence_1.getShouldOutputImageSequence,
+    validateSelectedCrfAndCodecCombination: crf_1.validateSelectedCrfAndCodecCombination,
+    getFinalOutputCodec: codec_1.getFinalOutputCodec,
+    DEFAULT_CODEC: codec_1.DEFAULT_CODEC,
+    DEFAULT_PIXEL_FORMAT: pixel_format_1.DEFAULT_PIXEL_FORMAT,
+    getDefaultCrfForCodec: crf_1.getDefaultCrfForCodec,
+    getActualCrf: crf_1.getActualCrf,
+    getUserPreferredImageFormat: image_format_1.getUserPreferredImageFormat,
+    validateSelectedPixelFormatAndImageFormatCombination: image_format_1.validateSelectedPixelFormatAndImageFormatCombination,
+    validateSelectedPixelFormatAndCodecCombination: pixel_format_1.validateSelectedPixelFormatAndCodecCombination,
 };
 //# sourceMappingURL=internals.js.map

dist/ready-manager.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.continueRender = exports.delayRender = void 0;
-const register_root_1 = require("./register-root");
 if (typeof window !== 'undefined') {
@@ -11,6 +10,2 @@ window.ready = false;
     const handle = Math.random();
-    if (register_root_1.getIsEvaluation()) {
-        // Don't wait while statically determining the composition list
-        return handle;
-    }
     handles.push(handle);
@@ -17,0 +12,0 @@ if (typeof window !== 'undefined') {

dist/sequencing/index.d.ts

@@ -9,7 +9,9 @@ import React from 'react';
 export declare const Sequence: React.FC<{
+    children: React.ReactNode;
     from: number;
     durationInFrames: number;
     name?: string;
+    layout?: 'absolute-fill' | 'none';
 }>;
 export {};
 //# sourceMappingURL=index.d.ts.map

dist/sequencing/index.js

@@ -10,3 +10,3 @@ "use strict";
 exports.SequenceContext = react_1.createContext(null);
-const Sequence = ({ from, durationInFrames: duration, children, name }) => {
+const Sequence = ({ from, durationInFrames, children, name, layout = 'absolute-fill' }) => {
     var _a;
@@ -18,9 +18,21 @@ const [id] = react_1.useState(() => String(Math.random()));
     const { registerSequence, unregisterSequence } = react_1.useContext(CompositionManager_1.CompositionManager);
+    if (layout !== 'absolute-fill' && layout !== 'none') {
+        throw new TypeError(`The layout prop of <Composition /> expects either "absolute-fill" or "none", but you passed: ${layout}`);
+    }
+    if (typeof durationInFrames !== 'number') {
+        throw new TypeError(`You passed to durationInFrames an argument of type ${typeof durationInFrames}, but it must be a number.`);
+    }
+    if (durationInFrames <= 0) {
+        throw new TypeError(`durationInFrames must be positive, but got ${durationInFrames}`);
+    }
+    if (typeof from !== 'number') {
+        throw new TypeError(`You passed to the "from" props of your <Sequence> an argument of type ${typeof from}, but it must be a number.`);
+    }
     const contextValue = react_1.useMemo(() => {
         return {
             from: actualFrom,
-            durationInFrames: duration,
+            durationInFrames,
             id,
         };
-    }, [actualFrom, duration, id]);
+    }, [actualFrom, durationInFrames, id]);
     const timelineClipName = react_1.useMemo(() => {
@@ -33,3 +45,3 @@ return name !== null && name !== void 0 ? name : get_timeline_clip_name_1.getTimelineClipName(children);
             from: actualFrom,
-            duration,
+            duration: durationInFrames,
             id,
@@ -43,3 +55,3 @@ displayName: timelineClipName,
     }, [
-        duration,
+        durationInFrames,
         actualFrom,
@@ -53,3 +65,8 @@ id,
     ]);
-    return (jsx_runtime_1.jsx(exports.SequenceContext.Provider, Object.assign({ value: contextValue }, { children: jsx_runtime_1.jsx("div", Object.assign({ style: {
+    const content = absoluteFrame < actualFrom
+        ? null
+        : absoluteFrame > actualFrom + durationInFrames
+            ? null
+            : children;
+    return (jsx_runtime_1.jsx(exports.SequenceContext.Provider, Object.assign({ value: contextValue }, { children: layout === 'absolute-fill' ? (jsx_runtime_1.jsx("div", Object.assign({ style: {
                 position: 'absolute',
@@ -63,9 +80,5 @@ display: 'flex',
                 right: 0,
-            } }, { children: absoluteFrame < actualFrom
-                ? null
-                : absoluteFrame > actualFrom + duration
-                    ? null
-                    : children }), void 0) }), void 0));
+            } }, { children: content }), void 0)) : (content) }), void 0));
 };
 exports.Sequence = Sequence;
 //# sourceMappingURL=index.js.map

dist/use-video-config.js

@@ -6,5 +6,9 @@ "use strict";
 const useVideoConfig = () => {
-    return use_unsafe_video_config_1.useUnsafeVideoConfig();
+    const videoConfig = use_unsafe_video_config_1.useUnsafeVideoConfig();
+    if (!videoConfig) {
+        throw new Error('No video config found. You are probably calling useVideoConfig() from a component which has not been registered as a <Composition />. See https://www.remotion.dev/docs/the-fundamentals#defining-compositions for more information.');
+    }
+    return videoConfig;
 };
 exports.useVideoConfig = useVideoConfig;
 //# sourceMappingURL=use-video-config.js.map

dist/video/VideoForRendering.js

@@ -9,9 +9,4 @@ "use strict";
 const use_unsafe_video_config_1 = require("../use-unsafe-video-config");
-const VideoForRendering = (props) => {
-    const [metadataLoaded, setMetadataLoaded] = react_1.useState(false);
-    const [currentFrameSet, setCurrentFrameSet] = react_1.useState(false);
-    const [handle] = react_1.useState(() => {
-        return ready_manager_1.delayRender();
-    });
-    const currentFrame = use_frame_1.useCurrentFrame();
+const VideoForRendering = ({ onError, ...props }) => {
+    const frame = use_frame_1.useCurrentFrame();
     const videoConfig = use_unsafe_video_config_1.useUnsafeVideoConfig();
@@ -22,10 +17,14 @@ const videoRef = react_1.useRef(null);
     }
-    const frameInSeconds = react_1.useMemo(() => currentFrame / videoConfig.fps, [
-        currentFrame,
-        videoConfig.fps,
-    ]);
-    const setFrame = react_1.useCallback(() => {
+    react_1.useEffect(() => {
         if (!videoRef.current) {
             return;
         }
+        const frameInSeconds = frame / videoConfig.fps;
+        const handle = ready_manager_1.delayRender();
+        if (videoRef.current.currentTime === frameInSeconds) {
+            videoRef.current.addEventListener('loadeddata', () => {
+                ready_manager_1.continueRender(handle);
+            }, { once: true });
+            return;
+        }
         videoRef.current.currentTime = frameInSeconds;
@@ -35,46 +34,7 @@ videoRef.current.addEventListener('seeked', () => {
         }, { once: true });
-        setInterval(() => {
-            setCurrentFrameSet(true);
-        }, 0);
-    }, [frameInSeconds, handle]);
-    const onMetadataLoad = react_1.useCallback(() => {
-        setMetadataLoaded(true);
-    }, []);
-    react_1.useEffect(() => {
-        if (metadataLoaded) {
-            setFrame();
-        }
-    }, [metadataLoaded, currentFrameSet, setFrame]);
-    react_1.useEffect(() => {
-        if (!videoRef.current) {
-            return;
-        }
-        if (metadataLoaded) {
-            setFrame();
-            return;
-        }
-        const { current } = videoRef;
-        current.addEventListener('loadedmetadata', onMetadataLoad);
-        return () => {
-            current.removeEventListener('loadedmetadata', onMetadataLoad);
-        };
-    }, [currentFrame, metadataLoaded, onMetadataLoad, setFrame, videoConfig.fps]);
-    const onSetReadyState = react_1.useCallback(() => {
-        if (!videoRef.current) {
-            throw Error('No video ref');
-        }
-        if (videoRef.current.readyState === 4) {
-            setFrame();
-        }
-    }, [setFrame]);
-    react_1.useEffect(() => {
-        if (!videoRef.current) {
-            return;
-        }
-        const { current } = videoRef;
-        current.addEventListener('loadeddata', onSetReadyState);
-        return () => {
-            current.removeEventListener('loadeddata', onSetReadyState);
-        };
-    });
+        videoRef.current.addEventListener('error', (err) => {
+            console.error('Error occurred in video', err);
+            ready_manager_1.continueRender(handle);
+        }, { once: true });
+    }, [frame, videoConfig.fps]);
     return jsx_runtime_1.jsx("video", Object.assign({ ref: videoRef }, props), void 0);
@@ -81,0 +41,0 @@ };

package.json

 {
 	"name": "remotion",
-	"version": "1.4.0-alpha.eb6dead8",
+	"version": "1.4.0",
 	"description": "Render videos in React",
 	"main": "dist/index.js",
 	"scripts": {
-		"test": "eslint 'src' --ext ts,tsx && jest",
+		"test": "eslint src --ext ts,tsx && jest",
 		"build": "tsc -d",
@@ -9,0 +9,0 @@ "prerelease": "cp ../../README.md ."

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

181262

increased by25.18%

Number of package files

218

increased by17.2%

Lines of code

2230

increased by23.75%

Number of low quality alerts

1

decreased by-50%

No dependency changes