@remotion/player 3.3.55 → 3.3.56

package/dist/esm/event-emitter.js

@@ -1,82 +0,0 @@
-export class PlayerEmitter {
-    constructor() {
-        this.listeners = {
-            ended: [],
-            error: [],
-            pause: [],
-            play: [],
-            ratechange: [],
-            seeked: [],
-            timeupdate: [],
-            frameupdate: [],
-            fullscreenchange: [],
-        };
-    }
-    addEventListener(name, callback) {
-        this.listeners[name].push(callback);
-    }
-    removeEventListener(name, callback) {
-        this.listeners[name] = this.listeners[name].filter((l) => l !== callback);
-    }
-    dispatchEvent(dispatchName, context) {
-        this.listeners[dispatchName].forEach((callback) => {
-            callback({ detail: context });
-        });
-    }
-    dispatchSeek(frame) {
-        this.dispatchEvent('seeked', {
-            frame,
-        });
-    }
-    dispatchPause() {
-        this.dispatchEvent('pause', undefined);
-    }
-    dispatchPlay() {
-        this.dispatchEvent('play', undefined);
-    }
-    dispatchEnded() {
-        this.dispatchEvent('ended', undefined);
-    }
-    dispatchRatechange(playbackRate) {
-        this.dispatchEvent('ratechange', {
-            playbackRate,
-        });
-    }
-    dispatchError(error) {
-        this.dispatchEvent('error', {
-            error,
-        });
-    }
-    dispatchTimeUpdate(event) {
-        this.dispatchEvent('timeupdate', event);
-    }
-    dispatchFrameUpdate(event) {
-        this.dispatchEvent('frameupdate', event);
-    }
-    dispatchFullscreenChangeUpdate(event) {
-        this.dispatchEvent('fullscreenchange', event);
-    }
-}
-export class ThumbnailEmitter {
-    constructor() {
-        this.listeners = {
-            error: [],
-        };
-    }
-    addEventListener(name, callback) {
-        this.listeners[name].push(callback);
-    }
-    removeEventListener(name, callback) {
-        this.listeners[name] = this.listeners[name].filter((l) => l !== callback);
-    }
-    dispatchEvent(dispatchName, context) {
-        this.listeners[dispatchName].forEach((callback) => {
-            callback({ detail: context });
-        });
-    }
-    dispatchError(error) {
-        this.dispatchEvent('error', {
-            error,
-        });
-    }
-}

package/dist/esm/format-time.js

@@ -1,5 +0,0 @@
-export const formatTime = (timeInSeconds) => {
-    const minutes = Math.floor(timeInSeconds / 60);
-    const seconds = Math.floor(timeInSeconds - minutes * 60);
-    return `${String(minutes)}:${String(seconds).padStart(2, '0')}`;
-};

package/dist/esm/icons.js

