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/status-indicator.md DELETED Viewed

@@ -1,535 +0,0 @@
-# StatusIndicator
-Display temporary visual feedback for keyboard and gesture actions
-## Import
-tsx
-```
-import { StatusIndicator } from '@videojs/react';
-```
-## Anatomy
-tsx
-```
-<StatusIndicator.Root>
-  <StatusIndicator.Value />
-</StatusIndicator.Root>
-```
-## Behavior
-`StatusIndicator` displays feedback for actions emitted by a [`Hotkey`](./hotkey.md) or [`Gesture`](./gesture.md) in the same player `Container`. It does not react to buttons, direct player-store changes, or media state changes on their own.
-The input event arrives before its action is resolved. The indicator uses the media snapshot from that moment to predict the next visual status:
-Action
-`data-status`
-Value
-`togglePaused`
-`"play"` or `"pause"`
-Translated playing or paused label
-`toggleMuted`
-`"volume-off"`, `"volume-low"`, or `"volume-high"`
-Predicted volume percentage
-`volumeStep`
-`"volume-off"`, `"volume-low"`, or `"volume-high"`
-Predicted volume percentage
-`toggleSubtitles`
-`"captions-on"` or `"captions-off"`
-Translated captions label
-`toggleFullscreen`
-`"fullscreen"` or `"exit-fullscreen"`
-Translated fullscreen label
-`togglePictureInPicture`
-`"pip"` or `"exit-pip"`
-Translated picture-in-picture label
-`toggleSubtitles` is ignored when the player reports that no captions or subtitles are available. Seek actions, `toggleControls`, playback-rate actions, and custom actions do not open this indicator.
-Use `actions` to allow only some of the supported actions. Omitting it allows all supported actions.
-Pass a readonly array of action names:
-tsx
-```
-<StatusIndicator.Root actions={["togglePaused", "toggleMuted"]}>
-  <StatusIndicator.Value />
-</StatusIndicator.Root>
-```
-The indicator closes after `closeDelay`, which defaults to 800 milliseconds. A repeated handled action updates the current value and restarts that close timer without replaying the entry transition. React stops rendering the Root after its close transition. The HTML custom element remains in the document with `hidden` until the next handled action.
-## Styling
-Attribute
-Values
-Description
-`data-open`
-Present / absent
-Present while the indicator is open
-`data-status`
-`"play"`, `"pause"`, `"volume-off"`, `"volume-low"`, `"volume-high"`, `"captions-on"`, `"captions-off"`, `"fullscreen"`, `"exit-fullscreen"`, `"pip"`, or `"exit-pip"`
-Predicted status for the handled action
-`data-starting-style`
-Present / absent
-Present during the open transition
-`data-ending-style`
-Present / absent
-Present during the close transition
-Use `data-status` to select an icon or other visual treatment, and use the transition attributes for entry and exit styles.
-React renders standard DOM elements. Add a `className` to the Root:
-css
-```
-.status-indicator[data-status="play"] {
-  color: green;
-}
-.status-indicator[data-starting-style],
-.status-indicator[data-ending-style] {
-  opacity: 0;
-}
-```
-## Accessibility
-`StatusIndicator` is visual feedback and does not create a live region. Keep every action available through keyboard-operable controls, and pair the player with [`StatusAnnouncer`](./status-announcer.md) when state changes should be announced to screen readers. Do not make `StatusIndicator.Value` a live region.
-## Examples
-### Basic Usage
-Focus the player, then press K to play or pause, M to mute, F for fullscreen, C for captions, or I for picture-in-picture.
-Focus the player · K: play/pause · M: mute · F: fullscreen · C: captions · I: picture-in-picture
-App.tsx
-App.css
-```
-import { Container, createPlayer, Hotkey, StatusIndicator } from '@videojs/react';
-import { Video, videoFeatures } from '@videojs/react/video';
-import './BasicUsage.css';
-const { Player } = createPlayer({ features: videoFeatures });
-const statusActions = [
-  'togglePaused',
-  'toggleMuted',
-  'toggleSubtitles',
-  'toggleFullscreen',
-  'togglePictureInPicture',
-] as const;
-export default function BasicUsage() {
-  return (
-    <Player>
-      <Container className="react-status-indicator-basic" tabIndex={0}>
-        <Video src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4" autoPlay muted playsInline loop>
-          <track kind="captions" src="/docs/demos/captions-button/captions.vtt" srcLang="en" label="English" />
-        </Video>
-        <p className="react-status-indicator-basic__instructions">
-          Focus the player · K: play/pause · M: mute · F: fullscreen · C: captions · I: picture-in-picture
-        </p>
-        <StatusIndicator.Root
-          className="react-status-indicator-basic__indicator"
-          actions={statusActions}
-          aria-hidden="true"
-        >
-          <StatusIndicator.Value className="react-status-indicator-basic__value" />
-        </StatusIndicator.Root>
-        <Hotkey keys="k" action="togglePaused" />
-        <Hotkey keys="m" action="toggleMuted" />
-        <Hotkey keys="f" action="toggleFullscreen" />
-        <Hotkey keys="c" action="toggleSubtitles" />
-        <Hotkey keys="i" action="togglePictureInPicture" />
-      </Container>
-    </Player>
-  );
-}
-```
-```
-.react-status-indicator-basic {
-  position: relative;
-}
-.react-status-indicator-basic:focus-visible {
-  outline: 3px solid #60a5fa;
-  outline-offset: 2px;
-}
-.react-status-indicator-basic video {
-  display: block;
-  width: 100%;
-}
-.react-status-indicator-basic__instructions {
-  position: absolute;
-  top: 10px;
-  right: 10px;
-  left: 10px;
-  padding: 6px 10px;
-  margin: 0;
-  color: white;
-  text-align: center;
-  background: rgb(0 0 0 / 70%);
-  border-radius: 4px;
-}
-.react-status-indicator-basic__indicator {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  display: grid;
-  min-width: 92px;
-  padding: 16px;
-  color: white;
-  pointer-events: none;
-  background: rgb(0 0 0 / 72%);
-  border-radius: 12px;
-  place-items: center;
-  transform: translate(-50%, -50%);
-  transition:
-    opacity 160ms ease-in-out,
-    scale 160ms ease-in-out;
-}
-.react-status-indicator-basic__indicator::before {
-  font-size: 28px;
-  font-weight: 700;
-  line-height: 1;
-}
-.react-status-indicator-basic__indicator[data-status="play"]::before {
-  content: "▶";
-}
-.react-status-indicator-basic__indicator[data-status="pause"]::before {
-  content: "Ⅱ";
-}
-.react-status-indicator-basic__indicator[data-status="volume-off"]::before {
-  content: "🔇";
-}
-.react-status-indicator-basic__indicator[data-status="volume-low"]::before {
-  content: "🔉";
-}
-.react-status-indicator-basic__indicator[data-status="volume-high"]::before {
-  content: "🔊";
-}
-.react-status-indicator-basic__indicator[data-status="captions-on"]::before,
-.react-status-indicator-basic__indicator[data-status="captions-off"]::before {
-  content: "CC";
-}
-.react-status-indicator-basic__indicator[data-status="captions-off"]::before {
-  text-decoration: line-through;
-}
-.react-status-indicator-basic__indicator[data-status="fullscreen"]::before {
-  content: "⛶";
-}
-.react-status-indicator-basic__indicator[data-status="exit-fullscreen"]::before {
-  content: "⊠";
-}
-.react-status-indicator-basic__indicator[data-status="pip"]::before,
-.react-status-indicator-basic__indicator[data-status="exit-pip"]::before {
-  content: "▣";
-}
-.react-status-indicator-basic__indicator[data-status="exit-pip"]::before {
-  text-decoration: line-through;
-}
-.react-status-indicator-basic__indicator[data-starting-style],
-.react-status-indicator-basic__indicator[data-ending-style] {
-  opacity: 0;
-  scale: 0.85;
-}
-.react-status-indicator-basic__value {
-  margin-top: 8px;
-  font-variant-numeric: tabular-nums;
-}
-```
-## API Reference
-###
-Root
-#### Props
-Prop
-Type
-Default
-Details
-`actions`
-`readonly InputAction[]`
-`—`
-▸
-Description
-Input actions allowed to open the indicator. All supported actions are allowed when omitted.
-`closeDelay`
-`number`
-`—`
-▸
-Description
-Delay in milliseconds before the indicator closes.
-`labels`
-`Partial<InputIndicatorLabels>`
-`—`
-▸
-Description
-Internal translated label overrides supplied by framework adapters.
-#### State
-State is accessible via the `render`, `className`, and `style` props.
-Property
-Type
-Details
-`transitionStarting`
-`boolean`
-▸
-Description
-Whether the open transition is in progress.
-`transitionEnding`
-`boolean`
-▸
-Description
-Whether the close transition is in progress.
-`open`
-`boolean`
-▸
-Description
-Whether the indicator is open.
-`generation`
-`number`
-▸
-Description
-Increments each time a supported input action updates the indicator.
-`status`
-`ReturnType<typeof deriveStatus> exten...`
-▸
-Description
-Predicted visual status for the handled input action.
-Type
-`ReturnType<typeof deriveStatus> extends infer Details ? Details extends { status: infer Status } ? Status | null : never : never`
-`label`
-`string | null`
-▸
-Description
-Translated label for the predicted status.
-`value`
-`string | null`
-▸
-Description
-Predicted volume percentage for volume actions, otherwise `null`.
-#### Data attributes
-Attribute
-Type
-Details
-`data-open`
-▸
-Description
-Present while the indicator is open.
-`data-status`
-`ReturnType<typeof deriveStatus> exten...`
-▸
-Description
-Predicted visual status for the handled input action.
-Type
-`ReturnType<typeof deriveStatus> extends infer Details ? Details extends { status: infer Status } ? Status | null : never : never`
-`data-starting-style`
-▸
-Description
-Present during the open transition.
-`data-ending-style`
-▸
-Description
-Present during the close transition.
-###
-Value
-#### Props
-Prop
-Type
-Default
-Details
-`className`
-`string | ((state: StatusIndicatorCore.State) => string | undefined)`
-`—`
-▸
-Description
-Class name or function returning class name from state.
-`render`
-`ReactElement | ((props: HTMLProps, state: StatusIndicatorCore.State) => ReactElement | null)`
-`—`
-▸
-Description
-Render prop for custom element.
-`style`
-`CSSProperties | ((state: StatusIndicatorCore.State) => CSSProperties | undefined)`
-`—`
-▸
-Description
-Style or function returning style from state.