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

package/dist/dev/ui/error-dialog/error-dialog-element.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"error-dialog-element.d.ts","names":[],"sources":["../../../../src/ui/error-dialog/error-dialog-element.ts"],"mappings":";;;;cAsBa,kBAAA,SAA2B,YAAA;EAAA;kBACtB,OAAA;;EAkBP,iBAAA,CAAA;EAsBA,oBAAA,CAAA;EAAA,UAMU,UAAA,CAAW,QAAA,EAAU,cAAA;EAAA,UA0BrB,MAAA,CAAO,QAAA,EAAU,cAAA;AAAA"}

package/dist/dev/ui/error-dialog/error-dialog-element.js

@@ -0,0 +1,77 @@
+import { playerContext } from "../../player/context.js";
+import { MediaElement } from "../media-element.js";
+import { PlayerController } from "../../player/player-controller.js";
+import { alertDialogContext } from "../alert-dialog/context.js";
+import { applyElementProps, applyStateDataAttrs, createAlertDialog, createTransition, selectError } from "@videojs/core/dom";
+import { ContextProvider } from "@videojs/element/context";
+import { SnapshotController } from "@videojs/store/html";
+import { AlertDialogDataAttrs, ErrorDialogCore } from "@videojs/core";
+//#region src/ui/error-dialog/error-dialog-element.ts
+const FALLBACK_MESSAGE = "An error occurred. Please try again.";
+let idCounter = 0;
+var ErrorDialogElement = class extends MediaElement {
+	static {
+		this.tagName = "media-error-dialog";
+	}
+	#core = new ErrorDialogCore();
+	#provider = new ContextProvider(this, { context: alertDialogContext });
+	#titleId = `vjs-error-dialog-title-${idCounter++}`;
+	#descriptionId = `vjs-error-dialog-desc-${idCounter++}`;
+	#errorState = new PlayerController(this, playerContext, selectError);
+	#dialog = null;
+	#snapshot = null;
+	#lastErrorMessage = null;
+	constructor() {
+		super();
+		this.#core.setTitleId(this.#titleId);
+		this.#core.setDescriptionId(this.#descriptionId);
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		if (this.destroyed) return;
+		this.#dialog = createAlertDialog({
+			transition: createTransition(),
+			onOpenChange: (nextOpen) => {
+				if (!nextOpen) this.#errorState.value?.dismissError();
+			}
+		});
+		this.#dialog.setElement(this);
+		if (this.#snapshot) this.#snapshot.track(this.#dialog.input);
+		else this.#snapshot = new SnapshotController(this, this.#dialog.input);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.#dialog?.destroy();
+		this.#dialog = null;
+	}
+	willUpdate(_changed) {
+		super.willUpdate(_changed);
+		if (!this.#dialog) return;
+		const errorState = this.#errorState.value;
+		const hasError = Boolean(errorState?.error);
+		const { active: isOpen } = this.#dialog.input.current;
+		if (errorState?.error) this.#lastErrorMessage = errorState.error.message?.trim() || null;
+		const desc = this.querySelector("media-alert-dialog-description");
+		if (desc) desc.textContent = this.#lastErrorMessage ?? FALLBACK_MESSAGE;
+		if (hasError && !isOpen) this.#dialog.open();
+		else if (!hasError && isOpen) this.#dialog.close();
+	}
+	update(_changed) {
+		super.update(_changed);
+		if (!this.#dialog) return;
+		const input = this.#dialog.input.current;
+		this.#core.setInput(input);
+		const state = this.#core.getState();
+		applyElementProps(this, this.#core.getAttrs(state));
+		applyStateDataAttrs(this, state, AlertDialogDataAttrs);
+		this.#provider.setValue({
+			state,
+			stateAttrMap: AlertDialogDataAttrs,
+			close: () => this.#dialog?.close()
+		});
+	}
+};
+//#endregion
+export { ErrorDialogElement };
+
+//# sourceMappingURL=error-dialog-element.js.map

