@videojs/react 10.0.0-beta.27 → 10.0.0-beta.29

package/docs/reference/menu.md

@@ -595,18 +595,6 @@ Description
 
 Initial open state (uncontrolled).
 
-`isSubmenu`
-
-`boolean`
-
-`false`
-
-▸
-
-Description
-
-True when this menu instance is nested inside a parent menu's content.
-
 `open`
 
 `boolean`
@@ -715,7 +703,7 @@ Present when the menu is open.
 
 `data-side`
 
-`undefined | 'top' | 'bottom' | 'left'...`
+`undefined | 'left' | 'right' | 'top' ...`
 
 ▸
 
@@ -725,11 +713,11 @@ Rendered positioning side after collision handling. Absent on submenus.
 
 Type
 
-`undefined | 'top' | 'bottom' | 'left' | 'right'`
+`undefined | 'left' | 'right' | 'top' | 'bottom'`
 
 `data-align`
 
-`undefined | 'start' | 'center' | 'end'`
+`undefined | 'center' | 'start' | 'end'`
 
 ▸
 
@@ -883,7 +871,7 @@ Present when the menu is open.
 
 `data-side`
 
-`undefined | 'top' | 'bottom' | 'left'...`
+`undefined | 'left' | 'right' | 'top' ...`
 
 ▸
 
@@ -893,11 +881,11 @@ Rendered positioning side after collision handling. Absent on submenus.
 
 Type
 
-`undefined | 'top' | 'bottom' | 'left' | 'right'`
+`undefined | 'left' | 'right' | 'top' | 'bottom'`
 
 `data-align`
 
-`undefined | 'start' | 'center' | 'end'`
+`undefined | 'center' | 'start' | 'end'`
 
 ▸
 

package/docs/reference/mute-button.md

@@ -14,8 +14,40 @@ tsx
 
 Toggles mute on and off, and exposes a derived `volumeLevel` based on the current volume and mute state.
 
+Mute availability is separate from volume-level availability because some media can accept a mute command without supporting volume changes. When mute is unavailable or unsupported, the HTML custom element receives the native `hidden` attribute and the React component returns `null`. Toggling is also ignored while mute is unavailable.
+
 ## Styling
 
+Attribute
+
+Values
+
+Description
+
+`data-muted`
+
+Present / absent
+
+Present when the media is muted
+
+`data-volume-level`
+
+`"off"` | `"low"` | `"medium"` | `"high"`
+
+Current volume level
+
+`data-availability`
+
+`"available"` | `"unavailable"` | `"unsupported"`
+
+Whether the media can be muted
+
+`data-hidden`
+
+Present / absent
+
+Present on the HTML element while mute is unavailable or unsupported
+
 Style the button based on muted state:
 
 React renders a `<button>` element. Add a `className` to style it:
@@ -38,6 +70,8 @@ css
 .mute-button[data-volume-level="high"] .icon-high { display: inline; }
 ```
 
+Unavailable and unsupported buttons are hidden automatically. No availability selector or extra hiding CSS is required.
+
 ## Accessibility
 
 Renders a `<button>` with an automatic `aria-label`: “Unmute” when muted, “Mute” when unmuted. Override with the `label` prop. Keyboard activation: Enter / Space.

package/docs/reference/popover.md

@@ -363,7 +363,7 @@ Present when the popover is open.
 
 `data-side`
 
-`'top' | 'bottom' | 'left' | 'right'`
+`'left' | 'right' | 'top' | 'bottom'`
 
 ▸
 
@@ -373,7 +373,7 @@ Indicates the rendered side of the popover after collision handling.
 
 `data-align`
 
-`'start' | 'center' | 'end'`
+`'center' | 'start' | 'end'`
 
 ▸
 
@@ -473,7 +473,7 @@ Present when the popover is open.
 
 `data-side`
 
-`'top' | 'bottom' | 'left' | 'right'`
+`'left' | 'right' | 'top' | 'bottom'`
 
 ▸
 
@@ -483,7 +483,7 @@ Indicates the rendered side of the popover after collision handling.
 
 `data-align`
 
-`'start' | 'center' | 'end'`
+`'center' | 'start' | 'end'`
 
 ▸
 
@@ -515,7 +515,7 @@ Present when the popover is open.
 
 `data-side`
 
-`'top' | 'bottom' | 'left' | 'right'`
+`'left' | 'right' | 'top' | 'bottom'`
 
 ▸
 
@@ -525,7 +525,7 @@ Indicates the rendered side of the popover after collision handling.
 
 `data-align`
 
-`'start' | 'center' | 'end'`
+`'center' | 'start' | 'end'`
 
 ▸
 

package/docs/reference/poster.md

@@ -4,37 +4,119 @@ Poster image component that displays a thumbnail until video playback starts
 
 ## Anatomy
 
-Import the component:
-
 tsx
 
 ```
