@remotion/player 4.0.0-alpha14 → 4.0.0-alpha17

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (14) hide show
  1. package/dist/cjs/PlaybackrateControl.d.ts +3 -0
  2. package/dist/cjs/PlaybackrateControl.js +50 -23
  3. package/dist/cjs/PlayerControls.d.ts +2 -1
  4. package/dist/cjs/PlayerControls.js +7 -17
  5. package/dist/cjs/PlayerUI.js +2 -2
  6. package/dist/cjs/icons.d.ts +0 -3
  7. package/dist/cjs/icons.js +1 -5
  8. package/dist/esm/PlaybackrateControl.d.ts +3 -0
  9. package/dist/esm/PlayerControls.d.ts +2 -1
  10. package/dist/esm/icons.d.ts +0 -3
  11. package/dist/esm/index.mjs +58 -43
  12. package/dist/tsconfig-esm.tsbuildinfo +1 -1
  13. package/dist/tsconfig.tsbuildinfo +1 -1
  14. package/package.json +2 -2
package/dist/cjs/PlaybackrateControl.d.ts CHANGED
@@ -1,5 +1,8 @@
1
1
  import React from 'react';
2
+ import type { Size } from './utils/use-element-size.js';
2
3
  export declare const Checkmark: () => JSX.Element;
4
+ export declare const playerButtonStyle: React.CSSProperties;
3
5
  export declare const PlaybackrateControl: React.FC<{
4
6
  playbackRates: number[];
7
+ canvasSize: Size;
5
8
  }>;
package/dist/cjs/PlaybackrateControl.js CHANGED
@@ -3,23 +3,15 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
3
3
  return (mod && mod.__esModule) ? mod : { "default": mod };
4
4
  };
5
5
  Object.defineProperty(exports, "__esModule", { value: true });
6
- exports.PlaybackrateControl = exports.Checkmark = void 0;
6
+ exports.PlaybackrateControl = exports.playerButtonStyle = exports.Checkmark = void 0;
7
7
  const jsx_runtime_1 = require("react/jsx-runtime");
8
8
  const react_1 = require("react");
9
9
  const remotion_1 = require("remotion");
10
- const icons_js_1 = require("./icons.js");
11
10
  const use_component_visible_js_1 = __importDefault(require("./utils/use-component-visible.js"));
