From b27ec2088cd74c42333eac4ecb4827aa4a281c42 Mon Sep 17 00:00:00 2001
From: Joshua Zhang <woncomp@gmail.com>
Date: Thu, 5 Mar 2026 18:09:00 +0800
Subject: [PATCH] Add buttons next/prev/top/end

---
 webnode/public/style.css  |  8 +++-
 webnode/views/episode.ejs | 91 ++++++++++++++++++++++++++++++++++++++-
 2 files changed, 97 insertions(+), 2 deletions(-)

diff --git a/webnode/public/style.css b/webnode/public/style.css
index 0d8463a..0c831a2 100644
--- a/webnode/public/style.css
+++ b/webnode/public/style.css
@@ -42,12 +42,18 @@ body {
 }
 
 .nav-left,
-.nav-right {
+.nav-right,
+.nav-center {
     display: flex;
     align-items: center;
     gap: 4px;
 }
 
+.nav-center {
+    flex: 1;
+    justify-content: center;
+}
+
 .nav-btn {
     width: 40px;
     height: 40px;
diff --git a/webnode/views/episode.ejs b/webnode/views/episode.ejs
index f9da5c1..4ea8667 100644
--- a/webnode/views/episode.ejs
+++ b/webnode/views/episode.ejs
@@ -23,7 +23,31 @@
                 </svg>
             </button>
         </div>
-        <span class="nav-title" id="timeDisplay">00:00</span>
+        <div class="nav-center">
+            <button class="nav-btn" id="firstBtn" title="First Line">
+                <svg viewBox="0 0 24 24" fill="none" stroke-width="2">
+                    <path d="M11 18l-6-6 6-6"/>
+                    <path d="M4 18V6"/>
+                </svg>
+            </button>
+            <button class="nav-btn" id="prevBtn" title="Previous Line">
+                <svg viewBox="0 0 24 24" fill="none" stroke-width="2">
+                    <path d="M15 18l-6-6 6-6"/>
+                </svg>
+            </button>
+            <span class="nav-title" id="timeDisplay">00:00</span>
+            <button class="nav-btn" id="nextBtn" title="Next Line">
+                <svg viewBox="0 0 24 24" fill="none" stroke-width="2">
+                    <path d="M9 18l6-6-6-6"/>
+                </svg>
+            </button>
+            <button class="nav-btn" id="lastBtn" title="Last Line">
+                <svg viewBox="0 0 24 24" fill="none" stroke-width="2">
+                    <path d="M13 18l6-6-6-6"/>
+                    <path d="M20 18V6"/>
+                </svg>
+            </button>
+        </div>
         <div class="nav-right">
             <button class="nav-btn" id="playPauseBtn" title="Play/Pause">
                 <svg viewBox="0 0 24 24" fill="none" stroke-width="2" id="playIcon">
@@ -108,6 +132,10 @@
             const playIcon = document.getElementById('playIcon');
             const pauseIcon = document.getElementById('pauseIcon');
             const goToBtn = document.getElementById('goToBtn');
+            const prevBtn = document.getElementById('prevBtn');
+            const nextBtn = document.getElementById('nextBtn');
+            const firstBtn = document.getElementById('firstBtn');
+            const lastBtn = document.getElementById('lastBtn');
 
             let selectedLine = null;
             let expandedLine = null;
@@ -251,6 +279,61 @@
                 }
             }
 
+            // Go to previous line
+            function goToPreviousLine() {
+                if (lines.length === 0) return;
+                pausePlayback();
+                const newIndex = Math.max(0, currentLineIndex - 1);
+                currentLineIndex = newIndex;
+                updateSelection(currentLineIndex);
+                updateBlurStates();
+                const targetLine = lines[currentLineIndex];
+                currentTime = getLineTimeSeconds(targetLine);
+                updateTimeDisplay();
+                scrollToLine(targetLine);
+            }
+
+            // Go to next line
+            function goToNextLine() {
+                if (lines.length === 0) return;
+                pausePlayback();
+                const newIndex = Math.min(lines.length - 1, currentLineIndex + 1);
+                currentLineIndex = newIndex;
+                updateSelection(currentLineIndex);
+                updateBlurStates();
+                const targetLine = lines[currentLineIndex];
+                currentTime = getLineTimeSeconds(targetLine);
+                updateTimeDisplay();
+                scrollToLine(targetLine);
+            }
+
+            // Go to first line
+            function goToFirstLine() {
+                if (lines.length === 0) return;
+                pausePlayback();
+                currentLineIndex = 0;
+                updateSelection(0);
+                updateBlurStates();
+                const targetLine = lines[0];
+                currentTime = getLineTimeSeconds(targetLine);
+                updateTimeDisplay();
+                scrollToLine(targetLine);
+            }
+
+            // Go to last line
+            function goToLastLine() {
+                if (lines.length === 0) return;
+                pausePlayback();
+                const lastIndex = lines.length - 1;
+                currentLineIndex = lastIndex;
+                updateSelection(lastIndex);
+                updateBlurStates();
+                const targetLine = lines[lastIndex];
+                currentTime = getLineTimeSeconds(targetLine);
+                updateTimeDisplay();
+                scrollToLine(targetLine);
+            }
+
             // Interactive drag-to-reveal for blur overlay
             const SWIPE_THRESHOLD = 160; // pixels to trigger reveal
             let activeDrag = null; // Track which line is being dragged
@@ -433,6 +516,12 @@
             // Go to button
             goToBtn.addEventListener('click', goToCurrentLine);
 
+            // Navigation buttons
+            prevBtn.addEventListener('click', goToPreviousLine);
+            nextBtn.addEventListener('click', goToNextLine);
+            firstBtn.addEventListener('click', goToFirstLine);
+            lastBtn.addEventListener('click', goToLastLine);
+
             // Open side menu
             function openMenu() {
                 sideMenu.classList.add('active');