remotion - npm Package Compare versions

Comparing version 2.1.0-alpha.ea6b0d4e to 2.1.0

dist/AbsoluteFill.js

@@ -6,3 +6,3 @@ "use strict";
 const react_1 = require("react");
-const AbsoluteFill = (props) => {
+const AbsoluteFill = props => {
     const { style, ...other } = props;
@@ -9,0 +9,0 @@ const actualStyle = react_1.useMemo(() => {

dist/audio/Audio.d.ts

 import React from 'react';
-import { RemotionAudioProps, RemotionMainAudioProps } from './props';
-export declare const Audio: React.FC<RemotionAudioProps & RemotionMainAudioProps>;
+import { RemotionMainAudioProps } from './props';
+export declare const Audio: React.ForwardRefExoticComponent<Pick<Omit<React.DetailedHTMLProps<React.AudioHTMLAttributes<HTMLAudioElement>, HTMLAudioElement>, "autoplay" | "controls" | "loop"> & {
+    volume?: import("../volume-prop").VolumeProp | undefined;
+} & RemotionMainAudioProps, "key" | "playsInline" | "autoPlay" | "controlsList" | "crossOrigin" | "mediaGroup" | "muted" | "preload" | "src" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "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" | "children" | "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" | "volume" | keyof RemotionMainAudioProps> & React.RefAttributes<HTMLAudioElement>>;
 //# sourceMappingURL=Audio.d.ts.map

dist/audio/Audio.js

@@ -5,2 +5,3 @@ "use strict";
 const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const sequencing_1 = require("../sequencing");
@@ -11,4 +12,7 @@ const validate_media_props_1 = require("../validate-media-props");
 const AudioForRendering_1 = require("./AudioForRendering");
-const Audio = (props) => {
+const AudioRefForwardingFunction = (props, ref) => {
     const { startFrom, endAt, ...otherProps } = props;
+    const onError = react_1.useCallback(() => {
+        throw new Error(`Could not play video with src ${otherProps.src}`);
+    }, [otherProps.src]);
     if (typeof startFrom !== 'undefined' || typeof endAt !== 'undefined') {
@@ -18,11 +22,11 @@ validate_start_from_props_1.validateStartFromProps(startFrom, endAt);
         const endAtFrameNo = endAt !== null && endAt !== void 0 ? endAt : Infinity;
-        return (jsx_runtime_1.jsx(sequencing_1.Sequence, Object.assign({ layout: "none", from: 0 - startFromFrameNo, showInTimeline: false, durationInFrames: endAtFrameNo }, { children: jsx_runtime_1.jsx(exports.Audio, Object.assign({}, otherProps), void 0) }), void 0));
+        return (jsx_runtime_1.jsx(sequencing_1.Sequence, Object.assign({ layout: "none", from: 0 - startFromFrameNo, showInTimeline: false, durationInFrames: endAtFrameNo }, { children: jsx_runtime_1.jsx(exports.Audio, Object.assign({}, otherProps, { ref: ref }), void 0) }), void 0));
     }
     validate_media_props_1.validateMediaProps(props, 'Audio');
     if (process.env.NODE_ENV === 'development') {
-        return jsx_runtime_1.jsx(AudioForDevelopment_1.AudioForDevelopment, Object.assign({}, props), void 0);
+        return jsx_runtime_1.jsx(AudioForDevelopment_1.AudioForDevelopment, Object.assign({}, props, { ref: ref, onError: onError }), void 0);
     }
-    return jsx_runtime_1.jsx(AudioForRendering_1.AudioForRendering, Object.assign({}, props), void 0);
+    return jsx_runtime_1.jsx(AudioForRendering_1.AudioForRendering, Object.assign({}, props, { ref: ref, onError: onError }), void 0);
 };
-exports.Audio = Audio;
+exports.Audio = react_1.forwardRef(AudioRefForwardingFunction);
 //# sourceMappingURL=Audio.js.map

dist/audio/AudioForDevelopment.d.ts

 import React from 'react';
 import { RemotionAudioProps } from './props';
-export declare const AudioForDevelopment: React.FC<RemotionAudioProps>;
+export declare const AudioForDevelopment: React.ForwardRefExoticComponent<Pick<RemotionAudioProps, "style" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "tabIndex" | "title" | "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" | "children" | "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" | "key" | "src" | "crossOrigin" | "volume" | "playsInline" | "autoPlay" | "controlsList" | "mediaGroup" | "muted" | "preload"> & React.RefAttributes<HTMLAudioElement>>;
 //# sourceMappingURL=AudioForDevelopment.d.ts.map

dist/audio/AudioForDevelopment.js

@@ -11,3 +11,3 @@ "use strict";
 const use_audio_frame_1 = require("./use-audio-frame");
-const AudioForDevelopment = (props) => {
+const AudioForDevelopmentForwardRefFunction = (props, ref) => {
     const audioRef = react_1.useRef(null);
@@ -34,5 +34,8 @@ const volumePropFrame = use_audio_frame_1.useFrameForVolumeProp();
     });
+    react_1.useImperativeHandle(ref, () => {
+        return audioRef.current;
+    });
     return jsx_runtime_1.jsx("audio", Object.assign({ ref: audioRef }, nativeProps), void 0);
 };
-exports.AudioForDevelopment = AudioForDevelopment;
+exports.AudioForDevelopment = react_1.forwardRef(AudioForDevelopmentForwardRefFunction);
 //# sourceMappingURL=AudioForDevelopment.js.map

dist/audio/AudioForRendering.d.ts

 import React from 'react';
 import { RemotionAudioProps } from './props';
-export declare const AudioForRendering: React.FC<RemotionAudioProps>;
+export declare const AudioForRendering: React.ForwardRefExoticComponent<Pick<RemotionAudioProps, "style" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "tabIndex" | "title" | "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" | "children" | "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" | "key" | "src" | "crossOrigin" | "volume" | "playsInline" | "autoPlay" | "controlsList" | "mediaGroup" | "muted" | "preload"> & React.RefAttributes<HTMLAudioElement>>;
 //# sourceMappingURL=AudioForRendering.d.ts.map

dist/audio/AudioForRendering.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AudioForRendering = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const absolute_src_1 = require("../absolute-src");
 const CompositionManager_1 = require("../CompositionManager");
@@ -12,3 +14,4 @@ const is_remote_asset_1 = require("../is-remote-asset");
 const use_audio_frame_1 = require("./use-audio-frame");
-const AudioForRendering = (props) => {
+const AudioForRenderingRefForwardingFunction = (props, ref) => {
+    const audioRef = react_1.useRef(null);
     const absoluteFrame = use_frame_1.useAbsoluteCurrentFrame();
@@ -25,6 +28,10 @@ const volumePropFrame = use_audio_frame_1.useFrameForVolumeProp();
     }, [props.muted, props.src, sequenceContext]);
+    const { volume: volumeProp, ...nativeProps } = props;
     const volume = volume_prop_1.evaluateVolume({
-        volume: props.volume,
+        volume: volumeProp,
         frame: volumePropFrame,
     });
+    react_1.useImperativeHandle(ref, () => {
+        return audioRef.current;
+    });
     react_1.useEffect(() => {
@@ -39,7 +46,7 @@ if (!props.src) {
             type: 'audio',
-            src: props.src,
+            src: absolute_src_1.getAbsoluteSrc(props.src),
             id,
             frame: absoluteFrame,
             volume,
-            isRemote: is_remote_asset_1.isRemoteAsset(props.src),
+            isRemote: is_remote_asset_1.isRemoteAsset(absolute_src_1.getAbsoluteSrc(props.src)),
             mediaFrame: frame,
@@ -59,5 +66,5 @@ });
     ]);
-    return null;
+    return jsx_runtime_1.jsx("audio", Object.assign({ ref: audioRef }, nativeProps), void 0);
 };
-exports.AudioForRendering = AudioForRendering;
+exports.AudioForRendering = react_1.forwardRef(AudioForRenderingRefForwardingFunction);
 //# sourceMappingURL=AudioForRendering.js.map

dist/bezier.js

@@ -12,9 +12,9 @@ "use strict";
 const float32ArraySupported = typeof Float32Array === 'function';
-function A(aA1, aA2) {
+function a(aA1, aA2) {
     return 1.0 - 3.0 * aA2 + 3.0 * aA1;
 }
-function B(aA1, aA2) {
+function b(aA1, aA2) {
     return 3.0 * aA2 - 6.0 * aA1;
 }
-function C(aA1) {
+function c(aA1) {
     return 3.0 * aA1;
@@ -24,10 +24,14 @@ }
 function calcBezier(aT, aA1, aA2) {
-    return ((A(aA1, aA2) * aT + B(aA1, aA2)) * aT + C(aA1)) * aT;
+    return ((a(aA1, aA2) * aT + b(aA1, aA2)) * aT + c(aA1)) * aT;
 }
 // Returns dx/dt given t, x1, and x2, or dy/dt given t, y1, and y2.
 function getSlope(aT, aA1, aA2) {
-    return 3.0 * A(aA1, aA2) * aT * aT + 2.0 * B(aA1, aA2) * aT + C(aA1);
+    return 3.0 * a(aA1, aA2) * aT * aT + 2.0 * b(aA1, aA2) * aT + c(aA1);
 }
-function binarySubdivide(aX, _aA, _aB, mX1, mX2) {
-    let currentX, currentT, i = 0, aA = _aA, aB = _aB;
+function binarySubdivide({ aX, _aA, _aB, mX1, mX2, }) {
+    let currentX;
+    let currentT;
+    let i = 0;
+    let aA = _aA;
+    let aB = _aB;
     do {
@@ -87,10 +91,14 @@ currentT = aA + (aB - aA) / 2.0;
         }
-        else if (initialSlope === 0.0) {
+        if (initialSlope === 0.0) {
             return guessForT;
         }
-        else {
-            return binarySubdivide(aX, intervalStart, intervalStart + kSampleStepSize, mX1, mX2);
-        }
+        return binarySubdivide({
+            aX,
+            _aA: intervalStart,
+            _aB: intervalStart + kSampleStepSize,
+            mX1,
+            mX2,
+        });
     }
-    return function BezierEasing(x) {
+    return function (x) {
         if (mX1 === mY1 && mX2 === mY2) {
@@ -97,0 +105,0 @@ return x; // linear

dist/Composition.d.ts

 import { ComponentType } from 'react';
-declare type CompProps<T> = {
+export declare type CompProps<T> = {
     lazyComponent: () => Promise<{
@@ -4,0 +4,0 @@ default: ComponentType<T>;

dist/Composition.js

 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Composition = void 0;
-const react_1 = __importStar(require("react"));
+const react_1 = require("react");
 const CompositionManager_1 = require("./CompositionManager");
 const nonce_1 = require("./nonce");
 const register_root_1 = require("./register-root");
+const use_lazy_component_1 = require("./use-lazy-component");
+const validate_duration_in_frames_1 = require("./validation/validate-duration-in-frames");
+const validate_fps_1 = require("./validation/validate-fps");
 const Composition = ({ width, height, fps, durationInFrames, id, defaultProps: props, ...compProps }) => {
     const { registerComposition, unregisterComposition } = react_1.useContext(CompositionManager_1.CompositionManager);
+    const lazy = use_lazy_component_1.useLazyComponent(compProps);
     const nonce = nonce_1.useNonce();
-    const lazy = react_1.useMemo(() => {
-        if ('lazyComponent' in compProps) {
-            return react_1.default.lazy(compProps.lazyComponent);
-        }
-        if ('component' in compProps) {
-            return react_1.default.lazy(() => Promise.resolve({ default: compProps.component }));
-        }
-        throw new Error("You must pass either 'component' or 'lazyComponent'");
-        // @ts-expect-error
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [compProps.lazyComponent, compProps.component]);
     react_1.useEffect(() => {
@@ -61,17 +35,4 @@ // Ensure it's a URL safe id
         }
-        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 (durationInFrames % 1 !== 0) {
-            throw new TypeError(`The "durationInFrames" of a composition must be an integer, 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}.`);
-        }
+        validate_duration_in_frames_1.validateDurationInFrames(durationInFrames);
+        validate_fps_1.validateFps(fps);
         registerComposition({
@@ -78,0 +39,0 @@ durationInFrames,

dist/CompositionManager.js

@@ -7,10 +7,10 @@ "use strict";
     compositions: [],
-    registerComposition: () => void 0,
-    unregisterComposition: () => void 0,
+    registerComposition: () => undefined,
+    unregisterComposition: () => undefined,
     currentComposition: null,
-    setCurrentComposition: () => void 0,
-    registerSequence: () => void 0,
-    unregisterSequence: () => void 0,
-    registerAsset: () => void 0,
-    unregisterAsset: () => void 0,
+    setCurrentComposition: () => undefined,
+    registerSequence: () => undefined,
+    unregisterSequence: () => undefined,
+    registerAsset: () => undefined,
+    unregisterAsset: () => undefined,
     sequences: [],
@@ -17,0 +17,0 @@ assets: [],

dist/config/browser.d.ts

 export declare type Browser = 'chrome' | 'firefox';
 export declare const DEFAULT_BROWSER: Browser;
 export declare const setBrowser: (browser: Browser) => void;
-export declare const getBrowser: () => "chrome" | "firefox" | null;
+export declare const getBrowser: () => Browser | null;
 //# sourceMappingURL=browser.d.ts.map

dist/config/codec.js

@@ -14,3 +14,3 @@ "use strict";
 const validLegacyFormats = ['mp4', 'png-sequence'];
-let codec = undefined;
+let codec;
 const getOutputCodecOrUndefined = () => {
@@ -76,3 +76,2 @@ return codec;
         codec = undefined;
-        return;
     }
@@ -79,0 +78,0 @@ };

dist/config/concurrency.d.ts

 export declare type Concurrency = number | null;
 export declare const setConcurrency: (newConcurrency: Concurrency) => void;
-export declare const getConcurrency: () => Concurrency;
+export declare const getConcurrency: () => number | null;
 //# sourceMappingURL=concurrency.d.ts.map

dist/config/crf.d.ts

 import { Codec } from './codec';
 declare type Crf = number | undefined;
 export declare const setCrf: (newCrf: Crf) => void;
-export declare const getCrfOrUndefined: () => number | undefined;
+export declare const getCrfOrUndefined: () => Crf;
 export declare const getDefaultCrfForCodec: (codec: Codec) => number;
@@ -6,0 +6,0 @@ export declare const getValidCrfRanges: (codec: Codec) => [number, number];

dist/config/crf.js

@@ -5,3 +5,3 @@ "use strict";
 const is_audio_codec_1 = require("../is-audio-codec");
-let currentCrf = undefined;
+let currentCrf;
 const setCrf = (newCrf) => {
@@ -8,0 +8,0 @@ if (typeof newCrf !== 'number' && newCrf !== undefined) {

dist/config/frame-range.d.ts

@@ -5,3 +5,3 @@ export declare type FrameRange = number | [number, number];
 export declare const setFrameRangeFromCli: (newFrameRange: string | number) => void;
-export declare const getRange: () => number | [number, number] | null;
+export declare const getRange: () => FrameRange | null;
 //# sourceMappingURL=frame-range.d.ts.map

dist/config/frame-range.js

@@ -63,3 +63,3 @@ "use strict";
     if (typeof newFrameRange === 'string') {
-        const parsed = newFrameRange.split('-').map((f) => Number(f));
+        const parsed = newFrameRange.split('-').map(f => Number(f));
         if (parsed.length > 2 || parsed.length <= 0) {
@@ -66,0 +66,0 @@ throw new Error(`--frames flag must be a number or 2 numbers separated by '-', instead got ${parsed.length} numbers`);

dist/config/image-format.d.ts

@@ -1,2 +0,2 @@
-import { PixelFormat } from '.';
+import { PixelFormat } from './pixel-format';
 declare const validOptions: readonly ["png", "jpeg", "none"];
@@ -6,4 +6,4 @@ export declare type ImageFormat = typeof validOptions[number];
 export declare const getUserPreferredImageFormat: () => "png" | "jpeg" | "none" | undefined;
-export declare const validateSelectedPixelFormatAndImageFormatCombination: (pixelFormat: PixelFormat, imageFormat: ImageFormat) => void;
+export declare const validateSelectedPixelFormatAndImageFormatCombination: (pixelFormat: PixelFormat, imageFormat: ImageFormat) => 'none' | 'valid';
 export {};
 //# sourceMappingURL=image-format.d.ts.map

dist/config/image-format.js

@@ -5,5 +5,5 @@ "use strict";
 const validOptions = ['png', 'jpeg', 'none'];
-let currentImageFormat = undefined;
+let currentImageFormat;
 const setImageFormat = (format) => {
-    if (typeof format === undefined) {
+    if (typeof format === 'undefined') {
         currentImageFormat = undefined;
@@ -22,5 +22,6 @@ return;
 exports.getUserPreferredImageFormat = getUserPreferredImageFormat;
+// By returning a value, we improve testability as we can specifically test certain branches
 const validateSelectedPixelFormatAndImageFormatCombination = (pixelFormat, imageFormat) => {
     if (imageFormat === 'none') {
-        return;
+        return 'none';
     }
@@ -31,3 +32,3 @@ if (!validOptions.includes(imageFormat)) {
     if (pixelFormat !== 'yuva420p') {
-        return;
+        return 'valid';
     }
@@ -37,4 +38,5 @@ if (imageFormat !== 'png') {
     }
+    return 'valid';
 };
 exports.validateSelectedPixelFormatAndImageFormatCombination = validateSelectedPixelFormatAndImageFormatCombination;
 //# sourceMappingURL=image-format.js.map

dist/config/image-sequence.d.ts

@@ -0,3 +1,4 @@
+import { FrameRange } from './frame-range';
 export declare const setImageSequence: (newImageSequence: boolean) => void;
-export declare const getShouldOutputImageSequence: () => boolean;
+export declare const getShouldOutputImageSequence: (frameRange: FrameRange | null) => boolean;
 //# sourceMappingURL=image-sequence.d.ts.map

dist/config/image-sequence.js

@@ -12,6 +12,6 @@ "use strict";
 exports.setImageSequence = setImageSequence;
-const getShouldOutputImageSequence = () => {
-    return imageSequence;
+const getShouldOutputImageSequence = (frameRange) => {
+    return imageSequence || typeof frameRange === 'number';
 };
 exports.getShouldOutputImageSequence = getShouldOutputImageSequence;
 //# sourceMappingURL=image-sequence.js.map

dist/config/index.d.ts

@@ -39,3 +39,3 @@ import { Browser } from './browser';
          */
-        readonly setBrowserExecutable: (newBrowserExecutablePath: string | null) => void;
+        readonly setBrowserExecutable: (newBrowserExecutablePath: BrowserExecutable) => void;
     };
@@ -47,3 +47,3 @@ readonly Rendering: {
          */
-        readonly setConcurrency: (newConcurrency: number | null) => void;
+        readonly setConcurrency: (newConcurrency: Concurrency) => void;
         /**
@@ -66,3 +66,3 @@ * Set the JPEG quality for the frames.
          */
-        readonly setFrameRange: (newFrameRange: number | [number, number] | null) => void;
+        readonly setFrameRange: (newFrameRange: FrameRange | null) => void;
     };
@@ -69,0 +69,0 @@ readonly Output: {

dist/config/override-webpack.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.overrideWebpackConfig = exports.getWebpackOverrideFn = exports.defaultOverrideFunction = void 0;
-const defaultOverrideFunction = (config) => config;
+const defaultOverrideFunction = config => config;
 exports.defaultOverrideFunction = defaultOverrideFunction;
@@ -6,0 +6,0 @@ let overrideFn = exports.defaultOverrideFunction;

dist/easing.js

@@ -26,3 +26,3 @@ "use strict";
     static poly(n) {
-        return (t) => Math.pow(t, n);
+        return (t) => t ** n;
     }
@@ -36,7 +36,7 @@ static sin(t) {
     static exp(t) {
-        return Math.pow(2, 10 * (t - 1));
+        return 2 ** (10 * (t - 1));
     }
     static elastic(bounciness = 1) {
         const p = bounciness * Math.PI;
-        return (t) => 1 - Math.pow(Math.cos((t * Math.PI) / 2), 3) * Math.cos(t * p);
+        return (t) => 1 - Math.cos((t * Math.PI) / 2) ** 3 * Math.cos(t * p);
     }
@@ -43,0 +43,0 @@ static back(s = 1.70158) {

dist/get-asset-file-name.js

@@ -7,3 +7,3 @@ "use strict";
         .split('/')
-        .map((s) => s.split('\\'))
+        .map(s => s.split('\\'))
         .flat(1);
@@ -10,0 +10,0 @@ return splitted[splitted.length - 1];

dist/get-timeline-clip-name.js

@@ -7,5 +7,6 @@ "use strict";
     var _a;
-    const tree = (_a = react_1.Children.map(children, (ch) => {
-        if (!react_1.isValidElement(ch))
+    const tree = (_a = react_1.Children.map(children, ch => {
+        if (!react_1.isValidElement(ch)) {
             return null;
+        }
         // Must be name, not ID
@@ -12,0 +13,0 @@ const name = typeof ch.type !== 'string' && ch.type.name;

dist/IFrame.d.ts

 import React from 'react';
-export declare const IFrame: React.ForwardRefExoticComponent<Pick<React.DetailedHTMLProps<React.IframeHTMLAttributes<HTMLIFrameElement>, HTMLIFrameElement>, "children" | "width" | "height" | "id" | "slot" | "style" | "title" | "key" | "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" | "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" | "srcDoc"> & React.RefAttributes<HTMLIFrameElement>>;
+export declare const IFrame: React.ForwardRefExoticComponent<Pick<React.DetailedHTMLProps<React.IframeHTMLAttributes<HTMLIFrameElement>, HTMLIFrameElement>, "key" | keyof React.IframeHTMLAttributes<HTMLIFrameElement>> & React.RefAttributes<HTMLIFrameElement>>;
 //# sourceMappingURL=IFrame.d.ts.map

dist/Img.d.ts

 import React from 'react';
-export declare const Img: React.ForwardRefExoticComponent<Pick<React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "children" | "width" | "height" | "id" | "slot" | "style" | "title" | "key" | "crossOrigin" | "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" | "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" | "alt" | "decoding" | "sizes" | "srcSet" | "useMap"> & React.RefAttributes<HTMLImageElement>>;
+export declare const Img: React.ForwardRefExoticComponent<Pick<React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "key" | keyof React.ImgHTMLAttributes<HTMLImageElement>> & React.RefAttributes<HTMLImageElement>>;
 //# sourceMappingURL=Img.d.ts.map

dist/index.d.ts

 import './asset-types';
+import { TAsset, TCompMetadata } from './CompositionManager';
+declare global {
+    interface Window {
+        ready: boolean;
+        getStaticCompositions: () => TCompMetadata[];
+        remotion_setFrame: (frame: number) => void;
+        remotion_collectAssets: () => TAsset[];
+    }
+}
 export * from './AbsoluteFill';
@@ -13,2 +22,3 @@ export * from './audio';
 export * from './interpolate';
+export { interpolateColors } from './interpolateColors';
 export * from './random';
@@ -15,0 +25,0 @@ export * from './ready-manager';

dist/index.js

@@ -13,3 +13,3 @@ "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Sequence = exports.registerRoot = exports.getInputProps = void 0;
+exports.Sequence = exports.registerRoot = exports.interpolateColors = exports.getInputProps = void 0;
 require("./asset-types");
@@ -27,2 +27,4 @@ __exportStar(require("./AbsoluteFill"), exports);
 __exportStar(require("./interpolate"), exports);
+var interpolateColors_1 = require("./interpolateColors");
+Object.defineProperty(exports, "interpolateColors", { enumerable: true, get: function () { return interpolateColors_1.interpolateColors; } });
 __exportStar(require("./random"), exports);
@@ -29,0 +31,0 @@ __exportStar(require("./ready-manager"), exports);

dist/internals.d.ts

 /// <reference types="react" />
-import { RenderAssetInfo, TAsset, TCompMetadata, TComposition, TSequence } from './CompositionManager';
+import { CompProps } from './Composition';
+import { CompositionManagerContext, RenderAssetInfo, TAsset, TCompMetadata, TComposition, TSequence } from './CompositionManager';
 import * as Logging from './config/log';
 import { WebpackOverrideFn } from './config/override-webpack';
+import * as CSSUtils from './default-css';
 import * as perf from './perf';
 import * as Timeline from './timeline-position-state';
-import { TimelineContextValue } from './timeline-position-state';
+import { SetTimelineContextValue, TimelineContextValue } from './timeline-position-state';
 import { truthy } from './truthy';
+import { useRemotionContexts } from './wrap-remotion-context';
 export declare const Internals: {
@@ -13,7 +16,7 @@ perf: typeof perf;
     Timeline: typeof Timeline;
-    CompositionManager: import("react").Context<import("./CompositionManager").CompositionManagerContext>;
+    CompositionManager: import("react").Context<CompositionManagerContext>;
     RemotionRoot: import("react").FC<{}>;
     useVideo: () => TComposition<unknown> | null;
     getRoot: () => import("react").FC<{}> | null;
-    getBrowserExecutable: () => string | null;
+    getBrowserExecutable: () => import("./config/browser-executable").BrowserExecutable;
     getCompositionName: () => string | null;
@@ -23,3 +26,3 @@ getIsEvaluation: () => boolean;
     getConcurrency: () => number | null;
-    getRange: () => number | [number, number] | null;
+    getRange: () => import("./config/frame-range").FrameRange | null;
     getShouldOverwrite: () => boolean;
@@ -29,3 +32,3 @@ getOutputCodecOrUndefined: () => import("./config/codec").CodecOrUndefined;
     getQuality: () => number | undefined;
-    getShouldOutputImageSequence: () => boolean;
+    getShouldOutputImageSequence: (frameRange: import("./config/frame-range").FrameRange | null) => boolean;
     validateSelectedCrfAndCodecCombination: (crf: number, codec: "h264" | "h265" | "vp8" | "vp9" | "mp3" | "aac" | "wav") => void;
@@ -41,3 +44,3 @@ getFinalOutputCodec: ({ codec: inputCodec, fileExtension, emitWarning, }: {
     DEFAULT_WEBPACK_CACHE_ENABLED: boolean;
-    getBrowser: () => "chrome" | "firefox" | null;
+    getBrowser: () => import("./config/browser").Browser | null;
     DEFAULT_BROWSER: import("./config/browser").Browser;
@@ -48,12 +51,18 @@ getDefaultCrfForCodec: (codec: "h264" | "h265" | "vp8" | "vp9" | "mp3" | "aac" | "wav") => number;
     getUserPreferredImageFormat: () => "png" | "jpeg" | "none" | undefined;
-    validateSelectedPixelFormatAndImageFormatCombination: (pixelFormat: "yuv420p" | "yuva420p" | "yuv422p" | "yuv444p" | "yuv420p10le" | "yuv422p10le" | "yuv444p10le", imageFormat: "png" | "jpeg" | "none") => void;
+    validateSelectedPixelFormatAndImageFormatCombination: (pixelFormat: "yuv420p" | "yuva420p" | "yuv422p" | "yuv444p" | "yuv420p10le" | "yuv422p10le" | "yuv444p10le", imageFormat: "png" | "jpeg" | "none") => "none" | "valid";
     validateSelectedPixelFormatAndCodecCombination: (pixelFormat: "yuv420p" | "yuva420p" | "yuv422p" | "yuv444p" | "yuv420p10le" | "yuv422p10le" | "yuv444p10le", codec: "h264" | "h265" | "vp8" | "vp9" | "mp3" | "aac" | "wav") => void;
-    validateFrameRange: (frameRange: number | [number, number] | null) => void;
+    validateFrameRange: (frameRange: import("./config/frame-range").FrameRange | null) => void;
     getWebpackCaching: () => boolean;
+    useLazyComponent: (compProps: CompProps<any>) => import("react").LazyExoticComponent<import("react").ComponentType<any>>;
     truthy: typeof truthy;
-    isAudioCodec: (codec: import("./config/codec").CodecOrUndefined) => boolean;
+    isAudioCodec: (codec: "h264" | "h265" | "vp8" | "vp9" | "mp3" | "aac" | "wav" | undefined) => boolean;
     INPUT_PROPS_KEY: string;
     Logging: typeof Logging;
+    SequenceContext: import("react").Context<import("./sequencing").SequenceContextType | null>;
+    useRemotionContexts: typeof useRemotionContexts;
+    RemotionContextProvider: (props: import("./wrap-remotion-context").RemotionContextProviderProps) => JSX.Element;
+    isPlainIndex: () => boolean;
+    CSSUtils: typeof CSSUtils;
 };
-export type { TComposition, Timeline, TCompMetadata, TSequence, WebpackOverrideFn, TAsset, RenderAssetInfo, TimelineContextValue, };
+export type { TComposition, Timeline, TCompMetadata, TSequence, WebpackOverrideFn, TAsset, RenderAssetInfo, TimelineContextValue, SetTimelineContextValue, CompProps, CompositionManagerContext, };
 //# sourceMappingURL=internals.d.ts.map

dist/internals.js

@@ -39,2 +39,3 @@ "use strict";
 const webpack_caching_1 = require("./config/webpack-caching");
+const CSSUtils = __importStar(require("./default-css"));
 const feature_flags_1 = require("./feature-flags");
@@ -45,6 +46,9 @@ const is_audio_codec_1 = require("./is-audio-codec");
 const RemotionRoot_1 = require("./RemotionRoot");
+const sequencing_1 = require("./sequencing");
 const Timeline = __importStar(require("./timeline-position-state"));
 const truthy_1 = require("./truthy");
+const use_lazy_component_1 = require("./use-lazy-component");
 const use_unsafe_video_config_1 = require("./use-unsafe-video-config");
 const use_video_1 = require("./use-video");
+const wrap_remotion_context_1 = require("./wrap-remotion-context");
 // Mark them as Internals so use don't assume this is public
@@ -87,2 +91,3 @@ // API and are less likely to use it
     getWebpackCaching: webpack_caching_1.getWebpackCaching,
+    useLazyComponent: use_lazy_component_1.useLazyComponent,
     truthy: truthy_1.truthy,
@@ -92,3 +97,8 @@ isAudioCodec: is_audio_codec_1.isAudioCodec,
     Logging,
+    SequenceContext: sequencing_1.SequenceContext,
+    useRemotionContexts: wrap_remotion_context_1.useRemotionContexts,
+    RemotionContextProvider: wrap_remotion_context_1.RemotionContextProvider,
+    isPlainIndex: register_root_1.isPlainIndex,
+    CSSUtils,
 };
 //# sourceMappingURL=internals.js.map

dist/interpolate.d.ts

 declare type ExtrapolateType = 'extend' | 'identity' | 'clamp';
-export declare function interpolate(input: number, inputRange: number[], outputRange: number[], options?: {
+export declare function interpolate(input: number, inputRange: readonly number[], outputRange: readonly number[], options?: {
     easing?: (input: number) => number;
@@ -4,0 +4,0 @@ extrapolateLeft?: ExtrapolateType;

dist/interpolate.js

@@ -14,3 +14,3 @@ "use strict";
         }
-        else if (extrapolateLeft === 'clamp') {
+        if (extrapolateLeft === 'clamp') {
             result = inputMin;
@@ -26,3 +26,3 @@ }
         }
-        else if (extrapolateRight === 'clamp') {
+        if (extrapolateRight === 'clamp') {
             result = inputMax;
@@ -37,30 +37,8 @@ }
     }
-    if (inputMin === inputMax) {
-        if (input <= inputMin) {
-            return outputMin;
-        }
-        return outputMax;
-    }
     // Input Range
-    if (inputMin === -Infinity) {
-        result = -result;
-    }
-    else if (inputMax === Infinity) {
-        result = result - inputMin;
-    }
-    else {
-        result = (result - inputMin) / (inputMax - inputMin);
-    }
+    result = (result - inputMin) / (inputMax - inputMin);
     // Easing
     result = easing(result);
     // Output Range
-    if (outputMin === -Infinity) {
-        result = -result;
-    }
-    else if (outputMax === Infinity) {
-        result = result + outputMin;
-    }
-    else {
-        result = result * (outputMax - outputMin) + outputMin;
-    }
+    result = result * (outputMax - outputMin) + outputMin;
     return result;
@@ -78,5 +56,2 @@ }
 function checkValidInputRange(arr) {
-    if (arr.length < 2) {
-        throw new Error('inputRange must have at least 2 elements');
-    }
     for (let i = 1; i < arr.length; ++i) {
@@ -92,5 +67,2 @@ if (!(arr[i] > arr[i - 1])) {
     }
-    if (!(arr.length !== 2 || arr[0] !== -Infinity || arr[1] !== Infinity)) {
-        throw new Error(`${name} must contain only finite numbers, but got [${arr.join(',')}]`);
-    }
     for (const index in arr) {
@@ -120,4 +92,4 @@ if (typeof arr[index] !== 'number') {
     checkInfiniteRange('inputRange', inputRange);
+    checkInfiniteRange('outputRange', outputRange);
     checkValidInputRange(inputRange);
-    checkInfiniteRange('outputRange', outputRange);
     const easing = (_a = options === null || options === void 0 ? void 0 : options.easing) !== null && _a !== void 0 ? _a : ((num) => num);
@@ -124,0 +96,0 @@ let extrapolateLeft = 'extend';

dist/perf/index.js

@@ -29,3 +29,3 @@ "use strict";
     console.log('Render performance:');
-    Object.keys(perf).forEach((p) => {
+    Object.keys(perf).forEach(p => {
         console.log(`  ${p} => ${perf[p].reduce((a, b) => a + b, 0) / perf[p].length} (n = ${perf[p].length})`);
@@ -32,0 +32,0 @@ });

dist/ready-manager.d.ts

@@ -1,12 +0,3 @@
-import { TAsset, TCompMetadata } from './CompositionManager';
 export declare const delayRender: () => number;
 export declare const continueRender: (handle: number) => void;
-declare global {
-    interface Window {
-        ready: boolean;
-        getStaticCompositions: () => TCompMetadata[];
-        remotion_setFrame: (frame: number) => void;
-        remotion_collectAssets: () => TAsset[];
-    }
-}
 //# sourceMappingURL=ready-manager.d.ts.map

dist/ready-manager.js

@@ -8,5 +8,14 @@ "use strict";
 let handles = [];
+const timeouts = {};
 const delayRender = () => {
+    var _a, _b;
     const handle = Math.random();
     handles.push(handle);
+    const called = (_b = (_a = Error().stack) === null || _a === void 0 ? void 0 : _a.replace(/^Error/g, '')) !== null && _b !== void 0 ? _b : '';
+    if (process.env.NODE_ENV === 'production') {
+        timeouts[handle] = setTimeout(() => {
+            throw new Error('A delayRender was called but not cleared after 25000ms. See https://remotion.dev/docs/timeout for help. The delayRender was called: ' +
+                called);
+        }, 25000);
+    }
     if (typeof window !== 'undefined') {
@@ -19,3 +28,11 @@ window.ready = false;
 const continueRender = (handle) => {
-    handles = handles.filter((h) => h !== handle);
+    handles = handles.filter((h) => {
+        if (h === handle) {
+            if (process.env.NODE_ENV === 'production') {
+                clearTimeout(timeouts[handle]);
+            }
+            return false;
+        }
+        return true;
+    });
     if (handles.length === 0 && typeof window !== 'undefined') {
@@ -22,0 +39,0 @@ window.ready = true;

dist/register-root.d.ts

@@ -7,4 +7,5 @@ import React from 'react';
 export declare const removeStaticComposition: (id: string) => void;
-export declare const getCompositionName: () => import("./config").BrowserExecutable;
+export declare const isPlainIndex: () => boolean;
+export declare const getCompositionName: () => string | null;
 export declare const getIsEvaluation: () => boolean;
 //# sourceMappingURL=register-root.d.ts.map

dist/register-root.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getIsEvaluation = exports.getCompositionName = exports.removeStaticComposition = exports.addStaticComposition = exports.getRoot = exports.registerRoot = void 0;
+exports.getIsEvaluation = exports.getCompositionName = exports.isPlainIndex = exports.removeStaticComposition = exports.addStaticComposition = exports.getRoot = exports.registerRoot = void 0;
 let root = null;
@@ -24,3 +24,3 @@ // Ok to have components with various prop types
 const removeStaticComposition = (id) => {
-    staticCompositions = staticCompositions.filter((s) => {
+    staticCompositions = staticCompositions.filter(s => {
         return s.id !== id;
@@ -30,2 +30,8 @@ });
 exports.removeStaticComposition = removeStaticComposition;
+// Is a plain index.html file with neither ?evalution nor ?composition URL.
+// Useful for just setting localStorage values.
+const isPlainIndex = () => {
+    return !exports.getIsEvaluation() && exports.getCompositionName() === null;
+};
+exports.isPlainIndex = isPlainIndex;
 const getCompositionName = () => {
@@ -45,3 +51,3 @@ const param = new URLSearchParams(window.location.search).get('composition');
 if (typeof window !== 'undefined') {
-    window.getStaticCompositions = () => staticCompositions.map((c) => {
+    window.getStaticCompositions = () => staticCompositions.map(c => {
         return {
@@ -48,0 +54,0 @@ durationInFrames: c.durationInFrames,

dist/RemotionRoot.js

@@ -15,3 +15,3 @@ "use strict";
     const [compositions, setCompositions] = react_1.useState([]);
-    const [currentComposition, setCurrentComposition] = react_1.useState(typeof window !== 'undefined' ? window.location.pathname.substr(1) : null);
+    const [currentComposition, setCurrentComposition] = react_1.useState(typeof window === 'undefined' ? null : window.location.pathname.substr(1));
     const [remotionRootId] = react_1.useState(() => String(random_1.random(null)));
@@ -41,4 +41,4 @@ const [sequences, setSequences] = react_1.useState([]);
     const registerComposition = react_1.useCallback((comp) => {
-        setCompositions((comps) => {
-            if (comps.find((c) => c.id === comp.id)) {
+        setCompositions(comps => {
+            if (comps.find(c => c.id === comp.id)) {
                 throw new Error(`Multiple composition with id ${comp.id} are registered.`);
@@ -50,3 +50,3 @@ }
     const registerSequence = react_1.useCallback((seq) => {
-        setSequences((seqs) => {
+        setSequences(seqs => {
             return [...seqs, seq];
@@ -56,11 +56,11 @@ });
     const unregisterComposition = react_1.useCallback((id) => {
-        setCompositions((comps) => {
-            return comps.filter((c) => c.id !== id);
+        setCompositions(comps => {
+            return comps.filter(c => c.id !== id);
         });
     }, []);
     const unregisterSequence = react_1.useCallback((seq) => {
-        setSequences((seqs) => seqs.filter((s) => s.id !== seq));
+        setSequences(seqs => seqs.filter(s => s.id !== seq));
     }, []);
     const registerAsset = react_1.useCallback((asset) => {
-        setAssets((assts) => {
+        setAssets(assts => {
             return [...assts, asset];
@@ -70,4 +70,4 @@ });
     const unregisterAsset = react_1.useCallback((id) => {
-        setAssets((assts) => {
-            return assts.filter((a) => a.id !== id);
+        setAssets(assts => {
+            return assts.filter(a => a.id !== id);
         });
@@ -123,5 +123,5 @@ }, []);
         if (module.hot) {
-            module.hot.addStatusHandler((status) => {
+            module.hot.addStatusHandler(status => {
                 if (status === 'idle') {
-                    setFastRefreshes((i) => i + 1);
+                    setFastRefreshes(i => i + 1);
                 }
@@ -128,0 +128,0 @@ });

dist/sequencing/index.d.ts

 import React from 'react';
-declare type SequenceContextType = {
+export declare type SequenceContextType = {
     cumulatedFrom: number;
@@ -18,3 +18,2 @@ relativeFrom: number;
 }>;
-export {};
 //# sourceMappingURL=index.d.ts.map

dist/sequencing/index.js

@@ -31,5 +31,12 @@ "use strict";
     }
+    // Infinity is non-integer but allowed!
+    if (durationInFrames % 1 !== 0 && Number.isFinite(durationInFrames)) {
+        throw new TypeError(`The "durationInFrames" of a sequence must be an integer, 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.`);
     }
+    if (from % 1 !== 0) {
+        throw new TypeError(`The "from" prop of a sequence must be an integer, but got ${from}.`);
+    }
     const absoluteFrame = use_frame_1.useAbsoluteCurrentFrame();
@@ -36,0 +43,0 @@ const unsafeVideoConfig = use_unsafe_video_config_1.useUnsafeVideoConfig();

dist/spring.d.ts

@@ -0,1 +1,7 @@
+declare type AnimationNode = {
+    lastTimestamp: number;
+    toValue: number;
+    current: number;
+    velocity: number;
+};
 export declare type SpringConfig = {
@@ -7,2 +13,3 @@ damping: number;
 };
+export declare function advance(animation: AnimationNode, now: number, config: SpringConfig): AnimationNode;
 export declare function spring({ from, to, frame, fps, config, }: {
@@ -15,2 +22,3 @@ from?: number;
 }): number;
+export {};
 //# sourceMappingURL=spring.d.ts.map

dist/spring.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.spring = void 0;
+exports.spring = exports.advance = void 0;
 const defaultSpringConfig = {
@@ -50,2 +50,3 @@ damping: 10,
 }
+exports.advance = advance;
 function spring({ from = 0, to = 1, frame, fps, config = {}, }) {
@@ -52,0 +53,0 @@ let animation = {

dist/timeline-position-state.js

@@ -11,4 +11,8 @@ "use strict";
 exports.SetTimelineContext = react_1.createContext({
-    setFrame: () => void 0,
-    setPlaying: () => void 0,
+    setFrame: () => {
+        throw new Error('default');
+    },
+    setPlaying: () => {
+        throw new Error('default');
+    },
 });
@@ -15,0 +19,0 @@ const useTimelinePosition = () => {

dist/use-lazy-component.js

@@ -25,4 +25,7 @@ "use strict";
 // Expected, it can be any component props
+const useLazyComponent = (
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-const useLazyComponent = (compProps) => {
+compProps
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+) => {
     const lazy = react_1.useMemo(() => {
@@ -33,2 +36,6 @@ if ('lazyComponent' in compProps) {
         if ('component' in compProps) {
+            // In SSR, suspense is not yet supported, we cannot use React.lazy
+            if (typeof document === 'undefined') {
+                return compProps.component;
+            }
             return react_1.default.lazy(() => Promise.resolve({ default: compProps.component }));
@@ -35,0 +42,0 @@ }

dist/use-media-tag-volume.js

@@ -14,6 +14,2 @@ "use strict";
         }
-        if (ref.volume !== actualVolume) {
-            setActualVolume(ref.volume);
-            return;
-        }
         const onChange = () => {
@@ -24,2 +20,11 @@ setActualVolume(ref.volume);
         return () => ref.removeEventListener('volumechange', onChange);
+    }, [mediaRef]);
+    react_1.useEffect(() => {
+        const ref = mediaRef.current;
+        if (!ref) {
+            return;
+        }
+        if (ref.volume !== actualVolume) {
+            setActualVolume(ref.volume);
+        }
     }, [actualVolume, mediaRef]);
@@ -26,0 +31,0 @@ return actualVolume;

dist/use-sync-volume-with-media-tag.d.ts

 import { RefObject } from 'react';
 import { VolumeProp } from './volume-prop';
-export declare const useSyncVolumeWithMediaTag: ({ volumePropFrame, actualVolume, volume, mediaRef, }: {
+export declare type UseSyncVolumeWithMediaTagOptions = {
     volumePropFrame: number;
     actualVolume: number;
-    volume?: number | ((frame: number) => number) | undefined;
+    volume?: VolumeProp;
     mediaRef: RefObject<HTMLVideoElement | HTMLAudioElement>;
-}) => void;
+};
+export declare const useSyncVolumeWithMediaTag: ({ volumePropFrame, actualVolume, volume, mediaRef, }: UseSyncVolumeWithMediaTagOptions) => void;
 //# sourceMappingURL=use-sync-volume-with-media-tag.d.ts.map

dist/use-video.js

@@ -9,3 +9,3 @@ "use strict";
     const context = react_1.useContext(CompositionManager_1.CompositionManager);
-    return ((_a = context.compositions.find((c) => {
+    return ((_a = context.compositions.find(c => {
         return c.id === context.currentComposition;
@@ -12,0 +12,0 @@ })) !== null && _a !== void 0 ? _a : null);

dist/validate-start-from-props.js

@@ -28,3 +28,3 @@ "use strict";
     if (endAt < startFrom) {
-        throw new TypeError('endAt prop must be greater than startFrom prop');
+        throw new TypeError('endAt prop must be greater than startFrom prop.');
     }
@@ -31,0 +31,0 @@ };

dist/video/Video.d.ts

 import React from 'react';
-import { RemotionMainVideoProps, RemotionVideoProps } from './props';
-export declare const Video: React.FC<RemotionVideoProps & RemotionMainVideoProps>;
+import { RemotionMainVideoProps } from './props';
+export declare const Video: React.ForwardRefExoticComponent<Pick<Omit<React.DetailedHTMLProps<React.VideoHTMLAttributes<HTMLVideoElement>, HTMLVideoElement>, "autoplay" | "controls" | "loop"> & {
+    volume?: import("../volume-prop").VolumeProp | undefined;
+} & RemotionMainVideoProps, "key" | "height" | "playsInline" | "poster" | "width" | "disablePictureInPicture" | "disableRemotePlayback" | "autoPlay" | "controlsList" | "crossOrigin" | "mediaGroup" | "muted" | "preload" | "src" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "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" | "children" | "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" | "volume" | keyof RemotionMainVideoProps> & React.RefAttributes<HTMLVideoElement>>;
 //# sourceMappingURL=Video.d.ts.map

dist/video/Video.js

@@ -5,2 +5,3 @@ "use strict";
 const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const sequencing_1 = require("../sequencing");
@@ -11,4 +12,10 @@ const validate_media_props_1 = require("../validate-media-props");
 const VideoForRendering_1 = require("./VideoForRendering");
-const Video = (props) => {
+const VideoForwardingFunction = (props, ref) => {
     const { startFrom, endAt, ...otherProps } = props;
+    if (typeof ref === 'string') {
+        throw new Error('string refs are not supported');
+    }
+    const onError = react_1.useCallback(() => {
+        throw new Error(`Could not play video with src ${otherProps.src}`);
+    }, [otherProps.src]);
     if (typeof startFrom !== 'undefined' || typeof endAt !== 'undefined') {
@@ -18,11 +25,11 @@ validate_start_from_props_1.validateStartFromProps(startFrom, endAt);
         const endAtFrameNo = endAt !== null && endAt !== void 0 ? endAt : Infinity;
-        return (jsx_runtime_1.jsx(sequencing_1.Sequence, Object.assign({ layout: "none", from: 0 - startFromFrameNo, showInTimeline: false, durationInFrames: endAtFrameNo }, { children: jsx_runtime_1.jsx(exports.Video, Object.assign({}, otherProps), void 0) }), void 0));
+        return (jsx_runtime_1.jsx(sequencing_1.Sequence, Object.assign({ layout: "none", from: 0 - startFromFrameNo, showInTimeline: false, durationInFrames: endAtFrameNo }, { children: jsx_runtime_1.jsx(exports.Video, Object.assign({}, otherProps, { ref: ref }), void 0) }), void 0));
     }
     validate_media_props_1.validateMediaProps(props, 'Video');
     if (process.env.NODE_ENV === 'development') {
-        return jsx_runtime_1.jsx(VideoForDevelopment_1.VideoForDevelopment, Object.assign({}, props), void 0);
+        return jsx_runtime_1.jsx(VideoForDevelopment_1.VideoForDevelopment, Object.assign({}, props, { ref: ref, onError: onError }), void 0);
     }
-    return jsx_runtime_1.jsx(VideoForRendering_1.VideoForRendering, Object.assign({}, props), void 0);
+    return jsx_runtime_1.jsx(VideoForRendering_1.VideoForRendering, Object.assign({}, props, { ref: ref, onError: onError }), void 0);
 };
-exports.Video = Video;
+exports.Video = react_1.forwardRef(VideoForwardingFunction);
 //# sourceMappingURL=Video.js.map

dist/video/VideoForDevelopment.d.ts

 import React from 'react';
 import { RemotionVideoProps } from './props';
-export declare const VideoForDevelopment: React.FC<RemotionVideoProps>;
+export declare const VideoForDevelopment: React.ForwardRefExoticComponent<Pick<RemotionVideoProps, "key" | "height" | "playsInline" | "poster" | "width" | "disablePictureInPicture" | "disableRemotePlayback" | "autoPlay" | "controlsList" | "crossOrigin" | "mediaGroup" | "muted" | "preload" | "src" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "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" | "children" | "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" | "volume"> & React.RefAttributes<HTMLVideoElement>>;
 //# sourceMappingURL=VideoForDevelopment.d.ts.map

dist/video/VideoForDevelopment.js

@@ -11,3 +11,3 @@ "use strict";
 const use_sync_volume_with_media_tag_1 = require("../use-sync-volume-with-media-tag");
-const VideoForDevelopment = (props) => {
+const VideoForDevelopmentRefForwardingFunction = (props, ref) => {
     const videoRef = react_1.useRef(null);
@@ -34,5 +34,8 @@ const volumePropFrame = use_audio_frame_1.useFrameForVolumeProp();
     });
-    return jsx_runtime_1.jsx("video", Object.assign({ ref: videoRef }, nativeProps), void 0);
+    react_1.useImperativeHandle(ref, () => {
+        return videoRef.current;
+    });
+    return jsx_runtime_1.jsx("video", Object.assign({ ref: videoRef, playsInline: true }, nativeProps), void 0);
 };
-exports.VideoForDevelopment = VideoForDevelopment;
+exports.VideoForDevelopment = react_1.forwardRef(VideoForDevelopmentRefForwardingFunction);
 //# sourceMappingURL=VideoForDevelopment.js.map

dist/video/VideoForRendering.d.ts

 import React from 'react';
 import { RemotionVideoProps } from './props';
-export declare const VideoForRendering: React.FC<RemotionVideoProps>;
+export declare const VideoForRendering: React.ForwardRefExoticComponent<Pick<RemotionVideoProps, "key" | "height" | "playsInline" | "poster" | "width" | "disablePictureInPicture" | "disableRemotePlayback" | "autoPlay" | "controlsList" | "crossOrigin" | "mediaGroup" | "muted" | "preload" | "src" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "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" | "children" | "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" | "volume"> & React.RefAttributes<HTMLVideoElement>>;
 //# sourceMappingURL=VideoForRendering.d.ts.map

dist/video/VideoForRendering.js

@@ -6,2 +6,3 @@ "use strict";
 const react_1 = require("react");
+const absolute_src_1 = require("../absolute-src");
 const use_audio_frame_1 = require("../audio/use-audio-frame");
@@ -18,3 +19,3 @@ const CompositionManager_1 = require("../CompositionManager");
 const get_current_time_1 = require("./get-current-time");
-const VideoForRendering = ({ onError, volume: volumeProp, ...props }) => {
+const VideoForRenderingForwardFunction = ({ onError, volume: volumeProp, ...props }, ref) => {
     const absoluteFrame = use_frame_1.useAbsoluteCurrentFrame();
@@ -55,7 +56,7 @@ const frame = use_frame_1.useCurrentFrame();
             type: 'video',
-            src: props.src,
+            src: absolute_src_1.getAbsoluteSrc(props.src),
             id,
             frame: absoluteFrame,
             volume,
-            isRemote: is_remote_asset_1.isRemoteAsset(props.src),
+            isRemote: is_remote_asset_1.isRemoteAsset(absolute_src_1.getAbsoluteSrc(props.src)),
             mediaFrame: frame,
@@ -74,2 +75,5 @@ });
     ]);
+    react_1.useImperativeHandle(ref, () => {
+        return videoRef.current;
+    });
     react_1.useEffect(() => {
@@ -117,5 +121,5 @@ if (!videoRef.current) {
     }, [volumePropsFrame, props.src, videoConfig.fps, frame]);
-    return jsx_runtime_1.jsx("video", Object.assign({ ref: videoRef }, props), void 0);
+    return jsx_runtime_1.jsx("video", Object.assign({ ref: videoRef }, props, { onError: onError }), void 0);
 };
-exports.VideoForRendering = VideoForRendering;
+exports.VideoForRendering = react_1.forwardRef(VideoForRenderingForwardFunction);
 //# sourceMappingURL=VideoForRendering.js.map

dist/volume-prop.js

@@ -13,3 +13,3 @@ "use strict";
     if (typeof evaluated !== 'number') {
-        throw new TypeError(`You passed in a a function to the volume prop but it did not return a number but a vaue of type ${typeof evaluated} for frame ${frame}`);
+        throw new TypeError(`You passed in a a function to the volume prop but it did not return a number but a value of type ${typeof evaluated} for frame ${frame}`);
     }
@@ -16,0 +16,0 @@ if (Number.isNaN(evaluated)) {

package.json

 {
 	"name": "remotion",
-	"version": "2.1.0-alpha.ea6b0d4e",
+	"version": "2.1.0",
 	"description": "Render videos in React",
 	"main": "dist/index.js",
+	"sideEffects": false,
 	"scripts": {
-		"test": "eslint src --ext ts,tsx && jest",
+		"test": "eslint src --ext ts,tsx && jest --coverage && node generate-badges.js",
 		"build": "tsc -d",
 		"watch": "tsc -w",
-		"prerelease": "cp ../../README.md ."
+		"prerelease": "cp ../../README.md .",
+		"prepare": "rimraf node_modules/@types/react"
 	},
@@ -22,11 +24,13 @@ "repository": {
 	"devDependencies": {
-		"@jonny/eslint-config": "^2.1.210",
+		"@jonny/eslint-config": "^2.1.233",
 		"@testing-library/react": "^11.2.2",
+		"@testing-library/react-hooks": "^5.1.1",
 		"@types/jest": "^26.0.19",
-		"@types/node": "^14.14.14",
+		"@types/node": "^15.0.1",
 		"@types/webpack-env": "^1.16.0",
-		"eslint": "^7.4.0",
+		"eslint": "^7.25.0",
 		"jest": "^26.6.3",
 		"prettier": "^2.0.5",
 		"prettier-plugin-organize-imports": "^1.1.1",
+		"rimraf": "^3.0.2",
 		"ts-jest": "^26.4.4",
@@ -33,0 +37,0 @@ "typescript": "^4.1.2",

New alerts

Filesystem access

Supply chain risk

Accesses the file system, and could potentially read sensitive data.

Found 1 instance in 1 package

Fixed alerts

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

321097

increased by21.67%

Lines of code

4118

increased by19.81%

Number of low quality alerts

1

decreased by-50%

Worsened metrics

Dev dependency count

14

increased by16.67%

Number of package files

316

decreased by-2.17%

Number of low supply chain risk alerts

5

increased by25%

No dependency changes