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

package/dist/default/presets/video/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,24 +11,36 @@ 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 { 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 { CaptionsButton } from "../../ui/captions-button/captions-button.js";
-import { ErrorDialog } from "./error-dialog.js";
-import { bufferingIndicator, button, controls, error, icon, iconContainer, iconFlipped, iconState, overlay, playbackRate, popup, root, seek, slider, time } from "../../skins/dist/default/video/default.tailwind.js";
+import { ErrorDialog } from "../error-dialog.js";
+import { iconState } from "../../skins/dist/default/shared/tailwind/icon-state.js";
+import { button } from "../../skins/dist/default/default/tailwind/components/button.js";
+import { icon, iconContainer, iconFlipped } from "../../skins/dist/default/default/tailwind/components/icon.js";
+import { playbackRate } from "../../skins/dist/default/default/tailwind/components/playback-rate.js";
+import { seek } from "../../skins/dist/default/default/tailwind/components/seek.js";
+import { time } from "../../skins/dist/default/default/tailwind/components/time.js";
 import CaptionsOffIcon from "../../icons/dist/react/default/captions-off.js";
 import CaptionsOnIcon from "../../icons/dist/react/default/captions-on.js";
 import FullscreenEnterIcon from "../../icons/dist/react/default/fullscreen-enter.js";
 import FullscreenExitIcon from "../../icons/dist/react/default/fullscreen-exit.js";
 import PauseIcon from "../../icons/dist/react/default/pause.js";
-import PipIcon from "../../icons/dist/react/default/pip.js";
+import PipEnterIcon from "../../icons/dist/react/default/pip-enter.js";
+import PipExitIcon from "../../icons/dist/react/default/pip-exit.js";
 import PlayIcon from "../../icons/dist/react/default/play.js";
 import RestartIcon from "../../icons/dist/react/default/restart.js";
 import SeekIcon from "../../icons/dist/react/default/seek.js";
@@ -34,17 +48,30 @@ import SpinnerIcon from "../../icons/dist/react/default/spinner.js";
 import VolumeHighIcon from "../../icons/dist/react/default/volume-high.js";
 import VolumeLowIcon from "../../icons/dist/react/default/volume-low.js";
 import VolumeOffIcon from "../../icons/dist/react/default/volume-off.js";
+import { overlay } from "../../skins/dist/default/default/tailwind/components/overlay.js";
+import { poster } from "../../skins/dist/default/default/tailwind/components/poster.js";
+import { bufferingIndicator, controls, error, popup, preview, root, slider } from "../../skins/dist/default/default/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/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
 	});
 });
@@ -69,6 +96,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,
@@ -76,21 +110,66 @@ const SliderThumb = forwardRef(function SliderThumb({ persistent, className, ...
 		...props
 	});
 });
-const errorClasses = {
-	root: error.root,
-	dialog: error.dialog,
-	content: error.content,
-	title: error.title,
-	description: error.description,
-	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.popover, 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 VideoSkinTailwind(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.root,
@@ -99,27 +178,32 @@ function VideoSkinTailwind(props) {
 					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__ */ 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,
+				children: /* @__PURE__ */ jsxs(TooltipProvider, { children: [
+					/* @__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", {
@@ -127,14 +211,21 @@ function VideoSkinTailwind(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", {
@@ -142,7 +233,14 @@ function VideoSkinTailwind(props) {
 									children: SEEK_TIME
 								})]
 							})
-						})
+						}) }), /* @__PURE__ */ jsxs(TooltipPopup, {
+							className: cn(popup.tooltip),
+							children: [
+								"Seek forward ",
+								SEEK_TIME,
+								" seconds"
+							]
+						})]
 					}),
 					/* @__PURE__ */ jsxs(Group, {
 						className: time.group,
@@ -152,14 +250,25 @@ function VideoSkinTailwind(props) {
 								className: time.current
 							}),
 							/* @__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(SliderThumbnail, { className: preview.thumbnail }),
+											/* @__PURE__ */ jsx(SliderValue, {
+												type: "pointer",
+												className: preview.timestamp
+											}),
+											/* @__PURE__ */ jsx(SpinnerIcon, { className: cn(icon, preview.spinner) })
+										]
+									})
+								]
 							}),
 							/* @__PURE__ */ jsx(Value, {
 								type: "duration",
@@ -167,62 +276,53 @@ function VideoSkinTailwind(props) {
 							})
 						]
 					}),