12
- const playbackPopup = {
13
- position: 'absolute',
14
- right: 0,
15
- width: 125,
16
- bottom: 35,
17
- background: '#fff',
18
- borderRadius: 4,
19
- overflow: 'hidden',
20
- color: 'black',
21
- textAlign: 'left',
22
- };
11
+ // To align
12
+ const BOTTOM = 35;
13
+ // Arbitrary to clamp the height of the popup
14
+ const THRESHOLD = 70;
23
15
  const rateDiv = {
24
16
  height: 30,
25
17
  paddingRight: 15,
@@ -40,7 +32,7 @@ const checkmarkStyle = {
40
32
  };
41
33
  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" }) }));
42
34
  exports.Checkmark = Checkmark;
43
- const PlaybackPopup = ({ setIsComponentVisible, playbackRates }) => {
35
+ const PlaybackPopup = ({ setIsComponentVisible, playbackRates, canvasSize }) => {
44
36
  const { setPlaybackRate, playbackRate } = (0, react_1.useContext)(remotion_1.Internals.Timeline.TimelineContext);
45
37
  const [keyboardSelectedRate, setKeyboardSelectedRate] = (0, react_1.useState)(playbackRate);
46
38
  (0, react_1.useEffect)(() => {
@@ -89,6 +81,20 @@ const PlaybackPopup = ({ setIsComponentVisible, playbackRates }) => {
89
81
  setPlaybackRate(rate);
90
82
  setIsComponentVisible(false);
91
83
  }, [setIsComponentVisible, setPlaybackRate]);
84
+ const playbackPopup = (0, react_1.useMemo)(() => {
85
+ return {
86
+ position: 'absolute',
87
+ right: 0,
88
+ width: 125,
89
+ maxHeight: canvasSize.height - THRESHOLD - BOTTOM,
90
+ bottom: 35,
91
+ background: '#fff',
92
+ borderRadius: 4,
93
+ overflow: 'auto',
94
+ color: 'black',
95
+ textAlign: 'left',
96
+ };
97
+ }, [canvasSize.height]);
92
98
  return ((0, jsx_runtime_1.jsx)("div", { style: playbackPopup, children: playbackRates.map((rate) => {
93
99
  return ((0, jsx_runtime_1.jsx)(PlaybackrateOption, { selectedRate: playbackRate, onSelect: onSelect, rate: rate, keyboardSelectedRate: keyboardSelectedRate }, rate));
94
100
  }) }));
@@ -114,23 +120,44 @@ const PlaybackrateOption = ({ rate, onSelect, selectedRate, keyboardSelectedRate
114
120
  }, [hovered, keyboardSelectedRate, rate]);
115
121
  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));
116
122
  };
117
- const playbackButton = {
118
- position: 'relative',
119
- display: 'inline-flex',
120
- alignItems: 'center',
121
- padding: '6px 0 6px 0',
123
+ const label = {
124
+ fontSize: 13,
125
+ fontWeight: 'bold',
126
+ color: 'white',
127
+ border: '2px solid white',
128
+ borderRadius: 20,
129
+ paddingLeft: 8,
130
+ paddingRight: 8,
131
+ paddingTop: 2,
132
+ paddingBottom: 2,
133
+ };
134
+ exports.playerButtonStyle = {
135
+ appearance: 'none',
136
+ backgroundColor: 'transparent',
122
137
  border: 'none',
123
- background: 'none',
124
- height: 36,
125
138
  cursor: 'pointer',
139
+ paddingLeft: 0,
140
+ paddingRight: 0,
141
+ paddingTop: 6,
142
+ paddingBottom: 6,
143
+ height: 37,
144
+ display: 'inline-flex',
145
+ marginBottom: 0,
146
+ marginTop: 0,
147
+ alignItems: 'center',
148
+ };
149
+ const button = {
150
+ ...exports.playerButtonStyle,
151
+ position: 'relative',
126
152
  };
127
- const PlaybackrateControl = ({ playbackRates }) => {
153
+ const PlaybackrateControl = ({ playbackRates, canvasSize }) => {
128
154
  const { ref, isComponentVisible, setIsComponentVisible } = (0, use_component_visible_js_1.default)(false);
155
+ const { playbackRate } = (0, react_1.useContext)(remotion_1.Internals.Timeline.TimelineContext);
129
156
  const onClick = (0, react_1.useCallback)((e) => {
130
157
  e.stopPropagation();
131
158
  e.preventDefault();
132
159
  setIsComponentVisible(!isComponentVisible);
133
160
  }, [isComponentVisible, setIsComponentVisible]);
134
- 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 }))] }) }));
161
+ 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 }))] }) }));
135
162
  };
136
163
  exports.PlaybackrateControl = PlaybackrateControl;
package/dist/cjs/PlayerControls.d.ts CHANGED
@@ -1,6 +1,7 @@
1
1
  import type { MouseEventHandler, ReactNode } from 'react';
2
2
  import React from 'react';
3
3
  import type { usePlayer } from './use-player.js';
4
+ import type { Size } from './utils/use-element-size.js';
4
5
  export type RenderPlayPauseButton = (props: {
5
6
  playing: boolean;
6
7
  }) => ReactNode;
