@videojs/html 10.0.0-rc.1 → 10.0.0-rc.3

package/dist/default/player/element.js

@@ -0,0 +1,188 @@
+import { UIElement } from "../ui/ui-element.js";
+import { setPlayerConfigValue } from "@videojs/core/dom";
+import { ContextProvider } from "@videojs/element/context";
+import { camelCase, kebabCase } from "@videojs/utils/string";
+import { isNull } from "@videojs/utils/predicate";
+//#region src/player/element.ts
+function resolveInputs(config) {
+	return Object.entries(config).map(([key, entry]) => {
+		const attribute = entry.html?.attribute ?? kebabCase(key);
+		return {
+			property: camelCase(attribute),
+			attribute,
+			entry
+		};
+	});
+}
+function createPlayerElement(options) {
+	const inputs = resolveInputs(options.config);
+	class ConfiguredPlayerElement extends UIElement {
+		static {
+			this.properties = {
+				...UIElement.properties,
+				...Object.fromEntries(inputs.map(({ property, attribute }) => [property, {
+					type: String,
+					attribute
+				}]))
+			};
+		}
+		#store = options.factory();
+		#configuredStore = null;
+		#detach = null;
+		#connected = false;
+		#media = null;
+		#nativeMedia = null;
+		#container = null;
+		#mediaRegistrations = [];
+		#containerRegistrations = [];
+		#observer = new MutationObserver(() => this.#syncNativeMedia());
+		#registerMedia = (media) => {
+			const registration = { value: media };
+			this.#mediaRegistrations.push(registration);
+			this.#syncMedia();
+			return () => {
+				const index = this.#mediaRegistrations.indexOf(registration);
+				if (index < 0) return;
+				this.#mediaRegistrations.splice(index, 1);
+				this.#syncNativeMedia();
+				this.#syncMedia();
+			};
+		};
+		#registerContainer = (container) => {
+			const registration = { value: container };
+			this.#containerRegistrations.push(registration);
+			this.#syncContainer();
+			return () => {
+				const index = this.#containerRegistrations.indexOf(registration);
+				if (index < 0) return;
+				this.#containerRegistrations.splice(index, 1);
+				this.#syncContainer();
+			};
+		};
+		#playerProvider = new ContextProvider(this, {
+			context: options.playerContext,
+			initialValue: this.store
+		});
+		#mediaProvider = new ContextProvider(this, {
+			context: options.mediaContext,
+			initialValue: {
+				media: this.#media,
+				registerMedia: this.#registerMedia
+			}
+		});
+		#containerProvider = new ContextProvider(this, {
+			context: options.containerContext,
+			initialValue: {
+				container: this.#container,
+				registerContainer: this.#registerContainer
+			}
+		});
+		get store() {
+			if (isNull(this.#store)) this.#store = options.factory();
+			return this.#store;
+		}
+		connectedCallback() {
+			this.#connected = true;
+			super.connectedCallback();
+			this.#syncInitialConfig();
+			this.#playerProvider.setValue(this.store);
+			this.#publishMedia();
+			this.#publishContainer();
+			this.#observer.observe(this, {
+				childList: true,
+				subtree: true
+			});
+			queueMicrotask(() => {
+				if (this.#connected) this.#syncNativeMedia();
+			});
+			this.#tryAttach();
+		}
+		disconnectedCallback() {
+			this.#connected = false;
+			this.#observer.disconnect();
+			this.#detachStore();
+			super.disconnectedCallback();
+		}
+		destroyCallback() {
+			this.#observer.disconnect();
+			this.#detachStore();
+			this.#store?.destroy();
+			this.#store = null;
+			super.destroyCallback();
+		}
+		willUpdate(changed) {
+			super.willUpdate(changed);
+			for (const { property, entry } of inputs) {
+				if (!changed.has(property)) continue;
+				const configProperty = property;
+				setPlayerConfigValue(this.store, entry, this[configProperty]);
+			}
+		}
+		#syncMedia() {
+			const media = this.#mediaRegistrations.at(-1)?.value ?? null ?? this.#nativeMedia;
+			if (this.#media === media) return;
+			this.#media = media;
+			this.#publishMedia();
+			this.#tryAttach();
+		}
+		#syncContainer() {
+			const container = this.#containerRegistrations.at(-1)?.value ?? null;
+			if (this.#container === container) return;
+			this.#container = container;
+			this.#publishContainer();
+			this.#tryAttach();
+		}
+		#syncNativeMedia() {
+			const media = this.querySelector("video, audio");
+			if (this.#nativeMedia === media) return;
+			this.#nativeMedia = media;
+			this.#syncMedia();
+		}
+		#publishMedia() {
+			this.#mediaProvider.setValue({
+				media: this.#media,
+				registerMedia: this.#registerMedia
+			});
+		}
+		#publishContainer() {
+			this.#containerProvider.setValue({
+				container: this.#container,
+				registerContainer: this.#registerContainer
+			});
+		}
+		#tryAttach() {
+			const store = this.#store;
+			if (!this.#connected || !store) return;
+			if (!this.#media) {
+				this.#detachStore();
+				return;
+			}
+			const target = {
+				media: this.#media,
+				container: this.#container
+			};
+			const hasMediaChanged = store.target?.media !== target.media;
+			const hasContainerChanged = store.target?.container !== target.container;
+			if (hasMediaChanged || hasContainerChanged) {
+				this.#detachStore();
+				this.#detach = store.attach(target);
+			}
+		}
+		#detachStore() {
+			this.#detach?.();
+			this.#detach = null;
+		}
+		#syncInitialConfig() {
+			const store = this.store;
+			if (this.#configuredStore === store) return;
+			for (const { property, entry } of inputs) {
+				const configProperty = property;
+				setPlayerConfigValue(store, entry, this[configProperty]);
+			}
+			this.#configuredStore = store;
+		}
+	}
+	return ConfiguredPlayerElement;
+}
+//#endregion
+export { createPlayerElement };