@@ -1,42 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export const ICON_SIZE = 25;
-export const fullscreenIconSize = 16;
-const rotate = {
-    transform: `rotate(90deg)`,
-};
-export const PlayIcon = () => {
-    return (_jsx("svg", { width: ICON_SIZE, height: ICON_SIZE, viewBox: "-100 -100 400 400", style: rotate, children: _jsx("path", { fill: "#fff", stroke: "#fff", strokeWidth: "100", strokeLinejoin: "round", d: "M 2 172 a 196 100 0 0 0 195 5 A 196 240 0 0 0 100 2.259 A 196 240 0 0 0 2 172 z" }) }));
-};
-export const PauseIcon = () => {
-    return (_jsxs("svg", { viewBox: "0 0 100 100", width: ICON_SIZE, height: ICON_SIZE, children: [_jsx("rect", { x: "25", y: "20", width: "20", height: "60", fill: "#fff", ry: "5", rx: "5" }), _jsx("rect", { x: "55", y: "20", width: "20", height: "60", fill: "#fff", ry: "5", rx: "5" })] }));
-};
-export const FullscreenIcon = ({ isFullscreen, }) => {
-    const strokeWidth = 6;
-    const viewSize = 32;
-    const out = isFullscreen ? 0 : strokeWidth / 2;
-    const middleInset = isFullscreen ? strokeWidth * 1.6 : strokeWidth / 2;
-    const inset = isFullscreen ? strokeWidth * 1.6 : strokeWidth * 2;
-    return (_jsxs("svg", { viewBox: `0 0 ${viewSize} ${viewSize}`, height: fullscreenIconSize, width: fullscreenIconSize, children: [_jsx("path", { d: `
-				M ${out} ${inset}
-				L ${middleInset} ${middleInset}
-				L ${inset} ${out}
-				`, stroke: "#fff", strokeWidth: strokeWidth, fill: "none" }), _jsx("path", { d: `
-				M ${viewSize - out} ${inset}
-				L ${viewSize - middleInset} ${middleInset}
-				L ${viewSize - inset} ${out}
-				`, stroke: "#fff", strokeWidth: strokeWidth, fill: "none" }), _jsx("path", { d: `
-				M ${out} ${viewSize - inset}
-				L ${middleInset} ${viewSize - middleInset}
-				L ${inset} ${viewSize - out}
-				`, stroke: "#fff", strokeWidth: strokeWidth, fill: "none" }), _jsx("path", { d: `
-				M ${viewSize - out} ${viewSize - inset}
-				L ${viewSize - middleInset} ${viewSize - middleInset}
-				L ${viewSize - inset} ${viewSize - out}
-				`, stroke: "#fff", strokeWidth: strokeWidth, fill: "none" })] }));
-};
-export const VolumeOffIcon = () => {
-    return (_jsx("svg", { width: ICON_SIZE, height: ICON_SIZE, viewBox: "0 0 24 24", children: _jsx("path", { d: "M3.63 3.63a.996.996 0 000 1.41L7.29 8.7 7 9H4c-.55 0-1 .45-1 1v4c0 .55.45 1 1 1h3l3.29 3.29c.63.63 1.71.18 1.71-.71v-4.17l4.18 4.18c-.49.37-1.02.68-1.6.91-.36.15-.58.53-.58.92 0 .72.73 1.18 1.39.91.8-.33 1.55-.77 2.22-1.31l1.34 1.34a.996.996 0 101.41-1.41L5.05 3.63c-.39-.39-1.02-.39-1.42 0zM19 12c0 .82-.15 1.61-.41 2.34l1.53 1.53c.56-1.17.88-2.48.88-3.87 0-3.83-2.4-7.11-5.78-8.4-.59-.23-1.22.23-1.22.86v.19c0 .38.25.71.61.85C17.18 6.54 19 9.06 19 12zm-8.71-6.29l-.17.17L12 7.76V6.41c0-.89-1.08-1.33-1.71-.7zM16.5 12A4.5 4.5 0 0014 7.97v1.79l2.48 2.48c.01-.08.02-.16.02-.24z", fill: "#fff" }) }));
-};
-export const VolumeOnIcon = () => {
-    return (_jsx("svg", { width: ICON_SIZE, height: ICON_SIZE, viewBox: "0 0 24 24", children: _jsx("path", { d: "M3 10v4c0 .55.45 1 1 1h3l3.29 3.29c.63.63 1.71.18 1.71-.71V6.41c0-.89-1.08-1.34-1.71-.71L7 9H4c-.55 0-1 .45-1 1zm13.5 2A4.5 4.5 0 0014 7.97v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 4.45v.2c0 .38.25.71.6.85C17.18 6.53 19 9.06 19 12s-1.82 5.47-4.4 6.5c-.36.14-.6.47-.6.85v.2c0 .63.63 1.07 1.21.85C18.6 19.11 21 15.84 21 12s-2.4-7.11-5.79-8.4c-.58-.23-1.21.22-1.21.85z", fill: "#fff" }) }));
-};

package/dist/esm/index.js

