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

package/dist/dev/presets/video/skin.d.ts

@@ -1,8 +1,8 @@
-import { BaseSkinProps } from "../types.js";
+import { BaseVideoSkinProps } from "../types.js";
 import { ReactNode } from "react";
 
 //#region src/presets/video/skin.d.ts
-type VideoSkinProps = BaseSkinProps;
+type VideoSkinProps = BaseVideoSkinProps;
 declare function VideoSkin(props: VideoSkinProps): ReactNode;
 //#endregion
 export { VideoSkin, VideoSkinProps };

package/dist/dev/presets/video/skin.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"skin.d.ts","names":[],"sources":["../../../../src/presets/video/skin.tsx"],"mappings":";;;;KAqCY,cAAA,GAAiB,aAAA;AAAA,iBAsCb,SAAA,CAAU,KAAA,EAAO,cAAA,GAAiB,SAAA"}
+{"version":3,"file":"skin.d.ts","names":[],"sources":["../../../../src/presets/video/skin.tsx"],"mappings":";;;;KAoDY,cAAA,GAAiB,kBAAA;AAAA,iBA+Db,SAAA,CAAU,KAAA,EAAO,cAAA,GAAiB,SAAA"}

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

@@ -1,4 +1,5 @@
 import { Container, usePlayer } from "../../player/context.js";
+import { isRenderProp } from "../../utils/use-render.js";
 import { BufferingIndicator } from "../../ui/buffering-indicator/buffering-indicator.js";
 import { CaptionsButton } from "../../ui/captions-button/captions-button.js";
 import { ControlsRoot } from "../../ui/controls/controls-root.js";
@@ -10,24 +11,30 @@ import { PlaybackRateButton } from "../../ui/playback-rate-button/playback-rate-
 import { PopoverPopup } from "../../ui/popover/popover-popup.js";
 import { PopoverRoot } from "../../ui/popover/popover-root.js";
 import { PopoverTrigger } from "../../ui/popover/popover-trigger.js";
+import { Poster } from "../../ui/poster/poster.js";
 import { SeekButton } from "../../ui/seek-button/seek-button.js";
 import { SliderBuffer } from "../../ui/slider/slider-buffer.js";
 import { SliderFill } from "../../ui/slider/slider-fill.js";
 import { SliderThumb } from "../../ui/slider/slider-thumb.js";
+import { SliderThumbnail } from "../../ui/slider/slider-thumbnail.js";
 import { SliderTrack } 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 { ErrorDialog } from "../error-dialog.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";
@@ -35,51 +42,86 @@ 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 { ErrorDialog } from "./error-dialog.js";
 import { forwardRef } from "react";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { isString } from "@videojs/utils/predicate";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { cn } from "@videojs/utils/style";
 
 //#region src/presets/video/skin.tsx
 const SEEK_TIME = 10;
