@videojs/html 10.0.0-beta.9 → 10.0.0-rc.1

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

@@ -1,11 +1,15 @@
-import { MediaElement } from "../media-element.js";
-import { applyElementProps, applyStateDataAttrs, createPopover, createTransition, getAnchorNameStyle, getAnchorPositionStyle, getPopupPositionRect, resolveOffsets } from "@videojs/core/dom";
+import { containerContext } from "../../player/context.js";
+import { UIElement } from "../ui-element.js";
+import { PositionController } from "../position-controller.js";
+import { popupGroupContext } from "../../player/popup-group-context.js";
+import { POPUP_HOST_ATTR, PopoverCore, PopoverDataAttrs } from "@videojs/core";
+import { applyElementProps, applyStateDataAttrs, createPopover, createTransition } from "@videojs/core/dom";
+import { ContextConsumer } from "@videojs/element/context";
+import { tryHidePopover, tryShowPopover } from "@videojs/utils/dom";
 import { SnapshotController } from "@videojs/store/html";
-import { PopoverCore, PopoverDataAttrs } from "@videojs/core";
-import { applyStyles, supportsAnchorPositioning, tryHidePopover, tryShowPopover } from "@videojs/utils/dom";
-
 //#region src/ui/popover/popover-element.ts
-var PopoverElement = class extends MediaElement {
+/** @fires open-change - Fired when the popover's open state changes. */
+var PopoverElement = class extends UIElement {
 	constructor(..._args) {
 		super(..._args);
 		this.open = PopoverCore.defaultProps.open;
@@ -18,6 +22,19 @@ var PopoverElement = class extends MediaElement {
 		this.openOnHover = PopoverCore.defaultProps.openOnHover;
 		this.delay = PopoverCore.defaultProps.delay;
 		this.closeDelay = PopoverCore.defaultProps.closeDelay;
+		this.boundary = "container";
+		this.#core = new PopoverCore();
+		this.#containerCtx = new ContextConsumer(this, {
+			context: containerContext,
+			subscribe: true
+		});
+		this.#popupGroupCtx = new ContextConsumer(this, { context: popupGroupContext });
+		this.#position = new PositionController(this);
+		this.#popover = null;
+		this.#snapshot = null;
+		this.#disconnect = null;
+		this.#triggerAbort = null;
+		this.#currentTrigger = null;
 	}
 	static {
 		this.tagName = "media-popover";
@@ -48,22 +65,23 @@ var PopoverElement = class extends MediaElement {
 			closeDelay: {
 				type: Number,
 				attribute: "close-delay"
-			}
+			},
+			boundary: { type: String }
 		};
 	}
-	#core = new PopoverCore();
-	#popover = null;
-	#snapshot = null;
-	#disconnect = null;
-	#triggerAbort = null;
-	#currentTrigger = null;
-	#positionAbort = null;
-	#positionFrame = 0;
-	#resizeObserver = null;
-	#positionTrigger = null;
+	#core;
+	#containerCtx;
+	#popupGroupCtx;
+	#position;
+	#popover;
+	#snapshot;
+	#disconnect;
+	#triggerAbort;
+	#currentTrigger;
 	connectedCallback() {
 		super.connectedCallback();
 		if (this.destroyed) return;
+		this.setAttribute(POPUP_HOST_ATTR, "");
 		this.#disconnect = new AbortController();
 		this.#popover = createPopover({
 			transition: createTransition(),
@@ -78,7 +96,8 @@ var PopoverElement = class extends MediaElement {
 			closeOnOutsideClick: () => this.closeOnOutsideClick,
 			openOnHover: () => this.openOnHover,
 			delay: () => this.delay,
-			closeDelay: () => this.closeDelay
+			closeDelay: () => this.closeDelay,
+			group: () => this.#popupGroupCtx.value
 		});
 		this.#popover.setPopupElement(this);
 		applyElementProps(this, this.#popover.popupProps, { signal: this.#disconnect.signal });
@@ -91,16 +110,20 @@ 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();
 	}
