@videojs/html 10.0.0-beta.9 → 10.0.0-rc.2

package/dist/dev/registration/ui-compounds.js

@@ -0,0 +1,125 @@
+import { safeDefine } from "./safe-define.js";
+import { MenuRadioItemElement } from "../ui/menu/radio-item.js";
+import { MenuRadioGroupElement } from "../ui/menu/radio-group.js";
+import { MenuItemIndicatorElement } from "../ui/menu/item-indicator.js";
+import { ControlsBackdropElement } from "../ui/controls/backdrop.js";
+import { ControlsContentElement } from "../ui/controls/content.js";
+import { ControlsElement } from "../ui/controls/element.js";
+import { ControlsGroupElement } from "../ui/controls/group.js";
+import { DialogBackdropElement } from "../ui/dialog/backdrop.js";
+import { DialogCloseElement } from "../ui/dialog/close.js";
+import { DialogDescriptionElement } from "../ui/dialog/description.js";
+import { DialogPopupElement } from "../ui/dialog/popup.js";
+import { DialogTitleElement } from "../ui/dialog/title.js";
+import { ErrorDialogElement } from "../ui/error-dialog/element.js";
+import { MenuCheckboxItemElement } from "../ui/menu/checkbox-item.js";
+import { MenuContentElement } from "../ui/menu/content.js";
+import { MenuElement } from "../ui/menu/element.js";
+import { MenuGroupElement } from "../ui/menu/group.js";
+import { MenuGroupLabelElement } from "../ui/menu/group-label.js";
+import { MenuItemElement } from "../ui/menu/item.js";
+import { MenuSeparatorElement } from "../ui/menu/separator.js";
+import { SeekIndicatorElement } from "../ui/seek-indicator/element.js";
+import { SeekIndicatorValueElement } from "../ui/seek-indicator/value.js";
+import { SliderBufferElement } from "../ui/slider/buffer.js";
+import { SliderFillElement } from "../ui/slider/fill.js";
+import { SliderPreviewElement } from "../ui/slider/preview.js";
+import { SliderThumbElement } from "../ui/slider/thumb.js";
+import { SliderThumbnailElement } from "../ui/slider/thumbnail.js";
+import { SliderTrackElement } from "../ui/slider/track.js";
+import { SliderValueElement } from "../ui/slider/value.js";
+import { StatusAnnouncerElement } from "../ui/status-announcer/element.js";
+import { StatusIndicatorElement } from "../ui/status-indicator/element.js";
+import { StatusIndicatorValueElement } from "../ui/status-indicator/value.js";
+import { TimeElement } from "../ui/time/element.js";
+import { TimeGroupElement } from "../ui/time/group.js";
+import { TimeSeparatorElement } from "../ui/time/separator.js";
+import { TimeSliderElement } from "../ui/time-slider/element.js";
+import { TooltipLabelElement } from "../ui/tooltip/label.js";
+import { TooltipShortcutElement } from "../ui/tooltip/shortcut.js";
+import { TooltipElement } from "../ui/tooltip/element.js";
+import { TooltipGroupElement } from "../ui/tooltip/group.js";
+import { VolumeIndicatorElement } from "../ui/volume-indicator/element.js";
+import { VolumeIndicatorFillElement } from "../ui/volume-indicator/fill.js";
+import { VolumeIndicatorValueElement } from "../ui/volume-indicator/value.js";
+import { VolumeSliderElement } from "../ui/volume-slider/element.js";
+//#region src/registration/ui-compounds.ts
+function defineMenu() {
+	safeDefine(MenuElement);
+	safeDefine(MenuContentElement);
+	safeDefine(MenuItemElement);
+	safeDefine(MenuGroupLabelElement);
+	safeDefine(MenuSeparatorElement);
+	safeDefine(MenuGroupElement);
+	safeDefine(MenuRadioGroupElement);
+	safeDefine(MenuRadioItemElement);
+	safeDefine(MenuCheckboxItemElement);
+	safeDefine(MenuItemIndicatorElement);
+}
+function defineControls() {
+	safeDefine(ControlsElement);
+	safeDefine(ControlsBackdropElement);
+	safeDefine(ControlsContentElement);
+	safeDefine(ControlsGroupElement);
+}
+function defineDialogParts() {
+	safeDefine(DialogBackdropElement);
+	safeDefine(DialogPopupElement);
+	safeDefine(DialogCloseElement);
+	safeDefine(DialogDescriptionElement);
+	safeDefine(DialogTitleElement);
+}
+function defineErrorDialog() {
+	safeDefine(ErrorDialogElement);
+	defineDialogParts();
+}
+function defineInputIndicators() {
+	safeDefine(StatusAnnouncerElement);
+	safeDefine(StatusIndicatorElement);
+	safeDefine(StatusIndicatorValueElement);
+	safeDefine(VolumeIndicatorElement);
+	safeDefine(VolumeIndicatorFillElement);
+	safeDefine(VolumeIndicatorValueElement);
+	safeDefine(SeekIndicatorElement);
+	safeDefine(SeekIndicatorValueElement);
+}
+/** Shared slider sub-elements used by all slider types. */
+function defineSliderParts() {
+	safeDefine(SliderFillElement);
+	safeDefine(SliderPreviewElement);
+	safeDefine(SliderThumbElement);
+	safeDefine(SliderTrackElement);
+	safeDefine(SliderValueElement);
+}
+function defineTime() {
+	safeDefine(TimeElement);
+	safeDefine(TimeGroupElement);
+	safeDefine(TimeSeparatorElement);
+}
+function defineTimeSlider() {
+	safeDefine(TimeSliderElement);
+	defineSliderParts();
+	safeDefine(SliderBufferElement);
+	safeDefine(SliderThumbnailElement);
+}
+function defineTooltip() {
+	safeDefine(TooltipGroupElement);
+	safeDefine(TooltipLabelElement);
+	safeDefine(TooltipShortcutElement);
+	safeDefine(TooltipElement);
+}
+function defineVolumeSlider() {
+	safeDefine(VolumeSliderElement);
+	defineSliderParts();
+}
+function defineSliders() {
+	safeDefine(TimeSliderElement);
+	safeDefine(VolumeSliderElement);
+	defineSliderParts();
+	safeDefine(SliderBufferElement);
+	safeDefine(SliderThumbnailElement);
+}
+//#endregion
+export { defineControls, defineErrorDialog, defineInputIndicators, defineMenu, defineSliderParts, defineSliders, defineTime, defineTimeSlider, defineTooltip, defineVolumeSlider };
+
+//# sourceMappingURL=ui-compounds.js.map