package/dist/dev/ui/error-dialog/error-dialog-element.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"error-dialog-element.js","names":["#core","#provider","#titleId","#descriptionId","#errorState","#dialog","#snapshot","#lastErrorMessage"],"sources":["../../../../src/ui/error-dialog/error-dialog-element.ts"],"sourcesContent":["import { AlertDialogDataAttrs, type AlertDialogInput, ErrorDialogCore } from '@videojs/core';\nimport {\n  type AlertDialogApi,\n  applyElementProps,\n  applyStateDataAttrs,\n  createAlertDialog,\n  createTransition,\n  selectError,\n} from '@videojs/core/dom';\nimport type { PropertyValues } from '@videojs/element';\nimport { ContextProvider } from '@videojs/element/context';\nimport { SnapshotController } from '@videojs/store/html';\n\nimport { playerContext } from '../../player/context';\nimport { PlayerController } from '../../player/player-controller';\nimport { alertDialogContext } from '../alert-dialog/context';\nimport { MediaElement } from '../media-element';\n\nconst FALLBACK_MESSAGE = 'An error occurred. Please try again.';\n\nlet idCounter = 0;\n\nexport class ErrorDialogElement extends MediaElement {\n  static readonly tagName = 'media-error-dialog';\n\n  readonly #core = new ErrorDialogCore();\n  readonly #provider = new ContextProvider(this, { context: alertDialogContext });\n  readonly #titleId = `vjs-error-dialog-title-${idCounter++}`;\n  readonly #descriptionId = `vjs-error-dialog-desc-${idCounter++}`;\n  readonly #errorState = new PlayerController(this, playerContext, selectError);\n\n  #dialog: AlertDialogApi | null = null;\n  #snapshot: SnapshotController<AlertDialogInput> | null = null;\n  #lastErrorMessage: string | null = null;\n\n  constructor() {\n    super();\n    this.#core.setTitleId(this.#titleId);\n    this.#core.setDescriptionId(this.#descriptionId);\n  }\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    if (this.destroyed) return;\n\n    this.#dialog = createAlertDialog({\n      transition: createTransition(),\n      onOpenChange: (nextOpen: boolean) => {\n        if (!nextOpen) {\n          this.#errorState.value?.dismissError();\n        }\n      },\n    });\n\n    this.#dialog.setElement(this);\n\n    if (this.#snapshot) {\n      this.#snapshot.track(this.#dialog.input);\n    } else {\n      this.#snapshot = new SnapshotController(this, this.#dialog.input);\n    }\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.#dialog?.destroy();\n    this.#dialog = null;\n  }\n\n  protected override willUpdate(_changed: PropertyValues): void {\n    super.willUpdate(_changed);\n    if (!this.#dialog) return;\n\n    const errorState = this.#errorState.value;\n    const hasError = Boolean(errorState?.error);\n    const { active: isOpen } = this.#dialog.input.current;\n\n    if (errorState?.error) {\n      const message = errorState.error.message?.trim();\n      this.#lastErrorMessage = message || null;\n    }\n\n    // Set description text before opening so content is ready for the transition.\n    const desc = this.querySelector('media-alert-dialog-description');\n    if (desc) {\n      desc.textContent = this.#lastErrorMessage ?? FALLBACK_MESSAGE;\n    }\n\n    if (hasError && !isOpen) {\n      this.#dialog.open();\n    } else if (!hasError && isOpen) {\n      this.#dialog.close();\n    }\n  }\n\n  protected override update(_changed: PropertyValues): void {\n    super.update(_changed);\n    if (!this.#dialog) return;\n\n    const input = this.#dialog.input.current;\n    this.#core.setInput(input);\n    const state = this.#core.getState();\n\n    applyElementProps(this, this.#core.getAttrs(state));\n    applyStateDataAttrs(this, state, AlertDialogDataAttrs);\n\n    this.#provider.setValue({\n      state,\n      stateAttrMap: AlertDialogDataAttrs,\n      close: () => this.#dialog?.close(),\n    });\n  }\n}\n"],"mappings":";;;;;;;;;AAkBA,MAAM,mBAAmB;AAEzB,IAAI,YAAY;AAEhB,IAAa,qBAAb,cAAwC,aAAa;;iBACzB;;CAE1B,QAAiB,IAAI,iBAAiB;CACtC,YAAqB,IAAI,gBAAgB,MAAM,EAAE,SAAS,oBAAoB,CAAC;CAC/E,WAAoB,0BAA0B;CAC9C,iBAA0B,yBAAyB;CACnD,cAAuB,IAAI,iBAAiB,MAAM,eAAe,YAAY;CAE7E,UAAiC;CACjC,YAAyD;CACzD,oBAAmC;CAEnC,cAAc;AACZ,SAAO;AACP,QAAA,KAAW,WAAW,MAAA,QAAc;AACpC,QAAA,KAAW,iBAAiB,MAAA,cAAoB;;CAGlD,oBAAmC;AACjC,QAAM,mBAAmB;AACzB,MAAI,KAAK,UAAW;AAEpB,QAAA,SAAe,kBAAkB;GAC/B,YAAY,kBAAkB;GAC9B,eAAe,aAAsB;AACnC,QAAI,CAAC,SACH,OAAA,WAAiB,OAAO,cAAc;;GAG3C,CAAC;AAEF,QAAA,OAAa,WAAW,KAAK;AAE7B,MAAI,MAAA,SACF,OAAA,SAAe,MAAM,MAAA,OAAa,MAAM;MAExC,OAAA,WAAiB,IAAI,mBAAmB,MAAM,MAAA,OAAa,MAAM;;CAIrE,uBAAsC;AACpC,QAAM,sBAAsB;AAC5B,QAAA,QAAc,SAAS;AACvB,QAAA,SAAe;;CAGjB,WAA8B,UAAgC;AAC5D,QAAM,WAAW,SAAS;AAC1B,MAAI,CAAC,MAAA,OAAc;EAEnB,MAAM,aAAa,MAAA,WAAiB;EACpC,MAAM,WAAW,QAAQ,YAAY,MAAM;EAC3C,MAAM,EAAE,QAAQ,WAAW,MAAA,OAAa,MAAM;AAE9C,MAAI,YAAY,MAEd,OAAA,mBADgB,WAAW,MAAM,SAAS,MAAM,IACZ;EAItC,MAAM,OAAO,KAAK,cAAc,iCAAiC;AACjE,MAAI,KACF,MAAK,cAAc,MAAA,oBAA0B;AAG/C,MAAI,YAAY,CAAC,OACf,OAAA,OAAa,MAAM;WACV,CAAC,YAAY,OACtB,OAAA,OAAa,OAAO;;CAIxB,OAA0B,UAAgC;AACxD,QAAM,OAAO,SAAS;AACtB,MAAI,CAAC,MAAA,OAAc;EAEnB,MAAM,QAAQ,MAAA,OAAa,MAAM;AACjC,QAAA,KAAW,SAAS,MAAM;EAC1B,MAAM,QAAQ,MAAA,KAAW,UAAU;AAEnC,oBAAkB,MAAM,MAAA,KAAW,SAAS,MAAM,CAAC;AACnD,sBAAoB,MAAM,OAAO,qBAAqB;AAEtD,QAAA,SAAe,SAAS;GACtB;GACA,cAAc;GACd,aAAa,MAAA,QAAc,OAAO;GACnC,CAAC"}

