@videojs/html 0.1.0-preview.2 → 0.1.0-preview.3

package/dist/{media-skin-BlXPC9wG.js → media-skin-DR8zj-LV.js}

@@ -1,7 +1,7 @@
 import { createMediaStore, currentTimeDisplayStateDefinition, durationDisplayStateDefinition, fullscreenButtonStateDefinition, muteButtonStateDefinition, playButtonStateDefinition, timeSliderStateDefinition, volumeSliderStateDefinition } from "@videojs/core/store";
 import { formatDisplayTime, uniqueId } from "@videojs/utils";
 import { ConsumerMixin, ProviderMixin } from "@open-wc/context-protocol";
-import { getDocument, getNextTabbable, getPreviousTabbable, isOutsideEvent, namedNodeMapToObject, setAttributes } from "@videojs/utils/dom";
+import { contains, getDocument, getDocumentOrShadowRoot, namedNodeMapToObject, safePolygon, setAttributes } from "@videojs/utils/dom";
 import { arrow, autoUpdate, computePosition, flip, offset, shift } from "@floating-ui/dom";
 import { TimeSlider, VolumeSlider } from "@videojs/core";
 
@@ -311,37 +311,44 @@ if (!globalThis.customElements.get("media-play-button")) globalThis.customElemen
 
 //#endregion
 //#region src/components/media-popover.ts
