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

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

@@ -0,0 +1,238 @@
+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 };
+
+//# sourceMappingURL=element.js.map

package/dist/dev/ui/thumbnail/element.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"element.js","names":["#core","#shadow","#fallback","#children","#imageAttributes","#textTracks","#externalThumbnails","#api","#img","#slots","#adopt","#thumbnails","#lastTextTrack","#applyImageAttributes","#applySource","#resetStyles","#applyResize","#inheritedCrossOrigin","#authored"],"sources":["../../../../src/ui/thumbnail/element.ts"],"sourcesContent":["import {\n  mapCuesToThumbnails,\n  ThumbnailCore,\n  ThumbnailDataAttrs,\n  type ThumbnailImage,\n  type ThumbnailResizeResult,\n} from '@videojs/core';\nimport type { ThumbnailApi } from '@videojs/core/dom';\nimport { applyElementProps, applyStateDataAttrs, createThumbnail, selectTextTrack } from '@videojs/core/dom';\nimport type { PropertyDeclarationMap, PropertyValues } from '@videojs/element';\nimport type { MediaTextTrackState } from '@videojs/media';\nimport { findComposedElement, isHTMLImageElement, listen } from '@videojs/utils/dom';\n\nimport { playerContext } from '../../player/context';\nimport { PlayerController } from '../../player/controller';\nimport { UIElement } from '../ui-element';\n\nconst SHADOW_CSS = `\\\n:host {\n  display: inline-block;\n  overflow: hidden;\n}\nimg,\n::slotted(img) {\n  display: block;\n}`;\n\n/**\n * Image attributes the element fills in from its own properties. Ones already on an image when it is adopted are the\n * author's and are left alone, so an `<img slot=\"thumbnail\" loading=\"lazy\">` keeps its settings inside a skin.\n */\nconst IMAGE_ATTRIBUTES = ['crossorigin', 'loading', 'fetchpriority'] as const;\n\ntype ImageAttribute = (typeof IMAGE_ATTRIBUTES)[number];\n\n/** The image the element draws when none is supplied, reachable from outside as `::part(image)`. */\nfunction createFallbackImage(): HTMLImageElement {\n  const img = document.createElement('img');\n\n  img.alt = '';\n  img.setAttribute('part', 'image');\n  img.setAttribute('aria-hidden', 'true');\n  img.setAttribute('decoding', 'async');\n\n  return img;\n}\n\n/**\n * `<media-thumbnail>` — resolves and sizes a time-based thumbnail into an image.\n *\n * The element owns `src` and `srcset` on the active image. Left empty, it draws an image of its own in its shadow root.\n * Supply an `<img>` child instead — `<media-thumbnail time=\"12\"><img alt=\"\"></media-thumbnail>` — to compose overlays\n * or loading indicators beside the image the element controls. Any `crossorigin`, `loading`, or `fetchpriority` the\n * child already carries wins over the element's own; the rest are filled in. Inside a skin, an `<img slot=\"thumbnail\">`\n * of yours replaces the one the skin carries.\n */\nexport class ThumbnailElement extends UIElement {\n  static readonly tagName = 'media-thumbnail';\n\n  static override properties = {\n    time: { type: Number },\n    crossOrigin: { type: String, attribute: 'crossorigin' },\n    loading: { type: String },\n    fetchPriority: { type: String, attribute: 'fetchpriority' },\n  } satisfies PropertyDeclarationMap<Exclude<keyof ThumbnailCore.Props, 'thumbnails'>>;\n\n  time = 0;\n  crossOrigin: ThumbnailCore.Props['crossOrigin'];\n  loading: ThumbnailCore.Props['loading'];\n  fetchPriority: ThumbnailCore.Props['fetchPriority'];\n\n  readonly #core = new ThumbnailCore();\n  readonly #shadow = this.attachShadow({ mode: 'open' });\n  readonly #fallback = createFallbackImage();\n  readonly #children = new MutationObserver(() => this.requestUpdate());\n  // An image assigned through a forwarding slot lives outside this subtree, so its\n  // attributes are watched on the image itself.\n  readonly #imageAttributes = new MutationObserver(() => this.requestUpdate());\n  readonly #textTracks = new PlayerController(this, playerContext, selectTextTrack);\n\n  #slots: AbortController | null = null;\n  #img: HTMLImageElement | null = null;\n  /** Attributes `#img` already carried when adopted, which the author owns. */\n  #authored = new Set<ImageAttribute>();\n  #thumbnails: ThumbnailImage[] = [];\n  #externalThumbnails: ThumbnailImage[] | undefined;\n  #lastTextTrack: MediaTextTrackState | undefined;\n  #api: ThumbnailApi | null = null;\n\n  constructor() {\n    super();\n\n    const style = document.createElement('style');\n\n    style.textContent = SHADOW_CSS;\n    this.#shadow.append(style, document.createElement('slot'), this.#fallback);\n  }\n\n  /**\n   * Set thumbnail images directly, bypassing the automatic `<track>` detection. When set, this takes priority over the\n   * text track path.\n   */\n  get thumbnails(): ThumbnailImage[] | undefined {\n    return this.#externalThumbnails;\n  }\n\n  set thumbnails(value: ThumbnailImage[] | undefined) {\n    this.#externalThumbnails = value;\n    this.requestUpdate();\n  }\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n\n    if (this.destroyed) return;\n\n    this.#api = createThumbnail({\n      getContainer: () => this,\n      getImg: () => this.#img,\n      onStateChange: () => this.requestUpdate(),\n    });\n    this.#children.observe(this, {\n      childList: true,\n      subtree: true,\n      attributes: true,\n      attributeFilter: ['src', 'srcset'],\n    });\n\n    // Nodes assigned to a forwarding slot are not children of this subtree, so an image slotted\n    // in later never shows up as a mutation. The slot announces it with `slotchange` instead.\n    this.#slots = new AbortController();\n    listen(this, 'slotchange', () => this.requestUpdate(), { signal: this.#slots.signal });\n\n    // Disconnecting let go of the image, and reconnecting alone schedules no update,\n    // so a moved element adopts its image and reapplies the source here.\n    this.requestUpdate();\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n\n    this.#adopt(null);\n    this.#children.disconnect();\n    this.#slots?.abort();\n    this.#slots = null;\n    this.#api?.destroy();\n    this.#api = null;\n  }\n\n  override destroyCallback(): void {\n    this.#api?.destroy();\n    super.destroyCallback();\n  }\n\n  protected override update(changed: PropertyValues): void {\n    super.update(changed);\n\n    const textTrack = this.#textTracks.value;\n\n    // Resolve thumbnails: external prop takes priority over auto <track> path.\n    if (this.#externalThumbnails) {\n      this.#thumbnails = this.#externalThumbnails;\n    } else if (textTrack !== this.#lastTextTrack) {\n      this.#lastTextTrack = textTrack;\n      this.#thumbnails =\n        textTrack && textTrack.thumbnailCues.length > 0\n          ? mapCuesToThumbnails(textTrack.thumbnailCues, textTrack.thumbnailTrackSrc ?? undefined)\n          : [];\n    }\n\n    const thumbnail = this.#core.findActiveThumbnail(this.#thumbnails, this.time);\n    const img = findComposedElement(this, isHTMLImageElement) ?? this.#fallback;\n\n    this.#adopt(img);\n    this.#applyImageAttributes(img, textTrack);\n\n    // Track src changes via the thumbnail API.\n    this.#api?.updateSrc(thumbnail?.url);\n    this.#applySource(thumbnail?.url);\n    this.#api?.connect();\n\n    if (!thumbnail) {\n      this.#resetStyles();\n\n      const state = this.#core.getState(false, false, undefined);\n\n      applyElementProps(this, this.#core.getAttrs(state));\n      applyStateDataAttrs(this, state, ThumbnailDataAttrs);\n      return;\n    }\n\n    const api = this.#api;\n    const state = this.#core.getState(api?.loading ?? false, api?.error ?? false, thumbnail);\n\n    applyElementProps(this, this.#core.getAttrs(state));\n    applyStateDataAttrs(this, state, ThumbnailDataAttrs);\n\n    if (api?.naturalWidth && api.naturalHeight) {\n      const constraints = api.readConstraints();\n      const result = this.#core.resize(thumbnail, api.naturalWidth, api.naturalHeight, constraints);\n\n      if (result) {\n        this.#applyResize(result);\n      }\n    }\n  }\n\n  /**\n   * Leaving `crossOrigin` unset means \"follow the media element\", so thumbnails keep working on a CORS-enabled player\n   * without a skin having to thread an attribute through. Only the `<track>` path inherits: `thumbnails` set directly\n   * may point at a host that has nothing to do with the media element.\n   */\n  #inheritedCrossOrigin(textTrack: MediaTextTrackState | undefined): ThumbnailCore.Props['crossOrigin'] {\n    return this.#externalThumbnails ? undefined : textTrack?.thumbnailTrackCrossOrigin;\n  }\n\n  /** Sync image attributes from element properties, leaving the ones the author put on the image alone. */\n  #applyImageAttributes(img: HTMLImageElement, textTrack: MediaTextTrackState | undefined): void {\n    const props: Partial<Record<ImageAttribute, string | undefined>> = {\n      crossorigin: this.#core.resolveCrossOrigin(this.crossOrigin, this.#inheritedCrossOrigin(textTrack)),\n      loading: this.loading,\n      fetchpriority: this.fetchPriority,\n    };\n\n    for (const name of this.#authored) delete props[name];\n\n    applyElementProps(img, props);\n  }\n\n  #applyResize(result: ThumbnailResizeResult): void {\n    this.style.width = `${result.containerWidth}px`;\n    this.style.height = `${result.containerHeight}px`;\n\n    const imgStyle = this.#img?.style;\n    if (!imgStyle) return;\n\n    imgStyle.width = `${result.imageWidth}px`;\n    imgStyle.height = `${result.imageHeight}px`;\n    imgStyle.maxWidth = 'none';\n    imgStyle.transform =\n      result.offsetX || result.offsetY ? `translate(-${result.offsetX}px, -${result.offsetY}px)` : '';\n  }\n\n  #resetStyles(): void {\n    this.style.width = '';\n    this.style.height = '';\n\n    const imgStyle = this.#img?.style;\n    if (!imgStyle) return;\n\n    imgStyle.width = '';\n    imgStyle.height = '';\n    imgStyle.maxWidth = '';\n    imgStyle.transform = '';\n  }\n\n  #adopt(next: HTMLImageElement | null): void {\n    if (next === this.#img) return;\n\n    const previous = this.#img;\n\n    if (previous) {\n      this.#api?.disconnectImg(previous);\n      this.#resetStyles();\n      previous.removeAttribute('src');\n      previous.removeAttribute('srcset');\n\n      for (const name of IMAGE_ATTRIBUTES) {\n        if (!this.#authored.has(name)) previous.removeAttribute(name);\n      }\n    }\n\n    // Ownership is settled once, when an image becomes active: after the first\n    // sync the attributes we set would themselves look authored.\n    this.#img = next;\n    this.#authored = new Set(next ? IMAGE_ATTRIBUTES.filter((name) => next.hasAttribute(name)) : []);\n    this.#imageAttributes.disconnect();\n\n    if (next && next !== this.#fallback) {\n      this.#imageAttributes.observe(next, { attributes: true, attributeFilter: ['src', 'srcset'] });\n    }\n\n    // The fallback only occupies the shadow root while it is the active image,\n    // so a supplied image never sits beside a hidden one.\n    if (next === this.#fallback) this.#shadow.append(this.#fallback);\n    else if (next) this.#fallback.remove();\n\n    // Reset the request even when the next image will receive the same URL. A\n    // replacement image is a new download with its own lifecycle.\n    this.#api?.updateSrc(undefined);\n  }\n\n  #applySource(src: string | undefined): void {\n    const img = this.#img;\n    if (!img) return;\n\n    // A srcset candidate wins over src, so the root has to clear both parts of\n    // the source contract before applying the selected thumbnail URL.\n    img.removeAttribute('srcset');\n\n    if (!src) img.removeAttribute('src');\n    else if (img.getAttribute('src') !== src) img.setAttribute('src', src);\n  }\n}\n"],"mappings":"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"}