-					/* @__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(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__ */ 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__ */ 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/skin.tailwind.js.map

@@ -1 +1 @@
-{"version":3,"file":"skin.tailwind.js","names":["Controls.Root","Time.Group","Time.Value","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/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';\nimport {\n  bufferingIndicator,\n  button,\n  controls,\n  error,\n  icon,\n  iconContainer,\n  iconFlipped,\n  iconState,\n  overlay,\n  playbackRate,\n  popup,\n  root,\n  seek,\n  slider,\n  time,\n} from '@videojs/skins/video/default.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 { VideoSkinProps } from './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 ? slider.thumb.persistent : 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  description: error.description,\n  actions: error.actions,\n  close: cn(button.base, button.default),\n};\n\n/* ------------------------------------------ Skin ------------------------------------------- */\n\nexport function VideoSkinTailwind(props: VideoSkinProps): 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.root}>\n            <div className={bufferingIndicator.container}>\n              <SpinnerIcon className={icon} />\n            </div>\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        <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\n        <Time.Group className={time.group}>\n          <Time.Value type=\"current\" className={time.current} />\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          <Time.Value type=\"duration\" className={time.duration} />\n        </Time.Group>\n\n        <PlaybackRateButton render={(props) => <Button variant=\"icon\" {...props} className={playbackRate.button} />} />\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      </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":"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"}
+{"version":3,"file":"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","TimeSlider.Root","TimeSlider.Track","TimeSlider.Fill","TimeSlider.Buffer","TimeSlider.Thumb","Slider.Thumbnail","TimeSlider.Value"],"sources":["../../../../src/presets/video/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';\nimport {\n  bufferingIndicator,\n  button,\n  controls,\n  error,\n  icon,\n  iconContainer,\n  iconFlipped,\n  iconState,\n  overlay,\n  playbackRate,\n  popup,\n  poster,\n  preview,\n  root,\n  seek,\n  slider,\n  time,\n} from '@videojs/skins/default/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 { VideoSkinProps } from './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 ? slider.thumb.persistent : 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.popover, 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 VideoSkinTailwind(props: VideoSkinProps): 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.root}>\n            <div className={bufferingIndicator.container}>\n              <SpinnerIcon className={icon} />\n            </div>\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          <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\n          <Time.Group className={time.group}>\n            <Time.Value type=\"current\" className={time.current} />\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                <Slider.Thumbnail className={preview.thumbnail} />\n                <TimeSlider.Value type=\"pointer\" className={preview.timestamp} />\n                <SpinnerIcon className={cn(icon, preview.spinner)} />\n              </div>\n            </TimeSlider.Root>\n            <Time.Value type=\"duration\" className={time.duration} />\n          </Time.Group>\n\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        </Tooltip.Provider>\n      </Controls.Root>\n\n      <div className={overlay} />\n    </Container>\n  );\n}\n"],"mappings":"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"}

package/dist/default/skins/dist/default/default/tailwind/audio.tailwind.js

