Skip to content

docs(site): rework Google Cast concept page and move it in the sidebar#1806

Merged
decepulis merged 3 commits into
mainfrom
claude/google-cast-sidebar-position-ulfcla-kq2mzx
Jul 7, 2026
Merged

docs(site): rework Google Cast concept page and move it in the sidebar#1806
decepulis merged 3 commits into
mainfrom
claude/google-cast-sidebar-position-ulfcla-kq2mzx

Conversation

@decepulis

@decepulis decepulis commented Jul 7, 2026

Copy link
Copy Markdown
Collaborator

This is an AI-assisted pass which does some light restructuring and sentence reworking according to the rules in writing-style.md and the docs skill. There might be room for an additional human pass after this, too.

It also moves the doc lower in the sidebar; imo Google Cast is important, but not the thing to be leading with.

Doc changes

Structure (concept template)

  • Code-first: the minimal setup example now sits directly under the intro instead of after two theory sections.
  • "Configuring Cast" → "Configure Cast" (no gerund headings).
  • New "Read Cast state" heading replaces the vaguer "Cast state and selectors".

Voice (writing-style.md)

  • Passive → active throughout: "The Cast SDK is injected…" → "Video.js injects the Cast SDK…", "All Cast configuration is set via…" → framework-scoped imperative prose, "Cast availability is surfaced as…" → "The Remote Playback feature reports availability as…".
  • Trimmed emdash chains in favor of periods/semicolons; frontmatter description rewritten as a concept description (was "How to add Chromecast support…") and kept under ~120 chars per the SEO conventions.

