@videojs/html 10.0.0-beta.1 → 10.0.0-beta.10

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

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

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

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

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"container-mixin.js","names":["#contextStore","#attachMedia","#observer","#onSlotChange","#detach","#getSlottedMedia"],"sources":["../../../src/store/container-mixin.ts"],"sourcesContent":["import type { MediaContainer, PlayerStore, PlayerTarget } from '@videojs/core/dom';\nimport { ContextConsumer } from '@videojs/element/context';\nimport { noop } from '@videojs/utils/function';\nimport type { MediaElementConstructor } from '@/ui/media-element';\nimport type { PlayerContext } from '../player/context';\nimport type { PlayerConsumer, PlayerConsumerConstructor } from './types';\n\nexport type ContainerMixin<Store extends PlayerStore> = <Class extends MediaElementConstructor>(\n  BaseClass: Class\n) => Class & PlayerConsumerConstructor<Store>;\n\n/**\n * Create a mixin that consumes player context and auto-attaches media elements.\n *\n * @param context - Player context to consume from an ancestor provider.\n */\nexport function createContainerMixin<Store extends PlayerStore>(context: PlayerContext<Store>): ContainerMixin<Store> {\n  return <Class extends MediaElementConstructor>(BaseClass: Class) => {\n    class PlayerContainerElement extends BaseClass implements PlayerConsumer<Store>, MediaContainer {\n      #detach = noop;\n      #observer: MutationObserver | null = null;\n      #contextStore: Store | null = null;\n\n      constructor(...args: any[]) {\n        super(...args);\n\n        // Created in the constructor body (after all field initializers) so\n        // that #contextStore's private slot exists if the callback fires\n        // synchronously — which happens when the element is already connected.\n        // The host's controller list keeps the consumer alive; no field needed.\n        new ContextConsumer(this, {\n          context,\n          callback: (value) => {\n            this.#contextStore = value ?? null;\n            this.#attachMedia();\n          },\n          subscribe: true,\n        });\n      }\n\n      get store(): Store | null {\n        return this.#contextStore;\n      }\n\n      override connectedCallback() {\n        super.connectedCallback();\n\n        this.#observer = new MutationObserver((records) => {\n          if (records.some(hasMediaNode)) this.#attachMedia();\n        });\n\n        this.#observer.observe(this, {\n          childList: true,\n          subtree: true,\n          attributes: true,\n          attributeFilter: ['data-media-element'],\n        });\n\n        // Slotted media elements don't appear in the container's subtree,\n        // so listen for slot reassignments to pick them up.\n        this.addEventListener('slotchange', this.#onSlotChange);\n\n        this.#attachMedia();\n      }\n\n      override disconnectedCallback() {\n        super.disconnectedCallback();\n        this.#observer?.disconnect();\n        this.#observer = null;\n        this.removeEventListener('slotchange', this.#onSlotChange);\n        this.#detach();\n      }\n\n      #onSlotChange = () => {\n        this.#attachMedia();\n      };\n\n      #getSlottedMedia(): HTMLMediaElement | null {\n        const slot = this.querySelector<HTMLSlotElement>('slot[name=\"media\"]');\n        if (!slot) return null;\n\n        for (const el of slot.assignedElements({ flatten: true })) {\n          if (el instanceof HTMLMediaElement) return el;\n        }\n\n        return null;\n      }\n\n      #attachMedia() {\n        // Prefer the cached context value; fall back to `this.store` which\n        // ProviderMixin overrides when both mixins are applied to one element.\n        const store = this.#contextStore ?? this.store;\n        if (!store) return;\n\n        const media =\n          this.querySelector<HTMLMediaElement>('video, audio, [data-media-element]') ?? this.#getSlottedMedia();\n\n        if (!media) {\n          this.#detach();\n          this.#detach = noop;\n          return;\n        }\n\n        const target: PlayerTarget = {\n          media,\n          container: this,\n        };\n\n        const hasMediaChanged = store.target?.media !== target.media,\n          hasContainerChanged = store.target?.container !== target.container;\n\n        if (hasMediaChanged || hasContainerChanged) {\n          this.#detach();\n          this.#detach = store.attach(target);\n        }\n      }\n    }\n\n    return PlayerContainerElement;\n  };\n}\n\nfunction isMediaNode(node: Node): boolean {\n  return node instanceof HTMLMediaElement || (node instanceof Element && node.hasAttribute('data-media-element'));\n}\n\nfunction hasMediaNode(record: MutationRecord): boolean {\n  // Attribute mutation: data-media-element was added to a descendant\n  if (record.type === 'attributes' && record.target instanceof Element) {\n    return record.target.hasAttribute('data-media-element');\n  }\n\n  for (const node of record.addedNodes) {\n    if (isMediaNode(node)) return true;\n  }\n\n  for (const node of record.removedNodes) {\n    if (isMediaNode(node)) return true;\n  }\n\n  return false;\n}\n"],"mappings":";;;;;;;;;AAgBA,SAAgB,qBAAgD,SAAsD;AACpH,SAA+C,cAAqB;EAClE,MAAM,+BAA+B,UAA2D;GAC9F,UAAU;GACV,YAAqC;GACrC,gBAA8B;GAE9B,YAAY,GAAG,MAAa;AAC1B,UAAM,GAAG,KAAK;AAMd,QAAI,gBAAgB,MAAM;KACxB;KACA,WAAW,UAAU;AACnB,YAAKA,eAAgB,SAAS;AAC9B,YAAKC,aAAc;;KAErB,WAAW;KACZ,CAAC;;GAGJ,IAAI,QAAsB;AACxB,WAAO,MAAKD;;GAGd,AAAS,oBAAoB;AAC3B,UAAM,mBAAmB;AAEzB,UAAKE,WAAY,IAAI,kBAAkB,YAAY;AACjD,SAAI,QAAQ,KAAK,aAAa,CAAE,OAAKD,aAAc;MACnD;AAEF,UAAKC,SAAU,QAAQ,MAAM;KAC3B,WAAW;KACX,SAAS;KACT,YAAY;KACZ,iBAAiB,CAAC,qBAAqB;KACxC,CAAC;AAIF,SAAK,iBAAiB,cAAc,MAAKC,aAAc;AAEvD,UAAKF,aAAc;;GAGrB,AAAS,uBAAuB;AAC9B,UAAM,sBAAsB;AAC5B,UAAKC,UAAW,YAAY;AAC5B,UAAKA,WAAY;AACjB,SAAK,oBAAoB,cAAc,MAAKC,aAAc;AAC1D,UAAKC,QAAS;;GAGhB,sBAAsB;AACpB,UAAKH,aAAc;;GAGrB,mBAA4C;IAC1C,MAAM,OAAO,KAAK,cAA+B,uBAAqB;AACtE,QAAI,CAAC,KAAM,QAAO;AAElB,SAAK,MAAM,MAAM,KAAK,iBAAiB,EAAE,SAAS,MAAM,CAAC,CACvD,KAAI,cAAc,iBAAkB,QAAO;AAG7C,WAAO;;GAGT,eAAe;IAGb,MAAM,QAAQ,MAAKD,gBAAiB,KAAK;AACzC,QAAI,CAAC,MAAO;IAEZ,MAAM,QACJ,KAAK,cAAgC,qCAAqC,IAAI,MAAKK,iBAAkB;AAEvG,QAAI,CAAC,OAAO;AACV,WAAKD,QAAS;AACd,WAAKA,SAAU;AACf;;IAGF,MAAM,SAAuB;KAC3B;KACA,WAAW;KACZ;IAED,MAAM,kBAAkB,MAAM,QAAQ,UAAU,OAAO,OACrD,sBAAsB,MAAM,QAAQ,cAAc,OAAO;AAE3D,QAAI,mBAAmB,qBAAqB;AAC1C,WAAKA,QAAS;AACd,WAAKA,SAAU,MAAM,OAAO,OAAO;;;;AAKzC,SAAO;;;AAIX,SAAS,YAAY,MAAqB;AACxC,QAAO,gBAAgB,oBAAqB,gBAAgB,WAAW,KAAK,aAAa,qBAAqB;;AAGhH,SAAS,aAAa,QAAiC;AAErD,KAAI,OAAO,SAAS,gBAAgB,OAAO,kBAAkB,QAC3D,QAAO,OAAO,OAAO,aAAa,qBAAqB;AAGzD,MAAK,MAAM,QAAQ,OAAO,WACxB,KAAI,YAAY,KAAK,CAAE,QAAO;AAGhC,MAAK,MAAM,QAAQ,OAAO,aACxB,KAAI,YAAY,KAAK,CAAE,QAAO;AAGhC,QAAO"}
+{"version":3,"file":"container-mixin.js","names":["#contextStore","#setContainer"],"sources":["../../../src/store/container-mixin.ts"],"sourcesContent":["import type { MediaContainer, PlayerStore } from '@videojs/core/dom';\nimport { ContextConsumer } from '@videojs/element/context';\nimport type { MediaElementConstructor } from '@/ui/media-element';\nimport type { ContainerContext, PlayerContext } from '../player/context';\nimport type { PlayerConsumer, PlayerConsumerConstructor } from './types';\n\nexport interface ContainerMixinConfig<Store extends PlayerStore> {\n  playerContext: PlayerContext<Store>;\n  containerContext: ContainerContext;\n}\n\nexport type ContainerMixin<Store extends PlayerStore> = <Class extends MediaElementConstructor>(\n  BaseClass: Class\n) => Class & PlayerConsumerConstructor<Store>;\n\n/**\n * Create a mixin that consumes player context and registers itself as the\n * container element with the provider via `containerContext`.\n *\n * @param config - Container configuration with player and container contexts.\n */\nexport function createContainerMixin<Store extends PlayerStore>(\n  config: ContainerMixinConfig<Store>\n): ContainerMixin<Store> {\n  return <Class extends MediaElementConstructor>(BaseClass: Class) => {\n    class PlayerContainerElement extends BaseClass implements PlayerConsumer<Store>, MediaContainer {\n      #contextStore: Store | null = null;\n      #setContainer: ((container: MediaContainer | null) => void) | null = null;\n\n      constructor(...args: any[]) {\n        super(...args);\n\n        new ContextConsumer(this, {\n          context: config.playerContext,\n          callback: (value) => {\n            this.#contextStore = value ?? null;\n          },\n          subscribe: true,\n        });\n\n        new ContextConsumer(this, {\n          context: config.containerContext,\n          callback: (value) => {\n            this.#setContainer = value?.setContainer ?? null;\n            if (this.isConnected) this.#setContainer?.(this);\n          },\n          subscribe: true,\n        });\n      }\n\n      get store(): Store | null {\n        return this.#contextStore;\n      }\n\n      override connectedCallback() {\n        super.connectedCallback();\n        this.#setContainer?.(this);\n      }\n\n      override disconnectedCallback() {\n        super.disconnectedCallback();\n        this.#setContainer?.(null);\n      }\n    }\n\n    return PlayerContainerElement;\n  };\n}\n"],"mappings":";;;;;;;;;AAqBA,SAAgB,qBACd,QACuB;AACvB,SAA+C,cAAqB;EAClE,MAAM,+BAA+B,UAA2D;GAC9F,gBAA8B;GAC9B,gBAAqE;GAErE,YAAY,GAAG,MAAa;AAC1B,UAAM,GAAG,KAAK;AAEd,QAAI,gBAAgB,MAAM;KACxB,SAAS,OAAO;KAChB,WAAW,UAAU;AACnB,YAAKA,eAAgB,SAAS;;KAEhC,WAAW;KACZ,CAAC;AAEF,QAAI,gBAAgB,MAAM;KACxB,SAAS,OAAO;KAChB,WAAW,UAAU;AACnB,YAAKC,eAAgB,OAAO,gBAAgB;AAC5C,UAAI,KAAK,YAAa,OAAKA,eAAgB,KAAK;;KAElD,WAAW;KACZ,CAAC;;GAGJ,IAAI,QAAsB;AACxB,WAAO,MAAKD;;GAGd,AAAS,oBAAoB;AAC3B,UAAM,mBAAmB;AACzB,UAAKC,eAAgB,KAAK;;GAG5B,AAAS,uBAAuB;AAC9B,UAAM,sBAAsB;AAC5B,UAAKA,eAAgB,KAAK;;;AAI9B,SAAO"}