package/dist/dev/ui/fullscreen-button/fullscreen-button-element.d.ts

@@ -12,6 +12,7 @@ declare class FullscreenButtonElement extends MediaButtonElement<FullscreenButto
     readonly availability: "data-availability";
   };
   protected readonly mediaState: PlayerController<_videojs_core_dom0.AnyPlayerStore, MediaFullscreenState | undefined>;
+  protected readonly hotkeyAction = "toggleFullscreen";
   protected activate(state: MediaFullscreenState): void;
 }
 //#endregion

package/dist/dev/ui/fullscreen-button/fullscreen-button-element.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"fullscreen-button-element.d.ts","names":[],"sources":["../../../../src/ui/fullscreen-button/fullscreen-button-element.ts"],"mappings":";;;;;;cAOa,uBAAA,SAAgC,kBAAA,CAAmB,oBAAA;EAAA,gBAC9C,OAAA;EAAA,mBAEG,IAAA,EAAI,oBAAA;EAAA,mBACJ,YAAA;IAAA;;;qBACA,UAAA,EAAU,gBAAA,CAFN,kBAAA,CAEM,cAAA,EAAA,oBAAA;EAAA,UAEnB,QAAA,CAAS,KAAA,EAAO,oBAAA;AAAA"}
+{"version":3,"file":"fullscreen-button-element.d.ts","names":[],"sources":["../../../../src/ui/fullscreen-button/fullscreen-button-element.ts"],"mappings":";;;;;;cAOa,uBAAA,SAAgC,kBAAA,CAAmB,oBAAA;EAAA,gBAC9C,OAAA;EAAA,mBAEG,IAAA,EAAI,oBAAA;EAAA,mBACJ,YAAA;IAAA;;;qBACA,UAAA,EAAU,gBAAA,CAFN,kBAAA,CAEM,cAAA,EAAA,oBAAA;EAAA,mBACD,YAAA;EAAA,UAElB,QAAA,CAAS,KAAA,EAAO,oBAAA;AAAA"}

