@videojs/react 10.0.0-rc.1 → 10.0.0-rc.3

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

@@ -0,0 +1,38 @@
+import { renderElement } from "../../utils/use-render.js";
+import { usePopoverContext } from "./context.js";
+import { forwardRef, useCallback } from "react";
+//#region src/ui/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, popupId } = usePopoverContext();
+	const controlledId = state.open ? popupId : void 0;
+	const triggerRef = useCallback((el) => {
+		popover.setTriggerElement(el);
+	}, [popover]);
+	const { onFocusIn, onFocusOut, ...restTriggerProps } = popover.triggerProps;
+	return renderElement("button", {
+		render,
+		className,
+		style
+	}, {
+		state,
+		stateAttrMap,
+		ref: [forwardedRef, triggerRef],
+		props: [
+			{
+				type: "button",
+				...core.getTriggerAttrs(state, controlledId)
+			},
+			{
+				...restTriggerProps,
+				onFocus: onFocusIn,
+				onBlur: onFocusOut
+			},
+			elementProps
+		]
+	});
+});
+//#endregion
+export { PopoverTrigger };
+
+//# sourceMappingURL=trigger.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"trigger.js","names":[],"sources":["../../../../src/ui/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

@@ -1,4 +1,5 @@
 import { PopupPositioner } from "@videojs/core/dom";
