npm - @videojs/react - Versions diffs - 10.0.0-beta.3 → 10.0.0-beta.4 - Mend

@videojs/react 10.0.0-beta.3 → 10.0.0-beta.4

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 (83) hide show

package/dist/default/presets/audio/minimal-skin.css CHANGED Viewed

@@ -95,6 +95,8 @@
   position: relative;
   isolation: isolate;
   display: block;
+  height: 100%;
+  width: 100%;
   container: media-root / inline-size;
   border-radius: var(--media-border-radius, 0.75rem);
   font-family:
@@ -581,7 +583,7 @@
   padding: 0.25rem 0.5rem;
   border-radius: 0.25rem;
   background-color: oklch(1 0 0 / 0.1);
-  backdrop-filter: blur(64px) brightness(0.9) saturate(1.5);
+  backdrop-filter: blur(16px) saturate(1.5);
   box-shadow:
     0 4px 6px -1px oklch(0 0 0 / 0.1),
     0 2px 4px -2px oklch(0 0 0 / 0.1);
@@ -618,7 +620,7 @@
   gap: 0.5rem;
   padding: 0.375rem;
   background-color: var(--media-controls-background-color);
-  backdrop-filter: blur(8px) brightness(0.98) saturate(1.2);
+  backdrop-filter: blur(16px) saturate(1.5);
   border-radius: var(--media-border-radius, 0.75rem);
   color: var(--media-controls-text-color);
   box-shadow: 0 0 0 1px var(--media-controls-border-color);

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

