@videojs/html 10.0.0-beta.2 → 10.0.0-beta.22

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

@@ -1,8 +1,7 @@
 import { cn } from "@videojs/utils/style";
-
 //#region ../skins/dist/default/minimal/tailwind/components/overlay.js
-const overlay = cn("absolute inset-0 flex flex-col items-start", "pointer-events-none rounded-[inherit]", "opacity-0", "bg-linear-to-t from-black/70 via-black/50 via-[7.5rem] to-transparent", "backdrop-blur-none backdrop-saturate-120 backdrop-brightness-90", "transition-[opacity,backdrop-filter] ease-out", "duration-500 delay-500", "peer-data-visible/controls:opacity-100", "peer-data-visible/controls:duration-150", "peer-data-visible/controls:delay-0", "peer-data-open/error:opacity-100", "peer-data-open/error:duration-150", "peer-data-open/error:delay-0", "peer-data-open/error:backdrop-blur", "motion-reduce:duration-100");
-
+const overlay = cn("absolute inset-0 flex flex-col items-start", "pointer-events-none rounded-[inherit]", "opacity-0", "bg-linear-to-t from-black/70 via-black/50 via-[7.5rem] to-transparent", "backdrop-blur-none backdrop-saturate-100", "transition-[opacity,backdrop-filter]", "duration-(--media-controls-transition-duration)", "ease-out", "peer-data-visible/controls:opacity-100", "peer-data-open/error:opacity-100", "peer-data-open/error:duration-(--media-error-dialog-transition-duration)", "peer-data-open/error:delay-(--media-error-dialog-transition-delay)", "peer-data-open/error:backdrop-blur-lg peer-data-open/error:backdrop-saturate-120");
 //#endregion
 export { overlay };
+
 //# sourceMappingURL=overlay.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"overlay.js","names":[],"sources":["../../../../../../../../../skins/dist/default/minimal/tailwind/components/overlay.js"],"sourcesContent":["import { cn } from \"@videojs/utils/style\";\n\n//#region src/minimal/tailwind/components/overlay.ts\nconst overlay = cn(\"absolute inset-0 flex flex-col items-start\", \"pointer-events-none rounded-[inherit]\", \"opacity-0\", \"bg-linear-to-t from-black/70 via-black/50 via-[7.5rem] to-transparent\", \"backdrop-blur-none backdrop-saturate-120 backdrop-brightness-90\", \"transition-[opacity,backdrop-filter] ease-out\", \"duration-500 delay-500\", \"peer-data-visible/controls:opacity-100\", \"peer-data-visible/controls:duration-150\", \"peer-data-visible/controls:delay-0\", \"peer-data-open/error:opacity-100\", \"peer-data-open/error:duration-150\", \"peer-data-open/error:delay-0\", \"peer-data-open/error:backdrop-blur\", \"motion-reduce:duration-100\");\n\n//#endregion\nexport { overlay };\n//# sourceMappingURL=overlay.js.map"],"mappings":";;;AAGA,MAAM,UAAU,GAAG,8CAA8C,yCAAyC,aAAa,yEAAyE,mEAAmE,iDAAiD,0BAA0B,0CAA0C,2CAA2C,sCAAsC,oCAAoC,qCAAqC,gCAAgC,sCAAsC,6BAA6B"}
+{"version":3,"file":"overlay.js","names":[],"sources":["../../../../../../../../../skins/dist/default/minimal/tailwind/components/overlay.js"],"sourcesContent":["import { cn } from \"@videojs/utils/style\";\n//#region src/minimal/tailwind/components/overlay.ts\nconst overlay = cn(\"absolute inset-0 flex flex-col items-start\", \"pointer-events-none rounded-[inherit]\", \"opacity-0\", \"bg-linear-to-t from-black/70 via-black/50 via-[7.5rem] to-transparent\", \"backdrop-blur-none backdrop-saturate-100\", \"transition-[opacity,backdrop-filter]\", \"duration-(--media-controls-transition-duration)\", \"ease-out\", \"peer-data-visible/controls:opacity-100\", \"peer-data-open/error:opacity-100\", \"peer-data-open/error:duration-(--media-error-dialog-transition-duration)\", \"peer-data-open/error:delay-(--media-error-dialog-transition-delay)\", \"peer-data-open/error:backdrop-blur-lg peer-data-open/error:backdrop-saturate-120\");\n//#endregion\nexport { overlay };\n\n//# sourceMappingURL=overlay.js.map"],"mappings":";;AAEA,MAAM,UAAU,GAAG,8CAA8C,yCAAyC,aAAa,yEAAyE,4CAA4C,wCAAwC,mDAAmD,YAAY,0CAA0C,oCAAoC,4EAA4E,sEAAsE,mFAAmF"}

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: `after:content-[attr(data-rate)_'×'] after:w-[4ch] after:tabular-nums` };
+//#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: `after:content-[attr(data-rate)_'×'] after:w-[4ch] after:tabular-nums` };\n//#endregion\nexport { playbackRate };\n\n//# sourceMappingURL=playback-rate.js.map"],"mappings":";AACA,MAAM,eAAe,EAAE,QAAQ,wEAAwE"}

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

