@videojs/html 10.0.0-beta.2 → 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 });
@@ -584,6 +581,10 @@ async function exitFullscreen() {
 
 //#endregion
 //#region ../core/dist/dev/dom/presentation/pip.js
+function resolveMediaTarget(media) {
+	const target = media.target;
+	return target instanceof HTMLMediaElement ? target : media;
+}
 /**
 * Check if Picture-in-Picture is supported on this platform.
 *
@@ -601,8 +602,9 @@ function isPictureInPictureEnabled() {
 * Check if Picture-in-Picture is currently active for a media element.
 */
 function isPictureInPictureElement(media) {
-	if (document.pictureInPictureElement === media) return true;
-	return media.webkitPresentationMode === "picture-in-picture";
+	const target = resolveMediaTarget(media);
+	if (document.pictureInPictureElement === target) return true;
+	return target.webkitPresentationMode === "picture-in-picture";
 }
 /**
 * Request Picture-in-Picture mode.
@@ -611,7 +613,7 @@ function isPictureInPictureElement(media) {
 * WebKit presentation mode.
 */
 async function requestPictureInPicture(media) {
-	const video = media;
+	const video = resolveMediaTarget(media);
 	if (isFunction(video.requestPictureInPicture)) {
 		await video.requestPictureInPicture();
 		return;
@@ -629,13 +631,14 @@ async function requestPictureInPicture(media) {
 * WebKit presentation mode.
 */
 async function exitPictureInPicture(media) {
-	if (document.pictureInPictureElement && isFunction(document.exitPictureInPicture)) {
+	if (isFunction(document.exitPictureInPicture)) try {
 		await document.exitPictureInPicture();
 		return;
-	}
+	} catch {}
 	if (media) {
-		const video = media;
-		if (video.webkitPresentationMode === "picture-in-picture" && isFunction(video.webkitSetPresentationMode)) {
+		const video = resolveMediaTarget(media);
+		const mode = video.webkitPresentationMode;
+		if (isFunction(video.webkitSetPresentationMode) && (!mode || mode === "picture-in-picture")) {
 			video.webkitSetPresentationMode("inline");
 			return;
 		}
@@ -1295,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();
@@ -1319,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
@@ -1345,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;
 }