@videojs/html 10.0.0-beta.29 → 10.0.0-beta.30

package/dist/default/skins/dist/default/minimal/tailwind/components/menu.js

@@ -1,7 +1,7 @@
 import { popup } from "./popup.js";
 import { cn } from "@videojs/utils/style";
 //#region ../skins/dist/default/minimal/tailwind/components/menu.js
-const submenuPanel = cn("absolute inset-x-0 top-0 [max-height:inherit] overflow-auto overscroll-none p-(--menu-padding) outline-none", "z-10", "translate-none transition-[translate,filter] duration-(--menu-transition-duration) ease-out will-change-[translate,filter]", "data-starting-style:pointer-events-none data-ending-style:pointer-events-none", "data-starting-style:overflow-hidden data-ending-style:overflow-hidden", "data-starting-style:translate-x-full data-ending-style:translate-x-full", "data-starting-style:blur data-ending-style:blur");
+const submenuPanel = cn("absolute inset-x-0 top-0 [max-height:inherit] overflow-auto overscroll-none p-(--menu-padding) outline-none", "z-10", "translate-none transition-[translate,filter] duration-(--menu-transition-duration) ease-out", "data-starting-style:pointer-events-none data-ending-style:pointer-events-none", "data-starting-style:overflow-hidden data-ending-style:overflow-hidden", "data-starting-style:translate-x-full data-ending-style:translate-x-full", "data-starting-style:blur data-ending-style:blur");
 const itemBase = cn("group/menu-item relative flex cursor-pointer select-none items-center gap-1.5 rounded-(--menu-item-border-radius) py-1.5 px-2", "text-left", "text-shadow-2xs text-shadow-(color:--shadow-current-color)", "outline-2 -outline-offset-2 outline-transparent", "transition-colors duration-100 ease-in-out", "supports-[top:anchor(top)]:duration-50", "supports-[top:anchor(top)]:hover:duration-200", "supports-[top:anchor(top)]:data-highlighted:duration-200", "hover:bg-(--accent-background-color) hover:text-(--accent-text-color)", "data-highlighted:bg-(--accent-background-color) data-highlighted:text-(--accent-text-color)", "focus-visible:outline-(--focus-ring-color) focus-visible:outline-offset-2");
 const menuTokens = cn("[--menu-transition-duration:250ms]", "[--menu-max-height:--spacing(56)]", "[--menu-padding:--spacing(1)]", "[--menu-border-radius:--spacing(2.5)]", "[--menu-item-border-radius:calc(var(--menu-border-radius)_-_var(--menu-padding))]", "motion-reduce:[--menu-transition-duration:0ms]");
 const group = cn("flex flex-col gap-0.5", "[anchor-scope:--menu-item-highlight-anchor]", "supports-[top:anchor(top)]:before:absolute", "supports-[top:anchor(top)]:before:[position-anchor:--menu-item-highlight-anchor]", "supports-[top:anchor(top)]:before:[inset:anchor(inside)]", "supports-[top:anchor(top)]:before:[overflow-anchor:none]", "supports-[top:anchor(top)]:before:pointer-events-none", "supports-[top:anchor(top)]:before:bg-(--accent-background-color)", "supports-[top:anchor(top)]:before:rounded-(--menu-item-border-radius)", "supports-[top:anchor(top)]:before:transition-[inset]", "supports-[top:anchor(top)]:before:duration-100", "supports-[top:anchor(top)]:before:ease-in-out", "supports-[top:anchor(top)]:has-data-[highlighted=]:before:duration-0");
