npm - @videojs/react - Versions diffs - 10.0.0-rc.1 → 10.0.0-rc.3 - Mend

@videojs/react 10.0.0-rc.1 → 10.0.0-rc.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (2773) hide show

package/docs/reference/cast-button.md DELETED Viewed

@@ -1,285 +0,0 @@
-# CastButton
-Accessible Cast toggle button with state reflection and keyboard support
-## Import
-tsx
-```
-import { CastButton } from '@videojs/react';
-```
-## Anatomy
-tsx
-```
-<CastButton />
-```
-## Behavior
-Toggles a Google Cast session. Clicking the button while `disconnected` opens the Cast device picker; clicking while `connected` ends the session.
-The button derives its presentation from `availability`:
-*   **`"unsupported"`** — the HTML custom element receives the native `hidden` attribute; the React component returns `null`.
-*   **`"unavailable"`** — the button remains visible and focusable with `aria-disabled="true"` and `data-disabled`, but does not open the picker. This lets a tooltip explain that no Cast device is reachable.
-*   **`"available"`** — the button is fully interactive unless the `disabled` prop is set.
-Configurable Cast sessions come from the [GoogleCast extension](./google-cast.md). Add it to the player next to your media element; without it the button drives the browser’s native Remote Playback API instead, which offers no receiver or load-request configuration. See [Cast to AirPlay and Chromecast](../how-to/cast-to-airplay-and-chromecast.md) for the complete setup.
-## Styling
-Style based on cast and disabled state:
-React renders a `<button>` element. Add a `className` to style it:
-css
-```
-/* During an active session */
-.cast-button[data-cast-state="connected"] {
-  color: blue;
-}
-/* Cast is supported, but no device is reachable */
-.cast-button[data-disabled] {
-  cursor: not-allowed;
-  opacity: 0.5;
-}
-```
-Unsupported buttons are hidden automatically. No availability selector or extra hiding CSS is required.
-## Accessibility
-Renders a `<button>` with an automatic `aria-label`:
-Cast state
-Default label
-`'disconnected'`
-“Start casting”
-`'connecting'`
-“Connecting”
-`'connected'`
-“Stop casting”
-Override with the `label` prop. Keyboard activation: Enter / Space.
-## Examples
-### Basic Usage
-App.tsx
-App.css
-```
-import { CastButton, Container, createPlayer } from '@videojs/react';
-import { GoogleCast } from '@videojs/react/extensions/google-cast';
-import { HlsJsVideo } from '@videojs/react/media/hlsjs-video';
-import { videoFeatures } from '@videojs/react/video';
-const { Player } = createPlayer({ features: videoFeatures });
-export default function BasicUsage() {
-  return (
-    <Player>
-      <Container className="media-container">
-        <HlsJsVideo src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM.m3u8" autoPlay muted playsInline loop />
-        <GoogleCast />
-        <CastButton
-          className="media-cast-button"
-          render={(props, state) => (
-            <button {...props}>{state.connection === 'connected' ? 'Stop casting' : 'Start casting'}</button>
-          )}
-        />
-      </Container>
-    </Player>
-  );
-}
-```
-```
-.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-disabled] {
-  cursor: not-allowed;
-  opacity: 0.5;
-  filter: grayscale(1);
-}
-```
-## API Reference
-### Props
-Prop
-Type
-Default
-Details
-`disabled`
-`boolean`
-`false`
-▸
-Description
-Whether the button is disabled.
-`label`
-`object`
-`''`
-▸
-Description
-Custom label for the button.
-Type
-`{ key: string; text: string } | string | ((state: CastButtonState) => Text | string)`
-### State
-State is accessible via the `render`, `className`, and `style` props.
-Property
-Type
-Details
-`label`
-`{ key: string; text: string } | string`
-`connection`
-`'disconnected' | 'connecting' | 'conn...`
-▸
-Description
-Current cast connection state (`disconnected`, `connecting`, or `connected`).
-Type
-`'disconnected' | 'connecting' | 'connected'`
-`availability`
-`MediaFeatureAvailability`
-▸
-Description
-Whether casting is `available` (a device is reachable), `unavailable` (no device), or `unsupported`.
-`disabled`
-`boolean`
-▸
-Description
-Non-interactive but still focusable (mirrors `aria-disabled`).
-`hidden`
-`boolean`
-▸
-Description
-Whether the button is hidden because the feature is unsupported.
-### Data attributes
-Attribute
-Type
-Details
-`data-cast-state`
-`'disconnected' | 'connecting' | 'conn...`
-▸
-Description
-Current remote playback connection state.
-Type
-`'disconnected' | 'connecting' | 'connected'`
-`data-availability`
-`MediaFeatureAvailability`
-▸
-Description
-Whether remote playback can be requested on this platform.
-`data-disabled`
-▸
-Description
-Present when the button is non-interactive (mirrors `aria-disabled`).
-`data-hidden`
-▸
-Description
-Present when the button is hidden because the feature is unsupported.

package/docs/reference/cloudflare-video.md DELETED Viewed

