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

package/dist/dev/internal/skins/default-video/components/buttons/fullscreen-button.js

@@ -2,17 +2,64 @@ import { FullscreenButton as FullscreenButton$1 } from "../../../../../ui/fullsc
 import ForwardRef from "../../../../../icons/dist/react/default/fullscreen-enter.js";
 import ForwardRef$1 from "../../../../../icons/dist/react/default/fullscreen-exit.js";
 import { Button } from "../../../shared/components/buttons/button.js";
+import { c } from "react-compiler-runtime";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cn, resolveClassName } from "@videojs/utils/style";
 //#region src/internal/skins/default-video/components/buttons/fullscreen-button.tsx
 /** @jsxImportSource react */
-function FullscreenButton({ className, ...props } = {}) {
-	return /* @__PURE__ */ jsxs(FullscreenButton$1, {
-		render: /* @__PURE__ */ jsx(Button, {}),
-		className: (state) => cn("media-fullscreen-button", resolveClassName(className, state)),
-		...props,
-		children: [/* @__PURE__ */ jsx(ForwardRef, { className: cn("media-button-icon", "media-fullscreen-button-enter-icon") }), /* @__PURE__ */ jsx(ForwardRef$1, { className: cn("media-button-icon", "media-fullscreen-button-exit-icon") })]
-	});
+function FullscreenButton(t0) {
+	const $ = c(13);
+	let t1;
+	if ($[0] !== t0) {
+		t1 = t0 === void 0 ? {} : t0;
+		$[0] = t0;
+		$[1] = t1;
+	} else t1 = $[1];
+	let className;
+	let props;
+	if ($[2] !== t1) {
+		({className, ...props} = t1);
+		$[2] = t1;
+		$[3] = className;
+		$[4] = props;
+	} else {
+		className = $[3];
+		props = $[4];
+	}
+	let t2;
+	if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = /* @__PURE__ */ jsx(Button, {});
+		$[5] = t2;
+	} else t2 = $[5];
+	let t3;
+	if ($[6] !== className) {
+		t3 = (state) => cn("media-fullscreen-button", resolveClassName(className, state));
+		$[6] = className;
+		$[7] = t3;
+	} else t3 = $[7];
+	let t4;
+	if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
+		t4 = /* @__PURE__ */ jsx(ForwardRef, { className: cn("media-button-icon", "media-fullscreen-button-enter-icon") });
+		$[8] = t4;
+	} else t4 = $[8];
+	let t5;
+	if ($[9] === Symbol.for("react.memo_cache_sentinel")) {
+		t5 = /* @__PURE__ */ jsx(ForwardRef$1, { className: cn("media-button-icon", "media-fullscreen-button-exit-icon") });
+		$[9] = t5;
+	} else t5 = $[9];
+	let t6;
+	if ($[10] !== props || $[11] !== t3) {
+		t6 = /* @__PURE__ */ jsxs(FullscreenButton$1, {
+			render: t2,
+			className: t3,
+			...props,
+			children: [t4, t5]
+		});
+		$[10] = props;
+		$[11] = t3;
+		$[12] = t6;
+	} else t6 = $[12];
+	return t6;
 }
 //#endregion
 export { FullscreenButton };

package/dist/dev/internal/skins/default-video/components/buttons/fullscreen-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"fullscreen-button.js","names":["FullscreenButtonPrimitive","FullscreenEnterIconPrimitive","FullscreenExitIconPrimitive"],"sources":["../../../../../../../src/internal/skins/default-video/components/buttons/fullscreen-button.tsx"],"sourcesContent":["/** @jsxImportSource react */\n\nimport { cn, resolveClassName } from '@videojs/utils/style';\n\nimport {\n  FullscreenEnterIcon as FullscreenEnterIconPrimitive,\n  FullscreenExitIcon as FullscreenExitIconPrimitive,\n} from '../../../../../icons/index';\nimport { FullscreenButton as FullscreenButtonPrimitive } from '../../../../skin-primitives';\nimport { Button } from '../../../shared/components/buttons/button';\n\nexport type FullscreenButtonProps = Omit<FullscreenButtonPrimitive.Props, 'children'>;\n\nexport function FullscreenButton({ className, ...props }: FullscreenButtonProps = {}) {\n  return (\n    <FullscreenButtonPrimitive\n      render={<Button />}\n      className={(state) => cn('media-fullscreen-button', resolveClassName(className, state))}\n      {...props}\n    >\n      <FullscreenEnterIconPrimitive className={cn('media-button-icon', 'media-fullscreen-button-enter-icon')} />\n      <FullscreenExitIconPrimitive className={cn('media-button-icon', 'media-fullscreen-button-exit-icon')} />\n    </FullscreenButtonPrimitive>\n  );\n}\n"],"mappings":";;;;;;;;AAaA,SAAgB,iBAAiB,EAAE,WAAW,GAAG,UAAiC,CAAC,GAAG;CACpF,OACE,qBAACA,oBAAD;EACE,QAAQ,oBAAC,QAAD,CAAS,CAAA;EACjB,YAAY,UAAU,GAAG,2BAA2B,iBAAiB,WAAW,KAAK,CAAC;EACtF,GAAI;EAHN,UAAA,CAKE,oBAACC,YAAD,EAA8B,WAAW,GAAG,qBAAqB,oCAAoC,EAAI,CAAA,GACzG,oBAACC,cAAD,EAA6B,WAAW,GAAG,qBAAqB,mCAAmC,EAAI,CAAA,CAC9E;;AAE/B"}
+{"version":3,"file":"fullscreen-button.js","names":["{ className, ...props }: FullscreenButtonProps = {}","<Button />","(state) => cn('media-fullscreen-button', resolveClassName(className, state))","<FullscreenEnterIconPrimitive className={cn('media-button-icon', 'media-fullscreen-button-enter-icon')} />","<FullscreenExitIconPrimitive className={cn('media-button-icon', 'media-fullscreen-button-exit-icon')} />","<FullscreenButtonPrimitive\n      render={<Button />}\n      className={(state) => cn('media-fullscreen-button', resolveClassName(className, state))}\n      {...props}\n    >\n      <FullscreenEnterIconPrimitive className={cn('media-button-icon', 'media-fullscreen-button-enter-icon')} />\n      <FullscreenExitIconPrimitive className={cn('media-button-icon', 'media-fullscreen-button-exit-icon')} />\n    </FullscreenButtonPrimitive>"],"sources":["../../../../../../../src/internal/skins/default-video/components/buttons/fullscreen-button.tsx"],"sourcesContent":["/** @jsxImportSource react */\n\nimport { cn } from '@videojs/utils/style';\nimport { resolveClassName } from '@videojs/utils/style';\n\nimport {\n  FullscreenEnterIcon as FullscreenEnterIconPrimitive,\n  FullscreenExitIcon as FullscreenExitIconPrimitive,\n} from '../../../../../icons/index';\nimport { FullscreenButton as FullscreenButtonPrimitive } from '../../../../skin-primitives';\nimport { Button } from '../../../shared/components/buttons/button';\n\nexport type FullscreenButtonProps = Omit<FullscreenButtonPrimitive.Props, 'children'>;\n\nexport function FullscreenButton({ className, ...props }: FullscreenButtonProps = {}) {\n  return (\n    <FullscreenButtonPrimitive\n      render={<Button />}\n      className={(state) => cn('media-fullscreen-button', resolveClassName(className, state))}\n      {...props}\n    >\n      <FullscreenEnterIconPrimitive className={cn('media-button-icon', 'media-fullscreen-button-enter-icon')} />\n      <FullscreenExitIconPrimitive className={cn('media-button-icon', 'media-fullscreen-button-exit-icon')} />\n    </FullscreenButtonPrimitive>\n  );\n}\n"],"mappings":";;;;;;;;;AAcA,SAAgB,iBAAA,IAAsE;;CAArDA,IAAAA;;EAAiD,KAAA,OAAA,KAAA,IAAA,CAAC,IAAlDA;;;;CAAE,IAAA;CAAc,IAAA;CAAhBA,IAAAA,EAAAA,OAAAA,IAAAA;EAAE,CAAA,CAAA,cAAW,SAAbA;;;;;;;;CAGnBC,IAAAA;;EAAC,KAAA,oBAAA,QAAD,CAAS,CAAA;;;CACNC,IAAAA;CAA0D,IAAA,EAAA,OAAA,WAAA;EAA1D,MAAC,UAAU,GAAG,2BAA2B,iBAAiB,WAAW,KAAK,CAAC;EAAjB,EAAA,KAAA;;;CAGrEC,IAAAA;;EAAC,KAAA,oBAAA,YAAD,EAA8B,WAAW,GAAG,qBAAqB,oCAAoC,EAAI,CAAA;;;CACzGC,IAAAA;;EAAC,KAAA,oBAAA,cAAD,EAA6B,WAAW,GAAG,qBAAqB,mCAAmC,EAAI,CAAA;;;CANzGC,IAAAA;CAGM,IAAA,EAAA,QAAA,SAAA,EAAA,QADOH,IAAAA;EAFb,KAAA,qBAAC,oBAAD;GACE,QAAQD;GACR,WAAWC;GACX,GAAI;GAHN,UAAA,CAKEC,IACAC,EACyB;;EAJrB,EAAA,MAAA;EADOF,EAAAA,MAAAA;;;CAHf,OACEG;AASJ"}

