@remotion/player 4.0.0-alpha13 → 4.0.0-alpha16

package/dist/cjs/PlaybackrateControl.d.ts

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

package/dist/cjs/PlaybackrateControl.js

@@ -3,23 +3,15 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.PlaybackrateControl = exports.Checkmark = void 0;
+exports.PlaybackrateControl = exports.playerButtonStyle = exports.Checkmark = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
-const icons_js_1 = require("./icons.js");
 const use_component_visible_js_1 = __importDefault(require("./utils/use-component-visible.js"));
-const playbackPopup = {
-    position: 'absolute',
-    right: 0,
-    width: 125,
-    bottom: 35,
-    background: '#fff',
-    borderRadius: 4,
-    overflow: 'hidden',
-    color: 'black',
-    textAlign: 'left',
-};
+// To align
+const BOTTOM = 35;
+// Arbitrary to clamp the height of the popup
+const THRESHOLD = 70;
 const rateDiv = {
     height: 30,
     paddingRight: 15,
@@ -40,7 +32,7 @@ const checkmarkStyle = {
 };
 const Checkmark = () => ((0, jsx_runtime_1.jsx)("svg", { viewBox: "0 0 512 512", style: checkmarkStyle, children: (0, jsx_runtime_1.jsx)("path", { fill: "currentColor", d: "M435.848 83.466L172.804 346.51l-96.652-96.652c-4.686-4.686-12.284-4.686-16.971 0l-28.284 28.284c-4.686 4.686-4.686 12.284 0 16.971l133.421 133.421c4.686 4.686 12.284 4.686 16.971 0l299.813-299.813c4.686-4.686 4.686-12.284 0-16.971l-28.284-28.284c-4.686-4.686-12.284-4.686-16.97 0z" }) }));
 exports.Checkmark = Checkmark;
-const PlaybackPopup = ({ setIsComponentVisible, playbackRates }) => {
+const PlaybackPopup = ({ setIsComponentVisible, playbackRates, canvasSize }) => {
     const { setPlaybackRate, playbackRate } = (0, react_1.useContext)(remotion_1.Internals.Timeline.TimelineContext);
     const [keyboardSelectedRate, setKeyboardSelectedRate] = (0, react_1.useState)(playbackRate);
     (0, react_1.useEffect)(() => {
@@ -89,6 +81,20 @@ const PlaybackPopup = ({ setIsComponentVisible, playbackRates }) => {
         setPlaybackRate(rate);
         setIsComponentVisible(false);
     }, [setIsComponentVisible, setPlaybackRate]);
+    const playbackPopup = (0, react_1.useMemo)(() => {
+        return {
+            position: 'absolute',
+            right: 0,
+            width: 125,
+            maxHeight: canvasSize.height - THRESHOLD - BOTTOM,
+            bottom: 35,
+            background: '#fff',
+            borderRadius: 4,
+            overflow: 'auto',
+            color: 'black',
+            textAlign: 'left',
+        };
+    }, [canvasSize.height]);
     return ((0, jsx_runtime_1.jsx)("div", { style: playbackPopup, children: playbackRates.map((rate) => {
             return ((0, jsx_runtime_1.jsx)(PlaybackrateOption, { selectedRate: playbackRate, onSelect: onSelect, rate: rate, keyboardSelectedRate: keyboardSelectedRate }, rate));
         }) }));
@@ -114,23 +120,44 @@ const PlaybackrateOption = ({ rate, onSelect, selectedRate, keyboardSelectedRate
     }, [hovered, keyboardSelectedRate, rate]);
     return ((0, jsx_runtime_1.jsxs)("div", { onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, tabIndex: 0, style: actualStyle, onClick: onClick, children: [(0, jsx_runtime_1.jsx)("div", { style: checkmarkContainer, children: rate === selectedRate ? (0, jsx_runtime_1.jsx)(exports.Checkmark, {}) : null }), rate.toFixed(1), "x"] }, rate));
 };
-const playbackButton = {
-    position: 'relative',
-    display: 'inline-flex',
-    alignItems: 'center',
-    padding: '6px 0 6px 0',
+const label = {
+    fontSize: 13,
+    fontWeight: 'bold',
+    color: 'white',
+    border: '2px solid white',
+    borderRadius: 20,
+    paddingLeft: 8,
+    paddingRight: 8,
+    paddingTop: 2,
+    paddingBottom: 2,
+};
+exports.playerButtonStyle = {
+    appearance: 'none',
+    backgroundColor: 'transparent',
     border: 'none',
-    background: 'none',
-    height: 36,
     cursor: 'pointer',
+    paddingLeft: 0,
+    paddingRight: 0,
+    paddingTop: 6,
+    paddingBottom: 6,
+    height: 37,
+    display: 'inline-flex',
+    marginBottom: 0,
+    marginTop: 0,
+    alignItems: 'center',
+};
+const button = {
+    ...exports.playerButtonStyle,
+    position: 'relative',
 };
-const PlaybackrateControl = ({ playbackRates }) => {
+const PlaybackrateControl = ({ playbackRates, canvasSize }) => {
     const { ref, isComponentVisible, setIsComponentVisible } = (0, use_component_visible_js_1.default)(false);
+    const { playbackRate } = (0, react_1.useContext)(remotion_1.Internals.Timeline.TimelineContext);
     const onClick = (0, react_1.useCallback)((e) => {
         e.stopPropagation();
         e.preventDefault();
         setIsComponentVisible(!isComponentVisible);
     }, [isComponentVisible, setIsComponentVisible]);
-    return ((0, jsx_runtime_1.jsx)("div", { ref: ref, children: (0, jsx_runtime_1.jsxs)("button", { type: "button", "aria-label": "Change playback rate", style: playbackButton, onClick: onClick, children: [(0, jsx_runtime_1.jsx)(icons_js_1.SettingsIcon, { iconSize: 22 }), isComponentVisible && ((0, jsx_runtime_1.jsx)(PlaybackPopup, { playbackRates: playbackRates, setIsComponentVisible: setIsComponentVisible }))] }) }));
+    return ((0, jsx_runtime_1.jsx)("div", { ref: ref, children: (0, jsx_runtime_1.jsxs)("button", { type: "button", "aria-label": "Change playback rate", style: button, onClick: onClick, children: [(0, jsx_runtime_1.jsxs)("div", { style: label, children: [playbackRate, "x"] }), isComponentVisible && ((0, jsx_runtime_1.jsx)(PlaybackPopup, { canvasSize: canvasSize, playbackRates: playbackRates, setIsComponentVisible: setIsComponentVisible }))] }) }));
 };
 exports.PlaybackrateControl = PlaybackrateControl;

package/dist/cjs/Player.d.ts

@@ -6,10 +6,10 @@ 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: {
+export type ErrorFallback = (info: {
     error: Error;
 }) => React.ReactNode;
-export declare type PlayerProps<Schema extends AnyZodObject, Props> = {
+export type PlayerProps<Schema extends AnyZodObject, Props> = {
     durationInFrames: number;
     compositionWidth: number;
     compositionHeight: number;

package/dist/cjs/PlayerControls.d.ts

@@ -1,10 +1,11 @@
 import type { MouseEventHandler, ReactNode } from 'react';
 import React from 'react';
 import type { usePlayer } from './use-player.js';
-export declare type RenderPlayPauseButton = (props: {
+import type { Size } from './utils/use-element-size.js';
+export type RenderPlayPauseButton = (props: {
     playing: boolean;
 }) => ReactNode;
-export declare type RenderFullscreenButton = (props: {
+export type RenderFullscreenButton = (props: {
     isFullscreen: boolean;
 }) => ReactNode;
 declare global {
@@ -33,7 +34,7 @@ export declare const Controls: React.FC<{
     inFrame: number | null;
     outFrame: number | null;
     initiallyShowControls: number | boolean;
-    playerWidth: number;
+    canvasSize: Size | null;
     renderPlayPauseButton: RenderPlayPauseButton | null;
     renderFullscreenButton: RenderFullscreenButton | null;
     alwaysShowControls: boolean;

package/dist/cjs/PlayerControls.js

@@ -38,20 +38,6 @@ const containerStyle = {
     flexDirection: 'column',
     transition: 'opacity 0.3s',
 };
-const buttonStyle = {
-    appearance: 'none',
-    backgroundColor: 'transparent',
-    border: 'none',
-    cursor: 'pointer',
-    paddingLeft: 0,
-    paddingRight: 0,
-    paddingTop: 6,
-    paddingBottom: 6,
-    height: 37,
-    display: 'inline',
-    marginBottom: 0,
-    marginTop: 0,
-};
 const controlsRow = {
     display: 'flex',
     flexDirection: 'row',
@@ -77,11 +63,15 @@ const flex1 = {
 };
 const fullscreen = {};
 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, alwaysShowControls, showPlaybackRateControl, }) => {
+const Controls = ({ durationInFrames, hovered, isFullscreen, fps, player, showVolumeControls, onFullscreenButtonClick, allowFullscreen, onExitFullscreenButtonClick, spaceKeyToPlayOrPause, onSeekEnd, onSeekStart, inFrame, outFrame, initiallyShowControls, canvasSize, renderPlayPauseButton, renderFullscreenButton, alwaysShowControls, showPlaybackRateControl, }) => {
+    var _a;
     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_js_1.useVideoControlsResize)({ allowFullscreen, playerWidth });
+    const { maxTimeLabelWidth, displayVerticalVolumeSlider } = (0, use_video_controls_resize_js_1.useVideoControlsResize)({
+        allowFullscreen,
+        playerWidth: (_a = canvasSize === null || canvasSize === void 0 ? void 0 : canvasSize.width) !== null && _a !== void 0 ? _a : 0,
+    });
     const [shouldShowInitially, setInitiallyShowControls] = (0, react_1.useState)(() => {
         if (typeof initiallyShowControls === 'boolean') {
             return initiallyShowControls;
@@ -164,7 +154,7 @@ const Controls = ({ durationInFrames, hovered, isFullscreen, fps, player, showVo
         }
         return null;
     }, [showPlaybackRateControl]);
-    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 }), playbackRates && (0, jsx_runtime_1.jsx)(PlaybackrateControl_js_1.PlaybackrateControl, { playbackRates: playbackRates }), playbackRates && supportsFullscreen && allowFullscreen ? ((0, jsx_runtime_1.jsx)("div", { style: xSpacer })) : null, (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: PlaybackrateControl_js_1.playerButtonStyle, 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 }), playbackRates && canvasSize && ((0, jsx_runtime_1.jsx)(PlaybackrateControl_js_1.PlaybackrateControl, { canvasSize: canvasSize, playbackRates: playbackRates })), playbackRates && supportsFullscreen && allowFullscreen ? ((0, jsx_runtime_1.jsx)("div", { style: xSpacer })) : null, (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: PlaybackrateControl_js_1.playerButtonStyle, onClick: isFullscreen
                                 ? onExitFullscreenButtonClick
                                 : 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 })] }));
 };

package/dist/cjs/PlayerUI.d.ts

@@ -1,14 +1,14 @@
 import React from 'react';
 import type { PlayerRef } from './player-methods.js';
 import type { RenderFullscreenButton, RenderPlayPauseButton } from './PlayerControls.js';
-export declare type ErrorFallback = (info: {
+export type ErrorFallback = (info: {
     error: Error;
 }) => React.ReactNode;
-export declare type RenderLoading = (canvas: {
+export type RenderLoading = (canvas: {
     height: number;
     width: number;
 }) => React.ReactNode;
-export declare type RenderPoster = RenderLoading;
+export type RenderPoster = RenderLoading;
 declare const _default: React.ForwardRefExoticComponent<{
     controls: boolean;
     loop: boolean;

package/dist/cjs/PlayerUI.js

@@ -42,7 +42,7 @@ if (reactVersion === '0') {
 }
 const doesReactVersionSupportSuspense = parseInt(reactVersion, 10) >= 18;
 const PlayerUI = ({ controls, style, loop, autoPlay, allowFullscreen, inputProps, clickToPlay, showVolumeControls, doubleClickToFullscreen, spaceKeyToPlayOrPause, errorFallback, playbackRate, renderLoading, renderPoster, className, moveToBeginningWhenEnded, showPosterWhenUnplayed, showPosterWhenEnded, showPosterWhenPaused, inFrame, outFrame, initiallyShowControls, renderFullscreen: renderFullscreenButton, renderPlayPauseButton, alwaysShowControls, showPlaybackRateControl, }, ref) => {
-    var _a, _b, _c, _d;
+    var _a, _b, _c;
     const config = remotion_1.Internals.useUnsafeVideoConfig();
     const video = remotion_1.Internals.useVideo();
     const container = (0, react_1.useRef)(null);
@@ -317,7 +317,7 @@ 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_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 : {}), ...(inputProps !== null && inputProps !== void 0 ? inputProps : {}) }) })) : 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: (_d = canvasSize === null || canvasSize === void 0 ? void 0 : canvasSize.width) !== null && _d !== void 0 ? _d : 0, renderFullscreenButton: renderFullscreenButton, renderPlayPauseButton: renderPlayPauseButton, alwaysShowControls: alwaysShowControls, showPlaybackRateControl: showPlaybackRateControl })) : null] }));
+    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 : {}), ...(inputProps !== null && inputProps !== void 0 ? inputProps : {}) }) })) : 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, canvasSize: canvasSize, renderFullscreenButton: renderFullscreenButton, renderPlayPauseButton: renderPlayPauseButton, alwaysShowControls: alwaysShowControls, showPlaybackRateControl: showPlaybackRateControl })) : null] }));
     if (is_node_js_1.IS_NODE && !doesReactVersionSupportSuspense) {
         return ((0, jsx_runtime_1.jsx)("div", { ref: container, style: outerStyle, className: className, children: content }));
     }

