Merge branch 'main' of gitea.internetapi.cn:iod/page-assist

- 使用 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,64 +351,67 @@ const VideoPlayer = () => {
       )}
 
       {/* 控制栏 - 使用与原始HTML相同的类名和行为 */}
-      <div
+      {createPortal(
-        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"}`}>
         <div
-          className="flex items-center justify-end gap-2 cursor-pointer"
+          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"}`}>
-          onClick={handleEnded}>
-          {!hideLogo && <img src={logo} alt="logo" className="w-8" />}
-          <h2 className="text-xl font-bold text-white dark:text-zinc-300 mr-3">
-            <span className="text-[#d30100]">数联网</span>科创智能体
-          </h2>
-        </div>
-        <div
-          className="w-full h-1.5 bg-white bg-opacity-20 rounded cursor-pointer mb-2.5"
-          onClick={handleProgressClick}>
           <div
-            className="h-full bg-gradient-to-r from-orange-500 to-pink-600 rounded transition-all duration-100"
+            className="flex items-center justify-end gap-2 cursor-pointer"
-            style={{ width: `${progressPercent}%` }}></div>
+            onClick={handleEnded}>
-        </div>
+            {!hideLogo && <img src={logo} alt="logo" className="w-8" />}
-
+            <h2 className="text-xl font-bold text-white dark:text-zinc-300 mr-3">
-        <div className="flex items-center gap-4">
+              <span className="text-[#d30100]">数联网</span>科创智能体
-          <button
+            </h2>
-            className="bg-transparent border-none text-white text-lg cursor-pointer p-1 rounded-full w-12 h-12 flex items-center justify-center hover:bg-white hover:bg-opacity-20 transition-colors"
+          </div>
-            onClick={togglePlayPause}>
+          <div
-            {isPlaying ? (
+            className="w-full h-1.5 bg-white bg-opacity-20 rounded cursor-pointer mb-2.5"
-              <PauseCircleOutlined className="text-2xl" />
+            onClick={handleProgressClick}>
-            ) : (
+            <div
-              <PlayCircleOutlined className="text-2xl" />
+              className="h-full bg-gradient-to-r from-orange-500 to-pink-600 rounded transition-all duration-100"
-            )}
+              style={{ width: `${progressPercent}%` }}></div>
-          </button>
-
-          <span className="text-white text-sm min-w-[100px] text-center">
-            <span>{formatTime(currentTime)}</span> /
-            <span>{formatTime(duration)}</span>
-          </span>
-
-          <div className="flex items-center ml-auto">
-            <button
-              className="bg-transparent border-none text-white text-2xl cursor-pointer p-1 rounded-full w-12 h-12 flex items-center justify-center hover:bg-white hover:bg-opacity-20 transition-colors"
-              onClick={toggleMute}>
-              {isMuted ? "🔇" : "🔊"}
-            </button>
-            <input
-              type="range"
-              min="0"
-              max="1"
-              step="0.1"
-              value={isMuted ? 0 : volume}
-              onChange={handleVolumeChange}
-              className="w-20 h-1.5 ml-2.5"
-            />
           </div>
 
-          <button
+          <div className="flex items-center gap-4">
-            className="bg-transparent border-none text-white text-lg cursor-pointer p-1 rounded-full w-12 h-12 flex items-center justify-center hover:bg-white hover:bg-opacity-20 transition-colors"
+            <button
-            onClick={toggleFullscreen}>
+              className="bg-transparent border-none text-white text-lg cursor-pointer p-1 rounded-full w-12 h-12 flex items-center justify-center hover:bg-white hover:bg-opacity-20 transition-colors"
-            <ExpandOutlined className="text-2xl" />
+              onClick={togglePlayPause}>
-          </button>
+              {isPlaying ? (
-        </div>
+                <PauseCircleOutlined className="text-2xl" />
-      </div>
+              ) : (
+                <PlayCircleOutlined className="text-2xl" />
+              )}
+            </button>
+
+            <span className="text-white text-sm min-w-[100px] text-center">
+              <span>{formatTime(currentTime)}</span> /
+              <span>{formatTime(duration)}</span>
+            </span>
+
+            <div className="flex items-center ml-auto">
+              <button
+                className="bg-transparent border-none text-white text-2xl cursor-pointer p-1 rounded-full w-12 h-12 flex items-center justify-center hover:bg-white hover:bg-opacity-20 transition-colors"
+                onClick={toggleMute}>
+                {isMuted ? "🔇" : "🔊"}
+              </button>
+              <input
+                type="range"
+                min="0"
+                max="1"
+                step="0.1"
+                value={isMuted ? 0 : volume}
+                onChange={handleVolumeChange}
+                className="w-20 h-1.5 ml-2.5"
+              />
+            </div>
+
+            <button
+              className="bg-transparent border-none text-white text-lg cursor-pointer p-1 rounded-full w-12 h-12 flex items-center justify-center hover:bg-white hover:bg-opacity-20 transition-colors"
+              onClick={toggleFullscreen}>
+              <ExpandOutlined className="text-2xl" />
+            </button>
+          </div>
+        </div>,
+        document.body
+      )}
     </div>
   )
 }