@remotion/player 3.3.99 → 3.3.100

package/dist/cjs/PlaybackButton.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const PlaybackButton: () => JSX.Element;

package/dist/cjs/PlaybackButton.js

@@ -0,0 +1,64 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PlaybackButton = 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 = ({ setIsComponentVisible }) => {
+    const PLAYBACK_RATES = [0.5, 0.8, 1, 1.2, 1.5, 1.8, 2, 2.5, 3, 3.5];
+    const { setPlaybackRate } = (0, react_1.useContext)(remotion_1.Internals.Timeline.TimelineContext);
+    const playbackPopup = {
+        position: 'absolute',
+        left: 0,
+        width: 125,
+        bottom: 35,
+        background: 'rgb(0 0 0 / 50%)',
+        borderRadius: 8,
+        color: '#fff',
+        textAlign: 'left',
+        backdropFilter: 'blur(10px)',
+        zIndex: 100,
+    };
+    const rateDiv = {
+        height: 30,
+        lineHeight: '30px',
+        padding: '0 15px',
+    };
+    const speedText = {
+        fontWeight: '700',
+        padding: '15px 15px 0 15px',
+        cursor: 'default',
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { style: playbackPopup, children: [(0, jsx_runtime_1.jsx)("div", { style: speedText, children: "Change speed" }), PLAYBACK_RATES.map((rate) => {
+                return ((0, jsx_runtime_1.jsx)("div", { style: rateDiv, onPointerUp: (e) => {
+                        e.stopPropagation();
+                        e.preventDefault();
+                        setPlaybackRate(rate);
+                        setIsComponentVisible(false);
+                    }, children: rate }, rate));
+            })] }));
+};
+const PlaybackButton = () => {
+    const { ref, isComponentVisible, setIsComponentVisible } = (0, use_component_visible_js_1.default)(false);
+    const playbackButton = {
+        position: 'relative',
+        display: 'inline-flex',
+        alignItems: 'center',
+        padding: '6px 0 6px 0',
+        border: 'none',
+        background: 'none',
+        height: 37,
+        cursor: 'pointer',
+    };
+    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, onPointerUp: (e) => {
+                e.stopPropagation();
+                e.preventDefault();
+                setIsComponentVisible(!isComponentVisible);
+            }, children: [(0, jsx_runtime_1.jsx)(icons_js_1.SettingsIcon, { iconSize: 22 }), isComponentVisible && ((0, jsx_runtime_1.jsx)(PlaybackPopup, { setIsComponentVisible: setIsComponentVisible }))] }) }));
+};
+exports.PlaybackButton = PlaybackButton;

package/dist/cjs/PlaybackRateButton.d.ts

@@ -0,0 +1 @@
+export declare const PlaybackrateControl: () => JSX.Element;

package/dist/cjs/PlaybackRateButton.js

@@ -0,0 +1,64 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PlaybackrateControl = 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 = ({ setIsComponentVisible }) => {
+    const PLAYBACK_RATES = [0.5, 0.8, 1, 1.2, 1.5, 1.8, 2, 2.5, 3, 3.5];
+    const { setPlaybackRate } = (0, react_1.useContext)(remotion_1.Internals.Timeline.TimelineContext);
+    const playbackPopup = {
+        position: 'absolute',
+        left: 0,
+        width: 125,
+        bottom: 35,
+        background: 'rgb(0 0 0 / 50%)',
+        borderRadius: 8,
+        color: '#fff',
+        textAlign: 'left',
+        backdropFilter: 'blur(10px)',
+        zIndex: 100,
+    };
+    const rateDiv = {
+        height: 30,
+        lineHeight: '30px',
+        padding: '0 15px',
+    };
+    const speedText = {
+        fontWeight: '700',
+        padding: '15px 15px 0 15px',
+        cursor: 'default',
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { style: playbackPopup, children: [(0, jsx_runtime_1.jsx)("div", { style: speedText, children: "Change speed" }), PLAYBACK_RATES.map((rate) => {
+                return ((0, jsx_runtime_1.jsx)("div", { style: rateDiv, onPointerUp: (e) => {
+                        e.stopPropagation();
+                        e.preventDefault();
+                        setPlaybackRate(rate);
+                        setIsComponentVisible(false);
+                    }, children: rate }, rate));
+            })] }));
+};
+const PlaybackrateControl = () => {
+    const { ref, isComponentVisible, setIsComponentVisible } = (0, use_component_visible_js_1.default)(false);
+    const playbackButton = {
+        position: 'relative',
+        display: 'inline-flex',
+        alignItems: 'center',
+        padding: '6px 0 6px 0',
+        border: 'none',
+        background: 'none',
+        height: 36,
+        cursor: 'pointer',
+    };
+    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, onPointerUp: (e) => {
+                e.stopPropagation();
+                e.preventDefault();
+                setIsComponentVisible(!isComponentVisible);
+            }, children: [(0, jsx_runtime_1.jsx)(icons_js_1.SettingsIcon, { iconSize: 22 }), isComponentVisible && ((0, jsx_runtime_1.jsx)(PlaybackPopup, { setIsComponentVisible: setIsComponentVisible }))] }) }));
+};
+exports.PlaybackrateControl = PlaybackrateControl;

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

@@ -1,6 +1,7 @@
 import type { MouseEventHandler, ReactNode } from 'react';
 import React from 'react';
 import type { usePlayer } from './use-player.js';
+import type { Size } from './utils/use-element-size.js';
 export declare type RenderPlayPauseButton = (props: {
     playing: boolean;
 }) => ReactNode;
@@ -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.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, _e;
+    var _a, _b, _c, _d;
     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 : {}), ...((_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, 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 : {}), ...((_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, 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/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 | JSX.Element | React.ReactFragment | null | undefined;
+    render(): string | number | boolean | React.ReactFragment | JSX.Element | null | undefined;
 }

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { CallbackListener, PlayerEventTypes } from './event-emitter.js';
 import { PlayerEmitter } from './event-emitter.js';
 export { Player, PlayerProps } from './Player.js';

package/dist/cjs/is-backgrounded.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
 export declare const useIsBackgrounded: () => import("react").MutableRefObject<boolean>;

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export default function useComponentVisible(initialIsVisible: boolean): {
     ref: import("react").RefObject<HTMLDivElement>;
     isComponentVisible: boolean;

package/dist/esm/PlaybackButton.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const PlaybackButton: () => JSX.Element;

package/dist/esm/PlaybackRateButton.d.ts

@@ -0,0 +1 @@
+export declare const PlaybackrateButton: () => JSX.Element;

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

@@ -1,6 +1,7 @@
 import type { MouseEventHandler, ReactNode } from 'react';
 import React from 'react';
 import type { usePlayer } from './use-player.js';
+import type { Size } from './utils/use-element-size.js';
 export declare type RenderPlayPauseButton = (props: {
     playing: boolean;
 }) => ReactNode;
@@ -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/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 | JSX.Element | React.ReactFragment | null | undefined;
+    render(): string | number | boolean | React.ReactFragment | JSX.Element | null | undefined;
 }

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;
-}>;

package/dist/esm/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { CallbackListener, PlayerEventTypes } from './event-emitter.js';
 import { PlayerEmitter } from './event-emitter.js';
 export { Player, PlayerProps } from './Player.js';