@videojs/react 10.0.0-beta.22 → 10.0.0-beta.24

package/docs/reference/feature-error.md

@@ -0,0 +1,65 @@
+# Error
+
+Media error state and actions for the player store
+
+Tracks media errors.
+
+## API Reference
+
+### State
+
+Property
+
+Type
+
+Details
+
+`error`
+
+`null | MediaError`
+
+▸
+
+Description
+
+The current media error, or null if none.
+
+### Actions
+
+Action
+
+Type
+
+Details
+
+`dismissError`
+
+`() => void`
+
+▸
+
+Description
+
+Dismiss the current error by clearing it.
+
+### Selector
+
+Pass `selectError` to [`usePlayer`](./use-player.md) to subscribe to error state. Returns `undefined` if the error feature is not configured.
+
+ErrorDisplay.tsx
+
+```
+import { selectError, usePlayer } from '@videojs/react';
+
+function ErrorDisplay() {
+  const err = usePlayer(selectError);
+  if (!err?.error) return null;
+
+  return (
+    <div>
+      <p>{err.error.message}</p>
+      <button onClick={err.dismissError}>Dismiss</button>
+    </div>
+  );
+}
+```

package/docs/reference/feature-fullscreen.md

@@ -0,0 +1,94 @@
+# Fullscreen
+
+Fullscreen state and actions for the player store
+
+Controls fullscreen mode. Tries the container element first, falls back to the media element.
+
+## API Reference
+
+### State
+
+Property
+
+Type
+
+Details
+
+`fullscreen`
+
+`boolean`
+
+▸
+
+Description
+
+Whether fullscreen mode is currently active.
+
+`fullscreenAvailability`
+
+`'available' | 'unavailable' | 'unsupported'`
+
+▸
+
+Description
+
+Whether fullscreen can be requested on this platform.
+
+### Actions
+
+Action
+
+Type
+
+Details
+
+`requestFullscreen`
+
+`() => Promise<void>`
+
+▸
+
+Description
+
+Enter fullscreen mode. Tries container first, falls back to media element.
+
+`exitFullscreen`
+
+`() => Promise<void>`
+
+▸
+
+Description
+
+Exit fullscreen mode.
+
+`toggleFullscreen`
+
+`() => Promise<void>`
+
+▸
+
+Description
+
+Toggle fullscreen mode.
+
+### Selector
+
+Pass `selectFullscreen` to [`usePlayer`](./use-player.md) to subscribe to fullscreen state. Returns `undefined` if the fullscreen feature is not configured.
+
+FullscreenButton.tsx
+
+```
+import { selectFullscreen, usePlayer } from '@videojs/react';
+
+function FullscreenButton() {
+  const fs = usePlayer(selectFullscreen);
+  if (!fs || fs.availability !== 'available') return null;
+
+  return (
+    <button onClick={fs.toggle}>
+      {fs.active ? 'Exit fullscreen' : 'Fullscreen'}
+    </button>
+  );
+}
+```

package/docs/reference/feature-live.md

@@ -0,0 +1,62 @@
+# Live
+
+Live edge state for the player store
+
+Exposes live-edge state so components can render a “jump to live” button, detect DVR vs. standard live, or hide live-only UI for on-demand sources.
+
+`liveEdgeStart` is the presentation time at which the Live Edge Window begins — playback is “at the live edge” when `currentTime >= liveEdgeStart`. `targetLiveWindow` reports the seekable range size: `0` for standard latency live, `Infinity` for DVR, `NaN` for on-demand or unknown. Both values are `NaN` when the media doesn’t expose live-edge state (anything other than an HLS source today).
+
+The live feature is included by the `liveVideoFeatures` and `liveAudioFeatures` presets; apps that build a custom preset can compose it in directly.
+
+## API Reference
+
+### State
+
+Property
+
+Type
+
+Details
+
+`liveEdgeStart`
+
+`number`
+
+▸
+
+Description
+
+Presentation time marking the start of the Live Edge Window.
+
+Playing at the live edge when `currentTime >= liveEdgeStart`. `NaN` when the stream isn't live or the value is unknown.
+
+`targetLiveWindow`
+
+`number`
+
+▸
+
+Description
+
+Offset representing the seekable range size for live content.
+
+`0` for standard latency live, `Infinity` for DVR, `NaN` for on-demand or unknown.
+
+### Selector
+
+Pass `selectLive` to [`usePlayer`](./use-player.md) to subscribe to live state. Returns `undefined` if the live feature is not configured.
+
+LiveEdgeIndicator.tsx
+
+```
+import { selectLive, selectTime, usePlayer } from '@videojs/react';
+
+function LiveEdgeIndicator() {
+  const live = usePlayer(selectLive);
+  const time = usePlayer(selectTime);
+  if (!live || Number.isNaN(live.targetLiveWindow)) return null;
+
+  const atEdge = time != null && time.currentTime >= live.liveEdgeStart;
+  return <span className="live-indicator">{atEdge ? 'LIVE' : 'BEHIND LIVE'}</span>;
+}
+```