@@ -1,237 +0,0 @@
-# CloudflareVideo
-Video component that plays Cloudflare Stream videos through the Stream player
-[Cloudflare Stream](https://developers.cloudflare.com/stream/) runs in an embedded player. Its own chrome stays hidden by default, so it drops into a [player skin](../concepts/skins.md) like any other media component; set `controls` to use Cloudflare’s UI instead.
-## Import
-bash
-```
-pnpm add @videojs/cloudflare-video
-```
-tsx
-```
-import { CloudflareVideo } from '@videojs/react/media/cloudflare-video';
-```
-## Load a source
-`src` takes a raw 32-character video UID, any `cloudflarestream.com` or `videodelivery.net` URL, or a signed token. Watch, embed, iframe, manifest, and thumbnail URLs all carry the UID in the same position, and a signed token stands in for the UID wherever one appears.
-tsx
-```
-<CloudflareVideo src="https://watch.videodelivery.net/bfbd585059e33391d67b0f1d15fe6ea4" />
-```
-## Signed playback
-For [signed URLs](https://developers.cloudflare.com/stream/viewing-videos/securing-your-stream/), pass the signed token wherever the UID would go: as the whole `src`, or inside a Stream URL. Keep your customer subdomain when your URLs name one. Cloudflare serves signed and access-controlled videos only from `customer-<code>.cloudflarestream.com`, so the element preserves that origin instead of collapsing it onto the shared host.
-## Behavior
-A few things work differently from a native `<video>` element, because the Stream embed doesn’t expose them:
-*   The embed owns text tracks: `textTracks` stays empty, and `engine.cloudflare.defaultTextTrack` picks the track to show.
-*   Picture-in-picture is unavailable, and the player reports it as unsupported.
-*   Fullscreen targets the iframe, so Cloudflare’s own chrome shows in fullscreen.
-*   `playsInline` has no effect: the Stream embed always plays inline.
-## Examples
-### Basic Usage
-App.tsx
-App.css
-```
-import { CloudflareVideo } from '@videojs/react/media/cloudflare-video';
-export default function BasicUsage() {
-  return (
-    <div className="cloudflare-video">
-      <CloudflareVideo src="https://watch.videodelivery.net/bfbd585059e33391d67b0f1d15fe6ea4" controls />
-    </div>
-  );
-}
-```
-```
-.cloudflare-video {
-  width: 100%;
-  aspect-ratio: 16 / 9;
-}
-```
-## API Reference
-### Props
-Accepts these Video.js-specific props:
-Prop
-Type
-Default
-Details
-`autoplay`
-`boolean`
-`false`
-`controls`
-`boolean`
-`false`
-`defaultMuted`
-`boolean`
-`false`
-`loop`
-`boolean`
-`false`
-`muted`
-`boolean`
-`false`
-`playsInline`
-`boolean`
-`true`
-`poster`
-`string`
-`''`
-`preload`
-`MediaPreloadType`
-`'metadata'`
-`source`
-`{ src?: string; engine?: CloudflareSourceEngineConfig } | null`
-`null`
-▸
-Description
-Structured source: `src` plus embed parameters under `engine.cloudflare`. Replacing it re-derives `src`.
-`src`
-`string`
-`''`
-### Engine options
-#### `source.engine.cloudflare`
-Pass [Stream player parameters](https://developers.cloudflare.com/stream/viewing-videos/using-the-stream-player/) under `source.engine.cloudflare`, spelled exactly as Cloudflare spells them, plus anything Cloudflare adds next. They’re serialized onto the embed URL untouched, and the embed reads them once, when its URL is built. [Media Sources](../concepts/media-sources.md) covers how engine options fit into a structured source.
-`controls`, `autoplay`, `loop`, `muted`, `preload`, and `poster` come from the props of the same name, so they have no `engine.cloudflare` spelling.
-tsx
-```
-<CloudflareVideo
-  source={{
-    src: 'bfbd585059e33391d67b0f1d15fe6ea4',
-    engine: { cloudflare: { primaryColor: '#f03e3e', startTime: '5m30s' } },
-  }}
-/>
-```
-Option
-Type
-Details
-`ad-url`
-`string | undefined`
-▸
-Description
-VAST tag to play as a pre-roll ad. Reported through the `stream-ad*` events.
-`defaultTextTrack`
-`string | undefined`
-▸
-Description
-BCP 47 language of the text track to show by default (`'en'`, `'de'`).
-`letterboxColor`
-`string | undefined`
-▸
-Description
-Any CSS color for the letterbox bars around a video that does not fill the player.
-`primaryColor`
-`string | undefined`
-▸
-Description
-Any CSS color for the progress bar and other player accents.
-`referrerPolicy`
-`ReferrerPolicy | undefined`
-▸
-Description
-`referrerpolicy` for the embed iframe. Not a Cloudflare player parameter.
-`startTime`
-`number | string | undefined`
-▸
-Description
-Where playback starts, in seconds or as a time string (`'5m30s'`).
-### Ref
-Forwards its ref to the rendered `<iframe>`. The ref is an [HTMLIFrameElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLIFrameElement). Control playback with the component props and player APIs rather than the iframe ref.