@videojs/react 10.0.0-beta.25 → 10.0.0-beta.26

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

@@ -1,12 +1,22 @@
 "use client";
+import { useTranslator } from "../../i18n/context.js";
 import { usePlayer } from "../../player/context.js";
 import { selectQuality } from "@videojs/core/dom";
+import { translateText } from "@videojs/core/i18n";
 import { useCallback, useState } from "react";
 import { QUALITY_AUTO_VALUE, QualityRadioGroupCore } from "@videojs/core";
 //#region src/ui/quality/use-quality-options.ts
+/**
+* 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";
 	const media = usePlayer(selectQuality);
+	const t = useTranslator();
 	const [core] = useState(() => new QualityRadioGroupCore());
 	core.setProps(props ?? {});
 	const setValue = useCallback((value) => core.selectValue(media, value), [core, media]);
@@ -18,11 +28,11 @@ function useQualityOptions(props) {
 		value: state.value,
 		options: [{
 			value: QUALITY_AUTO_VALUE,
-			label: state.autoLabel,
+			label: translateText(state.autoLabel, t, state.autoLabelParams),
 			disabled: state.disabled
 		}, ...state.renditions.map((rendition) => ({
 			value: rendition.value,
-			label: rendition.label,
+			label: translateText(rendition.label, t),
 			...rendition.tier && { tier: rendition.tier },
 			...rendition.badge && { badge: rendition.badge },
 			disabled: state.disabled

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

@@ -1 +1 @@
-{"version":3,"file":"use-quality-options.js","names":[],"sources":["../../../../src/ui/quality/use-quality-options.ts"],"sourcesContent":["'use client';\n\nimport { QUALITY_AUTO_VALUE, QualityRadioGroupCore } from '@videojs/core';\nimport { logMissingFeature, selectQuality } from '@videojs/core/dom';\nimport { useCallback, useState } from 'react';\n\nimport { usePlayer } from '../../player/context';\n\nexport interface QualityOptionsProps extends QualityRadioGroupCore.Props {}\n\nexport interface QualityOption {\n  value: string;\n  label: string;\n  tier?: string | undefined;\n  badge?: string | undefined;\n  disabled: boolean;\n}\n\nexport interface QualityOptionsResult {\n  state: QualityRadioGroupCore.State;\n  value: string;\n  options: QualityOption[];\n  disabled: boolean;\n  setValue: (value: string) => void;\n}\n\nexport function useQualityOptions(props?: QualityOptionsProps): QualityOptionsResult | null {\n  'use no memo';\n\n  const media = usePlayer(selectQuality);\n  const [core] = useState(() => new QualityRadioGroupCore());\n\n  core.setProps(props ?? {});\n\n  const setValue = useCallback((value: string) => core.selectValue(media!, value), [core, media]);\n\n  if (!media) {\n    if (__DEV__) logMissingFeature('useQualityOptions', selectQuality.displayName ?? 'quality');\n    return null;\n  }\n\n  core.setMedia(media);\n  const state = core.getState();\n\n  return {\n    state,\n    value: state.value,\n    options: [\n      { value: QUALITY_AUTO_VALUE, label: state.autoLabel, disabled: state.disabled },\n      ...state.renditions.map((rendition) => ({\n        value: rendition.value,\n        label: rendition.label,\n        ...(rendition.tier && { tier: rendition.tier }),\n        ...(rendition.badge && { badge: rendition.badge }),\n        disabled: state.disabled,\n      })),\n    ],\n    disabled: state.disabled,\n    setValue,\n  };\n}\n\nexport namespace useQualityOptions {\n  export type Props = QualityOptionsProps;\n  export type Result = QualityOptionsResult;\n  export type Option = QualityOption;\n}\n"],"mappings":";;;;;;AA0BA,SAAgB,kBAAkB,OAA0D;AAC1F;CAEA,MAAM,QAAQ,UAAU,cAAc;CACtC,MAAM,CAAC,QAAQ,eAAe,IAAI,uBAAuB,CAAC;AAE1D,MAAK,SAAS,SAAS,EAAE,CAAC;CAE1B,MAAM,WAAW,aAAa,UAAkB,KAAK,YAAY,OAAQ,MAAM,EAAE,CAAC,MAAM,MAAM,CAAC;AAE/F,KAAI,CAAC,MAEH,QAAO;AAGT,MAAK,SAAS,MAAM;CACpB,MAAM,QAAQ,KAAK,UAAU;AAE7B,QAAO;EACL;EACA,OAAO,MAAM;EACb,SAAS,CACP;GAAE,OAAO;GAAoB,OAAO,MAAM;GAAW,UAAU,MAAM;GAAU,EAC/E,GAAG,MAAM,WAAW,KAAK,eAAe;GACtC,OAAO,UAAU;GACjB,OAAO,UAAU;GACjB,GAAI,UAAU,QAAQ,EAAE,MAAM,UAAU,MAAM;GAC9C,GAAI,UAAU,SAAS,EAAE,OAAO,UAAU,OAAO;GACjD,UAAU,MAAM;GACjB,EAAE,CACJ;EACD,UAAU,MAAM;EAChB;EACD"}
+{"version":3,"file":"use-quality-options.js","names":[],"sources":["../../../../src/ui/quality/use-quality-options.ts"],"sourcesContent":["'use client';\n\nimport { QUALITY_AUTO_VALUE, QualityRadioGroupCore } from '@videojs/core';\nimport { logMissingFeature, selectQuality } from '@videojs/core/dom';\nimport { translateText } from '@videojs/core/i18n';\nimport { useCallback, useState } from 'react';\n\nimport { useTranslator } from '../../i18n/context';\nimport { usePlayer } from '../../player/context';\n\nexport interface QualityOptionsProps extends QualityRadioGroupCore.Props {}\n\nexport interface QualityOption {\n  value: string;\n  label: string;\n  tier?: string | undefined;\n  badge?: string | undefined;\n  disabled: boolean;\n}\n\nexport interface QualityOptionsResult {\n  state: QualityRadioGroupCore.State;\n  value: string;\n  options: QualityOption[];\n  disabled: boolean;\n  setValue: (value: string) => void;\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  const media = usePlayer(selectQuality);\n  const t = useTranslator();\n  const [core] = useState(() => new QualityRadioGroupCore());\n\n  core.setProps(props ?? {});\n\n  const setValue = useCallback((value: string) => core.selectValue(media!, value), [core, media]);\n\n  if (!media) {\n    if (__DEV__) logMissingFeature('useQualityOptions', selectQuality.displayName ?? 'quality');\n    return null;\n  }\n\n  core.setMedia(media);\n  const state = core.getState();\n\n  return {\n    state,\n    value: state.value,\n    options: [\n      {\n        value: QUALITY_AUTO_VALUE,\n        label: translateText(state.autoLabel, t, state.autoLabelParams),\n        disabled: state.disabled,\n      },\n      ...state.renditions.map((rendition) => ({\n        value: rendition.value,\n        label: translateText(rendition.label, t),\n        ...(rendition.tier && { tier: rendition.tier }),\n        ...(rendition.badge && { badge: rendition.badge }),\n        disabled: state.disabled,\n      })),\n    ],\n    disabled: state.disabled,\n    setValue,\n  };\n}\n\nexport namespace useQualityOptions {\n  export type Props = QualityOptionsProps;\n  export type Result = QualityOptionsResult;\n  export type Option = QualityOption;\n}\n"],"mappings":";;;;;;;;;;;;;;;AAmCA,SAAgB,kBAAkB,OAA0D;CAC1F;CAEA,MAAM,QAAQ,UAAU,aAAa;CACrC,MAAM,IAAI,cAAc;CACxB,MAAM,CAAC,QAAQ,eAAe,IAAI,sBAAsB,CAAC;CAEzD,KAAK,SAAS,SAAS,CAAC,CAAC;CAEzB,MAAM,WAAW,aAAa,UAAkB,KAAK,YAAY,OAAQ,KAAK,GAAG,CAAC,MAAM,KAAK,CAAC;CAE9F,IAAI,CAAC,OAEH,OAAO;CAGT,KAAK,SAAS,KAAK;CACnB,MAAM,QAAQ,KAAK,SAAS;CAE5B,OAAO;EACL;EACA,OAAO,MAAM;EACb,SAAS,CACP;GACE,OAAO;GACP,OAAO,cAAc,MAAM,WAAW,GAAG,MAAM,eAAe;GAC9D,UAAU,MAAM;EAClB,GACA,GAAG,MAAM,WAAW,KAAK,eAAe;GACtC,OAAO,UAAU;GACjB,OAAO,cAAc,UAAU,OAAO,CAAC;GACvC,GAAI,UAAU,QAAQ,EAAE,MAAM,UAAU,KAAK;GAC7C,GAAI,UAAU,SAAS,EAAE,OAAO,UAAU,MAAM;GAChD,UAAU,MAAM;EAClB,EAAE,CACJ;EACA,UAAU,MAAM;EAChB;CACF;AACF"}

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  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":";;;;;;;;;;;;;;;;;;;;;;AA2BA,MAAa,aAAa,kBAAmD;CAC3E,aAAa;CACb,MAAM;CACN,cAAc;CACd,UAAU;CACV,SAAS,MAAM,UAAU,KAAK,KAAK,MAAM;CACzC,cAAc;CACd,cAAc,UAAW,OAAO,MAAM,YAAY,WAAW,MAAM,UAAU,eAAe,aAAa;CAC1G,CAAC"}
+{"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  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":";;;;;;;;;;;;;;;;;;;;;;AA2BA,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.map

@@ -1 +1 @@
-{"version":3,"file":"context.js","names":[],"sources":["../../../../src/ui/seek-indicator/context.tsx"],"sourcesContent":["'use client';\n\nimport 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":";;;;AASA,MAAM,uBAAuB,cAAgD,KAAK;AAElF,SAAgB,sBAAsB,EAAE,OAAO,YAAsD;AACnG,QAAO,oBAAC,qBAAqB,UAAtB;EAAsC;EAAQ;EAAyC,CAAA;;AAGhG,SAAgB,0BAAqD;CACnE,MAAM,MAAM,WAAW,qBAAqB;AAC5C,KAAI,CAAC,IAAK,OAAM,IAAI,MAAM,yEAAyE;AACnG,QAAO"}
+{"version":3,"file":"context.js","names":[],"sources":["../../../../src/ui/seek-indicator/context.tsx"],"sourcesContent":["'use client';\n\nimport 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":";;;;AASA,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.parts.js

@@ -7,6 +7,6 @@ var index_parts_exports = /* @__PURE__ */ __exportAll({
 	Value: () => SeekIndicatorValue
 });
 //#endregion
