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

package/dist/default/internal/skins/minimal-video/components/sliders/time-slider.js

@@ -9,50 +9,144 @@ import { SliderValue } from "../../../../../ui/slider/value.js";
 import { TimeSliderChapterTitle } from "../../../../../ui/time-slider/chapter-title.js";
 import { TimeSliderChapters } from "../../../../../ui/time-slider/chapters.js";
 import { TimeSliderRoot } from "../../../../../ui/time-slider/root.js";
-import ForwardRef from "../../../../../icons/dist/react/minimal/spinner.js";
 import { SliderBuffer as SliderBuffer$1, SliderFill as SliderFill$1, SliderThumb as SliderThumb$1, SliderTrack as SliderTrack$1 } from "../../../shared/components/sliders/slider.js";
+import ForwardRef from "../../../../../icons/dist/react/minimal/spinner.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-video/components/sliders/time-slider.tsx
-function TimeSlider({ className, previewOverflow = "visible", ...props } = {}) {
-	return /* @__PURE__ */ jsxs(TimeSliderRoot, {
-		className: (state) => cn("media-slider", "media-time-slider", resolveClassName(className, state)),
-		...props,
-		children: [
-			/* @__PURE__ */ jsx(TimeSliderChapters, {
-				className: "media-time-slider-chapters",
-				renderChapter: (props) => /* @__PURE__ */ jsx("div", {
-					className: "media-time-slider-chapter",
-					...props,
-					children: /* @__PURE__ */ jsxs(SliderTrack, {
-						render: /* @__PURE__ */ jsx(SliderTrack$1, {}),
-						className: "media-time-slider-chapter-track",
-						children: [/* @__PURE__ */ jsx(SliderBuffer, { render: /* @__PURE__ */ jsx(SliderBuffer$1, {}) }), /* @__PURE__ */ jsx(SliderFill, { render: /* @__PURE__ */ jsx(SliderFill$1, {}) })]
-					})
-				})
-			}),
-			/* @__PURE__ */ jsx(SliderThumb, {
-				render: /* @__PURE__ */ jsx(SliderThumb$1, {}),
-				className: "media-time-slider-thumb"
-			}),
-			/* @__PURE__ */ jsxs(SliderPreview, {
-				className: "media-slider-preview",
-				overflow: previewOverflow,
-				children: [/* @__PURE__ */ jsxs(SliderThumbnailRoot, {
-					className: cn("media-slider-preview-content", "media-popup-surface", "media-slider-thumbnail"),
-					children: [/* @__PURE__ */ jsx(ThumbnailImage, { className: "media-slider-thumbnail-image" }), /* @__PURE__ */ jsx(ForwardRef, { className: "media-slider-thumbnail-spinner-icon" })]
-				}), /* @__PURE__ */ jsxs("div", {
-					className: cn("media-slider-preview-content", "media-time-slider-preview-content"),
-					children: [/* @__PURE__ */ jsx(TimeSliderChapterTitle, { className: "media-time-slider-chapter-title" }), /* @__PURE__ */ jsx(SliderValue, {
-						className: "media-time-slider-value",
-						type: "pointer"
-					})]
-				})]
-			})
-		]
+function TimeSlider(t0) {
+	const $ = c(25);
+	let t1;
+	if ($[0] !== t0) {
+		t1 = t0 === void 0 ? {} : t0;
+		$[0] = t0;
+		$[1] = t1;
+	} else t1 = $[1];
+	let className;
+	let props;
+	let renderThumbnail;
+	let t2;
+	if ($[2] !== t1) {
+		({className, previewOverflow: t2, renderThumbnail, ...props} = t1);
+		$[2] = t1;
+		$[3] = className;
+		$[4] = props;
+		$[5] = renderThumbnail;
+		$[6] = t2;
+	} else {
+		className = $[3];
+		props = $[4];
+		renderThumbnail = $[5];
+		t2 = $[6];
+	}
+	const previewOverflow = t2 === void 0 ? "visible" : t2;
+	let t3;
+	if ($[7] !== className) {
+		t3 = (state) => cn("media-slider", "media-time-slider", resolveClassName(className, state));
+		$[7] = className;
+		$[8] = t3;
+	} else t3 = $[8];
+	let t4;
+	if ($[9] === Symbol.for("react.memo_cache_sentinel")) {
+		t4 = /* @__PURE__ */ jsx(TimeSliderChapters, {
+			className: "media-time-slider-chapters",
+			renderChapter: _temp
+		});
+		$[9] = t4;
+	} else t4 = $[9];
+	let t5;
+	if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
+		t5 = /* @__PURE__ */ jsx(SliderThumb, {
+			render: /* @__PURE__ */ jsx(SliderThumb$1, {}),
+			className: "media-time-slider-thumb"
+		});
+		$[10] = t5;
+	} else t5 = $[10];
+	let t6;
+	if ($[11] === Symbol.for("react.memo_cache_sentinel")) {
+		t6 = cn("media-slider-preview-content", "media-popup-surface", "media-slider-thumbnail");
+		$[11] = t6;
+	} else t6 = $[11];
+	let t7;
+	if ($[12] !== renderThumbnail) {
+		t7 = /* @__PURE__ */ jsx(ThumbnailImage, {
+			render: renderThumbnail,
+			className: "media-slider-thumbnail-image"
+		});
+		$[12] = renderThumbnail;
+		$[13] = t7;
+	} else t7 = $[13];
+	let t8;
+	if ($[14] === Symbol.for("react.memo_cache_sentinel")) {
+		t8 = /* @__PURE__ */ jsx(ForwardRef, { className: "media-slider-thumbnail-spinner-icon" });
+		$[14] = t8;
+	} else t8 = $[14];
+	let t9;
+	if ($[15] !== t7) {
+		t9 = /* @__PURE__ */ jsxs(SliderThumbnailRoot, {
+			className: t6,
+			children: [t7, t8]
+		});
+		$[15] = t7;
+		$[16] = t9;
+	} else t9 = $[16];
+	let t10;
+	if ($[17] === Symbol.for("react.memo_cache_sentinel")) {
+		t10 = /* @__PURE__ */ jsxs("div", {
+			className: cn("media-slider-preview-content", "media-time-slider-preview-content"),
+			children: [/* @__PURE__ */ jsx(TimeSliderChapterTitle, { className: "media-time-slider-chapter-title" }), /* @__PURE__ */ jsx(SliderValue, {
+				className: "media-time-slider-value",
+				type: "pointer"
+			})]
+		});
+		$[17] = t10;
+	} else t10 = $[17];
+	let t11;
+	if ($[18] !== previewOverflow || $[19] !== t9) {
+		t11 = /* @__PURE__ */ jsxs(SliderPreview, {
+			className: "media-slider-preview",
+			overflow: previewOverflow,
+			children: [t9, t10]
+		});
+		$[18] = previewOverflow;
+		$[19] = t9;
+		$[20] = t11;
+	} else t11 = $[20];
+	let t12;
+	if ($[21] !== props || $[22] !== t11 || $[23] !== t3) {
+		t12 = /* @__PURE__ */ jsxs(TimeSliderRoot, {
+			className: t3,
+			...props,
+			children: [
+				t4,
+				t5,
+				t11
+			]
+		});
+		$[21] = props;
+		$[22] = t11;
+		$[23] = t3;
+		$[24] = t12;
+	} else t12 = $[24];
+	return t12;
+}
+function _temp(props_0) {
+	return /* @__PURE__ */ jsx("div", {
+		className: "media-time-slider-chapter",
+		...props_0,
+		children: /* @__PURE__ */ jsxs(SliderTrack, {
+			render: /* @__PURE__ */ jsx(SliderTrack$1, {}),
+			className: "media-time-slider-chapter-track",
+			children: [/* @__PURE__ */ jsx(SliderBuffer, {
+				render: /* @__PURE__ */ jsx(SliderBuffer$1, {}),
+				className: "media-time-slider-chapter-layer"
+			}), /* @__PURE__ */ jsx(SliderFill, {
+				render: /* @__PURE__ */ jsx(SliderFill$1, {}),
+				className: "media-time-slider-chapter-layer"
+			})]
+		})
 	});
 }
 //#endregion
 export { TimeSlider };
-
-//# sourceMappingURL=time-slider.js.map

package/dist/default/internal/skins/minimal-video/layout/controls.js

@@ -0,0 +1,166 @@
+import { ControlsBackdrop } from "../../../../ui/controls/backdrop.js";
+import { ControlsContent } from "../../../../ui/controls/content.js";
+import { ControlsGroup } from "../../../../ui/controls/group.js";
+import { ControlsRoot } from "../../../../ui/controls/root.js";
+import { Group } from "../../../../ui/time/group.js";
+import { Separator } from "../../../../ui/time/separator.js";
+import { Value } from "../../../../ui/time/value.js";
+import { TooltipProvider } from "../../../../ui/tooltip/provider.js";
+import { ButtonTooltip } from "../../shared/components/buttons/button-tooltip.js";
+import { AirPlayButton } from "../components/buttons/airplay-button.js";
+import { CaptionsButton } from "../components/buttons/captions-button.js";
+import { CastButton } from "../components/buttons/cast-button.js";
+import { FullscreenButton } from "../components/buttons/fullscreen-button.js";
+import { PiPButton } from "../components/buttons/pip-button.js";
+import { PlayButton } from "../components/buttons/play-button.js";
+import { VolumePopover } from "../components/menus/volume-popover.js";
+import { TimeSlider } from "../components/sliders/time-slider.js";
+import { VideoSettingsMenu } from "../skins/shared/video/menus/settings-menu.js";
+import { c } from "react-compiler-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "@videojs/utils/style";
+//#region src/internal/skins/minimal-video/layout/controls.tsx
+/** @jsxImportSource react */
+function MinimalVideoControls(t0) {
+	const $ = c(16);
+	let t1;
+	if ($[0] !== t0) {
+		t1 = t0 === void 0 ? {} : t0;
+		$[0] = t0;
+		$[1] = t1;
+	} else t1 = $[1];
+	const { renderThumbnail } = t1;
+	let t2;
+	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = /* @__PURE__ */ jsx(ControlsBackdrop, { className: "video-controls-backdrop" });
+		$[2] = t2;
+	} else t2 = $[2];
+	let t3;
+	if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+		t3 = cn("video-controls", "video-controls-content", "video-controls-wrap");
+		$[3] = t3;
+	} else t3 = $[3];
+	let t4;
+	if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+		t4 = /* @__PURE__ */ jsxs(ControlsGroup, {
+			className: "video-controls-start",
+			children: [/* @__PURE__ */ jsx(ButtonTooltip, {
+				side: "top",
+				children: /* @__PURE__ */ jsx(PlayButton, {})
+			}), /* @__PURE__ */ jsx(VolumePopover, {
+				showTooltip: true,
+				side: "right",
+				orientation: "horizontal"
+			})]
+		});
+		$[4] = t4;
+	} else t4 = $[4];
+	let t5;
+	if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
+		t5 = /* @__PURE__ */ jsxs(Group, {
+			className: "media-time-group",
+			children: [
+				/* @__PURE__ */ jsx(Value, {
+					className: cn("media-time-toggle", "media-time-current-value"),
+					type: "current",
+					toggle: true
+				}),
+				/* @__PURE__ */ jsx(Separator, { className: "media-time-separator" }),
+				/* @__PURE__ */ jsx(Value, {
+					className: "media-time-duration-value",
+					type: "duration"
+				})
+			]
+		});
+		$[5] = t5;
+	} else t5 = $[5];
+	let t6;
+	if ($[6] !== renderThumbnail) {
+		t6 = /* @__PURE__ */ jsxs(ControlsGroup, {
+			className: "video-time-slider-group",
+			children: [t5, /* @__PURE__ */ jsx(TimeSlider, {
+				previewOverflow: "clamp",
+				renderThumbnail
+			})]
+		});
+		$[6] = renderThumbnail;
+		$[7] = t6;
+	} else t6 = $[7];
+	let t7;
+	let t8;
+	if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
+		t7 = /* @__PURE__ */ jsx(ButtonTooltip, {
+			side: "top",
+			children: /* @__PURE__ */ jsx(CaptionsButton, { className: "video-controls-captions-button" })
+		});
+		t8 = /* @__PURE__ */ jsx(VideoSettingsMenu, {});
+		$[8] = t7;
+		$[9] = t8;
+	} else {
+		t7 = $[8];
+		t8 = $[9];
+	}
+	let t9;
+	if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
+		t9 = /* @__PURE__ */ jsx(ButtonTooltip, {
+			side: "top",
+			children: /* @__PURE__ */ jsx(CastButton, {})
+		});
+		$[10] = t9;
+	} else t9 = $[10];
+	let t10;
+	if ($[11] === Symbol.for("react.memo_cache_sentinel")) {
+		t10 = /* @__PURE__ */ jsx(ButtonTooltip, {
+			side: "top",
+			children: /* @__PURE__ */ jsx(AirPlayButton, {})
+		});
+		$[11] = t10;
+	} else t10 = $[11];
+	let t11;
+	if ($[12] === Symbol.for("react.memo_cache_sentinel")) {
+		t11 = /* @__PURE__ */ jsx(ButtonTooltip, {
+			side: "top",
+			children: /* @__PURE__ */ jsx(PiPButton, {})
+		});
+		$[12] = t11;
+	} else t11 = $[12];
+	let t12;
+	if ($[13] === Symbol.for("react.memo_cache_sentinel")) {
+		t12 = /* @__PURE__ */ jsxs(ControlsGroup, {
+			className: "video-controls-end",
+			children: [
+				t7,
+				t8,
+				/* @__PURE__ */ jsxs(ControlsGroup, {
+					className: "video-controls-trailing",
+					children: [
+						t9,
+						t10,
+						t11,
+						/* @__PURE__ */ jsx(ButtonTooltip, {
+							side: "top",
+							children: /* @__PURE__ */ jsx(FullscreenButton, {})
+						})
+					]
+				})
+			]
+		});
+		$[13] = t12;
+	} else t12 = $[13];
+	let t13;
+	if ($[14] !== t6) {
+		t13 = /* @__PURE__ */ jsxs(ControlsRoot, { children: [t2, /* @__PURE__ */ jsx(ControlsContent, {
+			className: t3,
+			children: /* @__PURE__ */ jsxs(TooltipProvider, { children: [
+				t4,
+				t6,
+				t12
+			] })
+		})] });
+		$[14] = t6;
+		$[15] = t13;
+	} else t13 = $[15];
+	return t13;
+}
+//#endregion
+export { MinimalVideoControls };

