@videojs/react 10.0.0-beta.3 → 10.0.0-beta.30

package/dist/default/ui/poster/poster.js

@@ -1,44 +1,106 @@
-'use client';
-
 import { usePlayer } from "../../player/context.js";
 import { renderElement } from "../../utils/use-render.js";
-import { selectPlayback } from "@videojs/core/dom";
-import { forwardRef, useState } from "react";
+import { selectMetadata, selectPlayback } from "@videojs/core/dom";
+import { forwardRef, useCallback, useEffect, useRef, useState } from "react";
 import { PosterCore, PosterDataAttrs } from "@videojs/core";
-
 //#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" />
+* <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'}
+*   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) return null;
-	core.setMedia(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) return null;
 	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/default/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,SAEH,QAAO;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\n * image attributes are yours. Leave the source off and the player's resolved\n * `poster` fills it in.\n *\n * The image is decorative unless you say otherwise. Describe a poster that\n * 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  if (!matchesRequest) setRequest({ src, srcSet: authoredSrcSet, state: initialLoadState });\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  // biome-ignore lint/correctness/useExhaustiveDependencies: 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    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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2CA,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;CACjE,IAAI,CAAC,gBAAgB,WAAW;EAAE;EAAK,QAAQ;EAAgB,OAAO;CAAiB,CAAC;CACxF,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,OAEhB,OAAO;CAGT,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/default/ui/quality/index.js

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

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

@@ -0,0 +1,25 @@
+import { createRadioOptionsHook } from "../hooks/create-radio-options-hook.js";
+import { selectQuality } from "@videojs/core/dom";
+import { QualityRadioGroupCore } from "@videojs/core";
+//#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/default/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\n * video rendition state. Returns `null` when the quality feature is not\n * 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;;;;;;;;AASD,SAAgB,kBAAkB,OAA0D;CAC1F;CAEA,OAAO,uBAAuB,KAAK;AACrC"}

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

@@ -0,0 +1,2 @@
+import { QualityRadioGroup } from "./quality-radio-group.js";
+export { QualityRadioGroup };

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

@@ -0,0 +1,65 @@
+import { MenuRadioGroup } from "../menu/menu-radio-group.js";
+import { useQualityOptions } from "../quality/use-quality-options.js";
+import { getStateDataAttrs } from "@videojs/core/dom";
+import { Fragment, forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import { isFunction } from "@videojs/utils/predicate";
+import { QualityRadioGroupDataAttrs } from "@videojs/core";
+//#region src/ui/quality-radio-group/quality-radio-group.tsx
+/**
+* Renders menu radio items for the player's video renditions.
+*
+* @example
+* ```tsx
+* <QualityRadioGroup
+*   renderItem={(props, item) => (
+*     <Menu.RadioItem {...props}>
+*       {item.label}
+*       {item.tier ? <sup>{item.tier}</sup> : null}
+*       <Menu.ItemIndicator checked={item.checked} />
+*     </Menu.RadioItem>
+*   )}
+* />
+* ```
+*/
+const QualityRadioGroup = forwardRef(function QualityRadioGroup(componentProps, forwardedRef) {
+	const { renderItem, render, className, style, label, formatRendition, disabled, "aria-label": ariaLabelProp, "aria-labelledby": ariaLabelledBy, ...elementProps } = componentProps;
+	const quality = useQualityOptions({
+		label,
+		formatRendition,
+		disabled
+	});
+	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);
+		})
+	});
+});
+//#endregion
+export { QualityRadioGroup };
+
+//# sourceMappingURL=quality-radio-group.js.map

