@videojs/react 10.0.0-rc.1 → 10.0.0-rc.2

package/docs/reference/thumbnail.md

@@ -23,7 +23,9 @@ tsx
     default
   />
 </Video>
-<Thumbnail time={12} />
+<Thumbnail.Root time={12}>
+  <Thumbnail.Image />
+</Thumbnail.Root>
 ```
 
 A same-origin track needs none of this.
@@ -41,12 +43,14 @@ import { Thumbnail } from '@videojs/react';
 tsx
 
 ```
-<Thumbnail time={12} />
+<Thumbnail.Root>
+  <Thumbnail.Image />
+</Thumbnail.Root>
 ```
 
 ## Behavior
 
-`Thumbnail` resolves an image for the current `time`.
+The thumbnail root resolves an image for the current `time`, owns `src` and `srcset` on it, and reports its loading lifecycle. In React, render that image with `Thumbnail.Image`. In HTML, the `<img>` child is optional: leave it out and `<media-thumbnail>` draws an image of its own in its shadow DOM; supply one to replace it and compose overlays or loading indicators beside it.
 
 Supported source formats:
 
@@ -67,7 +71,9 @@ Opt out to fetch them without CORS:
 tsx
 
 ```
-<Thumbnail time={12} crossOrigin={null} />
+<Thumbnail.Root time={12}>
+  <Thumbnail.Image crossOrigin={null} />
+</Thumbnail.Root>
 ```
 
 An empty value does not opt out either. The [CORS settings attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/crossorigin) reads anything other than `use-credentials` as Anonymous, so it is a value like any other.
@@ -78,27 +84,47 @@ Thumbnails you supply through `thumbnails` never inherit, since they need not be
 
 Use state data attributes for pure CSS styling:
 
-React renders a `<div>` element. Add a `className` to style it:
+React renders a root `<div>` around an `<img>`. State attributes belong to `Thumbnail.Root`, while image attributes and `render` belong to `Thumbnail.Image`:
+
+tsx
+
+```
+<Thumbnail.Root className="media-thumbnail" time={12}>
+  <Thumbnail.Image className="media-thumbnail-image" loading="eager" />
+  <div className="media-thumbnail-overlay" aria-hidden />
+</Thumbnail.Root>
+```
+
+The root clips to the selected tile while the image inside spans the whole sprite sheet, so anything after the image in flow lands past the clip edge. Position the root and lay overlays over it:
 
 css
 
 ```
