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

package/docs/reference/mute-button.md

@@ -0,0 +1,276 @@
+# MuteButton
+
+Accessible mute/unmute button with keyboard support and volume state reflection
+
+## Anatomy
+
+tsx
+
+```
+<MuteButton />
+```
+
+## Behavior
+
+Toggles mute on and off, and exposes a derived `volumeLevel` based on the current volume and mute state.
+
+## Styling
+
+Style the button based on muted state:
+
+React renders a `<button>` element. Add a `className` to style it:
+
+css
+
+```
+.mute-button[data-muted] .icon-muted { display: inline; }
+.mute-button:not([data-muted]) .icon-unmuted { display: inline; }
+```
+
+Use `data-volume-level` for multi-level icon switching:
+
+css
+
+```
+.mute-button[data-volume-level="off"] .icon-off { display: inline; }
+.mute-button[data-volume-level="low"] .icon-low { display: inline; }
+.mute-button[data-volume-level="medium"] .icon-medium { display: inline; }
+.mute-button[data-volume-level="high"] .icon-high { display: inline; }
+```
+
+## Accessibility
+
+Renders a `<button>` with an automatic `aria-label`: “Unmute” when muted, “Mute” when unmuted. Override with the `label` prop. Keyboard activation: Enter / Space.
+
+## Examples
+
+### Basic Usage
+
+Mute
+
+App.tsx
+
+App.css
+
+```
+import { createPlayer, MuteButton } 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
+        />
+        <MuteButton
+          className="media-mute-button"
+          render={(props, state) => <button {...props}>{state.muted ? 'Unmute' : 'Mute'}</button>}
+        />
+      </Player.Container>
+    </Player.Provider>
+  );
+}
+```
+```
+.media-container {
+  position: relative;
+}
+
+.media-container video {
+  width: 100%;
+}
+
+.media-mute-button {
+  position: absolute;
+  bottom: 10px;
+  left: 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);
+}
+```
+
+### Volume Levels
+
+High
+
+App.tsx
+
+App.css
+
+```
+import { createPlayer, MuteButton } from '@videojs/react';
+import { Video, videoFeatures } from '@videojs/react/video';
+
+const Player = createPlayer({ features: videoFeatures });
+
+export default function VolumeLevels() {
+  return (
+    <Player.Provider>
+      <Player.Container className="media-container">
+        <Video
+          src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
+          autoPlay
+          muted
+          playsInline
+          loop
+        />
+        <MuteButton
+          className="media-mute-button"
+          render={(props, state) => (
+            <button {...props}>
+              {state.volumeLevel === 'off'
+                ? 'Off'
+                : state.volumeLevel === 'low'
+                  ? 'Low'
+                  : state.volumeLevel === 'medium'
+                    ? 'Medium'
+                    : 'High'}
+            </button>
+          )}
+        />
+      </Player.Container>
+    </Player.Provider>
+  );
+}
+```
+```
+.media-container {
+  position: relative;
+}
+
+.media-container video {
+  width: 100%;
+}
+
+.media-mute-button {
+  position: absolute;
+  bottom: 10px;
+  left: 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: MuteButtonState) => string)`
+
+### State
+
+State is accessible via the `render`, `className`, and `style` props.
+
+Property
+
+Type
+
+Details
+
+`volumeLevel`
+
+`'off' | 'low' | 'medium' | 'high'`
+
+▸
+
+Description
+
+Derived volume level:
+
+*   `off`: muted or volume is 0
+*   `low`: volume < 0.5
+*   `medium`: volume < 0.75
+*   `high`: volume >= 0.75
+
+`muted`
+
+`boolean`
+
+▸
+
+Description
+
+Whether audio is muted.
+
+`label`
+
+`string`
+
+### Data attributes
+
+Attribute
+
+Type
+
+Details
+
+`data-muted`
+
+▸
+
+Description
+
+Present when the media is muted.
+
+`data-volume-level`
+
+`'off' | 'medium' | 'low' | 'high'`
+
+▸
+
+Description
+
+Indicates the volume level.

package/docs/reference/pip-button.md

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

package/docs/reference/play-button.md

@@ -0,0 +1,224 @@
+# PlayButton
+
+Accessible play/pause button with keyboard support and customizable rendering
+
+## Anatomy
+
+tsx
+
+```
+<PlayButton />
+```
+
+## Behavior
+
+PlayButton is a three-state button: **play** , **pause** , and **replay** . When media reaches the end (`ended` state), clicking restarts playback from the beginning.
+
+## Styling
+
+Style with the `[data-paused]` and `[data-ended]` attributes to show/hide play/pause/replay icons based on state. For example:
+
+React renders a `<button>` element. Add a `className` to style it:
+
+css
+
+```
+/* Paused (but not ended) */
+.play-button[data-paused]:not([data-ended]) .play-icon { display: inline; }
+
+/* Playing */
+.play-button:not([data-paused]) .pause-icon { display: inline; }
+
+/* Ended */
+.play-button[data-ended] .replay-icon { display: inline; }
+```
+
+After first play, the `data-started` attribute is added and remains present until a new source is loaded. Use this to hide the play button when media hasn’t started yet:
+
+css
+
+```
+/* Hide play button before first play */
+.play-button:not([data-started]) .play-icon { display: none; }
+```
+
+## Accessibility
+
+Renders a `<button>` element with an automatic `aria-label` that updates based on state: “Play”, “Pause”, or “Replay”. Override with the `label` prop (accepts a string or function). Keyboard activation: Enter / Space.
+
+## Examples
+
+### Basic Usage
+
+Play
+
+App.tsx
+
+App.css
+
+```
+import { createPlayer, PlayButton } 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
+        />
+        <PlayButton
+          className="media-play-button"
+          render={(props, state) => (
+            <button {...props}>{state.ended ? 'Replay' : state.paused ? 'Play' : 'Pause'}</button>
+          )}
+        />
+      </Player.Container>
+    </Player.Provider>
+  );
+}
+```
+```
+.media-container {
+  position: relative;
+}
+
+.media-container video {
+  width: 100%;
+}
+
+.media-play-button {
+  position: absolute;
+  bottom: 10px;
+  left: 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: PlayButtonState) => string)`
+
+### State
+
+State is accessible via the `render`, `className`, and `style` props.
+
+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).
+
+`label`
+
+`string`
+
+### Data attributes
+
+Attribute
+
+Type
+
+Details
+
+`data-paused`
+
+▸
+
+Description
+
+Present when the media is paused.
+
+`data-ended`
+
+▸
+
+Description
+
+Present when the media has ended.
+
+`data-started`
+
+▸
+
+Description
+
+Present when playback has started.