@videojs/react 10.0.0-beta.27 → 10.0.0-beta.29

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 { MenuCore, MenuState } from '@videojs/core';\nimport { isMenuNavigationKey } from '@videojs/core/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 { MenuTriggerChildContextProvider, useMenuContext } from './context';\nimport { callKeyDownHandler, preventMenuKeyDefault } from './menu-keyboard';\n\ntype MenuTriggerElement = HTMLButtonElement | HTMLDivElement;\n\nexport interface MenuTriggerProps\n  extends Omit<UIComponentProps<'button', MenuState>, 'type' | 'onClick' | 'onKeyDown'> {\n  /** Disables the trigger. */\n  disabled?: boolean;\n  onClick?: React.MouseEventHandler<MenuTriggerElement>;\n  onKeyDown?: React.KeyboardEventHandler<MenuTriggerElement>;\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 opens 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, parent, state, contentId } = useMenuContext();\n  const isSubMenuTrigger = parent !== null;\n  const controlledId = state.open || state.status === 'ending' ? contentId : undefined;\n\n  const elementRef = useRef<HTMLElement>(null);\n  const triggerId = useSafeId('sub-trigger');\n\n  const parentMenuApi = parent?.menu ?? null;\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    menu.setTriggerElement(element);\n    const unregister = parentMenuApi.registerItem(element);\n    return () => {\n      unregister();\n      menu.setTriggerElement(null);\n    };\n  }, [isSubMenuTrigger, menu, parentMenuApi]);\n\n  const openSubMenu = useCallback(() => {\n    if (!disabled) menu.open('click');\n  }, [disabled, menu]);\n\n  const handleSubMenuClick = useCallback(\n    (event: React.MouseEvent<HTMLDivElement>) => {\n      onClick?.(event);\n      if (event.defaultPrevented) return;\n      openSubMenu();\n    },\n    [onClick, openSubMenu]\n  );\n\n  const handleSubMenuKeyDown = useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      const defaultPreventedByUser = callKeyDownHandler(onKeyDown, event);\n      if (disabled || defaultPreventedByUser) 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, pointer: true });\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    },\n    [menu]\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        if (event.key === 'Enter' || event.key === ' ' || isMenuNavigationKey(event)) {\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    return (\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        triggerAttrs={core.getTriggerAttrs(state, controlledId)}\n        state={state}\n        onSubMenuClick={handleSubMenuClick}\n        onSubMenuKeyDown={handleSubMenuKeyDown}\n        onPointerEnter={handlePointerEnter}\n      />\n    );\n  }\n\n  return (\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, controlledId) },\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\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  triggerAttrs: ReturnType<MenuCore['getTriggerAttrs']>;\n  state: MenuState;\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  triggerAttrs,\n  state,\n  onSubMenuClick,\n  onSubMenuKeyDown,\n  onPointerEnter,\n}: MenuTriggerSubmenuProps) {\n  return renderElement(\n    'div',\n    { render, className, style },\n    {\n      state,\n      ref: [forwardedRef, elementRef as React.Ref<HTMLDivElement>],\n      props: [\n        {\n          id: triggerId,\n          role: 'menuitem' as const,\n          ...triggerAttrs,\n          'aria-disabled': disabled ? true : undefined,\n          'data-has-submenu': '',\n          onClick: onSubMenuClick,\n          onKeyDownCapture: preventMenuKeyDefault,\n          onKeyDown: onSubMenuKeyDown,\n          onPointerEnter,\n        },\n        elementProps,\n      ],\n    }\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;AA2BA,MAAa,cAAc,WAAiE,SAAS,YACnG,EAAE,QAAQ,WAAW,OAAO,UAAU,SAAS,WAAW,GAAG,gBAC7D,cACA;CACA,MAAM,EAAE,MAAM,MAAM,QAAQ,OAAO,cAAc,eAAe;CAChE,MAAM,mBAAmB,WAAW;CACpC,MAAM,eAAe,MAAM,QAAQ,MAAM,WAAW,WAAW,YAAY,KAAA;CAE3E,MAAM,aAAa,OAAoB,IAAI;CAC3C,MAAM,YAAY,UAAU,aAAa;CAEzC,MAAM,gBAAgB,QAAQ,QAAQ;CAGtC,gBAAgB;EACd,IAAI,CAAC,oBAAoB,CAAC,eAAe;EACzC,MAAM,UAAU,WAAW;EAC3B,IAAI,CAAC,SAAS;EACd,KAAK,kBAAkB,OAAO;EAC9B,MAAM,aAAa,cAAc,aAAa,OAAO;EACrD,aAAa;GACX,WAAW;GACX,KAAK,kBAAkB,IAAI;EAC7B;CACF,GAAG;EAAC;EAAkB;EAAM;CAAa,CAAC;CAE1C,MAAM,cAAc,kBAAkB;EACpC,IAAI,CAAC,UAAU,KAAK,KAAK,OAAO;CAClC,GAAG,CAAC,UAAU,IAAI,CAAC;CAEnB,MAAM,qBAAqB,aACxB,UAA4C;EAC3C,UAAU,KAAK;EACf,IAAI,MAAM,kBAAkB;EAC5B,YAAY;CACd,GACA,CAAC,SAAS,WAAW,CACvB;CAEA,MAAM,uBAAuB,aAC1B,UAA+C;EAC9C,MAAM,yBAAyB,mBAAmB,WAAW,KAAK;EAClE,IAAI,YAAY,wBAAwB;EACxC,IAAI,MAAM,QAAQ,cAAc;GAC9B,MAAM,eAAe;GACrB,YAAY;EACd;CACF,GACA;EAAC;EAAU;EAAW;CAAW,CACnC;CAEA,MAAM,qBAAqB,kBAAkB;EAC3C,MAAM,UAAU,WAAW;EAC3B,IAAI,CAAC,WAAW,YAAY,CAAC,eAAe;EAC5C,cAAc,UAAU,SAAS;GAAE,OAAO;GAAO,SAAS;EAAK,CAAC;CAClE,GAAG,CAAC,UAAU,aAAa,CAAC;CAG5B,MAAM,aAAa,aAChB,YAAsC;EACrC,KAAK,kBAAkB,OAAO;CAChC,GACA,CAAC,IAAI,CACP;CAEA,MAAM,mBAAmB,cAAc;EACrC,IAAI,CAAC,UAAU,OAAO,KAAK;EAE3B,OAAO;GACL,UAAU,UAAyC;IACjD,MAAM,eAAe;GACvB;GACA,YAAY,UAA4C;IACtD,IAAI,MAAM,QAAQ,WAAW,MAAM,QAAQ,OAAO,oBAAoB,KAAK,GACzE,MAAM,eAAe;GAEzB;EACF;CACF,GAAG,CAAC,UAAU,KAAK,YAAY,CAAC;CAGhC,IAAI,kBACF,OACE,oBAAC,oBAAD;EACU;EACG;EACJ;EACG;EACI;EACA;EACF;EACD;EACX,cAAc,KAAK,gBAAgB,OAAO,YAAY;EAC/C;EACP,gBAAgB;EAChB,kBAAkB;EAClB,gBAAgB;CACjB,CAAA;CAIL,OACE,oBAAC,iCAAD;EAAiC,OAAA;EAC9B,UAAA,cACC,UACA;GAAE;GAAQ;GAAW;EAAM,GAC3B;GACE;GACA,KAAK,CAAC,cAA8C,UAAU;GAC9D,OAAO;IACL;KAAE,MAAM;KAAmB,GAAG,KAAK,gBAAgB,OAAO,YAAY;IAAE;IACxE,WAAW;KAAE,UAAU;KAAM,iBAAiB;IAAgB,IAAI,KAAA;IAClE,MAAM,OAAO,EAAE,kBAAkB,sBAAsB,IAAI,KAAA;IAC3D;IACA;GACF;EACF,CACF;CAC+B,CAAA;AAErC,CAAC;AAuBD,SAAS,mBAAmB,EAC1B,QACA,WACA,OACA,UACA,cACA,cACA,YACA,WACA,cACA,OACA,gBACA,kBACA,kBAC0B;CAC1B,OAAO,cACL,OACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EACE;EACA,KAAK,CAAC,cAAc,UAAuC;EAC3D,OAAO,CACL;GACE,IAAI;GACJ,MAAM;GACN,GAAG;GACH,iBAAiB,WAAW,OAAO,KAAA;GACnC,oBAAoB;GACpB,SAAS;GACT,kBAAkB;GAClB,WAAW;GACX;EACF,GACA,YACF;CACF,CACF;AACF"}
+{"version":3,"file":"menu-trigger.js","names":[],"sources":["../../../../src/ui/menu/menu-trigger.tsx"],"sourcesContent":["import type { MenuCore, MenuState } from '@videojs/core';\nimport { isMenuNavigationKey } from '@videojs/core/dom';\nimport { isInteractiveActivation } 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 { MenuTriggerChildContextProvider, useMenuContext } from './context';\nimport { callKeyDownHandler, preventMenuKeyDefault } from './menu-keyboard';\n\ntype MenuTriggerElement = HTMLButtonElement | HTMLDivElement;\n\nexport interface MenuTriggerProps\n  extends Omit<UIComponentProps<'button', MenuState>, 'type' | 'onClick' | 'onKeyDown'> {\n  /** Disables the trigger. */\n  disabled?: boolean;\n  onClick?: React.MouseEventHandler<MenuTriggerElement>;\n  onKeyDown?: React.KeyboardEventHandler<MenuTriggerElement>;\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 opens 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, parent, state, contentId } = useMenuContext();\n  const isSubMenuTrigger = parent !== null;\n  const controlledId = state.open || state.status === 'ending' ? contentId : undefined;\n\n  const elementRef = useRef<HTMLElement>(null);\n  const triggerId = useSafeId('sub-trigger');\n\n  const parentMenuApi = parent?.menu ?? null;\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    menu.setTriggerElement(element);\n    const unregister = parentMenuApi.registerItem(element);\n    return () => {\n      unregister();\n      menu.setTriggerElement(null);\n    };\n  }, [isSubMenuTrigger, menu, parentMenuApi]);\n\n  const openSubMenu = useCallback(() => {\n    if (!disabled) menu.open('click');\n  }, [disabled, menu]);\n\n  const handleSubMenuClick = useCallback(\n    (event: React.MouseEvent<HTMLDivElement>) => {\n      onClick?.(event);\n      if (event.defaultPrevented) return;\n      openSubMenu();\n    },\n    [onClick, openSubMenu]\n  );\n\n  const handleSubMenuKeyDown = useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      const defaultPreventedByUser = callKeyDownHandler(onKeyDown, event);\n      if (disabled || defaultPreventedByUser) 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, pointer: true });\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    },\n    [menu]\n  );\n\n  const handleRootKeyDown = useCallback(\n    (event: React.KeyboardEvent<MenuTriggerElement>) => {\n      const defaultPreventedByUser = callKeyDownHandler(onKeyDown, event);\n\n      if (disabled || defaultPreventedByUser) {\n        if (disabled && isMenuNavigationKey(event)) event.preventDefault();\n        return;\n      }\n\n      if (isInteractiveActivation(event.nativeEvent)) {\n        event.preventDefault();\n        menu.triggerProps.onClick(event.nativeEvent);\n        return;\n      }\n\n      menu.triggerProps.onKeyDown(event);\n    },\n    [disabled, menu.triggerProps, onKeyDown]\n  );\n\n  const rootTriggerProps = useMemo(\n    () => ({\n      onClick: disabled ? (event: React.MouseEvent<HTMLElement>) => event.preventDefault() : menu.triggerProps.onClick,\n      onKeyDown: handleRootKeyDown,\n    }),\n    [disabled, handleRootKeyDown, menu.triggerProps]\n  );\n\n  // Submenu trigger mode — renders as a div with role=\"menuitem\"\n  if (isSubMenuTrigger) {\n    return (\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        triggerAttrs={core.getTriggerAttrs(state, controlledId)}\n        state={state}\n        onSubMenuClick={handleSubMenuClick}\n        onSubMenuKeyDown={handleSubMenuKeyDown}\n        onPointerEnter={handlePointerEnter}\n      />\n    );\n  }\n\n  return (\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, controlledId) },\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\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  triggerAttrs: ReturnType<MenuCore['getTriggerAttrs']>;\n  state: MenuState;\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  triggerAttrs,\n  state,\n  onSubMenuClick,\n  onSubMenuKeyDown,\n  onPointerEnter,\n}: MenuTriggerSubmenuProps) {\n  return renderElement(\n    'div',\n    { render, className, style },\n    {\n      state,\n      ref: [forwardedRef, elementRef as React.Ref<HTMLDivElement>],\n      props: [\n        {\n          id: triggerId,\n          role: 'menuitem' as const,\n          ...triggerAttrs,\n          'aria-disabled': disabled ? true : undefined,\n          'data-has-submenu': '',\n          onClick: onSubMenuClick,\n          onKeyDownCapture: preventMenuKeyDefault,\n          onKeyDown: onSubMenuKeyDown,\n          onPointerEnter,\n        },\n        elementProps,\n      ],\n    }\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;AA0BA,MAAa,cAAc,WAAiE,SAAS,YACnG,EAAE,QAAQ,WAAW,OAAO,UAAU,SAAS,WAAW,GAAG,gBAC7D,cACA;CACA,MAAM,EAAE,MAAM,MAAM,QAAQ,OAAO,cAAc,eAAe;CAChE,MAAM,mBAAmB,WAAW;CACpC,MAAM,eAAe,MAAM,QAAQ,MAAM,WAAW,WAAW,YAAY,KAAA;CAE3E,MAAM,aAAa,OAAoB,IAAI;CAC3C,MAAM,YAAY,UAAU,aAAa;CAEzC,MAAM,gBAAgB,QAAQ,QAAQ;CAGtC,gBAAgB;EACd,IAAI,CAAC,oBAAoB,CAAC,eAAe;EACzC,MAAM,UAAU,WAAW;EAC3B,IAAI,CAAC,SAAS;EACd,KAAK,kBAAkB,OAAO;EAC9B,MAAM,aAAa,cAAc,aAAa,OAAO;EACrD,aAAa;GACX,WAAW;GACX,KAAK,kBAAkB,IAAI;EAC7B;CACF,GAAG;EAAC;EAAkB;EAAM;CAAa,CAAC;CAE1C,MAAM,cAAc,kBAAkB;EACpC,IAAI,CAAC,UAAU,KAAK,KAAK,OAAO;CAClC,GAAG,CAAC,UAAU,IAAI,CAAC;CAEnB,MAAM,qBAAqB,aACxB,UAA4C;EAC3C,UAAU,KAAK;EACf,IAAI,MAAM,kBAAkB;EAC5B,YAAY;CACd,GACA,CAAC,SAAS,WAAW,CACvB;CAEA,MAAM,uBAAuB,aAC1B,UAA+C;EAC9C,MAAM,yBAAyB,mBAAmB,WAAW,KAAK;EAClE,IAAI,YAAY,wBAAwB;EACxC,IAAI,MAAM,QAAQ,cAAc;GAC9B,MAAM,eAAe;GACrB,YAAY;EACd;CACF,GACA;EAAC;EAAU;EAAW;CAAW,CACnC;CAEA,MAAM,qBAAqB,kBAAkB;EAC3C,MAAM,UAAU,WAAW;EAC3B,IAAI,CAAC,WAAW,YAAY,CAAC,eAAe;EAC5C,cAAc,UAAU,SAAS;GAAE,OAAO;GAAO,SAAS;EAAK,CAAC;CAClE,GAAG,CAAC,UAAU,aAAa,CAAC;CAG5B,MAAM,aAAa,aAChB,YAAsC;EACrC,KAAK,kBAAkB,OAAO;CAChC,GACA,CAAC,IAAI,CACP;CAEA,MAAM,oBAAoB,aACvB,UAAmD;EAClD,MAAM,yBAAyB,mBAAmB,WAAW,KAAK;EAElE,IAAI,YAAY,wBAAwB;GACtC,IAAI,YAAY,oBAAoB,KAAK,GAAG,MAAM,eAAe;GACjE;EACF;EAEA,IAAI,wBAAwB,MAAM,WAAW,GAAG;GAC9C,MAAM,eAAe;GACrB,KAAK,aAAa,QAAQ,MAAM,WAAW;GAC3C;EACF;EAEA,KAAK,aAAa,UAAU,KAAK;CACnC,GACA;EAAC;EAAU,KAAK;EAAc;CAAS,CACzC;CAEA,MAAM,mBAAmB,eAChB;EACL,SAAS,YAAY,UAAyC,MAAM,eAAe,IAAI,KAAK,aAAa;EACzG,WAAW;CACb,IACA;EAAC;EAAU;EAAmB,KAAK;CAAY,CACjD;CAGA,IAAI,kBACF,OACE,oBAAC,oBAAD;EACU;EACG;EACJ;EACG;EACI;EACA;EACF;EACD;EACX,cAAc,KAAK,gBAAgB,OAAO,YAAY;EAC/C;EACP,gBAAgB;EAChB,kBAAkB;EAClB,gBAAgB;CACjB,CAAA;CAIL,OACE,oBAAC,iCAAD;EAAiC,OAAA;EAC9B,UAAA,cACC,UACA;GAAE;GAAQ;GAAW;EAAM,GAC3B;GACE;GACA,KAAK,CAAC,cAA8C,UAAU;GAC9D,OAAO;IACL;KAAE,MAAM;KAAmB,GAAG,KAAK,gBAAgB,OAAO,YAAY;IAAE;IACxE,WAAW;KAAE,UAAU;KAAM,iBAAiB;IAAgB,IAAI,KAAA;IAClE,MAAM,OAAO,EAAE,kBAAkB,sBAAsB,IAAI,KAAA;IAC3D;IACA;GACF;EACF,CACF;CAC+B,CAAA;AAErC,CAAC;AAuBD,SAAS,mBAAmB,EAC1B,QACA,WACA,OACA,UACA,cACA,cACA,YACA,WACA,cACA,OACA,gBACA,kBACA,kBAC0B;CAC1B,OAAO,cACL,OACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EACE;EACA,KAAK,CAAC,cAAc,UAAuC;EAC3D,OAAO,CACL;GACE,IAAI;GACJ,MAAM;GACN,GAAG;GACH,iBAAiB,WAAW,OAAO,KAAA;GACnC,oBAAoB;GACpB,SAAS;GACT,kBAAkB;GAClB,WAAW;GACX;EACF,GACA,YACF;CACF,CACF;AACF"}

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

@@ -1,4 +1,3 @@
-"use client";
 import { MenuGroupContextProvider } from "./context.js";
 import { useCallback, useMemo, useState } from "react";
 import { jsx } from "react/jsx-runtime";

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

@@ -1 +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;CACtE,OAAO,aAAa,kBAAkB,KAAA,KAAa,aAAa,uBAAuB,KAAA;AACzF;AAEA,SAAgB,kBACd,SACA,cAC2D;CAC3D,OAAO;EACL,MAAM;EACN,mBAAmB,iBAAiB,YAAY,IAAI,KAAA,IAAY;CAClE;AACF;AAEA,SAAgB,kBAAkB,EAAE,YAAyD;CAC3F,MAAM,CAAC,SAAS,cAAc,SAAiB;CAE/C,MAAM,gBAAgB,aAAa,OAAe;EAChD,WAAW,EAAE;EAEb,aAAa;GACX,YAAY,YAAa,YAAY,KAAK,KAAA,IAAY,OAAQ;EAChE;CACF,GAAG,CAAC,CAAC;CAIL,OAAO,oBAAC,0BAAD;EAA0B,OAFnB,eAAe,EAAE,cAAc,IAAI,CAAC,aAAa,CAEnB;EAAI,UAAA,SAAS,OAAO;CAA4B,CAAA;AAC9F"}
+{"version":3,"file":"use-menu-group.js","names":[],"sources":["../../../../src/ui/menu/use-menu-group.tsx"],"sourcesContent":["import { 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":";;;;AAaA,SAAS,iBAAiB,cAA8C;CACtE,OAAO,aAAa,kBAAkB,KAAA,KAAa,aAAa,uBAAuB,KAAA;AACzF;AAEA,SAAgB,kBACd,SACA,cAC2D;CAC3D,OAAO;EACL,MAAM;EACN,mBAAmB,iBAAiB,YAAY,IAAI,KAAA,IAAY;CAClE;AACF;AAEA,SAAgB,kBAAkB,EAAE,YAAyD;CAC3F,MAAM,CAAC,SAAS,cAAc,SAAiB;CAE/C,MAAM,gBAAgB,aAAa,OAAe;EAChD,WAAW,EAAE;EAEb,aAAa;GACX,YAAY,YAAa,YAAY,KAAK,KAAA,IAAY,OAAQ;EAChE;CACF,GAAG,CAAC,CAAC;CAIL,OAAO,oBAAC,0BAAD;EAA0B,OAFnB,eAAe,EAAE,cAAc,IAAI,CAAC,aAAa,CAEnB;EAAI,UAAA,SAAS,OAAO;CAA4B,CAAA;AAC9F"}

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

@@ -1,4 +1,3 @@
-"use client";
 import { createMediaButton } from "../create-media-button.js";
 import { selectVolume } from "@videojs/core/dom";
 import { MuteButtonCore, MuteButtonDataAttrs } from "@videojs/core";

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

@@ -1 +1 @@
-{"version":3,"file":"mute-button.js","names":[],"sources":["../../../../src/ui/mute-button/mute-button.tsx"],"sourcesContent":["'use client';\n\nimport { MuteButtonCore, MuteButtonDataAttrs } from '@videojs/core';\nimport { selectVolume } from '@videojs/core/dom';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { createMediaButton } from '../create-media-button';\n\nexport interface MuteButtonProps extends UIComponentProps<'button', MuteButtonCore.State>, MuteButtonCore.Props {}\n\n/** A button that toggles mute state. */\nexport const MuteButton = createMediaButton<MuteButtonCore, MuteButtonProps>({\n  displayName: 'MuteButton',\n  core: MuteButtonCore,\n  stateAttrMap: MuteButtonDataAttrs,\n  selector: selectVolume,\n  action: (core, state) => core.toggle(state),\n  hotkeyAction: 'toggleMuted',\n  isSupported: (state) => !state.hidden,\n});\n\nexport namespace MuteButton {\n  export type Props = MuteButtonProps;\n  export type State = MuteButtonCore.State;\n}\n"],"mappings":";;;;;;AAWA,MAAa,aAAa,kBAAmD;CAC3E,aAAa;CACb,MAAM;CACN,cAAc;CACd,UAAU;CACV,SAAS,MAAM,UAAU,KAAK,OAAO,KAAK;CAC1C,cAAc;CACd,cAAc,UAAU,CAAC,MAAM;AACjC,CAAC"}
+{"version":3,"file":"mute-button.js","names":[],"sources":["../../../../src/ui/mute-button/mute-button.tsx"],"sourcesContent":["import { MuteButtonCore, MuteButtonDataAttrs } from '@videojs/core';\nimport { selectVolume } from '@videojs/core/dom';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { createMediaButton } from '../create-media-button';\n\nexport interface MuteButtonProps extends UIComponentProps<'button', MuteButtonCore.State>, MuteButtonCore.Props {}\n\n/** A button that toggles mute state. */\nexport const MuteButton = createMediaButton<MuteButtonCore, MuteButtonProps>({\n  displayName: 'MuteButton',\n  core: MuteButtonCore,\n  stateAttrMap: MuteButtonDataAttrs,\n  selector: selectVolume,\n  action: (core, state) => core.toggle(state),\n  hotkeyAction: 'toggleMuted',\n  isSupported: (state) => !state.hidden,\n});\n\nexport namespace MuteButton {\n  export type Props = MuteButtonProps;\n  export type State = MuteButtonCore.State;\n}\n"],"mappings":";;;;;AASA,MAAa,aAAa,kBAAmD;CAC3E,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/pip-button/pip-button.js

@@ -1,4 +1,3 @@
-"use client";
 import { createMediaButton } from "../create-media-button.js";
 import { selectPiP } from "@videojs/core/dom";
 import { PiPButtonCore, PiPButtonDataAttrs } from "@videojs/core";

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

@@ -1 +1 @@
-{"version":3,"file":"pip-button.js","names":[],"sources":["../../../../src/ui/pip-button/pip-button.tsx"],"sourcesContent":["'use client';\n\nimport { PiPButtonCore, PiPButtonDataAttrs } from '@videojs/core';\nimport { selectPiP } from '@videojs/core/dom';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { createMediaButton } from '../create-media-button';\n\nexport interface PiPButtonProps extends UIComponentProps<'button', PiPButtonCore.State>, PiPButtonCore.Props {}\n\n/** A button that toggles picture-in-picture. */\nexport const PiPButton = createMediaButton<PiPButtonCore, PiPButtonProps>({\n  displayName: 'PiPButton',\n  core: PiPButtonCore,\n  stateAttrMap: PiPButtonDataAttrs,\n  selector: selectPiP,\n  action: (core, state) => core.toggle(state),\n  hotkeyAction: 'togglePictureInPicture',\n  isSupported: (state) => !state.hidden,\n});\n\nexport namespace PiPButton {\n  export type Props = PiPButtonProps;\n  export type State = PiPButtonCore.State;\n}\n"],"mappings":";;;;;;AAWA,MAAa,YAAY,kBAAiD;CACxE,aAAa;CACb,MAAM;CACN,cAAc;CACd,UAAU;CACV,SAAS,MAAM,UAAU,KAAK,OAAO,KAAK;CAC1C,cAAc;CACd,cAAc,UAAU,CAAC,MAAM;AACjC,CAAC"}
+{"version":3,"file":"pip-button.js","names":[],"sources":["../../../../src/ui/pip-button/pip-button.tsx"],"sourcesContent":["import { PiPButtonCore, PiPButtonDataAttrs } from '@videojs/core';\nimport { selectPiP } from '@videojs/core/dom';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { createMediaButton } from '../create-media-button';\n\nexport interface PiPButtonProps extends UIComponentProps<'button', PiPButtonCore.State>, PiPButtonCore.Props {}\n\n/** A button that toggles picture-in-picture. */\nexport const PiPButton = createMediaButton<PiPButtonCore, PiPButtonProps>({\n  displayName: 'PiPButton',\n  core: PiPButtonCore,\n  stateAttrMap: PiPButtonDataAttrs,\n  selector: selectPiP,\n  action: (core, state) => core.toggle(state),\n  hotkeyAction: 'togglePictureInPicture',\n  isSupported: (state) => !state.hidden,\n});\n\nexport namespace PiPButton {\n  export type Props = PiPButtonProps;\n  export type State = PiPButtonCore.State;\n}\n"],"mappings":";;;;;AASA,MAAa,YAAY,kBAAiD;CACxE,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/play-button/play-button.js

@@ -1,4 +1,3 @@
-"use client";
 import { createMediaButton } from "../create-media-button.js";
 import { selectPlayback } from "@videojs/core/dom";
 import { PlayButtonCore, PlayButtonDataAttrs } from "@videojs/core";

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

@@ -1 +1 @@
-{"version":3,"file":"play-button.js","names":[],"sources":["../../../../src/ui/play-button/play-button.tsx"],"sourcesContent":["'use client';\n\nimport { PlayButtonCore, PlayButtonDataAttrs } from '@videojs/core';\nimport { selectPlayback } from '@videojs/core/dom';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { createMediaButton } from '../create-media-button';\n\nexport interface PlayButtonProps extends UIComponentProps<'button', PlayButtonCore.State>, PlayButtonCore.Props {}\n\n/**\n * A button that toggles playback.\n *\n * @example\n * ```tsx\n * <PlayButton />\n *\n * <PlayButton\n *   render={(props, state) => (\n *     <button {...props}>\n *       {state.paused ? <PlayIcon /> : <PauseIcon />}\n *     </button>\n *   )}\n * />\n * ```\n */\nexport const PlayButton = createMediaButton<PlayButtonCore, PlayButtonProps>({\n  displayName: 'PlayButton',\n  core: PlayButtonCore,\n  stateAttrMap: PlayButtonDataAttrs,\n  selector: selectPlayback,\n  action: (core, state) => core.toggle(state),\n  hotkeyAction: 'togglePaused',\n});\n\nexport namespace PlayButton {\n  export type Props = PlayButtonProps;\n  export type State = PlayButtonCore.State;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AA0BA,MAAa,aAAa,kBAAmD;CAC3E,aAAa;CACb,MAAM;CACN,cAAc;CACd,UAAU;CACV,SAAS,MAAM,UAAU,KAAK,OAAO,KAAK;CAC1C,cAAc;AAChB,CAAC"}
+{"version":3,"file":"play-button.js","names":[],"sources":["../../../../src/ui/play-button/play-button.tsx"],"sourcesContent":["import { PlayButtonCore, PlayButtonDataAttrs } from '@videojs/core';\nimport { selectPlayback } from '@videojs/core/dom';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { createMediaButton } from '../create-media-button';\n\nexport interface PlayButtonProps extends UIComponentProps<'button', PlayButtonCore.State>, PlayButtonCore.Props {}\n\n/**\n * A button that toggles playback.\n *\n * @example\n * ```tsx\n * <PlayButton />\n *\n * <PlayButton\n *   render={(props, state) => (\n *     <button {...props}>\n *       {state.paused ? <PlayIcon /> : <PauseIcon />}\n *     </button>\n *   )}\n * />\n * ```\n */\nexport const PlayButton = createMediaButton<PlayButtonCore, PlayButtonProps>({\n  displayName: 'PlayButton',\n  core: PlayButtonCore,\n  stateAttrMap: PlayButtonDataAttrs,\n  selector: selectPlayback,\n  action: (core, state) => core.toggle(state),\n  hotkeyAction: 'togglePaused',\n});\n\nexport namespace PlayButton {\n  export type Props = PlayButtonProps;\n  export type State = PlayButtonCore.State;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAwBA,MAAa,aAAa,kBAAmD;CAC3E,aAAa;CACb,MAAM;CACN,cAAc;CACd,UAAU;CACV,SAAS,MAAM,UAAU,KAAK,OAAO,KAAK;CAC1C,cAAc;AAChB,CAAC"}

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

@@ -1,4 +1,3 @@
-"use client";
 import { createRadioOptionsHook } from "../hooks/create-radio-options-hook.js";
 import { selectPlaybackRate } from "@videojs/core/dom";
 import { useCallback } from "react";

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

@@ -1 +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  type PlaybackRateRadioGroupOption,\n} from '@videojs/core';\nimport { selectPlaybackRate } from '@videojs/core/dom';\nimport { useCallback } from 'react';\n\nimport { createRadioOptionsHook, type TranslatedRadioOption } from '../hooks/create-radio-options-hook';\n\nexport interface PlaybackRateOptionsProps extends PlaybackRateRadioGroupCore.Props {}\n\nexport type PlaybackRateOption = TranslatedRadioOption<PlaybackRateRadioGroupOption>;\n\nexport interface PlaybackRateOptionsResult {\n  state: PlaybackRateRadioGroupCore.State;\n  label: string;\n  rate: number;\n  value: string;\n  selectedLabel: string;\n  options: PlaybackRateOption[];\n  disabled: boolean;\n  hidden: boolean;\n  setRate: (rate: number) => void;\n  setValue: (value: string) => void;\n}\n\nconst usePlaybackRateRadioOptions = createRadioOptionsHook({\n  name: 'usePlaybackRateOptions',\n  feature: 'playbackRate',\n  selector: selectPlaybackRate,\n  createCore: () => new PlaybackRateRadioGroupCoreClass(),\n});\n\n/**\n * Create playback rate menu options from the player playback rate state.\n * Returns `null` when the playback rate feature is not configured.\n *\n * @param props - Optional `label`, `formatRate`, and `disabled` overrides.\n */\nexport function usePlaybackRateOptions(props?: PlaybackRateOptionsProps): PlaybackRateOptionsResult | null {\n  const result = usePlaybackRateRadioOptions(props);\n  const setRate = useCallback((rate: number) => result?.setValue(String(rate)), [result?.setValue]);\n  if (!result) return null;\n\n  return {\n    ...result,\n    rate: result.state.rate,\n    setRate,\n  };\n}\n\nexport namespace usePlaybackRateOptions {\n  export type Props = PlaybackRateOptionsProps;\n  export type Result = PlaybackRateOptionsResult;\n  export type Option = PlaybackRateOption;\n}\n"],"mappings":";;;;;;AA6BA,MAAM,8BAA8B,uBAAuB;CACzD,MAAM;CACN,SAAS;CACT,UAAU;CACV,kBAAkB,IAAIA,2BAAgC;AACxD,CAAC;;;;;;;AAQD,SAAgB,uBAAuB,OAAoE;CACzG,MAAM,SAAS,4BAA4B,KAAK;CAChD,MAAM,UAAU,aAAa,SAAiB,QAAQ,SAAS,OAAO,IAAI,CAAC,GAAG,CAAC,QAAQ,QAAQ,CAAC;CAChG,IAAI,CAAC,QAAQ,OAAO;CAEpB,OAAO;EACL,GAAG;EACH,MAAM,OAAO,MAAM;EACnB;CACF;AACF"}
+{"version":3,"file":"use-playback-rate-options.js","names":["PlaybackRateRadioGroupCoreClass"],"sources":["../../../../src/ui/playback-rate/use-playback-rate-options.ts"],"sourcesContent":["import {\n  type PlaybackRateRadioGroupCore,\n  PlaybackRateRadioGroupCore as PlaybackRateRadioGroupCoreClass,\n  type PlaybackRateRadioGroupOption,\n} from '@videojs/core';\nimport { selectPlaybackRate } from '@videojs/core/dom';\nimport { useCallback } from 'react';\n\nimport { createRadioOptionsHook, type TranslatedRadioOption } from '../hooks/create-radio-options-hook';\n\nexport interface PlaybackRateOptionsProps extends PlaybackRateRadioGroupCore.Props {}\n\nexport type PlaybackRateOption = TranslatedRadioOption<PlaybackRateRadioGroupOption>;\n\nexport interface PlaybackRateOptionsResult {\n  state: PlaybackRateRadioGroupCore.State;\n  label: string;\n  rate: number;\n  value: string;\n  selectedLabel: string;\n  options: PlaybackRateOption[];\n  disabled: boolean;\n  hidden: boolean;\n  setRate: (rate: number) => void;\n  setValue: (value: string) => void;\n}\n\nconst usePlaybackRateRadioOptions = createRadioOptionsHook({\n  name: 'usePlaybackRateOptions',\n  feature: 'playbackRate',\n  selector: selectPlaybackRate,\n  createCore: () => new PlaybackRateRadioGroupCoreClass(),\n});\n\n/**\n * Create playback rate menu options from the player playback rate state.\n * Returns `null` when the playback rate feature is not configured.\n *\n * @param props - Optional `label`, `formatRate`, and `disabled` overrides.\n */\nexport function usePlaybackRateOptions(props?: PlaybackRateOptionsProps): PlaybackRateOptionsResult | null {\n  const result = usePlaybackRateRadioOptions(props);\n  const setRate = useCallback((rate: number) => result?.setValue(String(rate)), [result?.setValue]);\n  if (!result) return null;\n\n  return {\n    ...result,\n    rate: result.state.rate,\n    setRate,\n  };\n}\n\nexport namespace usePlaybackRateOptions {\n  export type Props = PlaybackRateOptionsProps;\n  export type Result = PlaybackRateOptionsResult;\n  export type Option = PlaybackRateOption;\n}\n"],"mappings":";;;;;AA2BA,MAAM,8BAA8B,uBAAuB;CACzD,MAAM;CACN,SAAS;CACT,UAAU;CACV,kBAAkB,IAAIA,2BAAgC;AACxD,CAAC;;;;;;;AAQD,SAAgB,uBAAuB,OAAoE;CACzG,MAAM,SAAS,4BAA4B,KAAK;CAChD,MAAM,UAAU,aAAa,SAAiB,QAAQ,SAAS,OAAO,IAAI,CAAC,GAAG,CAAC,QAAQ,QAAQ,CAAC;CAChG,IAAI,CAAC,QAAQ,OAAO;CAEpB,OAAO;EACL,GAAG;EACH,MAAM,OAAO,MAAM;EACnB;CACF;AACF"}

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

@@ -1,4 +1,3 @@
-"use client";
 import { createMediaButton } from "../create-media-button.js";
 import { selectPlaybackRate } from "@videojs/core/dom";
 import { PlaybackRateButtonCore, PlaybackRateButtonDataAttrs } from "@videojs/core";

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  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,KAAK;CACzC,cAAc;AAChB,CAAC"}
+{"version":3,"file":"playback-rate-button.js","names":[],"sources":["../../../../src/ui/playback-rate-button/playback-rate-button.tsx"],"sourcesContent":["import { 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":";;;;;;;;;;;;;;;;;;;;AA0BA,MAAa,qBAAqB,kBAAmE;CACnG,aAAa;CACb,MAAM;CACN,cAAc;CACd,UAAU;CACV,SAAS,MAAM,UAAU,KAAK,MAAM,KAAK;CACzC,cAAc;AAChB,CAAC"}

package/dist/default/ui/playback-rate-radio-group/playback-rate-radio-group.js

@@ -1,4 +1,3 @@
-"use client";
 import { MenuRadioGroup } from "../menu/menu-radio-group.js";
 import { usePlaybackRateOptions } from "../playback-rate/use-playback-rate-options.js";
 import { getStateDataAttrs } from "@videojs/core/dom";

package/dist/default/ui/playback-rate-radio-group/playback-rate-radio-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"playback-rate-radio-group.js","names":[],"sources":["../../../../src/ui/playback-rate-radio-group/playback-rate-radio-group.tsx"],"sourcesContent":["'use client';\n\nimport { type PlaybackRateRadioGroupCore, PlaybackRateRadioGroupDataAttrs } from '@videojs/core';\nimport { getStateDataAttrs } from '@videojs/core/dom';\nimport { isFunction } from '@videojs/utils/predicate';\nimport type { ReactElement } from 'react';\nimport { Fragment, forwardRef } from 'react';\n\nimport type { HTMLProps, UIComponentProps } from '../../utils/types';\nimport { MenuRadioGroup } from '../menu/menu-radio-group';\nimport type { MenuRadioItemProps } from '../menu/menu-radio-item';\nimport {\n  type PlaybackRateOption,\n  type PlaybackRateOptionsProps,\n  usePlaybackRateOptions,\n} from '../playback-rate/use-playback-rate-options';\n\nexport type PlaybackRateRadioGroupItemState = PlaybackRateOption & {\n  /** Whether this playback rate is currently selected. */\n  checked: boolean;\n};\n\nexport interface PlaybackRateRadioGroupItemProps extends Omit<MenuRadioItemProps, 'ref'> {\n  /** Playback rate represented by the item. */\n  'data-rate': string;\n}\n\nexport interface PlaybackRateRadioGroupProps\n  extends Omit<UIComponentProps<'div', PlaybackRateRadioGroupCore.State>, 'children'>,\n    PlaybackRateOptionsProps {\n  /** Render one consumer-owned menu radio item for every playback rate. */\n  renderItem: (props: PlaybackRateRadioGroupItemProps, state: PlaybackRateRadioGroupItemState) => ReactElement;\n}\n\n/**\n * Renders menu radio items for the player's available playback rates.\n *\n * @example\n * ```tsx\n * <PlaybackRateRadioGroup\n *   renderItem={(props, item) => (\n *     <Menu.RadioItem {...props}>\n *       {item.label}\n *       <Menu.ItemIndicator checked={item.checked} />\n *     </Menu.RadioItem>\n *   )}\n * />\n * ```\n */\nexport const PlaybackRateRadioGroup = forwardRef<HTMLDivElement, PlaybackRateRadioGroupProps>(\n  function PlaybackRateRadioGroup(componentProps, forwardedRef) {\n    const {\n      renderItem,\n      render,\n      className,\n      style,\n      label,\n      formatRate,\n      disabled,\n      'aria-label': ariaLabelProp,\n      'aria-labelledby': ariaLabelledBy,\n      ...elementProps\n    } = componentProps;\n    const playbackRate = usePlaybackRateOptions({ label, formatRate, disabled });\n    if (!playbackRate) return null;\n\n    const { state, value, options, setValue } = playbackRate;\n    const ariaLabel = ariaLabelProp ?? (ariaLabelledBy === undefined ? playbackRate.label : undefined);\n\n    return (\n      <MenuRadioGroup\n        {...getStateDataAttrs(state, PlaybackRateRadioGroupDataAttrs)}\n        {...elementProps}\n        ref={forwardedRef}\n        className={isFunction(className) ? className(state) : className}\n        style={isFunction(style) ? style(state) : style}\n        render={isFunction(render) ? (props: HTMLProps) => render(props, state) : render}\n        value={value}\n        onValueChange={setValue}\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledBy}\n        aria-disabled={state.disabled || undefined}\n        hidden={state.hidden}\n      >\n        {options.map((option) => {\n          const itemState = { ...option, checked: option.value === value };\n\n          return (\n            <Fragment key={option.value}>\n              {renderItem(\n                {\n                  value: option.value,\n                  disabled: option.disabled,\n                  'data-rate': option.value,\n                  children: option.label,\n                },\n                itemState\n              )}\n            </Fragment>\n          );\n        })}\n      </MenuRadioGroup>\n    );\n  }\n);\n\nexport namespace PlaybackRateRadioGroup {\n  export type Props = PlaybackRateRadioGroupProps;\n  export type State = PlaybackRateRadioGroupCore.State;\n  export type ItemProps = PlaybackRateRadioGroupItemProps;\n  export type ItemState = PlaybackRateRadioGroupItemState;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAiDA,MAAa,yBAAyB,WACpC,SAAS,uBAAuB,gBAAgB,cAAc;CAC5D,MAAM,EACJ,YACA,QACA,WACA,OACA,OACA,YACA,UACA,cAAc,eACd,mBAAmB,gBACnB,GAAG,iBACD;CACJ,MAAM,eAAe,uBAAuB;EAAE;EAAO;EAAY;CAAS,CAAC;CAC3E,IAAI,CAAC,cAAc,OAAO;CAE1B,MAAM,EAAE,OAAO,OAAO,SAAS,aAAa;CAC5C,MAAM,YAAY,kBAAkB,mBAAmB,KAAA,IAAY,aAAa,QAAQ,KAAA;CAExF,OACE,oBAAC,gBAAD;EACE,GAAI,kBAAkB,OAAO,+BAA+B;EAC5D,GAAI;EACJ,KAAK;EACL,WAAW,WAAW,SAAS,IAAI,UAAU,KAAK,IAAI;EACtD,OAAO,WAAW,KAAK,IAAI,MAAM,KAAK,IAAI;EAC1C,QAAQ,WAAW,MAAM,KAAK,UAAqB,OAAO,OAAO,KAAK,IAAI;EACnE;EACP,eAAe;EACf,cAAY;EACZ,mBAAiB;EACjB,iBAAe,MAAM,YAAY,KAAA;EACjC,QAAQ,MAAM;EAEb,UAAA,QAAQ,KAAK,WAAW;GACvB,MAAM,YAAY;IAAE,GAAG;IAAQ,SAAS,OAAO,UAAU;GAAM;GAE/D,OACE,oBAAC,UAAD,EAAA,UACG,WACC;IACE,OAAO,OAAO;IACd,UAAU,OAAO;IACjB,aAAa,OAAO;IACpB,UAAU,OAAO;GACnB,GACA,SACF,EACQ,GAVK,OAAO,KAUZ;EAEd,CAAC;CACa,CAAA;AAEpB,CACF"}
+{"version":3,"file":"playback-rate-radio-group.js","names":[],"sources":["../../../../src/ui/playback-rate-radio-group/playback-rate-radio-group.tsx"],"sourcesContent":["import { type PlaybackRateRadioGroupCore, PlaybackRateRadioGroupDataAttrs } from '@videojs/core';\nimport { getStateDataAttrs } from '@videojs/core/dom';\nimport { isFunction } from '@videojs/utils/predicate';\nimport type { ReactElement } from 'react';\nimport { Fragment, forwardRef } from 'react';\n\nimport type { HTMLProps, UIComponentProps } from '../../utils/types';\nimport { MenuRadioGroup } from '../menu/menu-radio-group';\nimport type { MenuRadioItemProps } from '../menu/menu-radio-item';\nimport {\n  type PlaybackRateOption,\n  type PlaybackRateOptionsProps,\n  usePlaybackRateOptions,\n} from '../playback-rate/use-playback-rate-options';\n\nexport type PlaybackRateRadioGroupItemState = PlaybackRateOption & {\n  /** Whether this playback rate is currently selected. */\n  checked: boolean;\n};\n\nexport interface PlaybackRateRadioGroupItemProps extends Omit<MenuRadioItemProps, 'ref'> {\n  /** Playback rate represented by the item. */\n  'data-rate': string;\n}\n\nexport interface PlaybackRateRadioGroupProps\n  extends Omit<UIComponentProps<'div', PlaybackRateRadioGroupCore.State>, 'children'>,\n    PlaybackRateOptionsProps {\n  /** Render one consumer-owned menu radio item for every playback rate. */\n  renderItem: (props: PlaybackRateRadioGroupItemProps, state: PlaybackRateRadioGroupItemState) => ReactElement;\n}\n\n/**\n * Renders menu radio items for the player's available playback rates.\n *\n * @example\n * ```tsx\n * <PlaybackRateRadioGroup\n *   renderItem={(props, item) => (\n *     <Menu.RadioItem {...props}>\n *       {item.label}\n *       <Menu.ItemIndicator checked={item.checked} />\n *     </Menu.RadioItem>\n *   )}\n * />\n * ```\n */\nexport const PlaybackRateRadioGroup = forwardRef<HTMLDivElement, PlaybackRateRadioGroupProps>(\n  function PlaybackRateRadioGroup(componentProps, forwardedRef) {\n    const {\n      renderItem,\n      render,\n      className,\n      style,\n      label,\n      formatRate,\n      disabled,\n      'aria-label': ariaLabelProp,\n      'aria-labelledby': ariaLabelledBy,\n      ...elementProps\n    } = componentProps;\n    const playbackRate = usePlaybackRateOptions({ label, formatRate, disabled });\n    if (!playbackRate) return null;\n\n    const { state, value, options, setValue } = playbackRate;\n    const ariaLabel = ariaLabelProp ?? (ariaLabelledBy === undefined ? playbackRate.label : undefined);\n\n    return (\n      <MenuRadioGroup\n        {...getStateDataAttrs(state, PlaybackRateRadioGroupDataAttrs)}\n        {...elementProps}\n        ref={forwardedRef}\n        className={isFunction(className) ? className(state) : className}\n        style={isFunction(style) ? style(state) : style}\n        render={isFunction(render) ? (props: HTMLProps) => render(props, state) : render}\n        value={value}\n        onValueChange={setValue}\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledBy}\n        aria-disabled={state.disabled || undefined}\n        hidden={state.hidden}\n      >\n        {options.map((option) => {\n          const itemState = { ...option, checked: option.value === value };\n\n          return (\n            <Fragment key={option.value}>\n              {renderItem(\n                {\n                  value: option.value,\n                  disabled: option.disabled,\n                  'data-rate': option.value,\n                  children: option.label,\n                },\n                itemState\n              )}\n            </Fragment>\n          );\n        })}\n      </MenuRadioGroup>\n    );\n  }\n);\n\nexport namespace PlaybackRateRadioGroup {\n  export type Props = PlaybackRateRadioGroupProps;\n  export type State = PlaybackRateRadioGroupCore.State;\n  export type ItemProps = PlaybackRateRadioGroupItemProps;\n  export type ItemState = PlaybackRateRadioGroupItemState;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AA+CA,MAAa,yBAAyB,WACpC,SAAS,uBAAuB,gBAAgB,cAAc;CAC5D,MAAM,EACJ,YACA,QACA,WACA,OACA,OACA,YACA,UACA,cAAc,eACd,mBAAmB,gBACnB,GAAG,iBACD;CACJ,MAAM,eAAe,uBAAuB;EAAE;EAAO;EAAY;CAAS,CAAC;CAC3E,IAAI,CAAC,cAAc,OAAO;CAE1B,MAAM,EAAE,OAAO,OAAO,SAAS,aAAa;CAC5C,MAAM,YAAY,kBAAkB,mBAAmB,KAAA,IAAY,aAAa,QAAQ,KAAA;CAExF,OACE,oBAAC,gBAAD;EACE,GAAI,kBAAkB,OAAO,+BAA+B;EAC5D,GAAI;EACJ,KAAK;EACL,WAAW,WAAW,SAAS,IAAI,UAAU,KAAK,IAAI;EACtD,OAAO,WAAW,KAAK,IAAI,MAAM,KAAK,IAAI;EAC1C,QAAQ,WAAW,MAAM,KAAK,UAAqB,OAAO,OAAO,KAAK,IAAI;EACnE;EACP,eAAe;EACf,cAAY;EACZ,mBAAiB;EACjB,iBAAe,MAAM,YAAY,KAAA;EACjC,QAAQ,MAAM;EAEb,UAAA,QAAQ,KAAK,WAAW;GACvB,MAAM,YAAY;IAAE,GAAG;IAAQ,SAAS,OAAO,UAAU;GAAM;GAE/D,OACE,oBAAC,UAAD,EAAA,UACG,WACC;IACE,OAAO,OAAO;IACd,UAAU,OAAO;IACjB,aAAa,OAAO;IACpB,UAAU,OAAO;GACnB,GACA,SACF,EACQ,GAVK,OAAO,KAUZ;EAEd,CAAC;CACa,CAAA;AAEpB,CACF"}

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

@@ -1,4 +1,3 @@
-"use client";
 import { createContext, useContext } from "react";
 //#region src/ui/popover/context.tsx
 const PopoverContext = createContext(null);

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

@@ -1 +1 @@
-{"version":3,"file":"context.js","names":[],"sources":["../../../../src/ui/popover/context.tsx"],"sourcesContent":["'use client';\n\nimport type { PopoverCore, StateAttrMap } from '@videojs/core';\nimport type { MediaContainer, PopoverApi, PositioningBoundary } from '@videojs/core/dom';\nimport { createContext, useContext } from 'react';\n\nexport interface PopoverContextValue {\n  core: PopoverCore;\n  popover: PopoverApi;\n  state: PopoverCore.State;\n  preferredSide: PopoverCore.State['side'];\n  setPositionedSide: (side: PopoverCore.State['side']) => void;\n  stateAttrMap: StateAttrMap<PopoverCore.State>;\n  anchorName: string;\n  popupId: string;\n  boundary: PositioningBoundary;\n  container: MediaContainer | null;\n}\n\nconst PopoverContext = createContext<PopoverContextValue | null>(null);\n\nexport const PopoverContextProvider = PopoverContext.Provider;\n\nexport function usePopoverContext(): PopoverContextValue {\n  const ctx = useContext(PopoverContext);\n  if (!ctx) throw new Error('Popover compound components must be used within a Popover.Root');\n  return ctx;\n}\n"],"mappings":";;;AAmBA,MAAM,iBAAiB,cAA0C,IAAI;AAErE,MAAa,yBAAyB,eAAe;AAErD,SAAgB,oBAAyC;CACvD,MAAM,MAAM,WAAW,cAAc;CACrC,IAAI,CAAC,KAAK,MAAM,IAAI,MAAM,gEAAgE;CAC1F,OAAO;AACT"}
+{"version":3,"file":"context.js","names":[],"sources":["../../../../src/ui/popover/context.tsx"],"sourcesContent":["import type { PopoverCore, StateAttrMap } from '@videojs/core';\nimport type { MediaContainer, PopoverApi, PositioningBoundary } from '@videojs/core/dom';\nimport { createContext, useContext } from 'react';\n\nexport interface PopoverContextValue {\n  core: PopoverCore;\n  popover: PopoverApi;\n  state: PopoverCore.State;\n  preferredSide: PopoverCore.State['side'];\n  setPositionedSide: (side: PopoverCore.State['side']) => void;\n  stateAttrMap: StateAttrMap<PopoverCore.State>;\n  anchorName: string;\n  popupId: string;\n  boundary: PositioningBoundary;\n  container: MediaContainer | null;\n}\n\nconst PopoverContext = createContext<PopoverContextValue | null>(null);\n\nexport const PopoverContextProvider = PopoverContext.Provider;\n\nexport function usePopoverContext(): PopoverContextValue {\n  const ctx = useContext(PopoverContext);\n  if (!ctx) throw new Error('Popover compound components must be used within a Popover.Root');\n  return ctx;\n}\n"],"mappings":";;AAiBA,MAAM,iBAAiB,cAA0C,IAAI;AAErE,MAAa,yBAAyB,eAAe;AAErD,SAAgB,oBAAyC;CACvD,MAAM,MAAM,WAAW,cAAc;CACrC,IAAI,CAAC,KAAK,MAAM,IAAI,MAAM,gEAAgE;CAC1F,OAAO;AACT"}

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

@@ -1,4 +1,3 @@
-"use client";
 import { createContextPart } from "../create-context-part.js";
 import { usePopoverContext } from "./context.js";
 //#region src/ui/popover/popover-arrow.tsx

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

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

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

@@ -1,4 +1,3 @@
-"use client";
 import { useComposedRefs } from "../../utils/use-composed-refs.js";
 import { renderElement } from "../../utils/use-render.js";
 import { usePopupPosition } from "./use-popup-position.js";

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

@@ -1 +1 @@
-{"version":3,"file":"popover-popup.js","names":[],"sources":["../../../../src/ui/popover/popover-popup.tsx"],"sourcesContent":["'use client';\n\nimport type { PopoverState } from '@videojs/core';\nimport { forwardRef, useCallback, useMemo, useRef } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { useComposedRefs } from '../../utils/use-composed-refs';\nimport { renderElement } from '../../utils/use-render';\nimport { usePopoverContext } from './context';\nimport { usePopupPosition } from './use-popup-position';\n\nexport interface PopoverPopupProps extends UIComponentProps<'div', PopoverState> {}\n\n/** Container for the popover content. Positioned relative to the trigger using CSS anchor positioning with a JavaScript fallback. */\nexport const PopoverPopup = forwardRef<HTMLDivElement, PopoverPopupProps>(function PopoverPopup(\n  { render, className, style, ...elementProps },\n  forwardedRef\n) {\n  const {\n    core,\n    popover,\n    state,\n    preferredSide,\n    setPositionedSide,\n    stateAttrMap,\n    anchorName,\n    popupId,\n    boundary,\n    container,\n  } = usePopoverContext();\n  const internalRef = useRef<HTMLDivElement>(null);\n\n  const popupRef = useCallback(\n    (el: HTMLDivElement | null) => {\n      popover.setPopupElement(el);\n    },\n    [popover]\n  );\n\n  const composedRef = useComposedRefs(forwardedRef, popupRef, internalRef);\n\n  // --- Positioning ---\n\n  const posOpts = useMemo(() => ({ side: preferredSide, align: state.align }), [preferredSide, state.align]);\n\n  const positioningStyle = usePopupPosition({\n    open: state.open,\n    anchorName,\n    position: posOpts,\n    triggerSource: popover,\n    popupRef: internalRef,\n    boundary,\n    container,\n    onSideChange: setPositionedSide,\n  });\n\n  // --- Visibility ---\n\n  if (!state.open) {\n    return null;\n  }\n\n  // Remap DOM focus events to React synthetic event names.\n  const { onFocusOut, ...restPopupProps } = popover.popupProps;\n\n  return renderElement(\n    'div',\n    { render, className, style },\n    {\n      state,\n      stateAttrMap,\n      ref: composedRef,\n      props: [\n        {\n          id: popupId,\n          style: positioningStyle,\n          ...core.getPopupAttrs(state),\n        },\n        { ...restPopupProps, onBlur: onFocusOut },\n        elementProps,\n      ],\n    }\n  );\n});\n\nexport namespace PopoverPopup {\n  export type Props = PopoverPopupProps;\n  export type State = PopoverState;\n}\n"],"mappings":";;;;;;;;AAcA,MAAa,eAAe,WAA8C,SAAS,aACjF,EAAE,QAAQ,WAAW,OAAO,GAAG,gBAC/B,cACA;CACA,MAAM,EACJ,MACA,SACA,OACA,eACA,mBACA,cACA,YACA,SACA,UACA,cACE,kBAAkB;CACtB,MAAM,cAAc,OAAuB,IAAI;CAS/C,MAAM,cAAc,gBAAgB,cAPnB,aACd,OAA8B;EAC7B,QAAQ,gBAAgB,EAAE;CAC5B,GACA,CAAC,OAAO,CAG+C,GAAG,WAAW;CAIvE,MAAM,UAAU,eAAe;EAAE,MAAM;EAAe,OAAO,MAAM;CAAM,IAAI,CAAC,eAAe,MAAM,KAAK,CAAC;CAEzG,MAAM,mBAAmB,iBAAiB;EACxC,MAAM,MAAM;EACZ;EACA,UAAU;EACV,eAAe;EACf,UAAU;EACV;EACA;EACA,cAAc;CAChB,CAAC;CAID,IAAI,CAAC,MAAM,MACT,OAAO;CAIT,MAAM,EAAE,YAAY,GAAG,mBAAmB,QAAQ;CAElD,OAAO,cACL,OACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EACE;EACA;EACA,KAAK;EACL,OAAO;GACL;IACE,IAAI;IACJ,OAAO;IACP,GAAG,KAAK,cAAc,KAAK;GAC7B;GACA;IAAE,GAAG;IAAgB,QAAQ;GAAW;GACxC;EACF;CACF,CACF;AACF,CAAC"}
+{"version":3,"file":"popover-popup.js","names":[],"sources":["../../../../src/ui/popover/popover-popup.tsx"],"sourcesContent":["import type { PopoverState } from '@videojs/core';\nimport { forwardRef, useCallback, useMemo, useRef } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { useComposedRefs } from '../../utils/use-composed-refs';\nimport { renderElement } from '../../utils/use-render';\nimport { usePopoverContext } from './context';\nimport { usePopupPosition } from './use-popup-position';\n\nexport interface PopoverPopupProps extends UIComponentProps<'div', PopoverState> {}\n\n/** Container for the popover content. Positioned relative to the trigger using CSS anchor positioning with a JavaScript fallback. */\nexport const PopoverPopup = forwardRef<HTMLDivElement, PopoverPopupProps>(function PopoverPopup(\n  { render, className, style, ...elementProps },\n  forwardedRef\n) {\n  const {\n    core,\n    popover,\n    state,\n    preferredSide,\n    setPositionedSide,\n    stateAttrMap,\n    anchorName,\n    popupId,\n    boundary,\n    container,\n  } = usePopoverContext();\n  const internalRef = useRef<HTMLDivElement>(null);\n\n  const popupRef = useCallback(\n    (el: HTMLDivElement | null) => {\n      popover.setPopupElement(el);\n    },\n    [popover]\n  );\n\n  const composedRef = useComposedRefs(forwardedRef, popupRef, internalRef);\n\n  // --- Positioning ---\n\n  const posOpts = useMemo(() => ({ side: preferredSide, align: state.align }), [preferredSide, state.align]);\n\n  const positioningStyle = usePopupPosition({\n    open: state.open,\n    anchorName,\n    position: posOpts,\n    triggerSource: popover,\n    popupRef: internalRef,\n    boundary,\n    container,\n    onSideChange: setPositionedSide,\n  });\n\n  // --- Visibility ---\n\n  if (!state.open) {\n    return null;\n  }\n\n  // Remap DOM focus events to React synthetic event names.\n  const { onFocusOut, ...restPopupProps } = popover.popupProps;\n\n  return renderElement(\n    'div',\n    { render, className, style },\n    {\n      state,\n      stateAttrMap,\n      ref: composedRef,\n      props: [\n        {\n          id: popupId,\n          style: positioningStyle,\n          ...core.getPopupAttrs(state),\n        },\n        { ...restPopupProps, onBlur: onFocusOut },\n        elementProps,\n      ],\n    }\n  );\n});\n\nexport namespace PopoverPopup {\n  export type Props = PopoverPopupProps;\n  export type State = PopoverState;\n}\n"],"mappings":";;;;;;;AAYA,MAAa,eAAe,WAA8C,SAAS,aACjF,EAAE,QAAQ,WAAW,OAAO,GAAG,gBAC/B,cACA;CACA,MAAM,EACJ,MACA,SACA,OACA,eACA,mBACA,cACA,YACA,SACA,UACA,cACE,kBAAkB;CACtB,MAAM,cAAc,OAAuB,IAAI;CAS/C,MAAM,cAAc,gBAAgB,cAPnB,aACd,OAA8B;EAC7B,QAAQ,gBAAgB,EAAE;CAC5B,GACA,CAAC,OAAO,CAG+C,GAAG,WAAW;CAIvE,MAAM,UAAU,eAAe;EAAE,MAAM;EAAe,OAAO,MAAM;CAAM,IAAI,CAAC,eAAe,MAAM,KAAK,CAAC;CAEzG,MAAM,mBAAmB,iBAAiB;EACxC,MAAM,MAAM;EACZ;EACA,UAAU;EACV,eAAe;EACf,UAAU;EACV;EACA;EACA,cAAc;CAChB,CAAC;CAID,IAAI,CAAC,MAAM,MACT,OAAO;CAIT,MAAM,EAAE,YAAY,GAAG,mBAAmB,QAAQ;CAElD,OAAO,cACL,OACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EACE;EACA;EACA,KAAK;EACL,OAAO;GACL;IACE,IAAI;IACJ,OAAO;IACP,GAAG,KAAK,cAAc,KAAK;GAC7B;GACA;IAAE,GAAG;IAAgB,QAAQ;GAAW;GACxC;EACF;CACF,CACF;AACF,CAAC"}

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

@@ -1,4 +1,3 @@
-"use client";
 import { useOptionalContainer } from "../../player/context.js";
 import { useOptionalPopupGroup } from "../../player/popup-group-context.js";
 import { useLatestRef } from "../../utils/use-latest-ref.js";

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

@@ -1 +1 @@
-{"version":3,"file":"popover-root.js","names":[],"sources":["../../../../src/ui/popover/popover-root.tsx"],"sourcesContent":["'use client';\n\nimport { type PopoverProps as CorePopoverProps, PopoverCore, PopoverDataAttrs } from '@videojs/core';\nimport {\n  createPopover,\n  createTransition,\n  type PopoverChangeDetails,\n  type PositioningBoundary,\n} from '@videojs/core/dom';\nimport { useSnapshot } from '@videojs/store/react';\nimport { isUndefined } from '@videojs/utils/predicate';\nimport type { ReactNode } from 'react';\nimport { useEffect, useState } from 'react';\nimport { useOptionalContainer } from '../../player/context';\nimport { useOptionalPopupGroup } from '../../player/popup-group-context';\nimport { useDestroy } from '../../utils/use-destroy';\nimport { useLatestRef } from '../../utils/use-latest-ref';\nimport { useSafeId } from '../../utils/use-safe-id';\nimport { useOptionalControlsContext } from '../controls/context';\nimport { usePositionedState } from '../hooks/use-positioned-state';\nimport { PopoverContextProvider } from './context';\n\nexport interface PopoverRootProps extends CorePopoverProps {\n  /** Boundary used to constrain the popup size. */\n  boundary?: PositioningBoundary;\n  /** Called when the popover open state changes (fires immediately, before animations). */\n  onOpenChange?: (open: boolean, details: PopoverChangeDetails) => void;\n  /** Called after open/close animations complete. */\n  onOpenChangeComplete?: (open: boolean) => void;\n  children?: ReactNode;\n}\n\nexport function PopoverRoot({\n  open: controlledOpen,\n  defaultOpen = PopoverCore.defaultProps.defaultOpen,\n  onOpenChange: onOpenChangeProp,\n  onOpenChangeComplete: onOpenChangeCompleteProp,\n  openOnHover = PopoverCore.defaultProps.openOnHover,\n  delay = PopoverCore.defaultProps.delay,\n  closeDelay = PopoverCore.defaultProps.closeDelay,\n  boundary = 'container',\n  children,\n  ...coreProps\n}: PopoverRootProps): ReactNode {\n  const container = useOptionalContainer();\n  const popupGroup = useOptionalPopupGroup();\n  const controls = useOptionalControlsContext();\n  const [core] = useState(() => new PopoverCore(coreProps));\n  core.setProps(coreProps);\n\n  const isControlled = !isUndefined(controlledOpen);\n\n  // Keep refs that always point to the latest values so the\n  // createPopover closure never reads stale props.\n  const onOpenChangeRef = useLatestRef(onOpenChangeProp);\n  const onOpenChangeCompleteRef = useLatestRef(onOpenChangeCompleteProp);\n  const closeOnEscapeRef = useLatestRef(coreProps.closeOnEscape);\n  const closeOnOutsideClickRef = useLatestRef(coreProps.closeOnOutsideClick);\n  const openOnHoverRef = useLatestRef(openOnHover);\n  const delayRef = useLatestRef(delay);\n  const closeDelayRef = useLatestRef(closeDelay);\n  const popupGroupRef = useLatestRef(popupGroup);\n\n  const [popover] = useState(() => {\n    const instance = createPopover({\n      transition: createTransition(),\n      onOpenChange: (nextOpen: boolean, details: PopoverChangeDetails) => {\n        onOpenChangeRef.current?.(nextOpen, details);\n      },\n      onOpenChangeComplete: (nextOpen: boolean) => {\n        onOpenChangeCompleteRef.current?.(nextOpen);\n      },\n      closeOnEscape: () => closeOnEscapeRef.current ?? PopoverCore.defaultProps.closeOnEscape,\n      closeOnOutsideClick: () => closeOnOutsideClickRef.current ?? PopoverCore.defaultProps.closeOnOutsideClick,\n      openOnHover: () => openOnHoverRef.current,\n      delay: () => delayRef.current,\n      closeDelay: () => closeDelayRef.current,\n      group: () => popupGroupRef.current,\n    });\n\n    // Apply defaultOpen on creation (uncontrolled only)\n    if (!isControlled && defaultOpen) {\n      instance.open('click');\n    }\n\n    return instance;\n  });\n\n  const anchorName = useSafeId();\n  const popupId = useSafeId('popup');\n\n  // Sync controlled open prop -> internal input state.\n  useEffect(() => {\n    if (isUndefined(controlledOpen)) return;\n\n    const { active: inputOpen } = popover.input.current;\n    if (controlledOpen === inputOpen) return;\n\n    if (controlledOpen) {\n      popover.open('click');\n    } else {\n      popover.close('click');\n    }\n  }, [controlledOpen, popover]);\n\n  useEffect(() => {\n    if (isUndefined(controls?.state.visible)) return;\n    if (controls.state.visible) return;\n\n    popover.close('imperative-action');\n  }, [controls?.state.visible, popover]);\n\n  useDestroy(popover);\n\n  const input = useSnapshot(popover.input);\n  core.setInput(input);\n  const { state, preferredSide, setPositionedSide } = usePositionedState(core.getState());\n\n  return (\n    <PopoverContextProvider\n      value={{\n        core,\n        popover,\n        state,\n        preferredSide,\n        setPositionedSide,\n        stateAttrMap: PopoverDataAttrs,\n        anchorName,\n        popupId,\n        boundary,\n        container,\n      }}\n    >\n      {children}\n    </PopoverContextProvider>\n  );\n}\n\nexport namespace PopoverRoot {\n  export type Props = PopoverRootProps;\n}\n"],"mappings":";;;;;;;;;;;;;;;;AAgCA,SAAgB,YAAY,EAC1B,MAAM,gBACN,cAAc,YAAY,aAAa,aACvC,cAAc,kBACd,sBAAsB,0BACtB,cAAc,YAAY,aAAa,aACvC,QAAQ,YAAY,aAAa,OACjC,aAAa,YAAY,aAAa,YACtC,WAAW,aACX,UACA,GAAG,aAC2B;CAC9B,MAAM,YAAY,qBAAqB;CACvC,MAAM,aAAa,sBAAsB;CACzC,MAAM,WAAW,2BAA2B;CAC5C,MAAM,CAAC,QAAQ,eAAe,IAAI,YAAY,SAAS,CAAC;CACxD,KAAK,SAAS,SAAS;CAEvB,MAAM,eAAe,CAAC,YAAY,cAAc;CAIhD,MAAM,kBAAkB,aAAa,gBAAgB;CACrD,MAAM,0BAA0B,aAAa,wBAAwB;CACrE,MAAM,mBAAmB,aAAa,UAAU,aAAa;CAC7D,MAAM,yBAAyB,aAAa,UAAU,mBAAmB;CACzE,MAAM,iBAAiB,aAAa,WAAW;CAC/C,MAAM,WAAW,aAAa,KAAK;CACnC,MAAM,gBAAgB,aAAa,UAAU;CAC7C,MAAM,gBAAgB,aAAa,UAAU;CAE7C,MAAM,CAAC,WAAW,eAAe;EAC/B,MAAM,WAAW,cAAc;GAC7B,YAAY,iBAAiB;GAC7B,eAAe,UAAmB,YAAkC;IAClE,gBAAgB,UAAU,UAAU,OAAO;GAC7C;GACA,uBAAuB,aAAsB;IAC3C,wBAAwB,UAAU,QAAQ;GAC5C;GACA,qBAAqB,iBAAiB,WAAW,YAAY,aAAa;GAC1E,2BAA2B,uBAAuB,WAAW,YAAY,aAAa;GACtF,mBAAmB,eAAe;GAClC,aAAa,SAAS;GACtB,kBAAkB,cAAc;GAChC,aAAa,cAAc;EAC7B,CAAC;EAGD,IAAI,CAAC,gBAAgB,aACnB,SAAS,KAAK,OAAO;EAGvB,OAAO;CACT,CAAC;CAED,MAAM,aAAa,UAAU;CAC7B,MAAM,UAAU,UAAU,OAAO;CAGjC,gBAAgB;EACd,IAAI,YAAY,cAAc,GAAG;EAEjC,MAAM,EAAE,QAAQ,cAAc,QAAQ,MAAM;EAC5C,IAAI,mBAAmB,WAAW;EAElC,IAAI,gBACF,QAAQ,KAAK,OAAO;OAEpB,QAAQ,MAAM,OAAO;CAEzB,GAAG,CAAC,gBAAgB,OAAO,CAAC;CAE5B,gBAAgB;EACd,IAAI,YAAY,UAAU,MAAM,OAAO,GAAG;EAC1C,IAAI,SAAS,MAAM,SAAS;EAE5B,QAAQ,MAAM,mBAAmB;CACnC,GAAG,CAAC,UAAU,MAAM,SAAS,OAAO,CAAC;CAErC,WAAW,OAAO;CAElB,MAAM,QAAQ,YAAY,QAAQ,KAAK;CACvC,KAAK,SAAS,KAAK;CACnB,MAAM,EAAE,OAAO,eAAe,sBAAsB,mBAAmB,KAAK,SAAS,CAAC;CAEtF,OACE,oBAAC,wBAAD;EACE,OAAO;GACL;GACA;GACA;GACA;GACA;GACA,cAAc;GACd;GACA;GACA;GACA;EACF;EAEC;CACqB,CAAA;AAE5B"}
+{"version":3,"file":"popover-root.js","names":[],"sources":["../../../../src/ui/popover/popover-root.tsx"],"sourcesContent":["import { type PopoverProps as CorePopoverProps, PopoverCore, PopoverDataAttrs } from '@videojs/core';\nimport {\n  createPopover,\n  createTransition,\n  type PopoverChangeDetails,\n  type PositioningBoundary,\n} from '@videojs/core/dom';\nimport { useSnapshot } from '@videojs/store/react';\nimport { isUndefined } from '@videojs/utils/predicate';\nimport type { ReactNode } from 'react';\nimport { useEffect, useState } from 'react';\nimport { useOptionalContainer } from '../../player/context';\nimport { useOptionalPopupGroup } from '../../player/popup-group-context';\nimport { useDestroy } from '../../utils/use-destroy';\nimport { useLatestRef } from '../../utils/use-latest-ref';\nimport { useSafeId } from '../../utils/use-safe-id';\nimport { useOptionalControlsContext } from '../controls/context';\nimport { usePositionedState } from '../hooks/use-positioned-state';\nimport { PopoverContextProvider } from './context';\n\nexport interface PopoverRootProps extends CorePopoverProps {\n  /** Boundary used to constrain the popup size. */\n  boundary?: PositioningBoundary;\n  /** Called when the popover open state changes (fires immediately, before animations). */\n  onOpenChange?: (open: boolean, details: PopoverChangeDetails) => void;\n  /** Called after open/close animations complete. */\n  onOpenChangeComplete?: (open: boolean) => void;\n  children?: ReactNode;\n}\n\nexport function PopoverRoot({\n  open: controlledOpen,\n  defaultOpen = PopoverCore.defaultProps.defaultOpen,\n  onOpenChange: onOpenChangeProp,\n  onOpenChangeComplete: onOpenChangeCompleteProp,\n  openOnHover = PopoverCore.defaultProps.openOnHover,\n  delay = PopoverCore.defaultProps.delay,\n  closeDelay = PopoverCore.defaultProps.closeDelay,\n  boundary = 'container',\n  children,\n  ...coreProps\n}: PopoverRootProps): ReactNode {\n  const container = useOptionalContainer();\n  const popupGroup = useOptionalPopupGroup();\n  const controls = useOptionalControlsContext();\n  const [core] = useState(() => new PopoverCore(coreProps));\n  core.setProps(coreProps);\n\n  const isControlled = !isUndefined(controlledOpen);\n\n  // Keep refs that always point to the latest values so the\n  // createPopover closure never reads stale props.\n  const onOpenChangeRef = useLatestRef(onOpenChangeProp);\n  const onOpenChangeCompleteRef = useLatestRef(onOpenChangeCompleteProp);\n  const closeOnEscapeRef = useLatestRef(coreProps.closeOnEscape);\n  const closeOnOutsideClickRef = useLatestRef(coreProps.closeOnOutsideClick);\n  const openOnHoverRef = useLatestRef(openOnHover);\n  const delayRef = useLatestRef(delay);\n  const closeDelayRef = useLatestRef(closeDelay);\n  const popupGroupRef = useLatestRef(popupGroup);\n\n  const [popover] = useState(() => {\n    const instance = createPopover({\n      transition: createTransition(),\n      onOpenChange: (nextOpen: boolean, details: PopoverChangeDetails) => {\n        onOpenChangeRef.current?.(nextOpen, details);\n      },\n      onOpenChangeComplete: (nextOpen: boolean) => {\n        onOpenChangeCompleteRef.current?.(nextOpen);\n      },\n      closeOnEscape: () => closeOnEscapeRef.current ?? PopoverCore.defaultProps.closeOnEscape,\n      closeOnOutsideClick: () => closeOnOutsideClickRef.current ?? PopoverCore.defaultProps.closeOnOutsideClick,\n      openOnHover: () => openOnHoverRef.current,\n      delay: () => delayRef.current,\n      closeDelay: () => closeDelayRef.current,\n      group: () => popupGroupRef.current,\n    });\n\n    // Apply defaultOpen on creation (uncontrolled only)\n    if (!isControlled && defaultOpen) {\n      instance.open('click');\n    }\n\n    return instance;\n  });\n\n  const anchorName = useSafeId();\n  const popupId = useSafeId('popup');\n\n  // Sync controlled open prop -> internal input state.\n  useEffect(() => {\n    if (isUndefined(controlledOpen)) return;\n\n    const { active: inputOpen } = popover.input.current;\n    if (controlledOpen === inputOpen) return;\n\n    if (controlledOpen) {\n      popover.open('click');\n    } else {\n      popover.close('click');\n    }\n  }, [controlledOpen, popover]);\n\n  useEffect(() => {\n    if (isUndefined(controls?.state.visible)) return;\n    if (controls.state.visible) return;\n\n    popover.close('imperative-action');\n  }, [controls?.state.visible, popover]);\n\n  useDestroy(popover);\n\n  const input = useSnapshot(popover.input);\n  core.setInput(input);\n  const { state, preferredSide, setPositionedSide } = usePositionedState(core.getState());\n\n  return (\n    <PopoverContextProvider\n      value={{\n        core,\n        popover,\n        state,\n        preferredSide,\n        setPositionedSide,\n        stateAttrMap: PopoverDataAttrs,\n        anchorName,\n        popupId,\n        boundary,\n        container,\n      }}\n    >\n      {children}\n    </PopoverContextProvider>\n  );\n}\n\nexport namespace PopoverRoot {\n  export type Props = PopoverRootProps;\n}\n"],"mappings":";;;;;;;;;;;;;;;AA8BA,SAAgB,YAAY,EAC1B,MAAM,gBACN,cAAc,YAAY,aAAa,aACvC,cAAc,kBACd,sBAAsB,0BACtB,cAAc,YAAY,aAAa,aACvC,QAAQ,YAAY,aAAa,OACjC,aAAa,YAAY,aAAa,YACtC,WAAW,aACX,UACA,GAAG,aAC2B;CAC9B,MAAM,YAAY,qBAAqB;CACvC,MAAM,aAAa,sBAAsB;CACzC,MAAM,WAAW,2BAA2B;CAC5C,MAAM,CAAC,QAAQ,eAAe,IAAI,YAAY,SAAS,CAAC;CACxD,KAAK,SAAS,SAAS;CAEvB,MAAM,eAAe,CAAC,YAAY,cAAc;CAIhD,MAAM,kBAAkB,aAAa,gBAAgB;CACrD,MAAM,0BAA0B,aAAa,wBAAwB;CACrE,MAAM,mBAAmB,aAAa,UAAU,aAAa;CAC7D,MAAM,yBAAyB,aAAa,UAAU,mBAAmB;CACzE,MAAM,iBAAiB,aAAa,WAAW;CAC/C,MAAM,WAAW,aAAa,KAAK;CACnC,MAAM,gBAAgB,aAAa,UAAU;CAC7C,MAAM,gBAAgB,aAAa,UAAU;CAE7C,MAAM,CAAC,WAAW,eAAe;EAC/B,MAAM,WAAW,cAAc;GAC7B,YAAY,iBAAiB;GAC7B,eAAe,UAAmB,YAAkC;IAClE,gBAAgB,UAAU,UAAU,OAAO;GAC7C;GACA,uBAAuB,aAAsB;IAC3C,wBAAwB,UAAU,QAAQ;GAC5C;GACA,qBAAqB,iBAAiB,WAAW,YAAY,aAAa;GAC1E,2BAA2B,uBAAuB,WAAW,YAAY,aAAa;GACtF,mBAAmB,eAAe;GAClC,aAAa,SAAS;GACtB,kBAAkB,cAAc;GAChC,aAAa,cAAc;EAC7B,CAAC;EAGD,IAAI,CAAC,gBAAgB,aACnB,SAAS,KAAK,OAAO;EAGvB,OAAO;CACT,CAAC;CAED,MAAM,aAAa,UAAU;CAC7B,MAAM,UAAU,UAAU,OAAO;CAGjC,gBAAgB;EACd,IAAI,YAAY,cAAc,GAAG;EAEjC,MAAM,EAAE,QAAQ,cAAc,QAAQ,MAAM;EAC5C,IAAI,mBAAmB,WAAW;EAElC,IAAI,gBACF,QAAQ,KAAK,OAAO;OAEpB,QAAQ,MAAM,OAAO;CAEzB,GAAG,CAAC,gBAAgB,OAAO,CAAC;CAE5B,gBAAgB;EACd,IAAI,YAAY,UAAU,MAAM,OAAO,GAAG;EAC1C,IAAI,SAAS,MAAM,SAAS;EAE5B,QAAQ,MAAM,mBAAmB;CACnC,GAAG,CAAC,UAAU,MAAM,SAAS,OAAO,CAAC;CAErC,WAAW,OAAO;CAElB,MAAM,QAAQ,YAAY,QAAQ,KAAK;CACvC,KAAK,SAAS,KAAK;CACnB,MAAM,EAAE,OAAO,eAAe,sBAAsB,mBAAmB,KAAK,SAAS,CAAC;CAEtF,OACE,oBAAC,wBAAD;EACE,OAAO;GACL;GACA;GACA;GACA;GACA;GACA,cAAc;GACd;GACA;GACA;GACA;EACF;EAEC;CACqB,CAAA;AAE5B"}

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

@@ -1,4 +1,3 @@
-"use client";
 import { renderElement } from "../../utils/use-render.js";
 import { usePopoverContext } from "./context.js";
 import { forwardRef, useCallback } from "react";

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

@@ -1 +1 @@
-{"version":3,"file":"popover-trigger.js","names":[],"sources":["../../../../src/ui/popover/popover-trigger.tsx"],"sourcesContent":["'use client';\n\nimport type { PopoverState } from '@videojs/core';\nimport { forwardRef, useCallback } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { usePopoverContext } from './context';\n\nexport interface PopoverTriggerProps extends UIComponentProps<'button', PopoverState> {}\n\n/** Button that toggles the popover visibility. Renders a `<button>` element. */\nexport const PopoverTrigger = forwardRef<HTMLButtonElement, PopoverTriggerProps>(function PopoverTrigger(\n  { render, className, style, ...elementProps },\n  forwardedRef\n) {\n  const { core, popover, state, stateAttrMap, popupId } = usePopoverContext();\n  const controlledId = state.open ? popupId : undefined;\n\n  const triggerRef = useCallback(\n    (el: HTMLButtonElement | null) => {\n      popover.setTriggerElement(el);\n    },\n    [popover]\n  );\n\n  // Remap DOM focus events to React synthetic event names.\n  // createPopover() uses onFocusIn/onFocusOut (matching DOM focusin/focusout),\n  // but React maps those to onFocus/onBlur.\n  const { onFocusIn, onFocusOut, ...restTriggerProps } = popover.triggerProps;\n\n  return renderElement(\n    'button',\n    { render, className, style },\n    {\n      state,\n      stateAttrMap,\n      ref: [forwardedRef, triggerRef],\n      props: [\n        {\n          type: 'button' as const,\n          ...core.getTriggerAttrs(state, controlledId),\n        },\n        { ...restTriggerProps, onFocus: onFocusIn, onBlur: onFocusOut },\n        elementProps,\n      ],\n    }\n  );\n});\n\nexport namespace PopoverTrigger {\n  export type Props = PopoverTriggerProps;\n  export type State = PopoverState;\n}\n"],"mappings":";;;;;;AAYA,MAAa,iBAAiB,WAAmD,SAAS,eACxF,EAAE,QAAQ,WAAW,OAAO,GAAG,gBAC/B,cACA;CACA,MAAM,EAAE,MAAM,SAAS,OAAO,cAAc,YAAY,kBAAkB;CAC1E,MAAM,eAAe,MAAM,OAAO,UAAU,KAAA;CAE5C,MAAM,aAAa,aAChB,OAAiC;EAChC,QAAQ,kBAAkB,EAAE;CAC9B,GACA,CAAC,OAAO,CACV;CAKA,MAAM,EAAE,WAAW,YAAY,GAAG,qBAAqB,QAAQ;CAE/D,OAAO,cACL,UACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EACE;EACA;EACA,KAAK,CAAC,cAAc,UAAU;EAC9B,OAAO;GACL;IACE,MAAM;IACN,GAAG,KAAK,gBAAgB,OAAO,YAAY;GAC7C;GACA;IAAE,GAAG;IAAkB,SAAS;IAAW,QAAQ;GAAW;GAC9D;EACF;CACF,CACF;AACF,CAAC"}
+{"version":3,"file":"popover-trigger.js","names":[],"sources":["../../../../src/ui/popover/popover-trigger.tsx"],"sourcesContent":["import type { PopoverState } from '@videojs/core';\nimport { forwardRef, useCallback } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { usePopoverContext } from './context';\n\nexport interface PopoverTriggerProps extends UIComponentProps<'button', PopoverState> {}\n\n/** Button that toggles the popover visibility. Renders a `<button>` element. */\nexport const PopoverTrigger = forwardRef<HTMLButtonElement, PopoverTriggerProps>(function PopoverTrigger(\n  { render, className, style, ...elementProps },\n  forwardedRef\n) {\n  const { core, popover, state, stateAttrMap, popupId } = usePopoverContext();\n  const controlledId = state.open ? popupId : undefined;\n\n  const triggerRef = useCallback(\n    (el: HTMLButtonElement | null) => {\n      popover.setTriggerElement(el);\n    },\n    [popover]\n  );\n\n  // Remap DOM focus events to React synthetic event names.\n  // createPopover() uses onFocusIn/onFocusOut (matching DOM focusin/focusout),\n  // but React maps those to onFocus/onBlur.\n  const { onFocusIn, onFocusOut, ...restTriggerProps } = popover.triggerProps;\n\n  return renderElement(\n    'button',\n    { render, className, style },\n    {\n      state,\n      stateAttrMap,\n      ref: [forwardedRef, triggerRef],\n      props: [\n        {\n          type: 'button' as const,\n          ...core.getTriggerAttrs(state, controlledId),\n        },\n        { ...restTriggerProps, onFocus: onFocusIn, onBlur: onFocusOut },\n        elementProps,\n      ],\n    }\n  );\n});\n\nexport namespace PopoverTrigger {\n  export type Props = PopoverTriggerProps;\n  export type State = PopoverState;\n}\n"],"mappings":";;;;;AAUA,MAAa,iBAAiB,WAAmD,SAAS,eACxF,EAAE,QAAQ,WAAW,OAAO,GAAG,gBAC/B,cACA;CACA,MAAM,EAAE,MAAM,SAAS,OAAO,cAAc,YAAY,kBAAkB;CAC1E,MAAM,eAAe,MAAM,OAAO,UAAU,KAAA;CAE5C,MAAM,aAAa,aAChB,OAAiC;EAChC,QAAQ,kBAAkB,EAAE;CAC9B,GACA,CAAC,OAAO,CACV;CAKA,MAAM,EAAE,WAAW,YAAY,GAAG,qBAAqB,QAAQ;CAE/D,OAAO,cACL,UACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EACE;EACA;EACA,KAAK,CAAC,cAAc,UAAU;EAC9B,OAAO;GACL;IACE,MAAM;IACN,GAAG,KAAK,gBAAgB,OAAO,YAAY;GAC7C;GACA;IAAE,GAAG;IAAkB,SAAS;IAAW,QAAQ;GAAW;GAC9D;EACF;CACF,CACF;AACF,CAAC"}

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

@@ -1,4 +1,3 @@
-"use client";
 import { PopupPositioner } from "@videojs/core/dom";
 import { useLayoutEffect, useState } from "react";
 //#region src/ui/popover/use-popup-position.ts

package/dist/default/ui/popover/use-popup-position.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-popup-position.js","names":[],"sources":["../../../../src/ui/popover/use-popup-position.ts"],"sourcesContent":["'use client';\n\nimport {\n  type MediaContainer,\n  PopupPositioner,\n  type PopupPositionerOptions,\n  type PositioningBoundary,\n  type PositioningCSSVars,\n  type PositioningOptions,\n} from '@videojs/core/dom';\nimport type { CSSProperties, RefObject } from 'react';\nimport { useLayoutEffect, useState } from 'react';\n\ntype PopupStyle = CSSProperties & Partial<Record<`--${string}`, string>>;\n\nconst POPOVER_RESET: PopupStyle = { position: 'fixed', inset: 'auto', margin: 0 };\n\ninterface UsePopupPositionOptions {\n  open: boolean;\n  anchorName: string;\n  position: PositioningOptions | null;\n  triggerSource: { readonly triggerElement: HTMLElement | null };\n  popupRef: RefObject<HTMLElement | null>;\n  boundary: PositioningBoundary;\n  container: MediaContainer | null;\n  cssVars?: PositioningCSSVars;\n  onSideChange?: PopupPositionerOptions['onSideChange'];\n}\n\nexport function usePopupPosition({\n  open,\n  anchorName,\n  position,\n  triggerSource,\n  popupRef,\n  boundary,\n  container,\n  cssVars,\n  onSideChange,\n}: UsePopupPositionOptions): PopupStyle {\n  const [positioner] = useState(() => new PopupPositioner());\n\n  useLayoutEffect(() => {\n    if (!open) {\n      positioner.cleanup();\n      return;\n    }\n\n    positioner.sync({\n      anchorName,\n      position,\n      trigger: triggerSource.triggerElement,\n      popup: popupRef.current,\n      boundary,\n      container,\n      ...(cssVars ? { cssVars } : {}),\n      ...(onSideChange ? { onSideChange } : {}),\n    });\n  });\n\n  useLayoutEffect(() => () => positioner.cleanup(), [positioner]);\n\n  return POPOVER_RESET;\n}\n"],"mappings":";;;;AAeA,MAAM,gBAA4B;CAAE,UAAU;CAAS,OAAO;CAAQ,QAAQ;AAAE;AAchF,SAAgB,iBAAiB,EAC/B,MACA,YACA,UACA,eACA,UACA,UACA,WACA,SACA,gBACsC;CACtC,MAAM,CAAC,cAAc,eAAe,IAAI,gBAAgB,CAAC;CAEzD,sBAAsB;EACpB,IAAI,CAAC,MAAM;GACT,WAAW,QAAQ;GACnB;EACF;EAEA,WAAW,KAAK;GACd;GACA;GACA,SAAS,cAAc;GACvB,OAAO,SAAS;GAChB;GACA;GACA,GAAI,UAAU,EAAE,QAAQ,IAAI,CAAC;GAC7B,GAAI,eAAe,EAAE,aAAa,IAAI,CAAC;EACzC,CAAC;CACH,CAAC;CAED,4BAA4B,WAAW,QAAQ,GAAG,CAAC,UAAU,CAAC;CAE9D,OAAO;AACT"}
+{"version":3,"file":"use-popup-position.js","names":[],"sources":["../../../../src/ui/popover/use-popup-position.ts"],"sourcesContent":["import {\n  type MediaContainer,\n  PopupPositioner,\n  type PopupPositionerOptions,\n  type PositioningBoundary,\n  type PositioningCSSVars,\n  type PositioningOptions,\n} from '@videojs/core/dom';\nimport type { CSSProperties, RefObject } from 'react';\nimport { useLayoutEffect, useState } from 'react';\n\ntype PopupStyle = CSSProperties & Partial<Record<`--${string}`, string>>;\n\nconst POPOVER_RESET: PopupStyle = { position: 'fixed', inset: 'auto', margin: 0 };\n\ninterface UsePopupPositionOptions {\n  open: boolean;\n  anchorName: string;\n  position: PositioningOptions | null;\n  triggerSource: { readonly triggerElement: HTMLElement | null };\n  popupRef: RefObject<HTMLElement | null>;\n  boundary: PositioningBoundary;\n  container: MediaContainer | null;\n  cssVars?: PositioningCSSVars;\n  onSideChange?: PopupPositionerOptions['onSideChange'];\n}\n\nexport function usePopupPosition({\n  open,\n  anchorName,\n  position,\n  triggerSource,\n  popupRef,\n  boundary,\n  container,\n  cssVars,\n  onSideChange,\n}: UsePopupPositionOptions): PopupStyle {\n  const [positioner] = useState(() => new PopupPositioner());\n\n  useLayoutEffect(() => {\n    if (!open) {\n      positioner.cleanup();\n      return;\n    }\n\n    positioner.sync({\n      anchorName,\n      position,\n      trigger: triggerSource.triggerElement,\n      popup: popupRef.current,\n      boundary,\n      container,\n      ...(cssVars ? { cssVars } : {}),\n      ...(onSideChange ? { onSideChange } : {}),\n    });\n  });\n\n  useLayoutEffect(() => () => positioner.cleanup(), [positioner]);\n\n  return POPOVER_RESET;\n}\n"],"mappings":";;;AAaA,MAAM,gBAA4B;CAAE,UAAU;CAAS,OAAO;CAAQ,QAAQ;AAAE;AAchF,SAAgB,iBAAiB,EAC/B,MACA,YACA,UACA,eACA,UACA,UACA,WACA,SACA,gBACsC;CACtC,MAAM,CAAC,cAAc,eAAe,IAAI,gBAAgB,CAAC;CAEzD,sBAAsB;EACpB,IAAI,CAAC,MAAM;GACT,WAAW,QAAQ;GACnB;EACF;EAEA,WAAW,KAAK;GACd;GACA;GACA,SAAS,cAAc;GACvB,OAAO,SAAS;GAChB;GACA;GACA,GAAI,UAAU,EAAE,QAAQ,IAAI,CAAC;GAC7B,GAAI,eAAe,EAAE,aAAa,IAAI,CAAC;EACzC,CAAC;CACH,CAAC;CAED,4BAA4B,WAAW,QAAQ,GAAG,CAAC,UAAU,CAAC;CAE9D,OAAO;AACT"}

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

@@ -1,55 +1,101 @@
-"use client";
 import { usePlayer } from "../../player/context.js";
 import { renderElement } from "../../utils/use-render.js";
-import { selectPlayback } from "@videojs/core/dom";
+import { selectMetadata, selectPlayback } from "@videojs/core/dom";
 import { forwardRef, useCallback, useEffect, useRef, useState } from "react";
 import { PosterCore, PosterDataAttrs } from "@videojs/core";
 //#region src/ui/poster/poster.tsx
 /**
 * Displays the video poster image. Shows before playback starts, hides after.
 *
+* Renders an `<img>`, so `srcset`, `sizes`, `loading`, and the rest of the
+* image attributes are yours. Leave the source off and the player's resolved
+* `poster` fills it in.
+*
+* The image is decorative unless you say otherwise. Describe a poster that
+* carries meaning by passing your own `alt`.
+*
 * @example
 * ```tsx
-* <Poster src="poster.jpg" alt="Video description" />
+* <VideoPlayer poster="poster.jpg">
+*   <Poster />
+* </VideoPlayer>
+*
+* <Poster srcSet="poster-480.jpg 480w, poster-1080.jpg 1080w" sizes="100vw" />
 *
 * <Poster
-*   src="poster.jpg"
-*   alt="Video description"
-*   className={(state) => state.visible ? 'visible' : 'hidden'}
+*   render={({ src, ...props }: ComponentProps<'img'>) =>
+*     src ? <Image {...props} src={src} alt="" fill /> : null
+*   }
 * />
 * ```
 */
 const Poster = forwardRef(function Poster(componentProps, forwardedRef) {
 	const { render, className, style, ...elementProps } = componentProps;
 	const playback = usePlayer(selectPlayback);
+	const metadata = usePlayer(selectMetadata);
 	const [core] = useState(() => new PosterCore());
-	const src = elementProps.src;
-	const [loadedSrc, setLoadedSrc] = useState(void 0);
-	const loaded = loadedSrc === src;
+	if (playback) core.setMedia({
+		started: playback.started,
+		poster: metadata?.poster ?? ""
+	});
+	const { src: authoredSrc, srcSet: authoredSrcSet } = elementProps;
+	const src = authoredSrc ?? (authoredSrcSet === void 0 && playback ? core.getState().src : "");
+	const initialLoadState = !src && authoredSrcSet === void 0 ? "none" : "loading";
+	const [request, setRequest] = useState(() => ({
+		src,
+		srcSet: authoredSrcSet,
+		state: initialLoadState
+	}));
 	const imgRef = useRef(null);
+	const matchesRequest = request.src === src && request.srcSet === authoredSrcSet;
+	if (!matchesRequest) setRequest({
+		src,
+		srcSet: authoredSrcSet,
+		state: initialLoadState
+	});
+	const loadState = matchesRequest ? request.state : initialLoadState;
+	if (playback) core.setImageLoadState(loadState);
+	const state = playback ? core.getState() : 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 (!img) return;
+		if (img.naturalWidth > 0) setRequest({
+			src,
+			srcSet: authoredSrcSet,
+			state: "loaded"
+		});
+		else if (img.complete && (img.getAttribute("src") || img.hasAttribute("srcset"))) setRequest({
+			src,
+			srcSet: authoredSrcSet,
+			state: "error"
+		});
 	}, []);
-	if (!playback) return null;
-	core.setMedia(playback);
+	const handleLoad = useCallback(() => setRequest({
+		src,
+		srcSet: authoredSrcSet,
+		state: "loaded"
+	}), [src, authoredSrcSet]);
+	const handleError = useCallback(() => setRequest({
+		src,
+		srcSet: authoredSrcSet,
+		state: "error"
+	}), [src, authoredSrcSet]);
+	if (!playback || !state) return null;
 	return renderElement("img", {
 		render,
 		className,
 		style
 	}, {
-		state: core.getState(),
+		state,
 		stateAttrMap: PosterDataAttrs,
 		ref: [forwardedRef, imgRef],
 		props: [
 			{ alt: "" },
 			elementProps,
 			{
-				"data-loaded": loaded ? "" : void 0,
-				onLoad: handleLoad
+				src: src || void 0,
+				onLoad: handleLoad,
+				onError: handleError
 			}
 		]
 	});

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, 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: [{ alt: '' }, 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,cAAc;CAEzC,MAAM,CAAC,QAAQ,eAAe,IAAI,WAAW,CAAC;CAI9C,MAAM,MAAO,aAAkC;CAC/C,MAAM,CAAC,WAAW,gBAAgB,SAA6B,KAAA,CAAS;CACxE,MAAM,SAAS,cAAc;CAC7B,MAAM,SAAS,OAAgC,IAAI;CAInD,gBAAgB;EACd,MAAM,MAAM,OAAO;EACnB,IAAI,KAAK,YAAY,IAAI,eAAe,KAAK,IAAI,aAAa,KAAK,MAAM,KACvE,aAAa,GAAG;CAEpB,GAAG,CAAC,GAAG,CAAC;CAER,MAAM,aAAa,aAAa,UAA4C;EAC1E,aAAa,MAAM,cAAc,aAAa,KAAK,KAAK,KAAA,CAAS;CACnE,GAAG,CAAC,CAAC;CAEL,IAAI,CAAC,UAEH,OAAO;CAGT,KAAK,SAAS,QAAQ;CAEtB,OAAO,cACL,OACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EACE,OAAO,KAAK,SAAS;EACrB,cAAc;EACd,KAAK,CAAC,cAAc,MAAM;EAC1B,OAAO;GAAC,EAAE,KAAK,GAAG;GAAG;GAAc;IAAE,eAAe,SAAS,KAAK,KAAA;IAAW,QAAQ;GAAW;EAAC;CACnG,CACF;AACF,CAAC"}
+{"version":3,"file":"poster.js","names":[],"sources":["../../../../src/ui/poster/poster.tsx"],"sourcesContent":["import { PosterCore, PosterDataAttrs, type PosterImageLoadState } from '@videojs/core';\nimport { logMissingFeature, selectMetadata, selectPlayback } from '@videojs/core/dom';\nimport type { ForwardedRef } 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/** The source currently requested from the image, and how it is faring. */\ninterface ImageRequest {\n  src: string;\n  srcSet: string | undefined;\n  state: PosterImageLoadState;\n}\n\n/**\n * Displays the video poster image. Shows before playback starts, hides after.\n *\n * Renders an `<img>`, so `srcset`, `sizes`, `loading`, and the rest of the\n * image attributes are yours. Leave the source off and the player's resolved\n * `poster` fills it in.\n *\n * The image is decorative unless you say otherwise. Describe a poster that\n * carries meaning by passing your own `alt`.\n *\n * @example\n * ```tsx\n * <VideoPlayer poster=\"poster.jpg\">\n *   <Poster />\n * </VideoPlayer>\n *\n * <Poster srcSet=\"poster-480.jpg 480w, poster-1080.jpg 1080w\" sizes=\"100vw\" />\n *\n * <Poster\n *   render={({ src, ...props }: ComponentProps<'img'>) =>\n *     src ? <Image {...props} src={src} alt=\"\" fill /> : null\n *   }\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  const metadata = usePlayer(selectMetadata);\n\n  const [core] = useState(() => new PosterCore());\n\n  // The metadata feature is optional: without it nothing resolves a URL, and\n  // this stays a visibility wrapper around whatever `src` was passed.\n  if (playback) {\n    core.setMedia({\n      started: playback.started,\n      poster: metadata?.poster ?? '',\n    });\n  }\n\n  const { src: authoredSrc, srcSet: authoredSrcSet } = elementProps as { src?: string; srcSet?: string };\n\n  // Either authored source makes the image yours, matching `hasSource` in the\n  // HTML element. Filling `src` alongside a `srcset` would inject the player's\n  // poster into your candidate set as the 1x entry.\n  const src = authoredSrc ?? (authoredSrcSet === undefined && playback ? core.getState().src : '');\n\n  const initialLoadState: PosterImageLoadState = !src && authoredSrcSet === undefined ? 'none' : 'loading';\n  const [request, setRequest] = useState<ImageRequest>(() => ({\n    src,\n    srcSet: authoredSrcSet,\n    state: initialLoadState,\n  }));\n  const imgRef = useRef<HTMLImageElement | null>(null);\n\n  // Keep only the active request. Retaining a settled source by value would\n  // resurrect its old state when the image moved A -> B -> A, even though the\n  // second A is a new request. `srcSet` is part of the identity because `src`\n  // stays empty when it is the only source.\n  const matchesRequest = request.src === src && request.srcSet === authoredSrcSet;\n  if (!matchesRequest) setRequest({ src, srcSet: authoredSrcSet, state: initialLoadState });\n  const loadState = matchesRequest ? request.state : initialLoadState;\n\n  if (playback) core.setImageLoadState(loadState);\n\n  const state = playback ? core.getState() : null;\n\n  // An image can already be settled when we first see it — hydrated from server\n  // markup, say — in which case neither `load` nor `error` ever fires. Decoded\n  // pixels stand on their own; the absence of them only means failure once\n  // `complete` can be trusted, which takes a source on the image itself, since one\n  // sourced by a `<picture>` an override wrapped it in is `complete` regardless.\n  //\n  // Only when we first see it. A later source change leaves the previous request's\n  // pixels in place until the new one settles, so reading them again would call\n  // the new source loaded while it is still fetching. `load` and `error` cover\n  // every source after this one, the way the HTML element reads an image once.\n  // biome-ignore lint/correctness/useExhaustiveDependencies: reads the first source only, at mount\n  useEffect(() => {\n    const img = imgRef.current;\n    if (!img) return;\n\n    if (img.naturalWidth > 0) setRequest({ src, srcSet: authoredSrcSet, state: 'loaded' });\n    else if (img.complete && (img.getAttribute('src') || img.hasAttribute('srcset'))) {\n      setRequest({ src, srcSet: authoredSrcSet, state: 'error' });\n    }\n  }, []);\n\n  // Recorded against the source this render asked for, not the one on the\n  // element: a `render` override is free to rewrite it.\n  const handleLoad = useCallback(\n    () => setRequest({ src, srcSet: authoredSrcSet, state: 'loaded' }),\n    [src, authoredSrcSet]\n  );\n  const handleError = useCallback(\n    () => setRequest({ src, srcSet: authoredSrcSet, state: 'error' }),\n    [src, authoredSrcSet]\n  );\n\n  if (!playback || !state) {\n    if (__DEV__) logMissingFeature('Poster', 'playback');\n    return null;\n  }\n\n  return renderElement(\n    'img',\n    { render, className, style },\n    {\n      state,\n      stateAttrMap: PosterDataAttrs,\n      ref: [forwardedRef, imgRef],\n      props: [\n        { alt: '' },\n        elementProps,\n        {\n          // An empty `src` requests the document URL, so leave the attribute off.\n          src: src || undefined,\n          onLoad: handleLoad,\n          onError: handleError,\n        },\n      ],\n    }\n  );\n});\n\nexport namespace Poster {\n  export type Props = PosterProps;\n  export type State = PosterCore.State;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2CA,MAAa,SAAS,WAAW,SAAS,OACxC,gBACA,cACA;CACA,MAAM,EAAE,QAAQ,WAAW,OAAO,GAAG,iBAAiB;CAEtD,MAAM,WAAW,UAAU,cAAc;CACzC,MAAM,WAAW,UAAU,cAAc;CAEzC,MAAM,CAAC,QAAQ,eAAe,IAAI,WAAW,CAAC;CAI9C,IAAI,UACF,KAAK,SAAS;EACZ,SAAS,SAAS;EAClB,QAAQ,UAAU,UAAU;CAC9B,CAAC;CAGH,MAAM,EAAE,KAAK,aAAa,QAAQ,mBAAmB;CAKrD,MAAM,MAAM,gBAAgB,mBAAmB,KAAA,KAAa,WAAW,KAAK,SAAS,CAAC,CAAC,MAAM;CAE7F,MAAM,mBAAyC,CAAC,OAAO,mBAAmB,KAAA,IAAY,SAAS;CAC/F,MAAM,CAAC,SAAS,cAAc,gBAA8B;EAC1D;EACA,QAAQ;EACR,OAAO;CACT,EAAE;CACF,MAAM,SAAS,OAAgC,IAAI;CAMnD,MAAM,iBAAiB,QAAQ,QAAQ,OAAO,QAAQ,WAAW;CACjE,IAAI,CAAC,gBAAgB,WAAW;EAAE;EAAK,QAAQ;EAAgB,OAAO;CAAiB,CAAC;CACxF,MAAM,YAAY,iBAAiB,QAAQ,QAAQ;CAEnD,IAAI,UAAU,KAAK,kBAAkB,SAAS;CAE9C,MAAM,QAAQ,WAAW,KAAK,SAAS,IAAI;CAa3C,gBAAgB;EACd,MAAM,MAAM,OAAO;EACnB,IAAI,CAAC,KAAK;EAEV,IAAI,IAAI,eAAe,GAAG,WAAW;GAAE;GAAK,QAAQ;GAAgB,OAAO;EAAS,CAAC;OAChF,IAAI,IAAI,aAAa,IAAI,aAAa,KAAK,KAAK,IAAI,aAAa,QAAQ,IAC5E,WAAW;GAAE;GAAK,QAAQ;GAAgB,OAAO;EAAQ,CAAC;CAE9D,GAAG,CAAC,CAAC;CAIL,MAAM,aAAa,kBACX,WAAW;EAAE;EAAK,QAAQ;EAAgB,OAAO;CAAS,CAAC,GACjE,CAAC,KAAK,cAAc,CACtB;CACA,MAAM,cAAc,kBACZ,WAAW;EAAE;EAAK,QAAQ;EAAgB,OAAO;CAAQ,CAAC,GAChE,CAAC,KAAK,cAAc,CACtB;CAEA,IAAI,CAAC,YAAY,CAAC,OAEhB,OAAO;CAGT,OAAO,cACL,OACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EACE;EACA,cAAc;EACd,KAAK,CAAC,cAAc,MAAM;EAC1B,OAAO;GACL,EAAE,KAAK,GAAG;GACV;GACA;IAEE,KAAK,OAAO,KAAA;IACZ,QAAQ;IACR,SAAS;GACX;EACF;CACF,CACF;AACF,CAAC"}

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

@@ -1,4 +1,3 @@
-"use client";
 import { createRadioOptionsHook } from "../hooks/create-radio-options-hook.js";
 import { selectQuality } from "@videojs/core/dom";
 import { QualityRadioGroupCore } from "@videojs/core";

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

@@ -1 +1 @@
-{"version":3,"file":"use-quality-options.js","names":[],"sources":["../../../../src/ui/quality/use-quality-options.ts"],"sourcesContent":["'use client';\n\nimport { QualityRadioGroupCore, type QualityRadioGroupOption } from '@videojs/core';\nimport { selectQuality } from '@videojs/core/dom';\n\nimport { createRadioOptionsHook, type TranslatedRadioOption } from '../hooks/create-radio-options-hook';\n\nexport interface QualityOptionsProps extends QualityRadioGroupCore.Props {}\n\nexport type QualityOption = TranslatedRadioOption<QualityRadioGroupOption>;\n\nexport interface QualityOptionsResult {\n  state: QualityRadioGroupCore.State;\n  label: string;\n  value: string;\n  selectedLabel: string;\n  options: QualityOption[];\n  disabled: boolean;\n  hidden: boolean;\n  setValue: (value: string) => void;\n}\n\nconst useQualityRadioOptions = createRadioOptionsHook({\n  name: 'useQualityOptions',\n  feature: 'quality',\n  selector: selectQuality,\n  createCore: () => new QualityRadioGroupCore(),\n});\n\n/**\n * Create quality menu options (including an `Auto` option) from the player\n * video rendition state. Returns `null` when the quality feature is not\n * configured.\n *\n * @param props - Optional `label`, `formatRendition`, and `disabled` overrides.\n */\nexport function useQualityOptions(props?: QualityOptionsProps): QualityOptionsResult | null {\n  'use no memo';\n\n  return useQualityRadioOptions(props);\n}\n\nexport namespace useQualityOptions {\n  export type Props = QualityOptionsProps;\n  export type Result = QualityOptionsResult;\n  export type Option = QualityOption;\n}\n"],"mappings":";;;;;AAsBA,MAAM,yBAAyB,uBAAuB;CACpD,MAAM;CACN,SAAS;CACT,UAAU;CACV,kBAAkB,IAAI,sBAAsB;AAC9C,CAAC;;;;;;;;AASD,SAAgB,kBAAkB,OAA0D;CAC1F;CAEA,OAAO,uBAAuB,KAAK;AACrC"}
+{"version":3,"file":"use-quality-options.js","names":[],"sources":["../../../../src/ui/quality/use-quality-options.ts"],"sourcesContent":["import { QualityRadioGroupCore, type QualityRadioGroupOption } from '@videojs/core';\nimport { selectQuality } from '@videojs/core/dom';\n\nimport { createRadioOptionsHook, type TranslatedRadioOption } from '../hooks/create-radio-options-hook';\n\nexport interface QualityOptionsProps extends QualityRadioGroupCore.Props {}\n\nexport type QualityOption = TranslatedRadioOption<QualityRadioGroupOption>;\n\nexport interface QualityOptionsResult {\n  state: QualityRadioGroupCore.State;\n  label: string;\n  value: string;\n  selectedLabel: string;\n  options: QualityOption[];\n  disabled: boolean;\n  hidden: boolean;\n  setValue: (value: string) => void;\n}\n\nconst useQualityRadioOptions = createRadioOptionsHook({\n  name: 'useQualityOptions',\n  feature: 'quality',\n  selector: selectQuality,\n  createCore: () => new QualityRadioGroupCore(),\n});\n\n/**\n * Create quality menu options (including an `Auto` option) from the player\n * video rendition state. Returns `null` when the quality feature is not\n * configured.\n *\n * @param props - Optional `label`, `formatRendition`, and `disabled` overrides.\n */\nexport function useQualityOptions(props?: QualityOptionsProps): QualityOptionsResult | null {\n  'use no memo';\n\n  return useQualityRadioOptions(props);\n}\n\nexport namespace useQualityOptions {\n  export type Props = QualityOptionsProps;\n  export type Result = QualityOptionsResult;\n  export type Option = QualityOption;\n}\n"],"mappings":";;;;AAoBA,MAAM,yBAAyB,uBAAuB;CACpD,MAAM;CACN,SAAS;CACT,UAAU;CACV,kBAAkB,IAAI,sBAAsB;AAC9C,CAAC;;;;;;;;AASD,SAAgB,kBAAkB,OAA0D;CAC1F;CAEA,OAAO,uBAAuB,KAAK;AACrC"}

package/dist/default/ui/quality-radio-group/quality-radio-group.js

@@ -1,4 +1,3 @@
-"use client";
 import { MenuRadioGroup } from "../menu/menu-radio-group.js";
 import { useQualityOptions } from "../quality/use-quality-options.js";
 import { getStateDataAttrs } from "@videojs/core/dom";

package/dist/default/ui/quality-radio-group/quality-radio-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"quality-radio-group.js","names":[],"sources":["../../../../src/ui/quality-radio-group/quality-radio-group.tsx"],"sourcesContent":["'use client';\n\nimport { type QualityRadioGroupCore, QualityRadioGroupDataAttrs } from '@videojs/core';\nimport { getStateDataAttrs } from '@videojs/core/dom';\nimport { isFunction } from '@videojs/utils/predicate';\nimport type { ReactElement } from 'react';\nimport { Fragment, forwardRef } from 'react';\n\nimport type { HTMLProps, UIComponentProps } from '../../utils/types';\nimport { MenuRadioGroup } from '../menu/menu-radio-group';\nimport type { MenuRadioItemProps } from '../menu/menu-radio-item';\nimport { type QualityOption, type QualityOptionsProps, useQualityOptions } from '../quality/use-quality-options';\n\nexport type QualityRadioGroupItemState = QualityOption & {\n  /** Whether this quality option is currently selected. */\n  checked: boolean;\n};\n\nexport interface QualityRadioGroupItemProps extends Omit<MenuRadioItemProps, 'ref'> {\n  /** Rendition value represented by the item. */\n  'data-rendition': string;\n}\n\nexport interface QualityRadioGroupProps\n  extends Omit<UIComponentProps<'div', QualityRadioGroupCore.State>, 'children'>,\n    QualityOptionsProps {\n  /** Render one consumer-owned menu radio item for every quality option. */\n  renderItem: (props: QualityRadioGroupItemProps, state: QualityRadioGroupItemState) => ReactElement;\n}\n\n/**\n * Renders menu radio items for the player's video renditions.\n *\n * @example\n * ```tsx\n * <QualityRadioGroup\n *   renderItem={(props, item) => (\n *     <Menu.RadioItem {...props}>\n *       {item.label}\n *       {item.tier ? <sup>{item.tier}</sup> : null}\n *       <Menu.ItemIndicator checked={item.checked} />\n *     </Menu.RadioItem>\n *   )}\n * />\n * ```\n */\nexport const QualityRadioGroup = forwardRef<HTMLDivElement, QualityRadioGroupProps>(\n  function QualityRadioGroup(componentProps, forwardedRef) {\n    const {\n      renderItem,\n      render,\n      className,\n      style,\n      label,\n      formatRendition,\n      disabled,\n      'aria-label': ariaLabelProp,\n      'aria-labelledby': ariaLabelledBy,\n      ...elementProps\n    } = componentProps;\n    const quality = useQualityOptions({ label, formatRendition, disabled });\n    if (!quality) return null;\n\n    const { state, value, options, setValue } = quality;\n    const ariaLabel = ariaLabelProp ?? (ariaLabelledBy === undefined ? quality.label : undefined);\n\n    return (\n      <MenuRadioGroup\n        {...getStateDataAttrs(state, QualityRadioGroupDataAttrs)}\n        {...elementProps}\n        ref={forwardedRef}\n        className={isFunction(className) ? className(state) : className}\n        style={isFunction(style) ? style(state) : style}\n        render={isFunction(render) ? (props: HTMLProps) => render(props, state) : render}\n        value={value}\n        onValueChange={setValue}\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledBy}\n        aria-disabled={state.disabled || undefined}\n        hidden={state.hidden}\n      >\n        {options.map((option) => {\n          const itemState = { ...option, checked: option.value === value };\n\n          return (\n            <Fragment key={option.value}>\n              {renderItem(\n                {\n                  value: option.value,\n                  disabled: option.disabled,\n                  'data-rendition': option.value,\n                  children: option.label,\n                },\n                itemState\n              )}\n            </Fragment>\n          );\n        })}\n      </MenuRadioGroup>\n    );\n  }\n);\n\nexport namespace QualityRadioGroup {\n  export type Props = QualityRadioGroupProps;\n  export type State = QualityRadioGroupCore.State;\n  export type ItemProps = QualityRadioGroupItemProps;\n  export type ItemState = QualityRadioGroupItemState;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AA8CA,MAAa,oBAAoB,WAC/B,SAAS,kBAAkB,gBAAgB,cAAc;CACvD,MAAM,EACJ,YACA,QACA,WACA,OACA,OACA,iBACA,UACA,cAAc,eACd,mBAAmB,gBACnB,GAAG,iBACD;CACJ,MAAM,UAAU,kBAAkB;EAAE;EAAO;EAAiB;CAAS,CAAC;CACtE,IAAI,CAAC,SAAS,OAAO;CAErB,MAAM,EAAE,OAAO,OAAO,SAAS,aAAa;CAC5C,MAAM,YAAY,kBAAkB,mBAAmB,KAAA,IAAY,QAAQ,QAAQ,KAAA;CAEnF,OACE,oBAAC,gBAAD;EACE,GAAI,kBAAkB,OAAO,0BAA0B;EACvD,GAAI;EACJ,KAAK;EACL,WAAW,WAAW,SAAS,IAAI,UAAU,KAAK,IAAI;EACtD,OAAO,WAAW,KAAK,IAAI,MAAM,KAAK,IAAI;EAC1C,QAAQ,WAAW,MAAM,KAAK,UAAqB,OAAO,OAAO,KAAK,IAAI;EACnE;EACP,eAAe;EACf,cAAY;EACZ,mBAAiB;EACjB,iBAAe,MAAM,YAAY,KAAA;EACjC,QAAQ,MAAM;EAEb,UAAA,QAAQ,KAAK,WAAW;GACvB,MAAM,YAAY;IAAE,GAAG;IAAQ,SAAS,OAAO,UAAU;GAAM;GAE/D,OACE,oBAAC,UAAD,EAAA,UACG,WACC;IACE,OAAO,OAAO;IACd,UAAU,OAAO;IACjB,kBAAkB,OAAO;IACzB,UAAU,OAAO;GACnB,GACA,SACF,EACQ,GAVK,OAAO,KAUZ;EAEd,CAAC;CACa,CAAA;AAEpB,CACF"}
+{"version":3,"file":"quality-radio-group.js","names":[],"sources":["../../../../src/ui/quality-radio-group/quality-radio-group.tsx"],"sourcesContent":["import { type QualityRadioGroupCore, QualityRadioGroupDataAttrs } from '@videojs/core';\nimport { getStateDataAttrs } from '@videojs/core/dom';\nimport { isFunction } from '@videojs/utils/predicate';\nimport type { ReactElement } from 'react';\nimport { Fragment, forwardRef } from 'react';\n\nimport type { HTMLProps, UIComponentProps } from '../../utils/types';\nimport { MenuRadioGroup } from '../menu/menu-radio-group';\nimport type { MenuRadioItemProps } from '../menu/menu-radio-item';\nimport { type QualityOption, type QualityOptionsProps, useQualityOptions } from '../quality/use-quality-options';\n\nexport type QualityRadioGroupItemState = QualityOption & {\n  /** Whether this quality option is currently selected. */\n  checked: boolean;\n};\n\nexport interface QualityRadioGroupItemProps extends Omit<MenuRadioItemProps, 'ref'> {\n  /** Rendition value represented by the item. */\n  'data-rendition': string;\n}\n\nexport interface QualityRadioGroupProps\n  extends Omit<UIComponentProps<'div', QualityRadioGroupCore.State>, 'children'>,\n    QualityOptionsProps {\n  /** Render one consumer-owned menu radio item for every quality option. */\n  renderItem: (props: QualityRadioGroupItemProps, state: QualityRadioGroupItemState) => ReactElement;\n}\n\n/**\n * Renders menu radio items for the player's video renditions.\n *\n * @example\n * ```tsx\n * <QualityRadioGroup\n *   renderItem={(props, item) => (\n *     <Menu.RadioItem {...props}>\n *       {item.label}\n *       {item.tier ? <sup>{item.tier}</sup> : null}\n *       <Menu.ItemIndicator checked={item.checked} />\n *     </Menu.RadioItem>\n *   )}\n * />\n * ```\n */\nexport const QualityRadioGroup = forwardRef<HTMLDivElement, QualityRadioGroupProps>(\n  function QualityRadioGroup(componentProps, forwardedRef) {\n    const {\n      renderItem,\n      render,\n      className,\n      style,\n      label,\n      formatRendition,\n      disabled,\n      'aria-label': ariaLabelProp,\n      'aria-labelledby': ariaLabelledBy,\n      ...elementProps\n    } = componentProps;\n    const quality = useQualityOptions({ label, formatRendition, disabled });\n    if (!quality) return null;\n\n    const { state, value, options, setValue } = quality;\n    const ariaLabel = ariaLabelProp ?? (ariaLabelledBy === undefined ? quality.label : undefined);\n\n    return (\n      <MenuRadioGroup\n        {...getStateDataAttrs(state, QualityRadioGroupDataAttrs)}\n        {...elementProps}\n        ref={forwardedRef}\n        className={isFunction(className) ? className(state) : className}\n        style={isFunction(style) ? style(state) : style}\n        render={isFunction(render) ? (props: HTMLProps) => render(props, state) : render}\n        value={value}\n        onValueChange={setValue}\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledBy}\n        aria-disabled={state.disabled || undefined}\n        hidden={state.hidden}\n      >\n        {options.map((option) => {\n          const itemState = { ...option, checked: option.value === value };\n\n          return (\n            <Fragment key={option.value}>\n              {renderItem(\n                {\n                  value: option.value,\n                  disabled: option.disabled,\n                  'data-rendition': option.value,\n                  children: option.label,\n                },\n                itemState\n              )}\n            </Fragment>\n          );\n        })}\n      </MenuRadioGroup>\n    );\n  }\n);\n\nexport namespace QualityRadioGroup {\n  export type Props = QualityRadioGroupProps;\n  export type State = QualityRadioGroupCore.State;\n  export type ItemProps = QualityRadioGroupItemProps;\n  export type ItemState = QualityRadioGroupItemState;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AA4CA,MAAa,oBAAoB,WAC/B,SAAS,kBAAkB,gBAAgB,cAAc;CACvD,MAAM,EACJ,YACA,QACA,WACA,OACA,OACA,iBACA,UACA,cAAc,eACd,mBAAmB,gBACnB,GAAG,iBACD;CACJ,MAAM,UAAU,kBAAkB;EAAE;EAAO;EAAiB;CAAS,CAAC;CACtE,IAAI,CAAC,SAAS,OAAO;CAErB,MAAM,EAAE,OAAO,OAAO,SAAS,aAAa;CAC5C,MAAM,YAAY,kBAAkB,mBAAmB,KAAA,IAAY,QAAQ,QAAQ,KAAA;CAEnF,OACE,oBAAC,gBAAD;EACE,GAAI,kBAAkB,OAAO,0BAA0B;EACvD,GAAI;EACJ,KAAK;EACL,WAAW,WAAW,SAAS,IAAI,UAAU,KAAK,IAAI;EACtD,OAAO,WAAW,KAAK,IAAI,MAAM,KAAK,IAAI;EAC1C,QAAQ,WAAW,MAAM,KAAK,UAAqB,OAAO,OAAO,KAAK,IAAI;EACnE;EACP,eAAe;EACf,cAAY;EACZ,mBAAiB;EACjB,iBAAe,MAAM,YAAY,KAAA;EACjC,QAAQ,MAAM;EAEb,UAAA,QAAQ,KAAK,WAAW;GACvB,MAAM,YAAY;IAAE,GAAG;IAAQ,SAAS,OAAO,UAAU;GAAM;GAE/D,OACE,oBAAC,UAAD,EAAA,UACG,WACC;IACE,OAAO,OAAO;IACd,UAAU,OAAO;IACjB,kBAAkB,OAAO;IACzB,UAAU,OAAO;GACnB,GACA,SACF,EACQ,GAVK,OAAO,KAUZ;EAEd,CAAC;CACa,CAAA;AAEpB,CACF"}

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

@@ -1,4 +1,3 @@
-"use client";
 import { createMediaButton } from "../create-media-button.js";
 import { selectTime } from "@videojs/core/dom";
 import { SeekButtonCore, SeekButtonDataAttrs } from "@videojs/core";

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  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,KAAK;CACxC,cAAc;CACd,cAAc,UAAW,OAAO,MAAM,YAAY,WAAW,MAAM,UAAU,eAAe,aAAa;AAC3G,CAAC"}
+{"version":3,"file":"seek-button.js","names":[],"sources":["../../../../src/ui/seek-button/seek-button.tsx"],"sourcesContent":["import { 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":";;;;;;;;;;;;;;;;;;;;;AAyBA,MAAa,aAAa,kBAAmD;CAC3E,aAAa;CACb,MAAM;CACN,cAAc;CACd,UAAU;CACV,SAAS,MAAM,UAAU,KAAK,KAAK,KAAK;CACxC,cAAc;CACd,cAAc,UAAW,OAAO,MAAM,YAAY,WAAW,MAAM,UAAU,eAAe,aAAa;AAC3G,CAAC"}

package/dist/default/ui/seek-indicator/context.js

@@ -1,4 +1,3 @@
-"use client";
 import { createContext, useContext } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/ui/seek-indicator/context.tsx

package/dist/default/ui/seek-indicator/context.js.map

@@ -1 +1 @@
-{"version":3,"file":"context.js","names":[],"sources":["../../../../src/ui/seek-indicator/context.tsx"],"sourcesContent":["'use client';\n\nimport type { SeekIndicatorCore } from '@videojs/core';\nimport { createContext, type ProviderProps, useContext } from 'react';\n\nexport interface SeekIndicatorContextValue {\n  state: SeekIndicatorCore.State;\n}\n\nconst SeekIndicatorContext = createContext<SeekIndicatorContextValue | null>(null);\n\nexport function SeekIndicatorProvider({ value, children }: ProviderProps<SeekIndicatorContextValue>) {\n  return <SeekIndicatorContext.Provider value={value}>{children}</SeekIndicatorContext.Provider>;\n}\n\nexport function useSeekIndicatorContext(): SeekIndicatorContextValue {\n  const ctx = useContext(SeekIndicatorContext);\n  if (!ctx) throw new Error('SeekIndicator child compounds must be used within a SeekIndicator.Root');\n  return ctx;\n}\n"],"mappings":";;;;AASA,MAAM,uBAAuB,cAAgD,IAAI;AAEjF,SAAgB,sBAAsB,EAAE,OAAO,YAAsD;CACnG,OAAO,oBAAC,qBAAqB,UAAtB;EAAsC;EAAQ;CAAwC,CAAA;AAC/F;AAEA,SAAgB,0BAAqD;CACnE,MAAM,MAAM,WAAW,oBAAoB;CAC3C,IAAI,CAAC,KAAK,MAAM,IAAI,MAAM,wEAAwE;CAClG,OAAO;AACT"}
+{"version":3,"file":"context.js","names":[],"sources":["../../../../src/ui/seek-indicator/context.tsx"],"sourcesContent":["import type { SeekIndicatorCore } from '@videojs/core';\nimport { createContext, type ProviderProps, useContext } from 'react';\n\nexport interface SeekIndicatorContextValue {\n  state: SeekIndicatorCore.State;\n}\n\nconst SeekIndicatorContext = createContext<SeekIndicatorContextValue | null>(null);\n\nexport function SeekIndicatorProvider({ value, children }: ProviderProps<SeekIndicatorContextValue>) {\n  return <SeekIndicatorContext.Provider value={value}>{children}</SeekIndicatorContext.Provider>;\n}\n\nexport function useSeekIndicatorContext(): SeekIndicatorContextValue {\n  const ctx = useContext(SeekIndicatorContext);\n  if (!ctx) throw new Error('SeekIndicator child compounds must be used within a SeekIndicator.Root');\n  return ctx;\n}\n"],"mappings":";;;AAOA,MAAM,uBAAuB,cAAgD,IAAI;AAEjF,SAAgB,sBAAsB,EAAE,OAAO,YAAsD;CACnG,OAAO,oBAAC,qBAAqB,UAAtB;EAAsC;EAAQ;CAAwC,CAAA;AAC/F;AAEA,SAAgB,0BAAqD;CACnE,MAAM,MAAM,WAAW,oBAAoB;CAC3C,IAAI,CAAC,KAAK,MAAM,IAAI,MAAM,wEAAwE;CAClG,OAAO;AACT"}