@videojs/react 10.0.0-alpha.9 → 10.0.0-beta.10

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

@@ -1,5 +1,7 @@
-import { Container } from "../../player/context.js";
+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";
 import { FullscreenButton } from "../../ui/fullscreen-button/fullscreen-button.js";
 import { MuteButton } from "../../ui/mute-button/mute-button.js";
@@ -9,22 +11,30 @@ 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 { SliderBuffer as SliderBuffer$1 } from "../../ui/slider/slider-buffer.js";
 import { SliderFill as SliderFill$1 } from "../../ui/slider/slider-fill.js";
 import { SliderThumb as SliderThumb$1 } from "../../ui/slider/slider-thumb.js";
+import { SliderThumbnail } from "../../ui/slider/slider-thumbnail.js";
 import { SliderTrack as SliderTrack$1 } from "../../ui/slider/slider-track.js";
+import { SliderValue } from "../../ui/slider/slider-value.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 { TooltipPopup } from "../../ui/tooltip/tooltip-popup.js";
+import { TooltipProvider } from "../../ui/tooltip/tooltip-provider.js";
+import { TooltipRoot } from "../../ui/tooltip/tooltip-root.js";
+import { TooltipTrigger } from "../../ui/tooltip/tooltip-trigger.js";
 import { 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 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";
@@ -32,21 +42,39 @@ 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 "./error-dialog.js";
-import { playbackRate } from "../../skins/dist/default/video/default.tailwind.js";
-import { bufferingIndicator, button, buttonGroup, controls, error, icon, iconContainer, iconFlipped, iconState, overlay, popup, root, seek, slider, time } from "../../skins/dist/default/video/minimal.tailwind.js";
+import { ErrorDialog } from "../error-dialog.js";
+import { iconState } from "../../skins/dist/default/shared/tailwind/icon-state.js";
+import { playbackRate } from "../../skins/dist/default/default/tailwind/components/playback-rate.js";
+import { bufferingIndicator } from "../../skins/dist/default/minimal/tailwind/components/buffering.js";
+import { button } from "../../skins/dist/default/minimal/tailwind/components/button.js";
+import { buttonGroup } from "../../skins/dist/default/minimal/tailwind/components/button-group.js";
+import { icon, iconContainer, iconFlipped } from "../../skins/dist/default/minimal/tailwind/components/icon.js";
+import { seek } from "../../skins/dist/default/minimal/tailwind/components/seek.js";
+import { time } from "../../skins/dist/default/minimal/tailwind/components/time.js";
+import { overlay } from "../../skins/dist/default/minimal/tailwind/components/overlay.js";
+import { poster } from "../../skins/dist/default/minimal/tailwind/components/poster.js";
+import { controls, error, popup, preview, root, slider } from "../../skins/dist/default/minimal/tailwind/video.tailwind.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.tailwind.tsx
 const SEEK_TIME = 10;
-const Button = forwardRef(function Button({ className, variant, ...props }, ref) {
+const ERROR_CLASSNAMES = {
+	root: error.root,
+	dialog: error.dialog,
+	content: error.content,
+	title: error.title,
+	description: error.description,
+	actions: error.actions,
+	close: cn(button.base, button.primary)
+};
+const Button = forwardRef(function Button({ className, ...props }, ref) {
 	return /* @__PURE__ */ jsx("button", {
 		ref,
 		type: "button",
-		className: cn(button.base, variant === "icon" ? button.icon : button.default, className),
+		className: cn(button.base, button.subtle, button.icon, className),
 		...props
 	});
 });
@@ -71,6 +99,13 @@ const SliderFill = forwardRef(function SliderFill({ type = "fill", className, ..
 		...props
 	});
 });
+const SliderBuffer = forwardRef(function SliderBuffer(props, ref) {
+	return /* @__PURE__ */ jsx(SliderFill, {
+		type: "buffer",
+		ref,
+		...props
+	});
+});
 const SliderThumb = forwardRef(function SliderThumb({ persistent, className, ...props }, ref) {
 	return /* @__PURE__ */ jsx("div", {
 		ref,
@@ -78,49 +113,100 @@ const SliderThumb = forwardRef(function SliderThumb({ persistent, className, ...
 		...props
 	});
 });
-const errorClasses = {
-	root: error.root,
-	dialog: error.dialog,
-	content: error.content,
-	title: error.title,
-	actions: error.actions,
-	close: cn(button.base, button.default)
-};
+function PlayLabel() {
+	const paused = usePlayer((s) => Boolean(s.paused));
+	if (usePlayer((s) => Boolean(s.ended))) return "Replay";
+	return paused ? "Play" : "Pause";
+}
+function CaptionsLabel() {
+	return usePlayer((s) => Boolean(s.subtitlesShowing)) ? "Disable captions" : "Enable captions";
+}
+function PiPLabel() {
+	return usePlayer((s) => Boolean(s.pip)) ? "Exit picture-in-picture" : "Enter picture-in-picture";
+}
+function FullscreenLabel() {
+	return usePlayer((s) => Boolean(s.fullscreen)) ? "Exit fullscreen" : "Enter fullscreen";
+}
+function VolumePopover() {
+	const volumeUnsupported = usePlayer((s) => s.volumeAvailability === "unsupported");
+	const muteButton = /* @__PURE__ */ jsxs(MuteButton, {
+		className: iconState.mute.button,
+		render: /* @__PURE__ */ jsx(Button, {}),
+		children: [
+			/* @__PURE__ */ jsx(VolumeOffIcon, { className: cn(icon, iconState.mute.volumeOff) }),
+			/* @__PURE__ */ jsx(VolumeLowIcon, { className: cn(icon, iconState.mute.volumeLow) }),
+			/* @__PURE__ */ jsx(VolumeHighIcon, { className: cn(icon, iconState.mute.volumeHigh) })
+		]
+	});
+	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: cn(popup.volume),
+			children: /* @__PURE__ */ jsxs(VolumeSliderRoot, {
+				orientation: "vertical",
+				thumbAlignment: "edge",
+				render: /* @__PURE__ */ jsx(SliderRoot, {}),
+				children: [/* @__PURE__ */ jsx(SliderTrack$1, {
+					render: /* @__PURE__ */ jsx(SliderTrack, {}),
+					children: /* @__PURE__ */ jsx(SliderFill$1, { render: /* @__PURE__ */ jsx(SliderFill, {}) })
+				}), /* @__PURE__ */ jsx(SliderThumb$1, { render: (props) => /* @__PURE__ */ jsx(SliderThumb, {
+					persistent: true,
+					...props
+				}) })]
+			})
+		})]
+	});
+}
 function MinimalVideoSkinTailwind(props) {
-	const { children, className, ...rest } = props;
+	const { children, className, poster: posterProp, ...rest } = props;
 	return /* @__PURE__ */ jsxs(Container, {
-		className: cn(root, className),
+		className: cn(root(false), className),
 		...rest,
 		children: [
+			children,
+			posterProp && /* @__PURE__ */ jsx(Poster, {
+				src: isString(posterProp) ? posterProp : void 0,
+				render: isRenderProp(posterProp) ? posterProp : void 0,
+				className: poster(false)
+			}),
 			/* @__PURE__ */ jsx(BufferingIndicator, { render: (props) => /* @__PURE__ */ jsx("div", {
 				...props,
 				className: bufferingIndicator,
 				children: /* @__PURE__ */ jsx(SpinnerIcon, { className: icon })
 			}) }),
-			/* @__PURE__ */ jsx(ErrorDialog, { classes: errorClasses }),
-			/* @__PURE__ */ jsxs(ControlsRoot, {
+			/* @__PURE__ */ jsx(ErrorDialog, { classNames: ERROR_CLASSNAMES }),
+			/* @__PURE__ */ jsx(ControlsRoot, {
 				"data-controls": "",
 				className: controls,
-				children: [
-					/* @__PURE__ */ jsxs("span", {
+				children: /* @__PURE__ */ jsxs(TooltipProvider, { children: [
+					/* @__PURE__ */ jsxs("div", {
 						className: buttonGroup,
 						children: [
-							/* @__PURE__ */ jsx(PlayButton, { render: (props) => /* @__PURE__ */ jsxs(Button, {
-								variant: "icon",
-								...props,
-								className: iconState.play.button,
-								children: [
-									/* @__PURE__ */ jsx(RestartIcon, { className: cn(icon, iconState.play.restart) }),
-									/* @__PURE__ */ jsx(PlayIcon, { className: cn(icon, iconState.play.play) }),
-									/* @__PURE__ */ jsx(PauseIcon, { className: cn(icon, iconState.play.pause) })
-								]
-							}) }),
-							/* @__PURE__ */ jsx(SeekButton, {
-								seconds: -SEEK_TIME,
-								render: (props) => /* @__PURE__ */ jsx(Button, {
-									variant: "icon",
-									...props,
+							/* @__PURE__ */ jsxs(TooltipRoot, {
+								side: "top",
+								children: [/* @__PURE__ */ jsx(TooltipTrigger, { render: /* @__PURE__ */ jsxs(PlayButton, {
+									className: iconState.play.button,
+									render: /* @__PURE__ */ jsx(Button, {}),
+									children: [
+										/* @__PURE__ */ jsx(RestartIcon, { className: cn(icon, iconState.play.restart) }),
+										/* @__PURE__ */ jsx(PlayIcon, { className: cn(icon, iconState.play.play) }),
+										/* @__PURE__ */ jsx(PauseIcon, { className: cn(icon, iconState.play.pause) })
+									]
+								}) }), /* @__PURE__ */ jsx(TooltipPopup, {
+									className: cn(popup.tooltip),
+									children: /* @__PURE__ */ jsx(PlayLabel, {})
+								})]
+							}),
+							/* @__PURE__ */ jsxs(TooltipRoot, {
+								side: "top",
+								children: [/* @__PURE__ */ jsx(TooltipTrigger, { render: /* @__PURE__ */ jsx(SeekButton, {
+									seconds: -SEEK_TIME,
 									className: seek.button,
+									render: /* @__PURE__ */ jsx(Button, {}),
 									children: /* @__PURE__ */ jsxs("span", {
 										className: iconContainer,
 										children: [/* @__PURE__ */ jsx(SeekIcon, { className: cn(icon, iconFlipped) }), /* @__PURE__ */ jsx("span", {
@@ -128,14 +214,21 @@ function MinimalVideoSkinTailwind(props) {
 											children: SEEK_TIME
 										})]
 									})
-								})
+								}) }), /* @__PURE__ */ jsxs(TooltipPopup, {
+									className: cn(popup.tooltip),
+									children: [
+										"Seek backward ",
+										SEEK_TIME,
+										" seconds"
+									]
+								})]
 							}),
-							/* @__PURE__ */ jsx(SeekButton, {
-								seconds: SEEK_TIME,
-								render: (props) => /* @__PURE__ */ jsx(Button, {
-									variant: "icon",
-									...props,
+							/* @__PURE__ */ jsxs(TooltipRoot, {
+								side: "top",
+								children: [/* @__PURE__ */ jsx(TooltipTrigger, { render: /* @__PURE__ */ jsx(SeekButton, {
+									seconds: SEEK_TIME,
 									className: seek.button,
+									render: /* @__PURE__ */ jsx(Button, {}),
 									children: /* @__PURE__ */ jsxs("span", {
 										className: iconContainer,
 										children: [/* @__PURE__ */ jsx(SeekIcon, { className: icon }), /* @__PURE__ */ jsx("span", {
@@ -143,11 +236,18 @@ function MinimalVideoSkinTailwind(props) {
 											children: SEEK_TIME
 										})]
 									})
-								})
+								}) }), /* @__PURE__ */ jsxs(TooltipPopup, {
+									className: cn(popup.tooltip),
+									children: [
+										"Seek forward ",
+										SEEK_TIME,
+										" seconds"
+									]
+								})]
 							})
 						]
 					}),
-					/* @__PURE__ */ jsxs("span", {
+					/* @__PURE__ */ jsxs("div", {
 						className: time.controls,
 						children: [/* @__PURE__ */ jsxs(Group, {
 							className: time.group,
@@ -163,77 +263,82 @@ function MinimalVideoSkinTailwind(props) {
 								})
 							]
 						}), /* @__PURE__ */ jsxs(TimeSliderRoot, {
-							render: (props) => /* @__PURE__ */ jsx(SliderRoot, { ...props }),
-							children: [/* @__PURE__ */ jsxs(SliderTrack$1, {
-								render: (props) => /* @__PURE__ */ jsx(SliderTrack, { ...props }),
-								children: [/* @__PURE__ */ jsx(SliderFill$1, { render: (props) => /* @__PURE__ */ jsx(SliderFill, { ...props }) }), /* @__PURE__ */ jsx(SliderBuffer, { render: (props) => /* @__PURE__ */ jsx(SliderFill, {
-									type: "buffer",
-									...props
-								}) })]
-							}), /* @__PURE__ */ jsx(SliderThumb$1, { render: (props) => /* @__PURE__ */ jsx(SliderThumb, { ...props }) })]
+							render: /* @__PURE__ */ jsx(SliderRoot, {}),
+							children: [
+								/* @__PURE__ */ jsxs(SliderTrack$1, {
+									render: /* @__PURE__ */ jsx(SliderTrack, {}),
+									children: [/* @__PURE__ */ jsx(SliderFill$1, { render: /* @__PURE__ */ jsx(SliderFill, {}) }), /* @__PURE__ */ jsx(SliderBuffer$1, { render: /* @__PURE__ */ jsx(SliderBuffer, {}) })]
+								}),
+								/* @__PURE__ */ jsx(SliderThumb$1, { render: /* @__PURE__ */ jsx(SliderThumb, {}) }),
+								/* @__PURE__ */ jsxs("div", {
+									className: preview.root,
+									children: [
+										/* @__PURE__ */ jsx("div", {
+											className: preview.thumbnailWrapper,
+											children: /* @__PURE__ */ jsx(SliderThumbnail, { className: preview.thumbnail })
+										}),
+										/* @__PURE__ */ jsx(SliderValue, {
+											type: "pointer",
+											className: preview.timestamp
+										}),
+										/* @__PURE__ */ jsx(SpinnerIcon, { className: cn(icon, preview.spinner) })
+									]
+								})
+							]
 						})]
 					}),
-					/* @__PURE__ */ jsxs("span", {
+					/* @__PURE__ */ jsxs("div", {
 						className: buttonGroup,
 						children: [
-							/* @__PURE__ */ jsx(PlaybackRateButton, { render: (props) => /* @__PURE__ */ jsx(Button, {
-								variant: "icon",
-								...props,
-								className: playbackRate.button
-							}) }),
-							/* @__PURE__ */ jsxs(PopoverRoot, {
-								openOnHover: true,
-								delay: 200,
-								closeDelay: 100,
+							/* @__PURE__ */ jsxs(TooltipRoot, {
 								side: "top",
-								children: [/* @__PURE__ */ jsx(PopoverTrigger, { render: /* @__PURE__ */ jsx(MuteButton, { render: (props) => /* @__PURE__ */ jsxs(Button, {
-									variant: "icon",
-									...props,
-									className: iconState.mute.button,
-									children: [
-										/* @__PURE__ */ jsx(VolumeOffIcon, { className: cn(icon, iconState.mute.volumeOff) }),
-										/* @__PURE__ */ jsx(VolumeLowIcon, { className: cn(icon, iconState.mute.volumeLow) }),
-										/* @__PURE__ */ jsx(VolumeHighIcon, { className: cn(icon, iconState.mute.volumeHigh) })
-									]
-								}) }) }), /* @__PURE__ */ jsx(PopoverPopup, {
-									className: cn(popup.base, popup.volume),
-									children: /* @__PURE__ */ jsxs(VolumeSliderRoot, {
-										orientation: "vertical",
-										thumbAlignment: "edge",
-										render: (props) => /* @__PURE__ */ jsx(SliderRoot, { ...props }),
-										children: [/* @__PURE__ */ jsx(SliderTrack$1, {
-											render: (props) => /* @__PURE__ */ jsx(SliderTrack, { ...props }),
-											children: /* @__PURE__ */ jsx(SliderFill$1, { render: (props) => /* @__PURE__ */ jsx(SliderFill, { ...props }) })
-										}), /* @__PURE__ */ jsx(SliderThumb$1, { render: (props) => /* @__PURE__ */ jsx(SliderThumb, {
-											persistent: true,
-											...props
-										}) })]
-									})
+								children: [/* @__PURE__ */ jsx(TooltipTrigger, { render: /* @__PURE__ */ jsx(PlaybackRateButton, {
+									className: playbackRate.button,
+									render: /* @__PURE__ */ jsx(Button, {})
+								}) }), /* @__PURE__ */ jsx(TooltipPopup, {
+									className: cn(popup.tooltip),
+									children: "Toggle playback rate"
 								})]
 							}),
-							/* @__PURE__ */ jsx(CaptionsButton, { render: (props) => /* @__PURE__ */ jsxs(Button, {
-								variant: "icon",
-								...props,
-								className: iconState.captions.button,
-								children: [/* @__PURE__ */ jsx(CaptionsOffIcon, { className: cn(icon, iconState.captions.off) }), /* @__PURE__ */ jsx(CaptionsOnIcon, { className: cn(icon, iconState.captions.on) })]
-							}) }),
-							/* @__PURE__ */ jsx(PiPButton, { render: (props) => /* @__PURE__ */ jsx(Button, {
-								variant: "icon",
-								...props,
-								children: /* @__PURE__ */ jsx(PipIcon, { className: icon })
-							}) }),
-							/* @__PURE__ */ jsx(FullscreenButton, { render: (props) => /* @__PURE__ */ jsxs(Button, {
-								variant: "icon",
-								...props,
-								className: iconState.fullscreen.button,
-								children: [/* @__PURE__ */ jsx(FullscreenEnterIcon, { className: cn(icon, iconState.fullscreen.enter) }), /* @__PURE__ */ jsx(FullscreenExitIcon, { className: cn(icon, iconState.fullscreen.exit) })]
-							}) })
+							/* @__PURE__ */ jsx(VolumePopover, {}),
+							/* @__PURE__ */ jsxs(TooltipRoot, {
+								side: "top",
+								children: [/* @__PURE__ */ jsx(TooltipTrigger, { render: /* @__PURE__ */ jsxs(CaptionsButton, {
+									className: iconState.captions.button,
+									render: /* @__PURE__ */ jsx(Button, {}),
+									children: [/* @__PURE__ */ jsx(CaptionsOffIcon, { className: cn(icon, iconState.captions.off) }), /* @__PURE__ */ jsx(CaptionsOnIcon, { className: cn(icon, iconState.captions.on) })]
+								}) }), /* @__PURE__ */ jsx(TooltipPopup, {
+									className: cn(popup.tooltip),
+									children: /* @__PURE__ */ jsx(CaptionsLabel, {})
+								})]
+							}),
+							/* @__PURE__ */ jsxs(TooltipRoot, {
+								side: "top",
+								children: [/* @__PURE__ */ jsx(TooltipTrigger, { render: /* @__PURE__ */ jsxs(PiPButton, {
+									className: iconState.pip.button,
+									render: /* @__PURE__ */ jsx(Button, {}),
+									children: [/* @__PURE__ */ jsx(PipEnterIcon, { className: cn(icon, iconState.pip.off) }), /* @__PURE__ */ jsx(PipExitIcon, { className: cn(icon, iconState.pip.on) })]
+								}) }), /* @__PURE__ */ jsx(TooltipPopup, {
+									className: cn(popup.tooltip),
+									children: /* @__PURE__ */ jsx(PiPLabel, {})
+								})]
+							}),
+							/* @__PURE__ */ jsxs(TooltipRoot, {
+								side: "top",
+								children: [/* @__PURE__ */ jsx(TooltipTrigger, { render: /* @__PURE__ */ jsxs(FullscreenButton, {
+									className: iconState.fullscreen.button,
+									render: /* @__PURE__ */ jsx(Button, {}),
+									children: [/* @__PURE__ */ jsx(FullscreenEnterIcon, { className: cn(icon, iconState.fullscreen.enter) }), /* @__PURE__ */ jsx(FullscreenExitIcon, { className: cn(icon, iconState.fullscreen.exit) })]
+								}) }), /* @__PURE__ */ jsx(TooltipPopup, {
+									className: cn(popup.tooltip),
+									children: /* @__PURE__ */ jsx(FullscreenLabel, {})
+								})]
+							})
 						]
 					})
-				]
+				] })
 			}),
-			/* @__PURE__ */ jsx("div", { className: overlay }),
-			children
+			/* @__PURE__ */ jsx("div", { className: overlay })
 		]
 	});
 }

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

@@ -1 +1 @@
-{"version":3,"file":"minimal-skin.tailwind.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.tailwind.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 { playbackRate } from '@videojs/skins/video/default.tailwind';\nimport {\n  bufferingIndicator,\n  button,\n  buttonGroup,\n  controls,\n  error,\n  icon,\n  iconContainer,\n  iconFlipped,\n  iconState,\n  overlay,\n  popup,\n  root,\n  seek,\n  slider,\n  time,\n} from '@videojs/skins/video/minimal.tailwind';\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 { 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 { ErrorDialog } from './error-dialog';\nimport type { MinimalVideoSkinProps } from './minimal-skin';\n\nconst SEEK_TIME = 10;\n\n/* --------------------------------------- Components ---------------------------------------- */\n\nconst Button = forwardRef<HTMLButtonElement, ComponentProps<'button'> & { variant?: 'icon' }>(function Button(\n  { className, variant, ...props },\n  ref\n) {\n  return (\n    <button\n      ref={ref}\n      type=\"button\"\n      className={cn(button.base, variant === 'icon' ? button.icon : button.default, className)}\n      {...props}\n    />\n  );\n});\n\nconst SliderRoot = forwardRef<HTMLDivElement, ComponentProps<'div'>>(function SliderRoot({ className, ...props }, ref) {\n  return <div ref={ref} className={cn(slider.root, className)} {...props} />;\n});\n\nconst SliderTrack = forwardRef<HTMLDivElement, ComponentProps<'div'>>(function SliderTrack(\n  { className, ...props },\n  ref\n) {\n  return <div ref={ref} className={cn(slider.track, className)} {...props} />;\n});\n\nconst SliderFill = forwardRef<HTMLDivElement, ComponentProps<'div'> & { type?: 'fill' | 'buffer' }>(function SliderFill(\n  { type = 'fill', className, ...props },\n  ref\n) {\n  return (\n    <div\n      ref={ref}\n      className={cn(slider.fill.base, type === 'fill' ? slider.fill.fill : slider.fill.buffer, className)}\n      {...props}\n    />\n  );\n});\n\nconst SliderThumb = forwardRef<HTMLDivElement, ComponentProps<'div'> & { persistent?: boolean }>(function SliderThumb(\n  { persistent, className, ...props },\n  ref\n) {\n  return (\n    <div\n      ref={ref}\n      className={cn(slider.thumb.base, persistent ? undefined : slider.thumb.interactive, className)}\n      {...props}\n    />\n  );\n});\n\nconst errorClasses = {\n  root: error.root,\n  dialog: error.dialog,\n  content: error.content,\n  title: error.title,\n  actions: error.actions,\n  close: cn(button.base, button.default),\n};\n\n/* ------------------------------------------ Skin ------------------------------------------- */\n\nexport function MinimalVideoSkinTailwind(props: MinimalVideoSkinProps): ReactNode {\n  const { children, className, ...rest } = props;\n\n  return (\n    <Container className={cn(root, className)} {...rest}>\n      <BufferingIndicator\n        render={(props) => (\n          <div {...props} className={bufferingIndicator}>\n            <SpinnerIcon className={icon} />\n          </div>\n        )}\n      />\n\n      <ErrorDialog classes={errorClasses} />\n\n      <Controls.Root\n        data-controls=\"\" // Used as a hook for Tailwind has-[] styles\n        className={controls}\n      >\n        <span className={buttonGroup}>\n          <PlayButton\n            render={(props) => (\n              <Button variant=\"icon\" {...props} className={iconState.play.button}>\n                <RestartIcon className={cn(icon, iconState.play.restart)} />\n                <PlayIcon className={cn(icon, iconState.play.play)} />\n                <PauseIcon className={cn(icon, iconState.play.pause)} />\n              </Button>\n            )}\n          />\n\n          <SeekButton\n            seconds={-SEEK_TIME}\n            render={(props) => (\n              <Button variant=\"icon\" {...props} className={seek.button}>\n                <span className={iconContainer}>\n                  <SeekIcon className={cn(icon, iconFlipped)} />\n                  <span className={cn(seek.label, seek.labelBackward)}>{SEEK_TIME}</span>\n                </span>\n              </Button>\n            )}\n          />\n\n          <SeekButton\n            seconds={SEEK_TIME}\n            render={(props) => (\n              <Button variant=\"icon\" {...props} className={seek.button}>\n                <span className={iconContainer}>\n                  <SeekIcon className={icon} />\n                  <span className={cn(seek.label, seek.labelForward)}>{SEEK_TIME}</span>\n                </span>\n              </Button>\n            )}\n          />\n        </span>\n\n        <span className={time.controls}>\n          <Time.Group className={time.group}>\n            <Time.Value type=\"current\" className={time.current} />\n            <Time.Separator className={time.separator} />\n            <Time.Value type=\"duration\" className={time.duration} />\n          </Time.Group>\n\n          <TimeSlider.Root render={(props) => <SliderRoot {...props} />}>\n            <TimeSlider.Track render={(props) => <SliderTrack {...props} />}>\n              <TimeSlider.Fill render={(props) => <SliderFill {...props} />} />\n              <TimeSlider.Buffer render={(props) => <SliderFill type=\"buffer\" {...props} />} />\n            </TimeSlider.Track>\n            <TimeSlider.Thumb render={(props) => <SliderThumb {...props} />} />\n          </TimeSlider.Root>\n        </span>\n\n        <span className={buttonGroup}>\n          <PlaybackRateButton\n            render={(props) => <Button variant=\"icon\" {...props} className={playbackRate.button} />}\n          />\n\n          <Popover.Root openOnHover delay={200} closeDelay={100} side=\"top\">\n            <Popover.Trigger\n              render={\n                <MuteButton\n                  render={(props) => (\n                    <Button variant=\"icon\" {...props} className={iconState.mute.button}>\n                      <VolumeOffIcon className={cn(icon, iconState.mute.volumeOff)} />\n                      <VolumeLowIcon className={cn(icon, iconState.mute.volumeLow)} />\n                      <VolumeHighIcon className={cn(icon, iconState.mute.volumeHigh)} />\n                    </Button>\n                  )}\n                />\n              }\n            />\n            <Popover.Popup className={cn(popup.base, popup.volume)}>\n              <VolumeSlider.Root\n                orientation=\"vertical\"\n                thumbAlignment=\"edge\"\n                render={(props) => <SliderRoot {...props} />}\n              >\n                <VolumeSlider.Track render={(props) => <SliderTrack {...props} />}>\n                  <VolumeSlider.Fill render={(props) => <SliderFill {...props} />} />\n                </VolumeSlider.Track>\n                <VolumeSlider.Thumb render={(props) => <SliderThumb persistent {...props} />} />\n              </VolumeSlider.Root>\n            </Popover.Popup>\n          </Popover.Root>\n\n          <CaptionsButton\n            render={(props) => (\n              <Button variant=\"icon\" {...props} className={iconState.captions.button}>\n                <CaptionsOffIcon className={cn(icon, iconState.captions.off)} />\n                <CaptionsOnIcon className={cn(icon, iconState.captions.on)} />\n              </Button>\n            )}\n          />\n\n          <PiPButton\n            render={(props) => (\n              <Button variant=\"icon\" {...props}>\n                <PipIcon className={icon} />\n              </Button>\n            )}\n          />\n\n          <FullscreenButton\n            render={(props) => (\n              <Button variant=\"icon\" {...props} className={iconState.fullscreen.button}>\n                <FullscreenEnterIcon className={cn(icon, iconState.fullscreen.enter)} />\n                <FullscreenExitIcon className={cn(icon, iconState.fullscreen.exit)} />\n              </Button>\n            )}\n          />\n        </span>\n      </Controls.Root>\n\n      {/* <div className={captions.root}>\n        <div className={captions.container}>\n          <span className={captions.cue}>\n            An example cue\n          </span>\n        </div>\n      </div> */}\n\n      <div className={overlay} />\n\n      {children}\n    </Container>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoDA,MAAM,YAAY;AAIlB,MAAM,SAAS,WAA+E,SAAS,OACrG,EAAE,WAAW,SAAS,GAAG,SACzB,KACA;AACA,QACE,oBAAC;EACM;EACL,MAAK;EACL,WAAW,GAAG,OAAO,MAAM,YAAY,SAAS,OAAO,OAAO,OAAO,SAAS,UAAU;EACxF,GAAI;GACJ;EAEJ;AAEF,MAAM,aAAa,WAAkD,SAAS,WAAW,EAAE,WAAW,GAAG,SAAS,KAAK;AACrH,QAAO,oBAAC;EAAS;EAAK,WAAW,GAAG,OAAO,MAAM,UAAU;EAAE,GAAI;GAAS;EAC1E;AAEF,MAAM,cAAc,WAAkD,SAAS,YAC7E,EAAE,WAAW,GAAG,SAChB,KACA;AACA,QAAO,oBAAC;EAAS;EAAK,WAAW,GAAG,OAAO,OAAO,UAAU;EAAE,GAAI;GAAS;EAC3E;AAEF,MAAM,aAAa,WAAiF,SAAS,WAC3G,EAAE,OAAO,QAAQ,WAAW,GAAG,SAC/B,KACA;AACA,QACE,oBAAC;EACM;EACL,WAAW,GAAG,OAAO,KAAK,MAAM,SAAS,SAAS,OAAO,KAAK,OAAO,OAAO,KAAK,QAAQ,UAAU;EACnG,GAAI;GACJ;EAEJ;AAEF,MAAM,cAAc,WAA6E,SAAS,YACxG,EAAE,YAAY,WAAW,GAAG,SAC5B,KACA;AACA,QACE,oBAAC;EACM;EACL,WAAW,GAAG,OAAO,MAAM,MAAM,aAAa,SAAY,OAAO,MAAM,aAAa,UAAU;EAC9F,GAAI;GACJ;EAEJ;AAEF,MAAM,eAAe;CACnB,MAAM,MAAM;CACZ,QAAQ,MAAM;CACd,SAAS,MAAM;CACf,OAAO,MAAM;CACb,SAAS,MAAM;CACf,OAAO,GAAG,OAAO,MAAM,OAAO,QAAQ;CACvC;AAID,SAAgB,yBAAyB,OAAyC;CAChF,MAAM,EAAE,UAAU,WAAW,GAAG,SAAS;AAEzC,QACE,qBAAC;EAAU,WAAW,GAAG,MAAM,UAAU;EAAE,GAAI;;GAC7C,oBAAC,sBACC,SAAS,UACP,oBAAC;IAAI,GAAI;IAAO,WAAW;cACzB,oBAAC,eAAY,WAAW,OAAQ;KAC5B,GAER;GAEF,oBAAC,eAAY,SAAS,eAAgB;GAEtC,qBAACA;IACC,iBAAc;IACd,WAAW;;KAEX,qBAAC;MAAK,WAAW;;OACf,oBAAC,cACC,SAAS,UACP,qBAAC;QAAO,SAAQ;QAAO,GAAI;QAAO,WAAW,UAAU,KAAK;;SAC1D,oBAAC,eAAY,WAAW,GAAG,MAAM,UAAU,KAAK,QAAQ,GAAI;SAC5D,oBAAC,YAAS,WAAW,GAAG,MAAM,UAAU,KAAK,KAAK,GAAI;SACtD,oBAAC,aAAU,WAAW,GAAG,MAAM,UAAU,KAAK,MAAM,GAAI;;SACjD,GAEX;OAEF,oBAAC;QACC,SAAS,CAAC;QACV,SAAS,UACP,oBAAC;SAAO,SAAQ;SAAO,GAAI;SAAO,WAAW,KAAK;mBAChD,qBAAC;UAAK,WAAW;qBACf,oBAAC,YAAS,WAAW,GAAG,MAAM,YAAY,GAAI,EAC9C,oBAAC;WAAK,WAAW,GAAG,KAAK,OAAO,KAAK,cAAc;qBAAG;YAAiB;WAClE;UACA;SAEX;OAEF,oBAAC;QACC,SAAS;QACT,SAAS,UACP,oBAAC;SAAO,SAAQ;SAAO,GAAI;SAAO,WAAW,KAAK;mBAChD,qBAAC;UAAK,WAAW;qBACf,oBAAC,YAAS,WAAW,OAAQ,EAC7B,oBAAC;WAAK,WAAW,GAAG,KAAK,OAAO,KAAK,aAAa;qBAAG;YAAiB;WACjE;UACA;SAEX;;OACG;KAEP,qBAAC;MAAK,WAAW,KAAK;iBACpB,qBAACC;OAAW,WAAW,KAAK;;QAC1B,oBAACC;SAAW,MAAK;SAAU,WAAW,KAAK;UAAW;QACtD,oBAACC,aAAe,WAAW,KAAK,YAAa;QAC7C,oBAACD;SAAW,MAAK;SAAW,WAAW,KAAK;UAAY;;QAC7C,EAEb,qBAACE;OAAgB,SAAS,UAAU,oBAAC,cAAW,GAAI,QAAS;kBAC3D,qBAACC;QAAiB,SAAS,UAAU,oBAAC,eAAY,GAAI,QAAS;mBAC7D,oBAACC,gBAAgB,SAAS,UAAU,oBAAC,cAAW,GAAI,QAAS,GAAI,EACjE,oBAACC,gBAAkB,SAAS,UAAU,oBAAC;SAAW,MAAK;SAAS,GAAI;UAAS,GAAI;SAChE,EACnB,oBAACC,iBAAiB,SAAS,UAAU,oBAAC,eAAY,GAAI,QAAS,GAAI;QACnD;OACb;KAEP,qBAAC;MAAK,WAAW;;OACf,oBAAC,sBACC,SAAS,UAAU,oBAAC;QAAO,SAAQ;QAAO,GAAI;QAAO,WAAW,aAAa;SAAU,GACvF;OAEF,qBAACC;QAAa;QAAY,OAAO;QAAK,YAAY;QAAK,MAAK;mBAC1D,oBAACC,kBACC,QACE,oBAAC,cACC,SAAS,UACP,qBAAC;SAAO,SAAQ;SAAO,GAAI;SAAO,WAAW,UAAU,KAAK;;UAC1D,oBAAC,iBAAc,WAAW,GAAG,MAAM,UAAU,KAAK,UAAU,GAAI;UAChE,oBAAC,iBAAc,WAAW,GAAG,MAAM,UAAU,KAAK,UAAU,GAAI;UAChE,oBAAC,kBAAe,WAAW,GAAG,MAAM,UAAU,KAAK,WAAW,GAAI;;UAC3D,GAEX,GAEJ,EACF,oBAACC;SAAc,WAAW,GAAG,MAAM,MAAM,MAAM,OAAO;mBACpD,qBAACC;UACC,aAAY;UACZ,gBAAe;UACf,SAAS,UAAU,oBAAC,cAAW,GAAI,QAAS;qBAE5C,oBAACC;WAAmB,SAAS,UAAU,oBAAC,eAAY,GAAI,QAAS;qBAC/D,oBAACC,gBAAkB,SAAS,UAAU,oBAAC,cAAW,GAAI,QAAS,GAAI;YAChD,EACrB,oBAACC,iBAAmB,SAAS,UAAU,oBAAC;WAAY;WAAW,GAAI;YAAS,GAAI;WAC9D;UACN;SACH;OAEf,oBAAC,kBACC,SAAS,UACP,qBAAC;QAAO,SAAQ;QAAO,GAAI;QAAO,WAAW,UAAU,SAAS;mBAC9D,oBAAC,mBAAgB,WAAW,GAAG,MAAM,UAAU,SAAS,IAAI,GAAI,EAChE,oBAAC,kBAAe,WAAW,GAAG,MAAM,UAAU,SAAS,GAAG,GAAI;SACvD,GAEX;OAEF,oBAAC,aACC,SAAS,UACP,oBAAC;QAAO,SAAQ;QAAO,GAAI;kBACzB,oBAAC,WAAQ,WAAW,OAAQ;SACrB,GAEX;OAEF,oBAAC,oBACC,SAAS,UACP,qBAAC;QAAO,SAAQ;QAAO,GAAI;QAAO,WAAW,UAAU,WAAW;mBAChE,oBAAC,uBAAoB,WAAW,GAAG,MAAM,UAAU,WAAW,MAAM,GAAI,EACxE,oBAAC,sBAAmB,WAAW,GAAG,MAAM,UAAU,WAAW,KAAK,GAAI;SAC/D,GAEX;;OACG;;KACO;GAUhB,oBAAC,SAAI,WAAW,UAAW;GAE1B;;GACS"}
+{"version":3,"file":"minimal-skin.tailwind.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.tailwind.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 { playbackRate } from '@videojs/skins/default/tailwind/video.tailwind';\nimport {\n  bufferingIndicator,\n  button,\n  buttonGroup,\n  controls,\n  error,\n  icon,\n  iconContainer,\n  iconFlipped,\n  iconState,\n  overlay,\n  popup,\n  poster,\n  preview,\n  root,\n  seek,\n  slider,\n  time,\n} from '@videojs/skins/minimal/tailwind/video.tailwind';\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 { MinimalVideoSkinProps } from './minimal-skin';\n\nconst SEEK_TIME = 10;\n\nconst ERROR_CLASSNAMES = {\n  root: error.root,\n  dialog: error.dialog,\n  content: error.content,\n  title: error.title,\n  description: error.description,\n  actions: error.actions,\n  close: cn(button.base, button.primary),\n};\n\n/* --------------------------------------- Components ---------------------------------------- */\n\nconst Button = forwardRef<HTMLButtonElement, ComponentProps<'button'>>(function Button({ className, ...props }, ref) {\n  return (\n    <button ref={ref} type=\"button\" className={cn(button.base, button.subtle, button.icon, className)} {...props} />\n  );\n});\n\nconst SliderRoot = forwardRef<HTMLDivElement, ComponentProps<'div'>>(function SliderRoot({ className, ...props }, ref) {\n  return <div ref={ref} className={cn(slider.root, className)} {...props} />;\n});\n\nconst SliderTrack = forwardRef<HTMLDivElement, ComponentProps<'div'>>(function SliderTrack(\n  { className, ...props },\n  ref\n) {\n  return <div ref={ref} className={cn(slider.track, className)} {...props} />;\n});\n\nconst SliderFill = forwardRef<HTMLDivElement, ComponentProps<'div'> & { type?: 'fill' | 'buffer' }>(function SliderFill(\n  { type = 'fill', className, ...props },\n  ref\n) {\n  return (\n    <div\n      ref={ref}\n      className={cn(slider.fill.base, type === 'fill' ? slider.fill.fill : slider.fill.buffer, className)}\n      {...props}\n    />\n  );\n});\n\nconst SliderBuffer = forwardRef<HTMLDivElement, ComponentProps<'div'>>(function SliderBuffer(props, ref) {\n  return <SliderFill type=\"buffer\" ref={ref} {...props} />;\n});\n\nconst SliderThumb = forwardRef<HTMLDivElement, ComponentProps<'div'> & { persistent?: boolean }>(function SliderThumb(\n  { persistent, className, ...props },\n  ref\n) {\n  return (\n    <div\n      ref={ref}\n      className={cn(slider.thumb.base, persistent ? undefined : slider.thumb.interactive, 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={iconState.mute.button} render={<Button />}>\n      <VolumeOffIcon className={cn(icon, iconState.mute.volumeOff)} />\n      <VolumeLowIcon className={cn(icon, iconState.mute.volumeLow)} />\n      <VolumeHighIcon className={cn(icon, iconState.mute.volumeHigh)} />\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={cn(popup.volume)}>\n        <VolumeSlider.Root orientation=\"vertical\" thumbAlignment=\"edge\" render={<SliderRoot />}>\n          <VolumeSlider.Track render={<SliderTrack />}>\n            <VolumeSlider.Fill render={<SliderFill />} />\n          </VolumeSlider.Track>\n          <VolumeSlider.Thumb render={(props) => <SliderThumb persistent {...props} />} />\n        </VolumeSlider.Root>\n      </Popover.Popup>\n    </Popover.Root>\n  );\n}\n\n/* ------------------------------------------ Skin ------------------------------------------- */\n\nexport function MinimalVideoSkinTailwind(props: MinimalVideoSkinProps): ReactNode {\n  const { children, className, poster: posterProp, ...rest } = props;\n\n  return (\n    <Container className={cn(root(false), className)} {...rest}>\n      {children}\n\n      {posterProp && (\n        <Poster\n          src={isString(posterProp) ? posterProp : undefined}\n          render={isRenderProp(posterProp) ? posterProp : undefined}\n          className={poster(false)}\n        />\n      )}\n\n      <BufferingIndicator\n        render={(props) => (\n          <div {...props} className={bufferingIndicator}>\n            <SpinnerIcon className={icon} />\n          </div>\n        )}\n      />\n\n      <ErrorDialog classNames={ERROR_CLASSNAMES} />\n\n      <Controls.Root\n        data-controls=\"\" // Used as a hook for Tailwind has-[] styles\n        className={controls}\n      >\n        <Tooltip.Provider>\n          <div className={buttonGroup}>\n            <Tooltip.Root side=\"top\">\n              <Tooltip.Trigger\n                render={\n                  <PlayButton className={iconState.play.button} render={<Button />}>\n                    <RestartIcon className={cn(icon, iconState.play.restart)} />\n                    <PlayIcon className={cn(icon, iconState.play.play)} />\n                    <PauseIcon className={cn(icon, iconState.play.pause)} />\n                  </PlayButton>\n                }\n              />\n              <Tooltip.Popup className={cn(popup.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={seek.button} render={<Button />}>\n                    <span className={iconContainer}>\n                      <SeekIcon className={cn(icon, iconFlipped)} />\n                      <span className={cn(seek.label, seek.labelBackward)}>{SEEK_TIME}</span>\n                    </span>\n                  </SeekButton>\n                }\n              />\n              <Tooltip.Popup className={cn(popup.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={seek.button} render={<Button />}>\n                    <span className={iconContainer}>\n                      <SeekIcon className={icon} />\n                      <span className={cn(seek.label, seek.labelForward)}>{SEEK_TIME}</span>\n                    </span>\n                  </SeekButton>\n                }\n              />\n              <Tooltip.Popup className={cn(popup.tooltip)}>Seek forward {SEEK_TIME} seconds</Tooltip.Popup>\n            </Tooltip.Root>\n          </div>\n\n          <div className={time.controls}>\n            <Time.Group className={time.group}>\n              <Time.Value type=\"current\" className={time.current} />\n              <Time.Separator className={time.separator} />\n              <Time.Value type=\"duration\" className={time.duration} />\n            </Time.Group>\n\n            <TimeSlider.Root render={<SliderRoot />}>\n              <TimeSlider.Track render={<SliderTrack />}>\n                <TimeSlider.Fill render={<SliderFill />} />\n                <TimeSlider.Buffer render={<SliderBuffer />} />\n              </TimeSlider.Track>\n              <TimeSlider.Thumb render={<SliderThumb />} />\n              <div className={preview.root}>\n                <div className={preview.thumbnailWrapper}>\n                  <Slider.Thumbnail className={preview.thumbnail} />\n                </div>\n                <TimeSlider.Value type=\"pointer\" className={preview.timestamp} />\n                <SpinnerIcon className={cn(icon, preview.spinner)} />\n              </div>\n            </TimeSlider.Root>\n          </div>\n\n          <div className={buttonGroup}>\n            <Tooltip.Root side=\"top\">\n              <Tooltip.Trigger render={<PlaybackRateButton className={playbackRate.button} render={<Button />} />} />\n              <Tooltip.Popup className={cn(popup.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={iconState.captions.button} render={<Button />}>\n                    <CaptionsOffIcon className={cn(icon, iconState.captions.off)} />\n                    <CaptionsOnIcon className={cn(icon, iconState.captions.on)} />\n                  </CaptionsButton>\n                }\n              />\n              <Tooltip.Popup className={cn(popup.tooltip)}>\n                <CaptionsLabel />\n              </Tooltip.Popup>\n            </Tooltip.Root>\n\n            <Tooltip.Root side=\"top\">\n              <Tooltip.Trigger\n                render={\n                  <PiPButton className={iconState.pip.button} render={<Button />}>\n                    <PipEnterIcon className={cn(icon, iconState.pip.off)} />\n                    <PipExitIcon className={cn(icon, iconState.pip.on)} />\n                  </PiPButton>\n                }\n              />\n              <Tooltip.Popup className={cn(popup.tooltip)}>\n                <PiPLabel />\n              </Tooltip.Popup>\n            </Tooltip.Root>\n\n            <Tooltip.Root side=\"top\">\n              <Tooltip.Trigger\n                render={\n                  <FullscreenButton className={iconState.fullscreen.button} render={<Button />}>\n                    <FullscreenEnterIcon className={cn(icon, iconState.fullscreen.enter)} />\n                    <FullscreenExitIcon className={cn(icon, iconState.fullscreen.exit)} />\n                  </FullscreenButton>\n                }\n              />\n              <Tooltip.Popup className={cn(popup.tooltip)}>\n                <FullscreenLabel />\n              </Tooltip.Popup>\n            </Tooltip.Root>\n          </div>\n        </Tooltip.Provider>\n      </Controls.Root>\n\n      <div className={overlay} />\n    </Container>\n  );\n}\n"],"mappings":"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"}