@@ -10,7 +10,7 @@ const menu = {
 	/** Standalone menu popover host (audio playback rate, sandbox demos). */
 	root: cn(menuHostShell, "overflow-auto!"),
 	/** Settings menu host with nested submenu navigation. */
-	settings: cn(menuHostShell, "[--popup-transition:var(--popup-base-transition),width_var(--popup-transition-timing-function)_var(--menu-transition-duration),height_var(--popup-transition-timing-function)_var(--menu-transition-duration)]", "data-starting-style:[--popup-transition:var(--popup-base-transition)]", "data-ending-style:[--popup-transition:var(--popup-base-transition)]", "min-w-48! w-(--media-menu-width) h-(--media-menu-height)", "[&>:not([data-submenu])]:translate-none [&>:not([data-submenu])]:transition-[translate,filter]", "[&>:not([data-submenu])]:duration-(--menu-transition-duration) [&>:not([data-submenu])]:ease-out", "[&>:not([data-submenu])]:will-change-[translate,filter]", "[&[data-submenu-expanded=true]>:not([data-submenu])]:-translate-x-full", "[&[data-submenu-expanded=true]>:not([data-submenu])]:blur", "[&[data-submenu-expanded]>:not([data-submenu])]:before:hidden", "overflow-hidden!"),
+	settings: cn(menuHostShell, "[--popup-transition:var(--popup-base-transition),width_var(--popup-transition-timing-function)_var(--menu-transition-duration),height_var(--popup-transition-timing-function)_var(--menu-transition-duration)]", "data-starting-style:[--popup-transition:var(--popup-base-transition)]", "data-ending-style:[--popup-transition:var(--popup-base-transition)]", "min-w-48! w-(--media-menu-width) h-(--media-menu-height)", "[&>:not([data-submenu])]:translate-none [&>:not([data-submenu])]:transition-[translate,filter]", "[&>:not([data-submenu])]:duration-(--menu-transition-duration) [&>:not([data-submenu])]:ease-out", "[&[data-submenu-expanded=true]>:not([data-submenu])]:-translate-x-full", "[&[data-submenu-expanded=true]>:not([data-submenu])]:blur", "[&[data-submenu-expanded]>:not([data-submenu])]:before:hidden", "overflow-hidden!"),
 	group,
 	item: cn(itemBase, "justify-between tabular-nums text-inherit", "supports-[top:anchor(top)]:data-highlighted:[anchor-name:--menu-item-highlight-anchor]", "supports-[top:anchor(top)]:data-highlighted:bg-transparent", "data-[availability=unavailable]:hidden data-[availability=unsupported]:hidden", "aria-disabled:pointer-events-none aria-disabled:cursor-not-allowed aria-disabled:opacity-50"),
 	separator: "my-1 border-b border-[oklch(1_0_0/0.1)]",

package/dist/default/skins/dist/default/minimal/tailwind/components/menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu.js","names":[],"sources":["../../../../../../../../../skins/dist/default/minimal/tailwind/components/menu.js"],"sourcesContent":["import { popup } from \"./popup.js\";\nimport { cn } from \"@videojs/utils/style\";\n//#region src/minimal/tailwind/components/menu.ts\nconst submenuPanel = cn(\"absolute inset-x-0 top-0 [max-height:inherit] overflow-auto overscroll-none p-(--menu-padding) outline-none\", \"z-10\", \"translate-none transition-[translate,filter] duration-(--menu-transition-duration) ease-out will-change-[translate,filter]\", \"data-starting-style:pointer-events-none data-ending-style:pointer-events-none\", \"data-starting-style:overflow-hidden data-ending-style:overflow-hidden\", \"data-starting-style:translate-x-full data-ending-style:translate-x-full\", \"data-starting-style:blur data-ending-style:blur\");\nconst itemBase = cn(\"group/menu-item relative flex cursor-pointer select-none items-center gap-1.5 rounded-(--menu-item-border-radius) py-1.5 px-2\", \"text-left\", \"text-shadow-2xs text-shadow-(color:--shadow-current-color)\", \"outline-2 -outline-offset-2 outline-transparent\", \"transition-colors duration-100 ease-in-out\", \"supports-[top:anchor(top)]:duration-50\", \"supports-[top:anchor(top)]:hover:duration-200\", \"supports-[top:anchor(top)]:data-highlighted:duration-200\", \"hover:bg-(--accent-background-color) hover:text-(--accent-text-color)\", \"data-highlighted:bg-(--accent-background-color) data-highlighted:text-(--accent-text-color)\", \"focus-visible:outline-(--focus-ring-color) focus-visible:outline-offset-2\");\nconst menuTokens = cn(\"[--menu-transition-duration:250ms]\", \"[--menu-max-height:--spacing(56)]\", \"[--menu-padding:--spacing(1)]\", \"[--menu-border-radius:--spacing(2.5)]\", \"[--menu-item-border-radius:calc(var(--menu-border-radius)_-_var(--menu-padding))]\", \"motion-reduce:[--menu-transition-duration:0ms]\");\nconst group = cn(\"flex flex-col gap-0.5\", \"[anchor-scope:--menu-item-highlight-anchor]\", \"supports-[top:anchor(top)]:before:absolute\", \"supports-[top:anchor(top)]:before:[position-anchor:--menu-item-highlight-anchor]\", \"supports-[top:anchor(top)]:before:[inset:anchor(inside)]\", \"supports-[top:anchor(top)]:before:[overflow-anchor:none]\", \"supports-[top:anchor(top)]:before:pointer-events-none\", \"supports-[top:anchor(top)]:before:bg-(--accent-background-color)\", \"supports-[top:anchor(top)]:before:rounded-(--menu-item-border-radius)\", \"supports-[top:anchor(top)]:before:transition-[inset]\", \"supports-[top:anchor(top)]:before:duration-100\", \"supports-[top:anchor(top)]:before:ease-in-out\", \"supports-[top:anchor(top)]:has-data-[highlighted=]:before:duration-0\");\nconst menuHostShell = cn(popup.popover, menuTokens, \"min-w-max max-w-(--media-popover-available-width,none) max-h-[min(var(--media-popover-available-height,var(--menu-max-height)),var(--menu-max-height))]\", \"bg-(--popover-background-color) [backdrop-filter:var(--popover-backdrop-filter)]\", \"shadow-[0_0_0_1px_var(--popover-border-color),0_4px_6px_-1px_oklch(0_0_0/0.1),0_2px_4px_-2px_oklch(0_0_0/0.1)]\", \"box-border rounded-(--menu-border-radius) p-(--menu-padding) overscroll-none\");\nconst menu = {\n\t/** Standalone menu popover host (audio playback rate, sandbox demos). */\n\troot: cn(menuHostShell, \"overflow-auto!\"),\n\t/** Settings menu host with nested submenu navigation. */\n\tsettings: cn(menuHostShell, \"[--popup-transition:var(--popup-base-transition),width_var(--popup-transition-timing-function)_var(--menu-transition-duration),height_var(--popup-transition-timing-function)_var(--menu-transition-duration)]\", \"data-starting-style:[--popup-transition:var(--popup-base-transition)]\", \"data-ending-style:[--popup-transition:var(--popup-base-transition)]\", \"min-w-48! w-(--media-menu-width) h-(--media-menu-height)\", \"[&>:not([data-submenu])]:translate-none [&>:not([data-submenu])]:transition-[translate,filter]\", \"[&>:not([data-submenu])]:duration-(--menu-transition-duration) [&>:not([data-submenu])]:ease-out\", \"[&>:not([data-submenu])]:will-change-[translate,filter]\", \"[&[data-submenu-expanded=true]>:not([data-submenu])]:-translate-x-full\", \"[&[data-submenu-expanded=true]>:not([data-submenu])]:blur\", \"[&[data-submenu-expanded]>:not([data-submenu])]:before:hidden\", \"overflow-hidden!\"),\n\tgroup,\n\titem: cn(itemBase, \"justify-between tabular-nums text-inherit\", \"supports-[top:anchor(top)]:data-highlighted:[anchor-name:--menu-item-highlight-anchor]\", \"supports-[top:anchor(top)]:data-highlighted:bg-transparent\", \"data-[availability=unavailable]:hidden data-[availability=unsupported]:hidden\", \"aria-disabled:pointer-events-none aria-disabled:cursor-not-allowed aria-disabled:opacity-50\"),\n\tseparator: \"my-1 border-b border-[oklch(1_0_0/0.1)]\",\n\ttier: \"pl-0.5 pt-px text-(length:--font-size-tiny) font-semibold leading-none text-current/70\",\n\tindicator: \"ml-auto -mr-1 shrink-0 opacity-0 group-aria-checked/menu-item:opacity-100\",\n\ticon: \"shrink-0 text-current/50 drop-shadow-[0_1px_0_var(--shadow-current-color)] group-hover/menu-item:text-inherit group-data-highlighted/menu-item:text-inherit\",\n\t/** Nested submenu panel. */\n\tsubmenuPanel,\n\tback: cn(itemBase, \"mb-0.5 w-full\"),\n\thint: \"ml-auto inline-flex min-w-0 items-center gap-1 pl-2 text-current/65\",\n\thintLabel: \"max-w-24 overflow-hidden text-ellipsis whitespace-nowrap\",\n\tchevron: \"size-3.5\",\n\tsettingsGroup: \"group/settings\",\n\tsettingsTrigger: \"group\",\n\tsettingsIcon: \"transition-transform duration-150 ease-in-out group-aria-expanded:rotate-90 motion-reduce:duration-0\"\n};\n//#endregion\nexport { menu };\n\n//# sourceMappingURL=menu.js.map"],"mappings":";;;AAGA,MAAM,eAAe,GAAG,+GAA+G,QAAQ,8HAA8H,iFAAiF,yEAAyE,2EAA2E,iDAAiD;AACniB,MAAM,WAAW,GAAG,iIAAiI,aAAa,8DAA8D,mDAAmD,8CAA8C,0CAA0C,iDAAiD,4DAA4D,yEAAyE,+FAA+F,2EAA2E;AAC3sB,MAAM,aAAa,GAAG,sCAAsC,qCAAqC,iCAAiC,yCAAyC,qFAAqF,gDAAgD;AAChT,MAAM,QAAQ,GAAG,yBAAyB,+CAA+C,8CAA8C,oFAAoF,4DAA4D,4DAA4D,yDAAyD,oEAAoE,yEAAyE,wDAAwD,kDAAkD,iDAAiD,sEAAsE;AAC1vB,MAAM,gBAAgB,GAAG,MAAM,SAAS,YAAY,2JAA2J,oFAAoF,kHAAkH,8EAA8E;AACne,MAAM,OAAO;;CAEZ,MAAM,GAAG,eAAe,gBAAgB;;CAExC,UAAU,GAAG,eAAe,kNAAkN,yEAAyE,uEAAuE,4DAA4D,kGAAkG,oGAAoG,2DAA2D,0EAA0E,6DAA6D,iEAAiE,kBAAkB;CACr5B;CACA,MAAM,GAAG,UAAU,6CAA6C,0FAA0F,8DAA8D,iFAAiF,6FAA6F;CACtY,WAAW;CACX,MAAM;CACN,WAAW;CACX,MAAM;;CAEN;CACA,MAAM,GAAG,UAAU,eAAe;CAClC,MAAM;CACN,WAAW;CACX,SAAS;CACT,eAAe;CACf,iBAAiB;CACjB,cAAc;AACf"}
+{"version":3,"file":"menu.js","names":[],"sources":["../../../../../../../../../skins/dist/default/minimal/tailwind/components/menu.js"],"sourcesContent":["import { popup } from \"./popup.js\";\nimport { cn } from \"@videojs/utils/style\";\n//#region src/minimal/tailwind/components/menu.ts\nconst submenuPanel = cn(\"absolute inset-x-0 top-0 [max-height:inherit] overflow-auto overscroll-none p-(--menu-padding) outline-none\", \"z-10\", \"translate-none transition-[translate,filter] duration-(--menu-transition-duration) ease-out\", \"data-starting-style:pointer-events-none data-ending-style:pointer-events-none\", \"data-starting-style:overflow-hidden data-ending-style:overflow-hidden\", \"data-starting-style:translate-x-full data-ending-style:translate-x-full\", \"data-starting-style:blur data-ending-style:blur\");\nconst itemBase = cn(\"group/menu-item relative flex cursor-pointer select-none items-center gap-1.5 rounded-(--menu-item-border-radius) py-1.5 px-2\", \"text-left\", \"text-shadow-2xs text-shadow-(color:--shadow-current-color)\", \"outline-2 -outline-offset-2 outline-transparent\", \"transition-colors duration-100 ease-in-out\", \"supports-[top:anchor(top)]:duration-50\", \"supports-[top:anchor(top)]:hover:duration-200\", \"supports-[top:anchor(top)]:data-highlighted:duration-200\", \"hover:bg-(--accent-background-color) hover:text-(--accent-text-color)\", \"data-highlighted:bg-(--accent-background-color) data-highlighted:text-(--accent-text-color)\", \"focus-visible:outline-(--focus-ring-color) focus-visible:outline-offset-2\");\nconst menuTokens = cn(\"[--menu-transition-duration:250ms]\", \"[--menu-max-height:--spacing(56)]\", \"[--menu-padding:--spacing(1)]\", \"[--menu-border-radius:--spacing(2.5)]\", \"[--menu-item-border-radius:calc(var(--menu-border-radius)_-_var(--menu-padding))]\", \"motion-reduce:[--menu-transition-duration:0ms]\");\nconst group = cn(\"flex flex-col gap-0.5\", \"[anchor-scope:--menu-item-highlight-anchor]\", \"supports-[top:anchor(top)]:before:absolute\", \"supports-[top:anchor(top)]:before:[position-anchor:--menu-item-highlight-anchor]\", \"supports-[top:anchor(top)]:before:[inset:anchor(inside)]\", \"supports-[top:anchor(top)]:before:[overflow-anchor:none]\", \"supports-[top:anchor(top)]:before:pointer-events-none\", \"supports-[top:anchor(top)]:before:bg-(--accent-background-color)\", \"supports-[top:anchor(top)]:before:rounded-(--menu-item-border-radius)\", \"supports-[top:anchor(top)]:before:transition-[inset]\", \"supports-[top:anchor(top)]:before:duration-100\", \"supports-[top:anchor(top)]:before:ease-in-out\", \"supports-[top:anchor(top)]:has-data-[highlighted=]:before:duration-0\");\nconst menuHostShell = cn(popup.popover, menuTokens, \"min-w-max max-w-(--media-popover-available-width,none) max-h-[min(var(--media-popover-available-height,var(--menu-max-height)),var(--menu-max-height))]\", \"bg-(--popover-background-color) [backdrop-filter:var(--popover-backdrop-filter)]\", \"shadow-[0_0_0_1px_var(--popover-border-color),0_4px_6px_-1px_oklch(0_0_0/0.1),0_2px_4px_-2px_oklch(0_0_0/0.1)]\", \"box-border rounded-(--menu-border-radius) p-(--menu-padding) overscroll-none\");\nconst menu = {\n\t/** Standalone menu popover host (audio playback rate, sandbox demos). */\n\troot: cn(menuHostShell, \"overflow-auto!\"),\n\t/** Settings menu host with nested submenu navigation. */\n\tsettings: cn(menuHostShell, \"[--popup-transition:var(--popup-base-transition),width_var(--popup-transition-timing-function)_var(--menu-transition-duration),height_var(--popup-transition-timing-function)_var(--menu-transition-duration)]\", \"data-starting-style:[--popup-transition:var(--popup-base-transition)]\", \"data-ending-style:[--popup-transition:var(--popup-base-transition)]\", \"min-w-48! w-(--media-menu-width) h-(--media-menu-height)\", \"[&>:not([data-submenu])]:translate-none [&>:not([data-submenu])]:transition-[translate,filter]\", \"[&>:not([data-submenu])]:duration-(--menu-transition-duration) [&>:not([data-submenu])]:ease-out\", \"[&[data-submenu-expanded=true]>:not([data-submenu])]:-translate-x-full\", \"[&[data-submenu-expanded=true]>:not([data-submenu])]:blur\", \"[&[data-submenu-expanded]>:not([data-submenu])]:before:hidden\", \"overflow-hidden!\"),\n\tgroup,\n\titem: cn(itemBase, \"justify-between tabular-nums text-inherit\", \"supports-[top:anchor(top)]:data-highlighted:[anchor-name:--menu-item-highlight-anchor]\", \"supports-[top:anchor(top)]:data-highlighted:bg-transparent\", \"data-[availability=unavailable]:hidden data-[availability=unsupported]:hidden\", \"aria-disabled:pointer-events-none aria-disabled:cursor-not-allowed aria-disabled:opacity-50\"),\n\tseparator: \"my-1 border-b border-[oklch(1_0_0/0.1)]\",\n\ttier: \"pl-0.5 pt-px text-(length:--font-size-tiny) font-semibold leading-none text-current/70\",\n\tindicator: \"ml-auto -mr-1 shrink-0 opacity-0 group-aria-checked/menu-item:opacity-100\",\n\ticon: \"shrink-0 text-current/50 drop-shadow-[0_1px_0_var(--shadow-current-color)] group-hover/menu-item:text-inherit group-data-highlighted/menu-item:text-inherit\",\n\t/** Nested submenu panel. */\n\tsubmenuPanel,\n\tback: cn(itemBase, \"mb-0.5 w-full\"),\n\thint: \"ml-auto inline-flex min-w-0 items-center gap-1 pl-2 text-current/65\",\n\thintLabel: \"max-w-24 overflow-hidden text-ellipsis whitespace-nowrap\",\n\tchevron: \"size-3.5\",\n\tsettingsGroup: \"group/settings\",\n\tsettingsTrigger: \"group\",\n\tsettingsIcon: \"transition-transform duration-150 ease-in-out group-aria-expanded:rotate-90 motion-reduce:duration-0\"\n};\n//#endregion\nexport { menu };\n\n//# sourceMappingURL=menu.js.map"],"mappings":";;;AAGA,MAAM,eAAe,GAAG,+GAA+G,QAAQ,+FAA+F,iFAAiF,yEAAyE,2EAA2E,iDAAiD;AACpgB,MAAM,WAAW,GAAG,iIAAiI,aAAa,8DAA8D,mDAAmD,8CAA8C,0CAA0C,iDAAiD,4DAA4D,yEAAyE,+FAA+F,2EAA2E;AAC3sB,MAAM,aAAa,GAAG,sCAAsC,qCAAqC,iCAAiC,yCAAyC,qFAAqF,gDAAgD;AAChT,MAAM,QAAQ,GAAG,yBAAyB,+CAA+C,8CAA8C,oFAAoF,4DAA4D,4DAA4D,yDAAyD,oEAAoE,yEAAyE,wDAAwD,kDAAkD,iDAAiD,sEAAsE;AAC1vB,MAAM,gBAAgB,GAAG,MAAM,SAAS,YAAY,2JAA2J,oFAAoF,kHAAkH,8EAA8E;AACne,MAAM,OAAO;;CAEZ,MAAM,GAAG,eAAe,gBAAgB;;CAExC,UAAU,GAAG,eAAe,kNAAkN,yEAAyE,uEAAuE,4DAA4D,kGAAkG,oGAAoG,0EAA0E,6DAA6D,iEAAiE,kBAAkB;CAC11B;CACA,MAAM,GAAG,UAAU,6CAA6C,0FAA0F,8DAA8D,iFAAiF,6FAA6F;CACtY,WAAW;CACX,MAAM;CACN,WAAW;CACX,MAAM;;CAEN;CACA,MAAM,GAAG,UAAU,eAAe;CAClC,MAAM;CACN,WAAW;CACX,SAAS;CACT,eAAe;CACf,iBAAiB;CACjB,cAAc;AACf"}

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

