npm - @videojs/react - Versions diffs - 10.0.0-beta.30 → 10.0.0-beta.32 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1563) hide show

package/dist/dev/ui/time/time-separator.d.ts CHANGED Viewed

@@ -10,10 +10,10 @@ interface SeparatorProps extends UIComponentProps<'span', SeparatorState> {
  * Divider between time values. Hidden from screen readers.
  *
  * @example
- * ```tsx
- * <Time.Separator />
- * <Time.Separator> of </Time.Separator>
- * ```
+ *   ```tsx
+ *   <Time.Separator />
+ *   <Time.Separator> of </Time.Separator>
+ *   ```;
  */
 declare const Separator: import("react").ForwardRefExoticComponent<Omit<SeparatorProps, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
 declare namespace Separator {

package/dist/dev/ui/time/time-separator.js CHANGED Viewed

@@ -5,10 +5,10 @@ import { forwardRef } from "react";
 * Divider between time values. Hidden from screen readers.
 *
 * @example
-* ```tsx
-* <Time.Separator />
-* <Time.Separator> of </Time.Separator>
-* ```
+*   ```tsx
+*   <Time.Separator />
+*   <Time.Separator> of </Time.Separator>
+*   ```;
 */
 const Separator = forwardRef(function Separator(componentProps, forwardedRef) {
 	const { render, className, style, children = "/", ...elementProps } = componentProps;

package/dist/dev/ui/time/time-separator.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"time-separator.js","names":[],"sources":["../../../../src/ui/time/time-separator.tsx"],"sourcesContent":["import 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":";;;;;;;;;;;;AAuBA,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"}
1	+ {"version":3,"file":"time-separator.js","names":[],"sources":["../../../../src/ui/time/time-separator.tsx"],"sourcesContent":["import 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":";;;;;;;;;;;;AAuBA,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/dev/ui/time/time-value.d.ts CHANGED Viewed

@@ -6,11 +6,11 @@ interface ValueProps extends Omit<UIComponentProps<'time', TimeCore.State>, 'chi
  * Displays a formatted time value (current, duration, or remaining).
  *
  * @example
- * ```tsx
- * <Time.Value />
- * <Time.Value type="duration" />
- * <Time.Value type="remaining" negativeSign="−" />
- * ```
+ *   ```tsx
+ *   <Time.Value />
+ *   <Time.Value type="duration" />
+ *   <Time.Value type="remaining" negativeSign="−" />
+ *   ```;
  */
 declare const Value: import("react").ForwardRefExoticComponent<Omit<ValueProps, "ref"> & import("react").RefAttributes<HTMLTimeElement>>;
 declare namespace Value {

package/dist/dev/ui/time/time-value.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"time-value.d.ts","names":[],"sources":["../../../../src/ui/time/time-value.tsx"],"mappings":";;;UAciB,mBAAmB,KAAK,yBAAyB,SAAS,qBAAqB,SAAS;;;;;;;;;;;cAY5F,uBAAK,0BAAA,KAAA,qCAAA,cAAA;~~kBAwGD~~;OACH,QAAQ;OACR,QAAQ,SAAS"}
1	+ {"version":3,"file":"time-value.d.ts","names":[],"sources":["../../../../src/ui/time/time-value.tsx"],"mappings":";;;UAciB,mBAAmB,KAAK,yBAAyB,SAAS,qBAAqB,SAAS;;;;;;;;;;;cAY5F,uBAAK,0BAAA,KAAA,qCAAA,cAAA;kBAgHD;OACH,QAAQ;OACR,QAAQ,SAAS"}

package/dist/dev/ui/time/time-value.js CHANGED Viewed

@@ -14,11 +14,11 @@ import { formatTimeAsPhrase } from "@videojs/utils/time";
 * Displays a formatted time value (current, duration, or remaining).
 *
 * @example
-* ```tsx
-* <Time.Value />
-* <Time.Value type="duration" />
-* <Time.Value type="remaining" negativeSign="−" />
-* ```
+*   ```tsx
+*   <Time.Value />
+*   <Time.Value type="duration" />
+*   <Time.Value type="remaining" negativeSign="−" />
+*   ```;
 */
 const Value = forwardRef(function Value(componentProps, forwardedRef) {
 	const { render, className, style, type, negativeSign, label, toggle = false, ...elementProps } = componentProps;

package/dist/dev/ui/time/time-value.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"time-value.js","names":[],"sources":["../../../../src/ui/time/time-value.tsx"],"sourcesContent":["import { TimeCore, TimeDataAttrs } from '@videojs/core';\nimport { logMissingFeature, selectTime } from '@videojs/core/dom';\nimport { translateText } from '@videojs/core/i18n';\nimport { durationSuffixText, elapsedSuffixText, 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 core.setFormatLocale(locale);\n const state = core.getState();\n const attrs = core.getAttrs(state, defaultType);\n const labelParams = core.getLabelParams(state);\n const suffixText = {\n current: elapsedSuffixText,\n duration: durationSuffixText,\n remaining: remainingSuffixText,\n }[state.type];\n const resolvedLabelParams = labelParams\n ? {\n duration: translateText(suffixText, translator, {\n duration: formatTimeAsPhrase(Math.abs(state.seconds), { locale }),\n }),\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: toggle ? undefined : state.datetime,\n children: content,\n ...attrs,\n 'aria-label': translateText(attrs['aria-label'], translator, resolvedLabelParams),\n 'aria-description': attrs['aria-description']\n ? translateText(attrs['aria-description'], translator)\n : undefined,\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":";;;;;;;;;;;;;;;;;;;;;;AA0BA,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,MAAM;EACI,kBAAkB,cAAc,MAAM;~~EACnD~~,OAAO;CACT;CAEA,KAAK,SAAS,IAAI;CAClB,KAAK,gBAAgB,MAAM;CAC3B,MAAM,QAAQ,KAAK,SAAS;CAC5B,MAAM,QAAQ,KAAK,SAAS,OAAO,WAAW;CAC9C,MAAM,cAAc,KAAK,eAAe,KAAK;CAC7C,MAAM,aAAa;EACjB,SAAS;EACT,UAAU;EACV,WAAW;CACb,EAAE,MAAM;CACR,MAAM,sBAAsB,cACxB,EACE,UAAU,cAAc,YAAY,YAAY,EAC9C,UAAU,mBAAmB,KAAK,IAAI,MAAM,OAAO,GAAG,EAAE,OAAO,CAAC,EAClE,CAAC,EACH,IACA,KAAA;CAEJ,MAAM,UAAU,MAAM,WACpB,qBAAA,YAAA,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,SAAS,KAAA,IAAY,MAAM;GACrC,UAAU;GACV,GAAG;GACH,cAAc,cAAc,MAAM,eAAe,YAAY,mBAAmB;GAChF,oBAAoB,MAAM,sBACtB,cAAc,MAAM,qBAAqB,UAAU,IACnD,KAAA;GACJ,GAAI,SAAS;IAAE,SAAS;IAAa,WAAW;GAAc,IAAI,KAAA;EACpE,GACA,YACF;CACF,CACF;AACF,CAAC"}
1	+ {"version":3,"file":"time-value.js","names":[],"sources":["../../../../src/ui/time/time-value.tsx"],"sourcesContent":["import { TimeCore, TimeDataAttrs } from '@videojs/core';\nimport { logMissingFeature, selectTime } from '@videojs/core/dom';\nimport { translateText } from '@videojs/core/i18n';\nimport { durationSuffixText, elapsedSuffixText, 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\n // We want to listen for changes to defaultType and toggle (so we revert to default), this just means one less useEffect.\n // oxlint-disable-next-line react/exhaustive-deps\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\n return null;\n }\n\n core.setMedia(time);\n core.setFormatLocale(locale);\n const state = core.getState();\n const attrs = core.getAttrs(state, defaultType);\n const labelParams = core.getLabelParams(state);\n const suffixText = {\n current: elapsedSuffixText,\n duration: durationSuffixText,\n remaining: remainingSuffixText,\n }[state.type];\n const resolvedLabelParams = labelParams\n ? {\n duration: translateText(suffixText, translator, {\n duration: formatTimeAsPhrase(Math.abs(state.seconds), { locale }),\n }),\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\n return value === 'duration' ? 'remaining' : 'duration';\n });\n };\n\n const handleClick = (event: MouseEvent<HTMLTimeElement>) => {\n if (event.defaultPrevented) return;\n\n toggleType();\n };\n\n const handleKeyDown = (event: KeyboardEvent<HTMLTimeElement>) => {\n if (event.defaultPrevented \|\| !isInteractiveActivation(event.nativeEvent)) return;\n\n // Prevent space from scrolling page.\n event.preventDefault();\n\n if (event.repeat) return;\n\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: toggle ? undefined : state.datetime,\n children: content,\n ...attrs,\n 'aria-label': translateText(attrs['aria-label'], translator, resolvedLabelParams),\n 'aria-description': attrs['aria-description']\n ? translateText(attrs['aria-description'], translator)\n : undefined,\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":";;;;;;;;;;;;;;;;;;;;;;AA0BA,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;CAIxD,gBAAgB;EACd,cAAc,WAAW;CAC3B,GAAG,CAAC,aAAa,MAAM,CAAC;CAExB,KAAK,SAAS;EACZ,MAAM;EACN;EACA;EACA;CACF,CAAC;CAED,IAAI,CAAC,MAAM;EACI,kBAAkB,cAAc,MAAM;EAEnD,OAAO;CACT;CAEA,KAAK,SAAS,IAAI;CAClB,KAAK,gBAAgB,MAAM;CAC3B,MAAM,QAAQ,KAAK,SAAS;CAC5B,MAAM,QAAQ,KAAK,SAAS,OAAO,WAAW;CAC9C,MAAM,cAAc,KAAK,eAAe,KAAK;CAC7C,MAAM,aAAa;EACjB,SAAS;EACT,UAAU;EACV,WAAW;CACb,EAAE,MAAM;CACR,MAAM,sBAAsB,cACxB,EACE,UAAU,cAAc,YAAY,YAAY,EAC9C,UAAU,mBAAmB,KAAK,IAAI,MAAM,OAAO,GAAG,EAAE,OAAO,CAAC,EAClE,CAAC,EACH,IACA,KAAA;CAEJ,MAAM,UAAU,MAAM,WACpB,qBAAA,YAAA,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;GAG7C,OAAO,UAAU,aAAa,cAAc;EAC9C,CAAC;CACH;CAEA,MAAM,eAAe,UAAuC;EAC1D,IAAI,MAAM,kBAAkB;EAE5B,WAAW;CACb;CAEA,MAAM,iBAAiB,UAA0C;EAC/D,IAAI,MAAM,oBAAoB,CAAC,wBAAwB,MAAM,WAAW,GAAG;EAG3E,MAAM,eAAe;EAErB,IAAI,MAAM,QAAQ;EAElB,WAAW;CACb;CAEA,OAAO,cACL,QACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EACE;EACA,cAAc;EACd,KAAK,CAAC,YAAY;EAClB,OAAO,CACL;GACE,UAAU,SAAS,KAAA,IAAY,MAAM;GACrC,UAAU;GACV,GAAG;GACH,cAAc,cAAc,MAAM,eAAe,YAAY,mBAAmB;GAChF,oBAAoB,MAAM,sBACtB,cAAc,MAAM,qBAAqB,UAAU,IACnD,KAAA;GACJ,GAAI,SAAS;IAAE,SAAS;IAAa,WAAW;GAAc,IAAI,KAAA;EACpE,GACA,YACF;CACF,CACF;AACF,CAAC"}

package/dist/dev/ui/time-slider/time-slider-chapters/slider-segments.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"slider-segments.js","names":[],"sources":["../../../../../src/ui/time-slider/time-slider-chapters/slider-segments.tsx"],"sourcesContent":["import {\n type SliderSegmentRange,\n type SliderSegmentState,\n SliderSegmentsCore,\n TimeSliderChapterCSSVars,\n} from '@videojs/core';\nimport { getStateDataAttrs } from '@videojs/core/dom';\nimport type { CSSProperties, ReactElement } from 'react';\nimport { Fragment, forwardRef, useMemo, useState } from 'react';\n\nimport type { HTMLProps, UIComponentProps } from '../../../utils/types';\nimport { renderElement } from '../../../utils/use-render';\nimport { useSliderContext, useSliderPointerValue } from '../../slider/context';\n\ntype SegmentProps = Omit<HTMLProps<HTMLElement>, 'ref'>;\n\ninterface SliderSegmentsProps extends Omit<UIComponentProps<'div', SliderSegmentState>, 'children'> {\n ranges: readonly SliderSegmentRange[];\n min: number;\n max: number;\n renderSegment: (props: SegmentProps, state: SliderSegmentState) => ReactElement;\n}\n\n/** Private React adapter for rendering normalized numeric slider segments. */\nexport const SliderSegments = forwardRef<HTMLDivElement, SliderSegmentsProps>(\n function SliderSegments(componentProps, ref) {\n const { ranges, min, max, renderSegment, render, className, style, ...elementProps } = componentProps;\n const slider = useSliderContext();\n const pointerValue = useSliderPointerValue();\n const [core] = useState(() => new SliderSegmentsCore());\n const geometry = useMemo(\n () => core.getGeometry({ ranges, min, max, orientation: slider.state.orientation }),\n [core, ranges, min, max, slider.state.orientation]\n );\n const sliderAttrs = getStateDataAttrs(slider.state, slider.stateAttrMap);\n\n const segments = geometry.map((segment) => {\n const state = core.getState(segment, slider.state, pointerValue);\n const segmentStyle = {\n [TimeSliderChapterCSSVars.start]: state.startPercent,\n [TimeSliderChapterCSSVars.end]: state.endPercent,\n [TimeSliderChapterCSSVars.width]: state.width ?? state.height,\n [TimeSliderChapterCSSVars.fill]: `${state.fillPercent}%`,\n } as CSSProperties;\n\n return (\n <Fragment key={state.key}>\n {renderSegment(\n {\n ...sliderAttrs,\n style: segmentStyle,\n },\n state\n )}\n </Fragment>\n );\n });\n\n const state = geometry.length > 0 ? core.getState(geometry[0]!, slider.state, pointerValue) : null;\n if (!state) return null;\n\n return renderElement(\n 'div',\n { render, className, style },\n {\n state,\n ref,\n props: [{ 'aria-hidden': 'true' }, sliderAttrs, elementProps, { children: segments }],\n }\n );\n }\n);\n"],"mappings":";;;;;;;;AAwBA,MAAa,iBAAiB,WAC5B,SAAS,eAAe,gBAAgB,KAAK;CAC3C,MAAM,EAAE,QAAQ,KAAK,KAAK,eAAe,QAAQ,WAAW,OAAO,GAAG,iBAAiB;~~CACvF~~,MAAM,SAAS,iBAAiB;CAChC,MAAM,eAAe,sBAAsB;~~CAC3C~~,MAAM,CAAC,QAAQ,eAAe,IAAI,mBAAmB,CAAC;~~CACtD~~,MAAM,WAAW,cACT,KAAK,YAAY;EAAE;EAAQ;EAAK;EAAK,aAAa,OAAO,MAAM;CAAY,CAAC,GAClF;EAAC;EAAM;EAAQ;EAAK;EAAK,OAAO,MAAM;CAAW,CACnD;CACA,MAAM,cAAc,kBAAkB,OAAO,OAAO,OAAO,YAAY;CAEvE,MAAM,WAAW,SAAS,KAAK,YAAY;EACzC,MAAM,QAAQ,KAAK,SAAS,SAAS,OAAO,OAAO,YAAY;EAC/D,MAAM,eAAe;IAClB,yBAAyB,QAAQ,MAAM;IACvC,yBAAyB,MAAM,MAAM;IACrC,yBAAyB,QAAQ,MAAM,SAAS,MAAM;IACtD,yBAAyB,OAAO,GAAG,MAAM,YAAY;EACxD;EAEA,OACE,oBAAC,UAAD,EAAA,UACG,cACC;GACE,GAAG;GACH,OAAO;EACT,GACA,KACF,EACQ,GARK,MAAM,GAQX;CAEd,CAAC;CAED,MAAM,QAAQ,SAAS,SAAS,IAAI,KAAK,SAAS,SAAS,IAAK,OAAO,OAAO,YAAY,IAAI;CAC9F,IAAI,CAAC,OAAO,OAAO;CAEnB,OAAO,cACL,OACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EACE;EACA;EACA,OAAO;GAAC,EAAE,eAAe,OAAO;GAAG;GAAa;GAAc,EAAE,UAAU,SAAS;EAAC;CACtF,CACF;AACF,CACF"}
1	+ {"version":3,"file":"slider-segments.js","names":[],"sources":["../../../../../src/ui/time-slider/time-slider-chapters/slider-segments.tsx"],"sourcesContent":["import {\n type SliderSegmentRange,\n type SliderSegmentState,\n SliderSegmentsCore,\n TimeSliderChapterCSSVars,\n} from '@videojs/core';\nimport { getStateDataAttrs } from '@videojs/core/dom';\nimport type { CSSProperties, ReactElement } from 'react';\nimport { Fragment, forwardRef, useMemo, useState } from 'react';\n\nimport type { HTMLProps, UIComponentProps } from '../../../utils/types';\nimport { renderElement } from '../../../utils/use-render';\nimport { useSliderContext, useSliderPointerValue } from '../../slider/context';\n\ntype SegmentProps = Omit<HTMLProps<HTMLElement>, 'ref'>;\n\ninterface SliderSegmentsProps extends Omit<UIComponentProps<'div', SliderSegmentState>, 'children'> {\n ranges: readonly SliderSegmentRange[];\n min: number;\n max: number;\n renderSegment: (props: SegmentProps, state: SliderSegmentState) => ReactElement;\n}\n\n/** Private React adapter for rendering normalized numeric slider segments. */\nexport const SliderSegments = forwardRef<HTMLDivElement, SliderSegmentsProps>(\n function SliderSegments(componentProps, ref) {\n const { ranges, min, max, renderSegment, render, className, style, ...elementProps } = componentProps;\n\n const slider = useSliderContext();\n const pointerValue = useSliderPointerValue();\n\n const [core] = useState(() => new SliderSegmentsCore());\n\n const geometry = useMemo(\n () => core.getGeometry({ ranges, min, max, orientation: slider.state.orientation }),\n [core, ranges, min, max, slider.state.orientation]\n );\n const sliderAttrs = getStateDataAttrs(slider.state, slider.stateAttrMap);\n\n const segments = geometry.map((segment) => {\n const state = core.getState(segment, slider.state, pointerValue);\n const segmentStyle = {\n [TimeSliderChapterCSSVars.start]: state.startPercent,\n [TimeSliderChapterCSSVars.end]: state.endPercent,\n [TimeSliderChapterCSSVars.width]: state.width ?? state.height,\n [TimeSliderChapterCSSVars.fill]: `${state.fillPercent}%`,\n } as CSSProperties;\n\n return (\n <Fragment key={state.key}>\n {renderSegment(\n {\n ...sliderAttrs,\n style: segmentStyle,\n },\n state\n )}\n </Fragment>\n );\n });\n\n const state = geometry.length > 0 ? core.getState(geometry[0]!, slider.state, pointerValue) : null;\n if (!state) return null;\n\n return renderElement(\n 'div',\n { render, className, style },\n {\n state,\n ref,\n props: [{ 'aria-hidden': 'true' }, sliderAttrs, elementProps, { children: segments }],\n }\n );\n }\n);\n"],"mappings":";;;;;;;;AAwBA,MAAa,iBAAiB,WAC5B,SAAS,eAAe,gBAAgB,KAAK;CAC3C,MAAM,EAAE,QAAQ,KAAK,KAAK,eAAe,QAAQ,WAAW,OAAO,GAAG,iBAAiB;CAEvF,MAAM,SAAS,iBAAiB;CAChC,MAAM,eAAe,sBAAsB;CAE3C,MAAM,CAAC,QAAQ,eAAe,IAAI,mBAAmB,CAAC;CAEtD,MAAM,WAAW,cACT,KAAK,YAAY;EAAE;EAAQ;EAAK;EAAK,aAAa,OAAO,MAAM;CAAY,CAAC,GAClF;EAAC;EAAM;EAAQ;EAAK;EAAK,OAAO,MAAM;CAAW,CACnD;CACA,MAAM,cAAc,kBAAkB,OAAO,OAAO,OAAO,YAAY;CAEvE,MAAM,WAAW,SAAS,KAAK,YAAY;EACzC,MAAM,QAAQ,KAAK,SAAS,SAAS,OAAO,OAAO,YAAY;EAC/D,MAAM,eAAe;IAClB,yBAAyB,QAAQ,MAAM;IACvC,yBAAyB,MAAM,MAAM;IACrC,yBAAyB,QAAQ,MAAM,SAAS,MAAM;IACtD,yBAAyB,OAAO,GAAG,MAAM,YAAY;EACxD;EAEA,OACE,oBAAC,UAAD,EAAA,UACG,cACC;GACE,GAAG;GACH,OAAO;EACT,GACA,KACF,EACQ,GARK,MAAM,GAQX;CAEd,CAAC;CAED,MAAM,QAAQ,SAAS,SAAS,IAAI,KAAK,SAAS,SAAS,IAAK,OAAO,OAAO,YAAY,IAAI;CAC9F,IAAI,CAAC,OAAO,OAAO;CAEnB,OAAO,cACL,OACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EACE;EACA;EACA,OAAO;GAAC,EAAE,eAAe,OAAO;GAAG;GAAa;GAAc,EAAE,UAAU,SAAS;EAAC;CACtF,CACF;AACF,CACF"}

package/dist/dev/ui/time-slider/time-slider-chapters/time-slider-chapters.js CHANGED Viewed

@@ -3,8 +3,8 @@ import { SliderSegments } from "./slider-segments.js";
 import { getStateDataAttrs, selectBuffer, selectTextTrack, selectTime } from "@videojs/core/dom";
 import { forwardRef, useMemo, useState } from "react";
 import { jsx } from "react/jsx-runtime";
-import { isFunction } from "@videojs/utils/predicate";
 import { TimeSliderChapterCSSVars, TimeSliderChapterDataAttrs, TimeSliderChaptersCore } from "@videojs/core";
+import { isFunction } from "@videojs/utils/predicate";
 //#region src/ui/time-slider/time-slider-chapters/time-slider-chapters.tsx
 /** Renders normalized chapter ranges across the full slider, including one full range when chapter cues are absent. */
 const TimeSliderChapters = forwardRef(function TimeSliderChapters(componentProps, ref) {

package/dist/dev/ui/time-slider/time-slider-root.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"time-slider-root.d.ts","names":[],"sources":["../../../../src/ui/time-slider/time-slider-root.tsx"],"mappings":";;;UAgBiB,4BAA4B,wBAAwB,eAAe,QAAQ,eAAe;EACzG;EACA;;cAGW,gCAAc,0BAAA,KAAA,8CAAA,cAAA;~~kBAyIV~~;OACH,QAAQ;OACR,QAAQ,eAAe"}
1	+ {"version":3,"file":"time-slider-root.d.ts","names":[],"sources":["../../../../src/ui/time-slider/time-slider-root.tsx"],"mappings":";;;UAgBiB,4BAA4B,wBAAwB,eAAe,QAAQ,eAAe;EACzG;EACA;;cAGW,gCAAc,0BAAA,KAAA,8CAAA,cAAA;kBA+IV;OACH,QAAQ;OACR,QAAQ,eAAe"}

package/dist/dev/ui/time-slider/time-slider-root.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"time-slider-root.js","names":[],"sources":["../../../../src/ui/time-slider/time-slider-root.tsx"],"sourcesContent":["import { TimeSliderCore, TimeSliderDataAttrs } from '@videojs/core';\nimport { getTimeSliderCSSVars, logMissingFeature, selectBuffer, selectPlayback, selectTime } from '@videojs/core/dom';\nimport { translateText } from '@videojs/core/i18n';\nimport { formatTime } from '@videojs/utils/time';\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 { useLatestRef } from '../../utils/use-latest-ref';\nimport { renderElement } from '../../utils/use-render';\nimport { useSlider } from '../hooks/use-slider';\nimport { SliderProvider } from '../slider/context';\n\nconst noopSeek = (): Promise<number> => Promise.resolve(0);\n\nexport interface TimeSliderRootProps extends UIComponentProps<'div', TimeSliderCore.State>, TimeSliderCore.Props {\n onDragStart?: (() => void) \| undefined;\n onDragEnd?: (() => void) \| undefined;\n}\n\nexport const TimeSliderRoot = forwardRef<HTMLDivElement, TimeSliderRootProps>(\n function TimeSliderRoot(componentProps, forwardedRef) {\n const {\n render,\n className,\n style,\n label,\n changeThrottle = TimeSliderCore.defaultProps.changeThrottle,\n step = TimeSliderCore.defaultProps.step,\n largeStep = TimeSliderCore.defaultProps.largeStep,\n orientation,\n disabled,\n thumbAlignment,\n onDragStart,\n onDragEnd,\n pauseOnDrag,\n ...elementProps\n } = componentProps;\n\n const time = usePlayer(selectTime);\n const buffer = usePlayer(selectBuffer);\n const playback = usePlayer(selectPlayback);\n const translator = useTranslator();\n const locale = useLocale();\n\n const [core] = useState(() => new TimeSliderCore());\n core.setProps({\n label,\n step,\n largeStep,\n orientation,\n disabled,\n thumbAlignment,\n pauseOnDrag,\n changeThrottle,\n });\n core.setFormatLocale(locale);\n\n // Keep a ref to the latest media state for callbacks that fire outside the render cycle.\n const mediaRef = useLatestRef(time && buffer ? { ...time, ...buffer } : null);\n const playbackRef = useLatestRef(playback);\n\n // Resume playback if the slider unmounts mid-drag — createSlider's destroy()\n // does not fire onDragEnd, so without this the player would stay paused.\n useEffect(() => {\n return () => core.endDrag(playbackRef.current);\n }, [core]);\n\n const duration = time?.duration ?? 0;\n\n const { state, input, cssVars, rootRef, thumbRef, rootProps, rootStyle, thumbProps } =\n useSlider<TimeSliderCore.State>({\n computeState: (input) => {\n core.setInput(input);\n if (!time \|\| !buffer) {\n core.setMedia({\n currentTime: 0,\n duration: 0,\n seeking: false,\n seek: noopSeek,\n buffered: [],\n seekable: [],\n });\n } else {\n core.setMedia({ ...time, ...buffer });\n }\n\n return core.getState();\n },\n getPercent: () => core.percentFromValue(time?.currentTime ?? 0),\n getStepPercent: () => core.getStepPercent(),\n getLargeStepPercent: () => core.getLargeStepPercent(),\n orientation,\n disabled,\n changeThrottle,\n adjustPercent: (rawPercent, thumbSize, trackSize) =>\n core.adjustPercentForAlignment(rawPercent, thumbSize, trackSize),\n getCSSVars: getTimeSliderCSSVars,\n onValueCommit: (percent) => {\n const media = mediaRef.current;\n if (media) media.seek(core.rawValueFromPercent(percent));\n },\n onDragStart: () => {\n core.startDrag(playbackRef.current);\n onDragStart?.();\n },\n onDragEnd: () => {\n core.endDrag(playbackRef.current);\n onDragEnd?.();\n },\n });\n\n if (!time) {\n if (__DEV__) logMissingFeature('TimeSlider', 'time');\n return null;\n }\n\n return (\n <SliderProvider\n value={{\n state,\n pointerValue: core.rawValueFromPercent(state.pointerPercent),\n input,\n getPointerValue: (percent) => core.rawValueFromPercent(percent),\n thumbRef,\n thumbProps,\n stateAttrMap: TimeSliderDataAttrs,\n getAttrs: (sliderState) => {\n const attrs = core.getAttrs(sliderState as TimeSliderCore.State);\n return {\n ...attrs,\n 'aria-label': translateText(attrs['aria-label'], translator),\n 'aria-valuetext': translateText(\n attrs['aria-valuetext'],\n translator,\n core.getValueTextParams(sliderState as TimeSliderCore.State)\n ),\n };\n },\n formatValue: (value) => formatTime(value, duration, { locale }),\n }}\n >\n {renderElement(\n 'div',\n { render, className, style },\n {\n state,\n stateAttrMap: TimeSliderDataAttrs,\n ref: [forwardedRef, rootRef],\n props: [{ style: { ...cssVars, ...rootStyle } }, rootProps, elementProps],\n }\n )}\n </SliderProvider>\n );\n }\n);\n\nexport namespace TimeSliderRoot {\n export type Props = TimeSliderRootProps;\n export type State = TimeSliderCore.State;\n}\n"],"mappings":";;;;;;;;;;;;;AAcA,MAAM,iBAAkC,QAAQ,QAAQ,CAAC;AAOzD,MAAa,iBAAiB,WAC5B,SAAS,eAAe,gBAAgB,cAAc;CACpD,MAAM,EACJ,QACA,WACA,OACA,OACA,iBAAiB,eAAe,aAAa,gBAC7C,OAAO,eAAe,aAAa,MACnC,YAAY,eAAe,aAAa,WACxC,aACA,UACA,gBACA,aACA,WACA,aACA,GAAG,iBACD;CAEJ,MAAM,OAAO,UAAU,UAAU;CACjC,MAAM,SAAS,UAAU,YAAY;CACrC,MAAM,WAAW,UAAU,cAAc;~~CACzC~~,MAAM,aAAa,cAAc;CACjC,MAAM,SAAS,UAAU;CAEzB,MAAM,CAAC,QAAQ,eAAe,IAAI,eAAe,CAAC;~~CAClD~~,KAAK,SAAS;EACZ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CACD,KAAK,gBAAgB,MAAM;CAG3B,MAAM,WAAW,aAAa,QAAQ,SAAS;EAAE,GAAG;EAAM,GAAG;CAAO,IAAI,IAAI;CAC5E,MAAM,cAAc,aAAa,QAAQ;CAIzC,gBAAgB;EACd,aAAa,KAAK,QAAQ,YAAY,OAAO;CAC/C,GAAG,CAAC,IAAI,CAAC;CAET,MAAM,WAAW,MAAM,YAAY;CAEnC,MAAM,EAAE,OAAO,OAAO,SAAS,SAAS,UAAU,WAAW,WAAW,eACtE,UAAgC;EAC9B,eAAe,UAAU;GACvB,KAAK,SAAS,KAAK;~~GACnB~~,IAAI,CAAC,QAAQ,CAAC,QACZ,KAAK,SAAS;IACZ,aAAa;IACb,UAAU;IACV,SAAS;IACT,MAAM;IACN,UAAU,CAAC;IACX,UAAU,CAAC;GACb,CAAC;QAED,KAAK,SAAS;IAAE,GAAG;IAAM,GAAG;GAAO,CAAC;GAGtC,OAAO,KAAK,SAAS;EACvB;EACA,kBAAkB,KAAK,iBAAiB,MAAM,eAAe,CAAC;EAC9D,sBAAsB,KAAK,eAAe;EAC1C,2BAA2B,KAAK,oBAAoB;EACpD;EACA;EACA;EACA,gBAAgB,YAAY,WAAW,cACrC,KAAK,0BAA0B,YAAY,WAAW,SAAS;EACjE,YAAY;EACZ,gBAAgB,YAAY;GAC1B,MAAM,QAAQ,SAAS;~~GACvB~~,IAAI,OAAO,MAAM,KAAK,KAAK,oBAAoB,OAAO,CAAC;EACzD;EACA,mBAAmB;GACjB,KAAK,UAAU,YAAY,OAAO;GAClC,cAAc;EAChB;EACA,iBAAiB;GACf,KAAK,QAAQ,YAAY,OAAO;GAChC,YAAY;EACd;CACF,CAAC;CAEH,IAAI,CAAC,MAAM;EACI,kBAAkB,cAAc,MAAM;~~EACnD~~,OAAO;CACT;CAEA,OACE,oBAAC,gBAAD;EACE,OAAO;GACL;GACA,cAAc,KAAK,oBAAoB,MAAM,cAAc;GAC3D;GACA,kBAAkB,YAAY,KAAK,oBAAoB,OAAO;GAC9D;GACA;GACA,cAAc;GACd,WAAW,gBAAgB;IACzB,MAAM,QAAQ,KAAK,SAAS,WAAmC;~~IAC~~/D,OAAO;KACL,GAAG;KACH,cAAc,cAAc,MAAM,eAAe,UAAU;KAC3D,kBAAkB,cAChB,MAAM,mBACN,YACA,KAAK,mBAAmB,WAAmC,CAC7D;IACF;GACF;GACA,cAAc,UAAU,WAAW,OAAO,UAAU,EAAE,OAAO,CAAC;EAChE;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,CACF"}
1	+ {"version":3,"file":"time-slider-root.js","names":[],"sources":["../../../../src/ui/time-slider/time-slider-root.tsx"],"sourcesContent":["import { TimeSliderCore, TimeSliderDataAttrs } from '@videojs/core';\nimport { getTimeSliderCSSVars, logMissingFeature, selectBuffer, selectPlayback, selectTime } from '@videojs/core/dom';\nimport { translateText } from '@videojs/core/i18n';\nimport { formatTime } from '@videojs/utils/time';\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 { useLatestRef } from '../../utils/use-latest-ref';\nimport { renderElement } from '../../utils/use-render';\nimport { useSlider } from '../hooks/use-slider';\nimport { SliderProvider } from '../slider/context';\n\nconst noopSeek = (): Promise<number> => Promise.resolve(0);\n\nexport interface TimeSliderRootProps extends UIComponentProps<'div', TimeSliderCore.State>, TimeSliderCore.Props {\n onDragStart?: (() => void) \| undefined;\n onDragEnd?: (() => void) \| undefined;\n}\n\nexport const TimeSliderRoot = forwardRef<HTMLDivElement, TimeSliderRootProps>(\n function TimeSliderRoot(componentProps, forwardedRef) {\n const {\n render,\n className,\n style,\n label,\n changeThrottle = TimeSliderCore.defaultProps.changeThrottle,\n step = TimeSliderCore.defaultProps.step,\n largeStep = TimeSliderCore.defaultProps.largeStep,\n orientation,\n disabled,\n thumbAlignment,\n onDragStart,\n onDragEnd,\n pauseOnDrag,\n ...elementProps\n } = componentProps;\n\n const time = usePlayer(selectTime);\n const buffer = usePlayer(selectBuffer);\n const playback = usePlayer(selectPlayback);\n\n const translator = useTranslator();\n const locale = useLocale();\n\n const [core] = useState(() => new TimeSliderCore());\n\n core.setProps({\n label,\n step,\n largeStep,\n orientation,\n disabled,\n thumbAlignment,\n pauseOnDrag,\n changeThrottle,\n });\n core.setFormatLocale(locale);\n\n // Keep a ref to the latest media state for callbacks that fire outside the render cycle.\n const mediaRef = useLatestRef(time && buffer ? { ...time, ...buffer } : null);\n const playbackRef = useLatestRef(playback);\n\n // Resume playback if the slider unmounts mid-drag — createSlider's destroy()\n // does not fire onDragEnd, so without this the player would stay paused.\n useEffect(() => {\n return () => core.endDrag(playbackRef.current);\n }, [core]);\n\n const duration = time?.duration ?? 0;\n\n const { state, input, cssVars, rootRef, thumbRef, rootProps, rootStyle, thumbProps } =\n useSlider<TimeSliderCore.State>({\n computeState: (input) => {\n core.setInput(input);\n\n if (!time \|\| !buffer) {\n core.setMedia({\n currentTime: 0,\n duration: 0,\n seeking: false,\n seek: noopSeek,\n buffered: [],\n seekable: [],\n });\n } else {\n core.setMedia({ ...time, ...buffer });\n }\n\n return core.getState();\n },\n getPercent: () => core.percentFromValue(time?.currentTime ?? 0),\n getStepPercent: () => core.getStepPercent(),\n getLargeStepPercent: () => core.getLargeStepPercent(),\n orientation,\n disabled,\n changeThrottle,\n adjustPercent: (rawPercent, thumbSize, trackSize) =>\n core.adjustPercentForAlignment(rawPercent, thumbSize, trackSize),\n getCSSVars: getTimeSliderCSSVars,\n onValueCommit: (percent) => {\n const media = mediaRef.current;\n\n if (media) media.seek(core.rawValueFromPercent(percent));\n },\n onDragStart: () => {\n core.startDrag(playbackRef.current);\n onDragStart?.();\n },\n onDragEnd: () => {\n core.endDrag(playbackRef.current);\n onDragEnd?.();\n },\n });\n\n if (!time) {\n if (__DEV__) logMissingFeature('TimeSlider', 'time');\n\n return null;\n }\n\n return (\n <SliderProvider\n value={{\n state,\n pointerValue: core.rawValueFromPercent(state.pointerPercent),\n input,\n getPointerValue: (percent) => core.rawValueFromPercent(percent),\n thumbRef,\n thumbProps,\n stateAttrMap: TimeSliderDataAttrs,\n getAttrs: (sliderState) => {\n const attrs = core.getAttrs(sliderState as TimeSliderCore.State);\n\n return {\n ...attrs,\n 'aria-label': translateText(attrs['aria-label'], translator),\n 'aria-valuetext': translateText(\n attrs['aria-valuetext'],\n translator,\n core.getValueTextParams(sliderState as TimeSliderCore.State)\n ),\n };\n },\n formatValue: (value) => formatTime(value, duration, { locale }),\n }}\n >\n {renderElement(\n 'div',\n { render, className, style },\n {\n state,\n stateAttrMap: TimeSliderDataAttrs,\n ref: [forwardedRef, rootRef],\n props: [{ style: { ...cssVars, ...rootStyle } }, rootProps, elementProps],\n }\n )}\n </SliderProvider>\n );\n }\n);\n\nexport namespace TimeSliderRoot {\n export type Props = TimeSliderRootProps;\n export type State = TimeSliderCore.State;\n}\n"],"mappings":";;;;;;;;;;;;;AAcA,MAAM,iBAAkC,QAAQ,QAAQ,CAAC;AAOzD,MAAa,iBAAiB,WAC5B,SAAS,eAAe,gBAAgB,cAAc;CACpD,MAAM,EACJ,QACA,WACA,OACA,OACA,iBAAiB,eAAe,aAAa,gBAC7C,OAAO,eAAe,aAAa,MACnC,YAAY,eAAe,aAAa,WACxC,aACA,UACA,gBACA,aACA,WACA,aACA,GAAG,iBACD;CAEJ,MAAM,OAAO,UAAU,UAAU;CACjC,MAAM,SAAS,UAAU,YAAY;CACrC,MAAM,WAAW,UAAU,cAAc;CAEzC,MAAM,aAAa,cAAc;CACjC,MAAM,SAAS,UAAU;CAEzB,MAAM,CAAC,QAAQ,eAAe,IAAI,eAAe,CAAC;CAElD,KAAK,SAAS;EACZ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CACD,KAAK,gBAAgB,MAAM;CAG3B,MAAM,WAAW,aAAa,QAAQ,SAAS;EAAE,GAAG;EAAM,GAAG;CAAO,IAAI,IAAI;CAC5E,MAAM,cAAc,aAAa,QAAQ;CAIzC,gBAAgB;EACd,aAAa,KAAK,QAAQ,YAAY,OAAO;CAC/C,GAAG,CAAC,IAAI,CAAC;CAET,MAAM,WAAW,MAAM,YAAY;CAEnC,MAAM,EAAE,OAAO,OAAO,SAAS,SAAS,UAAU,WAAW,WAAW,eACtE,UAAgC;EAC9B,eAAe,UAAU;GACvB,KAAK,SAAS,KAAK;GAEnB,IAAI,CAAC,QAAQ,CAAC,QACZ,KAAK,SAAS;IACZ,aAAa;IACb,UAAU;IACV,SAAS;IACT,MAAM;IACN,UAAU,CAAC;IACX,UAAU,CAAC;GACb,CAAC;QAED,KAAK,SAAS;IAAE,GAAG;IAAM,GAAG;GAAO,CAAC;GAGtC,OAAO,KAAK,SAAS;EACvB;EACA,kBAAkB,KAAK,iBAAiB,MAAM,eAAe,CAAC;EAC9D,sBAAsB,KAAK,eAAe;EAC1C,2BAA2B,KAAK,oBAAoB;EACpD;EACA;EACA;EACA,gBAAgB,YAAY,WAAW,cACrC,KAAK,0BAA0B,YAAY,WAAW,SAAS;EACjE,YAAY;EACZ,gBAAgB,YAAY;GAC1B,MAAM,QAAQ,SAAS;GAEvB,IAAI,OAAO,MAAM,KAAK,KAAK,oBAAoB,OAAO,CAAC;EACzD;EACA,mBAAmB;GACjB,KAAK,UAAU,YAAY,OAAO;GAClC,cAAc;EAChB;EACA,iBAAiB;GACf,KAAK,QAAQ,YAAY,OAAO;GAChC,YAAY;EACd;CACF,CAAC;CAEH,IAAI,CAAC,MAAM;EACI,kBAAkB,cAAc,MAAM;EAEnD,OAAO;CACT;CAEA,OACE,oBAAC,gBAAD;EACE,OAAO;GACL;GACA,cAAc,KAAK,oBAAoB,MAAM,cAAc;GAC3D;GACA,kBAAkB,YAAY,KAAK,oBAAoB,OAAO;GAC9D;GACA;GACA,cAAc;GACd,WAAW,gBAAgB;IACzB,MAAM,QAAQ,KAAK,SAAS,WAAmC;IAE/D,OAAO;KACL,GAAG;KACH,cAAc,cAAc,MAAM,eAAe,UAAU;KAC3D,kBAAkB,cAChB,MAAM,mBACN,YACA,KAAK,mBAAmB,WAAmC,CAC7D;IACF;GACF;GACA,cAAc,UAAU,WAAW,OAAO,UAAU,EAAE,OAAO,CAAC;EAChE;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,CACF"}

package/dist/dev/ui/title/title.d.ts CHANGED Viewed

@@ -5,17 +5,16 @@ interface TitleProps extends Omit<UIComponentProps<'span', TitleCore.State>, 'ch
 /**
  * Displays the resolved content title.
  *
- * The component owns its text content. Set the title through the player's
- * `title` prop rather than by passing children.
+ * The component owns its text content. Set the title through the player's `title` prop rather than by passing children.
  *
  * Renders nothing when no title resolves.
  *
  * @example
- * ```tsx
- * <Title />
+ *   ```tsx
+ *   <Title />
  *
- * <Title className="title" />
- * ```
+ *   <Title className="title" />
+ *   ```;
  */
 declare const Title: import("react").ForwardRefExoticComponent<Omit<TitleProps, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
 declare namespace Title {

package/dist/dev/ui/title/title.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"title.d.ts","names":[],"sources":["../../../../src/ui/title/title.tsx"],"mappings":";;;UAWiB,mBAAmB,KAAK,yBAAyB,UAAU~~;;;;;;;;;;;;;;;;cAiB~~/D,uBAAK,0BAAA,KAAA,qCAAA,cAAA;kBA+BD;OACH,QAAQ;OACR,QAAQ,UAAU"}
1	+ {"version":3,"file":"title.d.ts","names":[],"sources":["../../../../src/ui/title/title.tsx"],"mappings":";;;UAWiB,mBAAmB,KAAK,yBAAyB,UAAU;;;;;;;;;;;;;;;cAgB/D,uBAAK,0BAAA,KAAA,qCAAA,cAAA;kBA+BD;OACH,QAAQ;OACR,QAAQ,UAAU"}

package/dist/dev/ui/title/title.js CHANGED Viewed

@@ -8,17 +8,16 @@ import { TitleCore, TitleDataAttrs } from "@videojs/core";
 /**
 * Displays the resolved content title.
 *
-* The component owns its text content. Set the title through the player's
-* `title` prop rather than by passing children.
+* The component owns its text content. Set the title through the player's `title` prop rather than by passing children.
 *
 * Renders nothing when no title resolves.
 *
 * @example
-* ```tsx
-* <Title />
+*   ```tsx
+*   <Title />
 *
-* <Title className="title" />
-* ```
+*   <Title className="title" />
+*   ```;
 */
 const Title = forwardRef(function Title(componentProps, forwardedRef) {
 	const { render, className, style, ...elementProps } = componentProps;

package/dist/dev/ui/title/title.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"title.js","names":[],"sources":["../../../../src/ui/title/title.tsx"],"sourcesContent":["'use client';\n\nimport { TitleCore, TitleDataAttrs } from '@videojs/core';\nimport { logMissingFeature, selectMetadata } from '@videojs/core/dom';\nimport type { ForwardedRef } from 'react';\nimport { forwardRef, useState } from 'react';\n\nimport { usePlayer } from '../../player/context';\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\n\nexport interface TitleProps extends Omit<UIComponentProps<'span', TitleCore.State>, 'children'> {}\n\n/*\n Displays the resolved content title.\n \n The component owns its text content. Set the title through the player's\n * `title` prop rather than by passing children.\n \n Renders nothing when no title resolves.\n \n @example\n * ```tsx\n * <Title />\n \n <Title className=\"title\" />\n * ~~```\~~n */\nexport const Title = forwardRef(function Title(\n componentProps: TitleProps,\n forwardedRef: ForwardedRef<HTMLSpanElement>\n) {\n const { render, className, style, ...elementProps } = componentProps;\n\n const metadata = usePlayer(selectMetadata);\n\n const [core] = useState(() => new TitleCore());\n\n if (!metadata) {\n if (__DEV__) logMissingFeature('Title', 'metadata');\n return null;\n }\n\n const state = core.getState(metadata);\n\n if (state.hidden) return null;\n\n return renderElement(\n 'span',\n { render, className, style },\n {\n state,\n stateAttrMap: TitleDataAttrs,\n ref: [forwardedRef],\n props: [{ children: state.title }, elementProps],\n }\n );\n});\n\nexport namespace Title {\n export type Props = TitleProps;\n export type State = TitleCore.State;\n}\n"],"mappings":"~~;;;;;;;;;;;;;;;;;;;;;;AA4BA~~,MAAa,QAAQ,WAAW,SAAS,MACvC,gBACA,cACA;CACA,MAAM,EAAE,QAAQ,WAAW,OAAO,GAAG,iBAAiB;CAEtD,MAAM,WAAW,UAAU,cAAc;CAEzC,MAAM,CAAC,QAAQ,eAAe,IAAI,UAAU,CAAC;CAE7C,IAAI,CAAC,UAAU;EACA,kBAAkB,SAAS,UAAU;~~EAClD~~,OAAO;CACT;CAEA,MAAM,QAAQ,KAAK,SAAS,QAAQ;~~CAEpC~~,IAAI,MAAM,QAAQ,OAAO;CAEzB,OAAO,cACL,QACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EACE;EACA,cAAc;EACd,KAAK,CAAC,YAAY;EAClB,OAAO,CAAC,EAAE,UAAU,MAAM,MAAM,GAAG,YAAY;CACjD,CACF;AACF,CAAC"}
1	+ {"version":3,"file":"title.js","names":[],"sources":["../../../../src/ui/title/title.tsx"],"sourcesContent":["'use client';\n\nimport { TitleCore, TitleDataAttrs } from '@videojs/core';\nimport { logMissingFeature, selectMetadata } from '@videojs/core/dom';\nimport type { ForwardedRef } from 'react';\nimport { forwardRef, useState } from 'react';\n\nimport { usePlayer } from '../../player/context';\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\n\nexport interface TitleProps extends Omit<UIComponentProps<'span', TitleCore.State>, 'children'> {}\n\n/*\n Displays the resolved content title.\n \n The component owns its text content. Set the title through the player's `title` prop rather than by passing children.\n \n Renders nothing when no title resolves.\n \n @example\n * ```tsx\n * <Title />\n \n <Title className=\"title\" />\n * ```;\n */\nexport const Title = forwardRef(function Title(\n componentProps: TitleProps,\n forwardedRef: ForwardedRef<HTMLSpanElement>\n) {\n const { render, className, style, ...elementProps } = componentProps;\n\n const metadata = usePlayer(selectMetadata);\n\n const [core] = useState(() => new TitleCore());\n\n if (!metadata) {\n if (__DEV__) logMissingFeature('Title', 'metadata');\n\n return null;\n }\n\n const state = core.getState(metadata);\n if (state.hidden) return null;\n\n return renderElement(\n 'span',\n { render, className, style },\n {\n state,\n stateAttrMap: TitleDataAttrs,\n ref: [forwardedRef],\n props: [{ children: state.title }, elementProps],\n }\n );\n});\n\nexport namespace Title {\n export type Props = TitleProps;\n export type State = TitleCore.State;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AA2BA,MAAa,QAAQ,WAAW,SAAS,MACvC,gBACA,cACA;CACA,MAAM,EAAE,QAAQ,WAAW,OAAO,GAAG,iBAAiB;CAEtD,MAAM,WAAW,UAAU,cAAc;CAEzC,MAAM,CAAC,QAAQ,eAAe,IAAI,UAAU,CAAC;CAE7C,IAAI,CAAC,UAAU;EACA,kBAAkB,SAAS,UAAU;EAElD,OAAO;CACT;CAEA,MAAM,QAAQ,KAAK,SAAS,QAAQ;CACpC,IAAI,MAAM,QAAQ,OAAO;CAEzB,OAAO,cACL,QACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EACE;EACA,cAAc;EACd,KAAK,CAAC,YAAY;EAClB,OAAO,CAAC,EAAE,UAAU,MAAM,MAAM,GAAG,YAAY;CACjD,CACF;AACF,CAAC"}

package/dist/dev/ui/tooltip/context.d.ts CHANGED Viewed

@@ -19,6 +19,7 @@ interface TooltipContextValue {
   boundary: PositioningBoundary;
   container: MediaContainer | null;
 }
+/** Returns the current tooltip compound-component context. Throws outside `Tooltip.Root`. */
 declare function useTooltipContext(): TooltipContextValue;
 declare function useOptionalTooltipContext(): TooltipContextValue | null;
 //#endregion

package/dist/dev/ui/tooltip/context.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"context.d.ts","names":[],"sources":["../../../../src/ui/tooltip/context.tsx"],"mappings":";;;UAIiB;EACf;EACA;;UAGe;EACf,MAAM;EACN,SAAS;EACT,OAAO,YAAY;EACnB,eAAe,YAAY;EAC3B,oBAAoB,MAAM,YAAY;EACtC,cAAc,eAAa,YAAY;EACvC;EACA;EACA,SAAS;EACT,aAAa,SAAS;EACtB,UAAU;EACV,WAAW~~;;iBAOG~~,qBAAqB;~~iBAMrB~~,6BAA6B"}
1	+ {"version":3,"file":"context.d.ts","names":[],"sources":["../../../../src/ui/tooltip/context.tsx"],"mappings":";;;UAIiB;EACf;EACA;;UAGe;EACf,MAAM;EACN,SAAS;EACT,OAAO,YAAY;EACnB,eAAe,YAAY;EAC3B,oBAAoB,MAAM,YAAY;EACtC,cAAc,eAAa,YAAY;EACvC;EACA;EACA,SAAS;EACT,aAAa,SAAS;EACtB,UAAU;EACV,WAAW;;;iBAQG,qBAAqB;iBAOrB,6BAA6B"}

package/dist/dev/ui/tooltip/context.js CHANGED Viewed

@@ -2,6 +2,7 @@ import { createContext, useContext } from "react";
 //#region src/ui/tooltip/context.tsx
 const TooltipContext = createContext(null);
 const TooltipContextProvider = TooltipContext.Provider;
+/** Returns the current tooltip compound-component context. Throws outside `Tooltip.Root`. */
 function useTooltipContext() {
 	const ctx = useContext(TooltipContext);
 	if (!ctx) throw new Error("Tooltip compound components must be used within a Tooltip.Root");

package/dist/dev/ui/tooltip/context.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"context.js","names":[],"sources":["../../../../src/ui/tooltip/context.tsx"],"sourcesContent":["import type { StateAttrMap, TooltipCore } from '@videojs/core';\nimport type { MediaContainer, PositioningBoundary, TooltipApi } from '@videojs/core/dom';\nimport { createContext, useContext } from 'react';\n\nexport interface TooltipContent {\n label?: string \| undefined;\n shortcut?: string \| undefined;\n}\n\nexport interface TooltipContextValue {\n core: TooltipCore;\n tooltip: TooltipApi;\n state: TooltipCore.State;\n preferredSide: TooltipCore.State['side'];\n setPositionedSide: (side: TooltipCore.State['side']) => void;\n stateAttrMap: StateAttrMap<TooltipCore.State>;\n anchorName: string;\n popupId: string;\n content: TooltipContent \| undefined;\n setContent: (content: TooltipContent \| undefined) => void;\n boundary: PositioningBoundary;\n container: MediaContainer \| null;\n}\n\nconst TooltipContext = createContext<TooltipContextValue \| null>(null);\n\nexport const TooltipContextProvider = TooltipContext.Provider;\n\nexport function useTooltipContext(): TooltipContextValue {\n const ctx = useContext(TooltipContext);\n if (!ctx) throw new Error('Tooltip compound components must be used within a Tooltip.Root');\n return ctx;\n}\n\nexport function useOptionalTooltipContext(): TooltipContextValue \| null {\n return useContext(TooltipContext);\n}\n"],"mappings":";;AAwBA,MAAM,iBAAiB,cAA0C,IAAI;AAErE,MAAa,yBAAyB,eAAe~~;AAErD~~,SAAgB,oBAAyC;CACvD,MAAM,MAAM,WAAW,cAAc;CACrC,IAAI,CAAC,KAAK,MAAM,IAAI,MAAM,gEAAgE;~~CAC1F~~,OAAO;AACT;AAEA,SAAgB,4BAAwD;CACtE,OAAO,WAAW,cAAc;AAClC"}
1	+ {"version":3,"file":"context.js","names":[],"sources":["../../../../src/ui/tooltip/context.tsx"],"sourcesContent":["import type { StateAttrMap, TooltipCore } from '@videojs/core';\nimport type { MediaContainer, PositioningBoundary, TooltipApi } from '@videojs/core/dom';\nimport { createContext, useContext } from 'react';\n\nexport interface TooltipContent {\n label?: string \| undefined;\n shortcut?: string \| undefined;\n}\n\nexport interface TooltipContextValue {\n core: TooltipCore;\n tooltip: TooltipApi;\n state: TooltipCore.State;\n preferredSide: TooltipCore.State['side'];\n setPositionedSide: (side: TooltipCore.State['side']) => void;\n stateAttrMap: StateAttrMap<TooltipCore.State>;\n anchorName: string;\n popupId: string;\n content: TooltipContent \| undefined;\n setContent: (content: TooltipContent \| undefined) => void;\n boundary: PositioningBoundary;\n container: MediaContainer \| null;\n}\n\nconst TooltipContext = createContext<TooltipContextValue \| null>(null);\n\nexport const TooltipContextProvider = TooltipContext.Provider;\n\n/** Returns the current tooltip compound-component context. Throws outside `Tooltip.Root`. */\nexport function useTooltipContext(): TooltipContextValue {\n const ctx = useContext(TooltipContext);\n if (!ctx) throw new Error('Tooltip compound components must be used within a Tooltip.Root');\n\n return ctx;\n}\n\nexport function useOptionalTooltipContext(): TooltipContextValue \| null {\n return useContext(TooltipContext);\n}\n"],"mappings":";;AAwBA,MAAM,iBAAiB,cAA0C,IAAI;AAErE,MAAa,yBAAyB,eAAe;;AAGrD,SAAgB,oBAAyC;CACvD,MAAM,MAAM,WAAW,cAAc;CACrC,IAAI,CAAC,KAAK,MAAM,IAAI,MAAM,gEAAgE;CAE1F,OAAO;AACT;AAEA,SAAgB,4BAAwD;CACtE,OAAO,WAAW,cAAc;AAClC"}

package/dist/dev/ui/tooltip/tooltip-popup.d.ts CHANGED Viewed

@@ -2,7 +2,10 @@ import { UIComponentProps } from "../../utils/types.js";
 import { TooltipState } from "@videojs/core";
 //#region src/ui/tooltip/tooltip-popup.d.ts
 interface TooltipPopupProps extends UIComponentProps<'div', TooltipState> {}
-/** Container for the tooltip content. Positioned relative to the trigger using CSS anchor positioning with a JavaScript fallback. */
+/**
+ * Container for the tooltip content. Positioned relative to the trigger using CSS anchor positioning with a JavaScript
+ * fallback.
+ */
 declare const TooltipPopup: import("react").ForwardRefExoticComponent<Omit<TooltipPopupProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 declare namespace TooltipPopup {
   type Props = TooltipPopupProps;

package/dist/dev/ui/tooltip/tooltip-popup.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"tooltip-popup.d.ts","names":[],"sources":["../../../../src/ui/tooltip/tooltip-popup.tsx"],"mappings":";;;UAWiB,0BAA0B,wBAAwB~~;;cAGtD~~,8BAAY,0BAAA,KAAA,4CAAA,cAAA;kBAmFR;OACH,QAAQ;OACR,QAAQ"}
1	+ {"version":3,"file":"tooltip-popup.d.ts","names":[],"sources":["../../../../src/ui/tooltip/tooltip-popup.tsx"],"mappings":";;;UAWiB,0BAA0B,wBAAwB;;;;;cAMtD,8BAAY,0BAAA,KAAA,4CAAA,cAAA;kBAmFR;OACH,QAAQ;OACR,QAAQ"}

package/dist/dev/ui/tooltip/tooltip-popup.js CHANGED Viewed

@@ -8,13 +8,17 @@ import { forwardRef, useCallback, useMemo, useRef } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { TooltipCSSVars } from "@videojs/core";
 //#region src/ui/tooltip/tooltip-popup.tsx
-/** Container for the tooltip content. Positioned relative to the trigger using CSS anchor positioning with a JavaScript fallback. */
+/**
+* Container for the tooltip content. Positioned relative to the trigger using CSS anchor positioning with a JavaScript
+* fallback.
+*/
 const TooltipPopup = forwardRef(function TooltipPopup({ render, className, style, children, ...elementProps }, forwardedRef) {
 	const { core, tooltip, state, preferredSide, setPositionedSide, stateAttrMap, anchorName, popupId, boundary, container } = useTooltipContext();
 	const internalRef = useRef(null);
-	const composedRef = useComposedRefs(forwardedRef, useCallback((el) => {
+	const popupRef = useCallback((el) => {
 		tooltip.setPopupElement(el);
-	}, [tooltip]), internalRef);
+	}, [tooltip]);
+	const composedRef = useComposedRefs(forwardedRef, popupRef, internalRef);
 	const posOpts = useMemo(() => ({
 		side: preferredSide,
 		align: state.align

package/dist/dev/ui/tooltip/tooltip-popup.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"tooltip-popup.js","names":[],"sources":["../../../../src/ui/tooltip/tooltip-popup.tsx"],"sourcesContent":["import { TooltipCSSVars, type TooltipState } from '@videojs/core';\nimport { forwardRef, useCallback, useMemo, useRef } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { useComposedRefs } from '../../utils/use-composed-refs';\nimport { renderElement } from '../../utils/use-render';\nimport { usePopupPosition } from '../popover/use-popup-position';\nimport { useTooltipContext } from './context';\nimport { TooltipLabel } from './tooltip-label';\nimport { TooltipShortcut } from './tooltip-shortcut';\n\nexport interface TooltipPopupProps extends UIComponentProps<'div', TooltipState> {}\n\n/** Container for the tooltip content. Positioned relative to the trigger using CSS anchor positioning with a JavaScript fallback. */\nexport const TooltipPopup = forwardRef<HTMLDivElement, TooltipPopupProps>(function TooltipPopup(\n { render, className, style, children, ...elementProps },\n forwardedRef\n) {\n const {\n core,\n tooltip,\n state,\n preferredSide,\n setPositionedSide,\n stateAttrMap,\n anchorName,\n popupId,\n boundary,\n container,\n } = useTooltipContext();\n const internalRef = useRef<HTMLDivElement>(null);\n\n const popupRef = useCallback(\n (el: HTMLDivElement \| null) => {\n tooltip.setPopupElement(el);\n },\n [tooltip]\n );\n\n const composedRef = useComposedRefs(forwardedRef, popupRef, internalRef);\n\n // --- Positioning ---\n\n const posOpts = useMemo(() => ({ side: preferredSide, align: state.align }), [preferredSide, state.align]);\n\n const positioningStyle = usePopupPosition({\n open: state.open,\n anchorName,\n position: posOpts,\n triggerSource: tooltip,\n popupRef: internalRef,\n boundary,\n container,\n cssVars: TooltipCSSVars,\n onSideChange: setPositionedSide,\n });\n\n // --- Visibility ---\n\n if (!state.open) {\n return null;\n }\n\n const body =\n children !== undefined ? (\n children\n ) : (\n <>\n <TooltipLabel />\n <TooltipShortcut />\n </>\n );\n\n // Remap DOM focus events to React synthetic event names.\n const { onFocusOut, ...restPopupProps } = tooltip.popupProps;\n\n return renderElement(\n 'div',\n { render, className, style },\n {\n state,\n stateAttrMap,\n ref: composedRef,\n props: [\n {\n id: popupId,\n style: positioningStyle,\n ...core.getPopupAttrs(state),\n },\n { children: body },\n { ...restPopupProps, onBlur: onFocusOut },\n elementProps,\n ],\n }\n );\n});\n\nexport namespace TooltipPopup {\n export type Props = TooltipPopupProps;\n export type State = TooltipState;\n}\n"],"mappings":"~~;;;;;;;;;;;AAcA~~,MAAa,eAAe,WAA8C,SAAS,aACjF,EAAE,QAAQ,WAAW,OAAO,UAAU,GAAG,gBACzC,cACA;CACA,MAAM,EACJ,MACA,SACA,OACA,eACA,mBACA,cACA,YACA,SACA,UACA,cACE,kBAAkB;CACtB,MAAM,cAAc,OAAuB,IAAI;~~CAS~~/C,MAAM,~~cAAc~~,~~gBAAgB,cAPnB,~~aACd,OAA8B;EAC7B,QAAQ,gBAAgB,EAAE;CAC5B,GACA,CAAC,OAAO,~~CAG+C~~,~~GAAG~~,WAAW;CAIvE,MAAM,UAAU,eAAe;EAAE,MAAM;EAAe,OAAO,MAAM;CAAM,IAAI,CAAC,eAAe,MAAM,KAAK,CAAC;CAEzG,MAAM,mBAAmB,iBAAiB;EACxC,MAAM,MAAM;EACZ;EACA,UAAU;EACV,eAAe;EACf,UAAU;EACV;EACA;EACA,SAAS;EACT,cAAc;CAChB,CAAC;CAID,IAAI,CAAC,MAAM,MACT,OAAO;CAGT,MAAM,OACJ,aAAa,KAAA,IACX,WAEA,qBAAA,YAAA,EAAA,UAAA,CACE,oBAAC,cAAD,CAAe,CAAA,GACf,oBAAC,iBAAD,CAAkB,CAAA,CAClB,EAAA,CAAA;CAIN,MAAM,EAAE,YAAY,GAAG,mBAAmB,QAAQ;CAElD,OAAO,cACL,OACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EACE;EACA;EACA,KAAK;EACL,OAAO;GACL;IACE,IAAI;IACJ,OAAO;IACP,GAAG,KAAK,cAAc,KAAK;GAC7B;GACA,EAAE,UAAU,KAAK;GACjB;IAAE,GAAG;IAAgB,QAAQ;GAAW;GACxC;EACF;CACF,CACF;AACF,CAAC"}
1	+ {"version":3,"file":"tooltip-popup.js","names":[],"sources":["../../../../src/ui/tooltip/tooltip-popup.tsx"],"sourcesContent":["import { TooltipCSSVars, type TooltipState } from '@videojs/core';\nimport { forwardRef, useCallback, useMemo, useRef } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { useComposedRefs } from '../../utils/use-composed-refs';\nimport { renderElement } from '../../utils/use-render';\nimport { usePopupPosition } from '../popover/use-popup-position';\nimport { useTooltipContext } from './context';\nimport { TooltipLabel } from './tooltip-label';\nimport { TooltipShortcut } from './tooltip-shortcut';\n\nexport interface TooltipPopupProps extends UIComponentProps<'div', TooltipState> {}\n\n/*\n Container for the tooltip content. Positioned relative to the trigger using CSS anchor positioning with a JavaScript\n * fallback.\n */\nexport const TooltipPopup = forwardRef<HTMLDivElement, TooltipPopupProps>(function TooltipPopup(\n { render, className, style, children, ...elementProps },\n forwardedRef\n) {\n const {\n core,\n tooltip,\n state,\n preferredSide,\n setPositionedSide,\n stateAttrMap,\n anchorName,\n popupId,\n boundary,\n container,\n } = useTooltipContext();\n const internalRef = useRef<HTMLDivElement>(null);\n\n const popupRef = useCallback(\n (el: HTMLDivElement \| null) => {\n tooltip.setPopupElement(el);\n },\n [tooltip]\n );\n\n const composedRef = useComposedRefs(forwardedRef, popupRef, internalRef);\n\n // --- Positioning ---\n\n const posOpts = useMemo(() => ({ side: preferredSide, align: state.align }), [preferredSide, state.align]);\n\n const positioningStyle = usePopupPosition({\n open: state.open,\n anchorName,\n position: posOpts,\n triggerSource: tooltip,\n popupRef: internalRef,\n boundary,\n container,\n cssVars: TooltipCSSVars,\n onSideChange: setPositionedSide,\n });\n\n // --- Visibility ---\n\n if (!state.open) {\n return null;\n }\n\n const body =\n children !== undefined ? (\n children\n ) : (\n <>\n <TooltipLabel />\n <TooltipShortcut />\n </>\n );\n\n // Remap DOM focus events to React synthetic event names.\n const { onFocusOut, ...restPopupProps } = tooltip.popupProps;\n\n return renderElement(\n 'div',\n { render, className, style },\n {\n state,\n stateAttrMap,\n ref: composedRef,\n props: [\n {\n id: popupId,\n style: positioningStyle,\n ...core.getPopupAttrs(state),\n },\n { children: body },\n { ...restPopupProps, onBlur: onFocusOut },\n elementProps,\n ],\n }\n );\n});\n\nexport namespace TooltipPopup {\n export type Props = TooltipPopupProps;\n export type State = TooltipState;\n}\n"],"mappings":";;;;;;;;;;;;;;AAiBA,MAAa,eAAe,WAA8C,SAAS,aACjF,EAAE,QAAQ,WAAW,OAAO,UAAU,GAAG,gBACzC,cACA;CACA,MAAM,EACJ,MACA,SACA,OACA,eACA,mBACA,cACA,YACA,SACA,UACA,cACE,kBAAkB;CACtB,MAAM,cAAc,OAAuB,IAAI;CAE/C,MAAM,WAAW,aACd,OAA8B;EAC7B,QAAQ,gBAAgB,EAAE;CAC5B,GACA,CAAC,OAAO,CACV;CAEA,MAAM,cAAc,gBAAgB,cAAc,UAAU,WAAW;CAIvE,MAAM,UAAU,eAAe;EAAE,MAAM;EAAe,OAAO,MAAM;CAAM,IAAI,CAAC,eAAe,MAAM,KAAK,CAAC;CAEzG,MAAM,mBAAmB,iBAAiB;EACxC,MAAM,MAAM;EACZ;EACA,UAAU;EACV,eAAe;EACf,UAAU;EACV;EACA;EACA,SAAS;EACT,cAAc;CAChB,CAAC;CAID,IAAI,CAAC,MAAM,MACT,OAAO;CAGT,MAAM,OACJ,aAAa,KAAA,IACX,WAEA,qBAAA,YAAA,EAAA,UAAA,CACE,oBAAC,cAAD,CAAe,CAAA,GACf,oBAAC,iBAAD,CAAkB,CAAA,CAClB,EAAA,CAAA;CAIN,MAAM,EAAE,YAAY,GAAG,mBAAmB,QAAQ;CAElD,OAAO,cACL,OACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EACE;EACA;EACA,KAAK;EACL,OAAO;GACL;IACE,IAAI;IACJ,OAAO;IACP,GAAG,KAAK,cAAc,KAAK;GAC7B;GACA,EAAE,UAAU,KAAK;GACjB;IAAE,GAAG;IAAgB,QAAQ;GAAW;GACxC;EACF;CACF,CACF;AACF,CAAC"}

package/dist/dev/ui/tooltip/tooltip-provider.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"tooltip-provider.d.ts","names":[],"sources":["../../../../src/ui/tooltip/tooltip-provider.tsx"],"mappings":";;;UAMiB,6BAA6B;EAC5C,WAAW;;iBAGG,kBAAkB,OAAO,YAAY,SAAS,YAAY,uBAAuB;~~kBAOhF~~;OACH,QAAQ"}
1	+ {"version":3,"file":"tooltip-provider.d.ts","names":[],"sources":["../../../../src/ui/tooltip/tooltip-provider.tsx"],"mappings":";;;UAMiB,6BAA6B;EAC5C,WAAW;;iBAGG,kBAAkB,OAAO,YAAY,SAAS,YAAY,uBAAuB;kBAQhF;OACH,QAAQ"}

package/dist/dev/ui/tooltip/tooltip-provider.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"tooltip-provider.js","names":[],"sources":["../../../../src/ui/tooltip/tooltip-provider.tsx"],"sourcesContent":["import { TooltipGroupCore, type TooltipGroupProps } from '@videojs/core';\nimport type { ReactNode } from 'react';\nimport { useState } from 'react';\n\nimport { TooltipGroupContextProvider } from './group-context';\n\nexport interface TooltipProviderProps extends TooltipGroupProps {\n children?: ReactNode;\n}\n\nexport function TooltipProvider({ delay, closeDelay, timeout, children }: TooltipProviderProps): ReactNode {\n const [group] = useState(() => new TooltipGroupCore({ delay, closeDelay, timeout }));\n group.setProps({ delay, closeDelay, timeout });\n\n return <TooltipGroupContextProvider value={{ group }}>{children}</TooltipGroupContextProvider>;\n}\n\nexport namespace TooltipProvider {\n export type Props = TooltipProviderProps;\n}\n"],"mappings":";;;;;AAUA,SAAgB,gBAAgB,EAAE,OAAO,YAAY,SAAS,YAA6C;CACzG,MAAM,CAAC,SAAS,eAAe,IAAI,iBAAiB;EAAE;EAAO;EAAY;CAAQ,CAAC,CAAC;~~CACnF~~,MAAM,SAAS;EAAE;EAAO;EAAY;CAAQ,CAAC;CAE7C,OAAO,oBAAC,6BAAD;EAA6B,OAAO,EAAE,MAAM;EAAI;CAAsC,CAAA;AAC/F"}
1	+ {"version":3,"file":"tooltip-provider.js","names":[],"sources":["../../../../src/ui/tooltip/tooltip-provider.tsx"],"sourcesContent":["import { TooltipGroupCore, type TooltipGroupProps } from '@videojs/core';\nimport type { ReactNode } from 'react';\nimport { useState } from 'react';\n\nimport { TooltipGroupContextProvider } from './group-context';\n\nexport interface TooltipProviderProps extends TooltipGroupProps {\n children?: ReactNode;\n}\n\nexport function TooltipProvider({ delay, closeDelay, timeout, children }: TooltipProviderProps): ReactNode {\n const [group] = useState(() => new TooltipGroupCore({ delay, closeDelay, timeout }));\n\n group.setProps({ delay, closeDelay, timeout });\n\n return <TooltipGroupContextProvider value={{ group }}>{children}</TooltipGroupContextProvider>;\n}\n\nexport namespace TooltipProvider {\n export type Props = TooltipProviderProps;\n}\n"],"mappings":";;;;;AAUA,SAAgB,gBAAgB,EAAE,OAAO,YAAY,SAAS,YAA6C;CACzG,MAAM,CAAC,SAAS,eAAe,IAAI,iBAAiB;EAAE;EAAO;EAAY;CAAQ,CAAC,CAAC;CAEnF,MAAM,SAAS;EAAE;EAAO;EAAY;CAAQ,CAAC;CAE7C,OAAO,oBAAC,6BAAD;EAA6B,OAAO,EAAE,MAAM;EAAI;CAAsC,CAAA;AAC/F"}

package/dist/dev/ui/tooltip/tooltip-root.d.ts CHANGED Viewed

@@ -11,7 +11,7 @@ interface TooltipRootProps extends TooltipProps {
   onOpenChangeComplete?: (open: boolean) => void;
   children?: ReactNode;
 }
-declare function TooltipRoot({ open: controlledOpen, defaultOpen, onOpenChange: onOpenChangeProp, onOpenChangeComplete: onOpenChangeCompleteProp, delay, closeDelay, disableHoverablePopup, disabled, boundary, children, ...coreProps }: TooltipRootProps): ReactNode;
+declare function TooltipRoot({ open: controlledOpen, defaultOpen, onOpenChange: onOpenChangeProp, onOpenChangeComplete: onOpenChangeCompleteProp, delay, closeDelay, disableHoverablePopup, disabled, sticky, boundary, children, ...coreProps }: TooltipRootProps): ReactNode;
 declare namespace TooltipRoot {
   type Props = TooltipRootProps;
 }

package/dist/dev/ui/tooltip/tooltip-root.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"tooltip-root.d.ts","names":[],"sources":["../../../../src/ui/tooltip/tooltip-root.tsx"],"mappings":";;;;~~UAqBiB~~,yBAAyB;;EAExC,WAAW;;EAEX,gBAAgB,eAAe,SAAS;;EAExC,wBAAwB;EACxB,WAAW;;iBAGG,cACd,MAAM,gBACN,aACA,cAAc,kBACd,sBAAsB,0BACtB,OACA,YACA,uBACA,UACA,UACA,aACG,aACF,mBAAmB;~~kBAqGL~~;OACH,QAAQ"}
1	+ {"version":3,"file":"tooltip-root.d.ts","names":[],"sources":["../../../../src/ui/tooltip/tooltip-root.tsx"],"mappings":";;;;UAsBiB,yBAAyB;;EAExC,WAAW;;EAEX,gBAAgB,eAAe,SAAS;;EAExC,wBAAwB;EACxB,WAAW;;iBAGG,cACd,MAAM,gBACN,aACA,cAAc,kBACd,sBAAsB,0BACtB,OACA,YACA,uBACA,UACA,QACA,UACA,aACG,aACF,mBAAmB;kBA0GL;OACH,QAAQ"}

package/dist/dev/ui/tooltip/tooltip-root.js CHANGED Viewed

@@ -11,10 +11,10 @@ import { createTooltip, createTransition } from "@videojs/core/dom";
 import { useSnapshot } from "@videojs/store/react";
 import { useEffect, useState } from "react";
 import { jsx } from "react/jsx-runtime";
-import { isUndefined } from "@videojs/utils/predicate";
 import { TooltipCore, TooltipDataAttrs } from "@videojs/core";
+import { isUndefined } from "@videojs/utils/predicate";
 //#region src/ui/tooltip/tooltip-root.tsx
-function TooltipRoot({ open: controlledOpen, defaultOpen = TooltipCore.defaultProps.defaultOpen, onOpenChange: onOpenChangeProp, onOpenChangeComplete: onOpenChangeCompleteProp, delay = TooltipCore.defaultProps.delay, closeDelay = TooltipCore.defaultProps.closeDelay, disableHoverablePopup = TooltipCore.defaultProps.disableHoverablePopup, disabled = TooltipCore.defaultProps.disabled, boundary = "container", children, ...coreProps }) {
+function TooltipRoot({ open: controlledOpen, defaultOpen = TooltipCore.defaultProps.defaultOpen, onOpenChange: onOpenChangeProp, onOpenChangeComplete: onOpenChangeCompleteProp, delay = TooltipCore.defaultProps.delay, closeDelay = TooltipCore.defaultProps.closeDelay, disableHoverablePopup = TooltipCore.defaultProps.disableHoverablePopup, disabled = TooltipCore.defaultProps.disabled, sticky = TooltipCore.defaultProps.sticky, boundary = "container", children, ...coreProps }) {
 	const container = useOptionalContainer();
 	const popupGroup = useOptionalPopupGroup();
 	const controls = useOptionalControlsContext();
@@ -28,6 +28,7 @@ function TooltipRoot({ open: controlledOpen, defaultOpen = TooltipCore.defaultPr
 	const closeDelayRef = useLatestRef(closeDelay);
 	const disableHoverablePopupRef = useLatestRef(disableHoverablePopup);
 	const disabledRef = useLatestRef(disabled);
+	const stickyRef = useLatestRef(sticky);
 	const groupRef = useLatestRef(groupFromContext);
 	const popupGroupRef = useLatestRef(popupGroup);
 	const [tooltip] = useState(() => {
@@ -43,6 +44,7 @@ function TooltipRoot({ open: controlledOpen, defaultOpen = TooltipCore.defaultPr
 			closeDelay: () => closeDelayRef.current,
 			disableHoverablePopup: () => disableHoverablePopupRef.current,
 			disabled: () => disabledRef.current,
+			sticky: () => stickyRef.current,
 			group: () => groupRef.current,
 			popupGroup: () => popupGroupRef.current
 		});

package/dist/dev/ui/tooltip/tooltip-root.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"tooltip-root.js","names":[],"sources":["../../../../src/ui/tooltip/tooltip-root.tsx"],"sourcesContent":["import { type TooltipProps as CoreTooltipProps, TooltipCore, TooltipDataAttrs } from '@videojs/core';\nimport {\n createTooltip,\n createTransition,\n type PositioningBoundary,\n type TooltipChangeDetails,\n} from '@videojs/core/dom';\nimport { useSnapshot } from '@videojs/store/react';\nimport { isUndefined } from '@videojs/utils/predicate';\nimport type { ReactNode } from 'react';\nimport { useEffect, useState } from 'react';\nimport { useOptionalContainer } from '../../player/context';\nimport { useOptionalPopupGroup } from '../../player/popup-group-context';\nimport { useDestroy } from '../../utils/use-destroy';\nimport { useLatestRef } from '../../utils/use-latest-ref';\nimport { useSafeId } from '../../utils/use-safe-id';\nimport { useOptionalControlsContext } from '../controls/context';\nimport { usePositionedState } from '../hooks/use-positioned-state';\nimport { type TooltipContent, TooltipContextProvider } from './context';\nimport { useTooltipGroup } from './group-context';\n\nexport interface TooltipRootProps extends CoreTooltipProps {\n /** Boundary used to constrain the popup size. /\n boundary?: PositioningBoundary;\n /* Called when the tooltip open state changes (fires immediately, before animations). /\n onOpenChange?: (open: boolean, details: TooltipChangeDetails) => void;\n /* Called after open/close animations complete. */\n onOpenChangeComplete?: (open: boolean) => void;\n children?: ReactNode;\n}\n\nexport function TooltipRoot({\n open: controlledOpen,\n defaultOpen = TooltipCore.defaultProps.defaultOpen,\n onOpenChange: onOpenChangeProp,\n onOpenChangeComplete: onOpenChangeCompleteProp,\n delay = TooltipCore.defaultProps.delay,\n closeDelay = TooltipCore.defaultProps.closeDelay,\n disableHoverablePopup = TooltipCore.defaultProps.disableHoverablePopup,\n disabled = TooltipCore.defaultProps.disabled,\n boundary = 'container',\n children,\n ...coreProps\n}: TooltipRootProps): ReactNode {\n const container = useOptionalContainer();\n const popupGroup = useOptionalPopupGroup();\n const controls = useOptionalControlsContext();\n const [core] = useState(() => new TooltipCore(coreProps));\n core.setProps(coreProps);\n\n const isControlled = !isUndefined(controlledOpen);\n\n const groupFromContext = useTooltipGroup();\n\n // Keep refs that always point to the latest values so the\n // createTooltip closure never reads stale props.\n const onOpenChangeRef = useLatestRef(onOpenChangeProp);\n const onOpenChangeCompleteRef = useLatestRef(onOpenChangeCompleteProp);\n const delayRef = useLatestRef(delay);\n const closeDelayRef = useLatestRef(closeDelay);\n const disableHoverablePopupRef = useLatestRef(disableHoverablePopup);\n const disabledRef = useLatestRef(disabled);\n const groupRef = useLatestRef(groupFromContext);\n const popupGroupRef = useLatestRef(popupGroup);\n\n const [tooltip] = useState(() => {\n const instance = createTooltip({\n transition: createTransition(),\n onOpenChange: (nextOpen: boolean, details: TooltipChangeDetails) => {\n onOpenChangeRef.current?.(nextOpen, details);\n },\n onOpenChangeComplete: (nextOpen: boolean) => {\n onOpenChangeCompleteRef.current?.(nextOpen);\n },\n delay: () => delayRef.current,\n closeDelay: () => closeDelayRef.current,\n disableHoverablePopup: () => disableHoverablePopupRef.current,\n disabled: () => disabledRef.current,\n group: () => groupRef.current,\n popupGroup: () => popupGroupRef.current,\n });\n\n // Apply defaultOpen on creation (uncontrolled only)\n if (!isControlled && defaultOpen) {\n instance.open();\n }\n\n return instance;\n });\n\n const [content, setContent] = useState<TooltipContent \| undefined>();\n\n const anchorName = useSafeId();\n const popupId = useSafeId('tooltip');\n\n // Sync controlled open prop -> internal input state.\n useEffect(() => {\n if (isUndefined(controlledOpen)) return;\n\n const { active: inputOpen } = tooltip.input.current;\n if (controlledOpen === inputOpen) return;\n\n if (controlledOpen) {\n tooltip.open();\n } else {\n tooltip.close();\n }\n }, [controlledOpen, tooltip]);\n\n useEffect(() => {\n if (isUndefined(controls?.state.visible)) return;\n if (controls.state.visible) return;\n\n tooltip.close('imperative-action');\n }, [controls?.state.visible, tooltip]);\n\n useDestroy(tooltip);\n\n const input = useSnapshot(tooltip.input);\n core.setInput(input);\n const { state, preferredSide, setPositionedSide } = usePositionedState(core.getState());\n\n return (\n <TooltipContextProvider\n value={{\n core,\n tooltip,\n state,\n preferredSide,\n setPositionedSide,\n stateAttrMap: TooltipDataAttrs,\n anchorName,\n popupId,\n content,\n setContent,\n boundary,\n container,\n }}\n >\n {children}\n </TooltipContextProvider>\n );\n}\n\nexport namespace TooltipRoot {\n export type Props = TooltipRootProps;\n}\n"],"mappings":";;;;;;;;;;;;;;;;~~AA+BA~~,SAAgB,YAAY,EAC1B,MAAM,gBACN,cAAc,YAAY,aAAa,aACvC,cAAc,kBACd,sBAAsB,0BACtB,QAAQ,YAAY,aAAa,OACjC,aAAa,YAAY,aAAa,YACtC,wBAAwB,YAAY,aAAa,uBACjD,WAAW,YAAY,aAAa,UACpC,WAAW,aACX,UACA,GAAG,aAC2B;CAC9B,MAAM,YAAY,qBAAqB;CACvC,MAAM,aAAa,sBAAsB;CACzC,MAAM,WAAW,2BAA2B;CAC5C,MAAM,CAAC,QAAQ,eAAe,IAAI,YAAY,SAAS,CAAC;~~CACxD~~,KAAK,SAAS,SAAS;CAEvB,MAAM,eAAe,CAAC,YAAY,cAAc;CAEhD,MAAM,mBAAmB,gBAAgB;CAIzC,MAAM,kBAAkB,aAAa,gBAAgB;CACrD,MAAM,0BAA0B,aAAa,wBAAwB;CACrE,MAAM,WAAW,aAAa,KAAK;CACnC,MAAM,gBAAgB,aAAa,UAAU;CAC7C,MAAM,2BAA2B,aAAa,qBAAqB;CACnE,MAAM,cAAc,aAAa,QAAQ;CACzC,MAAM,WAAW,aAAa,gBAAgB;CAC9C,MAAM,gBAAgB,aAAa,UAAU;CAE7C,MAAM,CAAC,WAAW,eAAe;EAC/B,MAAM,WAAW,cAAc;GAC7B,YAAY,iBAAiB;GAC7B,eAAe,UAAmB,YAAkC;IAClE,gBAAgB,UAAU,UAAU,OAAO;GAC7C;GACA,uBAAuB,aAAsB;IAC3C,wBAAwB,UAAU,QAAQ;GAC5C;GACA,aAAa,SAAS;GACtB,kBAAkB,cAAc;GAChC,6BAA6B,yBAAyB;GACtD,gBAAgB,YAAY;GAC5B,aAAa,SAAS;GACtB,kBAAkB,cAAc;EAClC,CAAC;EAGD,IAAI,CAAC,gBAAgB,aACnB,SAAS,KAAK;EAGhB,OAAO;CACT,CAAC;CAED,MAAM,CAAC,SAAS,cAAc,SAAqC;CAEnE,MAAM,aAAa,UAAU;CAC7B,MAAM,UAAU,UAAU,SAAS;CAGnC,gBAAgB;EACd,IAAI,YAAY,cAAc,GAAG;EAEjC,MAAM,EAAE,QAAQ,cAAc,QAAQ,MAAM;EAC5C,IAAI,mBAAmB,WAAW;EAElC,IAAI,gBACF,QAAQ,KAAK;OAEb,QAAQ,MAAM;CAElB,GAAG,CAAC,gBAAgB,OAAO,CAAC;CAE5B,gBAAgB;EACd,IAAI,YAAY,UAAU,MAAM,OAAO,GAAG;~~EAC1C~~,IAAI,SAAS,MAAM,SAAS;EAE5B,QAAQ,MAAM,mBAAmB;CACnC,GAAG,CAAC,UAAU,MAAM,SAAS,OAAO,CAAC;CAErC,WAAW,OAAO;CAElB,MAAM,QAAQ,YAAY,QAAQ,KAAK;~~CACvC~~,KAAK,SAAS,KAAK;CACnB,MAAM,EAAE,OAAO,eAAe,sBAAsB,mBAAmB,KAAK,SAAS,CAAC;CAEtF,OACE,oBAAC,wBAAD;EACE,OAAO;GACL;GACA;GACA;GACA;GACA;GACA,cAAc;GACd;GACA;GACA;GACA;GACA;GACA;EACF;EAEC;CACqB,CAAA;AAE5B"}
1	+ {"version":3,"file":"tooltip-root.js","names":[],"sources":["../../../../src/ui/tooltip/tooltip-root.tsx"],"sourcesContent":["import { type TooltipProps as CoreTooltipProps, TooltipCore, TooltipDataAttrs } from '@videojs/core';\nimport {\n createTooltip,\n createTransition,\n type PositioningBoundary,\n type TooltipChangeDetails,\n} from '@videojs/core/dom';\nimport { useSnapshot } from '@videojs/store/react';\nimport { isUndefined } from '@videojs/utils/predicate';\nimport type { ReactNode } from 'react';\nimport { useEffect, useState } from 'react';\n\nimport { useOptionalContainer } from '../../player/context';\nimport { useOptionalPopupGroup } from '../../player/popup-group-context';\nimport { useDestroy } from '../../utils/use-destroy';\nimport { useLatestRef } from '../../utils/use-latest-ref';\nimport { useSafeId } from '../../utils/use-safe-id';\nimport { useOptionalControlsContext } from '../controls/context';\nimport { usePositionedState } from '../hooks/use-positioned-state';\nimport { type TooltipContent, TooltipContextProvider } from './context';\nimport { useTooltipGroup } from './group-context';\n\nexport interface TooltipRootProps extends CoreTooltipProps {\n /** Boundary used to constrain the popup size. /\n boundary?: PositioningBoundary;\n /* Called when the tooltip open state changes (fires immediately, before animations). /\n onOpenChange?: (open: boolean, details: TooltipChangeDetails) => void;\n /* Called after open/close animations complete. */\n onOpenChangeComplete?: (open: boolean) => void;\n children?: ReactNode;\n}\n\nexport function TooltipRoot({\n open: controlledOpen,\n defaultOpen = TooltipCore.defaultProps.defaultOpen,\n onOpenChange: onOpenChangeProp,\n onOpenChangeComplete: onOpenChangeCompleteProp,\n delay = TooltipCore.defaultProps.delay,\n closeDelay = TooltipCore.defaultProps.closeDelay,\n disableHoverablePopup = TooltipCore.defaultProps.disableHoverablePopup,\n disabled = TooltipCore.defaultProps.disabled,\n sticky = TooltipCore.defaultProps.sticky,\n boundary = 'container',\n children,\n ...coreProps\n}: TooltipRootProps): ReactNode {\n const container = useOptionalContainer();\n const popupGroup = useOptionalPopupGroup();\n const controls = useOptionalControlsContext();\n const [core] = useState(() => new TooltipCore(coreProps));\n\n core.setProps(coreProps);\n\n const isControlled = !isUndefined(controlledOpen);\n\n const groupFromContext = useTooltipGroup();\n\n // Keep refs that always point to the latest values so the\n // createTooltip closure never reads stale props.\n const onOpenChangeRef = useLatestRef(onOpenChangeProp);\n const onOpenChangeCompleteRef = useLatestRef(onOpenChangeCompleteProp);\n const delayRef = useLatestRef(delay);\n const closeDelayRef = useLatestRef(closeDelay);\n const disableHoverablePopupRef = useLatestRef(disableHoverablePopup);\n const disabledRef = useLatestRef(disabled);\n const stickyRef = useLatestRef(sticky);\n const groupRef = useLatestRef(groupFromContext);\n const popupGroupRef = useLatestRef(popupGroup);\n\n const [tooltip] = useState(() => {\n const instance = createTooltip({\n transition: createTransition(),\n onOpenChange: (nextOpen: boolean, details: TooltipChangeDetails) => {\n onOpenChangeRef.current?.(nextOpen, details);\n },\n onOpenChangeComplete: (nextOpen: boolean) => {\n onOpenChangeCompleteRef.current?.(nextOpen);\n },\n delay: () => delayRef.current,\n closeDelay: () => closeDelayRef.current,\n disableHoverablePopup: () => disableHoverablePopupRef.current,\n disabled: () => disabledRef.current,\n sticky: () => stickyRef.current,\n group: () => groupRef.current,\n popupGroup: () => popupGroupRef.current,\n });\n\n // Apply defaultOpen on creation (uncontrolled only)\n if (!isControlled && defaultOpen) {\n instance.open();\n }\n\n return instance;\n });\n\n const [content, setContent] = useState<TooltipContent \| undefined>();\n\n const anchorName = useSafeId();\n const popupId = useSafeId('tooltip');\n\n // Sync controlled open prop -> internal input state.\n useEffect(() => {\n if (isUndefined(controlledOpen)) return;\n\n const { active: inputOpen } = tooltip.input.current;\n if (controlledOpen === inputOpen) return;\n\n if (controlledOpen) {\n tooltip.open();\n } else {\n tooltip.close();\n }\n }, [controlledOpen, tooltip]);\n\n useEffect(() => {\n if (isUndefined(controls?.state.visible)) return;\n\n if (controls.state.visible) return;\n\n tooltip.close('imperative-action');\n }, [controls?.state.visible, tooltip]);\n\n useDestroy(tooltip);\n\n const input = useSnapshot(tooltip.input);\n\n core.setInput(input);\n const { state, preferredSide, setPositionedSide } = usePositionedState(core.getState());\n\n return (\n <TooltipContextProvider\n value={{\n core,\n tooltip,\n state,\n preferredSide,\n setPositionedSide,\n stateAttrMap: TooltipDataAttrs,\n anchorName,\n popupId,\n content,\n setContent,\n boundary,\n container,\n }}\n >\n {children}\n </TooltipContextProvider>\n );\n}\n\nexport namespace TooltipRoot {\n export type Props = TooltipRootProps;\n}\n"],"mappings":";;;;;;;;;;;;;;;;AAgCA,SAAgB,YAAY,EAC1B,MAAM,gBACN,cAAc,YAAY,aAAa,aACvC,cAAc,kBACd,sBAAsB,0BACtB,QAAQ,YAAY,aAAa,OACjC,aAAa,YAAY,aAAa,YACtC,wBAAwB,YAAY,aAAa,uBACjD,WAAW,YAAY,aAAa,UACpC,SAAS,YAAY,aAAa,QAClC,WAAW,aACX,UACA,GAAG,aAC2B;CAC9B,MAAM,YAAY,qBAAqB;CACvC,MAAM,aAAa,sBAAsB;CACzC,MAAM,WAAW,2BAA2B;CAC5C,MAAM,CAAC,QAAQ,eAAe,IAAI,YAAY,SAAS,CAAC;CAExD,KAAK,SAAS,SAAS;CAEvB,MAAM,eAAe,CAAC,YAAY,cAAc;CAEhD,MAAM,mBAAmB,gBAAgB;CAIzC,MAAM,kBAAkB,aAAa,gBAAgB;CACrD,MAAM,0BAA0B,aAAa,wBAAwB;CACrE,MAAM,WAAW,aAAa,KAAK;CACnC,MAAM,gBAAgB,aAAa,UAAU;CAC7C,MAAM,2BAA2B,aAAa,qBAAqB;CACnE,MAAM,cAAc,aAAa,QAAQ;CACzC,MAAM,YAAY,aAAa,MAAM;CACrC,MAAM,WAAW,aAAa,gBAAgB;CAC9C,MAAM,gBAAgB,aAAa,UAAU;CAE7C,MAAM,CAAC,WAAW,eAAe;EAC/B,MAAM,WAAW,cAAc;GAC7B,YAAY,iBAAiB;GAC7B,eAAe,UAAmB,YAAkC;IAClE,gBAAgB,UAAU,UAAU,OAAO;GAC7C;GACA,uBAAuB,aAAsB;IAC3C,wBAAwB,UAAU,QAAQ;GAC5C;GACA,aAAa,SAAS;GACtB,kBAAkB,cAAc;GAChC,6BAA6B,yBAAyB;GACtD,gBAAgB,YAAY;GAC5B,cAAc,UAAU;GACxB,aAAa,SAAS;GACtB,kBAAkB,cAAc;EAClC,CAAC;EAGD,IAAI,CAAC,gBAAgB,aACnB,SAAS,KAAK;EAGhB,OAAO;CACT,CAAC;CAED,MAAM,CAAC,SAAS,cAAc,SAAqC;CAEnE,MAAM,aAAa,UAAU;CAC7B,MAAM,UAAU,UAAU,SAAS;CAGnC,gBAAgB;EACd,IAAI,YAAY,cAAc,GAAG;EAEjC,MAAM,EAAE,QAAQ,cAAc,QAAQ,MAAM;EAC5C,IAAI,mBAAmB,WAAW;EAElC,IAAI,gBACF,QAAQ,KAAK;OAEb,QAAQ,MAAM;CAElB,GAAG,CAAC,gBAAgB,OAAO,CAAC;CAE5B,gBAAgB;EACd,IAAI,YAAY,UAAU,MAAM,OAAO,GAAG;EAE1C,IAAI,SAAS,MAAM,SAAS;EAE5B,QAAQ,MAAM,mBAAmB;CACnC,GAAG,CAAC,UAAU,MAAM,SAAS,OAAO,CAAC;CAErC,WAAW,OAAO;CAElB,MAAM,QAAQ,YAAY,QAAQ,KAAK;CAEvC,KAAK,SAAS,KAAK;CACnB,MAAM,EAAE,OAAO,eAAe,sBAAsB,mBAAmB,KAAK,SAAS,CAAC;CAEtF,OACE,oBAAC,wBAAD;EACE,OAAO;GACL;GACA;GACA;GACA;GACA;GACA,cAAc;GACd;GACA;GACA;GACA;GACA;GACA;EACF;EAEC;CACqB,CAAA;AAE5B"}

package/dist/dev/ui/tooltip/tooltip-shortcut.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"tooltip-shortcut.d.ts","names":[],"sources":["../../../../src/ui/tooltip/tooltip-shortcut.tsx"],"mappings":";;;UAOiB,6BAA6B,wBAAwB;;cAGzD,iCAAe,0BAAA,KAAA,+CAAA,cAAA;~~kBAuBX~~;OACH,QAAQ;OACR,QAAQ"}
1	+ {"version":3,"file":"tooltip-shortcut.d.ts","names":[],"sources":["../../../../src/ui/tooltip/tooltip-shortcut.tsx"],"mappings":";;;UAOiB,6BAA6B,wBAAwB;;cAGzD,iCAAe,0BAAA,KAAA,+CAAA,cAAA;kBAoBX;OACH,QAAQ;OACR,QAAQ"}

package/dist/dev/ui/tooltip/tooltip-shortcut.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"tooltip-shortcut.js","names":[],"sources":["../../../../src/ui/tooltip/tooltip-shortcut.tsx"],"sourcesContent":["import type { TooltipState } from '@videojs/core';\nimport { forwardRef } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { useTooltipContext } from './context';\n\nexport interface TooltipShortcutProps extends UIComponentProps<'kbd', TooltipState> {}\n\n/** Keyboard shortcut hint; apply skin `className` (CSS: `media-tooltip__kbd`; Tailwind: `popup.tooltipShortcut`). */\nexport const TooltipShortcut = forwardRef<HTMLElement, TooltipShortcutProps>(function TooltipShortcut(\n { render, className, style, children, ...elementProps },\n forwardedRef\n) {\n const { state, stateAttrMap, content } = useTooltipContext();\n const shortcut = children !== undefined && children !== null ? children : (content?.shortcut ?? null);\n\n if (!shortcut) ~~{\n~~ return null;\n }\n\n return renderElement(\n 'kbd',\n { render, className, style },\n {\n state,\n stateAttrMap,\n ref: forwardedRef,\n props: [elementProps, { children: shortcut }],\n }\n );\n});\n\nexport namespace TooltipShortcut {\n export type Props = TooltipShortcutProps;\n export type State = TooltipState;\n}\n"],"mappings":";;;;;AAUA,MAAa,kBAAkB,WAA8C,SAAS,gBACpF,EAAE,QAAQ,WAAW,OAAO,UAAU,GAAG,gBACzC,cACA;CACA,MAAM,EAAE,OAAO,cAAc,YAAY,kBAAkB;CAC3D,MAAM,WAAW,aAAa,KAAA,KAAa,aAAa,OAAO,WAAY,SAAS,YAAY;~~CAEhG~~,IAAI,CAAC,~~UACH~~,OAAO;~~CAGT~~,OAAO,cACL,OACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EACE;EACA;EACA,KAAK;EACL,OAAO,CAAC,cAAc,EAAE,UAAU,SAAS,CAAC;CAC9C,CACF;AACF,CAAC"}
1	+ {"version":3,"file":"tooltip-shortcut.js","names":[],"sources":["../../../../src/ui/tooltip/tooltip-shortcut.tsx"],"sourcesContent":["import type { TooltipState } from '@videojs/core';\nimport { forwardRef } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { useTooltipContext } from './context';\n\nexport interface TooltipShortcutProps extends UIComponentProps<'kbd', TooltipState> {}\n\n/** Keyboard shortcut hint; apply skin `className` (CSS: `media-tooltip__kbd`; Tailwind: `popup.tooltipShortcut`). */\nexport const TooltipShortcut = forwardRef<HTMLElement, TooltipShortcutProps>(function TooltipShortcut(\n { render, className, style, children, ...elementProps },\n forwardedRef\n) {\n const { state, stateAttrMap, content } = useTooltipContext();\n const shortcut = children !== undefined && children !== null ? children : (content?.shortcut ?? null);\n if (!shortcut) return null;\n\n return renderElement(\n 'kbd',\n { render, className, style },\n {\n state,\n stateAttrMap,\n ref: forwardedRef,\n props: [elementProps, { children: shortcut }],\n }\n );\n});\n\nexport namespace TooltipShortcut {\n export type Props = TooltipShortcutProps;\n export type State = TooltipState;\n}\n"],"mappings":";;;;;AAUA,MAAa,kBAAkB,WAA8C,SAAS,gBACpF,EAAE,QAAQ,WAAW,OAAO,UAAU,GAAG,gBACzC,cACA;CACA,MAAM,EAAE,OAAO,cAAc,YAAY,kBAAkB;CAC3D,MAAM,WAAW,aAAa,KAAA,KAAa,aAAa,OAAO,WAAY,SAAS,YAAY;CAChG,IAAI,CAAC,UAAU,OAAO;CAEtB,OAAO,cACL,OACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EACE;EACA;EACA,KAAK;EACL,OAAO,CAAC,cAAc,EAAE,UAAU,SAAS,CAAC;CAC9C,CACF;AACF,CAAC"}

package/dist/dev/ui/volume-indicator/context.js.map CHANGED Viewed

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

package/dist/dev/ui/volume-indicator/index.parts.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.parts.js","names":[],"sources":["../../../../src/ui/volume-indicator/index.parts.ts"],"sourcesContent":["export { VolumeIndicatorFill as Fill, type VolumeIndicatorFillProps as FillProps } from './volume-indicator-fill';\nexport { VolumeIndicatorRoot as Root, type VolumeIndicatorRootProps as RootProps } from './volume-indicator-root';\nexport {\n VolumeIndicatorValue as Value~~,\n~~ type VolumeIndicatorValueProps as ValueProps~~,\n~~} from './volume-indicator-value';\n"],"mappings":""}
1	+ {"version":3,"file":"index.parts.js","names":[],"sources":["../../../../src/ui/volume-indicator/index.parts.ts"],"sourcesContent":["export { VolumeIndicatorFill as Fill, type VolumeIndicatorFillProps as FillProps } from './volume-indicator-fill';\nexport { VolumeIndicatorRoot as Root, type VolumeIndicatorRootProps as RootProps } from './volume-indicator-root';\nexport { VolumeIndicatorValue as Value, type VolumeIndicatorValueProps as ValueProps } from './volume-indicator-value';\n"],"mappings":""}

package/dist/dev/ui/volume-indicator/volume-indicator-fill.js CHANGED Viewed

@@ -1,16 +1,17 @@
 import { renderElement } from "../../utils/use-render.js";
 import { useVolumeIndicatorContext } from "./context.js";
 import { forwardRef } from "react";
-import { isFunction } from "@videojs/utils/predicate";
 import { VolumeIndicatorCSSVars } from "@videojs/core";
+import { isFunction } from "@videojs/utils/predicate";
 //#region src/ui/volume-indicator/volume-indicator-fill.tsx
 const VolumeIndicatorFill = forwardRef(function VolumeIndicatorFill(componentProps, forwardedRef) {
 	const { render, className, style, ...elementProps } = componentProps;
 	const { state } = useVolumeIndicatorContext();
+	const fillStyle = getVolumeIndicatorFillStyle(state, style);
 	return renderElement("div", {
 		render,
 		className,
-		style: getVolumeIndicatorFillStyle(state, style)
+		style: fillStyle
 	}, {
 		state,
 		ref: forwardedRef,

package/dist/dev/ui/volume-indicator/volume-indicator-fill.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"volume-indicator-fill.js","names":[],"sources":["../../../../src/ui/volume-indicator/volume-indicator-fill.tsx"],"sourcesContent":["import { type VolumeIndicatorCore, VolumeIndicatorCSSVars } from '@videojs/core';\nimport { isFunction } from '@videojs/utils/predicate';\nimport type { CSSProperties, ForwardedRef } from 'react';\nimport { forwardRef } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { useVolumeIndicatorContext } from './context';\n\nexport interface VolumeIndicatorFillProps extends UIComponentProps<'div', VolumeIndicatorCore.State> {}\n\nexport const VolumeIndicatorFill = forwardRef(function VolumeIndicatorFill(\n componentProps: VolumeIndicatorFillProps,\n forwardedRef: ForwardedRef<HTMLDivElement>\n) {\n const { render, className, style, ...elementProps } = componentProps;\n const { state } = useVolumeIndicatorContext();\n const fillStyle = getVolumeIndicatorFillStyle(state, style);\n\n return renderElement(\n 'div',\n { render, className, style: fillStyle },\n {\n state,\n ref: forwardedRef,\n props: [elementProps],\n }\n );\n});\n\nexport namespace VolumeIndicatorFill {\n export type Props = VolumeIndicatorFillProps;\n}\n\nfunction getVolumeIndicatorFillStyle(\n state: VolumeIndicatorCore.State,\n style: VolumeIndicatorFillProps['style']\n): VolumeIndicatorFillProps['style'] {\n const vars = state.fill\n ? ({\n [VolumeIndicatorCSSVars.fill]: state.fill,\n } as CSSProperties)\n : undefined;\n\n if (!vars) return style;\n\n if (isFunction(style)) {\n return (nextState) => ({\n ...style(nextState),\n ...vars,\n });\n }\n\n return {\n ...style,\n ...vars,\n };\n}\n"],"mappings":";;;;;;AAWA,MAAa,sBAAsB,WAAW,SAAS,oBACrD,gBACA,cACA;CACA,MAAM,EAAE,QAAQ,WAAW,OAAO,GAAG,iBAAiB;CACtD,MAAM,EAAE,UAAU,0BAA0B;~~CAG5C~~,OAAO,cACL,OACA;EAAE;EAAQ;EAAW,~~OAJL,4BAA4B,~~OAAO~~,KAIf~~;~~CAAE~~,GACtC;EACE;EACA,KAAK;EACL,OAAO,CAAC,YAAY;CACtB,CACF;AACF,CAAC;AAMD,SAAS,4BACP,OACA,OACmC;CACnC,MAAM,OAAO,MAAM,OACd,GACE,uBAAuB,OAAO,MAAM,KACvC,IACA,KAAA;~~CAEJ~~,IAAI,CAAC,MAAM,OAAO;CAElB,IAAI,WAAW,KAAK,GAClB,QAAQ,eAAe;EACrB,GAAG,MAAM,SAAS;EAClB,GAAG;CACL;CAGF,OAAO;EACL,GAAG;EACH,GAAG;CACL;AACF"}
1	+ {"version":3,"file":"volume-indicator-fill.js","names":[],"sources":["../../../../src/ui/volume-indicator/volume-indicator-fill.tsx"],"sourcesContent":["import { type VolumeIndicatorCore, VolumeIndicatorCSSVars } from '@videojs/core';\nimport { isFunction } from '@videojs/utils/predicate';\nimport type { CSSProperties, ForwardedRef } from 'react';\nimport { forwardRef } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { useVolumeIndicatorContext } from './context';\n\nexport interface VolumeIndicatorFillProps extends UIComponentProps<'div', VolumeIndicatorCore.State> {}\n\nexport const VolumeIndicatorFill = forwardRef(function VolumeIndicatorFill(\n componentProps: VolumeIndicatorFillProps,\n forwardedRef: ForwardedRef<HTMLDivElement>\n) {\n const { render, className, style, ...elementProps } = componentProps;\n const { state } = useVolumeIndicatorContext();\n const fillStyle = getVolumeIndicatorFillStyle(state, style);\n\n return renderElement(\n 'div',\n { render, className, style: fillStyle },\n {\n state,\n ref: forwardedRef,\n props: [elementProps],\n }\n );\n});\n\nexport namespace VolumeIndicatorFill {\n export type Props = VolumeIndicatorFillProps;\n}\n\nfunction getVolumeIndicatorFillStyle(\n state: VolumeIndicatorCore.State,\n style: VolumeIndicatorFillProps['style']\n): VolumeIndicatorFillProps['style'] {\n const vars = state.fill\n ? ({\n [VolumeIndicatorCSSVars.fill]: state.fill,\n } as CSSProperties)\n : undefined;\n if (!vars) return style;\n\n if (isFunction(style)) {\n return (nextState) => ({\n ...style(nextState),\n ...vars,\n });\n }\n\n return {\n ...style,\n ...vars,\n };\n}\n"],"mappings":";;;;;;AAWA,MAAa,sBAAsB,WAAW,SAAS,oBACrD,gBACA,cACA;CACA,MAAM,EAAE,QAAQ,WAAW,OAAO,GAAG,iBAAiB;CACtD,MAAM,EAAE,UAAU,0BAA0B;CAC5C,MAAM,YAAY,4BAA4B,OAAO,KAAK;CAE1D,OAAO,cACL,OACA;EAAE;EAAQ;EAAW,OAAO;CAAU,GACtC;EACE;EACA,KAAK;EACL,OAAO,CAAC,YAAY;CACtB,CACF;AACF,CAAC;AAMD,SAAS,4BACP,OACA,OACmC;CACnC,MAAM,OAAO,MAAM,OACd,GACE,uBAAuB,OAAO,MAAM,KACvC,IACA,KAAA;CACJ,IAAI,CAAC,MAAM,OAAO;CAElB,IAAI,WAAW,KAAK,GAClB,QAAQ,eAAe;EACrB,GAAG,MAAM,SAAS;EAClB,GAAG;CACL;CAGF,OAAO;EACL,GAAG;EACH,GAAG;CACL;AACF"}

package/dist/dev/ui/volume-indicator/volume-indicator-root.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"volume-indicator-root.d.ts","names":[],"sources":["../../../../src/ui/volume-indicator/volume-indicator-root.tsx"],"mappings":";;;UAUiB,iCACP,wBAAwB,oBAAoB,~~QAClD~~,KAAK,oBAAoB;~~cAEhB~~,qCAAmB,0BAAA,KAAA,mDAAA,cAAA;~~kBAiCf~~;OACH,QAAQ;OACR,QAAQ,oBAAoB"}
1	+ {"version":3,"file":"volume-indicator-root.d.ts","names":[],"sources":["../../../../src/ui/volume-indicator/volume-indicator-root.tsx"],"mappings":";;;UAUiB,iCACP,wBAAwB,oBAAoB,QAAQ,KAAK,oBAAoB;cAE1E,qCAAmB,0BAAA,KAAA,mDAAA,cAAA;kBAgCf;OACH,QAAQ;OACR,QAAQ,oBAAoB"}

package/dist/dev/ui/volume-indicator/volume-indicator-root.js CHANGED Viewed

@@ -8,9 +8,10 @@ import { VolumeIndicatorCore, VolumeIndicatorDataAttrs, createInputIndicatorLabe
 //#region src/ui/volume-indicator/volume-indicator-root.tsx
 const VolumeIndicatorRoot = forwardRef(function VolumeIndicatorRoot(componentProps, forwardedRef) {
 	const { render, className, style, closeDelay, ...elementProps } = componentProps;
+	const translator = useTranslator();
 	const { elementRef, present, state } = useInputIndicatorRoot(() => new VolumeIndicatorCore(), {
 		closeDelay,
-		labels: createInputIndicatorLabels(useTranslator())
+		labels: createInputIndicatorLabels(translator)
 	}, { replayOnUpdate: false });
 	if (!present) return null;
 	return /* @__PURE__ */ jsx(VolumeIndicatorProvider, {

package/dist/dev/ui/volume-indicator/volume-indicator-root.js.map CHANGED Viewed

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

package/dist/dev/ui/volume-popover/context.js ADDED Viewed

@@ -0,0 +1,13 @@
+import { createContext, useContext } from "react";
+//#region src/ui/volume-popover/context.tsx
+const VolumePopoverContext = createContext(null);
+const VolumePopoverContextProvider = VolumePopoverContext.Provider;
+function useVolumePopoverContext() {
+	const context = useContext(VolumePopoverContext);
+	if (!context) throw new Error("VolumePopover compound components must be used within a VolumePopover.Root");
+	return context;
+}
+//#endregion
+export { VolumePopoverContextProvider, useVolumePopoverContext };
+//# sourceMappingURL=context.js.map