-<Poster src="poster.jpg" alt="Video preview" />
+<Poster />
 ```
 
 ## Behavior
 
-The poster is visible before playback starts. Once the user plays or seeks, the poster hides permanently — pausing does not bring it back. The poster reappears when a new source is loaded.
+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
 
-Style the poster with the `[data-visible]` attribute:
+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
 
 ```
-.poster:not([data-visible]) {
-  display: none;
+.media-poster:not([data-visible]) {
+  opacity: 0;
 }
 ```
 
-You control the child `<img>` — this means `srcset`, `sizes`, `loading="lazy"`, and framework image components all work naturally.
-
 ## Accessibility
 
-Unlike the native `<video poster>` attribute, this component allows you to provide accessible text alternatives for screen readers via the `alt` attribute on your child `<img>`. This means you can describe the poster image (e.g., `alt="Keynote speaker at a conference"`) or mark it as decorative with `alt=""` if it doesn’t convey meaningful information.
+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
 
@@ -54,11 +136,11 @@ const { Player } = createPlayer({ features: videoFeatures });
 
 export default function BasicUsage() {
   return (
-    <Player>
+    <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" src="https://image.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/thumbnail.jpg" />
+        <Poster className="media-poster" />
 
         <PlayButton
           className="media-play-button"
@@ -109,6 +191,22 @@ export default function BasicUsage() {
 
 ## API Reference
 
+### Props
+
+Prop
+
+Type
+
+Default
+
+Details
+
+`src`
+
+`string`
+
+`—`
+
 ### State
 
 State is accessible via the `render`, `className`, and `style` props.
@@ -123,6 +221,52 @@ Details
 
 `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
@@ -131,4 +275,34 @@ Type
 
 Details
 
-`data-visible`
+`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/slider.md

@@ -617,7 +617,7 @@ Details
 
 Description
 
-How the preview handles the slider boundaries. `'clamp'` keeps the preview within bounds, `'visible'` allows it to extend beyond the edges.
+Whether the preview is clamped to the slider bounds.
 
 #### Data attributes
 

package/docs/reference/time-slider.md

@@ -786,7 +786,7 @@ Details
 
 Description
 
-How the preview handles the slider boundaries. `'clamp'` keeps the preview within bounds, `'visible'` allows it to extend beyond the edges.
+Whether the preview is clamped to the slider bounds.
 
 #### Data attributes
 

package/docs/reference/tooltip.md

@@ -462,7 +462,7 @@ Present when the tooltip is open.
 
 `data-side`
 
-`'top' | 'bottom' | 'left' | 'right'`
+`'left' | 'right' | 'top' | 'bottom'`
 
 ▸
 
@@ -472,7 +472,7 @@ Indicates the rendered side of the tooltip after collision handling.
 
 `data-align`
 
-`'start' | 'center' | 'end'`
+`'center' | 'start' | 'end'`
 
 ▸
 
@@ -566,7 +566,7 @@ Present when the tooltip is open.
 
 `data-side`
 
-`'top' | 'bottom' | 'left' | 'right'`
+`'left' | 'right' | 'top' | 'bottom'`
 
 ▸
 
@@ -576,7 +576,7 @@ Indicates the rendered side of the tooltip after collision handling.
 
 `data-align`
 
-`'start' | 'center' | 'end'`
+`'center' | 'start' | 'end'`
 
 ▸
 
@@ -608,7 +608,7 @@ Present when the tooltip is open.
 
 `data-side`
 
-`'top' | 'bottom' | 'left' | 'right'`
+`'left' | 'right' | 'top' | 'bottom'`
 
 ▸
 
@@ -618,7 +618,7 @@ Indicates the rendered side of the tooltip after collision handling.
 
 `data-align`
 
-`'start' | 'center' | 'end'`
+`'center' | 'start' | 'end'`
 
 ▸
 
@@ -650,7 +650,7 @@ Present when the tooltip is open.
 
 `data-side`
 
-`'top' | 'bottom' | 'left' | 'right'`
+`'left' | 'right' | 'top' | 'bottom'`
 
 ▸
 
@@ -660,7 +660,7 @@ Indicates the rendered side of the tooltip after collision handling.
 
 `data-align`
 
-`'start' | 'center' | 'end'`
+`'center' | 'start' | 'end'`
 
 ▸
 
@@ -692,7 +692,7 @@ Present when the tooltip is open.
 
 `data-side`
 
-`'top' | 'bottom' | 'left' | 'right'`
+`'left' | 'right' | 'top' | 'bottom'`
 
 ▸
 
@@ -702,7 +702,7 @@ Indicates the rendered side of the tooltip after collision handling.
 
 `data-align`
 
-`'start' | 'center' | 'end'`
+`'center' | 'start' | 'end'`
 
 ▸
 

package/docs/reference/volume-slider.md

@@ -12,7 +12,7 @@ tsx
 
 ## Behavior
 
-Controls the media volume level. The slider maps its 0–100 internal range to the media’s 0–1 volume scale. When the media is muted, the fill level drops to 0 regardless of the stored volume value. When volume control is unavailable, the HTML custom element receives native `hidden`, `data-hidden`, and disabled ARIA semantics; the React component returns `null`.
+Controls the media volume level. The slider maps its 0–100 internal range to the media’s 0–1 volume scale. When the media is muted, the fill level drops to 0 regardless of the stored volume value. When `volumeAvailability` is not `"available"`, the HTML custom element receives native `hidden`, `data-hidden`, and disabled ARIA semantics; the React component returns `null`. This is independent of `mutedAvailability`, which controls whether the mute button is shown.
 
 ## Styling
 
@@ -507,7 +507,7 @@ Details
 
 Description
 
-How the preview handles the slider boundaries. `'clamp'` keeps the preview within bounds, `'visible'` allows it to extend beyond the edges.
+Whether the preview is clamped to the slider bounds.
 
 #### Data attributes
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@videojs/react",
   "type": "module",
-  "version": "10.0.0-beta.27",
+  "version": "10.0.0-beta.29",
   "description": "React library for building media players",
   "license": "Apache-2.0",
   "repository": {
@@ -132,11 +132,11 @@
     "react-dom": "^18.0.0 || ^19.0.0"
   },
   "dependencies": {
-    "@videojs/core": "10.0.0-beta.27",
-    "@videojs/media": "10.0.0-beta.27",
-    "@videojs/utils": "10.0.0-beta.27",
-    "@videojs/store": "10.0.0-beta.27",
-    "@videojs/spf": "10.0.0-beta.27"
+    "@videojs/core": "10.0.0-beta.29",
+    "@videojs/spf": "10.0.0-beta.29",
+    "@videojs/store": "10.0.0-beta.29",
+    "@videojs/utils": "10.0.0-beta.29",
+    "@videojs/media": "10.0.0-beta.29"
   },
   "devDependencies": {
     "@testing-library/react": "^16.3.0",
@@ -145,9 +145,11 @@
     "react": "^19.2.8",
     "react-dom": "^19.2.8",
     "tsdown": "^0.22.14",
+    "typescript": "6.0.2",
     "vitest": "^4.1.10",
-    "@videojs/icons": "10.0.0-beta.27",
-    "@videojs/skins": "10.0.0-beta.27"
+    "vjsc": "0.0.0",
+    "@videojs/icons": "10.0.0-beta.29",
+    "@videojs/skins": "10.0.0-beta.29"
   },
   "publishConfig": {
     "access": "public"
@@ -161,6 +163,9 @@
     "videojs"
   ],
   "scripts": {
+    "generate:vjsc": "vjsc generate",
+    "check:vjsc": "vjsc generate --check",
+    "prebuild": "pnpm run generate:vjsc",
     "build": "tsdown",
     "build:watch": "tsdown --watch ./src --no-clean",
     "dev": "pnpm build:watch",