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

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

@@ -0,0 +1,78 @@
+import { PopupPositioner } from "@videojs/core/dom";
+//#region src/ui/position-controller.ts
+let popupId = 0;
+/** Connects a popup element to the shared positioning lifecycle. */
+var PositionController = class {
+	#host;
+	#positioner = new PopupPositioner();
+	#implicitBinding = null;
+	constructor(host) {
+		this.#host = host;
+		host.addController(this);
+	}
+	/** Discover an explicit trigger by ID or one linked via `commandfor`. */
+	findTrigger(trigger) {
+		const root = this.#host.getRootNode();
+		if (root.nodeType !== Node.DOCUMENT_NODE && root.nodeType !== Node.DOCUMENT_FRAGMENT_NODE) {
+			this.#releaseImplicitBinding();
+			return null;
+		}
+		const scopedRoot = root;
+		if (trigger) {
+			this.#releaseImplicitBinding();
+			return scopedRoot.getElementById(trigger);
+		}
+		if (this.#implicitBinding) {
+			const { id, trigger: boundTrigger } = this.#implicitBinding;
+			if (this.#host.id === id && boundTrigger.getAttribute("commandfor") === id && this.#host.previousElementSibling === boundTrigger) return boundTrigger;
+			this.#releaseImplicitBinding();
+		}
+		if (this.#host.id) return scopedRoot.querySelector(`[commandfor="${this.#host.id}"]`);
+		const adjacent = this.#host.previousElementSibling;
+		if (!(adjacent instanceof HTMLElement)) return null;
+		if (adjacent.getAttribute("commandfor")) return null;
+		const id = nextPopupId(scopedRoot);
+		this.#host.id = id;
+		adjacent.setAttribute("commandfor", id);
+		this.#implicitBinding = {
+			id,
+			trigger: adjacent
+		};
+		return adjacent;
+	}
+	sync(options) {
+		this.#positioner.sync({
+			...options,
+			popup: this.#host
+		});
+	}
+	cleanup() {
+		this.#positioner.cleanup();
+	}
+	hostDisconnected() {
+		this.cleanup();
+		this.#releaseImplicitBinding();
+	}
+	hostDestroyed() {
+		this.cleanup();
+		this.#releaseImplicitBinding();
+	}
+	#releaseImplicitBinding() {
+		const binding = this.#implicitBinding;
+		if (!binding) return;
+		if (binding.trigger.getAttribute("commandfor") === binding.id) binding.trigger.removeAttribute("commandfor");
+		if (this.#host.id === binding.id) this.#host.removeAttribute("id");
+		this.#implicitBinding = null;
+	}
+};
+function nextPopupId(root) {
+	let id;
+	do
+		id = `vjs-popup-${++popupId}`;
+	while (root.getElementById(id));
+	return id;
+}
+//#endregion
+export { PositionController };
+
+//# sourceMappingURL=position-controller.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"position-controller.js","names":["#host","#positioner","#releaseImplicitBinding","#implicitBinding"],"sources":["../../../src/ui/position-controller.ts"],"sourcesContent":["import { PopupPositioner, type PopupPositionerOptions } from '@videojs/core/dom';\nimport type { ReactiveController, ReactiveControllerHost } from '@videojs/element';\n\nexport type PositionControllerHost = ReactiveControllerHost & HTMLElement;\n\nexport type PositionControllerOptions = Omit<PopupPositionerOptions, 'popup'>;\n\nlet popupId = 0;\n\ninterface ImplicitTriggerBinding {\n  id: string;\n  trigger: HTMLElement;\n}\n\n/** Connects a popup element to the shared positioning lifecycle. */\nexport class PositionController implements ReactiveController {\n  readonly #host: PositionControllerHost;\n  readonly #positioner = new PopupPositioner();\n  #implicitBinding: ImplicitTriggerBinding | null = null;\n\n  constructor(host: PositionControllerHost) {\n    this.#host = host;\n    host.addController(this);\n  }\n\n  /** Discover an explicit trigger by ID or one linked via `commandfor`. */\n  findTrigger(trigger?: string): HTMLElement | null {\n    const root = this.#host.getRootNode();\n\n    if (root.nodeType !== Node.DOCUMENT_NODE && root.nodeType !== Node.DOCUMENT_FRAGMENT_NODE) {\n      this.#releaseImplicitBinding();\n      return null;\n    }\n\n    const scopedRoot = root as Document | DocumentFragment;\n\n    if (trigger) {\n      this.#releaseImplicitBinding();\n      return scopedRoot.getElementById(trigger);\n    }\n\n    if (this.#implicitBinding) {\n      const { id, trigger: boundTrigger } = this.#implicitBinding;\n\n      if (\n        this.#host.id === id &&\n        boundTrigger.getAttribute('commandfor') === id &&\n        this.#host.previousElementSibling === boundTrigger\n      ) {\n        return boundTrigger;\n      }\n\n      this.#releaseImplicitBinding();\n    }\n\n    if (this.#host.id) {\n      return scopedRoot.querySelector<HTMLElement>(`[commandfor=\"${this.#host.id}\"]`);\n    }\n\n    const adjacent = this.#host.previousElementSibling;\n\n    if (!(adjacent instanceof HTMLElement)) {\n      if (__DEV__) {\n        console.warn(\n          `[${this.#host.localName}] No trigger was found. Place the popup immediately after its trigger or link them explicitly.`\n        );\n      }\n\n      return null;\n    }\n\n    const claimedTarget = adjacent.getAttribute('commandfor');\n\n    if (claimedTarget) {\n      if (__DEV__) {\n        console.warn(\n          `[${this.#host.localName}] The adjacent trigger already targets \\`${claimedTarget}\\`; link this popup explicitly.`\n        );\n      }\n\n      return null;\n    }\n\n    const id = nextPopupId(scopedRoot);\n\n    this.#host.id = id;\n    adjacent.setAttribute('commandfor', id);\n    this.#implicitBinding = { id, trigger: adjacent };\n    return adjacent;\n  }\n\n  sync(options: PositionControllerOptions): void {\n    this.#positioner.sync({ ...options, popup: this.#host });\n  }\n\n  cleanup(): void {\n    this.#positioner.cleanup();\n  }\n\n  hostDisconnected(): void {\n    this.cleanup();\n    this.#releaseImplicitBinding();\n  }\n\n  hostDestroyed(): void {\n    this.cleanup();\n    this.#releaseImplicitBinding();\n  }\n\n  #releaseImplicitBinding(): void {\n    const binding = this.#implicitBinding;\n    if (!binding) return;\n\n    if (binding.trigger.getAttribute('commandfor') === binding.id) {\n      binding.trigger.removeAttribute('commandfor');\n    }\n\n    if (this.#host.id === binding.id) {\n      this.#host.removeAttribute('id');\n    }\n\n    this.#implicitBinding = null;\n  }\n}\n\nfunction nextPopupId(root: Document | DocumentFragment): string {\n  let id: string;\n\n  do id = `vjs-popup-${++popupId}`;\n  while (root.getElementById(id));\n\n  return id;\n}\n"],"mappings":";;AAOA,IAAI,UAAU;;AAQd,IAAa,qBAAb,MAA8D;CAC5D;CACA,cAAuB,IAAI,gBAAgB;CAC3C,mBAAkD;CAElD,YAAY,MAA8B;EACxC,KAAKA,QAAQ;EACb,KAAK,cAAc,IAAI;CACzB;;CAGA,YAAY,SAAsC;EAChD,MAAM,OAAO,KAAKA,MAAM,YAAY;EAEpC,IAAI,KAAK,aAAa,KAAK,iBAAiB,KAAK,aAAa,KAAK,wBAAwB;GACzF,KAAKE,wBAAwB;GAC7B,OAAO;EACT;EAEA,MAAM,aAAa;EAEnB,IAAI,SAAS;GACX,KAAKA,wBAAwB;GAC7B,OAAO,WAAW,eAAe,OAAO;EAC1C;EAEA,IAAI,KAAKC,kBAAkB;GACzB,MAAM,EAAE,IAAI,SAAS,iBAAiB,KAAKA;GAE3C,IACE,KAAKH,MAAM,OAAO,MAClB,aAAa,aAAa,YAAY,MAAM,MAC5C,KAAKA,MAAM,2BAA2B,cAEtC,OAAO;GAGT,KAAKE,wBAAwB;EAC/B;EAEA,IAAI,KAAKF,MAAM,IACb,OAAO,WAAW,cAA2B,gBAAgB,KAAKA,MAAM,GAAG,GAAG;EAGhF,MAAM,WAAW,KAAKA,MAAM;EAE5B,IAAI,EAAE,oBAAoB,cAOxB,OAAO;EAKT,IAFsB,SAAS,aAAa,YAE5B,GAOd,OAAO;EAGT,MAAM,KAAK,YAAY,UAAU;EAEjC,KAAKA,MAAM,KAAK;EAChB,SAAS,aAAa,cAAc,EAAE;EACtC,KAAKG,mBAAmB;GAAE;GAAI,SAAS;EAAS;EAChD,OAAO;CACT;CAEA,KAAK,SAA0C;EAC7C,KAAKF,YAAY,KAAK;GAAE,GAAG;GAAS,OAAO,KAAKD;EAAM,CAAC;CACzD;CAEA,UAAgB;EACd,KAAKC,YAAY,QAAQ;CAC3B;CAEA,mBAAyB;EACvB,KAAK,QAAQ;EACb,KAAKC,wBAAwB;CAC/B;CAEA,gBAAsB;EACpB,KAAK,QAAQ;EACb,KAAKA,wBAAwB;CAC/B;CAEA,0BAAgC;EAC9B,MAAM,UAAU,KAAKC;EACrB,IAAI,CAAC,SAAS;EAEd,IAAI,QAAQ,QAAQ,aAAa,YAAY,MAAM,QAAQ,IACzD,QAAQ,QAAQ,gBAAgB,YAAY;EAG9C,IAAI,KAAKH,MAAM,OAAO,QAAQ,IAC5B,KAAKA,MAAM,gBAAgB,IAAI;EAGjC,KAAKG,mBAAmB;CAC1B;AACF;AAEA,SAAS,YAAY,MAA2C;CAC9D,IAAI;CAEJ;EAAG,KAAK,aAAa,EAAE;QAChB,KAAK,eAAe,EAAE;CAE7B,OAAO;AACT"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"element.js","names":["#core","#shadow","#fallback","#children","#playback","#metadata","#disconnect","#adopt","#loadState","#image","#imageLoadState","#applySource","#owned","#imageEvents"],"sources":["../../../../src/ui/poster/element.ts"],"sourcesContent":["import { PosterCore, PosterDataAttrs, type PosterImageLoadState } from '@videojs/core';\nimport { applyStateDataAttrs, logMissingFeature, selectMetadata, selectPlayback } from '@videojs/core/dom';\nimport type { PropertyValues } from '@videojs/element';\nimport { findComposedElement, isHTMLImageElement } 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: block;\n}\nimg {\n  display: block;\n  width: 100%;\n  height: 100%;\n  object-fit: var(--media-object-fit, contain);\n  object-position: var(--media-object-position, center);\n}\nimg:not([src]) {\n  visibility: hidden;\n}`;\n\n/**\n * Whether anything already points this image somewhere, which answers both whether the author owns the source and\n * whether there is a download to wait for. A `<source>` counts: inside a `<picture>` it can win over the `src`.\n */\nfunction hasSource(img: HTMLImageElement): boolean {\n  if (img.hasAttribute('src') || img.hasAttribute('srcset')) return true;\n\n  const parent = img.parentElement;\n\n  return parent?.localName === 'picture' && parent.querySelector('source') !== null;\n}\n\n/**\n * Whether `complete` on this image describes a request. It is also true for one that omits both `src` and `srcset`,\n * whatever a parent `<picture>` is fetching on its behalf, so only an image sourced from its own attributes can be\n * read.\n */\nfunction hasOwnSource(img: HTMLImageElement): boolean {\n  return !!img.getAttribute('src') || img.hasAttribute('srcset');\n}\n\n/**\n * The image the element draws when none is supplied, reachable from outside as `::part(image)`. Decorative by default,\n * like the one each skin carries: a resolved URL says nothing about what it depicts.\n */\nfunction createFallbackImage(): HTMLImageElement {\n  const img = document.createElement('img');\n\n  img.alt = '';\n  img.setAttribute('part', 'image');\n  img.setAttribute('decoding', 'async');\n\n  return img;\n}\n\n/** How the current source is faring. */\ntype ImageLoadState = 'pending' | 'loaded' | 'error';\n\n/**\n * `<media-poster>` — sets `src` on a poster image it does not own.\n *\n * The image is a child, as in `<picture>`, but sourcing runs the other way around: `<picture>` treats the `src` on its\n * `<img>` as the fallback, while here an image with no source of its own is the one this element fills in. Give the\n * child a `src`, a `srcset`, or `<source>` candidates and it is yours, left alone.\n *\n * Left empty, the element draws an image of its own in its shadow root. Supply one as a child to describe it or wrap\n * it: `<media-poster><img alt=\"Keynote speaker\"></media-poster>`. Inside a skin, an `<img slot=\"poster\">` of yours\n * replaces the one the skin carries.\n */\nexport class PosterElement extends UIElement {\n  static readonly tagName = 'media-poster';\n\n  readonly #core = new PosterCore();\n  readonly #shadow = this.attachShadow({ mode: 'open' });\n  readonly #fallback = createFallbackImage();\n  readonly #children = new MutationObserver(() => this.requestUpdate());\n\n  readonly #playback = new PlayerController(this, playerContext, selectPlayback);\n  readonly #metadata = new PlayerController(this, playerContext, selectMetadata);\n\n  #image: HTMLImageElement | null = null;\n  /** Whether `#image` had no source of its own when it became active. */\n  #owned = false;\n  #imageLoadState: ImageLoadState = 'pending';\n\n  #imageEvents: AbortController | null = null;\n  #disconnect: AbortController | 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  override connectedCallback(): void {\n    super.connectedCallback();\n\n    if (this.destroyed) return;\n\n    this.#disconnect = new AbortController();\n    const { signal } = this.#disconnect;\n\n    // Two ways the image can change: a skin's forwarding slot fills or empties,\n    // which bubbles here, or a child is added or removed, which announces nothing.\n    this.addEventListener('slotchange', () => this.requestUpdate(), { signal });\n    this.#children.observe(this, { childList: true, subtree: true });\n\n    if (__DEV__ && !this.#playback.value) {\n      logMissingFeature(this.localName, this.#playback.displayName ?? 'playback');\n    }\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n\n    this.#adopt(null);\n    this.#children.disconnect();\n    this.#disconnect?.abort();\n    this.#disconnect = null;\n  }\n\n  get #loadState(): PosterImageLoadState {\n    if (!this.#image || !hasSource(this.#image)) return 'none';\n\n    return this.#imageLoadState === 'pending' ? 'loading' : this.#imageLoadState;\n  }\n\n  protected override update(changed: PropertyValues): void {\n    super.update(changed);\n\n    const playback = this.#playback.value;\n    if (!playback) return;\n\n    // `metadata` is optional: without it nothing resolves a URL, and this stays\n    // a visibility wrapper around whatever the author supplied.\n    this.#core.setMedia({\n      started: playback.started,\n      poster: this.#metadata.value?.poster ?? '',\n    });\n\n    const { src } = this.#core.getState();\n\n    // A skin forwards its own `<slot name=\"poster\">` in, so the image may sit a slot or two down inside a `<picture>`.\n    this.#adopt(findComposedElement(this, isHTMLImageElement) ?? this.#fallback);\n    this.#applySource(src);\n\n    this.#core.setImageLoadState(this.#loadState);\n    applyStateDataAttrs(this, this.#core.getState(), PosterDataAttrs);\n  }\n\n  /**\n   * Ownership is settled once, when an image becomes active: after the first fill the `src` we set would itself look\n   * authored. Re-slot an image with a source to hand it back, the way React decides a field is controlled at mount.\n   */\n  #adopt(next: HTMLImageElement | null): void {\n    if (next === this.#image) return;\n\n    // An image that steps aside keeps downloading whatever we pointed it at.\n    if (this.#owned) this.#image?.removeAttribute('src');\n\n    this.#imageEvents?.abort();\n    this.#imageEvents = null;\n\n    this.#image = next;\n    this.#owned = next !== null && !hasSource(next);\n    this.#imageLoadState = 'pending';\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    if (!next) return;\n\n    // An image that finished before we started listening never fires again, so\n    // its load state has to be read off it. Decoded pixels stand on their own;\n    // the absence of them only means failure once `complete` can be trusted.\n    if (next.naturalWidth > 0) this.#imageLoadState = 'loaded';\n    else if (next.complete && hasOwnSource(next)) this.#imageLoadState = 'error';\n\n    this.#imageEvents = new AbortController();\n    const { signal } = this.#imageEvents;\n    const settle = (loadState: ImageLoadState) => () => {\n      this.#imageLoadState = loadState;\n      this.requestUpdate();\n    };\n\n    next.addEventListener('load', settle('loaded'), { signal });\n    next.addEventListener('error', settle('error'), { signal });\n  }\n\n  #applySource(src: string): void {\n    const img = this.#image;\n    if (!img || !this.#owned) return;\n\n    if (!src) {\n      this.#imageLoadState = 'pending';\n      img.removeAttribute('src');\n    } else if (img.getAttribute('src') !== src) {\n      // Reset before the write, not after: how the last source fared says\n      // nothing about this one, and the write itself can settle it.\n      this.#imageLoadState = 'pending';\n      img.setAttribute('src', src);\n    }\n  }\n}\n"],"mappings":"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"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"element.js","names":["#setContent","#mediaState","#core","#i18n","#options"],"sources":["../../../../src/ui/quality-radio-group/element.ts"],"sourcesContent":["import { QualityRadioGroupCore, QualityRadioGroupDataAttrs, type QualityRadioGroupOption } from '@videojs/core';\nimport { applyStateDataAttrs, logMissingFeature, selectQuality } from '@videojs/core/dom';\nimport { type Text, translateText } from '@videojs/core/i18n';\nimport type { PropertyDeclarationMap, PropertyValues } from '@videojs/element';\n\nimport { i18nContext } from '../../i18n/context';\nimport { I18nController } from '../../i18n/controller';\nimport { playerContext } from '../../player/context';\nimport { PlayerController } from '../../player/controller';\nimport { MenuRadioGroupElement } from '../menu/radio-group';\nimport type { MenuRadioItemElement } from '../menu/radio-item';\nimport { RadioOptionsController } from '../radio-options/controller';\n\nexport class QualityRadioGroupElement extends MenuRadioGroupElement {\n  static override readonly tagName = 'media-quality-radio-group';\n\n  static override properties = {\n    ...MenuRadioGroupElement.properties,\n    disabled: { type: Boolean },\n    label: { type: String },\n  } satisfies PropertyDeclarationMap<'value' | 'label' | 'disabled'>;\n\n  disabled = false;\n  label: Text | string = '';\n  formatRendition = QualityRadioGroupCore.defaultProps.formatRendition;\n\n  readonly #core = new QualityRadioGroupCore();\n  readonly #i18n = new I18nController(this, i18nContext);\n  readonly #mediaState = new PlayerController(this, playerContext, selectQuality);\n  readonly #options = new RadioOptionsController<QualityRadioGroupOption>(this, {\n    renderItem: (item, label, option) => this.#setContent(item, label, option.tier, option.badge),\n    setItemAttributes: (item, option) => item.setAttribute('data-rendition', option.value),\n    getOptionCacheKey: (option) => `${option.tier ?? ''}:${option.badge ?? ''}`,\n    onValueChange: (value) => {\n      const media = this.#mediaState.value;\n\n      if (media) this.#core.selectValue(media, value);\n    },\n  });\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n\n    if (this.destroyed) return;\n\n    if (__DEV__ && !this.#mediaState.value && this.#mediaState.displayName) {\n      logMissingFeature(this.localName, this.#mediaState.displayName);\n    }\n  }\n\n  protected override update(changed: PropertyValues): void {\n    const media = this.#mediaState.value;\n    let state: QualityRadioGroupCore.State | null = null;\n\n    if (media) {\n      this.#core.setProps({ formatRendition: this.formatRendition, disabled: this.disabled, label: this.label });\n      this.#core.setMedia(media);\n      state = this.#core.getState();\n\n      this.applyDefaultAriaLabel(translateText(this.#core.getLabel(state), this.#i18n.value));\n      this.#options.sync(state, this.#i18n.value, this.#i18n.locale);\n      this.publishMenuOptionState(state.disabled, state.hidden, state.availability);\n    } else {\n      this.publishMenuOptionState(true, true, 'unsupported');\n    }\n\n    super.update(changed);\n\n    if (state) applyStateDataAttrs(this, state, QualityRadioGroupDataAttrs);\n  }\n\n  #setContent(item: MenuRadioItemElement, label: string, tier: string | undefined, badge: string | undefined): void {\n    const labelPart = item.querySelector<HTMLElement>('[data-part~=\"label\"]');\n    const tierPart = item.querySelector<HTMLElement>('[data-part~=\"tier\"]');\n    const badgePart = item.querySelector<HTMLElement>('[data-part~=\"badge\"]');\n\n    if (labelPart) {\n      labelPart.textContent = label;\n    }\n\n    if (tierPart) {\n      tierPart.textContent = tier ?? '';\n      tierPart.hidden = !tier;\n    }\n\n    if (badgePart) {\n      badgePart.textContent = badge ?? '';\n      badgePart.hidden = !badge;\n    }\n\n    if (!labelPart && !tierPart && !badgePart) {\n      item.textContent = [label, tier, badge].filter(Boolean).join(' ');\n    }\n  }\n}\n\nexport namespace QualityRadioGroupElement {\n  export type State = QualityRadioGroupCore.State;\n}\n"],"mappings":";;;;;;;;;;AAaA,IAAa,2BAAb,cAA8C,sBAAsB;;;EASvD,KAAA,WAAA;EACY,KAAA,QAAA;EACL,KAAA,kBAAA,sBAAsB,aAAa;EAEpC,KAAA,QAAA,IAAI,sBAAsB;EAC1B,KAAA,QAAA,IAAI,eAAe,MAAM,WAAW;EAC9B,KAAA,cAAA,IAAI,iBAAiB,MAAM,eAAe,aAAa;EAC1D,KAAA,WAAA,IAAI,uBAAgD,MAAM;GAC5E,aAAa,MAAM,OAAO,WAAW,KAAKA,YAAY,MAAM,OAAO,OAAO,MAAM,OAAO,KAAK;GAC5F,oBAAoB,MAAM,WAAW,KAAK,aAAa,kBAAkB,OAAO,KAAK;GACrF,oBAAoB,WAAW,GAAG,OAAO,QAAQ,GAAG,GAAG,OAAO,SAAS;GACvE,gBAAgB,UAAU;IACxB,MAAM,QAAQ,KAAKC,YAAY;IAE/B,IAAI,OAAO,KAAKC,MAAM,YAAY,OAAO,KAAK;GAChD;EACF,CAAC;;;EAxBkC,KAAA,UAAA;;;EAEN,KAAA,aAAA;GAC3B,GAAG,sBAAsB;GACzB,UAAU,EAAE,MAAM,QAAQ;GAC1B,OAAO,EAAE,MAAM,OAAO;EACxB;;CAMA;CACA;CACA;CACA;CAWA,oBAAmC;EACjC,MAAM,kBAAkB;EAExB,IAAI,KAAK,WAAW;CAKtB;CAEA,OAA0B,SAA+B;EACvD,MAAM,QAAQ,KAAKD,YAAY;EAC/B,IAAI,QAA4C;EAEhD,IAAI,OAAO;GACT,KAAKC,MAAM,SAAS;IAAE,iBAAiB,KAAK;IAAiB,UAAU,KAAK;IAAU,OAAO,KAAK;GAAM,CAAC;GACzG,KAAKA,MAAM,SAAS,KAAK;GACzB,QAAQ,KAAKA,MAAM,SAAS;GAE5B,KAAK,sBAAsB,cAAc,KAAKA,MAAM,SAAS,KAAK,GAAG,KAAKC,MAAM,KAAK,CAAC;GACtF,KAAKC,SAAS,KAAK,OAAO,KAAKD,MAAM,OAAO,KAAKA,MAAM,MAAM;GAC7D,KAAK,uBAAuB,MAAM,UAAU,MAAM,QAAQ,MAAM,YAAY;EAC9E,OACE,KAAK,uBAAuB,MAAM,MAAM,aAAa;EAGvD,MAAM,OAAO,OAAO;EAEpB,IAAI,OAAO,oBAAoB,MAAM,OAAO,0BAA0B;CACxE;CAEA,YAAY,MAA4B,OAAe,MAA0B,OAAiC;EAChH,MAAM,YAAY,KAAK,cAA2B,wBAAsB;EACxE,MAAM,WAAW,KAAK,cAA2B,uBAAqB;EACtE,MAAM,YAAY,KAAK,cAA2B,wBAAsB;EAExE,IAAI,WACF,UAAU,cAAc;EAG1B,IAAI,UAAU;GACZ,SAAS,cAAc,QAAQ;GAC/B,SAAS,SAAS,CAAC;EACrB;EAEA,IAAI,WAAW;GACb,UAAU,cAAc,SAAS;GACjC,UAAU,SAAS,CAAC;EACtB;EAEA,IAAI,CAAC,aAAa,CAAC,YAAY,CAAC,WAC9B,KAAK,cAAc;GAAC;GAAO;GAAM;EAAK,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;CAEpE;AACF"}

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

