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

package/dist/dev/ui/volume-indicator/value.d.ts

@@ -0,0 +1,11 @@
+import { UIComponentProps } from "../../utils/types.js";
+import { VolumeIndicatorCore } from "@videojs/core";
+//#region src/ui/volume-indicator/value.d.ts
+interface VolumeIndicatorValueProps extends UIComponentProps<'span', VolumeIndicatorCore.State> {}
+declare const VolumeIndicatorValue: import("react").ForwardRefExoticComponent<Omit<VolumeIndicatorValueProps, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+declare namespace VolumeIndicatorValue {
+  type Props = VolumeIndicatorValueProps;
+}
+//#endregion
+export { VolumeIndicatorValue, VolumeIndicatorValueProps };
+//# sourceMappingURL=value.d.ts.map

package/dist/dev/ui/volume-indicator/value.js

@@ -0,0 +1,22 @@
+import { renderElement } from "../../utils/use-render.js";
+import { useVolumeIndicatorContext } from "./context.js";
+import { getVolumeIndicatorDisplayValue } from "@videojs/core";
+import { forwardRef } from "react";
+//#region src/ui/volume-indicator/value.tsx
+const VolumeIndicatorValue = forwardRef(function VolumeIndicatorValue(componentProps, forwardedRef) {
+	const { render, className, style, ...elementProps } = componentProps;
+	const { state } = useVolumeIndicatorContext();
+	return renderElement("span", {
+		render,
+		className,
+		style
+	}, {
+		state,
+		ref: forwardedRef,
+		props: [{ children: getVolumeIndicatorDisplayValue(state) }, elementProps]
+	});
+});
+//#endregion
+export { VolumeIndicatorValue };
+
+//# sourceMappingURL=value.js.map

package/dist/dev/ui/volume-indicator/value.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"value.js","names":[],"sources":["../../../../src/ui/volume-indicator/value.tsx"],"sourcesContent":["import { getVolumeIndicatorDisplayValue, type VolumeIndicatorCore } from '@videojs/core';\nimport type { ForwardedRef } from 'react';\nimport { forwardRef } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { useVolumeIndicatorContext } from './context';\n\nexport interface VolumeIndicatorValueProps extends UIComponentProps<'span', VolumeIndicatorCore.State> {}\n\nexport const VolumeIndicatorValue = forwardRef(function VolumeIndicatorValue(\n  componentProps: VolumeIndicatorValueProps,\n  forwardedRef: ForwardedRef<HTMLSpanElement>\n) {\n  const { render, className, style, ...elementProps } = componentProps;\n  const { state } = useVolumeIndicatorContext();\n\n  return renderElement(\n    'span',\n    { render, className, style },\n    {\n      state,\n      ref: forwardedRef,\n      props: [{ children: getVolumeIndicatorDisplayValue(state) }, elementProps],\n    }\n  );\n});\n\nexport namespace VolumeIndicatorValue {\n  export type Props = VolumeIndicatorValueProps;\n}\n"],"mappings":";;;;;AAUA,MAAa,uBAAuB,WAAW,SAAS,qBACtD,gBACA,cACA;CACA,MAAM,EAAE,QAAQ,WAAW,OAAO,GAAG,iBAAiB;CACtD,MAAM,EAAE,UAAU,0BAA0B;CAE5C,OAAO,cACL,QACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EACE;EACA,KAAK;EACL,OAAO,CAAC,EAAE,UAAU,+BAA+B,KAAK,EAAE,GAAG,YAAY;CAC3E,CACF;AACF,CAAC"}

package/dist/dev/ui/volume-popover/index.parts.d.ts

@@ -1,6 +1,6 @@
-import { VolumePopoverPopup, VolumePopoverPopupProps } from "./volume-popover-popup.js";
-import { VolumePopoverRoot, VolumePopoverRootProps } from "./volume-popover-root.js";
-import { VolumePopoverTrigger, VolumePopoverTriggerProps } from "./volume-popover-trigger.js";
+import { VolumePopoverPopup, VolumePopoverPopupProps } from "./popup.js";
+import { VolumePopoverRoot, VolumePopoverRootProps } from "./root.js";
+import { VolumePopoverTrigger, VolumePopoverTriggerProps } from "./trigger.js";
 declare namespace index_parts_d_exports {
   export { VolumePopoverPopup as Popup, VolumePopoverPopupProps as PopupProps, VolumePopoverRoot as Root, VolumePopoverRootProps as RootProps, VolumePopoverTrigger as Trigger, VolumePopoverTriggerProps as TriggerProps };
 }

package/dist/dev/ui/volume-popover/index.parts.js

@@ -1,7 +1,7 @@
 import { __exportAll } from "../../_virtual/_rolldown/runtime.js";
