Add reveal&play button

webnode/views/episode.ejs

@@ -49,6 +49,17 @@
             </button>
         </div>
         <div class="nav-right">
+            <button class="nav-btn" id="playCurrentBtn" title="Play Current (Clear on Line Start)">
+                <svg viewBox="0 0 24 24" fill="none" stroke-width="2" id="playCurrentIcon">
+                    <polygon points="5 3 19 12 5 21 5 3"/>
+                    <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="1.5" fill="none" opacity="0.3"/>
+                </svg>
+                <svg viewBox="0 0 24 24" fill="none" stroke-width="2" id="pauseCurrentIcon" style="display: none;">
+                    <rect x="6" y="4" width="4" height="16"/>
+                    <rect x="14" y="4" width="4" height="16"/>
+                    <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="1.5" fill="none" opacity="0.3"/>
+                </svg>
+            </button>
             <button class="nav-btn" id="playPauseBtn" title="Play/Pause">
                 <svg viewBox="0 0 24 24" fill="none" stroke-width="2" id="playIcon">
                     <polygon points="5 3 19 12 5 21 5 3"/>
@@ -131,6 +142,9 @@
             const playPauseBtn = document.getElementById('playPauseBtn');
             const playIcon = document.getElementById('playIcon');
             const pauseIcon = document.getElementById('pauseIcon');
+            const playCurrentBtn = document.getElementById('playCurrentBtn');
+            const playCurrentIcon = document.getElementById('playCurrentIcon');
+            const pauseCurrentIcon = document.getElementById('pauseCurrentIcon');
             const goToBtn = document.getElementById('goToBtn');
             const prevBtn = document.getElementById('prevBtn');
             const nextBtn = document.getElementById('nextBtn');
@@ -140,6 +154,7 @@
             let selectedLine = null;
             let expandedLine = null;
             let isPlaying = false;
+            let isPlayingCurrent = false;
             let currentTime = 0;
             let playbackInterval = null;
             let currentLineIndex = 0;
@@ -214,20 +229,29 @@
 
             // Pause playback
             function pausePlayback() {
-                if (!isPlaying) return;
+                if (!isPlaying && !isPlayingCurrent) return;
                 isPlaying = false;
+                isPlayingCurrent = false;
                 clearInterval(playbackInterval);
                 playIcon.style.display = 'block';
                 pauseIcon.style.display = 'none';
+                playCurrentIcon.style.display = 'block';
+                pauseCurrentIcon.style.display = 'none';
             }
 
             // Resume playback
             function resumePlayback() {
                 if (isPlaying) return;
+                // Stop play-current mode if active
+                if (isPlayingCurrent) {
+                    pausePlayback();
+                }
                 isPlaying = true;
                 lastTimestamp = Date.now();
                 playIcon.style.display = 'none';
                 pauseIcon.style.display = 'block';
+                playCurrentIcon.style.display = 'block';
+                pauseCurrentIcon.style.display = 'none';
                 
                 playbackInterval = setInterval(() => {
                     const now = Date.now();
@@ -255,6 +279,72 @@
                 }, 100);
             }
 
+            // Resume playback in "clear on line start" mode
+            function resumePlaybackCurrent() {
+                if (isPlayingCurrent) return;
+                // Stop regular play mode if active
+                if (isPlaying) {
+                    pausePlayback();
+                }
+                isPlayingCurrent = true;
+                lastTimestamp = Date.now();
+                playCurrentIcon.style.display = 'none';
+                pauseCurrentIcon.style.display = 'block';
+                playIcon.style.display = 'block';
+                pauseIcon.style.display = 'none';
+                
+                playbackInterval = setInterval(() => {
+                    const now = Date.now();
+                    const delta = (now - lastTimestamp) / 1000;
+                    lastTimestamp = now;
+                    
+                    currentTime += delta;
+                    updateTimeDisplay();
+                    
+                    // Check if we need to advance lines - clear blur as soon as line starts
+                    // Find the current line based on time
+                    const newLineIndex = findCurrentLineIndex(currentTime);
+                    if (newLineIndex !== currentLineIndex) {
+                        // We've moved to a new line - clear blur for current line immediately
+                        currentLineIndex = newLineIndex;
+                        updateSelection(currentLineIndex);
+                        // Clear blur for current line (lines before and including current are clear)
+                        clearBlurUpToCurrent();
+                        scrollToLine(lines[currentLineIndex]);
+                    }
+                    
+                    // Check if we've reached the end
+                    if (currentLineIndex >= lines.length - 1) {
+                        const lastLineTime = getLineTimeSeconds(lines[lines.length - 1]);
+                        if (currentTime > lastLineTime + 5) {
+                            // End of episode (5 seconds after last line)
+                            pausePlayback();
+                        }
+                    }
+                }, 100);
+            }
+
+            // Clear blur for all lines up to and including current line
+            function clearBlurUpToCurrent() {
+                lines.forEach((line, index) => {
+                    if (index <= currentLineIndex) {
+                        // Lines up to current are clear
+                        line.classList.remove('blurred');
+                        line.classList.add('clear');
+                    } else {
+                        // Lines after current are blurred
+                        line.classList.add('blurred');
+                        line.classList.remove('clear');
+                        // Reset blur overlay position when blur is reapplied
+                        const blurOverlay = line.querySelector('.blur-overlay');
+                        if (blurOverlay) {
+                            blurOverlay.style.transform = '';
+                            blurOverlay.style.opacity = '';
+                        }
+                    }
+                });
+            }
+
             // Toggle play/pause
             function togglePlayPause() {
                 if (isPlaying) {
@@ -264,6 +354,15 @@
                 }
             }
 
+            // Toggle play-current mode
+            function togglePlayCurrent() {
+                if (isPlayingCurrent) {
+                    pausePlayback();
+                } else {
+                    resumePlaybackCurrent();
+                }
+            }
+
             // Go to current line's timestamp
             function goToCurrentLine() {
                 if (selectedLine) {
@@ -513,6 +612,9 @@
             // Play/Pause button
             playPauseBtn.addEventListener('click', togglePlayPause);
 
+            // Play Current button
+            playCurrentBtn.addEventListener('click', togglePlayCurrent);
+
             // Go to button
             goToBtn.addEventListener('click', goToCurrentLine);