package/dist/dev/ui/time/element.d.ts

@@ -0,0 +1,35 @@
+import { UIElement } from "../ui-element.js";
+import { TimeType } from "@videojs/core";
+import { PropertyValues } from "@videojs/element";
+import { Text } from "@videojs/core/i18n";
+//#region src/ui/time/element.d.ts
+declare class TimeElement extends UIElement {
+  #private;
+  static readonly tagName = "media-time";
+  static properties: {
+    type: {
+      type: StringConstructor;
+    };
+    negativeSign: {
+      type: StringConstructor;
+      attribute: string;
+    };
+    label: {
+      type: StringConstructor;
+    };
+    toggle: {
+      type: BooleanConstructor;
+    };
+  };
+  type: TimeType;
+  negativeSign: string;
+  label: Text | string;
+  toggle: boolean;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+  protected willUpdate(changed: PropertyValues): void;
+  protected update(changed: PropertyValues): void;
+}
+//#endregion
+export { TimeElement };
+//# sourceMappingURL=element.d.ts.map

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

@@ -0,0 +1,172 @@
+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, logMissingFeature, 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);
+		}
+		if (!this.#state.value) logMissingFeature(this.localName, this.#state.displayName);
+	}
+	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 };
+
+//# sourceMappingURL=element.js.map

