@videojs/html 10.0.0-beta.3 → 10.0.0-beta.4

package/cdn/background.dev.js

@@ -473,14 +473,11 @@ const controlsFeature = definePlayerFeature({
 			pointerDownTime = Date.now();
 		}
 		function onPointerUp(event) {
-			if (event.pointerType === "touch" && Date.now() - pointerDownTime < TAP_THRESHOLD) if (get().controlsVisible) {
-				clearIdle();
-				set({
-					userActive: false,
-					controlsVisible: computeVisible(false)
-				});
+			if (event.pointerType === "touch" && Date.now() - pointerDownTime < TAP_THRESHOLD) {
+				const isMediaOrContainer = [media, container].includes(event.target);
+				if (get().controlsVisible && isMediaOrContainer) setInactive();
+				else setActive();
 			} else setActive();
-			else setActive();
 		}
 		function onPlaybackChange() {
 			const { userActive } = get();
@@ -492,7 +489,7 @@ const controlsFeature = definePlayerFeature({
 		listen(container, "pointerup", onPointerUp, { signal });
 		listen(container, "keyup", setActive, { signal });
 		listen(container, "focusin", setActive, { signal });
-		listen(container, "pointerleave", setInactive, { signal });
+		listen(container, "mouseleave", setInactive, { signal });
 		listen(media, "play", onPlaybackChange, { signal });
 		listen(media, "pause", onPlaybackChange, { signal });
 		listen(media, "ended", onPlaybackChange, { signal });
@@ -1301,13 +1298,13 @@ function createContainerMixin(context) {
 			connectedCallback() {
 				super.connectedCallback();
 				this.#observer = new MutationObserver((records) => {
-					if (records.some(hasMediaNode)) this.#attachMedia();
+					if (records.some(hasMediaElement)) this.#attachMedia();
 				});
 				this.#observer.observe(this, {
 					childList: true,
 					subtree: true,
 					attributes: true,
-					attributeFilter: ["data-media-element"]
+					attributeFilter: ["name"]
 				});
 				this.addEventListener("slotchange", this.#onSlotChange);
 				this.#attachMedia();
@@ -1325,18 +1322,24 @@ function createContainerMixin(context) {
 			#getSlottedMedia() {
 				const slot = this.querySelector("slot[name=\"media\"]");
 				if (!slot) return null;
-				for (const el of slot.assignedElements({ flatten: true })) if (el instanceof HTMLMediaElement) return el;
+				for (const el of slot.assignedElements({ flatten: true })) if (isMediaElement(el)) return el;
+				return null;
+			}
+			#findMediaElement() {
+				const media = Array.from(this.children).find(isMediaElement);
+				if (media) return media;
 				return null;
 			}
 			#attachMedia() {
 				const store = this.#contextStore ?? this.store;
 				if (!store) return;
-				const media = this.querySelector("video, audio, [data-media-element]") ?? this.#getSlottedMedia();
+				const media = this.querySelector("video, audio") ?? this.#findMediaElement() ?? this.#getSlottedMedia();
 				if (!media) {
 					this.#detach();
 					this.#detach = noop;
 					return;
 				}
+				if (isCustomMediaElement(media)) globalThis.customElements?.upgrade?.(media);
 				const target = {
 					media,
 					container: this
@@ -1351,13 +1354,19 @@ function createContainerMixin(context) {
 		return PlayerContainerElement;
 	};
 }
-function isMediaNode(node) {
-	return node instanceof HTMLMediaElement || node instanceof Element && node.hasAttribute("data-media-element");
+function isMediaElement(node) {
+	return node instanceof HTMLMediaElement || isCustomMediaElement(node);
+}
+function isCustomMediaElement(node) {
+	return node instanceof HTMLElement && (node.localName.endsWith("-audio") || node.localName.endsWith("-video"));
+}
+function isMediaSlotElement(node) {
+	return node instanceof HTMLSlotElement && node.name === "media";
 }
-function hasMediaNode(record) {
-	if (record.type === "attributes" && record.target instanceof Element) return record.target.hasAttribute("data-media-element");
-	for (const node of record.addedNodes) if (isMediaNode(node)) return true;
-	for (const node of record.removedNodes) if (isMediaNode(node)) return true;
+function hasMediaElement(record) {
+	if (isMediaSlotElement(record.target)) return true;
+	for (const node of record.addedNodes) if (isMediaElement(node) || isMediaSlotElement(node)) return true;
+	for (const node of record.removedNodes) if (isMediaElement(node) || isMediaSlotElement(node)) return true;
 	return false;
 }