feat: cue points support#1734
Open
luwes wants to merge 17 commits into
Open
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.
|
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
Contributor
📦 Bundle Size Report🎨 @videojs/html
Presets (7)
Media (10)
Players (5)
Skins (30)
UI Components (38)
Sizes are marginal over the root entry point. ⚛️ @videojs/react
Presets (7)
Media (9)
Skins (27)
UI Components (32)
Sizes are marginal over the root entry point. 🧩 @videojs/core
Entries (15)
🏷️ @videojs/element — no changesEntries (2)
📦 @videojs/store — no changesEntries (3)
🔧 @videojs/utils — no changesEntries (10)
📦 @videojs/spf — no changesEntries (4)
ℹ️ How to interpretJS sizes are initial static graph totals (minified + brotli). Lazy dynamic chunks are shown separately when present.
Run |
✅ Deploy Preview for vjs10-api-demo ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
There was a problem hiding this comment.
Cursor Bugbot has reviewed your changes using default effort and found 2 potential issues.
❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.
Reviewed by Cursor Bugbot for commit 6cb2780. Configure here.
Stores cue points as VTTCues on a hidden metadata text track and dispatches a cuepointchange event as the playhead enters each. Adapted from muxinc/elements playback-core. Refs #1442
The HLS text tracks mixin removed every removable track when subtitles were found, wiping the cue points metadata track owned by another component. Scope the cleanup to caption/subtitle tracks only. Refs #1442
Astro + React playground demonstrating the cue points API and media element state/getters. Adds a dev:api-demo turbo task. Refs #1442
System/light/dark theme toggle matching the site, with class-based dark mode.
Tracks buffered, logs progress with loaded %, restores loop/preload from params.
Sticky player, TE-style key controls, tally-bar sliders, cue-point table, and a preload control.
addCuePoints rewrites the full set via setup, inheriting its abort guard.
Append-after-last now shortens the prior cue to avoid overlap.
The cuePoints getter now returns #cuePoints while the track is missing or unpopulated.
Explicit endTimes are clamped to the next cue's start so a long marker can't overlap a follower.
Sync the trailing cue's sentinel end to the real duration on durationchange.
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.
Refs #1442
Demo at https://vjs10-api-demo.netlify.app/
API
Open Questions
media.addCuePoints(),media.activeCuePoint,media.cuePointsShould API's reflect this?
Summary
Add a cue points API for media elements: timed markers carrying JSON payloads, surfaced on a hidden
metadatatext track with acuepointchangeevent as the playhead enters each cue.Changes
CuePointscomponent in core (@videojs/core/dom/media/cue-points) — register/append cue points, read active cue point, subscribe viacuepointchangeHlsVideo,MuxVideo,MuxAudio) in both html and reactapi-demoAstro app exercising the cue points API and media state, with adev:api-demotaskImplementation notes
Cue points are stored as
VTTCues on a hidden metadata track. Since the engine clears cues on (re)load, the component re-populates on eachloadstart. Adapted from muxinc/elements playback-core (MIT).Testing
pnpm -F @videojs/core test— covered by new tests for the cue points component and the text tracks cleanup fix.Note
Medium Risk
Introduces playback-adjacent media config and custom events across HLS players; risk is moderated by unit tests and a narrow change to subtitle track teardown.
Overview
Adds a cue points capability to the media stack: timed markers with JSON payloads are written to a hidden
metadatatext track, exposed viamedia.config.cuePoints, and announced with acuepointchangeevent (active cue inevent.detail). A newCuePointscore component handles reload/loadstartrepopulation, duration-based end times, andaddCuePoints.HLS.js text-track cleanup now removes only caption/subtitle tracks marked
data-removeondestroy, so the cue-points metadata track is not cleared when subtitles are discovered.CuePointsis registered on HLS-backed players in@videojs/htmland@videojs/react(HlsJsVideo,MuxVideo,MuxAudio).A new
@videojs/api-demoAstro app (plus rootdev:api-demo) provides an interactive playground:HlsJsVideo, transport/secondary controls, cue-point add/remove, getter logging, URL-persisted state, and videojs.org-aligned styling.Reviewed by Cursor Bugbot for commit 14d44dd. Bugbot is set up for automated code reviews on this repo. Configure here.