@videojs/react 10.0.0-beta.26 → 10.0.0-beta.27

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-(--slider-width,100%) data-[orientation=horizontal]:h-(--slider-height,--spacing(8))\", \"data-[orientation=vertical]:w-(--slider-width,--spacing(8)) data-[orientation=vertical]:h-(--slider-height,--spacing(20))\"),\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)\", \"group-data-dragging/slider:data-[orientation=horizontal]:w-(--media-slider-pointer)\", \"data-[orientation=vertical]:inset-x-0 data-[orientation=vertical]:bottom-0\", \"data-[orientation=vertical]:h-(--media-slider-fill,0)\", \"group-data-dragging/slider:data-[orientation=vertical]:h-(--media-slider-pointer)\"),\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,oklch(0_0_0/0.15)),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)\", \"group-data-dragging/slider:data-[orientation=horizontal]:left-(--media-slider-pointer)\", \"data-[orientation=vertical]:left-1/2 data-[orientation=vertical]:top-[calc(100%-var(--media-slider-fill,0))]\", \"group-data-dragging/slider:data-[orientation=vertical]:top-[calc(100%-var(--media-slider-pointer))]\"),\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\tpreview: cn(\"group/preview\", \"before:block before:bg-current/35 before:opacity-0 before:scale-50\", \"before:transition-[opacity,scale] before:duration-200 before:ease-out\", \"data-pointing:not-data-dragging:before:opacity-100 data-pointing:not-data-dragging:before:scale-100\", \"data-[orientation=horizontal]:before:min-w-px data-[orientation=horizontal]:before:h-5\", \"data-[orientation=vertical]:before:w-5 data-[orientation=vertical]:before:min-h-px\", \"peer-has-[[role=img]:not([data-hidden])]/thumbnail:*:hidden\"),\n\tvalue: cn(\"absolute bottom-6 tabular-nums\", \"-translate-x-1/2 translate-y-2 scale-50 opacity-0 blur-lg\", \"text-shadow-2xs text-shadow-(color:--media-current-shadow-color)\", \"transition-[filter,opacity,scale,translate] duration-200 ease-out\", \"group-data-pointing/preview:translate-y-0 group-data-pointing/preview:scale-100\", \"group-data-pointing/preview:opacity-100 group-data-pointing/preview:blur-none\")\n};\n//#endregion\nexport { slider };\n\n//# sourceMappingURL=slider.js.map"],"mappings":";;AAEA,MAAM,SAAS;CACd,MAAM,GAAG,0GAA0G,+JAA+J,2HAA2H;CAC7Y,OAAO,GAAG,gFAAgF,6EAA6E,uEAAuE;CAC9O,MAAM;EACL,MAAM;EACN,MAAM,GAAG,cAAc,gFAAgF,2DAA2D,uFAAuF,8EAA8E,yDAAyD,mFAAmF;EACnd,QAAQ,GAAG,uCAAuC,gFAAgF,8GAA8G,8EAA8E,uGAAuG;CACta;CACA,OAAO;EACN,MAAM,GAAG,0DAA0D,2BAA2B,yIAAyI,+EAA+E,mDAAmD,gEAAgE,oGAAoG,0FAA0F,gHAAgH,qGAAqG;EAC5zB,aAAa,GAAG,oCAAoC,+DAA+D,2EAA2E;CAC/L;CACA,SAAS,GAAG,iBAAiB,sEAAsE,yEAAyE,uGAAuG,0FAA0F,sFAAsF,6DAA6D;CAChgB,OAAO,GAAG,kCAAkC,6DAA6D,oEAAoE,qEAAqE,mFAAmF,+EAA+E;AACrZ"}
+{"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 previewContent = cn(\"absolute [left:var(--preview-left,var(--media-slider-pointer))] max-w-(--max-width)\", \"-translate-x-1/2 translate-y-2 scale-80 opacity-0 blur-lg origin-bottom\", \"transition-[filter,opacity,scale] duration-150 ease-out\", \"group-data-pointing/preview:scale-100 group-data-pointing/preview:opacity-100\", \"group-data-pointing/preview:blur-none\", \"group-data-interactive/preview:group-not-data-pointing/preview:group-not-data-dragging/preview:scale-100\", \"group-data-interactive/preview:group-not-data-pointing/preview:group-not-data-dragging/preview:opacity-100\", \"group-data-interactive/preview:group-not-data-pointing/preview:group-not-data-dragging/preview:blur-none\");\nconst slider = {\n\troot: cn(\"group/slider relative flex flex-1 items-center justify-center rounded-(--track-border-radius) outline-none cursor-pointer\", \"[--track-border-radius:calc(infinity*1px)]\", \"data-[orientation=horizontal]:min-w-20 data-[orientation=horizontal]:w-(--slider-width,100%) data-[orientation=horizontal]:h-(--slider-height,--spacing(8))\", \"data-[orientation=vertical]:w-(--slider-width,--spacing(8)) data-[orientation=vertical]:h-(--slider-height,--spacing(20))\"),\n\ttrack: cn(\"relative isolate overflow-hidden bg-current/20 rounded-(--track-border-radius) 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\tchapters: cn(\"relative flex flex-1 items-center min-w-0 min-h-0 size-full rounded-[inherit]\"),\n\tchapter: {\n\t\tbase: cn(\"group/chapter absolute inset-0 flex items-center justify-center min-w-0 min-h-0\", \"[--chapter-gap:calc(var(--spacing)*1)] [--chapter-inset-start:0.5] [--chapter-inset-end:0.5]\", \"first:[--chapter-inset-start:0] last:[--chapter-inset-end:0]\", \"data-[orientation=horizontal]:[clip-path:inset(0_calc(100%-var(--media-slider-chapter-end))_0_var(--media-slider-chapter-start))]\", \"data-[orientation=vertical]:[clip-path:inset(calc(100%-var(--media-slider-chapter-end))_0_var(--media-slider-chapter-start)_0)]\"),\n\t\ttrack: cn(\"relative isolate overflow-hidden bg-current/20 rounded-(--track-border-radius) select-none\", \"motion-safe:transition-[height,width] motion-safe:duration-200 motion-safe:ease-out\", \"data-[orientation=horizontal]:w-full data-[orientation=horizontal]:h-0.75\", \"group-data-highlighted/chapter:data-[orientation=horizontal]:h-[--spacing(1.25)]\", \"data-[orientation=horizontal]:[clip-path:inset(0_calc(100%-var(--media-slider-chapter-end)+var(--chapter-gap)*var(--chapter-inset-end))_0_calc(var(--media-slider-chapter-start)+var(--chapter-gap)*var(--chapter-inset-start))_round_var(--track-border-radius))]\", \"data-[orientation=vertical]:w-0.75 data-[orientation=vertical]:h-full\", \"group-data-highlighted/chapter:data-[orientation=vertical]:w-[--spacing(1.25)]\", \"data-[orientation=vertical]:[clip-path:inset(calc(100%-var(--media-slider-chapter-end)+var(--chapter-gap)*var(--chapter-inset-end))_0_calc(var(--media-slider-chapter-start)+var(--chapter-gap)*var(--chapter-inset-start))_0_round_var(--track-border-radius))]\")\n\t},\n\tfill: {\n\t\tbase: cn(\"absolute rounded-[inherit] pointer-events-none\", \"motion-safe:duration-200 motion-safe:ease-linear\", \"data-dragging:duration-0 data-seeking:duration-0\"),\n\t\tfill: cn(\"bg-(--accent-color)\", \"data-[orientation=horizontal]:inset-y-0 data-[orientation=horizontal]:left-0 data-[orientation=horizontal]:w-full\", \"data-[orientation=horizontal]:transition-[clip-path] data-[orientation=horizontal]:[clip-path:inset(0_calc(100%-var(--media-slider-fill))_0_0_round_var(--track-border-radius))]\", \"group-data-dragging/slider:data-[orientation=horizontal]:[clip-path:inset(0_calc(100%-var(--media-slider-pointer))_0_0_round_var(--track-border-radius))]\", \"data-[orientation=vertical]:inset-x-0 data-[orientation=vertical]:bottom-0 data-[orientation=vertical]:h-full\", \"data-[orientation=vertical]:transition-[clip-path] data-[orientation=vertical]:[clip-path:inset(calc(100%-var(--media-slider-fill))_0_0_0_round_var(--track-border-radius))]\", \"group-data-dragging/slider:data-[orientation=vertical]:[clip-path:inset(calc(100%-var(--media-slider-pointer))_0_0_0_round_var(--track-border-radius))]\"),\n\t\tbuffer: cn(\"bg-current/20 motion-safe:duration-250 motion-safe:ease-out\", \"data-[orientation=horizontal]:inset-y-0 data-[orientation=horizontal]:left-0 data-[orientation=horizontal]:w-full\", \"data-[orientation=horizontal]:transition-[clip-path] data-[orientation=horizontal]:[clip-path:inset(0_calc(100%-var(--media-slider-buffer))_0_0_round_var(--track-border-radius))]\", \"data-[orientation=vertical]:inset-x-0 data-[orientation=vertical]:bottom-0 data-[orientation=vertical]:h-full\", \"data-[orientation=vertical]:transition-[clip-path] data-[orientation=vertical]:[clip-path:inset(calc(100%-var(--media-slider-buffer))_0_0_0_round_var(--track-border-radius))]\")\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(--shadow-current-color,oklch(0_0_0/0.15)),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] motion-safe:transition-[opacity,scale,outline-offset,left,top] duration-150 ease-out select-none\", \"data-dragging:duration-0 data-seeking:duration-0\", \"outline-2 outline-transparent -outline-offset-2\", \"focus-visible:outline-(--focus-ring-color) focus-visible:outline-offset-2\", \"data-[orientation=horizontal]:top-1/2 data-[orientation=horizontal]:left-(--media-slider-fill,0)\", \"group-data-dragging/slider:data-[orientation=horizontal]:left-(--media-slider-pointer)\", \"data-[orientation=vertical]:left-1/2 data-[orientation=vertical]:top-[calc(100%-var(--media-slider-fill,0))]\", \"group-data-dragging/slider:data-[orientation=vertical]:top-[calc(100%-var(--media-slider-pointer))]\"),\n\t\tinteractive: cn(\"opacity-0 scale-70 origin-center\", \"pointer-fine:group-hover/slider:opacity-100 pointer-fine:group-hover/slider:scale-100\", \"group-focus-within/slider:opacity-100 group-focus-within/slider:scale-100\")\n\t},\n\tpreview: cn(\"group/preview [--max-width:min(--spacing(48),100cqi)] [--max-height:--spacing(32)] min-w-full h-1\", \"before:absolute before:z-1 before:bg-current/35 before:pointer-events-none\", \"before:-translate-1/2 before:opacity-0 before:scale-50\", \"before:transition-[opacity,scale] before:duration-200 before:ease-out\", \"data-pointing:not-data-dragging:before:opacity-100 data-pointing:not-data-dragging:before:scale-100\", \"data-[orientation=horizontal]:before:top-1/2 data-[orientation=horizontal]:before:left-(--media-slider-pointer)\", \"data-[orientation=horizontal]:before:w-px data-[orientation=horizontal]:before:h-5\", \"data-[orientation=vertical]:before:top-[calc(100%-var(--media-slider-pointer))] data-[orientation=vertical]:before:left-1/2\", \"data-[orientation=vertical]:before:w-5 data-[orientation=vertical]:before:h-px\"),\n\tthumbnail: cn(previewContent, \"[--thumbnail-max-width:var(--max-width)] [bottom:calc(100%+--spacing(12))]\"),\n\tvalue: cn(previewContent, \"[bottom:calc(100%+--spacing(5))] flex flex-row-reverse justify-center gap-2 px-3 tabular-nums\", \"text-shadow-2xs text-shadow-(color:--shadow-current-color)\"),\n\tchapterTitle: \"min-w-0 overflow-hidden text-ellipsis whitespace-nowrap empty:hidden\"\n};\n//#endregion\nexport { slider };\n\n//# sourceMappingURL=slider.js.map"],"mappings":";;AAEA,MAAM,iBAAiB,GAAG,uFAAuF,2EAA2E,2DAA2D,iFAAiF,yCAAyC,4GAA4G,8GAA8G,0GAA0G;AACrrB,MAAM,SAAS;CACd,MAAM,GAAG,6HAA6H,8CAA8C,+JAA+J,2HAA2H;CAC9c,OAAO,GAAG,8FAA8F,6EAA6E,uEAAuE;CAC5P,UAAU,GAAG,+EAA+E;CAC5F,SAAS;EACR,MAAM,GAAG,mFAAmF,gGAAgG,gEAAgE,qIAAqI,iIAAiI;EAClgB,OAAO,GAAG,8FAA8F,uFAAuF,6EAA6E,oFAAoF,sQAAsQ,yEAAyE,kFAAkF,kQAAkQ;CACpgC;CACA,MAAM;EACL,MAAM,GAAG,kDAAkD,oDAAoD,kDAAkD;EACjK,MAAM,GAAG,uBAAuB,qHAAqH,oLAAoL,6JAA6J,iHAAiH,gLAAgL,yJAAyJ;EACh6B,QAAQ,GAAG,+DAA+D,qHAAqH,sLAAsL,iHAAiH,gLAAgL;CACvpB;CACA,OAAO;EACN,MAAM,GAAG,0DAA0D,2BAA2B,mIAAmI,8IAA8I,oDAAoD,mDAAmD,6EAA6E,oGAAoG,0FAA0F,gHAAgH,qGAAqG;EACt7B,aAAa,GAAG,oCAAoC,yFAAyF,2EAA2E;CACzN;CACA,SAAS,GAAG,qGAAqG,8EAA8E,0DAA0D,yEAAyE,uGAAuG,mHAAmH,sFAAsF,+HAA+H,gFAAgF;CACj0B,WAAW,GAAG,gBAAgB,4EAA4E;CAC1G,OAAO,GAAG,gBAAgB,iGAAiG,4DAA4D;CACvL,cAAc;AACf"}

