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

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

@@ -1,24 +1,41 @@
+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 { UIElement } from "../ui-element.js";
 import { sliderContext } from "../slider/context.js";
-import { applyElementProps, applyStateDataAttrs, createSlider, getTimeSliderCSSVars, selectBuffer, selectTime } from "@videojs/core/dom";
-import { ContextProvider } from "@videojs/element/context";
 import { TimeSliderCore, TimeSliderDataAttrs } from "@videojs/core";
-import { applyStyles, isRTL } from "@videojs/utils/dom";
+import { applyElementProps, applyStateDataAttrs, createSlider, getTimeSliderCSSVars, selectBuffer, selectControls, selectPlayback, selectTime } from "@videojs/core/dom";
+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/time-slider-element.ts
-var TimeSliderElement = class extends MediaElement {
+/**
+* @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 = TimeSliderCore.defaultProps.label;
-		this.commitThrottle = TimeSliderCore.defaultProps.commitThrottle;
+		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";
@@ -26,9 +43,9 @@ var TimeSliderElement = class extends MediaElement {
 	static {
 		this.properties = {
 			label: { type: String },
-			commitThrottle: {
+			changeThrottle: {
 				type: Number,
-				attribute: "commit-throttle"
+				attribute: "change-throttle"
 			},
 			step: { type: Number },
 			largeStep: {
@@ -40,15 +57,23 @@ var TimeSliderElement = class extends MediaElement {
 			thumbAlignment: {
 				type: String,
 				attribute: "thumb-alignment"
+			},
+			pauseOnDrag: {
+				type: Boolean,
+				attribute: "pause-on-drag"
 			}
 		};
 	}
-	#core = new TimeSliderCore();
-	#provider = new ContextProvider(this, { context: sliderContext });
-	#timeState = new PlayerController(this, playerContext, selectTime);
-	#bufferState = new PlayerController(this, playerContext, selectBuffer);
-	#slider = null;
-	#disconnect = null;
+	#core;
+	#controlsState;
+	#provider;
+	#timeState;
+	#bufferState;
+	#playbackState;
+	#i18n;
+	#slider;
+	#disconnect;
+	#releaseControlsLock;
 	connectedCallback() {
 		super.connectedCallback();
 		if (this.destroyed) return;
@@ -58,7 +83,6 @@ var TimeSliderElement = class extends MediaElement {
 			getElement: () => this,
 			getThumbElement: () => this.querySelector("media-slider-thumb"),
 			getOrientation: () => this.orientation,
-			isRTL: () => isRTL(this),
 			isDisabled: () => this.disabled || !this.#timeState.value,
 			getPercent: () => {
 				const media = this.#timeState.value;
@@ -71,11 +95,17 @@ var TimeSliderElement = class extends MediaElement {
 				const media = this.#timeState.value;
 				if (media) media.seek(this.#core.rawValueFromPercent(percent));
 			},
-			commitThrottle: this.commitThrottle,
+			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),
@@ -86,17 +116,38 @@ var TimeSliderElement = class extends MediaElement {
 		this.#slider.input.subscribe(() => this.requestUpdate(), { signal });
 	}
 	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(this);
+		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);
@@ -115,19 +166,24 @@ var TimeSliderElement = class extends MediaElement {
 		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.valueFromPercent(state.pointerPercent),
-			thumbAttrs: this.#core.getAttrs(state),
+			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)
+			formatValue: (value) => formatTime(value, state.duration, { locale: this.#i18n.locale })
 		});
 	}
 };
-
 //#endregion
 export { TimeSliderElement };
+
 //# sourceMappingURL=time-slider-element.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"time-slider-element.js","names":["#core","#provider","#timeState","#bufferState","#disconnect","#slider"],"sources":["../../../../src/ui/time-slider/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  selectTime,\n} from '@videojs/core/dom';\nimport type { PropertyDeclarationMap, PropertyValues } from '@videojs/element';\nimport { ContextProvider } from '@videojs/element/context';\nimport { applyStyles, isRTL } from '@videojs/utils/dom';\nimport { formatTime } from '@videojs/utils/time';\n\nimport { playerContext } from '../../player/context';\nimport { PlayerController } from '../../player/player-controller';\nimport { MediaElement } from '../media-element';\nimport { sliderContext } from '../slider/context';\n\nexport class TimeSliderElement extends MediaElement {\n  static readonly tagName = 'media-time-slider';\n\n  static override properties = {\n    label: { type: String },\n    commitThrottle: { type: Number, attribute: 'commit-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  } satisfies PropertyDeclarationMap<Exclude<keyof TimeSliderCore.Props, 'value' | 'min' | 'max'>>;\n\n  label = TimeSliderCore.defaultProps.label;\n  commitThrottle = TimeSliderCore.defaultProps.commitThrottle;\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\n  readonly #core = new TimeSliderCore();\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\n  #slider: SliderApi | null = null;\n  #disconnect: AbortController | null = null;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\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      isRTL: () => isRTL(this),\n      isDisabled: () => this.disabled || !this.#timeState.value,\n      getPercent: () => {\n        const media = this.#timeState.value;\n        if (!media) return 0;\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        if (media) media.seek(this.#core.rawValueFromPercent(percent));\n      },\n      commitThrottle: this.commitThrottle,\n      onDragStart: () => {\n        this.dispatchEvent(new CustomEvent('drag-start', { bubbles: true }));\n      },\n      onDragEnd: () => {\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    super.disconnectedCallback();\n    this.#disconnect?.abort();\n    this.#disconnect = null;\n  }\n\n  override destroyCallback(): void {\n    this.#slider?.destroy();\n    super.destroyCallback();\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    if (!this.#slider) return;\n\n    const time = this.#timeState.value;\n    const buffer = this.#bufferState.value;\n    if (!time) return;\n\n    this.#core.setInput(this.#slider.input.current);\n    const media = { ...time, ...(buffer ?? { buffered: [], seekable: [] }) };\n    this.#core.setMedia(media);\n    const state = this.#core.getState();\n\n    const cssVars = getTimeSliderCSSVars(this.#slider.adjustForAlignment(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.valueFromPercent(state.pointerPercent),\n      thumbAttrs: this.#core.getAttrs(state),\n      thumbProps: this.#slider.thumbProps,\n      formatValue: (value) => formatTime(value, state.duration),\n    });\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"time-slider-element.js","names":["#core","#controlsState","#provider","#timeState","#bufferState","#playbackState","#i18n","#disconnect","#slider","#releaseControlsLock","#releaseControlsVisibilityLock","#resumeIfDragPaused"],"sources":["../../../../src/ui/time-slider/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 { 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/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: () => this.disabled || !this.#timeState.value,\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":";;;;;;;;;;;;;;;;;AA8BA,IAAa,oBAAb,cAAuC,UAAU;;;EAcxB,KAAA,QAAA;EACN,KAAA,iBAAA,eAAe,aAAa;EACtC,KAAA,OAAA,eAAe,aAAa;EACvB,KAAA,YAAA,eAAe,aAAa;EAC1B,KAAA,cAAA,eAAe,aAAa;EAC/B,KAAA,WAAA,eAAe,aAAa;EACtB,KAAA,iBAAA,eAAe,aAAa;EAC/B,KAAA,cAAA,eAAe,aAAa;EAEzB,KAAA,QAAA,IAAI,eAAe;EACV,KAAA,iBAAA,IAAI,iBAAiB,MAAM,eAAe,cAAc;EAC7D,KAAA,YAAA,IAAI,gBAAgB,MAAM,EAAE,SAAS,cAAc,CAAC;EACnD,KAAA,aAAA,IAAI,iBAAiB,MAAM,eAAe,UAAU;EAClD,KAAA,eAAA,IAAI,iBAAiB,MAAM,eAAe,YAAY;EACpD,KAAA,iBAAA,IAAI,iBAAiB,MAAM,eAAe,cAAc;EACjE,KAAA,QAAA,IAAI,eAAe,MAAM,WAAW;EAEzB,KAAA,UAAA;EACU,KAAA,cAAA;EACM,KAAA,uBAAA;;;EAhClB,KAAA,UAAA;;;EAEG,KAAA,aAAA;GAC3B,OAAO,EAAE,MAAM,OAAO;GACtB,gBAAgB;IAAE,MAAM;IAAQ,WAAW;GAAkB;GAC7D,MAAM,EAAE,MAAM,OAAO;GACrB,WAAW;IAAE,MAAM;IAAQ,WAAW;GAAa;GACnD,aAAa,EAAE,MAAM,OAAO;GAC5B,UAAU,EAAE,MAAM,QAAQ;GAC1B,gBAAgB;IAAE,MAAM;IAAQ,WAAW;GAAkB;GAC7D,aAAa;IAAE,MAAM;IAAS,WAAW;GAAgB;EAC3D;;CAWA;CACA;CACA;CACA;CACA;CACA;CACA;CAEA;CACA;CACA;CAEA,oBAAmC;EACjC,MAAM,kBAAkB;EAExB,IAAI,KAAK,WAAW;EAEpB,KAAKO,cAAc,IAAI,gBAAgB;EACvC,MAAM,SAAS,KAAKA,YAAY;EAEhC,KAAKC,UAAU,aAAa;GAC1B,kBAAkB;GAClB,uBAAuB,KAAK,cAA2B,oBAAoB;GAC3E,sBAAsB,KAAK;GAC3B,kBAAkB,KAAK,YAAY,CAAC,KAAKL,WAAW;GACpD,kBAAkB;IAChB,MAAM,QAAQ,KAAKA,WAAW;IAC9B,IAAI,CAAC,OAAO,OAAO;IAEnB,OAAO,KAAKH,MAAM,iBAAiB,MAAM,WAAW;GACtD;GACA,sBAAsB,KAAKA,MAAM,eAAe;GAChD,2BAA2B,KAAKA,MAAM,oBAAoB;GAC1D,gBAAgB,YAAY;IAC1B,MAAM,QAAQ,KAAKG,WAAW;IAE9B,IAAI,OAAO,MAAM,KAAK,KAAKH,MAAM,oBAAoB,OAAO,CAAC;GAC/D;GACA,gBAAgB,KAAK;GACrB,oBAAoB;IAClB,KAAKS,yBAAyB,KAAKR,eAAe,OAAO,oBAAoB,KAAK;GACpF;GACA,kBAAkB,KAAKS,+BAA+B;GACtD,mBAAmB;IACjB,KAAKV,MAAM,UAAU,KAAKK,eAAe,KAAK;IAC9C,KAAK,cAAc,IAAI,YAAY,cAAc,EAAE,SAAS,KAAK,CAAC,CAAC;GACrE;GACA,iBAAiB;IACf,KAAKL,MAAM,QAAQ,KAAKK,eAAe,KAAK;IAC5C,KAAK,cAAc,IAAI,YAAY,YAAY,EAAE,SAAS,KAAK,CAAC,CAAC;GACnE;GACA,gBAAgB,KAAK,WAAW,cAAc,KAAKL,MAAM,0BAA0B,KAAK,WAAW,SAAS;GAC5G,gBAAgB,KAAK,cAAc;EACrC,CAAC;EAED,kBAAkB,MAAM,KAAKQ,QAAQ,WAAW,EAAE,OAAO,CAAC;EAC1D,YAAY,MAAM,KAAKA,QAAQ,SAAS;EACxC,KAAKA,QAAQ,MAAM,gBAAgB,KAAK,cAAc,GAAG,EAAE,OAAO,CAAC;CAKrE;CAEA,uBAAsC;EACpC,KAAKE,+BAA+B;EACpC,KAAKC,oBAAoB;EACzB,MAAM,qBAAqB;EAC3B,KAAKJ,aAAa,MAAM;EACxB,KAAKA,cAAc;CACrB;CAEA,kBAAiC;EAC/B,KAAKG,+BAA+B;EACpC,KAAKC,oBAAoB;EACzB,KAAKH,SAAS,QAAQ;EACtB,MAAM,gBAAgB;CACxB;CAKA,sBAA4B;EAC1B,KAAKR,MAAM,QAAQ,KAAKK,eAAe,KAAK;CAC9C;CAEA,iCAAuC;EACrC,KAAKI,uBAAuB;EAC5B,KAAKA,uBAAuB;CAC9B;CAEA,WAA8B,UAAgC;EAC5D,MAAM,WAAW,QAAQ;EACzB,KAAKT,MAAM,SAAS;GAClB,OAAO,KAAK;GACZ,gBAAgB,KAAK;GACrB,MAAM,KAAK;GACX,WAAW,KAAK;GAChB,aAAa,KAAK;GAClB,UAAU,KAAK;GACf,gBAAgB,KAAK;GACrB,aAAa,KAAK;EACpB,CAAC;EACD,KAAKA,MAAM,gBAAgB,KAAKM,MAAM,MAAM;CAC9C;CAEA,OAA0B,UAAgC;EACxD,MAAM,OAAO,QAAQ;EAErB,IAAI,CAAC,KAAKE,SAAS;EAEnB,MAAM,OAAO,KAAKL,WAAW;EAC7B,MAAM,SAAS,KAAKC,aAAa;EAEjC,IAAI,CAAC,MAAM;EAEX,KAAKJ,MAAM,SAAS,KAAKQ,QAAQ,MAAM,OAAO;EAC9C,MAAM,QAAQ;GAAE,GAAG;GAAM,GAAI,UAAU;IAAE,UAAU,CAAC;IAAG,UAAU,CAAC;GAAE;EAAG;EAEvE,KAAKR,MAAM,SAAS,KAAK;EACzB,MAAM,QAAQ,KAAKA,MAAM,SAAS;EAElC,MAAM,UAAU,qBAAqB,KAAKQ,QAAQ,mBAAmB,KAAK,CAAC;EAC3E,MAAM,aAAa,KAAKR,MAAM,SAAS,KAAK;EAE5C,YAAY,MAAM,OAAO;EAGzB,oBAAoB,MAAM,OAAO,mBAAmB;EAGpD,KAAKE,UAAU,SAAS;GACtB;GACA,cAAc;GACd,cAAc,KAAKF,MAAM,oBAAoB,MAAM,cAAc;GACjE,YAAY;IACV,GAAG;IACH,cAAc,cAAc,WAAW,eAAe,KAAKM,MAAM,KAAK;IACtE,kBAAkB,cAChB,WAAW,mBACX,KAAKA,MAAM,OACX,KAAKN,MAAM,mBAAmB,KAAK,CACrC;GACF;GACA,YAAY,KAAKQ,QAAQ;GACzB,cAAc,UAAU,WAAW,OAAO,MAAM,UAAU,EAAE,QAAQ,KAAKF,MAAM,OAAO,CAAC;EACzF,CAAC;CACH;AACF"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"title-element.js","names":["#core","#metadataState","#textNode"],"sources":["../../../../src/ui/title/title-element.ts"],"sourcesContent":["import { TitleCore, TitleDataAttrs } from '@videojs/core';\nimport { applyStateDataAttrs, logMissingFeature, selectMetadata } from '@videojs/core/dom';\nimport type { PropertyValues } from '@videojs/element';\n\nimport { playerContext } from '../../player/context';\nimport { PlayerController } from '../../player/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 rather than by\n * writing children.\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\n  readonly #textNode = new Text();\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n\n    if (!this.#textNode.parentNode) {\n      this.append(this.#textNode);\n    }\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);\n\n    this.#textNode.textContent = state.title;\n    this.hidden = state.hidden;\n\n    applyStateDataAttrs(this, state, TitleDataAttrs);\n  }\n}\n"],"mappings":";;;;;;;;;;;;AAcA,IAAa,eAAb,cAAkC,UAAU;;EAChB,KAAA,UAAA;;CAE1B,QAAiB,IAAI,UAAU;CAC/B,iBAA0B,IAAI,iBAAiB,MAAM,eAAe,cAAc;CAElF,YAAqB,IAAI,KAAK;CAE9B,oBAAmC;EACjC,MAAM,kBAAkB;EAExB,IAAI,CAAC,KAAKE,UAAU,YAClB,KAAK,OAAO,KAAKA,SAAS;CAM9B;CAEA,OAA0B,SAA+B;EACvD,MAAM,OAAO,OAAO;EAEpB,MAAM,WAAW,KAAKD,eAAe;EACrC,IAAI,CAAC,UAAU;EAEf,MAAM,QAAQ,KAAKD,MAAM,SAAS,QAAQ;EAE1C,KAAKE,UAAU,cAAc,MAAM;EACnC,KAAK,SAAS,MAAM;EAEpB,oBAAoB,MAAM,OAAO,cAAc;CACjD;AACF"}

package/dist/default/ui/tooltip/context.js

@@ -1,9 +1,6 @@
 import { createContext } from "@videojs/element/context";
-
-//#region src/ui/tooltip/context.ts
-const TOOLTIP_GROUP_CONTEXT_KEY = Symbol("@videojs/tooltip-group");
-const tooltipGroupContext = createContext(TOOLTIP_GROUP_CONTEXT_KEY);
-
+const tooltipGroupContext = createContext(Symbol("@videojs/tooltip-group"));
 //#endregion
 export { tooltipGroupContext };
+
 //# sourceMappingURL=context.js.map

package/dist/default/ui/tooltip/context.js.map

@@ -1 +1 @@
-{"version":3,"file":"context.js","names":[],"sources":["../../../../src/ui/tooltip/context.ts"],"sourcesContent":["import type { TooltipGroupCore } from '@videojs/core';\nimport { createContext } from '@videojs/element/context';\n\nconst TOOLTIP_GROUP_CONTEXT_KEY = Symbol('@videojs/tooltip-group');\n\nexport const tooltipGroupContext = createContext<TooltipGroupCore>(TOOLTIP_GROUP_CONTEXT_KEY);\n"],"mappings":";;;AAGA,MAAM,4BAA4B,OAAO,yBAAyB;AAElE,MAAa,sBAAsB,cAAgC,0BAA0B"}
+{"version":3,"file":"context.js","names":[],"sources":["../../../../src/ui/tooltip/context.ts"],"sourcesContent":["import type { TooltipGroupCore } from '@videojs/core';\nimport { createContext } from '@videojs/element/context';\n\nconst TOOLTIP_GROUP_CONTEXT_KEY = Symbol('@videojs/tooltip-group');\n\nexport const tooltipGroupContext = createContext<TooltipGroupCore>(TOOLTIP_GROUP_CONTEXT_KEY);\n"],"mappings":";AAKA,MAAa,sBAAsB,cAFD,OAAO,wBAE0B,CAAyB"}

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

@@ -1,13 +1,25 @@
-import { MediaElement } from "../media-element.js";
+import { i18nContext } from "../../i18n/context.js";
+import { I18nController } from "../../i18n/controller.js";
+import { containerContext } from "../../player/context.js";
+import { UIElement } from "../ui-element.js";
+import { PositionController } from "../position-controller.js";
+import { popupGroupContext } from "../../player/popup-group-context.js";
 import { tooltipGroupContext } from "./context.js";
-import { applyElementProps, applyStateDataAttrs, createTooltip, createTransition, getAnchorNameStyle, getAnchorPositionStyle, getPopupPositionRect, resolveOffsets } from "@videojs/core/dom";
+import { TooltipLabelElement } from "./tooltip-label-element.js";
+import { TooltipShortcutElement } from "./tooltip-shortcut-element.js";
+import { POPUP_HOST_ATTR, TooltipCSSVars, TooltipCore, TooltipDataAttrs } from "@videojs/core";
+import { HOTKEY_SHORTCUT_CHANGE_EVENT, applyElementProps, applyStateDataAttrs, createTooltip, createTransition } from "@videojs/core/dom";
 import { ContextConsumer } from "@videojs/element/context";
+import { translateText } from "@videojs/core/i18n";
+import { listen, tryHidePopover, tryShowPopover } from "@videojs/utils/dom";
 import { SnapshotController } from "@videojs/store/html";
-import { TooltipCSSVars, TooltipCore, TooltipDataAttrs } from "@videojs/core";
-import { applyStyles, supportsAnchorPositioning, tryHidePopover, tryShowPopover } from "@videojs/utils/dom";
-
+import { isFunction } from "@videojs/utils/predicate";
 //#region src/ui/tooltip/tooltip-element.ts
-var TooltipElement = class extends MediaElement {
+function isLabelTrigger(el) {
+	return "$state" in el;
+}
+/** @fires open-change - Fired when the tooltip's open state changes. */
+var TooltipElement = class extends UIElement {
 	constructor(..._args) {
 		super(..._args);
 		this.open = TooltipCore.defaultProps.open;
@@ -18,6 +30,23 @@ var TooltipElement = class extends MediaElement {
 		this.closeDelay = TooltipCore.defaultProps.closeDelay;
 		this.disableHoverablePopup = TooltipCore.defaultProps.disableHoverablePopup;
 		this.disabled = TooltipCore.defaultProps.disabled;
+		this.sticky = TooltipCore.defaultProps.sticky;
+		this.boundary = "container";
+		this.trigger = "";
+		this.#core = new TooltipCore();
+		this.#i18n = new I18nController(this, i18nContext);
+		this.#groupConsumer = new ContextConsumer(this, { context: tooltipGroupContext });
+		this.#containerCtx = new ContextConsumer(this, {
+			context: containerContext,
+			subscribe: true
+		});
+		this.#popupGroupCtx = new ContextConsumer(this, { context: popupGroupContext });
+		this.#position = new PositionController(this);
+		this.#tooltip = null;
+		this.#snapshot = null;
+		this.#disconnect = null;
+		this.#triggerAbort = null;
+		this.#currentTrigger = null;
 	}
 	static {
 		this.tagName = "media-tooltip";
@@ -40,22 +69,27 @@ var TooltipElement = class extends MediaElement {
 				type: Boolean,
 				attribute: "disable-hoverable-popup"
 			},
-			disabled: { type: Boolean }
+			disabled: { type: Boolean },
+			sticky: { type: Boolean },
+			boundary: { type: String },
+			trigger: { type: String }
 		};
 	}
