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

package/dist/dev/ui/playback-rate/use-playback-rate-options.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-playback-rate-options.js","names":["PlaybackRateRadioGroupCoreClass"],"sources":["../../../../src/ui/playback-rate/use-playback-rate-options.ts"],"sourcesContent":["'use client';\n\nimport {\n  type PlaybackRateRadioGroupCore,\n  PlaybackRateRadioGroupCore as PlaybackRateRadioGroupCoreClass,\n} from '@videojs/core';\nimport { logMissingFeature, selectPlaybackRate } from '@videojs/core/dom';\nimport { useCallback, useState } from 'react';\n\nimport { usePlayer } from '../../player/context';\n\nexport interface PlaybackRateOptionsProps extends PlaybackRateRadioGroupCore.Props {}\n\nexport interface PlaybackRateOption {\n  rate: number;\n  value: string;\n  label: string;\n  disabled: boolean;\n}\n\nexport interface PlaybackRateOptionsResult {\n  state: PlaybackRateRadioGroupCore.State;\n  rate: number;\n  value: string;\n  options: PlaybackRateOption[];\n  disabled: boolean;\n  setRate: (rate: number) => void;\n  setValue: (value: string) => void;\n}\n\nexport function usePlaybackRateOptions(props?: PlaybackRateOptionsProps): PlaybackRateOptionsResult | null {\n  const media = usePlayer(selectPlaybackRate);\n  const [core] = useState(() => new PlaybackRateRadioGroupCoreClass());\n\n  core.setProps(props ?? {});\n\n  const setRate = useCallback((rate: number) => core.select(media!, rate), [core, media]);\n  const setValue = useCallback((value: string) => core.selectValue(media!, value), [core, media]);\n\n  if (!media) {\n    if (__DEV__) logMissingFeature('usePlaybackRateOptions', selectPlaybackRate.displayName ?? 'playbackRate');\n    return null;\n  }\n\n  core.setMedia(media);\n  const state = core.getState();\n\n  return {\n    state,\n    rate: state.rate,\n    value: core.getRateValue(state.rate),\n    options: state.rates.map((rate) => ({\n      rate,\n      value: core.getRateValue(rate),\n      label: core.getRateLabel(rate),\n      disabled: state.disabled,\n    })),\n    disabled: state.disabled,\n    setRate,\n    setValue,\n  };\n}\n\nexport namespace usePlaybackRateOptions {\n  export type Props = PlaybackRateOptionsProps;\n  export type Result = PlaybackRateOptionsResult;\n  export type Option = PlaybackRateOption;\n}\n"],"mappings":";;;;;;AA8BA,SAAgB,uBAAuB,OAAoE;CACzG,MAAM,QAAQ,UAAU,mBAAmB;CAC3C,MAAM,CAAC,QAAQ,eAAe,IAAIA,4BAAiC,CAAC;AAEpE,MAAK,SAAS,SAAS,EAAE,CAAC;CAE1B,MAAM,UAAU,aAAa,SAAiB,KAAK,OAAO,OAAQ,KAAK,EAAE,CAAC,MAAM,MAAM,CAAC;CACvF,MAAM,WAAW,aAAa,UAAkB,KAAK,YAAY,OAAQ,MAAM,EAAE,CAAC,MAAM,MAAM,CAAC;AAE/F,KAAI,CAAC,OAAO;AACG,oBAAkB,0BAA0B,mBAAmB,eAAe,eAAe;AAC1G,SAAO;;AAGT,MAAK,SAAS,MAAM;CACpB,MAAM,QAAQ,KAAK,UAAU;AAE7B,QAAO;EACL;EACA,MAAM,MAAM;EACZ,OAAO,KAAK,aAAa,MAAM,KAAK;EACpC,SAAS,MAAM,MAAM,KAAK,UAAU;GAClC;GACA,OAAO,KAAK,aAAa,KAAK;GAC9B,OAAO,KAAK,aAAa,KAAK;GAC9B,UAAU,MAAM;GACjB,EAAE;EACH,UAAU,MAAM;EAChB;EACA;EACD"}

package/dist/dev/ui/playback-rate-button/playback-rate-button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"playback-rate-button.d.ts","names":[],"sources":["../../../../src/ui/playback-rate-button/playback-rate-button.tsx"],"mappings":";;;;;UAQiB,uBAAA,SACP,gBAAA,WAA2B,sBAAA,CAAuB,KAAA,GACxD,sBAAA,CAAuB,KAAA;;AAF3B;;;;;;;;;;;;;;;cAoBa,kBAAA,EAAkB,OAAA,CAAA,yBAAA,CAAA,uBAAA,GAAA,OAAA,CAAA,aAAA,CAAA,iBAAA;AAAA,kBAQd,kBAAA;EAAA,KACH,KAAA,GAAQ,uBAAA;EAAA,KACR,KAAA,GAAQ,sBAAA,CAAuB,KAAA;AAAA"}
+{"version":3,"file":"playback-rate-button.d.ts","names":[],"sources":["../../../../src/ui/playback-rate-button/playback-rate-button.tsx"],"mappings":";;;;;UAQiB,uBAAA,SACP,gBAAA,WAA2B,sBAAA,CAAuB,KAAA,GACxD,sBAAA,CAAuB,KAAA;;AAF3B;;;;;;;;;;;;;;;cAoBa,kBAAA,EAAkB,OAAA,CAAA,yBAAA,CAAA,uBAAA,GAAA,OAAA,CAAA,aAAA,CAAA,iBAAA;AAAA,kBASd,kBAAA;EAAA,KACH,KAAA,GAAQ,uBAAA;EAAA,KACR,KAAA,GAAQ,sBAAA,CAAuB,KAAA;AAAA"}

package/dist/dev/ui/playback-rate-button/playback-rate-button.js

@@ -24,7 +24,8 @@ const PlaybackRateButton = createMediaButton({
 	core: PlaybackRateButtonCore,
 	stateAttrMap: PlaybackRateButtonDataAttrs,
 	selector: selectPlaybackRate,
-	action: (core, state) => core.cycle(state)
+	action: (core, state) => core.cycle(state),
+	hotkeyAction: "speedUp"
 });
 //#endregion
 export { PlaybackRateButton };

