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

package/dist/default/ui/slider/slider-value-element.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"slider-value-element.js","names":["#ctx"],"sources":["../../../../src/ui/slider/slider-value-element.ts"],"sourcesContent":["import { applyStateDataAttrs } from '@videojs/core/dom';\nimport type { PropertyDeclarationMap, PropertyValues } from '@videojs/element';\nimport { ContextConsumer } from '@videojs/element/context';\n\nimport { UIElement } from '../ui-element';\nimport { sliderContext } from './context';\n\nexport class SliderValueElement extends UIElement {\n  static readonly tagName = 'media-slider-value';\n\n  static override properties = {\n    type: { type: String },\n  } satisfies PropertyDeclarationMap<'type'>;\n\n  type: 'current' | 'pointer' = 'current';\n\n  readonly #ctx = new ContextConsumer(this, {\n    context: sliderContext,\n    subscribe: true,\n  });\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this.setAttribute('aria-live', 'off');\n  }\n\n  protected override update(_changed: PropertyValues): void {\n    super.update(_changed);\n\n    const ctx = this.#ctx.value;\n    if (!ctx) return;\n\n    const value = this.type === 'pointer' ? ctx.pointerValue : ctx.state.value;\n\n    this.textContent = ctx.formatValue ? ctx.formatValue(value, this.type) : String(Math.round(value));\n\n    applyStateDataAttrs(this, ctx.state, ctx.stateAttrMap);\n  }\n}\n"],"mappings":";;;;;AAOA,IAAa,qBAAb,cAAwC,UAAU;;;EAOlB,KAAA,OAAA;EAEd,KAAA,OAAA,IAAI,gBAAgB,MAAM;GACxC,SAAS;GACT,WAAW;EACb,CAAC;;;EAXyB,KAAA,UAAA;;;EAEG,KAAA,aAAA,EAC3B,MAAM,EAAE,MAAM,OAAO,EACvB;;CAIA;CAKA,oBAAmC;EACjC,MAAM,kBAAkB;EACxB,KAAK,aAAa,aAAa,KAAK;CACtC;CAEA,OAA0B,UAAgC;EACxD,MAAM,OAAO,QAAQ;EAErB,MAAM,MAAM,KAAKA,KAAK;EACtB,IAAI,CAAC,KAAK;EAEV,MAAM,QAAQ,KAAK,SAAS,YAAY,IAAI,eAAe,IAAI,MAAM;EAErE,KAAK,cAAc,IAAI,cAAc,IAAI,YAAY,OAAO,KAAK,IAAI,IAAI,OAAO,KAAK,MAAM,KAAK,CAAC;EAEjG,oBAAoB,MAAM,IAAI,OAAO,IAAI,YAAY;CACvD;AACF"}

package/dist/default/ui/status-announcer/status-announcer-element.js

@@ -1,90 +0,0 @@
-import { i18nContext } from "../../i18n/context.js";
-import { I18nController } from "../../i18n/controller.js";
-import { containerContext, playerContext } from "../../player/context.js";
-import { UIElement } from "../ui-element.js";
-import { StatusAnnouncerCore, createStatusAnnouncerLabels } from "@videojs/core";
-import { shouldAnnounceStatusChange, subscribeToStatusAnnouncer } from "@videojs/core/dom";
-import { ContextConsumer } from "@videojs/element/context";
-//#region src/ui/status-announcer/status-announcer-element.ts
-var StatusAnnouncerElement = class extends UIElement {
-	static {
-		this.tagName = "media-status-announcer";
-	}
-	static {
-		this.properties = { closeDelay: {
-			type: Number,
-			attribute: "close-delay"
-		} };
-	}
-	#i18n = new I18nController(this, i18nContext);
-	#core = new StatusAnnouncerCore();
-	#storeUnsubscribe = null;
-	#player = new ContextConsumer(this, {
-		context: playerContext,
-		callback: (store) => this.#reconnect(store),
-		subscribe: true
-	});
-	#container = new ContextConsumer(this, {
-		context: containerContext,
-		subscribe: true
-	});
-	#disconnect = null;
-	#liveText = null;
-	connectedCallback() {
-		super.connectedCallback();
-		if (this.destroyed) return;
-		this.setAttribute("role", "status");
-		this.#ensureLiveText();
-		this.#disconnect = new AbortController();
-		this.#core.state.subscribe(() => this.requestUpdate(), { signal: this.#disconnect.signal });
-		this.#reconnect();
-	}
-	disconnectedCallback() {
-		super.disconnectedCallback();
-		this.#storeUnsubscribe?.();
-		this.#storeUnsubscribe = null;
-		this.#disconnect?.abort();
-		this.#disconnect = null;
-	}
-	destroyCallback() {
-		this.#storeUnsubscribe?.();
-		this.#core.destroy();
-		super.destroyCallback();
-	}
-	willUpdate(changed) {
-		super.willUpdate(changed);
-		this.#core.setProps({
-			closeDelay: this.closeDelay,
-			labels: createStatusAnnouncerLabels(this.#i18n.value, this.#i18n.locale),
-			shouldAnnounce: () => shouldAnnounceStatusChange(this.#container.value?.container)
-		});
-	}
-	update(changed) {
-		super.update(changed);
-		const label = this.#core.state.current.label;
-		const liveText = this.#ensureLiveText();
-		if (label === null) liveText.replaceChildren();
-		else liveText.replaceChildren(document.createTextNode(label));
-	}
-	#reconnect(store = this.#player.value) {
-		this.#storeUnsubscribe?.();
-		this.#storeUnsubscribe = null;
-		if (!store) {
-			this.#core.resetSnapshot();
-			return;
-		}
-		this.#storeUnsubscribe = subscribeToStatusAnnouncer(store, this.#core);
-	}
-	#ensureLiveText() {
-		if (this.#liveText?.isConnected) return this.#liveText;
-		const existing = this.querySelector("[data-status-announcer-content]");
-		this.#liveText = existing ?? document.createElement("span");
-		this.#liveText.setAttribute("data-status-announcer-content", "");
-		if (!existing) this.append(this.#liveText);
-		return this.#liveText;
-	}
-};
-//#endregion
-export { StatusAnnouncerElement };
-
-//# sourceMappingURL=status-announcer-element.js.map