@@ -0,0 +1,41 @@
+import { iconState } from "../../shared/tailwind/icon-state.js";
+import { bufferingIndicator as bufferingIndicator$1 } from "./components/buffering.js";
+import { controls as controls$1 } from "./components/controls.js";
+import { error as error$1 } from "./components/error.js";
+import { popup as popup$1 } from "./components/popup.js";
+import { root as root$1 } from "./components/root.js";
+import { slider as slider$1 } from "./components/slider.js";
+import { surface as surface$1 } from "./components/surface.js";
+import { button } from "./components/button.js";
+import { icon, iconContainer, iconFlipped } from "./components/icon.js";
+import { playbackRate } from "./components/playback-rate.js";
+import { seek } from "./components/seek.js";
+import { time } from "./components/time.js";
+import { cn } from "@videojs/utils/style";
+
+//#region ../skins/dist/default/default/tailwind/audio.tailwind.js
+const root = cn(root$1, "[--media-text-color:var(--media-color-primary,oklch(0_0_0))]", "[--media-error-dialog-transition-duration:250ms]", "[--media-error-dialog-transition-delay:100ms]", "[--media-popup-transition-duration:100ms]", "[--media-popup-transition-timing-function:ease-out]", "motion-reduce:[--media-error-dialog-transition-duration:50ms]", "motion-reduce:[--media-error-dialog-transition-delay:0ms]", "motion-reduce:[--media-popup-transition-duration:0ms]", "dark:[--media-text-color:var(--media-color-primary,oklch(1_0_0))]");
+const surface = cn(surface$1, "bg-white/50 dark:bg-black/40", "backdrop-blur-lg backdrop-saturate-150", "ring-black/5 shadow-sm shadow-black/15", "after:ring-white/10", "[@media(prefers-reduced-transparency:reduce)]:bg-white/70 dark:[@media(prefers-reduced-transparency:reduce)]:bg-black/70", "contrast-more:bg-white/90 dark:contrast-more:bg-black/90");
+const controls = cn(controls$1, surface, "text-(--media-text-color)", "peer-data-open/error:[&_*]:invisible");
+const slider = {
+	...slider$1,
+	track: cn(slider$1.track, "bg-black/10", "dark:bg-white/20 dark:ring-1 dark:ring-black/5")
+};
+const popup = {
+	...popup$1,
+	popover: cn(surface, popup$1.popover),
+	tooltip: cn(surface, popup$1.tooltip)
+};
+const bufferingIndicator = {
+	...bufferingIndicator$1,
+	container: cn(bufferingIndicator$1.container, surface)
+};
+const error = {
+	...error$1,
+	dialog: cn("absolute inset-0 z-20 flex items-center gap-3 rounded-full px-5 pr-0.5", "bg-(--media-surface-background-color) text-(--media-text-color)", "backdrop-blur-lg backdrop-saturate-150", "transition-[opacity,filter] ease-out", "duration-(--media-error-dialog-transition-duration)", "delay-(--media-error-dialog-transition-delay)", "group-data-starting-style/error:opacity-0 group-data-starting-style/error:blur-[4px]", "group-data-ending-style/error:opacity-0 group-data-ending-style/error:blur-[4px]", "group-data-ending-style/error:delay-0"),
+	content: "flex flex-1 items-center gap-2"
+};
+
+//#endregion
+export { controls, error, popup, root, slider };
+//# sourceMappingURL=audio.tailwind.js.map