package/dist/dev/internal/skins/default-video/components/buttons/mute-button.js

@@ -3,21 +3,73 @@ import ForwardRef from "../../../../../icons/dist/react/default/volume-high.js";
 import ForwardRef$1 from "../../../../../icons/dist/react/default/volume-low.js";
 import ForwardRef$2 from "../../../../../icons/dist/react/default/volume-off.js";
 import { Button } from "../../../shared/components/buttons/button.js";
+import { c } from "react-compiler-runtime";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cn, resolveClassName } from "@videojs/utils/style";
 //#region src/internal/skins/default-video/components/buttons/mute-button.tsx
 /** @jsxImportSource react */
-function MuteButton({ className, ...props } = {}) {
-	return /* @__PURE__ */ jsxs(MuteButton$1, {
-		render: /* @__PURE__ */ jsx(Button, {}),
-		className: (state) => cn("media-mute-button", resolveClassName(className, state)),
-		...props,
-		children: [
-			/* @__PURE__ */ jsx(ForwardRef$2, { className: cn("media-button-icon", "media-mute-button-off-icon") }),
-			/* @__PURE__ */ jsx(ForwardRef$1, { className: cn("media-button-icon", "media-mute-button-low-icon") }),
-			/* @__PURE__ */ jsx(ForwardRef, { className: cn("media-button-icon", "media-mute-button-high-icon") })
-		]
-	});
+function MuteButton(t0) {
+	const $ = c(14);
+	let t1;
+	if ($[0] !== t0) {
+		t1 = t0 === void 0 ? {} : t0;
+		$[0] = t0;
+		$[1] = t1;
+	} else t1 = $[1];
+	let className;
+	let props;
+	if ($[2] !== t1) {
+		({className, ...props} = t1);
+		$[2] = t1;
+		$[3] = className;
+		$[4] = props;
+	} else {
+		className = $[3];
+		props = $[4];
+	}
+	let t2;
+	if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = /* @__PURE__ */ jsx(Button, {});
+		$[5] = t2;
+	} else t2 = $[5];
+	let t3;
+	if ($[6] !== className) {
+		t3 = (state) => cn("media-mute-button", resolveClassName(className, state));
+		$[6] = className;
+		$[7] = t3;
+	} else t3 = $[7];
+	let t4;
+	if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
+		t4 = /* @__PURE__ */ jsx(ForwardRef$2, { className: cn("media-button-icon", "media-mute-button-off-icon") });
+		$[8] = t4;
+	} else t4 = $[8];
+	let t5;
+	if ($[9] === Symbol.for("react.memo_cache_sentinel")) {
+		t5 = /* @__PURE__ */ jsx(ForwardRef$1, { className: cn("media-button-icon", "media-mute-button-low-icon") });
+		$[9] = t5;
+	} else t5 = $[9];
+	let t6;
+	if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
+		t6 = /* @__PURE__ */ jsx(ForwardRef, { className: cn("media-button-icon", "media-mute-button-high-icon") });
+		$[10] = t6;
+	} else t6 = $[10];
+	let t7;
+	if ($[11] !== props || $[12] !== t3) {
+		t7 = /* @__PURE__ */ jsxs(MuteButton$1, {
+			render: t2,
+			className: t3,
+			...props,
+			children: [
+				t4,
+				t5,
+				t6
+			]
+		});
+		$[11] = props;
+		$[12] = t3;
+		$[13] = t7;
+	} else t7 = $[13];
+	return t7;
 }
 //#endregion
 export { MuteButton };

