@videojs/react 10.0.0-beta.23 → 10.0.0-beta.24

package/dist/dev/skins/dist/default/minimal/tailwind/components/playback-rate.js

@@ -0,0 +1,6 @@
+//#region ../skins/dist/default/minimal/tailwind/components/playback-rate.js
+const playbackRate = { button: `tabular-nums after:w-[4ch] after:content-[attr(data-rate)_'×'] data-[inline-rate-label]:after:content-none` };
+//#endregion
+export { playbackRate };
+
+//# sourceMappingURL=playback-rate.js.map

package/dist/dev/skins/dist/default/minimal/tailwind/components/playback-rate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"playback-rate.js","names":[],"sources":["../../../../../../../../../skins/dist/default/minimal/tailwind/components/playback-rate.js"],"sourcesContent":["//#region src/minimal/tailwind/components/playback-rate.ts\nconst playbackRate = { button: `tabular-nums after:w-[4ch] after:content-[attr(data-rate)_'×'] data-[inline-rate-label]:after:content-none` };\n//#endregion\nexport { playbackRate };\n\n//# sourceMappingURL=playback-rate.js.map"],"mappings":";AACA,MAAM,eAAe,EAAE,QAAQ,8GAA8G"}

package/dist/dev/skins/dist/default/minimal/tailwind/components/preview.js

@@ -5,7 +5,7 @@ const preview = {
 	thumbnailWrapper: "relative rounded-lg bg-black/90",
 	thumbnail: cn("block rounded-[inherit] transition-opacity duration-150 ease-out", "data-loading:opacity-0"),
 	time: "mt-2 block text-center tabular-nums",
-	spinner: cn("absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 opacity-0", "transition-opacity duration-150 ease-out", "group-has-[[role=img][data-loading]]/preview:opacity-100")
+	spinner: cn("absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 opacity-0", "transition-opacity duration-150 ease-out", "group-not-has-[[role=img][data-loading]]/preview:[--media-spinner-animation:none] group-has-[[role=img][data-loading]]/preview:opacity-100")
 };
 //#endregion
 export { preview };

package/dist/dev/skins/dist/default/minimal/tailwind/components/preview.js.map

@@ -1 +1 @@
-{"version":3,"file":"preview.js","names":[],"sources":["../../../../../../../../../skins/dist/default/minimal/tailwind/components/preview.js"],"sourcesContent":["import { cn } from \"@videojs/utils/style\";\n//#region src/minimal/tailwind/components/preview.ts\nconst preview = {\n\troot: \"group/preview pointer-events-none\",\n\tthumbnailWrapper: \"relative rounded-lg bg-black/90\",\n\tthumbnail: cn(\"block rounded-[inherit] transition-opacity duration-150 ease-out\", \"data-loading:opacity-0\"),\n\ttime: \"mt-2 block text-center tabular-nums\",\n\tspinner: cn(\"absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 opacity-0\", \"transition-opacity duration-150 ease-out\", \"group-has-[[role=img][data-loading]]/preview:opacity-100\")\n};\n//#endregion\nexport { preview };\n\n//# sourceMappingURL=preview.js.map"],"mappings":";;AAEA,MAAM,UAAU;CACf,MAAM;CACN,kBAAkB;CAClB,WAAW,GAAG,oEAAoE,yBAAyB;CAC3G,MAAM;CACN,SAAS,GAAG,yEAAyE,4CAA4C,2DAA2D;CAC5L"}
+{"version":3,"file":"preview.js","names":[],"sources":["../../../../../../../../../skins/dist/default/minimal/tailwind/components/preview.js"],"sourcesContent":["import { cn } from \"@videojs/utils/style\";\n//#region src/minimal/tailwind/components/preview.ts\nconst preview = {\n\troot: \"group/preview pointer-events-none\",\n\tthumbnailWrapper: \"relative rounded-lg bg-black/90\",\n\tthumbnail: cn(\"block rounded-[inherit] transition-opacity duration-150 ease-out\", \"data-loading:opacity-0\"),\n\ttime: \"mt-2 block text-center tabular-nums\",\n\tspinner: cn(\"absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 opacity-0\", \"transition-opacity duration-150 ease-out\", \"group-not-has-[[role=img][data-loading]]/preview:[--media-spinner-animation:none] group-has-[[role=img][data-loading]]/preview:opacity-100\")\n};\n//#endregion\nexport { preview };\n\n//# sourceMappingURL=preview.js.map"],"mappings":";;AAEA,MAAM,UAAU;CACf,MAAM;CACN,kBAAkB;CAClB,WAAW,GAAG,oEAAoE,yBAAyB;CAC3G,MAAM;CACN,SAAS,GAAG,yEAAyE,4CAA4C,6IAA6I;CAC9Q"}

package/dist/dev/skins/dist/default/minimal/tailwind/components/reset.js

@@ -0,0 +1,7 @@
+import { cn } from "@videojs/utils/style";
+//#region ../skins/dist/default/minimal/tailwind/components/reset.js
+const reset = cn("**:box-border", "[&_[hidden][hidden]]:hidden", "[&_button]:font-[inherit]", "motion-safe:[interpolate-size:allow-keywords]");
+//#endregion
+export { reset };
+
+//# sourceMappingURL=reset.js.map

package/dist/dev/skins/dist/default/minimal/tailwind/components/reset.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"reset.js","names":[],"sources":["../../../../../../../../../skins/dist/default/minimal/tailwind/components/reset.js"],"sourcesContent":["import { cn } from \"@videojs/utils/style\";\n//#region src/minimal/tailwind/components/reset.ts\nconst reset = cn(\"**:box-border\", \"[&_[hidden][hidden]]:hidden\", \"[&_button]:font-[inherit]\", \"motion-safe:[interpolate-size:allow-keywords]\");\n//#endregion\nexport { reset };\n\n//# sourceMappingURL=reset.js.map"],"mappings":";;AAEA,MAAM,QAAQ,GAAG,iBAAiB,+BAA+B,6BAA6B,gDAAgD"}

package/dist/dev/skins/dist/default/minimal/tailwind/components/root.js

@@ -1,6 +1,7 @@
+import { reset } from "./reset.js";
 import { cn } from "@videojs/utils/style";
 //#region ../skins/dist/default/minimal/tailwind/components/root.js
-const root = cn("block relative isolate @container/media-root", "rounded-(--media-border-radius,0.75rem)", "font-[Inter_Variable,Inter,ui-sans-serif,system-ui,sans-serif] leading-normal subpixel-antialiased", "[&>*]:text-xs @3xl/media-root:[&>*]:text-sm", "**:box-border", "[&_button]:font-[inherit]", "motion-safe:[interpolate-size:allow-keywords]");
+const root = cn(reset, "block relative isolate h-full w-full @container/media-root", "rounded-(--media-border-radius,0.75rem)", "font-[Inter_Variable,Inter,ui-sans-serif,system-ui,sans-serif] text-[0.8125rem] leading-normal subpixel-antialiased", "outline-2 outline-transparent -outline-offset-4", "transition-[outline-offset,outline-color] duration-100 ease-out", "focus-visible:outline-current focus-visible:outline-offset-2", "[--media-current-shadow-color:oklch(from_currentColor_0_0_0/clamp(0,calc((l-0.5)*0.5),0.15))]", "[--media-current-shadow-color-subtle:oklch(from_var(--media-current-shadow-color)_l_c_h/calc(alpha*0.4))]", "[--media-icon-size:18px]");
 //#endregion
 export { root };
 

package/dist/dev/skins/dist/default/minimal/tailwind/components/root.js.map

@@ -1 +1 @@
-{"version":3,"file":"root.js","names":[],"sources":["../../../../../../../../../skins/dist/default/minimal/tailwind/components/root.js"],"sourcesContent":["import { cn } from \"@videojs/utils/style\";\n//#region src/minimal/tailwind/components/root.ts\nconst root = cn(\"block relative isolate @container/media-root\", \"rounded-(--media-border-radius,0.75rem)\", \"font-[Inter_Variable,Inter,ui-sans-serif,system-ui,sans-serif] leading-normal subpixel-antialiased\", \"[&>*]:text-xs @3xl/media-root:[&>*]:text-sm\", \"**:box-border\", \"[&_button]:font-[inherit]\", \"motion-safe:[interpolate-size:allow-keywords]\");\n//#endregion\nexport { root };\n\n//# sourceMappingURL=root.js.map"],"mappings":";;AAEA,MAAM,OAAO,GAAG,gDAAgD,2CAA2C,sGAAsG,+CAA+C,iBAAiB,6BAA6B,gDAAgD"}
+{"version":3,"file":"root.js","names":[],"sources":["../../../../../../../../../skins/dist/default/minimal/tailwind/components/root.js"],"sourcesContent":["import { reset } from \"./reset.js\";\nimport { cn } from \"@videojs/utils/style\";\n//#region src/minimal/tailwind/components/root.ts\nconst root = cn(reset, \"block relative isolate h-full w-full @container/media-root\", \"rounded-(--media-border-radius,0.75rem)\", \"font-[Inter_Variable,Inter,ui-sans-serif,system-ui,sans-serif] text-[0.8125rem] leading-normal subpixel-antialiased\", \"outline-2 outline-transparent -outline-offset-4\", \"transition-[outline-offset,outline-color] duration-100 ease-out\", \"focus-visible:outline-current focus-visible:outline-offset-2\", \"[--media-current-shadow-color:oklch(from_currentColor_0_0_0/clamp(0,calc((l-0.5)*0.5),0.15))]\", \"[--media-current-shadow-color-subtle:oklch(from_var(--media-current-shadow-color)_l_c_h/calc(alpha*0.4))]\", \"[--media-icon-size:18px]\");\n//#endregion\nexport { root };\n\n//# sourceMappingURL=root.js.map"],"mappings":";;;AAGA,MAAM,OAAO,GAAG,OAAO,8DAA8D,2CAA2C,uHAAuH,mDAAmD,mEAAmE,gEAAgE,iGAAiG,6GAA6G,2BAA2B"}

package/dist/dev/skins/dist/default/minimal/tailwind/components/slider.js

@@ -9,7 +9,7 @@ const slider = {
 		buffer: cn("bg-current/20 duration-250 ease-out", "data-[orientation=horizontal]:inset-y-0 data-[orientation=horizontal]:left-0", "data-[orientation=horizontal]:transition-[width] data-[orientation=horizontal]:w-(--media-slider-buffer,0)", "data-[orientation=vertical]:inset-x-0 data-[orientation=vertical]:bottom-0", "data-[orientation=vertical]:transition-[height] data-[orientation=vertical]:h-(--media-slider-buffer)")
 	},
 	thumb: {
-		base: cn("z-10 absolute size-3 -translate-x-1/2 -translate-y-1/2", "bg-current rounded-full", "shadow-[0_0_0_1px_var(--media-controls-current-shadow-color-subtle,oklch(0_0_0/0.1)),0_1px_3px_0_oklch(0_0_0/0.15),0_1px_2px_-1px_oklch(0_0_0/0.15)]", "transition-[opacity,scale,outline-offset] duration-150 ease-out select-none", "outline-2 outline-transparent -outline-offset-2", "focus-visible:outline-current focus-visible:outline-offset-2", "data-[orientation=horizontal]:top-1/2 data-[orientation=horizontal]:left-(--media-slider-fill,0)", "data-[orientation=vertical]:left-1/2 data-[orientation=vertical]:top-[calc(100%-var(--media-slider-fill,0))]"),
+		base: cn("z-10 absolute size-3 -translate-x-1/2 -translate-y-1/2", "bg-current rounded-full", "shadow-[0_0_0_1px_var(--media-current-shadow-color-subtle,oklch(0_0_0/0.1)),0_1px_3px_0_oklch(0_0_0/0.15),0_1px_2px_-1px_oklch(0_0_0/0.15)]", "transition-[opacity,scale,outline-offset] duration-150 ease-out select-none", "outline-2 outline-transparent -outline-offset-2", "focus-visible:outline-current focus-visible:outline-offset-2", "data-[orientation=horizontal]:top-1/2 data-[orientation=horizontal]:left-(--media-slider-fill,0)", "data-[orientation=vertical]:left-1/2 data-[orientation=vertical]:top-[calc(100%-var(--media-slider-fill,0))]"),
 		interactive: cn("opacity-0 scale-70 origin-center", "group-hover/slider:opacity-100 group-hover/slider:scale-100", "group-focus-within/slider:opacity-100 group-focus-within/slider:scale-100")
 	}
 };

