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

package/dist/default/presets/video/skin.css

@@ -403,8 +403,6 @@
     .media-poster {
       pointer-events: none;
       border-radius: inherit;
-      object-fit: var(--media-object-fit, contain);
-      object-position: var(--media-object-position, center);
       width: 100%;
       height: 100%;
       transition-property: opacity;
@@ -419,7 +417,7 @@
       opacity: 0;
     }
 
-    .media-poster img {
+    .media-poster-image {
       border-radius: inherit;
       object-fit: var(--media-object-fit, contain);
       object-position: var(--media-object-position, center);
@@ -429,11 +427,42 @@
       inset: 0;
     }
 
-    .media-poster:is(img):not([src]):not([srcset]) {
+    .media-poster-image:not([src]):not([srcset]) {
       visibility: hidden;
     }
   }
 
+  :where(.media-skin[data-theme="default"][data-preset="video"]) .media-poster {
+    pointer-events: none;
+    border-radius: inherit;
+    width: 100%;
+    height: 100%;
+    transition-property: opacity;
+    transition-duration: 0.15s;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-duration: var(--media-duration-slower);
+    position: absolute;
+    inset: 0;
+  }
+
+  :where(.media-skin[data-theme="default"][data-preset="video"]) .media-poster:not([data-visible]) {
+    opacity: 0;
+  }
+
+  :where(.media-skin[data-theme="default"][data-preset="video"]) .media-poster-image {
+    border-radius: inherit;
+    object-fit: var(--media-object-fit, contain);
+    object-position: var(--media-object-position, center);
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    inset: 0;
+  }
+
+  :where(.media-skin[data-theme="default"][data-preset="video"]) .media-poster-image:not([src]):not([srcset]) {
+    visibility: hidden;
+  }
+
   @scope (.media-skin[data-theme="default"][data-preset="video"]) {
     .media-seek-indicator {
       place-content: center;
@@ -1026,6 +1055,25 @@
     }
   }
 
+  :where(.media-skin[data-theme="default"][data-preset="video"]) .media-popup-surface {
+    background-color: var(--media-popover);
+    color: var(--media-popover-foreground);
+    box-shadow:
+      0 0 0 1px var(--media-surface-border, var(--media-border)),
+      var(--media-shadow-surface);
+    backdrop-filter: var(--media-backdrop-filter-surface);
+  }
+
+  :where(.media-skin[data-theme="default"][data-preset="video"]) .media-popup-surface:after {
+    content: "";
+    z-index: 10;
+    pointer-events: none;
+    border-radius: inherit;
+    box-shadow: var(--media-shadow-surface-inset);
+    position: absolute;
+    inset: 0;
+  }
+
   @scope (.media-skin[data-theme="default"][data-preset="video"]) {
     .media-captions-button-off-icon {
       opacity: 0;
@@ -1215,6 +1263,7 @@
     }
 
     @scope (.media-slider) {
+      &:focus-within .media-slider-buffer,
       &[data-dragging] .media-slider-buffer,
       &[data-seeking] .media-slider-buffer {
         transition-duration: 0s;
@@ -1247,6 +1296,7 @@
     }
 
     @scope (.media-slider) {
+      &:focus-within .media-slider-fill,
       &[data-dragging] .media-slider-fill,
       &[data-seeking] .media-slider-fill {
         transition-duration: 0s;
@@ -1305,6 +1355,14 @@
       translate: -50% -50%;
     }
 
+    @scope (.media-slider) {
+      &:focus-within .media-slider-thumb {
+        transition-property: opacity, height, width, outline-offset, scale;
+        transition-duration: 0.15s;
+        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+      }
+    }
+
     @scope (.media-slider) {
       &[data-dragging] .media-slider-thumb {
         transition-property: opacity, height, width, outline-offset, scale;
@@ -1427,13 +1485,17 @@
       }
     }
 
+    .media-slider[data-disabled] {
+      pointer-events: none;
+    }
+
     .media-slider[data-orientation="horizontal"] {
       height: var(--media-slider-height, calc(var(--media-spacing) * 8));
-      min-width: calc(var(--media-spacing) * 20);
+      min-width: calc(var(--media-spacing) * 18);
     }
 
     .media-slider[data-orientation="vertical"] {
-      height: calc(var(--media-spacing) * 20);
+      height: calc(var(--media-spacing) * 18);
       width: calc(var(--media-spacing) * 8);
       min-width: calc(var(--media-spacing) * 0);
     }
@@ -1476,7 +1538,7 @@
       height: calc(var(--media-spacing) * 1);
       min-width: var(--media-slider-preview-max-width);
       --media-slider-preview-max-height: var(--media-slider-preview-max-width);
-      --media-slider-preview-max-width: min(calc(var(--media-spacing) * 36), 100cqi);
+      --media-slider-preview-max-width: min(calc(var(--media-spacing) * 32), 100cqi);
       position: relative;
     }
 
@@ -1506,6 +1568,12 @@
       scale: 1;
     }
 
+    @container media-root (width >= 30rem) {
+      .media-slider-preview {
+        --media-slider-preview-max-width: min(calc(var(--media-spacing) * 40), 100cqi);
+      }
+    }
+
     @container media-root (width >= 42rem) {
       .media-slider-preview {
         --media-slider-preview-max-width: min(calc(var(--media-spacing) * 48), 100cqi);
@@ -1536,6 +1604,7 @@
     .media-slider-thumbnail {
       pointer-events: none;
       bottom: calc(100% + var(--media-slider-preview-offset));
+      max-height: var(--media-slider-preview-max-height);
       border-radius: var(--media-popup-radius);
       background-color: var(--media-backdrop);
       left: 50%;
@@ -1548,12 +1617,36 @@
       }
     }
 
-    .media-slider-thumbnail:has([data-loading]) {
+    .media-slider-thumbnail:after {
+      pointer-events: none;
+      inset: calc(var(--media-spacing) * 0);
+      border-radius: inherit;
+      content: "";
+      background-image: var(--media-thumbnail-gradient);
+      position: absolute;
+    }
+
+    .media-slider-thumbnail[data-loading] {
       aspect-ratio: 16 / 9;
       width: var(--media-slider-preview-max-width);
     }
 
+    .media-slider-thumbnail-image {
+      transition-property: opacity;
+      transition-duration: 0.15s;
+      transition-duration: var(--media-duration);
+      transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
+      display: block;
+    }
+
+    @scope (.media-slider-thumbnail) {
+      &[data-loading] .media-slider-thumbnail-image {
+        opacity: 0;
+      }
+    }
+
     .media-slider-thumbnail-spinner-icon {
+      z-index: 10;
       width: var(--media-icon-size, calc(var(--media-spacing) * 4.5));
       height: var(--media-icon-size, calc(var(--media-spacing) * 4.5));
       opacity: 0;
@@ -1569,13 +1662,13 @@
     }
 
     @scope (.media-slider-thumbnail) {
-      &:not(:has([role="img"][data-loading])) .media-slider-thumbnail-spinner-icon {
+      &:not([data-loading]) .media-slider-thumbnail-spinner-icon {
         --media-spinner-animation: none;
       }
     }
 
     @scope (.media-slider-thumbnail) {
-      &:has([role="img"][data-loading]) .media-slider-thumbnail-spinner-icon {
+      &[data-loading] .media-slider-thumbnail-spinner-icon {
         opacity: 1;
       }
     }
@@ -1703,20 +1796,48 @@
     }
   }
 
-  :where(.media-skin[data-theme="default"][data-preset="video"]) .media-slider-thumbnail-image {
-    max-height: var(--media-slider-preview-max-height);
+  :where(.media-skin[data-theme="default"][data-preset="video"]) .media-slider-preview-content {
     max-width: var(--media-slider-preview-max-width);
-    border-radius: inherit;
-    transition-property: opacity;
+    transform-origin: bottom;
+    translate: -50% var(--media-hidden-preview-offset);
+    scale: var(--media-hidden-preview-scale) var(--media-hidden-preview-scale);
+    opacity: 0;
+    filter: blur(var(--media-hidden-blur));
+    transition-property: filter, opacity, scale;
     transition-duration: 0.15s;
     transition-duration: var(--media-duration);
     transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
-    display: block;
-    position: relative;
-    overflow: clip;
+    position: absolute;
+  }
+
+  :where(.media-skin[data-theme="default"][data-preset="video"])
+    :where(.media-slider):has(:focus-visible)
+    .media-slider-preview-content,
+  :where(.media-skin[data-theme="default"][data-preset="video"])
+    :where(.media-slider-preview)[data-pointing]
+    .media-slider-preview-content {
+    opacity: 1;
+    filter: none;
+    scale: 1;
+  }
+
+  :where(.media-skin[data-theme="default"][data-preset="video"]) .media-slider-thumbnail {
+    pointer-events: none;
+    bottom: calc(100% + var(--media-slider-preview-offset));
+    max-height: var(--media-slider-preview-max-height);
+    border-radius: var(--media-popup-radius);
+    background-color: var(--media-backdrop);
+    left: 50%;
+    overflow: hidden;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    :where(.media-skin[data-theme="default"][data-preset="video"]) .media-slider-thumbnail {
+      background-color: color-mix(in oklab, var(--media-backdrop) 90%, transparent);
+    }
   }
 
-  :where(.media-skin[data-theme="default"][data-preset="video"]) .media-slider-thumbnail-image:after {
+  :where(.media-skin[data-theme="default"][data-preset="video"]) .media-slider-thumbnail:after {
     pointer-events: none;
     inset: calc(var(--media-spacing) * 0);
     border-radius: inherit;
@@ -1725,10 +1846,53 @@
     position: absolute;
   }
 
-  :where(.media-skin[data-theme="default"][data-preset="video"]) .media-slider-thumbnail-image[data-loading] {
+  :where(.media-skin[data-theme="default"][data-preset="video"]) .media-slider-thumbnail[data-loading] {
+    aspect-ratio: 16 / 9;
+    width: var(--media-slider-preview-max-width);
+  }
+
+  :where(.media-skin[data-theme="default"][data-preset="video"]) .media-slider-thumbnail-image {
+    transition-property: opacity;
+    transition-duration: 0.15s;
+    transition-duration: var(--media-duration);
+    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
+    display: block;
+  }
+
+  :where(.media-skin[data-theme="default"][data-preset="video"])
+    :where(.media-slider-thumbnail)[data-loading]
+    .media-slider-thumbnail-image {
     opacity: 0;
   }
 
+  :where(.media-skin[data-theme="default"][data-preset="video"]) .media-slider-thumbnail-spinner-icon {
+    z-index: 10;
+    width: var(--media-icon-size, calc(var(--media-spacing) * 4.5));
+    height: var(--media-icon-size, calc(var(--media-spacing) * 4.5));
+    opacity: 0;
+    filter: drop-shadow(0 1px 0 var(--media-shadow-current-color));
+    transition-property: opacity;
+    transition-duration: 0.15s;
+    transition-duration: var(--media-duration);
+    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    translate: -50% -50%;
+  }
+
+  :where(.media-skin[data-theme="default"][data-preset="video"])
+    :where(.media-slider-thumbnail):not([data-loading])
+    .media-slider-thumbnail-spinner-icon {
+    --media-spinner-animation: none;
+  }
+
+  :where(.media-skin[data-theme="default"][data-preset="video"])
+    :where(.media-slider-thumbnail)[data-loading]
+    .media-slider-thumbnail-spinner-icon {
+    opacity: 1;
+  }
+
   @scope (.media-skin[data-theme="default"][data-preset="video"]) {
   }
 
@@ -2413,7 +2577,7 @@
       .video-controls-content {
         inset-inline: calc(var(--media-spacing) * 2);
         bottom: calc(var(--media-spacing) * 2);
-        z-index: 10;
+        z-index: 30;
         border-radius: var(--media-controls-radius);
         background-color: var(--media-popover);
         color: var(--media-popover-foreground);
@@ -2461,10 +2625,10 @@
     .video-controls-primary {
       inset-inline: calc(var(--media-spacing) * 2);
       bottom: calc(var(--media-spacing) * 2);
-      z-index: 10;
+      z-index: 30;
       transform-origin: bottom;
       border-radius: var(--media-controls-radius);
-      padding: calc(var(--media-spacing) * 1);
+      padding: calc(var(--media-spacing) * 0.5);
       transition-property: filter, opacity, scale, translate;
       transition-duration: 0.15s;
       transition-duration: calc(var(--media-duration-controls) / 2);
@@ -2522,10 +2686,10 @@
     .video-controls-secondary {
       top: calc(var(--media-spacing) * 2);
       right: calc(var(--media-spacing) * 2);
-      z-index: 10;
+      z-index: 30;
       transform-origin: top;
       border-radius: var(--media-controls-radius);
-      padding: calc(var(--media-spacing) * 1);
+      padding: calc(var(--media-spacing) * 0.5);
       transition-property: filter, opacity, scale, translate;
       transition-duration: 0.15s;
       transition-duration: calc(var(--media-duration-controls) / 2);
@@ -2632,8 +2796,21 @@
       outline-color: var(--media-ring);
     }
 
+    .media-time-toggle[aria-disabled="true"] {
+      cursor: not-allowed;
+      opacity: 0.5;
+    }
+
     .media-time-value {
       font-variant-numeric: tabular-nums;
+      transition-property: opacity;
+      transition-duration: 0.15s;
+      transition-duration: var(--media-duration-slow);
+      transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
+    }
+
+    .media-time-value[data-unavailable] {
+      opacity: 0.5;
     }
   }
 
@@ -2685,7 +2862,7 @@
     --media-backdrop-filter-indicator: blur(8px);
     --media-backdrop-filter-dialog: blur(16px) saturate(150%);
     --media-control-corner-shape: round;
-    --media-control-radius: calc(infinity * 1px);
+    --media-control-radius: 99px;
     --media-control-size: calc(var(--media-spacing) * 9);
     --media-controls-radius: var(--media-control-radius);
     --media-default-accent-color: oklch(100% 0 0);

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

@@ -0,0 +1,17 @@
+import { createMediaButton } from "../create-media-button.js";
+import { AirPlayButtonCore, AirPlayButtonDataAttrs } from "@videojs/core";
+import { selectRemotePlayback } from "@videojs/core/dom";
+//#region src/ui/airplay-button/component.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=component.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"component.js","names":[],"sources":["../../../../src/ui/airplay-button/component.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/airplay-button/index.js

@@ -1,2 +1,2 @@
-import { AirPlayButton } from "./airplay-button.js";
+import { AirPlayButton } from "./component.js";
 export { AirPlayButton };

package/dist/default/ui/alert-dialog/index.parts.js

@@ -1,10 +1,10 @@
 import { __exportAll } from "../../_virtual/_rolldown/runtime.js";
-import { DialogBackdrop } from "../dialog/dialog-backdrop.js";
-import { DialogClose } from "../dialog/dialog-close.js";
-import { DialogDescription } from "../dialog/dialog-description.js";
-import { DialogPopup } from "../dialog/dialog-popup.js";
-import { DialogTitle } from "../dialog/dialog-title.js";
-import { AlertDialogRoot } from "./alert-dialog-root.js";
+import { DialogBackdrop } from "../dialog/backdrop.js";
+import { DialogClose } from "../dialog/close.js";
+import { DialogDescription } from "../dialog/description.js";
+import { DialogPopup } from "../dialog/popup.js";
+import { DialogTitle } from "../dialog/title.js";
+import { AlertDialogRoot } from "./root.js";
 //#region src/ui/alert-dialog/index.parts.ts
 var index_parts_exports = /* @__PURE__ */ __exportAll({
 	Backdrop: () => DialogBackdrop,

package/dist/default/ui/alert-dialog/index.parts.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.parts.js","names":[],"sources":["../../../../src/ui/alert-dialog/index.parts.ts"],"sourcesContent":["export {\n  Backdrop,\n  type BackdropProps,\n  Close,\n  type CloseProps,\n  Description,\n  type DescriptionProps,\n  Popup,\n  type PopupProps,\n  Title,\n  type TitleProps,\n} from '../dialog/index.parts';\nexport { AlertDialogRoot as Root, type AlertDialogRootProps as RootProps } from './alert-dialog-root';\n"],"mappings":""}
+{"version":3,"file":"index.parts.js","names":[],"sources":["../../../../src/ui/alert-dialog/index.parts.ts"],"sourcesContent":["export {\n  Backdrop,\n  type BackdropProps,\n  Close,\n  type CloseProps,\n  Description,\n  type DescriptionProps,\n  Popup,\n  type PopupProps,\n  Title,\n  type TitleProps,\n} from '../dialog/index.parts';\nexport { AlertDialogRoot as Root, type AlertDialogRootProps as RootProps } from './root';\n"],"mappings":""}

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

@@ -0,0 +1,25 @@
+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/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=root.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"root.js","names":[],"sources":["../../../../src/ui/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"}

package/dist/default/ui/audio-track-radio-group/component.js

@@ -0,0 +1,97 @@
+import { renderElement } from "../../utils/use-render.js";
+import { useMenuOptionState } from "../menu/context.js";
+import { useAudioTrackOptions } from "../audio-track/use-audio-track-options.js";
+import { MenuRadioGroup } from "../menu/radio-group.js";
+import { AudioTrackRadioGroupDataAttrs } from "@videojs/core";
+import { getStateDataAttrs } from "@videojs/core/dom";
+import { Fragment, createContext, forwardRef, useContext } from "react";
+import { jsx } from "react/jsx-runtime";
+import { isFunction } from "@videojs/utils/predicate";
+//#region src/ui/audio-track-radio-group/component.tsx
+const AudioTrackRadioGroupContext = createContext(void 0);
+/** Owns audio-track option state and shares it with an enclosing menu. Does not render a DOM element. */
+function AudioTrackRadioGroupRoot({ children, ...props }) {
+	const audioTrack = useAudioTrackOptions(props);
+	useMenuOptionState(toMenuOptionState(audioTrack));
+	return /* @__PURE__ */ jsx(AudioTrackRadioGroupContext.Provider, {
+		value: audioTrack,
+		children
+	});
+}
+/** Displays the selected audio-track label. */
+const AudioTrackRadioGroupValue = forwardRef(function AudioTrackRadioGroupValue({ render, className, style, ...elementProps }, forwardedRef) {
+	const audioTrack = useAudioTrackRadioGroupContext();
+	if (!audioTrack) return null;
+	return renderElement("span", {
+		render,
+		className,
+		style
+	}, {
+		state: audioTrack,
+		ref: forwardedRef,
+		props: [elementProps, { children: audioTrack.selectedLabel }]
+	});
+});
+/** Renders menu radio items for the player's available audio tracks. */
+const AudioTrackRadioGroupOptions = forwardRef(function AudioTrackRadioGroupOptions(componentProps, forwardedRef) {
+	const { renderItem, render, className, style, "aria-label": ariaLabelProp, "aria-labelledby": ariaLabelledBy, ...elementProps } = componentProps;
+	const audioTrack = useAudioTrackRadioGroupContext();
+	if (!audioTrack) return null;
+	const { state, value, options, setValue } = audioTrack;
+	const ariaLabel = ariaLabelProp ?? (ariaLabelledBy === void 0 ? audioTrack.label : void 0);
+	return /* @__PURE__ */ jsx(MenuRadioGroup, {
+		...getStateDataAttrs(state, AudioTrackRadioGroupDataAttrs),
+		...elementProps,
+		ref: forwardedRef,
+		className: isFunction(className) ? className(state) : className,
+		style: isFunction(style) ? style(state) : style,
+		render: isFunction(render) ? (props) => render(props, state) : render,
+		value,
+		onValueChange: setValue,
+		"aria-label": ariaLabel,
+		"aria-labelledby": ariaLabelledBy,
+		"aria-disabled": state.disabled || void 0,
+		hidden: state.hidden,
+		children: options.map((option) => {
+			const itemState = {
+				...option,
+				checked: option.value === value
+			};
+			return /* @__PURE__ */ jsx(Fragment, { children: renderItem({
+				value: option.value,
+				disabled: option.disabled,
+				"data-track": option.value,
+				children: option.label
+			}, itemState) }, option.value);
+		})
+	});
+});
+/** @internal Compatibility adapter for the existing preset sources. */
+const AudioTrackRadioGroupLegacy = forwardRef(function AudioTrackRadioGroupLegacy({ label, formatTrack, disabled, ...props }, forwardedRef) {
+	return /* @__PURE__ */ jsx(AudioTrackRadioGroupRoot, {
+		label,
+		formatTrack,
+		disabled,
+		children: /* @__PURE__ */ jsx(AudioTrackRadioGroupOptions, {
+			...props,
+			ref: forwardedRef
+		})
+	});
+});
+function useAudioTrackRadioGroupContext() {
+	const audioTrack = useContext(AudioTrackRadioGroupContext);
+	if (audioTrack === void 0) throw new Error("AudioTrackRadioGroup parts must be used within AudioTrackRadioGroup.Root");
+	return audioTrack;
+}
+function toMenuOptionState(audioTrack) {
+	return {
+		value: audioTrack?.selectedLabel ?? "",
+		disabled: audioTrack?.disabled ?? true,
+		hidden: audioTrack?.hidden ?? true,
+		availability: audioTrack?.state.availability ?? "unsupported"
+	};
+}
+//#endregion
+export { AudioTrackRadioGroupLegacy, AudioTrackRadioGroupOptions, AudioTrackRadioGroupRoot, AudioTrackRadioGroupValue };
+
+//# sourceMappingURL=component.js.map

package/dist/default/ui/audio-track-radio-group/component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"component.js","names":[],"sources":["../../../../src/ui/audio-track-radio-group/component.tsx"],"sourcesContent":["import { type AudioTrackRadioGroupCore, AudioTrackRadioGroupDataAttrs, type MenuOptionState } from '@videojs/core';\nimport { getStateDataAttrs } from '@videojs/core/dom';\nimport { isFunction } from '@videojs/utils/predicate';\nimport type { ReactElement, ReactNode } from 'react';\nimport { createContext, Fragment, forwardRef, useContext } from 'react';\n\nimport type { HTMLProps, UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport {\n  type AudioTrackOption,\n  type AudioTrackOptionsProps,\n  type AudioTrackOptionsResult,\n  useAudioTrackOptions,\n} from '../audio-track';\nimport { useMenuOptionState } from '../menu/context';\nimport { MenuRadioGroup } from '../menu/radio-group';\nimport type { MenuRadioItemProps } from '../menu/radio-item';\n\nexport type AudioTrackRadioGroupItemState = AudioTrackOption & {\n  /** Whether this option is the currently enabled audio track. */\n  checked: boolean;\n};\n\nexport interface AudioTrackRadioGroupItemProps extends Omit<MenuRadioItemProps, 'ref'> {\n  /** Audio track value represented by the option. */\n  'data-track': string;\n}\n\nexport interface AudioTrackRadioGroupRootProps extends AudioTrackOptionsProps {\n  children?: ReactNode;\n}\n\nexport interface AudioTrackRadioGroupOptionsProps extends Omit<\n  UIComponentProps<'div', AudioTrackRadioGroupCore.State>,\n  'children'\n> {\n  /** Render one consumer-owned menu radio item for every audio track. */\n  renderItem: (props: AudioTrackRadioGroupItemProps, state: AudioTrackRadioGroupItemState) => ReactElement;\n}\n\nexport type AudioTrackRadioGroupValueProps = UIComponentProps<'span', AudioTrackOptionsResult>;\n\nexport interface AudioTrackRadioGroupLegacyProps extends AudioTrackRadioGroupOptionsProps, AudioTrackOptionsProps {}\n\nconst AudioTrackRadioGroupContext = createContext<AudioTrackOptionsResult | null | undefined>(undefined);\n\n/** Owns audio-track option state and shares it with an enclosing menu. Does not render a DOM element. */\nexport function AudioTrackRadioGroupRoot({ children, ...props }: AudioTrackRadioGroupRootProps): ReactNode {\n  const audioTrack = useAudioTrackOptions(props);\n\n  useMenuOptionState(toMenuOptionState(audioTrack));\n\n  return <AudioTrackRadioGroupContext.Provider value={audioTrack}>{children}</AudioTrackRadioGroupContext.Provider>;\n}\n\n/** Displays the selected audio-track label. */\nexport const AudioTrackRadioGroupValue = forwardRef<HTMLSpanElement, AudioTrackRadioGroupValueProps>(\n  function AudioTrackRadioGroupValue({ render, className, style, ...elementProps }, forwardedRef) {\n    const audioTrack = useAudioTrackRadioGroupContext();\n    if (!audioTrack) return null;\n\n    return renderElement(\n      'span',\n      { render, className, style },\n      { state: audioTrack, ref: forwardedRef, props: [elementProps, { children: audioTrack.selectedLabel }] }\n    );\n  }\n);\n\n/** Renders menu radio items for the player's available audio tracks. */\nexport const AudioTrackRadioGroupOptions = forwardRef<HTMLDivElement, AudioTrackRadioGroupOptionsProps>(\n  function AudioTrackRadioGroupOptions(componentProps, forwardedRef) {\n    const {\n      renderItem,\n      render,\n      className,\n      style,\n      'aria-label': ariaLabelProp,\n      'aria-labelledby': ariaLabelledBy,\n      ...elementProps\n    } = componentProps;\n    const audioTrack = useAudioTrackRadioGroupContext();\n    if (!audioTrack) return null;\n\n    const { state, value, options, setValue } = audioTrack;\n    const ariaLabel = ariaLabelProp ?? (ariaLabelledBy === undefined ? audioTrack.label : undefined);\n\n    return (\n      <MenuRadioGroup\n        {...getStateDataAttrs(state, AudioTrackRadioGroupDataAttrs)}\n        {...elementProps}\n        ref={forwardedRef}\n        className={isFunction(className) ? className(state) : className}\n        style={isFunction(style) ? style(state) : style}\n        render={isFunction(render) ? (props: HTMLProps) => render(props, state) : render}\n        value={value}\n        onValueChange={setValue}\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledBy}\n        aria-disabled={state.disabled || undefined}\n        hidden={state.hidden}\n      >\n        {options.map((option) => {\n          const itemState = { ...option, checked: option.value === value };\n\n          return (\n            <Fragment key={option.value}>\n              {renderItem(\n                {\n                  value: option.value,\n                  disabled: option.disabled,\n                  'data-track': option.value,\n                  children: option.label,\n                },\n                itemState\n              )}\n            </Fragment>\n          );\n        })}\n      </MenuRadioGroup>\n    );\n  }\n);\n\n/** @internal Compatibility adapter for the existing preset sources. */\nexport const AudioTrackRadioGroupLegacy = forwardRef<HTMLDivElement, AudioTrackRadioGroupLegacyProps>(\n  function AudioTrackRadioGroupLegacy({ label, formatTrack, disabled, ...props }, forwardedRef) {\n    return (\n      <AudioTrackRadioGroupRoot label={label} formatTrack={formatTrack} disabled={disabled}>\n        <AudioTrackRadioGroupOptions {...props} ref={forwardedRef} />\n      </AudioTrackRadioGroupRoot>\n    );\n  }\n);\n\nfunction useAudioTrackRadioGroupContext(): AudioTrackOptionsResult | null {\n  const audioTrack = useContext(AudioTrackRadioGroupContext);\n\n  if (audioTrack === undefined) {\n    throw new Error('AudioTrackRadioGroup parts must be used within AudioTrackRadioGroup.Root');\n  }\n\n  return audioTrack;\n}\n\nfunction toMenuOptionState(audioTrack: AudioTrackOptionsResult | null): MenuOptionState {\n  return {\n    value: audioTrack?.selectedLabel ?? '',\n    disabled: audioTrack?.disabled ?? true,\n    hidden: audioTrack?.hidden ?? true,\n    availability: audioTrack?.state.availability ?? 'unsupported',\n  };\n}\n\nexport namespace AudioTrackRadioGroupRoot {\n  export type Props = AudioTrackRadioGroupRootProps;\n}\n\nexport namespace AudioTrackRadioGroupValue {\n  export type Props = AudioTrackRadioGroupValueProps;\n  export type State = AudioTrackOptionsResult;\n}\n\nexport namespace AudioTrackRadioGroupOptions {\n  export type Props = AudioTrackRadioGroupOptionsProps;\n  export type State = AudioTrackRadioGroupCore.State;\n  export type ItemProps = AudioTrackRadioGroupItemProps;\n  export type ItemState = AudioTrackRadioGroupItemState;\n}\n"],"mappings":";;;;;;;;;;AA4CA,MAAM,8BAA8B,cAA0D,KAAA,CAAS;;AAGvG,SAAgB,yBAAyB,EAAE,UAAU,GAAG,SAAmD;CACzG,MAAM,aAAa,qBAAqB,KAAK;CAE7C,mBAAmB,kBAAkB,UAAU,CAAC;CAEhD,OAAO,oBAAC,4BAA4B,UAA7B;EAAsC,OAAO;EAAa;CAA+C,CAAA;AAClH;;AAGA,MAAa,4BAA4B,WACvC,SAAS,0BAA0B,EAAE,QAAQ,WAAW,OAAO,GAAG,gBAAgB,cAAc;CAC9F,MAAM,aAAa,+BAA+B;CAClD,IAAI,CAAC,YAAY,OAAO;CAExB,OAAO,cACL,QACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EAAE,OAAO;EAAY,KAAK;EAAc,OAAO,CAAC,cAAc,EAAE,UAAU,WAAW,cAAc,CAAC;CAAE,CACxG;AACF,CACF;;AAGA,MAAa,8BAA8B,WACzC,SAAS,4BAA4B,gBAAgB,cAAc;CACjE,MAAM,EACJ,YACA,QACA,WACA,OACA,cAAc,eACd,mBAAmB,gBACnB,GAAG,iBACD;CACJ,MAAM,aAAa,+BAA+B;CAClD,IAAI,CAAC,YAAY,OAAO;CAExB,MAAM,EAAE,OAAO,OAAO,SAAS,aAAa;CAC5C,MAAM,YAAY,kBAAkB,mBAAmB,KAAA,IAAY,WAAW,QAAQ,KAAA;CAEtF,OACE,oBAAC,gBAAD;EACE,GAAI,kBAAkB,OAAO,6BAA6B;EAC1D,GAAI;EACJ,KAAK;EACL,WAAW,WAAW,SAAS,IAAI,UAAU,KAAK,IAAI;EACtD,OAAO,WAAW,KAAK,IAAI,MAAM,KAAK,IAAI;EAC1C,QAAQ,WAAW,MAAM,KAAK,UAAqB,OAAO,OAAO,KAAK,IAAI;EACnE;EACP,eAAe;EACf,cAAY;EACZ,mBAAiB;EACjB,iBAAe,MAAM,YAAY,KAAA;EACjC,QAAQ,MAAM;EAEb,UAAA,QAAQ,KAAK,WAAW;GACvB,MAAM,YAAY;IAAE,GAAG;IAAQ,SAAS,OAAO,UAAU;GAAM;GAE/D,OACE,oBAAC,UAAD,EAAA,UACG,WACC;IACE,OAAO,OAAO;IACd,UAAU,OAAO;IACjB,cAAc,OAAO;IACrB,UAAU,OAAO;GACnB,GACA,SACF,EACQ,GAVK,OAAO,KAUZ;EAEd,CAAC;CACa,CAAA;AAEpB,CACF;;AAGA,MAAa,6BAA6B,WACxC,SAAS,2BAA2B,EAAE,OAAO,aAAa,UAAU,GAAG,SAAS,cAAc;CAC5F,OACE,oBAAC,0BAAD;EAAiC;EAAoB;EAAuB;EAC1E,UAAA,oBAAC,6BAAD;GAA6B,GAAI;GAAO,KAAK;EAAe,CAAA;CACpC,CAAA;AAE9B,CACF;AAEA,SAAS,iCAAiE;CACxE,MAAM,aAAa,WAAW,2BAA2B;CAEzD,IAAI,eAAe,KAAA,GACjB,MAAM,IAAI,MAAM,0EAA0E;CAG5F,OAAO;AACT;AAEA,SAAS,kBAAkB,YAA6D;CACtF,OAAO;EACL,OAAO,YAAY,iBAAiB;EACpC,UAAU,YAAY,YAAY;EAClC,QAAQ,YAAY,UAAU;EAC9B,cAAc,YAAY,MAAM,gBAAgB;CAClD;AACF"}

package/dist/default/ui/audio-track-radio-group/index.js

@@ -1,3 +1,3 @@
-import { AudioTrackRadioGroupLegacy } from "./audio-track-radio-group.js";
+import { AudioTrackRadioGroupLegacy } from "./component.js";
 import { index_parts_exports } from "./index.parts.js";
 export { index_parts_exports as AudioTrackRadioGroup, AudioTrackRadioGroupLegacy };

package/dist/default/ui/audio-track-radio-group/index.parts.js

@@ -1,5 +1,5 @@
 import { __exportAll } from "../../_virtual/_rolldown/runtime.js";
-import { AudioTrackRadioGroupOptions, AudioTrackRadioGroupRoot, AudioTrackRadioGroupValue } from "./audio-track-radio-group.js";
+import { AudioTrackRadioGroupOptions, AudioTrackRadioGroupRoot, AudioTrackRadioGroupValue } from "./component.js";
 //#region src/ui/audio-track-radio-group/index.parts.ts
 var index_parts_exports = /* @__PURE__ */ __exportAll({
 	Options: () => AudioTrackRadioGroupOptions,

package/dist/default/ui/audio-track-radio-group/index.parts.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.parts.js","names":[],"sources":["../../../../src/ui/audio-track-radio-group/index.parts.ts"],"sourcesContent":["export {\n  type AudioTrackRadioGroupItemProps as ItemProps,\n  type AudioTrackRadioGroupItemState as ItemState,\n  AudioTrackRadioGroupOptions as Options,\n  type AudioTrackRadioGroupOptionsProps as OptionsProps,\n  AudioTrackRadioGroupRoot as Root,\n  type AudioTrackRadioGroupRootProps as RootProps,\n  AudioTrackRadioGroupValue as Value,\n  type AudioTrackRadioGroupValueProps as ValueProps,\n} from './audio-track-radio-group';\n"],"mappings":""}
+{"version":3,"file":"index.parts.js","names":[],"sources":["../../../../src/ui/audio-track-radio-group/index.parts.ts"],"sourcesContent":["export {\n  type AudioTrackRadioGroupItemProps as ItemProps,\n  type AudioTrackRadioGroupItemState as ItemState,\n  AudioTrackRadioGroupOptions as Options,\n  type AudioTrackRadioGroupOptionsProps as OptionsProps,\n  AudioTrackRadioGroupRoot as Root,\n  type AudioTrackRadioGroupRootProps as RootProps,\n  AudioTrackRadioGroupValue as Value,\n  type AudioTrackRadioGroupValueProps as ValueProps,\n} from './component';\n"],"mappings":""}

package/dist/default/ui/buffering-indicator/component.js

@@ -0,0 +1,49 @@
+import { usePlayer } from "../../player/context.js";
+import { useDestroy } from "../../utils/use-destroy.js";
+import { renderElement } from "../../utils/use-render.js";
+import { BufferingIndicatorCore, BufferingIndicatorDataAttrs } from "@videojs/core";
+import { selectPlayback } from "@videojs/core/dom";
+import { forwardRef, useState, useSyncExternalStore } from "react";
+//#region src/ui/buffering-indicator/component.tsx
+/**
+* Displays a buffering indicator when media is waiting for data.
+*
+* Visibility is delayed (default 500ms) to avoid flashing on quick buffers.
+*
+* @example
+*   ```tsx
+*   <BufferingIndicator />
+*
+*   <BufferingIndicator delay={1000} />
+*
+*   <BufferingIndicator
+*   render={(props, state) => (
+*   <div {...props}>{state.visible && <Spinner />}</div>
+*   )}
+*   />
+*   ```;
+*/
+const BufferingIndicator = forwardRef(function BufferingIndicator(componentProps, forwardedRef) {
+	const { render, className, style, delay, ...elementProps } = componentProps;
+	const playback = usePlayer(selectPlayback);
+	const [core] = useState(() => new BufferingIndicatorCore());
+	useDestroy(core);
+	core.setProps({ delay });
+	if (playback) core.update(playback);
+	const state = useSyncExternalStore((cb) => core.state.subscribe(cb), () => core.state.current, () => core.state.current);
+	if (!playback) return null;
+	return renderElement("div", {
+		render,
+		className,
+		style
+	}, {
+		state,
+		stateAttrMap: BufferingIndicatorDataAttrs,
+		ref: [forwardedRef],
+		props: [elementProps]
+	});
+});
+//#endregion
+export { BufferingIndicator };
+
+//# sourceMappingURL=component.js.map