package/dist/dev/internal/skins/default-video/components/buttons/mute-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"mute-button.js","names":["MuteButtonPrimitive","VolumeOffIconPrimitive","VolumeLowIconPrimitive","VolumeHighIconPrimitive"],"sources":["../../../../../../../src/internal/skins/default-video/components/buttons/mute-button.tsx"],"sourcesContent":["/** @jsxImportSource react */\n\nimport { cn, resolveClassName } from '@videojs/utils/style';\n\nimport {\n  VolumeOffIcon as VolumeOffIconPrimitive,\n  VolumeLowIcon as VolumeLowIconPrimitive,\n  VolumeHighIcon as VolumeHighIconPrimitive,\n} from '../../../../../icons/index';\nimport { MuteButton as MuteButtonPrimitive } from '../../../../skin-primitives';\nimport { Button } from '../../../shared/components/buttons/button';\n\nexport type MuteButtonProps = Omit<MuteButtonPrimitive.Props, 'children'>;\n\nexport function MuteButton({ className, ...props }: MuteButtonProps = {}) {\n  return (\n    <MuteButtonPrimitive\n      render={<Button />}\n      className={(state) => cn('media-mute-button', resolveClassName(className, state))}\n      {...props}\n    >\n      <VolumeOffIconPrimitive className={cn('media-button-icon', 'media-mute-button-off-icon')} />\n      <VolumeLowIconPrimitive className={cn('media-button-icon', 'media-mute-button-low-icon')} />\n      <VolumeHighIconPrimitive className={cn('media-button-icon', 'media-mute-button-high-icon')} />\n    </MuteButtonPrimitive>\n  );\n}\n"],"mappings":";;;;;;;;;AAcA,SAAgB,WAAW,EAAE,WAAW,GAAG,UAA2B,CAAC,GAAG;CACxE,OACE,qBAACA,cAAD;EACE,QAAQ,oBAAC,QAAD,CAAS,CAAA;EACjB,YAAY,UAAU,GAAG,qBAAqB,iBAAiB,WAAW,KAAK,CAAC;EAChF,GAAI;EAHN,UAAA;GAKE,oBAACC,cAAD,EAAwB,WAAW,GAAG,qBAAqB,4BAA4B,EAAI,CAAA;GAC3F,oBAACC,cAAD,EAAwB,WAAW,GAAG,qBAAqB,4BAA4B,EAAI,CAAA;GAC3F,oBAACC,YAAD,EAAyB,WAAW,GAAG,qBAAqB,6BAA6B,EAAI,CAAA;EAC1E;;AAEzB"}
+{"version":3,"file":"mute-button.js","names":["{ className, ...props }: MuteButtonProps = {}","<Button />","(state) => cn('media-mute-button', resolveClassName(className, state))","<VolumeOffIconPrimitive className={cn('media-button-icon', 'media-mute-button-off-icon')} />","<VolumeLowIconPrimitive className={cn('media-button-icon', 'media-mute-button-low-icon')} />","<VolumeHighIconPrimitive className={cn('media-button-icon', 'media-mute-button-high-icon')} />","<MuteButtonPrimitive\n      render={<Button />}\n      className={(state) => cn('media-mute-button', resolveClassName(className, state))}\n      {...props}\n    >\n      <VolumeOffIconPrimitive className={cn('media-button-icon', 'media-mute-button-off-icon')} />\n      <VolumeLowIconPrimitive className={cn('media-button-icon', 'media-mute-button-low-icon')} />\n      <VolumeHighIconPrimitive className={cn('media-button-icon', 'media-mute-button-high-icon')} />\n    </MuteButtonPrimitive>"],"sources":["../../../../../../../src/internal/skins/default-video/components/buttons/mute-button.tsx"],"sourcesContent":["/** @jsxImportSource react */\n\nimport { cn } from '@videojs/utils/style';\nimport { resolveClassName } from '@videojs/utils/style';\n\nimport {\n  VolumeOffIcon as VolumeOffIconPrimitive,\n  VolumeLowIcon as VolumeLowIconPrimitive,\n  VolumeHighIcon as VolumeHighIconPrimitive,\n} from '../../../../../icons/index';\nimport { MuteButton as MuteButtonPrimitive } from '../../../../skin-primitives';\nimport { Button } from '../../../shared/components/buttons/button';\n\nexport type MuteButtonProps = Omit<MuteButtonPrimitive.Props, 'children'>;\n\nexport function MuteButton({ className, ...props }: MuteButtonProps = {}) {\n  return (\n    <MuteButtonPrimitive\n      render={<Button />}\n      className={(state) => cn('media-mute-button', resolveClassName(className, state))}\n      {...props}\n    >\n      <VolumeOffIconPrimitive className={cn('media-button-icon', 'media-mute-button-off-icon')} />\n      <VolumeLowIconPrimitive className={cn('media-button-icon', 'media-mute-button-low-icon')} />\n      <VolumeHighIconPrimitive className={cn('media-button-icon', 'media-mute-button-high-icon')} />\n    </MuteButtonPrimitive>\n  );\n}\n"],"mappings":";;;;;;;;;;AAeA,SAAgB,WAAA,IAA0D;;CAA/CA,IAAAA;;EAA2C,KAAA,OAAA,KAAA,IAAA,CAAC,IAA5CA;;;;CAAE,IAAA;CAAc,IAAA;CAAhBA,IAAAA,EAAAA,OAAAA,IAAAA;EAAE,CAAA,CAAA,cAAW,SAAbA;;;;;;;;CAGbC,IAAAA;;EAAC,KAAA,oBAAA,QAAD,CAAS,CAAA;;;CACNC,IAAAA;CAAoD,IAAA,EAAA,OAAA,WAAA;EAApD,MAAC,UAAU,GAAG,qBAAqB,iBAAiB,WAAW,KAAK,CAAC;EAAjB,EAAA,KAAA;;;CAG/DC,IAAAA;;EAAC,KAAA,oBAAA,cAAD,EAAwB,WAAW,GAAG,qBAAqB,4BAA4B,EAAI,CAAA;;;CAC3FC,IAAAA;;EAAC,KAAA,oBAAA,cAAD,EAAwB,WAAW,GAAG,qBAAqB,4BAA4B,EAAI,CAAA;;;CAC3FC,IAAAA;;EAAC,KAAA,oBAAA,YAAD,EAAyB,WAAW,GAAG,qBAAqB,6BAA6B,EAAI,CAAA;;;CAP/FC,IAAAA;CAGM,IAAA,EAAA,QAAA,SAAA,EAAA,QADOJ,IAAAA;EAFb,KAAA,qBAAC,cAAD;GACE,QAAQD;GACR,WAAWC;GACX,GAAI;GAHN,UAAA;IAKEC;IACAC;IACAC;GACmB;;EALf,EAAA,MAAA;EADOH,EAAAA,MAAAA;;;CAHf,OACEI;AAUJ"}

package/dist/dev/internal/skins/default-video/components/buttons/pip-button.js

@@ -2,17 +2,64 @@ import { PiPButton as PiPButton$1 } from "../../../../../ui/pip-button/component
 import ForwardRef from "../../../../../icons/dist/react/default/pip-enter.js";
 import ForwardRef$1 from "../../../../../icons/dist/react/default/pip-exit.js";
 import { Button } from "../../../shared/components/buttons/button.js";
+import { c } from "react-compiler-runtime";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cn, resolveClassName } from "@videojs/utils/style";
 //#region src/internal/skins/default-video/components/buttons/pip-button.tsx
 /** @jsxImportSource react */
