@videojs/html 10.0.0-beta.2 → 10.0.0-beta.22

package/dist/default/ui/hotkey/aria-key-shortcuts-controller.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"aria-key-shortcuts-controller.js","names":["#action","#container"],"sources":["../../../../src/ui/hotkey/aria-key-shortcuts-controller.ts"],"sourcesContent":["import { findHotkeyCoordinator } from '@videojs/core/dom';\nimport type { ReactiveController } from '@videojs/element';\nimport { ContextConsumer } from '@videojs/element/context';\n\nimport type { ContainerContextConsumer } from '../../player/context';\nimport { containerContext } from '../../player/context';\nimport type { PlayerControllerHost } from '../../player/player-controller';\n\n/** Provides `aria-keyshortcuts` for a given hotkey action name. */\nexport class AriaKeyShortcutsController implements ReactiveController {\n  #action: string;\n  #container: ContainerContextConsumer;\n\n  constructor(host: PlayerControllerHost, action: string) {\n    this.#action = action;\n    this.#container = new ContextConsumer(host, { context: containerContext, subscribe: true });\n    host.addController(this);\n  }\n\n  get value(): string | undefined {\n    const container = this.#container.value?.container;\n    if (!container) return undefined;\n    return findHotkeyCoordinator(container)?.getAriaKeys(this.#action);\n  }\n\n  hostConnected(): void {}\n  hostDisconnected(): void {}\n}\n"],"mappings":";;;;;AASA,IAAa,6BAAb,MAAsE;CACpE;CACA;CAEA,YAAY,MAA4B,QAAgB;AACtD,QAAA,SAAe;AACf,QAAA,YAAkB,IAAI,gBAAgB,MAAM;GAAE,SAAS;GAAkB,WAAW;GAAM,CAAC;AAC3F,OAAK,cAAc,KAAK;;CAG1B,IAAI,QAA4B;EAC9B,MAAM,YAAY,MAAA,UAAgB,OAAO;AACzC,MAAI,CAAC,UAAW,QAAO,KAAA;AACvB,SAAO,sBAAsB,UAAU,EAAE,YAAY,MAAA,OAAa;;CAGpE,gBAAsB;CACtB,mBAAyB"}

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

@@ -0,0 +1,81 @@
+import { containerContext, playerContext } from "../../player/context.js";
+import { MediaElement } from "../media-element.js";
+import { PlayerController } from "../../player/player-controller.js";
+import { createHotkey, isHotkeyToggleAction, resolveHotkeyAction } from "@videojs/core/dom";
+import { ContextConsumer } from "@videojs/element/context";
+//#region src/ui/hotkey/hotkey-element.ts
+var HotkeyElement = class extends MediaElement {
+	constructor(..._args) {
+		super(..._args);
+		this.keys = "";
+		this.action = "";
+		this.value = void 0;
+		this.disabled = false;
+		this.target = "player";
+	}
+	static {
+		this.tagName = "media-hotkey";
+	}
+	static {
+		this.properties = {
+			keys: { type: String },
+			action: { type: String },
+			value: { type: Number },
+			disabled: { type: Boolean },
+			target: { type: String }
+		};
+	}
+	#player = new PlayerController(this, playerContext);
+	#container = new ContextConsumer(this, {
+		context: containerContext,
+		callback: () => this.requestUpdate(),
+		subscribe: true
+	});
+	#cleanup = null;
+	connectedCallback() {
+		super.connectedCallback();
+		this.style.display = "none";
+		this.#register();
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.#unregister();
+	}
+	update(changed) {
+		super.update(changed);
+		if (this.isConnected) {
+			this.#unregister();
+			this.#register();
+		}
+	}
+	#register() {
+		const store = this.#player.value;
+		const container = this.#container.value?.container;
+		if (!this.keys || !this.action || !store || !container) return;
+		const resolver = resolveHotkeyAction(this.action);
+		if (!resolver) return;
+		const { value, action } = this;
+		this.#cleanup = createHotkey(container, {
+			keys: this.keys,
+			action,
+			target: this.target,
+			disabled: this.disabled,
+			repeatable: !isHotkeyToggleAction(action),
+			onActivate: (_event, key) => {
+				resolver({
+					store,
+					key,
+					value
+				});
+			}
+		});
+	}
+	#unregister() {
+		this.#cleanup?.();
+		this.#cleanup = null;
+	}
+};
+//#endregion
+export { HotkeyElement };
+
+//# sourceMappingURL=hotkey-element.js.map

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

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

package/dist/default/ui/media-button-element.js

@@ -1,6 +1,6 @@
 import { MediaElement } from "./media-element.js";
+import { AriaKeyShortcutsController } from "./hotkey/aria-key-shortcuts-controller.js";
 import { applyElementProps, applyStateDataAttrs, createButton } from "@videojs/core/dom";
