176 lines
10 KiB
JavaScript
176 lines
10 KiB
JavaScript
"use strict";
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
exports.Controls = void 0;
|
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
const react_1 = require("react");
|
|
const DefaultPlayPauseButton_js_1 = require("./DefaultPlayPauseButton.js");
|
|
const MediaVolumeSlider_js_1 = require("./MediaVolumeSlider.js");
|
|
const PlaybackrateControl_js_1 = require("./PlaybackrateControl.js");
|
|
const PlayerSeekBar_js_1 = require("./PlayerSeekBar.js");
|
|
const PlayerTimeLabel_js_1 = require("./PlayerTimeLabel.js");
|
|
const icons_js_1 = require("./icons.js");
|
|
const use_hover_state_js_1 = require("./use-hover-state.js");
|
|
const use_video_controls_resize_js_1 = require("./use-video-controls-resize.js");
|
|
const gradientSteps = [
|
|
0, 0.013, 0.049, 0.104, 0.175, 0.259, 0.352, 0.45, 0.55, 0.648, 0.741, 0.825,
|
|
0.896, 0.951, 0.987,
|
|
];
|
|
const gradientOpacities = [
|
|
0, 8.1, 15.5, 22.5, 29, 35.3, 41.2, 47.1, 52.9, 58.8, 64.7, 71, 77.5, 84.5,
|
|
91.9,
|
|
];
|
|
const globalGradientOpacity = 1 / 0.7;
|
|
const containerStyle = {
|
|
boxSizing: 'border-box',
|
|
position: 'absolute',
|
|
bottom: 0,
|
|
width: '100%',
|
|
paddingTop: 40,
|
|
paddingBottom: 10,
|
|
backgroundImage: `linear-gradient(to bottom,${gradientSteps
|
|
.map((g, i) => {
|
|
return `hsla(0, 0%, 0%, ${g}) ${gradientOpacities[i] * globalGradientOpacity}%`;
|
|
})
|
|
.join(', ')}, hsl(0, 0%, 0%) 100%)`,
|
|
backgroundSize: 'auto 145px',
|
|
display: 'flex',
|
|
paddingRight: use_video_controls_resize_js_1.X_PADDING,
|
|
paddingLeft: use_video_controls_resize_js_1.X_PADDING,
|
|
flexDirection: 'column',
|
|
transition: 'opacity 0.3s',
|
|
};
|
|
const controlsRow = {
|
|
display: 'flex',
|
|
flexDirection: 'row',
|
|
width: '100%',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
userSelect: 'none',
|
|
WebkitUserSelect: 'none',
|
|
};
|
|
const leftPartStyle = {
|
|
display: 'flex',
|
|
flexDirection: 'row',
|
|
userSelect: 'none',
|
|
WebkitUserSelect: 'none',
|
|
alignItems: 'center',
|
|
};
|
|
const xSpacer = {
|
|
width: 12,
|
|
};
|
|
const ySpacer = {
|
|
height: 8,
|
|
};
|
|
const flex1 = {
|
|
flex: 1,
|
|
};
|
|
const fullscreen = {};
|
|
const Controls = ({ durationInFrames, isFullscreen, fps, showVolumeControls, onFullscreenButtonClick, allowFullscreen, onExitFullscreenButtonClick, spaceKeyToPlayOrPause, onSeekEnd, onSeekStart, inFrame, outFrame, initiallyShowControls, canvasSize, renderPlayPauseButton, renderFullscreenButton, alwaysShowControls, showPlaybackRateControl, containerRef, buffering, hideControlsWhenPointerDoesntMove, onPointerDown, onDoubleClick, renderMuteButton, renderVolumeSlider, playing, toggle, renderCustomControls, }) => {
|
|
var _a, _b;
|
|
const playButtonRef = (0, react_1.useRef)(null);
|
|
const [supportsFullscreen, setSupportsFullscreen] = (0, react_1.useState)(false);
|
|
const hovered = (0, use_hover_state_js_1.useHoverState)(containerRef, hideControlsWhenPointerDoesntMove);
|
|
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;
|
|
}
|
|
if (typeof initiallyShowControls === 'number') {
|
|
if (initiallyShowControls % 1 !== 0) {
|
|
throw new Error('initiallyShowControls must be an integer or a boolean');
|
|
}
|
|
if (Number.isNaN(initiallyShowControls)) {
|
|
throw new Error('initiallyShowControls must not be NaN');
|
|
}
|
|
if (!Number.isFinite(initiallyShowControls)) {
|
|
throw new Error('initiallyShowControls must be finite');
|
|
}
|
|
if (initiallyShowControls <= 0) {
|
|
throw new Error('initiallyShowControls must be a positive integer');
|
|
}
|
|
return initiallyShowControls;
|
|
}
|
|
throw new TypeError('initiallyShowControls must be a number or a boolean');
|
|
});
|
|
const containerCss = (0, react_1.useMemo)(() => {
|
|
// Hide if playing and mouse outside
|
|
const shouldShow = hovered || !playing || shouldShowInitially || alwaysShowControls;
|
|
return {
|
|
...containerStyle,
|
|
opacity: Number(shouldShow),
|
|
};
|
|
}, [hovered, shouldShowInitially, playing, alwaysShowControls]);
|
|
(0, react_1.useEffect)(() => {
|
|
if (playButtonRef.current && spaceKeyToPlayOrPause) {
|
|
// This switches focus to play button when player.playing flag changes
|
|
playButtonRef.current.focus({
|
|
preventScroll: true,
|
|
});
|
|
}
|
|
}, [playing, spaceKeyToPlayOrPause]);
|
|
(0, react_1.useEffect)(() => {
|
|
var _a;
|
|
// Must be handled client-side to avoid SSR hydration mismatch
|
|
setSupportsFullscreen((_a = (typeof document !== 'undefined' &&
|
|
(document.fullscreenEnabled ||
|
|
// @ts-expect-error Types not defined
|
|
document.webkitFullscreenEnabled))) !== null && _a !== void 0 ? _a : false);
|
|
}, []);
|
|
(0, react_1.useEffect)(() => {
|
|
if (shouldShowInitially === false) {
|
|
return;
|
|
}
|
|
const time = shouldShowInitially === true ? 2000 : shouldShowInitially;
|
|
const timeout = setTimeout(() => {
|
|
setInitiallyShowControls(false);
|
|
}, time);
|
|
return () => {
|
|
clearInterval(timeout);
|
|
};
|
|
}, [shouldShowInitially]);
|
|
const playbackRates = (0, react_1.useMemo)(() => {
|
|
if (showPlaybackRateControl === true) {
|
|
return [0.5, 0.8, 1, 1.2, 1.5, 1.8, 2, 2.5, 3];
|
|
}
|
|
if (Array.isArray(showPlaybackRateControl)) {
|
|
for (const rate of showPlaybackRateControl) {
|
|
if (typeof rate !== 'number') {
|
|
throw new Error('Every item in showPlaybackRateControl must be a number');
|
|
}
|
|
if (rate <= 0) {
|
|
throw new Error('Every item in showPlaybackRateControl must be positive');
|
|
}
|
|
}
|
|
return showPlaybackRateControl;
|
|
}
|
|
return null;
|
|
}, [showPlaybackRateControl]);
|
|
const customControlsElement = renderCustomControls
|
|
? renderCustomControls()
|
|
: null;
|
|
const ref = (0, react_1.useRef)(null);
|
|
const flexRef = (0, react_1.useRef)(null);
|
|
const onPointerDownIfContainer = (0, react_1.useCallback)((e) => {
|
|
// Only if pressing the container
|
|
if (e.target === ref.current || e.target === flexRef.current) {
|
|
onPointerDown === null || onPointerDown === void 0 ? void 0 : onPointerDown(e);
|
|
}
|
|
}, [onPointerDown]);
|
|
const onDoubleClickIfContainer = (0, react_1.useCallback)((e) => {
|
|
// Only if pressing the container
|
|
if (e.target === ref.current || e.target === flexRef.current) {
|
|
onDoubleClick === null || onDoubleClick === void 0 ? void 0 : onDoubleClick(e);
|
|
}
|
|
}, [onDoubleClick]);
|
|
return ((0, jsx_runtime_1.jsxs)("div", { ref: ref, style: containerCss, onPointerDown: onPointerDownIfContainer, onDoubleClick: onDoubleClickIfContainer, children: [(0, jsx_runtime_1.jsxs)("div", { ref: flexRef, 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: toggle, "aria-label": playing ? 'Pause video' : 'Play video', title: playing ? 'Pause video' : 'Play video', children: renderPlayPauseButton === null ? ((0, jsx_runtime_1.jsx)(DefaultPlayPauseButton_js_1.DefaultPlayPauseButton, { buffering: buffering, playing: playing })) : (((_b = renderPlayPauseButton({
|
|
playing,
|
|
isBuffering: buffering,
|
|
})) !== null && _b !== void 0 ? _b : ((0, jsx_runtime_1.jsx)(DefaultPlayPauseButton_js_1.DefaultPlayPauseButton, { buffering: buffering, playing: 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, { renderMuteButton: renderMuteButton, renderVolumeSlider: renderVolumeSlider, displayVerticalVolumeSlider: displayVerticalVolumeSlider })] })) : null, (0, jsx_runtime_1.jsx)("div", { style: xSpacer }), (0, jsx_runtime_1.jsx)(PlayerTimeLabel_js_1.PlayerTimeLabel, { durationInFrames: durationInFrames, fps: fps, maxTimeLabelWidth: maxTimeLabelWidth }), (0, jsx_runtime_1.jsx)("div", { style: xSpacer })] }), (0, jsx_runtime_1.jsx)("div", { style: flex1 }), customControlsElement, customControlsElement && playbackRates && canvasSize ? ((0, jsx_runtime_1.jsx)("div", { style: xSpacer })) : null, 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 })] }));
|
|
};
|
|
exports.Controls = Controls;
|