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

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

@@ -1,20 +1,25 @@
-'use client';
-
-import { useDestroy } from "../../utils/use-destroy.js";
+import { useOptionalContainer } from "../../player/context.js";
+import { useOptionalPopupGroup } from "../../player/popup-group-context.js";
 import { useLatestRef } from "../../utils/use-latest-ref.js";
+import { useDestroy } from "../../utils/use-destroy.js";
 import { useSafeId } from "../../utils/use-safe-id.js";
+import { useOptionalControlsContext } from "../controls/context.js";
+import { usePositionedState } from "../hooks/use-positioned-state.js";
 import { PopoverContextProvider } from "./context.js";
 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";
-
 //#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, children, ...coreProps }) {
+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();
+	const popupGroup = useOptionalPopupGroup();
+	const controls = useOptionalControlsContext();
 	const [core] = useState(() => new PopoverCore(coreProps));
 	core.setProps(coreProps);
-	const isControlled = controlledOpen !== void 0;
+	const isControlled = !isUndefined(controlledOpen);
 	const onOpenChangeRef = useLatestRef(onOpenChangeProp);
 	const onOpenChangeCompleteRef = useLatestRef(onOpenChangeCompleteProp);
 	const closeOnEscapeRef = useLatestRef(coreProps.closeOnEscape);
