From a1c4d0efab83f83017b237e432ffdbbb802acef3 Mon Sep 17 00:00:00 2001
From: al <al@cdhncy.com>
Date: Tue, 24 Dec 2024 20:52:55 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E8=A7=86=E9=A2=91=E6=92=AD?=
 =?UTF-8?q?=E6=94=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/VideoPlayer/index.jsx | 15 +++++++++------
 utils/tools/handleFuns.js        |  2 +-
 2 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/components/VideoPlayer/index.jsx b/components/VideoPlayer/index.jsx
index e56240f..d10aec8 100644
--- a/components/VideoPlayer/index.jsx
+++ b/components/VideoPlayer/index.jsx
@@ -133,9 +133,9 @@ export default function VideoPlayer({ video }) {
       <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"
-            : "w-full flex-row-reverse justify-between items-end gap-4"
-        } justify-between`}
+            ? "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",
         }}
@@ -148,9 +148,12 @@ export default function VideoPlayer({ video }) {
           icon={<div></div>}
           style={{ "--fill-color": "#ff669e" }}
         /> */}
-        <div className="pointer-events-auto flex items-center justify-center h-full px-4">
+        <div
+          className={`pointer-events-auto flex items-center justify-center h-full px-4 ${
+            !screenState ? "max-h-[60vh]" : "max-h-[80vh]"
+          }`}
+        >
           <Slider
-            className="max-h-[60vh]"
             styles={{
               rail: {
                 background: `#ff669e40`,
@@ -189,7 +192,7 @@ export default function VideoPlayer({ video }) {
           />
         </div>
         <div
-          className={`pointer-events-auto gap-4 ${
+          className={`pointer-events-auto gap-4 px-4 ${
             screenState && video.w > video.h
               ? "grid grid-rows-[83px,30px,30px] mb-4 w-max "
               : "flex"
diff --git a/utils/tools/handleFuns.js b/utils/tools/handleFuns.js
index 9029dec..8f1a849 100644
--- a/utils/tools/handleFuns.js
+++ b/utils/tools/handleFuns.js
@@ -257,7 +257,7 @@ export const toggleFullScreen = (videoEleId, controllerId, getState) => {
     video.firstChild.style.width = "auto";
     video.firstChild.style.height = "auto";
     video.firstChild.style.transformOrigin = "";
-    controller.style.width = "max-content";
+    controller.style.width = "100%";
     controller.style.height = "100%";
     controller.firstChild.style.marginLeft = "0";
     // controller.firstChild.style.transform = "rotate(180deg)";