@videojs/react 10.0.0-beta.6 → 10.0.0-beta.8

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

@@ -16,6 +16,8 @@
 .media-button--mute .media-icon--volume-high,
 .media-button--fullscreen .media-icon--fullscreen-enter,
 .media-button--fullscreen .media-icon--fullscreen-exit,
+.media-button--pip .media-icon--pip-enter,
+.media-button--pip .media-icon--pip-exit,
 .media-button--captions .media-icon--captions-off,
 .media-button--captions .media-icon--captions-on {
   display: none;
@@ -40,6 +42,10 @@
 .media-button--fullscreen:not([data-fullscreen]) .media-icon--fullscreen-enter,
 /* Fullscreen: fullscreen → exit */
 .media-button--fullscreen[data-fullscreen] .media-icon--fullscreen-exit,
+/* Picture-in-Picture: not active → enter */
+.media-button--pip:not([data-pip]) .media-icon--pip-enter,
+/* Picture-in-Picture: active → exit */
+.media-button--pip[data-pip] .media-icon--pip-exit,
 /* Captions: not active → captions off */
 .media-button--captions:not([data-active]) .media-icon--captions-off,
 /* Captions: active → captions on */
@@ -160,30 +166,6 @@
   border-radius: inherit;
 }
 
-/* ==========================================================================
-   Poster Image
-   ========================================================================== */
-
-.media-minimal-skin > img {
-  position: absolute;
-  inset: 0;
-  width: 100%;
-  height: 100%;
-  object-fit: var(--media-object-fit, contain);
-  object-position: var(--media-object-position, center);
-  transition: opacity 0.25s;
-  pointer-events: none;
-  border-radius: inherit;
-
-  &:not([data-visible]) {
-    opacity: 0;
-  }
-}
-
-/* ==========================================================================
-   Fullscreen
-   ========================================================================== */
-
 .media-minimal-skin:fullscreen ::slotted(video),
 .media-minimal-skin:fullscreen video {
   object-fit: contain;
@@ -269,7 +251,7 @@
   color: oklch(1 0 0);
   font-size: 0.875rem;
   text-shadow: 0 1px 0 oklch(0 0 0 / 0.5);
-  transition-property: opacity, transform;
+  transition-property: opacity, scale;
   transition-duration: 500ms;
   transition-delay: 100ms;
   transition-timing-function: linear(
@@ -295,7 +277,7 @@
 .media-minimal-skin .media-error[data-starting-style] .media-error__dialog,
 .media-minimal-skin .media-error[data-ending-style] .media-error__dialog {
   opacity: 0;
-  transform: scale(0.5);
+  scale: 0.5;
 }
 
 .media-minimal-skin .media-error__content {
@@ -312,6 +294,7 @@
 
 .media-minimal-skin .media-error__description {
   opacity: 0.7;
+  overflow-wrap: anywhere;
 }
 
 .media-minimal-skin .media-error__actions {
@@ -331,12 +314,12 @@
   container: media-controls / inline-size;
   display: flex;
   align-items: center;
-  --media-controls-current-shadow-color: oklch(from currentColor 0 0 0 / clamp(0, calc((l - 0.5) * 0.5), 0.25));
+  --media-controls-current-shadow-color: oklch(from currentColor 0 0 0 / clamp(0, calc((l - 0.5) * 0.5), 0.15));
   --media-controls-current-shadow-color-subtle: oklch(
     from var(--media-controls-current-shadow-color) l c h /
     calc(alpha * 0.4)
   );
-  text-shadow: 0 0 1px var(--media-controls-current-shadow-color);
+  text-shadow: 0 1px 0 var(--media-controls-current-shadow-color);
 }
 
 /* ==========================================================================
@@ -410,7 +393,7 @@
   font-weight: 500;
   text-align: center;
   text-shadow: inherit;
-  transition-property: background-color, color, outline-offset, transform;
+  transition-property: background-color, color, outline-offset, scale;
   transition-duration: 150ms;
   transition-timing-function: ease-out;
   cursor: pointer;
@@ -450,7 +433,7 @@
   }
 
   &:active {
-    transform: scale(0.9);
+    scale: 0.9;
   }
 
   & .media-icon {
@@ -512,6 +495,43 @@
   scale: -1 1;
 }
 
+/* ==========================================================================
+   Poster Image
+   ========================================================================== */
+
+.media-minimal-skin media-poster,
+.media-minimal-skin > img {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  transition: opacity 0.25s;
+  pointer-events: none;
+}
+.media-minimal-skin media-poster:not([data-visible]),
+.media-minimal-skin > img:not([data-visible]) {
+  opacity: 0;
+}
+.media-minimal-skin media-poster ::slotted(img) {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: var(--media-object-fit, contain);
+  object-position: var(--media-object-position, center);
+  border-radius: var(--media-video-border-radius);
+}
+.media-minimal-skin > img {
+  object-fit: var(--media-object-fit, contain);
+  object-position: var(--media-object-position, center);
+  border-radius: inherit;
+}
+
+.media-minimal-skin:fullscreen media-poster ::slotted(img),
+.media-minimal-skin:fullscreen > img {
+  object-fit: contain;
+}
+
 /* ==========================================================================
    Media preview
    ========================================================================== */
@@ -541,7 +561,7 @@
     position: absolute;
     top: 50%;
     left: 50%;
-    transform: translate(-50%, -50%);
+    translate: -50% -50%;
     opacity: 0;
   }
 
@@ -609,7 +629,7 @@
 /* Thumb */
 .media-minimal-skin .media-slider__thumb {
   position: absolute;
-  transform: translate(-50%, -50%);
+  translate: -50% -50%;
   z-index: 10;
   width: 0.75rem;
   height: 0.75rem;
@@ -712,13 +732,13 @@
   border: 0;
   color: inherit;
   overflow: visible;
-  transition-property: transform, scale, opacity, filter;
+  transition-property: scale, opacity, filter;
   transition-duration: 150ms;
 
   &[data-starting-style],
   &[data-ending-style] {
     opacity: 0;
-    transform: scale(0.5);
+    scale: 0.5;
     filter: blur(8px);
   }
 
@@ -812,30 +832,29 @@
   }
 }
 
+.media-minimal-skin .media-popover--volume:has(media-volume-slider[data-availability="unsupported"]) {
+  display: none;
+}
+
 /* ==========================================================================
    Native Caption Track
    ========================================================================== */
 
 .media-minimal-skin {
-  --media-caption-track-duration: 150ms;
-  --media-caption-track-delay: 600ms;
+  --media-caption-track-duration: var(--media-controls-transition-duration);
+  --media-caption-track-delay: calc(var(--media-controls-transition-delay) + 25ms);
   --media-caption-track-y: -0.5rem;
 
   &:has(.media-controls[data-visible]) {
-    --media-caption-track-delay: 25ms;
     --media-caption-track-y: -3rem;
   }
-
-  @media (prefers-reduced-motion: reduce) {
-    --media-caption-track-duration: 50ms;
-  }
 }
 
 .media-minimal-skin video::-webkit-media-text-track-container {
-  /* NOTE: The delay must account for the controls delay/duration */
-  transition: transform var(--media-caption-track-duration) ease-out;
+  transition: translate var(--media-caption-track-duration) ease-out;
   transition-delay: var(--media-caption-track-delay);
-  transform: translateY(var(--media-caption-track-y)) scale(0.98);
+  translate: 0 var(--media-caption-track-y);
+  scale: 0.98;
   z-index: 1;
   font-family: inherit;
 }
@@ -846,14 +865,31 @@
    ========================================================================== */
 
 .media-minimal-skin--video {
+  overflow: clip;
   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-transition-duration: 100ms;
+  --media-controls-transition-delay: 0ms;
 
   @media (prefers-color-scheme: dark) {
     --media-border-color: oklch(1 0 0 / 0.15);
   }
 
+  &: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) {
+      --media-controls-transition-duration: 150ms;
+    }
+    @media (prefers-reduced-motion: reduce) {
+      --media-controls-transition-duration: 100ms;
+    }
+  }
+
   /* Inner border ring */
   &::after {
     content: "";
@@ -882,38 +918,39 @@
   z-index: 10;
   gap: 0.5rem;
   padding: 2rem 0.375rem 0.375rem 0.375rem;
-  color: oklch(1 0 0);
+  color: var(--media-color-primary, oklch(1 0 0));
+  transition-duration: var(--media-controls-transition-duration);
+  transition-delay: var(--media-controls-transition-delay);
+  transition-timing-function: ease-out;
 
   @media (pointer: fine) {
-    will-change: transform, filter, opacity;
-    transition-property: transform, filter, opacity;
-    transition-duration: 75ms;
-    transition-delay: 0ms;
-    transition-timing-function: ease-out;
+    will-change: translate, filter, opacity;
+    transition-property: translate, filter, opacity;
   }
 
-  @container media-root (width > 40rem) {
-    gap: 0.875rem;
-    padding: 2.5rem 0.75rem 0.75rem 0.75rem;
+  @media (pointer: coarse) {
+    will-change: translate, opacity;
+    transition-property: translate, opacity;
   }
 
   &:not([data-visible]) {
     opacity: 0;
     pointer-events: none;
+    translate: 0 100%;
 
     @media (pointer: fine) {
-      transform: translateY(100%);
       filter: blur(8px);
-      transition-duration: 500ms;
-      transition-delay: 500ms;
-
-      @media (prefers-reduced-motion: reduce) {
-        scale: 1;
-        transform: translateY(0);
-        filter: blur(0);
-        transition-duration: 100ms;
-      }
     }
+
+    @media (prefers-reduced-motion: reduce) {
+      translate: 0 0;
+      filter: blur(0);
+    }
+  }
+
+  @container media-root (width > 40rem) {
+    gap: 0.875rem;
+    padding: 2.5rem 0.75rem 0.75rem 0.75rem;
   }
 }
 
@@ -954,6 +991,7 @@
   filter: blur(8px);
   transition-property: scale, opacity, filter;
   transition-duration: 150ms;
+  transition-timing-function: ease-out;
   transform-origin: bottom;
 
   & .media-preview__thumbnail-wrapper {

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

@@ -1,4 +1,5 @@
 import { Container, usePlayer } from "../../player/context.js";
+import { isRenderProp } from "../../utils/use-render.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";
@@ -10,6 +11,7 @@ import { PlaybackRateButton } from "../../ui/playback-rate-button/playback-rate-
 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 { Poster } from "../../ui/poster/poster.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";
@@ -31,7 +33,8 @@ 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 PipEnterIcon from "../../icons/dist/react/minimal/pip-enter.js";
+import PipExitIcon from "../../icons/dist/react/minimal/pip-exit.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";
@@ -41,6 +44,7 @@ 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 { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { cn } from "@videojs/utils/style";
 
@@ -77,13 +81,48 @@ function PiPLabel() {
 function FullscreenLabel() {
 	return usePlayer((s) => Boolean(s.fullscreen)) ? /* @__PURE__ */ jsx(Fragment, { children: "Exit fullscreen" }) : /* @__PURE__ */ jsx(Fragment, { children: "Enter fullscreen" });
 }
+function VolumePopover() {
+	const volumeUnsupported = usePlayer((s) => s.volumeAvailability === "unsupported");
+	const muteButton = /* @__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" })
+		]
+	}) });
+	if (volumeUnsupported) 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-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 MinimalVideoSkin(props) {
-	const { children, className, ...rest } = props;
+	const { children, className, poster, ...rest } = props;
 	return /* @__PURE__ */ jsxs(Container, {
 		className: cn("media-minimal-skin media-minimal-skin--video", className),
 		...rest,
 		children: [
 			children,
+			poster && /* @__PURE__ */ jsx(Poster, {
+				src: isString(poster) ? poster : void 0,
+				render: isRenderProp(poster) ? poster : void 0
+			}),
 			/* @__PURE__ */ jsx(BufferingIndicator, { render: (props) => /* @__PURE__ */ jsx("div", {
 				...props,
 				className: "media-buffering-indicator",
@@ -214,32 +253,7 @@ function MinimalVideoSkin(props) {
 									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, {
-									...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-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__ */ jsx(VolumePopover, {}),
 							/* @__PURE__ */ jsxs(TooltipRoot, {
 								side: "top",
 								children: [/* @__PURE__ */ jsx(TooltipTrigger, { render: /* @__PURE__ */ jsx(CaptionsButton, { render: (props) => /* @__PURE__ */ jsxs(Button, {
@@ -253,10 +267,10 @@ function MinimalVideoSkin(props) {
 							}),
 							/* @__PURE__ */ jsxs(TooltipRoot, {
 								side: "top",
-								children: [/* @__PURE__ */ jsx(TooltipTrigger, { render: /* @__PURE__ */ jsx(PiPButton, { render: (props) => /* @__PURE__ */ jsx(Button, {
+								children: [/* @__PURE__ */ jsx(TooltipTrigger, { render: /* @__PURE__ */ jsx(PiPButton, { render: (props) => /* @__PURE__ */ jsxs(Button, {
 									...props,
-									className: "media-button--icon",
-									children: /* @__PURE__ */ jsx(PipIcon, { className: "media-icon" })
+									className: "media-button--icon media-button--pip",
+									children: [/* @__PURE__ */ jsx(PipEnterIcon, { className: "media-icon media-icon--pip-enter" }), /* @__PURE__ */ jsx(PipExitIcon, { className: "media-icon media-icon--pip-exit" })]
 								}) }) }), /* @__PURE__ */ jsx(TooltipPopup, {
 									className: "media-tooltip",
 									children: /* @__PURE__ */ jsx(PiPLabel, {})

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

@@ -1 +1 @@
-{"version":3,"file":"minimal-skin.js","names":["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","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, 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 { 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 type { BaseSkinProps } from '../types';\nimport { ErrorDialog } from './error-dialog';\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\nconst errorClasses = {\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',\n};\n\nfunction PlayLabel(): ReactNode {\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(): ReactNode {\n  const active = usePlayer((s) => Boolean(s.subtitlesShowing));\n  return active ? <>Disable captions</> : <>Enable captions</>;\n}\n\nfunction PiPLabel(): ReactNode {\n  const pip = usePlayer((s) => Boolean(s.pip));\n  return pip ? <>Exit picture-in-picture</> : <>Enter picture-in-picture</>;\n}\n\nfunction FullscreenLabel(): ReactNode {\n  const fullscreen = usePlayer((s) => Boolean(s.fullscreen));\n  return fullscreen ? <>Exit fullscreen</> : <>Enter fullscreen</>;\n}\n\nexport function MinimalVideoSkin(props: MinimalVideoSkinProps): ReactNode {\n  const { children, className, ...rest } = props;\n\n  return (\n    <Container className={cn('media-minimal-skin media-minimal-skin--video', className)} {...rest}>\n      {children}\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 classes={errorClasses} />\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\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              />\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\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              />\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\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                }\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={\n                  <PlaybackRateButton\n                    render={(props) => <Button {...props} className=\"media-button--icon media-button--playback-rate\" />}\n                  />\n                }\n              />\n              <Tooltip.Popup className=\"media-tooltip\">Toggle playback rate</Tooltip.Popup>\n            </Tooltip.Root>\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-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            <Tooltip.Root side=\"top\">\n              <Tooltip.Trigger\n                render={\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              />\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\n                    render={(props) => (\n                      <Button {...props} className=\"media-button--icon\">\n                        <PipIcon className=\"media-icon\" />\n                      </Button>\n                    )}\n                  />\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\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                }\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","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 type { BaseVideoSkinProps } from '../types';\nimport { ErrorDialog } from './error-dialog';\n\nconst SEEK_TIME = 10;\n\nexport type MinimalVideoSkinProps = BaseVideoSkinProps;\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\nconst errorClasses = {\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',\n};\n\nfunction PlayLabel(): ReactNode {\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(): ReactNode {\n  const active = usePlayer((s) => Boolean(s.subtitlesShowing));\n  return active ? <>Disable captions</> : <>Enable captions</>;\n}\n\nfunction PiPLabel(): ReactNode {\n  const pip = usePlayer((s) => Boolean(s.pip));\n  return pip ? <>Exit picture-in-picture</> : <>Enter picture-in-picture</>;\n}\n\nfunction FullscreenLabel(): ReactNode {\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\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  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 classes={errorClasses} />\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\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              />\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\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              />\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\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                }\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={\n                  <PlaybackRateButton\n                    render={(props) => <Button {...props} className=\"media-button--icon media-button--playback-rate\" />}\n                  />\n                }\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\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              />\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\n                    render={(props) => (\n                      <Button {...props} className=\"media-button--icon media-button--pip\">\n                        <PipEnterIcon className=\"media-icon media-icon--pip-enter\" />\n                        <PipExitIcon className=\"media-icon media-icon--pip-exit\" />\n                      </Button>\n                    )}\n                  />\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\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                }\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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"}