From b84d48db24f1ef8701831d165a45248d8bbc9388 Mon Sep 17 00:00:00 2001
From: al <al@cdhncy.com>
Date: Thu, 19 Dec 2024 19:07:20 +0800
Subject: [PATCH] =?UTF-8?q?=E5=BC=80=E5=90=AF=E8=A7=86=E9=A2=91=E9=9F=B3?=
 =?UTF-8?q?=E9=87=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/VideoPlayer/index.jsx | 61 ++++++++++++++++++++------------
 1 file changed, 39 insertions(+), 22 deletions(-)

diff --git a/components/VideoPlayer/index.jsx b/components/VideoPlayer/index.jsx
index 427cd70..ac3e9fc 100644
--- a/components/VideoPlayer/index.jsx
+++ b/components/VideoPlayer/index.jsx
@@ -8,6 +8,7 @@ export default function VideoPlayer({ video }) {
     play: true,
     currentTimePercentage: 0,
   });
+  const [showController, setShowController] = useState(false);
   const isSliding = useRef(null);
   // const currentTime = useMemo(()=>{
   //   const videoPlayer = document.getElementById("videoPlayer");
@@ -18,20 +19,33 @@ export default function VideoPlayer({ video }) {
   // })
   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("ended", () => {
-        setVideoState((old) => ({ ...old, play: false }));
-      });
-      videoPlayer.addEventListener("timeupdate", () => {
-        console.log((videoPlayer.currentTime / videoPlayer.duration) * 100);
-        if (!isSliding.current)
-          setVideoState((old) => ({
-            ...old,
-            currentTimePercentage:
-              (videoPlayer.currentTime / videoPlayer.duration) * 100,
-          }));
-      });
+      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;
@@ -61,21 +75,24 @@ export default function VideoPlayer({ video }) {
     isSliding.current = false;
   };
   return (
-    <div className="relative">
-      <BackgroundPlayer
-        src={video.mp4}
-        id="videoPlayer"
-        // controlsList="none"
-        poster={video?.url.src}
-        blurDataURL={video?.url.blurDataURL}
-        autoPlay={videoState.play}
-        // style={{ height: "calc(100vh)" }}
-      />
+    <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