From 89dbb96c9247c6dd084a90fcca63197944658f64 Mon Sep 17 00:00:00 2001
From: Trevor Mears <trevor.mears@gmail.com>
Date: Thu, 22 Jan 2026 00:14:42 -0800
Subject: [PATCH] fix: race condition in playNextEpisode()

---
 public/index.html                   |  9 ++++++++-
 public/js/components/VideoPlayer.js | 27 ++++++++++++++++++++++++++-
 public/js/pages/WatchPage.js        | 14 ++++++++++++--
 3 files changed, 46 insertions(+), 4 deletions(-)

diff --git a/public/index.html b/public/index.html
index 65246f6..517c27c 100644
--- a/public/index.html
+++ b/public/index.html
@@ -175,6 +175,12 @@
                 </div>
 
 
+                <!-- Center: Large Play Button -->
+                <button class="watch-center-play" id="player-center-play">
+                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="icon">
+                    <path d="M8 5v14l11-7z" />
+                  </svg>
+                </button>
 
                 <!-- Loading Spinner -->
                 <div class="watch-loading" id="player-loading">
@@ -596,7 +602,8 @@
                 </label>
                 <div class="setting-info">
                   <span class="setting-label">Enable Upscaling</span>
-                  <span class="setting-hint">Upscale lower-resolution content to a higher resolution during transcoding.</span>
+                  <span class="setting-hint">Upscale lower-resolution content to a higher resolution during
+                    transcoding.</span>
                 </div>
               </div>
               <div class="setting-item" id="upscale-method-container" style="display: none;">
diff --git a/public/js/components/VideoPlayer.js b/public/js/components/VideoPlayer.js
index f21ec1b..5965011 100644
--- a/public/js/components/VideoPlayer.js
+++ b/public/js/components/VideoPlayer.js
@@ -179,9 +179,23 @@ class VideoPlayer {
             togglePlay();
         });
 
+        // Center play button (large button shown when paused)
+        const centerPlayBtn = document.getElementById('player-center-play');
+        centerPlayBtn?.addEventListener('click', (e) => {
+            e.stopPropagation();
+            togglePlay();
+        });
+
+        // Click on video to toggle play/pause
+        this.video?.addEventListener('click', (e) => {
+            e.stopPropagation();
+            togglePlay();
+        });
+
         // Update play/pause UI
         const updatePlayUI = () => {
             const isPaused = this.video.paused;
+            const hasVideo = this.video.src && this.video.src !== '' && this.video.readyState > 0;
 
             // Bottom bar button
             const iconPlay = btnPlay?.querySelector('.icon-play');
@@ -191,6 +205,11 @@ class VideoPlayer {
                 iconPlay.classList.toggle('hidden', !isPaused);
                 iconPause.classList.toggle('hidden', isPaused);
             }
+
+            // Center play button - show only when paused AND video is loaded
+            if (centerPlayBtn) {
+                centerPlayBtn.classList.toggle('show', isPaused && hasVideo);
+            }
         };
 
         this.video.addEventListener('play', updatePlayUI);
@@ -329,7 +348,13 @@ class VideoPlayer {
         };
 
         this.container.addEventListener('mousemove', showOverlay);
-        this.container.addEventListener('click', showOverlay);
+        this.container.addEventListener('click', (e) => {
+            showOverlay();
+            // Only toggle play if clicking directly on video or container (not controls)
+            if (e.target === this.video || e.target === this.container || e.target.classList.contains('watch-overlay')) {
+                togglePlay();
+            }
+        });
         this.container.addEventListener('touchstart', showOverlay);
 
         this.video.addEventListener('play', resetOverlayTimer);
diff --git a/public/js/pages/WatchPage.js b/public/js/pages/WatchPage.js
index 50d07d9..05cd2b5 100644
--- a/public/js/pages/WatchPage.js
+++ b/public/js/pages/WatchPage.js
@@ -151,10 +151,18 @@ class WatchPage {
         this.video?.addEventListener('waiting', () => this.showLoading());
         this.video?.addEventListener('canplay', () => this.hideLoading());
 
-        // Overlay auto-hide
+        // Overlay auto-hide + click to toggle play
         const watchSection = document.querySelector('.watch-video-section');
         watchSection?.addEventListener('mousemove', () => this.showOverlay());
         watchSection?.addEventListener('touchstart', () => this.showOverlay());
+        watchSection?.addEventListener('click', (e) => {
+            this.showOverlay();
+            // Only toggle play if clicking on video area (not controls)
+            if (e.target === this.video || e.target === watchSection ||
+                e.target.classList.contains('watch-overlay') || e.target === this.overlay) {
+                this.togglePlay();
+            }
+        });
 
         // Keyboard shortcuts
         document.addEventListener('keydown', (e) => this.handleKeyboard(e));
@@ -1243,9 +1251,11 @@ class WatchPage {
     }
 
     async playNextEpisode() {
+        // Save next episode data BEFORE canceling (cancel clears the data)
+        const nextEp = this.nextEpisodePanel?.nextEpisodeData;
+
         this.cancelNextEpisode();
 
-        const nextEp = this.nextEpisodePanel?.nextEpisodeData;
         if (!nextEp) return;
 
         try {