@videojs/react 10.0.0-rc.1 → 10.0.0-rc.3

package/docs/reference/poster.md

@@ -1,316 +0,0 @@
-# Poster
-
-Poster image component that displays a thumbnail until video playback starts
-
-## Import
-
-tsx
-
-```
-import { Poster } from '@videojs/react';
-```
-
-## Anatomy
-
-tsx
-
-```
-<Poster />
-```
-
-## Behavior
-
-The poster shows before playback starts. Once the user plays or seeks, it hides; pausing does not bring it back. Loading a new source shows it again.
-
-You can set the poster URL on the player. This is useful when you want to change the poster from inside a skin, or keep all your media metadata in one place:
-
-tsx
-
-```
-<VideoPlayer poster="poster.jpg" />
-```
-
-## Supply your own image
-
-The component fills in a source only when you leave one out. `srcset`, `sizes`, `loading`, `<picture>`, and framework image components all stay available.
-
-The component is the `<img>`, so image attributes go straight on it:
-
-tsx
-
-```
-<Poster srcSet="poster-480.jpg 480w, poster-1080.jpg 1080w" sizes="100vw" />
-```
-
-To render something else, use `render`. It receives the poster URL as `src`, undefined until one resolves:
-
-tsx
-
-```
-<Poster
-  render={({ src, ...props }: ComponentProps<'img'>) =>
-    src ? <Image {...props} src={src} alt="" fill /> : null
-  }
-/>
-```
-
-Inside a skin, pass the same function as `renderPoster`. The skin draws your image in place of its own:
-
-tsx
-
-```
-<VideoSkin
-  renderPoster={({ src, ...props }: ComponentProps<'img'>) =>
-    src ? <Image {...props} src={src} alt="" fill /> : null
-  }
-/>
-```
-
-A skin styles the `<img>` it draws directly. Render something that is not an `<img>` and its sizing is yours.
-
-## Styling
-
-Attribute
-
-Values
-
-Description
-
-`data-visible`
-
-Present / absent
-
-Present before playback starts
-
-`data-loading`
-
-Present / absent
-
-Present while the image is fetching
-
-`data-loaded`
-
-Present / absent
-
-Present once the image has loaded
-
-`data-error`
-
-Present / absent
-
-Present when the image failed
-
-The three load attributes track the image on screen, including one you supplied yourself.
-
-React renders an `<img>` element. Add a `className` to style it:
-
-css
-
-```
-.media-poster:not([data-visible]) {
-  opacity: 0;
-}
-```
-
-## Accessibility
-
-Unlike the native `<video poster>` attribute, this component lets you describe the poster for screen readers.
-
-The image is decorative by default (`alt=""`), since a URL says nothing about what the image shows. When the poster carries meaning, say so:
-
-tsx
-
-```
-<Poster alt="Keynote speaker at a conference" />
-```
-
-Whether a poster is informative or decorative is your judgment, per the [WAI guidelines](https://www.w3.org/WAI/tutorials/images/decorative/).
-
-## Examples
-
-### Basic Usage
-
-![](https://image.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/thumbnail.jpg)Play
-
-App.tsx
-
-App.css
-
-```
-import { Container, createPlayer, PlayButton, Poster } from '@videojs/react';
-import { Video, videoFeatures } from '@videojs/react/video';
-
-const { Player } = createPlayer({ features: videoFeatures });
-
-export default function BasicUsage() {
-  return (
-    <Player poster="https://image.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/thumbnail.jpg">
-      <Container className="media-container">
-        <Video src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4" playsInline />
-
-        <Poster className="media-poster" />
-
-        <PlayButton
-          className="media-play-button"
-          render={(props, state) => <button {...props}>{state.paused ? 'Play' : 'Pause'}</button>}
-        />
-      </Container>
-    </Player>
-  );
-}
-```
-```
-.media-container {
-  position: relative;
-}
-
-.media-container video {
-  width: 100%;
-}
-
-.media-poster {
-  position: absolute;
-  inset: 0;
-  width: 100%;
-  height: 100%;
-  pointer-events: none;
-  object-fit: cover;
-  transition: opacity 0.25s;
-}
-
-.media-poster:not([data-visible]) {
-  opacity: 0;
-}
-
-.media-play-button {
-  position: absolute;
-  bottom: 10px;
-  left: 10px;
-  padding-block: 8px;
-  padding-inline: 16px;
-  color: black;
-  cursor: pointer;
-  background: rgba(255, 255, 255, 0.75);
-  border: 1px solid rgba(255, 255, 255, 0.25);
-  border-radius: 9999px;
-  backdrop-filter: blur(10px);
-}
-```
-
-## API Reference
-
-### Props
-
-Prop
-
-Type
-
-Default
-
-Details
-
-`src`
-
-`string`
-
-`—`
-
-### State
-
-State is accessible via the `render`, `className`, and `style` props.
-
-Property
-
-Type
-
-Details
-
-`visible`
-
-`boolean`
-
-▸
-
-Description
-
-Whether the poster should be shown, which it is until playback starts.
-
-`src`
-
-`string`
-
-▸
-
-Description
-
-Resolved poster URL, empty when nothing supplied one.
-
-`loading`
-
-`boolean`
-
-▸
-
-Description
-
-Whether the poster image is fetching.
-
-`loaded`
-
-`boolean`
-
-▸
-
-Description
-
-Whether the poster image has decoded.
-
-`error`
-
-`boolean`
-
-▸
-
-Description
-
-Whether the poster image failed.
-
-### Data attributes
-
-Attribute
-
-Type
-
-Details
-
-`data-visible`
-
-▸
-
-Description
-
-Present until playback starts.
-
-`data-loading`
-
-▸
-
-Description
-
-Present while the poster image is fetching.
-
-`data-loaded`
-
-▸
-
-Description
-
-Present once the poster image has decoded.
-
-`data-error`
-
-▸
-
-Description
-
-Present when the poster image failed.

package/docs/reference/quality-radio-group.md

@@ -1,277 +0,0 @@
-# QualityRadioGroup
-
-A menu radio group for selecting video quality
-
-Creates radio items from the player video rendition state and selects automatic or manual quality.
-
-## Import
-
-tsx
-
-```
-import { QualityRadioGroup } from '@videojs/react';
-```
-
-## Anatomy
-
-tsx
-
-```
-<QualityRadioGroup
-  renderItem={(props, item) => (
-    <Menu.RadioItem {...props}>
-      {item.label}
-      <Menu.ItemIndicator checked={item.checked} />
-    </Menu.RadioItem>
-  )}
-/>
-```
-
-## Behavior
-
-The group is available when the configured media exposes more than one video rendition. The first generated option is `Auto`; selecting it returns control to adaptive bitrate selection. Pass `formatRendition` to customize visible rendition labels.
-
-`QualityRadioGroup` uses [`useQualityOptions`](./use-quality-options.md) to own selection and generate each item. Its required `renderItem` callback renders the [`Menu.RadioItem`](./menu.md) root and receives item state containing the translated `label`, optional `tier` and `badge`, and current `checked` value. It returns `null` when the [quality feature](./feature-quality.md) is not configured.
-
-## Styling
-
-Attribute
-
-Values
-
-Description
-
-`data-quality`
-
-`string`
-
-Current quality value.
-
-`data-disabled`
-
-Present / absent
-
-Present when quality selection is disabled.
-
-`data-hidden`
-
-Present / absent
-
-Present when multiple renditions are unavailable.
-
-`data-availability`
-
-`"available"` / `"unavailable"`
-
-Whether multiple renditions are available.
-
-Unavailable groups receive the native `hidden` attribute.
-
-## Accessibility
-
-The group uses the menu radio group pattern.
-
-The component receives an accessible label from the `label` prop or defaults to `Quality`. Override it with `aria-label` or `aria-labelledby`.
-
-## Examples
-
-### Basic usage
-
-Quality
-
-App.tsx
-
-App.css
-
-```
-import { Container, createPlayer, Menu, QualityRadioGroup } from '@videojs/react';
-import { HlsJsVideo } from '@videojs/react/media/hlsjs-video';
-import { videoFeatures } from '@videojs/react/video';
-import type { ReactNode } from 'react';
-
-const { Player } = createPlayer({ features: videoFeatures });
-const src = 'https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4.m3u8';
-
-function QualityMenu(): ReactNode {
-  return (
-    <Menu.Root side="top" align="end">
-      <Menu.Trigger className="settings-trigger" render={<button type="button" />}>
-        Quality
-      </Menu.Trigger>
-      <Menu.Popup className="menu">
-        <Menu.Content>
-          <QualityRadioGroup
-            className="menu-group"
-            renderItem={(props, item) => (
-              <Menu.RadioItem {...props} className="menu-item">
-                <span>
-                  {item.label}
-                  {item.tier ? <sup className="menu-tier">{item.tier}</sup> : null}
-                </span>
-                {item.badge ? <span className="menu-badge">{item.badge}</span> : null}
-                <Menu.ItemIndicator checked={item.checked} forceMount className="menu-indicator">
-                  ✓
-                </Menu.ItemIndicator>
-              </Menu.RadioItem>
-            )}
-          />
-        </Menu.Content>
-      </Menu.Popup>
-    </Menu.Root>
-  );
-}
-
-export default function BasicUsage() {
-  return (
-    <Player>
-      <Container className="media-container">
-        <HlsJsVideo src={src} autoPlay crossOrigin="anonymous" muted playsInline loop />
-        <div className="menu-bar">
-          <QualityMenu />
-        </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 {
-  --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-tier {
-  margin-left: 2px;
-  font-size: 10px;
-}
-
-.menu-badge {
-  margin-left: auto;
-  color: rgba(255, 255, 255, 0.72);
-}
-
-.menu-indicator {
-  opacity: 0;
-}
-
-[role="menuitemradio"][aria-checked="true"] .menu-indicator {
-  opacity: 1;
-}
-```
-
-## API Reference
-
-### 
-
-Value
-
-Displays the selected quality label.
-
-#### Props
-
-Prop
-
-Type
-
-Default
-
-Details
-
-`className`
-
-`string | ((state: QualityOptionsResult) => string | undefined)`
-
-`—`
-
-▸
-
-Description
-
-Class name or function returning class name from state.
-
-`render`
-
-`ReactElement | ((props: HTMLProps, state: QualityOptionsResult) => ReactElement | null)`
-
-`—`
-
-▸
-
-Description
-
-Render prop for custom element.
-
-`style`
-
-`CSSProperties | ((state: QualityOptionsResult) => CSSProperties | undefined)`
-
-`—`
-
-▸
-
-Description
-
-Style or function returning style from state.

package/docs/reference/register-i18n.md

@@ -1,72 +0,0 @@
-# registerI18n
-
-Register or merge translation strings for a BCP 47 locale tag in the global i18n registry
-
-## Import
-
-tsx
-
-```
-import { registerI18n } from "@videojs/react/i18n";
-```
-
-`registerI18n` merges a partial translation map into the process-wide registry for a locale tag. Components carry their own English fallback text. Built-in non-English packs lazy-load automatically; call `registerI18n` for custom locales, CDN locale modules, or patched shipped packs before the provider renders.
-
-Keys are nested semantic names such as `buttons.play` and `buttons.pause`. See [Translation keys](./translation-phrases.md) for the complete catalog.
-
-ts
-
-```
-import { registerI18n } from '@videojs/react/i18n';
-
-registerI18n('es', {
-  buttons: {
-    play: 'Reproducir',
-    pause: 'Pausar',
-  },
-});
-```
-
-## API Reference
-
-### Parameters
-
-Parameter
-
-Type
-
-Default
-
-Details
-
-`locale*`
-
-`(typeof LOCALES)[number] | string & o...`
-
-`—`
-
-▸
-
-Description
-
-BCP 47 tag (normalized to lowercase; unicode extensions stripped for the registry key).
-
-Type
-
-`(typeof LOCALES)[number] | string & object`
-
-`translations*`
-
-`Partial<Translations>`
-
-`—`
-
-▸
-
-Description
-
-Partial nested locale values; merges with any existing layer for the tag.
-
-### Return Value
-
-`void`