-import { VolumePopoverPopup } from "./volume-popover-popup.js";
-import { VolumePopoverRoot } from "./volume-popover-root.js";
-import { VolumePopoverTrigger } from "./volume-popover-trigger.js";
+import { VolumePopoverPopup } from "./popup.js";
+import { VolumePopoverRoot } from "./root.js";
+import { VolumePopoverTrigger } from "./trigger.js";
 //#region src/ui/volume-popover/index.parts.ts
 var index_parts_exports = /* @__PURE__ */ __exportAll({
 	Popup: () => VolumePopoverPopup,

package/dist/dev/ui/volume-popover/index.parts.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.parts.js","names":[],"sources":["../../../../src/ui/volume-popover/index.parts.ts"],"sourcesContent":["export { VolumePopoverPopup as Popup, type VolumePopoverPopupProps as PopupProps } from './volume-popover-popup';\nexport { VolumePopoverRoot as Root, type VolumePopoverRootProps as RootProps } from './volume-popover-root';\nexport {\n  VolumePopoverTrigger as Trigger,\n  type VolumePopoverTriggerProps as TriggerProps,\n} from './volume-popover-trigger';\n"],"mappings":""}
+{"version":3,"file":"index.parts.js","names":[],"sources":["../../../../src/ui/volume-popover/index.parts.ts"],"sourcesContent":["export { VolumePopoverPopup as Popup, type VolumePopoverPopupProps as PopupProps } from './popup';\nexport { VolumePopoverRoot as Root, type VolumePopoverRootProps as RootProps } from './root';\nexport { VolumePopoverTrigger as Trigger, type VolumePopoverTriggerProps as TriggerProps } from './trigger';\n"],"mappings":""}

package/dist/dev/ui/volume-popover/popup.d.ts

@@ -0,0 +1,11 @@
+import { PopoverPopupProps } from "../popover/popup.js";
+//#region src/ui/volume-popover/popup.d.ts
+interface VolumePopoverPopupProps extends PopoverPopupProps {}
+/** Positioned volume content. Omitted when volume level controls are unavailable. */
+declare const VolumePopoverPopup: import("react").ForwardRefExoticComponent<Omit<VolumePopoverPopupProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+declare namespace VolumePopoverPopup {
+  type Props = VolumePopoverPopupProps;
+}
+//#endregion
+export { VolumePopoverPopup, VolumePopoverPopupProps };
+//# sourceMappingURL=popup.d.ts.map

package/dist/dev/ui/volume-popover/popup.js

@@ -0,0 +1,37 @@
+import { PopoverPopup } from "../popover/popup.js";
+import { useVolumePopoverContext } from "./context.js";
+import { VolumePopoverDataAttrs } from "@videojs/core";
+import { getStateDataAttrs } from "@videojs/core/dom";
+import { c } from "react-compiler-runtime";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/ui/volume-popover/popup.tsx
+/** Positioned volume content. Omitted when volume level controls are unavailable. */
+const VolumePopoverPopup = forwardRef(function VolumePopoverPopup(props, forwardedRef) {
+	const $ = c(6);
+	const { state } = useVolumePopoverContext();
+	if (state.hidden) return null;
+	let t0;
+	if ($[0] !== state) {
+		t0 = getStateDataAttrs(state, VolumePopoverDataAttrs);
+		$[0] = state;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== forwardedRef || $[3] !== props || $[4] !== t0) {
+		t1 = /* @__PURE__ */ jsx(PopoverPopup, {
+			ref: forwardedRef,
+			...t0,
+			...props
+		});
+		$[2] = forwardedRef;
+		$[3] = props;
+		$[4] = t0;
+		$[5] = t1;
+	} else t1 = $[5];
+	return t1;
+});
+//#endregion
+export { VolumePopoverPopup };
+
+//# sourceMappingURL=popup.js.map

package/dist/dev/ui/volume-popover/popup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"popup.js","names":["getStateDataAttrs(state, VolumePopoverDataAttrs)","<PopoverPopup ref={forwardedRef} {...getStateDataAttrs(state, VolumePopoverDataAttrs)} {...props} />"],"sources":["../../../../src/ui/volume-popover/popup.tsx"],"sourcesContent":["import { VolumePopoverDataAttrs } from '@videojs/core';\nimport { getStateDataAttrs } from '@videojs/core/dom';\nimport { forwardRef } from 'react';\n\nimport { PopoverPopup, type PopoverPopupProps } from '../popover/popup';\nimport { useVolumePopoverContext } from './context';\n\nexport interface VolumePopoverPopupProps extends PopoverPopupProps {}\n\n/** Positioned volume content. Omitted when volume level controls are unavailable. */\nexport const VolumePopoverPopup = forwardRef<HTMLDivElement, VolumePopoverPopupProps>(\n  function VolumePopoverPopup(props, forwardedRef) {\n    const { state } = useVolumePopoverContext();\n    if (state.hidden) return null;\n\n    return <PopoverPopup ref={forwardedRef} {...getStateDataAttrs(state, VolumePopoverDataAttrs)} {...props} />;\n  }\n);\n\nexport namespace VolumePopoverPopup {\n  export type Props = VolumePopoverPopupProps;\n}\n"],"mappings":";;;;;;;;;AAUA,MAAa,qBAAqB,WAChC,SAAS,mBAAmB,OAAO,cAAc;;CAC/C,MAAM,EAAE,UAAU,wBAAwB;CAC1C,IAAI,MAAM,QAAQ,OAAO;CAEmBA,IAAAA;CAAkB,IAAA,EAAA,OAAA,OAAA;EAAlB,KAAA,kBAAkB,OAAO,sBAAsB;EAA7B,EAAA,KAAA;;;CAAvDC,IAAAA;CAAmB,IAAA,EAAA,OAAA,gBAAA,EAAA,OAAwE,SAAA,EAAA,OAAtDD,IAAAA;EAArC,KAAA,oBAAC,cAAD;GAAc,KAAK;GAAc,GAAIA;GAAkD,GAAI;EAAQ,CAAA;EAAhF,EAAA,KAAA;EAAwE,EAAA,KAAA;EAAtDA,EAAAA,KAAAA;;;CAA5C,OAAOC;AACT,CACF"}

package/dist/dev/ui/volume-popover/root.d.ts

@@ -0,0 +1,14 @@
+import { PopoverRootProps } from "../popover/root.js";
+import { VolumePopoverCore } from "@videojs/core";
+import { ReactNode } from "react";
+//#region src/ui/volume-popover/root.d.ts
+interface VolumePopoverRootProps extends PopoverRootProps {}
+/** Owns the popover interaction lifecycle and provides volume availability to the parts. */
+declare function VolumePopoverRoot({ children, ...props }: VolumePopoverRootProps): ReactNode;
+declare namespace VolumePopoverRoot {
+  type Props = VolumePopoverRootProps;
+  type State = VolumePopoverCore.State;
+}
+//#endregion
+export { VolumePopoverRoot, VolumePopoverRootProps };
+//# sourceMappingURL=root.d.ts.map

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

@@ -0,0 +1,84 @@
+import { usePlayer } from "../../player/context.js";
+import { usePopoverContext } from "../popover/context.js";
+import { PopoverRoot } from "../popover/root.js";
+import { VolumePopoverContextProvider } from "./context.js";
+import { VolumePopoverCore } from "@videojs/core";
+import { selectVolume } from "@videojs/core/dom";
+import { c } from "react-compiler-runtime";
+import { useEffect, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/ui/volume-popover/root.tsx
+const unavailableVolume = {
+	volume: 0,
+	muted: false,
+	volumeAvailability: "unsupported",
+	mutedAvailability: "unsupported",
+	setVolume: () => 0,
+	toggleMuted: () => false
+};
+/** Owns the popover interaction lifecycle and provides volume availability to the parts. */
+function VolumePopoverRoot(t0) {
+	const $ = c(9);
+	let children;
+	let props;
+	if ($[0] !== t0) {
+		({children, ...props} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = props;
+	} else {
+		children = $[1];
+		props = $[2];
+	}
+	let t1;
+	if ($[3] !== children || $[4] !== props) {
+		t1 = /* @__PURE__ */ jsx(VolumePopoverState, {
+			...props,
+			children
+		});
+		$[3] = children;
+		$[4] = props;
+		$[5] = t1;
+	} else t1 = $[5];
+	let t2;
+	if ($[6] !== props || $[7] !== t1) {
+		t2 = /* @__PURE__ */ jsx(PopoverRoot, {
+			...props,
+			children: t1
+		});
+		$[6] = props;
+		$[7] = t1;
+		$[8] = t2;
+	} else t2 = $[8];
+	return t2;
+}
+/**
+* Derives the volume-aware state inside the popover context. It subscribes to volume, owns the core, and reads the
+* core's state all in one component: a core mutated in one component and read in another is invisible to React
+* Compiler, which memoised the reading element and left the trigger in its mute-only fallback after volume became
+* available.
+*/
+function VolumePopoverState({ children, ...props }) {
+	"use no memo";
+	const volume = usePlayer(selectVolume);
+	const { popover, state: popoverState } = usePopoverContext();
+	const [core] = useState(() => new VolumePopoverCore(props));
+	core.setProps(props);
+	core.setMedia(volume ?? unavailableVolume);
+	core.setInput({
+		active: popoverState.open,
+		status: popoverState.status
+	});
+	const state = core.getState();
+	useEffect(() => {
+		if (state.hidden) popover.close("imperative-action");
+	}, [popover, state.hidden]);
+	return /* @__PURE__ */ jsx(VolumePopoverContextProvider, {
+		value: { state },
+		children
+	});
+}
+//#endregion
+export { VolumePopoverRoot };
+
+//# sourceMappingURL=root.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"root.js","names":["{ children, ...props }: VolumePopoverRootProps","<VolumePopoverState {...props}>{children}</VolumePopoverState>","<Popover.Root {...props}>\n      <VolumePopoverState {...props}>{children}</VolumePopoverState>\n    </Popover.Root>","Popover.Root"],"sources":["../../../../src/ui/volume-popover/root.tsx"],"sourcesContent":["import { VolumePopoverCore } from '@videojs/core';\nimport { selectVolume } from '@videojs/core/dom';\nimport type { MediaVolumeState } from '@videojs/media';\nimport type { ReactNode } from 'react';\nimport { useEffect, useState } from 'react';\n\nimport { usePlayer } from '../../player/context';\nimport { Popover } from '../popover';\nimport { usePopoverContext } from '../popover/context';\nimport type { PopoverRootProps } from '../popover/root';\nimport { VolumePopoverContextProvider } from './context';\n\nconst unavailableVolume: MediaVolumeState = {\n  volume: 0,\n  muted: false,\n  volumeAvailability: 'unsupported',\n  mutedAvailability: 'unsupported',\n  setVolume: () => 0,\n  toggleMuted: () => false,\n};\n\nexport interface VolumePopoverRootProps extends PopoverRootProps {}\n\n/** Owns the popover interaction lifecycle and provides volume availability to the parts. */\nexport function VolumePopoverRoot({ children, ...props }: VolumePopoverRootProps): ReactNode {\n  return (\n    <Popover.Root {...props}>\n      <VolumePopoverState {...props}>{children}</VolumePopoverState>\n    </Popover.Root>\n  );\n}\n\n/**\n * Derives the volume-aware state inside the popover context. It subscribes to volume, owns the core, and reads the\n * core's state all in one component: a core mutated in one component and read in another is invisible to React\n * Compiler, which memoised the reading element and left the trigger in its mute-only fallback after volume became\n * available.\n */\nfunction VolumePopoverState({ children, ...props }: VolumePopoverRootProps): ReactNode {\n  // React Compiler cannot track state read through the mutable core instance.\n  'use no memo';\n\n  const volume = usePlayer(selectVolume);\n  const { popover, state: popoverState } = usePopoverContext();\n  const [core] = useState(() => new VolumePopoverCore(props));\n\n  core.setProps(props);\n  core.setMedia(volume ?? unavailableVolume);\n  core.setInput({ active: popoverState.open, status: popoverState.status });\n  const state = core.getState();\n\n  useEffect(() => {\n    if (state.hidden) popover.close('imperative-action');\n  }, [popover, state.hidden]);\n\n  return <VolumePopoverContextProvider value={{ state }}>{children}</VolumePopoverContextProvider>;\n}\n\nexport namespace VolumePopoverRoot {\n  export type Props = VolumePopoverRootProps;\n  export type State = VolumePopoverCore.State;\n}\n"],"mappings":";;;;;;;;;;AAYA,MAAM,oBAAsC;CAC1C,QAAQ;CACR,OAAO;CACP,oBAAoB;CACpB,mBAAmB;CACnB,iBAAiB;CACjB,mBAAmB;AACrB;;AAKA,SAAgB,kBAAA,IAA6E;;CAAzD,IAAA;CAAa,IAAA;CAAfA,IAAAA,EAAAA,OAAAA,IAAAA;EAAE,CAAA,CAAA,aAAU,SAAZA;;;;;;;;CAG5BC,IAAAA;CAAgC,IAAA,EAAA,OAAA,YAAA,EAAA,OAAR,OAAA;EAAxB,KAAA,oBAAC,oBAAD;GAAoB,GAAI;GAAQ;EAA6B,CAAA;EAA7B,EAAA,KAAA;EAAR,EAAA,KAAA;;;CAD1BC,IAAAA;CAAkB,IAAA,EAAA,OAAA,SAAA,EAAA,OAChBD,IAAAA;EADF,KAAA,oBAACE,aAAD;GAAc,GAAI;GAChBF,UAAAA;EACY,CAAA;EAFI,EAAA,KAAA;EAChBA,EAAAA,KAAAA;;;CAFJ,OACEC;AAIJ;;;;;;;AAQA,SAAS,mBAAmB,EAAE,UAAU,GAAG,SAA4C;CAErF;CAEA,MAAM,SAAS,UAAU,YAAY;CACrC,MAAM,EAAE,SAAS,OAAO,iBAAiB,kBAAkB;CAC3D,MAAM,CAAC,QAAQ,eAAe,IAAI,kBAAkB,KAAK,CAAC;CAE1D,KAAK,SAAS,KAAK;CACnB,KAAK,SAAS,UAAU,iBAAiB;CACzC,KAAK,SAAS;EAAE,QAAQ,aAAa;EAAM,QAAQ,aAAa;CAAO,CAAC;CACxE,MAAM,QAAQ,KAAK,SAAS;CAE5B,gBAAgB;EACd,IAAI,MAAM,QAAQ,QAAQ,MAAM,mBAAmB;CACrD,GAAG,CAAC,SAAS,MAAM,MAAM,CAAC;CAE1B,OAAO,oBAAC,8BAAD;EAA8B,OAAO,EAAE,MAAM;EAAI;CAAuC,CAAA;AACjG"}

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

@@ -0,0 +1,11 @@
+import { PopoverTriggerProps } from "../popover/trigger.js";
+//#region src/ui/volume-popover/trigger.d.ts
+interface VolumePopoverTriggerProps extends PopoverTriggerProps {}
+/** Opens the volume popup, or renders its mute-button fallback when volume level controls are unavailable. */
+declare const VolumePopoverTrigger: import("react").ForwardRefExoticComponent<Omit<VolumePopoverTriggerProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+declare namespace VolumePopoverTrigger {
+  type Props = VolumePopoverTriggerProps;
+}
+//#endregion
+export { VolumePopoverTrigger, VolumePopoverTriggerProps };
+//# sourceMappingURL=trigger.d.ts.map

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

@@ -0,0 +1,32 @@
+import { renderElement } from "../../utils/use-render.js";
+import { usePopoverContext } from "../popover/context.js";
+import { PopoverTrigger } from "../popover/trigger.js";
+import { useVolumePopoverContext } from "./context.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/ui/volume-popover/trigger.tsx
+/** Opens the volume popup, or renders its mute-button fallback when volume level controls are unavailable. */
+const VolumePopoverTrigger = forwardRef(function VolumePopoverTrigger({ render, className, style, ...elementProps }, forwardedRef) {
+	const { state: popoverState } = usePopoverContext();
+	const { state } = useVolumePopoverContext();
+	if (!state.hidden) return /* @__PURE__ */ jsx(PopoverTrigger, {
+		ref: forwardedRef,
+		render,
+		className,
+		style,
+		...elementProps
+	});
+	return renderElement("button", {
+		render,
+		className,
+		style
+	}, {
+		state: popoverState,
+		ref: forwardedRef,
+		props: [{ type: "button" }, elementProps]
+	});
+});
+//#endregion
+export { VolumePopoverTrigger };
+
+//# sourceMappingURL=trigger.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"trigger.js","names":[],"sources":["../../../../src/ui/volume-popover/trigger.tsx"],"sourcesContent":["import { forwardRef } from 'react';\n\nimport { renderElement } from '../../utils/use-render';\nimport { usePopoverContext } from '../popover/context';\nimport { PopoverTrigger, type PopoverTriggerProps } from '../popover/trigger';\nimport { useVolumePopoverContext } from './context';\n\nexport interface VolumePopoverTriggerProps extends PopoverTriggerProps {}\n\n/** Opens the volume popup, or renders its mute-button fallback when volume level controls are unavailable. */\nexport const VolumePopoverTrigger = forwardRef<HTMLButtonElement, VolumePopoverTriggerProps>(\n  function VolumePopoverTrigger({ render, className, style, ...elementProps }, forwardedRef) {\n    const { state: popoverState } = usePopoverContext();\n    const { state } = useVolumePopoverContext();\n\n    if (!state.hidden) {\n      return (\n        <PopoverTrigger ref={forwardedRef} render={render} className={className} style={style} {...elementProps} />\n      );\n    }\n\n    return renderElement(\n      'button',\n      { render, className, style },\n      {\n        state: popoverState,\n        ref: forwardedRef,\n        props: [{ type: 'button' as const }, elementProps],\n      }\n    );\n  }\n);\n\nexport namespace VolumePopoverTrigger {\n  export type Props = VolumePopoverTriggerProps;\n}\n"],"mappings":";;;;;;;;AAUA,MAAa,uBAAuB,WAClC,SAAS,qBAAqB,EAAE,QAAQ,WAAW,OAAO,GAAG,gBAAgB,cAAc;CACzF,MAAM,EAAE,OAAO,iBAAiB,kBAAkB;CAClD,MAAM,EAAE,UAAU,wBAAwB;CAE1C,IAAI,CAAC,MAAM,QACT,OACE,oBAAC,gBAAD;EAAgB,KAAK;EAAsB;EAAmB;EAAkB;EAAO,GAAI;CAAe,CAAA;CAI9G,OAAO,cACL,UACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EACE,OAAO;EACP,KAAK;EACL,OAAO,CAAC,EAAE,MAAM,SAAkB,GAAG,YAAY;CACnD,CACF;AACF,CACF"}

package/dist/dev/ui/volume-slider/index.parts.d.ts

@@ -1,10 +1,10 @@
-import { SliderFill, SliderFillProps } from "../slider/slider-fill.js";
-import { SliderPreview, SliderPreviewProps } from "../slider/slider-preview.js";
-import { SliderThumb, SliderThumbProps } from "../slider/slider-thumb.js";
-import { SliderTrack, SliderTrackProps } from "../slider/slider-track.js";
-import { SliderValue, SliderValueProps } from "../slider/slider-value.js";
+import { SliderFill, SliderFillProps } from "../slider/fill.js";
+import { SliderPreview, SliderPreviewProps } from "../slider/preview.js";
+import { SliderThumb, SliderThumbProps } from "../slider/thumb.js";
+import { SliderTrack, SliderTrackProps } from "../slider/track.js";
+import { SliderValue, SliderValueProps } from "../slider/value.js";
 import "../slider/index.parts.js";
-import { VolumeSliderRoot, VolumeSliderRootProps } from "./volume-slider-root.js";
+import { VolumeSliderRoot, VolumeSliderRootProps } from "./root.js";
 declare namespace index_parts_d_exports {
   export { SliderFill as Fill, SliderFillProps as FillProps, SliderPreview as Preview, SliderPreviewProps as PreviewProps, VolumeSliderRoot as Root, VolumeSliderRootProps as RootProps, SliderThumb as Thumb, SliderThumbProps as ThumbProps, SliderTrack as Track, SliderTrackProps as TrackProps, SliderValue as Value, SliderValueProps as ValueProps };
 }

package/dist/dev/ui/volume-slider/index.parts.js

@@ -1,10 +1,10 @@
 import { __exportAll } from "../../_virtual/_rolldown/runtime.js";
-import { SliderFill } from "../slider/slider-fill.js";
-import { SliderPreview } from "../slider/slider-preview.js";
-import { SliderThumb } from "../slider/slider-thumb.js";
-import { SliderTrack } from "../slider/slider-track.js";
-import { SliderValue } from "../slider/slider-value.js";
-import { VolumeSliderRoot } from "./volume-slider-root.js";
+import { SliderFill } from "../slider/fill.js";
+import { SliderPreview } from "../slider/preview.js";
+import { SliderThumb } from "../slider/thumb.js";
+import { SliderTrack } from "../slider/track.js";
+import { SliderValue } from "../slider/value.js";
+import { VolumeSliderRoot } from "./root.js";
 //#region src/ui/volume-slider/index.parts.ts
 var index_parts_exports = /* @__PURE__ */ __exportAll({
 	Fill: () => SliderFill,

package/dist/dev/ui/volume-slider/index.parts.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.parts.js","names":[],"sources":["../../../../src/ui/volume-slider/index.parts.ts"],"sourcesContent":["export {\n  Fill,\n  type FillProps,\n  Preview,\n  type PreviewProps,\n  Thumb,\n  type ThumbProps,\n  Track,\n  type TrackProps,\n  Value,\n  type ValueProps,\n} from '../slider/index.parts';\nexport { VolumeSliderRoot as Root, type VolumeSliderRootProps as RootProps } from './volume-slider-root';\n"],"mappings":""}
+{"version":3,"file":"index.parts.js","names":[],"sources":["../../../../src/ui/volume-slider/index.parts.ts"],"sourcesContent":["export {\n  Fill,\n  type FillProps,\n  Preview,\n  type PreviewProps,\n  Thumb,\n  type ThumbProps,\n  Track,\n  type TrackProps,\n  Value,\n  type ValueProps,\n} from '../slider/index.parts';\nexport { VolumeSliderRoot as Root, type VolumeSliderRootProps as RootProps } from './root';\n"],"mappings":""}

package/dist/dev/ui/volume-slider/root.d.ts

@@ -0,0 +1,15 @@
+import { UIComponentProps } from "../../utils/types.js";
+import { VolumeSliderCore } from "@videojs/core";
+//#region src/ui/volume-slider/root.d.ts
+interface VolumeSliderRootProps extends UIComponentProps<'div', VolumeSliderCore.State>, VolumeSliderCore.Props {
+  onDragStart?: (() => void) | undefined;
+  onDragEnd?: (() => void) | undefined;
+}
+declare const VolumeSliderRoot: import("react").ForwardRefExoticComponent<Omit<VolumeSliderRootProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+declare namespace VolumeSliderRoot {
+  type Props = VolumeSliderRootProps;
+  type State = VolumeSliderCore.State;
+}
+//#endregion
+export { VolumeSliderRoot, VolumeSliderRootProps };
+//# sourceMappingURL=root.d.ts.map

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

@@ -0,0 +1,125 @@
+import { useLocale, useTranslator } from "../../i18n/context.js";
+import { usePlayer } from "../../player/context.js";
+import { useLatestRef } from "../../utils/use-latest-ref.js";
+import { renderElement } from "../../utils/use-render.js";
+import { useSlider } from "../hooks/use-slider.js";
+import { SliderProvider } from "../slider/context.js";
+import { VolumeSliderCore, VolumeSliderDataAttrs } from "@videojs/core";
+import { createWheelStep, getSliderCSSVars, logMissingFeature, selectVolume } from "@videojs/core/dom";
+import { translateText } from "@videojs/core/i18n";
+import { forwardRef, useCallback, useRef, useState } from "react";
+import { listen } from "@videojs/utils/dom";
+import { jsx } from "react/jsx-runtime";
+//#region src/ui/volume-slider/root.tsx
+const noopVolume = {
+	volume: 0,
+	muted: false,
+	volumeAvailability: "unsupported",
+	mutedAvailability: "unsupported",
+	setVolume: () => 0,
+	toggleMuted: () => false
+};
+const VolumeSliderRoot = forwardRef(function VolumeSliderRoot(componentProps, forwardedRef) {
+	const { render, className, style, label, orientation, step = VolumeSliderCore.defaultProps.step, largeStep = VolumeSliderCore.defaultProps.largeStep, wheelStep = VolumeSliderCore.defaultProps.wheelStep, disabled, thumbAlignment, onDragStart, onDragEnd, ...elementProps } = componentProps;
+	const volume = usePlayer(selectVolume);
+	const translator = useTranslator();
+	const locale = useLocale();
+	const isUnavailable = volume?.volumeAvailability !== "available";
+	const isDisabled = Boolean(disabled) || isUnavailable;
+	const [core] = useState(() => new VolumeSliderCore());
+	core.setProps({
+		label,
+		orientation,
+		step,
+		largeStep,
+		wheelStep,
+		disabled,
+		thumbAlignment
+	});
+	core.setFormatLocale(locale);
+	const volumeRef = useLatestRef(volume);
+	const disabledRef = useLatestRef(isDisabled);
+	const getPercent = () => (volumeRef.current?.volume ?? 0) * 100;
+	const getStepPercent = () => core.getStepPercent();
+	const setVolume = (percent) => volumeRef.current?.setVolume(percent / 100);
+	const { state, input, cssVars, rootRef, thumbRef, rootProps, rootStyle, thumbProps } = useSlider({
+		computeState: (input) => {
+			core.setInput(input);
+			core.setMedia(volume ?? noopVolume);
+			return core.getState();
+		},
+		getPercent,
+		getStepPercent,
+		getLargeStepPercent: () => core.getLargeStepPercent(),
+		orientation,
+		disabled: isDisabled,
+		adjustPercent: (rawPercent, thumbSize, trackSize) => core.adjustPercentForAlignment(rawPercent, thumbSize, trackSize),
+		getCSSVars: getSliderCSSVars,
+		onValueChange: setVolume,
+		onValueCommit: setVolume,
+		onDragStart,
+		onDragEnd
+	});
+	const [wheelHandler] = useState(() => createWheelStep({
+		isDisabled: () => disabledRef.current,
+		getPercent: () => (volumeRef.current?.volume ?? 0) * 100,
+		getStepPercent: () => core.getWheelStepPercent(),
+		onValueChange: (percent) => volumeRef.current?.setVolume(percent / 100)
+	}));
+	const wheelCleanupRef = useRef(null);
+	const wheelRef = useCallback((element) => {
+		wheelCleanupRef.current?.();
+		wheelCleanupRef.current = null;
+		if (element) wheelCleanupRef.current = listen(element, "wheel", wheelHandler.onWheel, { passive: false });
+	}, [wheelHandler]);
+	if (!volume) {
+		logMissingFeature("VolumeSlider", "volume");
+		return null;
+	}
+	if (state.hidden) return null;
+	return /* @__PURE__ */ jsx(SliderProvider, {
+		value: {
+			state,
+			pointerValue: core.valueFromPercent(state.pointerPercent),
+			input,
+			getPointerValue: (percent) => core.valueFromPercent(percent),
+			thumbRef,
+			thumbProps,
+			stateAttrMap: VolumeSliderDataAttrs,
+			getAttrs: (sliderState) => {
+				const attrs = core.getAttrs(sliderState);
+				return {
+					...attrs,
+					"aria-label": translateText(attrs["aria-label"], translator),
+					"aria-valuetext": translateText(attrs["aria-valuetext"], translator, core.getValueTextParams(sliderState))
+				};
+			},
+			formatValue: (value) => `${Math.round(value)}%`
+		},
+		children: renderElement("div", {
+			render,
+			className,
+			style
+		}, {
+			state,
+			stateAttrMap: VolumeSliderDataAttrs,
+			ref: [
+				forwardedRef,
+				rootRef,
+				wheelRef
+			],
+			props: [
+				{ style: {
+					...cssVars,
+					...rootStyle
+				} },
+				rootProps,
+				elementProps
+			]
+		})
+	});
+});
+//#endregion
+export { VolumeSliderRoot };
+
+//# sourceMappingURL=root.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"root.js","names":[],"sources":["../../../../src/ui/volume-slider/root.tsx"],"sourcesContent":["import { VolumeSliderCore, VolumeSliderDataAttrs } from '@videojs/core';\nimport { createWheelStep, getSliderCSSVars, logMissingFeature, selectVolume } from '@videojs/core/dom';\nimport { translateText } from '@videojs/core/i18n';\nimport { listen } from '@videojs/utils/dom';\nimport { forwardRef, useCallback, useRef, useState } from 'react';\n\nimport { useLocale, useTranslator } from '../../i18n/context';\nimport { usePlayer } from '../../player/context';\nimport type { UIComponentProps } from '../../utils/types';\nimport { useLatestRef } from '../../utils/use-latest-ref';\nimport { renderElement } from '../../utils/use-render';\nimport { useSlider } from '../hooks/use-slider';\nimport { SliderProvider } from '../slider/context';\n\nconst noopVolume = {\n  volume: 0,\n  muted: false,\n  volumeAvailability: 'unsupported' as const,\n  mutedAvailability: 'unsupported' as const,\n  setVolume: () => 0,\n  toggleMuted: () => false,\n};\n\nexport interface VolumeSliderRootProps extends UIComponentProps<'div', VolumeSliderCore.State>, VolumeSliderCore.Props {\n  onDragStart?: (() => void) | undefined;\n  onDragEnd?: (() => void) | undefined;\n}\n\nexport const VolumeSliderRoot = forwardRef<HTMLDivElement, VolumeSliderRootProps>(\n  function VolumeSliderRoot(componentProps, forwardedRef) {\n    const {\n      render,\n      className,\n      style,\n      label,\n      orientation,\n      step = VolumeSliderCore.defaultProps.step,\n      largeStep = VolumeSliderCore.defaultProps.largeStep,\n      wheelStep = VolumeSliderCore.defaultProps.wheelStep,\n      disabled,\n      thumbAlignment,\n      onDragStart,\n      onDragEnd,\n      ...elementProps\n    } = componentProps;\n\n    const volume = usePlayer(selectVolume);\n    const translator = useTranslator();\n    const locale = useLocale();\n\n    const isUnavailable = volume?.volumeAvailability !== 'available';\n    const isDisabled = Boolean(disabled) || isUnavailable;\n\n    const [core] = useState(() => new VolumeSliderCore());\n\n    core.setProps({ label, orientation, step, largeStep, wheelStep, disabled, thumbAlignment });\n    core.setFormatLocale(locale);\n\n    // Keep refs to the latest dynamic values for stable closures.\n    const volumeRef = useLatestRef(volume);\n    const disabledRef = useLatestRef(isDisabled);\n\n    const getPercent = () => (volumeRef.current?.volume ?? 0) * 100;\n    const getStepPercent = () => core.getStepPercent();\n    const setVolume = (percent: number) => volumeRef.current?.setVolume(percent / 100);\n\n    const { state, input, cssVars, rootRef, thumbRef, rootProps, rootStyle, thumbProps } =\n      useSlider<VolumeSliderCore.State>({\n        computeState: (input) => {\n          core.setInput(input);\n          core.setMedia(volume ?? noopVolume);\n          return core.getState();\n        },\n        getPercent,\n        getStepPercent,\n        getLargeStepPercent: () => core.getLargeStepPercent(),\n        orientation,\n        disabled: isDisabled,\n        adjustPercent: (rawPercent, thumbSize, trackSize) =>\n          core.adjustPercentForAlignment(rawPercent, thumbSize, trackSize),\n        getCSSVars: getSliderCSSVars,\n        onValueChange: setVolume,\n        onValueCommit: setVolume,\n        onDragStart,\n        onDragEnd,\n      });\n\n    const [wheelHandler] = useState(() =>\n      createWheelStep({\n        isDisabled: () => disabledRef.current,\n        getPercent: () => (volumeRef.current?.volume ?? 0) * 100,\n        getStepPercent: () => core.getWheelStepPercent(),\n        onValueChange: (percent) => volumeRef.current?.setVolume(percent / 100),\n      })\n    );\n\n    // Attach non-passive wheel listener via callback ref so it covers\n    // late-mounted elements (null → mounted after volume appears).\n    const wheelCleanupRef = useRef<(() => void) | null>(null);\n    const wheelRef = useCallback(\n      (element: HTMLDivElement | null) => {\n        wheelCleanupRef.current?.();\n        wheelCleanupRef.current = null;\n\n        if (element) {\n          wheelCleanupRef.current = listen(element, 'wheel', wheelHandler.onWheel, { passive: false });\n        }\n      },\n      [wheelHandler]\n    );\n\n    if (!volume) {\n      if (__DEV__) logMissingFeature('VolumeSlider', 'volume');\n\n      return null;\n    }\n\n    if (state.hidden) return null;\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,\n          thumbProps,\n          stateAttrMap: VolumeSliderDataAttrs,\n          getAttrs: (sliderState) => {\n            const attrs = core.getAttrs(sliderState as VolumeSliderCore.State);\n\n            return {\n              ...attrs,\n              'aria-label': translateText(attrs['aria-label'], translator),\n              'aria-valuetext': translateText(\n                attrs['aria-valuetext'],\n                translator,\n                core.getValueTextParams(sliderState as VolumeSliderCore.State)\n              ),\n            };\n          },\n          formatValue: (value) => `${Math.round(value)}%`,\n        }}\n      >\n        {renderElement(\n          'div',\n          { render, className, style },\n          {\n            state,\n            stateAttrMap: VolumeSliderDataAttrs,\n            ref: [forwardedRef, rootRef, wheelRef],\n            props: [{ style: { ...cssVars, ...rootStyle } }, rootProps, elementProps],\n          }\n        )}\n      </SliderProvider>\n    );\n  }\n);\n\nexport namespace VolumeSliderRoot {\n  export type Props = VolumeSliderRootProps;\n  export type State = VolumeSliderCore.State;\n}\n"],"mappings":"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"}

package/dist/dev/utils/use-attach-media.d.ts

@@ -2,11 +2,17 @@ import { EngineAdapter } from "@videojs/media";
 import { RefCallback } from "react";
 //#region src/utils/use-attach-media.d.ts
 /**
- * Returns a callback ref that attaches an HTML media element to a playback adapter and detaches it during cleanup.
+ * Returns a callback ref that attaches an element to a playback adapter and detaches it when the element or the adapter
+ * changes, when the element goes away, and on unmount.
+ *
+ * React hands a callback ref `null` and then the same element again whenever the ref changes identity, which happens
+ * every render when it is composed with an inline `ref={(el) => ...}` from a parent. Attaching only when the element or
+ * the adapter actually changed, and deferring detach to a layout effect that runs after the commit's refs, keeps that
+ * from tearing the engine down and rebuilding it.
  *
  * @param media - Playback adapter to attach and detach.
  */
-declare function useAttachMedia<T extends HTMLMediaElement>(media: EngineAdapter): RefCallback<T>;
+declare function useAttachMedia<T extends Element>(media: EngineAdapter): RefCallback<T>;
 //#endregion
 export { useAttachMedia };
 //# sourceMappingURL=use-attach-media.d.ts.map

package/dist/dev/utils/use-attach-media.js

@@ -1,16 +1,73 @@
-import { useCallback } from "react";
+import { c } from "react-compiler-runtime";
+import { useLayoutEffect, useRef } from "react";
 //#region src/utils/use-attach-media.ts
 /**
-* Returns a callback ref that attaches an HTML media element to a playback adapter and detaches it during cleanup.
+* Returns a callback ref that attaches an element to a playback adapter and detaches it when the element or the adapter
+* changes, when the element goes away, and on unmount.
+*
+* React hands a callback ref `null` and then the same element again whenever the ref changes identity, which happens
+* every render when it is composed with an inline `ref={(el) => ...}` from a parent. Attaching only when the element or
+* the adapter actually changed, and deferring detach to a layout effect that runs after the commit's refs, keeps that
+* from tearing the engine down and rebuilding it.
 *
 * @param media - Playback adapter to attach and detach.
 */
 function useAttachMedia(media) {
-	return useCallback((element) => {
-		if (element) media.attach?.(element);
-		else media.detach?.();
-		return () => media.detach?.();
-	}, [media]);
+	const $ = c(7);
+	const elementRef = useRef(null);
+	const attachedRef = useRef(null);
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = () => {
+			const attached = attachedRef.current;
+			attachedRef.current = null;
+			attached?.media.detach?.();
+		};
+		$[0] = t0;
+	} else t0 = $[0];
+	const detach = t0;
+	let t1;
+	if ($[1] !== media) {
+		t1 = () => {
+			const element = elementRef.current;
+			const attached_0 = attachedRef.current;
+			if (attached_0 && (attached_0.element !== element || attached_0.media !== media)) detach();
+			if (element && !attachedRef.current) {
+				media.attach?.(element);
+				attachedRef.current = {
+					media,
+					element
+				};
+			}
+		};
+		$[1] = media;
+		$[2] = t1;
+	} else t1 = $[2];
+	const sync = t1;
+	let t2;
+	if ($[3] !== sync) {
+		t2 = (element_0) => {
+			elementRef.current = element_0;
+			if (element_0) sync();
+		};
+		$[3] = sync;
+		$[4] = t2;
+	} else t2 = $[4];
+	const ref = t2;
+	useLayoutEffect(sync);
+	let t3;
+	let t4;
+	if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
+		t3 = () => detach;
+		t4 = [detach];
+		$[5] = t3;
+		$[6] = t4;
+	} else {
+		t3 = $[5];
+		t4 = $[6];
+	}
+	useLayoutEffect(t3, t4);
+	return ref;
 }
 //#endregion
 export { useAttachMedia };

package/dist/dev/utils/use-attach-media.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-attach-media.js","names":[],"sources":["../../../src/utils/use-attach-media.ts"],"sourcesContent":["import type { EngineAdapter } from '@videojs/media';\nimport type { RefCallback } from 'react';\nimport { useCallback } from 'react';\n\n/**\n * Returns a callback ref that attaches an HTML media element to a playback adapter and detaches it during cleanup.\n *\n * @param media - Playback adapter to attach and detach.\n */\nexport function useAttachMedia<T extends HTMLMediaElement>(media: EngineAdapter): RefCallback<T> {\n  return useCallback(\n    (element: T | null) => {\n      if (element) media.attach?.(element);\n      else media.detach?.();\n\n      return () => media.detach?.();\n    },\n    [media]\n  );\n}\n"],"mappings":";;;;;;;AASA,SAAgB,eAA2C,OAAsC;CAC/F,OAAO,aACJ,YAAsB;EACrB,IAAI,SAAS,MAAM,SAAS,OAAO;OAC9B,MAAM,SAAS;EAEpB,aAAa,MAAM,SAAS;CAC9B,GACA,CAAC,KAAK,CACR;AACF"}
+{"version":3,"file":"use-attach-media.js","names":["() => {\n    const attached = attachedRef.current;\n\n    attachedRef.current = null;\n    attached?.media.detach?.();\n  }","useCallback(() => {\n    const attached = attachedRef.current;\n\n    attachedRef.current = null;\n    attached?.media.detach?.();\n  }, [])","() => {\n    const element = elementRef.current;\n    const attached = attachedRef.current;\n\n    if (attached && (attached.element !== element || attached.media !== media)) detach();\n\n    if (element && !attachedRef.current) {\n      media.attach?.(element);\n      attachedRef.current = { media, element };\n    }\n  }","attached","useCallback(() => {\n    const element = elementRef.current;\n    const attached = attachedRef.current;\n\n    if (attached && (attached.element !== element || attached.media !== media)) detach();\n\n    if (element && !attachedRef.current) {\n      media.attach?.(element);\n      attachedRef.current = { media, element };\n    }\n  }, [media, detach])","(element) => {\n      elementRef.current = element;\n\n      if (element) sync();\n    }","element","useCallback<RefCallback<T>>(\n    (element) => {\n      elementRef.current = element;\n\n      if (element) sync();\n    },\n    [sync]\n  )","() => detach","[detach]"],"sources":["../../../src/utils/use-attach-media.ts"],"sourcesContent":["import type { EngineAdapter } from '@videojs/media';\nimport type { RefCallback } from 'react';\nimport { useCallback, useLayoutEffect, useRef } from 'react';\n\n/**\n * Returns a callback ref that attaches an element to a playback adapter and detaches it when the element or the adapter\n * changes, when the element goes away, and on unmount.\n *\n * React hands a callback ref `null` and then the same element again whenever the ref changes identity, which happens\n * every render when it is composed with an inline `ref={(el) => ...}` from a parent. Attaching only when the element or\n * the adapter actually changed, and deferring detach to a layout effect that runs after the commit's refs, keeps that\n * from tearing the engine down and rebuilding it.\n *\n * @param media - Playback adapter to attach and detach.\n */\nexport function useAttachMedia<T extends Element>(media: EngineAdapter): RefCallback<T> {\n  const elementRef = useRef<T | null>(null);\n  const attachedRef = useRef<{ media: EngineAdapter; element: T } | null>(null);\n\n  const detach = useCallback(() => {\n    const attached = attachedRef.current;\n\n    attachedRef.current = null;\n    attached?.media.detach?.();\n  }, []);\n\n  // Reconciles what the adapter is attached to with the element React last handed the ref.\n  const sync = useCallback(() => {\n    const element = elementRef.current;\n    const attached = attachedRef.current;\n\n    if (attached && (attached.element !== element || attached.media !== media)) detach();\n\n    if (element && !attachedRef.current) {\n      media.attach?.(element);\n      attachedRef.current = { media, element };\n    }\n  }, [media, detach]);\n\n  // Attach while the refs run so it lands before this commit's effects. A `null` only records the element as gone; the\n  // layout effect decides whether it was really removed or is about to be handed back.\n  const ref = useCallback<RefCallback<T>>(\n    (element) => {\n      elementRef.current = element;\n\n      if (element) sync();\n    },\n    [sync]\n  );\n\n  // Runs after this commit's refs: detaches when the element was removed, and re-attaches after a StrictMode simulated\n  // unmount. Unmount itself runs the cleanup before the ref is handed `null`, so that detaches outright.\n  useLayoutEffect(sync);\n  useLayoutEffect(() => detach, [detach]);\n\n  return ref;\n}\n"],"mappings":";;;;;;;;;;;;;;AAeA,SAAgB,eAAkC,OAAsC;;CACtF,MAAM,aAAa,OAAiB,IAAI;CACxC,MAAM,cAAc,OAAoD,IAAI;CAEjDA,IAAAA;;EAAM,WAAA;GAC/B,MAAM,WAAW,YAAY;GAE7B,YAAY,UAAU;GACtB,UAAU,MAAM,SAAS;EAC3B;;;CALA,MAAM,SAASC;CAQUC,IAAAA;CAI6C,IAAA,EAAA,OAAA,OAAA;EAJ7C,WAAM;GAC7B,MAAM,UAAU,WAAW;GAC3B,MAAMC,aAAW,YAAY;GAE7B,IAAIA,eAAaA,WAAS,YAAY,WAAWA,WAAS,UAAU,QAAQ,OAAO;GAEnF,IAAI,WAAW,CAAC,YAAY,SAAS;IACnC,MAAM,SAAS,OAAO;IACtB,YAAY,UAAU;KAAE;KAAO;IAAQ;GACzC;EACF;EANsE,EAAA,KAAA;;;CAJtE,MAAM,OAAOC;CAeXC,IAAAA;CAGe,IAAA,EAAA,OAAA,MAAA;EAHf,MAAC,cAAY;GACX,WAAW,UAAUC;GAErB,IAAIA,WAAS,KAAK;EACpB;EADe,EAAA,KAAA;;;CAJjB,MAAM,MAAMC;CAWZ,gBAAgB,IAAI;CACJC,IAAAA;CAAcC,IAAAA;;EAAd,WAAM;EAAQ,KAAA,CAAC,MAAM;;;;;;;CAArC,gBAAgBD,IAAcC,EAAQ;CAEtC,OAAO;AACT"}