@videojs/html 0.1.0-preview.9 → 10.0.0-alpha.4

package/dist/default/player/player-mixin.js

@@ -0,0 +1,23 @@
+import { createContainerMixin } from "../store/container-mixin.js";
+import { createProviderMixin } from "../store/provider-mixin.js";
+
+//#region src/player/player-mixin.ts
+/**
+* Creates a mixin that combines provider and container functionality.
+*
+* Use for a complete player element that owns the store and attaches media.
+*
+* @param context - Player context for descendant consumption.
+* @param factory - Factory function that creates a store instance.
+*/
+function createPlayerMixin(context, factory) {
+	const ProviderMixin = createProviderMixin(context, factory);
+	const ContainerMixin = createContainerMixin(context);
+	return (BaseClass) => {
+		return ProviderMixin(ContainerMixin(BaseClass));
+	};
+}
+
+//#endregion
+export { createPlayerMixin };
+//# sourceMappingURL=player-mixin.js.map

package/dist/default/player/player-mixin.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"player-mixin.js","names":[],"sources":["../../../src/player/player-mixin.ts"],"sourcesContent":["import type { PlayerStore } from '@videojs/core/dom';\nimport type { MediaElementConstructor } from '@/ui/media-element';\nimport { createContainerMixin } from '../store/container-mixin';\nimport { createProviderMixin } from '../store/provider-mixin';\nimport type { PlayerProviderConstructor } from '../store/types';\nimport type { PlayerContext } from './context';\n\ntype Result<Class extends MediaElementConstructor, Store extends PlayerStore> = Class &\n  PlayerProviderConstructor<Store>;\n\nexport type PlayerMixin<Store extends PlayerStore> = <Class extends MediaElementConstructor>(\n  BaseClass: Class\n) => Result<Class, Store>;\n\n/**\n * Creates a mixin that combines provider and container functionality.\n *\n * Use for a complete player element that owns the store and attaches media.\n *\n * @param context - Player context for descendant consumption.\n * @param factory - Factory function that creates a store instance.\n */\nexport function createPlayerMixin<Store extends PlayerStore>(\n  context: PlayerContext<Store>,\n  factory: () => Store\n): PlayerMixin<Store> {\n  const ProviderMixin = createProviderMixin<Store>(context, factory);\n  const ContainerMixin = createContainerMixin<Store>(context);\n\n  return <Class extends MediaElementConstructor>(BaseClass: Class) => {\n    return ProviderMixin(ContainerMixin(BaseClass)) as unknown as Result<Class, Store>;\n  };\n}\n"],"mappings":";;;;;;;;;;;;AAsBA,SAAgB,kBACd,SACA,SACoB;CACpB,MAAM,gBAAgB,oBAA2B,SAAS,QAAQ;CAClE,MAAM,iBAAiB,qBAA4B,QAAQ;AAE3D,SAA+C,cAAqB;AAClE,SAAO,cAAc,eAAe,UAAU,CAAC"}

package/dist/default/store/container-mixin.js

@@ -0,0 +1,74 @@
+import { ContextConsumer } from "@videojs/element/context";
+import { noop } from "@videojs/utils/function";
+
+//#region src/store/container-mixin.ts
+/**
+* Create a mixin that consumes player context and auto-attaches media elements.
+*
+* @param context - Player context to consume from an ancestor provider.
+*/
+function createContainerMixin(context) {
+	return (BaseClass) => {
+		class PlayerContainerElement extends BaseClass {
+			#detach = noop;
+			#observer = null;
+			#consumer = new ContextConsumer(this, {
+				context,
+				callback: () => this.#attachMedia(),
+				subscribe: true
+			});
+			get store() {
+				return this.#consumer.value ?? null;
+			}
+			connectedCallback() {
+				super.connectedCallback();
+				this.#observer = new MutationObserver((records) => {
+					if (records.some(hasMediaNode)) this.#attachMedia();
+				});
+				this.#observer.observe(this, {
+					childList: true,
+					subtree: true
+				});
+				this.#attachMedia();
+			}
+			disconnectedCallback() {
+				super.disconnectedCallback();
+				this.#observer?.disconnect();
+				this.#observer = null;
+				this.#detach();
+			}
+			#attachMedia() {
+				const store = this.#consumer.value ?? this.store;
+				if (!store) return;
+				const media = this.querySelector("video, audio");
+				if (!media) {
+					this.#detach();
+					this.#detach = noop;
+					return;
+				}
+				const target = {
+					media,
+					container: this
+				};
+				const hasMediaChanged = store.target?.media !== target.media, hasContainerChanged = store.target?.container !== target.container;
+				if (hasMediaChanged || hasContainerChanged) {
+					this.#detach();
+					this.#detach = store.attach(target);
+				}
+			}
+		}
+		return PlayerContainerElement;
+	};
+}
+function isMediaNode(node) {
+	return node instanceof HTMLMediaElement;
+}
+function hasMediaNode(record) {
+	for (const node of record.addedNodes) if (isMediaNode(node)) return true;
+	for (const node of record.removedNodes) if (isMediaNode(node)) return true;
+	return false;
+}
+
+//#endregion
+export { createContainerMixin };
+//# sourceMappingURL=container-mixin.js.map

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

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

