@videojs/react 10.0.0-beta.3 → 10.0.0-beta.30

package/dist/dev/presets/video/skin.js

@@ -1,256 +1,677 @@
-import { Container, usePlayer } from "../../player/context.js";
+"use client";
+import { useTranslator } from "../../i18n/context.js";
+import { usePlayer } from "../../player/context.js";
+import { Container } from "../../player/container.js";
+import { AirPlayButton } from "../../ui/airplay-button/airplay-button.js";
+import { AlertDialogPopup } from "../../ui/alert-dialog/alert-dialog-popup.js";
+import { useAudioTrackOptions } from "../../ui/audio-track/use-audio-track-options.js";
+import { AudioTrackRadioGroup } from "../../ui/audio-track-radio-group/audio-track-radio-group.js";
 import { BufferingIndicator } from "../../ui/buffering-indicator/buffering-indicator.js";
 import { CaptionsButton } from "../../ui/captions-button/captions-button.js";
+import { useCaptionsOptions } from "../../ui/captions-radio-group/use-captions-options.js";
+import { CaptionsRadioGroup } from "../../ui/captions-radio-group/captions-radio-group.js";
+import { CastButton } from "../../ui/cast-button/cast-button.js";
 import { ControlsRoot } from "../../ui/controls/controls-root.js";
+import { ErrorDialogClose } from "../../ui/error-dialog/error-dialog-close.js";
+import { ErrorDialogDescription } from "../../ui/error-dialog/error-dialog-description.js";
+import { ErrorDialogRoot } from "../../ui/error-dialog/error-dialog-root.js";
+import { ErrorDialogTitle } from "../../ui/error-dialog/error-dialog-title.js";
 import { FullscreenButton } from "../../ui/fullscreen-button/fullscreen-button.js";
+import { Gesture } from "../../ui/gesture/gesture.js";
+import { Hotkey } from "../../ui/hotkey/hotkey.js";
+import { MenuContent } from "../../ui/menu/menu-content.js";
+import { MenuItem } from "../../ui/menu/menu-item.js";
+import { MenuItemIndicator } from "../../ui/menu/menu-item-indicator.js";
+import { MenuRadioItem } from "../../ui/menu/menu-radio-item.js";
+import { MenuRoot } from "../../ui/menu/menu-root.js";
+import { MenuSeparator } from "../../ui/menu/menu-separator.js";
+import { MenuTrigger } from "../../ui/menu/menu-trigger.js";
 import { MuteButton } from "../../ui/mute-button/mute-button.js";
 import { PiPButton } from "../../ui/pip-button/pip-button.js";
 import { PlayButton } from "../../ui/play-button/play-button.js";
-import { PlaybackRateButton } from "../../ui/playback-rate-button/playback-rate-button.js";
+import { usePlaybackRateOptions } from "../../ui/playback-rate/use-playback-rate-options.js";
+import { PlaybackRateRadioGroup } from "../../ui/playback-rate-radio-group/playback-rate-radio-group.js";
 import { PopoverPopup } from "../../ui/popover/popover-popup.js";
 import { PopoverRoot } from "../../ui/popover/popover-root.js";
 import { PopoverTrigger } from "../../ui/popover/popover-trigger.js";
-import { SeekButton } from "../../ui/seek-button/seek-button.js";
+import { Poster } from "../../ui/poster/poster.js";
+import { useQualityOptions } from "../../ui/quality/use-quality-options.js";
+import { QualityRadioGroup } from "../../ui/quality-radio-group/quality-radio-group.js";
+import { SeekIndicatorRoot } from "../../ui/seek-indicator/seek-indicator-root.js";
+import { SeekIndicatorValue } from "../../ui/seek-indicator/seek-indicator-value.js";
 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 { Group } from "../../ui/time/time-group.js";
+import { SliderValue } from "../../ui/slider/slider-value.js";
+import { StatusAnnouncer } from "../../ui/status-announcer/status-announcer.js";
+import { StatusIndicatorRoot } from "../../ui/status-indicator/status-indicator-root.js";
+import { StatusIndicatorValue } from "../../ui/status-indicator/status-indicator-value.js";
 import { Value } from "../../ui/time/time-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 { TooltipLabel } from "../../ui/tooltip/tooltip-label.js";
+import { TooltipShortcut } from "../../ui/tooltip/tooltip-shortcut.js";
 import { TooltipPopup } from "../../ui/tooltip/tooltip-popup.js";
+import { TooltipProvider } from "../../ui/tooltip/tooltip-provider.js";
 import { TooltipRoot } from "../../ui/tooltip/tooltip-root.js";
 import { TooltipTrigger } from "../../ui/tooltip/tooltip-trigger.js";
+import { VolumeIndicatorFill } from "../../ui/volume-indicator/volume-indicator-fill.js";
+import { VolumeIndicatorRoot } from "../../ui/volume-indicator/volume-indicator-root.js";
+import { VolumeIndicatorValue } from "../../ui/volume-indicator/volume-indicator-value.js";
 import { VolumeSliderRoot } from "../../ui/volume-slider/volume-slider-root.js";
+import AirPlayEnterIcon from "../../icons/dist/react/default/airplay-enter.js";
+import AirPlayExitIcon from "../../icons/dist/react/default/airplay-exit.js";
 import CaptionsOffIcon from "../../icons/dist/react/default/captions-off.js";
 import CaptionsOnIcon from "../../icons/dist/react/default/captions-on.js";
+import CastEnterIcon from "../../icons/dist/react/default/cast-enter.js";
+import CastExitIcon from "../../icons/dist/react/default/cast-exit.js";
+import CheckIcon from "../../icons/dist/react/default/check.js";
+import ChevronIcon from "../../icons/dist/react/default/chevron.js";
 import FullscreenEnterIcon from "../../icons/dist/react/default/fullscreen-enter.js";
 import FullscreenExitIcon from "../../icons/dist/react/default/fullscreen-exit.js";
