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

package/dist/dev/{skins → packages/skins}/dist/default/minimal/tailwind/video.tailwind.js

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"icon-state.js","names":[],"sources":["../../../../../../../../../skins/dist/default/shared/tailwind/icon-state.js"],"sourcesContent":["//#region src/shared/tailwind/icon-state.ts\nconst iconState = {\n\tplay: {\n\t\tbutton: \"group\",\n\t\trestart: \"hidden opacity-0 group-data-ended:block group-data-ended:opacity-100\",\n\t\tplay: \"hidden opacity-0 group-not-data-ended:group-data-paused:block group-not-data-ended:group-data-paused:opacity-100\",\n\t\tpause: \"hidden opacity-0 group-not-data-paused:group-not-data-ended:block group-not-data-paused:group-not-data-ended:opacity-100\"\n\t},\n\tmute: {\n\t\tbutton: \"group\",\n\t\tvolumeOff: \"hidden opacity-0 group-data-muted:block group-data-muted:opacity-100\",\n\t\tvolumeLow: \"hidden opacity-0 group-not-data-muted:group-data-[volume-level=low]:block group-not-data-muted:group-data-[volume-level=low]:opacity-100\",\n\t\tvolumeHigh: \"hidden opacity-0 group-not-data-muted:group-not-data-[volume-level=low]:block group-not-data-muted:group-not-data-[volume-level=low]:opacity-100\"\n\t},\n\tfullscreen: {\n\t\tbutton: \"group\",\n\t\tenter: \"hidden opacity-0 group-not-data-fullscreen:block group-not-data-fullscreen:opacity-100\",\n\t\texit: \"hidden opacity-0 group-data-fullscreen:block group-data-fullscreen:opacity-100\"\n\t},\n\tcaptions: {\n\t\tbutton: \"group\",\n\t\toff: \"hidden opacity-0 group-not-data-active:block group-not-data-active:opacity-100\",\n\t\ton: \"hidden opacity-0 group-data-active:block group-data-active:opacity-100\"\n\t},\n\tpip: {\n\t\tbutton: \"group\",\n\t\toff: \"hidden opacity-0 group-not-data-pip:block group-not-data-pip:opacity-100\",\n\t\ton: \"hidden opacity-0 group-data-pip:block group-data-pip:opacity-100\"\n\t},\n\tcast: {\n\t\tbutton: \"group\",\n\t\tenter: \"hidden opacity-0 group-not-data-[cast-state=connected]:block group-not-data-[cast-state=connected]:opacity-100\",\n\t\texit: \"hidden opacity-0 group-data-[cast-state=connected]:block group-data-[cast-state=connected]:opacity-100\"\n\t}\n};\n//#endregion\nexport { iconState };\n\n//# sourceMappingURL=icon-state.js.map"],"mappings":";AACA,MAAM,YAAY;CACjB,MAAM;EACL,QAAQ;EACR,SAAS;EACT,MAAM;EACN,OAAO;EACP;CACD,MAAM;EACL,QAAQ;EACR,WAAW;EACX,WAAW;EACX,YAAY;EACZ;CACD,YAAY;EACX,QAAQ;EACR,OAAO;EACP,MAAM;EACN;CACD,UAAU;EACT,QAAQ;EACR,KAAK;EACL,IAAI;EACJ;CACD,KAAK;EACJ,QAAQ;EACR,KAAK;EACL,IAAI;EACJ;CACD,MAAM;EACL,QAAQ;EACR,OAAO;EACP,MAAM;EACN;CACD"}

package/dist/dev/player/context.d.ts

@@ -1,4 +1,4 @@
-import { AnyPlayerStore, Media, MediaContainer, PlayerStore } from "@videojs/core/dom";
+import { AnyPlayerStore, Media, MediaContainer, PlayerStore, PopupGroup } from "@videojs/core/dom";
 import { ReactiveControllerHost } from "@videojs/element";
 import { Context, ContextConsumer } from "@videojs/element/context";
 
@@ -23,6 +23,7 @@ declare const CONTAINER_CONTEXT_KEY: unique symbol;
 interface ContainerContextValue {
   container: MediaContainer | null;
   setContainer: (container: MediaContainer | null) => void;
+  popupGroup?: PopupGroup;
 }
 type ContainerContext = Context<typeof CONTAINER_CONTEXT_KEY, ContainerContextValue>;
 type ContainerContextConsumer = ContextConsumer<ContainerContext, ReactiveControllerHost & HTMLElement>;

package/dist/dev/player/context.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"context.d.ts","names":[],"sources":["../../../src/player/context.ts"],"mappings":";;;;;cAQa,kBAAA;AAAA,KAED,kBAAA,eAAiC,WAAA,GAAc,cAAA,IAAkB,KAAA;AAAA,KAEjE,aAAA,eAA4B,WAAA,GAAc,cAAA,IAAkB,OAAA,QAC/D,kBAAA,EACP,kBAAA,CAAmB,KAAA;;;;;AAJrB;cAYa,aAAA,EAAa,OAAA,QAAA,kBAAA,EAAA,cAAA;AAAA,cAMb,iBAAA;AAAA,UAEI,iBAAA;EACf,KAAA,EAAO,KAAA;EACP,QAAA,GAAW,KAAA,EAAO,KAAA;AAAA;AAAA,KAGR,YAAA,GAAe,OAAA,QAAe,iBAAA,EAAmB,iBAAA;AAAA,cAEhD,YAAA,EAAY,OAAA,QAAA,iBAAA,EAAA,iBAAA;AAAA,cAMZ,qBAAA;AAAA,UAEI,qBAAA;EACf,SAAA,EAAW,cAAA;EACX,YAAA,GAAe,SAAA,EAAW,cAAA;AAAA;AAAA,KAGhB,gBAAA,GAAmB,OAAA,QAAe,qBAAA,EAAuB,qBAAA;AAAA,KAEzD,wBAAA,GAA2B,eAAA,CAAgB,gBAAA,EAAkB,sBAAA,GAAyB,WAAA;AAAA,cAErF,gBAAA,EAAgB,OAAA,QAAA,qBAAA,EAAA,qBAAA"}
+{"version":3,"file":"context.d.ts","names":[],"sources":["../../../src/player/context.ts"],"mappings":";;;;;cAQa,kBAAA;AAAA,KAED,kBAAA,eAAiC,WAAA,GAAc,cAAA,IAAkB,KAAA;AAAA,KAEjE,aAAA,eAA4B,WAAA,GAAc,cAAA,IAAkB,OAAA,QAC/D,kBAAA,EACP,kBAAA,CAAmB,KAAA;;;;;AAJrB;cAYa,aAAA,EAAa,OAAA,QAAA,kBAAA,EAAA,cAAA;AAAA,cAMb,iBAAA;AAAA,UAEI,iBAAA;EACf,KAAA,EAAO,KAAA;EACP,QAAA,GAAW,KAAA,EAAO,KAAA;AAAA;AAAA,KAGR,YAAA,GAAe,OAAA,QAAe,iBAAA,EAAmB,iBAAA;AAAA,cAEhD,YAAA,EAAY,OAAA,QAAA,iBAAA,EAAA,iBAAA;AAAA,cAMZ,qBAAA;AAAA,UAEI,qBAAA;EACf,SAAA,EAAW,cAAA;EACX,YAAA,GAAe,SAAA,EAAW,cAAA;EAC1B,UAAA,GAAa,UAAA;AAAA;AAAA,KAGH,gBAAA,GAAmB,OAAA,QAAe,qBAAA,EAAuB,qBAAA;AAAA,KAEzD,wBAAA,GAA2B,eAAA,CAAgB,gBAAA,EAAkB,sBAAA,GAAyB,WAAA;AAAA,cAErF,gBAAA,EAAgB,OAAA,QAAA,qBAAA,EAAA,qBAAA"}

package/dist/dev/player/context.js.map

@@ -1 +1 @@
-{"version":3,"file":"context.js","names":[],"sources":["../../../src/player/context.ts"],"sourcesContent":["import type { AnyPlayerStore, Media, MediaContainer, PlayerStore } from '@videojs/core/dom';\nimport type { ReactiveControllerHost } from '@videojs/element';\nimport { type Context, type ContextConsumer, createContext } from '@videojs/element/context';\n\n// ----------------------------------------\n// Player Context\n// ----------------------------------------\n\nexport const PLAYER_CONTEXT_KEY = Symbol.for('@videojs/player');\n\nexport type PlayerContextValue<Store extends PlayerStore = AnyPlayerStore> = Store;\n\nexport type PlayerContext<Store extends PlayerStore = AnyPlayerStore> = Context<\n  typeof PLAYER_CONTEXT_KEY,\n  PlayerContextValue<Store>\n>;\n\n/**\n * The default player context instance for consuming the player store in controllers.\n *\n * @public\n */\nexport const playerContext = createContext<PlayerContextValue, typeof PLAYER_CONTEXT_KEY>(PLAYER_CONTEXT_KEY);\n\n// ----------------------------------------\n// Media Context\n// ----------------------------------------\n\nexport const MEDIA_CONTEXT_KEY = Symbol.for('@videojs/media');\n\nexport interface MediaContextValue {\n  media: Media | null;\n  setMedia: (media: Media | null) => void;\n}\n\nexport type MediaContext = Context<typeof MEDIA_CONTEXT_KEY, MediaContextValue>;\n\nexport const mediaContext = createContext<MediaContextValue, typeof MEDIA_CONTEXT_KEY>(MEDIA_CONTEXT_KEY);\n\n// ----------------------------------------\n// Container Context\n// ----------------------------------------\n\nexport const CONTAINER_CONTEXT_KEY = Symbol.for('@videojs/container');\n\nexport interface ContainerContextValue {\n  container: MediaContainer | null;\n  setContainer: (container: MediaContainer | null) => void;\n}\n\nexport type ContainerContext = Context<typeof CONTAINER_CONTEXT_KEY, ContainerContextValue>;\n\nexport type ContainerContextConsumer = ContextConsumer<ContainerContext, ReactiveControllerHost & HTMLElement>;\n\nexport const containerContext = createContext<ContainerContextValue, typeof CONTAINER_CONTEXT_KEY>(\n  CONTAINER_CONTEXT_KEY\n);\n"],"mappings":";;AAQA,MAAa,qBAAqB,OAAO,IAAI,kBAAkB;;;;;;AAc/D,MAAa,gBAAgB,cAA6D,mBAAmB;AAM7G,MAAa,oBAAoB,OAAO,IAAI,iBAAiB;AAS7D,MAAa,eAAe,cAA2D,kBAAkB;AAMzG,MAAa,wBAAwB,OAAO,IAAI,qBAAqB;AAWrE,MAAa,mBAAmB,cAC9B,sBACD"}
+{"version":3,"file":"context.js","names":[],"sources":["../../../src/player/context.ts"],"sourcesContent":["import type { AnyPlayerStore, Media, MediaContainer, PlayerStore, PopupGroup } from '@videojs/core/dom';\nimport type { ReactiveControllerHost } from '@videojs/element';\nimport { type Context, type ContextConsumer, createContext } from '@videojs/element/context';\n\n// ----------------------------------------\n// Player Context\n// ----------------------------------------\n\nexport const PLAYER_CONTEXT_KEY = Symbol.for('@videojs/player');\n\nexport type PlayerContextValue<Store extends PlayerStore = AnyPlayerStore> = Store;\n\nexport type PlayerContext<Store extends PlayerStore = AnyPlayerStore> = Context<\n  typeof PLAYER_CONTEXT_KEY,\n  PlayerContextValue<Store>\n>;\n\n/**\n * The default player context instance for consuming the player store in controllers.\n *\n * @public\n */\nexport const playerContext = createContext<PlayerContextValue, typeof PLAYER_CONTEXT_KEY>(PLAYER_CONTEXT_KEY);\n\n// ----------------------------------------\n// Media Context\n// ----------------------------------------\n\nexport const MEDIA_CONTEXT_KEY = Symbol.for('@videojs/media');\n\nexport interface MediaContextValue {\n  media: Media | null;\n  setMedia: (media: Media | null) => void;\n}\n\nexport type MediaContext = Context<typeof MEDIA_CONTEXT_KEY, MediaContextValue>;\n\nexport const mediaContext = createContext<MediaContextValue, typeof MEDIA_CONTEXT_KEY>(MEDIA_CONTEXT_KEY);\n\n// ----------------------------------------\n// Container Context\n// ----------------------------------------\n\nexport const CONTAINER_CONTEXT_KEY = Symbol.for('@videojs/container');\n\nexport interface ContainerContextValue {\n  container: MediaContainer | null;\n  setContainer: (container: MediaContainer | null) => void;\n  popupGroup?: PopupGroup;\n}\n\nexport type ContainerContext = Context<typeof CONTAINER_CONTEXT_KEY, ContainerContextValue>;\n\nexport type ContainerContextConsumer = ContextConsumer<ContainerContext, ReactiveControllerHost & HTMLElement>;\n\nexport const containerContext = createContext<ContainerContextValue, typeof CONTAINER_CONTEXT_KEY>(\n  CONTAINER_CONTEXT_KEY\n);\n"],"mappings":";;AAQA,MAAa,qBAAqB,OAAO,IAAI,kBAAkB;;;;;;AAc/D,MAAa,gBAAgB,cAA6D,mBAAmB;AAM7G,MAAa,oBAAoB,OAAO,IAAI,iBAAiB;AAS7D,MAAa,eAAe,cAA2D,kBAAkB;AAMzG,MAAa,wBAAwB,OAAO,IAAI,qBAAqB;AAYrE,MAAa,mBAAmB,cAC9B,sBACD"}