package/dist/dev/store/media-attach-mixin.d.ts

@@ -0,0 +1,19 @@
+import { MediaContext } from "../player/context.js";
+import { AnyConstructor } from "@videojs/utils/types";
+
+//#region src/store/media-attach-mixin.d.ts
+type MediaAttachMixin = <Class extends AnyConstructor<HTMLElement>>(BaseClass: Class) => Class;
+/**
+ * Create a mixin that consumes `mediaContext` and registers the
+ * element as the media with the provider.
+ *
+ * Uses the raw context-request protocol so it works with any
+ * `HTMLElement` subclass — no `ReactiveControllerHost` required.
+ *
+ * @param context - The media context to consume.
+ */
+declare function createMediaAttachMixin(context: MediaContext): MediaAttachMixin;
+declare const MediaAttachMixin: MediaAttachMixin;
+//#endregion
+export { MediaAttachMixin, createMediaAttachMixin };
+//# sourceMappingURL=media-attach-mixin.d.ts.map

package/dist/dev/store/media-attach-mixin.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"media-attach-mixin.d.ts","names":[],"sources":["../../../src/store/media-attach-mixin.ts"],"mappings":";;;;KAMY,gBAAA,kBAAkC,cAAA,CAAe,WAAA,GAAc,SAAA,EAAW,KAAA,KAAU,KAAA;;AAAhG;;;;;;;;iBAWgB,sBAAA,CAAuB,OAAA,EAAS,YAAA,GAAe,gBAAA;AAAA,cA0ClD,gBAAA,EAAgB,gBAAA"}

package/dist/dev/store/media-attach-mixin.js

@@ -0,0 +1,45 @@
+import { mediaContext } from "../player/context.js";
+import { ContextEvent } from "@videojs/element/context";
+
+//#region src/store/media-attach-mixin.ts
+/**
+* Create a mixin that consumes `mediaContext` and registers the
+* element as the media with the provider.
+*
+* Uses the raw context-request protocol so it works with any
+* `HTMLElement` subclass — no `ReactiveControllerHost` required.
+*
+* @param context - The media context to consume.
+*/
+function createMediaAttachMixin(context) {
+	return (BaseClass) => {
+		class MediaAttachElement extends BaseClass {
+			#setMedia = null;
+			#unsubscribe = null;
+			getMediaTarget() {
+				return this;
+			}
+			connectedCallback() {
+				super.connectedCallback?.();
+				this.dispatchEvent(new ContextEvent(context, this, (value, unsubscribe) => {
+					if (unsubscribe) this.#unsubscribe = unsubscribe;
+					this.#setMedia = value?.setMedia ?? null;
+					if (this.isConnected) this.#setMedia?.(this.getMediaTarget());
+				}, true));
+			}
+			disconnectedCallback() {
+				super.disconnectedCallback?.();
+				this.#setMedia?.(null);
+				this.#unsubscribe?.();
+				this.#unsubscribe = null;
+				this.#setMedia = null;
+			}
+		}
+		return MediaAttachElement;
+	};
+}
+const MediaAttachMixin = createMediaAttachMixin(mediaContext);
+
+//#endregion
+export { MediaAttachMixin, createMediaAttachMixin };
+//# sourceMappingURL=media-attach-mixin.js.map

