feat(packages): add live-video and live-audio presets#1399
Merged
Conversation
Refs #1398 Made-with: Cursor
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
✅ Deploy Preview for vjs10-site ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
Contributor
📦 Bundle Size Report🎨 @videojs/html
Presets (7)
Media (8)
Players (3)
Skins (29)
UI Components (25)
Sizes are marginal over the root entry point. ⚛️ @videojs/react
Presets (7)
Media (7)
Skins (26)
UI Components (20)
Sizes are marginal over the root entry point. 🧩 @videojs/core — no changesEntries (9)
🏷️ @videojs/element — no changesEntries (2)
📦 @videojs/store — no changesEntries (3)
🔧 @videojs/utils — no changesEntries (10)
📦 @videojs/spf — no changesEntries (3)
ℹ️ How to interpretAll sizes are standalone totals (minified + brotli).
Run |
Drop streamTypeFeature from the video/audio presets and drop playbackRateFeature from the live presets since playback rate isn't meaningful for live streams. Consumers that need either feature can still opt in explicitly. Made-with: Cursor
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
There was a problem hiding this comment.
Cursor Bugbot has reviewed your changes 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 8a66d43. Configure here.
Live playback doesn't benefit from a seek bar by default, so the live video and audio presets no longer render a TimeSlider. A flex spacer sits between the start/end button groups so the controls still stretch to opposite edges of the control bar. Applies to both the React and HTML presets, across default/minimal and CSS/Tailwind variants. Made-with: Cursor
The live video and live audio skins still shipped `speedUp`/`speedDown` and `seekStep` hotkeys (and doubletap seek gestures) even though `liveVideoFeatures` and `liveAudioFeatures` intentionally omit the playback-rate feature and seek actions aren't meaningful on a live edge. Strip them so no hotkey/gesture dispatches an action that isn't in the store. Made-with: Cursor
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.
Design #1395
fix #1398
Summary
Add
live-videoandlive-audiopresets to@videojs/htmland@videojs/react, and teach the sandbox to swap in the live skin automatically when a live source is selected. Players pick up the live UI (trimmed controls, no seek/rate, autoplay muted, no storyboard) purely based on source metadata, so existing HLS / Mux apps light up live playback without any code changes.Changes
live-videoandlive-audiopreset entries in@videojs/htmland@videojs/react(default + minimal skins, CSS + Tailwind variants). Live skins omit duration-oriented UI: noTimeSlider, no seek buttons, no playback-rate menu, and no seek hotkeys/gestures — a flex spacer keeps start/end button groups pinned to the edges of the control bar.liveVideoFeatures/liveAudioFeaturesthat mirror the VOD presets but dropplaybackRateFeature(not meaningful on a live edge). Also dropsstreamTypeFeaturefrom the basevideoFeatures/audioFeaturespresets; consumers that need stream-type state can opt in explicitly.@videojs/html/cdn/live-videoandlive-video-minimalbundles, wired into the HTML package build and the sandbox CDN demo.isLiveSource(id)helper reads alive: trueflag on sources; existing HLS / Mux / native-HLS / simple-HLS templates (HTML + React) plus the CDN demo now detect live sources, load the live skin variant, setautoplay mutedon the media element, and skip storyboards (the Mux image service doesn't generate them for live).Testing
pnpm -F @videojs/html -F @videojs/react buildpnpm -F sandbox dev, open any HLS / Mux sandbox, switch the source to HLS - Live Stream Big Buck Bunny, and verify: live skin renders (no seek bar, no rate menu), playback starts muted, storyboard is absent, and arrow-key/j/l/</>hotkeys are no-ops.Made with Cursor