feat: 同步播放完善

src/pages/Play/components/Player.tsx

@@ -22,7 +22,6 @@ const VideoPlayer: React.FC<VideoPlayerProps> = ({
   const leftVideoRef = useRef<HTMLVideoElement>(null);
   const rightVideoRef = useRef<HTMLVideoElement>(null);
   const audioRef = useRef<HTMLAudioElement>(null);
-  const [isReady, setIsReady] = useState(false);
   const [isPlaying, setIsPlaying] = useState(false);
   const [currentTime, setCurrentTime] = useState(0);
   const [duration, setDuration] = useState(0);
@@ -107,12 +106,7 @@ const VideoPlayer: React.FC<VideoPlayerProps> = ({
     setIsFullscreen(!isFullscreen);
   };
 
-
-
   useEffect(() => {
-    // 验证所有资源URL有效性
-    const urls = [topVideoSrc, leftVideoSrc, rightVideoSrc, audioSrc];
-    const allValid = urls.every(url => url && url.startsWith('http'));
     const topVideo = topVideoRef.current;
     const handleLoadedMetadata = () => {
       if (topVideo) {
@@ -124,16 +118,14 @@ const VideoPlayer: React.FC<VideoPlayerProps> = ({
       topVideo.addEventListener('loadedmetadata', handleLoadedMetadata);
       topVideo.addEventListener('timeupdate', handleTimeUpdate);
     }
-    setIsReady(allValid);
+
     return () => {
       if (topVideo) {
         topVideo.removeEventListener('loadedmetadata', handleLoadedMetadata);
         topVideo.removeEventListener('timeupdate', handleTimeUpdate);
       }
     };
-  }, [topVideoSrc, leftVideoSrc, rightVideoSrc, audioSrc]);
-
-  if (!isReady) return <div>资源加载中...</div>;
+  }, []);
 
   return (
     <div className={`video-container ${isFullscreen ? 'fullscreen' : ''}`}>
@@ -185,8 +177,8 @@ const VideoPlayer: React.FC<VideoPlayerProps> = ({
           <input
             type="range"
             min="0"
-            max={duration || 100}
-            value={currentTime}
+            max="100"
+            value={duration ? (currentTime / duration) * 100 : 0}
             onChange={handleSeek}
             onMouseDown={handleSeekMouseDown}
             onMouseUp={handleSeekMouseUp}
@@ -194,7 +186,7 @@ const VideoPlayer: React.FC<VideoPlayerProps> = ({
           />
           <span className="time-display">
            {formatTime(currentTime)} / {formatTime(duration)}
-        </span>
+          </span>
           <input
             type="range"
             min="0"

src/pages/Play/index.tsx

@@ -81,13 +81,17 @@ const TableList: React.FC<unknown> = () => {
             </Button>
           </Flex>
           <div style={{ flex: 1 }}>
-            <VideoPlayer
-              syncPlay={selected === 'sync'}
-              topVideoSrc={fullClassRoom}
-              leftVideoSrc={closeUpTeacher}
-              rightVideoSrc={blackWriting}
-              audioSrc={audioClass}
-            />
+            {
+              fullClassRoom && (
+                <VideoPlayer
+                  syncPlay={selected === 'sync'}
+                  topVideoSrc={fullClassRoom}
+                  leftVideoSrc={closeUpTeacher}
+                  rightVideoSrc={blackWriting}
+                  audioSrc={audioClass}
+                />
+              )
+            }
           </div>
         </div>
       </Card>