@@ -1,12 +1,12 @@
 import { cn } from "@videojs/utils/style";
-
 //#region ../skins/dist/default/minimal/tailwind/components/popup.js
-const base = cn("m-0 border-0 text-inherit overflow-visible", "transition-[transform,scale,opacity,filter] duration-200", "data-starting-style:opacity-0 data-starting-style:scale-0 data-starting-style:blur-sm", "data-ending-style:opacity-0 data-ending-style:scale-0 data-ending-style:blur-sm", "data-instant:duration-0", "data-[side=top]:origin-bottom data-[side=bottom]:origin-top data-[side=left]:origin-right data-[side=right]:origin-left");
+const base = cn("m-0 border-0 text-inherit overflow-visible", "transition-[transform,scale,opacity,filter]", "duration-(--media-popup-transition-duration)", "ease-(--media-popup-transition-timing-function)", "data-starting-style:opacity-0 data-starting-style:scale-50 data-starting-style:blur-sm", "data-ending-style:opacity-0 data-ending-style:scale-50 data-ending-style:blur-sm", "data-instant:duration-0", "data-[side=top]:origin-bottom data-[side=bottom]:origin-top data-[side=left]:origin-right data-[side=right]:origin-left", "before:absolute before:pointer-events-[inherit]", "data-[side=top]:before:left-0 data-[side=top]:before:right-0 data-[side=top]:before:top-full", "data-[side=bottom]:before:left-0 data-[side=bottom]:before:right-0 data-[side=bottom]:before:bottom-full", "data-[side=left]:before:top-0 data-[side=left]:before:bottom-0 data-[side=left]:before:left-full", "data-[side=right]:before:top-0 data-[side=right]:before:bottom-0 data-[side=right]:before:right-full");
 const popup = {
-	tooltip: cn(base, "px-2 py-1 rounded-sm shadow-md shadow-black/10 bg-white/10 backdrop-blur-3xl backdrop-saturate-150 backdrop-brightness-90 text-[0.75rem] whitespace-nowrap", "[--media-tooltip-side-offset:0.5rem]"),
-	volume: cn(base, "py-2.5 px-1 rounded-full")
+	base,
+	popover: cn(base, "data-[side=top]:before:h-(--media-popover-side-offset) data-[side=bottom]:before:h-(--media-popover-side-offset)", "data-[side=left]:before:w-(--media-popover-side-offset) data-[side=right]:before:w-(--media-popover-side-offset)"),
+	tooltip: cn(base, "px-2 py-1 rounded-lg text-[0.75rem] whitespace-nowrap", "bg-(--media-tooltip-background-color) [backdrop-filter:var(--media-tooltip-backdrop-filter)]", "ring-1 ring-(color:--media-tooltip-border-color) shadow-md shadow-black/10", "text-(--media-tooltip-text-color)", "data-[side=top]:before:h-(--media-tooltip-side-offset) data-[side=bottom]:before:h-(--media-tooltip-side-offset)", "data-[side=left]:before:w-(--media-tooltip-side-offset) data-[side=right]:before:w-(--media-tooltip-side-offset)")
 };
-
 //#endregion
 export { popup };
+
 //# sourceMappingURL=popup.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"popup.js","names":[],"sources":["../../../../../../../../../skins/dist/default/minimal/tailwind/components/popup.js"],"sourcesContent":["import { cn } from \"@videojs/utils/style\";\n\n//#region src/minimal/tailwind/components/popup.ts\nconst base = cn(\"m-0 border-0 text-inherit overflow-visible\", \"transition-[transform,scale,opacity,filter] duration-200\", \"data-starting-style:opacity-0 data-starting-style:scale-0 data-starting-style:blur-sm\", \"data-ending-style:opacity-0 data-ending-style:scale-0 data-ending-style:blur-sm\", \"data-instant:duration-0\", \"data-[side=top]:origin-bottom data-[side=bottom]:origin-top data-[side=left]:origin-right data-[side=right]:origin-left\");\nconst popup = {\n\ttooltip: cn(base, \"px-2 py-1 rounded-sm shadow-md shadow-black/10 bg-white/10 backdrop-blur-3xl backdrop-saturate-150 backdrop-brightness-90 text-[0.75rem] whitespace-nowrap\", \"[--media-tooltip-side-offset:0.5rem]\"),\n\tvolume: cn(base, \"py-2.5 px-1 rounded-full\")\n};\n\n//#endregion\nexport { popup };\n//# sourceMappingURL=popup.js.map"],"mappings":";;;AAGA,MAAM,OAAO,GAAG,8CAA8C,4DAA4D,yFAAyF,mFAAmF,2BAA2B,0HAA0H;AAC3b,MAAM,QAAQ;CACb,SAAS,GAAG,MAAM,8JAA8J,uCAAuC;CACvN,QAAQ,GAAG,MAAM,2BAA2B;CAC5C"}