@@ -15,6 +15,7 @@ import { Separator } from "../../ui/time/time-separator.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";
@@ -49,10 +50,10 @@ function MinimalAudioSkin(props) {
 	return /* @__PURE__ */ jsxs(Container, {
 		className: cn("media-minimal-skin media-minimal-skin--audio", className),
 		...rest,
-		children: [children, /* @__PURE__ */ jsxs("div", {
+		children: [children, /* @__PURE__ */ jsx("div", {
 			className: "media-controls",
-			children: [
-				/* @__PURE__ */ jsxs("span", {
+			children: /* @__PURE__ */ jsxs(TooltipProvider, { children: [
+				/* @__PURE__ */ jsxs("div", {
 					className: "media-button-group",
 					children: [
 						/* @__PURE__ */ jsxs(TooltipRoot, {
@@ -120,7 +121,7 @@ function MinimalAudioSkin(props) {
 						})
 					]
 				}),
-				/* @__PURE__ */ jsxs("span", {
+				/* @__PURE__ */ jsxs("div", {
 					className: "media-time-controls",
 					children: [/* @__PURE__ */ jsxs(Group, {
 						className: "media-time",
@@ -143,7 +144,7 @@ function MinimalAudioSkin(props) {
 						}), /* @__PURE__ */ jsx(SliderThumb, { className: "media-slider__thumb" })]
 					})]
 				}),
-				/* @__PURE__ */ jsxs("span", {
+				/* @__PURE__ */ jsxs("div", {
 					className: "media-button-group",
 					children: [/* @__PURE__ */ jsxs(TooltipRoot, {
 						side: "top",
@@ -181,7 +182,7 @@ function MinimalAudioSkin(props) {
 						})]
 					})]
 				})
-			]
+			] })
 		})]
 	});
 }

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

	@@ -1 +1 @@
1	- {"version":3,"file":"minimal-skin.js","names":["Tooltip.Root","Tooltip.Trigger","Tooltip.Popup","Time.Group","Time.Value","Time.Separator","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/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\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 <~~span~~ 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 </~~span~~>\n\n <~~span~~ 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 </~~span~~>\n\n <~~span~~ 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 <Popover.Root openOnHover delay={200} closeDelay={100} side=\"left\">\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-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 </~~span~~>\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,SAAgB,iBAAiB,OAAyC;CACxE,MAAM,EAAE,UAAU,WAAW,GAAG,SAAS;AAEzC,QACE,qBAAC;EAAU,WAAW,GAAG,gDAAgD,UAAU;EAAE,GAAI;aACtF,UAED,~~qBAAC~~;GAAI,WAAU~~;;IACb~~,qBAAC;~~KAAK~~,WAAU;;~~MACd~~,~~qBAACA~~;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;;~~MACV~~;~~IAEP~~,qBAAC;~~KAAK~~,WAAU;~~gBACd~~,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;~~MACb~~;~~IAEP~~,qBAAC;~~KAAK~~,WAAU;~~gBACd~~,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,qBAACS;MAAa;MAAY,OAAO;MAAK,YAAY;MAAK,MAAK;iBAC1D,oBAACC,kBACC,QACE,oBAAC,cACC,SAAS,UACP,qBAAC;OAAO,GAAI;OAAO,WAAU;;QAC3B,oBAAC,iBAAc,WAAU,sCAAsC;QAC/D,oBAAC,iBAAc,WAAU,sCAAsC;QAC/D,oBAAC,kBAAe,WAAU,uCAAuC;;QAC1D,GAEX,GAEJ,EACF,oBAACC;OAAc,WAAU;iBACvB,qBAACC;QAAkB,WAAU;QAAe,aAAY;QAAa,gBAAe;mBAClF,oBAACC;SAAmB,WAAU;mBAC5B,oBAACC,cAAkB,WAAU,uBAAuB;UACjC,EACrB,oBAACC,eAAmB,WAAU,wDAAwD;SACpE;QACN;OACH;~~MACV;;IACH~~;GACI"}
1	+ {"version":3,"file":"minimal-skin.js","names":["Tooltip.Provider","Tooltip.Root","Tooltip.Trigger","Tooltip.Popup","Time.Group","Time.Value","Time.Separator","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/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\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 <Popover.Root openOnHover delay={200} closeDelay={100} side=\"left\">\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-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 </div>\n </Tooltip.Provider>\n </div>\n </Container>\n );\n}\n"],"mappings":"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"}

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

@@ -15,6 +15,7 @@ import { Separator } from "../../ui/time/time-separator.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";
@@ -25,6 +26,7 @@ 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 { iconState } from "../../skins/dist/default/shared/tailwind/icon-state.js";
 import { playbackRate } from "../../skins/dist/default/default/tailwind/components/playback-rate.js";
 import { button } from "../../skins/dist/default/minimal/tailwind/components/button.js";
 import { buttonGroup } from "../../skins/dist/default/minimal/tailwind/components/button-group.js";
@@ -32,7 +34,7 @@ import { icon, iconContainer, iconFlipped } from "../../skins/dist/default/minim
 import { seek } from "../../skins/dist/default/minimal/tailwind/components/seek.js";
 import { slider } from "../../skins/dist/default/minimal/tailwind/components/slider.js";
 import { time } from "../../skins/dist/default/minimal/tailwind/components/time.js";
-import { controls, iconState, popup, root } from "../../skins/dist/default/minimal/tailwind/audio.tailwind.js";
+import { controls, popup, root } from "../../skins/dist/default/minimal/tailwind/audio.tailwind.js";
 import { forwardRef } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { cn } from "@videojs/utils/style";
@@ -85,10 +87,10 @@ function MinimalAudioSkinTailwind(props) {
 	return /* @__PURE__ */ jsxs(Container, {
 		className: cn(root, className),
 		...rest,
-		children: [children, /* @__PURE__ */ jsxs("div", {
+		children: [children, /* @__PURE__ */ jsx("div", {
 			className: controls,
-			children: [
-				/* @__PURE__ */ jsxs("span", {
+			children: /* @__PURE__ */ jsxs(TooltipProvider, { children: [
+				/* @__PURE__ */ jsxs("div", {
 					className: buttonGroup,
 					children: [
 						/* @__PURE__ */ jsxs(TooltipRoot, {
@@ -159,7 +161,7 @@ function MinimalAudioSkinTailwind(props) {
 						})
 					]
 				}),
-				/* @__PURE__ */ jsxs("span", {
+				/* @__PURE__ */ jsxs("div", {
 					className: time.controls,
 					children: [/* @__PURE__ */ jsxs(Group, {
 						className: time.group,
@@ -185,7 +187,7 @@ function MinimalAudioSkinTailwind(props) {
 						}), /* @__PURE__ */ jsx(SliderThumb$1, { render: (props) => /* @__PURE__ */ jsx(SliderThumb, { ...props }) })]
 					})]
 				}),
-				/* @__PURE__ */ jsxs("span", {
+				/* @__PURE__ */ jsxs("div", {
 					className: buttonGroup,
 					children: [/* @__PURE__ */ jsxs(TooltipRoot, {
 						side: "top",
@@ -228,7 +230,7 @@ function MinimalAudioSkinTailwind(props) {
 						})]
 					})]
 				})
-			]
+			] })
 		})]
 	});
 }

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

	@@ -1 +1 @@
1	- {"version":3,"file":"minimal-skin.tailwind.js","names":["Tooltip.Root","Tooltip.Trigger","Tooltip.Popup","Time.Group","Time.Value","Time.Separator","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/audio/minimal-skin.tailwind.tsx"],"sourcesContent":["import {\n PauseIcon,\n PlayIcon,\n RestartIcon,\n SeekIcon,\n VolumeHighIcon,\n VolumeLowIcon,\n VolumeOffIcon,\n} from '@videojs/icons/react/minimal';\nimport { playbackRate } from '@videojs/skins/default/tailwind/audio.tailwind';\nimport {\n button,\n buttonGroup,\n controls,\n icon,\n iconContainer,\n iconFlipped,\n iconState,\n popup,\n root,\n seek,\n slider,\n time,\n} from '@videojs/skins/minimal/tailwind/audio.tailwind';\nimport { cn } from '@videojs/utils/style';\nimport { type ComponentProps, forwardRef, type ReactNode } from 'react';\nimport { Container, usePlayer } from '@/player/context';\nimport { MuteButton } from '@/ui/mute-button';\nimport { PlayButton } from '@/ui/play-button';\nimport { PlaybackRateButton } from '@/ui/playback-rate-button';\nimport { Popover } from '@/ui/popover';\nimport { SeekButton } from '@/ui/seek-button';\nimport { Time } from '@/ui/time';\nimport { TimeSlider } from '@/ui/time-slider';\nimport { Tooltip } from '@/ui/tooltip';\nimport { VolumeSlider } from '@/ui/volume-slider';\nimport type { MinimalAudioSkinProps } from './minimal-skin';\n\nconst SEEK_TIME = 10;\n\n/* --------------------------------------- Components ---------------------------------------- /\n\nconst Button = forwardRef<HTMLButtonElement, ComponentProps<'button'> & { variant?: 'icon' }>(function Button(\n { className, variant, ...props },\n ref\n) {\n return (\n <button\n ref={ref}\n type=\"button\"\n className={cn(button.base, variant === 'icon' ? button.icon : button.default, className)}\n {...props}\n />\n );\n});\n\nconst SliderRoot = forwardRef<HTMLDivElement, ComponentProps<'div'>>(function SliderRoot({ className, ...props }, ref) {\n return <div ref={ref} className={cn(slider.root, className)} {...props} />;\n});\n\nconst SliderTrack = forwardRef<HTMLDivElement, ComponentProps<'div'>>(function SliderTrack(\n { className, ...props },\n ref\n) {\n return <div ref={ref} className={cn(slider.track, className)} {...props} />;\n});\n\nconst SliderFill = forwardRef<HTMLDivElement, ComponentProps<'div'> & { type?: 'fill' \| 'buffer' }>(function SliderFill(\n { type = 'fill', className, ...props },\n ref\n) {\n return (\n <div\n ref={ref}\n className={cn(slider.fill.base, type === 'fill' ? slider.fill.fill : slider.fill.buffer, className)}\n {...props}\n />\n );\n});\n\nconst SliderThumb = forwardRef<HTMLDivElement, ComponentProps<'div'> & { persistent?: boolean }>(function SliderThumb(\n { persistent, className, ...props },\n ref\n) {\n return (\n <div\n ref={ref}\n className={cn(slider.thumb.base, persistent ? undefined : slider.thumb.interactive, className)}\n {...props}\n />\n );\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\n/ ------------------------------------------ Skin ------------------------------------------- */\n\nexport function MinimalAudioSkinTailwind(props: MinimalAudioSkinProps): ReactNode {\n const { children, className, ...rest } = props;\n\n return (\n <Container className={cn(root, className)} {...rest}>\n {children}\n\n <div className={controls}>\n <span className={buttonGroup}>\n <Tooltip.Root side=\"top\">\n <Tooltip.Trigger\n render={\n <PlayButton\n render={(props) => (\n <Button variant=\"icon\" {...props} className={iconState.play.button}>\n <RestartIcon className={cn(icon, iconState.play.restart)} />\n <PlayIcon className={cn(icon, iconState.play.play)} />\n <PauseIcon className={cn(icon, iconState.play.pause)} />\n </Button>\n )}\n />\n }\n />\n <Tooltip.Popup className={cn(popup.tooltip)}>\n <PlayLabel />\n </Tooltip.Popup>\n </Tooltip.Root>\n\n <Tooltip.Root side=\"top\">\n <Tooltip.Trigger\n render={\n <SeekButton\n seconds={-SEEK_TIME}\n render={(props) => (\n <Button variant=\"icon\" {...props} className={seek.button}>\n <span className={iconContainer}>\n <SeekIcon className={cn(icon, iconFlipped)} />\n <span className={cn(seek.label, seek.labelBackward)}>{SEEK_TIME}</span>\n </span>\n </Button>\n )}\n />\n }\n />\n <Tooltip.Popup className={cn(popup.tooltip)}>Seek backward {SEEK_TIME} seconds</Tooltip.Popup>\n </Tooltip.Root>\n\n <Tooltip.Root side=\"top\">\n <Tooltip.Trigger\n render={\n <SeekButton\n seconds={SEEK_TIME}\n render={(props) => (\n <Button variant=\"icon\" {...props} className={seek.button}>\n <span className={iconContainer}>\n <SeekIcon className={icon} />\n <span className={cn(seek.label, seek.labelForward)}>{SEEK_TIME}</span>\n </span>\n </Button>\n )}\n />\n }\n />\n <Tooltip.Popup className={cn(popup.tooltip)}>Seek forward {SEEK_TIME} seconds</Tooltip.Popup>\n </Tooltip.Root>\n </span>\n\n <span className={time.controls}>\n <Time.Group className={time.group}>\n <Time.Value type=\"current\" className={time.current} />\n <Time.Separator className={time.separator} />\n <Time.Value type=\"duration\" className={time.duration} />\n </Time.Group>\n\n <TimeSlider.Root render={(props) => <SliderRoot {...props} />}>\n <TimeSlider.Track render={(props) => <SliderTrack {...props} />}>\n <TimeSlider.Fill render={(props) => <SliderFill {...props} />} />\n <TimeSlider.Buffer render={(props) => <SliderFill type=\"buffer\" {...props} />} />\n </TimeSlider.Track>\n <TimeSlider.Thumb render={(props) => <SliderThumb {...props} />} />\n </TimeSlider.Root>\n </span>\n\n <span className={buttonGroup}>\n <Tooltip.Root side=\"top\">\n <Tooltip.Trigger\n render={\n <PlaybackRateButton\n render={(props) => <Button variant=\"icon\" {...props} className={playbackRate.button} />}\n />\n }\n />\n <Tooltip.Popup className={cn(popup.tooltip)}>Toggle playback rate</Tooltip.Popup>\n </Tooltip.Root>\n\n <Popover.Root openOnHover delay={200} closeDelay={100} side=\"left\">\n <Popover.Trigger\n render={\n <MuteButton\n render={(props) => (\n <Button variant=\"icon\" {...props} className={iconState.mute.button}>\n <VolumeOffIcon className={cn(icon, iconState.mute.volumeOff)} />\n <VolumeLowIcon className={cn(icon, iconState.mute.volumeLow)} />\n <VolumeHighIcon className={cn(icon, iconState.mute.volumeHigh)} />\n </Button>\n )}\n />\n }\n />\n <Popover.Popup className={cn(popup.volume)}>\n <VolumeSlider.Root\n orientation=\"horizontal\"\n thumbAlignment=\"edge\"\n render={(props) => <SliderRoot {...props} />}\n >\n <VolumeSlider.Track render={(props) => <SliderTrack {...props} />}>\n <VolumeSlider.Fill render={(props) => <SliderFill {...props} />} />\n </VolumeSlider.Track>\n <VolumeSlider.Thumb render={(props) => <SliderThumb persistent {...props} />} />\n </VolumeSlider.Root>\n </Popover.Popup>\n </Popover.Root>\n </span>\n </div>\n </Container>\n );\n}\n"],"mappings":"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"}
1	+ {"version":3,"file":"minimal-skin.tailwind.js","names":["Tooltip.Provider","Tooltip.Root","Tooltip.Trigger","Tooltip.Popup","Time.Group","Time.Value","Time.Separator","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/audio/minimal-skin.tailwind.tsx"],"sourcesContent":["import {\n PauseIcon,\n PlayIcon,\n RestartIcon,\n SeekIcon,\n VolumeHighIcon,\n VolumeLowIcon,\n VolumeOffIcon,\n} from '@videojs/icons/react/minimal';\nimport { playbackRate } from '@videojs/skins/default/tailwind/audio.tailwind';\nimport {\n button,\n buttonGroup,\n controls,\n icon,\n iconContainer,\n iconFlipped,\n iconState,\n popup,\n root,\n seek,\n slider,\n time,\n} from '@videojs/skins/minimal/tailwind/audio.tailwind';\nimport { cn } from '@videojs/utils/style';\nimport { type ComponentProps, forwardRef, type ReactNode } from 'react';\nimport { Container, usePlayer } from '@/player/context';\nimport { MuteButton } from '@/ui/mute-button';\nimport { PlayButton } from '@/ui/play-button';\nimport { PlaybackRateButton } from '@/ui/playback-rate-button';\nimport { Popover } from '@/ui/popover';\nimport { SeekButton } from '@/ui/seek-button';\nimport { Time } from '@/ui/time';\nimport { TimeSlider } from '@/ui/time-slider';\nimport { Tooltip } from '@/ui/tooltip';\nimport { VolumeSlider } from '@/ui/volume-slider';\nimport type { MinimalAudioSkinProps } from './minimal-skin';\n\nconst SEEK_TIME = 10;\n\n/* --------------------------------------- Components ---------------------------------------- /\n\nconst Button = forwardRef<HTMLButtonElement, ComponentProps<'button'> & { variant?: 'icon' }>(function Button(\n { className, variant, ...props },\n ref\n) {\n return (\n <button\n ref={ref}\n type=\"button\"\n className={cn(button.base, variant === 'icon' ? button.icon : button.default, className)}\n {...props}\n />\n );\n});\n\nconst SliderRoot = forwardRef<HTMLDivElement, ComponentProps<'div'>>(function SliderRoot({ className, ...props }, ref) {\n return <div ref={ref} className={cn(slider.root, className)} {...props} />;\n});\n\nconst SliderTrack = forwardRef<HTMLDivElement, ComponentProps<'div'>>(function SliderTrack(\n { className, ...props },\n ref\n) {\n return <div ref={ref} className={cn(slider.track, className)} {...props} />;\n});\n\nconst SliderFill = forwardRef<HTMLDivElement, ComponentProps<'div'> & { type?: 'fill' \| 'buffer' }>(function SliderFill(\n { type = 'fill', className, ...props },\n ref\n) {\n return (\n <div\n ref={ref}\n className={cn(slider.fill.base, type === 'fill' ? slider.fill.fill : slider.fill.buffer, className)}\n {...props}\n />\n );\n});\n\nconst SliderThumb = forwardRef<HTMLDivElement, ComponentProps<'div'> & { persistent?: boolean }>(function SliderThumb(\n { persistent, className, ...props },\n ref\n) {\n return (\n <div\n ref={ref}\n className={cn(slider.thumb.base, persistent ? undefined : slider.thumb.interactive, className)}\n {...props}\n />\n );\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\n/ ------------------------------------------ Skin ------------------------------------------- */\n\nexport function MinimalAudioSkinTailwind(props: MinimalAudioSkinProps): ReactNode {\n const { children, className, ...rest } = props;\n\n return (\n <Container className={cn(root, className)} {...rest}>\n {children}\n\n <div className={controls}>\n <Tooltip.Provider>\n <div className={buttonGroup}>\n <Tooltip.Root side=\"top\">\n <Tooltip.Trigger\n render={\n <PlayButton\n render={(props) => (\n <Button variant=\"icon\" {...props} className={iconState.play.button}>\n <RestartIcon className={cn(icon, iconState.play.restart)} />\n <PlayIcon className={cn(icon, iconState.play.play)} />\n <PauseIcon className={cn(icon, iconState.play.pause)} />\n </Button>\n )}\n />\n }\n />\n <Tooltip.Popup className={cn(popup.tooltip)}>\n <PlayLabel />\n </Tooltip.Popup>\n </Tooltip.Root>\n\n <Tooltip.Root side=\"top\">\n <Tooltip.Trigger\n render={\n <SeekButton\n seconds={-SEEK_TIME}\n render={(props) => (\n <Button variant=\"icon\" {...props} className={seek.button}>\n <span className={iconContainer}>\n <SeekIcon className={cn(icon, iconFlipped)} />\n <span className={cn(seek.label, seek.labelBackward)}>{SEEK_TIME}</span>\n </span>\n </Button>\n )}\n />\n }\n />\n <Tooltip.Popup className={cn(popup.tooltip)}>Seek backward {SEEK_TIME} seconds</Tooltip.Popup>\n </Tooltip.Root>\n\n <Tooltip.Root side=\"top\">\n <Tooltip.Trigger\n render={\n <SeekButton\n seconds={SEEK_TIME}\n render={(props) => (\n <Button variant=\"icon\" {...props} className={seek.button}>\n <span className={iconContainer}>\n <SeekIcon className={icon} />\n <span className={cn(seek.label, seek.labelForward)}>{SEEK_TIME}</span>\n </span>\n </Button>\n )}\n />\n }\n />\n <Tooltip.Popup className={cn(popup.tooltip)}>Seek forward {SEEK_TIME} seconds</Tooltip.Popup>\n </Tooltip.Root>\n </div>\n\n <div className={time.controls}>\n <Time.Group className={time.group}>\n <Time.Value type=\"current\" className={time.current} />\n <Time.Separator className={time.separator} />\n <Time.Value type=\"duration\" className={time.duration} />\n </Time.Group>\n\n <TimeSlider.Root render={(props) => <SliderRoot {...props} />}>\n <TimeSlider.Track render={(props) => <SliderTrack {...props} />}>\n <TimeSlider.Fill render={(props) => <SliderFill {...props} />} />\n <TimeSlider.Buffer render={(props) => <SliderFill type=\"buffer\" {...props} />} />\n </TimeSlider.Track>\n <TimeSlider.Thumb render={(props) => <SliderThumb {...props} />} />\n </TimeSlider.Root>\n </div>\n\n <div className={buttonGroup}>\n <Tooltip.Root side=\"top\">\n <Tooltip.Trigger\n render={\n <PlaybackRateButton\n render={(props) => <Button variant=\"icon\" {...props} className={playbackRate.button} />}\n />\n }\n />\n <Tooltip.Popup className={cn(popup.tooltip)}>Toggle playback rate</Tooltip.Popup>\n </Tooltip.Root>\n\n <Popover.Root openOnHover delay={200} closeDelay={100} side=\"left\">\n <Popover.Trigger\n render={\n <MuteButton\n render={(props) => (\n <Button variant=\"icon\" {...props} className={iconState.mute.button}>\n <VolumeOffIcon className={cn(icon, iconState.mute.volumeOff)} />\n <VolumeLowIcon className={cn(icon, iconState.mute.volumeLow)} />\n <VolumeHighIcon className={cn(icon, iconState.mute.volumeHigh)} />\n </Button>\n )}\n />\n }\n />\n <Popover.Popup className={cn(popup.volume)}>\n <VolumeSlider.Root\n orientation=\"horizontal\"\n thumbAlignment=\"edge\"\n render={(props) => <SliderRoot {...props} />}\n >\n <VolumeSlider.Track render={(props) => <SliderTrack {...props} />}>\n <VolumeSlider.Fill render={(props) => <SliderFill {...props} />} />\n </VolumeSlider.Track>\n <VolumeSlider.Thumb render={(props) => <SliderThumb persistent {...props} />} />\n </VolumeSlider.Root>\n </Popover.Popup>\n </Popover.Root>\n </div>\n </Tooltip.Provider>\n </div>\n </Container>\n );\n}\n"],"mappings":"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"}

package/dist/default/presets/audio/skin.css CHANGED Viewed

@@ -110,10 +110,6 @@
   letter-spacing: normal;
   -webkit-font-smoothing: auto;
   -moz-osx-font-smoothing: auto;
-  &:fullscreen {
-    border-radius: 0;
-  }
 }
 /* ==========================================================================
@@ -631,7 +627,7 @@
   --media-surface-inner-border-color: oklch(1 0 0 / 0.1);
   --media-surface-outer-border-color: oklch(0 0 0 / 0.05);
   --media-surface-shadow-color: oklch(0 0 0 / 0.15);
-  --media-surface-backdrop-filter: blur(8px) brightness(0.98) saturate(1.2);
+  --media-surface-backdrop-filter: blur(16px) saturate(1.5);
   @media (prefers-color-scheme: dark) {
     --media-border-color: oklch(1 0 0 / 0.1);

package/dist/default/presets/audio/skin.js CHANGED Viewed

@@ -14,6 +14,7 @@ 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";
@@ -48,9 +49,9 @@ function AudioSkin(props) {
 	return /* @__PURE__ */ jsxs(Container, {
 		className: cn("media-default-skin media-default-skin--audio", className),
 		...rest,
-		children: [children, /* @__PURE__ */ jsxs("div", {
+		children: [children, /* @__PURE__ */ jsx("div", {
 			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, {
@@ -170,7 +171,7 @@ function AudioSkin(props) {
 						})
 					})]
 				})
-			]
+			] })
 		})]
 	});
 }

package/dist/default/presets/audio/skin.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"skin.js","names":["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/audio/skin.tsx"],"sourcesContent":["import {\n PauseIcon,\n PlayIcon,\n RestartIcon,\n SeekIcon,\n VolumeHighIcon,\n VolumeLowIcon,\n VolumeOffIcon,\n} from '@videojs/icons/react';\nimport { cn } from '@videojs/utils/style';\nimport { type ComponentProps, forwardRef, type ReactNode } from 'react';\nimport { Container, usePlayer } from '@/player/context';\nimport { MuteButton } from '@/ui/mute-button';\nimport { PlayButton } from '@/ui/play-button';\nimport { PlaybackRateButton } from '@/ui/playback-rate-button';\nimport { Popover } from '@/ui/popover';\nimport { SeekButton } from '@/ui/seek-button';\nimport { Time } from '@/ui/time';\nimport { TimeSlider } from '@/ui/time-slider';\nimport { Tooltip } from '@/ui/tooltip';\nimport { VolumeSlider } from '@/ui/volume-slider';\nimport type { BaseSkinProps } from '../types';\n\nconst SEEK_TIME = 10;\n\nexport type AudioSkinProps = BaseSkinProps;\n\nconst Button = forwardRef<HTMLButtonElement, ComponentProps<'button'>>(function Button({ className, ...props }, ref) {\n return <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\nexport function AudioSkin(props: AudioSkinProps): ReactNode {\n const { children, className, ...rest } = props;\n\n return (\n <Container className={cn('media-default-skin media-default-skin--audio', className)} {...rest}>\n {children}\n\n <div 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 </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,SAAgB,UAAU,OAAkC;CAC1D,MAAM,EAAE,UAAU,WAAW,GAAG,SAAS;AAEzC,QACE,qBAAC;EAAU,WAAW,GAAG,gDAAgD,UAAU;EAAE,GAAI;aACtF,UAED,~~qBAAC~~;GAAI,WAAU~~;;IACb~~,qBAACA;KAAa,MAAK;gBACjB,oBAACC,kBACC,QACE,oBAAC,cACC,SAAS,UACP,qBAAC;MAAO,GAAI;MAAO,WAAU;;OAC3B,oBAAC,eAAY,WAAU,mCAAmC;OAC1D,oBAAC,YAAS,WAAU,gCAAgC;OACpD,oBAAC,aAAU,WAAU,iCAAiC;;OAC/C,GAEX,GAEJ,EACF,oBAACC;MAAc,WAAU;gBACvB,oBAAC,cAAY;OACC;MACH;IAEf,qBAACF;KAAa,MAAK;gBACjB,oBAACC,kBACC,QACE,oBAAC;MACC,SAAS,CAAC;MACV,SAAS,UACP,oBAAC;OAAO,GAAI;OAAO,WAAU;iBAC3B,qBAAC;QAAK,WAAU;mBACd,oBAAC,YAAS,WAAU,oDAAoD,EACxE,oBAAC;SAAK,WAAU;mBAAqB;UAAiB;SACjD;QACA;OAEX,GAEJ,EACF,qBAACC;MAAc,WAAU;;OAA8B;OAAe;OAAU;;OAAwB;MAC3F;IAEf,qBAACF;KAAa,MAAK;gBACjB,oBAACC,kBACC,QACE,oBAAC;MACC,SAAS;MACT,SAAS,UACP,oBAAC;OAAO,GAAI;OAAO,WAAU;iBAC3B,qBAAC;QAAK,WAAU;mBACd,oBAAC,YAAS,WAAU,gCAAgC,EACpD,oBAAC;SAAK,WAAU;mBAAqB;UAAiB;SACjD;QACA;OAEX,GAEJ,EACF,qBAACC;MAAc,WAAU;;OAA8B;OAAc;OAAU;;OAAwB;MAC1F;IAEf,qBAACC;KAAW,WAAU;;MACpB,oBAACC;OAAW,MAAK;OAAU,WAAU;QAAsB;MAC3D,qBAACC;OAAgB,WAAU;kBACzB,qBAACC;QAAiB,WAAU;mBAC1B,oBAACC,cAAgB,WAAU,uBAAuB,EAClD,oBAACC,gBAAkB,WAAU,yBAAyB;SACrC,EACnB,oBAACC,eAAiB,WAAU,wBAAwB;QACpC;MAClB,oBAACL;OAAW,MAAK;OAAW,WAAU;QAAsB;;MACjD;IAEb,qBAACJ;KAAa,MAAK;gBACjB,oBAACC,kBACC,QACE,oBAAC,sBACC,SAAS,UAAU,oBAAC;MAAO,GAAI;MAAO,WAAU;OAAmD,GACnG,GAEJ,EACF,oBAACC;MAAc,WAAU;gBAA8B;OAAoC;MAC9E;IAEf,qBAACQ;KAAa;KAAY,OAAO;KAAK,YAAY;KAAK,MAAK;gBAC1D,oBAACC,kBACC,QACE,oBAAC,cACC,SAAS,UACP,qBAAC;MAAO,GAAI;MAAO,WAAU;;OAC3B,oBAAC,iBAAc,WAAU,sCAAsC;OAC/D,oBAAC,iBAAc,WAAU,sCAAsC;OAC/D,oBAAC,kBAAe,WAAU,uCAAuC;;OAC1D,GAEX,GAEJ,EACF,oBAACC;MAAc,WAAU;gBACvB,qBAACC;OAAkB,WAAU;OAAe,aAAY;OAAW,gBAAe;kBAChF,oBAACC;QAAmB,WAAU;kBAC5B,oBAACC,cAAkB,WAAU,uBAAuB;SACjC,EACrB,oBAACC,eAAmB,WAAU,wDAAwD;QACpE;OACN;MACH~~;;IACX~~;GACI"}
1	+ {"version":3,"file":"skin.js","names":["Tooltip.Provider","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/audio/skin.tsx"],"sourcesContent":["import {\n PauseIcon,\n PlayIcon,\n RestartIcon,\n SeekIcon,\n VolumeHighIcon,\n VolumeLowIcon,\n VolumeOffIcon,\n} from '@videojs/icons/react';\nimport { cn } from '@videojs/utils/style';\nimport { type ComponentProps, forwardRef, type ReactNode } from 'react';\nimport { Container, usePlayer } from '@/player/context';\nimport { MuteButton } from '@/ui/mute-button';\nimport { PlayButton } from '@/ui/play-button';\nimport { PlaybackRateButton } from '@/ui/playback-rate-button';\nimport { Popover } from '@/ui/popover';\nimport { SeekButton } from '@/ui/seek-button';\nimport { Time } from '@/ui/time';\nimport { TimeSlider } from '@/ui/time-slider';\nimport { Tooltip } from '@/ui/tooltip';\nimport { VolumeSlider } from '@/ui/volume-slider';\nimport type { BaseSkinProps } from '../types';\n\nconst SEEK_TIME = 10;\n\nexport type AudioSkinProps = BaseSkinProps;\n\nconst Button = forwardRef<HTMLButtonElement, ComponentProps<'button'>>(function Button({ className, ...props }, ref) {\n return <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\nexport function AudioSkin(props: AudioSkinProps): ReactNode {\n const { children, className, ...rest } = props;\n\n return (\n <Container className={cn('media-default-skin media-default-skin--audio', className)} {...rest}>\n {children}\n\n <div className=\"media-surface media-controls\">\n <Tooltip.Provider>\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 </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,SAAgB,UAAU,OAAkC;CAC1D,MAAM,EAAE,UAAU,WAAW,GAAG,SAAS;AAEzC,QACE,qBAAC;EAAU,WAAW,GAAG,gDAAgD,UAAU;EAAE,GAAI;aACtF,UAED,oBAAC;GAAI,WAAU;aACb,qBAACA;IACC,qBAACC;KAAa,MAAK;gBACjB,oBAACC,kBACC,QACE,oBAAC,cACC,SAAS,UACP,qBAAC;MAAO,GAAI;MAAO,WAAU;;OAC3B,oBAAC,eAAY,WAAU,mCAAmC;OAC1D,oBAAC,YAAS,WAAU,gCAAgC;OACpD,oBAAC,aAAU,WAAU,iCAAiC;;OAC/C,GAEX,GAEJ,EACF,oBAACC;MAAc,WAAU;gBACvB,oBAAC,cAAY;OACC;MACH;IAEf,qBAACF;KAAa,MAAK;gBACjB,oBAACC,kBACC,QACE,oBAAC;MACC,SAAS,CAAC;MACV,SAAS,UACP,oBAAC;OAAO,GAAI;OAAO,WAAU;iBAC3B,qBAAC;QAAK,WAAU;mBACd,oBAAC,YAAS,WAAU,oDAAoD,EACxE,oBAAC;SAAK,WAAU;mBAAqB;UAAiB;SACjD;QACA;OAEX,GAEJ,EACF,qBAACC;MAAc,WAAU;;OAA8B;OAAe;OAAU;;OAAwB;MAC3F;IAEf,qBAACF;KAAa,MAAK;gBACjB,oBAACC,kBACC,QACE,oBAAC;MACC,SAAS;MACT,SAAS,UACP,oBAAC;OAAO,GAAI;OAAO,WAAU;iBAC3B,qBAAC;QAAK,WAAU;mBACd,oBAAC,YAAS,WAAU,gCAAgC,EACpD,oBAAC;SAAK,WAAU;mBAAqB;UAAiB;SACjD;QACA;OAEX,GAEJ,EACF,qBAACC;MAAc,WAAU;;OAA8B;OAAc;OAAU;;OAAwB;MAC1F;IAEf,qBAACC;KAAW,WAAU;;MACpB,oBAACC;OAAW,MAAK;OAAU,WAAU;QAAsB;MAC3D,qBAACC;OAAgB,WAAU;kBACzB,qBAACC;QAAiB,WAAU;mBAC1B,oBAACC,cAAgB,WAAU,uBAAuB,EAClD,oBAACC,gBAAkB,WAAU,yBAAyB;SACrC,EACnB,oBAACC,eAAiB,WAAU,wBAAwB;QACpC;MAClB,oBAACL;OAAW,MAAK;OAAW,WAAU;QAAsB;;MACjD;IAEb,qBAACJ;KAAa,MAAK;gBACjB,oBAACC,kBACC,QACE,oBAAC,sBACC,SAAS,UAAU,oBAAC;MAAO,GAAI;MAAO,WAAU;OAAmD,GACnG,GAEJ,EACF,oBAACC;MAAc,WAAU;gBAA8B;OAAoC;MAC9E;IAEf,qBAACQ;KAAa;KAAY,OAAO;KAAK,YAAY;KAAK,MAAK;gBAC1D,oBAACC,kBACC,QACE,oBAAC,cACC,SAAS,UACP,qBAAC;MAAO,GAAI;MAAO,WAAU;;OAC3B,oBAAC,iBAAc,WAAU,sCAAsC;OAC/D,oBAAC,iBAAc,WAAU,sCAAsC;OAC/D,oBAAC,kBAAe,WAAU,uCAAuC;;OAC1D,GAEX,GAEJ,EACF,oBAACC;MAAc,WAAU;gBACvB,qBAACC;OAAkB,WAAU;OAAe,aAAY;OAAW,gBAAe;kBAChF,oBAACC;QAAmB,WAAU;kBAC5B,oBAACC,cAAkB,WAAU,uBAAuB;SACjC,EACrB,oBAACC,eAAmB,WAAU,wDAAwD;QACpE;OACN;MACH;OACE;IACf;GACI"}

package/dist/default/presets/audio/skin.tailwind.js CHANGED Viewed

@@ -14,16 +14,18 @@ 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 { iconState } from "../../skins/dist/default/shared/tailwind/icon-state.js";
 import { button } from "../../skins/dist/default/default/tailwind/components/button.js";
 import { icon, iconContainer, iconFlipped } from "../../skins/dist/default/default/tailwind/components/icon.js";
 import { playbackRate } from "../../skins/dist/default/default/tailwind/components/playback-rate.js";
 import { root } from "../../skins/dist/default/default/tailwind/components/root.js";
 import { seek } from "../../skins/dist/default/default/tailwind/components/seek.js";
 import { time } from "../../skins/dist/default/default/tailwind/components/time.js";
-import { controls, iconState, popup, slider } from "../../skins/dist/default/default/tailwind/audio.tailwind.js";
+import { controls, popup, slider } from "../../skins/dist/default/default/tailwind/audio.tailwind.js";
 import PauseIcon from "../../icons/dist/react/default/pause.js";
 import PlayIcon from "../../icons/dist/react/default/play.js";
 import RestartIcon from "../../icons/dist/react/default/restart.js";
@@ -83,9 +85,9 @@ function AudioSkinTailwind(props) {
 	return /* @__PURE__ */ jsxs(Container, {
 		className: cn(root, className),
 		...rest,
-		children: [children, /* @__PURE__ */ jsxs("div", {
+		children: [children, /* @__PURE__ */ jsx("div", {
 			className: 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, {
@@ -216,7 +218,7 @@ function AudioSkinTailwind(props) {
 						})
 					})]
 				})
-			]
+			] })
 		})]
 	});
 }

