@remotion/player 4.0.0-lambda.1 → 4.0.0-newpathfunctions.13

package/dist/cjs/index.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PlayerInternals = exports.Thumbnail = exports.Player = void 0;
+const calculate_scale_1 = require("./calculate-scale");
+const emitter_context_1 = require("./emitter-context");
+const event_emitter_1 = require("./event-emitter");
+const use_hover_state_1 = require("./use-hover-state");
+const use_playback_1 = require("./use-playback");
+const use_player_1 = require("./use-player");
+const use_element_size_1 = require("./utils/use-element-size");
+var Player_1 = require("./Player");
+Object.defineProperty(exports, "Player", { enumerable: true, get: function () { return Player_1.Player; } });
+var Thumbnail_1 = require("./Thumbnail");
+Object.defineProperty(exports, "Thumbnail", { enumerable: true, get: function () { return Thumbnail_1.Thumbnail; } });
+exports.PlayerInternals = {
+    PlayerEventEmitterContext: emitter_context_1.PlayerEventEmitterContext,
+    PlayerEmitter: event_emitter_1.PlayerEmitter,
+    usePlayer: use_player_1.usePlayer,
+    usePlayback: use_playback_1.usePlayback,
+    useElementSize: use_element_size_1.useElementSize,
+    calculateCanvasTransformation: calculate_scale_1.calculateCanvasTransformation,
+    useHoverState: use_hover_state_1.useHoverState,
+    updateAllElementsSizes: use_element_size_1.updateAllElementsSizes,
+    calculateScale: calculate_scale_1.calculateScale,
+};

package/dist/cjs/player-css-classname.d.ts

@@ -0,0 +1 @@
+export declare const PLAYER_CSS_CLASSNAME = "__remotion-player";

package/dist/cjs/player-css-classname.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PLAYER_CSS_CLASSNAME = void 0;
+exports.PLAYER_CSS_CLASSNAME = '__remotion-player';

package/dist/cjs/player-methods.d.ts

@@ -0,0 +1,24 @@
+import type { SyntheticEvent } from 'react';
+import type { PlayerEmitter } from './event-emitter';
+export declare type ThumbnailMethods = {
+    getContainerNode: () => HTMLDivElement | null;
+    getScale: () => number;
+};
+export declare type PlayerMethods = ThumbnailMethods & {
+    play: (e?: SyntheticEvent) => void;
+    pause: () => void;
+    toggle: (e?: SyntheticEvent) => void;
+    seekTo: (frame: number) => void;
+    getCurrentFrame: () => number;
+    requestFullscreen: () => void;
+    exitFullscreen: () => void;
+    isFullscreen: () => void;
+    setVolume: (num: number) => void;
+    getVolume: () => number;
+    isMuted: () => boolean;
+    isPlaying: () => boolean;
+    mute: () => void;
+    unmute: () => void;
+};
+export declare type ThumbnailRef = PlayerEmitter & ThumbnailMethods;
+export declare type PlayerRef = PlayerEmitter & PlayerMethods;

package/dist/cjs/player-methods.js

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

package/dist/cjs/test/index.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/cjs/test/index.test.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const vitest_1 = require("vitest");
+const use_player_1 = require("../use-player");
+(0, vitest_1.test)('It should throw an error if not being used inside a RemotionRoot', () => {
+    (0, vitest_1.expect)(() => {
+        (0, use_player_1.usePlayer)();
+    }).toThrow();
+});

package/dist/cjs/test/test-utils.d.ts

@@ -0,0 +1,6 @@
+import type { queries, RenderOptions } from '@testing-library/react';
+import type { FC, ReactElement } from 'react';
+declare const HelloWorld: FC;
+declare const customRender: (ui: ReactElement, options?: Omit<RenderOptions, 'queries'>) => import("@testing-library/react").RenderResult<typeof queries, HTMLElement, HTMLElement>;
+export * from '@testing-library/react';
+export { customRender as render, HelloWorld };

package/dist/cjs/test/test-utils.js

@@ -0,0 +1,32 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HelloWorld = exports.render = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@testing-library/react");
+const HelloWorld = () => {
+    return (0, jsx_runtime_1.jsx)("div", { children: "Hello World" });
+};
+exports.HelloWorld = HelloWorld;
+const AllTheProviders = ({ children }) => {
+    // overwriting console.error console does not gets poluted with all the errors
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    window.console.error = () => { };
+    return (0, jsx_runtime_1.jsx)("div", { children: children });
+};
+const customRender = (ui, options) => (0, react_1.render)(ui, { wrapper: AllTheProviders, ...options });
+exports.render = customRender;
+__exportStar(require("@testing-library/react"), exports);

