@remotion/player 3.3.44 → 3.3.51

package/dist/cjs/MediaVolumeSlider.js

@@ -4,8 +4,8 @@ exports.MediaVolumeSlider = exports.VOLUME_SLIDER_WIDTH = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
-const icons_1 = require("./icons");
-const use_hover_state_1 = require("./use-hover-state");
+const icons_js_1 = require("./icons.js");
+const use_hover_state_js_1 = require("./use-hover-state.js");
 const BAR_HEIGHT = 5;
 const KNOB_SIZE = 12;
 exports.VOLUME_SLIDER_WIDTH = 100;
@@ -15,7 +15,7 @@ const MediaVolumeSlider = ({ displayVerticalVolumeSlider }) => {
     const [focused, setFocused] = (0, react_1.useState)(false);
     const parentDivRef = (0, react_1.useRef)(null);
     const inputRef = (0, react_1.useRef)(null);
-    const hover = (0, use_hover_state_1.useHoverState)(parentDivRef);
+    const hover = (0, use_hover_state_js_1.useHoverState)(parentDivRef);
     // eslint-disable-next-line react-hooks/rules-of-hooks
     const randomId = typeof react_1.useId === 'undefined' ? 'volume-slider' : (0, react_1.useId)();
     const [randomClass] = (0, react_1.useState)(() => `__remotion-volume-slider-${(0, remotion_1.random)(randomId)}`.replace('.', ''));
@@ -55,8 +55,8 @@ const MediaVolumeSlider = ({ displayVerticalVolumeSlider }) => {
     const volumeContainer = (0, react_1.useMemo)(() => {
         return {
             display: 'inline',
-            width: icons_1.ICON_SIZE,
-            height: icons_1.ICON_SIZE,
+            width: icons_js_1.ICON_SIZE,
+            height: icons_js_1.ICON_SIZE,
             cursor: 'pointer',
             appearance: 'none',
             background: 'none',
@@ -82,7 +82,7 @@ const MediaVolumeSlider = ({ displayVerticalVolumeSlider }) => {
                 ...commonStyle,
                 transform: `rotate(-90deg)`,
                 position: 'absolute',
-                bottom: icons_1.ICON_SIZE + exports.VOLUME_SLIDER_WIDTH / 2 + 5,
+                bottom: icons_js_1.ICON_SIZE + exports.VOLUME_SLIDER_WIDTH / 2 + 5,
             };
         }
         return {
@@ -113,6 +113,6 @@ const MediaVolumeSlider = ({ displayVerticalVolumeSlider }) => {
                 // eslint-disable-next-line react/no-danger
                 dangerouslySetInnerHTML: {
                     __html: sliderStyle,
-                } }), (0, jsx_runtime_1.jsx)("button", { "aria-label": isMutedOrZero ? 'Unmute sound' : 'Mute sound', title: isMutedOrZero ? 'Unmute sound' : 'Mute sound', onClick: onClick, onBlur: onBlur, onFocus: () => setFocused(true), style: volumeContainer, type: "button", children: isMutedOrZero ? (0, jsx_runtime_1.jsx)(icons_1.VolumeOffIcon, {}) : (0, jsx_runtime_1.jsx)(icons_1.VolumeOnIcon, {}) }), (focused || hover) && !mediaMuted ? ((0, jsx_runtime_1.jsx)("input", { ref: inputRef, "aria-label": "Change volume", className: randomClass, max: 1, min: 0, onBlur: () => setFocused(false), onChange: onVolumeChange, step: 0.01, type: "range", value: mediaVolume, style: inputStyle })) : null] }));
+                } }), (0, jsx_runtime_1.jsx)("button", { "aria-label": isMutedOrZero ? 'Unmute sound' : 'Mute sound', title: isMutedOrZero ? 'Unmute sound' : 'Mute sound', onClick: onClick, onBlur: onBlur, onFocus: () => setFocused(true), style: volumeContainer, type: "button", children: isMutedOrZero ? (0, jsx_runtime_1.jsx)(icons_js_1.VolumeOffIcon, {}) : (0, jsx_runtime_1.jsx)(icons_js_1.VolumeOnIcon, {}) }), (focused || hover) && !mediaMuted ? ((0, jsx_runtime_1.jsx)("input", { ref: inputRef, "aria-label": "Change volume", className: randomClass, max: 1, min: 0, onBlur: () => setFocused(false), onChange: onVolumeChange, step: 0.01, type: "range", value: mediaVolume, style: inputStyle })) : null] }));
 };
 exports.MediaVolumeSlider = MediaVolumeSlider;

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

package/dist/cjs/Player.js