-	#core = new TooltipCore();
-	#groupConsumer = new ContextConsumer(this, { context: tooltipGroupContext });
-	#tooltip = null;
-	#snapshot = null;
-	#disconnect = null;
-	#triggerAbort = null;
-	#currentTrigger = null;
-	#positionAbort = null;
-	#positionFrame = 0;
-	#resizeObserver = null;
-	#positionTrigger = null;
+	#core;
+	#i18n;
+	#groupConsumer;
+	#containerCtx;
+	#popupGroupCtx;
+	#position;
+	#tooltip;
+	#snapshot;
+	#disconnect;
+	#triggerAbort;
+	#currentTrigger;
 	connectedCallback() {
 		super.connectedCallback();
+		if (this.destroyed) return;
+		this.setAttribute(POPUP_HOST_ATTR, "");
 		this.#disconnect = new AbortController();
 		this.#tooltip = createTooltip({
 			transition: createTransition(),
@@ -70,7 +104,9 @@ var TooltipElement = class extends MediaElement {
 			closeDelay: () => this.closeDelay,
 			disableHoverablePopup: () => this.disableHoverablePopup,
 			disabled: () => this.disabled,
-			group: () => this.#groupConsumer.value
+			sticky: () => this.sticky,
+			group: () => this.#groupConsumer.value,
+			popupGroup: () => this.#popupGroupCtx.value
 		});
 		this.#tooltip.setPopupElement(this);
 		applyElementProps(this, this.#tooltip.popupProps, { signal: this.#disconnect.signal });
@@ -83,13 +119,15 @@ var TooltipElement = class extends MediaElement {
 	}
 	disconnectedCallback() {
 		super.disconnectedCallback();
-		this.#cleanupPositioning();
 		this.#cleanupTrigger();
 		this.#tooltip?.destroy();
 		this.#tooltip = null;
 		this.#disconnect?.abort();
 		this.#disconnect = null;
 	}
+	close(reason = "imperative-action") {
+		this.#tooltip?.close(reason);
+	}
 	willUpdate(changed) {
 		super.willUpdate(changed);
 		this.#core.setProps(this);
@@ -102,8 +140,9 @@ var TooltipElement = class extends MediaElement {
 	update(_changed) {
 		super.update(_changed);
 		if (!this.#tooltip) return;
-		const triggerEl = this.#findTrigger();
+		const triggerEl = this.#position.findTrigger(this.trigger);
 		this.#syncTrigger(triggerEl);
+		if (this.#currentTrigger && isLabelTrigger(this.#currentTrigger)) this.#syncContent(this.#currentTrigger);
 		const input = this.#tooltip.input.current;
 		this.#core.setInput(input);
 		const state = this.#core.getState();
@@ -111,94 +150,65 @@ var TooltipElement = class extends MediaElement {
 		applyStateDataAttrs(this, state, TooltipDataAttrs);
 		if (state.open) tryShowPopover(this);
 		else tryHidePopover(this);
-		if (this.#currentTrigger) {
-			applyElementProps(this.#currentTrigger, this.#core.getTriggerAttrs(state, this.id));
-			applyStyles(this.#currentTrigger, getAnchorNameStyle(this.id));
-		}
 		if (!state.open) {
-			this.#cleanupPositioning();
+			this.#position.cleanup();
 			return;
 		}
-		const posOpts = {
-			side: state.side,
-			align: state.align
-		};
-		if (supportsAnchorPositioning()) applyStyles(this, getAnchorPositionStyle(this.id, posOpts, void 0, void 0, void 0, void 0, TooltipCSSVars));
-		else {
-			const triggerRect = this.#currentTrigger?.getBoundingClientRect();
-			const selfRect = getPopupPositionRect(this);
-			const boundaryRect = document.documentElement.getBoundingClientRect();
-			const offsets = resolveOffsets(this, TooltipCSSVars);
-			applyStyles(this, getAnchorPositionStyle(this.id, posOpts, triggerRect, selfRect, boundaryRect, offsets, TooltipCSSVars));
-		}
-		this.#syncPositioning();
-	}
-	#findTrigger() {
-		if (!this.id) return null;
-		return this.getRootNode().querySelector(`[commandfor="${this.id}"]`);
+		this.#position.sync({
+			anchorName: this.id,
+			position: {
+				side: state.side,
+				align: state.align
+			},
+			trigger: this.#currentTrigger,
+			boundary: this.boundary,
+			container: this.#containerCtx.value?.container ?? null,
+			cssVars: TooltipCSSVars,
+			onSideChange: (side) => this.setAttribute(TooltipDataAttrs.side, side)
+		});
 	}
 	#syncTrigger(triggerEl) {
 		if (triggerEl === this.#currentTrigger) return;
-		this.#cleanupPositioning();
+		this.#position.cleanup();
 		this.#cleanupTrigger();
 		this.#currentTrigger = triggerEl;
 		this.#tooltip?.setTriggerElement(triggerEl);
 		if (triggerEl && this.#tooltip) {
 			this.#triggerAbort = new AbortController();
 			applyElementProps(triggerEl, this.#tooltip.triggerProps, { signal: this.#triggerAbort.signal });
+			if (isLabelTrigger(triggerEl)) {
+				this.#syncContent(triggerEl);
+				triggerEl.$state.subscribe(() => this.#syncContent(triggerEl), { signal: this.#triggerAbort.signal });
+				listen(triggerEl, HOTKEY_SHORTCUT_CHANGE_EVENT, () => this.#syncContent(triggerEl), { signal: this.#triggerAbort.signal });
+			}
 		}
 	}
-	#cleanupTrigger() {
-		if (this.#currentTrigger) {
-			applyElementProps(this.#currentTrigger, { "aria-describedby": void 0 });
-			this.#currentTrigger.style.removeProperty("anchor-name");
+	#syncContent(triggerEl) {
+		const label = triggerEl.getLabel();
+		let resolved = isFunction(triggerEl.getResolvedLabel) ? triggerEl.getResolvedLabel() : void 0;
+		if (resolved === void 0 && label) resolved = translateText(label, this.#i18n.value);
+		const shortcut = triggerEl.getShortcut?.();
+		let labelEl = TooltipLabelElement.findIn(this);
+		let shortcutEl = TooltipShortcutElement.findIn(this);
+		if (!labelEl && !shortcutEl) {
+			if (this.#hostHasAuthoredTooltipContent()) return;
+			labelEl = TooltipLabelElement.create();
+			shortcutEl = TooltipShortcutElement.create();
+			this.replaceChildren(labelEl, shortcutEl);
 		}
+		labelEl?.setSyncedText(resolved ?? "");
+		shortcutEl?.setSyncedShortcut(shortcut);
+	}
+	#hostHasAuthoredTooltipContent() {
+		return Array.from(this.childNodes).some((node) => !!node.textContent?.trim());
+	}
+	#cleanupTrigger() {
 		this.#triggerAbort?.abort();
 		this.#triggerAbort = null;
 		this.#currentTrigger = null;
 	}
-	#syncPositioning() {
-		if (supportsAnchorPositioning()) return;
-		const triggerEl = this.#currentTrigger;
-		if (!triggerEl) return;
-		if (this.#positionAbort && this.#positionTrigger === triggerEl) return;
-		this.#cleanupPositioning();
-		this.#positionAbort = new AbortController();
-		this.#positionTrigger = triggerEl;
-		const { signal } = this.#positionAbort;
-		const reposition = () => {
-			cancelAnimationFrame(this.#positionFrame);
-			this.#positionFrame = requestAnimationFrame(() => {
-				if (signal.aborted) return;
-				this.requestUpdate();
-			});
-		};
-		window.addEventListener("scroll", reposition, {
-			capture: true,
-			passive: true,
-			signal
-		});
-		window.addEventListener("resize", reposition, { signal });
-		if (typeof ResizeObserver === "function") {
-			this.#resizeObserver = new ResizeObserver(() => {
-				reposition();
-			});
-			this.#resizeObserver.observe(triggerEl);
-			this.#resizeObserver.observe(this);
-		}
-		reposition();
-	}
-	#cleanupPositioning() {
-		this.#positionAbort?.abort();
-		this.#positionAbort = null;
-		this.#positionTrigger = null;
-		cancelAnimationFrame(this.#positionFrame);
-		this.#positionFrame = 0;
-		this.#resizeObserver?.disconnect();
-		this.#resizeObserver = null;
-	}
 };
-
 //#endregion
 export { TooltipElement };
+
 //# sourceMappingURL=tooltip-element.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"tooltip-element.js","names":["#core","#groupConsumer","#disconnect","#tooltip","#snapshot","#cleanupPositioning","#cleanupTrigger","#findTrigger","#syncTrigger","#currentTrigger","#syncPositioning","#triggerAbort","#positionAbort","#positionTrigger","#positionFrame","#resizeObserver"],"sources":["../../../../src/ui/tooltip/tooltip-element.ts"],"sourcesContent":["import { TooltipCore, TooltipCSSVars, TooltipDataAttrs, type TooltipInput } from '@videojs/core';\nimport {\n  applyElementProps,\n  applyStateDataAttrs,\n  createTooltip,\n  createTransition,\n  getAnchorNameStyle,\n  getAnchorPositionStyle,\n  getPopupPositionRect,\n  resolveOffsets,\n  type TooltipApi,\n  type TooltipChangeDetails,\n} from '@videojs/core/dom';\nimport type { PropertyDeclarationMap, PropertyValues } from '@videojs/element';\nimport { ContextConsumer } from '@videojs/element/context';\nimport { SnapshotController } from '@videojs/store/html';\nimport { applyStyles, supportsAnchorPositioning, tryHidePopover, tryShowPopover } from '@videojs/utils/dom';\n\nimport { MediaElement } from '../media-element';\nimport { tooltipGroupContext } from './context';\n\nexport class TooltipElement extends MediaElement {\n  static readonly tagName = 'media-tooltip';\n\n  static override properties = {\n    open: { type: Boolean },\n    defaultOpen: { type: Boolean, attribute: 'default-open' },\n    side: { type: String },\n    align: { type: String },\n    delay: { type: Number },\n    closeDelay: { type: Number, attribute: 'close-delay' },\n    disableHoverablePopup: { type: Boolean, attribute: 'disable-hoverable-popup' },\n    disabled: { type: Boolean },\n  } satisfies PropertyDeclarationMap<keyof TooltipCore.Props>;\n\n  open = TooltipCore.defaultProps.open;\n  defaultOpen = TooltipCore.defaultProps.defaultOpen;\n  side = TooltipCore.defaultProps.side;\n  align = TooltipCore.defaultProps.align;\n  delay = TooltipCore.defaultProps.delay;\n  closeDelay = TooltipCore.defaultProps.closeDelay;\n  disableHoverablePopup = TooltipCore.defaultProps.disableHoverablePopup;\n  disabled = TooltipCore.defaultProps.disabled;\n\n  readonly #core = new TooltipCore();\n  readonly #groupConsumer = new ContextConsumer(this, { context: tooltipGroupContext });\n  #tooltip: TooltipApi | null = null;\n  #snapshot: SnapshotController<TooltipInput> | null = null;\n\n  // Cleanup controllers\n  #disconnect: AbortController | null = null;\n  #triggerAbort: AbortController | null = null;\n  #currentTrigger: HTMLElement | null = null;\n  #positionAbort: AbortController | null = null;\n  #positionFrame = 0;\n  #resizeObserver: ResizeObserver | null = null;\n  #positionTrigger: HTMLElement | null = null;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this.#disconnect = new AbortController();\n\n    this.#tooltip = createTooltip({\n      transition: createTransition(),\n      onOpenChange: (nextOpen: boolean, details: TooltipChangeDetails) => {\n        this.open = nextOpen;\n        this.dispatchEvent(new CustomEvent('open-change', { detail: { open: nextOpen, ...details } }));\n      },\n      delay: () => this.delay,\n      closeDelay: () => this.closeDelay,\n      disableHoverablePopup: () => this.disableHoverablePopup,\n      disabled: () => this.disabled,\n      // Lazy getter — group may arrive after connect via context.\n      group: () => this.#groupConsumer.value,\n    });\n\n    // Register self as the popup element — the element IS the popup.\n    this.#tooltip.setPopupElement(this);\n\n    // Apply popup event handlers (pointerenter/leave, focusout) to self.\n    applyElementProps(this, this.#tooltip.popupProps, { signal: this.#disconnect.signal });\n\n    // Subscribe to interaction state for reactive updates.\n    if (this.#snapshot) {\n      this.#snapshot.track(this.#tooltip.input);\n    } else {\n      this.#snapshot = new SnapshotController(this, this.#tooltip.input);\n    }\n  }\n\n  protected override firstUpdated(changed: PropertyValues): void {\n    super.firstUpdated(changed);\n\n    // Uncontrolled mode: open if `defaultOpen` is set. Controlled `open`\n    // is already synced by `willUpdate` on the first render cycle.\n    if (this.defaultOpen && !this.open) {\n      this.#tooltip?.open();\n    }\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.#cleanupPositioning();\n    this.#cleanupTrigger();\n    this.#tooltip?.destroy();\n    this.#tooltip = null;\n    this.#disconnect?.abort();\n    this.#disconnect = null;\n  }\n\n  protected override willUpdate(changed: PropertyValues): void {\n    super.willUpdate(changed);\n    this.#core.setProps(this);\n\n    // Sync controlled open state\n    if (this.#tooltip && changed.has('open')) {\n      const { active: interactionOpen } = this.#tooltip.input.current;\n      if (this.open !== interactionOpen) {\n        if (this.open) {\n          this.#tooltip.open();\n        } else {\n          this.#tooltip.close();\n        }\n      }\n    }\n  }\n\n  protected override update(_changed: PropertyValues): void {\n    super.update(_changed);\n    if (!this.#tooltip) return;\n\n    // Discover trigger via commandfor linkage.\n    const triggerEl = this.#findTrigger();\n    this.#syncTrigger(triggerEl);\n\n    // Derive state from core + input.\n    const input = this.#tooltip.input.current;\n    this.#core.setInput(input);\n    const state = this.#core.getState();\n\n    // Apply popup ARIA and data attributes to self.\n    applyElementProps(this, this.#core.getPopupAttrs(state));\n    applyStateDataAttrs(this, state, TooltipDataAttrs);\n\n    // Show/hide via Popover API AFTER data attributes are applied so\n    // `data-starting-style` is present before the first visible frame.\n    if (state.open) {\n      tryShowPopover(this);\n    } else {\n      tryHidePopover(this);\n    }\n\n    // Apply trigger ARIA and anchor-name to the discovered trigger.\n    if (this.#currentTrigger) {\n      applyElementProps(this.#currentTrigger, this.#core.getTriggerAttrs(state, this.id));\n      applyStyles(this.#currentTrigger, getAnchorNameStyle(this.id));\n    }\n\n    // Skip positioning when closed — no rects to measure.\n    if (!state.open) {\n      this.#cleanupPositioning();\n      return;\n    }\n\n    // Apply positioning styles to self.\n    const posOpts = { side: state.side, align: state.align };\n\n    if (supportsAnchorPositioning()) {\n      // Native CSS Anchor Positioning — no JS rect measurements needed.\n      applyStyles(\n        this,\n        getAnchorPositionStyle(this.id, posOpts, undefined, undefined, undefined, undefined, TooltipCSSVars)\n      );\n    } else {\n      // JS fallback: measure rects and resolve CSS var offsets.\n      const triggerRect = this.#currentTrigger?.getBoundingClientRect();\n      const selfRect = getPopupPositionRect(this);\n      const boundaryRect = document.documentElement.getBoundingClientRect();\n      const offsets = resolveOffsets(this, TooltipCSSVars);\n      applyStyles(\n        this,\n        getAnchorPositionStyle(this.id, posOpts, triggerRect, selfRect, boundaryRect, offsets, TooltipCSSVars)\n      );\n    }\n\n    this.#syncPositioning();\n  }\n\n  // --- Trigger discovery ---\n\n  #findTrigger(): HTMLElement | null {\n    if (!this.id) return null;\n    const root = this.getRootNode() as Document | ShadowRoot;\n    return root.querySelector<HTMLElement>(`[commandfor=\"${this.id}\"]`);\n  }\n\n  #syncTrigger(triggerEl: HTMLElement | null): void {\n    if (triggerEl === this.#currentTrigger) return;\n\n    this.#cleanupPositioning();\n    this.#cleanupTrigger();\n    this.#currentTrigger = triggerEl;\n    this.#tooltip?.setTriggerElement(triggerEl);\n\n    if (triggerEl && this.#tooltip) {\n      this.#triggerAbort = new AbortController();\n      applyElementProps(triggerEl, this.#tooltip.triggerProps, { signal: this.#triggerAbort.signal });\n    }\n  }\n\n  #cleanupTrigger(): void {\n    if (this.#currentTrigger) {\n      // Remove ARIA attributes and anchor-name style from the old trigger.\n      applyElementProps(this.#currentTrigger, {\n        'aria-describedby': undefined,\n      });\n      this.#currentTrigger.style.removeProperty('anchor-name');\n    }\n\n    this.#triggerAbort?.abort();\n    this.#triggerAbort = null;\n    this.#currentTrigger = null;\n  }\n\n  #syncPositioning(): void {\n    if (supportsAnchorPositioning()) return;\n\n    const triggerEl = this.#currentTrigger;\n\n    if (!triggerEl) return;\n    if (this.#positionAbort && this.#positionTrigger === triggerEl) return;\n\n    this.#cleanupPositioning();\n    this.#positionAbort = new AbortController();\n    this.#positionTrigger = triggerEl;\n    const { signal } = this.#positionAbort;\n\n    const reposition = () => {\n      cancelAnimationFrame(this.#positionFrame);\n      this.#positionFrame = requestAnimationFrame(() => {\n        if (signal.aborted) return;\n        this.requestUpdate();\n      });\n    };\n\n    window.addEventListener('scroll', reposition, { capture: true, passive: true, signal });\n    window.addEventListener('resize', reposition, { signal });\n\n    if (typeof ResizeObserver === 'function') {\n      this.#resizeObserver = new ResizeObserver(() => {\n        reposition();\n      });\n      this.#resizeObserver.observe(triggerEl);\n      this.#resizeObserver.observe(this);\n    }\n\n    reposition();\n  }\n\n  #cleanupPositioning(): void {\n    this.#positionAbort?.abort();\n    this.#positionAbort = null;\n    this.#positionTrigger = null;\n    cancelAnimationFrame(this.#positionFrame);\n    this.#positionFrame = 0;\n    this.#resizeObserver?.disconnect();\n    this.#resizeObserver = null;\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"tooltip-element.js","names":["#core","#i18n","#groupConsumer","#containerCtx","#popupGroupCtx","#position","#disconnect","#tooltip","#snapshot","#cleanupTrigger","#syncTrigger","#currentTrigger","#syncContent","#triggerAbort","#hostHasAuthoredTooltipContent"],"sources":["../../../../src/ui/tooltip/tooltip-element.ts"],"sourcesContent":["import {\n  type ButtonState,\n  POPUP_HOST_ATTR,\n  TooltipCore,\n  TooltipCSSVars,\n  TooltipDataAttrs,\n  type TooltipInput,\n} from '@videojs/core';\nimport {\n  applyElementProps,\n  applyStateDataAttrs,\n  createTooltip,\n  createTransition,\n  HOTKEY_SHORTCUT_CHANGE_EVENT,\n  type PositioningBoundary,\n  type TooltipApi,\n  type TooltipChangeDetails,\n  type TooltipOpenChangeReason,\n} from '@videojs/core/dom';\nimport { type Text, translateText } from '@videojs/core/i18n';\nimport type { PropertyDeclarationMap, PropertyValues } from '@videojs/element';\nimport { ContextConsumer } from '@videojs/element/context';\nimport type { State } from '@videojs/store';\nimport { SnapshotController } from '@videojs/store/html';\nimport { listen, tryHidePopover, tryShowPopover } from '@videojs/utils/dom';\nimport { isFunction } from '@videojs/utils/predicate';\n\nimport { i18nContext } from '../../i18n/context';\nimport { I18nController } from '../../i18n/controller';\nimport { containerContext } from '../../player/context';\nimport { popupGroupContext } from '../../player/popup-group-context';\nimport { PositionController } from '../position-controller';\nimport { UIElement } from '../ui-element';\nimport { tooltipGroupContext } from './context';\nimport { TooltipLabelElement } from './tooltip-label-element';\nimport { TooltipShortcutElement } from './tooltip-shortcut-element';\n\ntype TriggerElement = HTMLElement & {\n  getLabel(): Text | string | undefined;\n  getResolvedLabel?(): string | undefined;\n  getShortcut?: (() => string | undefined) | undefined;\n  $state: State<ButtonState>;\n};\n\nfunction isLabelTrigger(el: HTMLElement): el is TriggerElement {\n  return '$state' in el;\n}\n\n/** @fires open-change - Fired when the tooltip's open state changes. */\nexport class TooltipElement extends UIElement {\n  static readonly tagName = 'media-tooltip';\n\n  static override properties = {\n    open: { type: Boolean },\n    defaultOpen: { type: Boolean, attribute: 'default-open' },\n    side: { type: String },\n    align: { type: String },\n    delay: { type: Number },\n    closeDelay: { type: Number, attribute: 'close-delay' },\n    disableHoverablePopup: { type: Boolean, attribute: 'disable-hoverable-popup' },\n    disabled: { type: Boolean },\n    sticky: { type: Boolean },\n    boundary: { type: String },\n    trigger: { type: String },\n  } satisfies PropertyDeclarationMap<keyof TooltipCore.Props | 'boundary' | 'trigger'>;\n\n  open = TooltipCore.defaultProps.open;\n  defaultOpen = TooltipCore.defaultProps.defaultOpen;\n  side = TooltipCore.defaultProps.side;\n  align = TooltipCore.defaultProps.align;\n  delay = TooltipCore.defaultProps.delay;\n  closeDelay = TooltipCore.defaultProps.closeDelay;\n  disableHoverablePopup = TooltipCore.defaultProps.disableHoverablePopup;\n  disabled = TooltipCore.defaultProps.disabled;\n  sticky = TooltipCore.defaultProps.sticky;\n  boundary: PositioningBoundary = 'container';\n  trigger = '';\n\n  readonly #core = new TooltipCore();\n  readonly #i18n = new I18nController(this, i18nContext);\n  readonly #groupConsumer = new ContextConsumer(this, { context: tooltipGroupContext });\n  readonly #containerCtx = new ContextConsumer(this, { context: containerContext, subscribe: true });\n  readonly #popupGroupCtx = new ContextConsumer(this, { context: popupGroupContext });\n  readonly #position = new PositionController(this);\n  #tooltip: TooltipApi | null = null;\n  #snapshot: SnapshotController<TooltipInput> | null = null;\n\n  // Cleanup controllers\n  #disconnect: AbortController | null = null;\n  #triggerAbort: AbortController | null = null;\n  #currentTrigger: HTMLElement | null = null;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n\n    if (this.destroyed) return;\n\n    this.setAttribute(POPUP_HOST_ATTR, '');\n\n    this.#disconnect = new AbortController();\n\n    this.#tooltip = createTooltip({\n      transition: createTransition(),\n      onOpenChange: (nextOpen: boolean, details: TooltipChangeDetails) => {\n        this.open = nextOpen;\n        this.dispatchEvent(new CustomEvent('open-change', { detail: { open: nextOpen, ...details } }));\n      },\n      delay: () => this.delay,\n      closeDelay: () => this.closeDelay,\n      disableHoverablePopup: () => this.disableHoverablePopup,\n      disabled: () => this.disabled,\n      sticky: () => this.sticky,\n      // Lazy getter — group may arrive after connect via context.\n      group: () => this.#groupConsumer.value,\n      popupGroup: () => this.#popupGroupCtx.value,\n    });\n\n    // Register self as the popup element — the element IS the popup.\n    this.#tooltip.setPopupElement(this);\n\n    // Apply popup event handlers (pointerenter/leave, focusout) to self.\n    applyElementProps(this, this.#tooltip.popupProps, { signal: this.#disconnect.signal });\n\n    // Subscribe to interaction state for reactive updates.\n    if (this.#snapshot) {\n      this.#snapshot.track(this.#tooltip.input);\n    } else {\n      this.#snapshot = new SnapshotController(this, this.#tooltip.input);\n    }\n  }\n\n  protected override firstUpdated(changed: PropertyValues): void {\n    super.firstUpdated(changed);\n\n    // Uncontrolled mode: open if `defaultOpen` is set. Controlled `open`\n    // is already synced by `willUpdate` on the first render cycle.\n    if (this.defaultOpen && !this.open) {\n      this.#tooltip?.open();\n    }\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.#cleanupTrigger();\n    this.#tooltip?.destroy();\n    this.#tooltip = null;\n    this.#disconnect?.abort();\n    this.#disconnect = null;\n  }\n\n  close(reason: TooltipOpenChangeReason = 'imperative-action'): void {\n    this.#tooltip?.close(reason);\n  }\n\n  protected override willUpdate(changed: PropertyValues): void {\n    super.willUpdate(changed);\n    this.#core.setProps(this);\n\n    // Sync controlled open state\n    if (this.#tooltip && changed.has('open')) {\n      const { active: interactionOpen } = this.#tooltip.input.current;\n\n      if (this.open !== interactionOpen) {\n        if (this.open) {\n          this.#tooltip.open();\n        } else {\n          this.#tooltip.close();\n        }\n      }\n    }\n  }\n\n  protected override update(_changed: PropertyValues): void {\n    super.update(_changed);\n\n    if (!this.#tooltip) return;\n\n    const triggerEl = this.#position.findTrigger(this.trigger);\n\n    this.#syncTrigger(triggerEl);\n\n    if (this.#currentTrigger && isLabelTrigger(this.#currentTrigger)) {\n      this.#syncContent(this.#currentTrigger);\n    }\n\n    // Derive state from core + input.\n    const input = this.#tooltip.input.current;\n\n    this.#core.setInput(input);\n    const state = this.#core.getState();\n\n    // Apply popup ARIA and data attributes to self.\n    applyElementProps(this, this.#core.getPopupAttrs(state));\n    applyStateDataAttrs(this, state, TooltipDataAttrs);\n\n    // Show/hide via Popover API AFTER data attributes are applied so\n    // `data-starting-style` is present before the first visible frame.\n    if (state.open) {\n      tryShowPopover(this);\n    } else {\n      tryHidePopover(this);\n    }\n\n    // Skip positioning when closed — no rects to measure.\n    if (!state.open) {\n      this.#position.cleanup();\n      return;\n    }\n\n    this.#position.sync({\n      anchorName: this.id,\n      position: { side: state.side, align: state.align },\n      trigger: this.#currentTrigger,\n      boundary: this.boundary,\n      container: this.#containerCtx.value?.container ?? null,\n      cssVars: TooltipCSSVars,\n      onSideChange: (side) => this.setAttribute(TooltipDataAttrs.side, side),\n    });\n  }\n\n  // --- Trigger management ---\n\n  #syncTrigger(triggerEl: HTMLElement | null): void {\n    if (triggerEl === this.#currentTrigger) return;\n\n    this.#position.cleanup();\n    this.#cleanupTrigger();\n    this.#currentTrigger = triggerEl;\n    this.#tooltip?.setTriggerElement(triggerEl);\n\n    if (triggerEl && this.#tooltip) {\n      this.#triggerAbort = new AbortController();\n      applyElementProps(triggerEl, this.#tooltip.triggerProps, { signal: this.#triggerAbort.signal });\n\n      if (isLabelTrigger(triggerEl)) {\n        this.#syncContent(triggerEl);\n        triggerEl.$state.subscribe(() => this.#syncContent(triggerEl), {\n          signal: this.#triggerAbort.signal,\n        });\n        listen(triggerEl, HOTKEY_SHORTCUT_CHANGE_EVENT, () => this.#syncContent(triggerEl), {\n          signal: this.#triggerAbort.signal,\n        });\n      }\n    }\n  }\n\n  #syncContent(triggerEl: TriggerElement): void {\n    const label = triggerEl.getLabel();\n    let resolved = isFunction(triggerEl.getResolvedLabel) ? triggerEl.getResolvedLabel() : undefined;\n\n    if (resolved === undefined && label) {\n      resolved = translateText(label, this.#i18n.value);\n    }\n\n    const shortcut = triggerEl.getShortcut?.();\n\n    let labelEl = TooltipLabelElement.findIn(this);\n    let shortcutEl = TooltipShortcutElement.findIn(this);\n\n    if (!labelEl && !shortcutEl) {\n      if (this.#hostHasAuthoredTooltipContent()) return;\n\n      labelEl = TooltipLabelElement.create();\n      shortcutEl = TooltipShortcutElement.create();\n      this.replaceChildren(labelEl, shortcutEl);\n    }\n\n    labelEl?.setSyncedText(resolved ?? '');\n    shortcutEl?.setSyncedShortcut(shortcut);\n  }\n\n  #hostHasAuthoredTooltipContent(): boolean {\n    return Array.from(this.childNodes).some((node) => !!node.textContent?.trim());\n  }\n\n  #cleanupTrigger(): void {\n    this.#triggerAbort?.abort();\n    this.#triggerAbort = null;\n    this.#currentTrigger = null;\n  }\n}\n"],"mappings":"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"}