feat(packages): add chapter slider components - #1980
Closed
sampotts wants to merge 1 commit into
Closed
Conversation
✅ Deploy Preview for vjs10-site ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Contributor
📦 Bundle Size Report🎨 @videojs/html
Small changes (29, ≤ 300 B)
Presets (7)
Media (13)
Players (5)
Skins (30)
UI Components (42)
⚛️ @videojs/react
Small changes (47, ≤ 300 B)
Presets (7)
Media (12)
Skins (27)
UI Components (33)
🧩 @videojs/core
Small changes (1, ≤ 300 B)
Entries (76)
🏷️ @videojs/element — no changesEntries (2)
📦 @videojs/store — no changesEntries (3)
🔧 @videojs/utils — no changesEntries (13)
📦 @videojs/jsx — no changesEntries (3)
📦 @videojs/media — no changesEntries (15)
📦 @videojs/spf — no changesEntries (5)
ℹ️ How to interpretEach entry is independently bundled, minified, and brotli-compressed. Initial size includes its static import graph; lazy dynamic chunks are reported separately. Entries are not additive because their dependency graphs overlap. Preset rows represent realistic combined bundles. Changes of 300 B or less across initial, lazy, and total size are collapsed, not discarded. Run |
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
Bugbot is paused — on-demand spend limit reachedBugbot uses usage-based billing for this team and has hit its on-demand spend limit. A team admin can raise the spend limit in the Cursor dashboard, or wait for the next billing cycle to continue. |
sampotts
changed the title
sampotts
marked this pull request as ready for review
August 6, 2026 23:44
sampotts
commented
Aug 7, 2026
|
|
||
| export const SliderSegmentsDataAttrs = { | ||
| /** Present when there are slider segments to render. */ | ||
| hasSegments: 'data-segments', |
Collaborator
Author
There was a problem hiding this comment.
This just makes the tailwind a little cleaner since we can do has-[[data-segments]] rather than a massively horrid className I had to use prior.
sampotts
commented
Aug 7, 2026
| /** Size of a slider segment as a percentage. */ | ||
| size: '--media-slider-segment-size', | ||
| /** Offset of a slider segment as a percentage. */ | ||
| offset: '--media-slider-segment-offset', |
Collaborator
Author
There was a problem hiding this comment.
Used to generate the x or y coordinates.
Bugbot is paused — on-demand spend limit reachedBugbot uses usage-based billing for this team and has hit its on-demand spend limit. A team admin can raise the spend limit in the Cursor dashboard, or wait for the next billing cycle to continue. |
There was a problem hiding this comment.
Cursor Bugbot has reviewed your changes using default effort and found 1 potential issue.
❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.
Reviewed by Cursor Bugbot for commit 95be2d0. Configure here.
sampotts
force-pushed
the
feat/chapters
branch
from
August 10, 2026 01:28
d429c14 to
b869814
Compare
Collaborator
Author
|
Closing in favor of #2043 |
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
1 participant
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.
Summary
Adds the reusable chapter slider foundation across core, React, and HTML. The way it works is:
Slider.Segmentsgeneric component and connectedTimeSlider.Segmentscomponent which pulls the above chapters and renders the segments using SVGrectelements.Slider.Chaptercomponent that renders the current chapter for the pointer position. I was torn between this name andTimeSlider.Chapteras we have a bit of a mix withSlider.Thumbnail. Happy to be swayed in either direction.Closes #1843
Decisions made
Changes
Testing
pnpm -F @videojs/core testpnpm -F @videojs/html testpnpm -F @videojs/react testpnpm -F @videojs/media test metadata-trackspnpm typecheckThe skin and sandbox implementation is split into stacked follow-up PR #2002.
Note
Medium Risk
Touches shared slider pointer handling and text-track selection used by thumbnails and time sliders; behavior changes are covered by tests but affect all slider types.
Overview
Adds chapter-aware time slider UI across core, DOM, React, and HTML: segmented tracks from chapter VTT cues, pointer chapter titles, and shared text-track selection.
Slider segments & chapters — New
SliderSegmentsCore/SliderChapterCoreturn value-domain ranges and chapter cues into percentage geometry and titles.getChapterSegmentsfills gaps between cues with non-highlighted ranges. Segments render as an SVG clip path wired through--media-slider-clip-pathon the slider root; pointer-hover highlights the active segment viadata-highlighted.Framework components — Generic
Slider.Segments/Slider.Chapter(React +media-slider-*custom elements) and connectedTimeSlider.Segmentsthat pull the first chapters track from player state. Slider context now exposesid,min,max, andsetTrackClipPath.Text tracks —
getTextTrack,createTextTrackSelector, and ReactuseTextTrackreturn normalizedcuesandsrc(chapters + thumbnail metadata). Thumbnails use the same selector path instead of ad hoc feature fields.Other — Shared
findTimelineEntryreplaces duplicate binary search in thumbnail lookup. DOM slider pointer-up keepspointingtrue for mouse release inside the track (for segment/chapter preview) but clears it for outside release and touch. HLS.js mixin sets default chapters tracks tohiddenso cues are available without showing native chapter UI.Reviewed by Cursor Bugbot for commit b869814. Bugbot is set up for automated code reviews on this repo. Configure here.