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

package/docs/reference/has-registered-locale.md

@@ -40,7 +40,7 @@ BCP 47 tag to test.
 
 Type
 
-`string & object | 'ar' | 'az' | 'bs' | 'bg' | 'bn' | 'ca' | 'cs' | 'cy' | 'da' | 'de' | 'el' | 'es' | 'et' | 'eu' | 'fa' | 'fi' | 'fr' | 'gd' | 'gl' | 'he' | 'hi' | 'hr' | 'hu' | 'it' | 'ja' | 'ko' | 'lv' | 'mr' | 'nb' | 'nl' | 'nn' | 'ne' | 'oc' | 'pl' | 'pt-BR' | 'pt-PT' | 'ro' | 'ru' | 'sk' | 'sl' | 'sr' | 'sv' | 'te' | 'th' | 'tr' | 'uk' | 'vi' | 'zh-CN' | 'zh-TW'`
+`string & object | 'ar' | 'az' | 'bs' | 'bg' | 'bn' | 'ca' | 'cs' | 'cy' | 'da' | 'de' | 'el' | 'es' | 'et' | 'eu' | 'fa' | 'fi' | 'fr' | 'gd' | 'gl' | 'he' | 'hi' | 'hr' | 'hu' | 'id' | 'it' | 'ja' | 'ko' | 'lt' | 'lv' | 'mr' | 'nb' | 'nl' | 'nn' | 'ne' | 'oc' | 'pl' | 'pt-BR' | 'pt-PT' | 'ro' | 'ru' | 'sk' | 'sl' | 'sr' | 'sv' | 'te' | 'th' | 'tr' | 'uk' | 'vi' | 'zh-CN' | 'zh-TW'`
 
 ### Return Value
 

package/docs/reference/{simple-hls-audio-only.md → hls-audio.md}

@@ -1,8 +1,8 @@
-# SimpleHlsAudioOnly
+# HlsAudio
 
 Audio-only HLS element that plays the audio rendition of an HLS stream
 
-Audio-only HLS element that plays just the audio rendition of an HLS stream — even when the source is a mixed audio/video manifest. Useful for audio podcast players, background audio, and bandwidth-constrained contexts where downloading video data would be wasted. For full audio/video HLS playback, see [SimpleHlsVideo](/docs/framework/html/reference/simple-hls-video/).
+Audio-only HLS element that plays just the audio rendition of an HLS stream — even when the source is a mixed audio/video manifest. Useful for audio podcast players, background audio, and bandwidth-constrained contexts where downloading video data would be wasted. For full audio/video HLS playback, see [HlsVideo](/docs/framework/html/reference/hls-video/).
 
 ## Examples
 
@@ -13,14 +13,14 @@ App.tsx
 App.css
 
 ```
-import { SimpleHlsAudioOnly } from '@videojs/react/media/simple-hls-audio-only';
+import { HlsAudio } from '@videojs/react/media/hls-audio';
 
 export default function BasicUsage() {
-  return <SimpleHlsAudioOnly className="simple-hls-audio-only" src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM.m3u8" controls />;
+  return <HlsAudio className="hls-audio" src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM.m3u8" controls />;
 }
 ```
 ```
-.simple-hls-audio-only {
+.hls-audio {
   width: 100%;
   height: 54px;
 }

package/docs/reference/{simple-hls-video.md → hls-video.md}

@@ -1,4 +1,4 @@
-# SimpleHlsVideo
+# HlsVideo
 
 Lightweight HLS video element with minimal bundle size
 
@@ -13,14 +13,14 @@ App.tsx
 App.css
 
 ```
-import { SimpleHlsVideo } from '@videojs/react/media/simple-hls-video';
+import { HlsVideo } from '@videojs/react/media/hls-video';
 
 export default function BasicUsage() {
-  return <SimpleHlsVideo className="simple-hls-video" src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM.m3u8" autoPlay muted playsInline loop />;
+  return <HlsVideo className="hls-video" src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM.m3u8" autoPlay muted playsInline loop />;
 }
 ```
 ```