+	close(reason = "imperative-action") {
+		this.#popover?.close(reason);
+	}
+	get triggerElement() {
+		return this.#currentTrigger;
+	}
 	willUpdate(changed) {
 		super.willUpdate(changed);
 		this.#core.setProps(this);
@@ -113,7 +136,7 @@ var PopoverElement = class extends MediaElement {
 	update(_changed) {
 		super.update(_changed);
 		if (!this.#popover) return;
-		const triggerEl = this.#findTrigger();
+		const triggerEl = this.#position.findTrigger();
 		this.#syncTrigger(triggerEl);
 		const input = this.#popover.input.current;
 		this.#core.setInput(input);
@@ -122,35 +145,26 @@ var PopoverElement = class extends MediaElement {
 		applyStateDataAttrs(this, state, PopoverDataAttrs);
 		if (state.open) tryShowPopover(this);
 		else tryHidePopover(this);
-		if (this.#currentTrigger) {
-			applyElementProps(this.#currentTrigger, this.#core.getTriggerAttrs(state, this.id));
-			applyStyles(this.#currentTrigger, getAnchorNameStyle(this.id));
-		}
+		if (this.#currentTrigger) applyElementProps(this.#currentTrigger, this.#core.getTriggerAttrs(state, this.id));
 		if (!state.open) {
-			this.#cleanupPositioning();
+			this.#position.cleanup();
 			return;
 		}
-		const posOpts = {
-			side: state.side,
-			align: state.align
-		};
-		if (supportsAnchorPositioning()) applyStyles(this, getAnchorPositionStyle(this.id, posOpts));
-		else {
-			const triggerRect = this.#currentTrigger?.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;
-		return this.getRootNode().querySelector(`[commandfor="${this.id}"]`);
+		this.#position.sync({
+			anchorName: this.id,
+			position: {
+				side: state.side,
+				align: state.align
+			},
+			trigger: this.#currentTrigger,
+			boundary: this.boundary,
+			container: this.#containerCtx.value?.container ?? null,
+			onSideChange: (side) => this.setAttribute(PopoverDataAttrs.side, side)
+		});
 	}
 	#syncTrigger(triggerEl) {
 		if (triggerEl === this.#currentTrigger) return;
-		this.#cleanupPositioning();
+		this.#position.cleanup();
 		this.#cleanupTrigger();
 		this.#currentTrigger = triggerEl;
 		this.#popover?.setTriggerElement(triggerEl);
@@ -160,60 +174,17 @@ var PopoverElement = class extends MediaElement {
 		}
 	}
 	#cleanupTrigger() {
-		if (this.#currentTrigger) {
-			applyElementProps(this.#currentTrigger, {
-				"aria-expanded": void 0,
-				"aria-haspopup": void 0,
-				"aria-controls": void 0
-			});
-			this.#currentTrigger.style.removeProperty("anchor-name");
-		}
+		if (this.#currentTrigger) applyElementProps(this.#currentTrigger, {
+			"aria-expanded": void 0,
+			"aria-haspopup": void 0,
+			"aria-controls": void 0
+		});
 		this.#triggerAbort?.abort();
 		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
 export { PopoverElement };
+
 //# sourceMappingURL=popover-element.js.map

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

@@ -1 +1 @@
-{"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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"}
+{"version":3,"file":"popover-element.js","names":["#core","#containerCtx","#popupGroupCtx","#position","#disconnect","#popover","#snapshot","#cleanupTrigger","#currentTrigger","#syncTrigger","#triggerAbort"],"sources":["../../../../src/ui/popover/popover-element.ts"],"sourcesContent":["import { POPUP_HOST_ATTR, PopoverCore, PopoverDataAttrs, type PopoverInput, type PopoverProps } from '@videojs/core';\nimport {\n  applyElementProps,\n  applyStateDataAttrs,\n  createPopover,\n  createTransition,\n  type PopoverApi,\n  type PopoverChangeDetails,\n  type PopoverOpenChangeReason,\n  type PositioningBoundary,\n} from '@videojs/core/dom';\nimport type { PropertyDeclarationMap, PropertyValues } from '@videojs/element';\nimport { ContextConsumer } from '@videojs/element/context';\nimport { SnapshotController } from '@videojs/store/html';\nimport { tryHidePopover, tryShowPopover } from '@videojs/utils/dom';\n\nimport { containerContext } from '../../player/context';\nimport { popupGroupContext } from '../../player/popup-group-context';\nimport { PositionController } from '../position-controller';\nimport { UIElement } from '../ui-element';\n\n/** @fires open-change - Fired when the popover's open state changes. */\nexport class PopoverElement extends UIElement {\n  static readonly tagName: string = '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    boundary: { type: String },\n  } satisfies PropertyDeclarationMap<keyof PopoverCore.Props | 'boundary'>;\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  boundary: PositioningBoundary = 'container';\n\n  readonly #core = new PopoverCore();\n  readonly #containerCtx = new ContextConsumer(this, { context: containerContext, subscribe: true });\n  readonly #popupGroupCtx = new ContextConsumer(this, { context: popupGroupContext });\n  readonly #position = new PositionController(this);\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\n    if (this.destroyed) return;\n\n    this.setAttribute(POPUP_HOST_ATTR, '');\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      group: () => this.#popupGroupCtx.value,\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  close(reason: PopoverOpenChangeReason = 'imperative-action'): void {\n    this.#popover?.close(reason);\n  }\n\n  protected get triggerElement(): HTMLElement | null {\n    return this.#currentTrigger;\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\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\n    if (!this.#popover) return;\n\n    // Discover trigger via commandfor linkage.\n    const triggerEl = this.#position.findTrigger();\n\n    this.#syncTrigger(triggerEl);\n\n    // Derive state from core + input.\n    const input = this.#popover.input.current;\n\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 to the discovered trigger.\n    if (this.#currentTrigger) {\n      applyElementProps(this.#currentTrigger, this.#core.getTriggerAttrs(state, this.id));\n    }\n\n    // Skip positioning when closed — no rects to measure.\n    if (!state.open) {\n      this.#position.cleanup();\n      return;\n    }\n\n    this.#position.sync({\n      anchorName: this.id,\n      position: { side: state.side, align: state.align },\n      trigger: this.#currentTrigger,\n      boundary: this.boundary,\n      container: this.#containerCtx.value?.container ?? null,\n      onSideChange: (side) => this.setAttribute(PopoverDataAttrs.side, side),\n    });\n  }\n\n  // --- Trigger management ---\n\n  #syncTrigger(triggerEl: HTMLElement | null): void {\n    if (triggerEl === this.#currentTrigger) return;\n\n    this.#position.cleanup();\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      applyElementProps(this.#currentTrigger, {\n        'aria-expanded': undefined,\n        'aria-haspopup': undefined,\n        'aria-controls': undefined,\n      });\n    }\n\n    this.#triggerAbort?.abort();\n    this.#triggerAbort = null;\n    this.#currentTrigger = null;\n  }\n}\n"],"mappings":"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"}

package/dist/dev/ui/position-controller.js

@@ -0,0 +1,85 @@
+import { PopupPositioner } from "@videojs/core/dom";
+//#region src/ui/position-controller.ts
+let popupId = 0;
+/** Connects a popup element to the shared positioning lifecycle. */
+var PositionController = class {
+	#host;
+	#positioner = new PopupPositioner();
+	#implicitBinding = null;
+	constructor(host) {
+		this.#host = host;
+		host.addController(this);
+	}
+	/** Discover an explicit trigger by ID or one linked via `commandfor`. */
+	findTrigger(trigger) {
+		const root = this.#host.getRootNode();
+		if (root.nodeType !== Node.DOCUMENT_NODE && root.nodeType !== Node.DOCUMENT_FRAGMENT_NODE) {
+			this.#releaseImplicitBinding();
+			return null;
+		}
+		const scopedRoot = root;
+		if (trigger) {
+			this.#releaseImplicitBinding();
+			return scopedRoot.getElementById(trigger);
+		}
+		if (this.#implicitBinding) {
+			const { id, trigger: boundTrigger } = this.#implicitBinding;
+			if (this.#host.id === id && boundTrigger.getAttribute("commandfor") === id && this.#host.previousElementSibling === boundTrigger) return boundTrigger;
+			this.#releaseImplicitBinding();
+		}
+		if (this.#host.id) return scopedRoot.querySelector(`[commandfor="${this.#host.id}"]`);
+		const adjacent = this.#host.previousElementSibling;
+		if (!(adjacent instanceof HTMLElement)) {
+			console.warn(`[${this.#host.localName}] No trigger was found. Place the popup immediately after its trigger or link them explicitly.`);
+			return null;
+		}
+		const claimedTarget = adjacent.getAttribute("commandfor");
+		if (claimedTarget) {
+			console.warn(`[${this.#host.localName}] The adjacent trigger already targets \`${claimedTarget}\`; link this popup explicitly.`);
+			return null;
+		}
+		const id = nextPopupId(scopedRoot);
+		this.#host.id = id;
+		adjacent.setAttribute("commandfor", id);
+		this.#implicitBinding = {
+			id,
+			trigger: adjacent
+		};
+		return adjacent;
+	}
+	sync(options) {
+		this.#positioner.sync({
+			...options,
+			popup: this.#host
+		});
+	}
+	cleanup() {
+		this.#positioner.cleanup();
+	}
+	hostDisconnected() {
+		this.cleanup();
+		this.#releaseImplicitBinding();
+	}
+	hostDestroyed() {
+		this.cleanup();
+		this.#releaseImplicitBinding();
+	}
+	#releaseImplicitBinding() {
+		const binding = this.#implicitBinding;
+		if (!binding) return;
+		if (binding.trigger.getAttribute("commandfor") === binding.id) binding.trigger.removeAttribute("commandfor");
+		if (this.#host.id === binding.id) this.#host.removeAttribute("id");
+		this.#implicitBinding = null;
+	}
+};
+function nextPopupId(root) {
+	let id;
+	do
+		id = `vjs-popup-${++popupId}`;
+	while (root.getElementById(id));
+	return id;
+}
+//#endregion
+export { PositionController };
+
+//# sourceMappingURL=position-controller.js.map

package/dist/dev/ui/position-controller.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"position-controller.js","names":["#host","#positioner","#releaseImplicitBinding","#implicitBinding"],"sources":["../../../src/ui/position-controller.ts"],"sourcesContent":["import { PopupPositioner, type PopupPositionerOptions } from '@videojs/core/dom';\nimport type { ReactiveController, ReactiveControllerHost } from '@videojs/element';\n\nexport type PositionControllerHost = ReactiveControllerHost & HTMLElement;\n\nexport type PositionControllerOptions = Omit<PopupPositionerOptions, 'popup'>;\n\nlet popupId = 0;\n\ninterface ImplicitTriggerBinding {\n  id: string;\n  trigger: HTMLElement;\n}\n\n/** Connects a popup element to the shared positioning lifecycle. */\nexport class PositionController implements ReactiveController {\n  readonly #host: PositionControllerHost;\n  readonly #positioner = new PopupPositioner();\n  #implicitBinding: ImplicitTriggerBinding | null = null;\n\n  constructor(host: PositionControllerHost) {\n    this.#host = host;\n    host.addController(this);\n  }\n\n  /** Discover an explicit trigger by ID or one linked via `commandfor`. */\n  findTrigger(trigger?: string): HTMLElement | null {\n    const root = this.#host.getRootNode();\n\n    if (root.nodeType !== Node.DOCUMENT_NODE && root.nodeType !== Node.DOCUMENT_FRAGMENT_NODE) {\n      this.#releaseImplicitBinding();\n      return null;\n    }\n\n    const scopedRoot = root as Document | DocumentFragment;\n\n    if (trigger) {\n      this.#releaseImplicitBinding();\n      return scopedRoot.getElementById(trigger);\n    }\n\n    if (this.#implicitBinding) {\n      const { id, trigger: boundTrigger } = this.#implicitBinding;\n\n      if (\n        this.#host.id === id &&\n        boundTrigger.getAttribute('commandfor') === id &&\n        this.#host.previousElementSibling === boundTrigger\n      ) {\n        return boundTrigger;\n      }\n\n      this.#releaseImplicitBinding();\n    }\n\n    if (this.#host.id) {\n      return scopedRoot.querySelector<HTMLElement>(`[commandfor=\"${this.#host.id}\"]`);\n    }\n\n    const adjacent = this.#host.previousElementSibling;\n\n    if (!(adjacent instanceof HTMLElement)) {\n      if (__DEV__) {\n        console.warn(\n          `[${this.#host.localName}] No trigger was found. Place the popup immediately after its trigger or link them explicitly.`\n        );\n      }\n\n      return null;\n    }\n\n    const claimedTarget = adjacent.getAttribute('commandfor');\n\n    if (claimedTarget) {\n      if (__DEV__) {\n        console.warn(\n          `[${this.#host.localName}] The adjacent trigger already targets \\`${claimedTarget}\\`; link this popup explicitly.`\n        );\n      }\n\n      return null;\n    }\n\n    const id = nextPopupId(scopedRoot);\n\n    this.#host.id = id;\n    adjacent.setAttribute('commandfor', id);\n    this.#implicitBinding = { id, trigger: adjacent };\n    return adjacent;\n  }\n\n  sync(options: PositionControllerOptions): void {\n    this.#positioner.sync({ ...options, popup: this.#host });\n  }\n\n  cleanup(): void {\n    this.#positioner.cleanup();\n  }\n\n  hostDisconnected(): void {\n    this.cleanup();\n    this.#releaseImplicitBinding();\n  }\n\n  hostDestroyed(): void {\n    this.cleanup();\n    this.#releaseImplicitBinding();\n  }\n\n  #releaseImplicitBinding(): void {\n    const binding = this.#implicitBinding;\n    if (!binding) return;\n\n    if (binding.trigger.getAttribute('commandfor') === binding.id) {\n      binding.trigger.removeAttribute('commandfor');\n    }\n\n    if (this.#host.id === binding.id) {\n      this.#host.removeAttribute('id');\n    }\n\n    this.#implicitBinding = null;\n  }\n}\n\nfunction nextPopupId(root: Document | DocumentFragment): string {\n  let id: string;\n\n  do id = `vjs-popup-${++popupId}`;\n  while (root.getElementById(id));\n\n  return id;\n}\n"],"mappings":";;AAOA,IAAI,UAAU;;AAQd,IAAa,qBAAb,MAA8D;CAC5D;CACA,cAAuB,IAAI,gBAAgB;CAC3C,mBAAkD;CAElD,YAAY,MAA8B;EACxC,KAAKA,QAAQ;EACb,KAAK,cAAc,IAAI;CACzB;;CAGA,YAAY,SAAsC;EAChD,MAAM,OAAO,KAAKA,MAAM,YAAY;EAEpC,IAAI,KAAK,aAAa,KAAK,iBAAiB,KAAK,aAAa,KAAK,wBAAwB;GACzF,KAAKE,wBAAwB;GAC7B,OAAO;EACT;EAEA,MAAM,aAAa;EAEnB,IAAI,SAAS;GACX,KAAKA,wBAAwB;GAC7B,OAAO,WAAW,eAAe,OAAO;EAC1C;EAEA,IAAI,KAAKC,kBAAkB;GACzB,MAAM,EAAE,IAAI,SAAS,iBAAiB,KAAKA;GAE3C,IACE,KAAKH,MAAM,OAAO,MAClB,aAAa,aAAa,YAAY,MAAM,MAC5C,KAAKA,MAAM,2BAA2B,cAEtC,OAAO;GAGT,KAAKE,wBAAwB;EAC/B;EAEA,IAAI,KAAKF,MAAM,IACb,OAAO,WAAW,cAA2B,gBAAgB,KAAKA,MAAM,GAAG,GAAG;EAGhF,MAAM,WAAW,KAAKA,MAAM;EAE5B,IAAI,EAAE,oBAAoB,cAAc;GAEpC,QAAQ,KACN,IAAI,KAAKA,MAAM,UAAU,+FAC3B;GAGF,OAAO;EACT;EAEA,MAAM,gBAAgB,SAAS,aAAa,YAAY;EAExD,IAAI,eAAe;GAEf,QAAQ,KACN,IAAI,KAAKA,MAAM,UAAU,2CAA2C,cAAc,gCACpF;GAGF,OAAO;EACT;EAEA,MAAM,KAAK,YAAY,UAAU;EAEjC,KAAKA,MAAM,KAAK;EAChB,SAAS,aAAa,cAAc,EAAE;EACtC,KAAKG,mBAAmB;GAAE;GAAI,SAAS;EAAS;EAChD,OAAO;CACT;CAEA,KAAK,SAA0C;EAC7C,KAAKF,YAAY,KAAK;GAAE,GAAG;GAAS,OAAO,KAAKD;EAAM,CAAC;CACzD;CAEA,UAAgB;EACd,KAAKC,YAAY,QAAQ;CAC3B;CAEA,mBAAyB;EACvB,KAAK,QAAQ;EACb,KAAKC,wBAAwB;CAC/B;CAEA,gBAAsB;EACpB,KAAK,QAAQ;EACb,KAAKA,wBAAwB;CAC/B;CAEA,0BAAgC;EAC9B,MAAM,UAAU,KAAKC;EACrB,IAAI,CAAC,SAAS;EAEd,IAAI,QAAQ,QAAQ,aAAa,YAAY,MAAM,QAAQ,IACzD,QAAQ,QAAQ,gBAAgB,YAAY;EAG9C,IAAI,KAAKH,MAAM,OAAO,QAAQ,IAC5B,KAAKA,MAAM,gBAAgB,IAAI;EAGjC,KAAKG,mBAAmB;CAC1B;AACF;AAEA,SAAS,YAAY,MAA2C;CAC9D,IAAI;CAEJ;EAAG,KAAK,aAAa,EAAE;QAChB,KAAK,eAAe,EAAE;CAE7B,OAAO;AACT"}

package/dist/dev/ui/poster/poster-element.d.ts

@@ -1,17 +1,22 @@
-import { PlayerController } from "../../player/player-controller.js";
-import { MediaUIElement } from "../media-ui-element.js";
-import * as _videojs_core_dom0 from "@videojs/core/dom";
-import * as _videojs_core0 from "@videojs/core";
-import { PosterCore } from "@videojs/core";
-
+import { UIElement } from "../ui-element.js";
+import { PropertyValues } from "@videojs/element";
 //#region src/ui/poster/poster-element.d.ts
-declare class PosterElement extends MediaUIElement<PosterCore> {
+/**
+ * `<media-poster>` — sets `src` on a poster image it does not own.
+ *
+ * The image is a child, as in `<picture>`, but sourcing runs the other way around: `<picture>` treats the `src` on its
+ * `<img>` as the fallback, while here an image with no source of its own is the one this element fills in. Give the
+ * child a `src`, a `srcset`, or `<source>` candidates and it is yours, left alone.
+ *
+ * Renders no image of its own, so include one: `<media-poster><img alt=""></media-poster>`. Inside a skin, an `<img
+ * slot="poster">` of yours replaces the one the skin carries.
+ */
+declare class PosterElement extends UIElement {
+  #private;
   static readonly tagName = "media-poster";
-  protected readonly core: PosterCore;
-  protected readonly stateAttrMap: {
-    readonly visible: "data-visible";
-  };
-  protected readonly mediaState: PlayerController<_videojs_core_dom0.AnyPlayerStore, _videojs_core0.MediaPlaybackState | undefined>;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+  protected update(changed: PropertyValues): void;
 }
 //#endregion
 export { PosterElement };

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

@@ -1 +1 @@
-{"version":3,"file":"poster-element.d.ts","names":[],"sources":["../../../../src/ui/poster/poster-element.ts"],"mappings":";;;;;;;cAOa,aAAA,SAAsB,cAAA,CAAe,UAAA;EAAA,gBAChC,OAAA;EAAA,mBAEG,IAAA,EAAI,UAAA;EAAA,mBACJ,YAAA;IAAA;;qBACA,UAAA,EAAU,gBAAA,CAFN,kBAAA,CAEM,cAAA,EAAA,cAAA,CAAA,kBAAA;AAAA"}
+{"version":3,"file":"poster-element.d.ts","names":[],"sources":["../../../../src/ui/poster/poster-element.ts"],"mappings":";;;;;;;;;;;;;cAmEa,sBAAsB;;kBACjB;EAiBP;EAkBA;YAeU,OAAO,SAAS"}

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

@@ -1,22 +1,152 @@
 import { playerContext } from "../../player/context.js";
 import { PlayerController } from "../../player/player-controller.js";
-import { MediaUIElement } from "../media-ui-element.js";
-import { selectPlayback } from "@videojs/core/dom";
+import { UIElement } from "../ui-element.js";
 import { PosterCore, PosterDataAttrs } from "@videojs/core";
-
+import { applyStateDataAttrs, logMissingFeature, selectMetadata, selectPlayback } from "@videojs/core/dom";
 //#region src/ui/poster/poster-element.ts
-var PosterElement = class extends MediaUIElement {
-	constructor(..._args) {
-		super(..._args);
-		this.core = new PosterCore();
-		this.stateAttrMap = PosterDataAttrs;
-		this.mediaState = new PlayerController(this, playerContext, selectPlayback);
+/** What an element composes: whatever fills a slot, or the element's own children. */
+function composedChildren(element) {
+	if (element instanceof HTMLSlotElement) {
+		const assigned = element.assignedElements();
+		if (assigned.length > 0) return assigned;
+	}
+	return [...element.children];
+}
+/**
+* The first image an element composes. A skin forwards its own `<slot name="poster">` in, so the image is a slot or two
+* down and may be wrapped in a `<picture>` or a framework image component.
+*/
+function findImage(element) {
+	for (const child of composedChildren(element)) {
+		if (child instanceof HTMLImageElement) return child;
+		const nested = findImage(child);
+		if (nested) return nested;
 	}
+	return null;
+}
+/**
+* Whether anything already points this image somewhere, which answers both whether the author owns the source and
+* whether there is a download to wait for. A `<source>` counts: inside a `<picture>` it can win over the `src`.
+*/
+function hasSource(img) {
+	if (img.hasAttribute("src") || img.hasAttribute("srcset")) return true;
+	const parent = img.parentElement;
+	return parent?.localName === "picture" && parent.querySelector("source") !== null;
+}
+/**
+* Whether `complete` on this image describes a request. It is also true for one that omits both `src` and `srcset`,
+* whatever a parent `<picture>` is fetching on its behalf, so only an image sourced from its own attributes can be
+* read.
+*/
+function hasOwnSource(img) {
+	return !!img.getAttribute("src") || img.hasAttribute("srcset");
+}
+/**
+* `<media-poster>` — sets `src` on a poster image it does not own.
+*
+* The image is a child, as in `<picture>`, but sourcing runs the other way around: `<picture>` treats the `src` on its
+* `<img>` as the fallback, while here an image with no source of its own is the one this element fills in. Give the
+* child a `src`, a `srcset`, or `<source>` candidates and it is yours, left alone.
+*
+* Renders no image of its own, so include one: `<media-poster><img alt=""></media-poster>`. Inside a skin, an `<img
+* slot="poster">` of yours replaces the one the skin carries.
+*/
+var PosterElement = class extends UIElement {
 	static {
 		this.tagName = "media-poster";
 	}
+	#core = new PosterCore();
+	#children = new MutationObserver(() => this.requestUpdate());
+	#playback = new PlayerController(this, playerContext, selectPlayback);
+	#metadata = new PlayerController(this, playerContext, selectMetadata);
+	#image = null;
+	/** Whether `#image` had no source of its own when it became active. */
+	#owned = false;
+	#imageLoadState = "pending";
+	#imageEvents = null;
+	#disconnect = null;
+	#warnedMissingImage = false;
+	connectedCallback() {
+		super.connectedCallback();
+		if (this.destroyed) return;
+		this.#disconnect = new AbortController();
+		const { signal } = this.#disconnect;
+		this.addEventListener("slotchange", () => this.requestUpdate(), { signal });
+		this.#children.observe(this, {
+			childList: true,
+			subtree: true
+		});
+		if (!this.#playback.value) logMissingFeature(this.localName, this.#playback.displayName ?? "playback");
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.#adopt(null);
+		this.#children.disconnect();
+		this.#disconnect?.abort();
+		this.#disconnect = null;
+	}
+	get #loadState() {
+		if (!this.#image || !hasSource(this.#image)) return "none";
+		return this.#imageLoadState === "pending" ? "loading" : this.#imageLoadState;
+	}
+	update(changed) {
+		super.update(changed);
+		const playback = this.#playback.value;
+		if (!playback) return;
+		this.#core.setMedia({
+			started: playback.started,
+			poster: this.#metadata.value?.poster ?? ""
+		});
+		const { src } = this.#core.getState();
+		this.#adopt(findImage(this));
+		this.#applySource(src);
+		this.#core.setImageLoadState(this.#loadState);
+		applyStateDataAttrs(this, this.#core.getState(), PosterDataAttrs);
+	}
+	/**
+	* Ownership is settled once, when an image becomes active: after the first fill the `src` we set would itself look
+	* authored. Re-slot an image with a source to hand it back, the way React decides a field is controlled at mount.
+	*/
+	#adopt(next) {
+		if (next === this.#image) return;
+		if (this.#owned) this.#image?.removeAttribute("src");
+		this.#imageEvents?.abort();
+		this.#imageEvents = null;
+		this.#image = next;
+		this.#owned = next !== null && !hasSource(next);
+		this.#imageLoadState = "pending";
+		if (!next) return;
+		if (next.naturalWidth > 0) this.#imageLoadState = "loaded";
+		else if (next.complete && hasOwnSource(next)) this.#imageLoadState = "error";
+		this.#imageEvents = new AbortController();
+		const { signal } = this.#imageEvents;
+		const settle = (loadState) => () => {
+			this.#imageLoadState = loadState;
+			this.requestUpdate();
+		};
+		next.addEventListener("load", settle("loaded"), { signal });
+		next.addEventListener("error", settle("error"), { signal });
+	}
+	#applySource(src) {
+		const img = this.#image;
+		if (!img) {
+			if (src && !this.#warnedMissingImage) {
+				this.#warnedMissingImage = true;
+				console.warn(`<${this.localName}> resolved a poster but has no image to put it in. Add one as a child: <${this.localName}><img alt=""></${this.localName}>`);
+			}
+			return;
+		}
+		if (!this.#owned) return;
+		if (!src) {
+			this.#imageLoadState = "pending";
+			img.removeAttribute("src");
+		} else if (img.getAttribute("src") !== src) {
+			this.#imageLoadState = "pending";
+			img.setAttribute("src", src);
+		}
+	}
 };
-
 //#endregion
 export { PosterElement };
+
 //# sourceMappingURL=poster-element.js.map

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

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