@videojs/react 10.0.0-beta.8 → 10.0.0-rc.1

package/dist/dev/ui/popover/use-popup-position.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-popup-position.js","names":[],"sources":["../../../../src/ui/popover/use-popup-position.ts"],"sourcesContent":["import {\n  type MediaContainer,\n  PopupPositioner,\n  type PopupPositionerOptions,\n  type PositioningBoundary,\n  type PositioningCSSVars,\n  type PositioningOptions,\n} from '@videojs/core/dom';\nimport type { CSSProperties, RefObject } from 'react';\nimport { useLayoutEffect, useState } from 'react';\n\ntype PopupStyle = CSSProperties & Partial<Record<`--${string}`, string>>;\n\nconst POPOVER_RESET: PopupStyle = { position: 'fixed', inset: 'auto', margin: 0 };\n\ninterface UsePopupPositionOptions {\n  open: boolean;\n  anchorName: string;\n  position: PositioningOptions | null;\n  triggerSource: { readonly triggerElement: HTMLElement | null };\n  popupRef: RefObject<HTMLElement | null>;\n  boundary: PositioningBoundary;\n  container: MediaContainer | null;\n  cssVars?: PositioningCSSVars;\n  trackResize?: boolean;\n  onSideChange?: PopupPositionerOptions['onSideChange'];\n}\n\nexport function usePopupPosition({\n  open,\n  anchorName,\n  position,\n  triggerSource,\n  popupRef,\n  boundary,\n  container,\n  cssVars,\n  trackResize,\n  onSideChange,\n}: UsePopupPositionOptions): PopupStyle {\n  const [positioner] = useState(() => new PopupPositioner());\n\n  useLayoutEffect(() => {\n    if (!open) {\n      positioner.cleanup();\n      return;\n    }\n\n    positioner.sync({\n      anchorName,\n      position,\n      trigger: triggerSource.triggerElement,\n      popup: popupRef.current,\n      boundary,\n      container,\n      ...(trackResize !== undefined ? { trackResize } : {}),\n      ...(cssVars ? { cssVars } : {}),\n      ...(onSideChange ? { onSideChange } : {}),\n    });\n  });\n\n  useLayoutEffect(() => () => positioner.cleanup(), [positioner]);\n\n  return POPOVER_RESET;\n}\n"],"mappings":";;;AAaA,MAAM,gBAA4B;CAAE,UAAU;CAAS,OAAO;CAAQ,QAAQ;AAAE;AAehF,SAAgB,iBAAiB,EAC/B,MACA,YACA,UACA,eACA,UACA,UACA,WACA,SACA,aACA,gBACsC;CACtC,MAAM,CAAC,cAAc,eAAe,IAAI,gBAAgB,CAAC;CAEzD,sBAAsB;EACpB,IAAI,CAAC,MAAM;GACT,WAAW,QAAQ;GACnB;EACF;EAEA,WAAW,KAAK;GACd;GACA;GACA,SAAS,cAAc;GACvB,OAAO,SAAS;GAChB;GACA;GACA,GAAI,gBAAgB,KAAA,IAAY,EAAE,YAAY,IAAI,CAAC;GACnD,GAAI,UAAU,EAAE,QAAQ,IAAI,CAAC;GAC7B,GAAI,eAAe,EAAE,aAAa,IAAI,CAAC;EACzC,CAAC;CACH,CAAC;CAED,4BAA4B,WAAW,QAAQ,GAAG,CAAC,UAAU,CAAC;CAE9D,OAAO;AACT"}

package/dist/dev/ui/poster/index.js

@@ -1,3 +1,2 @@
 import { Poster } from "./poster.js";
-
-export { Poster };
+export { Poster };

package/dist/dev/ui/poster/poster.d.ts

@@ -1,24 +1,31 @@
 import { UIComponentProps } from "../../utils/types.js";
-import * as react from "react";
 import { PosterCore } from "@videojs/core";
-
 //#region src/ui/poster/poster.d.ts
 interface PosterProps extends UIComponentProps<'img', PosterCore.State> {}
 /**
  * Displays the video poster image. Shows before playback starts, hides after.
  *
+ * Renders an `<img>`, so `srcset`, `sizes`, `loading`, and the rest of the image attributes are yours. Leave the source
+ * off and the player's resolved `poster` fills it in.
+ *
+ * The image is decorative unless you say otherwise. Describe a poster that carries meaning by passing your own `alt`.
+ *
  * @example
- * ```tsx
- * <Poster src="poster.jpg" alt="Video description" />
+ *   ```tsx
+ *   <VideoPlayer poster="poster.jpg">
+ *   <Poster />
+ *   </VideoPlayer>
+ *
+ *   <Poster srcSet="poster-480.jpg 480w, poster-1080.jpg 1080w" sizes="100vw" />
  *
- * <Poster
- *   src="poster.jpg"
- *   alt="Video description"
- *   className={(state) => state.visible ? 'visible' : 'hidden'}
- * />
- * ```
+ *   <Poster
+ *   render={({ src, ...props }: ComponentProps<'img'>) =>
+ *   src ? <Image {...props} src={src} alt="" fill /> : null
+ *   }
+ *   />
+ *   ```;
  */
-declare const Poster: react.ForwardRefExoticComponent<Omit<PosterProps, "ref"> & react.RefAttributes<HTMLImageElement>>;
+declare const Poster: import("react").ForwardRefExoticComponent<Omit<PosterProps, "ref"> & import("react").RefAttributes<HTMLImageElement>>;
 declare namespace Poster {
   type Props = PosterProps;
   type State = PosterCore.State;

package/dist/dev/ui/poster/poster.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"poster.d.ts","names":[],"sources":["../../../../src/ui/poster/poster.tsx"],"mappings":";;;;;UAWiB,WAAA,SAAoB,gBAAA,QAAwB,UAAA,CAAW,KAAA;;AAAxE;;;;;;;;;AAgBA;;;;cAAa,MAAA,EAAM,KAAA,CAAA,yBAAA,CAAA,IAAA,CAAA,WAAA,WAAA,KAAA,CAAA,aAAA,CAAA,gBAAA;AAAA,kBA6BF,MAAA;EAAA,KACH,KAAA,GAAQ,WAAA;EAAA,KACR,KAAA,GAAQ,UAAA,CAAW,KAAA;AAAA"}
+{"version":3,"file":"poster.d.ts","names":[],"sources":["../../../../src/ui/poster/poster.tsx"],"mappings":";;;UASiB,oBAAoB,wBAAwB,WAAW;;;;;;;;;;;;;;;;;;;;;;;;cAgC3D,wBAAM,0BAAA,KAAA,sCAAA,cAAA;kBA4GF;OACH,QAAQ;OACR,QAAQ,WAAW"}

package/dist/dev/ui/poster/poster.js

@@ -1,47 +1,107 @@
-'use client';
-
 import { usePlayer } from "../../player/context.js";
 import { renderElement } from "../../utils/use-render.js";
-import { logMissingFeature, selectPlayback } from "@videojs/core/dom";
-import { forwardRef, useState } from "react";
 import { PosterCore, PosterDataAttrs } from "@videojs/core";