package/dist/dev/ui/fullscreen-button/fullscreen-button-element.js

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

package/dist/dev/ui/fullscreen-button/fullscreen-button-element.js.map

@@ -1 +1 @@
-{"version":3,"file":"fullscreen-button-element.js","names":[],"sources":["../../../../src/ui/fullscreen-button/fullscreen-button-element.ts"],"sourcesContent":["import { FullscreenButtonCore, FullscreenButtonDataAttrs, type MediaFullscreenState } from '@videojs/core';\nimport { selectFullscreen } 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 FullscreenButtonElement extends MediaButtonElement<FullscreenButtonCore> {\n  static readonly tagName = 'media-fullscreen-button';\n\n  protected readonly core = new FullscreenButtonCore();\n  protected readonly stateAttrMap = FullscreenButtonDataAttrs;\n  protected readonly mediaState = new PlayerController(this, playerContext, selectFullscreen);\n\n  protected activate(state: MediaFullscreenState): void {\n    this.core.toggle(state);\n  }\n}\n"],"mappings":";;;;;;;AAOA,IAAa,0BAAb,cAA6C,mBAAyC;;;cAG1D,IAAI,sBAAsB;sBAClB;oBACF,IAAI,iBAAiB,MAAM,eAAe,iBAAiB;;;iBAJjE;;CAM1B,AAAU,SAAS,OAAmC;AACpD,OAAK,KAAK,OAAO,MAAM"}
+{"version":3,"file":"fullscreen-button-element.js","names":[],"sources":["../../../../src/ui/fullscreen-button/fullscreen-button-element.ts"],"sourcesContent":["import { FullscreenButtonCore, FullscreenButtonDataAttrs, type MediaFullscreenState } from '@videojs/core';\nimport { selectFullscreen } 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 FullscreenButtonElement extends MediaButtonElement<FullscreenButtonCore> {\n  static readonly tagName = 'media-fullscreen-button';\n\n  protected readonly core = new FullscreenButtonCore();\n  protected readonly stateAttrMap = FullscreenButtonDataAttrs;\n  protected readonly mediaState = new PlayerController(this, playerContext, selectFullscreen);\n  protected override readonly hotkeyAction = 'toggleFullscreen';\n\n  protected activate(state: MediaFullscreenState): void {\n    this.core.toggle(state);\n  }\n}\n"],"mappings":";;;;;;AAOA,IAAa,0BAAb,cAA6C,mBAAyC;;;cAG1D,IAAI,sBAAsB;sBAClB;oBACF,IAAI,iBAAiB,MAAM,eAAe,iBAAiB;sBAChD;;;iBALjB;;CAO1B,SAAmB,OAAmC;AACpD,OAAK,KAAK,OAAO,MAAM"}

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

@@ -0,0 +1,22 @@
+import { MediaElement } from "../media-element.js";
+import { GestureActionName, GesturePointerType, GestureRegion } from "@videojs/core/dom";
+import { PropertyDeclarationMap, PropertyValues } from "@videojs/element";
+
+//#region src/ui/gesture/gesture-element.d.ts
+declare class GestureElement extends MediaElement {
+  #private;
+  static readonly tagName = "media-gesture";
+  static properties: PropertyDeclarationMap;
+  type: 'tap' | 'doubletap' | (string & {});
+  action: GestureActionName | (string & {});
+  value: number | undefined;
+  pointer: GesturePointerType | undefined;
+  region: GestureRegion | undefined;
+  disabled: boolean;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+  protected update(changed: PropertyValues): void;
+}
+//#endregion
+export { GestureElement };
+//# sourceMappingURL=gesture-element.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"gesture-element.d.ts","names":[],"sources":["../../../../src/ui/gesture/gesture-element.ts"],"mappings":";;;;;cAea,cAAA,SAAuB,YAAA;EAAA;kBAClB,OAAA;EAAA,OAEA,UAAA,EAAY,sBAAA;EAS5B,IAAA;EACA,MAAA,EAAQ,iBAAA;EACR,KAAA;EACA,OAAA,EAAS,kBAAA;EACT,MAAA,EAAQ,aAAA;EACR,QAAA;EAUS,iBAAA,CAAA;EAMA,oBAAA,CAAA;EAAA,UAKU,MAAA,CAAO,OAAA,EAAS,cAAA;AAAA"}

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