package/dist/default/player/popup-group-context.js

@@ -2,5 +2,3 @@ import { createContext } from "@videojs/element/context";
 const popupGroupContext = createContext(Symbol.for("@videojs/popup-group"));
 //#endregion
 export { popupGroupContext };
-
-//# sourceMappingURL=popup-group-context.js.map

package/dist/default/presets/audio/minimal-skin.js

@@ -17,5 +17,3 @@ var MinimalAudioSkinElement = class extends SkinElement {
 };
 //#endregion
 export { MinimalAudioSkinElement };
-
-//# sourceMappingURL=minimal-skin.js.map

package/dist/default/presets/audio/player.js

@@ -11,5 +11,3 @@ var AudioPlayerElement = class extends PlayerElement {
 };
 //#endregion
 export { AudioPlayerElement, PlayerController };
-
-//# sourceMappingURL=player.js.map

package/dist/default/presets/audio/skin.js

@@ -17,5 +17,3 @@ var AudioSkinElement = class extends SkinElement {
 };
 //#endregion
 export { AudioSkinElement };
-
-//# sourceMappingURL=skin.js.map

package/dist/default/presets/background/player.js

@@ -11,5 +11,3 @@ var BackgroundVideoPlayerElement = class extends PlayerElement {
 };
 //#endregion
 export { BackgroundVideoPlayerElement, PlayerController };
-
-//# sourceMappingURL=player.js.map

package/dist/default/presets/background/skin.js

@@ -1,4 +1,5 @@
 import skin_default from "../../define/background/skin2.js";
+import { SKIN_HELP_TEXT, SKIN_HELP_URL } from "@videojs/core";
 import { ReactiveElement } from "@videojs/element";
 import { ensureGlobalStyle } from "@videojs/utils/dom";
 //#region src/presets/background/skin.ts