@@ -33,7 +34,7 @@ export declare const Controls: React.FC<{
33
34
  inFrame: number | null;
34
35
  outFrame: number | null;
35
36
  initiallyShowControls: number | boolean;
36
- playerWidth: number;
37
+ canvasSize: Size | null;
37
38
  renderPlayPauseButton: RenderPlayPauseButton | null;
38
39
  renderFullscreenButton: RenderFullscreenButton | null;
39
40
  alwaysShowControls: boolean;
package/dist/cjs/PlayerControls.js CHANGED
@@ -38,20 +38,6 @@ const containerStyle = {
38
38
  flexDirection: 'column',
39
39
  transition: 'opacity 0.3s',
40
40
  };
41
- const buttonStyle = {
42
- appearance: 'none',
43
- backgroundColor: 'transparent',
44
- border: 'none',
45
- cursor: 'pointer',
46
- paddingLeft: 0,
47
- paddingRight: 0,
48
- paddingTop: 6,
49
- paddingBottom: 6,
50
- height: 37,
51
- display: 'inline',
52
- marginBottom: 0,
53
- marginTop: 0,
54
- };
55
41
  const controlsRow = {
56
42
  display: 'flex',
57
43
  flexDirection: 'row',
@@ -77,11 +63,15 @@ const flex1 = {
77
63
  };
78
64
  const fullscreen = {};
79
65
  const PlayPauseButton = ({ playing }) => playing ? (0, jsx_runtime_1.jsx)(icons_js_1.PauseIcon, {}) : (0, jsx_runtime_1.jsx)(icons_js_1.PlayIcon, {});
80
- const Controls = ({ durationInFrames, hovered, isFullscreen, fps, player, showVolumeControls, onFullscreenButtonClick, allowFullscreen, onExitFullscreenButtonClick, spaceKeyToPlayOrPause, onSeekEnd, onSeekStart, inFrame, outFrame, initiallyShowControls, playerWidth, renderPlayPauseButton, renderFullscreenButton, alwaysShowControls, showPlaybackRateControl, }) => {
66
+ const Controls = ({ durationInFrames, hovered, isFullscreen, fps, player, showVolumeControls, onFullscreenButtonClick, allowFullscreen, onExitFullscreenButtonClick, spaceKeyToPlayOrPause, onSeekEnd, onSeekStart, inFrame, outFrame, initiallyShowControls, canvasSize, renderPlayPauseButton, renderFullscreenButton, alwaysShowControls, showPlaybackRateControl, }) => {
67
+ var _a;
81
68
  const playButtonRef = (0, react_1.useRef)(null);
82
69
  const frame = remotion_1.Internals.Timeline.useTimelinePosition();
83
70
  const [supportsFullscreen, setSupportsFullscreen] = (0, react_1.useState)(false);
84
- const { maxTimeLabelWidth, displayVerticalVolumeSlider } = (0, use_video_controls_resize_js_1.useVideoControlsResize)({ allowFullscreen, playerWidth });
71
+ const { maxTimeLabelWidth, displayVerticalVolumeSlider } = (0, use_video_controls_resize_js_1.useVideoControlsResize)({
72
+ allowFullscreen,
73
+ playerWidth: (_a = canvasSize === null || canvasSize === void 0 ? void 0 : canvasSize.width) !== null && _a !== void 0 ? _a : 0,
74
+ });
85
75
  const [shouldShowInitially, setInitiallyShowControls] = (0, react_1.useState)(() => {
86
76
  if (typeof initiallyShowControls === 'boolean') {
87
77
  return initiallyShowControls;
@@ -164,7 +154,7 @@ const Controls = ({ durationInFrames, hovered, isFullscreen, fps, player, showVo
164
154
  }
165
155
  return null;
166
156
  }, [showPlaybackRateControl]);
167
- 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
157
+ 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
168
158
  ? onExitFullscreenButtonClick
169
159
  : 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 })] }));
170
160
  };
package/dist/cjs/PlayerUI.js CHANGED
@@ -42,7 +42,7 @@ if (reactVersion === '0') {
42
42
  }
43
43
  const doesReactVersionSupportSuspense = parseInt(reactVersion, 10) >= 18;
