From 052178e395aeb52494d9aac56cf2b55b63886b03 Mon Sep 17 00:00:00 2001
From: Trevor Mears <trevor.mears@gmail.com>
Date: Sun, 18 Jan 2026 01:17:51 -0800
Subject: [PATCH] feat: add now playing header indicator and enable background
 playback for watchpage

---
 public/css/main.css          | 65 ++++++++++++++++++++++++++++++++++++
 public/index.html            |  5 +++
 public/js/app.js             |  9 +++++
 public/js/pages/WatchPage.js | 29 +++++++++++++++-
 4 files changed, 107 insertions(+), 1 deletion(-)

diff --git a/public/css/main.css b/public/css/main.css
index feda1fa..4c929cc 100644
--- a/public/css/main.css
+++ b/public/css/main.css
@@ -4303,4 +4303,69 @@ kbd {
   background: rgba(255, 255, 255, 0.05);
   color: var(--color-text-muted);
   border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+/* =====================================================
+   Now Playing Indicator (Header)
+   ===================================================== */
+
+.now-playing-indicator {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 14px;
+  margin-right: 16px;
+  background: linear-gradient(135deg, var(--color-accent) 0%, #8b5cf6 100%);
+  border-radius: var(--radius-full);
+  color: white;
+  text-decoration: none;
+  font-size: 13px;
+  font-weight: 500;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 200px;
+  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.4);
+  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
+  animation: now-playing-pulse 2s ease-in-out infinite;
+}
+
+.now-playing-indicator:hover {
+  transform: scale(1.05);
+  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.5);
+}
+
+.now-playing-indicator.hidden {
+  display: none;
+}
+
+.now-playing-icon {
+  font-size: 10px;
+}
+
+.now-playing-text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+@keyframes now-playing-pulse {
+
+  0%,
+  100% {
+    opacity: 1;
+  }
+
+  50% {
+    opacity: 0.85;
+  }
+}
+
+/* Mobile responsive */
+@media (max-width: 768px) {
+  .now-playing-indicator {
+    max-width: 140px;
+    padding: 5px 10px;
+    font-size: 12px;
+    margin-right: 8px;
+  }
 }
\ No newline at end of file
diff --git a/public/index.html b/public/index.html
index c17662e..11a3e13 100644
--- a/public/index.html
+++ b/public/index.html
@@ -38,6 +38,11 @@
         <span></span>
         <span></span>
       </button>
+      <!-- Now Playing indicator for movies/series -->
+      <a href="#" class="now-playing-indicator hidden" id="now-playing-indicator" data-page="watch">
+        <span class="now-playing-icon">▶</span>
+        <span class="now-playing-text" id="now-playing-text">Now Playing</span>
+      </a>
       <div class="navbar-menu" id="navbar-menu">
         <a href="#" class="nav-link active" data-page="home">
           <span class="nav-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"
diff --git a/public/js/app.js b/public/js/app.js
index 01b600d..2712ee2 100644
--- a/public/js/app.js
+++ b/public/js/app.js
@@ -113,6 +113,15 @@ class App {
             });
         });
 
+        // Now Playing indicator
+        const nowPlayingBtn = document.getElementById('now-playing-indicator');
+        if (nowPlayingBtn) {
+            nowPlayingBtn.addEventListener('click', (e) => {
+                e.preventDefault();
+                this.navigateTo('watch');
+            });
+        }
+
         // Toggle groups button
         document.getElementById('toggle-groups').addEventListener('click', () => {
             this.channelList.toggleAllGroups();
diff --git a/public/js/pages/WatchPage.js b/public/js/pages/WatchPage.js
index 336430e..2bad680 100644
--- a/public/js/pages/WatchPage.js
+++ b/public/js/pages/WatchPage.js
@@ -219,6 +219,9 @@ class WatchPage {
         // Load video
         await this.loadVideo(streamUrl);
 
+        // Show Now Playing indicator in navbar
+        this.showNowPlaying(content.title);
+
         // Populate details section
         this.renderDetails();
 
@@ -239,6 +242,28 @@ class WatchPage {
         this.showOverlay();
     }
 
+    /**
+     * Show Now Playing indicator in navbar
+     */
+    showNowPlaying(title) {
+        const indicator = document.getElementById('now-playing-indicator');
+        const textEl = document.getElementById('now-playing-text');
+        if (indicator && textEl) {
+            textEl.textContent = title || 'Now Playing';
+            indicator.classList.remove('hidden');
+        }
+    }
+
+    /**
+     * Hide Now Playing indicator in navbar
+     */
+    hideNowPlaying() {
+        const indicator = document.getElementById('now-playing-indicator');
+        if (indicator) {
+            indicator.classList.add('hidden');
+        }
+    }
+
     /**
      * Start a HLS transcode session
      */
@@ -497,6 +522,8 @@ class WatchPage {
             this.video.src = '';
             this.video.load();
         }
+
+        this.hideNowPlaying();
     }
 
     // === Playback Controls ===
@@ -1161,7 +1188,7 @@ class WatchPage {
 
     hide() {
         // Called when page becomes hidden
-        this.stop();
+        // Don't stop playback here - allow background playback
         this.cancelNextEpisode();
     }
 }