refactor(components): 重构 VideoPlayer 组件

- 使用 createPortal将控制栏渲染到 document.body- 隐藏视频默认控件
- 更新 react-dom 依赖版本

package.json

@@ -49,7 +49,7 @@
     "pubsub-js": "^1.9.4",
     "react": "18.2.0",
     "react-countup": "^6.5.3",
-    "react-dom": "18.2.0",
+    "react-dom": "^19.1.1",
     "react-i18next": "^14.1.0",
     "react-icons": "^5.2.1",
     "react-markdown": "8.0.0",

src/components/Option/VideoPlayer/index.tsx

@@ -1,6 +1,7 @@
 import React, { useEffect, useMemo, useRef, useState } from "react"
 import iodVideo from "@/public/video.mp4"
 import { useOptionLayoutContext } from "@/components/Layouts/Layout.tsx"
+import { createPortal } from "react-dom"
 import {
   ExpandOutlined,
   PauseCircleOutlined,
@@ -185,7 +186,6 @@ const VideoPlayer = () => {
       }
     }
 
-
     video.addEventListener("loadedmetadata", handleLoadedMetadata)
     video.addEventListener("timeupdate", handleTimeUpdate)
     video.addEventListener("waiting", handleWaiting)
@@ -326,7 +326,7 @@ const VideoPlayer = () => {
       onMouseLeave={handleMouseLeave}>
       <video
         ref={videoRef}
-        className="w-full h-full bg-black"
+        className="w-full h-full bg-black  [&::-webkit-media-controls]:hidden [&::-webkit-media-controls-start-playback-button]:hidden"
         onClick={togglePlayPause}
         playsInline
         preload="auto">
@@ -351,8 +351,9 @@ const VideoPlayer = () => {
       )}
 
       {/* 控制栏 - 使用与原始HTML相同的类名和行为 */}
+      {createPortal(
         <div
-        className={`absolute left-0 w-full bg-gradient-to-t from-black to-transparent p-4 transition-all duration-300 ease-in-out flex flex-col gap-2.5 ${showControls ? "bottom-0" : "-bottom-40"}`}>
+          className={`fixed left-0 w-full bg-gradient-to-t from-black to-transparent p-4 transition-all duration-300 ease-in-out flex flex-col gap-2.5 z-50 ${showControls ? "bottom-0" : "-bottom-40"}`}>
           <div
             className="flex items-center justify-end gap-2 cursor-pointer"
             onClick={handleEnded}>
@@ -408,7 +409,9 @@ const VideoPlayer = () => {
               <ExpandOutlined className="text-2xl" />
             </button>
           </div>
-      </div>
+        </div>,
+        document.body
+      )}
     </div>
   )
 }