44
44
  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) => {
45
- var _a, _b, _c, _d;
45
+ var _a, _b, _c;
46
46
  const config = remotion_1.Internals.useUnsafeVideoConfig();
47
47
  const video = remotion_1.Internals.useVideo();
48
48
  const container = (0, react_1.useRef)(null);
@@ -317,7 +317,7 @@ const PlayerUI = ({ controls, style, loop, autoPlay, allowFullscreen, inputProps
317
317
  showPosterWhenEnded && player.isLastFrame && !player.isPlaying(),
318
318
  showPosterWhenUnplayed && !player.hasPlayed && !player.isPlaying(),
319
319
  ].some(Boolean);
320
- 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] }));
320
+ 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] }));
321
321
  if (is_node_js_1.IS_NODE && !doesReactVersionSupportSuspense) {
322
322
  return ((0, jsx_runtime_1.jsx)("div", { ref: container, style: outerStyle, className: className, children: content }));
323
323
  }
package/dist/cjs/icons.d.ts CHANGED
@@ -8,6 +8,3 @@ export declare const FullscreenIcon: React.FC<{
8
8
  }>;
9
9
  export declare const VolumeOffIcon: React.FC;
10
10
  export declare const VolumeOnIcon: React.FC;
11
- export declare const SettingsIcon: React.FC<{
12
- iconSize?: number;
13
- }>;
package/dist/cjs/icons.js CHANGED
@@ -1,6 +1,6 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.SettingsIcon = exports.VolumeOnIcon = exports.VolumeOffIcon = exports.FullscreenIcon = exports.PauseIcon = exports.PlayIcon = exports.fullscreenIconSize = exports.ICON_SIZE = void 0;
3
+ exports.VolumeOnIcon = exports.VolumeOffIcon = exports.FullscreenIcon = exports.PauseIcon = exports.PlayIcon = exports.fullscreenIconSize = exports.ICON_SIZE = void 0;
4
4
  const jsx_runtime_1 = require("react/jsx-runtime");
5
5
  exports.ICON_SIZE = 25;
6
6
  exports.fullscreenIconSize = 16;
@@ -48,7 +48,3 @@ const VolumeOnIcon = () => {
48
48
  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" }) }));
49
49
  };
50
50
  exports.VolumeOnIcon = VolumeOnIcon;
51
- const SettingsIcon = ({ iconSize }) => {
52
- 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" }) }));
53
- };
54
- exports.SettingsIcon = SettingsIcon;
package/dist/esm/PlaybackrateControl.d.ts CHANGED
@@ -1,5 +1,8 @@
1
1
  import React from 'react';
2
+ import type { Size } from './utils/use-element-size.js';
2
3
  export declare const Checkmark: () => JSX.Element;
4
+ export declare const playerButtonStyle: React.CSSProperties;
3
5
  export declare const PlaybackrateControl: React.FC<{
4
6
  playbackRates: number[];
7
+ canvasSize: Size;
5
8
  }>;
package/dist/esm/PlayerControls.d.ts CHANGED
@@ -1,6 +1,7 @@
1
1
  import type { MouseEventHandler, ReactNode } from 'react';
2
2
  import React from 'react';
3
3
  import type { usePlayer } from './use-player.js';
4
+ import type { Size } from './utils/use-element-size.js';
4
5
  export type RenderPlayPauseButton = (props: {
5
6
  playing: boolean;
6
7
  }) => ReactNode;