package/dist/default/store/provider-mixin.js

@@ -0,0 +1,39 @@
+import { ContextProvider } from "@videojs/element/context";
+import { isNull } from "@videojs/utils/predicate";
+
+//#region src/store/provider-mixin.ts
+/**
+* Create a mixin that provides player context to descendant elements.
+*
+* @param context - Player context to provide to descendants.
+* @param factory - Factory function that creates a store instance.
+*/
+function createProviderMixin(context, factory) {
+	return (BaseClass) => {
+		class PlayerProviderElement extends BaseClass {
+			#store = factory();
+			#provider = new ContextProvider(this, {
+				context,
+				initialValue: this.store
+			});
+			get store() {
+				if (isNull(this.#store)) this.#store = factory();
+				return this.#store;
+			}
+			connectedCallback() {
+				super.connectedCallback();
+				this.#provider.setValue(this.store);
+			}
+			disconnectedCallback() {
+				super.disconnectedCallback();
+				this.#store?.destroy();
+				this.#store = null;
+			}
+		}
+		return PlayerProviderElement;
+	};
+}
+
+//#endregion
+export { createProviderMixin };
+//# sourceMappingURL=provider-mixin.js.map

package/dist/default/store/provider-mixin.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"provider-mixin.js","names":["#store","#provider"],"sources":["../../../src/store/provider-mixin.ts"],"sourcesContent":["import type { PlayerStore } from '@videojs/core/dom';\nimport { ContextProvider } from '@videojs/element/context';\nimport { isNull } from '@videojs/utils/predicate';\nimport type { MediaElementConstructor } from '@/ui/media-element';\nimport type { PlayerContext } from '../player/context';\nimport type { PlayerProvider, PlayerProviderConstructor } from './types';\n\nexport type ProviderMixin<Store extends PlayerStore> = <Class extends MediaElementConstructor>(\n  BaseClass: Class\n) => Class & PlayerProviderConstructor<Store>;\n\n/**\n * Create a mixin that provides player context to descendant elements.\n *\n * @param context - Player context to provide to descendants.\n * @param factory - Factory function that creates a store instance.\n */\nexport function createProviderMixin<Store extends PlayerStore>(\n  context: PlayerContext<Store>,\n  factory: () => Store\n): ProviderMixin<Store> {\n  return <Class extends MediaElementConstructor>(BaseClass: Class) => {\n    class PlayerProviderElement extends BaseClass implements PlayerProvider<Store> {\n      #store: Store | null = factory();\n\n      #provider = new ContextProvider(this, {\n        context,\n        initialValue: this.store,\n      });\n\n      get store(): Store {\n        if (isNull(this.#store)) {\n          this.#store = factory();\n        }\n\n        return this.#store;\n      }\n\n      override connectedCallback() {\n        super.connectedCallback();\n        this.#provider.setValue(this.store);\n      }\n\n      override disconnectedCallback() {\n        super.disconnectedCallback();\n        this.#store?.destroy();\n        this.#store = null;\n      }\n    }\n\n    return PlayerProviderElement;\n  };\n}\n"],"mappings":";;;;;;;;;;AAiBA,SAAgB,oBACd,SACA,SACsB;AACtB,SAA+C,cAAqB;EAClE,MAAM,8BAA8B,UAA2C;GAC7E,SAAuB,SAAS;GAEhC,YAAY,IAAI,gBAAgB,MAAM;IACpC;IACA,cAAc,KAAK;IACpB,CAAC;GAEF,IAAI,QAAe;AACjB,QAAI,OAAO,MAAKA,MAAO,CACrB,OAAKA,QAAS,SAAS;AAGzB,WAAO,MAAKA;;GAGd,AAAS,oBAAoB;AAC3B,UAAM,mBAAmB;AACzB,UAAKC,SAAU,SAAS,KAAK,MAAM;;GAGrC,AAAS,uBAAuB;AAC9B,UAAM,sBAAsB;AAC5B,UAAKD,OAAQ,SAAS;AACtB,UAAKA,QAAS;;;AAIlB,SAAO"}

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