-
+import { logMissingFeature, selectMetadata, selectPlayback } from "@videojs/core/dom";
+import { forwardRef, useCallback, useEffect, useRef, useState } from "react";
 //#region src/ui/poster/poster.tsx
 /**
 * Displays the video poster image. Shows before playback starts, hides after.
 *
+* Renders an `<img>`, so `srcset`, `sizes`, `loading`, and the rest of the image attributes are yours. Leave the source
+* off and the player's resolved `poster` fills it in.
+*
+* The image is decorative unless you say otherwise. Describe a poster that carries meaning by passing your own `alt`.
+*
 * @example
-* ```tsx
-* <Poster src="poster.jpg" alt="Video description" />
+*   ```tsx
+*   <VideoPlayer poster="poster.jpg">
+*   <Poster />
+*   </VideoPlayer>
+*
+*   <Poster srcSet="poster-480.jpg 480w, poster-1080.jpg 1080w" sizes="100vw" />
 *
-* <Poster
-*   src="poster.jpg"
-*   alt="Video description"
-*   className={(state) => state.visible ? 'visible' : 'hidden'}
-* />
-* ```
+*   <Poster
+*   render={({ src, ...props }: ComponentProps<'img'>) =>
+*   src ? <Image {...props} src={src} alt="" fill /> : null
+*   }
+*   />
+*   ```;
 */
 const Poster = forwardRef(function Poster(componentProps, forwardedRef) {
 	const { render, className, style, ...elementProps } = componentProps;
 	const playback = usePlayer(selectPlayback);
+	const metadata = usePlayer(selectMetadata);
 	const [core] = useState(() => new PosterCore());
-	if (!playback) {
+	if (playback) core.setMedia({
+		started: playback.started,
+		poster: metadata?.poster ?? ""
+	});
+	const { src: authoredSrc, srcSet: authoredSrcSet } = elementProps;
+	const src = authoredSrc ?? (authoredSrcSet === void 0 && playback ? core.getState().src : "");
+	const initialLoadState = !src && authoredSrcSet === void 0 ? "none" : "loading";
+	const [request, setRequest] = useState(() => ({
+		src,
+		srcSet: authoredSrcSet,
+		state: initialLoadState
+	}));
+	const imgRef = useRef(null);
+	const matchesRequest = request.src === src && request.srcSet === authoredSrcSet;
+	if (!matchesRequest) setRequest({
+		src,
+		srcSet: authoredSrcSet,
+		state: initialLoadState
+	});
+	const loadState = matchesRequest ? request.state : initialLoadState;
+	if (playback) core.setImageLoadState(loadState);
+	const state = playback ? core.getState() : null;
+	useEffect(() => {
+		const img = imgRef.current;
+		if (!img) return;
+		if (img.naturalWidth > 0) setRequest({
+			src,
+			srcSet: authoredSrcSet,
+			state: "loaded"
+		});
+		else if (img.complete && (img.getAttribute("src") || img.hasAttribute("srcset"))) setRequest({
+			src,
+			srcSet: authoredSrcSet,
+			state: "error"
+		});
+	}, []);
+	const handleLoad = useCallback(() => setRequest({
+		src,
+		srcSet: authoredSrcSet,
+		state: "loaded"
+	}), [src, authoredSrcSet]);
+	const handleError = useCallback(() => setRequest({
+		src,
+		srcSet: authoredSrcSet,
+		state: "error"
+	}), [src, authoredSrcSet]);
+	if (!playback || !state) {
 		logMissingFeature("Poster", "playback");
 		return null;
 	}
-	core.setMedia(playback);
 	return renderElement("img", {
 		render,
 		className,
 		style
 	}, {
-		state: core.getState(),
+		state,
 		stateAttrMap: PosterDataAttrs,
-		ref: [forwardedRef],
-		props: [elementProps]
+		ref: [forwardedRef, imgRef],
+		props: [
+			{ alt: "" },
+			elementProps,
+			{
+				src: src || void 0,
+				onLoad: handleLoad,
+				onError: handleError
+			}
+		]
 	});
 });
-
 //#endregion
 export { Poster };
+
 //# sourceMappingURL=poster.js.map

package/dist/dev/ui/poster/poster.js.map

@@ -1 +1 @@
-{"version":3,"file":"poster.js","names":[],"sources":["../../../../src/ui/poster/poster.tsx"],"sourcesContent":["'use client';\n\nimport { PosterCore, PosterDataAttrs } from '@videojs/core';\nimport { logMissingFeature, selectPlayback } from '@videojs/core/dom';\nimport type { ForwardedRef } from 'react';\nimport { forwardRef, useState } from 'react';\n\nimport { usePlayer } from '../../player/context';\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\n\nexport interface PosterProps extends UIComponentProps<'img', PosterCore.State> {}\n\n/**\n * Displays the video poster image. Shows before playback starts, hides after.\n *\n * @example\n * ```tsx\n * <Poster src=\"poster.jpg\" alt=\"Video description\" />\n *\n * <Poster\n *   src=\"poster.jpg\"\n *   alt=\"Video description\"\n *   className={(state) => state.visible ? 'visible' : 'hidden'}\n * />\n * ```\n */\nexport const Poster = forwardRef(function Poster(\n  componentProps: PosterProps,\n  forwardedRef: ForwardedRef<HTMLImageElement>\n) {\n  const { render, className, style, ...elementProps } = componentProps;\n\n  const playback = usePlayer(selectPlayback);\n\n  const [core] = useState(() => new PosterCore());\n\n  if (!playback) {\n    if (__DEV__) logMissingFeature('Poster', 'playback');\n    return null;\n  }\n\n  core.setMedia(playback);\n\n  return renderElement(\n    'img',\n    { render, className, style },\n    {\n      state: core.getState(),\n      stateAttrMap: PosterDataAttrs,\n      ref: [forwardedRef],\n      props: [elementProps],\n    }\n  );\n});\n\nexport namespace Poster {\n  export type Props = PosterProps;\n  export type State = PosterCore.State;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AA2BA,MAAa,SAAS,WAAW,SAAS,OACxC,gBACA,cACA;CACA,MAAM,EAAE,QAAQ,WAAW,OAAO,GAAG,iBAAiB;CAEtD,MAAM,WAAW,UAAU,eAAe;CAE1C,MAAM,CAAC,QAAQ,eAAe,IAAI,YAAY,CAAC;AAE/C,KAAI,CAAC,UAAU;AACA,oBAAkB,UAAU,WAAW;AACpD,SAAO;;AAGT,MAAK,SAAS,SAAS;AAEvB,QAAO,cACL,OACA;EAAE;EAAQ;EAAW;EAAO,EAC5B;EACE,OAAO,KAAK,UAAU;EACtB,cAAc;EACd,KAAK,CAAC,aAAa;EACnB,OAAO,CAAC,aAAa;EACtB,CACF;EACD"}
+{"version":3,"file":"poster.js","names":[],"sources":["../../../../src/ui/poster/poster.tsx"],"sourcesContent":["import { PosterCore, PosterDataAttrs, type PosterImageLoadState } from '@videojs/core';\nimport { logMissingFeature, selectMetadata, selectPlayback } from '@videojs/core/dom';\nimport type { ForwardedRef } from 'react';\nimport { forwardRef, useCallback, useEffect, useRef, useState } from 'react';\n\nimport { usePlayer } from '../../player/context';\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\n\nexport interface PosterProps extends UIComponentProps<'img', PosterCore.State> {}\n\n/** The source currently requested from the image, and how it is faring. */\ninterface ImageRequest {\n  src: string;\n  srcSet: string | undefined;\n  state: PosterImageLoadState;\n}\n\n/**\n * Displays the video poster image. Shows before playback starts, hides after.\n *\n * Renders an `<img>`, so `srcset`, `sizes`, `loading`, and the rest of the image attributes are yours. Leave the source\n * off and the player's resolved `poster` fills it in.\n *\n * The image is decorative unless you say otherwise. Describe a poster that carries meaning by passing your own `alt`.\n *\n * @example\n *   ```tsx\n *   <VideoPlayer poster=\"poster.jpg\">\n *   <Poster />\n *   </VideoPlayer>\n *\n *   <Poster srcSet=\"poster-480.jpg 480w, poster-1080.jpg 1080w\" sizes=\"100vw\" />\n *\n *   <Poster\n *   render={({ src, ...props }: ComponentProps<'img'>) =>\n *   src ? <Image {...props} src={src} alt=\"\" fill /> : null\n *   }\n *   />\n *   ```;\n */\nexport const Poster = forwardRef(function Poster(\n  componentProps: PosterProps,\n  forwardedRef: ForwardedRef<HTMLImageElement>\n) {\n  const { render, className, style, ...elementProps } = componentProps;\n\n  const playback = usePlayer(selectPlayback);\n  const metadata = usePlayer(selectMetadata);\n\n  const [core] = useState(() => new PosterCore());\n\n  // The metadata feature is optional: without it nothing resolves a URL, and\n  // this stays a visibility wrapper around whatever `src` was passed.\n  if (playback) {\n    core.setMedia({\n      started: playback.started,\n      poster: metadata?.poster ?? '',\n    });\n  }\n\n  const { src: authoredSrc, srcSet: authoredSrcSet } = elementProps as { src?: string; srcSet?: string };\n\n  // Either authored source makes the image yours, matching `hasSource` in the\n  // HTML element. Filling `src` alongside a `srcset` would inject the player's\n  // poster into your candidate set as the 1x entry.\n  const src = authoredSrc ?? (authoredSrcSet === undefined && playback ? core.getState().src : '');\n\n  const initialLoadState: PosterImageLoadState = !src && authoredSrcSet === undefined ? 'none' : 'loading';\n  const [request, setRequest] = useState<ImageRequest>(() => ({\n    src,\n    srcSet: authoredSrcSet,\n    state: initialLoadState,\n  }));\n  const imgRef = useRef<HTMLImageElement | null>(null);\n\n  // Keep only the active request. Retaining a settled source by value would\n  // resurrect its old state when the image moved A -> B -> A, even though the\n  // second A is a new request. `srcSet` is part of the identity because `src`\n  // stays empty when it is the only source.\n  const matchesRequest = request.src === src && request.srcSet === authoredSrcSet;\n\n  if (!matchesRequest) setRequest({ src, srcSet: authoredSrcSet, state: initialLoadState });\n\n  const loadState = matchesRequest ? request.state : initialLoadState;\n\n  if (playback) core.setImageLoadState(loadState);\n\n  const state = playback ? core.getState() : null;\n\n  // An image can already be settled when we first see it — hydrated from server\n  // markup, say — in which case neither `load` nor `error` ever fires. Decoded\n  // pixels stand on their own; the absence of them only means failure once\n  // `complete` can be trusted, which takes a source on the image itself, since one\n  // sourced by a `<picture>` an override wrapped it in is `complete` regardless.\n  //\n  // Only when we first see it. A later source change leaves the previous request's\n  // pixels in place until the new one settles, so reading them again would call\n  // the new source loaded while it is still fetching. `load` and `error` cover\n  // every source after this one, the way the HTML element reads an image once.\n  // oxlint-disable-next-line react/exhaustive-deps -- reads the first source only, at mount\n  useEffect(() => {\n    const img = imgRef.current;\n    if (!img) return;\n\n    if (img.naturalWidth > 0) setRequest({ src, srcSet: authoredSrcSet, state: 'loaded' });\n    else if (img.complete && (img.getAttribute('src') || img.hasAttribute('srcset'))) {\n      setRequest({ src, srcSet: authoredSrcSet, state: 'error' });\n    }\n  }, []);\n\n  // Recorded against the source this render asked for, not the one on the\n  // element: a `render` override is free to rewrite it.\n  const handleLoad = useCallback(\n    () => setRequest({ src, srcSet: authoredSrcSet, state: 'loaded' }),\n    [src, authoredSrcSet]\n  );\n  const handleError = useCallback(\n    () => setRequest({ src, srcSet: authoredSrcSet, state: 'error' }),\n    [src, authoredSrcSet]\n  );\n\n  if (!playback || !state) {\n    if (__DEV__) logMissingFeature('Poster', 'playback');\n\n    return null;\n  }\n\n  return renderElement(\n    'img',\n    { render, className, style },\n    {\n      state,\n      stateAttrMap: PosterDataAttrs,\n      ref: [forwardedRef, imgRef],\n      props: [\n        { alt: '' },\n        elementProps,\n        {\n          // An empty `src` requests the document URL, so leave the attribute off.\n          src: src || undefined,\n          onLoad: handleLoad,\n          onError: handleError,\n        },\n      ],\n    }\n  );\n});\n\nexport namespace Poster {\n  export type Props = PosterProps;\n  export type State = PosterCore.State;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyCA,MAAa,SAAS,WAAW,SAAS,OACxC,gBACA,cACA;CACA,MAAM,EAAE,QAAQ,WAAW,OAAO,GAAG,iBAAiB;CAEtD,MAAM,WAAW,UAAU,cAAc;CACzC,MAAM,WAAW,UAAU,cAAc;CAEzC,MAAM,CAAC,QAAQ,eAAe,IAAI,WAAW,CAAC;CAI9C,IAAI,UACF,KAAK,SAAS;EACZ,SAAS,SAAS;EAClB,QAAQ,UAAU,UAAU;CAC9B,CAAC;CAGH,MAAM,EAAE,KAAK,aAAa,QAAQ,mBAAmB;CAKrD,MAAM,MAAM,gBAAgB,mBAAmB,KAAA,KAAa,WAAW,KAAK,SAAS,CAAC,CAAC,MAAM;CAE7F,MAAM,mBAAyC,CAAC,OAAO,mBAAmB,KAAA,IAAY,SAAS;CAC/F,MAAM,CAAC,SAAS,cAAc,gBAA8B;EAC1D;EACA,QAAQ;EACR,OAAO;CACT,EAAE;CACF,MAAM,SAAS,OAAgC,IAAI;CAMnD,MAAM,iBAAiB,QAAQ,QAAQ,OAAO,QAAQ,WAAW;CAEjE,IAAI,CAAC,gBAAgB,WAAW;EAAE;EAAK,QAAQ;EAAgB,OAAO;CAAiB,CAAC;CAExF,MAAM,YAAY,iBAAiB,QAAQ,QAAQ;CAEnD,IAAI,UAAU,KAAK,kBAAkB,SAAS;CAE9C,MAAM,QAAQ,WAAW,KAAK,SAAS,IAAI;CAa3C,gBAAgB;EACd,MAAM,MAAM,OAAO;EACnB,IAAI,CAAC,KAAK;EAEV,IAAI,IAAI,eAAe,GAAG,WAAW;GAAE;GAAK,QAAQ;GAAgB,OAAO;EAAS,CAAC;OAChF,IAAI,IAAI,aAAa,IAAI,aAAa,KAAK,KAAK,IAAI,aAAa,QAAQ,IAC5E,WAAW;GAAE;GAAK,QAAQ;GAAgB,OAAO;EAAQ,CAAC;CAE9D,GAAG,CAAC,CAAC;CAIL,MAAM,aAAa,kBACX,WAAW;EAAE;EAAK,QAAQ;EAAgB,OAAO;CAAS,CAAC,GACjE,CAAC,KAAK,cAAc,CACtB;CACA,MAAM,cAAc,kBACZ,WAAW;EAAE;EAAK,QAAQ;EAAgB,OAAO;CAAQ,CAAC,GAChE,CAAC,KAAK,cAAc,CACtB;CAEA,IAAI,CAAC,YAAY,CAAC,OAAO;EACV,kBAAkB,UAAU,UAAU;EAEnD,OAAO;CACT;CAEA,OAAO,cACL,OACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EACE;EACA,cAAc;EACd,KAAK,CAAC,cAAc,MAAM;EAC1B,OAAO;GACL,EAAE,KAAK,GAAG;GACV;GACA;IAEE,KAAK,OAAO,KAAA;IACZ,QAAQ;IACR,SAAS;GACX;EACF;CACF,CACF;AACF,CAAC"}

package/dist/dev/ui/quality/index.d.ts

@@ -0,0 +1,2 @@
+import { QualityOption, QualityOptionsProps, QualityOptionsResult, useQualityOptions } from "./use-quality-options.js";
+export { type QualityOption, type QualityOptionsProps, type QualityOptionsResult, useQualityOptions };

package/dist/dev/ui/quality/index.js

@@ -0,0 +1,2 @@
+import { useQualityOptions } from "./use-quality-options.js";
+export { useQualityOptions };

package/dist/dev/ui/quality/use-quality-options.d.ts

@@ -0,0 +1,30 @@
+import { TranslatedRadioOption } from "../hooks/create-radio-options-hook.js";
+import { QualityRadioGroupCore, QualityRadioGroupOption } from "@videojs/core";
+//#region src/ui/quality/use-quality-options.d.ts
+interface QualityOptionsProps extends QualityRadioGroupCore.Props {}
+type QualityOption = TranslatedRadioOption<QualityRadioGroupOption>;
+interface QualityOptionsResult {
+  state: QualityRadioGroupCore.State;
+  label: string;
+  value: string;
+  selectedLabel: string;
+  options: QualityOption[];
+  disabled: boolean;
+  hidden: boolean;
+  setValue: (value: string) => void;
+}
+/**
+ * Create quality menu options (including an `Auto` option) from the player video rendition state. Returns `null` when
+ * the quality feature is not configured.
+ *
+ * @param props - Optional `label`, `formatRendition`, and `disabled` overrides.
+ */
+declare function useQualityOptions(props?: QualityOptionsProps): QualityOptionsResult | null;
+declare namespace useQualityOptions {
+  type Props = QualityOptionsProps;
+  type Result = QualityOptionsResult;
+  type Option = QualityOption;
+}
+//#endregion
+export { QualityOption, QualityOptionsProps, QualityOptionsResult, useQualityOptions };
+//# sourceMappingURL=use-quality-options.d.ts.map

package/dist/dev/ui/quality/use-quality-options.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-quality-options.d.ts","names":[],"sources":["../../../../src/ui/quality/use-quality-options.ts"],"mappings":";;;UAKiB,4BAA4B,sBAAsB;KAEvD,gBAAgB,sBAAsB;UAEjC;EACf,OAAO,sBAAsB;EAC7B;EACA;EACA;EACA,SAAS;EACT;EACA;EACA,WAAW;;;;;;;;iBAgBG,kBAAkB,QAAQ,sBAAsB;kBAM/C;OACH,QAAQ;OACR,SAAS;OACT,SAAS"}

package/dist/dev/ui/quality/use-quality-options.js

@@ -0,0 +1,24 @@
+import { createRadioOptionsHook } from "../hooks/create-radio-options-hook.js";
+import { QualityRadioGroupCore } from "@videojs/core";
+import { selectQuality } from "@videojs/core/dom";
+//#region src/ui/quality/use-quality-options.ts
+const useQualityRadioOptions = createRadioOptionsHook({
+	name: "useQualityOptions",
+	feature: "quality",
+	selector: selectQuality,
+	createCore: () => new QualityRadioGroupCore()
+});
+/**
+* Create quality menu options (including an `Auto` option) from the player video rendition state. Returns `null` when
+* the quality feature is not configured.
+*
+* @param props - Optional `label`, `formatRendition`, and `disabled` overrides.
+*/
+function useQualityOptions(props) {
+	"use no memo";
+	return useQualityRadioOptions(props);
+}
+//#endregion
+export { useQualityOptions };
+
+//# sourceMappingURL=use-quality-options.js.map

package/dist/dev/ui/quality/use-quality-options.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-quality-options.js","names":[],"sources":["../../../../src/ui/quality/use-quality-options.ts"],"sourcesContent":["import { QualityRadioGroupCore, type QualityRadioGroupOption } from '@videojs/core';\nimport { selectQuality } from '@videojs/core/dom';\n\nimport { createRadioOptionsHook, type TranslatedRadioOption } from '../hooks/create-radio-options-hook';\n\nexport interface QualityOptionsProps extends QualityRadioGroupCore.Props {}\n\nexport type QualityOption = TranslatedRadioOption<QualityRadioGroupOption>;\n\nexport interface QualityOptionsResult {\n  state: QualityRadioGroupCore.State;\n  label: string;\n  value: string;\n  selectedLabel: string;\n  options: QualityOption[];\n  disabled: boolean;\n  hidden: boolean;\n  setValue: (value: string) => void;\n}\n\nconst useQualityRadioOptions = createRadioOptionsHook({\n  name: 'useQualityOptions',\n  feature: 'quality',\n  selector: selectQuality,\n  createCore: () => new QualityRadioGroupCore(),\n});\n\n/**\n * Create quality menu options (including an `Auto` option) from the player video rendition state. Returns `null` when\n * the quality feature is not configured.\n *\n * @param props - Optional `label`, `formatRendition`, and `disabled` overrides.\n */\nexport function useQualityOptions(props?: QualityOptionsProps): QualityOptionsResult | null {\n  'use no memo';\n\n  return useQualityRadioOptions(props);\n}\n\nexport namespace useQualityOptions {\n  export type Props = QualityOptionsProps;\n  export type Result = QualityOptionsResult;\n  export type Option = QualityOption;\n}\n"],"mappings":";;;;AAoBA,MAAM,yBAAyB,uBAAuB;CACpD,MAAM;CACN,SAAS;CACT,UAAU;CACV,kBAAkB,IAAI,sBAAsB;AAC9C,CAAC;;;;;;;AAQD,SAAgB,kBAAkB,OAA0D;CAC1F;CAEA,OAAO,uBAAuB,KAAK;AACrC"}

package/dist/dev/ui/quality-radio-group/index.d.ts

@@ -0,0 +1,3 @@
+import { QualityRadioGroupLegacy } from "./quality-radio-group.js";
+import { index_parts_d_exports } from "./index.parts.js";
+export { index_parts_d_exports as QualityRadioGroup, QualityRadioGroupLegacy };

package/dist/dev/ui/quality-radio-group/index.js

@@ -0,0 +1,3 @@
+import { QualityRadioGroupLegacy } from "./quality-radio-group.js";
+import { index_parts_exports } from "./index.parts.js";
+export { index_parts_exports as QualityRadioGroup, QualityRadioGroupLegacy };

package/dist/dev/ui/quality-radio-group/index.parts.d.ts

@@ -0,0 +1,7 @@
+import { QualityRadioGroupItemProps, QualityRadioGroupItemState, QualityRadioGroupOptions, QualityRadioGroupOptionsProps, QualityRadioGroupRoot, QualityRadioGroupRootProps, QualityRadioGroupValue, QualityRadioGroupValueProps } from "./quality-radio-group.js";
+declare namespace index_parts_d_exports {
+  export { QualityRadioGroupItemProps as ItemProps, QualityRadioGroupItemState as ItemState, QualityRadioGroupOptions as Options, QualityRadioGroupOptionsProps as OptionsProps, QualityRadioGroupRoot as Root, QualityRadioGroupRootProps as RootProps, QualityRadioGroupValue as Value, QualityRadioGroupValueProps as ValueProps };
+}
+//#endregion
+export { type QualityRadioGroupItemProps as ItemProps, type QualityRadioGroupItemState as ItemState, QualityRadioGroupOptions as Options, type QualityRadioGroupOptionsProps as OptionsProps, QualityRadioGroupRoot as Root, type QualityRadioGroupRootProps as RootProps, QualityRadioGroupValue as Value, type QualityRadioGroupValueProps as ValueProps, index_parts_d_exports };
+//# sourceMappingURL=index.parts.d.ts.map

package/dist/dev/ui/quality-radio-group/index.parts.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.parts.d.ts","names":[],"sources":["../../../../src/ui/quality-radio-group/index.parts.ts"],"mappings":""}

package/dist/dev/ui/quality-radio-group/index.parts.js

@@ -0,0 +1,12 @@
+import { __exportAll } from "../../_virtual/_rolldown/runtime.js";
+import { QualityRadioGroupOptions, QualityRadioGroupRoot, QualityRadioGroupValue } from "./quality-radio-group.js";
+//#region src/ui/quality-radio-group/index.parts.ts
+var index_parts_exports = /* @__PURE__ */ __exportAll({
+	Options: () => QualityRadioGroupOptions,
+	Root: () => QualityRadioGroupRoot,
+	Value: () => QualityRadioGroupValue
+});
+//#endregion
+export { QualityRadioGroupOptions as Options, QualityRadioGroupRoot as Root, QualityRadioGroupValue as Value, index_parts_exports };
+
+//# sourceMappingURL=index.parts.js.map

package/dist/dev/ui/quality-radio-group/index.parts.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.parts.js","names":[],"sources":["../../../../src/ui/quality-radio-group/index.parts.ts"],"sourcesContent":["export {\n  type QualityRadioGroupItemProps as ItemProps,\n  type QualityRadioGroupItemState as ItemState,\n  QualityRadioGroupOptions as Options,\n  type QualityRadioGroupOptionsProps as OptionsProps,\n  QualityRadioGroupRoot as Root,\n  type QualityRadioGroupRootProps as RootProps,\n  QualityRadioGroupValue as Value,\n  type QualityRadioGroupValueProps as ValueProps,\n} from './quality-radio-group';\n"],"mappings":""}

package/dist/dev/ui/quality-radio-group/quality-radio-group.d.ts

@@ -0,0 +1,48 @@
+import { UIComponentProps } from "../../utils/types.js";
+import { MenuRadioItemProps } from "../menu/menu-radio-item.js";
+import { QualityOption, QualityOptionsProps, QualityOptionsResult } from "../quality/use-quality-options.js";
+import "../quality/index.js";
+import { QualityRadioGroupCore } from "@videojs/core";
+import { ReactElement, ReactNode } from "react";
+//#region src/ui/quality-radio-group/quality-radio-group.d.ts
+type QualityRadioGroupItemState = QualityOption & {
+  /** Whether this quality option is currently selected. */
+  checked: boolean;
+};
+interface QualityRadioGroupItemProps extends Omit<MenuRadioItemProps, 'ref'> {
+  /** Rendition value represented by the item. */
+  'data-rendition': string;
+}
+interface QualityRadioGroupRootProps extends QualityOptionsProps {
+  children?: ReactNode;
+}
+interface QualityRadioGroupOptionsProps extends Omit<UIComponentProps<'div', QualityRadioGroupCore.State>, 'children'> {
+  /** Render one consumer-owned menu radio item for every quality option. */
+  renderItem: (props: QualityRadioGroupItemProps, state: QualityRadioGroupItemState) => ReactElement;
+}
+type QualityRadioGroupValueProps = UIComponentProps<'span', QualityOptionsResult>;
+interface QualityRadioGroupLegacyProps extends QualityRadioGroupOptionsProps, QualityOptionsProps {}
+/** Owns quality option state and shares it with an enclosing menu. Does not render a DOM element. */
+declare function QualityRadioGroupRoot({ children, ...props }: QualityRadioGroupRootProps): ReactNode;
+/** Displays the selected quality label. */
+declare const QualityRadioGroupValue: import("react").ForwardRefExoticComponent<Omit<QualityRadioGroupValueProps, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+/** Renders menu radio items for the player's video renditions. */
+declare const QualityRadioGroupOptions: import("react").ForwardRefExoticComponent<Omit<QualityRadioGroupOptionsProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+/** @internal Compatibility adapter for the existing preset sources. */
+declare const QualityRadioGroupLegacy: import("react").ForwardRefExoticComponent<Omit<QualityRadioGroupLegacyProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+declare namespace QualityRadioGroupRoot {
+  type Props = QualityRadioGroupRootProps;
+}
+declare namespace QualityRadioGroupValue {
+  type Props = QualityRadioGroupValueProps;
+  type State = QualityOptionsResult;
+}
+declare namespace QualityRadioGroupOptions {
+  type Props = QualityRadioGroupOptionsProps;
+  type State = QualityRadioGroupCore.State;
+  type ItemProps = QualityRadioGroupItemProps;
+  type ItemState = QualityRadioGroupItemState;
+}
+//#endregion
+export { QualityRadioGroupItemProps, QualityRadioGroupItemState, QualityRadioGroupLegacy, QualityRadioGroupLegacyProps, QualityRadioGroupOptions, QualityRadioGroupOptionsProps, QualityRadioGroupRoot, QualityRadioGroupRootProps, QualityRadioGroupValue, QualityRadioGroupValueProps };
+//# sourceMappingURL=quality-radio-group.d.ts.map

package/dist/dev/ui/quality-radio-group/quality-radio-group.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"quality-radio-group.d.ts","names":[],"sources":["../../../../src/ui/quality-radio-group/quality-radio-group.tsx"],"mappings":";;;;;;;KAaY,6BAA6B;;EAEvC;;UAGe,mCAAmC,KAAK;;EAEvD;;UAGe,mCAAmC;EAClD,WAAW;;UAGI,sCAAsC,KACrD,wBAAwB,sBAAsB;;EAI9C,aAAa,OAAO,4BAA4B,OAAO,+BAA+B;;KAG5E,8BAA8B,yBAAyB;UAElD,qCAAqC,+BAA+B;;iBAKrE,wBAAwB,aAAa,SAAS,6BAA6B;;cAS9E,wCAAsB,0BAAA,KAAA,sDAAA,cAAA;;cActB,0CAAwB,0BAAA,KAAA,wDAAA,cAAA;;cAuDxB,yCAAuB,0BAAA,KAAA,uDAAA,cAAA;kBA0BnB;OACH,QAAQ;;kBAGL;OACH,QAAQ;OACR,QAAQ;;kBAGL;OACH,QAAQ;OACR,QAAQ,sBAAsB;OAC9B,YAAY;OACZ,YAAY"}

package/dist/dev/ui/quality-radio-group/quality-radio-group.js

@@ -0,0 +1,97 @@
+import { renderElement } from "../../utils/use-render.js";
+import { useMenuOptionState } from "../menu/context.js";
+import { MenuRadioGroup } from "../menu/menu-radio-group.js";
+import { useQualityOptions } from "../quality/use-quality-options.js";
+import { QualityRadioGroupDataAttrs } 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/quality-radio-group/quality-radio-group.tsx
+const QualityRadioGroupContext = createContext(void 0);
+/** Owns quality option state and shares it with an enclosing menu. Does not render a DOM element. */
+function QualityRadioGroupRoot({ children, ...props }) {
+	const quality = useQualityOptions(props);
+	useMenuOptionState(toMenuOptionState(quality));
+	return /* @__PURE__ */ jsx(QualityRadioGroupContext.Provider, {
+		value: quality,
+		children
+	});
+}
+/** Displays the selected quality label. */
+const QualityRadioGroupValue = forwardRef(function QualityRadioGroupValue({ render, className, style, ...elementProps }, forwardedRef) {
+	const quality = useQualityRadioGroupContext();
+	if (!quality) return null;
+	return renderElement("span", {
+		render,
+		className,
+		style
+	}, {
+		state: quality,
+		ref: forwardedRef,
+		props: [elementProps, { children: quality.selectedLabel }]
+	});
+});
+/** Renders menu radio items for the player's video renditions. */
+const QualityRadioGroupOptions = forwardRef(function QualityRadioGroupOptions(componentProps, forwardedRef) {
+	const { renderItem, render, className, style, "aria-label": ariaLabelProp, "aria-labelledby": ariaLabelledBy, ...elementProps } = componentProps;
+	const quality = useQualityRadioGroupContext();
+	if (!quality) return null;
+	const { state, value, options, setValue } = quality;
+	const ariaLabel = ariaLabelProp ?? (ariaLabelledBy === void 0 ? quality.label : void 0);
+	return /* @__PURE__ */ jsx(MenuRadioGroup, {
+		...getStateDataAttrs(state, QualityRadioGroupDataAttrs),
+		...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-rendition": option.value,
+				children: option.label
+			}, itemState) }, option.value);
+		})
+	});
+});
+/** @internal Compatibility adapter for the existing preset sources. */
+const QualityRadioGroupLegacy = forwardRef(function QualityRadioGroupLegacy({ label, formatRendition, disabled, ...props }, forwardedRef) {
+	return /* @__PURE__ */ jsx(QualityRadioGroupRoot, {
+		label,
+		formatRendition,
+		disabled,
+		children: /* @__PURE__ */ jsx(QualityRadioGroupOptions, {
+			...props,
+			ref: forwardedRef
+		})
+	});
+});
+function useQualityRadioGroupContext() {
+	const quality = useContext(QualityRadioGroupContext);
+	if (quality === void 0) throw new Error("QualityRadioGroup parts must be used within QualityRadioGroup.Root");
+	return quality;
+}
+function toMenuOptionState(quality) {
+	return {
+		value: quality?.selectedLabel ?? "",
+		disabled: quality?.disabled ?? true,
+		hidden: quality?.hidden ?? true,
+		availability: quality?.state.availability ?? "unsupported"
+	};
+}
+//#endregion
+export { QualityRadioGroupLegacy, QualityRadioGroupOptions, QualityRadioGroupRoot, QualityRadioGroupValue };
+
+//# sourceMappingURL=quality-radio-group.js.map

