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

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

@@ -1,11 +1,42 @@
+import { i18nContext } from "../../i18n/context.js";
+import { I18nController } from "../../i18n/controller.js";
 import { playerContext } from "../../player/context.js";
-import { MediaElement } from "../media-element.js";
 import { PlayerController } from "../../player/player-controller.js";
-import { applyElementProps, applyStateDataAttrs, logMissingFeature, selectTime } from "@videojs/core/dom";
+import { UIElement } from "../ui-element.js";
 import { TimeCore, TimeDataAttrs } from "@videojs/core";
-
+import { applyElementProps, applyStateDataAttrs, logMissingFeature, selectTime } from "@videojs/core/dom";
+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/time-element.ts
-var TimeElement = class extends MediaElement {
+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.#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) return;
+			this.#toggleType();
+		};
+		this.#handleKeyDown = (event) => {
+			if (event.defaultPrevented || !isInteractiveActivation(event)) return;
+			if (!this.toggle || !this.#state.value) return;
+			event.preventDefault();
+			if (event.repeat) return;
+			this.#toggleType();
+		};
+	}
 	static {
 		this.tagName = "media-time";
 	}
@@ -16,45 +47,108 @@ var TimeElement = class extends MediaElement {
 				type: String,
 				attribute: "negative-sign"
 			},
-			label: { type: String }
+			label: { type: String },
+			toggle: { type: Boolean }
 		};
 	}
-	#core = new TimeCore();
-	#state = new PlayerController(this, playerContext, selectTime);
-	#signSpan = document.createElement("span");
-	#textNode = document.createTextNode("");
-	constructor() {
-		super();
-		this.type = TimeCore.defaultProps.type;
-		this.negativeSign = TimeCore.defaultProps.negativeSign;
-		this.label = TimeCore.defaultProps.label;
-		this.#signSpan.setAttribute("aria-hidden", "true");
-		this.#signSpan.hidden = true;
-		this.appendChild(this.#signSpan);
-		this.appendChild(this.#textNode);
-	}
+	#core;
+	#state;
+	#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);
-		this.#core.setProps(this);
+		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) return;
+		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);
+		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;
-		applyElementProps(this, this.#core.getAttrs(state));
+		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,
+			role: this.toggle ? attrs.role : "time",
+			tabIndex: attrs.tabIndex,
+			datetime: this.toggle ? 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();
+	}
+	#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,
+			role: void 0,
+			tabIndex: void 0,
+			datetime: void 0,
+			"data-type": void 0
+		});
+	}
 };
-
 //#endregion
 export { TimeElement };
