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

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"}

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

@@ -1,17 +1,17 @@
-'use client';
-
+import { useTranslator } from "../../i18n/context.js";
 import { renderElement } from "../../utils/use-render.js";
 import { useSlider } from "../hooks/use-slider.js";
 import { SliderProvider } from "./context.js";
+import { SliderCore, SliderDataAttrs } from "@videojs/core";
 import { getSliderCSSVars } from "@videojs/core/dom";
+import { translateText } from "@videojs/core/i18n";
 import { forwardRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";
-import { SliderCore, SliderDataAttrs } from "@videojs/core";
-
 //#region src/ui/slider/slider-root.tsx
 const SliderRoot = forwardRef(function SliderRoot(componentProps, forwardedRef) {
 	const { render, className, style, label, min, max, step, largeStep, orientation, disabled, thumbAlignment, value = 0, onValueChange, onValueCommit, onDragStart, onDragEnd, ...elementProps } = componentProps;
 	const [core] = useState(() => new SliderCore());
+	const translator = useTranslator();
 	core.setProps({
 		label,
 		min,
@@ -22,7 +22,7 @@ const SliderRoot = forwardRef(function SliderRoot(componentProps, forwardedRef)
 		disabled,
 		thumbAlignment
 	});
-	const { state, cssVars, rootRef, thumbRef: sliderThumbRef, rootProps, rootStyle, thumbProps } = useSlider({
+	const { state, input, cssVars, rootRef, thumbRef: sliderThumbRef, rootProps, rootStyle, thumbProps } = useSlider({
 		computeState: (input) => {
 			core.setInput(input);
 			return core.getSliderState(value);
@@ -43,10 +43,18 @@ const SliderRoot = forwardRef(function SliderRoot(componentProps, forwardedRef)
 		value: {
 			state,
 			pointerValue: core.valueFromPercent(state.pointerPercent),
+			input,
+			getPointerValue: (percent) => core.valueFromPercent(percent),
 			thumbRef: sliderThumbRef,
 			thumbProps,
 			stateAttrMap: SliderDataAttrs,
-			getAttrs: (sliderState) => core.getAttrs(sliderState),
+			getAttrs: (sliderState) => {
+				const attrs = core.getAttrs(sliderState);
+				return {
+					...attrs,
+					"aria-label": translateText(attrs["aria-label"], translator)
+				};
+			},
 			formatValue: void 0
 		},
 		children: renderElement("div", {
@@ -68,7 +76,7 @@ const SliderRoot = forwardRef(function SliderRoot(componentProps, forwardedRef)
 		})
 	});
 });
-
 //#endregion
 export { SliderRoot };
+
 //# sourceMappingURL=slider-root.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"slider-root.js","names":[],"sources":["../../../../src/ui/slider/slider-root.tsx"],"sourcesContent":["'use client';\n\nimport { SliderCore, SliderDataAttrs } from '@videojs/core';\nimport { getSliderCSSVars } from '@videojs/core/dom';\nimport type { ForwardedRef } from 'react';\nimport { forwardRef, useState } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { useSlider } from '../hooks/use-slider';\nimport { SliderProvider } from './context';\n\nexport interface SliderRootProps extends UIComponentProps<'div', SliderCore.State>, SliderCore.Props {\n  onValueChange?: ((value: number) => void) | undefined;\n  onValueCommit?: ((value: number) => void) | undefined;\n  onDragStart?: (() => void) | undefined;\n  onDragEnd?: (() => void) | undefined;\n}\n\nexport const SliderRoot = forwardRef(function SliderRoot(\n  componentProps: SliderRootProps,\n  forwardedRef: ForwardedRef<HTMLDivElement>\n) {\n  const {\n    render,\n    className,\n    style,\n    label,\n    min,\n    max,\n    step,\n    largeStep,\n    orientation,\n    disabled,\n    thumbAlignment,\n    value = 0,\n    onValueChange,\n    onValueCommit,\n    onDragStart,\n    onDragEnd,\n    ...elementProps\n  } = componentProps;\n\n  const [core] = useState(() => new SliderCore());\n  core.setProps({ label, min, max, step, largeStep, orientation, disabled, thumbAlignment });\n\n  const {\n    state,\n    cssVars,\n    rootRef,\n    thumbRef: sliderThumbRef,\n    rootProps,\n    rootStyle,\n    thumbProps,\n  } = useSlider({\n    computeState: (input) => {\n      core.setInput(input);\n      return core.getSliderState(value);\n    },\n    getPercent: () => core.percentFromValue(value),\n    getStepPercent: () => core.getStepPercent(),\n    getLargeStepPercent: () => core.getLargeStepPercent(),\n    orientation,\n    disabled,\n    adjustPercent: (rawPercent, thumbSize, trackSize) =>\n      core.adjustPercentForAlignment(rawPercent, thumbSize, trackSize),\n    getCSSVars: getSliderCSSVars,\n    onValueChange: (percent) => onValueChange?.(core.valueFromPercent(percent)),\n    onValueCommit: (percent) => onValueCommit?.(core.valueFromPercent(percent)),\n    onDragStart,\n    onDragEnd,\n  });\n\n  return (\n    <SliderProvider\n      value={{\n        state,\n        pointerValue: core.valueFromPercent(state.pointerPercent),\n        thumbRef: sliderThumbRef,\n        thumbProps,\n        stateAttrMap: SliderDataAttrs,\n        getAttrs: (sliderState) => core.getAttrs(sliderState),\n        formatValue: undefined,\n      }}\n    >\n      {renderElement(\n        'div',\n        { render, className, style },\n        {\n          state,\n          stateAttrMap: SliderDataAttrs,\n          ref: [forwardedRef, rootRef],\n          props: [{ style: { ...cssVars, ...rootStyle } }, rootProps, elementProps],\n        }\n      )}\n    </SliderProvider>\n  );\n});\n\nexport namespace SliderRoot {\n  export type Props = SliderRootProps;\n  export type State = SliderCore.State;\n}\n"],"mappings":";;;;;;;;;;;AAmBA,MAAa,aAAa,WAAW,SAAS,WAC5C,gBACA,cACA;CACA,MAAM,EACJ,QACA,WACA,OACA,OACA,KACA,KACA,MACA,WACA,aACA,UACA,gBACA,QAAQ,GACR,eACA,eACA,aACA,WACA,GAAG,iBACD;CAEJ,MAAM,CAAC,QAAQ,eAAe,IAAI,YAAY,CAAC;AAC/C,MAAK,SAAS;EAAE;EAAO;EAAK;EAAK;EAAM;EAAW;EAAa;EAAU;EAAgB,CAAC;CAE1F,MAAM,EACJ,OACA,SACA,SACA,UAAU,gBACV,WACA,WACA,eACE,UAAU;EACZ,eAAe,UAAU;AACvB,QAAK,SAAS,MAAM;AACpB,UAAO,KAAK,eAAe,MAAM;;EAEnC,kBAAkB,KAAK,iBAAiB,MAAM;EAC9C,sBAAsB,KAAK,gBAAgB;EAC3C,2BAA2B,KAAK,qBAAqB;EACrD;EACA;EACA,gBAAgB,YAAY,WAAW,cACrC,KAAK,0BAA0B,YAAY,WAAW,UAAU;EAClE,YAAY;EACZ,gBAAgB,YAAY,gBAAgB,KAAK,iBAAiB,QAAQ,CAAC;EAC3E,gBAAgB,YAAY,gBAAgB,KAAK,iBAAiB,QAAQ,CAAC;EAC3E;EACA;EACD,CAAC;AAEF,QACE,oBAAC;EACC,OAAO;GACL;GACA,cAAc,KAAK,iBAAiB,MAAM,eAAe;GACzD,UAAU;GACV;GACA,cAAc;GACd,WAAW,gBAAgB,KAAK,SAAS,YAAY;GACrD,aAAa;GACd;YAEA,cACC,OACA;GAAE;GAAQ;GAAW;GAAO,EAC5B;GACE;GACA,cAAc;GACd,KAAK,CAAC,cAAc,QAAQ;GAC5B,OAAO;IAAC,EAAE,OAAO;KAAE,GAAG;KAAS,GAAG;KAAW,EAAE;IAAE;IAAW;IAAa;GAC1E,CACF;GACc;EAEnB"}
+{"version":3,"file":"slider-root.js","names":[],"sources":["../../../../src/ui/slider/slider-root.tsx"],"sourcesContent":["import { SliderCore, SliderDataAttrs } from '@videojs/core';\nimport { getSliderCSSVars } from '@videojs/core/dom';\nimport { translateText } from '@videojs/core/i18n';\nimport type { ForwardedRef } from 'react';\nimport { forwardRef, useState } from 'react';\n\nimport { useTranslator } from '../../i18n/context';\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { useSlider } from '../hooks/use-slider';\nimport { SliderProvider } from './context';\n\nexport interface SliderRootProps extends UIComponentProps<'div', SliderCore.State>, SliderCore.Props {\n  onValueChange?: ((value: number) => void) | undefined;\n  onValueCommit?: ((value: number) => void) | undefined;\n  onDragStart?: (() => void) | undefined;\n  onDragEnd?: (() => void) | undefined;\n}\n\nexport const SliderRoot = forwardRef(function SliderRoot(\n  componentProps: SliderRootProps,\n  forwardedRef: ForwardedRef<HTMLDivElement>\n) {\n  const {\n    render,\n    className,\n    style,\n    label,\n    min,\n    max,\n    step,\n    largeStep,\n    orientation,\n    disabled,\n    thumbAlignment,\n    value = 0,\n    onValueChange,\n    onValueCommit,\n    onDragStart,\n    onDragEnd,\n    ...elementProps\n  } = componentProps;\n\n  const [core] = useState(() => new SliderCore());\n  const translator = useTranslator();\n\n  core.setProps({ label, min, max, step, largeStep, orientation, disabled, thumbAlignment });\n\n  const {\n    state,\n    input,\n    cssVars,\n    rootRef,\n    thumbRef: sliderThumbRef,\n    rootProps,\n    rootStyle,\n    thumbProps,\n  } = useSlider({\n    computeState: (input) => {\n      core.setInput(input);\n      return core.getSliderState(value);\n    },\n    getPercent: () => core.percentFromValue(value),\n    getStepPercent: () => core.getStepPercent(),\n    getLargeStepPercent: () => core.getLargeStepPercent(),\n    orientation,\n    disabled,\n    adjustPercent: (rawPercent, thumbSize, trackSize) =>\n      core.adjustPercentForAlignment(rawPercent, thumbSize, trackSize),\n    getCSSVars: getSliderCSSVars,\n    onValueChange: (percent) => onValueChange?.(core.valueFromPercent(percent)),\n    onValueCommit: (percent) => onValueCommit?.(core.valueFromPercent(percent)),\n    onDragStart,\n    onDragEnd,\n  });\n\n  return (\n    <SliderProvider\n      value={{\n        state,\n        pointerValue: core.valueFromPercent(state.pointerPercent),\n        input,\n        getPointerValue: (percent) => core.valueFromPercent(percent),\n        thumbRef: sliderThumbRef,\n        thumbProps,\n        stateAttrMap: SliderDataAttrs,\n        getAttrs: (sliderState) => {\n          const attrs = core.getAttrs(sliderState);\n\n          return { ...attrs, 'aria-label': translateText(attrs['aria-label'], translator) };\n        },\n        formatValue: undefined,\n      }}\n    >\n      {renderElement(\n        'div',\n        { render, className, style },\n        {\n          state,\n          stateAttrMap: SliderDataAttrs,\n          ref: [forwardedRef, rootRef],\n          props: [{ style: { ...cssVars, ...rootStyle } }, rootProps, elementProps],\n        }\n      )}\n    </SliderProvider>\n  );\n});\n\nexport namespace SliderRoot {\n  export type Props = SliderRootProps;\n  export type State = SliderCore.State;\n}\n"],"mappings":";;;;;;;;;;AAmBA,MAAa,aAAa,WAAW,SAAS,WAC5C,gBACA,cACA;CACA,MAAM,EACJ,QACA,WACA,OACA,OACA,KACA,KACA,MACA,WACA,aACA,UACA,gBACA,QAAQ,GACR,eACA,eACA,aACA,WACA,GAAG,iBACD;CAEJ,MAAM,CAAC,QAAQ,eAAe,IAAI,WAAW,CAAC;CAC9C,MAAM,aAAa,cAAc;CAEjC,KAAK,SAAS;EAAE;EAAO;EAAK;EAAK;EAAM;EAAW;EAAa;EAAU;CAAe,CAAC;CAEzF,MAAM,EACJ,OACA,OACA,SACA,SACA,UAAU,gBACV,WACA,WACA,eACE,UAAU;EACZ,eAAe,UAAU;GACvB,KAAK,SAAS,KAAK;GACnB,OAAO,KAAK,eAAe,KAAK;EAClC;EACA,kBAAkB,KAAK,iBAAiB,KAAK;EAC7C,sBAAsB,KAAK,eAAe;EAC1C,2BAA2B,KAAK,oBAAoB;EACpD;EACA;EACA,gBAAgB,YAAY,WAAW,cACrC,KAAK,0BAA0B,YAAY,WAAW,SAAS;EACjE,YAAY;EACZ,gBAAgB,YAAY,gBAAgB,KAAK,iBAAiB,OAAO,CAAC;EAC1E,gBAAgB,YAAY,gBAAgB,KAAK,iBAAiB,OAAO,CAAC;EAC1E;EACA;CACF,CAAC;CAED,OACE,oBAAC,gBAAD;EACE,OAAO;GACL;GACA,cAAc,KAAK,iBAAiB,MAAM,cAAc;GACxD;GACA,kBAAkB,YAAY,KAAK,iBAAiB,OAAO;GAC3D,UAAU;GACV;GACA,cAAc;GACd,WAAW,gBAAgB;IACzB,MAAM,QAAQ,KAAK,SAAS,WAAW;IAEvC,OAAO;KAAE,GAAG;KAAO,cAAc,cAAc,MAAM,eAAe,UAAU;IAAE;GAClF;GACA,aAAa,KAAA;EACf;EAEC,UAAA,cACC,OACA;GAAE;GAAQ;GAAW;EAAM,GAC3B;GACE;GACA,cAAc;GACd,KAAK,CAAC,cAAc,OAAO;GAC3B,OAAO;IAAC,EAAE,OAAO;KAAE,GAAG;KAAS,GAAG;IAAU,EAAE;IAAG;IAAW;GAAY;EAC1E,CACF;CACc,CAAA;AAEpB,CAAC"}

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

@@ -1,9 +1,6 @@
-'use client';
-
 import { renderElement } from "../../utils/use-render.js";
 import { useSliderContext } from "./context.js";
 import { forwardRef } from "react";
-
 //#region src/ui/slider/slider-thumb.tsx
 /** Draggable handle for setting the slider value. Receives focus and handles keyboard interaction. */
 const SliderThumb = forwardRef(function SliderThumb(componentProps, forwardedRef) {
@@ -26,7 +23,7 @@ const SliderThumb = forwardRef(function SliderThumb(componentProps, forwardedRef
 		]
 	});
 });
-
 //#endregion
 export { SliderThumb };
+
 //# sourceMappingURL=slider-thumb.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"slider-thumb.js","names":[],"sources":["../../../../src/ui/slider/slider-thumb.tsx"],"sourcesContent":["'use client';\n\nimport type { SliderState } 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 { useSliderContext } from './context';\n\nexport interface SliderThumbProps extends UIComponentProps<'div', SliderState> {}\n\n/** Draggable handle for setting the slider value. Receives focus and handles keyboard interaction. */\nexport const SliderThumb = forwardRef(function SliderThumb(\n  componentProps: SliderThumbProps,\n  forwardedRef: ForwardedRef<HTMLDivElement>\n) {\n  const { render, className, style, ...elementProps } = componentProps;\n\n  const context = useSliderContext();\n  const { state, thumbRef, thumbProps, getAttrs } = context;\n  const attrs = getAttrs(state);\n\n  return renderElement(\n    'div',\n    { render, className, style },\n    {\n      state,\n      stateAttrMap: context.stateAttrMap,\n      ref: [forwardedRef, thumbRef],\n      props: [attrs, thumbProps, elementProps],\n    }\n  );\n});\n\nexport namespace SliderThumb {\n  export type Props = SliderThumbProps;\n}\n"],"mappings":";;;;;;;;AAaA,MAAa,cAAc,WAAW,SAAS,YAC7C,gBACA,cACA;CACA,MAAM,EAAE,QAAQ,WAAW,OAAO,GAAG,iBAAiB;CAEtD,MAAM,UAAU,kBAAkB;CAClC,MAAM,EAAE,OAAO,UAAU,YAAY,aAAa;CAClD,MAAM,QAAQ,SAAS,MAAM;AAE7B,QAAO,cACL,OACA;EAAE;EAAQ;EAAW;EAAO,EAC5B;EACE;EACA,cAAc,QAAQ;EACtB,KAAK,CAAC,cAAc,SAAS;EAC7B,OAAO;GAAC;GAAO;GAAY;GAAa;EACzC,CACF;EACD"}
+{"version":3,"file":"slider-thumb.js","names":[],"sources":["../../../../src/ui/slider/slider-thumb.tsx"],"sourcesContent":["import type { SliderState } 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 { useSliderContext } from './context';\n\nexport interface SliderThumbProps extends UIComponentProps<'div', SliderState> {}\n\n/** Draggable handle for setting the slider value. Receives focus and handles keyboard interaction. */\nexport const SliderThumb = forwardRef(function SliderThumb(\n  componentProps: SliderThumbProps,\n  forwardedRef: ForwardedRef<HTMLDivElement>\n) {\n  const { render, className, style, ...elementProps } = componentProps;\n\n  const context = useSliderContext();\n  const { state, thumbRef, thumbProps, getAttrs } = context;\n  const attrs = getAttrs(state);\n\n  return renderElement(\n    'div',\n    { render, className, style },\n    {\n      state,\n      stateAttrMap: context.stateAttrMap,\n      ref: [forwardedRef, thumbRef],\n      props: [attrs, thumbProps, elementProps],\n    }\n  );\n});\n\nexport namespace SliderThumb {\n  export type Props = SliderThumbProps;\n}\n"],"mappings":";;;;;AAWA,MAAa,cAAc,WAAW,SAAS,YAC7C,gBACA,cACA;CACA,MAAM,EAAE,QAAQ,WAAW,OAAO,GAAG,iBAAiB;CAEtD,MAAM,UAAU,iBAAiB;CACjC,MAAM,EAAE,OAAO,UAAU,YAAY,aAAa;CAClD,MAAM,QAAQ,SAAS,KAAK;CAE5B,OAAO,cACL,OACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EACE;EACA,cAAc,QAAQ;EACtB,KAAK,CAAC,cAAc,QAAQ;EAC5B,OAAO;GAAC;GAAO;GAAY;EAAY;CACzC,CACF;AACF,CAAC"}

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

@@ -1,20 +1,17 @@
-'use client';
-
-import { useSliderContext } from "./context.js";
+import { useSliderPointerValue } from "./context.js";
 import { Thumbnail } from "../thumbnail/thumbnail.js";
 import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
-
 //#region src/ui/slider/slider-thumbnail.tsx
 const SliderThumbnail = forwardRef(function SliderThumbnail(componentProps, forwardedRef) {
-	const { pointerValue } = useSliderContext();
+	const pointerValue = useSliderPointerValue();
 	return /* @__PURE__ */ jsx(Thumbnail, {
 		ref: forwardedRef,
 		...componentProps,
 		time: pointerValue
 	});
 });
-
 //#endregion
 export { SliderThumbnail };
+
 //# sourceMappingURL=slider-thumbnail.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"slider-thumbnail.js","names":[],"sources":["../../../../src/ui/slider/slider-thumbnail.tsx"],"sourcesContent":["'use client';\n\nimport type { ThumbnailCore } from '@videojs/core';\nimport { forwardRef } from 'react';\n\nimport { Thumbnail, type ThumbnailProps } from '../thumbnail/thumbnail';\nimport { useSliderContext } from './context';\n\nexport interface SliderThumbnailProps extends Omit<ThumbnailProps, 'time'> {}\n\nexport const SliderThumbnail = forwardRef<HTMLDivElement, SliderThumbnailProps>(\n  function SliderThumbnail(componentProps, forwardedRef) {\n    const { pointerValue } = useSliderContext();\n    return <Thumbnail ref={forwardedRef} {...componentProps} time={pointerValue} />;\n  }\n);\n\nexport namespace SliderThumbnail {\n  export type Props = SliderThumbnailProps;\n  export type State = ThumbnailCore.State;\n}\n"],"mappings":";;;;;;;;AAUA,MAAa,kBAAkB,WAC7B,SAAS,gBAAgB,gBAAgB,cAAc;CACrD,MAAM,EAAE,iBAAiB,kBAAkB;AAC3C,QAAO,oBAAC;EAAU,KAAK;EAAc,GAAI;EAAgB,MAAM;GAAgB;EAElF"}
+{"version":3,"file":"slider-thumbnail.js","names":[],"sources":["../../../../src/ui/slider/slider-thumbnail.tsx"],"sourcesContent":["import type { ThumbnailCore } from '@videojs/core';\nimport { forwardRef } from 'react';\n\nimport { Thumbnail, type ThumbnailProps } from '../thumbnail/thumbnail';\nimport { useSliderPointerValue } from './context';\n\nexport interface SliderThumbnailProps extends Omit<ThumbnailProps, 'time'> {}\n\nexport const SliderThumbnail = forwardRef<HTMLDivElement, SliderThumbnailProps>(\n  function SliderThumbnail(componentProps, forwardedRef) {\n    const pointerValue = useSliderPointerValue();\n\n    return <Thumbnail ref={forwardedRef} {...componentProps} time={pointerValue} />;\n  }\n);\n\nexport namespace SliderThumbnail {\n  export type Props = SliderThumbnailProps;\n  export type State = ThumbnailCore.State;\n}\n"],"mappings":";;;;;AAQA,MAAa,kBAAkB,WAC7B,SAAS,gBAAgB,gBAAgB,cAAc;CACrD,MAAM,eAAe,sBAAsB;CAE3C,OAAO,oBAAC,WAAD;EAAW,KAAK;EAAc,GAAI;EAAgB,MAAM;CAAe,CAAA;AAChF,CACF"}

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

@@ -1,8 +1,5 @@
-'use client';
-
 import { createContextPart } from "../create-context-part.js";
 import { useSliderContext } from "./context.js";
-
 //#region src/ui/slider/slider-track.tsx
 /** Contains the slider's visual track and interactive hit zone. */
 const SliderTrack = createContextPart({
@@ -10,7 +7,7 @@ const SliderTrack = createContextPart({
 	tag: "div",
 	useContext: useSliderContext
 });
-
 //#endregion
 export { SliderTrack };
+
 //# sourceMappingURL=slider-track.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"slider-track.js","names":[],"sources":["../../../../src/ui/slider/slider-track.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 SliderTrackProps extends UIComponentProps<'div', SliderState> {}\n\n/** Contains the slider's visual track and interactive hit zone. */\nexport const SliderTrack = createContextPart<SliderTrackProps, SliderState>({\n  displayName: 'SliderTrack',\n  tag: 'div',\n  useContext: useSliderContext,\n});\n\nexport namespace SliderTrack {\n  export type Props = SliderTrackProps;\n}\n"],"mappings":";;;;;;;AAWA,MAAa,cAAc,kBAAiD;CAC1E,aAAa;CACb,KAAK;CACL,YAAY;CACb,CAAC"}
+{"version":3,"file":"slider-track.js","names":[],"sources":["../../../../src/ui/slider/slider-track.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 SliderTrackProps extends UIComponentProps<'div', SliderState> {}\n\n/** Contains the slider's visual track and interactive hit zone. */\nexport const SliderTrack = createContextPart<SliderTrackProps, SliderState>({\n  displayName: 'SliderTrack',\n  tag: 'div',\n  useContext: useSliderContext,\n});\n\nexport namespace SliderTrack {\n  export type Props = SliderTrackProps;\n}\n"],"mappings":";;;;AASA,MAAa,cAAc,kBAAiD;CAC1E,aAAa;CACb,KAAK;CACL,YAAY;AACd,CAAC"}

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

@@ -1,15 +1,13 @@
-'use client';
-
 import { renderElement } from "../../utils/use-render.js";
-import { useSliderContext } from "./context.js";
+import { useSliderContext, useSliderPointerValue } from "./context.js";
 import { forwardRef } from "react";
-
 //#region src/ui/slider/slider-value.tsx
 /** Displays a formatted text representation of the slider value. Renders an `<output>` element. */
 const SliderValue = forwardRef(function SliderValue(componentProps, forwardedRef) {
 	const { render, className, style, type = "current", format, ...elementProps } = componentProps;
 	const context = useSliderContext();
-	const { state, pointerValue, formatValue } = context;
+	const { state, formatValue } = context;
+	const pointerValue = useSliderPointerValue(type === "pointer");
 	const rawValue = type === "pointer" ? pointerValue : state.value;
 	const text = format ? format(rawValue) : formatValue ? formatValue(rawValue, type) : String(Math.round(rawValue));
 	return renderElement("output", {
@@ -26,7 +24,7 @@ const SliderValue = forwardRef(function SliderValue(componentProps, forwardedRef
 		}, elementProps]
 	});
 });
-
 //#endregion
 export { SliderValue };
+
 //# sourceMappingURL=slider-value.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"slider-value.js","names":[],"sources":["../../../../src/ui/slider/slider-value.tsx"],"sourcesContent":["'use client';\n\nimport type { SliderState } 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 { useSliderContext } from './context';\n\nexport interface SliderValueProps extends UIComponentProps<'output', SliderState> {\n  /** Which slider value to display: the current position or the pointer position. */\n  type?: 'current' | 'pointer' | undefined;\n  /** Custom formatter for the displayed value. Overrides the root's `formatValue`. */\n  format?: ((value: number) => string) | undefined;\n}\n\n/** Displays a formatted text representation of the slider value. Renders an `<output>` element. */\nexport const SliderValue = forwardRef(function SliderValue(\n  componentProps: SliderValueProps,\n  forwardedRef: ForwardedRef<HTMLOutputElement>\n) {\n  const { render, className, style, type = 'current', format, ...elementProps } = componentProps;\n\n  const context = useSliderContext();\n  const { state, pointerValue, formatValue } = context;\n\n  const rawValue = type === 'pointer' ? pointerValue : state.value;\n\n  const text = format ? format(rawValue) : formatValue ? formatValue(rawValue, type) : String(Math.round(rawValue));\n\n  return renderElement(\n    'output',\n    { render, className, style },\n    {\n      state,\n      stateAttrMap: context.stateAttrMap,\n      ref: forwardedRef,\n      props: [{ 'aria-live': 'off', children: text }, elementProps],\n    }\n  );\n});\n\nexport namespace SliderValue {\n  export type Props = SliderValueProps;\n}\n"],"mappings":";;;;;;;;AAkBA,MAAa,cAAc,WAAW,SAAS,YAC7C,gBACA,cACA;CACA,MAAM,EAAE,QAAQ,WAAW,OAAO,OAAO,WAAW,QAAQ,GAAG,iBAAiB;CAEhF,MAAM,UAAU,kBAAkB;CAClC,MAAM,EAAE,OAAO,cAAc,gBAAgB;CAE7C,MAAM,WAAW,SAAS,YAAY,eAAe,MAAM;CAE3D,MAAM,OAAO,SAAS,OAAO,SAAS,GAAG,cAAc,YAAY,UAAU,KAAK,GAAG,OAAO,KAAK,MAAM,SAAS,CAAC;AAEjH,QAAO,cACL,UACA;EAAE;EAAQ;EAAW;EAAO,EAC5B;EACE;EACA,cAAc,QAAQ;EACtB,KAAK;EACL,OAAO,CAAC;GAAE,aAAa;GAAO,UAAU;GAAM,EAAE,aAAa;EAC9D,CACF;EACD"}
+{"version":3,"file":"slider-value.js","names":[],"sources":["../../../../src/ui/slider/slider-value.tsx"],"sourcesContent":["import type { SliderState } 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 { useSliderContext, useSliderPointerValue } from './context';\n\nexport interface SliderValueProps extends UIComponentProps<'output', SliderState> {\n  /** Which slider value to display: the current position or the pointer position. */\n  type?: 'current' | 'pointer' | undefined;\n  /** Custom formatter for the displayed value. Overrides the root's `formatValue`. */\n  format?: ((value: number) => string) | undefined;\n}\n\n/** Displays a formatted text representation of the slider value. Renders an `<output>` element. */\nexport const SliderValue = forwardRef(function SliderValue(\n  componentProps: SliderValueProps,\n  forwardedRef: ForwardedRef<HTMLOutputElement>\n) {\n  const { render, className, style, type = 'current', format, ...elementProps } = componentProps;\n\n  const context = useSliderContext();\n  const { state, formatValue } = context;\n  const pointerValue = useSliderPointerValue(type === 'pointer');\n\n  const rawValue = type === 'pointer' ? pointerValue : state.value;\n\n  const text = format ? format(rawValue) : formatValue ? formatValue(rawValue, type) : String(Math.round(rawValue));\n\n  return renderElement(\n    'output',\n    { render, className, style },\n    {\n      state,\n      stateAttrMap: context.stateAttrMap,\n      ref: forwardedRef,\n      props: [{ 'aria-live': 'off', children: text }, elementProps],\n    }\n  );\n});\n\nexport namespace SliderValue {\n  export type Props = SliderValueProps;\n}\n"],"mappings":";;;;;AAgBA,MAAa,cAAc,WAAW,SAAS,YAC7C,gBACA,cACA;CACA,MAAM,EAAE,QAAQ,WAAW,OAAO,OAAO,WAAW,QAAQ,GAAG,iBAAiB;CAEhF,MAAM,UAAU,iBAAiB;CACjC,MAAM,EAAE,OAAO,gBAAgB;CAC/B,MAAM,eAAe,sBAAsB,SAAS,SAAS;CAE7D,MAAM,WAAW,SAAS,YAAY,eAAe,MAAM;CAE3D,MAAM,OAAO,SAAS,OAAO,QAAQ,IAAI,cAAc,YAAY,UAAU,IAAI,IAAI,OAAO,KAAK,MAAM,QAAQ,CAAC;CAEhH,OAAO,cACL,UACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EACE;EACA,cAAc,QAAQ;EACtB,KAAK;EACL,OAAO,CAAC;GAAE,aAAa;GAAO,UAAU;EAAK,GAAG,YAAY;CAC9D,CACF;AACF,CAAC"}

package/dist/default/ui/status-announcer/index.js

@@ -0,0 +1,2 @@
+import { StatusAnnouncer } from "./status-announcer.js";
+export { StatusAnnouncer };

package/dist/default/ui/status-announcer/status-announcer.js

@@ -0,0 +1,47 @@
+import { useLocale, useTranslator } from "../../i18n/context.js";
+import { useContainer, usePlayer } from "../../player/context.js";
+import { useDestroy } from "../../utils/use-destroy.js";
+import { renderElement } from "../../utils/use-render.js";
+import { StatusAnnouncerCore, createStatusAnnouncerLabels } from "@videojs/core";
+import { shouldAnnounceStatusChange, subscribeToStatusAnnouncer } from "@videojs/core/dom";
+import { forwardRef, useEffect, useState, useSyncExternalStore } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/ui/status-announcer/status-announcer.tsx
+const StatusAnnouncer = forwardRef(function StatusAnnouncer(componentProps, forwardedRef) {
+	const { render, className, style, closeDelay, labels, ...elementProps } = componentProps;
+	const translator = useTranslator();
+	const locale = useLocale();
+	const [core] = useState(() => new StatusAnnouncerCore());
+	const store = usePlayer();
+	const container = useContainer();
+	useDestroy(core);
+	core.setProps({
+		closeDelay,
+		labels: {
+			...createStatusAnnouncerLabels(translator, locale),
+			...labels
+		},
+		shouldAnnounce: () => shouldAnnounceStatusChange(container)
+	});
+	useEffect(() => subscribeToStatusAnnouncer(store, core), [core, store]);
+	const state = useSyncExternalStore((callback) => core.state.subscribe(callback), () => core.state.current, () => core.state.current);
+	return renderElement("div", {
+		render,
+		className,
+		style
+	}, {
+		state,
+		ref: forwardedRef,
+		props: [elementProps, {
+			role: "status",
+			children: /* @__PURE__ */ jsx("span", {
+				"data-status-announcer-content": "",
+				children: state.label ?? ""
+			}, state.generation)
+		}]
+	});
+});
+//#endregion
+export { StatusAnnouncer };
+
+//# sourceMappingURL=status-announcer.js.map

package/dist/default/ui/status-announcer/status-announcer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"status-announcer.js","names":[],"sources":["../../../../src/ui/status-announcer/status-announcer.tsx"],"sourcesContent":["import { createStatusAnnouncerLabels, StatusAnnouncerCore } from '@videojs/core';\nimport { shouldAnnounceStatusChange, subscribeToStatusAnnouncer } from '@videojs/core/dom';\nimport type { ForwardedRef } from 'react';\nimport { forwardRef, useEffect, useState, useSyncExternalStore } from 'react';\n\nimport { useLocale, useTranslator } from '../../i18n/context';\nimport { useContainer, usePlayer } from '../../player/context';\nimport type { UIComponentProps } from '../../utils/types';\nimport { useDestroy } from '../../utils/use-destroy';\nimport { renderElement } from '../../utils/use-render';\n\nexport interface StatusAnnouncerProps\n  extends\n    UIComponentProps<'div', StatusAnnouncerCore.State>,\n    Pick<StatusAnnouncerCore.Props, 'closeDelay' | 'labels'> {}\n\nexport const StatusAnnouncer = forwardRef(function StatusAnnouncer(\n  componentProps: StatusAnnouncerProps,\n  forwardedRef: ForwardedRef<HTMLDivElement>\n) {\n  const { render, className, style, closeDelay, labels, ...elementProps } = componentProps;\n  const translator = useTranslator();\n  const locale = useLocale();\n  const [core] = useState(() => new StatusAnnouncerCore());\n  const store = usePlayer();\n  const container = useContainer();\n\n  useDestroy(core);\n  core.setProps({\n    closeDelay,\n    labels: {\n      ...createStatusAnnouncerLabels(translator, locale),\n      ...labels,\n    },\n    shouldAnnounce: () => shouldAnnounceStatusChange(container),\n  });\n\n  useEffect(() => subscribeToStatusAnnouncer(store, core), [core, store]);\n\n  const state = useSyncExternalStore(\n    (callback) => core.state.subscribe(callback),\n    () => core.state.current,\n    () => core.state.current\n  );\n\n  return renderElement(\n    'div',\n    { render, className, style },\n    {\n      state,\n      ref: forwardedRef,\n      props: [\n        elementProps,\n        {\n          role: 'status',\n          children: (\n            <span key={state.generation} data-status-announcer-content=\"\">\n              {state.label ?? ''}\n            </span>\n          ),\n        },\n      ],\n    }\n  );\n});\n\nexport namespace StatusAnnouncer {\n  export type Props = StatusAnnouncerProps;\n  export type State = StatusAnnouncerCore.State;\n}\n"],"mappings":";;;;;;;;;AAgBA,MAAa,kBAAkB,WAAW,SAAS,gBACjD,gBACA,cACA;CACA,MAAM,EAAE,QAAQ,WAAW,OAAO,YAAY,QAAQ,GAAG,iBAAiB;CAC1E,MAAM,aAAa,cAAc;CACjC,MAAM,SAAS,UAAU;CACzB,MAAM,CAAC,QAAQ,eAAe,IAAI,oBAAoB,CAAC;CACvD,MAAM,QAAQ,UAAU;CACxB,MAAM,YAAY,aAAa;CAE/B,WAAW,IAAI;CACf,KAAK,SAAS;EACZ;EACA,QAAQ;GACN,GAAG,4BAA4B,YAAY,MAAM;GACjD,GAAG;EACL;EACA,sBAAsB,2BAA2B,SAAS;CAC5D,CAAC;CAED,gBAAgB,2BAA2B,OAAO,IAAI,GAAG,CAAC,MAAM,KAAK,CAAC;CAEtE,MAAM,QAAQ,sBACX,aAAa,KAAK,MAAM,UAAU,QAAQ,SACrC,KAAK,MAAM,eACX,KAAK,MAAM,OACnB;CAEA,OAAO,cACL,OACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EACE;EACA,KAAK;EACL,OAAO,CACL,cACA;GACE,MAAM;GACN,UACE,oBAAC,QAAD;IAA6B,iCAA8B;IACxD,UAAA,MAAM,SAAS;GACZ,GAFK,MAAM,UAEX;EAEV,CACF;CACF,CACF;AACF,CAAC"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"context.js","names":[],"sources":["../../../../src/ui/status-indicator/context.tsx"],"sourcesContent":["import type { StatusIndicatorCore } from '@videojs/core';\nimport { createContext, type ProviderProps, useContext } from 'react';\n\nexport interface StatusIndicatorContextValue {\n  state: StatusIndicatorCore.State;\n}\n\nconst StatusIndicatorContext = createContext<StatusIndicatorContextValue | null>(null);\n\nexport function StatusIndicatorProvider({ value, children }: ProviderProps<StatusIndicatorContextValue>) {\n  return <StatusIndicatorContext.Provider value={value}>{children}</StatusIndicatorContext.Provider>;\n}\n\nexport function useStatusIndicatorContext(): StatusIndicatorContextValue {\n  const ctx = useContext(StatusIndicatorContext);\n  if (!ctx) throw new Error('StatusIndicator child compounds must be used within a StatusIndicator.Root');\n\n  return ctx;\n}\n"],"mappings":";;;AAOA,MAAM,yBAAyB,cAAkD,IAAI;AAErF,SAAgB,wBAAwB,EAAE,OAAO,YAAwD;CACvG,OAAO,oBAAC,uBAAuB,UAAxB;EAAwC;EAAQ;CAA0C,CAAA;AACnG;AAEA,SAAgB,4BAAyD;CACvE,MAAM,MAAM,WAAW,sBAAsB;CAC7C,IAAI,CAAC,KAAK,MAAM,IAAI,MAAM,4EAA4E;CAEtG,OAAO;AACT"}

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

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

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

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

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

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

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

@@ -0,0 +1,35 @@
+import { useTranslator } from "../../i18n/context.js";
+import { renderElement } from "../../utils/use-render.js";
+import { useInputIndicatorRoot } from "../input-indicator/use-input-indicator-root.js";
+import { StatusIndicatorProvider } from "./context.js";
+import { StatusIndicatorCore, StatusIndicatorDataAttrs, createInputIndicatorLabels } from "@videojs/core";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/ui/status-indicator/status-indicator-root.tsx
+const StatusIndicatorRoot = forwardRef(function StatusIndicatorRoot(componentProps, forwardedRef) {
+	const { render, className, style, actions, closeDelay, ...elementProps } = componentProps;
+	const translator = useTranslator();
+	const { elementRef, present, state } = useInputIndicatorRoot(() => new StatusIndicatorCore(), {
+		actions,
+		closeDelay,
+		labels: createInputIndicatorLabels(translator)
+	}, { replayOnUpdate: false });
+	if (!present) return null;
+	return /* @__PURE__ */ jsx(StatusIndicatorProvider, {
+		value: { state },
+		children: renderElement("div", {
+			render,
+			className,
+			style
+		}, {
+			state,
+			stateAttrMap: StatusIndicatorDataAttrs,
+			ref: [forwardedRef, elementRef],
+			props: [elementProps]
+		})
+	});
+});
+//#endregion
+export { StatusIndicatorRoot };
+
+//# sourceMappingURL=status-indicator-root.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"status-indicator-root.js","names":[],"sources":["../../../../src/ui/status-indicator/status-indicator-root.tsx"],"sourcesContent":["import { createInputIndicatorLabels, StatusIndicatorCore, StatusIndicatorDataAttrs } from '@videojs/core';\nimport type { ForwardedRef } from 'react';\nimport { forwardRef } from 'react';\n\nimport { useTranslator } from '../../i18n/context';\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { useInputIndicatorRoot } from '../input-indicator/use-input-indicator-root';\nimport { StatusIndicatorProvider } from './context';\n\nexport interface StatusIndicatorRootProps\n  extends UIComponentProps<'div', StatusIndicatorCore.State>, Omit<StatusIndicatorCore.Props, 'labels'> {}\n\nexport const StatusIndicatorRoot = forwardRef(function StatusIndicatorRoot(\n  componentProps: StatusIndicatorRootProps,\n  forwardedRef: ForwardedRef<HTMLDivElement>\n) {\n  const { render, className, style, actions, closeDelay, ...elementProps } = componentProps;\n  const translator = useTranslator();\n  const { elementRef, present, state } = useInputIndicatorRoot(\n    () => new StatusIndicatorCore(),\n    {\n      actions,\n      closeDelay,\n      labels: createInputIndicatorLabels(translator),\n    },\n    { replayOnUpdate: false }\n  );\n  if (!present) return null;\n\n  return (\n    <StatusIndicatorProvider value={{ state }}>\n      {renderElement(\n        'div',\n        { render, className, style },\n        {\n          state,\n          stateAttrMap: StatusIndicatorDataAttrs,\n          ref: [forwardedRef, elementRef],\n          props: [elementProps],\n        }\n      )}\n    </StatusIndicatorProvider>\n  );\n});\n\nexport namespace StatusIndicatorRoot {\n  export type Props = StatusIndicatorRootProps;\n  export type State = StatusIndicatorCore.State;\n}\n"],"mappings":";;;;;;;;AAaA,MAAa,sBAAsB,WAAW,SAAS,oBACrD,gBACA,cACA;CACA,MAAM,EAAE,QAAQ,WAAW,OAAO,SAAS,YAAY,GAAG,iBAAiB;CAC3E,MAAM,aAAa,cAAc;CACjC,MAAM,EAAE,YAAY,SAAS,UAAU,4BAC/B,IAAI,oBAAoB,GAC9B;EACE;EACA;EACA,QAAQ,2BAA2B,UAAU;CAC/C,GACA,EAAE,gBAAgB,MAAM,CAC1B;CACA,IAAI,CAAC,SAAS,OAAO;CAErB,OACE,oBAAC,yBAAD;EAAyB,OAAO,EAAE,MAAM;EACrC,UAAA,cACC,OACA;GAAE;GAAQ;GAAW;EAAM,GAC3B;GACE;GACA,cAAc;GACd,KAAK,CAAC,cAAc,UAAU;GAC9B,OAAO,CAAC,YAAY;EACtB,CACF;CACuB,CAAA;AAE7B,CAAC"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"status-indicator-value.js","names":[],"sources":["../../../../src/ui/status-indicator/status-indicator-value.tsx"],"sourcesContent":["import { getStatusIndicatorDisplayValue, type StatusIndicatorCore } 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 { useStatusIndicatorContext } from './context';\n\nexport interface StatusIndicatorValueProps extends UIComponentProps<'span', StatusIndicatorCore.State> {}\n\nexport const StatusIndicatorValue = forwardRef(function StatusIndicatorValue(\n  componentProps: StatusIndicatorValueProps,\n  forwardedRef: ForwardedRef<HTMLSpanElement>\n) {\n  const { render, className, style, ...elementProps } = componentProps;\n  const { state } = useStatusIndicatorContext();\n\n  return renderElement(\n    'span',\n    { render, className, style },\n    {\n      state,\n      ref: forwardedRef,\n      props: [{ children: getStatusIndicatorDisplayValue(state) }, elementProps],\n    }\n  );\n});\n\nexport namespace StatusIndicatorValue {\n  export type Props = StatusIndicatorValueProps;\n}\n"],"mappings":";;;;;AAUA,MAAa,uBAAuB,WAAW,SAAS,qBACtD,gBACA,cACA;CACA,MAAM,EAAE,QAAQ,WAAW,OAAO,GAAG,iBAAiB;CACtD,MAAM,EAAE,UAAU,0BAA0B;CAE5C,OAAO,cACL,QACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EACE;EACA,KAAK;EACL,OAAO,CAAC,EAAE,UAAU,+BAA+B,KAAK,EAAE,GAAG,YAAY;CAC3E,CACF;AACF,CAAC"}

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

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

package/dist/default/ui/thumbnail/thumbnail.js

@@ -1,14 +1,26 @@
-'use client';
-
 import { useOptionalPlayer } from "../../player/context.js";
 import { useDestroy } from "../../utils/use-destroy.js";
 import { renderElement } from "../../utils/use-render.js";
+import { ThumbnailCore, ThumbnailDataAttrs, mapCuesToThumbnails } from "@videojs/core";
 import { createThumbnail, selectTextTrack } from "@videojs/core/dom";
 import { forwardRef, useMemo, useRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";
-import { ThumbnailCore, ThumbnailDataAttrs, mapCuesToThumbnails } from "@videojs/core";
-
+import { isNull, isUndefined } from "@videojs/utils/predicate";
 //#region src/ui/thumbnail/thumbnail.tsx
+/**
+* Leaving `crossOrigin` unset means "follow the media element", so thumbnails keep working on a CORS-enabled player
+* without a skin having to thread a prop through. `null` opts out and fetches the sprites no-CORS. `''` is passed
+* straight through, since the CORS-settings attribute reads it as Anonymous.
+*
+* Only the `<track>` path inherits: `thumbnails` passed directly may point at a host that has nothing to do with the
+* media element.
+*/
+function resolveCrossOrigin(explicit, external, inherited) {
+	if (isNull(explicit)) return void 0;
+	if (!isUndefined(explicit)) return explicit;
+	if (external?.length) return void 0;
+	return inherited ?? void 0;
+}
 const Thumbnail = forwardRef(function Thumbnail(componentProps, forwardedRef) {
 	const { render, className, style, time = 0, thumbnails: externalThumbnails, crossOrigin, loading, fetchPriority, ...elementProps } = componentProps;
 	const [core] = useState(() => new ThumbnailCore());
@@ -24,14 +36,14 @@ const Thumbnail = forwardRef(function Thumbnail(componentProps, forwardedRef) {
 	useDestroy(handle, () => handle.connect());
 	const thumbnails = useMemo(() => {
 		if (externalThumbnails && externalThumbnails.length > 0) return externalThumbnails;
-		if (!textTrack?.thumbnailCues.length) return [];
-		return mapCuesToThumbnails(textTrack.thumbnailCues, textTrack.thumbnailTrackSrc ?? void 0);
+		return textTrack && textTrack.thumbnailCues.length > 0 ? mapCuesToThumbnails(textTrack.thumbnailCues, textTrack.thumbnailTrackSrc ?? void 0) : [];
 	}, [externalThumbnails, textTrack]);
 	const thumbnail = useMemo(() => core.findActiveThumbnail(thumbnails, time), [
 		core,
 		thumbnails,
 		time
 	]);
+	const resolvedCrossOrigin = resolveCrossOrigin(crossOrigin, externalThumbnails, textTrack?.thumbnailTrackCrossOrigin);
 	handle.updateSrc(thumbnail?.url);
 	const state = core.getState(handle.loading, handle.error, thumbnail);
 	let containerStyle = { overflow: "hidden" };
@@ -71,7 +83,7 @@ const Thumbnail = forwardRef(function Thumbnail(componentProps, forwardedRef) {
 				"aria-hidden": "true",
 				decoding: "async",
 				src: thumbnail?.url,
-				crossOrigin: crossOrigin === "" || crossOrigin === null ? void 0 : crossOrigin,
+				crossOrigin: resolvedCrossOrigin,
 				loading,
 				style: imgStyle,
 				fetchPriority
@@ -79,7 +91,7 @@ const Thumbnail = forwardRef(function Thumbnail(componentProps, forwardedRef) {
 		]
 	});
 });
-
 //#endregion
 export { Thumbnail };
+
 //# sourceMappingURL=thumbnail.js.map