@videojs/react 10.0.0-beta.23 → 10.0.0-beta.25

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-quality.md

@@ -0,0 +1,70 @@
+# Quality
+
+Video rendition state and actions for the player store
+
+Tracks video renditions and selects a manual rendition or automatic adaptive bitrate.
+
+## API Reference
+
+### State
+
+Property
+
+Type
+
+Details
+
+`videoRenditionList`
+
+`MediaVideoRendition[]`
+
+▸
+
+Description
+
+Video renditions available for manual quality selection.
+
+`activeVideoRendition`
+
+`null | MediaVideoRendition`
+
+▸
+
+Description
+
+Video rendition currently playing, including when automatic ABR is selected.
+
+### Actions
+
+Action
+
+Type
+
+Details
+
+`selectVideoRendition`
+
+`(value: string) => void`
+
+▸
+
+Description
+
+Select a video rendition by menu value, or automatic ABR with `"auto"`.
+
+### Selector
+
+Pass `selectQuality` to [`usePlayer`](./use-player.md) to subscribe to quality state. Returns `undefined` if the quality feature is not configured.
+
+QualityInfo.tsx
+
+```
+import { selectQuality, usePlayer } from '@videojs/react';
+
+function QualityInfo() {
+  const quality = usePlayer(selectQuality);
+  if (!quality) return null;
+
+  return <span>{quality.videoRenditionList.length} renditions</span>;
+}
+```

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

@@ -0,0 +1,76 @@
+# Remote Playback
+
+Remote playback state and actions for the player store
+
+Controls remote playback to devices like Chromecast (Chromium) and AirPlay (Safari). Exits fullscreen before initiating a remote playback session.
+
+[Google Cast concept guide — setup, configuration, and HLS](../concepts/cast.md)
+
+## 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>;
+}
+```

package/docs/reference/feature-text-tracks.md

@@ -0,0 +1,114 @@
+# Text tracks
+
+Subtitles, captions, and chapter track state for the player store
+
+Manages subtitles, captions, chapters, and thumbnail tracks.
+
+## API Reference
+
+### State
+
+Property
+
+Type
+
+Details
+
+`chaptersCues`
+
+`MediaTextCue[]`
+
+▸
+
+Description
+
+Cues from the first `kind="chapters"` track.
+
+`thumbnailCues`
+
+`MediaTextCue[]`
+
+▸
+
+Description
+
+Cues from the first `kind="metadata" label="thumbnails"` track.
+
+`thumbnailTrackSrc`
+
+`null | string`
+
+▸
+
+Description
+
+The `<track>` element's `src` for resolving relative cue text URLs.
+
+`textTrackList`
+
+`MediaTextTrack<TextTrackKind>[]`
+
+▸
+
+Description
+
+All text tracks available on the media element.
+
+`subtitlesShowing`
+
+`boolean`
+
+▸
+
+Description
+
+Whether captions/subtitles are currently enabled.
+
+### Actions
+
+Action
+
+Type
+
+Details
+
+`toggleSubtitles`
+
+`(forceShow: boolean) => boolean`
+
+▸
+
+Description
+
+Toggle captions/subtitles visibility. Returns the new enabled value.
+
+`selectSubtitlesTrack`
+
+`(value: string) => void`
+
+▸
+
+Description
+
+Select a captions/subtitles track by menu value, or disable with `"off"`.
+
+### Selector
+
+Pass `selectTextTracks` to [`usePlayer`](./use-player.md) to subscribe to text track state. Returns `undefined` if the text tracks feature is not configured.
+
+CaptionsButton.tsx
+
+```
+import { selectTextTracks, usePlayer } from '@videojs/react';
+
+function CaptionsButton() {
+  const tracks = usePlayer(selectTextTracks);
+  if (!tracks) return null;
+
+  return (
+    <button onClick={() => tracks.toggleSubtitles()}>
+      {tracks.subtitlesShowing ? 'Hide captions' : 'Show captions'}
+    </button>
+  );
+}
+```

package/docs/reference/feature-time.md

@@ -0,0 +1,84 @@
+# Time
+
+Playback position and duration state for the player store
+
+Tracks playback position and duration.
+
+## API Reference
+
+### State
+
+Property
+
+Type
+
+Details
+
+`currentTime`
+
+`number`
+
+▸
+
+Description
+
+Current playback position in seconds.
+
+`duration`
+
+`number`
+
+▸
+
+Description
+
+Total duration in seconds (0 if unknown).
+
+`seeking`
+
+`boolean`
+
+▸
+
+Description
+
+Whether a seek operation is in progress.
+
+### Actions
+
+Action
+
+Type
+
+Details
+
+`seek`
+
+`(time: number) => Promise<number>`
+
+▸
+
+Description
+
+Seek to a time in seconds. Returns the actual position after seek.
+
+### Selector
+
+Pass `selectTime` to [`usePlayer`](./use-player.md) to subscribe to time state. Returns `undefined` if the time feature is not configured.
+
+TimeDisplay.tsx
+
+```
+import { selectTime, usePlayer } from '@videojs/react';
+
+function TimeDisplay() {
+  const time = usePlayer(selectTime);
+  if (!time) return null;
+
+  return (
+    <span>
+      {Math.floor(time.currentTime)} / {Math.floor(time.duration)}
+    </span>
+  );
+}
+```

package/docs/reference/feature-volume.md

@@ -0,0 +1,99 @@
+# Volume
+
+Volume level and mute state for the player store
+
+Controls volume level and mute state.
+
+## API Reference
+
+### State
+
+Property
+
+Type
+
+Details
+
+`volume`
+
+`number`
+
+▸
+
+Description
+
+Volume level from 0 (silent) to 1 (max).
+
+`muted`
+
+`boolean`
+
+▸
+
+Description
+
+Whether audio is muted.
+
+`volumeAvailability`
+
+`'available' | 'unavailable' | 'unsupported'`
+
+▸
+
+Description
+
+Whether volume can be programmatically set on this platform.
+
+### Actions
+
+Action
+
+Type
+
+Details
+
+`setVolume`
+
+`(volume: number) => number`
+
+▸
+
+Description
+
+Set volume (clamped 0-1). Returns the clamped value.
+
+`toggleMuted`
+
+`() => boolean`
+
+▸
+
+Description
+
+Toggle mute state. Returns the new muted value.
+
+### Selector
+
+Pass `selectVolume` to [`usePlayer`](./use-player.md) to subscribe to volume state. Returns `undefined` if the volume feature is not configured.
+
+VolumeSlider.tsx
+
+```
+import { selectVolume, usePlayer } from '@videojs/react';
+
+function VolumeSlider() {
+  const vol = usePlayer(selectVolume);
+  if (!vol) return null;
+
+  return (
+    <input
+      type="range"
+      min={0}
+      max={1}
+      step={0.01}
+      value={vol.volume}
+      onChange={(e) => vol.setVolume(Number(e.target.value))}
+    />
+  );
+}
+```