-var MediaPopoverRoot = class extends HTMLElement {
+var Popover = class extends HTMLElement {
 	#open = false;
+	#transitionStatus = "initial";
 	#hoverTimeout = null;
 	#cleanup = null;
-	#transitionStatus = "initial";
 	#abortController = null;
+	#floatingContext = null;
 	connectedCallback() {
-		this.#updateVisibility();
 		this.#abortController ??= new AbortController();
 		const { signal } = this.#abortController;
-		this.addEventListener("mouseenter", this, { signal });
-		this.addEventListener("mouseleave", this, { signal });
-		this.addEventListener("focusin", this, { signal });
+		const trigger = this.#triggerElement;
+		if (trigger) {
+			if (globalThis.matchMedia?.("(hover: hover)")?.matches) {
+				trigger.addEventListener("pointerenter", this, { signal });
+				trigger.addEventListener("pointerleave", this, { signal });
+			}
+			trigger.addEventListener("focusin", this, { signal });
+			trigger.addEventListener("focusout", this, { signal });
+		}
+		this.addEventListener("pointerenter", this, { signal });
 		this.addEventListener("focusout", this, { signal });
-		getDocument(this).documentElement.addEventListener("mouseleave", this, { signal });
 	}
 	disconnectedCallback() {
 		this.#clearHoverTimeout();
 		this.#cleanup?.();
-		this.#transitionStatus = "unmounted";
-		this.#updateVisibility();
 		this.#abortController?.abort();
 		this.#abortController = null;
 	}
 	handleEvent(event) {
 		switch (event.type) {
-			case "mouseenter":
-				this.#handleMouseEnter();
+			case "pointerenter":
+				this.#handlePointerEnter(event);
 				break;
-			case "mouseleave":
-				this.#handleMouseLeave(event);
+			case "pointerleave":
+				this.#handlePointerLeave(event);
+				break;
+			case "pointermove":
+				this.#handlePointerMove(event);
 				break;
 			case "focusin":
 				this.#handleFocusIn(event);
@@ -356,7 +363,9 @@ var MediaPopoverRoot = class extends HTMLElement {
 		return [
 			"open-on-hover",
 			"delay",
-			"close-delay"
+			"close-delay",
+			"side",
+			"side-offset"
 		];
 	}
 	get openOnHover() {
@@ -368,265 +377,120 @@ var MediaPopoverRoot = class extends HTMLElement {
 	get closeDelay() {
 		return Number.parseInt(this.getAttribute("close-delay") ?? "0", 10);
 	}
-	get #triggerElement() {
-		return this.querySelector("media-popover-trigger");
-	}
-	get #portalElement() {
-		return this.querySelector("media-popover-portal");
+	get side() {
+		return this.getAttribute("side");
 	}
-	get #positionerElement() {
-		return this.#portalElement?.querySelector("media-popover-positioner");
+	get sideOffset() {
+		return Number.parseInt(this.getAttribute("side-offset") ?? "0", 10);
 	}
-	get #popupElement() {
-		return this.#portalElement?.querySelector("media-popover-popup");
+	get #triggerElement() {
+		return getDocumentOrShadowRoot(this)?.querySelector(`[popovertarget="${this.id}"]`);
 	}
-	setOpen(open) {
+	#setOpen(open) {
 		if (this.#open === open) return;
 		this.#open = open;
 		if (open) {
 			this.#setupFloating();
-			this.#portalElement?.renderGuards();
-		} else {
-			this.#portalElement?.removeGuards();
-			this.#cleanup?.();
-			this.#cleanup = null;
-		}
-		if (open) {
 			this.#transitionStatus = "initial";
+			this.#updateVisibility();
+			this.showPopover();
 			requestAnimationFrame(() => {
 				this.#transitionStatus = "open";
 				this.#updateVisibility();
 			});
-		} else this.#transitionStatus = "close";
-		this.#updateVisibility();
+		} else {
+			this.#transitionStatus = "close";
+			this.#updateVisibility();
+			const transitions = this.getAnimations().filter((anim) => anim instanceof CSSTransition);
+			if (transitions.length > 0) Promise.all(transitions.map((t) => t.finished)).then(() => this.hidePopover()).catch(() => this.hidePopover());
+			else this.hidePopover();
+		}
 	}
 	#updateVisibility() {
-		this.style.display = "contents";
-		if (this.#popupElement) {
-			const placement = this.#positionerElement?.side ?? "top";
-			this.#popupElement.setAttribute("data-side", placement);
-			this.#popupElement.toggleAttribute("data-starting-style", this.#transitionStatus === "initial");
-			this.#popupElement.toggleAttribute("data-open", this.#transitionStatus === "initial" || this.#transitionStatus === "open");
-			this.#popupElement.toggleAttribute("data-ending-style", this.#transitionStatus === "close" || this.#transitionStatus === "unmounted");
-			this.#popupElement.toggleAttribute("data-closed", this.#transitionStatus === "close" || this.#transitionStatus === "unmounted");
-			this.#abortController ??= new AbortController();
-			const { signal } = this.#abortController;
-			this.#popupElement.addEventListener("mouseleave", this, { signal });
-		}
-		const triggerElement = this.#triggerElement?.firstElementChild;
-		if (triggerElement) {
-			triggerElement.setAttribute("aria-expanded", this.#open.toString());
-			triggerElement.toggleAttribute("data-popup-open", this.#open);
-			if (this.#popupElement?.id) triggerElement.setAttribute("aria-controls", this.#popupElement?.id);
-		}
+		this.toggleAttribute("data-starting-style", this.#transitionStatus === "initial");
+		this.toggleAttribute("data-open", this.#transitionStatus === "initial" || this.#transitionStatus === "open");
+		this.toggleAttribute("data-ending-style", this.#transitionStatus === "close" || this.#transitionStatus === "unmounted");
+		this.toggleAttribute("data-closed", this.#transitionStatus === "close" || this.#transitionStatus === "unmounted");
 	}
 	#setupFloating() {
-		if (!this.#triggerElement || !this.#popupElement) return;
-		const trigger = this.#triggerElement.firstElementChild;
-		const popup = this.#popupElement;
-		if (!trigger || !popup) return;
-		const placement = this.#positionerElement?.side ?? "top";
-		const sideOffset = this.#positionerElement?.sideOffset;
+		const trigger = this.#triggerElement;
+		if (!trigger) return;
+		const placement = this.side ?? "top";
+		const sideOffset = this.sideOffset;
 		const updatePosition = () => {
-			computePosition(trigger, popup, {
+			computePosition(trigger, this, {
 				placement,
 				middleware: [
 					offset(sideOffset),
 					flip(),
 					shift()
-				]
-			}).then(({ x, y }) => {
-				Object.assign(popup.style, {
-					left: `${x}px`,
-					top: `${y}px`
+				],
+				strategy: "fixed"
+			}).then((data) => {
+				this.#floatingContext = {
+					...data,
+					elements: {
+						domReference: trigger,
+						floating: this
+					}
+				};
+				Object.assign(this.style, {
+					left: `${data.x}px`,
+					top: `${data.y}px`
 				});
 			});
 		};
 		updatePosition();
-		this.#cleanup = autoUpdate(trigger, popup, updatePosition);
+		this.#cleanup = autoUpdate(trigger, this, updatePosition);
 	}
 	#clearHoverTimeout() {
 		if (this.#hoverTimeout) {
-			clearTimeout(this.#hoverTimeout);
+			globalThis.clearTimeout(this.#hoverTimeout);
 			this.#hoverTimeout = null;
 		}
 	}
-	#handleMouseEnter() {
+	#handlePointerEnter(event) {
 		if (!this.openOnHover) return;
 		this.#clearHoverTimeout();
+		if (event.currentTarget === this) this.#addPointerMoveListener();
+		if (this.#open) return;
 		this.#hoverTimeout = globalThis.setTimeout(() => {
-			this.setOpen(true);
+			this.#setOpen(true);
 		}, this.delay);
 	}
-	#handleMouseLeave(event) {
-		if (!this.openOnHover) return;
-		if (event.relatedTarget && this.#popupElement?.contains(event.relatedTarget)) return;
-		this.#clearHoverTimeout();
-		this.#hoverTimeout = globalThis.setTimeout(() => {
-			this.setOpen(false);
-		}, this.closeDelay);
+	#handlePointerLeave(_event) {
+		this.#addPointerMoveListener();
+	}
+	#addPointerMoveListener() {
+		if (!globalThis.matchMedia?.("(hover: hover)")?.matches) return;
+		const { signal } = this.#abortController;
+		getDocument(this).documentElement.addEventListener("pointermove", this, { signal });
+	}
+	#handlePointerMove(event) {
+		if (!this.openOnHover || !this.#floatingContext) return;
+		safePolygon({ blockPointerEvents: true })({
+			...this.#floatingContext,
+			x: event.clientX,
+			y: event.clientY,
+			onClose: () => {
+				getDocument(this).documentElement.removeEventListener("pointermove", this);
+				this.#clearHoverTimeout();
+				this.#hoverTimeout = globalThis.setTimeout(() => {
+					this.#setOpen(false);
+				}, this.closeDelay);
+			}
+		})(event);
 	}
 	#handleFocusIn(_event) {
-		this.setOpen(true);
+		this.#setOpen(true);
 	}
 	#handleFocusOut(event) {
 		const relatedTarget = event.relatedTarget;
-		if (relatedTarget && relatedTarget.hasAttribute("data-focus-guard")) return;
-		this.setOpen(false);
+		if (relatedTarget && contains(this, relatedTarget)) return;
+		this.#setOpen(false);
 	}
 };
-var MediaPopoverTrigger = class extends HTMLElement {
-	connectedCallback() {
-		this.style.display = "contents";
-		const triggerElement = this.firstElementChild;
-		if (triggerElement) {
-			triggerElement.setAttribute("aria-haspopup", "true");
-			triggerElement.setAttribute("aria-expanded", "false");
-			new MutationObserver((mutations) => {
-				mutations.forEach((mutation) => {
-					if (mutation.type === "attributes") {
-						const rootElement = this.closest("media-popover-root");
-						let popupElement = rootElement.querySelector("media-popover-popup");
-						if (!popupElement) {
-							const portalElement = rootElement.querySelector("media-popover-portal");
-							if (!portalElement) return;
-							popupElement = portalElement.querySelector("media-popover-popup");
-							if (!popupElement) return;
-						}
-						const attributeName = mutation.attributeName;
-						if (!attributeName || !attributeName.startsWith("data-")) return;
-						const attributeValue = triggerElement.getAttribute(attributeName);
-						if (attributeValue !== null) popupElement.setAttribute(attributeName, attributeValue);
-						else popupElement.removeAttribute(attributeName);
-					}
-				});
-			}).observe(triggerElement, { attributes: true });
-		}
-	}
-};
-var MediaPopoverPortal = class extends HTMLElement {
-	#portal = null;
-	#childrenArray = [];
-	#guards = [];
-	connectedCallback() {
-		this.style.display = "contents";
-		this.#setupPortal();
-	}
-	disconnectedCallback() {
-		this.#cleanupPortal();
-	}
-	querySelector(selector) {
-		return this.#portal.querySelector(selector);
-	}
-	querySelectorAll(selector) {
-		return this.#portal.querySelectorAll(selector);
-	}
-	handleEvent(event) {
-		this.dispatchEvent(new Event(event.type, { bubbles: true }));
-	}
-	#setupPortal() {
-		const portalId = this.getAttribute("root-id") ?? "@default_portal_id";
-		if (!portalId) return;
-		const portalContainer = this.getRootNode().getElementById(portalId) ?? this.getRootNode().querySelector("media-container")?.shadowRoot?.getElementById(portalId) ? this.getRootNode().querySelector("media-container") : void 0;
-		if (!portalContainer) return;
-		this.#portal = document.createElement("div");
-		this.#portal.slot = "portal";
-		this.#portal.id = uniqueId();
-		this.#childrenArray = Array.from(this.children);
-		this.#portal.append(...this.#childrenArray);
-		portalContainer.append(this.#portal);
-	}
-	#cleanupPortal() {
-		if (!this.#portal) return;
-		this.removeGuards();
-		this.append(...this.#childrenArray);
-		this.#portal.remove();
-		this.#portal = null;
-		this.#childrenArray = [];
-	}
-	renderGuards() {
-		if (!this.#portal) return;
-		if (this.#guards.length === 0) {
-			const beforeInsideGuard = createFocusGuard("inside");
-			const afterInsideGuard = createFocusGuard("inside");
-			const beforeOutsideGuard = createFocusGuard("outside");
-			const afterOutsideGuard = createFocusGuard("outside");
-			beforeOutsideGuard.addEventListener("focus", (event) => {
-				if (this.#portal && isOutsideEvent(event, this.#portal)) beforeInsideGuard.focus();
-				else getPreviousTabbable(this)?.focus();
-			});
-			afterOutsideGuard.addEventListener("focus", (event) => {
-				if (this.#portal && isOutsideEvent(event, this.#portal)) afterInsideGuard.focus();
-				else getNextTabbable(this)?.focus();
-			});
-			beforeInsideGuard.addEventListener("focus", (event) => {
-				if (this.#portal && isOutsideEvent(event, this.#portal)) getNextTabbable(this.#portal)?.focus();
-				else beforeOutsideGuard.focus();
-			});
-			afterInsideGuard.addEventListener("focus", (event) => {
-				if (this.#portal && isOutsideEvent(event, this.#portal)) getPreviousTabbable(this.#portal)?.focus();
-				else afterOutsideGuard.focus();
-			});
-			this.prepend(beforeOutsideGuard);
-			this.append(afterOutsideGuard);
-			this.#portal.prepend(beforeInsideGuard);
-			this.#portal.append(afterInsideGuard);
-			this.#guards = [
-				beforeOutsideGuard,
-				afterOutsideGuard,
-				beforeInsideGuard,
-				afterInsideGuard
-			];
-		}
-	}
-	removeGuards() {
-		this.#guards.forEach((guard) => guard.remove());
-		this.#guards = [];
-	}
-};
-function createFocusGuard(dataType) {
-	const focusGuard = document.createElement("span");
-	focusGuard.setAttribute("data-type", dataType);
-	focusGuard.setAttribute("tabindex", "0");
-	focusGuard.toggleAttribute("data-focus-guard", true);
-	return focusGuard;
-}
-var MediaPopoverPositioner = class extends HTMLElement {
-	connectedCallback() {
-		this.style.display = "contents";
-		const popup = this.firstElementChild;
-		if (popup) Object.assign(popup.style, {
-			position: "absolute",
-			top: "0",
-			left: "0"
-		});
-	}
-	get side() {
-		return this.getAttribute("side");
-	}
-	get sideOffset() {
-		return Number.parseInt(this.getAttribute("side-offset") ?? "0", 10);
-	}
-};
-var MediaPopoverPopup = class extends HTMLElement {
-	connectedCallback() {
-		this.setAttribute("role", "dialog");
-		this.setAttribute("aria-modal", "false");
-		this.id = uniqueId();
-	}
-};
-if (!globalThis.customElements.get("media-popover-root")) globalThis.customElements.define("media-popover-root", MediaPopoverRoot);
-if (!globalThis.customElements.get("media-popover-trigger")) globalThis.customElements.define("media-popover-trigger", MediaPopoverTrigger);
-if (!globalThis.customElements.get("media-popover-portal")) globalThis.customElements.define("media-popover-portal", MediaPopoverPortal);
-if (!globalThis.customElements.get("media-popover-positioner")) globalThis.customElements.define("media-popover-positioner", MediaPopoverPositioner);
-if (!globalThis.customElements.get("media-popover-popup")) globalThis.customElements.define("media-popover-popup", MediaPopoverPopup);
-const Popover = {
-	Root: MediaPopoverRoot,
-	Trigger: MediaPopoverTrigger,
-	Portal: MediaPopoverPortal,
-	Positioner: MediaPopoverPositioner,
-	Popup: MediaPopoverPopup
-};
+if (!globalThis.customElements.get("media-popover")) globalThis.customElements.define("media-popover", Popover);
 
 //#endregion
 //#region src/components/media-time-slider.ts
@@ -765,11 +629,11 @@ var TimeSliderThumbBase = class extends HTMLElement {
 		if (props["data-orientation"] === "horizontal") {
 			this.style.left = "var(--slider-fill, 0%)";
 			this.style.top = "50%";
-			this.style.transform = "translate(-50%, -50%)";
+			this.style.translate = "-50% -50%";
 		} else {
 			this.style.bottom = "var(--slider-fill, 0%)";
 			this.style.left = "50%";
-			this.style.transform = "translate(-50%, 50%)";
+			this.style.translate = "-50% 50%";
 		}
 	}
 };
@@ -834,21 +698,23 @@ var MediaTooltipRoot = class extends HTMLElement {
 	#hoverTimeout = null;
 	#cleanup = null;
 	#arrowElement = null;
-	#mousePosition = {
+	#pointerPosition = {
 		x: 0,
 		y: 0
 	};
 	#transitionStatus = "initial";
 	constructor() {
 		super();
-		this.addEventListener("mouseenter", this);
-		this.addEventListener("mouseleave", this);
-		this.addEventListener("mousemove", this);
+		if (globalThis.matchMedia?.("(hover: hover)")?.matches) {
+			this.addEventListener("pointerenter", this);
+			this.addEventListener("pointerleave", this);
+			this.addEventListener("pointermove", this);
+		}
 	}
 	handleEvent(event) {
-		if (event.type === "mouseenter") this.#handleMouseEnter();
-		else if (event.type === "mouseleave") this.#handleMouseLeave();
-		else if (event.type === "mousemove") this.#handleMouseMove(event);
+		if (event.type === "pointerenter") this.#handlePointerEnter();
+		else if (event.type === "pointerleave") this.#handlePointerLeave(event);
+		else if (event.type === "pointermove") this.#handlePointerMove(event);
 	}
 	connectedCallback() {
 		this.#updateVisibility();
@@ -944,31 +810,31 @@ var MediaTooltipRoot = class extends HTMLElement {
 					width: 0,
 					height: 0,
 					top: triggerRect.top,
-					right: this.#mousePosition.x,
+					right: this.#pointerPosition.x,
 					bottom: triggerRect.bottom,
-					left: this.#mousePosition.x,
-					x: this.#mousePosition.x,
+					left: this.#pointerPosition.x,
+					x: this.#pointerPosition.x,
 					y: triggerRect.top
 				};
 				else if (this.trackCursorAxis === "y") return {
 					width: 0,
 					height: 0,
-					top: this.#mousePosition.y,
+					top: this.#pointerPosition.y,
 					right: triggerRect.right,
-					bottom: this.#mousePosition.y,
+					bottom: this.#pointerPosition.y,
 					left: triggerRect.left,
 					x: triggerRect.left,
-					y: this.#mousePosition.y
+					y: this.#pointerPosition.y
 				};
 				else return {
 					width: 0,
 					height: 0,
-					top: this.#mousePosition.y,
-					right: this.#mousePosition.x,
-					bottom: this.#mousePosition.y,
-					left: this.#mousePosition.x,
-					x: this.#mousePosition.x,
-					y: this.#mousePosition.y
+					top: this.#pointerPosition.y,
+					right: this.#pointerPosition.x,
+					bottom: this.#pointerPosition.y,
+					left: this.#pointerPosition.x,
+					x: this.#pointerPosition.x,
+					y: this.#pointerPosition.y
 				};
 			} } : trigger, popup, {
 				placement,
@@ -1000,21 +866,21 @@ var MediaTooltipRoot = class extends HTMLElement {
 			this.#hoverTimeout = null;
 		}
 	}
-	#handleMouseEnter() {
+	#handlePointerEnter() {
 		this.#clearHoverTimeout();
 		this.#hoverTimeout = globalThis.setTimeout(() => {
 			this.#setOpen(true);
 		}, this.delay);
 	}
-	#handleMouseLeave() {
+	#handlePointerLeave(_event) {
 		this.#clearHoverTimeout();
 		this.#hoverTimeout = globalThis.setTimeout(() => {
 			this.#setOpen(false);
 		}, this.closeDelay);
 	}