@@ -33,7 +34,7 @@ export declare const Controls: React.FC<{
33
34
  inFrame: number | null;
34
35
  outFrame: number | null;
35
36
  initiallyShowControls: number | boolean;
36
- playerWidth: number;
37
+ canvasSize: Size | null;
37
38
  renderPlayPauseButton: RenderPlayPauseButton | null;
38
39
  renderFullscreenButton: RenderFullscreenButton | null;
39
40
  alwaysShowControls: boolean;
package/dist/esm/icons.d.ts CHANGED
@@ -8,6 +8,3 @@ export declare const FullscreenIcon: React.FC<{
8
8
  }>;
9
9
  export declare const VolumeOffIcon: React.FC;
10
10
  export declare const VolumeOnIcon: React.FC;
11
- export declare const SettingsIcon: React.FC<{
12
- iconSize?: number;
13
- }>;
package/dist/esm/index.mjs CHANGED
@@ -712,9 +712,6 @@ const VolumeOffIcon = () => {
712
712
  const VolumeOnIcon = () => {
713
713
  return (jsx("svg", { width: ICON_SIZE, height: ICON_SIZE, viewBox: "0 0 24 24", children: 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" }) }));
714
714
  };
715
- const SettingsIcon = ({ iconSize }) => {
716
- return (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", height: iconSize !== null && iconSize !== void 0 ? iconSize : ICON_SIZE, viewBox: "0 0 512 512", style: { fill: '#fff' }, children: 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" }) }));
717
- };
718
715
 
719
716
  const BAR_HEIGHT$1 = 5;
720
717
  const KNOB_SIZE$1 = 12;
@@ -845,17 +842,10 @@ function useComponentVisible(initialIsVisible) {
845
842
  return { ref, isComponentVisible, setIsComponentVisible };
846
843
  }
847
844
 
848
- const playbackPopup = {
849
- position: 'absolute',
850
- right: 0,
851
- width: 125,
852
- bottom: 35,
853
- background: '#fff',
854
- borderRadius: 4,
855
- overflow: 'hidden',
856
- color: 'black',
857
- textAlign: 'left',
858
- };
845
+ // To align
846
+ const BOTTOM = 35;
847
+ // Arbitrary to clamp the height of the popup
848
+ const THRESHOLD = 70;
859
849
  const rateDiv = {
860
850
  height: 30,
861
851
  paddingRight: 15,
@@ -875,7 +865,7 @@ const checkmarkStyle = {
875
865
  color: 'black',
876
866
  };
877
867
  const Checkmark = () => (jsx("svg", { viewBox: "0 0 512 512", style: checkmarkStyle, children: 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" }) }));
878
- const PlaybackPopup = ({ setIsComponentVisible, playbackRates }) => {
868
+ const PlaybackPopup = ({ setIsComponentVisible, playbackRates, canvasSize }) => {
879
869
  const { setPlaybackRate, playbackRate } = useContext(Internals.Timeline.TimelineContext);
880
870
  const [keyboardSelectedRate, setKeyboardSelectedRate] = useState(playbackRate);
881
871
  useEffect(() => {
@@ -924,6 +914,20 @@ const PlaybackPopup = ({ setIsComponentVisible, playbackRates }) => {
924
914
  setPlaybackRate(rate);
925
915
  setIsComponentVisible(false);
926
916
  }, [setIsComponentVisible, setPlaybackRate]);
917
+ const playbackPopup = useMemo(() => {
918
+ return {
919
+ position: 'absolute',
920
+ right: 0,
921
+ width: 125,
922
+ maxHeight: canvasSize.height - THRESHOLD - BOTTOM,
923
+ bottom: 35,
924
+ background: '#fff',
925
+ borderRadius: 4,
926
+ overflow: 'auto',
927
+ color: 'black',
928
+ textAlign: 'left',
929
+ };
930
+ }, [canvasSize.height]);
927
931
  return (jsx("div", { style: playbackPopup, children: playbackRates.map((rate) => {
928
932
  return (jsx(PlaybackrateOption, { selectedRate: playbackRate, onSelect: onSelect, rate: rate, keyboardSelectedRate: keyboardSelectedRate }, rate));
929
933
  }) }));
@@ -949,24 +953,45 @@ const PlaybackrateOption = ({ rate, onSelect, selectedRate, keyboardSelectedRate
949
953
  }, [hovered, keyboardSelectedRate, rate]);
950
954
  return (jsxs("div", { onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, tabIndex: 0, style: actualStyle, onClick: onClick, children: [jsx("div", { style: checkmarkContainer, children: rate === selectedRate ? jsx(Checkmark, {}) : null }), rate.toFixed(1), "x"] }, rate));
951
955
  };
952
- const playbackButton = {
953
- position: 'relative',
954
- display: 'inline-flex',
955
- alignItems: 'center',
956
- padding: '6px 0 6px 0',
956
+ const label = {
957
+ fontSize: 13,
958
+ fontWeight: 'bold',
959
+ color: 'white',
960
+ border: '2px solid white',
961
+ borderRadius: 20,
962
+ paddingLeft: 8,
963
+ paddingRight: 8,
964
+ paddingTop: 2,
965
+ paddingBottom: 2,
966
+ };
967
+ const playerButtonStyle = {
968
+ appearance: 'none',
969
+ backgroundColor: 'transparent',
957
970
  border: 'none',
958
- background: 'none',
959
- height: 36,
960
971
  cursor: 'pointer',
972
+ paddingLeft: 0,
973
+ paddingRight: 0,
974
+ paddingTop: 6,
975
+ paddingBottom: 6,
976
+ height: 37,
977
+ display: 'inline-flex',
978
+ marginBottom: 0,
979
+ marginTop: 0,
980
+ alignItems: 'center',
981
+ };
982
+ const button = {
983
+ ...playerButtonStyle,
984
+ position: 'relative',
961
985
  };
962
- const PlaybackrateControl = ({ playbackRates }) => {
986
+ const PlaybackrateControl = ({ playbackRates, canvasSize }) => {
963
987
  const { ref, isComponentVisible, setIsComponentVisible } = useComponentVisible(false);
988
+ const { playbackRate } = useContext(Internals.Timeline.TimelineContext);
964
989
  const onClick = useCallback((e) => {
965
990
  e.stopPropagation();
966
991
  e.preventDefault();
967
992
  setIsComponentVisible(!isComponentVisible);
968
993
  }, [isComponentVisible, setIsComponentVisible]);
969
- return (jsx("div", { ref: ref, children: jsxs("button", { type: "button", "aria-label": "Change playback rate", style: playbackButton, onClick: onClick, children: [jsx(SettingsIcon, { iconSize: 22 }), isComponentVisible && (jsx(PlaybackPopup, { playbackRates: playbackRates, setIsComponentVisible: setIsComponentVisible }))] }) }));
994
+ return (jsx("div", { ref: ref, children: jsxs("button", { type: "button", "aria-label": "Change playback rate", style: button, onClick: onClick, children: [jsxs("div", { style: label, children: [playbackRate, "x"] }), isComponentVisible && (jsx(PlaybackPopup, { canvasSize: canvasSize, playbackRates: playbackRates, setIsComponentVisible: setIsComponentVisible }))] }) }));
970
995
  };
971
996
 
972
997
  const getFrameFromX = (clientX, durationInFrames, width) => {
@@ -1167,20 +1192,6 @@ const containerStyle = {
1167
1192
  flexDirection: 'column',
1168
1193
  transition: 'opacity 0.3s',
1169
1194
  };
1170
- const buttonStyle = {
1171
- appearance: 'none',
1172
- backgroundColor: 'transparent',
1173
- border: 'none',
1174
- cursor: 'pointer',
1175
- paddingLeft: 0,
1176
- paddingRight: 0,
1177
- paddingTop: 6,
1178
- paddingBottom: 6,
1179
- height: 37,
1180
- display: 'inline',
1181
- marginBottom: 0,
1182
- marginTop: 0,
1183
- };
1184
1195
  const controlsRow = {
1185
1196
  display: 'flex',
1186
1197
  flexDirection: 'row',
@@ -1206,11 +1217,15 @@ const flex1 = {
1206
1217
  };
1207
1218
  const fullscreen = {};
1208
1219
  const PlayPauseButton = ({ playing }) => playing ? jsx(PauseIcon, {}) : jsx(PlayIcon, {});
1209
- const Controls = ({ durationInFrames, hovered, isFullscreen, fps, player, showVolumeControls, onFullscreenButtonClick, allowFullscreen, onExitFullscreenButtonClick, spaceKeyToPlayOrPause, onSeekEnd, onSeekStart, inFrame, outFrame, initiallyShowControls, playerWidth, renderPlayPauseButton, renderFullscreenButton, alwaysShowControls, showPlaybackRateControl, }) => {
1220
+ const Controls = ({ durationInFrames, hovered, isFullscreen, fps, player, showVolumeControls, onFullscreenButtonClick, allowFullscreen, onExitFullscreenButtonClick, spaceKeyToPlayOrPause, onSeekEnd, onSeekStart, inFrame, outFrame, initiallyShowControls, canvasSize, renderPlayPauseButton, renderFullscreenButton, alwaysShowControls, showPlaybackRateControl, }) => {
1221
+ var _a;
1210
1222
  const playButtonRef = useRef(null);
1211
1223
  const frame = Internals.Timeline.useTimelinePosition();
1212
1224
  const [supportsFullscreen, setSupportsFullscreen] = useState(false);
1213
- const { maxTimeLabelWidth, displayVerticalVolumeSlider } = useVideoControlsResize({ allowFullscreen, playerWidth });
1225
+ const { maxTimeLabelWidth, displayVerticalVolumeSlider } = useVideoControlsResize({
1226
+ allowFullscreen,
1227
+ playerWidth: (_a = canvasSize === null || canvasSize === void 0 ? void 0 : canvasSize.width) !== null && _a !== void 0 ? _a : 0,
1228
+ });
1214
1229
  const [shouldShowInitially, setInitiallyShowControls] = useState(() => {
1215
1230
  if (typeof initiallyShowControls === 'boolean') {
1216
1231
  return initiallyShowControls;
@@ -1293,7 +1308,7 @@ const Controls = ({ durationInFrames, hovered, isFullscreen, fps, player, showVo
1293
1308
  }
1294
1309
  return null;
1295
1310
  }, [showPlaybackRateControl]);
1296
- return (jsxs("div", { style: containerCss, children: [jsxs("div", { style: controlsRow, children: [jsxs("div", { style: leftPartStyle, children: [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 ? (jsx(PlayPauseButton, { playing: player.playing })) : (renderPlayPauseButton({ playing: player.playing })) }), showVolumeControls ? (jsxs(Fragment, { children: [jsx("div", { style: xSpacer }), jsx(MediaVolumeSlider, { displayVerticalVolumeSlider: displayVerticalVolumeSlider })] })) : null, jsx("div", { style: xSpacer }), jsxs("div", { style: timeLabel, children: [formatTime(frame / fps), " / ", formatTime(durationInFrames / fps)] }), jsx("div", { style: xSpacer })] }), jsx("div", { style: flex1 }), playbackRates && jsx(PlaybackrateControl, { playbackRates: playbackRates }), playbackRates && supportsFullscreen && allowFullscreen ? (jsx("div", { style: xSpacer })) : null, jsx("div", { style: fullscreen, children: supportsFullscreen && allowFullscreen ? (jsx("button", { type: "button", "aria-label": isFullscreen ? 'Exit fullscreen' : 'Enter Fullscreen', title: isFullscreen ? 'Exit fullscreen' : 'Enter Fullscreen', style: buttonStyle, onClick: isFullscreen
1311
+ return (jsxs("div", { style: containerCss, children: [jsxs("div", { style: controlsRow, children: [jsxs("div", { style: leftPartStyle, children: [jsx("button", { ref: playButtonRef, type: "button", style: 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 ? (jsx(PlayPauseButton, { playing: player.playing })) : (renderPlayPauseButton({ playing: player.playing })) }), showVolumeControls ? (jsxs(Fragment, { children: [jsx("div", { style: xSpacer }), jsx(MediaVolumeSlider, { displayVerticalVolumeSlider: displayVerticalVolumeSlider })] })) : null, jsx("div", { style: xSpacer }), jsxs("div", { style: timeLabel, children: [formatTime(frame / fps), " / ", formatTime(durationInFrames / fps)] }), jsx("div", { style: xSpacer })] }), jsx("div", { style: flex1 }), playbackRates && canvasSize && (jsx(PlaybackrateControl, { canvasSize: canvasSize, playbackRates: playbackRates })), playbackRates && supportsFullscreen && allowFullscreen ? (jsx("div", { style: xSpacer })) : null, jsx("div", { style: fullscreen, children: supportsFullscreen && allowFullscreen ? (jsx("button", { type: "button", "aria-label": isFullscreen ? 'Exit fullscreen' : 'Enter Fullscreen', title: isFullscreen ? 'Exit fullscreen' : 'Enter Fullscreen', style: playerButtonStyle, onClick: isFullscreen
1297
1312
  ? onExitFullscreenButtonClick
1298
1313
  : onFullscreenButtonClick, children: renderFullscreenButton === null ? (jsx(FullscreenIcon, { isFullscreen: isFullscreen })) : (renderFullscreenButton({ isFullscreen })) })) : null })] }), jsx("div", { style: ySpacer }), jsx(PlayerSeekBar, { onSeekEnd: onSeekEnd, onSeekStart: onSeekStart, durationInFrames: durationInFrames, inFrame: inFrame, outFrame: outFrame })] }));
1299
1314
  };
@@ -1387,7 +1402,7 @@ if (reactVersion$1 === '0') {
1387
1402
  }
1388
1403
  const doesReactVersionSupportSuspense$1 = parseInt(reactVersion$1, 10) >= 18;
1389
1404
  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) => {
1390
- var _a, _b, _c, _d;
1405
+ var _a, _b, _c;
1391
1406
  const config = Internals.useUnsafeVideoConfig();
1392
1407
  const video = Internals.useVideo();
1393
1408
  const container = useRef(null);
@@ -1662,7 +1677,7 @@ const PlayerUI = ({ controls, style, loop, autoPlay, allowFullscreen, inputProps
1662
1677
  showPosterWhenEnded && player.isLastFrame && !player.isPlaying(),
1663
1678
  showPosterWhenUnplayed && !player.hasPlayed && !player.isPlaying(),
1664
1679
  ].some(Boolean);
1665
- const content = (jsxs(Fragment, { children: [jsx("div", { style: outer, onClick: clickToPlay ? handleClick : undefined, onDoubleClick: doubleClickToFullscreen ? handleDoubleClick : undefined, children: jsx("div", { style: containerStyle, className: PLAYER_CSS_CLASSNAME, children: VideoComponent ? (jsx(ErrorBoundary, { onError: onError, errorFallback: errorFallback, children: 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 ? (jsx("div", { style: outer, onClick: clickToPlay ? handleClick : undefined, onDoubleClick: doubleClickToFullscreen ? handleDoubleClick : undefined, children: poster })) : null, controls ? (jsx(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] }));
1680
+ const content = (jsxs(Fragment, { children: [jsx("div", { style: outer, onClick: clickToPlay ? handleClick : undefined, onDoubleClick: doubleClickToFullscreen ? handleDoubleClick : undefined, children: jsx("div", { style: containerStyle, className: PLAYER_CSS_CLASSNAME, children: VideoComponent ? (jsx(ErrorBoundary, { onError: onError, errorFallback: errorFallback, children: 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 ? (jsx("div", { style: outer, onClick: clickToPlay ? handleClick : undefined, onDoubleClick: doubleClickToFullscreen ? handleDoubleClick : undefined, children: poster })) : null, controls ? (jsx(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] }));
1666
1681
  if (IS_NODE && !doesReactVersionSupportSuspense$1) {
1667
1682
  return (jsx("div", { ref: container, style: outerStyle, className: className, children: content }));
1668
1683
  }