-function PiPButton({ className, ...props } = {}) {
-	return /* @__PURE__ */ jsxs(PiPButton$1, {
-		render: /* @__PURE__ */ jsx(Button, {}),
-		className: (state) => cn("media-pip-button", resolveClassName(className, state)),
-		...props,
-		children: [/* @__PURE__ */ jsx(ForwardRef, { className: cn("media-button-icon", "media-pip-button-enter-icon") }), /* @__PURE__ */ jsx(ForwardRef$1, { className: cn("media-button-icon", "media-pip-button-exit-icon") })]
-	});
+function PiPButton(t0) {
+	const $ = c(13);
+	let t1;
+	if ($[0] !== t0) {
+		t1 = t0 === void 0 ? {} : t0;
+		$[0] = t0;
+		$[1] = t1;
+	} else t1 = $[1];
+	let className;
+	let props;
+	if ($[2] !== t1) {
+		({className, ...props} = t1);
+		$[2] = t1;
+		$[3] = className;
+		$[4] = props;
+	} else {
+		className = $[3];
+		props = $[4];
+	}
+	let t2;
+	if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = /* @__PURE__ */ jsx(Button, {});
+		$[5] = t2;
+	} else t2 = $[5];
+	let t3;
+	if ($[6] !== className) {
+		t3 = (state) => cn("media-pip-button", resolveClassName(className, state));
+		$[6] = className;
+		$[7] = t3;
+	} else t3 = $[7];
+	let t4;
+	if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
+		t4 = /* @__PURE__ */ jsx(ForwardRef, { className: cn("media-button-icon", "media-pip-button-enter-icon") });
+		$[8] = t4;
+	} else t4 = $[8];
+	let t5;
+	if ($[9] === Symbol.for("react.memo_cache_sentinel")) {
+		t5 = /* @__PURE__ */ jsx(ForwardRef$1, { className: cn("media-button-icon", "media-pip-button-exit-icon") });
+		$[9] = t5;
+	} else t5 = $[9];
+	let t6;
+	if ($[10] !== props || $[11] !== t3) {
+		t6 = /* @__PURE__ */ jsxs(PiPButton$1, {
+			render: t2,
+			className: t3,
+			...props,
+			children: [t4, t5]
+		});
+		$[10] = props;
+		$[11] = t3;
+		$[12] = t6;
+	} else t6 = $[12];
+	return t6;
 }
 //#endregion
 export { PiPButton };

package/dist/dev/internal/skins/default-video/components/buttons/pip-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"pip-button.js","names":["PiPButtonPrimitive","PipEnterIconPrimitive","PipExitIconPrimitive"],"sources":["../../../../../../../src/internal/skins/default-video/components/buttons/pip-button.tsx"],"sourcesContent":["/** @jsxImportSource react */\n\nimport { cn, resolveClassName } from '@videojs/utils/style';\n\nimport { PipEnterIcon as PipEnterIconPrimitive, PipExitIcon as PipExitIconPrimitive } from '../../../../../icons/index';\nimport { PiPButton as PiPButtonPrimitive } from '../../../../skin-primitives';\nimport { Button } from '../../../shared/components/buttons/button';\n\nexport type PiPButtonProps = Omit<PiPButtonPrimitive.Props, 'children'>;\n\nexport function PiPButton({ className, ...props }: PiPButtonProps = {}) {\n  return (\n    <PiPButtonPrimitive\n      render={<Button />}\n      className={(state) => cn('media-pip-button', resolveClassName(className, state))}\n      {...props}\n    >\n      <PipEnterIconPrimitive className={cn('media-button-icon', 'media-pip-button-enter-icon')} />\n      <PipExitIconPrimitive className={cn('media-button-icon', 'media-pip-button-exit-icon')} />\n    </PiPButtonPrimitive>\n  );\n}\n"],"mappings":";;;;;;;;AAUA,SAAgB,UAAU,EAAE,WAAW,GAAG,UAA0B,CAAC,GAAG;CACtE,OACE,qBAACA,aAAD;EACE,QAAQ,oBAAC,QAAD,CAAS,CAAA;EACjB,YAAY,UAAU,GAAG,oBAAoB,iBAAiB,WAAW,KAAK,CAAC;EAC/E,GAAI;EAHN,UAAA,CAKE,oBAACC,YAAD,EAAuB,WAAW,GAAG,qBAAqB,6BAA6B,EAAI,CAAA,GAC3F,oBAACC,cAAD,EAAsB,WAAW,GAAG,qBAAqB,4BAA4B,EAAI,CAAA,CACvE;;AAExB"}
+{"version":3,"file":"pip-button.js","names":["{ className, ...props }: PiPButtonProps = {}","<Button />","(state) => cn('media-pip-button', resolveClassName(className, state))","<PipEnterIconPrimitive className={cn('media-button-icon', 'media-pip-button-enter-icon')} />","<PipExitIconPrimitive className={cn('media-button-icon', 'media-pip-button-exit-icon')} />","<PiPButtonPrimitive\n      render={<Button />}\n      className={(state) => cn('media-pip-button', resolveClassName(className, state))}\n      {...props}\n    >\n      <PipEnterIconPrimitive className={cn('media-button-icon', 'media-pip-button-enter-icon')} />\n      <PipExitIconPrimitive className={cn('media-button-icon', 'media-pip-button-exit-icon')} />\n    </PiPButtonPrimitive>"],"sources":["../../../../../../../src/internal/skins/default-video/components/buttons/pip-button.tsx"],"sourcesContent":["/** @jsxImportSource react */\n\nimport { cn } from '@videojs/utils/style';\nimport { resolveClassName } from '@videojs/utils/style';\n\nimport { PipEnterIcon as PipEnterIconPrimitive, PipExitIcon as PipExitIconPrimitive } from '../../../../../icons/index';\nimport { PiPButton as PiPButtonPrimitive } from '../../../../skin-primitives';\nimport { Button } from '../../../shared/components/buttons/button';\n\nexport type PiPButtonProps = Omit<PiPButtonPrimitive.Props, 'children'>;\n\nexport function PiPButton({ className, ...props }: PiPButtonProps = {}) {\n  return (\n    <PiPButtonPrimitive\n      render={<Button />}\n      className={(state) => cn('media-pip-button', resolveClassName(className, state))}\n      {...props}\n    >\n      <PipEnterIconPrimitive className={cn('media-button-icon', 'media-pip-button-enter-icon')} />\n      <PipExitIconPrimitive className={cn('media-button-icon', 'media-pip-button-exit-icon')} />\n    </PiPButtonPrimitive>\n  );\n}\n"],"mappings":";;;;;;;;;AAWA,SAAgB,UAAA,IAAwD;;CAA9CA,IAAAA;;EAA0C,KAAA,OAAA,KAAA,IAAA,CAAC,IAA3CA;;;;CAAE,IAAA;CAAc,IAAA;CAAhBA,IAAAA,EAAAA,OAAAA,IAAAA;EAAE,CAAA,CAAA,cAAW,SAAbA;;;;;;;;CAGZC,IAAAA;;EAAC,KAAA,oBAAA,QAAD,CAAS,CAAA;;;CACNC,IAAAA;CAAmD,IAAA,EAAA,OAAA,WAAA;EAAnD,MAAC,UAAU,GAAG,oBAAoB,iBAAiB,WAAW,KAAK,CAAC;EAAjB,EAAA,KAAA;;;CAG9DC,IAAAA;;EAAC,KAAA,oBAAA,YAAD,EAAuB,WAAW,GAAG,qBAAqB,6BAA6B,EAAI,CAAA;;;CAC3FC,IAAAA;;EAAC,KAAA,oBAAA,cAAD,EAAsB,WAAW,GAAG,qBAAqB,4BAA4B,EAAI,CAAA;;;CAN3FC,IAAAA;CAGM,IAAA,EAAA,QAAA,SAAA,EAAA,QADOH,IAAAA;EAFb,KAAA,qBAAC,aAAD;GACE,QAAQD;GACR,WAAWC;GACX,GAAI;GAHN,UAAA,CAKEC,IACAC,EACkB;;EAJd,EAAA,MAAA;EADOF,EAAAA,MAAAA;;;CAHf,OACEG;AASJ"}

