mirror of
https://github.com/zoriya/v10.git
synced 2026-08-16 02:45:09 +00:00
feat(packages): airplay button (#1531)
This commit is contained in:
Santiago Puppo
@@ -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>
|
||||
@@ -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);
|
||||
}
|
||||
@@ -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>
|
||||
@@ -0,0 +1,2 @@
|
||||
import '@videojs/html/video/player';
|
||||
import '@videojs/html/ui/airplay-button';
|
||||
@@ -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);
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,127 @@
|
||||
---
|
||||
title: AirplayButton
|
||||
frameworkTitle:
|
||||
html: media-airplay-button
|
||||
description: Accessible AirPlay toggle button that opens the WebKit playback target picker and reflects session state
|
||||
---
|
||||
|
||||
import ComponentReference from "@/components/docs/api-reference/ComponentReference.astro";
|
||||
import DocsLink from "@/components/docs/DocsLink.astro";
|
||||
import FrameworkCase from "@/components/docs/FrameworkCase.astro";
|
||||
import StyleCase from "@/components/docs/StyleCase.astro";
|
||||
import Demo from "@/components/docs/demos/Demo.astro";
|
||||
|
||||
{/* React demos */}
|
||||
import BasicUsageDemoReact from "@/components/docs/demos/airplay-button/react/css/BasicUsage";
|
||||
import basicUsageReactTsx from "@/components/docs/demos/airplay-button/react/css/BasicUsage.tsx?raw";
|
||||
import basicUsageReactCss from "@/components/docs/demos/airplay-button/react/css/BasicUsage.css?raw";
|
||||
|
||||
{/* HTML demos */}
|
||||
import BasicUsageDemoHtml from "@/components/docs/demos/airplay-button/html/css/BasicUsage.astro";
|
||||
import basicUsageHtml from "@/components/docs/demos/airplay-button/html/css/BasicUsage.html?raw";
|
||||
import basicUsageHtmlCss from "@/components/docs/demos/airplay-button/html/css/BasicUsage.css?raw";
|
||||
import basicUsageHtmlTs from "@/components/docs/demos/airplay-button/html/css/BasicUsage.ts?raw";
|
||||
|
||||
## Anatomy
|
||||
|
||||
<FrameworkCase frameworks={["react"]}>
|
||||
```tsx
|
||||
<AirplayButton />
|
||||
```
|
||||
</FrameworkCase>
|
||||
|
||||
<FrameworkCase frameworks={["html"]}>
|
||||
```html
|
||||
<media-airplay-button></media-airplay-button>
|
||||
```
|
||||
</FrameworkCase>
|
||||
|
||||
## Behavior
|
||||
|
||||
Opens the WebKit AirPlay playback target picker and reflects session state. AirPlay is a WebKit-only feature, so the button reports `availability: "unsupported"` outside Safari (macOS and iOS). On supported platforms availability flips to `"available"` once Safari discovers at least one AirPlay receiver on the local network, and `"unavailable"` otherwise.
|
||||
|
||||
The toggle is a no-op unless `availability` is `"available"` — clicking the button while `"unsupported"` or `"unavailable"` will not open the picker. Style the button accordingly (see [Styling](#styling) below) so its appearance matches its actual behavior.
|
||||
|
||||
The component consumes the unified <DocsLink slug="reference/feature-remote-playback">`remotePlayback`</DocsLink> store feature alongside `CastButton`: both buttons drive their state from the same feature, but each only surfaces on its supported platform (WebKit for AirPlay, Chromium for Cast).
|
||||
|
||||
WebKit does not expose a `"connecting"` intermediate state — `airplayState` flips directly between `"disconnected"` and `"connected"` when the AirPlay session changes. When connected, the picker itself acts as the disconnect UI.
|
||||
|
||||
## Styling
|
||||
|
||||
| Attribute | Values | Description |
|
||||
|-----------|--------|-------------|
|
||||
| `data-airplay-state` | `"disconnected"` \| `"connecting"` \| `"connected"` | Current AirPlay session state |
|
||||
| `data-availability` | `"available"` \| `"unavailable"` \| `"unsupported"` | Whether AirPlay is reachable on the current platform |
|
||||
|
||||
Use `data-airplay-state` to swap icons or labels based on the session state:
|
||||
|
||||
<FrameworkCase frameworks={["html"]}>
|
||||
```css
|
||||
/* AirPlay active */
|
||||
media-airplay-button[data-airplay-state="connected"] {
|
||||
color: var(--accent);
|
||||
}
|
||||
```
|
||||
</FrameworkCase>
|
||||
|
||||
<FrameworkCase frameworks={["react"]}>
|
||||
React renders a `<button>` element. Add a `className` and use it as the selector:
|
||||
|
||||
```css
|
||||
/* AirPlay active */
|
||||
.airplay-button[data-airplay-state="connected"] {
|
||||
color: var(--accent);
|
||||
}
|
||||
```
|
||||
</FrameworkCase>
|
||||
|
||||
Consider hiding the button on platforms where AirPlay isn't supported:
|
||||
|
||||
<FrameworkCase frameworks={["html"]}>
|
||||
```css
|
||||
media-airplay-button[data-availability="unsupported"] {
|
||||
display: none;
|
||||
}
|
||||
```
|
||||
</FrameworkCase>
|
||||
|
||||
<FrameworkCase frameworks={["react"]}>
|
||||
```css
|
||||
.airplay-button[data-availability="unsupported"] {
|
||||
display: none;
|
||||
}
|
||||
```
|
||||
</FrameworkCase>
|
||||
|
||||
## Accessibility
|
||||
|
||||
Renders a `<button>` with an automatic `aria-label`: "Start AirPlay" when disconnected, "Stop AirPlay" when connected. (The component also supports a `"Connecting"` label, but WebKit AirPlay never emits a `connecting` state, so that label is unreachable in practice.) Override with the `label` prop — either a string or a function that receives the current state. Keyboard activation: <kbd>Enter</kbd> / <kbd>Space</kbd>.
|
||||
|
||||
## Examples
|
||||
|
||||
### Basic Usage
|
||||
|
||||
<FrameworkCase frameworks={["react"]}>
|
||||
<StyleCase styles={["css"]}>
|
||||
<Demo files={[
|
||||
{ title: "App.tsx", code: basicUsageReactTsx, lang: "tsx" },
|
||||
{ title: "App.css", code: basicUsageReactCss, lang: "css" },
|
||||
]}>
|
||||
<BasicUsageDemoReact client:idle />
|
||||
</Demo>
|
||||
</StyleCase>
|
||||
</FrameworkCase>
|
||||
|
||||
<FrameworkCase frameworks={["html"]}>
|
||||
<StyleCase styles={["css"]}>
|
||||
<Demo files={[
|
||||
{ title: "index.html", code: basicUsageHtml, lang: "html" },
|
||||
{ title: "index.css", code: basicUsageHtmlCss, lang: "css" },
|
||||
{ title: "index.ts", code: basicUsageHtmlTs, lang: "ts" },
|
||||
]}>
|
||||
<BasicUsageDemoHtml />
|
||||
</Demo>
|
||||
</StyleCase>
|
||||
</FrameworkCase>
|
||||
|
||||
<ComponentReference component="AirplayButton" />
|
||||
@@ -7,7 +7,7 @@ import FeatureReference from "@/components/docs/api-reference/FeatureReference.a
|
||||
import DocsLink from "@/components/docs/DocsLink.astro";
|
||||
import FrameworkCase from "@/components/docs/FrameworkCase.astro";
|
||||
|
||||
Controls remote playback to devices like Chromecast. Exits fullscreen before initiating a remote playback session.
|
||||
Controls remote playback to devices like Chromecast (Chromium) and AirPlay (Safari). Exits fullscreen before initiating a remote playback session.
|
||||
|
||||
<FeatureReference feature="remotePlayback" />
|
||||
|
||||
|
||||
@@ -55,6 +55,7 @@ export const sidebar: Sidebar = [
|
||||
{ slug: 'reference/player-provider' },
|
||||
{ slug: 'reference/player-container' },
|
||||
// sorted alphabetically
|
||||
{ slug: 'reference/airplay-button' },
|
||||
{ slug: 'reference/buffering-indicator' },
|
||||
{ slug: 'reference/captions-button' },
|
||||
{ slug: 'reference/controls' },
|
||||
|
||||
Reference in New Issue
Block a user