@videojs/react 10.0.0-beta.30 → 10.0.0-beta.32

package/docs/reference/volume-slider.md

@@ -2,12 +2,28 @@
 
 A slider component for controlling media playback volume
 
+## Import
+
+tsx
+
+```
+import { VolumeSlider } from '@videojs/react';
+```
+
 ## Anatomy
 
 tsx
 
 ```
-<VolumeSlider.Root />
+<VolumeSlider.Root>
+  <VolumeSlider.Track>
+    <VolumeSlider.Fill />
+  </VolumeSlider.Track>
+  <VolumeSlider.Thumb />
+  <VolumeSlider.Preview>
+    <VolumeSlider.Value type="pointer" />
+  </VolumeSlider.Preview>
+</VolumeSlider.Root>
 ```
 
 ## Behavior
@@ -24,7 +40,7 @@ css
 
 ```
 .volume-slider::before {
-  width: calc(var(--media-slider-fill) * 1%);
+  width: var(--media-slider-fill);
 }
 ```
 
@@ -207,7 +223,7 @@ Whether the slider is non-interactive.
 
 `label`
 
-`Text | string | Text) | function`
+`object`
 
 `''`
 
@@ -219,7 +235,7 @@ Custom label for the slider.
 
 Type
 
-`Text | string | ((state: SliderState) => string | Text)`
+`{ key: string; text: string } | string | ((state: SliderState) => Text | string)`
 
 `largeStep`
 
@@ -309,20 +325,6 @@ Type
 
 Details
 
-`availability`
-
-`'available' | 'unavailable' | 'unsupp...`
-
-▸
-
-Type
-
-`'available' | 'unavailable' | 'unsupported'`
-
-`hidden`
-
-`boolean`
-
 `value`
 
 `number`
@@ -413,25 +415,33 @@ Description
 
 How the thumb aligns at the track edges.
 
-`muted`
+`volume`
 
-`boolean`
+`number`
 
 ▸
 
 Description
 
-Whether audio is muted.
+Volume level from 0 (silent) to 1 (max).
 
-`volume`
+`muted`
 
-`number`
+`boolean`
 
 ▸
 
 Description
 
-Volume level from 0 (silent) to 1 (max).
+Whether audio is muted.
+
+`availability`
+
+`MediaFeatureAvailability`
+
+`hidden`
+
+`boolean`
 
 #### Data attributes
 
@@ -443,13 +453,7 @@ Details
 
 `data-availability`
 
-`'available' | 'unavailable' | 'unsupp...`
-
-▸
-
-Type
-
-`'available' | 'unavailable' | 'unsupported'`
+`MediaFeatureAvailability`
 
 `data-hidden`
 
@@ -481,6 +485,52 @@ Fill
 
 Displays the filled portion from start to the current value.
 
+#### Props
+
+Prop
+
+Type
+
+Default
+
+Details
+
+`className`
+
+`string | ((state: SliderState) => string | undefined)`
+
+`—`
+
+▸
+
+Description
+
+Class name or function returning class name from state.
+
+`render`
+
+`ReactElement | ((props: HTMLProps, state: SliderState) => ReactElement | null)`
+
+`—`
+
+▸
+
+Description
+
+Render prop for custom element.
+
+`style`
+
+`CSSProperties | ((state: SliderState) => CSSProperties | undefined)`
+
+`—`
+
+▸
+
+Description
+
+Style or function returning style from state.
+
 ### 
 
 Preview
@@ -497,9 +547,9 @@ Default
 
 Details
 
-`overflow`
+`className`
 
-`SliderPreviewOverflow`
+`string | ((state: SliderState) => string | undefined)`
 
 `—`
 
@@ -507,7 +557,31 @@ Details
 
 Description
 
-Whether the preview is clamped to the slider bounds.
+Class name or function returning class name from state.
+
+`render`
+
+`ReactElement | ((props: HTMLProps, state: SliderState) => ReactElement | null)`
+
+`—`
+
+▸
+
+Description
+
+Render prop for custom element.
+
+`style`
+
+`CSSProperties | ((state: SliderState) => CSSProperties | undefined)`
+
+`—`
+
+▸
+
+Description
+
+Style or function returning style from state.
 
 #### Data attributes
 
@@ -565,6 +639,52 @@ Thumb
 
 Draggable handle for setting the slider value. Receives focus and handles keyboard interaction.
 
