@videojs/react 10.0.0-beta.10 → 10.0.0-beta.12

package/dist/dev/presets/audio/skin.js

@@ -1,4 +1,9 @@
 import { Container, usePlayer } from "../../player/context.js";
+import { AlertDialogClose } from "../../ui/alert-dialog/alert-dialog-close.js";
+import { AlertDialogPopup } from "../../ui/alert-dialog/alert-dialog-popup.js";
+import { AlertDialogTitle } from "../../ui/alert-dialog/alert-dialog-title.js";
+import { ErrorDialogDescription } from "../../ui/error-dialog/error-dialog-description.js";
+import { ErrorDialogRoot } from "../../ui/error-dialog/error-dialog-root.js";
 import { MuteButton } from "../../ui/mute-button/mute-button.js";
 import { PlayButton } from "../../ui/play-button/play-button.js";
 import { PlaybackRateButton } from "../../ui/playback-rate-button/playback-rate-button.js";
@@ -10,7 +15,6 @@ import { SliderBuffer } from "../../ui/slider/slider-buffer.js";
 import { SliderFill } from "../../ui/slider/slider-fill.js";
 import { SliderThumb } from "../../ui/slider/slider-thumb.js";
 import { SliderTrack } from "../../ui/slider/slider-track.js";
-import { Group } from "../../ui/time/time-group.js";
 import { 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";
@@ -18,7 +22,6 @@ 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 { ErrorDialog } from "../error-dialog.js";
 import PauseIcon from "../../icons/dist/react/default/pause.js";
 import PlayIcon from "../../icons/dist/react/default/play.js";
 import RestartIcon from "../../icons/dist/react/default/restart.js";
@@ -29,18 +32,8 @@ import VolumeOffIcon from "../../icons/dist/react/default/volume-off.js";
 import { forwardRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cn } from "@videojs/utils/style";
-
 //#region src/presets/audio/skin.tsx
 const SEEK_TIME = 10;
-const ERROR_CLASSNAMES = {
-	root: "media-error",
-	dialog: "media-error__dialog",
-	content: "media-error__content",
-	title: "media-error__title",
-	description: "media-error__description",
-	actions: "media-error__actions",
-	close: "media-button media-button--subtle"
-};
 const Button = forwardRef(function Button({ className, ...props }, ref) {
 	return /* @__PURE__ */ jsx("button", {
 		ref,
@@ -92,75 +85,98 @@ function AudioSkin(props) {
 		...rest,
 		children: [
 			children,
-			/* @__PURE__ */ jsx(ErrorDialog, { classNames: ERROR_CLASSNAMES }),
+			/* @__PURE__ */ jsx(ErrorDialogRoot, { children: /* @__PURE__ */ jsx(AlertDialogPopup, {
+				className: "media-error",
+				children: /* @__PURE__ */ jsxs("div", {
+					className: "media-error__dialog",
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: "media-error__content",
+						children: [/* @__PURE__ */ jsx(AlertDialogTitle, {
+							className: "media-error__title",
+							children: "Something went wrong."
+						}), /* @__PURE__ */ jsx(ErrorDialogDescription, { className: "media-error__description" })]
+					}), /* @__PURE__ */ jsx("div", {
+						className: "media-error__actions",
+						children: /* @__PURE__ */ jsx(AlertDialogClose, {
+							className: "media-button media-button--subtle",
+							children: "OK"
+						})
+					})]
+				})
+			}) }),
 			/* @__PURE__ */ jsx("div", {
 				className: "media-surface media-controls",
 				children: /* @__PURE__ */ jsxs(TooltipProvider, { children: [
-					/* @__PURE__ */ jsxs(TooltipRoot, {
-						side: "top",
-						children: [/* @__PURE__ */ jsx(TooltipTrigger, { render: /* @__PURE__ */ jsxs(PlayButton, {
-							className: "media-button--play",
-							render: /* @__PURE__ */ jsx(Button, {}),
-							children: [
-								/* @__PURE__ */ jsx(RestartIcon, { className: "media-icon media-icon--restart" }),
-								/* @__PURE__ */ jsx(PlayIcon, { className: "media-icon media-icon--play" }),
-								/* @__PURE__ */ jsx(PauseIcon, { className: "media-icon media-icon--pause" })
-							]
-						}) }), /* @__PURE__ */ jsx(TooltipPopup, {
-							className: "media-surface media-tooltip",
-							children: /* @__PURE__ */ jsx(PlayLabel, {})
-						})]
-					}),
-					/* @__PURE__ */ jsxs(TooltipRoot, {
-						side: "top",
-						children: [/* @__PURE__ */ jsx(TooltipTrigger, { render: /* @__PURE__ */ jsx(SeekButton, {
-							seconds: -SEEK_TIME,
-							className: "media-button--seek",
-							render: /* @__PURE__ */ jsx(Button, {}),
-							children: /* @__PURE__ */ jsxs("span", {
-								className: "media-icon__container",
-								children: [/* @__PURE__ */ jsx(SeekIcon, { className: "media-icon media-icon--seek media-icon--flipped" }), /* @__PURE__ */ jsx("span", {
-									className: "media-icon__label",
-									children: SEEK_TIME
+					/* @__PURE__ */ jsxs("div", {
+						className: "media-button-group",
+						children: [
+							/* @__PURE__ */ jsxs(TooltipRoot, {
+								side: "top",
+								children: [/* @__PURE__ */ jsx(TooltipTrigger, { render: /* @__PURE__ */ jsxs(PlayButton, {
+									className: "media-button--play",
+									render: /* @__PURE__ */ jsx(Button, {}),
+									children: [
+										/* @__PURE__ */ jsx(RestartIcon, { className: "media-icon media-icon--restart" }),
+										/* @__PURE__ */ jsx(PlayIcon, { className: "media-icon media-icon--play" }),
+										/* @__PURE__ */ jsx(PauseIcon, { className: "media-icon media-icon--pause" })
+									]
+								}) }), /* @__PURE__ */ jsx(TooltipPopup, {
+									className: "media-surface media-tooltip",
+									children: /* @__PURE__ */ jsx(PlayLabel, {})
 								})]
-							})
-						}) }), /* @__PURE__ */ jsxs(TooltipPopup, {
-							className: "media-surface media-tooltip",
-							children: [
-								"Seek backward ",
-								SEEK_TIME,
-								" seconds"
-							]
-						})]
-					}),
-					/* @__PURE__ */ jsxs(TooltipRoot, {
-						side: "top",
-						children: [/* @__PURE__ */ jsx(TooltipTrigger, { render: /* @__PURE__ */ jsx(SeekButton, {
-							seconds: SEEK_TIME,
-							className: "media-button--seek",
-							render: /* @__PURE__ */ jsx(Button, {}),
-							children: /* @__PURE__ */ jsxs("span", {
-								className: "media-icon__container",
-								children: [/* @__PURE__ */ jsx(SeekIcon, { className: "media-icon media-icon--seek" }), /* @__PURE__ */ jsx("span", {
-									className: "media-icon__label",
-									children: SEEK_TIME
+							}),
+							/* @__PURE__ */ jsxs(TooltipRoot, {
+								side: "top",
+								children: [/* @__PURE__ */ jsx(TooltipTrigger, { render: /* @__PURE__ */ jsx(SeekButton, {
+									seconds: -SEEK_TIME,
+									className: "media-button--seek",
+									render: /* @__PURE__ */ jsx(Button, {}),
+									children: /* @__PURE__ */ jsxs("span", {
+										className: "media-icon__container",
+										children: [/* @__PURE__ */ jsx(SeekIcon, { className: "media-icon media-icon--seek media-icon--flipped" }), /* @__PURE__ */ jsx("span", {
+											className: "media-icon__label",
+											children: SEEK_TIME
+										})]
+									})
+								}) }), /* @__PURE__ */ jsxs(TooltipPopup, {
+									className: "media-surface media-tooltip",
+									children: [
+										"Seek backward ",
+										SEEK_TIME,
+										" seconds"
+									]
+								})]
+							}),
+							/* @__PURE__ */ jsxs(TooltipRoot, {
+								side: "top",
+								children: [/* @__PURE__ */ jsx(TooltipTrigger, { render: /* @__PURE__ */ jsx(SeekButton, {
+									seconds: SEEK_TIME,
+									className: "media-button--seek",
+									render: /* @__PURE__ */ jsx(Button, {}),
+									children: /* @__PURE__ */ jsxs("span", {
+										className: "media-icon__container",
+										children: [/* @__PURE__ */ jsx(SeekIcon, { className: "media-icon media-icon--seek" }), /* @__PURE__ */ jsx("span", {
+											className: "media-icon__label",
+											children: SEEK_TIME
+										})]
+									})
+								}) }), /* @__PURE__ */ jsxs(TooltipPopup, {
+									className: "media-surface media-tooltip",
+									children: [
+										"Seek forward ",
+										SEEK_TIME,
+										" seconds"
+									]
 								})]
 							})
-						}) }), /* @__PURE__ */ jsxs(TooltipPopup, {
-							className: "media-surface media-tooltip",
-							children: [
-								"Seek forward ",
-								SEEK_TIME,
-								" seconds"
-							]
-						})]
+						]
 					}),
-					/* @__PURE__ */ jsxs(Group, {
-						className: "media-time",
+					/* @__PURE__ */ jsxs("div", {
+						className: "media-time-controls",
 						children: [
 							/* @__PURE__ */ jsx(Value, {
 								type: "current",
-								className: "media-time__value"
+								className: "media-time"
 							}),
 							/* @__PURE__ */ jsxs(TimeSliderRoot, {
 								className: "media-slider",
@@ -171,27 +187,29 @@ function AudioSkin(props) {
 							}),
 							/* @__PURE__ */ jsx(Value, {
 								type: "duration",
-								className: "media-time__value"
+								className: "media-time"
 							})
 						]
 					}),
-					/* @__PURE__ */ jsxs(TooltipRoot, {
-						side: "top",
-						children: [/* @__PURE__ */ jsx(TooltipTrigger, { render: /* @__PURE__ */ jsx(PlaybackRateButton, {
-							className: "media-button--playback-rate",
-							render: /* @__PURE__ */ jsx(Button, {})
-						}) }), /* @__PURE__ */ jsx(TooltipPopup, {
-							className: "media-surface media-tooltip",
-							children: "Toggle playback rate"
-						})]
-					}),
-					/* @__PURE__ */ jsx(VolumePopover, {})
+					/* @__PURE__ */ jsxs("div", {
+						className: "media-button-group",
+						children: [/* @__PURE__ */ jsxs(TooltipRoot, {
+							side: "top",
+							children: [/* @__PURE__ */ jsx(TooltipTrigger, { render: /* @__PURE__ */ jsx(PlaybackRateButton, {
+								className: "media-button--playback-rate",
+								render: /* @__PURE__ */ jsx(Button, {})
+							}) }), /* @__PURE__ */ jsx(TooltipPopup, {
+								className: "media-surface media-tooltip",
+								children: "Toggle playback rate"
+							})]
+						}), /* @__PURE__ */ jsx(VolumePopover, {})]
+					})
 				] })
 			})
 		]
 	});
 }
-
 //#endregion
 export { AudioSkin };
+
 //# sourceMappingURL=skin.js.map

package/dist/dev/presets/audio/skin.js.map

@@ -1 +1 @@
-{"version":3,"file":"skin.js","names":["Popover.Root","Popover.Trigger","Popover.Popup","VolumeSlider.Root","VolumeSlider.Track","VolumeSlider.Fill","VolumeSlider.Thumb","Tooltip.Provider","Tooltip.Root","Tooltip.Trigger","Tooltip.Popup","Time.Group","Time.Value","TimeSlider.Root","TimeSlider.Track","TimeSlider.Fill","TimeSlider.Buffer","TimeSlider.Thumb"],"sources":["../../../../src/presets/audio/skin.tsx"],"sourcesContent":["import {\n  PauseIcon,\n  PlayIcon,\n  RestartIcon,\n  SeekIcon,\n  VolumeHighIcon,\n  VolumeLowIcon,\n  VolumeOffIcon,\n} from '@videojs/icons/react';\nimport { cn } from '@videojs/utils/style';\nimport { type ComponentProps, forwardRef, type ReactNode } from 'react';\nimport { Container, usePlayer } from '@/player/context';\nimport { MuteButton } from '@/ui/mute-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 { Tooltip } from '@/ui/tooltip';\nimport { VolumeSlider } from '@/ui/volume-slider';\nimport { ErrorDialog } from '../error-dialog';\nimport type { BaseSkinProps } from '../types';\n\nconst SEEK_TIME = 10;\n\nconst ERROR_CLASSNAMES = {\n  root: 'media-error',\n  dialog: 'media-error__dialog',\n  content: 'media-error__content',\n  title: 'media-error__title',\n  description: 'media-error__description',\n  actions: 'media-error__actions',\n  close: 'media-button media-button--subtle',\n};\n\nexport type AudioSkinProps = BaseSkinProps;\n\nconst Button = forwardRef<HTMLButtonElement, ComponentProps<'button'>>(function Button({ className, ...props }, ref) {\n  return (\n    <button\n      ref={ref}\n      type=\"button\"\n      className={cn('media-button media-button--subtle media-button--icon', className)}\n      {...props}\n    />\n  );\n});\n\nfunction PlayLabel(): string {\n  const paused = usePlayer((s) => Boolean(s.paused));\n  const ended = usePlayer((s) => Boolean(s.ended));\n  if (ended) return 'Replay';\n  return paused ? 'Play' : 'Pause';\n}\n\nfunction VolumePopover(): ReactNode {\n  const volumeUnsupported = usePlayer((s) => s.volumeAvailability === 'unsupported');\n\n  const muteButton = (\n    <MuteButton className=\"media-button--mute\" render={<Button />}>\n      <VolumeOffIcon className=\"media-icon media-icon--volume-off\" />\n      <VolumeLowIcon className=\"media-icon media-icon--volume-low\" />\n      <VolumeHighIcon className=\"media-icon media-icon--volume-high\" />\n    </MuteButton>\n  );\n\n  if (volumeUnsupported) return muteButton;\n\n  return (\n    <Popover.Root openOnHover delay={200} closeDelay={100} side=\"top\">\n      <Popover.Trigger render={muteButton} />\n      <Popover.Popup className=\"media-surface media-popover media-popover--volume\">\n        <VolumeSlider.Root className=\"media-slider\" orientation=\"vertical\" thumbAlignment=\"edge\">\n          <VolumeSlider.Track className=\"media-slider__track\">\n            <VolumeSlider.Fill className=\"media-slider__fill\" />\n          </VolumeSlider.Track>\n          <VolumeSlider.Thumb className=\"media-slider__thumb media-slider__thumb--persistent\" />\n        </VolumeSlider.Root>\n      </Popover.Popup>\n    </Popover.Root>\n  );\n}\n\nexport function AudioSkin(props: AudioSkinProps): ReactNode {\n  const { children, className, ...rest } = props;\n\n  return (\n    <Container className={cn('media-default-skin media-default-skin--audio', className)} {...rest}>\n      {children}\n\n      <ErrorDialog classNames={ERROR_CLASSNAMES} />\n\n      <div className=\"media-surface media-controls\">\n        <Tooltip.Provider>\n          <Tooltip.Root side=\"top\">\n            <Tooltip.Trigger\n              render={\n                <PlayButton className=\"media-button--play\" render={<Button />}>\n                  <RestartIcon className=\"media-icon media-icon--restart\" />\n                  <PlayIcon className=\"media-icon media-icon--play\" />\n                  <PauseIcon className=\"media-icon media-icon--pause\" />\n                </PlayButton>\n              }\n            />\n            <Tooltip.Popup className=\"media-surface media-tooltip\">\n              <PlayLabel />\n            </Tooltip.Popup>\n          </Tooltip.Root>\n\n          <Tooltip.Root side=\"top\">\n            <Tooltip.Trigger\n              render={\n                <SeekButton seconds={-SEEK_TIME} className=\"media-button--seek\" render={<Button />}>\n                  <span className=\"media-icon__container\">\n                    <SeekIcon className=\"media-icon media-icon--seek media-icon--flipped\" />\n                    <span className=\"media-icon__label\">{SEEK_TIME}</span>\n                  </span>\n                </SeekButton>\n              }\n            />\n            <Tooltip.Popup className=\"media-surface media-tooltip\">Seek backward {SEEK_TIME} seconds</Tooltip.Popup>\n          </Tooltip.Root>\n\n          <Tooltip.Root side=\"top\">\n            <Tooltip.Trigger\n              render={\n                <SeekButton seconds={SEEK_TIME} className=\"media-button--seek\" render={<Button />}>\n                  <span className=\"media-icon__container\">\n                    <SeekIcon className=\"media-icon media-icon--seek\" />\n                    <span className=\"media-icon__label\">{SEEK_TIME}</span>\n                  </span>\n                </SeekButton>\n              }\n            />\n            <Tooltip.Popup className=\"media-surface media-tooltip\">Seek forward {SEEK_TIME} seconds</Tooltip.Popup>\n          </Tooltip.Root>\n\n          <Time.Group className=\"media-time\">\n            <Time.Value type=\"current\" className=\"media-time__value\" />\n            <TimeSlider.Root className=\"media-slider\">\n              <TimeSlider.Track className=\"media-slider__track\">\n                <TimeSlider.Fill className=\"media-slider__fill\" />\n                <TimeSlider.Buffer className=\"media-slider__buffer\" />\n              </TimeSlider.Track>\n              <TimeSlider.Thumb className=\"media-slider__thumb\" />\n            </TimeSlider.Root>\n            <Time.Value type=\"duration\" className=\"media-time__value\" />\n          </Time.Group>\n\n          <Tooltip.Root side=\"top\">\n            <Tooltip.Trigger\n              render={<PlaybackRateButton className=\"media-button--playback-rate\" render={<Button />} />}\n            />\n            <Tooltip.Popup className=\"media-surface media-tooltip\">Toggle playback rate</Tooltip.Popup>\n          </Tooltip.Root>\n\n          <VolumePopover />\n        </Tooltip.Provider>\n      </div>\n    </Container>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"skin.js","names":["Popover.Root","Popover.Trigger","Popover.Popup","VolumeSlider.Root","VolumeSlider.Track","VolumeSlider.Fill","VolumeSlider.Thumb","ErrorDialog.Root","ErrorDialog.Popup","ErrorDialog.Title","ErrorDialog.Description","ErrorDialog.Close","Tooltip.Provider","Tooltip.Root","Tooltip.Trigger","Tooltip.Popup","Time.Value","TimeSlider.Root","TimeSlider.Track","TimeSlider.Fill","TimeSlider.Buffer","TimeSlider.Thumb"],"sources":["../../../../src/presets/audio/skin.tsx"],"sourcesContent":["import {\n  PauseIcon,\n  PlayIcon,\n  RestartIcon,\n  SeekIcon,\n  VolumeHighIcon,\n  VolumeLowIcon,\n  VolumeOffIcon,\n} from '@videojs/icons/react';\nimport { cn } from '@videojs/utils/style';\nimport { type ComponentProps, forwardRef, type ReactNode } from 'react';\nimport { Container, usePlayer } from '@/player/context';\nimport { ErrorDialog } from '@/ui/error-dialog';\nimport { MuteButton } from '@/ui/mute-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 { Tooltip } from '@/ui/tooltip';\nimport { VolumeSlider } from '@/ui/volume-slider';\nimport type { BaseSkinProps } from '../types';\n\nconst SEEK_TIME = 10;\n\nexport type AudioSkinProps = BaseSkinProps;\n\nconst Button = forwardRef<HTMLButtonElement, ComponentProps<'button'>>(function Button({ className, ...props }, ref) {\n  return (\n    <button\n      ref={ref}\n      type=\"button\"\n      className={cn('media-button media-button--subtle media-button--icon', className)}\n      {...props}\n    />\n  );\n});\n\nfunction PlayLabel(): string {\n  const paused = usePlayer((s) => Boolean(s.paused));\n  const ended = usePlayer((s) => Boolean(s.ended));\n  if (ended) return 'Replay';\n  return paused ? 'Play' : 'Pause';\n}\n\nfunction VolumePopover(): ReactNode {\n  const volumeUnsupported = usePlayer((s) => s.volumeAvailability === 'unsupported');\n\n  const muteButton = (\n    <MuteButton className=\"media-button--mute\" render={<Button />}>\n      <VolumeOffIcon className=\"media-icon media-icon--volume-off\" />\n      <VolumeLowIcon className=\"media-icon media-icon--volume-low\" />\n      <VolumeHighIcon className=\"media-icon media-icon--volume-high\" />\n    </MuteButton>\n  );\n\n  if (volumeUnsupported) return muteButton;\n\n  return (\n    <Popover.Root openOnHover delay={200} closeDelay={100} side=\"top\">\n      <Popover.Trigger render={muteButton} />\n      <Popover.Popup className=\"media-surface media-popover media-popover--volume\">\n        <VolumeSlider.Root className=\"media-slider\" orientation=\"vertical\" thumbAlignment=\"edge\">\n          <VolumeSlider.Track className=\"media-slider__track\">\n            <VolumeSlider.Fill className=\"media-slider__fill\" />\n          </VolumeSlider.Track>\n          <VolumeSlider.Thumb className=\"media-slider__thumb media-slider__thumb--persistent\" />\n        </VolumeSlider.Root>\n      </Popover.Popup>\n    </Popover.Root>\n  );\n}\n\nexport function AudioSkin(props: AudioSkinProps): ReactNode {\n  const { children, className, ...rest } = props;\n\n  return (\n    <Container className={cn('media-default-skin media-default-skin--audio', className)} {...rest}>\n      {children}\n\n      <ErrorDialog.Root>\n        <ErrorDialog.Popup className=\"media-error\">\n          <div className=\"media-error__dialog\">\n            <div className=\"media-error__content\">\n              <ErrorDialog.Title className=\"media-error__title\">Something went wrong.</ErrorDialog.Title>\n              <ErrorDialog.Description className=\"media-error__description\" />\n            </div>\n            <div className=\"media-error__actions\">\n              <ErrorDialog.Close className=\"media-button media-button--subtle\">OK</ErrorDialog.Close>\n            </div>\n          </div>\n        </ErrorDialog.Popup>\n      </ErrorDialog.Root>\n\n      <div className=\"media-surface media-controls\">\n        <Tooltip.Provider>\n          <div className=\"media-button-group\">\n            <Tooltip.Root side=\"top\">\n              <Tooltip.Trigger\n                render={\n                  <PlayButton className=\"media-button--play\" render={<Button />}>\n                    <RestartIcon className=\"media-icon media-icon--restart\" />\n                    <PlayIcon className=\"media-icon media-icon--play\" />\n                    <PauseIcon className=\"media-icon media-icon--pause\" />\n                  </PlayButton>\n                }\n              />\n              <Tooltip.Popup className=\"media-surface media-tooltip\">\n                <PlayLabel />\n              </Tooltip.Popup>\n            </Tooltip.Root>\n\n            <Tooltip.Root side=\"top\">\n              <Tooltip.Trigger\n                render={\n                  <SeekButton seconds={-SEEK_TIME} className=\"media-button--seek\" render={<Button />}>\n                    <span className=\"media-icon__container\">\n                      <SeekIcon className=\"media-icon media-icon--seek media-icon--flipped\" />\n                      <span className=\"media-icon__label\">{SEEK_TIME}</span>\n                    </span>\n                  </SeekButton>\n                }\n              />\n              <Tooltip.Popup className=\"media-surface media-tooltip\">Seek backward {SEEK_TIME} seconds</Tooltip.Popup>\n            </Tooltip.Root>\n\n            <Tooltip.Root side=\"top\">\n              <Tooltip.Trigger\n                render={\n                  <SeekButton seconds={SEEK_TIME} className=\"media-button--seek\" render={<Button />}>\n                    <span className=\"media-icon__container\">\n                      <SeekIcon className=\"media-icon media-icon--seek\" />\n                      <span className=\"media-icon__label\">{SEEK_TIME}</span>\n                    </span>\n                  </SeekButton>\n                }\n              />\n              <Tooltip.Popup className=\"media-surface media-tooltip\">Seek forward {SEEK_TIME} seconds</Tooltip.Popup>\n            </Tooltip.Root>\n          </div>\n\n          <div className=\"media-time-controls\">\n            <Time.Value type=\"current\" className=\"media-time\" />\n            <TimeSlider.Root className=\"media-slider\">\n              <TimeSlider.Track className=\"media-slider__track\">\n                <TimeSlider.Fill className=\"media-slider__fill\" />\n                <TimeSlider.Buffer className=\"media-slider__buffer\" />\n              </TimeSlider.Track>\n              <TimeSlider.Thumb className=\"media-slider__thumb\" />\n            </TimeSlider.Root>\n            <Time.Value type=\"duration\" className=\"media-time\" />\n          </div>\n\n          <div className=\"media-button-group\">\n            <Tooltip.Root side=\"top\">\n              <Tooltip.Trigger\n                render={<PlaybackRateButton className=\"media-button--playback-rate\" render={<Button />} />}\n              />\n              <Tooltip.Popup className=\"media-surface media-tooltip\">Toggle playback rate</Tooltip.Popup>\n            </Tooltip.Root>\n\n            <VolumePopover />\n          </div>\n        </Tooltip.Provider>\n      </div>\n    </Container>\n  );\n}\n"],"mappings":"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"}

package/dist/dev/presets/audio/skin.tailwind.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"skin.tailwind.d.ts","names":[],"sources":["../../../../src/presets/audio/skin.tailwind.tsx"],"mappings":";;;;iBAyIgB,iBAAA,CAAkB,KAAA,EAAO,cAAA,GAAiB,SAAA"}
+{"version":3,"file":"skin.tailwind.d.ts","names":[],"sources":["../../../../src/presets/audio/skin.tailwind.tsx"],"mappings":";;;;iBAgIgB,iBAAA,CAAkB,KAAA,EAAO,cAAA,GAAiB,SAAA"}

package/dist/dev/presets/audio/skin.tailwind.js

@@ -1,4 +1,9 @@
 import { Container, usePlayer } from "../../player/context.js";
+import { AlertDialogClose } from "../../ui/alert-dialog/alert-dialog-close.js";
+import { AlertDialogPopup } from "../../ui/alert-dialog/alert-dialog-popup.js";
+import { AlertDialogTitle } from "../../ui/alert-dialog/alert-dialog-title.js";
+import { ErrorDialogDescription } from "../../ui/error-dialog/error-dialog-description.js";
+import { ErrorDialogRoot } from "../../ui/error-dialog/error-dialog-root.js";
 import { MuteButton } from "../../ui/mute-button/mute-button.js";
 import { PlayButton } from "../../ui/play-button/play-button.js";
 import { PlaybackRateButton } from "../../ui/playback-rate-button/playback-rate-button.js";
@@ -10,7 +15,6 @@ 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 { SliderTrack as SliderTrack$1 } from "../../ui/slider/slider-track.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";
@@ -18,9 +22,9 @@ 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 { 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 { buttonGroup } from "../../skins/dist/default/default/tailwind/components/button-group.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";
@@ -36,18 +40,8 @@ import VolumeOffIcon from "../../icons/dist/react/default/volume-off.js";
 import { forwardRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cn } from "@videojs/utils/style";
-
 //#region src/presets/audio/skin.tailwind.tsx
 const SEEK_TIME = 10;
-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.subtle)
-};
 const Button = forwardRef(function Button({ className, ...props }, ref) {
 	return /* @__PURE__ */ jsx("button", {
 		ref,
@@ -137,70 +131,91 @@ function AudioSkinTailwind(props) {
 		...rest,
 		children: [
 			children,
-			/* @__PURE__ */ jsx(ErrorDialog, { classNames: ERROR_CLASSNAMES }),
+			/* @__PURE__ */ jsx(ErrorDialogRoot, { children: /* @__PURE__ */ jsx(AlertDialogPopup, {
+				className: error.root,
+				children: /* @__PURE__ */ jsxs("div", {
+					className: error.dialog,
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: error.content,
+						children: [/* @__PURE__ */ jsx(AlertDialogTitle, {
+							className: error.title,
+							children: "Something went wrong."
+						}), /* @__PURE__ */ jsx(ErrorDialogDescription, { className: error.description })]
+					}), /* @__PURE__ */ jsx("div", {
+						className: error.actions,
+						children: /* @__PURE__ */ jsx(AlertDialogClose, {
+							className: cn(button.base, button.subtle),
+							children: "OK"
+						})
+					})]
+				})
+			}) }),
 			/* @__PURE__ */ jsx("div", {
 				className: controls,
 				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", {
-									className: cn(seek.label, seek.labelBackward),
-									children: SEEK_TIME
+					/* @__PURE__ */ jsxs("div", {
+						className: buttonGroup,
+						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(TooltipPopup, {
-							className: cn(popup.tooltip),
-							children: [
-								"Seek backward ",
-								SEEK_TIME,
-								" seconds"
-							]
-						})]
-					}),
-					/* @__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", {
-									className: cn(seek.label, seek.labelForward),
-									children: SEEK_TIME
+							}),
+							/* @__PURE__ */ jsxs(TooltipRoot, {
+								side: "top",
+								children: [/* @__PURE__ */ jsx(TooltipTrigger, { render: /* @__PURE__ */ jsx(SeekButton, {
+									seconds: -SEEK_TIME,
+									render: /* @__PURE__ */ jsx(Button, {}),
+									children: /* @__PURE__ */ jsxs("span", {
+										className: iconContainer,
+										children: [/* @__PURE__ */ jsx(SeekIcon, { className: cn(icon, iconFlipped) }), /* @__PURE__ */ jsx("span", {
+											className: cn(seek.label, seek.labelBackward),
+											children: SEEK_TIME
+										})]
+									})
+								}) }), /* @__PURE__ */ jsxs(TooltipPopup, {
+									className: cn(popup.tooltip),
+									children: [
+										"Seek backward ",
+										SEEK_TIME,
+										" seconds"
+									]
+								})]
+							}),
+							/* @__PURE__ */ jsxs(TooltipRoot, {
+								side: "top",
+								children: [/* @__PURE__ */ jsx(TooltipTrigger, { render: /* @__PURE__ */ jsx(SeekButton, {
+									seconds: SEEK_TIME,
+									render: /* @__PURE__ */ jsx(Button, {}),
+									children: /* @__PURE__ */ jsxs("span", {
+										className: iconContainer,
+										children: [/* @__PURE__ */ jsx(SeekIcon, { className: icon }), /* @__PURE__ */ jsx("span", {
+											className: cn(seek.label, seek.labelForward),
+											children: SEEK_TIME
+										})]
+									})
+								}) }), /* @__PURE__ */ jsxs(TooltipPopup, {
+									className: cn(popup.tooltip),
+									children: [
+										"Seek forward ",
+										SEEK_TIME,
+										" seconds"
+									]
 								})]
 							})
-						}) }), /* @__PURE__ */ jsxs(TooltipPopup, {
-							className: cn(popup.tooltip),
-							children: [
-								"Seek forward ",
-								SEEK_TIME,
-								" seconds"
-							]
-						})]
+						]
 					}),
-					/* @__PURE__ */ jsxs(Group, {
+					/* @__PURE__ */ jsxs("div", {
 						className: time.group,
 						children: [
 							/* @__PURE__ */ jsx(Value, {
@@ -220,23 +235,25 @@ function AudioSkinTailwind(props) {
 							})
 						]
 					}),
-					/* @__PURE__ */ jsxs(TooltipRoot, {
-						side: "top",
-						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("div", {
+						className: buttonGroup,
+						children: [/* @__PURE__ */ jsxs(TooltipRoot, {
+							side: "top",
+							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, {})]
+					})
 				] })
 			})
 		]
 	});
 }
-
 //#endregion
 export { AudioSkinTailwind };
+
 //# sourceMappingURL=skin.tailwind.js.map

package/dist/dev/presets/audio/skin.tailwind.js.map

@@ -1 +1 @@
-{"version":3,"file":"skin.tailwind.js","names":["Popover.Root","Popover.Trigger","Popover.Popup","VolumeSlider.Root","VolumeSlider.Track","VolumeSlider.Fill","VolumeSlider.Thumb","Tooltip.Provider","Tooltip.Root","Tooltip.Trigger","Tooltip.Popup","Time.Group","Time.Value","TimeSlider.Root","TimeSlider.Track","TimeSlider.Fill","TimeSlider.Buffer","TimeSlider.Thumb"],"sources":["../../../../src/presets/audio/skin.tailwind.tsx"],"sourcesContent":["import {\n  PauseIcon,\n  PlayIcon,\n  RestartIcon,\n  SeekIcon,\n  VolumeHighIcon,\n  VolumeLowIcon,\n  VolumeOffIcon,\n} from '@videojs/icons/react';\nimport {\n  button,\n  controls,\n  error,\n  icon,\n  iconContainer,\n  iconFlipped,\n  iconState,\n  playbackRate,\n  popup,\n  root,\n  seek,\n  slider,\n  time,\n} from '@videojs/skins/default/tailwind/audio.tailwind';\nimport { cn } from '@videojs/utils/style';\nimport { type ComponentProps, forwardRef, type ReactNode } from 'react';\nimport { Container, usePlayer } from '@/player/context';\nimport { MuteButton } from '@/ui/mute-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 { Tooltip } from '@/ui/tooltip';\nimport { VolumeSlider } from '@/ui/volume-slider';\nimport { ErrorDialog } from '../error-dialog';\nimport type { AudioSkinProps } 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.subtle),\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 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 AudioSkinTailwind(props: AudioSkinProps): ReactNode {\n  const { children, className, ...rest } = props;\n\n  return (\n    <Container className={cn(root, className)} {...rest}>\n      {children}\n\n      <ErrorDialog classNames={ERROR_CLASSNAMES} />\n\n      <div className={controls}>\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            </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        </Tooltip.Provider>\n      </div>\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","ErrorDialog.Root","ErrorDialog.Popup","ErrorDialog.Title","ErrorDialog.Description","ErrorDialog.Close","Tooltip.Provider","Tooltip.Root","Tooltip.Trigger","Tooltip.Popup","Time.Value","TimeSlider.Root","TimeSlider.Track","TimeSlider.Fill","TimeSlider.Buffer","TimeSlider.Thumb"],"sources":["../../../../src/presets/audio/skin.tailwind.tsx"],"sourcesContent":["import {\n  PauseIcon,\n  PlayIcon,\n  RestartIcon,\n  SeekIcon,\n  VolumeHighIcon,\n  VolumeLowIcon,\n  VolumeOffIcon,\n} from '@videojs/icons/react';\nimport {\n  button,\n  buttonGroup,\n  controls,\n  error,\n  icon,\n  iconContainer,\n  iconFlipped,\n  iconState,\n  playbackRate,\n  popup,\n  root,\n  seek,\n  slider,\n  time,\n} from '@videojs/skins/default/tailwind/audio.tailwind';\nimport { cn } from '@videojs/utils/style';\nimport { type ComponentProps, forwardRef, type ReactNode } from 'react';\nimport { Container, usePlayer } from '@/player/context';\nimport { ErrorDialog } from '@/ui/error-dialog';\nimport { MuteButton } from '@/ui/mute-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 { Tooltip } from '@/ui/tooltip';\nimport { VolumeSlider } from '@/ui/volume-slider';\nimport type { AudioSkinProps } from './skin';\n\nconst SEEK_TIME = 10;\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 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 AudioSkinTailwind(props: AudioSkinProps): ReactNode {\n  const { children, className, ...rest } = props;\n\n  return (\n    <Container className={cn(root, className)} {...rest}>\n      {children}\n\n      <ErrorDialog.Root>\n        <ErrorDialog.Popup className={error.root}>\n          <div className={error.dialog}>\n            <div className={error.content}>\n              <ErrorDialog.Title className={error.title}>Something went wrong.</ErrorDialog.Title>\n              <ErrorDialog.Description className={error.description} />\n            </div>\n            <div className={error.actions}>\n              <ErrorDialog.Close className={cn(button.base, button.subtle)}>OK</ErrorDialog.Close>\n            </div>\n          </div>\n        </ErrorDialog.Popup>\n      </ErrorDialog.Root>\n\n      <div className={controls}>\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} 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} 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.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            </TimeSlider.Root>\n            <Time.Value type=\"duration\" className={time.duration} />\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          </div>\n        </Tooltip.Provider>\n      </div>\n    </Container>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwCA,MAAM,YAAY;AAIlB,MAAM,SAAS,WAAwD,SAAS,OAAO,EAAE,WAAW,GAAG,SAAS,KAAK;AACnH,QACE,oBAAC,UAAD;EAAa;EAAK,MAAK;EAAS,WAAW,GAAG,OAAO,MAAM,OAAO,QAAQ,OAAO,MAAM,UAAU;EAAE,GAAI;EAAS,CAAA;EAElH;AAEF,MAAM,aAAa,WAAkD,SAAS,WAAW,EAAE,WAAW,GAAG,SAAS,KAAK;AACrH,QAAO,oBAAC,OAAD;EAAU;EAAK,WAAW,GAAG,OAAO,MAAM,UAAU;EAAE,GAAI;EAAS,CAAA;EAC1E;AAEF,MAAM,cAAc,WAAkD,SAAS,YAC7E,EAAE,WAAW,GAAG,SAChB,KACA;AACA,QAAO,oBAAC,OAAD;EAAU;EAAK,WAAW,GAAG,OAAO,OAAO,UAAU;EAAE,GAAI;EAAS,CAAA;EAC3E;AAEF,MAAM,aAAa,WAAiF,SAAS,WAC3G,EAAE,OAAO,QAAQ,WAAW,GAAG,SAC/B,KACA;AACA,QACE,oBAAC,OAAD;EACO;EACL,WAAW,GAAG,OAAO,KAAK,MAAM,SAAS,SAAS,OAAO,KAAK,OAAO,OAAO,KAAK,QAAQ,UAAU;EACnG,GAAI;EACJ,CAAA;EAEJ;AAEF,MAAM,eAAe,WAAkD,SAAS,aAAa,OAAO,KAAK;AACvG,QAAO,oBAAC,YAAD;EAAY,MAAK;EAAc;EAAK,GAAI;EAAS,CAAA;EACxD;AAEF,MAAM,cAAc,WAA6E,SAAS,YACxG,EAAE,YAAY,WAAW,GAAG,SAC5B,KACA;AACA,QACE,oBAAC,OAAD;EACO;EACL,WAAW,GAAG,OAAO,MAAM,MAAM,aAAa,OAAO,MAAM,aAAa,OAAO,MAAM,aAAa,UAAU;EAC5G,GAAI;EACJ,CAAA;EAEJ;AAEF,SAAS,YAAoB;CAC3B,MAAM,SAAS,WAAW,MAAM,QAAQ,EAAE,OAAO,CAAC;AAElD,KADc,WAAW,MAAM,QAAQ,EAAE,MAAM,CAAC,CACrC,QAAO;AAClB,QAAO,SAAS,SAAS;;AAG3B,SAAS,gBAA2B;CAClC,MAAM,oBAAoB,WAAW,MAAM,EAAE,uBAAuB,cAAc;CAElF,MAAM,aACJ,qBAAC,YAAD;EAAY,WAAW,UAAU,KAAK;EAAQ,QAAQ,oBAAC,QAAD,EAAU,CAAA;YAAhE;GACE,oBAAC,eAAD,EAAe,WAAW,GAAG,MAAM,UAAU,KAAK,UAAU,EAAI,CAAA;GAChE,oBAAC,eAAD,EAAe,WAAW,GAAG,MAAM,UAAU,KAAK,UAAU,EAAI,CAAA;GAChE,oBAAC,gBAAD,EAAgB,WAAW,GAAG,MAAM,UAAU,KAAK,WAAW,EAAI,CAAA;GACvD;;AAGf,KAAI,kBAAmB,QAAO;AAE9B,QACE,qBAACA,aAAD;EAAc,aAAA;EAAY,OAAO;EAAK,YAAY;EAAK,MAAK;YAA5D,CACE,oBAACC,gBAAD,EAAiB,QAAQ,YAAc,CAAA,EACvC,oBAACC,cAAD;GAAe,WAAW,GAAG,MAAM,SAAS,MAAM,OAAO;aACvD,qBAACC,kBAAD;IAAmB,aAAY;IAAW,gBAAe;IAAO,QAAQ,oBAAC,YAAD,EAAc,CAAA;cAAtF,CACE,oBAACC,eAAD;KAAoB,QAAQ,oBAAC,aAAD,EAAe,CAAA;eACzC,oBAACC,cAAD,EAAmB,QAAQ,oBAAC,YAAD,EAAc,CAAA,EAAI,CAAA;KAC1B,CAAA,EACrB,oBAACC,eAAD,EAAoB,SAAS,UAAU,oBAAC,aAAD;KAAa,YAAA;KAAW,GAAI;KAAS,CAAA,EAAI,CAAA,CAC9D;;GACN,CAAA,CACH;;;AAMnB,SAAgB,kBAAkB,OAAkC;CAClE,MAAM,EAAE,UAAU,WAAW,GAAG,SAAS;AAEzC,QACE,qBAAC,WAAD;EAAW,WAAW,GAAG,MAAM,UAAU;EAAE,GAAI;YAA/C;GACG;GAED,oBAACC,iBAAD,EAAA,UACE,oBAACC,kBAAD;IAAmB,WAAW,MAAM;cAClC,qBAAC,OAAD;KAAK,WAAW,MAAM;eAAtB,CACE,qBAAC,OAAD;MAAK,WAAW,MAAM;gBAAtB,CACE,oBAACC,kBAAD;OAAmB,WAAW,MAAM;iBAAO;OAAyC,CAAA,EACpF,oBAACC,wBAAD,EAAyB,WAAW,MAAM,aAAe,CAAA,CACrD;SACN,oBAAC,OAAD;MAAK,WAAW,MAAM;gBACpB,oBAACC,kBAAD;OAAmB,WAAW,GAAG,OAAO,MAAM,OAAO,OAAO;iBAAE;OAAsB,CAAA;MAChF,CAAA,CACF;;IACY,CAAA,EACH,CAAA;GAEnB,oBAAC,OAAD;IAAK,WAAW;cACd,qBAACC,iBAAD,EAAA,UAAA;KACE,qBAAC,OAAD;MAAK,WAAW;gBAAhB;OACE,qBAACC,aAAD;QAAc,MAAK;kBAAnB,CACE,oBAACC,gBAAD,EACE,QACE,qBAAC,YAAD;SAAY,WAAW,UAAU,KAAK;SAAQ,QAAQ,oBAAC,QAAD,EAAU,CAAA;mBAAhE;UACE,oBAAC,aAAD,EAAa,WAAW,GAAG,MAAM,UAAU,KAAK,QAAQ,EAAI,CAAA;UAC5D,oBAAC,UAAD,EAAU,WAAW,GAAG,MAAM,UAAU,KAAK,KAAK,EAAI,CAAA;UACtD,oBAAC,WAAD,EAAW,WAAW,GAAG,MAAM,UAAU,KAAK,MAAM,EAAI,CAAA;UAC7C;YAEf,CAAA,EACF,oBAACC,cAAD;SAAe,WAAW,GAAG,MAAM,QAAQ;mBACzC,oBAAC,WAAD,EAAa,CAAA;SACC,CAAA,CACH;;OAEf,qBAACF,aAAD;QAAc,MAAK;kBAAnB,CACE,oBAACC,gBAAD,EACE,QACE,oBAAC,YAAD;SAAY,SAAS,CAAC;SAAW,QAAQ,oBAAC,QAAD,EAAU,CAAA;mBACjD,qBAAC,QAAD;UAAM,WAAW;oBAAjB,CACE,oBAAC,UAAD,EAAU,WAAW,GAAG,MAAM,YAAY,EAAI,CAAA,EAC9C,oBAAC,QAAD;WAAM,WAAW,GAAG,KAAK,OAAO,KAAK,cAAc;qBAAG;WAAiB,CAAA,CAClE;;SACI,CAAA,EAEf,CAAA,EACF,qBAACC,cAAD;SAAe,WAAW,GAAG,MAAM,QAAQ;mBAA3C;UAA6C;UAAe;UAAU;UAAwB;WACjF;;OAEf,qBAACF,aAAD;QAAc,MAAK;kBAAnB,CACE,oBAACC,gBAAD,EACE,QACE,oBAAC,YAAD;SAAY,SAAS;SAAW,QAAQ,oBAAC,QAAD,EAAU,CAAA;mBAChD,qBAAC,QAAD;UAAM,WAAW;oBAAjB,CACE,oBAAC,UAAD,EAAU,WAAW,MAAQ,CAAA,EAC7B,oBAAC,QAAD;WAAM,WAAW,GAAG,KAAK,OAAO,KAAK,aAAa;qBAAG;WAAiB,CAAA,CACjE;;SACI,CAAA,EAEf,CAAA,EACF,qBAACC,cAAD;SAAe,WAAW,GAAG,MAAM,QAAQ;mBAA3C;UAA6C;UAAc;UAAU;UAAwB;WAChF;;OACX;;KAEN,qBAAC,OAAD;MAAK,WAAW,KAAK;gBAArB;OACE,oBAACC,OAAD;QAAY,MAAK;QAAU,WAAW,KAAK;QAAW,CAAA;OACtD,qBAACC,gBAAD;QAAiB,QAAQ,oBAAC,YAAD,EAAc,CAAA;kBAAvC,CACE,qBAACC,eAAD;SAAkB,QAAQ,oBAAC,aAAD,EAAe,CAAA;mBAAzC,CACE,oBAACC,cAAD,EAAiB,QAAQ,oBAAC,YAAD,EAAc,CAAA,EAAI,CAAA,EAC3C,oBAACC,gBAAD,EAAmB,QAAQ,oBAAC,cAAD,EAAgB,CAAA,EAAI,CAAA,CAC9B;YACnB,oBAACC,eAAD,EAAkB,QAAQ,oBAAC,aAAD,EAAe,CAAA,EAAI,CAAA,CAC7B;;OAClB,oBAACL,OAAD;QAAY,MAAK;QAAW,WAAW,KAAK;QAAY,CAAA;OACpD;;KAEN,qBAAC,OAAD;MAAK,WAAW;gBAAhB,CACE,qBAACH,aAAD;OAAc,MAAK;iBAAnB,CACE,oBAACC,gBAAD,EAAiB,QAAQ,oBAAC,oBAAD;QAAoB,WAAW,aAAa;QAAQ,QAAQ,oBAAC,QAAD,EAAU,CAAA;QAAI,CAAA,EAAI,CAAA,EACvG,oBAACC,cAAD;QAAe,WAAW,GAAG,MAAM,QAAQ;kBAAE;QAAoC,CAAA,CACpE;UAEf,oBAAC,eAAD,EAAiB,CAAA,CACb;;KACW,EAAA,CAAA;IACf,CAAA;GACI"}

package/dist/dev/presets/background/index.js

@@ -1,5 +1,4 @@
 import { BackgroundVideo } from "../../media/background-video/index.js";
 import { BackgroundVideoSkin } from "./skin.js";
 import { backgroundFeatures } from "@videojs/core/dom";
-
-export { BackgroundVideo, BackgroundVideoSkin, backgroundFeatures };
+export { BackgroundVideo, BackgroundVideoSkin, backgroundFeatures };

package/dist/dev/presets/background/skin.js

@@ -1,6 +1,5 @@
 import { jsx } from "react/jsx-runtime";
 import { cn } from "@videojs/utils/style";
-
 //#region src/presets/background/skin.tsx
 function BackgroundVideoSkin(props) {
 	const { children, className, ...rest } = props;
@@ -10,7 +9,7 @@ function BackgroundVideoSkin(props) {
 		children
 	});
 }
-
 //#endregion
 export { BackgroundVideoSkin };
+
 //# sourceMappingURL=skin.js.map