+{"version":3,"file":"popup.js","names":[],"sources":["../../../../../../../../../skins/dist/default/minimal/tailwind/components/popup.js"],"sourcesContent":["import { cn } from \"@videojs/utils/style\";\n//#region src/minimal/tailwind/components/popup.ts\nconst base = cn(\"m-0 border-0 text-inherit overflow-visible\", \"transition-[transform,scale,opacity,filter]\", \"duration-(--media-popup-transition-duration)\", \"ease-(--media-popup-transition-timing-function)\", \"data-starting-style:opacity-0 data-starting-style:scale-50 data-starting-style:blur-sm\", \"data-ending-style:opacity-0 data-ending-style:scale-50 data-ending-style:blur-sm\", \"data-instant:duration-0\", \"data-[side=top]:origin-bottom data-[side=bottom]:origin-top data-[side=left]:origin-right data-[side=right]:origin-left\", \"before:absolute before:pointer-events-[inherit]\", \"data-[side=top]:before:left-0 data-[side=top]:before:right-0 data-[side=top]:before:top-full\", \"data-[side=bottom]:before:left-0 data-[side=bottom]:before:right-0 data-[side=bottom]:before:bottom-full\", \"data-[side=left]:before:top-0 data-[side=left]:before:bottom-0 data-[side=left]:before:left-full\", \"data-[side=right]:before:top-0 data-[side=right]:before:bottom-0 data-[side=right]:before:right-full\");\nconst popup = {\n\tbase,\n\tpopover: cn(base, \"data-[side=top]:before:h-(--media-popover-side-offset) data-[side=bottom]:before:h-(--media-popover-side-offset)\", \"data-[side=left]:before:w-(--media-popover-side-offset) data-[side=right]:before:w-(--media-popover-side-offset)\"),\n\ttooltip: cn(base, \"px-2 py-1 rounded-lg text-[0.75rem] whitespace-nowrap\", \"bg-(--media-tooltip-background-color) [backdrop-filter:var(--media-tooltip-backdrop-filter)]\", \"ring-1 ring-(color:--media-tooltip-border-color) shadow-md shadow-black/10\", \"text-(--media-tooltip-text-color)\", \"data-[side=top]:before:h-(--media-tooltip-side-offset) data-[side=bottom]:before:h-(--media-tooltip-side-offset)\", \"data-[side=left]:before:w-(--media-tooltip-side-offset) data-[side=right]:before:w-(--media-tooltip-side-offset)\")\n};\n//#endregion\nexport { popup };\n\n//# sourceMappingURL=popup.js.map"],"mappings":";;AAEA,MAAM,OAAO,GAAG,8CAA8C,+CAA+C,gDAAgD,mDAAmD,0FAA0F,oFAAoF,2BAA2B,2HAA2H,mDAAmD,gGAAgG,4GAA4G,oGAAoG,uGAAuG;AAC99B,MAAM,QAAQ;CACb;CACA,SAAS,GAAG,MAAM,oHAAoH,mHAAmH;CACzP,SAAS,GAAG,MAAM,yDAAyD,gGAAgG,8EAA8E,qCAAqC,oHAAoH,mHAAmH;CACrgB"}

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

@@ -0,0 +1,15 @@
+import { cn } from "@videojs/utils/style";
+//#region ../skins/dist/default/minimal/tailwind/components/poster.js
+const poster = (isShadowDOM) => cn("absolute inset-0 w-full h-full pointer-events-none", "transition-opacity duration-250", "not-data-visible:opacity-0", isShadowDOM ? [
+	"[&_::slotted(img)]:absolute",
+	"[&_::slotted(img)]:inset-0",
+	"[&_::slotted(img)]:w-full",
+	"[&_::slotted(img)]:h-full",
+	"[&_::slotted(img)]:[object-fit:var(--media-object-fit,contain)]",
+	"[&_::slotted(img)]:[object-position:var(--media-object-position,center)]",
+	"[&_::slotted(img)]:rounded-(--media-video-border-radius)"
+] : "rounded-[inherit] [object-fit:var(--media-object-fit,contain)] [object-position:var(--media-object-position,center)]");
+//#endregion
+export { poster };
+
+//# sourceMappingURL=poster.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"poster.js","names":[],"sources":["../../../../../../../../../skins/dist/default/minimal/tailwind/components/poster.js"],"sourcesContent":["import { cn } from \"@videojs/utils/style\";\n//#region src/minimal/tailwind/components/poster.ts\nconst poster = (isShadowDOM) => cn(\"absolute inset-0 w-full h-full pointer-events-none\", \"transition-opacity duration-250\", \"not-data-visible:opacity-0\", isShadowDOM ? [\n\t\"[&_::slotted(img)]:absolute\",\n\t\"[&_::slotted(img)]:inset-0\",\n\t\"[&_::slotted(img)]:w-full\",\n\t\"[&_::slotted(img)]:h-full\",\n\t\"[&_::slotted(img)]:[object-fit:var(--media-object-fit,contain)]\",\n\t\"[&_::slotted(img)]:[object-position:var(--media-object-position,center)]\",\n\t\"[&_::slotted(img)]:rounded-(--media-video-border-radius)\"\n] : \"rounded-[inherit] [object-fit:var(--media-object-fit,contain)] [object-position:var(--media-object-position,center)]\");\n//#endregion\nexport { poster };\n\n//# sourceMappingURL=poster.js.map"],"mappings":";;AAEA,MAAM,UAAU,gBAAgB,GAAG,sDAAsD,mCAAmC,8BAA8B,cAAc;CACvK;CACA;CACA;CACA;CACA;CACA;CACA;CACA,GAAG,uHAAuH"}

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