package/dist/dev/ui/quality-radio-group/quality-radio-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"quality-radio-group.js","names":[],"sources":["../../../../src/ui/quality-radio-group/quality-radio-group.tsx"],"sourcesContent":["import { type MenuOptionState, type QualityRadioGroupCore, QualityRadioGroupDataAttrs } 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 { useMenuOptionState } from '../menu/context';\nimport { MenuRadioGroup } from '../menu/menu-radio-group';\nimport type { MenuRadioItemProps } from '../menu/menu-radio-item';\nimport { type QualityOption, type QualityOptionsProps, type QualityOptionsResult, useQualityOptions } from '../quality';\n\nexport type QualityRadioGroupItemState = QualityOption & {\n  /** Whether this quality option is currently selected. */\n  checked: boolean;\n};\n\nexport interface QualityRadioGroupItemProps extends Omit<MenuRadioItemProps, 'ref'> {\n  /** Rendition value represented by the item. */\n  'data-rendition': string;\n}\n\nexport interface QualityRadioGroupRootProps extends QualityOptionsProps {\n  children?: ReactNode;\n}\n\nexport interface QualityRadioGroupOptionsProps extends Omit<\n  UIComponentProps<'div', QualityRadioGroupCore.State>,\n  'children'\n> {\n  /** Render one consumer-owned menu radio item for every quality option. */\n  renderItem: (props: QualityRadioGroupItemProps, state: QualityRadioGroupItemState) => ReactElement;\n}\n\nexport type QualityRadioGroupValueProps = UIComponentProps<'span', QualityOptionsResult>;\n\nexport interface QualityRadioGroupLegacyProps extends QualityRadioGroupOptionsProps, QualityOptionsProps {}\n\nconst QualityRadioGroupContext = createContext<QualityOptionsResult | null | undefined>(undefined);\n\n/** Owns quality option state and shares it with an enclosing menu. Does not render a DOM element. */\nexport function QualityRadioGroupRoot({ children, ...props }: QualityRadioGroupRootProps): ReactNode {\n  const quality = useQualityOptions(props);\n\n  useMenuOptionState(toMenuOptionState(quality));\n\n  return <QualityRadioGroupContext.Provider value={quality}>{children}</QualityRadioGroupContext.Provider>;\n}\n\n/** Displays the selected quality label. */\nexport const QualityRadioGroupValue = forwardRef<HTMLSpanElement, QualityRadioGroupValueProps>(\n  function QualityRadioGroupValue({ render, className, style, ...elementProps }, forwardedRef) {\n    const quality = useQualityRadioGroupContext();\n    if (!quality) return null;\n\n    return renderElement(\n      'span',\n      { render, className, style },\n      { state: quality, ref: forwardedRef, props: [elementProps, { children: quality.selectedLabel }] }\n    );\n  }\n);\n\n/** Renders menu radio items for the player's video renditions. */\nexport const QualityRadioGroupOptions = forwardRef<HTMLDivElement, QualityRadioGroupOptionsProps>(\n  function QualityRadioGroupOptions(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 quality = useQualityRadioGroupContext();\n    if (!quality) return null;\n\n    const { state, value, options, setValue } = quality;\n    const ariaLabel = ariaLabelProp ?? (ariaLabelledBy === undefined ? quality.label : undefined);\n\n    return (\n      <MenuRadioGroup\n        {...getStateDataAttrs(state, QualityRadioGroupDataAttrs)}\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-rendition': 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 QualityRadioGroupLegacy = forwardRef<HTMLDivElement, QualityRadioGroupLegacyProps>(\n  function QualityRadioGroupLegacy({ label, formatRendition, disabled, ...props }, forwardedRef) {\n    return (\n      <QualityRadioGroupRoot label={label} formatRendition={formatRendition} disabled={disabled}>\n        <QualityRadioGroupOptions {...props} ref={forwardedRef} />\n      </QualityRadioGroupRoot>\n    );\n  }\n);\n\nfunction useQualityRadioGroupContext(): QualityOptionsResult | null {\n  const quality = useContext(QualityRadioGroupContext);\n  if (quality === undefined) throw new Error('QualityRadioGroup parts must be used within QualityRadioGroup.Root');\n\n  return quality;\n}\n\nfunction toMenuOptionState(quality: QualityOptionsResult | null): MenuOptionState {\n  return {\n    value: quality?.selectedLabel ?? '',\n    disabled: quality?.disabled ?? true,\n    hidden: quality?.hidden ?? true,\n    availability: quality?.state.availability ?? 'unsupported',\n  };\n}\n\nexport namespace QualityRadioGroupRoot {\n  export type Props = QualityRadioGroupRootProps;\n}\n\nexport namespace QualityRadioGroupValue {\n  export type Props = QualityRadioGroupValueProps;\n  export type State = QualityOptionsResult;\n}\n\nexport namespace QualityRadioGroupOptions {\n  export type Props = QualityRadioGroupOptionsProps;\n  export type State = QualityRadioGroupCore.State;\n  export type ItemProps = QualityRadioGroupItemProps;\n  export type ItemState = QualityRadioGroupItemState;\n}\n"],"mappings":";;;;;;;;;;AAuCA,MAAM,2BAA2B,cAAuD,KAAA,CAAS;;AAGjG,SAAgB,sBAAsB,EAAE,UAAU,GAAG,SAAgD;CACnG,MAAM,UAAU,kBAAkB,KAAK;CAEvC,mBAAmB,kBAAkB,OAAO,CAAC;CAE7C,OAAO,oBAAC,yBAAyB,UAA1B;EAAmC,OAAO;EAAU;CAA4C,CAAA;AACzG;;AAGA,MAAa,yBAAyB,WACpC,SAAS,uBAAuB,EAAE,QAAQ,WAAW,OAAO,GAAG,gBAAgB,cAAc;CAC3F,MAAM,UAAU,4BAA4B;CAC5C,IAAI,CAAC,SAAS,OAAO;CAErB,OAAO,cACL,QACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EAAE,OAAO;EAAS,KAAK;EAAc,OAAO,CAAC,cAAc,EAAE,UAAU,QAAQ,cAAc,CAAC;CAAE,CAClG;AACF,CACF;;AAGA,MAAa,2BAA2B,WACtC,SAAS,yBAAyB,gBAAgB,cAAc;CAC9D,MAAM,EACJ,YACA,QACA,WACA,OACA,cAAc,eACd,mBAAmB,gBACnB,GAAG,iBACD;CACJ,MAAM,UAAU,4BAA4B;CAC5C,IAAI,CAAC,SAAS,OAAO;CAErB,MAAM,EAAE,OAAO,OAAO,SAAS,aAAa;CAC5C,MAAM,YAAY,kBAAkB,mBAAmB,KAAA,IAAY,QAAQ,QAAQ,KAAA;CAEnF,OACE,oBAAC,gBAAD;EACE,GAAI,kBAAkB,OAAO,0BAA0B;EACvD,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,kBAAkB,OAAO;IACzB,UAAU,OAAO;GACnB,GACA,SACF,EACQ,GAVK,OAAO,KAUZ;EAEd,CAAC;CACa,CAAA;AAEpB,CACF;;AAGA,MAAa,0BAA0B,WACrC,SAAS,wBAAwB,EAAE,OAAO,iBAAiB,UAAU,GAAG,SAAS,cAAc;CAC7F,OACE,oBAAC,uBAAD;EAA8B;EAAwB;EAA2B;EAC/E,UAAA,oBAAC,0BAAD;GAA0B,GAAI;GAAO,KAAK;EAAe,CAAA;CACpC,CAAA;AAE3B,CACF;AAEA,SAAS,8BAA2D;CAClE,MAAM,UAAU,WAAW,wBAAwB;CACnD,IAAI,YAAY,KAAA,GAAW,MAAM,IAAI,MAAM,oEAAoE;CAE/G,OAAO;AACT;AAEA,SAAS,kBAAkB,SAAuD;CAChF,OAAO;EACL,OAAO,SAAS,iBAAiB;EACjC,UAAU,SAAS,YAAY;EAC/B,QAAQ,SAAS,UAAU;EAC3B,cAAc,SAAS,MAAM,gBAAgB;CAC/C;AACF"}

