296 lines
11 KiB
JavaScript
296 lines
11 KiB
JavaScript
import React, { useEffect, useState, useRef } from "react";
|
|
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
|
import { faPlay, faPause } from "@fortawesome/free-solid-svg-icons";
|
|
import { Toast } from "antd-mobile";
|
|
import BackgroundPlayer from "next-video/background-player";
|
|
import { toggleFullScreen } from "@/utils/tools/handleFuns";
|
|
import Slider from "rc-slider";
|
|
import "rc-slider/assets/index.css";
|
|
export default function VideoPlayer({ video }) {
|
|
const [videoState, setVideoState] = useState({
|
|
play: true,
|
|
currentTimePercentage: 0,
|
|
});
|
|
const [showController, setShowController] = useState(false);
|
|
const [screenState, setScreenState] = useState(false);
|
|
const isSliding = useRef(null);
|
|
const userAgent = navigator.userAgent;
|
|
// const currentTime = useMemo(()=>{
|
|
// const videoPlayer = document.getElementById("videoPlayer");
|
|
// if (videoPlayer) {
|
|
// return videoPlayer.currentTime;
|
|
// }
|
|
// return 0;
|
|
// })
|
|
useEffect(() => {
|
|
window.onresize = function () {
|
|
if (document.fullscreenElement) {
|
|
console.log("进入全屏");
|
|
} else {
|
|
console.log("退出全屏");
|
|
const video = document.getElementById("videoContainer");
|
|
const controller = document.getElementById("controllerContainer");
|
|
if (!video || !controller) return;
|
|
video.firstChild.style.transform = "none";
|
|
video.firstChild.style.width = "auto";
|
|
video.firstChild.style.height = "auto";
|
|
video.firstChild.style.transformOrigin = "";
|
|
controller.style.width = "100%";
|
|
controller.style.height = "100%";
|
|
controller.firstChild.style.marginLeft = "0";
|
|
setScreenState(false);
|
|
}
|
|
};
|
|
|
|
const videoPlayer = document.getElementById("videoPlayer");
|
|
const openVolum = () => {
|
|
videoPlayer.muted = false;
|
|
};
|
|
const pauseVideo = () => {
|
|
setVideoState((old) => ({ ...old, play: false }));
|
|
};
|
|
const updateTime = () => {
|
|
// console.log((videoPlayer.currentTime / videoPlayer.duration) * 100);
|
|
if (!isSliding.current)
|
|
setVideoState((old) => ({
|
|
...old,
|
|
currentTimePercentage:
|
|
(videoPlayer.currentTime / videoPlayer.duration) * 100,
|
|
}));
|
|
};
|
|
if (videoPlayer) {
|
|
videoPlayer.addEventListener("loadedmetadata", openVolum);
|
|
videoPlayer.addEventListener("ended", pauseVideo);
|
|
videoPlayer.addEventListener("timeupdate", updateTime);
|
|
}
|
|
return () => {
|
|
if (videoPlayer) {
|
|
videoPlayer.removeEventListener("loadedmetadata", openVolum);
|
|
videoPlayer.removeEventListener("ended", pauseVideo);
|
|
videoPlayer.removeEventListener("timeupdate", updateTime);
|
|
}
|
|
};
|
|
}, []);
|
|
|
|
const getCurrentTime = (value) => {
|
|
const videoPlayer = document.getElementById("videoPlayer");
|
|
if (!videoPlayer) null;
|
|
const totalTime = videoPlayer?.duration;
|
|
let timeSec = 0;
|
|
timeSec = (totalTime * (100 - value)) / 100;
|
|
const hour = Math.floor(timeSec / (60 * 60));
|
|
const minute = Math.floor((timeSec - hour * (60 * 60)) / 60);
|
|
const second = Math.floor(timeSec - hour * (60 * 60) - minute * 60);
|
|
return {
|
|
desc: `${hour > 9 ? hour : "0" + hour}:${
|
|
minute > 9 ? minute : "0" + minute
|
|
}:${second > 9 ? second : "0" + second}`,
|
|
timeSec: (totalTime * value) / 100,
|
|
};
|
|
};
|
|
const toastValue = (value) => {
|
|
isSliding.current = true;
|
|
const videoPlayer = document.getElementById("videoPlayer");
|
|
if (!videoPlayer) return;
|
|
videoPlayer.pause();
|
|
|
|
const currentTimeStr = getCurrentTime(value);
|
|
console.log("currentTimeStr-----", currentTimeStr.desc);
|
|
// if (!currentTimeStr) return;
|
|
Toast.show({
|
|
content: currentTimeStr.desc,
|
|
position: "top",
|
|
maskStyle: { "--z-index": 999999 },
|
|
});
|
|
videoPlayer.currentTime = currentTimeStr.timeSec;
|
|
// console.log("currentTimeStr", currentTimeStr);
|
|
setVideoState((old) => ({ play: false, currentTimePercentage: value }));
|
|
};
|
|
const handleStart = () => {
|
|
const videoPlayer = document.getElementById("videoPlayer");
|
|
if (!videoPlayer) return;
|
|
videoPlayer.play();
|
|
isSliding.current = false;
|
|
setVideoState((old) => ({ ...old, play: true }));
|
|
};
|
|
return (
|
|
<div className="relative bg-black" id="videoContainer">
|
|
<div
|
|
style={{ maxHeight: "90vh" }}
|
|
className="overflow-hidden"
|
|
onClick={() => setShowController((old) => !old)}
|
|
>
|
|
<BackgroundPlayer
|
|
src={video.mp4}
|
|
id="videoPlayer"
|
|
// controlsList="none"
|
|
poster={video?.url.src}
|
|
blurDataURL={video?.url.blurDataURL}
|
|
autoPlay={videoState.play}
|
|
// style={{ height: "calc(100vh)" }}
|
|
/>
|
|
</div>
|
|
<div
|
|
className={`pointer-events-none absolute h-full p-4 bottom-0 right-0 flex ${
|
|
screenState && video.w > video.h
|
|
? "flex-col-reverse items-start justify-evenly"
|
|
: "w-full flex-row-reverse justify-between items-end gap-4 py-10"
|
|
}`}
|
|
style={{
|
|
display: showController ? "flex" : "none",
|
|
}}
|
|
id="controllerContainer"
|
|
>
|
|
{/* <Slider
|
|
value={videoState.currentTimePercentage}
|
|
onAfterChange={handleStart}
|
|
onChange={toastValue}
|
|
icon={<div></div>}
|
|
style={{ "--fill-color": "#ff669e" }}
|
|
/> */}
|
|
<div
|
|
className={`pointer-events-auto flex items-center justify-center h-full px-4 ${
|
|
!screenState ? "max-h-[60vh]" : "max-h-[80vh]"
|
|
}`}
|
|
>
|
|
<Slider
|
|
styles={{
|
|
rail: {
|
|
background: `#ff669e40`,
|
|
width: 8,
|
|
},
|
|
track: {
|
|
background: "#ff669e",
|
|
width: 8,
|
|
},
|
|
handle: {
|
|
borderColor: "#ff669e",
|
|
background: "#ff669e",
|
|
border: "2px solid #ff669e",
|
|
opacity: 1,
|
|
boxShadow: "0 0 0 5px #ff669e80",
|
|
height: 24,
|
|
width: 24,
|
|
marginLeft: -8,
|
|
marginTop: 0,
|
|
},
|
|
}}
|
|
activeDotStyle={{
|
|
borderColor: "#ff669e",
|
|
background: "#ff669e80",
|
|
}}
|
|
vertical
|
|
reverse={true}
|
|
min={0}
|
|
value={videoState.currentTimePercentage}
|
|
onChangeComplete={handleStart}
|
|
// startPoint={0}
|
|
// marks={marks}
|
|
// step={null}
|
|
onChange={toastValue}
|
|
defaultValue={0}
|
|
/>
|
|
</div>
|
|
<div
|
|
className={`pointer-events-auto gap-4 px-4 ${
|
|
screenState && video.w > video.h
|
|
? "grid grid-rows-[83px,30px,30px] mb-4 w-max "
|
|
: "flex"
|
|
}`}
|
|
>
|
|
<div
|
|
className={`w-[83px] text-center text-white bg-[#ffffff80] rounded-lg px-2 py-1 h-max origin-bottom-left ${
|
|
screenState && video.w > video.h
|
|
? "rotate-90 -translate-y-7 "
|
|
: ""
|
|
}`}
|
|
>
|
|
{getCurrentTime(videoState.currentTimePercentage).desc}
|
|
</div>
|
|
<div
|
|
className={
|
|
screenState && video.w > video.h
|
|
? "rotate-90 -translate-y-7 origin-bottom-left"
|
|
: ""
|
|
}
|
|
>
|
|
{/Android/i.test(userAgent) && (
|
|
<div
|
|
onClick={() => {
|
|
toggleFullScreen(
|
|
"videoContainer",
|
|
"controllerContainer",
|
|
setScreenState
|
|
);
|
|
}}
|
|
className="rounded-full bg-[#ffffff80] p-2 w-[30px] h-[30px]"
|
|
>
|
|
<svg
|
|
t="1734698522866"
|
|
className="icon"
|
|
viewBox="0 0 1024 1024"
|
|
version="1.1"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
p-id="4039"
|
|
width="100%"
|
|
height="100%"
|
|
>
|
|
{screenState ? (
|
|
<path
|
|
d="M597.333333 128a42.666667 42.666667 0 0 0-42.666666 42.666667v256a42.666667 42.666667 0 0 0 42.666666 42.666666h256a42.666667 42.666667 0 1 0 0-85.333333h-153.002666l183.168-183.168a42.666667 42.666667 0 1 0-60.330667-60.330667L640 323.669333V170.666667a42.666667 42.666667 0 0 0-42.666667-42.666667z m-170.666666 426.666667H170.666667a42.666667 42.666667 0 1 0 0 85.333333h153.002666l-183.168 183.168a42.666667 42.666667 0 1 0 60.330667 60.330667L384 700.330667V853.333333a42.666667 42.666667 0 1 0 85.333333 0v-256a42.666667 42.666667 0 0 0-42.666666-42.666666z"
|
|
p-id="21020"
|
|
fill="#ffffff"
|
|
></path>
|
|
) : (
|
|
<>
|
|
<path
|
|
d="M865.706667 719.36zM842.666667 719.36zM159.786667 520.746667a49.066667 49.066667 0 0 1-49.066667-49.066667V163.626667a49.066667 49.066667 0 0 1 49.066667-49.066667h299.52a49.066667 49.066667 0 0 1 0 98.133333H208.853333v258.986667a49.066667 49.066667 0 0 1-49.066666 49.066667z"
|
|
fill="#ffffff"
|
|
p-id="18397"
|
|
></path>
|
|
<path
|
|
d="M437.973333 496.213333c-12.8 0-25.386667-4.906667-34.986666-14.72L124.8 197.973333c-18.986667-19.413333-18.773333-50.346667 0.64-69.333333 19.413333-18.986667 50.346667-18.773333 69.333333 0.64l278.186667 283.52c18.986667 19.413333 18.773333 50.346667-0.64 69.333333-9.6 9.386667-21.973333 14.08-34.346667 14.08zM872.96 921.173333H573.226667a49.066667 49.066667 0 0 1 0-98.133333h250.666666V564.053333a49.066667 49.066667 0 0 1 98.133334 0v308.053334a49.066667 49.066667 0 0 1-49.066667 49.066666z"
|
|
fill="#ffffff"
|
|
p-id="18398"
|
|
></path>
|
|
<path
|
|
d="M872.96 921.173333c-12.8 0-25.386667-4.906667-34.986667-14.72L559.573333 622.933333c-18.986667-19.413333-18.773333-50.346667 0.64-69.333333 19.413333-18.986667 50.346667-18.773333 69.333334 0.64l278.4 283.52c18.986667 19.413333 18.773333 50.346667-0.64 69.333333-9.6 9.386667-21.973333 14.08-34.346667 14.08z"
|
|
fill="#ffffff"
|
|
p-id="18399"
|
|
></path>
|
|
</>
|
|
)}
|
|
</svg>
|
|
</div>
|
|
)}
|
|
</div>
|
|
<div
|
|
className={`rounded-full bg-[#ffffff80] p-2 w-[30px] h-[30px] flex justify-center items-center ${
|
|
screenState && video.w > video.h
|
|
? "rotate-90 -translate-y-7 origin-bottom-left"
|
|
: ""
|
|
}`}
|
|
>
|
|
<FontAwesomeIcon
|
|
icon={videoState.play ? faPause : faPlay}
|
|
color="#ffffff"
|
|
// style={{ maxWidth: "32px" }}
|
|
// size="lg"
|
|
onClick={() => {
|
|
const videoPlayer = document.getElementById("videoPlayer");
|
|
if (videoState.play) {
|
|
setVideoState((old) => ({ ...old, play: false }));
|
|
videoPlayer.pause();
|
|
} else {
|
|
setVideoState((old) => ({ ...old, play: true }));
|
|
videoPlayer.play();
|
|
}
|
|
}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|