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

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

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

Files changed (1552) hide show

package/dist/default/ui/error-dialog/error-dialog-root.js CHANGED Viewed

@@ -1,55 +1,40 @@
 import { usePlayer } from "../../player/context.js";
 import { useLatestRef } from "../../utils/use-latest-ref.js";
-import { useDestroy } from "../../utils/use-destroy.js";
-import { AlertDialogContextProvider } from "../alert-dialog/context.js";
-import { useSafeId } from "../../utils/use-safe-id.js";
+import { DialogContextProvider } from "../dialog/context.js";
+import { useDialogRoot } from "../dialog/use-dialog-root.js";
 import { ErrorDialogContextProvider } from "./context.js";
-import { createAlertDialog, createTransition, selectError } from "@videojs/core/dom";
-import { useSnapshot } from "@videojs/store/react";
-import { useEffect, useRef, useState } from "react";
+import { selectError } from "@videojs/core/dom";
+import { useRef } from "react";
 import { jsx } from "react/jsx-runtime";
-import { AlertDialogDataAttrs, ErrorDialogCore } from "@videojs/core";
+import { ErrorDialogCore, ErrorDialogDataAttrs } from "@videojs/core";
 //#region src/ui/error-dialog/error-dialog-root.tsx
+/** Opens from player error state and provides it to the shared dialog parts. */
 function ErrorDialogRoot({ children }) {
-	const [core] = useState(() => new ErrorDialogCore());
 	const errorState = usePlayer(selectError);
 	const lastError = useRef(errorState?.error ?? null);
 	if (errorState?.error) lastError.current = errorState.error;
 	const errorStateRef = useLatestRef(errorState);
-	const [dialog] = useState(() => createAlertDialog({
-		transition: createTransition(),
-		onOpenChange: (nextOpen) => {
+	const dialogContext = useDialogRoot({
+		open: Boolean(errorState?.error),
+		onOpenChange(nextOpen) {
 			if (!nextOpen) errorStateRef.current?.dismissError();
-		}
-	}));
-	const titleId = useSafeId("error-dialog-title");
-	const descriptionId = useSafeId("error-dialog-desc");
-	core.setTitleId(titleId);
-	core.setDescriptionId(descriptionId);
-	useEffect(() => {
-		const hasError = Boolean(errorState?.error);
-		const { active: isOpen } = dialog.input.current;
-		if (hasError && !isOpen) dialog.open();
-		else if (!hasError && isOpen) dialog.close();
-	}, [errorState?.error, dialog]);
-	useDestroy(dialog);
-	const input = useSnapshot(dialog.input);
-	core.setInput(input);
-	const state = core.getState();
+		},
+		coreFactory: createErrorDialogCore,
+		stateAttrMap: ErrorDialogDataAttrs,
+		idPrefix: "error-dialog"
+	});
 	if (!errorState) return null;
 	return /* @__PURE__ */ jsx(ErrorDialogContextProvider, {
 		value: { lastError: lastError.current },
-		children: /* @__PURE__ */ jsx(AlertDialogContextProvider, {
-			value: {
-				core,
-				dialog,
-				state,
-				stateAttrMap: AlertDialogDataAttrs
-			},
+		children: /* @__PURE__ */ jsx(DialogContextProvider, {
+			value: dialogContext,
 			children
 		})
 	});
 }
+function createErrorDialogCore() {
+	return new ErrorDialogCore();
+}
 //#endregion
 export { ErrorDialogRoot };

package/dist/default/ui/error-dialog/error-dialog-root.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"error-dialog-root.js","names":[],"sources":["../../../../src/ui/error-dialog/error-dialog-root.tsx"],"sourcesContent":["import { ~~AlertDialogDataAttrs~~, ~~ErrorDialogCore~~ } from '@videojs/core';\nimport { ~~createAlertDialog, createTransition,~~ selectError } from '@videojs/core/dom';\nimport ~~{ useSnapshot } from '@videojs/store/react';\nimport~~ type { ReactNode } from 'react';\nimport { ~~useEffect,~~ useRef, ~~useState~~ } from 'react';\n\nimport { usePlayer } from '../../player/context';\nimport { ~~useDestroy } from '../../utils/use-destroy';\nimport {~~ useLatestRef } from '../../utils/use-latest-ref';\nimport { ~~useSafeId~~ } from '~~../../utils~~/~~use-safe-id~~';\nimport { ~~AlertDialogContextProvider~~ } from '../~~alert~~-dialog~~/context~~';\nimport { ErrorDialogContextProvider } from './context';\n\nexport interface ErrorDialogRootProps {\n children?: ReactNode;\n}\n\nexport function ErrorDialogRoot({ children }: ErrorDialogRootProps): ReactNode {\n const ~~[core] = useState(() => new ErrorDialogCore());\n const~~ errorState = usePlayer(selectError);\n const lastError = useRef(errorState?.error ?? null);\n\n if (errorState?.error) lastError.current = errorState.error;\n\n const errorStateRef = useLatestRef(errorState);\n\n const ~~[dialog]~~ = ~~useState~~(~~() =>\n createAlertDialog(~~{\n ~~transition~~: ~~createTransition~~(),\n onOpenChange: (nextOpen~~: boolean~~) => {\n if (!nextOpen) ~~{\n~~ errorStateRef.current?.dismissError();\n }\n },\n ~~})\n );\n\n const~~ ~~titleId = useSafeId('error-dialog-title');\~~n ~~const~~ ~~descriptionId = useSafeId(~~'error-dialog~~-desc~~'~~);\~~n\n ~~core.setTitleId(titleId);\n core.setDescriptionId(descriptionId);\n\n useEffect(() => {\n const hasError = Boolean(errorState?.error);\n const { active: isOpen~~ } ~~= dialog.input.current;\n\n if (hasError && !isOpen~~) ~~{\n dialog.open()~~;\n ~~} else if (!hasError && isOpen) {~~\n ~~dialog.close();\n }\n~~ ~~}, [errorState?.error, dialog]);\n\n useDestroy(dialog);\n\n const input = useSnapshot(dialog.input);\n core.setInput(input);\n const state = core.getState();\n\n~~ if (!errorState) return null;\n\n return (\n <ErrorDialogContextProvider value={{ lastError: lastError.current }}>\n <~~AlertDialogContextProvider~~ value={~~{ core, dialog, state, stateAttrMap: AlertDialogDataAttrs~~ }~~}>\n~~ {children}\n </~~AlertDialogContextProvider~~>\n </ErrorDialogContextProvider>\n );\n}\n\nexport namespace ErrorDialogRoot {\n export type Props = ErrorDialogRootProps;\n}\n"],"mappings":"~~;;;;;;;;;;;;AAiBA~~,SAAgB,gBAAgB,EAAE,YAA6C;CAC7E,MAAM,~~CAAC,QAAQ,eAAe,IAAI,gBAAgB,CAAC;CACnD,MAAM,~~aAAa,UAAU,WAAW;CACxC,MAAM,YAAY,OAAO,YAAY,SAAS,IAAI;CAElD,IAAI,YAAY,OAAO,UAAU,UAAU,WAAW;CAEtD,MAAM,gBAAgB,aAAa,UAAU;~~CAE7C~~,MAAM,~~CAAC~~,~~UAAU~~,~~eACf~~,~~kBAAkB;EAChB~~,YAAY,~~iBAAiB~~;~~EAC7B~~,~~eAAe~~,~~aAAsB~~;~~GACnC~~,IAAI,CAAC,~~UACH~~,cAAc,SAAS,aAAa;~~EAExC~~;~~CACF~~,~~CAAC,CACH;CAEA,MAAM,UAAU,UAAU,oBAAoB;CAC9C,MAAM,gBAAgB,UAAU,mBAAmB;CAEnD,KAAK,WAAW,OAAO;CACvB,KAAK,iBAAiB,~~aAAa;~~CAEnC~~,~~gBAAgB~~;EACd,~~MAAM,WAAW,QAAQ,YAAY,KAAK~~;~~EAC1C~~,~~MAAM,EAAE,QAAQ,WAAW,OAAO,MAAM;EAExC,IAAI,YAAY,~~CAAC~~,QACf,OAAO,KAAK~~;~~OACP~~,IAAI,CAAC,YAAY,~~QACtB,~~OAAO~~,MAAM~~;~~CAEjB,GAAG,CAAC,YAAY,OAAO,MAAM,CAAC;CAE9B,WAAW,MAAM;CAEjB,MAAM,QAAQ,YAAY,OAAO,KAAK;CACtC,KAAK,SAAS,KAAK;CACnB,MAAM,QAAQ,KAAK,SAAS;CAE5B,IAAI,CAAC,YAAY,OAAO;~~CAExB,OACE,oBAAC,4BAAD;EAA4B,OAAO,EAAE,WAAW,UAAU,QAAQ;EAChE,UAAA,oBAAC,~~4BAAD~~;~~GAA4B~~,OAAO;~~IAAE~~;~~IAAM~~;~~IAAQ;IAAO~~,~~cAAc~~;~~GAAqB~~;~~GAC1F;EACyB~~,~~CAAA~~;~~CACF~~,~~CAAA~~;~~AAEhC~~"}
1	+ {"version":3,"file":"error-dialog-root.js","names":[],"sources":["../../../../src/ui/error-dialog/error-dialog-root.tsx"],"sourcesContent":["import { ErrorDialogCore, ErrorDialogDataAttrs } from '@videojs/core';\nimport { selectError } from '@videojs/core/dom';\nimport type { ReactNode } from 'react';\nimport { useRef } from 'react';\n\nimport { usePlayer } from '../../player/context';\nimport { useLatestRef } from '../../utils/use-latest-ref';\nimport { DialogContextProvider } from '../dialog/context';\nimport { useDialogRoot } from '../dialog/use-dialog-root';\nimport { ErrorDialogContextProvider } from './context';\n\nexport interface ErrorDialogRootProps {\n children?: ReactNode;\n}\n\n/** Opens from player error state and provides it to the shared dialog parts. */\nexport function ErrorDialogRoot({ children }: ErrorDialogRootProps): ReactNode {\n const errorState = usePlayer(selectError);\n const lastError = useRef(errorState?.error ?? null);\n\n if (errorState?.error) lastError.current = errorState.error;\n\n const errorStateRef = useLatestRef(errorState);\n const dialogContext = useDialogRoot({\n open: Boolean(errorState?.error),\n onOpenChange(nextOpen) {\n if (!nextOpen) errorStateRef.current?.dismissError();\n },\n coreFactory: createErrorDialogCore,\n stateAttrMap: ErrorDialogDataAttrs,\n idPrefix: 'error-dialog',\n });\n\n if (!errorState) return null;\n\n return (\n <ErrorDialogContextProvider value={{ lastError: lastError.current }}>\n <DialogContextProvider value={dialogContext}>{children}</DialogContextProvider>\n </ErrorDialogContextProvider>\n );\n}\n\nfunction createErrorDialogCore(): ErrorDialogCore {\n return new ErrorDialogCore();\n}\n\nexport namespace ErrorDialogRoot {\n export type Props = ErrorDialogRootProps;\n}\n"],"mappings":";;;;;;;;;;;AAgBA,SAAgB,gBAAgB,EAAE,YAA6C;CAC7E,MAAM,aAAa,UAAU,WAAW;CACxC,MAAM,YAAY,OAAO,YAAY,SAAS,IAAI;CAElD,IAAI,YAAY,OAAO,UAAU,UAAU,WAAW;CAEtD,MAAM,gBAAgB,aAAa,UAAU;CAC7C,MAAM,gBAAgB,cAAc;EAClC,MAAM,QAAQ,YAAY,KAAK;EAC/B,aAAa,UAAU;GACrB,IAAI,CAAC,UAAU,cAAc,SAAS,aAAa;EACrD;EACA,aAAa;EACb,cAAc;EACd,UAAU;CACZ,CAAC;CAED,IAAI,CAAC,YAAY,OAAO;CAExB,OACE,oBAAC,4BAAD;EAA4B,OAAO,EAAE,WAAW,UAAU,QAAQ;EAChE,UAAA,oBAAC,uBAAD;GAAuB,OAAO;GAAgB;EAAgC,CAAA;CACpD,CAAA;AAEhC;AAEA,SAAS,wBAAyC;CAChD,OAAO,IAAI,gBAAgB;AAC7B"}

package/dist/default/ui/error-dialog/error-dialog-title.js CHANGED Viewed

@@ -1,13 +1,14 @@
 import { useTranslator } from "../../i18n/context.js";
 import { renderElement } from "../../utils/use-render.js";
-import { useAlertDialogContext } from "../alert-dialog/context.js";
+import { useDialogContext } from "../dialog/context.js";
 import { translateText } from "@videojs/core/i18n";
 import { forwardRef } from "react";
 import { getErrorDialogTitleText } from "@videojs/core";
 //#region src/ui/error-dialog/error-dialog-title.tsx
+/** Renders the localized error dialog heading, or authored children when provided. */
 const ErrorDialogTitle = forwardRef(function ErrorDialogTitle({ render, className, style, children, ...elementProps }, forwardedRef) {
 	const t = useTranslator();
-	const { state, stateAttrMap } = useAlertDialogContext();
+	const { state, stateAttrMap } = useDialogContext();
 	const content = children ?? translateText(getErrorDialogTitleText(), t);
 	return renderElement("h2", {
 		render,

package/dist/default/ui/error-dialog/error-dialog-title.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"error-dialog-title.js","names":[],"sources":["../../../../src/ui/error-dialog/error-dialog-title.tsx"],"sourcesContent":["import ~~type~~ { ~~AlertDialogCore~~ } ~~from '@videojs/core';\nimport {~~ getErrorDialogTitleText } from '@videojs/core';\nimport { translateText } from '@videojs/core/i18n';\nimport { forwardRef, type ReactNode } from 'react';\nimport { useTranslator } from '../../i18n/context';\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { ~~useAlertDialogContext~~ } from '../~~alert-~~dialog/context';\n\nexport interface ErrorDialogTitleProps extends UIComponentProps<'h2', ~~AlertDialogCore~~.State> {}\n\nexport const ErrorDialogTitle = forwardRef<HTMLHeadingElement, ErrorDialogTitleProps>(function ErrorDialogTitle(\n { render, className, style, children, ...elementProps },\n forwardedRef\n) {\n const t = useTranslator();\n const { state, stateAttrMap } = ~~useAlertDialogContext~~();\n const content: ReactNode = children ?? translateText(getErrorDialogTitleText(), t);\n\n return renderElement(\n 'h2',\n { render, className, style },\n {\n state,\n stateAttrMap,\n ref: forwardedRef,\n props: [{ id: state.titleId, children: content }, elementProps],\n }\n );\n});\n\nexport namespace ErrorDialogTitle {\n export type Props = ErrorDialogTitleProps;\n export type State = ~~AlertDialogCore~~.State;\n}\n"],"mappings":"~~;;;;;;;AAWA~~,MAAa,mBAAmB,WAAsD,SAAS,iBAC7F,EAAE,QAAQ,WAAW,OAAO,UAAU,GAAG,gBACzC,cACA;CACA,MAAM,IAAI,cAAc;CACxB,MAAM,EAAE,OAAO,iBAAiB,~~sBAAsB~~;~~CACtD~~,MAAM,UAAqB,YAAY,cAAc,wBAAwB,GAAG,CAAC;CAEjF,OAAO,cACL,MACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EACE;EACA;EACA,KAAK;EACL,OAAO,CAAC;GAAE,IAAI,MAAM;GAAS,UAAU;EAAQ,GAAG,YAAY;CAChE,CACF;AACF,CAAC"}
1	+ {"version":3,"file":"error-dialog-title.js","names":[],"sources":["../../../../src/ui/error-dialog/error-dialog-title.tsx"],"sourcesContent":["import { type DialogCore, getErrorDialogTitleText } from '@videojs/core';\nimport { translateText } from '@videojs/core/i18n';\nimport { forwardRef, type ReactNode } from 'react';\n\nimport { useTranslator } from '../../i18n/context';\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { useDialogContext } from '../dialog/context';\n\nexport interface ErrorDialogTitleProps extends UIComponentProps<'h2', DialogCore.State> {}\n\n/** Renders the localized error dialog heading, or authored children when provided. */\nexport const ErrorDialogTitle = forwardRef<HTMLHeadingElement, ErrorDialogTitleProps>(function ErrorDialogTitle(\n { render, className, style, children, ...elementProps },\n forwardedRef\n) {\n const t = useTranslator();\n const { state, stateAttrMap } = useDialogContext();\n const content: ReactNode = children ?? translateText(getErrorDialogTitleText(), t);\n\n return renderElement(\n 'h2',\n { render, className, style },\n {\n state,\n stateAttrMap,\n ref: forwardedRef,\n props: [{ id: state.titleId, children: content }, elementProps],\n }\n );\n});\n\nexport namespace ErrorDialogTitle {\n export type Props = ErrorDialogTitleProps;\n export type State = DialogCore.State;\n}\n"],"mappings":";;;;;;;;AAYA,MAAa,mBAAmB,WAAsD,SAAS,iBAC7F,EAAE,QAAQ,WAAW,OAAO,UAAU,GAAG,gBACzC,cACA;CACA,MAAM,IAAI,cAAc;CACxB,MAAM,EAAE,OAAO,iBAAiB,iBAAiB;CACjD,MAAM,UAAqB,YAAY,cAAc,wBAAwB,GAAG,CAAC;CAEjF,OAAO,cACL,MACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EACE;EACA;EACA,KAAK;EACL,OAAO,CAAC;GAAE,IAAI,MAAM;GAAS,UAAU;EAAQ,GAAG,YAAY;CAChE,CACF;AACF,CAAC"}

package/dist/default/ui/error-dialog/index.parts.js CHANGED Viewed

@@ -1,18 +1,20 @@
 import { __exportAll } from "../../_virtual/_rolldown/runtime.js";
-import { AlertDialogPopup } from "../alert-dialog/alert-dialog-popup.js";
+import { DialogBackdrop } from "../dialog/dialog-backdrop.js";
+import { DialogPopup } from "../dialog/dialog-popup.js";
 import { ErrorDialogClose } from "./error-dialog-close.js";
 import { ErrorDialogDescription } from "./error-dialog-description.js";
 import { ErrorDialogRoot } from "./error-dialog-root.js";
 import { ErrorDialogTitle } from "./error-dialog-title.js";
 //#region src/ui/error-dialog/index.parts.ts
 var index_parts_exports = /* @__PURE__ */ __exportAll({
+	Backdrop: () => DialogBackdrop,
 	Close: () => ErrorDialogClose,
 	Description: () => ErrorDialogDescription,
-	Popup: () => AlertDialogPopup,
+	Popup: () => DialogPopup,
 	Root: () => ErrorDialogRoot,
 	Title: () => ErrorDialogTitle
 });
 //#endregion
-export { ErrorDialogClose as Close, ErrorDialogDescription as Description, AlertDialogPopup as Popup, ErrorDialogRoot as Root, ErrorDialogTitle as Title, index_parts_exports };
+export { DialogBackdrop as Backdrop, ErrorDialogClose as Close, ErrorDialogDescription as Description, DialogPopup as Popup, ErrorDialogRoot as Root, ErrorDialogTitle as Title, index_parts_exports };
 //# sourceMappingURL=index.parts.js.map

package/dist/default/ui/error-dialog/index.parts.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.parts.js","names":[],"sources":["../../../../src/ui/error-dialog/index.parts.ts"],"sourcesContent":["export {~~\n AlertDialogPopup~~ as ~~Popup,\n~~ type ~~AlertDialogPopupProps~~ as PopupProps~~,\n~~} from '../~~alert-~~dialog/~~alert-dialog-popup~~';\nexport { ErrorDialogClose as Close, type ErrorDialogCloseProps as CloseProps } from './error-dialog-close';\nexport {\n ErrorDialogDescription as Description,\n type ErrorDialogDescriptionProps as DescriptionProps,\n} from './error-dialog-description';\nexport { ErrorDialogRoot as Root, type ErrorDialogRootProps as RootProps } from './error-dialog-root';\nexport { ErrorDialogTitle as Title, type ErrorDialogTitleProps as TitleProps } from './error-dialog-title';\n"],"mappings":""}
1	+ {"version":3,"file":"index.parts.js","names":[],"sources":["../../../../src/ui/error-dialog/index.parts.ts"],"sourcesContent":["export { Backdrop, type BackdropProps, Popup, type PopupProps } from '../dialog/index.parts';\nexport { ErrorDialogClose as Close, type ErrorDialogCloseProps as CloseProps } from './error-dialog-close';\nexport {\n ErrorDialogDescription as Description,\n type ErrorDialogDescriptionProps as DescriptionProps,\n} from './error-dialog-description';\nexport { ErrorDialogRoot as Root, type ErrorDialogRootProps as RootProps } from './error-dialog-root';\nexport { ErrorDialogTitle as Title, type ErrorDialogTitleProps as TitleProps } from './error-dialog-title';\n"],"mappings":""}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"fullscreen-button.js","names":[],"sources":["../../../../src/ui/fullscreen-button/fullscreen-button.tsx"],"sourcesContent":["import { 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 hotkeyAction: 'toggleFullscreen',\n isSupported: (state) => !state.hidden,\n});\n\nexport namespace FullscreenButton {\n export type Props = FullscreenButtonProps;\n export type State = FullscreenButtonCore.State;\n}\n"],"mappings":";;;;;~~AAWA~~,MAAa,mBAAmB,kBAA+D;CAC7F,aAAa;CACb,MAAM;CACN,cAAc;CACd,UAAU;CACV,SAAS,MAAM,UAAU,KAAK,OAAO,KAAK;CAC1C,cAAc;CACd,cAAc,UAAU,CAAC,MAAM;AACjC,CAAC"}
1	+ {"version":3,"file":"fullscreen-button.js","names":[],"sources":["../../../../src/ui/fullscreen-button/fullscreen-button.tsx"],"sourcesContent":["import { 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>, 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 hotkeyAction: 'toggleFullscreen',\n isSupported: (state) => !state.hidden,\n});\n\nexport namespace FullscreenButton {\n export type Props = FullscreenButtonProps;\n export type State = FullscreenButtonCore.State;\n}\n"],"mappings":";;;;;AAUA,MAAa,mBAAmB,kBAA+D;CAC7F,aAAa;CACb,MAAM;CACN,cAAc;CACd,UAAU;CACV,SAAS,MAAM,UAAU,KAAK,OAAO,KAAK;CAC1C,cAAc;CACd,cAAc,UAAU,CAAC,MAAM;AACjC,CAAC"}

package/dist/default/ui/gesture/use-doubletap-gesture.js CHANGED Viewed

@@ -3,6 +3,12 @@ import { useLatestRef } from "../../utils/use-latest-ref.js";
 import { createDoubleTapGesture } from "@videojs/core/dom";
 import { useEffect } from "react";
 //#region src/ui/gesture/use-doubletap-gesture.ts
+/**
+* Registers a double-tap gesture on the current player container or an explicit target.
+*
+* @param onActivate - Callback invoked when a matching double tap is recognized.
+* @param options - Gesture matching, target, and disabled options.
+*/
 function useDoubleTapGesture(onActivate, options) {
 	const { pointer, region, disabled = false, target } = options ?? {};
 	const contextContainer = useContainer();

package/dist/default/ui/gesture/use-doubletap-gesture.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"use-doubletap-gesture.js","names":[],"sources":["../../../../src/ui/gesture/use-doubletap-gesture.ts"],"sourcesContent":["import type { GestureProps } from '@videojs/core';\nimport { createDoubleTapGesture } from '@videojs/core/dom';\nimport type { RefObject } from 'react';\nimport { useEffect } from 'react';\n\nimport { useContainer } from '../../player/context';\nimport { useLatestRef } from '../../utils/use-latest-ref';\n\nexport interface UseDoubleTapGestureOptions extends Pick<GestureProps, 'pointer' \| 'region' \| 'disabled'> {\n target?: RefObject<HTMLElement \| null>;\n}\n\nexport function useDoubleTapGesture(\n onActivate: (event: PointerEvent) => void,\n options?: UseDoubleTapGestureOptions\n): void {\n const { pointer, region, disabled = false, target } = options ?? {};\n const contextContainer = useContainer();\n const container = target?.current ?? contextContainer;\n const onActivateRef = useLatestRef(onActivate);\n\n useEffect(() => {\n if (!container \|\| disabled) return;\n\n return createDoubleTapGesture(container, (event) => onActivateRef.current(event), { pointer, region });\n }, [container, disabled, pointer, region]);\n}\n"],"mappings":"~~;;;;;AAYA~~,SAAgB,oBACd,YACA,SACM;CACN,MAAM,EAAE,SAAS,QAAQ,WAAW,OAAO,WAAW,WAAW,CAAC;CAClE,MAAM,mBAAmB,aAAa;CACtC,MAAM,YAAY,QAAQ,WAAW;CACrC,MAAM,gBAAgB,aAAa,UAAU;CAE7C,gBAAgB;EACd,IAAI,CAAC,aAAa,UAAU;EAE5B,OAAO,uBAAuB,YAAY,UAAU,cAAc,QAAQ,KAAK,GAAG;GAAE;GAAS;EAAO,CAAC;CACvG,GAAG;EAAC;EAAW;EAAU;EAAS;CAAM,CAAC;AAC3C"}
1	+ {"version":3,"file":"use-doubletap-gesture.js","names":[],"sources":["../../../../src/ui/gesture/use-doubletap-gesture.ts"],"sourcesContent":["import type { GestureProps } from '@videojs/core';\nimport { createDoubleTapGesture } from '@videojs/core/dom';\nimport type { RefObject } from 'react';\nimport { useEffect } from 'react';\n\nimport { useContainer } from '../../player/context';\nimport { useLatestRef } from '../../utils/use-latest-ref';\n\nexport interface UseDoubleTapGestureOptions extends Pick<GestureProps, 'pointer' \| 'region' \| 'disabled'> {\n target?: RefObject<HTMLElement \| null>;\n}\n\n/*\n Registers a double-tap gesture on the current player container or an explicit target.\n \n @param onActivate - Callback invoked when a matching double tap is recognized.\n * @param options - Gesture matching, target, and disabled options.\n */\nexport function useDoubleTapGesture(\n onActivate: (event: PointerEvent) => void,\n options?: UseDoubleTapGestureOptions\n): void {\n const { pointer, region, disabled = false, target } = options ?? {};\n const contextContainer = useContainer();\n const container = target?.current ?? contextContainer;\n const onActivateRef = useLatestRef(onActivate);\n\n useEffect(() => {\n if (!container \|\| disabled) return;\n\n return createDoubleTapGesture(container, (event) => onActivateRef.current(event), { pointer, region });\n }, [container, disabled, pointer, region]);\n}\n"],"mappings":";;;;;;;;;;;AAkBA,SAAgB,oBACd,YACA,SACM;CACN,MAAM,EAAE,SAAS,QAAQ,WAAW,OAAO,WAAW,WAAW,CAAC;CAClE,MAAM,mBAAmB,aAAa;CACtC,MAAM,YAAY,QAAQ,WAAW;CACrC,MAAM,gBAAgB,aAAa,UAAU;CAE7C,gBAAgB;EACd,IAAI,CAAC,aAAa,UAAU;EAE5B,OAAO,uBAAuB,YAAY,UAAU,cAAc,QAAQ,KAAK,GAAG;GAAE;GAAS;EAAO,CAAC;CACvG,GAAG;EAAC;EAAW;EAAU;EAAS;CAAM,CAAC;AAC3C"}

package/dist/default/ui/gesture/use-tap-gesture.js CHANGED Viewed

@@ -3,6 +3,12 @@ import { useLatestRef } from "../../utils/use-latest-ref.js";
 import { createTapGesture } from "@videojs/core/dom";
 import { useEffect } from "react";
 //#region src/ui/gesture/use-tap-gesture.ts
+/**
+* Registers a tap gesture on the current player container or an explicit target.
+*
+* @param onActivate - Callback invoked when a matching tap is recognized.
+* @param options - Gesture matching, target, and disabled options.
+*/
 function useTapGesture(onActivate, options) {
 	const { pointer, region, disabled = false, target } = options ?? {};
 	const contextContainer = useContainer();

package/dist/default/ui/gesture/use-tap-gesture.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"use-tap-gesture.js","names":[],"sources":["../../../../src/ui/gesture/use-tap-gesture.ts"],"sourcesContent":["import type { GestureProps } from '@videojs/core';\nimport { createTapGesture } from '@videojs/core/dom';\nimport type { RefObject } from 'react';\nimport { useEffect } from 'react';\n\nimport { useContainer } from '../../player/context';\nimport { useLatestRef } from '../../utils/use-latest-ref';\n\nexport interface UseTapGestureOptions extends Pick<GestureProps, 'pointer' \| 'region' \| 'disabled'> {\n target?: RefObject<HTMLElement \| null>;\n}\n\nexport function useTapGesture(onActivate: (event: PointerEvent) => void, options?: UseTapGestureOptions): void {\n const { pointer, region, disabled = false, target } = options ?? {};\n const contextContainer = useContainer();\n const container = target?.current ?? contextContainer;\n const onActivateRef = useLatestRef(onActivate);\n\n useEffect(() => {\n if (!container \|\| disabled) return;\n\n return createTapGesture(container, (event) => onActivateRef.current(event), { pointer, region });\n }, [container, disabled, pointer, region]);\n}\n"],"mappings":"~~;;;;;AAYA~~,SAAgB,cAAc,YAA2C,SAAsC;CAC7G,MAAM,EAAE,SAAS,QAAQ,WAAW,OAAO,WAAW,WAAW,CAAC;CAClE,MAAM,mBAAmB,aAAa;CACtC,MAAM,YAAY,QAAQ,WAAW;CACrC,MAAM,gBAAgB,aAAa,UAAU;CAE7C,gBAAgB;EACd,IAAI,CAAC,aAAa,UAAU;EAE5B,OAAO,iBAAiB,YAAY,UAAU,cAAc,QAAQ,KAAK,GAAG;GAAE;GAAS;EAAO,CAAC;CACjG,GAAG;EAAC;EAAW;EAAU;EAAS;CAAM,CAAC;AAC3C"}
1	+ {"version":3,"file":"use-tap-gesture.js","names":[],"sources":["../../../../src/ui/gesture/use-tap-gesture.ts"],"sourcesContent":["import type { GestureProps } from '@videojs/core';\nimport { createTapGesture } from '@videojs/core/dom';\nimport type { RefObject } from 'react';\nimport { useEffect } from 'react';\n\nimport { useContainer } from '../../player/context';\nimport { useLatestRef } from '../../utils/use-latest-ref';\n\nexport interface UseTapGestureOptions extends Pick<GestureProps, 'pointer' \| 'region' \| 'disabled'> {\n target?: RefObject<HTMLElement \| null>;\n}\n\n/*\n Registers a tap gesture on the current player container or an explicit target.\n \n @param onActivate - Callback invoked when a matching tap is recognized.\n * @param options - Gesture matching, target, and disabled options.\n */\nexport function useTapGesture(onActivate: (event: PointerEvent) => void, options?: UseTapGestureOptions): void {\n const { pointer, region, disabled = false, target } = options ?? {};\n const contextContainer = useContainer();\n const container = target?.current ?? contextContainer;\n const onActivateRef = useLatestRef(onActivate);\n\n useEffect(() => {\n if (!container \|\| disabled) return;\n\n return createTapGesture(container, (event) => onActivateRef.current(event), { pointer, region });\n }, [container, disabled, pointer, region]);\n}\n"],"mappings":";;;;;;;;;;;AAkBA,SAAgB,cAAc,YAA2C,SAAsC;CAC7G,MAAM,EAAE,SAAS,QAAQ,WAAW,OAAO,WAAW,WAAW,CAAC;CAClE,MAAM,mBAAmB,aAAa;CACtC,MAAM,YAAY,QAAQ,WAAW;CACrC,MAAM,gBAAgB,aAAa,UAAU;CAE7C,gBAAgB;EACd,IAAI,CAAC,aAAa,UAAU;EAE5B,OAAO,iBAAiB,YAAY,UAAU,cAAc,QAAQ,KAAK,GAAG;GAAE;GAAS;EAAO,CAAC;CACjG,GAAG;EAAC;EAAW;EAAU;EAAS;CAAM,CAAC;AAC3C"}

package/dist/default/ui/hooks/create-radio-options-hook.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"create-radio-options-hook.js","names":[],"sources":["../../../../src/ui/hooks/create-radio-options-hook.ts"],"sourcesContent":["import type { RadioOption, RadioOptionsState } from '@videojs/core';\nimport { logMissingFeature } from '@videojs/core/dom';\nimport { type Text, type TextParams, translateText } from '@videojs/core/i18n';\nimport type { UnknownState } from '@videojs/store';\nimport { useCallback, useState } from 'react';\n\nimport { useTranslator } from '../../i18n/context';\nimport { usePlayer } from '../../player/context';\n\ninterface RadioOptionsCore<Props, Media, State extends RadioOptionsState> {\n setProps(props: Props): void;\n setMedia(media: Media): void;\n getState(): State;\n getLabel(state: State): Text \| string;\n getLabelParams?(state: State): TextParams \| undefined;\n selectValue(media: Media, value: string): void;\n}\n\ninterface RadioOptionsHookConfig<Props, Media, State extends RadioOptionsState> {\n name: string;\n feature: string;\n selector: ((state: UnknownState) => Media \| null) & { displayName?: string \| undefined };\n createCore: () => RadioOptionsCore<Props, Media, State>;\n}\n\ntype StateOption<State extends RadioOptionsState> = State extends RadioOptionsState<infer Option> ? Option : never;\n\nexport type TranslatedRadioOption<Option extends RadioOption> = Omit<Option, 'label' \| 'labelParams' \| 'disabled'> & {\n label: string;\n disabled: boolean;\n};\n\nexport interface RadioOptionsHookResult<Option extends RadioOption, State extends RadioOptionsState> {\n state: State;\n label: string;\n value: string;\n selectedLabel: string;\n options: TranslatedRadioOption<Option>[];\n disabled: boolean;\n hidden: boolean;\n setValue: (value: string) => void;\n}\n\n/** Creates framework adapter mechanics shared by media-backed radio option hooks. */\nexport function createRadioOptionsHook<Props, Media, State extends RadioOptionsState>({\n name,\n feature,\n selector,\n createCore,\n}: RadioOptionsHookConfig<Props, Media, State>): (\n props?: Props\n) => RadioOptionsHookResult<StateOption<State>, State> \| null {\n return function useRadioOptions(props?: Props): RadioOptionsHookResult<StateOption<State>, State> \| null {\n 'use no memo';\n\n const media = usePlayer(selector);\n const t = useTranslator();\n const [core] = useState(createCore);\n\n core.setProps(props ?? ({} as Props));\n\n const setValue = useCallback((value: string) => core.selectValue(media!, value), [core, media]);\n\n if (!media) {\n if (__DEV__) logMissingFeature(name, selector.displayName ?? feature);\n return null;\n }\n\n core.setMedia(media);\n const state = core.getState();\n const options = state.options.map((option) => {\n const { label, labelParams, disabled, ...rest } = option;\n\n return {\n ...rest,\n label: translateText(label, t, labelParams),\n disabled: state.disabled \|\| disabled,\n } as TranslatedRadioOption<StateOption<State>>;\n });\n\n return {\n state,\n label: translateText(core.getLabel(state), t, core.getLabelParams?.(state)),\n value: state.value,\n selectedLabel: options.find((option) => option.value === state.value)?.label ?? '',\n options,\n disabled: state.disabled,\n hidden: state.hidden,\n setValue,\n };\n };\n}\n"],"mappings":";;;;;;;AA4CA,SAAgB,uBAAsE,EACpF,MACA,SACA,UACA,cAG4D;CAC5D,OAAO,SAAS,gBAAgB,OAAyE;EACvG;EAEA,MAAM,QAAQ,UAAU,QAAQ;EAChC,MAAM,IAAI,cAAc;EACxB,MAAM,CAAC,QAAQ,SAAS,UAAU;EAElC,KAAK,SAAS,SAAU,CAAC,CAAW;EAEpC,MAAM,WAAW,aAAa,UAAkB,KAAK,YAAY,OAAQ,KAAK,GAAG,CAAC,MAAM,KAAK,CAAC;EAE9F,IAAI,CAAC,~~OAEH~~,OAAO;EAGT,KAAK,SAAS,KAAK;EACnB,MAAM,QAAQ,KAAK,SAAS;EAC5B,MAAM,UAAU,MAAM,QAAQ,KAAK,WAAW;GAC5C,MAAM,EAAE,OAAO,aAAa,UAAU,GAAG,SAAS;GAElD,OAAO;IACL,GAAG;IACH,OAAO,cAAc,OAAO,GAAG,WAAW;IAC1C,UAAU,MAAM,YAAY;GAC9B;EACF,CAAC;EAED,OAAO;GACL;GACA,OAAO,cAAc,KAAK,SAAS,KAAK,GAAG,GAAG,KAAK,iBAAiB,KAAK,CAAC;GAC1E,OAAO,MAAM;GACb,eAAe,QAAQ,MAAM,WAAW,OAAO,UAAU,MAAM,KAAK,CAAC,EAAE,SAAS;GAChF;GACA,UAAU,MAAM;GAChB,QAAQ,MAAM;GACd;EACF;CACF;AACF"}
1	+ {"version":3,"file":"create-radio-options-hook.js","names":[],"sources":["../../../../src/ui/hooks/create-radio-options-hook.ts"],"sourcesContent":["import type { RadioOption, RadioOptionsState } from '@videojs/core';\nimport { logMissingFeature } from '@videojs/core/dom';\nimport { type Text, type TextParams, translateText } from '@videojs/core/i18n';\nimport type { UnknownState } from '@videojs/store';\nimport { useCallback, useState } from 'react';\n\nimport { useTranslator } from '../../i18n/context';\nimport { usePlayer } from '../../player/context';\n\ninterface RadioOptionsCore<Props, Media, State extends RadioOptionsState> {\n setProps(props: Props): void;\n setMedia(media: Media): void;\n getState(): State;\n getLabel(state: State): Text \| string;\n getLabelParams?(state: State): TextParams \| undefined;\n selectValue(media: Media, value: string): void;\n}\n\ninterface RadioOptionsHookConfig<Props, Media, State extends RadioOptionsState> {\n name: string;\n feature: string;\n selector: ((state: UnknownState) => Media \| null) & { displayName?: string \| undefined };\n createCore: () => RadioOptionsCore<Props, Media, State>;\n}\n\ntype StateOption<State extends RadioOptionsState> = State extends RadioOptionsState<infer Option> ? Option : never;\n\nexport type TranslatedRadioOption<Option extends RadioOption> = Omit<Option, 'label' \| 'labelParams' \| 'disabled'> & {\n label: string;\n disabled: boolean;\n};\n\nexport interface RadioOptionsHookResult<Option extends RadioOption, State extends RadioOptionsState> {\n state: State;\n label: string;\n value: string;\n selectedLabel: string;\n options: TranslatedRadioOption<Option>[];\n disabled: boolean;\n hidden: boolean;\n setValue: (value: string) => void;\n}\n\n/** Creates framework adapter mechanics shared by media-backed radio option hooks. */\nexport function createRadioOptionsHook<Props, Media, State extends RadioOptionsState>({\n name,\n feature,\n selector,\n createCore,\n}: RadioOptionsHookConfig<Props, Media, State>): (\n props?: Props\n) => RadioOptionsHookResult<StateOption<State>, State> \| null {\n return function useRadioOptions(props?: Props): RadioOptionsHookResult<StateOption<State>, State> \| null {\n 'use no memo';\n\n const media = usePlayer(selector);\n const t = useTranslator();\n const [core] = useState(createCore);\n\n core.setProps(props ?? ({} as Props));\n\n const setValue = useCallback((value: string) => core.selectValue(media!, value), [core, media]);\n\n if (!media) {\n if (__DEV__) logMissingFeature(name, selector.displayName ?? feature);\n\n return null;\n }\n\n core.setMedia(media);\n const state = core.getState();\n const options = state.options.map((option) => {\n const { label, labelParams, disabled, ...rest } = option;\n\n return {\n ...rest,\n label: translateText(label, t, labelParams),\n disabled: state.disabled \|\| disabled,\n } as TranslatedRadioOption<StateOption<State>>;\n });\n\n return {\n state,\n label: translateText(core.getLabel(state), t, core.getLabelParams?.(state)),\n value: state.value,\n selectedLabel: options.find((option) => option.value === state.value)?.label ?? '',\n options,\n disabled: state.disabled,\n hidden: state.hidden,\n setValue,\n };\n };\n}\n"],"mappings":";;;;;;;AA4CA,SAAgB,uBAAsE,EACpF,MACA,SACA,UACA,cAG4D;CAC5D,OAAO,SAAS,gBAAgB,OAAyE;EACvG;EAEA,MAAM,QAAQ,UAAU,QAAQ;EAChC,MAAM,IAAI,cAAc;EACxB,MAAM,CAAC,QAAQ,SAAS,UAAU;EAElC,KAAK,SAAS,SAAU,CAAC,CAAW;EAEpC,MAAM,WAAW,aAAa,UAAkB,KAAK,YAAY,OAAQ,KAAK,GAAG,CAAC,MAAM,KAAK,CAAC;EAE9F,IAAI,CAAC,OAGH,OAAO;EAGT,KAAK,SAAS,KAAK;EACnB,MAAM,QAAQ,KAAK,SAAS;EAC5B,MAAM,UAAU,MAAM,QAAQ,KAAK,WAAW;GAC5C,MAAM,EAAE,OAAO,aAAa,UAAU,GAAG,SAAS;GAElD,OAAO;IACL,GAAG;IACH,OAAO,cAAc,OAAO,GAAG,WAAW;IAC1C,UAAU,MAAM,YAAY;GAC9B;EACF,CAAC;EAED,OAAO;GACL;GACA,OAAO,cAAc,KAAK,SAAS,KAAK,GAAG,GAAG,KAAK,iBAAiB,KAAK,CAAC;GAC1E,OAAO,MAAM;GACb,eAAe,QAAQ,MAAM,WAAW,OAAO,UAAU,MAAM,KAAK,CAAC,EAAE,SAAS;GAChF;GACA,UAAU,MAAM;GAChB,QAAQ,MAAM;GACd;EACF;CACF;AACF"}

package/dist/default/ui/hooks/use-button.js CHANGED Viewed

@@ -6,19 +6,19 @@ import { useCallback } from "react";
 * Hook for button behavior with keyboard and pointer interaction.
 *
 * @example
-* ```tsx
-* const { getButtonProps, buttonRef } = useButton({
-*   displayName: 'PlayButton',
-*   onActivate: () => togglePlayback(),
-*   isDisabled: () => disabled,
-* });
+*   ```tsx
+*   const { getButtonProps, buttonRef } = useButton({
+*     displayName: 'PlayButton',
+*     onActivate: () => togglePlayback(),
+*     isDisabled: () => disabled,
+*   });
 *
-* return useRender('button', componentProps, {
-*   state,
-*   ref: [forwardedRef, buttonRef],
-*   props: [elementProps, getButtonProps],
-* });
-* ```
+*   return useRender('button', componentProps, {
+*     state,
+*     ref: [forwardedRef, buttonRef],
+*     props: [elementProps, getButtonProps],
+*   });
+*   ```;
 *
 * @param params - Button configuration with activation handler and disabled check.
 */
@@ -27,10 +27,11 @@ function useButton(params) {
 	const buttonRef = useCallback((element) => {}, [displayName]);
 	return {
 		getButtonProps: useCallback((externalProps) => {
-			return mergeProps(createButton({
+			const buttonProps = createButton({
 				onActivate,
 				isDisabled
-			}), externalProps);
+			});
+			return mergeProps(buttonProps, externalProps);
 		}, [onActivate, isDisabled]),
 		buttonRef
 	};

package/dist/default/ui/hooks/use-button.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"use-button.js","names":[],"sources":["../../../../src/ui/hooks/use-button.ts"],"sourcesContent":["import { createButton, type UIEvent } from '@videojs/core/dom';\nimport type { ComponentPropsWithRef, Ref } from 'react';\nimport { useCallback } from 'react';\nimport { mergeProps } from '../../utils/merge-props';\n\nexport interface UseButtonParameters {\n displayName: string;\n onActivate: (event: UIEvent) => void;\n isDisabled: () => boolean;\n}\n\nexport interface UseButtonReturnValue {\n getButtonProps: (externalProps?: ComponentPropsWithRef<'button'>) => ComponentPropsWithRef<'button'>;\n buttonRef: Ref<HTMLElement>;\n}\n\n/*\n Hook for button behavior with keyboard and pointer interaction.\n \n @example\n * ```tsx\n * const { getButtonProps, buttonRef } = useButton({\n * displayName: 'PlayButton',\n * onActivate: () => togglePlayback(),\n * isDisabled: () => disabled,\n * });\n \n return useRender('button', componentProps, {\n * state,\n * ref: [forwardedRef, buttonRef],\n * props: [elementProps, getButtonProps],\n * });\n * ~~```\~~n \n @param params - Button configuration with activation handler and disabled check.\n */\nexport function useButton(params: UseButtonParameters): UseButtonReturnValue {\n const { displayName, onActivate, isDisabled } = params;\n\n const buttonRef = useCallback(\n (element: HTMLElement \| null) => {\n if (__DEV__ && element && element.tagName !== 'BUTTON') {\n console.warn(`${displayName} should render a <button> element for accessibility`);\n }\n },\n [displayName]\n );\n\n const getButtonProps = useCallback(\n (externalProps?: ComponentPropsWithRef<'button'>): ComponentPropsWithRef<'button'> => {\n const buttonProps = createButton({ onActivate, isDisabled });\n return mergeProps(buttonProps, externalProps);\n },\n [onActivate, isDisabled]\n );\n\n return { getButtonProps, buttonRef };\n}\n\nexport namespace useButton {\n export type Parameters = UseButtonParameters;\n export type ReturnValue = UseButtonReturnValue;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;~~AAoCA~~,SAAgB,UAAU,QAAmD;CAC3E,MAAM,EAAE,aAAa,YAAY,eAAe;CAEhD,MAAM,YAAY,aACf,YAAgC,CAIjC,GACA,CAAC,WAAW,CACd;~~CAUA~~,OAAO;EAAE,~~gBARc~~,aACpB,kBAAqF;~~GAEpF~~,~~OAAO~~,~~WADa~~,aAAa;IAAE;IAAY;GAAW,~~CAC9B~~,~~GAAG~~,aAAa;EAC9C,GACA,CAAC,YAAY,UAAU,CAGH;EAAG;CAAU;AACrC"}
1	+ {"version":3,"file":"use-button.js","names":[],"sources":["../../../../src/ui/hooks/use-button.ts"],"sourcesContent":["import { createButton, type UIEvent } from '@videojs/core/dom';\nimport type { ComponentPropsWithRef, Ref } from 'react';\nimport { useCallback } from 'react';\n\nimport { mergeProps } from '../../utils/merge-props';\n\nexport interface UseButtonParameters {\n displayName: string;\n onActivate: (event: UIEvent) => void;\n isDisabled: () => boolean;\n}\n\nexport interface UseButtonReturnValue {\n getButtonProps: (externalProps?: ComponentPropsWithRef<'button'>) => ComponentPropsWithRef<'button'>;\n buttonRef: Ref<HTMLElement>;\n}\n\n/*\n Hook for button behavior with keyboard and pointer interaction.\n \n @example\n * ```tsx\n * const { getButtonProps, buttonRef } = useButton({\n * displayName: 'PlayButton',\n * onActivate: () => togglePlayback(),\n * isDisabled: () => disabled,\n * });\n \n return useRender('button', componentProps, {\n * state,\n * ref: [forwardedRef, buttonRef],\n * props: [elementProps, getButtonProps],\n * });\n * ```;\n \n @param params - Button configuration with activation handler and disabled check.\n */\nexport function useButton(params: UseButtonParameters): UseButtonReturnValue {\n const { displayName, onActivate, isDisabled } = params;\n\n const buttonRef = useCallback(\n (element: HTMLElement \| null) => {\n if (__DEV__ && element && element.tagName !== 'BUTTON') {\n console.warn(`${displayName} should render a <button> element for accessibility`);\n }\n },\n [displayName]\n );\n\n const getButtonProps = useCallback(\n (externalProps?: ComponentPropsWithRef<'button'>): ComponentPropsWithRef<'button'> => {\n const buttonProps = createButton({ onActivate, isDisabled });\n\n return mergeProps(buttonProps, externalProps);\n },\n [onActivate, isDisabled]\n );\n\n return { getButtonProps, buttonRef };\n}\n\nexport namespace useButton {\n export type Parameters = UseButtonParameters;\n export type ReturnValue = UseButtonReturnValue;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAqCA,SAAgB,UAAU,QAAmD;CAC3E,MAAM,EAAE,aAAa,YAAY,eAAe;CAEhD,MAAM,YAAY,aACf,YAAgC,CAIjC,GACA,CAAC,WAAW,CACd;CAWA,OAAO;EAAE,gBATc,aACpB,kBAAqF;GACpF,MAAM,cAAc,aAAa;IAAE;IAAY;GAAW,CAAC;GAE3D,OAAO,WAAW,aAAa,aAAa;EAC9C,GACA,CAAC,YAAY,UAAU,CAGH;EAAG;CAAU;AACrC"}

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

@@ -10,9 +10,8 @@ import { applyStyles } from "@videojs/utils/dom";
 /**
 * 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.
+* 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);
@@ -27,7 +26,7 @@ function useSlider(options) {
 	const thumbElementRef = useRef(null);
 	const forceRender = useForceRender();
 	const [slider] = useState(() => {
-		return createSlider({
+		const stableOptions = {
 			getElement: () => rootElementRef.current,
 			getThumbElement: () => thumbElementRef.current,
 			getOrientation: () => optionsRef.current.orientation ?? "horizontal",
@@ -47,7 +46,8 @@ function useSlider(options) {
 				releaseControlsLock();
 				optionsRef.current.onDragEnd?.();
 			}
-		});
+		};
+		return createSlider(stableOptions);
 	});
 	useDestroy(slider);
 	const interaction = useSnapshot(slider.input, ({ dragging, pointing, focused }) => ({

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

	@@ -1 +1 @@
1	- {"version":3,"file":"use-slider.js","names":[],"sources":["../../../../src/ui/hooks/use-slider.ts"],"sourcesContent":["import type { SliderInput, SliderState } from '@videojs/core';\nimport {\n createSlider,\n type SliderApi,\n type SliderOptions,\n type SliderRootProps,\n type SliderRootStyle,\n type SliderThumbProps,\n selectControls,\n} from '@videojs/core/dom';\nimport { useSnapshot } from '@videojs/store/react';\nimport { applyStyles } from '@videojs/utils/dom';\nimport { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';\nimport { useOptionalPlayer } from '../../player/context';\nimport { useDestroy } from '../../utils/use-destroy';\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 \| 'changeThrottle'\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 input: SliderApi['input'];\n cssVars: Record<string, string>;\n rootRef: React.RefCallback<HTMLElement>;\n thumbRef: React.RefCallback<HTMLElement>;\n rootProps: SliderRootProps;\n rootStyle: SliderRootStyle;\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 const controls = useOptionalPlayer(selectControls);\n const requestControlsLock = controls?.requestControlsLock;\n const releaseControlsLockRef = useRef<(() => void) \| null>(null);\n\n const releaseControlsLock = useCallback(() => {\n releaseControlsLockRef.current?.();\n releaseControlsLockRef.current = null;\n }, []);\n\n useEffect(() => releaseControlsLock, [releaseControlsLock]);\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 isDisabled: () => optionsRef.current.disabled ?? false,\n getPercent: () => optionsRef.current.getPercent(),\n getStepPercent: () => optionsRef.current.getStepPercent(),\n getLargeStepPercent: () => optionsRef.current.getLargeStepPercent(),\n changeThrottle: optionsRef.current.changeThrottle,\n adjustPercent: optionsRef.current.adjustPercent,\n onValueChange: (percent) => optionsRef.current.onValueChange?.(percent),\n onValueCommit: (percent) => optionsRef.current.onValueCommit?.(percent),\n onDragStart: () => {\n releaseControlsLockRef.current ??= requestControlsLock?.() ?? null;\n optionsRef.current.onDragStart?.();\n },\n onDragEnd: () => {\n releaseControlsLock();\n optionsRef.current.onDragEnd?.();\n },\n };\n\n return createSlider(stableOptions);\n });\n\n useDestroy(slider);\n\n // Percentage changes are rendered directly below. React only needs to\n // re-render when interaction state changes.\n const interaction = useSnapshot(slider.input, ({ dragging, pointing, focused }) => ({\n dragging,\n pointing,\n focused,\n }));\n const input = { ...slider.input.current, ...interaction };\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 using live DOM measurements.\n const cssVars = options.getCSSVars(slider.adjustForAlignment(state));\n\n const syncStyles = useCallback(\n (element = rootElementRef.current) => {\n if (!element) return;\n const next = optionsRef.current.computeState(slider.input.current);\n applyStyles(element, optionsRef.current.getCSSVars(slider.adjustForAlignment(next)));\n },\n [slider]\n );\n\n useLayoutEffect(() => {\n syncStyles();\n return slider.input.subscribe(syncStyles);\n }, [slider, syncStyles]);\n\n // Ref callbacks for root and thumb elements.\n const rootRef = useCallback(\n (element: HTMLElement \| null) => {\n rootElementRef.current = element;\n syncStyles(element);\n },\n [syncStyles]\n );\n\n const thumbRef = useCallback((element: HTMLElement \| null) => {\n thumbElementRef.current = element;\n }, []);\n\n return {\n state,\n input: slider.input,\n cssVars,\n rootRef,\n thumbRef,\n rootProps: slider.rootProps,\n rootStyle: slider.rootStyle,\n thumbProps: slider.thumbProps,\n };\n}\n\nexport namespace useSlider {\n export type Options = UseSliderOptions;\n export type ReturnValue = UseSliderReturnValue;\n}\n"],"mappings":"~~;;;;;;;;;;;;;;;;AAyDA~~,SAAgB,UACd,SAC6B;CAC7B,MAAM,aAAa,aAAa,OAAO;~~CAEvC~~,MAAM,sBADW,kBAAkB,cACA,CAAC,EAAE;CACtC,MAAM,yBAAyB,OAA4B,IAAI;CAE/D,MAAM,sBAAsB,kBAAkB;EAC5C,uBAAuB,UAAU;EACjC,uBAAuB,UAAU;CACnC,GAAG,CAAC,CAAC;CAEL,gBAAgB,qBAAqB,CAAC,mBAAmB,CAAC;CAE1D,MAAM,iBAAiB,OAA2B,IAAI;CACtD,MAAM,kBAAkB,OAA2B,IAAI;CACvD,MAAM,cAAc,eAAe;CAGnC,MAAM,CAAC,UAAU,eAA0B;~~EAuBzC~~,~~OAAO~~,~~aAAa~~;~~GArBlB~~,kBAAkB,eAAe;GACjC,uBAAuB,gBAAgB;GACvC,sBAAsB,WAAW,QAAQ,eAAe;GACxD,kBAAkB,WAAW,QAAQ,YAAY;GACjD,kBAAkB,WAAW,QAAQ,WAAW;GAChD,sBAAsB,WAAW,QAAQ,eAAe;GACxD,2BAA2B,WAAW,QAAQ,oBAAoB;GAClE,gBAAgB,WAAW,QAAQ;GACnC,eAAe,WAAW,QAAQ;GAClC,gBAAgB,YAAY,WAAW,QAAQ,gBAAgB,OAAO;GACtE,gBAAgB,YAAY,WAAW,QAAQ,gBAAgB,OAAO;GACtE,mBAAmB;IACjB,uBAAuB,YAAY,sBAAsB,KAAK;IAC9D,WAAW,QAAQ,cAAc;GACnC;GACA,iBAAiB;IACf,oBAAoB;IACpB,WAAW,QAAQ,YAAY;GACjC;~~EAG8B~~,~~CAAC~~;CACnC,CAAC;CAED,WAAW,MAAM;CAIjB,MAAM,cAAc,YAAY,OAAO,QAAQ,EAAE,UAAU,UAAU,eAAe;EAClF;EACA;EACA;CACF,EAAE;CACF,MAAM,QAAQ;EAAE,GAAG,OAAO,MAAM;EAAS,GAAG;CAAY;CAGxD,MAAM,QAAQ,QAAQ,aAAa,KAAK;CAIxC,sBAAsB;EACpB,IAAI,MAAM,mBAAmB,UAAU,eAAe,WAAW,gBAAgB,SAC/E,YAAY;CAEhB,GAAG,CAAC,MAAM,cAAc,CAAC;CAGzB,MAAM,UAAU,QAAQ,WAAW,OAAO,mBAAmB,KAAK,CAAC;CAEnE,MAAM,aAAa,aAChB,UAAU,eAAe,YAAY;EACpC,IAAI,CAAC,SAAS;~~EACd~~,MAAM,OAAO,WAAW,QAAQ,aAAa,OAAO,MAAM,OAAO;~~EACjE~~,YAAY,SAAS,WAAW,QAAQ,WAAW,OAAO,mBAAmB,IAAI,CAAC,CAAC;CACrF,GACA,CAAC,MAAM,CACT;CAEA,sBAAsB;EACpB,WAAW;EACX,OAAO,OAAO,MAAM,UAAU,UAAU;CAC1C,GAAG,CAAC,QAAQ,UAAU,CAAC;CAGvB,MAAM,UAAU,aACb,YAAgC;EAC/B,eAAe,UAAU;EACzB,WAAW,OAAO;CACpB,GACA,CAAC,UAAU,CACb;CAEA,MAAM,WAAW,aAAa,YAAgC;EAC5D,gBAAgB,UAAU;CAC5B,GAAG,CAAC,CAAC;CAEL,OAAO;EACL;EACA,OAAO,OAAO;EACd;EACA;EACA;EACA,WAAW,OAAO;EAClB,WAAW,OAAO;EAClB,YAAY,OAAO;CACrB;AACF"}
1	+ {"version":3,"file":"use-slider.js","names":[],"sources":["../../../../src/ui/hooks/use-slider.ts"],"sourcesContent":["import type { SliderInput, SliderState } from '@videojs/core';\nimport {\n createSlider,\n type SliderApi,\n type SliderOptions,\n type SliderRootProps,\n type SliderRootStyle,\n type SliderThumbProps,\n selectControls,\n} from '@videojs/core/dom';\nimport { useSnapshot } from '@videojs/store/react';\nimport { applyStyles } from '@videojs/utils/dom';\nimport { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';\n\nimport { useOptionalPlayer } from '../../player/context';\nimport { useDestroy } from '../../utils/use-destroy';\nimport { useForceRender } from '../../utils/use-force-render';\nimport { useLatestRef } from '../../utils/use-latest-ref';\n\nexport interface UseSliderOptions<State extends SliderState = SliderState> extends Pick<\n SliderOptions,\n \| 'getPercent'\n \| 'getStepPercent'\n \| 'getLargeStepPercent'\n \| 'changeThrottle'\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 input: SliderApi['input'];\n cssVars: Record<string, string>;\n rootRef: React.RefCallback<HTMLElement>;\n thumbRef: React.RefCallback<HTMLElement>;\n rootProps: SliderRootProps;\n rootStyle: SliderRootStyle;\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 input state via `useSnapshot`. Returns split\n * props for the root (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 controls = useOptionalPlayer(selectControls);\n const requestControlsLock = controls?.requestControlsLock;\n const releaseControlsLockRef = useRef<(() => void) \| null>(null);\n\n const releaseControlsLock = useCallback(() => {\n releaseControlsLockRef.current?.();\n releaseControlsLockRef.current = null;\n }, []);\n\n useEffect(() => releaseControlsLock, [releaseControlsLock]);\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 isDisabled: () => optionsRef.current.disabled ?? false,\n getPercent: () => optionsRef.current.getPercent(),\n getStepPercent: () => optionsRef.current.getStepPercent(),\n getLargeStepPercent: () => optionsRef.current.getLargeStepPercent(),\n changeThrottle: optionsRef.current.changeThrottle,\n adjustPercent: optionsRef.current.adjustPercent,\n onValueChange: (percent) => optionsRef.current.onValueChange?.(percent),\n onValueCommit: (percent) => optionsRef.current.onValueCommit?.(percent),\n onDragStart: () => {\n releaseControlsLockRef.current ??= requestControlsLock?.() ?? null;\n optionsRef.current.onDragStart?.();\n },\n onDragEnd: () => {\n releaseControlsLock();\n optionsRef.current.onDragEnd?.();\n },\n };\n\n return createSlider(stableOptions);\n });\n\n useDestroy(slider);\n\n // Percentage changes are rendered directly below. React only needs to\n // re-render when interaction state changes.\n const interaction = useSnapshot(slider.input, ({ dragging, pointing, focused }) => ({\n dragging,\n pointing,\n focused,\n }));\n const input = { ...slider.input.current, ...interaction };\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 using live DOM measurements.\n const cssVars = options.getCSSVars(slider.adjustForAlignment(state));\n\n const syncStyles = useCallback(\n (element = rootElementRef.current) => {\n if (!element) return;\n\n const next = optionsRef.current.computeState(slider.input.current);\n\n applyStyles(element, optionsRef.current.getCSSVars(slider.adjustForAlignment(next)));\n },\n [slider]\n );\n\n useLayoutEffect(() => {\n syncStyles();\n return slider.input.subscribe(syncStyles);\n }, [slider, syncStyles]);\n\n // Ref callbacks for root and thumb elements.\n const rootRef = useCallback(\n (element: HTMLElement \| null) => {\n rootElementRef.current = element;\n syncStyles(element);\n },\n [syncStyles]\n );\n\n const thumbRef = useCallback((element: HTMLElement \| null) => {\n thumbElementRef.current = element;\n }, []);\n\n return {\n state,\n input: slider.input,\n cssVars,\n rootRef,\n thumbRef,\n rootProps: slider.rootProps,\n rootStyle: slider.rootStyle,\n thumbProps: slider.thumbProps,\n };\n}\n\nexport namespace useSlider {\n export type Options = UseSliderOptions;\n export type ReturnValue = UseSliderReturnValue;\n}\n"],"mappings":";;;;;;;;;;;;;;;AAwDA,SAAgB,UACd,SAC6B;CAC7B,MAAM,aAAa,aAAa,OAAO;CAGvC,MAAM,sBADW,kBAAkB,cACA,CAAC,EAAE;CACtC,MAAM,yBAAyB,OAA4B,IAAI;CAE/D,MAAM,sBAAsB,kBAAkB;EAC5C,uBAAuB,UAAU;EACjC,uBAAuB,UAAU;CACnC,GAAG,CAAC,CAAC;CAEL,gBAAgB,qBAAqB,CAAC,mBAAmB,CAAC;CAE1D,MAAM,iBAAiB,OAA2B,IAAI;CACtD,MAAM,kBAAkB,OAA2B,IAAI;CACvD,MAAM,cAAc,eAAe;CAGnC,MAAM,CAAC,UAAU,eAA0B;EACzC,MAAM,gBAA+B;GACnC,kBAAkB,eAAe;GACjC,uBAAuB,gBAAgB;GACvC,sBAAsB,WAAW,QAAQ,eAAe;GACxD,kBAAkB,WAAW,QAAQ,YAAY;GACjD,kBAAkB,WAAW,QAAQ,WAAW;GAChD,sBAAsB,WAAW,QAAQ,eAAe;GACxD,2BAA2B,WAAW,QAAQ,oBAAoB;GAClE,gBAAgB,WAAW,QAAQ;GACnC,eAAe,WAAW,QAAQ;GAClC,gBAAgB,YAAY,WAAW,QAAQ,gBAAgB,OAAO;GACtE,gBAAgB,YAAY,WAAW,QAAQ,gBAAgB,OAAO;GACtE,mBAAmB;IACjB,uBAAuB,YAAY,sBAAsB,KAAK;IAC9D,WAAW,QAAQ,cAAc;GACnC;GACA,iBAAiB;IACf,oBAAoB;IACpB,WAAW,QAAQ,YAAY;GACjC;EACF;EAEA,OAAO,aAAa,aAAa;CACnC,CAAC;CAED,WAAW,MAAM;CAIjB,MAAM,cAAc,YAAY,OAAO,QAAQ,EAAE,UAAU,UAAU,eAAe;EAClF;EACA;EACA;CACF,EAAE;CACF,MAAM,QAAQ;EAAE,GAAG,OAAO,MAAM;EAAS,GAAG;CAAY;CAGxD,MAAM,QAAQ,QAAQ,aAAa,KAAK;CAIxC,sBAAsB;EACpB,IAAI,MAAM,mBAAmB,UAAU,eAAe,WAAW,gBAAgB,SAC/E,YAAY;CAEhB,GAAG,CAAC,MAAM,cAAc,CAAC;CAGzB,MAAM,UAAU,QAAQ,WAAW,OAAO,mBAAmB,KAAK,CAAC;CAEnE,MAAM,aAAa,aAChB,UAAU,eAAe,YAAY;EACpC,IAAI,CAAC,SAAS;EAEd,MAAM,OAAO,WAAW,QAAQ,aAAa,OAAO,MAAM,OAAO;EAEjE,YAAY,SAAS,WAAW,QAAQ,WAAW,OAAO,mBAAmB,IAAI,CAAC,CAAC;CACrF,GACA,CAAC,MAAM,CACT;CAEA,sBAAsB;EACpB,WAAW;EACX,OAAO,OAAO,MAAM,UAAU,UAAU;CAC1C,GAAG,CAAC,QAAQ,UAAU,CAAC;CAGvB,MAAM,UAAU,aACb,YAAgC;EAC/B,eAAe,UAAU;EACzB,WAAW,OAAO;CACpB,GACA,CAAC,UAAU,CACb;CAEA,MAAM,WAAW,aAAa,YAAgC;EAC5D,gBAAgB,UAAU;CAC5B,GAAG,CAAC,CAAC;CAEL,OAAO;EACL;EACA,OAAO,OAAO;EACd;EACA;EACA;EACA,WAAW,OAAO;EAClB,WAAW,OAAO;EAClB,YAAY,OAAO;CACrB;AACF"}

package/dist/default/ui/hotkey/use-hotkey-shortcut.js CHANGED Viewed

@@ -2,6 +2,12 @@ import { useContainer } from "../../player/context.js";
 import { getHotkeyCoordinator } from "@videojs/core/dom";
 import { useEffect, useState } from "react";
 //#region src/ui/hotkey/use-hotkey-shortcut.ts
+/**
+* Returns display and ARIA metadata for a registered hotkey action in the current player.
+*
+* @param action - Hotkey action to look up. Returns empty details when absent.
+* @param value - Optional action value used to match value-dependent shortcuts.
+*/
 function useHotkeyShortcut(action, value) {
 	const container = useContainer();
 	const [shortcut, setShortcut] = useState({});

package/dist/default/ui/hotkey/use-hotkey-shortcut.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"use-hotkey-shortcut.js","names":[],"sources":["../../../../src/ui/hotkey/use-hotkey-shortcut.ts"],"sourcesContent":["import { getHotkeyCoordinator, type HotkeyShortcutDetails } from '@videojs/core/dom';\nimport { useEffect, useState } from 'react';\n\nimport { useContainer } from '../../player/context';\n\nexport function useHotkeyShortcut(action: string \| undefined, value?: number \| undefined): HotkeyShortcutDetails {\n const container = useContainer();\n\n const [shortcut, setShortcut] = useState<HotkeyShortcutDetails>({});\n\n useEffect(() => {\n if (!container \|\| !action) {\n setShortcut({});\n return;\n }\n\n const coordinator = getHotkeyCoordinator(container);\n const update = () => setShortcut(coordinator.getShortcut(action, value));\n\n update();\n return coordinator.subscribeShortcutChanges(update);\n }, [container, action, value]);\n\n return shortcut;\n}\n"],"mappings":"~~;;;;AAKA~~,SAAgB,kBAAkB,QAA4B,OAAmD;CAC/G,MAAM,YAAY,aAAa;CAE/B,MAAM,CAAC,UAAU,eAAe,SAAgC,CAAC,CAAC;CAElE,gBAAgB;EACd,IAAI,CAAC,aAAa,CAAC,QAAQ;GACzB,YAAY,CAAC,CAAC;GACd;EACF;EAEA,MAAM,cAAc,qBAAqB,SAAS;EAClD,MAAM,eAAe,YAAY,YAAY,YAAY,QAAQ,KAAK,CAAC;EAEvE,OAAO;EACP,OAAO,YAAY,yBAAyB,MAAM;CACpD,GAAG;EAAC;EAAW;EAAQ;CAAK,CAAC;CAE7B,OAAO;AACT"}
1	+ {"version":3,"file":"use-hotkey-shortcut.js","names":[],"sources":["../../../../src/ui/hotkey/use-hotkey-shortcut.ts"],"sourcesContent":["import { getHotkeyCoordinator, type HotkeyShortcutDetails } from '@videojs/core/dom';\nimport { useEffect, useState } from 'react';\n\nimport { useContainer } from '../../player/context';\n\n/*\n Returns display and ARIA metadata for a registered hotkey action in the current player.\n \n @param action - Hotkey action to look up. Returns empty details when absent.\n * @param value - Optional action value used to match value-dependent shortcuts.\n */\nexport function useHotkeyShortcut(action: string \| undefined, value?: number \| undefined): HotkeyShortcutDetails {\n const container = useContainer();\n\n const [shortcut, setShortcut] = useState<HotkeyShortcutDetails>({});\n\n useEffect(() => {\n if (!container \|\| !action) {\n setShortcut({});\n return;\n }\n\n const coordinator = getHotkeyCoordinator(container);\n const update = () => setShortcut(coordinator.getShortcut(action, value));\n\n update();\n return coordinator.subscribeShortcutChanges(update);\n }, [container, action, value]);\n\n return shortcut;\n}\n"],"mappings":";;;;;;;;;;AAWA,SAAgB,kBAAkB,QAA4B,OAAmD;CAC/G,MAAM,YAAY,aAAa;CAE/B,MAAM,CAAC,UAAU,eAAe,SAAgC,CAAC,CAAC;CAElE,gBAAgB;EACd,IAAI,CAAC,aAAa,CAAC,QAAQ;GACzB,YAAY,CAAC,CAAC;GACd;EACF;EAEA,MAAM,cAAc,qBAAqB,SAAS;EAClD,MAAM,eAAe,YAAY,YAAY,YAAY,QAAQ,KAAK,CAAC;EAEvE,OAAO;EACP,OAAO,YAAY,yBAAyB,MAAM;CACpD,GAAG;EAAC;EAAW;EAAQ;CAAK,CAAC;CAE7B,OAAO;AACT"}

package/dist/default/ui/hotkey/use-hotkey.js CHANGED Viewed

@@ -3,6 +3,11 @@ import { useLatestRef } from "../../utils/use-latest-ref.js";
 import { createHotkey } from "@videojs/core/dom";
 import { useEffect } from "react";
 //#region src/ui/hotkey/use-hotkey.ts
+/**
+* Registers a keyboard shortcut through the current player's hotkey coordinator.
+*
+* @param options - Shortcut keys, activation callback, scope, repeat behavior, and disabled state.
+*/
 function useHotkey(options) {
 	const { keys, target = "player", repeatable = true, disabled = false } = options;
 	const container = useContainer();

package/dist/default/ui/hotkey/use-hotkey.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"use-hotkey.js","names":[],"sources":["../../../../src/ui/hotkey/use-hotkey.ts"],"sourcesContent":["import { createHotkey } from '@videojs/core/dom';\nimport { useEffect } from 'react';\n\nimport { useContainer } from '../../player/context';\nimport { useLatestRef } from '../../utils/use-latest-ref';\n\nexport interface UseHotkeyOptions {\n keys: string;\n onActivate: (event: KeyboardEvent, key: string) => void;\n target?: 'player' \| 'document';\n repeatable?: boolean;\n disabled?: boolean;\n}\n\nexport function useHotkey(options: UseHotkeyOptions): void {\n const { keys, target = 'player', repeatable = true, disabled = false } = options;\n const container = useContainer();\n const onActivateRef = useLatestRef(options.onActivate);\n\n useEffect(() => {\n if (!container \|\| !keys \|\| disabled) return;\n\n return createHotkey(container, {\n keys,\n target,\n repeatable,\n disabled,\n onActivate: (event, key) => onActivateRef.current(event, key),\n });\n }, [container, keys, target, repeatable, disabled]);\n}\n"],"mappings":"~~;;;;;AAcA~~,SAAgB,UAAU,SAAiC;CACzD,MAAM,EAAE,MAAM,SAAS,UAAU,aAAa,MAAM,WAAW,UAAU;CACzE,MAAM,YAAY,aAAa;CAC/B,MAAM,gBAAgB,aAAa,QAAQ,UAAU;CAErD,gBAAgB;EACd,IAAI,CAAC,aAAa,CAAC,QAAQ,UAAU;EAErC,OAAO,aAAa,WAAW;GAC7B;GACA;GACA;GACA;GACA,aAAa,OAAO,QAAQ,cAAc,QAAQ,OAAO,GAAG;EAC9D,CAAC;CACH,GAAG;EAAC;EAAW;EAAM;EAAQ;EAAY;CAAQ,CAAC;AACpD"}
1	+ {"version":3,"file":"use-hotkey.js","names":[],"sources":["../../../../src/ui/hotkey/use-hotkey.ts"],"sourcesContent":["import { createHotkey } from '@videojs/core/dom';\nimport { useEffect } from 'react';\n\nimport { useContainer } from '../../player/context';\nimport { useLatestRef } from '../../utils/use-latest-ref';\n\nexport interface UseHotkeyOptions {\n keys: string;\n onActivate: (event: KeyboardEvent, key: string) => void;\n target?: 'player' \| 'document';\n repeatable?: boolean;\n disabled?: boolean;\n}\n\n/*\n Registers a keyboard shortcut through the current player's hotkey coordinator.\n \n @param options - Shortcut keys, activation callback, scope, repeat behavior, and disabled state.\n */\nexport function useHotkey(options: UseHotkeyOptions): void {\n const { keys, target = 'player', repeatable = true, disabled = false } = options;\n const container = useContainer();\n const onActivateRef = useLatestRef(options.onActivate);\n\n useEffect(() => {\n if (!container \|\| !keys \|\| disabled) return;\n\n return createHotkey(container, {\n keys,\n target,\n repeatable,\n disabled,\n onActivate: (event, key) => onActivateRef.current(event, key),\n });\n }, [container, keys, target, repeatable, disabled]);\n}\n"],"mappings":";;;;;;;;;;AAmBA,SAAgB,UAAU,SAAiC;CACzD,MAAM,EAAE,MAAM,SAAS,UAAU,aAAa,MAAM,WAAW,UAAU;CACzE,MAAM,YAAY,aAAa;CAC/B,MAAM,gBAAgB,aAAa,QAAQ,UAAU;CAErD,gBAAgB;EACd,IAAI,CAAC,aAAa,CAAC,QAAQ,UAAU;EAErC,OAAO,aAAa,WAAW;GAC7B;GACA;GACA;GACA;GACA,aAAa,OAAO,QAAQ,cAAc,QAAQ,OAAO,GAAG;EAC9D,CAAC;CACH,GAAG;EAAC;EAAW;EAAM;EAAQ;EAAY;CAAQ,CAAC;AACpD"}

package/dist/default/ui/input-indicator/use-indicator-visibility.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"use-indicator-visibility.js","names":[],"sources":["../../../../src/ui/input-indicator/use-indicator-visibility.ts"],"sourcesContent":["import type { IndicatorVisibilityHandle } from '@videojs/core';\nimport { getIndicatorVisibilityCoordinator } from '@videojs/core/dom';\nimport { useCallback, useEffect, useRef, useState } from 'react';\n\nimport { useContainer } from '../../player/context';\nimport { useLatestRef } from '../../utils/use-latest-ref';\n\nexport function useIndicatorVisibility(close: () => void): () => void {\n const container = useContainer();\n const closeRef = useLatestRef(close);\n const coordinatorRef = useRef<ReturnType<typeof getIndicatorVisibilityCoordinator> \| null>(null);\n const [handle] = useState<IndicatorVisibilityHandle>(() => ({\n close: () => closeRef.current(),\n }));\n\n useEffect(() => {\n if (!container) return;\n\n const coordinator = getIndicatorVisibilityCoordinator(container);\n coordinatorRef.current = coordinator;\n\n return coordinator.register(handle);\n }, [container, handle]);\n\n return useCallback(() => {\n coordinatorRef.current?.show(handle);\n }, [handle]);\n}\n"],"mappings":";;;;;AAOA,SAAgB,uBAAuB,OAA+B;CACpE,MAAM,YAAY,aAAa;CAC/B,MAAM,WAAW,aAAa,KAAK;CACnC,MAAM,iBAAiB,OAAoE,IAAI;CAC/F,MAAM,CAAC,UAAU,gBAA2C,EAC1D,aAAa,SAAS,QAAQ,EAChC,EAAE;CAEF,gBAAgB;EACd,IAAI,CAAC,WAAW;EAEhB,MAAM,cAAc,kCAAkC,SAAS;~~EAC~~/D,eAAe,UAAU;EAEzB,OAAO,YAAY,SAAS,MAAM;CACpC,GAAG,CAAC,WAAW,MAAM,CAAC;CAEtB,OAAO,kBAAkB;EACvB,eAAe,SAAS,KAAK,MAAM;CACrC,GAAG,CAAC,MAAM,CAAC;AACb"}
1	+ {"version":3,"file":"use-indicator-visibility.js","names":[],"sources":["../../../../src/ui/input-indicator/use-indicator-visibility.ts"],"sourcesContent":["import type { IndicatorVisibilityHandle } from '@videojs/core';\nimport { getIndicatorVisibilityCoordinator } from '@videojs/core/dom';\nimport { useCallback, useEffect, useRef, useState } from 'react';\n\nimport { useContainer } from '../../player/context';\nimport { useLatestRef } from '../../utils/use-latest-ref';\n\nexport function useIndicatorVisibility(close: () => void): () => void {\n const container = useContainer();\n const closeRef = useLatestRef(close);\n const coordinatorRef = useRef<ReturnType<typeof getIndicatorVisibilityCoordinator> \| null>(null);\n const [handle] = useState<IndicatorVisibilityHandle>(() => ({\n close: () => closeRef.current(),\n }));\n\n useEffect(() => {\n if (!container) return;\n\n const coordinator = getIndicatorVisibilityCoordinator(container);\n\n coordinatorRef.current = coordinator;\n\n return coordinator.register(handle);\n }, [container, handle]);\n\n return useCallback(() => {\n coordinatorRef.current?.show(handle);\n }, [handle]);\n}\n"],"mappings":";;;;;AAOA,SAAgB,uBAAuB,OAA+B;CACpE,MAAM,YAAY,aAAa;CAC/B,MAAM,WAAW,aAAa,KAAK;CACnC,MAAM,iBAAiB,OAAoE,IAAI;CAC/F,MAAM,CAAC,UAAU,gBAA2C,EAC1D,aAAa,SAAS,QAAQ,EAChC,EAAE;CAEF,gBAAgB;EACd,IAAI,CAAC,WAAW;EAEhB,MAAM,cAAc,kCAAkC,SAAS;EAE/D,eAAe,UAAU;EAEzB,OAAO,YAAY,SAAS,MAAM;CACpC,GAAG,CAAC,WAAW,MAAM,CAAC;CAEtB,OAAO,kBAAkB;EACvB,eAAe,SAAS,KAAK,MAAM;CACrC,GAAG,CAAC,MAAM,CAAC;AACb"}

package/dist/default/ui/input-indicator/use-input-indicator-root.js CHANGED Viewed

@@ -12,7 +12,8 @@ function useInputIndicatorRoot(createCore, props, options) {
 	useInputActionSubscription((event, snapshot) => {
 		if (core.processEvent(event, snapshot)) showIndicator();
 	});
-	return useRenderedIndicatorState(useSyncExternalStore((callback) => core.state.subscribe(callback), () => core.state.current, () => core.state.current), options);
+	const currentState = useSyncExternalStore((callback) => core.state.subscribe(callback), () => core.state.current, () => core.state.current);
+	return useRenderedIndicatorState(currentState, options);
 }
 //#endregion
 export { useInputIndicatorRoot };

package/dist/default/ui/input-indicator/use-input-indicator-root.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"use-input-indicator-root.js","names":[],"sources":["../../../../src/ui/input-indicator/use-input-indicator-root.ts"],"sourcesContent":["import type { IndicatorLifecycleState, InputActionEvent, MediaSnapshot } from '@videojs/core';\nimport type { State as StoreState } from '@videojs/store';\nimport { useState, useSyncExternalStore } from 'react';\n\nimport { useDestroy } from '../../utils/use-destroy';\nimport { useIndicatorVisibility } from './use-indicator-visibility';\nimport { useInputActionSubscription } from './use-input-action-subscription';\nimport { type RenderedIndicatorOptions, useRenderedIndicatorState } from './use-rendered-indicator-state';\n\ninterface InputIndicatorRootCore<IndicatorState extends IndicatorLifecycleState, Props> {\n readonly state: StoreState<IndicatorState>;\n setProps(props: Props): void;\n destroy(): void;\n close(): void;\n processEvent(event: InputActionEvent, snapshot: MediaSnapshot): boolean;\n}\n\nexport function useInputIndicatorRoot<IndicatorState extends IndicatorLifecycleState, Props>(\n createCore: () => InputIndicatorRootCore<IndicatorState, Props>,\n props: Props,\n options?: RenderedIndicatorOptions\n) {\n const [core] = useState(createCore);\n useDestroy(core);\n core.setProps(props);\n const showIndicator = useIndicatorVisibility(() => core.close());\n\n useInputActionSubscription((event, snapshot) => {\n if (core.processEvent(event, snapshot)) showIndicator();\n });\n\n const currentState = useSyncExternalStore(\n (callback) => core.state.subscribe(callback),\n () => core.state.current,\n () => core.state.current\n );\n\n return useRenderedIndicatorState(currentState, options);\n}\n"],"mappings":";;;;;;AAiBA,SAAgB,sBACd,YACA,OACA,SACA;CACA,MAAM,CAAC,QAAQ,SAAS,UAAU;~~CAClC~~,WAAW,IAAI;CACf,KAAK,SAAS,KAAK;CACnB,MAAM,gBAAgB,6BAA6B,KAAK,MAAM,CAAC;CAE/D,4BAA4B,OAAO,aAAa;EAC9C,IAAI,KAAK,aAAa,OAAO,QAAQ,GAAG,cAAc;CACxD,CAAC;~~CAQD~~,~~OAAO~~,~~0BANc~~,sBAClB,aAAa,KAAK,MAAM,UAAU,QAAQ,SACrC,KAAK,MAAM,eACX,KAAK,MAAM,~~OAGyB~~,~~GAAG~~,OAAO;AACxD"}
1	+ {"version":3,"file":"use-input-indicator-root.js","names":[],"sources":["../../../../src/ui/input-indicator/use-input-indicator-root.ts"],"sourcesContent":["import type { IndicatorLifecycleState, InputActionEvent, MediaSnapshot } from '@videojs/core';\nimport type { State as StoreState } from '@videojs/store';\nimport { useState, useSyncExternalStore } from 'react';\n\nimport { useDestroy } from '../../utils/use-destroy';\nimport { useIndicatorVisibility } from './use-indicator-visibility';\nimport { useInputActionSubscription } from './use-input-action-subscription';\nimport { type RenderedIndicatorOptions, useRenderedIndicatorState } from './use-rendered-indicator-state';\n\ninterface InputIndicatorRootCore<IndicatorState extends IndicatorLifecycleState, Props> {\n readonly state: StoreState<IndicatorState>;\n setProps(props: Props): void;\n destroy(): void;\n close(): void;\n processEvent(event: InputActionEvent, snapshot: MediaSnapshot): boolean;\n}\n\nexport function useInputIndicatorRoot<IndicatorState extends IndicatorLifecycleState, Props>(\n createCore: () => InputIndicatorRootCore<IndicatorState, Props>,\n props: Props,\n options?: RenderedIndicatorOptions\n) {\n const [core] = useState(createCore);\n\n useDestroy(core);\n core.setProps(props);\n const showIndicator = useIndicatorVisibility(() => core.close());\n\n useInputActionSubscription((event, snapshot) => {\n if (core.processEvent(event, snapshot)) showIndicator();\n });\n\n const currentState = useSyncExternalStore(\n (callback) => core.state.subscribe(callback),\n () => core.state.current,\n () => core.state.current\n );\n\n return useRenderedIndicatorState(currentState, options);\n}\n"],"mappings":";;;;;;AAiBA,SAAgB,sBACd,YACA,OACA,SACA;CACA,MAAM,CAAC,QAAQ,SAAS,UAAU;CAElC,WAAW,IAAI;CACf,KAAK,SAAS,KAAK;CACnB,MAAM,gBAAgB,6BAA6B,KAAK,MAAM,CAAC;CAE/D,4BAA4B,OAAO,aAAa;EAC9C,IAAI,KAAK,aAAa,OAAO,QAAQ,GAAG,cAAc;CACxD,CAAC;CAED,MAAM,eAAe,sBAClB,aAAa,KAAK,MAAM,UAAU,QAAQ,SACrC,KAAK,MAAM,eACX,KAAK,MAAM,OACnB;CAEA,OAAO,0BAA0B,cAAc,OAAO;AACxD"}

package/dist/default/ui/input-indicator/use-rendered-indicator-state.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"use-rendered-indicator-state.js","names":[],"sources":["../../../../src/ui/input-indicator/use-rendered-indicator-state.ts"],"sourcesContent":["import { getRenderedIndicatorState, type IndicatorLifecycleState, isIndicatorPresent } from '@videojs/core';\nimport { createTransition } from '@videojs/core/dom';\nimport { useLayoutEffect, useRef, useState, useSyncExternalStore } from 'react';\n\nimport { useDestroy } from '../../utils/use-destroy';\n\nexport interface RenderedIndicatorOptions {\n replayOnUpdate?: boolean \| undefined;\n}\n\nexport function useRenderedIndicatorState<State extends IndicatorLifecycleState>(\n currentState: State,\n options: RenderedIndicatorOptions = {}\n) {\n const elementRef = useRef<HTMLElement>(null);\n const currentStateRef = useRef(currentState);\n const snapshotRef = useRef(currentState);\n const [transition] = useState(() => createTransition());\n useDestroy(transition);\n currentStateRef.current = currentState;\n\n const transitionState = useSyncExternalStore(\n (callback) => transition.state.subscribe(callback),\n () => transition.state.current,\n () => transition.state.current\n );\n\n const { generation, open } = currentState;\n\n useLayoutEffect(() => {\n if (open) {\n const nextState = currentStateRef.current;\n if (nextState.generation !== generation) return;\n\n snapshotRef.current = nextState;\n const transitionState = transition.state.current;\n if (!transitionState.active \|\| options.replayOnUpdate !== false) {\n void transition.open(elementRef.current);\n } else if (transitionState.status === 'ending') {\n transition.cancel();\n }\n return;\n }\n\n const { active, status } = transition.state.current;\n if (active && status !== 'ending') {\n void transition.close(elementRef.current);\n }\n }, [generation, open, options.replayOnUpdate, transition]);\n\n return {\n elementRef,\n present: isIndicatorPresent(currentState, transitionState),\n state: getRenderedIndicatorState(currentState, snapshotRef.current, transitionState),\n };\n}\n"],"mappings":";;;;;AAUA,SAAgB,0BACd,cACA,UAAoC,CAAC,GACrC;CACA,MAAM,aAAa,OAAoB,IAAI;CAC3C,MAAM,kBAAkB,OAAO,YAAY;CAC3C,MAAM,cAAc,OAAO,YAAY;CACvC,MAAM,CAAC,cAAc,eAAe,iBAAiB,CAAC;~~CACtD~~,WAAW,UAAU;CACrB,gBAAgB,UAAU;CAE1B,MAAM,kBAAkB,sBACrB,aAAa,WAAW,MAAM,UAAU,QAAQ,SAC3C,WAAW,MAAM,eACjB,WAAW,MAAM,OACzB;CAEA,MAAM,EAAE,YAAY,SAAS;CAE7B,sBAAsB;EACpB,IAAI,MAAM;GACR,MAAM,YAAY,gBAAgB;GAClC,IAAI,UAAU,eAAe,YAAY;GAEzC,YAAY,UAAU;GACtB,MAAM,kBAAkB,WAAW,MAAM;~~GACzC~~,IAAI,CAAC,gBAAgB,UAAU,QAAQ,mBAAmB,OACxD,WAAgB,KAAK,WAAW,OAAO;QAClC,IAAI,gBAAgB,WAAW,UACpC,WAAW,OAAO;~~GAEpB~~;EACF;EAEA,MAAM,EAAE,QAAQ,WAAW,WAAW,MAAM;~~EAC5C~~,IAAI,UAAU,WAAW,UACvB,WAAgB,MAAM,WAAW,OAAO;CAE5C,GAAG;EAAC;EAAY;EAAM,QAAQ;EAAgB;CAAU,CAAC;CAEzD,OAAO;EACL;EACA,SAAS,mBAAmB,cAAc,eAAe;EACzD,OAAO,0BAA0B,cAAc,YAAY,SAAS,eAAe;CACrF;AACF"}
1	+ {"version":3,"file":"use-rendered-indicator-state.js","names":[],"sources":["../../../../src/ui/input-indicator/use-rendered-indicator-state.ts"],"sourcesContent":["import { getRenderedIndicatorState, type IndicatorLifecycleState, isIndicatorPresent } from '@videojs/core';\nimport { createTransition } from '@videojs/core/dom';\nimport { useLayoutEffect, useRef, useState, useSyncExternalStore } from 'react';\n\nimport { useDestroy } from '../../utils/use-destroy';\n\nexport interface RenderedIndicatorOptions {\n replayOnUpdate?: boolean \| undefined;\n}\n\nexport function useRenderedIndicatorState<State extends IndicatorLifecycleState>(\n currentState: State,\n options: RenderedIndicatorOptions = {}\n) {\n const elementRef = useRef<HTMLElement>(null);\n const currentStateRef = useRef(currentState);\n const snapshotRef = useRef(currentState);\n const [transition] = useState(() => createTransition());\n\n useDestroy(transition);\n currentStateRef.current = currentState;\n\n const transitionState = useSyncExternalStore(\n (callback) => transition.state.subscribe(callback),\n () => transition.state.current,\n () => transition.state.current\n );\n\n const { generation, open } = currentState;\n\n useLayoutEffect(() => {\n if (open) {\n const nextState = currentStateRef.current;\n if (nextState.generation !== generation) return;\n\n snapshotRef.current = nextState;\n const transitionState = transition.state.current;\n\n if (!transitionState.active \|\| options.replayOnUpdate !== false) {\n void transition.open(elementRef.current);\n } else if (transitionState.status === 'ending') {\n transition.cancel();\n }\n\n return;\n }\n\n const { active, status } = transition.state.current;\n\n if (active && status !== 'ending') {\n void transition.close(elementRef.current);\n }\n }, [generation, open, options.replayOnUpdate, transition]);\n\n return {\n elementRef,\n present: isIndicatorPresent(currentState, transitionState),\n state: getRenderedIndicatorState(currentState, snapshotRef.current, transitionState),\n };\n}\n"],"mappings":";;;;;AAUA,SAAgB,0BACd,cACA,UAAoC,CAAC,GACrC;CACA,MAAM,aAAa,OAAoB,IAAI;CAC3C,MAAM,kBAAkB,OAAO,YAAY;CAC3C,MAAM,cAAc,OAAO,YAAY;CACvC,MAAM,CAAC,cAAc,eAAe,iBAAiB,CAAC;CAEtD,WAAW,UAAU;CACrB,gBAAgB,UAAU;CAE1B,MAAM,kBAAkB,sBACrB,aAAa,WAAW,MAAM,UAAU,QAAQ,SAC3C,WAAW,MAAM,eACjB,WAAW,MAAM,OACzB;CAEA,MAAM,EAAE,YAAY,SAAS;CAE7B,sBAAsB;EACpB,IAAI,MAAM;GACR,MAAM,YAAY,gBAAgB;GAClC,IAAI,UAAU,eAAe,YAAY;GAEzC,YAAY,UAAU;GACtB,MAAM,kBAAkB,WAAW,MAAM;GAEzC,IAAI,CAAC,gBAAgB,UAAU,QAAQ,mBAAmB,OACxD,WAAgB,KAAK,WAAW,OAAO;QAClC,IAAI,gBAAgB,WAAW,UACpC,WAAW,OAAO;GAGpB;EACF;EAEA,MAAM,EAAE,QAAQ,WAAW,WAAW,MAAM;EAE5C,IAAI,UAAU,WAAW,UACvB,WAAgB,MAAM,WAAW,OAAO;CAE5C,GAAG;EAAC;EAAY;EAAM,QAAQ;EAAgB;CAAU,CAAC;CAEzD,OAAO;EACL;EACA,SAAS,mBAAmB,cAAc,eAAe;EACzD,OAAO,0BAA0B,cAAc,YAAY,SAAS,eAAe;CACrF;AACF"}

package/dist/default/ui/live-button/live-button.js CHANGED Viewed

@@ -10,21 +10,18 @@ import { LiveButtonCore, LiveButtonDataAttrs } from "@videojs/core";
 //#region src/ui/live-button/live-button.tsx
 const DISPLAY_NAME = "LiveButton";
 /**
-* A button that indicates live status and seeks to the live edge when
-* pressed. Exposes `data-live` while the stream is live (or DVR) and
-* `data-live-edge` while playing at the live edge so skins can style a
-* red-dot ↔ grey-dot treatment.
+* A button that indicates live status and seeks to the live edge when pressed. Exposes `data-live` while the stream is
+* live (or DVR) and `data-live-edge` while playing at the live edge so skins can style a red-dot ↔ grey-dot treatment.
 *
-* Selects from `live`, `time`, and `buffer` features and composes them
-* itself rather than going through `createMediaButton`, since the LiveButton
-* needs three feature slices to detect the live edge and seek.
+* Selects from `live`, `time`, and `buffer` features and composes them itself rather than going through
+* `createMediaButton`, since the LiveButton needs three feature slices to detect the live edge and seek.
 *
 * Displays the translated live badge when no children are provided.
 *
 * @example
-* ```tsx
-* <LiveButton />
-* ```
+*   ```tsx
+*   <LiveButton />;
+*   ```;
 *
 * @see https://github.com/video-dev/media-ui-extensions/blob/main/proposals/0007-live-edge.md
 */

package/dist/default/ui/live-button/live-button.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"live-button.js","names":[],"sources":["../../../../src/ui/live-button/live-button.tsx"],"sourcesContent":["import { LiveButtonCore, LiveButtonDataAttrs, type LiveButtonMediaState } from '@videojs/core';\nimport { logMissingFeature, selectBuffer, selectLive, selectTime } from '@videojs/core/dom';\nimport { translateText } from '@videojs/core/i18n';\nimport { forwardRef, type ReactNode, useLayoutEffect, useState } from 'react';\n\nimport { useTranslator } from '../../i18n/context';\nimport { usePlayer } from '../../player/context';\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { useButton } from '../hooks/use-button';\nimport { useOptionalTooltipContext } from '../tooltip/context';\n\nconst DISPLAY_NAME = 'LiveButton';\n\nexport interface LiveButtonProps extends UIComponentProps<'button', LiveButtonCore.State>, LiveButtonCore.Props {}\n\n/*\n A button that indicates live status and seeks to the live edge when\n * pressed. Exposes `data-live` while the stream is live (or DVR) and\n * `data-live-edge` while playing at the live edge so skins can style a\n * red-dot ↔ grey-dot treatment.\n \n Selects from `live`, `time`, and `buffer` features and composes them\n * itself rather than going through `createMediaButton`, since the LiveButton\n * needs three feature slices to detect the live edge and seek.\n \n Displays the translated live badge when no children are provided.\n \n @example\n * ```tsx\n * <LiveButton ~~/>\~~n * ~~```\~~n \n @see https://github.com/video-dev/media-ui-extensions/blob/main/proposals/0007-live-edge.md\n */\nexport const LiveButton = forwardRef<HTMLButtonElement, LiveButtonProps>(\n function LiveButton(componentProps, forwardedRef): ReactNode {\n const { children, render, className, style, label, disabled, ...elementProps } = componentProps;\n\n const live = usePlayer(selectLive);\n const time = usePlayer(selectTime);\n const buffer = usePlayer(selectBuffer);\n\n const media: LiveButtonMediaState \| null =\n live && time && buffer\n ? {\n currentTime: time.currentTime,\n seek: time.seek,\n seekable: buffer.seekable,\n liveEdgeStart: live.liveEdgeStart,\n targetLiveWindow: live.targetLiveWindow,\n }\n : null;\n\n const tooltipCtx = useOptionalTooltipContext();\n const translator = useTranslator();\n const [core] = useState(() => new LiveButtonCore());\n core.setProps({ label, disabled });\n\n const { getButtonProps, buttonRef } = useButton({\n displayName: DISPLAY_NAME,\n onActivate: () => {\n if (media) core.seekToLive(media);\n },\n isDisabled: () => !!disabled \|\| !media,\n });\n\n if (media) core.setMedia(media);\n const state = media ? core.getState() : null;\n const labelText = state ? translateText(core.getLabel(state), translator) : undefined;\n\n useLayoutEffect(() => {\n if (!tooltipCtx) return;\n tooltipCtx.setContent(labelText ? { label: labelText } : undefined);\n return () => tooltipCtx.setContent(undefined);\n }, [tooltipCtx, labelText]);\n\n if (!media \|\| !state) {\n if (__DEV__) logMissingFeature(DISPLAY_NAME, selectLive.displayName ?? 'live');\n return null;\n }\n\n const attrs = core.getAttrs(state);\n const labelAttr = attrs['aria-label'];\n const content = children ?? translateText(LiveButtonCore.defaultText, translator);\n\n return renderElement(\n 'button',\n { render, className, style },\n {\n state,\n stateAttrMap: LiveButtonDataAttrs,\n ref: [forwardedRef, buttonRef],\n props: [\n attrs,\n {\n children: content,\n ...elementProps,\n 'aria-label': labelAttr ? translateText(labelAttr, translator) : labelAttr,\n },\n getButtonProps(),\n ],\n }\n );\n }\n);\n\nLiveButton.displayName = DISPLAY_NAME;\n\nexport namespace LiveButton {\n export type Props = LiveButtonProps;\n export type State = LiveButtonCore.State;\n}\n"],"mappings":";;;;;;;;;;AAYA,MAAM,eAAe~~;;;;;;;;;;;;;;;;;;;;AAuBrB~~,MAAa,aAAa,WACxB,SAAS,WAAW,gBAAgB,cAAyB;CAC3D,MAAM,EAAE,UAAU,QAAQ,WAAW,OAAO,OAAO,UAAU,GAAG,iBAAiB;CAEjF,MAAM,OAAO,UAAU,UAAU;CACjC,MAAM,OAAO,UAAU,UAAU;CACjC,MAAM,SAAS,UAAU,YAAY;CAErC,MAAM,QACJ,QAAQ,QAAQ,SACZ;EACE,aAAa,KAAK;EAClB,MAAM,KAAK;EACX,UAAU,OAAO;EACjB,eAAe,KAAK;EACpB,kBAAkB,KAAK;CACzB,IACA;CAEN,MAAM,aAAa,0BAA0B;CAC7C,MAAM,aAAa,cAAc;CACjC,MAAM,CAAC,QAAQ,eAAe,IAAI,eAAe,CAAC;~~CAClD~~,KAAK,SAAS;EAAE;EAAO;CAAS,CAAC;CAEjC,MAAM,EAAE,gBAAgB,cAAc,UAAU;EAC9C,aAAa;EACb,kBAAkB;GAChB,IAAI,OAAO,KAAK,WAAW,KAAK;EAClC;EACA,kBAAkB,CAAC,CAAC,YAAY,CAAC;CACnC,CAAC;CAED,IAAI,OAAO,KAAK,SAAS,KAAK;~~CAC9B~~,MAAM,QAAQ,QAAQ,KAAK,SAAS,IAAI;CACxC,MAAM,YAAY,QAAQ,cAAc,KAAK,SAAS,KAAK,GAAG,UAAU,IAAI,KAAA;CAE5E,sBAAsB;EACpB,IAAI,CAAC,YAAY;~~EACjB~~,WAAW,WAAW,YAAY,EAAE,OAAO,UAAU,IAAI,KAAA,CAAS;EAClE,aAAa,WAAW,WAAW,KAAA,CAAS;CAC9C,GAAG,CAAC,YAAY,SAAS,CAAC;CAE1B,IAAI,CAAC,SAAS,CAAC,~~OAEb~~,OAAO;CAGT,MAAM,QAAQ,KAAK,SAAS,KAAK;CACjC,MAAM,YAAY,MAAM;CACxB,MAAM,UAAU,YAAY,cAAc,eAAe,aAAa,UAAU;CAEhF,OAAO,cACL,UACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EACE;EACA,cAAc;EACd,KAAK,CAAC,cAAc,SAAS;EAC7B,OAAO;GACL;GACA;IACE,UAAU;IACV,GAAG;IACH,cAAc,YAAY,cAAc,WAAW,UAAU,IAAI;GACnE;GACA,eAAe;EACjB;CACF,CACF;AACF,CACF;AAEA,WAAW,cAAc"}
1	+ {"version":3,"file":"live-button.js","names":[],"sources":["../../../../src/ui/live-button/live-button.tsx"],"sourcesContent":["import { LiveButtonCore, LiveButtonDataAttrs, type LiveButtonMediaState } from '@videojs/core';\nimport { logMissingFeature, selectBuffer, selectLive, selectTime } from '@videojs/core/dom';\nimport { translateText } from '@videojs/core/i18n';\nimport { forwardRef, type ReactNode, useLayoutEffect, useState } from 'react';\n\nimport { useTranslator } from '../../i18n/context';\nimport { usePlayer } from '../../player/context';\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { useButton } from '../hooks/use-button';\nimport { useOptionalTooltipContext } from '../tooltip/context';\n\nconst DISPLAY_NAME = 'LiveButton';\n\nexport interface LiveButtonProps extends UIComponentProps<'button', LiveButtonCore.State>, LiveButtonCore.Props {}\n\n/*\n A button that indicates live status and seeks to the live edge when pressed. Exposes `data-live` while the stream is\n * live (or DVR) and `data-live-edge` while playing at the live edge so skins can style a red-dot ↔ grey-dot treatment.\n \n Selects from `live`, `time`, and `buffer` features and composes them itself rather than going through\n * `createMediaButton`, since the LiveButton needs three feature slices to detect the live edge and seek.\n \n Displays the translated live badge when no children are provided.\n \n @example\n * ```tsx\n * <LiveButton />;\n * ```;\n \n @see https://github.com/video-dev/media-ui-extensions/blob/main/proposals/0007-live-edge.md\n */\nexport const LiveButton = forwardRef<HTMLButtonElement, LiveButtonProps>(\n function LiveButton(componentProps, forwardedRef): ReactNode {\n const { children, render, className, style, label, disabled, ...elementProps } = componentProps;\n\n const live = usePlayer(selectLive);\n const time = usePlayer(selectTime);\n const buffer = usePlayer(selectBuffer);\n\n const media: LiveButtonMediaState \| null =\n live && time && buffer\n ? {\n currentTime: time.currentTime,\n seek: time.seek,\n seekable: buffer.seekable,\n liveEdgeStart: live.liveEdgeStart,\n targetLiveWindow: live.targetLiveWindow,\n }\n : null;\n\n const tooltipCtx = useOptionalTooltipContext();\n const translator = useTranslator();\n const [core] = useState(() => new LiveButtonCore());\n\n core.setProps({ label, disabled });\n\n const { getButtonProps, buttonRef } = useButton({\n displayName: DISPLAY_NAME,\n onActivate: () => {\n if (media) core.seekToLive(media);\n },\n isDisabled: () => !!disabled \|\| !media,\n });\n\n if (media) core.setMedia(media);\n\n const state = media ? core.getState() : null;\n const labelText = state ? translateText(core.getLabel(state), translator) : undefined;\n\n useLayoutEffect(() => {\n if (!tooltipCtx) return;\n\n tooltipCtx.setContent(labelText ? { label: labelText } : undefined);\n return () => tooltipCtx.setContent(undefined);\n }, [tooltipCtx, labelText]);\n\n if (!media \|\| !state) {\n if (__DEV__) logMissingFeature(DISPLAY_NAME, selectLive.displayName ?? 'live');\n\n return null;\n }\n\n const attrs = core.getAttrs(state);\n const labelAttr = attrs['aria-label'];\n const content = children ?? translateText(LiveButtonCore.defaultText, translator);\n\n return renderElement(\n 'button',\n { render, className, style },\n {\n state,\n stateAttrMap: LiveButtonDataAttrs,\n ref: [forwardedRef, buttonRef],\n props: [\n attrs,\n {\n children: content,\n ...elementProps,\n 'aria-label': labelAttr ? translateText(labelAttr, translator) : labelAttr,\n },\n getButtonProps(),\n ],\n }\n );\n }\n);\n\nLiveButton.displayName = DISPLAY_NAME;\n\nexport namespace LiveButton {\n export type Props = LiveButtonProps;\n export type State = LiveButtonCore.State;\n}\n"],"mappings":";;;;;;;;;;AAYA,MAAM,eAAe;;;;;;;;;;;;;;;;;AAoBrB,MAAa,aAAa,WACxB,SAAS,WAAW,gBAAgB,cAAyB;CAC3D,MAAM,EAAE,UAAU,QAAQ,WAAW,OAAO,OAAO,UAAU,GAAG,iBAAiB;CAEjF,MAAM,OAAO,UAAU,UAAU;CACjC,MAAM,OAAO,UAAU,UAAU;CACjC,MAAM,SAAS,UAAU,YAAY;CAErC,MAAM,QACJ,QAAQ,QAAQ,SACZ;EACE,aAAa,KAAK;EAClB,MAAM,KAAK;EACX,UAAU,OAAO;EACjB,eAAe,KAAK;EACpB,kBAAkB,KAAK;CACzB,IACA;CAEN,MAAM,aAAa,0BAA0B;CAC7C,MAAM,aAAa,cAAc;CACjC,MAAM,CAAC,QAAQ,eAAe,IAAI,eAAe,CAAC;CAElD,KAAK,SAAS;EAAE;EAAO;CAAS,CAAC;CAEjC,MAAM,EAAE,gBAAgB,cAAc,UAAU;EAC9C,aAAa;EACb,kBAAkB;GAChB,IAAI,OAAO,KAAK,WAAW,KAAK;EAClC;EACA,kBAAkB,CAAC,CAAC,YAAY,CAAC;CACnC,CAAC;CAED,IAAI,OAAO,KAAK,SAAS,KAAK;CAE9B,MAAM,QAAQ,QAAQ,KAAK,SAAS,IAAI;CACxC,MAAM,YAAY,QAAQ,cAAc,KAAK,SAAS,KAAK,GAAG,UAAU,IAAI,KAAA;CAE5E,sBAAsB;EACpB,IAAI,CAAC,YAAY;EAEjB,WAAW,WAAW,YAAY,EAAE,OAAO,UAAU,IAAI,KAAA,CAAS;EAClE,aAAa,WAAW,WAAW,KAAA,CAAS;CAC9C,GAAG,CAAC,YAAY,SAAS,CAAC;CAE1B,IAAI,CAAC,SAAS,CAAC,OAGb,OAAO;CAGT,MAAM,QAAQ,KAAK,SAAS,KAAK;CACjC,MAAM,YAAY,MAAM;CACxB,MAAM,UAAU,YAAY,cAAc,eAAe,aAAa,UAAU;CAEhF,OAAO,cACL,UACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EACE;EACA,cAAc;EACd,KAAK,CAAC,cAAc,SAAS;EAC7B,OAAO;GACL;GACA;IACE,UAAU;IACV,GAAG;IACH,cAAc,YAAY,cAAc,WAAW,UAAU,IAAI;GACnE;GACA,eAAe;EACjB;CACF,CACF;AACF,CACF;AAEA,WAAW,cAAc"}