package/dist/default/presets/audio/skin.tailwind.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"skin.tailwind.js","names":["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/audio/skin.tailwind.tsx"],"sourcesContent":["import {\n PauseIcon,\n PlayIcon,\n RestartIcon,\n SeekIcon,\n VolumeHighIcon,\n VolumeLowIcon,\n VolumeOffIcon,\n} from '@videojs/icons/react';\nimport {\n button,\n controls,\n icon,\n iconContainer,\n iconFlipped,\n iconState,\n playbackRate,\n popup,\n root,\n seek,\n slider,\n time,\n} from '@videojs/skins/default/tailwind/audio.tailwind';\nimport { cn } from '@videojs/utils/style';\nimport { type ComponentProps, forwardRef, type ReactNode } from 'react';\nimport { Container, usePlayer } from '@/player/context';\nimport { MuteButton } from '@/ui/mute-button';\nimport { PlayButton } from '@/ui/play-button';\nimport { PlaybackRateButton } from '@/ui/playback-rate-button';\nimport { Popover } from '@/ui/popover';\nimport { SeekButton } from '@/ui/seek-button';\nimport { Time } from '@/ui/time';\nimport { TimeSlider } from '@/ui/time-slider';\nimport { Tooltip } from '@/ui/tooltip';\nimport { VolumeSlider } from '@/ui/volume-slider';\nimport type { AudioSkinProps } from './skin';\n\nconst SEEK_TIME = 10;\n\n/* --------------------------------------- Components ---------------------------------------- /\n\nconst Button = forwardRef<HTMLButtonElement, ComponentProps<'button'> & { variant?: 'icon' }>(function Button(\n { className, variant, ...props },\n ref\n) {\n return (\n <button\n ref={ref}\n type=\"button\"\n className={cn(button.base, variant === 'icon' ? button.icon : button.default, className)}\n {...props}\n />\n );\n});\n\nconst SliderRoot = forwardRef<HTMLDivElement, ComponentProps<'div'>>(function SliderRoot({ className, ...props }, ref) {\n return <div ref={ref} className={cn(slider.root, className)} {...props} />;\n});\n\nconst SliderTrack = forwardRef<HTMLDivElement, ComponentProps<'div'>>(function SliderTrack(\n { className, ...props },\n ref\n) {\n return <div ref={ref} className={cn(slider.track, className)} {...props} />;\n});\n\nconst SliderFill = forwardRef<HTMLDivElement, ComponentProps<'div'> & { type?: 'fill' \| 'buffer' }>(function SliderFill(\n { type = 'fill', className, ...props },\n ref\n) {\n return (\n <div\n ref={ref}\n className={cn(slider.fill.base, type === 'fill' ? slider.fill.fill : slider.fill.buffer, className)}\n {...props}\n />\n );\n});\n\nconst SliderThumb = forwardRef<HTMLDivElement, ComponentProps<'div'> & { persistent?: boolean }>(function SliderThumb(\n { persistent, className, ...props },\n ref\n) {\n return (\n <div\n ref={ref}\n className={cn(slider.thumb.base, persistent ? slider.thumb.persistent : slider.thumb.interactive, className)}\n {...props}\n />\n );\n});\n\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\n/ ------------------------------------------ Skin ------------------------------------------- */\n\nexport function AudioSkinTailwind(props: AudioSkinProps): ReactNode {\n const { children, className, ...rest } = props;\n\n return (\n <Container className={cn(root, className)} {...rest}>\n {children}\n\n <div className={controls}>\n <Tooltip.Root side=\"top\">\n <Tooltip.Trigger\n render={\n <PlayButton\n render={(props) => (\n <Button variant=\"icon\" {...props} className={iconState.play.button}>\n <RestartIcon className={cn(icon, iconState.play.restart)} />\n <PlayIcon className={cn(icon, iconState.play.play)} />\n <PauseIcon className={cn(icon, iconState.play.pause)} />\n </Button>\n )}\n />\n }\n />\n <Tooltip.Popup className={cn(popup.tooltip)}>\n <PlayLabel />\n </Tooltip.Popup>\n </Tooltip.Root>\n\n <Tooltip.Root side=\"top\">\n <Tooltip.Trigger\n render={\n <SeekButton\n seconds={-SEEK_TIME}\n render={(props) => (\n <Button variant=\"icon\" {...props} className={seek.button}>\n <span className={iconContainer}>\n <SeekIcon className={cn(icon, iconFlipped)} />\n <span className={cn(seek.label, seek.labelBackward)}>{SEEK_TIME}</span>\n </span>\n </Button>\n )}\n />\n }\n />\n <Tooltip.Popup className={cn(popup.tooltip)}>Seek backward {SEEK_TIME} seconds</Tooltip.Popup>\n </Tooltip.Root>\n\n <Tooltip.Root side=\"top\">\n <Tooltip.Trigger\n render={\n <SeekButton\n seconds={SEEK_TIME}\n render={(props) => (\n <Button variant=\"icon\" {...props} className={seek.button}>\n <span className={iconContainer}>\n <SeekIcon className={icon} />\n <span className={cn(seek.label, seek.labelForward)}>{SEEK_TIME}</span>\n </span>\n </Button>\n )}\n />\n }\n />\n <Tooltip.Popup className={cn(popup.tooltip)}>Seek forward {SEEK_TIME} seconds</Tooltip.Popup>\n </Tooltip.Root>\n\n <Time.Group className={time.group}>\n <Time.Value type=\"current\" className={time.current} />\n <TimeSlider.Root render={(props) => <SliderRoot {...props} />}>\n <TimeSlider.Track render={(props) => <SliderTrack {...props} />}>\n <TimeSlider.Fill render={(props) => <SliderFill {...props} />} />\n <TimeSlider.Buffer render={(props) => <SliderFill type=\"buffer\" {...props} />} />\n </TimeSlider.Track>\n <TimeSlider.Thumb render={(props) => <SliderThumb {...props} />} />\n </TimeSlider.Root>\n <Time.Value type=\"duration\" className={time.duration} />\n </Time.Group>\n\n <Tooltip.Root side=\"top\">\n <Tooltip.Trigger\n render={\n <PlaybackRateButton\n render={(props) => <Button variant=\"icon\" {...props} className={playbackRate.button} />}\n />\n }\n />\n <Tooltip.Popup className={cn(popup.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 variant=\"icon\" {...props} className={iconState.mute.button}>\n <VolumeOffIcon className={cn(icon, iconState.mute.volumeOff)} />\n <VolumeLowIcon className={cn(icon, iconState.mute.volumeLow)} />\n <VolumeHighIcon className={cn(icon, iconState.mute.volumeHigh)} />\n </Button>\n )}\n />\n }\n />\n <Popover.Popup className={cn(popup.popover, popup.volume)}>\n <VolumeSlider.Root\n orientation=\"vertical\"\n thumbAlignment=\"edge\"\n render={(props) => <SliderRoot {...props} />}\n >\n <VolumeSlider.Track render={(props) => <SliderTrack {...props} />}>\n <VolumeSlider.Fill render={(props) => <SliderFill {...props} />} />\n </VolumeSlider.Track>\n <VolumeSlider.Thumb render={(props) => <SliderThumb persistent {...props} />} />\n </VolumeSlider.Root>\n </Popover.Popup>\n </Popover.Root>\n </div>\n </Container>\n );\n}\n"],"mappings":"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"}
1	+ {"version":3,"file":"skin.tailwind.js","names":["Tooltip.Provider","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/audio/skin.tailwind.tsx"],"sourcesContent":["import {\n PauseIcon,\n PlayIcon,\n RestartIcon,\n SeekIcon,\n VolumeHighIcon,\n VolumeLowIcon,\n VolumeOffIcon,\n} from '@videojs/icons/react';\nimport {\n button,\n controls,\n icon,\n iconContainer,\n iconFlipped,\n iconState,\n playbackRate,\n popup,\n root,\n seek,\n slider,\n time,\n} from '@videojs/skins/default/tailwind/audio.tailwind';\nimport { cn } from '@videojs/utils/style';\nimport { type ComponentProps, forwardRef, type ReactNode } from 'react';\nimport { Container, usePlayer } from '@/player/context';\nimport { MuteButton } from '@/ui/mute-button';\nimport { PlayButton } from '@/ui/play-button';\nimport { PlaybackRateButton } from '@/ui/playback-rate-button';\nimport { Popover } from '@/ui/popover';\nimport { SeekButton } from '@/ui/seek-button';\nimport { Time } from '@/ui/time';\nimport { TimeSlider } from '@/ui/time-slider';\nimport { Tooltip } from '@/ui/tooltip';\nimport { VolumeSlider } from '@/ui/volume-slider';\nimport type { AudioSkinProps } from './skin';\n\nconst SEEK_TIME = 10;\n\n/* --------------------------------------- Components ---------------------------------------- /\n\nconst Button = forwardRef<HTMLButtonElement, ComponentProps<'button'> & { variant?: 'icon' }>(function Button(\n { className, variant, ...props },\n ref\n) {\n return (\n <button\n ref={ref}\n type=\"button\"\n className={cn(button.base, variant === 'icon' ? button.icon : button.default, className)}\n {...props}\n />\n );\n});\n\nconst SliderRoot = forwardRef<HTMLDivElement, ComponentProps<'div'>>(function SliderRoot({ className, ...props }, ref) {\n return <div ref={ref} className={cn(slider.root, className)} {...props} />;\n});\n\nconst SliderTrack = forwardRef<HTMLDivElement, ComponentProps<'div'>>(function SliderTrack(\n { className, ...props },\n ref\n) {\n return <div ref={ref} className={cn(slider.track, className)} {...props} />;\n});\n\nconst SliderFill = forwardRef<HTMLDivElement, ComponentProps<'div'> & { type?: 'fill' \| 'buffer' }>(function SliderFill(\n { type = 'fill', className, ...props },\n ref\n) {\n return (\n <div\n ref={ref}\n className={cn(slider.fill.base, type === 'fill' ? slider.fill.fill : slider.fill.buffer, className)}\n {...props}\n />\n );\n});\n\nconst SliderThumb = forwardRef<HTMLDivElement, ComponentProps<'div'> & { persistent?: boolean }>(function SliderThumb(\n { persistent, className, ...props },\n ref\n) {\n return (\n <div\n ref={ref}\n className={cn(slider.thumb.base, persistent ? slider.thumb.persistent : slider.thumb.interactive, className)}\n {...props}\n />\n );\n});\n\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\n/ ------------------------------------------ Skin ------------------------------------------- */\n\nexport function AudioSkinTailwind(props: AudioSkinProps): ReactNode {\n const { children, className, ...rest } = props;\n\n return (\n <Container className={cn(root, className)} {...rest}>\n {children}\n\n <div className={controls}>\n <Tooltip.Provider>\n <Tooltip.Root side=\"top\">\n <Tooltip.Trigger\n render={\n <PlayButton\n render={(props) => (\n <Button variant=\"icon\" {...props} className={iconState.play.button}>\n <RestartIcon className={cn(icon, iconState.play.restart)} />\n <PlayIcon className={cn(icon, iconState.play.play)} />\n <PauseIcon className={cn(icon, iconState.play.pause)} />\n </Button>\n )}\n />\n }\n />\n <Tooltip.Popup className={cn(popup.tooltip)}>\n <PlayLabel />\n </Tooltip.Popup>\n </Tooltip.Root>\n\n <Tooltip.Root side=\"top\">\n <Tooltip.Trigger\n render={\n <SeekButton\n seconds={-SEEK_TIME}\n render={(props) => (\n <Button variant=\"icon\" {...props} className={seek.button}>\n <span className={iconContainer}>\n <SeekIcon className={cn(icon, iconFlipped)} />\n <span className={cn(seek.label, seek.labelBackward)}>{SEEK_TIME}</span>\n </span>\n </Button>\n )}\n />\n }\n />\n <Tooltip.Popup className={cn(popup.tooltip)}>Seek backward {SEEK_TIME} seconds</Tooltip.Popup>\n </Tooltip.Root>\n\n <Tooltip.Root side=\"top\">\n <Tooltip.Trigger\n render={\n <SeekButton\n seconds={SEEK_TIME}\n render={(props) => (\n <Button variant=\"icon\" {...props} className={seek.button}>\n <span className={iconContainer}>\n <SeekIcon className={icon} />\n <span className={cn(seek.label, seek.labelForward)}>{SEEK_TIME}</span>\n </span>\n </Button>\n )}\n />\n }\n />\n <Tooltip.Popup className={cn(popup.tooltip)}>Seek forward {SEEK_TIME} seconds</Tooltip.Popup>\n </Tooltip.Root>\n\n <Time.Group className={time.group}>\n <Time.Value type=\"current\" className={time.current} />\n <TimeSlider.Root render={(props) => <SliderRoot {...props} />}>\n <TimeSlider.Track render={(props) => <SliderTrack {...props} />}>\n <TimeSlider.Fill render={(props) => <SliderFill {...props} />} />\n <TimeSlider.Buffer render={(props) => <SliderFill type=\"buffer\" {...props} />} />\n </TimeSlider.Track>\n <TimeSlider.Thumb render={(props) => <SliderThumb {...props} />} />\n </TimeSlider.Root>\n <Time.Value type=\"duration\" className={time.duration} />\n </Time.Group>\n\n <Tooltip.Root side=\"top\">\n <Tooltip.Trigger\n render={\n <PlaybackRateButton\n render={(props) => <Button variant=\"icon\" {...props} className={playbackRate.button} />}\n />\n }\n />\n <Tooltip.Popup className={cn(popup.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 variant=\"icon\" {...props} className={iconState.mute.button}>\n <VolumeOffIcon className={cn(icon, iconState.mute.volumeOff)} />\n <VolumeLowIcon className={cn(icon, iconState.mute.volumeLow)} />\n <VolumeHighIcon className={cn(icon, iconState.mute.volumeHigh)} />\n </Button>\n )}\n />\n }\n />\n <Popover.Popup className={cn(popup.popover, popup.volume)}>\n <VolumeSlider.Root\n orientation=\"vertical\"\n thumbAlignment=\"edge\"\n render={(props) => <SliderRoot {...props} />}\n >\n <VolumeSlider.Track render={(props) => <SliderTrack {...props} />}>\n <VolumeSlider.Fill render={(props) => <SliderFill {...props} />} />\n </VolumeSlider.Track>\n <VolumeSlider.Thumb render={(props) => <SliderThumb persistent {...props} />} />\n </VolumeSlider.Root>\n </Popover.Popup>\n </Popover.Root>\n </Tooltip.Provider>\n </div>\n </Container>\n );\n}\n"],"mappings":"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"}

