npm - @videojs/react - Versions diffs - 10.0.0-beta.6 → 10.0.0-beta.7 - Mend

@videojs/react 10.0.0-beta.6 → 10.0.0-beta.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (285) hide show

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

@@ -12,14 +12,15 @@ import { slider as slider$1 } from "./components/slider.js";
 import { time } from "./components/time.js";
 import { preview as preview$1 } from "./components/preview.js";
 import { overlay } from "./components/overlay.js";
+import { poster } from "./components/poster.js";
 import { cn } from "@videojs/utils/style";
 //#region ../skins/dist/default/minimal/tailwind/video.tailwind.js
-const root = (isShadowDOM) => cn(root$1, "bg-black", "after:absolute after:pointer-events-none after:rounded-[inherit] after:z-10", "after:inset-0 after:ring-1 after:ring-inset after:ring-black/15", "dark:after:ring-white/15", {
+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)]", "[&>img]:absolute [&>img]:inset-0 [&>img]:w-full [&>img]:h-full [&>img]:rounded-[inherit]", "[&>img]:[object-fit:var(--media-object-fit,contain)] [&>img]:[object-position:var(--media-object-position,center)] [&>img]:pointer-events-none", "[&>img]:transition-opacity [&>img]:duration-250", "[&>img:not([data-visible])]:opacity-0", "[--media-caption-track-y:-0.5rem]", "[--media-caption-track-delay:600ms]", "[--media-caption-track-duration:150ms]", "motion-reduce:[--media-caption-track-duration:50ms]", "has-[[data-controls][data-visible]]:[--media-caption-track-delay:25ms]", "has-[[data-controls][data-visible]]:[--media-caption-track-y:-3.5rem]", !isShadowDOM ? [
-	"[&_video::-webkit-media-text-track-container]:transition-transform",
+}, "[--media-video-border-radius:var(--media-border-radius,0.75rem)]", "[--media-controls-transition-duration:100ms]", "[--media-controls-transition-delay:0ms]", "[@media(pointer:fine)]:has-[[data-controls]:not([data-visible])]:[--media-controls-transition-delay:500ms]", "[@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:100ms]", "[--media-caption-track-y:-0.5rem]", "[--media-caption-track-delay:calc(var(--media-controls-transition-delay)_+_25ms)]", "[--media-caption-track-duration:var(--media-controls-transition-duration)]", "has-[[data-controls][data-visible]]:[--media-caption-track-y:-3rem]", !isShadowDOM ? [
+	"[&_video::-webkit-media-text-track-container]:transition-[translate]",
 	"[&_video::-webkit-media-text-track-container]:duration-(--media-caption-track-duration)",
 	"[&_video::-webkit-media-text-track-container]:ease-out",
 	"[&_video::-webkit-media-text-track-container]:delay-(--media-caption-track-delay)",
@@ -31,7 +32,7 @@ const root = (isShadowDOM) => cn(root$1, "bg-black", "after:absolute after:point
 	"[&:fullscreen_video]:object-contain": !isShadowDOM,
 	"[&:fullscreen_::slotted(video)]:object-contain": isShadowDOM
 });