+#### Props
+
+Prop
+
+Type
+
+Default
+
+Details
+
+`className`
+
+`string | ((state: SliderState) => string | undefined)`
+
+`—`
+
+▸
+
+Description
+
+Class name or function returning class name from state.
+
+`render`
+
+`ReactElement | ((props: HTMLProps, state: SliderState) => ReactElement | null)`
+
+`—`
+
+▸
+
+Description
+
+Render prop for custom element.
+
+`style`
+
+`CSSProperties | ((state: SliderState) => CSSProperties | undefined)`
+
+`—`
+
+▸
+
+Description
+
+Style or function returning style from state.
+
 #### Data attributes
 
 Attribute
@@ -621,6 +741,52 @@ Track
 
 Contains the slider's visual track and interactive hit zone.
 
+#### Props
+
+Prop
+
+Type
+
+Default
+
+Details
+
+`className`
+
+`string | ((state: SliderState) => string | undefined)`
+
+`—`
+
+▸
+
+Description
+
+Class name or function returning class name from state.
+
+`render`
+
+`ReactElement | ((props: HTMLProps, state: SliderState) => ReactElement | null)`
+
+`—`
+
+▸
+
+Description
+
+Render prop for custom element.
+
+`style`
+
+`CSSProperties | ((state: SliderState) => CSSProperties | undefined)`
+
+`—`
+
+▸
+
+Description
+
+Style or function returning style from state.
+
 ### 
 
 Value
@@ -637,6 +803,18 @@ Default
 
 Details
 
+`className`
+
+`string | ((state: SliderState) => string | undefined)`
+
+`—`
+
+▸
+
+Description
+
+Class name or function returning class name from state.
+
 `format`
 
 `((value: number) => string)`
@@ -649,9 +827,33 @@ Description
 
 Custom formatter for the displayed value. Overrides the root's `formatValue`.
 
+`render`
+
+`ReactElement | ((props: HTMLProps, state: SliderState) => ReactElement | null)`
+
+`—`
+
+▸
+
+Description
+
+Render prop for custom element.
+
+`style`
+
+`CSSProperties | ((state: SliderState) => CSSProperties | undefined)`
+
+`—`
+
+▸
+
+Description
+
+Style or function returning style from state.
+
 `type`
 
-`"current" | "pointer"`
+`'current' | 'pointer'`
 
 `—`
 

package/docs/reference/youtube-video.md