package/dist/default/ui/status-announcer/status-announcer-element.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"status-announcer-element.js","names":["#i18n","#core","#player","#reconnect","#container","#ensureLiveText","#disconnect","#storeUnsubscribe","#liveText"],"sources":["../../../../src/ui/status-announcer/status-announcer-element.ts"],"sourcesContent":["import { createStatusAnnouncerLabels, StatusAnnouncerCore } from '@videojs/core';\nimport { type StatusAnnouncerStore, shouldAnnounceStatusChange, subscribeToStatusAnnouncer } from '@videojs/core/dom';\nimport type { PropertyDeclarationMap, PropertyValues } from '@videojs/element';\nimport { ContextConsumer } from '@videojs/element/context';\n\nimport { i18nContext } from '../../i18n/context';\nimport { I18nController } from '../../i18n/controller';\nimport { containerContext, playerContext } from '../../player/context';\nimport { UIElement } from '../ui-element';\n\nexport class StatusAnnouncerElement extends UIElement {\n  static readonly tagName = 'media-status-announcer';\n\n  static override properties = {\n    closeDelay: { type: Number, attribute: 'close-delay' },\n  } satisfies PropertyDeclarationMap<'closeDelay'>;\n\n  closeDelay: number | undefined;\n\n  readonly #i18n = new I18nController(this, i18nContext);\n  readonly #core = new StatusAnnouncerCore();\n  // Context can resolve while connected markup is still upgrading.\n  #storeUnsubscribe: (() => void) | null = null;\n  readonly #player = new ContextConsumer(this, {\n    context: playerContext,\n    callback: (store) => this.#reconnect(store),\n    subscribe: true,\n  });\n  readonly #container = new ContextConsumer(this, { context: containerContext, subscribe: true });\n\n  #disconnect: AbortController | null = null;\n  #liveText: HTMLElement | null = null;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n\n    if (this.destroyed) return;\n\n    this.setAttribute('role', 'status');\n    this.#ensureLiveText();\n\n    this.#disconnect = new AbortController();\n    this.#core.state.subscribe(() => this.requestUpdate(), { signal: this.#disconnect.signal });\n    this.#reconnect();\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.#storeUnsubscribe?.();\n    this.#storeUnsubscribe = null;\n    this.#disconnect?.abort();\n    this.#disconnect = null;\n  }\n\n  override destroyCallback(): void {\n    this.#storeUnsubscribe?.();\n    this.#core.destroy();\n    super.destroyCallback();\n  }\n\n  protected override willUpdate(changed: PropertyValues): void {\n    super.willUpdate(changed);\n    this.#core.setProps({\n      closeDelay: this.closeDelay,\n      labels: createStatusAnnouncerLabels(this.#i18n.value, this.#i18n.locale),\n      shouldAnnounce: () => shouldAnnounceStatusChange(this.#container.value?.container),\n    });\n  }\n\n  protected override update(changed: PropertyValues): void {\n    super.update(changed);\n\n    const label = this.#core.state.current.label;\n    const liveText = this.#ensureLiveText();\n\n    if (label === null) {\n      liveText.replaceChildren();\n    } else {\n      liveText.replaceChildren(document.createTextNode(label));\n    }\n  }\n\n  #reconnect(store: StatusAnnouncerStore | undefined = this.#player.value): void {\n    this.#storeUnsubscribe?.();\n    this.#storeUnsubscribe = null;\n\n    if (!store) {\n      this.#core.resetSnapshot();\n      return;\n    }\n\n    this.#storeUnsubscribe = subscribeToStatusAnnouncer(store, this.#core);\n  }\n\n  #ensureLiveText(): HTMLElement {\n    if (this.#liveText?.isConnected) return this.#liveText;\n\n    const existing = this.querySelector<HTMLElement>('[data-status-announcer-content]');\n\n    this.#liveText = existing ?? document.createElement('span');\n    this.#liveText.setAttribute('data-status-announcer-content', '');\n\n    if (!existing) this.append(this.#liveText);\n\n    return this.#liveText;\n  }\n}\n"],"mappings":";;;;;;;;AAUA,IAAa,yBAAb,cAA4C,UAAU;;EAC1B,KAAA,UAAA;;;EAEG,KAAA,aAAA,EAC3B,YAAY;GAAE,MAAM;GAAQ,WAAW;EAAc,EACvD;;CAIA,QAAiB,IAAI,eAAe,MAAM,WAAW;CACrD,QAAiB,IAAI,oBAAoB;CAEzC,oBAAyC;CACzC,UAAmB,IAAI,gBAAgB,MAAM;EAC3C,SAAS;EACT,WAAW,UAAU,KAAKG,WAAW,KAAK;EAC1C,WAAW;CACb,CAAC;CACD,aAAsB,IAAI,gBAAgB,MAAM;EAAE,SAAS;EAAkB,WAAW;CAAK,CAAC;CAE9F,cAAsC;CACtC,YAAgC;CAEhC,oBAAmC;EACjC,MAAM,kBAAkB;EAExB,IAAI,KAAK,WAAW;EAEpB,KAAK,aAAa,QAAQ,QAAQ;EAClC,KAAKE,gBAAgB;EAErB,KAAKC,cAAc,IAAI,gBAAgB;EACvC,KAAKL,MAAM,MAAM,gBAAgB,KAAK,cAAc,GAAG,EAAE,QAAQ,KAAKK,YAAY,OAAO,CAAC;EAC1F,KAAKH,WAAW;CAClB;CAEA,uBAAsC;EACpC,MAAM,qBAAqB;EAC3B,KAAKI,oBAAoB;EACzB,KAAKA,oBAAoB;EACzB,KAAKD,aAAa,MAAM;EACxB,KAAKA,cAAc;CACrB;CAEA,kBAAiC;EAC/B,KAAKC,oBAAoB;EACzB,KAAKN,MAAM,QAAQ;EACnB,MAAM,gBAAgB;CACxB;CAEA,WAA8B,SAA+B;EAC3D,MAAM,WAAW,OAAO;EACxB,KAAKA,MAAM,SAAS;GAClB,YAAY,KAAK;GACjB,QAAQ,4BAA4B,KAAKD,MAAM,OAAO,KAAKA,MAAM,MAAM;GACvE,sBAAsB,2BAA2B,KAAKI,WAAW,OAAO,SAAS;EACnF,CAAC;CACH;CAEA,OAA0B,SAA+B;EACvD,MAAM,OAAO,OAAO;EAEpB,MAAM,QAAQ,KAAKH,MAAM,MAAM,QAAQ;EACvC,MAAM,WAAW,KAAKI,gBAAgB;EAEtC,IAAI,UAAU,MACZ,SAAS,gBAAgB;OAEzB,SAAS,gBAAgB,SAAS,eAAe,KAAK,CAAC;CAE3D;CAEA,WAAW,QAA0C,KAAKH,QAAQ,OAAa;EAC7E,KAAKK,oBAAoB;EACzB,KAAKA,oBAAoB;EAEzB,IAAI,CAAC,OAAO;GACV,KAAKN,MAAM,cAAc;GACzB;EACF;EAEA,KAAKM,oBAAoB,2BAA2B,OAAO,KAAKN,KAAK;CACvE;CAEA,kBAA+B;EAC7B,IAAI,KAAKO,WAAW,aAAa,OAAO,KAAKA;EAE7C,MAAM,WAAW,KAAK,cAA2B,iCAAiC;EAElF,KAAKA,YAAY,YAAY,SAAS,cAAc,MAAM;EAC1D,KAAKA,UAAU,aAAa,iCAAiC,EAAE;EAE/D,IAAI,CAAC,UAAU,KAAK,OAAO,KAAKA,SAAS;EAEzC,OAAO,KAAKA;CACd;AACF"}

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