package/dist/dev/skins/dist/default/minimal/tailwind/components/slider.js.map

@@ -1 +1 @@
-{"version":3,"file":"slider.js","names":[],"sources":["../../../../../../../../../skins/dist/default/minimal/tailwind/components/slider.js"],"sourcesContent":["import { cn } from \"@videojs/utils/style\";\n//#region src/minimal/tailwind/components/slider.ts\nconst slider = {\n\troot: cn(\"group/slider relative flex flex-1 items-center justify-center rounded-full outline-none cursor-pointer\", \"data-[orientation=horizontal]:min-w-20 data-[orientation=horizontal]:w-full data-[orientation=horizontal]:h-8\", \"data-[orientation=vertical]:w-8 data-[orientation=vertical]:h-[4.5rem]\"),\n\ttrack: cn(\"relative isolate overflow-hidden bg-current/20 rounded-[inherit] select-none\", \"data-[orientation=horizontal]:w-full data-[orientation=horizontal]:h-0.75\", \"data-[orientation=vertical]:w-0.75 data-[orientation=vertical]:h-full\"),\n\tfill: {\n\t\tbase: \"absolute rounded-[inherit] pointer-events-none\",\n\t\tfill: cn(\"bg-current\", \"data-[orientation=horizontal]:inset-y-0 data-[orientation=horizontal]:left-0\", \"data-[orientation=horizontal]:w-(--media-slider-fill,0)\", \"data-[orientation=vertical]:inset-x-0 data-[orientation=vertical]:bottom-0\", \"data-[orientation=vertical]:h-(--media-slider-fill,0)\"),\n\t\tbuffer: cn(\"bg-current/20 duration-250 ease-out\", \"data-[orientation=horizontal]:inset-y-0 data-[orientation=horizontal]:left-0\", \"data-[orientation=horizontal]:transition-[width] data-[orientation=horizontal]:w-(--media-slider-buffer,0)\", \"data-[orientation=vertical]:inset-x-0 data-[orientation=vertical]:bottom-0\", \"data-[orientation=vertical]:transition-[height] data-[orientation=vertical]:h-(--media-slider-buffer)\")\n\t},\n\tthumb: {\n\t\tbase: cn(\"z-10 absolute size-3 -translate-x-1/2 -translate-y-1/2\", \"bg-current rounded-full\", \"shadow-[0_0_0_1px_var(--media-controls-current-shadow-color-subtle,oklch(0_0_0/0.1)),0_1px_3px_0_oklch(0_0_0/0.15),0_1px_2px_-1px_oklch(0_0_0/0.15)]\", \"transition-[opacity,scale,outline-offset] duration-150 ease-out select-none\", \"outline-2 outline-transparent -outline-offset-2\", \"focus-visible:outline-current focus-visible:outline-offset-2\", \"data-[orientation=horizontal]:top-1/2 data-[orientation=horizontal]:left-(--media-slider-fill,0)\", \"data-[orientation=vertical]:left-1/2 data-[orientation=vertical]:top-[calc(100%-var(--media-slider-fill,0))]\"),\n\t\tinteractive: cn(\"opacity-0 scale-70 origin-center\", \"group-hover/slider:opacity-100 group-hover/slider:scale-100\", \"group-focus-within/slider:opacity-100 group-focus-within/slider:scale-100\")\n\t}\n};\n//#endregion\nexport { slider };\n\n//# sourceMappingURL=slider.js.map"],"mappings":";;AAEA,MAAM,SAAS;CACd,MAAM,GAAG,0GAA0G,iHAAiH,yEAAyE;CAC7S,OAAO,GAAG,gFAAgF,6EAA6E,wEAAwE;CAC/O,MAAM;EACL,MAAM;EACN,MAAM,GAAG,cAAc,gFAAgF,2DAA2D,8EAA8E,wDAAwD;EACxS,QAAQ,GAAG,uCAAuC,gFAAgF,8GAA8G,8EAA8E,wGAAwG;EACta;CACD,OAAO;EACN,MAAM,GAAG,0DAA0D,2BAA2B,wJAAwJ,+EAA+E,mDAAmD,gEAAgE,oGAAoG,+GAA+G;EAC3oB,aAAa,GAAG,oCAAoC,+DAA+D,4EAA4E;EAC/L;CACD"}
+{"version":3,"file":"slider.js","names":[],"sources":["../../../../../../../../../skins/dist/default/minimal/tailwind/components/slider.js"],"sourcesContent":["import { cn } from \"@videojs/utils/style\";\n//#region src/minimal/tailwind/components/slider.ts\nconst slider = {\n\troot: cn(\"group/slider relative flex flex-1 items-center justify-center rounded-full outline-none cursor-pointer\", \"data-[orientation=horizontal]:min-w-20 data-[orientation=horizontal]:w-full data-[orientation=horizontal]:h-8\", \"data-[orientation=vertical]:w-8 data-[orientation=vertical]:h-[4.5rem]\"),\n\ttrack: cn(\"relative isolate overflow-hidden bg-current/20 rounded-[inherit] select-none\", \"data-[orientation=horizontal]:w-full data-[orientation=horizontal]:h-0.75\", \"data-[orientation=vertical]:w-0.75 data-[orientation=vertical]:h-full\"),\n\tfill: {\n\t\tbase: \"absolute rounded-[inherit] pointer-events-none\",\n\t\tfill: cn(\"bg-current\", \"data-[orientation=horizontal]:inset-y-0 data-[orientation=horizontal]:left-0\", \"data-[orientation=horizontal]:w-(--media-slider-fill,0)\", \"data-[orientation=vertical]:inset-x-0 data-[orientation=vertical]:bottom-0\", \"data-[orientation=vertical]:h-(--media-slider-fill,0)\"),\n\t\tbuffer: cn(\"bg-current/20 duration-250 ease-out\", \"data-[orientation=horizontal]:inset-y-0 data-[orientation=horizontal]:left-0\", \"data-[orientation=horizontal]:transition-[width] data-[orientation=horizontal]:w-(--media-slider-buffer,0)\", \"data-[orientation=vertical]:inset-x-0 data-[orientation=vertical]:bottom-0\", \"data-[orientation=vertical]:transition-[height] data-[orientation=vertical]:h-(--media-slider-buffer)\")\n\t},\n\tthumb: {\n\t\tbase: cn(\"z-10 absolute size-3 -translate-x-1/2 -translate-y-1/2\", \"bg-current rounded-full\", \"shadow-[0_0_0_1px_var(--media-current-shadow-color-subtle,oklch(0_0_0/0.1)),0_1px_3px_0_oklch(0_0_0/0.15),0_1px_2px_-1px_oklch(0_0_0/0.15)]\", \"transition-[opacity,scale,outline-offset] duration-150 ease-out select-none\", \"outline-2 outline-transparent -outline-offset-2\", \"focus-visible:outline-current focus-visible:outline-offset-2\", \"data-[orientation=horizontal]:top-1/2 data-[orientation=horizontal]:left-(--media-slider-fill,0)\", \"data-[orientation=vertical]:left-1/2 data-[orientation=vertical]:top-[calc(100%-var(--media-slider-fill,0))]\"),\n\t\tinteractive: cn(\"opacity-0 scale-70 origin-center\", \"group-hover/slider:opacity-100 group-hover/slider:scale-100\", \"group-focus-within/slider:opacity-100 group-focus-within/slider:scale-100\")\n\t}\n};\n//#endregion\nexport { slider };\n\n//# sourceMappingURL=slider.js.map"],"mappings":";;AAEA,MAAM,SAAS;CACd,MAAM,GAAG,0GAA0G,iHAAiH,yEAAyE;CAC7S,OAAO,GAAG,gFAAgF,6EAA6E,wEAAwE;CAC/O,MAAM;EACL,MAAM;EACN,MAAM,GAAG,cAAc,gFAAgF,2DAA2D,8EAA8E,wDAAwD;EACxS,QAAQ,GAAG,uCAAuC,gFAAgF,8GAA8G,8EAA8E,wGAAwG;EACta;CACD,OAAO;EACN,MAAM,GAAG,0DAA0D,2BAA2B,+IAA+I,+EAA+E,mDAAmD,gEAAgE,oGAAoG,+GAA+G;EACloB,aAAa,GAAG,oCAAoC,+DAA+D,4EAA4E;EAC/L;CACD"}

package/dist/dev/skins/dist/default/minimal/tailwind/video.tailwind.js

@@ -1,16 +1,19 @@
-import "../../shared/tailwind/icon-state.js";
 import { controls as controls$1 } from "./components/controls.js";
 import { error as error$1 } from "./components/error.js";
 import { popup as popup$1 } from "./components/popup.js";
 import { root as root$1 } from "./components/root.js";
+import "../../shared/tailwind/icon-state.js";
 import "./components/buffering.js";
 import "./components/button.js";
 import { buttonGroup } from "./components/button-group.js";
 import "./components/icon.js";
+import "./components/menu.js";
+import "./components/playback-rate.js";
 import "./components/seek.js";
 import { slider as slider$1 } from "./components/slider.js";
 import { time as time$1 } from "./components/time.js";
 import { preview as preview$1 } from "./components/preview.js";
+import "./components/input-feedback.js";
 import "./components/overlay.js";
 import "./components/poster.js";
 import { cn } from "@videojs/utils/style";
