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/video/minimal-skin.js CHANGED Viewed

@@ -42,56 +42,56 @@ import SpinnerIcon from "../../icons/dist/react/minimal/spinner.js";
 import VolumeHighIcon from "../../icons/dist/react/minimal/volume-high.js";
 import VolumeLowIcon from "../../icons/dist/react/minimal/volume-low.js";
 import VolumeOffIcon from "../../icons/dist/react/minimal/volume-off.js";
-import { ErrorDialog } from "./error-dialog.js";
+import { ErrorDialog } from "../error-dialog.js";
 import { forwardRef } from "react";
 import { isString } from "@videojs/utils/predicate";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { cn } from "@videojs/utils/style";
 //#region src/presets/video/minimal-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",
 	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__ */ 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,
@@ -128,7 +128,7 @@ function MinimalVideoSkin(props) {
 				className: "media-buffering-indicator",
 				children: /* @__PURE__ */ jsx(SpinnerIcon, { className: "media-icon" })
 			}) }),
-			/* @__PURE__ */ jsx(ErrorDialog, { classes: errorClasses }),
+			/* @__PURE__ */ jsx(ErrorDialog, { classNames: ERROR_CLASSNAMES }),
 			/* @__PURE__ */ jsx(ControlsRoot, {
 				className: "media-controls",
 				children: /* @__PURE__ */ jsxs(TooltipProvider, { children: [
@@ -137,15 +137,15 @@ function MinimalVideoSkin(props) {
 						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-tooltip",
 									children: /* @__PURE__ */ jsx(PlayLabel, {})
 								})]
@@ -154,16 +154,14 @@ function MinimalVideoSkin(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-tooltip",
@@ -178,16 +176,14 @@ function MinimalVideoSkin(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-tooltip",
@@ -245,10 +241,10 @@ function MinimalVideoSkin(props) {
 						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, {
+								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"
 								})]
@@ -256,33 +252,33 @@ function MinimalVideoSkin(props) {
 							/* @__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-tooltip",
 									children: /* @__PURE__ */ jsx(CaptionsLabel, {})
 								})]
 							}),
 							/* @__PURE__ */ jsxs(TooltipRoot, {
 								side: "top",
-								children: [/* @__PURE__ */ jsx(TooltipTrigger, { render: /* @__PURE__ */ jsx(PiPButton, { render: (props) => /* @__PURE__ */ jsxs(Button, {
-									...props,
-									className: "media-button--icon media-button--pip",
+								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, {
+								}) }), /* @__PURE__ */ jsx(TooltipPopup, {
 									className: "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-tooltip",
 									children: /* @__PURE__ */ jsx(FullscreenLabel, {})
 								})]

package/dist/dev/presets/video/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","Controls.Root","Tooltip.Provider","Tooltip.Root","Tooltip.Trigger","Tooltip.Popup","Time.Group","Time.Value","Time.Separator","TimeSlider.Root","TimeSlider.Track","TimeSlider.Fill","TimeSlider.Buffer","TimeSlider.Thumb","Slider.Thumbnail","TimeSlider.Value"],"sources":["../../../../src/presets/video/minimal-skin.tsx"],"sourcesContent":["import {\n CaptionsOffIcon,\n CaptionsOnIcon,\n FullscreenEnterIcon,\n FullscreenExitIcon,\n PauseIcon,\n PipEnterIcon,\n PipExitIcon,\n PlayIcon,\n RestartIcon,\n SeekIcon,\n SpinnerIcon,\n VolumeHighIcon,\n VolumeLowIcon,\n VolumeOffIcon,\n} from '@videojs/icons/react/minimal';\nimport { 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 type { BaseVideoSkinProps } from '../types';\nimport { ErrorDialog } from './error-dialog';\n\nconst SEEK_TIME = 10;\n\nexport type MinimalVideoSkinProps = BaseVideoSkinProps;\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',\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\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=\"top\">\n <Popover.Trigger render={muteButton} />\n <Popover.Popup className=\"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 MinimalVideoSkin(props: MinimalVideoSkinProps): ReactNode {\n const { children, className, poster, ...rest } = props;\n\n return (\n <Container className={cn('media-minimal-skin media-minimal-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 <SpinnerIcon className=\"media-icon\" />\n </div>\n )}\n />\n\n <ErrorDialog classes={errorClasses} />\n\n <Controls.Root 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\n <div className=\"media-preview media-slider__preview\">\n <div className=\"media-preview__thumbnail-wrapper\">\n <Slider.Thumbnail className=\"media-preview__thumbnail\" />\n </div>\n <TimeSlider.Value type=\"pointer\" className=\"media-preview__timestamp\" />\n <SpinnerIcon className=\"media-preview__spinner media-icon\" />\n </div>\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\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-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 media-button--pip\">\n <PipEnterIcon className=\"media-icon media-icon--pip-enter\" />\n <PipExitIcon className=\"media-icon media-icon--pip-exit\" />\n </Button>\n )}\n />\n }\n />\n <Tooltip.Popup className=\"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-tooltip\">\n <FullscreenLabel />\n </Tooltip.Popup>\n </Tooltip.Root>\n </div>\n </Tooltip.Provider>\n </Controls.Root>\n\n <div className=\"media-overlay\" />\n </Container>\n );\n}\n"],"mappings":"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"}
1	+ {"version":3,"file":"minimal-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","Time.Separator","TimeSlider.Root","TimeSlider.Track","TimeSlider.Fill","TimeSlider.Buffer","TimeSlider.Thumb","Slider.Thumbnail","TimeSlider.Value"],"sources":["../../../../src/presets/video/minimal-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/minimal';\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',\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 MinimalVideoSkinProps = 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-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 MinimalVideoSkin(props: MinimalVideoSkinProps): ReactNode {\n const { children, className, poster, ...rest } = props;\n\n return (\n <Container className={cn('media-minimal-skin media-minimal-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 <SpinnerIcon className=\"media-icon\" />\n </div>\n )}\n />\n\n <ErrorDialog classNames={ERROR_CLASSNAMES} />\n\n <Controls.Root 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\n <div className=\"media-preview media-slider__preview\">\n <div className=\"media-preview__thumbnail-wrapper\">\n <Slider.Thumbnail className=\"media-preview__thumbnail\" />\n </div>\n <TimeSlider.Value type=\"pointer\" className=\"media-preview__timestamp\" />\n <SpinnerIcon className=\"media-preview__spinner media-icon\" />\n </div>\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\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-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-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-tooltip\">\n <FullscreenLabel />\n </Tooltip.Popup>\n </Tooltip.Root>\n </div>\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/minimal-skin.tailwind.d.ts.map CHANGED Viewed

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

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

@@ -13,7 +13,7 @@ import { PopoverRoot } from "../../ui/popover/popover-root.js";
 import { PopoverTrigger } from "../../ui/popover/popover-trigger.js";
 import { Poster } from "../../ui/poster/poster.js";
 import { SeekButton } from "../../ui/seek-button/seek-button.js";
-import { SliderBuffer } from "../../ui/slider/slider-buffer.js";
+import { SliderBuffer as SliderBuffer$1 } from "../../ui/slider/slider-buffer.js";
 import { SliderFill as SliderFill$1 } from "../../ui/slider/slider-fill.js";
 import { SliderThumb as SliderThumb$1 } from "../../ui/slider/slider-thumb.js";
 import { SliderThumbnail } from "../../ui/slider/slider-thumbnail.js";
@@ -42,31 +42,39 @@ import SpinnerIcon from "../../icons/dist/react/minimal/spinner.js";
 import VolumeHighIcon from "../../icons/dist/react/minimal/volume-high.js";
 import VolumeLowIcon from "../../icons/dist/react/minimal/volume-low.js";
 import VolumeOffIcon from "../../icons/dist/react/minimal/volume-off.js";
+import { ErrorDialog } from "../error-dialog.js";
 import { iconState } from "../../skins/dist/default/shared/tailwind/icon-state.js";
 import { playbackRate } from "../../skins/dist/default/default/tailwind/components/playback-rate.js";
 import { bufferingIndicator } from "../../skins/dist/default/minimal/tailwind/components/buffering.js";
 import { button } from "../../skins/dist/default/minimal/tailwind/components/button.js";
 import { buttonGroup } from "../../skins/dist/default/minimal/tailwind/components/button-group.js";
-import { error } from "../../skins/dist/default/minimal/tailwind/components/error.js";
 import { icon, iconContainer, iconFlipped } from "../../skins/dist/default/minimal/tailwind/components/icon.js";
 import { seek } from "../../skins/dist/default/minimal/tailwind/components/seek.js";
 import { time } from "../../skins/dist/default/minimal/tailwind/components/time.js";
-import { ErrorDialog } from "./error-dialog.js";
 import { overlay } from "../../skins/dist/default/minimal/tailwind/components/overlay.js";
 import { poster } from "../../skins/dist/default/minimal/tailwind/components/poster.js";
-import { controls, popup, preview, root, slider } from "../../skins/dist/default/minimal/tailwind/video.tailwind.js";
+import { controls, error, popup, preview, root, slider } from "../../skins/dist/default/minimal/tailwind/video.tailwind.js";
 import { forwardRef } from "react";
 import { isString } from "@videojs/utils/predicate";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { cn } from "@videojs/utils/style";
 //#region src/presets/video/minimal-skin.tailwind.tsx
 const SEEK_TIME = 10;
-const Button = forwardRef(function Button({ className, variant, ...props }, ref) {
+const ERROR_CLASSNAMES = {
+	root: error.root,
+	dialog: error.dialog,
+	content: error.content,
+	title: error.title,
+	description: error.description,
+	actions: error.actions,
+	close: cn(button.base, button.primary)
+};
+const Button = forwardRef(function Button({ className, ...props }, ref) {
 	return /* @__PURE__ */ jsx("button", {
 		ref,
 		type: "button",
-		className: cn(button.base, variant === "icon" ? button.icon : button.default, className),
+		className: cn(button.base, button.subtle, button.icon, className),
 		...props
 	});
 });
@@ -91,6 +99,13 @@ const SliderFill = forwardRef(function SliderFill({ type = "fill", className, ..
 		...props
 	});
 });
+const SliderBuffer = forwardRef(function SliderBuffer(props, ref) {
+	return /* @__PURE__ */ jsx(SliderFill, {
+		type: "buffer",
+		ref,
+		...props
+	});
+});
 const SliderThumb = forwardRef(function SliderThumb({ persistent, className, ...props }, ref) {
 	return /* @__PURE__ */ jsx("div", {
 		ref,
@@ -98,40 +113,31 @@ const SliderThumb = forwardRef(function SliderThumb({ persistent, className, ...
 		...props
 	});
 });
-const errorClasses = {
-	root: error.root,
-	dialog: error.dialog,
-	content: error.content,
-	title: error.title,
-	actions: error.actions,
-	close: cn(button.base, button.default)
-};
 function PlayLabel() {
 	const paused = usePlayer((s) => Boolean(s.paused));
-	if (usePlayer((s) => Boolean(s.ended))) return /* @__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__ */ jsx(MuteButton, { render: (props) => /* @__PURE__ */ jsxs(Button, {
-		variant: "icon",
-		...props,
+	const muteButton = /* @__PURE__ */ jsxs(MuteButton, {
 		className: iconState.mute.button,
+		render: /* @__PURE__ */ jsx(Button, {}),
 		children: [
 			/* @__PURE__ */ jsx(VolumeOffIcon, { className: cn(icon, iconState.mute.volumeOff) }),
 			/* @__PURE__ */ jsx(VolumeLowIcon, { className: cn(icon, iconState.mute.volumeLow) }),
 			/* @__PURE__ */ jsx(VolumeHighIcon, { className: cn(icon, iconState.mute.volumeHigh) })
 		]
-	}) });
+	});
 	if (volumeUnsupported) return muteButton;
 	return /* @__PURE__ */ jsxs(PopoverRoot, {
 		openOnHover: true,
@@ -143,10 +149,10 @@ function VolumePopover() {
 			children: /* @__PURE__ */ jsxs(VolumeSliderRoot, {
 				orientation: "vertical",
 				thumbAlignment: "edge",
-				render: (props) => /* @__PURE__ */ jsx(SliderRoot, { ...props }),
+				render: /* @__PURE__ */ jsx(SliderRoot, {}),
 				children: [/* @__PURE__ */ jsx(SliderTrack$1, {
-					render: (props) => /* @__PURE__ */ jsx(SliderTrack, { ...props }),
-					children: /* @__PURE__ */ jsx(SliderFill$1, { render: (props) => /* @__PURE__ */ jsx(SliderFill, { ...props }) })
+					render: /* @__PURE__ */ jsx(SliderTrack, {}),
+					children: /* @__PURE__ */ jsx(SliderFill$1, { render: /* @__PURE__ */ jsx(SliderFill, {}) })
 				}), /* @__PURE__ */ jsx(SliderThumb$1, { render: (props) => /* @__PURE__ */ jsx(SliderThumb, {
 					persistent: true,
 					...props
@@ -172,7 +178,7 @@ function MinimalVideoSkinTailwind(props) {
 				className: bufferingIndicator,
 				children: /* @__PURE__ */ jsx(SpinnerIcon, { className: icon })
 			}) }),
-			/* @__PURE__ */ jsx(ErrorDialog, { classes: errorClasses }),
+			/* @__PURE__ */ jsx(ErrorDialog, { classNames: ERROR_CLASSNAMES }),
 			/* @__PURE__ */ jsx(ControlsRoot, {
 				"data-controls": "",
 				className: controls,
@@ -182,16 +188,15 @@ function MinimalVideoSkinTailwind(props) {
 						children: [
 							/* @__PURE__ */ jsxs(TooltipRoot, {
 								side: "top",
-								children: [/* @__PURE__ */ jsx(TooltipTrigger, { render: /* @__PURE__ */ jsx(PlayButton, { render: (props) => /* @__PURE__ */ jsxs(Button, {
-									variant: "icon",
-									...props,
+								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, {
+								}) }), /* @__PURE__ */ jsx(TooltipPopup, {
 									className: cn(popup.tooltip),
 									children: /* @__PURE__ */ jsx(PlayLabel, {})
 								})]
@@ -200,17 +205,14 @@ function MinimalVideoSkinTailwind(props) {
 								side: "top",
 								children: [/* @__PURE__ */ jsx(TooltipTrigger, { render: /* @__PURE__ */ jsx(SeekButton, {
 									seconds: -SEEK_TIME,
-									render: (props) => /* @__PURE__ */ jsx(Button, {
-										variant: "icon",
-										...props,
-										className: seek.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
-											})]
-										})
+									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(TooltipPopup, {
 									className: cn(popup.tooltip),
@@ -225,17 +227,14 @@ function MinimalVideoSkinTailwind(props) {
 								side: "top",
 								children: [/* @__PURE__ */ jsx(TooltipTrigger, { render: /* @__PURE__ */ jsx(SeekButton, {
 									seconds: SEEK_TIME,
-									render: (props) => /* @__PURE__ */ jsx(Button, {
-										variant: "icon",
-										...props,
-										className: seek.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
-											})]
-										})
+									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(TooltipPopup, {
 									className: cn(popup.tooltip),
@@ -264,16 +263,13 @@ function MinimalVideoSkinTailwind(props) {
 								})
 							]
 						}), /* @__PURE__ */ jsxs(TimeSliderRoot, {
-							render: (props) => /* @__PURE__ */ jsx(SliderRoot, { ...props }),
+							render: /* @__PURE__ */ jsx(SliderRoot, {}),
 							children: [
 								/* @__PURE__ */ jsxs(SliderTrack$1, {
-									render: (props) => /* @__PURE__ */ jsx(SliderTrack, { ...props }),
-									children: [/* @__PURE__ */ jsx(SliderFill$1, { render: (props) => /* @__PURE__ */ jsx(SliderFill, { ...props }) }), /* @__PURE__ */ jsx(SliderBuffer, { render: (props) => /* @__PURE__ */ jsx(SliderFill, {
-										type: "buffer",
-										...props
-									}) })]
+									render: /* @__PURE__ */ jsx(SliderTrack, {}),
+									children: [/* @__PURE__ */ jsx(SliderFill$1, { render: /* @__PURE__ */ jsx(SliderFill, {}) }), /* @__PURE__ */ jsx(SliderBuffer$1, { render: /* @__PURE__ */ jsx(SliderBuffer, {}) })]
 								}),
-								/* @__PURE__ */ jsx(SliderThumb$1, { render: (props) => /* @__PURE__ */ jsx(SliderThumb, { ...props }) }),
+								/* @__PURE__ */ jsx(SliderThumb$1, { render: /* @__PURE__ */ jsx(SliderThumb, {}) }),
 								/* @__PURE__ */ jsxs("div", {
 									className: preview.root,
 									children: [
@@ -296,11 +292,10 @@ function MinimalVideoSkinTailwind(props) {
 						children: [
 							/* @__PURE__ */ jsxs(TooltipRoot, {
 								side: "top",
-								children: [/* @__PURE__ */ jsx(TooltipTrigger, { render: /* @__PURE__ */ jsx(PlaybackRateButton, { render: (props) => /* @__PURE__ */ jsx(Button, {
-									variant: "icon",
-									...props,
-									className: playbackRate.button
-								}) }) }), /* @__PURE__ */ jsx(TooltipPopup, {
+								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"
 								})]
@@ -308,36 +303,33 @@ function MinimalVideoSkinTailwind(props) {
 							/* @__PURE__ */ jsx(VolumePopover, {}),
 							/* @__PURE__ */ jsxs(TooltipRoot, {
 								side: "top",
-								children: [/* @__PURE__ */ jsx(TooltipTrigger, { render: /* @__PURE__ */ jsx(CaptionsButton, { render: (props) => /* @__PURE__ */ jsxs(Button, {
-									variant: "icon",
-									...props,
+								children: [/* @__PURE__ */ jsx(TooltipTrigger, { render: /* @__PURE__ */ jsxs(CaptionsButton, {
 									className: iconState.captions.button,
+									render: /* @__PURE__ */ jsx(Button, {}),
 									children: [/* @__PURE__ */ jsx(CaptionsOffIcon, { className: cn(icon, iconState.captions.off) }), /* @__PURE__ */ jsx(CaptionsOnIcon, { className: cn(icon, iconState.captions.on) })]
-								}) }) }), /* @__PURE__ */ jsx(TooltipPopup, {
+								}) }), /* @__PURE__ */ jsx(TooltipPopup, {
 									className: cn(popup.tooltip),
 									children: /* @__PURE__ */ jsx(CaptionsLabel, {})
 								})]
 							}),
 							/* @__PURE__ */ jsxs(TooltipRoot, {
 								side: "top",
-								children: [/* @__PURE__ */ jsx(TooltipTrigger, { render: /* @__PURE__ */ jsx(PiPButton, { render: (props) => /* @__PURE__ */ jsxs(Button, {
-									variant: "icon",
-									...props,
+								children: [/* @__PURE__ */ jsx(TooltipTrigger, { render: /* @__PURE__ */ jsxs(PiPButton, {
 									className: iconState.pip.button,
+									render: /* @__PURE__ */ jsx(Button, {}),
 									children: [/* @__PURE__ */ jsx(PipEnterIcon, { className: cn(icon, iconState.pip.off) }), /* @__PURE__ */ jsx(PipExitIcon, { className: cn(icon, iconState.pip.on) })]
-								}) }) }), /* @__PURE__ */ jsx(TooltipPopup, {
+								}) }), /* @__PURE__ */ jsx(TooltipPopup, {
 									className: cn(popup.tooltip),
 									children: /* @__PURE__ */ jsx(PiPLabel, {})
 								})]
 							}),
 							/* @__PURE__ */ jsxs(TooltipRoot, {
 								side: "top",
-								children: [/* @__PURE__ */ jsx(TooltipTrigger, { render: /* @__PURE__ */ jsx(FullscreenButton, { render: (props) => /* @__PURE__ */ jsxs(Button, {
-									variant: "icon",
-									...props,
+								children: [/* @__PURE__ */ jsx(TooltipTrigger, { render: /* @__PURE__ */ jsxs(FullscreenButton, {
 									className: iconState.fullscreen.button,
+									render: /* @__PURE__ */ jsx(Button, {}),
 									children: [/* @__PURE__ */ jsx(FullscreenEnterIcon, { className: cn(icon, iconState.fullscreen.enter) }), /* @__PURE__ */ jsx(FullscreenExitIcon, { className: cn(icon, iconState.fullscreen.exit) })]
-								}) }) }), /* @__PURE__ */ jsx(TooltipPopup, {
+								}) }), /* @__PURE__ */ jsx(TooltipPopup, {
 									className: cn(popup.tooltip),
 									children: /* @__PURE__ */ jsx(FullscreenLabel, {})
 								})]