react-common-use-components
Version:
A React mobile commonly used component library
241 lines (240 loc) • 14.9 kB
JavaScript
"use strict";
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
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 });
var react_1 = __importStar(require("react"));
var ProgressBar_1 = __importDefault(require("../ProgressBar/ProgressBar"));
var PauseIcon_1 = __importDefault(require("../../assets/svgs/PauseIcon"));
var AudioPlayIcon_1 = __importDefault(require("../../assets/svgs/AudioPlayIcon"));
var FlexBox_1 = __importDefault(require("../FlexBox/FlexBox"));
var FastBackwardIcon_1 = __importDefault(require("../../assets/svgs/FastBackwardIcon"));
var FastForwardIcon_1 = __importDefault(require("../../assets/svgs/FastForwardIcon"));
var VoiceIcon_1 = __importDefault(require("../../assets/svgs/VoiceIcon"));
var MuteIcon_1 = __importDefault(require("../../assets/svgs/MuteIcon"));
var FullScreenIcon_1 = __importDefault(require("../../assets/svgs/FullScreenIcon"));
var CancelFullScreenIcon_1 = __importDefault(require("../../assets/svgs/CancelFullScreenIcon"));
var LoadingIcon_1 = __importDefault(require("../../assets/svgs/LoadingIcon"));
var MuteCancelIcon_1 = __importDefault(require("../../assets/svgs/MuteCancelIcon"));
var VideoPlayer = function (_a) {
var url = _a.url, width = _a.width, height = _a.height, playIcon = _a.playIcon, pauseIcon = _a.pauseIcon, forwardIcon = _a.forwardIcon, progressBarConfig = _a.progressBarConfig, backwardIcon = _a.backwardIcon, timeTextStyle = _a.timeTextStyle;
var _b = (0, react_1.useState)(false), played = _b[0], setPlayed = _b[1];
var videoRef = (0, react_1.useRef)(null);
var _c = (0, react_1.useState)(0), currentTime = _c[0], setCurrentTime = _c[1];
var _d = (0, react_1.useState)(0), duration = _d[0], setDuration = _d[1];
var _e = (0, react_1.useState)(false), closeMenu = _e[0], setCloseMenu = _e[1];
var _f = (0, react_1.useState)(0), lastTap = _f[0], setLastTap = _f[1];
var _g = (0, react_1.useState)(false), isMuted = _g[0], setIsMuted = _g[1];
var _h = (0, react_1.useState)(false), isFullScreen = _h[0], setIsFullScreen = _h[1];
var _j = (0, react_1.useState)(1), playSpeed = _j[0], setPlaySpeed = _j[1];
var _k = (0, react_1.useState)(false), showSpeedMenu = _k[0], setShowSpeedMenu = _k[1];
var _l = (0, react_1.useState)(false), loading = _l[0], setLoading = _l[1];
var _m = (0, react_1.useState)(false), playErr = _m[0], setPlayErr = _m[1];
var _o = (0, react_1.useState)(50), volume = _o[0], setVolume = _o[1];
var _p = (0, react_1.useState)(false), showVolume = _p[0], setShowVolume = _p[1];
(0, react_1.useEffect)(function () {
var _a, _b;
if (played) {
(_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.play().then(function () {
setTimeout(function () {
setShowVolume(false);
setShowSpeedMenu(false);
setCloseMenu(true);
}, 3000);
}).catch(function (err) {
setPlayErr(true);
console.log("播放失败");
});
}
else {
(_b = videoRef.current) === null || _b === void 0 ? void 0 : _b.pause();
}
}, [played]);
(0, react_1.useEffect)(function () {
if (videoRef.current) {
videoRef.current.addEventListener("canplay", function () {
var _a;
console.log("音频可以开始播放");
setDuration(((_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.duration) || 0);
});
return function () {
// 清理事件监听器
videoRef.current.removeEventListener("canplay", function () { });
};
}
}, []);
(0, react_1.useEffect)(function () {
if (videoRef.current) {
videoRef.current.muted = isMuted;
}
}, [isMuted]);
(0, react_1.useEffect)(function () {
if (videoRef.current) {
videoRef.current.playbackRate = playSpeed;
}
}, [playSpeed]);
(0, react_1.useEffect)(function () {
if (videoRef.current) {
if (volume === 0) {
return setIsMuted(true);
}
setIsMuted(false);
videoRef.current.volume = volume / 100;
}
}, [volume]);
(0, react_1.useEffect)(function () {
if (loading) {
rotateSmoothly();
}
}, [loading]);
var totalTime = (0, react_1.useMemo)(function () {
var second = Math.floor(duration);
var remainder = Math.round(second % 60);
var minute = Math.round((second - remainder) / 60);
var remainder2 = remainder < 10 ? "0" + remainder.toString() : remainder;
return minute + ":" + remainder2;
}, [duration]);
var percent = (0, react_1.useMemo)(function () {
return duration !== 0 ? Math.round((currentTime / duration) * 100) : 0;
}, [currentTime, duration]);
var _currentTime = (0, react_1.useMemo)(function () {
var second = Math.floor(currentTime);
var remainder = Math.round(second % 60);
var minute = Math.round((second - remainder) / 60);
var remainder2 = remainder < 10 ? "0" + remainder.toString() : remainder;
return minute + ":" + remainder2;
}, [currentTime]);
//后退
var backward = function () {
setPlayed(true);
if (videoRef.current) {
videoRef.current.currentTime = Math.max(0, videoRef.current.currentTime - 2);
}
};
//快进
var forward = function () {
setPlayed(true);
if (videoRef.current) {
videoRef.current.currentTime = Math.min(videoRef.current.duration, videoRef.current.currentTime + 2);
}
};
var handleTouchEnd = function (e) {
var currentTime = Date.now();
var tapLength = currentTime - lastTap;
if (tapLength < 300 && tapLength > 0) {
setPlayed(!played);
setCloseMenu(true);
}
setLastTap(currentTime);
e.stopPropagation();
};
// 当视频开始加载时，显示 loading 动画
var handleLoadStart = function () {
setLoading(true);
};
// 当视频加载完成时，取消 loading 动画
var handleLoadedData = function () {
setLoading(false);
};
// 处理视频播放中的卡顿，可以使用 onwaiting 事件
var handleWaiting = function () {
setLoading(true);
};
// 视频播放完成后取消 loading 动画
var handlePlaying = function () {
setLoading(false);
};
function rotateSmoothly() {
var loading_icon = document.getElementById('loading_icon');
var rotation = 0;
function animate() {
rotation = (rotation + 6) % 360;
if (loading_icon) {
loading_icon.style.transform = "rotate(".concat(rotation, "deg)");
window.requestAnimationFrame(animate);
}
}
animate();
}
var speeds = [0.5, 1, 1.5, 2];
return (react_1.default.createElement("div", { style: { background: "#000000", width: isFullScreen ? "100vw" : (width || "100%"), height: isFullScreen ? "100vh" : (height || "100%"), maxWidth: "100vw", maxHeight: "100vh", position: isFullScreen ? "fixed" : "relative", inset: isFullScreen ? 0 : "" } },
loading && react_1.default.createElement(LoadingIcon_1.default, { id: 'loading_icon', style: { width: "2rem", height: "2rem", position: "absolute", top: "50%", left: "50%", marginTop: "-1rem", marginLeft: "-1rem" } }),
playErr && react_1.default.createElement("div", { style: { width: "5rem", height: "2rem", position: "absolute", top: "50%", left: "50%", color: "#FFFFFF", fontSize: "1rem", marginTop: "-1rem", marginLeft: "-2.5rem" } }, "Play failed"),
react_1.default.createElement("video", { onTouchEnd: handleTouchEnd, onClick: function (e) {
setCloseMenu(!closeMenu);
setShowSpeedMenu(false);
setShowVolume(false);
e.stopPropagation();
}, onLoadStart: handleLoadStart, onLoadedData: handleLoadedData, onWaiting: handleWaiting, onPlaying: handlePlaying, style: { width: isFullScreen ? "100vw" : (width || "100%"), height: isFullScreen ? "100vh" : (height || "100%"), maxWidth: "100vw", maxHeight: "100vh" }, ref: videoRef, src: url, onTimeUpdate: function () {
setCurrentTime(videoRef.current.currentTime);
}, onEnded: function () { return setPlayed(false); } }),
react_1.default.createElement(FlexBox_1.default, { style: { position: "absolute", zIndex: 3, bottom: "0rem", width: isFullScreen ? "100vw" : (width || "100%"), opacity: closeMenu ? 0 : 1, background: "rgba(255,255,255,0.5)" } },
played ?
react_1.default.createElement(FlexBox_1.default, { onClick: function () { return setPlayed(false); } }, pauseIcon ? pauseIcon : react_1.default.createElement(PauseIcon_1.default, { style: { width: "2rem", height: "2rem" } }))
:
react_1.default.createElement(FlexBox_1.default, { onClick: function () { return setPlayed(true); } }, playIcon ? pauseIcon : react_1.default.createElement(AudioPlayIcon_1.default, { style: { width: "2rem", height: "2rem" } })),
react_1.default.createElement(FlexBox_1.default, { style: { marginRight: "0.5rem" }, onClick: backward }, backwardIcon ? backwardIcon : react_1.default.createElement(FastBackwardIcon_1.default, { style: { width: "2rem", height: "2rem" } })),
react_1.default.createElement(ProgressBar_1.default, { onChange: function (percent) {
setPlayed(true);
var newTime = Math.floor((percent / 100) * duration);
if (videoRef.current) {
setCurrentTime(newTime);
videoRef.current.currentTime = newTime;
}
}, trackBgColor: progressBarConfig === null || progressBarConfig === void 0 ? void 0 : progressBarConfig.trackBgColor, barBgColor: progressBarConfig === null || progressBarConfig === void 0 ? void 0 : progressBarConfig.barBgColor, barWidth: "50%", barHeight: progressBarConfig === null || progressBarConfig === void 0 ? void 0 : progressBarConfig.barHeight, percent: percent }),
react_1.default.createElement(FlexBox_1.default, { style: { marginLeft: "0.5rem" }, onClick: forward }, forwardIcon ? forwardIcon : react_1.default.createElement(FastForwardIcon_1.default, { style: { width: "2rem", height: "2rem" } })),
react_1.default.createElement("div", { style: __assign({ marginLeft: "0.25rem", color: "#FFFFFF" }, timeTextStyle) }, totalTime ? _currentTime + '/' + totalTime : ''),
react_1.default.createElement("div", { onClick: function (e) { setShowSpeedMenu(!showSpeedMenu); e.stopPropagation(); }, style: { width: "2rem", fontSize: "0.875rem", color: "#1677ff", position: "relative", padding: "0.25rem" } },
playSpeed,
"x",
showSpeedMenu && react_1.default.createElement("div", { style: { position: 'absolute', width: "4rem", top: "-6.75rem", left: "-1.25rem", borderRadius: "0.5rem", background: "#FFFFFF" } }, speeds.map(function (item, index) {
return (react_1.default.createElement("div", { onClick: function (e) { setPlaySpeed(item); setShowSpeedMenu(false); e.stopPropagation(); }, style: { margin: "0.25rem 0", borderRadius: "0.5rem", background: playSpeed === item ? "#1677ff" : "#FFFFFF", color: playSpeed !== item ? "#1677ff" : "#FFFFFF" }, key: index }, item));
}))),
react_1.default.createElement("div", { style: { position: "relative" } },
react_1.default.createElement(FlexBox_1.default, { style: { margin: "0.25rem" } },
isMuted ? react_1.default.createElement(MuteIcon_1.default, { onClick: function () { setIsMuted(false); }, style: { width: "2rem", height: "2rem", margin: "0.25rem" } }) :
react_1.default.createElement(MuteCancelIcon_1.default, { onClick: function () { setIsMuted(true); }, style: { width: "2rem", height: "2rem", margin: "0.25rem" } }),
react_1.default.createElement(VoiceIcon_1.default, { onClick: function () { setShowVolume(!showVolume); }, style: { width: "2rem", height: "2rem", marginLeft: "0.5rem" } })),
showVolume && react_1.default.createElement(FlexBox_1.default, { style: { position: "absolute", top: "-1.5rem", left: "-1rem" } },
react_1.default.createElement("div", { style: { color: "#FFFFFF", fontSize: "1rem", marginRight: "0.5rem" } }, volume),
react_1.default.createElement(ProgressBar_1.default, { onChange: function (volume) {
setVolume(volume);
}, barWidth: "5rem", barHeight: "0.5rem", percent: volume }))),
!isFullScreen ? react_1.default.createElement(FullScreenIcon_1.default, { onClick: function () { setIsFullScreen(true); }, style: { width: "2rem", height: "2rem", marginLeft: "0.5rem" } }) :
react_1.default.createElement(CancelFullScreenIcon_1.default, { onClick: function () { setIsFullScreen(false); }, style: { width: "2rem", height: "2rem", marginLeft: "0.5rem" } }))));
};
exports.default = VideoPlayer;