+import GearIcon from "../../icons/dist/react/default/gear.js";
 import PauseIcon from "../../icons/dist/react/default/pause.js";
-import PipIcon from "../../icons/dist/react/default/pip.js";
+import PipEnterIcon from "../../icons/dist/react/default/pip-enter.js";
+import PipExitIcon from "../../icons/dist/react/default/pip-exit.js";
 import PlayIcon from "../../icons/dist/react/default/play.js";
+import QualityIcon from "../../icons/dist/react/default/quality.js";
 import RestartIcon from "../../icons/dist/react/default/restart.js";
-import SeekIcon from "../../icons/dist/react/default/seek.js";
+import SpeechIcon from "../../icons/dist/react/default/speech.js";
+import SpeedIcon from "../../icons/dist/react/default/speed.js";
 import SpinnerIcon from "../../icons/dist/react/default/spinner.js";
 import VolumeHighIcon from "../../icons/dist/react/default/volume-high.js";
 import VolumeLowIcon from "../../icons/dist/react/default/volume-low.js";
 import VolumeOffIcon from "../../icons/dist/react/default/volume-off.js";
-import { ErrorDialog } from "./error-dialog.js";
 import { forwardRef } from "react";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { cn } from "@videojs/utils/style";
-
+import { audioText, captionsText, playbackRateText, qualityText, settingsText, speedText } from "@videojs/core/i18n/text/menu";
 //#region src/presets/video/skin.tsx
 const SEEK_TIME = 10;
+const TOP_STATUS_ACTIONS = [
+	"toggleSubtitles",
+	"toggleFullscreen",
+	"togglePictureInPicture"
+];
+const CENTER_STATUS_ACTIONS = ["togglePaused"];
 const Button = forwardRef(function Button({ className, ...props }, ref) {
 	return /* @__PURE__ */ jsx("button", {
 		ref,
 		type: "button",
-		className: cn("media-button", className),
+		className: cn("media-button media-button--subtle media-button--icon", className),
 		...props
 	});
 });
