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

package/dist/default/ui/popover/element.js

@@ -0,0 +1,188 @@
+import { containerContext } from "../../player/context.js";
+import { UIElement } from "../ui-element.js";
+import { PositionController } from "../position-controller.js";
+import { popupGroupContext } from "../../player/popup-group-context.js";
+import { POPUP_HOST_ATTR, PopoverCore, PopoverDataAttrs } from "@videojs/core";
+import { applyElementProps, applyStateDataAttrs, createPopover, createTransition } from "@videojs/core/dom";
+import { ContextConsumer } from "@videojs/element/context";
+import { tryHidePopover, tryShowPopover } from "@videojs/utils/dom";
+import { SnapshotController } from "@videojs/store/html";
+//#region src/ui/popover/element.ts
+/** @fires open-change - Fired when the popover's open state changes. */
+var PopoverElement = class extends UIElement {
+	constructor(..._args) {
+		super(..._args);
+		this.open = PopoverCore.defaultProps.open;
+		this.defaultOpen = PopoverCore.defaultProps.defaultOpen;
+		this.side = PopoverCore.defaultProps.side;
+		this.align = PopoverCore.defaultProps.align;
+		this.modal = PopoverCore.defaultProps.modal;
+		this.closeOnEscape = PopoverCore.defaultProps.closeOnEscape;
+		this.closeOnOutsideClick = PopoverCore.defaultProps.closeOnOutsideClick;
+		this.openOnHover = PopoverCore.defaultProps.openOnHover;
+		this.delay = PopoverCore.defaultProps.delay;
+		this.closeDelay = PopoverCore.defaultProps.closeDelay;
+		this.boundary = "container";
+		this.#core = new PopoverCore();
+		this.#containerCtx = new ContextConsumer(this, {
+			context: containerContext,
+			subscribe: true
+		});
+		this.#popupGroupCtx = new ContextConsumer(this, { context: popupGroupContext });
+		this.#position = new PositionController(this);
+		this.#popover = null;
+		this.#snapshot = null;
+		this.#disconnect = null;
+		this.#triggerAbort = null;
+		this.#currentTrigger = null;
+	}
+	static {
+		this.tagName = "media-popover";
+	}
+	static {
+		this.properties = {
+			open: { type: Boolean },
+			defaultOpen: {
+				type: Boolean,
+				attribute: "default-open"
+			},
+			side: { type: String },
+			align: { type: String },
+			modal: { type: Boolean },
+			closeOnEscape: {
+				type: Boolean,
+				attribute: "close-on-escape"
+			},
+			closeOnOutsideClick: {
+				type: Boolean,
+				attribute: "close-on-outside-click"
+			},
+			openOnHover: {
+				type: Boolean,
+				attribute: "open-on-hover"
+			},
+			delay: { type: Number },
+			closeDelay: {
+				type: Number,
+				attribute: "close-delay"
+			},
+			boundary: { type: String }
+		};
+	}
+	#core;
+	#containerCtx;
+	#popupGroupCtx;
+	#position;
+	#popover;
+	#snapshot;
+	#disconnect;
+	#triggerAbort;
+	#currentTrigger;
+	connectedCallback() {
+		super.connectedCallback();
+		if (this.destroyed) return;
+		this.setAttribute(POPUP_HOST_ATTR, "");
+		this.#disconnect = new AbortController();
+		this.#popover = createPopover({
+			transition: createTransition(),
+			onOpenChange: (nextOpen, details) => {
+				this.open = nextOpen;
+				this.dispatchEvent(new CustomEvent("open-change", { detail: {
+					open: nextOpen,
+					...details
+				} }));
+			},
+			closeOnEscape: () => this.closeOnEscape,
+			closeOnOutsideClick: () => this.closeOnOutsideClick,
+			openOnHover: () => this.openOnHover,
+			delay: () => this.delay,
+			closeDelay: () => this.closeDelay,
+			group: () => this.#popupGroupCtx.value
+		});
+		this.#popover.setPopupElement(this);
+		applyElementProps(this, this.#popover.popupProps, { signal: this.#disconnect.signal });
+		if (this.#snapshot) this.#snapshot.track(this.#popover.input);
+		else this.#snapshot = new SnapshotController(this, this.#popover.input);
+	}
+	firstUpdated(changed) {
+		super.firstUpdated(changed);
+		if (this.defaultOpen && !this.open) this.#popover?.open();
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.#disconnect?.abort();
+		this.#disconnect = null;
+	}
+	destroyCallback() {
+		this.#cleanupTrigger();
+		this.#popover?.destroy();
+		super.destroyCallback();
+	}
+	close(reason = "imperative-action") {
+		this.#popover?.close(reason);
+	}
+	get triggerElement() {
+		return this.#currentTrigger;
+	}
+	willUpdate(changed) {
+		super.willUpdate(changed);
+		this.#core.setProps(this);
+		if (this.#popover && changed.has("open")) {
+			const { active: interactionOpen } = this.#popover.input.current;
+			if (this.open !== interactionOpen) if (this.open) this.#popover.open();
+			else this.#popover.close();
+		}
+	}
+	update(_changed) {
+		super.update(_changed);
+		if (!this.#popover) return;
+		const triggerEl = this.#position.findTrigger();
+		this.#syncTrigger(triggerEl);
+		const input = this.#popover.input.current;
+		this.#core.setInput(input);
+		const state = this.#core.getState();
+		applyElementProps(this, this.#core.getPopupAttrs(state));
+		applyStateDataAttrs(this, state, PopoverDataAttrs);
+		if (state.open) tryShowPopover(this);
+		else tryHidePopover(this);
+		if (this.#currentTrigger) applyElementProps(this.#currentTrigger, this.#core.getTriggerAttrs(state, this.id));
+		if (!state.open) {
+			this.#position.cleanup();
+			return;
+		}
+		this.#position.sync({
+			anchorName: this.id,
+			position: {
+				side: state.side,
+				align: state.align
+			},
+			trigger: this.#currentTrigger,
+			boundary: this.boundary,
+			container: this.#containerCtx.value?.container ?? null,
+			onSideChange: (side) => this.setAttribute(PopoverDataAttrs.side, side)
+		});
+	}
+	#syncTrigger(triggerEl) {
+		if (triggerEl === this.#currentTrigger) return;
+		this.#position.cleanup();
+		this.#cleanupTrigger();
+		this.#currentTrigger = triggerEl;
+		this.#popover?.setTriggerElement(triggerEl);
+		if (triggerEl && this.#popover) {
+			this.#triggerAbort = new AbortController();
+			applyElementProps(triggerEl, this.#popover.triggerProps, { signal: this.#triggerAbort.signal });
+		}
+	}
+	#cleanupTrigger() {
+		if (this.#currentTrigger) applyElementProps(this.#currentTrigger, {
+			"aria-expanded": void 0,
+			"aria-haspopup": void 0,
+			"aria-controls": void 0
+		});
+		this.#triggerAbort?.abort();
+		this.#triggerAbort = null;
+		this.#currentTrigger = null;
+	}
+};
+//#endregion
+export { PopoverElement };