-
 //#region src/ui/media-button-element.ts
 /** Abstract base for HTML custom elements that render a media-control button. */
 var MediaButtonElement = class extends MediaElement {
@@ -8,6 +8,7 @@ var MediaButtonElement = class extends MediaElement {
 		super(..._args);
 		this.disabled = false;
 		this.label = "";
+		this.hotkeyAction = void 0;
 	}
 	static {
 		this.properties = {
@@ -15,9 +16,15 @@ var MediaButtonElement = class extends MediaElement {
 			disabled: { type: Boolean }
 		};
 	}
+	get $state() {
+		return this.core.state;
+	}
 	#disconnect = null;
+	#hotkeyRegistry = null;
 	connectedCallback() {
 		super.connectedCallback();
+		if (this.destroyed) return;
+		if (this.hotkeyAction && !this.#hotkeyRegistry) this.#hotkeyRegistry = new AriaKeyShortcutsController(this, this.hotkeyAction);
 		this.#disconnect = new AbortController();
 		const buttonProps = createButton({
 			onActivate: () => this.activate(this.mediaState.value),
@@ -30,6 +37,10 @@ var MediaButtonElement = class extends MediaElement {
 		this.#disconnect?.abort();
 		this.#disconnect = null;
 	}
+	/** Returns the button's current label derived from media state. */
+	getLabel() {
+		return this.core.state.current.label || void 0;
+	}
 	willUpdate(changed) {
 		super.willUpdate(changed);
 		this.core.setProps?.(this);
@@ -40,11 +51,14 @@ var MediaButtonElement = class extends MediaElement {
 		if (!media) return;
 		this.core.setMedia(media);
 		const state = this.core.getState();
-		applyElementProps(this, this.core.getAttrs?.(state) ?? {});
+		applyElementProps(this, {
+			...this.core.getAttrs?.(state),
+			"aria-keyshortcuts": this.#hotkeyRegistry?.value
+		});
 		applyStateDataAttrs(this, state, this.stateAttrMap);
 	}
 };
-
 //#endregion
 export { MediaButtonElement };
+
 //# sourceMappingURL=media-button-element.js.map

package/dist/default/ui/media-button-element.js.map

@@ -1 +1 @@
-{"version":3,"file":"media-button-element.js","names":["#disconnect"],"sources":["../../../src/ui/media-button-element.ts"],"sourcesContent":["import type { InferComponentState, InferMediaState, MediaUIComponent, StateAttrMap } from '@videojs/core';\nimport { applyElementProps, applyStateDataAttrs, createButton, logMissingFeature } from '@videojs/core/dom';\nimport type { PropertyDeclarationMap, PropertyValues } from '@videojs/element';\n\nimport type { PlayerController } from '../player/player-controller';\nimport { MediaElement } from './media-element';\n\n/** Abstract base for HTML custom elements that render a media-control button. */\nexport abstract class MediaButtonElement<Core extends MediaUIComponent> extends MediaElement {\n  static override properties: PropertyDeclarationMap = {\n    label: { type: String },\n    disabled: { type: Boolean },\n  };\n\n  disabled = false;\n  label = '';\n\n  protected abstract readonly core: Core;\n  protected abstract readonly stateAttrMap: StateAttrMap<InferComponentState<Core>>;\n  protected abstract readonly mediaState: PlayerController<any, InferMediaState<Core> | undefined>;\n\n  protected abstract activate(state: InferMediaState<Core>): void;\n\n  #disconnect: AbortController | null = null;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n\n    this.#disconnect = new AbortController();\n\n    const buttonProps = createButton({\n      onActivate: () => this.activate(this.mediaState.value!),\n      isDisabled: () => this.disabled || !this.mediaState.value,\n    });\n\n    applyElementProps(this, buttonProps, { signal: this.#disconnect.signal });\n\n    if (__DEV__ && !this.mediaState.value && this.mediaState.displayName) {\n      logMissingFeature(this.localName, this.mediaState.displayName);\n    }\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.#disconnect?.abort();\n    this.#disconnect = null;\n  }\n\n  protected override willUpdate(changed: PropertyValues): void {\n    super.willUpdate(changed);\n    this.core.setProps?.(this);\n  }\n\n  protected override update(changed: PropertyValues): void {\n    super.update(changed);\n\n    const media = this.mediaState.value;\n\n    if (!media) return;\n\n    this.core.setMedia(media);\n    const state = this.core.getState();\n    applyElementProps(this, this.core.getAttrs?.(state) ?? {});\n    applyStateDataAttrs(this, state, this.stateAttrMap);\n  }\n}\n"],"mappings":";;;;;AAQA,IAAsB,qBAAtB,cAAgF,aAAa;;;kBAMhF;eACH;;;oBAN6C;GACnD,OAAO,EAAE,MAAM,QAAQ;GACvB,UAAU,EAAE,MAAM,SAAS;GAC5B;;CAWD,cAAsC;CAEtC,AAAS,oBAA0B;AACjC,QAAM,mBAAmB;AAEzB,QAAKA,aAAc,IAAI,iBAAiB;EAExC,MAAM,cAAc,aAAa;GAC/B,kBAAkB,KAAK,SAAS,KAAK,WAAW,MAAO;GACvD,kBAAkB,KAAK,YAAY,CAAC,KAAK,WAAW;GACrD,CAAC;AAEF,oBAAkB,MAAM,aAAa,EAAE,QAAQ,MAAKA,WAAY,QAAQ,CAAC;;CAO3E,AAAS,uBAA6B;AACpC,QAAM,sBAAsB;AAC5B,QAAKA,YAAa,OAAO;AACzB,QAAKA,aAAc;;CAGrB,AAAmB,WAAW,SAA+B;AAC3D,QAAM,WAAW,QAAQ;AACzB,OAAK,KAAK,WAAW,KAAK;;CAG5B,AAAmB,OAAO,SAA+B;AACvD,QAAM,OAAO,QAAQ;EAErB,MAAM,QAAQ,KAAK,WAAW;AAE9B,MAAI,CAAC,MAAO;AAEZ,OAAK,KAAK,SAAS,MAAM;EACzB,MAAM,QAAQ,KAAK,KAAK,UAAU;AAClC,oBAAkB,MAAM,KAAK,KAAK,WAAW,MAAM,IAAI,EAAE,CAAC;AAC1D,sBAAoB,MAAM,OAAO,KAAK,aAAa"}
+{"version":3,"file":"media-button-element.js","names":["#hotkeyRegistry","#disconnect"],"sources":["../../../src/ui/media-button-element.ts"],"sourcesContent":["import type {\n  ButtonState,\n  InferComponentState,\n  InferMediaState,\n  MediaButtonComponent,\n  StateAttrMap,\n} from '@videojs/core';\nimport { applyElementProps, applyStateDataAttrs, createButton, logMissingFeature } from '@videojs/core/dom';\nimport type { PropertyDeclarationMap, PropertyValues } from '@videojs/element';\nimport type { State } from '@videojs/store';\n\nimport type { PlayerController } from '../player/player-controller';\nimport { AriaKeyShortcutsController } from './hotkey/aria-key-shortcuts-controller';\nimport { MediaElement } from './media-element';\n\n/** Abstract base for HTML custom elements that render a media-control button. */\nexport abstract class MediaButtonElement<Core extends MediaButtonComponent> extends MediaElement {\n  static override properties: PropertyDeclarationMap = {\n    label: { type: String },\n    disabled: { type: Boolean },\n  };\n\n  disabled = false;\n  label = '';\n\n  protected abstract readonly core: Core;\n  protected abstract readonly stateAttrMap: StateAttrMap<InferComponentState<Core>>;\n  protected abstract readonly mediaState: PlayerController<any, InferMediaState<Core> | undefined>;\n\n  protected abstract activate(state: InferMediaState<Core>): void;\n\n  /** Override to set the hotkey action name for `aria-keyshortcuts`. */\n  protected readonly hotkeyAction: string | undefined = undefined;\n\n  get $state(): State<ButtonState> {\n    return this.core.state;\n  }\n\n  #disconnect: AbortController | null = null;\n  #hotkeyRegistry: AriaKeyShortcutsController | null = null;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    if (this.destroyed) return;\n\n    if (this.hotkeyAction && !this.#hotkeyRegistry) {\n      this.#hotkeyRegistry = new AriaKeyShortcutsController(this, this.hotkeyAction);\n    }\n\n    this.#disconnect = new AbortController();\n\n    const buttonProps = createButton({\n      onActivate: () => this.activate(this.mediaState.value!),\n      isDisabled: () => this.disabled || !this.mediaState.value,\n    });\n\n    applyElementProps(this, buttonProps, { signal: this.#disconnect.signal });\n\n    if (__DEV__ && !this.mediaState.value && this.mediaState.displayName) {\n      logMissingFeature(this.localName, this.mediaState.displayName);\n    }\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.#disconnect?.abort();\n    this.#disconnect = null;\n  }\n\n  /** Returns the button's current label derived from media state. */\n  getLabel(): string | undefined {\n    return this.core.state.current.label || undefined;\n  }\n\n  protected override willUpdate(changed: PropertyValues): void {\n    super.willUpdate(changed);\n    this.core.setProps?.(this);\n  }\n\n  protected override update(changed: PropertyValues): void {\n    super.update(changed);\n\n    const media = this.mediaState.value;\n\n    if (!media) return;\n\n    this.core.setMedia(media);\n    const state = this.core.getState();\n    applyElementProps(this, {\n      ...this.core.getAttrs?.(state),\n      'aria-keyshortcuts': this.#hotkeyRegistry?.value,\n    });\n    applyStateDataAttrs(this, state, this.stateAttrMap);\n  }\n}\n"],"mappings":";;;;;AAgBA,IAAsB,qBAAtB,cAAoF,aAAa;;;kBAMpF;eACH;sBAS8C,KAAA;;;oBAfD;GACnD,OAAO,EAAE,MAAM,QAAQ;GACvB,UAAU,EAAE,MAAM,SAAS;GAC5B;;CAcD,IAAI,SAA6B;AAC/B,SAAO,KAAK,KAAK;;CAGnB,cAAsC;CACtC,kBAAqD;CAErD,oBAAmC;AACjC,QAAM,mBAAmB;AACzB,MAAI,KAAK,UAAW;AAEpB,MAAI,KAAK,gBAAgB,CAAC,MAAA,eACxB,OAAA,iBAAuB,IAAI,2BAA2B,MAAM,KAAK,aAAa;AAGhF,QAAA,aAAmB,IAAI,iBAAiB;EAExC,MAAM,cAAc,aAAa;GAC/B,kBAAkB,KAAK,SAAS,KAAK,WAAW,MAAO;GACvD,kBAAkB,KAAK,YAAY,CAAC,KAAK,WAAW;GACrD,CAAC;AAEF,oBAAkB,MAAM,aAAa,EAAE,QAAQ,MAAA,WAAiB,QAAQ,CAAC;;CAO3E,uBAAsC;AACpC,QAAM,sBAAsB;AAC5B,QAAA,YAAkB,OAAO;AACzB,QAAA,aAAmB;;;CAIrB,WAA+B;AAC7B,SAAO,KAAK,KAAK,MAAM,QAAQ,SAAS,KAAA;;CAG1C,WAA8B,SAA+B;AAC3D,QAAM,WAAW,QAAQ;AACzB,OAAK,KAAK,WAAW,KAAK;;CAG5B,OAA0B,SAA+B;AACvD,QAAM,OAAO,QAAQ;EAErB,MAAM,QAAQ,KAAK,WAAW;AAE9B,MAAI,CAAC,MAAO;AAEZ,OAAK,KAAK,SAAS,MAAM;EACzB,MAAM,QAAQ,KAAK,KAAK,UAAU;AAClC,oBAAkB,MAAM;GACtB,GAAG,KAAK,KAAK,WAAW,MAAM;GAC9B,qBAAqB,MAAA,gBAAsB;GAC5C,CAAC;AACF,sBAAoB,MAAM,OAAO,KAAK,aAAa"}

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

@@ -1,9 +1,8 @@
 import { DestroyMixin, ReactiveElement } from "@videojs/element";
-
 //#region src/ui/media-element.ts
 /** Base class for interactive media UI elements. */
 var MediaElement = class extends DestroyMixin(ReactiveElement) {};
-
 //#endregion
 export { MediaElement };
+
 //# sourceMappingURL=media-element.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"media-element.js","names":[],"sources":["../../../src/ui/media-element.ts"],"sourcesContent":["import { DestroyMixin, ReactiveElement } from '@videojs/element';\nimport type { Constructor } from '@videojs/utils/types';\n\n/** Base class for interactive media UI elements. */\nexport class MediaElement extends DestroyMixin(ReactiveElement) {}\n\nexport interface MediaElementConstructor extends Constructor<MediaElement> {}\n"],"mappings":";;;;AAIA,IAAa,eAAb,cAAkC,aAAa,gBAAgB,CAAC"}
+{"version":3,"file":"media-element.js","names":[],"sources":["../../../src/ui/media-element.ts"],"sourcesContent":["import { DestroyMixin, ReactiveElement } from '@videojs/element';\nimport type { Constructor } from '@videojs/utils/types';\n\n/** Base class for interactive media UI elements. */\nexport class MediaElement extends DestroyMixin(ReactiveElement) {}\n\nexport interface MediaElementConstructor extends Constructor<MediaElement> {}\n"],"mappings":";;;AAIA,IAAa,eAAb,cAAkC,aAAa,gBAAgB,CAAC"}

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

@@ -1,6 +1,5 @@
 import { MediaElement } from "./media-element.js";
 import { applyStateDataAttrs } from "@videojs/core/dom";
-
 //#region src/ui/media-ui-element.ts
 /** Abstract base for HTML custom elements that display media state with data attributes. */
 var MediaUIElement = class extends MediaElement {
@@ -16,7 +15,7 @@ var MediaUIElement = class extends MediaElement {
 		applyStateDataAttrs(this, state, this.stateAttrMap);
 	}
 };
-
 //#endregion
 export { MediaUIElement };
+
 //# sourceMappingURL=media-ui-element.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"media-ui-element.js","names":[],"sources":["../../../src/ui/media-ui-element.ts"],"sourcesContent":["import type { InferComponentState, InferMediaState, MediaUIComponent, StateAttrMap } from '@videojs/core';\nimport { applyStateDataAttrs, logMissingFeature } from '@videojs/core/dom';\nimport type { PropertyValues } from '@videojs/element';\n\nimport type { PlayerController } from '../player/player-controller';\nimport { MediaElement } from './media-element';\n\n/** Abstract base for HTML custom elements that display media state with data attributes. */\nexport abstract class MediaUIElement<Core extends MediaUIComponent> extends MediaElement {\n  protected abstract readonly core: Core;\n  protected abstract readonly stateAttrMap: StateAttrMap<InferComponentState<Core>>;\n  protected abstract readonly mediaState: PlayerController<any, InferMediaState<Core> | undefined>;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n\n    if (__DEV__ && !this.mediaState.value && this.mediaState.displayName) {\n      logMissingFeature(this.localName, this.mediaState.displayName);\n    }\n  }\n\n  protected override update(changed: PropertyValues): void {\n    super.update(changed);\n\n    const media = this.mediaState.value;\n\n    if (!media) return;\n\n    this.core.setMedia(media);\n    const state = this.core.getState();\n    applyStateDataAttrs(this, state, this.stateAttrMap);\n  }\n}\n"],"mappings":";;;;;AAQA,IAAsB,iBAAtB,cAA4E,aAAa;CAKvF,AAAS,oBAA0B;AACjC,QAAM,mBAAmB;;CAO3B,AAAmB,OAAO,SAA+B;AACvD,QAAM,OAAO,QAAQ;EAErB,MAAM,QAAQ,KAAK,WAAW;AAE9B,MAAI,CAAC,MAAO;AAEZ,OAAK,KAAK,SAAS,MAAM;EACzB,MAAM,QAAQ,KAAK,KAAK,UAAU;AAClC,sBAAoB,MAAM,OAAO,KAAK,aAAa"}
+{"version":3,"file":"media-ui-element.js","names":[],"sources":["../../../src/ui/media-ui-element.ts"],"sourcesContent":["import type { InferComponentState, InferMediaState, MediaUIComponent, StateAttrMap } from '@videojs/core';\nimport { applyStateDataAttrs, logMissingFeature } from '@videojs/core/dom';\nimport type { PropertyValues } from '@videojs/element';\n\nimport type { PlayerController } from '../player/player-controller';\nimport { MediaElement } from './media-element';\n\n/** Abstract base for HTML custom elements that display media state with data attributes. */\nexport abstract class MediaUIElement<Core extends MediaUIComponent> extends MediaElement {\n  protected abstract readonly core: Core;\n  protected abstract readonly stateAttrMap: StateAttrMap<InferComponentState<Core>>;\n  protected abstract readonly mediaState: PlayerController<any, InferMediaState<Core> | undefined>;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n\n    if (__DEV__ && !this.mediaState.value && this.mediaState.displayName) {\n      logMissingFeature(this.localName, this.mediaState.displayName);\n    }\n  }\n\n  protected override update(changed: PropertyValues): void {\n    super.update(changed);\n\n    const media = this.mediaState.value;\n\n    if (!media) return;\n\n    this.core.setMedia(media);\n    const state = this.core.getState();\n    applyStateDataAttrs(this, state, this.stateAttrMap);\n  }\n}\n"],"mappings":";;;;AAQA,IAAsB,iBAAtB,cAA4E,aAAa;CAKvF,oBAAmC;AACjC,QAAM,mBAAmB;;CAO3B,OAA0B,SAA+B;AACvD,QAAM,OAAO,QAAQ;EAErB,MAAM,QAAQ,KAAK,WAAW;AAE9B,MAAI,CAAC,MAAO;AAEZ,OAAK,KAAK,SAAS,MAAM;EACzB,MAAM,QAAQ,KAAK,KAAK,UAAU;AAClC,sBAAoB,MAAM,OAAO,KAAK,aAAa"}

package/dist/default/ui/mute-button/mute-button-element.js

@@ -3,7 +3,6 @@ import { PlayerController } from "../../player/player-controller.js";
 import { MediaButtonElement } from "../media-button-element.js";
 import { selectVolume } from "@videojs/core/dom";
 import { MuteButtonCore, MuteButtonDataAttrs } from "@videojs/core";
-
 //#region src/ui/mute-button/mute-button-element.ts
 var MuteButtonElement = class extends MediaButtonElement {
 	constructor(..._args) {
@@ -11,6 +10,7 @@ var MuteButtonElement = class extends MediaButtonElement {
 		this.core = new MuteButtonCore();
 		this.stateAttrMap = MuteButtonDataAttrs;
 		this.mediaState = new PlayerController(this, playerContext, selectVolume);
+		this.hotkeyAction = "toggleMuted";
 	}
 	static {
 		this.tagName = "media-mute-button";
@@ -19,7 +19,7 @@ var MuteButtonElement = class extends MediaButtonElement {
 		this.core.toggle(state);
 	}
 };
-
 //#endregion
 export { MuteButtonElement };
+
 //# sourceMappingURL=mute-button-element.js.map

package/dist/default/ui/mute-button/mute-button-element.js.map

@@ -1 +1 @@
-{"version":3,"file":"mute-button-element.js","names":[],"sources":["../../../../src/ui/mute-button/mute-button-element.ts"],"sourcesContent":["import { type MediaVolumeState, MuteButtonCore, MuteButtonDataAttrs } from '@videojs/core';\nimport { selectVolume } from '@videojs/core/dom';\n\nimport { playerContext } from '../../player/context';\nimport { PlayerController } from '../../player/player-controller';\nimport { MediaButtonElement } from '../media-button-element';\n\nexport class MuteButtonElement extends MediaButtonElement<MuteButtonCore> {\n  static readonly tagName = 'media-mute-button';\n\n  protected readonly core = new MuteButtonCore();\n  protected readonly stateAttrMap = MuteButtonDataAttrs;\n  protected readonly mediaState = new PlayerController(this, playerContext, selectVolume);\n\n  protected activate(state: MediaVolumeState): void {\n    this.core.toggle(state);\n  }\n}\n"],"mappings":";;;;;;;AAOA,IAAa,oBAAb,cAAuC,mBAAmC;;;cAG9C,IAAI,gBAAgB;sBACZ;oBACF,IAAI,iBAAiB,MAAM,eAAe,aAAa;;;iBAJ7D;;CAM1B,AAAU,SAAS,OAA+B;AAChD,OAAK,KAAK,OAAO,MAAM"}
+{"version":3,"file":"mute-button-element.js","names":[],"sources":["../../../../src/ui/mute-button/mute-button-element.ts"],"sourcesContent":["import { type MediaVolumeState, MuteButtonCore, MuteButtonDataAttrs } from '@videojs/core';\nimport { selectVolume } from '@videojs/core/dom';\n\nimport { playerContext } from '../../player/context';\nimport { PlayerController } from '../../player/player-controller';\nimport { MediaButtonElement } from '../media-button-element';\n\nexport class MuteButtonElement extends MediaButtonElement<MuteButtonCore> {\n  static readonly tagName = 'media-mute-button';\n\n  protected readonly core = new MuteButtonCore();\n  protected readonly stateAttrMap = MuteButtonDataAttrs;\n  protected readonly mediaState = new PlayerController(this, playerContext, selectVolume);\n  protected override readonly hotkeyAction = 'toggleMuted';\n\n  protected activate(state: MediaVolumeState): void {\n    this.core.toggle(state);\n  }\n}\n"],"mappings":";;;;;;AAOA,IAAa,oBAAb,cAAuC,mBAAmC;;;cAG9C,IAAI,gBAAgB;sBACZ;oBACF,IAAI,iBAAiB,MAAM,eAAe,aAAa;sBAC5C;;;iBALjB;;CAO1B,SAAmB,OAA+B;AAChD,OAAK,KAAK,OAAO,MAAM"}

package/dist/default/ui/pip-button/pip-button-element.js

@@ -3,7 +3,6 @@ import { PlayerController } from "../../player/player-controller.js";
 import { MediaButtonElement } from "../media-button-element.js";
 import { selectPiP } from "@videojs/core/dom";
 import { PiPButtonCore, PiPButtonDataAttrs } from "@videojs/core";
-
 //#region src/ui/pip-button/pip-button-element.ts
 var PiPButtonElement = class extends MediaButtonElement {
 	constructor(..._args) {
@@ -11,6 +10,7 @@ var PiPButtonElement = class extends MediaButtonElement {
 		this.core = new PiPButtonCore();
 		this.stateAttrMap = PiPButtonDataAttrs;
 		this.mediaState = new PlayerController(this, playerContext, selectPiP);
+		this.hotkeyAction = "togglePictureInPicture";
 	}
 	static {
 		this.tagName = "media-pip-button";
@@ -19,7 +19,7 @@ var PiPButtonElement = class extends MediaButtonElement {
 		this.core.toggle(state);
 	}
 };
-
 //#endregion
 export { PiPButtonElement };
+
 //# sourceMappingURL=pip-button-element.js.map

package/dist/default/ui/pip-button/pip-button-element.js.map

@@ -1 +1 @@
-{"version":3,"file":"pip-button-element.js","names":[],"sources":["../../../../src/ui/pip-button/pip-button-element.ts"],"sourcesContent":["import { type MediaPictureInPictureState, PiPButtonCore, PiPButtonDataAttrs } from '@videojs/core';\nimport { selectPiP } from '@videojs/core/dom';\n\nimport { playerContext } from '../../player/context';\nimport { PlayerController } from '../../player/player-controller';\nimport { MediaButtonElement } from '../media-button-element';\n\nexport class PiPButtonElement extends MediaButtonElement<PiPButtonCore> {\n  static readonly tagName = 'media-pip-button';\n\n  protected readonly core = new PiPButtonCore();\n  protected readonly stateAttrMap = PiPButtonDataAttrs;\n  protected readonly mediaState = new PlayerController(this, playerContext, selectPiP);\n\n  protected activate(state: MediaPictureInPictureState): void {\n    this.core.toggle(state);\n  }\n}\n"],"mappings":";;;;;;;AAOA,IAAa,mBAAb,cAAsC,mBAAkC;;;cAG5C,IAAI,eAAe;sBACX;oBACF,IAAI,iBAAiB,MAAM,eAAe,UAAU;;;iBAJ1D;;CAM1B,AAAU,SAAS,OAAyC;AAC1D,OAAK,KAAK,OAAO,MAAM"}
+{"version":3,"file":"pip-button-element.js","names":[],"sources":["../../../../src/ui/pip-button/pip-button-element.ts"],"sourcesContent":["import { type MediaPictureInPictureState, PiPButtonCore, PiPButtonDataAttrs } from '@videojs/core';\nimport { selectPiP } from '@videojs/core/dom';\n\nimport { playerContext } from '../../player/context';\nimport { PlayerController } from '../../player/player-controller';\nimport { MediaButtonElement } from '../media-button-element';\n\nexport class PiPButtonElement extends MediaButtonElement<PiPButtonCore> {\n  static readonly tagName = 'media-pip-button';\n\n  protected readonly core = new PiPButtonCore();\n  protected readonly stateAttrMap = PiPButtonDataAttrs;\n  protected readonly mediaState = new PlayerController(this, playerContext, selectPiP);\n  protected override readonly hotkeyAction = 'togglePictureInPicture';\n\n  protected activate(state: MediaPictureInPictureState): void {\n    this.core.toggle(state);\n  }\n}\n"],"mappings":";;;;;;AAOA,IAAa,mBAAb,cAAsC,mBAAkC;;;cAG5C,IAAI,eAAe;sBACX;oBACF,IAAI,iBAAiB,MAAM,eAAe,UAAU;sBACzC;;;iBALjB;;CAO1B,SAAmB,OAAyC;AAC1D,OAAK,KAAK,OAAO,MAAM"}

package/dist/default/ui/play-button/play-button-element.js

@@ -3,7 +3,6 @@ import { PlayerController } from "../../player/player-controller.js";
 import { MediaButtonElement } from "../media-button-element.js";
 import { selectPlayback } from "@videojs/core/dom";
 import { PlayButtonCore, PlayButtonDataAttrs } from "@videojs/core";
-
 //#region src/ui/play-button/play-button-element.ts
 var PlayButtonElement = class extends MediaButtonElement {
 	constructor(..._args) {
@@ -11,6 +10,7 @@ var PlayButtonElement = class extends MediaButtonElement {
 		this.core = new PlayButtonCore();
 		this.stateAttrMap = PlayButtonDataAttrs;
 		this.mediaState = new PlayerController(this, playerContext, selectPlayback);
+		this.hotkeyAction = "togglePaused";
 	}
 	static {
 		this.tagName = "media-play-button";
@@ -19,7 +19,7 @@ var PlayButtonElement = class extends MediaButtonElement {
 		this.core.toggle(state);
 	}
 };
-
 //#endregion
 export { PlayButtonElement };
+
 //# sourceMappingURL=play-button-element.js.map

package/dist/default/ui/play-button/play-button-element.js.map

@@ -1 +1 @@
-{"version":3,"file":"play-button-element.js","names":[],"sources":["../../../../src/ui/play-button/play-button-element.ts"],"sourcesContent":["import { type MediaPlaybackState, PlayButtonCore, PlayButtonDataAttrs } from '@videojs/core';\nimport { selectPlayback } from '@videojs/core/dom';\n\nimport { playerContext } from '../../player/context';\nimport { PlayerController } from '../../player/player-controller';\nimport { MediaButtonElement } from '../media-button-element';\n\nexport class PlayButtonElement extends MediaButtonElement<PlayButtonCore> {\n  static readonly tagName = 'media-play-button';\n\n  protected readonly core = new PlayButtonCore();\n  protected readonly stateAttrMap = PlayButtonDataAttrs;\n  protected readonly mediaState = new PlayerController(this, playerContext, selectPlayback);\n\n  protected activate(state: MediaPlaybackState): void {\n    this.core.toggle(state);\n  }\n}\n"],"mappings":";;;;;;;AAOA,IAAa,oBAAb,cAAuC,mBAAmC;;;cAG9C,IAAI,gBAAgB;sBACZ;oBACF,IAAI,iBAAiB,MAAM,eAAe,eAAe;;;iBAJ/D;;CAM1B,AAAU,SAAS,OAAiC;AAClD,OAAK,KAAK,OAAO,MAAM"}
+{"version":3,"file":"play-button-element.js","names":[],"sources":["../../../../src/ui/play-button/play-button-element.ts"],"sourcesContent":["import { type MediaPlaybackState, PlayButtonCore, PlayButtonDataAttrs } from '@videojs/core';\nimport { selectPlayback } from '@videojs/core/dom';\n\nimport { playerContext } from '../../player/context';\nimport { PlayerController } from '../../player/player-controller';\nimport { MediaButtonElement } from '../media-button-element';\n\nexport class PlayButtonElement extends MediaButtonElement<PlayButtonCore> {\n  static readonly tagName = 'media-play-button';\n\n  protected readonly core = new PlayButtonCore();\n  protected readonly stateAttrMap = PlayButtonDataAttrs;\n  protected readonly mediaState = new PlayerController(this, playerContext, selectPlayback);\n  protected override readonly hotkeyAction = 'togglePaused';\n\n  protected activate(state: MediaPlaybackState): void {\n    this.core.toggle(state);\n  }\n}\n"],"mappings":";;;;;;AAOA,IAAa,oBAAb,cAAuC,mBAAmC;;;cAG9C,IAAI,gBAAgB;sBACZ;oBACF,IAAI,iBAAiB,MAAM,eAAe,eAAe;sBAC9C;;;iBALjB;;CAO1B,SAAmB,OAAiC;AAClD,OAAK,KAAK,OAAO,MAAM"}

package/dist/default/ui/playback-rate-button/playback-rate-button-element.js

@@ -3,7 +3,6 @@ import { PlayerController } from "../../player/player-controller.js";
 import { MediaButtonElement } from "../media-button-element.js";
 import { selectPlaybackRate } from "@videojs/core/dom";
 import { PlaybackRateButtonCore, PlaybackRateButtonDataAttrs } from "@videojs/core";
-
 //#region src/ui/playback-rate-button/playback-rate-button-element.ts
 var PlaybackRateButtonElement = class extends MediaButtonElement {
 	constructor(..._args) {
@@ -19,7 +18,7 @@ var PlaybackRateButtonElement = class extends MediaButtonElement {
 		this.core.cycle(state);
 	}
 };
-
 //#endregion
 export { PlaybackRateButtonElement };
+
 //# sourceMappingURL=playback-rate-button-element.js.map

package/dist/default/ui/playback-rate-button/playback-rate-button-element.js.map

@@ -1 +1 @@
-{"version":3,"file":"playback-rate-button-element.js","names":[],"sources":["../../../../src/ui/playback-rate-button/playback-rate-button-element.ts"],"sourcesContent":["import { type MediaPlaybackRateState, PlaybackRateButtonCore, PlaybackRateButtonDataAttrs } from '@videojs/core';\nimport { selectPlaybackRate } from '@videojs/core/dom';\n\nimport { playerContext } from '../../player/context';\nimport { PlayerController } from '../../player/player-controller';\nimport { MediaButtonElement } from '../media-button-element';\n\nexport class PlaybackRateButtonElement extends MediaButtonElement<PlaybackRateButtonCore> {\n  static readonly tagName = 'media-playback-rate-button';\n\n  protected readonly core = new PlaybackRateButtonCore();\n  protected readonly stateAttrMap = PlaybackRateButtonDataAttrs;\n  protected readonly mediaState = new PlayerController(this, playerContext, selectPlaybackRate);\n\n  protected activate(state: MediaPlaybackRateState): void {\n    this.core.cycle(state);\n  }\n}\n"],"mappings":";;;;;;;AAOA,IAAa,4BAAb,cAA+C,mBAA2C;;;cAG9D,IAAI,wBAAwB;sBACpB;oBACF,IAAI,iBAAiB,MAAM,eAAe,mBAAmB;;;iBAJnE;;CAM1B,AAAU,SAAS,OAAqC;AACtD,OAAK,KAAK,MAAM,MAAM"}
+{"version":3,"file":"playback-rate-button-element.js","names":[],"sources":["../../../../src/ui/playback-rate-button/playback-rate-button-element.ts"],"sourcesContent":["import { type MediaPlaybackRateState, PlaybackRateButtonCore, PlaybackRateButtonDataAttrs } from '@videojs/core';\nimport { selectPlaybackRate } from '@videojs/core/dom';\n\nimport { playerContext } from '../../player/context';\nimport { PlayerController } from '../../player/player-controller';\nimport { MediaButtonElement } from '../media-button-element';\n\nexport class PlaybackRateButtonElement extends MediaButtonElement<PlaybackRateButtonCore> {\n  static readonly tagName = 'media-playback-rate-button';\n\n  protected readonly core = new PlaybackRateButtonCore();\n  protected readonly stateAttrMap = PlaybackRateButtonDataAttrs;\n  protected readonly mediaState = new PlayerController(this, playerContext, selectPlaybackRate);\n\n  protected activate(state: MediaPlaybackRateState): void {\n    this.core.cycle(state);\n  }\n}\n"],"mappings":";;;;;;AAOA,IAAa,4BAAb,cAA+C,mBAA2C;;;cAG9D,IAAI,wBAAwB;sBACpB;oBACF,IAAI,iBAAiB,MAAM,eAAe,mBAAmB;;;iBAJnE;;CAM1B,SAAmB,OAAqC;AACtD,OAAK,KAAK,MAAM,MAAM"}

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

@@ -1,9 +1,9 @@
 import { MediaElement } from "../media-element.js";
-import { applyElementProps, applyStateDataAttrs, createPopover, createTransition, getAnchorNameStyle, getAnchorPositionStyle, resolveOffsets } from "@videojs/core/dom";
+import { PositionController } from "../position-controller.js";
+import { applyElementProps, applyStateDataAttrs, createPopover, createTransition, getAnchorNameStyle, getAnchorPositionStyle, getPopupPositionRect, resolveOffsets } from "@videojs/core/dom";
+import { applyStyles, supportsAnchorPositioning, 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 {
 	constructor(..._args) {
@@ -52,6 +52,7 @@ var PopoverElement = class extends MediaElement {
 		};
 	}
 	#core = new PopoverCore();
+	#position = new PositionController(this);
 	#popover = null;
 	#snapshot = null;
 	#disconnect = null;
@@ -107,7 +108,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);
@@ -120,7 +121,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.#position.cleanup();
+			return;
+		}
 		const posOpts = {
 			side: state.side,
 			align: state.align
@@ -128,18 +132,16 @@ 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));
 		}
-	}
-	#findTrigger() {
-		if (!this.id) return null;
-		return this.getRootNode().querySelector(`[commandfor="${this.id}"]`);
+		this.#position.sync(this.#currentTrigger);
 	}
 	#syncTrigger(triggerEl) {
 		if (triggerEl === this.#currentTrigger) return;
+		this.#position.cleanup();
 		this.#cleanupTrigger();
 		this.#currentTrigger = triggerEl;
 		this.#popover?.setTriggerElement(triggerEl);
@@ -162,7 +164,7 @@ var PopoverElement = class extends MediaElement {
 		this.#currentTrigger = null;
 	}
 };
-
 //#endregion
 export { PopoverElement };
+
 //# sourceMappingURL=popover-element.js.map

package/dist/default/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","#position","#disconnect","#popover","#snapshot","#cleanupTrigger","#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  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';\nimport { PositionController } from '../position-controller';\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  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    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.#position.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.#position.cleanup();\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.#position.sync(this.#currentTrigger);\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      // 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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"}

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

@@ -0,0 +1,76 @@
+import { supportsAnchorPositioning } from "@videojs/utils/dom";
+//#region src/ui/position-controller.ts
+/**
+* Reactive controller that manages JS-fallback positioning for floating
+* popup elements (tooltips, popovers). Tracks scroll, resize, and
+* ResizeObserver events to keep the popup aligned with its trigger.
+*
+* When native CSS Anchor Positioning is supported, `sync()` is a no-op.
+*/
+var PositionController = class {
+	#host;
+	#abort = null;
+	#frame = 0;
+	#resizeObserver = null;
+	#trigger = null;
+	constructor(host) {
+		this.#host = host;
+		host.addController(this);
+	}
+	/** Discover a trigger element linked via `commandfor` attribute. */
+	findTrigger() {
+		if (!this.#host.id) return null;
+		return this.#host.getRootNode().querySelector(`[commandfor="${this.#host.id}"]`);
+	}
+	/** Start or update position tracking for the given trigger. */
+	sync(trigger) {
+		if (supportsAnchorPositioning()) return;
+		if (!trigger) return;
+		if (this.#abort && this.#trigger === trigger) return;
+		this.cleanup();
+		this.#abort = new AbortController();
+		this.#trigger = trigger;
+		const { signal } = this.#abort;
+		const reposition = () => {
+			cancelAnimationFrame(this.#frame);
+			this.#frame = requestAnimationFrame(() => {
+				if (signal.aborted) return;
+				this.#host.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(trigger);
+			this.#resizeObserver.observe(this.#host);
+		}
+		reposition();
+	}
+	/** Stop all position tracking. */
+	cleanup() {
+		this.#abort?.abort();
+		this.#abort = null;
+		this.#trigger = null;
+		cancelAnimationFrame(this.#frame);
+		this.#frame = 0;
+		this.#resizeObserver?.disconnect();
+		this.#resizeObserver = null;
+	}
+	hostDisconnected() {
+		this.cleanup();
+	}
+	hostDestroyed() {
+		this.cleanup();
+	}
+};
+//#endregion
+export { PositionController };
+
+//# sourceMappingURL=position-controller.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"position-controller.js","names":["#host","#abort","#trigger","#frame","#resizeObserver"],"sources":["../../../src/ui/position-controller.ts"],"sourcesContent":["import type { ReactiveController, ReactiveControllerHost } from '@videojs/element';\nimport { supportsAnchorPositioning } from '@videojs/utils/dom';\n\nexport type PositionControllerHost = ReactiveControllerHost & HTMLElement;\n\n/**\n * Reactive controller that manages JS-fallback positioning for floating\n * popup elements (tooltips, popovers). Tracks scroll, resize, and\n * ResizeObserver events to keep the popup aligned with its trigger.\n *\n * When native CSS Anchor Positioning is supported, `sync()` is a no-op.\n */\nexport class PositionController implements ReactiveController {\n  readonly #host: PositionControllerHost;\n\n  #abort: AbortController | null = null;\n  #frame = 0;\n  #resizeObserver: ResizeObserver | null = null;\n  #trigger: HTMLElement | null = null;\n\n  constructor(host: PositionControllerHost) {\n    this.#host = host;\n    host.addController(this);\n  }\n\n  /** Discover a trigger element linked via `commandfor` attribute. */\n  findTrigger(): HTMLElement | null {\n    if (!this.#host.id) return null;\n    const root = this.#host.getRootNode() as Document | ShadowRoot;\n    return root.querySelector<HTMLElement>(`[commandfor=\"${this.#host.id}\"]`);\n  }\n\n  /** Start or update position tracking for the given trigger. */\n  sync(trigger: HTMLElement | null): void {\n    if (supportsAnchorPositioning()) return;\n    if (!trigger) return;\n    if (this.#abort && this.#trigger === trigger) return;\n\n    this.cleanup();\n    this.#abort = new AbortController();\n    this.#trigger = trigger;\n    const { signal } = this.#abort;\n\n    const reposition = () => {\n      cancelAnimationFrame(this.#frame);\n      this.#frame = requestAnimationFrame(() => {\n        if (signal.aborted) return;\n        this.#host.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(trigger);\n      this.#resizeObserver.observe(this.#host);\n    }\n\n    reposition();\n  }\n\n  /** Stop all position tracking. */\n  cleanup(): void {\n    this.#abort?.abort();\n    this.#abort = null;\n    this.#trigger = null;\n    cancelAnimationFrame(this.#frame);\n    this.#frame = 0;\n    this.#resizeObserver?.disconnect();\n    this.#resizeObserver = null;\n  }\n\n  hostDisconnected(): void {\n    this.cleanup();\n  }\n\n  hostDestroyed(): void {\n    this.cleanup();\n  }\n}\n"],"mappings":";;;;;;;;;AAYA,IAAa,qBAAb,MAA8D;CAC5D;CAEA,SAAiC;CACjC,SAAS;CACT,kBAAyC;CACzC,WAA+B;CAE/B,YAAY,MAA8B;AACxC,QAAA,OAAa;AACb,OAAK,cAAc,KAAK;;;CAI1B,cAAkC;AAChC,MAAI,CAAC,MAAA,KAAW,GAAI,QAAO;AAE3B,SADa,MAAA,KAAW,aAAa,CACzB,cAA2B,gBAAgB,MAAA,KAAW,GAAG,IAAI;;;CAI3E,KAAK,SAAmC;AACtC,MAAI,2BAA2B,CAAE;AACjC,MAAI,CAAC,QAAS;AACd,MAAI,MAAA,SAAe,MAAA,YAAkB,QAAS;AAE9C,OAAK,SAAS;AACd,QAAA,QAAc,IAAI,iBAAiB;AACnC,QAAA,UAAgB;EAChB,MAAM,EAAE,WAAW,MAAA;EAEnB,MAAM,mBAAmB;AACvB,wBAAqB,MAAA,MAAY;AACjC,SAAA,QAAc,4BAA4B;AACxC,QAAI,OAAO,QAAS;AACpB,UAAA,KAAW,eAAe;KAC1B;;AAGJ,SAAO,iBAAiB,UAAU,YAAY;GAAE,SAAS;GAAM,SAAS;GAAM;GAAQ,CAAC;AACvF,SAAO,iBAAiB,UAAU,YAAY,EAAE,QAAQ,CAAC;AAEzD,MAAI,OAAO,mBAAmB,YAAY;AACxC,SAAA,iBAAuB,IAAI,qBAAqB;AAC9C,gBAAY;KACZ;AACF,SAAA,eAAqB,QAAQ,QAAQ;AACrC,SAAA,eAAqB,QAAQ,MAAA,KAAW;;AAG1C,cAAY;;;CAId,UAAgB;AACd,QAAA,OAAa,OAAO;AACpB,QAAA,QAAc;AACd,QAAA,UAAgB;AAChB,uBAAqB,MAAA,MAAY;AACjC,QAAA,QAAc;AACd,QAAA,gBAAsB,YAAY;AAClC,QAAA,iBAAuB;;CAGzB,mBAAyB;AACvB,OAAK,SAAS;;CAGhB,gBAAsB;AACpB,OAAK,SAAS"}

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

@@ -3,7 +3,6 @@ import { PlayerController } from "../../player/player-controller.js";
 import { MediaUIElement } from "../media-ui-element.js";
 import { selectPlayback } from "@videojs/core/dom";
 import { PosterCore, PosterDataAttrs } from "@videojs/core";
-
 //#region src/ui/poster/poster-element.ts
 var PosterElement = class extends MediaUIElement {
 	constructor(..._args) {
@@ -16,7 +15,7 @@ var PosterElement = class extends MediaUIElement {
 		this.tagName = "media-poster";
 	}
 };
-
 //#endregion
 export { PosterElement };
+
 //# sourceMappingURL=poster-element.js.map

package/dist/default/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":[],"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"}

package/dist/default/ui/seek-button/seek-button-element.js

@@ -3,7 +3,6 @@ import { PlayerController } from "../../player/player-controller.js";
 import { MediaButtonElement } from "../media-button-element.js";
 import { selectTime } from "@videojs/core/dom";
 import { SeekButtonCore, SeekButtonDataAttrs } from "@videojs/core";
-
 //#region src/ui/seek-button/seek-button-element.ts
 var SeekButtonElement = class extends MediaButtonElement {
 	constructor(..._args) {
@@ -26,7 +25,7 @@ var SeekButtonElement = class extends MediaButtonElement {
 		this.core.seek(state);
 	}
 };
-
 //#endregion
 export { SeekButtonElement };
+
 //# sourceMappingURL=seek-button-element.js.map

package/dist/default/ui/seek-button/seek-button-element.js.map

@@ -1 +1 @@
-{"version":3,"file":"seek-button-element.js","names":[],"sources":["../../../../src/ui/seek-button/seek-button-element.ts"],"sourcesContent":["import { type MediaTimeState, SeekButtonCore, SeekButtonDataAttrs } from '@videojs/core';\nimport { selectTime } from '@videojs/core/dom';\nimport type { PropertyDeclarationMap } from '@videojs/element';\n\nimport { playerContext } from '../../player/context';\nimport { PlayerController } from '../../player/player-controller';\nimport { MediaButtonElement } from '../media-button-element';\n\nexport class SeekButtonElement extends MediaButtonElement<SeekButtonCore> {\n  static readonly tagName = 'media-seek-button';\n\n  static override properties: PropertyDeclarationMap = {\n    ...MediaButtonElement.properties,\n    seconds: { type: Number },\n  };\n\n  seconds = SeekButtonCore.defaultProps.seconds;\n\n  protected readonly core = new SeekButtonCore();\n  protected readonly stateAttrMap = SeekButtonDataAttrs;\n  protected readonly mediaState = new PlayerController(this, playerContext, selectTime);\n\n  protected activate(state: MediaTimeState): void {\n    this.core.seek(state);\n  }\n}\n"],"mappings":";;;;;;;AAQA,IAAa,oBAAb,cAAuC,mBAAmC;;;iBAQ9D,eAAe,aAAa;cAEZ,IAAI,gBAAgB;sBACZ;oBACF,IAAI,iBAAiB,MAAM,eAAe,WAAW;;;iBAX3D;;;oBAE2B;GACnD,GAAG,mBAAmB;GACtB,SAAS,EAAE,MAAM,QAAQ;GAC1B;;CAQD,AAAU,SAAS,OAA6B;AAC9C,OAAK,KAAK,KAAK,MAAM"}
+{"version":3,"file":"seek-button-element.js","names":[],"sources":["../../../../src/ui/seek-button/seek-button-element.ts"],"sourcesContent":["import { type MediaTimeState, SeekButtonCore, SeekButtonDataAttrs } from '@videojs/core';\nimport { selectTime } from '@videojs/core/dom';\nimport type { PropertyDeclarationMap } from '@videojs/element';\n\nimport { playerContext } from '../../player/context';\nimport { PlayerController } from '../../player/player-controller';\nimport { MediaButtonElement } from '../media-button-element';\n\nexport class SeekButtonElement extends MediaButtonElement<SeekButtonCore> {\n  static readonly tagName = 'media-seek-button';\n\n  static override properties: PropertyDeclarationMap = {\n    ...MediaButtonElement.properties,\n    seconds: { type: Number },\n  };\n\n  seconds = SeekButtonCore.defaultProps.seconds;\n\n  protected readonly core = new SeekButtonCore();\n  protected readonly stateAttrMap = SeekButtonDataAttrs;\n  protected readonly mediaState = new PlayerController(this, playerContext, selectTime);\n\n  protected activate(state: MediaTimeState): void {\n    this.core.seek(state);\n  }\n}\n"],"mappings":";;;;;;AAQA,IAAa,oBAAb,cAAuC,mBAAmC;;;iBAQ9D,eAAe,aAAa;cAEZ,IAAI,gBAAgB;sBACZ;oBACF,IAAI,iBAAiB,MAAM,eAAe,WAAW;;;iBAX3D;;;oBAE2B;GACnD,GAAG,mBAAmB;GACtB,SAAS,EAAE,MAAM,QAAQ;GAC1B;;CAQD,SAAmB,OAA6B;AAC9C,OAAK,KAAK,KAAK,MAAM"}