@videojs/html 10.0.0-alpha.4 → 10.0.0-alpha.6

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

@@ -1 +1 @@
-{"version":3,"file":"container-mixin.js","names":["#attachMedia","#consumer","#observer","#detach"],"sources":["../../../src/store/container-mixin.ts"],"sourcesContent":["import type { MediaContainer, PlayerStore, PlayerTarget } from '@videojs/core/dom';\nimport { ContextConsumer } from '@videojs/element/context';\nimport { noop } from '@videojs/utils/function';\nimport type { MediaElementConstructor } from '@/ui/media-element';\nimport type { PlayerContext } from '../player/context';\nimport type { PlayerConsumer, PlayerConsumerConstructor } from './types';\n\nexport type ContainerMixin<Store extends PlayerStore> = <Class extends MediaElementConstructor>(\n  BaseClass: Class\n) => Class & PlayerConsumerConstructor<Store>;\n\n/**\n * Create a mixin that consumes player context and auto-attaches media elements.\n *\n * @param context - Player context to consume from an ancestor provider.\n */\nexport function createContainerMixin<Store extends PlayerStore>(context: PlayerContext<Store>): ContainerMixin<Store> {\n  return <Class extends MediaElementConstructor>(BaseClass: Class) => {\n    class PlayerContainerElement extends BaseClass implements PlayerConsumer<Store>, MediaContainer {\n      #detach = noop;\n      #observer: MutationObserver | null = null;\n\n      #consumer = new ContextConsumer(this, {\n        context,\n        callback: () => this.#attachMedia(),\n        subscribe: true,\n      });\n\n      get store(): Store | null {\n        return this.#consumer.value ?? null;\n      }\n\n      override connectedCallback() {\n        super.connectedCallback();\n\n        this.#observer = new MutationObserver((records) => {\n          if (records.some(hasMediaNode)) this.#attachMedia();\n        });\n\n        this.#observer.observe(this, { childList: true, subtree: true });\n\n        this.#attachMedia();\n      }\n\n      override disconnectedCallback() {\n        super.disconnectedCallback();\n        this.#observer?.disconnect();\n        this.#observer = null;\n        this.#detach();\n      }\n\n      #attachMedia() {\n        // Store will be overridden and set by provider mixin if consumer is empty.\n        const store = this.#consumer.value ?? this.store;\n        if (!store) return;\n\n        const media = this.querySelector<HTMLMediaElement>('video, audio');\n\n        if (!media) {\n          this.#detach();\n          this.#detach = noop;\n          return;\n        }\n\n        const target: PlayerTarget = {\n          media,\n          container: this,\n        };\n\n        const hasMediaChanged = store.target?.media !== target.media,\n          hasContainerChanged = store.target?.container !== target.container;\n\n        if (hasMediaChanged || hasContainerChanged) {\n          this.#detach();\n          this.#detach = store.attach(target);\n        }\n      }\n    }\n\n    return PlayerContainerElement;\n  };\n}\n\nfunction isMediaNode(node: Node): boolean {\n  return node instanceof HTMLMediaElement;\n}\n\nfunction hasMediaNode(record: MutationRecord): boolean {\n  for (const node of record.addedNodes) {\n    if (isMediaNode(node)) return true;\n  }\n\n  for (const node of record.removedNodes) {\n    if (isMediaNode(node)) return true;\n  }\n\n  return false;\n}\n"],"mappings":";;;;;;;;;AAgBA,SAAgB,qBAAgD,SAAsD;AACpH,SAA+C,cAAqB;EAClE,MAAM,+BAA+B,UAA2D;GAC9F,UAAU;GACV,YAAqC;GAErC,YAAY,IAAI,gBAAgB,MAAM;IACpC;IACA,gBAAgB,MAAKA,aAAc;IACnC,WAAW;IACZ,CAAC;GAEF,IAAI,QAAsB;AACxB,WAAO,MAAKC,SAAU,SAAS;;GAGjC,AAAS,oBAAoB;AAC3B,UAAM,mBAAmB;AAEzB,UAAKC,WAAY,IAAI,kBAAkB,YAAY;AACjD,SAAI,QAAQ,KAAK,aAAa,CAAE,OAAKF,aAAc;MACnD;AAEF,UAAKE,SAAU,QAAQ,MAAM;KAAE,WAAW;KAAM,SAAS;KAAM,CAAC;AAEhE,UAAKF,aAAc;;GAGrB,AAAS,uBAAuB;AAC9B,UAAM,sBAAsB;AAC5B,UAAKE,UAAW,YAAY;AAC5B,UAAKA,WAAY;AACjB,UAAKC,QAAS;;GAGhB,eAAe;IAEb,MAAM,QAAQ,MAAKF,SAAU,SAAS,KAAK;AAC3C,QAAI,CAAC,MAAO;IAEZ,MAAM,QAAQ,KAAK,cAAgC,eAAe;AAElE,QAAI,CAAC,OAAO;AACV,WAAKE,QAAS;AACd,WAAKA,SAAU;AACf;;IAGF,MAAM,SAAuB;KAC3B;KACA,WAAW;KACZ;IAED,MAAM,kBAAkB,MAAM,QAAQ,UAAU,OAAO,OACrD,sBAAsB,MAAM,QAAQ,cAAc,OAAO;AAE3D,QAAI,mBAAmB,qBAAqB;AAC1C,WAAKA,QAAS;AACd,WAAKA,SAAU,MAAM,OAAO,OAAO;;;;AAKzC,SAAO;;;AAIX,SAAS,YAAY,MAAqB;AACxC,QAAO,gBAAgB;;AAGzB,SAAS,aAAa,QAAiC;AACrD,MAAK,MAAM,QAAQ,OAAO,WACxB,KAAI,YAAY,KAAK,CAAE,QAAO;AAGhC,MAAK,MAAM,QAAQ,OAAO,aACxB,KAAI,YAAY,KAAK,CAAE,QAAO;AAGhC,QAAO"}
+{"version":3,"file":"container-mixin.js","names":["#contextStore","#attachMedia","#observer","#detach"],"sources":["../../../src/store/container-mixin.ts"],"sourcesContent":["import type { MediaContainer, PlayerStore, PlayerTarget } from '@videojs/core/dom';\nimport { ContextConsumer } from '@videojs/element/context';\nimport { noop } from '@videojs/utils/function';\nimport type { MediaElementConstructor } from '@/ui/media-element';\nimport type { PlayerContext } from '../player/context';\nimport type { PlayerConsumer, PlayerConsumerConstructor } from './types';\n\nexport type ContainerMixin<Store extends PlayerStore> = <Class extends MediaElementConstructor>(\n  BaseClass: Class\n) => Class & PlayerConsumerConstructor<Store>;\n\n/**\n * Create a mixin that consumes player context and auto-attaches media elements.\n *\n * @param context - Player context to consume from an ancestor provider.\n */\nexport function createContainerMixin<Store extends PlayerStore>(context: PlayerContext<Store>): ContainerMixin<Store> {\n  return <Class extends MediaElementConstructor>(BaseClass: Class) => {\n    class PlayerContainerElement extends BaseClass implements PlayerConsumer<Store>, MediaContainer {\n      #detach = noop;\n      #observer: MutationObserver | null = null;\n      #contextStore: Store | null = null;\n\n      constructor(...args: any[]) {\n        super(...args);\n\n        // Created in the constructor body (after all field initializers) so\n        // that #contextStore's private slot exists if the callback fires\n        // synchronously — which happens when the element is already connected.\n        // The host's controller list keeps the consumer alive; no field needed.\n        new ContextConsumer(this, {\n          context,\n          callback: (value) => {\n            this.#contextStore = value ?? null;\n            this.#attachMedia();\n          },\n          subscribe: true,\n        });\n      }\n\n      get store(): Store | null {\n        return this.#contextStore;\n      }\n\n      override connectedCallback() {\n        super.connectedCallback();\n\n        this.#observer = new MutationObserver((records) => {\n          if (records.some(hasMediaNode)) this.#attachMedia();\n        });\n\n        this.#observer.observe(this, { childList: true, subtree: true });\n\n        this.#attachMedia();\n      }\n\n      override disconnectedCallback() {\n        super.disconnectedCallback();\n        this.#observer?.disconnect();\n        this.#observer = null;\n        this.#detach();\n      }\n\n      #attachMedia() {\n        // Prefer the cached context value; fall back to `this.store` which\n        // ProviderMixin overrides when both mixins are applied to one element.\n        const store = this.#contextStore ?? this.store;\n        if (!store) return;\n\n        const media = this.querySelector<HTMLMediaElement>('video, audio');\n\n        if (!media) {\n          this.#detach();\n          this.#detach = noop;\n          return;\n        }\n\n        const target: PlayerTarget = {\n          media,\n          container: this,\n        };\n\n        const hasMediaChanged = store.target?.media !== target.media,\n          hasContainerChanged = store.target?.container !== target.container;\n\n        if (hasMediaChanged || hasContainerChanged) {\n          this.#detach();\n          this.#detach = store.attach(target);\n        }\n      }\n    }\n\n    return PlayerContainerElement;\n  };\n}\n\nfunction isMediaNode(node: Node): boolean {\n  return node instanceof HTMLMediaElement;\n}\n\nfunction hasMediaNode(record: MutationRecord): boolean {\n  for (const node of record.addedNodes) {\n    if (isMediaNode(node)) return true;\n  }\n\n  for (const node of record.removedNodes) {\n    if (isMediaNode(node)) return true;\n  }\n\n  return false;\n}\n"],"mappings":";;;;;;;;;AAgBA,SAAgB,qBAAgD,SAAsD;AACpH,SAA+C,cAAqB;EAClE,MAAM,+BAA+B,UAA2D;GAC9F,UAAU;GACV,YAAqC;GACrC,gBAA8B;GAE9B,YAAY,GAAG,MAAa;AAC1B,UAAM,GAAG,KAAK;AAMd,QAAI,gBAAgB,MAAM;KACxB;KACA,WAAW,UAAU;AACnB,YAAKA,eAAgB,SAAS;AAC9B,YAAKC,aAAc;;KAErB,WAAW;KACZ,CAAC;;GAGJ,IAAI,QAAsB;AACxB,WAAO,MAAKD;;GAGd,AAAS,oBAAoB;AAC3B,UAAM,mBAAmB;AAEzB,UAAKE,WAAY,IAAI,kBAAkB,YAAY;AACjD,SAAI,QAAQ,KAAK,aAAa,CAAE,OAAKD,aAAc;MACnD;AAEF,UAAKC,SAAU,QAAQ,MAAM;KAAE,WAAW;KAAM,SAAS;KAAM,CAAC;AAEhE,UAAKD,aAAc;;GAGrB,AAAS,uBAAuB;AAC9B,UAAM,sBAAsB;AAC5B,UAAKC,UAAW,YAAY;AAC5B,UAAKA,WAAY;AACjB,UAAKC,QAAS;;GAGhB,eAAe;IAGb,MAAM,QAAQ,MAAKH,gBAAiB,KAAK;AACzC,QAAI,CAAC,MAAO;IAEZ,MAAM,QAAQ,KAAK,cAAgC,eAAe;AAElE,QAAI,CAAC,OAAO;AACV,WAAKG,QAAS;AACd,WAAKA,SAAU;AACf;;IAGF,MAAM,SAAuB;KAC3B;KACA,WAAW;KACZ;IAED,MAAM,kBAAkB,MAAM,QAAQ,UAAU,OAAO,OACrD,sBAAsB,MAAM,QAAQ,cAAc,OAAO;AAE3D,QAAI,mBAAmB,qBAAqB;AAC1C,WAAKA,QAAS;AACd,WAAKA,SAAU,MAAM,OAAO,OAAO;;;;AAKzC,SAAO;;;AAIX,SAAS,YAAY,MAAqB;AACxC,QAAO,gBAAgB;;AAGzB,SAAS,aAAa,QAAiC;AACrD,MAAK,MAAM,QAAQ,OAAO,WACxB,KAAI,YAAY,KAAK,CAAE,QAAO;AAGhC,MAAK,MAAM,QAAQ,OAAO,aACxB,KAAI,YAAY,KAAK,CAAE,QAAO;AAGhC,QAAO"}

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

