react-common-use-components
Version:
A React mobile commonly used component library
156 lines (152 loc) • 8.37 kB
JavaScript
;
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const react_1 = __importStar(require("react"));
const ProgressBar_1 = __importDefault(require("../ProgressBar/ProgressBar"));
const PauseIcon_1 = __importDefault(require("../../assets/svgs/PauseIcon"));
const AudioPlayIcon_1 = __importDefault(require("../../assets/svgs/AudioPlayIcon"));
const FlexBox_1 = __importDefault(require("../FlexBox/FlexBox"));
const FastBackwardIcon_1 = __importDefault(require("../../assets/svgs/FastBackwardIcon"));
const FastForwardIcon_1 = __importDefault(require("../../assets/svgs/FastForwardIcon"));
const MuteIcon_1 = __importDefault(require("../../assets/svgs/MuteIcon"));
const VoiceIcon_1 = __importDefault(require("../../assets/svgs/VoiceIcon"));
const MuteCancelIcon_1 = __importDefault(require("../../assets/svgs/MuteCancelIcon"));
const AudioPlayer = ({ url, playIcon, pauseIcon, forwardIcon, progressBarConfig, backwardIcon, timeTextStyle }) => {
const [played, setPlayed] = (0, react_1.useState)(false);
const audioRef = (0, react_1.useRef)(null);
const [currentTime, setCurrentTime] = (0, react_1.useState)(0);
const [duration, setDuration] = (0, react_1.useState)(0);
const [isMuted, setIsMuted] = (0, react_1.useState)(false);
const [volume, setVolume] = (0, react_1.useState)(50);
const [showVolume, setShowVolume] = (0, react_1.useState)(false);
(0, react_1.useEffect)(() => {
var _a, _b;
if (played) {
(_a = audioRef.current) === null || _a === void 0 ? void 0 : _a.play().catch((err) => {
console.log("播放失败");
});
}
else {
(_b = audioRef.current) === null || _b === void 0 ? void 0 : _b.pause();
}
}, [played]);
(0, react_1.useEffect)(() => {
if (audioRef.current) {
audioRef.current.addEventListener("canplay", () => {
var _a;
console.log("音频可以开始播放");
setDuration(((_a = audioRef.current) === null || _a === void 0 ? void 0 : _a.duration) || 0);
});
return () => {
// 清理事件监听器
audioRef.current.removeEventListener("canplay", () => { });
};
}
}, []);
(0, react_1.useEffect)(() => {
if (audioRef.current) {
audioRef.current.muted = isMuted;
}
}, [isMuted]);
const totalTime = (0, react_1.useMemo)(() => {
const second = Math.floor(duration);
const remainder = Math.round(second % 60);
const minute = Math.round((second - remainder) / 60);
const remainder2 = remainder < 10 ? "0" + remainder.toString() : remainder;
return minute + ":" + remainder2;
}, [duration]);
const percent = (0, react_1.useMemo)(() => {
return duration !== 0 ? Math.round((currentTime / duration) * 100) : 0;
}, [currentTime, duration]);
const _currentTime = (0, react_1.useMemo)(() => {
const second = Math.floor(currentTime);
const remainder = Math.round(second % 60);
const minute = Math.round((second - remainder) / 60);
const remainder2 = remainder < 10 ? "0" + remainder.toString() : remainder;
return minute + ":" + remainder2;
}, [currentTime]);
//后退
const backward = () => {
setPlayed(true);
if (audioRef.current) {
audioRef.current.currentTime = Math.max(0, audioRef.current.currentTime - 2);
}
};
//快进
const forward = () => {
setPlayed(true);
if (audioRef.current) {
audioRef.current.currentTime = Math.min(audioRef.current.duration, audioRef.current.currentTime + 2);
}
};
console.log(isMuted);
return (<div style={{ width: "100%", backgroundColor: "rgba(255,255,255,0.5)" }}>
<audio ref={audioRef} src={url} onTimeUpdate={() => {
setCurrentTime(audioRef.current.currentTime);
}} onEnded={() => setPlayed(false)}/>
<FlexBox_1.default style={{ width: "100%" }}>
{played ?
<FlexBox_1.default onClick={() => setPlayed(false)}>
{pauseIcon ? pauseIcon : <PauseIcon_1.default style={{ width: "2rem", height: "2rem" }}/>}
</FlexBox_1.default>
:
<FlexBox_1.default onClick={() => setPlayed(true)}>
{playIcon ? pauseIcon : <AudioPlayIcon_1.default style={{ width: "2rem", height: "2rem" }}/>}
</FlexBox_1.default>}
<FlexBox_1.default onClick={backward}>
{backwardIcon ? backwardIcon : <FastBackwardIcon_1.default style={{ width: "2rem", height: "2rem" }}/>}
</FlexBox_1.default>
<ProgressBar_1.default onChange={(percent) => {
setPlayed(true);
const newTime = Math.floor((percent / 100) * duration);
if (audioRef.current) {
setCurrentTime(newTime);
audioRef.current.currentTime = newTime;
}
}} trackBgColor={progressBarConfig === null || progressBarConfig === void 0 ? void 0 : progressBarConfig.trackBgColor} barBgColor={progressBarConfig === null || progressBarConfig === void 0 ? void 0 : progressBarConfig.barBgColor} barWidth={(progressBarConfig === null || progressBarConfig === void 0 ? void 0 : progressBarConfig.barWidth) || "6rem"} barHeight={progressBarConfig === null || progressBarConfig === void 0 ? void 0 : progressBarConfig.barHeight} percent={percent}/>
<FlexBox_1.default style={{ marginLeft: "0.5rem" }} onClick={forward}>
{forwardIcon ? forwardIcon : <FastForwardIcon_1.default style={{ width: "2rem", height: "2rem" }}/>}
</FlexBox_1.default>
<div style={{ position: "relative" }}>
<FlexBox_1.default style={{ margin: "0.25rem" }}>
{isMuted ? <MuteIcon_1.default onClick={() => { setIsMuted(false); }} style={{ width: "2rem", height: "2rem", margin: "0.25rem" }}/> :
<MuteCancelIcon_1.default onClick={() => { setIsMuted(true); }} style={{ width: "2rem", height: "2rem", margin: "0.25rem" }}/>}
<VoiceIcon_1.default onClick={() => { setShowVolume(!showVolume); }} style={{ width: "2rem", height: "2rem", marginLeft: "0.5rem" }}/>
</FlexBox_1.default>
{showVolume && <FlexBox_1.default style={{ position: "absolute", top: "-1.5rem", left: "-1rem" }}>
<div style={{ color: "#FFFFFF", fontSize: "1rem", marginRight: "0.5rem" }}>{volume}</div>
<ProgressBar_1.default onChange={(volume) => {
setVolume(volume);
}} barWidth={"5rem"} barHeight={"0.5rem"} percent={volume}/>
</FlexBox_1.default>}
</div>
<div style={Object.assign({ color: "#B3B3B3" }, timeTextStyle)}>{totalTime ? _currentTime + '/' + totalTime : ''}</div>
</FlexBox_1.default>
</div>);
};
exports.default = AudioPlayer;