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

package/dist/dev/ui/captions-radio-group/component.js

@@ -4,19 +4,45 @@ import { MenuRadioGroup } from "../menu/radio-group.js";
 import { useCaptionsOptions } from "./use-captions-options.js";
 import { CaptionsRadioGroupDataAttrs } 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/captions-radio-group/component.tsx
 const CaptionsRadioGroupContext = createContext(void 0);
 /** Owns captions option state and shares it with an enclosing menu. Does not render a DOM element. */
-function CaptionsRadioGroupRoot({ children, ...props }) {
+function CaptionsRadioGroupRoot(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 captions = useCaptionsOptions(props);
-	useMenuOptionState(toMenuOptionState(captions));
-	return /* @__PURE__ */ jsx(CaptionsRadioGroupContext.Provider, {
-		value: captions,
-		children
-	});
+	let t1;
+	if ($[3] !== captions) {
+		t1 = toMenuOptionState(captions);
+		$[3] = captions;
+		$[4] = t1;
+	} else t1 = $[4];
+	useMenuOptionState(t1);
+	let t2;
+	if ($[5] !== captions || $[6] !== children) {
+		t2 = /* @__PURE__ */ jsx(CaptionsRadioGroupContext.Provider, {
+			value: captions,
+			children
+		});
+		$[5] = captions;
+		$[6] = children;
+		$[7] = t2;
+	} else t2 = $[7];
+	return t2;
 }
 /** Displays the selected captions label. */
 const CaptionsRadioGroupValue = forwardRef(function CaptionsRadioGroupValue({ render, className, style, ...elementProps }, forwardedRef) {
@@ -34,49 +60,171 @@ const CaptionsRadioGroupValue = forwardRef(function CaptionsRadioGroupValue({ re
 });
 /** Renders menu radio items for the player's captions and subtitles tracks. */
 const CaptionsRadioGroupOptions = forwardRef(function CaptionsRadioGroupOptions(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 captions = useCaptionsRadioGroupContext();
 	if (!captions) return null;
 	const { state, value, options, setValue } = captions;
 	const ariaLabel = ariaLabelProp ?? (ariaLabelledBy === void 0 ? captions.label : void 0);
-	return /* @__PURE__ */ jsx(MenuRadioGroup, {
-		...getStateDataAttrs(state, CaptionsRadioGroupDataAttrs),
-		...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, CaptionsRadioGroupDataAttrs);
+		$[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-track": option.value,
+					children: option.label
+				}, itemState) }, option.value);
 			};
-			return /* @__PURE__ */ jsx(Fragment, { children: renderItem({
-				value: option.value,
-				disabled: option.disabled,
-				"data-track": 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 CaptionsRadioGroupLegacy = forwardRef(function CaptionsRadioGroupLegacy({ label, formatTrack, disabled, ...props }, forwardedRef) {
-	return /* @__PURE__ */ jsx(CaptionsRadioGroupRoot, {
-		label,
-		formatTrack,
-		disabled,
-		children: /* @__PURE__ */ jsx(CaptionsRadioGroupOptions, {
+const CaptionsRadioGroupLegacy = forwardRef(function CaptionsRadioGroupLegacy(t0, forwardedRef) {
+	const $ = c(13);
+	let disabled;
+	let formatTrack;
+	let label;
+	let props;
+	if ($[0] !== t0) {
+		({label, formatTrack, disabled, ...props} = t0);
+		$[0] = t0;
+		$[1] = disabled;
+		$[2] = formatTrack;
+		$[3] = label;
+		$[4] = props;
+	} else {
+		disabled = $[1];
+		formatTrack = $[2];
+		label = $[3];
+		props = $[4];
+	}
+	let t1;
+	if ($[5] !== forwardedRef || $[6] !== props) {
+		t1 = /* @__PURE__ */ jsx(CaptionsRadioGroupOptions, {
 			...props,
 			ref: forwardedRef
-		})
-	});
+		});
+		$[5] = forwardedRef;
+		$[6] = props;
+		$[7] = t1;
+	} else t1 = $[7];
+	let t2;
+	if ($[8] !== disabled || $[9] !== formatTrack || $[10] !== label || $[11] !== t1) {
+		t2 = /* @__PURE__ */ jsx(CaptionsRadioGroupRoot, {
+			label,
+			formatTrack,
+			disabled,
+			children: t1
+		});
+		$[8] = disabled;
+		$[9] = formatTrack;
+		$[10] = label;
+		$[11] = t1;
+		$[12] = t2;
+	} else t2 = $[12];
+	return t2;
 });
 function useCaptionsRadioGroupContext() {
 	const captions = useContext(CaptionsRadioGroupContext);

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

@@ -1 +1 @@
-{"version":3,"file":"component.js","names":[],"sources":["../../../../src/ui/captions-radio-group/component.tsx"],"sourcesContent":["import { type CaptionsRadioGroupCore, CaptionsRadioGroupDataAttrs, type MenuOptionState } 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 {\n  type CaptionsOption,\n  type CaptionsOptionsProps,\n  type CaptionsOptionsResult,\n  useCaptionsOptions,\n} from './use-captions-options';\n\nexport type CaptionsRadioGroupItemState = CaptionsOption & {\n  /** Whether this option is currently selected. */\n  checked: boolean;\n};\n\nexport interface CaptionsRadioGroupItemProps extends Omit<MenuRadioItemProps, 'ref'> {\n  /** Text track value represented by the item. */\n  'data-track': string;\n}\n\nexport interface CaptionsRadioGroupRootProps extends CaptionsOptionsProps {\n  children?: ReactNode;\n}\n\nexport interface CaptionsRadioGroupOptionsProps extends Omit<\n  UIComponentProps<'div', CaptionsRadioGroupCore.State>,\n  'children'\n> {\n  /** Render one consumer-owned menu radio item for every captions option. */\n  renderItem: (props: CaptionsRadioGroupItemProps, state: CaptionsRadioGroupItemState) => ReactElement;\n}\n\nexport type CaptionsRadioGroupValueProps = UIComponentProps<'span', CaptionsOptionsResult>;\n\nexport interface CaptionsRadioGroupLegacyProps extends CaptionsRadioGroupOptionsProps, CaptionsOptionsProps {}\n\nconst CaptionsRadioGroupContext = createContext<CaptionsOptionsResult | null | undefined>(undefined);\n\n/** Owns captions option state and shares it with an enclosing menu. Does not render a DOM element. */\nexport function CaptionsRadioGroupRoot({ children, ...props }: CaptionsRadioGroupRootProps): ReactNode {\n  const captions = useCaptionsOptions(props);\n\n  useMenuOptionState(toMenuOptionState(captions));\n\n  return <CaptionsRadioGroupContext.Provider value={captions}>{children}</CaptionsRadioGroupContext.Provider>;\n}\n\n/** Displays the selected captions label. */\nexport const CaptionsRadioGroupValue = forwardRef<HTMLSpanElement, CaptionsRadioGroupValueProps>(\n  function CaptionsRadioGroupValue({ render, className, style, ...elementProps }, forwardedRef) {\n    const captions = useCaptionsRadioGroupContext();\n    if (!captions) return null;\n\n    return renderElement(\n      'span',\n      { render, className, style },\n      { state: captions, ref: forwardedRef, props: [elementProps, { children: captions.selectedLabel }] }\n    );\n  }\n);\n\n/** Renders menu radio items for the player's captions and subtitles tracks. */\nexport const CaptionsRadioGroupOptions = forwardRef<HTMLDivElement, CaptionsRadioGroupOptionsProps>(\n  function CaptionsRadioGroupOptions(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 captions = useCaptionsRadioGroupContext();\n    if (!captions) return null;\n\n    const { state, value, options, setValue } = captions;\n    const ariaLabel = ariaLabelProp ?? (ariaLabelledBy === undefined ? captions.label : undefined);\n\n    return (\n      <MenuRadioGroup\n        {...getStateDataAttrs(state, CaptionsRadioGroupDataAttrs)}\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-track': 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 CaptionsRadioGroupLegacy = forwardRef<HTMLDivElement, CaptionsRadioGroupLegacyProps>(\n  function CaptionsRadioGroupLegacy({ label, formatTrack, disabled, ...props }, forwardedRef) {\n    return (\n      <CaptionsRadioGroupRoot label={label} formatTrack={formatTrack} disabled={disabled}>\n        <CaptionsRadioGroupOptions {...props} ref={forwardedRef} />\n      </CaptionsRadioGroupRoot>\n    );\n  }\n);\n\nfunction useCaptionsRadioGroupContext(): CaptionsOptionsResult | null {\n  const captions = useContext(CaptionsRadioGroupContext);\n  if (captions === undefined) throw new Error('CaptionsRadioGroup parts must be used within CaptionsRadioGroup.Root');\n\n  return captions;\n}\n\nfunction toMenuOptionState(captions: CaptionsOptionsResult | null): MenuOptionState {\n  return {\n    value: captions?.selectedLabel ?? '',\n    disabled: captions?.disabled ?? true,\n    hidden: captions?.hidden ?? true,\n    availability: captions?.state.availability ?? 'unsupported',\n  };\n}\n\nexport namespace CaptionsRadioGroupRoot {\n  export type Props = CaptionsRadioGroupRootProps;\n}\n\nexport namespace CaptionsRadioGroupValue {\n  export type Props = CaptionsRadioGroupValueProps;\n  export type State = CaptionsOptionsResult;\n}\n\nexport namespace CaptionsRadioGroupOptions {\n  export type Props = CaptionsRadioGroupOptionsProps;\n  export type State = CaptionsRadioGroupCore.State;\n  export type ItemProps = CaptionsRadioGroupItemProps;\n  export type ItemState = CaptionsRadioGroupItemState;\n}\n"],"mappings":";;;;;;;;;;AA4CA,MAAM,4BAA4B,cAAwD,KAAA,CAAS;;AAGnG,SAAgB,uBAAuB,EAAE,UAAU,GAAG,SAAiD;CACrG,MAAM,WAAW,mBAAmB,KAAK;CAEzC,mBAAmB,kBAAkB,QAAQ,CAAC;CAE9C,OAAO,oBAAC,0BAA0B,UAA3B;EAAoC,OAAO;EAAW;CAA6C,CAAA;AAC5G;;AAGA,MAAa,0BAA0B,WACrC,SAAS,wBAAwB,EAAE,QAAQ,WAAW,OAAO,GAAG,gBAAgB,cAAc;CAC5F,MAAM,WAAW,6BAA6B;CAC9C,IAAI,CAAC,UAAU,OAAO;CAEtB,OAAO,cACL,QACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EAAE,OAAO;EAAU,KAAK;EAAc,OAAO,CAAC,cAAc,EAAE,UAAU,SAAS,cAAc,CAAC;CAAE,CACpG;AACF,CACF;;AAGA,MAAa,4BAA4B,WACvC,SAAS,0BAA0B,gBAAgB,cAAc;CAC/D,MAAM,EACJ,YACA,QACA,WACA,OACA,cAAc,eACd,mBAAmB,gBACnB,GAAG,iBACD;CACJ,MAAM,WAAW,6BAA6B;CAC9C,IAAI,CAAC,UAAU,OAAO;CAEtB,MAAM,EAAE,OAAO,OAAO,SAAS,aAAa;CAC5C,MAAM,YAAY,kBAAkB,mBAAmB,KAAA,IAAY,SAAS,QAAQ,KAAA;CAEpF,OACE,oBAAC,gBAAD;EACE,GAAI,kBAAkB,OAAO,2BAA2B;EACxD,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,cAAc,OAAO;IACrB,UAAU,OAAO;GACnB,GACA,SACF,EACQ,GAVK,OAAO,KAUZ;EAEd,CAAC;CACa,CAAA;AAEpB,CACF;;AAGA,MAAa,2BAA2B,WACtC,SAAS,yBAAyB,EAAE,OAAO,aAAa,UAAU,GAAG,SAAS,cAAc;CAC1F,OACE,oBAAC,wBAAD;EAA+B;EAAoB;EAAuB;EACxE,UAAA,oBAAC,2BAAD;GAA2B,GAAI;GAAO,KAAK;EAAe,CAAA;CACpC,CAAA;AAE5B,CACF;AAEA,SAAS,+BAA6D;CACpE,MAAM,WAAW,WAAW,yBAAyB;CACrD,IAAI,aAAa,KAAA,GAAW,MAAM,IAAI,MAAM,sEAAsE;CAElH,OAAO;AACT;AAEA,SAAS,kBAAkB,UAAyD;CAClF,OAAO;EACL,OAAO,UAAU,iBAAiB;EAClC,UAAU,UAAU,YAAY;EAChC,QAAQ,UAAU,UAAU;EAC5B,cAAc,UAAU,MAAM,gBAAgB;CAChD;AACF"}
+{"version":3,"file":"component.js","names":["{ children, ...props }: CaptionsRadioGroupRootProps","toMenuOptionState(captions)","<CaptionsRadioGroupContext.Provider value={captions}>{children}</CaptionsRadioGroupContext.Provider>","CaptionsRadioGroupContext.Provider","getStateDataAttrs(state, CaptionsRadioGroupDataAttrs)","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-track': 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-track': option.value,\n                  children: option.label,\n                },\n                itemState\n              )}\n            </Fragment>\n          );\n        }","<MenuRadioGroup\n        {...getStateDataAttrs(state, CaptionsRadioGroupDataAttrs)}\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-track': option.value,\n                  children: option.label,\n                },\n                itemState\n              )}\n            </Fragment>\n          );\n        })}\n      </MenuRadioGroup>","hidden","state.disabled || undefined","state.hidden","{ label, formatTrack, disabled, ...props }","<CaptionsRadioGroupOptions {...props} ref={forwardedRef} />","<CaptionsRadioGroupRoot label={label} formatTrack={formatTrack} disabled={disabled}>\n        <CaptionsRadioGroupOptions {...props} ref={forwardedRef} />\n      </CaptionsRadioGroupRoot>"],"sources":["../../../../src/ui/captions-radio-group/component.tsx"],"sourcesContent":["import { type CaptionsRadioGroupCore, CaptionsRadioGroupDataAttrs, type MenuOptionState } 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 {\n  type CaptionsOption,\n  type CaptionsOptionsProps,\n  type CaptionsOptionsResult,\n  useCaptionsOptions,\n} from './use-captions-options';\n\nexport type CaptionsRadioGroupItemState = CaptionsOption & {\n  /** Whether this option is currently selected. */\n  checked: boolean;\n};\n\nexport interface CaptionsRadioGroupItemProps extends Omit<MenuRadioItemProps, 'ref'> {\n  /** Text track value represented by the item. */\n  'data-track': string;\n}\n\nexport interface CaptionsRadioGroupRootProps extends CaptionsOptionsProps {\n  children?: ReactNode;\n}\n\nexport interface CaptionsRadioGroupOptionsProps extends Omit<\n  UIComponentProps<'div', CaptionsRadioGroupCore.State>,\n  'children'\n> {\n  /** Render one consumer-owned menu radio item for every captions option. */\n  renderItem: (props: CaptionsRadioGroupItemProps, state: CaptionsRadioGroupItemState) => ReactElement;\n}\n\nexport type CaptionsRadioGroupValueProps = UIComponentProps<'span', CaptionsOptionsResult>;\n\nexport interface CaptionsRadioGroupLegacyProps extends CaptionsRadioGroupOptionsProps, CaptionsOptionsProps {}\n\nconst CaptionsRadioGroupContext = createContext<CaptionsOptionsResult | null | undefined>(undefined);\n\n/** Owns captions option state and shares it with an enclosing menu. Does not render a DOM element. */\nexport function CaptionsRadioGroupRoot({ children, ...props }: CaptionsRadioGroupRootProps): ReactNode {\n  const captions = useCaptionsOptions(props);\n\n  useMenuOptionState(toMenuOptionState(captions));\n\n  return <CaptionsRadioGroupContext.Provider value={captions}>{children}</CaptionsRadioGroupContext.Provider>;\n}\n\n/** Displays the selected captions label. */\nexport const CaptionsRadioGroupValue = forwardRef<HTMLSpanElement, CaptionsRadioGroupValueProps>(\n  function CaptionsRadioGroupValue({ render, className, style, ...elementProps }, forwardedRef) {\n    const captions = useCaptionsRadioGroupContext();\n    if (!captions) return null;\n\n    return renderElement(\n      'span',\n      { render, className, style },\n      { state: captions, ref: forwardedRef, props: [elementProps, { children: captions.selectedLabel }] }\n    );\n  }\n);\n\n/** Renders menu radio items for the player's captions and subtitles tracks. */\nexport const CaptionsRadioGroupOptions = forwardRef<HTMLDivElement, CaptionsRadioGroupOptionsProps>(\n  function CaptionsRadioGroupOptions(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 captions = useCaptionsRadioGroupContext();\n    if (!captions) return null;\n\n    const { state, value, options, setValue } = captions;\n    const ariaLabel = ariaLabelProp ?? (ariaLabelledBy === undefined ? captions.label : undefined);\n\n    return (\n      <MenuRadioGroup\n        {...getStateDataAttrs(state, CaptionsRadioGroupDataAttrs)}\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-track': 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 CaptionsRadioGroupLegacy = forwardRef<HTMLDivElement, CaptionsRadioGroupLegacyProps>(\n  function CaptionsRadioGroupLegacy({ label, formatTrack, disabled, ...props }, forwardedRef) {\n    return (\n      <CaptionsRadioGroupRoot label={label} formatTrack={formatTrack} disabled={disabled}>\n        <CaptionsRadioGroupOptions {...props} ref={forwardedRef} />\n      </CaptionsRadioGroupRoot>\n    );\n  }\n);\n\nfunction useCaptionsRadioGroupContext(): CaptionsOptionsResult | null {\n  const captions = useContext(CaptionsRadioGroupContext);\n  if (captions === undefined) throw new Error('CaptionsRadioGroup parts must be used within CaptionsRadioGroup.Root');\n\n  return captions;\n}\n\nfunction toMenuOptionState(captions: CaptionsOptionsResult | null): MenuOptionState {\n  return {\n    value: captions?.selectedLabel ?? '',\n    disabled: captions?.disabled ?? true,\n    hidden: captions?.hidden ?? true,\n    availability: captions?.state.availability ?? 'unsupported',\n  };\n}\n\nexport namespace CaptionsRadioGroupRoot {\n  export type Props = CaptionsRadioGroupRootProps;\n}\n\nexport namespace CaptionsRadioGroupValue {\n  export type Props = CaptionsRadioGroupValueProps;\n  export type State = CaptionsOptionsResult;\n}\n\nexport namespace CaptionsRadioGroupOptions {\n  export type Props = CaptionsRadioGroupOptionsProps;\n  export type State = CaptionsRadioGroupCore.State;\n  export type ItemProps = CaptionsRadioGroupItemProps;\n  export type ItemState = CaptionsRadioGroupItemState;\n}\n"],"mappings":"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"}

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

@@ -7,6 +7,7 @@ import { jsx } from "react/jsx-runtime";
 //#region src/ui/controls/root.tsx
 /** Manages controls state and provides it to the compound parts. Does not render an element. */
 function ControlsRoot({ children, visibility = ControlsCore.defaultProps.visibility }) {
+	"use no memo";
 	const controls = usePlayer(selectControls);
 	const [core] = useState(() => new ControlsCore());
 	core.setProps({ visibility });

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

@@ -1 +1 @@
-{"version":3,"file":"root.js","names":[],"sources":["../../../../src/ui/controls/root.tsx"],"sourcesContent":["import { ControlsCore, ControlsDataAttrs, type ControlsProps } from '@videojs/core';\nimport { logMissingFeature, selectControls } from '@videojs/core/dom';\nimport type { ReactNode } from 'react';\nimport { useState } from 'react';\n\nimport { usePlayer } from '../../player/context';\nimport { ControlsContextProvider } from './context';\n\nexport interface ControlsRootProps extends ControlsProps {\n  children?: ReactNode | undefined;\n}\n\n/** Manages controls state and provides it to the compound parts. Does not render an element. */\nexport function ControlsRoot({\n  children,\n  visibility = ControlsCore.defaultProps.visibility,\n}: ControlsRootProps): ReactNode {\n  const controls = usePlayer(selectControls);\n  const [core] = useState(() => new ControlsCore());\n\n  core.setProps({ visibility });\n  core.setMedia(controls ?? null);\n\n  const state = core.getState();\n\n  if (!state) {\n    if (__DEV__) logMissingFeature('Controls.Root', 'controls');\n\n    return null;\n  }\n\n  return (\n    <ControlsContextProvider value={{ state, stateAttrMap: ControlsDataAttrs }}>{children}</ControlsContextProvider>\n  );\n}\n\nexport namespace ControlsRoot {\n  export type Props = ControlsRootProps;\n  export type State = ControlsCore.State;\n}\n"],"mappings":";;;;;;;;AAaA,SAAgB,aAAa,EAC3B,UACA,aAAa,aAAa,aAAa,cACR;CAC/B,MAAM,WAAW,UAAU,cAAc;CACzC,MAAM,CAAC,QAAQ,eAAe,IAAI,aAAa,CAAC;CAEhD,KAAK,SAAS,EAAE,WAAW,CAAC;CAC5B,KAAK,SAAS,YAAY,IAAI;CAE9B,MAAM,QAAQ,KAAK,SAAS;CAE5B,IAAI,CAAC,OAAO;EACG,kBAAkB,iBAAiB,UAAU;EAE1D,OAAO;CACT;CAEA,OACE,oBAAC,yBAAD;EAAyB,OAAO;GAAE;GAAO,cAAc;EAAkB;EAAI;CAAkC,CAAA;AAEnH"}
+{"version":3,"file":"root.js","names":[],"sources":["../../../../src/ui/controls/root.tsx"],"sourcesContent":["import { ControlsCore, ControlsDataAttrs, type ControlsProps } from '@videojs/core';\nimport { logMissingFeature, selectControls } from '@videojs/core/dom';\nimport type { ReactNode } from 'react';\nimport { useState } from 'react';\n\nimport { usePlayer } from '../../player/context';\nimport { ControlsContextProvider } from './context';\n\nexport interface ControlsRootProps extends ControlsProps {\n  children?: ReactNode | undefined;\n}\n\n/** Manages controls state and provides it to the compound parts. Does not render an element. */\nexport function ControlsRoot({\n  children,\n  visibility = ControlsCore.defaultProps.visibility,\n}: ControlsRootProps): ReactNode {\n  // React Compiler cannot track state read through the mutable core instance.\n  'use no memo';\n\n  const controls = usePlayer(selectControls);\n  const [core] = useState(() => new ControlsCore());\n\n  core.setProps({ visibility });\n  core.setMedia(controls ?? null);\n\n  const state = core.getState();\n\n  if (!state) {\n    if (__DEV__) logMissingFeature('Controls.Root', 'controls');\n\n    return null;\n  }\n\n  return (\n    <ControlsContextProvider value={{ state, stateAttrMap: ControlsDataAttrs }}>{children}</ControlsContextProvider>\n  );\n}\n\nexport namespace ControlsRoot {\n  export type Props = ControlsRootProps;\n  export type State = ControlsCore.State;\n}\n"],"mappings":";;;;;;;;AAaA,SAAgB,aAAa,EAC3B,UACA,aAAa,aAAa,aAAa,cACR;CAE/B;CAEA,MAAM,WAAW,UAAU,cAAc;CACzC,MAAM,CAAC,QAAQ,eAAe,IAAI,aAAa,CAAC;CAEhD,KAAK,SAAS,EAAE,WAAW,CAAC;CAC5B,KAAK,SAAS,YAAY,IAAI;CAE9B,MAAM,QAAQ,KAAK,SAAS;CAE5B,IAAI,CAAC,OAAO;EACG,kBAAkB,iBAAiB,UAAU;EAE1D,OAAO;CACT;CAEA,OACE,oBAAC,yBAAD;EAAyB,OAAO;GAAE;GAAO,cAAc;EAAkB;EAAI;CAAkC,CAAA;AAEnH"}

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

@@ -1,18 +1,33 @@
 import { DialogContextProvider } from "./context.js";
 import { useDialogRoot } from "./use-dialog-root.js";
 import { DialogCore } from "@videojs/core";
+import { c } from "react-compiler-runtime";
 import { jsx } from "react/jsx-runtime";
 //#region src/ui/dialog/root.tsx
 /** Manages dialog state and provides it to the compound parts. */
 function DialogRoot(props) {
-	const context = useDialogRoot({
-		...props,
-		coreFactory: createDialogCore
-	});
-	return /* @__PURE__ */ jsx(DialogContextProvider, {
-		value: context,
-		children: props.children
-	});
+	const $ = c(5);
+	let t0;
+	if ($[0] !== props) {
+		t0 = {
+			...props,
+			coreFactory: createDialogCore
+		};
+		$[0] = props;
+		$[1] = t0;
+	} else t0 = $[1];
+	const context = useDialogRoot(t0);
+	let t1;
+	if ($[2] !== context || $[3] !== props.children) {
+		t1 = /* @__PURE__ */ jsx(DialogContextProvider, {
+			value: context,
+			children: props.children
+		});
+		$[2] = context;
+		$[3] = props.children;
+		$[4] = t1;
+	} else t1 = $[4];
+	return t1;
 }
 function createDialogCore() {
 	return new DialogCore();

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

@@ -1 +1 @@
-{"version":3,"file":"root.js","names":[],"sources":["../../../../src/ui/dialog/root.tsx"],"sourcesContent":["import { DialogCore, type DialogProps } from '@videojs/core';\nimport type { ReactNode } from 'react';\n\nimport { DialogContextProvider } from './context';\nimport { useDialogRoot } from './use-dialog-root';\n\nexport interface DialogRootProps extends DialogProps {\n  /** Called when the open state changes, before animations complete. */\n  onOpenChange?: (open: boolean) => void;\n  /** Called after open or close animations complete. */\n  onOpenChangeComplete?: (open: boolean) => void;\n  children?: ReactNode;\n}\n\n/** Manages dialog state and provides it to the compound parts. */\nexport function DialogRoot(props: DialogRootProps): ReactNode {\n  const context = useDialogRoot({ ...props, coreFactory: createDialogCore });\n\n  return <DialogContextProvider value={context}>{props.children}</DialogContextProvider>;\n}\n\nfunction createDialogCore(): DialogCore {\n  return new DialogCore();\n}\n\nexport namespace DialogRoot {\n  export type Props = DialogRootProps;\n}\n"],"mappings":";;;;;;AAeA,SAAgB,WAAW,OAAmC;CAC5D,MAAM,UAAU,cAAc;EAAE,GAAG;EAAO,aAAa;CAAiB,CAAC;CAEzE,OAAO,oBAAC,uBAAD;EAAuB,OAAO;EAAU,UAAA,MAAM;CAAgC,CAAA;AACvF;AAEA,SAAS,mBAA+B;CACtC,OAAO,IAAI,WAAW;AACxB"}
+{"version":3,"file":"root.js","names":["{ ...props, coreFactory: createDialogCore }","<DialogContextProvider value={context}>{props.children}</DialogContextProvider>","children"],"sources":["../../../../src/ui/dialog/root.tsx"],"sourcesContent":["import { DialogCore, type DialogProps } from '@videojs/core';\nimport type { ReactNode } from 'react';\n\nimport { DialogContextProvider } from './context';\nimport { useDialogRoot } from './use-dialog-root';\n\nexport interface DialogRootProps extends DialogProps {\n  /** Called when the open state changes, before animations complete. */\n  onOpenChange?: (open: boolean) => void;\n  /** Called after open or close animations complete. */\n  onOpenChangeComplete?: (open: boolean) => void;\n  children?: ReactNode;\n}\n\n/** Manages dialog state and provides it to the compound parts. */\nexport function DialogRoot(props: DialogRootProps): ReactNode {\n  const context = useDialogRoot({ ...props, coreFactory: createDialogCore });\n\n  return <DialogContextProvider value={context}>{props.children}</DialogContextProvider>;\n}\n\nfunction createDialogCore(): DialogCore {\n  return new DialogCore();\n}\n\nexport namespace DialogRoot {\n  export type Props = DialogRootProps;\n}\n"],"mappings":";;;;;;;AAeA,SAAgB,WAAW,OAAmC;;CAC9BA,IAAAA;CAAK,IAAA,EAAA,OAAA,OAAA;EAAL,KAAA;GAAE,GAAG;GAAO,aAAa;EAAiB;EAArC,EAAA,KAAA;;;CAAnC,MAAM,UAAU,cAAcA,EAA2C;CAElEC,IAAAA;CAA8B,IAAA,EAAA,OAAA,WAAA,EAAA,OAAgBC,MAAAA,UAAAA;EAA9C,KAAA,oBAAC,uBAAD;GAAuB,OAAO;GAAU,UAAA,MAAM;EAAgC,CAAA;EAAhD,EAAA,KAAA;EAAgBA,EAAAA,KAAAA,MAAAA;;;CAArD,OAAOD;AACT;AAEA,SAAS,mBAA+B;CACtC,OAAO,IAAI,WAAW;AACxB"}

package/dist/dev/ui/error-dialog/root.js

@@ -5,34 +5,66 @@ import { useDialogRoot } from "../dialog/use-dialog-root.js";
 import { ErrorDialogContextProvider } from "./context.js";
 import { ErrorDialogCore, ErrorDialogDataAttrs } from "@videojs/core";
 import { selectError } from "@videojs/core/dom";
-import { useRef } from "react";
+import { c } from "react-compiler-runtime";
+import { useState } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/ui/error-dialog/root.tsx
 /** Opens from player error state and provides it to the shared dialog parts. */
-function ErrorDialogRoot({ children }) {
+function ErrorDialogRoot(t0) {
+	const $ = c(12);
+	const { children } = t0;
 	const errorState = usePlayer(selectError);
 	const container = useContainer();
-	const lastError = useRef(errorState?.error ?? null);
-	if (errorState?.error) lastError.current = errorState.error;
+	const [lastError, setLastError] = useState(errorState?.error ?? null);
+	if (errorState?.error && errorState.error !== lastError) setLastError(errorState.error);
 	const errorStateRef = useLatestRef(errorState);
-	const dialogContext = useDialogRoot({
-		open: Boolean(errorState?.error),
-		onOpenChange(nextOpen) {
-			if (!nextOpen) errorStateRef.current?.dismissError();
-		},
-		coreFactory: createErrorDialogCore,
-		stateAttrMap: ErrorDialogDataAttrs,
-		idPrefix: "error-dialog",
-		interactionRoot: container
-	});
+	const t1 = Boolean(errorState?.error);
+	let t2;
+	if ($[0] !== container || $[1] !== errorStateRef || $[2] !== t1) {
+		t2 = {
+			open: t1,
+			onOpenChange(nextOpen) {
+				if (!nextOpen) errorStateRef.current?.dismissError();
+			},
+			coreFactory: createErrorDialogCore,
+			stateAttrMap: ErrorDialogDataAttrs,
+			idPrefix: "error-dialog",
+			interactionRoot: container
+		};
+		$[0] = container;
+		$[1] = errorStateRef;
+		$[2] = t1;
+		$[3] = t2;
+	} else t2 = $[3];
+	const dialogContext = useDialogRoot(t2);
 	if (!errorState) return null;
-	return /* @__PURE__ */ jsx(ErrorDialogContextProvider, {
-		value: { lastError: lastError.current },
-		children: /* @__PURE__ */ jsx(DialogContextProvider, {
+	let t3;
+	if ($[4] !== lastError) {
+		t3 = { lastError };
+		$[4] = lastError;
+		$[5] = t3;
+	} else t3 = $[5];
+	let t4;
+	if ($[6] !== children || $[7] !== dialogContext) {
+		t4 = /* @__PURE__ */ jsx(DialogContextProvider, {
 			value: dialogContext,
 			children
-		})
-	});
+		});
+		$[6] = children;
+		$[7] = dialogContext;
+		$[8] = t4;
+	} else t4 = $[8];
+	let t5;
+	if ($[9] !== t3 || $[10] !== t4) {
+		t5 = /* @__PURE__ */ jsx(ErrorDialogContextProvider, {
+			value: t3,
+			children: t4
+		});
+		$[9] = t3;
+		$[10] = t4;
+		$[11] = t5;
+	} else t5 = $[11];
+	return t5;
 }
 function createErrorDialogCore() {
 	return new ErrorDialogCore();

package/dist/dev/ui/error-dialog/root.js.map

@@ -1 +1 @@
-{"version":3,"file":"root.js","names":[],"sources":["../../../../src/ui/error-dialog/root.tsx"],"sourcesContent":["import { ErrorDialogCore, ErrorDialogDataAttrs } from '@videojs/core';\nimport { selectError } from '@videojs/core/dom';\nimport type { ReactNode } from 'react';\nimport { useRef } from 'react';\n\nimport { useContainer, usePlayer } from '../../player/context';\nimport { useLatestRef } from '../../utils/use-latest-ref';\nimport { DialogContextProvider } from '../dialog/context';\nimport { useDialogRoot } from '../dialog/use-dialog-root';\nimport { ErrorDialogContextProvider } from './context';\n\nexport interface ErrorDialogRootProps {\n  children?: ReactNode;\n}\n\n/** Opens from player error state and provides it to the shared dialog parts. */\nexport function ErrorDialogRoot({ children }: ErrorDialogRootProps): ReactNode {\n  const errorState = usePlayer(selectError);\n  const container = useContainer();\n  const lastError = useRef(errorState?.error ?? null);\n\n  if (errorState?.error) lastError.current = errorState.error;\n\n  const errorStateRef = useLatestRef(errorState);\n  const dialogContext = useDialogRoot({\n    open: Boolean(errorState?.error),\n    onOpenChange(nextOpen) {\n      if (!nextOpen) errorStateRef.current?.dismissError();\n    },\n    coreFactory: createErrorDialogCore,\n    stateAttrMap: ErrorDialogDataAttrs,\n    idPrefix: 'error-dialog',\n    interactionRoot: container,\n  });\n\n  if (!errorState) return null;\n\n  return (\n    <ErrorDialogContextProvider value={{ lastError: lastError.current }}>\n      <DialogContextProvider value={dialogContext}>{children}</DialogContextProvider>\n    </ErrorDialogContextProvider>\n  );\n}\n\nfunction createErrorDialogCore(): ErrorDialogCore {\n  return new ErrorDialogCore();\n}\n\nexport namespace ErrorDialogRoot {\n  export type Props = ErrorDialogRootProps;\n}\n"],"mappings":";;;;;;;;;;;AAgBA,SAAgB,gBAAgB,EAAE,YAA6C;CAC7E,MAAM,aAAa,UAAU,WAAW;CACxC,MAAM,YAAY,aAAa;CAC/B,MAAM,YAAY,OAAO,YAAY,SAAS,IAAI;CAElD,IAAI,YAAY,OAAO,UAAU,UAAU,WAAW;CAEtD,MAAM,gBAAgB,aAAa,UAAU;CAC7C,MAAM,gBAAgB,cAAc;EAClC,MAAM,QAAQ,YAAY,KAAK;EAC/B,aAAa,UAAU;GACrB,IAAI,CAAC,UAAU,cAAc,SAAS,aAAa;EACrD;EACA,aAAa;EACb,cAAc;EACd,UAAU;EACV,iBAAiB;CACnB,CAAC;CAED,IAAI,CAAC,YAAY,OAAO;CAExB,OACE,oBAAC,4BAAD;EAA4B,OAAO,EAAE,WAAW,UAAU,QAAQ;EAChE,UAAA,oBAAC,uBAAD;GAAuB,OAAO;GAAgB;EAAgC,CAAA;CACpD,CAAA;AAEhC;AAEA,SAAS,wBAAyC;CAChD,OAAO,IAAI,gBAAgB;AAC7B"}
+{"version":3,"file":"root.js","names":["{ children }: ErrorDialogRootProps","{\n    open: Boolean(errorState?.error),\n    onOpenChange(nextOpen) {\n      if (!nextOpen) errorStateRef.current?.dismissError();\n    },\n    coreFactory: createErrorDialogCore,\n    stateAttrMap: ErrorDialogDataAttrs,\n    idPrefix: 'error-dialog',\n    interactionRoot: container,\n  }","errorStateRef.current?.dismissError","Boolean(errorState?.error)","{ lastError }","<DialogContextProvider value={dialogContext}>{children}</DialogContextProvider>","<ErrorDialogContextProvider value={{ lastError }}>\n      <DialogContextProvider value={dialogContext}>{children}</DialogContextProvider>\n    </ErrorDialogContextProvider>"],"sources":["../../../../src/ui/error-dialog/root.tsx"],"sourcesContent":["import { ErrorDialogCore, ErrorDialogDataAttrs } from '@videojs/core';\nimport { selectError } from '@videojs/core/dom';\nimport type { ReactNode } from 'react';\nimport { useState } from 'react';\n\nimport { useContainer, usePlayer } from '../../player/context';\nimport { useLatestRef } from '../../utils/use-latest-ref';\nimport { DialogContextProvider } from '../dialog/context';\nimport { useDialogRoot } from '../dialog/use-dialog-root';\nimport { ErrorDialogContextProvider } from './context';\n\nexport interface ErrorDialogRootProps {\n  children?: ReactNode;\n}\n\n/** Opens from player error state and provides it to the shared dialog parts. */\nexport function ErrorDialogRoot({ children }: ErrorDialogRootProps): ReactNode {\n  const errorState = usePlayer(selectError);\n  const container = useContainer();\n  // Keep the last error so the dialog can finish its close transition with content after the error clears. Adjusting\n  // state during render is the sanctioned way to derive it from props; writing a ref here would be invisible to React.\n  const [lastError, setLastError] = useState(errorState?.error ?? null);\n\n  if (errorState?.error && errorState.error !== lastError) setLastError(errorState.error);\n\n  const errorStateRef = useLatestRef(errorState);\n  const dialogContext = useDialogRoot({\n    open: Boolean(errorState?.error),\n    onOpenChange(nextOpen) {\n      if (!nextOpen) errorStateRef.current?.dismissError();\n    },\n    coreFactory: createErrorDialogCore,\n    stateAttrMap: ErrorDialogDataAttrs,\n    idPrefix: 'error-dialog',\n    interactionRoot: container,\n  });\n\n  if (!errorState) return null;\n\n  return (\n    <ErrorDialogContextProvider value={{ lastError }}>\n      <DialogContextProvider value={dialogContext}>{children}</DialogContextProvider>\n    </ErrorDialogContextProvider>\n  );\n}\n\nfunction createErrorDialogCore(): ErrorDialogCore {\n  return new ErrorDialogCore();\n}\n\nexport namespace ErrorDialogRoot {\n  export type Props = ErrorDialogRootProps;\n}\n"],"mappings":";;;;;;;;;;;;AAgBA,SAAgB,gBAAA,IAA+D;;CAA/C,MAAA,EAAE,aAAFA;CAC9B,MAAM,aAAa,UAAU,WAAW;CACxC,MAAM,YAAY,aAAa;CAG/B,MAAM,CAAC,WAAW,gBAAgB,SAAS,YAAY,SAAS,IAAI;CAEpE,IAAI,YAAY,SAAS,WAAW,UAAU,WAAW,aAAa,WAAW,KAAK;CAEtF,MAAM,gBAAgB,aAAa,UAAU;CAErC,MAAA,KAAA,QAAQ,YAAY,KAAK;CADGC,IAAAA;CAQjB,IAAA,EAAA,OAAA,aAAA,EAAA,OALAC,iBAAAA,EAAAA,OAFXC,IAAAA;EAD4B,KAAA;GAClC,MAAMA;GACN,aAAa,UAAU;IACrB,IAAI,CAAC,UAAU,cAAc,SAAS,aAAa;GACrD;GACA,aAAa;GACb,cAAc;GACd,UAAU;GACV,iBAAiB;EACnB;EADmB,EAAA,KAAA;EALAD,EAAAA,KAAAA;EAFXC,EAAAA,KAAAA;;;CADR,MAAM,gBAAgB,cAAcF,EASnC;CAED,IAAI,CAAC,YAAY,OAAO;CAGaG,IAAAA;CAAE,IAAA,EAAA,OAAA,WAAA;EAAF,KAAA,EAAE,UAAU;EAAV,EAAA,KAAA;;;CACnCC,IAAAA;CAA8C,IAAA,EAAA,OAAA,YAAA,EAAA,OAAhB,eAAA;EAA9B,KAAA,oBAAC,uBAAD;GAAuB,OAAO;GAAgB;EAAgC,CAAA;EAAhC,EAAA,KAAA;EAAhB,EAAA,KAAA;;;CADhCC,IAAAA;CAAmCF,IAAAA,EAAAA,OAAAA,MAAAA,EAAAA,QACjCC,IAAAA;EADF,KAAA,oBAAC,4BAAD;GAA4B,OAAOD;GACjCC,UAAAA;EAC0B,CAAA;EAFOD,EAAAA,KAAAA;EACjCC,EAAAA,MAAAA;;;CAFJ,OACEC;AAIJ;AAEA,SAAS,wBAAyC;CAChD,OAAO,IAAI,gBAAgB;AAC7B"}

package/dist/dev/ui/gesture/component.js

@@ -1,40 +1,62 @@
 import { useContainer, usePlayer } from "../../player/context.js";
 import { createDoubleTapGesture, createTapGesture, getGestureActionValue, resolveGestureAction } from "@videojs/core/dom";
+import { c } from "react-compiler-runtime";
 import { useEffect } from "react";
 //#region src/ui/gesture/component.tsx
-function Gesture({ type, action, value, pointer, region, disabled }) {
+function Gesture(t0) {
+	const $ = c(10);
+	const { type, action, value, pointer, region, disabled } = t0;
 	const store = usePlayer();
 	const container = useContainer();
-	useEffect(() => {
-		if (!container || !type || !action || disabled) return;
-		const resolver = resolveGestureAction(action);
-		if (!resolver) return;
-		const actionValue = getGestureActionValue(action, region, value);
-		const onActivate = (event) => {
-			resolver({
-				store,
-				value: actionValue,
-				event
-			});
+	let t1;
+	let t2;
+	if ($[0] !== action || $[1] !== container || $[2] !== disabled || $[3] !== pointer || $[4] !== region || $[5] !== store || $[6] !== type || $[7] !== value) {
+		t1 = () => {
+			if (!container || !type || !action || disabled) return;
+			const resolver = resolveGestureAction(action);
+			if (!resolver) return;
+			const actionValue = getGestureActionValue(action, region, value);
+			const onActivate = (event) => {
+				resolver({
+					store,
+					value: actionValue,
+					event
+				});
+			};
+			const options = {
+				pointer,
+				region,
+				action,
+				value: actionValue
+			};
+			if (type === "doubletap") return createDoubleTapGesture(container, onActivate, options);
+			if (type === "tap") return createTapGesture(container, onActivate, options);
 		};
-		const options = {
+		t2 = [
+			container,
+			store,
+			type,
+			action,
+			value,
 			pointer,
 			region,
-			action,
-			value: actionValue
-		};
-		if (type === "doubletap") return createDoubleTapGesture(container, onActivate, options);
-		if (type === "tap") return createTapGesture(container, onActivate, options);
-	}, [
-		container,
-		store,
-		type,
-		action,
-		value,
-		pointer,
-		region,
-		disabled
-	]);
+			disabled
+		];
+		$[0] = action;
+		$[1] = container;
+		$[2] = disabled;
+		$[3] = pointer;
+		$[4] = region;
+		$[5] = store;
+		$[6] = type;
+		$[7] = value;
+		$[8] = t1;
+		$[9] = t2;
+	} else {
+		t1 = $[8];
+		t2 = $[9];
+	}
+	useEffect(t1, t2);
 	return null;
 }
 /** @deprecated Use `Gesture` instead. */

package/dist/dev/ui/gesture/component.js.map

@@ -1 +1 @@
-{"version":3,"file":"component.js","names":[],"sources":["../../../../src/ui/gesture/component.tsx"],"sourcesContent":["import type { GestureProps as CoreGestureProps } from '@videojs/core';\nimport type { AnyPlayerStore } from '@videojs/core/dom';\nimport {\n  createDoubleTapGesture,\n  createTapGesture,\n  getGestureActionValue,\n  resolveGestureAction,\n} from '@videojs/core/dom';\nimport type { ReactNode } from 'react';\nimport { useEffect } from 'react';\n\nimport { useContainer, usePlayer } from '../../player/context';\n\nexport interface GestureProps extends CoreGestureProps {}\n\nexport function Gesture({ type, action, value, pointer, region, disabled }: GestureProps): ReactNode {\n  const store = usePlayer() as AnyPlayerStore;\n  const container = useContainer();\n\n  useEffect(() => {\n    if (!container || !type || !action || disabled) return;\n\n    const resolver = resolveGestureAction(action);\n    if (!resolver) return;\n\n    const actionValue = getGestureActionValue(action, region, value);\n\n    const onActivate = (event: PointerEvent) => {\n      resolver({ store, value: actionValue, event });\n    };\n\n    const options = { pointer, region, action, value: actionValue };\n\n    if (type === 'doubletap') {\n      return createDoubleTapGesture(container, onActivate, options);\n    }\n\n    if (type === 'tap') return createTapGesture(container, onActivate, options);\n\n    return;\n  }, [container, store, type, action, value, pointer, region, disabled]);\n\n  return null;\n}\n\nexport namespace Gesture {\n  export type Props = GestureProps;\n}\n\n/** @deprecated Use `GestureProps` instead. */\nexport type MediaGestureProps = GestureProps;\n\n/** @deprecated Use `Gesture` instead. */\nexport const MediaGesture = Gesture;\n"],"mappings":";;;;AAeA,SAAgB,QAAQ,EAAE,MAAM,QAAQ,OAAO,SAAS,QAAQ,YAAqC;CACnG,MAAM,QAAQ,UAAU;CACxB,MAAM,YAAY,aAAa;CAE/B,gBAAgB;EACd,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,UAAU,UAAU;EAEhD,MAAM,WAAW,qBAAqB,MAAM;EAC5C,IAAI,CAAC,UAAU;EAEf,MAAM,cAAc,sBAAsB,QAAQ,QAAQ,KAAK;EAE/D,MAAM,cAAc,UAAwB;GAC1C,SAAS;IAAE;IAAO,OAAO;IAAa;GAAM,CAAC;EAC/C;EAEA,MAAM,UAAU;GAAE;GAAS;GAAQ;GAAQ,OAAO;EAAY;EAE9D,IAAI,SAAS,aACX,OAAO,uBAAuB,WAAW,YAAY,OAAO;EAG9D,IAAI,SAAS,OAAO,OAAO,iBAAiB,WAAW,YAAY,OAAO;CAG5E,GAAG;EAAC;EAAW;EAAO;EAAM;EAAQ;EAAO;EAAS;EAAQ;CAAQ,CAAC;CAErE,OAAO;AACT;;AAUA,MAAa,eAAe"}
+{"version":3,"file":"component.js","names":["{ type, action, value, pointer, region, disabled }: GestureProps","() => {\n    if (!container || !type || !action || disabled) return;\n\n    const resolver = resolveGestureAction(action);\n    if (!resolver) return;\n\n    const actionValue = getGestureActionValue(action, region, value);\n\n    const onActivate = (event: PointerEvent) => {\n      resolver({ store, value: actionValue, event });\n    };\n\n    const options = { pointer, region, action, value: actionValue };\n\n    if (type === 'doubletap') {\n      return createDoubleTapGesture(container, onActivate, options);\n    }\n\n    if (type === 'tap') return createTapGesture(container, onActivate, options);\n\n    return;\n  }","[container, store, type, action, value, pointer, region, disabled]"],"sources":["../../../../src/ui/gesture/component.tsx"],"sourcesContent":["import type { GestureProps as CoreGestureProps } from '@videojs/core';\nimport type { AnyPlayerStore } from '@videojs/core/dom';\nimport {\n  createDoubleTapGesture,\n  createTapGesture,\n  getGestureActionValue,\n  resolveGestureAction,\n} from '@videojs/core/dom';\nimport type { ReactNode } from 'react';\nimport { useEffect } from 'react';\n\nimport { useContainer, usePlayer } from '../../player/context';\n\nexport interface GestureProps extends CoreGestureProps {}\n\nexport function Gesture({ type, action, value, pointer, region, disabled }: GestureProps): ReactNode {\n  const store = usePlayer() as AnyPlayerStore;\n  const container = useContainer();\n\n  useEffect(() => {\n    if (!container || !type || !action || disabled) return;\n\n    const resolver = resolveGestureAction(action);\n    if (!resolver) return;\n\n    const actionValue = getGestureActionValue(action, region, value);\n\n    const onActivate = (event: PointerEvent) => {\n      resolver({ store, value: actionValue, event });\n    };\n\n    const options = { pointer, region, action, value: actionValue };\n\n    if (type === 'doubletap') {\n      return createDoubleTapGesture(container, onActivate, options);\n    }\n\n    if (type === 'tap') return createTapGesture(container, onActivate, options);\n\n    return;\n  }, [container, store, type, action, value, pointer, region, disabled]);\n\n  return null;\n}\n\nexport namespace Gesture {\n  export type Props = GestureProps;\n}\n\n/** @deprecated Use `GestureProps` instead. */\nexport type MediaGestureProps = GestureProps;\n\n/** @deprecated Use `Gesture` instead. */\nexport const MediaGesture = Gesture;\n"],"mappings":";;;;;AAeA,SAAgB,QAAA,IAAqF;;CAA7E,MAAA,EAAE,MAAM,QAAQ,OAAO,SAAS,QAAQ,aAAxCA;CACtB,MAAM,QAAQ,UAAU;CACxB,MAAM,YAAY,aAAa;CAErBC,IAAAA;CAqBPC,IAAAA;CApB2B,IAAA,EAAA,OAAA,UAAA,EAAA,OAAvB,aAAA,EAAA,OAAiC,YAAA,EAAA,OAWpB,WAAA,EAAA,OANgC,UAAA,EAAA,OAGrC,SAAA,EAAA,OARM,QAAA,EAAA,OAKuC,OAAA;EANlD,WAAM;GACd,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,UAAU,UAAU;GAEhD,MAAM,WAAW,qBAAqB,MAAM;GAC5C,IAAI,CAAC,UAAU;GAEf,MAAM,cAAc,sBAAsB,QAAQ,QAAQ,KAAK;GAE/D,MAAM,cAAc,UAAwB;IAC1C,SAAS;KAAE;KAAO,OAAO;KAAa;IAAM,CAAC;GAC/C;GAEA,MAAM,UAAU;IAAE;IAAS;IAAQ;IAAQ,OAAO;GAAY;GAE9D,IAAI,SAAS,aACX,OAAO,uBAAuB,WAAW,YAAY,OAAO;GAG9D,IAAI,SAAS,OAAO,OAAO,iBAAiB,WAAW,YAAY,OAAO;EAG5E;EAAG,KAAA;GAAC;GAAW;GAAO;GAAM;GAAQ;GAAO;GAAS;GAAQ;EAAQ;EApBtC,EAAA,KAAA;EAAvB,EAAA,KAAA;EAAiC,EAAA,KAAA;EAWpB,EAAA,KAAA;EANgC,EAAA,KAAA;EAGrC,EAAA,KAAA;EARM,EAAA,KAAA;EAKuC,EAAA,KAAA;;;;;;;CAN5D,UAAUD,IAqBPC,EAAkE;CAErE,OAAO;AACT;;AAUA,MAAa,eAAe"}