@@ -1,20 +0,0 @@
-import { calculateCanvasTransformation, calculateScale } from './calculate-scale.js';
-import { PlayerEventEmitterContext } from './emitter-context.js';
-import { PlayerEmitter } from './event-emitter.js';
-import { useHoverState } from './use-hover-state.js';
-import { usePlayback } from './use-playback.js';
-import { usePlayer } from './use-player.js';
-import { updateAllElementsSizes, useElementSize } from './utils/use-element-size.js';
-export { Player } from './Player.js';
-export { Thumbnail } from './Thumbnail.js';
-export const PlayerInternals = {
-    PlayerEventEmitterContext,
-    PlayerEmitter,
-    usePlayer,
-    usePlayback,
-    useElementSize,
-    calculateCanvasTransformation,
-    useHoverState,
-    updateAllElementsSizes,
-    calculateScale,
-};

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

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

package/dist/esm/player-methods.js

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

package/dist/esm/test/index.test.js

@@ -1,7 +0,0 @@
-import { expect, test } from 'vitest';
-import { usePlayer } from '../use-player.js';
-test('It should throw an error if not being used inside a RemotionRoot', () => {
-    expect(() => {
-        usePlayer();
-    }).toThrow();
-});

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

@@ -1,14 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { render } from '@testing-library/react';
-const HelloWorld = () => {
-    return _jsx("div", { children: "Hello World" });
-};
-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 _jsx("div", { children: children });
-};
-const customRender = (ui, options) => render(ui, { wrapper: AllTheProviders, ...options });
-export * from '@testing-library/react';
-export { customRender as render, HelloWorld };

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

@@ -1,54 +0,0 @@
-import { expect, test } from 'vitest';
-import { validateInOutFrames } from '../utils/validate-in-out-frame.js';
-test('Validate in out frames', () => {
-    expect(() => validateInOutFrames({
-        durationInFrames: 200,
-        inFrame: 201,
-        outFrame: undefined,
-    })).toThrow(/inFrame must be less than \(durationInFrames - 1\)/);
-    expect(() => validateInOutFrames({
-        durationInFrames: 200,
-        inFrame: 199,
-        outFrame: 201,
-    })).toThrow(/outFrame must be less than \(durationInFrames - 1\)/);
-    expect(() => validateInOutFrames({
-        durationInFrames: 200,
-        inFrame: -10,
-        outFrame: null,
-    })).toThrow(/inFrame must be greater than 0, but is -10/);
-    expect(() => validateInOutFrames({
-        durationInFrames: 200,
-        inFrame: null,
-        outFrame: -10,
-    })).toThrow(/outFrame must be greater than 0, but is -10/);
-    expect(() => validateInOutFrames({
-        durationInFrames: 200,
-        inFrame: 1.5,
-        outFrame: null,
-    })).toThrow(/"inFrame" must be an integer, but is 1.5/);
-    expect(() => validateInOutFrames({
-        durationInFrames: 200,
-        inFrame: 20,
-        outFrame: 20,
-    })).toThrow(/outFrame must be greater than inFrame, but is 20/);
-    expect(() => validateInOutFrames({
-        durationInFrames: 200,
-        inFrame: 21,
-        outFrame: 20,
-    })).toThrow(/outFrame must be greater than inFrame, but is 20 <= 21/);
-    expect(() => validateInOutFrames({
-        durationInFrames: 200,
-        inFrame: null,
-        outFrame: 20,
-    })).not.toThrow();
-    expect(() => validateInOutFrames({
-        durationInFrames: 200,
-        inFrame: null,
-        outFrame: null,
-    })).not.toThrow();
-    expect(() => validateInOutFrames({
-        durationInFrames: 200,
-        inFrame: 10,
-        outFrame: 20,
-    })).not.toThrow();
-});

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

