WEBDEV-8966: Migrate scrubber-bar into elements - #82
Open
jbuckner wants to merge 8 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 81.15% 81.04% -0.12%
=========================================================================
Files 34 38 +4
Lines 1093 1171 +78
Branches 254 267 +13
=========================================================================
+ Hits 887 949 +62
- Misses 135 146 +11
- Partials 71 76 +5 ☔ View full report in Codecov by Harness. 🚀 New features to boost your workflow:
|
…-migrate-scrubber-bar * WEBDEV-8965-migrate-playback-controls: WEBDEV-9009: Fix the demo scroll spy test on a taller demo page
…-migrate-scrubber-bar * WEBDEV-8965-migrate-playback-controls: WEBDEV-8964: Match the waveform Settings default to the demo WEBDEV-8963: Match the audio element Settings default to the demo
The story hardcodes expandSectionMarkers on the element but declared the Settings default as false, so the radio said the markers were unexpanded while the pair either side of the thumb was plainly taller. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_017RuJpnAKn9TtFvMxcEgwdm
The marker heights were fixed pixels, 10px collapsed and 25px expanded, which only lines up at the default 10px track. Raise the track above that and the markers sit as short stubs in the middle of it. They are percentages of the marker now, which the scrubber already sizes to the track, so a collapsed divider is exactly as tall as the track and an expanded one stands proportionally above it. Both come out unchanged at the default. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_017RuJpnAKn9TtFvMxcEgwdm
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
3 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.