npm - @videojs/react - Versions diffs - 10.0.0-beta.8 → 10.0.0-beta.9 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (118) hide show

package/dist/dev/presets/audio/minimal-skin.js CHANGED Viewed

@@ -26,36 +26,46 @@ import SeekIcon from "../../icons/dist/react/minimal/seek.js";
 import VolumeHighIcon from "../../icons/dist/react/minimal/volume-high.js";
 import VolumeLowIcon from "../../icons/dist/react/minimal/volume-low.js";
 import VolumeOffIcon from "../../icons/dist/react/minimal/volume-off.js";
+import { ErrorDialog } from "../error-dialog.js";
 import { forwardRef } from "react";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { cn } from "@videojs/utils/style";
 //#region src/presets/audio/minimal-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,
 		type: "button",
-		className: cn("media-button", className),
+		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 VolumePopover() {
 	const volumeUnsupported = usePlayer((s) => s.volumeAvailability === "unsupported");
-	const muteButton = /* @__PURE__ */ jsx(MuteButton, { render: (props) => /* @__PURE__ */ jsxs(Button, {
-		...props,
-		className: "media-button--icon media-button--mute",
+	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,
@@ -81,34 +91,36 @@ function MinimalAudioSkin(props) {
 	return /* @__PURE__ */ jsxs(Container, {
 		className: cn("media-minimal-skin media-minimal-skin--audio", className),
 		...rest,
-		children: [children, /* @__PURE__ */ jsx("div", {
-			className: "media-controls",
-			children: /* @__PURE__ */ jsxs(TooltipProvider, { children: [
-				/* @__PURE__ */ jsxs("div", {
-					className: "media-button-group",
-					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(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-tooltip",
-								children: /* @__PURE__ */ jsx(PlayLabel, {})
-							})]
-						}),
-						/* @__PURE__ */ jsxs(TooltipRoot, {
-							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: [
+			children,
+			/* @__PURE__ */ jsx(ErrorDialog, { classNames: ERROR_CLASSNAMES }),
+			/* @__PURE__ */ jsx("div", {
+				className: "media-controls",
+				children: /* @__PURE__ */ jsxs(TooltipProvider, { children: [
+					/* @__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-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", {
@@ -116,23 +128,21 @@ function MinimalAudioSkin(props) {
 											children: SEEK_TIME
 										})]
 									})
-								})
-							}) }), /* @__PURE__ */ jsxs(TooltipPopup, {
-								className: "media-tooltip",
-								children: [
-									"Seek backward ",
-									SEEK_TIME,
-									" seconds"
-								]
-							})]
-						}),
-						/* @__PURE__ */ jsxs(TooltipRoot, {
-							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",
+								}) }), /* @__PURE__ */ jsxs(TooltipPopup, {
+									className: "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", {
@@ -140,56 +150,56 @@ function MinimalAudioSkin(props) {
 											children: SEEK_TIME
 										})]
 									})
-								})
-							}) }), /* @__PURE__ */ jsxs(TooltipPopup, {
-								className: "media-tooltip",
-								children: [
-									"Seek forward ",
-									SEEK_TIME,
-									" seconds"
-								]
-							})]
-						})
-					]
-				}),
-				/* @__PURE__ */ jsxs("div", {
-					className: "media-time-controls",
-					children: [/* @__PURE__ */ jsxs(Group, {
-						className: "media-time",
-						children: [
-							/* @__PURE__ */ jsx(Value, {
-								type: "current",
-								className: "media-time__value media-time__value--current"
-							}),
-							/* @__PURE__ */ jsx(Separator, { className: "media-time__separator" }),
-							/* @__PURE__ */ jsx(Value, {
-								type: "duration",
-								className: "media-time__value media-time__value--duration"
+								}) }), /* @__PURE__ */ jsxs(TooltipPopup, {
+									className: "media-tooltip",
+									children: [
+										"Seek forward ",
+										SEEK_TIME,
+										" seconds"
+									]
+								})]
 							})
 						]
-					}), /* @__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" })]
-					})]
-				}),
-				/* @__PURE__ */ jsxs("div", {
-					className: "media-button-group",
-					children: [/* @__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, {
-							className: "media-tooltip",
-							children: "Toggle playback rate"
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "media-time-controls",
+						children: [/* @__PURE__ */ jsxs(Group, {
+							className: "media-time",
+							children: [
+								/* @__PURE__ */ jsx(Value, {
+									type: "current",
+									className: "media-time__value media-time__value--current"
+								}),
+								/* @__PURE__ */ jsx(Separator, { className: "media-time__separator" }),
+								/* @__PURE__ */ jsx(Value, {
+									type: "duration",
+									className: "media-time__value media-time__value--duration"
+								})
+							]
+						}), /* @__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" })]
 						})]
-					}), /* @__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-tooltip",
+								children: "Toggle playback rate"
+							})]
+						}), /* @__PURE__ */ jsx(VolumePopover, {})]
+					})
+				] })
+			})
+		]
 	});
 }

