wix-style-react
Version:
wix-style-react
340 lines (337 loc) • 12.2 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _AudioPlayerSt = require("./AudioPlayer.st.css");
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 _jsxFileName = "/home/builduser/work/a9c1ac8876d5057c/packages/wix-style-react/dist/cjs/AudioPlayer/AudioPlayer.js";
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)((_ref, ref) => {
var {
dataHook,
className,
src,
format,
preload = 'metadata',
webAudioAPI = false,
onLoad,
onLoadError,
onPlay,
onPause,
onEnd,
onSeek,
autoplay
} = _ref;
var [isSliderLocked, setIsSliderLocked] = (0, _react.useState)(true);
var [hoverPosition, setHoverPosition] = (0, _react.useState)(0);
var [handleSizeInPercentage, setHandleSizeInPercentage] = (0, _react.useState)(0);
var [playing, setPlaying] = (0, _react.useState)(false);
var [showDuration, setShowDuration] = (0, _react.useState)(true);
var playPauseButtonRef = (0, _react.useRef)();
(0, _react.useImperativeHandle)(ref, () => ({
focus: () => playPauseButtonRef.current && playPauseButtonRef.current.focus()
}));
var _onDestroy = (0, _react.useCallback)(() => {
setPlaying(false);
setShowDuration(true);
}, [setPlaying, setShowDuration]);
var _onEnd = (0, _react.useCallback)(() => {
setShowDuration(true);
setPlaying(false);
onEnd && onEnd();
}, [onEnd, setShowDuration, setPlaying]);
var _onLoad = (0, _react.useCallback)(() => {
if (autoplay) {
setShowDuration(false);
setPlaying(true);
}
onLoad && onLoad();
}, [onLoad, autoplay]);
var {
loadingState,
duration,
seek,
setSeek
} = (0, _AudioManager.useAudioManager)({
src,
format,
preload,
webAudioAPI,
onLoad: _onLoad,
onLoadError,
onPlay,
onSeek,
onPause,
playing,
onDestroy: _onDestroy,
onEnd: _onEnd,
allowSeekLoop: isSliderLocked
});
var isLoaded = loadingState === 'loaded';
var _hoverISO = (0, _react.useMemo)(() => {
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)(() => {
if (!isLoaded) {
return 0;
}
return (0, _utils.secondsToPosition)(seek, duration);
}, [isLoaded, seek, duration]);
var _togglePlayPause = (0, _react.useCallback)(() => {
setShowDuration(false);
if (playing) {
setPlaying(false);
} else {
setPlaying(true);
}
}, [playing, setPlaying, setShowDuration]);
var _playPauseButtonContent = (0, _react.useMemo)(() => {
if (loadingState === 'loading') {
return /*#__PURE__*/_react.default.createElement("span", {
"data-hook": _constants.dataHooks.audioPlayerLoad,
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 127,
columnNumber: 13
}
}, /*#__PURE__*/_react.default.createElement(_Loader.default, {
size: "tiny",
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 128,
columnNumber: 15
}
}));
}
return playing ? /*#__PURE__*/_react.default.createElement(_wixUiIconsCommon.PauseFilled, {
"data-hook": _constants.dataHooks.audioPlayerPause,
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 134,
columnNumber: 11
}
}) : /*#__PURE__*/_react.default.createElement(_wixUiIconsCommon.PlayFilled, {
"data-hook": _constants.dataHooks.audioPlayerPlay,
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 136,
columnNumber: 11
}
});
}, [loadingState, playing]);
var _setSliderPositions = (0, _react.useCallback)((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)(event => {
var {
clientX,
currentTarget
} = event;
var {
x,
width
} = currentTarget.getBoundingClientRect();
setIsSliderLocked(false);
_setSliderPositions(x, width, clientX);
}, [_setSliderPositions, setIsSliderLocked]);
var _handleSliderMouseMove = (0, _react.useCallback)(event => {
var {
clientX,
currentTarget
} = event;
var {
x,
width
} = currentTarget.getBoundingClientRect();
_setSliderPositions(x, width, clientX);
}, [_setSliderPositions]);
var _handleSliderMouseUp = (0, _react.useCallback)(() => {
setIsSliderLocked(true);
}, [setIsSliderLocked]);
(0, _react.useEffect)(() => {
window.addEventListener('mouseup', _handleSliderMouseUp);
return () => window.removeEventListener('mouseup', _handleSliderMouseUp);
}, [_handleSliderMouseUp]);
// seek audio file to the slider location when dragged.
(0, _react.useEffect)(() => {
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: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 192,
columnNumber: 9
}
}, /*#__PURE__*/_react.default.createElement(_IconButton.default, {
ref: playPauseButtonRef,
size: "small",
onClick: _togglePlayPause,
dataHook: _constants.dataHooks.audioPlayerPlayPause,
className: _AudioPlayerSt.classes.playPauseButton,
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 193,
columnNumber: 11
}
}, _playPauseButtonContent), /*#__PURE__*/_react.default.createElement("div", {
"data-hook": _constants.dataHooks.audioPlayerSlider,
className: _AudioPlayerSt.classes.slider,
style: {
[_AudioPlayerSt.vars['audio-player-position']]: "".concat(_seekPercentage, "%")
},
onMouseDown: _handleSliderMouseDown,
onMouseMove: _handleSliderMouseMove,
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 202,
columnNumber: 11
}
}, /*#__PURE__*/_react.default.createElement("div", {
className: _AudioPlayerSt.classes.track,
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 211,
columnNumber: 13
}
}), /*#__PURE__*/_react.default.createElement("div", {
className: _AudioPlayerSt.classes.tooltip,
style: {
left: "".concat(hoverPosition, "%")
},
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 212,
columnNumber: 13
}
}, /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
content: "".concat(_hoverISO),
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 216,
columnNumber: 15
}
}, /*#__PURE__*/_react.default.createElement("div", {
className: _AudioPlayerSt.classes.tooltipTarget,
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 217,
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: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 220,
columnNumber: 13
}
})), /*#__PURE__*/_react.default.createElement(_Heading.default, {
size: "tiny",
className: _AudioPlayerSt.classes.timer,
dataHook: _constants.dataHooks.audioTimeIndicator,
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 232,
columnNumber: 11
}
}, showDuration ? (0, _utils.secondsToISO)(duration, isLoaded, duration) : (0, _utils.secondsToISO)(seek, isLoaded, duration)));
}));
AudioPlayer.displayName = 'AudioPlayer';
AudioPlayer.propTypes = {
/** Applies a data-hook HTML attribute that can be used in the tests. */
dataHook: _propTypes.default.string,
/** Specifies a CSS class name to be appended to the component’s root element. */
className: _propTypes.default.string,
/**
* Specifies a link to the source of the track to be loaded for the sound (URL or base64 data URI).
* If a file has no extension, you will need to specify the extension using the format property.
*/
src: _propTypes.default.string.isRequired,
/**
* Specifies a file format in situations where extraction does not work (such as a SoundCloud stream).<br/>
* By default, AudioPlayer detects your file format from the extension.
*/
format: _propTypes.default.string,
/**
* Determines what to download when the component is rendered: full file, its metadata or nothing at all.
* When webAudioAPI = true you can only set it to either 'auto' or 'none'.
* When webAudioAPI = false you can set it to 'auto', 'metadata' or 'none'.
*/
preload: _propTypes.default.oneOf(['auto', 'metadata', 'none']),
/**
* Start playback automatically when audio is loaded.
*/
autoplay: _propTypes.default.bool,
/**
* Specifies whether to force web audio API. Use it for relatively small audio files only because you have to wait for the full file
* to be downloaded and decoded before playing. Web Audio API allows advanced capabilities as described in
* [Web Audio API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API).
*/
webAudioAPI: _propTypes.default.bool,
/**
* Defines a callback function which is called when audio is loaded.
*/
onLoad: _propTypes.default.func,
/**
* Defines a callback function which is called every time audio fails to load.
*/
onLoadError: _propTypes.default.func,
/**
* Defines a callback function which is called when audio is played.
*/
onPlay: _propTypes.default.func,
/**
* Defines a callback function which is called when audio is paused.
*/
onPause: _propTypes.default.func,
/**
Will be called when audio is ended.
*/
onEnd: _propTypes.default.func,
/**
* Defines a callback function which is called when audio is seeked explicitly (i.e. when user drags the slider).
*/
onSeek: _propTypes.default.func
};
var _default = exports.default = AudioPlayer;
//# sourceMappingURL=AudioPlayer.js.map