woncomp/malabar
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add reveal&play button

Browse Source
This commit is contained in:
Joshua Zhang
2026-03-25 21:36:20 +08:00
parent 57e079f978
commit 6ce32bf116
1 changed files with 103 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

104
webnode/views/episode.ejs
View File

@@ -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);