package/dist/dev/skins/dist/default/minimal/tailwind/components/status-indicator.js

@@ -0,0 +1,29 @@
+import { centeredIndicatorRoot, topIndicatorContent, topIndicatorIcon, topIndicatorRoot } from "./input-indicator.js";
+import { cn } from "@videojs/utils/style";
+//#region ../skins/dist/default/minimal/tailwind/components/status-indicator.js
+const statusIndicator = {
+	root: cn(topIndicatorRoot, "data-open:duration-100"),
+	content: topIndicatorContent,
+	value: "ml-auto",
+	icon: {
+		base: topIndicatorIcon,
+		captionsOn: "group-data-[status=captions-on]/input-indicator:block",
+		captionsOff: "group-data-[status=captions-off]/input-indicator:block",
+		fullscreenEnter: "group-data-[status=fullscreen]/input-indicator:block",
+		fullscreenExit: "group-data-[status=exit-fullscreen]/input-indicator:block",
+		pipEnter: "group-data-[status=pip]/input-indicator:block",
+		pipExit: "group-data-[status=exit-pip]/input-indicator:block"
+	},
+	playback: {
+		root: cn(centeredIndicatorRoot, "[transition-property:opacity,scale]", "duration-200 ease-out", "motion-reduce:transition-opacity", "motion-reduce:duration-50", "data-starting-style:opacity-0", "data-ending-style:opacity-0", "data-starting-style:scale-[0.85]", "data-ending-style:scale-[0.85]", "data-ending-style:duration-100", "data-ending-style:ease-in", "motion-reduce:data-starting-style:scale-100", "motion-reduce:data-ending-style:scale-100"),
+		icon: {
+			base: cn("col-start-1 row-start-1 size-[calc(var(--media-icon-size)*2)]", "opacity-0 scale-0", "[transition-property:opacity,scale] duration-150 ease-out", "motion-reduce:scale-100 motion-reduce:transition-opacity motion-reduce:duration-50"),
+			pause: "group-data-[status=pause]/input-indicator:opacity-100 group-data-[status=pause]/input-indicator:scale-100",
+			play: "group-data-[status=play]/input-indicator:opacity-100 group-data-[status=play]/input-indicator:scale-100"
+		}
+	}
+};
+//#endregion
+export { statusIndicator };
+
+//# sourceMappingURL=status-indicator.js.map

package/dist/dev/skins/dist/default/minimal/tailwind/components/status-indicator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"status-indicator.js","names":[],"sources":["../../../../../../../../../skins/dist/default/minimal/tailwind/components/status-indicator.js"],"sourcesContent":["import { centeredIndicatorRoot, topIndicatorContent, topIndicatorIcon, topIndicatorRoot } from \"./input-indicator.js\";\nimport { cn } from \"@videojs/utils/style\";\n//#region src/minimal/tailwind/components/status-indicator.ts\nconst statusIndicator = {\n\troot: cn(topIndicatorRoot, \"data-open:duration-100\"),\n\tcontent: topIndicatorContent,\n\tvalue: \"ml-auto\",\n\ticon: {\n\t\tbase: topIndicatorIcon,\n\t\tcaptionsOn: \"group-data-[status=captions-on]/input-indicator:block\",\n\t\tcaptionsOff: \"group-data-[status=captions-off]/input-indicator:block\",\n\t\tfullscreenEnter: \"group-data-[status=fullscreen]/input-indicator:block\",\n\t\tfullscreenExit: \"group-data-[status=exit-fullscreen]/input-indicator:block\",\n\t\tpipEnter: \"group-data-[status=pip]/input-indicator:block\",\n\t\tpipExit: \"group-data-[status=exit-pip]/input-indicator:block\"\n\t},\n\tplayback: {\n\t\troot: cn(centeredIndicatorRoot, \"[transition-property:opacity,scale]\", \"duration-200 ease-out\", \"motion-reduce:transition-opacity\", \"motion-reduce:duration-50\", \"data-starting-style:opacity-0\", \"data-ending-style:opacity-0\", \"data-starting-style:scale-[0.85]\", \"data-ending-style:scale-[0.85]\", \"data-ending-style:duration-100\", \"data-ending-style:ease-in\", \"motion-reduce:data-starting-style:scale-100\", \"motion-reduce:data-ending-style:scale-100\"),\n\t\ticon: {\n\t\t\tbase: cn(\"col-start-1 row-start-1 size-[calc(var(--media-icon-size)*2)]\", \"opacity-0 scale-0\", \"[transition-property:opacity,scale] duration-150 ease-out\", \"motion-reduce:scale-100 motion-reduce:transition-opacity motion-reduce:duration-50\"),\n\t\t\tpause: \"group-data-[status=pause]/input-indicator:opacity-100 group-data-[status=pause]/input-indicator:scale-100\",\n\t\t\tplay: \"group-data-[status=play]/input-indicator:opacity-100 group-data-[status=play]/input-indicator:scale-100\"\n\t\t}\n\t}\n};\n//#endregion\nexport { statusIndicator };\n\n//# sourceMappingURL=status-indicator.js.map"],"mappings":";;;AAGA,MAAM,kBAAkB;CACvB,MAAM,GAAG,kBAAkB,wBAAwB;CACnD,SAAS;CACT,OAAO;CACP,MAAM;EACL,MAAM;EACN,YAAY;EACZ,aAAa;EACb,iBAAiB;EACjB,gBAAgB;EAChB,UAAU;EACV,SAAS;CACV;CACA,UAAU;EACT,MAAM,GAAG,uBAAuB,uCAAuC,yBAAyB,oCAAoC,6BAA6B,iCAAiC,+BAA+B,oCAAoC,kCAAkC,kCAAkC,6BAA6B,+CAA+C,2CAA2C;EAChc,MAAM;GACL,MAAM,GAAG,iEAAiE,qBAAqB,6DAA6D,oFAAoF;GAChP,OAAO;GACP,MAAM;EACP;CACD;AACD"}

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

@@ -1,11 +1,9 @@
 import { cn } from "@videojs/utils/style";
 //#region ../skins/dist/default/minimal/tailwind/components/thumbnail.js
 const thumbnail = {
-	root: "group/thumbnail peer/thumbnail pointer-events-none",
-	imageWrapper: "relative rounded-[--spacing(2)] bg-black/90",
-	image: 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-not-has-[[role=img][data-loading]]/thumbnail:[--media-spinner-animation:none] group-has-[[role=img][data-loading]]/thumbnail:opacity-100")
+	root: cn("group/thumbnail pointer-events-none bg-black/90 rounded-[--spacing(2)]", "after:absolute after:inset-0 after:rounded-[inherit]", "after:ring-1 after:ring-black/5 after:shadow-sm after:shadow-black/20", "has-data-loading:w-(--thumbnail-max-width) has-data-loading:max-w-full", "has-data-loading:aspect-video has-data-loading:overflow-hidden"),
+	image: cn("relative block max-w-(--thumbnail-max-width) max-h-(--max-height) overflow-clip rounded-[inherit]", "transition-opacity duration-150 ease-out data-loading:opacity-0"),
+	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]]/thumbnail:[--media-spinner-animation:none] motion-reduce:[--media-spinner-animation:none] group-has-[[role=img][data-loading]]/thumbnail:opacity-100")
 };
 //#endregion
 export { thumbnail };

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

@@ -1 +1 @@
-{"version":3,"file":"thumbnail.js","names":[],"sources":["../../../../../../../../../skins/dist/default/minimal/tailwind/components/thumbnail.js"],"sourcesContent":["import { cn } from \"@videojs/utils/style\";\n//#region src/minimal/tailwind/components/thumbnail.ts\nconst thumbnail = {\n\troot: \"group/thumbnail peer/thumbnail pointer-events-none\",\n\timageWrapper: \"relative rounded-[--spacing(2)] bg-black/90\",\n\timage: 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]]/thumbnail:[--media-spinner-animation:none] group-has-[[role=img][data-loading]]/thumbnail:opacity-100\")\n};\n//#endregion\nexport { thumbnail };\n\n//# sourceMappingURL=thumbnail.js.map"],"mappings":";;AAEA,MAAM,YAAY;CACjB,MAAM;CACN,cAAc;CACd,OAAO,GAAG,oEAAoE,wBAAwB;CACtG,MAAM;CACN,SAAS,GAAG,yEAAyE,4CAA4C,gJAAgJ;AAClR"}
+{"version":3,"file":"thumbnail.js","names":[],"sources":["../../../../../../../../../skins/dist/default/minimal/tailwind/components/thumbnail.js"],"sourcesContent":["import { cn } from \"@videojs/utils/style\";\n//#region src/minimal/tailwind/components/thumbnail.ts\nconst thumbnail = {\n\troot: cn(\"group/thumbnail pointer-events-none bg-black/90 rounded-[--spacing(2)]\", \"after:absolute after:inset-0 after:rounded-[inherit]\", \"after:ring-1 after:ring-black/5 after:shadow-sm after:shadow-black/20\", \"has-data-loading:w-(--thumbnail-max-width) has-data-loading:max-w-full\", \"has-data-loading:aspect-video has-data-loading:overflow-hidden\"),\n\timage: cn(\"relative block max-w-(--thumbnail-max-width) max-h-(--max-height) overflow-clip rounded-[inherit]\", \"transition-opacity duration-150 ease-out data-loading:opacity-0\"),\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]]/thumbnail:[--media-spinner-animation:none] motion-reduce:[--media-spinner-animation:none] group-has-[[role=img][data-loading]]/thumbnail:opacity-100\")\n};\n//#endregion\nexport { thumbnail };\n\n//# sourceMappingURL=thumbnail.js.map"],"mappings":";;AAEA,MAAM,YAAY;CACjB,MAAM,GAAG,0EAA0E,wDAAwD,yEAAyE,0EAA0E,gEAAgE;CAC9V,OAAO,GAAG,qGAAqG,iEAAiE;CAChL,SAAS,GAAG,yEAAyE,4CAA4C,+LAA+L;AACjU"}

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