package/dist/dev/ui/time/element.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"element.js","names":["#state","#hasTimeRange","#toggleType","#core","#buffer","#i18n","#signSpan","#textNode","#disconnect","#syncListeners","#listening","#activeType","#clearAttrs","#getLabelParams","#handleClick","#handleKeyDown"],"sources":["../../../../src/ui/time/element.ts"],"sourcesContent":["import { TimeCore, TimeDataAttrs, type TimeType } from '@videojs/core';\nimport { applyElementProps, applyStateDataAttrs, logMissingFeature, selectBuffer, selectTime } from '@videojs/core/dom';\nimport { type Text, translateText } from '@videojs/core/i18n';\nimport { durationSuffixText, elapsedSuffixText, remainingSuffixText } from '@videojs/core/i18n/text/time';\nimport type { PropertyDeclarationMap, PropertyValues } from '@videojs/element';\nimport { hasTimeRange } from '@videojs/media';\nimport { isInteractiveActivation } from '@videojs/utils/dom';\nimport { formatTimeAsPhrase } from '@videojs/utils/time';\n\nimport { i18nContext } from '../../i18n/context';\nimport { I18nController } from '../../i18n/controller';\nimport { playerContext } from '../../player/context';\nimport { PlayerController } from '../../player/controller';\nimport { UIElement } from '../ui-element';\n\nexport class TimeElement extends UIElement {\n  static readonly tagName = 'media-time';\n\n  static override properties = {\n    type: { type: String },\n    negativeSign: { type: String, attribute: 'negative-sign' },\n    label: { type: String },\n    toggle: { type: Boolean },\n  } satisfies PropertyDeclarationMap<keyof TimeCore.Props>;\n\n  type: TimeType = TimeCore.defaultProps.type;\n  negativeSign = TimeCore.defaultProps.negativeSign;\n  label: Text | string = '';\n  toggle = TimeCore.defaultProps.toggle;\n\n  readonly #core = new TimeCore();\n  readonly #state = new PlayerController(this, playerContext, selectTime);\n  readonly #buffer = new PlayerController(this, playerContext, selectBuffer);\n  readonly #i18n = new I18nController(this, i18nContext);\n\n  readonly #signSpan = document.createElement('span');\n  readonly #textNode = new Text();\n\n  #disconnect: AbortController | null = null;\n  #listening = false;\n  #activeType: TimeType = TimeCore.defaultProps.type;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n\n    this.#disconnect = new AbortController();\n    this.#syncListeners();\n\n    if (!this.#signSpan.parentNode) {\n      this.#signSpan.setAttribute('aria-hidden', 'true');\n      this.#signSpan.hidden = true;\n      this.append(this.#signSpan, this.#textNode);\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    this.#listening = false;\n  }\n\n  protected override willUpdate(changed: PropertyValues): void {\n    super.willUpdate(changed);\n\n    if (changed.has('type') || changed.has('toggle')) {\n      this.#activeType = this.type;\n    }\n  }\n\n  protected override update(changed: PropertyValues): void {\n    super.update(changed);\n\n    if (changed.has('toggle')) {\n      this.#syncListeners();\n    }\n\n    const media = this.#state.value;\n\n    if (!media) {\n      this.#clearAttrs();\n      return;\n    }\n\n    this.#core.setProps({\n      type: this.toggle ? this.#activeType : this.type,\n      negativeSign: this.negativeSign,\n      label: this.label,\n      toggle: this.toggle,\n    });\n    this.#core.setMedia({ ...media, seekable: this.#buffer.value?.seekable ?? [] });\n    this.#core.setFormatLocale(this.#i18n.locale);\n    const state = this.#core.getState();\n\n    this.#signSpan.hidden = !state.negative;\n    this.#signSpan.textContent = state.negative ? this.negativeSign : '';\n    this.#textNode.textContent = state.text;\n\n    const attrs = this.#core.getAttrs(state, this.type);\n    const label = translateText(attrs['aria-label'], this.#i18n.value, this.#getLabelParams(state));\n    const description = attrs['aria-description']\n      ? translateText(attrs['aria-description'], this.#i18n.value)\n      : undefined;\n\n    applyElementProps(this, {\n      'aria-label': label,\n      'aria-description': description,\n      'aria-disabled': attrs['aria-disabled'],\n      role: this.toggle ? attrs.role : 'time',\n      tabIndex: attrs.tabIndex,\n      datetime: this.toggle || state.unavailable ? undefined : state.datetime,\n    });\n    applyStateDataAttrs(this, state, TimeDataAttrs);\n  }\n\n  #getLabelParams(state: TimeCore.State): { duration: string } | undefined {\n    const params = this.#core.getLabelParams(state);\n    if (!params) return undefined;\n\n    const duration = formatTimeAsPhrase(Math.abs(state.seconds), { locale: this.#i18n.locale });\n\n    const text = {\n      current: elapsedSuffixText,\n      duration: durationSuffixText,\n      remaining: remainingSuffixText,\n    }[state.type];\n\n    return { duration: translateText(text, this.#i18n.value, { duration }) };\n  }\n\n  #handleClick = (event: MouseEvent): void => {\n    if (event.defaultPrevented || !this.toggle || !this.#state.value || !this.#hasTimeRange()) return;\n\n    this.#toggleType();\n  };\n\n  #handleKeyDown = (event: KeyboardEvent): void => {\n    if (event.defaultPrevented || !isInteractiveActivation(event)) return;\n\n    if (!this.toggle || !this.#state.value || !this.#hasTimeRange()) return;\n\n    // Prevent space from scrolling page.\n    event.preventDefault();\n\n    if (event.repeat) return;\n\n    this.#toggleType();\n  };\n\n  #toggleType(): void {\n    if (this.type === 'current') {\n      this.#activeType = this.#activeType === 'remaining' ? 'current' : 'remaining';\n    } else {\n      this.#activeType = this.#activeType === 'duration' ? 'remaining' : 'duration';\n    }\n\n    this.requestUpdate();\n  }\n\n  #hasTimeRange(): boolean {\n    const media = this.#state.value;\n    if (!media) return false;\n\n    return hasTimeRange({ ...media, seekable: this.#buffer.value?.seekable ?? [] });\n  }\n\n  #syncListeners(): void {\n    if (!this.toggle || !this.#disconnect || this.#listening) return;\n\n    this.#listening = true;\n    applyElementProps(\n      this,\n      {\n        onClick: this.#handleClick,\n        onKeyDown: this.#handleKeyDown,\n      },\n      { signal: this.#disconnect.signal }\n    );\n  }\n\n  #clearAttrs(): void {\n    applyElementProps(this, {\n      'aria-label': undefined,\n      'aria-description': undefined,\n      'aria-disabled': undefined,\n      role: undefined,\n      tabIndex: undefined,\n      datetime: undefined,\n      'data-type': undefined,\n      'data-disabled': undefined,\n      'data-unavailable': undefined,\n    });\n  }\n}\n"],"mappings":"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"}