package/dist/dev/registration/ui-compounds.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ui-compounds.js","names":[],"sources":["../../../src/registration/ui-compounds.ts"],"sourcesContent":["import { AlertDialogElement } from '../ui/alert-dialog/element';\nimport { ControlsBackdropElement } from '../ui/controls/backdrop';\nimport { ControlsContentElement } from '../ui/controls/content';\nimport { ControlsElement } from '../ui/controls/element';\nimport { ControlsGroupElement } from '../ui/controls/group';\nimport { DialogBackdropElement } from '../ui/dialog/backdrop';\nimport { DialogCloseElement } from '../ui/dialog/close';\nimport { DialogDescriptionElement } from '../ui/dialog/description';\nimport { DialogPopupElement } from '../ui/dialog/popup';\nimport { DialogTitleElement } from '../ui/dialog/title';\nimport { ErrorDialogElement } from '../ui/error-dialog/element';\nimport { MenuCheckboxItemElement } from '../ui/menu/checkbox-item';\nimport { MenuContentElement } from '../ui/menu/content';\nimport { MenuElement } from '../ui/menu/element';\nimport { MenuGroupElement } from '../ui/menu/group';\nimport { MenuGroupLabelElement } from '../ui/menu/group-label';\nimport { MenuItemElement } from '../ui/menu/item';\nimport { MenuItemIndicatorElement } from '../ui/menu/item-indicator';\nimport { MenuRadioGroupElement } from '../ui/menu/radio-group';\nimport { MenuRadioItemElement } from '../ui/menu/radio-item';\nimport { MenuSeparatorElement } from '../ui/menu/separator';\nimport { SeekIndicatorElement } from '../ui/seek-indicator/element';\nimport { SeekIndicatorValueElement } from '../ui/seek-indicator/value';\nimport { SliderBufferElement } from '../ui/slider/buffer';\nimport { SliderElement } from '../ui/slider/element';\nimport { SliderFillElement } from '../ui/slider/fill';\nimport { SliderPreviewElement } from '../ui/slider/preview';\nimport { SliderThumbElement } from '../ui/slider/thumb';\nimport { SliderThumbnailElement } from '../ui/slider/thumbnail';\nimport { SliderTrackElement } from '../ui/slider/track';\nimport { SliderValueElement } from '../ui/slider/value';\nimport { StatusAnnouncerElement } from '../ui/status-announcer/element';\nimport { StatusIndicatorElement } from '../ui/status-indicator/element';\nimport { StatusIndicatorValueElement } from '../ui/status-indicator/value';\nimport { TimeSliderElement } from '../ui/time-slider/element';\nimport { TimeElement } from '../ui/time/element';\nimport { TimeGroupElement } from '../ui/time/group';\nimport { TimeSeparatorElement } from '../ui/time/separator';\nimport { TooltipElement } from '../ui/tooltip/element';\nimport { TooltipGroupElement } from '../ui/tooltip/group';\nimport { TooltipLabelElement } from '../ui/tooltip/label';\nimport { TooltipShortcutElement } from '../ui/tooltip/shortcut';\nimport { VolumeIndicatorElement } from '../ui/volume-indicator/element';\nimport { VolumeIndicatorFillElement } from '../ui/volume-indicator/fill';\nimport { VolumeIndicatorValueElement } from '../ui/volume-indicator/value';\nimport { VolumeSliderElement } from '../ui/volume-slider/element';\nimport { safeDefine } from './safe-define';\n\n// ── Define functions ────────────────────────────────────────────────────\n\nexport function defineMenu(): void {\n  // Root first — part elements consume its context.\n  safeDefine(MenuElement);\n  safeDefine(MenuContentElement);\n  safeDefine(MenuItemElement);\n  safeDefine(MenuGroupLabelElement);\n  safeDefine(MenuSeparatorElement);\n  safeDefine(MenuGroupElement);\n  safeDefine(MenuRadioGroupElement);\n  safeDefine(MenuRadioItemElement);\n  safeDefine(MenuCheckboxItemElement);\n  safeDefine(MenuItemIndicatorElement);\n}\n\nexport function defineControls(): void {\n  safeDefine(ControlsElement);\n  safeDefine(ControlsBackdropElement);\n  safeDefine(ControlsContentElement);\n  safeDefine(ControlsGroupElement);\n}\n\nfunction defineDialogParts(): void {\n  safeDefine(DialogBackdropElement);\n  safeDefine(DialogPopupElement);\n  safeDefine(DialogCloseElement);\n  safeDefine(DialogDescriptionElement);\n  safeDefine(DialogTitleElement);\n}\n\nexport function defineAlertDialog(): void {\n  // Parent first — child elements consume its context.\n  safeDefine(AlertDialogElement);\n  defineDialogParts();\n}\n\nexport function defineErrorDialog(): void {\n  // Parent first — child elements consume its context.\n  safeDefine(ErrorDialogElement);\n  defineDialogParts();\n}\n\nexport function defineInputIndicators(): void {\n  safeDefine(StatusAnnouncerElement);\n  safeDefine(StatusIndicatorElement);\n  safeDefine(StatusIndicatorValueElement);\n  safeDefine(VolumeIndicatorElement);\n  safeDefine(VolumeIndicatorFillElement);\n  safeDefine(VolumeIndicatorValueElement);\n  safeDefine(SeekIndicatorElement);\n  safeDefine(SeekIndicatorValueElement);\n}\n\n/** Shared slider sub-elements used by all slider types. */\nexport function defineSliderParts(): void {\n  safeDefine(SliderFillElement);\n  safeDefine(SliderPreviewElement);\n  safeDefine(SliderThumbElement);\n  safeDefine(SliderTrackElement);\n  safeDefine(SliderValueElement);\n}\n\nexport function defineSlider(): void {\n  safeDefine(SliderElement);\n  defineSliderParts();\n}\n\nexport function defineTime(): void {\n  safeDefine(TimeElement);\n  safeDefine(TimeGroupElement);\n  safeDefine(TimeSeparatorElement);\n}\n\nexport function defineTimeSlider(): void {\n  safeDefine(TimeSliderElement);\n  defineSliderParts();\n  safeDefine(SliderBufferElement);\n  safeDefine(SliderThumbnailElement);\n}\n\nexport function defineTooltip(): void {\n  safeDefine(TooltipGroupElement);\n  safeDefine(TooltipLabelElement);\n  safeDefine(TooltipShortcutElement);\n  safeDefine(TooltipElement);\n}\n\nexport function defineVolumeSlider(): void {\n  safeDefine(VolumeSliderElement);\n  defineSliderParts();\n}\n\nexport function defineSliders(): void {\n  safeDefine(TimeSliderElement);\n  safeDefine(VolumeSliderElement);\n  defineSliderParts();\n  safeDefine(SliderBufferElement);\n  safeDefine(SliderThumbnailElement);\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkDA,SAAgB,aAAmB;CAEjC,WAAW,WAAW;CACtB,WAAW,kBAAkB;CAC7B,WAAW,eAAe;CAC1B,WAAW,qBAAqB;CAChC,WAAW,oBAAoB;CAC/B,WAAW,gBAAgB;CAC3B,WAAW,qBAAqB;CAChC,WAAW,oBAAoB;CAC/B,WAAW,uBAAuB;CAClC,WAAW,wBAAwB;AACrC;AAEA,SAAgB,iBAAuB;CACrC,WAAW,eAAe;CAC1B,WAAW,uBAAuB;CAClC,WAAW,sBAAsB;CACjC,WAAW,oBAAoB;AACjC;AAEA,SAAS,oBAA0B;CACjC,WAAW,qBAAqB;CAChC,WAAW,kBAAkB;CAC7B,WAAW,kBAAkB;CAC7B,WAAW,wBAAwB;CACnC,WAAW,kBAAkB;AAC/B;AAQA,SAAgB,oBAA0B;CAExC,WAAW,kBAAkB;CAC7B,kBAAkB;AACpB;AAEA,SAAgB,wBAA8B;CAC5C,WAAW,sBAAsB;CACjC,WAAW,sBAAsB;CACjC,WAAW,2BAA2B;CACtC,WAAW,sBAAsB;CACjC,WAAW,0BAA0B;CACrC,WAAW,2BAA2B;CACtC,WAAW,oBAAoB;CAC/B,WAAW,yBAAyB;AACtC;;AAGA,SAAgB,oBAA0B;CACxC,WAAW,iBAAiB;CAC5B,WAAW,oBAAoB;CAC/B,WAAW,kBAAkB;CAC7B,WAAW,kBAAkB;CAC7B,WAAW,kBAAkB;AAC/B;AAOA,SAAgB,aAAmB;CACjC,WAAW,WAAW;CACtB,WAAW,gBAAgB;CAC3B,WAAW,oBAAoB;AACjC;AAEA,SAAgB,mBAAyB;CACvC,WAAW,iBAAiB;CAC5B,kBAAkB;CAClB,WAAW,mBAAmB;CAC9B,WAAW,sBAAsB;AACnC;AAEA,SAAgB,gBAAsB;CACpC,WAAW,mBAAmB;CAC9B,WAAW,mBAAmB;CAC9B,WAAW,sBAAsB;CACjC,WAAW,cAAc;AAC3B;AAEA,SAAgB,qBAA2B;CACzC,WAAW,mBAAmB;CAC9B,kBAAkB;AACpB;AAEA,SAAgB,gBAAsB;CACpC,WAAW,iBAAiB;CAC5B,WAAW,mBAAmB;CAC9B,kBAAkB;CAClB,WAAW,mBAAmB;CAC9B,WAAW,sBAAsB;AACnC"}