@@ -1,5 +1,5 @@
-import { PlayerContext } from "../player/context.js";
 import { MediaElementConstructor } from "../ui/media-element.js";
+import { PlayerContext } from "../player/context.js";
 import { PlayerProviderConstructor } from "./types.js";
 import { PlayerStore } from "@videojs/core/dom";
 

package/dist/dev/store/types.d.ts

@@ -3,8 +3,6 @@ import { PlayerStore } from "@videojs/core/dom";
 import { Constructor } from "@videojs/utils/types";
 
 //#region src/store/types.d.ts
-interface PlayerElement<Store extends PlayerStore> extends MediaElement, PlayerProvider<Store> {}
-interface PlayerElementConstructor<Store extends PlayerStore> extends Constructor<PlayerElement<Store>> {}
 interface PlayerProvider<Store extends PlayerStore> extends MediaElement {
   readonly store: Store;
 }
@@ -14,5 +12,5 @@ interface PlayerConsumer<Store extends PlayerStore> extends MediaElement {
 }
 interface PlayerConsumerConstructor<Store extends PlayerStore> extends Constructor<PlayerConsumer<Store>> {}
 //#endregion
-export { PlayerConsumer, PlayerConsumerConstructor, PlayerElement, PlayerElementConstructor, PlayerProvider, PlayerProviderConstructor };
+export { PlayerConsumer, PlayerConsumerConstructor, PlayerProvider, PlayerProviderConstructor };
 //# sourceMappingURL=types.d.ts.map