package/dist/dev/ui/time/group.d.ts

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

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

@@ -0,0 +1,12 @@
+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 };
+
+//# sourceMappingURL=group.js.map

package/dist/dev/ui/time/group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"group.js","names":[],"sources":["../../../../src/ui/time/group.ts"],"sourcesContent":["import { UIElement } from '../ui-element';\n\n/** Container for composed `<media-time>` and `<media-time-separator>` displays. */\nexport class TimeGroupElement extends UIElement {\n  static readonly tagName = 'media-time-group';\n\n  // Future: Could provide context for hoursDisplay to children via Lit context\n}\n"],"mappings":";;;AAGA,IAAa,mBAAb,cAAsC,UAAU;;EACpB,KAAA,UAAA;;AAG5B"}

package/dist/dev/ui/time/separator.d.ts

@@ -0,0 +1,9 @@
+import { UIElement } from "../ui-element.js";
+//#region src/ui/time/separator.d.ts
+declare class TimeSeparatorElement extends UIElement {
+  static readonly tagName = "media-time-separator";
+  connectedCallback(): void;
+}
+//#endregion
+export { TimeSeparatorElement };
+//# sourceMappingURL=separator.d.ts.map

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

@@ -0,0 +1,16 @@
+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 };
+
+//# sourceMappingURL=separator.js.map

