Skip to content

refactor(packages): move slider throttle from commit to change#1219

Merged
mihar-22 merged 2 commits intomainfrom
t3code/aac49ebf
Apr 6, 2026
Merged

refactor(packages): move slider throttle from commit to change#1219
mihar-22 merged 2 commits intomainfrom
t3code/aac49ebf

Conversation

@mihar-22
Copy link
Copy Markdown
Member

@mihar-22 mihar-22 commented Apr 6, 2026

closes #1134

Summary

Slider throttle now governs onValueChange (continuous feedback during drag) instead of onValueCommit (final value on release). The commitThrottle prop is renamed to changeThrottle across all packages. The throttle utility gains a leading option so the first drag move fires immediately while subsequent moves are coalesced.

Changes

  • Rename commitThrottle to changeThrottle in SliderOptions, TimeSliderProps, TimeSliderElement, useSlider, and TimeSliderRoot
  • Throttle applies to onValueChange during drag (leading + trailing) instead of onValueCommit
  • onValueCommit now fires only on pointer release or stale-drag exit, never during drag
  • On pointerup: fire unthrottled onValueChange then onValueCommit in that order
  • Guard against double-commit when lostpointercapture follows pointerup
  • Add { leading: true } option to throttle() in @videojs/utils for immediate first invocation
  • HTML and React time sliders wire onValueChange to media.seek() for responsive scrubbing

Testing

Updated and expanded test suites in packages/utils, packages/core/dom, packages/core, and packages/html to cover leading-edge throttle, commit ordering, stale-drag fallback, and double-commit prevention.


Note

Medium Risk
Behavior and API changes to slider interaction: commitThrottle is renamed to changeThrottle and throttling now affects onValueChange during drag, which can change scrubbing/seek frequency across HTML/React consumers. Also updates core pointer/commit semantics (ordering and lost-capture edge cases), so regressions would show up as incorrect seek/commit timing.

Overview
Slider throttling is moved from commit to change. The commitThrottle option/prop is renamed to changeThrottle across core, HTML, and React time sliders, and throttling now applies to onValueChange during drag (leading+trailing) rather than to onValueCommit.

createSlider() now ensures onValueCommit only fires on pointer release or drag termination (stale-drag / lostpointercapture), fires an unthrottled onValueChange immediately before onValueCommit on pointerup, and prevents double-commits when lostpointercapture follows pointerup. Time slider integrations (HTML element and React TimeSliderRoot) now wire onValueChange to media.seek() for more responsive scrubbing.

The throttle() utility adds { leading: true } support (immediate first call + coalesced trailing), and tests are updated/expanded to cover the new throttling and commit semantics.

Reviewed by Cursor Bugbot for commit e07c0f3. Bugbot is set up for automated code reviews on this repo. Configure here.

@vercel
Copy link
Copy Markdown

vercel bot commented Apr 6, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
v10-sandbox Ready Ready Preview, Comment Apr 6, 2026 5:14am

Request Review

@netlify
Copy link
Copy Markdown

netlify bot commented Apr 6, 2026

Deploy Preview for vjs10-site ready!

Name Link
🔨 Latest commit e07c0f3
🔍 Latest deploy log https://app.netlify.com/projects/vjs10-site/deploys/69d3412bfce4e5000870383a
😎 Deploy Preview https://deploy-preview-1219--vjs10-site.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@github-actions
Copy link
Copy Markdown
Contributor

github-actions bot commented Apr 6, 2026

📦 Bundle Size Report

🎨 @videojs/html — no changes
Presets (7)
Entry Size
/video (default) 25.01 kB
/video (default + hls) 156.97 kB
/video (minimal) 24.98 kB
/video (minimal + hls) 156.92 kB
/audio (default) 23.13 kB
/audio (minimal) 23.17 kB
/background 6.93 kB
Media (7)
Entry Size
/media/background-video 1.04 kB
/media/container 1.59 kB
/media/dash-video 236.26 kB
/media/hls-video 133.40 kB
/media/mux-video 156.10 kB
/media/native-hls-video 3.54 kB
/media/simple-hls-video 15.06 kB
Players (3)
Entry Size
/video/player 6.65 kB
/audio/player 6.63 kB
/background/player 6.63 kB
Skins (17)
Entry Type Size
/video/minimal-skin.css css 3.42 kB
/video/skin.css css 3.44 kB
/video/minimal-skin js 24.98 kB
/video/minimal-skin.tailwind js 25.27 kB
/video/skin js 25.04 kB
/video/skin.tailwind js 25.37 kB
/audio/minimal-skin.css css 2.48 kB
/audio/skin.css css 2.45 kB
/audio/minimal-skin js 23.14 kB
/audio/minimal-skin.tailwind js 23.36 kB
/audio/skin js 23.13 kB
/audio/skin.tailwind js 23.46 kB
/background/skin.css css 117 B
/background/skin js 1.15 kB
/base.css css 157 B
/shared.css css 88 B
/skin-element js 1.34 kB
UI Components (22)
Entry Size
/ui/alert-dialog 2.20 kB
/ui/alert-dialog-close 1.73 kB
/ui/alert-dialog-description 1.62 kB
/ui/alert-dialog-title 1.63 kB
/ui/buffering-indicator 1.91 kB
/ui/captions-button 1.98 kB
/ui/controls 1.97 kB
/ui/error-dialog 2.40 kB
/ui/fullscreen-button 2.00 kB
/ui/mute-button 2.01 kB
/ui/pip-button 1.99 kB
/ui/play-button 1.97 kB
/ui/playback-rate-button 2.00 kB
/ui/popover 2.67 kB
/ui/poster 1.89 kB
/ui/seek-button 2.02 kB
/ui/slider 1.69 kB
/ui/thumbnail 2.28 kB
/ui/time 1.75 kB
/ui/time-slider 2.12 kB
/ui/tooltip 2.53 kB
/ui/volume-slider 2.44 kB

