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

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

@@ -0,0 +1,236 @@
+import { playerContext } from "../../player/context.js";
+import { PlayerController } from "../../player/controller.js";
+import { UIElement } from "../ui-element.js";
+import { ThumbnailCore, ThumbnailDataAttrs, mapCuesToThumbnails } from "@videojs/core";
+import { applyElementProps, applyStateDataAttrs, createThumbnail, selectTextTrack } from "@videojs/core/dom";
+import { findComposedElement, isHTMLImageElement, listen } from "@videojs/utils/dom";
+//#region src/ui/thumbnail/element.ts
+const SHADOW_CSS = `\
+:host {
+  display: inline-block;
+  overflow: hidden;
+}
+img,
+::slotted(img) {
+  display: block;
+}`;
+/**
+* Image attributes the element fills in from its own properties. Ones already on an image when it is adopted are the
+* author's and are left alone, so an `<img slot="thumbnail" loading="lazy">` keeps its settings inside a skin.
+*/
+const IMAGE_ATTRIBUTES = [
+	"crossorigin",
+	"loading",
+	"fetchpriority"
+];
+/** The image the element draws when none is supplied, reachable from outside as `::part(image)`. */
+function createFallbackImage() {
+	const img = document.createElement("img");
+	img.alt = "";
+	img.setAttribute("part", "image");
+	img.setAttribute("aria-hidden", "true");
+	img.setAttribute("decoding", "async");
+	return img;
+}
+/**
+* `<media-thumbnail>` — resolves and sizes a time-based thumbnail into an image.
+*
+* The element owns `src` and `srcset` on the active image. Left empty, it draws an image of its own in its shadow root.
+* Supply an `<img>` child instead — `<media-thumbnail time="12"><img alt=""></media-thumbnail>` — to compose overlays
+* or loading indicators beside the image the element controls. Any `crossorigin`, `loading`, or `fetchpriority` the
+* child already carries wins over the element's own; the rest are filled in. Inside a skin, an `<img slot="thumbnail">`
+* of yours replaces the one the skin carries.
+*/
+var ThumbnailElement = class extends UIElement {
+	static {
+		this.tagName = "media-thumbnail";
+	}
+	static {
+		this.properties = {
+			time: { type: Number },
+			crossOrigin: {
+				type: String,
+				attribute: "crossorigin"
+			},
+			loading: { type: String },
+			fetchPriority: {
+				type: String,
+				attribute: "fetchpriority"
+			}
+		};
+	}
+	#core;
+	#shadow;
+	#fallback;
+	#children;
+	#imageAttributes;
+	#textTracks;
+	#slots;
+	#img;
+	/** Attributes `#img` already carried when adopted, which the author owns. */
+	#authored;
+	#thumbnails;
+	#externalThumbnails;
+	#lastTextTrack;
+	#api;
+	constructor() {
+		super();
+		this.time = 0;
+		this.#core = new ThumbnailCore();
+		this.#shadow = this.attachShadow({ mode: "open" });
+		this.#fallback = createFallbackImage();
+		this.#children = new MutationObserver(() => this.requestUpdate());
+		this.#imageAttributes = new MutationObserver(() => this.requestUpdate());
+		this.#textTracks = new PlayerController(this, playerContext, selectTextTrack);
+		this.#slots = null;
+		this.#img = null;
+		this.#authored = /* @__PURE__ */ new Set();
+		this.#thumbnails = [];
+		this.#api = null;
+		const style = document.createElement("style");
+		style.textContent = SHADOW_CSS;
+		this.#shadow.append(style, document.createElement("slot"), this.#fallback);
+	}
+	/**
+	* Set thumbnail images directly, bypassing the automatic `<track>` detection. When set, this takes priority over the
+	* text track path.
+	*/
+	get thumbnails() {
+		return this.#externalThumbnails;
+	}
+	set thumbnails(value) {
+		this.#externalThumbnails = value;
+		this.requestUpdate();
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		if (this.destroyed) return;
+		this.#api = createThumbnail({
+			getContainer: () => this,
+			getImg: () => this.#img,
+			onStateChange: () => this.requestUpdate()
+		});
+		this.#children.observe(this, {
+			childList: true,
+			subtree: true,
+			attributes: true,
+			attributeFilter: ["src", "srcset"]
+		});
+		this.#slots = new AbortController();
+		listen(this, "slotchange", () => this.requestUpdate(), { signal: this.#slots.signal });
+		this.requestUpdate();
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.#adopt(null);
+		this.#children.disconnect();
+		this.#slots?.abort();
+		this.#slots = null;
+		this.#api?.destroy();
+		this.#api = null;
+	}
+	destroyCallback() {
+		this.#api?.destroy();
+		super.destroyCallback();
+	}
+	update(changed) {
+		super.update(changed);
+		const textTrack = this.#textTracks.value;
+		if (this.#externalThumbnails) this.#thumbnails = this.#externalThumbnails;
+		else if (textTrack !== this.#lastTextTrack) {
+			this.#lastTextTrack = textTrack;
+			this.#thumbnails = textTrack && textTrack.thumbnailCues.length > 0 ? mapCuesToThumbnails(textTrack.thumbnailCues, textTrack.thumbnailTrackSrc ?? void 0) : [];
+		}
+		const thumbnail = this.#core.findActiveThumbnail(this.#thumbnails, this.time);
+		const img = findComposedElement(this, isHTMLImageElement) ?? this.#fallback;
+		this.#adopt(img);
+		this.#applyImageAttributes(img, textTrack);
+		this.#api?.updateSrc(thumbnail?.url);
+		this.#applySource(thumbnail?.url);
+		this.#api?.connect();
+		if (!thumbnail) {
+			this.#resetStyles();
+			const state = this.#core.getState(false, false, void 0);
+			applyElementProps(this, this.#core.getAttrs(state));
+			applyStateDataAttrs(this, state, ThumbnailDataAttrs);
+			return;
+		}
+		const api = this.#api;
+		const state = this.#core.getState(api?.loading ?? false, api?.error ?? false, thumbnail);
+		applyElementProps(this, this.#core.getAttrs(state));
+		applyStateDataAttrs(this, state, ThumbnailDataAttrs);
+		if (api?.naturalWidth && api.naturalHeight) {
+			const constraints = api.readConstraints();
+			const result = this.#core.resize(thumbnail, api.naturalWidth, api.naturalHeight, constraints);
+			if (result) this.#applyResize(result);
+		}
+	}
+	/**
+	* Leaving `crossOrigin` unset means "follow the media element", so thumbnails keep working on a CORS-enabled player
+	* without a skin having to thread an attribute through. Only the `<track>` path inherits: `thumbnails` set directly
+	* may point at a host that has nothing to do with the media element.
+	*/
+	#inheritedCrossOrigin(textTrack) {
+		return this.#externalThumbnails ? void 0 : textTrack?.thumbnailTrackCrossOrigin;
+	}
+	/** Sync image attributes from element properties, leaving the ones the author put on the image alone. */
+	#applyImageAttributes(img, textTrack) {
+		const props = {
+			crossorigin: this.#core.resolveCrossOrigin(this.crossOrigin, this.#inheritedCrossOrigin(textTrack)),
+			loading: this.loading,
+			fetchpriority: this.fetchPriority
+		};
+		for (const name of this.#authored) delete props[name];
+		applyElementProps(img, props);
+	}
+	#applyResize(result) {
+		this.style.width = `${result.containerWidth}px`;
+		this.style.height = `${result.containerHeight}px`;
+		const imgStyle = this.#img?.style;
+		if (!imgStyle) return;
+		imgStyle.width = `${result.imageWidth}px`;
+		imgStyle.height = `${result.imageHeight}px`;
+		imgStyle.maxWidth = "none";
+		imgStyle.transform = result.offsetX || result.offsetY ? `translate(-${result.offsetX}px, -${result.offsetY}px)` : "";
+	}
+	#resetStyles() {
+		this.style.width = "";
+		this.style.height = "";
+		const imgStyle = this.#img?.style;
+		if (!imgStyle) return;
+		imgStyle.width = "";
+		imgStyle.height = "";
+		imgStyle.maxWidth = "";
+		imgStyle.transform = "";
+	}
+	#adopt(next) {
+		if (next === this.#img) return;
+		const previous = this.#img;
+		if (previous) {
+			this.#api?.disconnectImg(previous);
+			this.#resetStyles();
+			previous.removeAttribute("src");
+			previous.removeAttribute("srcset");
+			for (const name of IMAGE_ATTRIBUTES) if (!this.#authored.has(name)) previous.removeAttribute(name);
+		}
+		this.#img = next;
+		this.#authored = new Set(next ? IMAGE_ATTRIBUTES.filter((name) => next.hasAttribute(name)) : []);
+		this.#imageAttributes.disconnect();
+		if (next && next !== this.#fallback) this.#imageAttributes.observe(next, {
+			attributes: true,
+			attributeFilter: ["src", "srcset"]
+		});
+		if (next === this.#fallback) this.#shadow.append(this.#fallback);
+		else if (next) this.#fallback.remove();
+		this.#api?.updateSrc(void 0);
+	}
+	#applySource(src) {
+		const img = this.#img;
+		if (!img) return;
+		img.removeAttribute("srcset");
+		if (!src) img.removeAttribute("src");
+		else if (img.getAttribute("src") !== src) img.setAttribute("src", src);
+	}
+};
+//#endregion
+export { ThumbnailElement };

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

