@videojs/react 10.0.0-beta.26 → 10.0.0-beta.28

package/docs/concepts/overview.md

@@ -8,20 +8,20 @@ For the reasoning behind this design, see [Why Video.js?](./why-videojs.md).
 
 ## 1\. State management
 
-State is handled by a `Player.Provider`, which creates a central state store that all components can access. When you wrap your player in a `Player.Provider`, the components automatically connect to the state.
+State is handled by a preset player component, which creates a central state store that all components can access. When you wrap your player in `VideoPlayer`, the components automatically connect to the state.
 
 tsx
 
 ```
 {/* All components inside automatically connect to state */}
-<Player.Provider>
+<VideoPlayer>
   <VideoSkin>
     <Video src="video.mp4" />
   </VideoSkin>
-</Player.Provider>
+</VideoPlayer>
 ```
 
-You can access state and actions from anywhere within the provider with the [`usePlayer` hook](../reference/use-player.md).
+You can access state and actions from anywhere within `VideoPlayer` with the [`usePlayer` hook](../reference/use-player.md).
 
 [Learn more about state and actions](./features.md)
 
@@ -36,11 +36,11 @@ Skins are complete, pre-designed player UIs that package components and styles t
 tsx
 
 ```
-<Player.Provider>
+<VideoPlayer>
   <VideoSkin>
     <Video src="video.mp4" />
   </VideoSkin>
-</Player.Provider>
+</VideoPlayer>
 ```
 
 [Learn more about skins](./skins.md)
@@ -52,15 +52,15 @@ If you want more control than skins offer you, you can build your own UI from ou
 tsx
 
 ```
-<Player.Provider>
-  <Player.Container>
+<VideoPlayer>
+  <Container>
     <Video src="video.mp4" />
     <Controls.Root>
       <PlayButton />
       {/* ... */}
     </Controls.Root>
-  </Player.Container>
-</Player.Provider>
+  </Container>
+</VideoPlayer>
 ```
 
 To get started with UI components, you might consider [ejecting a skin](../how-to/customize-skins.md) and using its pre-styled components as a foundation.
@@ -82,11 +82,11 @@ DASH, YouTube, Vimeo, Mux, and more media elements are currently under developme
 tsx
 
 ```
-<Player.Provider>
+<VideoPlayer>
   <VideoSkin>
     <HlsJsVideo src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM.m3u8" />
   </VideoSkin>
-</Player.Provider>
+</VideoPlayer>
 ```
 
 ## Presets
@@ -100,18 +100,15 @@ Beyond the defaults, presets target more specific use cases. For example, `/back
 tsx
 
 ```
-import { createPlayer } from '@videojs/react';
-import { backgroundFeatures, BackgroundVideo, BackgroundVideoSkin } from '@videojs/react/background';
-
-const Player = createPlayer({ features: backgroundFeatures });
+import { BackgroundVideo, BackgroundVideoPlayer, BackgroundVideoSkin } from '@videojs/react/background';
 
 function Hero() {
   return (
-    <Player.Provider>
+    <BackgroundVideoPlayer>
       <BackgroundVideoSkin>
         <BackgroundVideo src="hero.mp4" />
       </BackgroundVideoSkin>
-    </Player.Provider>
+    </BackgroundVideoPlayer>
   );
 }
 ```

package/docs/concepts/presets.md

@@ -9,18 +9,15 @@ For example, the `@videojs/react/background` preset includes a media element wit
 App.tsx
 
 ```
