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

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

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

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

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

@@ -0,0 +1,58 @@
+import { UIElement } from "../ui-element.js";
+import { PropertyValues } from "@videojs/element";
+import { Text } from "@videojs/core/i18n";
+//#region src/ui/time-slider/element.d.ts
+/**
+ * @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;
+    };
+    changeThrottle: {
+      type: NumberConstructor;
+      attribute: string;
+    };
+    step: {
+      type: NumberConstructor;
+    };
+    largeStep: {
+      type: NumberConstructor;
+      attribute: string;
+    };
+    orientation: {
+      type: StringConstructor;
+    };
+    disabled: {
+      type: BooleanConstructor;
+    };
+    thumbAlignment: {
+      type: StringConstructor;
+      attribute: string;
+    };
+    pauseOnDrag: {
+      type: BooleanConstructor;
+      attribute: string;
+    };
+  };
+  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;
+  protected willUpdate(_changed: PropertyValues): void;
+  protected update(_changed: PropertyValues): void;
+}
+//#endregion
+export { TimeSliderElement };
+//# sourceMappingURL=element.d.ts.map

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

@@ -0,0 +1,201 @@
+import { i18nContext } from "../../i18n/context.js";
+import { I18nController } from "../../i18n/controller.js";
+import { playerContext } from "../../player/context.js";
+import { PlayerController } from "../../player/controller.js";
+import { UIElement } from "../ui-element.js";
+import { sliderContext } from "../slider/context.js";
+import { TimeSliderCore, TimeSliderDataAttrs } from "@videojs/core";
+import { applyElementProps, applyStateDataAttrs, createSlider, getTimeSliderCSSVars, logMissingFeature, selectBuffer, selectControls, selectPlayback, selectTime } from "@videojs/core/dom";
+import { hasTimeRange } from "@videojs/media";
+import { ContextProvider } from "@videojs/element/context";
+import { translateText } from "@videojs/core/i18n";
+import { applyStyles } from "@videojs/utils/dom";
+import { formatTime } from "@videojs/utils/time";
+//#region src/ui/time-slider/element.ts
+/**
+* @fires drag-start - Fired when a pointer drag starts.
+* @fires drag-end - Fired when a pointer drag ends.
+*/
+var TimeSliderElement = class extends UIElement {
+	constructor(..._args) {
+		super(..._args);
+		this.label = "";
+		this.changeThrottle = TimeSliderCore.defaultProps.changeThrottle;
+		this.step = TimeSliderCore.defaultProps.step;
+		this.largeStep = TimeSliderCore.defaultProps.largeStep;
+		this.orientation = TimeSliderCore.defaultProps.orientation;
+		this.disabled = TimeSliderCore.defaultProps.disabled;
+		this.thumbAlignment = TimeSliderCore.defaultProps.thumbAlignment;
+		this.pauseOnDrag = TimeSliderCore.defaultProps.pauseOnDrag;
+		this.#core = new TimeSliderCore();
+		this.#controlsState = new PlayerController(this, playerContext, selectControls);
+		this.#provider = new ContextProvider(this, { context: sliderContext });
+		this.#timeState = new PlayerController(this, playerContext, selectTime);
+		this.#bufferState = new PlayerController(this, playerContext, selectBuffer);
+		this.#playbackState = new PlayerController(this, playerContext, selectPlayback);
+		this.#i18n = new I18nController(this, i18nContext);
+		this.#slider = null;
+		this.#disconnect = null;
+		this.#releaseControlsLock = null;
+	}
+	static {
+		this.tagName = "media-time-slider";
+	}
+	static {
+		this.properties = {
+			label: { type: String },
+			changeThrottle: {
+				type: Number,
+				attribute: "change-throttle"
+			},
+			step: { type: Number },
+			largeStep: {
+				type: Number,
+				attribute: "large-step"
+			},
+			orientation: { type: String },
+			disabled: { type: Boolean },
+			thumbAlignment: {
+				type: String,
+				attribute: "thumb-alignment"
+			},
+			pauseOnDrag: {
+				type: Boolean,
+				attribute: "pause-on-drag"
+			}
+		};
+	}
+	#core;
+	#controlsState;
+	#provider;
+	#timeState;
+	#bufferState;
+	#playbackState;
+	#i18n;
+	#slider;
+	#disconnect;
+	#releaseControlsLock;
+	connectedCallback() {
+		super.connectedCallback();
+		if (this.destroyed) return;
+		this.#disconnect = new AbortController();
+		const signal = this.#disconnect.signal;
+		this.#slider = createSlider({
+			getElement: () => this,
+			getThumbElement: () => this.querySelector("media-slider-thumb"),
+			getOrientation: () => this.orientation,
+			isDisabled: () => {
+				const time = this.#timeState.value;
+				const buffer = this.#bufferState.value;
+				return this.disabled || !time || !hasTimeRange({
+					...time,
+					...buffer ?? {
+						buffered: [],
+						seekable: []
+					}
+				});
+			},
+			getPercent: () => {
+				const media = this.#timeState.value;
+				if (!media) return 0;
+				return this.#core.percentFromValue(media.currentTime);
+			},
+			getStepPercent: () => this.#core.getStepPercent(),
+			getLargeStepPercent: () => this.#core.getLargeStepPercent(),
+			onValueCommit: (percent) => {
+				const media = this.#timeState.value;
+				if (media) media.seek(this.#core.rawValueFromPercent(percent));
+			},
+			changeThrottle: this.changeThrottle,
+			onPressStart: () => {
+				this.#releaseControlsLock ??= this.#controlsState.value?.requestControlsLock() ?? null;
+			},
+			onPressEnd: () => this.#releaseControlsVisibilityLock(),
+			onDragStart: () => {
+				this.#core.startDrag(this.#playbackState.value);
+				this.dispatchEvent(new CustomEvent("drag-start", { bubbles: true }));
+			},
+			onDragEnd: () => {
+				this.#core.endDrag(this.#playbackState.value);
+				this.dispatchEvent(new CustomEvent("drag-end", { bubbles: true }));
+			},
+			adjustPercent: (raw, thumbSize, trackSize) => this.#core.adjustPercentForAlignment(raw, thumbSize, trackSize),
+			onResize: () => this.requestUpdate()
+		});
+		applyElementProps(this, this.#slider.rootProps, { signal });
+		applyStyles(this, this.#slider.rootStyle);
+		this.#slider.input.subscribe(() => this.requestUpdate(), { signal });
+		if (!this.#timeState.value) logMissingFeature(this.localName, this.#timeState.displayName);
+	}
+	disconnectedCallback() {
+		this.#releaseControlsVisibilityLock();
+		this.#resumeIfDragPaused();
+		super.disconnectedCallback();
+		this.#disconnect?.abort();
+		this.#disconnect = null;
+	}
+	destroyCallback() {
+		this.#releaseControlsVisibilityLock();
+		this.#resumeIfDragPaused();
+		this.#slider?.destroy();
+		super.destroyCallback();
+	}
+	#resumeIfDragPaused() {
+		this.#core.endDrag(this.#playbackState.value);
+	}
+	#releaseControlsVisibilityLock() {
+		this.#releaseControlsLock?.();
+		this.#releaseControlsLock = null;
+	}
+	willUpdate(_changed) {
+		super.willUpdate(_changed);
+		this.#core.setProps({
+			label: this.label,
+			changeThrottle: this.changeThrottle,
+			step: this.step,
+			largeStep: this.largeStep,
+			orientation: this.orientation,
+			disabled: this.disabled,
+			thumbAlignment: this.thumbAlignment,
+			pauseOnDrag: this.pauseOnDrag
+		});
+		this.#core.setFormatLocale(this.#i18n.locale);
+	}
+	update(_changed) {
+		super.update(_changed);
+		if (!this.#slider) return;
+		const time = this.#timeState.value;
+		const buffer = this.#bufferState.value;
+		if (!time) return;
+		this.#core.setInput(this.#slider.input.current);
+		const media = {
+			...time,
+			...buffer ?? {
+				buffered: [],
+				seekable: []
+			}
+		};
+		this.#core.setMedia(media);
+		const state = this.#core.getState();
+		const cssVars = getTimeSliderCSSVars(this.#slider.adjustForAlignment(state));
+		const thumbAttrs = this.#core.getAttrs(state);
+		applyStyles(this, cssVars);
+		applyStateDataAttrs(this, state, TimeSliderDataAttrs);
+		this.#provider.setValue({
+			state,
+			stateAttrMap: TimeSliderDataAttrs,
+			pointerValue: this.#core.rawValueFromPercent(state.pointerPercent),
+			thumbAttrs: {
+				...thumbAttrs,
+				"aria-label": translateText(thumbAttrs["aria-label"], this.#i18n.value),
+				"aria-valuetext": translateText(thumbAttrs["aria-valuetext"], this.#i18n.value, this.#core.getValueTextParams(state))
+			},
+			thumbProps: this.#slider.thumbProps,
+			formatValue: (value) => formatTime(value, state.duration, { locale: this.#i18n.locale })
+		});
+	}
+};
+//#endregion
+export { TimeSliderElement };
+
+//# sourceMappingURL=element.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"element.js","names":["#core","#controlsState","#provider","#timeState","#bufferState","#playbackState","#i18n","#disconnect","#slider","#releaseControlsLock","#releaseControlsVisibilityLock","#resumeIfDragPaused"],"sources":["../../../../src/ui/time-slider/element.ts"],"sourcesContent":["import { TimeSliderCore, TimeSliderDataAttrs } from '@videojs/core';\nimport {\n  applyElementProps,\n  applyStateDataAttrs,\n  createSlider,\n  getTimeSliderCSSVars,\n  logMissingFeature,\n  type SliderApi,\n  selectBuffer,\n  selectControls,\n  selectPlayback,\n  selectTime,\n} from '@videojs/core/dom';\nimport { type Text, translateText } from '@videojs/core/i18n';\nimport type { PropertyDeclarationMap, PropertyValues } from '@videojs/element';\nimport { ContextProvider } from '@videojs/element/context';\nimport { hasTimeRange } from '@videojs/media';\nimport { applyStyles } from '@videojs/utils/dom';\nimport { formatTime } from '@videojs/utils/time';\n\nimport { i18nContext } from '../../i18n/context';\nimport { I18nController } from '../../i18n/controller';\nimport { playerContext } from '../../player/context';\nimport { PlayerController } from '../../player/controller';\nimport { sliderContext } from '../slider/context';\nimport { UIElement } from '../ui-element';\n\n/**\n * @fires drag-start - Fired when a pointer drag starts.\n * @fires drag-end - Fired when a pointer drag ends.\n */\nexport class TimeSliderElement extends UIElement {\n  static readonly tagName = 'media-time-slider';\n\n  static override properties = {\n    label: { type: String },\n    changeThrottle: { type: Number, attribute: 'change-throttle' },\n    step: { type: Number },\n    largeStep: { type: Number, attribute: 'large-step' },\n    orientation: { type: String },\n    disabled: { type: Boolean },\n    thumbAlignment: { type: String, attribute: 'thumb-alignment' },\n    pauseOnDrag: { type: Boolean, attribute: 'pause-on-drag' },\n  } satisfies PropertyDeclarationMap<Exclude<keyof TimeSliderCore.Props, 'value' | 'min' | 'max'>>;\n\n  label: Text | string = '';\n  changeThrottle = TimeSliderCore.defaultProps.changeThrottle;\n  step = TimeSliderCore.defaultProps.step;\n  largeStep = TimeSliderCore.defaultProps.largeStep;\n  orientation = TimeSliderCore.defaultProps.orientation;\n  disabled = TimeSliderCore.defaultProps.disabled;\n  thumbAlignment = TimeSliderCore.defaultProps.thumbAlignment;\n  pauseOnDrag = TimeSliderCore.defaultProps.pauseOnDrag;\n\n  readonly #core = new TimeSliderCore();\n  readonly #controlsState = new PlayerController(this, playerContext, selectControls);\n  readonly #provider = new ContextProvider(this, { context: sliderContext });\n  readonly #timeState = new PlayerController(this, playerContext, selectTime);\n  readonly #bufferState = new PlayerController(this, playerContext, selectBuffer);\n  readonly #playbackState = new PlayerController(this, playerContext, selectPlayback);\n  readonly #i18n = new I18nController(this, i18nContext);\n\n  #slider: SliderApi | null = null;\n  #disconnect: AbortController | null = null;\n  #releaseControlsLock: (() => void) | null = null;\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.signal;\n\n    this.#slider = createSlider({\n      getElement: () => this,\n      getThumbElement: () => this.querySelector<HTMLElement>('media-slider-thumb'),\n      getOrientation: () => this.orientation,\n      isDisabled: () => {\n        const time = this.#timeState.value;\n        const buffer = this.#bufferState.value;\n\n        // `bufferFeature` is optional: compositions that omit it still get a working slider, with an empty buffer.\n        return this.disabled || !time || !hasTimeRange({ ...time, ...(buffer ?? { buffered: [], seekable: [] }) });\n      },\n      getPercent: () => {\n        const media = this.#timeState.value;\n        if (!media) return 0;\n\n        return this.#core.percentFromValue(media.currentTime);\n      },\n      getStepPercent: () => this.#core.getStepPercent(),\n      getLargeStepPercent: () => this.#core.getLargeStepPercent(),\n      onValueCommit: (percent) => {\n        const media = this.#timeState.value;\n\n        if (media) media.seek(this.#core.rawValueFromPercent(percent));\n      },\n      changeThrottle: this.changeThrottle,\n      onPressStart: () => {\n        this.#releaseControlsLock ??= this.#controlsState.value?.requestControlsLock() ?? null;\n      },\n      onPressEnd: () => this.#releaseControlsVisibilityLock(),\n      onDragStart: () => {\n        this.#core.startDrag(this.#playbackState.value);\n        this.dispatchEvent(new CustomEvent('drag-start', { bubbles: true }));\n      },\n      onDragEnd: () => {\n        this.#core.endDrag(this.#playbackState.value);\n        this.dispatchEvent(new CustomEvent('drag-end', { bubbles: true }));\n      },\n      adjustPercent: (raw, thumbSize, trackSize) => this.#core.adjustPercentForAlignment(raw, thumbSize, trackSize),\n      onResize: () => this.requestUpdate(),\n    });\n\n    applyElementProps(this, this.#slider.rootProps, { signal });\n    applyStyles(this, this.#slider.rootStyle);\n    this.#slider.input.subscribe(() => this.requestUpdate(), { signal });\n\n    if (__DEV__ && !this.#timeState.value) {\n      logMissingFeature(this.localName, this.#timeState.displayName!);\n    }\n  }\n\n  override disconnectedCallback(): void {\n    this.#releaseControlsVisibilityLock();\n    this.#resumeIfDragPaused();\n    super.disconnectedCallback();\n    this.#disconnect?.abort();\n    this.#disconnect = null;\n  }\n\n  override destroyCallback(): void {\n    this.#releaseControlsVisibilityLock();\n    this.#resumeIfDragPaused();\n    this.#slider?.destroy();\n    super.destroyCallback();\n  }\n\n  // createSlider's destroy() does not fire onDragEnd, so a teardown mid-drag\n  // would leave playback paused. Called from both disconnect and destroy paths\n  // before super so the PlayerController is still attached.\n  #resumeIfDragPaused(): void {\n    this.#core.endDrag(this.#playbackState.value);\n  }\n\n  #releaseControlsVisibilityLock(): void {\n    this.#releaseControlsLock?.();\n    this.#releaseControlsLock = null;\n  }\n\n  protected override willUpdate(_changed: PropertyValues): void {\n    super.willUpdate(_changed);\n    this.#core.setProps({\n      label: this.label,\n      changeThrottle: this.changeThrottle,\n      step: this.step,\n      largeStep: this.largeStep,\n      orientation: this.orientation,\n      disabled: this.disabled,\n      thumbAlignment: this.thumbAlignment,\n      pauseOnDrag: this.pauseOnDrag,\n    });\n    this.#core.setFormatLocale(this.#i18n.locale);\n  }\n\n  protected override update(_changed: PropertyValues): void {\n    super.update(_changed);\n\n    if (!this.#slider) return;\n\n    const time = this.#timeState.value;\n    const buffer = this.#bufferState.value;\n\n    if (!time) return;\n\n    this.#core.setInput(this.#slider.input.current);\n    const media = { ...time, ...(buffer ?? { buffered: [], seekable: [] }) };\n\n    this.#core.setMedia(media);\n    const state = this.#core.getState();\n\n    const cssVars = getTimeSliderCSSVars(this.#slider.adjustForAlignment(state));\n    const thumbAttrs = this.#core.getAttrs(state);\n\n    applyStyles(this, cssVars);\n\n    // Domain-specific data attributes on root (includes data-seeking).\n    applyStateDataAttrs(this, state, TimeSliderDataAttrs);\n\n    // Provide context to child elements with base slider data attrs.\n    this.#provider.setValue({\n      state,\n      stateAttrMap: TimeSliderDataAttrs,\n      pointerValue: this.#core.rawValueFromPercent(state.pointerPercent),\n      thumbAttrs: {\n        ...thumbAttrs,\n        'aria-label': translateText(thumbAttrs['aria-label'], this.#i18n.value),\n        'aria-valuetext': translateText(\n          thumbAttrs['aria-valuetext'],\n          this.#i18n.value,\n          this.#core.getValueTextParams(state)\n        ),\n      },\n      thumbProps: this.#slider.thumbProps,\n      formatValue: (value) => formatTime(value, state.duration, { locale: this.#i18n.locale }),\n    });\n  }\n}\n"],"mappings":"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"}

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

@@ -0,0 +1,17 @@
+import { UIElement } from "../ui-element.js";
+import { PropertyValues } from "@videojs/element";
+//#region src/ui/title/element.d.ts
+/**
+ * Displays the resolved content title.
+ *
+ * The element owns its text content. Set the title through the player's `content-title` attribute.
+ */
+declare class TitleElement extends UIElement {
+  #private;
+  static readonly tagName = "media-title";
+  connectedCallback(): void;
+  protected update(changed: PropertyValues): void;
+}
+//#endregion
+export { TitleElement };
+//# sourceMappingURL=element.d.ts.map

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

@@ -0,0 +1,36 @@
+import { playerContext } from "../../player/context.js";
+import { PlayerController } from "../../player/controller.js";
+import { UIElement } from "../ui-element.js";
+import { TitleCore, TitleDataAttrs } from "@videojs/core";
+import { applyStateDataAttrs, logMissingFeature, selectControls, selectMetadata } from "@videojs/core/dom";
+//#region src/ui/title/element.ts
+/**
+* Displays the resolved content title.
+*
+* The element owns its text content. Set the title through the player's `content-title` attribute.
+*/
+var TitleElement = class extends UIElement {
+	static {
+		this.tagName = "media-title";
+	}
+	#core = new TitleCore();
+	#metadataState = new PlayerController(this, playerContext, selectMetadata);
+	#controlsState = new PlayerController(this, playerContext, selectControls);
+	connectedCallback() {
+		super.connectedCallback();
+		if (!this.#metadataState.value) logMissingFeature(this.localName, this.#metadataState.displayName);
+	}
+	update(changed) {
+		super.update(changed);
+		const metadata = this.#metadataState.value;
+		if (!metadata) return;
+		const state = this.#core.getState(metadata, this.#controlsState.value);
+		if (this.textContent !== state.title) this.textContent = state.title;
+		this.hidden = state.hidden;
+		applyStateDataAttrs(this, state, TitleDataAttrs);
+	}
+};
+//#endregion
+export { TitleElement };
+
+//# sourceMappingURL=element.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"element.js","names":["#core","#metadataState","#controlsState"],"sources":["../../../../src/ui/title/element.ts"],"sourcesContent":["import { TitleCore, TitleDataAttrs } from '@videojs/core';\nimport { applyStateDataAttrs, logMissingFeature, selectControls, selectMetadata } from '@videojs/core/dom';\nimport type { PropertyValues } from '@videojs/element';\n\nimport { playerContext } from '../../player/context';\nimport { PlayerController } from '../../player/controller';\nimport { UIElement } from '../ui-element';\n\n/**\n * Displays the resolved content title.\n *\n * The element owns its text content. Set the title through the player's `content-title` attribute.\n */\nexport class TitleElement extends UIElement {\n  static readonly tagName = 'media-title';\n\n  readonly #core = new TitleCore();\n  readonly #metadataState = new PlayerController(this, playerContext, selectMetadata);\n  readonly #controlsState = new PlayerController(this, playerContext, selectControls);\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n\n    if (__DEV__ && !this.#metadataState.value) {\n      logMissingFeature(this.localName, this.#metadataState.displayName!);\n    }\n  }\n\n  protected override update(changed: PropertyValues): void {\n    super.update(changed);\n\n    const metadata = this.#metadataState.value;\n    if (!metadata) return;\n\n    const state = this.#core.getState(metadata, this.#controlsState.value);\n\n    // Controls visibility also triggers updates, so only touch the text node when the title changed.\n    // Replacing it needlessly makes assistive tech re-announce a title that should stay put.\n    if (this.textContent !== state.title) this.textContent = state.title;\n\n    this.hidden = state.hidden;\n\n    applyStateDataAttrs(this, state, TitleDataAttrs);\n  }\n}\n"],"mappings":";;;;;;;;;;;AAaA,IAAa,eAAb,cAAkC,UAAU;;EAChB,KAAA,UAAA;;CAE1B,QAAiB,IAAI,UAAU;CAC/B,iBAA0B,IAAI,iBAAiB,MAAM,eAAe,cAAc;CAClF,iBAA0B,IAAI,iBAAiB,MAAM,eAAe,cAAc;CAElF,oBAAmC;EACjC,MAAM,kBAAkB;EAExB,IAAe,CAAC,KAAKC,eAAe,OAClC,kBAAkB,KAAK,WAAW,KAAKA,eAAe,WAAY;CAEtE;CAEA,OAA0B,SAA+B;EACvD,MAAM,OAAO,OAAO;EAEpB,MAAM,WAAW,KAAKA,eAAe;EACrC,IAAI,CAAC,UAAU;EAEf,MAAM,QAAQ,KAAKD,MAAM,SAAS,UAAU,KAAKE,eAAe,KAAK;EAIrE,IAAI,KAAK,gBAAgB,MAAM,OAAO,KAAK,cAAc,MAAM;EAE/D,KAAK,SAAS,MAAM;EAEpB,oBAAoB,MAAM,OAAO,cAAc;CACjD;AACF"}

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

@@ -0,0 +1,67 @@
+import { UIElement } from "../ui-element.js";
+import { PositioningBoundary, TooltipOpenChangeReason } from "@videojs/core/dom";
+import { PropertyValues } from "@videojs/element";
+//#region src/ui/tooltip/element.d.ts
+/** @fires open-change - Fired when the tooltip's open state changes. */
+declare class TooltipElement extends UIElement {
+  #private;
+  static readonly tagName = "media-tooltip";
+  static properties: {
+    open: {
+      type: BooleanConstructor;
+    };
+    defaultOpen: {
+      type: BooleanConstructor;
+      attribute: string;
+    };
+    side: {
+      type: StringConstructor;
+    };
+    align: {
+      type: StringConstructor;
+    };
+    delay: {
+      type: NumberConstructor;
+    };
+    closeDelay: {
+      type: NumberConstructor;
+      attribute: string;
+    };
+    disableHoverablePopup: {
+      type: BooleanConstructor;
+      attribute: string;
+    };
+    disabled: {
+      type: BooleanConstructor;
+    };
+    sticky: {
+      type: BooleanConstructor;
+    };
+    boundary: {
+      type: StringConstructor;
+    };
+    trigger: {
+      type: StringConstructor;
+    };
+  };
+  open: boolean;
+  defaultOpen: boolean;
+  side: import("@videojs/core").PopoverSide;
+  align: import("@videojs/core").PopoverAlign;
+  delay: number;
+  closeDelay: number;
+  disableHoverablePopup: boolean;
+  disabled: boolean;
+  sticky: boolean;
+  boundary: PositioningBoundary;
+  trigger: string;
+  connectedCallback(): void;
+  protected firstUpdated(changed: PropertyValues): void;
+  disconnectedCallback(): void;
+  close(reason?: TooltipOpenChangeReason): void;
+  protected willUpdate(changed: PropertyValues): void;
+  protected update(_changed: PropertyValues): void;
+}
+//#endregion
+export { TooltipElement };
+//# sourceMappingURL=element.d.ts.map