@remotion/player 4.0.177 → 4.0.179

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

@@ -1,54 +1,54 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-const vitest_1 = require("vitest");
+const bun_test_1 = require("bun:test");
 const validate_in_out_frame_js_1 = require("../utils/validate-in-out-frame.js");
-(0, vitest_1.test)('Validate in out frames', () => {
-    (0, vitest_1.expect)(() => (0, validate_in_out_frame_js_1.validateInOutFrames)({
+(0, bun_test_1.test)('Validate in out frames', () => {
+    (0, bun_test_1.expect)(() => (0, validate_in_out_frame_js_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_js_1.validateInOutFrames)({
+    (0, bun_test_1.expect)(() => (0, validate_in_out_frame_js_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_js_1.validateInOutFrames)({
+    (0, bun_test_1.expect)(() => (0, validate_in_out_frame_js_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_js_1.validateInOutFrames)({
+    (0, bun_test_1.expect)(() => (0, validate_in_out_frame_js_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_js_1.validateInOutFrames)({
+    (0, bun_test_1.expect)(() => (0, validate_in_out_frame_js_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_js_1.validateInOutFrames)({
+    (0, bun_test_1.expect)(() => (0, validate_in_out_frame_js_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_js_1.validateInOutFrames)({
+    (0, bun_test_1.expect)(() => (0, validate_in_out_frame_js_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_js_1.validateInOutFrames)({
+    (0, bun_test_1.expect)(() => (0, validate_in_out_frame_js_1.validateInOutFrames)({
         durationInFrames: 200,
         inFrame: null,
         outFrame: 20,
     })).not.toThrow();
-    (0, vitest_1.expect)(() => (0, validate_in_out_frame_js_1.validateInOutFrames)({
+    (0, bun_test_1.expect)(() => (0, validate_in_out_frame_js_1.validateInOutFrames)({
         durationInFrames: 200,
         inFrame: null,
         outFrame: null,
     })).not.toThrow();
-    (0, vitest_1.expect)(() => (0, validate_in_out_frame_js_1.validateInOutFrames)({
+    (0, bun_test_1.expect)(() => (0, validate_in_out_frame_js_1.validateInOutFrames)({
         durationInFrames: 200,
         inFrame: 10,
         outFrame: 20,

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

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

package/dist/esm/BufferingIndicator.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+export declare const bufferingIndicatorStrokeWidth = 3;
+export declare const BufferingIndicator: React.FC<{
+    type: 'player' | 'studio';
+}>;

package/dist/esm/DefaultPlayPauseButton.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare const DefaultPlayPauseButton: React.FC<{
+    playing: boolean;
+    buffering: boolean;
+}>;

package/dist/esm/EmitterProvider.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+export declare const PlayerEmitterProvider: React.FC<{
+    children: React.ReactNode;
+    currentPlaybackRate: number | null;
+}>;

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,8 @@
+import React from 'react';
+import type { Size } from './utils/use-element-size.js';
+export declare const Checkmark: () => import("react/jsx-runtime.js").JSX.Element;
+export declare const playerButtonStyle: React.CSSProperties;
+export declare const PlaybackrateControl: React.FC<{
+    playbackRates: number[];
+    canvasSize: Size;
+}>;

package/dist/esm/Player.d.ts

@@ -0,0 +1,56 @@
+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 { PosterFillMode, RenderLoading, RenderPoster } from './PlayerUI.js';
+import type { PropsIfHasProps } from './utils/props-if-has-props.js';
+export type ErrorFallback = (info: {
+    error: Error;
+}) => React.ReactNode;
+export 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;
+    showPosterWhenBuffering?: boolean;
+    inFrame?: number | null;
+    outFrame?: number | null;
+    initiallyShowControls?: number | boolean;
+    renderPlayPauseButton?: RenderPlayPauseButton;
+    renderFullscreenButton?: RenderFullscreenButton;
+    alwaysShowControls?: boolean;
+    schema?: Schema;
+    initiallyMuted?: boolean;
+    showPlaybackRateControl?: boolean | number[];
+    posterFillMode?: PosterFillMode;
+    bufferStateDelayInMilliseconds?: number;
+    hideControlsWhenPointerDoesntMove?: 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: Vite, 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,47 @@
+import type { MouseEventHandler, ReactNode } from 'react';
+import React from 'react';
+import type { usePlayer } from './use-player.js';
+import type { Size } from './utils/use-element-size.js';
+export type RenderPlayPauseButton = (props: {
+    playing: boolean;
+    isBuffering: boolean;
+}) => ReactNode | null;
+export 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;
+    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;
+    canvasSize: Size | null;
+    renderPlayPauseButton: RenderPlayPauseButton | null;
+    renderFullscreenButton: RenderFullscreenButton | null;
+    alwaysShowControls: boolean;
+    showPlaybackRateControl: boolean | number[];
+    containerRef: React.RefObject<HTMLDivElement>;
+    buffering: boolean;
+    hideControlsWhenPointerDoesntMove: boolean | number;
+    onPointerUp: React.PointerEventHandler<HTMLDivElement> | undefined;
+    onDoubleClick: MouseEventHandler<HTMLDivElement> | undefined;
+}>;

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,46 @@
+import React from 'react';
+import type { PlayerRef } from './player-methods.js';
+import type { RenderFullscreenButton, RenderPlayPauseButton } from './PlayerControls.js';
+export type ErrorFallback = (info: {
+    error: Error;
+}) => React.ReactNode;
+export type RenderLoading = (canvas: {
+    height: number;
+    width: number;
+    isBuffering: boolean;
+}) => React.ReactNode;
+export type RenderPoster = RenderLoading;
+export type PosterFillMode = 'player-size' | 'composition-size';
+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;
+    showPosterWhenBuffering: boolean;
+    inFrame: number | null;
+    outFrame: number | null;
+    initiallyShowControls: number | boolean;
+    renderPlayPauseButton: RenderPlayPauseButton | null;
+    renderFullscreen: RenderFullscreenButton | null;
+    alwaysShowControls: boolean;
+    showPlaybackRateControl: boolean | number[];
+    posterFillMode: PosterFillMode;
+    bufferStateDelayInMilliseconds: number;
+    hideControlsWhenPointerDoesntMove: number | boolean;
+} & 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 PLAYER_COMP_ID = "player-comp";
+export declare const SharedPlayerContexts: React.FC<{
+    children: React.ReactNode;
+    timelineContext: TimelineContextValue;
+    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,23 @@
+import type { CSSProperties } 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';
+type ThumbnailProps<Schema extends AnyZodObject, Props extends Record<string, unknown>> = PropsIfHasProps<Schema, Props> & CompProps<Props> & {
+    frameToDisplay: number;
+    style?: CSSProperties;
+    durationInFrames: number;
+    compositionWidth: number;
+    compositionHeight: number;
+    fps: number;
+    errorFallback?: ErrorFallback;
+    renderLoading?: RenderLoading;
+    className?: string;
+};
+/**
+ * @description A component which can be rendered in a regular React App (for example: Next.js, Vite) 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 extends Record<string, unknown>>(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,50 @@
+import type { PreviewSize, VideoConfig } from 'remotion';
+import type { Size } from './utils/use-element-size.js';
+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;
+}) => {
+    readonly width?: undefined;
+    readonly height?: undefined;
+    readonly display?: undefined;
+    readonly flexDirection?: undefined;
+    readonly position?: undefined;
+    readonly left?: undefined;
+    readonly top?: undefined;
+    readonly overflow?: undefined;
+} | {
+    readonly width: number;
+    readonly height: number;
+    readonly display: "flex";
+    readonly flexDirection: "column";
+    readonly position: "absolute";
+    readonly left: number;
+    readonly top: number;
+    readonly overflow: "hidden";
+};
+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 | import("react/jsx-runtime").JSX.Element | Iterable<React.ReactNode> | null | undefined;
+}

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

@@ -0,0 +1,91 @@
+type SeekPayload = {
+    frame: number;
+};
+type ErrorPayload = {
+    error: Error;
+};
+type TimeUpdateEventPayload = {
+    frame: number;
+};
+type FrameUpdateEventPayload = {
+    frame: number;
+};
+type RateChangeEventPayload = {
+    playbackRate: number;
+};
+type ScaleChangeEventPayload = {
+    scale: number;
+};
+type VolumeChangeEventPayload = {
+    volume: number;
+};
+type FullscreenChangeEventPayload = {
+    isFullscreen: boolean;
+};
+type MuteChangeEventPayload = {
+    isMuted: boolean;
+};
+type WaitingEventPayload = {};
+type ResumeEventPayload = {};
+type PlayerStateEventMap = {
+    seeked: SeekPayload;
+    pause: undefined;
+    play: undefined;
+    ratechange: RateChangeEventPayload;
+    scalechange: ScaleChangeEventPayload;
+    volumechange: VolumeChangeEventPayload;
+    ended: undefined;
+    error: ErrorPayload;
+    timeupdate: TimeUpdateEventPayload;
+    frameupdate: FrameUpdateEventPayload;
+    fullscreenchange: FullscreenChangeEventPayload;
+    mutechange: MuteChangeEventPayload;
+    waiting: WaitingEventPayload;
+    resume: ResumeEventPayload;
+};
+type ThumbnailStateEventMap = {
+    error: ErrorPayload;
+    waiting: WaitingEventPayload;
+    resume: ResumeEventPayload;
+};
+export type PlayerEventTypes = keyof PlayerStateEventMap;
+export type ThumbnailEventTypes = keyof ThumbnailStateEventMap;
+export type CallbackListener<T extends PlayerEventTypes> = (data: {
+    detail: PlayerStateEventMap[T];
+}) => void;
+type PlayerListeners = {
+    [EventType in PlayerEventTypes]: CallbackListener<EventType>[];
+};
+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;
+    dispatchVolumeChange(volume: number): void;
+    dispatchPause(): void;
+    dispatchPlay(): void;
+    dispatchEnded(): void;
+    dispatchRateChange(playbackRate: number): void;
+    dispatchScaleChange(scale: number): void;
+    dispatchError(error: Error): void;
+    dispatchTimeUpdate(event: TimeUpdateEventPayload): void;
+    dispatchFrameUpdate(event: FrameUpdateEventPayload): void;
+    dispatchFullscreenChange(event: FullscreenChangeEventPayload): void;
+    dispatchMuteChange(event: MuteChangeEventPayload): void;
+    dispatchWaiting(event: WaitingEventPayload): void;
+    dispatchResume(event: ResumeEventPayload): 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;
+    dispatchWaiting(event: WaitingEventPayload): void;
+    dispatchResume(event: ResumeEventPayload): void;
+}
+export {};

package/dist/esm/format-time.d.ts

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

package/dist/esm/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;