@@ -0,0 +1,6 @@
+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/context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.js","names":[],"sources":["../../../../src/ui/radio-group/context.ts"],"sourcesContent":["import { createContext } from '@videojs/element/context';\n\nexport interface RadioGroupContextValue {\n  value: string;\n  onValueChange: (value: string) => void;\n}\n\nconst RADIO_GROUP_CONTEXT_KEY = Symbol('@videojs/radio-group');\n\nexport const radioGroupContext = createContext<RadioGroupContextValue>(RADIO_GROUP_CONTEXT_KEY);\n"],"mappings":";AASA,MAAa,oBAAoB,cAFD,OAAO,sBAEgC,CAAuB"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"element.js","names":["#provider"],"sources":["../../../../src/ui/radio-group/element.ts"],"sourcesContent":["import type { PropertyDeclarationMap, PropertyValues } from '@videojs/element';\nimport { ContextProvider } from '@videojs/element/context';\n\nimport { UIElement } from '../ui-element';\nimport { radioGroupContext } from './context';\n\n/** @fires value-change - Fired when the selected value changes. */\nexport class RadioGroupElement extends UIElement {\n  static override properties = {\n    value: { type: String },\n  } satisfies PropertyDeclarationMap<'value'>;\n\n  value = '';\n\n  readonly #provider = new ContextProvider(this, { context: radioGroupContext });\n\n  protected override update(changed: PropertyValues): void {\n    super.update(changed);\n\n    this.#provider.setValue({\n      value: this.value,\n      onValueChange: (next: string) => {\n        this.value = next;\n        this.dispatchEvent(new CustomEvent('value-change', { detail: { value: next }, bubbles: true }));\n      },\n    });\n  }\n}\n"],"mappings":";;;;;AAOA,IAAa,oBAAb,cAAuC,UAAU;;;EAKvC,KAAA,QAAA;EAEa,KAAA,YAAA,IAAI,gBAAgB,MAAM,EAAE,SAAS,kBAAkB,CAAC;;;EANhD,KAAA,aAAA,EAC3B,OAAO,EAAE,MAAM,OAAO,EACxB;;CAIA;CAEA,OAA0B,SAA+B;EACvD,MAAM,OAAO,OAAO;EAEpB,KAAKA,UAAU,SAAS;GACtB,OAAO,KAAK;GACZ,gBAAgB,SAAiB;IAC/B,KAAK,QAAQ;IACb,KAAK,cAAc,IAAI,YAAY,gBAAgB;KAAE,QAAQ,EAAE,OAAO,KAAK;KAAG,SAAS;IAAK,CAAC,CAAC;GAChG;EACF,CAAC;CACH;AACF"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"controller.js","names":["#host","#config","#disconnect","#handleValueChange","#contentKey","#translator","#setItemLabel"],"sources":["../../../../src/ui/radio-options/controller.ts"],"sourcesContent":["import type { RadioOption, RadioOptionsState } from '@videojs/core';\nimport { applyElementProps } from '@videojs/core/dom';\nimport { type Translator, translateText } from '@videojs/core/i18n';\nimport type { ReactiveController, ReactiveControllerHost } from '@videojs/element';\nimport { cloneTemplateRoot, getTemplateElement, getTemplateRoot } from '@videojs/utils/dom';\n\nimport { cacheKey } from '../../i18n/cache-key';\nimport { MenuItemIndicatorElement } from '../menu/item-indicator';\nimport { MenuRadioItemElement } from '../menu/radio-item';\n\nexport type RadioOptionsControllerHost = ReactiveControllerHost &\n  HTMLElement & {\n    value: string;\n  };\n\nexport interface RadioOptionsControllerConfig<Option extends RadioOption> {\n  renderItem?: ((item: MenuRadioItemElement, label: string, option: Option) => void) | undefined;\n  setItemAttributes?: ((item: MenuRadioItemElement, option: Option) => void) | undefined;\n  getOptionCacheKey?: ((option: Option) => string) | undefined;\n  onValueChange: (value: string) => void;\n}\n\n/** Renders normalized options into menu radio items and manages their interaction lifecycle. */\nexport class RadioOptionsController<Option extends RadioOption> implements ReactiveController {\n  readonly #host: RadioOptionsControllerHost;\n  readonly #config: RadioOptionsControllerConfig<Option>;\n\n  #contentKey = '';\n  #translator: Translator | null = null;\n  #disconnect: AbortController | null = null;\n\n  constructor(host: RadioOptionsControllerHost, config: RadioOptionsControllerConfig<Option>) {\n    this.#host = host;\n    this.#config = config;\n    host.addController(this);\n  }\n\n  hostConnected(): void {\n    this.#disconnect = new AbortController();\n    this.#host.addEventListener('value-change', this.#handleValueChange, { signal: this.#disconnect.signal });\n  }\n\n  hostDisconnected(): void {\n    this.#disconnect?.abort();\n    this.#disconnect = null;\n  }\n\n  hostDestroyed(): void {\n    this.hostDisconnected();\n  }\n\n  sync(state: RadioOptionsState<Option>, translator: Translator, locale: string): void {\n    this.#host.value = state.value;\n    applyElementProps(this.#host, {\n      'aria-disabled': state.disabled ? 'true' : undefined,\n      hidden: state.hidden ? '' : undefined,\n    });\n\n    const template = getTemplateElement(this.#host);\n    const templateRoot = template ? getTemplateRoot(template) : null;\n    const itemRoot = templateRoot?.localName === MenuRadioItemElement.tagName ? templateRoot : null;\n\n    const contentKey = `${state.options\n      .map(\n        (option) =>\n          `${option.value}:${cacheKey(option.label, option.labelParams)}:${this.#config.getOptionCacheKey?.(option) ?? ''}`\n      )\n      .join('|')}::${locale}::${template?.innerHTML ?? ''}`;\n\n    if (contentKey !== this.#contentKey || translator !== this.#translator) {\n      this.#contentKey = contentKey;\n      this.#translator = translator;\n\n      for (const child of [...this.#host.children]) {\n        if (child === template) continue;\n\n        child.remove();\n      }\n\n      const items = state.options.map((option) => {\n        const item = itemRoot\n          ? (cloneTemplateRoot(itemRoot, this.#host.ownerDocument) as MenuRadioItemElement)\n          : (this.#host.ownerDocument.createElement(MenuRadioItemElement.tagName) as MenuRadioItemElement);\n\n        item.value = option.value;\n        this.#config.setItemAttributes?.(item, option);\n        const label = translateText(option.label, translator, option.labelParams);\n\n        if (this.#config.renderItem) this.#config.renderItem(item, label, option);\n        else this.#setItemLabel(item, label);\n\n        return item;\n      });\n\n      this.#host.append(...items);\n    }\n\n    const optionsByValue = new Map(state.options.map((option) => [option.value, option]));\n\n    for (const item of this.#host.querySelectorAll<MenuRadioItemElement>(MenuRadioItemElement.tagName)) {\n      const checked = item.value === state.value;\n      const option = optionsByValue.get(item.value);\n\n      item.disabled = state.disabled || option?.disabled === true;\n\n      for (const indicator of item.querySelectorAll<MenuItemIndicatorElement>(MenuItemIndicatorElement.tagName)) {\n        indicator.checked = checked;\n      }\n    }\n  }\n\n  #handleValueChange = (event: Event): void => {\n    if (event.target !== this.#host) return;\n\n    const { value } = (event as CustomEvent<{ value: string }>).detail;\n\n    this.#config.onValueChange(value);\n  };\n\n  #setItemLabel(item: MenuRadioItemElement, label: string): void {\n    const labelPart = item.querySelector<HTMLElement>('[data-part~=\"label\"]');\n\n    if (labelPart) labelPart.textContent = label;\n    else item.textContent = label;\n  }\n}\n"],"mappings":";;;;;;;;AAuBA,IAAa,yBAAb,MAA8F;CAC5F;CACA;CAEA,cAAc;CACd,cAAiC;CACjC,cAAsC;CAEtC,YAAY,MAAkC,QAA8C;EAC1F,KAAKA,QAAQ;EACb,KAAKC,UAAU;EACf,KAAK,cAAc,IAAI;CACzB;CAEA,gBAAsB;EACpB,KAAKC,cAAc,IAAI,gBAAgB;EACvC,KAAKF,MAAM,iBAAiB,gBAAgB,KAAKG,oBAAoB,EAAE,QAAQ,KAAKD,YAAY,OAAO,CAAC;CAC1G;CAEA,mBAAyB;EACvB,KAAKA,aAAa,MAAM;EACxB,KAAKA,cAAc;CACrB;CAEA,gBAAsB;EACpB,KAAK,iBAAiB;CACxB;CAEA,KAAK,OAAkC,YAAwB,QAAsB;EACnF,KAAKF,MAAM,QAAQ,MAAM;EACzB,kBAAkB,KAAKA,OAAO;GAC5B,iBAAiB,MAAM,WAAW,SAAS,KAAA;GAC3C,QAAQ,MAAM,SAAS,KAAK,KAAA;EAC9B,CAAC;EAED,MAAM,WAAW,mBAAmB,KAAKA,KAAK;EAC9C,MAAM,eAAe,WAAW,gBAAgB,QAAQ,IAAI;EAC5D,MAAM,WAAW,cAAc,cAAc,qBAAqB,UAAU,eAAe;EAE3F,MAAM,aAAa,GAAG,MAAM,QACzB,KACE,WACC,GAAG,OAAO,MAAM,GAAG,SAAS,OAAO,OAAO,OAAO,WAAW,EAAE,GAAG,KAAKC,QAAQ,oBAAoB,MAAM,KAAK,IACjH,CAAC,CACA,KAAK,GAAG,EAAE,IAAI,OAAO,IAAI,UAAU,aAAa;EAEnD,IAAI,eAAe,KAAKG,eAAe,eAAe,KAAKC,aAAa;GACtE,KAAKD,cAAc;GACnB,KAAKC,cAAc;GAEnB,KAAK,MAAM,SAAS,CAAC,GAAG,KAAKL,MAAM,QAAQ,GAAG;IAC5C,IAAI,UAAU,UAAU;IAExB,MAAM,OAAO;GACf;GAEA,MAAM,QAAQ,MAAM,QAAQ,KAAK,WAAW;IAC1C,MAAM,OAAO,WACR,kBAAkB,UAAU,KAAKA,MAAM,aAAa,IACpD,KAAKA,MAAM,cAAc,cAAc,qBAAqB,OAAO;IAExE,KAAK,QAAQ,OAAO;IACpB,KAAKC,QAAQ,oBAAoB,MAAM,MAAM;IAC7C,MAAM,QAAQ,cAAc,OAAO,OAAO,YAAY,OAAO,WAAW;IAExE,IAAI,KAAKA,QAAQ,YAAY,KAAKA,QAAQ,WAAW,MAAM,OAAO,MAAM;SACnE,KAAKK,cAAc,MAAM,KAAK;IAEnC,OAAO;GACT,CAAC;GAED,KAAKN,MAAM,OAAO,GAAG,KAAK;EAC5B;EAEA,MAAM,iBAAiB,IAAI,IAAI,MAAM,QAAQ,KAAK,WAAW,CAAC,OAAO,OAAO,MAAM,CAAC,CAAC;EAEpF,KAAK,MAAM,QAAQ,KAAKA,MAAM,iBAAuC,qBAAqB,OAAO,GAAG;GAClG,MAAM,UAAU,KAAK,UAAU,MAAM;GACrC,MAAM,SAAS,eAAe,IAAI,KAAK,KAAK;GAE5C,KAAK,WAAW,MAAM,YAAY,QAAQ,aAAa;GAEvD,KAAK,MAAM,aAAa,KAAK,iBAA2C,yBAAyB,OAAO,GACtG,UAAU,UAAU;EAExB;CACF;CAEA,sBAAsB,UAAuB;EAC3C,IAAI,MAAM,WAAW,KAAKA,OAAO;EAEjC,MAAM,EAAE,UAAW,MAAyC;EAE5D,KAAKC,QAAQ,cAAc,KAAK;CAClC;CAEA,cAAc,MAA4B,OAAqB;EAC7D,MAAM,YAAY,KAAK,cAA2B,wBAAsB;EAExE,IAAI,WAAW,UAAU,cAAc;OAClC,KAAK,cAAc;CAC1B;AACF"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"element.js","names":[],"sources":["../../../../src/ui/seek-button/element.ts"],"sourcesContent":["import { SeekButtonCore, SeekButtonDataAttrs } from '@videojs/core';\nimport { selectTime } from '@videojs/core/dom';\nimport type { PropertyDeclarationMap } from '@videojs/element';\nimport type { MediaTimeState } from '@videojs/media';\n\nimport { playerContext } from '../../player/context';\nimport { PlayerController } from '../../player/controller';\nimport { MediaButtonElement } from '../media-button-element';\n\nexport class SeekButtonElement extends MediaButtonElement<SeekButtonCore> {\n  static readonly tagName = 'media-seek-button';\n\n  static override properties: PropertyDeclarationMap = {\n    ...MediaButtonElement.properties,\n    seconds: { type: Number },\n  };\n\n  seconds = SeekButtonCore.defaultProps.seconds;\n\n  protected readonly core = new SeekButtonCore();\n  protected readonly stateAttrMap = SeekButtonDataAttrs;\n  protected readonly mediaState = new PlayerController(this, playerContext, selectTime);\n  protected override readonly hotkeyAction = 'seekStep';\n\n  protected override get hotkeyValue(): number | undefined {\n    return this.seconds;\n  }\n\n  protected activate(state: MediaTimeState): void {\n    this.core.seek(state);\n  }\n}\n"],"mappings":";;;;;;AASA,IAAa,oBAAb,cAAuC,mBAAmC;;;EAQ9D,KAAA,UAAA,eAAe,aAAa;EAEZ,KAAA,OAAA,IAAI,eAAe;EACX,KAAA,eAAA;EACF,KAAA,aAAA,IAAI,iBAAiB,MAAM,eAAe,UAAU;EACzC,KAAA,eAAA;;;EAZjB,KAAA,UAAA;;;EAE2B,KAAA,aAAA;GACnD,GAAG,mBAAmB;GACtB,SAAS,EAAE,MAAM,OAAO;EAC1B;;CASA,IAAuB,cAAkC;EACvD,OAAO,KAAK;CACd;CAEA,SAAmB,OAA6B;EAC9C,KAAK,KAAK,KAAK,KAAK;CACtB;AACF"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"element.js","names":["#core","#transition","#liveIndicator"],"sources":["../../../../src/ui/seek-indicator/element.ts"],"sourcesContent":["import { getSeekIndicatorDisplayValue, SeekIndicatorCore, SeekIndicatorDataAttrs } from '@videojs/core';\nimport { createTransition } from '@videojs/core/dom';\nimport type { PropertyDeclarationMap } from '@videojs/element';\n\nimport { InputIndicatorElement } from '../input-indicator/element';\nimport { LiveIndicator } from '../input-indicator/live-indicator';\n\nexport class SeekIndicatorElement extends InputIndicatorElement<SeekIndicatorCore.State> {\n  static readonly tagName = 'media-seek-indicator';\n\n  static override properties = {\n    closeDelay: { type: Number, attribute: 'close-delay' },\n  } satisfies PropertyDeclarationMap<'closeDelay'>;\n\n  closeDelay: number | undefined;\n\n  readonly #core = new SeekIndicatorCore();\n  readonly #transition = createTransition();\n  readonly #liveIndicator = new LiveIndicator({\n    host: this,\n    dataAttrs: SeekIndicatorDataAttrs,\n    render: renderSeekIndicator,\n  });\n\n  protected get core() {\n    return this.#core;\n  }\n\n  protected get transition() {\n    return this.#transition;\n  }\n\n  protected get liveIndicator() {\n    return this.#liveIndicator;\n  }\n\n  protected override syncCoreProps(): void {\n    this.#core.setProps({ closeDelay: this.closeDelay });\n  }\n}\n\nfunction renderSeekIndicator(element: HTMLElement, state: SeekIndicatorCore.State): void {\n  const value = element.querySelector('media-seek-indicator-value');\n  if (!value) return;\n\n  value.textContent = getSeekIndicatorDisplayValue(state);\n}\n"],"mappings":";;;;;AAOA,IAAa,uBAAb,cAA0C,sBAA+C;;EAC7D,KAAA,UAAA;;;EAEG,KAAA,aAAA,EAC3B,YAAY;GAAE,MAAM;GAAQ,WAAW;EAAc,EACvD;;CAIA,QAAiB,IAAI,kBAAkB;CACvC,cAAuB,iBAAiB;CACxC,iBAA0B,IAAI,cAAc;EAC1C,MAAM;EACN,WAAW;EACX,QAAQ;CACV,CAAC;CAED,IAAc,OAAO;EACnB,OAAO,KAAKA;CACd;CAEA,IAAc,aAAa;EACzB,OAAO,KAAKC;CACd;CAEA,IAAc,gBAAgB;EAC5B,OAAO,KAAKC;CACd;CAEA,gBAAyC;EACvC,KAAKF,MAAM,SAAS,EAAE,YAAY,KAAK,WAAW,CAAC;CACrD;AACF;AAEA,SAAS,oBAAoB,SAAsB,OAAsC;CACvF,MAAM,QAAQ,QAAQ,cAAc,4BAA4B;CAChE,IAAI,CAAC,OAAO;CAEZ,MAAM,cAAc,6BAA6B,KAAK;AACxD"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"value.js","names":[],"sources":["../../../../src/ui/seek-indicator/value.ts"],"sourcesContent":["import { UIElement } from '../ui-element';\n\nexport class SeekIndicatorValueElement extends UIElement {\n  static readonly tagName = 'media-seek-indicator-value';\n}\n"],"mappings":";;AAEA,IAAa,4BAAb,cAA+C,UAAU;;EAC7B,KAAA,UAAA;;AAC5B"}