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

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

@@ -1,47 +1,113 @@
 import { Text } from "../../../../../i18n/text.js";
-import { MenuContent } from "../../../../../ui/menu/menu-content.js";
-import { MenuPopup } from "../../../../../ui/menu/menu-popup.js";
-import { MenuRoot } from "../../../../../ui/menu/menu-root.js";
-import { MenuTrigger } from "../../../../../ui/menu/menu-trigger.js";
+import { MenuContent } from "../../../../../ui/menu/content.js";
+import { MenuPopup } from "../../../../../ui/menu/popup.js";
+import { MenuRoot } from "../../../../../ui/menu/root.js";
+import { MenuTrigger } from "../../../../../ui/menu/trigger.js";
 import ForwardRef from "../../../../../icons/dist/react/default/gear.js";
 import { Button } from "../../../shared/components/buttons/button.js";
 import { ButtonTooltip } from "../../../shared/components/buttons/button-tooltip.js";
+import { c } from "react-compiler-runtime";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cn, resolveClassName } from "@videojs/utils/style";
 import { settingsText } from "@videojs/core/i18n/text/menu";
 //#region src/internal/skins/default-video/components/menus/settings-menu.tsx
 /** @jsxImportSource react */
-function SettingsMenu({ children, className, ...props }) {
-	return /* @__PURE__ */ jsxs(MenuRoot, {
-		side: "top",
-		align: "center",
-		...props,
-		children: [/* @__PURE__ */ jsx(ButtonTooltip, {
-			label: /* @__PURE__ */ jsx(Text, {
-				token: settingsText.key,
-				children: settingsText.text
-			}),
+function SettingsMenu(t0) {
+	const $ = c(19);
+	let children;
+	let className;
+	let props;
+	if ($[0] !== t0) {
+		({children, className, ...props} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = className;
+		$[3] = props;
+	} else {
+		children = $[1];
+		className = $[2];
+		props = $[3];
+	}
+	let t1;
+	if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = /* @__PURE__ */ jsx(Text, {
+			token: settingsText.key,
+			children: settingsText.text
+		});
+		$[4] = t1;
+	} else t1 = $[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-settings-menu-trigger", resolveClassName(className, state));
+		$[6] = className;
+		$[7] = t3;
+	} else t3 = $[7];
+	let t4;
+	let t5;
+	if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
+		t4 = /* @__PURE__ */ jsx(ForwardRef, { className: cn("media-button-icon-base", "media-settings-menu-trigger-icon") });
+		t5 = /* @__PURE__ */ jsx(Text, {
+			className: "media-settings-menu-trigger-label",
+			token: settingsText.key,
+			children: settingsText.text
+		});
+		$[8] = t4;
+		$[9] = t5;
+	} else {
+		t4 = $[8];
+		t5 = $[9];
+	}
+	let t6;
+	if ($[10] !== t3) {
+		t6 = /* @__PURE__ */ jsx(ButtonTooltip, {
+			label: t1,
 			side: "top",
 			children: /* @__PURE__ */ jsxs(MenuTrigger, {
-				render: /* @__PURE__ */ jsx(Button, {}),
-				className: (state) => cn("media-settings-menu-trigger", resolveClassName(className, state)),
-				children: [/* @__PURE__ */ jsx(ForwardRef, { className: cn("media-button-icon", "media-settings-menu-trigger-icon") }), /* @__PURE__ */ jsx(Text, {
-					className: "media-settings-menu-trigger-label",
-					token: settingsText.key,
-					children: settingsText.text
-				})]
+				render: t2,
+				className: t3,
+				children: [t4, t5]
 			})
-		}), /* @__PURE__ */ jsx(MenuPopup, {
+		});
+		$[10] = t3;
+		$[11] = t6;
+	} else t6 = $[11];
+	let t7;
+	if ($[12] === Symbol.for("react.memo_cache_sentinel")) {
+		t7 = cn("media-popup", "media-popup-surface", "media-menu-popup", "media-menu-resizable-popup");
+		$[12] = t7;
+	} else t7 = $[12];
+	let t8;
+	if ($[13] !== children) {
+		t8 = /* @__PURE__ */ jsx(MenuPopup, {
 			keepMounted: true,
-			className: cn("media-popup", "media-popup-surface", "media-menu-popup", "media-menu-resizable-popup"),
+			className: t7,
 			children: /* @__PURE__ */ jsx(MenuContent, {
 				className: "media-menu-content",
 				children
 			})
-		})]
-	});
+		});
+		$[13] = children;
+		$[14] = t8;
+	} else t8 = $[14];
+	let t9;
+	if ($[15] !== props || $[16] !== t6 || $[17] !== t8) {
+		t9 = /* @__PURE__ */ jsxs(MenuRoot, {
+			side: "top",
+			align: "center",
+			...props,
+			children: [t6, t8]
+		});
+		$[15] = props;
+		$[16] = t6;
+		$[17] = t8;
+		$[18] = t9;
+	} else t9 = $[18];
+	return t9;
 }
 //#endregion
 export { SettingsMenu };