package/dist/default/internal/skins/minimal-video/skin.js

@@ -1,34 +1,120 @@
 import { Container } from "../shared/components/layout/container.js";
-import { ErrorDialog } from "../shared/components/feedback/error-dialog.js";
-import { Poster } from "../shared/components/layout/poster.js";
-import { VideoGestures } from "../shared/skins/shared/video/gestures.js";
-import { VideoHotkeys } from "../shared/skins/shared/video/hotkeys.js";
-import { BufferingIndicator } from "./components/feedback/buffering-indicator.js";
-import { MinimalVideoControls } from "./controls.js";
-import { VideoStatusIndicators } from "./skins/shared/video/status-indicators.js";
+import { ErrorDialog } from "../shared/components/dialogs/error-dialog.js";
+import { Poster } from "../shared/components/display/poster.js";
+import { Title } from "../shared/components/display/title.js";
+import { VideoGestures } from "../shared/skins/shared/video/behaviors/gestures.js";
+import { VideoHotkeys } from "../shared/skins/shared/video/behaviors/hotkeys.js";
+import { BufferingIndicator } from "./components/display/buffering-indicator.js";
+import { MinimalVideoControls } from "./layout/controls.js";
+import { VideoStatusIndicators } from "./skins/shared/video/display/status-indicators.js";
+import { c } from "react-compiler-runtime";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cn } from "@videojs/utils/style";
 //#region src/internal/skins/minimal-video/skin.tsx
 /** @jsxImportSource react */
