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

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

@@ -1 +1 @@
-{"version":3,"file":"context.js","names":[],"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,eAAe,EAAE,OAAO,YAA+C;CACrF,OAAO,oBAAC,cAAc,UAAf;EAA+B;EAAQ;CAAiC,CAAA;AACjF;AAEA,SAAgB,mBAAuC;CACrD,MAAM,MAAM,WAAW,aAAa;CACpC,IAAI,CAAC,KAAK,MAAM,IAAI,MAAM,8DAA8D;CAExF,OAAO;AACT"}
+{"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.js

@@ -2,7 +2,8 @@ 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 { forwardRef, useCallback, useLayoutEffect, useRef, useState } from "react";
+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`.
@@ -11,6 +12,7 @@ import { forwardRef, useCallback, useLayoutEffect, useRef, useState } from "reac
 * 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;
@@ -22,10 +24,17 @@ const PosterImage = forwardRef(function PosterImage(componentProps, forwardedRef
 		state: initialLoadState
 	}));
 	const didCheckInitialImageRef = useRef(false);
-	const requested = useLatestRef({
-		src,
-		srcSet: authoredSrcSet
-	});
+	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,
@@ -33,31 +42,52 @@ const PosterImage = forwardRef(function PosterImage(componentProps, forwardedRef
 		state: initialLoadState
 	});
 	const loadState = matchesRequest ? request.state : initialLoadState;
-	useLayoutEffect(() => {
-		setImageLoadState(loadState);
-		return () => setImageLoadState("none");
-	}, [
-		authoredSrcSet,
-		loadState,
-		setImageLoadState,
-		src
-	]);
-	const checkInitialImage = useCallback((img) => {
-		if (!img || didCheckInitialImageRef.current) return;
-		didCheckInitialImageRef.current = true;
-		const { src, srcSet } = requested.current;
-		if (img.naturalWidth > 0) setRequest({
-			src,
-			srcSet,
-			state: "loaded"
-		});
-		else if (img.complete && (img.getAttribute("src") || img.hasAttribute("srcset"))) setRequest({
-			src,
-			srcSet,
-			state: "error"
-		});
-	}, [requested]);
-	const ref = useComposedRefs(forwardedRef, checkInitialImage);
+	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,

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

@@ -1 +1 @@
-{"version":3,"file":"image.js","names":[],"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;CAC5C,MAAM,YAAY,aAAa;EAAE;EAAK,QAAQ;CAAe,CAAC;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;CAMnD,sBAAsB;EACpB,kBAAkB,SAAS;EAE3B,aAAa,kBAAkB,MAAM;CACvC,GAAG;EAAC;EAAgB;EAAW;EAAmB;CAAG,CAAC;CActD,MAAM,oBAAoB,aACvB,QAAiC;EAChC,IAAI,CAAC,OAAO,wBAAwB,SAAS;EAE7C,wBAAwB,UAAU;EAElC,MAAM,EAAE,KAAK,WAAW,UAAU;EAElC,IAAI,IAAI,eAAe,GAAG,WAAW;GAAE;GAAK;GAAQ,OAAO;EAAS,CAAC;OAChE,IAAI,IAAI,aAAa,IAAI,aAAa,KAAK,KAAK,IAAI,aAAa,QAAQ,IAC5E,WAAW;GAAE;GAAK;GAAQ,OAAO;EAAQ,CAAC;CAE9C,GACA,CAAC,SAAS,CACZ;CACA,MAAM,MAAM,gBAAgB,cAAc,iBAAiB;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"}
+{"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/root.js

@@ -16,7 +16,7 @@ const PosterRoot = forwardRef(function PosterRoot(componentProps, forwardedRef)
 	const { render, className, style, ...elementProps } = componentProps;
 	const playback = usePlayer(selectPlayback);
 	const metadata = usePlayer(selectMetadata);
-	const [core] = useState(() => new PosterCore());
+	const [core] = useState(_temp);
 	const [reportedLoadState, setImageLoadState] = useState(null);
 	if (!playback) {
 		logMissingFeature("Poster.Root", "playback");
@@ -45,6 +45,9 @@ const PosterRoot = forwardRef(function PosterRoot(componentProps, forwardedRef)
 		})
 	});
 });
+function _temp() {
+	return new PosterCore();
+}
 //#endregion
 export { PosterRoot };
 

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

@@ -1 +1 @@
-{"version":3,"file":"root.js","names":[],"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,eAAe,IAAI,WAAW,CAAC;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"}
+{"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.js

@@ -4,19 +4,45 @@ import { MenuRadioGroup } from "../menu/radio-group.js";
 import { useQualityOptions } from "../quality/use-quality-options.js";
 import { QualityRadioGroupDataAttrs } from "@videojs/core";
 import { getStateDataAttrs } from "@videojs/core/dom";
+import { c } from "react-compiler-runtime";
 import { Fragment, createContext, forwardRef, useContext } from "react";
 import { jsx } from "react/jsx-runtime";
 import { isFunction } from "@videojs/utils/predicate";
 //#region src/ui/quality-radio-group/component.tsx
 const QualityRadioGroupContext = createContext(void 0);
 /** Owns quality option state and shares it with an enclosing menu. Does not render a DOM element. */
-function QualityRadioGroupRoot({ children, ...props }) {
+function QualityRadioGroupRoot(t0) {
+	const $ = c(8);
+	let children;
+	let props;
+	if ($[0] !== t0) {
+		({children, ...props} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = props;
+	} else {
+		children = $[1];
+		props = $[2];
+	}
 	const quality = useQualityOptions(props);
-	useMenuOptionState(toMenuOptionState(quality));
-	return /* @__PURE__ */ jsx(QualityRadioGroupContext.Provider, {
-		value: quality,
-		children
-	});
+	let t1;
+	if ($[3] !== quality) {
+		t1 = toMenuOptionState(quality);
+		$[3] = quality;
+		$[4] = t1;
+	} else t1 = $[4];
+	useMenuOptionState(t1);
+	let t2;
+	if ($[5] !== children || $[6] !== quality) {
+		t2 = /* @__PURE__ */ jsx(QualityRadioGroupContext.Provider, {
+			value: quality,
+			children
+		});
+		$[5] = children;
+		$[6] = quality;
+		$[7] = t2;
+	} else t2 = $[7];
+	return t2;
 }
 /** Displays the selected quality label. */
 const QualityRadioGroupValue = forwardRef(function QualityRadioGroupValue({ render, className, style, ...elementProps }, forwardedRef) {
@@ -34,49 +60,171 @@ const QualityRadioGroupValue = forwardRef(function QualityRadioGroupValue({ rend
 });
 /** Renders menu radio items for the player's video renditions. */
 const QualityRadioGroupOptions = forwardRef(function QualityRadioGroupOptions(componentProps, forwardedRef) {
-	const { renderItem, render, className, style, "aria-label": ariaLabelProp, "aria-labelledby": ariaLabelledBy, ...elementProps } = componentProps;
+	const $ = c(40);
+	let ariaLabelProp;
+	let ariaLabelledBy;
+	let className;
+	let elementProps;
+	let render;
+	let renderItem;
+	let style;
+	if ($[0] !== componentProps) {
+		({renderItem, render, className, style, "aria-label": ariaLabelProp, "aria-labelledby": ariaLabelledBy, ...elementProps} = componentProps);
+		$[0] = componentProps;
+		$[1] = ariaLabelProp;
+		$[2] = ariaLabelledBy;
+		$[3] = className;
+		$[4] = elementProps;
+		$[5] = render;
+		$[6] = renderItem;
+		$[7] = style;
+	} else {
+		ariaLabelProp = $[1];
+		ariaLabelledBy = $[2];
+		className = $[3];
+		elementProps = $[4];
+		render = $[5];
+		renderItem = $[6];
+		style = $[7];
+	}
 	const quality = useQualityRadioGroupContext();
 	if (!quality) return null;
 	const { state, value, options, setValue } = quality;
 	const ariaLabel = ariaLabelProp ?? (ariaLabelledBy === void 0 ? quality.label : void 0);
-	return /* @__PURE__ */ jsx(MenuRadioGroup, {
-		...getStateDataAttrs(state, QualityRadioGroupDataAttrs),
-		...elementProps,
-		ref: forwardedRef,
-		className: isFunction(className) ? className(state) : className,
-		style: isFunction(style) ? style(state) : style,
-		render: isFunction(render) ? (props) => render(props, state) : render,
-		value,
-		onValueChange: setValue,
-		"aria-label": ariaLabel,
-		"aria-labelledby": ariaLabelledBy,
-		"aria-disabled": state.disabled || void 0,
-		hidden: state.hidden,
-		children: options.map((option) => {
-			const itemState = {
-				...option,
-				checked: option.value === value
+	let t0;
+	if ($[8] !== state) {
+		t0 = getStateDataAttrs(state, QualityRadioGroupDataAttrs);
+		$[8] = state;
+		$[9] = t0;
+	} else t0 = $[9];
+	let t1;
+	if ($[10] !== className || $[11] !== state) {
+		t1 = isFunction(className) ? className(state) : className;
+		$[10] = className;
+		$[11] = state;
+		$[12] = t1;
+	} else t1 = $[12];
+	let t2;
+	if ($[13] !== state || $[14] !== style) {
+		t2 = isFunction(style) ? style(state) : style;
+		$[13] = state;
+		$[14] = style;
+		$[15] = t2;
+	} else t2 = $[15];
+	let t3;
+	if ($[16] !== render || $[17] !== state) {
+		t3 = isFunction(render) ? (props) => render(props, state) : render;
+		$[16] = render;
+		$[17] = state;
+		$[18] = t3;
+	} else t3 = $[18];
+	const t4 = state.disabled || void 0;
+	const t5 = state.hidden;
+	let t6;
+	if ($[19] !== options || $[20] !== renderItem || $[21] !== value) {
+		let t7;
+		if ($[23] !== renderItem || $[24] !== value) {
+			t7 = (option) => {
+				const itemState = {
+					...option,
+					checked: option.value === value
+				};
+				return /* @__PURE__ */ jsx(Fragment, { children: renderItem({
+					value: option.value,
+					disabled: option.disabled,
+					"data-rendition": option.value,
+					children: option.label
+				}, itemState) }, option.value);
 			};
-			return /* @__PURE__ */ jsx(Fragment, { children: renderItem({
-				value: option.value,
-				disabled: option.disabled,
-				"data-rendition": option.value,
-				children: option.label
-			}, itemState) }, option.value);
-		})
-	});
+			$[23] = renderItem;
+			$[24] = value;
+			$[25] = t7;
+		} else t7 = $[25];
+		t6 = options.map(t7);
+		$[19] = options;
+		$[20] = renderItem;
+		$[21] = value;
+		$[22] = t6;
+	} else t6 = $[22];
+	let t7;
+	if ($[26] !== ariaLabel || $[27] !== ariaLabelledBy || $[28] !== elementProps || $[29] !== forwardedRef || $[30] !== setValue || $[31] !== state.hidden || $[32] !== t0 || $[33] !== t1 || $[34] !== t2 || $[35] !== t3 || $[36] !== t4 || $[37] !== t6 || $[38] !== value) {
+		t7 = /* @__PURE__ */ jsx(MenuRadioGroup, {
+			...t0,
+			...elementProps,
+			ref: forwardedRef,
+			className: t1,
+			style: t2,
+			render: t3,
+			value,
+			onValueChange: setValue,
+			"aria-label": ariaLabel,
+			"aria-labelledby": ariaLabelledBy,
+			"aria-disabled": t4,
+			hidden: t5,
+			children: t6
+		});
+		$[26] = ariaLabel;
+		$[27] = ariaLabelledBy;
+		$[28] = elementProps;
+		$[29] = forwardedRef;
+		$[30] = setValue;
+		$[31] = state.hidden;
+		$[32] = t0;
+		$[33] = t1;
+		$[34] = t2;
+		$[35] = t3;
+		$[36] = t4;
+		$[37] = t6;
+		$[38] = value;
+		$[39] = t7;
+	} else t7 = $[39];
+	return t7;
 });
 /** @internal Compatibility adapter for the existing preset sources. */
-const QualityRadioGroupLegacy = forwardRef(function QualityRadioGroupLegacy({ label, formatRendition, disabled, ...props }, forwardedRef) {
-	return /* @__PURE__ */ jsx(QualityRadioGroupRoot, {
-		label,
-		formatRendition,
-		disabled,
-		children: /* @__PURE__ */ jsx(QualityRadioGroupOptions, {
+const QualityRadioGroupLegacy = forwardRef(function QualityRadioGroupLegacy(t0, forwardedRef) {
+	const $ = c(13);
+	let disabled;
+	let formatRendition;
+	let label;
+	let props;
+	if ($[0] !== t0) {
+		({label, formatRendition, disabled, ...props} = t0);
+		$[0] = t0;
+		$[1] = disabled;
+		$[2] = formatRendition;
+		$[3] = label;
+		$[4] = props;
+	} else {
+		disabled = $[1];
+		formatRendition = $[2];
+		label = $[3];
+		props = $[4];
+	}
+	let t1;
+	if ($[5] !== forwardedRef || $[6] !== props) {
+		t1 = /* @__PURE__ */ jsx(QualityRadioGroupOptions, {
 			...props,
 			ref: forwardedRef
-		})
-	});
+		});
+		$[5] = forwardedRef;
+		$[6] = props;
+		$[7] = t1;
+	} else t1 = $[7];
+	let t2;
+	if ($[8] !== disabled || $[9] !== formatRendition || $[10] !== label || $[11] !== t1) {
+		t2 = /* @__PURE__ */ jsx(QualityRadioGroupRoot, {
+			label,
+			formatRendition,
+			disabled,
+			children: t1
+		});
+		$[8] = disabled;
+		$[9] = formatRendition;
+		$[10] = label;
+		$[11] = t1;
+		$[12] = t2;
+	} else t2 = $[12];
+	return t2;
 });
 function useQualityRadioGroupContext() {
 	const quality = useContext(QualityRadioGroupContext);

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

@@ -1 +1 @@
-{"version":3,"file":"component.js","names":[],"sources":["../../../../src/ui/quality-radio-group/component.tsx"],"sourcesContent":["import { type MenuOptionState, type QualityRadioGroupCore, QualityRadioGroupDataAttrs } from '@videojs/core';\nimport { getStateDataAttrs } from '@videojs/core/dom';\nimport { isFunction } from '@videojs/utils/predicate';\nimport type { ReactElement, ReactNode } from 'react';\nimport { createContext, Fragment, forwardRef, useContext } from 'react';\n\nimport type { HTMLProps, UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { useMenuOptionState } from '../menu/context';\nimport { MenuRadioGroup } from '../menu/radio-group';\nimport type { MenuRadioItemProps } from '../menu/radio-item';\nimport { type QualityOption, type QualityOptionsProps, type QualityOptionsResult, useQualityOptions } from '../quality';\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 QualityRadioGroupRootProps extends QualityOptionsProps {\n  children?: ReactNode;\n}\n\nexport interface QualityRadioGroupOptionsProps extends Omit<\n  UIComponentProps<'div', QualityRadioGroupCore.State>,\n  'children'\n> {\n  /** Render one consumer-owned menu radio item for every quality option. */\n  renderItem: (props: QualityRadioGroupItemProps, state: QualityRadioGroupItemState) => ReactElement;\n}\n\nexport type QualityRadioGroupValueProps = UIComponentProps<'span', QualityOptionsResult>;\n\nexport interface QualityRadioGroupLegacyProps extends QualityRadioGroupOptionsProps, QualityOptionsProps {}\n\nconst QualityRadioGroupContext = createContext<QualityOptionsResult | null | undefined>(undefined);\n\n/** Owns quality option state and shares it with an enclosing menu. Does not render a DOM element. */\nexport function QualityRadioGroupRoot({ children, ...props }: QualityRadioGroupRootProps): ReactNode {\n  const quality = useQualityOptions(props);\n\n  useMenuOptionState(toMenuOptionState(quality));\n\n  return <QualityRadioGroupContext.Provider value={quality}>{children}</QualityRadioGroupContext.Provider>;\n}\n\n/** Displays the selected quality label. */\nexport const QualityRadioGroupValue = forwardRef<HTMLSpanElement, QualityRadioGroupValueProps>(\n  function QualityRadioGroupValue({ render, className, style, ...elementProps }, forwardedRef) {\n    const quality = useQualityRadioGroupContext();\n    if (!quality) return null;\n\n    return renderElement(\n      'span',\n      { render, className, style },\n      { state: quality, ref: forwardedRef, props: [elementProps, { children: quality.selectedLabel }] }\n    );\n  }\n);\n\n/** Renders menu radio items for the player's video renditions. */\nexport const QualityRadioGroupOptions = forwardRef<HTMLDivElement, QualityRadioGroupOptionsProps>(\n  function QualityRadioGroupOptions(componentProps, forwardedRef) {\n    const {\n      renderItem,\n      render,\n      className,\n      style,\n      'aria-label': ariaLabelProp,\n      'aria-labelledby': ariaLabelledBy,\n      ...elementProps\n    } = componentProps;\n    const quality = useQualityRadioGroupContext();\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\n/** @internal Compatibility adapter for the existing preset sources. */\nexport const QualityRadioGroupLegacy = forwardRef<HTMLDivElement, QualityRadioGroupLegacyProps>(\n  function QualityRadioGroupLegacy({ label, formatRendition, disabled, ...props }, forwardedRef) {\n    return (\n      <QualityRadioGroupRoot label={label} formatRendition={formatRendition} disabled={disabled}>\n        <QualityRadioGroupOptions {...props} ref={forwardedRef} />\n      </QualityRadioGroupRoot>\n    );\n  }\n);\n\nfunction useQualityRadioGroupContext(): QualityOptionsResult | null {\n  const quality = useContext(QualityRadioGroupContext);\n  if (quality === undefined) throw new Error('QualityRadioGroup parts must be used within QualityRadioGroup.Root');\n\n  return quality;\n}\n\nfunction toMenuOptionState(quality: QualityOptionsResult | null): MenuOptionState {\n  return {\n    value: quality?.selectedLabel ?? '',\n    disabled: quality?.disabled ?? true,\n    hidden: quality?.hidden ?? true,\n    availability: quality?.state.availability ?? 'unsupported',\n  };\n}\n\nexport namespace QualityRadioGroupRoot {\n  export type Props = QualityRadioGroupRootProps;\n}\n\nexport namespace QualityRadioGroupValue {\n  export type Props = QualityRadioGroupValueProps;\n  export type State = QualityOptionsResult;\n}\n\nexport namespace QualityRadioGroupOptions {\n  export type Props = QualityRadioGroupOptionsProps;\n  export type State = QualityRadioGroupCore.State;\n  export type ItemProps = QualityRadioGroupItemProps;\n  export type ItemState = QualityRadioGroupItemState;\n}\n"],"mappings":";;;;;;;;;;AAuCA,MAAM,2BAA2B,cAAuD,KAAA,CAAS;;AAGjG,SAAgB,sBAAsB,EAAE,UAAU,GAAG,SAAgD;CACnG,MAAM,UAAU,kBAAkB,KAAK;CAEvC,mBAAmB,kBAAkB,OAAO,CAAC;CAE7C,OAAO,oBAAC,yBAAyB,UAA1B;EAAmC,OAAO;EAAU;CAA4C,CAAA;AACzG;;AAGA,MAAa,yBAAyB,WACpC,SAAS,uBAAuB,EAAE,QAAQ,WAAW,OAAO,GAAG,gBAAgB,cAAc;CAC3F,MAAM,UAAU,4BAA4B;CAC5C,IAAI,CAAC,SAAS,OAAO;CAErB,OAAO,cACL,QACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EAAE,OAAO;EAAS,KAAK;EAAc,OAAO,CAAC,cAAc,EAAE,UAAU,QAAQ,cAAc,CAAC;CAAE,CAClG;AACF,CACF;;AAGA,MAAa,2BAA2B,WACtC,SAAS,yBAAyB,gBAAgB,cAAc;CAC9D,MAAM,EACJ,YACA,QACA,WACA,OACA,cAAc,eACd,mBAAmB,gBACnB,GAAG,iBACD;CACJ,MAAM,UAAU,4BAA4B;CAC5C,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;;AAGA,MAAa,0BAA0B,WACrC,SAAS,wBAAwB,EAAE,OAAO,iBAAiB,UAAU,GAAG,SAAS,cAAc;CAC7F,OACE,oBAAC,uBAAD;EAA8B;EAAwB;EAA2B;EAC/E,UAAA,oBAAC,0BAAD;GAA0B,GAAI;GAAO,KAAK;EAAe,CAAA;CACpC,CAAA;AAE3B,CACF;AAEA,SAAS,8BAA2D;CAClE,MAAM,UAAU,WAAW,wBAAwB;CACnD,IAAI,YAAY,KAAA,GAAW,MAAM,IAAI,MAAM,oEAAoE;CAE/G,OAAO;AACT;AAEA,SAAS,kBAAkB,SAAuD;CAChF,OAAO;EACL,OAAO,SAAS,iBAAiB;EACjC,UAAU,SAAS,YAAY;EAC/B,QAAQ,SAAS,UAAU;EAC3B,cAAc,SAAS,MAAM,gBAAgB;CAC/C;AACF"}
+{"version":3,"file":"component.js","names":["{ children, ...props }: QualityRadioGroupRootProps","toMenuOptionState(quality)","<QualityRadioGroupContext.Provider value={quality}>{children}</QualityRadioGroupContext.Provider>","QualityRadioGroupContext.Provider","getStateDataAttrs(state, QualityRadioGroupDataAttrs)","isFunction(className) ? className(state) : className","isFunction(style) ? style(state) : style","isFunction(render) ? (props: HTMLProps) => render(props, state) : render","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        })","(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        }","<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>","hidden","state.disabled || undefined","state.hidden","{ label, formatRendition, disabled, ...props }","<QualityRadioGroupOptions {...props} ref={forwardedRef} />","<QualityRadioGroupRoot label={label} formatRendition={formatRendition} disabled={disabled}>\n        <QualityRadioGroupOptions {...props} ref={forwardedRef} />\n      </QualityRadioGroupRoot>"],"sources":["../../../../src/ui/quality-radio-group/component.tsx"],"sourcesContent":["import { type MenuOptionState, type QualityRadioGroupCore, QualityRadioGroupDataAttrs } from '@videojs/core';\nimport { getStateDataAttrs } from '@videojs/core/dom';\nimport { isFunction } from '@videojs/utils/predicate';\nimport type { ReactElement, ReactNode } from 'react';\nimport { createContext, Fragment, forwardRef, useContext } from 'react';\n\nimport type { HTMLProps, UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { useMenuOptionState } from '../menu/context';\nimport { MenuRadioGroup } from '../menu/radio-group';\nimport type { MenuRadioItemProps } from '../menu/radio-item';\nimport { type QualityOption, type QualityOptionsProps, type QualityOptionsResult, useQualityOptions } from '../quality';\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 QualityRadioGroupRootProps extends QualityOptionsProps {\n  children?: ReactNode;\n}\n\nexport interface QualityRadioGroupOptionsProps extends Omit<\n  UIComponentProps<'div', QualityRadioGroupCore.State>,\n  'children'\n> {\n  /** Render one consumer-owned menu radio item for every quality option. */\n  renderItem: (props: QualityRadioGroupItemProps, state: QualityRadioGroupItemState) => ReactElement;\n}\n\nexport type QualityRadioGroupValueProps = UIComponentProps<'span', QualityOptionsResult>;\n\nexport interface QualityRadioGroupLegacyProps extends QualityRadioGroupOptionsProps, QualityOptionsProps {}\n\nconst QualityRadioGroupContext = createContext<QualityOptionsResult | null | undefined>(undefined);\n\n/** Owns quality option state and shares it with an enclosing menu. Does not render a DOM element. */\nexport function QualityRadioGroupRoot({ children, ...props }: QualityRadioGroupRootProps): ReactNode {\n  const quality = useQualityOptions(props);\n\n  useMenuOptionState(toMenuOptionState(quality));\n\n  return <QualityRadioGroupContext.Provider value={quality}>{children}</QualityRadioGroupContext.Provider>;\n}\n\n/** Displays the selected quality label. */\nexport const QualityRadioGroupValue = forwardRef<HTMLSpanElement, QualityRadioGroupValueProps>(\n  function QualityRadioGroupValue({ render, className, style, ...elementProps }, forwardedRef) {\n    const quality = useQualityRadioGroupContext();\n    if (!quality) return null;\n\n    return renderElement(\n      'span',\n      { render, className, style },\n      { state: quality, ref: forwardedRef, props: [elementProps, { children: quality.selectedLabel }] }\n    );\n  }\n);\n\n/** Renders menu radio items for the player's video renditions. */\nexport const QualityRadioGroupOptions = forwardRef<HTMLDivElement, QualityRadioGroupOptionsProps>(\n  function QualityRadioGroupOptions(componentProps, forwardedRef) {\n    const {\n      renderItem,\n      render,\n      className,\n      style,\n      'aria-label': ariaLabelProp,\n      'aria-labelledby': ariaLabelledBy,\n      ...elementProps\n    } = componentProps;\n    const quality = useQualityRadioGroupContext();\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\n/** @internal Compatibility adapter for the existing preset sources. */\nexport const QualityRadioGroupLegacy = forwardRef<HTMLDivElement, QualityRadioGroupLegacyProps>(\n  function QualityRadioGroupLegacy({ label, formatRendition, disabled, ...props }, forwardedRef) {\n    return (\n      <QualityRadioGroupRoot label={label} formatRendition={formatRendition} disabled={disabled}>\n        <QualityRadioGroupOptions {...props} ref={forwardedRef} />\n      </QualityRadioGroupRoot>\n    );\n  }\n);\n\nfunction useQualityRadioGroupContext(): QualityOptionsResult | null {\n  const quality = useContext(QualityRadioGroupContext);\n  if (quality === undefined) throw new Error('QualityRadioGroup parts must be used within QualityRadioGroup.Root');\n\n  return quality;\n}\n\nfunction toMenuOptionState(quality: QualityOptionsResult | null): MenuOptionState {\n  return {\n    value: quality?.selectedLabel ?? '',\n    disabled: quality?.disabled ?? true,\n    hidden: quality?.hidden ?? true,\n    availability: quality?.state.availability ?? 'unsupported',\n  };\n}\n\nexport namespace QualityRadioGroupRoot {\n  export type Props = QualityRadioGroupRootProps;\n}\n\nexport namespace QualityRadioGroupValue {\n  export type Props = QualityRadioGroupValueProps;\n  export type State = QualityOptionsResult;\n}\n\nexport namespace QualityRadioGroupOptions {\n  export type Props = QualityRadioGroupOptionsProps;\n  export type State = QualityRadioGroupCore.State;\n  export type ItemProps = QualityRadioGroupItemProps;\n  export type ItemState = QualityRadioGroupItemState;\n}\n"],"mappings":"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"}

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

@@ -1,12 +1,22 @@
+import { c } from "react-compiler-runtime";
 import { createContext, useContext } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/ui/seek-indicator/context.tsx
 const SeekIndicatorContext = createContext(null);
-function SeekIndicatorProvider({ value, children }) {
-	return /* @__PURE__ */ jsx(SeekIndicatorContext.Provider, {
-		value,
-		children
-	});
+function SeekIndicatorProvider(t0) {
+	const $ = c(3);
+	const { value, children } = t0;
+	let t1;
+	if ($[0] !== children || $[1] !== value) {
+		t1 = /* @__PURE__ */ jsx(SeekIndicatorContext.Provider, {
+			value,
+			children
+		});
+		$[0] = children;
+		$[1] = value;
+		$[2] = t1;
+	} else t1 = $[2];
+	return t1;
 }
 function useSeekIndicatorContext() {
 	const ctx = useContext(SeekIndicatorContext);

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

@@ -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\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"}
+{"version":3,"file":"context.js","names":["{ value, children }: ProviderProps<SeekIndicatorContextValue>","<SeekIndicatorContext.Provider value={value}>{children}</SeekIndicatorContext.Provider>","SeekIndicatorContext.Provider"],"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,sBAAA,IAAqF;;CAA/D,MAAA,EAAE,OAAO,aAATA;CAC7BC,IAAAA;CAA8C,IAAA,EAAA,OAAA,YAAA,EAAA,OAAR,OAAA;EAAtC,KAAA,oBAACC,qBAAAA,UAAD;GAAsC;GAAQ;EAAwC,CAAA;EAAxC,EAAA,KAAA;EAAR,EAAA,KAAA;;;CAA7C,OAAOD;AACT;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/root.js

@@ -2,27 +2,54 @@ import { renderElement } from "../../utils/use-render.js";
 import { useInputIndicatorRoot } from "../input-indicator/use-input-indicator-root.js";
 import { SeekIndicatorProvider } from "./context.js";
 import { SeekIndicatorCore, SeekIndicatorDataAttrs } from "@videojs/core";
+import { c } from "react-compiler-runtime";
 import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/ui/seek-indicator/root.tsx
 const SeekIndicatorRoot = forwardRef(function SeekIndicatorRoot(componentProps, forwardedRef) {
+	const $ = c(8);
 	const { render, className, style, closeDelay, ...elementProps } = componentProps;
-	const { elementRef, present, state } = useInputIndicatorRoot(() => new SeekIndicatorCore(), { closeDelay });
+	let t0;
+	if ($[0] !== closeDelay) {
+		t0 = { closeDelay };
+		$[0] = closeDelay;
+		$[1] = t0;
+	} else t0 = $[1];
+	const { elementRef, present, state } = useInputIndicatorRoot(_temp, t0);
 	if (!present) return null;
-	return /* @__PURE__ */ jsx(SeekIndicatorProvider, {
-		value: { state },
-		children: renderElement("div", {
-			render,
-			className,
-			style
-		}, {
-			state,
-			stateAttrMap: SeekIndicatorDataAttrs,
-			ref: [forwardedRef, elementRef],
-			props: [elementProps]
-		})
+	const T0 = SeekIndicatorProvider;
+	let t1;
+	if ($[2] !== state) {
+		t1 = { state };
+		$[2] = state;
+		$[3] = t1;
+	} else t1 = $[3];
+	const t2 = renderElement("div", {
+		render,
+		className,
+		style
+	}, {
+		state,
+		stateAttrMap: SeekIndicatorDataAttrs,
+		ref: [forwardedRef, elementRef],
+		props: [elementProps]
 	});
+	let t3;
+	if ($[4] !== T0 || $[5] !== t1 || $[6] !== t2) {
+		t3 = /* @__PURE__ */ jsx(T0, {
+			value: t1,
+			children: t2
+		});
+		$[4] = T0;
+		$[5] = t1;
+		$[6] = t2;
+		$[7] = t3;
+	} else t3 = $[7];
+	return t3;
 });
+function _temp() {
+	return new SeekIndicatorCore();
+}
 //#endregion
 export { SeekIndicatorRoot };
 

package/dist/dev/ui/seek-indicator/root.js.map

@@ -1 +1 @@
-{"version":3,"file":"root.js","names":[],"sources":["../../../../src/ui/seek-indicator/root.tsx"],"sourcesContent":["import { SeekIndicatorCore, SeekIndicatorDataAttrs } from '@videojs/core';\nimport type { ForwardedRef } from 'react';\nimport { forwardRef } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { useInputIndicatorRoot } from '../input-indicator/use-input-indicator-root';\nimport { SeekIndicatorProvider } from './context';\n\nexport interface SeekIndicatorRootProps\n  extends UIComponentProps<'div', SeekIndicatorCore.State>, SeekIndicatorCore.Props {}\n\nexport const SeekIndicatorRoot = forwardRef(function SeekIndicatorRoot(\n  componentProps: SeekIndicatorRootProps,\n  forwardedRef: ForwardedRef<HTMLDivElement>\n) {\n  const { render, className, style, closeDelay, ...elementProps } = componentProps;\n  const { elementRef, present, state } = useInputIndicatorRoot(() => new SeekIndicatorCore(), { closeDelay });\n  if (!present) return null;\n\n  return (\n    <SeekIndicatorProvider value={{ state }}>\n      {renderElement(\n        'div',\n        { render, className, style },\n        {\n          state,\n          stateAttrMap: SeekIndicatorDataAttrs,\n          ref: [forwardedRef, elementRef],\n          props: [elementProps],\n        }\n      )}\n    </SeekIndicatorProvider>\n  );\n});\n\nexport namespace SeekIndicatorRoot {\n  export type Props = SeekIndicatorRootProps;\n  export type State = SeekIndicatorCore.State;\n}\n"],"mappings":";;;;;;;AAYA,MAAa,oBAAoB,WAAW,SAAS,kBACnD,gBACA,cACA;CACA,MAAM,EAAE,QAAQ,WAAW,OAAO,YAAY,GAAG,iBAAiB;CAClE,MAAM,EAAE,YAAY,SAAS,UAAU,4BAA4B,IAAI,kBAAkB,GAAG,EAAE,WAAW,CAAC;CAC1G,IAAI,CAAC,SAAS,OAAO;CAErB,OACE,oBAAC,uBAAD;EAAuB,OAAO,EAAE,MAAM;EACnC,UAAA,cACC,OACA;GAAE;GAAQ;GAAW;EAAM,GAC3B;GACE;GACA,cAAc;GACd,KAAK,CAAC,cAAc,UAAU;GAC9B,OAAO,CAAC,YAAY;EACtB,CACF;CACqB,CAAA;AAE3B,CAAC"}
+{"version":3,"file":"root.js","names":["{ closeDelay }","() => new SeekIndicatorCore()","{ state }","<SeekIndicatorProvider value={{ state }}>\n      {renderElement(\n        'div',\n        { render, className, style },\n        {\n          state,\n          stateAttrMap: SeekIndicatorDataAttrs,\n          ref: [forwardedRef, elementRef],\n          props: [elementProps],\n        }\n      )}\n    </SeekIndicatorProvider>","SeekIndicatorProvider","renderElement(\n        'div',\n        { render, className, style },\n        {\n          state,\n          stateAttrMap: SeekIndicatorDataAttrs,\n          ref: [forwardedRef, elementRef],\n          props: [elementProps],\n        }\n      )"],"sources":["../../../../src/ui/seek-indicator/root.tsx"],"sourcesContent":["import { SeekIndicatorCore, SeekIndicatorDataAttrs } from '@videojs/core';\nimport type { ForwardedRef } from 'react';\nimport { forwardRef } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { useInputIndicatorRoot } from '../input-indicator/use-input-indicator-root';\nimport { SeekIndicatorProvider } from './context';\n\nexport interface SeekIndicatorRootProps\n  extends UIComponentProps<'div', SeekIndicatorCore.State>, SeekIndicatorCore.Props {}\n\nexport const SeekIndicatorRoot = forwardRef(function SeekIndicatorRoot(\n  componentProps: SeekIndicatorRootProps,\n  forwardedRef: ForwardedRef<HTMLDivElement>\n) {\n  const { render, className, style, closeDelay, ...elementProps } = componentProps;\n  const { elementRef, present, state } = useInputIndicatorRoot(() => new SeekIndicatorCore(), { closeDelay });\n  if (!present) return null;\n\n  return (\n    <SeekIndicatorProvider value={{ state }}>\n      {renderElement(\n        'div',\n        { render, className, style },\n        {\n          state,\n          stateAttrMap: SeekIndicatorDataAttrs,\n          ref: [forwardedRef, elementRef],\n          props: [elementProps],\n        }\n      )}\n    </SeekIndicatorProvider>\n  );\n});\n\nexport namespace SeekIndicatorRoot {\n  export type Props = SeekIndicatorRootProps;\n  export type State = SeekIndicatorCore.State;\n}\n"],"mappings":";;;;;;;;AAYA,MAAa,oBAAoB,WAAW,SAAS,kBACnD,gBACA,cACA;;CACA,MAAM,EAAE,QAAQ,WAAW,OAAO,YAAY,GAAG,iBAAiB;CAC0BA,IAAAA;CAAE,IAAA,EAAA,OAAA,YAAA;EAAF,KAAA,EAAE,WAAW;EAAX,EAAA,KAAA;;;CAA9F,MAAM,EAAE,YAAY,SAAS,UAAU,sBAAsBC,OAA+BD,EAAc;CAC1G,IAAI,CAAC,SAAS,OAAO;CAGlB,MAAA,KAAA;CAA6BE,IAAAA;CAAE,IAAA,EAAA,OAAA,OAAA;EAAF,KAAA,EAAE,MAAM;EAAN,EAAA,KAAA;;;CAC7B,MAAA,KAAA,cACC,OACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EACE;EACA,cAAc;EACd,KAAK,CAAC,cAAc,UAAU;EAC9B,OAAO,CAAC,YAAY;CACtB,CACF;CAVFC,IAAAA;CAACC,IAAAA,EAAAA,OAAAA,MAAAA,EAAAA,OAA6BF,MAAAA,EAAAA,OAC3BG,IAAAA;EADH,KAAA,oBAACD,IAAD;GAAuB,OAAOF;GAC3BG,UAAAA;EAUoB,CAAA;EAXtBD,EAAAA,KAAAA;EAA6BF,EAAAA,KAAAA;EAC3BG,EAAAA,KAAAA;;;CAFL,OACEF;AAaJ,CAAC;AAjB8D,SAAA,QAAA;CAAM,OAAA,IAAI,kBAAkB"}