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

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

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

Files changed (1552) hide show

package/dist/dev/ui/playback-rate-radio-group/playback-rate-radio-group.js CHANGED Viewed

@@ -3,23 +3,23 @@ import { usePlaybackRateOptions } from "../playback-rate/use-playback-rate-optio
 import { getStateDataAttrs } from "@videojs/core/dom";
 import { Fragment, forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
-import { isFunction } from "@videojs/utils/predicate";
 import { PlaybackRateRadioGroupDataAttrs } from "@videojs/core";
+import { isFunction } from "@videojs/utils/predicate";
 //#region src/ui/playback-rate-radio-group/playback-rate-radio-group.tsx
 /**
 * Renders menu radio items for the player's available playback rates.
 *
 * @example
-* ```tsx
-* <PlaybackRateRadioGroup
-*   renderItem={(props, item) => (
-*     <Menu.RadioItem {...props}>
-*       {item.label}
-*       <Menu.ItemIndicator checked={item.checked} />
-*     </Menu.RadioItem>
-*   )}
-* />
-* ```
+*   ```tsx
+*   <PlaybackRateRadioGroup
+*     renderItem={(props, item) => (
+*       <Menu.RadioItem {...props}>
+*         {item.label}
+*         <Menu.ItemIndicator checked={item.checked} />
+*       </Menu.RadioItem>
+*     )}
+*   />;
+*   ```;
 */
 const PlaybackRateRadioGroup = forwardRef(function PlaybackRateRadioGroup(componentProps, forwardedRef) {
 	const { renderItem, render, className, style, label, formatRate, disabled, "aria-label": ariaLabelProp, "aria-labelledby": ariaLabelledBy, ...elementProps } = componentProps;

package/dist/dev/ui/playback-rate-radio-group/playback-rate-radio-group.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"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"}
1	+ {"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'>, 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":";;;;;;;;;;;;;;;;;;;;;;;AA8CA,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/dev/ui/popover/context.d.ts CHANGED Viewed

@@ -13,6 +13,7 @@ interface PopoverContextValue {
   boundary: PositioningBoundary;
   container: MediaContainer | null;
 }
+/** Returns the current popover compound-component context. Throws outside `Popover.Root`. */
 declare function usePopoverContext(): PopoverContextValue;
 //#endregion
 export { PopoverContextValue, usePopoverContext };

package/dist/dev/ui/popover/context.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"context.d.ts","names":[],"sources":["../../../../src/ui/popover/context.tsx"],"mappings":";;;UAIiB;EACf,MAAM;EACN,SAAS;EACT,OAAO,YAAY;EACnB,eAAe,YAAY;EAC3B,oBAAoB,MAAM,YAAY;EACtC,cAAc,eAAa,YAAY;EACvC;EACA;EACA,UAAU;EACV,WAAW~~;;iBAOG~~,qBAAqB"}
1	+ {"version":3,"file":"context.d.ts","names":[],"sources":["../../../../src/ui/popover/context.tsx"],"mappings":";;;UAIiB;EACf,MAAM;EACN,SAAS;EACT,OAAO,YAAY;EACnB,eAAe,YAAY;EAC3B,oBAAoB,MAAM,YAAY;EACtC,cAAc,eAAa,YAAY;EACvC;EACA;EACA,UAAU;EACV,WAAW;;;iBAQG,qBAAqB"}

package/dist/dev/ui/popover/context.js CHANGED Viewed

@@ -2,6 +2,7 @@ import { createContext, useContext } from "react";
 //#region src/ui/popover/context.tsx
 const PopoverContext = createContext(null);
 const PopoverContextProvider = PopoverContext.Provider;
+/** Returns the current popover compound-component context. Throws outside `Popover.Root`. */
 function usePopoverContext() {
 	const ctx = useContext(PopoverContext);
 	if (!ctx) throw new Error("Popover compound components must be used within a Popover.Root");

package/dist/dev/ui/popover/context.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"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"}
1	+ {"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\n/** Returns the current popover compound-component context. Throws outside `Popover.Root`. */\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\n return ctx;\n}\n"],"mappings":";;AAiBA,MAAM,iBAAiB,cAA0C,IAAI;AAErE,MAAa,yBAAyB,eAAe;;AAGrD,SAAgB,oBAAyC;CACvD,MAAM,MAAM,WAAW,cAAc;CACrC,IAAI,CAAC,KAAK,MAAM,IAAI,MAAM,gEAAgE;CAE1F,OAAO;AACT"}

package/dist/dev/ui/popover/popover-popup.d.ts CHANGED Viewed

@@ -2,7 +2,10 @@ import { UIComponentProps } from "../../utils/types.js";
 import { PopoverState } from "@videojs/core";
 //#region src/ui/popover/popover-popup.d.ts
 interface PopoverPopupProps extends UIComponentProps<'div', PopoverState> {}
-/** Container for the popover content. Positioned relative to the trigger using CSS anchor positioning with a JavaScript fallback. */
+/**
+ * Container for the popover content. Positioned relative to the trigger using CSS anchor positioning with a JavaScript
+ * fallback.
+ */
 declare const PopoverPopup: import("react").ForwardRefExoticComponent<Omit<PopoverPopupProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 declare namespace PopoverPopup {
   type Props = PopoverPopupProps;

package/dist/dev/ui/popover/popover-popup.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"popover-popup.d.ts","names":[],"sources":["../../../../src/ui/popover/popover-popup.tsx"],"mappings":";;;UASiB,0BAA0B,wBAAwB~~;;cAGtD~~,8BAAY,0BAAA,KAAA,4CAAA,cAAA;kBAuER;OACH,QAAQ;OACR,QAAQ"}
1	+ {"version":3,"file":"popover-popup.d.ts","names":[],"sources":["../../../../src/ui/popover/popover-popup.tsx"],"mappings":";;;UASiB,0BAA0B,wBAAwB;;;;;cAMtD,8BAAY,0BAAA,KAAA,4CAAA,cAAA;kBAuER;OACH,QAAQ;OACR,QAAQ"}

package/dist/dev/ui/popover/popover-popup.js CHANGED Viewed

@@ -4,13 +4,17 @@ import { usePopupPosition } from "./use-popup-position.js";
 import { usePopoverContext } from "./context.js";
 import { forwardRef, useCallback, useMemo, useRef } from "react";
 //#region src/ui/popover/popover-popup.tsx
-/** Container for the popover content. Positioned relative to the trigger using CSS anchor positioning with a JavaScript fallback. */
+/**
+* Container for the popover content. Positioned relative to the trigger using CSS anchor positioning with a JavaScript
+* fallback.
+*/
 const PopoverPopup = forwardRef(function PopoverPopup({ render, className, style, ...elementProps }, forwardedRef) {
 	const { core, popover, state, preferredSide, setPositionedSide, stateAttrMap, anchorName, popupId, boundary, container } = usePopoverContext();
 	const internalRef = useRef(null);
-	const composedRef = useComposedRefs(forwardedRef, useCallback((el) => {
+	const popupRef = useCallback((el) => {
 		popover.setPopupElement(el);
-	}, [popover]), internalRef);
+	}, [popover]);
+	const composedRef = useComposedRefs(forwardedRef, popupRef, internalRef);
 	const posOpts = useMemo(() => ({
 		side: preferredSide,
 		align: state.align

package/dist/dev/ui/popover/popover-popup.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"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"}
1	+ {"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/*\n Container for the popover content. Positioned relative to the trigger using CSS anchor positioning with a JavaScript\n * fallback.\n */\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":";;;;;;;;;;AAeA,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;CAE/C,MAAM,WAAW,aACd,OAA8B;EAC7B,QAAQ,gBAAgB,EAAE;CAC5B,GACA,CAAC,OAAO,CACV;CAEA,MAAM,cAAc,gBAAgB,cAAc,UAAU,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/dev/ui/popover/popover-root.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"popover-root.d.ts","names":[],"sources":["../../../../src/ui/popover/popover-root.tsx"],"mappings":";;;;~~UAoBiB~~,yBAAyB;;EAExC,WAAW;;EAEX,gBAAgB,eAAe,SAAS;;EAExC,wBAAwB;EACxB,WAAW;;iBAGG,cACd,MAAM,gBACN,aACA,cAAc,kBACd,sBAAsB,0BACtB,aACA,OACA,YACA,UACA,aACG,aACF,mBAAmB;~~kBA+FL~~;OACH,QAAQ"}
1	+ {"version":3,"file":"popover-root.d.ts","names":[],"sources":["../../../../src/ui/popover/popover-root.tsx"],"mappings":";;;;UAqBiB,yBAAyB;;EAExC,WAAW;;EAEX,gBAAgB,eAAe,SAAS;;EAExC,wBAAwB;EACxB,WAAW;;iBAGG,cACd,MAAM,gBACN,aACA,cAAc,kBACd,sBAAsB,0BACtB,aACA,OACA,YACA,UACA,aACG,aACF,mBAAmB;kBAoGL;OACH,QAAQ"}

package/dist/dev/ui/popover/popover-root.js CHANGED Viewed

@@ -10,8 +10,8 @@ import { createPopover, createTransition } from "@videojs/core/dom";
 import { useSnapshot } from "@videojs/store/react";
 import { useEffect, useState } from "react";
 import { jsx } from "react/jsx-runtime";
-import { isUndefined } from "@videojs/utils/predicate";
 import { PopoverCore, PopoverDataAttrs } from "@videojs/core";
+import { isUndefined } from "@videojs/utils/predicate";
 //#region src/ui/popover/popover-root.tsx
 function PopoverRoot({ open: controlledOpen, defaultOpen = PopoverCore.defaultProps.defaultOpen, onOpenChange: onOpenChangeProp, onOpenChangeComplete: onOpenChangeCompleteProp, openOnHover = PopoverCore.defaultProps.openOnHover, delay = PopoverCore.defaultProps.delay, closeDelay = PopoverCore.defaultProps.closeDelay, boundary = "container", children, ...coreProps }) {
 	const container = useOptionalContainer();

package/dist/dev/ui/popover/popover-root.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"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"}
1	+ {"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';\n\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\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\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\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\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\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":";;;;;;;;;;;;;;;AA+BA,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;CAExD,KAAK,SAAS,SAAS;CAEvB,MAAM,eAAe,CAAC,YAAY,cAAc;CAIhD,MAAM,kBAAkB,aAAa,gBAAgB;CACrD,MAAM,0BAA0B,aAAa,wBAAwB;CAErE,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;CAE7C,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;EAE1C,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;CAEvC,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/dev/ui/popover/use-popup-position.js CHANGED Viewed

@@ -6,7 +6,7 @@ const POPOVER_RESET = {
 	inset: "auto",
 	margin: 0
 };
-function usePopupPosition({ open, anchorName, position, triggerSource, popupRef, boundary, container, cssVars, onSideChange }) {
+function usePopupPosition({ open, anchorName, position, triggerSource, popupRef, boundary, container, cssVars, trackResize, onSideChange }) {
 	const [positioner] = useState(() => new PopupPositioner());
 	useLayoutEffect(() => {
 		if (!open) {
@@ -20,6 +20,7 @@ function usePopupPosition({ open, anchorName, position, triggerSource, popupRef,
 			popup: popupRef.current,
 			boundary,
 			container,
+			...trackResize !== void 0 ? { trackResize } : {},
 			...cssVars ? { cssVars } : {},
 			...onSideChange ? { onSideChange } : {}
 		});

package/dist/dev/ui/popover/use-popup-position.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"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"}
1	+ {"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 trackResize?: boolean;\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 trackResize,\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 ...(trackResize !== undefined ? { trackResize } : {}),\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;AAehF,SAAgB,iBAAiB,EAC/B,MACA,YACA,UACA,eACA,UACA,UACA,WACA,SACA,aACA,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,gBAAgB,KAAA,IAAY,EAAE,YAAY,IAAI,CAAC;GACnD,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/dev/ui/poster/poster.d.ts CHANGED Viewed

@@ -5,27 +5,25 @@ interface PosterProps extends UIComponentProps<'img', PosterCore.State> {}
 /**
  * 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.
+ * 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`.
+ * The image is decorative unless you say otherwise. Describe a poster that carries meaning by passing your own `alt`.
  *
  * @example
- * ```tsx
- * <VideoPlayer poster="poster.jpg">
+ *   ```tsx
+ *   <VideoPlayer poster="poster.jpg">
  *   <Poster />
- * </VideoPlayer>
+ *   </VideoPlayer>
  *
- * <Poster srcSet="poster-480.jpg 480w, poster-1080.jpg 1080w" sizes="100vw" />
+ *   <Poster srcSet="poster-480.jpg 480w, poster-1080.jpg 1080w" sizes="100vw" />
  *
- * <Poster
+ *   <Poster
  *   render={({ src, ...props }: ComponentProps<'img'>) =>
- *     src ? <Image {...props} src={src} alt="" fill /> : null
+ *   src ? <Image {...props} src={src} alt="" fill /> : null
  *   }
- * />
- * ```
+ *   />
+ *   ```;
  */
 declare const Poster: import("react").ForwardRefExoticComponent<Omit<PosterProps, "ref"> & import("react").RefAttributes<HTMLImageElement>>;
 declare namespace Poster {

package/dist/dev/ui/poster/poster.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"poster.d.ts","names":[],"sources":["../../../../src/ui/poster/poster.tsx"],"mappings":";;;UASiB,oBAAoB,wBAAwB,WAAW~~;;;;;;;;;;;;;;;;;;;;;;;;;;cAkC3D~~,wBAAM,0BAAA,KAAA,sCAAA,cAAA;~~kBAyGF~~;OACH,QAAQ;OACR,QAAQ,WAAW"}
1	+ {"version":3,"file":"poster.d.ts","names":[],"sources":["../../../../src/ui/poster/poster.tsx"],"mappings":";;;UASiB,oBAAoB,wBAAwB,WAAW;;;;;;;;;;;;;;;;;;;;;;;;cAgC3D,wBAAM,0BAAA,KAAA,sCAAA,cAAA;kBA4GF;OACH,QAAQ;OACR,QAAQ,WAAW"}

package/dist/dev/ui/poster/poster.js CHANGED Viewed

@@ -7,27 +7,25 @@ import { PosterCore, PosterDataAttrs } from "@videojs/core";
 /**
 * 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.
+* 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`.
+* The image is decorative unless you say otherwise. Describe a poster that carries meaning by passing your own `alt`.
 *
 * @example
-* ```tsx
-* <VideoPlayer poster="poster.jpg">
+*   ```tsx
+*   <VideoPlayer poster="poster.jpg">
 *   <Poster />
-* </VideoPlayer>
+*   </VideoPlayer>
 *
-* <Poster srcSet="poster-480.jpg 480w, poster-1080.jpg 1080w" sizes="100vw" />
+*   <Poster srcSet="poster-480.jpg 480w, poster-1080.jpg 1080w" sizes="100vw" />
 *
-* <Poster
+*   <Poster
 *   render={({ src, ...props }: ComponentProps<'img'>) =>
-*     src ? <Image {...props} src={src} alt="" fill /> : null
+*   src ? <Image {...props} src={src} alt="" fill /> : null
 *   }
-* />
-* ```
+*   />
+*   ```;
 */
 const Poster = forwardRef(function Poster(componentProps, forwardedRef) {
 	const { render, className, style, ...elementProps } = componentProps;

package/dist/dev/ui/poster/poster.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"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,OAAO;EACV,kBAAkB,UAAU,UAAU;~~EACnD~~,OAAO;CACT;CAEA,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"}
1	+ {"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 image attributes are yours. Leave the source\n * off and the player's resolved `poster` fills it in.\n \n The image is decorative unless you say otherwise. Describe a poster that 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\n if (!matchesRequest) setRequest({ src, srcSet: authoredSrcSet, state: initialLoadState });\n\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 // oxlint-disable-next-line react/exhaustive-deps -- 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\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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyCA,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;CAEjE,IAAI,CAAC,gBAAgB,WAAW;EAAE;EAAK,QAAQ;EAAgB,OAAO;CAAiB,CAAC;CAExF,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,OAAO;EACV,kBAAkB,UAAU,UAAU;EAEnD,OAAO;CACT;CAEA,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/dev/ui/quality/use-quality-options.d.ts CHANGED Viewed

@@ -14,9 +14,8 @@ interface QualityOptionsResult {
   setValue: (value: string) => void;
 }
 /**
- * Create quality menu options (including an `Auto` option) from the player
- * video rendition state. Returns `null` when the quality feature is not
- * configured.
+ * Create quality menu options (including an `Auto` option) from the player video rendition state. Returns `null` when
+ * the quality feature is not configured.
  *
  * @param props - Optional `label`, `formatRendition`, and `disabled` overrides.
  */

package/dist/dev/ui/quality/use-quality-options.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"use-quality-options.d.ts","names":[],"sources":["../../../../src/ui/quality/use-quality-options.ts"],"mappings":";;;UAKiB,4BAA4B,sBAAsB;KAEvD,gBAAgB,sBAAsB;UAEjC;EACf,OAAO,sBAAsB;EAC7B;EACA;EACA;EACA,SAAS;EACT;EACA;EACA,WAAW~~;;;;;;;;;iBAiBG~~,kBAAkB,QAAQ,sBAAsB;kBAM/C;OACH,QAAQ;OACR,SAAS;OACT,SAAS"}
1	+ {"version":3,"file":"use-quality-options.d.ts","names":[],"sources":["../../../../src/ui/quality/use-quality-options.ts"],"mappings":";;;UAKiB,4BAA4B,sBAAsB;KAEvD,gBAAgB,sBAAsB;UAEjC;EACf,OAAO,sBAAsB;EAC7B;EACA;EACA;EACA,SAAS;EACT;EACA;EACA,WAAW;;;;;;;;iBAgBG,kBAAkB,QAAQ,sBAAsB;kBAM/C;OACH,QAAQ;OACR,SAAS;OACT,SAAS"}

package/dist/dev/ui/quality/use-quality-options.js CHANGED Viewed

@@ -9,9 +9,8 @@ const useQualityRadioOptions = createRadioOptionsHook({
 	createCore: () => new QualityRadioGroupCore()
 });
 /**
-* Create quality menu options (including an `Auto` option) from the player
-* video rendition state. Returns `null` when the quality feature is not
-* configured.
+* Create quality menu options (including an `Auto` option) from the player video rendition state. Returns `null` when
+* the quality feature is not configured.
 *
 * @param props - Optional `label`, `formatRendition`, and `disabled` overrides.
 */

package/dist/dev/ui/quality/use-quality-options.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"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"}
1	+ {"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 video rendition state. Returns `null` when\n * the quality feature is not 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;;;;;;;AAQD,SAAgB,kBAAkB,OAA0D;CAC1F;CAEA,OAAO,uBAAuB,KAAK;AACrC"}

package/dist/dev/ui/quality-radio-group/quality-radio-group.d.ts CHANGED Viewed

@@ -20,17 +20,17 @@ interface QualityRadioGroupProps extends Omit<UIComponentProps<'div', QualityRad
  * Renders menu radio items for the player's video renditions.
  *
  * @example
- * ```tsx
- * <QualityRadioGroup
- *   renderItem={(props, item) => (
- *     <Menu.RadioItem {...props}>
- *       {item.label}
- *       {item.tier ? <sup>{item.tier}</sup> : null}
- *       <Menu.ItemIndicator checked={item.checked} />
- *     </Menu.RadioItem>
- *   )}
- * />
- * ```
+ *   ```tsx
+ *   <QualityRadioGroup
+ *     renderItem={(props, item) => (
+ *       <Menu.RadioItem {...props}>
+ *         {item.label}
+ *         {item.tier ? <sup>{item.tier}</sup> : null}
+ *         <Menu.ItemIndicator checked={item.checked} />
+ *       </Menu.RadioItem>
+ *     )}
+ *   />;
+ *   ```;
  */
 declare const QualityRadioGroup: import("react").ForwardRefExoticComponent<Omit<QualityRadioGroupProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 declare namespace QualityRadioGroup {

package/dist/dev/ui/quality-radio-group/quality-radio-group.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"quality-radio-group.d.ts","names":[],"sources":["../../../../src/ui/quality-radio-group/quality-radio-group.tsx"],"mappings":";;;;;;KAWY,6BAA6B;;EAEvC;;UAGe,mCAAmC,KAAK;;EAEvD;;UAGe,+BACP,KAAK,wBAAwB,sBAAsB,~~qBACzD~~;;~~EAEF~~,aAAa,OAAO,4BAA4B,OAAO,+BAA+B;;;;;;;;;;;;;;;;;;cAmB3E,mCAAiB,0BAAA,KAAA,iDAAA,cAAA;kBAyDb;OACH,QAAQ;OACR,QAAQ,sBAAsB;OAC9B,YAAY;OACZ,YAAY"}
1	+ {"version":3,"file":"quality-radio-group.d.ts","names":[],"sources":["../../../../src/ui/quality-radio-group/quality-radio-group.tsx"],"mappings":";;;;;;KAWY,6BAA6B;;EAEvC;;UAGe,mCAAmC,KAAK;;EAEvD;;UAGe,+BACP,KAAK,wBAAwB,sBAAsB,qBAAqB;;EAEhF,aAAa,OAAO,4BAA4B,OAAO,+BAA+B;;;;;;;;;;;;;;;;;;cAmB3E,mCAAiB,0BAAA,KAAA,iDAAA,cAAA;kBAyDb;OACH,QAAQ;OACR,QAAQ,sBAAsB;OAC9B,YAAY;OACZ,YAAY"}

package/dist/dev/ui/quality-radio-group/quality-radio-group.js CHANGED Viewed

@@ -3,24 +3,24 @@ import { useQualityOptions } from "../quality/use-quality-options.js";
 import { getStateDataAttrs } from "@videojs/core/dom";
 import { Fragment, forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
-import { isFunction } from "@videojs/utils/predicate";
 import { QualityRadioGroupDataAttrs } from "@videojs/core";
+import { isFunction } from "@videojs/utils/predicate";
 //#region src/ui/quality-radio-group/quality-radio-group.tsx
 /**
 * Renders menu radio items for the player's video renditions.
 *
 * @example
-* ```tsx
-* <QualityRadioGroup
-*   renderItem={(props, item) => (
-*     <Menu.RadioItem {...props}>
-*       {item.label}
-*       {item.tier ? <sup>{item.tier}</sup> : null}
-*       <Menu.ItemIndicator checked={item.checked} />
-*     </Menu.RadioItem>
-*   )}
-* />
-* ```
+*   ```tsx
+*   <QualityRadioGroup
+*     renderItem={(props, item) => (
+*       <Menu.RadioItem {...props}>
+*         {item.label}
+*         {item.tier ? <sup>{item.tier}</sup> : null}
+*         <Menu.ItemIndicator checked={item.checked} />
+*       </Menu.RadioItem>
+*     )}
+*   />;
+*   ```;
 */
 const QualityRadioGroup = forwardRef(function QualityRadioGroup(componentProps, forwardedRef) {
 	const { renderItem, render, className, style, label, formatRendition, disabled, "aria-label": ariaLabelProp, "aria-labelledby": ariaLabelledBy, ...elementProps } = componentProps;

package/dist/dev/ui/quality-radio-group/quality-radio-group.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"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"}
1	+ {"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'>, 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":";;;;;;;;;;;;;;;;;;;;;;;;AA2CA,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/dev/ui/seek-button/seek-button.d.ts CHANGED Viewed

@@ -6,18 +6,18 @@ interface SeekButtonProps extends UIComponentProps<'button', SeekButtonCore.Stat
  * A button that seeks forward or backward by a configurable number of seconds.
  *
  * @example
- * ```tsx
- * <SeekButton seconds={-10} />
+ *   ```tsx
+ *   <SeekButton seconds={-10} />
  *
- * <SeekButton
+ *   <SeekButton
  *   seconds={30}
  *   render={(props, state) => (
- *     <button {...props}>
- *       {state.direction === 'backward' ? <RewindIcon /> : <FastForwardIcon />}
- *     </button>
+ *   <button {...props}>
+ *   {state.direction === 'backward' ? <RewindIcon /> : <FastForwardIcon />}
+ *   </button>
  *   )}
- * />
- * ```
+ *   />
+ *   ```;
  */
 declare const SeekButton: import("react").ForwardRefExoticComponent<SeekButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
 declare namespace SeekButton {

package/dist/dev/ui/seek-button/seek-button.js CHANGED Viewed

@@ -6,18 +6,18 @@ import { SeekButtonCore, SeekButtonDataAttrs } from "@videojs/core";
 * A button that seeks forward or backward by a configurable number of seconds.
 *
 * @example
-* ```tsx
-* <SeekButton seconds={-10} />
+*   ```tsx
+*   <SeekButton seconds={-10} />
 *
-* <SeekButton
+*   <SeekButton
 *   seconds={30}
 *   render={(props, state) => (
-*     <button {...props}>
-*       {state.direction === 'backward' ? <RewindIcon /> : <FastForwardIcon />}
-*     </button>
+*   <button {...props}>
+*   {state.direction === 'backward' ? <RewindIcon /> : <FastForwardIcon />}
+*   </button>
 *   )}
-* />
-* ```
+*   />
+*   ```;
 */
 const SeekButton = createMediaButton({
 	displayName: "SeekButton",

package/dist/dev/ui/seek-button/seek-button.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"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"}
1	+ {"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/dev/ui/seek-indicator/context.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"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"}
1	+ {"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\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;CAElG,OAAO;AACT"}

package/dist/dev/ui/seek-indicator/seek-indicator-root.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"seek-indicator-root.d.ts","names":[],"sources":["../../../../src/ui/seek-indicator/seek-indicator-root.tsx"],"mappings":";;;UASiB,+BACP,wBAAwB,kBAAkB,~~QAChD~~,kBAAkB;~~cAET~~,mCAAiB,0BAAA,KAAA,iDAAA,cAAA;~~kBAyBb~~;OACH,QAAQ;OACR,QAAQ,kBAAkB"}
1	+ {"version":3,"file":"seek-indicator-root.d.ts","names":[],"sources":["../../../../src/ui/seek-indicator/seek-indicator-root.tsx"],"mappings":";;;UASiB,+BACP,wBAAwB,kBAAkB,QAAQ,kBAAkB;cAEjE,mCAAiB,0BAAA,KAAA,iDAAA,cAAA;kBAwBb;OACH,QAAQ;OACR,QAAQ,kBAAkB"}