@videojs/react 10.0.0-alpha.4 → 10.0.0-alpha.6

package/dist/default/ui/create-media-button.js

@@ -0,0 +1,52 @@
+'use client';
+
+import { usePlayer } from "../player/context.js";
+import { renderElement } from "../utils/use-render.js";
+import { useButton } from "./hooks/use-button.js";
+import "@videojs/core/dom";
+import { forwardRef, useState } from "react";
+
+//#region src/ui/create-media-button.tsx
+/** Creates a media button React component from a core class and config. */
+function createMediaButton(config) {
+	const { displayName, core: CoreClass, stateAttrMap, selector, action } = config;
+	const corePropKeys = new Set(Object.keys(CoreClass.defaultProps));
+	const Component = forwardRef(function MediaButton(componentProps, forwardedRef) {
+		const { render, className, style, ...rest } = componentProps;
+		const coreProps = {};
+		const elementProps = {};
+		for (const key of Object.keys(rest)) if (corePropKeys.has(key)) coreProps[key] = rest[key];
+		else elementProps[key] = rest[key];
+		const feature = usePlayer(selector);
+		const [core] = useState(() => new CoreClass());
+		core.setProps(coreProps);
+		const { getButtonProps, buttonRef } = useButton({
+			displayName,
+			onActivate: () => action(core, feature),
+			isDisabled: () => !!coreProps.disabled || !feature
+		});
+		if (!feature) return null;
+		core.setMedia(feature);
+		const state = core.getState();
+		return renderElement("button", {
+			render,
+			className,
+			style
+		}, {
+			state,
+			stateAttrMap,
+			ref: [forwardedRef, buttonRef],
+			props: [
+				core.getAttrs(state),
+				elementProps,
+				getButtonProps()
+			]
+		});
+	});
+	Component.displayName = displayName;
+	return Component;
+}
+
+//#endregion
+export { createMediaButton };
+//# sourceMappingURL=create-media-button.js.map

package/dist/default/ui/create-media-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"create-media-button.js","names":[],"sources":["../../../src/ui/create-media-button.tsx"],"sourcesContent":["'use client';\n\nimport type { InferComponentState, InferMediaState, MediaUIComponent, StateAttrMap } from '@videojs/core';\nimport { logMissingFeature } from '@videojs/core/dom';\nimport type { Selector } from '@videojs/store';\nimport type { ForwardedRef, ForwardRefExoticComponent, RefAttributes } from 'react';\nimport { forwardRef, useState } from 'react';\n\nimport { usePlayer } from '../player/context';\nimport type { renderElement as renderElementFn } from '../utils/use-render';\nimport { renderElement } from '../utils/use-render';\nimport { useButton } from './hooks/use-button';\n\ninterface MediaButtonConfig<Core extends Required<MediaUIComponent>> {\n  displayName: string;\n  core: { new (): Core; defaultProps: Record<string, unknown> };\n  stateAttrMap: StateAttrMap<InferComponentState<Core>>;\n  selector: Selector<object, InferMediaState<Core> | undefined>;\n  action: (core: Core, state: InferMediaState<Core>) => void;\n}\n\n/** Creates a media button React component from a core class and config. */\nexport function createMediaButton<Core extends Required<MediaUIComponent>, Props extends object>(\n  config: MediaButtonConfig<Core>\n): ForwardRefExoticComponent<Props & RefAttributes<HTMLButtonElement>> {\n  const { displayName, core: CoreClass, stateAttrMap, selector, action } = config;\n\n  // Props that exist in the core's defaultProps are routed to setProps; the rest go to the DOM element.\n  const corePropKeys = new Set(Object.keys(CoreClass.defaultProps));\n\n  const Component = forwardRef(function MediaButton(\n    componentProps: Record<string, unknown>,\n    forwardedRef: ForwardedRef<HTMLButtonElement>\n  ) {\n    const { render, className, style, ...rest } = componentProps;\n\n    const coreProps: Record<string, unknown> = {};\n    const elementProps: Record<string, unknown> = {};\n\n    for (const key of Object.keys(rest)) {\n      if (corePropKeys.has(key)) {\n        coreProps[key] = rest[key];\n      } else {\n        elementProps[key] = rest[key];\n      }\n    }\n\n    const feature = usePlayer(selector);\n\n    const [core] = useState(() => new CoreClass());\n    core.setProps(coreProps);\n\n    const { getButtonProps, buttonRef } = useButton({\n      displayName,\n      onActivate: () => action(core, feature!),\n      isDisabled: () => !!coreProps.disabled || !feature,\n    });\n\n    if (!feature) {\n      if (__DEV__) logMissingFeature(displayName, selector.displayName ?? displayName);\n      return null;\n    }\n\n    type State = InferComponentState<Core>;\n\n    core.setMedia(feature);\n    const state = core.getState() as State;\n\n    return renderElement(\n      'button',\n      { render, className, style } as renderElementFn.ComponentProps<InferComponentState<Core>>,\n      {\n        state,\n        stateAttrMap,\n        ref: [forwardedRef, buttonRef],\n        props: [core.getAttrs(state), elementProps, getButtonProps()],\n      }\n    );\n  });\n\n  Component.displayName = displayName;\n\n  return Component as unknown as ForwardRefExoticComponent<Props & RefAttributes<HTMLButtonElement>>;\n}\n"],"mappings":";;;;;;;;;;AAsBA,SAAgB,kBACd,QACqE;CACrE,MAAM,EAAE,aAAa,MAAM,WAAW,cAAc,UAAU,WAAW;CAGzE,MAAM,eAAe,IAAI,IAAI,OAAO,KAAK,UAAU,aAAa,CAAC;CAEjE,MAAM,YAAY,WAAW,SAAS,YACpC,gBACA,cACA;EACA,MAAM,EAAE,QAAQ,WAAW,OAAO,GAAG,SAAS;EAE9C,MAAM,YAAqC,EAAE;EAC7C,MAAM,eAAwC,EAAE;AAEhD,OAAK,MAAM,OAAO,OAAO,KAAK,KAAK,CACjC,KAAI,aAAa,IAAI,IAAI,CACvB,WAAU,OAAO,KAAK;MAEtB,cAAa,OAAO,KAAK;EAI7B,MAAM,UAAU,UAAU,SAAS;EAEnC,MAAM,CAAC,QAAQ,eAAe,IAAI,WAAW,CAAC;AAC9C,OAAK,SAAS,UAAU;EAExB,MAAM,EAAE,gBAAgB,cAAc,UAAU;GAC9C;GACA,kBAAkB,OAAO,MAAM,QAAS;GACxC,kBAAkB,CAAC,CAAC,UAAU,YAAY,CAAC;GAC5C,CAAC;AAEF,MAAI,CAAC,QAEH,QAAO;AAKT,OAAK,SAAS,QAAQ;EACtB,MAAM,QAAQ,KAAK,UAAU;AAE7B,SAAO,cACL,UACA;GAAE;GAAQ;GAAW;GAAO,EAC5B;GACE;GACA;GACA,KAAK,CAAC,cAAc,UAAU;GAC9B,OAAO;IAAC,KAAK,SAAS,MAAM;IAAE;IAAc,gBAAgB;IAAC;GAC9D,CACF;GACD;AAEF,WAAU,cAAc;AAExB,QAAO"}

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