@@ -0,0 +1,339 @@
+# YouTubeVideo
+
+Video component that plays YouTube videos and playlists through the YouTube IFrame player
+
+The [YouTube IFrame player](https://developers.google.com/youtube/iframe_api_reference) keeps its own chrome hidden by default, so it drops into a [player skin](../concepts/skins.md) like any other media component; set `controls` to use YouTube’s UI instead.
+
+## Load a source
+
+`src` takes a YouTube URL or a raw 11-character video id. Watch, share (`youtu.be`), embed, Shorts, live, and privacy-enhanced (`youtube-nocookie.com`) URLs all work. Playlist URLs load through their `list` parameter, and a `t` parameter sets the start position.
+
+tsx
+
+```
+<YouTubeVideo src="https://www.youtube.com/watch?v=aqz-KE-bpKQ" />
+```
+
+## Behavior
+
+A few things work differently from a native `<video>` element, because the IFrame API doesn’t expose them:
+
+*   `loop` restarts playback when the video ends; the IFrame API has no single-video loop.
+*   Fullscreen targets the iframe, so YouTube’s own chrome shows in fullscreen.
+*   Picture-in-picture is unavailable, and the player reports it as unsupported.
+*   Caption tracks appear in `textTracks` once playback starts; YouTube reports no caption metadata before then.
+
+## Examples
+
+### Basic Usage
+
+App.tsx
+
+App.css
+
+```
+import { YouTubeVideo } from '@videojs/react/media/youtube-video';
+
+export default function BasicUsage() {
+  return (
+    <div className="youtube-video">
+      <YouTubeVideo src="https://www.youtube.com/watch?v=aqz-KE-bpKQ" controls />
+    </div>
+  );
+}
+```
+```
+.youtube-video {
+  width: 100%;
+  aspect-ratio: 16 / 9;
+}
+```
+
+## API Reference
+
+### Props
+
+Accepts these Video.js-specific props:
+
+Prop
+
+Type
+
+Default
+
+Details
+
+`autoplay`
+
+`boolean`
+
+`false`
+
+`controls`
+
+`boolean`
+
+`false`
+
+`defaultMuted`
+
+`boolean`
+
+`false`
+
+`loop`
+
+`boolean`
+
+`false`
+
+`muted`
+
+`boolean`
+
+`false`
+
+`playsInline`
+
+`boolean`
+
+`true`
+
+`poster`
+
+`string`
+
+`''`
+
+`preload`
+
+`MediaPreloadType`
+
+`'metadata'`
+
+`source`
+
+`{ src?: string; engine?: YouTubeSourceEngineConfig } | null`
+
+`null`
+
+▸
+
+Description
+
+YouTube URL or id in `src`, plus player parameters under `engine.youtube`. Replacing it re-derives `src`.
+
+`src`
+
+`string`
+
+`''`
+
+### Engine options
+
+#### `source.engine.youtube`
+
+Pass [YouTube player parameters](https://developers.google.com/youtube/player_parameters) under `source.engine.youtube`, spelled exactly as YouTube spells them. They’re serialized onto the embed URL untouched, and the embed reads them once, when its URL is built. [Media Sources](../concepts/media-sources.md) covers how engine options fit into a structured source.
+
+`autoplay`, `controls`, and `playsinline` come from the props of the same name, so they have no `engine.youtube` spelling. Parameters YouTube has deprecated are absent as well: `modestbranding`, `showinfo`, `autohide`, `theme`, and `listType: 'search'`. Anything YouTube adds next passes through the same way.
+
+tsx
+
+```
+<YouTubeVideo
+  source={{
+    src: 'https://www.youtube.com/watch?v=aqz-KE-bpKQ',
+    engine: { youtube: { hl: 'de', cc_load_policy: 1 } },
+  }}
+/>
+```
+
+Option
+
+Type
+
+Details
+
+`cc_lang_pref`
+
+`string | undefined`
+
+▸
+
+Description
+
+ISO 639-1 language to display captions in. Pair with `cc_load_policy`.
+
+`cc_load_policy`
+
+`1 | undefined`
+
+▸
+
+Description
+
+Show closed captions by default, even if the viewer has turned them off.
+
+`color`
+
+`'red' | 'white' | undefined`
+
+▸
+
+Description
+
+Progress-bar highlight color. Defaults to `'red'`.
+
+`disablekb`
+
+`0 | 1 | undefined`
+
+▸
+
+Description
+
+Stop responding to keyboard controls. Defaults to `0`.
+
+`enablejsapi`
+
+`0 | 1 | undefined`
+
+▸
+
+Description
+
+Allow the player to be driven through the IFrame Player API. Defaults to `0`.
+
+`end`
+
+`number | undefined`
+
+▸
+
+Description
+
+Stop playback this many seconds from the start of the video.
+
+`fs`
+
+`0 | 1 | undefined`
+
+▸
+
+Description
+
+Display the fullscreen button. Defaults to `1`.
+
+`hl`
+
+`string | undefined`
+
+▸
+
+Description
+
+Player interface language: an ISO 639-1 code or full locale (`fr`, `fr-ca`).
+
+`iv_load_policy`
+
+`1 | 3 | undefined`
+
+▸
+
+Description
+
+Show video annotations (`1`) or hide them (`3`). Defaults to `1`.
+
+`list`
+
+`string | undefined`
+
+▸
+
+Description
+
+Playlist id (prefixed with `PL`) or channel name, depending on `listType`.
+
+`listType`
+
+`'playlist' | 'user_uploads' | undefined`
+
+▸
+
+Description
+
+What `list` refers to.
+
+`loop`
+
+`0 | 1 | undefined`
+
+▸
+
+Description
+
+Repeat playback. Looping a single video also needs `playlist` set to the same id.
+
+`origin`
+
+`string | undefined`
+
+▸
+
+Description
+
+Embedding domain. Set it whenever `enablejsapi` is `1`.
+
+`playlist`
+
+`string | undefined`
+
+▸
+
+Description
+
+Comma-separated video ids to play after the one named by the URL path.
+
+`referrerPolicy`
+
+`ReferrerPolicy | undefined`
+
+▸
+
+Description
+
+`referrerpolicy` for the embed iframe. Not a YouTube player parameter.
+
+`rel`
+
+`0 | 1 | undefined`
+
+▸
+
+Description
+
+Draw related videos from the same channel (`0`) or anywhere (`1`). Defaults to `1`.
+
+`start`
+
+`number | undefined`
+
+▸
+
+Description
+
+Begin playback this many seconds from the start of the video.
+
+`widget_referrer`
+
+`string | undefined`
+
+▸
+
+Description
+
+Embedding URL reported to YouTube Analytics for widget-hosted players.
+
+### Ref
+
+Forwards its ref to the rendered `<iframe>`. The ref is an [HTMLIFrameElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLIFrameElement). Control playback with the component props and player APIs rather than the iframe ref.