docs(site): add Google Cast documentation (#1681)

Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>

site/src/components/docs/demos/cast-button/html/css/BasicUsage.astro

@@ -0,0 +1,9 @@
+---
+import HtmlDemo from '@/components/docs/demos/HtmlDemo.astro';
+import html from './BasicUsage.html?raw';
+---
+
+<HtmlDemo html={html} />
+<script>
+  import "./BasicUsage.ts";
+</script>

site/src/components/docs/demos/cast-button/html/css/BasicUsage.css

@@ -0,0 +1,39 @@
+.video-player {
+  position: relative;
+  display: block;
+}
+
+.video-player video {
+  width: 100%;
+}
+
+.media-cast-button {
+  position: absolute;
+  right: 10px;
+  bottom: 10px;
+  padding-block: 8px;
+  padding-inline: 20px;
+  color: black;
+  cursor: pointer;
+  background: rgba(255, 255, 255, 0.7);
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  border-radius: 9999px;
+  backdrop-filter: blur(10px);
+}
+
+.media-cast-button[data-availability="unsupported"] {
+  display: none;
+}
+
+.media-cast-button .connected {
+  display: none;
+}
+.media-cast-button .disconnected {
+  display: none;
+}
+.media-cast-button[data-cast-state="connected"] .connected {
+  display: inline;
+}
+.media-cast-button:not([data-cast-state="connected"]) .disconnected {
+  display: inline;
+}

site/src/components/docs/demos/cast-button/html/css/BasicUsage.html

@@ -0,0 +1,15 @@
+<video-player class="video-player">
+    <media-container>
+        <hls-video
+            src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM.m3u8"
+            autoplay
+            muted
+            playsinline
+            loop
+        ></hls-video>
+        <media-cast-button class="media-cast-button">
+            <span class="connected">Stop casting</span>
+            <span class="disconnected">Start casting</span>
+        </media-cast-button>
+    </media-container>
+</video-player>

site/src/components/docs/demos/cast-button/html/css/BasicUsage.ts

@@ -0,0 +1,3 @@
+import '@videojs/html/video/player';
+import '@videojs/html/media/hls-video';
+import '@videojs/html/ui/cast-button';

site/src/components/docs/demos/cast-button/react/css/BasicUsage.css

@@ -0,0 +1,25 @@
+.media-container {
+  position: relative;
+}
+
+.media-container video {
+  width: 100%;
+}
+
+.media-cast-button {
+  position: absolute;
+  right: 10px;
+  bottom: 10px;
+  padding-block: 8px;
+  padding-inline: 20px;
+  color: black;
+  cursor: pointer;
+  background: rgba(255, 255, 255, 0.7);
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  border-radius: 9999px;
+  backdrop-filter: blur(10px);
+}
+
+.media-cast-button[data-availability="unsupported"] {
+  display: none;
+}

site/src/components/docs/demos/cast-button/react/css/BasicUsage.tsx

@@ -0,0 +1,27 @@
+import { CastButton, createPlayer } from '@videojs/react';
+import { HlsVideo } from '@videojs/react/media/hls-video';
+import { videoFeatures } from '@videojs/react/video';
+
+const Player = createPlayer({ features: videoFeatures });
+
+export default function BasicUsage() {
+  return (
+    <Player.Provider>
+      <Player.Container className="media-container">
+        <HlsVideo
+          src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM.m3u8"
+          autoPlay
+          muted
+          playsInline
+          loop
+        />
+        <CastButton
+          className="media-cast-button"
+          render={(props, state) => (
+            <button {...props}>{state.castState === 'connected' ? 'Stop casting' : 'Start casting'}</button>
+          )}
+        />
+      </Player.Container>
+    </Player.Provider>
+  );
+}