@@ -0,0 +1,13 @@
+import { cn } from "@videojs/utils/style";
+//#region ../skins/dist/default/minimal/tailwind/components/preview.js
+const preview = {
+	root: "group/preview pointer-events-none",
+	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")
+};
+//#endregion
+export { preview };
+
+//# sourceMappingURL=preview.js.map

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

@@ -0,0 +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"}

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

@@ -1,8 +1,7 @@
 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] text-[0.8125rem] leading-normal subpixel-antialiased", "**:box-border **:m-0", "[&_button]:font-[inherit]", "motion-safe:[interpolate-size:allow-keywords]");
-
+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]");
 //#endregion
 export { root };
+
 //# sourceMappingURL=root.js.map

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\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] text-[0.8125rem] leading-normal subpixel-antialiased\", \"**:box-border **:m-0\", \"[&_button]:font-[inherit]\", \"motion-safe:[interpolate-size:allow-keywords]\");\n\n//#endregion\nexport { root };\n//# sourceMappingURL=root.js.map"],"mappings":";;;AAGA,MAAM,OAAO,GAAG,gDAAgD,2CAA2C,uHAAuH,wBAAwB,6BAA6B,gDAAgD"}
+{"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"}

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

@@ -1,11 +1,10 @@
 //#region ../skins/dist/default/minimal/tailwind/components/seek.js
 const seek = {
-	button: "@max-md/media-controls:hidden",
-	label: "text-[0.75em] font-[480] tabular-nums",
+	label: "text-[10px] font-[480] tabular-nums",
 	labelForward: "absolute -right-px -bottom-0.75",
 	labelBackward: "absolute -left-px -bottom-0.75"
 };
-
 //#endregion
 export { seek };
+
 //# sourceMappingURL=seek.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"seek.js","names":[],"sources":["../../../../../../../../../skins/dist/default/minimal/tailwind/components/seek.js"],"sourcesContent":["//#region src/minimal/tailwind/components/seek.ts\nconst seek = {\n\tbutton: \"@max-md/media-controls:hidden\",\n\tlabel: \"text-[0.75em] font-[480] tabular-nums\",\n\tlabelForward: \"absolute -right-px -bottom-0.75\",\n\tlabelBackward: \"absolute -left-px -bottom-0.75\"\n};\n\n//#endregion\nexport { seek };\n//# sourceMappingURL=seek.js.map"],"mappings":";AACA,MAAM,OAAO;CACZ,QAAQ;CACR,OAAO;CACP,cAAc;CACd,eAAe;CACf"}
+{"version":3,"file":"seek.js","names":[],"sources":["../../../../../../../../../skins/dist/default/minimal/tailwind/components/seek.js"],"sourcesContent":["//#region src/minimal/tailwind/components/seek.ts\nconst seek = {\n\tlabel: \"text-[10px] font-[480] tabular-nums\",\n\tlabelForward: \"absolute -right-px -bottom-0.75\",\n\tlabelBackward: \"absolute -left-px -bottom-0.75\"\n};\n//#endregion\nexport { seek };\n\n//# sourceMappingURL=seek.js.map"],"mappings":";AACA,MAAM,OAAO;CACZ,OAAO;CACP,cAAc;CACd,eAAe;CACf"}

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

@@ -1,8 +1,7 @@
 import { cn } from "@videojs/utils/style";
-
 //#region ../skins/dist/default/minimal/tailwind/components/slider.js
 const slider = {
-	root: cn("group/slider relative flex flex-1 items-center justify-center rounded-full outline-none", "data-[orientation=horizontal]:min-w-20 data-[orientation=horizontal]:w-full data-[orientation=horizontal]:h-5", "data-[orientation=vertical]:w-5 data-[orientation=vertical]:h-[4.5rem]"),
+	root: 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]"),
 	track: 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"),
 	fill: {
 		base: "absolute rounded-[inherit] pointer-events-none",
@@ -14,7 +13,7 @@ const slider = {
 		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")
 	}
 };
-
 //#endregion
 export { slider };
+
 //# sourceMappingURL=slider.js.map

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\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\", \"data-[orientation=horizontal]:min-w-20 data-[orientation=horizontal]:w-full data-[orientation=horizontal]:h-5\", \"data-[orientation=vertical]:w-5 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\n//#endregion\nexport { slider };\n//# sourceMappingURL=slider.js.map"],"mappings":";;;AAGA,MAAM,SAAS;CACd,MAAM,GAAG,2FAA2F,iHAAiH,yEAAyE;CAC9R,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-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"}

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