-export { index_parts_exports };
+export { SeekIndicatorRoot as Root, SeekIndicatorValue as Value, index_parts_exports };
 
 //# sourceMappingURL=index.parts.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"seek-indicator-root.js","names":[],"sources":["../../../../src/ui/seek-indicator/seek-indicator-root.tsx"],"sourcesContent":["'use client';\n\nimport { 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-indicators/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":";;;;;;;;AAeA,MAAa,oBAAoB,WAAW,SAAS,kBACnD,gBACA,cACA;CACA,MAAM,EAAE,QAAQ,WAAW,OAAO,YAAY,GAAG,iBAAiB;CAClE,MAAM,EAAE,YAAY,SAAS,UAAU,4BAA4B,IAAI,mBAAmB,EAAE,EAAE,YAAY,CAAC;AAE3G,KAAI,CAAC,QAAS,QAAO;AAErB,QACE,oBAAC,uBAAD;EAAuB,OAAO,EAAE,OAAO;YACpC,cACC,OACA;GAAE;GAAQ;GAAW;GAAO,EAC5B;GACE;GACA,cAAc;GACd,KAAK,CAAC,cAAc,WAAW;GAC/B,OAAO,CAAC,aAAa;GACtB,CACF;EACqB,CAAA;EAE1B"}
