@videojs/react 10.0.0-alpha.3 → 10.0.0-alpha.5

package/dist/default/presets/video/minimal-skin.css

@@ -1,3 +1,54 @@
+/* ==========================================================================
+   Icon State Visibility
+
+   Data-attribute-driven visibility rules for multi-state icon buttons.
+   Uses :is() with both element selectors (for HTML custom element wrappers)
+   and class selectors (for React rendered SVG elements).
+   ========================================================================== */
+
+/* --- All icons hidden by default --- */
+
+.media-button--play .media-icon--restart,
+.media-button--play .media-icon--play,
+.media-button--play .media-icon--pause,
+.media-button--mute .media-icon--volume-off,
+.media-button--mute .media-icon--volume-low,
+.media-button--mute .media-icon--volume-high,
+.media-button--fullscreen .media-icon--fullscreen-enter,
+.media-button--fullscreen .media-icon--fullscreen-exit,
+.media-button--captions .media-icon--captions-off,
+.media-button--captions .media-icon--captions-on {
+  display: none;
+  opacity: 0;
+}
+
+/* --- Active icon per state --- */
+
+/* Play: ended → restart */
+.media-button--play[data-ended] .media-icon--restart,
+/* Play: paused (not ended) → play */
+.media-button--play:not([data-ended])[data-paused] .media-icon--play,
+/* Play: playing (not paused, not ended) → pause */
+.media-button--play:not([data-paused]):not([data-ended]) .media-icon--pause,
+/* Mute: muted → volume off */
+.media-button--mute[data-muted] .media-icon--volume-off,
+/* Mute: volume low (not muted) → volume low */
+.media-button--mute:not([data-muted])[data-volume-level="low"] .media-icon--volume-low,
+/* Mute: volume high (not muted, not low) → volume high */
+.media-button--mute:not([data-muted]):not([data-volume-level="low"]) .media-icon--volume-high,
+/* Fullscreen: not fullscreen → enter */
+.media-button--fullscreen:not([data-fullscreen]) .media-icon--fullscreen-enter,
+/* Fullscreen: fullscreen → exit */
+.media-button--fullscreen[data-fullscreen] .media-icon--fullscreen-exit,
+/* Captions: not active → captions off */
+.media-button--captions:not([data-active]) .media-icon--captions-off,
+/* Captions: active → captions on */
+.media-button--captions[data-active] .media-icon--captions-on {
+  display: block;
+  opacity: 1;
+}
+
+
 /* ==========================================================================
    Reset
    ========================================================================== */
@@ -30,6 +81,7 @@
 .media-minimal-skin {
   position: relative;
   isolation: isolate;
+  display: block;
   container: media-root / inline-size;
   overflow: clip;
   border-radius: var(--media-border-radius, 0.75rem);
@@ -75,6 +127,7 @@
 .media-minimal-skin > video {
   width: 100%;
   height: 100%;
+  border-radius: inherit;
 }
 
 /* ==========================================================================
@@ -86,6 +139,7 @@
   inset: 0;
   width: 100%;
   height: 100%;
+  border-radius: inherit;
   object-fit: cover;
   transition: opacity 0.25s;
   pointer-events: none;
@@ -101,6 +155,7 @@
 .media-minimal-skin .media-overlay {
   position: absolute;
   inset: 0;
+  z-index: 1;
   border-radius: inherit;
   background-image: linear-gradient(to top, oklch(0 0 0 / 0.7), oklch(0 0 0 / 0.5) 7.5rem, oklch(0 0 0 / 0));
   backdrop-filter: blur(0) saturate(1.2) brightness(0.9);
@@ -134,12 +189,15 @@
   position: absolute;
   inset: 0;
   z-index: 10;
-  display: flex;
+  display: none;
   align-items: center;
   justify-content: center;
   color: oklch(1 0 0);
   pointer-events: none;
 }
+.media-minimal-skin .media-buffering-indicator[data-visible] {
+  display: flex;
+}
 
 /* ==========================================================================
    Error Dialog
@@ -327,6 +385,7 @@
   outline-offset: -2px;
   color: oklch(0 0 0);
   font-weight: 500;
+  text-align: center;
   transition-property: background-color, color, outline-offset;
   transition-duration: 150ms;
   transition-timing-function: ease-out;
@@ -346,7 +405,9 @@
 /* Icon button variant */
 .media-minimal-skin .media-button--icon {
   display: grid;
-  padding: 0.625rem;
+  width: 2.375rem;
+  padding: 0;
+  aspect-ratio: 1;
   background: transparent;
   color: oklch(1 0 0);
 }
@@ -360,13 +421,35 @@
   filter: drop-shadow(0 1px 0 oklch(0 0 0 / 0.25));
 }
 