@@ -1,14 +1,13 @@
 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", "@md/media-controls:inline"),
-	separator: cn("hidden", "@md/media-controls:inline @md/media-controls:text-white/50"),
-	duration: cn("tabular-nums", "@md/media-controls:text-current/60"),
-	controls: cn("flex flex-row-reverse items-center flex-1 gap-3", "@md/media-controls:flex-row")
+	current: cn("hidden tabular-nums", "@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("@container flex flex-row-reverse items-center flex-1 gap-3", "@2xl/media-root:flex-row")
 };
-
 //#endregion
 export { time };
+
 //# sourceMappingURL=time.js.map

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\n//#region src/minimal/tailwind/components/time.ts\nconst time = {\n\tgroup: \"flex items-center gap-1\",\n\tcurrent: cn(\"hidden tabular-nums\", \"@md/media-controls:inline\"),\n\tseparator: cn(\"hidden\", \"@md/media-controls:inline @md/media-controls:text-white/50\"),\n\tduration: cn(\"tabular-nums\", \"@md/media-controls:text-current/60\"),\n\tcontrols: cn(\"flex flex-row-reverse items-center flex-1 gap-3\", \"@md/media-controls:flex-row\")\n};\n\n//#endregion\nexport { time };\n//# sourceMappingURL=time.js.map"],"mappings":";;;AAGA,MAAM,OAAO;CACZ,OAAO;CACP,SAAS,GAAG,uBAAuB,4BAA4B;CAC/D,WAAW,GAAG,UAAU,6DAA6D;CACrF,UAAU,GAAG,gBAAgB,qCAAqC;CAClE,UAAU,GAAG,mDAAmD,8BAA8B;CAC9F"}
+{"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\", \"@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 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,uBAAuB,yBAAyB;CAC5D,WAAW,GAAG,UAAU,yDAAyD;CACjF,UAAU,GAAG,gBAAgB,kCAAkC;CAC/D,UAAU,GAAG,8DAA8D,2BAA2B;CACtG"}

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

@@ -1,44 +1,65 @@
 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 { bufferingIndicator } from "./components/buffering.js";
-import { button } from "./components/button.js";
+import "../../shared/tailwind/icon-state.js";
+import "./components/buffering.js";
+import "./components/button.js";
 import { buttonGroup } from "./components/button-group.js";
-import { error } from "./components/error.js";
-import { icon, iconContainer, iconFlipped } from "./components/icon.js";
-import { seek } from "./components/seek.js";
+import "./components/icon.js";
+import "./components/seek.js";
 import { slider as slider$1 } from "./components/slider.js";
-import { time } from "./components/time.js";
-import { iconState } from "./components/icon-state.js";
-import { overlay } from "./components/overlay.js";
-import { tooltipState } from "./components/tooltip-state.js";
+import { time as time$1 } from "./components/time.js";
+import { preview as preview$1 } from "./components/preview.js";
+import "./components/overlay.js";
+import "./components/playback-rate.js";
+import "./components/poster.js";
 import { cn } from "@videojs/utils/style";
-
 //#region ../skins/dist/default/minimal/tailwind/video.tailwind.js
