@videojs/react 10.0.0-beta.11 → 10.0.0-beta.13

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

@@ -27,12 +27,12 @@
    ========================================================================== */
 
 .media-minimal-skin {
+  container: media-root / inline-size;
   position: relative;
   isolation: isolate;
   display: block;
   height: 100%;
   width: 100%;
-  container: media-root / inline-size;
   border-radius: var(--media-border-radius, 0.75rem);
   font-family:
     Inter Variable,
@@ -40,13 +40,20 @@
     ui-sans-serif,
     system-ui,
     sans-serif;
-  font-size: 0.8125rem;
   line-height: 1.5;
   letter-spacing: normal;
   -webkit-font-smoothing: auto;
   -moz-osx-font-smoothing: auto;
 
-  --media-controls-radius: var(--media-border-radius, 1rem);
+  & > * {
+    font-size: 0.75rem; /* 12px at 100% font size */
+  }
+
+  @container media-root (width > 48rem) {
+    & > * {
+      font-size: 0.875rem; /* 14px at 100% font size */
+    }
+  }
 }
 
 /* ==========================================================================
@@ -82,12 +89,11 @@
   inset: 0;
   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.5);
+  backdrop-filter: blur(0) saturate(1);
   opacity: 0;
   pointer-events: none;
   transition-property: opacity, backdrop-filter;
   transition-duration: var(--media-controls-transition-duration);
-  transition-delay: var(--media-controls-transition-delay);
   transition-timing-function: ease-out;
 }
 
@@ -102,7 +108,7 @@
 }
 
 .media-minimal-skin .media-error[data-open] ~ .media-overlay {
-  backdrop-filter: blur(16px) saturate(1.5);
+  backdrop-filter: blur(16px) saturate(1.2);
 }
 
 /* ==========================================================================
@@ -127,6 +133,10 @@
    Error Dialog
    ========================================================================== */
 
+.media-minimal-skin .media-error:not([data-open]) {
+  display: none;
+}
+
 .media-minimal-skin .media-error__title {
   font-weight: 600;
   line-height: 1.25;
@@ -163,6 +173,8 @@
     from var(--media-controls-current-shadow-color) l c h /
     calc(alpha * 0.4)
   );
+  background-color: var(--media-controls-background-color);
+  backdrop-filter: var(--media-controls-backdrop-filter);
   text-shadow: 0 1px 0 var(--media-controls-current-shadow-color);
 }
 
@@ -171,49 +183,42 @@
    ========================================================================== */
 
 .media-minimal-skin .media-time-controls {
+  container: media-time-controls / inline-size;
   display: flex;
   flex-direction: row-reverse;
   align-items: center;
   flex: 1;
   gap: 0.75rem;
 }
