feat: add DASH, Mux, and Vimeo as installation source types (UI + CLI)#1732
Draft
decepulis wants to merge 8 commits into
Draft
feat: add DASH, Mux, and Vimeo as installation source types (UI + CLI)#1732decepulis wants to merge 8 commits into
decepulis wants to merge 8 commits into
Conversation
Surface the DASH, Mux (video + audio), and Vimeo media elements as source-type choices in the installation guide's renderer picker. Engine variants of HLS (native-hls, simple-hls) are intentionally left out — the picker is a source-type/hosting-service chooser, not an engine chooser. - Extend the Renderer union and per-renderer maps (tags, components, media subpaths, default sources, articles, labels). - Mux-first detection: stream.mux.com resolves to mux-video/mux-audio (by use case) ahead of the generic .m3u8 rule; the detection loop now continues past use-case-invalid host matches. Add .mpd -> dash and vimeo.com -> vimeo rules. - Group the renderer dropdown into Files / Streaming formats / Hosting services via a new optional `groups` API on Select. - Vimeo has no CDN build: generate a cdn-media manifest (content collection) from the built CDN bundles and hide the CDN install option (falling back to npm with a note) for renderers without one. WIP: implementation complete; verification (install/typecheck/test/build) and the final testing approach still pending. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Kd5A9UsSz5Ka7nYhEik3Fd
Move RENDERER_LABELS, the section map, buildOptions, and buildGroups out of RendererSelect into utils/installation/renderer-options.ts so the grouping logic is unit-testable without rendering React/Base UI (no testing-library precedent in the site). Only group the dropdown when it earns its keep — at least two sections and one with more than one item — so audio (HTML5 Audio + Mux) and background stay flat instead of stacking lone headers. Adds pure tests for buildOptions/buildGroups and keeps the install-tabs observer re-attaching across CDN-tab visibility changes (documented biome-ignore for the intentional effect dependency). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Kd5A9UsSz5Ka7nYhEik3Fd
✅ 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 (10)
Players (5)
Skins (30)
UI Components (38)
Sizes are marginal over the root entry point. ⚛️ @videojs/react — no changesPresets (7)
Media (9)
Skins (27)
UI Components (32)
Sizes are marginal over the root entry point. 🧩 @videojs/core — no changesEntries (14)
🏷️ @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 |
Smaller text, top/bottom borders, and sentence case (drop uppercase) for the Select group labels used by the installation renderer picker. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Kd5A9UsSz5Ka7nYhEik3Fd
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Kd5A9UsSz5Ka7nYhEik3Fd
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Kd5A9UsSz5Ka7nYhEik3Fd
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Kd5A9UsSz5Ka7nYhEik3Fd
The `docs how-to/installation` command shared the site's codegen, detection, and source defaults but kept its own presentation layer, which lagged behind the new media renderers and CDN gating. - Reuse the site's `renderer-options` (RENDERER_LABELS, buildOptions) so labels and ordering (files → streaming formats → hosting services) stay in lockstep with the install page; accepted `--media` values are now derived from the shared label map instead of a hardcoded list. - Gate CDN by the generated `cdn-media` manifest via `rendererSupportsCdn` — same source of truth as the install page. The interactive prompt hides CDN for renderers without a CDN build (e.g. Vimeo), and the non-interactive flag path errors instead of emitting a broken snippet. - Extend the bundled-site type shim with the new Renderer union members, the cdn-code and renderer-options modules, and the cdn-media.json import; alias the manifest and shared module in tsdown and vitest configs. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Kd5A9UsSz5Ka7nYhEik3Fd
The CLI's `test` turbo task is intentionally dependency-free, so the generated `site/src/content/cdn-media.json` (a `cdn-manifest` output) is never produced in the test job — `prompts.ts` importing it failed CI with `ERR_MODULE_NOT_FOUND`. Point the vitest alias at a committed fixture that mirrors the manifest's shape and contents, keeping CLI tests hermetic and fast. The tsdown build still bundles the real generated manifest, which `^build` produces. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Kd5A9UsSz5Ka7nYhEik3Fd
decepulis
changed the title
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.
Closes #1255.
Surfaces the DASH, Mux (video + audio), and Vimeo media elements as source-type choices in the installation guide's renderer picker, and brings both surfaces — the docs UI and
@videojs/cli— to parity for them. (Sub-issue of #727; the AI-generated issue body is stale in both directions, so this implements what the codebase actually supports rather than the issue's literal list.)Note
Stacked on #1737 (the CDN-manifest seam). Merge #1737 first; this then rebases onto
mainand its diff collapses to the new-engine work below. Until that rebase, the diff here also shows #1737's manifest machinery and CLI gating plumbing.Scope & philosophy
The picker is an opinionated source-type / hosting-service chooser, not an engine chooser. So:
dash(.mpd),mux-video+mux-audio(hosting),vimeo(hosting).native-hls-video,simple-hls-video,simple-hls-audio-only. They aren't different sources — they're different playback engines for HLS the picker already offers — so they'd muddy a "what kind of media do you have?" choice. (They remain available as media elements; just not in this picker.)All three new renderers are
src-based — the videojs Mux element takes astream.mux.comsource and extracts the playback ID internally, so there's no playback-id codegen fork.What's in here
Rendererunion and the per-renderer maps (tags, React components, media subpaths, default sample sources, labels, articles,isVideoLikeso Vimeo's iframe doesn't get a bogusplaysinline). Newdefault-videoorder:html5-video, hls, dash, mux-video, vimeo;default-audio:html5-audio, mux-audio..mpd→dash,vimeo.com→vimeo, and Mux-first host rules (stream.mux.com→mux-video/mux-audioby use case) that take precedence over the generic.m3u8rule. The detection loop nowcontinues past a host match that's invalid for the use case (so a Mux URL in an audio context falls through tomux-audio). Net effect: uploading via the Mux panel now lands on a real<mux-video>(with Mux Data) instead of generic HLS — no uploader changes needed.Selectgains an optional, backward-compatiblegroupsAPI (Base UIGroup/GroupLabel). The renderer dropdown groups into Files / Streaming formats / Hosting services, but only when grouping earns its keep (≥2 sections, ≥1 with multiple items) — so audio/background stay flat.renderer-options.tsconsumed by both the install-page dropdown and the@videojs/cliprompt, so the two can't drift. The CLI's--mediaflag accepts the new values and generates matching code. (The CDN-availability gating that both surfaces apply comes from feat: add a CDN media-availability manifest and read it across install surfaces #1737.)Tests & verification
.mpd, Vimeo, use-case fallthrough), codegen (HTML/React/CDN output per new renderer), dropdown grouping, and CLI generation for the new renderers. Grouping/label logic lives in the purerenderer-options.tsso it's testable without introducing testing-library (no.test.tsxprecedent in the site).Out of scope (follow-ups)
html5-audiodefault sample currently points at a video.mp4(pre-existing quirk; needs a real audio asset).renderer-options.ts— they still duplicate their option lists across the CLI prompt and the UI pickers (skin labels have already drifted: "No Skin" vs "None (headless)").🤖 Generated with Claude Code
https://claude.ai/code/session_01Kd5A9UsSz5Ka7nYhEik3Fd