kamil/libnovel
1
0
Fork 0
Code Issues Pull Requests 3 Actions Packages Projects Releases 157 Wiki Activity

Fix seek bar: tall hit area, correct rail-based rect, prevent scroll during touch drag
Some checks failed
CI / Lint (push) Has been cancelled
Details
CI / Test (push) Has been cancelled
Details
CI / Build (push) Has been cancelled
Details

Browse Source
This commit is contained in:
Admin
2026-03-02 10:53:57 +05:00
parent 63aae93ee3
commit 42dc38d224
1 changed files with 28 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
scraper/internal/server/ui.go
View File

@@ -1970,10 +1970,12 @@ const chapterTmpl = `
<!-- Seek bar sits flush on top edge, full width -->
<div id="seek-track"
class="relative w-full h-1 bg-zinc-800 cursor-pointer touch-none"
class="relative w-full cursor-pointer touch-none select-none"
style="display:none">
<div id="seek-fill" class="absolute left-0 top-0 h-full bg-amber-500 pointer-events-none" style="width:0%"></div>
<div id="seek-thumb" class="absolute top-1/2 -translate-y-1/2 w-3 h-3 rounded-full bg-amber-400 shadow pointer-events-none -translate-x-1/2" style="left:0%"></div>
<div id="seek-rail" class="absolute left-0 right-0 top-1/2 -translate-y-1/2 h-1 bg-zinc-700 rounded-full overflow-hidden pointer-events-none">
<div id="seek-fill" class="absolute left-0 top-0 h-full bg-amber-500" style="width:0%"></div>
</div>
<div id="seek-thumb" class="absolute top-1/2 -translate-y-1/2 w-3.5 h-3.5 rounded-full bg-amber-400 shadow-md pointer-events-none -translate-x-1/2 transition-transform hover:scale-125" style="left:0%"></div>
</div>
<!-- Time row (only when playing) -->
@@ -2151,11 +2153,9 @@ const chapterTmpl = `
.queue-badge-paused { background: #1c1917; color: #d6d3d1; }
.queue-badge-error { background: #450a0a; color: #f87171; }
/* Seek bar — expanded touch hit-area without changing visual height */
/* Seek bar — tall hit-area, thin visual rail via inner element */
#seek-track {
padding: 6px 0;
margin: -6px 0;
box-sizing: content-box;
height: 2.5rem;
}
/* Safe-area inset for notched phones */
#mini-player { padding-bottom: env(safe-area-inset-bottom, 0); }
@@ -2230,6 +2230,7 @@ const chapterTmpl = `
var chapterListPanel= document.getElementById('chapter-list-panel');
var chapterListBtn = document.getElementById('chapter-list-btn');
var seekTrack = document.getElementById('seek-track');
var seekRail = document.getElementById('seek-rail');
var seekFill = document.getElementById('seek-fill');
var seekThumb = document.getElementById('seek-thumb');
var seekCur = document.getElementById('seek-cur');
@@ -2269,7 +2270,7 @@ const chapterTmpl = `
}
function seekFromEvent(e) {
var rect = seekTrack.getBoundingClientRect();
var rect = seekRail.getBoundingClientRect();
var clientX = (e.touches ? e.touches[0] : e).clientX;
var ratio = Math.max(0, Math.min(1, (clientX - rect.left) / rect.width));
if (audio.duration && isFinite(audio.duration)) {
@@ -2279,11 +2280,24 @@ const chapterTmpl = `
}
(function attachSeek() {
var dragging = false;
seekTrack.addEventListener('mousedown', function(e){ dragging=true; seekFromEvent(e); e.preventDefault(); });
seekTrack.addEventListener('touchstart', function(e){ dragging=true; seekFromEvent(e); }, {passive:true});
document.addEventListener('mousemove', function(e){ if(dragging) seekFromEvent(e); });
document.addEventListener('touchmove', function(e){ if(dragging) seekFromEvent(e); }, {passive:true});
document.addEventListener('mouseup', function(){ dragging=false; });
seekTrack.addEventListener('mousedown', function(e) {
dragging = true;
seekFromEvent(e);
e.preventDefault();
});
seekTrack.addEventListener('touchstart', function(e) {
dragging = true;
seekFromEvent(e);
}, { passive: true });
document.addEventListener('mousemove', function(e) {
if (dragging) seekFromEvent(e);
});
document.addEventListener('touchmove', function(e) {
if (dragging) { seekFromEvent(e); e.preventDefault(); }
}, { passive: false });
document.addEventListener('mouseup', function(e) {
if (dragging) { seekFromEvent(e); dragging = false; }
});
document.addEventListener('touchend', function() { dragging = false; });
})();