Sizes are marginal over the root entry point.

⚛️ @videojs/react — no changes
Presets (7)
Entry Size
/video (default) 19.99 kB
/video (default + hls) 152.25 kB
/video (minimal) 20.04 kB
/video (minimal + hls) 152.24 kB
/audio (default) 16.84 kB
/audio (minimal) 16.87 kB
/background 3.15 kB
Media (6)
Entry Size
/media/background-video 476 B
/media/dash-video 236.38 kB
/media/hls-video 133.35 kB
/media/mux-video 156.26 kB
/media/native-hls-video 3.50 kB
/media/simple-hls-video 15.03 kB
Skins (14)
Entry Type Size
/video/minimal-skin.css css 3.35 kB
/video/skin.css css 3.37 kB
/video/minimal-skin js 19.95 kB
/video/minimal-skin.tailwind js 23.45 kB
/video/skin js 19.92 kB
/video/skin.tailwind js 23.49 kB
/audio/minimal-skin.css css 2.38 kB
/audio/skin.css css 2.34 kB
/audio/minimal-skin js 16.77 kB
/audio/minimal-skin.tailwind js 19.23 kB
/audio/skin js 16.71 kB
/audio/skin.tailwind js 19.25 kB
/background/skin.css css 90 B
/background/skin js 272 B
UI Components (19)
Entry Size
/ui/alert-dialog 2.01 kB
/ui/buffering-indicator 1.75 kB
/ui/captions-button 1.89 kB
/ui/controls 1.69 kB
/ui/error-dialog 2.15 kB
/ui/fullscreen-button 1.83 kB
/ui/mute-button 1.84 kB
/ui/pip-button 1.88 kB
/ui/play-button 1.83 kB
/ui/playback-rate-button 1.91 kB
/ui/popover 3.43 kB
/ui/poster 1.56 kB
/ui/seek-button 1.88 kB
/ui/slider 3.66 kB
/ui/thumbnail 1.87 kB
/ui/time 1.94 kB
/ui/time-slider 3.23 kB
/ui/tooltip 2.76 kB
/ui/volume-slider 3.22 kB

Sizes are marginal over the root entry point.

🧩 @videojs/core — no changes
Entries (8)
Entry Size
. 5.29 kB
/dom 9.03 kB
/dom/media/custom-media-element 1.82 kB
/dom/media/dash 235.76 kB
/dom/media/hls 132.94 kB
/dom/media/mux 155.60 kB
/dom/media/native-hls 2.90 kB
/dom/media/simple-hls 14.45 kB
🏷️ @videojs/element — no changes
Entries (2)
Entry Size
. 999 B
/context 943 B
📦 @videojs/store — no changes
Entries (3)
Entry Size
. 1.39 kB
/html 696 B
/react 360 B
🔧 @videojs/utils — no changes
Entries (10)
Entry Size
/array 104 B
/dom 1.53 kB
/events 319 B
/function 327 B
/object 247 B
/predicate 265 B
/string 148 B
/style 190 B
/time 478 B
/number 158 B
📦 @videojs/spf — no changes
Entries (3)
Entry Size
. 40 B
/dom 12.45 kB
/playback-engine 12.41 kB

ℹ️ How to interpret

All sizes are standalone totals (minified + brotli).

Icon Meaning
No change
🔺 Increased ≤ 10%
🔴 Increased > 10%
🔽 Decreased
🆕 New (no baseline)

Run pnpm size locally to check current sizes.

@mihar-22 mihar-22 changed the title refactor(packages): move slider throttle from onValueCommit to onValueChange refactor(packages): move slider throttle from commit to change Apr 6, 2026
The original `adjustPercent` capture at init is correct — it delegates
to `core.adjustPercentForAlignment()` which reads current props on
every render. The wrapper was both unnecessary and broken (checked
presence once at init, not dynamically).

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@mihar-22 mihar-22 merged commit 0c95ab4 into main Apr 6, 2026
21 checks passed
@mihar-22 mihar-22 deleted the t3code/aac49ebf branch April 6, 2026 05:19
Copy link
Copy Markdown

@cursor cursor bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Cursor Bugbot has reviewed your changes and found 1 potential issue.

Fix All in Cursor

❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.

Reviewed by Cursor Bugbot for commit e07c0f3. Configure here.

const media = this.#timeState.value;
if (media) media.seek(this.#core.rawValueFromPercent(percent));
},
commitThrottle: this.commitThrottle,
Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Duplicated seek handlers in time slider callbacks

Low Severity

The newly added onValueChange callback has an identical body to the existing onValueCommit callback in both the HTML and React time slider implementations. A shared local helper (e.g. const handleSeek = (percent) => { … }) passed to both onValueChange and onValueCommit would eliminate the duplication and reduce the risk of the two callbacks diverging if the seek logic ever changes.

Additional Locations (1)
Fix in Cursor Fix in Web

Reviewed by Cursor Bugbot for commit e07c0f3. Configure here.

github-actions bot added a commit that referenced this pull request Apr 6, 2026
…ference

Update stale documentation from #1219: the `commitThrottle` prop was
renamed to `changeThrottle` and now uses leading+trailing throttle
for `onValueChange` during drag.

Closes #1220

Co-authored-by: rahim <github-actions[bot]@users.noreply.github.com>
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.

Bug: Seekbar Scrubber Lags Behind Mouse During Drag

1 participant