package/dist/dev/presets/audio/minimal-skin.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"minimal-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","Time.Separator","TimeSlider.Root","TimeSlider.Track","TimeSlider.Fill","TimeSlider.Buffer","TimeSlider.Thumb"],"sources":["../../../../src/presets/audio/minimal-skin.tsx"],"sourcesContent":["import {\n PauseIcon,\n PlayIcon,\n RestartIcon,\n SeekIcon,\n VolumeHighIcon,\n VolumeLowIcon,\n VolumeOffIcon,\n} from '@videojs/icons/react/minimal';\nimport { cn } from '@videojs/utils/style';\nimport { type ComponentProps, forwardRef, type ReactNode } from 'react';\nimport { Container, usePlayer } from '@/player/context';\nimport { 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~~ ~~MinimalAudioSkinProps~~ = ~~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\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 VolumePopover(): ReactNode {\n const volumeUnsupported = usePlayer((s) => s.volumeAvailability === 'unsupported');\n\n const muteButton = (\n <MuteButton~~\n render={(props)~~ ~~=> (\n <Button {...props}~~ className=\"media-button--~~icon media-button--~~mute\">\n <VolumeOffIcon className=\"media-icon media-icon--volume-off\" />\n <VolumeLowIcon className=\"media-icon media-icon--volume-low\" />\n <VolumeHighIcon className=\"media-icon media-icon--volume-high\" />\n </~~Button~~>\n ~~)}\n />\n~~ );\n\n if (volumeUnsupported) return muteButton;\n\n return (\n <Popover.Root openOnHover delay={200} closeDelay={100} side=\"left\">\n <Popover.Trigger render={muteButton} />\n <Popover.Popup className=\"media-popover media-popover--volume\">\n <VolumeSlider.Root className=\"media-slider\" orientation=\"horizontal\" 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 MinimalAudioSkin(props: MinimalAudioSkinProps): ReactNode {\n const { children, className, ...rest } = props;\n\n return (\n <Container className={cn('media-minimal-skin media-minimal-skin--audio', className)} {...rest}>\n {children}\n\n <div className=\"media-controls\">\n <Tooltip.Provider>\n <div className=\"media-button-group\">\n <Tooltip.Root side=\"top\">\n <Tooltip.Trigger\n render={\n <PlayButton~~\n render={(props)~~ ~~=> (\n <Button {...props}~~ className=\"media-button--~~icon media-button--~~play\">\n <RestartIcon className=\"media-icon media-icon--restart\" />\n <PlayIcon className=\"media-icon media-icon--play\" />\n <PauseIcon className=\"media-icon media-icon--pause\" />\n </~~Button~~>\n ~~)}\n />\n~~ }\n />\n <Tooltip.Popup className=\"media-tooltip\">\n <PlayLabel />\n </Tooltip.Popup>\n </Tooltip.Root>\n\n <Tooltip.Root side=\"top\">\n <Tooltip.Trigger\n render={\n <SeekButton\n seconds={-SEEK_TIME}~~\n render={(props)~~ ~~=> (\n <Button {...props}~~ className=\"media-button--~~icon media-button--~~seek\">\n <span className=\"media-icon__container\">\n <SeekIcon className=\"media-icon media-icon--seek media-icon--flipped\" />\n <span className=\"media-icon__label\">{SEEK_TIME}</span>\n </span>\n </~~Button~~>\n ~~)}\n />\n~~ }\n />\n <Tooltip.Popup className=\"media-tooltip\">Seek backward {SEEK_TIME} seconds</Tooltip.Popup>\n </Tooltip.Root>\n\n <Tooltip.Root side=\"top\">\n <Tooltip.Trigger\n render={\n <SeekButton\n seconds={SEEK_TIME}~~\n render={(props)~~ ~~=> (\n <Button {...props}~~ className=\"media-button--~~icon media-button--~~seek\">\n <span className=\"media-icon__container\">\n <SeekIcon className=\"media-icon media-icon--seek\" />\n <span className=\"media-icon__label\">{SEEK_TIME}</span>\n </span>\n </~~Button~~>\n ~~)}\n />\n~~ }\n />\n <Tooltip.Popup className=\"media-tooltip\">Seek forward {SEEK_TIME} seconds</Tooltip.Popup>\n </Tooltip.Root>\n </div>\n\n <div className=\"media-time-controls\">\n <Time.Group className=\"media-time\">\n <Time.Value type=\"current\" className=\"media-time__value media-time__value--current\" />\n <Time.Separator className=\"media-time__separator\" />\n <Time.Value type=\"duration\" className=\"media-time__value media-time__value--duration\" />\n </Time.Group>\n\n <TimeSlider.Root className=\"media-slider\">\n <TimeSlider.Track className=\"media-slider__track\">\n <TimeSlider.Fill className=\"media-slider__fill\" />\n <TimeSlider.Buffer className=\"media-slider__buffer\" />\n </TimeSlider.Track>\n <TimeSlider.Thumb className=\"media-slider__thumb\" />\n </TimeSlider.Root>\n </div>\n\n <div className=\"media-button-group\">\n <Tooltip.Root side=\"top\">\n <Tooltip.Trigger\n render={\n <PlaybackRateButton~~\n render={(props)~~ ~~=> <Button {...props}~~ className=\"media-button--~~icon media-button--~~playback-rate\" />}~~\n />\n~~ }\n />\n <Tooltip.Popup className=\"media-tooltip\">Toggle playback rate</Tooltip.Popup>\n </Tooltip.Root>\n\n <VolumePopover />\n </div>\n </Tooltip.Provider>\n </div>\n </Container>\n );\n}\n"],"mappings":"~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuBA~~,MAAM,YAAY;~~AAIlB~~,MAAM,SAAS,WAAwD,SAAS,OAAO,EAAE,WAAW,GAAG,SAAS,KAAK;AACnH,~~QAAO~~,oBAAC;~~EAAY~~;~~EAAK~~,MAAK;~~EAAS~~,WAAW,GAAG,~~gBAAgB~~,UAAU;~~EAAE~~,GAAI;~~GAAS~~;~~EAC9F~~;AAEF,SAAS,~~YAAuB~~;~~CAC9B~~,MAAM,SAAS,WAAW,MAAM,QAAQ,EAAE,OAAO,CAAC;AAElD,KADc,WAAW,MAAM,QAAQ,EAAE,MAAM,CAAC,CACrC,QAAO~~,0CAAE,WAAS~~;~~AAC7B~~,QAAO,SAAS,~~0CAAE,SAAO,GAAG,0CAAE,UAAQ~~;;~~AAGxC~~,SAAS,gBAA2B;CAClC,MAAM,oBAAoB,WAAW,MAAM,EAAE,uBAAuB,cAAc;CAElF,MAAM,aACJ,~~oBAAC,cACC,SAAS,UACP,~~qBAAC;~~EAAO~~,~~GAAI~~;~~EAAO~~,~~WAAU~~;;~~GAC3B~~,oBAAC,iBAAc,WAAU,sCAAsC;GAC/D,oBAAC,iBAAc,WAAU,sCAAsC;GAC/D,oBAAC,kBAAe,WAAU,uCAAuC;;~~GAC1D,GAEX~~;~~AAGJ~~,KAAI,kBAAmB,QAAO;AAE9B,QACE,qBAACA;EAAa;EAAY,OAAO;EAAK,YAAY;EAAK,MAAK;aAC1D,oBAACC,kBAAgB,QAAQ,aAAc,EACvC,oBAACC;GAAc,WAAU;aACvB,qBAACC;IAAkB,WAAU;IAAe,aAAY;IAAa,gBAAe;eAClF,oBAACC;KAAmB,WAAU;eAC5B,oBAACC,cAAkB,WAAU,uBAAuB;MACjC,EACrB,oBAACC,eAAmB,WAAU,wDAAwD;KACpE;IACN;GACH;;AAInB,SAAgB,iBAAiB,OAAyC;CACxE,MAAM,EAAE,UAAU,WAAW,GAAG,SAAS;AAEzC,QACE,qBAAC;EAAU,WAAW,GAAG,gDAAgD,UAAU;EAAE,GAAI;~~aACtF~~,~~UAED~~,oBAAC;~~GAAI~~,WAAU;~~aACb~~,qBAACC;~~IACC~~,qBAAC;~~KAAI~~,WAAU;;~~MACb~~,qBAACC;~~OAAa~~,MAAK;~~kBACjB~~,oBAACC,kBACC,QACE,~~oBAAC,cACC,SAAS,UACP,~~qBAAC;~~QAAO~~,~~GAAI~~;~~QAAO~~,~~WAAU~~;;~~SAC3B~~,oBAAC,eAAY,WAAU,mCAAmC;~~SAC1D~~,oBAAC,YAAS,WAAU,gCAAgC;~~SACpD~~,oBAAC,aAAU,WAAU,iCAAiC;;~~SAC/C~~,~~GAEX~~,~~GAEJ,~~EACF,oBAACC;~~QAAc~~,WAAU;~~kBACvB~~,oBAAC,cAAY;~~SACC~~;~~QACH~~;~~MAEf~~,qBAACF;~~OAAa~~,MAAK;~~kBACjB~~,oBAACC,kBACC,QACE,oBAAC;~~QACC~~,SAAS,CAAC;~~QACV~~,~~SAAS~~,~~UACP~~,oBAAC~~;SAAO~~,~~GAAI~~;~~SAAO~~,~~WAAU;mBAC3B,~~qBAAC;UAAK,WAAU;qBACd,oBAAC,YAAS,WAAU,oDAAoD,EACxE,oBAAC;WAAK,WAAU;qBAAqB;YAAiB;WACjD;~~UACA;SAEX~~,~~GAEJ~~,EACF,qBAACC;~~QAAc~~,WAAU;;~~SAAgB~~;~~SAAe~~;~~SAAU~~;;~~SAAwB~~;~~QAC7E~~;~~MAEf~~,qBAACF;~~OAAa~~,MAAK;~~kBACjB~~,oBAACC,kBACC,QACE,oBAAC;~~QACC~~,SAAS;~~QACT~~,~~SAAS~~,~~UACP~~,oBAAC~~;SAAO~~,~~GAAI~~;~~SAAO~~,~~WAAU;mBAC3B,~~qBAAC;UAAK,WAAU;qBACd,oBAAC,YAAS,WAAU,gCAAgC,EACpD,oBAAC;WAAK,WAAU;qBAAqB;YAAiB;WACjD;~~UACA;SAEX~~,~~GAEJ~~,EACF,qBAACC;~~QAAc~~,WAAU;;~~SAAgB~~;~~SAAc~~;~~SAAU~~;;~~SAAwB~~;~~QAC5E~~;;~~MACX~~;~~IAEN~~,qBAAC;~~KAAI~~,WAAU;~~gBACb~~,qBAACC;~~MAAW~~,WAAU;;~~OACpB~~,oBAACC;~~QAAW~~,MAAK;~~QAAU~~,WAAU;~~SAAiD~~;~~OACtF~~,oBAACC,aAAe,WAAU,0BAA0B;~~OACpD~~,oBAACD;~~QAAW~~,MAAK;~~QAAW~~,WAAU;~~SAAkD~~;;~~OAC7E~~,EAEb,qBAACE;~~MAAgB~~,WAAU;~~iBACzB~~,qBAACC;~~OAAiB~~,WAAU;~~kBAC1B~~,oBAACC,cAAgB,WAAU,uBAAuB,EAClD,oBAACC,gBAAkB,WAAU,yBAAyB;~~QACrC~~,EACnB,oBAACC,eAAiB,WAAU,wBAAwB;~~OACpC~~;~~MACd~~;~~IAEN~~,qBAAC;~~KAAI~~,WAAU;~~gBACb~~,qBAACV;~~MAAa~~,MAAK;~~iBACjB~~,oBAACC,kBACC,~~QACE~~,oBAAC,~~sBACC~~,~~SAAS~~,~~UAAU,~~oBAAC~~;OAAO~~,~~GAAI~~;~~OAAO~~,~~WAAU;QAAmD~~,~~GACnG,GAEJ,~~EACF,oBAACC;~~OAAc~~,WAAU;~~iBAAgB~~;~~QAAoC~~;~~OAChE~~,EAEf,oBAAC,kBAAgB;~~MACb~~;~~OACW~~;~~IACf;~~GACI"}
1	+ {"version":3,"file":"minimal-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","Time.Separator","TimeSlider.Root","TimeSlider.Track","TimeSlider.Fill","TimeSlider.Buffer","TimeSlider.Thumb"],"sources":["../../../../src/presets/audio/minimal-skin.tsx"],"sourcesContent":["import {\n PauseIcon,\n PlayIcon,\n RestartIcon,\n SeekIcon,\n VolumeHighIcon,\n VolumeLowIcon,\n VolumeOffIcon,\n} from '@videojs/icons/react/minimal';\nimport { cn } from '@videojs/utils/style';\nimport { type ComponentProps, forwardRef, type ReactNode } from 'react';\nimport { Container, usePlayer } from '@/player/context';\nimport { 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\nexport type MinimalAudioSkinProps = BaseSkinProps;\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\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=\"left\">\n <Popover.Trigger render={muteButton} />\n <Popover.Popup className=\"media-popover media-popover--volume\">\n <VolumeSlider.Root className=\"media-slider\" orientation=\"horizontal\" 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 MinimalAudioSkin(props: MinimalAudioSkinProps): ReactNode {\n const { children, className, ...rest } = props;\n\n return (\n <Container className={cn('media-minimal-skin media-minimal-skin--audio', className)} {...rest}>\n {children}\n\n <ErrorDialog classNames={ERROR_CLASSNAMES} />\n\n <div className=\"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-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-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-tooltip\">Seek forward {SEEK_TIME} seconds</Tooltip.Popup>\n </Tooltip.Root>\n </div>\n\n <div className=\"media-time-controls\">\n <Time.Group className=\"media-time\">\n <Time.Value type=\"current\" className=\"media-time__value media-time__value--current\" />\n <Time.Separator className=\"media-time__separator\" />\n <Time.Value type=\"duration\" className=\"media-time__value media-time__value--duration\" />\n </Time.Group>\n\n <TimeSlider.Root className=\"media-slider\">\n <TimeSlider.Track className=\"media-slider__track\">\n <TimeSlider.Fill className=\"media-slider__fill\" />\n <TimeSlider.Buffer className=\"media-slider__buffer\" />\n </TimeSlider.Track>\n <TimeSlider.Thumb className=\"media-slider__thumb\" />\n </TimeSlider.Root>\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-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/minimal-skin.tailwind.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"minimal-skin.tailwind.d.ts","names":[],"sources":["../../../../src/presets/audio/minimal-skin.tailwind.tsx"],"mappings":";;;;~~iBAsIgB~~,wBAAA,CAAyB,KAAA,EAAO,qBAAA,GAAwB,SAAA"}
1	+ {"version":3,"file":"minimal-skin.tailwind.d.ts","names":[],"sources":["../../../../src/presets/audio/minimal-skin.tailwind.tsx"],"mappings":";;;;iBA0IgB,wBAAA,CAAyB,KAAA,EAAO,qBAAA,GAAwB,SAAA"}