package/dist/default/presets/video/minimal-skin.css CHANGED Viewed

@@ -125,6 +125,8 @@
   position: relative;
   isolation: isolate;
   display: block;
+  height: 100%;
+  width: 100%;
   container: media-root / inline-size;
   border-radius: var(--media-border-radius, 0.75rem);
   font-family:
@@ -149,8 +151,13 @@
   display: block;
   width: 100%;
   height: 100%;
+}
+.media-minimal-skin ::slotted(video) {
   border-radius: var(--media-border-radius, 0.75rem);
 }
+.media-minimal-skin video {
+  border-radius: inherit;
+}
 /* ==========================================================================
    Poster Image
@@ -171,6 +178,19 @@
   }
 }
+/* ==========================================================================
+   Fullscreen
+   ========================================================================== */
+.media-minimal-skin:fullscreen video,
+.media-minimal-skin:fullscreen ::slotted(video),
+.media-minimal-skin > img {
+  object-fit: contain;
+}
+.media-minimal-skin:fullscreen ::slotted(video) {
+  border-radius: 0;
+}
 /* ==========================================================================
    Overlay / Scrim
    ========================================================================== */
@@ -180,7 +200,7 @@
   inset: 0;
   border-radius: inherit;
   background-image: linear-gradient(to top, oklch(0 0 0 / 0.7), oklch(0 0 0 / 0.5) 7.5rem, oklch(0 0 0 / 0));