package/docs/reference/feature-pip.md

@@ -0,0 +1,94 @@
+# Picture-in-picture
+
+Picture-in-picture state and actions for the player store
+
+Controls picture-in-picture mode.
+
+## API Reference
+
+### State
+
+Property
+
+Type
+
+Details
+
+`pip`
+
+`boolean`
+
+▸
+
+Description
+
+Whether picture-in-picture mode is currently active.
+
+`pipAvailability`
+
+`'available' | 'unavailable' | 'unsupported'`
+
+▸
+
+Description
+
+Whether picture-in-picture can be requested on this platform.
+
+### Actions
+
+Action
+
+Type
+
+Details
+
+`requestPictureInPicture`
+
+`() => Promise<void>`
+
+▸
+
+Description
+
+Enter picture-in-picture mode.
+
+`exitPictureInPicture`
+
+`() => Promise<void>`
+
+▸
+
+Description
+
+Exit picture-in-picture mode.
+
+`togglePictureInPicture`
+
+`() => Promise<void>`
+
+▸
+
+Description
+
+Toggle picture-in-picture mode.
+
+### Selector
+
+Pass `selectPiP` to [`usePlayer`](./use-player.md) to subscribe to picture-in-picture state. Returns `undefined` if the PiP feature is not configured.
+
+PiPButton.tsx
+
+```
+import { selectPiP, usePlayer } from '@videojs/react';
+
+function PiPButton() {
+  const pip = usePlayer(selectPiP);
+  if (!pip || pip.availability !== 'available') return null;
+
+  return (
+    <button onClick={pip.toggle}>
+      {pip.active ? 'Exit PiP' : 'Picture-in-Picture'}
+    </button>
+  );
+}
+```

package/docs/reference/feature-playback-rate.md

@@ -0,0 +1,70 @@
+# Playback rate
+
+Playback speed state and actions for the player store
+
+Controls speed of playback.
+
+## API Reference
+
+### State
+
+Property
+
+Type
+
+Details
+
+`playbackRates`
+
+`readonly number[]`
+
+▸
+
+Description
+
+Available playback rates.
+
+`playbackRate`
+
+`number`
+
+▸
+
+Description
+
+Current playback rate.
+
+### Actions
+
+Action
+
+Type
+
+Details
+
+`setPlaybackRate`
+
+`(rate: number) => void`
+
+▸
+
+Description
+
+Set the playback rate.
+
+### Selector
+
+Pass `selectPlaybackRate` to [`usePlayer`](./use-player.md) to subscribe to playback rate state. Returns `undefined` if the playback rate feature is not configured.
+
+RateDisplay.tsx
+
+```
+import { selectPlaybackRate, usePlayer } from '@videojs/react';
+
+function RateDisplay() {
+  const rate = usePlayer(selectPlaybackRate);
+  if (!rate) return null;
+
+  return <span>{rate.playbackRate}x</span>;
+}
+```

package/docs/reference/feature-playback.md

@@ -0,0 +1,109 @@
+# Playback
+
+Play/pause state and actions for the player store
+
+Controls play/pause state and tracks whether playback has started or is stalled.
+
+## API Reference
+
+### State
+
+Property
+
+Type
+
+Details
+
+`paused`
+
+`boolean`
+
+▸
+
+Description
+
+Whether playback is paused.
+
+`ended`
+
+`boolean`
+
+▸
+
+Description
+
+Whether playback has reached the end.
+
+`started`
+
+`boolean`
+
+▸
+
+Description
+
+Whether playback has started (played or seeked).
+
+`waiting`
+
+`boolean`
+
+▸
+
+Description
+
+Whether playback is stalled waiting for data.
+
+### Actions
+
+Action
+
+Type
+
+Details
+
+`play`
+
+`() => Promise<void>`
+
+▸
+
+Description
+
+Start playback.
+
+`pause`
+
+`() => void`
+
+▸
+
+Description
+
+Pause playback.
+
+`togglePaused`
+
+`() => boolean`
+
+▸
+
+Description
+
+Toggle play/pause. Returns `true` if playback started.
+
+### Selector
+
+Pass `selectPlayback` to [`usePlayer`](./use-player.md) to subscribe to playback state. Returns `undefined` if the playback feature is not configured.
+
+PlayButton.tsx
+
+```
+import { selectPlayback, usePlayer } from '@videojs/react';
+
+function PlayButton() {
+  const playback = usePlayer(selectPlayback);
+  if (!playback) return null;
+  return <button onClick={playback.togglePaused}>{playback.paused ? 'Play' : 'Pause'}</button>;
+}
+```