@@ -1,12 +1,6 @@
 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 ? [
-	"before:absolute before:inset-0 before:pointer-events-none",
-	"before:[background-image:var(--media-poster-placeholder,none)]",
-	"before:bg-no-repeat",
-	"before:[background-position:var(--media-object-position,center)]",
-	"before:[background-size:var(--media-object-fit,contain)]",
-	"before:[filter:blur(var(--media-poster-placeholder-blur,20px))]",
 	"[&_::slotted(img)]:absolute",
 	"[&_::slotted(img)]:inset-0",
 	"[&_::slotted(img)]:w-full",
@@ -21,7 +15,7 @@ const poster = (isShadowDOM) => cn("absolute inset-0 w-full h-full pointer-event
 	"[&_img]:[object-fit:var(--media-object-fit,contain)]",
 	"[&_img]:[object-position:var(--media-object-position,center)]",
 	"[&_img]:rounded-(--container-border-radius)"
-] : ["rounded-[inherit] [object-fit:var(--media-object-fit,contain)] [object-position:var(--media-object-position,center)]", "[&[data-visible]:not([data-loaded])]:opacity-0"]);
+] : "rounded-[inherit] [object-fit:var(--media-object-fit,contain)] [object-position:var(--media-object-position,center)]");
 //#endregion
 export { poster };
 

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

@@ -1 +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\"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:[filter:blur(var(--media-poster-placeholder-blur,20px))]\",\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-(--container-border-radius)\",\n\t\"[&_img]:absolute\",\n\t\"[&_img]:inset-0\",\n\t\"[&_img]:w-full\",\n\t\"[&_img]:h-full\",\n\t\"[&_img]:[object-fit:var(--media-object-fit,contain)]\",\n\t\"[&_img]:[object-position:var(--media-object-position,center)]\",\n\t\"[&_img]:rounded-(--container-border-radius)\"\n] : [\"rounded-[inherit] [object-fit:var(--media-object-fit,contain)] [object-position:var(--media-object-position,center)]\", \"[&[data-visible]:not([data-loaded])]:opacity-0\"]);\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;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACD,IAAI,CAAC,wHAAwH,gDAAgD,CAAC"}
+{"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-(--container-border-radius)\",\n\t\"[&_img]:absolute\",\n\t\"[&_img]:inset-0\",\n\t\"[&_img]:w-full\",\n\t\"[&_img]:h-full\",\n\t\"[&_img]:[object-fit:var(--media-object-fit,contain)]\",\n\t\"[&_img]:[object-position:var(--media-object-position,center)]\",\n\t\"[&_img]:rounded-(--container-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;CACA;CACA;CACA;CACA;CACA;CACA;AACD,IAAI,sHAAsH"}

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

@@ -34,20 +34,11 @@ const container = (isShadowDOM) => cn(container$1, "group/skin", "bg-black overf
 	"[&_video::-webkit-media-text-track-container]:scale-98",
 	"[&_video::-webkit-media-text-track-container]:z-1",
 	"[&_video::-webkit-media-text-track-container]:font-[inherit]"
-] : [], !isShadowDOM ? [
-	"before:absolute before:inset-0 before:pointer-events-none",
-	"before:[background-image:var(--media-poster-placeholder,none)]",
-	"before:bg-no-repeat",
-	"before:[background-position:var(--media-object-position,center)]",
-	"before:[background-size:var(--media-object-fit,contain)]",
-	"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]:[--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:5] [--base-boundary-offset:1]", "[--volume-mask:linear-gradient(to_right,transparent_10%,black_25%,black_100%)]", "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 controls = cn(controls$1, "absolute bottom-1 inset-x-1", "[--base-side-offset:5] [--base-boundary-offset:1]", "[--volume-mask:linear-gradient(to_right,transparent_10%,black_25%,black_100%)]", "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:transition-[translate,filter,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 volumeMaskTarget = cn("[mask-image:var(--volume-mask-image,none)]", "[mask-repeat:no-repeat]", "[mask-position:var(--volume-mask-position,100%_0)]", "[mask-size:var(--volume-mask-size,200%_100%)]", "[transition:mask-position_50ms_ease-out]");
 const buttonGroupStart = cn(buttonGroup, "flex-1 @2xl/media-root:flex-none");
 const buttonGroupEnd = cn(buttonGroup, volumeMaskTarget, "flex-1 justify-end @2xl/media-root:flex-none", "group-has-[[data-volume-level][aria-expanded=true]]/controls:@max-2xl/media-root:[--volume-mask-image:var(--volume-mask)]", "group-has-[[data-volume-level][aria-expanded=true]]/controls:@max-2xl/media-root:[--volume-mask-position:0_0]", "group-has-[[data-volume-level][aria-expanded=true]]/controls:@max-2xl/media-root:[--volume-mask-size:400%_100%]");

package/dist/default/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 { 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))]\", \"**:[--focus-ring-color: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]\", \"[--volume-mask:linear-gradient(to_right,transparent_10%,black_25%,black_100%)]\", \"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 volumeMaskTarget = cn(\"[mask-image:var(--volume-mask-image,none)]\", \"[mask-repeat:no-repeat]\", \"[mask-position:var(--volume-mask-position,100%_0)]\", \"[mask-size:var(--volume-mask-size,200%_100%)]\", \"[transition:mask-position_50ms_ease-out]\");\nconst buttonGroupStart = cn(buttonGroup, \"flex-1 @2xl/media-root:flex-none\");\nconst buttonGroupEnd = cn(buttonGroup, volumeMaskTarget, \"flex-1 justify-end @2xl/media-root:flex-none\", \"group-has-[[data-volume-level][aria-expanded=true]]/controls:@max-2xl/media-root:[--volume-mask-image:var(--volume-mask)]\", \"group-has-[[data-volume-level][aria-expanded=true]]/controls:@max-2xl/media-root:[--volume-mask-position:0_0]\", \"group-has-[[data-volume-level][aria-expanded=true]]/controls:@max-2xl/media-root:[--volume-mask-size:400%_100%]\");\nconst spacer = \"grow\";\nconst time = {\n\t...time$1,\n\tcontrols: cn(time$1.controls, volumeMaskTarget, \"[--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]\", \"group-has-[[data-volume-level][aria-expanded=true]]/controls:@2xl/media-root:[--volume-mask-image:var(--volume-mask)]\", \"group-has-[[data-volume-level][aria-expanded=true]]/controls:@2xl/media-root:[--volume-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-size)/2),var(--media-slider-pointer),calc(100%-var(--max-size)/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\", \"@max-2xl/media-root:[--media-popover-side-offset:--spacing(3)]\")\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,wCAAwC,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;CACzxE;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,kFAAkF,2DAA2D,mBAAmB,+BAA+B,gDAAgD,0DAA0D,8DAA8D,uDAAuD,sDAAsD,kDAAkD,iDAAiD,mEAAmE,iDAAiD,qDAAqD,2GAA2G;AAC/7B,MAAM,mBAAmB,GAAG,8CAA8C,2BAA2B,sDAAsD,iDAAiD,0CAA0C;AACtP,MAAM,mBAAmB,GAAG,aAAa,kCAAkC;AAC3E,MAAM,iBAAiB,GAAG,aAAa,kBAAkB,gDAAgD,6HAA6H,iHAAiH,iHAAiH;AACxc,MAAM,SAAS;AACf,MAAM,OAAO;CACZ,GAAG;CACH,UAAU,GAAG,OAAO,UAAU,kBAAkB,+EAA+E,oJAAoJ,yHAAyH,2GAA2G;AACxf;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,qIAAqI,8DAA8D;AAC7Q;AACA,MAAM,QAAQ;CACb,GAAG;CACH,QAAQ,GAAG,QAAQ,SAAS,sBAAsB,gEAAgE;AACnH;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))]\", \"**:[--focus-ring-color: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] : [], \"[&: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]\", \"[--volume-mask:linear-gradient(to_right,transparent_10%,black_25%,black_100%)]\", \"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:transition-[translate,filter,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 volumeMaskTarget = cn(\"[mask-image:var(--volume-mask-image,none)]\", \"[mask-repeat:no-repeat]\", \"[mask-position:var(--volume-mask-position,100%_0)]\", \"[mask-size:var(--volume-mask-size,200%_100%)]\", \"[transition:mask-position_50ms_ease-out]\");\nconst buttonGroupStart = cn(buttonGroup, \"flex-1 @2xl/media-root:flex-none\");\nconst buttonGroupEnd = cn(buttonGroup, volumeMaskTarget, \"flex-1 justify-end @2xl/media-root:flex-none\", \"group-has-[[data-volume-level][aria-expanded=true]]/controls:@max-2xl/media-root:[--volume-mask-image:var(--volume-mask)]\", \"group-has-[[data-volume-level][aria-expanded=true]]/controls:@max-2xl/media-root:[--volume-mask-position:0_0]\", \"group-has-[[data-volume-level][aria-expanded=true]]/controls:@max-2xl/media-root:[--volume-mask-size:400%_100%]\");\nconst spacer = \"grow\";\nconst time = {\n\t...time$1,\n\tcontrols: cn(time$1.controls, volumeMaskTarget, \"[--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]\", \"group-has-[[data-volume-level][aria-expanded=true]]/controls:@2xl/media-root:[--volume-mask-image:var(--volume-mask)]\", \"group-has-[[data-volume-level][aria-expanded=true]]/controls:@2xl/media-root:[--volume-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-size)/2),var(--media-slider-pointer),calc(100%-var(--max-size)/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\", \"@max-2xl/media-root:[--media-popover-side-offset:--spacing(3)]\")\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,wCAAwC,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;CACzxE;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,kFAAkF,2DAA2D,mBAAmB,+BAA+B,gDAAgD,0DAA0D,8DAA8D,sDAAsD,iDAAiD,mEAAmE,iDAAiD,qDAAqD,2GAA2G;AACt1B,MAAM,mBAAmB,GAAG,8CAA8C,2BAA2B,sDAAsD,iDAAiD,0CAA0C;AACtP,MAAM,mBAAmB,GAAG,aAAa,kCAAkC;AAC3E,MAAM,iBAAiB,GAAG,aAAa,kBAAkB,gDAAgD,6HAA6H,iHAAiH,iHAAiH;AACxc,MAAM,SAAS;AACf,MAAM,OAAO;CACZ,GAAG;CACH,UAAU,GAAG,OAAO,UAAU,kBAAkB,+EAA+E,oJAAoJ,yHAAyH,2GAA2G;AACxf;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,qIAAqI,8DAA8D;AAC7Q;AACA,MAAM,QAAQ;CACb,GAAG;CACH,QAAQ,GAAG,QAAQ,SAAS,sBAAsB,gEAAgE;AACnH;AACA,MAAM,OAAO;CACZ,GAAG;CACH,MAAM,OAAO;CACb,UAAU,OAAO;AAClB"}