+
 //# sourceMappingURL=time-element.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"time-element.js","names":["#core","#state","#signSpan","#textNode"],"sources":["../../../../src/ui/time/time-element.ts"],"sourcesContent":["import { TimeCore, TimeDataAttrs, type TimeType } from '@videojs/core';\nimport { applyElementProps, applyStateDataAttrs, logMissingFeature, selectTime } from '@videojs/core/dom';\nimport type { PropertyDeclarationMap, PropertyValues } from '@videojs/element';\n\nimport { playerContext } from '../../player/context';\nimport { PlayerController } from '../../player/player-controller';\nimport { MediaElement } from '../media-element';\n\nexport class TimeElement extends MediaElement {\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  } satisfies PropertyDeclarationMap<keyof TimeCore.Props>;\n\n  type: TimeType = TimeCore.defaultProps.type;\n  negativeSign = TimeCore.defaultProps.negativeSign;\n  label = TimeCore.defaultProps.label;\n\n  readonly #core = new TimeCore();\n  readonly #state = new PlayerController(this, playerContext, selectTime);\n\n  readonly #signSpan = document.createElement('span');\n  readonly #textNode = document.createTextNode('');\n\n  constructor() {\n    super();\n\n    this.#signSpan.setAttribute('aria-hidden', 'true');\n    this.#signSpan.hidden = true;\n\n    this.appendChild(this.#signSpan);\n    this.appendChild(this.#textNode);\n  }\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n\n    if (__DEV__ && !this.#state.value) {\n      logMissingFeature(this.localName, this.#state.displayName!);\n    }\n  }\n\n  protected override willUpdate(changed: PropertyValues): void {\n    super.willUpdate(changed);\n    this.#core.setProps(this);\n  }\n\n  protected override update(changed: PropertyValues): void {\n    super.update(changed);\n\n    const media = this.#state.value;\n\n    if (!media) return;\n\n    this.#core.setMedia(media);\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    applyElementProps(this, this.#core.getAttrs(state));\n    applyStateDataAttrs(this, state, TimeDataAttrs);\n  }\n}\n"],"mappings":";;;;;;;AAQA,IAAa,cAAb,cAAiC,aAAa;;iBAClB;;;oBAEG;GAC3B,MAAM,EAAE,MAAM,QAAQ;GACtB,cAAc;IAAE,MAAM;IAAQ,WAAW;IAAiB;GAC1D,OAAO,EAAE,MAAM,QAAQ;GACxB;;CAMD,CAASA,OAAQ,IAAI,UAAU;CAC/B,CAASC,QAAS,IAAI,iBAAiB,MAAM,eAAe,WAAW;CAEvE,CAASC,WAAY,SAAS,cAAc,OAAO;CACnD,CAASC,WAAY,SAAS,eAAe,GAAG;CAEhD,cAAc;AACZ,SAAO;cAXQ,SAAS,aAAa;sBACxB,SAAS,aAAa;eAC7B,SAAS,aAAa;AAW5B,QAAKD,SAAU,aAAa,eAAe,OAAO;AAClD,QAAKA,SAAU,SAAS;AAExB,OAAK,YAAY,MAAKA,SAAU;AAChC,OAAK,YAAY,MAAKC,SAAU;;CAGlC,AAAS,oBAA0B;AACjC,QAAM,mBAAmB;AAEzB,MAAe,CAAC,MAAKF,MAAO,MAC1B,mBAAkB,KAAK,WAAW,MAAKA,MAAO,YAAa;;CAI/D,AAAmB,WAAW,SAA+B;AAC3D,QAAM,WAAW,QAAQ;AACzB,QAAKD,KAAM,SAAS,KAAK;;CAG3B,AAAmB,OAAO,SAA+B;AACvD,QAAM,OAAO,QAAQ;EAErB,MAAM,QAAQ,MAAKC,MAAO;AAE1B,MAAI,CAAC,MAAO;AAEZ,QAAKD,KAAM,SAAS,MAAM;EAC1B,MAAM,QAAQ,MAAKA,KAAM,UAAU;AAEnC,QAAKE,SAAU,SAAS,CAAC,MAAM;AAC/B,QAAKA,SAAU,cAAc,MAAM,WAAW,KAAK,eAAe;AAClE,QAAKC,SAAU,cAAc,MAAM;AAEnC,oBAAkB,MAAM,MAAKH,KAAM,SAAS,MAAM,CAAC;AACnD,sBAAoB,MAAM,OAAO,cAAc"}