package/dist/default/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 QualityRadioGroupCore, QualityRadioGroupDataAttrs } from '@videojs/core';\nimport { getStateDataAttrs } from '@videojs/core/dom';\nimport { isFunction } from '@videojs/utils/predicate';\nimport type { ReactElement } from 'react';\nimport { Fragment, forwardRef } from 'react';\n\nimport type { HTMLProps, UIComponentProps } from '../../utils/types';\nimport { MenuRadioGroup } from '../menu/menu-radio-group';\nimport type { MenuRadioItemProps } from '../menu/menu-radio-item';\nimport { type QualityOption, type QualityOptionsProps, useQualityOptions } from '../quality/use-quality-options';\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 QualityRadioGroupProps\n  extends Omit<UIComponentProps<'div', QualityRadioGroupCore.State>, 'children'>,\n    QualityOptionsProps {\n  /** Render one consumer-owned menu radio item for every quality option. */\n  renderItem: (props: QualityRadioGroupItemProps, state: QualityRadioGroupItemState) => ReactElement;\n}\n\n/**\n * Renders menu radio items for the player's video renditions.\n *\n * @example\n * ```tsx\n * <QualityRadioGroup\n *   renderItem={(props, item) => (\n *     <Menu.RadioItem {...props}>\n *       {item.label}\n *       {item.tier ? <sup>{item.tier}</sup> : null}\n *       <Menu.ItemIndicator checked={item.checked} />\n *     </Menu.RadioItem>\n *   )}\n * />\n * ```\n */\nexport const QualityRadioGroup = forwardRef<HTMLDivElement, QualityRadioGroupProps>(\n  function QualityRadioGroup(componentProps, forwardedRef) {\n    const {\n      renderItem,\n      render,\n      className,\n      style,\n      label,\n      formatRendition,\n      disabled,\n      'aria-label': ariaLabelProp,\n      'aria-labelledby': ariaLabelledBy,\n      ...elementProps\n    } = componentProps;\n    const quality = useQualityOptions({ label, formatRendition, disabled });\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\nexport namespace QualityRadioGroup {\n  export type Props = QualityRadioGroupProps;\n  export type State = QualityRadioGroupCore.State;\n  export type ItemProps = QualityRadioGroupItemProps;\n  export type ItemState = QualityRadioGroupItemState;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AA4CA,MAAa,oBAAoB,WAC/B,SAAS,kBAAkB,gBAAgB,cAAc;CACvD,MAAM,EACJ,YACA,QACA,WACA,OACA,OACA,iBACA,UACA,cAAc,eACd,mBAAmB,gBACnB,GAAG,iBACD;CACJ,MAAM,UAAU,kBAAkB;EAAE;EAAO;EAAiB;CAAS,CAAC;CACtE,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"}

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

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

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

@@ -1,9 +1,6 @@
-'use client';
-
 import { createMediaButton } from "../create-media-button.js";
 import { selectTime } from "@videojs/core/dom";
 import { SeekButtonCore, SeekButtonDataAttrs } from "@videojs/core";
-
 //#region src/ui/seek-button/seek-button.tsx
 /**
 * A button that seeks forward or backward by a configurable number of seconds.
@@ -27,9 +24,11 @@ const SeekButton = createMediaButton({
 	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/default/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"}

package/dist/default/ui/seek-indicator/context.js

@@ -0,0 +1,19 @@
+import { createContext, useContext } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/ui/seek-indicator/context.tsx
+const SeekIndicatorContext = createContext(null);
+function SeekIndicatorProvider({ value, children }) {
+	return /* @__PURE__ */ jsx(SeekIndicatorContext.Provider, {
+		value,
+		children
+	});
+}
+function useSeekIndicatorContext() {
+	const ctx = useContext(SeekIndicatorContext);
+	if (!ctx) throw new Error("SeekIndicator child compounds must be used within a SeekIndicator.Root");
+	return ctx;
+}
+//#endregion
+export { SeekIndicatorProvider, useSeekIndicatorContext };
+
+//# sourceMappingURL=context.js.map

package/dist/default/ui/seek-indicator/context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.js","names":[],"sources":["../../../../src/ui/seek-indicator/context.tsx"],"sourcesContent":["import type { SeekIndicatorCore } from '@videojs/core';\nimport { createContext, type ProviderProps, useContext } from 'react';\n\nexport interface SeekIndicatorContextValue {\n  state: SeekIndicatorCore.State;\n}\n\nconst SeekIndicatorContext = createContext<SeekIndicatorContextValue | null>(null);\n\nexport function SeekIndicatorProvider({ value, children }: ProviderProps<SeekIndicatorContextValue>) {\n  return <SeekIndicatorContext.Provider value={value}>{children}</SeekIndicatorContext.Provider>;\n}\n\nexport function useSeekIndicatorContext(): SeekIndicatorContextValue {\n  const ctx = useContext(SeekIndicatorContext);\n  if (!ctx) throw new Error('SeekIndicator child compounds must be used within a SeekIndicator.Root');\n  return ctx;\n}\n"],"mappings":";;;AAOA,MAAM,uBAAuB,cAAgD,IAAI;AAEjF,SAAgB,sBAAsB,EAAE,OAAO,YAAsD;CACnG,OAAO,oBAAC,qBAAqB,UAAtB;EAAsC;EAAQ;CAAwC,CAAA;AAC/F;AAEA,SAAgB,0BAAqD;CACnE,MAAM,MAAM,WAAW,oBAAoB;CAC3C,IAAI,CAAC,KAAK,MAAM,IAAI,MAAM,wEAAwE;CAClG,OAAO;AACT"}

package/dist/default/ui/seek-indicator/index.js

@@ -0,0 +1,2 @@
+import { index_parts_exports } from "./index.parts.js";
+export { index_parts_exports as SeekIndicator };

package/dist/default/ui/seek-indicator/index.parts.js

@@ -0,0 +1,12 @@
+import { __exportAll } from "../../_virtual/_rolldown/runtime.js";
+import { SeekIndicatorRoot } from "./seek-indicator-root.js";
+import { SeekIndicatorValue } from "./seek-indicator-value.js";
+//#region src/ui/seek-indicator/index.parts.ts
+var index_parts_exports = /* @__PURE__ */ __exportAll({
+	Root: () => SeekIndicatorRoot,
+	Value: () => SeekIndicatorValue
+});
+//#endregion
+export { SeekIndicatorRoot as Root, SeekIndicatorValue as Value, index_parts_exports };
+
+//# sourceMappingURL=index.parts.js.map

package/dist/default/ui/seek-indicator/index.parts.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.parts.js","names":[],"sources":["../../../../src/ui/seek-indicator/index.parts.ts"],"sourcesContent":["export { SeekIndicatorRoot as Root, type SeekIndicatorRootProps as RootProps } from './seek-indicator-root';\nexport { SeekIndicatorValue as Value, type SeekIndicatorValueProps as ValueProps } from './seek-indicator-value';\n"],"mappings":""}

package/dist/default/ui/seek-indicator/seek-indicator-root.js

@@ -0,0 +1,29 @@
+import { renderElement } from "../../utils/use-render.js";
+import { useInputIndicatorRoot } from "../input-indicator/use-input-indicator-root.js";
+import { SeekIndicatorProvider } from "./context.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import { SeekIndicatorCore, SeekIndicatorDataAttrs } from "@videojs/core";
+//#region src/ui/seek-indicator/seek-indicator-root.tsx
+const SeekIndicatorRoot = forwardRef(function SeekIndicatorRoot(componentProps, forwardedRef) {
+	const { render, className, style, closeDelay, ...elementProps } = componentProps;
+	const { elementRef, present, state } = useInputIndicatorRoot(() => new SeekIndicatorCore(), { closeDelay });
+	if (!present) return null;
+	return /* @__PURE__ */ jsx(SeekIndicatorProvider, {
+		value: { state },
+		children: renderElement("div", {
+			render,
+			className,
+			style
+		}, {
+			state,
+			stateAttrMap: SeekIndicatorDataAttrs,
+			ref: [forwardedRef, elementRef],
+			props: [elementProps]
+		})
+	});
+});
+//#endregion
+export { SeekIndicatorRoot };
+
+//# sourceMappingURL=seek-indicator-root.js.map

package/dist/default/ui/seek-indicator/seek-indicator-root.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"seek-indicator-root.js","names":[],"sources":["../../../../src/ui/seek-indicator/seek-indicator-root.tsx"],"sourcesContent":["import { SeekIndicatorCore, SeekIndicatorDataAttrs } from '@videojs/core';\nimport type { ForwardedRef } from 'react';\nimport { forwardRef } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { useInputIndicatorRoot } from '../input-indicator/use-input-indicator-root';\nimport { SeekIndicatorProvider } from './context';\n\nexport interface SeekIndicatorRootProps\n  extends UIComponentProps<'div', SeekIndicatorCore.State>,\n    SeekIndicatorCore.Props {}\n\nexport const SeekIndicatorRoot = forwardRef(function SeekIndicatorRoot(\n  componentProps: SeekIndicatorRootProps,\n  forwardedRef: ForwardedRef<HTMLDivElement>\n) {\n  const { render, className, style, closeDelay, ...elementProps } = componentProps;\n  const { elementRef, present, state } = useInputIndicatorRoot(() => new SeekIndicatorCore(), { closeDelay });\n\n  if (!present) return null;\n\n  return (\n    <SeekIndicatorProvider value={{ state }}>\n      {renderElement(\n        'div',\n        { render, className, style },\n        {\n          state,\n          stateAttrMap: SeekIndicatorDataAttrs,\n          ref: [forwardedRef, elementRef],\n          props: [elementProps],\n        }\n      )}\n    </SeekIndicatorProvider>\n  );\n});\n\nexport namespace SeekIndicatorRoot {\n  export type Props = SeekIndicatorRootProps;\n  export type State = SeekIndicatorCore.State;\n}\n"],"mappings":";;;;;;;AAaA,MAAa,oBAAoB,WAAW,SAAS,kBACnD,gBACA,cACA;CACA,MAAM,EAAE,QAAQ,WAAW,OAAO,YAAY,GAAG,iBAAiB;CAClE,MAAM,EAAE,YAAY,SAAS,UAAU,4BAA4B,IAAI,kBAAkB,GAAG,EAAE,WAAW,CAAC;CAE1G,IAAI,CAAC,SAAS,OAAO;CAErB,OACE,oBAAC,uBAAD;EAAuB,OAAO,EAAE,MAAM;EACnC,UAAA,cACC,OACA;GAAE;GAAQ;GAAW;EAAM,GAC3B;GACE;GACA,cAAc;GACd,KAAK,CAAC,cAAc,UAAU;GAC9B,OAAO,CAAC,YAAY;EACtB,CACF;CACqB,CAAA;AAE3B,CAAC"}

package/dist/default/ui/seek-indicator/seek-indicator-value.js

@@ -0,0 +1,22 @@
+import { renderElement } from "../../utils/use-render.js";
+import { useSeekIndicatorContext } from "./context.js";
+import { forwardRef } from "react";
+import { getSeekIndicatorDisplayValue } from "@videojs/core";
+//#region src/ui/seek-indicator/seek-indicator-value.tsx
+const SeekIndicatorValue = forwardRef(function SeekIndicatorValue(componentProps, forwardedRef) {
+	const { render, className, style, ...elementProps } = componentProps;
+	const { state } = useSeekIndicatorContext();
+	return renderElement("div", {
+		render,
+		className,
+		style
+	}, {
+		state,
+		ref: forwardedRef,
+		props: [{ children: getSeekIndicatorDisplayValue(state) }, elementProps]
+	});
+});
+//#endregion
+export { SeekIndicatorValue };
+
+//# sourceMappingURL=seek-indicator-value.js.map

package/dist/default/ui/seek-indicator/seek-indicator-value.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"seek-indicator-value.js","names":[],"sources":["../../../../src/ui/seek-indicator/seek-indicator-value.tsx"],"sourcesContent":["import { getSeekIndicatorDisplayValue, type SeekIndicatorCore } from '@videojs/core';\nimport type { ForwardedRef } from 'react';\nimport { forwardRef } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { useSeekIndicatorContext } from './context';\n\nexport interface SeekIndicatorValueProps extends UIComponentProps<'div', SeekIndicatorCore.State> {}\n\nexport const SeekIndicatorValue = forwardRef(function SeekIndicatorValue(\n  componentProps: SeekIndicatorValueProps,\n  forwardedRef: ForwardedRef<HTMLDivElement>\n) {\n  const { render, className, style, ...elementProps } = componentProps;\n  const { state } = useSeekIndicatorContext();\n\n  return renderElement(\n    'div',\n    { render, className, style },\n    {\n      state,\n      ref: forwardedRef,\n      props: [{ children: getSeekIndicatorDisplayValue(state) }, elementProps],\n    }\n  );\n});\n\nexport namespace SeekIndicatorValue {\n  export type Props = SeekIndicatorValueProps;\n}\n"],"mappings":";;;;;AAUA,MAAa,qBAAqB,WAAW,SAAS,mBACpD,gBACA,cACA;CACA,MAAM,EAAE,QAAQ,WAAW,OAAO,GAAG,iBAAiB;CACtD,MAAM,EAAE,UAAU,wBAAwB;CAE1C,OAAO,cACL,OACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EACE;EACA,KAAK;EACL,OAAO,CAAC,EAAE,UAAU,6BAA6B,KAAK,EAAE,GAAG,YAAY;CACzE,CACF;AACF,CAAC"}

