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

package/dist/default/ui/menu/menu-root.js

@@ -2,9 +2,9 @@
 import { useOptionalContainer, useOptionalPopupGroup } from "../../player/context.js";
 import { useLatestRef } from "../../utils/use-latest-ref.js";
 import { useDestroy } from "../../utils/use-destroy.js";
+import { MenuContextProvider, SubMenuContextProvider, useOptionalMenuContext } from "./context.js";
 import { useSafeId } from "../../utils/use-safe-id.js";
 import { useOptionalControlsContext } from "../controls/context.js";
-import { MenuContextProvider, SubMenuContextProvider, useOptionalMenuContext } from "./context.js";
 import { createMenu, createTransition } from "@videojs/core/dom";
 import { useSnapshot } from "@videojs/store/react";
 import { useEffect, useMemo, useState } from "react";

package/dist/default/ui/menu/menu-separator.js

@@ -5,14 +5,13 @@ import { forwardRef } from "react";
 //#region src/ui/menu/menu-separator.tsx
 /** Visual divider between groups of items. Renders a `<div>` with `role="separator"`. */
 const MenuSeparator = forwardRef(function MenuSeparator({ render, className, style, ...elementProps }, forwardedRef) {
-	const { state, stateAttrMap } = useMenuContext();
+	const { state } = useMenuContext();
 	return renderElement("div", {
 		render,
 		className,
 		style
 	}, {
 		state,
-		stateAttrMap,
 		ref: [forwardedRef],
 		props: [{ role: "separator" }, elementProps]
 	});

package/dist/default/ui/menu/menu-separator.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu-separator.js","names":[],"sources":["../../../../src/ui/menu/menu-separator.tsx"],"sourcesContent":["'use client';\n\nimport type { MenuState } from '@videojs/core';\nimport { forwardRef } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { useMenuContext } from './context';\n\nexport interface MenuSeparatorProps extends UIComponentProps<'div', MenuState> {}\n\n/** Visual divider between groups of items. Renders a `<div>` with `role=\"separator\"`. */\nexport const MenuSeparator = forwardRef<HTMLDivElement, MenuSeparatorProps>(function MenuSeparator(\n  { render, className, style, ...elementProps },\n  forwardedRef\n) {\n  const { state, stateAttrMap } = useMenuContext();\n\n  return renderElement(\n    'div',\n    { render, className, style },\n    {\n      state,\n      stateAttrMap,\n      ref: [forwardedRef],\n      props: [{ role: 'separator' as const }, elementProps],\n    }\n  );\n});\n\nexport namespace MenuSeparator {\n  export type Props = MenuSeparatorProps;\n  export type State = MenuState;\n}\n"],"mappings":";;;;;;AAYA,MAAa,gBAAgB,WAA+C,SAAS,cACnF,EAAE,QAAQ,WAAW,OAAO,GAAG,gBAC/B,cACA;CACA,MAAM,EAAE,OAAO,iBAAiB,gBAAgB;AAEhD,QAAO,cACL,OACA;EAAE;EAAQ;EAAW;EAAO,EAC5B;EACE;EACA;EACA,KAAK,CAAC,aAAa;EACnB,OAAO,CAAC,EAAE,MAAM,aAAsB,EAAE,aAAa;EACtD,CACF;EACD"}
+{"version":3,"file":"menu-separator.js","names":[],"sources":["../../../../src/ui/menu/menu-separator.tsx"],"sourcesContent":["'use client';\n\nimport type { MenuState } from '@videojs/core';\nimport { forwardRef } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { useMenuContext } from './context';\n\nexport interface MenuSeparatorProps extends UIComponentProps<'div', MenuState> {}\n\n/** Visual divider between groups of items. Renders a `<div>` with `role=\"separator\"`. */\nexport const MenuSeparator = forwardRef<HTMLDivElement, MenuSeparatorProps>(function MenuSeparator(\n  { render, className, style, ...elementProps },\n  forwardedRef\n) {\n  const { state } = useMenuContext();\n\n  return renderElement(\n    'div',\n    { render, className, style },\n    {\n      state,\n      ref: [forwardedRef],\n      props: [{ role: 'separator' as const }, elementProps],\n    }\n  );\n});\n\nexport namespace MenuSeparator {\n  export type Props = MenuSeparatorProps;\n  export type State = MenuState;\n}\n"],"mappings":";;;;;;AAYA,MAAa,gBAAgB,WAA+C,SAAS,cACnF,EAAE,QAAQ,WAAW,OAAO,GAAG,gBAC/B,cACA;CACA,MAAM,EAAE,UAAU,gBAAgB;AAElC,QAAO,cACL,OACA;EAAE;EAAQ;EAAW;EAAO,EAC5B;EACE;EACA,KAAK,CAAC,aAAa;EACnB,OAAO,CAAC,EAAE,MAAM,aAAsB,EAAE,aAAa;EACtD,CACF;EACD"}

package/dist/default/ui/menu/menu-trigger.js

@@ -1,9 +1,11 @@
 "use client";
 import { renderElement } from "../../utils/use-render.js";
+import { MenuTriggerChildContextProvider, useMenuContext, useOptionalMenuItemSettingContext, useSubMenuContext } from "./context.js";
 import { useSafeId } from "../../utils/use-safe-id.js";
-import { useMenuContext, useSubMenuContext } from "./context.js";
+import { MenuItemSettingProvider } from "./menu-item-setting-provider.js";
 import { isMenuNavigationKey } from "@videojs/core/dom";
-import { forwardRef, useCallback, useEffect, useRef } from "react";
+import { forwardRef, useCallback, useEffect, useMemo, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
 import { supportsAnchorPositioning } from "@videojs/utils/dom";
 //#region src/ui/menu/menu-trigger.tsx
 function toUIKeyboardEvent(event) {
@@ -31,8 +33,8 @@ function preventMenuKeyDefault(event) {
 * When inside a parent menu (as a submenu trigger), renders as a `<div role="menuitem">`
 * that pushes the submenu on click or ArrowRight.
 */
-const MenuTrigger = forwardRef(function MenuTrigger({ render, className, style, disabled, onClick, onKeyDown, ...elementProps }, forwardedRef) {
-	const { core, menu, state, stateAttrMap, anchorName, contentId } = useMenuContext();
+const MenuTrigger = forwardRef(function MenuTrigger({ render, className, style, disabled, type, onClick, onKeyDown, ...elementProps }, forwardedRef) {
+	const { core, menu, state, anchorName, contentId } = useMenuContext();
 	const subMenuCtx = useSubMenuContext();
 	const isSubMenuTrigger = subMenuCtx !== null;
 	const elementRef = useRef(null);
@@ -64,11 +66,16 @@ const MenuTrigger = forwardRef(function MenuTrigger({ render, className, style,
 	}, [onClick, openSubMenu]);
 	const handleSubMenuKeyDown = useCallback((event) => {
 		onKeyDown?.(event);
+		if (disabled) return;
 		if (event.key === "ArrowRight") {
 			event.preventDefault();
 			openSubMenu();
 		}
-	}, [onKeyDown, openSubMenu]);
+	}, [
+		disabled,
+		onKeyDown,
+		openSubMenu
+	]);
 	const handlePointerEnter = useCallback(() => {
 		const element = elementRef.current;
 		if (!element || disabled || !parentMenuApi) return;
@@ -78,13 +85,79 @@ const MenuTrigger = forwardRef(function MenuTrigger({ render, className, style,
 		menu.setTriggerElement(element);
 		if (element && supportsAnchorPositioning()) element.style.setProperty("anchor-name", `--${anchorName}`);
 	}, [menu, anchorName]);
-	if (isSubMenuTrigger) return renderElement("div", {
+	const rootTriggerProps = useMemo(() => {
+		if (!disabled) return menu.triggerProps;
+		return {
+			onClick: (event) => {
+				event.preventDefault();
+			},
+			onKeyDown: (event) => {
+				const keyboardEvent = toUIKeyboardEvent(event);
+				if (event.key === "Enter" || event.key === " " || isMenuNavigationKey(keyboardEvent)) event.preventDefault();
+			}
+		};
+	}, [disabled, menu.triggerProps]);
+	if (isSubMenuTrigger) {
+		const trigger = /* @__PURE__ */ jsx(MenuTriggerSubmenu, {
+			render,
+			className,
+			style,
+			disabled,
+			elementProps,
+			forwardedRef,
+			elementRef,
+			triggerId,
+			parentState,
+			isExpanded,
+			onSubMenuClick: handleSubMenuClick,
+			onSubMenuKeyDown: handleSubMenuKeyDown,
+			onPointerEnter: handlePointerEnter
+		});
+		if (!type) return trigger;
+		return /* @__PURE__ */ jsx(MenuItemSettingProvider, {
+			type,
+			children: trigger
+		});
+	}
+	const rootTrigger = /* @__PURE__ */ jsx(MenuTriggerChildContextProvider, {
+		value: true,
+		children: renderElement("button", {
+			render,
+			className,
+			style
+		}, {
+			state,
+			ref: [forwardedRef, triggerRef],
+			props: [
+				{
+					type: "button",
+					...core.getTriggerAttrs(state, contentId)
+				},
+				disabled ? {
+					disabled: true,
+					"aria-disabled": "true"
+				} : void 0,
+				state.open ? { onKeyDownCapture: preventMenuKeyDefault } : void 0,
+				rootTriggerProps,
+				elementProps
+			]
+		})
+	});
+	if (!type) return rootTrigger;
+	return /* @__PURE__ */ jsx(MenuItemSettingProvider, {
+		type,
+		children: rootTrigger
+	});
+});
+function MenuTriggerSubmenu({ render, className, style, disabled, elementProps, forwardedRef, elementRef, triggerId, parentState, isExpanded, onSubMenuClick, onSubMenuKeyDown, onPointerEnter }) {
+	const setting = useOptionalMenuItemSettingContext();
+	const settingAttrs = setting ? { "data-availability": setting.availability } : void 0;
+	return renderElement("div", {
 		render,
 		className,
 		style
 	}, {
 		state: parentState,
-		stateAttrMap,
 		ref: [forwardedRef, elementRef],
 		props: [{
 			id: triggerId,
@@ -93,31 +166,14 @@ const MenuTrigger = forwardRef(function MenuTrigger({ render, className, style,
 			"aria-expanded": isExpanded,
 			"aria-disabled": disabled ? true : void 0,
 			"data-has-submenu": "",
-			onClick: handleSubMenuClick,
+			onClick: onSubMenuClick,
 			onKeyDownCapture: preventMenuKeyDefault,
-			onKeyDown: handleSubMenuKeyDown,
-			onPointerEnter: handlePointerEnter
+			onKeyDown: onSubMenuKeyDown,
+			onPointerEnter,
+			...settingAttrs
 		}, elementProps]
 	});
-	return renderElement("button", {
-		render,
-		className,
-		style
-	}, {
-		state,
-		stateAttrMap,
-		ref: [forwardedRef, triggerRef],
-		props: [
-			{
-				type: "button",
-				...core.getTriggerAttrs(state, contentId)
-			},
-			state.open ? { onKeyDownCapture: preventMenuKeyDefault } : void 0,
-			menu.triggerProps,
-			elementProps
-		]
-	});
-});
+}
 //#endregion
 export { MenuTrigger };
 

package/dist/default/ui/menu/menu-trigger.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu-trigger.js","names":[],"sources":["../../../../src/ui/menu/menu-trigger.tsx"],"sourcesContent":["'use client';\n\nimport type { MenuState } from '@videojs/core';\nimport { isMenuNavigationKey, type UIKeyboardEvent } from '@videojs/core/dom';\nimport { supportsAnchorPositioning } from '@videojs/utils/dom';\nimport { forwardRef, useCallback, useEffect, useRef } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { useSafeId } from '../../utils/use-safe-id';\nimport { useMenuContext, useSubMenuContext } from './context';\n\nexport interface MenuTriggerProps extends UIComponentProps<'button', MenuState> {\n  /** Disables the trigger. Only meaningful when used as a submenu trigger inside a parent menu. */\n  disabled?: boolean;\n}\n\nfunction toUIKeyboardEvent(event: React.KeyboardEvent<HTMLElement>): UIKeyboardEvent {\n  return {\n    get defaultPrevented() {\n      return event.defaultPrevented;\n    },\n    key: event.key,\n    shiftKey: event.shiftKey,\n    ctrlKey: event.ctrlKey,\n    altKey: event.altKey,\n    metaKey: event.metaKey,\n    target: event.target instanceof Node ? event.target : event.currentTarget,\n    currentTarget: event.currentTarget,\n    preventDefault: () => event.preventDefault(),\n    stopPropagation: () => event.stopPropagation(),\n  };\n}\n\nfunction preventMenuKeyDefault(event: React.KeyboardEvent<HTMLElement>): void {\n  const keyboardEvent = toUIKeyboardEvent(event);\n\n  if (event.key !== 'Escape' && isMenuNavigationKey(keyboardEvent) && !event.defaultPrevented) {\n    event.preventDefault();\n  }\n}\n\n/**\n * Button that toggles the menu visibility. At root level renders a `<button>`.\n * When inside a parent menu (as a submenu trigger), renders as a `<div role=\"menuitem\">`\n * that pushes the submenu on click or ArrowRight.\n */\nexport const MenuTrigger = forwardRef<HTMLButtonElement | HTMLDivElement, MenuTriggerProps>(function MenuTrigger(\n  { render, className, style, disabled, onClick, onKeyDown, ...elementProps },\n  forwardedRef\n) {\n  const { core, menu, state, stateAttrMap, anchorName, contentId } = useMenuContext();\n  const subMenuCtx = useSubMenuContext();\n  const isSubMenuTrigger = subMenuCtx !== null;\n\n  const elementRef = useRef<HTMLElement>(null);\n  const triggerId = useSafeId('sub-trigger');\n\n  const parentMenu = subMenuCtx?.parentMenu ?? null;\n  const parentMenuApi = parentMenu?.menu ?? null;\n  const parentState = parentMenu?.state ?? state;\n  const parentPush = parentMenu?.push ?? null;\n  const subMenuId = subMenuCtx?.subMenuId ?? null;\n  const isExpanded = isSubMenuTrigger ? parentMenu?.activeSubMenuId === subMenuId : state.open;\n\n  // Register with the parent menu's item list when acting as a submenu trigger.\n  useEffect(() => {\n    if (!isSubMenuTrigger || !parentMenuApi) return;\n    const element = elementRef.current;\n    if (!element) return;\n    return parentMenuApi.registerItem(element);\n  }, [isSubMenuTrigger, parentMenuApi]);\n\n  const openSubMenu = useCallback(() => {\n    if (disabled || !parentPush || !subMenuId) return;\n    parentPush(subMenuId, triggerId);\n  }, [disabled, parentPush, subMenuId, triggerId]);\n\n  const handleSubMenuClick = useCallback(\n    (event: React.MouseEvent<HTMLDivElement>) => {\n      (onClick as React.MouseEventHandler<HTMLDivElement> | undefined)?.(event);\n      openSubMenu();\n    },\n    [onClick, openSubMenu]\n  );\n\n  const handleSubMenuKeyDown = useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      (onKeyDown as React.KeyboardEventHandler<HTMLDivElement> | undefined)?.(event);\n      if (event.key === 'ArrowRight') {\n        event.preventDefault();\n        openSubMenu();\n      }\n    },\n    [onKeyDown, openSubMenu]\n  );\n\n  const handlePointerEnter = useCallback(() => {\n    const element = elementRef.current;\n    if (!element || disabled || !parentMenuApi) return;\n    parentMenuApi.highlight(element, { focus: false });\n  }, [disabled, parentMenuApi]);\n\n  // Root trigger mode — standard button that toggles the menu.\n  const triggerRef = useCallback(\n    (element: HTMLButtonElement | null) => {\n      menu.setTriggerElement(element);\n      if (element && supportsAnchorPositioning()) {\n        element.style.setProperty('anchor-name', `--${anchorName}`);\n      }\n    },\n    [menu, anchorName]\n  );\n\n  // Submenu trigger mode — renders as a div with role=\"menuitem\"\n  if (isSubMenuTrigger) {\n    return renderElement(\n      'div',\n      { render, className, style },\n      {\n        state: parentState,\n        stateAttrMap,\n        ref: [forwardedRef as React.Ref<HTMLDivElement>, elementRef as React.Ref<HTMLDivElement>],\n        props: [\n          {\n            id: triggerId,\n            role: 'menuitem' as const,\n            'aria-haspopup': 'menu' as const,\n            'aria-expanded': isExpanded,\n            'aria-disabled': disabled ? true : undefined,\n            'data-has-submenu': '',\n            onClick: handleSubMenuClick,\n            onKeyDownCapture: preventMenuKeyDefault,\n            onKeyDown: handleSubMenuKeyDown,\n            onPointerEnter: handlePointerEnter,\n          },\n          elementProps,\n        ],\n      }\n    );\n  }\n\n  return renderElement(\n    'button',\n    { render, className, style },\n    {\n      state,\n      stateAttrMap,\n      ref: [forwardedRef as React.Ref<HTMLButtonElement>, triggerRef],\n      props: [\n        { type: 'button' as const, ...core.getTriggerAttrs(state, contentId) },\n        state.open ? { onKeyDownCapture: preventMenuKeyDefault } : undefined,\n        menu.triggerProps,\n        elementProps,\n      ],\n    }\n  );\n});\n\nexport namespace MenuTrigger {\n  export type Props = MenuTriggerProps;\n  export type State = MenuState;\n}\n"],"mappings":"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"}
+{"version":3,"file":"menu-trigger.js","names":[],"sources":["../../../../src/ui/menu/menu-trigger.tsx"],"sourcesContent":["'use client';\n\nimport type { MenuState } from '@videojs/core';\nimport { isMenuNavigationKey, type UIKeyboardEvent } from '@videojs/core/dom';\nimport { supportsAnchorPositioning } from '@videojs/utils/dom';\nimport { forwardRef, useCallback, useEffect, useMemo, useRef } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { useSafeId } from '../../utils/use-safe-id';\nimport {\n  MenuTriggerChildContextProvider,\n  useMenuContext,\n  useOptionalMenuItemSettingContext,\n  useSubMenuContext,\n} from './context';\nimport { MenuItemSettingProvider } from './menu-item-setting-provider';\nimport type { MenuItemSettingType } from './menu-item-type';\n\nexport interface MenuTriggerProps extends Omit<UIComponentProps<'button', MenuState>, 'type'> {\n  /** Disables the trigger. */\n  disabled?: boolean;\n  /** Setting kind for submenu triggers (`playback-rate`, `quality`, `audio-track`, or `captions`). */\n  type?: MenuItemSettingType | undefined;\n}\n\nfunction toUIKeyboardEvent(event: React.KeyboardEvent<HTMLElement>): UIKeyboardEvent {\n  return {\n    get defaultPrevented() {\n      return event.defaultPrevented;\n    },\n    key: event.key,\n    shiftKey: event.shiftKey,\n    ctrlKey: event.ctrlKey,\n    altKey: event.altKey,\n    metaKey: event.metaKey,\n    target: event.target instanceof Node ? event.target : event.currentTarget,\n    currentTarget: event.currentTarget,\n    preventDefault: () => event.preventDefault(),\n    stopPropagation: () => event.stopPropagation(),\n  };\n}\n\nfunction preventMenuKeyDefault(event: React.KeyboardEvent<HTMLElement>): void {\n  const keyboardEvent = toUIKeyboardEvent(event);\n\n  if (event.key !== 'Escape' && isMenuNavigationKey(keyboardEvent) && !event.defaultPrevented) {\n    event.preventDefault();\n  }\n}\n\n/**\n * Button that toggles the menu visibility. At root level renders a `<button>`.\n * When inside a parent menu (as a submenu trigger), renders as a `<div role=\"menuitem\">`\n * that pushes the submenu on click or ArrowRight.\n */\nexport const MenuTrigger = forwardRef<HTMLButtonElement | HTMLDivElement, MenuTriggerProps>(function MenuTrigger(\n  { render, className, style, disabled, type, onClick, onKeyDown, ...elementProps },\n  forwardedRef\n) {\n  const { core, menu, state, anchorName, contentId } = useMenuContext();\n  const subMenuCtx = useSubMenuContext();\n  const isSubMenuTrigger = subMenuCtx !== null;\n\n  const elementRef = useRef<HTMLElement>(null);\n  const triggerId = useSafeId('sub-trigger');\n\n  const parentMenu = subMenuCtx?.parentMenu ?? null;\n  const parentMenuApi = parentMenu?.menu ?? null;\n  const parentState = parentMenu?.state ?? state;\n  const parentPush = parentMenu?.push ?? null;\n  const subMenuId = subMenuCtx?.subMenuId ?? null;\n  const isExpanded = isSubMenuTrigger ? parentMenu?.activeSubMenuId === subMenuId : state.open;\n\n  // Register with the parent menu's item list when acting as a submenu trigger.\n  useEffect(() => {\n    if (!isSubMenuTrigger || !parentMenuApi) return;\n    const element = elementRef.current;\n    if (!element) return;\n    return parentMenuApi.registerItem(element);\n  }, [isSubMenuTrigger, parentMenuApi]);\n\n  const openSubMenu = useCallback(() => {\n    if (disabled || !parentPush || !subMenuId) return;\n    parentPush(subMenuId, triggerId);\n  }, [disabled, parentPush, subMenuId, triggerId]);\n\n  const handleSubMenuClick = useCallback(\n    (event: React.MouseEvent<HTMLDivElement>) => {\n      (onClick as React.MouseEventHandler<HTMLDivElement> | undefined)?.(event);\n      openSubMenu();\n    },\n    [onClick, openSubMenu]\n  );\n\n  const handleSubMenuKeyDown = useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      (onKeyDown as React.KeyboardEventHandler<HTMLDivElement> | undefined)?.(event);\n      if (disabled) return;\n      if (event.key === 'ArrowRight') {\n        event.preventDefault();\n        openSubMenu();\n      }\n    },\n    [disabled, onKeyDown, openSubMenu]\n  );\n\n  const handlePointerEnter = useCallback(() => {\n    const element = elementRef.current;\n    if (!element || disabled || !parentMenuApi) return;\n    parentMenuApi.highlight(element, { focus: false });\n  }, [disabled, parentMenuApi]);\n\n  // Root trigger mode — standard button that toggles the menu.\n  const triggerRef = useCallback(\n    (element: HTMLButtonElement | null) => {\n      menu.setTriggerElement(element);\n      if (element && supportsAnchorPositioning()) {\n        element.style.setProperty('anchor-name', `--${anchorName}`);\n      }\n    },\n    [menu, anchorName]\n  );\n\n  const rootTriggerProps = useMemo(() => {\n    if (!disabled) return menu.triggerProps;\n\n    return {\n      onClick: (event: React.MouseEvent<HTMLElement>) => {\n        event.preventDefault();\n      },\n      onKeyDown: (event: React.KeyboardEvent<HTMLElement>) => {\n        const keyboardEvent = toUIKeyboardEvent(event);\n        if (event.key === 'Enter' || event.key === ' ' || isMenuNavigationKey(keyboardEvent)) {\n          event.preventDefault();\n        }\n      },\n    };\n  }, [disabled, menu.triggerProps]);\n\n  // Submenu trigger mode — renders as a div with role=\"menuitem\"\n  if (isSubMenuTrigger) {\n    const trigger = (\n      <MenuTriggerSubmenu\n        render={render}\n        className={className}\n        style={style}\n        disabled={disabled}\n        elementProps={elementProps}\n        forwardedRef={forwardedRef}\n        elementRef={elementRef}\n        triggerId={triggerId}\n        parentState={parentState}\n        isExpanded={isExpanded}\n        onSubMenuClick={handleSubMenuClick}\n        onSubMenuKeyDown={handleSubMenuKeyDown}\n        onPointerEnter={handlePointerEnter}\n      />\n    );\n\n    if (!type) return trigger;\n\n    return <MenuItemSettingProvider type={type}>{trigger}</MenuItemSettingProvider>;\n  }\n\n  const rootTrigger = (\n    <MenuTriggerChildContextProvider value>\n      {renderElement(\n        'button',\n        { render, className, style },\n        {\n          state,\n          ref: [forwardedRef as React.Ref<HTMLButtonElement>, triggerRef],\n          props: [\n            { type: 'button' as const, ...core.getTriggerAttrs(state, contentId) },\n            disabled ? { disabled: true, 'aria-disabled': 'true' as const } : undefined,\n            state.open ? { onKeyDownCapture: preventMenuKeyDefault } : undefined,\n            rootTriggerProps,\n            elementProps,\n          ],\n        }\n      )}\n    </MenuTriggerChildContextProvider>\n  );\n\n  if (!type) return rootTrigger;\n\n  return <MenuItemSettingProvider type={type}>{rootTrigger}</MenuItemSettingProvider>;\n});\n\nexport namespace MenuTrigger {\n  export type Props = MenuTriggerProps;\n  export type State = MenuState;\n}\n\ninterface MenuTriggerSubmenuProps {\n  render: MenuTriggerProps['render'];\n  className: MenuTriggerProps['className'];\n  style: MenuTriggerProps['style'];\n  disabled: boolean | undefined;\n  elementProps: Record<string, unknown>;\n  forwardedRef: React.ForwardedRef<HTMLButtonElement | HTMLDivElement>;\n  elementRef: React.RefObject<HTMLElement | null>;\n  triggerId: string;\n  parentState: MenuState;\n  isExpanded: boolean;\n  onSubMenuClick: (event: React.MouseEvent<HTMLDivElement>) => void;\n  onSubMenuKeyDown: (event: React.KeyboardEvent<HTMLDivElement>) => void;\n  onPointerEnter: () => void;\n}\n\nfunction MenuTriggerSubmenu({\n  render,\n  className,\n  style,\n  disabled,\n  elementProps,\n  forwardedRef,\n  elementRef,\n  triggerId,\n  parentState,\n  isExpanded,\n  onSubMenuClick,\n  onSubMenuKeyDown,\n  onPointerEnter,\n}: MenuTriggerSubmenuProps) {\n  const setting = useOptionalMenuItemSettingContext();\n  const settingAttrs = setting ? { 'data-availability': setting.availability } : undefined;\n\n  return renderElement(\n    'div',\n    { render, className, style },\n    {\n      state: parentState,\n      ref: [forwardedRef, elementRef as React.Ref<HTMLDivElement>],\n      props: [\n        {\n          id: triggerId,\n          role: 'menuitem' as const,\n          'aria-haspopup': 'menu' as const,\n          'aria-expanded': isExpanded,\n          'aria-disabled': disabled ? true : undefined,\n          'data-has-submenu': '',\n          onClick: onSubMenuClick,\n          onKeyDownCapture: preventMenuKeyDefault,\n          onKeyDown: onSubMenuKeyDown,\n          onPointerEnter,\n          ...settingAttrs,\n        },\n        elementProps,\n      ],\n    }\n  );\n}\n"],"mappings":"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"}

package/dist/default/ui/menu/use-menu-group.js

@@ -0,0 +1,31 @@
+"use client";
+import { MenuGroupContextProvider } from "./context.js";
+import { useCallback, useMemo, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/ui/menu/use-menu-group.tsx
+function hasExplicitLabel(elementProps) {
+	return elementProps["aria-label"] !== void 0 || elementProps["aria-labelledby"] !== void 0;
+}
+function getMenuGroupProps(labelId, elementProps) {
+	return {
+		role: "group",
+		"aria-labelledby": hasExplicitLabel(elementProps) ? void 0 : labelId
+	};
+}
+function MenuGroupProvider({ children }) {
+	const [labelId, setLabelId] = useState();
+	const registerLabel = useCallback((id) => {
+		setLabelId(id);
+		return () => {
+			setLabelId((current) => current === id ? void 0 : current);
+		};
+	}, []);
+	return /* @__PURE__ */ jsx(MenuGroupContextProvider, {
+		value: useMemo(() => ({ registerLabel }), [registerLabel]),
+		children: children(labelId)
+	});
+}
+//#endregion
+export { MenuGroupProvider, getMenuGroupProps };
+
+//# sourceMappingURL=use-menu-group.js.map

package/dist/default/ui/menu/use-menu-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-menu-group.js","names":[],"sources":["../../../../src/ui/menu/use-menu-group.tsx"],"sourcesContent":["'use client';\n\nimport { type ReactElement, useCallback, useMemo, useState } from 'react';\n\nimport { MenuGroupContextProvider } from './context';\n\ninterface MenuGroupProviderProps {\n  children: (labelId: string | undefined) => ReactElement | null;\n}\n\ninterface MenuGroupElementProps {\n  'aria-label'?: unknown;\n  'aria-labelledby'?: unknown;\n}\n\nfunction hasExplicitLabel(elementProps: MenuGroupElementProps): boolean {\n  return elementProps['aria-label'] !== undefined || elementProps['aria-labelledby'] !== undefined;\n}\n\nexport function getMenuGroupProps(\n  labelId: string | undefined,\n  elementProps: MenuGroupElementProps\n): { role: 'group'; 'aria-labelledby'?: string | undefined } {\n  return {\n    role: 'group',\n    'aria-labelledby': hasExplicitLabel(elementProps) ? undefined : labelId,\n  };\n}\n\nexport function MenuGroupProvider({ children }: MenuGroupProviderProps): ReactElement | null {\n  const [labelId, setLabelId] = useState<string>();\n\n  const registerLabel = useCallback((id: string) => {\n    setLabelId(id);\n\n    return () => {\n      setLabelId((current) => (current === id ? undefined : current));\n    };\n  }, []);\n\n  const value = useMemo(() => ({ registerLabel }), [registerLabel]);\n\n  return <MenuGroupContextProvider value={value}>{children(labelId)}</MenuGroupContextProvider>;\n}\n"],"mappings":";;;;;AAeA,SAAS,iBAAiB,cAA8C;AACtE,QAAO,aAAa,kBAAkB,KAAA,KAAa,aAAa,uBAAuB,KAAA;;AAGzF,SAAgB,kBACd,SACA,cAC2D;AAC3D,QAAO;EACL,MAAM;EACN,mBAAmB,iBAAiB,aAAa,GAAG,KAAA,IAAY;EACjE;;AAGH,SAAgB,kBAAkB,EAAE,YAAyD;CAC3F,MAAM,CAAC,SAAS,cAAc,UAAkB;CAEhD,MAAM,gBAAgB,aAAa,OAAe;AAChD,aAAW,GAAG;AAEd,eAAa;AACX,eAAY,YAAa,YAAY,KAAK,KAAA,IAAY,QAAS;;IAEhE,EAAE,CAAC;AAIN,QAAO,oBAAC,0BAAD;EAA0B,OAFnB,eAAe,EAAE,eAAe,GAAG,CAAC,cAAc,CAAC;YAEjB,SAAS,QAAQ;EAA4B,CAAA"}

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

@@ -0,0 +1,2 @@
+import { usePlaybackRateOptions } from "./use-playback-rate-options.js";
+export { usePlaybackRateOptions };

package/dist/default/ui/playback-rate/use-playback-rate-options.js

@@ -0,0 +1,34 @@
+"use client";
+import { usePlayer } from "../../player/context.js";
+import { selectPlaybackRate } from "@videojs/core/dom";
+import { useCallback, useState } from "react";
+import { PlaybackRateRadioGroupCore } from "@videojs/core";
+//#region src/ui/playback-rate/use-playback-rate-options.ts
+function usePlaybackRateOptions(props) {
+	const media = usePlayer(selectPlaybackRate);
+	const [core] = useState(() => new PlaybackRateRadioGroupCore());
+	core.setProps(props ?? {});
+	const setRate = useCallback((rate) => core.select(media, rate), [core, media]);
+	const setValue = useCallback((value) => core.selectValue(media, value), [core, media]);
+	if (!media) return null;
+	core.setMedia(media);
+	const state = core.getState();
+	return {
+		state,
+		rate: state.rate,
+		value: core.getRateValue(state.rate),
+		options: state.rates.map((rate) => ({
+			rate,
+			value: core.getRateValue(rate),
+			label: core.getRateLabel(rate),
+			disabled: state.disabled
+		})),
+		disabled: state.disabled,
+		setRate,
+		setValue
+	};
+}
+//#endregion
+export { usePlaybackRateOptions };
+
+//# sourceMappingURL=use-playback-rate-options.js.map

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

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

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

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

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

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

package/dist/default/ui/poster/poster.js

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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