WebSocket 实时推送进度

public/css/style.css

@@ -447,6 +447,13 @@ header p {
     transform: translateY(-1px);
 }
 
+.play-btn:disabled {
+    opacity: 0.65;
+    background: rgba(37, 99, 235, 0.5);
+    cursor: not-allowed;
+    transform: none;
+}
+
 .play-btn.hidden {
     display: none !important;
 }

public/js/main.js

@@ -15,6 +15,62 @@ document.addEventListener('DOMContentLoaded', () => {
     const progressFill = document.getElementById('progress-fill');
 
     let currentPollInterval = null;
+    let ws = null;
+    let wsConnected = false;
+    let subscribedKey = null;
+    let currentVideoKey = null;
+
+    const sendWsMessage = (message) => {
+        if (ws && ws.readyState === WebSocket.OPEN) {
+            ws.send(JSON.stringify(message));
+        }
+    };
+
+    const subscribeToKey = (key) => {
+        subscribedKey = key;
+        if (wsConnected) {
+            sendWsMessage({ type: 'subscribe', key });
+        }
+    };
+
+    const handleWsMessage = (event) => {
+        try {
+            const message = JSON.parse(event.data);
+            if (message.type === 'progress' && message.key === currentVideoKey) {
+                setProgress(message.progress);
+            }
+            if (message.type === 'ready' && message.key === currentVideoKey) {
+                setProgress({ status: 'Ready to play', percent: 100, details: 'Ready to play' });
+                playHlsStream(message.hlsUrl);
+            }
+        } catch (error) {
+            console.error('WebSocket message parse error:', error);
+        }
+    };
+
+    const connectWebSocket = () => {
+        const protocol = window.location.protocol === 'https:' ? 'wss' : 'ws';
+        ws = new WebSocket(`${protocol}://${window.location.host}`);
+
+        ws.addEventListener('open', () => {
+            wsConnected = true;
+            if (subscribedKey) {
+                sendWsMessage({ type: 'subscribe', key: subscribedKey });
+            }
+        });
+
+        ws.addEventListener('message', handleWsMessage);
+
+        ws.addEventListener('close', () => {
+            wsConnected = false;
+            setTimeout(connectWebSocket, 2000);
+        });
+
+        ws.addEventListener('error', (error) => {
+            console.error('WebSocket error:', error);
+            wsConnected = false;
+        });
+    };
 
     const setProgress = (progress) => {
         if (!progressInfo || !progressText || !progressFill) return;
@@ -161,9 +217,16 @@ document.addEventListener('DOMContentLoaded', () => {
         playerOverlay.classList.add('hidden');
         videoPlayer.classList.add('hidden');
         videoPlayer.pause();
-        if (playBtn) playBtn.classList.add('hidden');
+        if (playBtn) {
+            playBtn.disabled = true;
+            playBtn.textContent = '等待转码完成';
+            playBtn.classList.remove('hidden');
+        }
         resetProgress();
 
+        currentVideoKey = key;
+        subscribeToKey(key);
+
         nowPlaying.classList.remove('hidden');
         currentVideoTitle.textContent = key.split('/').pop();
 
@@ -182,8 +245,9 @@ document.addEventListener('DOMContentLoaded', () => {
 
             if (data.error) throw new Error(data.error);
 
-            // Wait/Poll for HLS playlist to be ready
-            pollForHlsReady(key, data.hlsUrl);
+            if (!wsConnected) {
+                pollForHlsReady(key, data.hlsUrl);
+            }
         } catch (err) {
             console.error(err);
             transcodingOverlay.innerHTML = `<p style="color: #ef4444;">Transcode Failed: ${err.message}</p>`;
@@ -193,7 +257,8 @@ document.addEventListener('DOMContentLoaded', () => {
     // Poll the backend to check if the generated m3u8 file is accessible
     const pollForHlsReady = (key, hlsUrl) => {
         let attempts = 0;
-        const maxAttempts = 60; // 60 seconds max wait for first segment
+        const maxAttempts = 120; // 60 seconds max wait for first segment
+        const pollIntervalMs = 500;
 
         currentPollInterval = setInterval(async () => {
             attempts++;
@@ -216,7 +281,7 @@ document.addEventListener('DOMContentLoaded', () => {
             } catch (err) {
                 console.error("Poll Error:", err);
             }
-        }, 1000);
+        }, pollIntervalMs);
     };
 
     const stopPolling = () => {
@@ -238,13 +303,21 @@ document.addEventListener('DOMContentLoaded', () => {
             hls.loadSource(url);
             hls.attachMedia(videoPlayer);
             hls.on(Hls.Events.MANIFEST_PARSED, () => {
-                playBtn.classList.remove('hidden');
+                if (playBtn) {
+                    playBtn.disabled = false;
+                    playBtn.textContent = 'Play';
+                    playBtn.classList.remove('hidden');
+                }
             });
         } else if (videoPlayer.canPlayType('application/vnd.apple.mpegurl')) {
             // Safari uses native HLS
             videoPlayer.src = url;
             videoPlayer.addEventListener('loadedmetadata', () => {
-                playBtn.classList.remove('hidden');
+                if (playBtn) {
+                    playBtn.disabled = false;
+                    playBtn.textContent = 'Play';
+                    playBtn.classList.remove('hidden');
+                }
             }, { once: true });
         }
     };
@@ -252,6 +325,7 @@ document.addEventListener('DOMContentLoaded', () => {
     // Bind events
     refreshBtn.addEventListener('click', fetchVideos);
 
-    // Initial load
+    // Connect WebSocket and initial load
+    connectWebSocket();
     fetchVideos();
 });