+{"version":3,"file":"seek-indicator-root.js","names":[],"sources":["../../../../src/ui/seek-indicator/seek-indicator-root.tsx"],"sourcesContent":["'use client';\n\nimport { 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-indicators/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":";;;;;;;;AAeA,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.map

@@ -1 +1 @@
-{"version":3,"file":"seek-indicator-value.js","names":[],"sources":["../../../../src/ui/seek-indicator/seek-indicator-value.tsx"],"sourcesContent":["'use client';\n\nimport { 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":";;;;;;AAYA,MAAa,qBAAqB,WAAW,SAAS,mBACpD,gBACA,cACA;CACA,MAAM,EAAE,QAAQ,WAAW,OAAO,GAAG,iBAAiB;CACtD,MAAM,EAAE,UAAU,yBAAyB;AAE3C,QAAO,cACL,OACA;EAAE;EAAQ;EAAW;EAAO,EAC5B;EACE;EACA,KAAK;EACL,OAAO,CAAC,EAAE,UAAU,6BAA6B,MAAM,EAAE,EAAE,aAAa;EACzE,CACF;EACD"}
+{"version":3,"file":"seek-indicator-value.js","names":[],"sources":["../../../../src/ui/seek-indicator/seek-indicator-value.tsx"],"sourcesContent":["'use client';\n\nimport { 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":";;;;;;AAYA,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.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 { ProviderProps, 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\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"],"mappings":";;;;AAkBA,MAAM,gBAAgB,cAAyC,KAAK;AAIpE,SAAgB,eAAe,EAAE,OAAO,YAAiC;AACvE,QAAO,oBAAC,cAAc,UAAf;EAA+B;EAAQ;EAAkC,CAAA;;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":["'use client';\n\nimport type { SliderState, StateAttrMap } from '@videojs/core';\nimport type { SliderThumbProps } from '@videojs/core/dom';\nimport type { ProviderProps, 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\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"],"mappings":";;;;AAkBA,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"}

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

@@ -19,6 +19,6 @@ var index_parts_exports = /* @__PURE__ */ __exportAll({
 	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.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":["'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;AACd,CAAC"}

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":["'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;AACd,CAAC"}

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":["'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,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,MAAM,WAAW,IAAI,gBAAgB,CAAC,WAAW;GAC/C,SAAS,MAAO,YAAY,KAAK;EACnC,CAAC;EAED,SAAS,QAAQ,EAAE;EACnB,aAAa,SAAS,WAAW;CACnC,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,8 +1,10 @@
 "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 { 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";
@@ -10,6 +12,7 @@ import { SliderCore, SliderDataAttrs } from "@videojs/core";
 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,
@@ -44,7 +47,13 @@ const SliderRoot = forwardRef(function SliderRoot(componentProps, forwardedRef)
 			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", {

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,gBAAD;EACE,OAAO;GACL;GACA,cAAc,KAAK,iBAAiB,MAAM,eAAe;GACzD,UAAU;GACV;GACA,cAAc;GACd,WAAW,gBAAgB,KAAK,SAAS,YAAY;GACrD,aAAa,KAAA;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;EACc,CAAA;EAEnB"}
+{"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 { translateText } from '@videojs/core/i18n';\nimport type { ForwardedRef } from 'react';\nimport { forwardRef, useState } from 'react';\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  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) => {\n          const attrs = core.getAttrs(sliderState);\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":";;;;;;;;;;;AAoBA,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;CACjC,KAAK,SAAS;EAAE;EAAO;EAAK;EAAK;EAAM;EAAW;EAAa;EAAU;CAAe,CAAC;CAEzF,MAAM,EACJ,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,UAAU;GACV;GACA,cAAc;GACd,WAAW,gBAAgB;IACzB,MAAM,QAAQ,KAAK,SAAS,WAAW;IACvC,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.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":["'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,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.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,WAAD;EAAW,KAAK;EAAc,GAAI;EAAgB,MAAM;EAAgB,CAAA;EAElF"}
+{"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,iBAAiB;CAC1C,OAAO,oBAAC,WAAD;EAAW,KAAK;EAAc,GAAI;EAAgB,MAAM;CAAe,CAAA;AAChF,CACF"}

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":["'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;AACd,CAAC"}

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":["'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,iBAAiB;CACjC,MAAM,EAAE,OAAO,cAAc,gBAAgB;CAE7C,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/status-announcer.js

@@ -1,21 +1,30 @@
 "use client";
+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 { useInputActionSubscription } from "../input-indicators/use-input-action-subscription.js";
-import { forwardRef, useState, useSyncExternalStore } from "react";
-import { StatusAnnouncerCore } from "@videojs/core";
+import { isSliderFocused, subscribeToStatusAnnouncer } from "@videojs/core/dom";
+import { forwardRef, useEffect, useState, useSyncExternalStore } from "react";
+import { StatusAnnouncerCore, createStatusAnnouncerLabels } from "@videojs/core";
 //#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
-	});
-	useInputActionSubscription((event, snapshot) => {
-		core.processEvent(event, snapshot);
+		labels: {
+			...createStatusAnnouncerLabels(translator, locale),
+			...labels
+		},
+		shouldAnnounceSeek: () => !container || !isSliderFocused(container),
+		shouldAnnounceVolume: () => !container || !isSliderFocused(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,
@@ -24,10 +33,10 @@ const StatusAnnouncer = forwardRef(function StatusAnnouncer(componentProps, forw
 	}, {
 		state,
 		ref: forwardedRef,
-		props: [{
+		props: [elementProps, {
 			role: "status",
-			"aria-label": state.label ?? void 0
-		}, elementProps]
+			children: state.label ?? ""
+		}]
 	});
 });
 //#endregion

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

@@ -1 +1 @@
-{"version":3,"file":"status-announcer.js","names":[],"sources":["../../../../src/ui/status-announcer/status-announcer.tsx"],"sourcesContent":["'use client';\n\nimport { StatusAnnouncerCore } from '@videojs/core';\nimport type { ForwardedRef } from 'react';\nimport { forwardRef, useState, useSyncExternalStore } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { useDestroy } from '../../utils/use-destroy';\nimport { renderElement } from '../../utils/use-render';\nimport { useInputActionSubscription } from '../input-indicators/use-input-action-subscription';\n\nexport interface StatusAnnouncerProps\n  extends UIComponentProps<'div', StatusAnnouncerCore.State>,\n    StatusAnnouncerCore.Props {}\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 [core] = useState(() => new StatusAnnouncerCore());\n  useDestroy(core);\n  core.setProps({ closeDelay, labels });\n\n  useInputActionSubscription((event, snapshot) => {\n    core.processEvent(event, snapshot);\n  });\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        {\n          role: 'status',\n          'aria-label': state.label ?? undefined,\n        },\n        elementProps,\n      ],\n    }\n  );\n});\n\nexport namespace StatusAnnouncer {\n  export type Props = StatusAnnouncerProps;\n  export type State = StatusAnnouncerCore.State;\n}\n"],"mappings":";;;;;;;AAeA,MAAa,kBAAkB,WAAW,SAAS,gBACjD,gBACA,cACA;CACA,MAAM,EAAE,QAAQ,WAAW,OAAO,YAAY,QAAQ,GAAG,iBAAiB;CAC1E,MAAM,CAAC,QAAQ,eAAe,IAAI,qBAAqB,CAAC;AACxD,YAAW,KAAK;AAChB,MAAK,SAAS;EAAE;EAAY;EAAQ,CAAC;AAErC,6BAA4B,OAAO,aAAa;AAC9C,OAAK,aAAa,OAAO,SAAS;GAClC;CAEF,MAAM,QAAQ,sBACX,aAAa,KAAK,MAAM,UAAU,SAAS,QACtC,KAAK,MAAM,eACX,KAAK,MAAM,QAClB;AAED,QAAO,cACL,OACA;EAAE;EAAQ;EAAW;EAAO,EAC5B;EACE;EACA,KAAK;EACL,OAAO,CACL;GACE,MAAM;GACN,cAAc,MAAM,SAAS,KAAA;GAC9B,EACD,aACD;EACF,CACF;EACD"}
+{"version":3,"file":"status-announcer.js","names":[],"sources":["../../../../src/ui/status-announcer/status-announcer.tsx"],"sourcesContent":["'use client';\n\nimport { createStatusAnnouncerLabels, StatusAnnouncerCore } from '@videojs/core';\nimport { isSliderFocused, subscribeToStatusAnnouncer } from '@videojs/core/dom';\nimport type { ForwardedRef } from 'react';\nimport { forwardRef, useEffect, useState, useSyncExternalStore } from 'react';\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 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  useDestroy(core);\n  core.setProps({\n    closeDelay,\n    labels: {\n      ...createStatusAnnouncerLabels(translator, locale),\n      ...labels,\n    },\n    shouldAnnounceSeek: () => !container || !isSliderFocused(container),\n    shouldAnnounceVolume: () => !container || !isSliderFocused(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: state.label ?? '',\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;CAC/B,WAAW,IAAI;CACf,KAAK,SAAS;EACZ;EACA,QAAQ;GACN,GAAG,4BAA4B,YAAY,MAAM;GACjD,GAAG;EACL;EACA,0BAA0B,CAAC,aAAa,CAAC,gBAAgB,SAAS;EAClE,4BAA4B,CAAC,aAAa,CAAC,gBAAgB,SAAS;CACtE,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,UAAU,MAAM,SAAS;EAC3B,CACF;CACF,CACF;AACF,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"context.js","names":[],"sources":["../../../../src/ui/status-indicator/context.tsx"],"sourcesContent":["'use client';\n\nimport 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  return ctx;\n}\n"],"mappings":";;;;AASA,MAAM,yBAAyB,cAAkD,KAAK;AAEtF,SAAgB,wBAAwB,EAAE,OAAO,YAAwD;AACvG,QAAO,oBAAC,uBAAuB,UAAxB;EAAwC;EAAQ;EAA2C,CAAA;;AAGpG,SAAgB,4BAAyD;CACvE,MAAM,MAAM,WAAW,uBAAuB;AAC9C,KAAI,CAAC,IAAK,OAAM,IAAI,MAAM,6EAA6E;AACvG,QAAO"}
+{"version":3,"file":"context.js","names":[],"sources":["../../../../src/ui/status-indicator/context.tsx"],"sourcesContent":["'use client';\n\nimport 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  return ctx;\n}\n"],"mappings":";;;;AASA,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;CACtG,OAAO;AACT"}

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

@@ -7,6 +7,6 @@ var index_parts_exports = /* @__PURE__ */ __exportAll({
 	Value: () => StatusIndicatorValue
 });
 //#endregion
-export { index_parts_exports };
+export { StatusIndicatorRoot as Root, StatusIndicatorValue as Value, index_parts_exports };
 
 //# sourceMappingURL=index.parts.js.map

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

@@ -1,17 +1,18 @@
 "use client";
+import { useTranslator } from "../../i18n/context.js";
 import { renderElement } from "../../utils/use-render.js";
 import { useInputIndicatorRoot } from "../input-indicators/use-input-indicator-root.js";
 import { StatusIndicatorProvider } from "./context.js";
 import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
-import { StatusIndicatorCore, StatusIndicatorDataAttrs } from "@videojs/core";
+import { StatusIndicatorCore, StatusIndicatorDataAttrs, createInputIndicatorLabels } from "@videojs/core";
 //#region src/ui/status-indicator/status-indicator-root.tsx
 const StatusIndicatorRoot = forwardRef(function StatusIndicatorRoot(componentProps, forwardedRef) {
-	const { render, className, style, actions, closeDelay, labels, ...elementProps } = componentProps;
+	const { render, className, style, actions, closeDelay, ...elementProps } = componentProps;
 	const { elementRef, present, state } = useInputIndicatorRoot(() => new StatusIndicatorCore(), {
 		actions,
 		closeDelay,
-		labels
+		labels: createInputIndicatorLabels(useTranslator())
 	});
 	if (!present) return null;
 	return /* @__PURE__ */ jsx(StatusIndicatorProvider, {

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

@@ -1 +1 @@
-{"version":3,"file":"status-indicator-root.js","names":[],"sources":["../../../../src/ui/status-indicator/status-indicator-root.tsx"],"sourcesContent":["'use client';\n\nimport { StatusIndicatorCore, StatusIndicatorDataAttrs } 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-indicators/use-input-indicator-root';\nimport { StatusIndicatorProvider } from './context';\n\nexport interface StatusIndicatorRootProps\n  extends UIComponentProps<'div', StatusIndicatorCore.State>,\n    StatusIndicatorCore.Props {}\n\nexport const StatusIndicatorRoot = forwardRef(function StatusIndicatorRoot(\n  componentProps: StatusIndicatorRootProps,\n  forwardedRef: ForwardedRef<HTMLDivElement>\n) {\n  const { render, className, style, actions, closeDelay, labels, ...elementProps } = componentProps;\n  const { elementRef, present, state } = useInputIndicatorRoot(() => new StatusIndicatorCore(), {\n    actions,\n    closeDelay,\n    labels,\n  });\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":";;;;;;;;AAeA,MAAa,sBAAsB,WAAW,SAAS,oBACrD,gBACA,cACA;CACA,MAAM,EAAE,QAAQ,WAAW,OAAO,SAAS,YAAY,QAAQ,GAAG,iBAAiB;CACnF,MAAM,EAAE,YAAY,SAAS,UAAU,4BAA4B,IAAI,qBAAqB,EAAE;EAC5F;EACA;EACA;EACD,CAAC;AAEF,KAAI,CAAC,QAAS,QAAO;AAErB,QACE,oBAAC,yBAAD;EAAyB,OAAO,EAAE,OAAO;YACtC,cACC,OACA;GAAE;GAAQ;GAAW;GAAO,EAC5B;GACE;GACA,cAAc;GACd,KAAK,CAAC,cAAc,WAAW;GAC/B,OAAO,CAAC,aAAa;GACtB,CACF;EACuB,CAAA;EAE5B"}
+{"version":3,"file":"status-indicator-root.js","names":[],"sources":["../../../../src/ui/status-indicator/status-indicator-root.tsx"],"sourcesContent":["'use client';\n\nimport { 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-indicators/use-input-indicator-root';\nimport { StatusIndicatorProvider } from './context';\n\nexport interface StatusIndicatorRootProps\n  extends UIComponentProps<'div', StatusIndicatorCore.State>,\n    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(() => new StatusIndicatorCore(), {\n    actions,\n    closeDelay,\n    labels: createInputIndicatorLabels(translator),\n  });\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":";;;;;;;;;AAgBA,MAAa,sBAAsB,WAAW,SAAS,oBACrD,gBACA,cACA;CACA,MAAM,EAAE,QAAQ,WAAW,OAAO,SAAS,YAAY,GAAG,iBAAiB;CAE3E,MAAM,EAAE,YAAY,SAAS,UAAU,4BAA4B,IAAI,oBAAoB,GAAG;EAC5F;EACA;EACA,QAAQ,2BAJS,cAI2B,CAAC;CAC/C,CAAC;CAED,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.map

@@ -1 +1 @@
-{"version":3,"file":"status-indicator-value.js","names":[],"sources":["../../../../src/ui/status-indicator/status-indicator-value.tsx"],"sourcesContent":["'use client';\n\nimport { 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":";;;;;;AAYA,MAAa,uBAAuB,WAAW,SAAS,qBACtD,gBACA,cACA;CACA,MAAM,EAAE,QAAQ,WAAW,OAAO,GAAG,iBAAiB;CACtD,MAAM,EAAE,UAAU,2BAA2B;AAE7C,QAAO,cACL,QACA;EAAE;EAAQ;EAAW;EAAO,EAC5B;EACE;EACA,KAAK;EACL,OAAO,CAAC,EAAE,UAAU,+BAA+B,MAAM,EAAE,EAAE,aAAa;EAC3E,CACF;EACD"}
+{"version":3,"file":"status-indicator-value.js","names":[],"sources":["../../../../src/ui/status-indicator/status-indicator-value.tsx"],"sourcesContent":["'use client';\n\nimport { 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":";;;;;;AAYA,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/thumbnail.js.map

@@ -1 +1 @@
-{"version":3,"file":"thumbnail.js","names":[],"sources":["../../../../src/ui/thumbnail/thumbnail.tsx"],"sourcesContent":["'use client';\n\nimport {\n  mapCuesToThumbnails,\n  ThumbnailCore,\n  ThumbnailDataAttrs,\n  type ThumbnailFetchPriority,\n  type ThumbnailImage,\n} from '@videojs/core';\nimport { createThumbnail, selectTextTrack } from '@videojs/core/dom';\nimport type { CSSProperties } from 'react';\nimport { forwardRef, useMemo, useRef, useState } from 'react';\n\nimport { useOptionalPlayer } from '../../player/context';\nimport type { UIComponentProps } from '../../utils/types';\nimport { useDestroy } from '../../utils/use-destroy';\nimport { renderElement } from '../../utils/use-render';\n\nexport interface ThumbnailProps extends UIComponentProps<'div', ThumbnailCore.State>, ThumbnailCore.Props {\n  /** Pre-parsed thumbnail images — bypasses the automatic `<track>` detection. */\n  thumbnails?: ThumbnailImage[] | undefined;\n}\n\nexport const Thumbnail = forwardRef<HTMLDivElement, ThumbnailProps>(function Thumbnail(componentProps, forwardedRef) {\n  const {\n    render,\n    className,\n    style,\n    time = 0,\n    thumbnails: externalThumbnails,\n    crossOrigin,\n    loading,\n    fetchPriority,\n    ...elementProps\n  } = componentProps;\n\n  const [core] = useState(() => new ThumbnailCore());\n  const divRef = useRef<HTMLDivElement>(null);\n  const imgRef = useRef<HTMLImageElement>(null);\n  const textTrack = useOptionalPlayer(selectTextTrack);\n\n  // Force re-render when the handle's state changes (img load/error, resize).\n  const [, setRenderToken] = useState(0);\n\n  const [handle] = useState(() =>\n    createThumbnail({\n      getContainer: () => divRef.current,\n      getImg: () => imgRef.current,\n      onStateChange: () => setRenderToken((n) => n + 1),\n    })\n  );\n\n  useDestroy(handle, () => handle.connect());\n\n  // Resolve thumbnails: external prop takes priority over auto <track> path.\n  const thumbnails = useMemo(() => {\n    if (externalThumbnails && externalThumbnails.length > 0) return externalThumbnails;\n    return textTrack && textTrack.thumbnailCues.length > 0\n      ? mapCuesToThumbnails(textTrack.thumbnailCues, textTrack.thumbnailTrackSrc ?? undefined)\n      : [];\n  }, [externalThumbnails, textTrack]);\n\n  const thumbnail = useMemo(() => core.findActiveThumbnail(thumbnails, time), [core, thumbnails, time]);\n\n  // Track src changes via the handle.\n  handle.updateSrc(thumbnail?.url);\n\n  const state = core.getState(handle.loading, handle.error, thumbnail);\n\n  // Compute styles declaratively from resize result.\n  let containerStyle: CSSProperties = { overflow: 'hidden' };\n  let imgStyle: CSSProperties | undefined;\n\n  if (thumbnail && handle.naturalWidth && handle.naturalHeight) {\n    const constraints = handle.readConstraints();\n    const result = core.resize(thumbnail, handle.naturalWidth, handle.naturalHeight, constraints);\n\n    if (result) {\n      containerStyle = {\n        overflow: 'hidden',\n        width: result.containerWidth,\n        height: result.containerHeight,\n      };\n      imgStyle = {\n        width: result.imageWidth,\n        height: result.imageHeight,\n        maxWidth: 'none',\n        transform:\n          result.offsetX || result.offsetY ? `translate(-${result.offsetX}px, -${result.offsetY}px)` : undefined,\n      };\n    }\n  }\n\n  return renderElement(\n    'div',\n    { render, className, style },\n    {\n      state,\n      stateAttrMap: ThumbnailDataAttrs,\n      ref: [forwardedRef, divRef],\n      props: [\n        core.getAttrs(state),\n        { style: containerStyle },\n        elementProps,\n        {\n          children: (\n            <img\n              ref={imgRef}\n              alt=\"\"\n              aria-hidden=\"true\"\n              decoding=\"async\"\n              src={thumbnail?.url}\n              crossOrigin={crossOrigin === '' || crossOrigin === null ? undefined : crossOrigin}\n              loading={loading}\n              style={imgStyle}\n              // React's types omit `| undefined` from fetchPriority — cast to satisfy exactOptionalPropertyTypes.\n              fetchPriority={fetchPriority as ThumbnailFetchPriority}\n            />\n          ),\n        },\n      ],\n    }\n  );\n});\n\nexport namespace Thumbnail {\n  export type Props = ThumbnailProps;\n  export type State = ThumbnailCore.State;\n}\n"],"mappings":";;;;;;;;;AAuBA,MAAa,YAAY,WAA2C,SAAS,UAAU,gBAAgB,cAAc;CACnH,MAAM,EACJ,QACA,WACA,OACA,OAAO,GACP,YAAY,oBACZ,aACA,SACA,eACA,GAAG,iBACD;CAEJ,MAAM,CAAC,QAAQ,eAAe,IAAI,eAAe,CAAC;CAClD,MAAM,SAAS,OAAuB,KAAK;CAC3C,MAAM,SAAS,OAAyB,KAAK;CAC7C,MAAM,YAAY,kBAAkB,gBAAgB;CAGpD,MAAM,GAAG,kBAAkB,SAAS,EAAE;CAEtC,MAAM,CAAC,UAAU,eACf,gBAAgB;EACd,oBAAoB,OAAO;EAC3B,cAAc,OAAO;EACrB,qBAAqB,gBAAgB,MAAM,IAAI,EAAE;EAClD,CAAC,CACH;AAED,YAAW,cAAc,OAAO,SAAS,CAAC;CAG1C,MAAM,aAAa,cAAc;AAC/B,MAAI,sBAAsB,mBAAmB,SAAS,EAAG,QAAO;AAChE,SAAO,aAAa,UAAU,cAAc,SAAS,IACjD,oBAAoB,UAAU,eAAe,UAAU,qBAAqB,KAAA,EAAU,GACtF,EAAE;IACL,CAAC,oBAAoB,UAAU,CAAC;CAEnC,MAAM,YAAY,cAAc,KAAK,oBAAoB,YAAY,KAAK,EAAE;EAAC;EAAM;EAAY;EAAK,CAAC;AAGrG,QAAO,UAAU,WAAW,IAAI;CAEhC,MAAM,QAAQ,KAAK,SAAS,OAAO,SAAS,OAAO,OAAO,UAAU;CAGpE,IAAI,iBAAgC,EAAE,UAAU,UAAU;CAC1D,IAAI;AAEJ,KAAI,aAAa,OAAO,gBAAgB,OAAO,eAAe;EAC5D,MAAM,cAAc,OAAO,iBAAiB;EAC5C,MAAM,SAAS,KAAK,OAAO,WAAW,OAAO,cAAc,OAAO,eAAe,YAAY;AAE7F,MAAI,QAAQ;AACV,oBAAiB;IACf,UAAU;IACV,OAAO,OAAO;IACd,QAAQ,OAAO;IAChB;AACD,cAAW;IACT,OAAO,OAAO;IACd,QAAQ,OAAO;IACf,UAAU;IACV,WACE,OAAO,WAAW,OAAO,UAAU,cAAc,OAAO,QAAQ,OAAO,OAAO,QAAQ,OAAO,KAAA;IAChG;;;AAIL,QAAO,cACL,OACA;EAAE;EAAQ;EAAW;EAAO,EAC5B;EACE;EACA,cAAc;EACd,KAAK,CAAC,cAAc,OAAO;EAC3B,OAAO;GACL,KAAK,SAAS,MAAM;GACpB,EAAE,OAAO,gBAAgB;GACzB;GACA,EACE,UACE,oBAAC,OAAD;IACE,KAAK;IACL,KAAI;IACJ,eAAY;IACZ,UAAS;IACT,KAAK,WAAW;IAChB,aAAa,gBAAgB,MAAM,gBAAgB,OAAO,KAAA,IAAY;IAC7D;IACT,OAAO;IAEQ;IACf,CAAA,EAEL;GACF;EACF,CACF;EACD"}
+{"version":3,"file":"thumbnail.js","names":[],"sources":["../../../../src/ui/thumbnail/thumbnail.tsx"],"sourcesContent":["'use client';\n\nimport {\n  mapCuesToThumbnails,\n  ThumbnailCore,\n  ThumbnailDataAttrs,\n  type ThumbnailFetchPriority,\n  type ThumbnailImage,\n} from '@videojs/core';\nimport { createThumbnail, selectTextTrack } from '@videojs/core/dom';\nimport type { CSSProperties } from 'react';\nimport { forwardRef, useMemo, useRef, useState } from 'react';\n\nimport { useOptionalPlayer } from '../../player/context';\nimport type { UIComponentProps } from '../../utils/types';\nimport { useDestroy } from '../../utils/use-destroy';\nimport { renderElement } from '../../utils/use-render';\n\nexport interface ThumbnailProps extends UIComponentProps<'div', ThumbnailCore.State>, ThumbnailCore.Props {\n  /** Pre-parsed thumbnail images — bypasses the automatic `<track>` detection. */\n  thumbnails?: ThumbnailImage[] | undefined;\n}\n\nexport const Thumbnail = forwardRef<HTMLDivElement, ThumbnailProps>(function Thumbnail(componentProps, forwardedRef) {\n  const {\n    render,\n    className,\n    style,\n    time = 0,\n    thumbnails: externalThumbnails,\n    crossOrigin,\n    loading,\n    fetchPriority,\n    ...elementProps\n  } = componentProps;\n\n  const [core] = useState(() => new ThumbnailCore());\n  const divRef = useRef<HTMLDivElement>(null);\n  const imgRef = useRef<HTMLImageElement>(null);\n  const textTrack = useOptionalPlayer(selectTextTrack);\n\n  // Force re-render when the handle's state changes (img load/error, resize).\n  const [, setRenderToken] = useState(0);\n\n  const [handle] = useState(() =>\n    createThumbnail({\n      getContainer: () => divRef.current,\n      getImg: () => imgRef.current,\n      onStateChange: () => setRenderToken((n) => n + 1),\n    })\n  );\n\n  useDestroy(handle, () => handle.connect());\n\n  // Resolve thumbnails: external prop takes priority over auto <track> path.\n  const thumbnails = useMemo(() => {\n    if (externalThumbnails && externalThumbnails.length > 0) return externalThumbnails;\n    return textTrack && textTrack.thumbnailCues.length > 0\n      ? mapCuesToThumbnails(textTrack.thumbnailCues, textTrack.thumbnailTrackSrc ?? undefined)\n      : [];\n  }, [externalThumbnails, textTrack]);\n\n  const thumbnail = useMemo(() => core.findActiveThumbnail(thumbnails, time), [core, thumbnails, time]);\n\n  // Track src changes via the handle.\n  handle.updateSrc(thumbnail?.url);\n\n  const state = core.getState(handle.loading, handle.error, thumbnail);\n\n  // Compute styles declaratively from resize result.\n  let containerStyle: CSSProperties = { overflow: 'hidden' };\n  let imgStyle: CSSProperties | undefined;\n\n  if (thumbnail && handle.naturalWidth && handle.naturalHeight) {\n    const constraints = handle.readConstraints();\n    const result = core.resize(thumbnail, handle.naturalWidth, handle.naturalHeight, constraints);\n\n    if (result) {\n      containerStyle = {\n        overflow: 'hidden',\n        width: result.containerWidth,\n        height: result.containerHeight,\n      };\n      imgStyle = {\n        width: result.imageWidth,\n        height: result.imageHeight,\n        maxWidth: 'none',\n        transform:\n          result.offsetX || result.offsetY ? `translate(-${result.offsetX}px, -${result.offsetY}px)` : undefined,\n      };\n    }\n  }\n\n  return renderElement(\n    'div',\n    { render, className, style },\n    {\n      state,\n      stateAttrMap: ThumbnailDataAttrs,\n      ref: [forwardedRef, divRef],\n      props: [\n        core.getAttrs(state),\n        { style: containerStyle },\n        elementProps,\n        {\n          children: (\n            <img\n              ref={imgRef}\n              alt=\"\"\n              aria-hidden=\"true\"\n              decoding=\"async\"\n              src={thumbnail?.url}\n              crossOrigin={crossOrigin === '' || crossOrigin === null ? undefined : crossOrigin}\n              loading={loading}\n              style={imgStyle}\n              // React's types omit `| undefined` from fetchPriority — cast to satisfy exactOptionalPropertyTypes.\n              fetchPriority={fetchPriority as ThumbnailFetchPriority}\n            />\n          ),\n        },\n      ],\n    }\n  );\n});\n\nexport namespace Thumbnail {\n  export type Props = ThumbnailProps;\n  export type State = ThumbnailCore.State;\n}\n"],"mappings":";;;;;;;;;AAuBA,MAAa,YAAY,WAA2C,SAAS,UAAU,gBAAgB,cAAc;CACnH,MAAM,EACJ,QACA,WACA,OACA,OAAO,GACP,YAAY,oBACZ,aACA,SACA,eACA,GAAG,iBACD;CAEJ,MAAM,CAAC,QAAQ,eAAe,IAAI,cAAc,CAAC;CACjD,MAAM,SAAS,OAAuB,IAAI;CAC1C,MAAM,SAAS,OAAyB,IAAI;CAC5C,MAAM,YAAY,kBAAkB,eAAe;CAGnD,MAAM,GAAG,kBAAkB,SAAS,CAAC;CAErC,MAAM,CAAC,UAAU,eACf,gBAAgB;EACd,oBAAoB,OAAO;EAC3B,cAAc,OAAO;EACrB,qBAAqB,gBAAgB,MAAM,IAAI,CAAC;CAClD,CAAC,CACH;CAEA,WAAW,cAAc,OAAO,QAAQ,CAAC;CAGzC,MAAM,aAAa,cAAc;EAC/B,IAAI,sBAAsB,mBAAmB,SAAS,GAAG,OAAO;EAChE,OAAO,aAAa,UAAU,cAAc,SAAS,IACjD,oBAAoB,UAAU,eAAe,UAAU,qBAAqB,KAAA,CAAS,IACrF,CAAC;CACP,GAAG,CAAC,oBAAoB,SAAS,CAAC;CAElC,MAAM,YAAY,cAAc,KAAK,oBAAoB,YAAY,IAAI,GAAG;EAAC;EAAM;EAAY;CAAI,CAAC;CAGpG,OAAO,UAAU,WAAW,GAAG;CAE/B,MAAM,QAAQ,KAAK,SAAS,OAAO,SAAS,OAAO,OAAO,SAAS;CAGnE,IAAI,iBAAgC,EAAE,UAAU,SAAS;CACzD,IAAI;CAEJ,IAAI,aAAa,OAAO,gBAAgB,OAAO,eAAe;EAC5D,MAAM,cAAc,OAAO,gBAAgB;EAC3C,MAAM,SAAS,KAAK,OAAO,WAAW,OAAO,cAAc,OAAO,eAAe,WAAW;EAE5F,IAAI,QAAQ;GACV,iBAAiB;IACf,UAAU;IACV,OAAO,OAAO;IACd,QAAQ,OAAO;GACjB;GACA,WAAW;IACT,OAAO,OAAO;IACd,QAAQ,OAAO;IACf,UAAU;IACV,WACE,OAAO,WAAW,OAAO,UAAU,cAAc,OAAO,QAAQ,OAAO,OAAO,QAAQ,OAAO,KAAA;GACjG;EACF;CACF;CAEA,OAAO,cACL,OACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EACE;EACA,cAAc;EACd,KAAK,CAAC,cAAc,MAAM;EAC1B,OAAO;GACL,KAAK,SAAS,KAAK;GACnB,EAAE,OAAO,eAAe;GACxB;GACA,EACE,UACE,oBAAC,OAAD;IACE,KAAK;IACL,KAAI;IACJ,eAAY;IACZ,UAAS;IACT,KAAK,WAAW;IAChB,aAAa,gBAAgB,MAAM,gBAAgB,OAAO,KAAA,IAAY;IAC7D;IACT,OAAO;IAEQ;GAChB,CAAA,EAEL;EACF;CACF,CACF;AACF,CAAC"}

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

@@ -9,6 +9,6 @@ var index_parts_exports = /* @__PURE__ */ __exportAll({
 	Value: () => Value
 });
 //#endregion
-export { index_parts_exports };
+export { Group, Separator, Value, index_parts_exports };
 
 //# sourceMappingURL=index.parts.js.map

package/dist/default/ui/time/time-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"time-group.js","names":[],"sources":["../../../../src/ui/time/time-group.tsx"],"sourcesContent":["'use client';\n\nimport type { ForwardedRef, ReactNode } from 'react';\nimport { forwardRef } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\n\n// Empty state for Group (no dynamic state)\ntype GroupState = Record<string, never>;\n\nexport interface GroupProps extends UIComponentProps<'span', GroupState> {\n  /** Time value components to render inside the group. */\n  children?: ReactNode | undefined;\n}\n\n/**\n * Container for composed time displays. Renders a `<span>` element.\n *\n * @example\n * ```tsx\n * <Time.Group>\n *   <Time.Value type=\"current\" />\n *   <Time.Separator />\n *   <Time.Value type=\"duration\" />\n * </Time.Group>\n * ```\n */\nexport const Group = forwardRef(function Group(\n  componentProps: GroupProps,\n  forwardedRef: ForwardedRef<HTMLSpanElement>\n) {\n  const { render, className, style, children, ...elementProps } = componentProps;\n\n  const state: GroupState = {};\n\n  return renderElement(\n    'span',\n    { render, className, style },\n    {\n      state,\n      ref: [forwardedRef],\n      props: [{ children }, elementProps],\n    }\n  );\n});\n\nexport namespace Group {\n  export type Props = GroupProps;\n}\n"],"mappings":";;;;;;;;;;;;;;;;AA4BA,MAAa,QAAQ,WAAW,SAAS,MACvC,gBACA,cACA;CACA,MAAM,EAAE,QAAQ,WAAW,OAAO,UAAU,GAAG,iBAAiB;AAIhE,QAAO,cACL,QACA;EAAE;EAAQ;EAAW;EAAO,EAC5B;EACE,OANsB,EAAE;EAOxB,KAAK,CAAC,aAAa;EACnB,OAAO,CAAC,EAAE,UAAU,EAAE,aAAa;EACpC,CACF;EACD"}
+{"version":3,"file":"time-group.js","names":[],"sources":["../../../../src/ui/time/time-group.tsx"],"sourcesContent":["'use client';\n\nimport type { ForwardedRef, ReactNode } from 'react';\nimport { forwardRef } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\n\n// Empty state for Group (no dynamic state)\ntype GroupState = Record<string, never>;\n\nexport interface GroupProps extends UIComponentProps<'span', GroupState> {\n  /** Time value components to render inside the group. */\n  children?: ReactNode | undefined;\n}\n\n/**\n * Container for composed time displays. Renders a `<span>` element.\n *\n * @example\n * ```tsx\n * <Time.Group>\n *   <Time.Value type=\"current\" />\n *   <Time.Separator />\n *   <Time.Value type=\"duration\" />\n * </Time.Group>\n * ```\n */\nexport const Group = forwardRef(function Group(\n  componentProps: GroupProps,\n  forwardedRef: ForwardedRef<HTMLSpanElement>\n) {\n  const { render, className, style, children, ...elementProps } = componentProps;\n\n  const state: GroupState = {};\n\n  return renderElement(\n    'span',\n    { render, className, style },\n    {\n      state,\n      ref: [forwardedRef],\n      props: [{ children }, elementProps],\n    }\n  );\n});\n\nexport namespace Group {\n  export type Props = GroupProps;\n}\n"],"mappings":";;;;;;;;;;;;;;;;AA4BA,MAAa,QAAQ,WAAW,SAAS,MACvC,gBACA,cACA;CACA,MAAM,EAAE,QAAQ,WAAW,OAAO,UAAU,GAAG,iBAAiB;CAIhE,OAAO,cACL,QACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EACE,OAAA,CAAI;EACJ,KAAK,CAAC,YAAY;EAClB,OAAO,CAAC,EAAE,SAAS,GAAG,YAAY;CACpC,CACF;AACF,CAAC"}

package/dist/default/ui/time/time-separator.js.map

@@ -1 +1 @@
-{"version":3,"file":"time-separator.js","names":[],"sources":["../../../../src/ui/time/time-separator.tsx"],"sourcesContent":["'use client';\n\nimport type { ForwardedRef, ReactNode } from 'react';\nimport { forwardRef } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\n\n// Empty state for Separator (no dynamic state)\ntype SeparatorState = Record<string, never>;\n\nexport interface SeparatorProps extends UIComponentProps<'span', SeparatorState> {\n  /** Separator content. Defaults to \"/\". */\n  children?: ReactNode | undefined;\n}\n\n/**\n * Divider between time values. Hidden from screen readers.\n *\n * @example\n * ```tsx\n * <Time.Separator />\n * <Time.Separator> of </Time.Separator>\n * ```\n */\nexport const Separator = forwardRef(function Separator(\n  componentProps: SeparatorProps,\n  forwardedRef: ForwardedRef<HTMLSpanElement>\n) {\n  const { render, className, style, children = '/', ...elementProps } = componentProps;\n\n  const state: SeparatorState = {};\n\n  return renderElement(\n    'span',\n    { render, className, style },\n    {\n      state,\n      ref: [forwardedRef],\n      props: [{ 'aria-hidden': 'true', children }, elementProps],\n    }\n  );\n});\n\nexport namespace Separator {\n  export type Props = SeparatorProps;\n}\n"],"mappings":";;;;;;;;;;;;;AAyBA,MAAa,YAAY,WAAW,SAAS,UAC3C,gBACA,cACA;CACA,MAAM,EAAE,QAAQ,WAAW,OAAO,WAAW,KAAK,GAAG,iBAAiB;AAItE,QAAO,cACL,QACA;EAAE;EAAQ;EAAW;EAAO,EAC5B;EACE,OAN0B,EAAE;EAO5B,KAAK,CAAC,aAAa;EACnB,OAAO,CAAC;GAAE,eAAe;GAAQ;GAAU,EAAE,aAAa;EAC3D,CACF;EACD"}
+{"version":3,"file":"time-separator.js","names":[],"sources":["../../../../src/ui/time/time-separator.tsx"],"sourcesContent":["'use client';\n\nimport type { ForwardedRef, ReactNode } from 'react';\nimport { forwardRef } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\n\n// Empty state for Separator (no dynamic state)\ntype SeparatorState = Record<string, never>;\n\nexport interface SeparatorProps extends UIComponentProps<'span', SeparatorState> {\n  /** Separator content. Defaults to \"/\". */\n  children?: ReactNode | undefined;\n}\n\n/**\n * Divider between time values. Hidden from screen readers.\n *\n * @example\n * ```tsx\n * <Time.Separator />\n * <Time.Separator> of </Time.Separator>\n * ```\n */\nexport const Separator = forwardRef(function Separator(\n  componentProps: SeparatorProps,\n  forwardedRef: ForwardedRef<HTMLSpanElement>\n) {\n  const { render, className, style, children = '/', ...elementProps } = componentProps;\n\n  const state: SeparatorState = {};\n\n  return renderElement(\n    'span',\n    { render, className, style },\n    {\n      state,\n      ref: [forwardedRef],\n      props: [{ 'aria-hidden': 'true', children }, elementProps],\n    }\n  );\n});\n\nexport namespace Separator {\n  export type Props = SeparatorProps;\n}\n"],"mappings":";;;;;;;;;;;;;AAyBA,MAAa,YAAY,WAAW,SAAS,UAC3C,gBACA,cACA;CACA,MAAM,EAAE,QAAQ,WAAW,OAAO,WAAW,KAAK,GAAG,iBAAiB;CAItE,OAAO,cACL,QACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EACE,OAAA,CAAI;EACJ,KAAK,CAAC,YAAY;EAClB,OAAO,CAAC;GAAE,eAAe;GAAQ;EAAS,GAAG,YAAY;CAC3D,CACF;AACF,CAAC"}

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

@@ -1,11 +1,15 @@
 "use client";
+import { useLocale, useTranslator } from "../../i18n/context.js";
 import { usePlayer } from "../../player/context.js";
 import { renderElement } from "../../utils/use-render.js";
 import { selectTime } from "@videojs/core/dom";
+import { translateText } from "@videojs/core/i18n";
 import { forwardRef, useEffect, useState } from "react";
+import { isInteractiveActivation } from "@videojs/utils/dom";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { TimeCore, TimeDataAttrs } from "@videojs/core";
-import { isInteractiveActivation } from "@videojs/utils/dom";
+import { remainingSuffixText } from "@videojs/core/i18n/text/time";
+import { formatTimeAsPhrase } from "@videojs/utils/time";
 //#region src/ui/time/time-value.tsx
 /**
 * Displays a formatted time value (current, duration, or remaining).
@@ -20,6 +24,8 @@ import { isInteractiveActivation } from "@videojs/utils/dom";
 const Value = forwardRef(function Value(componentProps, forwardedRef) {
 	const { render, className, style, type, negativeSign, label, toggle = false, ...elementProps } = componentProps;
 	const time = usePlayer(selectTime);
+	const translator = useTranslator();
+	const locale = useLocale();
 	const [core] = useState(() => new TimeCore());
 	const defaultType = type ?? TimeCore.defaultProps.type;
 	const [activeType, setActiveType] = useState(defaultType);
@@ -35,6 +41,8 @@ const Value = forwardRef(function Value(componentProps, forwardedRef) {
 	if (!time) return null;
 	core.setMedia(time);
 	const state = core.getState();
+	const attrs = core.getAttrs(state, defaultType);
+	const resolvedLabelParams = core.getLabelParams(state) ? { duration: state.type === "remaining" ? translateText(remainingSuffixText, translator, { duration: formatTimeAsPhrase(Math.abs(state.seconds), { locale }) }) : formatTimeAsPhrase(Math.abs(state.seconds), { locale }) } : void 0;
 	const content = state.negative ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
 		"aria-hidden": "true",
 		children: negativeSign ?? TimeCore.defaultProps.negativeSign
@@ -66,7 +74,8 @@ const Value = forwardRef(function Value(componentProps, forwardedRef) {
 		props: [{
 			dateTime: state.datetime,
 			children: content,
-			...core.getAttrs(state, defaultType),
+			...attrs,
+			"aria-label": translateText(attrs["aria-label"], translator, resolvedLabelParams),
 			...toggle ? {
 				onClick: handleClick,
 				onKeyDown: handleKeyDown

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

@@ -1 +1 @@
-{"version":3,"file":"time-value.js","names":[],"sources":["../../../../src/ui/time/time-value.tsx"],"sourcesContent":["'use client';\n\nimport { TimeCore, TimeDataAttrs } from '@videojs/core';\nimport { logMissingFeature, selectTime } from '@videojs/core/dom';\nimport { isInteractiveActivation } from '@videojs/utils/dom';\nimport type { ForwardedRef, KeyboardEvent, MouseEvent } from 'react';\nimport { forwardRef, useEffect, useState } from 'react';\nimport { usePlayer } from '../../player/context';\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\n\nexport interface ValueProps extends Omit<UIComponentProps<'time', TimeCore.State>, 'children'>, TimeCore.Props {}\n\n/**\n * Displays a formatted time value (current, duration, or remaining).\n *\n * @example\n * ```tsx\n * <Time.Value />\n * <Time.Value type=\"duration\" />\n * <Time.Value type=\"remaining\" negativeSign=\"−\" />\n * ```\n */\nexport const Value = forwardRef(function Value(\n  componentProps: ValueProps,\n  forwardedRef: ForwardedRef<HTMLTimeElement>\n) {\n  const { render, className, style, type, negativeSign, label, toggle = false, ...elementProps } = componentProps;\n\n  const time = usePlayer(selectTime);\n  const [core] = useState(() => new TimeCore());\n\n  const defaultType = type ?? TimeCore.defaultProps.type;\n  const [activeType, setActiveType] = useState(defaultType);\n  // biome-ignore lint/correctness/useExhaustiveDependencies: We want to listen for changes to defaultType and toggle (so we revert to default), this just means one less useEffect.\n  useEffect(() => {\n    setActiveType(defaultType);\n  }, [defaultType, toggle]);\n\n  core.setProps({ type: activeType, negativeSign, label, toggle });\n\n  if (!time) {\n    if (__DEV__) logMissingFeature('Time.Value', 'time');\n    return null;\n  }\n\n  core.setMedia(time);\n  const state = core.getState();\n\n  const content = state.negative ? (\n    <>\n      <span aria-hidden=\"true\">{negativeSign ?? TimeCore.defaultProps.negativeSign}</span>\n      {state.text}\n    </>\n  ) : (\n    state.text\n  );\n\n  const toggleType = () => {\n    setActiveType((value) => {\n      if (defaultType === 'current') {\n        return value === 'remaining' ? 'current' : 'remaining';\n      }\n      return value === 'duration' ? 'remaining' : 'duration';\n    });\n  };\n\n  const handleClick = (event: MouseEvent<HTMLTimeElement>) => {\n    if (event.defaultPrevented) return;\n    toggleType();\n  };\n\n  const handleKeyDown = (event: KeyboardEvent<HTMLTimeElement>) => {\n    if (event.defaultPrevented || !isInteractiveActivation(event.nativeEvent)) return;\n    // Prevent space from scrolling page.\n    event.preventDefault();\n    if (event.repeat) return;\n    toggleType();\n  };\n\n  return renderElement(\n    'time',\n    { render, className, style },\n    {\n      state,\n      stateAttrMap: TimeDataAttrs,\n      ref: [forwardedRef],\n      props: [\n        {\n          dateTime: state.datetime,\n          children: content,\n          ...core.getAttrs(state, defaultType),\n          ...(toggle ? { onClick: handleClick, onKeyDown: handleKeyDown } : undefined),\n        },\n        elementProps,\n      ],\n    }\n  );\n});\n\nexport namespace Value {\n  export type Props = ValueProps;\n  export type State = TimeCore.State;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAuBA,MAAa,QAAQ,WAAW,SAAS,MACvC,gBACA,cACA;CACA,MAAM,EAAE,QAAQ,WAAW,OAAO,MAAM,cAAc,OAAO,SAAS,OAAO,GAAG,iBAAiB;CAEjG,MAAM,OAAO,UAAU,WAAW;CAClC,MAAM,CAAC,QAAQ,eAAe,IAAI,UAAU,CAAC;CAE7C,MAAM,cAAc,QAAQ,SAAS,aAAa;CAClD,MAAM,CAAC,YAAY,iBAAiB,SAAS,YAAY;AAEzD,iBAAgB;AACd,gBAAc,YAAY;IACzB,CAAC,aAAa,OAAO,CAAC;AAEzB,MAAK,SAAS;EAAE,MAAM;EAAY;EAAc;EAAO;EAAQ,CAAC;AAEhE,KAAI,CAAC,KAEH,QAAO;AAGT,MAAK,SAAS,KAAK;CACnB,MAAM,QAAQ,KAAK,UAAU;CAE7B,MAAM,UAAU,MAAM,WACpB,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,QAAD;EAAM,eAAY;YAAQ,gBAAgB,SAAS,aAAa;EAAoB,CAAA,EACnF,MAAM,KACN,EAAA,CAAA,GAEH,MAAM;CAGR,MAAM,mBAAmB;AACvB,iBAAe,UAAU;AACvB,OAAI,gBAAgB,UAClB,QAAO,UAAU,cAAc,YAAY;AAE7C,UAAO,UAAU,aAAa,cAAc;IAC5C;;CAGJ,MAAM,eAAe,UAAuC;AAC1D,MAAI,MAAM,iBAAkB;AAC5B,cAAY;;CAGd,MAAM,iBAAiB,UAA0C;AAC/D,MAAI,MAAM,oBAAoB,CAAC,wBAAwB,MAAM,YAAY,CAAE;AAE3E,QAAM,gBAAgB;AACtB,MAAI,MAAM,OAAQ;AAClB,cAAY;;AAGd,QAAO,cACL,QACA;EAAE;EAAQ;EAAW;EAAO,EAC5B;EACE;EACA,cAAc;EACd,KAAK,CAAC,aAAa;EACnB,OAAO,CACL;GACE,UAAU,MAAM;GAChB,UAAU;GACV,GAAG,KAAK,SAAS,OAAO,YAAY;GACpC,GAAI,SAAS;IAAE,SAAS;IAAa,WAAW;IAAe,GAAG,KAAA;GACnE,EACD,aACD;EACF,CACF;EACD"}
+{"version":3,"file":"time-value.js","names":[],"sources":["../../../../src/ui/time/time-value.tsx"],"sourcesContent":["'use client';\n\nimport { TimeCore, TimeDataAttrs } from '@videojs/core';\nimport { logMissingFeature, selectTime } from '@videojs/core/dom';\nimport { translateText } from '@videojs/core/i18n';\nimport { remainingSuffixText } from '@videojs/core/i18n/text/time';\nimport { isInteractiveActivation } from '@videojs/utils/dom';\nimport { formatTimeAsPhrase } from '@videojs/utils/time';\nimport type { ForwardedRef, KeyboardEvent, MouseEvent } from 'react';\nimport { forwardRef, useEffect, useState } from 'react';\n\nimport { useLocale, useTranslator } from '../../i18n/context';\nimport { usePlayer } from '../../player/context';\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\n\nexport interface ValueProps extends Omit<UIComponentProps<'time', TimeCore.State>, 'children'>, TimeCore.Props {}\n\n/**\n * Displays a formatted time value (current, duration, or remaining).\n *\n * @example\n * ```tsx\n * <Time.Value />\n * <Time.Value type=\"duration\" />\n * <Time.Value type=\"remaining\" negativeSign=\"−\" />\n * ```\n */\nexport const Value = forwardRef(function Value(\n  componentProps: ValueProps,\n  forwardedRef: ForwardedRef<HTMLTimeElement>\n) {\n  const { render, className, style, type, negativeSign, label, toggle = false, ...elementProps } = componentProps;\n\n  const time = usePlayer(selectTime);\n  const translator = useTranslator();\n  const locale = useLocale();\n\n  const [core] = useState(() => new TimeCore());\n\n  const defaultType = type ?? TimeCore.defaultProps.type;\n  const [activeType, setActiveType] = useState(defaultType);\n  // biome-ignore lint/correctness/useExhaustiveDependencies: We want to listen for changes to defaultType and toggle (so we revert to default), this just means one less useEffect.\n  useEffect(() => {\n    setActiveType(defaultType);\n  }, [defaultType, toggle]);\n\n  core.setProps({\n    type: activeType,\n    negativeSign,\n    label,\n    toggle,\n  });\n\n  if (!time) {\n    if (__DEV__) logMissingFeature('Time.Value', 'time');\n    return null;\n  }\n\n  core.setMedia(time);\n  const state = core.getState();\n  const attrs = core.getAttrs(state, defaultType);\n  const labelParams = core.getLabelParams(state);\n  const resolvedLabelParams = labelParams\n    ? {\n        duration:\n          state.type === 'remaining'\n            ? translateText(remainingSuffixText, translator, {\n                duration: formatTimeAsPhrase(Math.abs(state.seconds), { locale }),\n              })\n            : formatTimeAsPhrase(Math.abs(state.seconds), { locale }),\n      }\n    : undefined;\n\n  const content = state.negative ? (\n    <>\n      <span aria-hidden=\"true\">{negativeSign ?? TimeCore.defaultProps.negativeSign}</span>\n      {state.text}\n    </>\n  ) : (\n    state.text\n  );\n\n  const toggleType = () => {\n    setActiveType((value) => {\n      if (defaultType === 'current') {\n        return value === 'remaining' ? 'current' : 'remaining';\n      }\n      return value === 'duration' ? 'remaining' : 'duration';\n    });\n  };\n\n  const handleClick = (event: MouseEvent<HTMLTimeElement>) => {\n    if (event.defaultPrevented) return;\n    toggleType();\n  };\n\n  const handleKeyDown = (event: KeyboardEvent<HTMLTimeElement>) => {\n    if (event.defaultPrevented || !isInteractiveActivation(event.nativeEvent)) return;\n    // Prevent space from scrolling page.\n    event.preventDefault();\n    if (event.repeat) return;\n    toggleType();\n  };\n\n  return renderElement(\n    'time',\n    { render, className, style },\n    {\n      state,\n      stateAttrMap: TimeDataAttrs,\n      ref: [forwardedRef],\n      props: [\n        {\n          dateTime: state.datetime,\n          children: content,\n          ...attrs,\n          'aria-label': translateText(attrs['aria-label'], translator, resolvedLabelParams),\n          ...(toggle ? { onClick: handleClick, onKeyDown: handleKeyDown } : undefined),\n        },\n        elementProps,\n      ],\n    }\n  );\n});\n\nexport namespace Value {\n  export type Props = ValueProps;\n  export type State = TimeCore.State;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AA4BA,MAAa,QAAQ,WAAW,SAAS,MACvC,gBACA,cACA;CACA,MAAM,EAAE,QAAQ,WAAW,OAAO,MAAM,cAAc,OAAO,SAAS,OAAO,GAAG,iBAAiB;CAEjG,MAAM,OAAO,UAAU,UAAU;CACjC,MAAM,aAAa,cAAc;CACjC,MAAM,SAAS,UAAU;CAEzB,MAAM,CAAC,QAAQ,eAAe,IAAI,SAAS,CAAC;CAE5C,MAAM,cAAc,QAAQ,SAAS,aAAa;CAClD,MAAM,CAAC,YAAY,iBAAiB,SAAS,WAAW;CAExD,gBAAgB;EACd,cAAc,WAAW;CAC3B,GAAG,CAAC,aAAa,MAAM,CAAC;CAExB,KAAK,SAAS;EACZ,MAAM;EACN;EACA;EACA;CACF,CAAC;CAED,IAAI,CAAC,MAEH,OAAO;CAGT,KAAK,SAAS,IAAI;CAClB,MAAM,QAAQ,KAAK,SAAS;CAC5B,MAAM,QAAQ,KAAK,SAAS,OAAO,WAAW;CAE9C,MAAM,sBADc,KAAK,eAAe,KACF,IAClC,EACE,UACE,MAAM,SAAS,cACX,cAAc,qBAAqB,YAAY,EAC7C,UAAU,mBAAmB,KAAK,IAAI,MAAM,OAAO,GAAG,EAAE,OAAO,CAAC,EAClE,CAAC,IACD,mBAAmB,KAAK,IAAI,MAAM,OAAO,GAAG,EAAE,OAAO,CAAC,EAC9D,IACA,KAAA;CAEJ,MAAM,UAAU,MAAM,WACpB,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,QAAD;EAAM,eAAY;EAAQ,UAAA,gBAAgB,SAAS,aAAa;CAAmB,CAAA,GAClF,MAAM,IACP,EAAA,CAAA,IAEF,MAAM;CAGR,MAAM,mBAAmB;EACvB,eAAe,UAAU;GACvB,IAAI,gBAAgB,WAClB,OAAO,UAAU,cAAc,YAAY;GAE7C,OAAO,UAAU,aAAa,cAAc;EAC9C,CAAC;CACH;CAEA,MAAM,eAAe,UAAuC;EAC1D,IAAI,MAAM,kBAAkB;EAC5B,WAAW;CACb;CAEA,MAAM,iBAAiB,UAA0C;EAC/D,IAAI,MAAM,oBAAoB,CAAC,wBAAwB,MAAM,WAAW,GAAG;EAE3E,MAAM,eAAe;EACrB,IAAI,MAAM,QAAQ;EAClB,WAAW;CACb;CAEA,OAAO,cACL,QACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EACE;EACA,cAAc;EACd,KAAK,CAAC,YAAY;EAClB,OAAO,CACL;GACE,UAAU,MAAM;GAChB,UAAU;GACV,GAAG;GACH,cAAc,cAAc,MAAM,eAAe,YAAY,mBAAmB;GAChF,GAAI,SAAS;IAAE,SAAS;IAAa,WAAW;GAAc,IAAI,KAAA;EACpE,GACA,YACF;CACF,CACF;AACF,CAAC"}

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

@@ -17,6 +17,6 @@ var index_parts_exports = /* @__PURE__ */ __exportAll({
 	Value: () => SliderValue
 });
 //#endregion
-export { index_parts_exports };
+export { SliderBuffer as Buffer, SliderFill as Fill, SliderPreview as Preview, TimeSliderRoot as Root, SliderThumb as Thumb, SliderTrack as Track, SliderValue as Value, index_parts_exports };
 
 //# sourceMappingURL=index.parts.js.map