package/docs/reference/feature-remote-playback.md

@@ -0,0 +1,74 @@
+# Remote Playback
+
+Remote playback state and actions for the player store
+
+Controls remote playback to devices like Chromecast. Exits fullscreen before initiating a remote playback session.
+
+## API Reference
+
+### State
+
+Property
+
+Type
+
+Details
+
+`remotePlaybackState`
+
+`'disconnected' | 'connecting' | 'connected'`
+
+▸
+
+Description
+
+Current remote playback connection state.
+
+`remotePlaybackAvailability`
+
+`'available' | 'unavailable' | 'unsupported'`
+
+▸
+
+Description
+
+Whether remote playback can be requested on this platform.
+
+### Actions
+
+Action
+
+Type
+
+Details
+
+`toggleRemotePlayback`
+
+`() => Promise<void>`
+
+▸
+
+Description
+
+Toggle the remote playback connection.
+
+### Selector
+
+Pass `selectRemotePlayback` to [`usePlayer`](./use-player.md) to subscribe to remote playback state. Returns `undefined` if the remote playback feature is not configured.
+
+CastButton.tsx
+
+```
+import { selectRemotePlayback, usePlayer } from '@videojs/react';
+
+function CastButton() {
+  const remotePlayback = usePlayer(selectRemotePlayback);
+  if (!remotePlayback || remotePlayback.remotePlaybackAvailability !== 'available') return null;
+
+  return (
+    <button onClick={remotePlayback.toggleRemotePlayback}>
+      {remotePlayback.remotePlaybackState === 'connected' ? 'Disconnect' : 'Cast'}
+    </button>
+  );
+}
+```

package/docs/reference/feature-source.md

@@ -0,0 +1,70 @@
+# Source
+
+Media source state and actions for the player store
+
+Tracks the current media source and readiness.
+
+## API Reference
+
+### State
+
+Property
+
+Type
+
+Details
+
+`source`
+
+`null | string`
+
+▸
+
+Description
+
+Current media source URL (null if none).
+
+`canPlay`
+
+`boolean`
+
+▸
+
+Description
+
+Whether enough data is loaded to begin playback.
+
+### Actions
+
+Action
+
+Type
+
+Details
+
+`loadSource`
+
+`(src: string) => string`
+
+▸
+
+Description
+
+Load a new media source. Returns the new source URL.
+
+### Selector
+
+Pass `selectSource` to [`usePlayer`](./use-player.md) to subscribe to source state. Returns `undefined` if the source feature is not configured.
+
+SourceInfo.tsx
+
+```
+import { selectSource, usePlayer } from '@videojs/react';
+
+function SourceInfo() {
+  const source = usePlayer(selectSource);
+  if (!source) return null;
+
+  return <span>{source.src}</span>;
+}
+```

package/docs/reference/feature-stream-type.md

@@ -0,0 +1,46 @@
+# Stream type
+
+Stream delivery type (live / on-demand) state for the player store
+
+Tracks the current stream delivery type so components can toggle live-specific UI (a live indicator, “jump to live edge” affordance, hiding the time display, etc.).
+
+When the media exposes its own `streamType` (e.g. HLS sources derive it from the manifest), the feature syncs on `streamtypechange`. For plain media elements without that capability, it falls back to duration-based detection: an infinite `duration` reports `'live'`, a finite positive `duration` reports `'on-demand'`, and anything else reports `'unknown'`.
+
+## API Reference
+
+### State
+
+Property
+
+Type
+
+Details
+
+`streamType`
+
+`'on-demand' | 'live' | 'unknown'`
+
+▸
+
+Description
+
+Current stream delivery type.
+
+Components use this to toggle live-specific UI (e.g. a live indicator, a "jump to live edge" affordance, or hiding the time display).
+
+### Selector
+
+Pass `selectStreamType` to [`usePlayer`](./use-player.md) to subscribe to stream type state. Returns `undefined` if the stream type feature is not configured.
+
+LiveIndicator.tsx
+
+```
+import { selectStreamType, usePlayer } from '@videojs/react';
+
+function LiveIndicator() {
+  const stream = usePlayer(selectStreamType);
+  if (stream?.streamType !== 'live') return null;
+
+  return <span className="live-indicator">LIVE</span>;
+}
+```