feat(packages): airplay button (#1531)

site/src/components/docs/demos/airplay-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/airplay-button/html/css/BasicUsage.css

@@ -0,0 +1,57 @@
+.video-player {
+  position: relative;
+  display: block;
+}
+
+.video-player video {
+  width: 100%;
+}
+
+.media-airplay-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-airplay-button .connected,
+.media-airplay-button .not-connected,
+.media-airplay-button .no-devices,
+.media-airplay-button .unsupported {
+  display: none;
+}
+
+/* Connected: AirPlay active */
+.media-airplay-button[data-airplay-state="connected"] .connected {
+  display: inline;
+}
+
+/* Available, not connected: ready to AirPlay */
+.media-airplay-button:not([data-airplay-state="connected"])[data-availability="available"] .not-connected {
+  display: inline;
+}
+
+/* Platform supports AirPlay but no receivers are visible. */
+.media-airplay-button[data-availability="unavailable"] .no-devices {
+  display: inline;
+}
+
+/* AirPlay not supported on this platform. */
+.media-airplay-button[data-availability="unsupported"] .unsupported {
+  display: inline;
+}
+
+/* Inactive states: the toggle is a no-op unless availability is "available". */
+.media-airplay-button[data-availability="unavailable"],
+.media-airplay-button[data-availability="unsupported"] {
+  cursor: not-allowed;
+  opacity: 0.5;
+  filter: grayscale(1);
+}

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

@@ -0,0 +1,12 @@
+<video-player class="video-player">
+    <media-container>
+        <video src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4" autoplay muted
+            playsinline loop></video>
+        <media-airplay-button class="media-airplay-button">
+            <span class="connected">Stop AirPlay</span>
+            <span class="not-connected">Start AirPlay</span>
+            <span class="no-devices">No AirPlay devices found</span>
+            <span class="unsupported">AirPlay not supported</span>
+        </media-airplay-button>
+    </media-container>
+</video-player>

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

@@ -0,0 +1,2 @@
+import '@videojs/html/video/player';
+import '@videojs/html/ui/airplay-button';

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

@@ -0,0 +1,29 @@
+.media-container {
+  position: relative;
+}
+
+.media-container video {
+  width: 100%;
+}
+
+.media-airplay-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);
+}
+
+/* Inactive states: the toggle is a no-op unless availability is "available". */
+.media-airplay-button[data-availability="unavailable"],
+.media-airplay-button[data-availability="unsupported"] {
+  cursor: not-allowed;
+  opacity: 0.5;
+  filter: grayscale(1);
+}

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

@@ -0,0 +1,34 @@
+import { AirplayButton, createPlayer } from '@videojs/react';
+import { Video, videoFeatures } from '@videojs/react/video';
+
+const Player = createPlayer({ features: videoFeatures });
+
+export default function BasicUsage() {
+  return (
+    <Player.Provider>
+      <Player.Container className="media-container">
+        <Video
+          src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
+          autoPlay
+          muted
+          playsInline
+          loop
+        />
+        <AirplayButton
+          className="media-airplay-button"
+          render={(props, state) => {
+            const label =
+              state.availability === 'unsupported'
+                ? 'AirPlay not supported'
+                : state.airplayState === 'connected'
+                  ? 'Stop AirPlay'
+                  : state.availability === 'unavailable'
+                    ? 'No AirPlay devices found'
+                    : 'Start AirPlay';
+            return <button {...props}>{label}</button>;
+          }}
+        />
+      </Player.Container>
+    </Player.Provider>
+  );
+}