@@ -1,61 +0,0 @@
-import { i18nContext } from "../../i18n/context.js";
-import { I18nController } from "../../i18n/controller.js";
-import { InputIndicatorElement } from "../input-indicator/input-indicator-element.js";
-import { LiveIndicator } from "../input-indicator/live-indicator.js";
-import { StatusIndicatorCore, StatusIndicatorDataAttrs, createInputIndicatorLabels, getStatusIndicatorDisplayValue } from "@videojs/core";
-import { createTransition } from "@videojs/core/dom";
-//#region src/ui/status-indicator/status-indicator-element.ts
-var StatusIndicatorElement = class extends InputIndicatorElement {
-	static {
-		this.tagName = "media-status-indicator";
-	}
-	static {
-		this.properties = {
-			actions: { type: String },
-			closeDelay: {
-				type: Number,
-				attribute: "close-delay"
-			}
-		};
-	}
-	#i18n = new I18nController(this, i18nContext);
-	#core = new StatusIndicatorCore();
-	#transition = createTransition();
-	#liveIndicator = new LiveIndicator({
-		host: this,
-		dataAttrs: StatusIndicatorDataAttrs,
-		render: renderStatusIndicator
-	});
-	#options = { replayOnUpdate: false };
-	get core() {
-		return this.#core;
-	}
-	get transition() {
-		return this.#transition;
-	}
-	get liveIndicator() {
-		return this.#liveIndicator;
-	}
-	get options() {
-		return this.#options;
-	}
-	syncCoreProps() {
-		this.#core.setProps({
-			actions: parseActions(this.actions),
-			closeDelay: this.closeDelay,
-			labels: createInputIndicatorLabels(this.#i18n.value)
-		});
-	}
-};
-function parseActions(actions) {
-	return actions?.split(/[\s,]+/).filter(Boolean);
-}
-function renderStatusIndicator(element, state) {
-	const value = element.querySelector("media-status-indicator-value");
-	if (!value) return;
-	value.textContent = getStatusIndicatorDisplayValue(state);
-}
-//#endregion
-export { StatusIndicatorElement };
-
-//# sourceMappingURL=status-indicator-element.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"status-indicator-element.js","names":["#i18n","#core","#transition","#liveIndicator","#options"],"sources":["../../../../src/ui/status-indicator/status-indicator-element.ts"],"sourcesContent":["import {\n  createInputIndicatorLabels,\n  getStatusIndicatorDisplayValue,\n  type InputAction,\n  StatusIndicatorCore,\n  StatusIndicatorDataAttrs,\n} from '@videojs/core';\nimport { createTransition } from '@videojs/core/dom';\nimport type { PropertyDeclarationMap } from '@videojs/element';\n\nimport { i18nContext } from '../../i18n/context';\nimport { I18nController } from '../../i18n/controller';\nimport { InputIndicatorElement, type InputIndicatorOptions } from '../input-indicator/input-indicator-element';\nimport { LiveIndicator } from '../input-indicator/live-indicator';\n\nexport class StatusIndicatorElement extends InputIndicatorElement<StatusIndicatorCore.State> {\n  static readonly tagName = 'media-status-indicator';\n\n  static override properties = {\n    actions: { type: String },\n    closeDelay: { type: Number, attribute: 'close-delay' },\n  } satisfies PropertyDeclarationMap<'actions' | 'closeDelay'>;\n\n  actions: string | undefined;\n  closeDelay: number | undefined;\n\n  readonly #i18n = new I18nController(this, i18nContext);\n  readonly #core = new StatusIndicatorCore();\n  readonly #transition = createTransition();\n  readonly #liveIndicator = new LiveIndicator({\n    host: this,\n    dataAttrs: StatusIndicatorDataAttrs,\n    render: renderStatusIndicator,\n  });\n  readonly #options = { replayOnUpdate: false } satisfies InputIndicatorOptions;\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 get options() {\n    return this.#options;\n  }\n\n  protected override syncCoreProps(): void {\n    this.#core.setProps({\n      actions: parseActions(this.actions),\n      closeDelay: this.closeDelay,\n      labels: createInputIndicatorLabels(this.#i18n.value),\n    });\n  }\n}\n\nfunction parseActions(actions: string | undefined): readonly InputAction[] | undefined {\n  return actions?.split(/[\\s,]+/).filter(Boolean) as readonly InputAction[] | undefined;\n}\n\nfunction renderStatusIndicator(element: HTMLElement, state: StatusIndicatorCore.State): void {\n  const value = element.querySelector('media-status-indicator-value');\n  if (!value) return;\n\n  value.textContent = getStatusIndicatorDisplayValue(state);\n}\n"],"mappings":";;;;;;;AAeA,IAAa,yBAAb,cAA4C,sBAAiD;;EACjE,KAAA,UAAA;;;EAEG,KAAA,aAAA;GAC3B,SAAS,EAAE,MAAM,OAAO;GACxB,YAAY;IAAE,MAAM;IAAQ,WAAW;GAAc;EACvD;;CAKA,QAAiB,IAAI,eAAe,MAAM,WAAW;CACrD,QAAiB,IAAI,oBAAoB;CACzC,cAAuB,iBAAiB;CACxC,iBAA0B,IAAI,cAAc;EAC1C,MAAM;EACN,WAAW;EACX,QAAQ;CACV,CAAC;CACD,WAAoB,EAAE,gBAAgB,MAAM;CAE5C,IAAc,OAAO;EACnB,OAAO,KAAKC;CACd;CAEA,IAAc,aAAa;EACzB,OAAO,KAAKC;CACd;CAEA,IAAc,gBAAgB;EAC5B,OAAO,KAAKC;CACd;CAEA,IAAuB,UAAU;EAC/B,OAAO,KAAKC;CACd;CAEA,gBAAyC;EACvC,KAAKH,MAAM,SAAS;GAClB,SAAS,aAAa,KAAK,OAAO;GAClC,YAAY,KAAK;GACjB,QAAQ,2BAA2B,KAAKD,MAAM,KAAK;EACrD,CAAC;CACH;AACF;AAEA,SAAS,aAAa,SAAiE;CACrF,OAAO,SAAS,MAAM,QAAQ,CAAC,CAAC,OAAO,OAAO;AAChD;AAEA,SAAS,sBAAsB,SAAsB,OAAwC;CAC3F,MAAM,QAAQ,QAAQ,cAAc,8BAA8B;CAClE,IAAI,CAAC,OAAO;CAEZ,MAAM,cAAc,+BAA+B,KAAK;AAC1D"}

