@remotion/player 4.0.0-lambda.3 → 4.0.0-newpaths.1

package/dist/{test → cjs/test}/validate-prop.test.js

@@ -2,9 +2,10 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 const remotion_1 = require("remotion");
+const vitest_1 = require("vitest");
 const index_1 = require("../index");
 const test_utils_1 = require("./test-utils");
-test('no compositionWidth should give errors', () => {
+(0, vitest_1.test)('no compositionWidth should give errors', () => {
     try {
         (0, test_utils_1.render)((0, jsx_runtime_1.jsx)(index_1.Player
         // @ts-expect-error
@@ -13,27 +14,27 @@ test('no compositionWidth should give errors', () => {
             compositionWidth: null, errorFallback: () => 'something went wrong', compositionHeight: 400, fps: 30, durationInFrames: 500, component: test_utils_1.HelloWorld, controls: true, showVolumeControls: true }));
     }
     catch (e) {
-        expect(e.message).toMatch(/'compositionWidth' must be a number but got 'object' instead/);
+        (0, vitest_1.expect)(e.message).toMatch(/'compositionWidth' must be a number but got 'object' instead/);
     }
 });
-test('no compositionHeight should give errors', () => {
+(0, vitest_1.test)('no compositionHeight should give errors', () => {
     try {
         (0, test_utils_1.render)((0, jsx_runtime_1.jsx)(index_1.Player, { compositionWidth: 400, errorFallback: () => 'something went wrong', 
             // @ts-expect-error
             compositionHeight: undefined, fps: 30, durationInFrames: 500, component: test_utils_1.HelloWorld, controls: true, showVolumeControls: true }));
     }
     catch (e) {
-        expect(e.message).toMatch(/'compositionHeight' must be a number but got 'undefined' instead/);
+        (0, vitest_1.expect)(e.message).toMatch(/'compositionHeight' must be a number but got 'undefined' instead/);
     }
 });
-test('No fps should give errors', () => {
+(0, vitest_1.test)('No fps should give errors', () => {
     try {
         (0, test_utils_1.render)((0, jsx_runtime_1.jsx)(index_1.Player, { compositionWidth: 500, compositionHeight: 400, errorFallback: () => 'something went wrong', 
             // @ts-expect-error
             fps: null, durationInFrames: 500, component: test_utils_1.HelloWorld, controls: true, showVolumeControls: true }));
     }
     catch (e) {
-        expect(e.message).toMatch(/"fps" must be a number, but you passed a value of type object/);
+        (0, vitest_1.expect)(e.message).toMatch(/"fps" must be a number, but you passed a value of type object/);
     }
     try {
         (0, test_utils_1.render)((0, jsx_runtime_1.jsx)(index_1.Player, { compositionWidth: 500, compositionHeight: 400, errorFallback: () => 'something went wrong', 
@@ -41,51 +42,51 @@ test('No fps should give errors', () => {
             fps: undefined, durationInFrames: 500, component: test_utils_1.HelloWorld, controls: true, showVolumeControls: true }));
     }
     catch (e) {
-        expect(e.message).toMatch(/"fps" must be a number, but you passed a value of type undefined/);
+        (0, vitest_1.expect)(e.message).toMatch(/"fps" must be a number, but you passed a value of type undefined/);
     }
 });
-test('No durationInFrames should give errors', () => {
+(0, vitest_1.test)('No durationInFrames should give errors', () => {
     try {
         (0, test_utils_1.render)((0, jsx_runtime_1.jsx)(index_1.Player, { compositionWidth: 500, compositionHeight: 400, errorFallback: () => 'something went wrong', fps: 30, 
             // @ts-expect-error
             durationInFrames: undefined, component: test_utils_1.HelloWorld, controls: true, showVolumeControls: true }));
     }
     catch (e) {
-        expect(e.message).toMatch(/The "durationInFrames" prop of the <Player\/> component must be a number, but you passed a value of type undefined/);
+        (0, vitest_1.expect)(e.message).toMatch(/durationInFrames` must be a number, but is undefined/);
     }
 });
-test('Invalid playbackRate should give error', () => {
+(0, vitest_1.test)('Invalid playbackRate should give error', () => {
     try {
         (0, test_utils_1.render)((0, jsx_runtime_1.jsx)(index_1.Player, { compositionWidth: 500, compositionHeight: 400, fps: 30, durationInFrames: 500, component: test_utils_1.HelloWorld, controls: true, showVolumeControls: true, playbackRate: -5 }));
     }
     catch (e) {
-        expect(e.message).toMatch(/The lowest possible playback rate is -4. You passed: -5/);
+        (0, vitest_1.expect)(e.message).toMatch(/The lowest possible playback rate is -4. You passed: -5/);
     }
 });
-test('playbackRate of 0 should not be possible', () => {
+(0, vitest_1.test)('playbackRate of 0 should not be possible', () => {
     try {
         (0, test_utils_1.render)((0, jsx_runtime_1.jsx)(index_1.Player, { compositionWidth: 500, compositionHeight: 400, fps: 30, durationInFrames: 500, component: test_utils_1.HelloWorld, controls: true, showVolumeControls: true, playbackRate: 0 }));
     }
     catch (e) {
-        expect(e.message).toMatch(/A playback rate of 0 is not supported./);
+        (0, vitest_1.expect)(e.message).toMatch(/A playback rate of 0 is not supported./);
     }
 });
-test('playbackRate of wrong type should not be possible', () => {
+(0, vitest_1.test)('playbackRate of wrong type should not be possible', () => {
     try {
         (0, test_utils_1.render)((0, jsx_runtime_1.jsx)(index_1.Player, { compositionWidth: 500, compositionHeight: 400, fps: 30, durationInFrames: 500, component: test_utils_1.HelloWorld, controls: true, showVolumeControls: true, 
             // @ts-expect-error
             playbackRate: 'hi' }));
     }
     catch (e) {
-        expect(e.message).toMatch(/A playback rate of 0 is not supported./);
+        (0, vitest_1.expect)(e.message).toMatch(/A playback rate of 0 is not supported./);
     }
 });
-test('playbackRate of undefined should be okay', () => {
+(0, vitest_1.test)('playbackRate of undefined should be okay', () => {
     (0, test_utils_1.render)((0, jsx_runtime_1.jsx)(index_1.Player, { compositionWidth: 500, compositionHeight: 400, fps: 30, durationInFrames: 500, component: test_utils_1.HelloWorld, controls: true, showVolumeControls: true }));
-    expect(true).toBe(true);
+    (0, vitest_1.expect)(true).toBe(true);
 });
-test('passing in <Composition /> instance should not be possible', () => {
-    expect(() => {
+(0, vitest_1.test)('passing in <Composition /> instance should not be possible', () => {
+    (0, vitest_1.expect)(() => {
         (0, test_utils_1.render)((0, jsx_runtime_1.jsx)(index_1.Player, { compositionWidth: 500, compositionHeight: 400, fps: 30, durationInFrames: 500, component: remotion_1.Composition, controls: true, showVolumeControls: true, inputProps: {
                 id: 'HelloWorld',
                 width: 500,
@@ -96,8 +97,8 @@ test('passing in <Composition /> instance should not be possible', () => {
             } }));
     }).toThrow(/'component' must not be the 'Composition' component\. Pass your own React/);
 });
-test('passing in <Composition /> instance should not be possible', () => {
-    expect(() => {
+(0, vitest_1.test)('passing in <Composition /> instance should not be possible', () => {
+    (0, vitest_1.expect)(() => {
         (0, test_utils_1.render)((0, jsx_runtime_1.jsx)(index_1.Player, { compositionWidth: 500, compositionHeight: 400, fps: 30, durationInFrames: 500, 
             // @ts-expect-error
             component: (0, jsx_runtime_1.jsx)(remotion_1.Composition, { durationInFrames: 30, fps: 30, height: 10, width: 10, id: "hello", component: test_utils_1.HelloWorld }), controls: true, showVolumeControls: true, inputProps: {
@@ -110,7 +111,7 @@ test('passing in <Composition /> instance should not be possible', () => {
             } }));
     }).toThrow(/'component' should not be an instance of <Composition\/>\. Pass the React component dir/);
 });
-test.each([
+vitest_1.test.each([
     ['controls'],
     ['loop'],
     ['autoPlay'],
@@ -125,6 +126,6 @@ test.each([
         (0, test_utils_1.render)((0, jsx_runtime_1.jsx)(index_1.Player, { compositionWidth: 500, compositionHeight: 400, errorFallback: () => 'something went wrong', fps: 30, durationInFrames: 100, component: test_utils_1.HelloWorld, ...props }));
     }
     catch (e) {
-        expect(e.message).toMatch(`'${a}' must be a boolean or undefined but got 'string' instead`);
+        (0, vitest_1.expect)(e.message).toMatch(`'${a}' must be a boolean or undefined but got 'string' instead`);
     }
 });

package/dist/cjs/use-playback.d.ts

@@ -0,0 +1,7 @@
+export declare const usePlayback: ({ loop, playbackRate, moveToBeginningWhenEnded, inFrame, outFrame, }: {
+    loop: boolean;
+    playbackRate: number;
+    moveToBeginningWhenEnded: boolean;
+    inFrame: number | null;
+    outFrame: number | null;
+}) => void;

package/dist/{use-playback.js → cjs/use-playback.js}

@@ -5,12 +5,11 @@ const react_1 = require("react");
 const remotion_1 = require("remotion");
 const calculate_next_frame_1 = require("./calculate-next-frame");
 const use_player_1 = require("./use-player");
-const usePlayback = ({ loop, playbackRate, }) => {
+const usePlayback = ({ loop, playbackRate, moveToBeginningWhenEnded, inFrame, outFrame, }) => {
     const frame = remotion_1.Internals.Timeline.useTimelinePosition();
     const config = remotion_1.Internals.useUnsafeVideoConfig();
     const { playing, pause, emitter } = (0, use_player_1.usePlayer)();
     const setFrame = remotion_1.Internals.Timeline.useTimelineSetFrame();
-    const { inFrame, outFrame } = remotion_1.Internals.Timeline.useTimelineInOutFramePosition();
     const frameRef = (0, react_1.useRef)(frame);
     frameRef.current = frame;
     const lastTimeUpdateEvent = (0, react_1.useRef)(null);
@@ -46,7 +45,8 @@ const usePlayback = ({ loop, playbackRate, }) => {
                 shouldLoop: loop,
             });
             framesAdvanced += framesToAdvance;
-            if (nextFrame !== frameRef.current) {
+            if (nextFrame !== frameRef.current &&
+                (!hasEnded || moveToBeginningWhenEnded)) {
                 setFrame(nextFrame);
             }
             if (hasEnded) {
@@ -73,6 +73,7 @@ const usePlayback = ({ loop, playbackRate, }) => {
         playbackRate,
         inFrame,
         outFrame,
+        moveToBeginningWhenEnded,
     ]);
     (0, react_1.useEffect)(() => {
         const interval = setInterval(() => {
@@ -84,5 +85,8 @@ const usePlayback = ({ loop, playbackRate, }) => {
         }, 250);
         return () => clearInterval(interval);
     }, [emitter]);
+    (0, react_1.useEffect)(() => {
+        emitter.dispatchFrameUpdate({ frame });
+    }, [emitter, frame]);
 };
 exports.usePlayback = usePlayback;

package/dist/{use-player.d.ts → cjs/use-player.d.ts}

@@ -1,14 +1,19 @@
-import { SyntheticEvent } from 'react';
-import { PlayerEmitter } from './event-emitter';
-export declare const usePlayer: () => {
+import type { SyntheticEvent } from 'react';
+import type { PlayerEmitter } from './event-emitter';
+declare type UsePlayerMethods = {
     frameBack: (frames: number) => void;
     frameForward: (frames: number) => void;
     isLastFrame: boolean;
+    isFirstFrame: boolean;
     emitter: PlayerEmitter;
     playing: boolean;
     play: (e?: SyntheticEvent) => void;
     pause: () => void;
+    pauseAndReturnToPlayStart: () => void;
     seek: (newFrame: number) => void;
     getCurrentFrame: () => number;
     isPlaying: () => boolean;
+    hasPlayed: boolean;
 };
+export declare const usePlayer: () => UsePlayerMethods;
+export {};

package/dist/{use-player.js → cjs/use-player.js}

@@ -7,7 +7,9 @@ const emitter_context_1 = require("./emitter-context");
 const usePlayer = () => {
     var _a;
     const [playing, setPlaying, imperativePlaying] = remotion_1.Internals.Timeline.usePlayingState();
+    const [hasPlayed, setHasPlayed] = (0, react_1.useState)(false);
     const frame = remotion_1.Internals.Timeline.useTimelinePosition();
+    const playStart = (0, react_1.useRef)(frame);
     const setFrame = remotion_1.Internals.Timeline.useTimelineSetFrame();
     const setTimelinePosition = remotion_1.Internals.Timeline.useTimelineSetFrame();
     const audioContext = (0, react_1.useContext)(remotion_1.Internals.SharedAudioContext);
@@ -19,6 +21,7 @@ const usePlayer = () => {
     const emitter = (0, react_1.useContext)(emitter_context_1.PlayerEventEmitterContext);
     const lastFrame = ((_a = config === null || config === void 0 ? void 0 : config.durationInFrames) !== null && _a !== void 0 ? _a : 1) - 1;
     const isLastFrame = frame === lastFrame;
+    const isFirstFrame = frame === 0;
     if (!emitter) {
         throw new TypeError('Expected Player event emitter context');
     }
@@ -30,6 +33,7 @@ const usePlayer = () => {
         if (imperativePlaying.current) {
             return;
         }
+        setHasPlayed(true);
         if (isLastFrame) {
             seek(0);
         }
@@ -46,6 +50,7 @@ const usePlayer = () => {
         audioAndVideoTags.current.forEach((a) => a.play());
         imperativePlaying.current = true;
         setPlaying(true);
+        playStart.current = frameRef.current;
         emitter.dispatchPlay();
     }, [
         imperativePlaying,
@@ -63,6 +68,14 @@ const usePlayer = () => {
             emitter.dispatchPause();
         }
     }, [emitter, imperativePlaying, setPlaying]);
+    const pauseAndReturnToPlayStart = (0, react_1.useCallback)(() => {
+        if (imperativePlaying.current) {
+            imperativePlaying.current = false;
+            setTimelinePosition(playStart.current);
+            setPlaying(false);
+            emitter.dispatchPause();
+        }
+    }, [emitter, imperativePlaying, setPlaying, setTimelinePosition]);
     const hasVideo = Boolean(video);
     const frameBack = (0, react_1.useCallback)((frames) => {
         if (!hasVideo) {
@@ -94,19 +107,25 @@ const usePlayer = () => {
             play,
             pause,
             seek,
+            isFirstFrame,
             getCurrentFrame: () => frameRef.current,
             isPlaying: () => imperativePlaying.current,
+            pauseAndReturnToPlayStart,
+            hasPlayed,
         };
     }, [
-        emitter,
         frameBack,
         frameForward,
-        imperativePlaying,
         isLastFrame,
-        pause,
-        play,
+        emitter,
         playing,
+        play,
+        pause,
         seek,
+        isFirstFrame,
+        pauseAndReturnToPlayStart,
+        imperativePlaying,
+        hasPlayed,
     ]);
     return returnValue;
 };

package/dist/cjs/use-thumbnail.d.ts

@@ -0,0 +1,6 @@
+import type { ThumbnailEmitter } from './event-emitter';
+declare type UseThumbnailMethods = {
+    emitter: ThumbnailEmitter;
+};
+export declare const useThumbnail: () => UseThumbnailMethods;
+export {};

package/dist/cjs/use-thumbnail.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useThumbnail = void 0;
+const react_1 = require("react");
+const emitter_context_1 = require("./emitter-context");
+const useThumbnail = () => {
+    const emitter = (0, react_1.useContext)(emitter_context_1.ThumbnailEmitterContext);
+    if (!emitter) {
+        throw new TypeError('Expected Player event emitter context');
+    }
+    const returnValue = (0, react_1.useMemo)(() => {
+        return {
+            emitter,
+        };
+    }, [emitter]);
+    return returnValue;
+};
+exports.useThumbnail = useThumbnail;

package/dist/cjs/use-video-controls-resize.d.ts

@@ -0,0 +1,7 @@
+export declare const useVideoControlsResize: ({ allowFullscreen: allowFullScreen, playerWidth, }: {
+    allowFullscreen: boolean;
+    playerWidth: number;
+}) => {
+    maxTimeLabelWidth: number;
+    displayVerticalVolumeSlider: boolean;
+};

package/dist/cjs/use-video-controls-resize.js

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useVideoControlsResize = void 0;
+const react_1 = require("react");
+const icons_1 = require("./icons");
+const MediaVolumeSlider_1 = require("./MediaVolumeSlider");
+const PlayerControls_1 = require("./PlayerControls");
+const useVideoControlsResize = ({ allowFullscreen: allowFullScreen, playerWidth, }) => {
+    const resizeInfo = (0, react_1.useMemo)(() => {
+        const playPauseIconSize = icons_1.ICON_SIZE;
+        const volumeIconSize = icons_1.ICON_SIZE;
+        const _fullscreenIconSize = allowFullScreen ? icons_1.fullscreenIconSize : 0;
+        const elementsSize = volumeIconSize +
+            playPauseIconSize +
+            _fullscreenIconSize +
+            PlayerControls_1.X_PADDING * 2 +
+            PlayerControls_1.X_SPACER * 2;
+        const maxTimeLabelWidth = playerWidth - elementsSize;
+        const maxTimeLabelWidthWithoutNegativeValue = Math.max(maxTimeLabelWidth, 0);
+        const availableTimeLabelWidthIfVolumeOpen = maxTimeLabelWidthWithoutNegativeValue - MediaVolumeSlider_1.VOLUME_SLIDER_WIDTH;
+        // If max label width is lower than the volume width
+        // then it means we need to take it's width as the max label width
+        // otherwise we took the available width when volume open
+        const computedLabelWidth = availableTimeLabelWidthIfVolumeOpen < MediaVolumeSlider_1.VOLUME_SLIDER_WIDTH
+            ? maxTimeLabelWidthWithoutNegativeValue
+            : availableTimeLabelWidthIfVolumeOpen;
+        const minWidthForHorizontalDisplay = computedLabelWidth + elementsSize + MediaVolumeSlider_1.VOLUME_SLIDER_WIDTH;
+        const displayVerticalVolumeSlider = playerWidth < minWidthForHorizontalDisplay;
+        return {
+            maxTimeLabelWidth: maxTimeLabelWidthWithoutNegativeValue,
+            displayVerticalVolumeSlider,
+        };
+    }, [allowFullScreen, playerWidth]);
+    return resizeInfo;
+};
+exports.useVideoControlsResize = useVideoControlsResize;

package/dist/{utils → cjs/utils}/calculate-player-size.d.ts

@@ -1,5 +1,5 @@
-import { StandardLonghandProperties } from 'csstype';
-import { Size } from './use-element-size';
+import type { StandardLonghandProperties } from 'csstype';
+import type { Size } from './use-element-size';
 export declare const calculatePlayerSize: ({ currentSize, width, height, compositionWidth, compositionHeight, }: {
     currentSize: Size | null;
     width: StandardLonghandProperties['width'] | undefined;

package/dist/cjs/utils/preview-size.d.ts

@@ -0,0 +1,8 @@
+export declare type Translation = {
+    x: number;
+    y: number;
+};
+export declare type PreviewSize = {
+    size: number | 'auto';
+    translation: Translation;
+};

package/dist/cjs/utils/props-if-has-props.d.ts

@@ -0,0 +1,5 @@
+export declare type PropsIfHasProps<Props> = {} extends Props ? {
+    inputProps?: Props;
+} : {
+    inputProps: Props;
+};

package/dist/cjs/utils/props-if-has-props.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/{utils → cjs/utils}/use-cancellable-promises.d.ts

@@ -1,4 +1,4 @@
-import { CancellablePromise } from './cancellable-promise';
+import type { CancellablePromise } from './cancellable-promise';
 declare const useCancellablePromises: () => {
     appendPendingPromise: (promise: CancellablePromise) => void;
     removePendingPromise: (promise: CancellablePromise) => void;

package/dist/{utils → cjs/utils}/use-click-prevention-on-double-click.d.ts

@@ -1,3 +1,3 @@
-import { SyntheticEvent } from 'react';
+import type { SyntheticEvent } from 'react';
 declare const useClickPreventionOnDoubleClick: (onClick: (e: SyntheticEvent) => void, onDoubleClick: () => void, doubleClickToFullscreen: boolean) => [(e: SyntheticEvent) => void, () => void];
 export { useClickPreventionOnDoubleClick };

package/dist/{utils → cjs/utils}/use-element-size.d.ts

@@ -3,6 +3,11 @@ export declare type Size = {
     height: number;
     left: number;
     top: number;
+    windowSize: {
+        width: number;
+        height: number;
+    };
+    refresh: () => void;
 };
 export declare const updateAllElementsSizes: () => void;
 export declare const useElementSize: (ref: React.RefObject<HTMLElement>, options: {

package/dist/{utils → cjs/utils}/use-element-size.js

@@ -36,6 +36,10 @@ const useElementSize = (ref, options) => {
                 height,
                 left: newSize[0].x,
                 top: newSize[0].y,
+                windowSize: {
+                    height: window.innerHeight,
+                    width: window.innerWidth,
+                },
             });
         });
     }, [options.shouldApplyCssTransforms]);
@@ -53,6 +57,10 @@ const useElementSize = (ref, options) => {
             height: rect[0].height,
             left: rect[0].x,
             top: rect[0].y,
+            windowSize: {
+                height: window.innerHeight,
+                width: window.innerWidth,
+            },
         });
     }, [ref]);
     (0, react_1.useEffect)(() => {
@@ -85,6 +93,6 @@ const useElementSize = (ref, options) => {
             elementSizeHooks = elementSizeHooks.filter((e) => e !== updateSize);
         };
     }, [updateSize]);
-    return size;
+    return size ? { ...size, refresh: updateSize } : null;
 };
 exports.useElementSize = useElementSize;

package/dist/cjs/utils/validate-in-out-frame.d.ts

@@ -0,0 +1,6 @@
+export declare const validateSingleFrame: (frame: unknown, variableName: string) => number | null;
+export declare const validateInOutFrames: ({ inFrame, durationInFrames, outFrame, }: {
+    inFrame: unknown;
+    outFrame: unknown;
+    durationInFrames: number;
+}) => void;

package/dist/cjs/utils/validate-in-out-frame.js

@@ -0,0 +1,54 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.validateInOutFrames = exports.validateSingleFrame = void 0;
+const validateSingleFrame = (frame, variableName) => {
+    if (typeof frame === 'undefined' || frame === null) {
+        return frame !== null && frame !== void 0 ? frame : null;
+    }
+    if (typeof frame !== 'number') {
+        throw new TypeError(`"${variableName}" must be a number, but is ${JSON.stringify(frame)}`);
+    }
+    if (Number.isNaN(frame)) {
+        throw new TypeError(`"${variableName}" must not be NaN, but is ${JSON.stringify(frame)}`);
+    }
+    if (!Number.isFinite(frame)) {
+        throw new TypeError(`"${variableName}" must be finite, but is ${JSON.stringify(frame)}`);
+    }
+    if (frame % 1 !== 0) {
+        throw new TypeError(`"${variableName}" must be an integer, but is ${JSON.stringify(frame)}`);
+    }
+    return frame;
+};
+exports.validateSingleFrame = validateSingleFrame;
+const validateInOutFrames = ({ inFrame, durationInFrames, outFrame, }) => {
+    const validatedInFrame = (0, exports.validateSingleFrame)(inFrame, 'inFrame');
+    const validatedOutFrame = (0, exports.validateSingleFrame)(outFrame, 'outFrame');
+    if (validatedInFrame === null && validatedOutFrame === null) {
+        return;
+    }
+    // Must not be over the duration
+    if (validatedInFrame !== null && validatedInFrame > durationInFrames - 1) {
+        throw new Error('inFrame must be less than (durationInFrames - 1), but is ' +
+            validatedInFrame);
+    }
+    if (validatedOutFrame !== null && validatedOutFrame > durationInFrames - 1) {
+        throw new Error('outFrame must be less than (durationInFrames - 1), but is ' +
+            validatedOutFrame);
+    }
+    // Must not be under 0
+    if (validatedInFrame !== null && validatedInFrame < 0) {
+        throw new Error('inFrame must be greater than 0, but is ' + validatedInFrame);
+    }
+    if (validatedOutFrame !== null && validatedOutFrame <= 0) {
+        throw new Error(`outFrame must be greater than 0, but is ${validatedOutFrame}. If you want to render a single frame, use <Thumbnail /> instead.`);
+    }
+    if (validatedOutFrame !== null &&
+        validatedInFrame !== null &&
+        validatedOutFrame <= validatedInFrame) {
+        throw new Error('outFrame must be greater than inFrame, but is ' +
+            validatedOutFrame +
+            ' <= ' +
+            validatedInFrame);
+    }
+};
+exports.validateInOutFrames = validateInOutFrames;

package/dist/cjs/utils/validate-initial-frame.d.ts

@@ -0,0 +1,4 @@
+export declare const validateInitialFrame: ({ initialFrame, durationInFrames, }: {
+    initialFrame: unknown;
+    durationInFrames: unknown;
+}) => void;

package/dist/cjs/utils/validate-initial-frame.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.validateInitialFrame = void 0;
+const validateInitialFrame = ({ initialFrame, durationInFrames, }) => {
+    if (typeof durationInFrames !== 'number') {
+        throw new Error(`\`durationInFrames\` must be a number, but is ${JSON.stringify(durationInFrames)}`);
+    }
+    if (typeof initialFrame === 'undefined') {
+        return;
+    }
+    if (typeof initialFrame !== 'number') {
+        throw new Error(`\`initialFrame\` must be a number, but is ${JSON.stringify(initialFrame)}`);
+    }
+    if (Number.isNaN(initialFrame)) {
+        throw new Error(`\`initialFrame\` must be a number, but is NaN`);
+    }
+    if (!Number.isFinite(initialFrame)) {
+        throw new Error(`\`initialFrame\` must be a number, but is Infinity`);
+    }
+    if (initialFrame % 1 !== 0) {
+        throw new Error(`\`initialFrame\` must be an integer, but is ${JSON.stringify(initialFrame)}`);
+    }
+    if (initialFrame > durationInFrames - 1) {
+        throw new Error(`\`initialFrame\` must be less or equal than \`durationInFrames - 1\`, but is ${JSON.stringify(initialFrame)}`);
+    }
+};
+exports.validateInitialFrame = validateInitialFrame;

package/dist/esm/MediaVolumeSlider.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+export declare const VOLUME_SLIDER_WIDTH = 100;
+export declare const MediaVolumeSlider: React.FC<{
+    displayVerticalVolumeSlider: Boolean;
+}>;