package/dist/dev/ui/seek-button/index.js

@@ -1,3 +1,2 @@
 import { SeekButton } from "./seek-button.js";
-
-export { SeekButton };
+export { SeekButton };

package/dist/dev/ui/seek-button/seek-button.d.ts

@@ -1,27 +1,25 @@
 import { UIComponentProps } from "../../utils/types.js";
-import * as react from "react";
 import { SeekButtonCore } from "@videojs/core";
-
 //#region src/ui/seek-button/seek-button.d.ts
 interface SeekButtonProps extends UIComponentProps<'button', SeekButtonCore.State>, SeekButtonCore.Props {}
 /**
  * A button that seeks forward or backward by a configurable number of seconds.
  *
  * @example
- * ```tsx
- * <SeekButton seconds={-10} />
+ *   ```tsx
+ *   <SeekButton seconds={-10} />
  *
- * <SeekButton
+ *   <SeekButton
  *   seconds={30}
  *   render={(props, state) => (
- *     <button {...props}>
- *       {state.direction === 'backward' ? <RewindIcon /> : <FastForwardIcon />}
- *     </button>
+ *   <button {...props}>
+ *   {state.direction === 'backward' ? <RewindIcon /> : <FastForwardIcon />}
+ *   </button>
  *   )}
- * />
- * ```
+ *   />
+ *   ```;
  */
