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

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

@@ -1,23 +1,62 @@
+import { c } from "react-compiler-runtime";
 import { createContext, useContext, useSyncExternalStore } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/ui/slider/context.tsx
 const SliderContext = createContext(null);
-function SliderProvider({ value, children }) {
-	return /* @__PURE__ */ jsx(SliderContext.Provider, {
-		value,
-		children
-	});
+function SliderProvider(t0) {
+	const $ = c(3);
+	const { value, children } = t0;
+	let t1;
+	if ($[0] !== children || $[1] !== value) {
+		t1 = /* @__PURE__ */ jsx(SliderContext.Provider, {
+			value,
+			children
+		});
+		$[0] = children;
+		$[1] = value;
+		$[2] = t1;
+	} else t1 = $[2];
+	return t1;
 }
 function useSliderContext() {
 	const ctx = useContext(SliderContext);
 	if (!ctx) throw new Error("Slider compound components must be used within a Slider.Root");
 	return ctx;
 }
-function useSliderPointerValue(enabled = true) {
+function useSliderPointerValue(t0) {
+	const $ = c(9);
+	const enabled = t0 === void 0 ? true : t0;
 	const context = useSliderContext();
-	const percent = useSyncExternalStore((onChange) => context.input?.subscribe(onChange) ?? (() => {}), () => enabled ? context.input?.current.pointerPercent ?? null : null, () => enabled ? context.input?.current.pointerPercent ?? null : null);
-	return percent === null ? context.pointerValue : context.getPointerValue?.(percent) ?? context.pointerValue;
+	let t1;
+	if ($[0] !== context.input) {
+		t1 = (onChange) => context.input?.subscribe(onChange) ?? _temp;
+		$[0] = context.input;
+		$[1] = t1;
+	} else t1 = $[1];
+	let t2;
+	let t3;
+	if ($[2] !== context.input?.current || $[3] !== enabled) {
+		t2 = () => enabled ? context.input?.current.pointerPercent ?? null : null;
+		t3 = () => enabled ? context.input?.current.pointerPercent ?? null : null;
+		$[2] = context.input?.current;
+		$[3] = enabled;
+		$[4] = t2;
+		$[5] = t3;
+	} else {
+		t2 = $[4];
+		t3 = $[5];
+	}
+	const percent = useSyncExternalStore(t1, t2, t3);
+	let t4;
+	if ($[6] !== context || $[7] !== percent) {
+		t4 = percent === null ? context.pointerValue : context.getPointerValue?.(percent) ?? context.pointerValue;
+		$[6] = context;
+		$[7] = percent;
+		$[8] = t4;
+	} else t4 = $[8];
+	return t4;
 }
+function _temp() {}
 //#endregion
 export { SliderProvider, useSliderContext, useSliderPointerValue };
 

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

@@ -1 +1 @@
-{"version":3,"file":"context.js","names":[],"sources":["../../../../src/ui/slider/context.tsx"],"sourcesContent":["import type { SliderInput, SliderState, StateAttrMap } from '@videojs/core';\nimport type { SliderThumbProps } from '@videojs/core/dom';\nimport type { State } from '@videojs/store';\nimport type { ProviderProps, RefCallback } from 'react';\nimport { createContext, useContext, useSyncExternalStore } from 'react';\n\nexport interface SliderContextValue {\n  state: SliderState;\n  /** Pointer position converted to the value domain (not 0–100 percent). */\n  pointerValue: number;\n  input?: State<SliderInput> | undefined;\n  getPointerValue?: ((percent: number) => number) | undefined;\n  thumbRef: RefCallback<HTMLElement>;\n  thumbProps: SliderThumbProps;\n  stateAttrMap: StateAttrMap<SliderState>;\n  getAttrs: (state: SliderState) => object;\n  formatValue?: ((value: number, type: 'current' | 'pointer') => string) | undefined;\n}\n\nconst SliderContext = createContext<SliderContextValue | null>(null);\n\ntype SliderProviderProps = ProviderProps<SliderContextValue>;\n\nexport function SliderProvider({ value, children }: SliderProviderProps) {\n  return <SliderContext.Provider value={value}>{children}</SliderContext.Provider>;\n}\n\nexport function useSliderContext(): SliderContextValue {\n  const ctx = useContext(SliderContext);\n  if (!ctx) throw new Error('Slider compound components must be used within a Slider.Root');\n\n  return ctx;\n}\n\nexport function useSliderPointerValue(enabled = true): number {\n  const context = useSliderContext();\n  const percent = useSyncExternalStore(\n    (onChange) => context.input?.subscribe(onChange) ?? (() => {}),\n    () => (enabled ? (context.input?.current.pointerPercent ?? null) : null),\n    () => (enabled ? (context.input?.current.pointerPercent ?? null) : null)\n  );\n\n  return percent === null ? context.pointerValue : (context.getPointerValue?.(percent) ?? context.pointerValue);\n}\n"],"mappings":";;;AAmBA,MAAM,gBAAgB,cAAyC,IAAI;AAInE,SAAgB,eAAe,EAAE,OAAO,YAAiC;CACvE,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;AAEA,SAAgB,sBAAsB,UAAU,MAAc;CAC5D,MAAM,UAAU,iBAAiB;CACjC,MAAM,UAAU,sBACb,aAAa,QAAQ,OAAO,UAAU,QAAQ,YAAY,CAAC,UACrD,UAAW,QAAQ,OAAO,QAAQ,kBAAkB,OAAQ,YAC5D,UAAW,QAAQ,OAAO,QAAQ,kBAAkB,OAAQ,IACrE;CAEA,OAAO,YAAY,OAAO,QAAQ,eAAgB,QAAQ,kBAAkB,OAAO,KAAK,QAAQ;AAClG"}
+{"version":3,"file":"context.js","names":["{ value, children }: SliderProviderProps","<SliderContext.Provider value={value}>{children}</SliderContext.Provider>","SliderContext.Provider","enabled = true","(onChange) => context.input?.subscribe(onChange) ?? (() => {})","input","() => {}","() => (enabled ? (context.input?.current.pointerPercent ?? null) : null)","current","percent === null ? context.pointerValue : (context.getPointerValue?.(percent) ?? context.pointerValue)","context.pointerValue"],"sources":["../../../../src/ui/slider/context.tsx"],"sourcesContent":["import type { SliderInput, SliderState, StateAttrMap } from '@videojs/core';\nimport type { SliderThumbProps } from '@videojs/core/dom';\nimport type { State } from '@videojs/store';\nimport type { ProviderProps, RefCallback } from 'react';\nimport { createContext, useContext, useSyncExternalStore } from 'react';\n\nexport interface SliderContextValue {\n  state: SliderState;\n  /** Pointer position converted to the value domain (not 0–100 percent). */\n  pointerValue: number;\n  input?: State<SliderInput> | undefined;\n  getPointerValue?: ((percent: number) => number) | undefined;\n  thumbRef: RefCallback<HTMLElement>;\n  thumbProps: SliderThumbProps;\n  stateAttrMap: StateAttrMap<SliderState>;\n  getAttrs: (state: SliderState) => object;\n  formatValue?: ((value: number, type: 'current' | 'pointer') => string) | undefined;\n}\n\nconst SliderContext = createContext<SliderContextValue | null>(null);\n\ntype SliderProviderProps = ProviderProps<SliderContextValue>;\n\nexport function SliderProvider({ value, children }: SliderProviderProps) {\n  return <SliderContext.Provider value={value}>{children}</SliderContext.Provider>;\n}\n\nexport function useSliderContext(): SliderContextValue {\n  const ctx = useContext(SliderContext);\n  if (!ctx) throw new Error('Slider compound components must be used within a Slider.Root');\n\n  return ctx;\n}\n\nexport function useSliderPointerValue(enabled = true): number {\n  const context = useSliderContext();\n  const percent = useSyncExternalStore(\n    (onChange) => context.input?.subscribe(onChange) ?? (() => {}),\n    () => (enabled ? (context.input?.current.pointerPercent ?? null) : null),\n    () => (enabled ? (context.input?.current.pointerPercent ?? null) : null)\n  );\n\n  return percent === null ? context.pointerValue : (context.getPointerValue?.(percent) ?? context.pointerValue);\n}\n"],"mappings":";;;;AAmBA,MAAM,gBAAgB,cAAyC,IAAI;AAInE,SAAgB,eAAA,IAAyD;;CAA1C,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;AAEA,SAAgB,sBAAA,IAA8C;;CAAxB,MAAA,UAAA,OAAA,KAAA,IAAU,OAAVE;CACpC,MAAM,UAAU,iBAAiB;CAE/BC,IAAAA;CAAsBC,IAAAA,EAAAA,OAAAA,QAAAA,OAAAA;EAAtB,MAAC,aAAa,QAAQ,OAAO,UAAU,QAAQ,KAAMC;EAA/BD,EAAAA,KAAAA,QAAAA;;;CACtBE,IAAAA;CACAA,IAAAA;CADiCC,IAAAA,EAAAA,OAAAA,QAAP,OAAO,WAAA,EAAA,OAA1B,SAAA;EAAP,WAAO,UAAW,QAAQ,OAAO,QAAQ,kBAAkB,OAAQ;EACnE,WAAO,UAAW,QAAQ,OAAO,QAAQ,kBAAkB,OAAQ;EADlCA,EAAAA,KAAAA,QAAP,OAAO;EAA1B,EAAA,KAAA;;;;;;;CAFT,MAAM,UAAU,qBACdJ,IACAG,IACAA,EACF;CAEOE,IAAAA;CAAmBC,IAAAA,EAAAA,OAAAA,WAAAA,EAAAA,OAAnB,SAAA;EAAY,KAAA,YAAA,OAAO,QAAQ,eAAgB,QAAQ,kBAAkB,OAAO,KAAK,QAAQ;EAAtEA,EAAAA,KAAAA;EAAnB,EAAA,KAAA;;;CAAP,OAAOD;AACT;AANyD,SAAA,QAAM,CAAC"}

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

@@ -5,12 +5,15 @@ import { SliderProvider } from "./context.js";
 import { SliderCore, SliderDataAttrs } from "@videojs/core";
 import { getSliderCSSVars } from "@videojs/core/dom";
 import { translateText } from "@videojs/core/i18n";
+import { c } from "react-compiler-runtime";
 import { forwardRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/ui/slider/root.tsx
 const SliderRoot = forwardRef(function SliderRoot(componentProps, forwardedRef) {
-	const { render, className, style, label, min, max, step, largeStep, orientation, disabled, thumbAlignment, value = 0, onValueChange, onValueCommit, onDragStart, onDragEnd, ...elementProps } = componentProps;
-	const [core] = useState(() => new SliderCore());
+	const $ = c(47);
+	const { render, className, style, label, min, max, step, largeStep, orientation, disabled, thumbAlignment, value: t0, onValueChange, onValueCommit, onDragStart, onDragEnd, ...elementProps } = componentProps;
+	const value = t0 === void 0 ? 0 : t0;
+	const [core] = useState(_temp);
 	const translator = useTranslator();
 	core.setProps({
 		label,
@@ -22,60 +25,166 @@ const SliderRoot = forwardRef(function SliderRoot(componentProps, forwardedRef)
 		disabled,
 		thumbAlignment
 	});
-	const { state, input, cssVars, rootRef, thumbRef: sliderThumbRef, rootProps, rootStyle, thumbProps } = useSlider({
-		computeState: (input) => {
+	let t1;
+	let t2;
+	if ($[0] !== core || $[1] !== value) {
+		t1 = (input) => {
 			core.setInput(input);
 			return core.getSliderState(value);
-		},
-		getPercent: () => core.percentFromValue(value),
-		getStepPercent: () => core.getStepPercent(),
-		getLargeStepPercent: () => core.getLargeStepPercent(),
-		orientation,
-		disabled,
-		adjustPercent: (rawPercent, thumbSize, trackSize) => core.adjustPercentForAlignment(rawPercent, thumbSize, trackSize),
-		getCSSVars: getSliderCSSVars,
-		onValueChange: (percent) => onValueChange?.(core.valueFromPercent(percent)),
-		onValueCommit: (percent) => onValueCommit?.(core.valueFromPercent(percent)),
-		onDragStart,
-		onDragEnd
-	});
-	return /* @__PURE__ */ jsx(SliderProvider, {
-		value: {
+		};
+		t2 = () => core.percentFromValue(value);
+		$[0] = core;
+		$[1] = value;
+		$[2] = t1;
+		$[3] = t2;
+	} else {
+		t1 = $[2];
+		t2 = $[3];
+	}
+	let t3;
+	let t4;
+	if ($[4] !== core) {
+		t3 = () => core.getStepPercent();
+		t4 = () => core.getLargeStepPercent();
+		$[4] = core;
+		$[5] = t3;
+		$[6] = t4;
+	} else {
+		t3 = $[5];
+		t4 = $[6];
+	}
+	let t5;
+	if ($[7] !== core) {
+		t5 = (rawPercent, thumbSize, trackSize) => core.adjustPercentForAlignment(rawPercent, thumbSize, trackSize);
+		$[7] = core;
+		$[8] = t5;
+	} else t5 = $[8];
+	let t6;
+	if ($[9] !== core || $[10] !== onValueChange) {
+		t6 = (percent) => onValueChange?.(core.valueFromPercent(percent));
+		$[9] = core;
+		$[10] = onValueChange;
+		$[11] = t6;
+	} else t6 = $[11];
+	let t7;
+	if ($[12] !== core || $[13] !== onValueCommit) {
+		t7 = (percent_0) => onValueCommit?.(core.valueFromPercent(percent_0));
+		$[12] = core;
+		$[13] = onValueCommit;
+		$[14] = t7;
+	} else t7 = $[14];
+	let t8;
+	if ($[15] !== disabled || $[16] !== onDragEnd || $[17] !== onDragStart || $[18] !== orientation || $[19] !== t1 || $[20] !== t2 || $[21] !== t3 || $[22] !== t4 || $[23] !== t5 || $[24] !== t6 || $[25] !== t7) {
+		t8 = {
+			computeState: t1,
+			getPercent: t2,
+			getStepPercent: t3,
+			getLargeStepPercent: t4,
+			orientation,
+			disabled,
+			adjustPercent: t5,
+			getCSSVars: getSliderCSSVars,
+			onValueChange: t6,
+			onValueCommit: t7,
+			onDragStart,
+			onDragEnd
+		};
+		$[15] = disabled;
+		$[16] = onDragEnd;
+		$[17] = onDragStart;
+		$[18] = orientation;
+		$[19] = t1;
+		$[20] = t2;
+		$[21] = t3;
+		$[22] = t4;
+		$[23] = t5;
+		$[24] = t6;
+		$[25] = t7;
+		$[26] = t8;
+	} else t8 = $[26];
+	const { state, input: input_0, cssVars, rootRef, thumbRef: sliderThumbRef, rootProps, rootStyle, thumbProps } = useSlider(t8);
+	const T0 = SliderProvider;
+	let t9;
+	if ($[27] !== core || $[28] !== state.pointerPercent) {
+		t9 = core.valueFromPercent(state.pointerPercent);
+		$[27] = core;
+		$[28] = state.pointerPercent;
+		$[29] = t9;
+	} else t9 = $[29];
+	let t10;
+	if ($[30] !== core) {
+		t10 = (percent_1) => core.valueFromPercent(percent_1);
+		$[30] = core;
+		$[31] = t10;
+	} else t10 = $[31];
+	let t11;
+	if ($[32] !== core || $[33] !== translator) {
+		t11 = (sliderState) => {
+			const attrs = core.getAttrs(sliderState);
+			return {
+				...attrs,
+				"aria-label": translateText(attrs["aria-label"], translator)
+			};
+		};
+		$[32] = core;
+		$[33] = translator;
+		$[34] = t11;
+	} else t11 = $[34];
+	let t12;
+	if ($[35] !== input_0 || $[36] !== sliderThumbRef || $[37] !== state || $[38] !== t10 || $[39] !== t11 || $[40] !== t9 || $[41] !== thumbProps) {
+		t12 = {
 			state,
-			pointerValue: core.valueFromPercent(state.pointerPercent),
-			input,
-			getPointerValue: (percent) => core.valueFromPercent(percent),
+			pointerValue: t9,
+			input: input_0,
+			getPointerValue: t10,
 			thumbRef: sliderThumbRef,
 			thumbProps,
 			stateAttrMap: SliderDataAttrs,
-			getAttrs: (sliderState) => {
-				const attrs = core.getAttrs(sliderState);
-				return {
-					...attrs,
-					"aria-label": translateText(attrs["aria-label"], translator)
-				};
-			},
+			getAttrs: t11,
 			formatValue: void 0
-		},
-		children: renderElement("div", {
-			render,
-			className,
-			style
-		}, {
-			state,
-			stateAttrMap: SliderDataAttrs,
-			ref: [forwardedRef, rootRef],
-			props: [
-				{ style: {
-					...cssVars,
-					...rootStyle
-				} },
-				rootProps,
-				elementProps
-			]
-		})
+		};
+		$[35] = input_0;
+		$[36] = sliderThumbRef;
+		$[37] = state;
+		$[38] = t10;
+		$[39] = t11;
+		$[40] = t9;
+		$[41] = thumbProps;
+		$[42] = t12;
+	} else t12 = $[42];
+	const t13 = renderElement("div", {
+		render,
+		className,
+		style
+	}, {
+		state,
+		stateAttrMap: SliderDataAttrs,
+		ref: [forwardedRef, rootRef],
+		props: [
+			{ style: {
+				...cssVars,
+				...rootStyle
+			} },
+			rootProps,
+			elementProps
+		]
 	});
+	let t14;
+	if ($[43] !== T0 || $[44] !== t12 || $[45] !== t13) {
+		t14 = /* @__PURE__ */ jsx(T0, {
+			value: t12,
+			children: t13
+		});
+		$[43] = T0;
+		$[44] = t12;
+		$[45] = t13;
+		$[46] = t14;
+	} else t14 = $[46];
+	return t14;
 });
+function _temp() {
+	return new SliderCore();
+}
 //#endregion
 export { SliderRoot };
 

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

@@ -1 +1 @@
-{"version":3,"file":"root.js","names":[],"sources":["../../../../src/ui/slider/root.tsx"],"sourcesContent":["import { SliderCore, SliderDataAttrs } from '@videojs/core';\nimport { getSliderCSSVars } from '@videojs/core/dom';\nimport { translateText } from '@videojs/core/i18n';\nimport type { ForwardedRef } from 'react';\nimport { forwardRef, useState } from 'react';\n\nimport { useTranslator } from '../../i18n/context';\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { useSlider } from '../hooks/use-slider';\nimport { SliderProvider } from './context';\n\nexport interface SliderRootProps extends UIComponentProps<'div', SliderCore.State>, SliderCore.Props {\n  onValueChange?: ((value: number) => void) | undefined;\n  onValueCommit?: ((value: number) => void) | undefined;\n  onDragStart?: (() => void) | undefined;\n  onDragEnd?: (() => void) | undefined;\n}\n\nexport const SliderRoot = forwardRef(function SliderRoot(\n  componentProps: SliderRootProps,\n  forwardedRef: ForwardedRef<HTMLDivElement>\n) {\n  const {\n    render,\n    className,\n    style,\n    label,\n    min,\n    max,\n    step,\n    largeStep,\n    orientation,\n    disabled,\n    thumbAlignment,\n    value = 0,\n    onValueChange,\n    onValueCommit,\n    onDragStart,\n    onDragEnd,\n    ...elementProps\n  } = componentProps;\n\n  const [core] = useState(() => new SliderCore());\n  const translator = useTranslator();\n\n  core.setProps({ label, min, max, step, largeStep, orientation, disabled, thumbAlignment });\n\n  const {\n    state,\n    input,\n    cssVars,\n    rootRef,\n    thumbRef: sliderThumbRef,\n    rootProps,\n    rootStyle,\n    thumbProps,\n  } = useSlider({\n    computeState: (input) => {\n      core.setInput(input);\n      return core.getSliderState(value);\n    },\n    getPercent: () => core.percentFromValue(value),\n    getStepPercent: () => core.getStepPercent(),\n    getLargeStepPercent: () => core.getLargeStepPercent(),\n    orientation,\n    disabled,\n    adjustPercent: (rawPercent, thumbSize, trackSize) =>\n      core.adjustPercentForAlignment(rawPercent, thumbSize, trackSize),\n    getCSSVars: getSliderCSSVars,\n    onValueChange: (percent) => onValueChange?.(core.valueFromPercent(percent)),\n    onValueCommit: (percent) => onValueCommit?.(core.valueFromPercent(percent)),\n    onDragStart,\n    onDragEnd,\n  });\n\n  return (\n    <SliderProvider\n      value={{\n        state,\n        pointerValue: core.valueFromPercent(state.pointerPercent),\n        input,\n        getPointerValue: (percent) => core.valueFromPercent(percent),\n        thumbRef: sliderThumbRef,\n        thumbProps,\n        stateAttrMap: SliderDataAttrs,\n        getAttrs: (sliderState) => {\n          const attrs = core.getAttrs(sliderState);\n\n          return { ...attrs, 'aria-label': translateText(attrs['aria-label'], translator) };\n        },\n        formatValue: undefined,\n      }}\n    >\n      {renderElement(\n        'div',\n        { render, className, style },\n        {\n          state,\n          stateAttrMap: SliderDataAttrs,\n          ref: [forwardedRef, rootRef],\n          props: [{ style: { ...cssVars, ...rootStyle } }, rootProps, elementProps],\n        }\n      )}\n    </SliderProvider>\n  );\n});\n\nexport namespace SliderRoot {\n  export type Props = SliderRootProps;\n  export type State = SliderCore.State;\n}\n"],"mappings":";;;;;;;;;;AAmBA,MAAa,aAAa,WAAW,SAAS,WAC5C,gBACA,cACA;CACA,MAAM,EACJ,QACA,WACA,OACA,OACA,KACA,KACA,MACA,WACA,aACA,UACA,gBACA,QAAQ,GACR,eACA,eACA,aACA,WACA,GAAG,iBACD;CAEJ,MAAM,CAAC,QAAQ,eAAe,IAAI,WAAW,CAAC;CAC9C,MAAM,aAAa,cAAc;CAEjC,KAAK,SAAS;EAAE;EAAO;EAAK;EAAK;EAAM;EAAW;EAAa;EAAU;CAAe,CAAC;CAEzF,MAAM,EACJ,OACA,OACA,SACA,SACA,UAAU,gBACV,WACA,WACA,eACE,UAAU;EACZ,eAAe,UAAU;GACvB,KAAK,SAAS,KAAK;GACnB,OAAO,KAAK,eAAe,KAAK;EAClC;EACA,kBAAkB,KAAK,iBAAiB,KAAK;EAC7C,sBAAsB,KAAK,eAAe;EAC1C,2BAA2B,KAAK,oBAAoB;EACpD;EACA;EACA,gBAAgB,YAAY,WAAW,cACrC,KAAK,0BAA0B,YAAY,WAAW,SAAS;EACjE,YAAY;EACZ,gBAAgB,YAAY,gBAAgB,KAAK,iBAAiB,OAAO,CAAC;EAC1E,gBAAgB,YAAY,gBAAgB,KAAK,iBAAiB,OAAO,CAAC;EAC1E;EACA;CACF,CAAC;CAED,OACE,oBAAC,gBAAD;EACE,OAAO;GACL;GACA,cAAc,KAAK,iBAAiB,MAAM,cAAc;GACxD;GACA,kBAAkB,YAAY,KAAK,iBAAiB,OAAO;GAC3D,UAAU;GACV;GACA,cAAc;GACd,WAAW,gBAAgB;IACzB,MAAM,QAAQ,KAAK,SAAS,WAAW;IAEvC,OAAO;KAAE,GAAG;KAAO,cAAc,cAAc,MAAM,eAAe,UAAU;IAAE;GAClF;GACA,aAAa,KAAA;EACf;EAEC,UAAA,cACC,OACA;GAAE;GAAQ;GAAW;EAAM,GAC3B;GACE;GACA,cAAc;GACd,KAAK,CAAC,cAAc,OAAO;GAC3B,OAAO;IAAC,EAAE,OAAO;KAAE,GAAG;KAAS,GAAG;IAAU,EAAE;IAAG;IAAW;GAAY;EAC1E,CACF;CACc,CAAA;AAEpB,CAAC"}
+{"version":3,"file":"root.js","names":["value = 0","() => new SliderCore()","(input) => {\n      core.setInput(input);\n      return core.getSliderState(value);\n    }","() => core.percentFromValue(value)","() => core.getStepPercent()","() => core.getLargeStepPercent()","(rawPercent, thumbSize, trackSize) =>\n      core.adjustPercentForAlignment(rawPercent, thumbSize, trackSize)","(percent) => onValueChange?.(core.valueFromPercent(percent))","(percent) => onValueCommit?.(core.valueFromPercent(percent))","percent","{\n    computeState: (input) => {\n      core.setInput(input);\n      return core.getSliderState(value);\n    },\n    getPercent: () => core.percentFromValue(value),\n    getStepPercent: () => core.getStepPercent(),\n    getLargeStepPercent: () => core.getLargeStepPercent(),\n    orientation,\n    disabled,\n    adjustPercent: (rawPercent, thumbSize, trackSize) =>\n      core.adjustPercentForAlignment(rawPercent, thumbSize, trackSize),\n    getCSSVars: getSliderCSSVars,\n    onValueChange: (percent) => onValueChange?.(core.valueFromPercent(percent)),\n    onValueCommit: (percent) => onValueCommit?.(core.valueFromPercent(percent)),\n    onDragStart,\n    onDragEnd,\n  }","core.valueFromPercent(state.pointerPercent)","pointerPercent","(percent) => core.valueFromPercent(percent)","(sliderState) => {\n          const attrs = core.getAttrs(sliderState);\n\n          return { ...attrs, 'aria-label': translateText(attrs['aria-label'], translator) };\n        }","{\n        state,\n        pointerValue: core.valueFromPercent(state.pointerPercent),\n        input,\n        getPointerValue: (percent) => core.valueFromPercent(percent),\n        thumbRef: sliderThumbRef,\n        thumbProps,\n        stateAttrMap: SliderDataAttrs,\n        getAttrs: (sliderState) => {\n          const attrs = core.getAttrs(sliderState);\n\n          return { ...attrs, 'aria-label': translateText(attrs['aria-label'], translator) };\n        },\n        formatValue: undefined,\n      }","input","<SliderProvider\n      value={{\n        state,\n        pointerValue: core.valueFromPercent(state.pointerPercent),\n        input,\n        getPointerValue: (percent) => core.valueFromPercent(percent),\n        thumbRef: sliderThumbRef,\n        thumbProps,\n        stateAttrMap: SliderDataAttrs,\n        getAttrs: (sliderState) => {\n          const attrs = core.getAttrs(sliderState);\n\n          return { ...attrs, 'aria-label': translateText(attrs['aria-label'], translator) };\n        },\n        formatValue: undefined,\n      }}\n    >\n      {renderElement(\n        'div',\n        { render, className, style },\n        {\n          state,\n          stateAttrMap: SliderDataAttrs,\n          ref: [forwardedRef, rootRef],\n          props: [{ style: { ...cssVars, ...rootStyle } }, rootProps, elementProps],\n        }\n      )}\n    </SliderProvider>","SliderProvider","renderElement(\n        'div',\n        { render, className, style },\n        {\n          state,\n          stateAttrMap: SliderDataAttrs,\n          ref: [forwardedRef, rootRef],\n          props: [{ style: { ...cssVars, ...rootStyle } }, rootProps, elementProps],\n        }\n      )"],"sources":["../../../../src/ui/slider/root.tsx"],"sourcesContent":["import { SliderCore, SliderDataAttrs } from '@videojs/core';\nimport { getSliderCSSVars } from '@videojs/core/dom';\nimport { translateText } from '@videojs/core/i18n';\nimport type { ForwardedRef } from 'react';\nimport { forwardRef, useState } from 'react';\n\nimport { useTranslator } from '../../i18n/context';\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { useSlider } from '../hooks/use-slider';\nimport { SliderProvider } from './context';\n\nexport interface SliderRootProps extends UIComponentProps<'div', SliderCore.State>, SliderCore.Props {\n  onValueChange?: ((value: number) => void) | undefined;\n  onValueCommit?: ((value: number) => void) | undefined;\n  onDragStart?: (() => void) | undefined;\n  onDragEnd?: (() => void) | undefined;\n}\n\nexport const SliderRoot = forwardRef(function SliderRoot(\n  componentProps: SliderRootProps,\n  forwardedRef: ForwardedRef<HTMLDivElement>\n) {\n  const {\n    render,\n    className,\n    style,\n    label,\n    min,\n    max,\n    step,\n    largeStep,\n    orientation,\n    disabled,\n    thumbAlignment,\n    value = 0,\n    onValueChange,\n    onValueCommit,\n    onDragStart,\n    onDragEnd,\n    ...elementProps\n  } = componentProps;\n\n  const [core] = useState(() => new SliderCore());\n  const translator = useTranslator();\n\n  core.setProps({ label, min, max, step, largeStep, orientation, disabled, thumbAlignment });\n\n  const {\n    state,\n    input,\n    cssVars,\n    rootRef,\n    thumbRef: sliderThumbRef,\n    rootProps,\n    rootStyle,\n    thumbProps,\n  } = useSlider({\n    computeState: (input) => {\n      core.setInput(input);\n      return core.getSliderState(value);\n    },\n    getPercent: () => core.percentFromValue(value),\n    getStepPercent: () => core.getStepPercent(),\n    getLargeStepPercent: () => core.getLargeStepPercent(),\n    orientation,\n    disabled,\n    adjustPercent: (rawPercent, thumbSize, trackSize) =>\n      core.adjustPercentForAlignment(rawPercent, thumbSize, trackSize),\n    getCSSVars: getSliderCSSVars,\n    onValueChange: (percent) => onValueChange?.(core.valueFromPercent(percent)),\n    onValueCommit: (percent) => onValueCommit?.(core.valueFromPercent(percent)),\n    onDragStart,\n    onDragEnd,\n  });\n\n  return (\n    <SliderProvider\n      value={{\n        state,\n        pointerValue: core.valueFromPercent(state.pointerPercent),\n        input,\n        getPointerValue: (percent) => core.valueFromPercent(percent),\n        thumbRef: sliderThumbRef,\n        thumbProps,\n        stateAttrMap: SliderDataAttrs,\n        getAttrs: (sliderState) => {\n          const attrs = core.getAttrs(sliderState);\n\n          return { ...attrs, 'aria-label': translateText(attrs['aria-label'], translator) };\n        },\n        formatValue: undefined,\n      }}\n    >\n      {renderElement(\n        'div',\n        { render, className, style },\n        {\n          state,\n          stateAttrMap: SliderDataAttrs,\n          ref: [forwardedRef, rootRef],\n          props: [{ style: { ...cssVars, ...rootStyle } }, rootProps, elementProps],\n        }\n      )}\n    </SliderProvider>\n  );\n});\n\nexport namespace SliderRoot {\n  export type Props = SliderRootProps;\n  export type State = SliderCore.State;\n}\n"],"mappings":"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"}

package/dist/dev/ui/slider/thumbnail/root.js

@@ -1,5 +1,6 @@
 import { useSliderPointerValue } from "../context.js";
 import { ThumbnailRoot } from "../../thumbnail/root.js";
+import { c } from "react-compiler-runtime";
 import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/ui/slider/thumbnail/root.tsx
@@ -10,12 +11,21 @@ import { jsx } from "react/jsx-runtime";
 * overlays, or temporary presentation layers.
 */
 const SliderThumbnailRoot = forwardRef(function SliderThumbnailRoot(componentProps, forwardedRef) {
+	const $ = c(4);
 	const pointerValue = useSliderPointerValue();
-	return /* @__PURE__ */ jsx(ThumbnailRoot, {
-		ref: forwardedRef,
-		...componentProps,
-		time: pointerValue
-	});
+	let t0;
+	if ($[0] !== componentProps || $[1] !== forwardedRef || $[2] !== pointerValue) {
+		t0 = /* @__PURE__ */ jsx(ThumbnailRoot, {
+			ref: forwardedRef,
+			...componentProps,
+			time: pointerValue
+		});
+		$[0] = componentProps;
+		$[1] = forwardedRef;
+		$[2] = pointerValue;
+		$[3] = t0;
+	} else t0 = $[3];
+	return t0;
 });
 //#endregion
 export { SliderThumbnailRoot };

package/dist/dev/ui/slider/thumbnail/root.js.map

@@ -1 +1 @@
-{"version":3,"file":"root.js","names":["Thumbnail.Root"],"sources":["../../../../../src/ui/slider/thumbnail/root.tsx"],"sourcesContent":["import type { ThumbnailCore } from '@videojs/core';\nimport { forwardRef, type ForwardedRef } from 'react';\n\nimport { Thumbnail } from '../../thumbnail';\nimport type { ThumbnailRootProps } from '../../thumbnail/root';\nimport { useSliderPointerValue } from '../context';\n\nexport interface SliderThumbnailRootProps extends Omit<ThumbnailRootProps, 'time'> {}\n\n/**\n * Resolves, sizes, and clips the thumbnail at the slider pointer.\n *\n * Render `Slider.Thumbnail.Image` inside it for the controlled image. Other children can provide loading indicators,\n * overlays, or temporary presentation layers.\n */\nexport const SliderThumbnailRoot = forwardRef(function SliderThumbnailRoot(\n  componentProps: SliderThumbnailRootProps,\n  forwardedRef: ForwardedRef<HTMLDivElement>\n) {\n  const pointerValue = useSliderPointerValue();\n\n  return <Thumbnail.Root ref={forwardedRef} {...componentProps} time={pointerValue} />;\n});\n\nexport namespace SliderThumbnailRoot {\n  export type Props = SliderThumbnailRootProps;\n  export type State = ThumbnailCore.State;\n}\n"],"mappings":";;;;;;;;;;;AAeA,MAAa,sBAAsB,WAAW,SAAS,oBACrD,gBACA,cACA;CACA,MAAM,eAAe,sBAAsB;CAE3C,OAAO,oBAACA,eAAD;EAAgB,KAAK;EAAc,GAAI;EAAgB,MAAM;CAAe,CAAA;AACrF,CAAC"}
+{"version":3,"file":"root.js","names":["<Thumbnail.Root ref={forwardedRef} {...componentProps} time={pointerValue} />","Thumbnail.Root"],"sources":["../../../../../src/ui/slider/thumbnail/root.tsx"],"sourcesContent":["import type { ThumbnailCore } from '@videojs/core';\nimport { forwardRef, type ForwardedRef } from 'react';\n\nimport { Thumbnail } from '../../thumbnail';\nimport type { ThumbnailRootProps } from '../../thumbnail/root';\nimport { useSliderPointerValue } from '../context';\n\nexport interface SliderThumbnailRootProps extends Omit<ThumbnailRootProps, 'time'> {}\n\n/**\n * Resolves, sizes, and clips the thumbnail at the slider pointer.\n *\n * Render `Slider.Thumbnail.Image` inside it for the controlled image. Other children can provide loading indicators,\n * overlays, or temporary presentation layers.\n */\nexport const SliderThumbnailRoot = forwardRef(function SliderThumbnailRoot(\n  componentProps: SliderThumbnailRootProps,\n  forwardedRef: ForwardedRef<HTMLDivElement>\n) {\n  const pointerValue = useSliderPointerValue();\n\n  return <Thumbnail.Root ref={forwardedRef} {...componentProps} time={pointerValue} />;\n});\n\nexport namespace SliderThumbnailRoot {\n  export type Props = SliderThumbnailRootProps;\n  export type State = ThumbnailCore.State;\n}\n"],"mappings":";;;;;;;;;;;;AAeA,MAAa,sBAAsB,WAAW,SAAS,oBACrD,gBACA,cACA;;CACA,MAAM,eAAe,sBAAsB;CAEpCA,IAAAA;CAAuC,IAAA,EAAA,OAAA,kBAAA,EAAA,OAAlB,gBAAA,EAAA,OAAwC,cAAA;EAA7D,KAAA,oBAACC,eAAD;GAAgB,KAAK;GAAc,GAAI;GAAgB,MAAM;EAAe,CAAA;EAArC,EAAA,KAAA;EAAlB,EAAA,KAAA;EAAwC,EAAA,KAAA;;;CAApE,OAAOD;AACT,CAAC"}

package/dist/dev/ui/status-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/status-indicator/context.tsx
 const StatusIndicatorContext = createContext(null);
-function StatusIndicatorProvider({ value, children }) {
-	return /* @__PURE__ */ jsx(StatusIndicatorContext.Provider, {
-		value,
-		children
-	});
+function StatusIndicatorProvider(t0) {
+	const $ = c(3);
+	const { value, children } = t0;
+	let t1;
+	if ($[0] !== children || $[1] !== value) {
+		t1 = /* @__PURE__ */ jsx(StatusIndicatorContext.Provider, {
+			value,
+			children
+		});
+		$[0] = children;
+		$[1] = value;
+		$[2] = t1;
+	} else t1 = $[2];
+	return t1;
 }
 function useStatusIndicatorContext() {
 	const ctx = useContext(StatusIndicatorContext);

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

@@ -1 +1 @@
-{"version":3,"file":"context.js","names":[],"sources":["../../../../src/ui/status-indicator/context.tsx"],"sourcesContent":["import type { StatusIndicatorCore } from '@videojs/core';\nimport { createContext, type ProviderProps, useContext } from 'react';\n\nexport interface StatusIndicatorContextValue {\n  state: StatusIndicatorCore.State;\n}\n\nconst StatusIndicatorContext = createContext<StatusIndicatorContextValue | null>(null);\n\nexport function StatusIndicatorProvider({ value, children }: ProviderProps<StatusIndicatorContextValue>) {\n  return <StatusIndicatorContext.Provider value={value}>{children}</StatusIndicatorContext.Provider>;\n}\n\nexport function useStatusIndicatorContext(): StatusIndicatorContextValue {\n  const ctx = useContext(StatusIndicatorContext);\n  if (!ctx) throw new Error('StatusIndicator child compounds must be used within a StatusIndicator.Root');\n\n  return ctx;\n}\n"],"mappings":";;;AAOA,MAAM,yBAAyB,cAAkD,IAAI;AAErF,SAAgB,wBAAwB,EAAE,OAAO,YAAwD;CACvG,OAAO,oBAAC,uBAAuB,UAAxB;EAAwC;EAAQ;CAA0C,CAAA;AACnG;AAEA,SAAgB,4BAAyD;CACvE,MAAM,MAAM,WAAW,sBAAsB;CAC7C,IAAI,CAAC,KAAK,MAAM,IAAI,MAAM,4EAA4E;CAEtG,OAAO;AACT"}
+{"version":3,"file":"context.js","names":["{ value, children }: ProviderProps<StatusIndicatorContextValue>","<StatusIndicatorContext.Provider value={value}>{children}</StatusIndicatorContext.Provider>","StatusIndicatorContext.Provider"],"sources":["../../../../src/ui/status-indicator/context.tsx"],"sourcesContent":["import type { StatusIndicatorCore } from '@videojs/core';\nimport { createContext, type ProviderProps, useContext } from 'react';\n\nexport interface StatusIndicatorContextValue {\n  state: StatusIndicatorCore.State;\n}\n\nconst StatusIndicatorContext = createContext<StatusIndicatorContextValue | null>(null);\n\nexport function StatusIndicatorProvider({ value, children }: ProviderProps<StatusIndicatorContextValue>) {\n  return <StatusIndicatorContext.Provider value={value}>{children}</StatusIndicatorContext.Provider>;\n}\n\nexport function useStatusIndicatorContext(): StatusIndicatorContextValue {\n  const ctx = useContext(StatusIndicatorContext);\n  if (!ctx) throw new Error('StatusIndicator child compounds must be used within a StatusIndicator.Root');\n\n  return ctx;\n}\n"],"mappings":";;;;AAOA,MAAM,yBAAyB,cAAkD,IAAI;AAErF,SAAgB,wBAAA,IAAyF;;CAAjE,MAAA,EAAE,OAAO,aAATA;CAC/BC,IAAAA;CAAgD,IAAA,EAAA,OAAA,YAAA,EAAA,OAAR,OAAA;EAAxC,KAAA,oBAACC,uBAAAA,UAAD;GAAwC;GAAQ;EAA0C,CAAA;EAA1C,EAAA,KAAA;EAAR,EAAA,KAAA;;;CAA/C,OAAOD;AACT;AAEA,SAAgB,4BAAyD;CACvE,MAAM,MAAM,WAAW,sBAAsB;CAC7C,IAAI,CAAC,KAAK,MAAM,IAAI,MAAM,4EAA4E;CAEtG,OAAO;AACT"}

package/dist/dev/ui/status-indicator/root.js

@@ -3,32 +3,72 @@ import { renderElement } from "../../utils/use-render.js";
 import { useInputIndicatorRoot } from "../input-indicator/use-input-indicator-root.js";
 import { StatusIndicatorProvider } from "./context.js";
 import { StatusIndicatorCore, StatusIndicatorDataAttrs, createInputIndicatorLabels } from "@videojs/core";
+import { c } from "react-compiler-runtime";
 import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/ui/status-indicator/root.tsx
 const StatusIndicatorRoot = forwardRef(function StatusIndicatorRoot(componentProps, forwardedRef) {
+	const $ = c(13);
 	const { render, className, style, actions, closeDelay, ...elementProps } = componentProps;
 	const translator = useTranslator();
-	const { elementRef, present, state } = useInputIndicatorRoot(() => new StatusIndicatorCore(), {
-		actions,
-		closeDelay,
-		labels: createInputIndicatorLabels(translator)
-	}, { replayOnUpdate: false });
+	let t0;
+	if ($[0] !== translator) {
+		t0 = createInputIndicatorLabels(translator);
+		$[0] = translator;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== actions || $[3] !== closeDelay || $[4] !== t0) {
+		t1 = {
+			actions,
+			closeDelay,
+			labels: t0
+		};
+		$[2] = actions;
+		$[3] = closeDelay;
+		$[4] = t0;
+		$[5] = t1;
+	} else t1 = $[5];
+	let t2;
+	if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = { replayOnUpdate: false };
+		$[6] = t2;
+	} else t2 = $[6];
+	const { elementRef, present, state } = useInputIndicatorRoot(_temp, t1, t2);
 	if (!present) return null;
-	return /* @__PURE__ */ jsx(StatusIndicatorProvider, {
-		value: { state },
-		children: renderElement("div", {
-			render,
-			className,
-			style
-		}, {
-			state,
-			stateAttrMap: StatusIndicatorDataAttrs,
-			ref: [forwardedRef, elementRef],
-			props: [elementProps]
-		})
+	const T0 = StatusIndicatorProvider;
+	let t3;
+	if ($[7] !== state) {
+		t3 = { state };
+		$[7] = state;
+		$[8] = t3;
+	} else t3 = $[8];
+	const t4 = renderElement("div", {
+		render,
+		className,
+		style
+	}, {
+		state,
+		stateAttrMap: StatusIndicatorDataAttrs,
+		ref: [forwardedRef, elementRef],
+		props: [elementProps]
 	});
+	let t5;
+	if ($[9] !== T0 || $[10] !== t3 || $[11] !== t4) {
+		t5 = /* @__PURE__ */ jsx(T0, {
+			value: t3,
+			children: t4
+		});
+		$[9] = T0;
+		$[10] = t3;
+		$[11] = t4;
+		$[12] = t5;
+	} else t5 = $[12];
+	return t5;
 });
+function _temp() {
+	return new StatusIndicatorCore();
+}
 //#endregion
 export { StatusIndicatorRoot };
 

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

@@ -1 +1 @@
-{"version":3,"file":"root.js","names":[],"sources":["../../../../src/ui/status-indicator/root.tsx"],"sourcesContent":["import { createInputIndicatorLabels, StatusIndicatorCore, StatusIndicatorDataAttrs } from '@videojs/core';\nimport type { ForwardedRef } from 'react';\nimport { forwardRef } from 'react';\n\nimport { useTranslator } from '../../i18n/context';\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { useInputIndicatorRoot } from '../input-indicator/use-input-indicator-root';\nimport { StatusIndicatorProvider } from './context';\n\nexport interface StatusIndicatorRootProps\n  extends UIComponentProps<'div', StatusIndicatorCore.State>, Omit<StatusIndicatorCore.Props, 'labels'> {}\n\nexport const StatusIndicatorRoot = forwardRef(function StatusIndicatorRoot(\n  componentProps: StatusIndicatorRootProps,\n  forwardedRef: ForwardedRef<HTMLDivElement>\n) {\n  const { render, className, style, actions, closeDelay, ...elementProps } = componentProps;\n  const translator = useTranslator();\n  const { elementRef, present, state } = useInputIndicatorRoot(\n    () => new StatusIndicatorCore(),\n    {\n      actions,\n      closeDelay,\n      labels: createInputIndicatorLabels(translator),\n    },\n    { replayOnUpdate: false }\n  );\n  if (!present) return null;\n\n  return (\n    <StatusIndicatorProvider value={{ state }}>\n      {renderElement(\n        'div',\n        { render, className, style },\n        {\n          state,\n          stateAttrMap: StatusIndicatorDataAttrs,\n          ref: [forwardedRef, elementRef],\n          props: [elementProps],\n        }\n      )}\n    </StatusIndicatorProvider>\n  );\n});\n\nexport namespace StatusIndicatorRoot {\n  export type Props = StatusIndicatorRootProps;\n  export type State = StatusIndicatorCore.State;\n}\n"],"mappings":";;;;;;;;AAaA,MAAa,sBAAsB,WAAW,SAAS,oBACrD,gBACA,cACA;CACA,MAAM,EAAE,QAAQ,WAAW,OAAO,SAAS,YAAY,GAAG,iBAAiB;CAC3E,MAAM,aAAa,cAAc;CACjC,MAAM,EAAE,YAAY,SAAS,UAAU,4BAC/B,IAAI,oBAAoB,GAC9B;EACE;EACA;EACA,QAAQ,2BAA2B,UAAU;CAC/C,GACA,EAAE,gBAAgB,MAAM,CAC1B;CACA,IAAI,CAAC,SAAS,OAAO;CAErB,OACE,oBAAC,yBAAD;EAAyB,OAAO,EAAE,MAAM;EACrC,UAAA,cACC,OACA;GAAE;GAAQ;GAAW;EAAM,GAC3B;GACE;GACA,cAAc;GACd,KAAK,CAAC,cAAc,UAAU;GAC9B,OAAO,CAAC,YAAY;EACtB,CACF;CACuB,CAAA;AAE7B,CAAC"}
+{"version":3,"file":"root.js","names":["createInputIndicatorLabels(translator)","{\n      actions,\n      closeDelay,\n      labels: createInputIndicatorLabels(translator),\n    }","{ replayOnUpdate: false }","() => new StatusIndicatorCore()","{ state }","<StatusIndicatorProvider value={{ state }}>\n      {renderElement(\n        'div',\n        { render, className, style },\n        {\n          state,\n          stateAttrMap: StatusIndicatorDataAttrs,\n          ref: [forwardedRef, elementRef],\n          props: [elementProps],\n        }\n      )}\n    </StatusIndicatorProvider>","StatusIndicatorProvider","renderElement(\n        'div',\n        { render, className, style },\n        {\n          state,\n          stateAttrMap: StatusIndicatorDataAttrs,\n          ref: [forwardedRef, elementRef],\n          props: [elementProps],\n        }\n      )"],"sources":["../../../../src/ui/status-indicator/root.tsx"],"sourcesContent":["import { createInputIndicatorLabels, StatusIndicatorCore, StatusIndicatorDataAttrs } from '@videojs/core';\nimport type { ForwardedRef } from 'react';\nimport { forwardRef } from 'react';\n\nimport { useTranslator } from '../../i18n/context';\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { useInputIndicatorRoot } from '../input-indicator/use-input-indicator-root';\nimport { StatusIndicatorProvider } from './context';\n\nexport interface StatusIndicatorRootProps\n  extends UIComponentProps<'div', StatusIndicatorCore.State>, Omit<StatusIndicatorCore.Props, 'labels'> {}\n\nexport const StatusIndicatorRoot = forwardRef(function StatusIndicatorRoot(\n  componentProps: StatusIndicatorRootProps,\n  forwardedRef: ForwardedRef<HTMLDivElement>\n) {\n  const { render, className, style, actions, closeDelay, ...elementProps } = componentProps;\n  const translator = useTranslator();\n  const { elementRef, present, state } = useInputIndicatorRoot(\n    () => new StatusIndicatorCore(),\n    {\n      actions,\n      closeDelay,\n      labels: createInputIndicatorLabels(translator),\n    },\n    { replayOnUpdate: false }\n  );\n  if (!present) return null;\n\n  return (\n    <StatusIndicatorProvider value={{ state }}>\n      {renderElement(\n        'div',\n        { render, className, style },\n        {\n          state,\n          stateAttrMap: StatusIndicatorDataAttrs,\n          ref: [forwardedRef, elementRef],\n          props: [elementProps],\n        }\n      )}\n    </StatusIndicatorProvider>\n  );\n});\n\nexport namespace StatusIndicatorRoot {\n  export type Props = StatusIndicatorRootProps;\n  export type State = StatusIndicatorCore.State;\n}\n"],"mappings":";;;;;;;;;AAaA,MAAa,sBAAsB,WAAW,SAAS,oBACrD,gBACA,cACA;;CACA,MAAM,EAAE,QAAQ,WAAW,OAAO,SAAS,YAAY,GAAG,iBAAiB;CAC3E,MAAM,aAAa,cAAc;CAMrBA,IAAAA;CAA2B,IAAA,EAAA,OAAA,YAAA;EAA3B,KAAA,2BAA2B,UAAU;EAAV,EAAA,KAAA;;;CAHrCC,IAAAA;CACE,IAAA,EAAA,OAAA,WAAA,EAAA,OACA,cAAA,EAAA,OACQD,IAAAA;EAHV,KAAA;GACE;GACA;GACA,QAAQA;EACV;EAHE,EAAA,KAAA;EACA,EAAA,KAAA;EACQA,EAAAA,KAAAA;;;CAEVE,IAAAA;;EAAE,KAAA,EAAA,gBAAgB,MAAM;;;CAP1B,MAAM,EAAE,YAAY,SAAS,UAAU,sBACrCC,OACAF,IAKAC,EACF;CACA,IAAI,CAAC,SAAS,OAAO;CAGlB,MAAA,KAAA;CAA+BE,IAAAA;CAAE,IAAA,EAAA,OAAA,OAAA;EAAF,KAAA,EAAE,MAAM;EAAN,EAAA,KAAA;;;CAC/B,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,QAA+BF,MAAAA,EAAAA,QAC7BG,IAAAA;EADH,KAAA,oBAACD,IAAD;GAAyB,OAAOF;GAC7BG,UAAAA;EAUsB,CAAA;EAXxBD,EAAAA,KAAAA;EAA+BF,EAAAA,MAAAA;EAC7BG,EAAAA,MAAAA;;;CAFL,OACEF;AAaJ,CAAC;AAxBG,SAAA,QAAA;CAAM,OAAA,IAAI,oBAAoB"}

package/dist/dev/ui/thumbnail/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/thumbnail/context.tsx
 const ThumbnailContext = createContext(null);
-function ThumbnailProvider({ value, children }) {
-	return /* @__PURE__ */ jsx(ThumbnailContext.Provider, {
-		value,
-		children
-	});
+function ThumbnailProvider(t0) {
+	const $ = c(3);
+	const { value, children } = t0;
+	let t1;
+	if ($[0] !== children || $[1] !== value) {
+		t1 = /* @__PURE__ */ jsx(ThumbnailContext.Provider, {
+			value,
+			children
+		});
+		$[0] = children;
+		$[1] = value;
+		$[2] = t1;
+	} else t1 = $[2];
+	return t1;
 }
 function useThumbnailContext() {
 	const ctx = useContext(ThumbnailContext);

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

@@ -1 +1 @@
-{"version":3,"file":"context.js","names":[],"sources":["../../../../src/ui/thumbnail/context.tsx"],"sourcesContent":["import type { ThumbnailCore, ThumbnailState } from '@videojs/core';\nimport { createContext, type CSSProperties, type ProviderProps, type RefCallback, useContext } from 'react';\n\nexport interface ThumbnailContextValue {\n  core: ThumbnailCore;\n  state: ThumbnailState;\n  src: string | undefined;\n  imageStyle: CSSProperties | undefined;\n  /** CORS mode inherited from the media element, supplied only for `<track>`-sourced thumbnails. */\n  inheritedCrossOrigin: ThumbnailCore.ImageProps['crossOrigin'];\n  /** Attach to the image so the root can track its loading lifecycle. */\n  imageRef: RefCallback<HTMLImageElement>;\n}\n\nconst ThumbnailContext = createContext<ThumbnailContextValue | null>(null);\n\nexport function ThumbnailProvider({ value, children }: ProviderProps<ThumbnailContextValue>) {\n  return <ThumbnailContext.Provider value={value}>{children}</ThumbnailContext.Provider>;\n}\n\nexport function useThumbnailContext(): ThumbnailContextValue {\n  const ctx = useContext(ThumbnailContext);\n  if (!ctx) throw new Error('Thumbnail compound components must be used within a Thumbnail.Root');\n\n  return ctx;\n}\n"],"mappings":";;;AAcA,MAAM,mBAAmB,cAA4C,IAAI;AAEzE,SAAgB,kBAAkB,EAAE,OAAO,YAAkD;CAC3F,OAAO,oBAAC,iBAAiB,UAAlB;EAAkC;EAAQ;CAAoC,CAAA;AACvF;AAEA,SAAgB,sBAA6C;CAC3D,MAAM,MAAM,WAAW,gBAAgB;CACvC,IAAI,CAAC,KAAK,MAAM,IAAI,MAAM,oEAAoE;CAE9F,OAAO;AACT"}
+{"version":3,"file":"context.js","names":["{ value, children }: ProviderProps<ThumbnailContextValue>","<ThumbnailContext.Provider value={value}>{children}</ThumbnailContext.Provider>","ThumbnailContext.Provider"],"sources":["../../../../src/ui/thumbnail/context.tsx"],"sourcesContent":["import type { ThumbnailCore, ThumbnailState } from '@videojs/core';\nimport { createContext, type CSSProperties, type ProviderProps, type RefCallback, useContext } from 'react';\n\nexport interface ThumbnailContextValue {\n  core: ThumbnailCore;\n  state: ThumbnailState;\n  src: string | undefined;\n  imageStyle: CSSProperties | undefined;\n  /** CORS mode inherited from the media element, supplied only for `<track>`-sourced thumbnails. */\n  inheritedCrossOrigin: ThumbnailCore.ImageProps['crossOrigin'];\n  /** Attach to the image so the root can track its loading lifecycle. */\n  imageRef: RefCallback<HTMLImageElement>;\n}\n\nconst ThumbnailContext = createContext<ThumbnailContextValue | null>(null);\n\nexport function ThumbnailProvider({ value, children }: ProviderProps<ThumbnailContextValue>) {\n  return <ThumbnailContext.Provider value={value}>{children}</ThumbnailContext.Provider>;\n}\n\nexport function useThumbnailContext(): ThumbnailContextValue {\n  const ctx = useContext(ThumbnailContext);\n  if (!ctx) throw new Error('Thumbnail compound components must be used within a Thumbnail.Root');\n\n  return ctx;\n}\n"],"mappings":";;;;AAcA,MAAM,mBAAmB,cAA4C,IAAI;AAEzE,SAAgB,kBAAA,IAA6E;;CAA3D,MAAA,EAAE,OAAO,aAATA;CACzBC,IAAAA;CAA0C,IAAA,EAAA,OAAA,YAAA,EAAA,OAAR,OAAA;EAAlC,KAAA,oBAACC,iBAAAA,UAAD;GAAkC;GAAQ;EAAoC,CAAA;EAApC,EAAA,KAAA;EAAR,EAAA,KAAA;;;CAAzC,OAAOD;AACT;AAEA,SAAgB,sBAA6C;CAC3D,MAAM,MAAM,WAAW,gBAAgB;CACvC,IAAI,CAAC,KAAK,MAAM,IAAI,MAAM,oEAAoE;CAE9F,OAAO;AACT"}

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

@@ -3,7 +3,7 @@ import { useDestroy } from "../../utils/use-destroy.js";
 import { renderElement } from "../../utils/use-render.js";
 import { ThumbnailProvider } from "./context.js";
 import { ThumbnailCore, ThumbnailDataAttrs, mapCuesToThumbnails } from "@videojs/core";
-import { createThumbnail, selectTextTrack } from "@videojs/core/dom";
+import { createThumbnail, selectFullscreen, selectTextTrack } from "@videojs/core/dom";
 import { forwardRef, useCallback, useMemo, useRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/ui/thumbnail/root.tsx
@@ -14,11 +14,13 @@ import { jsx } from "react/jsx-runtime";
 * Render `Thumbnail.Image` inside it for the image the root controls and measures.
 */
 const ThumbnailRoot = forwardRef(function ThumbnailRoot(componentProps, forwardedRef) {
+	"use no memo";
 	const { render, className, style, time = 0, thumbnails: externalThumbnails, ...elementProps } = componentProps;
 	const [core] = useState(() => new ThumbnailCore());
 	const divRef = useRef(null);
 	const imgRef = useRef(null);
 	const textTrack = useOptionalPlayer(selectTextTrack);
+	useOptionalPlayer(selectFullscreen);
 	const [, setRenderToken] = useState(0);
 	const [handle] = useState(() => createThumbnail({
 		getContainer: () => divRef.current,