-/* Seek button variant — hidden at small sizes */
+/* Seek button */
+.media-minimal-skin .media-button--seek .media-icon__label {
+  position: absolute;
+  right: -1px;
+  bottom: -3px;
+  font-size: 0.75em;
+  font-weight: 480;
+  font-variant-numeric: tabular-nums;
+}
+.media-minimal-skin .media-button--seek:has(.media-icon--flipped) .media-icon__label {
+  right: unset;
+  left: -1px;
+}
 @container media-controls (width < 28rem) {
   .media-minimal-skin .media-button--seek {
     display: none;
   }
 }
 
+/* Playback rate button */
+.media-minimal-skin .media-button--playback-rate {
+  padding: 0;
+}
+.media-minimal-skin .media-button--playback-rate::after {
+  content: attr(data-rate) "\00D7";
+  width: 4ch;
+  font-variant-numeric: tabular-nums;
+}
+
 /* ==========================================================================
    Icons
    ========================================================================== */
@@ -375,6 +458,8 @@
   position: relative;
 }
 .media-minimal-skin .media-icon {
+  display: block;
+  flex-shrink: 0;
   grid-area: 1 / 1;
   width: 18px;
   height: 18px;
@@ -383,28 +468,10 @@
   transition-duration: 150ms;
   transition-timing-function: ease-out;
 }
-.media-minimal-skin .media-icon--hidden {
-  display: none;
-  opacity: 0;
-}
 .media-minimal-skin .media-icon--flipped {
   scale: -1 1;
 }
 
-/* Seek icon label positioning */
-.media-minimal-skin .media-icon--seek ~ .media-icon__label {
-  position: absolute;
-  right: 0;
-  bottom: -3px;
-  font-size: 0.75em;
-  font-weight: 480;
-  font-variant-numeric: tabular-nums;
-}
-.media-minimal-skin .media-icon--seek.media-icon--flipped ~ .media-icon__label {
-  right: unset;
-  left: 0;
-}
-
 /* ==========================================================================
    Slider
    ========================================================================== */
@@ -439,10 +506,7 @@
   overflow: hidden;
   background-color: oklch(1 0 0 / 0.2);
   border-radius: inherit;
-  outline: 2px solid transparent;
-  outline-offset: -2px;
   box-shadow: 0 0 0 1px oklch(0 0 0 / 0.05);
-  transition: outline-offset 150ms ease-out;
   user-select: none;
 }
 .media-minimal-skin .media-slider__track[data-orientation="horizontal"] {
@@ -453,13 +517,11 @@
   width: 0.1875rem;
   height: 100%;
 }
-.media-minimal-skin .media-slider:focus-visible .media-slider__track {
-  outline-color: oklch(1 0 0);
-  outline-offset: 6px;
-}
 
 /* Thumb */
 .media-minimal-skin .media-slider__thumb {
+  position: absolute;
+  transform: translate(-50%, -50%);
   z-index: 10;
   width: 0.75rem;
   height: 0.75rem;
@@ -472,32 +534,74 @@
   opacity: 0;
   scale: 0.7;
   transform-origin: center;
-  transition-property: opacity, scale;
+  transition-property: opacity, scale, outline-offset;
   transition-duration: 150ms;
   transition-timing-function: ease-out;
   user-select: none;
+  outline: 2px solid transparent;
+  outline-offset: -2px;
+}
+.media-minimal-skin .media-slider__thumb[data-orientation="horizontal"] {
+  top: 50%;
+  left: var(--media-slider-fill);
+}
+.media-minimal-skin .media-slider__thumb[data-orientation="vertical"] {
+  left: 50%;
+  top: calc(100% - var(--media-slider-fill));
+}
+.media-minimal-skin .media-slider__thumb:focus-visible {
+  outline-color: oklch(1 0 0);
+  outline-offset: 2px;
 }
 .media-minimal-skin .media-slider:hover .media-slider__thumb,
