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

@videojs/react 10.0.0-rc.2 → 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 (2117) hide show

package/docs/reference/playback-rate-button.md DELETED Viewed

@@ -1,187 +0,0 @@
-# PlaybackRateButton
-A button that cycles through playback speed rates
-## Import
-tsx
-```
-import { PlaybackRateButton } from '@videojs/react';
-```
-## Anatomy
-tsx
-```
-<PlaybackRateButton />
-```
-## Behavior
-Cycles through playback rates on click. The default rate list is `[0.2, 0.5, 0.7, 1, 1.2, 1.5, 1.7, 2]`. After the last rate, it wraps back to the first. If the current rate isn’t in the list (e.g., set programmatically), the button jumps to the next rate greater than the current one.
-When `menuTrigger` is enabled, activation opens the linked playback-rate menu instead of cycling through rates. Use this mode when the button is the trigger for a `Menu` that contains playback-rate options.
-## Styling
-Display the current rate using the `data-rate` attribute:
-Use the `render` prop for rate display:
-tsx
-```
-<PlaybackRateButton
-  render={(props, state) => <button {...props}>{state.rate}&times;</button>}
-/>
-```
-## Accessibility
-Renders a `<button>` with an automatic `aria-label` of `"Playback rate {rate}"` (e.g., `"Playback rate 1.5"`). Override with the `label` prop. Keyboard activation: Enter / Space.
-In menu-trigger mode, the button behaves as a menu trigger and reflects menu state through the trigger attributes.
-## Examples
-### Basic Usage
-1×
-App.tsx
-App.css
-```
-import { Container, createPlayer, PlaybackRateButton } from '@videojs/react';
-import { Video, videoFeatures } from '@videojs/react/video';
-const { Player } = createPlayer({ features: videoFeatures });
-export default function BasicUsage() {
-  return (
-    <Player>
-      <Container className="media-container">
-        <Video src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4" autoPlay muted playsInline loop />
-        <PlaybackRateButton
-          className="media-playback-rate-button"
-          render={(props, state) => <button {...props}>{Math.round(state.rate * 10) / 10}&times;</button>}
-        />
-      </Container>
-    </Player>
-  );
-}
-```
-```
-.media-container {
-  position: relative;
-}
-.media-container video {
-  width: 100%;
-}
-.media-playback-rate-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`
-`object`
-`''`
-▸
-Description
-Custom label for the button.
-Type
-`{ key: string; text: string } | string | ((state: PlaybackRateButtonState) => Text | string)`
-`menuTrigger`
-`boolean`
-`false`
-▸
-Description
-When true, pointer activation opens a menu instead of cycling. React sets this automatically inside `Menu.Trigger`.
-### State
-State is accessible via the `render`, `className`, and `style` props.
-Property
-Type
-Details
-`label`
-`{ key: string; text: string } | string`
-`rate`
-`number`
-### Data attributes
-Attribute
-Type
-Details
-`data-rate`
-`number`
-▸
-Description
-Current playback rate.

package/docs/reference/playback-rate-radio-group.md DELETED Viewed