@@ -0,0 +1,47 @@
+import { playerContext } from "../../player/context.js";
+import { MediaElement } from "../media-element.js";
+import { PlayerController } from "../../player/player-controller.js";
+import { applyStateDataAttrs, selectPlayback } from "@videojs/core/dom";
+import { BufferingIndicatorCore, BufferingIndicatorDataAttrs } from "@videojs/core";
+
+//#region src/ui/buffering-indicator/buffering-indicator-element.ts
+var BufferingIndicatorElement = class extends MediaElement {
+	constructor(..._args) {
+		super(..._args);
+		this.delay = BufferingIndicatorCore.defaultProps.delay;
+	}
+	static {
+		this.tagName = "media-buffering-indicator";
+	}
+	static {
+		this.properties = { delay: { type: Number } };
+	}
+	#core = new BufferingIndicatorCore();
+	#state = new PlayerController(this, playerContext, selectPlayback);
+	#disconnect = null;
+	connectedCallback() {
+		super.connectedCallback();
+		this.#disconnect = new AbortController();
+		this.#core.state.subscribe(() => this.requestUpdate(), { signal: this.#disconnect.signal });
+	}
+	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;
+		this.#core.update(media);
+		applyStateDataAttrs(this, this.#core.state.current, BufferingIndicatorDataAttrs);
+	}
+};
+
+//#endregion
+export { BufferingIndicatorElement };
+//# sourceMappingURL=buffering-indicator-element.js.map

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

@@ -0,0 +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,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;;CAOJ,AAAS,uBAA6B;AACpC,QAAM,sBAAsB;AAC5B,QAAKA,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/default/ui/controls/controls-element.js

@@ -0,0 +1,27 @@
+import { playerContext } from "../../player/context.js";
+import { MediaElement } from "../media-element.js";
+import { PlayerController } from "../../player/player-controller.js";
+import { applyStateDataAttrs, selectControls } from "@videojs/core/dom";
+import { ControlsCore, ControlsDataAttrs } from "@videojs/core";
+
+//#region src/ui/controls/controls-element.ts
+var ControlsElement = class extends MediaElement {
+	static {
+		this.tagName = "media-controls";
+	}
+	#core = new ControlsCore();
+	#state = new PlayerController(this, playerContext, selectControls);
+	connectedCallback() {
+		super.connectedCallback();
+	}
+	update(changed) {
+		super.update(changed);
+		const controls = this.#state.value;
+		if (!controls) return;
+		applyStateDataAttrs(this, this.#core.getState(controls), ControlsDataAttrs);
+	}
+};
+
+//#endregion
+export { ControlsElement };
+//# sourceMappingURL=controls-element.js.map

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

@@ -0,0 +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,cAAqC,aAAa;;iBACtB;;CAE1B,CAASA,OAAQ,IAAI,cAAc;CACnC,CAASC,QAAS,IAAI,iBAAiB,MAAM,eAAe,eAAe;CAE3E,AAAS,oBAA0B;AACjC,QAAM,mBAAmB;;CAO3B,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"}

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

@@ -0,0 +1,16 @@
+import { MediaElement } from "../media-element.js";
+
+//#region src/ui/controls/controls-group-element.ts
+var ControlsGroupElement = class extends MediaElement {
+	static {
+		this.tagName = "media-controls-group";
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		if (this.hasAttribute("aria-label") || this.hasAttribute("aria-labelledby")) this.setAttribute("role", "group");
+	}
+};
+
+//#endregion
+export { ControlsGroupElement };
+//# sourceMappingURL=controls-group-element.js.map

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

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

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

@@ -0,0 +1,56 @@
+import { playerContext } from "../../player/context.js";
+import { MediaElement } from "../media-element.js";
+import { PlayerController } from "../../player/player-controller.js";
+import { applyElementProps, applyStateDataAttrs, createButton, selectFullscreen } from "@videojs/core/dom";
+import { FullscreenButtonCore, FullscreenButtonDataAttrs } from "@videojs/core";
+
+//#region src/ui/fullscreen-button/fullscreen-button-element.ts
+var FullscreenButtonElement = class extends MediaElement {
+	constructor(..._args) {
+		super(..._args);
+		this.label = FullscreenButtonCore.defaultProps.label;
+		this.disabled = FullscreenButtonCore.defaultProps.disabled;
+	}
+	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);
+	}
+	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);
+	}
+};
+
+//#endregion
+export { FullscreenButtonElement };
+//# sourceMappingURL=fullscreen-button-element.js.map

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