-const errorClasses = {
-	root: "media-error",
-	dialog: "media-error__dialog media-surface",
-	content: "media-error__content",
-	title: "media-error__title",
-	description: "media-error__description",
-	actions: "media-error__actions",
-	close: "media-button"
-};
-function PlayLabel() {
-	const paused = usePlayer((s) => Boolean(s.paused));
-	if (usePlayer((s) => Boolean(s.ended))) return /* @__PURE__ */ jsx(Fragment, { children: "Replay" });
-	return paused ? /* @__PURE__ */ jsx(Fragment, { children: "Play" }) : /* @__PURE__ */ jsx(Fragment, { children: "Pause" });
-}
-function CaptionsLabel() {
-	return usePlayer((s) => Boolean(s.subtitlesShowing)) ? /* @__PURE__ */ jsx(Fragment, { children: "Disable captions" }) : /* @__PURE__ */ jsx(Fragment, { children: "Enable captions" });
-}
-function PiPLabel() {
-	return usePlayer((s) => Boolean(s.pip)) ? /* @__PURE__ */ jsx(Fragment, { children: "Exit picture-in-picture" }) : /* @__PURE__ */ jsx(Fragment, { children: "Enter picture-in-picture" });
+function VolumePopover() {
+	const volumeUnavailable = usePlayer((s) => s.volumeAvailability !== "available");
+	const muteButton = /* @__PURE__ */ jsxs(MuteButton, {
+		className: "media-button--mute",
+		render: /* @__PURE__ */ jsx(Button, {}),
+		children: [
+			/* @__PURE__ */ jsx(VolumeOffIcon, { className: "media-icon media-icon--volume-off" }),
+			/* @__PURE__ */ jsx(VolumeLowIcon, { className: "media-icon media-icon--volume-low" }),
+			/* @__PURE__ */ jsx(VolumeHighIcon, { className: "media-icon media-icon--volume-high" })
+		]
+	});
+	if (volumeUnavailable) return muteButton;
+	return /* @__PURE__ */ jsxs(PopoverRoot, {
+		openOnHover: true,
+		delay: 200,
+		closeDelay: 100,
+		side: "top",
+		children: [/* @__PURE__ */ jsx(PopoverTrigger, { render: muteButton }), /* @__PURE__ */ jsx(PopoverPopup, {
+			className: "media-surface media-popover media-popover--volume",
+			children: /* @__PURE__ */ jsxs(VolumeSliderRoot, {
+				className: "media-slider",
+				orientation: "vertical",
+				thumbAlignment: "edge",
+				children: [/* @__PURE__ */ jsx(SliderTrack, {
+					className: "media-slider__track",
+					children: /* @__PURE__ */ jsx(SliderFill, { className: "media-slider__fill" })
+				}), /* @__PURE__ */ jsx(SliderThumb, { className: "media-slider__thumb media-slider__thumb--persistent" })]
+			})
+		})]
+	});
 }
-function FullscreenLabel() {
-	return usePlayer((s) => Boolean(s.fullscreen)) ? /* @__PURE__ */ jsx(Fragment, { children: "Exit fullscreen" }) : /* @__PURE__ */ jsx(Fragment, { children: "Enter fullscreen" });
+function MenuChevron({ flipped = false }) {
+	return /* @__PURE__ */ jsx(ChevronIcon, { className: cn("media-icon media-menu__chevron", flipped ? "media-icon--flipped" : void 0) });
 }
-function VideoSkin(props) {
-	const { children, className, ...rest } = props;
-	return /* @__PURE__ */ jsxs(Container, {
-		className: cn("media-default-skin media-default-skin--video", className),
-		...rest,
-		children: [
-			children,
-			/* @__PURE__ */ jsx(BufferingIndicator, { render: (props) => /* @__PURE__ */ jsx("div", {
-				...props,
-				className: "media-buffering-indicator",
-				children: /* @__PURE__ */ jsx("div", {
-					className: "media-surface",
-					children: /* @__PURE__ */ jsx(SpinnerIcon, { className: "media-icon" })
-				})
-			}) }),
-			/* @__PURE__ */ jsx(ErrorDialog, { classes: errorClasses }),
-			/* @__PURE__ */ jsxs(ControlsRoot, {
-				className: "media-surface media-controls",
+function SettingsMenu() {
+	const t = useTranslator();
+	const playbackRate = usePlaybackRateOptions();
+	const quality = useQualityOptions();
+	const audioTrack = useAudioTrackOptions();
+	const captions = useCaptionsOptions();
+	const hasPlaybackRate = playbackRate?.state.availability === "available";
+	const hasQuality = quality?.state.availability === "available";
+	const hasAudioTrack = audioTrack?.state.availability === "available";
+	const hasCaptions = captions?.state.availability === "available";
+	if (!hasPlaybackRate && !hasQuality && !hasAudioTrack && !hasCaptions) return null;
+	return /* @__PURE__ */ jsxs(MenuRoot, {
+		side: "top",
+		align: "center",
+		children: [/* @__PURE__ */ jsxs(TooltipRoot, {
+			side: "top",
+			children: [/* @__PURE__ */ jsx(TooltipTrigger, { render: /* @__PURE__ */ jsx(MenuTrigger, {
+				"aria-label": t(settingsText),
+				className: "media-button--settings",
+				render: /* @__PURE__ */ jsx(Button, {}),
+				children: /* @__PURE__ */ jsx(GearIcon, { className: "media-icon media-icon--settings" })
+			}) }), /* @__PURE__ */ jsx(TooltipPopup, {
+				className: "media-surface media-tooltip",
+				children: /* @__PURE__ */ jsx(TooltipLabel, { children: t(settingsText) })
+			})]
+		}), /* @__PURE__ */ jsx(MenuContent, {
+			className: "media-surface media-popover media-menu media-menu--settings",
+			children: /* @__PURE__ */ jsxs("div", {
+				className: "media-menu__group",
 				children: [
-					/* @__PURE__ */ jsxs(TooltipRoot, {
-						side: "top",
-						children: [/* @__PURE__ */ jsx(TooltipTrigger, { render: /* @__PURE__ */ jsx(PlayButton, { render: (props) => /* @__PURE__ */ jsxs(Button, {
+					hasQuality ? /* @__PURE__ */ jsxs(MenuRoot, { children: [/* @__PURE__ */ jsx(MenuTrigger, {
+						className: "media-menu__item media-menu__item--submenu",
+						render: (props) => /* @__PURE__ */ jsxs("div", {
 							...props,
-							className: "media-button--icon media-button--play",
 							children: [
-								/* @__PURE__ */ jsx(RestartIcon, { className: "media-icon media-icon--restart" }),
-								/* @__PURE__ */ jsx(PlayIcon, { className: "media-icon media-icon--play" }),
-								/* @__PURE__ */ jsx(PauseIcon, { className: "media-icon media-icon--pause" })
+								/* @__PURE__ */ jsx(QualityIcon, { className: "media-icon" }),
+								/* @__PURE__ */ jsx("span", { children: t(qualityText) }),
+								/* @__PURE__ */ jsxs("span", {
+									className: "media-menu__hint",
+									children: [/* @__PURE__ */ jsx("span", {
+										className: "media-menu__hint-label",
+										children: quality.selectedLabel
+									}), /* @__PURE__ */ jsx(MenuChevron, {})]
+								})
 							]
-						}) }) }), /* @__PURE__ */ jsx(TooltipPopup, {
-							className: "media-surface media-tooltip",
-							children: /* @__PURE__ */ jsx(PlayLabel, {})
-						})]
-					}),
-					/* @__PURE__ */ jsxs(TooltipRoot, {
-						side: "top",
-						children: [/* @__PURE__ */ jsx(TooltipTrigger, { render: /* @__PURE__ */ jsx(SeekButton, {
-							seconds: -SEEK_TIME,
-							render: (props) => /* @__PURE__ */ jsx(Button, {
-								...props,
-								className: "media-button--icon media-button--seek",
-								children: /* @__PURE__ */ jsxs("span", {
-									className: "media-icon__container",
-									children: [/* @__PURE__ */ jsx(SeekIcon, { className: "media-icon media-icon--seek media-icon--flipped" }), /* @__PURE__ */ jsx("span", {
-										className: "media-icon__label",
-										children: SEEK_TIME
-									})]
+						})
+					}), /* @__PURE__ */ jsxs(MenuContent, {
+						className: "media-menu__panel",
+						children: [
+							/* @__PURE__ */ jsxs(MenuItem, {
+								className: "media-menu__back",
+								children: [/* @__PURE__ */ jsx(MenuChevron, { flipped: true }), t(qualityText)]
+							}),
+							/* @__PURE__ */ jsx(MenuSeparator, { className: "media-menu__separator" }),
+							/* @__PURE__ */ jsx(QualityRadioGroup, {
+								className: "media-menu__group",
+								"aria-label": t(qualityText),
+								renderItem: (props, item) => /* @__PURE__ */ jsxs(MenuRadioItem, {
+									...props,
+									className: "media-menu__item",
+									children: [
+										/* @__PURE__ */ jsxs("span", { children: [item.label, item.tier ? /* @__PURE__ */ jsx("sup", {
+											className: "media-menu__tier",
+											children: item.tier
+										}) : null] }),
+										item.badge ? /* @__PURE__ */ jsx("span", {
+											className: "media-badge",
+											children: item.badge
+										}) : null,
+										/* @__PURE__ */ jsx(MenuItemIndicator, {
+											checked: item.checked,
+											forceMount: true,
+											className: "media-menu__indicator",
+											children: /* @__PURE__ */ jsx(CheckIcon, { className: "media-icon" })
+										})
+									]
 								})
 							})
-						}) }), /* @__PURE__ */ jsxs(TooltipPopup, {
-							className: "media-surface media-tooltip",
+						]
+					})] }) : null,
+					hasAudioTrack ? /* @__PURE__ */ jsxs(MenuRoot, { children: [/* @__PURE__ */ jsx(MenuTrigger, {
+						className: "media-menu__item media-menu__item--submenu",
+						render: (props) => /* @__PURE__ */ jsxs("div", {
+							...props,
 							children: [
-								"Seek backward ",
-								SEEK_TIME,
-								" seconds"
+								/* @__PURE__ */ jsx(SpeechIcon, { className: "media-icon" }),
+								/* @__PURE__ */ jsx("span", { children: t(audioText) }),
+								/* @__PURE__ */ jsxs("span", {
+									className: "media-menu__hint",
+									children: [/* @__PURE__ */ jsx("span", {
+										className: "media-menu__hint-label",
+										children: audioTrack.selectedLabel
+									}), /* @__PURE__ */ jsx(MenuChevron, {})]
+								})
 							]
-						})]
-					}),
-					/* @__PURE__ */ jsxs(TooltipRoot, {
-						side: "top",
-						children: [/* @__PURE__ */ jsx(TooltipTrigger, { render: /* @__PURE__ */ jsx(SeekButton, {
-							seconds: SEEK_TIME,
-							render: (props) => /* @__PURE__ */ jsx(Button, {
-								...props,
-								className: "media-button--icon media-button--seek",
-								children: /* @__PURE__ */ jsxs("span", {
-									className: "media-icon__container",
-									children: [/* @__PURE__ */ jsx(SeekIcon, { className: "media-icon media-icon--seek" }), /* @__PURE__ */ jsx("span", {
-										className: "media-icon__label",
-										children: SEEK_TIME
+						})
+					}), /* @__PURE__ */ jsxs(MenuContent, {
+						className: "media-menu__panel",
+						children: [
+							/* @__PURE__ */ jsxs(MenuItem, {
+								className: "media-menu__back",
+								children: [/* @__PURE__ */ jsx(MenuChevron, { flipped: true }), t(audioText)]
+							}),
+							/* @__PURE__ */ jsx(MenuSeparator, { className: "media-menu__separator" }),
+							/* @__PURE__ */ jsx(AudioTrackRadioGroup, {
+								className: "media-menu__group",
+								"aria-label": t(audioText),
+								renderItem: (props, item) => /* @__PURE__ */ jsxs(MenuRadioItem, {
+									...props,
+									className: "media-menu__item",
+									children: [/* @__PURE__ */ jsx("span", { children: item.label }), /* @__PURE__ */ jsx(MenuItemIndicator, {
+										checked: item.checked,
+										forceMount: true,
+										className: "media-menu__indicator",
+										children: /* @__PURE__ */ jsx(CheckIcon, { className: "media-icon" })
 									})]
 								})
 							})
-						}) }), /* @__PURE__ */ jsxs(TooltipPopup, {
-							className: "media-surface media-tooltip",
+						]
+					})] }) : null,
+					hasPlaybackRate ? /* @__PURE__ */ jsxs(MenuRoot, { children: [/* @__PURE__ */ jsx(MenuTrigger, {
+						className: "media-menu__item media-menu__item--submenu",
+						render: (props) => /* @__PURE__ */ jsxs("div", {
+							...props,
 							children: [
-								"Seek forward ",
-								SEEK_TIME,
-								" seconds"
+								/* @__PURE__ */ jsx(SpeedIcon, { className: "media-icon" }),
+								/* @__PURE__ */ jsx("span", { children: t(speedText) }),
+								/* @__PURE__ */ jsxs("span", {
+									className: "media-menu__hint",
+									children: [/* @__PURE__ */ jsx("span", {
+										className: "media-menu__hint-label",
+										children: playbackRate.selectedLabel
+									}), /* @__PURE__ */ jsx(MenuChevron, {})]
+								})
 							]
-						})]
-					}),
-					/* @__PURE__ */ jsxs(Group, {
-						className: "media-time",
+						})
+					}), /* @__PURE__ */ jsxs(MenuContent, {
+						className: "media-menu__panel",
 						children: [
-							/* @__PURE__ */ jsx(Value, {
-								type: "current",
-								className: "media-time__value"
-							}),
-							/* @__PURE__ */ jsxs(TimeSliderRoot, {
-								className: "media-slider",
-								children: [/* @__PURE__ */ jsxs(SliderTrack, {
-									className: "media-slider__track",
-									children: [/* @__PURE__ */ jsx(SliderFill, { className: "media-slider__fill" }), /* @__PURE__ */ jsx(SliderBuffer, { className: "media-slider__buffer" })]
-								}), /* @__PURE__ */ jsx(SliderThumb, { className: "media-slider__thumb" })]
+							/* @__PURE__ */ jsxs(MenuItem, {
+								className: "media-menu__back",
+								children: [/* @__PURE__ */ jsx(MenuChevron, { flipped: true }), t(speedText)]
 							}),
-							/* @__PURE__ */ jsx(Value, {
-								type: "duration",
-								className: "media-time__value"
+							/* @__PURE__ */ jsx(MenuSeparator, { className: "media-menu__separator" }),
+							/* @__PURE__ */ jsx(PlaybackRateRadioGroup, {
+								className: "media-menu__group",
+								"aria-label": t(playbackRateText),
+								renderItem: (props, item) => /* @__PURE__ */ jsxs(MenuRadioItem, {
+									...props,
+									className: "media-menu__item",
+									children: [/* @__PURE__ */ jsx("span", { children: item.label }), /* @__PURE__ */ jsx(MenuItemIndicator, {
+										checked: item.checked,
+										forceMount: true,
+										className: "media-menu__indicator",
+										children: /* @__PURE__ */ jsx(CheckIcon, { className: "media-icon" })
+									})]
+								})
 							})
 						]
-					}),
-					/* @__PURE__ */ jsxs(TooltipRoot, {
-						side: "top",
-						children: [/* @__PURE__ */ jsx(TooltipTrigger, { render: /* @__PURE__ */ jsx(PlaybackRateButton, { render: (props) => /* @__PURE__ */ jsx(Button, {
-							...props,
-							className: "media-button--icon media-button--playback-rate"
-						}) }) }), /* @__PURE__ */ jsx(TooltipPopup, {
-							className: "media-surface media-tooltip",
-							children: "Toggle playback rate"
-						})]
-					}),
-					/* @__PURE__ */ jsxs(PopoverRoot, {
-						openOnHover: true,
-						delay: 200,
-						closeDelay: 100,
-						side: "top",
-						children: [/* @__PURE__ */ jsx(PopoverTrigger, { render: /* @__PURE__ */ jsx(MuteButton, { render: (props) => /* @__PURE__ */ jsxs(Button, {
+					})] }) : null,
+					hasCaptions ? /* @__PURE__ */ jsxs(MenuRoot, { children: [/* @__PURE__ */ jsx(MenuTrigger, {
+						className: "media-menu__item media-menu__item--submenu",
+						render: (props) => /* @__PURE__ */ jsxs("div", {
 							...props,
-							className: "media-button--icon media-button--mute",
 							children: [
-								/* @__PURE__ */ jsx(VolumeOffIcon, { className: "media-icon media-icon--volume-off" }),
-								/* @__PURE__ */ jsx(VolumeLowIcon, { className: "media-icon media-icon--volume-low" }),
-								/* @__PURE__ */ jsx(VolumeHighIcon, { className: "media-icon media-icon--volume-high" })
+								/* @__PURE__ */ jsx(CaptionsOffIcon, { className: "media-icon" }),
+								/* @__PURE__ */ jsx("span", { children: t(captionsText) }),
+								/* @__PURE__ */ jsxs("span", {
+									className: "media-menu__hint",
+									children: [/* @__PURE__ */ jsx("span", {
+										className: "media-menu__hint-label",
+										children: captions.selectedLabel
+									}), /* @__PURE__ */ jsx(MenuChevron, {})]
+								})
 							]
-						}) }) }), /* @__PURE__ */ jsx(PopoverPopup, {
-							className: "media-surface media-popover media-popover--volume",
-							children: /* @__PURE__ */ jsxs(VolumeSliderRoot, {
-								className: "media-slider",
-								orientation: "vertical",
-								thumbAlignment: "edge",
-								children: [/* @__PURE__ */ jsx(SliderTrack, {
-									className: "media-slider__track",
-									children: /* @__PURE__ */ jsx(SliderFill, { className: "media-slider__fill" })
-								}), /* @__PURE__ */ jsx(SliderThumb, { className: "media-slider__thumb media-slider__thumb--persistent" })]
+						})
+					}), /* @__PURE__ */ jsxs(MenuContent, {
+						className: "media-menu__panel",
+						children: [
+							/* @__PURE__ */ jsxs(MenuItem, {
+								className: "media-menu__back",
+								children: [/* @__PURE__ */ jsx(MenuChevron, { flipped: true }), t(captionsText)]
+							}),
+							/* @__PURE__ */ jsx(MenuSeparator, { className: "media-menu__separator" }),
+							/* @__PURE__ */ jsx(CaptionsRadioGroup, {
+								className: "media-menu__group",
+								"aria-label": t(captionsText),
+								renderItem: (props, item) => /* @__PURE__ */ jsxs(MenuRadioItem, {
+									...props,
+									className: "media-menu__item",
+									children: [/* @__PURE__ */ jsx("span", { children: item.label }), /* @__PURE__ */ jsx(MenuItemIndicator, {
+										checked: item.checked,
+										forceMount: true,
+										className: "media-menu__indicator",
+										children: /* @__PURE__ */ jsx(CheckIcon, { className: "media-icon" })
+									})]
+								})
 							})
-						})]
+						]
+					})] }) : null
+				]
+			})
+		})]
+	});
+}
+function CastControl() {
+	return /* @__PURE__ */ jsxs(TooltipRoot, {
+		side: "top",
+		children: [/* @__PURE__ */ jsx(TooltipTrigger, { render: /* @__PURE__ */ jsxs(CastButton, {
+			className: "media-button--cast",
+			render: /* @__PURE__ */ jsx(Button, {}),
+			children: [/* @__PURE__ */ jsx(CastEnterIcon, { className: "media-icon media-icon--cast-enter" }), /* @__PURE__ */ jsx(CastExitIcon, { className: "media-icon media-icon--cast-exit" })]
+		}) }), /* @__PURE__ */ jsxs(TooltipPopup, {
+			className: "media-surface media-tooltip",
+			children: [/* @__PURE__ */ jsx(TooltipLabel, {}), /* @__PURE__ */ jsx(TooltipShortcut, { className: "media-tooltip__kbd" })]
+		})]
+	});
+}
+function AirPlayControl() {
+	return /* @__PURE__ */ jsxs(TooltipRoot, {
+		side: "top",
+		children: [/* @__PURE__ */ jsx(TooltipTrigger, { render: /* @__PURE__ */ jsxs(AirPlayButton, {
+			className: "media-button--airplay",
+			render: /* @__PURE__ */ jsx(Button, {}),
+			children: [/* @__PURE__ */ jsx(AirPlayEnterIcon, { className: "media-icon media-icon--airplay-enter" }), /* @__PURE__ */ jsx(AirPlayExitIcon, { className: "media-icon media-icon--airplay-exit" })]
+		}) }), /* @__PURE__ */ jsxs(TooltipPopup, {
+			className: "media-surface media-tooltip",
+			children: [/* @__PURE__ */ jsx(TooltipLabel, {}), /* @__PURE__ */ jsx(TooltipShortcut, { className: "media-tooltip__kbd" })]
+		})]
+	});
+}
+function PiPControl() {
+	return /* @__PURE__ */ jsxs(TooltipRoot, {
+		side: "top",
+		children: [/* @__PURE__ */ jsx(TooltipTrigger, { render: /* @__PURE__ */ jsxs(PiPButton, {
+			className: "media-button--pip",
+			render: /* @__PURE__ */ jsx(Button, {}),
+			children: [/* @__PURE__ */ jsx(PipEnterIcon, { className: "media-icon media-icon--pip-enter" }), /* @__PURE__ */ jsx(PipExitIcon, { className: "media-icon media-icon--pip-exit" })]
+		}) }), /* @__PURE__ */ jsxs(TooltipPopup, {
+			className: "media-surface media-tooltip",
+			children: [/* @__PURE__ */ jsx(TooltipLabel, {}), /* @__PURE__ */ jsx(TooltipShortcut, { className: "media-tooltip__kbd" })]
+		})]
+	});
+}
+function FullscreenControl() {
+	return /* @__PURE__ */ jsxs(TooltipRoot, {
+		side: "top",
+		children: [/* @__PURE__ */ jsx(TooltipTrigger, { render: /* @__PURE__ */ jsxs(FullscreenButton, {
+			className: "media-button--fullscreen",
+			render: /* @__PURE__ */ jsx(Button, {}),
+			children: [/* @__PURE__ */ jsx(FullscreenEnterIcon, { className: "media-icon media-icon--fullscreen-enter" }), /* @__PURE__ */ jsx(FullscreenExitIcon, { className: "media-icon media-icon--fullscreen-exit" })]
+		}) }), /* @__PURE__ */ jsxs(TooltipPopup, {
+			className: "media-surface media-tooltip",
+			children: [/* @__PURE__ */ jsx(TooltipLabel, {}), /* @__PURE__ */ jsx(TooltipShortcut, { className: "media-tooltip__kbd" })]
+		})]
+	});
+}
+function VideoSkin(props) {
+	const { children, className, renderPoster, style, ...rest } = props;
+	return /* @__PURE__ */ jsxs(Container, {
+		className: cn("media-default-skin media-default-skin--video", className),
+		style,
+		...rest,
+		children: [
+			children,
+			/* @__PURE__ */ jsx(Poster, { render: renderPoster }),
+			/* @__PURE__ */ jsx(BufferingIndicator, { render: (props) => /* @__PURE__ */ jsx("div", {
+				...props,
+				className: "media-buffering-indicator",
+				children: /* @__PURE__ */ jsx(SpinnerIcon, { className: "media-icon" })
+			}) }),
+			/* @__PURE__ */ jsx(ErrorDialogRoot, { children: /* @__PURE__ */ jsx(AlertDialogPopup, {
+				className: "media-error",
+				children: /* @__PURE__ */ jsxs("div", {
+					className: "media-error__dialog media-surface",
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: "media-error__content",
+						children: [/* @__PURE__ */ jsx(ErrorDialogTitle, { className: "media-error__title" }), /* @__PURE__ */ jsx(ErrorDialogDescription, { className: "media-error__description" })]
+					}), /* @__PURE__ */ jsx("div", {
+						className: "media-error__actions",
+						children: /* @__PURE__ */ jsx(ErrorDialogClose, { className: "media-button media-button--primary" })
+					})]
+				})
+			}) }),
+			/* @__PURE__ */ jsx(ControlsRoot, {
+				className: "media-surface media-controls media-controls--root",
+				children: /* @__PURE__ */ jsxs(TooltipProvider, { children: [/* @__PURE__ */ jsxs("div", {
+					className: "media-surface media-controls media-controls--primary",
+					children: [
+						/* @__PURE__ */ jsxs("div", {
+							className: "media-button-group",
+							children: [/* @__PURE__ */ jsxs(TooltipRoot, {
+								side: "top",
+								children: [/* @__PURE__ */ jsx(TooltipTrigger, { render: /* @__PURE__ */ jsxs(PlayButton, {
+									className: "media-button--play",
+									render: /* @__PURE__ */ jsx(Button, {}),
+									children: [
+										/* @__PURE__ */ jsx(RestartIcon, { className: "media-icon media-icon--restart" }),
+										/* @__PURE__ */ jsx(PlayIcon, { className: "media-icon media-icon--play" }),
+										/* @__PURE__ */ jsx(PauseIcon, { className: "media-icon media-icon--pause" })
+									]
+								}) }), /* @__PURE__ */ jsxs(TooltipPopup, {
+									className: "media-surface media-tooltip",
+									children: [/* @__PURE__ */ jsx(TooltipLabel, {}), /* @__PURE__ */ jsx(TooltipShortcut, { className: "media-tooltip__kbd" })]
+								})]
+							}), /* @__PURE__ */ jsx(VolumePopover, {})]
+						}),
+						/* @__PURE__ */ jsxs("div", {
+							className: "media-time-controls",
+							children: [
+								/* @__PURE__ */ jsx(Value, {
+									type: "current",
+									className: "media-time"
+								}),
+								/* @__PURE__ */ jsxs(TimeSliderRoot, {
+									className: "media-slider",
+									children: [
+										/* @__PURE__ */ jsx(TimeSliderChapters, {
+											className: "media-slider__chapters",
+											renderChapter: (props) => /* @__PURE__ */ jsx("div", {
+												...props,
+												className: cn(props.className, "media-slider__chapter"),
+												children: /* @__PURE__ */ jsxs(SliderTrack, {
+													className: "media-slider__track media-slider__chapter-track",
+													children: [/* @__PURE__ */ jsx(SliderBuffer, { className: "media-slider__buffer" }), /* @__PURE__ */ jsx(SliderFill, { className: "media-slider__fill" })]
+												})
+											})
+										}),
+										/* @__PURE__ */ jsx(SliderThumb, { className: "media-slider__thumb" }),
+										/* @__PURE__ */ jsxs(SliderPreview, {
+											overflow: "visible",
+											className: "media-slider__preview",
+											children: [/* @__PURE__ */ jsxs("div", {
+												className: "media-surface media-thumbnail media-slider__thumbnail",
+												children: [/* @__PURE__ */ jsx(SliderThumbnail, { className: "media-thumbnail__image" }), /* @__PURE__ */ jsx(SpinnerIcon, { className: "media-thumbnail__spinner media-icon" })]
+											}), /* @__PURE__ */ jsxs("div", {
+												className: "media-slider__value",
+												children: [/* @__PURE__ */ jsx(TimeSliderChapterTitle, { className: "media-slider__chapter-title" }), /* @__PURE__ */ jsx(SliderValue, {
+													type: "pointer",
+													className: "media-time"
+												})]
+											})]
+										})
+									]
+								}),
+								/* @__PURE__ */ jsx(Value, {
+									toggle: true,
+									type: "remaining",
+									className: "media-time"
+								})
+							]
+						}),
+						/* @__PURE__ */ jsxs("div", {
+							className: "media-button-group",
+							children: [/* @__PURE__ */ jsxs(TooltipRoot, {
+								side: "top",
+								children: [/* @__PURE__ */ jsx(TooltipTrigger, { render: /* @__PURE__ */ jsxs(CaptionsButton, {
+									className: "media-button--captions",
+									render: /* @__PURE__ */ jsx(Button, {}),
+									children: [/* @__PURE__ */ jsx(CaptionsOffIcon, { className: "media-icon media-icon--captions-off" }), /* @__PURE__ */ jsx(CaptionsOnIcon, { className: "media-icon media-icon--captions-on" })]
+								}) }), /* @__PURE__ */ jsxs(TooltipPopup, {
+									className: "media-surface media-tooltip",
+									children: [/* @__PURE__ */ jsx(TooltipLabel, {}), /* @__PURE__ */ jsx(TooltipShortcut, { className: "media-tooltip__kbd" })]
+								})]
+							}), /* @__PURE__ */ jsx(SettingsMenu, {})]
+						})
+					]
+				}), /* @__PURE__ */ jsx("div", {
+					className: "media-surface media-controls media-controls--secondary",
+					children: /* @__PURE__ */ jsxs("div", {
+						className: "media-button-group",
+						children: [
+							/* @__PURE__ */ jsx(CastControl, {}),
+							/* @__PURE__ */ jsx(AirPlayControl, {}),
+							/* @__PURE__ */ jsx(PiPControl, {}),
+							/* @__PURE__ */ jsx(FullscreenControl, {})
+						]
+					})
+				})] })
+			}),
+			/* @__PURE__ */ jsx("div", { className: "media-overlay" }),
+			/* @__PURE__ */ jsx(Hotkey, {
+				keys: "Space",
+				action: "togglePaused"
+			}),
+			/* @__PURE__ */ jsx(Hotkey, {
+				keys: "k",
+				action: "togglePaused"
+			}),
+			/* @__PURE__ */ jsx(Hotkey, {
+				keys: "m",
+				action: "toggleMuted"
+			}),
+			/* @__PURE__ */ jsx(Hotkey, {
+				keys: "f",
+				action: "toggleFullscreen"
+			}),
+			/* @__PURE__ */ jsx(Hotkey, {
+				keys: "c",
+				action: "toggleSubtitles"
+			}),
+			/* @__PURE__ */ jsx(Hotkey, {
+				keys: "i",
+				action: "togglePictureInPicture"
+			}),
+			/* @__PURE__ */ jsx(Hotkey, {
+				keys: "ArrowRight",
+				action: "seekStep",
+				value: SEEK_TIME / 2
+			}),
+			/* @__PURE__ */ jsx(Hotkey, {
+				keys: "ArrowLeft",
+				action: "seekStep",
+				value: -5
+			}),
+			/* @__PURE__ */ jsx(Hotkey, {
+				keys: "l",
+				action: "seekStep",
+				value: SEEK_TIME
+			}),
+			/* @__PURE__ */ jsx(Hotkey, {
+				keys: "j",
+				action: "seekStep",
+				value: -10
+			}),
+			/* @__PURE__ */ jsx(Hotkey, {
+				keys: "ArrowUp",
+				action: "volumeStep",
+				value: .05
+			}),
+			/* @__PURE__ */ jsx(Hotkey, {
+				keys: "ArrowDown",
+				action: "volumeStep",
+				value: -.05
+			}),
+			/* @__PURE__ */ jsx(Hotkey, {
+				keys: "0-9",
+				action: "seekToPercent"
+			}),
+			/* @__PURE__ */ jsx(Hotkey, {
+				keys: "Home",
+				action: "seekToPercent",
+				value: 0
+			}),
+			/* @__PURE__ */ jsx(Hotkey, {
+				keys: "End",
+				action: "seekToPercent",
+				value: 100
+			}),
+			/* @__PURE__ */ jsx(Hotkey, {
+				keys: ">",
+				action: "speedUp"
+			}),
+			/* @__PURE__ */ jsx(Hotkey, {
+				keys: "<",
+				action: "speedDown"
+			}),
+			/* @__PURE__ */ jsx(Gesture, {
+				type: "tap",
+				action: "togglePaused",
+				pointer: "mouse",
+				region: "center"
+			}),
+			/* @__PURE__ */ jsx(Gesture, {
+				type: "tap",
+				action: "toggleControls",
+				pointer: "touch"
+			}),
+			/* @__PURE__ */ jsx(Gesture, {
+				type: "doubletap",
+				action: "seekStep",
+				value: -10,
+				region: "left"
+			}),
+			/* @__PURE__ */ jsx(Gesture, {
+				type: "doubletap",
+				action: "toggleFullscreen",
+				region: "center"
+			}),
+			/* @__PURE__ */ jsx(Gesture, {
+				type: "doubletap",
+				action: "seekStep",
+				value: SEEK_TIME,
+				region: "right"
+			}),
+			/* @__PURE__ */ jsx(StatusAnnouncer, { className: "media-sr-only" }),
+			/* @__PURE__ */ jsxs("div", {
+				className: "media-input-indicator-overlay",
+				children: [
+					/* @__PURE__ */ jsx(VolumeIndicatorRoot, {
+						className: "media-surface media-volume-indicator",
+						children: /* @__PURE__ */ jsxs(VolumeIndicatorFill, {
+							className: "media-volume-indicator__content",
+							children: [
+								/* @__PURE__ */ jsx(VolumeHighIcon, { className: "media-icon media-icon--volume-high" }),
+								/* @__PURE__ */ jsx(VolumeLowIcon, { className: "media-icon media-icon--volume-low" }),
+								/* @__PURE__ */ jsx(VolumeOffIcon, { className: "media-icon media-icon--volume-off" }),
+								/* @__PURE__ */ jsx(VolumeIndicatorValue, { className: "media-volume-indicator__value" })
+							]
+						})
 					}),
-					/* @__PURE__ */ jsxs(TooltipRoot, {
-						side: "top",
-						children: [/* @__PURE__ */ jsx(TooltipTrigger, { render: /* @__PURE__ */ jsx(CaptionsButton, { render: (props) => /* @__PURE__ */ jsxs(Button, {
-							...props,
-							className: "media-button--icon media-button--captions",
-							children: [/* @__PURE__ */ jsx(CaptionsOffIcon, { className: "media-icon media-icon--captions-off" }), /* @__PURE__ */ jsx(CaptionsOnIcon, { className: "media-icon media-icon--captions-on" })]
-						}) }) }), /* @__PURE__ */ jsx(TooltipPopup, {
-							className: "media-surface media-tooltip",
-							children: /* @__PURE__ */ jsx(CaptionsLabel, {})
-						})]
+					/* @__PURE__ */ jsx(StatusIndicatorRoot, {
+						actions: TOP_STATUS_ACTIONS,
+						className: "media-surface media-status-indicator media-status-indicator--state",
+						children: /* @__PURE__ */ jsxs("div", {
+							className: "media-status-indicator__content",
+							children: [
+								/* @__PURE__ */ jsx(CaptionsOnIcon, { className: "media-icon media-icon--captions-on" }),
+								/* @__PURE__ */ jsx(CaptionsOffIcon, { className: "media-icon media-icon--captions-off" }),
+								/* @__PURE__ */ jsx(FullscreenEnterIcon, { className: "media-icon media-icon--fullscreen-enter" }),
+								/* @__PURE__ */ jsx(FullscreenExitIcon, { className: "media-icon media-icon--fullscreen-exit" }),
+								/* @__PURE__ */ jsx(PipEnterIcon, { className: "media-icon media-icon--pip-enter" }),
+								/* @__PURE__ */ jsx(PipExitIcon, { className: "media-icon media-icon--pip-exit" }),
+								/* @__PURE__ */ jsx(StatusIndicatorValue, { className: "media-status-indicator__value" })
+							]
+						})
 					}),
-					/* @__PURE__ */ jsxs(TooltipRoot, {
-						side: "top",
-						children: [/* @__PURE__ */ jsx(TooltipTrigger, { render: /* @__PURE__ */ jsx(PiPButton, { render: (props) => /* @__PURE__ */ jsx(Button, {
-							...props,
-							className: "media-button--icon",
-							children: /* @__PURE__ */ jsx(PipIcon, { className: "media-icon" })
-						}) }) }), /* @__PURE__ */ jsx(TooltipPopup, {
-							className: "media-surface media-tooltip",
-							children: /* @__PURE__ */ jsx(PiPLabel, {})
-						})]
+					/* @__PURE__ */ jsxs(SeekIndicatorRoot, {
+						className: "media-seek-indicator",
+						children: [/* @__PURE__ */ jsx(ChevronIcon, { className: "media-icon media-icon--seek" }), /* @__PURE__ */ jsx(SeekIndicatorValue, { className: "media-seek-indicator__value" })]
 					}),
-					/* @__PURE__ */ jsxs(TooltipRoot, {
-						side: "top",
-						children: [/* @__PURE__ */ jsx(TooltipTrigger, { render: /* @__PURE__ */ jsx(FullscreenButton, { render: (props) => /* @__PURE__ */ jsxs(Button, {
-							...props,
-							className: "media-button--icon media-button--fullscreen",
-							children: [/* @__PURE__ */ jsx(FullscreenEnterIcon, { className: "media-icon media-icon--fullscreen-enter" }), /* @__PURE__ */ jsx(FullscreenExitIcon, { className: "media-icon media-icon--fullscreen-exit" })]
-						}) }) }), /* @__PURE__ */ jsx(TooltipPopup, {
-							className: "media-surface media-tooltip",
-							children: /* @__PURE__ */ jsx(FullscreenLabel, {})
-						})]
+					/* @__PURE__ */ jsxs(StatusIndicatorRoot, {
+						actions: CENTER_STATUS_ACTIONS,
+						className: "media-status-indicator media-status-indicator--playback",
+						children: [/* @__PURE__ */ jsx(PlayIcon, { className: "media-icon media-icon--play" }), /* @__PURE__ */ jsx(PauseIcon, { className: "media-icon media-icon--pause" })]
 					})
 				]
-			}),
-			/* @__PURE__ */ jsx("div", { className: "media-overlay" })
+			})
 		]
 	});
 }
-
 //#endregion
 export { VideoSkin };
+
 //# sourceMappingURL=skin.js.map