package/dist/default/skins/dist/default/default/tailwind/audio.tailwind.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"audio.tailwind.js","names":[],"sources":["../../../../../../../../skins/dist/default/default/tailwind/audio.tailwind.js"],"sourcesContent":["import { iconState } from \"../../shared/tailwind/icon-state.js\";\nimport { tooltipState } from \"../../shared/tailwind/tooltip-state.js\";\nimport { bufferingIndicator as bufferingIndicator$1 } from \"./components/buffering.js\";\nimport { controls as controls$1 } from \"./components/controls.js\";\nimport { error as error$1 } from \"./components/error.js\";\nimport { popup as popup$1 } from \"./components/popup.js\";\nimport { root as root$1 } from \"./components/root.js\";\nimport { slider as slider$1 } from \"./components/slider.js\";\nimport { surface as surface$1 } from \"./components/surface.js\";\nimport { button } from \"./components/button.js\";\nimport { icon, iconContainer, iconFlipped, iconHidden } from \"./components/icon.js\";\nimport { playbackRate } from \"./components/playback-rate.js\";\nimport { seek } from \"./components/seek.js\";\nimport { time } from \"./components/time.js\";\nimport { cn } from \"@videojs/utils/style\";\n\n//#region src/default/tailwind/audio.tailwind.ts\nconst root = cn(root$1, \"[--media-text-color:var(--media-color-primary,oklch(0_0_0))]\", \"[--media-error-dialog-transition-duration:250ms]\", \"[--media-error-dialog-transition-delay:100ms]\", \"[--media-popup-transition-duration:100ms]\", \"[--media-popup-transition-timing-function:ease-out]\", \"motion-reduce:[--media-error-dialog-transition-duration:50ms]\", \"motion-reduce:[--media-error-dialog-transition-delay:0ms]\", \"motion-reduce:[--media-popup-transition-duration:0ms]\", \"dark:[--media-text-color:var(--media-color-primary,oklch(1_0_0))]\");\nconst surface = cn(surface$1, \"bg-white/50 dark:bg-black/40\", \"backdrop-blur-lg backdrop-saturate-150\", \"ring-black/5 shadow-sm shadow-black/15\", \"after:ring-white/10\", \"[@media(prefers-reduced-transparency:reduce)]:bg-white/70 dark:[@media(prefers-reduced-transparency:reduce)]:bg-black/70\", \"contrast-more:bg-white/90 dark:contrast-more:bg-black/90\");\nconst controls = cn(controls$1, surface, \"text-(--media-text-color)\", \"peer-data-open/error:[&_*]:invisible\");\nconst slider = {\n\t...slider$1,\n\ttrack: cn(slider$1.track, \"bg-black/10\", \"dark:bg-white/20 dark:ring-1 dark:ring-black/5\")\n};\nconst popup = {\n\t...popup$1,\n\tpopover: cn(surface, popup$1.popover),\n\ttooltip: cn(surface, popup$1.tooltip)\n};\nconst bufferingIndicator = {\n\t...bufferingIndicator$1,\n\tcontainer: cn(bufferingIndicator$1.container, surface)\n};\nconst error = {\n\t...error$1,\n\tdialog: cn(\"absolute inset-0 z-20 flex items-center gap-3 rounded-full px-5 pr-0.5\", \"bg-(--media-surface-background-color) text-(--media-text-color)\", \"backdrop-blur-lg backdrop-saturate-150\", \"transition-[opacity,filter] ease-out\", \"duration-(--media-error-dialog-transition-duration)\", \"delay-(--media-error-dialog-transition-delay)\", \"group-data-starting-style/error:opacity-0 group-data-starting-style/error:blur-[4px]\", \"group-data-ending-style/error:opacity-0 group-data-ending-style/error:blur-[4px]\", \"group-data-ending-style/error:delay-0\"),\n\tcontent: \"flex flex-1 items-center gap-2\"\n};\n\n//#endregion\nexport { bufferingIndicator, button, controls, error, icon, iconContainer, iconFlipped, iconHidden, iconState, playbackRate, popup, root, seek, slider, surface, time, tooltipState };\n//# sourceMappingURL=audio.tailwind.js.map"],"mappings":";;;;;;;;;;;;;;;;AAiBA,MAAM,OAAO,GAAG,QAAQ,gEAAgE,oDAAoD,iDAAiD,6CAA6C,uDAAuD,iEAAiE,6DAA6D,yDAAyD,oEAAoE;AAC5hB,MAAM,UAAU,GAAG,WAAW,gCAAgC,0CAA0C,0CAA0C,uBAAuB,4HAA4H,2DAA2D;AAChW,MAAM,WAAW,GAAG,YAAY,SAAS,6BAA6B,uCAAuC;AAC7G,MAAM,SAAS;CACd,GAAG;CACH,OAAO,GAAG,SAAS,OAAO,eAAe,iDAAiD;CAC1F;AACD,MAAM,QAAQ;CACb,GAAG;CACH,SAAS,GAAG,SAAS,QAAQ,QAAQ;CACrC,SAAS,GAAG,SAAS,QAAQ,QAAQ;CACrC;AACD,MAAM,qBAAqB;CAC1B,GAAG;CACH,WAAW,GAAG,qBAAqB,WAAW,QAAQ;CACtD;AACD,MAAM,QAAQ;CACb,GAAG;CACH,QAAQ,GAAG,0EAA0E,mEAAmE,0CAA0C,wCAAwC,uDAAuD,iDAAiD,wFAAwF,oFAAoF,wCAAwC;CACtiB,SAAS;CACT"}

package/dist/default/skins/dist/default/default/tailwind/components/buffering.js

@@ -0,0 +1,9 @@
+//#region ../skins/dist/default/default/tailwind/components/buffering.js
+const bufferingIndicator = {
+	root: "absolute inset-0 hidden items-center justify-center pointer-events-none text-white data-visible:flex",
+	container: "p-1 rounded-full"
+};
+
+//#endregion
+export { bufferingIndicator };
+//# sourceMappingURL=buffering.js.map