package/dist/default/ui/status-indicator/status-indicator-value-element.js

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

package/dist/default/ui/status-indicator/status-indicator-value-element.js.map

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

package/dist/default/ui/text/text-element.js

@@ -1,14 +0,0 @@
-import { i18nContext } from "../../i18n/context.js";
-import { createTextMixin } from "../../i18n/text-mixin.js";
-import { ReactiveElement } from "@videojs/element";
-//#region src/ui/text/text-element.ts
-const I18nTextMixin = createTextMixin({ context: i18nContext });
-var TextElement = class extends I18nTextMixin(ReactiveElement) {
-	static {
-		this.tagName = "media-text";
-	}
-};
-//#endregion
-export { I18nTextMixin, TextElement as MediaTextElement, TextElement };
-
-//# sourceMappingURL=text-element.js.map

package/dist/default/ui/text/text-element.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"text-element.js","names":[],"sources":["../../../../src/ui/text/text-element.ts"],"sourcesContent":["import { ReactiveElement } from '@videojs/element';\n\nimport { i18nContext } from '../../i18n/context';\nimport { createTextMixin, type I18nTextMixin as TextMixin } from '../../i18n/text-mixin';\n\nexport const I18nTextMixin: TextMixin = createTextMixin({ context: i18nContext });\n\nexport class TextElement extends I18nTextMixin(ReactiveElement) {\n  static readonly tagName = 'media-text';\n}\n\nexport { TextElement as MediaTextElement };\n"],"mappings":";;;;AAKA,MAAa,gBAA2B,gBAAgB,EAAE,SAAS,YAAY,CAAC;AAEhF,IAAa,cAAb,cAAiC,cAAc,eAAe,CAAC,CAAC;;EACpC,KAAA,UAAA;;AAC5B"}

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

