@remotion/player 3.3.45 → 3.3.52

package/dist/cjs/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/cjs/calculate-scale.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.calculateOuter = exports.calculateContainerStyle = exports.calculateOuterStyle = exports.calculateCanvasTransformation = exports.calculateScale = void 0;
-const calculate_player_size_1 = require("./utils/calculate-player-size");
+const calculate_player_size_js_1 = require("./utils/calculate-player-size.js");
 const calculateScale = ({ canvasSize, compositionHeight, compositionWidth, previewSize, }) => {
     const heightRatio = canvasSize.height / compositionHeight;
     const widthRatio = canvasSize.width / compositionWidth;
@@ -39,7 +39,7 @@ const calculateOuterStyle = ({ config, style, canvasSize, }) => {
     return {
         position: 'relative',
         overflow: 'hidden',
-        ...(0, calculate_player_size_1.calculatePlayerSize)({
+        ...(0, calculate_player_size_js_1.calculatePlayerSize)({
             compositionHeight: config.height,
             compositionWidth: config.width,
             currentSize: canvasSize,

package/dist/cjs/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/cjs/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/cjs/index.js

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

package/dist/cjs/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/cjs/test/index.test.js

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

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 validate_in_out_frame_1 = require("../utils/validate-in-out-frame");
+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_1.validateInOutFrames)({
+    (0, vitest_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_1.validateInOutFrames)({
+    (0, vitest_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_1.validateInOutFrames)({
+    (0, vitest_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_1.validateInOutFrames)({
+    (0, vitest_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_1.validateInOutFrames)({
+    (0, vitest_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_1.validateInOutFrames)({
+    (0, vitest_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_1.validateInOutFrames)({
+    (0, vitest_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_1.validateInOutFrames)({
+    (0, vitest_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_1.validateInOutFrames)({
+    (0, vitest_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_1.validateInOutFrames)({
+    (0, vitest_1.expect)(() => (0, validate_in_out_frame_js_1.validateInOutFrames)({
         durationInFrames: 200,
         inFrame: 10,
         outFrame: 20,

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

@@ -3,15 +3,15 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 const remotion_1 = require("remotion");
 const vitest_1 = require("vitest");
-const index_1 = require("../index");
-const test_utils_1 = require("./test-utils");
+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', () => {
     try {
-        (0, test_utils_1.render)((0, jsx_runtime_1.jsx)(index_1.Player
+        (0, test_utils_js_1.render)((0, jsx_runtime_1.jsx)(index_js_1.Player
         // @ts-expect-error
         , { 
             // @ts-expect-error
-            compositionWidth: null, errorFallback: () => 'something went wrong', compositionHeight: 400, fps: 30, durationInFrames: 500, component: test_utils_1.HelloWorld, controls: true, showVolumeControls: true }));
+            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/);
@@ -19,9 +19,9 @@ const test_utils_1 = require("./test-utils");
 });
 (0, vitest_1.test)('no compositionHeight should give errors', () => {
     try {
-        (0, test_utils_1.render)((0, jsx_runtime_1.jsx)(index_1.Player, { compositionWidth: 400, errorFallback: () => 'something went wrong', 
+        (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_1.HelloWorld, controls: true, showVolumeControls: true }));
+            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/);
@@ -29,17 +29,17 @@ const test_utils_1 = require("./test-utils");
 });
 (0, vitest_1.test)('No fps should give errors', () => {
     try {
-        (0, test_utils_1.render)((0, jsx_runtime_1.jsx)(index_1.Player, { compositionWidth: 500, compositionHeight: 400, errorFallback: () => 'something went wrong', 
+        (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_1.HelloWorld, controls: true, showVolumeControls: true }));
+            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/);
     }
     try {
-        (0, test_utils_1.render)((0, jsx_runtime_1.jsx)(index_1.Player, { compositionWidth: 500, compositionHeight: 400, errorFallback: () => 'something went wrong', 
+        (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: undefined, durationInFrames: 500, component: test_utils_1.HelloWorld, controls: true, showVolumeControls: true }));
+            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/);
@@ -47,9 +47,9 @@ const test_utils_1 = require("./test-utils");
 });
 (0, vitest_1.test)('No durationInFrames should give errors', () => {
     try {
-        (0, test_utils_1.render)((0, jsx_runtime_1.jsx)(index_1.Player, { compositionWidth: 500, compositionHeight: 400, errorFallback: () => 'something went wrong', fps: 30, 
+        (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_1.HelloWorld, controls: true, showVolumeControls: true }));
+            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/);
@@ -57,7 +57,7 @@ const test_utils_1 = require("./test-utils");
 });
 (0, vitest_1.test)('Invalid playbackRate should give error', () => {
     try {
-        (0, test_utils_1.render)((0, jsx_runtime_1.jsx)(index_1.Player, { compositionWidth: 500, compositionHeight: 400, fps: 30, durationInFrames: 500, component: test_utils_1.HelloWorld, controls: true, showVolumeControls: true, playbackRate: -5 }));
+        (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 }));
     }
     catch (e) {
         (0, vitest_1.expect)(e.message).toMatch(/The lowest possible playback rate is -4. You passed: -5/);
@@ -65,7 +65,7 @@ const test_utils_1 = require("./test-utils");
 });
 (0, vitest_1.test)('playbackRate of 0 should not be possible', () => {
     try {
-        (0, test_utils_1.render)((0, jsx_runtime_1.jsx)(index_1.Player, { compositionWidth: 500, compositionHeight: 400, fps: 30, durationInFrames: 500, component: test_utils_1.HelloWorld, controls: true, showVolumeControls: true, playbackRate: 0 }));
+        (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./);
@@ -73,7 +73,7 @@ const test_utils_1 = require("./test-utils");
 });
 (0, vitest_1.test)('playbackRate of wrong type should not be possible', () => {
     try {
-        (0, test_utils_1.render)((0, jsx_runtime_1.jsx)(index_1.Player, { compositionWidth: 500, compositionHeight: 400, fps: 30, durationInFrames: 500, component: test_utils_1.HelloWorld, controls: true, showVolumeControls: true, 
+        (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' }));
     }
@@ -82,32 +82,32 @@ const test_utils_1 = require("./test-utils");
     }
 });
 (0, vitest_1.test)('playbackRate of undefined should be okay', () => {
-    (0, test_utils_1.render)((0, jsx_runtime_1.jsx)(index_1.Player, { compositionWidth: 500, compositionHeight: 400, fps: 30, durationInFrames: 500, component: test_utils_1.HelloWorld, controls: true, showVolumeControls: true }));
+    (0, 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, vitest_1.test)('passing in <Composition /> instance should not be possible', () => {
     (0, vitest_1.expect)(() => {
-        (0, test_utils_1.render)((0, jsx_runtime_1.jsx)(index_1.Player, { compositionWidth: 500, compositionHeight: 400, fps: 30, durationInFrames: 500, component: remotion_1.Composition, controls: true, showVolumeControls: true, inputProps: {
+        (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,
                 height: 400,
                 fps: 30,
                 durationInFrames: 500,
-                component: test_utils_1.HelloWorld,
+                component: test_utils_js_1.HelloWorld,
             } }));
     }).toThrow(/'component' must not be the 'Composition' component\. Pass your own React/);
 });
 (0, vitest_1.test)('passing in <Composition /> instance should not be possible', () => {
     (0, vitest_1.expect)(() => {
-        (0, test_utils_1.render)((0, jsx_runtime_1.jsx)(index_1.Player, { compositionWidth: 500, compositionHeight: 400, fps: 30, durationInFrames: 500, 
+        (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_1.HelloWorld }), controls: true, showVolumeControls: true, inputProps: {
+            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: {
                 id: 'HelloWorld',
                 width: 500,
                 height: 400,
                 fps: 30,
                 durationInFrames: 500,
-                component: test_utils_1.HelloWorld,
+                component: test_utils_js_1.HelloWorld,
             } }));
     }).toThrow(/'component' should not be an instance of <Composition\/>\. Pass the React component dir/);
 });
@@ -123,7 +123,7 @@ vitest_1.test.each([
     const props = {};
     props[a] = 'hey';
     try {
-        (0, test_utils_1.render)((0, jsx_runtime_1.jsx)(index_1.Player, { compositionWidth: 500, compositionHeight: 400, errorFallback: () => 'something went wrong', fps: 30, durationInFrames: 100, component: test_utils_1.HelloWorld, ...props }));
+        (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`);

package/dist/cjs/use-playback.js

@@ -3,12 +3,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.usePlayback = void 0;
 const react_1 = require("react");
 const remotion_1 = require("remotion");
-const calculate_next_frame_1 = require("./calculate-next-frame");
-const use_player_1 = require("./use-player");
+const calculate_next_frame_js_1 = require("./calculate-next-frame.js");
+const use_player_js_1 = require("./use-player.js");
 const usePlayback = ({ loop, playbackRate, moveToBeginningWhenEnded, inFrame, outFrame, }) => {
     const frame = remotion_1.Internals.Timeline.useTimelinePosition();
     const config = remotion_1.Internals.useUnsafeVideoConfig();
-    const { playing, pause, emitter } = (0, use_player_1.usePlayer)();
+    const { playing, pause, emitter } = (0, use_player_js_1.usePlayer)();
     const setFrame = remotion_1.Internals.Timeline.useTimelineSetFrame();
     const frameRef = (0, react_1.useRef)(frame);
     frameRef.current = frame;
@@ -34,7 +34,7 @@ const usePlayback = ({ loop, playbackRate, moveToBeginningWhenEnded, inFrame, ou
             const time = performance.now() - startedTime;
             const actualLastFrame = outFrame !== null && outFrame !== void 0 ? outFrame : config.durationInFrames - 1;
             const actualFirstFrame = inFrame !== null && inFrame !== void 0 ? inFrame : 0;
-            const { nextFrame, framesToAdvance, hasEnded } = (0, calculate_next_frame_1.calculateNextFrame)({
+            const { nextFrame, framesToAdvance, hasEnded } = (0, calculate_next_frame_js_1.calculateNextFrame)({
                 time,
                 currentFrame: frameRef.current,
                 playbackSpeed: playbackRate,

package/dist/cjs/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/cjs/use-player.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.usePlayer = void 0;
 const react_1 = require("react");
 const remotion_1 = require("remotion");
-const emitter_context_1 = require("./emitter-context");
+const emitter_context_js_1 = require("./emitter-context.js");
 const usePlayer = () => {
     var _a;
     const [playing, setPlaying, imperativePlaying] = remotion_1.Internals.Timeline.usePlayingState();
@@ -18,7 +18,7 @@ const usePlayer = () => {
     frameRef.current = frame;
     const video = remotion_1.Internals.useVideo();
     const config = remotion_1.Internals.useUnsafeVideoConfig();
-    const emitter = (0, react_1.useContext)(emitter_context_1.PlayerEventEmitterContext);
+    const emitter = (0, react_1.useContext)(emitter_context_js_1.PlayerEventEmitterContext);
     const lastFrame = ((_a = config === null || config === void 0 ? void 0 : config.durationInFrames) !== null && _a !== void 0 ? _a : 1) - 1;
     const isLastFrame = frame === lastFrame;
     const isFirstFrame = frame === 0;

package/dist/cjs/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/cjs/use-thumbnail.js

@@ -2,9 +2,9 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useThumbnail = void 0;
 const react_1 = require("react");
-const emitter_context_1 = require("./emitter-context");
+const emitter_context_js_1 = require("./emitter-context.js");
 const useThumbnail = () => {
-    const emitter = (0, react_1.useContext)(emitter_context_1.ThumbnailEmitterContext);
+    const emitter = (0, react_1.useContext)(emitter_context_js_1.ThumbnailEmitterContext);
     if (!emitter) {
         throw new TypeError('Expected Player event emitter context');
     }

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

@@ -2,29 +2,29 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useVideoControlsResize = void 0;
 const react_1 = require("react");
-const icons_1 = require("./icons");
-const MediaVolumeSlider_1 = require("./MediaVolumeSlider");
-const PlayerControls_1 = require("./PlayerControls");
+const icons_js_1 = require("./icons.js");
+const MediaVolumeSlider_js_1 = require("./MediaVolumeSlider.js");
+const PlayerControls_js_1 = require("./PlayerControls.js");
 const useVideoControlsResize = ({ allowFullscreen: allowFullScreen, playerWidth, }) => {
     const resizeInfo = (0, react_1.useMemo)(() => {
-        const playPauseIconSize = icons_1.ICON_SIZE;
-        const volumeIconSize = icons_1.ICON_SIZE;
-        const _fullscreenIconSize = allowFullScreen ? icons_1.fullscreenIconSize : 0;
+        const playPauseIconSize = icons_js_1.ICON_SIZE;
+        const volumeIconSize = icons_js_1.ICON_SIZE;
+        const _fullscreenIconSize = allowFullScreen ? icons_js_1.fullscreenIconSize : 0;
         const elementsSize = volumeIconSize +
             playPauseIconSize +
             _fullscreenIconSize +
-            PlayerControls_1.X_PADDING * 2 +
-            PlayerControls_1.X_SPACER * 2;
+            PlayerControls_js_1.X_PADDING * 2 +
+            PlayerControls_js_1.X_SPACER * 2;
         const maxTimeLabelWidth = playerWidth - elementsSize;
         const maxTimeLabelWidthWithoutNegativeValue = Math.max(maxTimeLabelWidth, 0);
-        const availableTimeLabelWidthIfVolumeOpen = maxTimeLabelWidthWithoutNegativeValue - MediaVolumeSlider_1.VOLUME_SLIDER_WIDTH;
+        const availableTimeLabelWidthIfVolumeOpen = maxTimeLabelWidthWithoutNegativeValue - MediaVolumeSlider_js_1.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 < MediaVolumeSlider_1.VOLUME_SLIDER_WIDTH
+        const computedLabelWidth = availableTimeLabelWidthIfVolumeOpen < MediaVolumeSlider_js_1.VOLUME_SLIDER_WIDTH
             ? maxTimeLabelWidthWithoutNegativeValue
             : availableTimeLabelWidthIfVolumeOpen;
-        const minWidthForHorizontalDisplay = computedLabelWidth + elementsSize + MediaVolumeSlider_1.VOLUME_SLIDER_WIDTH;
+        const minWidthForHorizontalDisplay = computedLabelWidth + elementsSize + MediaVolumeSlider_js_1.VOLUME_SLIDER_WIDTH;
         const displayVerticalVolumeSlider = playerWidth < minWidthForHorizontalDisplay;
         return {
             maxTimeLabelWidth: maxTimeLabelWidthWithoutNegativeValue === 0

package/dist/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/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/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/emitter-context.d.ts

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

package/dist/emitter-context.js

@@ -0,0 +1,9 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ThumbnailEmitterContext = exports.PlayerEventEmitterContext = void 0;
+const react_1 = __importDefault(require("react"));
+exports.PlayerEventEmitterContext = react_1.default.createContext(undefined);
+exports.ThumbnailEmitterContext = react_1.default.createContext(undefined);

package/dist/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 | JSX.Element | React.ReactFragment | null | undefined;
+}

package/dist/error-boundary.js

@@ -0,0 +1,39 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ErrorBoundary = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importDefault(require("react"));
+const errorStyle = {
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    flex: 1,
+    height: '100%',
+    width: '100%',
+};
+class ErrorBoundary extends react_1.default.Component {
+    constructor() {
+        super(...arguments);
+        this.state = { hasError: null };
+    }
+    static getDerivedStateFromError(error) {
+        // Update state so the next render will show the fallback UI.
+        return { hasError: error };
+    }
+    componentDidCatch(error) {
+        this.props.onError(error);
+    }
+    render() {
+        if (this.state.hasError) {
+            // You can render any custom fallback UI
+            return ((0, jsx_runtime_1.jsx)("div", { style: errorStyle, children: this.props.errorFallback({
+                    error: this.state.hasError,
+                }) }));
+        }
+        return this.props.children;
+    }
+}
+exports.ErrorBoundary = ErrorBoundary;

package/dist/esm/MediaVolumeSlider.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useId, useMemo, useRef, useState } from 'react';
 import { Internals, random } from 'remotion';
-import { ICON_SIZE, VolumeOffIcon, VolumeOnIcon } from './icons';
-import { useHoverState } from './use-hover-state';
+import { ICON_SIZE, VolumeOffIcon, VolumeOnIcon } from './icons.js';
+import { useHoverState } from './use-hover-state.js';
 const BAR_HEIGHT = 5;
 const KNOB_SIZE = 12;
 export const VOLUME_SLIDER_WIDTH = 100;

package/dist/esm/Player.d.ts

@@ -1,10 +1,10 @@
 import type { ComponentType } from 'react';
 import React from 'react';
 import type { CompProps } from 'remotion';
-import type { PlayerRef } from './player-methods';
-import type { RenderFullscreenButton, RenderPlayPauseButton } from './PlayerControls';
-import type { RenderLoading, RenderPoster } from './PlayerUI';
-import type { PropsIfHasProps } from './utils/props-if-has-props';
+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;