package/dist/dev/store/media-attach-mixin.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"media-attach-mixin.js","names":["#unsubscribe","#setMedia"],"sources":["../../../src/store/media-attach-mixin.ts"],"sourcesContent":["import type { Media } from '@videojs/core/dom';\nimport { ContextEvent } from '@videojs/element/context';\nimport type { CustomElement } from '@videojs/utils/dom';\nimport type { AnyConstructor, Constructor } from '@videojs/utils/types';\nimport { type MediaContext, mediaContext } from '../player/context';\n\nexport type MediaAttachMixin = <Class extends AnyConstructor<HTMLElement>>(BaseClass: Class) => Class;\n\n/**\n * Create a mixin that consumes `mediaContext` and registers the\n * element as the media with the provider.\n *\n * Uses the raw context-request protocol so it works with any\n * `HTMLElement` subclass — no `ReactiveControllerHost` required.\n *\n * @param context - The media context to consume.\n */\nexport function createMediaAttachMixin(context: MediaContext): MediaAttachMixin {\n  return <Class extends AnyConstructor<HTMLElement>>(BaseClass: Class) => {\n    class MediaAttachElement extends (BaseClass as unknown as Constructor<CustomElement>) {\n      #setMedia: ((media: Media | null) => void) | null = null;\n      #unsubscribe: (() => void) | null = null;\n\n      getMediaTarget(): Media | null {\n        return this as unknown as Media;\n      }\n\n      override connectedCallback() {\n        super.connectedCallback?.();\n\n        this.dispatchEvent(\n          new ContextEvent(\n            context,\n            this,\n            (value, unsubscribe) => {\n              if (unsubscribe) this.#unsubscribe = unsubscribe;\n              this.#setMedia = value?.setMedia ?? null;\n              if (this.isConnected) {\n                this.#setMedia?.(this.getMediaTarget());\n              }\n            },\n            true\n          )\n        );\n      }\n\n      override disconnectedCallback() {\n        super.disconnectedCallback?.();\n        this.#setMedia?.(null);\n        this.#unsubscribe?.();\n        this.#unsubscribe = null;\n        this.#setMedia = null;\n      }\n    }\n\n    return MediaAttachElement as unknown as Class;\n  };\n}\n\nexport const MediaAttachMixin = createMediaAttachMixin(mediaContext);\n"],"mappings":";;;;;;;;;;;;;AAiBA,SAAgB,uBAAuB,SAAyC;AAC9E,SAAmD,cAAqB;EACtE,MAAM,2BAA4B,UAAoD;GACpF,YAAoD;GACpD,eAAoC;GAEpC,iBAA+B;AAC7B,WAAO;;GAGT,AAAS,oBAAoB;AAC3B,UAAM,qBAAqB;AAE3B,SAAK,cACH,IAAI,aACF,SACA,OACC,OAAO,gBAAgB;AACtB,SAAI,YAAa,OAAKA,cAAe;AACrC,WAAKC,WAAY,OAAO,YAAY;AACpC,SAAI,KAAK,YACP,OAAKA,WAAY,KAAK,gBAAgB,CAAC;OAG3C,KACD,CACF;;GAGH,AAAS,uBAAuB;AAC9B,UAAM,wBAAwB;AAC9B,UAAKA,WAAY,KAAK;AACtB,UAAKD,eAAgB;AACrB,UAAKA,cAAe;AACpB,UAAKC,WAAY;;;AAIrB,SAAO;;;AAIX,MAAa,mBAAmB,uBAAuB,aAAa"}

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

@@ -1,17 +1,30 @@
-import { PlayerContext } from "../player/context.js";
+import { ContainerContext, MediaContext, PlayerContext } from "../player/context.js";
 import { MediaElementConstructor } from "../ui/media-element.js";
 import { PlayerProviderConstructor } from "./types.js";
 import { PlayerStore } from "@videojs/core/dom";
 
 //#region src/store/provider-mixin.d.ts
+interface ProviderMixinConfig<Store extends PlayerStore> {
+  playerContext: PlayerContext<Store>;
+  mediaContext: MediaContext;
+  containerContext: ContainerContext;
+  factory: () => Store;
+}
 type ProviderMixin<Store extends PlayerStore> = <Class extends MediaElementConstructor>(BaseClass: Class) => Class & PlayerProviderConstructor<Store>;
 /**
- * Create a mixin that provides player context to descendant elements.
+ * Create a mixin that provides player context to descendant elements and
+ * owns the `store.attach()` lifecycle.
  *
- * @param context - Player context to provide to descendants.
- * @param factory - Factory function that creates a store instance.
+ * Media and container elements register themselves via media/container
+ * contexts that carry both the current value and a setter. When a media
+ * element is available, the provider calls `store.attach({ media, container })`.
+ *
+ * As a fallback for plain `<video>`/`<audio>` that can't consume context,
+ * the provider queries its subtree after a microtask.
+ *
+ * @param config - Provider configuration with contexts and store factory.
  */
-declare function createProviderMixin<Store extends PlayerStore>(context: PlayerContext<Store>, factory: () => Store): ProviderMixin<Store>;
+declare function createProviderMixin<Store extends PlayerStore>(config: ProviderMixinConfig<Store>): ProviderMixin<Store>;
 //#endregion
-export { ProviderMixin, createProviderMixin };
+export { ProviderMixin, ProviderMixinConfig, createProviderMixin };
 //# sourceMappingURL=provider-mixin.d.ts.map

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

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

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

@@ -3,32 +3,122 @@ import { isNull } from "@videojs/utils/predicate";
 
 //#region src/store/provider-mixin.ts
 /**
-* Create a mixin that provides player context to descendant elements.
+* Create a mixin that provides player context to descendant elements and
+* owns the `store.attach()` lifecycle.
 *
-* @param context - Player context to provide to descendants.
-* @param factory - Factory function that creates a store instance.
+* Media and container elements register themselves via media/container
+* contexts that carry both the current value and a setter. When a media
+* element is available, the provider calls `store.attach({ media, container })`.
+*
+* As a fallback for plain `<video>`/`<audio>` that can't consume context,
+* the provider queries its subtree after a microtask.
+*
+* @param config - Provider configuration with contexts and store factory.
 */
-function createProviderMixin(context, factory) {
+function createProviderMixin(config) {
 	return (BaseClass) => {
 		class PlayerProviderElement extends BaseClass {
-			#store = factory();
-			#provider = new ContextProvider(this, {
-				context,
+			#store = config.factory();
+			#detach = null;
+			#media = null;
+			#container = null;
+			#fallbackQueued = false;
+			#setMedia = (media) => {
+				if (this.#media === media) return;
+				this.#media = media;
+				this.#mediaProvider.setValue({
+					media,
+					setMedia: this.#setMedia
+				});
+				this.#tryAttach();
+			};
+			#setContainer = (container) => {
+				if (this.#container === container) return;
+				this.#container = container;
+				this.#containerProvider.setValue({
+					container,
+					setContainer: this.#setContainer
+				});
+				this.#tryAttach();
+			};
+			#playerProvider = new ContextProvider(this, {
+				context: config.playerContext,
 				initialValue: this.store
 			});
+			#mediaProvider = new ContextProvider(this, {
+				context: config.mediaContext,
+				initialValue: {
+					media: this.#media,
+					setMedia: this.#setMedia
+				}
+			});
+			#containerProvider = new ContextProvider(this, {
+				context: config.containerContext,
+				initialValue: {
+					container: this.#container,
+					setContainer: this.#setContainer
+				}
+			});
 			get store() {
-				if (isNull(this.#store)) this.#store = factory();
+				if (isNull(this.#store)) this.#store = config.factory();
 				return this.#store;
 			}
 			connectedCallback() {
 				super.connectedCallback();
-				this.#provider.setValue(this.store);
+				this.#playerProvider.setValue(this.store);
+				this.#mediaProvider.setValue({
+					media: this.#media,
+					setMedia: this.#setMedia
+				});
+				this.#containerProvider.setValue({
+					container: this.#container,
+					setContainer: this.#setContainer
+				});
+				this.#tryAttach();
+				this.#queueFallbackDiscovery();
+			}
+			disconnectedCallback() {
+				super.disconnectedCallback();
+				this.#detachStore();
 			}
 			destroyCallback() {
+				this.#detachStore();
 				this.#store?.destroy();
 				this.#store = null;
 				super.destroyCallback();
 			}
