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

package/docs/concepts/mux-data.md

@@ -0,0 +1,84 @@
+# Mux Data
+
+Monitor playback quality and viewer experience by adding the Mux Data component to a player
+
+[Mux Data](https://www.mux.com/data) measures playback quality: startup time, rebuffering, playback failures, and watch time. Add the Mux Data component to a player and it monitors whichever media that player is playing:
+
+App.tsx
+
+```
+import { createPlayer } from '@videojs/react';
+import { MuxData } from '@videojs/react/media/mux-data';
+import { MuxVideo } from '@videojs/react/media/mux-video';
+import { videoFeatures } from '@videojs/react/video';
+
+const Player = createPlayer({ features: videoFeatures });
+
+export default function App() {
+  return (
+    <Player.Provider>
+      <Player.Container>
+        <MuxVideo source={{ playbackId: 'BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM' }} playsInline />
+        <MuxData />
+      </Player.Container>
+    </Player.Provider>
+  );
+}
+```
+
+That’s the whole setup for Mux-hosted playback — no environment key required. The component renders nothing; place it inside the player, as a sibling of the media element.
+
+Note
+
+Mux Data is opt-in. No media element monitors playback on its own, Mux ones included, so nothing is measured and no beacons are sent until you add this component.
+
+## Environment key
+
+Mux Data needs to know which environment a view belongs to. For Mux-hosted playback it works that out on its own: the component reports the Mux playback ID as the view’s `video_id`, and Mux attributes the view to the environment that owns that playback ID.
+
+Set `envKey` when you monitor a source Mux doesn’t host, like a self-hosted HLS or DASH stream. Find the key in the [Mux dashboard](https://dashboard.mux.com/settings/data):
+
+tsx
+
+```
+<HlsJsVideo src="https://example.com/stream.m3u8" />
+<MuxData envKey="YOUR_ENV_KEY" />
+```
+
+An explicit key always wins, so set one to send Mux-hosted views to a specific environment.
+
+## Any media element works
+
+The component attaches to the media the player is using, not to a specific element type, so it monitors [MuxVideo](../reference/mux-video.md), [HlsJsVideo](../reference/hlsjs-video.md), [DashVideo](../reference/dash-video.md), and the rest alike. When the media exposes an [hls.js](https://github.com/video-dev/hls.js/) engine, the component hands that engine to the Mux Data SDK so it can report stream-level detail alongside the playback metrics.
+
+The `video_id` it reports is the Mux playback ID for streams served from `stream.mux.com`, and the source URL otherwise. Each view also gets a generated `view_session_id`. Override either through `metadata`.
+
+## Describe the view
+
+Pass Mux Data [metadata](https://www.mux.com/docs/guides/make-your-data-actionable-with-metadata) to label views with your own titles, viewer IDs, and custom dimensions. It’s an object, so it’s a property rather than an attribute:
+
+tsx
+
+```
+<MuxData metadata={{ video_title: 'Big Buck Bunny', viewer_user_id: 'u_789' }} />
+```
+
+## Configuration
+
+The [MuxData reference](../reference/mux-data.md) lists every option: the metadata and software fields above, plus the beacon domain, cookie, debug, and SDK settings. Most options update the current view in place; changing `MuxDataSdk`, `beaconCollectionDomain`, `debug`, or `disableCookies` restarts monitoring, ending the current view and starting a new one.
+
+## See also
+
+[MuxData reference](../reference/mux-data.md)
+
+[MuxVideo element reference](../reference/mux-video.md)
+
+[MuxAudio element reference](../reference/mux-audio.md)
+
+[
+
+Google Cast
+
+The other media component you compose onto a player
+
+](./cast.md)

package/docs/concepts/overview.md

@@ -27,7 +27,7 @@ You can access state and actions from anywhere within the provider with the [`us
 
 ## 2\. User interface
 
-Use a prebuilt **skin** or build your own from the individual **UI components** .
+Use a prebuilt **skin** or build your own from the individual **UI components**.
 
 ### Skins
 
@@ -55,10 +55,10 @@ tsx
 <Player.Provider>
   <Player.Container>
     <Video src="video.mp4" />
-    <MediaControls>
+    <Controls.Root>
       <PlayButton />
       {/* ... */}
-    </MediaControls>
+    </Controls.Root>
   </Player.Container>
 </Player.Provider>
 ```
@@ -84,7 +84,7 @@ tsx
 ```
 <Player.Provider>
   <VideoSkin>
-    <HlsVideo src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM.m3u8" />
+    <HlsJsVideo src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM.m3u8" />
   </VideoSkin>
 </Player.Provider>
 ```

package/docs/concepts/presets.md

@@ -47,11 +47,17 @@ 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), [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)
 
 Skins
 
-`<MinimalVideoSkin>`, `<VideoSkin>`
+`<MinimalVideoSkin>`
+
+`import '@videojs/react/video/minimal-skin.css';`
+
+`<VideoSkin>`
+
+`import '@videojs/react/video/skin.css';`
 
 Default media element
 
@@ -73,7 +79,13 @@ Features
 
 Skins
 
-`<MinimalAudioSkin>`, `<AudioSkin>`
+`<MinimalAudioSkin>`
+
+`import '@videojs/react/audio/minimal-skin.css';`
+
+`<AudioSkin>`
+
+`import '@videojs/react/audio/skin.css';`
 
 Default media element
 
@@ -97,6 +109,8 @@ Skins
 
 `<BackgroundVideoSkin>`
 
+`import '@videojs/react/background/skin.css';`
+
 Default media element
 
 `<BackgroundVideo>`
@@ -117,7 +131,13 @@ Features
 
 Skins
 
-`<MinimalLiveAudioSkin>`, `<LiveAudioSkin>`
+`<MinimalLiveAudioSkin>`
+
+`import '@videojs/react/live-audio/minimal-skin.css';`
+
+`<LiveAudioSkin>`
+
+`import '@videojs/react/live-audio/skin.css';`
 
 Default media element
 
@@ -139,7 +159,13 @@ Features
 
 Skins
 
-`<MinimalLiveVideoSkin>`, `<LiveVideoSkin>`
+`<MinimalLiveVideoSkin>`
+
+`import '@videojs/react/live-video/minimal-skin.css';`
+
+`<LiveVideoSkin>`
+
+`import '@videojs/react/live-video/skin.css';`
 
 Default media element
 
@@ -198,7 +224,7 @@ tsx
 ```
 <Player.Provider>
   <VideoSkin>
-    <HlsVideo src="https://example.com/stream.m3u8" />
+    <HlsJsVideo src="https://example.com/stream.m3u8" />
   </VideoSkin>
 </Player.Provider>
 ```

package/docs/concepts/security.md

@@ -0,0 +1,32 @@
+# Security
+
+How to configure Content Security Policy for your video player
+
+Content Security Policy (CSP) limits which resources a page can load. Video.js uses the URLs you configure for media, posters, thumbnails, and captions. Some HLS renderers also create blob URLs or web workers, so your policy must allow those resources too.
+
+## Allow player resources
+
+*   `media-src` must allow your media URLs.
+*   `img-src` must allow any poster or thumbnail image URLs.
+*   `connect-src` must allow HLS manifests, playlists, captions, and segment requests when using HLS playback.
+*   `media-src blob:` is required when using the HLS player variants, which use MSE-backed playback.
+*   `worker-src blob:` is required when using the `hls.js` player variants.
+*   `style-src 'unsafe-inline'` is required for some player UI and HTML player styling behavior.
+
+## Example
+
+http
+
+```
+Content-Security-Policy:
+  script-src 'self';
+  style-src 'self' 'unsafe-inline';
+  img-src 'self' https: data: blob:;
+  media-src 'self' https: blob:;
+  connect-src 'self' https:;
+  worker-src 'self' blob:;
+```
+
+This policy assumes you bundle Video.js with your application or serve it from your own origin. If you load the player from a CDN, add that CDN’s origin to `script-src`.
+
+Replace broad sources such as `https:` with the exact origins your player uses. Remove sources your deployment does not need, and keep `blob:` only where your selected HLS renderer requires it.