-const root = (isShadowDOM) => cn(root$1, "bg-black", "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-border-radius,0.75rem)": isShadowDOM,
-	"[&_video]:block [&_video]:w-full [&_video]:h-full [&_video]:rounded-[inherit]": !isShadowDOM
-}, "[&>img]:absolute [&>img]:inset-0 [&>img]:w-full [&>img]:h-full [&>img]:rounded-[inherit]", "[&>img]:object-cover [&>img]:pointer-events-none", "[&>img]:transition-opacity [&>img]:duration-250", "[&>img:not([data-visible])]:opacity-0", "[--media-caption-track-delay:600ms]", "[--media-caption-track-y:-0.5rem]", "has-[[data-controls][data-visible]]:[--media-caption-track-delay:25ms]", "has-[[data-controls][data-visible]]:[--media-caption-track-y:-3.5rem]", !isShadowDOM ? [
-	"[&_video::-webkit-media-text-track-container]:transition-transform",
-	"[&_video::-webkit-media-text-track-container]:duration-150",
+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 ? [
+	"[&_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",
 	"[&_video::-webkit-media-text-track-container]:delay-(--media-caption-track-delay)",
 	"[&_video::-webkit-media-text-track-container]:translate-y-(--media-caption-track-y)",
 	"[&_video::-webkit-media-text-track-container]:scale-98",
 	"[&_video::-webkit-media-text-track-container]:z-1",
-	"[&_video::-webkit-media-text-track-container]:font-[inherit]",
-	"motion-reduce:[&_video::-webkit-media-text-track-container]:duration-50"
-] : [], "[&:fullscreen]:rounded-none");
-const controls = cn(controls$1, "absolute bottom-0 inset-x-0", "pt-8 px-1.5 pb-1.5 gap-2", "text-white z-10", "will-change-[translate,filter,opacity]", "transition-[translate,filter,opacity] ease-out", "delay-0 duration-75", "not-data-visible:opacity-0 not-data-visible:translate-y-full", "not-data-visible:blur-sm not-data-visible:pointer-events-none", "not-data-visible:delay-500 not-data-visible:duration-500", "motion-reduce:not-data-visible:duration-100", "motion-reduce:not-data-visible:translate-y-0", "motion-reduce:not-data-visible:blur-none motion-reduce:not-data-visible:scale-100", "@sm/media-root:pt-10 @sm/media-root:px-3 @sm/media-root:pb-3", "@sm/media-root:gap-3.5");
+	"[&_video::-webkit-media-text-track-container]:font-[inherit]"
+] : [], "[&:fullscreen]:[--media-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", "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 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 = {
+	...time$1,
+	controls: 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]")
+};
+const error = {
+	...error$1,
+	root: cn(error$1.root, "pointer-events-none outline-none"),
+	dialog: cn(error$1.dialog, "pointer-events-auto"),
+	title: cn(error$1.title, "text-lg")
+};
+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),
+	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)")
+};
 const slider = {
 	...slider$1,
-	track: cn(slider$1.track, "shadow-[0_0_0_1px_oklch(0_0_0/0.05)]")
+	track: cn(slider$1.track, "ring-1 ring-black/5")
 };
 const popup = {
 	...popup$1,
-	volume: cn("[--media-popover-side-offset:0.5rem] p-1 bg-transparent")
+	volume: 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)")
 };
-
 //#endregion
-export { controls, popup, root, slider };
+export { buttonGroupEnd, buttonGroupStart, controls, error, popup, preview, root, slider, time };
+
 //# 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 { popup as popup$1 } from \"./components/popup.js\";\nimport { root as root$1 } from \"./components/root.js\";\nimport { bufferingIndicator } from \"./components/buffering.js\";\nimport { button } from \"./components/button.js\";\nimport { buttonGroup } from \"./components/button-group.js\";\nimport { error } from \"./components/error.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 } from \"./components/time.js\";\nimport { captions } from \"./components/captions.js\";\nimport { iconState } from \"./components/icon-state.js\";\nimport { overlay } from \"./components/overlay.js\";\nimport { tooltipState } from \"./components/tooltip-state.js\";\nimport { cn } from \"@videojs/utils/style\";\n\n//#region src/minimal/tailwind/video.tailwind.ts\nconst root = (isShadowDOM) => cn(root$1, \"bg-black\", \"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-border-radius,0.75rem)\": isShadowDOM,\n\t\"[&_video]:block [&_video]:w-full [&_video]:h-full [&_video]:rounded-[inherit]\": !isShadowDOM\n}, \"[&>img]:absolute [&>img]:inset-0 [&>img]:w-full [&>img]:h-full [&>img]:rounded-[inherit]\", \"[&>img]:object-cover [&>img]:pointer-events-none\", \"[&>img]:transition-opacity [&>img]:duration-250\", \"[&>img:not([data-visible])]:opacity-0\", \"[--media-caption-track-delay:600ms]\", \"[--media-caption-track-y:-0.5rem]\", \"has-[[data-controls][data-visible]]:[--media-caption-track-delay:25ms]\", \"has-[[data-controls][data-visible]]:[--media-caption-track-y:-3.5rem]\", !isShadowDOM ? [\n\t\"[&_video::-webkit-media-text-track-container]:transition-transform\",\n\t\"[&_video::-webkit-media-text-track-container]:duration-150\",\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\t\"motion-reduce:[&_video::-webkit-media-text-track-container]:duration-50\"\n] : [], \"[&:fullscreen]:rounded-none\");\nconst controls = cn(controls$1, \"absolute bottom-0 inset-x-0\", \"pt-8 px-1.5 pb-1.5 gap-2\", \"text-white z-10\", \"will-change-[translate,filter,opacity]\", \"transition-[translate,filter,opacity] ease-out\", \"delay-0 duration-75\", \"not-data-visible:opacity-0 not-data-visible:translate-y-full\", \"not-data-visible:blur-sm not-data-visible:pointer-events-none\", \"not-data-visible:delay-500 not-data-visible:duration-500\", \"motion-reduce:not-data-visible:duration-100\", \"motion-reduce:not-data-visible:translate-y-0\", \"motion-reduce:not-data-visible:blur-none motion-reduce:not-data-visible:scale-100\", \"@sm/media-root:pt-10 @sm/media-root:px-3 @sm/media-root:pb-3\", \"@sm/media-root:gap-3.5\");\nconst slider = {\n\t...slider$1,\n\ttrack: cn(slider$1.track, \"shadow-[0_0_0_1px_oklch(0_0_0/0.05)]\")\n};\nconst popup = {\n\t...popup$1,\n\tvolume: cn(\"[--media-popover-side-offset:0.5rem] p-1 bg-transparent\")\n};\n\n//#endregion\nexport { bufferingIndicator, button, buttonGroup, captions, controls, error, icon, iconContainer, iconFlipped, iconHidden, iconState, overlay, popup, root, seek, slider, time, tooltipState };\n//# sourceMappingURL=video.tailwind.js.map"],"mappings":";;;;;;;;;;;;;;;;;AAkBA,MAAM,QAAQ,gBAAgB,GAAG,QAAQ,YAAY,+EAA+E,mEAAmE,4BAA4B;CAClO,mJAAmJ;CACnJ,iFAAiF,CAAC;CAClF,EAAE,4FAA4F,oDAAoD,mDAAmD,yCAAyC,uCAAuC,qCAAqC,0EAA0E,yEAAyE,CAAC,cAAc;CAC5d;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA,GAAG,EAAE,EAAE,8BAA8B;AACtC,MAAM,WAAW,GAAG,YAAY,+BAA+B,4BAA4B,mBAAmB,0CAA0C,kDAAkD,uBAAuB,gEAAgE,iEAAiE,4DAA4D,+CAA+C,gDAAgD,qFAAqF,gEAAgE,yBAAyB;AAC3qB,MAAM,SAAS;CACd,GAAG;CACH,OAAO,GAAG,SAAS,OAAO,uCAAuC;CACjE;AACD,MAAM,QAAQ;CACb,GAAG;CACH,QAAQ,GAAG,0DAA0D;CACrE"}