-function MinimalVideoSkin({ children, className, renderPoster, ...props } = {}) {
-	return /* @__PURE__ */ jsxs(Container, {
-		className: cn("video-skin", className),
-		"data-theme": "minimal",
-		"data-preset": "video",
-		...props,
-		children: [
-			children,
-			/* @__PURE__ */ jsx(Poster, { renderImage: renderPoster }),
-			/* @__PURE__ */ jsx(BufferingIndicator, {}),
-			/* @__PURE__ */ jsx(ErrorDialog, {}),
-			/* @__PURE__ */ jsx(MinimalVideoControls, {}),
-			/* @__PURE__ */ jsx(VideoHotkeys, {}),
-			/* @__PURE__ */ jsx(VideoGestures, {}),
-			/* @__PURE__ */ jsx(VideoStatusIndicators, {})
-		]
-	});
+function VideoSkin(t0) {
+	const $ = c(26);
+	let t1;
+	if ($[0] !== t0) {
+		t1 = t0 === void 0 ? {} : t0;
+		$[0] = t0;
+		$[1] = t1;
+	} else t1 = $[1];
+	let children;
+	let className;
+	let props;
+	let renderPoster;
+	let renderThumbnail;
+	if ($[2] !== t1) {
+		({children, className, renderPoster, renderThumbnail, ...props} = t1);
+		$[2] = t1;
+		$[3] = children;
+		$[4] = className;
+		$[5] = props;
+		$[6] = renderPoster;
+		$[7] = renderThumbnail;
+	} else {
+		children = $[3];
+		className = $[4];
+		props = $[5];
+		renderPoster = $[6];
+		renderThumbnail = $[7];
+	}
+	let t2;
+	if ($[8] !== className) {
+		t2 = cn("video-skin", className);
+		$[8] = className;
+		$[9] = t2;
+	} else t2 = $[9];
+	let t3;
+	if ($[10] !== renderPoster) {
+		t3 = /* @__PURE__ */ jsx(Poster, { renderImage: renderPoster });
+		$[10] = renderPoster;
+		$[11] = t3;
+	} else t3 = $[11];
+	let t4;
+	let t5;
+	let t6;
+	if ($[12] === Symbol.for("react.memo_cache_sentinel")) {
+		t4 = /* @__PURE__ */ jsx(BufferingIndicator, {});
+		t5 = /* @__PURE__ */ jsx(ErrorDialog, {});
+		t6 = /* @__PURE__ */ jsx(Title, {});
+		$[12] = t4;
+		$[13] = t5;
+		$[14] = t6;
+	} else {
+		t4 = $[12];
+		t5 = $[13];
+		t6 = $[14];
+	}
+	let t7;
+	if ($[15] !== renderThumbnail) {
+		t7 = /* @__PURE__ */ jsx(MinimalVideoControls, { renderThumbnail });
+		$[15] = renderThumbnail;
+		$[16] = t7;
+	} else t7 = $[16];
+	let t10;
+	let t8;
+	let t9;
+	if ($[17] === Symbol.for("react.memo_cache_sentinel")) {
+		t8 = /* @__PURE__ */ jsx(VideoHotkeys, {});
+		t9 = /* @__PURE__ */ jsx(VideoGestures, {});
+		t10 = /* @__PURE__ */ jsx(VideoStatusIndicators, {});
+		$[17] = t10;
+		$[18] = t8;
+		$[19] = t9;
+	} else {
+		t10 = $[17];
+		t8 = $[18];
+		t9 = $[19];
+	}
+	let t11;
+	if ($[20] !== children || $[21] !== props || $[22] !== t2 || $[23] !== t3 || $[24] !== t7) {
+		t11 = /* @__PURE__ */ jsxs(Container, {
+			className: t2,
+			"data-theme": "minimal",
+			"data-preset": "video",
+			...props,
+			children: [
+				children,
+				t3,
+				t4,
+				t5,
+				t6,
+				t7,
+				t8,
+				t9,
+				t10
+			]
+		});
+		$[20] = children;
+		$[21] = props;
+		$[22] = t2;
+		$[23] = t3;
+		$[24] = t7;
+		$[25] = t11;
+	} else t11 = $[25];
+	return t11;
 }
 //#endregion
-export { MinimalVideoSkin };
-
-//# sourceMappingURL=skin.js.map
+export { VideoSkin };

package/dist/default/internal/skins/minimal-video/skins/shared/video/display/status-indicators.js

@@ -0,0 +1,78 @@
+import { StatusAnnouncer } from "../../../../../shared/components/behaviors/status-announcer.js";
+import { SeekIndicator } from "../../../../components/display/seek-indicator.js";
+import { PlaybackStatusIndicator, StatusIndicator } from "../../../../components/display/status-indicator.js";
+import { VolumeIndicator } from "../../../../components/display/volume-indicator.js";
+import { c } from "react-compiler-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "@videojs/utils/style";
+//#region src/internal/skins/minimal-video/skins/shared/video/display/status-indicators.tsx
+/** @jsxImportSource react */
+function VideoStatusIndicators(t0) {
+	const $ = c(15);
+	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(StatusAnnouncer, {});
+		$[5] = t2;
+	} else t2 = $[5];
+	let t3;
+	if ($[6] !== className) {
+		t3 = cn("video-status-indicators", className);
+		$[6] = className;
+		$[7] = t3;
+	} else t3 = $[7];
+	let t4;
+	let t5;
+	let t6;
+	let t7;
+	if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
+		t4 = /* @__PURE__ */ jsx(VolumeIndicator, {});
+		t5 = /* @__PURE__ */ jsx(StatusIndicator, {});
+		t6 = /* @__PURE__ */ jsx(SeekIndicator, {});
+		t7 = /* @__PURE__ */ jsx(PlaybackStatusIndicator, {});
+		$[8] = t4;
+		$[9] = t5;
+		$[10] = t6;
+		$[11] = t7;
+	} else {
+		t4 = $[8];
+		t5 = $[9];
+		t6 = $[10];
+		t7 = $[11];
+	}
+	let t8;
+	if ($[12] !== props || $[13] !== t3) {
+		t8 = /* @__PURE__ */ jsxs(Fragment, { children: [t2, /* @__PURE__ */ jsxs("div", {
+			className: t3,
+			...props,
+			children: [
+				t4,
+				t5,
+				t6,
+				t7
+			]
+		})] });
+		$[12] = props;
+		$[13] = t3;
+		$[14] = t8;
+	} else t8 = $[14];
+	return t8;
+}
+//#endregion
+export { VideoStatusIndicators };