package/dist/dev/internal/skins/default-video/components/buttons/play-button.js

@@ -3,21 +3,73 @@ import ForwardRef from "../../../../../icons/dist/react/default/pause.js";
 import ForwardRef$1 from "../../../../../icons/dist/react/default/play.js";
 import ForwardRef$2 from "../../../../../icons/dist/react/default/restart.js";
 import { Button } from "../../../shared/components/buttons/button.js";
+import { c } from "react-compiler-runtime";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cn, resolveClassName } from "@videojs/utils/style";
 //#region src/internal/skins/default-video/components/buttons/play-button.tsx
 /** @jsxImportSource react */
-function PlayButton({ className, ...props } = {}) {
-	return /* @__PURE__ */ jsxs(PlayButton$1, {
-		render: /* @__PURE__ */ jsx(Button, {}),
-		className: (state) => cn("media-play-button", resolveClassName(className, state)),
-		...props,
-		children: [
-			/* @__PURE__ */ jsx(ForwardRef$2, { className: cn("media-button-icon", "media-play-button-restart-icon") }),
-			/* @__PURE__ */ jsx(ForwardRef$1, { className: cn("media-button-icon", "media-play-button-play-icon") }),
-			/* @__PURE__ */ jsx(ForwardRef, { className: cn("media-button-icon", "media-play-button-pause-icon") })
-		]
-	});
+function PlayButton(t0) {
+	const $ = c(14);
+	let t1;
+	if ($[0] !== t0) {
+		t1 = t0 === void 0 ? {} : t0;
+		$[0] = t0;
+		$[1] = t1;
+	} else t1 = $[1];
+	let className;
+	let props;
+	if ($[2] !== t1) {
+		({className, ...props} = t1);
+		$[2] = t1;
+		$[3] = className;
+		$[4] = props;
+	} else {
+		className = $[3];
+		props = $[4];
+	}
+	let t2;
+	if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = /* @__PURE__ */ jsx(Button, {});
+		$[5] = t2;
+	} else t2 = $[5];
+	let t3;
+	if ($[6] !== className) {
+		t3 = (state) => cn("media-play-button", resolveClassName(className, state));
+		$[6] = className;
+		$[7] = t3;
+	} else t3 = $[7];
+	let t4;
+	if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
+		t4 = /* @__PURE__ */ jsx(ForwardRef$2, { className: cn("media-button-icon", "media-play-button-restart-icon") });
+		$[8] = t4;
+	} else t4 = $[8];
+	let t5;
+	if ($[9] === Symbol.for("react.memo_cache_sentinel")) {
+		t5 = /* @__PURE__ */ jsx(ForwardRef$1, { className: cn("media-button-icon", "media-play-button-play-icon") });
+		$[9] = t5;
+	} else t5 = $[9];
+	let t6;
+	if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
+		t6 = /* @__PURE__ */ jsx(ForwardRef, { className: cn("media-button-icon", "media-play-button-pause-icon") });
+		$[10] = t6;
+	} else t6 = $[10];
+	let t7;
+	if ($[11] !== props || $[12] !== t3) {
+		t7 = /* @__PURE__ */ jsxs(PlayButton$1, {
+			render: t2,
+			className: t3,
+			...props,
+			children: [
+				t4,
+				t5,
+				t6
+			]
+		});
+		$[11] = props;
+		$[12] = t3;
+		$[13] = t7;
+	} else t7 = $[13];
+	return t7;
 }
 //#endregion
 export { PlayButton };