@@ -1,519 +0,0 @@
-# PlaybackRateRadioGroup
-A menu radio group for selecting playback speed
-Creates radio items from the player playback rate state and selects the playback speed.
-## Import
-tsx
-```
-import { PlaybackRateRadioGroup } from '@videojs/react/ui/playback-rate-radio-group';
-```
-## Anatomy
-tsx
-```
-<PlaybackRateRadioGroup.Root>
-  <Menu.Trigger>
-    <PlaybackRateRadioGroup.Value />
-  </Menu.Trigger>
-  <Menu.Content>
-    <PlaybackRateRadioGroup.Options
-      renderItem={(props, item) => (
-        <Menu.RadioItem {...props}>
-          {item.label}
-          <Menu.ItemIndicator checked={item.checked} />
-        </Menu.RadioItem>
-      )}
-    />
-  </Menu.Content>
-</PlaybackRateRadioGroup.Root>
-```
-## Behavior
-The group is available when the configured media exposes playback rates. Option labels default to the rate followed by a multiplication sign (e.g. `1.5×`); pass `formatRate` to customize them.
-`PlaybackRateRadioGroup.Root` uses [`usePlaybackRateOptions`](./use-playback-rate-options.md) to own selection and renders no element. Wrap the menu’s `Menu.Trigger` and `Menu.Content` in it so the trigger inherits the group’s disabled and hidden state and exposes `data-availability`. `PlaybackRateRadioGroup.Options` renders the items: its required `renderItem` callback renders the [`Menu.RadioItem`](./menu.md) root and receives item state containing the translated `label` and current `checked` value. `PlaybackRateRadioGroup.Value` displays the selected label, typically inside the trigger. `Options` and `Value` render `null` when the [playback rate feature](./feature-playback-rate.md) is not configured.
-The `PlaybackRateRadioGroup` export from the `@videojs/react` root is a compatibility component that composes `Root` and `Options` behind the former single-component props. Prefer the parts for new code.
-## Styling
-Attribute
-Values
-Description
-`data-rate`
-`number`
-Current playback rate.
-`data-disabled`
-Present / absent
-Present when playback rate selection is disabled.
-`data-hidden`
-Present / absent
-Present when playback-rate selection is unavailable.
-`data-availability`
-`"available"` / `"unavailable"`
-Whether playback rates are available.
-Unavailable groups receive the native `hidden` attribute.
-## Accessibility
-The group uses the menu radio group pattern.
-`PlaybackRateRadioGroup.Options` receives its accessible label from the `label` prop on `PlaybackRateRadioGroup.Root` or defaults to `Playback rate`. Override it with `aria-label` or `aria-labelledby` on `PlaybackRateRadioGroup.Options`.
-## Examples
-### Basic usage
-Speed1×
-App.tsx
-App.css
-```
-import { Container, createPlayer, Menu } from '@videojs/react';
-import { PlaybackRateRadioGroup } from '@videojs/react/ui/playback-rate-radio-group';
-import { Video, videoFeatures } from '@videojs/react/video';
-import type { ReactNode } from 'react';
-const { Player } = createPlayer({ features: videoFeatures });
-function SpeedMenu(): ReactNode {
-  return (
-    <Menu.Root side="top" align="end">
-      <PlaybackRateRadioGroup.Root>
-        <Menu.Trigger className="settings-trigger" render={<button type="button" />}>
-          Speed
-          <PlaybackRateRadioGroup.Value className="menu-hint" />
-        </Menu.Trigger>
-        <Menu.Popup className="menu">
-          <Menu.Content>
-            <PlaybackRateRadioGroup.Options
-              className="menu-group"
-              renderItem={(props, item) => (
-                <Menu.RadioItem {...props} className="menu-item">
-                  {item.label}
-                  <Menu.ItemIndicator checked={item.checked} forceMount className="menu-indicator">
-                    ✓
-                  </Menu.ItemIndicator>
-                </Menu.RadioItem>
-              )}
-            />
-          </Menu.Content>
-        </Menu.Popup>
-      </PlaybackRateRadioGroup.Root>
-    </Menu.Root>
-  );
-}
-export default function BasicUsage() {
-  return (
-    <Player>
-      <Container className="media-container">
-        <Video src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4" autoPlay muted playsInline loop />
-        <div className="menu-bar">
-          <SpeedMenu />
-        </div>
-      </Container>
-    </Player>
-  );
-}
-```
-```
-.media-container {
-  position: relative;
-}
-.media-container video {
-  width: 100%;
-}
-.menu-bar {
-  position: absolute;
-  right: 10px;
-  bottom: 10px;
-}
-.settings-trigger {
-  padding: 6px 16px;
-  color: black;
-  cursor: pointer;
-  background: rgba(255, 255, 255, 0.75);
-  border: 1px solid rgba(255, 255, 255, 0.35);
-  border-radius: 9999px;
-  backdrop-filter: blur(10px);
-}
-.menu-hint {
-  margin-left: 8px;
-  color: rgba(0, 0, 0, 0.6);
-}
-.menu-hint:empty {
-  display: none;
-}
-.menu {
-  --media-menu-side-offset: 8px;
-  box-sizing: border-box;
-  display: grid;
-  gap: 2px;
-  min-width: 180px;
-  max-width: var(--media-menu-available-width, var(--media-popover-available-width, none));
-  max-height: var(--media-menu-available-height, var(--media-popover-available-height, none));
-  padding: 6px;
-  margin: 0;
-  overflow: auto;
-  overscroll-behavior: none;
-  font-size: 14px;
-  color: white;
-  background: rgba(0, 0, 0, 0.88);
-  border: 0;
-  border-radius: 8px;
-  backdrop-filter: blur(10px);
-}
-.menu-group {
-  display: grid;
-  gap: 2px;
-}
-.menu-item {
-  display: flex;
-  gap: 8px;
-  align-items: center;
-  justify-content: space-between;
-  min-height: 32px;
-  padding: 0 10px;
-  font: inherit;
-  color: inherit;
-  cursor: pointer;
-  background: none;
-  border: 0;
-  border-radius: 6px;
-}
-.menu-item[data-highlighted] {
-  background: rgba(255, 255, 255, 0.16);
-}
-.menu-indicator {
-  opacity: 0;
-}
-[role="menuitemradio"][aria-checked="true"] .menu-indicator {
-  opacity: 1;
-}
-```
-## API Reference
-###
-Root
-Owns playback-rate option state and shares it with an enclosing menu. Does not render a DOM element.
-#### Props
-Prop
-Type
-Default
-Details
-`disabled`
-`boolean`
-`false`
-▸
-Description
-Whether playback rate selection is disabled.
-`formatRate`
-`function`
-`formatPlaybackRate`
-▸
-Description
-Custom formatter for visible playback rate labels.
-Type
-`((rate: number) => string)`
-`label`
-`object`
-`''`
-▸
-Description
-Custom label for the options group.
-Type
-`{ key: string; text: string } | string | ((state: PlaybackRateRadioGroupState) => Text | string)`
-#### State
-State is accessible via the `render`, `className`, and `style` props.
-Property
-Type
-Details
-`label`
-`{ key: string; text: string } | string`
-`value`
-`string`
-▸
-Description
-Current radio-group value.
-`options`
-`readonly Option[]`
-▸
-Description
-Ordered options displayed by platform adapters.
-`disabled`
-`boolean`
-▸
-Description
-Whether the entire option group is disabled.
-`hidden`
-`boolean`
-▸
-Description
-Whether the option group is hidden because no meaningful selection is available.
-`availability`
-`'available' | 'unavailable'`
-▸
-Description
-Whether the media exposes a meaningful selection.
-`rate`
-`number`
-#### Data attributes
-Attribute
-Type
-Details
-`data-rate`
-`number`
-▸
-Description
-Current playback rate.
-`data-disabled`
-▸
-Description
-Present when playback rate selection is disabled.
-`data-hidden`
-▸
-Description
-Present when playback rate selection is unavailable.
-`data-availability`
-`'available' | 'unavailable'`
-▸
-Description
-Indicates playback rate availability (`available` or `unavailable`).
-###
-Options
-Renders menu radio items for the player's available playback rates.
-#### Props
-Prop
-Type
-Default
-Details
-`className`
-`string | ((state: PlaybackRateRadioGroupCore.State) => string | undefined)`
-`—`
-▸
-Description
-Class name or function returning class name from state.
-`render`
-`ReactElement | ((props: HTMLProps, state: PlaybackRateRadioGroupCore.State) => ReactElement | null)`
-`—`
-▸
-Description
-Render prop for custom element.
-`renderItem`
-`((props: PlaybackRateRadioGroupItemProps, state: PlaybackRateRadioGroupItemState) => ReactElement)`
-`—`
-▸
-Description
-Render one consumer-owned menu radio item for every playback rate.
-`style`
-`CSSProperties | ((state: PlaybackRateRadioGroupCore.State) => CSSProperties | undefined)`
-`—`
-▸
-Description
-Style or function returning style from state.
-###
-Value
-Displays the selected playback-rate label.
-#### Props
-Prop
-Type
-Default
-Details
-`className`
-`string | ((state: PlaybackRateOptionsResult) => string | undefined)`
-`—`
-▸
-Description
-Class name or function returning class name from state.
-`render`
-`ReactElement | ((props: HTMLProps, state: PlaybackRateOptionsResult) => ReactElement | null)`
-`—`
-▸
-Description
-Render prop for custom element.
-`style`
-`CSSProperties | ((state: PlaybackRateOptionsResult) => CSSProperties | undefined)`
-`—`
-▸
-Description
-Style or function returning style from state.