package/dist/dev/ui/playback-rate-button/playback-rate-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"playback-rate-button.js","names":[],"sources":["../../../../src/ui/playback-rate-button/playback-rate-button.tsx"],"sourcesContent":["'use client';\n\nimport { PlaybackRateButtonCore, PlaybackRateButtonDataAttrs } from '@videojs/core';\nimport { selectPlaybackRate } from '@videojs/core/dom';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { createMediaButton } from '../create-media-button';\n\nexport interface PlaybackRateButtonProps\n  extends UIComponentProps<'button', PlaybackRateButtonCore.State>,\n    PlaybackRateButtonCore.Props {}\n\n/**\n * A button that cycles through playback rates.\n *\n * @example\n * ```tsx\n * <PlaybackRateButton />\n *\n * <PlaybackRateButton\n *   render={(props, state) => (\n *     <button {...props}>\n *       {state.rate}&times;\n *     </button>\n *   )}\n * />\n * ```\n */\nexport const PlaybackRateButton = createMediaButton<PlaybackRateButtonCore, PlaybackRateButtonProps>({\n  displayName: 'PlaybackRateButton',\n  core: PlaybackRateButtonCore,\n  stateAttrMap: PlaybackRateButtonDataAttrs,\n  selector: selectPlaybackRate,\n  action: (core, state) => core.cycle(state),\n});\n\nexport namespace PlaybackRateButton {\n  export type Props = PlaybackRateButtonProps;\n  export type State = PlaybackRateButtonCore.State;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AA4BA,MAAa,qBAAqB,kBAAmE;CACnG,aAAa;CACb,MAAM;CACN,cAAc;CACd,UAAU;CACV,SAAS,MAAM,UAAU,KAAK,MAAM,MAAM;CAC3C,CAAC"}
+{"version":3,"file":"playback-rate-button.js","names":[],"sources":["../../../../src/ui/playback-rate-button/playback-rate-button.tsx"],"sourcesContent":["'use client';\n\nimport { PlaybackRateButtonCore, PlaybackRateButtonDataAttrs } from '@videojs/core';\nimport { selectPlaybackRate } from '@videojs/core/dom';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { createMediaButton } from '../create-media-button';\n\nexport interface PlaybackRateButtonProps\n  extends UIComponentProps<'button', PlaybackRateButtonCore.State>,\n    PlaybackRateButtonCore.Props {}\n\n/**\n * A button that cycles through playback rates.\n *\n * @example\n * ```tsx\n * <PlaybackRateButton />\n *\n * <PlaybackRateButton\n *   render={(props, state) => (\n *     <button {...props}>\n *       {state.rate}&times;\n *     </button>\n *   )}\n * />\n * ```\n */\nexport const PlaybackRateButton = createMediaButton<PlaybackRateButtonCore, PlaybackRateButtonProps>({\n  displayName: 'PlaybackRateButton',\n  core: PlaybackRateButtonCore,\n  stateAttrMap: PlaybackRateButtonDataAttrs,\n  selector: selectPlaybackRate,\n  action: (core, state) => core.cycle(state),\n  hotkeyAction: 'speedUp',\n});\n\nexport namespace PlaybackRateButton {\n  export type Props = PlaybackRateButtonProps;\n  export type State = PlaybackRateButtonCore.State;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AA4BA,MAAa,qBAAqB,kBAAmE;CACnG,aAAa;CACb,MAAM;CACN,cAAc;CACd,UAAU;CACV,SAAS,MAAM,UAAU,KAAK,MAAM,MAAM;CAC1C,cAAc;CACf,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"poster.d.ts","names":[],"sources":["../../../../src/ui/poster/poster.tsx"],"mappings":";;;;;UAWiB,WAAA,SAAoB,gBAAA,QAAwB,UAAA,CAAW,KAAA;;AAAxE;;;;;;;;;AAgBA;;;;cAAa,MAAA,EAAM,OAAA,CAAA,yBAAA,CAAA,IAAA,CAAA,WAAA,WAAA,OAAA,CAAA,aAAA,CAAA,gBAAA;AAAA,kBA6BF,MAAA;EAAA,KACH,KAAA,GAAQ,WAAA;EAAA,KACR,KAAA,GAAQ,UAAA,CAAW,KAAA;AAAA"}
+{"version":3,"file":"poster.d.ts","names":[],"sources":["../../../../src/ui/poster/poster.tsx"],"mappings":";;;;;UAWiB,WAAA,SAAoB,gBAAA,QAAwB,UAAA,CAAW,KAAA;;AAAxE;;;;;;;;;AAgBA;;;;cAAa,MAAA,EAAM,OAAA,CAAA,yBAAA,CAAA,IAAA,CAAA,WAAA,WAAA,OAAA,CAAA,aAAA,CAAA,gBAAA;AAAA,kBAiDF,MAAA;EAAA,KACH,KAAA,GAAQ,WAAA;EAAA,KACR,KAAA,GAAQ,UAAA,CAAW,KAAA;AAAA"}

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

@@ -2,7 +2,7 @@
 import { usePlayer } from "../../player/context.js";
 import { renderElement } from "../../utils/use-render.js";
 import { logMissingFeature, selectPlayback } from "@videojs/core/dom";
-import { forwardRef, useState } from "react";
+import { forwardRef, useCallback, useEffect, useRef, useState } from "react";
 import { PosterCore, PosterDataAttrs } from "@videojs/core";
 //#region src/ui/poster/poster.tsx
 /**
@@ -23,6 +23,17 @@ const Poster = forwardRef(function Poster(componentProps, forwardedRef) {
 	const { render, className, style, ...elementProps } = componentProps;
 	const playback = usePlayer(selectPlayback);
 	const [core] = useState(() => new PosterCore());
+	const src = elementProps.src;
+	const [loadedSrc, setLoadedSrc] = useState(void 0);
+	const loaded = loadedSrc === src;
+	const imgRef = useRef(null);
+	useEffect(() => {
+		const img = imgRef.current;
+		if (img?.complete && img.naturalWidth > 0 && img.getAttribute("src") === src) setLoadedSrc(src);
+	}, [src]);
+	const handleLoad = useCallback((event) => {
+		setLoadedSrc(event.currentTarget.getAttribute("src") ?? void 0);
+	}, []);
 	if (!playback) {
 		logMissingFeature("Poster", "playback");
 		return null;
@@ -35,8 +46,11 @@ const Poster = forwardRef(function Poster(componentProps, forwardedRef) {
 	}, {
 		state: core.getState(),
 		stateAttrMap: PosterDataAttrs,
-		ref: [forwardedRef],
-		props: [elementProps]
+		ref: [forwardedRef, imgRef],
+		props: [elementProps, {
+			"data-loaded": loaded ? "" : void 0,
+			onLoad: handleLoad
+		}]
 	});
 });
 //#endregion

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

@@ -1 +1 @@
-{"version":3,"file":"poster.js","names":[],"sources":["../../../../src/ui/poster/poster.tsx"],"sourcesContent":["'use client';\n\nimport { PosterCore, PosterDataAttrs } from '@videojs/core';\nimport { logMissingFeature, selectPlayback } from '@videojs/core/dom';\nimport type { ForwardedRef } from 'react';\nimport { forwardRef, useState } from 'react';\n\nimport { usePlayer } from '../../player/context';\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\n\nexport interface PosterProps extends UIComponentProps<'img', PosterCore.State> {}\n\n/**\n * Displays the video poster image. Shows before playback starts, hides after.\n *\n * @example\n * ```tsx\n * <Poster src=\"poster.jpg\" alt=\"Video description\" />\n *\n * <Poster\n *   src=\"poster.jpg\"\n *   alt=\"Video description\"\n *   className={(state) => state.visible ? 'visible' : 'hidden'}\n * />\n * ```\n */\nexport const Poster = forwardRef(function Poster(\n  componentProps: PosterProps,\n  forwardedRef: ForwardedRef<HTMLImageElement>\n) {\n  const { render, className, style, ...elementProps } = componentProps;\n\n  const playback = usePlayer(selectPlayback);\n\n  const [core] = useState(() => new PosterCore());\n\n  if (!playback) {\n    if (__DEV__) logMissingFeature('Poster', 'playback');\n    return null;\n  }\n\n  core.setMedia(playback);\n\n  return renderElement(\n    'img',\n    { render, className, style },\n    {\n      state: core.getState(),\n      stateAttrMap: PosterDataAttrs,\n      ref: [forwardedRef],\n      props: [elementProps],\n    }\n  );\n});\n\nexport namespace Poster {\n  export type Props = PosterProps;\n  export type State = PosterCore.State;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AA2BA,MAAa,SAAS,WAAW,SAAS,OACxC,gBACA,cACA;CACA,MAAM,EAAE,QAAQ,WAAW,OAAO,GAAG,iBAAiB;CAEtD,MAAM,WAAW,UAAU,eAAe;CAE1C,MAAM,CAAC,QAAQ,eAAe,IAAI,YAAY,CAAC;AAE/C,KAAI,CAAC,UAAU;AACA,oBAAkB,UAAU,WAAW;AACpD,SAAO;;AAGT,MAAK,SAAS,SAAS;AAEvB,QAAO,cACL,OACA;EAAE;EAAQ;EAAW;EAAO,EAC5B;EACE,OAAO,KAAK,UAAU;EACtB,cAAc;EACd,KAAK,CAAC,aAAa;EACnB,OAAO,CAAC,aAAa;EACtB,CACF;EACD"}
+{"version":3,"file":"poster.js","names":[],"sources":["../../../../src/ui/poster/poster.tsx"],"sourcesContent":["'use client';\n\nimport { PosterCore, PosterDataAttrs } from '@videojs/core';\nimport { logMissingFeature, selectPlayback } from '@videojs/core/dom';\nimport type { ForwardedRef, SyntheticEvent } from 'react';\nimport { forwardRef, useCallback, useEffect, useRef, useState } from 'react';\n\nimport { usePlayer } from '../../player/context';\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\n\nexport interface PosterProps extends UIComponentProps<'img', PosterCore.State> {}\n\n/**\n * Displays the video poster image. Shows before playback starts, hides after.\n *\n * @example\n * ```tsx\n * <Poster src=\"poster.jpg\" alt=\"Video description\" />\n *\n * <Poster\n *   src=\"poster.jpg\"\n *   alt=\"Video description\"\n *   className={(state) => state.visible ? 'visible' : 'hidden'}\n * />\n * ```\n */\nexport const Poster = forwardRef(function Poster(\n  componentProps: PosterProps,\n  forwardedRef: ForwardedRef<HTMLImageElement>\n) {\n  const { render, className, style, ...elementProps } = componentProps;\n\n  const playback = usePlayer(selectPlayback);\n\n  const [core] = useState(() => new PosterCore());\n\n  // Track when the current src has finished loading so the CSS blur-up\n  // sequence can show the placeholder first, then crossfade to the full image.\n  const src = (elementProps as { src?: string }).src;\n  const [loadedSrc, setLoadedSrc] = useState<string | undefined>(undefined);\n  const loaded = loadedSrc === src;\n  const imgRef = useRef<HTMLImageElement | null>(null);\n\n  // A cached image may already be complete when the element mounts, in which\n  // case onLoad never fires. Check synchronously after mount and on src change.\n  useEffect(() => {\n    const img = imgRef.current;\n    if (img?.complete && img.naturalWidth > 0 && img.getAttribute('src') === src) {\n      setLoadedSrc(src);\n    }\n  }, [src]);\n\n  const handleLoad = useCallback((event: SyntheticEvent<HTMLImageElement>) => {\n    setLoadedSrc(event.currentTarget.getAttribute('src') ?? undefined);\n  }, []);\n\n  if (!playback) {\n    if (__DEV__) logMissingFeature('Poster', 'playback');\n    return null;\n  }\n\n  core.setMedia(playback);\n\n  return renderElement(\n    'img',\n    { render, className, style },\n    {\n      state: core.getState(),\n      stateAttrMap: PosterDataAttrs,\n      ref: [forwardedRef, imgRef],\n      props: [elementProps, { 'data-loaded': loaded ? '' : undefined, onLoad: handleLoad }],\n    }\n  );\n});\n\nexport namespace Poster {\n  export type Props = PosterProps;\n  export type State = PosterCore.State;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AA2BA,MAAa,SAAS,WAAW,SAAS,OACxC,gBACA,cACA;CACA,MAAM,EAAE,QAAQ,WAAW,OAAO,GAAG,iBAAiB;CAEtD,MAAM,WAAW,UAAU,eAAe;CAE1C,MAAM,CAAC,QAAQ,eAAe,IAAI,YAAY,CAAC;CAI/C,MAAM,MAAO,aAAkC;CAC/C,MAAM,CAAC,WAAW,gBAAgB,SAA6B,KAAA,EAAU;CACzE,MAAM,SAAS,cAAc;CAC7B,MAAM,SAAS,OAAgC,KAAK;AAIpD,iBAAgB;EACd,MAAM,MAAM,OAAO;AACnB,MAAI,KAAK,YAAY,IAAI,eAAe,KAAK,IAAI,aAAa,MAAM,KAAK,IACvE,cAAa,IAAI;IAElB,CAAC,IAAI,CAAC;CAET,MAAM,aAAa,aAAa,UAA4C;AAC1E,eAAa,MAAM,cAAc,aAAa,MAAM,IAAI,KAAA,EAAU;IACjE,EAAE,CAAC;AAEN,KAAI,CAAC,UAAU;AACA,oBAAkB,UAAU,WAAW;AACpD,SAAO;;AAGT,MAAK,SAAS,SAAS;AAEvB,QAAO,cACL,OACA;EAAE;EAAQ;EAAW;EAAO,EAC5B;EACE,OAAO,KAAK,UAAU;EACtB,cAAc;EACd,KAAK,CAAC,cAAc,OAAO;EAC3B,OAAO,CAAC,cAAc;GAAE,eAAe,SAAS,KAAK,KAAA;GAAW,QAAQ;GAAY,CAAC;EACtF,CACF;EACD"}

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

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

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

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

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

@@ -0,0 +1,27 @@
+import { QualityRadioGroupCore } from "@videojs/core";
+
+//#region src/ui/quality/use-quality-options.d.ts
+interface QualityOptionsProps extends QualityRadioGroupCore.Props {}
+interface QualityOption {
+  value: string;
+  label: string;
+  tier?: string | undefined;
+  badge?: string | undefined;
+  disabled: boolean;
+}
+interface QualityOptionsResult {
+  state: QualityRadioGroupCore.State;
+  value: string;
+  options: QualityOption[];
+  disabled: boolean;
+  setValue: (value: string) => void;
+}
+declare function useQualityOptions(props?: QualityOptionsProps): QualityOptionsResult | null;
+declare namespace useQualityOptions {
+  type Props = QualityOptionsProps;
+  type Result = QualityOptionsResult;
+  type Option = QualityOption;
+}
+//#endregion
+export { QualityOption, QualityOptionsProps, QualityOptionsResult, useQualityOptions };
+//# sourceMappingURL=use-quality-options.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"use-quality-options.d.ts","names":[],"sources":["../../../../src/ui/quality/use-quality-options.ts"],"mappings":";;;UAQiB,mBAAA,SAA4B,qBAAA,CAAsB,KAAA;AAAA,UAElD,aAAA;EACf,KAAA;EACA,KAAA;EACA,IAAA;EACA,KAAA;EACA,QAAA;AAAA;AAAA,UAGe,oBAAA;EACf,KAAA,EAAO,qBAAA,CAAsB,KAAA;EAC7B,KAAA;EACA,OAAA,EAAS,aAAA;EACT,QAAA;EACA,QAAA,GAAW,KAAA;AAAA;AAAA,iBAGG,iBAAA,CAAkB,KAAA,GAAQ,mBAAA,GAAsB,oBAAA;AAAA,kBAoC/C,iBAAA;EAAA,KACH,KAAA,GAAQ,mBAAA;EAAA,KACR,MAAA,GAAS,oBAAA;EAAA,KACT,MAAA,GAAS,aAAA;AAAA"}

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

@@ -0,0 +1,40 @@
+"use client";
+import { usePlayer } from "../../player/context.js";
+import { logMissingFeature, selectQuality } from "@videojs/core/dom";
+import { useCallback, useState } from "react";
+import { QUALITY_AUTO_VALUE, QualityRadioGroupCore } from "@videojs/core";
+//#region src/ui/quality/use-quality-options.ts
+function useQualityOptions(props) {
+	"use no memo";
+	const media = usePlayer(selectQuality);
+	const [core] = useState(() => new QualityRadioGroupCore());
+	core.setProps(props ?? {});
+	const setValue = useCallback((value) => core.selectValue(media, value), [core, media]);
+	if (!media) {
+		logMissingFeature("useQualityOptions", selectQuality.displayName ?? "quality");
+		return null;
+	}
+	core.setMedia(media);
+	const state = core.getState();
+	return {
+		state,
+		value: state.value,
+		options: [{
+			value: QUALITY_AUTO_VALUE,
+			label: state.autoLabel,
+			disabled: state.disabled
+		}, ...state.renditions.map((rendition) => ({
+			value: rendition.value,
+			label: rendition.label,
+			...rendition.tier && { tier: rendition.tier },
+			...rendition.badge && { badge: rendition.badge },
+			disabled: state.disabled
+		}))],
+		disabled: state.disabled,
+		setValue
+	};
+}
+//#endregion
+export { useQualityOptions };
+
+//# sourceMappingURL=use-quality-options.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"use-quality-options.js","names":[],"sources":["../../../../src/ui/quality/use-quality-options.ts"],"sourcesContent":["'use client';\n\nimport { QUALITY_AUTO_VALUE, QualityRadioGroupCore } from '@videojs/core';\nimport { logMissingFeature, selectQuality } from '@videojs/core/dom';\nimport { useCallback, useState } from 'react';\n\nimport { usePlayer } from '../../player/context';\n\nexport interface QualityOptionsProps extends QualityRadioGroupCore.Props {}\n\nexport interface QualityOption {\n  value: string;\n  label: string;\n  tier?: string | undefined;\n  badge?: string | undefined;\n  disabled: boolean;\n}\n\nexport interface QualityOptionsResult {\n  state: QualityRadioGroupCore.State;\n  value: string;\n  options: QualityOption[];\n  disabled: boolean;\n  setValue: (value: string) => void;\n}\n\nexport function useQualityOptions(props?: QualityOptionsProps): QualityOptionsResult | null {\n  'use no memo';\n\n  const media = usePlayer(selectQuality);\n  const [core] = useState(() => new QualityRadioGroupCore());\n\n  core.setProps(props ?? {});\n\n  const setValue = useCallback((value: string) => core.selectValue(media!, value), [core, media]);\n\n  if (!media) {\n    if (__DEV__) logMissingFeature('useQualityOptions', selectQuality.displayName ?? 'quality');\n    return null;\n  }\n\n  core.setMedia(media);\n  const state = core.getState();\n\n  return {\n    state,\n    value: state.value,\n    options: [\n      { value: QUALITY_AUTO_VALUE, label: state.autoLabel, disabled: state.disabled },\n      ...state.renditions.map((rendition) => ({\n        value: rendition.value,\n        label: rendition.label,\n        ...(rendition.tier && { tier: rendition.tier }),\n        ...(rendition.badge && { badge: rendition.badge }),\n        disabled: state.disabled,\n      })),\n    ],\n    disabled: state.disabled,\n    setValue,\n  };\n}\n\nexport namespace useQualityOptions {\n  export type Props = QualityOptionsProps;\n  export type Result = QualityOptionsResult;\n  export type Option = QualityOption;\n}\n"],"mappings":";;;;;;AA0BA,SAAgB,kBAAkB,OAA0D;AAC1F;CAEA,MAAM,QAAQ,UAAU,cAAc;CACtC,MAAM,CAAC,QAAQ,eAAe,IAAI,uBAAuB,CAAC;AAE1D,MAAK,SAAS,SAAS,EAAE,CAAC;CAE1B,MAAM,WAAW,aAAa,UAAkB,KAAK,YAAY,OAAQ,MAAM,EAAE,CAAC,MAAM,MAAM,CAAC;AAE/F,KAAI,CAAC,OAAO;AACG,oBAAkB,qBAAqB,cAAc,eAAe,UAAU;AAC3F,SAAO;;AAGT,MAAK,SAAS,MAAM;CACpB,MAAM,QAAQ,KAAK,UAAU;AAE7B,QAAO;EACL;EACA,OAAO,MAAM;EACb,SAAS,CACP;GAAE,OAAO;GAAoB,OAAO,MAAM;GAAW,UAAU,MAAM;GAAU,EAC/E,GAAG,MAAM,WAAW,KAAK,eAAe;GACtC,OAAO,UAAU;GACjB,OAAO,UAAU;GACjB,GAAI,UAAU,QAAQ,EAAE,MAAM,UAAU,MAAM;GAC9C,GAAI,UAAU,SAAS,EAAE,OAAO,UAAU,OAAO;GACjD,UAAU,MAAM;GACjB,EAAE,CACJ;EACD,UAAU,MAAM;EAChB;EACD"}

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

@@ -1 +1 @@
-{"version":3,"file":"seek-button.d.ts","names":[],"sources":["../../../../src/ui/seek-button/seek-button.tsx"],"mappings":";;;;;UAQiB,eAAA,SAAwB,gBAAA,WAA2B,cAAA,CAAe,KAAA,GAAQ,cAAA,CAAe,KAAA;;AAA1G;;;;;;;;;;;;;;;AAmBA;cAAa,UAAA,EAAU,OAAA,CAAA,yBAAA,CAAA,eAAA,GAAA,OAAA,CAAA,aAAA,CAAA,iBAAA;AAAA,kBAQN,UAAA;EAAA,KACH,KAAA,GAAQ,eAAA;EAAA,KACR,KAAA,GAAQ,cAAA,CAAe,KAAA;AAAA"}
+{"version":3,"file":"seek-button.d.ts","names":[],"sources":["../../../../src/ui/seek-button/seek-button.tsx"],"mappings":";;;;;UAQiB,eAAA,SAAwB,gBAAA,WAA2B,cAAA,CAAe,KAAA,GAAQ,cAAA,CAAe,KAAA;;AAA1G;;;;;;;;;;;;;;;AAmBA;cAAa,UAAA,EAAU,OAAA,CAAA,yBAAA,CAAA,eAAA,GAAA,OAAA,CAAA,aAAA,CAAA,iBAAA;AAAA,kBAUN,UAAA;EAAA,KACH,KAAA,GAAQ,eAAA;EAAA,KACR,KAAA,GAAQ,cAAA,CAAe,KAAA;AAAA"}

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

@@ -25,7 +25,9 @@ const SeekButton = createMediaButton({
 	core: SeekButtonCore,
 	stateAttrMap: SeekButtonDataAttrs,
 	selector: selectTime,
-	action: (core, state) => core.seek(state)
+	action: (core, state) => core.seek(state),
+	hotkeyAction: "seekStep",
+	hotkeyValue: (props) => typeof props.seconds === "number" ? props.seconds : SeekButtonCore.defaultProps.seconds
 });
 //#endregion
 export { SeekButton };

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"time-value.d.ts","names":[],"sources":["../../../../src/ui/time/time-value.tsx"],"mappings":";;;;;UAWiB,UAAA,SAAmB,IAAA,CAAK,gBAAA,SAAyB,QAAA,CAAS,KAAA,gBAAqB,QAAA,CAAS,KAAA;;AAAzG;;;;;;;;;cAYa,KAAA,EAAK,OAAA,CAAA,yBAAA,CAAA,IAAA,CAAA,UAAA,WAAA,OAAA,CAAA,aAAA,CAAA,eAAA;AAAA,kBA+CD,KAAA;EAAA,KACH,KAAA,GAAQ,UAAA;EAAA,KACR,KAAA,GAAQ,QAAA,CAAS,KAAA;AAAA"}
+{"version":3,"file":"time-value.d.ts","names":[],"sources":["../../../../src/ui/time/time-value.tsx"],"mappings":";;;;;UAWiB,UAAA,SAAmB,IAAA,CAAK,gBAAA,SAAyB,QAAA,CAAS,KAAA,gBAAqB,QAAA,CAAS,KAAA;;AAAzG;;;;;;;;;cAYa,KAAA,EAAK,OAAA,CAAA,yBAAA,CAAA,IAAA,CAAA,UAAA,WAAA,OAAA,CAAA,aAAA,CAAA,eAAA;AAAA,kBA6ED,KAAA;EAAA,KACH,KAAA,GAAQ,UAAA;EAAA,KACR,KAAA,GAAQ,QAAA,CAAS,KAAA;AAAA"}

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

@@ -2,9 +2,10 @@
 import { usePlayer } from "../../player/context.js";
 import { renderElement } from "../../utils/use-render.js";
 import { logMissingFeature, selectTime } from "@videojs/core/dom";
-import { forwardRef, useState } from "react";
+import { forwardRef, useEffect, useState } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { TimeCore, TimeDataAttrs } from "@videojs/core";
+import { isInteractiveActivation } from "@videojs/utils/dom";
 //#region src/ui/time/time-value.tsx
 /**
 * Displays a formatted time value (current, duration, or remaining).
@@ -17,13 +18,19 @@ import { TimeCore, TimeDataAttrs } from "@videojs/core";
 * ```
 */
 const Value = forwardRef(function Value(componentProps, forwardedRef) {
-	const { render, className, style, type, negativeSign, label, ...elementProps } = componentProps;
+	const { render, className, style, type, negativeSign, label, toggle = false, ...elementProps } = componentProps;
 	const time = usePlayer(selectTime);
 	const [core] = useState(() => new TimeCore());
+	const defaultType = type ?? TimeCore.defaultProps.type;
+	const [activeType, setActiveType] = useState(defaultType);
+	useEffect(() => {
+		setActiveType(defaultType);
+	}, [defaultType, toggle]);
 	core.setProps({
-		type,
+		type: activeType,
 		negativeSign,
-		label
+		label,
+		toggle
 	});
 	if (!time) {
 		logMissingFeature("Time.Value", "time");
@@ -35,6 +42,22 @@ const Value = forwardRef(function Value(componentProps, forwardedRef) {
 		"aria-hidden": "true",
 		children: negativeSign ?? TimeCore.defaultProps.negativeSign
 	}), state.text] }) : state.text;
+	const toggleType = () => {
+		setActiveType((value) => {
+			if (defaultType === "current") return value === "remaining" ? "current" : "remaining";
+			return value === "duration" ? "remaining" : "duration";
+		});
+	};
+	const handleClick = (event) => {
+		if (event.defaultPrevented) return;
+		toggleType();
+	};
+	const handleKeyDown = (event) => {
+		if (event.defaultPrevented || !isInteractiveActivation(event.nativeEvent)) return;
+		event.preventDefault();
+		if (event.repeat) return;
+		toggleType();
+	};
 	return renderElement("time", {
 		render,
 		className,
@@ -46,7 +69,11 @@ const Value = forwardRef(function Value(componentProps, forwardedRef) {
 		props: [{
 			dateTime: state.datetime,
 			children: content,
-			...core.getAttrs(state)
+			...core.getAttrs(state, defaultType),
+			...toggle ? {
+				onClick: handleClick,
+				onKeyDown: handleKeyDown
+			} : void 0
 		}, elementProps]
 	});
 });

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

@@ -1 +1 @@
-{"version":3,"file":"time-value.js","names":[],"sources":["../../../../src/ui/time/time-value.tsx"],"sourcesContent":["'use client';\n\nimport { TimeCore, TimeDataAttrs } from '@videojs/core';\nimport { logMissingFeature, selectTime } from '@videojs/core/dom';\nimport 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 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, ...elementProps } = componentProps;\n\n  const time = usePlayer(selectTime);\n\n  const [core] = useState(() => new TimeCore());\n  core.setProps({ type, negativeSign, label });\n\n  if (!time) {\n    if (__DEV__) logMissingFeature('Time.Value', 'time');\n    return null;\n  }\n\n  core.setMedia(time);\n  const state = core.getState();\n\n  const content = state.negative ? (\n    <>\n      <span aria-hidden=\"true\">{negativeSign ?? TimeCore.defaultProps.negativeSign}</span>\n      {state.text}\n    </>\n  ) : (\n    state.text\n  );\n\n  return renderElement(\n    'time',\n    { render, className, style },\n    {\n      state,\n      stateAttrMap: TimeDataAttrs,\n      ref: [forwardedRef],\n      props: [\n        {\n          dateTime: state.datetime,\n          children: content,\n          ...core.getAttrs(state),\n        },\n        elementProps,\n      ],\n    }\n  );\n});\n\nexport namespace Value {\n  export type Props = ValueProps;\n  export type State = TimeCore.State;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAuBA,MAAa,QAAQ,WAAW,SAAS,MACvC,gBACA,cACA;CACA,MAAM,EAAE,QAAQ,WAAW,OAAO,MAAM,cAAc,OAAO,GAAG,iBAAiB;CAEjF,MAAM,OAAO,UAAU,WAAW;CAElC,MAAM,CAAC,QAAQ,eAAe,IAAI,UAAU,CAAC;AAC7C,MAAK,SAAS;EAAE;EAAM;EAAc;EAAO,CAAC;AAE5C,KAAI,CAAC,MAAM;AACI,oBAAkB,cAAc,OAAO;AACpD,SAAO;;AAGT,MAAK,SAAS,KAAK;CACnB,MAAM,QAAQ,KAAK,UAAU;CAE7B,MAAM,UAAU,MAAM,WACpB,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,QAAD;EAAM,eAAY;YAAQ,gBAAgB,SAAS,aAAa;EAAoB,CAAA,EACnF,MAAM,KACN,EAAA,CAAA,GAEH,MAAM;AAGR,QAAO,cACL,QACA;EAAE;EAAQ;EAAW;EAAO,EAC5B;EACE;EACA,cAAc;EACd,KAAK,CAAC,aAAa;EACnB,OAAO,CACL;GACE,UAAU,MAAM;GAChB,UAAU;GACV,GAAG,KAAK,SAAS,MAAM;GACxB,EACD,aACD;EACF,CACF;EACD"}
+{"version":3,"file":"time-value.js","names":[],"sources":["../../../../src/ui/time/time-value.tsx"],"sourcesContent":["'use client';\n\nimport { TimeCore, TimeDataAttrs } from '@videojs/core';\nimport { logMissingFeature, selectTime } from '@videojs/core/dom';\nimport { isInteractiveActivation } from '@videojs/utils/dom';\nimport type { ForwardedRef, KeyboardEvent, MouseEvent } from 'react';\nimport { forwardRef, useEffect, useState } from 'react';\nimport { usePlayer } from '../../player/context';\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\n\nexport interface ValueProps extends Omit<UIComponentProps<'time', TimeCore.State>, 'children'>, TimeCore.Props {}\n\n/**\n * Displays a formatted time value (current, duration, or remaining).\n *\n * @example\n * ```tsx\n * <Time.Value />\n * <Time.Value type=\"duration\" />\n * <Time.Value type=\"remaining\" negativeSign=\"−\" />\n * ```\n */\nexport const Value = forwardRef(function Value(\n  componentProps: ValueProps,\n  forwardedRef: ForwardedRef<HTMLTimeElement>\n) {\n  const { render, className, style, type, negativeSign, label, toggle = false, ...elementProps } = componentProps;\n\n  const time = usePlayer(selectTime);\n  const [core] = useState(() => new TimeCore());\n\n  const defaultType = type ?? TimeCore.defaultProps.type;\n  const [activeType, setActiveType] = useState(defaultType);\n  // biome-ignore lint/correctness/useExhaustiveDependencies: We want to listen for changes to defaultType and toggle (so we revert to default), this just means one less useEffect.\n  useEffect(() => {\n    setActiveType(defaultType);\n  }, [defaultType, toggle]);\n\n  core.setProps({ type: activeType, negativeSign, label, toggle });\n\n  if (!time) {\n    if (__DEV__) logMissingFeature('Time.Value', 'time');\n    return null;\n  }\n\n  core.setMedia(time);\n  const state = core.getState();\n\n  const content = state.negative ? (\n    <>\n      <span aria-hidden=\"true\">{negativeSign ?? TimeCore.defaultProps.negativeSign}</span>\n      {state.text}\n    </>\n  ) : (\n    state.text\n  );\n\n  const toggleType = () => {\n    setActiveType((value) => {\n      if (defaultType === 'current') {\n        return value === 'remaining' ? 'current' : 'remaining';\n      }\n      return value === 'duration' ? 'remaining' : 'duration';\n    });\n  };\n\n  const handleClick = (event: MouseEvent<HTMLTimeElement>) => {\n    if (event.defaultPrevented) return;\n    toggleType();\n  };\n\n  const handleKeyDown = (event: KeyboardEvent<HTMLTimeElement>) => {\n    if (event.defaultPrevented || !isInteractiveActivation(event.nativeEvent)) return;\n    // Prevent space from scrolling page.\n    event.preventDefault();\n    if (event.repeat) return;\n    toggleType();\n  };\n\n  return renderElement(\n    'time',\n    { render, className, style },\n    {\n      state,\n      stateAttrMap: TimeDataAttrs,\n      ref: [forwardedRef],\n      props: [\n        {\n          dateTime: state.datetime,\n          children: content,\n          ...core.getAttrs(state, defaultType),\n          ...(toggle ? { onClick: handleClick, onKeyDown: handleKeyDown } : undefined),\n        },\n        elementProps,\n      ],\n    }\n  );\n});\n\nexport namespace Value {\n  export type Props = ValueProps;\n  export type State = TimeCore.State;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAuBA,MAAa,QAAQ,WAAW,SAAS,MACvC,gBACA,cACA;CACA,MAAM,EAAE,QAAQ,WAAW,OAAO,MAAM,cAAc,OAAO,SAAS,OAAO,GAAG,iBAAiB;CAEjG,MAAM,OAAO,UAAU,WAAW;CAClC,MAAM,CAAC,QAAQ,eAAe,IAAI,UAAU,CAAC;CAE7C,MAAM,cAAc,QAAQ,SAAS,aAAa;CAClD,MAAM,CAAC,YAAY,iBAAiB,SAAS,YAAY;AAEzD,iBAAgB;AACd,gBAAc,YAAY;IACzB,CAAC,aAAa,OAAO,CAAC;AAEzB,MAAK,SAAS;EAAE,MAAM;EAAY;EAAc;EAAO;EAAQ,CAAC;AAEhE,KAAI,CAAC,MAAM;AACI,oBAAkB,cAAc,OAAO;AACpD,SAAO;;AAGT,MAAK,SAAS,KAAK;CACnB,MAAM,QAAQ,KAAK,UAAU;CAE7B,MAAM,UAAU,MAAM,WACpB,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,QAAD;EAAM,eAAY;YAAQ,gBAAgB,SAAS,aAAa;EAAoB,CAAA,EACnF,MAAM,KACN,EAAA,CAAA,GAEH,MAAM;CAGR,MAAM,mBAAmB;AACvB,iBAAe,UAAU;AACvB,OAAI,gBAAgB,UAClB,QAAO,UAAU,cAAc,YAAY;AAE7C,UAAO,UAAU,aAAa,cAAc;IAC5C;;CAGJ,MAAM,eAAe,UAAuC;AAC1D,MAAI,MAAM,iBAAkB;AAC5B,cAAY;;CAGd,MAAM,iBAAiB,UAA0C;AAC/D,MAAI,MAAM,oBAAoB,CAAC,wBAAwB,MAAM,YAAY,CAAE;AAE3E,QAAM,gBAAgB;AACtB,MAAI,MAAM,OAAQ;AAClB,cAAY;;AAGd,QAAO,cACL,QACA;EAAE;EAAQ;EAAW;EAAO,EAC5B;EACE;EACA,cAAc;EACd,KAAK,CAAC,aAAa;EACnB,OAAO,CACL;GACE,UAAU,MAAM;GAChB,UAAU;GACV,GAAG,KAAK,SAAS,OAAO,YAAY;GACpC,GAAI,SAAS;IAAE,SAAS;IAAa,WAAW;IAAe,GAAG,KAAA;GACnE,EACD,aACD;EACF,CACF;EACD"}

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

@@ -1 +1 @@
-{"version":3,"file":"time-slider-root.d.ts","names":[],"sources":["../../../../src/ui/time-slider/time-slider-root.tsx"],"mappings":";;;;;UAgBiB,mBAAA,SAA4B,gBAAA,QAAwB,cAAA,CAAe,KAAA,GAAQ,cAAA,CAAe,KAAA;EACzG,WAAA;EACA,SAAA;AAAA;AAAA,cAGW,cAAA,EAAc,OAAA,CAAA,yBAAA,CAAA,IAAA,CAAA,mBAAA,WAAA,OAAA,CAAA,aAAA,CAAA,cAAA;AAAA,kBAgGV,cAAA;EAAA,KACH,KAAA,GAAQ,mBAAA;EAAA,KACR,KAAA,GAAQ,cAAA,CAAe,KAAA;AAAA"}
+{"version":3,"file":"time-slider-root.d.ts","names":[],"sources":["../../../../src/ui/time-slider/time-slider-root.tsx"],"mappings":";;;;;UAgBiB,mBAAA,SAA4B,gBAAA,QAAwB,cAAA,CAAe,KAAA,GAAQ,cAAA,CAAe,KAAA;EACzG,WAAA;EACA,SAAA;AAAA;AAAA,cAGW,cAAA,EAAc,OAAA,CAAA,yBAAA,CAAA,IAAA,CAAA,mBAAA,WAAA,OAAA,CAAA,aAAA,CAAA,cAAA;AAAA,kBA+GV,cAAA;EAAA,KACH,KAAA,GAAQ,mBAAA;EAAA,KACR,KAAA,GAAQ,cAAA,CAAe,KAAA;AAAA"}

package/dist/dev/ui/time-slider/time-slider-root.js

@@ -4,17 +4,18 @@ import { useLatestRef } from "../../utils/use-latest-ref.js";
 import { renderElement } from "../../utils/use-render.js";
 import { useSlider } from "../hooks/use-slider.js";
 import { SliderProvider } from "../slider/context.js";
-import { getTimeSliderCSSVars, logMissingFeature, selectBuffer, selectTime } from "@videojs/core/dom";
-import { forwardRef, useState } from "react";
+import { getTimeSliderCSSVars, logMissingFeature, selectBuffer, selectPlayback, selectTime } from "@videojs/core/dom";
+import { forwardRef, useEffect, useState } from "react";
 import { jsx } from "react/jsx-runtime";
 import { TimeSliderCore, TimeSliderDataAttrs } from "@videojs/core";
 import { formatTime } from "@videojs/utils/time";
 //#region src/ui/time-slider/time-slider-root.tsx
 const noopSeek = () => Promise.resolve(0);
 const TimeSliderRoot = forwardRef(function TimeSliderRoot(componentProps, forwardedRef) {
-	const { render, className, style, label, changeThrottle = TimeSliderCore.defaultProps.changeThrottle, step = TimeSliderCore.defaultProps.step, largeStep = TimeSliderCore.defaultProps.largeStep, orientation, disabled, thumbAlignment, onDragStart, onDragEnd, ...elementProps } = componentProps;
+	const { render, className, style, label, changeThrottle = TimeSliderCore.defaultProps.changeThrottle, step = TimeSliderCore.defaultProps.step, largeStep = TimeSliderCore.defaultProps.largeStep, orientation, disabled, thumbAlignment, onDragStart, onDragEnd, pauseOnDrag, ...elementProps } = componentProps;
 	const time = usePlayer(selectTime);
 	const buffer = usePlayer(selectBuffer);
+	const playback = usePlayer(selectPlayback);
 	const [core] = useState(() => new TimeSliderCore());
 	core.setProps({
 		label,
@@ -22,12 +23,17 @@ const TimeSliderRoot = forwardRef(function TimeSliderRoot(componentProps, forwar
 		largeStep,
 		orientation,
 		disabled,
-		thumbAlignment
+		thumbAlignment,
+		pauseOnDrag
 	});
 	const mediaRef = useLatestRef(time && buffer ? {
 		...time,
 		...buffer
 	} : null);
+	const playbackRef = useLatestRef(playback);
+	useEffect(() => {
+		return () => core.endDrag(playbackRef.current);
+	}, [core]);
 	const duration = time?.duration ?? 0;
 	const { state, cssVars, rootRef, thumbRef, rootProps, rootStyle, thumbProps } = useSlider({
 		computeState: (input) => {
@@ -58,8 +64,14 @@ const TimeSliderRoot = forwardRef(function TimeSliderRoot(componentProps, forwar
 			const media = mediaRef.current;
 			if (media) media.seek(core.rawValueFromPercent(percent));
 		},
-		onDragStart,
-		onDragEnd
+		onDragStart: () => {
+			core.startDrag(playbackRef.current);
+			onDragStart?.();
+		},
+		onDragEnd: () => {
+			core.endDrag(playbackRef.current);
+			onDragEnd?.();
+		}
 	});
 	if (!time) {
 		logMissingFeature("TimeSlider", "time");

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

@@ -1 +1 @@
-{"version":3,"file":"time-slider-root.js","names":[],"sources":["../../../../src/ui/time-slider/time-slider-root.tsx"],"sourcesContent":["'use client';\n\nimport { TimeSliderCore, TimeSliderDataAttrs } from '@videojs/core';\nimport { getTimeSliderCSSVars, logMissingFeature, selectBuffer, selectTime } from '@videojs/core/dom';\nimport { formatTime } from '@videojs/utils/time';\nimport { forwardRef, useState } from 'react';\n\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      ...elementProps\n    } = componentProps;\n\n    const time = usePlayer(selectTime);\n    const buffer = usePlayer(selectBuffer);\n\n    const [core] = useState(() => new TimeSliderCore());\n    core.setProps({ label, step, largeStep, orientation, disabled, thumbAlignment });\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\n    const duration = time?.duration ?? 0;\n\n    const { state, cssVars, rootRef, thumbRef, rootProps, rootStyle, thumbProps } = 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: () => (duration > 0 ? ((time?.currentTime ?? 0) / duration) * 100 : 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      onDragEnd,\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.valueFromPercent(state.pointerPercent),\n          thumbRef,\n          thumbProps,\n          stateAttrMap: TimeSliderDataAttrs,\n          getAttrs: (sliderState) => core.getAttrs(sliderState as TimeSliderCore.State),\n          formatValue: (value) => formatTime(value, duration),\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,EAAE;AAO1D,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,GAAG,iBACD;CAEJ,MAAM,OAAO,UAAU,WAAW;CAClC,MAAM,SAAS,UAAU,aAAa;CAEtC,MAAM,CAAC,QAAQ,eAAe,IAAI,gBAAgB,CAAC;AACnD,MAAK,SAAS;EAAE;EAAO;EAAM;EAAW;EAAa;EAAU;EAAgB,CAAC;CAGhF,MAAM,WAAW,aAAa,QAAQ,SAAS;EAAE,GAAG;EAAM,GAAG;EAAQ,GAAG,KAAK;CAE7E,MAAM,WAAW,MAAM,YAAY;CAEnC,MAAM,EAAE,OAAO,SAAS,SAAS,UAAU,WAAW,WAAW,eAAe,UAAgC;EAC9G,eAAe,UAAU;AACvB,QAAK,SAAS,MAAM;AACpB,OAAI,CAAC,QAAQ,CAAC,OACZ,MAAK,SAAS;IACZ,aAAa;IACb,UAAU;IACV,SAAS;IACT,MAAM;IACN,UAAU,EAAE;IACZ,UAAU,EAAE;IACb,CAAC;OAEF,MAAK,SAAS;IAAE,GAAG;IAAM,GAAG;IAAQ,CAAC;AAGvC,UAAO,KAAK,UAAU;;EAExB,kBAAmB,WAAW,KAAM,MAAM,eAAe,KAAK,WAAY,MAAM;EAChF,sBAAsB,KAAK,gBAAgB;EAC3C,2BAA2B,KAAK,qBAAqB;EACrD;EACA;EACA;EACA,gBAAgB,YAAY,WAAW,cACrC,KAAK,0BAA0B,YAAY,WAAW,UAAU;EAClE,YAAY;EACZ,gBAAgB,YAAY;GAC1B,MAAM,QAAQ,SAAS;AACvB,OAAI,MAAO,OAAM,KAAK,KAAK,oBAAoB,QAAQ,CAAC;;EAE1D;EACA;EACD,CAAC;AAEF,KAAI,CAAC,MAAM;AACI,oBAAkB,cAAc,OAAO;AACpD,SAAO;;AAGT,QACE,oBAAC,gBAAD;EACE,OAAO;GACL;GACA,cAAc,KAAK,iBAAiB,MAAM,eAAe;GACzD;GACA;GACA,cAAc;GACd,WAAW,gBAAgB,KAAK,SAAS,YAAoC;GAC7E,cAAc,UAAU,WAAW,OAAO,SAAS;GACpD;YAEA,cACC,OACA;GAAE;GAAQ;GAAW;GAAO,EAC5B;GACE;GACA,cAAc;GACd,KAAK,CAAC,cAAc,QAAQ;GAC5B,OAAO;IAAC,EAAE,OAAO;KAAE,GAAG;KAAS,GAAG;KAAW,EAAE;IAAE;IAAW;IAAa;GAC1E,CACF;EACc,CAAA;EAGtB"}
+{"version":3,"file":"time-slider-root.js","names":[],"sources":["../../../../src/ui/time-slider/time-slider-root.tsx"],"sourcesContent":["'use client';\n\nimport { TimeSliderCore, TimeSliderDataAttrs } from '@videojs/core';\nimport { getTimeSliderCSSVars, logMissingFeature, selectBuffer, selectPlayback, selectTime } from '@videojs/core/dom';\nimport { formatTime } from '@videojs/utils/time';\nimport { forwardRef, useEffect, useState } from 'react';\n\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 [core] = useState(() => new TimeSliderCore());\n    core.setProps({ label, step, largeStep, orientation, disabled, thumbAlignment, pauseOnDrag });\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, cssVars, rootRef, thumbRef, rootProps, rootStyle, thumbProps } = 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: () => (duration > 0 ? ((time?.currentTime ?? 0) / duration) * 100 : 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.valueFromPercent(state.pointerPercent),\n          thumbRef,\n          thumbProps,\n          stateAttrMap: TimeSliderDataAttrs,\n          getAttrs: (sliderState) => core.getAttrs(sliderState as TimeSliderCore.State),\n          formatValue: (value) => formatTime(value, duration),\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,EAAE;AAO1D,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,WAAW;CAClC,MAAM,SAAS,UAAU,aAAa;CACtC,MAAM,WAAW,UAAU,eAAe;CAE1C,MAAM,CAAC,QAAQ,eAAe,IAAI,gBAAgB,CAAC;AACnD,MAAK,SAAS;EAAE;EAAO;EAAM;EAAW;EAAa;EAAU;EAAgB;EAAa,CAAC;CAG7F,MAAM,WAAW,aAAa,QAAQ,SAAS;EAAE,GAAG;EAAM,GAAG;EAAQ,GAAG,KAAK;CAC7E,MAAM,cAAc,aAAa,SAAS;AAI1C,iBAAgB;AACd,eAAa,KAAK,QAAQ,YAAY,QAAQ;IAC7C,CAAC,KAAK,CAAC;CAEV,MAAM,WAAW,MAAM,YAAY;CAEnC,MAAM,EAAE,OAAO,SAAS,SAAS,UAAU,WAAW,WAAW,eAAe,UAAgC;EAC9G,eAAe,UAAU;AACvB,QAAK,SAAS,MAAM;AACpB,OAAI,CAAC,QAAQ,CAAC,OACZ,MAAK,SAAS;IACZ,aAAa;IACb,UAAU;IACV,SAAS;IACT,MAAM;IACN,UAAU,EAAE;IACZ,UAAU,EAAE;IACb,CAAC;OAEF,MAAK,SAAS;IAAE,GAAG;IAAM,GAAG;IAAQ,CAAC;AAGvC,UAAO,KAAK,UAAU;;EAExB,kBAAmB,WAAW,KAAM,MAAM,eAAe,KAAK,WAAY,MAAM;EAChF,sBAAsB,KAAK,gBAAgB;EAC3C,2BAA2B,KAAK,qBAAqB;EACrD;EACA;EACA;EACA,gBAAgB,YAAY,WAAW,cACrC,KAAK,0BAA0B,YAAY,WAAW,UAAU;EAClE,YAAY;EACZ,gBAAgB,YAAY;GAC1B,MAAM,QAAQ,SAAS;AACvB,OAAI,MAAO,OAAM,KAAK,KAAK,oBAAoB,QAAQ,CAAC;;EAE1D,mBAAmB;AACjB,QAAK,UAAU,YAAY,QAAQ;AACnC,kBAAe;;EAEjB,iBAAiB;AACf,QAAK,QAAQ,YAAY,QAAQ;AACjC,gBAAa;;EAEhB,CAAC;AAEF,KAAI,CAAC,MAAM;AACI,oBAAkB,cAAc,OAAO;AACpD,SAAO;;AAGT,QACE,oBAAC,gBAAD;EACE,OAAO;GACL;GACA,cAAc,KAAK,iBAAiB,MAAM,eAAe;GACzD;GACA;GACA,cAAc;GACd,WAAW,gBAAgB,KAAK,SAAS,YAAoC;GAC7E,cAAc,UAAU,WAAW,OAAO,SAAS;GACpD;YAEA,cACC,OACA;GAAE;GAAQ;GAAW;GAAO,EAC5B;GACE;GACA,cAAc;GACd,KAAK,CAAC,cAAc,QAAQ;GAC5B,OAAO;IAAC,EAAE,OAAO;KAAE,GAAG;KAAS,GAAG;KAAW,EAAE;IAAE;IAAW;IAAa;GAC1E,CACF;EACc,CAAA;EAGtB"}

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

@@ -2,6 +2,10 @@ import { MediaContainer, PositioningBoundary, TooltipApi } from "@videojs/core/d
 import { StateAttrMap as StateAttrMap$1, TooltipCore } from "@videojs/core";
 
 //#region src/ui/tooltip/context.d.ts
+interface TooltipContent {
+  label?: string | undefined;
+  shortcut?: string | undefined;
+}
 interface TooltipContextValue {
   core: TooltipCore;
   tooltip: TooltipApi;
@@ -9,13 +13,13 @@ interface TooltipContextValue {
   stateAttrMap: StateAttrMap$1<TooltipCore.State>;
   anchorName: string;
   popupId: string;
-  content: string | undefined;
-  setContent: (content: string | undefined) => void;
+  content: TooltipContent | undefined;
+  setContent: (content: TooltipContent | undefined) => void;
   boundary: PositioningBoundary;
   container: MediaContainer | null;
 }
 declare function useTooltipContext(): TooltipContextValue;
 declare function useOptionalTooltipContext(): TooltipContextValue | null;
 //#endregion
-export { TooltipContextValue, useOptionalTooltipContext, useTooltipContext };
+export { TooltipContent, TooltipContextValue, useOptionalTooltipContext, useTooltipContext };
 //# sourceMappingURL=context.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"context.d.ts","names":[],"sources":["../../../../src/ui/tooltip/context.tsx"],"mappings":";;;;UAMiB,mBAAA;EACf,IAAA,EAAM,WAAA;EACN,OAAA,EAAS,UAAA;EACT,KAAA,EAAO,WAAA,CAAY,KAAA;EACnB,YAAA,EAAc,cAAA,CAAa,WAAA,CAAY,KAAA;EACvC,UAAA;EACA,OAAA;EACA,OAAA;EACA,UAAA,GAAa,OAAA;EACb,QAAA,EAAU,mBAAA;EACV,SAAA,EAAW,cAAA;AAAA;AAAA,iBAOG,iBAAA,CAAA,GAAqB,mBAAA;AAAA,iBAMrB,yBAAA,CAAA,GAA6B,mBAAA"}
+{"version":3,"file":"context.d.ts","names":[],"sources":["../../../../src/ui/tooltip/context.tsx"],"mappings":";;;;UAMiB,cAAA;EACf,KAAA;EACA,QAAA;AAAA;AAAA,UAGe,mBAAA;EACf,IAAA,EAAM,WAAA;EACN,OAAA,EAAS,UAAA;EACT,KAAA,EAAO,WAAA,CAAY,KAAA;EACnB,YAAA,EAAc,cAAA,CAAa,WAAA,CAAY,KAAA;EACvC,UAAA;EACA,OAAA;EACA,OAAA,EAAS,cAAA;EACT,UAAA,GAAa,OAAA,EAAS,cAAA;EACtB,QAAA,EAAU,mBAAA;EACV,SAAA,EAAW,cAAA;AAAA;AAAA,iBAOG,iBAAA,CAAA,GAAqB,mBAAA;AAAA,iBAMrB,yBAAA,CAAA,GAA6B,mBAAA"}

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

@@ -1 +1 @@
-{"version":3,"file":"context.js","names":[],"sources":["../../../../src/ui/tooltip/context.tsx"],"sourcesContent":["'use client';\n\nimport type { StateAttrMap, TooltipCore } from '@videojs/core';\nimport type { MediaContainer, PositioningBoundary, TooltipApi } from '@videojs/core/dom';\nimport { createContext, useContext } from 'react';\n\nexport interface TooltipContextValue {\n  core: TooltipCore;\n  tooltip: TooltipApi;\n  state: TooltipCore.State;\n  stateAttrMap: StateAttrMap<TooltipCore.State>;\n  anchorName: string;\n  popupId: string;\n  content: string | undefined;\n  setContent: (content: string | 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":";;;AAmBA,MAAM,iBAAiB,cAA0C,KAAK;AAEtE,MAAa,yBAAyB,eAAe;AAErD,SAAgB,oBAAyC;CACvD,MAAM,MAAM,WAAW,eAAe;AACtC,KAAI,CAAC,IAAK,OAAM,IAAI,MAAM,iEAAiE;AAC3F,QAAO;;AAGT,SAAgB,4BAAwD;AACtE,QAAO,WAAW,eAAe"}
+{"version":3,"file":"context.js","names":[],"sources":["../../../../src/ui/tooltip/context.tsx"],"sourcesContent":["'use client';\n\nimport 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  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,KAAK;AAEtE,MAAa,yBAAyB,eAAe;AAErD,SAAgB,oBAAyC;CACvD,MAAM,MAAM,WAAW,eAAe;AACtC,KAAI,CAAC,IAAK,OAAM,IAAI,MAAM,iEAAiE;AAC3F,QAAO;;AAGT,SAAgB,4BAAwD;AACtE,QAAO,WAAW,eAAe"}

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

@@ -1,3 +1,3 @@
-import { TooltipContextValue, useOptionalTooltipContext, useTooltipContext } from "./context.js";
+import { TooltipContent, TooltipContextValue, useOptionalTooltipContext, useTooltipContext } from "./context.js";
 import { index_parts_d_exports } from "./index.parts.js";
-export { index_parts_d_exports as Tooltip, type TooltipContextValue, useOptionalTooltipContext, useTooltipContext };
+export { index_parts_d_exports as Tooltip, type TooltipContent, type TooltipContextValue, useOptionalTooltipContext, useTooltipContext };

package/dist/dev/ui/tooltip/index.parts.d.ts

@@ -1,12 +1,14 @@
 import { TooltipArrow, TooltipArrowProps } from "./tooltip-arrow.js";
+import { TooltipLabel, TooltipLabelProps } from "./tooltip-label.js";
 import { TooltipPopup, TooltipPopupProps } from "./tooltip-popup.js";
 import { TooltipProvider, TooltipProviderProps } from "./tooltip-provider.js";
 import { TooltipRoot, TooltipRootProps } from "./tooltip-root.js";
+import { TooltipShortcut, TooltipShortcutProps } from "./tooltip-shortcut.js";
 import { TooltipTrigger, TooltipTriggerProps } from "./tooltip-trigger.js";
 
 //#region src/ui/tooltip/index.parts.d.ts
 declare namespace index_parts_d_exports {
-  export { TooltipArrow as Arrow, TooltipArrowProps as ArrowProps, TooltipPopup as Popup, TooltipPopupProps as PopupProps, TooltipProvider as Provider, TooltipProviderProps as ProviderProps, TooltipRoot as Root, TooltipRootProps as RootProps, TooltipTrigger as Trigger, TooltipTriggerProps as TriggerProps };
+  export { TooltipArrow as Arrow, TooltipArrowProps as ArrowProps, TooltipLabel as Label, TooltipLabelProps as LabelProps, TooltipPopup as Popup, TooltipPopupProps as PopupProps, TooltipProvider as Provider, TooltipProviderProps as ProviderProps, TooltipRoot as Root, TooltipRootProps as RootProps, TooltipShortcut as Shortcut, TooltipShortcutProps as ShortcutProps, TooltipTrigger as Trigger, TooltipTriggerProps as TriggerProps };
 }
 //#endregion
 export { index_parts_d_exports };

package/dist/dev/ui/tooltip/index.parts.js

@@ -1,5 +1,7 @@
 import { __exportAll } from "../../_virtual/_rolldown/runtime.js";
 import { TooltipArrow } from "./tooltip-arrow.js";
+import { TooltipLabel } from "./tooltip-label.js";
+import { TooltipShortcut } from "./tooltip-shortcut.js";
 import { TooltipPopup } from "./tooltip-popup.js";
 import { TooltipProvider } from "./tooltip-provider.js";
 import { TooltipRoot } from "./tooltip-root.js";
@@ -7,9 +9,11 @@ import { TooltipTrigger } from "./tooltip-trigger.js";
 //#region src/ui/tooltip/index.parts.ts
 var index_parts_exports = /* @__PURE__ */ __exportAll({
 	Arrow: () => TooltipArrow,
+	Label: () => TooltipLabel,
 	Popup: () => TooltipPopup,
 	Provider: () => TooltipProvider,
 	Root: () => TooltipRoot,
+	Shortcut: () => TooltipShortcut,
 	Trigger: () => TooltipTrigger
 });
 //#endregion

package/dist/dev/ui/tooltip/index.parts.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.parts.js","names":[],"sources":["../../../../src/ui/tooltip/index.parts.ts"],"sourcesContent":["export { TooltipArrow as Arrow, type TooltipArrowProps as ArrowProps } from './tooltip-arrow';\nexport { TooltipPopup as Popup, type TooltipPopupProps as PopupProps } from './tooltip-popup';\nexport { TooltipProvider as Provider, type TooltipProviderProps as ProviderProps } from './tooltip-provider';\nexport { TooltipRoot as Root, type TooltipRootProps as RootProps } from './tooltip-root';\nexport { TooltipTrigger as Trigger, type TooltipTriggerProps as TriggerProps } from './tooltip-trigger';\n"],"mappings":""}
+{"version":3,"file":"index.parts.js","names":[],"sources":["../../../../src/ui/tooltip/index.parts.ts"],"sourcesContent":["export { TooltipArrow as Arrow, type TooltipArrowProps as ArrowProps } from './tooltip-arrow';\nexport { TooltipLabel as Label, type TooltipLabelProps as LabelProps } from './tooltip-label';\nexport { TooltipPopup as Popup, type TooltipPopupProps as PopupProps } from './tooltip-popup';\nexport { TooltipProvider as Provider, type TooltipProviderProps as ProviderProps } from './tooltip-provider';\nexport { TooltipRoot as Root, type TooltipRootProps as RootProps } from './tooltip-root';\nexport { TooltipShortcut as Shortcut, type TooltipShortcutProps as ShortcutProps } from './tooltip-shortcut';\nexport { TooltipTrigger as Trigger, type TooltipTriggerProps as TriggerProps } from './tooltip-trigger';\n"],"mappings":""}

package/dist/dev/ui/tooltip/tooltip-arrow.js

@@ -1,6 +1,6 @@
 "use client";
-import { createContextPart } from "../create-context-part.js";
 import { useTooltipContext } from "./context.js";
+import { createContextPart } from "../create-context-part.js";
 //#region src/ui/tooltip/tooltip-arrow.tsx
 /** Decorative arrow pointing from the tooltip toward the trigger. Hidden from assistive technology. */
 const TooltipArrow = createContextPart({

package/dist/dev/ui/tooltip/tooltip-label.d.ts

@@ -0,0 +1,15 @@
+import { UIComponentProps } from "../../utils/types.js";
+import * as _$react from "react";
+import { TooltipState } from "@videojs/core";
+
+//#region src/ui/tooltip/tooltip-label.d.ts
+interface TooltipLabelProps extends UIComponentProps<'span', TooltipState> {}
+/** Tooltip body label; defaults to context `content.label` from the linked trigger. */
+declare const TooltipLabel: _$react.ForwardRefExoticComponent<Omit<TooltipLabelProps, "ref"> & _$react.RefAttributes<HTMLSpanElement>>;
+declare namespace TooltipLabel {
+  type Props = TooltipLabelProps;
+  type State = TooltipState;
+}
+//#endregion
+export { TooltipLabel, TooltipLabelProps };
+//# sourceMappingURL=tooltip-label.d.ts.map

package/dist/dev/ui/tooltip/tooltip-label.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip-label.d.ts","names":[],"sources":["../../../../src/ui/tooltip/tooltip-label.tsx"],"mappings":";;;;;UASiB,iBAAA,SAA0B,gBAAA,SAAyB,YAAA;;cAGvD,YAAA,EAAY,OAAA,CAAA,yBAAA,CAAA,IAAA,CAAA,iBAAA,WAAA,OAAA,CAAA,aAAA,CAAA,eAAA;AAAA,kBAmBR,YAAA;EAAA,KACH,KAAA,GAAQ,iBAAA;EAAA,KACR,KAAA,GAAQ,YAAA;AAAA"}

package/dist/dev/ui/tooltip/tooltip-label.js

@@ -0,0 +1,24 @@
+"use client";
+import { renderElement } from "../../utils/use-render.js";
+import { useTooltipContext } from "./context.js";
+import { forwardRef } from "react";
+//#region src/ui/tooltip/tooltip-label.tsx
+/** Tooltip body label; defaults to context `content.label` from the linked trigger. */
+const TooltipLabel = forwardRef(function TooltipLabel({ render, className, style, children, ...elementProps }, forwardedRef) {
+	const { state, stateAttrMap, content } = useTooltipContext();
+	const body = children !== void 0 ? children : content?.label ?? "";
+	return renderElement("span", {
+		render,
+		className,
+		style
+	}, {
+		state,
+		stateAttrMap,
+		ref: forwardedRef,
+		props: [elementProps, { children: body }]
+	});
+});
+//#endregion
+export { TooltipLabel };
+
+//# sourceMappingURL=tooltip-label.js.map

package/dist/dev/ui/tooltip/tooltip-label.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip-label.js","names":[],"sources":["../../../../src/ui/tooltip/tooltip-label.tsx"],"sourcesContent":["'use client';\n\nimport 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 TooltipLabelProps extends UIComponentProps<'span', TooltipState> {}\n\n/** Tooltip body label; defaults to context `content.label` from the linked trigger. */\nexport const TooltipLabel = forwardRef<HTMLSpanElement, TooltipLabelProps>(function TooltipLabel(\n  { render, className, style, children, ...elementProps },\n  forwardedRef\n) {\n  const { state, stateAttrMap, content } = useTooltipContext();\n  const body = children !== undefined ? children : (content?.label ?? '');\n\n  return renderElement(\n    'span',\n    { render, className, style },\n    {\n      state,\n      stateAttrMap,\n      ref: forwardedRef,\n      props: [elementProps, { children: body }],\n    }\n  );\n});\n\nexport namespace TooltipLabel {\n  export type Props = TooltipLabelProps;\n  export type State = TooltipState;\n}\n"],"mappings":";;;;;;AAYA,MAAa,eAAe,WAA+C,SAAS,aAClF,EAAE,QAAQ,WAAW,OAAO,UAAU,GAAG,gBACzC,cACA;CACA,MAAM,EAAE,OAAO,cAAc,YAAY,mBAAmB;CAC5D,MAAM,OAAO,aAAa,KAAA,IAAY,WAAY,SAAS,SAAS;AAEpE,QAAO,cACL,QACA;EAAE;EAAQ;EAAW;EAAO,EAC5B;EACE;EACA;EACA,KAAK;EACL,OAAO,CAAC,cAAc,EAAE,UAAU,MAAM,CAAC;EAC1C,CACF;EACD"}

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

@@ -1 +1 @@
-{"version":3,"file":"tooltip-popup.d.ts","names":[],"sources":["../../../../src/ui/tooltip/tooltip-popup.tsx"],"mappings":";;;;;UAqBiB,iBAAA,SAA0B,gBAAA,QAAwB,YAAA;;cAKtD,YAAA,EAAY,OAAA,CAAA,yBAAA,CAAA,IAAA,CAAA,iBAAA,WAAA,OAAA,CAAA,aAAA,CAAA,cAAA;AAAA,kBAgKR,YAAA;EAAA,KACH,KAAA,GAAQ,iBAAA;EAAA,KACR,KAAA,GAAQ,YAAA;AAAA"}
+{"version":3,"file":"tooltip-popup.d.ts","names":[],"sources":["../../../../src/ui/tooltip/tooltip-popup.tsx"],"mappings":";;;;;UAsBiB,iBAAA,SAA0B,gBAAA,QAAwB,YAAA;;cAKtD,YAAA,EAAY,OAAA,CAAA,yBAAA,CAAA,IAAA,CAAA,iBAAA,WAAA,OAAA,CAAA,aAAA,CAAA,cAAA;AAAA,kBAyKR,YAAA;EAAA,KACH,KAAA,GAAQ,iBAAA;EAAA,KACR,KAAA,GAAQ,YAAA;AAAA"}