package/dist/dev/presets/live-audio.d.ts

@@ -1,6 +1,7 @@
 import { MinimalLiveAudioSkinElement } from "../define/live-audio/minimal-skin.js";
 import { MinimalLiveAudioSkinTailwindElement } from "../define/live-audio/minimal-skin.tailwind.js";
+import { LiveAudioPlayerElement } from "../define/live-audio/player.js";
 import { LiveAudioSkinElement } from "../define/live-audio/skin.js";
 import { LiveAudioSkinTailwindElement } from "../define/live-audio/skin.tailwind.js";
 import { liveAudioFeatures } from "@videojs/core/dom";
-export { LiveAudioSkinElement, LiveAudioSkinTailwindElement, MinimalLiveAudioSkinElement, MinimalLiveAudioSkinTailwindElement, liveAudioFeatures };
+export { LiveAudioPlayerElement, LiveAudioSkinElement, LiveAudioSkinTailwindElement, MinimalLiveAudioSkinElement, MinimalLiveAudioSkinTailwindElement, liveAudioFeatures };

package/dist/dev/presets/live-audio.js

@@ -1,6 +1,7 @@
+import { LiveAudioPlayerElement } from "../define/live-audio/player.js";
 import { MinimalLiveAudioSkinTailwindElement } from "../define/live-audio/minimal-skin.tailwind.js";
 import { MinimalLiveAudioSkinElement } from "../define/live-audio/minimal-skin.js";
 import { LiveAudioSkinTailwindElement } from "../define/live-audio/skin.tailwind.js";
 import { LiveAudioSkinElement } from "../define/live-audio/skin.js";
 import { liveAudioFeatures } from "@videojs/core/dom";
-export { LiveAudioSkinElement, LiveAudioSkinTailwindElement, MinimalLiveAudioSkinElement, MinimalLiveAudioSkinTailwindElement, liveAudioFeatures };
+export { LiveAudioPlayerElement, LiveAudioSkinElement, LiveAudioSkinTailwindElement, MinimalLiveAudioSkinElement, MinimalLiveAudioSkinTailwindElement, liveAudioFeatures };

package/dist/dev/presets/live-video.d.ts

@@ -1,6 +1,7 @@
 import { MinimalLiveVideoSkinElement } from "../define/live-video/minimal-skin.js";
 import { MinimalLiveVideoSkinTailwindElement } from "../define/live-video/minimal-skin.tailwind.js";
+import { LiveVideoPlayerElement } from "../define/live-video/player.js";
 import { LiveVideoSkinElement } from "../define/live-video/skin.js";
 import { LiveVideoSkinTailwindElement } from "../define/live-video/skin.tailwind.js";
 import { liveVideoFeatures } from "@videojs/core/dom";
-export { LiveVideoSkinElement, LiveVideoSkinTailwindElement, MinimalLiveVideoSkinElement, MinimalLiveVideoSkinTailwindElement, liveVideoFeatures };
+export { LiveVideoPlayerElement, LiveVideoSkinElement, LiveVideoSkinTailwindElement, MinimalLiveVideoSkinElement, MinimalLiveVideoSkinTailwindElement, liveVideoFeatures };

package/dist/dev/presets/live-video.js

@@ -1,6 +1,7 @@
+import { LiveVideoPlayerElement } from "../define/live-video/player.js";
 import { MinimalLiveVideoSkinTailwindElement } from "../define/live-video/minimal-skin.tailwind.js";
 import { MinimalLiveVideoSkinElement } from "../define/live-video/minimal-skin.js";
 import { LiveVideoSkinTailwindElement } from "../define/live-video/skin.tailwind.js";
 import { LiveVideoSkinElement } from "../define/live-video/skin.js";
 import { liveVideoFeatures } from "@videojs/core/dom";
-export { LiveVideoSkinElement, LiveVideoSkinTailwindElement, MinimalLiveVideoSkinElement, MinimalLiveVideoSkinTailwindElement, liveVideoFeatures };
+export { LiveVideoPlayerElement, LiveVideoSkinElement, LiveVideoSkinTailwindElement, MinimalLiveVideoSkinElement, MinimalLiveVideoSkinTailwindElement, liveVideoFeatures };

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

@@ -1 +1 @@
-{"version":3,"file":"provider-mixin.d.ts","names":[],"sources":["../../../src/store/provider-mixin.ts"],"mappings":";;;;;;UAOiB,mBAAA,eAAkC,WAAA;EACjD,aAAA,EAAe,aAAA,CAAc,KAAA;EAC7B,YAAA,EAAc,YAAA;EACd,gBAAA,EAAkB,gBAAA;EAClB,OAAA,QAAe,KAAA;AAAA;AAAA,KAGL,aAAA,eAA4B,WAAA,mBAA8B,uBAAA,EACpE,SAAA,EAAW,KAAA,KACR,KAAA,GAAQ,yBAAA,CAA0B,KAAA;;;;;;;;;;;;;;iBAevB,mBAAA,eAAkC,WAAA,CAAA,CAChD,MAAA,EAAQ,mBAAA,CAAoB,KAAA,IAC3B,aAAA,CAAc,KAAA"}
+{"version":3,"file":"provider-mixin.d.ts","names":[],"sources":["../../../src/store/provider-mixin.ts"],"mappings":";;;;;;UAaiB,mBAAA,eAAkC,WAAA;EACjD,aAAA,EAAe,aAAA,CAAc,KAAA;EAC7B,YAAA,EAAc,YAAA;EACd,gBAAA,EAAkB,gBAAA;EAClB,OAAA,QAAe,KAAA;AAAA;AAAA,KAGL,aAAA,eAA4B,WAAA,mBAA8B,uBAAA,EACpE,SAAA,EAAW,KAAA,KACR,KAAA,GAAQ,yBAAA,CAA0B,KAAA;;;;;;;;;;;;;;iBAevB,mBAAA,eAAkC,WAAA,CAAA,CAChD,MAAA,EAAQ,mBAAA,CAAoB,KAAA,IAC3B,aAAA,CAAc,KAAA"}

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

@@ -1,3 +1,4 @@
+import { createPopupGroup } from "@videojs/core/dom";
 import { ContextProvider } from "@videojs/element/context";
 import { isNull } from "@videojs/utils/predicate";
 //#region src/store/provider-mixin.ts
@@ -21,6 +22,7 @@ function createProviderMixin(config) {
 			#detach = null;
 			#media = null;
 			#container = null;
+			#popupGroup = createPopupGroup();
 			#fallbackQueued = false;
 			#setMedia = (media) => {
 				if (this.#media === media) return;
@@ -36,7 +38,8 @@ function createProviderMixin(config) {
 				this.#container = container;
 				this.#containerProvider.setValue({
 					container,
-					setContainer: this.#setContainer
+					setContainer: this.#setContainer,
+					popupGroup: this.#popupGroup
 				});
 				this.#tryAttach();
 			};
@@ -55,7 +58,8 @@ function createProviderMixin(config) {
 				context: config.containerContext,
 				initialValue: {
 					container: this.#container,
-					setContainer: this.#setContainer
+					setContainer: this.#setContainer,
+					popupGroup: this.#popupGroup
 				}
 			});
 			get store() {
@@ -71,7 +75,8 @@ function createProviderMixin(config) {
 				});
 				this.#containerProvider.setValue({
 					container: this.#container,
-					setContainer: this.#setContainer
+					setContainer: this.#setContainer,
+					popupGroup: this.#popupGroup
 				});
 				this.#tryAttach();
 				this.#queueFallbackDiscovery();

package/dist/dev/store/provider-mixin.js.map