-
-//# sourceMappingURL=settings-menu.js.map

package/dist/default/internal/skins/default-video/components/menus/volume-popover.js

@@ -0,0 +1,101 @@
+import { VolumePopoverPopup } from "../../../../../ui/volume-popover/popup.js";
+import { VolumePopoverRoot } from "../../../../../ui/volume-popover/root.js";
+import { VolumePopoverTrigger } from "../../../../../ui/volume-popover/trigger.js";
+import { ButtonTooltip } from "../../../shared/components/buttons/button-tooltip.js";
+import { VolumeSlider } from "../../../shared/components/sliders/volume-slider.js";
+import { MuteButton } from "../buttons/mute-button.js";
+import { c } from "react-compiler-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "@videojs/utils/style";
+//#region src/internal/skins/default-video/components/menus/volume-popover.tsx
+function VolumePopover(t0) {
+	const $ = c(23);
+	let t1;
+	if ($[0] !== t0) {
+		t1 = t0 === void 0 ? {} : t0;
+		$[0] = t0;
+		$[1] = t1;
+	} else t1 = $[1];
+	let className;
+	let props;
+	let t2;
+	let t3;
+	let t4;
+	if ($[2] !== t1) {
+		({className, showTooltip: t2, side: t3, orientation: t4, ...props} = t1);
+		$[2] = t1;
+		$[3] = className;
+		$[4] = props;
+		$[5] = t2;
+		$[6] = t3;
+		$[7] = t4;
+	} else {
+		className = $[3];
+		props = $[4];
+		t2 = $[5];
+		t3 = $[6];
+		t4 = $[7];
+	}
+	const showTooltip = t2 === void 0 ? false : t2;
+	const side = t3 === void 0 ? "top" : t3;
+	const orientation = t4 === void 0 ? "vertical" : t4;
+	const t5 = !showTooltip;
+	let t6;
+	if ($[8] !== className) {
+		t6 = cn(className);
+		$[8] = className;
+		$[9] = t6;
+	} else t6 = $[9];
+	let t7;
+	if ($[10] !== t6) {
+		t7 = /* @__PURE__ */ jsx(VolumePopoverTrigger, { render: /* @__PURE__ */ jsx(MuteButton, { className: t6 }) });
+		$[10] = t6;
+		$[11] = t7;
+	} else t7 = $[11];
+	let t8;
+	if ($[12] !== t5 || $[13] !== t7) {
+		t8 = /* @__PURE__ */ jsx(ButtonTooltip, {
+			delay: 0,
+			disabled: t5,
+			sticky: true,
+			side: "top",
+			children: t7
+		});
+		$[12] = t5;
+		$[13] = t7;
+		$[14] = t8;
+	} else t8 = $[14];
+	let t9;
+	if ($[15] === Symbol.for("react.memo_cache_sentinel")) {
+		t9 = cn("media-popup", "media-popup-safe-area", "media-popup-transition", "media-popup-surface", "media-volume-popover");
+		$[15] = t9;
+	} else t9 = $[15];
+	let t10;
+	if ($[16] !== orientation) {
+		t10 = /* @__PURE__ */ jsx(VolumePopoverPopup, {
+			className: t9,
+			children: /* @__PURE__ */ jsx(VolumeSlider, { orientation })
+		});
+		$[16] = orientation;
+		$[17] = t10;
+	} else t10 = $[17];
+	let t11;
+	if ($[18] !== props || $[19] !== side || $[20] !== t10 || $[21] !== t8) {
+		t11 = /* @__PURE__ */ jsxs(VolumePopoverRoot, {
+			openOnHover: true,
+			delay: 200,
+			closeDelay: 100,
+			side,
+			...props,
+			children: [t8, t10]
+		});
+		$[18] = props;
+		$[19] = side;
+		$[20] = t10;
+		$[21] = t8;
+		$[22] = t11;
+	} else t11 = $[22];
+	return t11;
+}
+//#endregion
+export { VolumePopover };

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