package/dist/default/ui/slider/context.js

@@ -1,8 +1,5 @@
-'use client';
-
-import { createContext, useContext } from "react";
+import { createContext, useContext, useSyncExternalStore } from "react";
 import { jsx } from "react/jsx-runtime";
-
 //#region src/ui/slider/context.tsx
 const SliderContext = createContext(null);
 function SliderProvider({ value, children }) {
@@ -16,7 +13,12 @@ function useSliderContext() {
 	if (!ctx) throw new Error("Slider compound components must be used within a Slider.Root");
 	return ctx;
 }
-
+function useSliderPointerValue(enabled = true) {
+	const context = useSliderContext();
+	const percent = useSyncExternalStore((onChange) => context.input?.subscribe(onChange) ?? (() => {}), () => enabled ? context.input?.current.pointerPercent ?? null : null, () => enabled ? context.input?.current.pointerPercent ?? null : null);
+	return percent === null ? context.pointerValue : context.getPointerValue?.(percent) ?? context.pointerValue;
+}
 //#endregion
-export { SliderProvider, useSliderContext };
+export { SliderProvider, useSliderContext, useSliderPointerValue };
+
 //# sourceMappingURL=context.js.map

package/dist/default/ui/slider/context.js.map

@@ -1 +1 @@
-{"version":3,"file":"context.js","names":[],"sources":["../../../../src/ui/slider/context.tsx"],"sourcesContent":["'use client';\n\nimport type { SliderState, StateAttrMap } from '@videojs/core';\nimport type { SliderThumbProps } from '@videojs/core/dom';\nimport type { RefCallback } from 'react';\nimport { createContext, useContext } from 'react';\n\nexport interface SliderContextValue {\n  state: SliderState;\n  /** Pointer position converted to the value domain (not 0–100 percent). */\n  pointerValue: number;\n  thumbRef: RefCallback<HTMLElement>;\n  thumbProps: SliderThumbProps;\n  stateAttrMap: StateAttrMap<SliderState>;\n  getAttrs: (state: SliderState) => object;\n  formatValue?: ((value: number, type: 'current' | 'pointer') => string) | undefined;\n}\n\nconst SliderContext = createContext<SliderContextValue | null>(null);\n\nexport function SliderProvider({ value, children }: { value: SliderContextValue; children: React.ReactNode }) {\n  return <SliderContext.Provider value={value}>{children}</SliderContext.Provider>;\n}\n\nexport function useSliderContext(): SliderContextValue {\n  const ctx = useContext(SliderContext);\n  if (!ctx) throw new Error('Slider compound components must be used within a Slider.Root');\n  return ctx;\n}\n"],"mappings":";;;;;;AAkBA,MAAM,gBAAgB,cAAyC,KAAK;AAEpE,SAAgB,eAAe,EAAE,OAAO,YAAsE;AAC5G,QAAO,oBAAC,cAAc;EAAgB;EAAQ;GAAkC;;AAGlF,SAAgB,mBAAuC;CACrD,MAAM,MAAM,WAAW,cAAc;AACrC,KAAI,CAAC,IAAK,OAAM,IAAI,MAAM,+DAA+D;AACzF,QAAO"}
+{"version":3,"file":"context.js","names":[],"sources":["../../../../src/ui/slider/context.tsx"],"sourcesContent":["import type { SliderInput, SliderState, StateAttrMap } from '@videojs/core';\nimport type { SliderThumbProps } from '@videojs/core/dom';\nimport type { State } from '@videojs/store';\nimport type { ProviderProps, RefCallback } from 'react';\nimport { createContext, useContext, useSyncExternalStore } from 'react';\n\nexport interface SliderContextValue {\n  state: SliderState;\n  /** Pointer position converted to the value domain (not 0–100 percent). */\n  pointerValue: number;\n  input?: State<SliderInput> | undefined;\n  getPointerValue?: ((percent: number) => number) | undefined;\n  thumbRef: RefCallback<HTMLElement>;\n  thumbProps: SliderThumbProps;\n  stateAttrMap: StateAttrMap<SliderState>;\n  getAttrs: (state: SliderState) => object;\n  formatValue?: ((value: number, type: 'current' | 'pointer') => string) | undefined;\n}\n\nconst SliderContext = createContext<SliderContextValue | null>(null);\n\ntype SliderProviderProps = ProviderProps<SliderContextValue>;\n\nexport function SliderProvider({ value, children }: SliderProviderProps) {\n  return <SliderContext.Provider value={value}>{children}</SliderContext.Provider>;\n}\n\nexport function useSliderContext(): SliderContextValue {\n  const ctx = useContext(SliderContext);\n  if (!ctx) throw new Error('Slider compound components must be used within a Slider.Root');\n  return ctx;\n}\n\nexport function useSliderPointerValue(enabled = true): number {\n  const context = useSliderContext();\n  const percent = useSyncExternalStore(\n    (onChange) => context.input?.subscribe(onChange) ?? (() => {}),\n    () => (enabled ? (context.input?.current.pointerPercent ?? null) : null),\n    () => (enabled ? (context.input?.current.pointerPercent ?? null) : null)\n  );\n  return percent === null ? context.pointerValue : (context.getPointerValue?.(percent) ?? context.pointerValue);\n}\n"],"mappings":";;;AAmBA,MAAM,gBAAgB,cAAyC,IAAI;AAInE,SAAgB,eAAe,EAAE,OAAO,YAAiC;CACvE,OAAO,oBAAC,cAAc,UAAf;EAA+B;EAAQ;CAAiC,CAAA;AACjF;AAEA,SAAgB,mBAAuC;CACrD,MAAM,MAAM,WAAW,aAAa;CACpC,IAAI,CAAC,KAAK,MAAM,IAAI,MAAM,8DAA8D;CACxF,OAAO;AACT;AAEA,SAAgB,sBAAsB,UAAU,MAAc;CAC5D,MAAM,UAAU,iBAAiB;CACjC,MAAM,UAAU,sBACb,aAAa,QAAQ,OAAO,UAAU,QAAQ,YAAY,CAAC,UACrD,UAAW,QAAQ,OAAO,QAAQ,kBAAkB,OAAQ,YAC5D,UAAW,QAAQ,OAAO,QAAQ,kBAAkB,OAAQ,IACrE;CACA,OAAO,YAAY,OAAO,QAAQ,eAAgB,QAAQ,kBAAkB,OAAO,KAAK,QAAQ;AAClG"}

package/dist/default/ui/slider/index.js

@@ -1,3 +1,2 @@
 import { index_parts_exports } from "./index.parts.js";
-
-export { index_parts_exports as Slider };
+export { index_parts_exports as Slider };

package/dist/default/ui/slider/index.parts.js

@@ -7,7 +7,6 @@ import { SliderThumb } from "./slider-thumb.js";
 import { SliderThumbnail } from "./slider-thumbnail.js";
 import { SliderTrack } from "./slider-track.js";
 import { SliderValue } from "./slider-value.js";
-
 //#region src/ui/slider/index.parts.ts
 var index_parts_exports = /* @__PURE__ */ __exportAll({
 	Buffer: () => SliderBuffer,
@@ -19,7 +18,7 @@ var index_parts_exports = /* @__PURE__ */ __exportAll({
 	Track: () => SliderTrack,
 	Value: () => SliderValue
 });
-
 //#endregion
-export { index_parts_exports };
+export { SliderBuffer as Buffer, SliderFill as Fill, SliderPreview as Preview, SliderRoot as Root, SliderThumb as Thumb, SliderThumbnail as Thumbnail, SliderTrack as Track, SliderValue as Value, index_parts_exports };
+
 //# sourceMappingURL=index.parts.js.map

package/dist/default/ui/slider/slider-buffer.js

@@ -1,8 +1,5 @@
-'use client';
-
 import { createContextPart } from "../create-context-part.js";
 import { useSliderContext } from "./context.js";
-
 //#region src/ui/slider/slider-buffer.tsx
 /** Displays the buffered range on the slider track. */
 const SliderBuffer = createContextPart({
@@ -10,7 +7,7 @@ const SliderBuffer = createContextPart({
 	tag: "div",
 	useContext: useSliderContext
 });
-
 //#endregion
 export { SliderBuffer };
+
 //# sourceMappingURL=slider-buffer.js.map

package/dist/default/ui/slider/slider-buffer.js.map

@@ -1 +1 @@
-{"version":3,"file":"slider-buffer.js","names":[],"sources":["../../../../src/ui/slider/slider-buffer.tsx"],"sourcesContent":["'use client';\n\nimport type { SliderState } from '@videojs/core';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { createContextPart } from '../create-context-part';\nimport { useSliderContext } from './context';\n\nexport interface SliderBufferProps extends UIComponentProps<'div', SliderState> {}\n\n/** Displays the buffered range on the slider track. */\nexport const SliderBuffer = createContextPart<SliderBufferProps, SliderState>({\n  displayName: 'SliderBuffer',\n  tag: 'div',\n  useContext: useSliderContext,\n});\n\nexport namespace SliderBuffer {\n  export type Props = SliderBufferProps;\n}\n"],"mappings":";;;;;;;AAWA,MAAa,eAAe,kBAAkD;CAC5E,aAAa;CACb,KAAK;CACL,YAAY;CACb,CAAC"}
+{"version":3,"file":"slider-buffer.js","names":[],"sources":["../../../../src/ui/slider/slider-buffer.tsx"],"sourcesContent":["import type { SliderState } from '@videojs/core';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { createContextPart } from '../create-context-part';\nimport { useSliderContext } from './context';\n\nexport interface SliderBufferProps extends UIComponentProps<'div', SliderState> {}\n\n/** Displays the buffered range on the slider track. */\nexport const SliderBuffer = createContextPart<SliderBufferProps, SliderState>({\n  displayName: 'SliderBuffer',\n  tag: 'div',\n  useContext: useSliderContext,\n});\n\nexport namespace SliderBuffer {\n  export type Props = SliderBufferProps;\n}\n"],"mappings":";;;;AASA,MAAa,eAAe,kBAAkD;CAC5E,aAAa;CACb,KAAK;CACL,YAAY;AACd,CAAC"}

package/dist/default/ui/slider/slider-fill.js

@@ -1,8 +1,5 @@
-'use client';
-
 import { createContextPart } from "../create-context-part.js";
 import { useSliderContext } from "./context.js";
-
 //#region src/ui/slider/slider-fill.tsx
 /** Displays the filled portion from start to the current value. */
 const SliderFill = createContextPart({
@@ -10,7 +7,7 @@ const SliderFill = createContextPart({
 	tag: "div",
 	useContext: useSliderContext
 });
-
 //#endregion
 export { SliderFill };
+
 //# sourceMappingURL=slider-fill.js.map

package/dist/default/ui/slider/slider-fill.js.map

@@ -1 +1 @@
-{"version":3,"file":"slider-fill.js","names":[],"sources":["../../../../src/ui/slider/slider-fill.tsx"],"sourcesContent":["'use client';\n\nimport type { SliderState } from '@videojs/core';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { createContextPart } from '../create-context-part';\nimport { useSliderContext } from './context';\n\nexport interface SliderFillProps extends UIComponentProps<'div', SliderState> {}\n\n/** Displays the filled portion from start to the current value. */\nexport const SliderFill = createContextPart<SliderFillProps, SliderState>({\n  displayName: 'SliderFill',\n  tag: 'div',\n  useContext: useSliderContext,\n});\n\nexport namespace SliderFill {\n  export type Props = SliderFillProps;\n}\n"],"mappings":";;;;;;;AAWA,MAAa,aAAa,kBAAgD;CACxE,aAAa;CACb,KAAK;CACL,YAAY;CACb,CAAC"}
+{"version":3,"file":"slider-fill.js","names":[],"sources":["../../../../src/ui/slider/slider-fill.tsx"],"sourcesContent":["import type { SliderState } from '@videojs/core';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { createContextPart } from '../create-context-part';\nimport { useSliderContext } from './context';\n\nexport interface SliderFillProps extends UIComponentProps<'div', SliderState> {}\n\n/** Displays the filled portion from start to the current value. */\nexport const SliderFill = createContextPart<SliderFillProps, SliderState>({\n  displayName: 'SliderFill',\n  tag: 'div',\n  useContext: useSliderContext,\n});\n\nexport namespace SliderFill {\n  export type Props = SliderFillProps;\n}\n"],"mappings":";;;;AASA,MAAa,aAAa,kBAAgD;CACxE,aAAa;CACb,KAAK;CACL,YAAY;AACd,CAAC"}

package/dist/default/ui/slider/slider-preview.js

@@ -1,10 +1,8 @@
-'use client';
-
 import { renderElement } from "../../utils/use-render.js";
 import { useSliderContext } from "./context.js";
 import { getSliderPreviewStyle } from "@videojs/core/dom";
 import { forwardRef, useEffect, useRef, useState } from "react";
-
+import { observeResize } from "@videojs/utils/dom";
 //#region src/ui/slider/slider-preview.tsx
 /** Positioning container for preview content that tracks the pointer along the slider. */
 const SliderPreview = forwardRef(function SliderPreview(componentProps, forwardedRef) {
@@ -16,11 +14,9 @@ const SliderPreview = forwardRef(function SliderPreview(componentProps, forwarde
 	useEffect(() => {
 		const el = measureRef.current;
 		if (!el) return;
-		const observer = new ResizeObserver(([entry]) => {
+		return observeResize(el, ([entry]) => {
 			setWidth(entry.contentRect.width);
 		});
-		observer.observe(el);
-		return () => observer.disconnect();
 	}, []);
 	const positionStyle = getSliderPreviewStyle(width, overflow);
 	return renderElement("div", {
@@ -34,7 +30,7 @@ const SliderPreview = forwardRef(function SliderPreview(componentProps, forwarde
 		props: [{ style: positionStyle }, elementProps]
 	});
 });
-
 //#endregion
 export { SliderPreview };
+
 //# sourceMappingURL=slider-preview.js.map

package/dist/default/ui/slider/slider-preview.js.map

@@ -1 +1 @@
-{"version":3,"file":"slider-preview.js","names":[],"sources":["../../../../src/ui/slider/slider-preview.tsx"],"sourcesContent":["'use client';\n\nimport type { SliderState } from '@videojs/core';\nimport type { SliderPreviewOverflow } from '@videojs/core/dom';\nimport { getSliderPreviewStyle } from '@videojs/core/dom';\nimport type { ForwardedRef } from 'react';\nimport { forwardRef, useEffect, useRef, useState } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { useSliderContext } from './context';\n\nexport interface SliderPreviewProps extends UIComponentProps<'div', SliderState> {\n  /** How the preview handles the slider boundaries. `'clamp'` keeps the preview within bounds, `'visible'` allows it to extend beyond the edges. */\n  overflow?: SliderPreviewOverflow | undefined;\n}\n\n/** Positioning container for preview content that tracks the pointer along the slider. */\nexport const SliderPreview = forwardRef(function SliderPreview(\n  componentProps: SliderPreviewProps,\n  forwardedRef: ForwardedRef<HTMLDivElement>\n) {\n  const { render, className, style, overflow = 'clamp', ...elementProps } = componentProps;\n\n  const context = useSliderContext();\n  const { state } = context;\n\n  const measureRef = useRef<HTMLDivElement>(null);\n  const [width, setWidth] = useState(0);\n\n  useEffect(() => {\n    const el = measureRef.current;\n    if (!el) return;\n\n    const observer = new ResizeObserver(([entry]) => {\n      setWidth(entry!.contentRect.width);\n    });\n\n    observer.observe(el);\n    return () => observer.disconnect();\n  }, []);\n\n  const positionStyle = getSliderPreviewStyle(width, overflow);\n\n  return renderElement(\n    'div',\n    { render, className, style },\n    {\n      state,\n      stateAttrMap: context.stateAttrMap,\n      ref: [forwardedRef, measureRef],\n      props: [{ style: positionStyle }, elementProps],\n    }\n  );\n});\n\nexport namespace SliderPreview {\n  export type Props = SliderPreviewProps;\n}\n"],"mappings":";;;;;;;;;AAkBA,MAAa,gBAAgB,WAAW,SAAS,cAC/C,gBACA,cACA;CACA,MAAM,EAAE,QAAQ,WAAW,OAAO,WAAW,SAAS,GAAG,iBAAiB;CAE1E,MAAM,UAAU,kBAAkB;CAClC,MAAM,EAAE,UAAU;CAElB,MAAM,aAAa,OAAuB,KAAK;CAC/C,MAAM,CAAC,OAAO,YAAY,SAAS,EAAE;AAErC,iBAAgB;EACd,MAAM,KAAK,WAAW;AACtB,MAAI,CAAC,GAAI;EAET,MAAM,WAAW,IAAI,gBAAgB,CAAC,WAAW;AAC/C,YAAS,MAAO,YAAY,MAAM;IAClC;AAEF,WAAS,QAAQ,GAAG;AACpB,eAAa,SAAS,YAAY;IACjC,EAAE,CAAC;CAEN,MAAM,gBAAgB,sBAAsB,OAAO,SAAS;AAE5D,QAAO,cACL,OACA;EAAE;EAAQ;EAAW;EAAO,EAC5B;EACE;EACA,cAAc,QAAQ;EACtB,KAAK,CAAC,cAAc,WAAW;EAC/B,OAAO,CAAC,EAAE,OAAO,eAAe,EAAE,aAAa;EAChD,CACF;EACD"}
+{"version":3,"file":"slider-preview.js","names":[],"sources":["../../../../src/ui/slider/slider-preview.tsx"],"sourcesContent":["import type { SliderPreviewProps as CoreSliderPreviewProps, SliderState } from '@videojs/core';\nimport { getSliderPreviewStyle } from '@videojs/core/dom';\nimport { observeResize } from '@videojs/utils/dom';\nimport type { ForwardedRef } from 'react';\nimport { forwardRef, useEffect, useRef, useState } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { useSliderContext } from './context';\n\nexport interface SliderPreviewProps extends CoreSliderPreviewProps, UIComponentProps<'div', SliderState> {}\n\n/** Positioning container for preview content that tracks the pointer along the slider. */\nexport const SliderPreview = forwardRef(function SliderPreview(\n  componentProps: SliderPreviewProps,\n  forwardedRef: ForwardedRef<HTMLDivElement>\n) {\n  const { render, className, style, overflow = 'clamp', ...elementProps } = componentProps;\n\n  const context = useSliderContext();\n  const { state } = context;\n\n  const measureRef = useRef<HTMLDivElement>(null);\n  const [width, setWidth] = useState(0);\n\n  useEffect(() => {\n    const el = measureRef.current;\n    if (!el) return;\n\n    return observeResize(el, ([entry]) => {\n      setWidth(entry!.contentRect.width);\n    });\n  }, []);\n\n  const positionStyle = getSliderPreviewStyle(width, overflow);\n\n  return renderElement(\n    'div',\n    { render, className, style },\n    {\n      state,\n      stateAttrMap: context.stateAttrMap,\n      ref: [forwardedRef, measureRef],\n      props: [{ style: positionStyle }, elementProps],\n    }\n  );\n});\n\nexport namespace SliderPreview {\n  export type Props = SliderPreviewProps;\n}\n"],"mappings":";;;;;;;AAaA,MAAa,gBAAgB,WAAW,SAAS,cAC/C,gBACA,cACA;CACA,MAAM,EAAE,QAAQ,WAAW,OAAO,WAAW,SAAS,GAAG,iBAAiB;CAE1E,MAAM,UAAU,iBAAiB;CACjC,MAAM,EAAE,UAAU;CAElB,MAAM,aAAa,OAAuB,IAAI;CAC9C,MAAM,CAAC,OAAO,YAAY,SAAS,CAAC;CAEpC,gBAAgB;EACd,MAAM,KAAK,WAAW;EACtB,IAAI,CAAC,IAAI;EAET,OAAO,cAAc,KAAK,CAAC,WAAW;GACpC,SAAS,MAAO,YAAY,KAAK;EACnC,CAAC;CACH,GAAG,CAAC,CAAC;CAEL,MAAM,gBAAgB,sBAAsB,OAAO,QAAQ;CAE3D,OAAO,cACL,OACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EACE;EACA,cAAc,QAAQ;EACtB,KAAK,CAAC,cAAc,UAAU;EAC9B,OAAO,CAAC,EAAE,OAAO,cAAc,GAAG,YAAY;CAChD,CACF;AACF,CAAC"}