@@ -1,157 +0,0 @@
-import { playerContext } from "../../player/context.js";
-import { PlayerController } from "../../player/player-controller.js";
-import { UIElement } from "../ui-element.js";
-import { ThumbnailCore, ThumbnailDataAttrs, mapCuesToThumbnails } from "@videojs/core";
-import { applyElementProps, applyStateDataAttrs, createThumbnail, selectTextTrack } from "@videojs/core/dom";
-import { isNull, isUndefined } from "@videojs/utils/predicate";
-//#region src/ui/thumbnail/thumbnail-element.ts
-const SHADOW_CSS = `\
-:host {
-  display: inline-block;
-  overflow: hidden;
-}
-img {
-  display: block;
-}`;
-var ThumbnailElement = class extends UIElement {
-	static {
-		this.tagName = "media-thumbnail";
-	}
-	static {
-		this.properties = {
-			time: { type: Number },
-			crossOrigin: {
-				type: String,
-				attribute: "crossorigin"
-			},
-			loading: { type: String },
-			fetchPriority: {
-				type: String,
-				attribute: "fetchpriority"
-			}
-		};
-	}
-	#core;
-	#img;
-	#textTracks;
-	#thumbnails;
-	#externalThumbnails;
-	#lastTextTrack;
-	#api;
-	constructor() {
-		super();
-		this.time = 0;
-		this.#core = new ThumbnailCore();
-		this.#img = document.createElement("img");
-		this.#textTracks = new PlayerController(this, playerContext, selectTextTrack);
-		this.#thumbnails = [];
-		this.#api = null;
-		const shadow = this.attachShadow({ mode: "open" });
-		const style = document.createElement("style");
-		style.textContent = SHADOW_CSS;
-		shadow.appendChild(style);
-		this.#img.alt = "";
-		this.#img.setAttribute("part", "img");
-		this.#img.setAttribute("aria-hidden", "true");
-		this.#img.setAttribute("decoding", "async");
-		shadow.appendChild(this.#img);
-	}
-	/**
-	* Set thumbnail images directly, bypassing the automatic `<track>` detection. When set, this takes priority over the
-	* text track path.
-	*/
-	get thumbnails() {
-		return this.#externalThumbnails;
-	}
-	set thumbnails(value) {
-		this.#externalThumbnails = value;
-		this.requestUpdate();
-	}
-	connectedCallback() {
-		super.connectedCallback();
-		if (this.destroyed) return;
-		this.#api = createThumbnail({
-			getContainer: () => this,
-			getImg: () => this.#img,
-			onStateChange: () => this.requestUpdate()
-		});
-	}
-	disconnectedCallback() {
-		super.disconnectedCallback();
-	}
-	destroyCallback() {
-		this.#api?.destroy();
-		super.destroyCallback();
-	}
-	update(changed) {
-		super.update(changed);
-		const textTrack = this.#textTracks.value;
-		if (this.#externalThumbnails) this.#thumbnails = this.#externalThumbnails;
-		else if (textTrack !== this.#lastTextTrack) {
-			this.#lastTextTrack = textTrack;
-			this.#thumbnails = textTrack && textTrack.thumbnailCues.length > 0 ? mapCuesToThumbnails(textTrack.thumbnailCues, textTrack.thumbnailTrackSrc ?? void 0) : [];
-		}
-		const thumbnail = this.#core.findActiveThumbnail(this.#thumbnails, this.time);
-		applyElementProps(this.#img, {
-			crossorigin: this.#resolveCrossOrigin(textTrack),
-			loading: this.loading,
-			fetchpriority: this.fetchPriority
-		});
-		this.#api?.updateSrc(thumbnail?.url);
-		if (!thumbnail) {
-			this.#img.removeAttribute("src");
-			this.#resetStyles();
-			const state = this.#core.getState(false, false, void 0);
-			applyElementProps(this, this.#core.getAttrs(state));
-			applyStateDataAttrs(this, state, ThumbnailDataAttrs);
-			return;
-		}
-		if (this.#img.getAttribute("src") !== thumbnail.url) this.#img.src = thumbnail.url;
-		const api = this.#api;
-		const state = this.#core.getState(api?.loading ?? false, api?.error ?? false, thumbnail);
-		applyElementProps(this, this.#core.getAttrs(state));
-		applyStateDataAttrs(this, state, ThumbnailDataAttrs);
-		if (api?.naturalWidth && api.naturalHeight) {
-			const constraints = api.readConstraints();
-			const result = this.#core.resize(thumbnail, api.naturalWidth, api.naturalHeight, constraints);
-			if (result) this.#applyResize(result);
-		}
-	}
-	/**
-	* Leaving `crossOrigin` unset means "follow the media element", so thumbnails keep working on a CORS-enabled player
-	* without a skin having to thread an attribute through. `null` opts out and fetches the sprites no-CORS, which is
-	* also what removing the attribute produces. A bare `crossorigin` is passed straight through, since the CORS-settings
-	* attribute reads it as Anonymous.
-	*
-	* Only the `<track>` path inherits: `thumbnails` set directly may point at a host that has nothing to do with the
-	* media element.
-	*/
-	#resolveCrossOrigin(textTrack) {
-		if (isNull(this.crossOrigin)) return void 0;
-		if (!isUndefined(this.crossOrigin)) return this.crossOrigin;
-		if (this.#externalThumbnails) return void 0;
-		return textTrack?.thumbnailTrackCrossOrigin ?? void 0;
-	}
-	#applyResize(result) {
-		this.style.width = `${result.containerWidth}px`;
-		this.style.height = `${result.containerHeight}px`;
-		const imgStyle = this.#img.style;
-		imgStyle.width = `${result.imageWidth}px`;
-		imgStyle.height = `${result.imageHeight}px`;
-		imgStyle.maxWidth = "none";
-		imgStyle.transform = result.offsetX || result.offsetY ? `translate(-${result.offsetX}px, -${result.offsetY}px)` : "";
-	}
-	#resetStyles() {
-		this.style.width = "";
-		this.style.height = "";
-		const imgStyle = this.#img.style;
-		imgStyle.width = "";
-		imgStyle.height = "";
-		imgStyle.maxWidth = "";
-		imgStyle.transform = "";
-	}
-};
-//#endregion
-export { ThumbnailElement };
-
-//# sourceMappingURL=thumbnail-element.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"thumbnail-element.js","names":["#core","#img","#textTracks","#externalThumbnails","#api","#thumbnails","#lastTextTrack","#resolveCrossOrigin","#resetStyles","#applyResize"],"sources":["../../../../src/ui/thumbnail/thumbnail-element.ts"],"sourcesContent":["import {\n  mapCuesToThumbnails,\n  ThumbnailCore,\n  ThumbnailDataAttrs,\n  type ThumbnailImage,\n  type ThumbnailResizeResult,\n} from '@videojs/core';\nimport type { ThumbnailApi } from '@videojs/core/dom';\nimport { applyElementProps, applyStateDataAttrs, createThumbnail, selectTextTrack } from '@videojs/core/dom';\nimport type { PropertyDeclarationMap, PropertyValues } from '@videojs/element';\nimport type { MediaTextTrackState } from '@videojs/media';\nimport { isNull, isUndefined } from '@videojs/utils/predicate';\n\nimport { playerContext } from '../../player/context';\nimport { PlayerController } from '../../player/player-controller';\nimport { UIElement } from '../ui-element';\n\nconst SHADOW_CSS = `\\\n:host {\n  display: inline-block;\n  overflow: hidden;\n}\nimg {\n  display: block;\n}`;\n\nexport class ThumbnailElement extends UIElement {\n  static readonly tagName = 'media-thumbnail';\n\n  static override properties = {\n    time: { type: Number },\n    crossOrigin: { type: String, attribute: 'crossorigin' },\n    loading: { type: String },\n    fetchPriority: { type: String, attribute: 'fetchpriority' },\n  } satisfies PropertyDeclarationMap<keyof ThumbnailCore.Props>;\n\n  time = 0;\n  crossOrigin: ThumbnailCore.Props['crossOrigin'];\n  loading: ThumbnailCore.Props['loading'];\n  fetchPriority: ThumbnailCore.Props['fetchPriority'];\n\n  readonly #core = new ThumbnailCore();\n  readonly #img = document.createElement('img');\n  readonly #textTracks = new PlayerController(this, playerContext, selectTextTrack);\n\n  #thumbnails: ThumbnailImage[] = [];\n  #externalThumbnails: ThumbnailImage[] | undefined;\n  #lastTextTrack: MediaTextTrackState | undefined;\n  #api: ThumbnailApi | null = null;\n\n  constructor() {\n    super();\n\n    const shadow = this.attachShadow({ mode: 'open' });\n\n    const style = document.createElement('style');\n\n    style.textContent = SHADOW_CSS;\n    shadow.appendChild(style);\n\n    this.#img.alt = '';\n    this.#img.setAttribute('part', 'img');\n    this.#img.setAttribute('aria-hidden', 'true');\n    this.#img.setAttribute('decoding', 'async');\n    shadow.appendChild(this.#img);\n  }\n\n  /**\n   * Set thumbnail images directly, bypassing the automatic `<track>` detection. When set, this takes priority over the\n   * text track path.\n   */\n  get thumbnails(): ThumbnailImage[] | undefined {\n    return this.#externalThumbnails;\n  }\n\n  set thumbnails(value: ThumbnailImage[] | undefined) {\n    this.#externalThumbnails = value;\n    this.requestUpdate();\n  }\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n\n    if (this.destroyed) return;\n\n    this.#api = createThumbnail({\n      getContainer: () => this,\n      getImg: () => this.#img,\n      onStateChange: () => this.requestUpdate(),\n    });\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n  }\n\n  override destroyCallback(): void {\n    this.#api?.destroy();\n    super.destroyCallback();\n  }\n\n  protected override update(changed: PropertyValues): void {\n    super.update(changed);\n\n    const textTrack = this.#textTracks.value;\n\n    // Resolve thumbnails: external prop takes priority over auto <track> path.\n    if (this.#externalThumbnails) {\n      this.#thumbnails = this.#externalThumbnails;\n    } else if (textTrack !== this.#lastTextTrack) {\n      this.#lastTextTrack = textTrack;\n      this.#thumbnails =\n        textTrack && textTrack.thumbnailCues.length > 0\n          ? mapCuesToThumbnails(textTrack.thumbnailCues, textTrack.thumbnailTrackSrc ?? undefined)\n          : [];\n    }\n\n    const thumbnail = this.#core.findActiveThumbnail(this.#thumbnails, this.time);\n\n    // Sync img attributes from element properties.\n    applyElementProps(this.#img, {\n      crossorigin: this.#resolveCrossOrigin(textTrack),\n      loading: this.loading,\n      fetchpriority: this.fetchPriority,\n    });\n\n    // Track src changes via the thumbnail API.\n    this.#api?.updateSrc(thumbnail?.url);\n\n    if (!thumbnail) {\n      this.#img.removeAttribute('src');\n      this.#resetStyles();\n\n      const state = this.#core.getState(false, false, undefined);\n\n      applyElementProps(this, this.#core.getAttrs(state));\n      applyStateDataAttrs(this, state, ThumbnailDataAttrs);\n      return;\n    }\n\n    // Set the img src directly (imperative DOM).\n    if (this.#img.getAttribute('src') !== thumbnail.url) {\n      this.#img.src = thumbnail.url;\n    }\n\n    const api = this.#api;\n    const state = this.#core.getState(api?.loading ?? false, api?.error ?? false, thumbnail);\n\n    applyElementProps(this, this.#core.getAttrs(state));\n    applyStateDataAttrs(this, state, ThumbnailDataAttrs);\n\n    if (api?.naturalWidth && api.naturalHeight) {\n      const constraints = api.readConstraints();\n      const result = this.#core.resize(thumbnail, api.naturalWidth, api.naturalHeight, constraints);\n\n      if (result) {\n        this.#applyResize(result);\n      }\n    }\n  }\n\n  /**\n   * Leaving `crossOrigin` unset means \"follow the media element\", so thumbnails keep working on a CORS-enabled player\n   * without a skin having to thread an attribute through. `null` opts out and fetches the sprites no-CORS, which is\n   * also what removing the attribute produces. A bare `crossorigin` is passed straight through, since the CORS-settings\n   * attribute reads it as Anonymous.\n   *\n   * Only the `<track>` path inherits: `thumbnails` set directly may point at a host that has nothing to do with the\n   * media element.\n   */\n  #resolveCrossOrigin(textTrack: MediaTextTrackState | undefined): string | undefined {\n    if (isNull(this.crossOrigin)) return undefined;\n\n    if (!isUndefined(this.crossOrigin)) return this.crossOrigin;\n\n    if (this.#externalThumbnails) return undefined;\n\n    return textTrack?.thumbnailTrackCrossOrigin ?? undefined;\n  }\n\n  #applyResize(result: ThumbnailResizeResult): void {\n    this.style.width = `${result.containerWidth}px`;\n    this.style.height = `${result.containerHeight}px`;\n\n    const imgStyle = this.#img.style;\n\n    imgStyle.width = `${result.imageWidth}px`;\n    imgStyle.height = `${result.imageHeight}px`;\n    imgStyle.maxWidth = 'none';\n    imgStyle.transform =\n      result.offsetX || result.offsetY ? `translate(-${result.offsetX}px, -${result.offsetY}px)` : '';\n  }\n\n  #resetStyles(): void {\n    this.style.width = '';\n    this.style.height = '';\n\n    const imgStyle = this.#img.style;\n\n    imgStyle.width = '';\n    imgStyle.height = '';\n    imgStyle.maxWidth = '';\n    imgStyle.transform = '';\n  }\n}\n"],"mappings":"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"}

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

