@videojs/html 10.0.0-alpha.3 → 10.0.0-alpha.5

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

@@ -1 +1 @@
-{"version":3,"file":"fullscreen-button-element.js","names":["#core","#state","#disconnect"],"sources":["../../../../src/ui/fullscreen-button/fullscreen-button-element.ts"],"sourcesContent":["import { FullscreenButtonCore, FullscreenButtonDataAttrs } from '@videojs/core';\nimport {\n  applyElementProps,\n  applyStateDataAttrs,\n  createButton,\n  logMissingFeature,\n  selectFullscreen,\n} from '@videojs/core/dom';\nimport type { PropertyDeclarationMap, PropertyValues } from '@videojs/element';\n\nimport { playerContext } from '../../player/context';\nimport { PlayerController } from '../../player/player-controller';\nimport { MediaElement } from '../media-element';\n\nexport class FullscreenButtonElement extends MediaElement {\n  static readonly tagName = 'media-fullscreen-button';\n\n  static override properties = {\n    label: { type: String },\n    disabled: { type: Boolean },\n  } satisfies PropertyDeclarationMap<keyof FullscreenButtonCore.Props>;\n\n  label = FullscreenButtonCore.defaultProps.label;\n  disabled = FullscreenButtonCore.defaultProps.disabled;\n\n  readonly #core = new FullscreenButtonCore();\n  readonly #state = new PlayerController(this, playerContext, selectFullscreen);\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.#core.toggle(this.#state.value!),\n      isDisabled: () => this.disabled || !this.#state.value,\n    });\n\n    applyElementProps(this, buttonProps, this.#disconnect.signal);\n\n    if (__DEV__ && !this.#state.value) {\n      logMissingFeature(FullscreenButtonElement.tagName, 'fullscreen');\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.#state.value;\n\n    if (!media) return;\n\n    const state = this.#core.getState(media);\n    applyElementProps(this, this.#core.getAttrs(state));\n    applyStateDataAttrs(this, state, FullscreenButtonDataAttrs);\n  }\n}\n"],"mappings":";;;;;;;AAcA,IAAa,0BAAb,MAAa,gCAAgC,aAAa;;;eAQhD,qBAAqB,aAAa;kBAC/B,qBAAqB,aAAa;;;iBARnB;;;oBAEG;GAC3B,OAAO,EAAE,MAAM,QAAQ;GACvB,UAAU,EAAE,MAAM,SAAS;GAC5B;;CAKD,CAASA,OAAQ,IAAI,sBAAsB;CAC3C,CAASC,QAAS,IAAI,iBAAiB,MAAM,eAAe,iBAAiB;CAE7E,cAAsC;CAEtC,AAAS,oBAA0B;AACjC,QAAM,mBAAmB;AAEzB,QAAKC,aAAc,IAAI,iBAAiB;EAExC,MAAM,cAAc,aAAa;GAC/B,kBAAkB,MAAKF,KAAM,OAAO,MAAKC,MAAO,MAAO;GACvD,kBAAkB,KAAK,YAAY,CAAC,MAAKA,MAAO;GACjD,CAAC;AAEF,oBAAkB,MAAM,aAAa,MAAKC,WAAY,OAAO;AAE7D,MAAe,CAAC,MAAKD,MAAO,MAC1B,mBAAkB,wBAAwB,SAAS,aAAa;;CAIpE,AAAS,uBAA6B;AACpC,QAAM,sBAAsB;AAC5B,QAAKC,YAAa,OAAO;AACzB,QAAKA,aAAc;;CAGrB,AAAmB,WAAW,SAA+B;AAC3D,QAAM,WAAW,QAAQ;AACzB,QAAKF,KAAM,SAAS,KAAK;;CAG3B,AAAmB,OAAO,SAA+B;AACvD,QAAM,OAAO,QAAQ;EAErB,MAAM,QAAQ,MAAKC,MAAO;AAE1B,MAAI,CAAC,MAAO;EAEZ,MAAM,QAAQ,MAAKD,KAAM,SAAS,MAAM;AACxC,oBAAkB,MAAM,MAAKA,KAAM,SAAS,MAAM,CAAC;AACnD,sBAAoB,MAAM,OAAO,0BAA0B"}
+{"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"}

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