@@ -10,6 +11,7 @@ function getTemplateHTML() {
       <slot name="media"></slot>
       <slot></slot>
     </media-container>
+    <a rel="help" href="${SKIN_HELP_URL}" hidden>${SKIN_HELP_TEXT}</a>
   `;
 }
 var BackgroundVideoSkinElement = class BackgroundVideoSkinElement extends ReactiveElement {
@@ -33,5 +35,3 @@ var BackgroundVideoSkinElement = class BackgroundVideoSkinElement extends Reacti
 };
 //#endregion
 export { BackgroundVideoSkinElement };
-
-//# sourceMappingURL=skin.js.map

package/dist/default/presets/live-audio/minimal-skin.js

@@ -17,5 +17,3 @@ var MinimalLiveAudioSkinElement = class extends SkinElement {
 };
 //#endregion
 export { MinimalLiveAudioSkinElement };
-
-//# sourceMappingURL=minimal-skin.js.map

package/dist/default/presets/live-audio/player.js

@@ -11,5 +11,3 @@ var LiveAudioPlayerElement = class extends PlayerElement {
 };
 //#endregion
 export { LiveAudioPlayerElement, PlayerController };
-
-//# sourceMappingURL=player.js.map

package/dist/default/presets/live-audio/skin.js

@@ -17,5 +17,3 @@ var LiveAudioSkinElement = class extends SkinElement {
 };
 //#endregion
 export { LiveAudioSkinElement };
-
-//# sourceMappingURL=skin.js.map

package/dist/default/presets/live-video/minimal-skin.js

@@ -17,5 +17,3 @@ var MinimalLiveVideoSkinElement = class extends SkinElement {
 };
 //#endregion
 export { MinimalLiveVideoSkinElement };
-
-//# sourceMappingURL=minimal-skin.js.map

package/dist/default/presets/live-video/player.js

@@ -11,5 +11,3 @@ var LiveVideoPlayerElement = class extends PlayerElement {
 };
 //#endregion
 export { LiveVideoPlayerElement, PlayerController };
-
-//# sourceMappingURL=player.js.map

package/dist/default/presets/live-video/skin.js

@@ -17,5 +17,3 @@ var LiveVideoSkinElement = class extends SkinElement {
 };
 //#endregion
 export { LiveVideoSkinElement };
-
-//# sourceMappingURL=skin.js.map

package/dist/default/presets/skin.js

@@ -1,10 +1,11 @@
 import global_default from "../define/global.js";
-import shared_default from "../define/shared.js";
+import shadow_default from "../define/shadow.js";
+import { SKIN_HELP_TEXT, SKIN_HELP_URL } from "@videojs/core";
 import { ReactiveElement } from "@videojs/element";
 import { applyShadowStyles, createShadowStyle, ensureGlobalStyle, renderTemplate } from "@videojs/utils/dom";
 //#region src/presets/skin.ts
 const STYLES_ID = "__media-styles";
-const sharedSheet = createShadowStyle(shared_default);
+const shadowSheet = createShadowStyle(shadow_default);
 /**
 * Base element for skin definitions. Attaches a shadow root, clones `static template` into it, and applies shared +
 * per-skin styles via `adoptedStyleSheets` (or `<style>` fallback).
@@ -20,13 +21,21 @@ var SkinElement = class extends ReactiveElement {
 			const ctor = this.constructor;
 			this.attachShadow(ctor.shadowRootOptions);
 			if (ctor.template) renderTemplate(this.shadowRoot, ctor.template);
-			const sheets = [sharedSheet];
+			this.shadowRoot.append(createHelpLink(this.ownerDocument));
+			const sheets = [shadowSheet];
 			if (ctor.styles) sheets.push(ctor.styles);
 			applyShadowStyles(this.shadowRoot, sheets);
 		}
 	}
 };
+/** Every packaged skin links to the page that explains what the player is. See `SKIN_HELP_URL`. */
+function createHelpLink(doc) {
+	const link = doc.createElement("a");
+	link.rel = "help";
+	link.href = SKIN_HELP_URL;
+	link.hidden = true;
+	link.textContent = SKIN_HELP_TEXT;
+	return link;
+}
 //#endregion
 export { SkinElement };
-
-//# sourceMappingURL=skin.js.map

package/dist/default/presets/video/minimal-skin.js

@@ -17,5 +17,3 @@ var MinimalVideoSkinElement = class extends SkinElement {
 };
 //#endregion
 export { MinimalVideoSkinElement };
-
-//# sourceMappingURL=minimal-skin.js.map

package/dist/default/presets/video/player.js

@@ -17,5 +17,3 @@ var VideoPlayerElement = class extends PlayerElement {
 };
 //#endregion
 export { PlayerController, VideoPlayerElement };
-
-//# sourceMappingURL=player.js.map

package/dist/default/presets/video/skin.js

@@ -17,5 +17,3 @@ var VideoSkinElement = class extends SkinElement {
 };
 //#endregion
 export { VideoSkinElement };
-
-//# sourceMappingURL=skin.js.map

package/dist/default/registration/safe-define.js

@@ -14,5 +14,3 @@ function safeDefine(element, tagName = element.tagName) {
 }
 //#endregion
 export { safeDefine };
-
-//# sourceMappingURL=safe-define.js.map

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

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

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

@@ -41,5 +41,3 @@ function createMediaAttachMixin(context) {
 const MediaAttachMixin = createMediaAttachMixin(mediaContext);
 //#endregion
 export { MediaAttachMixin, createMediaAttachMixin };
-
-//# sourceMappingURL=media-attach-mixin.js.map

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

@@ -0,0 +1,22 @@
+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 };

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

@@ -0,0 +1,23 @@
+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 };

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

@@ -0,0 +1,71 @@
+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, selectAudioTrack } from "@videojs/core/dom";
+import { translateText } from "@videojs/core/i18n";
+//#region src/ui/audio-track-radio-group/element.ts
+/**
+* Menu radio group that generates a `<media-menu-radio-item>` per available audio track and shares the selected label
+* and availability with an enclosing menu. An optional `<template>` holding one `<media-menu-radio-item>` customizes
+* each generated item.
+*/
+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;
+	}
+	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 };

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

@@ -0,0 +1,48 @@
+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, 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 });
+	}
+	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 };