-.simple-hls-video {
+.hls-video {
   width: 100%;
   aspect-ratio: 16 / 9;
 }

package/docs/reference/hlsjs-video.md

@@ -2,7 +2,7 @@
 
 HLS video element powered by hls.js for adaptive bitrate streaming
 
-HLS video element powered by [hls.js](https://github.com/video-dev/hls.js/) for adaptive bitrate streaming. It’s the recommended choice for HLS playback: full feature support across every browser. For alternatives, see [NativeHlsVideo](/docs/framework/html/reference/native-hls-video/) (browser-native HLS) or [SimpleHlsVideo](/docs/framework/html/reference/simple-hls-video/) (lightweight HLS).
+HLS video element powered by [hls.js](https://github.com/video-dev/hls.js/) for adaptive bitrate streaming. It’s the recommended choice for HLS playback: full feature support across every browser. For alternatives, see [NativeHlsVideo](/docs/framework/html/reference/native-hls-video/) (browser-native HLS) or [HlsVideo](/docs/framework/html/reference/hls-video/) (lightweight HLS).
 
 ## Examples
 
@@ -40,29 +40,31 @@ Default
 
 Details
 
-`config`
+`preload`
 
-`HlsMediaConfig`
+`PreloadType`
 
-`{}`
+`'metadata'`
 
 ▸
 
 Description
 
-Playback configuration: a preferred playback path, an explicit content type, and options forwarded to hls.js. Reassigning reloads the engine when an engine-relevant option changes.
+Preload type (`'none'` / `'metadata'` / `'auto'`).
 
-`preload`
+`source`
 
-`PreloadType`
+`HlsSource | null`
 
-`'metadata'`
+`null`
 
 ▸
 
 Description
 
-Preload type (`'none'` / `'metadata'` / `'auto'`).
+Structured source: what to play (`src`, an optional `type`) plus how to play it (`preferPlayback`, `engine`). Assigning it derives `src`.
+
+Sources are compared structurally, so reassigning an equivalent object — an inline React prop, for instance — is a no-op. Only a change to the engine options (or to the resolved content type) recreates the playback engine.
 
 `src`
 
@@ -70,6 +72,12 @@ Preload type (`'none'` / `'metadata'` / `'auto'`).
 
 `''`
 
+▸
+
+Description
+
+Media source URL. Assigning it replaces the identity half of `source` and leaves `type` and the engine options intact, so changing the URL never disturbs engine configuration.
+
 `streamType`
 
 `StreamType`

package/docs/reference/menu.md

@@ -104,6 +104,7 @@ App.css
 
 ```
 import {
+  Container,
   createPlayer,
   Menu,
   useAudioTrackOptions,
@@ -115,7 +116,7 @@ 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 { Player } = createPlayer({ features: videoFeatures });
 const src = 'https://stream.mux.com/s41JYeqIpBMBzE4OzxDyGR2yrp2hD1CQ6gJN9SlVGDQ.m3u8';
 
 function SettingsMenu(): ReactNode {
@@ -136,27 +137,26 @@ function SettingsMenu(): ReactNode {
         Settings
       </Menu.Trigger>
       <Menu.Content className="menu">
-        <Menu.View className="menu-panel">
+        <div className="menu-panel">
           {hasQuality ? (
             <Menu.Root>
               <Menu.Trigger
-                type="quality"
                 className="menu-item"
                 render={(props) => (
                   <div {...props}>
                     <span>Quality</span>
                     <span className="menu-value">
-                      <Menu.ItemValue />
+                      {quality.selectedLabel}
                       <span aria-hidden="true">›</span>
                     </span>
                   </div>
                 )}
               />
               <Menu.Content className="menu-panel">
-                <Menu.Back className="menu-back">
+                <Menu.Item className="menu-back">
                   <span aria-hidden="true">‹</span>
                   Quality
-                </Menu.Back>
+                </Menu.Item>
                 <Menu.RadioGroup
                   className="menu-group"
                   value={quality.value}
@@ -192,23 +192,22 @@ function SettingsMenu(): ReactNode {
           {hasAudioTrack ? (
             <Menu.Root>
               <Menu.Trigger
-                type="audio-track"
                 className="menu-item"
                 render={(props) => (
                   <div {...props}>
                     <span>Audio</span>
                     <span className="menu-value">
-                      <Menu.ItemValue />
+                      {audioTrack.selectedLabel}
                       <span aria-hidden="true">›</span>
                     </span>
                   </div>
                 )}
               />
               <Menu.Content className="menu-panel">
-                <Menu.Back className="menu-back">
+                <Menu.Item className="menu-back">
                   <span aria-hidden="true">‹</span>
                   Audio
-                </Menu.Back>
+                </Menu.Item>
                 <Menu.RadioGroup
                   className="menu-group"
                   value={audioTrack.value}
@@ -240,23 +239,22 @@ function SettingsMenu(): ReactNode {
           {hasPlaybackRate ? (
             <Menu.Root>
               <Menu.Trigger
-                type="playback-rate"
                 className="menu-item"
                 render={(props) => (
                   <div {...props}>
                     <span>Speed</span>
                     <span className="menu-value">
-                      <Menu.ItemValue />
+                      {playbackRate.selectedLabel}
                       <span aria-hidden="true">›</span>
                     </span>
                   </div>
                 )}
               />
               <Menu.Content className="menu-panel">
-                <Menu.Back className="menu-back">
+                <Menu.Item className="menu-back">
                   <span aria-hidden="true">‹</span>
                   Speed
-                </Menu.Back>
+                </Menu.Item>
                 <Menu.RadioGroup
                   className="menu-group"
                   value={playbackRate.value}
@@ -288,23 +286,22 @@ function SettingsMenu(): ReactNode {
           {hasCaptions ? (
             <Menu.Root>
               <Menu.Trigger
-                type="captions"
                 className="menu-item"
                 render={(props) => (
                   <div {...props}>
                     <span>Captions</span>
                     <span className="menu-value">
-                      <Menu.ItemValue />
+                      {captions.selectedLabel}
                       <span aria-hidden="true">›</span>
                     </span>
                   </div>
                 )}
               />
               <Menu.Content className="menu-panel">
-                <Menu.Back className="menu-back">
+                <Menu.Item className="menu-back">
                   <span aria-hidden="true">‹</span>
                   Captions
-                </Menu.Back>
+                </Menu.Item>
                 <Menu.RadioGroup
                   className="menu-group"
                   value={captions.value}
@@ -336,7 +333,7 @@ function SettingsMenu(): ReactNode {
           <Menu.Item className="menu-item" onSelect={() => navigator.clipboard?.writeText(window.location.href)}>
             Copy link
           </Menu.Item>
-        </Menu.View>
+        </div>
       </Menu.Content>
     </Menu.Root>
   );
@@ -344,8 +341,8 @@ function SettingsMenu(): ReactNode {
 
 export default function BasicUsage() {
   return (
-    <Player.Provider>
-      <Player.Container className="media-container">
+    <Player>
+      <Container className="media-container">
         <HlsJsVideo src={src} autoPlay crossOrigin="anonymous" muted playsInline loop>
           <track kind="captions" src="/docs/demos/captions-button/captions.vtt" srcLang="en" label="English" />
           <track kind="subtitles" src="/docs/demos/captions-button/captions.vtt" srcLang="es" label="Spanish" />
@@ -353,8 +350,8 @@ export default function BasicUsage() {
         <div className="menu-bar">
           <SettingsMenu />
         </div>
-      </Player.Container>
-    </Player.Provider>
+      </Container>
+    </Player>
   );
 }
 ```
@@ -367,6 +364,30 @@ export default function BasicUsage() {
   width: 100%;
 }
 
+@keyframes media-menu-content-exit {
+  from {
+    filter: none;
+    translate: 0 0;
+  }
+
+  to {
+    filter: blur(8px);
+    translate: -100% 0;
+  }
+}
+
+@keyframes media-menu-content-enter {
+  from {
+    filter: blur(8px);
+    translate: -100% 0;
+  }
+
+  to {
+    filter: none;
+    translate: 0 0;
+  }
+}
+
 .menu-bar {
   position: absolute;
   right: 10px;
@@ -424,41 +445,28 @@ export default function BasicUsage() {
   will-change: translate;
 }
 
-.menu-panel[data-starting-style],
-.menu-panel[data-ending-style] {
-  overflow: hidden;
-}
-
-.menu-panel[data-menu-root-view][data-menu-view-state="inactive"] {
+.menu[data-submenu-expanded="true"] > :not([data-submenu]) {
   filter: blur(8px);
   translate: -100% 0;
+  animation: media-menu-content-exit var(--menu-transition-duration) ease-in-out both;
 }
 
-.menu-panel[data-submenu] {
-  z-index: 1;
+.menu[data-submenu-expanded="false"] > :not([data-submenu]) {
+  animation: media-menu-content-enter var(--menu-transition-duration) ease-in-out both;
 }
 
-.menu-panel[data-submenu]:not([data-open], [data-ending-style]) {
-  translate: -100% 0;
-  transition-property: none;
+.menu-panel[data-submenu] {
+  z-index: 1;
 }
 
 .menu-panel[data-submenu][data-starting-style],
 .menu-panel[data-submenu][data-ending-style] {
+  overflow: hidden;
   pointer-events: none;
   filter: blur(8px);
-}
-
-.menu-panel[data-submenu][data-starting-style][data-direction="forward"],
-.menu-panel[data-submenu][data-ending-style][data-direction="back"] {
   translate: 100% 0;
 }
 
-.menu-panel[data-submenu][data-ending-style][data-direction="forward"],
-.menu-panel[data-submenu][data-starting-style][data-direction="back"] {
-  translate: -100% 0;
-}
-
 .menu-item,
 .menu-back {
   display: flex;
@@ -749,7 +757,7 @@ Details
 
 Description
 
-Width of the incoming submenu view (px). Set on root Content before each transition.
+Width of the active menu panel (px).
 
 `--media-menu-height`
 
@@ -757,7 +765,7 @@ Width of the incoming submenu view (px). Set on root Content before each transit
 
 Description
 
-Height of the incoming submenu view (px). Set on root Content before each transition.
+Height of the active menu panel (px).
 
 `--media-menu-available-width`
 
@@ -765,7 +773,7 @@ Height of the incoming submenu view (px). Set on root Content before each transi
 
 Description
 
-Viewport-constrained max width for the menu (px). Set from popover positioning.
+Viewport-constrained max width for the menu (px).
 
 `--media-menu-available-height`
 
@@ -773,35 +781,7 @@ Viewport-constrained max width for the menu (px). Set from popover positioning.
 
 Description
 
-Viewport-constrained max height for the menu (px). Set from popover positioning.
-
-### 
-
-Back
-
-Button that navigates back to the parent menu view. Place at the top of a submenu Content.
-
-#### Props
-
-Prop
-
-Type
-
-Default
-
-Details
-
-`label`
-
-`string | Text`
-
-`—`
-
-▸
-
-Description
-
-Accessible label for the back button.
+Viewport-constrained max height for the menu (px).
 
 ### 
 
@@ -877,7 +857,7 @@ Present on all navigable item types: Item, RadioItem, CheckboxItem, and the Trig
 
 Description
 
-Present when the item has keyboard or pointer focus (via roving tabindex).
+Present when the item is highlighted. Set to `pointer` when pointer movement caused the highlight; otherwise empty.
 
 ### 
 
@@ -985,18 +965,6 @@ Description
 
 Called when the item is selected.
 
-`type`
-
-`MenuItemSettingType`
-
-`—`
-
-▸
-
-Description
-
-Setting kind for submenu triggers (`playback-rate`, `quality`, `audio-track`, or `captions`).
-
 #### Data attributes
 
 Attribute
@@ -1019,7 +987,7 @@ Present on all navigable item types: Item, RadioItem, CheckboxItem, and the Trig
 
 Description
 
-Present when the item has keyboard or pointer focus (via roving tabindex).
+Present when the item is highlighted. Set to `pointer` when pointer movement caused the highlight; otherwise empty.
 
 ### 
 
@@ -1063,60 +1031,6 @@ When `true`, renders even when unchecked (useful for animating out). Defaults to
 
 ### 
 
-ItemValue
-
-Displays the current value for a settings menu item from `Menu.Item` or `Menu.Trigger` context.
-
-#### Data attributes
-
-Attribute
-
-Type
-
-Details
-
-`data-open`
-
-▸
-
-Description
-
-Present when the menu is open.
-
-`data-side`
-
-`undefined | 'top' | 'bottom' | 'left'...`
-
-▸
-
-Description
-
-Rendered positioning side after collision handling. Absent on submenus.
-
-Type
-
-`undefined | 'top' | 'bottom' | 'left' | 'right'`
-
-`data-align`
-
-`undefined | 'start' | 'center' | 'end'`
-
-▸
-
-Description
-
-Popover positioning alignment. Absent on submenus.
-
-`data-submenu`
-
-▸
-
-Description
-
-Present on Content when this menu is nested inside a parent menu.
-
-### 
-
 RadioGroup
 
 A group of mutually exclusive radio items. Renders a `<div>` with `role="group"`.
@@ -1217,7 +1131,7 @@ Present on all navigable item types: Item, RadioItem, CheckboxItem, and the Trig
 
 Description
 
-Present when the item has keyboard or pointer focus (via roving tabindex).
+Present when the item is highlighted. Set to `pointer` when pointer movement caused the highlight; otherwise empty.
 
 ### 
 
@@ -1229,7 +1143,7 @@ Visual divider between groups of items. Renders a `<div>` with `role="separator"
 
 Trigger
 
-Button that toggles the menu visibility. At root level renders a `<button>`. When inside a parent menu (as a submenu trigger), renders as a `<div role="menuitem">` that pushes the submenu on click or ArrowRight.
+Button that toggles the menu visibility. At root level renders a `<button>`. When inside a parent menu (as a submenu trigger), renders as a `<div role="menuitem">` that opens the submenu on click or ArrowRight.
 
 #### Props
 
@@ -1253,17 +1167,17 @@ Description
 
 Disables the trigger.
 
-`type`
+`onClick`
 
-`MenuItemSettingType`
+`MouseEventHandler<MenuTriggerElement>`
 
 `—`
 
-▸
+`onKeyDown`
 
-Description
+`KeyboardEventHandler<MenuTriggerElement>`
 
-Setting kind for submenu triggers (`playback-rate`, `quality`, `audio-track`, or `captions`).
+`—`
 
 #### Data attributes
 
@@ -1287,10 +1201,4 @@ Present on all navigable item types: Item, RadioItem, CheckboxItem, and the Trig
 
 Description
 
-Present when the item has keyboard or pointer focus (via roving tabindex).
-
-### 
-
-View
-
-Root menu view inside the menu viewport.
+Present when the item is highlighted. Set to `pointer` when pointer movement caused the highlight; otherwise empty.