Conversation
Adds a Live button for live/DVR streams that indicates whether playback is at the live edge and seeks to the Seekable Live Edge when activated. Hidden via aria-hidden when the stream is not live. Follows the media-ui-extensions Live Edge proposal (#7). - LiveButtonCore with at-edge detection (currentTime >= liveEdgeStart, with conservative fallback when liveEdgeStart is unavailable) and a tolerance window so autoplay reliably reports live - HTML media-live-button element and React LiveButton component - data-live, data-edge, data-hidden attrs for skin styling - Default and minimal skin chrome includes the live button next to PlayButton in the live-audio and live-video presets Refs #1390 Made-with: Cursor
Adds navbar toggles and a preload selector that propagate to every HTML and React template via the sandbox listener, so live and on-demand demos can be exercised across attribute combinations without editing each template. 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 (5)
Skins (29)
UI Components (25)
Sizes are marginal over the root entry point. ⚛️ @videojs/react
Presets (7)
Media (7)
Skins (26)
UI Components (21)
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 |
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
mihar-22
reviewed
Apr 28, 2026
sampotts
reviewed
Apr 28, 2026
sampotts
reviewed
Apr 28, 2026
Renames the LiveButton state field from timeIsLive to liveEdge and the corresponding data attribute from data-edge to data-live-edge for consistency with liveEdgeStart and the existing data-live attribute. Made-with: Cursor
…o-insert text
Drops the .media-live-indicator and .media-live-label spans from every live
skin and renders the status dot via .media-button--live::before instead. The
LiveButton element/component now auto-inserts LiveButtonCore.defaultText
('Live') when no children are provided, giving a single i18n hook, while CSS
text-transform: uppercase keeps the visual "LIVE" treatment.
Made-with: Cursor
Move `live-button.css` into `button.css` and `live-button.ts` (Tailwind) into `button.ts` as a `live` variant, alongside `primary`, `subtle`, and `icon`. Removes the dedicated files in both default and minimal skins, drops the `@import` lines and `liveButton` re-exports, and updates all 8 live audio/video skin templates to use `button.live` instead of `liveButton.button`. Made-with: Cursor
Drop the `selectLiveButton` selector and have the HTML and React adapters select `live`, `time`, and `buffer` directly, composing `LiveButtonMediaState` inline. The HTML element no longer extends `MediaButtonElement` and the React component no longer wraps `createMediaButton` — both bases assume a single feature selector, but the LiveButton needs three slices to detect the live edge and seek. `LiveButtonCore` keeps `LiveButtonMediaState` as its public media-state contract; only the wiring changes. Made-with: Cursor
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 5b1dc68. Configure here.
mihar-22
previously approved these changes
Apr 29, 2026
Drop the customizable `liveEdgeOffset` and `liveEdgeTolerance` props from `LiveButtonCore` and the React `<LiveButton>` component, replacing them with module-level constants. Simplifies the public API while preserving the existing default behavior (10s offset fallback, 5s tolerance). Made-with: Cursor
mihar-22
previously approved these changes
Apr 30, 2026
…sjsLevelDetails Consolidate `targetLiveWindow` and `liveEdgeStartOffset` computation into the shared `getStreamInfoFromHlsjsLevelDetails` helper so the HLS live mixin stays in sync with stream-type detection. Preserves the existing HOLD-BACK / PART-HOLD-BACK preference over the spec-multiple fallbacks. Fixes #1419 Made-with: Cursor
Made-with: Cursor
Extend the test engine mock with `config`/`userConfig` and add coverage for the low-latency vs standard live config defaults, user-supplied overrides, and the non-live no-op. Made-with: Cursor
mihar-22
approved these changes
May 1, 2026
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.
Closes #1390
Closes #1419
Test: https://v10-sandbox-git-feat-live-button-mux.vercel.app/?platform=html&styling=css&preset=hls-video&skin=default&source=hls-live&autoplay=1&muted=1&loop=0&preload=metadata
Summary
Adds a Live button for live and DVR streams that signals "at the live edge" and seeks to the Seekable Live Edge when activated.
Changes
LiveButtonCorederivesliveandtimeIsLivefrom the media state, with a tolerance window beforeliveEdgeStartso autoplay reliably reports live and a conservative seekable-end fallback whenliveEdgeStartis unavailablemedia-live-buttonelement and ReactLiveButtoncomponent sharing the same coredata-live,data-edge,data-hiddenattributes for skin styling (red-dot at edge, grey-dot behind, hidden off-air)PlayButtonin thelive-audioandlive-videopresetsImplementation notes
Detection follows the media-ui-extensions Live Edge proposal (#0007):
currentTime >= liveEdgeStart - liveEdgeTolerance(default5s)seekable.end() - liveEdgeOffset(default10s) whenliveEdgeStartisundefinedorNaNseekable.end(seekable.length - 1)accounting for HLSHOLD-BACK/ DASHsuggestedPresentationDelayTesting
pnpm -F @videojs/core test src/core/ui/live-buttoncovers state transitions, edge detection, and seek behaviorlive-video/live-audiopresets in the sandbox, verifydata-edgeflips when seeking back, and that the button hides on VOD sourcesMade with Cursor
Note
Medium Risk
Medium risk because it introduces new live-playback UI/state logic and modifies HLS live behavior (seek-to-live and hls.js config tweaks), which could affect live stream startup/latency and seeking across presets.
Overview
Adds a new Live button across core/HTML/React that tracks whether playback is at the live edge and seeks to the seekable live edge when activated (via new
LiveButtonCore,media-live-button, and ReactLiveButton), exposingdata-live/data-live-edgefor skin styling.Updates live audio/video presets and skins to register/ship dedicated live player elements (
live-video-player,live-audio-player) and render the Live button in default/minimal (CSS + Tailwind) layouts; exports are wired through@videojs/core,@videojs/html, and@videojs/reactentrypoints.Enhances HLS live handling by deriving stream type from playlist type, applying live/LL-HLS default hls.js config (with user overrides), and adding a one-shot seek-to-live on first user-initiated play (including deferral for
preload="none").Extends the sandbox to control
autoplay/muted/loop/preloadvia URL + postMessage, adds a settings menu and React hooks for these values, and propagates them into all HTML/CDN/React templates (including switching to live providers/tags when sources are live).Reviewed by Cursor Bugbot for commit 4b33370. Bugbot is set up for automated code reviews on this repo. Configure here.