@@ -1 +1 @@
-{"version":3,"file":"provider-mixin.js","names":["#media","#mediaProvider","#setMedia","#tryAttach","#container","#containerProvider","#setContainer","#store","#playerProvider","#queueFallbackDiscovery","#detachStore","#detach","#fallbackQueued"],"sources":["../../../src/store/provider-mixin.ts"],"sourcesContent":["import type { Media, MediaContainer, PlayerStore, PlayerTarget } from '@videojs/core/dom';\nimport { ContextProvider } from '@videojs/element/context';\nimport { isNull } from '@videojs/utils/predicate';\nimport type { MediaElementConstructor } from '@/ui/media-element';\nimport type { ContainerContext, MediaContext, PlayerContext } from '../player/context';\nimport type { PlayerProvider, PlayerProviderConstructor } from './types';\n\nexport interface ProviderMixinConfig<Store extends PlayerStore> {\n  playerContext: PlayerContext<Store>;\n  mediaContext: MediaContext;\n  containerContext: ContainerContext;\n  factory: () => Store;\n}\n\nexport type ProviderMixin<Store extends PlayerStore> = <Class extends MediaElementConstructor>(\n  BaseClass: Class\n) => Class & PlayerProviderConstructor<Store>;\n\n/**\n * Create a mixin that provides player context to descendant elements and\n * owns the `store.attach()` lifecycle.\n *\n * Media and container elements register themselves via media/container\n * contexts that carry both the current value and a setter. When a media\n * element is available, the provider calls `store.attach({ media, container })`.\n *\n * As a fallback for plain `<video>`/`<audio>` that can't consume context,\n * the provider queries its subtree after a microtask.\n *\n * @param config - Provider configuration with contexts and store factory.\n */\nexport function createProviderMixin<Store extends PlayerStore>(\n  config: ProviderMixinConfig<Store>\n): ProviderMixin<Store> {\n  return <Class extends MediaElementConstructor>(BaseClass: Class) => {\n    class PlayerProviderElement extends BaseClass implements PlayerProvider<Store> {\n      #store: Store | null = config.factory();\n      #detach: (() => void) | null = null;\n      #media: Media | null = null;\n      #container: MediaContainer | null = null;\n      #fallbackQueued = false;\n\n      #setMedia = (media: Media | null): void => {\n        if (this.#media === media) return;\n        this.#media = media;\n        this.#mediaProvider.setValue({ media, setMedia: this.#setMedia });\n        this.#tryAttach();\n      };\n\n      #setContainer = (container: MediaContainer | null): void => {\n        if (this.#container === container) return;\n        this.#container = container;\n        this.#containerProvider.setValue({ container, setContainer: this.#setContainer });\n        this.#tryAttach();\n      };\n\n      #playerProvider = new ContextProvider(this, {\n        context: config.playerContext,\n        initialValue: this.store,\n      });\n\n      #mediaProvider = new ContextProvider(this, {\n        context: config.mediaContext,\n        initialValue: { media: this.#media, setMedia: this.#setMedia },\n      });\n\n      #containerProvider = new ContextProvider(this, {\n        context: config.containerContext,\n        initialValue: { container: this.#container, setContainer: this.#setContainer },\n      });\n\n      get store(): Store {\n        if (isNull(this.#store)) {\n          this.#store = config.factory();\n        }\n\n        return this.#store;\n      }\n\n      override connectedCallback() {\n        super.connectedCallback();\n        this.#playerProvider.setValue(this.store);\n        this.#mediaProvider.setValue({ media: this.#media, setMedia: this.#setMedia });\n        this.#containerProvider.setValue({ container: this.#container, setContainer: this.#setContainer });\n        this.#tryAttach();\n        this.#queueFallbackDiscovery();\n      }\n\n      override disconnectedCallback() {\n        super.disconnectedCallback();\n        this.#detachStore();\n      }\n\n      override destroyCallback() {\n        this.#detachStore();\n        this.#store?.destroy();\n        this.#store = null;\n        super.destroyCallback();\n      }\n\n      #tryAttach(): void {\n        const store = this.#store;\n        if (!store) return;\n\n        if (!this.#media) {\n          this.#detachStore();\n          return;\n        }\n\n        const target: PlayerTarget = {\n          media: this.#media,\n          container: this.#container,\n        };\n\n        const hasMediaChanged = store.target?.media !== target.media;\n        const hasContainerChanged = store.target?.container !== target.container;\n\n        if (hasMediaChanged || hasContainerChanged) {\n          this.#detachStore();\n          this.#detach = store.attach(target);\n        }\n      }\n\n      #detachStore(): void {\n        this.#detach?.();\n        this.#detach = null;\n      }\n\n      #queueFallbackDiscovery(): void {\n        if (this.#media || this.#fallbackQueued) return;\n        this.#fallbackQueued = true;\n\n        queueMicrotask(() => {\n          this.#fallbackQueued = false;\n\n          // Context already registered media — skip fallback.\n          if (this.#media) return;\n\n          const media = this.querySelector<HTMLMediaElement>('video, audio');\n          if (media) {\n            this.#setMedia(media);\n          }\n        });\n      }\n    }\n\n    return PlayerProviderElement;\n  };\n}\n"],"mappings":";;;;;;;;;;;;;;;;AA+BA,SAAgB,oBACd,QACsB;AACtB,SAA+C,cAAqB;EAClE,MAAM,8BAA8B,UAA2C;GAC7E,SAAuB,OAAO,SAAS;GACvC,UAA+B;GAC/B,SAAuB;GACvB,aAAoC;GACpC,kBAAkB;GAElB,aAAa,UAA8B;AACzC,QAAI,MAAA,UAAgB,MAAO;AAC3B,UAAA,QAAc;AACd,UAAA,cAAoB,SAAS;KAAE;KAAO,UAAU,MAAA;KAAgB,CAAC;AACjE,UAAA,WAAiB;;GAGnB,iBAAiB,cAA2C;AAC1D,QAAI,MAAA,cAAoB,UAAW;AACnC,UAAA,YAAkB;AAClB,UAAA,kBAAwB,SAAS;KAAE;KAAW,cAAc,MAAA;KAAoB,CAAC;AACjF,UAAA,WAAiB;;GAGnB,kBAAkB,IAAI,gBAAgB,MAAM;IAC1C,SAAS,OAAO;IAChB,cAAc,KAAK;IACpB,CAAC;GAEF,iBAAiB,IAAI,gBAAgB,MAAM;IACzC,SAAS,OAAO;IAChB,cAAc;KAAE,OAAO,MAAA;KAAa,UAAU,MAAA;KAAgB;IAC/D,CAAC;GAEF,qBAAqB,IAAI,gBAAgB,MAAM;IAC7C,SAAS,OAAO;IAChB,cAAc;KAAE,WAAW,MAAA;KAAiB,cAAc,MAAA;KAAoB;IAC/E,CAAC;GAEF,IAAI,QAAe;AACjB,QAAI,OAAO,MAAA,MAAY,CACrB,OAAA,QAAc,OAAO,SAAS;AAGhC,WAAO,MAAA;;GAGT,oBAA6B;AAC3B,UAAM,mBAAmB;AACzB,UAAA,eAAqB,SAAS,KAAK,MAAM;AACzC,UAAA,cAAoB,SAAS;KAAE,OAAO,MAAA;KAAa,UAAU,MAAA;KAAgB,CAAC;AAC9E,UAAA,kBAAwB,SAAS;KAAE,WAAW,MAAA;KAAiB,cAAc,MAAA;KAAoB,CAAC;AAClG,UAAA,WAAiB;AACjB,UAAA,wBAA8B;;GAGhC,uBAAgC;AAC9B,UAAM,sBAAsB;AAC5B,UAAA,aAAmB;;GAGrB,kBAA2B;AACzB,UAAA,aAAmB;AACnB,UAAA,OAAa,SAAS;AACtB,UAAA,QAAc;AACd,UAAM,iBAAiB;;GAGzB,aAAmB;IACjB,MAAM,QAAQ,MAAA;AACd,QAAI,CAAC,MAAO;AAEZ,QAAI,CAAC,MAAA,OAAa;AAChB,WAAA,aAAmB;AACnB;;IAGF,MAAM,SAAuB;KAC3B,OAAO,MAAA;KACP,WAAW,MAAA;KACZ;IAED,MAAM,kBAAkB,MAAM,QAAQ,UAAU,OAAO;IACvD,MAAM,sBAAsB,MAAM,QAAQ,cAAc,OAAO;AAE/D,QAAI,mBAAmB,qBAAqB;AAC1C,WAAA,aAAmB;AACnB,WAAA,SAAe,MAAM,OAAO,OAAO;;;GAIvC,eAAqB;AACnB,UAAA,UAAgB;AAChB,UAAA,SAAe;;GAGjB,0BAAgC;AAC9B,QAAI,MAAA,SAAe,MAAA,eAAsB;AACzC,UAAA,iBAAuB;AAEvB,yBAAqB;AACnB,WAAA,iBAAuB;AAGvB,SAAI,MAAA,MAAa;KAEjB,MAAM,QAAQ,KAAK,cAAgC,eAAe;AAClE,SAAI,MACF,OAAA,SAAe,MAAM;MAEvB;;;AAIN,SAAO"}
+{"version":3,"file":"provider-mixin.js","names":["#media","#mediaProvider","#setMedia","#tryAttach","#container","#containerProvider","#setContainer","#popupGroup","#store","#playerProvider","#queueFallbackDiscovery","#detachStore","#detach","#fallbackQueued"],"sources":["../../../src/store/provider-mixin.ts"],"sourcesContent":["import {\n  createPopupGroup,\n  type Media,\n  type MediaContainer,\n  type PlayerStore,\n  type PlayerTarget,\n} from '@videojs/core/dom';\nimport { ContextProvider } from '@videojs/element/context';\nimport { isNull } from '@videojs/utils/predicate';\nimport type { MediaElementConstructor } from '@/ui/media-element';\nimport type { ContainerContext, MediaContext, PlayerContext } from '../player/context';\nimport type { PlayerProvider, PlayerProviderConstructor } from './types';\n\nexport interface ProviderMixinConfig<Store extends PlayerStore> {\n  playerContext: PlayerContext<Store>;\n  mediaContext: MediaContext;\n  containerContext: ContainerContext;\n  factory: () => Store;\n}\n\nexport type ProviderMixin<Store extends PlayerStore> = <Class extends MediaElementConstructor>(\n  BaseClass: Class\n) => Class & PlayerProviderConstructor<Store>;\n\n/**\n * Create a mixin that provides player context to descendant elements and\n * owns the `store.attach()` lifecycle.\n *\n * Media and container elements register themselves via media/container\n * contexts that carry both the current value and a setter. When a media\n * element is available, the provider calls `store.attach({ media, container })`.\n *\n * As a fallback for plain `<video>`/`<audio>` that can't consume context,\n * the provider queries its subtree after a microtask.\n *\n * @param config - Provider configuration with contexts and store factory.\n */\nexport function createProviderMixin<Store extends PlayerStore>(\n  config: ProviderMixinConfig<Store>\n): ProviderMixin<Store> {\n  return <Class extends MediaElementConstructor>(BaseClass: Class) => {\n    class PlayerProviderElement extends BaseClass implements PlayerProvider<Store> {\n      #store: Store | null = config.factory();\n      #detach: (() => void) | null = null;\n      #media: Media | null = null;\n      #container: MediaContainer | null = null;\n      #popupGroup = createPopupGroup();\n      #fallbackQueued = false;\n\n      #setMedia = (media: Media | null): void => {\n        if (this.#media === media) return;\n        this.#media = media;\n        this.#mediaProvider.setValue({ media, setMedia: this.#setMedia });\n        this.#tryAttach();\n      };\n\n      #setContainer = (container: MediaContainer | null): void => {\n        if (this.#container === container) return;\n        this.#container = container;\n        this.#containerProvider.setValue({\n          container,\n          setContainer: this.#setContainer,\n          popupGroup: this.#popupGroup,\n        });\n        this.#tryAttach();\n      };\n\n      #playerProvider = new ContextProvider(this, {\n        context: config.playerContext,\n        initialValue: this.store,\n      });\n\n      #mediaProvider = new ContextProvider(this, {\n        context: config.mediaContext,\n        initialValue: { media: this.#media, setMedia: this.#setMedia },\n      });\n\n      #containerProvider = new ContextProvider(this, {\n        context: config.containerContext,\n        initialValue: {\n          container: this.#container,\n          setContainer: this.#setContainer,\n          popupGroup: this.#popupGroup,\n        },\n      });\n\n      get store(): Store {\n        if (isNull(this.#store)) {\n          this.#store = config.factory();\n        }\n\n        return this.#store;\n      }\n\n      override connectedCallback() {\n        super.connectedCallback();\n        this.#playerProvider.setValue(this.store);\n        this.#mediaProvider.setValue({ media: this.#media, setMedia: this.#setMedia });\n        this.#containerProvider.setValue({\n          container: this.#container,\n          setContainer: this.#setContainer,\n          popupGroup: this.#popupGroup,\n        });\n        this.#tryAttach();\n        this.#queueFallbackDiscovery();\n      }\n\n      override disconnectedCallback() {\n        super.disconnectedCallback();\n        this.#detachStore();\n      }\n\n      override destroyCallback() {\n        this.#detachStore();\n        this.#store?.destroy();\n        this.#store = null;\n        super.destroyCallback();\n      }\n\n      #tryAttach(): void {\n        const store = this.#store;\n        if (!store) return;\n\n        if (!this.#media) {\n          this.#detachStore();\n          return;\n        }\n\n        const target: PlayerTarget = {\n          media: this.#media,\n          container: this.#container,\n        };\n\n        const hasMediaChanged = store.target?.media !== target.media;\n        const hasContainerChanged = store.target?.container !== target.container;\n\n        if (hasMediaChanged || hasContainerChanged) {\n          this.#detachStore();\n          this.#detach = store.attach(target);\n        }\n      }\n\n      #detachStore(): void {\n        this.#detach?.();\n        this.#detach = null;\n      }\n\n      #queueFallbackDiscovery(): void {\n        if (this.#media || this.#fallbackQueued) return;\n        this.#fallbackQueued = true;\n\n        queueMicrotask(() => {\n          this.#fallbackQueued = false;\n\n          // Context already registered media — skip fallback.\n          if (this.#media) return;\n\n          const media = this.querySelector<HTMLMediaElement>('video, audio');\n          if (media) {\n            this.#setMedia(media);\n          }\n        });\n      }\n    }\n\n    return PlayerProviderElement;\n  };\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAqCA,SAAgB,oBACd,QACsB;AACtB,SAA+C,cAAqB;EAClE,MAAM,8BAA8B,UAA2C;GAC7E,SAAuB,OAAO,SAAS;GACvC,UAA+B;GAC/B,SAAuB;GACvB,aAAoC;GACpC,cAAc,kBAAkB;GAChC,kBAAkB;GAElB,aAAa,UAA8B;AACzC,QAAI,MAAA,UAAgB,MAAO;AAC3B,UAAA,QAAc;AACd,UAAA,cAAoB,SAAS;KAAE;KAAO,UAAU,MAAA;KAAgB,CAAC;AACjE,UAAA,WAAiB;;GAGnB,iBAAiB,cAA2C;AAC1D,QAAI,MAAA,cAAoB,UAAW;AACnC,UAAA,YAAkB;AAClB,UAAA,kBAAwB,SAAS;KAC/B;KACA,cAAc,MAAA;KACd,YAAY,MAAA;KACb,CAAC;AACF,UAAA,WAAiB;;GAGnB,kBAAkB,IAAI,gBAAgB,MAAM;IAC1C,SAAS,OAAO;IAChB,cAAc,KAAK;IACpB,CAAC;GAEF,iBAAiB,IAAI,gBAAgB,MAAM;IACzC,SAAS,OAAO;IAChB,cAAc;KAAE,OAAO,MAAA;KAAa,UAAU,MAAA;KAAgB;IAC/D,CAAC;GAEF,qBAAqB,IAAI,gBAAgB,MAAM;IAC7C,SAAS,OAAO;IAChB,cAAc;KACZ,WAAW,MAAA;KACX,cAAc,MAAA;KACd,YAAY,MAAA;KACb;IACF,CAAC;GAEF,IAAI,QAAe;AACjB,QAAI,OAAO,MAAA,MAAY,CACrB,OAAA,QAAc,OAAO,SAAS;AAGhC,WAAO,MAAA;;GAGT,oBAA6B;AAC3B,UAAM,mBAAmB;AACzB,UAAA,eAAqB,SAAS,KAAK,MAAM;AACzC,UAAA,cAAoB,SAAS;KAAE,OAAO,MAAA;KAAa,UAAU,MAAA;KAAgB,CAAC;AAC9E,UAAA,kBAAwB,SAAS;KAC/B,WAAW,MAAA;KACX,cAAc,MAAA;KACd,YAAY,MAAA;KACb,CAAC;AACF,UAAA,WAAiB;AACjB,UAAA,wBAA8B;;GAGhC,uBAAgC;AAC9B,UAAM,sBAAsB;AAC5B,UAAA,aAAmB;;GAGrB,kBAA2B;AACzB,UAAA,aAAmB;AACnB,UAAA,OAAa,SAAS;AACtB,UAAA,QAAc;AACd,UAAM,iBAAiB;;GAGzB,aAAmB;IACjB,MAAM,QAAQ,MAAA;AACd,QAAI,CAAC,MAAO;AAEZ,QAAI,CAAC,MAAA,OAAa;AAChB,WAAA,aAAmB;AACnB;;IAGF,MAAM,SAAuB;KAC3B,OAAO,MAAA;KACP,WAAW,MAAA;KACZ;IAED,MAAM,kBAAkB,MAAM,QAAQ,UAAU,OAAO;IACvD,MAAM,sBAAsB,MAAM,QAAQ,cAAc,OAAO;AAE/D,QAAI,mBAAmB,qBAAqB;AAC1C,WAAA,aAAmB;AACnB,WAAA,SAAe,MAAM,OAAO,OAAO;;;GAIvC,eAAqB;AACnB,UAAA,UAAgB;AAChB,UAAA,SAAe;;GAGjB,0BAAgC;AAC9B,QAAI,MAAA,SAAe,MAAA,eAAsB;AACzC,UAAA,iBAAuB;AAEvB,yBAAqB;AACnB,WAAA,iBAAuB;AAGvB,SAAI,MAAA,MAAa;KAEjB,MAAM,QAAQ,KAAK,cAAgC,eAAe;AAClE,SAAI,MACF,OAAA,SAAe,MAAM;MAEvB;;;AAIN,SAAO"}

package/dist/dev/ui/controls/controls-element.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"controls-element.d.ts","names":[],"sources":["../../../../src/ui/controls/controls-element.ts"],"mappings":";;;;cAUa,eAAA,SAAwB,YAAA;EAAA;kBACnB,OAAA;EAMP,iBAAA,CAAA;EAAA,UAQU,MAAA,CAAO,QAAA,EAAU,cAAA;AAAA"}
+{"version":3,"file":"controls-element.d.ts","names":[],"sources":["../../../../src/ui/controls/controls-element.ts"],"mappings":";;;;cAWa,eAAA,SAAwB,YAAA;EAAA;kBACnB,OAAA;EAOP,iBAAA,CAAA;EAAA,UAQU,MAAA,CAAO,QAAA,EAAU,cAAA;AAAA"}