@@ -0,0 +1,84 @@
+import { containerContext, playerContext } from "../../player/context.js";
+import { MediaElement } from "../media-element.js";
+import { PlayerController } from "../../player/player-controller.js";
+import { createDoubleTapGesture, createTapGesture, resolveGestureAction } from "@videojs/core/dom";
+import { ContextConsumer } from "@videojs/element/context";
+//#region src/ui/gesture/gesture-element.ts
+var GestureElement = class extends MediaElement {
+	constructor(..._args) {
+		super(..._args);
+		this.type = "";
+		this.action = "";
+		this.value = void 0;
+		this.pointer = void 0;
+		this.region = void 0;
+		this.disabled = false;
+	}
+	static {
+		this.tagName = "media-gesture";
+	}
+	static {
+		this.properties = {
+			type: { type: String },
+			action: { type: String },
+			value: { type: Number },
+			pointer: { type: String },
+			region: { type: String },
+			disabled: { type: Boolean }
+		};
+	}
+	#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.type || !this.action || !store || !container) return;
+		const resolver = resolveGestureAction(this.action);
+		if (!resolver) return;
+		const { value } = this;
+		const onActivate = (event) => {
+			resolver({
+				store,
+				value,
+				event
+			});
+		};
+		const options = {
+			pointer: this.pointer,
+			region: this.region,
+			disabled: this.disabled,
+			action: this.action
+		};
+		if (this.type === "doubletap") this.#cleanup = createDoubleTapGesture(container, onActivate, options);
+		else this.#cleanup = createTapGesture(container, onActivate, options);
+	}
+	#unregister() {
+		this.#cleanup?.();
+		this.#cleanup = null;
+	}
+};
+//#endregion
+export { GestureElement };
+
+//# sourceMappingURL=gesture-element.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"gesture-element.js","names":["#player","#container","#register","#unregister","#cleanup"],"sources":["../../../../src/ui/gesture/gesture-element.ts"],"sourcesContent":["import {\n  createDoubleTapGesture,\n  createTapGesture,\n  type GestureActionName,\n  type GesturePointerType,\n  type GestureRegion,\n  resolveGestureAction,\n} from '@videojs/core/dom';\nimport type { PropertyDeclarationMap, PropertyValues } from '@videojs/element';\nimport { ContextConsumer } from '@videojs/element/context';\n\nimport { containerContext, playerContext } from '../../player/context';\nimport { PlayerController } from '../../player/player-controller';\nimport { MediaElement } from '../media-element';\n\nexport class GestureElement extends MediaElement {\n  static readonly tagName = 'media-gesture';\n\n  static override properties: PropertyDeclarationMap = {\n    type: { type: String },\n    action: { type: String },\n    value: { type: Number },\n    pointer: { type: String },\n    region: { type: String },\n    disabled: { type: Boolean },\n  };\n\n  type: 'tap' | 'doubletap' | (string & {}) = '';\n  action: GestureActionName | (string & {}) = '';\n  value: number | undefined = undefined;\n  pointer: GesturePointerType | undefined = undefined;\n  region: GestureRegion | undefined = undefined;\n  disabled = false;\n\n  readonly #player = new PlayerController(this, playerContext);\n  readonly #container = new ContextConsumer(this, {\n    context: containerContext,\n    callback: () => this.requestUpdate(),\n    subscribe: true,\n  });\n  #cleanup: (() => void) | null = null;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this.style.display = 'none';\n    this.#register();\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.#unregister();\n  }\n\n  protected override update(changed: PropertyValues): void {\n    super.update(changed);\n\n    // Re-register when attributes change.\n    if (this.isConnected) {\n      this.#unregister();\n      this.#register();\n    }\n  }\n\n  #register(): void {\n    const store = this.#player.value;\n    const container = this.#container.value?.container;\n    if (!this.type || !this.action || !store || !container) return;\n\n    const resolver = resolveGestureAction(this.action);\n    if (!resolver) return;\n\n    const { value } = this;\n\n    const onActivate = (event: PointerEvent) => {\n      resolver({ store, value, event });\n    };\n\n    const options = {\n      pointer: this.pointer,\n      region: this.region,\n      disabled: this.disabled,\n      action: this.action,\n    };\n\n    if (this.type === 'doubletap') {\n      this.#cleanup = createDoubleTapGesture(container, onActivate, options);\n    } else {\n      this.#cleanup = createTapGesture(container, onActivate, options);\n    }\n  }\n\n  #unregister(): void {\n    this.#cleanup?.();\n    this.#cleanup = null;\n  }\n}\n"],"mappings":";;;;;;AAeA,IAAa,iBAAb,cAAoC,aAAa;;;cAYH;gBACA;eAChB,KAAA;iBACc,KAAA;gBACN,KAAA;kBACzB;;;iBAhBe;;;oBAE2B;GACnD,MAAM,EAAE,MAAM,QAAQ;GACtB,QAAQ,EAAE,MAAM,QAAQ;GACxB,OAAO,EAAE,MAAM,QAAQ;GACvB,SAAS,EAAE,MAAM,QAAQ;GACzB,QAAQ,EAAE,MAAM,QAAQ;GACxB,UAAU,EAAE,MAAM,SAAS;GAC5B;;CASD,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,qBAAqB,KAAK,OAAO;AAClD,MAAI,CAAC,SAAU;EAEf,MAAM,EAAE,UAAU;EAElB,MAAM,cAAc,UAAwB;AAC1C,YAAS;IAAE;IAAO;IAAO;IAAO,CAAC;;EAGnC,MAAM,UAAU;GACd,SAAS,KAAK;GACd,QAAQ,KAAK;GACb,UAAU,KAAK;GACf,QAAQ,KAAK;GACd;AAED,MAAI,KAAK,SAAS,YAChB,OAAA,UAAgB,uBAAuB,WAAW,YAAY,QAAQ;MAEtE,OAAA,UAAgB,iBAAiB,WAAW,YAAY,QAAQ;;CAIpE,cAAoB;AAClB,QAAA,WAAiB;AACjB,QAAA,UAAgB"}

