package.json

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

src/components/Option/VideoPlayer/index.tsx

@@ -1,7 +1,6 @@
 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,
@@ -186,6 +185,7 @@ 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  [&::-webkit-media-controls]:hidden [&::-webkit-media-controls-start-playback-button]:hidden"
+        className="w-full h-full bg-black"
         onClick={togglePlayPause}
         playsInline
         preload="auto">
@@ -351,67 +351,64 @@ 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"}`}>
         <div
-          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"}`}>
+          className="flex items-center justify-end gap-2 cursor-pointer"
+          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="flex items-center justify-end gap-2 cursor-pointer"
+            className="h-full bg-gradient-to-r from-orange-500 to-pink-600 rounded transition-all duration-100"
-            onClick={handleEnded}>
+            style={{ width: `${progressPercent}%` }}></div>
-            {!hideLogo && <img src={logo} alt="logo" className="w-8" />}
+        </div>
-            <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"
-              style={{ width: `${progressPercent}%` }}></div>
-          </div>
 
-          <div className="flex items-center gap-4">
+        <div className="flex items-center gap-4">
+          <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={togglePlayPause}>
+            {isPlaying ? (
+              <PauseCircleOutlined className="text-2xl" />
+            ) : (
+              <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-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"
+              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={togglePlayPause}>
+              onClick={toggleMute}>
-              {isPlaying ? (
+              {isMuted ? "🔇" : "🔊"}
-                <PauseCircleOutlined className="text-2xl" />
-              ) : (
-                <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>
+            <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>
-        </div>,
+
-        document.body
+          <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>
     </div>
   )
 }