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

fix: seek bars work on iOS (onchange+oninput), minimal bar is range input, float drag direction corrected
All checks were successful
Release / Test backend (push) Successful in 54s
Details
Release / Check ui (push) Successful in 1m43s
Details
Release / Docker (push) Successful in 6m0s
Details
Release / Gitea Release (push) Successful in 20s
Details

Browse Source
This commit is contained in:
root
2026-04-12 08:28:59 +05:00
parent f79538f6b2
commit 53edb6fdef
2 changed files with 17 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
ui/src/lib/components/AudioPlayer.svelte
View File

@@ -995,9 +995,11 @@
// Only start moving if dragged > 6px to preserve tap detection // Only start moving if dragged > 6px to preserve tap detection
if (!floatMoved && Math.hypot(dx, dy) < 6) return; if (!floatMoved && Math.hypot(dx, dy) < 6) return;
floatMoved = true; floatMoved = true;
// right = MARGIN - x → drag right (dx>0) should decrease right → x increases → x = ox + dx
// bottom = MARGIN - y → drag down (dy>0) should decrease bottom → y increases → y = oy + dy
const raw = { const raw = {
x: floatDragStart.ox - dx, // x increases toward left (away from right edge) x: floatDragStart.ox + dx,
y: floatDragStart.oy - dy, // y increases toward top (away from bottom edge) y: floatDragStart.oy + dy,
}; };
audioStore.floatPos = clampFloatPos(raw.x, raw.y); audioStore.floatPos = clampFloatPos(raw.x, raw.y);
} }
@@ -1274,15 +1276,18 @@
</svg> </svg>
</button> </button>
<!-- Seek bar --> <!-- Seek bar — proper range input so drag works on iOS too -->
<!-- svelte-ignore a11y_click_events_have_key_events a11y_no_static_element_interactions --> <input
<div type="range"
role="none" aria-label="Seek"
class="flex-1 h-1.5 bg-(--color-surface-3) rounded-full overflow-hidden cursor-pointer" min="0"
onclick={seekFromBar} max={audioStore.duration || 0}
> value={audioStore.currentTime}
<div class="h-full bg-(--color-brand) rounded-full transition-none" style="width: {playPct}%"></div> oninput={(e) => { audioStore.seekRequest = parseFloat((e.target as HTMLInputElement).value); }}
</div> onchange={(e) => { audioStore.seekRequest = parseFloat((e.target as HTMLInputElement).value); }}
class="flex-1 h-1.5 cursor-pointer"
style="accent-color: var(--color-brand);"
/>
<!-- Time --> <!-- Time -->
<span class="flex-shrink-0 text-[11px] tabular-nums text-(--color-muted)"> <span class="flex-shrink-0 text-[11px] tabular-nums text-(--color-muted)">

1
ui/src/routes/+layout.svelte
View File

@@ -990,6 +990,7 @@
max={audioStore.duration || 0} max={audioStore.duration || 0}
value={audioStore.currentTime} value={audioStore.currentTime}
oninput={seek} oninput={seek}
onchange={seek}
class="w-full h-1 accent-[--color-brand] cursor-pointer block" class="w-full h-1 accent-[--color-brand] cursor-pointer block"
style="margin: 0; border-radius: 0; accent-color: var(--color-brand);" style="margin: 0; border-radius: 0; accent-color: var(--color-brand);"
/> />