package/dist/dev/ui/hotkey/aria-key-shortcuts-controller.d.ts

@@ -0,0 +1,15 @@
+import { PlayerControllerHost } from "../../player/player-controller.js";
+import { ReactiveController } from "@videojs/element";
+
+//#region src/ui/hotkey/aria-key-shortcuts-controller.d.ts
+/** Provides `aria-keyshortcuts` for a given hotkey action name. */
+declare class AriaKeyShortcutsController implements ReactiveController {
+  #private;
+  constructor(host: PlayerControllerHost, action: string);
+  get value(): string | undefined;
+  hostConnected(): void;
+  hostDisconnected(): void;
+}
+//#endregion
+export { AriaKeyShortcutsController };
+//# sourceMappingURL=aria-key-shortcuts-controller.d.ts.map

package/dist/dev/ui/hotkey/aria-key-shortcuts-controller.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"aria-key-shortcuts-controller.d.ts","names":[],"sources":["../../../../src/ui/hotkey/aria-key-shortcuts-controller.ts"],"mappings":";;;;;cASa,0BAAA,YAAsC,kBAAA;EAAA;cAIrC,IAAA,EAAM,oBAAA,EAAsB,MAAA;EAAA,IAMpC,KAAA,CAAA;EAMJ,aAAA,CAAA;EACA,gBAAA,CAAA;AAAA"}

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

@@ -0,0 +1,28 @@
+import { containerContext } from "../../player/context.js";
+import { findHotkeyCoordinator } from "@videojs/core/dom";
+import { ContextConsumer } from "@videojs/element/context";
+//#region src/ui/hotkey/aria-key-shortcuts-controller.ts
+/** Provides `aria-keyshortcuts` for a given hotkey action name. */
+var AriaKeyShortcutsController = class {
+	#action;
+	#container;
+	constructor(host, action) {
+		this.#action = action;
+		this.#container = new ContextConsumer(host, {
+			context: containerContext,
+			subscribe: true
+		});
+		host.addController(this);
+	}
+	get value() {
+		const container = this.#container.value?.container;
+		if (!container) return void 0;
+		return findHotkeyCoordinator(container)?.getAriaKeys(this.#action);
+	}
+	hostConnected() {}
+	hostDisconnected() {}
+};
+//#endregion
+export { AriaKeyShortcutsController };
+
+//# sourceMappingURL=aria-key-shortcuts-controller.js.map

package/dist/dev/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/dev/ui/hotkey/hotkey-element.d.ts