package/dist/default/ui/menu/context.js CHANGED Viewed

@@ -2,14 +2,23 @@ import { createContext, useContext } from "react";
 //#region src/ui/menu/context.tsx
 const MenuContext = createContext(null);
 const MenuContextProvider = MenuContext.Provider;
+/** Returns the current menu compound-component context. Throws outside `Menu.Root`. */
 function useMenuContext() {
 	const ctx = useContext(MenuContext);
 	if (!ctx) throw new Error("Menu compound components must be used within a Menu.Root");
 	return ctx;
 }
+/** Returns the nearest menu context, or `null` outside `Menu.Root`. */
 function useOptionalMenuContext() {
 	return useContext(MenuContext);
 }
+const MenuPopupContext = createContext(null);
+const MenuPopupContextProvider = MenuPopupContext.Provider;
+function useMenuPopupContext() {
+	const ctx = useContext(MenuPopupContext);
+	if (!ctx) throw new Error("Menu.Content must be used within a Menu.Popup");
+	return ctx;
+}
 const MenuGroupContext = createContext(null);
 const MenuGroupContextProvider = MenuGroupContext.Provider;
 function useMenuGroupContext() {
@@ -33,6 +42,6 @@ function useOptionalMenuTriggerChildContext() {
 	return useContext(MenuTriggerChildContext);
 }
 //#endregion
-export { MenuContextProvider, MenuGroupContextProvider, MenuRadioGroupContextProvider, MenuRadioItemContextProvider, MenuTriggerChildContextProvider, useMenuContext, useMenuGroupContext, useMenuRadioGroupContext, useOptionalMenuContext, useOptionalMenuRadioItemContext, useOptionalMenuTriggerChildContext };
+export { MenuContextProvider, MenuGroupContextProvider, MenuPopupContextProvider, MenuRadioGroupContextProvider, MenuRadioItemContextProvider, MenuTriggerChildContextProvider, useMenuContext, useMenuGroupContext, useMenuPopupContext, useMenuRadioGroupContext, useOptionalMenuContext, useOptionalMenuRadioItemContext, useOptionalMenuTriggerChildContext };
 //# sourceMappingURL=context.js.map