@@ -22,6 +27,7 @@ function PopoverRoot({ open: controlledOpen, defaultOpen = PopoverCore.defaultPr
 	const openOnHoverRef = useLatestRef(openOnHover);
 	const delayRef = useLatestRef(delay);
 	const closeDelayRef = useLatestRef(closeDelay);
+	const popupGroupRef = useLatestRef(popupGroup);
 	const [popover] = useState(() => {
 		const instance = createPopover({
 			transition: createTransition(),
@@ -35,36 +41,47 @@ function PopoverRoot({ open: controlledOpen, defaultOpen = PopoverCore.defaultPr
 			closeOnOutsideClick: () => closeOnOutsideClickRef.current ?? PopoverCore.defaultProps.closeOnOutsideClick,
 			openOnHover: () => openOnHoverRef.current,
 			delay: () => delayRef.current,
-			closeDelay: () => closeDelayRef.current
+			closeDelay: () => closeDelayRef.current,
+			group: () => popupGroupRef.current
 		});
 		if (!isControlled && defaultOpen) instance.open("click");
 		return instance;
 	});
 	const anchorName = useSafeId();
-	const popupId = useSafeId("popup-");
+	const popupId = useSafeId("popup");
 	useEffect(() => {
-		if (controlledOpen === void 0) return;
+		if (isUndefined(controlledOpen)) return;
 		const { active: inputOpen } = popover.input.current;
 		if (controlledOpen === inputOpen) return;
 		if (controlledOpen) popover.open("click");
 		else popover.close("click");
 	}, [controlledOpen, popover]);
+	useEffect(() => {
+		if (isUndefined(controls?.state.visible)) return;
+		if (controls.state.visible) return;
+		popover.close("imperative-action");
+	}, [controls?.state.visible, popover]);
 	useDestroy(popover);
 	const input = useSnapshot(popover.input);
 	core.setInput(input);
+	const { state, preferredSide, setPositionedSide } = usePositionedState(core.getState());
 	return /* @__PURE__ */ jsx(PopoverContextProvider, {
 		value: {
 			core,
 			popover,
-			state: core.getState(),
+			state,
+			preferredSide,
+			setPositionedSide,
 			stateAttrMap: PopoverDataAttrs,
 			anchorName,
-			popupId
+			popupId,
+			boundary,
+			container
 		},
 		children
 	});
 }
-
 //#endregion
 export { PopoverRoot };
+
 //# sourceMappingURL=popover-root.js.map

package/dist/dev/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 { createPopover, createTransition, type PopoverChangeDetails } from '@videojs/core/dom';\nimport { useSnapshot } from '@videojs/store/react';\nimport type { ReactNode } from 'react';\nimport { useEffect, useState } from 'react';\n\nimport { useDestroy } from '../../utils/use-destroy';\nimport { useLatestRef } from '../../utils/use-latest-ref';\nimport { useSafeId } from '../../utils/use-safe-id';\nimport { PopoverContextProvider } from './context';\n\nexport interface PopoverRootProps extends CorePopoverProps {\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  children,\n  ...coreProps\n}: PopoverRootProps): ReactNode {\n  const [core] = useState(() => new PopoverCore(coreProps));\n  core.setProps(coreProps);\n\n  const isControlled = controlledOpen !== undefined;\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\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    });\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 (controlledOpen === undefined) 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  useDestroy(popover);\n\n  const input = useSnapshot(popover.input);\n  core.setInput(input);\n  const state = core.getState();\n\n  return (\n    <PopoverContextProvider value={{ core, popover, state, stateAttrMap: PopoverDataAttrs, anchorName, popupId }}>\n      {children}\n    </PopoverContextProvider>\n  );\n}\n\nexport namespace PopoverRoot {\n  export type Props = PopoverRootProps;\n}\n"],"mappings":";;;;;;;;;;;;;AAqBA,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,UACA,GAAG,aAC2B;CAC9B,MAAM,CAAC,QAAQ,eAAe,IAAI,YAAY,UAAU,CAAC;AACzD,MAAK,SAAS,UAAU;CAExB,MAAM,eAAe,mBAAmB;CAIxC,MAAM,kBAAkB,aAAa,iBAAiB;CACtD,MAAM,0BAA0B,aAAa,yBAAyB;CACtE,MAAM,mBAAmB,aAAa,UAAU,cAAc;CAC9D,MAAM,yBAAyB,aAAa,UAAU,oBAAoB;CAC1E,MAAM,iBAAiB,aAAa,YAAY;CAChD,MAAM,WAAW,aAAa,MAAM;CACpC,MAAM,gBAAgB,aAAa,WAAW;CAE9C,MAAM,CAAC,WAAW,eAAe;EAC/B,MAAM,WAAW,cAAc;GAC7B,YAAY,kBAAkB;GAC9B,eAAe,UAAmB,YAAkC;AAClE,oBAAgB,UAAU,UAAU,QAAQ;;GAE9C,uBAAuB,aAAsB;AAC3C,4BAAwB,UAAU,SAAS;;GAE7C,qBAAqB,iBAAiB,WAAW,YAAY,aAAa;GAC1E,2BAA2B,uBAAuB,WAAW,YAAY,aAAa;GACtF,mBAAmB,eAAe;GAClC,aAAa,SAAS;GACtB,kBAAkB,cAAc;GACjC,CAAC;AAGF,MAAI,CAAC,gBAAgB,YACnB,UAAS,KAAK,QAAQ;AAGxB,SAAO;GACP;CAEF,MAAM,aAAa,WAAW;CAC9B,MAAM,UAAU,UAAU,SAAS;AAGnC,iBAAgB;AACd,MAAI,mBAAmB,OAAW;EAElC,MAAM,EAAE,QAAQ,cAAc,QAAQ,MAAM;AAC5C,MAAI,mBAAmB,UAAW;AAElC,MAAI,eACF,SAAQ,KAAK,QAAQ;MAErB,SAAQ,MAAM,QAAQ;IAEvB,CAAC,gBAAgB,QAAQ,CAAC;AAE7B,YAAW,QAAQ;CAEnB,MAAM,QAAQ,YAAY,QAAQ,MAAM;AACxC,MAAK,SAAS,MAAM;AAGpB,QACE,oBAAC;EAAuB,OAAO;GAAE;GAAM;GAAS,OAHpC,KAAK,UAAU;GAG4B,cAAc;GAAkB;GAAY;GAAS;EACzG;GACsB"}
+{"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/dev/ui/popover/popover-trigger.d.ts

@@ -1,11 +1,9 @@
 import { UIComponentProps } from "../../utils/types.js";
-import * as react from "react";
 import { PopoverState } from "@videojs/core";
-
 //#region src/ui/popover/popover-trigger.d.ts
 interface PopoverTriggerProps extends UIComponentProps<'button', PopoverState> {}
 /** Button that toggles the popover visibility. Renders a `<button>` element. */
-declare const PopoverTrigger: react.ForwardRefExoticComponent<Omit<PopoverTriggerProps, "ref"> & react.RefAttributes<HTMLButtonElement>>;
+declare const PopoverTrigger: import("react").ForwardRefExoticComponent<Omit<PopoverTriggerProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
 declare namespace PopoverTrigger {
   type Props = PopoverTriggerProps;
   type State = PopoverState;

package/dist/dev/ui/popover/popover-trigger.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"popover-trigger.d.ts","names":[],"sources":["../../../../src/ui/popover/popover-trigger.tsx"],"mappings":";;;;;UAUiB,mBAAA,SAA4B,gBAAA,WAA2B,YAAA;;cAG3D,cAAA,EAAc,KAAA,CAAA,yBAAA,CAAA,IAAA,CAAA,mBAAA,WAAA,KAAA,CAAA,aAAA,CAAA,iBAAA;AAAA,kBAwCV,cAAA;EAAA,KACH,KAAA,GAAQ,mBAAA;EAAA,KACR,KAAA,GAAQ,YAAA;AAAA"}
+{"version":3,"file":"popover-trigger.d.ts","names":[],"sources":["../../../../src/ui/popover/popover-trigger.tsx"],"mappings":";;;UAOiB,4BAA4B,2BAA2B;;cAG3D,gCAAc,0BAAA,KAAA,8CAAA,cAAA;kBAsCV;OACH,QAAQ;OACR,QAAQ"}

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

@@ -1,18 +1,14 @@
-'use client';
-
 import { renderElement } from "../../utils/use-render.js";
 import { usePopoverContext } from "./context.js";
 import { forwardRef, useCallback } from "react";
-import { supportsAnchorPositioning } from "@videojs/utils/dom";
-
 //#region src/ui/popover/popover-trigger.tsx
 /** Button that toggles the popover visibility. Renders a `<button>` element. */
 const PopoverTrigger = forwardRef(function PopoverTrigger({ render, className, style, ...elementProps }, forwardedRef) {
-	const { core, popover, state, stateAttrMap, anchorName, popupId } = usePopoverContext();
+	const { core, popover, state, stateAttrMap, popupId } = usePopoverContext();
+	const controlledId = state.open ? popupId : void 0;
 	const triggerRef = useCallback((el) => {
 		popover.setTriggerElement(el);
-		if (el && supportsAnchorPositioning()) el.style.setProperty("anchor-name", `--${anchorName}`);
-	}, [popover, anchorName]);
+	}, [popover]);
 	const { onFocusIn, onFocusOut, ...restTriggerProps } = popover.triggerProps;
 	return renderElement("button", {
 		render,
@@ -25,7 +21,7 @@ const PopoverTrigger = forwardRef(function PopoverTrigger({ render, className, s
 		props: [
 			{
 				type: "button",
-				...core.getTriggerAttrs(state, popupId)
+				...core.getTriggerAttrs(state, controlledId)
 			},
 			{
 				...restTriggerProps,
@@ -36,7 +32,7 @@ const PopoverTrigger = forwardRef(function PopoverTrigger({ render, className, s
 		]
 	});
 });
-
 //#endregion
 export { PopoverTrigger };
+
 //# sourceMappingURL=popover-trigger.js.map

package/dist/dev/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 { supportsAnchorPositioning } from '@videojs/utils/dom';\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, anchorName, popupId } = usePopoverContext();\n\n  const triggerRef = useCallback(\n    (el: HTMLButtonElement | null) => {\n      popover.setTriggerElement(el);\n      if (el && supportsAnchorPositioning()) {\n        el.style.setProperty('anchor-name', `--${anchorName}`);\n      }\n    },\n    [popover, anchorName]\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, popupId),\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":";;;;;;;;;AAaA,MAAa,iBAAiB,WAAmD,SAAS,eACxF,EAAE,QAAQ,WAAW,OAAO,GAAG,gBAC/B,cACA;CACA,MAAM,EAAE,MAAM,SAAS,OAAO,cAAc,YAAY,YAAY,mBAAmB;CAEvF,MAAM,aAAa,aAChB,OAAiC;AAChC,UAAQ,kBAAkB,GAAG;AAC7B,MAAI,MAAM,2BAA2B,CACnC,IAAG,MAAM,YAAY,eAAe,KAAK,aAAa;IAG1D,CAAC,SAAS,WAAW,CACtB;CAKD,MAAM,EAAE,WAAW,YAAY,GAAG,qBAAqB,QAAQ;AAE/D,QAAO,cACL,UACA;EAAE;EAAQ;EAAW;EAAO,EAC5B;EACE;EACA;EACA,KAAK,CAAC,cAAc,WAAW;EAC/B,OAAO;GACL;IACE,MAAM;IACN,GAAG,KAAK,gBAAgB,OAAO,QAAQ;IACxC;GACD;IAAE,GAAG;IAAkB,SAAS;IAAW,QAAQ;IAAY;GAC/D;GACD;EACF,CACF;EACD"}
+{"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/dev/ui/popover/use-popup-position.js

@@ -0,0 +1,33 @@
+import { PopupPositioner } from "@videojs/core/dom";
+import { useLayoutEffect, useState } from "react";
+//#region src/ui/popover/use-popup-position.ts
+const POPOVER_RESET = {
+	position: "fixed",
+	inset: "auto",
+	margin: 0
+};
+function usePopupPosition({ open, anchorName, position, triggerSource, popupRef, boundary, container, cssVars, onSideChange }) {
+	const [positioner] = useState(() => new PopupPositioner());
+	useLayoutEffect(() => {
+		if (!open) {
+			positioner.cleanup();
+			return;
+		}
+		positioner.sync({
+			anchorName,
+			position,
+			trigger: triggerSource.triggerElement,
+			popup: popupRef.current,
+			boundary,
+			container,
+			...cssVars ? { cssVars } : {},
+			...onSideChange ? { onSideChange } : {}
+		});
+	});
+	useLayoutEffect(() => () => positioner.cleanup(), [positioner]);
+	return POPOVER_RESET;
+}
+//#endregion
+export { usePopupPosition };
+
+//# sourceMappingURL=use-popup-position.js.map

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

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

package/dist/dev/ui/poster/index.js

@@ -1,3 +1,2 @@
 import { Poster } from "./poster.js";
-
-export { Poster };
+export { Poster };

package/dist/dev/ui/poster/poster.d.ts

@@ -1,24 +1,33 @@
 import { UIComponentProps } from "../../utils/types.js";
-import * as react from "react";
 import { PosterCore } from "@videojs/core";
-
 //#region src/ui/poster/poster.d.ts
 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.
+ *
+ * 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
+ *   }
  * />
  * ```
  */
-declare const Poster: react.ForwardRefExoticComponent<Omit<PosterProps, "ref"> & react.RefAttributes<HTMLImageElement>>;
+declare const Poster: import("react").ForwardRefExoticComponent<Omit<PosterProps, "ref"> & import("react").RefAttributes<HTMLImageElement>>;
 declare namespace Poster {
   type Props = PosterProps;
   type State = PosterCore.State;

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

@@ -1 +1 @@
-{"version":3,"file":"poster.d.ts","names":[],"sources":["../../../../src/ui/poster/poster.tsx"],"mappings":";;;;;UAWiB,WAAA,SAAoB,gBAAA,QAAwB,UAAA,CAAW,KAAA;;AAAxE;;;;;;;;;AAgBA;;;;cAAa,MAAA,EAAM,KAAA,CAAA,yBAAA,CAAA,IAAA,CAAA,WAAA,WAAA,KAAA,CAAA,aAAA,CAAA,gBAAA;AAAA,kBA6BF,MAAA;EAAA,KACH,KAAA,GAAQ,WAAA;EAAA,KACR,KAAA,GAAQ,UAAA,CAAW,KAAA;AAAA"}
+{"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"}

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

@@ -1,47 +1,109 @@
-'use client';
-
 import { usePlayer } from "../../player/context.js";
 import { renderElement } from "../../utils/use-render.js";
-import { logMissingFeature, selectPlayback } from "@videojs/core/dom";
-import { forwardRef, useState } from "react";
+import { logMissingFeature, 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());
-	if (!playback) {
+	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) 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"
+		});
+	}, []);
+	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) {
 		logMissingFeature("Poster", "playback");
 		return null;
 	}
-	core.setMedia(playback);
 	return renderElement("img", {
 		render,
 		className,
 		style
 	}, {
-		state: core.getState(),
+		state,
 		stateAttrMap: PosterDataAttrs,
-		ref: [forwardedRef],
-		props: [elementProps]
+		ref: [forwardedRef, imgRef],
+		props: [
+			{ alt: "" },
+			elementProps,
+			{
+				src: src || void 0,
+				onLoad: handleLoad,
+				onError: handleError
+			}
+		]
 	});
 });
-
 //#endregion
 export { Poster };
+
 //# sourceMappingURL=poster.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"poster.js","names":[],"sources":["../../../../src/ui/poster/poster.tsx"],"sourcesContent":["'use client';\n\nimport { PosterCore, PosterDataAttrs } from '@videojs/core';\nimport { logMissingFeature, selectPlayback } from '@videojs/core/dom';\nimport type { ForwardedRef } from 'react';\nimport { forwardRef, useState } from 'react';\n\nimport { usePlayer } from '../../player/context';\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\n\nexport interface PosterProps extends UIComponentProps<'img', PosterCore.State> {}\n\n/**\n * Displays the video poster image. Shows before playback starts, hides after.\n *\n * @example\n * ```tsx\n * <Poster src=\"poster.jpg\" alt=\"Video description\" />\n *\n * <Poster\n *   src=\"poster.jpg\"\n *   alt=\"Video description\"\n *   className={(state) => state.visible ? 'visible' : 'hidden'}\n * />\n * ```\n */\nexport const Poster = forwardRef(function Poster(\n  componentProps: PosterProps,\n  forwardedRef: ForwardedRef<HTMLImageElement>\n) {\n  const { render, className, style, ...elementProps } = componentProps;\n\n  const playback = usePlayer(selectPlayback);\n\n  const [core] = useState(() => new PosterCore());\n\n  if (!playback) {\n    if (__DEV__) logMissingFeature('Poster', 'playback');\n    return null;\n  }\n\n  core.setMedia(playback);\n\n  return renderElement(\n    'img',\n    { render, className, style },\n    {\n      state: core.getState(),\n      stateAttrMap: PosterDataAttrs,\n      ref: [forwardedRef],\n      props: [elementProps],\n    }\n  );\n});\n\nexport namespace Poster {\n  export type Props = PosterProps;\n  export type State = PosterCore.State;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AA2BA,MAAa,SAAS,WAAW,SAAS,OACxC,gBACA,cACA;CACA,MAAM,EAAE,QAAQ,WAAW,OAAO,GAAG,iBAAiB;CAEtD,MAAM,WAAW,UAAU,eAAe;CAE1C,MAAM,CAAC,QAAQ,eAAe,IAAI,YAAY,CAAC;AAE/C,KAAI,CAAC,UAAU;AACA,oBAAkB,UAAU,WAAW;AACpD,SAAO;;AAGT,MAAK,SAAS,SAAS;AAEvB,QAAO,cACL,OACA;EAAE;EAAQ;EAAW;EAAO,EAC5B;EACE,OAAO,KAAK,UAAU;EACtB,cAAc;EACd,KAAK,CAAC,aAAa;EACnB,OAAO,CAAC,aAAa;EACtB,CACF;EACD"}
+{"version":3,"file":"poster.js","names":[],"sources":["../../../../src/ui/poster/poster.tsx"],"sourcesContent":["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"}

package/dist/dev/ui/quality/index.d.ts

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

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

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

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

@@ -0,0 +1,31 @@
+import { TranslatedRadioOption } from "../hooks/create-radio-options-hook.js";
+import { QualityRadioGroupCore, QualityRadioGroupOption } from "@videojs/core";
+//#region src/ui/quality/use-quality-options.d.ts
+interface QualityOptionsProps extends QualityRadioGroupCore.Props {}
+type QualityOption = TranslatedRadioOption<QualityRadioGroupOption>;
+interface QualityOptionsResult {
+  state: QualityRadioGroupCore.State;
+  label: string;
+  value: string;
+  selectedLabel: string;
+  options: QualityOption[];
+  disabled: boolean;
+  hidden: boolean;
+  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.
+ *
+ * @param props - Optional `label`, `formatRendition`, and `disabled` overrides.
+ */
+declare function useQualityOptions(props?: QualityOptionsProps): QualityOptionsResult | null;
+declare namespace useQualityOptions {
+  type Props = QualityOptionsProps;
+  type Result = QualityOptionsResult;
+  type Option = QualityOption;
+}
+//#endregion
+export { QualityOption, QualityOptionsProps, QualityOptionsResult, useQualityOptions };
+//# sourceMappingURL=use-quality-options.d.ts.map

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

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

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

@@ -0,0 +1,25 @@
+import { createRadioOptionsHook } from "../hooks/create-radio-options-hook.js";
+import { selectQuality } from "@videojs/core/dom";
+import { QualityRadioGroupCore } from "@videojs/core";
+//#region src/ui/quality/use-quality-options.ts
+const useQualityRadioOptions = createRadioOptionsHook({
+	name: "useQualityOptions",
+	feature: "quality",
+	selector: selectQuality,
+	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.
+*
+* @param props - Optional `label`, `formatRendition`, and `disabled` overrides.
+*/
+function useQualityOptions(props) {
+	"use no memo";
+	return useQualityRadioOptions(props);
+}
+//#endregion
+export { useQualityOptions };
+
+//# sourceMappingURL=use-quality-options.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"use-quality-options.js","names":[],"sources":["../../../../src/ui/quality/use-quality-options.ts"],"sourcesContent":["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/dev/ui/quality-radio-group/index.d.ts

@@ -0,0 +1,2 @@
+import { QualityRadioGroup, QualityRadioGroupItemProps, QualityRadioGroupItemState, QualityRadioGroupProps } from "./quality-radio-group.js";
+export { QualityRadioGroup, type QualityRadioGroupItemProps, type QualityRadioGroupItemState, type QualityRadioGroupProps };

package/dist/dev/ui/quality-radio-group/index.js

@@ -0,0 +1,2 @@
+import { QualityRadioGroup } from "./quality-radio-group.js";
+export { QualityRadioGroup };

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

@@ -0,0 +1,44 @@
+import { UIComponentProps } from "../../utils/types.js";
+import { MenuRadioItemProps } from "../menu/menu-radio-item.js";
+import { QualityOption, QualityOptionsProps } from "../quality/use-quality-options.js";
+import { ReactElement } from "react";
+import { QualityRadioGroupCore } from "@videojs/core";
+//#region src/ui/quality-radio-group/quality-radio-group.d.ts
+type QualityRadioGroupItemState = QualityOption & {
+  /** Whether this quality option is currently selected. */
+  checked: boolean;
+};
+interface QualityRadioGroupItemProps extends Omit<MenuRadioItemProps, 'ref'> {
+  /** Rendition value represented by the item. */
+  'data-rendition': string;
+}
+interface QualityRadioGroupProps extends Omit<UIComponentProps<'div', QualityRadioGroupCore.State>, 'children'>, QualityOptionsProps {
+  /** Render one consumer-owned menu radio item for every quality option. */
+  renderItem: (props: QualityRadioGroupItemProps, state: QualityRadioGroupItemState) => ReactElement;
+}
+/**
+ * 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>
+ *   )}
+ * />
+ * ```
+ */
+declare const QualityRadioGroup: import("react").ForwardRefExoticComponent<Omit<QualityRadioGroupProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+declare namespace QualityRadioGroup {
+  type Props = QualityRadioGroupProps;
+  type State = QualityRadioGroupCore.State;
+  type ItemProps = QualityRadioGroupItemProps;
+  type ItemState = QualityRadioGroupItemState;
+}
+//#endregion
+export { QualityRadioGroup, QualityRadioGroupItemProps, QualityRadioGroupItemState, QualityRadioGroupProps };
+//# sourceMappingURL=quality-radio-group.d.ts.map

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

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