package/dist/dev/store/media-attach-mixin.d.ts

@@ -1,14 +1,12 @@
 import { MediaContext } from "../player/context.js";
 import { AnyConstructor } from "@videojs/utils/types";
-
 //#region src/store/media-attach-mixin.d.ts
 type MediaAttachMixin = <Class extends AnyConstructor<HTMLElement>>(BaseClass: Class) => Class;
 /**
- * Create a mixin that consumes `mediaContext` and registers the
- * element as the media with the provider.
+ * Create a mixin that consumes `mediaContext` and registers the element as the media with the player.
  *
- * Uses the raw context-request protocol so it works with any
- * `HTMLElement` subclass — no `ReactiveControllerHost` required.
+ * Uses the raw context-request protocol so it works with any `HTMLElement` subclass — no `ReactiveControllerHost`
+ * required.
  *
  * @param context - The media context to consume.
  */

package/dist/dev/store/media-attach-mixin.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"media-attach-mixin.d.ts","names":[],"sources":["../../../src/store/media-attach-mixin.ts"],"mappings":";;;;KAMY,gBAAA,kBAAkC,cAAA,CAAe,WAAA,GAAc,SAAA,EAAW,KAAA,KAAU,KAAA;;AAAhG;;;;;;;;iBAWgB,sBAAA,CAAuB,OAAA,EAAS,YAAA,GAAe,gBAAA;AAAA,cA0ClD,gBAAA,EAAgB,gBAAA"}
+{"version":3,"file":"media-attach-mixin.d.ts","names":[],"sources":["../../../src/store/media-attach-mixin.ts"],"mappings":";;;KAOY,oBAAoB,cAAc,eAAe,cAAc,WAAW,UAAU;;;;;;;;;iBAUhF,uBAAuB,SAAS,eAAe;cAmDlD,kBAAgB"}

package/dist/dev/store/media-attach-mixin.js

@@ -1,20 +1,18 @@
 import { mediaContext } from "../player/context.js";
 import { ContextEvent } from "@videojs/element/context";