-const Button = forwardRef(function Button({ className, ...props }, ref) {
-	return /* @__PURE__ */ jsx("button", {
-		ref,
-		type: "button",
-		className: cn("media-button", className),
-		...props
-	});
-});
-const errorClasses = {
+const ERROR_CLASSNAMES = {
 	root: "media-error",
 	dialog: "media-error__dialog media-surface",
 	content: "media-error__content",
 	title: "media-error__title",
 	description: "media-error__description",
 	actions: "media-error__actions",
-	close: "media-button"
+	close: "media-button media-button--primary"
 };
+const Button = forwardRef(function Button({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx("button", {
+		ref,
+		type: "button",
+		className: cn("media-button media-button--subtle media-button--icon", className),
+		...props
+	});
+});
 function PlayLabel() {
 	const paused = usePlayer((s) => Boolean(s.paused));
-	if (usePlayer((s) => Boolean(s.ended))) return /* @__PURE__ */ jsx(Fragment, { children: "Replay" });
-	return paused ? /* @__PURE__ */ jsx(Fragment, { children: "Play" }) : /* @__PURE__ */ jsx(Fragment, { children: "Pause" });
+	if (usePlayer((s) => Boolean(s.ended))) return "Replay";
+	return paused ? "Play" : "Pause";
 }
 function CaptionsLabel() {
-	return usePlayer((s) => Boolean(s.subtitlesShowing)) ? /* @__PURE__ */ jsx(Fragment, { children: "Disable captions" }) : /* @__PURE__ */ jsx(Fragment, { children: "Enable captions" });
+	return usePlayer((s) => Boolean(s.subtitlesShowing)) ? "Disable captions" : "Enable captions";
 }
 function PiPLabel() {
-	return usePlayer((s) => Boolean(s.pip)) ? /* @__PURE__ */ jsx(Fragment, { children: "Exit picture-in-picture" }) : /* @__PURE__ */ jsx(Fragment, { children: "Enter picture-in-picture" });
+	return usePlayer((s) => Boolean(s.pip)) ? "Exit picture-in-picture" : "Enter picture-in-picture";
 }
 function FullscreenLabel() {
-	return usePlayer((s) => Boolean(s.fullscreen)) ? /* @__PURE__ */ jsx(Fragment, { children: "Exit fullscreen" }) : /* @__PURE__ */ jsx(Fragment, { children: "Enter fullscreen" });
+	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: "media-button--mute",
+		render: /* @__PURE__ */ jsx(Button, {}),
+		children: [
+			/* @__PURE__ */ jsx(VolumeOffIcon, { className: "media-icon media-icon--volume-off" }),
+			/* @__PURE__ */ jsx(VolumeLowIcon, { className: "media-icon media-icon--volume-low" }),
+			/* @__PURE__ */ jsx(VolumeHighIcon, { className: "media-icon media-icon--volume-high" })
+		]
+	});
+	if (volumeUnsupported) return muteButton;
+	return /* @__PURE__ */ jsxs(PopoverRoot, {
+		openOnHover: true,
+		delay: 200,
+		closeDelay: 100,
+		side: "top",
+		children: [/* @__PURE__ */ jsx(PopoverTrigger, { render: muteButton }), /* @__PURE__ */ jsx(PopoverPopup, {
+			className: "media-surface media-popover media-popover--volume",
+			children: /* @__PURE__ */ jsxs(VolumeSliderRoot, {
+				className: "media-slider",
+				orientation: "vertical",
+				thumbAlignment: "edge",
+				children: [/* @__PURE__ */ jsx(SliderTrack, {
+					className: "media-slider__track",
+					children: /* @__PURE__ */ jsx(SliderFill, { className: "media-slider__fill" })
+				}), /* @__PURE__ */ jsx(SliderThumb, { className: "media-slider__thumb media-slider__thumb--persistent" })]
+			})
+		})]
+	});
 }
 function VideoSkin(props) {
-	const { children, className, ...rest } = props;
+	const { children, className, poster, ...rest } = props;
 	return /* @__PURE__ */ jsxs(Container, {
 		className: cn("media-default-skin media-default-skin--video", className),
 		...rest,
 		children: [
 			children,
+			poster && /* @__PURE__ */ jsx(Poster, {
+				src: isString(poster) ? poster : void 0,
+				render: isRenderProp(poster) ? poster : void 0
+			}),
 			/* @__PURE__ */ jsx(BufferingIndicator, { render: (props) => /* @__PURE__ */ jsx("div", {
 				...props,
 				className: "media-buffering-indicator",
@@ -88,21 +130,21 @@ function VideoSkin(props) {
 					children: /* @__PURE__ */ jsx(SpinnerIcon, { className: "media-icon" })
 				})
 			}) }),
-			/* @__PURE__ */ jsx(ErrorDialog, { classes: errorClasses }),
-			/* @__PURE__ */ jsxs(ControlsRoot, {
+			/* @__PURE__ */ jsx(ErrorDialog, { classNames: ERROR_CLASSNAMES }),
+			/* @__PURE__ */ jsx(ControlsRoot, {
 				className: "media-surface media-controls",
-				children: [
+				children: /* @__PURE__ */ jsxs(TooltipProvider, { children: [
 					/* @__PURE__ */ jsxs(TooltipRoot, {
 						side: "top",
-						children: [/* @__PURE__ */ jsx(TooltipTrigger, { render: /* @__PURE__ */ jsx(PlayButton, { render: (props) => /* @__PURE__ */ jsxs(Button, {
-							...props,
-							className: "media-button--icon media-button--play",
+						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, {
+						}) }), /* @__PURE__ */ jsx(TooltipPopup, {
 							className: "media-surface media-tooltip",
 							children: /* @__PURE__ */ jsx(PlayLabel, {})
 						})]
@@ -111,16 +153,14 @@ function VideoSkin(props) {
 						side: "top",
 						children: [/* @__PURE__ */ jsx(TooltipTrigger, { render: /* @__PURE__ */ jsx(SeekButton, {
 							seconds: -SEEK_TIME,
-							render: (props) => /* @__PURE__ */ jsx(Button, {
-								...props,
-								className: "media-button--icon media-button--seek",
-								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
-									})]
-								})
+							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",
@@ -135,16 +175,14 @@ function VideoSkin(props) {
 						side: "top",
 						children: [/* @__PURE__ */ jsx(TooltipTrigger, { render: /* @__PURE__ */ jsx(SeekButton, {
 							seconds: SEEK_TIME,
-							render: (props) => /* @__PURE__ */ jsx(Button, {
-								...props,
-								className: "media-button--icon media-button--seek",
-								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
-									})]
-								})
+							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",
@@ -164,10 +202,24 @@ function VideoSkin(props) {
 							}),
 							/* @__PURE__ */ jsxs(TimeSliderRoot, {
 								className: "media-slider",
-								children: [/* @__PURE__ */ jsxs(SliderTrack, {
-									className: "media-slider__track",
-									children: [/* @__PURE__ */ jsx(SliderFill, { className: "media-slider__fill" }), /* @__PURE__ */ jsx(SliderBuffer, { className: "media-slider__buffer" })]
-								}), /* @__PURE__ */ jsx(SliderThumb, { className: "media-slider__thumb" })]
+								children: [
+									/* @__PURE__ */ jsxs(SliderTrack, {
+										className: "media-slider__track",
+										children: [/* @__PURE__ */ jsx(SliderFill, { className: "media-slider__fill" }), /* @__PURE__ */ jsx(SliderBuffer, { className: "media-slider__buffer" })]
+									}),
+									/* @__PURE__ */ jsx(SliderThumb, { className: "media-slider__thumb" }),
+									/* @__PURE__ */ jsxs("div", {
+										className: "media-surface media-preview media-slider__preview",
+										children: [
+											/* @__PURE__ */ jsx(SliderThumbnail, { className: "media-preview__thumbnail" }),
+											/* @__PURE__ */ jsx(SliderValue, {
+												type: "pointer",
+												className: "media-preview__timestamp"
+											}),
+											/* @__PURE__ */ jsx(SpinnerIcon, { className: "media-preview__spinner media-icon" })
+										]
+									})
+								]
 							}),
 							/* @__PURE__ */ jsx(Value, {
 								type: "duration",
@@ -177,74 +229,49 @@ function VideoSkin(props) {
 					}),
 					/* @__PURE__ */ jsxs(TooltipRoot, {
 						side: "top",
-						children: [/* @__PURE__ */ jsx(TooltipTrigger, { render: /* @__PURE__ */ jsx(PlaybackRateButton, { render: (props) => /* @__PURE__ */ jsx(Button, {
-							...props,
-							className: "media-button--icon media-button--playback-rate"
-						}) }) }), /* @__PURE__ */ jsx(TooltipPopup, {
+						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__ */ jsxs(PopoverRoot, {
-						openOnHover: true,
-						delay: 200,
-						closeDelay: 100,
-						side: "top",
-						children: [/* @__PURE__ */ jsx(PopoverTrigger, { render: /* @__PURE__ */ jsx(MuteButton, { render: (props) => /* @__PURE__ */ jsxs(Button, {
-							...props,
-							className: "media-button--icon media-button--mute",
-							children: [
-								/* @__PURE__ */ jsx(VolumeOffIcon, { className: "media-icon media-icon--volume-off" }),
-								/* @__PURE__ */ jsx(VolumeLowIcon, { className: "media-icon media-icon--volume-low" }),
-								/* @__PURE__ */ jsx(VolumeHighIcon, { className: "media-icon media-icon--volume-high" })
-							]
-						}) }) }), /* @__PURE__ */ jsx(PopoverPopup, {
-							className: "media-surface media-popover media-popover--volume",
-							children: /* @__PURE__ */ jsxs(VolumeSliderRoot, {
-								className: "media-slider",
-								orientation: "vertical",
-								thumbAlignment: "edge",
-								children: [/* @__PURE__ */ jsx(SliderTrack, {
-									className: "media-slider__track",
-									children: /* @__PURE__ */ jsx(SliderFill, { className: "media-slider__fill" })
-								}), /* @__PURE__ */ jsx(SliderThumb, { className: "media-slider__thumb media-slider__thumb--persistent" })]
-							})
-						})]
-					}),
+					/* @__PURE__ */ jsx(VolumePopover, {}),
 					/* @__PURE__ */ jsxs(TooltipRoot, {
 						side: "top",
-						children: [/* @__PURE__ */ jsx(TooltipTrigger, { render: /* @__PURE__ */ jsx(CaptionsButton, { render: (props) => /* @__PURE__ */ jsxs(Button, {
-							...props,
-							className: "media-button--icon media-button--captions",
+						children: [/* @__PURE__ */ jsx(TooltipTrigger, { render: /* @__PURE__ */ jsxs(CaptionsButton, {
+							className: "media-button--captions",
+							render: /* @__PURE__ */ jsx(Button, {}),
 							children: [/* @__PURE__ */ jsx(CaptionsOffIcon, { className: "media-icon media-icon--captions-off" }), /* @__PURE__ */ jsx(CaptionsOnIcon, { className: "media-icon media-icon--captions-on" })]
-						}) }) }), /* @__PURE__ */ jsx(TooltipPopup, {
+						}) }), /* @__PURE__ */ jsx(TooltipPopup, {
 							className: "media-surface media-tooltip",
 							children: /* @__PURE__ */ jsx(CaptionsLabel, {})
 						})]
 					}),
 					/* @__PURE__ */ jsxs(TooltipRoot, {
 						side: "top",
-						children: [/* @__PURE__ */ jsx(TooltipTrigger, { render: /* @__PURE__ */ jsx(PiPButton, { render: (props) => /* @__PURE__ */ jsx(Button, {
-							...props,
-							className: "media-button--icon",
-							children: /* @__PURE__ */ jsx(PipIcon, { className: "media-icon" })
-						}) }) }), /* @__PURE__ */ jsx(TooltipPopup, {
+						children: [/* @__PURE__ */ jsx(TooltipTrigger, { render: /* @__PURE__ */ jsxs(PiPButton, {
+							className: "media-button--pip",
+							render: /* @__PURE__ */ jsx(Button, {}),
+							children: [/* @__PURE__ */ jsx(PipEnterIcon, { className: "media-icon media-icon--pip-enter" }), /* @__PURE__ */ jsx(PipExitIcon, { className: "media-icon media-icon--pip-exit" })]
+						}) }), /* @__PURE__ */ jsx(TooltipPopup, {
 							className: "media-surface media-tooltip",
 							children: /* @__PURE__ */ jsx(PiPLabel, {})
 						})]
 					}),
 					/* @__PURE__ */ jsxs(TooltipRoot, {
 						side: "top",
-						children: [/* @__PURE__ */ jsx(TooltipTrigger, { render: /* @__PURE__ */ jsx(FullscreenButton, { render: (props) => /* @__PURE__ */ jsxs(Button, {
-							...props,
-							className: "media-button--icon media-button--fullscreen",
+						children: [/* @__PURE__ */ jsx(TooltipTrigger, { render: /* @__PURE__ */ jsxs(FullscreenButton, {
+							className: "media-button--fullscreen",
+							render: /* @__PURE__ */ jsx(Button, {}),
 							children: [/* @__PURE__ */ jsx(FullscreenEnterIcon, { className: "media-icon media-icon--fullscreen-enter" }), /* @__PURE__ */ jsx(FullscreenExitIcon, { className: "media-icon media-icon--fullscreen-exit" })]
-						}) }) }), /* @__PURE__ */ jsx(TooltipPopup, {
+						}) }), /* @__PURE__ */ jsx(TooltipPopup, {
 							className: "media-surface media-tooltip",
 							children: /* @__PURE__ */ jsx(FullscreenLabel, {})
 						})]
 					})
-				]
+				] })
 			}),
 			/* @__PURE__ */ jsx("div", { className: "media-overlay" })
 		]

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

@@ -1 +1 @@
-{"version":3,"file":"skin.js","names":["Controls.Root","Tooltip.Root","Tooltip.Trigger","Tooltip.Popup","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.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 { cn } from '@videojs/utils/style';\nimport { type ComponentProps, forwardRef, type ReactNode } from 'react';\nimport { Container, usePlayer } from '@/player/context';\nimport { BufferingIndicator } from '@/ui/buffering-indicator';\nimport { CaptionsButton } from '@/ui/captions-button';\nimport { Controls } from '@/ui/controls';\nimport { FullscreenButton } from '@/ui/fullscreen-button';\nimport { MuteButton } from '@/ui/mute-button';\nimport { PiPButton } from '@/ui/pip-button';\nimport { PlayButton } from '@/ui/play-button';\nimport { PlaybackRateButton } from '@/ui/playback-rate-button';\nimport { Popover } from '@/ui/popover';\nimport { SeekButton } from '@/ui/seek-button';\nimport { Time } from '@/ui/time';\nimport { TimeSlider } from '@/ui/time-slider';\nimport { Tooltip } from '@/ui/tooltip';\nimport { VolumeSlider } from '@/ui/volume-slider';\nimport type { BaseSkinProps } from '../types';\nimport { ErrorDialog } from './error-dialog';\n\nconst SEEK_TIME = 10;\n\nexport type VideoSkinProps = BaseSkinProps;\n\nconst Button = forwardRef<HTMLButtonElement, ComponentProps<'button'>>(function Button({ className, ...props }, ref) {\n  return <button ref={ref} type=\"button\" className={cn('media-button', className)} {...props} />;\n});\n\nconst errorClasses = {\n  root: 'media-error',\n  dialog: 'media-error__dialog media-surface',\n  content: 'media-error__content',\n  title: 'media-error__title',\n  description: 'media-error__description',\n  actions: 'media-error__actions',\n  close: 'media-button',\n};\n\nfunction PlayLabel(): ReactNode {\n  const paused = usePlayer((s) => Boolean(s.paused));\n  const ended = usePlayer((s) => Boolean(s.ended));\n  if (ended) return <>Replay</>;\n  return paused ? <>Play</> : <>Pause</>;\n}\n\nfunction CaptionsLabel(): ReactNode {\n  const active = usePlayer((s) => Boolean(s.subtitlesShowing));\n  return active ? <>Disable captions</> : <>Enable captions</>;\n}\n\nfunction PiPLabel(): ReactNode {\n  const pip = usePlayer((s) => Boolean(s.pip));\n  return pip ? <>Exit picture-in-picture</> : <>Enter picture-in-picture</>;\n}\n\nfunction FullscreenLabel(): ReactNode {\n  const fullscreen = usePlayer((s) => Boolean(s.fullscreen));\n  return fullscreen ? <>Exit fullscreen</> : <>Enter fullscreen</>;\n}\n\nexport function VideoSkin(props: VideoSkinProps): ReactNode {\n  const { children, className, ...rest } = props;\n\n  return (\n    <Container className={cn('media-default-skin media-default-skin--video', className)} {...rest}>\n      {children}\n\n      <BufferingIndicator\n        render={(props) => (\n          <div {...props} className=\"media-buffering-indicator\">\n            <div className=\"media-surface\">\n              <SpinnerIcon className=\"media-icon\" />\n            </div>\n          </div>\n        )}\n      />\n\n      <ErrorDialog classes={errorClasses} />\n\n      <Controls.Root className=\"media-surface media-controls\">\n        <Tooltip.Root side=\"top\">\n          <Tooltip.Trigger\n            render={\n              <PlayButton\n                render={(props) => (\n                  <Button {...props} className=\"media-button--icon media-button--play\">\n                    <RestartIcon className=\"media-icon media-icon--restart\" />\n                    <PlayIcon className=\"media-icon media-icon--play\" />\n                    <PauseIcon className=\"media-icon media-icon--pause\" />\n                  </Button>\n                )}\n              />\n            }\n          />\n          <Tooltip.Popup className=\"media-surface media-tooltip\">\n            <PlayLabel />\n          </Tooltip.Popup>\n        </Tooltip.Root>\n\n        <Tooltip.Root side=\"top\">\n          <Tooltip.Trigger\n            render={\n              <SeekButton\n                seconds={-SEEK_TIME}\n                render={(props) => (\n                  <Button {...props} className=\"media-button--icon media-button--seek\">\n                    <span className=\"media-icon__container\">\n                      <SeekIcon className=\"media-icon media-icon--seek media-icon--flipped\" />\n                      <span className=\"media-icon__label\">{SEEK_TIME}</span>\n                    </span>\n                  </Button>\n                )}\n              />\n            }\n          />\n          <Tooltip.Popup className=\"media-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\n                seconds={SEEK_TIME}\n                render={(props) => (\n                  <Button {...props} className=\"media-button--icon media-button--seek\">\n                    <span className=\"media-icon__container\">\n                      <SeekIcon className=\"media-icon media-icon--seek\" />\n                      <span className=\"media-icon__label\">{SEEK_TIME}</span>\n                    </span>\n                  </Button>\n                )}\n              />\n            }\n          />\n          <Tooltip.Popup className=\"media-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={\n              <PlaybackRateButton\n                render={(props) => <Button {...props} className=\"media-button--icon media-button--playback-rate\" />}\n              />\n            }\n          />\n          <Tooltip.Popup className=\"media-surface media-tooltip\">Toggle playback rate</Tooltip.Popup>\n        </Tooltip.Root>\n\n        <Popover.Root openOnHover delay={200} closeDelay={100} side=\"top\">\n          <Popover.Trigger\n            render={\n              <MuteButton\n                render={(props) => (\n                  <Button {...props} className=\"media-button--icon media-button--mute\">\n                    <VolumeOffIcon className=\"media-icon media-icon--volume-off\" />\n                    <VolumeLowIcon className=\"media-icon media-icon--volume-low\" />\n                    <VolumeHighIcon className=\"media-icon media-icon--volume-high\" />\n                  </Button>\n                )}\n              />\n            }\n          />\n          <Popover.Popup className=\"media-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        <Tooltip.Root side=\"top\">\n          <Tooltip.Trigger\n            render={\n              <CaptionsButton\n                render={(props) => (\n                  <Button {...props} className=\"media-button--icon media-button--captions\">\n                    <CaptionsOffIcon className=\"media-icon media-icon--captions-off\" />\n                    <CaptionsOnIcon className=\"media-icon media-icon--captions-on\" />\n                  </Button>\n                )}\n              />\n            }\n          />\n          <Tooltip.Popup className=\"media-surface media-tooltip\">\n            <CaptionsLabel />\n          </Tooltip.Popup>\n        </Tooltip.Root>\n\n        <Tooltip.Root side=\"top\">\n          <Tooltip.Trigger\n            render={\n              <PiPButton\n                render={(props) => (\n                  <Button {...props} className=\"media-button--icon\">\n                    <PipIcon className=\"media-icon\" />\n                  </Button>\n                )}\n              />\n            }\n          />\n          <Tooltip.Popup className=\"media-surface media-tooltip\">\n            <PiPLabel />\n          </Tooltip.Popup>\n        </Tooltip.Root>\n\n        <Tooltip.Root side=\"top\">\n          <Tooltip.Trigger\n            render={\n              <FullscreenButton\n                render={(props) => (\n                  <Button {...props} className=\"media-button--icon media-button--fullscreen\">\n                    <FullscreenEnterIcon className=\"media-icon media-icon--fullscreen-enter\" />\n                    <FullscreenExitIcon className=\"media-icon media-icon--fullscreen-exit\" />\n                  </Button>\n                )}\n              />\n            }\n          />\n          <Tooltip.Popup className=\"media-surface media-tooltip\">\n            <FullscreenLabel />\n          </Tooltip.Popup>\n        </Tooltip.Root>\n      </Controls.Root>\n\n      {/* <div className=\"media-captions\">\n        <div className=\"media-captions__container\">\n          <span className=\"media-captions__text\">An example cue</span>\n          <span className=\"media-captions__text\">\n            <p>Another example cue with HTML</p>\n          </span>\n        </div>\n      </div> */}\n\n      <div className=\"media-overlay\" />\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","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.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 { isString } from '@videojs/utils/predicate';\nimport { cn } from '@videojs/utils/style';\nimport { type ComponentProps, forwardRef, type ReactNode } from 'react';\nimport { Container, usePlayer } from '@/player/context';\nimport { BufferingIndicator } from '@/ui/buffering-indicator';\nimport { CaptionsButton } from '@/ui/captions-button';\nimport { Controls } from '@/ui/controls';\nimport { FullscreenButton } from '@/ui/fullscreen-button';\nimport { MuteButton } from '@/ui/mute-button';\nimport { PiPButton } from '@/ui/pip-button';\nimport { PlayButton } from '@/ui/play-button';\nimport { PlaybackRateButton } from '@/ui/playback-rate-button';\nimport { Popover } from '@/ui/popover';\nimport { Poster } from '@/ui/poster';\nimport { SeekButton } from '@/ui/seek-button';\nimport { Slider } from '@/ui/slider';\nimport { Time } from '@/ui/time';\nimport { TimeSlider } from '@/ui/time-slider';\nimport { Tooltip } from '@/ui/tooltip';\nimport { VolumeSlider } from '@/ui/volume-slider';\nimport { isRenderProp } from '@/utils/use-render';\nimport { ErrorDialog } from '../error-dialog';\nimport type { BaseVideoSkinProps } from '../types';\n\nconst SEEK_TIME = 10;\n\nconst ERROR_CLASSNAMES = {\n  root: 'media-error',\n  dialog: 'media-error__dialog media-surface',\n  content: 'media-error__content',\n  title: 'media-error__title',\n  description: 'media-error__description',\n  actions: 'media-error__actions',\n  close: 'media-button media-button--primary',\n};\n\nexport type VideoSkinProps = BaseVideoSkinProps;\n\nconst Button = forwardRef<HTMLButtonElement, ComponentProps<'button'>>(function Button({ className, ...props }, ref) {\n  return (\n    <button\n      ref={ref}\n      type=\"button\"\n      className={cn('media-button media-button--subtle media-button--icon', className)}\n      {...props}\n    />\n  );\n});\n\nfunction PlayLabel(): string {\n  const paused = usePlayer((s) => Boolean(s.paused));\n  const ended = usePlayer((s) => Boolean(s.ended));\n  if (ended) return 'Replay';\n  return paused ? 'Play' : 'Pause';\n}\n\nfunction CaptionsLabel(): string {\n  const active = usePlayer((s) => Boolean(s.subtitlesShowing));\n  return active ? 'Disable captions' : 'Enable captions';\n}\n\nfunction PiPLabel(): string {\n  const pip = usePlayer((s) => Boolean(s.pip));\n  return pip ? 'Exit picture-in-picture' : 'Enter picture-in-picture';\n}\n\nfunction FullscreenLabel(): string {\n  const fullscreen = usePlayer((s) => Boolean(s.fullscreen));\n  return fullscreen ? 'Exit fullscreen' : 'Enter fullscreen';\n}\n\nfunction VolumePopover(): ReactNode {\n  const volumeUnsupported = usePlayer((s) => s.volumeAvailability === 'unsupported');\n\n  const muteButton = (\n    <MuteButton className=\"media-button--mute\" render={<Button />}>\n      <VolumeOffIcon className=\"media-icon media-icon--volume-off\" />\n      <VolumeLowIcon className=\"media-icon media-icon--volume-low\" />\n      <VolumeHighIcon className=\"media-icon media-icon--volume-high\" />\n    </MuteButton>\n  );\n\n  if (volumeUnsupported) return muteButton;\n\n  return (\n    <Popover.Root openOnHover delay={200} closeDelay={100} side=\"top\">\n      <Popover.Trigger render={muteButton} />\n      <Popover.Popup className=\"media-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 VideoSkin(props: VideoSkinProps): ReactNode {\n  const { children, className, poster, ...rest } = props;\n\n  return (\n    <Container className={cn('media-default-skin media-default-skin--video', className)} {...rest}>\n      {children}\n\n      {poster && (\n        <Poster src={isString(poster) ? poster : undefined} render={isRenderProp(poster) ? poster : undefined} />\n      )}\n\n      <BufferingIndicator\n        render={(props) => (\n          <div {...props} className=\"media-buffering-indicator\">\n            <div className=\"media-surface\">\n              <SpinnerIcon className=\"media-icon\" />\n            </div>\n          </div>\n        )}\n      />\n\n      <ErrorDialog classNames={ERROR_CLASSNAMES} />\n\n      <Controls.Root 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\n              <div className=\"media-surface media-preview media-slider__preview\">\n                <Slider.Thumbnail className=\"media-preview__thumbnail\" />\n                <TimeSlider.Value type=\"pointer\" className=\"media-preview__timestamp\" />\n                <SpinnerIcon className=\"media-preview__spinner media-icon\" />\n              </div>\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\n          <Tooltip.Root side=\"top\">\n            <Tooltip.Trigger\n              render={\n                <CaptionsButton className=\"media-button--captions\" render={<Button />}>\n                  <CaptionsOffIcon className=\"media-icon media-icon--captions-off\" />\n                  <CaptionsOnIcon className=\"media-icon media-icon--captions-on\" />\n                </CaptionsButton>\n              }\n            />\n            <Tooltip.Popup className=\"media-surface media-tooltip\">\n              <CaptionsLabel />\n            </Tooltip.Popup>\n          </Tooltip.Root>\n\n          <Tooltip.Root side=\"top\">\n            <Tooltip.Trigger\n              render={\n                <PiPButton className=\"media-button--pip\" render={<Button />}>\n                  <PipEnterIcon className=\"media-icon media-icon--pip-enter\" />\n                  <PipExitIcon className=\"media-icon media-icon--pip-exit\" />\n                </PiPButton>\n              }\n            />\n            <Tooltip.Popup className=\"media-surface media-tooltip\">\n              <PiPLabel />\n            </Tooltip.Popup>\n          </Tooltip.Root>\n\n          <Tooltip.Root side=\"top\">\n            <Tooltip.Trigger\n              render={\n                <FullscreenButton className=\"media-button--fullscreen\" render={<Button />}>\n                  <FullscreenEnterIcon className=\"media-icon media-icon--fullscreen-enter\" />\n                  <FullscreenExitIcon className=\"media-icon media-icon--fullscreen-exit\" />\n                </FullscreenButton>\n              }\n            />\n            <Tooltip.Popup className=\"media-surface media-tooltip\">\n              <FullscreenLabel />\n            </Tooltip.Popup>\n          </Tooltip.Root>\n        </Tooltip.Provider>\n      </Controls.Root>\n\n      <div className=\"media-overlay\" />\n    </Container>\n  );\n}\n"],"mappings":"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"}

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

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