package/dist/default/skins/dist/default/default/tailwind/components/buffering.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"buffering.js","names":[],"sources":["../../../../../../../../../skins/dist/default/default/tailwind/components/buffering.js"],"sourcesContent":["//#region src/default/tailwind/components/buffering.ts\nconst bufferingIndicator = {\n\troot: \"absolute inset-0 hidden items-center justify-center pointer-events-none text-white data-visible:flex\",\n\tcontainer: \"p-1 rounded-full\"\n};\n\n//#endregion\nexport { bufferingIndicator };\n//# sourceMappingURL=buffering.js.map"],"mappings":";AACA,MAAM,qBAAqB;CAC1B,MAAM;CACN,WAAW;CACX"}

package/dist/default/skins/dist/default/default/tailwind/components/button.js

@@ -0,0 +1,13 @@
+import { cn } from "@videojs/utils/style";
+
+//#region ../skins/dist/default/default/tailwind/components/button.js
+const button = {
+	base: cn("flex items-center justify-center shrink-0 border-none cursor-pointer select-none text-center touch-manipulation", "py-2 px-4 rounded-full", "outline-2 outline-transparent -outline-offset-2", "transition-[background-color,outline-offset,scale] duration-150 ease-out", "active:scale-[0.98]", "disabled:cursor-not-allowed disabled:opacity-50 disabled:grayscale", "focus-visible:outline-current focus-visible:outline-offset-2", "data-[availability=unavailable]:hidden"),
+	primary: "bg-white text-black font-medium text-shadow-none",
+	subtle: cn("bg-transparent text-inherit text-shadow-inherit", "hover:bg-current/10 hover:no-underline", "focus-visible:bg-current/10", "aria-expanded:bg-current/10"),
+	icon: cn("grid w-[2.125rem] aspect-square p-0", "active:scale-90")
+};
+
+//#endregion
+export { button };
+//# sourceMappingURL=button.js.map

package/dist/default/skins/dist/default/default/tailwind/components/button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.js","names":[],"sources":["../../../../../../../../../skins/dist/default/default/tailwind/components/button.js"],"sourcesContent":["import { cn } from \"@videojs/utils/style\";\n\n//#region src/default/tailwind/components/button.ts\nconst button = {\n\tbase: cn(\"flex items-center justify-center shrink-0 border-none cursor-pointer select-none text-center touch-manipulation\", \"py-2 px-4 rounded-full\", \"outline-2 outline-transparent -outline-offset-2\", \"transition-[background-color,outline-offset,scale] duration-150 ease-out\", \"active:scale-[0.98]\", \"disabled:cursor-not-allowed disabled:opacity-50 disabled:grayscale\", \"focus-visible:outline-current focus-visible:outline-offset-2\", \"data-[availability=unavailable]:hidden\"),\n\tprimary: \"bg-white text-black font-medium text-shadow-none\",\n\tsubtle: cn(\"bg-transparent text-inherit text-shadow-inherit\", \"hover:bg-current/10 hover:no-underline\", \"focus-visible:bg-current/10\", \"aria-expanded:bg-current/10\"),\n\ticon: cn(\"grid w-[2.125rem] aspect-square p-0\", \"active:scale-90\")\n};\n\n//#endregion\nexport { button };\n//# sourceMappingURL=button.js.map"],"mappings":";;;AAGA,MAAM,SAAS;CACd,MAAM,GAAG,mHAAmH,0BAA0B,mDAAmD,4EAA4E,uBAAuB,sEAAsE,gEAAgE,yCAAyC;CAC3d,SAAS;CACT,QAAQ,GAAG,mDAAmD,0CAA0C,+BAA+B,8BAA8B;CACrK,MAAM,GAAG,uCAAuC,kBAAkB;CAClE"}

package/dist/default/skins/dist/default/default/tailwind/components/controls.js