package/dist/cjs/test/validate-in-out-frames.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/cjs/test/validate-in-out-frames.test.js

@@ -0,0 +1,56 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const vitest_1 = require("vitest");
+const validate_in_out_frame_1 = require("../utils/validate-in-out-frame");
+(0, vitest_1.test)('Validate in out frames', () => {
+    (0, vitest_1.expect)(() => (0, validate_in_out_frame_1.validateInOutFrames)({
+        durationInFrames: 200,
+        inFrame: 201,
+        outFrame: undefined,
+    })).toThrow(/inFrame must be less than \(durationInFrames - 1\)/);
+    (0, vitest_1.expect)(() => (0, validate_in_out_frame_1.validateInOutFrames)({
+        durationInFrames: 200,
+        inFrame: 199,
+        outFrame: 201,
+    })).toThrow(/outFrame must be less than \(durationInFrames - 1\)/);
+    (0, vitest_1.expect)(() => (0, validate_in_out_frame_1.validateInOutFrames)({
+        durationInFrames: 200,
+        inFrame: -10,
+        outFrame: null,
+    })).toThrow(/inFrame must be greater than 0, but is -10/);
+    (0, vitest_1.expect)(() => (0, validate_in_out_frame_1.validateInOutFrames)({
+        durationInFrames: 200,
+        inFrame: null,
+        outFrame: -10,
+    })).toThrow(/outFrame must be greater than 0, but is -10/);
+    (0, vitest_1.expect)(() => (0, validate_in_out_frame_1.validateInOutFrames)({
+        durationInFrames: 200,
+        inFrame: 1.5,
+        outFrame: null,
+    })).toThrow(/"inFrame" must be an integer, but is 1.5/);
+    (0, vitest_1.expect)(() => (0, validate_in_out_frame_1.validateInOutFrames)({
+        durationInFrames: 200,
+        inFrame: 20,
+        outFrame: 20,
+    })).toThrow(/outFrame must be greater than inFrame, but is 20/);
+    (0, vitest_1.expect)(() => (0, validate_in_out_frame_1.validateInOutFrames)({
+        durationInFrames: 200,
+        inFrame: 21,
+        outFrame: 20,
+    })).toThrow(/outFrame must be greater than inFrame, but is 20 <= 21/);
+    (0, vitest_1.expect)(() => (0, validate_in_out_frame_1.validateInOutFrames)({
+        durationInFrames: 200,
+        inFrame: null,
+        outFrame: 20,
+    })).not.toThrow();
+    (0, vitest_1.expect)(() => (0, validate_in_out_frame_1.validateInOutFrames)({
+        durationInFrames: 200,
+        inFrame: null,
+        outFrame: null,
+    })).not.toThrow();
+    (0, vitest_1.expect)(() => (0, validate_in_out_frame_1.validateInOutFrames)({
+        durationInFrames: 200,
+        inFrame: 10,
+        outFrame: 20,
+    })).not.toThrow();
+});

package/dist/cjs/test/validate-prop.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/cjs/test/validate-prop.test.js