package/dist/default/ui/position-controller.js

@@ -74,5 +74,3 @@ function nextPopupId(root) {
 }
 //#endregion
 export { PositionController };
-
-//# sourceMappingURL=position-controller.js.map

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

@@ -0,0 +1,158 @@
+import { playerContext } from "../../player/context.js";
+import { PlayerController } from "../../player/controller.js";
+import { UIElement } from "../ui-element.js";
+import { PosterCore, PosterDataAttrs } from "@videojs/core";
+import { applyStateDataAttrs, selectMetadata, selectPlayback } from "@videojs/core/dom";
+import { findComposedElement, isHTMLImageElement } from "@videojs/utils/dom";
+//#region src/ui/poster/element.ts
+const SHADOW_CSS = `\
+:host {
+  display: block;
+}
+img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: var(--media-object-fit, contain);
+  object-position: var(--media-object-position, center);
+}
+img:not([src]) {
+  visibility: hidden;
+}`;
+/**
+* Whether anything already points this image somewhere, which answers both whether the author owns the source and
+* whether there is a download to wait for. A `<source>` counts: inside a `<picture>` it can win over the `src`.
+*/
+function hasSource(img) {
+	if (img.hasAttribute("src") || img.hasAttribute("srcset")) return true;
+	const parent = img.parentElement;
+	return parent?.localName === "picture" && parent.querySelector("source") !== null;
+}
+/**
+* Whether `complete` on this image describes a request. It is also true for one that omits both `src` and `srcset`,
+* whatever a parent `<picture>` is fetching on its behalf, so only an image sourced from its own attributes can be
+* read.
+*/
+function hasOwnSource(img) {
+	return !!img.getAttribute("src") || img.hasAttribute("srcset");
+}
+/**
+* The image the element draws when none is supplied, reachable from outside as `::part(image)`. Decorative by default,
+* like the one each skin carries: a resolved URL says nothing about what it depicts.
+*/
+function createFallbackImage() {
+	const img = document.createElement("img");
+	img.alt = "";
+	img.setAttribute("part", "image");
+	img.setAttribute("decoding", "async");
+	return img;
+}
+/**
+* `<media-poster>` — sets `src` on a poster image it does not own.
+*
+* The image is a child, as in `<picture>`, but sourcing runs the other way around: `<picture>` treats the `src` on its
+* `<img>` as the fallback, while here an image with no source of its own is the one this element fills in. Give the
+* child a `src`, a `srcset`, or `<source>` candidates and it is yours, left alone.
+*
+* Left empty, the element draws an image of its own in its shadow root. Supply one as a child to describe it or wrap
+* it: `<media-poster><img alt="Keynote speaker"></media-poster>`. Inside a skin, an `<img slot="poster">` of yours
+* replaces the one the skin carries.
+*/
+var PosterElement = class extends UIElement {
+	static {
+		this.tagName = "media-poster";
+	}
+	#core = new PosterCore();
+	#shadow = this.attachShadow({ mode: "open" });
+	#fallback = createFallbackImage();
+	#children = new MutationObserver(() => this.requestUpdate());
+	#playback = new PlayerController(this, playerContext, selectPlayback);
+	#metadata = new PlayerController(this, playerContext, selectMetadata);
+	#image = null;
+	/** Whether `#image` had no source of its own when it became active. */
+	#owned = false;
+	#imageLoadState = "pending";
+	#imageEvents = null;
+	#disconnect = null;
+	constructor() {
+		super();
+		const style = document.createElement("style");
+		style.textContent = SHADOW_CSS;
+		this.#shadow.append(style, document.createElement("slot"), this.#fallback);
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		if (this.destroyed) return;
+		this.#disconnect = new AbortController();
+		const { signal } = this.#disconnect;
+		this.addEventListener("slotchange", () => this.requestUpdate(), { signal });
+		this.#children.observe(this, {
+			childList: true,
+			subtree: true
+		});
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.#adopt(null);
+		this.#children.disconnect();
+		this.#disconnect?.abort();
+		this.#disconnect = null;
+	}
+	get #loadState() {
+		if (!this.#image || !hasSource(this.#image)) return "none";
+		return this.#imageLoadState === "pending" ? "loading" : this.#imageLoadState;
+	}
+	update(changed) {
+		super.update(changed);
+		const playback = this.#playback.value;
+		if (!playback) return;
+		this.#core.setMedia({
+			started: playback.started,
+			poster: this.#metadata.value?.poster ?? ""
+		});
+		const { src } = this.#core.getState();
+		this.#adopt(findComposedElement(this, isHTMLImageElement) ?? this.#fallback);
+		this.#applySource(src);
+		this.#core.setImageLoadState(this.#loadState);
+		applyStateDataAttrs(this, this.#core.getState(), PosterDataAttrs);
+	}
+	/**
+	* Ownership is settled once, when an image becomes active: after the first fill the `src` we set would itself look
+	* authored. Re-slot an image with a source to hand it back, the way React decides a field is controlled at mount.
+	*/
+	#adopt(next) {
+		if (next === this.#image) return;
+		if (this.#owned) this.#image?.removeAttribute("src");
+		this.#imageEvents?.abort();
+		this.#imageEvents = null;
+		this.#image = next;
+		this.#owned = next !== null && !hasSource(next);
+		this.#imageLoadState = "pending";
+		if (next === this.#fallback) this.#shadow.append(this.#fallback);
+		else if (next) this.#fallback.remove();
+		if (!next) return;
+		if (next.naturalWidth > 0) this.#imageLoadState = "loaded";
+		else if (next.complete && hasOwnSource(next)) this.#imageLoadState = "error";
+		this.#imageEvents = new AbortController();
+		const { signal } = this.#imageEvents;
+		const settle = (loadState) => () => {
+			this.#imageLoadState = loadState;
+			this.requestUpdate();
+		};
+		next.addEventListener("load", settle("loaded"), { signal });
+		next.addEventListener("error", settle("error"), { signal });
+	}
+	#applySource(src) {
+		const img = this.#image;
+		if (!img || !this.#owned) return;
+		if (!src) {
+			this.#imageLoadState = "pending";
+			img.removeAttribute("src");
+		} else if (img.getAttribute("src") !== src) {
+			this.#imageLoadState = "pending";
+			img.setAttribute("src", src);
+		}
+	}
+};
+//#endregion
+export { PosterElement };

package/dist/default/ui/quality-radio-group/element.js

@@ -0,0 +1,93 @@
+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 { QualityRadioGroupCore, QualityRadioGroupDataAttrs } from "@videojs/core";
+import { applyStateDataAttrs, selectQuality } from "@videojs/core/dom";
+import { translateText } from "@videojs/core/i18n";
+//#region src/ui/quality-radio-group/element.ts
+/**
+* Menu radio group that generates an Auto `<media-menu-radio-item>` plus one per video rendition, and shares the
+* selected label and availability with an enclosing menu. An optional `<template>` holding one
+* `<media-menu-radio-item>` customizes each generated item; its `data-part` `label`, `tier`, and `badge` descendants
+* receive the rendition's text.
+*/
+var QualityRadioGroupElement = class extends MenuRadioGroupElement {
+	constructor(..._args) {
+		super(..._args);
+		this.disabled = false;
+		this.label = "";
+		this.formatRendition = QualityRadioGroupCore.defaultProps.formatRendition;
+		this.#core = new QualityRadioGroupCore();
+		this.#i18n = new I18nController(this, i18nContext);
+		this.#mediaState = new PlayerController(this, playerContext, selectQuality);
+		this.#options = new RadioOptionsController(this, {
+			renderItem: (item, label, option) => this.#setContent(item, label, option.tier, option.badge),
+			setItemAttributes: (item, option) => item.setAttribute("data-rendition", option.value),
+			getOptionCacheKey: (option) => `${option.tier ?? ""}:${option.badge ?? ""}`,
+			onValueChange: (value) => {
+				const media = this.#mediaState.value;
+				if (media) this.#core.selectValue(media, value);
+			}
+		});
+	}
+	static {
+		this.tagName = "media-quality-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({
+				formatRendition: this.formatRendition,
+				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, QualityRadioGroupDataAttrs);
+	}
+	#setContent(item, label, tier, badge) {
+		const labelPart = item.querySelector("[data-part~=\"label\"]");
+		const tierPart = item.querySelector("[data-part~=\"tier\"]");
+		const badgePart = item.querySelector("[data-part~=\"badge\"]");
+		if (labelPart) labelPart.textContent = label;
+		if (tierPart) {
+			tierPart.textContent = tier ?? "";
+			tierPart.hidden = !tier;
+		}
+		if (badgePart) {
+			badgePart.textContent = badge ?? "";
+			badgePart.hidden = !badge;
+		}
+		if (!labelPart && !tierPart && !badgePart) item.textContent = [
+			label,
+			tier,
+			badge
+		].filter(Boolean).join(" ");
+	}
+};
+//#endregion
+export { QualityRadioGroupElement };