package/dist/dev/internal/skins/default-video/components/buttons/play-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"play-button.js","names":["PlayButtonPrimitive","RestartIconPrimitive","PlayIconPrimitive","PauseIconPrimitive"],"sources":["../../../../../../../src/internal/skins/default-video/components/buttons/play-button.tsx"],"sourcesContent":["/** @jsxImportSource react */\n\nimport { cn, resolveClassName } from '@videojs/utils/style';\n\nimport {\n  RestartIcon as RestartIconPrimitive,\n  PlayIcon as PlayIconPrimitive,\n  PauseIcon as PauseIconPrimitive,\n} from '../../../../../icons/index';\nimport { PlayButton as PlayButtonPrimitive } from '../../../../skin-primitives';\nimport { Button } from '../../../shared/components/buttons/button';\n\nexport type PlayButtonProps = Omit<PlayButtonPrimitive.Props, 'children'>;\n\nexport function PlayButton({ className, ...props }: PlayButtonProps = {}) {\n  return (\n    <PlayButtonPrimitive\n      render={<Button />}\n      className={(state) => cn('media-play-button', resolveClassName(className, state))}\n      {...props}\n    >\n      <RestartIconPrimitive className={cn('media-button-icon', 'media-play-button-restart-icon')} />\n      <PlayIconPrimitive className={cn('media-button-icon', 'media-play-button-play-icon')} />\n      <PauseIconPrimitive className={cn('media-button-icon', 'media-play-button-pause-icon')} />\n    </PlayButtonPrimitive>\n  );\n}\n"],"mappings":";;;;;;;;;AAcA,SAAgB,WAAW,EAAE,WAAW,GAAG,UAA2B,CAAC,GAAG;CACxE,OACE,qBAACA,cAAD;EACE,QAAQ,oBAAC,QAAD,CAAS,CAAA;EACjB,YAAY,UAAU,GAAG,qBAAqB,iBAAiB,WAAW,KAAK,CAAC;EAChF,GAAI;EAHN,UAAA;GAKE,oBAACC,cAAD,EAAsB,WAAW,GAAG,qBAAqB,gCAAgC,EAAI,CAAA;GAC7F,oBAACC,cAAD,EAAmB,WAAW,GAAG,qBAAqB,6BAA6B,EAAI,CAAA;GACvF,oBAACC,YAAD,EAAoB,WAAW,GAAG,qBAAqB,8BAA8B,EAAI,CAAA;EACtE;;AAEzB"}
+{"version":3,"file":"play-button.js","names":["{ className, ...props }: PlayButtonProps = {}","<Button />","(state) => cn('media-play-button', resolveClassName(className, state))","<RestartIconPrimitive className={cn('media-button-icon', 'media-play-button-restart-icon')} />","<PlayIconPrimitive className={cn('media-button-icon', 'media-play-button-play-icon')} />","<PauseIconPrimitive className={cn('media-button-icon', 'media-play-button-pause-icon')} />","<PlayButtonPrimitive\n      render={<Button />}\n      className={(state) => cn('media-play-button', resolveClassName(className, state))}\n      {...props}\n    >\n      <RestartIconPrimitive className={cn('media-button-icon', 'media-play-button-restart-icon')} />\n      <PlayIconPrimitive className={cn('media-button-icon', 'media-play-button-play-icon')} />\n      <PauseIconPrimitive className={cn('media-button-icon', 'media-play-button-pause-icon')} />\n    </PlayButtonPrimitive>"],"sources":["../../../../../../../src/internal/skins/default-video/components/buttons/play-button.tsx"],"sourcesContent":["/** @jsxImportSource react */\n\nimport { cn } from '@videojs/utils/style';\nimport { resolveClassName } from '@videojs/utils/style';\n\nimport {\n  RestartIcon as RestartIconPrimitive,\n  PlayIcon as PlayIconPrimitive,\n  PauseIcon as PauseIconPrimitive,\n} from '../../../../../icons/index';\nimport { PlayButton as PlayButtonPrimitive } from '../../../../skin-primitives';\nimport { Button } from '../../../shared/components/buttons/button';\n\nexport type PlayButtonProps = Omit<PlayButtonPrimitive.Props, 'children'>;\n\nexport function PlayButton({ className, ...props }: PlayButtonProps = {}) {\n  return (\n    <PlayButtonPrimitive\n      render={<Button />}\n      className={(state) => cn('media-play-button', resolveClassName(className, state))}\n      {...props}\n    >\n      <RestartIconPrimitive className={cn('media-button-icon', 'media-play-button-restart-icon')} />\n      <PlayIconPrimitive className={cn('media-button-icon', 'media-play-button-play-icon')} />\n      <PauseIconPrimitive className={cn('media-button-icon', 'media-play-button-pause-icon')} />\n    </PlayButtonPrimitive>\n  );\n}\n"],"mappings":";;;;;;;;;;AAeA,SAAgB,WAAA,IAA0D;;CAA/CA,IAAAA;;EAA2C,KAAA,OAAA,KAAA,IAAA,CAAC,IAA5CA;;;;CAAE,IAAA;CAAc,IAAA;CAAhBA,IAAAA,EAAAA,OAAAA,IAAAA;EAAE,CAAA,CAAA,cAAW,SAAbA;;;;;;;;CAGbC,IAAAA;;EAAC,KAAA,oBAAA,QAAD,CAAS,CAAA;;;CACNC,IAAAA;CAAoD,IAAA,EAAA,OAAA,WAAA;EAApD,MAAC,UAAU,GAAG,qBAAqB,iBAAiB,WAAW,KAAK,CAAC;EAAjB,EAAA,KAAA;;;CAG/DC,IAAAA;;EAAC,KAAA,oBAAA,cAAD,EAAsB,WAAW,GAAG,qBAAqB,gCAAgC,EAAI,CAAA;;;CAC7FC,IAAAA;;EAAC,KAAA,oBAAA,cAAD,EAAmB,WAAW,GAAG,qBAAqB,6BAA6B,EAAI,CAAA;;;CACvFC,IAAAA;;EAAC,KAAA,oBAAA,YAAD,EAAoB,WAAW,GAAG,qBAAqB,8BAA8B,EAAI,CAAA;;;CAP3FC,IAAAA;CAGM,IAAA,EAAA,QAAA,SAAA,EAAA,QADOJ,IAAAA;EAFb,KAAA,qBAAC,cAAD;GACE,QAAQD;GACR,WAAWC;GACX,GAAI;GAHN,UAAA;IAKEC;IACAC;IACAC;GACmB;;EALf,EAAA,MAAA;EADOH,EAAAA,MAAAA;;;CAHf,OACEI;AAUJ"}

package/dist/dev/internal/skins/default-video/components/display/buffering-indicator.js

@@ -0,0 +1,54 @@
+import { BufferingIndicator as BufferingIndicator$1 } from "../../../../../ui/buffering-indicator/component.js";
+import ForwardRef from "../../../../../icons/dist/react/default/spinner.js";
+import { c } from "react-compiler-runtime";
+import { jsx } from "react/jsx-runtime";
+import { cn, resolveClassName } from "@videojs/utils/style";
+//#region src/internal/skins/default-video/components/display/buffering-indicator.tsx
+/** @jsxImportSource react */
+function BufferingIndicator(t0) {
+	const $ = c(11);
+	let t1;
+	if ($[0] !== t0) {
+		t1 = t0 === void 0 ? {} : t0;
+		$[0] = t0;
+		$[1] = t1;
+	} else t1 = $[1];
+	let className;
+	let props;
+	if ($[2] !== t1) {
+		({className, ...props} = t1);
+		$[2] = t1;
+		$[3] = className;
+		$[4] = props;
+	} else {
+		className = $[3];
+		props = $[4];
+	}
+	let t2;
+	if ($[5] !== className) {
+		t2 = (state) => cn("media-buffering-indicator", resolveClassName(className, state));
+		$[5] = className;
+		$[6] = t2;
+	} else t2 = $[6];
+	let t3;
+	if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
+		t3 = /* @__PURE__ */ jsx(ForwardRef, { className: "media-buffering-indicator-spinner-icon" });
+		$[7] = t3;
+	} else t3 = $[7];
+	let t4;
+	if ($[8] !== props || $[9] !== t2) {
+		t4 = /* @__PURE__ */ jsx(BufferingIndicator$1, {
+			className: t2,
+			...props,
+			children: t3
+		});
+		$[8] = props;
+		$[9] = t2;
+		$[10] = t4;
+	} else t4 = $[10];
+	return t4;
+}
+//#endregion
+export { BufferingIndicator };
+
+//# sourceMappingURL=buffering-indicator.js.map