@@ -7,14 +7,14 @@ exports.Player = exports.componentOrNullIfLazy = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
-const emitter_context_1 = require("./emitter-context");
-const event_emitter_1 = require("./event-emitter");
-const player_css_classname_1 = require("./player-css-classname");
-const PlayerUI_1 = __importDefault(require("./PlayerUI"));
-const SharedPlayerContext_1 = require("./SharedPlayerContext");
-const validate_in_out_frame_1 = require("./utils/validate-in-out-frame");
-const validate_initial_frame_1 = require("./utils/validate-initial-frame");
-const validate_playbackrate_1 = require("./utils/validate-playbackrate");
+const emitter_context_js_1 = require("./emitter-context.js");
+const event_emitter_js_1 = require("./event-emitter.js");
+const player_css_classname_js_1 = require("./player-css-classname.js");
+const PlayerUI_js_1 = __importDefault(require("./PlayerUI.js"));
+const SharedPlayerContext_js_1 = require("./SharedPlayerContext.js");
+const validate_in_out_frame_js_1 = require("./utils/validate-in-out-frame.js");
+const validate_initial_frame_js_1 = require("./utils/validate-initial-frame.js");
+const validate_playbackrate_js_1 = require("./utils/validate-playbackrate.js");
 const componentOrNullIfLazy = (props) => {
     if ('component' in props) {
         return props.component;
@@ -42,11 +42,11 @@ const PlayerFn = ({ durationInFrames, compositionHeight, compositionWidth, fps,
         throw new TypeError(`'component' must not be the 'Composition' component. Pass your own React component directly, and set the duration, fps and dimensions as separate props. See https://www.remotion.dev/docs/player/examples for an example.`);
     }
     const component = remotion_1.Internals.useLazyComponent(componentProps);
-    (0, validate_initial_frame_1.validateInitialFrame)({ initialFrame, durationInFrames });
+    (0, validate_initial_frame_js_1.validateInitialFrame)({ initialFrame, durationInFrames });
     const [frame, setFrame] = (0, react_1.useState)(() => initialFrame !== null && initialFrame !== void 0 ? initialFrame : 0);
     const [playing, setPlaying] = (0, react_1.useState)(false);
     const [rootId] = (0, react_1.useState)('player-comp');
-    const [emitter] = (0, react_1.useState)(() => new event_emitter_1.PlayerEmitter());
+    const [emitter] = (0, react_1.useState)(() => new event_emitter_js_1.PlayerEmitter());
     const rootRef = (0, react_1.useRef)(null);
     const audioAndVideoTags = (0, react_1.useRef)([]);
     const imperativePlaying = (0, react_1.useRef)(false);
@@ -60,7 +60,7 @@ const PlayerFn = ({ durationInFrames, compositionHeight, compositionWidth, fps,
     remotion_1.Internals.validateDimension(compositionWidth, 'compositionWidth', 'of the <Player /> component');
     remotion_1.Internals.validateDurationInFrames(durationInFrames, 'of the <Player/> component');
     remotion_1.Internals.validateFps(fps, 'as a prop of the <Player/> component', false);
-    (0, validate_in_out_frame_1.validateInOutFrames)({
+    (0, validate_in_out_frame_js_1.validateInOutFrames)({
         durationInFrames,
         inFrame,
         outFrame,
@@ -100,7 +100,7 @@ const PlayerFn = ({ durationInFrames, compositionHeight, compositionWidth, fps,
         numberOfSharedAudioTags < 0) {
         throw new TypeError(`'numberOfSharedAudioTags' must be an integer but got '${numberOfSharedAudioTags}' instead`);
     }
-    (0, validate_playbackrate_1.validatePlaybackRate)(playbackRate);
+    (0, validate_playbackrate_js_1.validatePlaybackRate)(playbackRate);
     (0, react_1.useEffect)(() => {
         emitter.dispatchRatechange(playbackRate);
     }, [emitter, playbackRate]);
@@ -132,10 +132,10 @@ const PlayerFn = ({ durationInFrames, compositionHeight, compositionWidth, fps,
         // eslint-disable-next-line react-hooks/rules-of-hooks
         (0, react_1.useLayoutEffect)(() => {
             // Inject CSS only on client, and also only after the Player has hydrated
-            remotion_1.Internals.CSSUtils.injectCSS(remotion_1.Internals.CSSUtils.makeDefaultCSS(`.${player_css_classname_1.PLAYER_CSS_CLASSNAME}`, '#fff'));
+            remotion_1.Internals.CSSUtils.injectCSS(remotion_1.Internals.CSSUtils.makeDefaultCSS(`.${player_css_classname_js_1.PLAYER_CSS_CLASSNAME}`, '#fff'));
         }, []);
     }
-    return ((0, jsx_runtime_1.jsx)(remotion_1.Internals.IsPlayerContextProvider, { children: (0, jsx_runtime_1.jsx)(SharedPlayerContext_1.SharedPlayerContexts, { timelineContext: timelineContextValue, component: component, compositionHeight: compositionHeight, compositionWidth: compositionWidth, durationInFrames: durationInFrames, fps: fps, inputProps: inputProps, numberOfSharedAudioTags: numberOfSharedAudioTags, children: (0, jsx_runtime_1.jsx)(remotion_1.Internals.Timeline.SetTimelineContext.Provider, { value: setTimelineContextValue, children: (0, jsx_runtime_1.jsx)(emitter_context_1.PlayerEventEmitterContext.Provider, { value: emitter, children: (0, jsx_runtime_1.jsx)(PlayerUI_1.default, { ref: rootRef, renderLoading: renderLoading, autoPlay: Boolean(autoPlay), loop: Boolean(loop), controls: Boolean(controls), errorFallback: errorFallback, style: style, inputProps: passedInputProps, allowFullscreen: Boolean(allowFullscreen), moveToBeginningWhenEnded: Boolean(moveToBeginningWhenEnded), clickToPlay: typeof clickToPlay === 'boolean'
+    return ((0, jsx_runtime_1.jsx)(remotion_1.Internals.IsPlayerContextProvider, { children: (0, jsx_runtime_1.jsx)(SharedPlayerContext_js_1.SharedPlayerContexts, { timelineContext: timelineContextValue, component: component, compositionHeight: compositionHeight, compositionWidth: compositionWidth, durationInFrames: durationInFrames, fps: fps, inputProps: inputProps, numberOfSharedAudioTags: numberOfSharedAudioTags, children: (0, jsx_runtime_1.jsx)(remotion_1.Internals.Timeline.SetTimelineContext.Provider, { value: setTimelineContextValue, children: (0, jsx_runtime_1.jsx)(emitter_context_js_1.PlayerEventEmitterContext.Provider, { value: emitter, children: (0, jsx_runtime_1.jsx)(PlayerUI_js_1.default, { ref: rootRef, renderLoading: renderLoading, autoPlay: Boolean(autoPlay), loop: Boolean(loop), controls: Boolean(controls), errorFallback: errorFallback, style: style, inputProps: passedInputProps, allowFullscreen: Boolean(allowFullscreen), moveToBeginningWhenEnded: Boolean(moveToBeginningWhenEnded), clickToPlay: typeof clickToPlay === 'boolean'
                             ? clickToPlay
                             : Boolean(controls), showVolumeControls: Boolean(showVolumeControls), doubleClickToFullscreen: Boolean(doubleClickToFullscreen), spaceKeyToPlayOrPause: Boolean(spaceKeyToPlayOrPause), playbackRate: playbackRate, className: className !== null && className !== void 0 ? className : undefined, showPosterWhenUnplayed: Boolean(showPosterWhenUnplayed), showPosterWhenEnded: Boolean(showPosterWhenEnded), showPosterWhenPaused: Boolean(showPosterWhenPaused), renderPoster: renderPoster, inFrame: inFrame !== null && inFrame !== void 0 ? inFrame : null, outFrame: outFrame !== null && outFrame !== void 0 ? outFrame : null, initiallyShowControls: initiallyShowControls !== null && initiallyShowControls !== void 0 ? initiallyShowControls : true, renderFullscreen: renderFullscreenButton !== null && renderFullscreenButton !== void 0 ? renderFullscreenButton : null, renderPlayPauseButton: renderPlayPauseButton !== null && renderPlayPauseButton !== void 0 ? renderPlayPauseButton : null }) }) }) }) }));
 };

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

@@ -4,11 +4,11 @@ exports.Controls = exports.X_PADDING = exports.X_SPACER = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
-const format_time_1 = require("./format-time");
-const icons_1 = require("./icons");
-const MediaVolumeSlider_1 = require("./MediaVolumeSlider");
-const PlayerSeekBar_1 = require("./PlayerSeekBar");
-const use_video_controls_resize_1 = require("./use-video-controls-resize");
+const format_time_js_1 = require("./format-time.js");
+const icons_js_1 = require("./icons.js");
+const MediaVolumeSlider_js_1 = require("./MediaVolumeSlider.js");
+const PlayerSeekBar_js_1 = require("./PlayerSeekBar.js");
+const use_video_controls_resize_js_1 = require("./use-video-controls-resize.js");
 exports.X_SPACER = 10;
 exports.X_PADDING = 12;
 const gradientSteps = [
@@ -74,12 +74,12 @@ const flex1 = {
     flex: 1,
 };
 const fullscreen = {};
-const PlayPauseButton = ({ playing }) => playing ? (0, jsx_runtime_1.jsx)(icons_1.PauseIcon, {}) : (0, jsx_runtime_1.jsx)(icons_1.PlayIcon, {});
+const PlayPauseButton = ({ playing }) => playing ? (0, jsx_runtime_1.jsx)(icons_js_1.PauseIcon, {}) : (0, jsx_runtime_1.jsx)(icons_js_1.PlayIcon, {});
 const Controls = ({ durationInFrames, hovered, isFullscreen, fps, player, showVolumeControls, onFullscreenButtonClick, allowFullscreen, onExitFullscreenButtonClick, spaceKeyToPlayOrPause, onSeekEnd, onSeekStart, inFrame, outFrame, initiallyShowControls, playerWidth, renderPlayPauseButton, renderFullscreenButton, }) => {
     const playButtonRef = (0, react_1.useRef)(null);
     const frame = remotion_1.Internals.Timeline.useTimelinePosition();
     const [supportsFullscreen, setSupportsFullscreen] = (0, react_1.useState)(false);
-    const { maxTimeLabelWidth, displayVerticalVolumeSlider } = (0, use_video_controls_resize_1.useVideoControlsResize)({ allowFullscreen, playerWidth });
+    const { maxTimeLabelWidth, displayVerticalVolumeSlider } = (0, use_video_controls_resize_js_1.useVideoControlsResize)({ allowFullscreen, playerWidth });
     const [shouldShowInitially, setInitiallyShowControls] = (0, react_1.useState)(() => {
         if (typeof initiallyShowControls === 'boolean') {
             return initiallyShowControls;
@@ -145,8 +145,8 @@ const Controls = ({ durationInFrames, hovered, isFullscreen, fps, player, showVo
             textOverflow: 'ellipsis',
         };
     }, [maxTimeLabelWidth]);
-    return ((0, jsx_runtime_1.jsxs)("div", { style: containerCss, children: [(0, jsx_runtime_1.jsxs)("div", { style: controlsRow, children: [(0, jsx_runtime_1.jsxs)("div", { style: leftPartStyle, children: [(0, jsx_runtime_1.jsx)("button", { ref: playButtonRef, type: "button", style: buttonStyle, onClick: player.playing ? player.pause : player.play, "aria-label": player.playing ? 'Pause video' : 'Play video', title: player.playing ? 'Pause video' : 'Play video', children: renderPlayPauseButton === null ? ((0, jsx_runtime_1.jsx)(PlayPauseButton, { playing: player.playing })) : (renderPlayPauseButton({ playing: player.playing })) }), showVolumeControls ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { style: xSpacer }), (0, jsx_runtime_1.jsx)(MediaVolumeSlider_1.MediaVolumeSlider, { displayVerticalVolumeSlider: displayVerticalVolumeSlider })] })) : null, (0, jsx_runtime_1.jsx)("div", { style: xSpacer }), (0, jsx_runtime_1.jsxs)("div", { style: timeLabel, children: [(0, format_time_1.formatTime)(frame / fps), " / ", (0, format_time_1.formatTime)(durationInFrames / fps)] }), (0, jsx_runtime_1.jsx)("div", { style: xSpacer })] }), (0, jsx_runtime_1.jsx)("div", { style: flex1 }), (0, jsx_runtime_1.jsx)("div", { style: fullscreen, children: supportsFullscreen && allowFullscreen ? ((0, jsx_runtime_1.jsx)("button", { type: "button", "aria-label": isFullscreen ? 'Exit fullscreen' : 'Enter Fullscreen', title: isFullscreen ? 'Exit fullscreen' : 'Enter Fullscreen', style: buttonStyle, onClick: isFullscreen
+    return ((0, jsx_runtime_1.jsxs)("div", { style: containerCss, children: [(0, jsx_runtime_1.jsxs)("div", { style: controlsRow, children: [(0, jsx_runtime_1.jsxs)("div", { style: leftPartStyle, children: [(0, jsx_runtime_1.jsx)("button", { ref: playButtonRef, type: "button", style: buttonStyle, onClick: player.playing ? player.pause : player.play, "aria-label": player.playing ? 'Pause video' : 'Play video', title: player.playing ? 'Pause video' : 'Play video', children: renderPlayPauseButton === null ? ((0, jsx_runtime_1.jsx)(PlayPauseButton, { playing: player.playing })) : (renderPlayPauseButton({ playing: player.playing })) }), showVolumeControls ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { style: xSpacer }), (0, jsx_runtime_1.jsx)(MediaVolumeSlider_js_1.MediaVolumeSlider, { displayVerticalVolumeSlider: displayVerticalVolumeSlider })] })) : null, (0, jsx_runtime_1.jsx)("div", { style: xSpacer }), (0, jsx_runtime_1.jsxs)("div", { style: timeLabel, children: [(0, format_time_js_1.formatTime)(frame / fps), " / ", (0, format_time_js_1.formatTime)(durationInFrames / fps)] }), (0, jsx_runtime_1.jsx)("div", { style: xSpacer })] }), (0, jsx_runtime_1.jsx)("div", { style: flex1 }), (0, jsx_runtime_1.jsx)("div", { style: fullscreen, children: supportsFullscreen && allowFullscreen ? ((0, jsx_runtime_1.jsx)("button", { type: "button", "aria-label": isFullscreen ? 'Exit fullscreen' : 'Enter Fullscreen', title: isFullscreen ? 'Exit fullscreen' : 'Enter Fullscreen', style: buttonStyle, onClick: isFullscreen
                                 ? onExitFullscreenButtonClick
-                                : onFullscreenButtonClick, children: renderFullscreenButton === null ? ((0, jsx_runtime_1.jsx)(icons_1.FullscreenIcon, { isFullscreen: isFullscreen })) : (renderFullscreenButton({ isFullscreen })) })) : null })] }), (0, jsx_runtime_1.jsx)("div", { style: ySpacer }), (0, jsx_runtime_1.jsx)(PlayerSeekBar_1.PlayerSeekBar, { onSeekEnd: onSeekEnd, onSeekStart: onSeekStart, durationInFrames: durationInFrames, inFrame: inFrame, outFrame: outFrame })] }));
+                                : onFullscreenButtonClick, children: renderFullscreenButton === null ? ((0, jsx_runtime_1.jsx)(icons_js_1.FullscreenIcon, { isFullscreen: isFullscreen })) : (renderFullscreenButton({ isFullscreen })) })) : null })] }), (0, jsx_runtime_1.jsx)("div", { style: ySpacer }), (0, jsx_runtime_1.jsx)(PlayerSeekBar_js_1.PlayerSeekBar, { onSeekEnd: onSeekEnd, onSeekStart: onSeekStart, durationInFrames: durationInFrames, inFrame: inFrame, outFrame: outFrame })] }));
 };
 exports.Controls = Controls;

package/dist/cjs/PlayerSeekBar.js

@@ -4,9 +4,9 @@ exports.PlayerSeekBar = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
-const use_hover_state_1 = require("./use-hover-state");
-const use_player_1 = require("./use-player");
-const use_element_size_1 = require("./utils/use-element-size");
+const use_hover_state_js_1 = require("./use-hover-state.js");
+const use_player_js_1 = require("./use-player.js");
+const use_element_size_js_1 = require("./utils/use-element-size.js");
 const getFrameFromX = (clientX, durationInFrames, width) => {
     var _a;
     const pos = clientX;
@@ -43,12 +43,12 @@ const findBodyInWhichDivIsLocated = (div) => {
 };
 const PlayerSeekBar = ({ durationInFrames, onSeekEnd, onSeekStart, inFrame, outFrame }) => {
     const containerRef = (0, react_1.useRef)(null);
-    const barHovered = (0, use_hover_state_1.useHoverState)(containerRef);
-    const size = (0, use_element_size_1.useElementSize)(containerRef, {
+    const barHovered = (0, use_hover_state_js_1.useHoverState)(containerRef);
+    const size = (0, use_element_size_js_1.useElementSize)(containerRef, {
         triggerOnWindowResize: true,
         shouldApplyCssTransforms: true,
     });
-    const { seek, play, pause, playing } = (0, use_player_1.usePlayer)();
+    const { seek, play, pause, playing } = (0, use_player_js_1.usePlayer)();
     const frame = remotion_1.Internals.Timeline.useTimelinePosition();
     const [dragging, setDragging] = (0, react_1.useState)({
         dragging: false,

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

@@ -26,16 +26,16 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
 const remotion_1 = require("remotion");
-const calculate_scale_1 = require("./calculate-scale");
-const error_boundary_1 = require("./error-boundary");
-const player_css_classname_1 = require("./player-css-classname");
-const PlayerControls_1 = require("./PlayerControls");
-const use_hover_state_1 = require("./use-hover-state");
-const use_playback_1 = require("./use-playback");
-const use_player_1 = require("./use-player");
-const is_node_1 = require("./utils/is-node");
-const use_click_prevention_on_double_click_1 = require("./utils/use-click-prevention-on-double-click");
-const use_element_size_1 = require("./utils/use-element-size");
+const calculate_scale_js_1 = require("./calculate-scale.js");
+const error_boundary_js_1 = require("./error-boundary.js");
+const player_css_classname_js_1 = require("./player-css-classname.js");
+const PlayerControls_js_1 = require("./PlayerControls.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 is_node_js_1 = require("./utils/is-node.js");
+const use_click_prevention_on_double_click_js_1 = require("./utils/use-click-prevention-on-double-click.js");
+const use_element_size_js_1 = require("./utils/use-element-size.js");
 const reactVersion = react_1.default.version.split('.')[0];
 if (reactVersion === '0') {
     throw new Error(`Version ${reactVersion} of "react" is not supported by Remotion`);
@@ -46,8 +46,8 @@ const PlayerUI = ({ controls, style, loop, autoPlay, allowFullscreen, inputProps
     const config = remotion_1.Internals.useUnsafeVideoConfig();
     const video = remotion_1.Internals.useVideo();
     const container = (0, react_1.useRef)(null);
-    const hovered = (0, use_hover_state_1.useHoverState)(container);
-    const canvasSize = (0, use_element_size_1.useElementSize)(container, {
+    const hovered = (0, use_hover_state_js_1.useHoverState)(container);
+    const canvasSize = (0, use_element_size_js_1.useElementSize)(container, {
         triggerOnWindowResize: false,
         shouldApplyCssTransforms: false,
     });
@@ -55,14 +55,14 @@ const PlayerUI = ({ controls, style, loop, autoPlay, allowFullscreen, inputProps
     const [shouldAutoplay, setShouldAutoPlay] = (0, react_1.useState)(autoPlay);
     const [isFullscreen, setIsFullscreen] = (0, react_1.useState)(() => false);
     const [seeking, setSeeking] = (0, react_1.useState)(false);
-    (0, use_playback_1.usePlayback)({
+    (0, use_playback_js_1.usePlayback)({
         loop,
         playbackRate,
         moveToBeginningWhenEnded,
         inFrame,
         outFrame,
     });
-    const player = (0, use_player_1.usePlayer)();
+    const player = (0, use_player_js_1.usePlayer)();
     (0, react_1.useEffect)(() => {
         if (hasPausedToResume && !player.playing) {
             setHasPausedToResume(false);
@@ -150,7 +150,7 @@ const PlayerUI = ({ controls, style, loop, autoPlay, allowFullscreen, inputProps
         if (!config || !canvasSize) {
             return null;
         }
-        return (0, calculate_scale_1.calculateCanvasTransformation)({
+        return (0, calculate_scale_js_1.calculateCanvasTransformation)({
             canvasSize,
             compositionHeight: config.height,
             compositionWidth: config.width,
@@ -228,13 +228,13 @@ const PlayerUI = ({ controls, style, loop, autoPlay, allowFullscreen, inputProps
     ]);
     const VideoComponent = video ? video.component : null;
     const outerStyle = (0, react_1.useMemo)(() => {
-        return (0, calculate_scale_1.calculateOuterStyle)({ canvasSize, config, style });
+        return (0, calculate_scale_js_1.calculateOuterStyle)({ canvasSize, config, style });
     }, [canvasSize, config, style]);
     const outer = (0, react_1.useMemo)(() => {
-        return (0, calculate_scale_1.calculateOuter)({ config, layout, scale });
+        return (0, calculate_scale_js_1.calculateOuter)({ config, layout, scale });
     }, [config, layout, scale]);
     const containerStyle = (0, react_1.useMemo)(() => {
-        return (0, calculate_scale_1.calculateContainerStyle)({ canvasSize, config, layout, scale });
+        return (0, calculate_scale_js_1.calculateContainerStyle)({ canvasSize, config, layout, scale });
     }, [canvasSize, config, layout, scale]);
     const onError = (0, react_1.useCallback)((error) => {
         player.pause();
@@ -266,7 +266,7 @@ const PlayerUI = ({ controls, style, loop, autoPlay, allowFullscreen, inputProps
             requestFullscreen();
         }
     }, [exitFullscreen, isFullscreen, requestFullscreen]);
-    const [handleClick, handleDoubleClick] = (0, use_click_prevention_on_double_click_1.useClickPreventionOnDoubleClick)(onSingleClick, onDoubleClick, doubleClickToFullscreen);
+    const [handleClick, handleDoubleClick] = (0, use_click_prevention_on_double_click_js_1.useClickPreventionOnDoubleClick)(onSingleClick, onDoubleClick, doubleClickToFullscreen);
     (0, react_1.useEffect)(() => {
         if (shouldAutoplay) {
             player.play();
@@ -299,8 +299,8 @@ const PlayerUI = ({ controls, style, loop, autoPlay, allowFullscreen, inputProps
             showPosterWhenEnded && player.isLastFrame && !player.isPlaying(),
             showPosterWhenUnplayed && !player.hasPlayed && !player.isPlaying(),
         ].some(Boolean);
-    const content = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { style: outer, onClick: clickToPlay ? handleClick : undefined, onDoubleClick: doubleClickToFullscreen ? handleDoubleClick : undefined, children: (0, jsx_runtime_1.jsx)("div", { style: containerStyle, className: player_css_classname_1.PLAYER_CSS_CLASSNAME, children: VideoComponent ? ((0, jsx_runtime_1.jsx)(error_boundary_1.ErrorBoundary, { onError: onError, errorFallback: errorFallback, children: (0, jsx_runtime_1.jsx)(VideoComponent, { ...((_c = video === null || video === void 0 ? void 0 : video.defaultProps) !== null && _c !== void 0 ? _c : {}), ...((_d = inputProps) !== null && _d !== void 0 ? _d : {}) }) })) : null }) }), shouldShowPoster ? ((0, jsx_runtime_1.jsx)("div", { style: outer, onClick: clickToPlay ? handleClick : undefined, onDoubleClick: doubleClickToFullscreen ? handleDoubleClick : undefined, children: poster })) : null, controls ? ((0, jsx_runtime_1.jsx)(PlayerControls_1.Controls, { fps: config.fps, durationInFrames: config.durationInFrames, hovered: hovered, player: player, onFullscreenButtonClick: onFullscreenButtonClick, isFullscreen: isFullscreen, allowFullscreen: allowFullscreen, showVolumeControls: showVolumeControls, onExitFullscreenButtonClick: onExitFullscreenButtonClick, spaceKeyToPlayOrPause: spaceKeyToPlayOrPause, onSeekEnd: onSeekEnd, onSeekStart: onSeekStart, inFrame: inFrame, outFrame: outFrame, initiallyShowControls: initiallyShowControls, playerWidth: (_e = canvasSize === null || canvasSize === void 0 ? void 0 : canvasSize.width) !== null && _e !== void 0 ? _e : 0, renderFullscreenButton: renderFullscreenButton, renderPlayPauseButton: renderPlayPauseButton })) : null] }));
-    if (is_node_1.IS_NODE && !doesReactVersionSupportSuspense) {
+    const content = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { style: outer, onClick: clickToPlay ? handleClick : undefined, onDoubleClick: doubleClickToFullscreen ? handleDoubleClick : undefined, children: (0, jsx_runtime_1.jsx)("div", { style: containerStyle, className: player_css_classname_js_1.PLAYER_CSS_CLASSNAME, children: VideoComponent ? ((0, jsx_runtime_1.jsx)(error_boundary_js_1.ErrorBoundary, { onError: onError, errorFallback: errorFallback, children: (0, jsx_runtime_1.jsx)(VideoComponent, { ...((_c = video === null || video === void 0 ? void 0 : video.defaultProps) !== null && _c !== void 0 ? _c : {}), ...((_d = inputProps) !== null && _d !== void 0 ? _d : {}) }) })) : null }) }), shouldShowPoster ? ((0, jsx_runtime_1.jsx)("div", { style: outer, onClick: clickToPlay ? handleClick : undefined, onDoubleClick: doubleClickToFullscreen ? handleDoubleClick : undefined, children: poster })) : null, controls ? ((0, jsx_runtime_1.jsx)(PlayerControls_js_1.Controls, { fps: config.fps, durationInFrames: config.durationInFrames, hovered: hovered, player: player, onFullscreenButtonClick: onFullscreenButtonClick, isFullscreen: isFullscreen, allowFullscreen: allowFullscreen, showVolumeControls: showVolumeControls, onExitFullscreenButtonClick: onExitFullscreenButtonClick, spaceKeyToPlayOrPause: spaceKeyToPlayOrPause, onSeekEnd: onSeekEnd, onSeekStart: onSeekStart, inFrame: inFrame, outFrame: outFrame, initiallyShowControls: initiallyShowControls, playerWidth: (_e = canvasSize === null || canvasSize === void 0 ? void 0 : canvasSize.width) !== null && _e !== void 0 ? _e : 0, renderFullscreenButton: renderFullscreenButton, renderPlayPauseButton: renderPlayPauseButton })) : null] }));
+    if (is_node_js_1.IS_NODE && !doesReactVersionSupportSuspense) {
         return ((0, jsx_runtime_1.jsx)("div", { ref: container, style: outerStyle, className: className, children: content }));
     }
     return ((0, jsx_runtime_1.jsx)("div", { ref: container, style: outerStyle, className: className, children: (0, jsx_runtime_1.jsx)(react_1.Suspense, { fallback: loadingMarkup, children: content }) }));

package/dist/cjs/SharedPlayerContext.js

@@ -4,7 +4,7 @@ exports.SharedPlayerContexts = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
-const volume_persistance_1 = require("./volume-persistance");
+const volume_persistance_js_1 = require("./volume-persistance.js");
 const SharedPlayerContexts = ({ children, timelineContext, inputProps, fps, compositionHeight, compositionWidth, durationInFrames, component, numberOfSharedAudioTags, }) => {
     const compositionManagerContext = (0, react_1.useMemo)(() => {
         return {
@@ -50,7 +50,7 @@ const SharedPlayerContexts = ({ children, timelineContext, inputProps, fps, comp
         inputProps,
     ]);
     const [mediaMuted, setMediaMuted] = (0, react_1.useState)(false);
-    const [mediaVolume, setMediaVolume] = (0, react_1.useState)((0, volume_persistance_1.getPreferredVolume)());
+    const [mediaVolume, setMediaVolume] = (0, react_1.useState)((0, volume_persistance_js_1.getPreferredVolume)());
     const mediaVolumeContextValue = (0, react_1.useMemo)(() => {
         return {
             mediaMuted,
@@ -59,7 +59,7 @@ const SharedPlayerContexts = ({ children, timelineContext, inputProps, fps, comp
     }, [mediaMuted, mediaVolume]);
     const setMediaVolumeAndPersist = (0, react_1.useCallback)((vol) => {
         setMediaVolume(vol);
-        (0, volume_persistance_1.persistVolume)(vol);
+        (0, volume_persistance_js_1.persistVolume)(vol);
     }, []);
     const setMediaVolumeContextValue = (0, react_1.useMemo)(() => {
         return {

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

@@ -7,10 +7,10 @@ exports.Thumbnail = exports.ThumbnailFn = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
-const emitter_context_1 = require("./emitter-context");
-const event_emitter_1 = require("./event-emitter");
-const SharedPlayerContext_1 = require("./SharedPlayerContext");
-const ThumbnailUI_1 = __importDefault(require("./ThumbnailUI"));
+const emitter_context_js_1 = require("./emitter-context.js");
+const event_emitter_js_1 = require("./event-emitter.js");
+const SharedPlayerContext_js_1 = require("./SharedPlayerContext.js");
+const ThumbnailUI_js_1 = __importDefault(require("./ThumbnailUI.js"));
 const ThumbnailFn = ({ frameToDisplay, style, inputProps, compositionHeight, compositionWidth, durationInFrames, fps, className, errorFallback = () => '⚠️', renderLoading, ...componentProps }, ref) => {
     const [thumbnailId] = (0, react_1.useState)(() => String((0, remotion_1.random)(null)));
     const rootRef = (0, react_1.useRef)(null);
@@ -31,11 +31,11 @@ const ThumbnailFn = ({ frameToDisplay, style, inputProps, compositionHeight, com
     }, [frameToDisplay, thumbnailId]);
     (0, react_1.useImperativeHandle)(ref, () => rootRef.current, []);
     const Component = remotion_1.Internals.useLazyComponent(componentProps);
-    const [emitter] = (0, react_1.useState)(() => new event_emitter_1.ThumbnailEmitter());
+    const [emitter] = (0, react_1.useState)(() => new event_emitter_js_1.ThumbnailEmitter());
     const passedInputProps = (0, react_1.useMemo)(() => {
         return inputProps !== null && inputProps !== void 0 ? inputProps : {};
     }, [inputProps]);
-    return ((0, jsx_runtime_1.jsx)(remotion_1.Internals.IsPlayerContextProvider, { children: (0, jsx_runtime_1.jsx)(SharedPlayerContext_1.SharedPlayerContexts, { timelineContext: timelineState, component: Component, compositionHeight: compositionHeight, compositionWidth: compositionWidth, durationInFrames: durationInFrames, fps: fps, inputProps: inputProps, numberOfSharedAudioTags: 0, children: (0, jsx_runtime_1.jsx)(emitter_context_1.ThumbnailEmitterContext.Provider, { value: emitter, children: (0, jsx_runtime_1.jsx)(ThumbnailUI_1.default, { className: className, errorFallback: errorFallback, inputProps: passedInputProps, renderLoading: renderLoading, style: style }) }) }) }));
+    return ((0, jsx_runtime_1.jsx)(remotion_1.Internals.IsPlayerContextProvider, { children: (0, jsx_runtime_1.jsx)(SharedPlayerContext_js_1.SharedPlayerContexts, { timelineContext: timelineState, component: Component, compositionHeight: compositionHeight, compositionWidth: compositionWidth, durationInFrames: durationInFrames, fps: fps, inputProps: inputProps, numberOfSharedAudioTags: 0, children: (0, jsx_runtime_1.jsx)(emitter_context_js_1.ThumbnailEmitterContext.Provider, { value: emitter, children: (0, jsx_runtime_1.jsx)(ThumbnailUI_js_1.default, { className: className, errorFallback: errorFallback, inputProps: passedInputProps, renderLoading: renderLoading, style: style }) }) }) }));
 };
 exports.ThumbnailFn = ThumbnailFn;
 const forward = react_1.forwardRef;

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

@@ -26,12 +26,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
 const remotion_1 = require("remotion");
-const calculate_scale_1 = require("./calculate-scale");
-const error_boundary_1 = require("./error-boundary");
-const player_css_classname_1 = require("./player-css-classname");
-const use_thumbnail_1 = require("./use-thumbnail");
-const is_node_1 = require("./utils/is-node");
-const use_element_size_1 = require("./utils/use-element-size");
+const calculate_scale_js_1 = require("./calculate-scale.js");
+const error_boundary_js_1 = require("./error-boundary.js");
+const player_css_classname_js_1 = require("./player-css-classname.js");
+const use_thumbnail_js_1 = require("./use-thumbnail.js");
+const is_node_js_1 = require("./utils/is-node.js");
+const use_element_size_js_1 = require("./utils/use-element-size.js");
 const reactVersion = react_1.default.version.split('.')[0];
 if (reactVersion === '0') {
     throw new Error(`Version ${reactVersion} of "react" is not supported by Remotion`);
@@ -42,7 +42,7 @@ const ThumbnailUI = ({ style, inputProps, errorFallback, renderLoading, classNam
     const config = remotion_1.Internals.useUnsafeVideoConfig();
     const video = remotion_1.Internals.useVideo();
     const container = (0, react_1.useRef)(null);
-    const canvasSize = (0, use_element_size_1.useElementSize)(container, {
+    const canvasSize = (0, use_element_size_js_1.useElementSize)(container, {
         triggerOnWindowResize: false,
         shouldApplyCssTransforms: false,
     });
@@ -50,7 +50,7 @@ const ThumbnailUI = ({ style, inputProps, errorFallback, renderLoading, classNam
         if (!config || !canvasSize) {
             return null;
         }
-        return (0, calculate_scale_1.calculateCanvasTransformation)({
+        return (0, calculate_scale_js_1.calculateCanvasTransformation)({
             canvasSize,
             compositionHeight: config.height,
             compositionWidth: config.width,
@@ -58,7 +58,7 @@ const ThumbnailUI = ({ style, inputProps, errorFallback, renderLoading, classNam
         });
     }, [canvasSize, config]);
     const scale = (_a = layout === null || layout === void 0 ? void 0 : layout.scale) !== null && _a !== void 0 ? _a : 1;
-    const thumbnail = (0, use_thumbnail_1.useThumbnail)();
+    const thumbnail = (0, use_thumbnail_js_1.useThumbnail)();
     (0, react_1.useImperativeHandle)(ref, () => {
         const methods = {
             getContainerNode: () => container.current,
@@ -68,13 +68,13 @@ const ThumbnailUI = ({ style, inputProps, errorFallback, renderLoading, classNam
     }, [scale, thumbnail.emitter]);
     const VideoComponent = video ? video.component : null;
     const outerStyle = (0, react_1.useMemo)(() => {
-        return (0, calculate_scale_1.calculateOuterStyle)({ config, style, canvasSize });
+        return (0, calculate_scale_js_1.calculateOuterStyle)({ config, style, canvasSize });
     }, [canvasSize, config, style]);
     const outer = (0, react_1.useMemo)(() => {
-        return (0, calculate_scale_1.calculateOuter)({ config, layout, scale });
+        return (0, calculate_scale_js_1.calculateOuter)({ config, layout, scale });
     }, [config, layout, scale]);
     const containerStyle = (0, react_1.useMemo)(() => {
-        return (0, calculate_scale_1.calculateContainerStyle)({
+        return (0, calculate_scale_js_1.calculateContainerStyle)({
             canvasSize,
             config,
             layout,
@@ -98,8 +98,8 @@ const ThumbnailUI = ({ style, inputProps, errorFallback, renderLoading, classNam
     if (!config) {
         return null;
     }
-    const content = ((0, jsx_runtime_1.jsx)("div", { style: outer, children: (0, jsx_runtime_1.jsx)("div", { style: containerStyle, className: player_css_classname_1.PLAYER_CSS_CLASSNAME, children: VideoComponent ? ((0, jsx_runtime_1.jsx)(error_boundary_1.ErrorBoundary, { onError: onError, errorFallback: errorFallback, children: (0, jsx_runtime_1.jsx)(VideoComponent, { ...((_b = video === null || video === void 0 ? void 0 : video.defaultProps) !== null && _b !== void 0 ? _b : {}), ...((_c = inputProps) !== null && _c !== void 0 ? _c : {}) }) })) : null }) }));
-    if (is_node_1.IS_NODE && !doesReactVersionSupportSuspense) {
+    const content = ((0, jsx_runtime_1.jsx)("div", { style: outer, children: (0, jsx_runtime_1.jsx)("div", { style: containerStyle, className: player_css_classname_js_1.PLAYER_CSS_CLASSNAME, children: VideoComponent ? ((0, jsx_runtime_1.jsx)(error_boundary_js_1.ErrorBoundary, { onError: onError, errorFallback: errorFallback, children: (0, jsx_runtime_1.jsx)(VideoComponent, { ...((_b = video === null || video === void 0 ? void 0 : video.defaultProps) !== null && _b !== void 0 ? _b : {}), ...((_c = inputProps) !== null && _c !== void 0 ? _c : {}) }) })) : null }) }));
+    if (is_node_js_1.IS_NODE && !doesReactVersionSupportSuspense) {
         return ((0, jsx_runtime_1.jsx)("div", { ref: container, style: outerStyle, className: className, children: content }));
     }
     return ((0, jsx_runtime_1.jsx)("div", { ref: container, style: outerStyle, className: className, children: (0, jsx_runtime_1.jsx)(react_1.Suspense, { fallback: loadingMarkup, children: content }) }));

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/error-boundary.d.ts

@@ -15,5 +15,5 @@ export declare class ErrorBoundary extends React.Component<{
         hasError: Error;
     };
     componentDidCatch(error: Error): void;
-    render(): string | number | boolean | React.ReactFragment | JSX.Element | null | undefined;
+    render(): string | number | boolean | JSX.Element | React.ReactFragment | null | 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;
 };