124 lines
4.1 KiB
JavaScript
124 lines
4.1 KiB
JavaScript
import React, { useEffect, useState, useRef } from "react";
|
|
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
|
import { faPlayCircle, faPauseCircle } from "@fortawesome/free-solid-svg-icons";
|
|
import { Slider, Toast } from "antd-mobile";
|
|
import BackgroundPlayer from "next-video/background-player";
|
|
export default function VideoPlayer({ video }) {
|
|
const [videoState, setVideoState] = useState({
|
|
play: true,
|
|
currentTimePercentage: 0,
|
|
});
|
|
const [showController, setShowController] = useState(false);
|
|
const isSliding = useRef(null);
|
|
// const currentTime = useMemo(()=>{
|
|
// const videoPlayer = document.getElementById("videoPlayer");
|
|
// if (videoPlayer) {
|
|
// return videoPlayer.currentTime;
|
|
// }
|
|
// return 0;
|
|
// })
|
|
useEffect(() => {
|
|
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 toastValue = (value) => {
|
|
isSliding.current = true;
|
|
const videoPlayer = document.getElementById("videoPlayer");
|
|
if (!videoPlayer) return;
|
|
videoPlayer.pause();
|
|
const totalTime = videoPlayer.duration;
|
|
let timeSec = 0;
|
|
if (videoPlayer) {
|
|
timeSec = (totalTime * 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);
|
|
Toast.show(
|
|
`${hour > 9 ? hour : "0" + hour}:${minute > 9 ? minute : "0" + minute}:${
|
|
second > 9 ? second : "0" + second
|
|
}`
|
|
);
|
|
videoPlayer.currentTime = timeSec;
|
|
setVideoState((old) => ({ ...old, currentTimePercentage: value }));
|
|
};
|
|
const handleStart = () => {
|
|
const videoPlayer = document.getElementById("videoPlayer");
|
|
if (!videoPlayer) return;
|
|
videoPlayer.play();
|
|
isSliding.current = false;
|
|
};
|
|
return (
|
|
<div className="relative bg-black">
|
|
<div onClick={() => setShowController(!showController)}>
|
|
<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="absolute w-full px-4 grid justify-between items-center"
|
|
style={{
|
|
bottom: "12px",
|
|
gridTemplateColumns: "calc(100% - 32px) 32px",
|
|
display: showController ? "grid" : "none",
|
|
}}
|
|
>
|
|
<Slider
|
|
value={videoState.currentTimePercentage}
|
|
onAfterChange={handleStart}
|
|
onChange={toastValue}
|
|
icon={<div></div>}
|
|
style={{ "--fill-color": "#ff669e" }}
|
|
/>
|
|
<FontAwesomeIcon
|
|
icon={videoState.play ? faPauseCircle : faPlayCircle}
|
|
style={{ maxWidth: "32px" }}
|
|
size="2xl"
|
|
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>
|
|
);
|
|
}
|