package/dist/dev/ui/controls/controls-element.js

@@ -4,7 +4,8 @@ import { PlayerController } from "../../player/player-controller.js";
 import { controlsContext } from "./context.js";
 import { applyStateDataAttrs, logMissingFeature, selectControls } from "@videojs/core/dom";
 import { ContextProvider } from "@videojs/element/context";
-import { ControlsCore, ControlsDataAttrs } from "@videojs/core";
+import { isFunction } from "@videojs/utils/predicate";
+import { ControlsCore, ControlsDataAttrs, POPUP_HOST_SELECTOR } from "@videojs/core";
 //#region src/ui/controls/controls-element.ts
 var ControlsElement = class extends MediaElement {
 	static {
@@ -13,6 +14,7 @@ var ControlsElement = class extends MediaElement {
 	#core = new ControlsCore();
 	#mediaState = new PlayerController(this, playerContext, selectControls);
 	#provider = new ContextProvider(this, { context: controlsContext });
+	#visible = true;
 	connectedCallback() {
 		super.connectedCallback();
 		if (!this.#mediaState.value && this.#mediaState.displayName) logMissingFeature(this.localName, this.#mediaState.displayName);
@@ -28,6 +30,16 @@ var ControlsElement = class extends MediaElement {
 			state,
 			stateAttrMap: ControlsDataAttrs
 		});
+		const wasVisible = this.#visible;
+		this.#visible = state.visible;
+		if (wasVisible && !state.visible) this.#closeOwnedOverlays();
+	}
+	#closeOwnedOverlays() {
+		for (const element of this.querySelectorAll(POPUP_HOST_SELECTOR)) {
+			const host = element;
+			if (!isFunction(host.close)) continue;
+			host.close("imperative-action");
+		}
 	}
 };
 //#endregion

package/dist/dev/ui/controls/controls-element.js.map

@@ -1 +1 @@
-{"version":3,"file":"controls-element.js","names":["#core","#mediaState","#provider"],"sources":["../../../../src/ui/controls/controls-element.ts"],"sourcesContent":["import { ControlsCore, ControlsDataAttrs } from '@videojs/core';\nimport { applyStateDataAttrs, logMissingFeature, selectControls } from '@videojs/core/dom';\nimport type { PropertyValues } from '@videojs/element';\nimport { ContextProvider } from '@videojs/element/context';\n\nimport { playerContext } from '../../player/context';\nimport { PlayerController } from '../../player/player-controller';\nimport { MediaElement } from '../media-element';\nimport { controlsContext } from './context';\n\nexport class ControlsElement extends MediaElement {\n  static readonly tagName = 'media-controls';\n\n  readonly #core = new ControlsCore();\n  readonly #mediaState = new PlayerController(this, playerContext, selectControls);\n  readonly #provider = new ContextProvider(this, { context: controlsContext });\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n\n    if (__DEV__ && !this.#mediaState.value && this.#mediaState.displayName) {\n      logMissingFeature(this.localName, this.#mediaState.displayName);\n    }\n  }\n\n  protected override update(_changed: PropertyValues): void {\n    super.update(_changed);\n\n    const media = this.#mediaState.value;\n    if (!media) return;\n\n    this.#core.setMedia(media);\n    const state = this.#core.getState();\n\n    applyStateDataAttrs(this, state, ControlsDataAttrs);\n\n    this.#provider.setValue({\n      state,\n      stateAttrMap: ControlsDataAttrs,\n    });\n  }\n}\n"],"mappings":";;;;;;;;AAUA,IAAa,kBAAb,cAAqC,aAAa;;iBACtB;;CAE1B,QAAiB,IAAI,cAAc;CACnC,cAAuB,IAAI,iBAAiB,MAAM,eAAe,eAAe;CAChF,YAAqB,IAAI,gBAAgB,MAAM,EAAE,SAAS,iBAAiB,CAAC;CAE5E,oBAAmC;AACjC,QAAM,mBAAmB;AAEzB,MAAe,CAAC,MAAA,WAAiB,SAAS,MAAA,WAAiB,YACzD,mBAAkB,KAAK,WAAW,MAAA,WAAiB,YAAY;;CAInE,OAA0B,UAAgC;AACxD,QAAM,OAAO,SAAS;EAEtB,MAAM,QAAQ,MAAA,WAAiB;AAC/B,MAAI,CAAC,MAAO;AAEZ,QAAA,KAAW,SAAS,MAAM;EAC1B,MAAM,QAAQ,MAAA,KAAW,UAAU;AAEnC,sBAAoB,MAAM,OAAO,kBAAkB;AAEnD,QAAA,SAAe,SAAS;GACtB;GACA,cAAc;GACf,CAAC"}
+{"version":3,"file":"controls-element.js","names":["#core","#mediaState","#provider","#visible","#closeOwnedOverlays"],"sources":["../../../../src/ui/controls/controls-element.ts"],"sourcesContent":["import { ControlsCore, ControlsDataAttrs, POPUP_HOST_SELECTOR } from '@videojs/core';\nimport { applyStateDataAttrs, logMissingFeature, selectControls } from '@videojs/core/dom';\nimport type { PropertyValues } from '@videojs/element';\nimport { ContextProvider } from '@videojs/element/context';\nimport { isFunction } from '@videojs/utils/predicate';\n\nimport { playerContext } from '../../player/context';\nimport { PlayerController } from '../../player/player-controller';\nimport { MediaElement } from '../media-element';\nimport { controlsContext } from './context';\n\nexport class ControlsElement extends MediaElement {\n  static readonly tagName = 'media-controls';\n\n  readonly #core = new ControlsCore();\n  readonly #mediaState = new PlayerController(this, playerContext, selectControls);\n  readonly #provider = new ContextProvider(this, { context: controlsContext });\n  #visible = true;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n\n    if (__DEV__ && !this.#mediaState.value && this.#mediaState.displayName) {\n      logMissingFeature(this.localName, this.#mediaState.displayName);\n    }\n  }\n\n  protected override update(_changed: PropertyValues): void {\n    super.update(_changed);\n\n    const media = this.#mediaState.value;\n    if (!media) return;\n\n    this.#core.setMedia(media);\n    const state = this.#core.getState();\n\n    applyStateDataAttrs(this, state, ControlsDataAttrs);\n\n    this.#provider.setValue({\n      state,\n      stateAttrMap: ControlsDataAttrs,\n    });\n\n    const wasVisible = this.#visible;\n    this.#visible = state.visible;\n\n    if (wasVisible && !state.visible) {\n      this.#closeOwnedOverlays();\n    }\n  }\n\n  #closeOwnedOverlays(): void {\n    for (const element of this.querySelectorAll(POPUP_HOST_SELECTOR)) {\n      const host = element as Element & { close?: unknown };\n      if (!isFunction(host.close)) continue;\n\n      host.close('imperative-action');\n    }\n  }\n}\n"],"mappings":";;;;;;;;;AAWA,IAAa,kBAAb,cAAqC,aAAa;;iBACtB;;CAE1B,QAAiB,IAAI,cAAc;CACnC,cAAuB,IAAI,iBAAiB,MAAM,eAAe,eAAe;CAChF,YAAqB,IAAI,gBAAgB,MAAM,EAAE,SAAS,iBAAiB,CAAC;CAC5E,WAAW;CAEX,oBAAmC;AACjC,QAAM,mBAAmB;AAEzB,MAAe,CAAC,MAAA,WAAiB,SAAS,MAAA,WAAiB,YACzD,mBAAkB,KAAK,WAAW,MAAA,WAAiB,YAAY;;CAInE,OAA0B,UAAgC;AACxD,QAAM,OAAO,SAAS;EAEtB,MAAM,QAAQ,MAAA,WAAiB;AAC/B,MAAI,CAAC,MAAO;AAEZ,QAAA,KAAW,SAAS,MAAM;EAC1B,MAAM,QAAQ,MAAA,KAAW,UAAU;AAEnC,sBAAoB,MAAM,OAAO,kBAAkB;AAEnD,QAAA,SAAe,SAAS;GACtB;GACA,cAAc;GACf,CAAC;EAEF,MAAM,aAAa,MAAA;AACnB,QAAA,UAAgB,MAAM;AAEtB,MAAI,cAAc,CAAC,MAAM,QACvB,OAAA,oBAA0B;;CAI9B,sBAA4B;AAC1B,OAAK,MAAM,WAAW,KAAK,iBAAiB,oBAAoB,EAAE;GAChE,MAAM,OAAO;AACb,OAAI,CAAC,WAAW,KAAK,MAAM,CAAE;AAE7B,QAAK,MAAM,oBAAoB"}

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

@@ -71,7 +71,8 @@ var GestureElement = class extends MediaElement {
 			pointer: this.pointer,
 			region: this.region,
 			disabled: this.disabled,
-			action: this.action
+			action: this.action,
+			value: this.value
 		};
 		if (this.type === "doubletap") this.#cleanup = createDoubleTapGesture(container, onActivate, options);
 		else this.#cleanup = createTapGesture(container, onActivate, options);

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

@@ -1 +1 @@
-{"version":3,"file":"gesture-element.js","names":["#player","#container","#register","#unregister","#cleanup"],"sources":["../../../../src/ui/gesture/gesture-element.ts"],"sourcesContent":["import {\n  createDoubleTapGesture,\n  createTapGesture,\n  type GestureActionName,\n  type GesturePointerType,\n  type GestureRegion,\n  resolveGestureAction,\n} from '@videojs/core/dom';\nimport type { PropertyDeclarationMap, PropertyValues } from '@videojs/element';\nimport { ContextConsumer } from '@videojs/element/context';\n\nimport { containerContext, playerContext } from '../../player/context';\nimport { PlayerController } from '../../player/player-controller';\nimport { MediaElement } from '../media-element';\n\nexport class GestureElement extends MediaElement {\n  static readonly tagName = 'media-gesture';\n\n  static override properties: PropertyDeclarationMap = {\n    type: { type: String },\n    action: { type: String },\n    value: { type: Number },\n    pointer: { type: String },\n    region: { type: String },\n    disabled: { type: Boolean },\n  };\n\n  type: 'tap' | 'doubletap' | (string & {}) = '';\n  action: GestureActionName | (string & {}) = '';\n  value: number | undefined = undefined;\n  pointer: GesturePointerType | undefined = undefined;\n  region: GestureRegion | undefined = undefined;\n  disabled = false;\n\n  readonly #player = new PlayerController(this, playerContext);\n  readonly #container = new ContextConsumer(this, {\n    context: containerContext,\n    callback: () => this.requestUpdate(),\n    subscribe: true,\n  });\n  #cleanup: (() => void) | null = null;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this.style.display = 'none';\n    this.#register();\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.#unregister();\n  }\n\n  protected override update(changed: PropertyValues): void {\n    super.update(changed);\n\n    // Re-register when attributes change.\n    if (this.isConnected) {\n      this.#unregister();\n      this.#register();\n    }\n  }\n\n  #register(): void {\n    const store = this.#player.value;\n    const container = this.#container.value?.container;\n    if (!this.type || !this.action || !store || !container) return;\n\n    const resolver = resolveGestureAction(this.action);\n    if (!resolver) return;\n\n    const { value } = this;\n\n    const onActivate = (event: PointerEvent) => {\n      resolver({ store, value, event });\n    };\n\n    const options = {\n      pointer: this.pointer,\n      region: this.region,\n      disabled: this.disabled,\n      action: this.action,\n    };\n\n    if (this.type === 'doubletap') {\n      this.#cleanup = createDoubleTapGesture(container, onActivate, options);\n    } else {\n      this.#cleanup = createTapGesture(container, onActivate, options);\n    }\n  }\n\n  #unregister(): void {\n    this.#cleanup?.();\n    this.#cleanup = null;\n  }\n}\n"],"mappings":";;;;;;AAeA,IAAa,iBAAb,cAAoC,aAAa;;;cAYH;gBACA;eAChB,KAAA;iBACc,KAAA;gBACN,KAAA;kBACzB;iBAEQ,IAAI,iBAAiB,MAAM,cAAc;oBACtC,IAAI,gBAAgB,MAAM;GAC9C,SAAS;GACT,gBAAgB,KAAK,eAAe;GACpC,WAAW;GACZ,CAAC;kBAC8B;;;iBAxBN;;;oBAE2B;GACnD,MAAM,EAAE,MAAM,QAAQ;GACtB,QAAQ,EAAE,MAAM,QAAQ;GACxB,OAAO,EAAE,MAAM,QAAQ;GACvB,SAAS,EAAE,MAAM,QAAQ;GACzB,QAAQ,EAAE,MAAM,QAAQ;GACxB,UAAU,EAAE,MAAM,SAAS;GAC5B;;CASD;CACA;CAKA;CAEA,oBAAmC;AACjC,QAAM,mBAAmB;AACzB,OAAK,MAAM,UAAU;AACrB,QAAA,UAAgB;;CAGlB,uBAAsC;AACpC,QAAM,sBAAsB;AAC5B,QAAA,YAAkB;;CAGpB,OAA0B,SAA+B;AACvD,QAAM,OAAO,QAAQ;AAGrB,MAAI,KAAK,aAAa;AACpB,SAAA,YAAkB;AAClB,SAAA,UAAgB;;;CAIpB,YAAkB;EAChB,MAAM,QAAQ,MAAA,OAAa;EAC3B,MAAM,YAAY,MAAA,UAAgB,OAAO;AACzC,MAAI,CAAC,KAAK,QAAQ,CAAC,KAAK,UAAU,CAAC,SAAS,CAAC,UAAW;EAExD,MAAM,WAAW,qBAAqB,KAAK,OAAO;AAClD,MAAI,CAAC,SAAU;EAEf,MAAM,EAAE,UAAU;EAElB,MAAM,cAAc,UAAwB;AAC1C,YAAS;IAAE;IAAO;IAAO;IAAO,CAAC;;EAGnC,MAAM,UAAU;GACd,SAAS,KAAK;GACd,QAAQ,KAAK;GACb,UAAU,KAAK;GACf,QAAQ,KAAK;GACd;AAED,MAAI,KAAK,SAAS,YAChB,OAAA,UAAgB,uBAAuB,WAAW,YAAY,QAAQ;MAEtE,OAAA,UAAgB,iBAAiB,WAAW,YAAY,QAAQ;;CAIpE,cAAoB;AAClB,QAAA,WAAiB;AACjB,QAAA,UAAgB"}
+{"version":3,"file":"gesture-element.js","names":["#player","#container","#register","#unregister","#cleanup"],"sources":["../../../../src/ui/gesture/gesture-element.ts"],"sourcesContent":["import {\n  createDoubleTapGesture,\n  createTapGesture,\n  type GestureActionName,\n  type GesturePointerType,\n  type GestureRegion,\n  resolveGestureAction,\n} from '@videojs/core/dom';\nimport type { PropertyDeclarationMap, PropertyValues } from '@videojs/element';\nimport { ContextConsumer } from '@videojs/element/context';\n\nimport { containerContext, playerContext } from '../../player/context';\nimport { PlayerController } from '../../player/player-controller';\nimport { MediaElement } from '../media-element';\n\nexport class GestureElement extends MediaElement {\n  static readonly tagName = 'media-gesture';\n\n  static override properties: PropertyDeclarationMap = {\n    type: { type: String },\n    action: { type: String },\n    value: { type: Number },\n    pointer: { type: String },\n    region: { type: String },\n    disabled: { type: Boolean },\n  };\n\n  type: 'tap' | 'doubletap' | (string & {}) = '';\n  action: GestureActionName | (string & {}) = '';\n  value: number | undefined = undefined;\n  pointer: GesturePointerType | undefined = undefined;\n  region: GestureRegion | undefined = undefined;\n  disabled = false;\n\n  readonly #player = new PlayerController(this, playerContext);\n  readonly #container = new ContextConsumer(this, {\n    context: containerContext,\n    callback: () => this.requestUpdate(),\n    subscribe: true,\n  });\n  #cleanup: (() => void) | null = null;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this.style.display = 'none';\n    this.#register();\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.#unregister();\n  }\n\n  protected override update(changed: PropertyValues): void {\n    super.update(changed);\n\n    // Re-register when attributes change.\n    if (this.isConnected) {\n      this.#unregister();\n      this.#register();\n    }\n  }\n\n  #register(): void {\n    const store = this.#player.value;\n    const container = this.#container.value?.container;\n    if (!this.type || !this.action || !store || !container) return;\n\n    const resolver = resolveGestureAction(this.action);\n    if (!resolver) return;\n\n    const { value } = this;\n\n    const onActivate = (event: PointerEvent) => {\n      resolver({ store, value, event });\n    };\n\n    const options = {\n      pointer: this.pointer,\n      region: this.region,\n      disabled: this.disabled,\n      action: this.action,\n      value: this.value,\n    };\n\n    if (this.type === 'doubletap') {\n      this.#cleanup = createDoubleTapGesture(container, onActivate, options);\n    } else {\n      this.#cleanup = createTapGesture(container, onActivate, options);\n    }\n  }\n\n  #unregister(): void {\n    this.#cleanup?.();\n    this.#cleanup = null;\n  }\n}\n"],"mappings":";;;;;;AAeA,IAAa,iBAAb,cAAoC,aAAa;;;cAYH;gBACA;eAChB,KAAA;iBACc,KAAA;gBACN,KAAA;kBACzB;iBAEQ,IAAI,iBAAiB,MAAM,cAAc;oBACtC,IAAI,gBAAgB,MAAM;GAC9C,SAAS;GACT,gBAAgB,KAAK,eAAe;GACpC,WAAW;GACZ,CAAC;kBAC8B;;;iBAxBN;;;oBAE2B;GACnD,MAAM,EAAE,MAAM,QAAQ;GACtB,QAAQ,EAAE,MAAM,QAAQ;GACxB,OAAO,EAAE,MAAM,QAAQ;GACvB,SAAS,EAAE,MAAM,QAAQ;GACzB,QAAQ,EAAE,MAAM,QAAQ;GACxB,UAAU,EAAE,MAAM,SAAS;GAC5B;;CASD;CACA;CAKA;CAEA,oBAAmC;AACjC,QAAM,mBAAmB;AACzB,OAAK,MAAM,UAAU;AACrB,QAAA,UAAgB;;CAGlB,uBAAsC;AACpC,QAAM,sBAAsB;AAC5B,QAAA,YAAkB;;CAGpB,OAA0B,SAA+B;AACvD,QAAM,OAAO,QAAQ;AAGrB,MAAI,KAAK,aAAa;AACpB,SAAA,YAAkB;AAClB,SAAA,UAAgB;;;CAIpB,YAAkB;EAChB,MAAM,QAAQ,MAAA,OAAa;EAC3B,MAAM,YAAY,MAAA,UAAgB,OAAO;AACzC,MAAI,CAAC,KAAK,QAAQ,CAAC,KAAK,UAAU,CAAC,SAAS,CAAC,UAAW;EAExD,MAAM,WAAW,qBAAqB,KAAK,OAAO;AAClD,MAAI,CAAC,SAAU;EAEf,MAAM,EAAE,UAAU;EAElB,MAAM,cAAc,UAAwB;AAC1C,YAAS;IAAE;IAAO;IAAO;IAAO,CAAC;;EAGnC,MAAM,UAAU;GACd,SAAS,KAAK;GACd,QAAQ,KAAK;GACb,UAAU,KAAK;GACf,QAAQ,KAAK;GACb,OAAO,KAAK;GACb;AAED,MAAI,KAAK,SAAS,YAChB,OAAA,UAAgB,uBAAuB,WAAW,YAAY,QAAQ;MAEtE,OAAA,UAAgB,iBAAiB,WAAW,YAAY,QAAQ;;CAIpE,cAAoB;AAClB,QAAA,WAAiB;AACjB,QAAA,UAAgB"}

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

@@ -61,6 +61,7 @@ var HotkeyElement = class extends MediaElement {
 		this.#cleanup = createHotkey(container, {
 			keys: this.keys,
 			action,
+			value,
 			target: this.target,
 			disabled: this.disabled,
 			repeatable: !isHotkeyToggleAction(action),

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

@@ -1 +1 @@
-{"version":3,"file":"hotkey-element.js","names":["#player","#container","#register","#unregister","#cleanup"],"sources":["../../../../src/ui/hotkey/hotkey-element.ts"],"sourcesContent":["import { createHotkey, type HotkeyActionName, isHotkeyToggleAction, resolveHotkeyAction } from '@videojs/core/dom';\nimport type { PropertyDeclarationMap, PropertyValues } from '@videojs/element';\nimport { ContextConsumer } from '@videojs/element/context';\n\nimport { containerContext, playerContext } from '../../player/context';\nimport { PlayerController } from '../../player/player-controller';\nimport { MediaElement } from '../media-element';\n\nexport class HotkeyElement extends MediaElement {\n  static readonly tagName = 'media-hotkey';\n\n  static override properties: PropertyDeclarationMap = {\n    keys: { type: String },\n    action: { type: String },\n    value: { type: Number },\n    disabled: { type: Boolean },\n    target: { type: String },\n  };\n\n  keys = '';\n  action: HotkeyActionName | (string & {}) = '';\n  value: number | undefined = undefined;\n  disabled = false;\n  target: 'player' | 'document' = 'player';\n\n  readonly #player = new PlayerController(this, playerContext);\n  readonly #container = new ContextConsumer(this, {\n    context: containerContext,\n    callback: () => this.requestUpdate(),\n    subscribe: true,\n  });\n  #cleanup: (() => void) | null = null;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this.style.display = 'none';\n    this.#register();\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.#unregister();\n  }\n\n  protected override update(changed: PropertyValues): void {\n    super.update(changed);\n\n    // Re-register when attributes change.\n    if (this.isConnected) {\n      this.#unregister();\n      this.#register();\n    }\n  }\n\n  #register(): void {\n    const store = this.#player.value;\n    const container = this.#container.value?.container;\n    if (!this.keys || !this.action || !store || !container) return;\n\n    const resolver = resolveHotkeyAction(this.action);\n    if (!resolver) return;\n\n    const { value, action } = this;\n\n    this.#cleanup = createHotkey(container, {\n      keys: this.keys,\n      action,\n      target: this.target,\n      disabled: this.disabled,\n      repeatable: !isHotkeyToggleAction(action),\n      onActivate: (_event, key) => {\n        resolver({ store, key, value });\n      },\n    });\n  }\n\n  #unregister(): void {\n    this.#cleanup?.();\n    this.#cleanup = null;\n  }\n}\n"],"mappings":";;;;;;AAQA,IAAa,gBAAb,cAAmC,aAAa;;;cAWvC;gBACoC;eACf,KAAA;kBACjB;gBACqB;iBAEb,IAAI,iBAAiB,MAAM,cAAc;oBACtC,IAAI,gBAAgB,MAAM;GAC9C,SAAS;GACT,gBAAgB,KAAK,eAAe;GACpC,WAAW;GACZ,CAAC;kBAC8B;;;iBAtBN;;;oBAE2B;GACnD,MAAM,EAAE,MAAM,QAAQ;GACtB,QAAQ,EAAE,MAAM,QAAQ;GACxB,OAAO,EAAE,MAAM,QAAQ;GACvB,UAAU,EAAE,MAAM,SAAS;GAC3B,QAAQ,EAAE,MAAM,QAAQ;GACzB;;CAQD;CACA;CAKA;CAEA,oBAAmC;AACjC,QAAM,mBAAmB;AACzB,OAAK,MAAM,UAAU;AACrB,QAAA,UAAgB;;CAGlB,uBAAsC;AACpC,QAAM,sBAAsB;AAC5B,QAAA,YAAkB;;CAGpB,OAA0B,SAA+B;AACvD,QAAM,OAAO,QAAQ;AAGrB,MAAI,KAAK,aAAa;AACpB,SAAA,YAAkB;AAClB,SAAA,UAAgB;;;CAIpB,YAAkB;EAChB,MAAM,QAAQ,MAAA,OAAa;EAC3B,MAAM,YAAY,MAAA,UAAgB,OAAO;AACzC,MAAI,CAAC,KAAK,QAAQ,CAAC,KAAK,UAAU,CAAC,SAAS,CAAC,UAAW;EAExD,MAAM,WAAW,oBAAoB,KAAK,OAAO;AACjD,MAAI,CAAC,SAAU;EAEf,MAAM,EAAE,OAAO,WAAW;AAE1B,QAAA,UAAgB,aAAa,WAAW;GACtC,MAAM,KAAK;GACX;GACA,QAAQ,KAAK;GACb,UAAU,KAAK;GACf,YAAY,CAAC,qBAAqB,OAAO;GACzC,aAAa,QAAQ,QAAQ;AAC3B,aAAS;KAAE;KAAO;KAAK;KAAO,CAAC;;GAElC,CAAC;;CAGJ,cAAoB;AAClB,QAAA,WAAiB;AACjB,QAAA,UAAgB"}
+{"version":3,"file":"hotkey-element.js","names":["#player","#container","#register","#unregister","#cleanup"],"sources":["../../../../src/ui/hotkey/hotkey-element.ts"],"sourcesContent":["import { createHotkey, type HotkeyActionName, isHotkeyToggleAction, resolveHotkeyAction } from '@videojs/core/dom';\nimport type { PropertyDeclarationMap, PropertyValues } from '@videojs/element';\nimport { ContextConsumer } from '@videojs/element/context';\n\nimport { containerContext, playerContext } from '../../player/context';\nimport { PlayerController } from '../../player/player-controller';\nimport { MediaElement } from '../media-element';\n\nexport class HotkeyElement extends MediaElement {\n  static readonly tagName = 'media-hotkey';\n\n  static override properties: PropertyDeclarationMap = {\n    keys: { type: String },\n    action: { type: String },\n    value: { type: Number },\n    disabled: { type: Boolean },\n    target: { type: String },\n  };\n\n  keys = '';\n  action: HotkeyActionName | (string & {}) = '';\n  value: number | undefined = undefined;\n  disabled = false;\n  target: 'player' | 'document' = 'player';\n\n  readonly #player = new PlayerController(this, playerContext);\n  readonly #container = new ContextConsumer(this, {\n    context: containerContext,\n    callback: () => this.requestUpdate(),\n    subscribe: true,\n  });\n  #cleanup: (() => void) | null = null;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this.style.display = 'none';\n    this.#register();\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.#unregister();\n  }\n\n  protected override update(changed: PropertyValues): void {\n    super.update(changed);\n\n    // Re-register when attributes change.\n    if (this.isConnected) {\n      this.#unregister();\n      this.#register();\n    }\n  }\n\n  #register(): void {\n    const store = this.#player.value;\n    const container = this.#container.value?.container;\n    if (!this.keys || !this.action || !store || !container) return;\n\n    const resolver = resolveHotkeyAction(this.action);\n    if (!resolver) return;\n\n    const { value, action } = this;\n\n    this.#cleanup = createHotkey(container, {\n      keys: this.keys,\n      action,\n      value,\n      target: this.target,\n      disabled: this.disabled,\n      repeatable: !isHotkeyToggleAction(action),\n      onActivate: (_event, key) => {\n        resolver({ store, key, value });\n      },\n    });\n  }\n\n  #unregister(): void {\n    this.#cleanup?.();\n    this.#cleanup = null;\n  }\n}\n"],"mappings":";;;;;;AAQA,IAAa,gBAAb,cAAmC,aAAa;;;cAWvC;gBACoC;eACf,KAAA;kBACjB;gBACqB;iBAEb,IAAI,iBAAiB,MAAM,cAAc;oBACtC,IAAI,gBAAgB,MAAM;GAC9C,SAAS;GACT,gBAAgB,KAAK,eAAe;GACpC,WAAW;GACZ,CAAC;kBAC8B;;;iBAtBN;;;oBAE2B;GACnD,MAAM,EAAE,MAAM,QAAQ;GACtB,QAAQ,EAAE,MAAM,QAAQ;GACxB,OAAO,EAAE,MAAM,QAAQ;GACvB,UAAU,EAAE,MAAM,SAAS;GAC3B,QAAQ,EAAE,MAAM,QAAQ;GACzB;;CAQD;CACA;CAKA;CAEA,oBAAmC;AACjC,QAAM,mBAAmB;AACzB,OAAK,MAAM,UAAU;AACrB,QAAA,UAAgB;;CAGlB,uBAAsC;AACpC,QAAM,sBAAsB;AAC5B,QAAA,YAAkB;;CAGpB,OAA0B,SAA+B;AACvD,QAAM,OAAO,QAAQ;AAGrB,MAAI,KAAK,aAAa;AACpB,SAAA,YAAkB;AAClB,SAAA,UAAgB;;;CAIpB,YAAkB;EAChB,MAAM,QAAQ,MAAA,OAAa;EAC3B,MAAM,YAAY,MAAA,UAAgB,OAAO;AACzC,MAAI,CAAC,KAAK,QAAQ,CAAC,KAAK,UAAU,CAAC,SAAS,CAAC,UAAW;EAExD,MAAM,WAAW,oBAAoB,KAAK,OAAO;AACjD,MAAI,CAAC,SAAU;EAEf,MAAM,EAAE,OAAO,WAAW;AAE1B,QAAA,UAAgB,aAAa,WAAW;GACtC,MAAM,KAAK;GACX;GACA;GACA,QAAQ,KAAK;GACb,UAAU,KAAK;GACf,YAAY,CAAC,qBAAqB,OAAO;GACzC,aAAa,QAAQ,QAAQ;AAC3B,aAAS;KAAE;KAAO;KAAK;KAAO,CAAC;;GAElC,CAAC;;CAGJ,cAAoB;AAClB,QAAA,WAAiB;AACjB,QAAA,UAAgB"}

package/dist/dev/ui/input-indicators/input-indicator-element.d.ts

@@ -0,0 +1,37 @@
+import { MediaElement } from "../media-element.js";
+import { CONTAINER_CONTEXT_KEY, ContainerContextValue } from "../../player/context.js";
+import { PlayerController } from "../../player/player-controller.js";
+import { Context as Context$1 } from "../../node_modules/.pnpm/@lit_context@1.1.6/node_modules/@lit/context/development/lib/create-context.js";
+import { LiveIndicator } from "./live-indicator.js";
+import { index_d_exports } from "../../index.js";
+import { TransitionApi } from "@videojs/core/dom";
+import { PropertyValues } from "@videojs/element";
+import { State } from "@videojs/store";
+import { ContextConsumer } from "@videojs/element/context";
+import { IndicatorLifecycleState, InputActionEvent, MediaSnapshot } from "@videojs/core";
+
+//#region src/ui/input-indicators/input-indicator-element.d.ts
+/** Shared imperative API for status / volume / seek indicator cores. */
+interface InputIndicatorCoreApi<IndicatorState extends IndicatorLifecycleState> {
+  readonly state: State<IndicatorState>;
+  destroy(): void;
+  close(): void;
+  processEvent(event: InputActionEvent, snapshot: MediaSnapshot): boolean;
+}
+declare abstract class InputIndicatorElement<IndicatorState extends IndicatorLifecycleState> extends MediaElement {
+  #private;
+  protected abstract get core(): InputIndicatorCoreApi<IndicatorState>;
+  protected abstract get transition(): TransitionApi;
+  protected abstract get liveIndicator(): LiveIndicator<IndicatorState>;
+  protected abstract syncCoreProps(): void;
+  protected readonly player: PlayerController<index_d_exports.AnyPlayerStore, index_d_exports.AnyPlayerStore>;
+  protected readonly container: ContextConsumer<Context$1<typeof CONTAINER_CONTEXT_KEY, ContainerContextValue>, this>;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+  destroyCallback(): void;
+  protected willUpdate(changed: PropertyValues): void;
+  protected update(changed: PropertyValues): void;
+}
+//#endregion
+export { InputIndicatorElement };
+//# sourceMappingURL=input-indicator-element.d.ts.map

package/dist/dev/ui/input-indicators/input-indicator-element.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"input-indicator-element.d.ts","names":[],"sources":["../../../../src/ui/input-indicators/input-indicator-element.ts"],"mappings":";;;;;;;;;;;;;;UAwBiB,qBAAA,wBAA6C,uBAAA;EAAA,SACnD,KAAA,EAAO,KAAA,CAAW,cAAA;EAC3B,OAAA;EACA,KAAA;EACA,YAAA,CAAa,KAAA,EAAO,gBAAA,EAAkB,QAAA,EAAU,aAAA;AAAA;AAAA,uBAG5B,qBAAA,wBAA6C,uBAAA,UAAiC,YAAA;EAAA;yBAC3E,IAAA,CAAA,GAAQ,qBAAA,CAAsB,cAAA;EAAA,uBAC9B,UAAA,CAAA,GAAc,aAAA;EAAA,uBACd,aAAA,CAAA,GAAiB,aAAA,CAAc,cAAA;EAAA,mBAEnC,aAAA,CAAA;EAAA,mBAEA,MAAA,EAAM,gBAAA,CAJ4B,eAAA,CAI5B,cAAA,EAAA,eAAA,CAAA,cAAA;EAAA,mBACN,SAAA,EAAS,eAAA,CAAA,SAAA,QADH,qBAAA,EACG,qBAAA;EAqBnB,iBAAA,CAAA;EAaA,oBAAA,CAAA;EAUA,eAAA,CAAA;EAAA,UASU,UAAA,CAAW,OAAA,EAAS,cAAA;EAAA,UAKpB,MAAA,CAAO,OAAA,EAAS,cAAA;AAAA"}

package/dist/dev/ui/input-indicators/input-indicator-element.js

@@ -0,0 +1,110 @@
+import { containerContext, playerContext } from "../../player/context.js";
+import { MediaElement } from "../media-element.js";
+import { PlayerController } from "../../player/player-controller.js";
+import { getIndicatorVisibilityCoordinator, getMediaSnapshot, subscribeToInputActions } from "@videojs/core/dom";
+import { ContextConsumer } from "@videojs/element/context";
+import { getRenderedIndicatorState, isIndicatorPresent } from "@videojs/core";
+//#region src/ui/input-indicators/input-indicator-element.ts
+var InputIndicatorElement = class extends MediaElement {
+	constructor(..._args) {
+		super(..._args);
+		this.player = new PlayerController(this, playerContext);
+		this.container = new ContextConsumer(this, {
+			context: containerContext,
+			callback: () => this.#reconnect(),
+			subscribe: true
+		});
+		this.#disconnect = null;
+		this.#inputActionUnsubscribe = null;
+		this.#visibilityUnsubscribe = null;
+		this.#visibilityHandle = null;
+		this.#lastGeneration = 0;
+		this.#snapshot = null;
+	}
+	#disconnect;
+	#inputActionUnsubscribe;
+	#visibilityUnsubscribe;
+	#visibilityHandle;
+	#lastGeneration;
+	#snapshot;
+	#getVisibilityHandle() {
+		return this.#visibilityHandle ??= { close: () => this.core.close() };
+	}
+	#payloadSnapshot() {
+		return this.#snapshot ?? this.core.state.current;
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		if (this.destroyed) return;
+		this.#snapshot = this.core.state.current;
+		this.#disconnect = new AbortController();
+		this.core.state.subscribe(() => this.requestUpdate(), { signal: this.#disconnect.signal });
+		this.transition.state.subscribe(() => this.requestUpdate(), { signal: this.#disconnect.signal });
+		this.hidden = true;
+		this.#reconnect();
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.#inputActionUnsubscribe?.();
+		this.#visibilityUnsubscribe?.();
+		this.#inputActionUnsubscribe = null;
+		this.#visibilityUnsubscribe = null;
+		this.#disconnect?.abort();
+		this.#disconnect = null;
+	}
+	destroyCallback() {
+		this.#inputActionUnsubscribe?.();
+		this.#visibilityUnsubscribe?.();
+		this.core.destroy();
+		this.transition.destroy();
+		this.liveIndicator.remove();
+		super.destroyCallback();
+	}
+	willUpdate(changed) {
+		super.willUpdate(changed);
+		this.syncCoreProps();
+	}
+	update(changed) {
+		super.update(changed);
+		this.#syncTransition();
+		const currentState = this.core.state.current;
+		const transitionState = this.transition.state.current;
+		if (!isIndicatorPresent(currentState, transitionState)) {
+			this.liveIndicator.remove();
+			return;
+		}
+		const state = getRenderedIndicatorState(currentState, this.#payloadSnapshot(), transitionState);
+		this.liveIndicator.render(state);
+	}
+	#syncTransition() {
+		const currentState = this.core.state.current;
+		if (currentState.open) {
+			this.#snapshot = currentState;
+			if (this.#lastGeneration !== currentState.generation) {
+				this.#lastGeneration = currentState.generation;
+				this.transition.open();
+			}
+			return;
+		}
+		const { active, status } = this.transition.state.current;
+		if (active && status !== "ending") this.transition.close(this.liveIndicator.element);
+	}
+	#reconnect() {
+		this.#inputActionUnsubscribe?.();
+		this.#visibilityUnsubscribe?.();
+		this.#inputActionUnsubscribe = null;
+		this.#visibilityUnsubscribe = null;
+		const container = this.container.value?.container;
+		if (!container) return;
+		const visibility = getIndicatorVisibilityCoordinator(container);
+		const visibilityHandle = this.#getVisibilityHandle();
+		this.#visibilityUnsubscribe = visibility.register(visibilityHandle);
+		this.#inputActionUnsubscribe = subscribeToInputActions(container, (event) => {
+			if (this.core.processEvent(event, getMediaSnapshot(this.player.value))) visibility.show(visibilityHandle);
+		});
+	}
+};
+//#endregion
+export { InputIndicatorElement };
+
+//# sourceMappingURL=input-indicator-element.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"input-indicator-element.js","names":["#reconnect","#visibilityHandle","#snapshot","#disconnect","#inputActionUnsubscribe","#visibilityUnsubscribe","#syncTransition","#payloadSnapshot","#lastGeneration","#getVisibilityHandle"],"sources":["../../../../src/ui/input-indicators/input-indicator-element.ts"],"sourcesContent":["import {\n  getRenderedIndicatorState,\n  type IndicatorLifecycleState,\n  type IndicatorVisibilityHandle,\n  type InputActionEvent,\n  isIndicatorPresent,\n  type MediaSnapshot,\n} from '@videojs/core';\nimport {\n  getIndicatorVisibilityCoordinator,\n  getMediaSnapshot,\n  subscribeToInputActions,\n  type TransitionApi,\n} from '@videojs/core/dom';\nimport type { PropertyValues } from '@videojs/element';\nimport { ContextConsumer } from '@videojs/element/context';\nimport type { State as StoreState } from '@videojs/store';\n\nimport { containerContext, playerContext } from '../../player/context';\nimport { PlayerController } from '../../player/player-controller';\nimport { MediaElement } from '../media-element';\nimport type { LiveIndicator } from './live-indicator';\n\n/** Shared imperative API for status / volume / seek indicator cores. */\nexport interface InputIndicatorCoreApi<IndicatorState extends IndicatorLifecycleState> {\n  readonly state: StoreState<IndicatorState>;\n  destroy(): void;\n  close(): void;\n  processEvent(event: InputActionEvent, snapshot: MediaSnapshot): boolean;\n}\n\nexport abstract class InputIndicatorElement<IndicatorState extends IndicatorLifecycleState> extends MediaElement {\n  protected abstract get core(): InputIndicatorCoreApi<IndicatorState>;\n  protected abstract get transition(): TransitionApi;\n  protected abstract get liveIndicator(): LiveIndicator<IndicatorState>;\n\n  protected abstract syncCoreProps(): void;\n\n  protected readonly player = new PlayerController(this, playerContext);\n  protected readonly container = new ContextConsumer(this, {\n    context: containerContext,\n    callback: () => this.#reconnect(),\n    subscribe: true,\n  });\n\n  #disconnect: AbortController | null = null;\n  #inputActionUnsubscribe: (() => void) | null = null;\n  #visibilityUnsubscribe: (() => void) | null = null;\n  #visibilityHandle: IndicatorVisibilityHandle | null = null;\n  #lastGeneration = 0;\n  #snapshot: IndicatorState | null = null;\n\n  #getVisibilityHandle(): IndicatorVisibilityHandle {\n    return (this.#visibilityHandle ??= { close: () => this.core.close() });\n  }\n\n  #payloadSnapshot(): IndicatorState {\n    return this.#snapshot ?? this.core.state.current;\n  }\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    if (this.destroyed) return;\n\n    this.#snapshot = this.core.state.current;\n\n    this.#disconnect = new AbortController();\n    this.core.state.subscribe(() => this.requestUpdate(), { signal: this.#disconnect.signal });\n    this.transition.state.subscribe(() => this.requestUpdate(), { signal: this.#disconnect.signal });\n    this.hidden = true;\n    this.#reconnect();\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.#inputActionUnsubscribe?.();\n    this.#visibilityUnsubscribe?.();\n    this.#inputActionUnsubscribe = null;\n    this.#visibilityUnsubscribe = null;\n    this.#disconnect?.abort();\n    this.#disconnect = null;\n  }\n\n  override destroyCallback(): void {\n    this.#inputActionUnsubscribe?.();\n    this.#visibilityUnsubscribe?.();\n    this.core.destroy();\n    this.transition.destroy();\n    this.liveIndicator.remove();\n    super.destroyCallback();\n  }\n\n  protected override willUpdate(changed: PropertyValues): void {\n    super.willUpdate(changed);\n    this.syncCoreProps();\n  }\n\n  protected override update(changed: PropertyValues): void {\n    super.update(changed);\n    this.#syncTransition();\n\n    const currentState = this.core.state.current;\n    const transitionState = this.transition.state.current;\n    const present = isIndicatorPresent(currentState, transitionState);\n\n    if (!present) {\n      this.liveIndicator.remove();\n      return;\n    }\n\n    const state = getRenderedIndicatorState(currentState, this.#payloadSnapshot(), transitionState);\n    this.liveIndicator.render(state);\n  }\n\n  #syncTransition(): void {\n    const currentState = this.core.state.current;\n\n    if (currentState.open) {\n      this.#snapshot = currentState;\n      if (this.#lastGeneration !== currentState.generation) {\n        this.#lastGeneration = currentState.generation;\n        void this.transition.open();\n      }\n      return;\n    }\n\n    const { active, status } = this.transition.state.current;\n    if (active && status !== 'ending') {\n      void this.transition.close(this.liveIndicator.element);\n    }\n  }\n\n  #reconnect(): void {\n    this.#inputActionUnsubscribe?.();\n    this.#visibilityUnsubscribe?.();\n    this.#inputActionUnsubscribe = null;\n    this.#visibilityUnsubscribe = null;\n\n    const container = this.container.value?.container;\n    if (!container) return;\n\n    const visibility = getIndicatorVisibilityCoordinator(container);\n    const visibilityHandle = this.#getVisibilityHandle();\n    this.#visibilityUnsubscribe = visibility.register(visibilityHandle);\n\n    this.#inputActionUnsubscribe = subscribeToInputActions(container, (event) => {\n      if (this.core.processEvent(event, getMediaSnapshot(this.player.value))) {\n        visibility.show(visibilityHandle);\n      }\n    });\n  }\n}\n"],"mappings":";;;;;;;AA+BA,IAAsB,wBAAtB,cAAoG,aAAa;;;gBAOnF,IAAI,iBAAiB,MAAM,cAAc;mBACtC,IAAI,gBAAgB,MAAM;GACvD,SAAS;GACT,gBAAgB,MAAA,WAAiB;GACjC,WAAW;GACZ,CAAC;qBAEoC;iCACS;gCACD;2BACQ;yBACpC;mBACiB;;CALnC;CACA;CACA;CACA;CACA;CACA;CAEA,uBAAkD;AAChD,SAAQ,MAAA,qBAA2B,EAAE,aAAa,KAAK,KAAK,OAAO,EAAE;;CAGvE,mBAAmC;AACjC,SAAO,MAAA,YAAkB,KAAK,KAAK,MAAM;;CAG3C,oBAAmC;AACjC,QAAM,mBAAmB;AACzB,MAAI,KAAK,UAAW;AAEpB,QAAA,WAAiB,KAAK,KAAK,MAAM;AAEjC,QAAA,aAAmB,IAAI,iBAAiB;AACxC,OAAK,KAAK,MAAM,gBAAgB,KAAK,eAAe,EAAE,EAAE,QAAQ,MAAA,WAAiB,QAAQ,CAAC;AAC1F,OAAK,WAAW,MAAM,gBAAgB,KAAK,eAAe,EAAE,EAAE,QAAQ,MAAA,WAAiB,QAAQ,CAAC;AAChG,OAAK,SAAS;AACd,QAAA,WAAiB;;CAGnB,uBAAsC;AACpC,QAAM,sBAAsB;AAC5B,QAAA,0BAAgC;AAChC,QAAA,yBAA+B;AAC/B,QAAA,yBAA+B;AAC/B,QAAA,wBAA8B;AAC9B,QAAA,YAAkB,OAAO;AACzB,QAAA,aAAmB;;CAGrB,kBAAiC;AAC/B,QAAA,0BAAgC;AAChC,QAAA,yBAA+B;AAC/B,OAAK,KAAK,SAAS;AACnB,OAAK,WAAW,SAAS;AACzB,OAAK,cAAc,QAAQ;AAC3B,QAAM,iBAAiB;;CAGzB,WAA8B,SAA+B;AAC3D,QAAM,WAAW,QAAQ;AACzB,OAAK,eAAe;;CAGtB,OAA0B,SAA+B;AACvD,QAAM,OAAO,QAAQ;AACrB,QAAA,gBAAsB;EAEtB,MAAM,eAAe,KAAK,KAAK,MAAM;EACrC,MAAM,kBAAkB,KAAK,WAAW,MAAM;AAG9C,MAAI,CAFY,mBAAmB,cAAc,gBAAgB,EAEnD;AACZ,QAAK,cAAc,QAAQ;AAC3B;;EAGF,MAAM,QAAQ,0BAA0B,cAAc,MAAA,iBAAuB,EAAE,gBAAgB;AAC/F,OAAK,cAAc,OAAO,MAAM;;CAGlC,kBAAwB;EACtB,MAAM,eAAe,KAAK,KAAK,MAAM;AAErC,MAAI,aAAa,MAAM;AACrB,SAAA,WAAiB;AACjB,OAAI,MAAA,mBAAyB,aAAa,YAAY;AACpD,UAAA,iBAAuB,aAAa;AAC/B,SAAK,WAAW,MAAM;;AAE7B;;EAGF,MAAM,EAAE,QAAQ,WAAW,KAAK,WAAW,MAAM;AACjD,MAAI,UAAU,WAAW,SAClB,MAAK,WAAW,MAAM,KAAK,cAAc,QAAQ;;CAI1D,aAAmB;AACjB,QAAA,0BAAgC;AAChC,QAAA,yBAA+B;AAC/B,QAAA,yBAA+B;AAC/B,QAAA,wBAA8B;EAE9B,MAAM,YAAY,KAAK,UAAU,OAAO;AACxC,MAAI,CAAC,UAAW;EAEhB,MAAM,aAAa,kCAAkC,UAAU;EAC/D,MAAM,mBAAmB,MAAA,qBAA2B;AACpD,QAAA,wBAA8B,WAAW,SAAS,iBAAiB;AAEnE,QAAA,yBAA+B,wBAAwB,YAAY,UAAU;AAC3E,OAAI,KAAK,KAAK,aAAa,OAAO,iBAAiB,KAAK,OAAO,MAAM,CAAC,CACpE,YAAW,KAAK,iBAAiB;IAEnC"}