-import { createPlayer } from '@videojs/react';
-import { backgroundFeatures, BackgroundVideo, BackgroundVideoSkin } from '@videojs/react/background';
-
-const Player = createPlayer({ features: backgroundFeatures });
+import { BackgroundVideo, BackgroundVideoPlayer, BackgroundVideoSkin } from '@videojs/react/background';
 
 function Hero() {
   return (
-    <Player.Provider>
+    <BackgroundVideoPlayer>
       <BackgroundVideoSkin>
         <BackgroundVideo src="hero.mp4" />
       </BackgroundVideoSkin>
-    </Player.Provider>
+    </BackgroundVideoPlayer>
   );
 }
 ```
@@ -47,7 +44,7 @@ Feature bundle
 
 Features
 
-[playback](../reference/feature-playback.md), [playbackRate](../reference/feature-playback-rate.md), [quality](../reference/feature-quality.md), [audioTrack](../reference/feature-audio-track.md), [volume](../reference/feature-volume.md), [time](../reference/feature-time.md), [source](../reference/feature-source.md), [buffer](../reference/feature-buffer.md), [fullscreen](../reference/feature-fullscreen.md), [pip](../reference/feature-pip.md), [remotePlayback](../reference/feature-remote-playback.md), [controls](../reference/feature-controls.md), [textTrack](../reference/feature-text-tracks.md), [error](../reference/feature-error.md)
+[playback](../reference/feature-playback.md), [playbackRate](../reference/feature-playback-rate.md), [quality](../reference/feature-quality.md), [audioTrack](../reference/feature-audio-track.md), [volume](../reference/feature-volume.md), [time](../reference/feature-time.md), [source](../reference/feature-source.md), [buffer](../reference/feature-buffer.md), [fullscreen](../reference/feature-fullscreen.md), [pip](../reference/feature-pip.md), [remotePlayback](../reference/feature-remote-playback.md), [controls](../reference/feature-controls.md), [textTrack](../reference/feature-text-tracks.md), [error](../reference/feature-error.md), metadata
 
 Skins
 
@@ -75,7 +72,7 @@ Feature bundle
 
 Features
 
-[playback](../reference/feature-playback.md), [playbackRate](../reference/feature-playback-rate.md), [volume](../reference/feature-volume.md), [time](../reference/feature-time.md), [source](../reference/feature-source.md), [buffer](../reference/feature-buffer.md), [error](../reference/feature-error.md)
+[playback](../reference/feature-playback.md), [playbackRate](../reference/feature-playback-rate.md), [volume](../reference/feature-volume.md), [time](../reference/feature-time.md), [source](../reference/feature-source.md), [buffer](../reference/feature-buffer.md), [error](../reference/feature-error.md), metadata
 
 Skins
 
@@ -127,7 +124,7 @@ Feature bundle
 
 Features
 
-[playback](../reference/feature-playback.md), [volume](../reference/feature-volume.md), [time](../reference/feature-time.md), [source](../reference/feature-source.md), [buffer](../reference/feature-buffer.md), [error](../reference/feature-error.md), [live](../reference/feature-live.md)
+[playback](../reference/feature-playback.md), [volume](../reference/feature-volume.md), [time](../reference/feature-time.md), [source](../reference/feature-source.md), [buffer](../reference/feature-buffer.md), [error](../reference/feature-error.md), [live](../reference/feature-live.md), metadata
 
 Skins
 
@@ -155,7 +152,7 @@ Feature bundle
 
 Features
 
-[playback](../reference/feature-playback.md), [volume](../reference/feature-volume.md), [time](../reference/feature-time.md), [source](../reference/feature-source.md), [buffer](../reference/feature-buffer.md), [fullscreen](../reference/feature-fullscreen.md), [pip](../reference/feature-pip.md), [remotePlayback](../reference/feature-remote-playback.md), [controls](../reference/feature-controls.md), [textTrack](../reference/feature-text-tracks.md), [error](../reference/feature-error.md), [live](../reference/feature-live.md)
+[playback](../reference/feature-playback.md), [volume](../reference/feature-volume.md), [time](../reference/feature-time.md), [source](../reference/feature-source.md), [buffer](../reference/feature-buffer.md), [fullscreen](../reference/feature-fullscreen.md), [pip](../reference/feature-pip.md), [remotePlayback](../reference/feature-remote-playback.md), [controls](../reference/feature-controls.md), [textTrack](../reference/feature-text-tracks.md), [error](../reference/feature-error.md), [live](../reference/feature-live.md), metadata
 
 Skins
 
@@ -173,8 +170,10 @@ Default media element
 
 ## What’s in a preset
 
-Each preset exports up to three things:
+Each React preset exports a named, preconfigured player component and typed `usePlayer` hook, plus the building blocks needed to customize or eject from it:
 
+*   **Player** — A player component named for the preset, such as `VideoPlayer`, already configured with the preset’s feature bundle.
+*   **Typed hook** — A `usePlayer` hook whose state and actions match the preset.
 *   **Feature bundle** — An array of [features](./features.md) that define the player’s state and actions. For example, the video feature bundle includes playback, volume, time, fullscreen, and more.
 *   **Skins** — Pre-built UIs designed for that feature bundle. For example, a video skin renders fullscreen and PiP controls because the video feature bundle includes those features. An audio skin doesn’t.
 *   **Media element** — A media component suited to the use case. For example, the background video element bakes in autoplay, mute, and loop.
@@ -192,21 +191,21 @@ Add features to a preset’s feature bundle to enable new functionality. For exa
 App.tsx
 
 ```
-import { createPlayer, playbackFeature } from '@videojs/react';
+import { Container, createPlayer, playbackFeature } from '@videojs/react';
 import { backgroundFeatures, BackgroundVideo } from '@videojs/react/background';
 
-const Player = createPlayer({
+const { Player } = createPlayer({
   features: [...backgroundFeatures, playbackFeature],
 });
 
 function Hero() {
   return (
-    <Player.Provider>
-      <Player.Container>
+    <Player>
+      <Container>
         <BackgroundVideo src="hero.mp4" />
         <PlayButton />
-      </Player.Container>
-    </Player.Provider>
+      </Container>
+    </Player>
   );
 }
 ```
@@ -222,9 +221,9 @@ A preset’s default media element is just the starting point. You can replace i
 tsx
 
 ```
-<Player.Provider>
+<VideoPlayer>
   <VideoSkin>
     <HlsJsVideo src="https://example.com/stream.m3u8" />
   </VideoSkin>
-</Player.Provider>
+</VideoPlayer>
 ```