+			#tryAttach() {
+				const store = this.#store;
+				if (!store) return;
+				if (!this.#media) {
+					this.#detachStore();
+					return;
+				}
+				const target = {
+					media: this.#media,
+					container: this.#container
+				};
+				const hasMediaChanged = store.target?.media !== target.media;
+				const hasContainerChanged = store.target?.container !== target.container;
+				if (hasMediaChanged || hasContainerChanged) {
+					this.#detachStore();
+					this.#detach = store.attach(target);
+				}
+			}
+			#detachStore() {
+				this.#detach?.();
+				this.#detach = null;
+			}
+			#queueFallbackDiscovery() {
+				if (this.#media || this.#fallbackQueued) return;
+				this.#fallbackQueued = true;
+				queueMicrotask(() => {
+					this.#fallbackQueued = false;
+					if (this.#media) return;
+					const media = this.querySelector("video, audio");
+					if (media) this.#setMedia(media);
+				});
+			}
 		}
 		return PlayerProviderElement;
 	};

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

@@ -1 +1 @@
-{"version":3,"file":"provider-mixin.js","names":["#store","#provider"],"sources":["../../../src/store/provider-mixin.ts"],"sourcesContent":["import type { PlayerStore } from '@videojs/core/dom';\nimport { ContextProvider } from '@videojs/element/context';\nimport { isNull } from '@videojs/utils/predicate';\nimport type { MediaElementConstructor } from '@/ui/media-element';\nimport type { PlayerContext } from '../player/context';\nimport type { PlayerProvider, PlayerProviderConstructor } from './types';\n\nexport type ProviderMixin<Store extends PlayerStore> = <Class extends MediaElementConstructor>(\n  BaseClass: Class\n) => Class & PlayerProviderConstructor<Store>;\n\n/**\n * Create a mixin that provides player context to descendant elements.\n *\n * @param context - Player context to provide to descendants.\n * @param factory - Factory function that creates a store instance.\n */\nexport function createProviderMixin<Store extends PlayerStore>(\n  context: PlayerContext<Store>,\n  factory: () => Store\n): ProviderMixin<Store> {\n  return <Class extends MediaElementConstructor>(BaseClass: Class) => {\n    class PlayerProviderElement extends BaseClass implements PlayerProvider<Store> {\n      #store: Store | null = factory();\n\n      #provider = new ContextProvider(this, {\n        context,\n        initialValue: this.store,\n      });\n\n      get store(): Store {\n        if (isNull(this.#store)) {\n          this.#store = factory();\n        }\n\n        return this.#store;\n      }\n\n      override connectedCallback() {\n        super.connectedCallback();\n        this.#provider.setValue(this.store);\n      }\n\n      override destroyCallback() {\n        this.#store?.destroy();\n        this.#store = null;\n        super.destroyCallback();\n      }\n    }\n\n    return PlayerProviderElement;\n  };\n}\n"],"mappings":";;;;;;;;;;AAiBA,SAAgB,oBACd,SACA,SACsB;AACtB,SAA+C,cAAqB;EAClE,MAAM,8BAA8B,UAA2C;GAC7E,SAAuB,SAAS;GAEhC,YAAY,IAAI,gBAAgB,MAAM;IACpC;IACA,cAAc,KAAK;IACpB,CAAC;GAEF,IAAI,QAAe;AACjB,QAAI,OAAO,MAAKA,MAAO,CACrB,OAAKA,QAAS,SAAS;AAGzB,WAAO,MAAKA;;GAGd,AAAS,oBAAoB;AAC3B,UAAM,mBAAmB;AACzB,UAAKC,SAAU,SAAS,KAAK,MAAM;;GAGrC,AAAS,kBAAkB;AACzB,UAAKD,OAAQ,SAAS;AACtB,UAAKA,QAAS;AACd,UAAM,iBAAiB;;;AAI3B,SAAO"}
+{"version":3,"file":"provider-mixin.js","names":["#media","#mediaProvider","#setMedia","#tryAttach","#container","#containerProvider","#setContainer","#store","#playerProvider","#queueFallbackDiscovery","#detachStore","#detach","#fallbackQueued"],"sources":["../../../src/store/provider-mixin.ts"],"sourcesContent":["import type { Media, MediaContainer, PlayerStore, PlayerTarget } from '@videojs/core/dom';\nimport { ContextProvider } from '@videojs/element/context';\nimport { isNull } from '@videojs/utils/predicate';\nimport type { MediaElementConstructor } from '@/ui/media-element';\nimport type { ContainerContext, MediaContext, PlayerContext } from '../player/context';\nimport type { PlayerProvider, PlayerProviderConstructor } from './types';\n\nexport interface ProviderMixinConfig<Store extends PlayerStore> {\n  playerContext: PlayerContext<Store>;\n  mediaContext: MediaContext;\n  containerContext: ContainerContext;\n  factory: () => Store;\n}\n\nexport type ProviderMixin<Store extends PlayerStore> = <Class extends MediaElementConstructor>(\n  BaseClass: Class\n) => Class & PlayerProviderConstructor<Store>;\n\n/**\n * Create a mixin that provides player context to descendant elements and\n * owns the `store.attach()` lifecycle.\n *\n * Media and container elements register themselves via media/container\n * contexts that carry both the current value and a setter. When a media\n * element is available, the provider calls `store.attach({ media, container })`.\n *\n * As a fallback for plain `<video>`/`<audio>` that can't consume context,\n * the provider queries its subtree after a microtask.\n *\n * @param config - Provider configuration with contexts and store factory.\n */\nexport function createProviderMixin<Store extends PlayerStore>(\n  config: ProviderMixinConfig<Store>\n): ProviderMixin<Store> {\n  return <Class extends MediaElementConstructor>(BaseClass: Class) => {\n    class PlayerProviderElement extends BaseClass implements PlayerProvider<Store> {\n      #store: Store | null = config.factory();\n      #detach: (() => void) | null = null;\n      #media: Media | null = null;\n      #container: MediaContainer | null = null;\n      #fallbackQueued = false;\n\n      #setMedia = (media: Media | null): void => {\n        if (this.#media === media) return;\n        this.#media = media;\n        this.#mediaProvider.setValue({ media, setMedia: this.#setMedia });\n        this.#tryAttach();\n      };\n\n      #setContainer = (container: MediaContainer | null): void => {\n        if (this.#container === container) return;\n        this.#container = container;\n        this.#containerProvider.setValue({ container, setContainer: this.#setContainer });\n        this.#tryAttach();\n      };\n\n      #playerProvider = new ContextProvider(this, {\n        context: config.playerContext,\n        initialValue: this.store,\n      });\n\n      #mediaProvider = new ContextProvider(this, {\n        context: config.mediaContext,\n        initialValue: { media: this.#media, setMedia: this.#setMedia },\n      });\n\n      #containerProvider = new ContextProvider(this, {\n        context: config.containerContext,\n        initialValue: { container: this.#container, setContainer: this.#setContainer },\n      });\n\n      get store(): Store {\n        if (isNull(this.#store)) {\n          this.#store = config.factory();\n        }\n\n        return this.#store;\n      }\n\n      override connectedCallback() {\n        super.connectedCallback();\n        this.#playerProvider.setValue(this.store);\n        this.#mediaProvider.setValue({ media: this.#media, setMedia: this.#setMedia });\n        this.#containerProvider.setValue({ container: this.#container, setContainer: this.#setContainer });\n        this.#tryAttach();\n        this.#queueFallbackDiscovery();\n      }\n\n      override disconnectedCallback() {\n        super.disconnectedCallback();\n        this.#detachStore();\n      }\n\n      override destroyCallback() {\n        this.#detachStore();\n        this.#store?.destroy();\n        this.#store = null;\n        super.destroyCallback();\n      }\n\n      #tryAttach(): void {\n        const store = this.#store;\n        if (!store) return;\n\n        if (!this.#media) {\n          this.#detachStore();\n          return;\n        }\n\n        const target: PlayerTarget = {\n          media: this.#media,\n          container: this.#container,\n        };\n\n        const hasMediaChanged = store.target?.media !== target.media;\n        const hasContainerChanged = store.target?.container !== target.container;\n\n        if (hasMediaChanged || hasContainerChanged) {\n          this.#detachStore();\n          this.#detach = store.attach(target);\n        }\n      }\n\n      #detachStore(): void {\n        this.#detach?.();\n        this.#detach = null;\n      }\n\n      #queueFallbackDiscovery(): void {\n        if (this.#media || this.#fallbackQueued) return;\n        this.#fallbackQueued = true;\n\n        queueMicrotask(() => {\n          this.#fallbackQueued = false;\n\n          // Context already registered media — skip fallback.\n          if (this.#media) return;\n\n          const media = this.querySelector<HTMLMediaElement>('video, audio');\n          if (media) {\n            this.#setMedia(media);\n          }\n        });\n      }\n    }\n\n    return PlayerProviderElement;\n  };\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AA+BA,SAAgB,oBACd,QACsB;AACtB,SAA+C,cAAqB;EAClE,MAAM,8BAA8B,UAA2C;GAC7E,SAAuB,OAAO,SAAS;GACvC,UAA+B;GAC/B,SAAuB;GACvB,aAAoC;GACpC,kBAAkB;GAElB,aAAa,UAA8B;AACzC,QAAI,MAAKA,UAAW,MAAO;AAC3B,UAAKA,QAAS;AACd,UAAKC,cAAe,SAAS;KAAE;KAAO,UAAU,MAAKC;KAAW,CAAC;AACjE,UAAKC,WAAY;;GAGnB,iBAAiB,cAA2C;AAC1D,QAAI,MAAKC,cAAe,UAAW;AACnC,UAAKA,YAAa;AAClB,UAAKC,kBAAmB,SAAS;KAAE;KAAW,cAAc,MAAKC;KAAe,CAAC;AACjF,UAAKH,WAAY;;GAGnB,kBAAkB,IAAI,gBAAgB,MAAM;IAC1C,SAAS,OAAO;IAChB,cAAc,KAAK;IACpB,CAAC;GAEF,iBAAiB,IAAI,gBAAgB,MAAM;IACzC,SAAS,OAAO;IAChB,cAAc;KAAE,OAAO,MAAKH;KAAQ,UAAU,MAAKE;KAAW;IAC/D,CAAC;GAEF,qBAAqB,IAAI,gBAAgB,MAAM;IAC7C,SAAS,OAAO;IAChB,cAAc;KAAE,WAAW,MAAKE;KAAY,cAAc,MAAKE;KAAe;IAC/E,CAAC;GAEF,IAAI,QAAe;AACjB,QAAI,OAAO,MAAKC,MAAO,CACrB,OAAKA,QAAS,OAAO,SAAS;AAGhC,WAAO,MAAKA;;GAGd,AAAS,oBAAoB;AAC3B,UAAM,mBAAmB;AACzB,UAAKC,eAAgB,SAAS,KAAK,MAAM;AACzC,UAAKP,cAAe,SAAS;KAAE,OAAO,MAAKD;KAAQ,UAAU,MAAKE;KAAW,CAAC;AAC9E,UAAKG,kBAAmB,SAAS;KAAE,WAAW,MAAKD;KAAY,cAAc,MAAKE;KAAe,CAAC;AAClG,UAAKH,WAAY;AACjB,UAAKM,wBAAyB;;GAGhC,AAAS,uBAAuB;AAC9B,UAAM,sBAAsB;AAC5B,UAAKC,aAAc;;GAGrB,AAAS,kBAAkB;AACzB,UAAKA,aAAc;AACnB,UAAKH,OAAQ,SAAS;AACtB,UAAKA,QAAS;AACd,UAAM,iBAAiB;;GAGzB,aAAmB;IACjB,MAAM,QAAQ,MAAKA;AACnB,QAAI,CAAC,MAAO;AAEZ,QAAI,CAAC,MAAKP,OAAQ;AAChB,WAAKU,aAAc;AACnB;;IAGF,MAAM,SAAuB;KAC3B,OAAO,MAAKV;KACZ,WAAW,MAAKI;KACjB;IAED,MAAM,kBAAkB,MAAM,QAAQ,UAAU,OAAO;IACvD,MAAM,sBAAsB,MAAM,QAAQ,cAAc,OAAO;AAE/D,QAAI,mBAAmB,qBAAqB;AAC1C,WAAKM,aAAc;AACnB,WAAKC,SAAU,MAAM,OAAO,OAAO;;;GAIvC,eAAqB;AACnB,UAAKA,UAAW;AAChB,UAAKA,SAAU;;GAGjB,0BAAgC;AAC9B,QAAI,MAAKX,SAAU,MAAKY,eAAiB;AACzC,UAAKA,iBAAkB;AAEvB,yBAAqB;AACnB,WAAKA,iBAAkB;AAGvB,SAAI,MAAKZ,MAAQ;KAEjB,MAAM,QAAQ,KAAK,cAAgC,eAAe;AAClE,SAAI,MACF,OAAKE,SAAU,MAAM;MAEvB;;;AAIN,SAAO"}

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

@@ -1 +1 @@
-{"version":3,"file":"popover-element.d.ts","names":[],"sources":["../../../../src/ui/popover/popover-element.ts"],"mappings":";;;;;;cAkBa,cAAA,SAAuB,YAAA;EAAA;kBAClB,OAAA;EAAA,OAEA,UAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAahB,IAAA;EACA,WAAA;EACA,IAAA,iBAAI,WAAA;EACJ,KAAA,EADI,cAAA,CACC,YAAA;EACL,KAAA,EAAO,YAAA;EACP,aAAA;EACA,mBAAA;EACA,WAAA;EACA,KAAA;EACA,UAAA;EAWS,iBAAA,CAAA;EAAA,UAmCU,YAAA,CAAa,OAAA,EAAS,cAAA;EAUhC,oBAAA,CAAA;EAMA,eAAA,CAAA;EAAA,UAMU,UAAA,CAAW,OAAA,EAAS,cAAA;EAAA,UAiBpB,MAAA,CAAO,QAAA,EAAU,cAAA;AAAA"}
+{"version":3,"file":"popover-element.d.ts","names":[],"sources":["../../../../src/ui/popover/popover-element.ts"],"mappings":";;;;;;cAmBa,cAAA,SAAuB,YAAA;EAAA;kBAClB,OAAA;EAAA,OAEA,UAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAahB,IAAA;EACA,WAAA;EACA,IAAA,iBAAI,WAAA;EACJ,KAAA,EADI,cAAA,CACC,YAAA;EACL,KAAA,EAAO,YAAA;EACP,aAAA;EACA,mBAAA;EACA,WAAA;EACA,KAAA;EACA,UAAA;EAeS,iBAAA,CAAA;EAAA,UAmCU,YAAA,CAAa,OAAA,EAAS,cAAA;EAUhC,oBAAA,CAAA;EAOA,eAAA,CAAA;EAAA,UAOU,UAAA,CAAW,OAAA,EAAS,cAAA;EAAA,UAiBpB,MAAA,CAAO,QAAA,EAAU,cAAA;AAAA"}

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

@@ -1,5 +1,5 @@
 import { MediaElement } from "../media-element.js";
-import { applyElementProps, applyStateDataAttrs, createPopover, createTransition, getAnchorNameStyle, getAnchorPositionStyle, resolveOffsets } from "@videojs/core/dom";
+import { applyElementProps, applyStateDataAttrs, createPopover, createTransition, getAnchorNameStyle, getAnchorPositionStyle, getPopupPositionRect, resolveOffsets } from "@videojs/core/dom";
 import { SnapshotController } from "@videojs/store/html";
 import { PopoverCore, PopoverDataAttrs } from "@videojs/core";
 import { applyStyles, supportsAnchorPositioning, tryHidePopover, tryShowPopover } from "@videojs/utils/dom";
@@ -57,6 +57,10 @@ var PopoverElement = class extends MediaElement {
 	#disconnect = null;
 	#triggerAbort = null;
 	#currentTrigger = null;
+	#positionAbort = null;
+	#positionFrame = 0;
+	#resizeObserver = null;
+	#positionTrigger = null;
 	connectedCallback() {
 		super.connectedCallback();
 		if (this.destroyed) return;
@@ -87,10 +91,12 @@ var PopoverElement = class extends MediaElement {
 	}
 	disconnectedCallback() {
 		super.disconnectedCallback();
+		this.#cleanupPositioning();
 		this.#disconnect?.abort();
 		this.#disconnect = null;
 	}
 	destroyCallback() {
+		this.#cleanupPositioning();
 		this.#cleanupTrigger();
 		this.#popover?.destroy();
 		super.destroyCallback();
@@ -120,7 +126,10 @@ var PopoverElement = class extends MediaElement {
 			applyElementProps(this.#currentTrigger, this.#core.getTriggerAttrs(state, this.id));
 			applyStyles(this.#currentTrigger, getAnchorNameStyle(this.id));
 		}
-		if (!state.open) return;
+		if (!state.open) {
+			this.#cleanupPositioning();
+			return;
+		}
 		const posOpts = {
 			side: state.side,
 			align: state.align
@@ -128,11 +137,12 @@ var PopoverElement = class extends MediaElement {
 		if (supportsAnchorPositioning()) applyStyles(this, getAnchorPositionStyle(this.id, posOpts));
 		else {
 			const triggerRect = this.#currentTrigger?.getBoundingClientRect();
-			const selfRect = this.getBoundingClientRect();
+			const selfRect = getPopupPositionRect(this);
 			const boundaryRect = document.documentElement.getBoundingClientRect();
 			const offsets = resolveOffsets(this);
 			applyStyles(this, getAnchorPositionStyle(this.id, posOpts, triggerRect, selfRect, boundaryRect, offsets));
 		}
+		this.#syncPositioning();
 	}
 	#findTrigger() {
 		if (!this.id) return null;
@@ -140,6 +150,7 @@ var PopoverElement = class extends MediaElement {
 	}
 	#syncTrigger(triggerEl) {
 		if (triggerEl === this.#currentTrigger) return;
+		this.#cleanupPositioning();
 		this.#cleanupTrigger();
 		this.#currentTrigger = triggerEl;
 		this.#popover?.setTriggerElement(triggerEl);
@@ -161,6 +172,46 @@ var PopoverElement = class extends MediaElement {
 		this.#triggerAbort = null;
 		this.#currentTrigger = null;
 	}
+	#syncPositioning() {
+		if (supportsAnchorPositioning()) return;
+		const triggerEl = this.#currentTrigger;
+		if (!triggerEl) return;
+		if (this.#positionAbort && this.#positionTrigger === triggerEl) return;
+		this.#cleanupPositioning();
+		this.#positionAbort = new AbortController();
+		this.#positionTrigger = triggerEl;
+		const { signal } = this.#positionAbort;
+		const reposition = () => {
+			cancelAnimationFrame(this.#positionFrame);
+			this.#positionFrame = requestAnimationFrame(() => {
+				if (signal.aborted) return;
+				this.requestUpdate();
+			});
+		};
+		window.addEventListener("scroll", reposition, {
+			capture: true,
+			passive: true,
+			signal
+		});
+		window.addEventListener("resize", reposition, { signal });
+		if (typeof ResizeObserver === "function") {
+			this.#resizeObserver = new ResizeObserver(() => {
+				reposition();
+			});
+			this.#resizeObserver.observe(triggerEl);
+			this.#resizeObserver.observe(this);
+		}
+		reposition();
+	}
+	#cleanupPositioning() {
+		this.#positionAbort?.abort();
+		this.#positionAbort = null;
+		this.#positionTrigger = null;
+		cancelAnimationFrame(this.#positionFrame);
+		this.#positionFrame = 0;
+		this.#resizeObserver?.disconnect();
+		this.#resizeObserver = null;
+	}
 };
 
 //#endregion

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

@@ -1 +1 @@
-{"version":3,"file":"popover-element.js","names":["#core","#disconnect","#popover","#snapshot","#cleanupTrigger","#findTrigger","#syncTrigger","#currentTrigger","#triggerAbort"],"sources":["../../../../src/ui/popover/popover-element.ts"],"sourcesContent":["import { PopoverCore, PopoverDataAttrs, type PopoverInput, type PopoverProps } from '@videojs/core';\nimport {\n  applyElementProps,\n  applyStateDataAttrs,\n  createPopover,\n  createTransition,\n  getAnchorNameStyle,\n  getAnchorPositionStyle,\n  type PopoverApi,\n  type PopoverChangeDetails,\n  resolveOffsets,\n} from '@videojs/core/dom';\nimport type { PropertyDeclarationMap, PropertyValues } from '@videojs/element';\nimport { SnapshotController } from '@videojs/store/html';\nimport { applyStyles, supportsAnchorPositioning, tryHidePopover, tryShowPopover } from '@videojs/utils/dom';\n\nimport { MediaElement } from '../media-element';\n\nexport class PopoverElement extends MediaElement {\n  static readonly tagName = 'media-popover';\n\n  static override properties = {\n    open: { type: Boolean },\n    defaultOpen: { type: Boolean, attribute: 'default-open' },\n    side: { type: String },\n    align: { type: String },\n    modal: { type: Boolean },\n    closeOnEscape: { type: Boolean, attribute: 'close-on-escape' },\n    closeOnOutsideClick: { type: Boolean, attribute: 'close-on-outside-click' },\n    openOnHover: { type: Boolean, attribute: 'open-on-hover' },\n    delay: { type: Number },\n    closeDelay: { type: Number, attribute: 'close-delay' },\n  } satisfies PropertyDeclarationMap<keyof PopoverCore.Props>;\n\n  open = PopoverCore.defaultProps.open;\n  defaultOpen = PopoverCore.defaultProps.defaultOpen;\n  side = PopoverCore.defaultProps.side;\n  align = PopoverCore.defaultProps.align;\n  modal: PopoverProps['modal'] = PopoverCore.defaultProps.modal;\n  closeOnEscape = PopoverCore.defaultProps.closeOnEscape;\n  closeOnOutsideClick = PopoverCore.defaultProps.closeOnOutsideClick;\n  openOnHover = PopoverCore.defaultProps.openOnHover;\n  delay = PopoverCore.defaultProps.delay;\n  closeDelay = PopoverCore.defaultProps.closeDelay;\n\n  readonly #core = new PopoverCore();\n  #popover: PopoverApi | null = null;\n  #snapshot: SnapshotController<PopoverInput> | null = null;\n\n  // Cleanup controllers\n  #disconnect: AbortController | null = null;\n  #triggerAbort: AbortController | null = null;\n  #currentTrigger: HTMLElement | null = null;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    if (this.destroyed) return;\n\n    this.#disconnect = new AbortController();\n\n    this.#popover = createPopover({\n      transition: createTransition(),\n      onOpenChange: (nextOpen: boolean, details: PopoverChangeDetails) => {\n        this.open = nextOpen;\n        this.dispatchEvent(new CustomEvent('open-change', { detail: { open: nextOpen, ...details } }));\n      },\n      closeOnEscape: () => this.closeOnEscape,\n      closeOnOutsideClick: () => this.closeOnOutsideClick,\n      openOnHover: () => this.openOnHover,\n      delay: () => this.delay,\n      closeDelay: () => this.closeDelay,\n    });\n\n    // Register self as the popup element — the element IS the popup.\n    this.#popover.setPopupElement(this);\n\n    // Apply popup event handlers (pointerenter/leave, focusout) to self.\n    applyElementProps(this, this.#popover.popupProps, { signal: this.#disconnect.signal });\n\n    // Subscribe to interaction state for reactive updates.\n    // Reuse the controller across connect/disconnect cycles to avoid\n    // leaking stale controllers in the host's controller set.\n    if (this.#snapshot) {\n      this.#snapshot.track(this.#popover.input);\n    } else {\n      this.#snapshot = new SnapshotController(this, this.#popover.input);\n    }\n  }\n\n  protected override firstUpdated(changed: PropertyValues): void {\n    super.firstUpdated(changed);\n\n    // Uncontrolled mode: open if `defaultOpen` is set. Controlled `open`\n    // is already synced by `willUpdate` on the first render cycle.\n    if (this.defaultOpen && !this.open) {\n      this.#popover?.open();\n    }\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.#disconnect?.abort();\n    this.#disconnect = null;\n  }\n\n  override destroyCallback(): void {\n    this.#cleanupTrigger();\n    this.#popover?.destroy();\n    super.destroyCallback();\n  }\n\n  protected override willUpdate(changed: PropertyValues): void {\n    super.willUpdate(changed);\n    this.#core.setProps(this);\n\n    // Sync controlled open state\n    if (this.#popover && changed.has('open')) {\n      const { active: interactionOpen } = this.#popover.input.current;\n      if (this.open !== interactionOpen) {\n        if (this.open) {\n          this.#popover.open();\n        } else {\n          this.#popover.close();\n        }\n      }\n    }\n  }\n\n  protected override update(_changed: PropertyValues): void {\n    super.update(_changed);\n    if (!this.#popover) return;\n\n    // Discover trigger via commandfor linkage.\n    const triggerEl = this.#findTrigger();\n    this.#syncTrigger(triggerEl);\n\n    // Derive state from core + input.\n    const input = this.#popover.input.current;\n    this.#core.setInput(input);\n    const state = this.#core.getState();\n\n    // Apply popup ARIA and data attributes to self.\n    applyElementProps(this, this.#core.getPopupAttrs(state));\n    applyStateDataAttrs(this, state, PopoverDataAttrs);\n\n    // Show/hide via Popover API AFTER data attributes are applied so\n    // `data-starting-style` is present before the first visible frame.\n    if (state.open) {\n      tryShowPopover(this);\n    } else {\n      tryHidePopover(this);\n    }\n\n    // Apply trigger ARIA and anchor-name to the discovered trigger.\n    if (this.#currentTrigger) {\n      applyElementProps(this.#currentTrigger, this.#core.getTriggerAttrs(state, this.id));\n      applyStyles(this.#currentTrigger, getAnchorNameStyle(this.id));\n    }\n\n    // Skip positioning when closed — no rects to measure.\n    if (!state.open) return;\n\n    // Apply positioning styles to self.\n    const posOpts = { side: state.side, align: state.align };\n\n    if (supportsAnchorPositioning()) {\n      // Native CSS Anchor Positioning — no JS rect measurements needed.\n      applyStyles(this, getAnchorPositionStyle(this.id, posOpts));\n    } else {\n      // JS fallback: measure rects and resolve CSS var offsets.\n      const triggerRect = this.#currentTrigger?.getBoundingClientRect();\n      const selfRect = this.getBoundingClientRect();\n      const boundaryRect = document.documentElement.getBoundingClientRect();\n      const offsets = resolveOffsets(this);\n      applyStyles(this, getAnchorPositionStyle(this.id, posOpts, triggerRect, selfRect, boundaryRect, offsets));\n    }\n  }\n\n  // --- Trigger discovery ---\n\n  #findTrigger(): HTMLElement | null {\n    if (!this.id) return null;\n    const root = this.getRootNode() as Document | ShadowRoot;\n    return root.querySelector<HTMLElement>(`[commandfor=\"${this.id}\"]`);\n  }\n\n  #syncTrigger(triggerEl: HTMLElement | null): void {\n    if (triggerEl === this.#currentTrigger) return;\n\n    this.#cleanupTrigger();\n    this.#currentTrigger = triggerEl;\n    this.#popover?.setTriggerElement(triggerEl);\n\n    if (triggerEl && this.#popover) {\n      this.#triggerAbort = new AbortController();\n      applyElementProps(triggerEl, this.#popover.triggerProps, { signal: this.#triggerAbort.signal });\n    }\n  }\n\n  #cleanupTrigger(): void {\n    if (this.#currentTrigger) {\n      // Remove ARIA attributes and anchor-name style from the old trigger.\n      applyElementProps(this.#currentTrigger, {\n        'aria-expanded': undefined,\n        'aria-haspopup': undefined,\n        'aria-controls': undefined,\n      });\n      this.#currentTrigger.style.removeProperty('anchor-name');\n    }\n\n    this.#triggerAbort?.abort();\n    this.#triggerAbort = null;\n    this.#currentTrigger = null;\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"popover-element.js","names":["#core","#disconnect","#popover","#snapshot","#cleanupPositioning","#cleanupTrigger","#findTrigger","#syncTrigger","#currentTrigger","#syncPositioning","#triggerAbort","#positionAbort","#positionTrigger","#positionFrame","#resizeObserver"],"sources":["../../../../src/ui/popover/popover-element.ts"],"sourcesContent":["import { PopoverCore, PopoverDataAttrs, type PopoverInput, type PopoverProps } from '@videojs/core';\nimport {\n  applyElementProps,\n  applyStateDataAttrs,\n  createPopover,\n  createTransition,\n  getAnchorNameStyle,\n  getAnchorPositionStyle,\n  getPopupPositionRect,\n  type PopoverApi,\n  type PopoverChangeDetails,\n  resolveOffsets,\n} from '@videojs/core/dom';\nimport type { PropertyDeclarationMap, PropertyValues } from '@videojs/element';\nimport { SnapshotController } from '@videojs/store/html';\nimport { applyStyles, supportsAnchorPositioning, tryHidePopover, tryShowPopover } from '@videojs/utils/dom';\n\nimport { MediaElement } from '../media-element';\n\nexport class PopoverElement extends MediaElement {\n  static readonly tagName = 'media-popover';\n\n  static override properties = {\n    open: { type: Boolean },\n    defaultOpen: { type: Boolean, attribute: 'default-open' },\n    side: { type: String },\n    align: { type: String },\n    modal: { type: Boolean },\n    closeOnEscape: { type: Boolean, attribute: 'close-on-escape' },\n    closeOnOutsideClick: { type: Boolean, attribute: 'close-on-outside-click' },\n    openOnHover: { type: Boolean, attribute: 'open-on-hover' },\n    delay: { type: Number },\n    closeDelay: { type: Number, attribute: 'close-delay' },\n  } satisfies PropertyDeclarationMap<keyof PopoverCore.Props>;\n\n  open = PopoverCore.defaultProps.open;\n  defaultOpen = PopoverCore.defaultProps.defaultOpen;\n  side = PopoverCore.defaultProps.side;\n  align = PopoverCore.defaultProps.align;\n  modal: PopoverProps['modal'] = PopoverCore.defaultProps.modal;\n  closeOnEscape = PopoverCore.defaultProps.closeOnEscape;\n  closeOnOutsideClick = PopoverCore.defaultProps.closeOnOutsideClick;\n  openOnHover = PopoverCore.defaultProps.openOnHover;\n  delay = PopoverCore.defaultProps.delay;\n  closeDelay = PopoverCore.defaultProps.closeDelay;\n\n  readonly #core = new PopoverCore();\n  #popover: PopoverApi | null = null;\n  #snapshot: SnapshotController<PopoverInput> | null = null;\n\n  // Cleanup controllers\n  #disconnect: AbortController | null = null;\n  #triggerAbort: AbortController | null = null;\n  #currentTrigger: HTMLElement | null = null;\n  #positionAbort: AbortController | null = null;\n  #positionFrame = 0;\n  #resizeObserver: ResizeObserver | null = null;\n  #positionTrigger: HTMLElement | null = null;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    if (this.destroyed) return;\n\n    this.#disconnect = new AbortController();\n\n    this.#popover = createPopover({\n      transition: createTransition(),\n      onOpenChange: (nextOpen: boolean, details: PopoverChangeDetails) => {\n        this.open = nextOpen;\n        this.dispatchEvent(new CustomEvent('open-change', { detail: { open: nextOpen, ...details } }));\n      },\n      closeOnEscape: () => this.closeOnEscape,\n      closeOnOutsideClick: () => this.closeOnOutsideClick,\n      openOnHover: () => this.openOnHover,\n      delay: () => this.delay,\n      closeDelay: () => this.closeDelay,\n    });\n\n    // Register self as the popup element — the element IS the popup.\n    this.#popover.setPopupElement(this);\n\n    // Apply popup event handlers (pointerenter/leave, focusout) to self.\n    applyElementProps(this, this.#popover.popupProps, { signal: this.#disconnect.signal });\n\n    // Subscribe to interaction state for reactive updates.\n    // Reuse the controller across connect/disconnect cycles to avoid\n    // leaking stale controllers in the host's controller set.\n    if (this.#snapshot) {\n      this.#snapshot.track(this.#popover.input);\n    } else {\n      this.#snapshot = new SnapshotController(this, this.#popover.input);\n    }\n  }\n\n  protected override firstUpdated(changed: PropertyValues): void {\n    super.firstUpdated(changed);\n\n    // Uncontrolled mode: open if `defaultOpen` is set. Controlled `open`\n    // is already synced by `willUpdate` on the first render cycle.\n    if (this.defaultOpen && !this.open) {\n      this.#popover?.open();\n    }\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.#cleanupPositioning();\n    this.#disconnect?.abort();\n    this.#disconnect = null;\n  }\n\n  override destroyCallback(): void {\n    this.#cleanupPositioning();\n    this.#cleanupTrigger();\n    this.#popover?.destroy();\n    super.destroyCallback();\n  }\n\n  protected override willUpdate(changed: PropertyValues): void {\n    super.willUpdate(changed);\n    this.#core.setProps(this);\n\n    // Sync controlled open state\n    if (this.#popover && changed.has('open')) {\n      const { active: interactionOpen } = this.#popover.input.current;\n      if (this.open !== interactionOpen) {\n        if (this.open) {\n          this.#popover.open();\n        } else {\n          this.#popover.close();\n        }\n      }\n    }\n  }\n\n  protected override update(_changed: PropertyValues): void {\n    super.update(_changed);\n    if (!this.#popover) return;\n\n    // Discover trigger via commandfor linkage.\n    const triggerEl = this.#findTrigger();\n    this.#syncTrigger(triggerEl);\n\n    // Derive state from core + input.\n    const input = this.#popover.input.current;\n    this.#core.setInput(input);\n    const state = this.#core.getState();\n\n    // Apply popup ARIA and data attributes to self.\n    applyElementProps(this, this.#core.getPopupAttrs(state));\n    applyStateDataAttrs(this, state, PopoverDataAttrs);\n\n    // Show/hide via Popover API AFTER data attributes are applied so\n    // `data-starting-style` is present before the first visible frame.\n    if (state.open) {\n      tryShowPopover(this);\n    } else {\n      tryHidePopover(this);\n    }\n\n    // Apply trigger ARIA and anchor-name to the discovered trigger.\n    if (this.#currentTrigger) {\n      applyElementProps(this.#currentTrigger, this.#core.getTriggerAttrs(state, this.id));\n      applyStyles(this.#currentTrigger, getAnchorNameStyle(this.id));\n    }\n\n    // Skip positioning when closed — no rects to measure.\n    if (!state.open) {\n      this.#cleanupPositioning();\n      return;\n    }\n\n    // Apply positioning styles to self.\n    const posOpts = { side: state.side, align: state.align };\n\n    if (supportsAnchorPositioning()) {\n      // Native CSS Anchor Positioning — no JS rect measurements needed.\n      applyStyles(this, getAnchorPositionStyle(this.id, posOpts));\n    } else {\n      // JS fallback: measure rects and resolve CSS var offsets.\n      const triggerRect = this.#currentTrigger?.getBoundingClientRect();\n      const selfRect = getPopupPositionRect(this);\n      const boundaryRect = document.documentElement.getBoundingClientRect();\n      const offsets = resolveOffsets(this);\n      applyStyles(this, getAnchorPositionStyle(this.id, posOpts, triggerRect, selfRect, boundaryRect, offsets));\n    }\n\n    this.#syncPositioning();\n  }\n\n  // --- Trigger discovery ---\n\n  #findTrigger(): HTMLElement | null {\n    if (!this.id) return null;\n    const root = this.getRootNode() as Document | ShadowRoot;\n    return root.querySelector<HTMLElement>(`[commandfor=\"${this.id}\"]`);\n  }\n\n  #syncTrigger(triggerEl: HTMLElement | null): void {\n    if (triggerEl === this.#currentTrigger) return;\n\n    this.#cleanupPositioning();\n    this.#cleanupTrigger();\n    this.#currentTrigger = triggerEl;\n    this.#popover?.setTriggerElement(triggerEl);\n\n    if (triggerEl && this.#popover) {\n      this.#triggerAbort = new AbortController();\n      applyElementProps(triggerEl, this.#popover.triggerProps, { signal: this.#triggerAbort.signal });\n    }\n  }\n\n  #cleanupTrigger(): void {\n    if (this.#currentTrigger) {\n      // Remove ARIA attributes and anchor-name style from the old trigger.\n      applyElementProps(this.#currentTrigger, {\n        'aria-expanded': undefined,\n        'aria-haspopup': undefined,\n        'aria-controls': undefined,\n      });\n      this.#currentTrigger.style.removeProperty('anchor-name');\n    }\n\n    this.#triggerAbort?.abort();\n    this.#triggerAbort = null;\n    this.#currentTrigger = null;\n  }\n\n  #syncPositioning(): void {\n    if (supportsAnchorPositioning()) return;\n\n    const triggerEl = this.#currentTrigger;\n\n    if (!triggerEl) return;\n    if (this.#positionAbort && this.#positionTrigger === triggerEl) return;\n\n    this.#cleanupPositioning();\n    this.#positionAbort = new AbortController();\n    this.#positionTrigger = triggerEl;\n    const { signal } = this.#positionAbort;\n\n    const reposition = () => {\n      cancelAnimationFrame(this.#positionFrame);\n      this.#positionFrame = requestAnimationFrame(() => {\n        if (signal.aborted) return;\n        this.requestUpdate();\n      });\n    };\n\n    window.addEventListener('scroll', reposition, { capture: true, passive: true, signal });\n    window.addEventListener('resize', reposition, { signal });\n\n    if (typeof ResizeObserver === 'function') {\n      this.#resizeObserver = new ResizeObserver(() => {\n        reposition();\n      });\n      this.#resizeObserver.observe(triggerEl);\n      this.#resizeObserver.observe(this);\n    }\n\n    reposition();\n  }\n\n  #cleanupPositioning(): void {\n    this.#positionAbort?.abort();\n    this.#positionAbort = null;\n    this.#positionTrigger = null;\n    cancelAnimationFrame(this.#positionFrame);\n    this.#positionFrame = 0;\n    this.#resizeObserver?.disconnect();\n    this.#resizeObserver = null;\n  }\n}\n"],"mappings":"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"}

package/dist/dev/ui/time-slider/time-slider-element.js

@@ -69,7 +69,7 @@ var TimeSliderElement = class extends MediaElement {
 			getLargeStepPercent: () => this.#core.getLargeStepPercent(),
 			onValueCommit: (percent) => {
 				const media = this.#timeState.value;
-				if (media) media.seek(this.#core.valueFromPercent(percent));
+				if (media) media.seek(this.#core.rawValueFromPercent(percent));
 			},
 			commitThrottle: this.commitThrottle,
 			onDragStart: () => {