package/dist/default/ui/radio-group/context.js

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

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

@@ -0,0 +1,31 @@
+import { UIElement } from "../ui-element.js";
+import { radioGroupContext } from "./context.js";
+import { ContextProvider } from "@videojs/element/context";
+//#region src/ui/radio-group/element.ts
+/** @fires value-change - Fired when the selected value changes. */
+var RadioGroupElement = class extends UIElement {
+	constructor(..._args) {
+		super(..._args);
+		this.value = "";
+		this.#provider = new ContextProvider(this, { context: radioGroupContext });
+	}
+	static {
+		this.properties = { value: { type: String } };
+	}
+	#provider;
+	update(changed) {
+		super.update(changed);
+		this.#provider.setValue({
+			value: this.value,
+			onValueChange: (next) => {
+				this.value = next;
+				this.dispatchEvent(new CustomEvent("value-change", {
+					detail: { value: next },
+					bubbles: true
+				}));
+			}
+		});
+	}
+};
+//#endregion
+export { RadioGroupElement };

package/dist/default/ui/radio-options/controller.js

@@ -0,0 +1,79 @@
+import { MenuRadioItemElement } from "../menu/radio-item.js";
+import { cacheKey } from "../../i18n/cache-key.js";
+import { MenuItemIndicatorElement } from "../menu/item-indicator.js";
+import { applyElementProps } from "@videojs/core/dom";
+import { translateText } from "@videojs/core/i18n";
+import { cloneTemplateRoot, getTemplateElement, getTemplateRoot } from "@videojs/utils/dom";
+//#region src/ui/radio-options/controller.ts
+/** Renders normalized options into menu radio items and manages their interaction lifecycle. */
+var RadioOptionsController = class {
+	#host;
+	#config;
+	#contentKey = "";
+	#translator = null;
+	#disconnect = null;
+	constructor(host, config) {
+		this.#host = host;
+		this.#config = config;
+		host.addController(this);
+	}
+	hostConnected() {
+		this.#disconnect = new AbortController();
+		this.#host.addEventListener("value-change", this.#handleValueChange, { signal: this.#disconnect.signal });
+	}
+	hostDisconnected() {
+		this.#disconnect?.abort();
+		this.#disconnect = null;
+	}
+	hostDestroyed() {
+		this.hostDisconnected();
+	}
+	sync(state, translator, locale) {
+		this.#host.value = state.value;
+		applyElementProps(this.#host, {
+			"aria-disabled": state.disabled ? "true" : void 0,
+			hidden: state.hidden ? "" : void 0
+		});
+		const template = getTemplateElement(this.#host);
+		const templateRoot = template ? getTemplateRoot(template) : null;
+		const itemRoot = templateRoot?.localName === MenuRadioItemElement.tagName ? templateRoot : null;
+		const contentKey = `${state.options.map((option) => `${option.value}:${cacheKey(option.label, option.labelParams)}:${this.#config.getOptionCacheKey?.(option) ?? ""}`).join("|")}::${locale}::${template?.innerHTML ?? ""}`;
+		if (contentKey !== this.#contentKey || translator !== this.#translator) {
+			this.#contentKey = contentKey;
+			this.#translator = translator;
+			for (const child of [...this.#host.children]) {
+				if (child === template) continue;
+				child.remove();
+			}
+			const items = state.options.map((option) => {
+				const item = itemRoot ? cloneTemplateRoot(itemRoot, this.#host.ownerDocument) : this.#host.ownerDocument.createElement(MenuRadioItemElement.tagName);
+				item.value = option.value;
+				this.#config.setItemAttributes?.(item, option);
+				const label = translateText(option.label, translator, option.labelParams);
+				if (this.#config.renderItem) this.#config.renderItem(item, label, option);
+				else this.#setItemLabel(item, label);
+				return item;
+			});
+			this.#host.append(...items);
+		}
+		const optionsByValue = new Map(state.options.map((option) => [option.value, option]));
+		for (const item of this.#host.querySelectorAll(MenuRadioItemElement.tagName)) {
+			const checked = item.value === state.value;
+			const option = optionsByValue.get(item.value);
+			item.disabled = state.disabled || option?.disabled === true;
+			for (const indicator of item.querySelectorAll(MenuItemIndicatorElement.tagName)) indicator.checked = checked;
+		}
+	}
+	#handleValueChange = (event) => {
+		if (event.target !== this.#host) return;
+		const { value } = event.detail;
+		this.#config.onValueChange(value);
+	};
+	#setItemLabel(item, label) {
+		const labelPart = item.querySelector("[data-part~=\"label\"]");
+		if (labelPart) labelPart.textContent = label;
+		else item.textContent = label;
+	}
+};
+//#endregion
+export { RadioOptionsController };

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

@@ -0,0 +1,33 @@
+import { playerContext } from "../../player/context.js";
+import { PlayerController } from "../../player/controller.js";
+import { MediaButtonElement } from "../media-button-element.js";
+import { SeekButtonCore, SeekButtonDataAttrs } from "@videojs/core";
+import { selectTime } from "@videojs/core/dom";
+//#region src/ui/seek-button/element.ts
+var SeekButtonElement = class extends MediaButtonElement {
+	constructor(..._args) {
+		super(..._args);
+		this.seconds = SeekButtonCore.defaultProps.seconds;
+		this.core = new SeekButtonCore();
+		this.stateAttrMap = SeekButtonDataAttrs;
+		this.mediaState = new PlayerController(this, playerContext, selectTime);
+		this.hotkeyAction = "seekStep";
+	}
+	static {
+		this.tagName = "media-seek-button";
+	}
+	static {
+		this.properties = {
+			...MediaButtonElement.properties,
+			seconds: { type: Number }
+		};
+	}
+	get hotkeyValue() {
+		return this.seconds;
+	}
+	activate(state) {
+		this.core.seek(state);
+	}
+};
+//#endregion
+export { SeekButtonElement };

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

@@ -0,0 +1,42 @@
+import { InputIndicatorElement } from "../input-indicator/element.js";
+import { LiveIndicator } from "../input-indicator/live-indicator.js";
+import { SeekIndicatorCore, SeekIndicatorDataAttrs, getSeekIndicatorDisplayValue } from "@videojs/core";
+import { createTransition } from "@videojs/core/dom";
+//#region src/ui/seek-indicator/element.ts
+var SeekIndicatorElement = class extends InputIndicatorElement {
+	static {
+		this.tagName = "media-seek-indicator";
+	}
+	static {
+		this.properties = { closeDelay: {
+			type: Number,
+			attribute: "close-delay"
+		} };
+	}
+	#core = new SeekIndicatorCore();
+	#transition = createTransition();
+	#liveIndicator = new LiveIndicator({
+		host: this,
+		dataAttrs: SeekIndicatorDataAttrs,
+		render: renderSeekIndicator
+	});
+	get core() {
+		return this.#core;
+	}
+	get transition() {
+		return this.#transition;
+	}
+	get liveIndicator() {
+		return this.#liveIndicator;
+	}
+	syncCoreProps() {
+		this.#core.setProps({ closeDelay: this.closeDelay });
+	}
+};
+function renderSeekIndicator(element, state) {
+	const value = element.querySelector("media-seek-indicator-value");
+	if (!value) return;
+	value.textContent = getSeekIndicatorDisplayValue(state);
+}
+//#endregion
+export { SeekIndicatorElement };

package/dist/default/ui/seek-indicator/value.js

@@ -0,0 +1,9 @@
+import { UIElement } from "../ui-element.js";
+//#region src/ui/seek-indicator/value.ts
+var SeekIndicatorValueElement = class extends UIElement {
+	static {
+		this.tagName = "media-seek-indicator-value";
+	}
+};
+//#endregion
+export { SeekIndicatorValueElement };

package/dist/default/ui/slider/buffer.js

@@ -0,0 +1,18 @@
+import { ContextPartElement } from "../context-part-element.js";
+import { sliderContext } from "./context.js";
+import { ContextConsumer } from "@videojs/element/context";
+//#region src/ui/slider/buffer.ts
+var SliderBufferElement = class extends ContextPartElement {
+	constructor(..._args) {
+		super(..._args);
+		this.consumer = new ContextConsumer(this, {
+			context: sliderContext,
+			subscribe: true
+		});
+	}
+	static {
+		this.tagName = "media-slider-buffer";
+	}
+};
+//#endregion
+export { SliderBufferElement };

package/dist/default/ui/slider/context.js

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