+import { c } from "react-compiler-runtime";
 import { useLayoutEffect, useState } from "react";
 //#region src/ui/popover/use-popup-position.ts
 const POPOVER_RESET = {
@@ -6,28 +7,61 @@ const POPOVER_RESET = {
 	inset: "auto",
 	margin: 0
 };
-function usePopupPosition({ open, anchorName, position, triggerSource, popupRef, boundary, container, cssVars, trackResize, onSideChange }) {
-	const [positioner] = useState(() => new PopupPositioner());
-	useLayoutEffect(() => {
-		if (!open) {
-			positioner.cleanup();
-			return;
-		}
-		positioner.sync({
-			anchorName,
-			position,
-			trigger: triggerSource.triggerElement,
-			popup: popupRef.current,
-			boundary,
-			container,
-			...trackResize !== void 0 ? { trackResize } : {},
-			...cssVars ? { cssVars } : {},
-			...onSideChange ? { onSideChange } : {}
-		});
-	});
-	useLayoutEffect(() => () => positioner.cleanup(), [positioner]);
+function usePopupPosition(t0) {
+	const $ = c(15);
+	const { open, anchorName, position, triggerSource, popupRef, boundary, container, cssVars, trackResize, onSideChange } = t0;
+	const [positioner] = useState(_temp);
+	let t1;
+	if ($[0] !== anchorName || $[1] !== boundary || $[2] !== container || $[3] !== cssVars || $[4] !== onSideChange || $[5] !== open || $[6] !== popupRef || $[7] !== position || $[8] !== positioner || $[9] !== trackResize || $[10] !== triggerSource) {
+		t1 = () => {
+			if (!open) {
+				positioner.cleanup();
+				return;
+			}
+			positioner.sync({
+				anchorName,
+				position,
+				trigger: triggerSource.triggerElement,
+				popup: popupRef.current,
+				boundary,
+				container,
+				...trackResize !== void 0 ? { trackResize } : {},
+				...cssVars ? { cssVars } : {},
+				...onSideChange ? { onSideChange } : {}
+			});
+		};
+		$[0] = anchorName;
+		$[1] = boundary;
+		$[2] = container;
+		$[3] = cssVars;
+		$[4] = onSideChange;
+		$[5] = open;
+		$[6] = popupRef;
+		$[7] = position;
+		$[8] = positioner;
+		$[9] = trackResize;
+		$[10] = triggerSource;
+		$[11] = t1;
+	} else t1 = $[11];
+	useLayoutEffect(t1);
+	let t2;
+	let t3;
+	if ($[12] !== positioner) {
+		t2 = () => () => positioner.cleanup();
+		t3 = [positioner];
+		$[12] = positioner;
+		$[13] = t2;
+		$[14] = t3;
+	} else {
+		t2 = $[13];
+		t3 = $[14];
+	}
+	useLayoutEffect(t2, t3);
 	return POPOVER_RESET;
 }
+function _temp() {
+	return new PopupPositioner();
+}
 //#endregion
 export { usePopupPosition };
 

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

@@ -1 +1 @@
-{"version":3,"file":"use-popup-position.js","names":[],"sources":["../../../../src/ui/popover/use-popup-position.ts"],"sourcesContent":["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"}
+{"version":3,"file":"use-popup-position.js","names":["{\n  open,\n  anchorName,\n  position,\n  triggerSource,\n  popupRef,\n  boundary,\n  container,\n  cssVars,\n  trackResize,\n  onSideChange,\n}: UsePopupPositionOptions","() => new PopupPositioner()","() => {\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  }","popupRef.current","triggerSource.triggerElement","() => () => positioner.cleanup()","[positioner]"],"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,iBAAA,IAWwB;;CAXP,MAAA,EAC/B,MACA,YACA,UACA,eACA,UACA,UACA,WACA,SACA,aACA,iBAV+BA;CAY/B,MAAM,CAAC,cAAc,SAASC,KAA2B;CAEzCC,IAAAA;CAOZ,IAAA,EAAA,OAAA,cAAA,EAAA,OAIA,YAAA,EAAA,OACA,aAAA,EAAA,OAEI,WAAA,EAAA,OACA,gBAAA,EAAA,OAdD,QAAA,EAAA,OASIC,YAAAA,EAAAA,OAFP,YAAA,EAAA,OANA,cAAA,EAAA,OAWI,eAAA,EAAA,QAJKC,eAAAA;EATG,WAAM;GACpB,IAAI,CAAC,MAAM;IACT,WAAW,QAAQ;IACnB;GACF;GAEA,WAAW,KAAK;IACd;IACA;IACA,SAAS,cAAc;IACvB,OAAO,SAAS;IAChB;IACA;IACA,GAAI,gBAAgB,KAAA,IAAY,EAAE,YAAY,IAAI,CAAC;IACnD,GAAI,UAAU,EAAE,QAAQ,IAAI,CAAC;IAC7B,GAAI,eAAe,EAAE,aAAa,IAAI,CAAC;GACzC,CAAC;EACH;EAVI,EAAA,KAAA;EAIA,EAAA,KAAA;EACA,EAAA,KAAA;EAEI,EAAA,KAAA;EACA,EAAA,KAAA;EAdD,EAAA,KAAA;EASID,EAAAA,KAAAA;EAFP,EAAA,KAAA;EANA,EAAA,KAAA;EAWI,EAAA,KAAA;EAJKC,EAAAA,MAAAA;;;CATb,gBAAgBF,EAiBf;CAEeG,IAAAA;CAAkCC,IAAAA;CAAtB,IAAA,EAAA,QAAA,YAAA;EAAZ,iBAAY,WAAW,QAAQ;EAAG,KAAA,CAAC,UAAU;EAAjC,EAAA,MAAA;;;;;;;CAA5B,gBAAgBD,IAAkCC,EAAY;CAE9D,OAAO;AACT;AAxBgC,SAAA,QAAA;CAAM,OAAA,IAAI,gBAAgB"}

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

@@ -0,0 +1,29 @@
+import { c } from "react-compiler-runtime";
+import { createContext, useContext } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/ui/poster/context.tsx
+const PosterContext = createContext(null);
+function PosterProvider(t0) {
+	const $ = c(3);
+	const { value, children } = t0;
+	let t1;
+	if ($[0] !== children || $[1] !== value) {
+		t1 = /* @__PURE__ */ jsx(PosterContext.Provider, {
+			value,
+			children
+		});
+		$[0] = children;
+		$[1] = value;
+		$[2] = t1;
+	} else t1 = $[2];
+	return t1;
+}
+function usePosterContext() {
+	const ctx = useContext(PosterContext);
+	if (!ctx) throw new Error("Poster compound components must be used within a Poster.Root");
+	return ctx;
+}
+//#endregion
+export { PosterProvider, usePosterContext };
+
+//# sourceMappingURL=context.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"context.js","names":["{ value, children }: ProviderProps<PosterContextValue>","<PosterContext.Provider value={value}>{children}</PosterContext.Provider>","PosterContext.Provider"],"sources":["../../../../src/ui/poster/context.tsx"],"sourcesContent":["import { type PosterImageLoadState, type PosterState } from '@videojs/core';\nimport { createContext, type ProviderProps, useContext } from 'react';\n\nexport interface PosterContextValue {\n  state: PosterState;\n  setImageLoadState: (state: PosterImageLoadState) => void;\n}\n\nconst PosterContext = createContext<PosterContextValue | null>(null);\n\nexport function PosterProvider({ value, children }: ProviderProps<PosterContextValue>) {\n  return <PosterContext.Provider value={value}>{children}</PosterContext.Provider>;\n}\n\nexport function usePosterContext(): PosterContextValue {\n  const ctx = useContext(PosterContext);\n  if (!ctx) throw new Error('Poster compound components must be used within a Poster.Root');\n\n  return ctx;\n}\n"],"mappings":";;;;AAQA,MAAM,gBAAgB,cAAyC,IAAI;AAEnE,SAAgB,eAAA,IAAuE;;CAAxD,MAAA,EAAE,OAAO,aAATA;CACtBC,IAAAA;CAAuC,IAAA,EAAA,OAAA,YAAA,EAAA,OAAR,OAAA;EAA/B,KAAA,oBAACC,cAAAA,UAAD;GAA+B;GAAQ;EAAiC,CAAA;EAAjC,EAAA,KAAA;EAAR,EAAA,KAAA;;;CAAtC,OAAOD;AACT;AAEA,SAAgB,mBAAuC;CACrD,MAAM,MAAM,WAAW,aAAa;CACpC,IAAI,CAAC,KAAK,MAAM,IAAI,MAAM,8DAA8D;CAExF,OAAO;AACT"}

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

@@ -0,0 +1,17 @@
+import { UIComponentProps } from "../../utils/types.js";
+import { PosterCore } from "@videojs/core";
+//#region src/ui/poster/image.d.ts
+interface PosterImageProps extends UIComponentProps<'img', PosterCore.State> {}
+/**
+ * Displays the poster image managed by `Poster.Root`.
+ *
+ * Renders an `img`, so `srcSet`, `sizes`, `loading`, and the rest of the native image attributes remain available.
+ * Leave the source off and the player's resolved poster fills it in. The image is decorative unless you supply `alt`.
+ */
+declare const PosterImage: import("react").ForwardRefExoticComponent<Omit<PosterImageProps, "ref"> & import("react").RefAttributes<HTMLImageElement>>;
+declare namespace PosterImage {
+  type Props = PosterImageProps;
+}
+//#endregion
+export { PosterImage, PosterImageProps };
+//# sourceMappingURL=image.d.ts.map

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

@@ -0,0 +1,122 @@
+import { useComposedRefs } from "../../utils/use-composed-refs.js";
+import { useLatestRef } from "../../utils/use-latest-ref.js";
+import { renderElement } from "../../utils/use-render.js";
+import { usePosterContext } from "./context.js";
+import { c } from "react-compiler-runtime";
+import { forwardRef, useLayoutEffect, useRef, useState } from "react";
+//#region src/ui/poster/image.tsx
+/**
+* Displays the poster image managed by `Poster.Root`.
+*
+* Renders an `img`, so `srcSet`, `sizes`, `loading`, and the rest of the native image attributes remain available.
+* Leave the source off and the player's resolved poster fills it in. The image is decorative unless you supply `alt`.
+*/
+const PosterImage = forwardRef(function PosterImage(componentProps, forwardedRef) {
+	const $ = c(13);
+	const { render, className, style, ...elementProps } = componentProps;
+	const { state, setImageLoadState } = usePosterContext();
+	const { src: authoredSrc, srcSet: authoredSrcSet } = elementProps;
+	const src = authoredSrc ?? (authoredSrcSet === void 0 ? state.src : "");
+	const initialLoadState = !src && authoredSrcSet === void 0 ? "none" : "loading";
+	const [request, setRequest] = useState(() => ({
+		src,
+		srcSet: authoredSrcSet,
+		state: initialLoadState
+	}));
+	const didCheckInitialImageRef = useRef(false);
+	let t0;
+	if ($[0] !== authoredSrcSet || $[1] !== src) {
+		t0 = {
+			src,
+			srcSet: authoredSrcSet
+		};
+		$[0] = authoredSrcSet;
+		$[1] = src;
+		$[2] = t0;
+	} else t0 = $[2];
+	const requested = useLatestRef(t0);
+	const matchesRequest = request.src === src && request.srcSet === authoredSrcSet;
+	if (!matchesRequest) setRequest({
+		src,
+		srcSet: authoredSrcSet,
+		state: initialLoadState
+	});
+	const loadState = matchesRequest ? request.state : initialLoadState;
+	let t1;
+	if ($[3] !== loadState || $[4] !== setImageLoadState) {
+		t1 = () => {
+			setImageLoadState(loadState);
+			return () => setImageLoadState("none");
+		};
+		$[3] = loadState;
+		$[4] = setImageLoadState;
+		$[5] = t1;
+	} else t1 = $[5];
+	let t2;
+	if ($[6] !== authoredSrcSet || $[7] !== loadState || $[8] !== setImageLoadState || $[9] !== src) {
+		t2 = [
+			authoredSrcSet,
+			loadState,
+			setImageLoadState,
+			src
+		];
+		$[6] = authoredSrcSet;
+		$[7] = loadState;
+		$[8] = setImageLoadState;
+		$[9] = src;
+		$[10] = t2;
+	} else t2 = $[10];
+	useLayoutEffect(t1, t2);
+	let t3;
+	if ($[11] !== requested) {
+		t3 = (img) => {
+			if (!img || didCheckInitialImageRef.current) return;
+			didCheckInitialImageRef.current = true;
+			const { src: src_0, srcSet } = requested.current;
+			if (img.naturalWidth > 0) setRequest({
+				src: src_0,
+				srcSet,
+				state: "loaded"
+			});
+			else if (img.complete && (img.getAttribute("src") || img.hasAttribute("srcset"))) setRequest({
+				src: src_0,
+				srcSet,
+				state: "error"
+			});
+		};
+		$[11] = requested;
+		$[12] = t3;
+	} else t3 = $[12];
+	const ref = useComposedRefs(forwardedRef, t3);
+	const handleLoad = () => setRequest({
+		src,
+		srcSet: authoredSrcSet,
+		state: "loaded"
+	});
+	const handleError = () => setRequest({
+		src,
+		srcSet: authoredSrcSet,
+		state: "error"
+	});
+	return renderElement("img", {
+		render,
+		className,
+		style
+	}, {
+		state,
+		ref,
+		props: [
+			{ alt: "" },
+			elementProps,
+			{
+				src: src || void 0,
+				onLoad: handleLoad,
+				onError: handleError
+			}
+		]
+	});
+});
+//#endregion
+export { PosterImage };
+
+//# sourceMappingURL=image.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"image.js","names":["{ src, srcSet: authoredSrcSet }","() => {\n    setImageLoadState(loadState);\n\n    return () => setImageLoadState('none');\n  }","[authoredSrcSet, loadState, setImageLoadState, src]","(img: HTMLImageElement | null) => {\n      if (!img || didCheckInitialImageRef.current) return;\n\n      didCheckInitialImageRef.current = true;\n\n      const { src, srcSet } = requested.current;\n\n      if (img.naturalWidth > 0) setRequest({ src, srcSet, state: 'loaded' });\n      else if (img.complete && (img.getAttribute('src') || img.hasAttribute('srcset'))) {\n        setRequest({ src, srcSet, state: 'error' });\n      }\n    }","requested.current","useCallback(\n    (img: HTMLImageElement | null) => {\n      if (!img || didCheckInitialImageRef.current) return;\n\n      didCheckInitialImageRef.current = true;\n\n      const { src, srcSet } = requested.current;\n\n      if (img.naturalWidth > 0) setRequest({ src, srcSet, state: 'loaded' });\n      else if (img.complete && (img.getAttribute('src') || img.hasAttribute('srcset'))) {\n        setRequest({ src, srcSet, state: 'error' });\n      }\n    },\n    [requested]\n  )"],"sources":["../../../../src/ui/poster/image.tsx"],"sourcesContent":["import type { PosterCore, PosterImageLoadState } from '@videojs/core';\nimport type { ForwardedRef } from 'react';\nimport { forwardRef, useCallback, useLayoutEffect, useRef, useState } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { useComposedRefs } from '../../utils/use-composed-refs';\nimport { useLatestRef } from '../../utils/use-latest-ref';\nimport { renderElement } from '../../utils/use-render';\nimport { usePosterContext } from './context';\n\nexport interface PosterImageProps 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 poster image managed by `Poster.Root`.\n *\n * Renders an `img`, so `srcSet`, `sizes`, `loading`, and the rest of the native image attributes remain available.\n * Leave the source off and the player's resolved poster fills it in. The image is decorative unless you supply `alt`.\n */\nexport const PosterImage = forwardRef(function PosterImage(\n  componentProps: PosterImageProps,\n  forwardedRef: ForwardedRef<HTMLImageElement>\n) {\n  const { render, className, style, ...elementProps } = componentProps;\n  const { state, setImageLoadState } = usePosterContext();\n\n  const { src: authoredSrc, srcSet: authoredSrcSet } = elementProps;\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 ? state.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 didCheckInitialImageRef = useRef(false);\n  const requested = useLatestRef({ src, srcSet: authoredSrcSet });\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  // Before paint, so the root's first frame already carries `data-loading` for a\n  // source that is resolving instead of flashing the layers keyed off that state.\n  // The reset lives in the same effect: a passive cleanup would run after this\n  // layout write when Strict Mode re-runs effects, leaving the root at `none`.\n  useLayoutEffect(() => {\n    setImageLoadState(loadState);\n\n    return () => setImageLoadState('none');\n  }, [authoredSrcSet, loadState, setImageLoadState, src]);\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  // The check rides on the ref, so an override that renders nothing until a\n  // source resolves is still read the moment its image mounts.\n  const checkInitialImage = useCallback(\n    (img: HTMLImageElement | null) => {\n      if (!img || didCheckInitialImageRef.current) return;\n\n      didCheckInitialImageRef.current = true;\n\n      const { src, srcSet } = requested.current;\n\n      if (img.naturalWidth > 0) setRequest({ src, srcSet, state: 'loaded' });\n      else if (img.complete && (img.getAttribute('src') || img.hasAttribute('srcset'))) {\n        setRequest({ src, srcSet, state: 'error' });\n      }\n    },\n    [requested]\n  );\n  const ref = useComposedRefs(forwardedRef, checkInitialImage);\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 = () => setRequest({ src, srcSet: authoredSrcSet, state: 'loaded' });\n  const handleError = () => setRequest({ src, srcSet: authoredSrcSet, state: 'error' });\n\n  return renderElement(\n    'img',\n    { render, className, style },\n    {\n      state,\n      ref,\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 PosterImage {\n  export type Props = PosterImageProps;\n}\n"],"mappings":";;;;;;;;;;;;;AAyBA,MAAa,cAAc,WAAW,SAAS,YAC7C,gBACA,cACA;;CACA,MAAM,EAAE,QAAQ,WAAW,OAAO,GAAG,iBAAiB;CACtD,MAAM,EAAE,OAAO,sBAAsB,iBAAiB;CAEtD,MAAM,EAAE,KAAK,aAAa,QAAQ,mBAAmB;CAKrD,MAAM,MAAM,gBAAgB,mBAAmB,KAAA,IAAY,MAAM,MAAM;CAEvE,MAAM,mBAAyC,CAAC,OAAO,mBAAmB,KAAA,IAAY,SAAS;CAC/F,MAAM,CAAC,SAAS,cAAc,gBAA8B;EAC1D;EACA,QAAQ;EACR,OAAO;CACT,EAAE;CACF,MAAM,0BAA0B,OAAO,KAAK;CACbA,IAAAA;CAAe,IAAA,EAAA,OAAA,kBAAA,EAAA,OAAb,KAAA;EAAF,KAAA;GAAE;GAAK,QAAQ;EAAe;EAAf,EAAA,KAAA;EAAb,EAAA,KAAA;;;CAAjC,MAAM,YAAY,aAAaA,EAA+B;CAM9D,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;CAMnCC,IAAAA;CACI,IAAA,EAAA,OAAA,aAAA,EAAA,OAAlB,mBAAA;EADc,WAAM;GACpB,kBAAkB,SAAS;GAE3B,aAAa,kBAAkB,MAAM;EACvC;EAHoB,EAAA,KAAA;EAAlB,EAAA,KAAA;;;CAGCC,IAAAA;CAAC,IAAA,EAAA,OAAA,kBAAA,EAAA,OAAgB,aAAA,EAAA,OAAW,qBAAA,EAAA,OAAmB,KAAA;EAA/C,KAAA;GAAC;GAAgB;GAAW;GAAmB;EAAG;EAAjD,EAAA,KAAA;EAAgB,EAAA,KAAA;EAAW,EAAA,KAAA;EAAmB,EAAA,KAAA;;;CAJlD,gBAAgBD,IAIbC,EAAmD;CAepDC,IAAAA;CAK0BC,IAAAA,EAAAA,QAAAA,WAAAA;EAL1B,MAAC,QAAiC;GAChC,IAAI,CAAC,OAAO,wBAAwB,SAAS;GAE7C,wBAAwB,UAAU;GAElC,MAAM,EAAE,KAAA,OAAK,WAAW,UAAU;GAElC,IAAI,IAAI,eAAe,GAAG,WAAW;IAAE,KAAA;IAAK;IAAQ,OAAO;GAAS,CAAC;QAChE,IAAI,IAAI,aAAa,IAAI,aAAa,KAAK,KAAK,IAAI,aAAa,QAAQ,IAC5E,WAAW;IAAE,KAAA;IAAK;IAAQ,OAAO;GAAQ,CAAC;EAE9C;EAN0BA,EAAAA,MAAAA;;;CAS5B,MAAM,MAAM,gBAAgB,cAAc,EAAiB;CAI3D,MAAM,mBAAmB,WAAW;EAAE;EAAK,QAAQ;EAAgB,OAAO;CAAS,CAAC;CACpF,MAAM,oBAAoB,WAAW;EAAE;EAAK,QAAQ;EAAgB,OAAO;CAAQ,CAAC;CAEpF,OAAO,cACL,OACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EACE;EACA;EACA,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/poster/index.d.ts

@@ -1,2 +1,2 @@
-import { Poster, PosterProps } from "./poster.js";
-export { Poster, type PosterProps };
+import { index_parts_d_exports } from "./index.parts.js";
+export { index_parts_d_exports as Poster };

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

@@ -1,2 +1,2 @@
-import { Poster } from "./poster.js";
-export { Poster };
+import { index_parts_exports } from "./index.parts.js";
+export { index_parts_exports as Poster };

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

@@ -0,0 +1,8 @@
+import { PosterImage, PosterImageProps } from "./image.js";
+import { PosterRoot, PosterRootProps } from "./root.js";
+declare namespace index_parts_d_exports {
+  export { PosterImage as Image, PosterImageProps as ImageProps, PosterRoot as Root, PosterRootProps as RootProps };
+}
+//#endregion
+export { PosterImage as Image, type PosterImageProps as ImageProps, PosterRoot as Root, type PosterRootProps as RootProps, index_parts_d_exports };
+//# sourceMappingURL=index.parts.d.ts.map

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

@@ -0,0 +1,12 @@
+import { __exportAll } from "../../_virtual/_rolldown/runtime.js";
+import { PosterImage } from "./image.js";
+import { PosterRoot } from "./root.js";
+//#region src/ui/poster/index.parts.ts
+var index_parts_exports = /* @__PURE__ */ __exportAll({
+	Image: () => PosterImage,
+	Root: () => PosterRoot
+});
+//#endregion
+export { PosterImage as Image, PosterRoot as Root, index_parts_exports };
+
+//# sourceMappingURL=index.parts.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.parts.js","names":[],"sources":["../../../../src/ui/poster/index.parts.ts"],"sourcesContent":["export { PosterImage as Image, type PosterImageProps as ImageProps } from './image';\nexport { PosterRoot as Root, type PosterRootProps as RootProps } from './root';\n"],"mappings":""}

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

@@ -0,0 +1,18 @@
+import { UIComponentProps } from "../../utils/types.js";
+import { PosterCore } from "@videojs/core";
+//#region src/ui/poster/root.d.ts
+interface PosterRootProps extends UIComponentProps<'div', PosterCore.State> {}
+/**
+ * Manages poster visibility and image loading state.
+ *
+ * Renders a `div` and exposes `data-visible`, `data-loading`, `data-loaded`, and `data-error` for styling every layer
+ * in the poster presentation. Render `Poster.Image` inside it for the image that supplies the loading lifecycle.
+ */
+declare const PosterRoot: import("react").ForwardRefExoticComponent<Omit<PosterRootProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+declare namespace PosterRoot {
+  type Props = PosterRootProps;
+  type State = PosterCore.State;
+}
+//#endregion
+export { PosterRoot, PosterRootProps };
+//# sourceMappingURL=root.d.ts.map

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

@@ -0,0 +1,54 @@
+import { usePlayer } from "../../player/context.js";
+import { renderElement } from "../../utils/use-render.js";
+import { PosterProvider } from "./context.js";
+import { PosterCore, PosterDataAttrs } from "@videojs/core";
+import { logMissingFeature, selectMetadata, selectPlayback } from "@videojs/core/dom";
+import { forwardRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/ui/poster/root.tsx
+/**
+* Manages poster visibility and image loading state.
+*
+* Renders a `div` and exposes `data-visible`, `data-loading`, `data-loaded`, and `data-error` for styling every layer
+* in the poster presentation. Render `Poster.Image` inside it for the image that supplies the loading lifecycle.
+*/
+const PosterRoot = forwardRef(function PosterRoot(componentProps, forwardedRef) {
+	const { render, className, style, ...elementProps } = componentProps;
+	const playback = usePlayer(selectPlayback);
+	const metadata = usePlayer(selectMetadata);
+	const [core] = useState(_temp);
+	const [reportedLoadState, setImageLoadState] = useState(null);
+	if (!playback) {
+		logMissingFeature("Poster.Root", "playback");
+		return null;
+	}
+	core.setMedia({
+		started: playback.started,
+		poster: metadata?.poster ?? ""
+	});
+	core.setImageLoadState(reportedLoadState ?? (metadata?.poster ? "loading" : "none"));
+	const state = core.getState();
+	return /* @__PURE__ */ jsx(PosterProvider, {
+		value: {
+			state,
+			setImageLoadState
+		},
+		children: renderElement("div", {
+			render,
+			className,
+			style
+		}, {
+			state,
+			stateAttrMap: PosterDataAttrs,
+			ref: forwardedRef,
+			props: elementProps
+		})
+	});
+});
+function _temp() {
+	return new PosterCore();
+}
+//#endregion
+export { PosterRoot };
+
+//# sourceMappingURL=root.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"root.js","names":["() => new PosterCore()"],"sources":["../../../../src/ui/poster/root.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, useState } from 'react';\n\nimport { usePlayer } from '../../player/context';\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { PosterProvider } from './context';\n\nexport interface PosterRootProps extends UIComponentProps<'div', PosterCore.State> {}\n\n/**\n * Manages poster visibility and image loading state.\n *\n * Renders a `div` and exposes `data-visible`, `data-loading`, `data-loaded`, and `data-error` for styling every layer\n * in the poster presentation. Render `Poster.Image` inside it for the image that supplies the loading lifecycle.\n */\nexport const PosterRoot = forwardRef(function PosterRoot(\n  componentProps: PosterRootProps,\n  forwardedRef: ForwardedRef<HTMLDivElement>\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  const [reportedLoadState, setImageLoadState] = useState<PosterImageLoadState | null>(null);\n\n  if (!playback) {\n    if (__DEV__) logMissingFeature('Poster.Root', 'playback');\n\n    return null;\n  }\n\n  // The metadata feature is optional: without it nothing resolves a URL, and\n  // this stays a visibility wrapper around whatever source the image supplies.\n  core.setMedia({\n    started: playback.started,\n    poster: metadata?.poster ?? '',\n  });\n\n  // Until the image reports, a resolved poster is on its way. Server markup then\n  // already carries `data-loading`, and hydration lands on the state the image\n  // reports first rather than flashing the layers keyed off that attribute.\n  core.setImageLoadState(reportedLoadState ?? (metadata?.poster ? 'loading' : 'none'));\n\n  const state = core.getState();\n\n  return (\n    <PosterProvider value={{ state, setImageLoadState }}>\n      {renderElement(\n        'div',\n        { render, className, style },\n        {\n          state,\n          stateAttrMap: PosterDataAttrs,\n          ref: forwardedRef,\n          props: elementProps,\n        }\n      )}\n    </PosterProvider>\n  );\n});\n\nexport namespace PosterRoot {\n  export type Props = PosterRootProps;\n  export type State = PosterCore.State;\n}\n"],"mappings":";;;;;;;;;;;;;;AAkBA,MAAa,aAAa,WAAW,SAAS,WAC5C,gBACA,cACA;CACA,MAAM,EAAE,QAAQ,WAAW,OAAO,GAAG,iBAAiB;CAEtD,MAAM,WAAW,UAAU,cAAc;CACzC,MAAM,WAAW,UAAU,cAAc;CAEzC,MAAM,CAAC,QAAQ,SAASA,KAAsB;CAC9C,MAAM,CAAC,mBAAmB,qBAAqB,SAAsC,IAAI;CAEzF,IAAI,CAAC,UAAU;EACA,kBAAkB,eAAe,UAAU;EAExD,OAAO;CACT;CAIA,KAAK,SAAS;EACZ,SAAS,SAAS;EAClB,QAAQ,UAAU,UAAU;CAC9B,CAAC;CAKD,KAAK,kBAAkB,sBAAsB,UAAU,SAAS,YAAY,OAAO;CAEnF,MAAM,QAAQ,KAAK,SAAS;CAE5B,OACE,oBAAC,gBAAD;EAAgB,OAAO;GAAE;GAAO;EAAkB;EAC/C,UAAA,cACC,OACA;GAAE;GAAQ;GAAW;EAAM,GAC3B;GACE;GACA,cAAc;GACd,KAAK;GACL,OAAO;EACT,CACF;CACc,CAAA;AAEpB,CAAC;AArCyB,SAAA,QAAA;CAAM,OAAA,IAAI,WAAW"}

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

@@ -0,0 +1,48 @@
+import { UIComponentProps } from "../../utils/types.js";
+import { MenuRadioItemProps } from "../menu/radio-item.js";
+import { QualityOption, QualityOptionsProps, QualityOptionsResult } from "../quality/use-quality-options.js";
+import "../quality/index.js";
+import { QualityRadioGroupCore } from "@videojs/core";
+import { ReactElement, ReactNode } from "react";
+//#region src/ui/quality-radio-group/component.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 QualityRadioGroupRootProps extends QualityOptionsProps {
+  children?: ReactNode;
+}
+interface QualityRadioGroupOptionsProps extends Omit<UIComponentProps<'div', QualityRadioGroupCore.State>, 'children'> {
+  /** Render one consumer-owned menu radio item for every quality option. */
+  renderItem: (props: QualityRadioGroupItemProps, state: QualityRadioGroupItemState) => ReactElement;
+}
+type QualityRadioGroupValueProps = UIComponentProps<'span', QualityOptionsResult>;
+interface QualityRadioGroupLegacyProps extends QualityRadioGroupOptionsProps, QualityOptionsProps {}
+/** Owns quality option state and shares it with an enclosing menu. Does not render a DOM element. */
+declare function QualityRadioGroupRoot({ children, ...props }: QualityRadioGroupRootProps): ReactNode;
+/** Displays the selected quality label. */
+declare const QualityRadioGroupValue: import("react").ForwardRefExoticComponent<Omit<QualityRadioGroupValueProps, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+/** Renders menu radio items for the player's video renditions. */
+declare const QualityRadioGroupOptions: import("react").ForwardRefExoticComponent<Omit<QualityRadioGroupOptionsProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+/** @internal Compatibility adapter for the existing preset sources. */
+declare const QualityRadioGroupLegacy: import("react").ForwardRefExoticComponent<Omit<QualityRadioGroupLegacyProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+declare namespace QualityRadioGroupRoot {
+  type Props = QualityRadioGroupRootProps;
+}
+declare namespace QualityRadioGroupValue {
+  type Props = QualityRadioGroupValueProps;
+  type State = QualityOptionsResult;
+}
+declare namespace QualityRadioGroupOptions {
+  type Props = QualityRadioGroupOptionsProps;
+  type State = QualityRadioGroupCore.State;
+  type ItemProps = QualityRadioGroupItemProps;
+  type ItemState = QualityRadioGroupItemState;
+}
+//#endregion
+export { QualityRadioGroupItemProps, QualityRadioGroupItemState, QualityRadioGroupLegacy, QualityRadioGroupLegacyProps, QualityRadioGroupOptions, QualityRadioGroupOptionsProps, QualityRadioGroupRoot, QualityRadioGroupRootProps, QualityRadioGroupValue, QualityRadioGroupValueProps };
+//# sourceMappingURL=component.d.ts.map