+{"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"}

package/dist/{default/skins/dist/default/default/tailwind/components → dev/skins/dist/default/shared/tailwind}/icon-state.js

@@ -1,4 +1,4 @@
-//#region ../skins/dist/default/default/tailwind/components/icon-state.js
+//#region ../skins/dist/default/shared/tailwind/icon-state.js
 const iconState = {
 	play: {
 		button: "group",
@@ -21,9 +21,19 @@ const iconState = {
 		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"
+	},
+	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"
+	},
+	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"
 	}
 };
-
 //#endregion
 export { iconState };
+
 //# sourceMappingURL=icon-state.js.map

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

@@ -0,0 +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: \"hidden opacity-0 group-not-data-ended:group-data-paused:block group-not-data-ended:group-data-paused:opacity-100\",\n\t\tpause: \"hidden opacity-0 group-not-data-paused:group-not-data-ended:block 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};\n//#endregion\nexport { iconState };\n\n//# sourceMappingURL=icon-state.js.map"],"mappings":";AACA,MAAM,YAAY;CACjB,MAAM;EACL,QAAQ;EACR,SAAS;EACT,MAAM;EACN,OAAO;EACP;CACD,MAAM;EACL,QAAQ;EACR,WAAW;EACX,WAAW;EACX,YAAY;EACZ;CACD,YAAY;EACX,QAAQ;EACR,OAAO;EACP,MAAM;EACN;CACD,UAAU;EACT,QAAQ;EACR,KAAK;EACL,IAAI;EACJ;CACD,KAAK;EACJ,QAAQ;EACR,KAAK;EACL,IAAI;EACJ;CACD,MAAM;EACL,QAAQ;EACR,OAAO;EACP,MAAM;EACN;CACD"}

package/dist/dev/store/container-mixin.d.ts

@@ -1,16 +1,21 @@
-import { PlayerContext } from "../player/context.js";
 import { MediaElementConstructor } from "../ui/media-element.js";
+import { ContainerContext, PlayerContext } from "../player/context.js";
 import { PlayerConsumerConstructor } from "./types.js";
 import { PlayerStore } from "@videojs/core/dom";
 
 //#region src/store/container-mixin.d.ts
+interface ContainerMixinConfig<Store extends PlayerStore> {
+  playerContext: PlayerContext<Store>;
+  containerContext: ContainerContext;
+}
 type ContainerMixin<Store extends PlayerStore> = <Class extends MediaElementConstructor>(BaseClass: Class) => Class & PlayerConsumerConstructor<Store>;
 /**
- * Create a mixin that consumes player context and auto-attaches media elements.
+ * Create a mixin that consumes player context and registers itself as the
+ * container element with the provider via `containerContext`.
  *
- * @param context - Player context to consume from an ancestor provider.
+ * @param config - Container configuration with player and container contexts.
  */
-declare function createContainerMixin<Store extends PlayerStore>(context: PlayerContext<Store>): ContainerMixin<Store>;
+declare function createContainerMixin<Store extends PlayerStore>(config: ContainerMixinConfig<Store>): ContainerMixin<Store>;
 //#endregion
-export { ContainerMixin, createContainerMixin };
+export { ContainerMixin, ContainerMixinConfig, createContainerMixin };
 //# sourceMappingURL=container-mixin.d.ts.map