package/dist/dev/ui/time/separator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"separator.js","names":[],"sources":["../../../../src/ui/time/separator.ts"],"sourcesContent":["import { UIElement } from '../ui-element';\n\nexport class TimeSeparatorElement extends UIElement {\n  static readonly tagName = 'media-time-separator';\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n\n    // Set aria-hidden for accessibility\n    this.setAttribute('aria-hidden', 'true');\n\n    // Set default content if empty\n    if (!this.textContent?.trim()) {\n      this.textContent = '/';\n    }\n  }\n}\n"],"mappings":";;AAEA,IAAa,uBAAb,cAA0C,UAAU;;EACxB,KAAA,UAAA;;CAE1B,oBAAmC;EACjC,MAAM,kBAAkB;EAGxB,KAAK,aAAa,eAAe,MAAM;EAGvC,IAAI,CAAC,KAAK,aAAa,KAAK,GAC1B,KAAK,cAAc;CAEvB;AACF"}

package/dist/dev/ui/time-slider/chapter-title.d.ts

@@ -0,0 +1,12 @@
+import { UIElement } from "../ui-element.js";
+import { PropertyValues } from "@videojs/element";
+//#region src/ui/time-slider/chapter-title.d.ts
+/** Displays the chapter title at the current pointer or keyboard position. */
+declare class TimeSliderChapterTitleElement extends UIElement {
+  #private;
+  static readonly tagName = "media-time-slider-chapter-title";
+  protected update(_changed: PropertyValues): void;
+}
+//#endregion
+export { TimeSliderChapterTitleElement };
+//# sourceMappingURL=chapter-title.d.ts.map

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