-.media-minimal-skin .media-time {
+
+.media-minimal-skin .media-time-group {
   display: flex;
   align-items: center;
   gap: 0.25rem;
 }
-.media-minimal-skin .media-time__value {
+
+.media-minimal-skin .media-time {
   font-variant-numeric: tabular-nums;
 }
-.media-minimal-skin .media-time__value--current,
-.media-minimal-skin .media-time__separator {
+
+.media-minimal-skin .media-time--current,
+.media-minimal-skin .media-time-separator {
   display: none;
 }
-@container media-controls (width > 28rem) {
+
+@container media-root (width > 42rem) {
   .media-minimal-skin .media-time-controls {
     flex-direction: row;
   }
-  .media-minimal-skin .media-time__value--duration,
-  .media-minimal-skin .media-time__separator {
+
+  .media-minimal-skin .media-time--duration,
+  .media-minimal-skin .media-time-separator {
     color: oklch(from currentColor l c h / 0.6);
   }
-  .media-minimal-skin .media-time__value--current,
-  .media-minimal-skin .media-time__separator {
-    display: inline;
-  }
-}
-
-/* ==========================================================================
-   Button Groups
-   ========================================================================== */
 
-.media-minimal-skin .media-button-group {
-  display: flex;
-  align-items: center;
-  gap: 0.075rem;
-
-  @container media-root (width > 40rem) {
-    gap: 0.125rem;
+  .media-minimal-skin .media-time--current,
+  .media-minimal-skin .media-time-separator {
+    display: inline;
   }
 }
 
@@ -229,10 +234,12 @@
   flex-shrink: 0;
   padding: 0.5rem 1rem;
   border: none;
-  border-radius: calc(var(--media-controls-radius) - var(--media-controls-padding));
+  border-radius: 0.5rem;
   outline: 2px solid transparent;
   outline-offset: -2px;
   transition-property: background-color, outline-offset, scale;
+  /* Fix weird jumping when clicking on the buttons in Safari. */
+  will-change: scale;
   transition-duration: 150ms;
   transition-timing-function: ease-out;
   cursor: pointer;
@@ -263,7 +270,7 @@
 /* biome-ignore lint/correctness/noUnknownProperty: corner-shape is an emerging CSS spec */
 @supports (corner-shape: squircle) {
   .media-minimal-skin .media-button {
-    border-radius: var(--media-controls-radius);
+    border-radius: 1rem;
     /* biome-ignore lint/correctness/noUnknownProperty: corner-shape is an emerging CSS spec */
     corner-shape: squircle;
   }
@@ -312,7 +319,7 @@
     position: absolute;
     right: -1px;
     bottom: -3px;
-    font-size: 10px;
+    font-size: 10px; /* Hard coded due to size limitations. */
     font-weight: 480;
     font-variant-numeric: tabular-nums;
   }
@@ -321,10 +328,6 @@
     right: unset;
     left: -1px;
   }
-
-  @container media-controls (width < 28rem) {
-    display: none;
-  }
 }
 
 /* Playback rate button */
@@ -338,6 +341,20 @@
   }
 }
 
+/* ==========================================================================
+   Button Groups
+   ========================================================================== */
+
+.media-minimal-skin .media-button-group {
+  display: flex;
+  align-items: center;
+  gap: 0.075rem;
+
+  @container media-root (width > 42rem) {
+    gap: 0.125rem;
+  }
+}
+
 /* ==========================================================================
    Icons
    ========================================================================== */
@@ -401,6 +418,8 @@
    Media preview
    ========================================================================== */
 .media-minimal-skin .media-preview {
+  pointer-events: none;
+
   & .media-preview__thumbnail-wrapper {
     position: relative;
     border-radius: 0.5rem;
@@ -411,9 +430,8 @@
     border-radius: inherit;
   }
 
-  & .media-preview__timestamp {
+  & .media-preview__time {
     display: block;
-    font-variant-numeric: tabular-nums;
     text-align: center;
     margin-top: 0.5rem;
   }
@@ -462,11 +480,11 @@
   &[data-orientation="horizontal"] {
     min-width: 5rem;
     width: 100%;
-    height: 1.25rem;
+    height: 2rem;
   }
 
   &[data-orientation="vertical"] {
-    width: 1.25rem;
+    width: 2rem;
     height: 4.5rem;
   }
 }
@@ -670,15 +688,16 @@
 
 .media-minimal-skin .media-tooltip {
   padding: 0.25rem 0.5rem;
-  border-radius: 0.25rem;
-  background-color: oklch(1 0 0 / 0.1);
-  backdrop-filter: blur(16px) saturate(1.5);
+  border-radius: 0.5rem;
+  background-color: var(--media-tooltip-background-color);
+  backdrop-filter: var(--media-tooltip-backdrop-filter);
   box-shadow:
+    0 0 0 1px var(--media-tooltip-border-color),
     0 4px 6px -1px oklch(0 0 0 / 0.1),
     0 2px 4px -2px oklch(0 0 0 / 0.1);
-  font-size: 0.75rem;
+  color: var(--media-tooltip-text-color);
+  font-size: 0.75rem; /* 12px at 100% font size */
   white-space: nowrap;
-  --media-tooltip-side-offset: 0.75rem;
 
   &[data-side="top"]::before,
   &[data-side="bottom"]::before {
@@ -688,14 +707,6 @@
   &[data-side="right"]::before {
     width: var(--media-tooltip-side-offset);
   }
-
-  @media (prefers-reduced-transparency: reduce) {
-    background-color: oklch(0 0 0 / 0.7);
-  }
-
-  @media (prefers-contrast: more) {
-    background-color: oklch(0 0 0 / 0.9);
-  }
 }
 
 .media-minimal-skin .media-popover--volume:has(media-volume-slider[data-availability="unsupported"]) {
@@ -708,11 +719,17 @@
 
 .media-minimal-skin {
   --media-caption-track-duration: var(--media-controls-transition-duration);
-  --media-caption-track-delay: calc(var(--media-controls-transition-delay) + 25ms);
+  --media-caption-track-delay: 25ms;
   --media-caption-track-y: -0.5rem;
 
   &:has(.media-controls[data-visible]) {
-    --media-caption-track-y: -3rem;
+    --media-caption-track-y: -5rem;
+  }
+
+  @container media-root (width > 42rem) {
+    &:has(.media-controls[data-visible]) > * {
+      --media-caption-track-y: -3rem;
+    }
   }
 }
 
@@ -835,15 +852,20 @@
   background: oklch(0 0 0);
   --media-border-color: oklch(0 0 0 / 0.15);
   --media-video-border-radius: var(--media-border-radius, 0.75rem);
-  --media-controls-padding: 0.375rem;
+  --media-controls-background-color: transparent;
   --media-controls-transition-duration: 100ms;
-  --media-controls-transition-delay: 0ms;
   --media-controls-transition-timing-function: ease-out;
-  --media-error-dialog-transition-duration: 250ms;
+  --media-error-dialog-transition-duration: 150ms;
   --media-error-dialog-transition-delay: 100ms;
   --media-error-dialog-transition-timing-function: ease-out;
   --media-popup-transition-duration: 100ms;
   --media-popup-transition-timing-function: ease-out;
+  --media-tooltip-background-color: oklch(1 0 0 / 0.1);
+  --media-tooltip-border-color: transparent;
+  --media-tooltip-backdrop-filter: blur(16px) saturate(1.5);
+  --media-tooltip-text-color: currentColor;
+  --media-tooltip-side-offset: 0.5rem;
+  --media-popover-side-offset: 1.5rem;
 
   @media (prefers-reduced-motion: reduce) {
     --media-error-dialog-transition-duration: 50ms;
@@ -855,10 +877,20 @@
     --media-border-color: oklch(1 0 0 / 0.15);
   }
 
+  @media (prefers-reduced-transparency: reduce) or (prefers-contrast: more) {
+    --media-controls-background-color: oklch(0 0 0);
+    --media-tooltip-background-color: oklch(0 0 0);
+  }
+
+  @container media-root (width > 42rem) {
+    & > * {
+      --media-popover-side-offset: 0rem;
+    }
+  }
+
   &:has(.media-controls:not([data-visible])) {
     /* Slight delay to hide controls on non-touch devices after interaction */
     @media (pointer: fine) {
-      --media-controls-transition-delay: 500ms;
       --media-controls-transition-duration: 300ms;
     }
     @media (pointer: coarse) {
@@ -945,15 +977,16 @@
   ========================================================================== */
 
 .media-minimal-skin--video .media-controls {
+  padding: 0.25rem;
+  column-gap: 0.5rem;
+  flex-wrap: wrap;
   position: absolute;
-  bottom: 0;
-  inset-inline: 0;
+  bottom: 0.25rem;
+  inset-inline: 0.25rem;
   z-index: 10;
-  gap: 0.5rem;
-  padding: 2rem var(--media-controls-padding) var(--media-controls-padding) var(--media-controls-padding);
-  color: var(--media-color-primary, oklch(1 0 0));
+  color: oklch(1 0 0);
+  border-radius: 0.75rem;
   transition-duration: var(--media-controls-transition-duration);
-  transition-delay: var(--media-controls-transition-delay);
   transition-timing-function: var(--media-controls-transition-timing-function);
 
   @media (pointer: fine) {
@@ -981,14 +1014,41 @@
     }
   }
 
-  @container media-root (width > 40rem) {
-    gap: 0.875rem;
-    padding: 2.5rem 0.75rem 0.75rem 0.75rem;
+  & .media-time-controls {
+    order: -1;
+    flex: 0 0 100%;
+    padding-inline: 0.625rem;
+  }
+
+  & .media-button-group:first-child {
+    flex: 1;
+    text-align: left;
+  }
+
+  & .media-button-group:last-child {
+    flex: 1;
+    justify-content: end;
+  }
+
+  @container media-root (width > 42rem) {
+    flex-wrap: nowrap;
+    bottom: 0.5rem;
+    inset-inline: 0.5rem;
+
+    & .media-time-controls {
+      order: unset;
+      flex: 1;
+    }
+
+    & .media-button-group:first-child,
+    & .media-button-group:last-child {
+      flex: 0 0 auto;
+    }
   }
 }
 
-/* Hide cursor when controls are hidden in fullscreen */
-.media-minimal-skin--video:fullscreen:has(.media-controls:not([data-visible])) {
+/* Hide cursor when controls are hidden */
+.media-minimal-skin--video:has(.media-controls:not([data-visible])) {
   cursor: none;
 }
 
@@ -1005,9 +1065,13 @@
    ========================================================================== */
 
 .media-minimal-skin--video .media-popover--volume {
-  --media-popover-side-offset: 0.5rem;
   background: transparent;
-  padding: 0.25rem;
+  padding-block: 0.75rem;
+  border-radius: 0.75rem;
+
+  @media (prefers-reduced-transparency: reduce) or (prefers-contrast: more) {
+    background: var(--media-controls-background-color);
+  }
 }
 
 /* ==========================================================================
@@ -1015,9 +1079,21 @@
    ========================================================================== */
 
 .media-minimal-skin--video .media-slider__preview {
+  --media-preview-max-width: 11rem;
+  --media-preview-padding: -0.5rem;
+  /**
+    Inset is the difference between the container width and the slider (100%) width.
+    We only add to the end as we render the time there.
+  */
+  --media-preview-inset: calc(100cqi - 100%);
+
   position: absolute;
-  left: var(--media-slider-pointer);
-  bottom: calc(100% + 0.5rem);
+  left: clamp(
+    calc(var(--media-preview-max-width) / 2 + var(--media-preview-padding)),
+    var(--media-slider-pointer),
+    calc(100% - var(--media-preview-max-width) / 2 - var(--media-preview-padding) + var(--media-preview-inset))
+  );
+  bottom: 100%;
   translate: -50%;
   opacity: 0;
   scale: 0.8;
@@ -1027,6 +1103,11 @@
   transition-timing-function: ease-out;
   transform-origin: bottom;
 
+  @container media-root (width > 42rem) {
+    bottom: calc(100% + 0.25rem);
+    left: var(--media-slider-pointer);
+  }
+
   & .media-preview__thumbnail-wrapper {
     position: relative;
 
@@ -1043,7 +1124,7 @@
   }
 
   & .media-preview__thumbnail {
-    max-width: 11rem;
+    max-width: var(--media-preview-max-width);
   }
 
   &:has(.media-preview__thumbnail[data-loading]) {

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

@@ -1,8 +1,13 @@
 import { Container, usePlayer } from "../../player/context.js";
 import { isRenderProp } from "../../utils/use-render.js";
+import { AlertDialogClose } from "../../ui/alert-dialog/alert-dialog-close.js";
+import { AlertDialogPopup } from "../../ui/alert-dialog/alert-dialog-popup.js";
+import { AlertDialogTitle } from "../../ui/alert-dialog/alert-dialog-title.js";
 import { BufferingIndicator } from "../../ui/buffering-indicator/buffering-indicator.js";
 import { CaptionsButton } from "../../ui/captions-button/captions-button.js";
 import { ControlsRoot } from "../../ui/controls/controls-root.js";
+import { ErrorDialogDescription } from "../../ui/error-dialog/error-dialog-description.js";
+import { ErrorDialogRoot } from "../../ui/error-dialog/error-dialog-root.js";
 import { FullscreenButton } from "../../ui/fullscreen-button/fullscreen-button.js";
 import { MuteButton } from "../../ui/mute-button/mute-button.js";
 import { PiPButton } from "../../ui/pip-button/pip-button.js";
@@ -42,23 +47,12 @@ 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 { ErrorDialog } from "../error-dialog.js";
 import { forwardRef } from "react";
 import { isString } from "@videojs/utils/predicate";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cn } from "@videojs/utils/style";
-
 //#region src/presets/video/minimal-skin.tsx
 const SEEK_TIME = 10;
-const ERROR_CLASSNAMES = {
-	root: "media-error",
-	dialog: "media-error__dialog",
-	content: "media-error__content",
-	title: "media-error__title",
-	description: "media-error__description",
-	actions: "media-error__actions",
-	close: "media-button media-button--primary"
-};
 const Button = forwardRef(function Button({ className, ...props }, ref) {
 	return /* @__PURE__ */ jsx("button", {
 		ref,
@@ -128,7 +122,25 @@ function MinimalVideoSkin(props) {
 				className: "media-buffering-indicator",
 				children: /* @__PURE__ */ jsx(SpinnerIcon, { className: "media-icon" })
 			}) }),
-			/* @__PURE__ */ jsx(ErrorDialog, { classNames: ERROR_CLASSNAMES }),
+			/* @__PURE__ */ jsx(ErrorDialogRoot, { children: /* @__PURE__ */ jsx(AlertDialogPopup, {
+				className: "media-error",
+				children: /* @__PURE__ */ jsxs("div", {
+					className: "media-error__dialog",
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: "media-error__content",
+						children: [/* @__PURE__ */ jsx(AlertDialogTitle, {
+							className: "media-error__title",
+							children: "Something went wrong."
+						}), /* @__PURE__ */ jsx(ErrorDialogDescription, { className: "media-error__description" })]
+					}), /* @__PURE__ */ jsx("div", {
+						className: "media-error__actions",
+						children: /* @__PURE__ */ jsx(AlertDialogClose, {
+							className: "media-button media-button--primary",
+							children: "OK"
+						})
+					})]
+				})
+			}) }),
 			/* @__PURE__ */ jsx(ControlsRoot, {
 				className: "media-controls",
 				children: /* @__PURE__ */ jsxs(TooltipProvider, { children: [
@@ -199,16 +211,16 @@ function MinimalVideoSkin(props) {
 					/* @__PURE__ */ jsxs("div", {
 						className: "media-time-controls",
 						children: [/* @__PURE__ */ jsxs(Group, {
-							className: "media-time",
+							className: "media-time-group",
 							children: [
 								/* @__PURE__ */ jsx(Value, {
 									type: "current",
-									className: "media-time__value media-time__value--current"
+									className: "media-time media-time--current"
 								}),
-								/* @__PURE__ */ jsx(Separator, { className: "media-time__separator" }),
+								/* @__PURE__ */ jsx(Separator, { className: "media-time-separator" }),
 								/* @__PURE__ */ jsx(Value, {
 									type: "duration",
-									className: "media-time__value media-time__value--duration"
+									className: "media-time media-time--duration"
 								})
 							]
 						}), /* @__PURE__ */ jsxs(TimeSliderRoot, {
@@ -228,7 +240,7 @@ function MinimalVideoSkin(props) {
 										}),
 										/* @__PURE__ */ jsx(SliderValue, {
 											type: "pointer",
-											className: "media-preview__timestamp"
+											className: "media-time media-preview__time"
 										}),
 										/* @__PURE__ */ jsx(SpinnerIcon, { className: "media-preview__spinner media-icon" })
 									]
@@ -291,7 +303,7 @@ function MinimalVideoSkin(props) {
 		]
 	});
 }
-
 //#endregion
 export { MinimalVideoSkin };
+
 //# sourceMappingURL=minimal-skin.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"minimal-skin.js","names":["Popover.Root","Popover.Trigger","Popover.Popup","VolumeSlider.Root","VolumeSlider.Track","VolumeSlider.Fill","VolumeSlider.Thumb","Controls.Root","Tooltip.Provider","Tooltip.Root","Tooltip.Trigger","Tooltip.Popup","Time.Group","Time.Value","Time.Separator","TimeSlider.Root","TimeSlider.Track","TimeSlider.Fill","TimeSlider.Buffer","TimeSlider.Thumb","Slider.Thumbnail","TimeSlider.Value"],"sources":["../../../../src/presets/video/minimal-skin.tsx"],"sourcesContent":["import {\n  CaptionsOffIcon,\n  CaptionsOnIcon,\n  FullscreenEnterIcon,\n  FullscreenExitIcon,\n  PauseIcon,\n  PipEnterIcon,\n  PipExitIcon,\n  PlayIcon,\n  RestartIcon,\n  SeekIcon,\n  SpinnerIcon,\n  VolumeHighIcon,\n  VolumeLowIcon,\n  VolumeOffIcon,\n} from '@videojs/icons/react/minimal';\nimport { isString } from '@videojs/utils/predicate';\nimport { cn } from '@videojs/utils/style';\nimport { type ComponentProps, forwardRef, type ReactNode } from 'react';\nimport { Container, usePlayer } from '@/player/context';\nimport { BufferingIndicator } from '@/ui/buffering-indicator';\nimport { CaptionsButton } from '@/ui/captions-button';\nimport { Controls } from '@/ui/controls';\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 { Poster } from '@/ui/poster';\nimport { SeekButton } from '@/ui/seek-button';\nimport { Slider } from '@/ui/slider';\nimport { Time } from '@/ui/time';\nimport { TimeSlider } from '@/ui/time-slider';\nimport { Tooltip } from '@/ui/tooltip';\nimport { VolumeSlider } from '@/ui/volume-slider';\nimport { isRenderProp } from '@/utils/use-render';\nimport { ErrorDialog } from '../error-dialog';\nimport type { BaseVideoSkinProps } from '../types';\n\nconst SEEK_TIME = 10;\n\nconst ERROR_CLASSNAMES = {\n  root: 'media-error',\n  dialog: 'media-error__dialog',\n  content: 'media-error__content',\n  title: 'media-error__title',\n  description: 'media-error__description',\n  actions: 'media-error__actions',\n  close: 'media-button media-button--primary',\n};\n\nexport type MinimalVideoSkinProps = BaseVideoSkinProps;\n\nconst Button = forwardRef<HTMLButtonElement, ComponentProps<'button'>>(function Button({ className, ...props }, ref) {\n  return (\n    <button\n      ref={ref}\n      type=\"button\"\n      className={cn('media-button media-button--subtle media-button--icon', className)}\n      {...props}\n    />\n  );\n});\n\nfunction PlayLabel(): string {\n  const paused = usePlayer((s) => Boolean(s.paused));\n  const ended = usePlayer((s) => Boolean(s.ended));\n  if (ended) return 'Replay';\n  return paused ? 'Play' : 'Pause';\n}\n\nfunction CaptionsLabel(): string {\n  const active = usePlayer((s) => Boolean(s.subtitlesShowing));\n  return active ? 'Disable captions' : 'Enable captions';\n}\n\nfunction PiPLabel(): string {\n  const pip = usePlayer((s) => Boolean(s.pip));\n  return pip ? 'Exit picture-in-picture' : 'Enter picture-in-picture';\n}\n\nfunction FullscreenLabel(): string {\n  const fullscreen = usePlayer((s) => Boolean(s.fullscreen));\n  return fullscreen ? 'Exit fullscreen' : 'Enter fullscreen';\n}\n\nfunction VolumePopover(): ReactNode {\n  const volumeUnsupported = usePlayer((s) => s.volumeAvailability === 'unsupported');\n\n  const muteButton = (\n    <MuteButton className=\"media-button--mute\" render={<Button />}>\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    </MuteButton>\n  );\n\n  if (volumeUnsupported) return muteButton;\n\n  return (\n    <Popover.Root openOnHover delay={200} closeDelay={100} side=\"top\">\n      <Popover.Trigger render={muteButton} />\n      <Popover.Popup className=\"media-popover media-popover--volume\">\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}\n\nexport function MinimalVideoSkin(props: MinimalVideoSkinProps): ReactNode {\n  const { children, className, poster, ...rest } = props;\n\n  return (\n    <Container className={cn('media-minimal-skin media-minimal-skin--video', className)} {...rest}>\n      {children}\n\n      {poster && (\n        <Poster src={isString(poster) ? poster : undefined} render={isRenderProp(poster) ? poster : undefined} />\n      )}\n\n      <BufferingIndicator\n        render={(props) => (\n          <div {...props} className=\"media-buffering-indicator\">\n            <SpinnerIcon className=\"media-icon\" />\n          </div>\n        )}\n      />\n\n      <ErrorDialog classNames={ERROR_CLASSNAMES} />\n\n      <Controls.Root className=\"media-controls\">\n        <Tooltip.Provider>\n          <div className=\"media-button-group\">\n            <Tooltip.Root side=\"top\">\n              <Tooltip.Trigger\n                render={\n                  <PlayButton className=\"media-button--play\" render={<Button />}>\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                  </PlayButton>\n                }\n              />\n              <Tooltip.Popup className=\"media-tooltip\">\n                <PlayLabel />\n              </Tooltip.Popup>\n            </Tooltip.Root>\n\n            <Tooltip.Root side=\"top\">\n              <Tooltip.Trigger\n                render={\n                  <SeekButton seconds={-SEEK_TIME} className=\"media-button--seek\" render={<Button />}>\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                  </SeekButton>\n                }\n              />\n              <Tooltip.Popup className=\"media-tooltip\">Seek backward {SEEK_TIME} seconds</Tooltip.Popup>\n            </Tooltip.Root>\n\n            <Tooltip.Root side=\"top\">\n              <Tooltip.Trigger\n                render={\n                  <SeekButton seconds={SEEK_TIME} className=\"media-button--seek\" render={<Button />}>\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                  </SeekButton>\n                }\n              />\n              <Tooltip.Popup className=\"media-tooltip\">Seek forward {SEEK_TIME} seconds</Tooltip.Popup>\n            </Tooltip.Root>\n          </div>\n\n          <div 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\n              <div className=\"media-preview media-slider__preview\">\n                <div className=\"media-preview__thumbnail-wrapper\">\n                  <Slider.Thumbnail className=\"media-preview__thumbnail\" />\n                </div>\n                <TimeSlider.Value type=\"pointer\" className=\"media-preview__timestamp\" />\n                <SpinnerIcon className=\"media-preview__spinner media-icon\" />\n              </div>\n            </TimeSlider.Root>\n          </div>\n\n          <div className=\"media-button-group\">\n            <Tooltip.Root side=\"top\">\n              <Tooltip.Trigger\n                render={<PlaybackRateButton className=\"media-button--playback-rate\" render={<Button />} />}\n              />\n              <Tooltip.Popup className=\"media-tooltip\">Toggle playback rate</Tooltip.Popup>\n            </Tooltip.Root>\n\n            <VolumePopover />\n\n            <Tooltip.Root side=\"top\">\n              <Tooltip.Trigger\n                render={\n                  <CaptionsButton className=\"media-button--captions\" render={<Button />}>\n                    <CaptionsOffIcon className=\"media-icon media-icon--captions-off\" />\n                    <CaptionsOnIcon className=\"media-icon media-icon--captions-on\" />\n                  </CaptionsButton>\n                }\n              />\n              <Tooltip.Popup className=\"media-tooltip\">\n                <CaptionsLabel />\n              </Tooltip.Popup>\n            </Tooltip.Root>\n\n            <Tooltip.Root side=\"top\">\n              <Tooltip.Trigger\n                render={\n                  <PiPButton className=\"media-button--pip\" render={<Button />}>\n                    <PipEnterIcon className=\"media-icon media-icon--pip-enter\" />\n                    <PipExitIcon className=\"media-icon media-icon--pip-exit\" />\n                  </PiPButton>\n                }\n              />\n              <Tooltip.Popup className=\"media-tooltip\">\n                <PiPLabel />\n              </Tooltip.Popup>\n            </Tooltip.Root>\n\n            <Tooltip.Root side=\"top\">\n              <Tooltip.Trigger\n                render={\n                  <FullscreenButton className=\"media-button--fullscreen\" render={<Button />}>\n                    <FullscreenEnterIcon className=\"media-icon media-icon--fullscreen-enter\" />\n                    <FullscreenExitIcon className=\"media-icon media-icon--fullscreen-exit\" />\n                  </FullscreenButton>\n                }\n              />\n              <Tooltip.Popup className=\"media-tooltip\">\n                <FullscreenLabel />\n              </Tooltip.Popup>\n            </Tooltip.Root>\n          </div>\n        </Tooltip.Provider>\n      </Controls.Root>\n\n      <div className=\"media-overlay\" />\n    </Container>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"minimal-skin.js","names":["Popover.Root","Popover.Trigger","Popover.Popup","VolumeSlider.Root","VolumeSlider.Track","VolumeSlider.Fill","VolumeSlider.Thumb","ErrorDialog.Root","ErrorDialog.Popup","ErrorDialog.Title","ErrorDialog.Description","ErrorDialog.Close","Controls.Root","Tooltip.Provider","Tooltip.Root","Tooltip.Trigger","Tooltip.Popup","Time.Group","Time.Value","Time.Separator","TimeSlider.Root","TimeSlider.Track","TimeSlider.Fill","TimeSlider.Buffer","TimeSlider.Thumb","Slider.Thumbnail","TimeSlider.Value"],"sources":["../../../../src/presets/video/minimal-skin.tsx"],"sourcesContent":["import {\n  CaptionsOffIcon,\n  CaptionsOnIcon,\n  FullscreenEnterIcon,\n  FullscreenExitIcon,\n  PauseIcon,\n  PipEnterIcon,\n  PipExitIcon,\n  PlayIcon,\n  RestartIcon,\n  SeekIcon,\n  SpinnerIcon,\n  VolumeHighIcon,\n  VolumeLowIcon,\n  VolumeOffIcon,\n} from '@videojs/icons/react/minimal';\nimport { isString } from '@videojs/utils/predicate';\nimport { cn } from '@videojs/utils/style';\nimport { type ComponentProps, forwardRef, type ReactNode } from 'react';\nimport { Container, usePlayer } 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 { Poster } from '@/ui/poster';\nimport { SeekButton } from '@/ui/seek-button';\nimport { Slider } from '@/ui/slider';\nimport { Time } from '@/ui/time';\nimport { TimeSlider } from '@/ui/time-slider';\nimport { Tooltip } from '@/ui/tooltip';\nimport { VolumeSlider } from '@/ui/volume-slider';\nimport { isRenderProp } from '@/utils/use-render';\nimport type { BaseVideoSkinProps } from '../types';\n\nconst SEEK_TIME = 10;\n\nexport type MinimalVideoSkinProps = BaseVideoSkinProps;\n\nconst Button = forwardRef<HTMLButtonElement, ComponentProps<'button'>>(function Button({ className, ...props }, ref) {\n  return (\n    <button\n      ref={ref}\n      type=\"button\"\n      className={cn('media-button media-button--subtle media-button--icon', className)}\n      {...props}\n    />\n  );\n});\n\nfunction PlayLabel(): string {\n  const paused = usePlayer((s) => Boolean(s.paused));\n  const ended = usePlayer((s) => Boolean(s.ended));\n  if (ended) return 'Replay';\n  return paused ? 'Play' : 'Pause';\n}\n\nfunction CaptionsLabel(): string {\n  const active = usePlayer((s) => Boolean(s.subtitlesShowing));\n  return active ? 'Disable captions' : 'Enable captions';\n}\n\nfunction PiPLabel(): string {\n  const pip = usePlayer((s) => Boolean(s.pip));\n  return pip ? 'Exit picture-in-picture' : 'Enter picture-in-picture';\n}\n\nfunction FullscreenLabel(): string {\n  const fullscreen = usePlayer((s) => Boolean(s.fullscreen));\n  return fullscreen ? 'Exit fullscreen' : 'Enter fullscreen';\n}\n\nfunction VolumePopover(): ReactNode {\n  const volumeUnsupported = usePlayer((s) => s.volumeAvailability === 'unsupported');\n\n  const muteButton = (\n    <MuteButton className=\"media-button--mute\" render={<Button />}>\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    </MuteButton>\n  );\n\n  if (volumeUnsupported) return muteButton;\n\n  return (\n    <Popover.Root openOnHover delay={200} closeDelay={100} side=\"top\">\n      <Popover.Trigger render={muteButton} />\n      <Popover.Popup className=\"media-popover media-popover--volume\">\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}\n\nexport function MinimalVideoSkin(props: MinimalVideoSkinProps): ReactNode {\n  const { children, className, poster, ...rest } = props;\n\n  return (\n    <Container className={cn('media-minimal-skin media-minimal-skin--video', className)} {...rest}>\n      {children}\n\n      {poster && (\n        <Poster src={isString(poster) ? poster : undefined} render={isRenderProp(poster) ? poster : undefined} />\n      )}\n\n      <BufferingIndicator\n        render={(props) => (\n          <div {...props} className=\"media-buffering-indicator\">\n            <SpinnerIcon className=\"media-icon\" />\n          </div>\n        )}\n      />\n\n      <ErrorDialog.Root>\n        <ErrorDialog.Popup className=\"media-error\">\n          <div className=\"media-error__dialog\">\n            <div className=\"media-error__content\">\n              <ErrorDialog.Title className=\"media-error__title\">Something went wrong.</ErrorDialog.Title>\n              <ErrorDialog.Description className=\"media-error__description\" />\n            </div>\n            <div className=\"media-error__actions\">\n              <ErrorDialog.Close className=\"media-button media-button--primary\">OK</ErrorDialog.Close>\n            </div>\n          </div>\n        </ErrorDialog.Popup>\n      </ErrorDialog.Root>\n\n      <Controls.Root className=\"media-controls\">\n        <Tooltip.Provider>\n          <div className=\"media-button-group\">\n            <Tooltip.Root side=\"top\">\n              <Tooltip.Trigger\n                render={\n                  <PlayButton className=\"media-button--play\" render={<Button />}>\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                  </PlayButton>\n                }\n              />\n              <Tooltip.Popup className=\"media-tooltip\">\n                <PlayLabel />\n              </Tooltip.Popup>\n            </Tooltip.Root>\n\n            <Tooltip.Root side=\"top\">\n              <Tooltip.Trigger\n                render={\n                  <SeekButton seconds={-SEEK_TIME} className=\"media-button--seek\" render={<Button />}>\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                  </SeekButton>\n                }\n              />\n              <Tooltip.Popup className=\"media-tooltip\">Seek backward {SEEK_TIME} seconds</Tooltip.Popup>\n            </Tooltip.Root>\n\n            <Tooltip.Root side=\"top\">\n              <Tooltip.Trigger\n                render={\n                  <SeekButton seconds={SEEK_TIME} className=\"media-button--seek\" render={<Button />}>\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                  </SeekButton>\n                }\n              />\n              <Tooltip.Popup className=\"media-tooltip\">Seek forward {SEEK_TIME} seconds</Tooltip.Popup>\n            </Tooltip.Root>\n          </div>\n\n          <div className=\"media-time-controls\">\n            <Time.Group className=\"media-time-group\">\n              <Time.Value type=\"current\" className=\"media-time media-time--current\" />\n              <Time.Separator className=\"media-time-separator\" />\n              <Time.Value type=\"duration\" className=\"media-time media-time--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\n              <div className=\"media-preview media-slider__preview\">\n                <div className=\"media-preview__thumbnail-wrapper\">\n                  <Slider.Thumbnail className=\"media-preview__thumbnail\" />\n                </div>\n                <TimeSlider.Value type=\"pointer\" className=\"media-time media-preview__time\" />\n                <SpinnerIcon className=\"media-preview__spinner media-icon\" />\n              </div>\n            </TimeSlider.Root>\n          </div>\n\n          <div className=\"media-button-group\">\n            <Tooltip.Root side=\"top\">\n              <Tooltip.Trigger\n                render={<PlaybackRateButton className=\"media-button--playback-rate\" render={<Button />} />}\n              />\n              <Tooltip.Popup className=\"media-tooltip\">Toggle playback rate</Tooltip.Popup>\n            </Tooltip.Root>\n\n            <VolumePopover />\n\n            <Tooltip.Root side=\"top\">\n              <Tooltip.Trigger\n                render={\n                  <CaptionsButton className=\"media-button--captions\" render={<Button />}>\n                    <CaptionsOffIcon className=\"media-icon media-icon--captions-off\" />\n                    <CaptionsOnIcon className=\"media-icon media-icon--captions-on\" />\n                  </CaptionsButton>\n                }\n              />\n              <Tooltip.Popup className=\"media-tooltip\">\n                <CaptionsLabel />\n              </Tooltip.Popup>\n            </Tooltip.Root>\n\n            <Tooltip.Root side=\"top\">\n              <Tooltip.Trigger\n                render={\n                  <PiPButton className=\"media-button--pip\" render={<Button />}>\n                    <PipEnterIcon className=\"media-icon media-icon--pip-enter\" />\n                    <PipExitIcon className=\"media-icon media-icon--pip-exit\" />\n                  </PiPButton>\n                }\n              />\n              <Tooltip.Popup className=\"media-tooltip\">\n                <PiPLabel />\n              </Tooltip.Popup>\n            </Tooltip.Root>\n\n            <Tooltip.Root side=\"top\">\n              <Tooltip.Trigger\n                render={\n                  <FullscreenButton className=\"media-button--fullscreen\" render={<Button />}>\n                    <FullscreenEnterIcon className=\"media-icon media-icon--fullscreen-enter\" />\n                    <FullscreenExitIcon className=\"media-icon media-icon--fullscreen-exit\" />\n                  </FullscreenButton>\n                }\n              />\n              <Tooltip.Popup className=\"media-tooltip\">\n                <FullscreenLabel />\n              </Tooltip.Popup>\n            </Tooltip.Root>\n          </div>\n        </Tooltip.Provider>\n      </Controls.Root>\n\n      <div className=\"media-overlay\" />\n    </Container>\n  );\n}\n"],"mappings":"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"}