@@ -0,0 +1,21 @@
+import { MediaElement } from "../media-element.js";
+import { HotkeyActionName } from "@videojs/core/dom";
+import { PropertyDeclarationMap, PropertyValues } from "@videojs/element";
+
+//#region src/ui/hotkey/hotkey-element.d.ts
+declare class HotkeyElement extends MediaElement {
+  #private;
+  static readonly tagName = "media-hotkey";
+  static properties: PropertyDeclarationMap;
+  keys: string;
+  action: HotkeyActionName | (string & {});
+  value: number | undefined;
+  disabled: boolean;
+  target: 'player' | 'document';
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+  protected update(changed: PropertyValues): void;
+}
+//#endregion
+export { HotkeyElement };
+//# sourceMappingURL=hotkey-element.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"hotkey-element.d.ts","names":[],"sources":["../../../../src/ui/hotkey/hotkey-element.ts"],"mappings":";;;;;cAQa,aAAA,SAAsB,YAAA;EAAA;kBACjB,OAAA;EAAA,OAEA,UAAA,EAAY,sBAAA;EAQ5B,IAAA;EACA,MAAA,EAAQ,gBAAA;EACR,KAAA;EACA,QAAA;EACA,MAAA;EAUS,iBAAA,CAAA;EAMA,oBAAA,CAAA;EAAA,UAKU,MAAA,CAAO,OAAA,EAAS,cAAA;AAAA"}

package/dist/dev/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/dev/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/dev/ui/media-button-element.d.ts

@@ -1,11 +1,12 @@
 import { MediaElement } from "./media-element.js";
 import { PlayerController } from "../player/player-controller.js";
+import { State } from "@videojs/store";
 import { PropertyDeclarationMap, PropertyValues } from "@videojs/element";
-import { InferComponentState, InferMediaState, MediaUIComponent, StateAttrMap } from "@videojs/core";
+import { ButtonState, InferComponentState, InferMediaState, MediaButtonComponent, StateAttrMap } from "@videojs/core";
 
 //#region src/ui/media-button-element.d.ts
 /** Abstract base for HTML custom elements that render a media-control button. */
-declare abstract class MediaButtonElement<Core extends MediaUIComponent> extends MediaElement {
+declare abstract class MediaButtonElement<Core extends MediaButtonComponent> extends MediaElement {
   #private;
   static properties: PropertyDeclarationMap;
   disabled: boolean;
@@ -14,8 +15,13 @@ declare abstract class MediaButtonElement<Core extends MediaUIComponent> extends
   protected abstract readonly stateAttrMap: StateAttrMap<InferComponentState<Core>>;
   protected abstract readonly mediaState: PlayerController<any, InferMediaState<Core> | undefined>;
   protected abstract activate(state: InferMediaState<Core>): void;
+  /** Override to set the hotkey action name for `aria-keyshortcuts`. */
+  protected readonly hotkeyAction: string | undefined;
+  get $state(): State<ButtonState>;
   connectedCallback(): void;
   disconnectedCallback(): void;
+  /** Returns the button's current label derived from media state. */
+  getLabel(): string | undefined;
   protected willUpdate(changed: PropertyValues): void;
   protected update(changed: PropertyValues): void;
 }

package/dist/dev/ui/media-button-element.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"media-button-element.d.ts","names":[],"sources":["../../../src/ui/media-button-element.ts"],"mappings":";;;;;;;uBAQsB,kBAAA,cAAgC,gBAAA,UAA0B,YAAA;EAAA;SAC9D,UAAA,EAAY,sBAAA;EAK5B,QAAA;EACA,KAAA;EAAA,4BAE4B,IAAA,EAAM,IAAA;EAAA,4BACN,YAAA,EAAc,YAAA,CAAa,mBAAA,CAAoB,IAAA;EAAA,4BAC/C,UAAA,EAAY,gBAAA,MAAsB,eAAA,CAAgB,IAAA;EAAA,mBAE3D,QAAA,CAAS,KAAA,EAAO,eAAA,CAAgB,IAAA;EAI1C,iBAAA,CAAA;EAiBA,oBAAA,CAAA;EAAA,UAMU,UAAA,CAAW,OAAA,EAAS,cAAA;EAAA,UAKpB,MAAA,CAAO,OAAA,EAAS,cAAA;AAAA"}
+{"version":3,"file":"media-button-element.d.ts","names":[],"sources":["../../../src/ui/media-button-element.ts"],"mappings":";;;;;;;;uBAgBsB,kBAAA,cAAgC,oBAAA,UAA8B,YAAA;EAAA;SAClE,UAAA,EAAY,sBAAA;EAK5B,QAAA;EACA,KAAA;EAAA,4BAE4B,IAAA,EAAM,IAAA;EAAA,4BACN,YAAA,EAAc,YAAA,CAAa,mBAAA,CAAoB,IAAA;EAAA,4BAC/C,UAAA,EAAY,gBAAA,MAAsB,eAAA,CAAgB,IAAA;EAAA,mBAE3D,QAAA,CAAS,KAAA,EAAO,eAAA,CAAgB,IAAA;EAHT;EAAA,mBAMvB,YAAA;EAAA,IAEf,MAAA,CAAA,GAAU,KAAA,CAAM,WAAA;EAOX,iBAAA,CAAA;EAsBA,oBAAA,CAAA;EAlC0B;EAyCnC,QAAA,CAAA;EAAA,UAImB,UAAA,CAAW,OAAA,EAAS,cAAA;EAAA,UAKpB,MAAA,CAAO,OAAA,EAAS,cAAA;AAAA"}