@@ -0,0 +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,cAA6C,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;;CAO/D,AAAS,uBAA6B;AACpC,QAAM,sBAAsB;AAC5B,QAAKA,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"}

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

@@ -0,0 +1,8 @@
+import { ReactiveElement } from "@videojs/element";
+
+//#region src/ui/media-element.ts
+var MediaElement = class extends ReactiveElement {};
+
+//#endregion
+export { MediaElement };
+//# sourceMappingURL=media-element.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"media-element.js","names":[],"sources":["../../../src/ui/media-element.ts"],"sourcesContent":["import { ReactiveElement } from '@videojs/element';\nimport type { Constructor } from '@videojs/utils/types';\n\nexport class MediaElement extends ReactiveElement {}\n\nexport interface MediaElementConstructor extends Constructor<MediaElement> {}\n"],"mappings":";;;AAGA,IAAa,eAAb,cAAkC,gBAAgB"}

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

@@ -0,0 +1,56 @@
+import { playerContext } from "../../player/context.js";
+import { MediaElement } from "../media-element.js";
+import { PlayerController } from "../../player/player-controller.js";
+import { applyElementProps, applyStateDataAttrs, createButton, selectVolume } from "@videojs/core/dom";
+import { MuteButtonCore, MuteButtonDataAttrs } from "@videojs/core";
+
+//#region src/ui/mute-button/mute-button-element.ts
+var MuteButtonElement = class extends MediaElement {
+	constructor(..._args) {
+		super(..._args);
+		this.label = MuteButtonCore.defaultProps.label;
+		this.disabled = MuteButtonCore.defaultProps.disabled;
+	}
+	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);
+	}
+	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);
+	}
+};
+
+//#endregion
+export { MuteButtonElement };
+//# sourceMappingURL=mute-button-element.js.map

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

@@ -0,0 +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,cAAuC,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;;CAO/D,AAAS,uBAA6B;AACpC,QAAM,sBAAsB;AAC5B,QAAKA,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"}

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

@@ -0,0 +1,56 @@
+import { playerContext } from "../../player/context.js";
+import { MediaElement } from "../media-element.js";
+import { PlayerController } from "../../player/player-controller.js";
+import { applyElementProps, applyStateDataAttrs, createButton, selectPiP } from "@videojs/core/dom";
+import { PiPButtonCore, PiPButtonDataAttrs } from "@videojs/core";
+
+//#region src/ui/pip-button/pip-button-element.ts
+var PiPButtonElement = class extends MediaElement {
+	constructor(..._args) {
+		super(..._args);
+		this.label = PiPButtonCore.defaultProps.label;
+		this.disabled = PiPButtonCore.defaultProps.disabled;
+	}
+	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);
+	}
+	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);
+	}
+};
+
+//#endregion
+export { PiPButtonElement };
+//# sourceMappingURL=pip-button-element.js.map

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

@@ -0,0 +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,cAAsC,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;;CAO/D,AAAS,uBAA6B;AACpC,QAAM,sBAAsB;AAC5B,QAAKA,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"}

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

@@ -0,0 +1,56 @@
+import { playerContext } from "../../player/context.js";
+import { MediaElement } from "../media-element.js";
+import { PlayerController } from "../../player/player-controller.js";
+import { applyElementProps, applyStateDataAttrs, createButton, selectPlayback } from "@videojs/core/dom";
+import { PlayButtonCore, PlayButtonDataAttrs } from "@videojs/core";
+
+//#region src/ui/play-button/play-button-element.ts
+var PlayButtonElement = class extends MediaElement {
+	constructor(..._args) {
+		super(..._args);
+		this.label = PlayButtonCore.defaultProps.label;
+		this.disabled = PlayButtonCore.defaultProps.disabled;
+	}
+	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);
+	}
+	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);
+	}
+};
+
+//#endregion
+export { PlayButtonElement };
+//# sourceMappingURL=play-button-element.js.map

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