@@ -1,153 +0,0 @@
-import { i18nContext } from "../../i18n/context.js";
-import { I18nController } from "../../i18n/controller.js";
-import { playerContext } from "../../player/context.js";
-import { PlayerController } from "../../player/player-controller.js";
-import { UIElement } from "../ui-element.js";
-import { TimeCore, TimeDataAttrs } from "@videojs/core";
-import { applyElementProps, applyStateDataAttrs, 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 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";
-	}
-	static {
-		this.properties = {
-			type: { type: String },
-			negativeSign: {
-				type: String,
-				attribute: "negative-sign"
-			},
-			label: { type: String },
-			toggle: { type: Boolean }
-		};
-	}
-	#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);
-		}
-	}
-	disconnectedCallback() {
-		super.disconnectedCallback();
-		this.#disconnect?.abort();
-		this.#disconnect = null;
-		this.#listening = false;
-	}
-	willUpdate(changed) {
-		super.willUpdate(changed);
-		if (changed.has("type") || changed.has("toggle")) this.#activeType = this.type;
-	}
-	update(changed) {
-		super.update(changed);
-		if (changed.has("toggle")) this.#syncListeners();
-		const media = this.#state.value;
-		if (!media) {
-			this.#clearAttrs();
-			return;
-		}
-		this.#core.setProps({
-			type: this.toggle ? this.#activeType : this.type,
-			negativeSign: this.negativeSign,
-			label: this.label,
-			toggle: this.toggle
-		});
-		this.#core.setMedia(media);
-		this.#core.setFormatLocale(this.#i18n.locale);
-		const state = this.#core.getState();
-		this.#signSpan.hidden = !state.negative;
-		this.#signSpan.textContent = state.negative ? this.negativeSign : "";
-		this.#textNode.textContent = state.text;
-		const attrs = this.#core.getAttrs(state, this.type);
-		const label = translateText(attrs["aria-label"], this.#i18n.value, this.#getLabelParams(state));
-		const description = attrs["aria-description"] ? translateText(attrs["aria-description"], this.#i18n.value) : void 0;
-		applyElementProps(this, {
-			"aria-label": label,
-			"aria-description": description,
-			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/default/ui/time/time-element.js.map

@@ -1 +0,0 @@
-{"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":"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"}

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

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

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

@@ -1 +0,0 @@
-{"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/default/ui/time/time-separator-element.js

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

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

@@ -1 +0,0 @@
-{"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/default/ui/time-slider/time-slider-chapters/time-slider-chapter-title-element.js

@@ -1,43 +0,0 @@
-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