@@ -0,0 +1,169 @@
+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 { UIElement } from "../ui-element.js";
+import { TimeCore, TimeDataAttrs } from "@videojs/core";
+import { applyElementProps, applyStateDataAttrs, selectBuffer, selectTime } from "@videojs/core/dom";
+import { hasTimeRange } from "@videojs/media";
+import { translateText } from "@videojs/core/i18n";
+import { isInteractiveActivation } from "@videojs/utils/dom";
+import { durationSuffixText, elapsedSuffixText, remainingSuffixText } from "@videojs/core/i18n/text/time";
+import { formatTimeAsPhrase } from "@videojs/utils/time";
+//#region src/ui/time/element.ts
+var TimeElement = class extends UIElement {
+	constructor(..._args) {
+		super(..._args);
+		this.type = TimeCore.defaultProps.type;
+		this.negativeSign = TimeCore.defaultProps.negativeSign;
+		this.label = "";
+		this.toggle = TimeCore.defaultProps.toggle;
+		this.#core = new TimeCore();
+		this.#state = new PlayerController(this, playerContext, selectTime);
+		this.#buffer = new PlayerController(this, playerContext, selectBuffer);
+		this.#i18n = new I18nController(this, i18nContext);
+		this.#signSpan = document.createElement("span");
+		this.#textNode = new Text();
+		this.#disconnect = null;
+		this.#listening = false;
+		this.#activeType = TimeCore.defaultProps.type;
+		this.#handleClick = (event) => {
+			if (event.defaultPrevented || !this.toggle || !this.#state.value || !this.#hasTimeRange()) return;
+			this.#toggleType();
+		};
+		this.#handleKeyDown = (event) => {
+			if (event.defaultPrevented || !isInteractiveActivation(event)) return;
+			if (!this.toggle || !this.#state.value || !this.#hasTimeRange()) return;
+			event.preventDefault();
+			if (event.repeat) return;
+			this.#toggleType();
+		};
+	}
+	static {
+		this.tagName = "media-time";
+	}
+	static {
+		this.properties = {
+			type: { type: String },
+			negativeSign: {
+				type: String,
+				attribute: "negative-sign"
+			},
+			label: { type: String },
+			toggle: { type: Boolean }
+		};
+	}
+	#core;
+	#state;
+	#buffer;
+	#i18n;
+	#signSpan;
+	#textNode;
+	#disconnect;
+	#listening;
+	#activeType;
+	connectedCallback() {
+		super.connectedCallback();
+		this.#disconnect = new AbortController();
+		this.#syncListeners();
+		if (!this.#signSpan.parentNode) {
+			this.#signSpan.setAttribute("aria-hidden", "true");
+			this.#signSpan.hidden = true;
+			this.append(this.#signSpan, this.#textNode);
+		}
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.#disconnect?.abort();
+		this.#disconnect = null;
+		this.#listening = false;
+	}
+	willUpdate(changed) {
+		super.willUpdate(changed);
+		if (changed.has("type") || changed.has("toggle")) this.#activeType = this.type;
+	}
+	update(changed) {
+		super.update(changed);
+		if (changed.has("toggle")) this.#syncListeners();
+		const media = this.#state.value;
+		if (!media) {
+			this.#clearAttrs();
+			return;
+		}
+		this.#core.setProps({
+			type: this.toggle ? this.#activeType : this.type,
+			negativeSign: this.negativeSign,
+			label: this.label,
+			toggle: this.toggle
+		});
+		this.#core.setMedia({
+			...media,
+			seekable: this.#buffer.value?.seekable ?? []
+		});
+		this.#core.setFormatLocale(this.#i18n.locale);
+		const state = this.#core.getState();
+		this.#signSpan.hidden = !state.negative;
+		this.#signSpan.textContent = state.negative ? this.negativeSign : "";
+		this.#textNode.textContent = state.text;
+		const attrs = this.#core.getAttrs(state, this.type);
+		const label = translateText(attrs["aria-label"], this.#i18n.value, this.#getLabelParams(state));
+		const description = attrs["aria-description"] ? translateText(attrs["aria-description"], this.#i18n.value) : void 0;
+		applyElementProps(this, {
+			"aria-label": label,
+			"aria-description": description,
+			"aria-disabled": attrs["aria-disabled"],
+			role: this.toggle ? attrs.role : "time",
+			tabIndex: attrs.tabIndex,
+			datetime: this.toggle || state.unavailable ? void 0 : state.datetime
+		});
+		applyStateDataAttrs(this, state, TimeDataAttrs);
+	}
+	#getLabelParams(state) {
+		if (!this.#core.getLabelParams(state)) return void 0;
+		const duration = formatTimeAsPhrase(Math.abs(state.seconds), { locale: this.#i18n.locale });
+		const text = {
+			current: elapsedSuffixText,
+			duration: durationSuffixText,
+			remaining: remainingSuffixText
+		}[state.type];
+		return { duration: translateText(text, this.#i18n.value, { duration }) };
+	}
+	#handleClick;
+	#handleKeyDown;
+	#toggleType() {
+		if (this.type === "current") this.#activeType = this.#activeType === "remaining" ? "current" : "remaining";
+		else this.#activeType = this.#activeType === "duration" ? "remaining" : "duration";
+		this.requestUpdate();
+	}
+	#hasTimeRange() {
+		const media = this.#state.value;
+		if (!media) return false;
+		return hasTimeRange({
+			...media,
+			seekable: this.#buffer.value?.seekable ?? []
+		});
+	}
+	#syncListeners() {
+		if (!this.toggle || !this.#disconnect || this.#listening) return;
+		this.#listening = true;
+		applyElementProps(this, {
+			onClick: this.#handleClick,
+			onKeyDown: this.#handleKeyDown
+		}, { signal: this.#disconnect.signal });
+	}
+	#clearAttrs() {
+		applyElementProps(this, {
+			"aria-label": void 0,
+			"aria-description": void 0,
+			"aria-disabled": void 0,
+			role: void 0,
+			tabIndex: void 0,
+			datetime: void 0,
+			"data-type": void 0,
+			"data-disabled": void 0,
+			"data-unavailable": void 0
+		});
+	}
+};
+//#endregion
+export { TimeElement };

package/dist/default/ui/time/group.js

@@ -0,0 +1,10 @@
+import { UIElement } from "../ui-element.js";
+//#region src/ui/time/group.ts
+/** Container for composed `<media-time>` and `<media-time-separator>` displays. */
+var TimeGroupElement = class extends UIElement {
+	static {
+		this.tagName = "media-time-group";
+	}
+};
+//#endregion
+export { TimeGroupElement };

package/dist/default/ui/time/separator.js

@@ -0,0 +1,14 @@
+import { UIElement } from "../ui-element.js";
+//#region src/ui/time/separator.ts
+var TimeSeparatorElement = class extends UIElement {
+	static {
+		this.tagName = "media-time-separator";
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		this.setAttribute("aria-hidden", "true");
+		if (!this.textContent?.trim()) this.textContent = "/";
+	}
+};
+//#endregion
+export { TimeSeparatorElement };

package/dist/default/ui/time-slider/chapter-title.js

@@ -0,0 +1,41 @@
+import { playerContext } from "../../player/context.js";
+import { PlayerController } from "../../player/controller.js";
+import { UIElement } from "../ui-element.js";
+import { sliderContext } from "../slider/context.js";
+import { TimeSliderChaptersCore } from "@videojs/core";
+import { selectTextTrack, selectTime } from "@videojs/core/dom";
+import { ContextConsumer } from "@videojs/element/context";
+//#region src/ui/time-slider/chapter-title.ts
+/** Displays the chapter title at the current pointer or keyboard position. */
+var TimeSliderChapterTitleElement = class extends UIElement {
+	static {
+		this.tagName = "media-time-slider-chapter-title";
+	}
+	#core = new TimeSliderChaptersCore();
+	#slider = new ContextConsumer(this, {
+		context: sliderContext,
+		subscribe: true
+	});
+	#textTrack = new PlayerController(this, playerContext, selectTextTrack);
+	#time = new PlayerController(this, playerContext, selectTime);
+	update(_changed) {
+		super.update(_changed);
+		const slider = this.#slider.value;
+		if (!slider) return;
+		const duration = this.#time.value?.duration ?? 0;
+		const { chapters } = this.#core.getRanges(this.#textTrack.value?.chaptersCues ?? [], 0, duration);
+		const keyboard = slider.state.interactive && !slider.state.pointing && !slider.state.dragging;
+		const value = slider.state.pointing || slider.state.dragging ? slider.pointerValue : slider.state.value;
+		const chapter = this.#core.findChapter(chapters, value);
+		this.textContent = chapter?.cue?.text ?? "";
+		if (keyboard) {
+			this.removeAttribute("aria-hidden");
+			this.setAttribute("aria-live", "polite");
+		} else {
+			this.setAttribute("aria-hidden", "true");
+			this.removeAttribute("aria-live");
+		}
+	}
+};
+//#endregion
+export { TimeSliderChapterTitleElement };

package/dist/default/ui/time-slider/chapters.js

@@ -0,0 +1,97 @@
+import { playerContext } from "../../player/context.js";
+import { PlayerController } from "../../player/controller.js";
+import { UIElement } from "../ui-element.js";
+import { sliderContext } from "../slider/context.js";
+import { SliderSegmentsCore, TimeSliderChapterCSSVars, TimeSliderChapterDataAttrs, TimeSliderChaptersCore } from "@videojs/core";
+import { applyStateDataAttrs, selectBuffer, selectTextTrack, selectTime } from "@videojs/core/dom";
+import { ContextConsumer } from "@videojs/element/context";
+import { cloneTemplateRoot, getTemplateElement, getTemplateRoot } from "@videojs/utils/dom";
+//#region src/ui/time-slider/chapters.ts
+/**
+* Clones a light-DOM template once per normalized chapter range.
+*
+* The required template must contain exactly one HTML root element. When no chapter cues are available, the template is
+* cloned once for a full-duration range.
+*/
+var TimeSliderChaptersElement = class extends UIElement {
+	static {
+		this.tagName = "media-time-slider-chapters";
+	}
+	#segments = new SliderSegmentsCore();
+	#core = new TimeSliderChaptersCore();
+	#slider = new ContextConsumer(this, {
+		context: sliderContext,
+		subscribe: true
+	});
+	#textTrack = new PlayerController(this, playerContext, selectTextTrack);
+	#buffer = new PlayerController(this, playerContext, selectBuffer);
+	#time = new PlayerController(this, playerContext, selectTime);
+	#rendered = /* @__PURE__ */ new Map();
+	#templateRoot = null;
+	#templateChecked = false;
+	connectedCallback() {
+		super.connectedCallback();
+		this.setAttribute("aria-hidden", "true");
+	}
+	update(_changed) {
+		super.update(_changed);
+		const slider = this.#slider.value;
+		const duration = this.#time.value?.duration ?? 0;
+		const templateRoot = this.#getTemplateRoot();
+		if (!slider) return;
+		applyStateDataAttrs(this, slider.state, slider.stateAttrMap);
+		if (!templateRoot) return;
+		const { chapters, ranges, max } = this.#core.getRanges(this.#textTrack.value?.chaptersCues ?? [], 0, duration);
+		const geometry = this.#segments.getGeometry({
+			ranges,
+			min: 0,
+			max,
+			orientation: slider.state.orientation
+		});
+		const buffered = this.#buffer.value?.buffered ?? [];
+		const bufferedEnd = buffered.length ? buffered[buffered.length - 1][1] : 0;
+		const next = /* @__PURE__ */ new Map();
+		for (const segment of geometry) {
+			const state = this.#core.getState(this.#segments.getState(segment, slider.state, slider.pointerValue), chapters, bufferedEnd);
+			let root = this.#rendered.get(state.key);
+			if (!root) root = cloneTemplateRoot(templateRoot, this.ownerDocument);
+			this.#setStyle(root, "pointer-events", state.cue ? void 0 : "none");
+			this.#setStyle(root, TimeSliderChapterCSSVars.start, state.startPercent);
+			this.#setStyle(root, TimeSliderChapterCSSVars.end, state.endPercent);
+			this.#setStyle(root, TimeSliderChapterCSSVars.width, state.width ?? state.height);
+			this.#setStyle(root, TimeSliderChapterCSSVars.fill, `${state.fillPercent}%`);
+			this.#setStyle(root, TimeSliderChapterCSSVars.buffer, `${state.bufferPercent}%`);
+			applyStateDataAttrs(root, slider.state, slider.stateAttrMap);
+			applyStateDataAttrs(root, state, TimeSliderChapterDataAttrs);
+			next.set(state.key, root);
+		}
+		for (const [key, root] of this.#rendered) if (!next.has(key)) root.remove();
+		let before = null;
+		for (const root of [...next.values()].reverse()) {
+			if (root.parentNode !== this || root.nextSibling !== before) this.insertBefore(root, before);
+			before = root;
+		}
+		this.#rendered.clear();
+		for (const [key, rendered] of next) this.#rendered.set(key, rendered);
+	}
+	#getTemplateRoot() {
+		if (this.#templateChecked) return this.#templateRoot;
+		const template = getTemplateElement(this);
+		if (!template) {
+			for (const node of [...this.childNodes]) node.remove();
+			return null;
+		}
+		this.#templateChecked = true;
+		const root = getTemplateRoot(template);
+		for (const node of [...this.childNodes]) if (node !== template) node.remove();
+		if (root?.namespaceURI !== "http://www.w3.org/1999/xhtml") return null;
+		this.#templateRoot = root;
+		return this.#templateRoot;
+	}
+	#setStyle(element, name, value) {
+		if (value === void 0) element.style.removeProperty(name);
+		else element.style.setProperty(name, value);
+	}
+};
+//#endregion
+export { TimeSliderChaptersElement };