@@ -0,0 +1,8 @@
+import { cn } from "@videojs/utils/style";
+
+//#region ../skins/dist/default/default/tailwind/components/controls.js
+const controls = cn("peer/controls", "@container/media-controls", "p-[0.175rem] flex items-center gap-[0.075rem]", "rounded-full", "[--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_1px_0_var(--media-controls-current-shadow-color)]", "@2xl/media-root:p-1 @2xl/media-root:gap-0.5");
+
+//#endregion
+export { controls };
+//# sourceMappingURL=controls.js.map

package/dist/default/skins/dist/default/default/tailwind/components/controls.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"controls.js","names":[],"sources":["../../../../../../../../../skins/dist/default/default/tailwind/components/controls.js"],"sourcesContent":["import { cn } from \"@videojs/utils/style\";\n\n//#region src/default/tailwind/components/controls.ts\nconst controls = cn(\"peer/controls\", \"@container/media-controls\", \"p-[0.175rem] flex items-center gap-[0.075rem]\", \"rounded-full\", \"[--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_1px_0_var(--media-controls-current-shadow-color)]\", \"@2xl/media-root:p-1 @2xl/media-root:gap-0.5\");\n\n//#endregion\nexport { controls };\n//# sourceMappingURL=controls.js.map"],"mappings":";;;AAGA,MAAM,WAAW,GAAG,iBAAiB,6BAA6B,iDAAiD,gBAAgB,0GAA0G,+HAA+H,oEAAoE,8CAA8C"}

package/dist/default/skins/dist/default/default/tailwind/components/error.js

@@ -0,0 +1,15 @@
+import { cn } from "@videojs/utils/style";
+
+//#region ../skins/dist/default/default/tailwind/components/error.js
+const error = {
+	root: "peer/error group/error flex absolute inset-0 z-20 items-center justify-center outline-none",
+	dialog: cn("flex flex-col gap-3 max-w-72 p-3 rounded-[1.75rem] text-white", "transition-[opacity,scale,transform]", "duration-(--media-error-dialog-transition-duration)", "delay-(--media-error-dialog-transition-delay)", "ease-(--media-error-dialog-transition-timing-function)", "group-data-starting-style/error:opacity-0 group-data-starting-style/error:scale-50", "group-data-ending-style/error:opacity-0 group-data-ending-style/error:scale-50", "group-data-ending-style/error:delay-0"),
+	content: "flex flex-col gap-2 px-2 pt-2 pb-1.5",
+	title: "font-semibold leading-tight",
+	description: "opacity-70 wrap-anywhere",
+	actions: "flex gap-2 *:flex-1"
+};
+
+//#endregion
+export { error };
+//# sourceMappingURL=error.js.map

package/dist/default/skins/dist/default/default/tailwind/components/error.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"error.js","names":[],"sources":["../../../../../../../../../skins/dist/default/default/tailwind/components/error.js"],"sourcesContent":["import { cn } from \"@videojs/utils/style\";\n\n//#region src/default/tailwind/components/error.ts\nconst error = {\n\troot: \"peer/error group/error flex absolute inset-0 z-20 items-center justify-center outline-none\",\n\tdialog: cn(\"flex flex-col gap-3 max-w-72 p-3 rounded-[1.75rem] text-white\", \"transition-[opacity,scale,transform]\", \"duration-(--media-error-dialog-transition-duration)\", \"delay-(--media-error-dialog-transition-delay)\", \"ease-(--media-error-dialog-transition-timing-function)\", \"group-data-starting-style/error:opacity-0 group-data-starting-style/error:scale-50\", \"group-data-ending-style/error:opacity-0 group-data-ending-style/error:scale-50\", \"group-data-ending-style/error:delay-0\"),\n\tcontent: \"flex flex-col gap-2 px-2 pt-2 pb-1.5\",\n\ttitle: \"font-semibold leading-tight\",\n\tdescription: \"opacity-70 wrap-anywhere\",\n\tactions: \"flex gap-2 *:flex-1\"\n};\n\n//#endregion\nexport { error };\n//# sourceMappingURL=error.js.map"],"mappings":";;;AAGA,MAAM,QAAQ;CACb,MAAM;CACN,QAAQ,GAAG,iEAAiE,wCAAwC,uDAAuD,iDAAiD,0DAA0D,sFAAsF,kFAAkF,wCAAwC;CACte,SAAS;CACT,OAAO;CACP,aAAa;CACb,SAAS;CACT"}