package/dist/dev/internal/skins/default-video/components/display/buffering-indicator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"buffering-indicator.js","names":["{ className, ...props }: BufferingIndicatorProps = {}","(state) => cn('media-buffering-indicator', resolveClassName(className, state))","<SpinnerIconPrimitive className={'media-buffering-indicator-spinner-icon'} />","<BufferingIndicatorPrimitive\n      className={(state) => cn('media-buffering-indicator', resolveClassName(className, state))}\n      {...props}\n    >\n      <SpinnerIconPrimitive className={'media-buffering-indicator-spinner-icon'} />\n    </BufferingIndicatorPrimitive>"],"sources":["../../../../../../../src/internal/skins/default-video/components/display/buffering-indicator.tsx"],"sourcesContent":["/** @jsxImportSource react */\n\nimport { cn } from '@videojs/utils/style';\nimport { resolveClassName } from '@videojs/utils/style';\n\nimport { SpinnerIcon as SpinnerIconPrimitive } from '../../../../../icons/index';\nimport { BufferingIndicator as BufferingIndicatorPrimitive } from '../../../../skin-primitives';\n\nexport type BufferingIndicatorProps = Omit<BufferingIndicatorPrimitive.Props, 'children'>;\n\nexport function BufferingIndicator({ className, ...props }: BufferingIndicatorProps = {}) {\n  return (\n    <BufferingIndicatorPrimitive\n      className={(state) => cn('media-buffering-indicator', resolveClassName(className, state))}\n      {...props}\n    >\n      <SpinnerIconPrimitive className={'media-buffering-indicator-spinner-icon'} />\n    </BufferingIndicatorPrimitive>\n  );\n}\n"],"mappings":";;;;;;;AAUA,SAAgB,mBAAA,IAA0E;;CAAvDA,IAAAA;;EAAmD,KAAA,OAAA,KAAA,IAAA,CAAC,IAApDA;;;;CAAE,IAAA;CAAc,IAAA;CAAhBA,IAAAA,EAAAA,OAAAA,IAAAA;EAAE,CAAA,CAAA,cAAW,SAAbA;;;;;;;;CAGlBC,IAAAA;CAA4D,IAAA,EAAA,OAAA,WAAA;EAA5D,MAAC,UAAU,GAAG,6BAA6B,iBAAiB,WAAW,KAAK,CAAC;EAAjB,EAAA,KAAA;;;CAGvEC,IAAAA;;EAAC,KAAA,oBAAA,YAAD,EAAsB,WAAW,yCAA2C,CAAA;;;CAJ9EC,IAAAA;CAEM,IAAA,EAAA,OAAA,SAAA,EAAA,OADOF,IAAAA;EADb,KAAA,oBAAC,sBAAD;GACE,WAAWA;GACX,GAAI;GAEJC,UAAAA;EAC2B,CAAA;EAHvB,EAAA,KAAA;EADOD,EAAAA,KAAAA;;;CAFf,OACEE;AAOJ"}

package/dist/dev/internal/skins/default-video/components/display/seek-indicator.js

@@ -0,0 +1,61 @@
+import { SeekIndicatorRoot } from "../../../../../ui/seek-indicator/root.js";
+import { SeekIndicatorValue } from "../../../../../ui/seek-indicator/value.js";
+import ForwardRef from "../../../../../icons/dist/react/default/chevron.js";
+import { c } from "react-compiler-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn, resolveClassName } from "@videojs/utils/style";
+//#region src/internal/skins/default-video/components/display/seek-indicator.tsx
+/** @jsxImportSource react */
+function SeekIndicator(t0) {
+	const $ = c(12);
+	let t1;
+	if ($[0] !== t0) {
+		t1 = t0 === void 0 ? {} : t0;
+		$[0] = t0;
+		$[1] = t1;
+	} else t1 = $[1];
+	let className;
+	let props;
+	if ($[2] !== t1) {
+		({className, ...props} = t1);
+		$[2] = t1;
+		$[3] = className;
+		$[4] = props;
+	} else {
+		className = $[3];
+		props = $[4];
+	}
+	let t2;
+	if ($[5] !== className) {
+		t2 = (state) => cn("media-seek-indicator", resolveClassName(className, state));
+		$[5] = className;
+		$[6] = t2;
+	} else t2 = $[6];
+	let t3;
+	let t4;
+	if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
+		t3 = /* @__PURE__ */ jsx(ForwardRef, { className: "media-seek-indicator-icon" });
+		t4 = /* @__PURE__ */ jsx(SeekIndicatorValue, { className: "media-seek-indicator-value" });
+		$[7] = t3;
+		$[8] = t4;
+	} else {
+		t3 = $[7];
+		t4 = $[8];
+	}
+	let t5;
+	if ($[9] !== props || $[10] !== t2) {
+		t5 = /* @__PURE__ */ jsxs(SeekIndicatorRoot, {
+			className: t2,
+			...props,
+			children: [t3, t4]
+		});
+		$[9] = props;
+		$[10] = t2;
+		$[11] = t5;
+	} else t5 = $[11];
+	return t5;
+}
+//#endregion
+export { SeekIndicator };
+
+//# sourceMappingURL=seek-indicator.js.map

package/dist/dev/internal/skins/default-video/components/display/seek-indicator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"seek-indicator.js","names":["{ className, ...props }: SeekIndicatorProps = {}","(state) => cn('media-seek-indicator', resolveClassName(className, state))","<ChevronIconPrimitive className={'media-seek-indicator-icon'} />","<SeekIndicatorPrimitive.Value className={'media-seek-indicator-value'} />","SeekIndicatorPrimitive.Value","<SeekIndicatorPrimitive.Root\n      className={(state) => cn('media-seek-indicator', resolveClassName(className, state))}\n      {...props}\n    >\n      <ChevronIconPrimitive className={'media-seek-indicator-icon'} />\n      <SeekIndicatorPrimitive.Value className={'media-seek-indicator-value'} />\n    </SeekIndicatorPrimitive.Root>","SeekIndicatorPrimitive.Root"],"sources":["../../../../../../../src/internal/skins/default-video/components/display/seek-indicator.tsx"],"sourcesContent":["/** @jsxImportSource react */\n\nimport { cn } from '@videojs/utils/style';\nimport { resolveClassName } from '@videojs/utils/style';\n\nimport { ChevronIcon as ChevronIconPrimitive } from '../../../../../icons/index';\nimport { SeekIndicator as SeekIndicatorPrimitive } from '../../../../skin-primitives';\n\nexport type SeekIndicatorProps = Omit<SeekIndicatorPrimitive.RootProps, 'children'>;\n\nexport function SeekIndicator({ className, ...props }: SeekIndicatorProps = {}) {\n  return (\n    <SeekIndicatorPrimitive.Root\n      className={(state) => cn('media-seek-indicator', resolveClassName(className, state))}\n      {...props}\n    >\n      <ChevronIconPrimitive className={'media-seek-indicator-icon'} />\n      <SeekIndicatorPrimitive.Value className={'media-seek-indicator-value'} />\n    </SeekIndicatorPrimitive.Root>\n  );\n}\n"],"mappings":";;;;;;;;AAUA,SAAgB,cAAA,IAAgE;;CAAlDA,IAAAA;;EAA8C,KAAA,OAAA,KAAA,IAAA,CAAC,IAA/CA;;;;CAAE,IAAA;CAAc,IAAA;CAAhBA,IAAAA,EAAAA,OAAAA,IAAAA;EAAE,CAAA,CAAA,cAAW,SAAbA;;;;;;;;CAGbC,IAAAA;CAAuD,IAAA,EAAA,OAAA,WAAA;EAAvD,MAAC,UAAU,GAAG,wBAAwB,iBAAiB,WAAW,KAAK,CAAC;EAAjB,EAAA,KAAA;;;CAGlEC,IAAAA;CACAC,IAAAA;;EADA,KAAA,oBAAC,YAAD,EAAsB,WAAW,4BAA8B,CAAA;EAC/D,KAAA,oBAACC,oBAAD,EAA8B,WAAW,6BAA+B,CAAA;;;;;;;CAL1EC,IAAAA;CAEM,IAAA,EAAA,OAAA,SAAA,EAAA,QADOJ,IAAAA;EADb,KAAA,qBAACK,mBAAD;GACE,WAAWL;GACX,GAAI;GAFN,UAAA,CAIEC,IACAC,EAC2B;;EAJvB,EAAA,KAAA;EADOF,EAAAA,MAAAA;;;CAFf,OACEI;AAQJ"}