package/dist/default/internal/skins/minimal-video/skins/shared/video/menus/settings-menu.js

@@ -0,0 +1,54 @@
+import { AudioTrackMenu } from "../../../../components/menus/audio-track-menu.js";
+import { CaptionsSubmenu } from "../../../../components/menus/captions-submenu.js";
+import { PlaybackRateSubmenu } from "../../../../components/menus/playback-rate-submenu.js";
+import { QualityMenu } from "../../../../components/menus/quality-menu.js";
+import { SettingsMenu } from "../../../../components/menus/settings-menu.js";
+import { c } from "react-compiler-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/internal/skins/minimal-video/skins/shared/video/menus/settings-menu.tsx
+function VideoSettingsMenu(t0) {
+	const $ = c(8);
+	let t1;
+	if ($[0] !== t0) {
+		t1 = t0 === void 0 ? {} : t0;
+		$[0] = t0;
+		$[1] = t1;
+	} else t1 = $[1];
+	const props = t1;
+	let t2;
+	let t3;
+	let t4;
+	let t5;
+	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = /* @__PURE__ */ jsx(QualityMenu, {});
+		t3 = /* @__PURE__ */ jsx(AudioTrackMenu, {});
+		t4 = /* @__PURE__ */ jsx(PlaybackRateSubmenu, {});
+		t5 = /* @__PURE__ */ jsx(CaptionsSubmenu, {});
+		$[2] = t2;
+		$[3] = t3;
+		$[4] = t4;
+		$[5] = t5;
+	} else {
+		t2 = $[2];
+		t3 = $[3];
+		t4 = $[4];
+		t5 = $[5];
+	}
+	let t6;
+	if ($[6] !== props) {
+		t6 = /* @__PURE__ */ jsxs(SettingsMenu, {
+			...props,
+			children: [
+				t2,
+				t3,
+				t4,
+				t5
+			]
+		});
+		$[6] = props;
+		$[7] = t6;
+	} else t6 = $[7];
+	return t6;
+}
+//#endregion
+export { VideoSettingsMenu };

package/dist/default/internal/skins/shared/components/behaviors/status-announcer.js

@@ -0,0 +1,45 @@
+import { StatusAnnouncer as StatusAnnouncer$1 } from "../../../../../ui/status-announcer/component.js";
+import { c } from "react-compiler-runtime";
+import { jsx } from "react/jsx-runtime";
+import { cn, resolveClassName } from "@videojs/utils/style";
+//#region src/internal/skins/shared/components/behaviors/status-announcer.tsx
+/** @jsxImportSource react */
+function StatusAnnouncer(t0) {
+	const $ = c(10);
+	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-status-announcer", resolveClassName(className, state));
+		$[5] = className;
+		$[6] = t2;
+	} else t2 = $[6];
+	let t3;
+	if ($[7] !== props || $[8] !== t2) {
+		t3 = /* @__PURE__ */ jsx(StatusAnnouncer$1, {
+			className: t2,
+			...props
+		});
+		$[7] = props;
+		$[8] = t2;
+		$[9] = t3;
+	} else t3 = $[9];
+	return t3;
+}
+//#endregion
+export { StatusAnnouncer };