@@ -2,10 +2,10 @@ import { cn } from "@videojs/utils/style";
 //#region ../skins/dist/default/minimal/tailwind/components/time.js
 const time = {
 	group: "flex items-center gap-1",
-	current: cn("hidden tabular-nums cursor-pointer rounded-[--spacing(1)] outline-2 outline-transparent -outline-offset-2", "transition-[outline-color,outline-offset] duration-100 ease-out", "supports-[corner-shape:squircle]:rounded-[--spacing(4)]", "supports-[corner-shape:squircle]:[corner-shape:squircle]", "focus-visible:outline-current focus-visible:outline-offset-2", "@2xl/media-root:inline"),
+	current: cn("hidden tabular-nums cursor-pointer rounded-[--spacing(1)] outline-2 outline-transparent -outline-offset-2", "transition-[outline-color,outline-offset] duration-100 ease-out", "supports-[corner-shape:squircle]:rounded-[--spacing(4)]", "supports-[corner-shape:squircle]:[corner-shape:squircle]", "focus-visible:outline-(--focus-ring-color) focus-visible:outline-offset-2", "@2xl/media-root:inline"),
 	separator: cn("hidden", "@2xl/media-root:inline @2xl/media-root:text-current/60"),
 	duration: cn("tabular-nums", "@2xl/media-root:text-current/60"),
-	controls: cn("flex flex-row-reverse items-center flex-1 gap-3", "@2xl/media-root:flex-row")
+	controls: cn("@container/media-time-controls flex flex-row-reverse items-center flex-1 gap-3", "@2xl/media-root:flex-row")
 };
 //#endregion
 export { time };

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

@@ -1 +1 @@
-{"version":3,"file":"time.js","names":[],"sources":["../../../../../../../../../skins/dist/default/minimal/tailwind/components/time.js"],"sourcesContent":["import { cn } from \"@videojs/utils/style\";\n//#region src/minimal/tailwind/components/time.ts\nconst time = {\n\tgroup: \"flex items-center gap-1\",\n\tcurrent: cn(\"hidden tabular-nums cursor-pointer rounded-[--spacing(1)] outline-2 outline-transparent -outline-offset-2\", \"transition-[outline-color,outline-offset] duration-100 ease-out\", \"supports-[corner-shape:squircle]:rounded-[--spacing(4)]\", \"supports-[corner-shape:squircle]:[corner-shape:squircle]\", \"focus-visible:outline-current focus-visible:outline-offset-2\", \"@2xl/media-root:inline\"),\n\tseparator: cn(\"hidden\", \"@2xl/media-root:inline @2xl/media-root:text-current/60\"),\n\tduration: cn(\"tabular-nums\", \"@2xl/media-root:text-current/60\"),\n\tcontrols: cn(\"flex flex-row-reverse items-center flex-1 gap-3\", \"@2xl/media-root:flex-row\")\n};\n//#endregion\nexport { time };\n\n//# sourceMappingURL=time.js.map"],"mappings":";;AAEA,MAAM,OAAO;CACZ,OAAO;CACP,SAAS,GAAG,6GAA6G,mEAAmE,2DAA2D,4DAA4D,gEAAgE,wBAAwB;CAC3Y,WAAW,GAAG,UAAU,wDAAwD;CAChF,UAAU,GAAG,gBAAgB,iCAAiC;CAC9D,UAAU,GAAG,mDAAmD,0BAA0B;AAC3F"}
+{"version":3,"file":"time.js","names":[],"sources":["../../../../../../../../../skins/dist/default/minimal/tailwind/components/time.js"],"sourcesContent":["import { cn } from \"@videojs/utils/style\";\n//#region src/minimal/tailwind/components/time.ts\nconst time = {\n\tgroup: \"flex items-center gap-1\",\n\tcurrent: cn(\"hidden tabular-nums cursor-pointer rounded-[--spacing(1)] outline-2 outline-transparent -outline-offset-2\", \"transition-[outline-color,outline-offset] duration-100 ease-out\", \"supports-[corner-shape:squircle]:rounded-[--spacing(4)]\", \"supports-[corner-shape:squircle]:[corner-shape:squircle]\", \"focus-visible:outline-(--focus-ring-color) focus-visible:outline-offset-2\", \"@2xl/media-root:inline\"),\n\tseparator: cn(\"hidden\", \"@2xl/media-root:inline @2xl/media-root:text-current/60\"),\n\tduration: cn(\"tabular-nums\", \"@2xl/media-root:text-current/60\"),\n\tcontrols: cn(\"@container/media-time-controls flex flex-row-reverse items-center flex-1 gap-3\", \"@2xl/media-root:flex-row\")\n};\n//#endregion\nexport { time };\n\n//# sourceMappingURL=time.js.map"],"mappings":";;AAEA,MAAM,OAAO;CACZ,OAAO;CACP,SAAS,GAAG,6GAA6G,mEAAmE,2DAA2D,4DAA4D,6EAA6E,wBAAwB;CACxZ,WAAW,GAAG,UAAU,wDAAwD;CAChF,UAAU,GAAG,gBAAgB,iCAAiC;CAC9D,UAAU,GAAG,kFAAkF,0BAA0B;AAC1H"}

package/dist/dev/skins/dist/default/minimal/tailwind/components/volume-indicator.js

@@ -0,0 +1,19 @@
+import { topIndicatorContent, topIndicatorIcon, topIndicatorRoot } from "./input-indicator.js";
+import { cn } from "@videojs/utils/style";
+//#region ../skins/dist/default/minimal/tailwind/components/volume-indicator.js
+const volumeIndicator = {
+	root: cn(topIndicatorRoot, "data-open:duration-100"),
+	content: cn(topIndicatorContent, "w-[min(80%,--spacing(56))]", "[transform:translateX(0)]", "motion-safe:group-[:is([data-min],[data-max]):not([data-starting-style],[data-ending-style])]/input-indicator:[transform:translateX(0.25px)]", "motion-safe:group-[:is([data-min],[data-max]):not([data-starting-style],[data-ending-style])]/input-indicator:[transition:transform_300ms_linear(0,-24_20%,16_40%,-8_60%,4_80%,1)]"),
+	progress: cn("relative w-full h-0.75 rounded-full bg-current/20", "before:absolute before:inset-y-0 before:left-0 before:w-(--media-volume-fill,0%) before:content-[\"\"]", "before:bg-(--accent-color) before:rounded-[inherit]", "before:transition-[width] before:duration-200 before:ease-linear", "shadow-[0_1px_0_var(--shadow-subtle-current-color)]"),
+	value: "ml-auto",
+	icon: {
+		base: topIndicatorIcon,
+		high: "group-data-[level=high]/input-indicator:block",
+		low: "group-data-[level=low]/input-indicator:block",
+		off: "group-data-[level=off]/input-indicator:block"
+	}
+};
+//#endregion
+export { volumeIndicator };
+
+//# sourceMappingURL=volume-indicator.js.map

package/dist/dev/skins/dist/default/minimal/tailwind/components/volume-indicator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"volume-indicator.js","names":[],"sources":["../../../../../../../../../skins/dist/default/minimal/tailwind/components/volume-indicator.js"],"sourcesContent":["import { topIndicatorContent, topIndicatorIcon, topIndicatorRoot } from \"./input-indicator.js\";\nimport { cn } from \"@videojs/utils/style\";\n//#region src/minimal/tailwind/components/volume-indicator.ts\nconst volumeIndicator = {\n\troot: cn(topIndicatorRoot, \"data-open:duration-100\"),\n\tcontent: cn(topIndicatorContent, \"w-[min(80%,--spacing(56))]\", \"[transform:translateX(0)]\", \"motion-safe:group-[:is([data-min],[data-max]):not([data-starting-style],[data-ending-style])]/input-indicator:[transform:translateX(0.25px)]\", \"motion-safe:group-[:is([data-min],[data-max]):not([data-starting-style],[data-ending-style])]/input-indicator:[transition:transform_300ms_linear(0,-24_20%,16_40%,-8_60%,4_80%,1)]\"),\n\tprogress: cn(\"relative w-full h-0.75 rounded-full bg-current/20\", \"before:absolute before:inset-y-0 before:left-0 before:w-(--media-volume-fill,0%) before:content-[\\\"\\\"]\", \"before:bg-(--accent-color) before:rounded-[inherit]\", \"before:transition-[width] before:duration-200 before:ease-linear\", \"shadow-[0_1px_0_var(--shadow-subtle-current-color)]\"),\n\tvalue: \"ml-auto\",\n\ticon: {\n\t\tbase: topIndicatorIcon,\n\t\thigh: \"group-data-[level=high]/input-indicator:block\",\n\t\tlow: \"group-data-[level=low]/input-indicator:block\",\n\t\toff: \"group-data-[level=off]/input-indicator:block\"\n\t}\n};\n//#endregion\nexport { volumeIndicator };\n\n//# sourceMappingURL=volume-indicator.js.map"],"mappings":";;;AAGA,MAAM,kBAAkB;CACvB,MAAM,GAAG,kBAAkB,wBAAwB;CACnD,SAAS,GAAG,qBAAqB,8BAA8B,6BAA6B,gJAAgJ,oLAAoL;CACha,UAAU,GAAG,qDAAqD,0GAA0G,uDAAuD,oEAAoE,qDAAqD;CAC5V,OAAO;CACP,MAAM;EACL,MAAM;EACN,MAAM;EACN,KAAK;EACL,KAAK;CACN;AACD"}

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

@@ -1,7 +1,7 @@
+import { container as container$1 } from "./components/container.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 { slider as slider$1 } from "./components/slider.js";
 import { iconState } from "../../shared/tailwind/icon-state.js";
 import { badge } from "./components/badge.js";
@@ -14,15 +14,18 @@ import "./components/playback-rate.js";
 import "./components/seek.js";
 import { time as time$1 } from "./components/time.js";
 import { thumbnail as thumbnail$1 } from "./components/thumbnail.js";
-import { inputFeedback } from "./components/input-feedback.js";
+import { inputIndicatorOverlay } from "./components/input-indicator-overlay.js";
 import { overlay } from "./components/overlay.js";
 import { poster } from "./components/poster.js";
+import { seekIndicator } from "./components/seek-indicator.js";
+import { statusIndicator } from "./components/status-indicator.js";
+import { volumeIndicator } from "./components/volume-indicator.js";
 import { cn } from "@videojs/utils/style";
 //#region ../skins/dist/default/minimal/tailwind/video.tailwind.js