-  backdrop-filter: blur(0) saturate(1.2) brightness(0.9);
+  backdrop-filter: blur(0) saturate(1.5);
   opacity: 0;
   transition-property: opacity, backdrop-filter;
   transition-duration: 500ms;
@@ -201,7 +221,7 @@
 }
 .media-minimal-skin .media-error[data-open] ~ .media-overlay {
-  backdrop-filter: blur(8px) saturate(1.2) brightness(0.9);
+  backdrop-filter: blur(16px) saturate(1.5);
 }
 /* ==========================================================================
@@ -675,7 +695,7 @@
   padding: 0.25rem 0.5rem;
   border-radius: 0.25rem;
   background-color: oklch(1 0 0 / 0.1);
-  backdrop-filter: blur(64px) brightness(0.9) saturate(1.5);
+  backdrop-filter: blur(16px) saturate(1.5);
   box-shadow:
     0 4px 6px -1px oklch(0 0 0 / 0.1),
     0 2px 4px -2px oklch(0 0 0 / 0.1);
@@ -728,20 +748,21 @@
 .media-minimal-skin--video {
   background: oklch(0 0 0);
+  --media-border-color: oklch(0 0 0 / 0.15);
-  /* Border ring */
+  @media (prefers-color-scheme: dark) {
+    --media-border-color: oklch(1 0 0 / 0.15);
+  }
+  /* Inner border ring */
   &::after {
     content: "";
     position: absolute;
     inset: 0;
     z-index: 10;
     border-radius: inherit;
-    box-shadow: inset 0 0 0 1px oklch(0 0 0 / 0.15);
+    box-shadow: inset 0 0 0 1px var(--media-border-color);
     pointer-events: none;
-    @media (prefers-color-scheme: dark) {
-      box-shadow: inset 0 0 0 1px oklch(1 0 0 / 0.15);
-    }
   }
   /* Fullscreen */