@@ -1,129 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Composition } from 'remotion';
-import { expect, test } from 'vitest';
-import { Player } from '../index.js';
-import { HelloWorld, render } from './test-utils.js';
-test('no compositionWidth should give errors', () => {
-    try {
-        render(_jsx(Player
-        // @ts-expect-error
-        , { 
-            // @ts-expect-error
-            compositionWidth: null, errorFallback: () => 'something went wrong', compositionHeight: 400, fps: 30, durationInFrames: 500, component: HelloWorld, controls: true, showVolumeControls: true }));
-    }
-    catch (e) {
-        expect(e.message).toMatch(/'compositionWidth' must be a number but got 'object' instead/);
-    }
-});
-test('no compositionHeight should give errors', () => {
-    try {
-        render(_jsx(Player, { compositionWidth: 400, errorFallback: () => 'something went wrong', 
-            // @ts-expect-error
-            compositionHeight: undefined, fps: 30, durationInFrames: 500, component: HelloWorld, controls: true, showVolumeControls: true }));
-    }
-    catch (e) {
-        expect(e.message).toMatch(/'compositionHeight' must be a number but got 'undefined' instead/);
-    }
-});
-test('No fps should give errors', () => {
-    try {
-        render(_jsx(Player, { compositionWidth: 500, compositionHeight: 400, errorFallback: () => 'something went wrong', 
-            // @ts-expect-error
-            fps: null, durationInFrames: 500, component: HelloWorld, controls: true, showVolumeControls: true }));
-    }
-    catch (e) {
-        expect(e.message).toMatch(/"fps" must be a number, but you passed a value of type object/);
-    }
-    try {
-        render(_jsx(Player, { compositionWidth: 500, compositionHeight: 400, errorFallback: () => 'something went wrong', 
-            // @ts-expect-error
-            fps: undefined, durationInFrames: 500, component: HelloWorld, controls: true, showVolumeControls: true }));
-    }
-    catch (e) {
-        expect(e.message).toMatch(/"fps" must be a number, but you passed a value of type undefined/);
-    }
-});
-test('No durationInFrames should give errors', () => {
-    try {
-        render(_jsx(Player, { compositionWidth: 500, compositionHeight: 400, errorFallback: () => 'something went wrong', fps: 30, 
-            // @ts-expect-error
-            durationInFrames: undefined, component: HelloWorld, controls: true, showVolumeControls: true }));
-    }
-    catch (e) {
-        expect(e.message).toMatch(/durationInFrames` must be a number, but is undefined/);
-    }
-});
-test('Invalid playbackRate should give error', () => {
-    try {
-        render(_jsx(Player, { compositionWidth: 500, compositionHeight: 400, fps: 30, durationInFrames: 500, component: HelloWorld, controls: true, showVolumeControls: true, playbackRate: -5 }));
-    }
-    catch (e) {
-        expect(e.message).toMatch(/The lowest possible playback rate is -4. You passed: -5/);
-    }
-});
-test('playbackRate of 0 should not be possible', () => {
-    try {
-        render(_jsx(Player, { compositionWidth: 500, compositionHeight: 400, fps: 30, durationInFrames: 500, component: HelloWorld, controls: true, showVolumeControls: true, playbackRate: 0 }));
-    }
-    catch (e) {
-        expect(e.message).toMatch(/A playback rate of 0 is not supported./);
-    }
-});
-test('playbackRate of wrong type should not be possible', () => {
-    try {
-        render(_jsx(Player, { compositionWidth: 500, compositionHeight: 400, fps: 30, durationInFrames: 500, component: HelloWorld, controls: true, showVolumeControls: true, 
-            // @ts-expect-error
-            playbackRate: 'hi' }));
-    }
-    catch (e) {
-        expect(e.message).toMatch(/A playback rate of 0 is not supported./);
-    }
-});
-test('playbackRate of undefined should be okay', () => {
-    render(_jsx(Player, { compositionWidth: 500, compositionHeight: 400, fps: 30, durationInFrames: 500, component: HelloWorld, controls: true, showVolumeControls: true }));
-    expect(true).toBe(true);
-});
-test('passing in <Composition /> instance should not be possible', () => {
-    expect(() => {
-        render(_jsx(Player, { compositionWidth: 500, compositionHeight: 400, fps: 30, durationInFrames: 500, component: Composition, controls: true, showVolumeControls: true, inputProps: {
-                id: 'HelloWorld',
-                width: 500,
-                height: 400,
-                fps: 30,
-                durationInFrames: 500,
-                component: HelloWorld,
-            } }));
-    }).toThrow(/'component' must not be the 'Composition' component\. Pass your own React/);
-});
-test('passing in <Composition /> instance should not be possible', () => {
-    expect(() => {
-        render(_jsx(Player, { compositionWidth: 500, compositionHeight: 400, fps: 30, durationInFrames: 500, 
-            // @ts-expect-error
-            component: _jsx(Composition, { durationInFrames: 30, fps: 30, height: 10, width: 10, id: "hello", component: HelloWorld }), controls: true, showVolumeControls: true, inputProps: {
-                id: 'HelloWorld',
-                width: 500,
-                height: 400,
-                fps: 30,
-                durationInFrames: 500,
-                component: HelloWorld,
-            } }));
-    }).toThrow(/'component' should not be an instance of <Composition\/>\. Pass the React component dir/);
-});
-test.each([
-    ['controls'],
-    ['loop'],
-    ['autoPlay'],
-    ['showVolumeControls'],
-    ['allowFullscreen'],
-    ['clickToPlay'],
-    ['doubleClickToFullscreen'],
-])('No durationInFrames should give errors %s', (a) => {
-    const props = {};
-    props[a] = 'hey';
-    try {
-        render(_jsx(Player, { compositionWidth: 500, compositionHeight: 400, errorFallback: () => 'something went wrong', fps: 30, durationInFrames: 100, component: HelloWorld, ...props }));
-    }
-    catch (e) {
-        expect(e.message).toMatch(`'${a}' must be a boolean or undefined but got 'string' instead`);
-    }
-});

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

@@ -1,23 +0,0 @@
-import { useEffect, useState } from 'react';
-export const useHoverState = (ref) => {
-    const [hovered, stetHovered] = useState(false);
-    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;
-};

package/dist/esm/use-playback.js

@@ -1,88 +0,0 @@
-import { useEffect, useRef } from 'react';
-import { Internals } from 'remotion';
-import { calculateNextFrame } from './calculate-next-frame.js';
-import { usePlayer } from './use-player.js';
-export const usePlayback = ({ loop, playbackRate, moveToBeginningWhenEnded, inFrame, outFrame, }) => {
-    const frame = Internals.Timeline.useTimelinePosition();
-    const config = Internals.useUnsafeVideoConfig();
-    const { playing, pause, emitter } = usePlayer();
-    const setFrame = Internals.Timeline.useTimelineSetFrame();
-    const frameRef = useRef(frame);
-    frameRef.current = frame;
-    const lastTimeUpdateEvent = useRef(null);
-    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 } = 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,
-    ]);
-    useEffect(() => {
-        const interval = setInterval(() => {
-            if (lastTimeUpdateEvent.current === frameRef.current) {
-                return;
-            }
-            emitter.dispatchTimeUpdate({ frame: frameRef.current });
-            lastTimeUpdateEvent.current = frameRef.current;
-        }, 250);
-        return () => clearInterval(interval);
-    }, [emitter]);
-    useEffect(() => {
-        emitter.dispatchFrameUpdate({ frame });
-    }, [emitter, frame]);
-};

package/dist/esm/use-player.js

@@ -1,128 +0,0 @@
-import { useCallback, useContext, useMemo, useRef, useState } from 'react';
-import { Internals } from 'remotion';
-import { PlayerEventEmitterContext } from './emitter-context.js';
-export const usePlayer = () => {
-    var _a;
-    const [playing, setPlaying, imperativePlaying] = Internals.Timeline.usePlayingState();
-    const [hasPlayed, setHasPlayed] = useState(false);
-    const frame = Internals.Timeline.useTimelinePosition();
-    const playStart = useRef(frame);
-    const setFrame = Internals.Timeline.useTimelineSetFrame();
-    const setTimelinePosition = Internals.Timeline.useTimelineSetFrame();
-    const audioContext = useContext(Internals.SharedAudioContext);
-    const { audioAndVideoTags } = useContext(Internals.Timeline.TimelineContext);
-    const frameRef = useRef();
-    frameRef.current = frame;
-    const video = Internals.useVideo();
-    const config = Internals.useUnsafeVideoConfig();
-    const emitter = useContext(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 = useCallback((newFrame) => {
-        setTimelinePosition(newFrame);
-        emitter.dispatchSeek(newFrame);
-    }, [emitter, setTimelinePosition]);
-    const play = 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 = useCallback(() => {
-        if (imperativePlaying.current) {
-            imperativePlaying.current = false;
-            setPlaying(false);
-            emitter.dispatchPause();
-        }
-    }, [emitter, imperativePlaying, setPlaying]);
-    const pauseAndReturnToPlayStart = useCallback(() => {
-        if (imperativePlaying.current) {
-            imperativePlaying.current = false;
-            setTimelinePosition(playStart.current);
-            setPlaying(false);
-            emitter.dispatchPause();
-        }
-    }, [emitter, imperativePlaying, setPlaying, setTimelinePosition]);
-    const hasVideo = Boolean(video);
-    const frameBack = useCallback((frames) => {
-        if (!hasVideo) {
-            return null;
-        }
-        if (imperativePlaying.current) {
-            return;
-        }
-        setFrame((f) => {
-            return Math.max(0, f - frames);
-        });
-    }, [hasVideo, imperativePlaying, setFrame]);
-    const frameForward = useCallback((frames) => {
-        if (!hasVideo) {
-            return null;
-        }
-        if (imperativePlaying.current) {
-            return;
-        }
-        setFrame((f) => Math.min(lastFrame, f + frames));
-    }, [hasVideo, imperativePlaying, lastFrame, setFrame]);
-    const returnValue = 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;
-};

package/dist/esm/use-thumbnail.js

@@ -1,14 +0,0 @@
-import { useContext, useMemo } from 'react';
-import { ThumbnailEmitterContext } from './emitter-context.js';
-export const useThumbnail = () => {
-    const emitter = useContext(ThumbnailEmitterContext);
-    if (!emitter) {
-        throw new TypeError('Expected Player event emitter context');
-    }
-    const returnValue = useMemo(() => {
-        return {
-            emitter,
-        };
-    }, [emitter]);
-    return returnValue;
-};

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

@@ -1,35 +0,0 @@
-import { useMemo } from 'react';
-import { fullscreenIconSize, ICON_SIZE } from './icons.js';
-import { VOLUME_SLIDER_WIDTH } from './MediaVolumeSlider.js';
-export const X_SPACER = 10;
-export const X_PADDING = 12;
-export const useVideoControlsResize = ({ allowFullscreen: allowFullScreen, playerWidth, }) => {
-    const resizeInfo = useMemo(() => {
-        const playPauseIconSize = ICON_SIZE;
-        const volumeIconSize = ICON_SIZE;
-        const _fullscreenIconSize = allowFullScreen ? fullscreenIconSize : 0;
-        const elementsSize = volumeIconSize +
-            playPauseIconSize +
-            _fullscreenIconSize +
-            X_PADDING * 2 +
-            X_SPACER * 2;
-        const maxTimeLabelWidth = playerWidth - elementsSize;
-        const maxTimeLabelWidthWithoutNegativeValue = Math.max(maxTimeLabelWidth, 0);
-        const availableTimeLabelWidthIfVolumeOpen = maxTimeLabelWidthWithoutNegativeValue - 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 < VOLUME_SLIDER_WIDTH
-            ? maxTimeLabelWidthWithoutNegativeValue
-            : availableTimeLabelWidthIfVolumeOpen;
-        const minWidthForHorizontalDisplay = computedLabelWidth + elementsSize + VOLUME_SLIDER_WIDTH;
-        const displayVerticalVolumeSlider = playerWidth < minWidthForHorizontalDisplay;
-        return {
-            maxTimeLabelWidth: maxTimeLabelWidthWithoutNegativeValue === 0
-                ? null
-                : maxTimeLabelWidthWithoutNegativeValue,
-            displayVerticalVolumeSlider,
-        };
-    }, [allowFullScreen, playerWidth]);
-    return resizeInfo;
-};