@@ -0,0 +1,43 @@
+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 };
+
+//# sourceMappingURL=chapter-title.js.map

package/dist/dev/ui/time-slider/chapter-title.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chapter-title.js","names":["#core","#slider","#textTrack","#time"],"sources":["../../../../src/ui/time-slider/chapter-title.ts"],"sourcesContent":["import { TimeSliderChaptersCore } from '@videojs/core';\nimport { selectTextTrack, selectTime } from '@videojs/core/dom';\nimport type { PropertyValues } from '@videojs/element';\nimport { ContextConsumer } from '@videojs/element/context';\n\nimport { playerContext } from '../../player/context';\nimport { PlayerController } from '../../player/controller';\nimport { sliderContext } from '../slider/context';\nimport { UIElement } from '../ui-element';\n\n/** Displays the chapter title at the current pointer or keyboard position. */\nexport class TimeSliderChapterTitleElement extends UIElement {\n  static readonly tagName = 'media-time-slider-chapter-title';\n\n  readonly #core = new TimeSliderChaptersCore();\n  readonly #slider = new ContextConsumer(this, { context: sliderContext, subscribe: true });\n  readonly #textTrack = new PlayerController(this, playerContext, selectTextTrack);\n  readonly #time = new PlayerController(this, playerContext, selectTime);\n\n  protected override update(_changed: PropertyValues): void {\n    super.update(_changed);\n\n    const slider = this.#slider.value;\n    if (!slider) return;\n\n    const duration = this.#time.value?.duration ?? 0;\n    const { chapters } = this.#core.getRanges(this.#textTrack.value?.chaptersCues ?? [], 0, duration);\n\n    const keyboard = slider.state.interactive && !slider.state.pointing && !slider.state.dragging;\n    const value = slider.state.pointing || slider.state.dragging ? slider.pointerValue : slider.state.value;\n    const chapter = this.#core.findChapter(chapters, value);\n\n    this.textContent = chapter?.cue?.text ?? '';\n\n    if (keyboard) {\n      this.removeAttribute('aria-hidden');\n      this.setAttribute('aria-live', 'polite');\n    } else {\n      this.setAttribute('aria-hidden', 'true');\n      this.removeAttribute('aria-live');\n    }\n  }\n}\n"],"mappings":";;;;;;;;;AAWA,IAAa,gCAAb,cAAmD,UAAU;;EACjC,KAAA,UAAA;;CAE1B,QAAiB,IAAI,uBAAuB;CAC5C,UAAmB,IAAI,gBAAgB,MAAM;EAAE,SAAS;EAAe,WAAW;CAAK,CAAC;CACxF,aAAsB,IAAI,iBAAiB,MAAM,eAAe,eAAe;CAC/E,QAAiB,IAAI,iBAAiB,MAAM,eAAe,UAAU;CAErE,OAA0B,UAAgC;EACxD,MAAM,OAAO,QAAQ;EAErB,MAAM,SAAS,KAAKC,QAAQ;EAC5B,IAAI,CAAC,QAAQ;EAEb,MAAM,WAAW,KAAKE,MAAM,OAAO,YAAY;EAC/C,MAAM,EAAE,aAAa,KAAKH,MAAM,UAAU,KAAKE,WAAW,OAAO,gBAAgB,CAAC,GAAG,GAAG,QAAQ;EAEhG,MAAM,WAAW,OAAO,MAAM,eAAe,CAAC,OAAO,MAAM,YAAY,CAAC,OAAO,MAAM;EACrF,MAAM,QAAQ,OAAO,MAAM,YAAY,OAAO,MAAM,WAAW,OAAO,eAAe,OAAO,MAAM;EAClG,MAAM,UAAU,KAAKF,MAAM,YAAY,UAAU,KAAK;EAEtD,KAAK,cAAc,SAAS,KAAK,QAAQ;EAEzC,IAAI,UAAU;GACZ,KAAK,gBAAgB,aAAa;GAClC,KAAK,aAAa,aAAa,QAAQ;EACzC,OAAO;GACL,KAAK,aAAa,eAAe,MAAM;GACvC,KAAK,gBAAgB,WAAW;EAClC;CACF;AACF"}

package/dist/dev/ui/time-slider/chapters.d.ts

@@ -0,0 +1,18 @@
+import { UIElement } from "../ui-element.js";
+import { PropertyValues } from "@videojs/element";
+//#region src/ui/time-slider/chapters.d.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.
+ */
+declare class TimeSliderChaptersElement extends UIElement {
+  #private;
+  static readonly tagName = "media-time-slider-chapters";
+  connectedCallback(): void;
+  protected update(_changed: PropertyValues): void;
+}
+//#endregion
+export { TimeSliderChaptersElement };
+//# sourceMappingURL=chapters.d.ts.map