-
 //#region src/store/media-attach-mixin.ts
 /**
-* Create a mixin that consumes `mediaContext` and registers the
-* element as the media with the provider.
+* Create a mixin that consumes `mediaContext` and registers the element as the media with the player.
 *
-* Uses the raw context-request protocol so it works with any
-* `HTMLElement` subclass — no `ReactiveControllerHost` required.
+* Uses the raw context-request protocol so it works with any `HTMLElement` subclass — no `ReactiveControllerHost`
+* required.
 *
 * @param context - The media context to consume.
 */
 function createMediaAttachMixin(context) {
 	return (BaseClass) => {
 		class MediaAttachElement extends BaseClass {
-			#setMedia = null;
+			#releaseMedia = null;
 			#unsubscribe = null;
 			getMediaTarget() {
 				return this;
@@ -23,23 +21,25 @@ function createMediaAttachMixin(context) {
 				super.connectedCallback?.();
 				this.dispatchEvent(new ContextEvent(context, this, (value, unsubscribe) => {
 					if (unsubscribe) this.#unsubscribe = unsubscribe;
-					this.#setMedia = value?.setMedia ?? null;
-					if (this.isConnected) this.#setMedia?.(this.getMediaTarget());
-				}, true));
+					this.#releaseMedia?.();
+					this.#releaseMedia = null;
+					const target = this.getMediaTarget();
+					if (this.isConnected && value && target) this.#releaseMedia = value.registerMedia(target);
+				}, false));
 			}
 			disconnectedCallback() {
-				super.disconnectedCallback?.();
-				this.#setMedia?.(null);
+				this.#releaseMedia?.();
+				this.#releaseMedia = null;
 				this.#unsubscribe?.();
 				this.#unsubscribe = null;
-				this.#setMedia = null;
+				super.disconnectedCallback?.();
 			}
 		}
 		return MediaAttachElement;
 	};
 }
 const MediaAttachMixin = createMediaAttachMixin(mediaContext);
-
 //#endregion
 export { MediaAttachMixin, createMediaAttachMixin };
+
 //# sourceMappingURL=media-attach-mixin.js.map

package/dist/dev/store/media-attach-mixin.js.map

@@ -1 +1 @@
-{"version":3,"file":"media-attach-mixin.js","names":["#unsubscribe","#setMedia"],"sources":["../../../src/store/media-attach-mixin.ts"],"sourcesContent":["import type { Media } from '@videojs/core/dom';\nimport { ContextEvent } from '@videojs/element/context';\nimport type { CustomElement } from '@videojs/utils/dom';\nimport type { AnyConstructor, Constructor } from '@videojs/utils/types';\nimport { type MediaContext, mediaContext } from '../player/context';\n\nexport type MediaAttachMixin = <Class extends AnyConstructor<HTMLElement>>(BaseClass: Class) => Class;\n\n/**\n * Create a mixin that consumes `mediaContext` and registers the\n * element as the media with the provider.\n *\n * Uses the raw context-request protocol so it works with any\n * `HTMLElement` subclass — no `ReactiveControllerHost` required.\n *\n * @param context - The media context to consume.\n */\nexport function createMediaAttachMixin(context: MediaContext): MediaAttachMixin {\n  return <Class extends AnyConstructor<HTMLElement>>(BaseClass: Class) => {\n    class MediaAttachElement extends (BaseClass as unknown as Constructor<CustomElement>) {\n      #setMedia: ((media: Media | null) => void) | null = null;\n      #unsubscribe: (() => void) | null = null;\n\n      getMediaTarget(): Media | null {\n        return this as unknown as Media;\n      }\n\n      override connectedCallback() {\n        super.connectedCallback?.();\n\n        this.dispatchEvent(\n          new ContextEvent(\n            context,\n            this,\n            (value, unsubscribe) => {\n              if (unsubscribe) this.#unsubscribe = unsubscribe;\n              this.#setMedia = value?.setMedia ?? null;\n              if (this.isConnected) {\n                this.#setMedia?.(this.getMediaTarget());\n              }\n            },\n            true\n          )\n        );\n      }\n\n      override disconnectedCallback() {\n        super.disconnectedCallback?.();\n        this.#setMedia?.(null);\n        this.#unsubscribe?.();\n        this.#unsubscribe = null;\n        this.#setMedia = null;\n      }\n    }\n\n    return MediaAttachElement as unknown as Class;\n  };\n}\n\nexport const MediaAttachMixin = createMediaAttachMixin(mediaContext);\n"],"mappings":";;;;;;;;;;;;;AAiBA,SAAgB,uBAAuB,SAAyC;AAC9E,SAAmD,cAAqB;EACtE,MAAM,2BAA4B,UAAoD;GACpF,YAAoD;GACpD,eAAoC;GAEpC,iBAA+B;AAC7B,WAAO;;GAGT,AAAS,oBAAoB;AAC3B,UAAM,qBAAqB;AAE3B,SAAK,cACH,IAAI,aACF,SACA,OACC,OAAO,gBAAgB;AACtB,SAAI,YAAa,OAAKA,cAAe;AACrC,WAAKC,WAAY,OAAO,YAAY;AACpC,SAAI,KAAK,YACP,OAAKA,WAAY,KAAK,gBAAgB,CAAC;OAG3C,KACD,CACF;;GAGH,AAAS,uBAAuB;AAC9B,UAAM,wBAAwB;AAC9B,UAAKA,WAAY,KAAK;AACtB,UAAKD,eAAgB;AACrB,UAAKA,cAAe;AACpB,UAAKC,WAAY;;;AAIrB,SAAO;;;AAIX,MAAa,mBAAmB,uBAAuB,aAAa"}
+{"version":3,"file":"media-attach-mixin.js","names":["#unsubscribe","#releaseMedia"],"sources":["../../../src/store/media-attach-mixin.ts"],"sourcesContent":["import { ContextEvent } from '@videojs/element/context';\nimport type { Media } from '@videojs/media/dom';\nimport type { CustomElement } from '@videojs/utils/dom';\nimport type { AnyConstructor, Constructor } from '@videojs/utils/types';\n\nimport { type MediaContext, mediaContext } from '../player/context';\n\nexport type MediaAttachMixin = <Class extends AnyConstructor<HTMLElement>>(BaseClass: Class) => Class;\n\n/**\n * Create a mixin that consumes `mediaContext` and registers the element as the media with the player.\n *\n * Uses the raw context-request protocol so it works with any `HTMLElement` subclass — no `ReactiveControllerHost`\n * required.\n *\n * @param context - The media context to consume.\n */\nexport function createMediaAttachMixin(context: MediaContext): MediaAttachMixin {\n  return <Class extends AnyConstructor<HTMLElement>>(BaseClass: Class) => {\n    class MediaAttachElement extends (BaseClass as unknown as Constructor<CustomElement>) {\n      #releaseMedia: (() => void) | null = null;\n      #unsubscribe: (() => void) | null = null;\n\n      getMediaTarget(): Media | null {\n        return this as unknown as Media;\n      }\n\n      override connectedCallback() {\n        super.connectedCallback?.();\n\n        this.dispatchEvent(\n          new ContextEvent(\n            context,\n            this,\n            (value, unsubscribe) => {\n              if (unsubscribe) this.#unsubscribe = unsubscribe;\n\n              this.#releaseMedia?.();\n              this.#releaseMedia = null;\n\n              const target = this.getMediaTarget();\n\n              if (this.isConnected && value && target) {\n                this.#releaseMedia = value.registerMedia(target);\n              }\n            },\n            false\n          )\n        );\n      }\n\n      override disconnectedCallback() {\n        // Detach the store while the media chain is still live so features\n        // (e.g. remote-playback) can clean up against the real underlying\n        // element. Destroying the media adapter first would null the layer\n        // chain's target before listeners get a chance to unwind.\n        this.#releaseMedia?.();\n        this.#releaseMedia = null;\n        this.#unsubscribe?.();\n        this.#unsubscribe = null;\n        super.disconnectedCallback?.();\n      }\n    }\n\n    return MediaAttachElement as unknown as Class;\n  };\n}\n\nexport const MediaAttachMixin = createMediaAttachMixin(mediaContext);\n"],"mappings":";;;;;;;;;;;AAiBA,SAAgB,uBAAuB,SAAyC;CAC9E,QAAmD,cAAqB;EACtE,MAAM,2BAA4B,UAAoD;GACpF,gBAAqC;GACrC,eAAoC;GAEpC,iBAA+B;IAC7B,OAAO;GACT;GAEA,oBAA6B;IAC3B,MAAM,oBAAoB;IAE1B,KAAK,cACH,IAAI,aACF,SACA,OACC,OAAO,gBAAgB;KACtB,IAAI,aAAa,KAAKA,eAAe;KAErC,KAAKC,gBAAgB;KACrB,KAAKA,gBAAgB;KAErB,MAAM,SAAS,KAAK,eAAe;KAEnC,IAAI,KAAK,eAAe,SAAS,QAC/B,KAAKA,gBAAgB,MAAM,cAAc,MAAM;IAEnD,GACA,KACF,CACF;GACF;GAEA,uBAAgC;IAK9B,KAAKA,gBAAgB;IACrB,KAAKA,gBAAgB;IACrB,KAAKD,eAAe;IACpB,KAAKA,eAAe;IACpB,MAAM,uBAAuB;GAC/B;EACF;EAEA,OAAO;CACT;AACF;AAEA,MAAa,mBAAmB,uBAAuB,YAAY"}

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