-declare const SeekButton: react.ForwardRefExoticComponent<SeekButtonProps & react.RefAttributes<HTMLButtonElement>>;
+declare const SeekButton: import("react").ForwardRefExoticComponent<SeekButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
 declare namespace SeekButton {
   type Props = SeekButtonProps;
   type State = SeekButtonCore.State;

package/dist/dev/ui/seek-button/seek-button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"seek-button.d.ts","names":[],"sources":["../../../../src/ui/seek-button/seek-button.tsx"],"mappings":";;;;;UAQiB,eAAA,SAAwB,gBAAA,WAA2B,cAAA,CAAe,KAAA,GAAQ,cAAA,CAAe,KAAA;;AAA1G;;;;;;;;;;;;;;;AAmBA;cAAa,UAAA,EAAU,KAAA,CAAA,yBAAA,CAAA,eAAA,GAAA,KAAA,CAAA,aAAA,CAAA,iBAAA;AAAA,kBAQN,UAAA;EAAA,KACH,KAAA,GAAQ,eAAA;EAAA,KACR,KAAA,GAAQ,cAAA,CAAe,KAAA;AAAA"}
+{"version":3,"file":"seek-button.d.ts","names":[],"sources":["../../../../src/ui/seek-button/seek-button.tsx"],"mappings":";;;UAMiB,wBAAwB,2BAA2B,eAAe,QAAQ,eAAe;;;;;;;;;;;;;;;;;;cAmB7F,4BAAU,0BAAA,kCAAA,cAAA;kBAUN;OACH,QAAQ;OACR,QAAQ,eAAe"}

