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

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

@@ -0,0 +1,104 @@
+# 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.
+
+### 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))}
+    />
+  );
+}
+```

package/docs/reference/fullscreen-button.md

@@ -0,0 +1,212 @@
+# FullscreenButton
+
+Accessible fullscreen toggle button with keyboard support and state reflection
+
+## Anatomy
+
+tsx
+
+```
+<FullscreenButton />
+```
+
+## Behavior
+
+Toggles fullscreen mode. Detects platform support through `availability` — when fullscreen is `"unsupported"`, the toggle does nothing.
+
+## Styling
+
+You can style the button based on fullscreen state:
+
+React renders a `<button>` element. Add a `className` to style it:
+
+css
+
+```
+/* In fullscreen */
+.fullscreen-button[data-fullscreen] {
+  background: red;
+}
+```
+
+Consider hiding the button when unsupported:
+
+css
+
+```
+.fullscreen-button[data-availability="unsupported"] {
+  display: none;
+}
+```
+
+## Accessibility
+
+Renders a `<button>` with an automatic `aria-label`: “Enter fullscreen” or “Exit fullscreen”. Override with the `label` prop. Keyboard activation: Enter / Space.
+
+## Examples
+
+### Basic Usage
+
+Fullscreen
+
+App.tsx
+
+App.css
+
+```
+import { createPlayer, FullscreenButton } 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
+        />
+        <FullscreenButton
+          className="media-fullscreen-button"
+          render={(props, state) => <button {...props}>{state.fullscreen ? 'Exit Fullscreen' : 'Fullscreen'}</button>}
+        />
+      </Player.Container>
+    </Player.Provider>
+  );
+}
+```
+```
+.media-container {
+  position: relative;
+}
+
+.media-container video {
+  width: 100%;
+}
+
+.media-fullscreen-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);
+}
+```
+
+## API Reference
+
+### Props
+
+Prop
+
+Type
+
+Default
+
+Details
+
+`disabled`
+
+`boolean`
+
+`false`
+
+▸
+
+Description
+
+Whether the button is disabled.
+
+`label`
+
+`string | function`
+
+`''`
+
+▸
+
+Description
+
+Custom label for the button.
+
+Type
+
+`string | ((state: FullscreenButtonState) => string)`
+
+### State
+
+State is accessible via the `render`, `className`, and `style` props.
+
+Property
+
+Type
+
+Details
+
+`availability`
+
+`'available' | 'unavailable' | 'unsupp...`
+
+▸
+
+Description
+
+Whether fullscreen can be requested on this platform.
+
+Type
+
+`'available' | 'unavailable' | 'unsupported'`
+
+`fullscreen`
+
+`boolean`
+
+▸
+
+Description
+
+Whether fullscreen mode is currently active.
+
+`label`
+
+`string`
+
+### Data attributes
+
+Attribute
+
+Type
+
+Details
+
+`data-fullscreen`
+
+▸
+
+Description
+
+Present when fullscreen mode is active.
+
+`data-availability`
+
+`'available' | 'unavailable' | 'unsupp...`
+
+▸
+
+Description
+
+Indicates fullscreen availability (`available` or `unsupported`).
+
+Type
+
+`'available' | 'unavailable' | 'unsupported'`