-const root = (isShadowDOM) => cn(root$1, "group/skin", "bg-black overflow-clip", "after:absolute after:pointer-events-none after:rounded-[inherit] after:z-10", "[&:fullscreen]:after:hidden", "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,
+const container = (isShadowDOM) => cn(container$1, "group/skin", "bg-black overflow-clip", "after:absolute after:pointer-events-none after:rounded-[inherit] after:z-10", "[&:fullscreen]:after:hidden", "after:inset-0 after:ring-1 after:ring-inset after:ring-(color:--border-color)", {
+	"[&_::slotted(video)]:block [&_::slotted(video)]:w-full [&_::slotted(video)]:h-full [&_::slotted(video)]:rounded-(--container-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-popover-backdrop-filter:blur(16px)_saturate(1.5)]", "[--media-popover-background-color:oklch(0_0_0/0.5)]", "[--media-popover-border-color:oklch(1_0_0/0.1)]", "[--media-tooltip-backdrop-filter:var(--media-popover-backdrop-filter)]", "[--media-tooltip-background-color:var(--media-popover-background-color)]", "[--media-tooltip-border-color:var(--media-popover-border-color)]", "[--media-tooltip-text-color:currentColor]", "min-[1280px]:[&:fullscreen]:[--scale:1.25]", "min-[1536px]:[&:fullscreen]:[--scale:1.5]", "min-[1920px]:[&:fullscreen]:[--scale:1.75]", "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)]", "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:--spacing(-2)]", "[--media-caption-track-delay:25ms]", "[--media-caption-track-duration:var(--media-controls-transition-duration)]", "has-[[data-controls][data-visible]]:[--media-caption-track-y:--spacing(-20)]", "@2xl/media-root:has-[[data-controls][data-visible]]:*:[--media-caption-track-y:--spacing(-12)]", !isShadowDOM ? [
+}, "[--default-accent-color:oklch(1_0_0)]", "[--border-color:light-dark(oklch(0_0_0/0.15),oklch(1_0_0/0.15))]", "[--focus-ring-color:light-dark(oklch(0_0_0),oklch(1_0_0))]", "[--container-border-radius:var(--media-border-radius,0.75rem)]", "[--media-video-border-radius:var(--container-border-radius)]", "[--controls-background-color:transparent]", "[--controls-transition-duration:100ms]", "[--controls-transition-timing-function:ease-out]", "[--error-dialog-transition-duration:150ms]", "[--error-dialog-transition-delay:100ms]", "[--error-dialog-transition-timing-function:ease-out]", "[--popup-transition-duration:100ms]", "[--popup-transition-timing-function:ease-out]", "[--popover-backdrop-filter:blur(16px)_saturate(1.5)]", "[--popover-background-color:oklch(0_0_0/0.5)]", "[--popover-border-color:oklch(1_0_0/0.1)]", "[--tooltip-backdrop-filter:var(--popover-backdrop-filter)]", "[--tooltip-background-color:var(--popover-background-color)]", "[--tooltip-border-color:var(--popover-border-color)]", "[--tooltip-text-color:currentColor]", "min-[1280px]:[&:fullscreen]:[--scale:1.25]", "min-[1536px]:[&:fullscreen]:[--scale:1.5]", "min-[1920px]:[&:fullscreen]:[--scale:1.75]", "motion-reduce:[--error-dialog-transition-duration:50ms]", "motion-reduce:[--error-dialog-transition-delay:0ms]", "motion-reduce:[--popup-transition-duration:0ms]", "[@media(prefers-reduced-transparency:reduce)]:[--controls-background-color:oklch(0_0_0)]", "contrast-more:[--controls-background-color:oklch(0_0_0)]", "[@media(prefers-reduced-transparency:reduce)]:[--tooltip-background-color:oklch(0_0_0)]", "contrast-more:[--tooltip-background-color:oklch(0_0_0)]", "pointer-fine:has-[[data-controls]:not([data-visible])]:[--controls-transition-duration:300ms]", "pointer-coarse:has-[[data-controls]:not([data-visible])]:[--controls-transition-duration:150ms]", "motion-reduce:has-[[data-controls]:not([data-visible])]:[--controls-transition-duration:50ms]", "[--media-caption-track-y:--spacing(-2)]", "[--media-caption-track-delay:25ms]", "[--media-caption-track-duration:var(--controls-transition-duration)]", "has-[[data-controls][data-visible]]:[--media-caption-track-y:--spacing(-18)]", "@2xl/media-root:has-[[data-controls][data-visible]]:*:[--media-caption-track-y:--spacing(-12)]", !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",
@@ -40,11 +43,11 @@ const root = (isShadowDOM) => cn(root$1, "group/skin", "bg-black overflow-clip",
 	"before:opacity-0 before:[filter:blur(var(--media-poster-placeholder-blur,20px))]",
 	"before:transition-opacity before:duration-250",
 	"has-[img[data-visible]:not([data-loaded])]:before:opacity-100"
-] : [], "[&:fullscreen]:[--media-border-radius:0]", {
+] : [], "[&:fullscreen]:[--container-border-radius:0]", {
 	"[&:fullscreen_video]:object-contain": !isShadowDOM,
 	"[&:fullscreen_::slotted(video)]:object-contain": isShadowDOM
 });
-const controls = cn(controls$1, "absolute bottom-1 inset-x-1", "[--base-side-offset:2] [--base-boundary-offset:1]", "gap-x-2 flex-wrap rounded-[--spacing(3)] group/controls", "text-white z-20", "peer-data-open/error:hidden", "ease-(--media-controls-transition-timing-function)", "duration-[calc(var(--media-controls-transition-duration)/2)]", "not-data-visible: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:[--controls-padding:2] @2xl/media-root:[--base-side-offset:0]");
+const controls = cn(controls$1, "absolute bottom-1 inset-x-1", "[--base-side-offset:5] [--base-boundary-offset:1]", "gap-x-2 flex-wrap rounded-[--spacing(3)] group/controls", "text-white z-20", "peer-data-open/error:hidden", "ease-(--controls-transition-timing-function)", "duration-[calc(var(--controls-transition-duration)/2)]", "not-data-visible:duration-(--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:[--controls-padding:2] @2xl/media-root:[--base-side-offset:2]");
 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 spacer = "grow";
@@ -59,15 +62,11 @@ const error = {
 	content: cn(error$1.content, "p-0 py-1.5"),
 	title: "text-(length:--font-size-medium)"
 };
-const thumbnail = {
-	...thumbnail$1,
-	root: cn(thumbnail$1.root, "[--max-width:--spacing(44)]", "[--max-height:--spacing(32)]", "[--padding:--spacing(-2)]", "[--inset:calc(100cqi-100%)]", "absolute [left:clamp(calc(var(--max-width)/2+var(--padding)),var(--media-slider-pointer),calc(100%-var(--max-width)/2-var(--padding)+var(--inset)))] bottom-full -translate-x-1/2", "@2xl/media-root:[left:var(--media-slider-pointer)]", "opacity-0 scale-80 blur-sm origin-bottom", "transition-[scale,opacity,filter] duration-150", "has-[[role=img]:not([data-hidden])]:group-data-pointing/slider:opacity-100", "has-[[role=img]:not([data-hidden])]:group-data-pointing/slider:scale-100", "has-[[role=img]:not([data-hidden])]:group-data-pointing/slider:blur-none"),
-	imageWrapper: cn(thumbnail$1.imageWrapper, "after:absolute after:inset-0 after:rounded-[inherit]", "after:ring-1 after:ring-black/5 after:shadow-sm after:shadow-black/20"),
-	image: cn(thumbnail$1.image, "max-w-(--max-width)", "max-h-(--max-height)")
-};
+const thumbnail = thumbnail$1;
 const slider = {
 	...slider$1,
-	track: cn(slider$1.track, "ring-1 ring-black/5")
+	track: cn(slider$1.track, "ring-1 ring-black/5"),
+	preview: cn(slider$1.preview, "[--preview-end-inset:calc(100cqi-100%)]", "[--preview-left:clamp(calc(var(--max-width)/2),var(--media-slider-pointer),calc(100%-var(--max-width)/2+var(--preview-end-inset)))]", "@2xl/media-root:[--preview-left:var(--media-slider-pointer)]")
 };
 const popup = {
 	...popup$1,
@@ -79,6 +78,6 @@ const menu = {
 	settings: menu$1.settings
 };
 //#endregion
-export { badge, bufferingIndicator, button, buttonGroup, buttonGroupEnd, buttonGroupStart, controls, error, icon, iconFlipped, iconState, inputFeedback, menu, overlay, popup, poster, root, slider, spacer, thumbnail, time };
+export { badge, bufferingIndicator, button, buttonGroup, buttonGroupEnd, buttonGroupStart, container, controls, error, icon, iconFlipped, iconState, inputIndicatorOverlay, menu, overlay, popup, poster, seekIndicator, slider, spacer, statusIndicator, thumbnail, time, volumeIndicator };
 
 //# sourceMappingURL=video.tailwind.js.map

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 { slider as slider$1 } from \"./components/slider.js\";\nimport { iconState } from \"../../shared/tailwind/icon-state.js\";\nimport { badge } from \"./components/badge.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 as menu$1 } from \"./components/menu.js\";\nimport { playbackRate } from \"./components/playback-rate.js\";\nimport { seek } from \"./components/seek.js\";\nimport { time as time$1 } from \"./components/time.js\";\nimport { thumbnail as thumbnail$1 } from \"./components/thumbnail.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, \"group/skin\", \"bg-black overflow-clip\", \"after:absolute after:pointer-events-none after:rounded-[inherit] after:z-10\", \"[&:fullscreen]:after:hidden\", \"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-popover-backdrop-filter:blur(16px)_saturate(1.5)]\", \"[--media-popover-background-color:oklch(0_0_0/0.5)]\", \"[--media-popover-border-color:oklch(1_0_0/0.1)]\", \"[--media-tooltip-backdrop-filter:var(--media-popover-backdrop-filter)]\", \"[--media-tooltip-background-color:var(--media-popover-background-color)]\", \"[--media-tooltip-border-color:var(--media-popover-border-color)]\", \"[--media-tooltip-text-color:currentColor]\", \"min-[1280px]:[&:fullscreen]:[--scale:1.25]\", \"min-[1536px]:[&:fullscreen]:[--scale:1.5]\", \"min-[1920px]:[&:fullscreen]:[--scale:1.75]\", \"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)]\", \"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:--spacing(-2)]\", \"[--media-caption-track-delay:25ms]\", \"[--media-caption-track-duration:var(--media-controls-transition-duration)]\", \"has-[[data-controls][data-visible]]:[--media-caption-track-y:--spacing(-20)]\", \"@2xl/media-root:has-[[data-controls][data-visible]]:*:[--media-caption-track-y:--spacing(-12)]\", !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] : [], !isShadowDOM ? [\n\t\"before:absolute before:inset-0 before:pointer-events-none\",\n\t\"before:[background-image:var(--media-poster-placeholder,none)]\",\n\t\"before:bg-no-repeat\",\n\t\"before:[background-position:var(--media-object-position,center)]\",\n\t\"before:[background-size:var(--media-object-fit,contain)]\",\n\t\"before:opacity-0 before:[filter:blur(var(--media-poster-placeholder-blur,20px))]\",\n\t\"before:transition-opacity before:duration-250\",\n\t\"has-[img[data-visible]:not([data-loaded])]:before:opacity-100\"\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\", \"[--base-side-offset:2] [--base-boundary-offset:1]\", \"gap-x-2 flex-wrap rounded-[--spacing(3)] group/controls\", \"text-white z-20\", \"peer-data-open/error:hidden\", \"ease-(--media-controls-transition-timing-function)\", \"duration-[calc(var(--media-controls-transition-duration)/2)]\", \"not-data-visible: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:[--controls-padding:2] @2xl/media-root:[--base-side-offset:0]\");\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 spacer = \"grow\";\nconst time = {\n\t...time$1,\n\tcontrols: cn(time$1.controls, \"[--slider-height:--spacing(5)] grow-0 shrink-0 basis-full order-[-1] px-1.5\", \"@2xl/media-root:[--slider-height:--spacing(8)] @2xl/media-root:grow @2xl/media-root:shrink @2xl/media-root:basis-0 @2xl/media-root:order-[unset]\", \"@2xl/media-root:[mask-position:100%_0] @2xl/media-root:[mask-size:200%_100%]\", \"@2xl/media-root:[transition:mask-position_50ms_ease-out]\", \"group-has-[[data-volume-level][aria-expanded=true]]/controls:@2xl/media-root:[mask-image:linear-gradient(to_right,transparent_10%,black_25%,black_100%)]\", \"group-has-[[data-volume-level][aria-expanded=true]]/controls:@2xl/media-root:[mask-position:0_0]\")\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 w-full max-w-64 p-4 rounded-none\"),\n\tcontent: cn(error$1.content, \"p-0 py-1.5\"),\n\ttitle: \"text-(length:--font-size-medium)\"\n};\nconst thumbnail = {\n\t...thumbnail$1,\n\troot: cn(thumbnail$1.root, \"[--max-width:--spacing(44)]\", \"[--max-height:--spacing(32)]\", \"[--padding:--spacing(-2)]\", \"[--inset:calc(100cqi-100%)]\", \"absolute [left:clamp(calc(var(--max-width)/2+var(--padding)),var(--media-slider-pointer),calc(100%-var(--max-width)/2-var(--padding)+var(--inset)))] bottom-full -translate-x-1/2\", \"@2xl/media-root:[left:var(--media-slider-pointer)]\", \"opacity-0 scale-80 blur-sm origin-bottom\", \"transition-[scale,opacity,filter] duration-150\", \"has-[[role=img]:not([data-hidden])]:group-data-pointing/slider:opacity-100\", \"has-[[role=img]:not([data-hidden])]:group-data-pointing/slider:scale-100\", \"has-[[role=img]:not([data-hidden])]:group-data-pointing/slider:blur-none\"),\n\timageWrapper: cn(thumbnail$1.imageWrapper, \"after:absolute after:inset-0 after:rounded-[inherit]\", \"after:ring-1 after:ring-black/5 after:shadow-sm after:shadow-black/20\"),\n\timage: cn(thumbnail$1.image, \"max-w-(--max-width)\", \"max-h-(--max-height)\")\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, \"p-0 bg-transparent\")\n};\nconst menu = {\n\t...menu$1,\n\troot: menu$1.root,\n\tsettings: menu$1.settings\n};\n//#endregion\nexport { badge, bufferingIndicator, button, buttonGroup, buttonGroupEnd, buttonGroupStart, controls, error, icon, iconContainer, iconFlipped, iconHidden, iconState, inputFeedback, menu, overlay, playbackRate, popup, poster, root, seek, slider, spacer, thumbnail, time };\n\n//# sourceMappingURL=video.tailwind.js.map"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAqBA,MAAM,QAAQ,gBAAgB,GAAG,QAAQ,cAAc,0BAA0B,+EAA+E,+BAA+B,4FAA4F;CAC1R,4RAA4R;CAC5R,wMAAwM,CAAC;AAC1M,GAAG,oEAAoE,mDAAmD,gDAAgD,0DAA0D,oDAAoD,iDAAiD,8DAA8D,6CAA6C,uDAAuD,8DAA8D,uDAAuD,mDAAmD,0EAA0E,4EAA4E,oEAAoE,6CAA6C,8CAA8C,6CAA6C,8CAA8C,iEAAiE,6DAA6D,yDAAyD,kGAAkG,kEAAkE,iGAAiG,iEAAiE,uGAAuG,yGAAyG,uGAAuG,2CAA2C,sCAAsC,8EAA8E,gFAAgF,kGAAkG,CAAC,cAAc;CACtrE;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACD,IAAI,CAAC,GAAG,CAAC,cAAc;CACtB;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACD,IAAI,CAAC,GAAG,4CAA4C;CACnD,uCAAuC,CAAC;CACxC,kDAAkD;AACnD,CAAC;AACD,MAAM,WAAW,GAAG,YAAY,+BAA+B,qDAAqD,2DAA2D,mBAAmB,+BAA+B,sDAAsD,gEAAgE,oEAAoE,uDAAuD,sDAAsD,kDAAkD,iDAAiD,mEAAmE,iDAAiD,qDAAqD,2GAA2G;AAC/3B,MAAM,mBAAmB,GAAG,aAAa,kCAAkC;AAC3E,MAAM,iBAAiB,GAAG,aAAa,8CAA8C;AACrF,MAAM,SAAS;AACf,MAAM,OAAO;CACZ,GAAG;CACH,UAAU,GAAG,OAAO,UAAU,+EAA+E,oJAAoJ,gFAAgF,4DAA4D,4JAA4J,kGAAkG;AAC5oB;AACA,MAAM,QAAQ;CACb,GAAG;CACH,MAAM,GAAG,QAAQ,MAAM,kCAAkC;CACzD,QAAQ,GAAG,QAAQ,QAAQ,sDAAsD;CACjF,SAAS,GAAG,QAAQ,SAAS,YAAY;CACzC,OAAO;AACR;AACA,MAAM,YAAY;CACjB,GAAG;CACH,MAAM,GAAG,YAAY,MAAM,+BAA+B,gCAAgC,6BAA6B,+BAA+B,qLAAqL,sDAAsD,4CAA4C,kDAAkD,8EAA8E,4EAA4E,0EAA0E;CACnsB,cAAc,GAAG,YAAY,cAAc,wDAAwD,uEAAuE;CAC1K,OAAO,GAAG,YAAY,OAAO,uBAAuB,sBAAsB;AAC3E;AACA,MAAM,SAAS;CACd,GAAG;CACH,OAAO,GAAG,SAAS,OAAO,qBAAqB;AAChD;AACA,MAAM,QAAQ;CACb,GAAG;CACH,QAAQ,GAAG,QAAQ,SAAS,oBAAoB;AACjD;AACA,MAAM,OAAO;CACZ,GAAG;CACH,MAAM,OAAO;CACb,UAAU,OAAO;AAClB"}
+{"version":3,"file":"video.tailwind.js","names":[],"sources":["../../../../../../../../skins/dist/default/minimal/tailwind/video.tailwind.js"],"sourcesContent":["import { container as container$1 } from \"./components/container.js\";\nimport { 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 { slider as slider$1 } from \"./components/slider.js\";\nimport { iconState } from \"../../shared/tailwind/icon-state.js\";\nimport { badge } from \"./components/badge.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 as menu$1 } from \"./components/menu.js\";\nimport { playbackRate } from \"./components/playback-rate.js\";\nimport { seek } from \"./components/seek.js\";\nimport { time as time$1 } from \"./components/time.js\";\nimport { thumbnail as thumbnail$1 } from \"./components/thumbnail.js\";\nimport { inputIndicatorOverlay } from \"./components/input-indicator-overlay.js\";\nimport { overlay } from \"./components/overlay.js\";\nimport { poster } from \"./components/poster.js\";\nimport { seekIndicator } from \"./components/seek-indicator.js\";\nimport { statusIndicator } from \"./components/status-indicator.js\";\nimport { volumeIndicator } from \"./components/volume-indicator.js\";\nimport { cn } from \"@videojs/utils/style\";\n//#region src/minimal/tailwind/video.tailwind.ts\nconst container = (isShadowDOM) => cn(container$1, \"group/skin\", \"bg-black overflow-clip\", \"after:absolute after:pointer-events-none after:rounded-[inherit] after:z-10\", \"[&:fullscreen]:after:hidden\", \"after:inset-0 after:ring-1 after:ring-inset after:ring-(color:--border-color)\", {\n\t\"[&_::slotted(video)]:block [&_::slotted(video)]:w-full [&_::slotted(video)]:h-full [&_::slotted(video)]:rounded-(--container-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}, \"[--default-accent-color:oklch(1_0_0)]\", \"[--border-color:light-dark(oklch(0_0_0/0.15),oklch(1_0_0/0.15))]\", \"[--focus-ring-color:light-dark(oklch(0_0_0),oklch(1_0_0))]\", \"[--container-border-radius:var(--media-border-radius,0.75rem)]\", \"[--media-video-border-radius:var(--container-border-radius)]\", \"[--controls-background-color:transparent]\", \"[--controls-transition-duration:100ms]\", \"[--controls-transition-timing-function:ease-out]\", \"[--error-dialog-transition-duration:150ms]\", \"[--error-dialog-transition-delay:100ms]\", \"[--error-dialog-transition-timing-function:ease-out]\", \"[--popup-transition-duration:100ms]\", \"[--popup-transition-timing-function:ease-out]\", \"[--popover-backdrop-filter:blur(16px)_saturate(1.5)]\", \"[--popover-background-color:oklch(0_0_0/0.5)]\", \"[--popover-border-color:oklch(1_0_0/0.1)]\", \"[--tooltip-backdrop-filter:var(--popover-backdrop-filter)]\", \"[--tooltip-background-color:var(--popover-background-color)]\", \"[--tooltip-border-color:var(--popover-border-color)]\", \"[--tooltip-text-color:currentColor]\", \"min-[1280px]:[&:fullscreen]:[--scale:1.25]\", \"min-[1536px]:[&:fullscreen]:[--scale:1.5]\", \"min-[1920px]:[&:fullscreen]:[--scale:1.75]\", \"motion-reduce:[--error-dialog-transition-duration:50ms]\", \"motion-reduce:[--error-dialog-transition-delay:0ms]\", \"motion-reduce:[--popup-transition-duration:0ms]\", \"[@media(prefers-reduced-transparency:reduce)]:[--controls-background-color:oklch(0_0_0)]\", \"contrast-more:[--controls-background-color:oklch(0_0_0)]\", \"[@media(prefers-reduced-transparency:reduce)]:[--tooltip-background-color:oklch(0_0_0)]\", \"contrast-more:[--tooltip-background-color:oklch(0_0_0)]\", \"pointer-fine:has-[[data-controls]:not([data-visible])]:[--controls-transition-duration:300ms]\", \"pointer-coarse:has-[[data-controls]:not([data-visible])]:[--controls-transition-duration:150ms]\", \"motion-reduce:has-[[data-controls]:not([data-visible])]:[--controls-transition-duration:50ms]\", \"[--media-caption-track-y:--spacing(-2)]\", \"[--media-caption-track-delay:25ms]\", \"[--media-caption-track-duration:var(--controls-transition-duration)]\", \"has-[[data-controls][data-visible]]:[--media-caption-track-y:--spacing(-18)]\", \"@2xl/media-root:has-[[data-controls][data-visible]]:*:[--media-caption-track-y:--spacing(-12)]\", !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] : [], !isShadowDOM ? [\n\t\"before:absolute before:inset-0 before:pointer-events-none\",\n\t\"before:[background-image:var(--media-poster-placeholder,none)]\",\n\t\"before:bg-no-repeat\",\n\t\"before:[background-position:var(--media-object-position,center)]\",\n\t\"before:[background-size:var(--media-object-fit,contain)]\",\n\t\"before:opacity-0 before:[filter:blur(var(--media-poster-placeholder-blur,20px))]\",\n\t\"before:transition-opacity before:duration-250\",\n\t\"has-[img[data-visible]:not([data-loaded])]:before:opacity-100\"\n] : [], \"[&:fullscreen]:[--container-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\", \"[--base-side-offset:5] [--base-boundary-offset:1]\", \"gap-x-2 flex-wrap rounded-[--spacing(3)] group/controls\", \"text-white z-20\", \"peer-data-open/error:hidden\", \"ease-(--controls-transition-timing-function)\", \"duration-[calc(var(--controls-transition-duration)/2)]\", \"not-data-visible:duration-(--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:[--controls-padding:2] @2xl/media-root:[--base-side-offset: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 spacer = \"grow\";\nconst time = {\n\t...time$1,\n\tcontrols: cn(time$1.controls, \"[--slider-height:--spacing(5)] grow-0 shrink-0 basis-full order-[-1] px-1.5\", \"@2xl/media-root:[--slider-height:--spacing(8)] @2xl/media-root:grow @2xl/media-root:shrink @2xl/media-root:basis-0 @2xl/media-root:order-[unset]\", \"@2xl/media-root:[mask-position:100%_0] @2xl/media-root:[mask-size:200%_100%]\", \"@2xl/media-root:[transition:mask-position_50ms_ease-out]\", \"group-has-[[data-volume-level][aria-expanded=true]]/controls:@2xl/media-root:[mask-image:linear-gradient(to_right,transparent_10%,black_25%,black_100%)]\", \"group-has-[[data-volume-level][aria-expanded=true]]/controls:@2xl/media-root:[mask-position:0_0]\")\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 w-full max-w-64 p-4 rounded-none\"),\n\tcontent: cn(error$1.content, \"p-0 py-1.5\"),\n\ttitle: \"text-(length:--font-size-medium)\"\n};\nconst thumbnail = thumbnail$1;\nconst slider = {\n\t...slider$1,\n\ttrack: cn(slider$1.track, \"ring-1 ring-black/5\"),\n\tpreview: cn(slider$1.preview, \"[--preview-end-inset:calc(100cqi-100%)]\", \"[--preview-left:clamp(calc(var(--max-width)/2),var(--media-slider-pointer),calc(100%-var(--max-width)/2+var(--preview-end-inset)))]\", \"@2xl/media-root:[--preview-left:var(--media-slider-pointer)]\")\n};\nconst popup = {\n\t...popup$1,\n\tvolume: cn(popup$1.popover, \"p-0 bg-transparent\")\n};\nconst menu = {\n\t...menu$1,\n\troot: menu$1.root,\n\tsettings: menu$1.settings\n};\n//#endregion\nexport { badge, bufferingIndicator, button, buttonGroup, buttonGroupEnd, buttonGroupStart, container, controls, error, icon, iconContainer, iconFlipped, iconHidden, iconState, inputIndicatorOverlay, menu, overlay, playbackRate, popup, poster, seek, seekIndicator, slider, spacer, statusIndicator, thumbnail, time, volumeIndicator };\n\n//# sourceMappingURL=video.tailwind.js.map"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAwBA,MAAM,aAAa,gBAAgB,GAAG,aAAa,cAAc,0BAA0B,+EAA+E,+BAA+B,iFAAiF;CACzR,0RAA0R;CAC1R,wMAAwM,CAAC;AAC1M,GAAG,yCAAyC,oEAAoE,8DAA8D,kEAAkE,gEAAgE,6CAA6C,0CAA0C,oDAAoD,8CAA8C,2CAA2C,wDAAwD,uCAAuC,iDAAiD,wDAAwD,iDAAiD,6CAA6C,8DAA8D,gEAAgE,wDAAwD,uCAAuC,8CAA8C,6CAA6C,8CAA8C,2DAA2D,uDAAuD,mDAAmD,4FAA4F,4DAA4D,2FAA2F,2DAA2D,iGAAiG,mGAAmG,iGAAiG,2CAA2C,sCAAsC,wEAAwE,gFAAgF,kGAAkG,CAAC,cAAc;CACjvE;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACD,IAAI,CAAC,GAAG,CAAC,cAAc;CACtB;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACD,IAAI,CAAC,GAAG,gDAAgD;CACvD,uCAAuC,CAAC;CACxC,kDAAkD;AACnD,CAAC;AACD,MAAM,WAAW,GAAG,YAAY,+BAA+B,qDAAqD,2DAA2D,mBAAmB,+BAA+B,gDAAgD,0DAA0D,8DAA8D,uDAAuD,sDAAsD,kDAAkD,iDAAiD,mEAAmE,iDAAiD,qDAAqD,2GAA2G;AAC72B,MAAM,mBAAmB,GAAG,aAAa,kCAAkC;AAC3E,MAAM,iBAAiB,GAAG,aAAa,8CAA8C;AACrF,MAAM,SAAS;AACf,MAAM,OAAO;CACZ,GAAG;CACH,UAAU,GAAG,OAAO,UAAU,+EAA+E,oJAAoJ,gFAAgF,4DAA4D,4JAA4J,kGAAkG;AAC5oB;AACA,MAAM,QAAQ;CACb,GAAG;CACH,MAAM,GAAG,QAAQ,MAAM,kCAAkC;CACzD,QAAQ,GAAG,QAAQ,QAAQ,sDAAsD;CACjF,SAAS,GAAG,QAAQ,SAAS,YAAY;CACzC,OAAO;AACR;AACA,MAAM,YAAY;AAClB,MAAM,SAAS;CACd,GAAG;CACH,OAAO,GAAG,SAAS,OAAO,qBAAqB;CAC/C,SAAS,GAAG,SAAS,SAAS,2CAA2C,uIAAuI,8DAA8D;AAC/Q;AACA,MAAM,QAAQ;CACb,GAAG;CACH,QAAQ,GAAG,QAAQ,SAAS,oBAAoB;AACjD;AACA,MAAM,OAAO;CACZ,GAAG;CACH,MAAM,OAAO;CACb,UAAU,OAAO;AAClB"}

package/dist/dev/skins/dist/default/shared/tailwind/icon-state.js

@@ -2,50 +2,52 @@
 const iconState = {
 	play: {
 		button: "group",
-		restart: "hidden opacity-0 group-data-ended:block group-data-ended:opacity-100",
+		restart: "opacity-0 scale-0 group-data-ended:opacity-100 group-data-ended:scale-100",
 		play: [
-			"hidden opacity-0",
-			"group-not-data-ended:group-data-paused:block",
+			"opacity-0 scale-0",
 			"group-not-data-ended:group-data-paused:opacity-100",
-			"group-not-data-ended:group-not-data-started:block",
-			"group-not-data-ended:group-not-data-started:opacity-100"
+			"group-not-data-ended:group-data-paused:scale-100",
+			"group-not-data-ended:group-not-data-started:opacity-100",
+			"group-not-data-ended:group-not-data-started:scale-100"
 		].join(" "),
-		pause: "hidden opacity-0 group-data-started:group-not-data-paused:group-not-data-ended:block group-data-started:group-not-data-paused:group-not-data-ended:opacity-100"
+		pause: "opacity-0 scale-0 group-data-started:group-not-data-paused:group-not-data-ended:opacity-100 group-data-started:group-not-data-paused:group-not-data-ended:scale-100"
 	},
 	mute: {
 		button: "group",
-		volumeOff: "hidden opacity-0 group-data-muted:block group-data-muted:opacity-100",
-		volumeLow: "hidden opacity-0 group-not-data-muted:group-data-[volume-level=low]:block group-not-data-muted:group-data-[volume-level=low]:opacity-100",
-		volumeHigh: "hidden opacity-0 group-not-data-muted:group-not-data-[volume-level=low]:block group-not-data-muted:group-not-data-[volume-level=low]:opacity-100"
+		volumeOff: "opacity-0 group-data-muted:opacity-100 group-data-muted:scale-100",
+		volumeLow: "opacity-0 group-not-data-muted:group-data-[volume-level=low]:opacity-100 group-not-data-muted:group-data-[volume-level=low]:scale-100",
+		volumeHigh: "opacity-0 group-not-data-muted:group-not-data-[volume-level=low]:opacity-100 group-not-data-muted:group-not-data-[volume-level=low]:scale-100"
 	},
 	fullscreen: {
 		button: "group",
-		enter: "hidden opacity-0 group-not-data-fullscreen:block group-not-data-fullscreen:opacity-100",
-		exit: "hidden opacity-0 group-data-fullscreen:block group-data-fullscreen:opacity-100"
+		enter: "opacity-0 group-not-data-fullscreen:opacity-100 group-not-data-fullscreen:scale-100",
+		exit: "opacity-0 group-data-fullscreen:opacity-100 group-data-fullscreen:scale-100"
 	},
 	captions: {
 		button: "group",
-		off: "hidden opacity-0 group-not-data-active:block group-not-data-active:opacity-100",
-		on: "hidden opacity-0 group-data-active:block group-data-active:opacity-100"
+		off: "opacity-0 group-not-data-active:opacity-100 group-not-data-active:scale-100",
+		on: "opacity-0 group-data-active:opacity-100 group-data-active:scale-100"
 	},
 	pip: {
 		button: "group",
-		off: "hidden opacity-0 group-not-data-pip:block group-not-data-pip:opacity-100",
-		on: "hidden opacity-0 group-data-pip:block group-data-pip:opacity-100"
+		off: "opacity-0 group-not-data-pip:opacity-100 group-not-data-pip:scale-100",
+		on: "opacity-0 group-data-pip:opacity-100 group-data-pip:scale-100"
 	},
 	cast: {
 		button: "group",
-		enter: "hidden opacity-0 group-not-data-[cast-state=connected]:block group-not-data-[cast-state=connected]:opacity-100",
-		exit: "hidden opacity-0 group-data-[cast-state=connected]:block group-data-[cast-state=connected]:opacity-100"
+		enter: "opacity-0 group-not-data-[cast-state=connected]:opacity-100 group-not-data-[cast-state=connected]:scale-100",
+		exit: "opacity-0 group-data-[cast-state=connected]:opacity-100 group-data-[cast-state=connected]:scale-100"
 	},
 	airplay: {
 		button: [
 			"group",
 			"not-data-[airplay-state=connected]:[--media-icon--airplay__fill-animation:none]",
-			"not-data-[airplay-state=connected]:[--media-icon--airplay__triangle-animation:none]"
+			"not-data-[airplay-state=connected]:[--media-icon--airplay__triangle-animation:none]",
+			"motion-reduce:[--media-icon--airplay__fill-animation:none]",
+			"motion-reduce:[--media-icon--airplay__triangle-animation:none]"
 		].join(" "),
-		enter: "hidden opacity-0 group-not-data-[airplay-state=connected]:block group-not-data-[airplay-state=connected]:opacity-100",
-		exit: "hidden opacity-0 group-data-[airplay-state=connected]:block group-data-[airplay-state=connected]:opacity-100"
+		enter: "opacity-0 group-not-data-[airplay-state=connected]:opacity-100 group-not-data-[airplay-state=connected]:scale-100",
+		exit: "opacity-0 group-data-[airplay-state=connected]:opacity-100 group-data-[airplay-state=connected]:scale-100"
 	}
 };
 //#endregion

package/dist/dev/skins/dist/default/shared/tailwind/icon-state.js.map

@@ -1 +1 @@
-{"version":3,"file":"icon-state.js","names":[],"sources":["../../../../../../../../skins/dist/default/shared/tailwind/icon-state.js"],"sourcesContent":["//#region src/shared/tailwind/icon-state.ts\nconst iconState = {\n\tplay: {\n\t\tbutton: \"group\",\n\t\trestart: \"hidden opacity-0 group-data-ended:block group-data-ended:opacity-100\",\n\t\tplay: [\n\t\t\t\"hidden opacity-0\",\n\t\t\t\"group-not-data-ended:group-data-paused:block\",\n\t\t\t\"group-not-data-ended:group-data-paused:opacity-100\",\n\t\t\t\"group-not-data-ended:group-not-data-started:block\",\n\t\t\t\"group-not-data-ended:group-not-data-started:opacity-100\"\n\t\t].join(\" \"),\n\t\tpause: \"hidden opacity-0 group-data-started:group-not-data-paused:group-not-data-ended:block group-data-started:group-not-data-paused:group-not-data-ended:opacity-100\"\n\t},\n\tmute: {\n\t\tbutton: \"group\",\n\t\tvolumeOff: \"hidden opacity-0 group-data-muted:block group-data-muted:opacity-100\",\n\t\tvolumeLow: \"hidden opacity-0 group-not-data-muted:group-data-[volume-level=low]:block group-not-data-muted:group-data-[volume-level=low]:opacity-100\",\n\t\tvolumeHigh: \"hidden opacity-0 group-not-data-muted:group-not-data-[volume-level=low]:block group-not-data-muted:group-not-data-[volume-level=low]:opacity-100\"\n\t},\n\tfullscreen: {\n\t\tbutton: \"group\",\n\t\tenter: \"hidden opacity-0 group-not-data-fullscreen:block group-not-data-fullscreen:opacity-100\",\n\t\texit: \"hidden opacity-0 group-data-fullscreen:block group-data-fullscreen:opacity-100\"\n\t},\n\tcaptions: {\n\t\tbutton: \"group\",\n\t\toff: \"hidden opacity-0 group-not-data-active:block group-not-data-active:opacity-100\",\n\t\ton: \"hidden opacity-0 group-data-active:block group-data-active:opacity-100\"\n\t},\n\tpip: {\n\t\tbutton: \"group\",\n\t\toff: \"hidden opacity-0 group-not-data-pip:block group-not-data-pip:opacity-100\",\n\t\ton: \"hidden opacity-0 group-data-pip:block group-data-pip:opacity-100\"\n\t},\n\tcast: {\n\t\tbutton: \"group\",\n\t\tenter: \"hidden opacity-0 group-not-data-[cast-state=connected]:block group-not-data-[cast-state=connected]:opacity-100\",\n\t\texit: \"hidden opacity-0 group-data-[cast-state=connected]:block group-data-[cast-state=connected]:opacity-100\"\n\t},\n\tairplay: {\n\t\tbutton: [\n\t\t\t\"group\",\n\t\t\t\"not-data-[airplay-state=connected]:[--media-icon--airplay__fill-animation:none]\",\n\t\t\t\"not-data-[airplay-state=connected]:[--media-icon--airplay__triangle-animation:none]\"\n\t\t].join(\" \"),\n\t\tenter: \"hidden opacity-0 group-not-data-[airplay-state=connected]:block group-not-data-[airplay-state=connected]:opacity-100\",\n\t\texit: \"hidden opacity-0 group-data-[airplay-state=connected]:block group-data-[airplay-state=connected]:opacity-100\"\n\t}\n};\n//#endregion\nexport { iconState };\n\n//# sourceMappingURL=icon-state.js.map"],"mappings":";AACA,MAAM,YAAY;CACjB,MAAM;EACL,QAAQ;EACR,SAAS;EACT,MAAM;GACL;GACA;GACA;GACA;GACA;EACD,CAAC,CAAC,KAAK,GAAG;EACV,OAAO;CACR;CACA,MAAM;EACL,QAAQ;EACR,WAAW;EACX,WAAW;EACX,YAAY;CACb;CACA,YAAY;EACX,QAAQ;EACR,OAAO;EACP,MAAM;CACP;CACA,UAAU;EACT,QAAQ;EACR,KAAK;EACL,IAAI;CACL;CACA,KAAK;EACJ,QAAQ;EACR,KAAK;EACL,IAAI;CACL;CACA,MAAM;EACL,QAAQ;EACR,OAAO;EACP,MAAM;CACP;CACA,SAAS;EACR,QAAQ;GACP;GACA;GACA;EACD,CAAC,CAAC,KAAK,GAAG;EACV,OAAO;EACP,MAAM;CACP;AACD"}
+{"version":3,"file":"icon-state.js","names":[],"sources":["../../../../../../../../skins/dist/default/shared/tailwind/icon-state.js"],"sourcesContent":["//#region src/shared/tailwind/icon-state.ts\nconst iconState = {\n\tplay: {\n\t\tbutton: \"group\",\n\t\trestart: \"opacity-0 scale-0 group-data-ended:opacity-100 group-data-ended:scale-100\",\n\t\tplay: [\n\t\t\t\"opacity-0 scale-0\",\n\t\t\t\"group-not-data-ended:group-data-paused:opacity-100\",\n\t\t\t\"group-not-data-ended:group-data-paused:scale-100\",\n\t\t\t\"group-not-data-ended:group-not-data-started:opacity-100\",\n\t\t\t\"group-not-data-ended:group-not-data-started:scale-100\"\n\t\t].join(\" \"),\n\t\tpause: \"opacity-0 scale-0 group-data-started:group-not-data-paused:group-not-data-ended:opacity-100 group-data-started:group-not-data-paused:group-not-data-ended:scale-100\"\n\t},\n\tmute: {\n\t\tbutton: \"group\",\n\t\tvolumeOff: \"opacity-0 group-data-muted:opacity-100 group-data-muted:scale-100\",\n\t\tvolumeLow: \"opacity-0 group-not-data-muted:group-data-[volume-level=low]:opacity-100 group-not-data-muted:group-data-[volume-level=low]:scale-100\",\n\t\tvolumeHigh: \"opacity-0 group-not-data-muted:group-not-data-[volume-level=low]:opacity-100 group-not-data-muted:group-not-data-[volume-level=low]:scale-100\"\n\t},\n\tfullscreen: {\n\t\tbutton: \"group\",\n\t\tenter: \"opacity-0 group-not-data-fullscreen:opacity-100 group-not-data-fullscreen:scale-100\",\n\t\texit: \"opacity-0 group-data-fullscreen:opacity-100 group-data-fullscreen:scale-100\"\n\t},\n\tcaptions: {\n\t\tbutton: \"group\",\n\t\toff: \"opacity-0 group-not-data-active:opacity-100 group-not-data-active:scale-100\",\n\t\ton: \"opacity-0 group-data-active:opacity-100 group-data-active:scale-100\"\n\t},\n\tpip: {\n\t\tbutton: \"group\",\n\t\toff: \"opacity-0 group-not-data-pip:opacity-100 group-not-data-pip:scale-100\",\n\t\ton: \"opacity-0 group-data-pip:opacity-100 group-data-pip:scale-100\"\n\t},\n\tcast: {\n\t\tbutton: \"group\",\n\t\tenter: \"opacity-0 group-not-data-[cast-state=connected]:opacity-100 group-not-data-[cast-state=connected]:scale-100\",\n\t\texit: \"opacity-0 group-data-[cast-state=connected]:opacity-100 group-data-[cast-state=connected]:scale-100\"\n\t},\n\tairplay: {\n\t\tbutton: [\n\t\t\t\"group\",\n\t\t\t\"not-data-[airplay-state=connected]:[--media-icon--airplay__fill-animation:none]\",\n\t\t\t\"not-data-[airplay-state=connected]:[--media-icon--airplay__triangle-animation:none]\",\n\t\t\t\"motion-reduce:[--media-icon--airplay__fill-animation:none]\",\n\t\t\t\"motion-reduce:[--media-icon--airplay__triangle-animation:none]\"\n\t\t].join(\" \"),\n\t\tenter: \"opacity-0 group-not-data-[airplay-state=connected]:opacity-100 group-not-data-[airplay-state=connected]:scale-100\",\n\t\texit: \"opacity-0 group-data-[airplay-state=connected]:opacity-100 group-data-[airplay-state=connected]:scale-100\"\n\t}\n};\n//#endregion\nexport { iconState };\n\n//# sourceMappingURL=icon-state.js.map"],"mappings":";AACA,MAAM,YAAY;CACjB,MAAM;EACL,QAAQ;EACR,SAAS;EACT,MAAM;GACL;GACA;GACA;GACA;GACA;EACD,CAAC,CAAC,KAAK,GAAG;EACV,OAAO;CACR;CACA,MAAM;EACL,QAAQ;EACR,WAAW;EACX,WAAW;EACX,YAAY;CACb;CACA,YAAY;EACX,QAAQ;EACR,OAAO;EACP,MAAM;CACP;CACA,UAAU;EACT,QAAQ;EACR,KAAK;EACL,IAAI;CACL;CACA,KAAK;EACJ,QAAQ;EACR,KAAK;EACL,IAAI;CACL;CACA,MAAM;EACL,QAAQ;EACR,OAAO;EACP,MAAM;CACP;CACA,SAAS;EACR,QAAQ;GACP;GACA;GACA;GACA;GACA;EACD,CAAC,CAAC,KAAK,GAAG;EACV,OAAO;EACP,MAAM;CACP;AACD"}

package/dist/dev/ui/audio-track/use-audio-track-options.d.ts

@@ -1,16 +1,16 @@
-import { AudioTrackRadioGroupCore } from "@videojs/core";
+import { TranslatedRadioOption } from "../hooks/create-radio-options-hook.js";
+import { AudioTrackRadioGroupCore, AudioTrackRadioGroupOption } from "@videojs/core";
 //#region src/ui/audio-track/use-audio-track-options.d.ts
 interface AudioTrackOptionsProps extends AudioTrackRadioGroupCore.Props {}
-interface AudioTrackOption {
-  value: string;
-  label: string;
-  disabled: boolean;
-}
+type AudioTrackOption = TranslatedRadioOption<AudioTrackRadioGroupOption>;
 interface AudioTrackOptionsResult {
   state: AudioTrackRadioGroupCore.State;
+  label: string;
   value: string;
+  selectedLabel: string;
   options: AudioTrackOption[];
   disabled: boolean;
+  hidden: boolean;
   setValue: (value: string) => void;
 }
 /**

package/dist/dev/ui/audio-track/use-audio-track-options.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-audio-track-options.d.ts","names":[],"sources":["../../../../src/ui/audio-track/use-audio-track-options.ts"],"mappings":";;UAUiB,+BAA+B,yBAAyB;UAExD;EACf;EACA;EACA;;UAGe;EACf,OAAO,yBAAyB;EAChC;EACA,SAAS;EACT;EACA,WAAW;;;;;;;;iBASG,qBAAqB,QAAQ,yBAAyB;kBAgCrD;OACH,QAAQ;OACR,SAAS;OACT,SAAS"}
+{"version":3,"file":"use-audio-track-options.d.ts","names":[],"sources":["../../../../src/ui/audio-track/use-audio-track-options.ts"],"mappings":";;;UAOiB,+BAA+B,yBAAyB;KAE7D,mBAAmB,sBAAsB;UAEpC;EACf,OAAO,yBAAyB;EAChC;EACA;EACA;EACA,SAAS;EACT;EACA;EACA,WAAW;;;;;;;;iBAgBG,qBAAqB,QAAQ,yBAAyB;kBAMrD;OACH,QAAQ;OACR,SAAS;OACT,SAAS"}

package/dist/dev/ui/audio-track/use-audio-track-options.js

@@ -1,11 +1,14 @@
 "use client";
-import { useTranslator } from "../../i18n/context.js";
-import { usePlayer } from "../../player/context.js";
-import { logMissingFeature, selectAudioTrack } from "@videojs/core/dom";
-import { translateText } from "@videojs/core/i18n";
-import { useCallback, useState } from "react";
+import { createRadioOptionsHook } from "../hooks/create-radio-options-hook.js";
+import { selectAudioTrack } from "@videojs/core/dom";
 import { AudioTrackRadioGroupCore } from "@videojs/core";
 //#region src/ui/audio-track/use-audio-track-options.ts
+const useAudioTrackRadioOptions = createRadioOptionsHook({
+	name: "useAudioTrackOptions",
+	feature: "audioTrack",
+	selector: selectAudioTrack,
+	createCore: () => new AudioTrackRadioGroupCore()
+});
 /**
 * Create audio track menu options from the player audio track state. Returns
 * `null` when the audio track feature is not configured.
@@ -14,28 +17,7 @@ import { AudioTrackRadioGroupCore } from "@videojs/core";
 */
 function useAudioTrackOptions(props) {
 	"use no memo";
-	const media = usePlayer(selectAudioTrack);
-	const t = useTranslator();
-	const [core] = useState(() => new AudioTrackRadioGroupCore());
-	core.setProps(props ?? {});
-	const setValue = useCallback((value) => core.selectValue(media, value), [core, media]);
-	if (!media) {
-		logMissingFeature("useAudioTrackOptions", selectAudioTrack.displayName ?? "audioTrack");
-		return null;
-	}
-	core.setMedia(media);
-	const state = core.getState();
-	return {
-		state,
-		value: state.value,
-		options: state.tracks.map((track) => ({
-			value: track.value,
-			label: translateText(track.label, t),
-			disabled: state.disabled
-		})),
-		disabled: state.disabled,
-		setValue
-	};
+	return useAudioTrackRadioOptions(props);
 }
 //#endregion
 export { useAudioTrackOptions };

package/dist/dev/ui/audio-track/use-audio-track-options.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-audio-track-options.js","names":[],"sources":["../../../../src/ui/audio-track/use-audio-track-options.ts"],"sourcesContent":["'use client';\n\nimport { AudioTrackRadioGroupCore } from '@videojs/core';\nimport { logMissingFeature, selectAudioTrack } from '@videojs/core/dom';\nimport { translateText } from '@videojs/core/i18n';\nimport { useCallback, useState } from 'react';\n\nimport { useTranslator } from '../../i18n/context';\nimport { usePlayer } from '../../player/context';\n\nexport interface AudioTrackOptionsProps extends AudioTrackRadioGroupCore.Props {}\n\nexport interface AudioTrackOption {\n  value: string;\n  label: string;\n  disabled: boolean;\n}\n\nexport interface AudioTrackOptionsResult {\n  state: AudioTrackRadioGroupCore.State;\n  value: string;\n  options: AudioTrackOption[];\n  disabled: boolean;\n  setValue: (value: string) => void;\n}\n\n/**\n * Create audio track menu options from the player audio track state. Returns\n * `null` when the audio track feature is not configured.\n *\n * @param props - Optional `label`, `formatTrack`, and `disabled` overrides.\n */\nexport function useAudioTrackOptions(props?: AudioTrackOptionsProps): AudioTrackOptionsResult | null {\n  'use no memo';\n\n  const media = usePlayer(selectAudioTrack);\n  const t = useTranslator();\n  const [core] = useState(() => new AudioTrackRadioGroupCore());\n\n  core.setProps(props ?? {});\n\n  const setValue = useCallback((value: string) => core.selectValue(media!, value), [core, media]);\n\n  if (!media) {\n    if (__DEV__) logMissingFeature('useAudioTrackOptions', selectAudioTrack.displayName ?? 'audioTrack');\n    return null;\n  }\n\n  core.setMedia(media);\n  const state = core.getState();\n\n  return {\n    state,\n    value: state.value,\n    options: state.tracks.map((track) => ({\n      value: track.value,\n      label: translateText(track.label, t),\n      disabled: state.disabled,\n    })),\n    disabled: state.disabled,\n    setValue,\n  };\n}\n\nexport namespace useAudioTrackOptions {\n  export type Props = AudioTrackOptionsProps;\n  export type Result = AudioTrackOptionsResult;\n  export type Option = AudioTrackOption;\n}\n"],"mappings":";;;;;;;;;;;;;;AAgCA,SAAgB,qBAAqB,OAAgE;CACnG;CAEA,MAAM,QAAQ,UAAU,gBAAgB;CACxC,MAAM,IAAI,cAAc;CACxB,MAAM,CAAC,QAAQ,eAAe,IAAI,yBAAyB,CAAC;CAE5D,KAAK,SAAS,SAAS,CAAC,CAAC;CAEzB,MAAM,WAAW,aAAa,UAAkB,KAAK,YAAY,OAAQ,KAAK,GAAG,CAAC,MAAM,KAAK,CAAC;CAE9F,IAAI,CAAC,OAAO;EACG,kBAAkB,wBAAwB,iBAAiB,eAAe,YAAY;EACnG,OAAO;CACT;CAEA,KAAK,SAAS,KAAK;CACnB,MAAM,QAAQ,KAAK,SAAS;CAE5B,OAAO;EACL;EACA,OAAO,MAAM;EACb,SAAS,MAAM,OAAO,KAAK,WAAW;GACpC,OAAO,MAAM;GACb,OAAO,cAAc,MAAM,OAAO,CAAC;GACnC,UAAU,MAAM;EAClB,EAAE;EACF,UAAU,MAAM;EAChB;CACF;AACF"}
+{"version":3,"file":"use-audio-track-options.js","names":[],"sources":["../../../../src/ui/audio-track/use-audio-track-options.ts"],"sourcesContent":["'use client';\n\nimport { AudioTrackRadioGroupCore, type AudioTrackRadioGroupOption } from '@videojs/core';\nimport { selectAudioTrack } from '@videojs/core/dom';\n\nimport { createRadioOptionsHook, type TranslatedRadioOption } from '../hooks/create-radio-options-hook';\n\nexport interface AudioTrackOptionsProps extends AudioTrackRadioGroupCore.Props {}\n\nexport type AudioTrackOption = TranslatedRadioOption<AudioTrackRadioGroupOption>;\n\nexport interface AudioTrackOptionsResult {\n  state: AudioTrackRadioGroupCore.State;\n  label: string;\n  value: string;\n  selectedLabel: string;\n  options: AudioTrackOption[];\n  disabled: boolean;\n  hidden: boolean;\n  setValue: (value: string) => void;\n}\n\nconst useAudioTrackRadioOptions = createRadioOptionsHook({\n  name: 'useAudioTrackOptions',\n  feature: 'audioTrack',\n  selector: selectAudioTrack,\n  createCore: () => new AudioTrackRadioGroupCore(),\n});\n\n/**\n * Create audio track menu options from the player audio track state. Returns\n * `null` when the audio track feature is not configured.\n *\n * @param props - Optional `label`, `formatTrack`, and `disabled` overrides.\n */\nexport function useAudioTrackOptions(props?: AudioTrackOptionsProps): AudioTrackOptionsResult | null {\n  'use no memo';\n\n  return useAudioTrackRadioOptions(props);\n}\n\nexport namespace useAudioTrackOptions {\n  export type Props = AudioTrackOptionsProps;\n  export type Result = AudioTrackOptionsResult;\n  export type Option = AudioTrackOption;\n}\n"],"mappings":";;;;;AAsBA,MAAM,4BAA4B,uBAAuB;CACvD,MAAM;CACN,SAAS;CACT,UAAU;CACV,kBAAkB,IAAI,yBAAyB;AACjD,CAAC;;;;;;;AAQD,SAAgB,qBAAqB,OAAgE;CACnG;CAEA,OAAO,0BAA0B,KAAK;AACxC"}

package/dist/dev/ui/audio-track-radio-group/audio-track-radio-group.d.ts

@@ -0,0 +1,43 @@
+import { UIComponentProps } from "../../utils/types.js";
+import { AudioTrackOption, AudioTrackOptionsProps } from "../audio-track/use-audio-track-options.js";
+import { MenuRadioItemProps } from "../menu/menu-radio-item.js";
+import { ReactElement } from "react";
+import { AudioTrackRadioGroupCore } from "@videojs/core";
+//#region src/ui/audio-track-radio-group/audio-track-radio-group.d.ts
+type AudioTrackRadioGroupItemState = AudioTrackOption & {
+  /** Whether this option is the currently enabled audio track. */
+  checked: boolean;
+};
+interface AudioTrackRadioGroupItemProps extends Omit<MenuRadioItemProps, 'ref'> {
+  /** Audio track value represented by the option. */
+  'data-track': string;
+}
+interface AudioTrackRadioGroupProps extends Omit<UIComponentProps<'div', AudioTrackRadioGroupCore.State>, 'children'>, AudioTrackOptionsProps {
+  /** Render one consumer-owned menu radio item for every audio track. */
+  renderItem: (props: AudioTrackRadioGroupItemProps, state: AudioTrackRadioGroupItemState) => ReactElement;
+}
+/**
+ * Renders menu radio options for the player's audio tracks.
+ *
+ * @example
+ * ```tsx
+ * <AudioTrackRadioGroup
+ *   renderItem={(props, item) => (
+ *     <Menu.RadioItem {...props}>
+ *       {item.label}
+ *       <Menu.ItemIndicator checked={item.checked} />
+ *     </Menu.RadioItem>
+ *   )}
+ * />
+ * ```
+ */
+declare const AudioTrackRadioGroup: import("react").ForwardRefExoticComponent<Omit<AudioTrackRadioGroupProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+declare namespace AudioTrackRadioGroup {
+  type Props = AudioTrackRadioGroupProps;
+  type State = AudioTrackRadioGroupCore.State;
+  type ItemProps = AudioTrackRadioGroupItemProps;
+  type ItemState = AudioTrackRadioGroupItemState;
+}
+//#endregion
+export { AudioTrackRadioGroup, AudioTrackRadioGroupItemProps, AudioTrackRadioGroupItemState, AudioTrackRadioGroupProps };
+//# sourceMappingURL=audio-track-radio-group.d.ts.map

package/dist/dev/ui/audio-track-radio-group/audio-track-radio-group.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"audio-track-radio-group.d.ts","names":[],"sources":["../../../../src/ui/audio-track-radio-group/audio-track-radio-group.tsx"],"mappings":";;;;;;KAiBY,gCAAgC;;EAE1C;;UAGe,sCAAsC,KAAK;;EAE1D;;UAGe,kCACP,KAAK,wBAAwB,yBAAyB,qBAC5D;;EAEF,aAAa,OAAO,+BAA+B,OAAO,kCAAkC;;;;;;;;;;;;;;;;;cAkBjF,sCAAoB,0BAAA,KAAA,oDAAA,cAAA;kBAyDhB;OACH,QAAQ;OACR,QAAQ,yBAAyB;OACjC,YAAY;OACZ,YAAY"}