+{"version":3,"file":"time-element.js","names":["#state","#toggleType","#core","#i18n","#signSpan","#textNode","#disconnect","#syncListeners","#listening","#activeType","#clearAttrs","#getLabelParams","#handleClick","#handleKeyDown"],"sources":["../../../../src/ui/time/time-element.ts"],"sourcesContent":["import { TimeCore, TimeDataAttrs, type TimeType } from '@videojs/core';\nimport { applyElementProps, applyStateDataAttrs, logMissingFeature, 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 { 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/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 #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);\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      role: this.toggle ? attrs.role : 'time',\n      tabIndex: attrs.tabIndex,\n      datetime: this.toggle ? 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) 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) 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  #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      role: undefined,\n      tabIndex: undefined,\n      datetime: undefined,\n      'data-type': undefined,\n    });\n  }\n}\n"],"mappings":";;;;;;;;;;;;AAcA,IAAa,cAAb,cAAiC,UAAU;;;EAUxB,KAAA,OAAA,SAAS,aAAa;EACxB,KAAA,eAAA,SAAS,aAAa;EACd,KAAA,QAAA;EACd,KAAA,SAAA,SAAS,aAAa;EAEd,KAAA,QAAA,IAAI,SAAS;EACZ,KAAA,SAAA,IAAI,iBAAiB,MAAM,eAAe,UAAU;EACrD,KAAA,QAAA,IAAI,eAAe,MAAM,WAAW;EAEhC,KAAA,YAAA,SAAS,cAAc,MAAM;EAC7B,KAAA,YAAA,IAAI,KAAK;EAEQ,KAAA,cAAA;EACzB,KAAA,aAAA;EACW,KAAA,cAAA,SAAS,aAAa;EA6F9B,KAAA,gBAAA,UAA4B;GAC1C,IAAI,MAAM,oBAAoB,CAAC,KAAK,UAAU,CAAC,KAAKA,OAAO,OAAO;GAElE,KAAKC,YAAY;EACnB;EAEkB,KAAA,kBAAA,UAA+B;GAC/C,IAAI,MAAM,oBAAoB,CAAC,wBAAwB,KAAK,GAAG;GAE/D,IAAI,CAAC,KAAK,UAAU,CAAC,KAAKD,OAAO,OAAO;GAGxC,MAAM,eAAe;GAErB,IAAI,MAAM,QAAQ;GAElB,KAAKC,YAAY;EACnB;;;EArI0B,KAAA,UAAA;;;EAEG,KAAA,aAAA;GAC3B,MAAM,EAAE,MAAM,OAAO;GACrB,cAAc;IAAE,MAAM;IAAQ,WAAW;GAAgB;GACzD,OAAO,EAAE,MAAM,OAAO;GACtB,QAAQ,EAAE,MAAM,QAAQ;EAC1B;;CAOA;CACA;CACA;CAEA;CACA;CAEA;CACA;CACA;CAEA,oBAAmC;EACjC,MAAM,kBAAkB;EAExB,KAAKK,cAAc,IAAI,gBAAgB;EACvC,KAAKC,eAAe;EAEpB,IAAI,CAAC,KAAKH,UAAU,YAAY;GAC9B,KAAKA,UAAU,aAAa,eAAe,MAAM;GACjD,KAAKA,UAAU,SAAS;GACxB,KAAK,OAAO,KAAKA,WAAW,KAAKC,SAAS;EAC5C;EAEA,IAAe,CAAC,KAAKL,OAAO,OAC1B,kBAAkB,KAAK,WAAW,KAAKA,OAAO,WAAY;CAE9D;CAEA,uBAAsC;EACpC,MAAM,qBAAqB;EAC3B,KAAKM,aAAa,MAAM;EACxB,KAAKA,cAAc;EACnB,KAAKE,aAAa;CACpB;CAEA,WAA8B,SAA+B;EAC3D,MAAM,WAAW,OAAO;EAExB,IAAI,QAAQ,IAAI,MAAM,KAAK,QAAQ,IAAI,QAAQ,GAC7C,KAAKC,cAAc,KAAK;CAE5B;CAEA,OAA0B,SAA+B;EACvD,MAAM,OAAO,OAAO;EAEpB,IAAI,QAAQ,IAAI,QAAQ,GACtB,KAAKF,eAAe;EAGtB,MAAM,QAAQ,KAAKP,OAAO;EAE1B,IAAI,CAAC,OAAO;GACV,KAAKU,YAAY;GACjB;EACF;EAEA,KAAKR,MAAM,SAAS;GAClB,MAAM,KAAK,SAAS,KAAKO,cAAc,KAAK;GAC5C,cAAc,KAAK;GACnB,OAAO,KAAK;GACZ,QAAQ,KAAK;EACf,CAAC;EACD,KAAKP,MAAM,SAAS,KAAK;EACzB,KAAKA,MAAM,gBAAgB,KAAKC,MAAM,MAAM;EAC5C,MAAM,QAAQ,KAAKD,MAAM,SAAS;EAElC,KAAKE,UAAU,SAAS,CAAC,MAAM;EAC/B,KAAKA,UAAU,cAAc,MAAM,WAAW,KAAK,eAAe;EAClE,KAAKC,UAAU,cAAc,MAAM;EAEnC,MAAM,QAAQ,KAAKH,MAAM,SAAS,OAAO,KAAK,IAAI;EAClD,MAAM,QAAQ,cAAc,MAAM,eAAe,KAAKC,MAAM,OAAO,KAAKQ,gBAAgB,KAAK,CAAC;EAC9F,MAAM,cAAc,MAAM,sBACtB,cAAc,MAAM,qBAAqB,KAAKR,MAAM,KAAK,IACzD,KAAA;EAEJ,kBAAkB,MAAM;GACtB,cAAc;GACd,oBAAoB;GACpB,MAAM,KAAK,SAAS,MAAM,OAAO;GACjC,UAAU,MAAM;GAChB,UAAU,KAAK,SAAS,KAAA,IAAY,MAAM;EAC5C,CAAC;EACD,oBAAoB,MAAM,OAAO,aAAa;CAChD;CAEA,gBAAgB,OAAyD;EAEvE,IAAI,CADW,KAAKD,MAAM,eAAe,KAC/B,GAAG,OAAO,KAAA;EAEpB,MAAM,WAAW,mBAAmB,KAAK,IAAI,MAAM,OAAO,GAAG,EAAE,QAAQ,KAAKC,MAAM,OAAO,CAAC;EAE1F,MAAM,OAAO;GACX,SAAS;GACT,UAAU;GACV,WAAW;EACb,EAAE,MAAM;EAER,OAAO,EAAE,UAAU,cAAc,MAAM,KAAKA,MAAM,OAAO,EAAE,SAAS,CAAC,EAAE;CACzE;CAEA;CAMA;CAaA,cAAoB;EAClB,IAAI,KAAK,SAAS,WAChB,KAAKM,cAAc,KAAKA,gBAAgB,cAAc,YAAY;OAElE,KAAKA,cAAc,KAAKA,gBAAgB,aAAa,cAAc;EAGrE,KAAK,cAAc;CACrB;CAEA,iBAAuB;EACrB,IAAI,CAAC,KAAK,UAAU,CAAC,KAAKH,eAAe,KAAKE,YAAY;EAE1D,KAAKA,aAAa;EAClB,kBACE,MACA;GACE,SAAS,KAAKI;GACd,WAAW,KAAKC;EAClB,GACA,EAAE,QAAQ,KAAKP,YAAY,OAAO,CACpC;CACF;CAEA,cAAoB;EAClB,kBAAkB,MAAM;GACtB,cAAc,KAAA;GACd,oBAAoB,KAAA;GACpB,MAAM,KAAA;GACN,UAAU,KAAA;GACV,UAAU,KAAA;GACV,aAAa,KAAA;EACf,CAAC;CACH;AACF"}

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