package/dist/dev/store/container-mixin.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"container-mixin.d.ts","names":[],"sources":["../../../src/store/container-mixin.ts"],"mappings":";;;;;;KAOY,cAAA,eAA6B,WAAA,mBAA8B,uBAAA,EACrE,SAAA,EAAW,KAAA,KACR,KAAA,GAAQ,yBAAA,CAA0B,KAAA;;AAFvC;;;;iBASgB,oBAAA,eAAmC,WAAA,CAAA,CAAa,OAAA,EAAS,aAAA,CAAc,KAAA,IAAS,cAAA,CAAe,KAAA"}
+{"version":3,"file":"container-mixin.d.ts","names":[],"sources":["../../../src/store/container-mixin.ts"],"mappings":";;;;;;UAMiB,oBAAA,eAAmC,WAAA;EAClD,aAAA,EAAe,aAAA,CAAc,KAAA;EAC7B,gBAAA,EAAkB,gBAAA;AAAA;AAAA,KAGR,cAAA,eAA6B,WAAA,mBAA8B,uBAAA,EACrE,SAAA,EAAW,KAAA,KACR,KAAA,GAAQ,yBAAA,CAA0B,KAAA;;;;;;;iBAQvB,oBAAA,eAAmC,WAAA,CAAA,CACjD,MAAA,EAAQ,oBAAA,CAAqB,KAAA,IAC5B,cAAA,CAAe,KAAA"}

package/dist/dev/store/container-mixin.js

@@ -1,25 +1,30 @@
 import { ContextConsumer } from "@videojs/element/context";
-import { noop } from "@videojs/utils/function";
-
 //#region src/store/container-mixin.ts
 /**
-* Create a mixin that consumes player context and auto-attaches media elements.
+* Create a mixin that consumes player context and registers itself as the
+* container element with the provider via `containerContext`.
 *
-* @param context - Player context to consume from an ancestor provider.
+* @param config - Container configuration with player and container contexts.
 */
-function createContainerMixin(context) {
+function createContainerMixin(config) {
 	return (BaseClass) => {
 		class PlayerContainerElement extends BaseClass {
-			#detach = noop;
-			#observer = null;
 			#contextStore = null;
+			#setContainer = null;
 			constructor(...args) {
 				super(...args);
 				new ContextConsumer(this, {
-					context,
+					context: config.playerContext,
 					callback: (value) => {
 						this.#contextStore = value ?? null;
-						this.#attachMedia();
+					},
+					subscribe: true
+				});
+				new ContextConsumer(this, {
+					context: config.containerContext,
+					callback: (value) => {
+						this.#setContainer = value?.setContainer ?? null;
+						if (this.isConnected) this.#setContainer?.(this);
 					},
 					subscribe: true
 				});
@@ -29,67 +34,17 @@ function createContainerMixin(context) {
 			}
 			connectedCallback() {
 				super.connectedCallback();
-				this.#observer = new MutationObserver((records) => {
-					if (records.some(hasMediaNode)) this.#attachMedia();
-				});
-				this.#observer.observe(this, {
-					childList: true,
-					subtree: true,
-					attributes: true,
-					attributeFilter: ["data-media-element"]
-				});
-				this.addEventListener("slotchange", this.#onSlotChange);
-				this.#attachMedia();
+				this.#setContainer?.(this);
 			}
 			disconnectedCallback() {
 				super.disconnectedCallback();
-				this.#observer?.disconnect();
-				this.#observer = null;
-				this.removeEventListener("slotchange", this.#onSlotChange);
-				this.#detach();
-			}
-			#onSlotChange = () => {
-				this.#attachMedia();
-			};
-			#getSlottedMedia() {
-				const slot = this.querySelector("slot[name=\"media\"]");
-				if (!slot) return null;
-				for (const el of slot.assignedElements({ flatten: true })) if (el instanceof HTMLMediaElement) return el;
-				return null;
-			}
-			#attachMedia() {
-				const store = this.#contextStore ?? this.store;
-				if (!store) return;
-				const media = this.querySelector("video, audio, [data-media-element]") ?? this.#getSlottedMedia();
-				if (!media) {
-					this.#detach();
-					this.#detach = noop;
-					return;
-				}
-				const target = {
-					media,
-					container: this
-				};
-				const hasMediaChanged = store.target?.media !== target.media, hasContainerChanged = store.target?.container !== target.container;
-				if (hasMediaChanged || hasContainerChanged) {
-					this.#detach();
-					this.#detach = store.attach(target);
-				}
+				this.#setContainer?.(null);
 			}
 		}
 		return PlayerContainerElement;
 	};
 }
-function isMediaNode(node) {
-	return node instanceof HTMLMediaElement || node instanceof Element && node.hasAttribute("data-media-element");
-}
-function hasMediaNode(record) {
-	if (record.type === "attributes" && record.target instanceof Element) return record.target.hasAttribute("data-media-element");
-	for (const node of record.addedNodes) if (isMediaNode(node)) return true;
-	for (const node of record.removedNodes) if (isMediaNode(node)) return true;
-	return false;
-}
-
 //#endregion
 export { createContainerMixin };
+
 //# sourceMappingURL=container-mixin.js.map