@@ -1,16 +1,12 @@
-import { MediaElement } from "../ui/media-element.js";
-import { PlayerStore } from "@videojs/core/dom";
+import { UIElement } from "../ui/ui-element.js";
+import { InferPlayerHtmlConfig, PlayerStore } from "@videojs/core/dom";
 import { Constructor } from "@videojs/utils/types";
-
 //#region src/store/types.d.ts
-interface PlayerProvider<Store extends PlayerStore> extends MediaElement {
+type PlayerProperties<Store extends PlayerStore> = { -readonly [Key in keyof InferPlayerHtmlConfig<Store>]?: InferPlayerHtmlConfig<Store>[Key] | undefined; };
+type PlayerElement<Store extends PlayerStore> = UIElement & PlayerProperties<Store> & {
   readonly store: Store;
-}
-interface PlayerProviderConstructor<Store extends PlayerStore> extends Constructor<PlayerProvider<Store>> {}
-interface PlayerConsumer<Store extends PlayerStore> extends MediaElement {
-  readonly store: Store | null;
-}
-interface PlayerConsumerConstructor<Store extends PlayerStore> extends Constructor<PlayerConsumer<Store>> {}
+};
+type PlayerElementConstructor<Store extends PlayerStore> = typeof UIElement & Constructor<PlayerElement<Store>>;
 //#endregion
-export { PlayerConsumer, PlayerConsumerConstructor, PlayerProvider, PlayerProviderConstructor };
+export { PlayerElement, PlayerElementConstructor };
 //# 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,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":";;;;KASK,iBAAiB,cAAc,4BACvB,aAAa,sBAAsB,UAAU,sBAAsB,OAAO;KAG3E,cAAc,cAAc,eAAe,YACrD,iBAAiB;WACN,OAAO;;KAGR,yBAAyB,cAAc,sBAAsB,YAAY,YAAY,cAAc"}

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

@@ -0,0 +1,25 @@
+import { PlayerController } from "../../player/controller.js";
+import { MediaButtonElement } from "../media-button-element.js";
+import { index_d_exports } from "../../index.js";
+import { AirPlayButtonCore } from "@videojs/core";
+import { MediaRemotePlaybackState } from "@videojs/media";
+//#region src/ui/airplay-button/element.d.ts
+declare class AirPlayButtonElement extends MediaButtonElement<AirPlayButtonCore> {
+  static readonly tagName = "media-airplay-button";
+  protected readonly core: AirPlayButtonCore;
+  protected readonly stateAttrMap: {
+    readonly state: 'data-airplay-state';
+    readonly availability: 'data-availability';
+    readonly disabled: 'data-disabled';
+    readonly hidden: 'data-hidden';
+  };
+  protected readonly mediaState: PlayerController<index_d_exports.AnyPlayerStore, {
+    remotePlaybackState: import("@videojs/media").RemotePlaybackConnectionState;
+    remotePlaybackAvailability: import("@videojs/media").MediaFeatureAvailability;
+    toggleRemotePlayback: () => Promise<void>;
+  } | undefined>;
+  protected activate(state: MediaRemotePlaybackState): void;
+}
+//#endregion
+export { AirPlayButtonElement };
+//# sourceMappingURL=element.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"element.d.ts","names":[],"sources":["../../../../src/ui/airplay-button/element.ts"],"mappings":";;;;;;cAQa,6BAA6B,mBAAmB;kBAC3C;qBAEG,MAAI;qBACJ;;;;;;qBACA,YAAU,iBAFN,gBAEM;;;;;YAEnB,SAAS,OAAO"}

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

