Skip to content

Make the seeking bar work from the keyboard - #1369

Open
captbaritone wants to merge 2 commits into
masterfrom
keyboard-seek
Open

captbaritone wants to merge 2 commits into
masterfrom
keyboard-seek

Conversation

@captbaritone

Copy link
Copy Markdown
Owner

The seeking bar (#position, an <input type="range">) can be focused, but only seeks in onPointerUp. Arrow keys fire onInput, which only updates the scrub preview. The clock display moves, but playback never seeks, and the slider stays stuck in "scrubbing" mode until the next pointer interaction.

Changes

  • Arrow keys seek ±5 seconds (Right/Up forward, Left/Down back), using the existing seekForward/seekBackward action creators that the arrow-key hotkeys use. I didn't keep the native 1% step: the displayed position uses Math.floor(timeElapsed), so on tracks shorter than 100s a 1% step rounds back to the same value, and a paused track would never get past the start.
  • Other non-pointer input seeks immediately. That's Home, End, PageUp/PageDown, and screen-reader increment/decrement actions.
  • Pointer dragging is unchanged. It still previews while dragging and seeks on release.

The global hotkeys already ignore events from <input>s, so with enableHotkeys on there's no double seek.

Testing

  • New Position.test.tsx (thirty seconds into a two-minute track):
    • ArrowRight seeks to 35s and ArrowLeft to 25s, and both prevent the native step.
    • Other keys are left alone.
    • Input with no pointer down seeks immediately.
    • A pointer drag only seeks on pointerup.
  • The three keyboard tests fail against the old implementation. The pointer-drag test passes against both, confirming that behaviour is unchanged.
  • tsc, eslint, prettier --check and vitest run pass locally.

The position slider only seeked on pointerup. Keyboard (and screen reader)
changes fired input, which updated the scrub preview but never seeked.

- Arrow keys now seek -/+5 seconds, like the arrow key hotkeys. The native 1%
  step can be smaller than the one second resolution of the displayed
  position, which would leave short tracks stuck when paused.
- Other input that does not come from a pointer (Home/End/PageUp/PageDown,
  assistive tech increment/decrement) seeks immediately.
- Pointer dragging is unchanged: preview while dragging, seek on release.
@netlify

netlify Bot commented Oct 12, 2026 •

Copy link
Copy Markdown

✅ Deploy Preview for tourmaline-kringle-c98715 canceled.

Name Link
🔨 Latest commit eee09b9
🔍 Latest deploy log https://app.netlify.com/projects/tourmaline-kringle-c98715/deploys/6acd4510574b4c838203e0d0

@github-actions

github-actions Bot commented Oct 12, 2026 •

Copy link
Copy Markdown

Size Change: +406 B (+0.08%)

Total Size: 491 kB

📦 View Changed
Filename Size Change
packages/webamp/built/webamp.bundle.min.js 298 kB +186 B (+0.06%)
packages/webamp/built/webamp.lazy-bundle.min.js 192 kB +220 B (+0.11%)

compressed-size-action

Screen readers announced these range inputs as bare numbers (e.g. "26" for
the seeking bar). Describe their values instead:

- Seeking Bar: "0:32 of 2:00" (the scrub position while dragging)
- Volume Bar: "75%"
- Balance: "Center", "20% Left" or "20% Right"

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant