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

package/dist/default/internal/skins/minimal-live-video/components/buttons/cast-button.js

@@ -1,20 +1,65 @@
-import { CastButton as CastButton$1 } from "../../../../../ui/cast-button/cast-button.js";
+import { CastButton as CastButton$1 } from "../../../../../ui/cast-button/component.js";
+import { Button } from "../../../shared/components/buttons/button.js";
 import ForwardRef from "../../../../../icons/dist/react/minimal/cast-enter.js";
 import ForwardRef$1 from "../../../../../icons/dist/react/minimal/cast-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/minimal-live-video/components/buttons/cast-button.tsx
 /** @jsxImportSource react */
-function CastButton({ className, ...props } = {}) {
-	return /* @__PURE__ */ jsxs(CastButton$1, {
-		render: /* @__PURE__ */ jsx(Button, {}),
-		className: (state) => cn("media-cast-button", resolveClassName(className, state)),
-		...props,
-		children: [/* @__PURE__ */ jsx(ForwardRef, { className: cn("media-button-icon", "media-cast-button-enter-icon") }), /* @__PURE__ */ jsx(ForwardRef$1, { className: cn("media-button-icon", "media-cast-button-exit-icon") })]
-	});
+function CastButton(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-cast-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-cast-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-cast-button-exit-icon") });
+		$[9] = t5;
+	} else t5 = $[9];
+	let t6;
+	if ($[10] !== props || $[11] !== t3) {
+		t6 = /* @__PURE__ */ jsxs(CastButton$1, {
+			render: t2,
+			className: t3,
+			...props,
+			children: [t4, t5]
+		});
+		$[10] = props;
+		$[11] = t3;
+		$[12] = t6;
+	} else t6 = $[12];
+	return t6;
 }
 //#endregion
 export { CastButton };
-
-//# sourceMappingURL=cast-button.js.map

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

@@ -1,20 +1,65 @@
-import { FullscreenButton as FullscreenButton$1 } from "../../../../../ui/fullscreen-button/fullscreen-button.js";
+import { FullscreenButton as FullscreenButton$1 } from "../../../../../ui/fullscreen-button/component.js";
+import { Button } from "../../../shared/components/buttons/button.js";
 import ForwardRef from "../../../../../icons/dist/react/minimal/fullscreen-enter.js";
 import ForwardRef$1 from "../../../../../icons/dist/react/minimal/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/minimal-live-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 };
-
-//# sourceMappingURL=fullscreen-button.js.map

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

@@ -1,25 +1,75 @@
-import { MuteButton as MuteButton$1 } from "../../../../../ui/mute-button/mute-button.js";
+import { MuteButton as MuteButton$1 } from "../../../../../ui/mute-button/component.js";
+import { Button } from "../../../shared/components/buttons/button.js";
 import ForwardRef from "../../../../../icons/dist/react/minimal/volume-high.js";
 import ForwardRef$1 from "../../../../../icons/dist/react/minimal/volume-low.js";
 import ForwardRef$2 from "../../../../../icons/dist/react/minimal/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/minimal-live-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 };
-
-//# sourceMappingURL=mute-button.js.map

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

@@ -1,20 +1,65 @@
-import { PiPButton as PiPButton$1 } from "../../../../../ui/pip-button/pip-button.js";
+import { PiPButton as PiPButton$1 } from "../../../../../ui/pip-button/component.js";
+import { Button } from "../../../shared/components/buttons/button.js";
 import ForwardRef from "../../../../../icons/dist/react/minimal/pip-enter.js";
 import ForwardRef$1 from "../../../../../icons/dist/react/minimal/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/minimal-live-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 };
-
-//# sourceMappingURL=pip-button.js.map

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

@@ -1,25 +1,75 @@
-import { PlayButton as PlayButton$1 } from "../../../../../ui/play-button/play-button.js";
+import { PlayButton as PlayButton$1 } from "../../../../../ui/play-button/component.js";
+import { Button } from "../../../shared/components/buttons/button.js";
 import ForwardRef from "../../../../../icons/dist/react/minimal/pause.js";
 import ForwardRef$1 from "../../../../../icons/dist/react/minimal/play.js";
 import ForwardRef$2 from "../../../../../icons/dist/react/minimal/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/minimal-live-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 };
-
-//# sourceMappingURL=play-button.js.map

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

@@ -0,0 +1,52 @@
+import { BufferingIndicator as BufferingIndicator$1 } from "../../../../../ui/buffering-indicator/component.js";
+import ForwardRef from "../../../../../icons/dist/react/minimal/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/minimal-live-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 };

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

@@ -0,0 +1,128 @@
+import { StatusIndicatorRoot } from "../../../../../ui/status-indicator/root.js";
+import { StatusIndicatorValue } from "../../../../../ui/status-indicator/value.js";
+import ForwardRef from "../../../../../icons/dist/react/minimal/captions-off.js";
+import ForwardRef$1 from "../../../../../icons/dist/react/minimal/captions-on.js";
+import ForwardRef$2 from "../../../../../icons/dist/react/minimal/fullscreen-enter.js";
+import ForwardRef$3 from "../../../../../icons/dist/react/minimal/fullscreen-exit.js";
+import ForwardRef$4 from "../../../../../icons/dist/react/minimal/pause.js";
+import ForwardRef$5 from "../../../../../icons/dist/react/minimal/pip-enter.js";
+import ForwardRef$6 from "../../../../../icons/dist/react/minimal/pip-exit.js";
+import ForwardRef$7 from "../../../../../icons/dist/react/minimal/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/minimal-live-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 };

package/dist/default/internal/skins/minimal-live-video/components/display/volume-indicator.js

@@ -0,0 +1,64 @@
+import { VolumeIndicatorFill } from "../../../../../ui/volume-indicator/fill.js";
+import { VolumeIndicatorRoot } from "../../../../../ui/volume-indicator/root.js";
+import { VolumeIndicatorValue } from "../../../../../ui/volume-indicator/value.js";
+import ForwardRef from "../../../../../icons/dist/react/minimal/volume-high.js";
+import ForwardRef$1 from "../../../../../icons/dist/react/minimal/volume-low.js";
+import ForwardRef$2 from "../../../../../icons/dist/react/minimal/volume-off.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/minimal-live-video/components/display/volume-indicator.tsx
+/** @jsxImportSource react */
+function VolumeIndicator(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-volume-indicator", resolveClassName(className, state));
+		$[5] = className;
+		$[6] = t2;
+	} else t2 = $[6];
+	let t3;
+	if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
+		t3 = /* @__PURE__ */ jsxs(VolumeIndicatorFill, {
+			className: cn("media-indicator-content", "media-volume-indicator-fill"),
+			children: [
+				/* @__PURE__ */ jsx(ForwardRef, { className: "media-volume-indicator-high-icon" }),
+				/* @__PURE__ */ jsx(ForwardRef$1, { className: "media-volume-indicator-low-icon" }),
+				/* @__PURE__ */ jsx(ForwardRef$2, { className: "media-volume-indicator-off-icon" }),
+				/* @__PURE__ */ jsx(VolumeIndicatorValue, { className: "media-volume-indicator-value" })
+			]
+		});
+		$[7] = t3;
+	} else t3 = $[7];
+	let t4;
+	if ($[8] !== props || $[9] !== t2) {
+		t4 = /* @__PURE__ */ jsx(VolumeIndicatorRoot, {
+			className: t2,
+			...props,
+			children: t3
+		});
+		$[8] = props;
+		$[9] = t2;
+		$[10] = t4;
+	} else t4 = $[10];
+	return t4;
+}
+//#endregion
+export { VolumeIndicator };