@nutui/nutui-react
Version:
京东风格的轻量级移动端 React 组件库，支持一套代码生成 H5 和小程序
255 lines (254 loc) • 10.9 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "Audio", {
enumerable: true,
get: function() {
return Audio;
}
});
var _interop_require_default = require("@swc/helpers/_/_interop_require_default");
var _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
var _object_spread = require("@swc/helpers/_/_object_spread");
var _object_spread_props = require("@swc/helpers/_/_object_spread_props");
var _object_without_properties = require("@swc/helpers/_/_object_without_properties");
var _sliced_to_array = require("@swc/helpers/_/_sliced_to_array");
var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
var _iconsreact = require("@nutui/icons-react");
var _classnames = /*#__PURE__*/ _interop_require_default._(require("classnames"));
var _range = /*#__PURE__*/ _interop_require_default._(require("../range"));
var _button = /*#__PURE__*/ _interop_require_default._(require("../button"));
var _configprovider = require("../configprovider");
var _typings = require("../../utils/typings");
var defaultProps = (0, _object_spread_props._)((0, _object_spread._)({}, _typings.ComponentDefaults), {
src: '',
muted: false,
autoPlay: false,
loop: false,
preload: 'auto',
type: 'progress',
onBack: function onBack(e) {},
onForward: function onForward(e) {},
onPause: function onPause(e) {},
onEnd: function onEnd(e) {},
onMute: function onMute(e) {},
onCanPlay: function onCanPlay(e) {}
});
var Audio = function Audio(props) {
var watch = function watch() {
if (AudioRef && AudioRef.current) {
var current = AudioRef.current;
current.addEventListener('play', function() {
setPlaying(true);
});
}
};
var locale = (0, _configprovider.useConfig)().locale;
var _ref = (0, _object_spread._)({}, defaultProps, props), className = _ref.className, src = _ref.src, style = _ref.style, muted = _ref.muted, autoPlay = _ref.autoPlay, loop = _ref.loop, preload = _ref.preload, type = _ref.type, onBack = _ref.onBack, onForward = _ref.onForward, onPause = _ref.onPause, onEnd = _ref.onEnd, onMute = _ref.onMute, onCanPlay = _ref.onCanPlay, children = _ref.children, rest = (0, _object_without_properties._)(_ref, [
"className",
"src",
"style",
"muted",
"autoPlay",
"loop",
"preload",
"type",
"onBack",
"onForward",
"onPause",
"onEnd",
"onMute",
"onCanPlay",
"children"
]);
var _useState = (0, _sliced_to_array._)((0, _react.useState)(false), 2), playing = _useState[0], setPlaying = _useState[1];
var _useState1 = (0, _sliced_to_array._)((0, _react.useState)(0), 2), percent = _useState1[0], setPercent = _useState1[1];
var _useState2 = (0, _sliced_to_array._)((0, _react.useState)(false), 2), isCanPlay = _useState2[0], setIsCanPlay = _useState2[1];
var _useState3 = (0, _sliced_to_array._)((0, _react.useState)('00:00:00'), 2), currentDuration = _useState3[0], setCurrentDuration = _useState3[1];
var AudioRef = (0, _react.useRef)(null);
var statusRef = (0, _react.useRef)({
currentTime: 0,
currentDuration: '00:00:00',
percent: 0,
duration: '00:00:00',
second: 0,
hanMuted: muted,
playing: autoPlay,
handPlaying: false
});
var classPrefix = 'nut-audio';
var handleEnded = function handleEnded(e) {
if (loop) {
console.warn(locale.audio.tips || 'onPlayEnd事件在loop=false时才会触发');
} else {
onEnd === null || onEnd === void 0 ? void 0 : onEnd(e);
}
};
(0, _react.useEffect)(function() {
watch();
}, []);
(0, _react.useEffect)(function() {}, [
currentDuration
]);
var handleStatusChange = function handleStatusChange() {
setPlaying(!playing);
if (playing) {
AudioRef && AudioRef.current && AudioRef.current.pause();
} else {
AudioRef && AudioRef.current && AudioRef.current.play();
}
};
var renderIcon = function renderIcon() {
return /*#__PURE__*/ _react.default.createElement("div", {
className: "".concat(classPrefix, "-icon")
}, /*#__PURE__*/ _react.default.createElement("div", {
className: (0, _classnames.default)("".concat(classPrefix, "-icon-box"), playing ? "".concat(classPrefix, "-icon-play") : "".concat(classPrefix, "-icon-stop")),
onClick: handleStatusChange
}, /*#__PURE__*/ _react.default.createElement(_iconsreact.Service, {
className: playing ? 'nut-icon-loading' : ''
})));
};
var handleBack = function handleBack() {
if (statusRef.current.currentTime > 0 && AudioRef.current) {
statusRef.current.currentTime--;
AudioRef.current.currentTime = statusRef.current.currentTime;
onBack === null || onBack === void 0 ? void 0 : onBack(AudioRef.current);
}
};
var handleForward = function handleForward() {
if (AudioRef.current) {
statusRef.current.currentTime++;
AudioRef.current.currentTime = statusRef.current.currentTime;
onForward === null || onForward === void 0 ? void 0 : onForward(AudioRef.current);
}
};
var handleMute = function handleMute() {
if (AudioRef.current) {
AudioRef.current.muted = !AudioRef.current.muted;
onMute === null || onMute === void 0 ? void 0 : onMute(AudioRef.current);
}
};
var handlePause = function handlePause(e) {
setPlaying(false);
onPause === null || onPause === void 0 ? void 0 : onPause(e);
};
var formatSeconds = function formatSeconds(value) {
if (!value) {
return '00:00:00';
}
var time = parseInt(value);
var hours = Math.floor(time / 3600);
var minutes = Math.floor((time - hours * 3600) / 60);
var seconds = time - hours * 3600 - minutes * 60;
var result = '';
result += "".concat("0".concat(hours.toString()).slice(-2), ":");
result += "".concat("0".concat(minutes.toString()).slice(-2), ":");
result += "0".concat(seconds.toString()).slice(-2);
return result;
};
var renderProgerss = function renderProgerss() {
return /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/ _react.default.createElement("div", {
className: "".concat(classPrefix, "-progress")
}, /*#__PURE__*/ _react.default.createElement("div", {
className: "time"
}, currentDuration), /*#__PURE__*/ _react.default.createElement("div", {
className: "".concat(classPrefix, "-progress-bar-wrapper")
}, /*#__PURE__*/ _react.default.createElement(_range.default, {
value: percent,
onChange: function onChange(val) {
return setPercent(val);
},
currentDescription: null,
maxDescription: null,
minDescription: null,
"inactive-color": "#cccccc",
"active-color": "#FF0F23"
})), /*#__PURE__*/ _react.default.createElement("div", {
className: "time"
}, AudioRef.current ? formatSeconds("".concat(statusRef.current.second)) : '00:00:00')), /*#__PURE__*/ _react.default.createElement("div", {
className: isCanPlay ? 'custom-button-group' : 'custom-button-group-disable'
}, /*#__PURE__*/ _react.default.createElement(_button.default, {
type: "primary",
size: "small",
className: "back",
onClick: handleBack
}, locale.audio.back || '快退'), /*#__PURE__*/ _react.default.createElement(_button.default, {
type: "primary",
size: "small",
className: "start",
onClick: handleStatusChange
}, playing ? "".concat(locale.audio.pause || '暂停') : "".concat(locale.audio.start || '开始')), /*#__PURE__*/ _react.default.createElement(_button.default, {
type: "primary",
size: "small",
onClick: handleForward
}, locale.audio.forward || '快进'), /*#__PURE__*/ _react.default.createElement(_button.default, {
type: AudioRef.current && AudioRef.current.muted ? 'default' : 'primary',
size: "small",
onClick: handleMute
}, locale.audio.mute || '静音')));
};
var renderNone = function renderNone() {
return /*#__PURE__*/ _react.default.createElement("div", {
className: "".concat(classPrefix, "-none-container"),
onClick: handleStatusChange
}, children);
};
var renderAudio = function renderAudio() {
switch(type){
case 'icon':
return renderIcon();
case 'progress':
return renderProgerss();
case 'none':
return renderNone();
default:
return null;
}
};
var handleCanplay = function handleCanplay(e) {
setIsCanPlay(true);
if (autoPlay && !playing) {
AudioRef && AudioRef.current && AudioRef.current.play();
}
if (AudioRef.current) {
statusRef.current.second = AudioRef.current.duration || 0;
onCanPlay === null || onCanPlay === void 0 ? void 0 : onCanPlay(e);
}
};
var onTimeupdate = function onTimeupdate(e) {
var time = parseInt(String(e.target.currentTime));
var formated = formatSeconds("".concat(time));
statusRef.current.currentDuration = formated;
setPercent(time / statusRef.current.second * 100);
setCurrentDuration(formated);
statusRef.current.currentTime = time;
};
return /*#__PURE__*/ _react.default.createElement("div", (0, _object_spread._)({
className: (0, _classnames.default)(classPrefix, className),
style: style
}, rest), renderAudio(), /*#__PURE__*/ _react.default.createElement("audio", {
className: "audioMain",
controls: type === 'controls',
ref: AudioRef,
src: src,
muted: muted,
preload: preload,
loop: loop,
onPause: function onPause(e) {
return handlePause(e);
},
onEnded: function onEnded(e) {
return handleEnded(e);
},
onCanPlay: function onCanPlay(e) {
return handleCanplay(e);
},
onTimeUpdate: function onTimeUpdate(e) {
return onTimeupdate(e);
}
}, /*#__PURE__*/ _react.default.createElement("track", {
kind: "captions"
})));
};
Audio.displayName = 'NutAudio';