@remotion/player 4.0.0-alpha.4 → 4.0.0-alpha11

package/dist/{utils → cjs/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/{utils → cjs/utils}/calculate-player-size.js

@@ -2,23 +2,22 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.calculatePlayerSize = void 0;
 const calculatePlayerSize = ({ currentSize, width, height, compositionWidth, compositionHeight, }) => {
-    const aspectRatio = compositionWidth / compositionHeight;
-    if (!currentSize) {
-        return {
-            width: compositionWidth,
-            height: compositionHeight,
-        };
-    }
-    // If has width specified, but no height, specify a default height that satisfies the aspect ratio.
     if (width !== undefined && height === undefined) {
         return {
-            height: currentSize.width / aspectRatio,
+            aspectRatio: [compositionWidth, compositionHeight].join('/'),
         };
     }
     // Opposite: If has height specified, evaluate the height and specify a default width.
     if (height !== undefined && width === undefined) {
         return {
-            width: currentSize.height * aspectRatio,
+            // Aspect ratio CSS prop will work
+            aspectRatio: [compositionWidth, compositionHeight].join('/'),
+        };
+    }
+    if (!currentSize) {
+        return {
+            width: compositionWidth,
+            height: compositionHeight,
         };
     }
     return {

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,10 @@
+import type { AnyZodObject, z } from 'zod';
+export declare type PropsIfHasProps<Schema extends AnyZodObject, Props> = AnyZodObject extends Schema ? {} extends Props ? {
+    inputProps?: z.infer<Schema> & Props;
+} : {
+    inputProps: Props;
+} : {} extends Props ? {
+    inputProps: z.infer<Schema>;
+} : {
+    inputProps: z.infer<Schema> & 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 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/{utils → cjs/utils}/use-click-prevention-on-double-click.js

@@ -2,14 +2,14 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useClickPreventionOnDoubleClick = void 0;
 const react_1 = require("react");
-const cancellable_promise_1 = require("./cancellable-promise");
-const delay_1 = require("./delay");
-const use_cancellable_promises_1 = require("./use-cancellable-promises");
+const cancellable_promise_js_1 = require("./cancellable-promise.js");
+const delay_js_1 = require("./delay.js");
+const use_cancellable_promises_js_1 = require("./use-cancellable-promises.js");
 const useClickPreventionOnDoubleClick = (onClick, onDoubleClick, doubleClickToFullscreen) => {
-    const api = (0, use_cancellable_promises_1.useCancellablePromises)();
+    const api = (0, use_cancellable_promises_js_1.useCancellablePromises)();
     const handleClick = (0, react_1.useCallback)(async (e) => {
         api.clearPendingPromises();
-        const waitForClick = (0, cancellable_promise_1.cancellablePromise)((0, delay_1.delay)(200));
+        const waitForClick = (0, cancellable_promise_js_1.cancellablePromise)((0, delay_js_1.delay)(200));
         api.appendPendingPromise(waitForClick);
         try {
             await waitForClick.promise;

package/dist/cjs/utils/use-component-visible.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export default function useComponentVisible(initialIsVisible: boolean): {
+    ref: import("react").RefObject<HTMLDivElement>;
+    isComponentVisible: boolean;
+    setIsComponentVisible: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+};

package/dist/cjs/utils/use-component-visible.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = require("react");
+// hook to hide a popup/modal when clicked outside
+function useComponentVisible(initialIsVisible) {
+    const [isComponentVisible, setIsComponentVisible] = (0, react_1.useState)(initialIsVisible);
+    const ref = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        const handleClickOutside = (event) => {
+            if (ref.current && !ref.current.contains(event.target)) {
+                setIsComponentVisible(false);
+            }
+        };
+        document.addEventListener('pointerup', handleClickOutside, true);
+        return () => {
+            document.removeEventListener('pointerup', handleClickOutside, true);
+        };
+    }, []);
+    return { ref, isComponentVisible, setIsComponentVisible };
+}
+exports.default = useComponentVisible;

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

@@ -7,6 +7,7 @@ export declare type Size = {
         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

@@ -20,11 +20,11 @@ const useElementSize = (ref, options) => {
             const { contentRect } = entries[0];
             // The clientRect returns the size with `scale()` being applied.
             const newSize = entries[0].target.getClientRects();
-            if (!newSize || !newSize[0]) {
+            if (!(newSize === null || newSize === void 0 ? void 0 : newSize[0])) {
                 setSize(null);
                 return;
             }
-            const probableCssParentScale = newSize[0].width / contentRect.width;
+            const probableCssParentScale = contentRect.width === 0 ? 1 : newSize[0].width / contentRect.width;
             const width = options.shouldApplyCssTransforms
                 ? newSize[0].width
                 : newSize[0].width * (1 / probableCssParentScale);
@@ -52,15 +52,27 @@ const useElementSize = (ref, options) => {
             setSize(null);
             return;
         }
-        setSize({
-            width: rect[0].width,
-            height: rect[0].height,
-            left: rect[0].x,
-            top: rect[0].y,
-            windowSize: {
-                height: window.innerHeight,
-                width: window.innerWidth,
-            },
+        setSize((prevState) => {
+            const isSame = prevState &&
+                prevState.width === rect[0].width &&
+                prevState.height === rect[0].height &&
+                prevState.left === rect[0].x &&
+                prevState.top === rect[0].y &&
+                prevState.windowSize.height === window.innerHeight &&
+                prevState.windowSize.width === window.innerWidth;
+            if (isSame) {
+                return prevState;
+            }
+            return {
+                width: rect[0].width,
+                height: rect[0].height,
+                left: rect[0].x,
+                top: rect[0].y,
+                windowSize: {
+                    height: window.innerHeight,
+                    width: window.innerWidth,
+                },
+            };
         });
     }, [ref]);
     (0, react_1.useEffect)(() => {
@@ -93,6 +105,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;
+}>;

package/dist/esm/PlaybackrateControl.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+export declare const Checkmark: () => JSX.Element;
+export declare const PlaybackrateControl: React.FC<{
+    playbackRates: number[];
+}>;

package/dist/esm/Player.d.ts

@@ -0,0 +1,52 @@
+import type { ComponentType } from 'react';
+import React from 'react';
+import type { CompProps } from 'remotion';
+import type { AnyZodObject } from 'zod';
+import type { PlayerRef } from './player-methods.js';
+import type { RenderFullscreenButton, RenderPlayPauseButton } from './PlayerControls.js';
+import type { RenderLoading, RenderPoster } from './PlayerUI.js';
+import type { PropsIfHasProps } from './utils/props-if-has-props.js';
+export declare type ErrorFallback = (info: {
+    error: Error;
+}) => React.ReactNode;
+export declare type PlayerProps<Schema extends AnyZodObject, Props> = {
+    durationInFrames: number;
+    compositionWidth: number;
+    compositionHeight: number;
+    fps: number;
+    showVolumeControls?: boolean;
+    controls?: boolean;
+    errorFallback?: ErrorFallback;
+    style?: React.CSSProperties;
+    loop?: boolean;
+    autoPlay?: boolean;
+    allowFullscreen?: boolean;
+    clickToPlay?: boolean;
+    doubleClickToFullscreen?: boolean;
+    spaceKeyToPlayOrPause?: boolean;
+    numberOfSharedAudioTags?: number;
+    playbackRate?: number;
+    renderLoading?: RenderLoading;
+    moveToBeginningWhenEnded?: boolean;
+    className?: string;
+    initialFrame?: number;
+    renderPoster?: RenderPoster;
+    showPosterWhenPaused?: boolean;
+    showPosterWhenEnded?: boolean;
+    showPosterWhenUnplayed?: boolean;
+    inFrame?: number | null;
+    outFrame?: number | null;
+    initiallyShowControls?: number | boolean;
+    renderPlayPauseButton?: RenderPlayPauseButton;
+    renderFullscreenButton?: RenderFullscreenButton;
+    alwaysShowControls?: boolean;
+    schema?: Schema;
+    initiallyMuted?: boolean;
+    showPlaybackRateControl?: boolean | number[];
+} & CompProps<Props> & PropsIfHasProps<Schema, Props>;
+export declare const componentOrNullIfLazy: <Props>(props: CompProps<Props>) => ComponentType<Props> | null;
+/**
+ * @description A component which can be rendered in a regular React App (for example: Create React App, Next.js) to display a Remotion video.
+ * @see [Documentation](https://www.remotion.dev/docs/player/player)
+ */
+export declare const Player: <Schema extends AnyZodObject, Props>(props: PlayerProps<Schema, Props> & React.RefAttributes<PlayerRef>) => React.ReactElement | null;

package/dist/esm/PlayerControls.d.ts

@@ -0,0 +1,41 @@
+import type { MouseEventHandler, ReactNode } from 'react';
+import React from 'react';
+import type { usePlayer } from './use-player.js';
+export declare type RenderPlayPauseButton = (props: {
+    playing: boolean;
+}) => ReactNode;
+export declare type RenderFullscreenButton = (props: {
+    isFullscreen: boolean;
+}) => ReactNode;
+declare global {
+    interface Document {
+        webkitFullscreenEnabled?: boolean;
+        webkitFullscreenElement?: Element;
+        webkitExitFullscreen?: Document['exitFullscreen'];
+    }
+    interface HTMLDivElement {
+        webkitRequestFullScreen: HTMLDivElement['requestFullscreen'];
+    }
+}
+export declare const Controls: React.FC<{
+    fps: number;
+    durationInFrames: number;
+    hovered: boolean;
+    showVolumeControls: boolean;
+    player: ReturnType<typeof usePlayer>;
+    onFullscreenButtonClick: MouseEventHandler<HTMLButtonElement>;
+    isFullscreen: boolean;
+    allowFullscreen: boolean;
+    onExitFullscreenButtonClick: MouseEventHandler<HTMLButtonElement>;
+    spaceKeyToPlayOrPause: boolean;
+    onSeekEnd: () => void;
+    onSeekStart: () => void;
+    inFrame: number | null;
+    outFrame: number | null;
+    initiallyShowControls: number | boolean;
+    playerWidth: number;
+    renderPlayPauseButton: RenderPlayPauseButton | null;
+    renderFullscreenButton: RenderFullscreenButton | null;
+    alwaysShowControls: boolean;
+    showPlaybackRateControl: boolean | number[];
+}>;

package/dist/esm/PlayerSeekBar.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+export declare const PlayerSeekBar: React.FC<{
+    durationInFrames: number;
+    onSeekStart: () => void;
+    onSeekEnd: () => void;
+    inFrame: number | null;
+    outFrame: number | null;
+}>;

package/dist/esm/PlayerUI.d.ts

@@ -0,0 +1,40 @@
+import React from 'react';
+import type { PlayerRef } from './player-methods.js';
+import type { RenderFullscreenButton, RenderPlayPauseButton } from './PlayerControls.js';
+export declare type ErrorFallback = (info: {
+    error: Error;
+}) => React.ReactNode;
+export declare type RenderLoading = (canvas: {
+    height: number;
+    width: number;
+}) => React.ReactNode;
+export declare type RenderPoster = RenderLoading;
+declare const _default: React.ForwardRefExoticComponent<{
+    controls: boolean;
+    loop: boolean;
+    autoPlay: boolean;
+    allowFullscreen: boolean;
+    inputProps: Record<string, unknown>;
+    showVolumeControls: boolean;
+    style?: React.CSSProperties | undefined;
+    clickToPlay: boolean;
+    doubleClickToFullscreen: boolean;
+    spaceKeyToPlayOrPause: boolean;
+    errorFallback: ErrorFallback;
+    playbackRate: number;
+    renderLoading: RenderLoading | undefined;
+    renderPoster: RenderLoading | undefined;
+    className: string | undefined;
+    moveToBeginningWhenEnded: boolean;
+    showPosterWhenPaused: boolean;
+    showPosterWhenEnded: boolean;
+    showPosterWhenUnplayed: boolean;
+    inFrame: number | null;
+    outFrame: number | null;
+    initiallyShowControls: number | boolean;
+    renderPlayPauseButton: RenderPlayPauseButton | null;
+    renderFullscreen: RenderFullscreenButton | null;
+    alwaysShowControls: boolean;
+    showPlaybackRateControl: boolean | number[];
+} & React.RefAttributes<PlayerRef>>;
+export default _default;

package/dist/esm/SharedPlayerContext.d.ts

@@ -0,0 +1,15 @@
+import type { ComponentType, LazyExoticComponent } from 'react';
+import React from 'react';
+import type { TimelineContextValue } from 'remotion';
+export declare const SharedPlayerContexts: React.FC<{
+    children: React.ReactNode;
+    timelineContext: TimelineContextValue;
+    inputProps?: Record<string, unknown>;
+    fps: number;
+    compositionWidth: number;
+    compositionHeight: number;
+    durationInFrames: number;
+    component: LazyExoticComponent<ComponentType<unknown>>;
+    numberOfSharedAudioTags: number;
+    initiallyMuted: boolean;
+}>;

package/dist/esm/Thumbnail.d.ts

@@ -0,0 +1,24 @@
+import type { CSSProperties, MutableRefObject } from 'react';
+import type { CompProps } from 'remotion';
+import type { AnyZodObject } from 'zod';
+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<Schema extends AnyZodObject, Props> = PropsIfHasProps<Schema, Props> & CompProps<Schema> & {
+    frameToDisplay: number;
+    style?: CSSProperties;
+    durationInFrames: number;
+    compositionWidth: number;
+    compositionHeight: number;
+    fps: number;
+    errorFallback?: ErrorFallback;
+    renderLoading?: RenderLoading;
+    className?: string;
+};
+export declare const ThumbnailFn: <Schema extends AnyZodObject, Props>({ frameToDisplay, style, inputProps, compositionHeight, compositionWidth, durationInFrames, fps, className, errorFallback, renderLoading, ...componentProps }: ThumbnailProps<Schema, Props>, ref: MutableRefObject<ThumbnailMethods>) => JSX.Element;
+/**
+ * @description A component which can be rendered in a regular React App (for example: Create React App, Next.js) to display a single frame of a video.
+ * @see [Documentation](https://www.remotion.dev/docs/player/thumbnail)
+ */
+export declare const Thumbnail: <Schema extends AnyZodObject, Props>(props: ThumbnailProps<Schema, Props> & import("react").RefAttributes<ThumbnailMethods>) => React.ReactElement | null;
+export {};

package/dist/esm/ThumbnailUI.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import type { ThumbnailMethods } from './player-methods.js';
+import type { ErrorFallback, RenderLoading } from './PlayerUI.js';
+declare const _default: React.ForwardRefExoticComponent<{
+    inputProps: Record<string, unknown>;
+    style?: React.CSSProperties | undefined;
+    errorFallback: ErrorFallback;
+    renderLoading: RenderLoading | undefined;
+    className: string | undefined;
+} & React.RefAttributes<ThumbnailMethods>>;
+export default _default;

package/dist/esm/calculate-next-frame.d.ts

@@ -0,0 +1,14 @@
+export declare const calculateNextFrame: ({ time, currentFrame: startFrame, playbackSpeed, fps, actualLastFrame, actualFirstFrame, framesAdvanced, shouldLoop, }: {
+    time: number;
+    currentFrame: number;
+    playbackSpeed: number;
+    fps: number;
+    actualFirstFrame: number;
+    actualLastFrame: number;
+    framesAdvanced: number;
+    shouldLoop: boolean;
+}) => {
+    nextFrame: number;
+    framesToAdvance: number;
+    hasEnded: boolean;
+};

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

@@ -0,0 +1,39 @@
+import type { VideoConfig } from 'remotion';
+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;
+    compositionHeight: number;
+    canvasSize: Size;
+}) => number;
+declare type Layout = {
+    centerX: number;
+    centerY: number;
+    xCorrection: number;
+    yCorrection: number;
+    scale: number;
+};
+export declare const calculateCanvasTransformation: ({ previewSize, compositionWidth, compositionHeight, canvasSize, }: {
+    previewSize: PreviewSize['size'];
+    compositionWidth: number;
+    compositionHeight: number;
+    canvasSize: Size;
+}) => Layout;
+export declare const calculateOuterStyle: ({ config, style, canvasSize, }: {
+    config: VideoConfig | null;
+    style: React.CSSProperties | undefined;
+    canvasSize: Size | null;
+}) => React.CSSProperties;
+export declare const calculateContainerStyle: ({ config, canvasSize, layout, scale, }: {
+    config: VideoConfig | null;
+    canvasSize: Size | null;
+    layout: Layout | null;
+    scale: number;
+}) => React.CSSProperties;
+export declare const calculateOuter: ({ layout, scale, config, }: {
+    layout: Layout | null;
+    scale: number;
+    config: VideoConfig | null;
+}) => React.CSSProperties;
+export {};

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

@@ -0,0 +1,4 @@
+import React from 'react';
+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/error-boundary.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+export declare class ErrorBoundary extends React.Component<{
+    onError: (error: Error) => void;
+    children: React.ReactNode;
+    errorFallback: (info: {
+        error: Error;
+    }) => React.ReactNode;
+}, {
+    hasError: Error | null;
+}> {
+    state: {
+        hasError: null;
+    };
+    static getDerivedStateFromError(error: Error): {
+        hasError: Error;
+    };
+    componentDidCatch(error: Error): void;
+    render(): string | number | boolean | React.ReactFragment | JSX.Element | null | undefined;
+}