@remotion/player 3.3.45 → 3.3.52

package/dist/esm/Player.js

@@ -1,14 +1,14 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState, } from 'react';
 import { Composition, Internals } from 'remotion';
-import { PlayerEventEmitterContext } from './emitter-context';
-import { PlayerEmitter } from './event-emitter';
-import { PLAYER_CSS_CLASSNAME } from './player-css-classname';
-import PlayerUI from './PlayerUI';
-import { SharedPlayerContexts } from './SharedPlayerContext';
-import { validateInOutFrames } from './utils/validate-in-out-frame';
-import { validateInitialFrame } from './utils/validate-initial-frame';
-import { validatePlaybackRate } from './utils/validate-playbackrate';
+import { PlayerEventEmitterContext } from './emitter-context.js';
+import { PlayerEmitter } from './event-emitter.js';
+import { PLAYER_CSS_CLASSNAME } from './player-css-classname.js';
+import PlayerUI from './PlayerUI.js';
+import { SharedPlayerContexts } from './SharedPlayerContext.js';
+import { validateInOutFrames } from './utils/validate-in-out-frame.js';
+import { validateInitialFrame } from './utils/validate-initial-frame.js';
+import { validatePlaybackRate } from './utils/validate-playbackrate.js';
 export const componentOrNullIfLazy = (props) => {
     if ('component' in props) {
         return props.component;

package/dist/esm/PlayerControls.d.ts

@@ -1,6 +1,6 @@
 import type { MouseEventHandler, ReactNode } from 'react';
 import React from 'react';
-import type { usePlayer } from './use-player';
+import type { usePlayer } from './use-player.js';
 export declare type RenderPlayPauseButton = (props: {
     playing: boolean;
 }) => ReactNode;

package/dist/esm/PlayerControls.js

@@ -1,11 +1,11 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useMemo, useRef, useState } from 'react';
 import { Internals } from 'remotion';
-import { formatTime } from './format-time';
-import { FullscreenIcon, PauseIcon, PlayIcon } from './icons';
-import { MediaVolumeSlider } from './MediaVolumeSlider';
-import { PlayerSeekBar } from './PlayerSeekBar';
-import { useVideoControlsResize } from './use-video-controls-resize';
+import { formatTime } from './format-time.js';
+import { FullscreenIcon, PauseIcon, PlayIcon } from './icons.js';
+import { MediaVolumeSlider } from './MediaVolumeSlider.js';
+import { PlayerSeekBar } from './PlayerSeekBar.js';
+import { useVideoControlsResize } from './use-video-controls-resize.js';
 export const X_SPACER = 10;
 export const X_PADDING = 12;
 const gradientSteps = [

package/dist/esm/PlayerSeekBar.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { Internals, interpolate } from 'remotion';
-import { useHoverState } from './use-hover-state';
-import { usePlayer } from './use-player';
-import { useElementSize } from './utils/use-element-size';
+import { useHoverState } from './use-hover-state.js';
+import { usePlayer } from './use-player.js';
+import { useElementSize } from './utils/use-element-size.js';
 const getFrameFromX = (clientX, durationInFrames, width) => {
     var _a;
     const pos = clientX;

package/dist/esm/PlayerUI.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import type { PlayerRef } from './player-methods';
-import type { RenderFullscreenButton, RenderPlayPauseButton } from './PlayerControls';
+import type { PlayerRef } from './player-methods.js';
+import type { RenderFullscreenButton, RenderPlayPauseButton } from './PlayerControls.js';
 export declare type ErrorFallback = (info: {
     error: Error;
 }) => React.ReactNode;

package/dist/esm/PlayerUI.js

@@ -1,16 +1,16 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { forwardRef, Suspense, useCallback, useContext, useEffect, useImperativeHandle, useMemo, useRef, useState, } from 'react';
 import { Internals } from 'remotion';
-import { calculateCanvasTransformation, calculateContainerStyle, calculateOuter, calculateOuterStyle, } from './calculate-scale';
-import { ErrorBoundary } from './error-boundary';
-import { PLAYER_CSS_CLASSNAME } from './player-css-classname';
-import { Controls } from './PlayerControls';
-import { useHoverState } from './use-hover-state';
-import { usePlayback } from './use-playback';
-import { usePlayer } from './use-player';
-import { IS_NODE } from './utils/is-node';
-import { useClickPreventionOnDoubleClick } from './utils/use-click-prevention-on-double-click';
-import { useElementSize } from './utils/use-element-size';
+import { calculateCanvasTransformation, calculateContainerStyle, calculateOuter, calculateOuterStyle, } from './calculate-scale.js';
+import { ErrorBoundary } from './error-boundary.js';
+import { PLAYER_CSS_CLASSNAME } from './player-css-classname.js';
+import { Controls } from './PlayerControls.js';
+import { useHoverState } from './use-hover-state.js';
+import { usePlayback } from './use-playback.js';
+import { usePlayer } from './use-player.js';
+import { IS_NODE } from './utils/is-node.js';
+import { useClickPreventionOnDoubleClick } from './utils/use-click-prevention-on-double-click.js';
+import { useElementSize } from './utils/use-element-size.js';
 const reactVersion = React.version.split('.')[0];
 if (reactVersion === '0') {
     throw new Error(`Version ${reactVersion} of "react" is not supported by Remotion`);

package/dist/esm/SharedPlayerContext.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useCallback, useMemo, useState } from 'react';
 import { Internals } from 'remotion';
-import { getPreferredVolume, persistVolume } from './volume-persistance';
+import { getPreferredVolume, persistVolume } from './volume-persistance.js';
 export const SharedPlayerContexts = ({ children, timelineContext, inputProps, fps, compositionHeight, compositionWidth, durationInFrames, component, numberOfSharedAudioTags, }) => {
     const compositionManagerContext = useMemo(() => {
         return {

package/dist/esm/Thumbnail.d.ts

@@ -1,8 +1,8 @@
 import type { CSSProperties, MutableRefObject } from 'react';
 import type { CompProps } from 'remotion';
-import type { ThumbnailMethods } from './player-methods';
-import type { ErrorFallback, RenderLoading } from './PlayerUI';
-import type { PropsIfHasProps } from './utils/props-if-has-props';
+import type { ThumbnailMethods } from './player-methods.js';
+import type { ErrorFallback, RenderLoading } from './PlayerUI.js';
+import type { PropsIfHasProps } from './utils/props-if-has-props.js';
 declare type ThumbnailProps<T> = PropsIfHasProps<T> & CompProps<T> & {
     frameToDisplay: number;
     style?: CSSProperties;

package/dist/esm/Thumbnail.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef, useImperativeHandle, useMemo, useRef, useState, } from 'react';
 import { Internals, random } from 'remotion';
-import { ThumbnailEmitterContext } from './emitter-context';
-import { ThumbnailEmitter } from './event-emitter';
-import { SharedPlayerContexts } from './SharedPlayerContext';
-import ThumbnailUI from './ThumbnailUI';
+import { ThumbnailEmitterContext } from './emitter-context.js';
+import { ThumbnailEmitter } from './event-emitter.js';
+import { SharedPlayerContexts } from './SharedPlayerContext.js';
+import ThumbnailUI from './ThumbnailUI.js';
 export const ThumbnailFn = ({ frameToDisplay, style, inputProps, compositionHeight, compositionWidth, durationInFrames, fps, className, errorFallback = () => '⚠️', renderLoading, ...componentProps }, ref) => {
     const [thumbnailId] = useState(() => String(random(null)));
     const rootRef = useRef(null);

package/dist/esm/ThumbnailUI.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import type { ThumbnailMethods } from './player-methods';
-import type { ErrorFallback, RenderLoading } from './PlayerUI';
+import type { ThumbnailMethods } from './player-methods.js';
+import type { ErrorFallback, RenderLoading } from './PlayerUI.js';
 declare const _default: React.ForwardRefExoticComponent<{
     inputProps: unknown;
     style?: React.CSSProperties | undefined;

package/dist/esm/ThumbnailUI.js

@@ -1,12 +1,12 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import React, { forwardRef, Suspense, useCallback, useImperativeHandle, useMemo, useRef, } from 'react';
 import { Internals } from 'remotion';
-import { calculateCanvasTransformation, calculateContainerStyle, calculateOuter, calculateOuterStyle, } from './calculate-scale';
-import { ErrorBoundary } from './error-boundary';
-import { PLAYER_CSS_CLASSNAME } from './player-css-classname';
-import { useThumbnail } from './use-thumbnail';
-import { IS_NODE } from './utils/is-node';
-import { useElementSize } from './utils/use-element-size';
+import { calculateCanvasTransformation, calculateContainerStyle, calculateOuter, calculateOuterStyle, } from './calculate-scale.js';
+import { ErrorBoundary } from './error-boundary.js';
+import { PLAYER_CSS_CLASSNAME } from './player-css-classname.js';
+import { useThumbnail } from './use-thumbnail.js';
+import { IS_NODE } from './utils/is-node.js';
+import { useElementSize } from './utils/use-element-size.js';
 const reactVersion = React.version.split('.')[0];
 if (reactVersion === '0') {
     throw new Error(`Version ${reactVersion} of "react" is not supported by Remotion`);

package/dist/esm/calculate-scale.d.ts

@@ -1,6 +1,6 @@
 import type { VideoConfig } from 'remotion';
-import type { PreviewSize } from './utils/preview-size';
-import type { Size } from './utils/use-element-size';
+import type { PreviewSize } from './utils/preview-size.js';
+import type { Size } from './utils/use-element-size.js';
 export declare const calculateScale: ({ canvasSize, compositionHeight, compositionWidth, previewSize, }: {
     previewSize: PreviewSize['size'];
     compositionWidth: number;

package/dist/esm/calculate-scale.js

@@ -1,4 +1,4 @@
-import { calculatePlayerSize } from './utils/calculate-player-size';
+import { calculatePlayerSize } from './utils/calculate-player-size.js';
 export const calculateScale = ({ canvasSize, compositionHeight, compositionWidth, previewSize, }) => {
     const heightRatio = canvasSize.height / compositionHeight;
     const widthRatio = canvasSize.width / compositionWidth;

package/dist/esm/emitter-context.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
-import type { PlayerEmitter, ThumbnailEmitter } from './event-emitter';
+import type { PlayerEmitter, ThumbnailEmitter } from './event-emitter.js';
 export declare const PlayerEventEmitterContext: React.Context<PlayerEmitter | undefined>;
 export declare const ThumbnailEmitterContext: React.Context<ThumbnailEmitter | undefined>;

package/dist/esm/index.d.ts

@@ -1,13 +1,13 @@
 /// <reference types="react" />
-import type { CallbackListener, PlayerEventTypes } from './event-emitter';
-import { PlayerEmitter } from './event-emitter';
-export { Player, PlayerProps } from './Player';
-export { PlayerMethods, PlayerRef, ThumbnailMethods, ThumbnailRef, } from './player-methods';
-export type { RenderFullscreenButton, RenderPlayPauseButton, } from './PlayerControls';
-export type { ErrorFallback, RenderLoading, RenderPoster } from './PlayerUI';
-export { Thumbnail } from './Thumbnail';
-export { PreviewSize, Translation } from './utils/preview-size';
-export { Size } from './utils/use-element-size';
+import type { CallbackListener, PlayerEventTypes } from './event-emitter.js';
+import { PlayerEmitter } from './event-emitter.js';
+export { Player, PlayerProps } from './Player.js';
+export { PlayerMethods, PlayerRef, ThumbnailMethods, ThumbnailRef, } from './player-methods.js';
+export type { RenderFullscreenButton, RenderPlayPauseButton, } from './PlayerControls.js';
+export type { ErrorFallback, RenderLoading, RenderPoster } from './PlayerUI.js';
+export { Thumbnail } from './Thumbnail.js';
+export { PreviewSize, Translation } from './utils/preview-size.js';
+export { Size } from './utils/use-element-size.js';
 export type { CallbackListener, PlayerEventTypes as EventTypes };
 export declare const PlayerInternals: {
     PlayerEventEmitterContext: import("react").Context<PlayerEmitter | undefined>;
@@ -37,12 +37,12 @@ export declare const PlayerInternals: {
     useElementSize: (ref: import("react").RefObject<HTMLElement>, options: {
         triggerOnWindowResize: boolean;
         shouldApplyCssTransforms: boolean;
-    }) => import("./utils/use-element-size").Size | null;
+    }) => import("./utils/use-element-size.js").Size | null;
     calculateCanvasTransformation: ({ previewSize, compositionWidth, compositionHeight, canvasSize, }: {
         previewSize: number | "auto";
         compositionWidth: number;
         compositionHeight: number;
-        canvasSize: import("./utils/use-element-size").Size;
+        canvasSize: import("./utils/use-element-size.js").Size;
     }) => {
         centerX: number;
         centerY: number;
@@ -56,6 +56,6 @@ export declare const PlayerInternals: {
         previewSize: number | "auto";
         compositionWidth: number;
         compositionHeight: number;
-        canvasSize: import("./utils/use-element-size").Size;
+        canvasSize: import("./utils/use-element-size.js").Size;
     }) => number;
 };

package/dist/esm/index.js

@@ -1,12 +1,12 @@
-import { calculateCanvasTransformation, calculateScale } from './calculate-scale';
-import { PlayerEventEmitterContext } from './emitter-context';
-import { PlayerEmitter } from './event-emitter';
-import { useHoverState } from './use-hover-state';
-import { usePlayback } from './use-playback';
-import { usePlayer } from './use-player';
-import { updateAllElementsSizes, useElementSize } from './utils/use-element-size';
-export { Player } from './Player';
-export { Thumbnail } from './Thumbnail';
+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,

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

@@ -1,5 +1,5 @@
 import type { SyntheticEvent } from 'react';
-import type { PlayerEmitter } from './event-emitter';
+import type { PlayerEmitter } from './event-emitter.js';
 export declare type ThumbnailMethods = {
     getContainerNode: () => HTMLDivElement | null;
     getScale: () => number;

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

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

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

@@ -1,5 +1,5 @@
 import { expect, test } from 'vitest';
-import { validateInOutFrames } from '../utils/validate-in-out-frame';
+import { validateInOutFrames } from '../utils/validate-in-out-frame.js';
 test('Validate in out frames', () => {
     expect(() => validateInOutFrames({
         durationInFrames: 200,

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

@@ -1,8 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Composition } from 'remotion';
 import { expect, test } from 'vitest';
-import { Player } from '../index';
-import { HelloWorld, render } from './test-utils';
+import { Player } from '../index.js';
+import { HelloWorld, render } from './test-utils.js';
 test('no compositionWidth should give errors', () => {
     try {
         render(_jsx(Player

package/dist/esm/use-playback.js

@@ -1,7 +1,7 @@
 import { useEffect, useRef } from 'react';
 import { Internals } from 'remotion';
-import { calculateNextFrame } from './calculate-next-frame';
-import { usePlayer } from './use-player';
+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();

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

@@ -1,5 +1,5 @@
 import type { SyntheticEvent } from 'react';
-import type { PlayerEmitter } from './event-emitter';
+import type { PlayerEmitter } from './event-emitter.js';
 declare type UsePlayerMethods = {
     frameBack: (frames: number) => void;
     frameForward: (frames: number) => void;

package/dist/esm/use-player.js

@@ -1,6 +1,6 @@
 import { useCallback, useContext, useMemo, useRef, useState } from 'react';
 import { Internals } from 'remotion';
-import { PlayerEventEmitterContext } from './emitter-context';
+import { PlayerEventEmitterContext } from './emitter-context.js';
 export const usePlayer = () => {
     var _a;
     const [playing, setPlaying, imperativePlaying] = Internals.Timeline.usePlayingState();

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

@@ -1,4 +1,4 @@
-import type { ThumbnailEmitter } from './event-emitter';
+import type { ThumbnailEmitter } from './event-emitter.js';
 declare type UseThumbnailMethods = {
     emitter: ThumbnailEmitter;
 };

package/dist/esm/use-thumbnail.js

@@ -1,5 +1,5 @@
 import { useContext, useMemo } from 'react';
-import { ThumbnailEmitterContext } from './emitter-context';
+import { ThumbnailEmitterContext } from './emitter-context.js';
 export const useThumbnail = () => {
     const emitter = useContext(ThumbnailEmitterContext);
     if (!emitter) {

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

@@ -1,7 +1,7 @@
 import { useMemo } from 'react';
-import { fullscreenIconSize, ICON_SIZE } from './icons';
-import { VOLUME_SLIDER_WIDTH } from './MediaVolumeSlider';
-import { X_PADDING, X_SPACER } from './PlayerControls';
+import { fullscreenIconSize, ICON_SIZE } from './icons.js';
+import { VOLUME_SLIDER_WIDTH } from './MediaVolumeSlider.js';
+import { X_PADDING, X_SPACER } from './PlayerControls.js';
 export const useVideoControlsResize = ({ allowFullscreen: allowFullScreen, playerWidth, }) => {
     const resizeInfo = useMemo(() => {
         const playPauseIconSize = ICON_SIZE;

package/dist/esm/utils/calculate-player-size.d.ts

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

package/dist/esm/utils/use-cancellable-promises.d.ts

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

package/dist/esm/utils/use-click-prevention-on-double-click.js

@@ -1,7 +1,7 @@
 import { useCallback, useMemo } from 'react';
-import { cancellablePromise } from './cancellable-promise';
-import { delay } from './delay';
-import { useCancellablePromises } from './use-cancellable-promises';
+import { cancellablePromise } from './cancellable-promise.js';
+import { delay } from './delay.js';
+import { useCancellablePromises } from './use-cancellable-promises.js';
 const useClickPreventionOnDoubleClick = (onClick, onDoubleClick, doubleClickToFullscreen) => {
     const api = useCancellablePromises();
     const handleClick = useCallback(async (e) => {

package/dist/event-emitter.d.ts

@@ -0,0 +1,66 @@
+declare type SeekPayload = {
+    frame: number;
+};
+declare type ErrorPayload = {
+    error: Error;
+};
+declare type TimeUpdateEventPayload = {
+    frame: number;
+};
+declare type FrameUpdateEventPayload = {
+    frame: number;
+};
+declare type RateChangeEventPayload = {
+    playbackRate: number;
+};
+declare type FullscreenChangeEventPayload = {
+    isFullscreen: boolean;
+};
+declare type PlayerStateEventMap = {
+    seeked: SeekPayload;
+    pause: undefined;
+    play: undefined;
+    ratechange: RateChangeEventPayload;
+    ended: undefined;
+    error: ErrorPayload;
+    timeupdate: TimeUpdateEventPayload;
+    frameupdate: FrameUpdateEventPayload;
+    fullscreenchange: FullscreenChangeEventPayload;
+};
+declare type ThumbnailStateEventMap = {
+    error: ErrorPayload;
+};
+export declare type PlayerEventTypes = keyof PlayerStateEventMap;
+export declare type ThumbnailEventTypes = keyof ThumbnailStateEventMap;
+export declare type CallbackListener<T extends PlayerEventTypes> = (data: {
+    detail: PlayerStateEventMap[T];
+}) => void;
+declare type PlayerListeners = {
+    [EventType in PlayerEventTypes]: CallbackListener<EventType>[];
+};
+declare type ThumbnailListeners = {
+    [EventType in ThumbnailEventTypes]: CallbackListener<EventType>[];
+};
+export declare class PlayerEmitter {
+    listeners: PlayerListeners;
+    addEventListener<Q extends PlayerEventTypes>(name: Q, callback: CallbackListener<Q>): void;
+    removeEventListener<Q extends PlayerEventTypes>(name: Q, callback: CallbackListener<Q>): void;
+    private dispatchEvent;
+    dispatchSeek(frame: number): void;
+    dispatchPause(): void;
+    dispatchPlay(): void;
+    dispatchEnded(): void;
+    dispatchRatechange(playbackRate: number): void;
+    dispatchError(error: Error): void;
+    dispatchTimeUpdate(event: TimeUpdateEventPayload): void;
+    dispatchFrameUpdate(event: FrameUpdateEventPayload): void;
+    dispatchFullscreenChangeUpdate(event: FullscreenChangeEventPayload): void;
+}
+export declare class ThumbnailEmitter {
+    listeners: ThumbnailListeners;
+    addEventListener<Q extends ThumbnailEventTypes>(name: Q, callback: CallbackListener<Q>): void;
+    removeEventListener<Q extends ThumbnailEventTypes>(name: Q, callback: CallbackListener<Q>): void;
+    private dispatchEvent;
+    dispatchError(error: Error): void;
+}
+export {};

package/dist/event-emitter.js

@@ -0,0 +1,87 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ThumbnailEmitter = exports.PlayerEmitter = void 0;
+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);
+    }
+}
+exports.PlayerEmitter = PlayerEmitter;
+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,
+        });
+    }
+}
+exports.ThumbnailEmitter = ThumbnailEmitter;

package/dist/format-time.d.ts

@@ -0,0 +1 @@
+export declare const formatTime: (timeInSeconds: number) => string;

package/dist/format-time.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.formatTime = void 0;
+const formatTime = (timeInSeconds) => {
+    const minutes = Math.floor(timeInSeconds / 60);
+    const seconds = Math.floor(timeInSeconds - minutes * 60);
+    return `${String(minutes)}:${String(seconds).padStart(2, '0')}`;
+};
+exports.formatTime = formatTime;

package/dist/icons.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+export declare const ICON_SIZE = 25;
+export declare const fullscreenIconSize = 16;
+export declare const PlayIcon: React.FC;
+export declare const PauseIcon: React.FC;
+export declare const FullscreenIcon: React.FC<{
+    isFullscreen: boolean;
+}>;
+export declare const VolumeOffIcon: React.FC;
+export declare const VolumeOnIcon: React.FC;

package/dist/icons.js

@@ -0,0 +1,50 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VolumeOnIcon = exports.VolumeOffIcon = exports.FullscreenIcon = exports.PauseIcon = exports.PlayIcon = exports.fullscreenIconSize = exports.ICON_SIZE = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+exports.ICON_SIZE = 25;
+exports.fullscreenIconSize = 16;
+const rotate = {
+    transform: `rotate(90deg)`,
+};
+const PlayIcon = () => {
+    return ((0, jsx_runtime_1.jsx)("svg", { width: exports.ICON_SIZE, height: exports.ICON_SIZE, viewBox: "-100 -100 400 400", style: rotate, children: (0, jsx_runtime_1.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" }) }));
+};
+exports.PlayIcon = PlayIcon;
+const PauseIcon = () => {
+    return ((0, jsx_runtime_1.jsxs)("svg", { viewBox: "0 0 100 100", width: exports.ICON_SIZE, height: exports.ICON_SIZE, children: [(0, jsx_runtime_1.jsx)("rect", { x: "25", y: "20", width: "20", height: "60", fill: "#fff", ry: "5", rx: "5" }), (0, jsx_runtime_1.jsx)("rect", { x: "55", y: "20", width: "20", height: "60", fill: "#fff", ry: "5", rx: "5" })] }));
+};
+exports.PauseIcon = PauseIcon;
+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 ((0, jsx_runtime_1.jsxs)("svg", { viewBox: `0 0 ${viewSize} ${viewSize}`, height: exports.fullscreenIconSize, width: exports.fullscreenIconSize, children: [(0, jsx_runtime_1.jsx)("path", { d: `
+				M ${out} ${inset}
+				L ${middleInset} ${middleInset}
+				L ${inset} ${out}
+				`, stroke: "#fff", strokeWidth: strokeWidth, fill: "none" }), (0, jsx_runtime_1.jsx)("path", { d: `
+				M ${viewSize - out} ${inset}
+				L ${viewSize - middleInset} ${middleInset}
+				L ${viewSize - inset} ${out}
+				`, stroke: "#fff", strokeWidth: strokeWidth, fill: "none" }), (0, jsx_runtime_1.jsx)("path", { d: `
+				M ${out} ${viewSize - inset}
+				L ${middleInset} ${viewSize - middleInset}
+				L ${inset} ${viewSize - out}
+				`, stroke: "#fff", strokeWidth: strokeWidth, fill: "none" }), (0, jsx_runtime_1.jsx)("path", { d: `
+				M ${viewSize - out} ${viewSize - inset}
+				L ${viewSize - middleInset} ${viewSize - middleInset}
+				L ${viewSize - inset} ${viewSize - out}
+				`, stroke: "#fff", strokeWidth: strokeWidth, fill: "none" })] }));
+};
+exports.FullscreenIcon = FullscreenIcon;
+const VolumeOffIcon = () => {
+    return ((0, jsx_runtime_1.jsx)("svg", { width: exports.ICON_SIZE, height: exports.ICON_SIZE, viewBox: "0 0 24 24", children: (0, jsx_runtime_1.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" }) }));
+};
+exports.VolumeOffIcon = VolumeOffIcon;
+const VolumeOnIcon = () => {
+    return ((0, jsx_runtime_1.jsx)("svg", { width: exports.ICON_SIZE, height: exports.ICON_SIZE, viewBox: "0 0 24 24", children: (0, jsx_runtime_1.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" }) }));
+};
+exports.VolumeOnIcon = VolumeOnIcon;