package/dist/dev/store/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","names":[],"sources":["../../../src/store/types.ts"],"mappings":";;;;;UAQiB,aAAA,eAA4B,WAAA,UAAqB,YAAA,EAAc,cAAA,CAAe,KAAA;AAAA,UAE9E,wBAAA,eAAuC,WAAA,UAAqB,WAAA,CAAY,aAAA,CAAc,KAAA;AAAA,UAMtF,cAAA,eAA6B,WAAA,UAAqB,YAAA;EAAA,SACxD,KAAA,EAAO,KAAA;AAAA;AAAA,UAGD,yBAAA,eAAwC,WAAA,UAAqB,WAAA,CAAY,cAAA,CAAe,KAAA;AAAA,UAMxF,cAAA,eAA6B,WAAA,UAAqB,YAAA;EAAA,SACxD,KAAA,EAAO,KAAA;AAAA;AAAA,UAGD,yBAAA,eAAwC,WAAA,UAAqB,WAAA,CAAY,cAAA,CAAe,KAAA"}
+{"version":3,"file":"types.d.ts","names":[],"sources":["../../../src/store/types.ts"],"mappings":";;;;;UAQiB,cAAA,eAA6B,WAAA,UAAqB,YAAA;EAAA,SACxD,KAAA,EAAO,KAAA;AAAA;AAAA,UAGD,yBAAA,eAAwC,WAAA,UAAqB,WAAA,CAAY,cAAA,CAAe,KAAA;AAAA,UAMxF,cAAA,eAA6B,WAAA,UAAqB,YAAA;EAAA,SACxD,KAAA,EAAO,KAAA;AAAA;AAAA,UAGD,yBAAA,eAAwC,WAAA,UAAqB,WAAA,CAAY,cAAA,CAAe,KAAA"}

package/dist/dev/ui/buffering-indicator/buffering-indicator-element.js

@@ -5,7 +5,7 @@ import { applyStateDataAttrs, logMissingFeature, selectPlayback } from "@videojs
 import { BufferingIndicatorCore, BufferingIndicatorDataAttrs } from "@videojs/core";
 
 //#region src/ui/buffering-indicator/buffering-indicator-element.ts