-const controls = cn(controls$1, "absolute bottom-0 inset-x-0", "pt-8 px-1.5 pb-1.5 gap-2", "text-white z-10", "will-change-[translate,filter,opacity]", "[@media(pointer:fine)]:transition-[translate,filter,opacity]", "ease-out", "[@media(pointer:fine)]:delay-0 [@media(pointer:fine)]:duration-75", "not-data-visible:opacity-0 not-data-visible:pointer-events-none", "not-data-visible:translate-y-full not-data-visible:blur-sm", "[@media(pointer:fine)]:not-data-visible:delay-500", "[@media(pointer:fine)]:not-data-visible:duration-500", "[@media(pointer:fine)]:motion-reduce:not-data-visible:duration-100", "motion-reduce:not-data-visible:translate-y-0", "motion-reduce:not-data-visible:blur-none", "motion-reduce:not-data-visible:scale-100", "@sm/media-root:pt-10 @sm/media-root:px-3 @sm/media-root:pb-3", "@sm/media-root:gap-3.5");
+const controls = cn(controls$1, "absolute bottom-0 inset-x-0", "pt-8 px-1.5 pb-1.5 gap-2", "[color:var(--media-color-primary,oklch(1_0_0))] z-10", "ease-out", "duration-(--media-controls-transition-duration)", "delay-(--media-controls-transition-delay)", "[@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", "@sm/media-root:pt-10 @sm/media-root:px-3 @sm/media-root:pb-3", "@sm/media-root:gap-3.5");
 const preview = {
 	...preview$1,
 	root: cn("absolute left-(--media-slider-pointer) bottom-[calc(100%+0.5rem)] -translate-x-1/2", "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),

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

	@@ -1 +1 @@
1	- {"version":3,"file":"video.tailwind.js","names":[],"sources":["../../../../../../../../skins/dist/default/minimal/tailwind/video.tailwind.js"],"sourcesContent":["import { controls as controls$1 } from \"./components/controls.js\";\nimport { popup as popup$1 } from \"./components/popup.js\";\nimport { root as root$1 } from \"./components/root.js\";\nimport { iconState } from \"../../shared/tailwind/icon-state.js\";\nimport { tooltipState } from \"../../shared/tailwind/tooltip-state.js\";\nimport { bufferingIndicator } from \"./components/buffering.js\";\nimport { button } from \"./components/button.js\";\nimport { buttonGroup } from \"./components/button-group.js\";\nimport { error } from \"./components/error.js\";\nimport { icon, iconContainer, iconFlipped, iconHidden } from \"./components/icon.js\";\nimport { seek } from \"./components/seek.js\";\nimport { slider as slider$1 } from \"./components/slider.js\";\nimport { time } from \"./components/time.js\";\nimport { preview as preview$1 } from \"./components/preview.js\";\nimport { overlay } from \"./components/overlay.js\";\nimport { cn } from \"@videojs/utils/style\";\n\n//#region src/minimal/tailwind/video.tailwind.ts\nconst root = (isShadowDOM) => cn(root$1, \"bg-black\", \"after:absolute after:pointer-events-none after:rounded-[inherit] after:z-10\", \"after:inset-0 after:ring-1 after:ring-inset after:ring-black/15~~\",~~ \"dark:after:ring-white/15\", {\n\t\"[&_::slotted(video)]:block [&_::slotted(video)]:w-full [&_::slotted(video)]:h-full [&_::slotted(video)]:rounded-(--media-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)]\", \"[~~&>img~~]~~:absolute~~ [~~&>img~~]~~:inset-0~~ [~~&>img~~]:w-~~full~~ [~~&>img~~]:h-~~full [&>img~~]:~~rounded~~-~~[inherit~~]\", \"[~~&>img~~]:[~~object~~-~~fit~~:~~var~~(~~--media~~-~~object-fit,contain~~)] ~~[&>img]~~:[~~object-position:var(~~--media-~~object~~-~~position,center)~~] ~~[&>img]:pointer-events-none~~\", \"[~~&>img~~]:~~transition~~-~~opacity~~ [~~&>img~~]:duration~~-250~~\", \"[~~&>img~~:not([data-visible])]:~~opacity~~-0\", \"[--media-caption-track-y:-0.5rem]\", \"[--media-caption-track-delay:~~600ms]\", \"[~~--media-~~caption~~-~~track~~-~~duration:150ms~~]\", \"~~motion-reduce:~~[--media-caption-track-duration:~~50ms]\", \"has-[[data-controls][data-visible]]:[~~--media-~~caption~~-~~track~~-~~delay:25ms~~]\", \"has-[[data-controls][data-visible]]:[--media-caption-track-y:-~~3.5rem~~]\", !isShadowDOM ? [\n\t\"[&_video::-webkit-media-text-track-container]:transition-~~transform~~\",\n\t\"[&_video::-webkit-media-text-track-container]:duration-(--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-0 inset-x-0\", \"pt-8 px-1.5 pb-1.5 gap-2\", \"~~text~~-~~white~~ z-10\", \"~~will~~-~~change-[translate,filter,opacity]~~\", \"[@media~~(pointer:fine)]:~~transition-~~[translate,filter,opacity]~~\", \"~~ease~~-~~out~~\", \"[@media(pointer:fine)]:~~delay~~-0 [@media(pointer:fine)]:~~duration~~-~~75\"~~, ~~\"not-data-visible:~~opacity~~-0 not-data-visible:pointer-events-none~~\", \"~~not-data-visible:translate-y-full not-data-visible:blur-sm\", \"~~[@media(pointer:~~fine~~)]:~~not~~-~~data~~-~~visible:delay-500~~\", \"[@media(pointer:~~fine~~)]:~~not~~-~~data-visible:duration-500~~\", \"~~[@media(pointer:fine)]:motion-reduce:~~not-data-visible:~~duration~~-~~100\",~~ ~~\"motion-reduce:~~not-data-visible:~~translate~~-y-0\", \"motion-~~reduce~~:not-data-visible:~~blur~~-~~none~~\", \"motion-~~reduce~~:not-data-visible:~~scale~~-~~100~~\", \"@sm/media-root:pt-10 @sm/media-root:px-3 @sm/media-root:pb-3\", \"@sm/media-root:gap-3.5\");\nconst preview = {\n\t...preview$1,\n\troot: cn(\"absolute left-(--media-slider-pointer) bottom-[calc(100%+0.5rem)] -translate-x-1/2\", \"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-44\")\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, \"[--media-popover-side-offset:0.5rem] p-1 bg-transparent\")\n};\n\n//#endregion\nexport { bufferingIndicator, button, buttonGroup, controls, error, icon, iconContainer, iconFlipped, iconHidden, iconState, overlay, popup, preview, root, seek, slider, time, tooltipState };\n//# sourceMappingURL=video.tailwind.js.map"],"mappings":"~~;;;;;;;;;;;;;;;;;AAkBA~~,MAAM,QAAQ,gBAAgB,GAAG,QAAQ,~~YAAY~~,+EAA+E,~~mEAAmE,4BAA4B~~;~~CAClO~~,4RAA4R;CAC5R,wMAAwM,CAAC;CACzM,EAAE,oEAAoE,~~4FAA4F~~,~~kJAAkJ~~,~~mDAAmD~~,~~yCAAyC~~,~~qCAAqC~~,~~uCAAuC~~,~~0CAA0C~~,~~uDAAuD~~,~~0EAA0E~~,~~yEAAyE~~,CAAC,cAAc;~~CAC/tB~~;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,4BAA4B,~~mBAAmB~~,~~0CAA0C,gEAAgE,~~YAAY,~~qEAAqE~~,~~mEAAmE~~,~~8DAA8D~~,~~qDAAqD~~,~~wDAAwD~~,~~sEAAsE~~,~~gDAAgD~~,~~4CAA4C~~,~~4CAA4C,~~gEAAgE,yBAAyB;~~AAC9zB~~,MAAM,UAAU;CACf,GAAG;CACH,MAAM,GAAG,sFAAsF,4CAA4C,kDAAkD,oHAAoH,iIAAiI,8CAA8C,UAAU,KAAK;CAC/e,kBAAkB,GAAG,UAAU,kBAAkB,wDAAwD,wEAAwE;CACjL,WAAW,GAAG,UAAU,WAAW,WAAW;CAC9C;AACD,MAAM,SAAS;CACd,GAAG;CACH,OAAO,GAAG,SAAS,OAAO,sBAAsB;CAChD;AACD,MAAM,QAAQ;CACb,GAAG;CACH,QAAQ,GAAG,QAAQ,SAAS,0DAA0D;CACtF"}
1	+ {"version":3,"file":"video.tailwind.js","names":[],"sources":["../../../../../../../../skins/dist/default/minimal/tailwind/video.tailwind.js"],"sourcesContent":["import { controls as controls$1 } from \"./components/controls.js\";\nimport { popup as popup$1 } from \"./components/popup.js\";\nimport { root as root$1 } from \"./components/root.js\";\nimport { iconState } from \"../../shared/tailwind/icon-state.js\";\nimport { tooltipState } from \"../../shared/tailwind/tooltip-state.js\";\nimport { bufferingIndicator } from \"./components/buffering.js\";\nimport { button } from \"./components/button.js\";\nimport { buttonGroup } from \"./components/button-group.js\";\nimport { error } from \"./components/error.js\";\nimport { icon, iconContainer, iconFlipped, iconHidden } from \"./components/icon.js\";\nimport { seek } from \"./components/seek.js\";\nimport { slider as slider$1 } from \"./components/slider.js\";\nimport { time } from \"./components/time.js\";\nimport { preview as preview$1 } from \"./components/preview.js\";\nimport { overlay } from \"./components/overlay.js\";\nimport { playbackRate } from \"./components/playback-rate.js\";\nimport { poster } from \"./components/poster.js\";\nimport { cn } from \"@videojs/utils/style\";\n\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-transition-duration:100ms]\", \"[--media-controls-transition-delay:0ms]\", \"[@media(pointer:fine)]:has-[[data-controls]:not([data-visible])]:[--media-controls-transition-delay:500ms]\", \"[@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:100ms]\", \"[--media-caption-track-y:-0.5rem]\", \"[--media-caption-track-delay:calc(var(--media-controls-transition-delay)_+_25ms)]\", \"[--media-caption-track-duration:var(--media-controls-transition-duration)]\", \"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-0 inset-x-0\", \"pt-8 px-1.5 pb-1.5 gap-2\", \"[color:var(--media-color-primary,oklch(1_0_0))] z-10\", \"ease-out\", \"duration-(--media-controls-transition-duration)\", \"delay-(--media-controls-transition-delay)\", \"[@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\", \"@sm/media-root:pt-10 @sm/media-root:px-3 @sm/media-root:pb-3\", \"@sm/media-root:gap-3.5\");\nconst preview = {\n\t...preview$1,\n\troot: cn(\"absolute left-(--media-slider-pointer) bottom-[calc(100%+0.5rem)] -translate-x-1/2\", \"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-44\")\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, \"[--media-popover-side-offset:0.5rem] p-1 bg-transparent\")\n};\n\n//#endregion\nexport { bufferingIndicator, button, buttonGroup, controls, error, icon, iconContainer, iconFlipped, iconHidden, iconState, overlay, playbackRate, popup, poster, preview, root, seek, slider, time, tooltipState };\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,gDAAgD,2CAA2C,8GAA8G,iHAAiH,mHAAmH,wGAAwG,qCAAqC,qFAAqF,8EAA8E,uEAAuE,CAAC,cAAc;CACz3B;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,4BAA4B,wDAAwD,YAAY,mDAAmD,6CAA6C,iEAAiE,gEAAgE,4DAA4D,2DAA2D,mEAAmE,iDAAiD,+DAA+D,gEAAgE,yBAAyB;AACnwB,MAAM,UAAU;CACf,GAAG;CACH,MAAM,GAAG,sFAAsF,4CAA4C,kDAAkD,oHAAoH,iIAAiI,8CAA8C,UAAU,KAAK;CAC/e,kBAAkB,GAAG,UAAU,kBAAkB,wDAAwD,wEAAwE;CACjL,WAAW,GAAG,UAAU,WAAW,WAAW;CAC9C;AACD,MAAM,SAAS;CACd,GAAG;CACH,OAAO,GAAG,SAAS,OAAO,sBAAsB;CAChD;AACD,MAAM,QAAQ;CACb,GAAG;CACH,QAAQ,GAAG,QAAQ,SAAS,0DAA0D;CACtF"}

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

@@ -21,6 +21,11 @@ const iconState = {
 		button: "group",
 		off: "hidden opacity-0 group-not-data-active:block group-not-data-active:opacity-100",
 		on: "hidden opacity-0 group-data-active:block group-data-active:opacity-100"
+	},
+	pip: {
+		button: "group",
+		off: "hidden opacity-0 group-not-data-pip:block group-not-data-pip:opacity-100",
+		on: "hidden opacity-0 group-data-pip:block group-data-pip:opacity-100"
 	}
 };

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

	@@ -1 +1 @@
1	- {"version":3,"file":"icon-state.js","names":[],"sources":["../../../../../../../../skins/dist/default/shared/tailwind/icon-state.js"],"sourcesContent":["//#region src/shared/tailwind/icon-state.ts\nconst iconState = {\n\tplay: {\n\t\tbutton: \"group\",\n\t\trestart: \"hidden opacity-0 group-data-ended:block group-data-ended:opacity-100\",\n\t\tplay: \"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};\n\n//#endregion\nexport { iconState };\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"}
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};\n\n//#endregion\nexport { iconState };\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"}

package/dist/dev/ui/popover/popover-popup.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"popover-popup.d.ts","names":[],"sources":["../../../../src/ui/popover/popover-popup.tsx"],"mappings":";;;;;UAaiB,iBAAA,SAA0B,gBAAA,QAAwB,YAAA;;cAKtD,YAAA,EAAY,KAAA,CAAA,yBAAA,CAAA,IAAA,CAAA,iBAAA,WAAA,KAAA,CAAA,aAAA,CAAA,cAAA;AAAA,~~kBA6GR~~,YAAA;EAAA,KACH,KAAA,GAAQ,iBAAA;EAAA,KACR,KAAA,GAAQ,YAAA;AAAA"}
1	+ {"version":3,"file":"popover-popup.d.ts","names":[],"sources":["../../../../src/ui/popover/popover-popup.tsx"],"mappings":";;;;;UAaiB,iBAAA,SAA0B,gBAAA,QAAwB,YAAA;;cAKtD,YAAA,EAAY,KAAA,CAAA,yBAAA,CAAA,IAAA,CAAA,iBAAA,WAAA,KAAA,CAAA,aAAA,CAAA,cAAA;AAAA,kBAkIR,YAAA;EAAA,KACH,KAAA,GAAQ,iBAAA;EAAA,KACR,KAAA,GAAQ,YAAA;AAAA"}

package/dist/dev/ui/popover/popover-popup.js CHANGED Viewed

@@ -3,7 +3,7 @@
 import { useComposedRefs } from "../../utils/use-composed-refs.js";
 import { renderElement } from "../../utils/use-render.js";
 import { usePopoverContext } from "./context.js";
-import { getAnchorPositionStyle, resolveOffsets } from "@videojs/core/dom";
+import { getAnchorPositionStyle, getPopupPositionRect, resolveOffsets } from "@videojs/core/dom";
 import { forwardRef, useCallback, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { supportsAnchorPositioning } from "@videojs/utils/dom";
@@ -41,14 +41,22 @@ const PopoverPopup = forwardRef(function PopoverPopup({ render, className, style
 			const triggerEl = popover.triggerElement;
 			const popupEl = internalRef.current;
 			if (!triggerEl || !popupEl) return;
-			setManualStyle(getAnchorPositionStyle(anchorName, posOpts, triggerEl.getBoundingClientRect(), popupEl.getBoundingClientRect(), document.documentElement.getBoundingClientRect(), resolveOffsets(popupEl)));
+			setManualStyle(getAnchorPositionStyle(anchorName, posOpts, triggerEl.getBoundingClientRect(), getPopupPositionRect(popupEl), document.documentElement.getBoundingClientRect(), resolveOffsets(popupEl)));
 		}
 		measure();
+		const triggerEl = popover.triggerElement;
+		const popupEl = internalRef.current;
 		let rafId = 0;
 		function reposition() {
 			cancelAnimationFrame(rafId);
 			rafId = requestAnimationFrame(measure);
 		}
+		reposition();
+		const resizeObserver = typeof ResizeObserver === "function" ? new ResizeObserver(() => {
+			reposition();
+		}) : null;
+		if (triggerEl && resizeObserver) resizeObserver.observe(triggerEl);
+		if (popupEl && resizeObserver) resizeObserver.observe(popupEl);
 		window.addEventListener("scroll", reposition, {
 			capture: true,
 			passive: true
@@ -56,6 +64,7 @@ const PopoverPopup = forwardRef(function PopoverPopup({ render, className, style
 		window.addEventListener("resize", reposition);
 		return () => {
 			cancelAnimationFrame(rafId);
+			resizeObserver?.disconnect();
 			window.removeEventListener("scroll", reposition, true);
 			window.removeEventListener("resize", reposition);
 		};

package/dist/dev/ui/popover/popover-popup.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"popover-popup.js","names":[],"sources":["../../../../src/ui/popover/popover-popup.tsx"],"sourcesContent":["'use client';\n\nimport type { PopoverState } from '@videojs/core';\nimport { getAnchorPositionStyle, resolveOffsets } from '@videojs/core/dom';\nimport { supportsAnchorPositioning } from '@videojs/utils/dom';\nimport type { CSSProperties } from 'react';\nimport { forwardRef, useCallback, useLayoutEffect, useMemo, useRef, useState } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { useComposedRefs } from '../../utils/use-composed-refs';\nimport { renderElement } from '../../utils/use-render';\nimport { usePopoverContext } from './context';\n\nexport interface PopoverPopupProps extends UIComponentProps<'div', PopoverState> {}\n\nconst POPOVER_RESET: CSSProperties = { position: 'fixed', inset: 'auto', margin: 0 };\n\n/** Container for the popover content. Positioned relative to the trigger using CSS anchor positioning with a JavaScript fallback. */\nexport const PopoverPopup = forwardRef<HTMLDivElement, PopoverPopupProps>(function PopoverPopup(\n { render, className, style, ...elementProps },\n forwardedRef\n) {\n const { core, popover, state, stateAttrMap, anchorName, popupId } = usePopoverContext();\n const internalRef = useRef<HTMLDivElement>(null);\n\n const popupRef = useCallback(\n (el: HTMLDivElement \| null) => {\n popover.setPopupElement(el);\n if (el && supportsAnchorPositioning()) {\n el.style.setProperty('position-anchor', `--${anchorName}`);\n }\n },\n [popover, anchorName]\n );\n\n const composedRef = useComposedRefs(forwardedRef, popupRef, internalRef);\n\n // --- Positioning ---\n\n const posOpts = useMemo(() => ({ side: state.side, align: state.align }), [state.side, state.align]);\n\n // CSS Anchor Positioning — computed from state, no measurement needed.\n // `position-anchor` is set imperatively in the ref callback above\n // because React's style prop silently drops unrecognised CSS properties.\n const anchorStyle = useMemo(() => {\n if (!supportsAnchorPositioning()) return null;\n const { positionAnchor: _, ...rest } = getAnchorPositionStyle(anchorName, posOpts);\n return rest as CSSProperties;\n }, [anchorName, posOpts]);\n\n // Manual fallback — measure rects after layout, before paint.\n const [manualStyle, setManualStyle] = useState<CSSProperties \| null>(null);\n\n useLayoutEffect(() => {\n if (supportsAnchorPositioning()) return;\n if (!state.open) {\n setManualStyle(null);\n return;\n }\n\n function measure(): void {\n const triggerEl = popover.triggerElement;\n const popupEl = internalRef.current;\n if (!triggerEl \|\| !popupEl) return;\n\n const triggerRect = triggerEl.getBoundingClientRect();\n const popupRect = popupEl~~.getBoundingClientRect(~~);\n const boundaryRect = document.documentElement.getBoundingClientRect();\n const offsets = resolveOffsets(popupEl);\n\n setManualStyle(\n getAnchorPositionStyle(anchorName, posOpts, triggerRect, popupRect, boundaryRect, offsets) as CSSProperties\n );\n }\n\n measure();\n\n // ~~Recompute~~ on ~~scroll/resize so the~~ popover ~~tracks~~ ~~its~~ ~~trigger.\~~n let rafId = 0;\n function reposition(): void {\n cancelAnimationFrame(rafId);\n rafId = requestAnimationFrame(measure);\n }\n\n window.addEventListener('scroll', reposition, { capture: true, passive: true });\n window.addEventListener('resize', reposition);\n\n return () => {\n cancelAnimationFrame(rafId);\n window.removeEventListener('scroll', reposition, true);\n window.removeEventListener('resize', reposition);\n };\n }, [state.open, anchorName, posOpts, popover]);\n\n // Anchor path uses computed styles; manual path uses measured styles;\n // fallback resets UA [popover] defaults until positioning is computed.\n const positioningStyle = anchorStyle ?? manualStyle ?? POPOVER_RESET;\n\n // --- Visibility ---\n\n if (!state.open) {\n return null;\n }\n\n // Remap DOM focus events to React synthetic event names.\n const { onFocusOut, ...restPopupProps } = popover.popupProps;\n\n return renderElement(\n 'div',\n { render, className, style },\n {\n state,\n stateAttrMap,\n ref: composedRef,\n props: [\n {\n id: popupId,\n style: positioningStyle,\n ...core.getPopupAttrs(state),\n },\n { ...restPopupProps, onBlur: onFocusOut },\n elementProps,\n ],\n }\n );\n});\n\nexport namespace PopoverPopup {\n export type Props = PopoverPopupProps;\n export type State = PopoverState;\n}\n"],"mappings":";;;;;;;;;;AAeA,MAAM,gBAA+B;CAAE,UAAU;CAAS,OAAO;CAAQ,QAAQ;CAAG;;AAGpF,MAAa,eAAe,WAA8C,SAAS,aACjF,EAAE,QAAQ,WAAW,OAAO,GAAG,gBAC/B,cACA;CACA,MAAM,EAAE,MAAM,SAAS,OAAO,cAAc,YAAY,YAAY,mBAAmB;CACvF,MAAM,cAAc,OAAuB,KAAK;CAYhD,MAAM,cAAc,gBAAgB,cAVnB,aACd,OAA8B;AAC7B,UAAQ,gBAAgB,GAAG;AAC3B,MAAI,MAAM,2BAA2B,CACnC,IAAG,MAAM,YAAY,mBAAmB,KAAK,aAAa;IAG9D,CAAC,SAAS,WAAW,CACtB,EAE2D,YAAY;CAIxE,MAAM,UAAU,eAAe;EAAE,MAAM,MAAM;EAAM,OAAO,MAAM;EAAO,GAAG,CAAC,MAAM,MAAM,MAAM,MAAM,CAAC;CAKpG,MAAM,cAAc,cAAc;AAChC,MAAI,CAAC,2BAA2B,CAAE,QAAO;EACzC,MAAM,EAAE,gBAAgB,GAAG,GAAG,SAAS,uBAAuB,YAAY,QAAQ;AAClF,SAAO;IACN,CAAC,YAAY,QAAQ,CAAC;CAGzB,MAAM,CAAC,aAAa,kBAAkB,SAA+B,KAAK;AAE1E,uBAAsB;AACpB,MAAI,2BAA2B,CAAE;AACjC,MAAI,CAAC,MAAM,MAAM;AACf,kBAAe,KAAK;AACpB;;EAGF,SAAS,UAAgB;GACvB,MAAM,YAAY,QAAQ;GAC1B,MAAM,UAAU,YAAY;AAC5B,OAAI,CAAC,aAAa,CAAC,QAAS;AAO5B,kBACE,uBAAuB,YAAY,SANjB,UAAU,uBAAuB,EACnC,QAAQ,~~uBAAuB~~,~~EAC5B,~~SAAS,gBAAgB,uBAAuB,EACrD,eAAe,QAAQ,CAGqD,CAC3F;;AAGH,WAAS;~~EAGT~~,IAAI,QAAQ;EACZ,SAAS,aAAmB;AAC1B,wBAAqB,MAAM;AAC3B,WAAQ,sBAAsB,QAAQ;;~~AAGxC~~,SAAO,iBAAiB,UAAU,YAAY;GAAE,SAAS;GAAM,SAAS;GAAM,CAAC;AAC/E,SAAO,iBAAiB,UAAU,WAAW;AAE7C,eAAa;AACX,wBAAqB,MAAM;AAC3B,UAAO,oBAAoB,UAAU,YAAY,KAAK;AACtD,UAAO,oBAAoB,UAAU,WAAW;;IAEjD;EAAC,MAAM;EAAM;EAAY;EAAS;EAAQ,CAAC;CAI9C,MAAM,mBAAmB,eAAe,eAAe;AAIvD,KAAI,CAAC,MAAM,KACT,QAAO;CAIT,MAAM,EAAE,YAAY,GAAG,mBAAmB,QAAQ;AAElD,QAAO,cACL,OACA;EAAE;EAAQ;EAAW;EAAO,EAC5B;EACE;EACA;EACA,KAAK;EACL,OAAO;GACL;IACE,IAAI;IACJ,OAAO;IACP,GAAG,KAAK,cAAc,MAAM;IAC7B;GACD;IAAE,GAAG;IAAgB,QAAQ;IAAY;GACzC;GACD;EACF,CACF;EACD"}
1	+ {"version":3,"file":"popover-popup.js","names":[],"sources":["../../../../src/ui/popover/popover-popup.tsx"],"sourcesContent":["'use client';\n\nimport type { PopoverState } from '@videojs/core';\nimport { getAnchorPositionStyle, getPopupPositionRect, resolveOffsets } from '@videojs/core/dom';\nimport { supportsAnchorPositioning } from '@videojs/utils/dom';\nimport type { CSSProperties } from 'react';\nimport { forwardRef, useCallback, useLayoutEffect, useMemo, useRef, useState } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { useComposedRefs } from '../../utils/use-composed-refs';\nimport { renderElement } from '../../utils/use-render';\nimport { usePopoverContext } from './context';\n\nexport interface PopoverPopupProps extends UIComponentProps<'div', PopoverState> {}\n\nconst POPOVER_RESET: CSSProperties = { position: 'fixed', inset: 'auto', margin: 0 };\n\n/** Container for the popover content. Positioned relative to the trigger using CSS anchor positioning with a JavaScript fallback. */\nexport const PopoverPopup = forwardRef<HTMLDivElement, PopoverPopupProps>(function PopoverPopup(\n { render, className, style, ...elementProps },\n forwardedRef\n) {\n const { core, popover, state, stateAttrMap, anchorName, popupId } = usePopoverContext();\n const internalRef = useRef<HTMLDivElement>(null);\n\n const popupRef = useCallback(\n (el: HTMLDivElement \| null) => {\n popover.setPopupElement(el);\n if (el && supportsAnchorPositioning()) {\n el.style.setProperty('position-anchor', `--${anchorName}`);\n }\n },\n [popover, anchorName]\n );\n\n const composedRef = useComposedRefs(forwardedRef, popupRef, internalRef);\n\n // --- Positioning ---\n\n const posOpts = useMemo(() => ({ side: state.side, align: state.align }), [state.side, state.align]);\n\n // CSS Anchor Positioning — computed from state, no measurement needed.\n // `position-anchor` is set imperatively in the ref callback above\n // because React's style prop silently drops unrecognised CSS properties.\n const anchorStyle = useMemo(() => {\n if (!supportsAnchorPositioning()) return null;\n const { positionAnchor: _, ...rest } = getAnchorPositionStyle(anchorName, posOpts);\n return rest as CSSProperties;\n }, [anchorName, posOpts]);\n\n // Manual fallback — measure rects after layout, before paint.\n const [manualStyle, setManualStyle] = useState<CSSProperties \| null>(null);\n\n useLayoutEffect(() => {\n if (supportsAnchorPositioning()) return;\n if (!state.open) {\n setManualStyle(null);\n return;\n }\n\n function measure(): void {\n const triggerEl = popover.triggerElement;\n const popupEl = internalRef.current;\n if (!triggerEl \|\| !popupEl) return;\n\n const triggerRect = triggerEl.getBoundingClientRect();\n const popupRect = getPopupPositionRect(popupEl);\n const boundaryRect = document.documentElement.getBoundingClientRect();\n const offsets = resolveOffsets(popupEl);\n\n setManualStyle(\n getAnchorPositionStyle(anchorName, posOpts, triggerRect, popupRect, boundaryRect, offsets) as CSSProperties\n );\n }\n\n measure();\n const triggerEl = popover.triggerElement;\n const popupEl = internalRef.current;\n\n let rafId = 0;\n function reposition(): void {\n cancelAnimationFrame(rafId);\n rafId = requestAnimationFrame(measure);\n }\n\n // Re-measure after the popover has entered the top layer and whenever\n // its own size or the trigger size changes.\n reposition();\n\n const resizeObserver =\n typeof ResizeObserver === 'function'\n ? new ResizeObserver(() => {\n reposition();\n })\n : null;\n\n if (triggerEl && resizeObserver) {\n resizeObserver.observe(triggerEl);\n }\n\n if (popupEl && resizeObserver) {\n resizeObserver.observe(popupEl);\n }\n\n window.addEventListener('scroll', reposition, { capture: true, passive: true });\n window.addEventListener('resize', reposition);\n\n return () => {\n cancelAnimationFrame(rafId);\n resizeObserver?.disconnect();\n window.removeEventListener('scroll', reposition, true);\n window.removeEventListener('resize', reposition);\n };\n }, [state.open, anchorName, posOpts, popover]);\n\n // Anchor path uses computed styles; manual path uses measured styles;\n // fallback resets UA [popover] defaults until positioning is computed.\n const positioningStyle = anchorStyle ?? manualStyle ?? POPOVER_RESET;\n\n // --- Visibility ---\n\n if (!state.open) {\n return null;\n }\n\n // Remap DOM focus events to React synthetic event names.\n const { onFocusOut, ...restPopupProps } = popover.popupProps;\n\n return renderElement(\n 'div',\n { render, className, style },\n {\n state,\n stateAttrMap,\n ref: composedRef,\n props: [\n {\n id: popupId,\n style: positioningStyle,\n ...core.getPopupAttrs(state),\n },\n { ...restPopupProps, onBlur: onFocusOut },\n elementProps,\n ],\n }\n );\n});\n\nexport namespace PopoverPopup {\n export type Props = PopoverPopupProps;\n export type State = PopoverState;\n}\n"],"mappings":";;;;;;;;;;AAeA,MAAM,gBAA+B;CAAE,UAAU;CAAS,OAAO;CAAQ,QAAQ;CAAG;;AAGpF,MAAa,eAAe,WAA8C,SAAS,aACjF,EAAE,QAAQ,WAAW,OAAO,GAAG,gBAC/B,cACA;CACA,MAAM,EAAE,MAAM,SAAS,OAAO,cAAc,YAAY,YAAY,mBAAmB;CACvF,MAAM,cAAc,OAAuB,KAAK;CAYhD,MAAM,cAAc,gBAAgB,cAVnB,aACd,OAA8B;AAC7B,UAAQ,gBAAgB,GAAG;AAC3B,MAAI,MAAM,2BAA2B,CACnC,IAAG,MAAM,YAAY,mBAAmB,KAAK,aAAa;IAG9D,CAAC,SAAS,WAAW,CACtB,EAE2D,YAAY;CAIxE,MAAM,UAAU,eAAe;EAAE,MAAM,MAAM;EAAM,OAAO,MAAM;EAAO,GAAG,CAAC,MAAM,MAAM,MAAM,MAAM,CAAC;CAKpG,MAAM,cAAc,cAAc;AAChC,MAAI,CAAC,2BAA2B,CAAE,QAAO;EACzC,MAAM,EAAE,gBAAgB,GAAG,GAAG,SAAS,uBAAuB,YAAY,QAAQ;AAClF,SAAO;IACN,CAAC,YAAY,QAAQ,CAAC;CAGzB,MAAM,CAAC,aAAa,kBAAkB,SAA+B,KAAK;AAE1E,uBAAsB;AACpB,MAAI,2BAA2B,CAAE;AACjC,MAAI,CAAC,MAAM,MAAM;AACf,kBAAe,KAAK;AACpB;;EAGF,SAAS,UAAgB;GACvB,MAAM,YAAY,QAAQ;GAC1B,MAAM,UAAU,YAAY;AAC5B,OAAI,CAAC,aAAa,CAAC,QAAS;AAO5B,kBACE,uBAAuB,YAAY,SANjB,UAAU,uBAAuB,EACnC,qBAAqB,QAAQ,EAC1B,SAAS,gBAAgB,uBAAuB,EACrD,eAAe,QAAQ,CAGqD,CAC3F;;AAGH,WAAS;EACT,MAAM,YAAY,QAAQ;EAC1B,MAAM,UAAU,YAAY;EAE5B,IAAI,QAAQ;EACZ,SAAS,aAAmB;AAC1B,wBAAqB,MAAM;AAC3B,WAAQ,sBAAsB,QAAQ;;AAKxC,cAAY;EAEZ,MAAM,iBACJ,OAAO,mBAAmB,aACtB,IAAI,qBAAqB;AACvB,eAAY;IACZ,GACF;AAEN,MAAI,aAAa,eACf,gBAAe,QAAQ,UAAU;AAGnC,MAAI,WAAW,eACb,gBAAe,QAAQ,QAAQ;AAGjC,SAAO,iBAAiB,UAAU,YAAY;GAAE,SAAS;GAAM,SAAS;GAAM,CAAC;AAC/E,SAAO,iBAAiB,UAAU,WAAW;AAE7C,eAAa;AACX,wBAAqB,MAAM;AAC3B,mBAAgB,YAAY;AAC5B,UAAO,oBAAoB,UAAU,YAAY,KAAK;AACtD,UAAO,oBAAoB,UAAU,WAAW;;IAEjD;EAAC,MAAM;EAAM;EAAY;EAAS;EAAQ,CAAC;CAI9C,MAAM,mBAAmB,eAAe,eAAe;AAIvD,KAAI,CAAC,MAAM,KACT,QAAO;CAIT,MAAM,EAAE,YAAY,GAAG,mBAAmB,QAAQ;AAElD,QAAO,cACL,OACA;EAAE;EAAQ;EAAW;EAAO,EAC5B;EACE;EACA;EACA,KAAK;EACL,OAAO;GACL;IACE,IAAI;IACJ,OAAO;IACP,GAAG,KAAK,cAAc,MAAM;IAC7B;GACD;IAAE,GAAG;IAAgB,QAAQ;IAAY;GACzC;GACD;EACF,CACF;EACD"}

package/dist/dev/ui/time-slider/time-slider-root.js CHANGED Viewed

@@ -58,7 +58,7 @@ const TimeSliderRoot = forwardRef(function TimeSliderRoot(componentProps, forwar
 		getCSSVars: getTimeSliderCSSVars,
 		onValueCommit: (percent) => {
 			const media = mediaRef.current;
-			if (media) media.seek(core.valueFromPercent(percent));
+			if (media) media.seek(core.rawValueFromPercent(percent));
 		},
 		onDragStart,
 		onDragEnd

package/dist/dev/ui/time-slider/time-slider-root.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"time-slider-root.js","names":[],"sources":["../../../../src/ui/time-slider/time-slider-root.tsx"],"sourcesContent":["'use client';\n\nimport { TimeSliderCore, TimeSliderDataAttrs } from '@videojs/core';\nimport { getTimeSliderCSSVars, logMissingFeature, selectBuffer, selectTime } from '@videojs/core/dom';\nimport { formatTime } from '@videojs/utils/time';\nimport { forwardRef, useState } from 'react';\n\nimport { usePlayer } from '../../player/context';\nimport type { UIComponentProps } from '../../utils/types';\nimport { useLatestRef } from '../../utils/use-latest-ref';\nimport { renderElement } from '../../utils/use-render';\nimport { useSlider } from '../hooks/use-slider';\nimport { SliderProvider } from '../slider/context';\n\nconst noopSeek = (): Promise<number> => Promise.resolve(0);\n\nexport interface TimeSliderRootProps extends UIComponentProps<'div', TimeSliderCore.State>, TimeSliderCore.Props {\n onDragStart?: (() => void) \| undefined;\n onDragEnd?: (() => void) \| undefined;\n}\n\nexport const TimeSliderRoot = forwardRef<HTMLDivElement, TimeSliderRootProps>(\n function TimeSliderRoot(componentProps, forwardedRef) {\n const {\n render,\n className,\n style,\n label,\n commitThrottle = TimeSliderCore.defaultProps.commitThrottle,\n step = TimeSliderCore.defaultProps.step,\n largeStep = TimeSliderCore.defaultProps.largeStep,\n orientation,\n disabled,\n thumbAlignment,\n onDragStart,\n onDragEnd,\n ...elementProps\n } = componentProps;\n\n const time = usePlayer(selectTime);\n const buffer = usePlayer(selectBuffer);\n\n const [core] = useState(() => new TimeSliderCore());\n core.setProps({ label, step, largeStep, orientation, disabled, thumbAlignment });\n\n // Keep a ref to the latest media state for callbacks that fire outside the render cycle.\n const mediaRef = useLatestRef(time && buffer ? { ...time, ...buffer } : null);\n\n const duration = time?.duration ?? 0;\n\n const { state, cssVars, rootRef, thumbRef, rootProps, rootStyle, thumbProps } = useSlider<TimeSliderCore.State>({\n computeState: (input) => {\n core.setInput(input);\n if (!time \|\| !buffer) {\n core.setMedia({\n currentTime: 0,\n duration: 0,\n seeking: false,\n seek: noopSeek,\n buffered: [],\n seekable: [],\n });\n } else {\n core.setMedia({ ...time, ...buffer });\n }\n\n return core.getState();\n },\n getPercent: () => (duration > 0 ? ((time?.currentTime ?? 0) / duration) * 100 : 0),\n getStepPercent: () => core.getStepPercent(),\n getLargeStepPercent: () => core.getLargeStepPercent(),\n orientation,\n disabled,\n commitThrottle,\n adjustPercent: (rawPercent, thumbSize, trackSize) =>\n core.adjustPercentForAlignment(rawPercent, thumbSize, trackSize),\n getCSSVars: getTimeSliderCSSVars,\n onValueCommit: (percent) => {\n const media = mediaRef.current;\n if (media) media.seek(core.~~valueFromPercent~~(percent));\n },\n onDragStart,\n onDragEnd,\n });\n\n if (!time) {\n if (__DEV__) logMissingFeature('TimeSlider', 'time');\n return null;\n }\n\n return (\n <SliderProvider\n value={{\n state,\n pointerValue: core.valueFromPercent(state.pointerPercent),\n thumbRef,\n thumbProps,\n stateAttrMap: TimeSliderDataAttrs,\n getAttrs: (sliderState) => core.getAttrs(sliderState as TimeSliderCore.State),\n formatValue: (value) => formatTime(value, duration),\n }}\n >\n {renderElement(\n 'div',\n { render, className, style },\n {\n state,\n stateAttrMap: TimeSliderDataAttrs,\n ref: [forwardedRef, rootRef],\n props: [{ style: { ...cssVars, ...rootStyle } }, rootProps, elementProps],\n }\n )}\n </SliderProvider>\n );\n }\n);\n\nexport namespace TimeSliderRoot {\n export type Props = TimeSliderRootProps;\n export type State = TimeSliderCore.State;\n}\n"],"mappings":";;;;;;;;;;;;;;AAcA,MAAM,iBAAkC,QAAQ,QAAQ,EAAE;AAO1D,MAAa,iBAAiB,WAC5B,SAAS,eAAe,gBAAgB,cAAc;CACpD,MAAM,EACJ,QACA,WACA,OACA,OACA,iBAAiB,eAAe,aAAa,gBAC7C,OAAO,eAAe,aAAa,MACnC,YAAY,eAAe,aAAa,WACxC,aACA,UACA,gBACA,aACA,WACA,GAAG,iBACD;CAEJ,MAAM,OAAO,UAAU,WAAW;CAClC,MAAM,SAAS,UAAU,aAAa;CAEtC,MAAM,CAAC,QAAQ,eAAe,IAAI,gBAAgB,CAAC;AACnD,MAAK,SAAS;EAAE;EAAO;EAAM;EAAW;EAAa;EAAU;EAAgB,CAAC;CAGhF,MAAM,WAAW,aAAa,QAAQ,SAAS;EAAE,GAAG;EAAM,GAAG;EAAQ,GAAG,KAAK;CAE7E,MAAM,WAAW,MAAM,YAAY;CAEnC,MAAM,EAAE,OAAO,SAAS,SAAS,UAAU,WAAW,WAAW,eAAe,UAAgC;EAC9G,eAAe,UAAU;AACvB,QAAK,SAAS,MAAM;AACpB,OAAI,CAAC,QAAQ,CAAC,OACZ,MAAK,SAAS;IACZ,aAAa;IACb,UAAU;IACV,SAAS;IACT,MAAM;IACN,UAAU,EAAE;IACZ,UAAU,EAAE;IACb,CAAC;OAEF,MAAK,SAAS;IAAE,GAAG;IAAM,GAAG;IAAQ,CAAC;AAGvC,UAAO,KAAK,UAAU;;EAExB,kBAAmB,WAAW,KAAM,MAAM,eAAe,KAAK,WAAY,MAAM;EAChF,sBAAsB,KAAK,gBAAgB;EAC3C,2BAA2B,KAAK,qBAAqB;EACrD;EACA;EACA;EACA,gBAAgB,YAAY,WAAW,cACrC,KAAK,0BAA0B,YAAY,WAAW,UAAU;EAClE,YAAY;EACZ,gBAAgB,YAAY;GAC1B,MAAM,QAAQ,SAAS;AACvB,OAAI,MAAO,OAAM,KAAK,KAAK,~~iBAAiB~~,QAAQ,CAAC;;~~EAEvD~~;EACA;EACD,CAAC;AAEF,KAAI,CAAC,MAAM;AACI,oBAAkB,cAAc,OAAO;AACpD,SAAO;;AAGT,QACE,oBAAC;EACC,OAAO;GACL;GACA,cAAc,KAAK,iBAAiB,MAAM,eAAe;GACzD;GACA;GACA,cAAc;GACd,WAAW,gBAAgB,KAAK,SAAS,YAAoC;GAC7E,cAAc,UAAU,WAAW,OAAO,SAAS;GACpD;YAEA,cACC,OACA;GAAE;GAAQ;GAAW;GAAO,EAC5B;GACE;GACA,cAAc;GACd,KAAK,CAAC,cAAc,QAAQ;GAC5B,OAAO;IAAC,EAAE,OAAO;KAAE,GAAG;KAAS,GAAG;KAAW,EAAE;IAAE;IAAW;IAAa;GAC1E,CACF;GACc;EAGtB"}
1	+ {"version":3,"file":"time-slider-root.js","names":[],"sources":["../../../../src/ui/time-slider/time-slider-root.tsx"],"sourcesContent":["'use client';\n\nimport { TimeSliderCore, TimeSliderDataAttrs } from '@videojs/core';\nimport { getTimeSliderCSSVars, logMissingFeature, selectBuffer, selectTime } from '@videojs/core/dom';\nimport { formatTime } from '@videojs/utils/time';\nimport { forwardRef, useState } from 'react';\n\nimport { usePlayer } from '../../player/context';\nimport type { UIComponentProps } from '../../utils/types';\nimport { useLatestRef } from '../../utils/use-latest-ref';\nimport { renderElement } from '../../utils/use-render';\nimport { useSlider } from '../hooks/use-slider';\nimport { SliderProvider } from '../slider/context';\n\nconst noopSeek = (): Promise<number> => Promise.resolve(0);\n\nexport interface TimeSliderRootProps extends UIComponentProps<'div', TimeSliderCore.State>, TimeSliderCore.Props {\n onDragStart?: (() => void) \| undefined;\n onDragEnd?: (() => void) \| undefined;\n}\n\nexport const TimeSliderRoot = forwardRef<HTMLDivElement, TimeSliderRootProps>(\n function TimeSliderRoot(componentProps, forwardedRef) {\n const {\n render,\n className,\n style,\n label,\n commitThrottle = TimeSliderCore.defaultProps.commitThrottle,\n step = TimeSliderCore.defaultProps.step,\n largeStep = TimeSliderCore.defaultProps.largeStep,\n orientation,\n disabled,\n thumbAlignment,\n onDragStart,\n onDragEnd,\n ...elementProps\n } = componentProps;\n\n const time = usePlayer(selectTime);\n const buffer = usePlayer(selectBuffer);\n\n const [core] = useState(() => new TimeSliderCore());\n core.setProps({ label, step, largeStep, orientation, disabled, thumbAlignment });\n\n // Keep a ref to the latest media state for callbacks that fire outside the render cycle.\n const mediaRef = useLatestRef(time && buffer ? { ...time, ...buffer } : null);\n\n const duration = time?.duration ?? 0;\n\n const { state, cssVars, rootRef, thumbRef, rootProps, rootStyle, thumbProps } = useSlider<TimeSliderCore.State>({\n computeState: (input) => {\n core.setInput(input);\n if (!time \|\| !buffer) {\n core.setMedia({\n currentTime: 0,\n duration: 0,\n seeking: false,\n seek: noopSeek,\n buffered: [],\n seekable: [],\n });\n } else {\n core.setMedia({ ...time, ...buffer });\n }\n\n return core.getState();\n },\n getPercent: () => (duration > 0 ? ((time?.currentTime ?? 0) / duration) * 100 : 0),\n getStepPercent: () => core.getStepPercent(),\n getLargeStepPercent: () => core.getLargeStepPercent(),\n orientation,\n disabled,\n commitThrottle,\n adjustPercent: (rawPercent, thumbSize, trackSize) =>\n core.adjustPercentForAlignment(rawPercent, thumbSize, trackSize),\n getCSSVars: getTimeSliderCSSVars,\n onValueCommit: (percent) => {\n const media = mediaRef.current;\n if (media) media.seek(core.rawValueFromPercent(percent));\n },\n onDragStart,\n onDragEnd,\n });\n\n if (!time) {\n if (__DEV__) logMissingFeature('TimeSlider', 'time');\n return null;\n }\n\n return (\n <SliderProvider\n value={{\n state,\n pointerValue: core.valueFromPercent(state.pointerPercent),\n thumbRef,\n thumbProps,\n stateAttrMap: TimeSliderDataAttrs,\n getAttrs: (sliderState) => core.getAttrs(sliderState as TimeSliderCore.State),\n formatValue: (value) => formatTime(value, duration),\n }}\n >\n {renderElement(\n 'div',\n { render, className, style },\n {\n state,\n stateAttrMap: TimeSliderDataAttrs,\n ref: [forwardedRef, rootRef],\n props: [{ style: { ...cssVars, ...rootStyle } }, rootProps, elementProps],\n }\n )}\n </SliderProvider>\n );\n }\n);\n\nexport namespace TimeSliderRoot {\n export type Props = TimeSliderRootProps;\n export type State = TimeSliderCore.State;\n}\n"],"mappings":";;;;;;;;;;;;;;AAcA,MAAM,iBAAkC,QAAQ,QAAQ,EAAE;AAO1D,MAAa,iBAAiB,WAC5B,SAAS,eAAe,gBAAgB,cAAc;CACpD,MAAM,EACJ,QACA,WACA,OACA,OACA,iBAAiB,eAAe,aAAa,gBAC7C,OAAO,eAAe,aAAa,MACnC,YAAY,eAAe,aAAa,WACxC,aACA,UACA,gBACA,aACA,WACA,GAAG,iBACD;CAEJ,MAAM,OAAO,UAAU,WAAW;CAClC,MAAM,SAAS,UAAU,aAAa;CAEtC,MAAM,CAAC,QAAQ,eAAe,IAAI,gBAAgB,CAAC;AACnD,MAAK,SAAS;EAAE;EAAO;EAAM;EAAW;EAAa;EAAU;EAAgB,CAAC;CAGhF,MAAM,WAAW,aAAa,QAAQ,SAAS;EAAE,GAAG;EAAM,GAAG;EAAQ,GAAG,KAAK;CAE7E,MAAM,WAAW,MAAM,YAAY;CAEnC,MAAM,EAAE,OAAO,SAAS,SAAS,UAAU,WAAW,WAAW,eAAe,UAAgC;EAC9G,eAAe,UAAU;AACvB,QAAK,SAAS,MAAM;AACpB,OAAI,CAAC,QAAQ,CAAC,OACZ,MAAK,SAAS;IACZ,aAAa;IACb,UAAU;IACV,SAAS;IACT,MAAM;IACN,UAAU,EAAE;IACZ,UAAU,EAAE;IACb,CAAC;OAEF,MAAK,SAAS;IAAE,GAAG;IAAM,GAAG;IAAQ,CAAC;AAGvC,UAAO,KAAK,UAAU;;EAExB,kBAAmB,WAAW,KAAM,MAAM,eAAe,KAAK,WAAY,MAAM;EAChF,sBAAsB,KAAK,gBAAgB;EAC3C,2BAA2B,KAAK,qBAAqB;EACrD;EACA;EACA;EACA,gBAAgB,YAAY,WAAW,cACrC,KAAK,0BAA0B,YAAY,WAAW,UAAU;EAClE,YAAY;EACZ,gBAAgB,YAAY;GAC1B,MAAM,QAAQ,SAAS;AACvB,OAAI,MAAO,OAAM,KAAK,KAAK,oBAAoB,QAAQ,CAAC;;EAE1D;EACA;EACD,CAAC;AAEF,KAAI,CAAC,MAAM;AACI,oBAAkB,cAAc,OAAO;AACpD,SAAO;;AAGT,QACE,oBAAC;EACC,OAAO;GACL;GACA,cAAc,KAAK,iBAAiB,MAAM,eAAe;GACzD;GACA;GACA,cAAc;GACd,WAAW,gBAAgB,KAAK,SAAS,YAAoC;GAC7E,cAAc,UAAU,WAAW,OAAO,SAAS;GACpD;YAEA,cACC,OACA;GAAE;GAAQ;GAAW;GAAO,EAC5B;GACE;GACA,cAAc;GACd,KAAK,CAAC,cAAc,QAAQ;GAC5B,OAAO;IAAC,EAAE,OAAO;KAAE,GAAG;KAAS,GAAG;KAAW,EAAE;IAAE;IAAW;IAAa;GAC1E,CACF;GACc;EAGtB"}

package/dist/dev/ui/tooltip/tooltip-popup.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"tooltip-popup.d.ts","names":[],"sources":["../../../../src/ui/tooltip/tooltip-popup.tsx"],"mappings":";;;;;UAciB,iBAAA,SAA0B,gBAAA,QAAwB,YAAA;;cAKtD,YAAA,EAAY,KAAA,CAAA,yBAAA,CAAA,IAAA,CAAA,iBAAA,WAAA,KAAA,CAAA,aAAA,CAAA,cAAA;AAAA,~~kBA6HR~~,YAAA;EAAA,KACH,KAAA,GAAQ,iBAAA;EAAA,KACR,KAAA,GAAQ,YAAA;AAAA"}
1	+ {"version":3,"file":"tooltip-popup.d.ts","names":[],"sources":["../../../../src/ui/tooltip/tooltip-popup.tsx"],"mappings":";;;;;UAciB,iBAAA,SAA0B,gBAAA,QAAwB,YAAA;;cAKtD,YAAA,EAAY,KAAA,CAAA,yBAAA,CAAA,IAAA,CAAA,iBAAA,WAAA,KAAA,CAAA,aAAA,CAAA,cAAA;AAAA,kBAkJR,YAAA;EAAA,KACH,KAAA,GAAQ,iBAAA;EAAA,KACR,KAAA,GAAQ,YAAA;AAAA"}

package/dist/dev/ui/tooltip/tooltip-popup.js CHANGED Viewed

@@ -3,7 +3,7 @@
 import { useComposedRefs } from "../../utils/use-composed-refs.js";
 import { renderElement } from "../../utils/use-render.js";
 import { useTooltipContext } from "./context.js";
-import { getAnchorPositionStyle, resolveOffsets } from "@videojs/core/dom";
+import { getAnchorPositionStyle, getPopupPositionRect, resolveOffsets } from "@videojs/core/dom";
 import { forwardRef, useCallback, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { TooltipCSSVars } from "@videojs/core";
 import { supportsAnchorPositioning } from "@videojs/utils/dom";
@@ -42,14 +42,22 @@ const TooltipPopup = forwardRef(function TooltipPopup({ render, className, style
 			const triggerEl = tooltip.triggerElement;
 			const popupEl = internalRef.current;
 			if (!triggerEl || !popupEl) return;
-			setManualStyle(getAnchorPositionStyle(anchorName, posOpts, triggerEl.getBoundingClientRect(), popupEl.getBoundingClientRect(), document.documentElement.getBoundingClientRect(), resolveOffsets(popupEl, TooltipCSSVars), TooltipCSSVars));
+			setManualStyle(getAnchorPositionStyle(anchorName, posOpts, triggerEl.getBoundingClientRect(), getPopupPositionRect(popupEl), document.documentElement.getBoundingClientRect(), resolveOffsets(popupEl, TooltipCSSVars), TooltipCSSVars));
 		}
 		measure();
+		const triggerEl = tooltip.triggerElement;
+		const popupEl = internalRef.current;
 		let rafId = 0;
 		function reposition() {
 			cancelAnimationFrame(rafId);
 			rafId = requestAnimationFrame(measure);
 		}
+		reposition();
+		const resizeObserver = typeof ResizeObserver === "function" ? new ResizeObserver(() => {
+			reposition();
+		}) : null;
+		if (triggerEl && resizeObserver) resizeObserver.observe(triggerEl);
+		if (popupEl && resizeObserver) resizeObserver.observe(popupEl);
 		window.addEventListener("scroll", reposition, {
 			capture: true,
 			passive: true
@@ -57,6 +65,7 @@ const TooltipPopup = forwardRef(function TooltipPopup({ render, className, style
 		window.addEventListener("resize", reposition);
 		return () => {
 			cancelAnimationFrame(rafId);
+			resizeObserver?.disconnect();
 			window.removeEventListener("scroll", reposition, true);
 			window.removeEventListener("resize", reposition);
 		};

package/dist/dev/ui/tooltip/tooltip-popup.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"tooltip-popup.js","names":[],"sources":["../../../../src/ui/tooltip/tooltip-popup.tsx"],"sourcesContent":["'use client';\n\nimport type { TooltipState } from '@videojs/core';\nimport { TooltipCSSVars } from '@videojs/core';\nimport { getAnchorPositionStyle, resolveOffsets } from '@videojs/core/dom';\nimport { supportsAnchorPositioning } from '@videojs/utils/dom';\nimport type { CSSProperties } from 'react';\nimport { forwardRef, useCallback, useLayoutEffect, useMemo, useRef, useState } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { useComposedRefs } from '../../utils/use-composed-refs';\nimport { renderElement } from '../../utils/use-render';\nimport { useTooltipContext } from './context';\n\nexport interface TooltipPopupProps extends UIComponentProps<'div', TooltipState> {}\n\nconst POPUP_RESET: CSSProperties = { position: 'fixed', inset: 'auto', margin: 0 };\n\n/** Container for the tooltip content. Positioned relative to the trigger using CSS anchor positioning with a JavaScript fallback. */\nexport const TooltipPopup = forwardRef<HTMLDivElement, TooltipPopupProps>(function TooltipPopup(\n { render, className, style, ...elementProps },\n forwardedRef\n) {\n const { core, tooltip, state, stateAttrMap, anchorName, popupId } = useTooltipContext();\n const internalRef = useRef<HTMLDivElement>(null);\n\n const popupRef = useCallback(\n (el: HTMLDivElement \| null) => {\n tooltip.setPopupElement(el);\n if (el && supportsAnchorPositioning()) {\n el.style.setProperty('position-anchor', `--${anchorName}`);\n }\n },\n [tooltip, anchorName]\n );\n\n const composedRef = useComposedRefs(forwardedRef, popupRef, internalRef);\n\n // --- Positioning ---\n\n const posOpts = useMemo(() => ({ side: state.side, align: state.align }), [state.side, state.align]);\n\n // CSS Anchor Positioning — computed from state, no measurement needed.\n // `position-anchor` is set imperatively in the ref callback above\n // because React's style prop silently drops unrecognised CSS properties.\n const anchorStyle = useMemo(() => {\n if (!supportsAnchorPositioning()) return null;\n const { positionAnchor: _, ...rest } = getAnchorPositionStyle(\n anchorName,\n posOpts,\n undefined,\n undefined,\n undefined,\n undefined,\n TooltipCSSVars\n );\n return rest as CSSProperties;\n }, [anchorName, posOpts]);\n\n // Manual fallback — measure rects after layout, before paint.\n const [manualStyle, setManualStyle] = useState<CSSProperties \| null>(null);\n\n useLayoutEffect(() => {\n if (supportsAnchorPositioning()) return;\n if (!state.open) {\n setManualStyle(null);\n return;\n }\n\n function measure(): void {\n const triggerEl = tooltip.triggerElement;\n const popupEl = internalRef.current;\n if (!triggerEl \|\| !popupEl) return;\n\n const triggerRect = triggerEl.getBoundingClientRect();\n const popupRect = popupEl~~.getBoundingClientRect(~~);\n const boundaryRect = document.documentElement.getBoundingClientRect();\n const offsets = resolveOffsets(popupEl, TooltipCSSVars);\n\n setManualStyle(\n getAnchorPositionStyle(\n anchorName,\n posOpts,\n triggerRect,\n popupRect,\n boundaryRect,\n offsets,\n TooltipCSSVars\n ) as CSSProperties\n );\n }\n\n measure();\n\n // ~~Recompute~~ on ~~scroll/resize so the~~ tooltip ~~tracks~~ ~~its~~ ~~trigger.\~~n let rafId = 0;\n function reposition(): void {\n cancelAnimationFrame(rafId);\n rafId = requestAnimationFrame(measure);\n }\n\n window.addEventListener('scroll', reposition, { capture: true, passive: true });\n window.addEventListener('resize', reposition);\n\n return () => {\n cancelAnimationFrame(rafId);\n window.removeEventListener('scroll', reposition, true);\n window.removeEventListener('resize', reposition);\n };\n }, [state.open, anchorName, posOpts, tooltip]);\n\n // Anchor path uses computed styles; manual path uses measured styles;\n // fallback resets UA [popover] defaults until positioning is computed.\n const positioningStyle = anchorStyle ?? manualStyle ?? POPUP_RESET;\n\n // --- Visibility ---\n\n if (!state.open) {\n return null;\n }\n\n // Remap DOM focus events to React synthetic event names.\n const { onFocusOut, ...restPopupProps } = tooltip.popupProps;\n\n return renderElement(\n 'div',\n { render, className, style },\n {\n state,\n stateAttrMap,\n ref: composedRef,\n props: [\n {\n id: popupId,\n style: positioningStyle,\n ...core.getPopupAttrs(state),\n },\n { ...restPopupProps, onBlur: onFocusOut },\n elementProps,\n ],\n }\n );\n});\n\nexport namespace TooltipPopup {\n export type Props = TooltipPopupProps;\n export type State = TooltipState;\n}\n"],"mappings":";;;;;;;;;;;AAgBA,MAAM,cAA6B;CAAE,UAAU;CAAS,OAAO;CAAQ,QAAQ;CAAG;;AAGlF,MAAa,eAAe,WAA8C,SAAS,aACjF,EAAE,QAAQ,WAAW,OAAO,GAAG,gBAC/B,cACA;CACA,MAAM,EAAE,MAAM,SAAS,OAAO,cAAc,YAAY,YAAY,mBAAmB;CACvF,MAAM,cAAc,OAAuB,KAAK;CAYhD,MAAM,cAAc,gBAAgB,cAVnB,aACd,OAA8B;AAC7B,UAAQ,gBAAgB,GAAG;AAC3B,MAAI,MAAM,2BAA2B,CACnC,IAAG,MAAM,YAAY,mBAAmB,KAAK,aAAa;IAG9D,CAAC,SAAS,WAAW,CACtB,EAE2D,YAAY;CAIxE,MAAM,UAAU,eAAe;EAAE,MAAM,MAAM;EAAM,OAAO,MAAM;EAAO,GAAG,CAAC,MAAM,MAAM,MAAM,MAAM,CAAC;CAKpG,MAAM,cAAc,cAAc;AAChC,MAAI,CAAC,2BAA2B,CAAE,QAAO;EACzC,MAAM,EAAE,gBAAgB,GAAG,GAAG,SAAS,uBACrC,YACA,SACA,QACA,QACA,QACA,QACA,eACD;AACD,SAAO;IACN,CAAC,YAAY,QAAQ,CAAC;CAGzB,MAAM,CAAC,aAAa,kBAAkB,SAA+B,KAAK;AAE1E,uBAAsB;AACpB,MAAI,2BAA2B,CAAE;AACjC,MAAI,CAAC,MAAM,MAAM;AACf,kBAAe,KAAK;AACpB;;EAGF,SAAS,UAAgB;GACvB,MAAM,YAAY,QAAQ;GAC1B,MAAM,UAAU,YAAY;AAC5B,OAAI,CAAC,aAAa,CAAC,QAAS;AAO5B,kBACE,uBACE,YACA,SARgB,UAAU,uBAAuB,EACnC,QAAQ,~~uBAAuB~~,~~EAC5B,~~SAAS,gBAAgB,uBAAuB,EACrD,eAAe,SAAS,eAAe,EAUnD,eACD,CACF;;AAGH,WAAS;~~EAGT~~,IAAI,QAAQ;EACZ,SAAS,aAAmB;AAC1B,wBAAqB,MAAM;AAC3B,WAAQ,sBAAsB,QAAQ;;~~AAGxC~~,SAAO,iBAAiB,UAAU,YAAY;GAAE,SAAS;GAAM,SAAS;GAAM,CAAC;AAC/E,SAAO,iBAAiB,UAAU,WAAW;AAE7C,eAAa;AACX,wBAAqB,MAAM;AAC3B,UAAO,oBAAoB,UAAU,YAAY,KAAK;AACtD,UAAO,oBAAoB,UAAU,WAAW;;IAEjD;EAAC,MAAM;EAAM;EAAY;EAAS;EAAQ,CAAC;CAI9C,MAAM,mBAAmB,eAAe,eAAe;AAIvD,KAAI,CAAC,MAAM,KACT,QAAO;CAIT,MAAM,EAAE,YAAY,GAAG,mBAAmB,QAAQ;AAElD,QAAO,cACL,OACA;EAAE;EAAQ;EAAW;EAAO,EAC5B;EACE;EACA;EACA,KAAK;EACL,OAAO;GACL;IACE,IAAI;IACJ,OAAO;IACP,GAAG,KAAK,cAAc,MAAM;IAC7B;GACD;IAAE,GAAG;IAAgB,QAAQ;IAAY;GACzC;GACD;EACF,CACF;EACD"}
1	+ {"version":3,"file":"tooltip-popup.js","names":[],"sources":["../../../../src/ui/tooltip/tooltip-popup.tsx"],"sourcesContent":["'use client';\n\nimport type { TooltipState } from '@videojs/core';\nimport { TooltipCSSVars } from '@videojs/core';\nimport { getAnchorPositionStyle, getPopupPositionRect, resolveOffsets } from '@videojs/core/dom';\nimport { supportsAnchorPositioning } from '@videojs/utils/dom';\nimport type { CSSProperties } from 'react';\nimport { forwardRef, useCallback, useLayoutEffect, useMemo, useRef, useState } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { useComposedRefs } from '../../utils/use-composed-refs';\nimport { renderElement } from '../../utils/use-render';\nimport { useTooltipContext } from './context';\n\nexport interface TooltipPopupProps extends UIComponentProps<'div', TooltipState> {}\n\nconst POPUP_RESET: CSSProperties = { position: 'fixed', inset: 'auto', margin: 0 };\n\n/** Container for the tooltip content. Positioned relative to the trigger using CSS anchor positioning with a JavaScript fallback. */\nexport const TooltipPopup = forwardRef<HTMLDivElement, TooltipPopupProps>(function TooltipPopup(\n { render, className, style, ...elementProps },\n forwardedRef\n) {\n const { core, tooltip, state, stateAttrMap, anchorName, popupId } = useTooltipContext();\n const internalRef = useRef<HTMLDivElement>(null);\n\n const popupRef = useCallback(\n (el: HTMLDivElement \| null) => {\n tooltip.setPopupElement(el);\n if (el && supportsAnchorPositioning()) {\n el.style.setProperty('position-anchor', `--${anchorName}`);\n }\n },\n [tooltip, anchorName]\n );\n\n const composedRef = useComposedRefs(forwardedRef, popupRef, internalRef);\n\n // --- Positioning ---\n\n const posOpts = useMemo(() => ({ side: state.side, align: state.align }), [state.side, state.align]);\n\n // CSS Anchor Positioning — computed from state, no measurement needed.\n // `position-anchor` is set imperatively in the ref callback above\n // because React's style prop silently drops unrecognised CSS properties.\n const anchorStyle = useMemo(() => {\n if (!supportsAnchorPositioning()) return null;\n const { positionAnchor: _, ...rest } = getAnchorPositionStyle(\n anchorName,\n posOpts,\n undefined,\n undefined,\n undefined,\n undefined,\n TooltipCSSVars\n );\n return rest as CSSProperties;\n }, [anchorName, posOpts]);\n\n // Manual fallback — measure rects after layout, before paint.\n const [manualStyle, setManualStyle] = useState<CSSProperties \| null>(null);\n\n useLayoutEffect(() => {\n if (supportsAnchorPositioning()) return;\n if (!state.open) {\n setManualStyle(null);\n return;\n }\n\n function measure(): void {\n const triggerEl = tooltip.triggerElement;\n const popupEl = internalRef.current;\n if (!triggerEl \|\| !popupEl) return;\n\n const triggerRect = triggerEl.getBoundingClientRect();\n const popupRect = getPopupPositionRect(popupEl);\n const boundaryRect = document.documentElement.getBoundingClientRect();\n const offsets = resolveOffsets(popupEl, TooltipCSSVars);\n\n setManualStyle(\n getAnchorPositionStyle(\n anchorName,\n posOpts,\n triggerRect,\n popupRect,\n boundaryRect,\n offsets,\n TooltipCSSVars\n ) as CSSProperties\n );\n }\n\n measure();\n const triggerEl = tooltip.triggerElement;\n const popupEl = internalRef.current;\n\n let rafId = 0;\n function reposition(): void {\n cancelAnimationFrame(rafId);\n rafId = requestAnimationFrame(measure);\n }\n\n // Re-measure after the tooltip has entered the top layer and whenever\n // its own size or the trigger size changes.\n reposition();\n\n const resizeObserver =\n typeof ResizeObserver === 'function'\n ? new ResizeObserver(() => {\n reposition();\n })\n : null;\n\n if (triggerEl && resizeObserver) {\n resizeObserver.observe(triggerEl);\n }\n\n if (popupEl && resizeObserver) {\n resizeObserver.observe(popupEl);\n }\n\n window.addEventListener('scroll', reposition, { capture: true, passive: true });\n window.addEventListener('resize', reposition);\n\n return () => {\n cancelAnimationFrame(rafId);\n resizeObserver?.disconnect();\n window.removeEventListener('scroll', reposition, true);\n window.removeEventListener('resize', reposition);\n };\n }, [state.open, anchorName, posOpts, tooltip]);\n\n // Anchor path uses computed styles; manual path uses measured styles;\n // fallback resets UA [popover] defaults until positioning is computed.\n const positioningStyle = anchorStyle ?? manualStyle ?? POPUP_RESET;\n\n // --- Visibility ---\n\n if (!state.open) {\n return null;\n }\n\n // Remap DOM focus events to React synthetic event names.\n const { onFocusOut, ...restPopupProps } = tooltip.popupProps;\n\n return renderElement(\n 'div',\n { render, className, style },\n {\n state,\n stateAttrMap,\n ref: composedRef,\n props: [\n {\n id: popupId,\n style: positioningStyle,\n ...core.getPopupAttrs(state),\n },\n { ...restPopupProps, onBlur: onFocusOut },\n elementProps,\n ],\n }\n );\n});\n\nexport namespace TooltipPopup {\n export type Props = TooltipPopupProps;\n export type State = TooltipState;\n}\n"],"mappings":";;;;;;;;;;;AAgBA,MAAM,cAA6B;CAAE,UAAU;CAAS,OAAO;CAAQ,QAAQ;CAAG;;AAGlF,MAAa,eAAe,WAA8C,SAAS,aACjF,EAAE,QAAQ,WAAW,OAAO,GAAG,gBAC/B,cACA;CACA,MAAM,EAAE,MAAM,SAAS,OAAO,cAAc,YAAY,YAAY,mBAAmB;CACvF,MAAM,cAAc,OAAuB,KAAK;CAYhD,MAAM,cAAc,gBAAgB,cAVnB,aACd,OAA8B;AAC7B,UAAQ,gBAAgB,GAAG;AAC3B,MAAI,MAAM,2BAA2B,CACnC,IAAG,MAAM,YAAY,mBAAmB,KAAK,aAAa;IAG9D,CAAC,SAAS,WAAW,CACtB,EAE2D,YAAY;CAIxE,MAAM,UAAU,eAAe;EAAE,MAAM,MAAM;EAAM,OAAO,MAAM;EAAO,GAAG,CAAC,MAAM,MAAM,MAAM,MAAM,CAAC;CAKpG,MAAM,cAAc,cAAc;AAChC,MAAI,CAAC,2BAA2B,CAAE,QAAO;EACzC,MAAM,EAAE,gBAAgB,GAAG,GAAG,SAAS,uBACrC,YACA,SACA,QACA,QACA,QACA,QACA,eACD;AACD,SAAO;IACN,CAAC,YAAY,QAAQ,CAAC;CAGzB,MAAM,CAAC,aAAa,kBAAkB,SAA+B,KAAK;AAE1E,uBAAsB;AACpB,MAAI,2BAA2B,CAAE;AACjC,MAAI,CAAC,MAAM,MAAM;AACf,kBAAe,KAAK;AACpB;;EAGF,SAAS,UAAgB;GACvB,MAAM,YAAY,QAAQ;GAC1B,MAAM,UAAU,YAAY;AAC5B,OAAI,CAAC,aAAa,CAAC,QAAS;AAO5B,kBACE,uBACE,YACA,SARgB,UAAU,uBAAuB,EACnC,qBAAqB,QAAQ,EAC1B,SAAS,gBAAgB,uBAAuB,EACrD,eAAe,SAAS,eAAe,EAUnD,eACD,CACF;;AAGH,WAAS;EACT,MAAM,YAAY,QAAQ;EAC1B,MAAM,UAAU,YAAY;EAE5B,IAAI,QAAQ;EACZ,SAAS,aAAmB;AAC1B,wBAAqB,MAAM;AAC3B,WAAQ,sBAAsB,QAAQ;;AAKxC,cAAY;EAEZ,MAAM,iBACJ,OAAO,mBAAmB,aACtB,IAAI,qBAAqB;AACvB,eAAY;IACZ,GACF;AAEN,MAAI,aAAa,eACf,gBAAe,QAAQ,UAAU;AAGnC,MAAI,WAAW,eACb,gBAAe,QAAQ,QAAQ;AAGjC,SAAO,iBAAiB,UAAU,YAAY;GAAE,SAAS;GAAM,SAAS;GAAM,CAAC;AAC/E,SAAO,iBAAiB,UAAU,WAAW;AAE7C,eAAa;AACX,wBAAqB,MAAM;AAC3B,mBAAgB,YAAY;AAC5B,UAAO,oBAAoB,UAAU,YAAY,KAAK;AACtD,UAAO,oBAAoB,UAAU,WAAW;;IAEjD;EAAC,MAAM;EAAM;EAAY;EAAS;EAAQ,CAAC;CAI9C,MAAM,mBAAmB,eAAe,eAAe;AAIvD,KAAI,CAAC,MAAM,KACT,QAAO;CAIT,MAAM,EAAE,YAAY,GAAG,mBAAmB,QAAQ;AAElD,QAAO,cACL,OACA;EAAE;EAAQ;EAAW;EAAO,EAC5B;EACE;EACA;EACA,KAAK;EACL,OAAO;GACL;IACE,IAAI;IACJ,OAAO;IACP,GAAG,KAAK,cAAc,MAAM;IAC7B;GACD;IAAE,GAAG;IAAgB,QAAQ;IAAY;GACzC;GACD;EACF,CACF;EACD"}

package/dist/dev/ui/volume-slider/volume-slider-root.js CHANGED Viewed

@@ -8,7 +8,7 @@ import { SliderProvider } from "../slider/context.js";
 import { getSliderCSSVars, logMissingFeature, selectVolume } from "@videojs/core/dom";
 import { forwardRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";
-import { SliderDataAttrs, VolumeSliderCore } from "@videojs/core";
+import { VolumeSliderCore, VolumeSliderDataAttrs } from "@videojs/core";
 //#region src/ui/volume-slider/volume-slider-root.tsx
 const noopVolume = {
@@ -63,7 +63,7 @@ const VolumeSliderRoot = forwardRef(function VolumeSliderRoot(componentProps, fo
 			pointerValue: core.valueFromPercent(state.pointerPercent),
 			thumbRef,
 			thumbProps,
-			stateAttrMap: SliderDataAttrs,
+			stateAttrMap: VolumeSliderDataAttrs,
 			getAttrs: (sliderState) => core.getAttrs(sliderState),
 			formatValue: (value) => `${Math.round(value)}%`
 		},
@@ -73,7 +73,7 @@ const VolumeSliderRoot = forwardRef(function VolumeSliderRoot(componentProps, fo
 			style
 		}, {
 			state,
-			stateAttrMap: SliderDataAttrs,
+			stateAttrMap: VolumeSliderDataAttrs,
 			ref: [forwardedRef, rootRef],
 			props: [
 				{ style: {

package/dist/dev/ui/volume-slider/volume-slider-root.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"volume-slider-root.js","names":[],"sources":["../../../../src/ui/volume-slider/volume-slider-root.tsx"],"sourcesContent":["'use client';\n\nimport { ~~SliderDataAttrs~~, ~~VolumeSliderCore~~ } from '@videojs/core';\nimport { getSliderCSSVars, logMissingFeature, selectVolume } from '@videojs/core/dom';\nimport { forwardRef, useState } from 'react';\n\nimport { usePlayer } from '../../player/context';\nimport type { UIComponentProps } from '../../utils/types';\nimport { useLatestRef } from '../../utils/use-latest-ref';\nimport { renderElement } from '../../utils/use-render';\nimport { useSlider } from '../hooks/use-slider';\nimport { SliderProvider } from '../slider/context';\n\nconst noopVolume = {\n volume: 0,\n muted: false,\n volumeAvailability: 'unsupported' as const,\n setVolume: () => 0,\n toggleMuted: () => false,\n};\n\nexport interface VolumeSliderRootProps extends UIComponentProps<'div', VolumeSliderCore.State>, VolumeSliderCore.Props {\n onDragStart?: (() => void) \| undefined;\n onDragEnd?: (() => void) \| undefined;\n}\n\nexport const VolumeSliderRoot = forwardRef<HTMLDivElement, VolumeSliderRootProps>(\n function VolumeSliderRoot(componentProps, forwardedRef) {\n const {\n render,\n className,\n style,\n label,\n orientation,\n step = VolumeSliderCore.defaultProps.step,\n largeStep = VolumeSliderCore.defaultProps.largeStep,\n disabled,\n thumbAlignment,\n onDragStart,\n onDragEnd,\n ...elementProps\n } = componentProps;\n\n const volume = usePlayer(selectVolume);\n\n const [core] = useState(() => new VolumeSliderCore());\n core.setProps({ label, orientation, step, largeStep, disabled, thumbAlignment });\n\n // Keep a ref to the latest volume state for callbacks.\n const volumeRef = useLatestRef(volume);\n\n const { state, cssVars, rootRef, thumbRef, rootProps, rootStyle, thumbProps } = useSlider<VolumeSliderCore.State>({\n computeState: (input) => {\n core.setInput(input);\n core.setMedia(volume ?? noopVolume);\n return core.getState();\n },\n getPercent: () => (volume ? volume.volume * 100 : 0),\n getStepPercent: () => core.getStepPercent(),\n getLargeStepPercent: () => core.getLargeStepPercent(),\n orientation,\n disabled,\n adjustPercent: (rawPercent, thumbSize, trackSize) =>\n core.adjustPercentForAlignment(rawPercent, thumbSize, trackSize),\n getCSSVars: getSliderCSSVars,\n onValueChange: (percent) => {\n volumeRef.current?.setVolume(percent / 100);\n },\n onValueCommit: (percent) => {\n volumeRef.current?.setVolume(percent / 100);\n },\n onDragStart,\n onDragEnd,\n });\n\n if (!volume) {\n if (__DEV__) logMissingFeature('VolumeSlider', 'volume');\n return null;\n }\n\n return (\n <SliderProvider\n value={{\n state,\n pointerValue: core.valueFromPercent(state.pointerPercent),\n thumbRef,\n thumbProps,\n stateAttrMap: ~~SliderDataAttrs~~,\n getAttrs: (sliderState) => core.getAttrs(sliderState as VolumeSliderCore.State),\n formatValue: (value) => `${Math.round(value)}%`,\n }}\n >\n {renderElement(\n 'div',\n { render, className, style },\n {\n state,\n stateAttrMap: ~~SliderDataAttrs~~,\n ref: [forwardedRef, rootRef],\n props: [{ style: { ...cssVars, ...rootStyle } }, rootProps, elementProps],\n }\n )}\n </SliderProvider>\n );\n }\n);\n\nexport namespace VolumeSliderRoot {\n export type Props = VolumeSliderRootProps;\n export type State = VolumeSliderCore.State;\n}\n"],"mappings":";;;;;;;;;;;;;AAaA,MAAM,aAAa;CACjB,QAAQ;CACR,OAAO;CACP,oBAAoB;CACpB,iBAAiB;CACjB,mBAAmB;CACpB;AAOD,MAAa,mBAAmB,WAC9B,SAAS,iBAAiB,gBAAgB,cAAc;CACtD,MAAM,EACJ,QACA,WACA,OACA,OACA,aACA,OAAO,iBAAiB,aAAa,MACrC,YAAY,iBAAiB,aAAa,WAC1C,UACA,gBACA,aACA,WACA,GAAG,iBACD;CAEJ,MAAM,SAAS,UAAU,aAAa;CAEtC,MAAM,CAAC,QAAQ,eAAe,IAAI,kBAAkB,CAAC;AACrD,MAAK,SAAS;EAAE;EAAO;EAAa;EAAM;EAAW;EAAU;EAAgB,CAAC;CAGhF,MAAM,YAAY,aAAa,OAAO;CAEtC,MAAM,EAAE,OAAO,SAAS,SAAS,UAAU,WAAW,WAAW,eAAe,UAAkC;EAChH,eAAe,UAAU;AACvB,QAAK,SAAS,MAAM;AACpB,QAAK,SAAS,UAAU,WAAW;AACnC,UAAO,KAAK,UAAU;;EAExB,kBAAmB,SAAS,OAAO,SAAS,MAAM;EAClD,sBAAsB,KAAK,gBAAgB;EAC3C,2BAA2B,KAAK,qBAAqB;EACrD;EACA;EACA,gBAAgB,YAAY,WAAW,cACrC,KAAK,0BAA0B,YAAY,WAAW,UAAU;EAClE,YAAY;EACZ,gBAAgB,YAAY;AAC1B,aAAU,SAAS,UAAU,UAAU,IAAI;;EAE7C,gBAAgB,YAAY;AAC1B,aAAU,SAAS,UAAU,UAAU,IAAI;;EAE7C;EACA;EACD,CAAC;AAEF,KAAI,CAAC,QAAQ;AACE,oBAAkB,gBAAgB,SAAS;AACxD,SAAO;;AAGT,QACE,oBAAC;EACC,OAAO;GACL;GACA,cAAc,KAAK,iBAAiB,MAAM,eAAe;GACzD;GACA;GACA,cAAc;GACd,WAAW,gBAAgB,KAAK,SAAS,YAAsC;GAC/E,cAAc,UAAU,GAAG,KAAK,MAAM,MAAM,CAAC;GAC9C;YAEA,cACC,OACA;GAAE;GAAQ;GAAW;GAAO,EAC5B;GACE;GACA,cAAc;GACd,KAAK,CAAC,cAAc,QAAQ;GAC5B,OAAO;IAAC,EAAE,OAAO;KAAE,GAAG;KAAS,GAAG;KAAW,EAAE;IAAE;IAAW;IAAa;GAC1E,CACF;GACc;EAGtB"}
1	+ {"version":3,"file":"volume-slider-root.js","names":[],"sources":["../../../../src/ui/volume-slider/volume-slider-root.tsx"],"sourcesContent":["'use client';\n\nimport { VolumeSliderCore, VolumeSliderDataAttrs } from '@videojs/core';\nimport { getSliderCSSVars, logMissingFeature, selectVolume } from '@videojs/core/dom';\nimport { forwardRef, useState } from 'react';\n\nimport { usePlayer } from '../../player/context';\nimport type { UIComponentProps } from '../../utils/types';\nimport { useLatestRef } from '../../utils/use-latest-ref';\nimport { renderElement } from '../../utils/use-render';\nimport { useSlider } from '../hooks/use-slider';\nimport { SliderProvider } from '../slider/context';\n\nconst noopVolume = {\n volume: 0,\n muted: false,\n volumeAvailability: 'unsupported' as const,\n setVolume: () => 0,\n toggleMuted: () => false,\n};\n\nexport interface VolumeSliderRootProps extends UIComponentProps<'div', VolumeSliderCore.State>, VolumeSliderCore.Props {\n onDragStart?: (() => void) \| undefined;\n onDragEnd?: (() => void) \| undefined;\n}\n\nexport const VolumeSliderRoot = forwardRef<HTMLDivElement, VolumeSliderRootProps>(\n function VolumeSliderRoot(componentProps, forwardedRef) {\n const {\n render,\n className,\n style,\n label,\n orientation,\n step = VolumeSliderCore.defaultProps.step,\n largeStep = VolumeSliderCore.defaultProps.largeStep,\n disabled,\n thumbAlignment,\n onDragStart,\n onDragEnd,\n ...elementProps\n } = componentProps;\n\n const volume = usePlayer(selectVolume);\n\n const [core] = useState(() => new VolumeSliderCore());\n core.setProps({ label, orientation, step, largeStep, disabled, thumbAlignment });\n\n // Keep a ref to the latest volume state for callbacks.\n const volumeRef = useLatestRef(volume);\n\n const { state, cssVars, rootRef, thumbRef, rootProps, rootStyle, thumbProps } = useSlider<VolumeSliderCore.State>({\n computeState: (input) => {\n core.setInput(input);\n core.setMedia(volume ?? noopVolume);\n return core.getState();\n },\n getPercent: () => (volume ? volume.volume * 100 : 0),\n getStepPercent: () => core.getStepPercent(),\n getLargeStepPercent: () => core.getLargeStepPercent(),\n orientation,\n disabled,\n adjustPercent: (rawPercent, thumbSize, trackSize) =>\n core.adjustPercentForAlignment(rawPercent, thumbSize, trackSize),\n getCSSVars: getSliderCSSVars,\n onValueChange: (percent) => {\n volumeRef.current?.setVolume(percent / 100);\n },\n onValueCommit: (percent) => {\n volumeRef.current?.setVolume(percent / 100);\n },\n onDragStart,\n onDragEnd,\n });\n\n if (!volume) {\n if (__DEV__) logMissingFeature('VolumeSlider', 'volume');\n return null;\n }\n\n return (\n <SliderProvider\n value={{\n state,\n pointerValue: core.valueFromPercent(state.pointerPercent),\n thumbRef,\n thumbProps,\n stateAttrMap: VolumeSliderDataAttrs,\n getAttrs: (sliderState) => core.getAttrs(sliderState as VolumeSliderCore.State),\n formatValue: (value) => `${Math.round(value)}%`,\n }}\n >\n {renderElement(\n 'div',\n { render, className, style },\n {\n state,\n stateAttrMap: VolumeSliderDataAttrs,\n ref: [forwardedRef, rootRef],\n props: [{ style: { ...cssVars, ...rootStyle } }, rootProps, elementProps],\n }\n )}\n </SliderProvider>\n );\n }\n);\n\nexport namespace VolumeSliderRoot {\n export type Props = VolumeSliderRootProps;\n export type State = VolumeSliderCore.State;\n}\n"],"mappings":";;;;;;;;;;;;;AAaA,MAAM,aAAa;CACjB,QAAQ;CACR,OAAO;CACP,oBAAoB;CACpB,iBAAiB;CACjB,mBAAmB;CACpB;AAOD,MAAa,mBAAmB,WAC9B,SAAS,iBAAiB,gBAAgB,cAAc;CACtD,MAAM,EACJ,QACA,WACA,OACA,OACA,aACA,OAAO,iBAAiB,aAAa,MACrC,YAAY,iBAAiB,aAAa,WAC1C,UACA,gBACA,aACA,WACA,GAAG,iBACD;CAEJ,MAAM,SAAS,UAAU,aAAa;CAEtC,MAAM,CAAC,QAAQ,eAAe,IAAI,kBAAkB,CAAC;AACrD,MAAK,SAAS;EAAE;EAAO;EAAa;EAAM;EAAW;EAAU;EAAgB,CAAC;CAGhF,MAAM,YAAY,aAAa,OAAO;CAEtC,MAAM,EAAE,OAAO,SAAS,SAAS,UAAU,WAAW,WAAW,eAAe,UAAkC;EAChH,eAAe,UAAU;AACvB,QAAK,SAAS,MAAM;AACpB,QAAK,SAAS,UAAU,WAAW;AACnC,UAAO,KAAK,UAAU;;EAExB,kBAAmB,SAAS,OAAO,SAAS,MAAM;EAClD,sBAAsB,KAAK,gBAAgB;EAC3C,2BAA2B,KAAK,qBAAqB;EACrD;EACA;EACA,gBAAgB,YAAY,WAAW,cACrC,KAAK,0BAA0B,YAAY,WAAW,UAAU;EAClE,YAAY;EACZ,gBAAgB,YAAY;AAC1B,aAAU,SAAS,UAAU,UAAU,IAAI;;EAE7C,gBAAgB,YAAY;AAC1B,aAAU,SAAS,UAAU,UAAU,IAAI;;EAE7C;EACA;EACD,CAAC;AAEF,KAAI,CAAC,QAAQ;AACE,oBAAkB,gBAAgB,SAAS;AACxD,SAAO;;AAGT,QACE,oBAAC;EACC,OAAO;GACL;GACA,cAAc,KAAK,iBAAiB,MAAM,eAAe;GACzD;GACA;GACA,cAAc;GACd,WAAW,gBAAgB,KAAK,SAAS,YAAsC;GAC/E,cAAc,UAAU,GAAG,KAAK,MAAM,MAAM,CAAC;GAC9C;YAEA,cACC,OACA;GAAE;GAAQ;GAAW;GAAO,EAC5B;GACE;GACA,cAAc;GACd,KAAK,CAAC,cAAc,QAAQ;GAC5B,OAAO;IAAC,EAAE,OAAO;KAAE,GAAG;KAAS,GAAG;KAAW,EAAE;IAAE;IAAW;IAAa;GAC1E,CACF;GACc;EAGtB"}

package/dist/dev/utils/use-render.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"use-render.d.ts","names":[],"sources":["../../../src/utils/use-render.tsx"],"mappings":";;;;;~~KAUK~~,gBAAA,SAAyB,KAAA,CAAM,GAAA,CAAI,iBAAA;AAAA,UAEvB,uBAAA;EACf,SAAA,cAAuB,KAAA,EAAO,KAAA;EAC9B,KAAA,GAAQ,aAAA,KAAkB,KAAA,EAAO,KAAA,KAAU,aAAA;EAC3C,MAAA,GAAS,UAAA,CAAW,KAAA;AAAA;AAAA,UAGL,mBAAA,oCAAuD,OAAA;EACtE,KAAA,EAAO,KAAA;EACP,GAAA,GAAM,GAAA,CAAI,mBAAA,IAAuB,GAAA,CAAI,mBAAA;EACrC,KAAA;EACA,YAAA,GAAe,YAAA,CAAa,KAAA;AAAA;;;;;;;;;;;;;;;;;;;;;iBA4Cd,aAAA,mDAEc,OAAA,kBACZ,gBAAA,CAAA,CAEhB,OAAA,EAAS,OAAA,EACT,cAAA,EAAgB,uBAAA,CAAwB,KAAA,GACxC,MAAA,EAAQ,mBAAA,CAAoB,KAAA,EAAO,mBAAA,IAClC,YAAA;AAAA,kBAgDc,aAAA;EAAA,KACH,cAAA,UAAwB,uBAAA,CAAwB,KAAA;EAAA,KAChD,UAAA,oCAA8C,OAAA,IAAW,mBAAA,CAAoB,KAAA,EAAO,mBAAA;AAAA"}
1	+ {"version":3,"file":"use-render.d.ts","names":[],"sources":["../../../src/utils/use-render.tsx"],"mappings":";;;;;KAeK,gBAAA,SAAyB,KAAA,CAAM,GAAA,CAAI,iBAAA;AAAA,UAEvB,uBAAA;EACf,SAAA,cAAuB,KAAA,EAAO,KAAA;EAC9B,KAAA,GAAQ,aAAA,KAAkB,KAAA,EAAO,KAAA,KAAU,aAAA;EAC3C,MAAA,GAAS,UAAA,CAAW,KAAA;AAAA;AAAA,UAGL,mBAAA,oCAAuD,OAAA;EACtE,KAAA,EAAO,KAAA;EACP,GAAA,GAAM,GAAA,CAAI,mBAAA,IAAuB,GAAA,CAAI,mBAAA;EACrC,KAAA;EACA,YAAA,GAAe,YAAA,CAAa,KAAA;AAAA;;;;;;;;;;;;;;;;;;;;;iBA4Cd,aAAA,mDAEc,OAAA,kBACZ,gBAAA,CAAA,CAEhB,OAAA,EAAS,OAAA,EACT,cAAA,EAAgB,uBAAA,CAAwB,KAAA,GACxC,MAAA,EAAQ,mBAAA,CAAoB,KAAA,EAAO,mBAAA,IAClC,YAAA;AAAA,kBAgDc,aAAA;EAAA,KACH,cAAA,UAAwB,uBAAA,CAAwB,KAAA;EAAA,KAChD,UAAA,oCAA8C,OAAA,IAAW,mBAAA,CAAoB,KAAA,EAAO,mBAAA;AAAA"}

package/dist/dev/utils/use-render.js CHANGED Viewed

@@ -7,6 +7,10 @@ import { cloneElement, createElement, isValidElement } from "react";
 import { isFunction } from "@videojs/utils/predicate";
 //#region src/utils/use-render.tsx
+/** Check if a value is a render prop (function or React element). */
+function isRenderProp(value) {
+	return isFunction(value) || isValidElement(value);
+}
 function resolveClassName(className, state) {
 	return isFunction(className) ? className(state) : className;
 }
@@ -67,5 +71,5 @@ function renderElement(element, componentProps, params) {
 }
 //#endregion
-export { renderElement };
+export { isRenderProp, renderElement };
 //# sourceMappingURL=use-render.js.map

package/dist/dev/utils/use-render.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"use-render.js","names":[],"sources":["../../../src/utils/use-render.tsx"],"sourcesContent":["'use client';\n\nimport { getStateDataAttrs, type StateAttrMap } from '@videojs/core/dom';\nimport { isFunction } from '@videojs/utils/predicate';\nimport type { CSSProperties, ReactElement, Ref } from 'react';\nimport { cloneElement, createElement, isValidElement } from 'react';\nimport { mergeProps } from './merge-props';\nimport type { HTMLProps, RenderProp } from './types';\nimport { composeRefs } from './use-composed-refs';\n\ntype IntrinsicTagName = keyof React.JSX.IntrinsicElements;\n\nexport interface UseRenderComponentProps<State> {\n className?: string \| ((state: State) => string \| undefined) \| undefined;\n style?: CSSProperties \| ((state: State) => CSSProperties \| undefined) \| undefined;\n render?: RenderProp<State> \| undefined;\n}\n\nexport interface UseRenderParameters<State, RenderedElementType extends Element> {\n state: State;\n ref?: Ref<RenderedElementType> \| Ref<RenderedElementType>[] \| undefined;\n props?: object \| object[] \| undefined;\n stateAttrMap?: StateAttrMap<State> \| undefined;\n}\n\nfunction resolveClassName<State>(\n className: string \| ((state: State) => string \| undefined) \| undefined,\n state: State\n): string \| undefined {\n return isFunction(className) ? className(state) : className;\n}\n\nfunction resolveStyle<State>(\n style: CSSProperties \| ((state: State) => CSSProperties \| undefined) \| undefined,\n state: State\n): CSSProperties \| undefined {\n return isFunction(style) ? style(state) : style;\n}\n\nfunction getElementRef(element: ReactElement): Ref<unknown> \| undefined {\n // React 19+ uses element.props.ref, older versions use element.ref\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n const elementAny = element as any;\n return elementAny.ref ?? elementAny.props?.ref;\n}\n\n/*\n Render a UI component element.\n \n Handles:\n * - Default tag rendering\n * - Render prop (element or function)\n * - Props merging (event handlers chained, className concatenated, style merged)\n * - Ref composition\n * - className/style as functions of state\n \n @public\n * @example\n * ```tsx\n * return renderElement('button', componentProps, {\n * state,\n * ref: [forwardedRef, buttonRef],\n * props: [{ type: 'button' }, elementProps, getButtonProps],\n * });\n * ```\n */\nexport function renderElement<\n State extends object,\n RenderedElementType extends Element,\n TagName extends IntrinsicTagName,\n>(\n element: TagName,\n componentProps: UseRenderComponentProps<State>,\n params: UseRenderParameters<State, RenderedElementType>\n): ReactElement \| null {\n const { className: classNameProp, style: styleProp, render } = componentProps;\n const { state, ref, props, stateAttrMap } = params;\n\n // Resolve className and style if they're functions\n const className = resolveClassName(classNameProp, state);\n const style = resolveStyle(styleProp, state);\n\n // Generate data attributes from state\n const stateDataAttrs = getStateDataAttrs(state, stateAttrMap);\n\n // Merge: state data attrs first, then props (so props can override)\n const propsArray = Array.isArray(props) ? props : props ? [props] : [];\n const mergedProps = mergeProps(stateDataAttrs, ...(propsArray as Record<string, unknown>[]));\n\n if (className !== undefined) {\n // Add resolved className and style\n mergedProps.className = mergedProps.className ? `${mergedProps.className} ${className}` : className;\n }\n\n if (style !== undefined) {\n mergedProps.style = mergedProps.style ? { ...(mergedProps.style as CSSProperties), ...style } : style;\n }\n\n if (isFunction(render)) {\n // Render function: call with props and state\n const mergedRef = composeRefs(ref, mergedProps.ref);\n return render({ ...mergedProps, ref: mergedRef } as HTMLProps, state);\n }\n\n if (isValidElement(render)) {\n const elementRef = getElementRef(render);\n\n const mergedRef = composeRefs(ref, mergedProps.ref, elementRef);\n\n const elementProps = mergeProps(mergedProps, render.props as Record<string, unknown>);\n elementProps.ref = mergedRef;\n\n return cloneElement(render, elementProps);\n }\n\n // Default tag\n const mergedRef = composeRefs(ref, mergedProps.ref);\n mergedProps.ref = mergedRef;\n\n return createElement(element, mergedProps);\n}\n\nexport namespace renderElement {\n export type ComponentProps<State> = UseRenderComponentProps<State>;\n export type Parameters<State, RenderedElementType extends Element> = UseRenderParameters<State, RenderedElementType>;\n}\n"],"mappings":"~~;;;;;;;;;AAyBA~~,SAAS,iBACP,WACA,OACoB;AACpB,QAAO,WAAW,UAAU,GAAG,UAAU,MAAM,GAAG;;AAGpD,SAAS,aACP,OACA,OAC2B;AAC3B,QAAO,WAAW,MAAM,GAAG,MAAM,MAAM,GAAG;;AAG5C,SAAS,cAAc,SAAiD;CAGtE,MAAM,aAAa;AACnB,QAAO,WAAW,OAAO,WAAW,OAAO;;;;;;;;;;;;;;;;;;;;;;AAuB7C,SAAgB,cAKd,SACA,gBACA,QACqB;CACrB,MAAM,EAAE,WAAW,eAAe,OAAO,WAAW,WAAW;CAC/D,MAAM,EAAE,OAAO,KAAK,OAAO,iBAAiB;CAG5C,MAAM,YAAY,iBAAiB,eAAe,MAAM;CACxD,MAAM,QAAQ,aAAa,WAAW,MAAM;CAO5C,MAAM,cAAc,WAJG,kBAAkB,OAAO,aAAa,EAId,GAD5B,MAAM,QAAQ,MAAM,GAAG,QAAQ,QAAQ,CAAC,MAAM,GAAG,EAAE,CACsB;AAE5F,KAAI,cAAc,OAEhB,aAAY,YAAY,YAAY,YAAY,GAAG,YAAY,UAAU,GAAG,cAAc;AAG5F,KAAI,UAAU,OACZ,aAAY,QAAQ,YAAY,QAAQ;EAAE,GAAI,YAAY;EAAyB,GAAG;EAAO,GAAG;AAGlG,KAAI,WAAW,OAAO,EAAE;EAEtB,MAAM,YAAY,YAAY,KAAK,YAAY,IAAI;AACnD,SAAO,OAAO;GAAE,GAAG;GAAa,KAAK;GAAW,EAAe,MAAM;;AAGvE,KAAI,eAAe,OAAO,EAAE;EAC1B,MAAM,aAAa,cAAc,OAAO;EAExC,MAAM,YAAY,YAAY,KAAK,YAAY,KAAK,WAAW;EAE/D,MAAM,eAAe,WAAW,aAAa,OAAO,MAAiC;AACrF,eAAa,MAAM;AAEnB,SAAO,aAAa,QAAQ,aAAa;;AAK3C,aAAY,MADM,YAAY,KAAK,YAAY,IAAI;AAGnD,QAAO,cAAc,SAAS,YAAY"}
1	+ {"version":3,"file":"use-render.js","names":[],"sources":["../../../src/utils/use-render.tsx"],"sourcesContent":["'use client';\n\nimport { getStateDataAttrs, type StateAttrMap } from '@videojs/core/dom';\nimport { isFunction } from '@videojs/utils/predicate';\nimport type { CSSProperties, ReactElement, Ref } from 'react';\nimport { cloneElement, createElement, isValidElement } from 'react';\nimport { mergeProps } from './merge-props';\nimport type { HTMLProps, RenderProp } from './types';\nimport { composeRefs } from './use-composed-refs';\n\n/** Check if a value is a render prop (function or React element). /\nexport function isRenderProp(value: unknown): value is RenderProp<any> {\n return isFunction(value) \|\| isValidElement(value);\n}\n\ntype IntrinsicTagName = keyof React.JSX.IntrinsicElements;\n\nexport interface UseRenderComponentProps<State> {\n className?: string \| ((state: State) => string \| undefined) \| undefined;\n style?: CSSProperties \| ((state: State) => CSSProperties \| undefined) \| undefined;\n render?: RenderProp<State> \| undefined;\n}\n\nexport interface UseRenderParameters<State, RenderedElementType extends Element> {\n state: State;\n ref?: Ref<RenderedElementType> \| Ref<RenderedElementType>[] \| undefined;\n props?: object \| object[] \| undefined;\n stateAttrMap?: StateAttrMap<State> \| undefined;\n}\n\nfunction resolveClassName<State>(\n className: string \| ((state: State) => string \| undefined) \| undefined,\n state: State\n): string \| undefined {\n return isFunction(className) ? className(state) : className;\n}\n\nfunction resolveStyle<State>(\n style: CSSProperties \| ((state: State) => CSSProperties \| undefined) \| undefined,\n state: State\n): CSSProperties \| undefined {\n return isFunction(style) ? style(state) : style;\n}\n\nfunction getElementRef(element: ReactElement): Ref<unknown> \| undefined {\n // React 19+ uses element.props.ref, older versions use element.ref\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n const elementAny = element as any;\n return elementAny.ref ?? elementAny.props?.ref;\n}\n\n/\n Render a UI component element.\n \n Handles:\n * - Default tag rendering\n * - Render prop (element or function)\n * - Props merging (event handlers chained, className concatenated, style merged)\n * - Ref composition\n * - className/style as functions of state\n \n @public\n * @example\n * ```tsx\n * return renderElement('button', componentProps, {\n * state,\n * ref: [forwardedRef, buttonRef],\n * props: [{ type: 'button' }, elementProps, getButtonProps],\n * });\n * ```\n */\nexport function renderElement<\n State extends object,\n RenderedElementType extends Element,\n TagName extends IntrinsicTagName,\n>(\n element: TagName,\n componentProps: UseRenderComponentProps<State>,\n params: UseRenderParameters<State, RenderedElementType>\n): ReactElement \| null {\n const { className: classNameProp, style: styleProp, render } = componentProps;\n const { state, ref, props, stateAttrMap } = params;\n\n // Resolve className and style if they're functions\n const className = resolveClassName(classNameProp, state);\n const style = resolveStyle(styleProp, state);\n\n // Generate data attributes from state\n const stateDataAttrs = getStateDataAttrs(state, stateAttrMap);\n\n // Merge: state data attrs first, then props (so props can override)\n const propsArray = Array.isArray(props) ? props : props ? [props] : [];\n const mergedProps = mergeProps(stateDataAttrs, ...(propsArray as Record<string, unknown>[]));\n\n if (className !== undefined) {\n // Add resolved className and style\n mergedProps.className = mergedProps.className ? `${mergedProps.className} ${className}` : className;\n }\n\n if (style !== undefined) {\n mergedProps.style = mergedProps.style ? { ...(mergedProps.style as CSSProperties), ...style } : style;\n }\n\n if (isFunction(render)) {\n // Render function: call with props and state\n const mergedRef = composeRefs(ref, mergedProps.ref);\n return render({ ...mergedProps, ref: mergedRef } as HTMLProps, state);\n }\n\n if (isValidElement(render)) {\n const elementRef = getElementRef(render);\n\n const mergedRef = composeRefs(ref, mergedProps.ref, elementRef);\n\n const elementProps = mergeProps(mergedProps, render.props as Record<string, unknown>);\n elementProps.ref = mergedRef;\n\n return cloneElement(render, elementProps);\n }\n\n // Default tag\n const mergedRef = composeRefs(ref, mergedProps.ref);\n mergedProps.ref = mergedRef;\n\n return createElement(element, mergedProps);\n}\n\nexport namespace renderElement {\n export type ComponentProps<State> = UseRenderComponentProps<State>;\n export type Parameters<State, RenderedElementType extends Element> = UseRenderParameters<State, RenderedElementType>;\n}\n"],"mappings":";;;;;;;;;;AAWA,SAAgB,aAAa,OAA0C;AACrE,QAAO,WAAW,MAAM,IAAI,eAAe,MAAM;;AAkBnD,SAAS,iBACP,WACA,OACoB;AACpB,QAAO,WAAW,UAAU,GAAG,UAAU,MAAM,GAAG;;AAGpD,SAAS,aACP,OACA,OAC2B;AAC3B,QAAO,WAAW,MAAM,GAAG,MAAM,MAAM,GAAG;;AAG5C,SAAS,cAAc,SAAiD;CAGtE,MAAM,aAAa;AACnB,QAAO,WAAW,OAAO,WAAW,OAAO;;;;;;;;;;;;;;;;;;;;;;AAuB7C,SAAgB,cAKd,SACA,gBACA,QACqB;CACrB,MAAM,EAAE,WAAW,eAAe,OAAO,WAAW,WAAW;CAC/D,MAAM,EAAE,OAAO,KAAK,OAAO,iBAAiB;CAG5C,MAAM,YAAY,iBAAiB,eAAe,MAAM;CACxD,MAAM,QAAQ,aAAa,WAAW,MAAM;CAO5C,MAAM,cAAc,WAJG,kBAAkB,OAAO,aAAa,EAId,GAD5B,MAAM,QAAQ,MAAM,GAAG,QAAQ,QAAQ,CAAC,MAAM,GAAG,EAAE,CACsB;AAE5F,KAAI,cAAc,OAEhB,aAAY,YAAY,YAAY,YAAY,GAAG,YAAY,UAAU,GAAG,cAAc;AAG5F,KAAI,UAAU,OACZ,aAAY,QAAQ,YAAY,QAAQ;EAAE,GAAI,YAAY;EAAyB,GAAG;EAAO,GAAG;AAGlG,KAAI,WAAW,OAAO,EAAE;EAEtB,MAAM,YAAY,YAAY,KAAK,YAAY,IAAI;AACnD,SAAO,OAAO;GAAE,GAAG;GAAa,KAAK;GAAW,EAAe,MAAM;;AAGvE,KAAI,eAAe,OAAO,EAAE;EAC1B,MAAM,aAAa,cAAc,OAAO;EAExC,MAAM,YAAY,YAAY,KAAK,YAAY,KAAK,WAAW;EAE/D,MAAM,eAAe,WAAW,aAAa,OAAO,MAAiC;AACrF,eAAa,MAAM;AAEnB,SAAO,aAAa,QAAQ,aAAa;;AAK3C,aAAY,MADM,YAAY,KAAK,YAAY,IAAI;AAGnD,QAAO,cAAc,SAAS,YAAY"}

package/package.json CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "name": "@videojs/react",
   "type": "module",
-  "version": "10.0.0-beta.6",
+  "version": "10.0.0-beta.7",
   "description": "React library for building media players",
   "license": "Apache-2.0",
   "repository": {
@@ -65,10 +65,10 @@
     "react": ">=16.8.0"
   },
   "dependencies": {
-    "@videojs/spf": "10.0.0-beta.6",
-    "@videojs/store": "10.0.0-beta.6",
-    "@videojs/utils": "10.0.0-beta.6",
-    "@videojs/core": "10.0.0-beta.6"
+    "@videojs/spf": "10.0.0-beta.7",
+    "@videojs/core": "10.0.0-beta.7",
+    "@videojs/utils": "10.0.0-beta.7",
+    "@videojs/store": "10.0.0-beta.7"
   },
   "devDependencies": {
     "@testing-library/react": "^16.3.0",
@@ -79,8 +79,8 @@
     "tsdown": "^0.20.3",
     "typescript": "^5.9.3",
     "vitest": "^3.2.4",
-    "@videojs/icons": "10.0.0-beta.6",
-    "@videojs/skins": "10.0.0-beta.6"
+    "@videojs/icons": "10.0.0-beta.7",
+    "@videojs/skins": "10.0.0-beta.7"
   },
   "publishConfig": {
     "access": "public"

package/dist/default/icons/dist/react/default/pip.js DELETED Viewed

@@ -1,27 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-//#region ../icons/dist/react/default/pip.js
-const PipIcon = (props) => /* @__PURE__ */ jsxs("svg", {
-	xmlns: "http://www.w3.org/2000/svg",
-	width: 18,
-	height: 18,
-	fill: "none",
-	"aria-hidden": "true",
-	viewBox: "0 0 18 18",
-	...props,
-	children: [/* @__PURE__ */ jsx("path", {
-		fill: "currentColor",
-		d: "M13 2a4 4 0 0 1 4 4v2.035A3.5 3.5 0 0 0 16.5 8H15V6.273C15 5.018 13.96 4 12.679 4H4.32C3.04 4 2 5.018 2 6.273v5.454C2 12.982 3.04 14 4.321 14H6v1.5q0 .255.035.5H4a4 4 0 0 1-4-4V6a4 4 0 0 1 4-4z"
-	}), /* @__PURE__ */ jsx("rect", {
-		width: 10,
-		height: 7,
-		x: 8,
-		y: 10,
-		fill: "currentColor",
-		rx: 2
-	})]
-});
-//#endregion
-export { PipIcon as default };
-//# sourceMappingURL=pip.js.map

package/dist/default/icons/dist/react/default/pip.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"pip.js","names":[],"sources":["../../../../../../../icons/dist/react/default/pip.js"],"sourcesContent":["import { jsx, jsxs } from \"react/jsx-runtime\";\nconst PipIcon = (props) => /* @__PURE__ */ jsxs(\"svg\", { xmlns: \"http://www.w3.org/2000/svg\", width: 18, height: 18, fill: \"none\", \"aria-hidden\": \"true\", viewBox: \"0 0 18 18\", ...props, children: [\n /* @__PURE__ */ jsx(\"path\", { fill: \"currentColor\", d: \"M13 2a4 4 0 0 1 4 4v2.035A3.5 3.5 0 0 0 16.5 8H15V6.273C15 5.018 13.96 4 12.679 4H4.32C3.04 4 2 5.018 2 6.273v5.454C2 12.982 3.04 14 4.321 14H6v1.5q0 .255.035.5H4a4 4 0 0 1-4-4V6a4 4 0 0 1 4-4z\" }),\n /* @__PURE__ */ jsx(\"rect\", { width: 10, height: 7, x: 8, y: 10, fill: \"currentColor\", rx: 2 })\n] });\nexport default PipIcon;\n"],"mappings":";;;AACA,MAAM,WAAW,UAA0B,qBAAK,OAAO;CAAE,OAAO;CAA8B,OAAO;CAAI,QAAQ;CAAI,MAAM;CAAQ,eAAe;CAAQ,SAAS;CAAa,GAAG;CAAO,UAAU,CAClL,oBAAI,QAAQ;EAAE,MAAM;EAAgB,GAAG;EAAqM,CAAC,EAC7O,oBAAI,QAAQ;EAAE,OAAO;EAAI,QAAQ;EAAG,GAAG;EAAG,GAAG;EAAI,MAAM;EAAgB,IAAI;EAAG,CAAC,CAChG;CAAE,CAAC"}

package/dist/default/icons/dist/react/minimal/pip.js DELETED Viewed

@@ -1,27 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-//#region ../icons/dist/react/minimal/pip.js
-const PipIcon = (props) => /* @__PURE__ */ jsxs("svg", {
-	xmlns: "http://www.w3.org/2000/svg",
-	width: 18,
-	height: 18,
-	fill: "none",
-	"aria-hidden": "true",
-	viewBox: "0 0 18 18",
-	...props,
-	children: [/* @__PURE__ */ jsx("path", {
-		fill: "currentColor",
-		d: "M13 2a4 4 0 0 1 4 4v2.645a3.5 3.5 0 0 0-1-.145h-.5V6A2.5 2.5 0 0 0 13 3.5H4A2.5 2.5 0 0 0 1.5 6v6A2.5 2.5 0 0 0 4 14.5h2.5v.5c0 .347.05.683.145 1H4a4 4 0 0 1-4-4V6a4 4 0 0 1 4-4z"
-	}), /* @__PURE__ */ jsx("rect", {
-		width: 10,
-		height: 7,
-		x: 8,
-		y: 10,
-		fill: "currentColor",
-		rx: 2
-	})]
-});
-//#endregion
-export { PipIcon as default };
-//# sourceMappingURL=pip.js.map

package/dist/default/icons/dist/react/minimal/pip.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"pip.js","names":[],"sources":["../../../../../../../icons/dist/react/minimal/pip.js"],"sourcesContent":["import { jsx, jsxs } from \"react/jsx-runtime\";\nconst PipIcon = (props) => /* @__PURE__ */ jsxs(\"svg\", { xmlns: \"http://www.w3.org/2000/svg\", width: 18, height: 18, fill: \"none\", \"aria-hidden\": \"true\", viewBox: \"0 0 18 18\", ...props, children: [\n /* @__PURE__ */ jsx(\"path\", { fill: \"currentColor\", d: \"M13 2a4 4 0 0 1 4 4v2.645a3.5 3.5 0 0 0-1-.145h-.5V6A2.5 2.5 0 0 0 13 3.5H4A2.5 2.5 0 0 0 1.5 6v6A2.5 2.5 0 0 0 4 14.5h2.5v.5c0 .347.05.683.145 1H4a4 4 0 0 1-4-4V6a4 4 0 0 1 4-4z\" }),\n /* @__PURE__ */ jsx(\"rect\", { width: 10, height: 7, x: 8, y: 10, fill: \"currentColor\", rx: 2 })\n] });\nexport default PipIcon;\n"],"mappings":";;;AACA,MAAM,WAAW,UAA0B,qBAAK,OAAO;CAAE,OAAO;CAA8B,OAAO;CAAI,QAAQ;CAAI,MAAM;CAAQ,eAAe;CAAQ,SAAS;CAAa,GAAG;CAAO,UAAU,CAClL,oBAAI,QAAQ;EAAE,MAAM;EAAgB,GAAG;EAAsL,CAAC,EAC9N,oBAAI,QAAQ;EAAE,OAAO;EAAI,QAAQ;EAAG,GAAG;EAAG,GAAG;EAAI,MAAM;EAAgB,IAAI;EAAG,CAAC,CAChG;CAAE,CAAC"}

package/dist/dev/icons/dist/react/default/pip.js DELETED Viewed

@@ -1,27 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-//#region ../icons/dist/react/default/pip.js
-const PipIcon = (props) => /* @__PURE__ */ jsxs("svg", {
-	xmlns: "http://www.w3.org/2000/svg",
-	width: 18,
-	height: 18,
-	fill: "none",
-	"aria-hidden": "true",
-	viewBox: "0 0 18 18",
-	...props,
-	children: [/* @__PURE__ */ jsx("path", {
-		fill: "currentColor",
-		d: "M13 2a4 4 0 0 1 4 4v2.035A3.5 3.5 0 0 0 16.5 8H15V6.273C15 5.018 13.96 4 12.679 4H4.32C3.04 4 2 5.018 2 6.273v5.454C2 12.982 3.04 14 4.321 14H6v1.5q0 .255.035.5H4a4 4 0 0 1-4-4V6a4 4 0 0 1 4-4z"
-	}), /* @__PURE__ */ jsx("rect", {
-		width: 10,
-		height: 7,
-		x: 8,
-		y: 10,
-		fill: "currentColor",
-		rx: 2
-	})]
-});
-//#endregion
-export { PipIcon as default };
-//# sourceMappingURL=pip.js.map

package/dist/dev/icons/dist/react/default/pip.js.map DELETED Viewed

@@ -1 +0,0 @@

package/dist/dev/icons/dist/react/minimal/pip.js DELETED Viewed

@@ -1,27 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-//#region ../icons/dist/react/minimal/pip.js
-const PipIcon = (props) => /* @__PURE__ */ jsxs("svg", {
-	xmlns: "http://www.w3.org/2000/svg",
-	width: 18,
-	height: 18,
-	fill: "none",
-	"aria-hidden": "true",
-	viewBox: "0 0 18 18",
-	...props,
-	children: [/* @__PURE__ */ jsx("path", {
-		fill: "currentColor",
-		d: "M13 2a4 4 0 0 1 4 4v2.645a3.5 3.5 0 0 0-1-.145h-.5V6A2.5 2.5 0 0 0 13 3.5H4A2.5 2.5 0 0 0 1.5 6v6A2.5 2.5 0 0 0 4 14.5h2.5v.5c0 .347.05.683.145 1H4a4 4 0 0 1-4-4V6a4 4 0 0 1 4-4z"
-	}), /* @__PURE__ */ jsx("rect", {
-		width: 10,
-		height: 7,
-		x: 8,
-		y: 10,
-		fill: "currentColor",
-		rx: 2
-	})]
-});
-//#endregion
-export { PipIcon as default };
-//# sourceMappingURL=pip.js.map

package/dist/dev/icons/dist/react/minimal/pip.js.map DELETED Viewed

@@ -1 +0,0 @@