package/dist/dev/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, logMissingFeature } 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),
@@ -31,6 +38,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);
@@ -41,11 +52,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/dev/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;AAEzE,MAAe,CAAC,KAAK,WAAW,SAAS,KAAK,WAAW,YACvD,mBAAkB,KAAK,WAAW,KAAK,WAAW,YAAY;;CAIlE,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;AAEzE,MAAe,CAAC,KAAK,WAAW,SAAS,KAAK,WAAW,YACvD,mBAAkB,KAAK,WAAW,KAAK,WAAW,YAAY;;CAIlE,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/dev/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/dev/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/dev/ui/media-ui-element.js

@@ -1,6 +1,5 @@
 import { MediaElement } from "./media-element.js";
 import { applyStateDataAttrs, logMissingFeature } 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 {
@@ -17,7 +16,7 @@ var MediaUIElement = class extends MediaElement {
 		applyStateDataAttrs(this, state, this.stateAttrMap);
 	}
 };
-
 //#endregion
 export { MediaUIElement };
+
 //# sourceMappingURL=media-ui-element.js.map

package/dist/dev/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;AAEzB,MAAe,CAAC,KAAK,WAAW,SAAS,KAAK,WAAW,YACvD,mBAAkB,KAAK,WAAW,KAAK,WAAW,YAAY;;CAIlE,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;AAEzB,MAAe,CAAC,KAAK,WAAW,SAAS,KAAK,WAAW,YACvD,mBAAkB,KAAK,WAAW,KAAK,WAAW,YAAY;;CAIlE,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/dev/ui/mute-button/mute-button-element.d.ts

@@ -12,6 +12,7 @@ declare class MuteButtonElement extends MediaButtonElement<MuteButtonCore> {
     readonly volumeLevel: "data-volume-level";
   };
   protected readonly mediaState: PlayerController<_videojs_core_dom0.AnyPlayerStore, MediaVolumeState | undefined>;
+  protected readonly hotkeyAction = "toggleMuted";
   protected activate(state: MediaVolumeState): void;
 }
 //#endregion

package/dist/dev/ui/mute-button/mute-button-element.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"mute-button-element.d.ts","names":[],"sources":["../../../../src/ui/mute-button/mute-button-element.ts"],"mappings":";;;;;;cAOa,iBAAA,SAA0B,kBAAA,CAAmB,cAAA;EAAA,gBACxC,OAAA;EAAA,mBAEG,IAAA,EAAI,cAAA;EAAA,mBACJ,YAAA;IAAA;;;qBACA,UAAA,EAAU,gBAAA,CAFN,kBAAA,CAEM,cAAA,EAAA,gBAAA;EAAA,UAEnB,QAAA,CAAS,KAAA,EAAO,gBAAA;AAAA"}
+{"version":3,"file":"mute-button-element.d.ts","names":[],"sources":["../../../../src/ui/mute-button/mute-button-element.ts"],"mappings":";;;;;;cAOa,iBAAA,SAA0B,kBAAA,CAAmB,cAAA;EAAA,gBACxC,OAAA;EAAA,mBAEG,IAAA,EAAI,cAAA;EAAA,mBACJ,YAAA;IAAA;;;qBACA,UAAA,EAAU,gBAAA,CAFN,kBAAA,CAEM,cAAA,EAAA,gBAAA;EAAA,mBACD,YAAA;EAAA,UAElB,QAAA,CAAS,KAAA,EAAO,gBAAA;AAAA"}