package/dist/dev/ui/input-indicators/live-indicator.d.ts

@@ -0,0 +1,18 @@
+import { StateAttrMap } from "@videojs/core";
+
+//#region src/ui/input-indicators/live-indicator.d.ts
+interface LiveIndicatorOptions<State extends object> {
+  host: HTMLElement;
+  dataAttrs: StateAttrMap<State>;
+  render: (element: HTMLElement, state: State) => void;
+}
+declare class LiveIndicator<State extends object> {
+  #private;
+  constructor(options: LiveIndicatorOptions<State>);
+  get element(): HTMLElement;
+  render(state: State): HTMLElement;
+  remove(): void;
+}
+//#endregion
+export { LiveIndicator };
+//# sourceMappingURL=live-indicator.d.ts.map

package/dist/dev/ui/input-indicators/live-indicator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"live-indicator.d.ts","names":[],"sources":["../../../../src/ui/input-indicators/live-indicator.ts"],"mappings":";;;UAGiB,oBAAA;EACf,IAAA,EAAM,WAAA;EACN,SAAA,EAAW,YAAA,CAAa,KAAA;EACxB,MAAA,GAAS,OAAA,EAAS,WAAA,EAAa,KAAA,EAAO,KAAA;AAAA;AAAA,cAG3B,aAAA;EAAA;EAKX,WAAA,CAAY,OAAA,EAAS,oBAAA,CAAqB,KAAA;EAAA,IAMtC,OAAA,CAAA,GAAW,WAAA;EAIf,MAAA,CAAO,KAAA,EAAO,KAAA,GAAQ,WAAA;EAQtB,MAAA,CAAA;AAAA"}

package/dist/dev/ui/input-indicators/live-indicator.js

@@ -0,0 +1,32 @@
+import { applyStateDataAttrs } from "@videojs/core/dom";
+//#region src/ui/input-indicators/live-indicator.ts
+var LiveIndicator = class {
+	#host;
+	#dataAttrs;
+	#render;
+	constructor(options) {
+		this.#host = options.host;
+		this.#dataAttrs = options.dataAttrs;
+		this.#render = options.render;
+	}
+	get element() {
+		return this.#host;
+	}
+	render(state) {
+		this.#host.hidden = false;
+		applyStateDataAttrs(this.#host, state, this.#dataAttrs);
+		this.#render(this.#host, state);
+		return this.#host;
+	}
+	remove() {
+		this.#host.hidden = true;
+		for (const key in this.#dataAttrs) {
+			const name = this.#dataAttrs[key];
+			if (name) this.#host.removeAttribute(name);
+		}
+	}
+};
+//#endregion
+export { LiveIndicator };
+
+//# sourceMappingURL=live-indicator.js.map