@@ -0,0 +1,24 @@
+import { playerContext } from "../../player/context.js";
+import { PlayerController } from "../../player/controller.js";
+import { MediaButtonElement } from "../media-button-element.js";
+import { AirPlayButtonCore, AirPlayButtonDataAttrs } from "@videojs/core";
+import { selectRemotePlayback } from "@videojs/core/dom";
+//#region src/ui/airplay-button/element.ts
+var AirPlayButtonElement = class extends MediaButtonElement {
+	constructor(..._args) {
+		super(..._args);
+		this.core = new AirPlayButtonCore();
+		this.stateAttrMap = AirPlayButtonDataAttrs;
+		this.mediaState = new PlayerController(this, playerContext, selectRemotePlayback);
+	}
+	static {
+		this.tagName = "media-airplay-button";
+	}
+	activate(state) {
+		this.core.toggle(state);
+	}
+};
+//#endregion
+export { AirPlayButtonElement };
+
+//# sourceMappingURL=element.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"element.js","names":[],"sources":["../../../../src/ui/airplay-button/element.ts"],"sourcesContent":["import { AirPlayButtonCore, AirPlayButtonDataAttrs } from '@videojs/core';\nimport { selectRemotePlayback } from '@videojs/core/dom';\nimport type { MediaRemotePlaybackState } from '@videojs/media';\n\nimport { playerContext } from '../../player/context';\nimport { PlayerController } from '../../player/controller';\nimport { MediaButtonElement } from '../media-button-element';\n\nexport class AirPlayButtonElement extends MediaButtonElement<AirPlayButtonCore> {\n  static readonly tagName = 'media-airplay-button';\n\n  protected readonly core = new AirPlayButtonCore();\n  protected readonly stateAttrMap = AirPlayButtonDataAttrs;\n  protected readonly mediaState = new PlayerController(this, playerContext, selectRemotePlayback);\n\n  protected activate(state: MediaRemotePlaybackState): void {\n    this.core.toggle(state);\n  }\n}\n"],"mappings":";;;;;;AAQA,IAAa,uBAAb,cAA0C,mBAAsC;;;EAGpD,KAAA,OAAA,IAAI,kBAAkB;EACd,KAAA,eAAA;EACF,KAAA,aAAA,IAAI,iBAAiB,MAAM,eAAe,oBAAoB;;;EAJpE,KAAA,UAAA;;CAM1B,SAAmB,OAAuC;EACxD,KAAK,KAAK,OAAO,KAAK;CACxB;AACF"}

package/dist/dev/ui/alert-dialog/element.d.ts

@@ -0,0 +1,14 @@
+import { DialogElementBase } from "../dialog/element.js";
+//#region src/ui/alert-dialog/element.d.ts
+/**
+ * A modal dialog with alert semantics.
+ *
+ * @fires open-change - Fired when the dialog's open state changes.
+ */
+declare class AlertDialogElement extends DialogElementBase {
+  static readonly tagName = "media-alert-dialog";
+  constructor();
+}
+//#endregion
+export { AlertDialogElement };
+//# sourceMappingURL=element.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"element.d.ts","names":[],"sources":["../../../../src/ui/alert-dialog/element.ts"],"mappings":";;;;;;;cASa,2BAA2B;kBACtB;EAEhB"}

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

@@ -0,0 +1,25 @@
+import { DialogElementBase } from "../dialog/element.js";
+import { AlertDialogCore, AlertDialogDataAttrs } from "@videojs/core";
+//#region src/ui/alert-dialog/element.ts
+/**
+* A modal dialog with alert semantics.
+*
+* @fires open-change - Fired when the dialog's open state changes.
+*/
+var AlertDialogElement = class extends DialogElementBase {
+	static {
+		this.tagName = "media-alert-dialog";
+	}
+	constructor() {
+		super({
+			core: new AlertDialogCore(),
+			stateAttrMap: AlertDialogDataAttrs,
+			idPrefix: "alert-dialog",
+			bindTrigger: false
+		});
+	}
+};
+//#endregion
+export { AlertDialogElement };
+
+//# sourceMappingURL=element.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"element.js","names":[],"sources":["../../../../src/ui/alert-dialog/element.ts"],"sourcesContent":["import { AlertDialogCore, AlertDialogDataAttrs } from '@videojs/core';\n\nimport { DialogElementBase } from '../dialog/element';\n\n/**\n * A modal dialog with alert semantics.\n *\n * @fires open-change - Fired when the dialog's open state changes.\n */\nexport class AlertDialogElement extends DialogElementBase {\n  static readonly tagName = 'media-alert-dialog';\n\n  constructor() {\n    super({\n      core: new AlertDialogCore(),\n      stateAttrMap: AlertDialogDataAttrs,\n      idPrefix: 'alert-dialog',\n      bindTrigger: false,\n    });\n  }\n}\n"],"mappings":";;;;;;;;AASA,IAAa,qBAAb,cAAwC,kBAAkB;;EAC9B,KAAA,UAAA;;CAE1B,cAAc;EACZ,MAAM;GACJ,MAAM,IAAI,gBAAgB;GAC1B,cAAc;GACd,UAAU;GACV,aAAa;EACf,CAAC;CACH;AACF"}

package/dist/dev/ui/audio-track-radio-group/element.d.ts

@@ -0,0 +1,31 @@
+import { MenuRadioGroupElement } from "../menu/radio-group.js";
+import { AudioTrackRadioGroupCore } from "@videojs/core";
+import { PropertyValues } from "@videojs/element";
+import { Text } from "@videojs/core/i18n";
+//#region src/ui/audio-track-radio-group/element.d.ts
+declare class AudioTrackRadioGroupElement extends MenuRadioGroupElement {
+  #private;
+  static readonly tagName = "media-audio-track-radio-group";
+  static properties: {
+    value: {
+      type: StringConstructor;
+    };
+    disabled: {
+      type: BooleanConstructor;
+    };
+    label: {
+      type: StringConstructor;
+    };
+  };
+  disabled: boolean;
+  label: Text | string;
+  formatTrack: (track: import("@videojs/media").MediaAudioTrack) => Text | string;
+  connectedCallback(): void;
+  protected update(changed: PropertyValues): void;
+}
+declare namespace AudioTrackRadioGroupElement {
+  type State = AudioTrackRadioGroupCore.State;
+}
+//#endregion
+export { AudioTrackRadioGroupElement };
+//# sourceMappingURL=element.d.ts.map