package/dist/default/ui/poster/poster-element.js

@@ -60,9 +60,6 @@ var PosterElement = class extends MediaElement {
 	static {
 		this.tagName = "media-poster";
 	}
-	static get observedAttributes() {
-		return [...super.observedAttributes, "placeholdersrc"];
-	}
 	#core = new PosterCore();
 	#children = new MutationObserver(() => this.requestUpdate());
 	#playback = new PlayerController(this, playerContext, selectPlayback);
@@ -85,11 +82,6 @@ var PosterElement = class extends MediaElement {
 			subtree: true
 		});
 	}
-	attributeChangedCallback(attr, oldValue, newValue) {
-		super.attributeChangedCallback(attr, oldValue, newValue);
-		if (attr === "placeholdersrc") if (newValue) this.style.setProperty("--media-poster-placeholder", `url(${newValue})`);
-		else this.style.removeProperty("--media-poster-placeholder");
-	}
 	disconnectedCallback() {
 		super.disconnectedCallback();
 		this.#adopt(null);

package/dist/default/ui/poster/poster-element.js.map

@@ -1 +1 @@
-{"version":3,"file":"poster-element.js","names":["#core","#children","#playback","#metadata","#disconnect","#adopt","#loadState","#image","#imageLoadState","#applySource","#owned","#imageEvents"],"sources":["../../../../src/ui/poster/poster-element.ts"],"sourcesContent":["import { PosterCore, PosterDataAttrs, type PosterImageLoadState } from '@videojs/core';\nimport { applyStateDataAttrs, logMissingFeature, selectMetadata, selectPlayback } from '@videojs/core/dom';\nimport type { PropertyValues } from '@videojs/element';\n\nimport { playerContext } from '../../player/context';\nimport { PlayerController } from '../../player/player-controller';\nimport { MediaElement } from '../media-element';\n\n/** What an element composes: whatever fills a slot, or the element's own children. */\nfunction composedChildren(element: Element): Element[] {\n  if (element instanceof HTMLSlotElement) {\n    const assigned = element.assignedElements();\n    if (assigned.length > 0) return assigned;\n  }\n\n  return [...element.children];\n}\n\n/**\n * The first image an element composes. A skin forwards its own\n * `<slot name=\"poster\">` in, so the image is a slot or two down and may be\n * wrapped in a `<picture>` or a framework image component.\n */\nfunction findImage(element: Element): HTMLImageElement | null {\n  for (const child of composedChildren(element)) {\n    if (child instanceof HTMLImageElement) return child;\n\n    const nested = findImage(child);\n    if (nested) return nested;\n  }\n\n  return null;\n}\n\n/**\n * Whether anything already points this image somewhere, which answers both\n * whether the author owns the source and whether there is a download to wait\n * for. A `<source>` counts: inside a `<picture>` it can win over the `src`.\n */\nfunction hasSource(img: HTMLImageElement): boolean {\n  if (img.hasAttribute('src') || img.hasAttribute('srcset')) return true;\n\n  const parent = img.parentElement;\n  return parent?.localName === 'picture' && parent.querySelector('source') !== null;\n}\n\n/**\n * Whether `complete` on this image describes a request. It is also true for one\n * that omits both `src` and `srcset`, whatever a parent `<picture>` is fetching\n * on its behalf, so only an image sourced from its own attributes can be read.\n */\nfunction hasOwnSource(img: HTMLImageElement): boolean {\n  return !!img.getAttribute('src') || img.hasAttribute('srcset');\n}\n\n/** How the current source is faring. */\ntype ImageLoadState = 'pending' | 'loaded' | 'error';\n\n/**\n * `<media-poster>` — sets `src` on a poster image it does not own.\n *\n * The image is a child, as in `<picture>`, but sourcing runs the other way\n * around: `<picture>` treats the `src` on its `<img>` as the fallback, while\n * here an image with no source of its own is the one this element fills in.\n * Give the child a `src`, a `srcset`, or `<source>` candidates and it is yours,\n * left alone.\n *\n * Renders no image of its own, so include one:\n * `<media-poster><img alt=\"\"></media-poster>`. Inside a skin, an\n * `<img slot=\"poster\">` of yours replaces the one the skin carries.\n */\nexport class PosterElement extends MediaElement {\n  static readonly tagName = 'media-poster';\n\n  static get observedAttributes(): string[] {\n    // biome-ignore lint/complexity/noThisInStatic: intentional use of super\n    return [...super.observedAttributes, 'placeholdersrc'];\n  }\n\n  readonly #core = new PosterCore();\n  readonly #children = new MutationObserver(() => this.requestUpdate());\n\n  readonly #playback = new PlayerController(this, playerContext, selectPlayback);\n  readonly #metadata = new PlayerController(this, playerContext, selectMetadata);\n\n  #image: HTMLImageElement | null = null;\n  /** Whether `#image` had no source of its own when it became active. */\n  #owned = false;\n  #imageLoadState: ImageLoadState = 'pending';\n\n  #imageEvents: AbortController | null = null;\n  #disconnect: AbortController | null = null;\n  #warnedMissingImage = false;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    if (this.destroyed) return;\n\n    this.#disconnect = new AbortController();\n    const { signal } = this.#disconnect;\n\n    // Two ways the image can change: a skin's forwarding slot fills or empties,\n    // which bubbles here, or a child is added or removed, which announces nothing.\n    this.addEventListener('slotchange', () => this.requestUpdate(), { signal });\n    this.#children.observe(this, { childList: true, subtree: true });\n\n    if (__DEV__ && !this.#playback.value) {\n      logMissingFeature(this.localName, this.#playback.displayName ?? 'playback');\n    }\n  }\n\n  override attributeChangedCallback(attr: string, oldValue: string | null, newValue: string | null): void {\n    super.attributeChangedCallback(attr, oldValue, newValue);\n\n    if (attr === 'placeholdersrc') {\n      if (newValue) {\n        this.style.setProperty('--media-poster-placeholder', `url(${newValue})`);\n      } else {\n        this.style.removeProperty('--media-poster-placeholder');\n      }\n    }\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n\n    this.#adopt(null);\n    this.#children.disconnect();\n    this.#disconnect?.abort();\n    this.#disconnect = null;\n  }\n\n  get #loadState(): PosterImageLoadState {\n    if (!this.#image || !hasSource(this.#image)) return 'none';\n    return this.#imageLoadState === 'pending' ? 'loading' : this.#imageLoadState;\n  }\n\n  protected override update(changed: PropertyValues): void {\n    super.update(changed);\n\n    const playback = this.#playback.value;\n    if (!playback) return;\n\n    // `metadata` is optional: without it nothing resolves a URL, and this stays\n    // a visibility wrapper around whatever the author supplied.\n    this.#core.setMedia({\n      started: playback.started,\n      poster: this.#metadata.value?.poster ?? '',\n    });\n\n    const { src } = this.#core.getState();\n\n    this.#adopt(findImage(this));\n    this.#applySource(src);\n\n    this.#core.setImageLoadState(this.#loadState);\n    applyStateDataAttrs(this, this.#core.getState(), PosterDataAttrs);\n  }\n\n  /**\n   * Ownership is settled once, when an image becomes active: after the first fill\n   * the `src` we set would itself look authored. Re-slot an image with a source\n   * to hand it back, the way React decides a field is controlled at mount.\n   */\n  #adopt(next: HTMLImageElement | null): void {\n    if (next === this.#image) return;\n\n    // An image that steps aside keeps downloading whatever we pointed it at.\n    if (this.#owned) this.#image?.removeAttribute('src');\n    this.#imageEvents?.abort();\n    this.#imageEvents = null;\n\n    this.#image = next;\n    this.#owned = next !== null && !hasSource(next);\n    this.#imageLoadState = 'pending';\n\n    if (!next) return;\n\n    // An image that finished before we started listening never fires again, so\n    // its load state has to be read off it. Decoded pixels stand on their own;\n    // the absence of them only means failure once `complete` can be trusted.\n    if (next.naturalWidth > 0) this.#imageLoadState = 'loaded';\n    else if (next.complete && hasOwnSource(next)) this.#imageLoadState = 'error';\n\n    this.#imageEvents = new AbortController();\n    const { signal } = this.#imageEvents;\n    const settle = (loadState: ImageLoadState) => () => {\n      this.#imageLoadState = loadState;\n      this.requestUpdate();\n    };\n\n    next.addEventListener('load', settle('loaded'), { signal });\n    next.addEventListener('error', settle('error'), { signal });\n  }\n\n  #applySource(src: string): void {\n    const img = this.#image;\n\n    if (!img) {\n      if (__DEV__ && src && !this.#warnedMissingImage) {\n        this.#warnedMissingImage = true;\n        console.warn(\n          `<${this.localName}> resolved a poster but has no image to put it in. ` +\n            `Add one as a child: <${this.localName}><img alt=\"\"></${this.localName}>`\n        );\n      }\n      return;\n    }\n\n    if (!this.#owned) return;\n\n    if (!src) {\n      this.#imageLoadState = 'pending';\n      img.removeAttribute('src');\n    } else if (img.getAttribute('src') !== src) {\n      // Reset before the write, not after: how the last source fared says\n      // nothing about this one, and the write itself can settle it.\n      this.#imageLoadState = 'pending';\n      img.setAttribute('src', src);\n    }\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"poster-element.js","names":["#core","#children","#playback","#metadata","#disconnect","#adopt","#loadState","#image","#imageLoadState","#applySource","#owned","#imageEvents"],"sources":["../../../../src/ui/poster/poster-element.ts"],"sourcesContent":["import { PosterCore, PosterDataAttrs, type PosterImageLoadState } from '@videojs/core';\nimport { applyStateDataAttrs, logMissingFeature, selectMetadata, selectPlayback } from '@videojs/core/dom';\nimport type { PropertyValues } from '@videojs/element';\n\nimport { playerContext } from '../../player/context';\nimport { PlayerController } from '../../player/player-controller';\nimport { MediaElement } from '../media-element';\n\n/** What an element composes: whatever fills a slot, or the element's own children. */\nfunction composedChildren(element: Element): Element[] {\n  if (element instanceof HTMLSlotElement) {\n    const assigned = element.assignedElements();\n    if (assigned.length > 0) return assigned;\n  }\n\n  return [...element.children];\n}\n\n/**\n * The first image an element composes. A skin forwards its own\n * `<slot name=\"poster\">` in, so the image is a slot or two down and may be\n * wrapped in a `<picture>` or a framework image component.\n */\nfunction findImage(element: Element): HTMLImageElement | null {\n  for (const child of composedChildren(element)) {\n    if (child instanceof HTMLImageElement) return child;\n\n    const nested = findImage(child);\n    if (nested) return nested;\n  }\n\n  return null;\n}\n\n/**\n * Whether anything already points this image somewhere, which answers both\n * whether the author owns the source and whether there is a download to wait\n * for. A `<source>` counts: inside a `<picture>` it can win over the `src`.\n */\nfunction hasSource(img: HTMLImageElement): boolean {\n  if (img.hasAttribute('src') || img.hasAttribute('srcset')) return true;\n\n  const parent = img.parentElement;\n  return parent?.localName === 'picture' && parent.querySelector('source') !== null;\n}\n\n/**\n * Whether `complete` on this image describes a request. It is also true for one\n * that omits both `src` and `srcset`, whatever a parent `<picture>` is fetching\n * on its behalf, so only an image sourced from its own attributes can be read.\n */\nfunction hasOwnSource(img: HTMLImageElement): boolean {\n  return !!img.getAttribute('src') || img.hasAttribute('srcset');\n}\n\n/** How the current source is faring. */\ntype ImageLoadState = 'pending' | 'loaded' | 'error';\n\n/**\n * `<media-poster>` — sets `src` on a poster image it does not own.\n *\n * The image is a child, as in `<picture>`, but sourcing runs the other way\n * around: `<picture>` treats the `src` on its `<img>` as the fallback, while\n * here an image with no source of its own is the one this element fills in.\n * Give the child a `src`, a `srcset`, or `<source>` candidates and it is yours,\n * left alone.\n *\n * Renders no image of its own, so include one:\n * `<media-poster><img alt=\"\"></media-poster>`. Inside a skin, an\n * `<img slot=\"poster\">` of yours replaces the one the skin carries.\n */\nexport class PosterElement extends MediaElement {\n  static readonly tagName = 'media-poster';\n\n  readonly #core = new PosterCore();\n  readonly #children = new MutationObserver(() => this.requestUpdate());\n\n  readonly #playback = new PlayerController(this, playerContext, selectPlayback);\n  readonly #metadata = new PlayerController(this, playerContext, selectMetadata);\n\n  #image: HTMLImageElement | null = null;\n  /** Whether `#image` had no source of its own when it became active. */\n  #owned = false;\n  #imageLoadState: ImageLoadState = 'pending';\n\n  #imageEvents: AbortController | null = null;\n  #disconnect: AbortController | null = null;\n  #warnedMissingImage = false;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    if (this.destroyed) return;\n\n    this.#disconnect = new AbortController();\n    const { signal } = this.#disconnect;\n\n    // Two ways the image can change: a skin's forwarding slot fills or empties,\n    // which bubbles here, or a child is added or removed, which announces nothing.\n    this.addEventListener('slotchange', () => this.requestUpdate(), { signal });\n    this.#children.observe(this, { childList: true, subtree: true });\n\n    if (__DEV__ && !this.#playback.value) {\n      logMissingFeature(this.localName, this.#playback.displayName ?? 'playback');\n    }\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n\n    this.#adopt(null);\n    this.#children.disconnect();\n    this.#disconnect?.abort();\n    this.#disconnect = null;\n  }\n\n  get #loadState(): PosterImageLoadState {\n    if (!this.#image || !hasSource(this.#image)) return 'none';\n    return this.#imageLoadState === 'pending' ? 'loading' : this.#imageLoadState;\n  }\n\n  protected override update(changed: PropertyValues): void {\n    super.update(changed);\n\n    const playback = this.#playback.value;\n    if (!playback) return;\n\n    // `metadata` is optional: without it nothing resolves a URL, and this stays\n    // a visibility wrapper around whatever the author supplied.\n    this.#core.setMedia({\n      started: playback.started,\n      poster: this.#metadata.value?.poster ?? '',\n    });\n\n    const { src } = this.#core.getState();\n\n    this.#adopt(findImage(this));\n    this.#applySource(src);\n\n    this.#core.setImageLoadState(this.#loadState);\n    applyStateDataAttrs(this, this.#core.getState(), PosterDataAttrs);\n  }\n\n  /**\n   * Ownership is settled once, when an image becomes active: after the first fill\n   * the `src` we set would itself look authored. Re-slot an image with a source\n   * to hand it back, the way React decides a field is controlled at mount.\n   */\n  #adopt(next: HTMLImageElement | null): void {\n    if (next === this.#image) return;\n\n    // An image that steps aside keeps downloading whatever we pointed it at.\n    if (this.#owned) this.#image?.removeAttribute('src');\n    this.#imageEvents?.abort();\n    this.#imageEvents = null;\n\n    this.#image = next;\n    this.#owned = next !== null && !hasSource(next);\n    this.#imageLoadState = 'pending';\n\n    if (!next) return;\n\n    // An image that finished before we started listening never fires again, so\n    // its load state has to be read off it. Decoded pixels stand on their own;\n    // the absence of them only means failure once `complete` can be trusted.\n    if (next.naturalWidth > 0) this.#imageLoadState = 'loaded';\n    else if (next.complete && hasOwnSource(next)) this.#imageLoadState = 'error';\n\n    this.#imageEvents = new AbortController();\n    const { signal } = this.#imageEvents;\n    const settle = (loadState: ImageLoadState) => () => {\n      this.#imageLoadState = loadState;\n      this.requestUpdate();\n    };\n\n    next.addEventListener('load', settle('loaded'), { signal });\n    next.addEventListener('error', settle('error'), { signal });\n  }\n\n  #applySource(src: string): void {\n    const img = this.#image;\n\n    if (!img) {\n      if (__DEV__ && src && !this.#warnedMissingImage) {\n        this.#warnedMissingImage = true;\n        console.warn(\n          `<${this.localName}> resolved a poster but has no image to put it in. ` +\n            `Add one as a child: <${this.localName}><img alt=\"\"></${this.localName}>`\n        );\n      }\n      return;\n    }\n\n    if (!this.#owned) return;\n\n    if (!src) {\n      this.#imageLoadState = 'pending';\n      img.removeAttribute('src');\n    } else if (img.getAttribute('src') !== src) {\n      // Reset before the write, not after: how the last source fared says\n      // nothing about this one, and the write itself can settle it.\n      this.#imageLoadState = 'pending';\n      img.setAttribute('src', src);\n    }\n  }\n}\n"],"mappings":"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"}

package/dist/default/ui/thumbnail/thumbnail-element.js

@@ -2,6 +2,7 @@ import { playerContext } from "../../player/context.js";
 import { MediaElement } from "../media-element.js";
 import { PlayerController } from "../../player/player-controller.js";
 import { applyElementProps, applyStateDataAttrs, createThumbnail, selectTextTrack } from "@videojs/core/dom";
+import { isNull, isUndefined } from "@videojs/utils/predicate";
 import { ThumbnailCore, ThumbnailDataAttrs, mapCuesToThumbnails } from "@videojs/core";
 //#region src/ui/thumbnail/thumbnail-element.ts
 const SHADOW_CSS = `\
@@ -84,17 +85,15 @@ var ThumbnailElement = class extends MediaElement {
 	}
 	update(changed) {
 		super.update(changed);
+		const textTrack = this.#textTracks.value;
 		if (this.#externalThumbnails) this.#thumbnails = this.#externalThumbnails;
-		else {
-			const textTrack = this.#textTracks.value;
-			if (textTrack !== this.#lastTextTrack) {
-				this.#lastTextTrack = textTrack;
-				this.#thumbnails = textTrack && textTrack.thumbnailCues.length > 0 ? mapCuesToThumbnails(textTrack.thumbnailCues, textTrack.thumbnailTrackSrc ?? void 0) : [];
-			}
+		else if (textTrack !== this.#lastTextTrack) {
+			this.#lastTextTrack = textTrack;
+			this.#thumbnails = textTrack && textTrack.thumbnailCues.length > 0 ? mapCuesToThumbnails(textTrack.thumbnailCues, textTrack.thumbnailTrackSrc ?? void 0) : [];
 		}
 		const thumbnail = this.#core.findActiveThumbnail(this.#thumbnails, this.time);
 		applyElementProps(this.#img, {
-			crossorigin: this.crossOrigin || void 0,
+			crossorigin: this.#resolveCrossOrigin(textTrack),
 			loading: this.loading,
 			fetchpriority: this.fetchPriority
 		});
@@ -118,6 +117,22 @@ var ThumbnailElement = class extends MediaElement {
 			if (result) this.#applyResize(result);
 		}
 	}
+	/**
+	* Leaving `crossOrigin` unset means "follow the media element", so thumbnails
+	* keep working on a CORS-enabled player without a skin having to thread an
+	* attribute through. `null` opts out and fetches the sprites no-CORS, which is
+	* also what removing the attribute produces. A bare `crossorigin` is passed
+	* straight through, since the CORS-settings attribute reads it as Anonymous.
+	*
+	* Only the `<track>` path inherits: `thumbnails` set directly may point at a
+	* host that has nothing to do with the media element.
+	*/
+	#resolveCrossOrigin(textTrack) {
+		if (isNull(this.crossOrigin)) return void 0;
+		if (!isUndefined(this.crossOrigin)) return this.crossOrigin;
+		if (this.#externalThumbnails) return void 0;
+		return textTrack?.thumbnailTrackCrossOrigin ?? void 0;
+	}
 	#applyResize(result) {
 		this.style.width = `${result.containerWidth}px`;
 		this.style.height = `${result.containerHeight}px`;

package/dist/default/ui/thumbnail/thumbnail-element.js.map

@@ -1 +1 @@
-{"version":3,"file":"thumbnail-element.js","names":["#core","#img","#textTracks","#externalThumbnails","#api","#thumbnails","#lastTextTrack","#resetStyles","#applyResize"],"sources":["../../../../src/ui/thumbnail/thumbnail-element.ts"],"sourcesContent":["import {\n  mapCuesToThumbnails,\n  ThumbnailCore,\n  ThumbnailDataAttrs,\n  type ThumbnailImage,\n  type ThumbnailResizeResult,\n} from '@videojs/core';\nimport type { ThumbnailApi } from '@videojs/core/dom';\nimport { applyElementProps, applyStateDataAttrs, createThumbnail, selectTextTrack } from '@videojs/core/dom';\nimport type { PropertyDeclarationMap, PropertyValues } from '@videojs/element';\nimport type { MediaTextTrackState } from '@videojs/media';\n\nimport { playerContext } from '../../player/context';\nimport { PlayerController } from '../../player/player-controller';\nimport { MediaElement } from '../media-element';\n\nconst SHADOW_CSS = `\\\n:host {\n  display: inline-block;\n  overflow: hidden;\n}\nimg {\n  display: block;\n}`;\n\nexport class ThumbnailElement extends MediaElement {\n  static readonly tagName = 'media-thumbnail';\n\n  static override properties = {\n    time: { type: Number },\n    crossOrigin: { type: String, attribute: 'crossorigin' },\n    loading: { type: String },\n    fetchPriority: { type: String, attribute: 'fetchpriority' },\n  } satisfies PropertyDeclarationMap<keyof ThumbnailCore.Props>;\n\n  time = 0;\n  crossOrigin: ThumbnailCore.Props['crossOrigin'];\n  loading: ThumbnailCore.Props['loading'];\n  fetchPriority: ThumbnailCore.Props['fetchPriority'];\n\n  readonly #core = new ThumbnailCore();\n  readonly #img = document.createElement('img');\n  readonly #textTracks = new PlayerController(this, playerContext, selectTextTrack);\n\n  #thumbnails: ThumbnailImage[] = [];\n  #externalThumbnails: ThumbnailImage[] | undefined;\n  #lastTextTrack: MediaTextTrackState | undefined;\n  #api: ThumbnailApi | null = null;\n\n  constructor() {\n    super();\n\n    const shadow = this.attachShadow({ mode: 'open' });\n\n    const style = document.createElement('style');\n    style.textContent = SHADOW_CSS;\n    shadow.appendChild(style);\n\n    this.#img.alt = '';\n    this.#img.setAttribute('part', 'img');\n    this.#img.setAttribute('aria-hidden', 'true');\n    this.#img.setAttribute('decoding', 'async');\n    shadow.appendChild(this.#img);\n  }\n\n  /**\n   * Set thumbnail images directly, bypassing the automatic `<track>` detection.\n   * When set, this takes priority over the text track path.\n   */\n  get thumbnails(): ThumbnailImage[] | undefined {\n    return this.#externalThumbnails;\n  }\n\n  set thumbnails(value: ThumbnailImage[] | undefined) {\n    this.#externalThumbnails = value;\n    this.requestUpdate();\n  }\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    if (this.destroyed) return;\n\n    this.#api = createThumbnail({\n      getContainer: () => this,\n      getImg: () => this.#img,\n      onStateChange: () => this.requestUpdate(),\n    });\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n  }\n\n  override destroyCallback(): void {\n    this.#api?.destroy();\n    super.destroyCallback();\n  }\n\n  protected override update(changed: PropertyValues): void {\n    super.update(changed);\n\n    // Resolve thumbnails: external prop takes priority over auto <track> path.\n    if (this.#externalThumbnails) {\n      this.#thumbnails = this.#externalThumbnails;\n    } else {\n      const textTrack = this.#textTracks.value;\n\n      if (textTrack !== this.#lastTextTrack) {\n        this.#lastTextTrack = textTrack;\n        this.#thumbnails =\n          textTrack && textTrack.thumbnailCues.length > 0\n            ? mapCuesToThumbnails(textTrack.thumbnailCues, textTrack.thumbnailTrackSrc ?? undefined)\n            : [];\n      }\n    }\n\n    const thumbnail = this.#core.findActiveThumbnail(this.#thumbnails, this.time);\n\n    // Sync img attributes from element properties.\n    applyElementProps(this.#img, {\n      crossorigin: this.crossOrigin || undefined,\n      loading: this.loading,\n      fetchpriority: this.fetchPriority,\n    });\n\n    // Track src changes via the thumbnail API.\n    this.#api?.updateSrc(thumbnail?.url);\n\n    if (!thumbnail) {\n      this.#img.removeAttribute('src');\n      this.#resetStyles();\n\n      const state = this.#core.getState(false, false, undefined);\n      applyElementProps(this, this.#core.getAttrs(state));\n      applyStateDataAttrs(this, state, ThumbnailDataAttrs);\n      return;\n    }\n\n    // Set the img src directly (imperative DOM).\n    if (this.#img.getAttribute('src') !== thumbnail.url) {\n      this.#img.src = thumbnail.url;\n    }\n\n    const api = this.#api;\n    const state = this.#core.getState(api?.loading ?? false, api?.error ?? false, thumbnail);\n    applyElementProps(this, this.#core.getAttrs(state));\n    applyStateDataAttrs(this, state, ThumbnailDataAttrs);\n\n    if (api?.naturalWidth && api.naturalHeight) {\n      const constraints = api.readConstraints();\n      const result = this.#core.resize(thumbnail, api.naturalWidth, api.naturalHeight, constraints);\n\n      if (result) {\n        this.#applyResize(result);\n      }\n    }\n  }\n\n  #applyResize(result: ThumbnailResizeResult): void {\n    this.style.width = `${result.containerWidth}px`;\n    this.style.height = `${result.containerHeight}px`;\n\n    const imgStyle = this.#img.style;\n    imgStyle.width = `${result.imageWidth}px`;\n    imgStyle.height = `${result.imageHeight}px`;\n    imgStyle.maxWidth = 'none';\n    imgStyle.transform =\n      result.offsetX || result.offsetY ? `translate(-${result.offsetX}px, -${result.offsetY}px)` : '';\n  }\n\n  #resetStyles(): void {\n    this.style.width = '';\n    this.style.height = '';\n\n    const imgStyle = this.#img.style;\n    imgStyle.width = '';\n    imgStyle.height = '';\n    imgStyle.maxWidth = '';\n    imgStyle.transform = '';\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"thumbnail-element.js","names":["#core","#img","#textTracks","#externalThumbnails","#api","#thumbnails","#lastTextTrack","#resolveCrossOrigin","#resetStyles","#applyResize"],"sources":["../../../../src/ui/thumbnail/thumbnail-element.ts"],"sourcesContent":["import {\n  mapCuesToThumbnails,\n  ThumbnailCore,\n  ThumbnailDataAttrs,\n  type ThumbnailImage,\n  type ThumbnailResizeResult,\n} from '@videojs/core';\nimport type { ThumbnailApi } from '@videojs/core/dom';\nimport { applyElementProps, applyStateDataAttrs, createThumbnail, selectTextTrack } from '@videojs/core/dom';\nimport type { PropertyDeclarationMap, PropertyValues } from '@videojs/element';\nimport type { MediaTextTrackState } from '@videojs/media';\nimport { isNull, isUndefined } from '@videojs/utils/predicate';\n\nimport { playerContext } from '../../player/context';\nimport { PlayerController } from '../../player/player-controller';\nimport { MediaElement } from '../media-element';\n\nconst SHADOW_CSS = `\\\n:host {\n  display: inline-block;\n  overflow: hidden;\n}\nimg {\n  display: block;\n}`;\n\nexport class ThumbnailElement extends MediaElement {\n  static readonly tagName = 'media-thumbnail';\n\n  static override properties = {\n    time: { type: Number },\n    crossOrigin: { type: String, attribute: 'crossorigin' },\n    loading: { type: String },\n    fetchPriority: { type: String, attribute: 'fetchpriority' },\n  } satisfies PropertyDeclarationMap<keyof ThumbnailCore.Props>;\n\n  time = 0;\n  crossOrigin: ThumbnailCore.Props['crossOrigin'];\n  loading: ThumbnailCore.Props['loading'];\n  fetchPriority: ThumbnailCore.Props['fetchPriority'];\n\n  readonly #core = new ThumbnailCore();\n  readonly #img = document.createElement('img');\n  readonly #textTracks = new PlayerController(this, playerContext, selectTextTrack);\n\n  #thumbnails: ThumbnailImage[] = [];\n  #externalThumbnails: ThumbnailImage[] | undefined;\n  #lastTextTrack: MediaTextTrackState | undefined;\n  #api: ThumbnailApi | null = null;\n\n  constructor() {\n    super();\n\n    const shadow = this.attachShadow({ mode: 'open' });\n\n    const style = document.createElement('style');\n    style.textContent = SHADOW_CSS;\n    shadow.appendChild(style);\n\n    this.#img.alt = '';\n    this.#img.setAttribute('part', 'img');\n    this.#img.setAttribute('aria-hidden', 'true');\n    this.#img.setAttribute('decoding', 'async');\n    shadow.appendChild(this.#img);\n  }\n\n  /**\n   * Set thumbnail images directly, bypassing the automatic `<track>` detection.\n   * When set, this takes priority over the text track path.\n   */\n  get thumbnails(): ThumbnailImage[] | undefined {\n    return this.#externalThumbnails;\n  }\n\n  set thumbnails(value: ThumbnailImage[] | undefined) {\n    this.#externalThumbnails = value;\n    this.requestUpdate();\n  }\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    if (this.destroyed) return;\n\n    this.#api = createThumbnail({\n      getContainer: () => this,\n      getImg: () => this.#img,\n      onStateChange: () => this.requestUpdate(),\n    });\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n  }\n\n  override destroyCallback(): void {\n    this.#api?.destroy();\n    super.destroyCallback();\n  }\n\n  protected override update(changed: PropertyValues): void {\n    super.update(changed);\n\n    const textTrack = this.#textTracks.value;\n\n    // Resolve thumbnails: external prop takes priority over auto <track> path.\n    if (this.#externalThumbnails) {\n      this.#thumbnails = this.#externalThumbnails;\n    } else if (textTrack !== this.#lastTextTrack) {\n      this.#lastTextTrack = textTrack;\n      this.#thumbnails =\n        textTrack && textTrack.thumbnailCues.length > 0\n          ? mapCuesToThumbnails(textTrack.thumbnailCues, textTrack.thumbnailTrackSrc ?? undefined)\n          : [];\n    }\n\n    const thumbnail = this.#core.findActiveThumbnail(this.#thumbnails, this.time);\n\n    // Sync img attributes from element properties.\n    applyElementProps(this.#img, {\n      crossorigin: this.#resolveCrossOrigin(textTrack),\n      loading: this.loading,\n      fetchpriority: this.fetchPriority,\n    });\n\n    // Track src changes via the thumbnail API.\n    this.#api?.updateSrc(thumbnail?.url);\n\n    if (!thumbnail) {\n      this.#img.removeAttribute('src');\n      this.#resetStyles();\n\n      const state = this.#core.getState(false, false, undefined);\n      applyElementProps(this, this.#core.getAttrs(state));\n      applyStateDataAttrs(this, state, ThumbnailDataAttrs);\n      return;\n    }\n\n    // Set the img src directly (imperative DOM).\n    if (this.#img.getAttribute('src') !== thumbnail.url) {\n      this.#img.src = thumbnail.url;\n    }\n\n    const api = this.#api;\n    const state = this.#core.getState(api?.loading ?? false, api?.error ?? false, thumbnail);\n    applyElementProps(this, this.#core.getAttrs(state));\n    applyStateDataAttrs(this, state, ThumbnailDataAttrs);\n\n    if (api?.naturalWidth && api.naturalHeight) {\n      const constraints = api.readConstraints();\n      const result = this.#core.resize(thumbnail, api.naturalWidth, api.naturalHeight, constraints);\n\n      if (result) {\n        this.#applyResize(result);\n      }\n    }\n  }\n\n  /**\n   * Leaving `crossOrigin` unset means \"follow the media element\", so thumbnails\n   * keep working on a CORS-enabled player without a skin having to thread an\n   * attribute through. `null` opts out and fetches the sprites no-CORS, which is\n   * also what removing the attribute produces. A bare `crossorigin` is passed\n   * straight through, since the CORS-settings attribute reads it as Anonymous.\n   *\n   * Only the `<track>` path inherits: `thumbnails` set directly may point at a\n   * host that has nothing to do with the media element.\n   */\n  #resolveCrossOrigin(textTrack: MediaTextTrackState | undefined): string | undefined {\n    if (isNull(this.crossOrigin)) return undefined;\n    if (!isUndefined(this.crossOrigin)) return this.crossOrigin;\n    if (this.#externalThumbnails) return undefined;\n\n    return textTrack?.thumbnailTrackCrossOrigin ?? undefined;\n  }\n\n  #applyResize(result: ThumbnailResizeResult): void {\n    this.style.width = `${result.containerWidth}px`;\n    this.style.height = `${result.containerHeight}px`;\n\n    const imgStyle = this.#img.style;\n    imgStyle.width = `${result.imageWidth}px`;\n    imgStyle.height = `${result.imageHeight}px`;\n    imgStyle.maxWidth = 'none';\n    imgStyle.transform =\n      result.offsetX || result.offsetY ? `translate(-${result.offsetX}px, -${result.offsetY}px)` : '';\n  }\n\n  #resetStyles(): void {\n    this.style.width = '';\n    this.style.height = '';\n\n    const imgStyle = this.#img.style;\n    imgStyle.width = '';\n    imgStyle.height = '';\n    imgStyle.maxWidth = '';\n    imgStyle.transform = '';\n  }\n}\n"],"mappings":"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"}

package/dist/default/ui/time/time-element.js

@@ -21,7 +21,7 @@ var TimeElement = class extends MediaElement {
 		this.#state = new PlayerController(this, playerContext, selectTime);
 		this.#i18n = new I18nController(this, i18nContext);
 		this.#signSpan = document.createElement("span");
-		this.#textNode = document.createTextNode("");
+		this.#textNode = new Text();
 		this.#disconnect = null;
 		this.#listening = false;
 		this.#activeType = TimeCore.defaultProps.type;
@@ -66,8 +66,7 @@ var TimeElement = class extends MediaElement {
 		if (!this.#signSpan.parentNode) {
 			this.#signSpan.setAttribute("aria-hidden", "true");
 			this.#signSpan.hidden = true;
-			this.appendChild(this.#signSpan);
-			this.appendChild(this.#textNode);
+			this.append(this.#signSpan, this.#textNode);
 		}
 	}
 	disconnectedCallback() {

package/dist/default/ui/time/time-element.js.map

@@ -1 +1 @@
-{"version":3,"file":"time-element.js","names":["#state","#toggleType","#core","#i18n","#signSpan","#textNode","#disconnect","#syncListeners","#listening","#activeType","#clearAttrs","#getLabelParams","#handleClick","#handleKeyDown"],"sources":["../../../../src/ui/time/time-element.ts"],"sourcesContent":["import { TimeCore, TimeDataAttrs, type TimeType } from '@videojs/core';\nimport { applyElementProps, applyStateDataAttrs, logMissingFeature, selectTime } from '@videojs/core/dom';\nimport { type Text, translateText } from '@videojs/core/i18n';\nimport { durationSuffixText, elapsedSuffixText, remainingSuffixText } from '@videojs/core/i18n/text/time';\nimport type { PropertyDeclarationMap, PropertyValues } from '@videojs/element';\nimport { isInteractiveActivation } from '@videojs/utils/dom';\nimport { formatTimeAsPhrase } from '@videojs/utils/time';\n\nimport { i18nContext } from '../../i18n/context';\nimport { I18nController } from '../../i18n/controller';\nimport { playerContext } from '../../player/context';\nimport { PlayerController } from '../../player/player-controller';\nimport { MediaElement } from '../media-element';\n\nexport class TimeElement extends MediaElement {\n  static readonly tagName = 'media-time';\n\n  static override properties = {\n    type: { type: String },\n    negativeSign: { type: String, attribute: 'negative-sign' },\n    label: { type: String },\n    toggle: { type: Boolean },\n  } satisfies PropertyDeclarationMap<keyof TimeCore.Props>;\n\n  type: TimeType = TimeCore.defaultProps.type;\n  negativeSign = TimeCore.defaultProps.negativeSign;\n  label: Text | string = '';\n  toggle = TimeCore.defaultProps.toggle;\n\n  readonly #core = new TimeCore();\n  readonly #state = new PlayerController(this, playerContext, selectTime);\n  readonly #i18n = new I18nController(this, i18nContext);\n\n  readonly #signSpan = document.createElement('span');\n  readonly #textNode = document.createTextNode('');\n\n  #disconnect: AbortController | null = null;\n  #listening = false;\n  #activeType: TimeType = TimeCore.defaultProps.type;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n\n    this.#disconnect = new AbortController();\n    this.#syncListeners();\n\n    if (!this.#signSpan.parentNode) {\n      this.#signSpan.setAttribute('aria-hidden', 'true');\n      this.#signSpan.hidden = true;\n      this.appendChild(this.#signSpan);\n      this.appendChild(this.#textNode);\n    }\n\n    if (__DEV__ && !this.#state.value) {\n      logMissingFeature(this.localName, this.#state.displayName!);\n    }\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.#disconnect?.abort();\n    this.#disconnect = null;\n    this.#listening = false;\n  }\n\n  protected override willUpdate(changed: PropertyValues): void {\n    super.willUpdate(changed);\n    if (changed.has('type') || changed.has('toggle')) {\n      this.#activeType = this.type;\n    }\n  }\n\n  protected override update(changed: PropertyValues): void {\n    super.update(changed);\n\n    if (changed.has('toggle')) {\n      this.#syncListeners();\n    }\n\n    const media = this.#state.value;\n    if (!media) {\n      this.#clearAttrs();\n      return;\n    }\n\n    this.#core.setProps({\n      type: this.toggle ? this.#activeType : this.type,\n      negativeSign: this.negativeSign,\n      label: this.label,\n      toggle: this.toggle,\n    });\n    this.#core.setMedia(media);\n    this.#core.setFormatLocale(this.#i18n.locale);\n    const state = this.#core.getState();\n\n    this.#signSpan.hidden = !state.negative;\n    this.#signSpan.textContent = state.negative ? this.negativeSign : '';\n    this.#textNode.textContent = state.text;\n\n    const attrs = this.#core.getAttrs(state, this.type);\n    const label = translateText(attrs['aria-label'], this.#i18n.value, this.#getLabelParams(state));\n    const description = attrs['aria-description']\n      ? translateText(attrs['aria-description'], this.#i18n.value)\n      : undefined;\n\n    applyElementProps(this, {\n      'aria-label': label,\n      'aria-description': description,\n      role: this.toggle ? attrs.role : 'time',\n      tabIndex: attrs.tabIndex,\n      datetime: this.toggle ? undefined : state.datetime,\n    });\n    applyStateDataAttrs(this, state, TimeDataAttrs);\n  }\n\n  #getLabelParams(state: TimeCore.State): { duration: string } | undefined {\n    const params = this.#core.getLabelParams(state);\n    if (!params) return undefined;\n\n    const duration = formatTimeAsPhrase(Math.abs(state.seconds), { locale: this.#i18n.locale });\n\n    const text = {\n      current: elapsedSuffixText,\n      duration: durationSuffixText,\n      remaining: remainingSuffixText,\n    }[state.type];\n\n    return { duration: translateText(text, this.#i18n.value, { duration }) };\n  }\n\n  #handleClick = (event: MouseEvent): void => {\n    if (event.defaultPrevented || !this.toggle || !this.#state.value) return;\n    this.#toggleType();\n  };\n\n  #handleKeyDown = (event: KeyboardEvent): void => {\n    if (event.defaultPrevented || !isInteractiveActivation(event)) return;\n    if (!this.toggle || !this.#state.value) return;\n    // Prevent space from scrolling page.\n    event.preventDefault();\n    if (event.repeat) return;\n    this.#toggleType();\n  };\n\n  #toggleType(): void {\n    if (this.type === 'current') {\n      this.#activeType = this.#activeType === 'remaining' ? 'current' : 'remaining';\n    } else {\n      this.#activeType = this.#activeType === 'duration' ? 'remaining' : 'duration';\n    }\n\n    this.requestUpdate();\n  }\n\n  #syncListeners(): void {\n    if (!this.toggle || !this.#disconnect || this.#listening) return;\n\n    this.#listening = true;\n    applyElementProps(\n      this,\n      {\n        onClick: this.#handleClick,\n        onKeyDown: this.#handleKeyDown,\n      },\n      { signal: this.#disconnect.signal }\n    );\n  }\n\n  #clearAttrs(): void {\n    applyElementProps(this, {\n      'aria-label': undefined,\n      'aria-description': undefined,\n      role: undefined,\n      tabIndex: undefined,\n      datetime: undefined,\n      'data-type': undefined,\n    });\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"time-element.js","names":["#state","#toggleType","#core","#i18n","#signSpan","#textNode","#disconnect","#syncListeners","#listening","#activeType","#clearAttrs","#getLabelParams","#handleClick","#handleKeyDown"],"sources":["../../../../src/ui/time/time-element.ts"],"sourcesContent":["import { TimeCore, TimeDataAttrs, type TimeType } from '@videojs/core';\nimport { applyElementProps, applyStateDataAttrs, logMissingFeature, selectTime } from '@videojs/core/dom';\nimport { type Text, translateText } from '@videojs/core/i18n';\nimport { durationSuffixText, elapsedSuffixText, remainingSuffixText } from '@videojs/core/i18n/text/time';\nimport type { PropertyDeclarationMap, PropertyValues } from '@videojs/element';\nimport { isInteractiveActivation } from '@videojs/utils/dom';\nimport { formatTimeAsPhrase } from '@videojs/utils/time';\n\nimport { i18nContext } from '../../i18n/context';\nimport { I18nController } from '../../i18n/controller';\nimport { playerContext } from '../../player/context';\nimport { PlayerController } from '../../player/player-controller';\nimport { MediaElement } from '../media-element';\n\nexport class TimeElement extends MediaElement {\n  static readonly tagName = 'media-time';\n\n  static override properties = {\n    type: { type: String },\n    negativeSign: { type: String, attribute: 'negative-sign' },\n    label: { type: String },\n    toggle: { type: Boolean },\n  } satisfies PropertyDeclarationMap<keyof TimeCore.Props>;\n\n  type: TimeType = TimeCore.defaultProps.type;\n  negativeSign = TimeCore.defaultProps.negativeSign;\n  label: Text | string = '';\n  toggle = TimeCore.defaultProps.toggle;\n\n  readonly #core = new TimeCore();\n  readonly #state = new PlayerController(this, playerContext, selectTime);\n  readonly #i18n = new I18nController(this, i18nContext);\n\n  readonly #signSpan = document.createElement('span');\n  readonly #textNode = new Text();\n\n  #disconnect: AbortController | null = null;\n  #listening = false;\n  #activeType: TimeType = TimeCore.defaultProps.type;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n\n    this.#disconnect = new AbortController();\n    this.#syncListeners();\n\n    if (!this.#signSpan.parentNode) {\n      this.#signSpan.setAttribute('aria-hidden', 'true');\n      this.#signSpan.hidden = true;\n      this.append(this.#signSpan, this.#textNode);\n    }\n\n    if (__DEV__ && !this.#state.value) {\n      logMissingFeature(this.localName, this.#state.displayName!);\n    }\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.#disconnect?.abort();\n    this.#disconnect = null;\n    this.#listening = false;\n  }\n\n  protected override willUpdate(changed: PropertyValues): void {\n    super.willUpdate(changed);\n    if (changed.has('type') || changed.has('toggle')) {\n      this.#activeType = this.type;\n    }\n  }\n\n  protected override update(changed: PropertyValues): void {\n    super.update(changed);\n\n    if (changed.has('toggle')) {\n      this.#syncListeners();\n    }\n\n    const media = this.#state.value;\n    if (!media) {\n      this.#clearAttrs();\n      return;\n    }\n\n    this.#core.setProps({\n      type: this.toggle ? this.#activeType : this.type,\n      negativeSign: this.negativeSign,\n      label: this.label,\n      toggle: this.toggle,\n    });\n    this.#core.setMedia(media);\n    this.#core.setFormatLocale(this.#i18n.locale);\n    const state = this.#core.getState();\n\n    this.#signSpan.hidden = !state.negative;\n    this.#signSpan.textContent = state.negative ? this.negativeSign : '';\n    this.#textNode.textContent = state.text;\n\n    const attrs = this.#core.getAttrs(state, this.type);\n    const label = translateText(attrs['aria-label'], this.#i18n.value, this.#getLabelParams(state));\n    const description = attrs['aria-description']\n      ? translateText(attrs['aria-description'], this.#i18n.value)\n      : undefined;\n\n    applyElementProps(this, {\n      'aria-label': label,\n      'aria-description': description,\n      role: this.toggle ? attrs.role : 'time',\n      tabIndex: attrs.tabIndex,\n      datetime: this.toggle ? undefined : state.datetime,\n    });\n    applyStateDataAttrs(this, state, TimeDataAttrs);\n  }\n\n  #getLabelParams(state: TimeCore.State): { duration: string } | undefined {\n    const params = this.#core.getLabelParams(state);\n    if (!params) return undefined;\n\n    const duration = formatTimeAsPhrase(Math.abs(state.seconds), { locale: this.#i18n.locale });\n\n    const text = {\n      current: elapsedSuffixText,\n      duration: durationSuffixText,\n      remaining: remainingSuffixText,\n    }[state.type];\n\n    return { duration: translateText(text, this.#i18n.value, { duration }) };\n  }\n\n  #handleClick = (event: MouseEvent): void => {\n    if (event.defaultPrevented || !this.toggle || !this.#state.value) return;\n    this.#toggleType();\n  };\n\n  #handleKeyDown = (event: KeyboardEvent): void => {\n    if (event.defaultPrevented || !isInteractiveActivation(event)) return;\n    if (!this.toggle || !this.#state.value) return;\n    // Prevent space from scrolling page.\n    event.preventDefault();\n    if (event.repeat) return;\n    this.#toggleType();\n  };\n\n  #toggleType(): void {\n    if (this.type === 'current') {\n      this.#activeType = this.#activeType === 'remaining' ? 'current' : 'remaining';\n    } else {\n      this.#activeType = this.#activeType === 'duration' ? 'remaining' : 'duration';\n    }\n\n    this.requestUpdate();\n  }\n\n  #syncListeners(): void {\n    if (!this.toggle || !this.#disconnect || this.#listening) return;\n\n    this.#listening = true;\n    applyElementProps(\n      this,\n      {\n        onClick: this.#handleClick,\n        onKeyDown: this.#handleKeyDown,\n      },\n      { signal: this.#disconnect.signal }\n    );\n  }\n\n  #clearAttrs(): void {\n    applyElementProps(this, {\n      'aria-label': undefined,\n      'aria-description': undefined,\n      role: undefined,\n      tabIndex: undefined,\n      datetime: undefined,\n      'data-type': undefined,\n    });\n  }\n}\n"],"mappings":"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"}

package/dist/default/ui/title/title-element.js

@@ -0,0 +1,37 @@
+import { playerContext } from "../../player/context.js";
+import { MediaElement } from "../media-element.js";
+import { PlayerController } from "../../player/player-controller.js";
+import { applyStateDataAttrs, selectMetadata } from "@videojs/core/dom";
+import { TitleCore, TitleDataAttrs } from "@videojs/core";
+//#region src/ui/title/title-element.ts
+/**
+* Displays the resolved content title.
+*
+* The element owns its text content. Set the title through the player's
+* `content-title` attribute rather than by writing children.
+*/
+var TitleElement = class extends MediaElement {
+	static {
+		this.tagName = "media-title";
+	}
+	#core = new TitleCore();
+	#metadataState = new PlayerController(this, playerContext, selectMetadata);
+	#textNode = new Text();
+	connectedCallback() {
+		super.connectedCallback();
+		if (!this.#textNode.parentNode) this.append(this.#textNode);
+	}
+	update(changed) {
+		super.update(changed);
+		const metadata = this.#metadataState.value;
+		if (!metadata) return;
+		const state = this.#core.getState(metadata);
+		this.#textNode.textContent = state.title;
+		this.hidden = state.hidden;
+		applyStateDataAttrs(this, state, TitleDataAttrs);
+	}
+};
+//#endregion
+export { TitleElement };
+
+//# sourceMappingURL=title-element.js.map

package/dist/default/ui/title/title-element.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"title-element.js","names":["#core","#metadataState","#textNode"],"sources":["../../../../src/ui/title/title-element.ts"],"sourcesContent":["import { TitleCore, TitleDataAttrs } from '@videojs/core';\nimport { applyStateDataAttrs, logMissingFeature, selectMetadata } from '@videojs/core/dom';\nimport type { PropertyValues } from '@videojs/element';\n\nimport { playerContext } from '../../player/context';\nimport { PlayerController } from '../../player/player-controller';\nimport { MediaElement } from '../media-element';\n\n/**\n * Displays the resolved content title.\n *\n * The element owns its text content. Set the title through the player's\n * `content-title` attribute rather than by writing children.\n */\nexport class TitleElement extends MediaElement {\n  static readonly tagName = 'media-title';\n\n  readonly #core = new TitleCore();\n  readonly #metadataState = new PlayerController(this, playerContext, selectMetadata);\n\n  readonly #textNode = new Text();\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n\n    if (!this.#textNode.parentNode) {\n      this.append(this.#textNode);\n    }\n\n    if (__DEV__ && !this.#metadataState.value) {\n      logMissingFeature(this.localName, this.#metadataState.displayName!);\n    }\n  }\n\n  protected override update(changed: PropertyValues): void {\n    super.update(changed);\n\n    const metadata = this.#metadataState.value;\n\n    if (!metadata) return;\n\n    const state = this.#core.getState(metadata);\n\n    this.#textNode.textContent = state.title;\n    this.hidden = state.hidden;\n\n    applyStateDataAttrs(this, state, TitleDataAttrs);\n  }\n}\n"],"mappings":";;;;;;;;;;;;AAcA,IAAa,eAAb,cAAkC,aAAa;;EACnB,KAAA,UAAA;;CAE1B,QAAiB,IAAI,UAAU;CAC/B,iBAA0B,IAAI,iBAAiB,MAAM,eAAe,cAAc;CAElF,YAAqB,IAAI,KAAK;CAE9B,oBAAmC;EACjC,MAAM,kBAAkB;EAExB,IAAI,CAAC,KAAKE,UAAU,YAClB,KAAK,OAAO,KAAKA,SAAS;CAM9B;CAEA,OAA0B,SAA+B;EACvD,MAAM,OAAO,OAAO;EAEpB,MAAM,WAAW,KAAKD,eAAe;EAErC,IAAI,CAAC,UAAU;EAEf,MAAM,QAAQ,KAAKD,MAAM,SAAS,QAAQ;EAE1C,KAAKE,UAAU,cAAc,MAAM;EACnC,KAAK,SAAS,MAAM;EAEpB,oBAAoB,MAAM,OAAO,cAAc;CACjD;AACF"}