Accuracy (verified against the code)

  • The intro claimed "a Cast button appears automatically" — that's only true with the pre-built skins (packages/skins hides data-availability="unavailable"/"unsupported" buttons). The intro now attributes it to the skins and links the Skins concept.
  • Lifecycle table: 'connected' no longer says "Receiver is playing" (a connected session isn't necessarily playing); now "Session active; receiver has the media".
  • Documented all three remotePlaybackAvailability values in the Browser availability section.
  • All config claims (receiver, customData, src/contentType, streamType fallback, HLS segment-format detection, disableRemotePlayback gating the lazy SDK load) verified against packages/core/src/dom/media/google-cast/.

Code examples (code-examples.md)

  • title="App.tsx" / title="index.html" on the full setup examples, multi-line attributes instead of single-line walls.
  • The React browser-availability CSS targeted .cast-button without ever showing where that class comes from — the example now shows <CastButton className="cast-button" /> first.
  • First-mention links added: CastButton reference, Skins concept, Remote Playback feature.

Verification

  • pnpm build:site passes; both framework variants of the page render with the new content (checked dist/docs/framework/{react,html}/concepts/cast/index.html).

🤖 Generated with Claude Code

https://claude.ai/code/session_01KjkkhfrjtAvA3fUCgjCAMZ


Generated by Claude Code


Note

Low Risk
Documentation and sidebar ordering only; no runtime or API changes.

Overview
Reworks the Google Cast concept doc for clearer structure, voice, and accuracy, and moves it later in the Concepts sidebar (after accessibility).

The page now leads with full React/HTML setup examples and a CastButton, then theory. Headings shift to imperative titles (Configure Cast, Read Cast state). Prose is more active; the intro no longer implies a Cast button appears without setup—it credits pre-built skins and links CastButton / Skins. Lifecycle and availability copy is tightened (connected ≠ necessarily playing; all three remotePlaybackAvailability values). Examples get file titles, multi-line snippets, // [!code focus] on config lines, and React CSS that shows className="cast-button" before the selector.

docs.config.ts only reorders { slug: 'concepts/cast' } within Concepts.

Reviewed by Cursor Bugbot for commit 90f3d6e. Bugbot is set up for automated code reviews on this repo. Configure here.

claude added 2 commits July 7, 2026 18:18
Move the Google Cast concept entry from the top of the Concepts
section to the bottom, below the more foundational concepts.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_0146KwfYxv9abnktLTRvpd5A
Rework the Google Cast concept page to follow the docs skill
conventions: code-first structure with the minimal setup up top,
active voice, no gerund headings, framework-scoped config prose,
fence titles on full examples, and first-mention links to the
CastButton reference, skins, and Remote Playback pages. Also fix
the intro to attribute the auto-appearing Cast button to the
pre-built skins and document the availability values.

Co-Authored-By: Claude <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01KjkkhfrjtAvA3fUCgjCAMZ
@netlify

netlify Bot commented Jul 7, 2026

Copy link
Copy Markdown

Deploy Preview for vjs10-site ready!

Name Link
🔨 Latest commit 90f3d6e
🔍 Latest deploy log https://app.netlify.com/projects/vjs10-site/deploys/6a4d49154066a70008bc1aee
😎 Deploy Preview https://deploy-preview-1806--vjs10-site.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
🤖 Make changes Run an agent on this branch

To edit notification comments on pull requests, go to your Netlify project configuration.

@vercel

vercel Bot commented Jul 7, 2026

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
v10-sandbox Ready Ready Preview, Comment Jul 7, 2026 6:44pm

Request Review

@github-actions

github-actions Bot commented Jul 7, 2026

Copy link
Copy Markdown
Contributor

📦 Bundle Size Report

🎨 @videojs/html — no changes
Presets (7)
Entry Initial
/video (default) 46.24 kB
/video (default + hls) 185.87 kB
/video (minimal) 46.25 kB
/video (minimal + hls) 185.90 kB
/audio (default) 39.78 kB
/audio (minimal) 38.93 kB
/background 4.20 kB
Media (10)
Entry Initial
/media/background-video 1.14 kB
/media/container 1.72 kB
/media/dash-video 214.72 kB
/media/hlsjs-video 141.49 kB
/media/mux-audio 163.90 kB
/media/mux-video 163.87 kB
/media/native-hls-video 9.05 kB
/media/simple-hls-audio-only 17.15 kB
/media/simple-hls-video 18.72 kB
/media/vimeo-video 12.31 kB
Players (5)
Entry Initial
/video/player 8.22 kB
/audio/player 5.38 kB
/background/player 3.92 kB
/live-video/player 7.64 kB
/live-audio/player 5.39 kB
Skins (30)
Entry Type Initial
/video/minimal-skin.css css 5.65 kB
/video/skin.css css 5.61 kB
/video/minimal-skin js 46.21 kB
/video/minimal-skin.tailwind js 46.93 kB
/video/skin js 46.24 kB
/video/skin.tailwind js 47.02 kB
/audio/minimal-skin.css css 3.93 kB
/audio/skin.css css 3.82 kB
/audio/minimal-skin js 38.94 kB
/audio/minimal-skin.tailwind js 39.43 kB
/audio/skin js 39.79 kB
/audio/skin.tailwind js 40.30 kB
/background/skin.css css 133 B
/background/skin js 1.14 kB
/live-video/minimal-skin.css css 5.65 kB
/live-video/skin.css css 5.61 kB
/live-video/minimal-skin js 45.25 kB
/live-video/minimal-skin.tailwind js 45.87 kB
/live-video/skin js 44.86 kB
/live-video/skin.tailwind js 45.52 kB
/live-audio/minimal-skin.css css 3.93 kB
/live-audio/skin.css css 3.82 kB
/live-audio/minimal-skin js 31.54 kB
/live-audio/minimal-skin.tailwind js 30.98 kB
/live-audio/skin js 32.54 kB
/live-audio/skin.tailwind js 32.01 kB
/global.css css 176 B
/shared.css css 104 B
/tailwind.css css 161 B
/skin-element js 1.45 kB
UI Components (39)
Entry Initial
/ui/airplay-button 2.41 kB
/ui/alert-dialog 2.55 kB
/ui/alert-dialog-close 2.17 kB
/ui/alert-dialog-description 2.11 kB
/ui/alert-dialog-title 2.16 kB
/ui/audio-track-radio-group 2.84 kB
/ui/buffering-indicator 2.28 kB
/ui/captions-button 2.40 kB
/ui/captions-radio-group 2.84 kB
/ui/cast-button 2.42 kB
/ui/compounds 2.85 kB
/ui/controls 2.59 kB
/ui/error-dialog 2.60 kB
/ui/fullscreen-button 2.36 kB
/ui/hotkey 2.32 kB
/ui/menu 2.66 kB
/ui/mute-button 2.45 kB
/ui/pip-button 2.39 kB
/ui/play-button 2.39 kB
/ui/playback-rate-button 2.45 kB
/ui/playback-rate-radio-group 2.77 kB
/ui/popover 2.74 kB
/ui/poster 2.24 kB
/ui/quality-radio-group 2.82 kB
/ui/seek-button 2.41 kB
/ui/seek-indicator 2.43 kB
/ui/seek-indicator-value 418 B
/ui/slider 2.63 kB
/ui/status-announcer 2.32 kB
/ui/status-indicator 2.38 kB
/ui/status-indicator-value 422 B
/ui/thumbnail 2.21 kB
/ui/time 2.60 kB
/ui/time-slider 2.64 kB
/ui/tooltip 2.67 kB
/ui/volume-indicator 2.34 kB
/ui/volume-indicator-fill 444 B
/ui/volume-indicator-value 366 B
/ui/volume-slider 2.63 kB

Sizes are marginal over the root entry point.

⚛️ @videojs/react — no changes
Presets (7)
Entry Initial
/video (default) 38.33 kB
/video (default + hls) 176.58 kB
/video (minimal) 38.69 kB
/video (minimal + hls) 177.08 kB
/audio (default) 31.54 kB
/audio (minimal) 31.61 kB
/background 754 B
Media (9)
Entry Initial
/media/background-video 575 B
/media/dash-video 213.16 kB
/media/hlsjs-video 140.07 kB
/media/mux-audio 162.56 kB
/media/mux-video 162.63 kB
/media/native-hls-video 7.41 kB
/media/simple-hls-audio-only 15.56 kB
/media/simple-hls-video 17.14 kB
/media/vimeo-video 10.58 kB
Skins (27)
Entry Type Initial
/tailwind.css css 161 B
/video/minimal-skin.css css 5.55 kB
/video/skin.css css 5.52 kB
/video/minimal-skin js 38.65 kB
/video/minimal-skin.tailwind js 44.67 kB
/video/skin js 38.25 kB
/video/skin.tailwind js 44.31 kB
/audio/minimal-skin.css css 3.79 kB
/audio/skin.css css 3.68 kB
/audio/minimal-skin js 31.56 kB
/audio/minimal-skin.tailwind js 33.75 kB
/audio/skin js 31.48 kB
/audio/skin.tailwind js 35.73 kB
/background/skin.css css 90 B
/background/skin js 272 B
/live-video/minimal-skin.css css 5.55 kB
/live-video/skin.css css 5.52 kB
/live-video/minimal-skin js 33.42 kB
/live-video/minimal-skin.tailwind js 39.37 kB
/live-video/skin js 33.43 kB
/live-video/skin.tailwind js 39.43 kB
/live-audio/minimal-skin.css css 3.79 kB
/live-audio/skin.css css 3.68 kB
/live-audio/minimal-skin js 22.45 kB
/live-audio/minimal-skin.tailwind js 25.59 kB
/live-audio/skin js 22.52 kB
/live-audio/skin.tailwind js 25.65 kB
UI Components (33)
Entry Initial
/ui/airplay-button 2.22 kB
/ui/alert-dialog 2.16 kB
/ui/audio-track 2.14 kB
/ui/buffering-indicator 2.13 kB
/ui/captions-button 2.23 kB
/ui/captions-radio-group 2.11 kB
/ui/cast-button 2.20 kB
/ui/controls 2.06 kB
/ui/error-dialog 2.27 kB
/ui/fullscreen-button 2.21 kB
/ui/gesture 2.29 kB
/ui/hotkey 2.21 kB
/ui/live-button 2.15 kB
/ui/menu 2.29 kB
/ui/mute-button 2.24 kB
/ui/pip-button 2.23 kB
/ui/play-button 2.22 kB
/ui/playback-rate 2.13 kB
/ui/playback-rate-button 2.22 kB
/ui/popover 2.67 kB
/ui/poster 2.03 kB
/ui/quality 2.08 kB
/ui/seek-button 2.22 kB
/ui/seek-indicator 2.10 kB
/ui/slider 2.27 kB
/ui/status-announcer 2.16 kB
/ui/status-indicator 2.09 kB
/ui/thumbnail 2.03 kB
/ui/time 2.08 kB
/ui/time-slider 2.22 kB
/ui/tooltip 2.63 kB
/ui/volume-indicator 2.09 kB
/ui/volume-slider 2.21 kB

Sizes are marginal over the root entry point.

🧩 @videojs/core — no changes
Entries (14)
Entry Initial
. 9.40 kB
/dom 17.58 kB
/dom/media/custom-media-element 2.09 kB
/dom/media/dash 208.96 kB
/dom/media/google-cast 4.04 kB
/dom/media/hls-js 136.00 kB
/dom/media/media-host 1.25 kB
/dom/media/media-played-ranges 576 B
/dom/media/mux 151.37 kB
/dom/media/native-hls 3.07 kB
/dom/media/simple-hls 16.49 kB
/dom/media/simple-hls-audio-only 14.92 kB
/dom/media/vimeo 9.86 kB
/media/predicate 563 B
🏷️ @videojs/element — no changes
Entries (2)
Entry Initial
. 996 B
/context 943 B
📦 @videojs/store — no changes
Entries (3)
Entry Initial
. 1.39 kB
/html 696 B
/react 360 B
🔧 @videojs/utils — no changes
Entries (10)
Entry Initial
/array 104 B
/dom 2.26 kB
/events 319 B
/function 327 B
/object 275 B
/predicate 265 B
/string 231 B
/style 190 B
/time 478 B
/number 158 B
📦 @videojs/spf — no changes
Entries (4)
Entry Initial
. 4.45 kB
/dom 6.33 kB
/hls 15.37 kB
/background-video 12.85 kB

ℹ️ How to interpret

JS sizes are initial static graph totals (minified + brotli). Lazy dynamic chunks are shown separately when present.

Icon Meaning
No change
🔺 Increased ≤ 10%
🔴 Increased > 10%
🔽 Decreased
🆕 New (no baseline)

Run pnpm size locally to check current initial sizes.

@decepulis decepulis marked this pull request as ready for review July 7, 2026 18:48
@decepulis decepulis requested a review from luwes July 7, 2026 18:51
@decepulis decepulis merged commit c3d70e5 into main Jul 7, 2026
26 checks passed
@decepulis decepulis deleted the claude/google-cast-sidebar-position-ulfcla-kq2mzx branch July 7, 2026 19:27
decepulis added a commit that referenced this pull request Jul 7, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants