From 2342e1f8a52e4f43b7aca9a909cc66fc76d07868 Mon Sep 17 00:00:00 2001
From: CN-JS-HuiBai <huyang@littlediary.cn>
Date: Fri, 3 Apr 2026 23:09:17 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E4=B8=BA=E4=B8=8B=E8=BD=BD?=
 =?UTF-8?q?=E5=AE=8C=E6=88=90=E4=B9=8B=E5=90=8E=E6=89=8D=E6=92=AD=E6=94=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/js/main.js | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/public/js/main.js b/public/js/main.js
index 391051a..9f9116f 100644
--- a/public/js/main.js
+++ b/public/js/main.js
@@ -432,11 +432,14 @@ document.addEventListener('DOMContentLoaded', () => {
         }
     };
 
+    let hasDownloadCompleted = false;
+
     const handleProgress = (progress) => {
         if (!progress) return;
         const status = progress.status;
 
         if (status === 'downloading') {
+            hasDownloadCompleted = false;
             showDownloadPhase();
             const percent = Math.min(Math.max(Math.round(progress.percent || 0), 0), 100);
             updateTranscodeProgressBar(percent);
@@ -446,6 +449,7 @@ document.addEventListener('DOMContentLoaded', () => {
             downloadProgressText.textContent = `${percent}%`;
             downloadProgressFill.style.width = `${percent}%`;
         } else if (status === 'downloaded') {
+            hasDownloadCompleted = true;
             showDownloadPhase();
             updateTranscodeProgressBar(100);
             const downloaded = formatBytes(progress.downloadedBytes || progress.totalBytes || 0);
@@ -457,6 +461,7 @@ document.addEventListener('DOMContentLoaded', () => {
                 showTranscodePhase();
             }, 600);
         } else if (status === 'transcoding') {
+            hasDownloadCompleted = true;
             showTranscodePhase();
             const percent = Math.min(Math.max(Math.round(progress.percent || 0), 0), 100);
             updateTranscodeProgressBar(percent);
@@ -471,6 +476,7 @@ document.addEventListener('DOMContentLoaded', () => {
                 statTime.textContent = progress.timemark ? `${progress.timemark}` : '';
             }
         } else if (status === 'finished') {
+            hasDownloadCompleted = true;
             showTranscodePhase();
             updateTranscodeProgressBar(100);
             transcodeProgressText.textContent = '100%';
@@ -498,6 +504,7 @@ document.addEventListener('DOMContentLoaded', () => {
     };
 
     const resetPhases = () => {
+        hasDownloadCompleted = false;
         if (downloadPhase) downloadPhase.classList.remove('hidden');
         if (downloadSizeText) downloadSizeText.textContent = '准备下载...';
         if (downloadProgressText) downloadProgressText.textContent = '0%';
@@ -1237,7 +1244,9 @@ document.addEventListener('DOMContentLoaded', () => {
             const streamUrl = buildStreamUrl();
             videoPlayer.src = streamUrl;
             videoPlayer.load();
-            videoPlayer.addEventListener('loadedmetadata', () => {
+            const onCanPlayAfterDownload = () => {
+                if (!hasDownloadCompleted) return;
+                videoPlayer.removeEventListener('canplay', onCanPlayAfterDownload);
                 syncVideoDurationFromPlayer();
                 transcodingOverlay.classList.add('hidden');
                 videoPlayer.classList.remove('hidden');
@@ -1250,10 +1259,12 @@ document.addEventListener('DOMContentLoaded', () => {
                 updateVolumeControls();
                 updateFullscreenControls();
                 schedulePlaybackChromeHide();
+                videoPlayer.play().catch(() => {});
                 loadSubtitleTracks(seekOffset).catch((error) => {
                     console.error('Subtitle load failed:', error);
                 });
-            }, { once: true });
+            };
+            videoPlayer.addEventListener('canplay', onCanPlayAfterDownload);
         } catch (err) {
             console.error(err);
             transcodingOverlay.innerHTML = `<p style="color: #ef4444;">Transcode Failed: ${err.message}</p>`;