feat: add a CDN media-availability manifest and read it across install surfaces#1737
Open
decepulis wants to merge 5 commits into
Open
feat: add a CDN media-availability manifest and read it across install surfaces#1737decepulis wants to merge 5 commits into
decepulis wants to merge 5 commits into
Conversation
Generate a build-time manifest of which @videojs/html media subpaths ship a CDN build, and wire the installation guide's HTML install tabs to hide the CDN option (falling back to a package manager) for any renderer that lacks a CDN bundle. - build-cdn-manifest.ts scans packages/html/cdn/media and writes src/content/cdn-media.json, exposed via a cdnMedia content collection - turbo cdn-manifest task (dependsOn ^build:cdn) runs before build/dev - HTMLInstallSection.astro reads the manifest server-side and passes it to the HTMLInstallTabs island, which reacts to the selected renderer - rendererSupportsCdn() centralizes the availability check Behavior is unchanged for current renderers (all have CDN builds); this is the machinery that lets renderers without a CDN build (e.g. Vimeo) drop the CDN install option. 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 |
decepulis
commented
Jun 24, 2026
decepulis
left a comment
decepulis
left a comment
Collaborator
Author
There was a problem hiding this comment.
Claude, for when you're done with your current task, here's a few cleanup items
- Rename the install component's halves to the server/client convention used elsewhere (JSPicker, SkinPickerSection): HTMLInstallSection.astro → HTMLInstallTabs.astro and HTMLInstallTabs.tsx → HTMLInstallTabsClient.tsx. - DRY the paragraph styling: extract `p`/`pMaxWidth` into typography/styles.ts and consume from both P.astro and the CDN-unavailable note in the React island (which can't use the Astro <P> component). - Simplify the tab→installMethod sync: one MutationObserver on the tabs root with `subtree: true` catches data-tab-active flips on any tab, including the CDN tab when it's added/removed, so it no longer re-attaches on a derived dependency. The effect deps are now empty and honest — no lint suppression. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Kd5A9UsSz5Ka7nYhEik3Fd
The installation page reads the cdn-media manifest to hide the CDN option for renderers without a CDN build. Wire the same gating into the CLI so the two surfaces stay in lockstep: - Read the generated manifest (bundled by tsdown; a committed fixture backs the hermetic tests) and expose `supportsCdnInstall`. - Offer the CDN install method only when the renderer ships a CDN build, and reject `--install-method cdn` for one that doesn't in the non-interactive flag path. - Extend the bundled-site type shim with the cdn-code module and the cdn-media.json import; alias the manifest in tsdown and vitest. Behavior-neutral on the current renderers (all ship a CDN build); the gating takes visible effect alongside the new rendering engines. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Kd5A9UsSz5Ka7nYhEik3Fd
decepulis
changed the title
![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 using default effort 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 a4b2627. Configure here.
decepulis
commented
Jun 24, 2026
Collaborator
Author
There was a problem hiding this comment.
Bummer that this is marked as a deletion, not a rename, in git.
Collaborator
Author
There was a problem hiding this comment.
Yeah — that's GitHub's rename detection, which is similarity-based on the aggregate base↔head content of the file, not on commit structure. The rename landed in the same change as the observer rewrite + styling refactor (and now the desync fix touches it again), so the new HTMLInstallTabsClient.tsx is similar enough to less than GitHub's threshold against the old HTMLInstallTabs.tsx, and it falls back to delete + add.
I can't force it back to a "renamed" badge without shrinking that net diff (which would mean undoing the refactors). Splitting the rename into its own pure git mv commit wouldn't help the squashed/Files-changed view either, since that compares final content regardless of commit boundaries — though it would read as a clean rename if you review commit-by-commit. Happy to restructure the commits that way if that's how you review; otherwise it's purely cosmetic and the file's history is intact via git log --follow.
Generated by Claude Code
When the selected renderer toggled CDN support, the npm tab's reactive `initial` flip and the CDN tab mounting/unmounting set `data-tab-active` without clearing the previously-active tab — leaving two tabs active, so the observer's "first active tab" could disagree with the visible tab and the usage snippet. (Bugbot, medium severity.) Remount the tab set via `key` on CDN-availability change so the active tab resets cleanly to its initial, and observe `data-tab-active` from the stable wrapper so the observer survives the remount. This makes the separate cdn→npm reconcile effect redundant. Also drop two comments in the CLI's prompts.ts that restated the code. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Kd5A9UsSz5Ka7nYhEik3Fd
sampotts
reviewed
Jun 25, 2026
sampotts
approved these changes
Jun 25, 2026
Per review: the centered max reading width is used for prose, so `prose` reads better than `pMaxWidth`. Renamed across styles.ts, P.astro, and the install-tabs note. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Kd5A9UsSz5Ka7nYhEik3Fd
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.
So I'm working towards #1255 -- putting media elements on the installation page -- and it's come up that not all media elements have a cdn distro. So the installation page needs to know which ones do and don't.
This PR addresses that gap.
This PR is a prerequisite to #1732.
How do I review this?
There's kinda three slices of code to know about
Manifest generation
scripts/build-cdn-manifest.tsis an ai-driven black box that does the reading.turbo.jsonmakes sure it's called at the right time.content.config.tstells astro what to expect from the manifest.rendererSupportsCdn()reads the manifest and does the checking.UI for humans
HTMLInstallTabs.astro/HTMLInstallTabsClient.tsxcallsrendererSupportsCdn()and does some UI stuff in responseCLI for Robots
@videojs/clireads the same manifest (bundled by tsdown; a committed fixture backs the hermetic tests), exposessupportsCdnInstall, offers the CDN install method only when the renderer ships a CDN build, and rejects--install-method cdnfor one that doesn't.https://claude.ai/code/session_01Kd5A9UsSz5Ka7nYhEik3Fd
Note
Low Risk
Changes are limited to install UX, generated docs content, and build tooling; no runtime player or auth paths are modified.
Overview
Adds a build-time CDN media manifest derived from
@videojs/htmlCDN output so install flows know which renderers actually ship CDN bundles.A new
cdn-manifestscript writes gitignoredcdn-media.json, wired into sitedev/buildvia Turbo (afterbuild:cdn) and exposed as thecdnMediaAstro collection. Shared logicrendererSupportsCdntreats preset renderers as always CDN-capable and requires a media renderer’s subpath (e.g.hls-video) to appear in that manifest.On the installation doc, HTML install tabs now load the manifest server-side and hide the CDN tab (with a short npm-only message) when the selected renderer has no CDN build, including a keyed remount so tab state stays in sync.
The CLI bundles the same manifest, offers CDN only in prompts when supported, and errors on
--install-method cdnfor unsupported renderers so generated snippets can’t reference missing CDN scripts. Hermetic CLI tests use a committed fixture mirroring the manifest shape.Reviewed by Cursor Bugbot for commit ea47cb6. Bugbot is set up for automated code reviews on this repo. Configure here.