@@ -0,0 +1,131 @@
+"use strict";
+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");
+(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
+        , { 
+            // @ts-expect-error
+            compositionWidth: null, errorFallback: () => 'something went wrong', compositionHeight: 400, fps: 30, durationInFrames: 500, component: test_utils_1.HelloWorld, controls: true, showVolumeControls: true }));
+    }
+    catch (e) {
+        (0, vitest_1.expect)(e.message).toMatch(/'compositionWidth' must be a number but got 'object' instead/);
+    }
+});
+(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) {
+        (0, vitest_1.expect)(e.message).toMatch(/'compositionHeight' must be a number but got 'undefined' instead/);
+    }
+});
+(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) {
+        (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', 
+            // @ts-expect-error
+            fps: undefined, durationInFrames: 500, component: test_utils_1.HelloWorld, controls: true, showVolumeControls: true }));
+    }
+    catch (e) {
+        (0, vitest_1.expect)(e.message).toMatch(/"fps" must be a number, but you passed a value of type undefined/);
+    }
+});
+(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) {
+        (0, vitest_1.expect)(e.message).toMatch(/durationInFrames` must be a number, but is undefined/);
+    }
+});
+(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) {
+        (0, vitest_1.expect)(e.message).toMatch(/The lowest possible playback rate is -4. You passed: -5/);
+    }
+});
+(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) {
+        (0, vitest_1.expect)(e.message).toMatch(/A playback rate of 0 is not supported./);
+    }
+});
+(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) {
+        (0, vitest_1.expect)(e.message).toMatch(/A playback rate of 0 is not supported./);
+    }
+});
+(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 }));
+    (0, vitest_1.expect)(true).toBe(true);
+});
+(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,
+                height: 400,
+                fps: 30,
+                durationInFrames: 500,
+                component: test_utils_1.HelloWorld,
+            } }));
+    }).toThrow(/'component' must not be the 'Composition' component\. Pass your own React/);
+});
+(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: {
+                id: 'HelloWorld',
+                width: 500,
+                height: 400,
+                fps: 30,
+                durationInFrames: 500,
+                component: test_utils_1.HelloWorld,
+            } }));
+    }).toThrow(/'component' should not be an instance of <Composition\/>\. Pass the React component dir/);
+});
+vitest_1.test.each([
+    ['controls'],
+    ['loop'],
+    ['autoPlay'],
+    ['showVolumeControls'],
+    ['allowFullscreen'],
+    ['clickToPlay'],
+    ['doubleClickToFullscreen'],
+])('No durationInFrames should give errors %s', (a) => {
+    const props = {};
+    props[a] = 'hey';
+    try {
+        (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) {
+        (0, vitest_1.expect)(e.message).toMatch(`'${a}' must be a boolean or undefined but got 'string' instead`);
+    }
+});

package/dist/cjs/use-hover-state.d.ts

@@ -0,0 +1 @@
+export declare const useHoverState: (ref: React.RefObject<HTMLDivElement>) => boolean;

package/dist/cjs/use-hover-state.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useHoverState = void 0;
+const react_1 = require("react");
+const useHoverState = (ref) => {
+    const [hovered, stetHovered] = (0, react_1.useState)(false);
+    (0, react_1.useEffect)(() => {
+        const { current } = ref;
+        if (!current) {
+            return;
+        }
+        const onHover = () => {
+            stetHovered(true);
+        };
+        const onLeave = () => {
+            stetHovered(false);
+        };
+        current.addEventListener('mouseenter', onHover);
+        current.addEventListener('mouseleave', onLeave);
+        return () => {
+            current.removeEventListener('mouseenter', onHover);
+            current.removeEventListener('mouseenter', onLeave);
+        };
+    }, [ref]);
+    return hovered;
+};
+exports.useHoverState = useHoverState;

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/cjs/use-playback.js

@@ -0,0 +1,92 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.usePlayback = void 0;
+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, 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 frameRef = (0, react_1.useRef)(frame);
+    frameRef.current = frame;
+    const lastTimeUpdateEvent = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        if (!config) {
+            return;
+        }
+        if (!playing) {
+            return;
+        }
+        let hasBeenStopped = false;
+        let reqAnimFrameCall = null;
+        const startedTime = performance.now();
+        let framesAdvanced = 0;
+        const stop = () => {
+            hasBeenStopped = true;
+            if (reqAnimFrameCall !== null) {
+                cancelAnimationFrame(reqAnimFrameCall);
+            }
+        };
+        const callback = () => {
+            const time = performance.now() - startedTime;
+            const actualLastFrame = outFrame !== null && outFrame !== void 0 ? outFrame : config.durationInFrames - 1;
+            const actualFirstFrame = inFrame !== null && inFrame !== void 0 ? inFrame : 0;
+            const { nextFrame, framesToAdvance, hasEnded } = (0, calculate_next_frame_1.calculateNextFrame)({
+                time,
+                currentFrame: frameRef.current,
+                playbackSpeed: playbackRate,
+                fps: config.fps,
+                actualFirstFrame,
+                actualLastFrame,
+                framesAdvanced,
+                shouldLoop: loop,
+            });
+            framesAdvanced += framesToAdvance;
+            if (nextFrame !== frameRef.current &&
+                (!hasEnded || moveToBeginningWhenEnded)) {
+                setFrame(nextFrame);
+            }
+            if (hasEnded) {
+                stop();
+                pause();
+                emitter.dispatchEnded();
+                return;
+            }
+            if (!hasBeenStopped) {
+                reqAnimFrameCall = requestAnimationFrame(callback);
+            }
+        };
+        reqAnimFrameCall = requestAnimationFrame(callback);
+        return () => {
+            stop();
+        };
+    }, [
+        config,
+        loop,
+        pause,
+        playing,
+        setFrame,
+        emitter,
+        playbackRate,
+        inFrame,
+        outFrame,
+        moveToBeginningWhenEnded,
+    ]);
+    (0, react_1.useEffect)(() => {
+        const interval = setInterval(() => {
+            if (lastTimeUpdateEvent.current === frameRef.current) {
+                return;
+            }
+            emitter.dispatchTimeUpdate({ frame: frameRef.current });
+            lastTimeUpdateEvent.current = frameRef.current;
+        }, 250);
+        return () => clearInterval(interval);
+    }, [emitter]);
+    (0, react_1.useEffect)(() => {
+        emitter.dispatchFrameUpdate({ frame });
+    }, [emitter, frame]);
+};
+exports.usePlayback = usePlayback;

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

@@ -0,0 +1,19 @@
+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/cjs/use-player.js

@@ -0,0 +1,132 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.usePlayer = void 0;
+const react_1 = require("react");
+const remotion_1 = require("remotion");
+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);
+    const { audioAndVideoTags } = (0, react_1.useContext)(remotion_1.Internals.Timeline.TimelineContext);
+    const frameRef = (0, react_1.useRef)();
+    frameRef.current = frame;
+    const video = remotion_1.Internals.useVideo();
+    const config = remotion_1.Internals.useUnsafeVideoConfig();
+    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');
+    }
+    const seek = (0, react_1.useCallback)((newFrame) => {
+        setTimelinePosition(newFrame);
+        emitter.dispatchSeek(newFrame);
+    }, [emitter, setTimelinePosition]);
+    const play = (0, react_1.useCallback)((e) => {
+        if (imperativePlaying.current) {
+            return;
+        }
+        setHasPlayed(true);
+        if (isLastFrame) {
+            seek(0);
+        }
+        /**
+         * Play silent audio tags to warm them up for autoplay
+         */
+        if (audioContext && audioContext.numberOfAudioTags > 0 && e) {
+            audioContext.playAllAudios();
+        }
+        /**
+         * Play audios and videos directly here so they can benefit from
+         * being triggered by a click
+         */
+        audioAndVideoTags.current.forEach((a) => a.play());
+        imperativePlaying.current = true;
+        setPlaying(true);
+        playStart.current = frameRef.current;
+        emitter.dispatchPlay();
+    }, [
+        imperativePlaying,
+        isLastFrame,
+        audioContext,
+        setPlaying,
+        emitter,
+        seek,
+        audioAndVideoTags,
+    ]);
+    const pause = (0, react_1.useCallback)(() => {
+        if (imperativePlaying.current) {
+            imperativePlaying.current = false;
+            setPlaying(false);
+            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) {
+            return null;
+        }
+        if (imperativePlaying.current) {
+            return;
+        }
+        setFrame((f) => {
+            return Math.max(0, f - frames);
+        });
+    }, [hasVideo, imperativePlaying, setFrame]);
+    const frameForward = (0, react_1.useCallback)((frames) => {
+        if (!hasVideo) {
+            return null;
+        }
+        if (imperativePlaying.current) {
+            return;
+        }
+        setFrame((f) => Math.min(lastFrame, f + frames));
+    }, [hasVideo, imperativePlaying, lastFrame, setFrame]);
+    const returnValue = (0, react_1.useMemo)(() => {
+        return {
+            frameBack,
+            frameForward,
+            isLastFrame,
+            emitter,
+            playing,
+            play,
+            pause,
+            seek,
+            isFirstFrame,
+            getCurrentFrame: () => frameRef.current,
+            isPlaying: () => imperativePlaying.current,
+            pauseAndReturnToPlayStart,
+            hasPlayed,
+        };
+    }, [
+        frameBack,
+        frameForward,
+        isLastFrame,
+        emitter,
+        playing,
+        play,
+        pause,
+        seek,
+        isFirstFrame,
+        pauseAndReturnToPlayStart,
+        imperativePlaying,
+        hasPlayed,
+    ]);
+    return returnValue;
+};
+exports.usePlayer = usePlayer;

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