@@ -1,42 +1,17 @@
 'use client';
 
-import { usePlayer } from "../../player/context.js";
-import { renderElement } from "../../utils/use-render.js";
-import { useButton } from "../hooks/use-button.js";
+import { createMediaButton } from "../create-media-button.js";
 import { selectFullscreen } from "@videojs/core/dom";
-import { forwardRef, useState } from "react";
 import { FullscreenButtonCore, FullscreenButtonDataAttrs } from "@videojs/core";
 
 //#region src/ui/fullscreen-button/fullscreen-button.tsx
-const FullscreenButton = forwardRef(function FullscreenButton(componentProps, forwardedRef) {
-	const { render, className, style, label, disabled, ...elementProps } = componentProps;
-	const fullscreen = usePlayer(selectFullscreen);
-	const [core] = useState(() => new FullscreenButtonCore());
-	core.setProps({
-		label,
-		disabled
-	});
-	const { getButtonProps, buttonRef } = useButton({
-		displayName: "FullscreenButton",
-		onActivate: () => core.toggle(fullscreen),
-		isDisabled: () => disabled || !fullscreen
-	});
-	if (!fullscreen) return null;
-	const state = core.getState(fullscreen);
-	return renderElement("button", {
-		render,
-		className,
-		style
-	}, {
-		state,
-		stateAttrMap: FullscreenButtonDataAttrs,
-		ref: [forwardedRef, buttonRef],
-		props: [
-			core.getAttrs(state),
-			elementProps,
-			getButtonProps()
-		]
-	});
+/** A button that toggles fullscreen. */
+const FullscreenButton = createMediaButton({
+	displayName: "FullscreenButton",
+	core: FullscreenButtonCore,
+	stateAttrMap: FullscreenButtonDataAttrs,
+	selector: selectFullscreen,
+	action: (core, state) => core.toggle(state)
 });
 
 //#endregion

package/dist/default/ui/fullscreen-button/fullscreen-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"fullscreen-button.js","names":[],"sources":["../../../../src/ui/fullscreen-button/fullscreen-button.tsx"],"sourcesContent":["'use client';\n\nimport { FullscreenButtonCore, FullscreenButtonDataAttrs } from '@videojs/core';\nimport { logMissingFeature, selectFullscreen } 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';\nimport { useButton } from '../hooks/use-button';\n\nexport interface FullscreenButtonProps\n  extends UIComponentProps<'button', FullscreenButtonCore.State>,\n    FullscreenButtonCore.Props {}\n\nexport const FullscreenButton = forwardRef(function FullscreenButton(\n  componentProps: FullscreenButtonProps,\n  forwardedRef: ForwardedRef<HTMLButtonElement>\n) {\n  const { render, className, style, label, disabled, ...elementProps } = componentProps;\n\n  const fullscreen = usePlayer(selectFullscreen);\n\n  const [core] = useState(() => new FullscreenButtonCore());\n  core.setProps({ label, disabled });\n\n  const { getButtonProps, buttonRef } = useButton({\n    displayName: 'FullscreenButton',\n    onActivate: () => core.toggle(fullscreen!),\n    isDisabled: () => disabled || !fullscreen,\n  });\n\n  if (!fullscreen) {\n    if (__DEV__) logMissingFeature('FullscreenButton', 'fullscreen');\n    return null;\n  }\n\n  const state = core.getState(fullscreen);\n\n  return renderElement(\n    'button',\n    { render, className, style },\n    {\n      state,\n      stateAttrMap: FullscreenButtonDataAttrs,\n      ref: [forwardedRef, buttonRef],\n      props: [core.getAttrs(state), elementProps, getButtonProps()],\n    }\n  );\n});\n\nexport namespace FullscreenButton {\n  export type Props = FullscreenButtonProps;\n  export type State = FullscreenButtonCore.State;\n}\n"],"mappings":";;;;;;;;;;AAgBA,MAAa,mBAAmB,WAAW,SAAS,iBAClD,gBACA,cACA;CACA,MAAM,EAAE,QAAQ,WAAW,OAAO,OAAO,UAAU,GAAG,iBAAiB;CAEvE,MAAM,aAAa,UAAU,iBAAiB;CAE9C,MAAM,CAAC,QAAQ,eAAe,IAAI,sBAAsB,CAAC;AACzD,MAAK,SAAS;EAAE;EAAO;EAAU,CAAC;CAElC,MAAM,EAAE,gBAAgB,cAAc,UAAU;EAC9C,aAAa;EACb,kBAAkB,KAAK,OAAO,WAAY;EAC1C,kBAAkB,YAAY,CAAC;EAChC,CAAC;AAEF,KAAI,CAAC,WAEH,QAAO;CAGT,MAAM,QAAQ,KAAK,SAAS,WAAW;AAEvC,QAAO,cACL,UACA;EAAE;EAAQ;EAAW;EAAO,EAC5B;EACE;EACA,cAAc;EACd,KAAK,CAAC,cAAc,UAAU;EAC9B,OAAO;GAAC,KAAK,SAAS,MAAM;GAAE;GAAc,gBAAgB;GAAC;EAC9D,CACF;EACD"}
+{"version":3,"file":"fullscreen-button.js","names":[],"sources":["../../../../src/ui/fullscreen-button/fullscreen-button.tsx"],"sourcesContent":["'use client';\n\nimport { FullscreenButtonCore, FullscreenButtonDataAttrs } from '@videojs/core';\nimport { selectFullscreen } from '@videojs/core/dom';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { createMediaButton } from '../create-media-button';\n\nexport interface FullscreenButtonProps\n  extends UIComponentProps<'button', FullscreenButtonCore.State>,\n    FullscreenButtonCore.Props {}\n\n/** A button that toggles fullscreen. */\nexport const FullscreenButton = createMediaButton<FullscreenButtonCore, FullscreenButtonProps>({\n  displayName: 'FullscreenButton',\n  core: FullscreenButtonCore,\n  stateAttrMap: FullscreenButtonDataAttrs,\n  selector: selectFullscreen,\n  action: (core, state) => core.toggle(state),\n});\n\nexport namespace FullscreenButton {\n  export type Props = FullscreenButtonProps;\n  export type State = FullscreenButtonCore.State;\n}\n"],"mappings":";;;;;;;;AAaA,MAAa,mBAAmB,kBAA+D;CAC7F,aAAa;CACb,MAAM;CACN,cAAc;CACd,UAAU;CACV,SAAS,MAAM,UAAU,KAAK,OAAO,MAAM;CAC5C,CAAC"}

package/dist/default/ui/hooks/use-slider.js

@@ -0,0 +1,75 @@
+'use client';
+
+import { useForceRender } from "../../utils/use-force-render.js";
+import { useLatestRef } from "../../utils/use-latest-ref.js";
+import { createSlider } from "@videojs/core/dom";
+import { useSnapshot } from "@videojs/store/react";
+import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
+import { isRTL } from "@videojs/utils/dom";
+
+//#region src/ui/hooks/use-slider.ts
+/**
+* Manages slider input lifecycle for React.
+*
+* Wraps `createSlider()` from `@videojs/core/dom` and subscribes to its
+* input state via `useSnapshot`. Returns split props for the root
+* (pointer events) and thumb (keyboard/focus) elements.
+*/
+function useSlider(options) {
+	const optionsRef = useLatestRef(options);
+	const rootElementRef = useRef(null);
+	const thumbElementRef = useRef(null);
+	const forceRender = useForceRender();
+	const [slider] = useState(() => {
+		return createSlider({
+			getElement: () => rootElementRef.current,
+			getThumbElement: () => thumbElementRef.current,
+			getOrientation: () => optionsRef.current.orientation ?? "horizontal",
+			isRTL: () => rootElementRef.current ? isRTL(rootElementRef.current) : false,
+			isDisabled: () => optionsRef.current.disabled ?? false,
+			getPercent: () => optionsRef.current.getPercent(),
+			getStepPercent: () => optionsRef.current.getStepPercent(),
+			getLargeStepPercent: () => optionsRef.current.getLargeStepPercent(),
+			commitThrottle: optionsRef.current.commitThrottle,
+			onValueChange: (percent) => optionsRef.current.onValueChange?.(percent),
+			onValueCommit: (percent) => optionsRef.current.onValueCommit?.(percent),
+			onDragStart: () => optionsRef.current.onDragStart?.(),
+			onDragEnd: () => optionsRef.current.onDragEnd?.()
+		});
+	});
+	useEffect(() => () => slider.destroy(), [slider]);
+	const input = useSnapshot(slider.input);
+	const state = options.computeState(input);
+	useLayoutEffect(() => {
+		if (state.thumbAlignment === "edge" && rootElementRef.current && thumbElementRef.current) forceRender();
+	}, [state.thumbAlignment]);
+	const rootEl = rootElementRef.current;
+	const thumbEl = thumbElementRef.current;
+	let cssState = state;
+	if (state.thumbAlignment === "edge" && rootEl && thumbEl && options.adjustPercent) {
+		const isHorizontal = state.orientation === "horizontal";
+		const thumbSize = isHorizontal ? thumbEl.offsetWidth : thumbEl.offsetHeight;
+		const trackSize = isHorizontal ? rootEl.offsetWidth : rootEl.offsetHeight;
+		cssState = {
+			...state,
+			fillPercent: options.adjustPercent(state.fillPercent, thumbSize, trackSize),
+			pointerPercent: options.adjustPercent(state.pointerPercent, thumbSize, trackSize)
+		};
+	}
+	return {
+		state,
+		cssVars: options.getCSSVars(cssState),
+		rootRef: useCallback((element) => {
+			rootElementRef.current = element;
+		}, []),
+		thumbRef: useCallback((element) => {
+			thumbElementRef.current = element;
+		}, []),
+		rootProps: slider.rootProps,
+		thumbProps: slider.thumbProps
+	};
+}
+
+//#endregion
+export { useSlider };
+//# sourceMappingURL=use-slider.js.map

package/dist/default/ui/hooks/use-slider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-slider.js","names":[],"sources":["../../../../src/ui/hooks/use-slider.ts"],"sourcesContent":["'use client';\n\nimport type { SliderInput, SliderState } from '@videojs/core';\nimport {\n  createSlider,\n  type SliderApi,\n  type SliderOptions,\n  type SliderRootProps,\n  type SliderThumbProps,\n} from '@videojs/core/dom';\nimport { useSnapshot } from '@videojs/store/react';\nimport { isRTL } from '@videojs/utils/dom';\nimport { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';\nimport { useForceRender } from '../../utils/use-force-render';\nimport { useLatestRef } from '../../utils/use-latest-ref';\n\nexport interface UseSliderOptions<State extends SliderState = SliderState>\n  extends Pick<\n    SliderOptions,\n    | 'getPercent'\n    | 'getStepPercent'\n    | 'getLargeStepPercent'\n    | 'commitThrottle'\n    | 'onValueChange'\n    | 'onValueCommit'\n    | 'onDragStart'\n    | 'onDragEnd'\n  > {\n  computeState: (input: SliderInput) => State;\n  orientation?: 'horizontal' | 'vertical' | undefined;\n  disabled?: boolean | undefined;\n  /** Adjust a raw 0–100 percent for thumb alignment. Called for fill and pointer percents. */\n  adjustPercent?: ((rawPercent: number, thumbSize: number, trackSize: number) => number) | undefined;\n  /** Compute CSS variable map from the (possibly alignment-adjusted) state. */\n  getCSSVars: (state: State) => Record<string, string>;\n}\n\nexport interface UseSliderReturnValue<State extends SliderState = SliderState> {\n  state: State;\n  cssVars: Record<string, string>;\n  rootRef: React.RefCallback<HTMLElement>;\n  thumbRef: React.RefCallback<HTMLElement>;\n  rootProps: SliderRootProps;\n  thumbProps: SliderThumbProps;\n}\n\n/**\n * Manages slider input lifecycle for React.\n *\n * Wraps `createSlider()` from `@videojs/core/dom` and subscribes to its\n * input state via `useSnapshot`. Returns split props for the root\n * (pointer events) and thumb (keyboard/focus) elements.\n */\nexport function useSlider<State extends SliderState = SliderState>(\n  options: UseSliderOptions<State>\n): UseSliderReturnValue<State> {\n  const optionsRef = useLatestRef(options);\n\n  const rootElementRef = useRef<HTMLElement | null>(null);\n  const thumbElementRef = useRef<HTMLElement | null>(null);\n  const forceRender = useForceRender();\n\n  // Lazy-init the slider handle. Stable across re-renders.\n  const [slider] = useState<SliderApi>(() => {\n    const stableOptions: SliderOptions = {\n      getElement: () => rootElementRef.current!,\n      getThumbElement: () => thumbElementRef.current,\n      getOrientation: () => optionsRef.current.orientation ?? 'horizontal',\n      isRTL: () => (rootElementRef.current ? isRTL(rootElementRef.current) : false),\n      isDisabled: () => optionsRef.current.disabled ?? false,\n      getPercent: () => optionsRef.current.getPercent(),\n      getStepPercent: () => optionsRef.current.getStepPercent(),\n      getLargeStepPercent: () => optionsRef.current.getLargeStepPercent(),\n      commitThrottle: optionsRef.current.commitThrottle,\n      onValueChange: (percent) => optionsRef.current.onValueChange?.(percent),\n      onValueCommit: (percent) => optionsRef.current.onValueCommit?.(percent),\n      onDragStart: () => optionsRef.current.onDragStart?.(),\n      onDragEnd: () => optionsRef.current.onDragEnd?.(),\n    };\n\n    return createSlider(stableOptions);\n  });\n\n  // Cleanup on unmount.\n  useEffect(() => () => slider.destroy(), [slider]);\n\n  // Subscribe to slider input state.\n  const input = useSnapshot(slider.input);\n\n  // Compute derived state from input + caller-provided projection.\n  const state = options.computeState(input);\n\n  // Force a synchronous re-render after mount so edge thumb alignment\n  // can read DOM measurements from the now-populated element refs.\n  useLayoutEffect(() => {\n    if (state.thumbAlignment === 'edge' && rootElementRef.current && thumbElementRef.current) {\n      forceRender();\n    }\n  }, [state.thumbAlignment]);\n\n  // Adjust CSS var percents for edge thumb alignment when DOM elements are available.\n  const rootEl = rootElementRef.current;\n  const thumbEl = thumbElementRef.current;\n  let cssState = state;\n\n  if (state.thumbAlignment === 'edge' && rootEl && thumbEl && options.adjustPercent) {\n    const isHorizontal = state.orientation === 'horizontal';\n    const thumbSize = isHorizontal ? thumbEl.offsetWidth : thumbEl.offsetHeight;\n    const trackSize = isHorizontal ? rootEl.offsetWidth : rootEl.offsetHeight;\n    cssState = {\n      ...state,\n      fillPercent: options.adjustPercent(state.fillPercent, thumbSize, trackSize),\n      pointerPercent: options.adjustPercent(state.pointerPercent, thumbSize, trackSize),\n    };\n  }\n\n  const cssVars = options.getCSSVars(cssState);\n\n  // Ref callbacks for root and thumb elements.\n  const rootRef = useCallback((element: HTMLElement | null) => {\n    rootElementRef.current = element;\n  }, []);\n\n  const thumbRef = useCallback((element: HTMLElement | null) => {\n    thumbElementRef.current = element;\n  }, []);\n\n  return {\n    state,\n    cssVars,\n    rootRef,\n    thumbRef,\n    rootProps: slider.rootProps,\n    thumbProps: slider.thumbProps,\n  };\n}\n\nexport namespace useSlider {\n  export type Options = UseSliderOptions;\n  export type ReturnValue = UseSliderReturnValue;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAqDA,SAAgB,UACd,SAC6B;CAC7B,MAAM,aAAa,aAAa,QAAQ;CAExC,MAAM,iBAAiB,OAA2B,KAAK;CACvD,MAAM,kBAAkB,OAA2B,KAAK;CACxD,MAAM,cAAc,gBAAgB;CAGpC,MAAM,CAAC,UAAU,eAA0B;AAiBzC,SAAO,aAhB8B;GACnC,kBAAkB,eAAe;GACjC,uBAAuB,gBAAgB;GACvC,sBAAsB,WAAW,QAAQ,eAAe;GACxD,aAAc,eAAe,UAAU,MAAM,eAAe,QAAQ,GAAG;GACvE,kBAAkB,WAAW,QAAQ,YAAY;GACjD,kBAAkB,WAAW,QAAQ,YAAY;GACjD,sBAAsB,WAAW,QAAQ,gBAAgB;GACzD,2BAA2B,WAAW,QAAQ,qBAAqB;GACnE,gBAAgB,WAAW,QAAQ;GACnC,gBAAgB,YAAY,WAAW,QAAQ,gBAAgB,QAAQ;GACvE,gBAAgB,YAAY,WAAW,QAAQ,gBAAgB,QAAQ;GACvE,mBAAmB,WAAW,QAAQ,eAAe;GACrD,iBAAiB,WAAW,QAAQ,aAAa;GAClD,CAEiC;GAClC;AAGF,uBAAsB,OAAO,SAAS,EAAE,CAAC,OAAO,CAAC;CAGjD,MAAM,QAAQ,YAAY,OAAO,MAAM;CAGvC,MAAM,QAAQ,QAAQ,aAAa,MAAM;AAIzC,uBAAsB;AACpB,MAAI,MAAM,mBAAmB,UAAU,eAAe,WAAW,gBAAgB,QAC/E,cAAa;IAEd,CAAC,MAAM,eAAe,CAAC;CAG1B,MAAM,SAAS,eAAe;CAC9B,MAAM,UAAU,gBAAgB;CAChC,IAAI,WAAW;AAEf,KAAI,MAAM,mBAAmB,UAAU,UAAU,WAAW,QAAQ,eAAe;EACjF,MAAM,eAAe,MAAM,gBAAgB;EAC3C,MAAM,YAAY,eAAe,QAAQ,cAAc,QAAQ;EAC/D,MAAM,YAAY,eAAe,OAAO,cAAc,OAAO;AAC7D,aAAW;GACT,GAAG;GACH,aAAa,QAAQ,cAAc,MAAM,aAAa,WAAW,UAAU;GAC3E,gBAAgB,QAAQ,cAAc,MAAM,gBAAgB,WAAW,UAAU;GAClF;;AAcH,QAAO;EACL;EACA,SAbc,QAAQ,WAAW,SAAS;EAc1C,SAXc,aAAa,YAAgC;AAC3D,kBAAe,UAAU;KACxB,EAAE,CAAC;EAUJ,UARe,aAAa,YAAgC;AAC5D,mBAAgB,UAAU;KACzB,EAAE,CAAC;EAOJ,WAAW,OAAO;EAClB,YAAY,OAAO;EACpB"}

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

@@ -1,45 +1,17 @@
 'use client';
 
-import { usePlayer } from "../../player/context.js";
-import { renderElement } from "../../utils/use-render.js";
-import { useButton } from "../hooks/use-button.js";
+import { createMediaButton } from "../create-media-button.js";
 import { selectVolume } from "@videojs/core/dom";
-import { forwardRef, useState } from "react";
 import { MuteButtonCore, MuteButtonDataAttrs } from "@videojs/core";
 
 //#region src/ui/mute-button/mute-button.tsx
-/**
-* A button that toggles mute state.
-*/
-const MuteButton = forwardRef(function MuteButton(componentProps, forwardedRef) {
-	const { render, className, style, label, disabled, ...elementProps } = componentProps;
-	const volume = usePlayer(selectVolume);
-	const [core] = useState(() => new MuteButtonCore());
-	core.setProps({
-		label,
-		disabled
-	});
-	const { getButtonProps, buttonRef } = useButton({
-		displayName: "MuteButton",
-		onActivate: () => core.toggle(volume),
-		isDisabled: () => disabled || !volume
-	});
-	if (!volume) return null;
-	const state = core.getState(volume);
-	return renderElement("button", {
-		render,
-		className,
-		style
-	}, {
-		state,
-		stateAttrMap: MuteButtonDataAttrs,
-		ref: [forwardedRef, buttonRef],
-		props: [
-			core.getAttrs(state),
-			elementProps,
-			getButtonProps()
-		]
-	});
+/** A button that toggles mute state. */
+const MuteButton = createMediaButton({
+	displayName: "MuteButton",
+	core: MuteButtonCore,
+	stateAttrMap: MuteButtonDataAttrs,
+	selector: selectVolume,
+	action: (core, state) => core.toggle(state)
 });
 
 //#endregion

package/dist/default/ui/mute-button/mute-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"mute-button.js","names":[],"sources":["../../../../src/ui/mute-button/mute-button.tsx"],"sourcesContent":["'use client';\n\nimport { MuteButtonCore, MuteButtonDataAttrs } from '@videojs/core';\nimport { logMissingFeature, selectVolume } 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';\nimport { useButton } from '../hooks/use-button';\n\nexport interface MuteButtonProps extends UIComponentProps<'button', MuteButtonCore.State>, MuteButtonCore.Props {}\n\n/**\n * A button that toggles mute state.\n */\nexport const MuteButton = forwardRef(function MuteButton(\n  componentProps: MuteButtonProps,\n  forwardedRef: ForwardedRef<HTMLButtonElement>\n) {\n  const { render, className, style, label, disabled, ...elementProps } = componentProps;\n\n  const volume = usePlayer(selectVolume);\n\n  const [core] = useState(() => new MuteButtonCore());\n  core.setProps({ label, disabled });\n\n  const { getButtonProps, buttonRef } = useButton({\n    displayName: 'MuteButton',\n    onActivate: () => core.toggle(volume!),\n    isDisabled: () => disabled || !volume,\n  });\n\n  if (!volume) {\n    if (__DEV__) logMissingFeature('MuteButton', 'volume');\n    return null;\n  }\n\n  const state = core.getState(volume);\n\n  return renderElement(\n    'button',\n    { render, className, style },\n    {\n      state,\n      stateAttrMap: MuteButtonDataAttrs,\n      ref: [forwardedRef, buttonRef],\n      props: [core.getAttrs(state), elementProps, getButtonProps()],\n    }\n  );\n});\n\nexport namespace MuteButton {\n  export type Props = MuteButtonProps;\n  export type State = MuteButtonCore.State;\n}\n"],"mappings":";;;;;;;;;;;;;AAiBA,MAAa,aAAa,WAAW,SAAS,WAC5C,gBACA,cACA;CACA,MAAM,EAAE,QAAQ,WAAW,OAAO,OAAO,UAAU,GAAG,iBAAiB;CAEvE,MAAM,SAAS,UAAU,aAAa;CAEtC,MAAM,CAAC,QAAQ,eAAe,IAAI,gBAAgB,CAAC;AACnD,MAAK,SAAS;EAAE;EAAO;EAAU,CAAC;CAElC,MAAM,EAAE,gBAAgB,cAAc,UAAU;EAC9C,aAAa;EACb,kBAAkB,KAAK,OAAO,OAAQ;EACtC,kBAAkB,YAAY,CAAC;EAChC,CAAC;AAEF,KAAI,CAAC,OAEH,QAAO;CAGT,MAAM,QAAQ,KAAK,SAAS,OAAO;AAEnC,QAAO,cACL,UACA;EAAE;EAAQ;EAAW;EAAO,EAC5B;EACE;EACA,cAAc;EACd,KAAK,CAAC,cAAc,UAAU;EAC9B,OAAO;GAAC,KAAK,SAAS,MAAM;GAAE;GAAc,gBAAgB;GAAC;EAC9D,CACF;EACD"}
+{"version":3,"file":"mute-button.js","names":[],"sources":["../../../../src/ui/mute-button/mute-button.tsx"],"sourcesContent":["'use client';\n\nimport { MuteButtonCore, MuteButtonDataAttrs } from '@videojs/core';\nimport { selectVolume } from '@videojs/core/dom';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { createMediaButton } from '../create-media-button';\n\nexport interface MuteButtonProps extends UIComponentProps<'button', MuteButtonCore.State>, MuteButtonCore.Props {}\n\n/** A button that toggles mute state. */\nexport const MuteButton = createMediaButton<MuteButtonCore, MuteButtonProps>({\n  displayName: 'MuteButton',\n  core: MuteButtonCore,\n  stateAttrMap: MuteButtonDataAttrs,\n  selector: selectVolume,\n  action: (core, state) => core.toggle(state),\n});\n\nexport namespace MuteButton {\n  export type Props = MuteButtonProps;\n  export type State = MuteButtonCore.State;\n}\n"],"mappings":";;;;;;;;AAWA,MAAa,aAAa,kBAAmD;CAC3E,aAAa;CACb,MAAM;CACN,cAAc;CACd,UAAU;CACV,SAAS,MAAM,UAAU,KAAK,OAAO,MAAM;CAC5C,CAAC"}

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

@@ -1,42 +1,17 @@
 'use client';
 
-import { usePlayer } from "../../player/context.js";
-import { renderElement } from "../../utils/use-render.js";
-import { useButton } from "../hooks/use-button.js";
+import { createMediaButton } from "../create-media-button.js";
 import { selectPiP } from "@videojs/core/dom";
-import { forwardRef, useState } from "react";
 import { PiPButtonCore, PiPButtonDataAttrs } from "@videojs/core";
 
 //#region src/ui/pip-button/pip-button.tsx
-const PiPButton = forwardRef(function PiPButton(componentProps, forwardedRef) {
-	const { render, className, style, label, disabled, ...elementProps } = componentProps;
-	const pip = usePlayer(selectPiP);
-	const [core] = useState(() => new PiPButtonCore());
-	core.setProps({
-		label,
-		disabled
-	});
-	const { getButtonProps, buttonRef } = useButton({
-		displayName: "PiPButton",
-		onActivate: () => core.toggle(pip),
-		isDisabled: () => disabled || !pip
-	});
-	if (!pip) return null;
-	const state = core.getState(pip);
-	return renderElement("button", {
-		render,
-		className,
-		style
-	}, {
-		state,
-		stateAttrMap: PiPButtonDataAttrs,
-		ref: [forwardedRef, buttonRef],
-		props: [
-			core.getAttrs(state),
-			elementProps,
-			getButtonProps()
-		]
-	});
+/** A button that toggles picture-in-picture. */
+const PiPButton = createMediaButton({
+	displayName: "PiPButton",
+	core: PiPButtonCore,
+	stateAttrMap: PiPButtonDataAttrs,
+	selector: selectPiP,
+	action: (core, state) => core.toggle(state)
 });
 
 //#endregion

package/dist/default/ui/pip-button/pip-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"pip-button.js","names":[],"sources":["../../../../src/ui/pip-button/pip-button.tsx"],"sourcesContent":["'use client';\n\nimport { PiPButtonCore, PiPButtonDataAttrs } from '@videojs/core';\nimport { logMissingFeature, selectPiP } 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';\nimport { useButton } from '../hooks/use-button';\n\nexport interface PiPButtonProps extends UIComponentProps<'button', PiPButtonCore.State>, PiPButtonCore.Props {}\n\nexport const PiPButton = forwardRef(function PiPButton(\n  componentProps: PiPButtonProps,\n  forwardedRef: ForwardedRef<HTMLButtonElement>\n) {\n  const { render, className, style, label, disabled, ...elementProps } = componentProps;\n\n  const pip = usePlayer(selectPiP);\n\n  const [core] = useState(() => new PiPButtonCore());\n  core.setProps({ label, disabled });\n\n  const { getButtonProps, buttonRef } = useButton({\n    displayName: 'PiPButton',\n    onActivate: () => core.toggle(pip!),\n    isDisabled: () => disabled || !pip,\n  });\n\n  if (!pip) {\n    if (__DEV__) logMissingFeature('PiPButton', 'pip');\n    return null;\n  }\n\n  const state = core.getState(pip);\n\n  return renderElement(\n    'button',\n    { render, className, style },\n    {\n      state,\n      stateAttrMap: PiPButtonDataAttrs,\n      ref: [forwardedRef, buttonRef],\n      props: [core.getAttrs(state), elementProps, getButtonProps()],\n    }\n  );\n});\n\nexport namespace PiPButton {\n  export type Props = PiPButtonProps;\n  export type State = PiPButtonCore.State;\n}\n"],"mappings":";;;;;;;;;;AAcA,MAAa,YAAY,WAAW,SAAS,UAC3C,gBACA,cACA;CACA,MAAM,EAAE,QAAQ,WAAW,OAAO,OAAO,UAAU,GAAG,iBAAiB;CAEvE,MAAM,MAAM,UAAU,UAAU;CAEhC,MAAM,CAAC,QAAQ,eAAe,IAAI,eAAe,CAAC;AAClD,MAAK,SAAS;EAAE;EAAO;EAAU,CAAC;CAElC,MAAM,EAAE,gBAAgB,cAAc,UAAU;EAC9C,aAAa;EACb,kBAAkB,KAAK,OAAO,IAAK;EACnC,kBAAkB,YAAY,CAAC;EAChC,CAAC;AAEF,KAAI,CAAC,IAEH,QAAO;CAGT,MAAM,QAAQ,KAAK,SAAS,IAAI;AAEhC,QAAO,cACL,UACA;EAAE;EAAQ;EAAW;EAAO,EAC5B;EACE;EACA,cAAc;EACd,KAAK,CAAC,cAAc,UAAU;EAC9B,OAAO;GAAC,KAAK,SAAS,MAAM;GAAE;GAAc,gBAAgB;GAAC;EAC9D,CACF;EACD"}
+{"version":3,"file":"pip-button.js","names":[],"sources":["../../../../src/ui/pip-button/pip-button.tsx"],"sourcesContent":["'use client';\n\nimport { PiPButtonCore, PiPButtonDataAttrs } from '@videojs/core';\nimport { selectPiP } from '@videojs/core/dom';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { createMediaButton } from '../create-media-button';\n\nexport interface PiPButtonProps extends UIComponentProps<'button', PiPButtonCore.State>, PiPButtonCore.Props {}\n\n/** A button that toggles picture-in-picture. */\nexport const PiPButton = createMediaButton<PiPButtonCore, PiPButtonProps>({\n  displayName: 'PiPButton',\n  core: PiPButtonCore,\n  stateAttrMap: PiPButtonDataAttrs,\n  selector: selectPiP,\n  action: (core, state) => core.toggle(state),\n});\n\nexport namespace PiPButton {\n  export type Props = PiPButtonProps;\n  export type State = PiPButtonCore.State;\n}\n"],"mappings":";;;;;;;;AAWA,MAAa,YAAY,kBAAiD;CACxE,aAAa;CACb,MAAM;CACN,cAAc;CACd,UAAU;CACV,SAAS,MAAM,UAAU,KAAK,OAAO,MAAM;CAC5C,CAAC"}

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

@@ -1,10 +1,7 @@
 'use client';
 
-import { usePlayer } from "../../player/context.js";
-import { renderElement } from "../../utils/use-render.js";
-import { useButton } from "../hooks/use-button.js";
+import { createMediaButton } from "../create-media-button.js";
 import { selectPlayback } from "@videojs/core/dom";
-import { forwardRef, useState } from "react";
 import { PlayButtonCore, PlayButtonDataAttrs } from "@videojs/core";
 
 //#region src/ui/play-button/play-button.tsx
@@ -24,35 +21,12 @@ import { PlayButtonCore, PlayButtonDataAttrs } from "@videojs/core";
 * />
 * ```
 */
-const PlayButton = forwardRef(function PlayButton(componentProps, forwardedRef) {
-	const { render, className, style, label, disabled, ...elementProps } = componentProps;
-	const playback = usePlayer(selectPlayback);
-	const [core] = useState(() => new PlayButtonCore());
-	core.setProps({
-		label,
-		disabled
-	});
-	const { getButtonProps, buttonRef } = useButton({
-		displayName: "PlayButton",
-		onActivate: () => core.toggle(playback),
-		isDisabled: () => disabled || !playback
-	});
-	if (!playback) return null;
-	const state = core.getState(playback);
-	return renderElement("button", {
-		render,
-		className,
-		style
-	}, {
-		state,
-		stateAttrMap: PlayButtonDataAttrs,
-		ref: [forwardedRef, buttonRef],
-		props: [
-			core.getAttrs(state),
-			elementProps,
-			getButtonProps()
-		]
-	});
+const PlayButton = createMediaButton({
+	displayName: "PlayButton",
+	core: PlayButtonCore,
+	stateAttrMap: PlayButtonDataAttrs,
+	selector: selectPlayback,
+	action: (core, state) => core.toggle(state)
 });
 
 //#endregion

package/dist/default/ui/play-button/play-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"play-button.js","names":[],"sources":["../../../../src/ui/play-button/play-button.tsx"],"sourcesContent":["'use client';\n\nimport { PlayButtonCore, PlayButtonDataAttrs } 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';\nimport { useButton } from '../hooks/use-button';\n\nexport interface PlayButtonProps extends UIComponentProps<'button', PlayButtonCore.State>, PlayButtonCore.Props {}\n\n/**\n * A button that toggles playback.\n *\n * @example\n * ```tsx\n * <PlayButton />\n *\n * <PlayButton\n *   render={(props, state) => (\n *     <button {...props}>\n *       {state.paused ? <PlayIcon /> : <PauseIcon />}\n *     </button>\n *   )}\n * />\n * ```\n */\nexport const PlayButton = forwardRef(function PlayButton(\n  componentProps: PlayButtonProps,\n  forwardedRef: ForwardedRef<HTMLButtonElement>\n) {\n  const { render, className, style, label, disabled, ...elementProps } = componentProps;\n\n  const playback = usePlayer(selectPlayback);\n\n  const [core] = useState(() => new PlayButtonCore());\n  core.setProps({ label, disabled });\n\n  const { getButtonProps, buttonRef } = useButton({\n    displayName: 'PlayButton',\n    onActivate: () => core.toggle(playback!),\n    isDisabled: () => disabled || !playback,\n  });\n\n  if (!playback) {\n    if (__DEV__) logMissingFeature('PlayButton', 'playback');\n    return null;\n  }\n\n  const state = core.getState(playback);\n\n  return renderElement(\n    'button',\n    { render, className, style },\n    {\n      state,\n      stateAttrMap: PlayButtonDataAttrs,\n      ref: [forwardedRef, buttonRef],\n      props: [core.getAttrs(state), elementProps, getButtonProps()],\n    }\n  );\n});\n\nexport namespace PlayButton {\n  export type Props = PlayButtonProps;\n  export type State = PlayButtonCore.State;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AA8BA,MAAa,aAAa,WAAW,SAAS,WAC5C,gBACA,cACA;CACA,MAAM,EAAE,QAAQ,WAAW,OAAO,OAAO,UAAU,GAAG,iBAAiB;CAEvE,MAAM,WAAW,UAAU,eAAe;CAE1C,MAAM,CAAC,QAAQ,eAAe,IAAI,gBAAgB,CAAC;AACnD,MAAK,SAAS;EAAE;EAAO;EAAU,CAAC;CAElC,MAAM,EAAE,gBAAgB,cAAc,UAAU;EAC9C,aAAa;EACb,kBAAkB,KAAK,OAAO,SAAU;EACxC,kBAAkB,YAAY,CAAC;EAChC,CAAC;AAEF,KAAI,CAAC,SAEH,QAAO;CAGT,MAAM,QAAQ,KAAK,SAAS,SAAS;AAErC,QAAO,cACL,UACA;EAAE;EAAQ;EAAW;EAAO,EAC5B;EACE;EACA,cAAc;EACd,KAAK,CAAC,cAAc,UAAU;EAC9B,OAAO;GAAC,KAAK,SAAS,MAAM;GAAE;GAAc,gBAAgB;GAAC;EAC9D,CACF;EACD"}
+{"version":3,"file":"play-button.js","names":[],"sources":["../../../../src/ui/play-button/play-button.tsx"],"sourcesContent":["'use client';\n\nimport { PlayButtonCore, PlayButtonDataAttrs } from '@videojs/core';\nimport { selectPlayback } from '@videojs/core/dom';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { createMediaButton } from '../create-media-button';\n\nexport interface PlayButtonProps extends UIComponentProps<'button', PlayButtonCore.State>, PlayButtonCore.Props {}\n\n/**\n * A button that toggles playback.\n *\n * @example\n * ```tsx\n * <PlayButton />\n *\n * <PlayButton\n *   render={(props, state) => (\n *     <button {...props}>\n *       {state.paused ? <PlayIcon /> : <PauseIcon />}\n *     </button>\n *   )}\n * />\n * ```\n */\nexport const PlayButton = createMediaButton<PlayButtonCore, PlayButtonProps>({\n  displayName: 'PlayButton',\n  core: PlayButtonCore,\n  stateAttrMap: PlayButtonDataAttrs,\n  selector: selectPlayback,\n  action: (core, state) => core.toggle(state),\n});\n\nexport namespace PlayButton {\n  export type Props = PlayButtonProps;\n  export type State = PlayButtonCore.State;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AA0BA,MAAa,aAAa,kBAAmD;CAC3E,aAAa;CACb,MAAM;CACN,cAAc;CACd,UAAU;CACV,SAAS,MAAM,UAAU,KAAK,OAAO,MAAM;CAC5C,CAAC"}

package/dist/default/ui/playback-rate-button/index.js

@@ -0,0 +1,3 @@
+import { PlaybackRateButton } from "./playback-rate-button.js";
+
+export { PlaybackRateButton };

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

@@ -0,0 +1,34 @@
+'use client';
+
+import { createMediaButton } from "../create-media-button.js";
+import { selectPlaybackRate } from "@videojs/core/dom";
+import { PlaybackRateButtonCore, PlaybackRateButtonDataAttrs } from "@videojs/core";
+
+//#region src/ui/playback-rate-button/playback-rate-button.tsx
+/**
+* A button that cycles through playback rates.
+*
+* @example
+* ```tsx
+* <PlaybackRateButton />
+*
+* <PlaybackRateButton
+*   render={(props, state) => (
+*     <button {...props}>
+*       {state.rate}&times;
+*     </button>
+*   )}
+* />
+* ```
+*/
+const PlaybackRateButton = createMediaButton({
+	displayName: "PlaybackRateButton",
+	core: PlaybackRateButtonCore,
+	stateAttrMap: PlaybackRateButtonDataAttrs,
+	selector: selectPlaybackRate,
+	action: (core, state) => core.cycle(state)
+});
+
+//#endregion
+export { PlaybackRateButton };
+//# sourceMappingURL=playback-rate-button.js.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,16 @@
+'use client';
+
+import { createContext, useContext } from "react";
+
+//#region src/ui/popover/context.tsx
+const PopoverContext = createContext(null);
+const PopoverContextProvider = PopoverContext.Provider;
+function usePopoverContext() {
+	const ctx = useContext(PopoverContext);
+	if (!ctx) throw new Error("Popover compound components must be used within a Popover.Root");
+	return ctx;
+}
+
+//#endregion
+export { PopoverContextProvider, usePopoverContext };
+//# sourceMappingURL=context.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"context.js","names":[],"sources":["../../../../src/ui/popover/context.tsx"],"sourcesContent":["'use client';\n\nimport type { PopoverCore, StateAttrMap } from '@videojs/core';\nimport type { PopoverApi } from '@videojs/core/dom';\nimport { createContext, useContext } from 'react';\n\nexport interface PopoverContextValue {\n  core: PopoverCore;\n  popover: PopoverApi;\n  state: PopoverCore.State;\n  stateAttrMap: StateAttrMap<PopoverCore.State>;\n  anchorName: string;\n  popupId: string;\n}\n\nconst PopoverContext = createContext<PopoverContextValue | null>(null);\n\nexport const PopoverContextProvider = PopoverContext.Provider;\n\nexport function usePopoverContext(): PopoverContextValue {\n  const ctx = useContext(PopoverContext);\n  if (!ctx) throw new Error('Popover compound components must be used within a Popover.Root');\n  return ctx;\n}\n"],"mappings":";;;;;AAeA,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"}

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

@@ -0,0 +1,4 @@
+import { usePopoverContext } from "./context.js";
+import { index_parts_exports } from "./index.parts.js";
+
+export { index_parts_exports as Popover, usePopoverContext };

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

@@ -0,0 +1,17 @@
+import { __exportAll } from "../../_virtual/_rolldown/runtime.js";
+import { PopoverArrow } from "./popover-arrow.js";
+import { PopoverPopup } from "./popover-popup.js";
+import { PopoverRoot } from "./popover-root.js";
+import { PopoverTrigger } from "./popover-trigger.js";
+
+//#region src/ui/popover/index.parts.ts
+var index_parts_exports = /* @__PURE__ */ __exportAll({
+	Arrow: () => PopoverArrow,
+	Popup: () => PopoverPopup,
+	Root: () => PopoverRoot,
+	Trigger: () => PopoverTrigger
+});
+
+//#endregion
+export { index_parts_exports };
+//# sourceMappingURL=index.parts.js.map

package/dist/default/ui/popover/index.parts.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.parts.js","names":[],"sources":["../../../../src/ui/popover/index.parts.ts"],"sourcesContent":["export { PopoverArrow as Arrow, type PopoverArrowProps as ArrowProps } from './popover-arrow';\nexport { PopoverPopup as Popup, type PopoverPopupProps as PopupProps } from './popover-popup';\nexport { PopoverRoot as Root, type PopoverRootProps as RootProps } from './popover-root';\nexport { PopoverTrigger as Trigger, type PopoverTriggerProps as TriggerProps } from './popover-trigger';\n"],"mappings":""}

package/dist/default/ui/popover/popover-arrow.js

@@ -0,0 +1,17 @@
+'use client';
+
+import { usePopoverContext } from "./context.js";
+import { createContextPart } from "../create-context-part.js";
+
+//#region src/ui/popover/popover-arrow.tsx
+/** Decorative arrow pointing from the popup toward the trigger. Hidden from assistive technology. */
+const PopoverArrow = createContextPart({
+	displayName: "PopoverArrow",
+	tag: "div",
+	useContext: usePopoverContext,
+	staticProps: { "aria-hidden": "true" }
+});
+
+//#endregion
+export { PopoverArrow };
+//# sourceMappingURL=popover-arrow.js.map

package/dist/default/ui/popover/popover-arrow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"popover-arrow.js","names":[],"sources":["../../../../src/ui/popover/popover-arrow.tsx"],"sourcesContent":["'use client';\n\nimport type { PopoverState } from '@videojs/core';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { createContextPart } from '../create-context-part';\nimport { usePopoverContext } from './context';\n\nexport interface PopoverArrowProps extends UIComponentProps<'div', PopoverState> {}\n\n/** Decorative arrow pointing from the popup toward the trigger. Hidden from assistive technology. */\nexport const PopoverArrow = createContextPart<PopoverArrowProps, PopoverState>({\n  displayName: 'PopoverArrow',\n  tag: 'div',\n  useContext: usePopoverContext,\n  staticProps: { 'aria-hidden': 'true' as const },\n});\n\nexport namespace PopoverArrow {\n  export type Props = PopoverArrowProps;\n  export type State = PopoverState;\n}\n"],"mappings":";;;;;;;AAWA,MAAa,eAAe,kBAAmD;CAC7E,aAAa;CACb,KAAK;CACL,YAAY;CACZ,aAAa,EAAE,eAAe,QAAiB;CAChD,CAAC"}

package/dist/default/ui/popover/popover-popup.js

@@ -0,0 +1,94 @@
+'use client';
+
+import { useComposedRefs } from "../../utils/use-composed-refs.js";
+import { renderElement } from "../../utils/use-render.js";
+import { usePopoverContext } from "./context.js";
+import { getAnchorPositionStyle, resolveOffsets } from "@videojs/core/dom";
+import { forwardRef, useCallback, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { supportsAnchorPositioning } from "@videojs/utils/dom";
+
+//#region src/ui/popover/popover-popup.tsx
+const POPOVER_RESET = {
+	position: "fixed",
+	inset: "auto",
+	margin: 0
+};
+/** Container for the popover content. Positioned relative to the trigger using CSS anchor positioning with a JavaScript fallback. */
+const PopoverPopup = forwardRef(function PopoverPopup({ render, className, style, ...elementProps }, forwardedRef) {
+	const { core, popover, state, stateAttrMap, anchorName, popupId } = usePopoverContext();
+	const internalRef = useRef(null);
+	const composedRef = useComposedRefs(forwardedRef, useCallback((el) => {
+		popover.setPopupElement(el);
+	}, [popover]), internalRef);
+	const posOpts = useMemo(() => ({
+		side: state.side,
+		align: state.align
+	}), [state.side, state.align]);
+	const anchorStyle = useMemo(() => {
+		if (!supportsAnchorPositioning()) return null;
+		return getAnchorPositionStyle(anchorName, posOpts);
+	}, [anchorName, posOpts]);
+	const [manualStyle, setManualStyle] = useState(null);
+	useLayoutEffect(() => {
+		if (supportsAnchorPositioning()) return;
+		if (!state.open) {
+			setManualStyle(null);
+			return;
+		}
+		function measure() {
+			const triggerEl = popover.triggerElement;
+			const popupEl = internalRef.current;
+			if (!triggerEl || !popupEl) return;
+			setManualStyle(getAnchorPositionStyle(anchorName, posOpts, triggerEl.getBoundingClientRect(), popupEl.getBoundingClientRect(), document.documentElement.getBoundingClientRect(), resolveOffsets(popupEl)));
+		}
+		measure();
+		let rafId = 0;
+		function reposition() {
+			cancelAnimationFrame(rafId);
+			rafId = requestAnimationFrame(measure);
+		}
+		window.addEventListener("scroll", reposition, {
+			capture: true,
+			passive: true
+		});
+		window.addEventListener("resize", reposition);
+		return () => {
+			cancelAnimationFrame(rafId);
+			window.removeEventListener("scroll", reposition, true);
+			window.removeEventListener("resize", reposition);
+		};
+	}, [
+		state.open,
+		anchorName,
+		posOpts,
+		popover
+	]);
+	const positioningStyle = anchorStyle ?? manualStyle ?? POPOVER_RESET;
+	if (!state.open) return null;
+	const { onFocusOut, ...restPopupProps } = popover.popupProps;
+	return renderElement("div", {
+		render,
+		className,
+		style
+	}, {
+		state,
+		stateAttrMap,
+		ref: composedRef,
+		props: [
+			{
+				id: popupId,
+				style: positioningStyle,
+				...core.getPopupAttrs(state)
+			},
+			{
+				...restPopupProps,
+				onBlur: onFocusOut
+			},
+			elementProps
+		]
+	});
+});
+
+//#endregion
+export { PopoverPopup };
+//# sourceMappingURL=popover-popup.js.map