npm - @videojs/react - Versions diffs - 10.0.0-beta.26 → 10.0.0-beta.28 - Mend

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

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 (1415) hide show

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":["~~'use~~ ~~client';\n\nimport~~ { FullscreenButtonCore, FullscreenButtonDataAttrs } from '@videojs/core';\nimport { selectFullscreen } from '@videojs/core/dom';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { createMediaButton } from '../create-media-button';\n\nexport interface FullscreenButtonProps\n extends UIComponentProps<'button', FullscreenButtonCore.State>,\n FullscreenButtonCore.Props {}\n\n/** A button that toggles fullscreen. */\nexport const FullscreenButton = createMediaButton<FullscreenButtonCore, FullscreenButtonProps>({\n displayName: 'FullscreenButton',\n core: FullscreenButtonCore,\n stateAttrMap: FullscreenButtonDataAttrs,\n selector: selectFullscreen,\n action: (core, state) => core.toggle(state),\n 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":"~~;;;;;;AAaA~~,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>,\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"}

package/dist/default/ui/gesture/gesture.js CHANGED Viewed

@@ -1,4 +1,3 @@
-"use client";
 import { useContainer, usePlayer } from "../../player/context.js";
 import { createDoubleTapGesture, createTapGesture, resolveGestureAction } from "@videojs/core/dom";
 import { useEffect } from "react";

package/dist/default/ui/gesture/gesture.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"gesture.js","names":[],"sources":["../../../../src/ui/gesture/gesture.tsx"],"sourcesContent":["~~'use~~ ~~client';\n\nimport~~ type { AnyPlayerStore } from '@videojs/core/dom';\nimport {\n createDoubleTapGesture,\n createTapGesture,\n type GestureActionName,\n type GesturePointerType,\n type GestureRegion,\n resolveGestureAction,\n} from '@videojs/core/dom';\nimport type { ReactNode } from 'react';\nimport { useEffect } from 'react';\n\nimport { useContainer, usePlayer } from '../../player/context';\n\nexport interface GestureProps {\n type: 'tap' \| 'doubletap' \| (string & {});\n action: GestureActionName \| (string & {});\n value?: number;\n pointer?: GesturePointerType;\n region?: GestureRegion;\n disabled?: boolean;\n}\n\nexport function Gesture({ type, action, value, pointer, region, disabled }: GestureProps): ReactNode {\n const store = usePlayer() as AnyPlayerStore;\n const container = useContainer();\n\n useEffect(() => {\n if (!container \|\| !type \|\| !action \|\| disabled) return;\n\n const resolver = resolveGestureAction(action);\n if (!resolver) return;\n\n const onActivate = (event: PointerEvent) => {\n resolver({ store, value, event });\n };\n\n const options = { pointer, region, action, value };\n\n if (type === 'doubletap') {\n return createDoubleTapGesture(container, onActivate, options);\n }\n\n return createTapGesture(container, onActivate, options);\n }, [container, store, type, action, value, pointer, region, disabled]);\n\n return null;\n}\n\nexport namespace Gesture {\n export type Props = GestureProps;\n}\n\n/** @deprecated Use `GestureProps` instead. /\nexport type MediaGestureProps = GestureProps;\n\n/* @deprecated Use `Gesture` instead. */\nexport const MediaGesture = Gesture;\n"],"mappings":"~~;;;;;AAyBA~~,SAAgB,QAAQ,EAAE,MAAM,QAAQ,OAAO,SAAS,QAAQ,YAAqC;CACnG,MAAM,QAAQ,UAAU;CACxB,MAAM,YAAY,aAAa;CAE/B,gBAAgB;EACd,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,UAAU,UAAU;EAEhD,MAAM,WAAW,qBAAqB,MAAM;EAC5C,IAAI,CAAC,UAAU;EAEf,MAAM,cAAc,UAAwB;GAC1C,SAAS;IAAE;IAAO;IAAO;GAAM,CAAC;EAClC;EAEA,MAAM,UAAU;GAAE;GAAS;GAAQ;GAAQ;EAAM;EAEjD,IAAI,SAAS,aACX,OAAO,uBAAuB,WAAW,YAAY,OAAO;EAG9D,OAAO,iBAAiB,WAAW,YAAY,OAAO;CACxD,GAAG;EAAC;EAAW;EAAO;EAAM;EAAQ;EAAO;EAAS;EAAQ;CAAQ,CAAC;CAErE,OAAO;AACT;;AAUA,MAAa,eAAe"}
1	+ {"version":3,"file":"gesture.js","names":[],"sources":["../../../../src/ui/gesture/gesture.tsx"],"sourcesContent":["import type { AnyPlayerStore } from '@videojs/core/dom';\nimport {\n createDoubleTapGesture,\n createTapGesture,\n type GestureActionName,\n type GesturePointerType,\n type GestureRegion,\n resolveGestureAction,\n} from '@videojs/core/dom';\nimport type { ReactNode } from 'react';\nimport { useEffect } from 'react';\n\nimport { useContainer, usePlayer } from '../../player/context';\n\nexport interface GestureProps {\n type: 'tap' \| 'doubletap' \| (string & {});\n action: GestureActionName \| (string & {});\n value?: number;\n pointer?: GesturePointerType;\n region?: GestureRegion;\n disabled?: boolean;\n}\n\nexport function Gesture({ type, action, value, pointer, region, disabled }: GestureProps): ReactNode {\n const store = usePlayer() as AnyPlayerStore;\n const container = useContainer();\n\n useEffect(() => {\n if (!container \|\| !type \|\| !action \|\| disabled) return;\n\n const resolver = resolveGestureAction(action);\n if (!resolver) return;\n\n const onActivate = (event: PointerEvent) => {\n resolver({ store, value, event });\n };\n\n const options = { pointer, region, action, value };\n\n if (type === 'doubletap') {\n return createDoubleTapGesture(container, onActivate, options);\n }\n\n return createTapGesture(container, onActivate, options);\n }, [container, store, type, action, value, pointer, region, disabled]);\n\n return null;\n}\n\nexport namespace Gesture {\n export type Props = GestureProps;\n}\n\n/** @deprecated Use `GestureProps` instead. /\nexport type MediaGestureProps = GestureProps;\n\n/* @deprecated Use `Gesture` instead. */\nexport const MediaGesture = Gesture;\n"],"mappings":";;;;AAuBA,SAAgB,QAAQ,EAAE,MAAM,QAAQ,OAAO,SAAS,QAAQ,YAAqC;CACnG,MAAM,QAAQ,UAAU;CACxB,MAAM,YAAY,aAAa;CAE/B,gBAAgB;EACd,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,UAAU,UAAU;EAEhD,MAAM,WAAW,qBAAqB,MAAM;EAC5C,IAAI,CAAC,UAAU;EAEf,MAAM,cAAc,UAAwB;GAC1C,SAAS;IAAE;IAAO;IAAO;GAAM,CAAC;EAClC;EAEA,MAAM,UAAU;GAAE;GAAS;GAAQ;GAAQ;EAAM;EAEjD,IAAI,SAAS,aACX,OAAO,uBAAuB,WAAW,YAAY,OAAO;EAG9D,OAAO,iBAAiB,WAAW,YAAY,OAAO;CACxD,GAAG;EAAC;EAAW;EAAO;EAAM;EAAQ;EAAO;EAAS;EAAQ;CAAQ,CAAC;CAErE,OAAO;AACT;;AAUA,MAAa,eAAe"}

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

@@ -1,4 +1,3 @@
-"use client";
 import { useContainer } from "../../player/context.js";
 import { useLatestRef } from "../../utils/use-latest-ref.js";
 import { createDoubleTapGesture } from "@videojs/core/dom";

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":["~~'use~~ ~~client';\n\nimport~~ { createDoubleTapGesture, type GesturePointerType, type GestureRegion } 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 {\n pointer?: GesturePointerType;\n region?: GestureRegion;\n disabled?: boolean;\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":"~~;;;;;;AAgBA~~,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 { createDoubleTapGesture, type GesturePointerType, type GestureRegion } 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 {\n pointer?: GesturePointerType;\n region?: GestureRegion;\n disabled?: boolean;\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":";;;;;AAcA,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

@@ -1,4 +1,3 @@
-"use client";
 import { useContainer } from "../../player/context.js";
 import { useLatestRef } from "../../utils/use-latest-ref.js";
 import { createTapGesture } from "@videojs/core/dom";

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":["~~'use~~ ~~client';\n\nimport~~ { createTapGesture, type GesturePointerType, type GestureRegion } 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 {\n pointer?: GesturePointerType;\n region?: GestureRegion;\n disabled?: boolean;\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":"~~;;;;;;AAgBA~~,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 { createTapGesture, type GesturePointerType, type GestureRegion } 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 {\n pointer?: GesturePointerType;\n region?: GestureRegion;\n disabled?: boolean;\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":";;;;;AAcA,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 ADDED Viewed

@@ -0,0 +1,42 @@
+import { useTranslator } from "../../i18n/context.js";
+import { usePlayer } from "../../player/context.js";
+import "@videojs/core/dom";
+import { translateText } from "@videojs/core/i18n";
+import { useCallback, useState } from "react";
+//#region src/ui/hooks/create-radio-options-hook.ts
+/** Creates framework adapter mechanics shared by media-backed radio option hooks. */
+function createRadioOptionsHook({ name, feature, selector, createCore }) {
+	return function useRadioOptions(props) {
+		"use no memo";
+		const media = usePlayer(selector);
+		const t = useTranslator();
+		const [core] = useState(createCore);
+		core.setProps(props ?? {});
+		const setValue = useCallback((value) => core.selectValue(media, value), [core, media]);
+		if (!media) return null;
+		core.setMedia(media);
+		const state = core.getState();
+		const options = state.options.map((option) => {
+			const { label, labelParams, disabled, ...rest } = option;
+			return {
+				...rest,
+				label: translateText(label, t, labelParams),
+				disabled: state.disabled || disabled
+			};
+		});
+		return {
+			state,
+			label: translateText(core.getLabel(state), t, core.getLabelParams?.(state)),
+			value: state.value,
+			selectedLabel: options.find((option) => option.value === state.value)?.label ?? "",
+			options,
+			disabled: state.disabled,
+			hidden: state.hidden,
+			setValue
+		};
+	};
+}
+//#endregion
+export { createRadioOptionsHook };
+//# sourceMappingURL=create-radio-options-hook.js.map

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

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

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

@@ -1,4 +1,3 @@
-"use client";
 import { mergeProps } from "../../utils/merge-props.js";
 import { createButton } from "@videojs/core/dom";
 import { useCallback } from "react";

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":["~~'use~~ ~~client';\n\nimport~~ { 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":"~~;;;;;;;;;;;;;;;;;;;;;;;;;AAsCA~~,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';\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"}

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

@@ -1,4 +1,3 @@
-"use client";
 import { useCallback, useEffect, useMemo, useState } from "react";
 //#region src/ui/hooks/use-positioned-state.ts
 function usePositionedState(preferredState) {

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

	@@ -1 +1 @@
1	- {"version":3,"file":"use-positioned-state.js","names":[],"sources":["../../../../src/ui/hooks/use-positioned-state.ts"],"sourcesContent":["~~'use~~ ~~client';\n\nimport~~ { useCallback, useEffect, useMemo, useState } from 'react';\n\ninterface PopupState {\n open: boolean;\n side: string \| undefined;\n}\n\ninterface PositionedState<State extends PopupState> {\n state: State;\n preferredSide: State['side'];\n setPositionedSide: (side: State['side']) => void;\n}\n\nexport function usePositionedState<State extends PopupState>(preferredState: State): PositionedState<State> {\n const preferredSide = preferredState.side;\n const [position, setPosition] = useState<{ preferred: State['side']; side: State['side'] }>({\n preferred: preferredSide,\n side: preferredSide,\n });\n\n const side = preferredState.open && position.preferred === preferredSide ? position.side : preferredSide;\n\n const state = useMemo(\n () => (side === preferredSide ? preferredState : { ...preferredState, side }),\n [side, preferredState, preferredSide]\n );\n\n const setPositionedSide = useCallback(\n (nextSide: State['side']) =>\n setPosition((prev) =>\n prev.preferred === preferredSide && prev.side === nextSide ? prev : { preferred: preferredSide, side: nextSide }\n ),\n [preferredSide]\n );\n\n useEffect(() => {\n if (!preferredState.open) setPositionedSide(preferredSide);\n }, [preferredState.open, preferredSide, setPositionedSide]);\n\n return { state, preferredSide, setPositionedSide };\n}\n"],"mappings":"~~;;;AAeA~~,SAAgB,mBAA6C,gBAA+C;CAC1G,MAAM,gBAAgB,eAAe;CACrC,MAAM,CAAC,UAAU,eAAe,SAA4D;EAC1F,WAAW;EACX,MAAM;CACR,CAAC;CAED,MAAM,OAAO,eAAe,QAAQ,SAAS,cAAc,gBAAgB,SAAS,OAAO;CAE3F,MAAM,QAAQ,cACL,SAAS,gBAAgB,iBAAiB;EAAE,GAAG;EAAgB;CAAK,GAC3E;EAAC;EAAM;EAAgB;CAAa,CACtC;CAEA,MAAM,oBAAoB,aACvB,aACC,aAAa,SACX,KAAK,cAAc,iBAAiB,KAAK,SAAS,WAAW,OAAO;EAAE,WAAW;EAAe,MAAM;CAAS,CACjH,GACF,CAAC,aAAa,CAChB;CAEA,gBAAgB;EACd,IAAI,CAAC,eAAe,MAAM,kBAAkB,aAAa;CAC3D,GAAG;EAAC,eAAe;EAAM;EAAe;CAAiB,CAAC;CAE1D,OAAO;EAAE;EAAO;EAAe;CAAkB;AACnD"}
1	+ {"version":3,"file":"use-positioned-state.js","names":[],"sources":["../../../../src/ui/hooks/use-positioned-state.ts"],"sourcesContent":["import { useCallback, useEffect, useMemo, useState } from 'react';\n\ninterface PopupState {\n open: boolean;\n side: string \| undefined;\n}\n\ninterface PositionedState<State extends PopupState> {\n state: State;\n preferredSide: State['side'];\n setPositionedSide: (side: State['side']) => void;\n}\n\nexport function usePositionedState<State extends PopupState>(preferredState: State): PositionedState<State> {\n const preferredSide = preferredState.side;\n const [position, setPosition] = useState<{ preferred: State['side']; side: State['side'] }>({\n preferred: preferredSide,\n side: preferredSide,\n });\n\n const side = preferredState.open && position.preferred === preferredSide ? position.side : preferredSide;\n\n const state = useMemo(\n () => (side === preferredSide ? preferredState : { ...preferredState, side }),\n [side, preferredState, preferredSide]\n );\n\n const setPositionedSide = useCallback(\n (nextSide: State['side']) =>\n setPosition((prev) =>\n prev.preferred === preferredSide && prev.side === nextSide ? prev : { preferred: preferredSide, side: nextSide }\n ),\n [preferredSide]\n );\n\n useEffect(() => {\n if (!preferredState.open) setPositionedSide(preferredSide);\n }, [preferredState.open, preferredSide, setPositionedSide]);\n\n return { state, preferredSide, setPositionedSide };\n}\n"],"mappings":";;AAaA,SAAgB,mBAA6C,gBAA+C;CAC1G,MAAM,gBAAgB,eAAe;CACrC,MAAM,CAAC,UAAU,eAAe,SAA4D;EAC1F,WAAW;EACX,MAAM;CACR,CAAC;CAED,MAAM,OAAO,eAAe,QAAQ,SAAS,cAAc,gBAAgB,SAAS,OAAO;CAE3F,MAAM,QAAQ,cACL,SAAS,gBAAgB,iBAAiB;EAAE,GAAG;EAAgB;CAAK,GAC3E;EAAC;EAAM;EAAgB;CAAa,CACtC;CAEA,MAAM,oBAAoB,aACvB,aACC,aAAa,SACX,KAAK,cAAc,iBAAiB,KAAK,SAAS,WAAW,OAAO;EAAE,WAAW;EAAe,MAAM;CAAS,CACjH,GACF,CAAC,aAAa,CAChB;CAEA,gBAAgB;EACd,IAAI,CAAC,eAAe,MAAM,kBAAkB,aAAa;CAC3D,GAAG;EAAC,eAAe;EAAM;EAAe;CAAiB,CAAC;CAE1D,OAAO;EAAE;EAAO;EAAe;CAAkB;AACnD"}

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

@@ -1,11 +1,11 @@
-"use client";
+import { useOptionalPlayer } from "../../player/context.js";
 import { useLatestRef } from "../../utils/use-latest-ref.js";
 import { useDestroy } from "../../utils/use-destroy.js";
 import { useForceRender } from "../../utils/use-force-render.js";
-import { createSlider } from "@videojs/core/dom";
+import { createSlider, selectControls } from "@videojs/core/dom";
 import { useSnapshot } from "@videojs/store/react";
-import { useCallback, useLayoutEffect, useRef, useState } from "react";
-import { isRTL } from "@videojs/utils/dom";
+import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
+import { applyStyles, isRTL } from "@videojs/utils/dom";
 //#region src/ui/hooks/use-slider.ts
 /**
 * Manages slider input lifecycle for React.
@@ -16,6 +16,13 @@ import { isRTL } from "@videojs/utils/dom";
 */
 function useSlider(options) {
 	const optionsRef = useLatestRef(options);
+	const requestControlsLock = useOptionalPlayer(selectControls)?.requestControlsLock;
+	const releaseControlsLockRef = useRef(null);
+	const releaseControlsLock = useCallback(() => {
+		releaseControlsLockRef.current?.();
+		releaseControlsLockRef.current = null;
+	}, []);
+	useEffect(() => releaseControlsLock, [releaseControlsLock]);
 	const rootElementRef = useRef(null);
 	const thumbElementRef = useRef(null);
 	const forceRender = useForceRender();
@@ -33,25 +40,53 @@ function useSlider(options) {
 			adjustPercent: optionsRef.current.adjustPercent,
 			onValueChange: (percent) => optionsRef.current.onValueChange?.(percent),
 			onValueCommit: (percent) => optionsRef.current.onValueCommit?.(percent),
-			onDragStart: () => optionsRef.current.onDragStart?.(),
-			onDragEnd: () => optionsRef.current.onDragEnd?.()
+			onDragStart: () => {
+				releaseControlsLockRef.current ??= requestControlsLock?.() ?? null;
+				optionsRef.current.onDragStart?.();
+			},
+			onDragEnd: () => {
+				releaseControlsLock();
+				optionsRef.current.onDragEnd?.();
+			}
 		});
 	});
 	useDestroy(slider);
-	const input = useSnapshot(slider.input);
+	const interaction = useSnapshot(slider.input, ({ dragging, pointing, focused }) => ({
+		dragging,
+		pointing,
+		focused
+	}));
+	const input = {
+		...slider.input.current,
+		...interaction
+	};
 	const state = options.computeState(input);
 	useLayoutEffect(() => {
 		if (state.thumbAlignment === "edge" && rootElementRef.current && thumbElementRef.current) forceRender();
 	}, [state.thumbAlignment]);
+	const cssVars = options.getCSSVars(slider.adjustForAlignment(state));
+	const syncStyles = useCallback((element = rootElementRef.current) => {
+		if (!element) return;
+		const next = optionsRef.current.computeState(slider.input.current);
+		applyStyles(element, optionsRef.current.getCSSVars(slider.adjustForAlignment(next)));
+	}, [slider]);
+	useLayoutEffect(() => {
+		syncStyles();
+		return slider.input.subscribe(syncStyles);
+	}, [slider, syncStyles]);
+	const rootRef = useCallback((element) => {
+		rootElementRef.current = element;
+		syncStyles(element);
+	}, [syncStyles]);
+	const thumbRef = useCallback((element) => {
+		thumbElementRef.current = element;
+	}, []);
 	return {
 		state,
-		cssVars: options.getCSSVars(slider.adjustForAlignment(state)),
-		rootRef: useCallback((element) => {
-			rootElementRef.current = element;
-		}, []),
-		thumbRef: useCallback((element) => {
-			thumbElementRef.current = element;
-		}, []),
+		input: slider.input,
+		cssVars,
+		rootRef,
+		thumbRef,
 		rootProps: slider.rootProps,
 		rootStyle: slider.rootStyle,
 		thumbProps: slider.thumbProps

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":["~~'use~~ ~~client';\n\nimport~~ 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} from '@videojs/core/dom';\nimport { useSnapshot } from '@videojs/store/react';\nimport { isRTL } from '@videojs/utils/dom';\nimport { useCallback, useLayoutEffect, useRef, useState } from 'react';\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 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\n const rootElementRef = useRef<HTMLElement \| null>(null);\n const thumbElementRef = useRef<HTMLElement \| null>(null);\n const forceRender = useForceRender();\n\n // Lazy-init the slider handle. Stable across re-renders.\n const [slider] = useState<SliderApi>(() => {\n const stableOptions: SliderOptions = {\n getElement: () => rootElementRef.current!,\n getThumbElement: () => thumbElementRef.current,\n getOrientation: () => optionsRef.current.orientation ?? 'horizontal',\n isRTL: () => (rootElementRef.current ? isRTL(rootElementRef.current) : false),\n isDisabled: () => optionsRef.current.disabled ?? false,\n getPercent: () => optionsRef.current.getPercent(),\n getStepPercent: () => optionsRef.current.getStepPercent(),\n getLargeStepPercent: () => optionsRef.current.getLargeStepPercent(),\n 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: () => optionsRef.current.onDragStart?.(),\n onDragEnd: () => optionsRef.current.onDragEnd?.(),\n };\n\n return createSlider(stableOptions);\n });\n\n useDestroy(slider);\n\n // ~~Subscribe~~ to ~~slider~~ ~~input~~ state.\n const ~~input~~ = useSnapshot(slider.input);\n\n // Compute derived state from input + caller-provided projection.\n const state = options.computeState(input);\n\n // Force a synchronous re-render after mount so edge thumb alignment\n // can read DOM measurements from the now-populated element refs.\n useLayoutEffect(() => {\n if (state.thumbAlignment === 'edge' && rootElementRef.current && thumbElementRef.current) {\n forceRender();\n }\n }, [state.thumbAlignment]);\n\n // Adjust CSS var percents for edge thumb alignment using live DOM measurements.\n const cssVars = options.getCSSVars(slider.adjustForAlignment(state));\n\n // Ref callbacks for root and thumb elements.\n const rootRef = useCallback((element: HTMLElement \| null) => {\n rootElementRef.current = element;\n }, []);\n\n const thumbRef = useCallback((element: HTMLElement \| null) => {\n thumbElementRef.current = element;\n }, []);\n\n return {\n state,\n cssVars,\n rootRef,\n thumbRef,\n rootProps: slider.rootProps,\n 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;CAEvC,MAAM,iBAAiB,OAA2B,IAAI;CACtD,MAAM,kBAAkB,OAA2B,IAAI;CACvD,MAAM,cAAc,eAAe;CAGnC,MAAM,CAAC,UAAU,eAA0B;~~EAkBzC~~,OAAO,aAAa;~~GAhBlB~~,kBAAkB,eAAe;GACjC,uBAAuB,gBAAgB;GACvC,sBAAsB,WAAW,QAAQ,eAAe;GACxD,aAAc,eAAe,UAAU,MAAM,eAAe,OAAO,IAAI;GACvE,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,WAAW,QAAQ,cAAc;~~GACpD~~,iBAAiB,WAAW,QAAQ,YAAY;~~EAGlB~~,CAAC;CACnC,CAAC;CAED,WAAW,MAAM;~~CAGjB~~,MAAM,~~QAAQ~~,YAAY,OAAO,~~KAAK~~;~~CAGtC~~,MAAM,QAAQ,QAAQ,aAAa,KAAK;CAIxC,sBAAsB;EACpB,IAAI,MAAM,mBAAmB,UAAU,eAAe,WAAW,gBAAgB,SAC/E,YAAY;CAEhB,GAAG,CAAC,MAAM,cAAc,CAAC;~~CAczB~~,OAAO;~~EACL~~;~~EACA~~,~~SAbc~~,QAAQ,WAAW,OAAO,mBAAmB,~~KAAK~~,~~CAa1D~~;~~EACN~~,~~SAXc~~,~~aAAa~~,YAAgC;~~GAC3D~~,eAAe,UAAU;~~EAC3B~~,~~GAAG~~,CAAC,~~CASI~~;~~EACN~~,~~UARe~~,aAAa,YAAgC;~~GAC5D~~,gBAAgB,UAAU;~~EAC5B~~,GAAG,CAAC,~~CAMK~~;~~EACP~~,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, isRTL } 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 isRTL: () => (rootElementRef.current ? isRTL(rootElementRef.current) : false),\n isDisabled: () => optionsRef.current.disabled ?? false,\n getPercent: () => optionsRef.current.getPercent(),\n getStepPercent: () => optionsRef.current.getStepPercent(),\n getLargeStepPercent: () => optionsRef.current.getLargeStepPercent(),\n 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;EAwBzC,OAAO,aAAa;GAtBlB,kBAAkB,eAAe;GACjC,uBAAuB,gBAAgB;GACvC,sBAAsB,WAAW,QAAQ,eAAe;GACxD,aAAc,eAAe,UAAU,MAAM,eAAe,OAAO,IAAI;GACvE,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"}

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

@@ -1,4 +1,3 @@
-"use client";
 import { useContainer, usePlayer } from "../../player/context.js";
 import { createHotkey, isHotkeyToggleAction, resolveHotkeyAction } from "@videojs/core/dom";
 import { useEffect } from "react";

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

	@@ -1 +1 @@
1	- {"version":3,"file":"hotkey.js","names":[],"sources":["../../../../src/ui/hotkey/hotkey.tsx"],"sourcesContent":["~~'use~~ ~~client';\n\nimport~~ type { AnyPlayerStore } from '@videojs/core/dom';\nimport { createHotkey, type HotkeyActionName, isHotkeyToggleAction, resolveHotkeyAction } from '@videojs/core/dom';\nimport type { ReactNode } from 'react';\nimport { useEffect } from 'react';\n\nimport { useContainer, usePlayer } from '../../player/context';\n\nexport interface HotkeyProps {\n keys: string;\n action: HotkeyActionName \| (string & {});\n value?: number;\n disabled?: boolean;\n target?: 'player' \| 'document';\n}\n\nexport function Hotkey({ keys, action, value, disabled, target }: HotkeyProps): ReactNode {\n const store = usePlayer() as AnyPlayerStore;\n const container = useContainer();\n\n useEffect(() => {\n if (!container \|\| !keys \|\| !action \|\| disabled) return;\n\n const resolver = resolveHotkeyAction(action);\n if (!resolver) return;\n\n return createHotkey(container, {\n keys,\n action,\n value,\n target,\n disabled,\n repeatable: !isHotkeyToggleAction(action),\n onActivate: (_event, key) => {\n resolver({ store, key, value });\n },\n });\n }, [container, store, keys, action, value, disabled, target]);\n\n return null;\n}\n\nexport namespace Hotkey {\n export type Props = HotkeyProps;\n}\n\n/** @deprecated Use `HotkeyProps` instead. /\nexport type MediaHotkeyProps = HotkeyProps;\n\n/* @deprecated Use `Hotkey` instead. */\nexport const MediaHotkey = Hotkey;\n"],"mappings":"~~;;;;;AAiBA~~,SAAgB,OAAO,EAAE,MAAM,QAAQ,OAAO,UAAU,UAAkC;CACxF,MAAM,QAAQ,UAAU;CACxB,MAAM,YAAY,aAAa;CAE/B,gBAAgB;EACd,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,UAAU,UAAU;EAEhD,MAAM,WAAW,oBAAoB,MAAM;EAC3C,IAAI,CAAC,UAAU;EAEf,OAAO,aAAa,WAAW;GAC7B;GACA;GACA;GACA;GACA;GACA,YAAY,CAAC,qBAAqB,MAAM;GACxC,aAAa,QAAQ,QAAQ;IAC3B,SAAS;KAAE;KAAO;KAAK;IAAM,CAAC;GAChC;EACF,CAAC;CACH,GAAG;EAAC;EAAW;EAAO;EAAM;EAAQ;EAAO;EAAU;CAAM,CAAC;CAE5D,OAAO;AACT;;AAUA,MAAa,cAAc"}
1	+ {"version":3,"file":"hotkey.js","names":[],"sources":["../../../../src/ui/hotkey/hotkey.tsx"],"sourcesContent":["import type { AnyPlayerStore } from '@videojs/core/dom';\nimport { createHotkey, type HotkeyActionName, isHotkeyToggleAction, resolveHotkeyAction } from '@videojs/core/dom';\nimport type { ReactNode } from 'react';\nimport { useEffect } from 'react';\n\nimport { useContainer, usePlayer } from '../../player/context';\n\nexport interface HotkeyProps {\n keys: string;\n action: HotkeyActionName \| (string & {});\n value?: number;\n disabled?: boolean;\n target?: 'player' \| 'document';\n}\n\nexport function Hotkey({ keys, action, value, disabled, target }: HotkeyProps): ReactNode {\n const store = usePlayer() as AnyPlayerStore;\n const container = useContainer();\n\n useEffect(() => {\n if (!container \|\| !keys \|\| !action \|\| disabled) return;\n\n const resolver = resolveHotkeyAction(action);\n if (!resolver) return;\n\n return createHotkey(container, {\n keys,\n action,\n value,\n target,\n disabled,\n repeatable: !isHotkeyToggleAction(action),\n onActivate: (_event, key) => {\n resolver({ store, key, value });\n },\n });\n }, [container, store, keys, action, value, disabled, target]);\n\n return null;\n}\n\nexport namespace Hotkey {\n export type Props = HotkeyProps;\n}\n\n/** @deprecated Use `HotkeyProps` instead. /\nexport type MediaHotkeyProps = HotkeyProps;\n\n/* @deprecated Use `Hotkey` instead. */\nexport const MediaHotkey = Hotkey;\n"],"mappings":";;;;AAeA,SAAgB,OAAO,EAAE,MAAM,QAAQ,OAAO,UAAU,UAAkC;CACxF,MAAM,QAAQ,UAAU;CACxB,MAAM,YAAY,aAAa;CAE/B,gBAAgB;EACd,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,UAAU,UAAU;EAEhD,MAAM,WAAW,oBAAoB,MAAM;EAC3C,IAAI,CAAC,UAAU;EAEf,OAAO,aAAa,WAAW;GAC7B;GACA;GACA;GACA;GACA;GACA,YAAY,CAAC,qBAAqB,MAAM;GACxC,aAAa,QAAQ,QAAQ;IAC3B,SAAS;KAAE;KAAO;KAAK;IAAM,CAAC;GAChC;EACF,CAAC;CACH,GAAG;EAAC;EAAW;EAAO;EAAM;EAAQ;EAAO;EAAU;CAAM,CAAC;CAE5D,OAAO;AACT;;AAUA,MAAa,cAAc"}

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

@@ -1,4 +1,3 @@
-"use client";
 import { useContainer } from "../../player/context.js";
 import { getHotkeyCoordinator } from "@videojs/core/dom";
 import { useEffect, useState } from "react";

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":["~~'use~~ ~~client';\n\nimport~~ { 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":"~~;;;;;AAOA~~,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\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"}

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

@@ -1,4 +1,3 @@
-"use client";
 import { useContainer } from "../../player/context.js";
 import { useLatestRef } from "../../utils/use-latest-ref.js";
 import { createHotkey } from "@videojs/core/dom";

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":["~~'use~~ ~~client';\n\nimport~~ { 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":"~~;;;;;;AAgBA~~,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\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"}

package/dist/{dev/ui/input-indicators → default/ui/input-indicator}/use-indicator-visibility.js RENAMED Viewed

@@ -1,9 +1,8 @@
-"use client";
 import { useContainer } from "../../player/context.js";
 import { useLatestRef } from "../../utils/use-latest-ref.js";
 import { getIndicatorVisibilityCoordinator } from "@videojs/core/dom";
 import { useCallback, useEffect, useRef, useState } from "react";
-//#region src/ui/input-indicators/use-indicator-visibility.ts
+//#region src/ui/input-indicator/use-indicator-visibility.ts
 function useIndicatorVisibility(close) {
 	const container = useContainer();
 	const closeRef = useLatestRef(close);

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

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

package/dist/{dev/ui/input-indicators → default/ui/input-indicator}/use-input-action-subscription.js RENAMED Viewed

@@ -1,9 +1,8 @@
-"use client";
 import { useContainer, usePlayer } from "../../player/context.js";
 import { useLatestRef } from "../../utils/use-latest-ref.js";
 import { getMediaSnapshot, subscribeToInputActions } from "@videojs/core/dom";
 import { useEffect } from "react";
-//#region src/ui/input-indicators/use-input-action-subscription.ts
+//#region src/ui/input-indicator/use-input-action-subscription.ts
 function useInputActionSubscription(callback) {
 	const container = useContainer();
 	const store = usePlayer();

package/dist/default/ui/input-indicator/use-input-action-subscription.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"use-input-action-subscription.js","names":[],"sources":["../../../../src/ui/input-indicator/use-input-action-subscription.ts"],"sourcesContent":["import type { InputActionEvent, MediaSnapshot } from '@videojs/core';\nimport { getMediaSnapshot, subscribeToInputActions } from '@videojs/core/dom';\nimport { useEffect } from 'react';\n\nimport { useContainer, usePlayer } from '../../player/context';\nimport { useLatestRef } from '../../utils/use-latest-ref';\n\nexport function useInputActionSubscription(callback: (event: InputActionEvent, snapshot: MediaSnapshot) => void): void {\n const container = useContainer();\n const store = usePlayer();\n const callbackRef = useLatestRef(callback);\n const storeRef = useLatestRef(store);\n\n useEffect(() => {\n if (!container) return;\n\n return subscribeToInputActions(container, (event) => {\n callbackRef.current(event, getMediaSnapshot(storeRef.current));\n });\n }, [container]);\n}\n"],"mappings":";;;;;AAOA,SAAgB,2BAA2B,UAA4E;CACrH,MAAM,YAAY,aAAa;CAC/B,MAAM,QAAQ,UAAU;CACxB,MAAM,cAAc,aAAa,QAAQ;CACzC,MAAM,WAAW,aAAa,KAAK;CAEnC,gBAAgB;EACd,IAAI,CAAC,WAAW;EAEhB,OAAO,wBAAwB,YAAY,UAAU;GACnD,YAAY,QAAQ,OAAO,iBAAiB,SAAS,OAAO,CAAC;EAC/D,CAAC;CACH,GAAG,CAAC,SAAS,CAAC;AAChB"}

package/dist/default/ui/{input-indicators → input-indicator}/use-input-indicator-root.js RENAMED Viewed

@@ -1,10 +1,9 @@
-"use client";
 import { useDestroy } from "../../utils/use-destroy.js";
 import { useIndicatorVisibility } from "./use-indicator-visibility.js";
 import { useInputActionSubscription } from "./use-input-action-subscription.js";
 import { useRenderedIndicatorState } from "./use-rendered-indicator-state.js";
 import { useState, useSyncExternalStore } from "react";
-//#region src/ui/input-indicators/use-input-indicator-root.ts
+//#region src/ui/input-indicator/use-input-indicator-root.ts
 function useInputIndicatorRoot(createCore, props, options) {
 	const [core] = useState(createCore);
 	useDestroy(core);

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

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

package/dist/{dev/ui/input-indicators → default/ui/input-indicator}/use-rendered-indicator-state.js RENAMED Viewed

@@ -1,9 +1,8 @@
-"use client";
 import { useDestroy } from "../../utils/use-destroy.js";
 import { createTransition } from "@videojs/core/dom";
 import { useLayoutEffect, useRef, useState, useSyncExternalStore } from "react";
 import { getRenderedIndicatorState, isIndicatorPresent } from "@videojs/core";
-//#region src/ui/input-indicators/use-rendered-indicator-state.ts
+//#region src/ui/input-indicator/use-rendered-indicator-state.ts
 function useRenderedIndicatorState(currentState, options = {}) {
 	const elementRef = useRef(null);
 	const currentStateRef = useRef(currentState);

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

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

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

@@ -1,4 +1,3 @@
-"use client";
 import { useTranslator } from "../../i18n/context.js";
 import { usePlayer } from "../../player/context.js";
 import { renderElement } from "../../utils/use-render.js";

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":["~~'use~~ ~~client';\n\nimport~~ { 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":"~~;;;;;;;;;;;AAcA~~,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\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"}

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

@@ -1,4 +1,3 @@
-"use client";
 import { createContext, useContext } from "react";
 //#region src/ui/menu/context.tsx
 const MenuContext = createContext(null);
@@ -11,11 +10,6 @@ function useMenuContext() {
 function useOptionalMenuContext() {
 	return useContext(MenuContext);
 }
-const SubMenuContext = createContext(null);
-const SubMenuContextProvider = SubMenuContext.Provider;
-function useSubMenuContext() {
-	return useContext(SubMenuContext);
-}
 const MenuGroupContext = createContext(null);
 const MenuGroupContextProvider = MenuGroupContext.Provider;
 function useMenuGroupContext() {
@@ -33,12 +27,7 @@ const MenuTriggerChildContextProvider = MenuTriggerChildContext.Provider;
 function useOptionalMenuTriggerChildContext() {
 	return useContext(MenuTriggerChildContext);
 }
-const MenuItemSettingContext = createContext(null);
-const MenuItemSettingContextProvider = MenuItemSettingContext.Provider;
-function useOptionalMenuItemSettingContext() {
-	return useContext(MenuItemSettingContext);
-}
 //#endregion
-export { MenuContextProvider, MenuGroupContextProvider, MenuItemSettingContextProvider, MenuRadioGroupContextProvider, MenuTriggerChildContextProvider, SubMenuContextProvider, useMenuContext, useMenuGroupContext, useMenuRadioGroupContext, useOptionalMenuContext, useOptionalMenuItemSettingContext, useOptionalMenuTriggerChildContext, useSubMenuContext };
+export { MenuContextProvider, MenuGroupContextProvider, MenuRadioGroupContextProvider, MenuTriggerChildContextProvider, useMenuContext, useMenuGroupContext, useMenuRadioGroupContext, useOptionalMenuContext, useOptionalMenuTriggerChildContext };
 //# sourceMappingURL=context.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"context.js","names":[],"sources":["../../../../src/ui/menu/context.tsx"],"sourcesContent":["~~'use~~ ~~client';\n\nimport~~ type { MenuCore, MenuState, StateAttrMap } from '@videojs/core';\nimport type { MediaContainer, MenuApi, PositioningBoundary } from '@videojs/core/dom';\nimport { createContext, useContext } from 'react';\n\~~nimport type { MenuItemSettingType } from './menu-item-type';\n\~~nexport interface MenuContextValue {\n core: MenuCore;\n menu: MenuApi;\n state: MenuState;\n preferredSide: MenuState['side'];\n setPositionedSide: (side: MenuState['side']) => void;\n stateAttrMap: StateAttrMap<MenuState>;\n contentId: string;\n anchorName: string;\n boundary: PositioningBoundary;\n container: MediaContainer \| null;\n /** ID of the currently visible submenu, or null when at root view. /\n activeSubMenuId: string \| null;\n /* Triggerer ID of the active submenu entry (for focus restoration on pop). /\n activeSubMenuTriggerId: string \| null;\n /* Direction of the most recent navigation. /\n navigationDirection: 'forward' \| 'back';\n /* Push a submenu onto the navigation stack. /\n push: (menuId: string, triggerId: string) => void;\n /* Pop the current submenu from the navigation stack. /\n pop: () => void;\n}\n\nconst MenuContext = createContext<MenuContextValue \| null>(null);\n\nexport const MenuContextProvider = MenuContext.Provider;\n\nexport function useMenuContext(): MenuContextValue {\n const ctx = useContext(MenuContext);\n if (!ctx) throw new Error('Menu compound components must be used within a Menu.Root');\n return ctx;\n}\n\nexport function useOptionalMenuContext(): MenuContextValue \| null {\n return useContext(MenuContext);\n}\n\n// ---------------------------------------------------------------------------\n// Sub-menu identity context — provided by a nested Menu.Root so child parts\n// (Trigger, Content) can read the submenu ID and access the parent menu for\n// push/pop and item registration.\n// ---------------------------------------------------------------------------\n\nexport interface SubMenuContextValue {\n /* Stable ID for this submenu (matches the contentId of the nested Root). /\n subMenuId: string;\n /* The parent menu's context — used by Trigger to register and push. */\n parentMenu: MenuContextValue;\n}\n\nconst SubMenuContext = createContext<SubMenuContextValue \| null>(null);\n\nexport const SubMenuContextProvider = SubMenuContext.Provider;\n\nexport function useSubMenuContext(): SubMenuContextValue \| null {\n return useContext(SubMenuContext);\n}\n\n// ---------------------------------------------------------------------------\n// Group context — shared by group-like parts and MenuGroupLabel\n// ---------------------------------------------------------------------------\n\nexport interface MenuGroupContextValue {\n registerLabel: (id: string) => () => void;\n}\n\nconst MenuGroupContext = createContext<MenuGroupContextValue \| null>(null);\n\nexport const MenuGroupContextProvider = MenuGroupContext.Provider;\n\nexport function useMenuGroupContext(): MenuGroupContextValue \| null {\n return useContext(MenuGroupContext);\n}\n\n// ---------------------------------------------------------------------------\n// Radio group context — shared between MenuRadioGroup and MenuRadioItem\n// ---------------------------------------------------------------------------\n\nexport interface MenuRadioGroupContextValue {\n value: string;\n onValueChange: (value: string) => void;\n}\n\nconst MenuRadioGroupContext = createContext<MenuRadioGroupContextValue \| null>(null);\n\nexport const MenuRadioGroupContextProvider = MenuRadioGroupContext.Provider;\n\nexport function useMenuRadioGroupContext(): MenuRadioGroupContextValue {\n const ctx = useContext(MenuRadioGroupContext);\n if (!ctx) throw new Error('Menu.RadioItem must be used within a Menu.RadioGroup');\n return ctx;\n}\n\n// ---------------------------------------------------------------------------\n// Root trigger render context — provided by Menu.Trigger for render children.\n// ---------------------------------------------------------------------------\n\nconst MenuTriggerChildContext = createContext(false);\n\nexport const MenuTriggerChildContextProvider = MenuTriggerChildContext.Provider;\n\nexport function useOptionalMenuTriggerChildContext(): boolean {\n return useContext(MenuTriggerChildContext);\n}\n\n// ---------------------------------------------------------------------------\n// Menu item setting context — provided by Menu.Item or Menu.Trigger when `type`\n// is set; consumed by Menu.ItemValue.\n// ---------------------------------------------------------------------------\n\nexport interface MenuItemSettingContextValue {\n type: MenuItemSettingType;\n label: string;\n availability: 'available' \| 'unavailable';\n}\n\nconst MenuItemSettingContext = createContext<MenuItemSettingContextValue \| null>(null);\n\nexport const MenuItemSettingContextProvider = MenuItemSettingContext.Provider;\n\nexport function useMenuItemSettingContext(): MenuItemSettingContextValue {\n const ctx = useContext(MenuItemSettingContext);\n if (!ctx) throw new Error('Menu.ItemValue must be used within a Menu.Item or Menu.Trigger with `type` set');\n return ctx;\n}\n\nexport function useOptionalMenuItemSettingContext(): MenuItemSettingContextValue \| null {\n return useContext(MenuItemSettingContext);\n}\n"],"mappings":"~~;;;AA+BA~~,MAAM,cAAc,cAAuC,IAAI;AAE/D,MAAa,sBAAsB,YAAY;AAE/C,SAAgB,iBAAmC;CACjD,MAAM,MAAM,WAAW,WAAW;CAClC,IAAI,CAAC,KAAK,MAAM,IAAI,MAAM,0DAA0D;CACpF,OAAO;AACT;AAEA,SAAgB,yBAAkD;CAChE,OAAO,WAAW,WAAW;AAC/B;~~AAeA,MAAM,iBAAiB,cAA0C,IAAI;AAErE,MAAa,yBAAyB,eAAe;AAErD,SAAgB,oBAAgD;CAC9D,OAAO,WAAW,cAAc;AAClC;~~AAUA,MAAM,mBAAmB,cAA4C,IAAI;AAEzE,MAAa,2BAA2B,iBAAiB;AAEzD,SAAgB,sBAAoD;CAClE,OAAO,WAAW,gBAAgB;AACpC;AAWA,MAAM,wBAAwB,cAAiD,IAAI;AAEnF,MAAa,gCAAgC,sBAAsB;AAEnE,SAAgB,2BAAuD;CACrE,MAAM,MAAM,WAAW,qBAAqB;CAC5C,IAAI,CAAC,KAAK,MAAM,IAAI,MAAM,sDAAsD;CAChF,OAAO;AACT;AAMA,MAAM,0BAA0B,cAAc,KAAK;AAEnD,MAAa,kCAAkC,wBAAwB;AAEvE,SAAgB,qCAA8C;CAC5D,OAAO,WAAW,uBAAuB;AAC3C~~;AAaA,MAAM,yBAAyB,cAAkD,IAAI;AAErF,MAAa,iCAAiC,uBAAuB;AAQrE,SAAgB,oCAAwE;CACtF,OAAO,WAAW,sBAAsB;AAC1C~~"}
1	+ {"version":3,"file":"context.js","names":[],"sources":["../../../../src/ui/menu/context.tsx"],"sourcesContent":["import type { MenuCore, MenuState, StateAttrMap } from '@videojs/core';\nimport type { MediaContainer, MenuApi, PositioningBoundary } from '@videojs/core/dom';\nimport { createContext, useContext } from 'react';\n\nexport interface MenuContextValue {\n core: MenuCore;\n menu: MenuApi;\n parent: MenuContextValue \| null;\n state: MenuState;\n preferredSide: MenuState['side'];\n setPositionedSide: (side: MenuState['side']) => void;\n stateAttrMap: StateAttrMap<MenuState>;\n contentId: string;\n anchorName: string;\n boundary: PositioningBoundary;\n container: MediaContainer \| null;\n}\n\nconst MenuContext = createContext<MenuContextValue \| null>(null);\n\nexport const MenuContextProvider = MenuContext.Provider;\n\nexport function useMenuContext(): MenuContextValue {\n const ctx = useContext(MenuContext);\n if (!ctx) throw new Error('Menu compound components must be used within a Menu.Root');\n return ctx;\n}\n\nexport function useOptionalMenuContext(): MenuContextValue \| null {\n return useContext(MenuContext);\n}\n\n// ---------------------------------------------------------------------------\n// Group context — shared by group-like parts and MenuGroupLabel\n// ---------------------------------------------------------------------------\n\nexport interface MenuGroupContextValue {\n registerLabel: (id: string) => () => void;\n}\n\nconst MenuGroupContext = createContext<MenuGroupContextValue \| null>(null);\n\nexport const MenuGroupContextProvider = MenuGroupContext.Provider;\n\nexport function useMenuGroupContext(): MenuGroupContextValue \| null {\n return useContext(MenuGroupContext);\n}\n\n// ---------------------------------------------------------------------------\n// Radio group context — shared between MenuRadioGroup and MenuRadioItem\n// ---------------------------------------------------------------------------\n\nexport interface MenuRadioGroupContextValue {\n value: string;\n onValueChange: (value: string) => void;\n}\n\nconst MenuRadioGroupContext = createContext<MenuRadioGroupContextValue \| null>(null);\n\nexport const MenuRadioGroupContextProvider = MenuRadioGroupContext.Provider;\n\nexport function useMenuRadioGroupContext(): MenuRadioGroupContextValue {\n const ctx = useContext(MenuRadioGroupContext);\n if (!ctx) throw new Error('Menu.RadioItem must be used within a Menu.RadioGroup');\n return ctx;\n}\n\n// ---------------------------------------------------------------------------\n// Root trigger render context — provided by Menu.Trigger for render children.\n// ---------------------------------------------------------------------------\n\nconst MenuTriggerChildContext = createContext(false);\n\nexport const MenuTriggerChildContextProvider = MenuTriggerChildContext.Provider;\n\nexport function useOptionalMenuTriggerChildContext(): boolean {\n return useContext(MenuTriggerChildContext);\n}\n"],"mappings":";;AAkBA,MAAM,cAAc,cAAuC,IAAI;AAE/D,MAAa,sBAAsB,YAAY;AAE/C,SAAgB,iBAAmC;CACjD,MAAM,MAAM,WAAW,WAAW;CAClC,IAAI,CAAC,KAAK,MAAM,IAAI,MAAM,0DAA0D;CACpF,OAAO;AACT;AAEA,SAAgB,yBAAkD;CAChE,OAAO,WAAW,WAAW;AAC/B;AAUA,MAAM,mBAAmB,cAA4C,IAAI;AAEzE,MAAa,2BAA2B,iBAAiB;AAEzD,SAAgB,sBAAoD;CAClE,OAAO,WAAW,gBAAgB;AACpC;AAWA,MAAM,wBAAwB,cAAiD,IAAI;AAEnF,MAAa,gCAAgC,sBAAsB;AAEnE,SAAgB,2BAAuD;CACrE,MAAM,MAAM,WAAW,qBAAqB;CAC5C,IAAI,CAAC,KAAK,MAAM,IAAI,MAAM,sDAAsD;CAChF,OAAO;AACT;AAMA,MAAM,0BAA0B,cAAc,KAAK;AAEnD,MAAa,kCAAkC,wBAAwB;AAEvE,SAAgB,qCAA8C;CAC5D,OAAO,WAAW,uBAAuB;AAC3C"}

package/dist/default/ui/menu/index.parts.js CHANGED Viewed

@@ -1,36 +1,30 @@
 import { __exportAll } from "../../_virtual/_rolldown/runtime.js";
-import { MenuBack } from "./menu-back.js";
+import { MenuRadioGroup } from "./menu-radio-group.js";
 import { MenuCheckboxItem } from "./menu-checkbox-item.js";
 import { MenuContent } from "./menu-content.js";
 import { MenuGroup } from "./menu-group.js";
 import { MenuGroupLabel } from "./menu-group-label.js";
 import { MenuItem } from "./menu-item.js";
 import { MenuItemIndicator } from "./menu-item-indicator.js";
-import { MenuItemValue } from "./menu-item-value.js";
-import { MenuRadioGroup } from "./menu-radio-group.js";
 import { MenuRadioItem } from "./menu-radio-item.js";
 import { MenuRoot } from "./menu-root.js";
 import { MenuSeparator } from "./menu-separator.js";
 import { MenuTrigger } from "./menu-trigger.js";
-import { MenuView } from "./menu-view.js";
 //#region src/ui/menu/index.parts.ts
 var index_parts_exports = /* @__PURE__ */ __exportAll({
-	Back: () => MenuBack,
 	CheckboxItem: () => MenuCheckboxItem,
 	Content: () => MenuContent,
 	Group: () => MenuGroup,
 	GroupLabel: () => MenuGroupLabel,
 	Item: () => MenuItem,
 	ItemIndicator: () => MenuItemIndicator,
-	ItemValue: () => MenuItemValue,
 	RadioGroup: () => MenuRadioGroup,
 	RadioItem: () => MenuRadioItem,
 	Root: () => MenuRoot,
 	Separator: () => MenuSeparator,
-	Trigger: () => MenuTrigger,
-	View: () => MenuView
+	Trigger: () => MenuTrigger
 });
 //#endregion
-export { MenuBack as Back, MenuCheckboxItem as CheckboxItem, MenuContent as Content, MenuGroup as Group, MenuGroupLabel as GroupLabel, MenuItem as Item, MenuItemIndicator as ItemIndicator, MenuItemValue as ItemValue, MenuRadioGroup as RadioGroup, MenuRadioItem as RadioItem, MenuRoot as Root, MenuSeparator as Separator, MenuTrigger as Trigger, MenuView as View, index_parts_exports };
+export { MenuCheckboxItem as CheckboxItem, MenuContent as Content, MenuGroup as Group, MenuGroupLabel as GroupLabel, MenuItem as Item, MenuItemIndicator as ItemIndicator, MenuRadioGroup as RadioGroup, MenuRadioItem as RadioItem, MenuRoot as Root, MenuSeparator as Separator, MenuTrigger as Trigger, index_parts_exports };
 //# sourceMappingURL=index.parts.js.map

package/dist/default/ui/menu/index.parts.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.parts.js","names":[],"sources":["../../../../src/ui/menu/index.parts.ts"],"sourcesContent":["export { ~~MenuBack as Back, type MenuBackProps as BackProps } from './menu-back';\nexport {~~\n MenuCheckboxItem as CheckboxItem,\n type MenuCheckboxItemProps as CheckboxItemProps,\n} from './menu-checkbox-item';\nexport { MenuContent as Content, type MenuContentProps as ContentProps } from './menu-content';\nexport { MenuGroup as Group, type MenuGroupProps as GroupProps } from './menu-group';\nexport { MenuGroupLabel as GroupLabel, type MenuGroupLabelProps as GroupLabelProps } from './menu-group-label';\nexport { MenuItem as Item, type MenuItemProps as ItemProps } from './menu-item';\nexport {\n MenuItemIndicator as ItemIndicator,\n type MenuItemIndicatorProps as ItemIndicatorProps,\n} from './menu-item-indicator';\nexport { ~~MenuItemValue as ItemValue, type MenuItemValueProps as ItemValueProps } from './menu-item-value';\nexport {~~ MenuRadioGroup as RadioGroup, type MenuRadioGroupProps as RadioGroupProps } from './menu-radio-group';\nexport { MenuRadioItem as RadioItem, type MenuRadioItemProps as RadioItemProps } from './menu-radio-item';\nexport { MenuRoot as Root, type MenuRootProps as RootProps } from './menu-root';\nexport { MenuSeparator as Separator, type MenuSeparatorProps as SeparatorProps } from './menu-separator';\nexport { MenuTrigger as Trigger, type MenuTriggerProps as TriggerProps } from './menu-trigger';\~~nexport { MenuView as View, type MenuViewProps as ViewProps } from './menu-view';\~~n"],"mappings":""}
1	+ {"version":3,"file":"index.parts.js","names":[],"sources":["../../../../src/ui/menu/index.parts.ts"],"sourcesContent":["export {\n MenuCheckboxItem as CheckboxItem,\n type MenuCheckboxItemProps as CheckboxItemProps,\n} from './menu-checkbox-item';\nexport { MenuContent as Content, type MenuContentProps as ContentProps } from './menu-content';\nexport { MenuGroup as Group, type MenuGroupProps as GroupProps } from './menu-group';\nexport { MenuGroupLabel as GroupLabel, type MenuGroupLabelProps as GroupLabelProps } from './menu-group-label';\nexport { MenuItem as Item, type MenuItemProps as ItemProps } from './menu-item';\nexport {\n MenuItemIndicator as ItemIndicator,\n type MenuItemIndicatorProps as ItemIndicatorProps,\n} from './menu-item-indicator';\nexport { MenuRadioGroup as RadioGroup, type MenuRadioGroupProps as RadioGroupProps } from './menu-radio-group';\nexport { MenuRadioItem as RadioItem, type MenuRadioItemProps as RadioItemProps } from './menu-radio-item';\nexport { MenuRoot as Root, type MenuRootProps as RootProps } from './menu-root';\nexport { MenuSeparator as Separator, type MenuSeparatorProps as SeparatorProps } from './menu-separator';\nexport { MenuTrigger as Trigger, type MenuTriggerProps as TriggerProps } from './menu-trigger';\n"],"mappings":""}

package/dist/default/ui/menu/menu-checkbox-item.js CHANGED Viewed

@@ -1,4 +1,3 @@
-"use client";
 import { renderElement } from "../../utils/use-render.js";
 import { useMenuContext } from "./context.js";
 import { forwardRef, useCallback, useEffect, useRef } from "react";
@@ -25,7 +24,10 @@ const MenuCheckboxItem = forwardRef(function MenuCheckboxItem({ render, classNam
 	const handlePointerEnter = useCallback(() => {
 		const element = elementRef.current;
 		if (!element || disabled) return;
-		menu.highlight(element, { focus: false });
+		menu.highlight(element, {
+			focus: false,
+			pointer: true
+		});
 	}, [menu, disabled]);
 	return renderElement("div", {
 		render,