-.thumbnail[data-hidden] {
+.media-thumbnail {
+  position: relative;
+}
+
+.media-thumbnail-overlay {
+  position: absolute;
+  inset: 0;
+}
+
+.media-thumbnail[data-hidden] {
   display: none;
 }
 
-.thumbnail[data-loading] {
+.media-thumbnail[data-loading] {
   opacity: 0.6;
 }
 
-.thumbnail[data-error] {
+.media-thumbnail[data-error] {
   outline: 1px solid #ef4444;
 }
 ```
 
 ## Accessibility
 
-`Thumbnail` is decorative by default (`aria-hidden="true"`). It is intended for visual preview UX (for example, timeline hover previews) rather than primary accessible content.
+`Thumbnail.Root` is decorative by default (`aria-hidden="true"`). It is intended for visual preview UX (for example, timeline hover previews) rather than primary accessible content.
 
 ## Examples
 
@@ -128,7 +154,9 @@ export default function TextTrackUsage() {
         >
           <track kind="metadata" label="thumbnails" src="https://image.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/storyboard.vtt" default />
         </Video>
-        <Thumbnail className="media-thumbnail" time={12} />
+        <Thumbnail.Root className="media-thumbnail" time={12}>
+          <Thumbnail.Image className="media-thumbnail-image" />
+        </Thumbnail.Root>
       </Container>
     </Player>
   );
@@ -155,6 +183,10 @@ export default function TextTrackUsage() {
   max-width: 240px;
 }
 
+.media-thumbnail-image {
+  display: block;
+}
+
 .media-thumbnail[data-hidden] {
   display: none;
 }
@@ -187,7 +219,11 @@ const THUMBNAILS = [
 ];
 
 export default function JsonUsage() {
-  return <Thumbnail thumbnails={THUMBNAILS} time={12} style={{ maxWidth: 240 }} />;
+  return (
+    <Thumbnail.Root thumbnails={THUMBNAILS} time={12} style={{ maxWidth: 240 }}>
+      <Thumbnail.Image />
+    </Thumbnail.Root>
+  );
 }
 ```
 
@@ -227,57 +263,37 @@ const THUMBNAILS = [
 ];
 
 export default function JsonSpriteUsage() {
-  return <Thumbnail thumbnails={THUMBNAILS} time={12} style={{ maxWidth: 240 }} />;
+  return (
+    <Thumbnail.Root thumbnails={THUMBNAILS} time={12} style={{ maxWidth: 240 }}>
+      <Thumbnail.Image />
+    </Thumbnail.Root>
+  );
 }
 ```
 
 ## API Reference
 
-### Props
-
-Prop
-
-Type
-
-Default
-
-Details
-
-`crossOrigin`
-
-`'anonymous' | 'use-credentials' | '' ...`
-
-`—`
+### 
 
-▸
+Root
 
-Description
+Resolves, sizes, and clips a thumbnail for a point in time.
 
-CORS setting forwarded to the inner `<img>`.
+Renders a `div` and exposes `data-hidden`, `data-loading`, and `data-error` for styling every layer in the preview. Render `Thumbnail.Image` inside it for the image the root controls and measures.
 
-Left unset, this follows the media element: a cross-origin thumbnail `<track>` only loads when the media is CORS-enabled, so the sprite sheets its cues point at are fetched with that same mode. Pass `null` to opt out and fetch them without CORS. Thumbnails supplied directly never inherit, since they need not be related to the media element at all.
+#### Props
 
-`''` is a value like any other, read as Anonymous by the CORS-settings attribute rules — it does not opt out.
+Prop
 
 Type
 
-`'anonymous' | 'use-credentials' | '' | null`
-
-`fetchPriority`
-
-`'high' | 'low' | 'auto'`
-
-`—`
-
-▸
-
-Description
+Default
 
-Image fetch priority hint forwarded to the inner `<img>`.
+Details
 
-`loading`
+`thumbnails`
 
-`'eager' | 'lazy'`
+`ThumbnailImage[]`
 
 `—`
 
@@ -285,7 +301,7 @@ Image fetch priority hint forwarded to the inner `<img>`.
 
 Description
 
-Image loading strategy forwarded to the inner `<img>`.
+Pre-parsed thumbnail images — bypasses the automatic `<track>` detection.
 
 `time`
 
@@ -299,7 +315,7 @@ Description
 
 Time in seconds to display the thumbnail for.
 
-### State
+#### State
 
 State is accessible via the `render`, `className`, and `style` props.
 
@@ -339,7 +355,7 @@ Description
 
 Whether the component is hidden because no thumbnail is available and it is not loading.
 
-### Data attributes
+#### Data attributes
 
 Attribute
 
@@ -351,4 +367,94 @@ Details
 
 `data-error`
 
-`data-hidden`
+`data-hidden`
+
+### 
+
+Image
+
+Displays the image selected and measured by `Thumbnail.Root`.
+
+Renders an `img`, so native image attributes and the `render` escape hatch remain available without replacing the root that owns thumbnail state.
+
+#### Props
+
+Prop
+
+Type
+
+Default
+
+Details
+
+`className`
+
+`string | ((state: ThumbnailCore.State) => string | undefined)`
+
+`—`
+
+▸
+
+Description
+
+Class name or function returning class name from state.
+
+`crossOrigin`
+
+`ThumbnailCore.ImageProps['crossOrigin']`
+
+`—`
+
+▸
+
+Description
+
+CORS setting for the selected image. Leave unset to follow the media element, or pass `null` to opt out.
+
+`fetchPriority`
+
+`ThumbnailCore.ImageProps['fetchPriority']`
+
+`—`
+
+▸
+
+Description
+
+Image fetch priority hint.
+
+`loading`
+
+`ThumbnailCore.ImageProps['loading']`
+
+`—`
+
+▸
+
+Description
+
+Image loading strategy.
+
+`render`
+
+`ReactElement | ((props: HTMLProps, state: ThumbnailCore.State) => ReactElement | null)`
+
+`—`
+
+▸
+
+Description
+
+Render prop for custom element.
+
+`style`
+
+`CSSProperties | ((state: ThumbnailCore.State) => CSSProperties | undefined)`
+
+`—`
+
+▸
+
+Description
+
+Style or function returning style from state.

package/docs/reference/time.md

@@ -34,6 +34,8 @@ Hour display is triggered when either the current value or the duration exceeds
 
 Use `toggle` to let current displays switch between elapsed and remaining time, or remaining and duration displays switch between those two values. The initial display comes from `type`.
 
+Before the media reports a duration or seekable range — while metadata is still loading, for example — no time value is available. A plain display still renders the formatted zero value but sets `data-unavailable`; a toggleable display is disabled instead: it sets `data-disabled`, leaves the tab order, and ignores activation until a value arrives.
+
 tsx
 
 ```
@@ -44,6 +46,30 @@ tsx
 
 ## Styling
 
+Attribute
+
+Values
+
+Description
+
+`data-type`
+
+`current` / `duration` / `remaining`
+
+The type of time being displayed
+
+`data-disabled`
+
+Present / absent
+
+Present when a toggleable display has no time value yet
+
+`data-unavailable`
+
+Present / absent
+
+Present when a plain display has no time value yet
+
 The negative sign is rendered inside `<span aria-hidden="true">` and can be hidden with CSS:
 
 css
@@ -54,6 +80,17 @@ css
 }
 ```
 
+Dim a display while its value is unavailable:
+
+css
+
+```
+[data-disabled],
+[data-unavailable] {
+  opacity: 0.5;
+}
+```
+
 ## Accessibility
 
 Each `<Time.Value>` has:
@@ -65,6 +102,8 @@ No `aria-live` region is used — time updates too frequently and might overwhel
 
 Toggleable time displays receive `role="button"`, `tabindex="0"`, and keyboard support for Enter and Space. Their `aria-label` starts with the action and includes the current value. Their `aria-description` explains which values the control toggles between.
 
+While no time value is available, a toggleable display is disabled: it sets `aria-disabled="true"` and `tabindex="-1"`, drops the `aria-description`, changes its `aria-label` to “Media not loaded, unknown time.”, and ignores clicks and key presses. A plain display in the same state omits `datetime` and uses that same label.
+
 ## Examples
 
 ### Current Time
@@ -416,6 +455,26 @@ Description
 
 Time display type.
 
+`disabled`
+
+`boolean`
+
+▸
+
+Description
+
+Whether the time toggle is disabled.
+
+`unavailable`
+
+`boolean`
+
+▸
+
+Description
+
+Whether the non-interactive time value is unavailable.
+
 `seconds`
 
 `number`
@@ -484,6 +543,22 @@ Description
 
 The type of time being displayed.
 
+`data-disabled`
+
+▸
+
+Description
+
+Present when the time toggle is disabled.
+
+`data-unavailable`
+
+▸
+
+Description
+
+Present when the non-interactive time value is unavailable.
+
 ### 
 
 Group

package/docs/reference/use-attach-media.md

@@ -28,7 +28,7 @@ function CustomHlsVideo() {
 }
 ```
 
-The callback attaches a non-null element and detaches the host when React clears or cleans up the ref.
+The callback attaches a non-null element to the playback adapter and detaches it when React clears or cleans up the ref.
 
 ## API Reference
 

package/docs/reference/use-media-extension.md

@@ -27,7 +27,7 @@ function CustomMuxData() {
 }
 ```
 
-The hook creates one instance, follows media changes, and destroys the extension on unmount. A plain `<video>` element is not a media-extension host, so registration is skipped for it.
+The hook creates one instance, registers it when a media adapter is available, follows media changes, and destroys the extension on unmount. A plain `<video>` element is not a media adapter and cannot carry extensions, so registration is skipped for it.
 
 ## API Reference
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@videojs/react",
-  "version": "10.0.0-rc.1",
+  "version": "10.0.0-rc.2",
   "description": "React library for building media players",
   "keywords": [
     "components",
@@ -149,56 +149,56 @@
     "access": "public"
   },
   "dependencies": {
-    "@videojs/media": "10.0.0-rc.1",
-    "@videojs/core": "10.0.0-rc.1",
-    "@videojs/native-hls-video": "10.0.0-rc.1",
-    "@videojs/spf": "10.0.0-rc.1",
-    "@videojs/store": "10.0.0-rc.1",
-    "@videojs/utils": "10.0.0-rc.1"
+    "@videojs/core": "10.0.0-rc.2",
+    "@videojs/media": "10.0.0-rc.2",
+    "@videojs/native-hls-video": "10.0.0-rc.2",
+    "@videojs/spf": "10.0.0-rc.2",
+    "@videojs/store": "10.0.0-rc.2",
+    "@videojs/utils": "10.0.0-rc.2"
   },
   "devDependencies": {
     "@testing-library/react": "^16.3.0",
     "@types/react": "^19.2.17",
+    "@videojs/cloudflare-video": "10.0.0-rc.2",
+    "@videojs/dash-video": "10.0.0-rc.2",
+    "@videojs/google-cast": "10.0.0-rc.2",
+    "@videojs/hlsjs-video": "10.0.0-rc.2",
+    "@videojs/icons": "10.0.0-rc.2",
+    "@videojs/mux-audio": "10.0.0-rc.2",
+    "@videojs/mux-data": "10.0.0-rc.2",
+    "@videojs/mux-video": "10.0.0-rc.2",
+    "@videojs/shaka-video": "10.0.0-rc.2",
+    "@videojs/spf": "10.0.0-rc.2",
+    "@videojs/spotify-audio": "10.0.0-rc.2",
+    "@videojs/tiktok-video": "10.0.0-rc.2",
+    "@videojs/twitch-video": "10.0.0-rc.2",
+    "@videojs/vimeo-video": "10.0.0-rc.2",
+    "@videojs/wistia-video": "10.0.0-rc.2",
+    "@videojs/youtube-video": "10.0.0-rc.2",
     "jsdom": "^26.1.0",
     "react": "^19.2.8",
     "react-dom": "^19.2.8",
     "typescript": "6.0.2",
     "vite-plus": "0.2.8",
-    "vitest": "4.1.10",
-    "@videojs/cloudflare-video": "10.0.0-rc.1",
-    "@videojs/dash-video": "10.0.0-rc.1",
-    "@videojs/google-cast": "10.0.0-rc.1",
-    "@videojs/hlsjs-video": "10.0.0-rc.1",
-    "@videojs/mux-data": "10.0.0-rc.1",
-    "@videojs/mux-video": "10.0.0-rc.1",
-    "@videojs/icons": "10.0.0-rc.1",
-    "@videojs/mux-audio": "10.0.0-rc.1",
-    "@videojs/shaka-video": "10.0.0-rc.1",
-    "@videojs/spf": "10.0.0-rc.1",
-    "@videojs/twitch-video": "10.0.0-rc.1",
-    "@videojs/tiktok-video": "10.0.0-rc.1",
-    "@videojs/vimeo-video": "10.0.0-rc.1",
-    "@videojs/wistia-video": "10.0.0-rc.1",
-    "@videojs/spotify-audio": "10.0.0-rc.1",
-    "@videojs/youtube-video": "10.0.0-rc.1"
+    "vitest": "4.1.10"
   },
   "peerDependencies": {
+    "@videojs/cloudflare-video": "10.0.0-rc.2",
+    "@videojs/dash-video": "10.0.0-rc.2",
+    "@videojs/google-cast": "10.0.0-rc.2",
+    "@videojs/hlsjs-video": "10.0.0-rc.2",
+    "@videojs/mux-audio": "10.0.0-rc.2",
+    "@videojs/mux-data": "10.0.0-rc.2",
+    "@videojs/mux-video": "10.0.0-rc.2",
+    "@videojs/shaka-video": "10.0.0-rc.2",
+    "@videojs/spotify-audio": "10.0.0-rc.2",
+    "@videojs/tiktok-video": "10.0.0-rc.2",
+    "@videojs/twitch-video": "10.0.0-rc.2",
+    "@videojs/vimeo-video": "10.0.0-rc.2",
+    "@videojs/wistia-video": "10.0.0-rc.2",
+    "@videojs/youtube-video": "10.0.0-rc.2",
     "react": "^18.0.0 || ^19.0.0",
-    "react-dom": "^18.0.0 || ^19.0.0",
-    "@videojs/dash-video": "10.0.0-rc.1",
-    "@videojs/google-cast": "10.0.0-rc.1",
-    "@videojs/hlsjs-video": "10.0.0-rc.1",
-    "@videojs/cloudflare-video": "10.0.0-rc.1",
-    "@videojs/mux-data": "10.0.0-rc.1",
-    "@videojs/spotify-audio": "10.0.0-rc.1",
-    "@videojs/tiktok-video": "10.0.0-rc.1",
-    "@videojs/vimeo-video": "10.0.0-rc.1",
-    "@videojs/shaka-video": "10.0.0-rc.1",
-    "@videojs/twitch-video": "10.0.0-rc.1",
-    "@videojs/wistia-video": "10.0.0-rc.1",
-    "@videojs/youtube-video": "10.0.0-rc.1",
-    "@videojs/mux-video": "10.0.0-rc.1",
-    "@videojs/mux-audio": "10.0.0-rc.1"
+    "react-dom": "^18.0.0 || ^19.0.0"
   },
   "peerDependenciesMeta": {
     "@videojs/cloudflare-video": {

package/dist/default/ui/airplay-button/airplay-button.js

@@ -1,17 +0,0 @@
-import { createMediaButton } from "../create-media-button.js";
-import { AirPlayButtonCore, AirPlayButtonDataAttrs } from "@videojs/core";
-import { selectRemotePlayback } from "@videojs/core/dom";
-//#region src/ui/airplay-button/airplay-button.tsx
-/** A button that toggles AirPlay to a remote device. */
-const AirPlayButton = createMediaButton({
-	displayName: "AirPlayButton",
-	core: AirPlayButtonCore,
-	stateAttrMap: AirPlayButtonDataAttrs,
-	selector: selectRemotePlayback,
-	action: (core, state) => core.toggle(state),
-	isSupported: (state) => !state.hidden
-});
-//#endregion
-export { AirPlayButton };
-
-//# sourceMappingURL=airplay-button.js.map

package/dist/default/ui/airplay-button/airplay-button.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"airplay-button.js","names":[],"sources":["../../../../src/ui/airplay-button/airplay-button.tsx"],"sourcesContent":["import { AirPlayButtonCore, AirPlayButtonDataAttrs } from '@videojs/core';\nimport { selectRemotePlayback } from '@videojs/core/dom';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { createMediaButton } from '../create-media-button';\n\nexport interface AirPlayButtonProps\n  extends UIComponentProps<'button', AirPlayButtonCore.State>, AirPlayButtonCore.Props {}\n\n/** A button that toggles AirPlay to a remote device. */\nexport const AirPlayButton = createMediaButton<AirPlayButtonCore, AirPlayButtonProps>({\n  displayName: 'AirPlayButton',\n  core: AirPlayButtonCore,\n  stateAttrMap: AirPlayButtonDataAttrs,\n  selector: selectRemotePlayback,\n  action: (core, state) => core.toggle(state),\n  isSupported: (state) => !state.hidden,\n});\n\nexport namespace AirPlayButton {\n  export type Props = AirPlayButtonProps;\n  export type State = AirPlayButtonCore.State;\n}\n"],"mappings":";;;;;AAUA,MAAa,gBAAgB,kBAAyD;CACpF,aAAa;CACb,MAAM;CACN,cAAc;CACd,UAAU;CACV,SAAS,MAAM,UAAU,KAAK,OAAO,KAAK;CAC1C,cAAc,UAAU,CAAC,MAAM;AACjC,CAAC"}

package/dist/default/ui/alert-dialog/alert-dialog-root.js

@@ -1,25 +0,0 @@
-import { DialogContextProvider } from "../dialog/context.js";
-import { useDialogRoot } from "../dialog/use-dialog-root.js";
-import { AlertDialogCore, AlertDialogDataAttrs } from "@videojs/core";
-import { jsx } from "react/jsx-runtime";
-//#region src/ui/alert-dialog/alert-dialog-root.tsx
-/** Manages alert dialog state and provides it to the shared dialog parts. */
-function AlertDialogRoot({ children, ...props }) {
-	const context = useDialogRoot({
-		...props,
-		coreFactory: createAlertDialogCore,
-		stateAttrMap: AlertDialogDataAttrs,
-		idPrefix: "alert-dialog"
-	});
-	return /* @__PURE__ */ jsx(DialogContextProvider, {
-		value: context,
-		children
-	});
-}
-function createAlertDialogCore() {
-	return new AlertDialogCore();
-}
-//#endregion
-export { AlertDialogRoot };
-
-//# sourceMappingURL=alert-dialog-root.js.map

package/dist/default/ui/alert-dialog/alert-dialog-root.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"alert-dialog-root.js","names":[],"sources":["../../../../src/ui/alert-dialog/alert-dialog-root.tsx"],"sourcesContent":["import { AlertDialogCore, AlertDialogDataAttrs, type AlertDialogProps } from '@videojs/core';\nimport type { ReactNode } from 'react';\n\nimport { DialogContextProvider } from '../dialog/context';\nimport { useDialogRoot } from '../dialog/use-dialog-root';\n\nexport interface AlertDialogRootProps extends AlertDialogProps {\n  /** Called when the open state changes, before animations complete. */\n  onOpenChange?: (open: boolean) => void;\n  /** Called after open or close animations complete. */\n  onOpenChangeComplete?: (open: boolean) => void;\n  children?: ReactNode;\n}\n\n/** Manages alert dialog state and provides it to the shared dialog parts. */\nexport function AlertDialogRoot({ children, ...props }: AlertDialogRootProps): ReactNode {\n  const context = useDialogRoot({\n    ...props,\n    coreFactory: createAlertDialogCore,\n    stateAttrMap: AlertDialogDataAttrs,\n    idPrefix: 'alert-dialog',\n  });\n\n  return <DialogContextProvider value={context}>{children}</DialogContextProvider>;\n}\n\nfunction createAlertDialogCore(): AlertDialogCore {\n  return new AlertDialogCore();\n}\n\nexport namespace AlertDialogRoot {\n  export type Props = AlertDialogRootProps;\n}\n"],"mappings":";;;;;;AAeA,SAAgB,gBAAgB,EAAE,UAAU,GAAG,SAA0C;CACvF,MAAM,UAAU,cAAc;EAC5B,GAAG;EACH,aAAa;EACb,cAAc;EACd,UAAU;CACZ,CAAC;CAED,OAAO,oBAAC,uBAAD;EAAuB,OAAO;EAAU;CAAgC,CAAA;AACjF;AAEA,SAAS,wBAAyC;CAChD,OAAO,IAAI,gBAAgB;AAC7B"}