feat(site): add live presets to the installation guide and CLI - #1919
Draft
decepulis wants to merge 5 commits into
Draft
feat(site): add live presets to the installation guide and CLI#1919decepulis wants to merge 5 commits into
decepulis wants to merge 5 commits into
Conversation
Add `live-video` and `live-audio` to the installation guide's use-case picker and to `@videojs/cli docs how-to/installation` via `--preset live-video|live-audio`. The live use cases offer streaming media only — hls, dash, and mux-video for live video, mux-audio for live audio. A progressive file can't carry a live presentation, so offering one would generate a player that never reports live-edge state. Live use cases also default to a live demo source instead of the on-demand asset. Derive the preset group from the use case rather than the skin, so tags and import paths compose as `<group>-player` / `<group>-skin` / `<group>-minimal-skin` across all five presets. `@videojs/html` publishes CDN bundles for `live-video` and `live-video-minimal` only, so CDN gating now also considers the preset/skin: the install page hides the CDN tab and names the reason, and the CLI rejects `--install-method cdn` for live audio and headless live players. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01A7asb81fZMvvhpsKEFTQww
✅ 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 — no changesPresets (7)
Media (12)
Players (5)
Skins (30)
UI Components (39)
Sizes are marginal over the root entry point. ⚛️ @videojs/react — no changesPresets (7)
Media (11)
Skins (27)
UI Components (33)
Sizes are marginal over the root entry point. 🧩 @videojs/core — no changesEntries (75)
🏷️ @videojs/element — no changesEntries (2)
📦 @videojs/store — no changesEntries (3)
🔧 @videojs/utils — no changesEntries (13)
📦 @videojs/media — no changesEntries (14)
📦 @videojs/spf — no changesEntries (5)
ℹ️ How to interpretJS sizes are initial static graph totals (minified + brotli). Lazy dynamic chunks are shown separately when present.
Run |
Add the four missing live CDN entries so `live-video` and `live-audio` cover the same default / minimal / headless matrix as `video` and `audio`: `live-video-headless`, `live-audio`, `live-audio-minimal`, and `live-audio-headless`. Every preset the installation guide offers now ships a CDN bundle, so the guide no longer steers live audio or headless live players away from CDN. The preset-level gate stays in place — the published-bundle set is explicit rather than derived, so a preset added to the picker without a matching CDN entry still degrades to a package manager instead of emitting a script tag that 404s. Also reorder the presets to video, audio, live video, live audio, background video across the picker, the CLI prompt, the `--preset` flag help, and the CDN entry list. Note: `live-video-ui`, `live-video-minimal-ui`, `live-audio-ui`, and `live-audio-minimal-ui` are still missing relative to video/audio. Those serve ejected light-DOM layouts rather than the installation guide, and the live UI entries register a different element set, so they are left for a follow-up. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01A7asb81fZMvvhpsKEFTQww
The interactive prompt only offers renderers valid for the selected preset, and the install page's dropdown does the same, but the flag path validated `--media` against every known renderer. That let `--preset live-audio --media html5-video` generate a "live" player pointed at a progressive file — a combination the UI cannot produce. Validate the resolved renderer against `VALID_RENDERERS[useCase]` after option resolution, so it covers both the flag path and a mixed flags-plus-prompts run. The error names the `--preset` flag value rather than the internal use-case id, and lists the media types that are valid. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01A7asb81fZMvvhpsKEFTQww
Add live skins to the eject flow. `build-ejected-skins.ts` covered only default/minimal video and audio, so the customize-skins page had no live entries — the live presets could be installed but not ejected. Adds all 16 live variants (default/minimal x video/audio x HTML/React x CSS/Tailwind, 32 entries total) and the four CDN `-ui` bundles they need: `live-video-ui`, `live-video-minimal-ui`, `live-audio-ui`, `live-audio-minimal-ui`. The live UI define modules already existed and register a different element set than their non-live counterparts, so `video-ui` was not a substitute. Derive the package subpath, tag prefix, feature set, and component name from the skin's live-ness rather than assuming video/audio, so live snippets emit `<live-video-player>`, `liveVideoFeatures`, and `LiveVideoPlayer.tsx`. Live snippets also need a live source: a bare `<video>` plays HLS only in Safari, and an on-demand file would leave the Live button permanently behind live. Live entries therefore use a media element plus its CDN media bundle — `hlsjs-video` for live video and `mux-audio` for live audio, matching the installation guide's live defaults — pointed at the live demo stream and its thumbnail. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01A7asb81fZMvvhpsKEFTQww
The install page hides its CDN tab based on CDN_PRESET_BUNDLES, a hand-written set of bundle names. Nothing tied that set to what tsdown.cdn.config.ts actually publishes, so dropping a preset from the config would leave the page emitting a script tag that 404s — the same class of drift build-cdn-manifest.ts avoids for media subpaths by reading build output. Add a check:workspace check that the set is a subset of the configured presets, and that every configured preset has an entry file. Verified by fault injection: it catches an unpublished gated name, a configured preset with no entry file, and a rename of either parsed identifier. Also drop the unreachable `background` entry from the set — getCdnFileName resolves background before consulting it — and hoist getPresetLabel's background guard above the work it skips. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01A7asb81fZMvvhpsKEFTQww
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.
Adds
live-videoandlive-audioto the installation guide's use-case picker and to@videojs/cli docs how-to/installationvia--preset live-video|live-audio. The presets already shipped in@videojs/htmland@videojs/react; only the install surfaces were missing them. Follow-up commits then gave live full CDN parity and made the live skins ejectable.What changed
Presets —
UseCasegainslive-videoandlive-audio. Both surfaces list them in Video → Audio → Live Video → Live Audio → Background Video order, and each offers the usual default / minimal / headless skins.Media source types — the live use cases offer streaming sources only:
hls,dash,mux-videofor live video andmux-audiofor live audio. A progressive file can't carry a live presentation, so offering one would generate a player that never reports live-edge state. Live use cases also default to a live demo source (VJS10_DEMO_LIVE, the same stream the sandbox uses) instead of the on-demand asset.Codegen refactor — the preset group now comes from the use case rather than the skin, via
getPresetGroup. Tags and import paths compose uniformly as{group}-player/{group}-skin/{group}-minimal-skin, which is what lets five presets share one code path instead of three special cases. React skin components followLiveVideoSkin/MinimalLiveVideoSkin. Output for the three pre-existing use cases is byte-identical through this refactor — background included, where the subpath (background) and tag prefix (background-video) differ.CDN parity —
tsdown.cdn.config.tspreviously published onlylive-videoandlive-video-minimal. It now publishes all five variants for each live group (default, minimal, headless, and the two-uibundles the ejected snippets load), matching the non-live groups: 21 preset bundles total. Eight new side-effect entries underpackages/html/src/cdn/.CDN support used to be a renderer-only question; it now also considers the preset and skin, so a preset in the picker without a published bundle degrades to a package manager instead of emitting a script tag that 404s:
generateCdnCodereturnsnullfor a combination with no bundle, andgetCdnUnsupportedReasonreports whether the preset or the renderer is the cause.--install-method cdnwith the same distinction.'preset'branch is a guard rather than a live path — no preset the picker offers hits it.CDN drift guard — the gating set above is hand-written, and nothing tied it to what the CDN config publishes, so dropping a preset from the config would silently leave the page emitting a 404 script tag. A new
check:workspacecheck (11 of 11) asserts the set is a subset of the configured presets and that every configured preset has an entry file. It's the cheap counterpart to whatbuild-cdn-manifest.tsdoes for media subpaths by reading build output.CLI media validation —
--mediawas validated against every renderer, so--preset live-audio --media html5-videowould generate a live player pointed at a progressive file. It now validates againstVALID_RENDERERS[useCase], matching what the interactive prompt and the install page's dropdown already offered.Ejectable live skins —
build-ejected-skins.tshad no live coverage, socustomize-skins.mdxgains four sections and the generator goes 16 → 32 entries (HTML/React × css/tailwind × default/minimal × live video/audio). Live entries differ from their non-live counterparts in three ways: they use thelive-video/live-audiosubpaths, tags, and feature sets; they emit a live source and poster; and they use a media element plus its CDN media bundle (hlsjs-video,mux-audio) rather than a bare<video>, since a live presentation is HLS and a bare<video>only plays HLS in Safari.Verification
pnpm -F site test— 555 passed;pnpm -F @videojs/cli test— 80 passed. Installation-utils coverage went 83 → 126.live-*element tag names inpackages/html/src/define/, the four React skin exports inpackages/react/src/presets/live-*/, and theliveVideoFeatures/liveAudioFeatureschain (@videojs/react→@videojs/core/dom→store/features→presets). The bundle-size report independently confirms the same paths ship as artifacts.cdn/live-video-ui.js+cdn/media/hlsjs-video.jsinside<live-video-player>; React live entries emitliveVideoFeaturesfrom@videojs/react/live-videointoLiveVideoPlayer.tsxand<HlsJsVideo src={src} playsInline />. Netlify's full site build passing matters here, sinceEjectedSkin.astroreturns silently on an unknown id.cdn-media.jsongenerated — without it every CDN tab hides and the check is vacuous).pnpm typecheck,pnpm check:workspace(11 passed),biome check— all clean.astro check: reproduced the CI job (build:packages→api-docs→ejected-skins→astro check --minimumSeverity warning) for 0 errors, 0 warnings across 569 files.Known gaps
live-video+dashstill defaults to the on-demand.mpdsample — the one place a live preset generates a non-live source. We don't host a live manifest;livesim2.dashif.org/livesim2/testpic_2s/Manifest.mpdis verifiedtype="dynamic"if we want a third-party placeholder.live-audiocan only express a Mux stream — a live HLS audio stream on another host has no representable renderer, even thoughsimple-hls-audio-onlyships a CDN media bundle.default-audiohas the same gap, so this isn't new.