-	#handleMouseMove(event) {
+	#handlePointerMove(event) {
 		if (this.trackCursorAxis) {
-			this.#mousePosition = {
+			this.#pointerPosition = {
 				x: event.clientX,
 				y: event.clientY
 			};
@@ -1245,11 +1111,11 @@ var VolumeSliderThumbBase = class extends HTMLElement {
 		if (props["data-orientation"] === "horizontal") {
 			this.style.left = "var(--slider-fill, 0%)";
 			this.style.top = "50%";
-			this.style.transform = "translate(-50%, -50%)";
+			this.style.translate = "-50% -50%";
 		} else {
 			this.style.bottom = "var(--slider-fill, 0%)";
 			this.style.left = "50%";
-			this.style.transform = "translate(-50%, 50%)";
+			this.style.translate = "-50% 50%";
 		}
 	}
 };
@@ -1455,4 +1321,4 @@ if (!customElements.get("media-skin")) customElements.define("media-skin", Media
 
 //#endregion
 export { Tooltip as a, PlayButton as c, DurationDisplay as d, CurrentTimeDisplay as f, VolumeSlider$1 as i, MuteButton as l, MediaProvider as n, TimeSlider$1 as o, toConnectedHTMLComponent as p, MediaContainer as r, Popover as s, MediaSkin as t, FullscreenButton as u };
-//# sourceMappingURL=media-skin-BlXPC9wG.js.map
+//# sourceMappingURL=media-skin-DR8zj-LV.js.map