package/dist/dev/internal/skins/default-video/components/display/status-indicator.js

@@ -0,0 +1,130 @@
+import { StatusIndicatorRoot } from "../../../../../ui/status-indicator/root.js";
+import { StatusIndicatorValue } from "../../../../../ui/status-indicator/value.js";
+import ForwardRef from "../../../../../icons/dist/react/default/captions-off.js";
+import ForwardRef$1 from "../../../../../icons/dist/react/default/captions-on.js";
+import ForwardRef$2 from "../../../../../icons/dist/react/default/fullscreen-enter.js";
+import ForwardRef$3 from "../../../../../icons/dist/react/default/fullscreen-exit.js";
+import ForwardRef$4 from "../../../../../icons/dist/react/default/pause.js";
+import ForwardRef$5 from "../../../../../icons/dist/react/default/pip-enter.js";
+import ForwardRef$6 from "../../../../../icons/dist/react/default/pip-exit.js";
+import ForwardRef$7 from "../../../../../icons/dist/react/default/play.js";
+import { c } from "react-compiler-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn, resolveClassName } from "@videojs/utils/style";
+//#region src/internal/skins/default-video/components/display/status-indicator.tsx
+/** @jsxImportSource react */
+const TOP_STATUS_ACTIONS = [
+	"toggleSubtitles",
+	"toggleFullscreen",
+	"togglePictureInPicture"
+];
+const PLAYBACK_STATUS_ACTIONS = ["togglePaused"];
+function StatusIndicator(t0) {
+	const $ = c(11);
+	let t1;
+	if ($[0] !== t0) {
+		t1 = t0 === void 0 ? {} : t0;
+		$[0] = t0;
+		$[1] = t1;
+	} else t1 = $[1];
+	let className;
+	let props;
+	if ($[2] !== t1) {
+		({className, ...props} = t1);
+		$[2] = t1;
+		$[3] = className;
+		$[4] = props;
+	} else {
+		className = $[3];
+		props = $[4];
+	}
+	let t2;
+	if ($[5] !== className) {
+		t2 = (state) => cn("media-indicator", "media-status-indicator", resolveClassName(className, state));
+		$[5] = className;
+		$[6] = t2;
+	} else t2 = $[6];
+	let t3;
+	if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
+		t3 = /* @__PURE__ */ jsxs("div", {
+			className: cn("media-indicator-content", "media-status-indicator-content"),
+			children: [
+				/* @__PURE__ */ jsx(ForwardRef$1, { className: "media-status-indicator-captions-on-icon" }),
+				/* @__PURE__ */ jsx(ForwardRef, { className: "media-status-indicator-captions-off-icon" }),
+				/* @__PURE__ */ jsx(ForwardRef$2, { className: "media-status-indicator-fullscreen-enter-icon" }),
+				/* @__PURE__ */ jsx(ForwardRef$3, { className: "media-status-indicator-fullscreen-exit-icon" }),
+				/* @__PURE__ */ jsx(ForwardRef$5, { className: "media-status-indicator-pip-enter-icon" }),
+				/* @__PURE__ */ jsx(ForwardRef$6, { className: "media-status-indicator-pip-exit-icon" }),
+				/* @__PURE__ */ jsx(StatusIndicatorValue, { className: "media-status-indicator-value" })
+			]
+		});
+		$[7] = t3;
+	} else t3 = $[7];
+	let t4;
+	if ($[8] !== props || $[9] !== t2) {
+		t4 = /* @__PURE__ */ jsx(StatusIndicatorRoot, {
+			actions: TOP_STATUS_ACTIONS,
+			className: t2,
+			...props,
+			children: t3
+		});
+		$[8] = props;
+		$[9] = t2;
+		$[10] = t4;
+	} else t4 = $[10];
+	return t4;
+}
+function PlaybackStatusIndicator(t0) {
+	const $ = c(12);
+	let t1;
+	if ($[0] !== t0) {
+		t1 = t0 === void 0 ? {} : t0;
+		$[0] = t0;
+		$[1] = t1;
+	} else t1 = $[1];
+	let className;
+	let props;
+	if ($[2] !== t1) {
+		({className, ...props} = t1);
+		$[2] = t1;
+		$[3] = className;
+		$[4] = props;
+	} else {
+		className = $[3];
+		props = $[4];
+	}
+	let t2;
+	if ($[5] !== className) {
+		t2 = (state) => cn("media-playback-status-indicator", resolveClassName(className, state));
+		$[5] = className;
+		$[6] = t2;
+	} else t2 = $[6];
+	let t3;
+	let t4;
+	if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
+		t3 = /* @__PURE__ */ jsx(ForwardRef$7, { className: "media-playback-status-indicator-play-icon" });
+		t4 = /* @__PURE__ */ jsx(ForwardRef$4, { className: "media-playback-status-indicator-pause-icon" });
+		$[7] = t3;
+		$[8] = t4;
+	} else {
+		t3 = $[7];
+		t4 = $[8];
+	}
+	let t5;
+	if ($[9] !== props || $[10] !== t2) {
+		t5 = /* @__PURE__ */ jsxs(StatusIndicatorRoot, {
+			actions: PLAYBACK_STATUS_ACTIONS,
+			className: t2,
+			...props,
+			children: [t3, t4]
+		});
+		$[9] = props;
+		$[10] = t2;
+		$[11] = t5;
+	} else t5 = $[11];
+	return t5;
+}
+//#endregion
+export { PlaybackStatusIndicator, StatusIndicator };
+
+//# sourceMappingURL=status-indicator.js.map