-var BufferingIndicatorElement = class BufferingIndicatorElement extends MediaElement {
+var BufferingIndicatorElement = class extends MediaElement {
 	constructor(..._args) {
 		super(..._args);
 		this.delay = BufferingIndicatorCore.defaultProps.delay;
@@ -23,7 +23,7 @@ var BufferingIndicatorElement = class BufferingIndicatorElement extends MediaEle
 		super.connectedCallback();
 		this.#disconnect = new AbortController();
 		this.#core.state.subscribe(() => this.requestUpdate(), { signal: this.#disconnect.signal });
-		if (!this.#state.value) logMissingFeature(BufferingIndicatorElement.tagName, "playback");
+		if (!this.#state.value) logMissingFeature(this.localName, this.#state.displayName);
 	}
 	disconnectedCallback() {
 		super.disconnectedCallback();

package/dist/dev/ui/buffering-indicator/buffering-indicator-element.js.map

@@ -1 +1 @@
-{"version":3,"file":"buffering-indicator-element.js","names":["#core","#state","#disconnect"],"sources":["../../../../src/ui/buffering-indicator/buffering-indicator-element.ts"],"sourcesContent":["import { BufferingIndicatorCore, BufferingIndicatorDataAttrs } from '@videojs/core';\nimport { applyStateDataAttrs, logMissingFeature, selectPlayback } 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 BufferingIndicatorElement extends MediaElement {\n  static readonly tagName = 'media-buffering-indicator';\n\n  static override properties = {\n    delay: { type: Number },\n  } satisfies PropertyDeclarationMap<keyof BufferingIndicatorCore.Props>;\n\n  delay = BufferingIndicatorCore.defaultProps.delay;\n\n  readonly #core = new BufferingIndicatorCore();\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    this.#core.state.subscribe(() => this.requestUpdate(), {\n      signal: this.#disconnect.signal,\n    });\n\n    if (__DEV__ && !this.#state.value) {\n      logMissingFeature(BufferingIndicatorElement.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    this.#core.update(media);\n    applyStateDataAttrs(this, this.#core.state.current, BufferingIndicatorDataAttrs);\n  }\n}\n"],"mappings":";;;;;;;AAQA,IAAa,4BAAb,MAAa,kCAAkC,aAAa;;;eAOlD,uBAAuB,aAAa;;;iBANlB;;;oBAEG,EAC3B,OAAO,EAAE,MAAM,QAAQ,EACxB;;CAID,CAASA,OAAQ,IAAI,wBAAwB;CAC7C,CAASC,QAAS,IAAI,iBAAiB,MAAM,eAAe,eAAe;CAE3E,cAAsC;CAEtC,AAAS,oBAA0B;AACjC,QAAM,mBAAmB;AAEzB,QAAKC,aAAc,IAAI,iBAAiB;AAExC,QAAKF,KAAM,MAAM,gBAAgB,KAAK,eAAe,EAAE,EACrD,QAAQ,MAAKE,WAAY,QAC1B,CAAC;AAEF,MAAe,CAAC,MAAKD,MAAO,MAC1B,mBAAkB,0BAA0B,SAAS,WAAW;;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;AAEZ,QAAKD,KAAM,OAAO,MAAM;AACxB,sBAAoB,MAAM,MAAKA,KAAM,MAAM,SAAS,4BAA4B"}
+{"version":3,"file":"buffering-indicator-element.js","names":["#core","#state","#disconnect"],"sources":["../../../../src/ui/buffering-indicator/buffering-indicator-element.ts"],"sourcesContent":["import { BufferingIndicatorCore, BufferingIndicatorDataAttrs } from '@videojs/core';\nimport { applyStateDataAttrs, logMissingFeature, selectPlayback } 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 BufferingIndicatorElement extends MediaElement {\n  static readonly tagName = 'media-buffering-indicator';\n\n  static override properties = {\n    delay: { type: Number },\n  } satisfies PropertyDeclarationMap<keyof BufferingIndicatorCore.Props>;\n\n  delay = BufferingIndicatorCore.defaultProps.delay;\n\n  readonly #core = new BufferingIndicatorCore();\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    this.#core.state.subscribe(() => this.requestUpdate(), {\n      signal: this.#disconnect.signal,\n    });\n\n    if (__DEV__ && !this.#state.value) {\n      logMissingFeature(this.localName, this.#state.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.#state.value;\n\n    if (!media) return;\n\n    this.#core.update(media);\n    applyStateDataAttrs(this, this.#core.state.current, BufferingIndicatorDataAttrs);\n  }\n}\n"],"mappings":";;;;;;;AAQA,IAAa,4BAAb,cAA+C,aAAa;;;eAOlD,uBAAuB,aAAa;;;iBANlB;;;oBAEG,EAC3B,OAAO,EAAE,MAAM,QAAQ,EACxB;;CAID,CAASA,OAAQ,IAAI,wBAAwB;CAC7C,CAASC,QAAS,IAAI,iBAAiB,MAAM,eAAe,eAAe;CAE3E,cAAsC;CAEtC,AAAS,oBAA0B;AACjC,QAAM,mBAAmB;AAEzB,QAAKC,aAAc,IAAI,iBAAiB;AAExC,QAAKF,KAAM,MAAM,gBAAgB,KAAK,eAAe,EAAE,EACrD,QAAQ,MAAKE,WAAY,QAC1B,CAAC;AAEF,MAAe,CAAC,MAAKD,MAAO,MAC1B,mBAAkB,KAAK,WAAW,MAAKA,MAAO,YAAa;;CAI/D,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;AAEZ,QAAKD,KAAM,OAAO,MAAM;AACxB,sBAAoB,MAAM,MAAKA,KAAM,MAAM,SAAS,4BAA4B"}

package/dist/dev/ui/context-part-element.d.ts

@@ -0,0 +1,32 @@
+import { MediaElement } from "./media-element.js";
+import { PropertyValues } from "@videojs/element";
+import { StateAttrMap } from "@videojs/core";
+
+//#region src/ui/context-part-element.d.ts
+/** Shape that compound context values must satisfy for parts to consume. */
+interface PartContextValue<State extends object> {
+  state: State;
+  stateAttrMap: StateAttrMap<State>;
+}
+/**
+ * Abstract base for compound-component part elements that consume a parent
+ * context and apply data attributes from `ctx.state` + `ctx.stateAttrMap`.
+ *
+ * Subclasses only need to declare the `consumer` property:
+ *
+ * ```ts
+ * export class SliderTrackElement extends ContextPartElement<SliderState> {
+ *   static readonly tagName = 'media-slider-track';
+ *   protected readonly consumer = new ContextConsumer(this, { context: sliderContext, subscribe: true });
+ * }
+ * ```
+ */
+declare abstract class ContextPartElement<State extends object> extends MediaElement {
+  protected abstract readonly consumer: {
+    value?: PartContextValue<State> | undefined;
+  };
+  protected update(_changed: PropertyValues): void;
+}
+//#endregion
+export { ContextPartElement };
+//# sourceMappingURL=context-part-element.d.ts.map

package/dist/dev/ui/context-part-element.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"context-part-element.d.ts","names":[],"sources":["../../../src/ui/context-part-element.ts"],"mappings":";;;;;;UAOiB,gBAAA;EACf,KAAA,EAAO,KAAA;EACP,YAAA,EAAc,YAAA,CAAa,KAAA;AAAA;;;;;;;;;;;;;;uBAgBP,kBAAA,+BAAiD,YAAA;EAAA,4BACzC,QAAA;IAAY,KAAA,GAAQ,gBAAA,CAAiB,KAAA;EAAA;EAAA,UAE9C,MAAA,CAAO,QAAA,EAAU,cAAA;AAAA"}

package/dist/dev/ui/context-part-element.js

@@ -0,0 +1,28 @@
+import { MediaElement } from "./media-element.js";
+import { applyStateDataAttrs } from "@videojs/core/dom";
+
+//#region src/ui/context-part-element.ts
+/**
+* Abstract base for compound-component part elements that consume a parent
+* context and apply data attributes from `ctx.state` + `ctx.stateAttrMap`.
+*
+* Subclasses only need to declare the `consumer` property:
+*
+* ```ts
+* export class SliderTrackElement extends ContextPartElement<SliderState> {
+*   static readonly tagName = 'media-slider-track';
+*   protected readonly consumer = new ContextConsumer(this, { context: sliderContext, subscribe: true });
+* }
+* ```
+*/
+var ContextPartElement = class extends MediaElement {
+	update(_changed) {
+		super.update(_changed);
+		const ctx = this.consumer.value;
+		if (ctx) applyStateDataAttrs(this, ctx.state, ctx.stateAttrMap);
+	}
+};
+
+//#endregion
+export { ContextPartElement };
+//# sourceMappingURL=context-part-element.js.map

package/dist/dev/ui/context-part-element.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"context-part-element.js","names":[],"sources":["../../../src/ui/context-part-element.ts"],"sourcesContent":["import type { StateAttrMap } from '@videojs/core';\nimport { applyStateDataAttrs } from '@videojs/core/dom';\nimport type { PropertyValues } from '@videojs/element';\n\nimport { MediaElement } from './media-element';\n\n/** Shape that compound context values must satisfy for parts to consume. */\nexport interface PartContextValue<State extends object> {\n  state: State;\n  stateAttrMap: StateAttrMap<State>;\n}\n\n/**\n * Abstract base for compound-component part elements that consume a parent\n * context and apply data attributes from `ctx.state` + `ctx.stateAttrMap`.\n *\n * Subclasses only need to declare the `consumer` property:\n *\n * ```ts\n * export class SliderTrackElement extends ContextPartElement<SliderState> {\n *   static readonly tagName = 'media-slider-track';\n *   protected readonly consumer = new ContextConsumer(this, { context: sliderContext, subscribe: true });\n * }\n * ```\n */\nexport abstract class ContextPartElement<State extends object> extends MediaElement {\n  protected abstract readonly consumer: { value?: PartContextValue<State> | undefined };\n\n  protected override update(_changed: PropertyValues): void {\n    super.update(_changed);\n    const ctx = this.consumer.value;\n    if (ctx) applyStateDataAttrs(this, ctx.state, ctx.stateAttrMap);\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAyBA,IAAsB,qBAAtB,cAAuE,aAAa;CAGlF,AAAmB,OAAO,UAAgC;AACxD,QAAM,OAAO,SAAS;EACtB,MAAM,MAAM,KAAK,SAAS;AAC1B,MAAI,IAAK,qBAAoB,MAAM,IAAI,OAAO,IAAI,aAAa"}

package/dist/dev/ui/controls/context.d.ts

@@ -0,0 +1,10 @@
+import { ControlsState, StateAttrMap } from "@videojs/core";
+
+//#region src/ui/controls/context.d.ts
+interface ControlsContextValue {
+  state: ControlsState;
+  stateAttrMap: StateAttrMap<ControlsState>;
+}
+//#endregion
+export { ControlsContextValue };
+//# sourceMappingURL=context.d.ts.map

package/dist/dev/ui/controls/context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.d.ts","names":[],"sources":["../../../../src/ui/controls/context.ts"],"mappings":";;;UAGiB,oBAAA;EACf,KAAA,EAAO,aAAA;EACP,YAAA,EAAc,YAAA,CAAa,aAAA;AAAA"}

package/dist/dev/ui/controls/context.js

@@ -0,0 +1,9 @@
+import { createContext } from "@videojs/element/context";
+
+//#region src/ui/controls/context.ts
+const CONTROLS_CONTEXT_KEY = Symbol("@videojs/controls");
+const controlsContext = createContext(CONTROLS_CONTEXT_KEY);
+
+//#endregion
+export { controlsContext };
+//# sourceMappingURL=context.js.map

package/dist/dev/ui/controls/context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.js","names":[],"sources":["../../../../src/ui/controls/context.ts"],"sourcesContent":["import type { ControlsState, StateAttrMap } from '@videojs/core';\nimport { createContext } from '@videojs/element/context';\n\nexport interface ControlsContextValue {\n  state: ControlsState;\n  stateAttrMap: StateAttrMap<ControlsState>;\n}\n\nconst CONTROLS_CONTEXT_KEY = Symbol('@videojs/controls');\n\nexport const controlsContext = createContext<ControlsContextValue>(CONTROLS_CONTEXT_KEY);\n"],"mappings":";;;AAQA,MAAM,uBAAuB,OAAO,oBAAoB;AAExD,MAAa,kBAAkB,cAAoC,qBAAqB"}

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

@@ -6,7 +6,7 @@ declare class ControlsElement extends MediaElement {
   #private;
   static readonly tagName = "media-controls";
   connectedCallback(): void;
-  protected update(changed: PropertyValues): void;
+  protected update(_changed: PropertyValues): void;
 }
 //#endregion
 export { ControlsElement };

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

@@ -1 +1 @@
-{"version":3,"file":"controls-element.d.ts","names":[],"sources":["../../../../src/ui/controls/controls-element.ts"],"mappings":";;;;cAQa,eAAA,SAAwB,YAAA;EAAA;kBACnB,OAAA;EAKP,iBAAA,CAAA;EAAA,UAQU,MAAA,CAAO,OAAA,EAAS,cAAA;AAAA"}
+{"version":3,"file":"controls-element.d.ts","names":[],"sources":["../../../../src/ui/controls/controls-element.ts"],"mappings":";;;;cAUa,eAAA,SAAwB,YAAA;EAAA;kBACnB,OAAA;EAMP,iBAAA,CAAA;EAAA,UAQU,MAAA,CAAO,QAAA,EAAU,cAAA;AAAA"}

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

@@ -1,25 +1,34 @@
 import { playerContext } from "../../player/context.js";
 import { MediaElement } from "../media-element.js";
 import { PlayerController } from "../../player/player-controller.js";
+import { controlsContext } from "./context.js";
 import { applyStateDataAttrs, logMissingFeature, selectControls } from "@videojs/core/dom";
+import { ContextProvider } from "@videojs/element/context";
 import { ControlsCore, ControlsDataAttrs } from "@videojs/core";
 
 //#region src/ui/controls/controls-element.ts
-var ControlsElement = class ControlsElement extends MediaElement {
+var ControlsElement = class extends MediaElement {
 	static {
 		this.tagName = "media-controls";
 	}
 	#core = new ControlsCore();
-	#state = new PlayerController(this, playerContext, selectControls);
+	#mediaState = new PlayerController(this, playerContext, selectControls);
+	#provider = new ContextProvider(this, { context: controlsContext });
 	connectedCallback() {
 		super.connectedCallback();
-		if (!this.#state.value) logMissingFeature(ControlsElement.tagName, "controls");
+		if (!this.#mediaState.value && this.#mediaState.displayName) logMissingFeature(this.localName, this.#mediaState.displayName);
 	}
-	update(changed) {
-		super.update(changed);
-		const controls = this.#state.value;
-		if (!controls) return;
-		applyStateDataAttrs(this, this.#core.getState(controls), ControlsDataAttrs);
+	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, ControlsDataAttrs);
+		this.#provider.setValue({
+			state,
+			stateAttrMap: ControlsDataAttrs
+		});
 	}
 };
 

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

@@ -1 +1 @@
-{"version":3,"file":"controls-element.js","names":["#core","#state"],"sources":["../../../../src/ui/controls/controls-element.ts"],"sourcesContent":["import { ControlsCore, ControlsDataAttrs } from '@videojs/core';\nimport { applyStateDataAttrs, logMissingFeature, selectControls } from '@videojs/core/dom';\nimport type { PropertyValues } from '@videojs/element';\n\nimport { playerContext } from '../../player/context';\nimport { PlayerController } from '../../player/player-controller';\nimport { MediaElement } from '../media-element';\n\nexport class ControlsElement extends MediaElement {\n  static readonly tagName = 'media-controls';\n\n  readonly #core = new ControlsCore();\n  readonly #state = new PlayerController(this, playerContext, selectControls);\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n\n    if (__DEV__ && !this.#state.value) {\n      logMissingFeature(ControlsElement.tagName, 'controls');\n    }\n  }\n\n  protected override update(changed: PropertyValues): void {\n    super.update(changed);\n\n    const controls = this.#state.value;\n\n    if (!controls) {\n      return;\n    }\n\n    applyStateDataAttrs(this, this.#core.getState(controls), ControlsDataAttrs);\n  }\n}\n"],"mappings":";;;;;;;AAQA,IAAa,kBAAb,MAAa,wBAAwB,aAAa;;iBACtB;;CAE1B,CAASA,OAAQ,IAAI,cAAc;CACnC,CAASC,QAAS,IAAI,iBAAiB,MAAM,eAAe,eAAe;CAE3E,AAAS,oBAA0B;AACjC,QAAM,mBAAmB;AAEzB,MAAe,CAAC,MAAKA,MAAO,MAC1B,mBAAkB,gBAAgB,SAAS,WAAW;;CAI1D,AAAmB,OAAO,SAA+B;AACvD,QAAM,OAAO,QAAQ;EAErB,MAAM,WAAW,MAAKA,MAAO;AAE7B,MAAI,CAAC,SACH;AAGF,sBAAoB,MAAM,MAAKD,KAAM,SAAS,SAAS,EAAE,kBAAkB"}
+{"version":3,"file":"controls-element.js","names":["#core","#mediaState","#provider"],"sources":["../../../../src/ui/controls/controls-element.ts"],"sourcesContent":["import { ControlsCore, ControlsDataAttrs } from '@videojs/core';\nimport { applyStateDataAttrs, logMissingFeature, selectControls } from '@videojs/core/dom';\nimport type { PropertyValues } from '@videojs/element';\nimport { ContextProvider } from '@videojs/element/context';\n\nimport { playerContext } from '../../player/context';\nimport { PlayerController } from '../../player/player-controller';\nimport { MediaElement } from '../media-element';\nimport { controlsContext } from './context';\n\nexport class ControlsElement extends MediaElement {\n  static readonly tagName = 'media-controls';\n\n  readonly #core = new ControlsCore();\n  readonly #mediaState = new PlayerController(this, playerContext, selectControls);\n  readonly #provider = new ContextProvider(this, { context: controlsContext });\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    if (!media) return;\n\n    this.#core.setMedia(media);\n    const state = this.#core.getState();\n\n    applyStateDataAttrs(this, state, ControlsDataAttrs);\n\n    this.#provider.setValue({\n      state,\n      stateAttrMap: ControlsDataAttrs,\n    });\n  }\n}\n"],"mappings":";;;;;;;;;AAUA,IAAa,kBAAb,cAAqC,aAAa;;iBACtB;;CAE1B,CAASA,OAAQ,IAAI,cAAc;CACnC,CAASC,aAAc,IAAI,iBAAiB,MAAM,eAAe,eAAe;CAChF,CAASC,WAAY,IAAI,gBAAgB,MAAM,EAAE,SAAS,iBAAiB,CAAC;CAE5E,AAAS,oBAA0B;AACjC,QAAM,mBAAmB;AAEzB,MAAe,CAAC,MAAKD,WAAY,SAAS,MAAKA,WAAY,YACzD,mBAAkB,KAAK,WAAW,MAAKA,WAAY,YAAY;;CAInE,AAAmB,OAAO,UAAgC;AACxD,QAAM,OAAO,SAAS;EAEtB,MAAM,QAAQ,MAAKA,WAAY;AAC/B,MAAI,CAAC,MAAO;AAEZ,QAAKD,KAAM,SAAS,MAAM;EAC1B,MAAM,QAAQ,MAAKA,KAAM,UAAU;AAEnC,sBAAoB,MAAM,OAAO,kBAAkB;AAEnD,QAAKE,SAAU,SAAS;GACtB;GACA,cAAc;GACf,CAAC"}

package/dist/dev/ui/controls/controls-group-element.d.ts

@@ -1,8 +1,14 @@
-import { MediaElement } from "../media-element.js";
+import { ControlsContextValue } from "./context.js";
+import { ContextPartElement } from "../context-part-element.js";
+import { ContextConsumer } from "@videojs/element/context";
+import { ControlsState } from "@videojs/core";
 
 //#region src/ui/controls/controls-group-element.d.ts
-declare class ControlsGroupElement extends MediaElement {
+declare class ControlsGroupElement extends ContextPartElement<ControlsState> {
   static readonly tagName = "media-controls-group";
+  protected readonly consumer: ContextConsumer<{
+    __context__: ControlsContextValue;
+  }, this>;
   connectedCallback(): void;
 }
 //#endregion

package/dist/dev/ui/controls/controls-group-element.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"controls-group-element.d.ts","names":[],"sources":["../../../../src/ui/controls/controls-group-element.ts"],"mappings":";;;cAEa,oBAAA,SAA6B,YAAA;EAAA,gBACxB,OAAA;EAEP,iBAAA,CAAA;AAAA"}
+{"version":3,"file":"controls-group-element.d.ts","names":[],"sources":["../../../../src/ui/controls/controls-group-element.ts"],"mappings":";;;;;;cAMa,oBAAA,SAA6B,kBAAA,CAAmB,aAAA;EAAA,gBAC3C,OAAA;EAAA,mBAEG,QAAA,EAAQ,eAAA;iBAH6C,oBAAA;EAAA;EAK/D,iBAAA,CAAA;AAAA"}

package/dist/dev/ui/controls/controls-group-element.js

@@ -1,7 +1,16 @@
-import { MediaElement } from "../media-element.js";
+import { controlsContext } from "./context.js";
+import { ContextPartElement } from "../context-part-element.js";
+import { ContextConsumer } from "@videojs/element/context";
 
 //#region src/ui/controls/controls-group-element.ts
-var ControlsGroupElement = class extends MediaElement {
+var ControlsGroupElement = class extends ContextPartElement {
+	constructor(..._args) {
+		super(..._args);
+		this.consumer = new ContextConsumer(this, {
+			context: controlsContext,
+			subscribe: true
+		});
+	}
 	static {
 		this.tagName = "media-controls-group";
 	}

package/dist/dev/ui/controls/controls-group-element.js.map

@@ -1 +1 @@
-{"version":3,"file":"controls-group-element.js","names":[],"sources":["../../../../src/ui/controls/controls-group-element.ts"],"sourcesContent":["import { MediaElement } from '../media-element';\n\nexport class ControlsGroupElement extends MediaElement {\n  static readonly tagName = 'media-controls-group';\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n\n    if (this.hasAttribute('aria-label') || this.hasAttribute('aria-labelledby')) {\n      this.setAttribute('role', 'group');\n    }\n  }\n}\n"],"mappings":";;;AAEA,IAAa,uBAAb,cAA0C,aAAa;;iBAC3B;;CAE1B,AAAS,oBAA0B;AACjC,QAAM,mBAAmB;AAEzB,MAAI,KAAK,aAAa,aAAa,IAAI,KAAK,aAAa,kBAAkB,CACzE,MAAK,aAAa,QAAQ,QAAQ"}
+{"version":3,"file":"controls-group-element.js","names":[],"sources":["../../../../src/ui/controls/controls-group-element.ts"],"sourcesContent":["import type { ControlsState } from '@videojs/core';\nimport { ContextConsumer } from '@videojs/element/context';\n\nimport { ContextPartElement } from '../context-part-element';\nimport { controlsContext } from './context';\n\nexport class ControlsGroupElement extends ContextPartElement<ControlsState> {\n  static readonly tagName = 'media-controls-group';\n\n  protected readonly consumer = new ContextConsumer(this, { context: controlsContext, subscribe: true });\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n\n    if (this.hasAttribute('aria-label') || this.hasAttribute('aria-labelledby')) {\n      this.setAttribute('role', 'group');\n    }\n  }\n}\n"],"mappings":";;;;;AAMA,IAAa,uBAAb,cAA0C,mBAAkC;;;kBAG5C,IAAI,gBAAgB,MAAM;GAAE,SAAS;GAAiB,WAAW;GAAM,CAAC;;;iBAF5E;;CAI1B,AAAS,oBAA0B;AACjC,QAAM,mBAAmB;AAEzB,MAAI,KAAK,aAAa,aAAa,IAAI,KAAK,aAAa,kBAAkB,CACzE,MAAK,aAAa,QAAQ,QAAQ"}

package/dist/dev/ui/fullscreen-button/fullscreen-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 { FullscreenButtonCore, MediaFullscreenState } from "@videojs/core";
 
 //#region src/ui/fullscreen-button/fullscreen-button-element.d.ts
-declare class FullscreenButtonElement extends MediaElement {
-  #private;
+declare class FullscreenButtonElement extends MediaButtonElement<FullscreenButtonCore> {
   static readonly tagName = "media-fullscreen-button";
-  static properties: {
-    label: {
-      type: StringConstructor;
-    };
-    disabled: {
-      type: BooleanConstructor;
-    };
+  protected readonly core: FullscreenButtonCore;
+  protected readonly stateAttrMap: {
+    readonly fullscreen: "data-fullscreen";
+    readonly availability: "data-availability";
   };
-  label: string | ((state: _videojs_core0.FullscreenButtonState) => 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, MediaFullscreenState | undefined>;
+  protected activate(state: MediaFullscreenState): void;
 }
 //#endregion
 export { FullscreenButtonElement };

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":";;;;;cAca,uBAAA,SAAgC,YAAA;EAAA;kBAC3B,OAAA;EAAA,OAEA,UAAA;;;;;;;;EAKhB,KAAA,aAAK,KAAA,iBAAA,qBAAA;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":"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"}

package/dist/dev/ui/fullscreen-button/fullscreen-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, selectFullscreen } from "@videojs/core/dom";
+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 FullscreenButtonElement extends MediaElement {
+var FullscreenButtonElement = class extends MediaButtonElement {
 	constructor(..._args) {
 		super(..._args);
-		this.label = FullscreenButtonCore.defaultProps.label;
-		this.disabled = FullscreenButtonCore.defaultProps.disabled;
+		this.core = new FullscreenButtonCore();
+		this.stateAttrMap = FullscreenButtonDataAttrs;
+		this.mediaState = new PlayerController(this, playerContext, selectFullscreen);
 	}
 	static {
 		this.tagName = "media-fullscreen-button";
 	}
-	static {
-		this.properties = {
-			label: { type: String },
-			disabled: { type: Boolean }
-		};
-	}
-	#core = new FullscreenButtonCore();
-	#state = new PlayerController(this, playerContext, selectFullscreen);
-	#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(FullscreenButtonElement.tagName, "fullscreen");
-	}
-	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, FullscreenButtonDataAttrs);
+	activate(state) {
+		this.core.toggle(state);
 	}
 };
 

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"}