@@ -1,7 +1,6 @@
-import { MediaElement } from "../media-element.js";
-
+import { UIElement } from "../ui-element.js";
 //#region src/ui/time/time-group-element.d.ts
-declare class TimeGroupElement extends MediaElement {
+declare class TimeGroupElement extends UIElement {
   static readonly tagName = "media-time-group";
 }
 //#endregion

package/dist/dev/ui/time/time-group-element.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"time-group-element.d.ts","names":[],"sources":["../../../../src/ui/time/time-group-element.ts"],"mappings":";;;cAEa,gBAAA,SAAyB,YAAA;EAAA,gBACpB,OAAA;AAAA"}
+{"version":3,"file":"time-group-element.d.ts","names":[],"sources":["../../../../src/ui/time/time-group-element.ts"],"mappings":";;cAEa,yBAAyB;kBACpB"}

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

@@ -1,12 +1,11 @@
-import { MediaElement } from "../media-element.js";
-
+import { UIElement } from "../ui-element.js";
 //#region src/ui/time/time-group-element.ts
-var TimeGroupElement = class extends MediaElement {
+var TimeGroupElement = class extends UIElement {
 	static {
 		this.tagName = "media-time-group";
 	}
 };
-
 //#endregion
 export { TimeGroupElement };
+
 //# sourceMappingURL=time-group-element.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"time-group-element.js","names":[],"sources":["../../../../src/ui/time/time-group-element.ts"],"sourcesContent":["import { MediaElement } from '../media-element';\n\nexport class TimeGroupElement extends MediaElement {\n  static readonly tagName = 'media-time-group';\n\n  // Future: Could provide context for hoursDisplay to children via Lit context\n}\n"],"mappings":";;;AAEA,IAAa,mBAAb,cAAsC,aAAa;;iBACvB"}
+{"version":3,"file":"time-group-element.js","names":[],"sources":["../../../../src/ui/time/time-group-element.ts"],"sourcesContent":["import { UIElement } from '../ui-element';\n\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":";;AAEA,IAAa,mBAAb,cAAsC,UAAU;;EACpB,KAAA,UAAA;;AAG5B"}

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

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

package/dist/dev/ui/time/time-separator-element.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"time-separator-element.d.ts","names":[],"sources":["../../../../src/ui/time/time-separator-element.ts"],"mappings":";;;cAEa,oBAAA,SAA6B,YAAA;EAAA,gBACxB,OAAA;EAEP,iBAAA,CAAA;AAAA"}
+{"version":3,"file":"time-separator-element.d.ts","names":[],"sources":["../../../../src/ui/time/time-separator-element.ts"],"mappings":";;cAEa,6BAA6B;kBACxB;EAEP"}

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

@@ -1,7 +1,6 @@
-import { MediaElement } from "../media-element.js";
-
+import { UIElement } from "../ui-element.js";
 //#region src/ui/time/time-separator-element.ts
-var TimeSeparatorElement = class extends MediaElement {
+var TimeSeparatorElement = class extends UIElement {
 	static {
 		this.tagName = "media-time-separator";
 	}
@@ -11,7 +10,7 @@ var TimeSeparatorElement = class extends MediaElement {
 		if (!this.textContent?.trim()) this.textContent = "/";
 	}
 };
-
 //#endregion
 export { TimeSeparatorElement };
+
 //# sourceMappingURL=time-separator-element.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"time-separator-element.js","names":[],"sources":["../../../../src/ui/time/time-separator-element.ts"],"sourcesContent":["import { MediaElement } from '../media-element';\n\nexport class TimeSeparatorElement extends MediaElement {\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,aAAa;;iBAC3B;;CAE1B,AAAS,oBAA0B;AACjC,QAAM,mBAAmB;AAGzB,OAAK,aAAa,eAAe,OAAO;AAGxC,MAAI,CAAC,KAAK,aAAa,MAAM,CAC3B,MAAK,cAAc"}
+{"version":3,"file":"time-separator-element.js","names":[],"sources":["../../../../src/ui/time/time-separator-element.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/time-slider-chapters/time-slider-chapter-title-element.d.ts

@@ -0,0 +1,12 @@
+import { UIElement } from "../../ui-element.js";
+import { PropertyValues } from "@videojs/element";
+//#region src/ui/time-slider/time-slider-chapters/time-slider-chapter-title-element.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=time-slider-chapter-title-element.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"time-slider-chapter-title-element.d.ts","names":[],"sources":["../../../../../src/ui/time-slider/time-slider-chapters/time-slider-chapter-title-element.ts"],"mappings":";;;;cAWa,sCAAsC;;kBACjC;YAOG,OAAO,UAAU"}

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

@@ -0,0 +1,43 @@
+import { playerContext } from "../../../player/context.js";
+import { PlayerController } from "../../../player/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/time-slider-chapters/time-slider-chapter-title-element.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=time-slider-chapter-title-element.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"time-slider-chapter-title-element.js","names":["#core","#slider","#textTrack","#time"],"sources":["../../../../../src/ui/time-slider/time-slider-chapters/time-slider-chapter-title-element.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/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/time-slider-chapters/time-slider-chapters-element.d.ts

@@ -0,0 +1,18 @@
+import { UIElement } from "../../ui-element.js";
+import { PropertyValues } from "@videojs/element";
+//#region src/ui/time-slider/time-slider-chapters/time-slider-chapters-element.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=time-slider-chapters-element.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"time-slider-chapters-element.d.ts","names":[],"sources":["../../../../../src/ui/time-slider/time-slider-chapters/time-slider-chapters-element.ts"],"mappings":";;;;;;;;;cAsBa,kCAAkC;;kBAC7B;EAYP;YAKU,OAAO,UAAU"}

package/dist/dev/ui/time-slider/time-slider-chapters/time-slider-chapters-element.js

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

package/dist/dev/ui/time-slider/time-slider-chapters/time-slider-chapters-element.js.map

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

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

@@ -1,16 +1,19 @@
-import { MediaElement } from "../media-element.js";
+import { UIElement } from "../ui-element.js";
 import { PropertyValues } from "@videojs/element";
-import * as _videojs_core0 from "@videojs/core";
-
+import { Text } from "@videojs/core/i18n";
 //#region src/ui/time-slider/time-slider-element.d.ts
-declare class TimeSliderElement extends MediaElement {
+/**
+ * @fires drag-start - Fired when a pointer drag starts.
+ * @fires drag-end - Fired when a pointer drag ends.
+ */
+declare class TimeSliderElement extends UIElement {
   #private;
   static readonly tagName = "media-time-slider";
   static properties: {
     label: {
       type: StringConstructor;
     };
-    commitThrottle: {
+    changeThrottle: {
       type: NumberConstructor;
       attribute: string;
     };
@@ -31,14 +34,19 @@ declare class TimeSliderElement extends MediaElement {
       type: StringConstructor;
       attribute: string;
     };
+    pauseOnDrag: {
+      type: BooleanConstructor;
+      attribute: string;
+    };
   };
-  label: string | ((state: _videojs_core0.SliderState) => string);
-  commitThrottle: number;
+  label: Text | string;
+  changeThrottle: number;
   step: number;
   largeStep: number;
   orientation: "horizontal" | "vertical";
   disabled: boolean;
   thumbAlignment: "center" | "edge";
+  pauseOnDrag: boolean;
   connectedCallback(): void;
   disconnectedCallback(): void;
   destroyCallback(): void;

package/dist/dev/ui/time-slider/time-slider-element.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"time-slider-element.d.ts","names":[],"sources":["../../../../src/ui/time-slider/time-slider-element.ts"],"mappings":";;;;;cAqBa,iBAAA,SAA0B,YAAA;EAAA;kBACrB,OAAA;EAAA,OAEA,UAAA;;;;;;;;;;;;;;;;;;;;;;;;;;EAUhB,KAAA,aAAK,KAAA,iBAAA,WAAA;EACL,cAAA;EACA,IAAA;EACA,SAAA;EACA,WAAA;EACA,QAAA;EACA,cAAA;EAUS,iBAAA,CAAA;EA4CA,oBAAA,CAAA;EAMA,eAAA,CAAA;EAAA,UAKU,UAAA,CAAW,QAAA,EAAU,cAAA;EAAA,UAKrB,MAAA,CAAO,QAAA,EAAU,cAAA;AAAA"}
+{"version":3,"file":"time-slider-element.d.ts","names":[],"sources":["../../../../src/ui/time-slider/time-slider-element.ts"],"mappings":";;;;;;;;cA8Ba,0BAA0B;;kBACrB;SAEA;;MACL,MAAI;;;MACK,MAAI;MAAU;;;MACxB,MAAI;;;MACC,MAAI;MAAU;;;MACZ,MAAI;;;MACP,MAAI;;;MACE,MAAI;MAAU;;;MACjB,MAAI;MAAW;;;EAGhC,OAAO;EACP;EACA;EACA;EACA;EACA;EACA;EACA;EAcS;EAoDA;EAQA;YAmBU,WAAW,UAAU;YAerB,OAAO,UAAU"}