-.media-minimal-skin .media-slider:focus-within .media-slider__thumb {
+.media-minimal-skin .media-slider:focus-within .media-slider__thumb,
+.media-minimal-skin .media-slider__thumb--persistent {
   opacity: 1;
   scale: 1;
 }
-.media-minimal-skin .media-slider__track[data-orientation="horizontal"] .media-slider__thumb {
-  cursor: ew-resize;
+
+/* Shared track fills */
+.media-minimal-skin .media-slider__buffer,
+.media-minimal-skin .media-slider__fill {
+  position: absolute;
+  border-radius: inherit;
+  pointer-events: none;
+}
+.media-minimal-skin .media-slider__buffer[data-orientation="horizontal"],
+.media-minimal-skin .media-slider__fill[data-orientation="horizontal"] {
+  inset-block: 0;
+  left: 0;
 }
-.media-minimal-skin .media-slider__track[data-orientation="vertical"] .media-slider__thumb {
-  cursor: ns-resize;
+.media-minimal-skin .media-slider__buffer[data-orientation="vertical"],
+.media-minimal-skin .media-slider__fill[data-orientation="vertical"] {
+  inset-inline: 0;
+  bottom: 0;
 }
 
-/* Pointer (hidden in minimal skin) */
-.media-minimal-skin .media-slider__pointer {
-  display: none;
+/* Buffer */
+.media-minimal-skin .media-slider__buffer {
+  background-color: oklch(1 0 0 / 0.2);
+  transition-duration: 0.25s;
+  transition-timing-function: ease-out;
+}
+.media-minimal-skin .media-slider__buffer[data-orientation="horizontal"] {
+  width: var(--media-slider-buffer);
+  transition-property: width;
+}
+.media-minimal-skin .media-slider__buffer[data-orientation="vertical"] {
+  height: var(--media-slider-buffer);
+  transition-property: height;
 }
 
-/* Progress fill */
-.media-minimal-skin .media-slider__progress {
+/* Fill */
+.media-minimal-skin .media-slider__fill {
   background-color: oklch(1 0 0);
-  border-radius: inherit;
+}
+.media-minimal-skin .media-slider__fill[data-orientation="horizontal"] {
+  width: var(--media-slider-fill);
+}
+.media-minimal-skin .media-slider__fill[data-orientation="vertical"] {
+  height: var(--media-slider-fill);
 }
 
 /* Time display within slider */
@@ -527,11 +631,14 @@
   transition-duration: 0ms;
 }
 
-.media-minimal-skin .media-popover-popup {
+.media-minimal-skin .media-popup {
   margin: 0;
-  padding: 0.5rem;
   border: 0;
   background: transparent;
+  --media-popover-side-offset: 0.5rem;
+}
+.media-minimal-skin .media-popup--volume {
+  padding: 0.25rem;
 }
 
 /* ==========================================================================
@@ -573,16 +680,8 @@
   z-index: 20;
   font-size: 1rem;
   text-wrap: balance;
-  /* The delay must account for the controls delay/duration */
-  transition: transform 150ms ease-out;
-  transition-delay: 600ms;
   pointer-events: none;
 }
-@media (prefers-reduced-motion: reduce) {
-  .media-minimal-skin .media-captions {
-    transition-duration: 50ms;
-  }
-}
 .media-minimal-skin .media-captions__container {
   display: flex;
   flex-direction: column;
@@ -630,8 +729,34 @@
   }
 }
 
-/* Shift captions up when controls visible */
+/* Caption shifting styles (custom and native) */
+.media-minimal-skin {
+  --media-caption-track-delay: 600ms;
+  --media-caption-track-y: -0.5rem;
+}
+.media-minimal-skin:has(.media-controls[data-visible]) {
+  --media-caption-track-delay: 25ms;
+  --media-caption-track-y: -3rem;
+}
+.media-minimal-skin .media-captions,
+.media-minimal-skin video::-webkit-media-text-track-container {
+  /* NOTE: The delay must account for the controls delay/duration */
+  transition: transform 150ms ease-out;
+  transition-delay: var(--media-caption-track-delay);
+}
+.media-minimal-skin video::-webkit-media-text-track-container {
+  transform: translateY(var(--media-caption-track-y)) scale(0.98);
+  z-index: 1;
+  font-family: inherit;
+}
+/* When controls are visible, shift captions up to avoid overlap */
 .media-minimal-skin .media-controls[data-visible] ~ .media-captions {
-  transform: translateY(-2.5rem);
-  transition-delay: 25ms;
+  transform: translateY(calc(var(--media-caption-track-y) - 0.5rem));
 }
+@media (prefers-reduced-motion: reduce) {
+  .media-minimal-skin .media-captions,
+  .media-minimal-skin video::-webkit-media-text-track-container {
+    transition-duration: 50ms;
+  }
+}
+

package/dist/default/presets/video/minimal-skin.js

@@ -5,15 +5,37 @@ import { FullscreenButton } from "../../ui/fullscreen-button/fullscreen-button.j
 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 { 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 { SliderBuffer } from "../../ui/slider/slider-buffer.js";
+import { SliderFill } from "../../ui/slider/slider-fill.js";
+import { SliderThumb } from "../../ui/slider/slider-thumb.js";
+import { SliderTrack } from "../../ui/slider/slider-track.js";
 import { Group } from "../../ui/time/time-group.js";
 import { Separator } from "../../ui/time/time-separator.js";
 import { Value } from "../../ui/time/time-value.js";
+import { TimeSliderRoot } from "../../ui/time-slider/time-slider-root.js";
+import { VolumeSliderRoot } from "../../ui/volume-slider/volume-slider-root.js";
+import CaptionsOffIcon from "../../icons/dist/react/minimal/captions-off.js";
+import CaptionsOnIcon from "../../icons/dist/react/minimal/captions-on.js";
+import FullscreenEnterIcon from "../../icons/dist/react/minimal/fullscreen-enter.js";
+import FullscreenExitIcon from "../../icons/dist/react/minimal/fullscreen-exit.js";
+import PauseIcon from "../../icons/dist/react/minimal/pause.js";
+import PipIcon from "../../icons/dist/react/minimal/pip.js";
+import PlayIcon from "../../icons/dist/react/minimal/play.js";
+import RestartIcon from "../../icons/dist/react/minimal/restart.js";
+import SeekIcon from "../../icons/dist/react/minimal/seek.js";
+import SpinnerIcon from "../../icons/dist/react/minimal/spinner.js";
+import VolumeHighIcon from "../../icons/dist/react/minimal/volume-high.js";
+import VolumeLowIcon from "../../icons/dist/react/minimal/volume-low.js";
+import VolumeOffIcon from "../../icons/dist/react/minimal/volume-off.js";
 import { CaptionsButton } from "../../ui/captions-button/captions-button.js";
 import { ErrorDialog } from "../../ui/error-dialog/error-dialog.js";
 import { forwardRef } from "react";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { CaptionsOffIcon, CaptionsOnIcon, FullscreenEnterIcon, FullscreenExitIcon, PauseIcon, PipIcon, PlayIcon, RestartIcon, SeekIcon, SpinnerIcon, VolumeHighIcon, VolumeLowIcon, VolumeOffIcon } from "@videojs/icons/react/minimal";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { cn } from "@videojs/utils/style";
 
 //#region src/presets/video/minimal-skin.tsx
@@ -26,72 +48,17 @@ const Button = forwardRef(function Button({ className, ...props }, ref) {
 		...props
 	});
 });
-function PlayButtonIcon({ state, className, ...rest }) {
-	const { ended, paused } = state;
-	return /* @__PURE__ */ jsxs(Fragment, { children: [
-		/* @__PURE__ */ jsx(RestartIcon, {
-			...rest,
-			className: cn(className, { "media-icon--hidden": !ended })
-		}),
-		/* @__PURE__ */ jsx(PlayIcon, {
-			...rest,
-			className: cn(className, { "media-icon--hidden": ended || !paused })
-		}),
-		/* @__PURE__ */ jsx(PauseIcon, {
-			...rest,
-			className: cn(className, { "media-icon--hidden": paused })
-		})
-	] });
-}
-function MuteButtonIcon({ state, className, ...rest }) {
-	const { muted, volumeLevel } = state;
-	return /* @__PURE__ */ jsxs(Fragment, { children: [
-		/* @__PURE__ */ jsx(VolumeOffIcon, {
-			...rest,
-			className: cn(className, { "media-icon--hidden": !muted })
-		}),
-		/* @__PURE__ */ jsx(VolumeLowIcon, {
-			...rest,
-			className: cn(className, { "media-icon--hidden": muted || volumeLevel !== "low" })
-		}),
-		/* @__PURE__ */ jsx(VolumeHighIcon, {
-			...rest,
-			className: cn(className, { "media-icon--hidden": muted || volumeLevel === "low" })
-		})
-	] });
-}
-function CaptionsButtonIcon({ state, className, ...rest }) {
-	const { active } = state;
-	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(CaptionsOffIcon, {
-		...rest,
-		className: cn(className, { "media-icon--hidden": active })
-	}), /* @__PURE__ */ jsx(CaptionsOnIcon, {
-		...rest,
-		className: cn(className, { "media-icon--hidden": !active })
-	})] });
-}
-function FullscreenButtonIcon({ state, className, ...rest }) {
-	const { fullscreen } = state;
-	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(FullscreenExitIcon, {
-		...rest,
-		className: cn(className, { "media-icon--hidden": !fullscreen })
-	}), /* @__PURE__ */ jsx(FullscreenEnterIcon, {
-		...rest,
-		className: cn(className, { "media-icon--hidden": fullscreen })
-	})] });
-}
 function MinimalVideoSkin(props) {
 	const { children, className, ...rest } = props;
 	return /* @__PURE__ */ jsxs(Container, {
 		className: cn("media-minimal-skin", className),
 		...rest,
 		children: [
-			children,
-			/* @__PURE__ */ jsx(BufferingIndicator, { render: (props, state) => state.visible ? /* @__PURE__ */ jsx("div", {
+			/* @__PURE__ */ jsx(BufferingIndicator, { render: (props) => /* @__PURE__ */ jsx("div", {
 				...props,
 				className: "media-buffering-indicator",
 				children: /* @__PURE__ */ jsx(SpinnerIcon, { className: "media-icon" })
-			}) : null }),
+			}) }),
 			/* @__PURE__ */ jsx(ErrorDialog, {
 				"aria-labelledby": "media-error-title",
 				"aria-describedby": "media-error-description",
@@ -127,13 +94,14 @@ function MinimalVideoSkin(props) {
 					/* @__PURE__ */ jsxs("span", {
 						className: "media-button-group",
 						children: [
-							/* @__PURE__ */ jsx(PlayButton, { render: (props, state) => /* @__PURE__ */ jsx(Button, {
+							/* @__PURE__ */ jsx(PlayButton, { render: (props) => /* @__PURE__ */ jsxs(Button, {
 								...props,
-								className: "media-button--icon",
-								children: /* @__PURE__ */ jsx(PlayButtonIcon, {
-									state,
-									className: "media-icon"
-								})
+								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(SeekButton, {
 								seconds: -SEEK_TIME,
@@ -180,51 +148,68 @@ function MinimalVideoSkin(props) {
 									className: "media-time__value media-time__value--duration"
 								})
 							]
-						}), /* @__PURE__ */ jsx("span", {
+						}), /* @__PURE__ */ jsxs(TimeSliderRoot, {
 							className: "media-slider",
-							style: {
-								height: "4px",
-								background: "oklch(1 0 0 / 0.2)"
-							}
+							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("span", {
 						className: "media-button-group",
 						children: [
-							/* @__PURE__ */ jsx(MuteButton, { render: (props, state) => /* @__PURE__ */ jsx(Button, {
+							/* @__PURE__ */ jsx(PlaybackRateButton, { render: (props) => /* @__PURE__ */ jsx(Button, {
 								...props,
-								className: "media-button--icon",
-								children: /* @__PURE__ */ jsx(MuteButtonIcon, {
-									state,
-									className: "media-icon"
-								})
+								className: "media-button--icon media-button--playback-rate"
 							}) }),
-							/* @__PURE__ */ jsx(CaptionsButton, { render: (props, state) => /* @__PURE__ */ jsx(Button, {
+							/* @__PURE__ */ jsxs(PopoverRoot, {
+								openOnHover: true,
+								delay: 200,
+								closeDelay: 100,
+								side: "top",
+								children: [/* @__PURE__ */ jsx(PopoverTrigger, { render: /* @__PURE__ */ jsx(MuteButton, { render: (props) => /* @__PURE__ */ jsxs(Button, {
+									...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(PopoverPopup, {
+									className: "media-surface media-popup media-popup--volume media-popup-animation",
+									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__ */ jsx(CaptionsButton, { render: (props) => /* @__PURE__ */ jsxs(Button, {
 								...props,
-								className: "media-button--icon",
-								children: /* @__PURE__ */ jsx(CaptionsButtonIcon, {
-									state,
-									className: "media-icon"
-								})
+								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(PiPButton, { render: (props) => /* @__PURE__ */ jsx(Button, {
 								...props,
 								className: "media-button--icon",
 								children: /* @__PURE__ */ jsx(PipIcon, { className: "media-icon" })
 							}) }),
-							/* @__PURE__ */ jsx(FullscreenButton, { render: (props, state) => /* @__PURE__ */ jsx(Button, {
+							/* @__PURE__ */ jsx(FullscreenButton, { render: (props) => /* @__PURE__ */ jsxs(Button, {
 								...props,
-								className: "media-button--icon",
-								children: /* @__PURE__ */ jsx(FullscreenButtonIcon, {
-									state,
-									className: "media-icon"
-								})
+								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("div", { className: "media-overlay" })
+			/* @__PURE__ */ jsx("div", { className: "media-overlay" }),
+			children
 		]
 	});
 }

package/dist/default/presets/video/minimal-skin.js.map

@@ -1 +1 @@
-{"version":3,"file":"minimal-skin.js","names":["Controls.Root","Time.Group","Time.Value","Time.Separator"],"sources":["../../../../src/presets/video/minimal-skin.tsx"],"sourcesContent":["import type { FullscreenButtonState, MuteButtonState, PlayButtonState } from '@videojs/core';\nimport {\n  CaptionsOffIcon,\n  CaptionsOnIcon,\n  FullscreenEnterIcon,\n  FullscreenExitIcon,\n  PauseIcon,\n  PipIcon,\n  PlayIcon,\n  RestartIcon,\n  SeekIcon,\n  SpinnerIcon,\n  VolumeHighIcon,\n  VolumeLowIcon,\n  VolumeOffIcon,\n} from '@videojs/icons/react/minimal';\nimport { cn } from '@videojs/utils/style';\nimport { type ComponentProps, forwardRef, type ReactNode } from 'react';\nimport { Container } from '@/player/context';\nimport { BufferingIndicator } from '@/ui/buffering-indicator';\nimport { CaptionsButton, type CaptionsButtonState } from '@/ui/captions-button';\nimport { Controls } from '@/ui/controls';\nimport { ErrorDialog } from '@/ui/error-dialog';\nimport { FullscreenButton } from '@/ui/fullscreen-button';\nimport { MuteButton } from '@/ui/mute-button';\nimport { PiPButton } from '@/ui/pip-button';\nimport { PlayButton } from '@/ui/play-button';\nimport { SeekButton } from '@/ui/seek-button';\nimport { Time } from '@/ui/time';\nimport type { BaseSkinProps } from '../types';\n\nconst SEEK_TIME = 10;\n\nexport type MinimalVideoSkinProps = BaseSkinProps;\n\nconst Button = forwardRef<HTMLButtonElement, ComponentProps<'button'>>(function Button({ className, ...props }, ref) {\n  return <button ref={ref} type=\"button\" className={cn('media-button', className)} {...props} />;\n});\n\nfunction PlayButtonIcon({ state, className, ...rest }: { state: PlayButtonState } & ComponentProps<'svg'>) {\n  const { ended, paused } = state;\n  return (\n    <>\n      <RestartIcon {...rest} className={cn(className, { 'media-icon--hidden': !ended })} />\n      <PlayIcon {...rest} className={cn(className, { 'media-icon--hidden': ended || !paused })} />\n      <PauseIcon {...rest} className={cn(className, { 'media-icon--hidden': paused })} />\n    </>\n  );\n}\n\nfunction MuteButtonIcon({ state, className, ...rest }: { state: MuteButtonState } & ComponentProps<'svg'>) {\n  const { muted, volumeLevel } = state;\n  return (\n    <>\n      <VolumeOffIcon {...rest} className={cn(className, { 'media-icon--hidden': !muted })} />\n      <VolumeLowIcon {...rest} className={cn(className, { 'media-icon--hidden': muted || volumeLevel !== 'low' })} />\n      <VolumeHighIcon {...rest} className={cn(className, { 'media-icon--hidden': muted || volumeLevel === 'low' })} />\n    </>\n  );\n}\n\nfunction CaptionsButtonIcon({ state, className, ...rest }: { state: CaptionsButtonState } & ComponentProps<'svg'>) {\n  const { active } = state;\n  return (\n    <>\n      <CaptionsOffIcon {...rest} className={cn(className, { 'media-icon--hidden': active })} />\n      <CaptionsOnIcon {...rest} className={cn(className, { 'media-icon--hidden': !active })} />\n    </>\n  );\n}\n\nfunction FullscreenButtonIcon({ state, className, ...rest }: { state: FullscreenButtonState } & ComponentProps<'svg'>) {\n  const { fullscreen } = state;\n  return (\n    <>\n      <FullscreenExitIcon {...rest} className={cn(className, { 'media-icon--hidden': !fullscreen })} />\n      <FullscreenEnterIcon {...rest} className={cn(className, { 'media-icon--hidden': fullscreen })} />\n    </>\n  );\n}\n\nexport function MinimalVideoSkin(props: MinimalVideoSkinProps): ReactNode {\n  const { children, className, ...rest } = props;\n\n  return (\n    <Container className={cn('media-minimal-skin', className)} {...rest}>\n      {children}\n\n      <BufferingIndicator\n        render={(props, state) =>\n          state.visible ? (\n            <div {...props} className=\"media-buffering-indicator\">\n              <SpinnerIcon className=\"media-icon\" />\n            </div>\n          ) : null\n        }\n      />\n\n      <ErrorDialog\n        aria-labelledby=\"media-error-title\"\n        aria-describedby=\"media-error-description\"\n        render={(props, { onDismiss }) => (\n          <div {...props} className=\"media-error\">\n            <div className=\"media-error__dialog\">\n              <div className=\"media-error__content\">\n                <p id=\"media-error-title\" className=\"media-error__title\">\n                  Something went wrong.\n                </p>\n                <p id=\"media-error-description\" className=\"media-error__description\">\n                  An error occurred while trying to play the video. Please try again.\n                </p>\n              </div>\n              <div className=\"media-error__actions\">\n                <Button onClick={onDismiss}>OK</Button>\n              </div>\n            </div>\n          </div>\n        )}\n      />\n\n      <Controls.Root className=\"media-controls\">\n        <span className=\"media-button-group\">\n          <PlayButton\n            render={(props, state) => (\n              <Button {...props} className=\"media-button--icon\">\n                <PlayButtonIcon state={state} className=\"media-icon\" />\n              </Button>\n            )}\n          />\n\n          <SeekButton\n            seconds={-SEEK_TIME}\n            render={(props) => (\n              <Button {...props} className=\"media-button--icon media-button--seek\">\n                <span className=\"media-icon__container\">\n                  <SeekIcon className=\"media-icon media-icon--seek media-icon--flipped\" />\n                  <span className=\"media-icon__label\">{SEEK_TIME}</span>\n                </span>\n              </Button>\n            )}\n          />\n\n          <SeekButton\n            seconds={SEEK_TIME}\n            render={(props) => (\n              <Button {...props} className=\"media-button--icon media-button--seek\">\n                <span className=\"media-icon__container\">\n                  <SeekIcon className=\"media-icon media-icon--seek\" />\n                  <span className=\"media-icon__label\">{SEEK_TIME}</span>\n                </span>\n              </Button>\n            )}\n          />\n        </span>\n\n        <span className=\"media-time-controls\">\n          <Time.Group className=\"media-time\">\n            <Time.Value type=\"current\" className=\"media-time__value media-time__value--current\" />\n            <Time.Separator className=\"media-time__separator\" />\n            <Time.Value type=\"duration\" className=\"media-time__value media-time__value--duration\" />\n          </Time.Group>\n\n          {/* Temporary spacer */}\n          <span className=\"media-slider\" style={{ height: '4px', background: 'oklch(1 0 0 / 0.2)' }} />\n        </span>\n\n        <span className=\"media-button-group\">\n          <MuteButton\n            render={(props, state) => (\n              <Button {...props} className=\"media-button--icon\">\n                <MuteButtonIcon state={state} className=\"media-icon\" />\n              </Button>\n            )}\n          />\n\n          <CaptionsButton\n            render={(props, state) => (\n              <Button {...props} className=\"media-button--icon\">\n                <CaptionsButtonIcon state={state} className=\"media-icon\" />\n              </Button>\n            )}\n          />\n\n          <PiPButton\n            render={(props) => (\n              <Button {...props} className=\"media-button--icon\">\n                <PipIcon className=\"media-icon\" />\n              </Button>\n            )}\n          />\n\n          <FullscreenButton\n            render={(props, state) => (\n              <Button {...props} className=\"media-button--icon\">\n                <FullscreenButtonIcon state={state} className=\"media-icon\" />\n              </Button>\n            )}\n          />\n        </span>\n      </Controls.Root>\n\n      {/* <div className=\"media-captions\">\n        <div className=\"media-captions__container\">\n          <span className=\"media-captions__text\">An example cue</span>\n          <span className=\"media-captions__text\">\n            <p>Another example cue with HTML</p>\n          </span>\n        </div>\n      </div> */}\n\n      <div className=\"media-overlay\" />\n    </Container>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"minimal-skin.js","names":["Controls.Root","Time.Group","Time.Value","Time.Separator","TimeSlider.Root","TimeSlider.Track","TimeSlider.Fill","TimeSlider.Buffer","TimeSlider.Thumb","Popover.Root","Popover.Trigger","Popover.Popup","VolumeSlider.Root","VolumeSlider.Track","VolumeSlider.Fill","VolumeSlider.Thumb"],"sources":["../../../../src/presets/video/minimal-skin.tsx"],"sourcesContent":["import {\n  CaptionsOffIcon,\n  CaptionsOnIcon,\n  FullscreenEnterIcon,\n  FullscreenExitIcon,\n  PauseIcon,\n  PipIcon,\n  PlayIcon,\n  RestartIcon,\n  SeekIcon,\n  SpinnerIcon,\n  VolumeHighIcon,\n  VolumeLowIcon,\n  VolumeOffIcon,\n} from '@videojs/icons/react/minimal';\nimport { cn } from '@videojs/utils/style';\nimport { type ComponentProps, forwardRef, type ReactNode } from 'react';\nimport { Container } from '@/player/context';\nimport { BufferingIndicator } from '@/ui/buffering-indicator';\nimport { CaptionsButton } from '@/ui/captions-button';\nimport { Controls } from '@/ui/controls';\nimport { ErrorDialog } from '@/ui/error-dialog';\nimport { FullscreenButton } from '@/ui/fullscreen-button';\nimport { MuteButton } from '@/ui/mute-button';\nimport { PiPButton } from '@/ui/pip-button';\nimport { PlayButton } from '@/ui/play-button';\nimport { PlaybackRateButton } from '@/ui/playback-rate-button';\nimport { Popover } from '@/ui/popover';\nimport { SeekButton } from '@/ui/seek-button';\nimport { Time } from '@/ui/time';\nimport { TimeSlider } from '@/ui/time-slider';\nimport { VolumeSlider } from '@/ui/volume-slider';\nimport type { BaseSkinProps } from '../types';\n\nconst SEEK_TIME = 10;\n\nexport type MinimalVideoSkinProps = BaseSkinProps;\n\nconst Button = forwardRef<HTMLButtonElement, ComponentProps<'button'>>(function Button({ className, ...props }, ref) {\n  return <button ref={ref} type=\"button\" className={cn('media-button', className)} {...props} />;\n});\n\nexport function MinimalVideoSkin(props: MinimalVideoSkinProps): ReactNode {\n  const { children, className, ...rest } = props;\n\n  return (\n    <Container className={cn('media-minimal-skin', className)} {...rest}>\n      <BufferingIndicator\n        render={(props) => (\n          <div {...props} className=\"media-buffering-indicator\">\n            <SpinnerIcon className=\"media-icon\" />\n          </div>\n        )}\n      />\n\n      <ErrorDialog\n        aria-labelledby=\"media-error-title\"\n        aria-describedby=\"media-error-description\"\n        render={(props, { onDismiss }) => (\n          <div {...props} className=\"media-error\">\n            <div className=\"media-error__dialog\">\n              <div className=\"media-error__content\">\n                <p id=\"media-error-title\" className=\"media-error__title\">\n                  Something went wrong.\n                </p>\n                <p id=\"media-error-description\" className=\"media-error__description\">\n                  An error occurred while trying to play the video. Please try again.\n                </p>\n              </div>\n              <div className=\"media-error__actions\">\n                <Button onClick={onDismiss}>OK</Button>\n              </div>\n            </div>\n          </div>\n        )}\n      />\n\n      <Controls.Root className=\"media-controls\">\n        <span className=\"media-button-group\">\n          <PlayButton\n            render={(props) => (\n              <Button {...props} className=\"media-button--icon media-button--play\">\n                <RestartIcon className=\"media-icon media-icon--restart\" />\n                <PlayIcon className=\"media-icon media-icon--play\" />\n                <PauseIcon className=\"media-icon media-icon--pause\" />\n              </Button>\n            )}\n          />\n\n          <SeekButton\n            seconds={-SEEK_TIME}\n            render={(props) => (\n              <Button {...props} className=\"media-button--icon media-button--seek\">\n                <span className=\"media-icon__container\">\n                  <SeekIcon className=\"media-icon media-icon--seek media-icon--flipped\" />\n                  <span className=\"media-icon__label\">{SEEK_TIME}</span>\n                </span>\n              </Button>\n            )}\n          />\n\n          <SeekButton\n            seconds={SEEK_TIME}\n            render={(props) => (\n              <Button {...props} className=\"media-button--icon media-button--seek\">\n                <span className=\"media-icon__container\">\n                  <SeekIcon className=\"media-icon media-icon--seek\" />\n                  <span className=\"media-icon__label\">{SEEK_TIME}</span>\n                </span>\n              </Button>\n            )}\n          />\n        </span>\n\n        <span className=\"media-time-controls\">\n          <Time.Group className=\"media-time\">\n            <Time.Value type=\"current\" className=\"media-time__value media-time__value--current\" />\n            <Time.Separator className=\"media-time__separator\" />\n            <Time.Value type=\"duration\" className=\"media-time__value media-time__value--duration\" />\n          </Time.Group>\n\n          <TimeSlider.Root className=\"media-slider\">\n            <TimeSlider.Track className=\"media-slider__track\">\n              <TimeSlider.Fill className=\"media-slider__fill\" />\n              <TimeSlider.Buffer className=\"media-slider__buffer\" />\n            </TimeSlider.Track>\n            <TimeSlider.Thumb className=\"media-slider__thumb\" />\n          </TimeSlider.Root>\n        </span>\n\n        <span className=\"media-button-group\">\n          <PlaybackRateButton\n            render={(props) => <Button {...props} className=\"media-button--icon media-button--playback-rate\" />}\n          />\n\n          <Popover.Root openOnHover delay={200} closeDelay={100} side=\"top\">\n            <Popover.Trigger\n              render={\n                <MuteButton\n                  render={(props) => (\n                    <Button {...props} className=\"media-button--icon media-button--mute\">\n                      <VolumeOffIcon className=\"media-icon media-icon--volume-off\" />\n                      <VolumeLowIcon className=\"media-icon media-icon--volume-low\" />\n                      <VolumeHighIcon className=\"media-icon media-icon--volume-high\" />\n                    </Button>\n                  )}\n                />\n              }\n            />\n            <Popover.Popup className=\"media-surface media-popup media-popup--volume media-popup-animation\">\n              <VolumeSlider.Root className=\"media-slider\" orientation=\"vertical\" thumbAlignment=\"edge\">\n                <VolumeSlider.Track className=\"media-slider__track\">\n                  <VolumeSlider.Fill className=\"media-slider__fill\" />\n                </VolumeSlider.Track>\n                <VolumeSlider.Thumb className=\"media-slider__thumb media-slider__thumb--persistent\" />\n              </VolumeSlider.Root>\n            </Popover.Popup>\n          </Popover.Root>\n\n          <CaptionsButton\n            render={(props) => (\n              <Button {...props} className=\"media-button--icon media-button--captions\">\n                <CaptionsOffIcon className=\"media-icon media-icon--captions-off\" />\n                <CaptionsOnIcon className=\"media-icon media-icon--captions-on\" />\n              </Button>\n            )}\n          />\n\n          <PiPButton\n            render={(props) => (\n              <Button {...props} className=\"media-button--icon\">\n                <PipIcon className=\"media-icon\" />\n              </Button>\n            )}\n          />\n\n          <FullscreenButton\n            render={(props) => (\n              <Button {...props} className=\"media-button--icon media-button--fullscreen\">\n                <FullscreenEnterIcon className=\"media-icon media-icon--fullscreen-enter\" />\n                <FullscreenExitIcon className=\"media-icon media-icon--fullscreen-exit\" />\n              </Button>\n            )}\n          />\n        </span>\n      </Controls.Root>\n\n      {/* <div className=\"media-captions\">\n        <div className=\"media-captions__container\">\n          <span className=\"media-captions__text\">An example cue</span>\n          <span className=\"media-captions__text\">\n            <p>Another example cue with HTML</p>\n          </span>\n        </div>\n      </div> */}\n\n      <div className=\"media-overlay\" />\n\n      {children}\n    </Container>\n  );\n}\n"],"mappings":"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"}