@@ -1,57 +1,152 @@
-import { SliderBuffer } from "../../../../../ui/slider/slider-buffer.js";
-import { SliderFill } from "../../../../../ui/slider/slider-fill.js";
-import { SliderPreview } from "../../../../../ui/slider/slider-preview.js";
-import { SliderThumb } from "../../../../../ui/slider/slider-thumb.js";
-import { SliderThumbnail } from "../../../../../ui/slider/slider-thumbnail.js";
-import { SliderTrack } from "../../../../../ui/slider/slider-track.js";
-import { SliderValue } from "../../../../../ui/slider/slider-value.js";
-import { TimeSliderChapterTitle } from "../../../../../ui/time-slider/time-slider-chapters/time-slider-chapter-title.js";
-import { TimeSliderChapters } from "../../../../../ui/time-slider/time-slider-chapters/time-slider-chapters.js";
-import { TimeSliderRoot } from "../../../../../ui/time-slider/time-slider-root.js";
+import { SliderBuffer } from "../../../../../ui/slider/buffer.js";
+import { SliderFill } from "../../../../../ui/slider/fill.js";
+import { SliderPreview } from "../../../../../ui/slider/preview.js";
+import { SliderThumb } from "../../../../../ui/slider/thumb.js";
+import { ThumbnailImage } from "../../../../../ui/thumbnail/image.js";
+import { SliderThumbnailRoot } from "../../../../../ui/slider/thumbnail/root.js";
+import { SliderTrack } from "../../../../../ui/slider/track.js";
+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/default/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 { 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/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("div", {
-					className: cn("media-slider-preview-content", "media-popup-surface", "media-slider-thumbnail"),
-					children: [/* @__PURE__ */ jsx(SliderThumbnail, { 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/default-video/layout/controls.js

@@ -0,0 +1,172 @@
+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 { 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/default-video/layout/controls.tsx
+/** @jsxImportSource react */
+function DefaultVideoControls(t0) {
+	const $ = c(22);
+	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");
+		$[3] = t3;
+	} else t3 = $[3];
+	let t4;
+	let t5;
+	if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+		t4 = /* @__PURE__ */ jsx(ButtonTooltip, {
+			side: "top",
+			children: /* @__PURE__ */ jsx(PlayButton, {})
+		});
+		t5 = /* @__PURE__ */ jsx(VolumePopover, { className: "video-controls-volume-button" });
+		$[4] = t4;
+		$[5] = t5;
+	} else {
+		t4 = $[4];
+		t5 = $[5];
+	}
+	let t6;
+	if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
+		t6 = /* @__PURE__ */ jsx(Value, {
+			className: cn("media-time-value", "video-time-value"),
+			type: "current"
+		});
+		$[6] = t6;
+	} else t6 = $[6];
+	let t7;
+	if ($[7] !== renderThumbnail) {
+		t7 = /* @__PURE__ */ jsx(TimeSlider, { renderThumbnail });
+		$[7] = renderThumbnail;
+		$[8] = t7;
+	} else t7 = $[8];
+	let t8;
+	if ($[9] === Symbol.for("react.memo_cache_sentinel")) {
+		t8 = /* @__PURE__ */ jsx(Value, {
+			className: cn("media-time-toggle", "video-time-value"),
+			type: "remaining",
+			toggle: true
+		});
+		$[9] = t8;
+	} else t8 = $[9];
+	let t9;
+	if ($[10] !== t7) {
+		t9 = /* @__PURE__ */ jsxs(ControlsGroup, {
+			className: "video-time-slider-group",
+			children: [
+				t6,
+				t7,
+				t8
+			]
+		});
+		$[10] = t7;
+		$[11] = t9;
+	} else t9 = $[11];
+	let t10;
+	let t11;
+	if ($[12] === Symbol.for("react.memo_cache_sentinel")) {
+		t10 = /* @__PURE__ */ jsx(ButtonTooltip, {
+			side: "top",
+			children: /* @__PURE__ */ jsx(CaptionsButton, { className: "video-controls-captions-button" })
+		});
+		t11 = /* @__PURE__ */ jsx(VideoSettingsMenu, { className: "video-controls-settings-button" });
+		$[12] = t10;
+		$[13] = t11;
+	} else {
+		t10 = $[12];
+		t11 = $[13];
+	}
+	let t12;
+	if ($[14] !== t9) {
+		t12 = /* @__PURE__ */ jsxs(ControlsGroup, {
+			className: "video-controls-primary",
+			children: [
+				t4,
+				t5,
+				t9,
+				t10,
+				t11
+			]
+		});
+		$[14] = t9;
+		$[15] = t12;
+	} else t12 = $[15];
+	let t13;
+	if ($[16] === Symbol.for("react.memo_cache_sentinel")) {
+		t13 = /* @__PURE__ */ jsx(ButtonTooltip, {
+			side: "top",
+			children: /* @__PURE__ */ jsx(CastButton, {})
+		});
+		$[16] = t13;
+	} else t13 = $[16];
+	let t14;
+	if ($[17] === Symbol.for("react.memo_cache_sentinel")) {
+		t14 = /* @__PURE__ */ jsx(ButtonTooltip, {
+			side: "top",
+			children: /* @__PURE__ */ jsx(AirPlayButton, {})
+		});
+		$[17] = t14;
+	} else t14 = $[17];
+	let t15;
+	if ($[18] === Symbol.for("react.memo_cache_sentinel")) {
+		t15 = /* @__PURE__ */ jsx(ButtonTooltip, {
+			side: "top",
+			children: /* @__PURE__ */ jsx(PiPButton, {})
+		});
+		$[18] = t15;
+	} else t15 = $[18];
+	let t16;
+	if ($[19] === Symbol.for("react.memo_cache_sentinel")) {
+		t16 = /* @__PURE__ */ jsxs(ControlsGroup, {
+			className: "video-controls-secondary",
+			children: [
+				t13,
+				t14,
+				t15,
+				/* @__PURE__ */ jsx(ButtonTooltip, {
+					side: "top",
+					children: /* @__PURE__ */ jsx(FullscreenButton, {})
+				})
+			]
+		});
+		$[19] = t16;
+	} else t16 = $[19];
+	let t17;
+	if ($[20] !== t12) {
+		t17 = /* @__PURE__ */ jsxs(ControlsRoot, { children: [t2, /* @__PURE__ */ jsx(ControlsContent, {
+			className: t3,
+			children: /* @__PURE__ */ jsxs(TooltipProvider, { children: [t12, t16] })
+		})] });
+		$[20] = t12;
+		$[21] = t17;
+	} else t17 = $[21];
+	return t17;
+}
+//#endregion
+export { DefaultVideoControls };