@@ -0,0 +1,24 @@
+import { MediaElement } from "./media-element.js";
+import { PlayerController } from "../player/player-controller.js";
+import { PropertyDeclarationMap, PropertyValues } from "@videojs/element";
+import { InferComponentState, InferMediaState, MediaUIComponent, 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 {
+  #private;
+  static properties: PropertyDeclarationMap;
+  disabled: boolean;
+  label: string;
+  protected abstract readonly core: Core;
+  protected abstract readonly stateAttrMap: StateAttrMap<InferComponentState<Core>>;
+  protected abstract readonly mediaState: PlayerController<any, InferMediaState<Core> | undefined>;
+  protected abstract activate(state: InferMediaState<Core>): void;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+  protected willUpdate(changed: PropertyValues): void;
+  protected update(changed: PropertyValues): void;
+}
+//#endregion
+export { MediaButtonElement };
+//# sourceMappingURL=media-button-element.d.ts.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,51 @@
+import { MediaElement } from "./media-element.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 {
+	constructor(..._args) {
+		super(..._args);
+		this.disabled = false;
+		this.label = "";
+	}
+	static {
+		this.properties = {
+			label: { type: String },
+			disabled: { type: Boolean }
+		};
+	}
+	#disconnect = null;
+	connectedCallback() {
+		super.connectedCallback();
+		this.#disconnect = new AbortController();
+		const buttonProps = createButton({
+			onActivate: () => this.activate(this.mediaState.value),
+			isDisabled: () => this.disabled || !this.mediaState.value
+		});
+		applyElementProps(this, buttonProps, { signal: this.#disconnect.signal });
+		if (!this.mediaState.value && this.mediaState.displayName) logMissingFeature(this.localName, this.mediaState.displayName);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.#disconnect?.abort();
+		this.#disconnect = null;
+	}
+	willUpdate(changed) {
+		super.willUpdate(changed);
+		this.core.setProps?.(this);
+	}
+	update(changed) {
+		super.update(changed);
+		const media = this.mediaState.value;
+		if (!media) return;
+		this.core.setMedia(media);
+		const state = this.core.getState();
+		applyElementProps(this, this.core.getAttrs?.(state) ?? {});
+		applyStateDataAttrs(this, state, this.stateAttrMap);
+	}
+};
+
+//#endregion
+export { MediaButtonElement };
+//# sourceMappingURL=media-button-element.js.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,17 @@
+import { MediaElement } from "./media-element.js";
+import { PlayerController } from "../player/player-controller.js";
+import { PropertyValues } from "@videojs/element";
+import { InferComponentState, InferMediaState, MediaUIComponent, StateAttrMap } from "@videojs/core";
+
+//#region src/ui/media-ui-element.d.ts
+/** Abstract base for HTML custom elements that display media state with data attributes. */
+declare abstract class MediaUIElement<Core extends MediaUIComponent> extends MediaElement {
+  protected abstract readonly core: Core;
+  protected abstract readonly stateAttrMap: StateAttrMap<InferComponentState<Core>>;
+  protected abstract readonly mediaState: PlayerController<any, InferMediaState<Core> | undefined>;
+  connectedCallback(): void;
+  protected update(changed: PropertyValues): void;
+}
+//#endregion
+export { MediaUIElement };
+//# sourceMappingURL=media-ui-element.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"media-ui-element.d.ts","names":[],"sources":["../../../src/ui/media-ui-element.ts"],"mappings":";;;;;;;uBAQsB,cAAA,cAA4B,gBAAA,UAA0B,YAAA;EAAA,4BAC9C,IAAA,EAAM,IAAA;EAAA,4BACN,YAAA,EAAc,YAAA,CAAa,mBAAA,CAAoB,IAAA;EAAA,4BAC/C,UAAA,EAAY,gBAAA,MAAsB,eAAA,CAAgB,IAAA;EAErE,iBAAA,CAAA;EAAA,UAQU,MAAA,CAAO,OAAA,EAAS,cAAA;AAAA"}

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

@@ -0,0 +1,23 @@
+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 {
+	connectedCallback() {
+		super.connectedCallback();
+		if (!this.mediaState.value && this.mediaState.displayName) logMissingFeature(this.localName, this.mediaState.displayName);
+	}
+	update(changed) {
+		super.update(changed);
+		const media = this.mediaState.value;
+		if (!media) return;
+		this.core.setMedia(media);
+		const state = this.core.getState();
+		applyStateDataAttrs(this, state, this.stateAttrMap);
+	}
+};
+
+//#endregion
+export { MediaUIElement };
+//# sourceMappingURL=media-ui-element.js.map

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

@@ -0,0 +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"}

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

@@ -1,25 +1,18 @@
-import { MediaElement } from "../media-element.js";
-import { PropertyValues } from "@videojs/element";
-import * as _videojs_core0 from "@videojs/core";
+import { PlayerController } from "../../player/player-controller.js";
+import { MediaButtonElement } from "../media-button-element.js";
+import * as _videojs_core_dom0 from "@videojs/core/dom";
+import { MediaVolumeState, MuteButtonCore } from "@videojs/core";
 
 //#region src/ui/mute-button/mute-button-element.d.ts
-declare class MuteButtonElement extends MediaElement {
-  #private;
+declare class MuteButtonElement extends MediaButtonElement<MuteButtonCore> {
   static readonly tagName = "media-mute-button";
-  static properties: {
-    label: {
-      type: StringConstructor;
-    };
-    disabled: {
-      type: BooleanConstructor;
-    };
+  protected readonly core: MuteButtonCore;
+  protected readonly stateAttrMap: {
+    readonly muted: "data-muted";
+    readonly volumeLevel: "data-volume-level";
   };
-  label: string | ((state: _videojs_core0.MuteButtonState) => string);
-  disabled: boolean;
-  connectedCallback(): void;
-  disconnectedCallback(): void;
-  protected willUpdate(changed: PropertyValues): void;
-  protected update(changed: PropertyValues): void;
+  protected readonly mediaState: PlayerController<_videojs_core_dom0.AnyPlayerStore, MediaVolumeState | undefined>;
+  protected activate(state: MediaVolumeState): void;
 }
 //#endregion
 export { MuteButtonElement };

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":";;;;;cAca,iBAAA,SAA0B,YAAA;EAAA;kBACrB,OAAA;EAAA,OAEA,UAAA;;;;;;;;EAKhB,KAAA,aAAK,KAAA,iBAAA,eAAA;EACL,QAAA;EAOS,iBAAA,CAAA;EAiBA,oBAAA,CAAA;EAAA,UAMU,UAAA,CAAW,OAAA,EAAS,cAAA;EAAA,UAKpB,MAAA,CAAO,OAAA,EAAS,cAAA;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,UAEnB,QAAA,CAAS,KAAA,EAAO,gBAAA;AAAA"}

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

@@ -1,54 +1,22 @@
 import { playerContext } from "../../player/context.js";
-import { MediaElement } from "../media-element.js";
 import { PlayerController } from "../../player/player-controller.js";
-import { applyElementProps, applyStateDataAttrs, createButton, logMissingFeature, selectVolume } from "@videojs/core/dom";
+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 MuteButtonElement extends MediaElement {
+var MuteButtonElement = class extends MediaButtonElement {
 	constructor(..._args) {
 		super(..._args);
-		this.label = MuteButtonCore.defaultProps.label;
-		this.disabled = MuteButtonCore.defaultProps.disabled;
+		this.core = new MuteButtonCore();
+		this.stateAttrMap = MuteButtonDataAttrs;
+		this.mediaState = new PlayerController(this, playerContext, selectVolume);
 	}
 	static {
 		this.tagName = "media-mute-button";
 	}
-	static {
-		this.properties = {
-			label: { type: String },
-			disabled: { type: Boolean }
-		};
-	}
-	#core = new MuteButtonCore();
-	#state = new PlayerController(this, playerContext, selectVolume);
-	#disconnect = null;
-	connectedCallback() {
-		super.connectedCallback();
-		this.#disconnect = new AbortController();
-		const buttonProps = createButton({
-			onActivate: () => this.#core.toggle(this.#state.value),
-			isDisabled: () => this.disabled || !this.#state.value
-		});
-		applyElementProps(this, buttonProps, this.#disconnect.signal);
-		if (!this.#state.value) logMissingFeature(MuteButtonElement.tagName, "volume");
-	}
-	disconnectedCallback() {
-		super.disconnectedCallback();
-		this.#disconnect?.abort();
-		this.#disconnect = null;
-	}
-	willUpdate(changed) {
-		super.willUpdate(changed);
-		this.#core.setProps(this);
-	}
-	update(changed) {
-		super.update(changed);
-		const media = this.#state.value;
-		if (!media) return;
-		const state = this.#core.getState(media);
-		applyElementProps(this, this.#core.getAttrs(state));
-		applyStateDataAttrs(this, state, MuteButtonDataAttrs);
+	activate(state) {
+		this.core.toggle(state);
 	}
 };
 

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

@@ -1 +1 @@
-{"version":3,"file":"mute-button-element.js","names":["#core","#state","#disconnect"],"sources":["../../../../src/ui/mute-button/mute-button-element.ts"],"sourcesContent":["import { MuteButtonCore, MuteButtonDataAttrs } from '@videojs/core';\nimport {\n  applyElementProps,\n  applyStateDataAttrs,\n  createButton,\n  logMissingFeature,\n  selectVolume,\n} from '@videojs/core/dom';\nimport type { PropertyDeclarationMap, PropertyValues } from '@videojs/element';\n\nimport { playerContext } from '../../player/context';\nimport { PlayerController } from '../../player/player-controller';\nimport { MediaElement } from '../media-element';\n\nexport class MuteButtonElement extends MediaElement {\n  static readonly tagName = 'media-mute-button';\n\n  static override properties = {\n    label: { type: String },\n    disabled: { type: Boolean },\n  } satisfies PropertyDeclarationMap<keyof MuteButtonCore.Props>;\n\n  label = MuteButtonCore.defaultProps.label;\n  disabled = MuteButtonCore.defaultProps.disabled;\n\n  readonly #core = new MuteButtonCore();\n  readonly #state = new PlayerController(this, playerContext, selectVolume);\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.#core.toggle(this.#state.value!),\n      isDisabled: () => this.disabled || !this.#state.value,\n    });\n\n    applyElementProps(this, buttonProps, this.#disconnect.signal);\n\n    if (__DEV__ && !this.#state.value) {\n      logMissingFeature(MuteButtonElement.tagName, 'volume');\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.#state.value;\n\n    if (!media) return;\n\n    const state = this.#core.getState(media);\n    applyElementProps(this, this.#core.getAttrs(state));\n    applyStateDataAttrs(this, state, MuteButtonDataAttrs);\n  }\n}\n"],"mappings":";;;;;;;AAcA,IAAa,oBAAb,MAAa,0BAA0B,aAAa;;;eAQ1C,eAAe,aAAa;kBACzB,eAAe,aAAa;;;iBARb;;;oBAEG;GAC3B,OAAO,EAAE,MAAM,QAAQ;GACvB,UAAU,EAAE,MAAM,SAAS;GAC5B;;CAKD,CAASA,OAAQ,IAAI,gBAAgB;CACrC,CAASC,QAAS,IAAI,iBAAiB,MAAM,eAAe,aAAa;CAEzE,cAAsC;CAEtC,AAAS,oBAA0B;AACjC,QAAM,mBAAmB;AAEzB,QAAKC,aAAc,IAAI,iBAAiB;EAExC,MAAM,cAAc,aAAa;GAC/B,kBAAkB,MAAKF,KAAM,OAAO,MAAKC,MAAO,MAAO;GACvD,kBAAkB,KAAK,YAAY,CAAC,MAAKA,MAAO;GACjD,CAAC;AAEF,oBAAkB,MAAM,aAAa,MAAKC,WAAY,OAAO;AAE7D,MAAe,CAAC,MAAKD,MAAO,MAC1B,mBAAkB,kBAAkB,SAAS,SAAS;;CAI1D,AAAS,uBAA6B;AACpC,QAAM,sBAAsB;AAC5B,QAAKC,YAAa,OAAO;AACzB,QAAKA,aAAc;;CAGrB,AAAmB,WAAW,SAA+B;AAC3D,QAAM,WAAW,QAAQ;AACzB,QAAKF,KAAM,SAAS,KAAK;;CAG3B,AAAmB,OAAO,SAA+B;AACvD,QAAM,OAAO,QAAQ;EAErB,MAAM,QAAQ,MAAKC,MAAO;AAE1B,MAAI,CAAC,MAAO;EAEZ,MAAM,QAAQ,MAAKD,KAAM,SAAS,MAAM;AACxC,oBAAkB,MAAM,MAAKA,KAAM,SAAS,MAAM,CAAC;AACnD,sBAAoB,MAAM,OAAO,oBAAoB"}
+{"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"}

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

@@ -1,25 +1,18 @@
-import { MediaElement } from "../media-element.js";
-import { PropertyValues } from "@videojs/element";
-import * as _videojs_core0 from "@videojs/core";
+import { PlayerController } from "../../player/player-controller.js";
+import { MediaButtonElement } from "../media-button-element.js";
+import * as _videojs_core_dom0 from "@videojs/core/dom";
+import { MediaPictureInPictureState, PiPButtonCore } from "@videojs/core";
 
 //#region src/ui/pip-button/pip-button-element.d.ts
-declare class PiPButtonElement extends MediaElement {
-  #private;
+declare class PiPButtonElement extends MediaButtonElement<PiPButtonCore> {
   static readonly tagName = "media-pip-button";
-  static properties: {
-    label: {
-      type: StringConstructor;
-    };
-    disabled: {
-      type: BooleanConstructor;
-    };
+  protected readonly core: PiPButtonCore;
+  protected readonly stateAttrMap: {
+    readonly pip: "data-pip";
+    readonly availability: "data-availability";
   };
-  label: string | ((state: _videojs_core0.PiPButtonState) => string);
-  disabled: boolean;
-  connectedCallback(): void;
-  disconnectedCallback(): void;
-  protected willUpdate(changed: PropertyValues): void;
-  protected update(changed: PropertyValues): void;
+  protected readonly mediaState: PlayerController<_videojs_core_dom0.AnyPlayerStore, MediaPictureInPictureState | undefined>;
+  protected activate(state: MediaPictureInPictureState): void;
 }
 //#endregion
 export { PiPButtonElement };

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

@@ -1 +1 @@
-{"version":3,"file":"pip-button-element.d.ts","names":[],"sources":["../../../../src/ui/pip-button/pip-button-element.ts"],"mappings":";;;;;cAQa,gBAAA,SAAyB,YAAA;EAAA;kBACpB,OAAA;EAAA,OAEA,UAAA;;;;;;;;EAKhB,KAAA,aAAK,KAAA,iBAAA,cAAA;EACL,QAAA;EAOS,iBAAA,CAAA;EAiBA,oBAAA,CAAA;EAAA,UAMU,UAAA,CAAW,OAAA,EAAS,cAAA;EAAA,UAKpB,MAAA,CAAO,OAAA,EAAS,cAAA;AAAA"}
+{"version":3,"file":"pip-button-element.d.ts","names":[],"sources":["../../../../src/ui/pip-button/pip-button-element.ts"],"mappings":";;;;;;cAOa,gBAAA,SAAyB,kBAAA,CAAmB,aAAA;EAAA,gBACvC,OAAA;EAAA,mBAEG,IAAA,EAAI,aAAA;EAAA,mBACJ,YAAA;IAAA;;;qBACA,UAAA,EAAU,gBAAA,CAFN,kBAAA,CAEM,cAAA,EAAA,0BAAA;EAAA,UAEnB,QAAA,CAAS,KAAA,EAAO,0BAAA;AAAA"}

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

@@ -1,54 +1,22 @@
 import { playerContext } from "../../player/context.js";
-import { MediaElement } from "../media-element.js";
 import { PlayerController } from "../../player/player-controller.js";
-import { applyElementProps, applyStateDataAttrs, createButton, logMissingFeature, selectPiP } from "@videojs/core/dom";
+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 PiPButtonElement extends MediaElement {
+var PiPButtonElement = class extends MediaButtonElement {
 	constructor(..._args) {
 		super(..._args);
-		this.label = PiPButtonCore.defaultProps.label;
-		this.disabled = PiPButtonCore.defaultProps.disabled;
+		this.core = new PiPButtonCore();
+		this.stateAttrMap = PiPButtonDataAttrs;
+		this.mediaState = new PlayerController(this, playerContext, selectPiP);
 	}
 	static {
 		this.tagName = "media-pip-button";
 	}
-	static {
-		this.properties = {
-			label: { type: String },
-			disabled: { type: Boolean }
-		};
-	}
-	#core = new PiPButtonCore();
-	#state = new PlayerController(this, playerContext, selectPiP);
-	#disconnect = null;
-	connectedCallback() {
-		super.connectedCallback();
-		this.#disconnect = new AbortController();
-		const buttonProps = createButton({
-			onActivate: () => this.#core.toggle(this.#state.value),
-			isDisabled: () => this.disabled || !this.#state.value
-		});
-		applyElementProps(this, buttonProps, this.#disconnect.signal);
-		if (!this.#state.value) logMissingFeature(PiPButtonElement.tagName, "pip");
-	}
-	disconnectedCallback() {
-		super.disconnectedCallback();
-		this.#disconnect?.abort();
-		this.#disconnect = null;
-	}
-	willUpdate(changed) {
-		super.willUpdate(changed);
-		this.#core.setProps(this);
-	}
-	update(changed) {
-		super.update(changed);
-		const media = this.#state.value;
-		if (!media) return;
-		const state = this.#core.getState(media);
-		applyElementProps(this, this.#core.getAttrs(state));
-		applyStateDataAttrs(this, state, PiPButtonDataAttrs);
+	activate(state) {
+		this.core.toggle(state);
 	}
 };
 

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

@@ -1 +1 @@
-{"version":3,"file":"pip-button-element.js","names":["#core","#state","#disconnect"],"sources":["../../../../src/ui/pip-button/pip-button-element.ts"],"sourcesContent":["import { PiPButtonCore, PiPButtonDataAttrs } from '@videojs/core';\nimport { applyElementProps, applyStateDataAttrs, createButton, logMissingFeature, selectPiP } from '@videojs/core/dom';\nimport type { PropertyDeclarationMap, PropertyValues } from '@videojs/element';\n\nimport { playerContext } from '../../player/context';\nimport { PlayerController } from '../../player/player-controller';\nimport { MediaElement } from '../media-element';\n\nexport class PiPButtonElement extends MediaElement {\n  static readonly tagName = 'media-pip-button';\n\n  static override properties = {\n    label: { type: String },\n    disabled: { type: Boolean },\n  } satisfies PropertyDeclarationMap<keyof PiPButtonCore.Props>;\n\n  label = PiPButtonCore.defaultProps.label;\n  disabled = PiPButtonCore.defaultProps.disabled;\n\n  readonly #core = new PiPButtonCore();\n  readonly #state = new PlayerController(this, playerContext, selectPiP);\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.#core.toggle(this.#state.value!),\n      isDisabled: () => this.disabled || !this.#state.value,\n    });\n\n    applyElementProps(this, buttonProps, this.#disconnect.signal);\n\n    if (__DEV__ && !this.#state.value) {\n      logMissingFeature(PiPButtonElement.tagName, 'pip');\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.#state.value;\n\n    if (!media) return;\n\n    const state = this.#core.getState(media);\n    applyElementProps(this, this.#core.getAttrs(state));\n    applyStateDataAttrs(this, state, PiPButtonDataAttrs);\n  }\n}\n"],"mappings":";;;;;;;AAQA,IAAa,mBAAb,MAAa,yBAAyB,aAAa;;;eAQzC,cAAc,aAAa;kBACxB,cAAc,aAAa;;;iBARZ;;;oBAEG;GAC3B,OAAO,EAAE,MAAM,QAAQ;GACvB,UAAU,EAAE,MAAM,SAAS;GAC5B;;CAKD,CAASA,OAAQ,IAAI,eAAe;CACpC,CAASC,QAAS,IAAI,iBAAiB,MAAM,eAAe,UAAU;CAEtE,cAAsC;CAEtC,AAAS,oBAA0B;AACjC,QAAM,mBAAmB;AAEzB,QAAKC,aAAc,IAAI,iBAAiB;EAExC,MAAM,cAAc,aAAa;GAC/B,kBAAkB,MAAKF,KAAM,OAAO,MAAKC,MAAO,MAAO;GACvD,kBAAkB,KAAK,YAAY,CAAC,MAAKA,MAAO;GACjD,CAAC;AAEF,oBAAkB,MAAM,aAAa,MAAKC,WAAY,OAAO;AAE7D,MAAe,CAAC,MAAKD,MAAO,MAC1B,mBAAkB,iBAAiB,SAAS,MAAM;;CAItD,AAAS,uBAA6B;AACpC,QAAM,sBAAsB;AAC5B,QAAKC,YAAa,OAAO;AACzB,QAAKA,aAAc;;CAGrB,AAAmB,WAAW,SAA+B;AAC3D,QAAM,WAAW,QAAQ;AACzB,QAAKF,KAAM,SAAS,KAAK;;CAG3B,AAAmB,OAAO,SAA+B;AACvD,QAAM,OAAO,QAAQ;EAErB,MAAM,QAAQ,MAAKC,MAAO;AAE1B,MAAI,CAAC,MAAO;EAEZ,MAAM,QAAQ,MAAKD,KAAM,SAAS,MAAM;AACxC,oBAAkB,MAAM,MAAKA,KAAM,SAAS,MAAM,CAAC;AACnD,sBAAoB,MAAM,OAAO,mBAAmB"}
+{"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"}

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

@@ -1,25 +1,19 @@
-import { MediaElement } from "../media-element.js";
-import { PropertyValues } from "@videojs/element";
-import * as _videojs_core0 from "@videojs/core";
+import { PlayerController } from "../../player/player-controller.js";
+import { MediaButtonElement } from "../media-button-element.js";
+import * as _videojs_core_dom0 from "@videojs/core/dom";
+import { MediaPlaybackState, PlayButtonCore } from "@videojs/core";
 
 //#region src/ui/play-button/play-button-element.d.ts
-declare class PlayButtonElement extends MediaElement {
-  #private;
+declare class PlayButtonElement extends MediaButtonElement<PlayButtonCore> {
   static readonly tagName = "media-play-button";
-  static properties: {
-    label: {
-      type: StringConstructor;
-    };
-    disabled: {
-      type: BooleanConstructor;
-    };
+  protected readonly core: PlayButtonCore;
+  protected readonly stateAttrMap: {
+    readonly paused: "data-paused";
+    readonly ended: "data-ended";
+    readonly started: "data-started";
   };
-  label: string | ((state: _videojs_core0.PlayButtonState) => string);
-  disabled: boolean;
-  connectedCallback(): void;
-  disconnectedCallback(): void;
-  protected willUpdate(changed: PropertyValues): void;
-  protected update(changed: PropertyValues): void;
+  protected readonly mediaState: PlayerController<_videojs_core_dom0.AnyPlayerStore, MediaPlaybackState | undefined>;
+  protected activate(state: MediaPlaybackState): void;
 }
 //#endregion
 export { PlayButtonElement };

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

@@ -1 +1 @@
-{"version":3,"file":"play-button-element.d.ts","names":[],"sources":["../../../../src/ui/play-button/play-button-element.ts"],"mappings":";;;;;cAca,iBAAA,SAA0B,YAAA;EAAA;kBACrB,OAAA;EAAA,OAEA,UAAA;;;;;;;;EAKhB,KAAA,aAAK,KAAA,iBAAA,eAAA;EACL,QAAA;EAOS,iBAAA,CAAA;EAiBA,oBAAA,CAAA;EAAA,UAMU,UAAA,CAAW,OAAA,EAAS,cAAA;EAAA,UAKpB,MAAA,CAAO,OAAA,EAAS,cAAA;AAAA"}
+{"version":3,"file":"play-button-element.d.ts","names":[],"sources":["../../../../src/ui/play-button/play-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,kBAAA;EAAA,UAEnB,QAAA,CAAS,KAAA,EAAO,kBAAA;AAAA"}

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

@@ -1,54 +1,22 @@
 import { playerContext } from "../../player/context.js";
-import { MediaElement } from "../media-element.js";
 import { PlayerController } from "../../player/player-controller.js";
-import { applyElementProps, applyStateDataAttrs, createButton, logMissingFeature, selectPlayback } from "@videojs/core/dom";
+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 PlayButtonElement extends MediaElement {
+var PlayButtonElement = class extends MediaButtonElement {
 	constructor(..._args) {
 		super(..._args);
-		this.label = PlayButtonCore.defaultProps.label;
-		this.disabled = PlayButtonCore.defaultProps.disabled;
+		this.core = new PlayButtonCore();
+		this.stateAttrMap = PlayButtonDataAttrs;
+		this.mediaState = new PlayerController(this, playerContext, selectPlayback);
 	}
 	static {
 		this.tagName = "media-play-button";
 	}
-	static {
-		this.properties = {
-			label: { type: String },
-			disabled: { type: Boolean }
-		};
-	}
-	#core = new PlayButtonCore();
-	#state = new PlayerController(this, playerContext, selectPlayback);
-	#disconnect = null;
-	connectedCallback() {
-		super.connectedCallback();
-		this.#disconnect = new AbortController();
-		const buttonProps = createButton({
-			onActivate: () => this.#core.toggle(this.#state.value),
-			isDisabled: () => this.disabled || !this.#state.value
-		});
-		applyElementProps(this, buttonProps, this.#disconnect.signal);
-		if (!this.#state.value) logMissingFeature(PlayButtonElement.tagName, "playback");
-	}
-	disconnectedCallback() {
-		super.disconnectedCallback();
-		this.#disconnect?.abort();
-		this.#disconnect = null;
-	}
-	willUpdate(changed) {
-		super.willUpdate(changed);
-		this.#core.setProps(this);
-	}
-	update(changed) {
-		super.update(changed);
-		const media = this.#state.value;
-		if (!media) return;
-		const state = this.#core.getState(media);
-		applyElementProps(this, this.#core.getAttrs(state));
-		applyStateDataAttrs(this, state, PlayButtonDataAttrs);
+	activate(state) {
+		this.core.toggle(state);
 	}
 };
 

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

@@ -1 +1 @@
-{"version":3,"file":"play-button-element.js","names":["#core","#state","#disconnect"],"sources":["../../../../src/ui/play-button/play-button-element.ts"],"sourcesContent":["import { PlayButtonCore, PlayButtonDataAttrs } from '@videojs/core';\nimport {\n  applyElementProps,\n  applyStateDataAttrs,\n  createButton,\n  logMissingFeature,\n  selectPlayback,\n} from '@videojs/core/dom';\nimport type { PropertyDeclarationMap, PropertyValues } from '@videojs/element';\n\nimport { playerContext } from '../../player/context';\nimport { PlayerController } from '../../player/player-controller';\nimport { MediaElement } from '../media-element';\n\nexport class PlayButtonElement extends MediaElement {\n  static readonly tagName = 'media-play-button';\n\n  static override properties = {\n    label: { type: String },\n    disabled: { type: Boolean },\n  } satisfies PropertyDeclarationMap<keyof PlayButtonCore.Props>;\n\n  label = PlayButtonCore.defaultProps.label;\n  disabled = PlayButtonCore.defaultProps.disabled;\n\n  readonly #core = new PlayButtonCore();\n  readonly #state = new PlayerController(this, playerContext, selectPlayback);\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.#core.toggle(this.#state.value!),\n      isDisabled: () => this.disabled || !this.#state.value,\n    });\n\n    applyElementProps(this, buttonProps, this.#disconnect.signal);\n\n    if (__DEV__ && !this.#state.value) {\n      logMissingFeature(PlayButtonElement.tagName, 'playback');\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.#state.value;\n\n    if (!media) return;\n\n    const state = this.#core.getState(media);\n    applyElementProps(this, this.#core.getAttrs(state));\n    applyStateDataAttrs(this, state, PlayButtonDataAttrs);\n  }\n}\n"],"mappings":";;;;;;;AAcA,IAAa,oBAAb,MAAa,0BAA0B,aAAa;;;eAQ1C,eAAe,aAAa;kBACzB,eAAe,aAAa;;;iBARb;;;oBAEG;GAC3B,OAAO,EAAE,MAAM,QAAQ;GACvB,UAAU,EAAE,MAAM,SAAS;GAC5B;;CAKD,CAASA,OAAQ,IAAI,gBAAgB;CACrC,CAASC,QAAS,IAAI,iBAAiB,MAAM,eAAe,eAAe;CAE3E,cAAsC;CAEtC,AAAS,oBAA0B;AACjC,QAAM,mBAAmB;AAEzB,QAAKC,aAAc,IAAI,iBAAiB;EAExC,MAAM,cAAc,aAAa;GAC/B,kBAAkB,MAAKF,KAAM,OAAO,MAAKC,MAAO,MAAO;GACvD,kBAAkB,KAAK,YAAY,CAAC,MAAKA,MAAO;GACjD,CAAC;AAEF,oBAAkB,MAAM,aAAa,MAAKC,WAAY,OAAO;AAE7D,MAAe,CAAC,MAAKD,MAAO,MAC1B,mBAAkB,kBAAkB,SAAS,WAAW;;CAI5D,AAAS,uBAA6B;AACpC,QAAM,sBAAsB;AAC5B,QAAKC,YAAa,OAAO;AACzB,QAAKA,aAAc;;CAGrB,AAAmB,WAAW,SAA+B;AAC3D,QAAM,WAAW,QAAQ;AACzB,QAAKF,KAAM,SAAS,KAAK;;CAG3B,AAAmB,OAAO,SAA+B;AACvD,QAAM,OAAO,QAAQ;EAErB,MAAM,QAAQ,MAAKC,MAAO;AAE1B,MAAI,CAAC,MAAO;EAEZ,MAAM,QAAQ,MAAKD,KAAM,SAAS,MAAM;AACxC,oBAAkB,MAAM,MAAKA,KAAM,SAAS,MAAM,CAAC;AACnD,sBAAoB,MAAM,OAAO,oBAAoB"}
+{"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"}

package/dist/dev/ui/playback-rate-button/playback-rate-button-element.d.ts

@@ -0,0 +1,18 @@
+import { PlayerController } from "../../player/player-controller.js";
+import { MediaButtonElement } from "../media-button-element.js";
+import * as _videojs_core_dom0 from "@videojs/core/dom";
+import { MediaPlaybackRateState, PlaybackRateButtonCore } from "@videojs/core";
+
+//#region src/ui/playback-rate-button/playback-rate-button-element.d.ts
+declare class PlaybackRateButtonElement extends MediaButtonElement<PlaybackRateButtonCore> {
+  static readonly tagName = "media-playback-rate-button";
+  protected readonly core: PlaybackRateButtonCore;
+  protected readonly stateAttrMap: {
+    readonly rate: "data-rate";
+  };
+  protected readonly mediaState: PlayerController<_videojs_core_dom0.AnyPlayerStore, MediaPlaybackRateState | undefined>;
+  protected activate(state: MediaPlaybackRateState): void;
+}
+//#endregion
+export { PlaybackRateButtonElement };
+//# sourceMappingURL=playback-rate-button-element.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"playback-rate-button-element.d.ts","names":[],"sources":["../../../../src/ui/playback-rate-button/playback-rate-button-element.ts"],"mappings":";;;;;;cAOa,yBAAA,SAAkC,kBAAA,CAAmB,sBAAA;EAAA,gBAChD,OAAA;EAAA,mBAEG,IAAA,EAAI,sBAAA;EAAA,mBACJ,YAAA;IAAA;;qBACA,UAAA,EAAU,gBAAA,CAFN,kBAAA,CAEM,cAAA,EAAA,sBAAA;EAAA,UAEnB,QAAA,CAAS,KAAA,EAAO,sBAAA;AAAA"}

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

@@ -0,0 +1,25 @@
+import { playerContext } from "../../player/context.js";
+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) {
+		super(..._args);
+		this.core = new PlaybackRateButtonCore();
+		this.stateAttrMap = PlaybackRateButtonDataAttrs;
+		this.mediaState = new PlayerController(this, playerContext, selectPlaybackRate);
+	}
+	static {
+		this.tagName = "media-playback-rate-button";
+	}
+	activate(state) {
+		this.core.cycle(state);
+	}
+};
+
+//#endregion
+export { PlaybackRateButtonElement };
+//# sourceMappingURL=playback-rate-button-element.js.map

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

@@ -0,0 +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"}