@wix/design-system
Version:
@wix/design-system
305 lines (302 loc) • 11.9 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
exports.__esModule = true;
exports["default"] = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = _interopRequireWildcard(require("react"));
var _AudioPlayerSt = require("./AudioPlayer.st.css.js");
var _Tooltip = _interopRequireDefault(require("../Tooltip"));
var _IconButton = _interopRequireDefault(require("../IconButton"));
var _Loader = _interopRequireDefault(require("../Loader"));
var _Heading = _interopRequireDefault(require("../Heading"));
var _wixUiIconsCommon = require("@wix/wix-ui-icons-common");
var _constants = require("./constants");
var _AudioManager = require("./AudioManager/AudioManager");
var _utils = require("./utils");
var _WixDesignSystemIconThemeProvider = require("../WixDesignSystemIconThemeProvider");
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/cjs/AudioPlayer/AudioPlayer.jsx",
_this = void 0;
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
/** AudioPlayer */
var AudioPlayer = /*#__PURE__*/(0, _react.memo)(/*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
var dataHook = _ref.dataHook,
className = _ref.className,
src = _ref.src,
format = _ref.format,
_ref$preload = _ref.preload,
preload = _ref$preload === void 0 ? 'metadata' : _ref$preload,
_ref$webAudioAPI = _ref.webAudioAPI,
webAudioAPI = _ref$webAudioAPI === void 0 ? false : _ref$webAudioAPI,
onLoad = _ref.onLoad,
onLoadError = _ref.onLoadError,
onPlay = _ref.onPlay,
onPause = _ref.onPause,
onEnd = _ref.onEnd,
onSeek = _ref.onSeek,
autoplay = _ref.autoplay,
volume = _ref.volume;
var icons = (0, _WixDesignSystemIconThemeProvider.useIcons)('AudioPlayer', {
PlayFilled: _wixUiIconsCommon.PlayFilled,
PauseFilled: _wixUiIconsCommon.PauseFilled
});
var _useState = (0, _react.useState)(true),
_useState2 = (0, _slicedToArray2["default"])(_useState, 2),
isSliderLocked = _useState2[0],
setIsSliderLocked = _useState2[1];
var _useState3 = (0, _react.useState)(0),
_useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
hoverPosition = _useState4[0],
setHoverPosition = _useState4[1];
var _useState5 = (0, _react.useState)(0),
_useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
handleSizeInPercentage = _useState6[0],
setHandleSizeInPercentage = _useState6[1];
var _useState7 = (0, _react.useState)(false),
_useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
playing = _useState8[0],
setPlaying = _useState8[1];
var _useState9 = (0, _react.useState)(true),
_useState0 = (0, _slicedToArray2["default"])(_useState9, 2),
showDuration = _useState0[0],
setShowDuration = _useState0[1];
var playPauseButtonRef = (0, _react.useRef)(null);
(0, _react.useImperativeHandle)(ref, function () {
return {
focus: function focus() {
return playPauseButtonRef.current && playPauseButtonRef.current.focus();
}
};
});
var _onDestroy = (0, _react.useCallback)(function () {
setPlaying(false);
setShowDuration(true);
}, [setPlaying, setShowDuration]);
var _onEnd = (0, _react.useCallback)(function () {
setShowDuration(true);
setPlaying(false);
onEnd && onEnd();
}, [onEnd, setShowDuration, setPlaying]);
var _onLoad = (0, _react.useCallback)(function () {
if (autoplay) {
setShowDuration(false);
setPlaying(true);
}
onLoad && onLoad();
}, [onLoad, autoplay]);
var _useAudioManager = (0, _AudioManager.useAudioManager)({
src: src,
format: format,
preload: preload,
webAudioAPI: webAudioAPI,
volume: volume,
onLoad: _onLoad,
onLoadError: onLoadError,
onPlay: onPlay,
onSeek: onSeek,
onPause: onPause,
playing: playing,
onDestroy: _onDestroy,
onEnd: _onEnd,
allowSeekLoop: isSliderLocked
}),
loadingState = _useAudioManager.loadingState,
duration = _useAudioManager.duration,
seek = _useAudioManager.seek,
setSeek = _useAudioManager.setSeek;
var isLoaded = loadingState === 'loaded';
var _hoverISO = (0, _react.useMemo)(function () {
if (!isLoaded) {
return (0, _utils.secondsToISO)(0, false, duration);
}
return (0, _utils.secondsToISO)((0, _utils.positionToSeconds)(hoverPosition, duration), true, duration);
}, [isLoaded, hoverPosition, duration]);
// takes the current seek (in seconds) and converts it to slider position.
var _seekPercentage = (0, _react.useMemo)(function () {
if (!isLoaded) {
return 0;
}
return (0, _utils.secondsToPosition)(seek, duration);
}, [isLoaded, seek, duration]);
var _togglePlayPause = (0, _react.useCallback)(function () {
setShowDuration(false);
if (playing) {
setPlaying(false);
} else {
setPlaying(true);
}
}, [playing, setPlaying, setShowDuration]);
var _playPauseButtonContent = (0, _react.useMemo)(function () {
if (loadingState === 'loading') {
return /*#__PURE__*/_react["default"].createElement("span", {
"data-hook": _constants.dataHooks.audioPlayerLoad,
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 134,
columnNumber: 13
}
}, /*#__PURE__*/_react["default"].createElement(_Loader["default"], {
size: "tiny",
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 135,
columnNumber: 15
}
}));
}
return playing ? /*#__PURE__*/_react["default"].createElement(icons.PauseFilled, {
"data-hook": _constants.dataHooks.audioPlayerPause,
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 141,
columnNumber: 11
}
}) : /*#__PURE__*/_react["default"].createElement(icons.PlayFilled, {
"data-hook": _constants.dataHooks.audioPlayerPlay,
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 143,
columnNumber: 11
}
});
}, [loadingState, playing, icons]);
var _setSliderPositions = (0, _react.useCallback)(function (x, width, clickX) {
var positionInPixels = (clickX - x) / width * 100;
var position = Math.min(Math.max(positionInPixels, 0), 100);
setHandleSizeInPercentage(12 / width * 100);
setHoverPosition(position);
}, [setHoverPosition]);
var _handleSliderMouseDown = (0, _react.useCallback)(function (event) {
var clientX = event.clientX,
currentTarget = event.currentTarget;
var _currentTarget$getBou = currentTarget.getBoundingClientRect(),
x = _currentTarget$getBou.x,
width = _currentTarget$getBou.width;
setIsSliderLocked(false);
_setSliderPositions(x, width, clientX);
}, [_setSliderPositions, setIsSliderLocked]);
var _handleSliderMouseMove = (0, _react.useCallback)(function (event) {
var clientX = event.clientX,
currentTarget = event.currentTarget;
var _currentTarget$getBou2 = currentTarget.getBoundingClientRect(),
x = _currentTarget$getBou2.x,
width = _currentTarget$getBou2.width;
_setSliderPositions(x, width, clientX);
}, [_setSliderPositions]);
var _handleSliderMouseUp = (0, _react.useCallback)(function () {
setIsSliderLocked(true);
}, [setIsSliderLocked]);
(0, _react.useEffect)(function () {
window.addEventListener('mouseup', _handleSliderMouseUp);
return function () {
return window.removeEventListener('mouseup', _handleSliderMouseUp);
};
}, [_handleSliderMouseUp]);
// seek audio file to the slider location when dragged.
(0, _react.useEffect)(function () {
if (!isSliderLocked) {
setSeek((0, _utils.positionToSeconds)(hoverPosition, duration));
setShowDuration(false);
}
}, [duration, hoverPosition, isSliderLocked, setSeek]);
return /*#__PURE__*/_react["default"].createElement("div", {
className: (0, _AudioPlayerSt.st)(_AudioPlayerSt.classes.root, className),
"data-hook": dataHook,
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 199,
columnNumber: 9
}
}, /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
ref: playPauseButtonRef,
size: "small",
onClick: _togglePlayPause,
dataHook: _constants.dataHooks.audioPlayerPlayPause,
className: _AudioPlayerSt.classes.playPauseButton,
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 200,
columnNumber: 11
}
}, _playPauseButtonContent), /*#__PURE__*/_react["default"].createElement("div", {
"data-hook": _constants.dataHooks.audioPlayerSlider,
className: _AudioPlayerSt.classes.slider,
style: (0, _defineProperty2["default"])({}, _AudioPlayerSt.vars['audio-player-position'], "".concat(_seekPercentage, "%")),
onMouseDown: _handleSliderMouseDown,
onMouseMove: _handleSliderMouseMove,
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 209,
columnNumber: 11
}
}, /*#__PURE__*/_react["default"].createElement("div", {
className: _AudioPlayerSt.classes.track,
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 218,
columnNumber: 13
}
}), /*#__PURE__*/_react["default"].createElement("div", {
className: _AudioPlayerSt.classes.tooltip,
style: {
left: "".concat(hoverPosition, "%")
},
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 219,
columnNumber: 13
}
}, /*#__PURE__*/_react["default"].createElement(_Tooltip["default"], {
content: "".concat(_hoverISO),
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 223,
columnNumber: 15
}
}, /*#__PURE__*/_react["default"].createElement("div", {
className: _AudioPlayerSt.classes.tooltipTarget,
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 224,
columnNumber: 17
}
}))), /*#__PURE__*/_react["default"].createElement("div", {
"data-hook": _constants.dataHooks.audioPlayerSliderHandle,
className: (0, _AudioPlayerSt.st)(_AudioPlayerSt.classes.handle, {
grow: isLoaded && (!isSliderLocked || Math.abs(_seekPercentage - hoverPosition) < handleSizeInPercentage)
}),
style: {
left: "".concat(_seekPercentage, "%")
},
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 227,
columnNumber: 13
}
})), /*#__PURE__*/_react["default"].createElement(_Heading["default"], {
size: "tiny",
className: _AudioPlayerSt.classes.timer,
dataHook: _constants.dataHooks.audioTimeIndicator,
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 239,
columnNumber: 11
}
}, showDuration ? (0, _utils.secondsToISO)(duration, isLoaded, duration) : (0, _utils.secondsToISO)(seek, isLoaded, duration)));
}));
AudioPlayer.displayName = 'AudioPlayer';
var _default = exports["default"] = AudioPlayer;