@@ -18,7 +21,7 @@ import { cn } from "@videojs/utils/style";
 const root = (isShadowDOM) => cn(root$1, "bg-black overflow-clip", "after:absolute after:pointer-events-none after:rounded-[inherit] after:z-10", "after:inset-0 after:ring-1 after:ring-inset after:ring-black/15 dark:after:ring-white/15", {
 	"[&_::slotted(video)]:block [&_::slotted(video)]:w-full [&_::slotted(video)]:h-full [&_::slotted(video)]:rounded-(--media-video-border-radius) [&_::slotted(video)]:[object-fit:var(--media-object-fit,cover)] [&_::slotted(video)]:[object-position:var(--media-object-position,center)]": isShadowDOM,
 	"[&_video]:block [&_video]:w-full [&_video]:h-full [&_video]:rounded-[inherit] [&_video]:[object-fit:var(--media-object-fit,contain)] [&_video]:[object-position:var(--media-object-position,center)]": !isShadowDOM
-}, "[--media-video-border-radius:var(--media-border-radius,0.75rem)]", "[--media-controls-background-color:transparent]", "[--media-controls-transition-duration:100ms]", "[--media-controls-transition-timing-function:ease-out]", "[--media-error-dialog-transition-duration:150ms]", "[--media-error-dialog-transition-delay:100ms]", "[--media-error-dialog-transition-timing-function:ease-out]", "[--media-popup-transition-duration:100ms]", "[--media-popup-transition-timing-function:ease-out]", "[--media-tooltip-background-color:oklch(1_0_0/0.1)]", "[--media-tooltip-border-color:transparent]", "[--media-tooltip-backdrop-filter:blur(16px)_saturate(1.5)]", "[--media-tooltip-text-color:currentColor]", "[--media-tooltip-side-offset:0.5rem]", "[--media-popover-side-offset:1.5rem]", "motion-reduce:[--media-error-dialog-transition-duration:50ms]", "motion-reduce:[--media-error-dialog-transition-delay:0ms]", "motion-reduce:[--media-popup-transition-duration:0ms]", "[@media(prefers-reduced-transparency:reduce)]:[--media-controls-background-color:oklch(0_0_0)]", "contrast-more:[--media-controls-background-color:oklch(0_0_0)]", "[@media(prefers-reduced-transparency:reduce)]:[--media-tooltip-background-color:oklch(0_0_0)]", "contrast-more:[--media-tooltip-background-color:oklch(0_0_0)]", "@2xl/media-root:[&>*]:[--media-popover-side-offset:0rem]", "[@media(pointer:fine)]:has-[[data-controls]:not([data-visible])]:[--media-controls-transition-duration:300ms]", "[@media(pointer:coarse)]:has-[[data-controls]:not([data-visible])]:[--media-controls-transition-duration:150ms]", "motion-reduce:has-[[data-controls]:not([data-visible])]:[--media-controls-transition-duration:50ms]", "[--media-caption-track-y:-0.5rem]", "[--media-caption-track-delay:25ms]", "[--media-caption-track-duration:var(--media-controls-transition-duration)]", "has-[[data-controls][data-visible]]:[--media-caption-track-y:-5rem]", "@2xl/media-root:has-[[data-controls][data-visible]]:[&>*]:[--media-caption-track-y:-3rem]", !isShadowDOM ? [
+}, "[--media-video-border-radius:var(--media-border-radius,0.75rem)]", "[--media-controls-background-color:transparent]", "[--media-controls-transition-duration:100ms]", "[--media-controls-transition-timing-function:ease-out]", "[--media-error-dialog-transition-duration:150ms]", "[--media-error-dialog-transition-delay:100ms]", "[--media-error-dialog-transition-timing-function:ease-out]", "[--media-popup-transition-duration:100ms]", "[--media-popup-transition-timing-function:ease-out]", "[--media-tooltip-background-color:oklch(1_0_0/0.1)]", "[--media-tooltip-border-color:transparent]", "[--media-tooltip-backdrop-filter:blur(16px)_saturate(1.5)]", "[--media-tooltip-text-color:currentColor]", "[--media-tooltip-side-offset:0.5rem]", "[--media-tooltip-boundary-offset:0.5rem]", "[--media-popover-side-offset:1.5rem]", "[--media-popover-boundary-offset:0.5rem]", "motion-reduce:[--media-error-dialog-transition-duration:50ms]", "motion-reduce:[--media-error-dialog-transition-delay:0ms]", "motion-reduce:[--media-popup-transition-duration:0ms]", "[@media(prefers-reduced-transparency:reduce)]:[--media-controls-background-color:oklch(0_0_0)]", "contrast-more:[--media-controls-background-color:oklch(0_0_0)]", "[@media(prefers-reduced-transparency:reduce)]:[--media-tooltip-background-color:oklch(0_0_0)]", "contrast-more:[--media-tooltip-background-color:oklch(0_0_0)]", "@2xl/media-root:*:[--media-popover-side-offset:0.5rem]", "pointer-fine:has-[[data-controls]:not([data-visible])]:[--media-controls-transition-duration:300ms]", "pointer-coarse:has-[[data-controls]:not([data-visible])]:[--media-controls-transition-duration:150ms]", "motion-reduce:has-[[data-controls]:not([data-visible])]:[--media-controls-transition-duration:50ms]", "[--media-caption-track-y:-0.5rem]", "[--media-caption-track-delay:25ms]", "[--media-caption-track-duration:var(--media-controls-transition-duration)]", "has-[[data-controls][data-visible]]:[--media-caption-track-y:-5rem]", "@2xl/media-root:has-[[data-controls][data-visible]]:*:[--media-caption-track-y:-3rem]", !isShadowDOM ? [
 	"[&_video::-webkit-media-text-track-container]:transition-[translate]",
 	"[&_video::-webkit-media-text-track-container]:duration-(--media-caption-track-duration)",
 	"[&_video::-webkit-media-text-track-container]:ease-out",
@@ -31,7 +34,7 @@ const root = (isShadowDOM) => cn(root$1, "bg-black overflow-clip", "after:absolu
 	"[&:fullscreen_video]:object-contain": !isShadowDOM,
 	"[&:fullscreen_::slotted(video)]:object-contain": isShadowDOM
 });
-const controls = cn(controls$1, "absolute bottom-1 inset-x-1", "p-1 gap-x-2 flex-wrap rounded-xl", "text-white z-10", "peer-data-open/error:hidden", "ease-(--media-controls-transition-timing-function)", "duration-(--media-controls-transition-duration)", "[@media(pointer:fine)]:will-change-[translate,filter,opacity]", "[@media(pointer:fine)]:transition-[translate,filter,opacity]", "[@media(pointer:coarse)]:will-change-[translate,opacity]", "[@media(pointer:coarse)]:transition-[translate,opacity]", "not-data-visible:opacity-0 not-data-visible:pointer-events-none", "motion-safe:not-data-visible:translate-y-full", "[@media(pointer:fine)]:motion-safe:not-data-visible:blur-sm", "@2xl/media-root:flex-nowrap @2xl/media-root:bottom-2 @2xl/media-root:inset-x-2");
+const controls = cn(controls$1, "absolute bottom-1 inset-x-1", "p-1 gap-x-2 flex-wrap rounded-xl", "mx-auto max-w-4xl", "text-white z-10", "peer-data-open/error:hidden", "ease-(--media-controls-transition-timing-function)", "duration-(--media-controls-transition-duration)", "pointer-fine:will-change-[translate,filter,opacity]", "pointer-fine:transition-[translate,filter,opacity]", "pointer-coarse:will-change-[translate,opacity]", "pointer-coarse:transition-[translate,opacity]", "not-data-visible:opacity-0 not-data-visible:pointer-events-none", "motion-safe:not-data-visible:translate-y-full", "pointer-fine:motion-safe:not-data-visible:blur-sm", "@2xl/media-root:flex-nowrap @2xl/media-root:bottom-2 @2xl/media-root:inset-x-2", "@2xl/media-root:*:[--media-popover-side-offset:0rem]");
 const buttonGroupStart = cn(buttonGroup, "flex-1 @2xl/media-root:flex-none");
 const buttonGroupEnd = cn(buttonGroup, "flex-1 justify-end @2xl/media-root:flex-none");
 const time = {
@@ -46,7 +49,7 @@ const error = {
 };
 const preview = {
 	...preview$1,
-	root: cn("[--media-preview-max-width:11rem] [--media-preview-padding:-0.5rem] [--media-preview-inset:calc(100cqi-100%)]", "absolute [left:clamp(calc(var(--media-preview-max-width)/2+var(--media-preview-padding)),var(--media-slider-pointer),calc(100%-var(--media-preview-max-width)/2-var(--media-preview-padding)+var(--media-preview-inset)))] bottom-full -translate-x-1/2", "@2xl/media-root:bottom-[calc(100%+0.25rem)] @2xl/media-root:[left:var(--media-slider-pointer)]", "opacity-0 scale-80 blur-sm origin-bottom", "transition-[scale,opacity,filter] duration-150", "group-data-pointing/slider:opacity-100 group-data-pointing/slider:scale-100 group-data-pointing/slider:blur-none", "[&:has([role=img][data-hidden])]:opacity-0 [&:has([role=img][data-hidden])]:scale-80 [&:has([role=img][data-hidden])]:blur-sm", "[&:has([role=img][data-loading])]:max-h-24", preview$1.root),
+	root: cn("[--media-preview-max-width:11rem] [--media-preview-padding:-0.5rem] [--media-preview-inset:calc(100cqi-100%)]", "absolute [left:clamp(calc(var(--media-preview-max-width)/2+var(--media-preview-padding)),var(--media-slider-pointer),calc(100%-var(--media-preview-max-width)/2-var(--media-preview-padding)+var(--media-preview-inset)))] bottom-full -translate-x-1/2", "@2xl/media-root:bottom-[calc(100%+0.25rem)] @2xl/media-root:[left:var(--media-slider-pointer)]", "opacity-0 scale-80 blur-sm origin-bottom", "transition-[scale,opacity,filter] duration-150", "group-data-pointing/slider:opacity-100 group-data-pointing/slider:scale-100 group-data-pointing/slider:blur-none", "has-[[role=img][data-hidden]]:opacity-0 has-[[role=img][data-hidden]]:scale-80 has-[[role=img][data-hidden]]:blur-sm", "has-[[role=img][data-loading]]:max-h-24", preview$1.root),
 	thumbnailWrapper: cn(preview$1.thumbnailWrapper, "after:absolute after:inset-0 after:rounded-[inherit]", "after:ring-1 after:ring-black/5 after:shadow-sm after:shadow-black/20"),
 	thumbnail: cn(preview$1.thumbnail, "max-w-(--media-preview-max-width)")
 };

package/dist/dev/skins/dist/default/minimal/tailwind/video.tailwind.js.map

@@ -1 +1 @@
-{"version":3,"file":"video.tailwind.js","names":[],"sources":["../../../../../../../../skins/dist/default/minimal/tailwind/video.tailwind.js"],"sourcesContent":["import { controls as controls$1 } from \"./components/controls.js\";\nimport { error as error$1 } from \"./components/error.js\";\nimport { popup as popup$1 } from \"./components/popup.js\";\nimport { root as root$1 } from \"./components/root.js\";\nimport { iconState } from \"../../shared/tailwind/icon-state.js\";\nimport { bufferingIndicator } from \"./components/buffering.js\";\nimport { button } from \"./components/button.js\";\nimport { buttonGroup } from \"./components/button-group.js\";\nimport { icon, iconContainer, iconFlipped, iconHidden } from \"./components/icon.js\";\nimport { seek } from \"./components/seek.js\";\nimport { slider as slider$1 } from \"./components/slider.js\";\nimport { time as time$1 } from \"./components/time.js\";\nimport { preview as preview$1 } from \"./components/preview.js\";\nimport { overlay } from \"./components/overlay.js\";\nimport { playbackRate } from \"./components/playback-rate.js\";\nimport { poster } from \"./components/poster.js\";\nimport { cn } from \"@videojs/utils/style\";\n//#region src/minimal/tailwind/video.tailwind.ts\nconst root = (isShadowDOM) => cn(root$1, \"bg-black overflow-clip\", \"after:absolute after:pointer-events-none after:rounded-[inherit] after:z-10\", \"after:inset-0 after:ring-1 after:ring-inset after:ring-black/15 dark:after:ring-white/15\", {\n\t\"[&_::slotted(video)]:block [&_::slotted(video)]:w-full [&_::slotted(video)]:h-full [&_::slotted(video)]:rounded-(--media-video-border-radius) [&_::slotted(video)]:[object-fit:var(--media-object-fit,cover)] [&_::slotted(video)]:[object-position:var(--media-object-position,center)]\": isShadowDOM,\n\t\"[&_video]:block [&_video]:w-full [&_video]:h-full [&_video]:rounded-[inherit] [&_video]:[object-fit:var(--media-object-fit,contain)] [&_video]:[object-position:var(--media-object-position,center)]\": !isShadowDOM\n}, \"[--media-video-border-radius:var(--media-border-radius,0.75rem)]\", \"[--media-controls-background-color:transparent]\", \"[--media-controls-transition-duration:100ms]\", \"[--media-controls-transition-timing-function:ease-out]\", \"[--media-error-dialog-transition-duration:150ms]\", \"[--media-error-dialog-transition-delay:100ms]\", \"[--media-error-dialog-transition-timing-function:ease-out]\", \"[--media-popup-transition-duration:100ms]\", \"[--media-popup-transition-timing-function:ease-out]\", \"[--media-tooltip-background-color:oklch(1_0_0/0.1)]\", \"[--media-tooltip-border-color:transparent]\", \"[--media-tooltip-backdrop-filter:blur(16px)_saturate(1.5)]\", \"[--media-tooltip-text-color:currentColor]\", \"[--media-tooltip-side-offset:0.5rem]\", \"[--media-popover-side-offset:1.5rem]\", \"motion-reduce:[--media-error-dialog-transition-duration:50ms]\", \"motion-reduce:[--media-error-dialog-transition-delay:0ms]\", \"motion-reduce:[--media-popup-transition-duration:0ms]\", \"[@media(prefers-reduced-transparency:reduce)]:[--media-controls-background-color:oklch(0_0_0)]\", \"contrast-more:[--media-controls-background-color:oklch(0_0_0)]\", \"[@media(prefers-reduced-transparency:reduce)]:[--media-tooltip-background-color:oklch(0_0_0)]\", \"contrast-more:[--media-tooltip-background-color:oklch(0_0_0)]\", \"@2xl/media-root:[&>*]:[--media-popover-side-offset:0rem]\", \"[@media(pointer:fine)]:has-[[data-controls]:not([data-visible])]:[--media-controls-transition-duration:300ms]\", \"[@media(pointer:coarse)]:has-[[data-controls]:not([data-visible])]:[--media-controls-transition-duration:150ms]\", \"motion-reduce:has-[[data-controls]:not([data-visible])]:[--media-controls-transition-duration:50ms]\", \"[--media-caption-track-y:-0.5rem]\", \"[--media-caption-track-delay:25ms]\", \"[--media-caption-track-duration:var(--media-controls-transition-duration)]\", \"has-[[data-controls][data-visible]]:[--media-caption-track-y:-5rem]\", \"@2xl/media-root:has-[[data-controls][data-visible]]:[&>*]:[--media-caption-track-y:-3rem]\", !isShadowDOM ? [\n\t\"[&_video::-webkit-media-text-track-container]:transition-[translate]\",\n\t\"[&_video::-webkit-media-text-track-container]:duration-(--media-caption-track-duration)\",\n\t\"[&_video::-webkit-media-text-track-container]:ease-out\",\n\t\"[&_video::-webkit-media-text-track-container]:delay-(--media-caption-track-delay)\",\n\t\"[&_video::-webkit-media-text-track-container]:translate-y-(--media-caption-track-y)\",\n\t\"[&_video::-webkit-media-text-track-container]:scale-98\",\n\t\"[&_video::-webkit-media-text-track-container]:z-1\",\n\t\"[&_video::-webkit-media-text-track-container]:font-[inherit]\"\n] : [], \"[&:fullscreen]:[--media-border-radius:0]\", {\n\t\"[&:fullscreen_video]:object-contain\": !isShadowDOM,\n\t\"[&:fullscreen_::slotted(video)]:object-contain\": isShadowDOM\n});\nconst controls = cn(controls$1, \"absolute bottom-1 inset-x-1\", \"p-1 gap-x-2 flex-wrap rounded-xl\", \"text-white z-10\", \"peer-data-open/error:hidden\", \"ease-(--media-controls-transition-timing-function)\", \"duration-(--media-controls-transition-duration)\", \"[@media(pointer:fine)]:will-change-[translate,filter,opacity]\", \"[@media(pointer:fine)]:transition-[translate,filter,opacity]\", \"[@media(pointer:coarse)]:will-change-[translate,opacity]\", \"[@media(pointer:coarse)]:transition-[translate,opacity]\", \"not-data-visible:opacity-0 not-data-visible:pointer-events-none\", \"motion-safe:not-data-visible:translate-y-full\", \"[@media(pointer:fine)]:motion-safe:not-data-visible:blur-sm\", \"@2xl/media-root:flex-nowrap @2xl/media-root:bottom-2 @2xl/media-root:inset-x-2\");\nconst buttonGroupStart = cn(buttonGroup, \"flex-1 @2xl/media-root:flex-none\");\nconst buttonGroupEnd = cn(buttonGroup, \"flex-1 justify-end @2xl/media-root:flex-none\");\nconst time = {\n\t...time$1,\n\tcontrols: cn(time$1.controls, \"grow-0 shrink-0 basis-full order-[-1] px-2.5\", \"@2xl/media-root:grow @2xl/media-root:shrink @2xl/media-root:basis-0 @2xl/media-root:order-[unset]\")\n};\nconst error = {\n\t...error$1,\n\troot: cn(error$1.root, \"pointer-events-none outline-none\"),\n\tdialog: cn(error$1.dialog, \"pointer-events-auto\"),\n\ttitle: cn(error$1.title, \"text-lg\")\n};\nconst preview = {\n\t...preview$1,\n\troot: cn(\"[--media-preview-max-width:11rem] [--media-preview-padding:-0.5rem] [--media-preview-inset:calc(100cqi-100%)]\", \"absolute [left:clamp(calc(var(--media-preview-max-width)/2+var(--media-preview-padding)),var(--media-slider-pointer),calc(100%-var(--media-preview-max-width)/2-var(--media-preview-padding)+var(--media-preview-inset)))] bottom-full -translate-x-1/2\", \"@2xl/media-root:bottom-[calc(100%+0.25rem)] @2xl/media-root:[left:var(--media-slider-pointer)]\", \"opacity-0 scale-80 blur-sm origin-bottom\", \"transition-[scale,opacity,filter] duration-150\", \"group-data-pointing/slider:opacity-100 group-data-pointing/slider:scale-100 group-data-pointing/slider:blur-none\", \"[&:has([role=img][data-hidden])]:opacity-0 [&:has([role=img][data-hidden])]:scale-80 [&:has([role=img][data-hidden])]:blur-sm\", \"[&:has([role=img][data-loading])]:max-h-24\", preview$1.root),\n\tthumbnailWrapper: cn(preview$1.thumbnailWrapper, \"after:absolute after:inset-0 after:rounded-[inherit]\", \"after:ring-1 after:ring-black/5 after:shadow-sm after:shadow-black/20\"),\n\tthumbnail: cn(preview$1.thumbnail, \"max-w-(--media-preview-max-width)\")\n};\nconst slider = {\n\t...slider$1,\n\ttrack: cn(slider$1.track, \"ring-1 ring-black/5\")\n};\nconst popup = {\n\t...popup$1,\n\tvolume: cn(popup$1.popover, \"py-3 px-0 bg-transparent rounded-xl\", \"[@media(prefers-reduced-transparency:reduce)]:bg-(--media-controls-background-color)\", \"contrast-more:bg-(--media-controls-background-color)\")\n};\n//#endregion\nexport { bufferingIndicator, button, buttonGroup, buttonGroupEnd, buttonGroupStart, controls, error, icon, iconContainer, iconFlipped, iconHidden, iconState, overlay, playbackRate, popup, poster, preview, root, seek, slider, time };\n\n//# sourceMappingURL=video.tailwind.js.map"],"mappings":";;;;;;;;;;;;;;;;;AAkBA,MAAM,QAAQ,gBAAgB,GAAG,QAAQ,0BAA0B,+EAA+E,4FAA4F;CAC7O,4RAA4R;CAC5R,wMAAwM,CAAC;CACzM,EAAE,oEAAoE,mDAAmD,gDAAgD,0DAA0D,oDAAoD,iDAAiD,8DAA8D,6CAA6C,uDAAuD,uDAAuD,8CAA8C,8DAA8D,6CAA6C,wCAAwC,wCAAwC,iEAAiE,6DAA6D,yDAAyD,kGAAkG,kEAAkE,iGAAiG,iEAAiE,4DAA4D,iHAAiH,mHAAmH,uGAAuG,qCAAqC,sCAAsC,8EAA8E,uEAAuE,6FAA6F,CAAC,cAAc;CAC19D;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA,GAAG,EAAE,EAAE,4CAA4C;CACnD,uCAAuC,CAAC;CACxC,kDAAkD;CAClD,CAAC;AACF,MAAM,WAAW,GAAG,YAAY,+BAA+B,oCAAoC,mBAAmB,+BAA+B,sDAAsD,mDAAmD,iEAAiE,gEAAgE,4DAA4D,2DAA2D,mEAAmE,iDAAiD,+DAA+D,iFAAiF;AAC1vB,MAAM,mBAAmB,GAAG,aAAa,mCAAmC;AAC5E,MAAM,iBAAiB,GAAG,aAAa,+CAA+C;AACtF,MAAM,OAAO;CACZ,GAAG;CACH,UAAU,GAAG,OAAO,UAAU,gDAAgD,oGAAoG;CAClL;AACD,MAAM,QAAQ;CACb,GAAG;CACH,MAAM,GAAG,QAAQ,MAAM,mCAAmC;CAC1D,QAAQ,GAAG,QAAQ,QAAQ,sBAAsB;CACjD,OAAO,GAAG,QAAQ,OAAO,UAAU;CACnC;AACD,MAAM,UAAU;CACf,GAAG;CACH,MAAM,GAAG,iHAAiH,2PAA2P,kGAAkG,4CAA4C,kDAAkD,oHAAoH,iIAAiI,8CAA8C,UAAU,KAAK;CACv2B,kBAAkB,GAAG,UAAU,kBAAkB,wDAAwD,wEAAwE;CACjL,WAAW,GAAG,UAAU,WAAW,oCAAoC;CACvE;AACD,MAAM,SAAS;CACd,GAAG;CACH,OAAO,GAAG,SAAS,OAAO,sBAAsB;CAChD;AACD,MAAM,QAAQ;CACb,GAAG;CACH,QAAQ,GAAG,QAAQ,SAAS,uCAAuC,wFAAwF,uDAAuD;CAClN"}
+{"version":3,"file":"video.tailwind.js","names":[],"sources":["../../../../../../../../skins/dist/default/minimal/tailwind/video.tailwind.js"],"sourcesContent":["import { controls as controls$1 } from \"./components/controls.js\";\nimport { error as error$1 } from \"./components/error.js\";\nimport { popup as popup$1 } from \"./components/popup.js\";\nimport { root as root$1 } from \"./components/root.js\";\nimport { iconState } from \"../../shared/tailwind/icon-state.js\";\nimport { bufferingIndicator } from \"./components/buffering.js\";\nimport { button } from \"./components/button.js\";\nimport { buttonGroup } from \"./components/button-group.js\";\nimport { icon, iconContainer, iconFlipped, iconHidden } from \"./components/icon.js\";\nimport { menu } from \"./components/menu.js\";\nimport { playbackRate } from \"./components/playback-rate.js\";\nimport { seek } from \"./components/seek.js\";\nimport { slider as slider$1 } from \"./components/slider.js\";\nimport { time as time$1 } from \"./components/time.js\";\nimport { preview as preview$1 } from \"./components/preview.js\";\nimport { inputFeedback } from \"./components/input-feedback.js\";\nimport { overlay } from \"./components/overlay.js\";\nimport { poster } from \"./components/poster.js\";\nimport { cn } from \"@videojs/utils/style\";\n//#region src/minimal/tailwind/video.tailwind.ts\nconst root = (isShadowDOM) => cn(root$1, \"bg-black overflow-clip\", \"after:absolute after:pointer-events-none after:rounded-[inherit] after:z-10\", \"after:inset-0 after:ring-1 after:ring-inset after:ring-black/15 dark:after:ring-white/15\", {\n\t\"[&_::slotted(video)]:block [&_::slotted(video)]:w-full [&_::slotted(video)]:h-full [&_::slotted(video)]:rounded-(--media-video-border-radius) [&_::slotted(video)]:[object-fit:var(--media-object-fit,cover)] [&_::slotted(video)]:[object-position:var(--media-object-position,center)]\": isShadowDOM,\n\t\"[&_video]:block [&_video]:w-full [&_video]:h-full [&_video]:rounded-[inherit] [&_video]:[object-fit:var(--media-object-fit,contain)] [&_video]:[object-position:var(--media-object-position,center)]\": !isShadowDOM\n}, \"[--media-video-border-radius:var(--media-border-radius,0.75rem)]\", \"[--media-controls-background-color:transparent]\", \"[--media-controls-transition-duration:100ms]\", \"[--media-controls-transition-timing-function:ease-out]\", \"[--media-error-dialog-transition-duration:150ms]\", \"[--media-error-dialog-transition-delay:100ms]\", \"[--media-error-dialog-transition-timing-function:ease-out]\", \"[--media-popup-transition-duration:100ms]\", \"[--media-popup-transition-timing-function:ease-out]\", \"[--media-tooltip-background-color:oklch(1_0_0/0.1)]\", \"[--media-tooltip-border-color:transparent]\", \"[--media-tooltip-backdrop-filter:blur(16px)_saturate(1.5)]\", \"[--media-tooltip-text-color:currentColor]\", \"[--media-tooltip-side-offset:0.5rem]\", \"[--media-tooltip-boundary-offset:0.5rem]\", \"[--media-popover-side-offset:1.5rem]\", \"[--media-popover-boundary-offset:0.5rem]\", \"motion-reduce:[--media-error-dialog-transition-duration:50ms]\", \"motion-reduce:[--media-error-dialog-transition-delay:0ms]\", \"motion-reduce:[--media-popup-transition-duration:0ms]\", \"[@media(prefers-reduced-transparency:reduce)]:[--media-controls-background-color:oklch(0_0_0)]\", \"contrast-more:[--media-controls-background-color:oklch(0_0_0)]\", \"[@media(prefers-reduced-transparency:reduce)]:[--media-tooltip-background-color:oklch(0_0_0)]\", \"contrast-more:[--media-tooltip-background-color:oklch(0_0_0)]\", \"@2xl/media-root:*:[--media-popover-side-offset:0.5rem]\", \"pointer-fine:has-[[data-controls]:not([data-visible])]:[--media-controls-transition-duration:300ms]\", \"pointer-coarse:has-[[data-controls]:not([data-visible])]:[--media-controls-transition-duration:150ms]\", \"motion-reduce:has-[[data-controls]:not([data-visible])]:[--media-controls-transition-duration:50ms]\", \"[--media-caption-track-y:-0.5rem]\", \"[--media-caption-track-delay:25ms]\", \"[--media-caption-track-duration:var(--media-controls-transition-duration)]\", \"has-[[data-controls][data-visible]]:[--media-caption-track-y:-5rem]\", \"@2xl/media-root:has-[[data-controls][data-visible]]:*:[--media-caption-track-y:-3rem]\", !isShadowDOM ? [\n\t\"[&_video::-webkit-media-text-track-container]:transition-[translate]\",\n\t\"[&_video::-webkit-media-text-track-container]:duration-(--media-caption-track-duration)\",\n\t\"[&_video::-webkit-media-text-track-container]:ease-out\",\n\t\"[&_video::-webkit-media-text-track-container]:delay-(--media-caption-track-delay)\",\n\t\"[&_video::-webkit-media-text-track-container]:translate-y-(--media-caption-track-y)\",\n\t\"[&_video::-webkit-media-text-track-container]:scale-98\",\n\t\"[&_video::-webkit-media-text-track-container]:z-1\",\n\t\"[&_video::-webkit-media-text-track-container]:font-[inherit]\"\n] : [], \"[&:fullscreen]:[--media-border-radius:0]\", {\n\t\"[&:fullscreen_video]:object-contain\": !isShadowDOM,\n\t\"[&:fullscreen_::slotted(video)]:object-contain\": isShadowDOM\n});\nconst controls = cn(controls$1, \"absolute bottom-1 inset-x-1\", \"p-1 gap-x-2 flex-wrap rounded-xl\", \"mx-auto max-w-4xl\", \"text-white z-10\", \"peer-data-open/error:hidden\", \"ease-(--media-controls-transition-timing-function)\", \"duration-(--media-controls-transition-duration)\", \"pointer-fine:will-change-[translate,filter,opacity]\", \"pointer-fine:transition-[translate,filter,opacity]\", \"pointer-coarse:will-change-[translate,opacity]\", \"pointer-coarse:transition-[translate,opacity]\", \"not-data-visible:opacity-0 not-data-visible:pointer-events-none\", \"motion-safe:not-data-visible:translate-y-full\", \"pointer-fine:motion-safe:not-data-visible:blur-sm\", \"@2xl/media-root:flex-nowrap @2xl/media-root:bottom-2 @2xl/media-root:inset-x-2\", \"@2xl/media-root:*:[--media-popover-side-offset:0rem]\");\nconst buttonGroupStart = cn(buttonGroup, \"flex-1 @2xl/media-root:flex-none\");\nconst buttonGroupEnd = cn(buttonGroup, \"flex-1 justify-end @2xl/media-root:flex-none\");\nconst time = {\n\t...time$1,\n\tcontrols: cn(time$1.controls, \"grow-0 shrink-0 basis-full order-[-1] px-2.5\", \"@2xl/media-root:grow @2xl/media-root:shrink @2xl/media-root:basis-0 @2xl/media-root:order-[unset]\")\n};\nconst error = {\n\t...error$1,\n\troot: cn(error$1.root, \"pointer-events-none outline-none\"),\n\tdialog: cn(error$1.dialog, \"pointer-events-auto\"),\n\ttitle: cn(error$1.title, \"text-lg\")\n};\nconst preview = {\n\t...preview$1,\n\troot: cn(\"[--media-preview-max-width:11rem] [--media-preview-padding:-0.5rem] [--media-preview-inset:calc(100cqi-100%)]\", \"absolute [left:clamp(calc(var(--media-preview-max-width)/2+var(--media-preview-padding)),var(--media-slider-pointer),calc(100%-var(--media-preview-max-width)/2-var(--media-preview-padding)+var(--media-preview-inset)))] bottom-full -translate-x-1/2\", \"@2xl/media-root:bottom-[calc(100%+0.25rem)] @2xl/media-root:[left:var(--media-slider-pointer)]\", \"opacity-0 scale-80 blur-sm origin-bottom\", \"transition-[scale,opacity,filter] duration-150\", \"group-data-pointing/slider:opacity-100 group-data-pointing/slider:scale-100 group-data-pointing/slider:blur-none\", \"has-[[role=img][data-hidden]]:opacity-0 has-[[role=img][data-hidden]]:scale-80 has-[[role=img][data-hidden]]:blur-sm\", \"has-[[role=img][data-loading]]:max-h-24\", preview$1.root),\n\tthumbnailWrapper: cn(preview$1.thumbnailWrapper, \"after:absolute after:inset-0 after:rounded-[inherit]\", \"after:ring-1 after:ring-black/5 after:shadow-sm after:shadow-black/20\"),\n\tthumbnail: cn(preview$1.thumbnail, \"max-w-(--media-preview-max-width)\")\n};\nconst slider = {\n\t...slider$1,\n\ttrack: cn(slider$1.track, \"ring-1 ring-black/5\")\n};\nconst popup = {\n\t...popup$1,\n\tvolume: cn(popup$1.popover, \"py-3 px-0 bg-transparent rounded-xl\", \"[@media(prefers-reduced-transparency:reduce)]:bg-(--media-controls-background-color)\", \"contrast-more:bg-(--media-controls-background-color)\")\n};\n//#endregion\nexport { bufferingIndicator, button, buttonGroup, buttonGroupEnd, buttonGroupStart, controls, error, icon, iconContainer, iconFlipped, iconHidden, iconState, inputFeedback, menu, overlay, playbackRate, popup, poster, preview, root, seek, slider, time };\n\n//# sourceMappingURL=video.tailwind.js.map"],"mappings":";;;;;;;;;;;;;;;;;;;;AAoBA,MAAM,QAAQ,gBAAgB,GAAG,QAAQ,0BAA0B,+EAA+E,4FAA4F;CAC7O,4RAA4R;CAC5R,wMAAwM,CAAC;CACzM,EAAE,oEAAoE,mDAAmD,gDAAgD,0DAA0D,oDAAoD,iDAAiD,8DAA8D,6CAA6C,uDAAuD,uDAAuD,8CAA8C,8DAA8D,6CAA6C,wCAAwC,4CAA4C,wCAAwC,4CAA4C,iEAAiE,6DAA6D,yDAAyD,kGAAkG,kEAAkE,iGAAiG,iEAAiE,0DAA0D,uGAAuG,yGAAyG,uGAAuG,qCAAqC,sCAAsC,8EAA8E,uEAAuE,yFAAyF,CAAC,cAAc;CACxhE;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA,GAAG,EAAE,EAAE,4CAA4C;CACnD,uCAAuC,CAAC;CACxC,kDAAkD;CAClD,CAAC;AACF,MAAM,WAAW,GAAG,YAAY,+BAA+B,oCAAoC,qBAAqB,mBAAmB,+BAA+B,sDAAsD,mDAAmD,uDAAuD,sDAAsD,kDAAkD,iDAAiD,mEAAmE,iDAAiD,qDAAqD,kFAAkF,uDAAuD;AACrxB,MAAM,mBAAmB,GAAG,aAAa,mCAAmC;AAC5E,MAAM,iBAAiB,GAAG,aAAa,+CAA+C;AACtF,MAAM,OAAO;CACZ,GAAG;CACH,UAAU,GAAG,OAAO,UAAU,gDAAgD,oGAAoG;CAClL;AACD,MAAM,QAAQ;CACb,GAAG;CACH,MAAM,GAAG,QAAQ,MAAM,mCAAmC;CAC1D,QAAQ,GAAG,QAAQ,QAAQ,sBAAsB;CACjD,OAAO,GAAG,QAAQ,OAAO,UAAU;CACnC;AACD,MAAM,UAAU;CACf,GAAG;CACH,MAAM,GAAG,iHAAiH,2PAA2P,kGAAkG,4CAA4C,kDAAkD,oHAAoH,wHAAwH,2CAA2C,UAAU,KAAK;CAC31B,kBAAkB,GAAG,UAAU,kBAAkB,wDAAwD,wEAAwE;CACjL,WAAW,GAAG,UAAU,WAAW,oCAAoC;CACvE;AACD,MAAM,SAAS;CACd,GAAG;CACH,OAAO,GAAG,SAAS,OAAO,sBAAsB;CAChD;AACD,MAAM,QAAQ;CACb,GAAG;CACH,QAAQ,GAAG,QAAQ,SAAS,uCAAuC,wFAAwF,uDAAuD;CAClN"}

package/dist/dev/tailwind.css

@@ -0,0 +1,66 @@
+/* -------------------------------------------------------------------------- */
+/* Supporting @keyframes, @properties and @theme for Tailwind CSS             */
+/* -------------------------------------------------------------------------- */
+
+/* -------------------------------------------------------------------------- */
+/* Global @keyframes for all video skins (CSS & Tailwind)                     */
+/* -------------------------------------------------------------------------- */
+
+@keyframes media-shake {
+  0%,
+  100% {
+    translate: 0 0;
+  }
+  20% {
+    translate: -6px 0;
+  }
+  40% {
+    translate: 4px 0;
+  }
+  60% {
+    translate: -2px 0;
+  }
+  80% {
+    translate: 1px 0;
+  }
+}
+
+@keyframes media-slide-in-forward {
+  from {
+    translate: -60% 0;
+    opacity: 0;
+  }
+}
+
+@keyframes media-slide-in-backward {
+  from {
+    translate: 60% 0;
+    opacity: 0;
+  }
+}
+
+@keyframes media-pop-in {
+  from {
+    scale: 0.8;
+    opacity: 0;
+  }
+}
+
+/* -------------------------------------------------------------------------- */
+/* Global @properties for all video skins (CSS & Tailwind)                    */
+/* -------------------------------------------------------------------------- */
+
+@property --media-progress-fill {
+  syntax: "<percentage>";
+  inherits: true;
+  initial-value: 0%;
+}
+
+
+@theme {
+  --animate-media-shake: media-shake 300ms ease-in-out;
+  --animate-media-slide-in-forward: media-slide-in-forward 300ms ease-in-out;
+  --animate-media-slide-in-backward: media-slide-in-backward 300ms ease-in-out;
+  --animate-media-pop-in: media-pop-in 250ms ease-out;
+}
+

package/dist/dev/ui/controls/context.js

@@ -8,7 +8,10 @@ function useControlsContext() {
 	if (!ctx) throw new Error("Controls compound components must be used within a Controls.Root");
 	return ctx;
 }
+function useOptionalControlsContext() {
+	return useContext(ControlsContext);
+}
 //#endregion
-export { ControlsContextProvider, useControlsContext };
+export { ControlsContextProvider, useControlsContext, useOptionalControlsContext };
 
 //# sourceMappingURL=context.js.map

package/dist/dev/ui/controls/context.js.map

@@ -1 +1 @@
-{"version":3,"file":"context.js","names":[],"sources":["../../../../src/ui/controls/context.tsx"],"sourcesContent":["'use client';\n\nimport type { ControlsState, StateAttrMap } from '@videojs/core';\nimport { createContext, useContext } from 'react';\n\nexport interface ControlsContextValue {\n  state: ControlsState;\n  stateAttrMap: StateAttrMap<ControlsState>;\n}\n\nconst ControlsContext = createContext<ControlsContextValue | null>(null);\n\nexport const ControlsContextProvider = ControlsContext.Provider;\n\nexport function useControlsContext(): ControlsContextValue {\n  const ctx = useContext(ControlsContext);\n  if (!ctx) throw new Error('Controls compound components must be used within a Controls.Root');\n  return ctx;\n}\n"],"mappings":";;;AAUA,MAAM,kBAAkB,cAA2C,KAAK;AAExE,MAAa,0BAA0B,gBAAgB;AAEvD,SAAgB,qBAA2C;CACzD,MAAM,MAAM,WAAW,gBAAgB;AACvC,KAAI,CAAC,IAAK,OAAM,IAAI,MAAM,mEAAmE;AAC7F,QAAO"}
+{"version":3,"file":"context.js","names":[],"sources":["../../../../src/ui/controls/context.tsx"],"sourcesContent":["'use client';\n\nimport type { ControlsState, StateAttrMap } from '@videojs/core';\nimport { createContext, useContext } from 'react';\n\nexport interface ControlsContextValue {\n  state: ControlsState;\n  stateAttrMap: StateAttrMap<ControlsState>;\n}\n\nconst ControlsContext = createContext<ControlsContextValue | null>(null);\n\nexport const ControlsContextProvider = ControlsContext.Provider;\n\nexport function useControlsContext(): ControlsContextValue {\n  const ctx = useContext(ControlsContext);\n  if (!ctx) throw new Error('Controls compound components must be used within a Controls.Root');\n  return ctx;\n}\n\nexport function useOptionalControlsContext(): ControlsContextValue | null {\n  return useContext(ControlsContext);\n}\n"],"mappings":";;;AAUA,MAAM,kBAAkB,cAA2C,KAAK;AAExE,MAAa,0BAA0B,gBAAgB;AAEvD,SAAgB,qBAA2C;CACzD,MAAM,MAAM,WAAW,gBAAgB;AACvC,KAAI,CAAC,IAAK,OAAM,IAAI,MAAM,mEAAmE;AAC7F,QAAO;;AAGT,SAAgB,6BAA0D;AACxE,QAAO,WAAW,gBAAgB"}

package/dist/dev/ui/gesture/gesture.js

@@ -20,7 +20,8 @@ function Gesture({ type, action, value, pointer, region, disabled }) {
 		const options = {
 			pointer,
 			region,
-			action
+			action,
+			value
 		};
 		if (type === "doubletap") return createDoubleTapGesture(container, onActivate, options);
 		return createTapGesture(container, onActivate, options);

package/dist/dev/ui/gesture/gesture.js.map

@@ -1 +1 @@
-{"version":3,"file":"gesture.js","names":[],"sources":["../../../../src/ui/gesture/gesture.tsx"],"sourcesContent":["'use client';\n\nimport {\n  type AnyPlayerStore,\n  createDoubleTapGesture,\n  createTapGesture,\n  type GestureActionName,\n  type GesturePointerType,\n  type GestureRegion,\n  resolveGestureAction,\n} from '@videojs/core/dom';\nimport type { ReactNode } from 'react';\nimport { useEffect } from 'react';\n\nimport { useContainer, usePlayer } from '../../player/context';\n\nexport interface GestureProps {\n  type: 'tap' | 'doubletap' | (string & {});\n  action: GestureActionName | (string & {});\n  value?: number;\n  pointer?: GesturePointerType;\n  region?: GestureRegion;\n  disabled?: boolean;\n}\n\nexport function Gesture({ type, action, value, pointer, region, disabled }: GestureProps): ReactNode {\n  const store = usePlayer() as AnyPlayerStore;\n  const container = useContainer();\n\n  useEffect(() => {\n    if (!container || !type || !action || disabled) return;\n\n    const resolver = resolveGestureAction(action);\n    if (!resolver) return;\n\n    const onActivate = (event: PointerEvent) => {\n      resolver({ store, value, event });\n    };\n\n    const options = { pointer, region, action };\n\n    if (type === 'doubletap') {\n      return createDoubleTapGesture(container, onActivate, options);\n    }\n\n    return createTapGesture(container, onActivate, options);\n  }, [container, store, type, action, value, pointer, region, disabled]);\n\n  return null;\n}\n\nexport namespace Gesture {\n  export type Props = GestureProps;\n}\n\n/** @deprecated Use `GestureProps` instead. */\nexport type MediaGestureProps = GestureProps;\n\n/** @deprecated Use `Gesture` instead. */\nexport const MediaGesture = Gesture;\n"],"mappings":";;;;;AAyBA,SAAgB,QAAQ,EAAE,MAAM,QAAQ,OAAO,SAAS,QAAQ,YAAqC;CACnG,MAAM,QAAQ,WAAW;CACzB,MAAM,YAAY,cAAc;AAEhC,iBAAgB;AACd,MAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,UAAU,SAAU;EAEhD,MAAM,WAAW,qBAAqB,OAAO;AAC7C,MAAI,CAAC,SAAU;EAEf,MAAM,cAAc,UAAwB;AAC1C,YAAS;IAAE;IAAO;IAAO;IAAO,CAAC;;EAGnC,MAAM,UAAU;GAAE;GAAS;GAAQ;GAAQ;AAE3C,MAAI,SAAS,YACX,QAAO,uBAAuB,WAAW,YAAY,QAAQ;AAG/D,SAAO,iBAAiB,WAAW,YAAY,QAAQ;IACtD;EAAC;EAAW;EAAO;EAAM;EAAQ;EAAO;EAAS;EAAQ;EAAS,CAAC;AAEtE,QAAO;;;AAWT,MAAa,eAAe"}
+{"version":3,"file":"gesture.js","names":[],"sources":["../../../../src/ui/gesture/gesture.tsx"],"sourcesContent":["'use client';\n\nimport {\n  type AnyPlayerStore,\n  createDoubleTapGesture,\n  createTapGesture,\n  type GestureActionName,\n  type GesturePointerType,\n  type GestureRegion,\n  resolveGestureAction,\n} from '@videojs/core/dom';\nimport type { ReactNode } from 'react';\nimport { useEffect } from 'react';\n\nimport { useContainer, usePlayer } from '../../player/context';\n\nexport interface GestureProps {\n  type: 'tap' | 'doubletap' | (string & {});\n  action: GestureActionName | (string & {});\n  value?: number;\n  pointer?: GesturePointerType;\n  region?: GestureRegion;\n  disabled?: boolean;\n}\n\nexport function Gesture({ type, action, value, pointer, region, disabled }: GestureProps): ReactNode {\n  const store = usePlayer() as AnyPlayerStore;\n  const container = useContainer();\n\n  useEffect(() => {\n    if (!container || !type || !action || disabled) return;\n\n    const resolver = resolveGestureAction(action);\n    if (!resolver) return;\n\n    const onActivate = (event: PointerEvent) => {\n      resolver({ store, value, event });\n    };\n\n    const options = { pointer, region, action, value };\n\n    if (type === 'doubletap') {\n      return createDoubleTapGesture(container, onActivate, options);\n    }\n\n    return createTapGesture(container, onActivate, options);\n  }, [container, store, type, action, value, pointer, region, disabled]);\n\n  return null;\n}\n\nexport namespace Gesture {\n  export type Props = GestureProps;\n}\n\n/** @deprecated Use `GestureProps` instead. */\nexport type MediaGestureProps = GestureProps;\n\n/** @deprecated Use `Gesture` instead. */\nexport const MediaGesture = Gesture;\n"],"mappings":";;;;;AAyBA,SAAgB,QAAQ,EAAE,MAAM,QAAQ,OAAO,SAAS,QAAQ,YAAqC;CACnG,MAAM,QAAQ,WAAW;CACzB,MAAM,YAAY,cAAc;AAEhC,iBAAgB;AACd,MAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,UAAU,SAAU;EAEhD,MAAM,WAAW,qBAAqB,OAAO;AAC7C,MAAI,CAAC,SAAU;EAEf,MAAM,cAAc,UAAwB;AAC1C,YAAS;IAAE;IAAO;IAAO;IAAO,CAAC;;EAGnC,MAAM,UAAU;GAAE;GAAS;GAAQ;GAAQ;GAAO;AAElD,MAAI,SAAS,YACX,QAAO,uBAAuB,WAAW,YAAY,QAAQ;AAG/D,SAAO,iBAAiB,WAAW,YAAY,QAAQ;IACtD;EAAC;EAAW;EAAO;EAAM;EAAQ;EAAO;EAAS;EAAQ;EAAS,CAAC;AAEtE,QAAO;;;AAWT,MAAa,eAAe"}

package/dist/dev/ui/gesture/index.d.ts

@@ -0,0 +1,2 @@
+import { Gesture, GestureProps, MediaGesture, MediaGestureProps } from "./gesture.js";
+export { Gesture, GestureProps, MediaGesture, MediaGestureProps };

package/dist/dev/ui/gesture/index.js

@@ -0,0 +1,2 @@
+import { Gesture, MediaGesture } from "./gesture.js";
+export { Gesture, MediaGesture };

package/dist/dev/ui/hotkey/hotkey.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"hotkey.d.ts","names":[],"sources":["../../../../src/ui/hotkey/hotkey.tsx"],"mappings":";;;;UAciB,WAAA;EACf,IAAA;EACA,MAAA,EAAQ,gBAAA;EACR,KAAA;EACA,QAAA;EACA,MAAA;AAAA;AAAA,iBAGc,MAAA,CAAA;EAAS,IAAA;EAAM,MAAA;EAAQ,KAAA;EAAO,QAAA;EAAU;AAAA,GAAU,WAAA,GAAc,SAAA;AAAA,kBAyB/D,MAAA;EAAA,KACH,KAAA,GAAQ,WAAA;AAAA;;KAIV,gBAAA,GAAmB,WAAA;;cAGlB,WAAA,SAAW,MAAA"}
+{"version":3,"file":"hotkey.d.ts","names":[],"sources":["../../../../src/ui/hotkey/hotkey.tsx"],"mappings":";;;;UAciB,WAAA;EACf,IAAA;EACA,MAAA,EAAQ,gBAAA;EACR,KAAA;EACA,QAAA;EACA,MAAA;AAAA;AAAA,iBAGc,MAAA,CAAA;EAAS,IAAA;EAAM,MAAA;EAAQ,KAAA;EAAO,QAAA;EAAU;AAAA,GAAU,WAAA,GAAc,SAAA;AAAA,kBA0B/D,MAAA;EAAA,KACH,KAAA,GAAQ,WAAA;AAAA;;KAIV,gBAAA,GAAmB,WAAA;;cAGlB,WAAA,SAAW,MAAA"}

package/dist/dev/ui/hotkey/hotkey.js

@@ -13,6 +13,7 @@ function Hotkey({ keys, action, value, disabled, target }) {
 		return createHotkey(container, {
 			keys,
 			action,
+			value,
 			target,
 			disabled,
 			repeatable: !isHotkeyToggleAction(action),

package/dist/dev/ui/hotkey/hotkey.js.map

@@ -1 +1 @@
-{"version":3,"file":"hotkey.js","names":[],"sources":["../../../../src/ui/hotkey/hotkey.tsx"],"sourcesContent":["'use client';\n\nimport {\n  type AnyPlayerStore,\n  createHotkey,\n  type HotkeyActionName,\n  isHotkeyToggleAction,\n  resolveHotkeyAction,\n} from '@videojs/core/dom';\nimport type { ReactNode } from 'react';\nimport { useEffect } from 'react';\n\nimport { useContainer, usePlayer } from '../../player/context';\n\nexport interface HotkeyProps {\n  keys: string;\n  action: HotkeyActionName | (string & {});\n  value?: number;\n  disabled?: boolean;\n  target?: 'player' | 'document';\n}\n\nexport function Hotkey({ keys, action, value, disabled, target }: HotkeyProps): ReactNode {\n  const store = usePlayer() as AnyPlayerStore;\n  const container = useContainer();\n\n  useEffect(() => {\n    if (!container || !keys || !action || disabled) return;\n\n    const resolver = resolveHotkeyAction(action);\n    if (!resolver) return;\n\n    return createHotkey(container, {\n      keys,\n      action,\n      target,\n      disabled,\n      repeatable: !isHotkeyToggleAction(action),\n      onActivate: (_event, key) => {\n        resolver({ store, key, value });\n      },\n    });\n  }, [container, store, keys, action, value, disabled, target]);\n\n  return null;\n}\n\nexport namespace Hotkey {\n  export type Props = HotkeyProps;\n}\n\n/** @deprecated Use `HotkeyProps` instead. */\nexport type MediaHotkeyProps = HotkeyProps;\n\n/** @deprecated Use `Hotkey` instead. */\nexport const MediaHotkey = Hotkey;\n"],"mappings":";;;;;AAsBA,SAAgB,OAAO,EAAE,MAAM,QAAQ,OAAO,UAAU,UAAkC;CACxF,MAAM,QAAQ,WAAW;CACzB,MAAM,YAAY,cAAc;AAEhC,iBAAgB;AACd,MAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,UAAU,SAAU;EAEhD,MAAM,WAAW,oBAAoB,OAAO;AAC5C,MAAI,CAAC,SAAU;AAEf,SAAO,aAAa,WAAW;GAC7B;GACA;GACA;GACA;GACA,YAAY,CAAC,qBAAqB,OAAO;GACzC,aAAa,QAAQ,QAAQ;AAC3B,aAAS;KAAE;KAAO;KAAK;KAAO,CAAC;;GAElC,CAAC;IACD;EAAC;EAAW;EAAO;EAAM;EAAQ;EAAO;EAAU;EAAO,CAAC;AAE7D,QAAO;;;AAWT,MAAa,cAAc"}
+{"version":3,"file":"hotkey.js","names":[],"sources":["../../../../src/ui/hotkey/hotkey.tsx"],"sourcesContent":["'use client';\n\nimport {\n  type AnyPlayerStore,\n  createHotkey,\n  type HotkeyActionName,\n  isHotkeyToggleAction,\n  resolveHotkeyAction,\n} from '@videojs/core/dom';\nimport type { ReactNode } from 'react';\nimport { useEffect } from 'react';\n\nimport { useContainer, usePlayer } from '../../player/context';\n\nexport interface HotkeyProps {\n  keys: string;\n  action: HotkeyActionName | (string & {});\n  value?: number;\n  disabled?: boolean;\n  target?: 'player' | 'document';\n}\n\nexport function Hotkey({ keys, action, value, disabled, target }: HotkeyProps): ReactNode {\n  const store = usePlayer() as AnyPlayerStore;\n  const container = useContainer();\n\n  useEffect(() => {\n    if (!container || !keys || !action || disabled) return;\n\n    const resolver = resolveHotkeyAction(action);\n    if (!resolver) return;\n\n    return createHotkey(container, {\n      keys,\n      action,\n      value,\n      target,\n      disabled,\n      repeatable: !isHotkeyToggleAction(action),\n      onActivate: (_event, key) => {\n        resolver({ store, key, value });\n      },\n    });\n  }, [container, store, keys, action, value, disabled, target]);\n\n  return null;\n}\n\nexport namespace Hotkey {\n  export type Props = HotkeyProps;\n}\n\n/** @deprecated Use `HotkeyProps` instead. */\nexport type MediaHotkeyProps = HotkeyProps;\n\n/** @deprecated Use `Hotkey` instead. */\nexport const MediaHotkey = Hotkey;\n"],"mappings":";;;;;AAsBA,SAAgB,OAAO,EAAE,MAAM,QAAQ,OAAO,UAAU,UAAkC;CACxF,MAAM,QAAQ,WAAW;CACzB,MAAM,YAAY,cAAc;AAEhC,iBAAgB;AACd,MAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,UAAU,SAAU;EAEhD,MAAM,WAAW,oBAAoB,OAAO;AAC5C,MAAI,CAAC,SAAU;AAEf,SAAO,aAAa,WAAW;GAC7B;GACA;GACA;GACA;GACA;GACA,YAAY,CAAC,qBAAqB,OAAO;GACzC,aAAa,QAAQ,QAAQ;AAC3B,aAAS;KAAE;KAAO;KAAK;KAAO,CAAC;;GAElC,CAAC;IACD;EAAC;EAAW;EAAO;EAAM;EAAQ;EAAO;EAAU;EAAO,CAAC;AAE7D,QAAO;;;AAWT,MAAa,cAAc"}

package/dist/dev/ui/hotkey/index.d.ts

@@ -0,0 +1,2 @@
+import { Hotkey, HotkeyProps, MediaHotkey, MediaHotkeyProps } from "./hotkey.js";
+export { Hotkey, HotkeyProps, MediaHotkey, MediaHotkeyProps };

package/dist/dev/ui/hotkey/index.js

@@ -0,0 +1,2 @@
+import { Hotkey, MediaHotkey } from "./hotkey.js";
+export { Hotkey, MediaHotkey };

package/dist/dev/ui/input-indicators/use-indicator-visibility.js

@@ -0,0 +1,25 @@
+"use client";
+import { useContainer } from "../../player/context.js";
+import { useLatestRef } from "../../utils/use-latest-ref.js";
+import { getIndicatorVisibilityCoordinator } from "@videojs/core/dom";
+import { useCallback, useEffect, useRef, useState } from "react";
+//#region src/ui/input-indicators/use-indicator-visibility.ts
+function useIndicatorVisibility(close) {
+	const container = useContainer();
+	const closeRef = useLatestRef(close);
+	const coordinatorRef = useRef(null);
+	const [handle] = useState(() => ({ close: () => closeRef.current() }));
+	useEffect(() => {
+		if (!container) return;
+		const coordinator = getIndicatorVisibilityCoordinator(container);
+		coordinatorRef.current = coordinator;
+		return coordinator.register(handle);
+	}, [container, handle]);
+	return useCallback(() => {
+		coordinatorRef.current?.show(handle);
+	}, [handle]);
+}
+//#endregion
+export { useIndicatorVisibility };
+
+//# sourceMappingURL=use-indicator-visibility.js.map

package/dist/dev/ui/input-indicators/use-indicator-visibility.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-indicator-visibility.js","names":[],"sources":["../../../../src/ui/input-indicators/use-indicator-visibility.ts"],"sourcesContent":["'use client';\n\nimport type { IndicatorVisibilityHandle } from '@videojs/core';\nimport { getIndicatorVisibilityCoordinator } from '@videojs/core/dom';\nimport { useCallback, useEffect, useRef, useState } from 'react';\n\nimport { useContainer } from '../../player/context';\nimport { useLatestRef } from '../../utils/use-latest-ref';\n\nexport function useIndicatorVisibility(close: () => void): () => void {\n  const container = useContainer();\n  const closeRef = useLatestRef(close);\n  const coordinatorRef = useRef<ReturnType<typeof getIndicatorVisibilityCoordinator> | null>(null);\n  const [handle] = useState<IndicatorVisibilityHandle>(() => ({\n    close: () => closeRef.current(),\n  }));\n\n  useEffect(() => {\n    if (!container) return;\n\n    const coordinator = getIndicatorVisibilityCoordinator(container);\n    coordinatorRef.current = coordinator;\n\n    return coordinator.register(handle);\n  }, [container, handle]);\n\n  return useCallback(() => {\n    coordinatorRef.current?.show(handle);\n  }, [handle]);\n}\n"],"mappings":";;;;;;AASA,SAAgB,uBAAuB,OAA+B;CACpE,MAAM,YAAY,cAAc;CAChC,MAAM,WAAW,aAAa,MAAM;CACpC,MAAM,iBAAiB,OAAoE,KAAK;CAChG,MAAM,CAAC,UAAU,gBAA2C,EAC1D,aAAa,SAAS,SAAS,EAChC,EAAE;AAEH,iBAAgB;AACd,MAAI,CAAC,UAAW;EAEhB,MAAM,cAAc,kCAAkC,UAAU;AAChE,iBAAe,UAAU;AAEzB,SAAO,YAAY,SAAS,OAAO;IAClC,CAAC,WAAW,OAAO,CAAC;AAEvB,QAAO,kBAAkB;AACvB,iBAAe,SAAS,KAAK,OAAO;IACnC,CAAC,OAAO,CAAC"}

package/dist/dev/ui/input-indicators/use-input-action-subscription.js

@@ -0,0 +1,22 @@
+"use client";
+import { useContainer, usePlayer } from "../../player/context.js";
+import { useLatestRef } from "../../utils/use-latest-ref.js";
+import { getMediaSnapshot, subscribeToInputActions } from "@videojs/core/dom";
+import { useEffect } from "react";
+//#region src/ui/input-indicators/use-input-action-subscription.ts
+function useInputActionSubscription(callback) {
+	const container = useContainer();
+	const store = usePlayer();
+	const callbackRef = useLatestRef(callback);
+	const storeRef = useLatestRef(store);
+	useEffect(() => {
+		if (!container) return;
+		return subscribeToInputActions(container, (event) => {
+			callbackRef.current(event, getMediaSnapshot(storeRef.current));
+		});
+	}, [container]);
+}
+//#endregion
+export { useInputActionSubscription };
+
+//# sourceMappingURL=use-input-action-subscription.js.map

package/dist/dev/ui/input-indicators/use-input-action-subscription.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-input-action-subscription.js","names":[],"sources":["../../../../src/ui/input-indicators/use-input-action-subscription.ts"],"sourcesContent":["'use client';\n\nimport type { InputActionEvent, MediaSnapshot } from '@videojs/core';\nimport { getMediaSnapshot, subscribeToInputActions } from '@videojs/core/dom';\nimport { useEffect } from 'react';\n\nimport { useContainer, usePlayer } from '../../player/context';\nimport { useLatestRef } from '../../utils/use-latest-ref';\n\nexport function useInputActionSubscription(callback: (event: InputActionEvent, snapshot: MediaSnapshot) => void): void {\n  const container = useContainer();\n  const store = usePlayer();\n  const callbackRef = useLatestRef(callback);\n  const storeRef = useLatestRef(store);\n\n  useEffect(() => {\n    if (!container) return;\n\n    return subscribeToInputActions(container, (event) => {\n      callbackRef.current(event, getMediaSnapshot(storeRef.current));\n    });\n  }, [container]);\n}\n"],"mappings":";;;;;;AASA,SAAgB,2BAA2B,UAA4E;CACrH,MAAM,YAAY,cAAc;CAChC,MAAM,QAAQ,WAAW;CACzB,MAAM,cAAc,aAAa,SAAS;CAC1C,MAAM,WAAW,aAAa,MAAM;AAEpC,iBAAgB;AACd,MAAI,CAAC,UAAW;AAEhB,SAAO,wBAAwB,YAAY,UAAU;AACnD,eAAY,QAAQ,OAAO,iBAAiB,SAAS,QAAQ,CAAC;IAC9D;IACD,CAAC,UAAU,CAAC"}

package/dist/dev/ui/input-indicators/use-input-indicator-root.js

@@ -0,0 +1,21 @@
+"use client";
+import { useDestroy } from "../../utils/use-destroy.js";
+import { useIndicatorVisibility } from "./use-indicator-visibility.js";
+import { useInputActionSubscription } from "./use-input-action-subscription.js";
+import { useRenderedIndicatorState } from "./use-rendered-indicator-state.js";
+import { useState, useSyncExternalStore } from "react";
+//#region src/ui/input-indicators/use-input-indicator-root.ts
+function useInputIndicatorRoot(createCore, props) {
+	const [core] = useState(createCore);
+	useDestroy(core);
+	core.setProps(props);
+	const showIndicator = useIndicatorVisibility(() => core.close());
+	useInputActionSubscription((event, snapshot) => {
+		if (core.processEvent(event, snapshot)) showIndicator();
+	});
+	return useRenderedIndicatorState(useSyncExternalStore((callback) => core.state.subscribe(callback), () => core.state.current, () => core.state.current));
+}
+//#endregion
+export { useInputIndicatorRoot };
+
+//# sourceMappingURL=use-input-indicator-root.js.map

package/dist/dev/ui/input-indicators/use-input-indicator-root.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-input-indicator-root.js","names":[],"sources":["../../../../src/ui/input-indicators/use-input-indicator-root.ts"],"sourcesContent":["'use client';\n\nimport type { IndicatorLifecycleState, InputActionEvent, MediaSnapshot } from '@videojs/core';\nimport type { State as StoreState } from '@videojs/store';\nimport { useState, useSyncExternalStore } from 'react';\n\nimport { useDestroy } from '../../utils/use-destroy';\nimport { useIndicatorVisibility } from './use-indicator-visibility';\nimport { useInputActionSubscription } from './use-input-action-subscription';\nimport { useRenderedIndicatorState } from './use-rendered-indicator-state';\n\ninterface InputIndicatorRootCore<IndicatorState extends IndicatorLifecycleState, Props> {\n  readonly state: StoreState<IndicatorState>;\n  setProps(props: Props): void;\n  destroy(): void;\n  close(): void;\n  processEvent(event: InputActionEvent, snapshot: MediaSnapshot): boolean;\n}\n\nexport function useInputIndicatorRoot<IndicatorState extends IndicatorLifecycleState, Props>(\n  createCore: () => InputIndicatorRootCore<IndicatorState, Props>,\n  props: Props\n) {\n  const [core] = useState(createCore);\n  useDestroy(core);\n  core.setProps(props);\n  const showIndicator = useIndicatorVisibility(() => core.close());\n\n  useInputActionSubscription((event, snapshot) => {\n    if (core.processEvent(event, snapshot)) showIndicator();\n  });\n\n  const currentState = useSyncExternalStore(\n    (callback) => core.state.subscribe(callback),\n    () => core.state.current,\n    () => core.state.current\n  );\n\n  return useRenderedIndicatorState(currentState);\n}\n"],"mappings":";;;;;;;AAmBA,SAAgB,sBACd,YACA,OACA;CACA,MAAM,CAAC,QAAQ,SAAS,WAAW;AACnC,YAAW,KAAK;AAChB,MAAK,SAAS,MAAM;CACpB,MAAM,gBAAgB,6BAA6B,KAAK,OAAO,CAAC;AAEhE,6BAA4B,OAAO,aAAa;AAC9C,MAAI,KAAK,aAAa,OAAO,SAAS,CAAE,gBAAe;GACvD;AAQF,QAAO,0BANc,sBAClB,aAAa,KAAK,MAAM,UAAU,SAAS,QACtC,KAAK,MAAM,eACX,KAAK,MAAM,QAClB,CAE6C"}

package/dist/dev/ui/input-indicators/use-rendered-indicator-state.js

@@ -0,0 +1,40 @@
+"use client";
+import { useDestroy } from "../../utils/use-destroy.js";
+import { createTransition } from "@videojs/core/dom";
+import { useEffect, useRef, useState, useSyncExternalStore } from "react";
+import { getRenderedIndicatorState, isIndicatorPresent } from "@videojs/core";
+//#region src/ui/input-indicators/use-rendered-indicator-state.ts
+function useRenderedIndicatorState(currentState) {
+	const elementRef = useRef(null);
+	const currentStateRef = useRef(currentState);
+	const snapshotRef = useRef(currentState);
+	const [transition] = useState(() => createTransition());
+	useDestroy(transition);
+	currentStateRef.current = currentState;
+	const transitionState = useSyncExternalStore((callback) => transition.state.subscribe(callback), () => transition.state.current, () => transition.state.current);
+	const { generation, open } = currentState;
+	useEffect(() => {
+		if (open) {
+			const nextState = currentStateRef.current;
+			if (nextState.generation !== generation) return;
+			snapshotRef.current = nextState;
+			transition.open();
+			return;
+		}
+		const { active, status } = transition.state.current;
+		if (active && status !== "ending") transition.close(elementRef.current);
+	}, [
+		generation,
+		open,
+		transition
+	]);
+	return {
+		elementRef,
+		present: isIndicatorPresent(currentState, transitionState),
+		state: getRenderedIndicatorState(currentState, snapshotRef.current, transitionState)
+	};
+}
+//#endregion
+export { useRenderedIndicatorState };
+
+//# sourceMappingURL=use-rendered-indicator-state.js.map

package/dist/dev/ui/input-indicators/use-rendered-indicator-state.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-rendered-indicator-state.js","names":[],"sources":["../../../../src/ui/input-indicators/use-rendered-indicator-state.ts"],"sourcesContent":["'use client';\n\nimport { getRenderedIndicatorState, type IndicatorLifecycleState, isIndicatorPresent } from '@videojs/core';\nimport { createTransition } from '@videojs/core/dom';\nimport { useEffect, useRef, useState, useSyncExternalStore } from 'react';\n\nimport { useDestroy } from '../../utils/use-destroy';\n\nexport function useRenderedIndicatorState<State extends IndicatorLifecycleState>(currentState: State) {\n  const elementRef = useRef<HTMLElement>(null);\n  const currentStateRef = useRef(currentState);\n  const snapshotRef = useRef(currentState);\n  const [transition] = useState(() => createTransition());\n  useDestroy(transition);\n  currentStateRef.current = currentState;\n\n  const transitionState = useSyncExternalStore(\n    (callback) => transition.state.subscribe(callback),\n    () => transition.state.current,\n    () => transition.state.current\n  );\n\n  const { generation, open } = currentState;\n\n  useEffect(() => {\n    if (open) {\n      const nextState = currentStateRef.current;\n      if (nextState.generation !== generation) return;\n\n      snapshotRef.current = nextState;\n      void transition.open();\n      return;\n    }\n\n    const { active, status } = transition.state.current;\n    if (active && status !== 'ending') {\n      void transition.close(elementRef.current);\n    }\n  }, [generation, open, transition]);\n\n  return {\n    elementRef,\n    present: isIndicatorPresent(currentState, transitionState),\n    state: getRenderedIndicatorState(currentState, snapshotRef.current, transitionState),\n  };\n}\n"],"mappings":";;;;;;AAQA,SAAgB,0BAAiE,cAAqB;CACpG,MAAM,aAAa,OAAoB,KAAK;CAC5C,MAAM,kBAAkB,OAAO,aAAa;CAC5C,MAAM,cAAc,OAAO,aAAa;CACxC,MAAM,CAAC,cAAc,eAAe,kBAAkB,CAAC;AACvD,YAAW,WAAW;AACtB,iBAAgB,UAAU;CAE1B,MAAM,kBAAkB,sBACrB,aAAa,WAAW,MAAM,UAAU,SAAS,QAC5C,WAAW,MAAM,eACjB,WAAW,MAAM,QACxB;CAED,MAAM,EAAE,YAAY,SAAS;AAE7B,iBAAgB;AACd,MAAI,MAAM;GACR,MAAM,YAAY,gBAAgB;AAClC,OAAI,UAAU,eAAe,WAAY;AAEzC,eAAY,UAAU;AACjB,cAAW,MAAM;AACtB;;EAGF,MAAM,EAAE,QAAQ,WAAW,WAAW,MAAM;AAC5C,MAAI,UAAU,WAAW,SAClB,YAAW,MAAM,WAAW,QAAQ;IAE1C;EAAC;EAAY;EAAM;EAAW,CAAC;AAElC,QAAO;EACL;EACA,SAAS,mBAAmB,cAAc,gBAAgB;EAC1D,OAAO,0BAA0B,cAAc,YAAY,SAAS,gBAAgB;EACrF"}

package/dist/dev/ui/live-button/index.d.ts

@@ -0,0 +1,2 @@
+import { LiveButton, LiveButtonProps } from "./live-button.js";
+export { LiveButton, type LiveButtonProps };

package/dist/dev/ui/live-button/index.js

@@ -0,0 +1,2 @@
+import { LiveButton } from "./live-button.js";
+export { LiveButton };

package/dist/dev/ui/live-button/live-button.d.ts

@@ -0,0 +1,34 @@
+import { UIComponentProps } from "../../utils/types.js";
+import * as _$react from "react";
+import { LiveButtonCore } from "@videojs/core";
+
+//#region src/ui/live-button/live-button.d.ts
+interface LiveButtonProps extends UIComponentProps<'button', LiveButtonCore.State>, LiveButtonCore.Props {}
+/**
+ * A button that indicates live status and seeks to the live edge when
+ * pressed. Exposes `data-live` while the stream is live (or DVR) and
+ * `data-live-edge` while playing at the live edge so skins can style a
+ * red-dot ↔ grey-dot treatment.
+ *
+ * Selects from `live`, `time`, and `buffer` features and composes them
+ * itself rather than going through `createMediaButton`, since the LiveButton
+ * needs three feature slices to detect the live edge and seek.
+ *
+ * Falls back to `LiveButtonCore.defaultText` (`'Live'` by default) when no
+ * children are provided. Override the static field globally for i18n.
+ *
+ * @example
+ * ```tsx
+ * <LiveButton />
+ * ```
+ *
+ * @see https://github.com/video-dev/media-ui-extensions/blob/main/proposals/0007-live-edge.md
+ */
+declare const LiveButton: _$react.ForwardRefExoticComponent<Omit<LiveButtonProps, "ref"> & _$react.RefAttributes<HTMLButtonElement>>;
+declare namespace LiveButton {
+  type Props = LiveButtonProps;
+  type State = LiveButtonCore.State;
+}
+//#endregion
+export { LiveButton, LiveButtonProps };
+//# sourceMappingURL=live-button.d.ts.map

package/dist/dev/ui/live-button/live-button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"live-button.d.ts","names":[],"sources":["../../../../src/ui/live-button/live-button.tsx"],"mappings":";;;;;UAciB,eAAA,SAAwB,gBAAA,WAA2B,cAAA,CAAe,KAAA,GAAQ,cAAA,CAAe,KAAA;;AAA1G;;;;;;;;;;;;;;;AAsBA;;;;cAAa,UAAA,EAAU,OAAA,CAAA,yBAAA,CAAA,IAAA,CAAA,eAAA,WAAA,OAAA,CAAA,aAAA,CAAA,iBAAA;AAAA,kBAgEN,UAAA;EAAA,KACH,KAAA,GAAQ,eAAA;EAAA,KACR,KAAA,GAAQ,cAAA,CAAe,KAAA;AAAA"}