package/dist/dev/ui/audio-track-radio-group/element.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"element.d.ts","names":[],"sources":["../../../../src/ui/audio-track-radio-group/element.ts"],"mappings":";;;;;cAgBa,oCAAoC;;kBACtB;SAET;;;;;MAEF,MAAI;;;MACP,MAAI;;;EAGf;EACA,OAAO;EACP,cAAW,gCAAA,oBAAA;EAcF;YAUU,OAAO,SAAS;;kBAsBpB;OACH,QAAQ,yBAAyB"}

package/dist/dev/ui/audio-track-radio-group/element.js

@@ -0,0 +1,69 @@
+import { i18nContext } from "../../i18n/context.js";
+import { I18nController } from "../../i18n/controller.js";
+import { playerContext } from "../../player/context.js";
+import { PlayerController } from "../../player/controller.js";
+import { MenuRadioGroupElement } from "../menu/radio-group.js";
+import { RadioOptionsController } from "../radio-options/controller.js";
+import { AudioTrackRadioGroupCore, AudioTrackRadioGroupDataAttrs } from "@videojs/core";
+import { applyStateDataAttrs, logMissingFeature, selectAudioTrack } from "@videojs/core/dom";
+import { translateText } from "@videojs/core/i18n";
+//#region src/ui/audio-track-radio-group/element.ts
+var AudioTrackRadioGroupElement = class extends MenuRadioGroupElement {
+	constructor(..._args) {
+		super(..._args);
+		this.disabled = false;
+		this.label = "";
+		this.formatTrack = AudioTrackRadioGroupCore.defaultProps.formatTrack;
+		this.#core = new AudioTrackRadioGroupCore();
+		this.#i18n = new I18nController(this, i18nContext);
+		this.#mediaState = new PlayerController(this, playerContext, selectAudioTrack);
+		this.#options = new RadioOptionsController(this, {
+			setItemAttributes: (item, option) => item.setAttribute("data-track", option.value),
+			onValueChange: (value) => {
+				const media = this.#mediaState.value;
+				if (media) this.#core.selectValue(media, value);
+			}
+		});
+	}
+	static {
+		this.tagName = "media-audio-track-radio-group";
+	}
+	static {
+		this.properties = {
+			...MenuRadioGroupElement.properties,
+			disabled: { type: Boolean },
+			label: { type: String }
+		};
+	}
+	#core;
+	#i18n;
+	#mediaState;
+	#options;
+	connectedCallback() {
+		super.connectedCallback();
+		if (this.destroyed) return;
+		if (!this.#mediaState.value && this.#mediaState.displayName) logMissingFeature(this.localName, this.#mediaState.displayName);
+	}
+	update(changed) {
+		const media = this.#mediaState.value;
+		let state = null;
+		if (media) {
+			this.#core.setProps({
+				formatTrack: this.formatTrack,
+				disabled: this.disabled,
+				label: this.label
+			});
+			this.#core.setMedia(media);
+			state = this.#core.getState();
+			this.applyDefaultAriaLabel(translateText(this.#core.getLabel(state), this.#i18n.value));
+			this.#options.sync(state, this.#i18n.value, this.#i18n.locale);
+			this.publishMenuOptionState(state.disabled, state.hidden, state.availability);
+		} else this.publishMenuOptionState(true, true, "unsupported");
+		super.update(changed);
+		if (state) applyStateDataAttrs(this, state, AudioTrackRadioGroupDataAttrs);
+	}
+};
+//#endregion
+export { AudioTrackRadioGroupElement };
+
+//# sourceMappingURL=element.js.map