package/dist/cjs/Thumbnail.d.ts

@@ -4,7 +4,7 @@ import type { AnyZodObject } from 'zod';
 import type { ThumbnailMethods } from './player-methods.js';
 import type { ErrorFallback, RenderLoading } from './PlayerUI.js';
 import type { PropsIfHasProps } from './utils/props-if-has-props.js';
-declare type ThumbnailProps<Schema extends AnyZodObject, Props> = PropsIfHasProps<Schema, Props> & CompProps<Schema> & {
+type ThumbnailProps<Schema extends AnyZodObject, Props> = PropsIfHasProps<Schema, Props> & CompProps<Schema> & {
     frameToDisplay: number;
     style?: CSSProperties;
     durationInFrames: number;

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

@@ -7,7 +7,7 @@ export declare const calculateScale: ({ canvasSize, compositionHeight, compositi
     compositionHeight: number;
     canvasSize: Size;
 }) => number;
-declare type Layout = {
+type Layout = {
     centerX: number;
     centerY: number;
     xCorrection: number;

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

@@ -1,31 +1,31 @@
-declare type SeekPayload = {
+type SeekPayload = {
     frame: number;
 };
-declare type ErrorPayload = {
+type ErrorPayload = {
     error: Error;
 };
-declare type TimeUpdateEventPayload = {
+type TimeUpdateEventPayload = {
     frame: number;
 };
-declare type FrameUpdateEventPayload = {
+type FrameUpdateEventPayload = {
     frame: number;
 };
-declare type RateChangeEventPayload = {
+type RateChangeEventPayload = {
     playbackRate: number;
 };
-declare type ScaleChangeEventPayload = {
+type ScaleChangeEventPayload = {
     scale: number;
 };
-declare type VolumeChangeEventPayload = {
+type VolumeChangeEventPayload = {
     volume: number;
 };
-declare type FullscreenChangeEventPayload = {
+type FullscreenChangeEventPayload = {
     isFullscreen: boolean;
 };
-declare type MuteChangeEventPayload = {
+type MuteChangeEventPayload = {
     isMuted: boolean;
 };
-declare type PlayerStateEventMap = {
+type PlayerStateEventMap = {
     seeked: SeekPayload;
     pause: undefined;
     play: undefined;
@@ -39,18 +39,18 @@ declare type PlayerStateEventMap = {
     fullscreenchange: FullscreenChangeEventPayload;
     mutechange: MuteChangeEventPayload;
 };
-declare type ThumbnailStateEventMap = {
+type ThumbnailStateEventMap = {
     error: ErrorPayload;
 };
-export declare type PlayerEventTypes = keyof PlayerStateEventMap;
-export declare type ThumbnailEventTypes = keyof ThumbnailStateEventMap;
-export declare type CallbackListener<T extends PlayerEventTypes> = (data: {
+export type PlayerEventTypes = keyof PlayerStateEventMap;
+export type ThumbnailEventTypes = keyof ThumbnailStateEventMap;
+export type CallbackListener<T extends PlayerEventTypes> = (data: {
     detail: PlayerStateEventMap[T];
 }) => void;
-declare type PlayerListeners = {
+type PlayerListeners = {
     [EventType in PlayerEventTypes]: CallbackListener<EventType>[];
 };
-declare type ThumbnailListeners = {
+type ThumbnailListeners = {
     [EventType in ThumbnailEventTypes]: CallbackListener<EventType>[];
 };
 export declare class PlayerEmitter {

package/dist/cjs/icons.d.ts

@@ -8,6 +8,3 @@ export declare const FullscreenIcon: React.FC<{
 }>;
 export declare const VolumeOffIcon: React.FC;
 export declare const VolumeOnIcon: React.FC;
-export declare const SettingsIcon: React.FC<{
-    iconSize?: number;
-}>;

package/dist/cjs/icons.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SettingsIcon = exports.VolumeOnIcon = exports.VolumeOffIcon = exports.FullscreenIcon = exports.PauseIcon = exports.PlayIcon = exports.fullscreenIconSize = exports.ICON_SIZE = void 0;
+exports.VolumeOnIcon = exports.VolumeOffIcon = exports.FullscreenIcon = exports.PauseIcon = exports.PlayIcon = exports.fullscreenIconSize = exports.ICON_SIZE = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 exports.ICON_SIZE = 25;
 exports.fullscreenIconSize = 16;
@@ -48,7 +48,3 @@ const VolumeOnIcon = () => {
     return ((0, jsx_runtime_1.jsx)("svg", { width: exports.ICON_SIZE, height: exports.ICON_SIZE, viewBox: "0 0 24 24", children: (0, jsx_runtime_1.jsx)("path", { d: "M3 10v4c0 .55.45 1 1 1h3l3.29 3.29c.63.63 1.71.18 1.71-.71V6.41c0-.89-1.08-1.34-1.71-.71L7 9H4c-.55 0-1 .45-1 1zm13.5 2A4.5 4.5 0 0014 7.97v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 4.45v.2c0 .38.25.71.6.85C17.18 6.53 19 9.06 19 12s-1.82 5.47-4.4 6.5c-.36.14-.6.47-.6.85v.2c0 .63.63 1.07 1.21.85C18.6 19.11 21 15.84 21 12s-2.4-7.11-5.79-8.4c-.58-.23-1.21.22-1.21.85z", fill: "#fff" }) }));
 };
 exports.VolumeOnIcon = VolumeOnIcon;
-const SettingsIcon = ({ iconSize }) => {
-    return ((0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", height: iconSize !== null && iconSize !== void 0 ? iconSize : exports.ICON_SIZE, viewBox: "0 0 512 512", style: { fill: '#fff' }, children: (0, jsx_runtime_1.jsx)("path", { d: "M495.9 166.6c3.2 8.7 .5 18.4-6.4 24.6l-43.3 39.4c1.1 8.3 1.7 16.8 1.7 25.4s-.6 17.1-1.7 25.4l43.3 39.4c6.9 6.2 9.6 15.9 6.4 24.6c-4.4 11.9-9.7 23.3-15.8 34.3l-4.7 8.1c-6.6 11-14 21.4-22.1 31.2c-5.9 7.2-15.7 9.6-24.5 6.8l-55.7-17.7c-13.4 10.3-28.2 18.9-44 25.4l-12.5 57.1c-2 9.1-9 16.3-18.2 17.8c-13.8 2.3-28 3.5-42.5 3.5s-28.7-1.2-42.5-3.5c-9.2-1.5-16.2-8.7-18.2-17.8l-12.5-57.1c-15.8-6.5-30.6-15.1-44-25.4L83.1 425.9c-8.8 2.8-18.6 .3-24.5-6.8c-8.1-9.8-15.5-20.2-22.1-31.2l-4.7-8.1c-6.1-11-11.4-22.4-15.8-34.3c-3.2-8.7-.5-18.4 6.4-24.6l43.3-39.4C64.6 273.1 64 264.6 64 256s.6-17.1 1.7-25.4L22.4 191.2c-6.9-6.2-9.6-15.9-6.4-24.6c4.4-11.9 9.7-23.3 15.8-34.3l4.7-8.1c6.6-11 14-21.4 22.1-31.2c5.9-7.2 15.7-9.6 24.5-6.8l55.7 17.7c13.4-10.3 28.2-18.9 44-25.4l12.5-57.1c2-9.1 9-16.3 18.2-17.8C227.3 1.2 241.5 0 256 0s28.7 1.2 42.5 3.5c9.2 1.5 16.2 8.7 18.2 17.8l12.5 57.1c15.8 6.5 30.6 15.1 44 25.4l55.7-17.7c8.8-2.8 18.6-.3 24.5 6.8c8.1 9.8 15.5 20.2 22.1 31.2l4.7 8.1c6.1 11 11.4 22.4 15.8 34.3zM256 336a80 80 0 1 0 0-160 80 80 0 1 0 0 160z" }) }));
-};
-exports.SettingsIcon = SettingsIcon;

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

@@ -1,10 +1,10 @@
 import type { SyntheticEvent } from 'react';
 import type { PlayerEmitter } from './event-emitter.js';
-export declare type ThumbnailMethods = {
+export type ThumbnailMethods = {
     getContainerNode: () => HTMLDivElement | null;
     getScale: () => number;
 };
-export declare type PlayerMethods = ThumbnailMethods & {
+export type PlayerMethods = ThumbnailMethods & {
     play: (e?: SyntheticEvent) => void;
     pause: () => void;
     toggle: (e?: SyntheticEvent) => void;
@@ -20,5 +20,5 @@ export declare type PlayerMethods = ThumbnailMethods & {
     mute: () => void;
     unmute: () => void;
 };
-export declare type ThumbnailRef = PlayerEmitter & ThumbnailMethods;
-export declare type PlayerRef = PlayerEmitter & PlayerMethods;
+export type ThumbnailRef = PlayerEmitter & ThumbnailMethods;
+export type PlayerRef = PlayerEmitter & PlayerMethods;

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

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

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

@@ -1,5 +1,5 @@
 import type { ThumbnailEmitter } from './event-emitter.js';
-declare type UseThumbnailMethods = {
+type UseThumbnailMethods = {
     emitter: ThumbnailEmitter;
 };
 export declare const useThumbnail: () => UseThumbnailMethods;

package/dist/cjs/use-video-controls-resize.d.ts

@@ -1,4 +1,4 @@
-declare type Info = {
+type Info = {
     maxTimeLabelWidth: number | null;
     displayVerticalVolumeSlider: boolean;
 };

package/dist/cjs/utils/cancellable-promise.d.ts

@@ -1,4 +1,4 @@
-export declare type CancellablePromise = {
+export type CancellablePromise = {
     promise: Promise<unknown>;
     cancel: () => void;
 };

package/dist/cjs/utils/preview-size.d.ts

@@ -1,8 +1,8 @@
-export declare type Translation = {
+export type Translation = {
     x: number;
     y: number;
 };
-export declare type PreviewSize = {
+export type PreviewSize = {
     size: number | 'auto';
     translation: Translation;
 };

package/dist/cjs/utils/props-if-has-props.d.ts

@@ -1,5 +1,5 @@
 import type { AnyZodObject, z } from 'zod';
-export declare type PropsIfHasProps<Schema extends AnyZodObject, Props> = AnyZodObject extends Schema ? {} extends Props ? {
+export type PropsIfHasProps<Schema extends AnyZodObject, Props> = AnyZodObject extends Schema ? {} extends Props ? {
     inputProps?: z.infer<Schema> & Props;
 } : {
     inputProps: Props;

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

@@ -1,4 +1,4 @@
-export declare type Size = {
+export type Size = {
     width: number;
     height: number;
     left: number;

package/dist/esm/PlaybackrateControl.d.ts

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

package/dist/esm/Player.d.ts

@@ -6,10 +6,10 @@ 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: {
+export type ErrorFallback = (info: {
     error: Error;
 }) => React.ReactNode;
-export declare type PlayerProps<Schema extends AnyZodObject, Props> = {
+export type PlayerProps<Schema extends AnyZodObject, Props> = {
     durationInFrames: number;
     compositionWidth: number;
     compositionHeight: number;

package/dist/esm/PlayerControls.d.ts

@@ -1,10 +1,11 @@
 import type { MouseEventHandler, ReactNode } from 'react';
 import React from 'react';
 import type { usePlayer } from './use-player.js';
-export declare type RenderPlayPauseButton = (props: {
+import type { Size } from './utils/use-element-size.js';
+export type RenderPlayPauseButton = (props: {
     playing: boolean;
 }) => ReactNode;
-export declare type RenderFullscreenButton = (props: {
+export type RenderFullscreenButton = (props: {
     isFullscreen: boolean;
 }) => ReactNode;
 declare global {
@@ -33,7 +34,7 @@ export declare const Controls: React.FC<{
     inFrame: number | null;
     outFrame: number | null;
     initiallyShowControls: number | boolean;
-    playerWidth: number;
+    canvasSize: Size | null;
     renderPlayPauseButton: RenderPlayPauseButton | null;
     renderFullscreenButton: RenderFullscreenButton | null;
     alwaysShowControls: boolean;

package/dist/esm/PlayerUI.d.ts

@@ -1,14 +1,14 @@
 import React from 'react';
 import type { PlayerRef } from './player-methods.js';
 import type { RenderFullscreenButton, RenderPlayPauseButton } from './PlayerControls.js';
-export declare type ErrorFallback = (info: {
+export type ErrorFallback = (info: {
     error: Error;
 }) => React.ReactNode;
-export declare type RenderLoading = (canvas: {
+export type RenderLoading = (canvas: {
     height: number;
     width: number;
 }) => React.ReactNode;
-export declare type RenderPoster = RenderLoading;
+export type RenderPoster = RenderLoading;
 declare const _default: React.ForwardRefExoticComponent<{
     controls: boolean;
     loop: boolean;

package/dist/esm/Thumbnail.d.ts

@@ -4,7 +4,7 @@ import type { AnyZodObject } from 'zod';
 import type { ThumbnailMethods } from './player-methods.js';
 import type { ErrorFallback, RenderLoading } from './PlayerUI.js';
 import type { PropsIfHasProps } from './utils/props-if-has-props.js';
-declare type ThumbnailProps<Schema extends AnyZodObject, Props> = PropsIfHasProps<Schema, Props> & CompProps<Schema> & {
+type ThumbnailProps<Schema extends AnyZodObject, Props> = PropsIfHasProps<Schema, Props> & CompProps<Schema> & {
     frameToDisplay: number;
     style?: CSSProperties;
     durationInFrames: number;

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

@@ -7,7 +7,7 @@ export declare const calculateScale: ({ canvasSize, compositionHeight, compositi
     compositionHeight: number;
     canvasSize: Size;
 }) => number;
-declare type Layout = {
+type Layout = {
     centerX: number;
     centerY: number;
     xCorrection: number;

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

@@ -1,31 +1,31 @@
-declare type SeekPayload = {
+type SeekPayload = {
     frame: number;
 };
-declare type ErrorPayload = {
+type ErrorPayload = {
     error: Error;
 };
-declare type TimeUpdateEventPayload = {
+type TimeUpdateEventPayload = {
     frame: number;
 };
-declare type FrameUpdateEventPayload = {
+type FrameUpdateEventPayload = {
     frame: number;
 };
-declare type RateChangeEventPayload = {
+type RateChangeEventPayload = {
     playbackRate: number;
 };
-declare type ScaleChangeEventPayload = {
+type ScaleChangeEventPayload = {
     scale: number;
 };
-declare type VolumeChangeEventPayload = {
+type VolumeChangeEventPayload = {
     volume: number;
 };
-declare type FullscreenChangeEventPayload = {
+type FullscreenChangeEventPayload = {
     isFullscreen: boolean;
 };
-declare type MuteChangeEventPayload = {
+type MuteChangeEventPayload = {
     isMuted: boolean;
 };
-declare type PlayerStateEventMap = {
+type PlayerStateEventMap = {
     seeked: SeekPayload;
     pause: undefined;
     play: undefined;
@@ -39,18 +39,18 @@ declare type PlayerStateEventMap = {
     fullscreenchange: FullscreenChangeEventPayload;
     mutechange: MuteChangeEventPayload;
 };
-declare type ThumbnailStateEventMap = {
+type ThumbnailStateEventMap = {
     error: ErrorPayload;
 };
-export declare type PlayerEventTypes = keyof PlayerStateEventMap;
-export declare type ThumbnailEventTypes = keyof ThumbnailStateEventMap;
-export declare type CallbackListener<T extends PlayerEventTypes> = (data: {
+export type PlayerEventTypes = keyof PlayerStateEventMap;
+export type ThumbnailEventTypes = keyof ThumbnailStateEventMap;
+export type CallbackListener<T extends PlayerEventTypes> = (data: {
     detail: PlayerStateEventMap[T];
 }) => void;
-declare type PlayerListeners = {
+type PlayerListeners = {
     [EventType in PlayerEventTypes]: CallbackListener<EventType>[];
 };
-declare type ThumbnailListeners = {
+type ThumbnailListeners = {
     [EventType in ThumbnailEventTypes]: CallbackListener<EventType>[];
 };
 export declare class PlayerEmitter {

package/dist/esm/icons.d.ts

@@ -8,6 +8,3 @@ export declare const FullscreenIcon: React.FC<{
 }>;
 export declare const VolumeOffIcon: React.FC;
 export declare const VolumeOnIcon: React.FC;
-export declare const SettingsIcon: React.FC<{
-    iconSize?: number;
-}>;