package/dist/dev/ui/seek-button/seek-button.js

@@ -1,35 +1,34 @@
-'use client';
-
 import { createMediaButton } from "../create-media-button.js";
-import { selectTime } from "@videojs/core/dom";
 import { SeekButtonCore, SeekButtonDataAttrs } from "@videojs/core";
-
+import { selectTime } from "@videojs/core/dom";
 //#region src/ui/seek-button/seek-button.tsx
 /**
 * A button that seeks forward or backward by a configurable number of seconds.
 *
 * @example
-* ```tsx
-* <SeekButton seconds={-10} />
+*   ```tsx
+*   <SeekButton seconds={-10} />
 *
-* <SeekButton
+*   <SeekButton
 *   seconds={30}
 *   render={(props, state) => (
-*     <button {...props}>
-*       {state.direction === 'backward' ? <RewindIcon /> : <FastForwardIcon />}
-*     </button>
+*   <button {...props}>
+*   {state.direction === 'backward' ? <RewindIcon /> : <FastForwardIcon />}
+*   </button>
 *   )}
-* />
-* ```
+*   />
+*   ```;
 */
 const SeekButton = createMediaButton({
 	displayName: "SeekButton",
 	core: SeekButtonCore,
 	stateAttrMap: SeekButtonDataAttrs,
 	selector: selectTime,
-	action: (core, state) => core.seek(state)
+	action: (core, state) => core.seek(state),
+	hotkeyAction: "seekStep",
+	hotkeyValue: (props) => typeof props.seconds === "number" ? props.seconds : SeekButtonCore.defaultProps.seconds
 });