package/dist/dev/ui/audio-track-radio-group/element.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"element.js","names":["#mediaState","#core","#i18n","#options"],"sources":["../../../../src/ui/audio-track-radio-group/element.ts"],"sourcesContent":["import {\n  AudioTrackRadioGroupCore,\n  AudioTrackRadioGroupDataAttrs,\n  type AudioTrackRadioGroupOption,\n} from '@videojs/core';\nimport { applyStateDataAttrs, logMissingFeature, selectAudioTrack } from '@videojs/core/dom';\nimport { type Text, translateText } from '@videojs/core/i18n';\nimport type { PropertyDeclarationMap, PropertyValues } from '@videojs/element';\n\nimport { i18nContext } from '../../i18n/context';\nimport { I18nController } from '../../i18n/controller';\nimport { playerContext } from '../../player/context';\nimport { PlayerController } from '../../player/controller';\nimport { MenuRadioGroupElement } from '../menu/radio-group';\nimport { RadioOptionsController } from '../radio-options/controller';\n\nexport class AudioTrackRadioGroupElement extends MenuRadioGroupElement {\n  static override readonly tagName = 'media-audio-track-radio-group';\n\n  static override properties = {\n    ...MenuRadioGroupElement.properties,\n    disabled: { type: Boolean },\n    label: { type: String },\n  } satisfies PropertyDeclarationMap<'value' | 'label' | 'disabled'>;\n\n  disabled = false;\n  label: Text | string = '';\n  formatTrack = AudioTrackRadioGroupCore.defaultProps.formatTrack;\n\n  readonly #core = new AudioTrackRadioGroupCore();\n  readonly #i18n = new I18nController(this, i18nContext);\n  readonly #mediaState = new PlayerController(this, playerContext, selectAudioTrack);\n  readonly #options = new RadioOptionsController<AudioTrackRadioGroupOption>(this, {\n    setItemAttributes: (item, option) => item.setAttribute('data-track', option.value),\n    onValueChange: (value) => {\n      const media = this.#mediaState.value;\n\n      if (media) this.#core.selectValue(media, value);\n    },\n  });\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n\n    if (this.destroyed) return;\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    const media = this.#mediaState.value;\n    let state: AudioTrackRadioGroupCore.State | null = null;\n\n    if (media) {\n      this.#core.setProps({ formatTrack: this.formatTrack, disabled: this.disabled, label: this.label });\n      this.#core.setMedia(media);\n      state = this.#core.getState();\n\n      this.applyDefaultAriaLabel(translateText(this.#core.getLabel(state), this.#i18n.value));\n      this.#options.sync(state, this.#i18n.value, this.#i18n.locale);\n      this.publishMenuOptionState(state.disabled, state.hidden, state.availability);\n    } else {\n      this.publishMenuOptionState(true, true, 'unsupported');\n    }\n\n    super.update(changed);\n\n    if (state) applyStateDataAttrs(this, state, AudioTrackRadioGroupDataAttrs);\n  }\n}\n\nexport namespace AudioTrackRadioGroupElement {\n  export type State = AudioTrackRadioGroupCore.State;\n}\n"],"mappings":";;;;;;;;;;AAgBA,IAAa,8BAAb,cAAiD,sBAAsB;;;EAS1D,KAAA,WAAA;EACY,KAAA,QAAA;EACT,KAAA,cAAA,yBAAyB,aAAa;EAEnC,KAAA,QAAA,IAAI,yBAAyB;EAC7B,KAAA,QAAA,IAAI,eAAe,MAAM,WAAW;EAC9B,KAAA,cAAA,IAAI,iBAAiB,MAAM,eAAe,gBAAgB;EAC7D,KAAA,WAAA,IAAI,uBAAmD,MAAM;GAC/E,oBAAoB,MAAM,WAAW,KAAK,aAAa,cAAc,OAAO,KAAK;GACjF,gBAAgB,UAAU;IACxB,MAAM,QAAQ,KAAKA,YAAY;IAE/B,IAAI,OAAO,KAAKC,MAAM,YAAY,OAAO,KAAK;GAChD;EACF,CAAC;;;EAtBkC,KAAA,UAAA;;;EAEN,KAAA,aAAA;GAC3B,GAAG,sBAAsB;GACzB,UAAU,EAAE,MAAM,QAAQ;GAC1B,OAAO,EAAE,MAAM,OAAO;EACxB;;CAMA;CACA;CACA;CACA;CASA,oBAAmC;EACjC,MAAM,kBAAkB;EAExB,IAAI,KAAK,WAAW;EAEpB,IAAe,CAAC,KAAKD,YAAY,SAAS,KAAKA,YAAY,aACzD,kBAAkB,KAAK,WAAW,KAAKA,YAAY,WAAW;CAElE;CAEA,OAA0B,SAA+B;EACvD,MAAM,QAAQ,KAAKA,YAAY;EAC/B,IAAI,QAA+C;EAEnD,IAAI,OAAO;GACT,KAAKC,MAAM,SAAS;IAAE,aAAa,KAAK;IAAa,UAAU,KAAK;IAAU,OAAO,KAAK;GAAM,CAAC;GACjG,KAAKA,MAAM,SAAS,KAAK;GACzB,QAAQ,KAAKA,MAAM,SAAS;GAE5B,KAAK,sBAAsB,cAAc,KAAKA,MAAM,SAAS,KAAK,GAAG,KAAKC,MAAM,KAAK,CAAC;GACtF,KAAKC,SAAS,KAAK,OAAO,KAAKD,MAAM,OAAO,KAAKA,MAAM,MAAM;GAC7D,KAAK,uBAAuB,MAAM,UAAU,MAAM,QAAQ,MAAM,YAAY;EAC9E,OACE,KAAK,uBAAuB,MAAM,MAAM,aAAa;EAGvD,MAAM,OAAO,OAAO;EAEpB,IAAI,OAAO,oBAAoB,MAAM,OAAO,6BAA6B;CAC3E;AACF"}

package/dist/dev/ui/buffering-indicator/element.d.ts

@@ -0,0 +1,20 @@
+import { UIElement } from "../ui-element.js";
+import { PropertyValues } from "@videojs/element";
+//#region src/ui/buffering-indicator/element.d.ts
+declare class BufferingIndicatorElement extends UIElement {
+  #private;
+  static readonly tagName = "media-buffering-indicator";
+  static properties: {
+    delay: {
+      type: NumberConstructor;
+    };
+  };
+  delay: number;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+  protected willUpdate(changed: PropertyValues): void;
+  protected update(changed: PropertyValues): void;
+}
+//#endregion
+export { BufferingIndicatorElement };
+//# sourceMappingURL=element.d.ts.map

package/dist/dev/ui/buffering-indicator/element.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"element.d.ts","names":[],"sources":["../../../../src/ui/buffering-indicator/element.ts"],"mappings":";;;cAQa,kCAAkC;;kBAC7B;SAEA;;MACL,MAAI;;;EAGf;EAOS;EAgBA;YAMU,WAAW,SAAS;YAKpB,OAAO,SAAS"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"element.js","names":["#core","#state","#disconnect"],"sources":["../../../../src/ui/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/controller';\nimport { UIElement } from '../ui-element';\n\nexport class BufferingIndicatorElement extends UIElement {\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    if (this.destroyed) return;\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    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,UAAU;;;EAO/C,KAAA,QAAA,uBAAuB,aAAa;EAE3B,KAAA,QAAA,IAAI,uBAAuB;EAC1B,KAAA,SAAA,IAAI,iBAAiB,MAAM,eAAe,cAAc;EAEpC,KAAA,cAAA;;;EAXZ,KAAA,UAAA;;;EAEG,KAAA,aAAA,EAC3B,OAAO,EAAE,MAAM,OAAO,EACxB;;CAIA;CACA;CAEA;CAEA,oBAAmC;EACjC,MAAM,kBAAkB;EAExB,IAAI,KAAK,WAAW;EAEpB,KAAKE,cAAc,IAAI,gBAAgB;EAEvC,KAAKF,MAAM,MAAM,gBAAgB,KAAK,cAAc,GAAG,EACrD,QAAQ,KAAKE,YAAY,OAC3B,CAAC;EAED,IAAe,CAAC,KAAKD,OAAO,OAC1B,kBAAkB,KAAK,WAAW,KAAKA,OAAO,WAAY;CAE9D;CAEA,uBAAsC;EACpC,MAAM,qBAAqB;EAC3B,KAAKC,aAAa,MAAM;EACxB,KAAKA,cAAc;CACrB;CAEA,WAA8B,SAA+B;EAC3D,MAAM,WAAW,OAAO;EACxB,KAAKF,MAAM,SAAS,IAAI;CAC1B;CAEA,OAA0B,SAA+B;EACvD,MAAM,OAAO,OAAO;EAEpB,MAAM,QAAQ,KAAKC,OAAO;EAC1B,IAAI,CAAC,OAAO;EAEZ,KAAKD,MAAM,OAAO,KAAK;EACvB,oBAAoB,MAAM,KAAKA,MAAM,MAAM,SAAS,2BAA2B;CACjF;AACF"}