WEBDEV-8966: Migrate scrubber-bar into elements - #82
Open
jbuckner wants to merge 3 commits into
Open
Conversation
Move @internetarchive/scrubber-bar out of the iaux monorepo as ia-scrubber-bar, with its child as ia-section-marker. Fourth of seven. - Section markers sorted numerically on a copy. The old code called .sort() bare, which orders lexicographically, so a set like [9, 20, 100] picked the wrong markers either side of the playhead. It also sorted in place, reordering the array the consumer passed in. - The slider has an accessible name, and scrubbing it from the keyboard now counts as interacting. Arrowing along the bar used to set the value while leaving the "user is interacting" flag false, so the next playback tick snapped the thumb straight back. Blur releases a latched interaction, and Tab is deliberately not treated as scrubbing, since its keyup lands wherever focus went. - touchcancel ends an interaction, same as on the waveform. - percentage returns 0 instead of NaN when max equals min. - The played fill, the markers and the thumb all follow the themed track height now. They were pinned to the numbers that suit the default 10px track, so theming the height left the fill and thumb floating off it. The style injection is gone. updateWebkitSliderStyle() built a <style> block as a string and wrote it in through innerHTML on every value change, but the thing it styled is an ordinary div rather than a track pseudo-element, so a custom property does the same job. Marker modes are computed in render() and passed as property bindings instead of being assigned by querySelector, which is what made them straightforward to test. The marker arrows keep their unconditional visibility: hidden. Upstream only ever animated opacity in the mode rules, which can't reveal a hidden element, so those arrows have never been visible. Making UI nobody has seen suddenly appear isn't this migration's call. Left with a comment. Claude-Session: https://claude.ai/code/session_01U6iNyGicKJywdrWJMTyFin Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
|
Three comments explained the code by contrast with what it replaced, which a reader looking at the file without the diff has no context for. Say what the code does now instead. Claude-Session: https://claude.ai/code/session_01U6iNyGicKJywdrWJMTyFin Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This was referenced Aug 27, 2026
…-migrate-scrubber-bar * WEBDEV-8965-migrate-playback-controls: WEBDEV-8972: Run CI on every PR, not just ones based on main (#90)
Codecov Report❌ Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## WEBDEV-8965-migrate-playback-controls #82 +/- ##
========================================================================
Coverage ? 80.17%
========================================================================
Files ? 38
Lines ? 1170
Branches ? 267
========================================================================
Hits ? 938
Misses ? 159
Partials ? 73 ☔ View full report in Codecov by Harness. 🚀 New features to boost your workflow:
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
WEBDEV-8966. Stacked on #80, part of WEBDEV-8962.
Brings
scrubber-barover asia-scrubber-bar, and its child asia-section-marker.Bugs fixed on the way through:
.sort()was called bare, which orders lexicographically, so[9, 20, 100]picked the wrong markers either side of the playhead. It also sorted in place, reordering the consumer's own array.touchcancelends an interaction, same as on the waveform.percentagereturns 0 rather thanNaNwhenmax === min.Also:
updateWebkitSliderStyle()is gone. It built a<style>block as a string and wrote it in viainnerHTMLon every value change, but the element it styled is an ordinary div, not a track pseudo-element, so a custom property does the same job. Marker modes are computed inrender()and passed as property bindings rather than assigned byquerySelector.One thing deliberately not fixed: the marker arrows keep their unconditional
visibility: hidden. Themode-*rules only animateopacity, which can't reveal a hidden element, so those arrows have never been visible in production. Making UI nobody has seen suddenly appear didn't feel like a migration's call — happy to do it as a follow-up.CI shows only
deploy-previewhere because the PR isn't based onmain(WEBDEV-8972). Verified locally: build, full suite 277 passing, eslint and prettier clean.