-
 //#endregion
 export { SeekButton };
+
 //# sourceMappingURL=seek-button.js.map

package/dist/dev/ui/seek-button/seek-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"seek-button.js","names":[],"sources":["../../../../src/ui/seek-button/seek-button.tsx"],"sourcesContent":["'use client';\n\nimport { SeekButtonCore, SeekButtonDataAttrs } from '@videojs/core';\nimport { selectTime } from '@videojs/core/dom';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { createMediaButton } from '../create-media-button';\n\nexport interface SeekButtonProps extends UIComponentProps<'button', SeekButtonCore.State>, SeekButtonCore.Props {}\n\n/**\n * A button that seeks forward or backward by a configurable number of seconds.\n *\n * @example\n * ```tsx\n * <SeekButton seconds={-10} />\n *\n * <SeekButton\n *   seconds={30}\n *   render={(props, state) => (\n *     <button {...props}>\n *       {state.direction === 'backward' ? <RewindIcon /> : <FastForwardIcon />}\n *     </button>\n *   )}\n * />\n * ```\n */\nexport const SeekButton = createMediaButton<SeekButtonCore, SeekButtonProps>({\n  displayName: 'SeekButton',\n  core: SeekButtonCore,\n  stateAttrMap: SeekButtonDataAttrs,\n  selector: selectTime,\n  action: (core, state) => core.seek(state),\n});\n\nexport namespace SeekButton {\n  export type Props = SeekButtonProps;\n  export type State = SeekButtonCore.State;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AA2BA,MAAa,aAAa,kBAAmD;CAC3E,aAAa;CACb,MAAM;CACN,cAAc;CACd,UAAU;CACV,SAAS,MAAM,UAAU,KAAK,KAAK,MAAM;CAC1C,CAAC"}
+{"version":3,"file":"seek-button.js","names":[],"sources":["../../../../src/ui/seek-button/seek-button.tsx"],"sourcesContent":["import { SeekButtonCore, SeekButtonDataAttrs } from '@videojs/core';\nimport { selectTime } from '@videojs/core/dom';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { createMediaButton } from '../create-media-button';\n\nexport interface SeekButtonProps extends UIComponentProps<'button', SeekButtonCore.State>, SeekButtonCore.Props {}\n\n/**\n * A button that seeks forward or backward by a configurable number of seconds.\n *\n * @example\n *   ```tsx\n *   <SeekButton seconds={-10} />\n *\n *   <SeekButton\n *   seconds={30}\n *   render={(props, state) => (\n *   <button {...props}>\n *   {state.direction === 'backward' ? <RewindIcon /> : <FastForwardIcon />}\n *   </button>\n *   )}\n *   />\n *   ```;\n */\nexport const SeekButton = createMediaButton<SeekButtonCore, SeekButtonProps>({\n  displayName: 'SeekButton',\n  core: SeekButtonCore,\n  stateAttrMap: SeekButtonDataAttrs,\n  selector: selectTime,\n  action: (core, state) => core.seek(state),\n  hotkeyAction: 'seekStep',\n  hotkeyValue: (props) => (typeof props.seconds === 'number' ? props.seconds : SeekButtonCore.defaultProps.seconds),\n});\n\nexport namespace SeekButton {\n  export type Props = SeekButtonProps;\n  export type State = SeekButtonCore.State;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAyBA,MAAa,aAAa,kBAAmD;CAC3E,aAAa;CACb,MAAM;CACN,cAAc;CACd,UAAU;CACV,SAAS,MAAM,UAAU,KAAK,KAAK,KAAK;CACxC,cAAc;CACd,cAAc,UAAW,OAAO,MAAM,YAAY,WAAW,MAAM,UAAU,eAAe,aAAa;AAC3G,CAAC"}