@@ -0,0 +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,cAAuC,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;;CAO/D,AAAS,uBAA6B;AACpC,QAAM,sBAAsB;AAC5B,QAAKA,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"}

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

@@ -0,0 +1,27 @@
+import { playerContext } from "../../player/context.js";
+import { MediaElement } from "../media-element.js";
+import { PlayerController } from "../../player/player-controller.js";
+import { applyStateDataAttrs, selectPlayback } from "@videojs/core/dom";
+import { PosterCore, PosterDataAttrs } from "@videojs/core";
+
+//#region src/ui/poster/poster-element.ts
+var PosterElement = class extends MediaElement {
+	static {
+		this.tagName = "media-poster";
+	}
+	#core = new PosterCore();
+	#state = new PlayerController(this, playerContext, selectPlayback);
+	connectedCallback() {
+		super.connectedCallback();
+	}
+	update(changed) {
+		super.update(changed);
+		const media = this.#state.value;
+		if (!media) return;
+		applyStateDataAttrs(this, this.#core.getState(media), PosterDataAttrs);
+	}
+};
+
+//#endregion
+export { PosterElement };
+//# sourceMappingURL=poster-element.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"poster-element.js","names":["#core","#state"],"sources":["../../../../src/ui/poster/poster-element.ts"],"sourcesContent":["import { PosterCore, PosterDataAttrs } from '@videojs/core';\nimport { applyStateDataAttrs, logMissingFeature, selectPlayback } 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 PosterElement extends MediaElement {\n  static readonly tagName = 'media-poster';\n\n  readonly #core = new PosterCore();\n  readonly #state = new PlayerController(this, playerContext, selectPlayback);\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n\n    if (__DEV__ && !this.#state.value) {\n      logMissingFeature(PosterElement.tagName, 'playback');\n    }\n  }\n\n  protected override update(changed: PropertyValues): void {\n    super.update(changed);\n\n    const media = this.#state.value;\n\n    if (!media) {\n      return;\n    }\n\n    applyStateDataAttrs(this, this.#core.getState(media), PosterDataAttrs);\n  }\n}\n"],"mappings":";;;;;;;AAQA,IAAa,gBAAb,cAAmC,aAAa;;iBACpB;;CAE1B,CAASA,OAAQ,IAAI,YAAY;CACjC,CAASC,QAAS,IAAI,iBAAiB,MAAM,eAAe,eAAe;CAE3E,AAAS,oBAA0B;AACjC,QAAM,mBAAmB;;CAO3B,AAAmB,OAAO,SAA+B;AACvD,QAAM,OAAO,QAAQ;EAErB,MAAM,QAAQ,MAAKA,MAAO;AAE1B,MAAI,CAAC,MACH;AAGF,sBAAoB,MAAM,MAAKD,KAAM,SAAS,MAAM,EAAE,gBAAgB"}

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

@@ -0,0 +1,58 @@
+import { playerContext } from "../../player/context.js";
+import { MediaElement } from "../media-element.js";
+import { PlayerController } from "../../player/player-controller.js";
+import { applyElementProps, applyStateDataAttrs, createButton, selectTime } from "@videojs/core/dom";
+import { SeekButtonCore, SeekButtonDataAttrs } from "@videojs/core";
+
+//#region src/ui/seek-button/seek-button-element.ts
+var SeekButtonElement = class extends MediaElement {
+	constructor(..._args) {
+		super(..._args);
+		this.seconds = SeekButtonCore.defaultProps.seconds;
+		this.label = SeekButtonCore.defaultProps.label;
+		this.disabled = SeekButtonCore.defaultProps.disabled;
+	}
+	static {
+		this.tagName = "media-seek-button";
+	}
+	static {
+		this.properties = {
+			seconds: { type: Number },
+			label: { type: String },
+			disabled: { type: Boolean }
+		};
+	}
+	#core = new SeekButtonCore();
+	#state = new PlayerController(this, playerContext, selectTime);
+	#disconnect = null;
+	connectedCallback() {
+		super.connectedCallback();
+		this.#disconnect = new AbortController();
+		const buttonProps = createButton({
+			onActivate: () => this.#core.seek(this.#state.value),
+			isDisabled: () => this.disabled || !this.#state.value
+		});
+		applyElementProps(this, buttonProps, this.#disconnect.signal);
+	}
+	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, SeekButtonDataAttrs);
+	}
+};
+
+//#endregion
+export { SeekButtonElement };
+//# sourceMappingURL=seek-button-element.js.map