@videojs/html 10.0.0-beta.21 → 10.0.0-beta.23

package/cdn/{create-player-Bi6WUwDZ.js → create-player-B-gVAMdr.js}

@@ -1,7 +1,7 @@
 import { t as listen } from "./listen-CJT7C4kM.js";
-import { a as ContextRequestEvent, n as mediaContext, r as playerContext, t as containerContext } from "./context-0rI_P6jf.js";
-import { t as anyAbortSignal } from "./abort-DsTff8mS.js";
-import { t as shallowEqual } from "./shallow-equal-Daj3-_LC.js";
+import { a as isUndefined, c as playerContext, i as isObject, n as isNull, o as containerContext, s as mediaContext, t as isFunction, u as ContextRequestEvent } from "./predicate-BOcV_HDG.js";
+import { t as anyAbortSignal } from "./abort-DQxwCs92.js";
+import { t as shallowEqual } from "./shallow-equal-DSpD9PMp.js";
 
 //#region ../utils/dist/dom/event.js
 /** Resolve the deepest event target, preferring composedPath for shadow DOM. */
@@ -31,7 +31,7 @@ function onEvent(target, type, options) {
 
 //#endregion
 //#region ../utils/dist/dom/interactive.js
-const INTERACTIVE_SELECTOR = "button,input,select,textarea,a[href],[role=\"slider\"],[role=\"button\"]";
+const INTERACTIVE_SELECTOR = "button,input,select,textarea,a[href],[role=\"slider\"],[role=\"button\"],[data-interactive]";
 const EDITABLE_SELECTOR = [
 	"textarea",
 	"select",
@@ -219,8 +219,8 @@ var ReactiveElement = class extends HTMLElement {
 	static get observedAttributes() {
 		return [...resolve(this).attrToProp.keys()];
 	}
-	#controllers = /* @__PURE__ */ new Set();
-	#changedProperties = /* @__PURE__ */ new Map();
+	#controllers;
+	#changedProperties;
 	#instanceProperties;
 	/**
 	* Promise that gates the first update until `connectedCallback`. Also
@@ -231,6 +231,8 @@ var ReactiveElement = class extends HTMLElement {
 	#updatePromise;
 	constructor() {
 		super();
+		this.#controllers = /* @__PURE__ */ new Set();
+		this.#changedProperties = /* @__PURE__ */ new Map();
 		this.isUpdatePending = false;
 		this.hasUpdated = false;
 		this.#updatePromise = new Promise((res) => this.enableUpdating = res);
@@ -734,27 +736,6 @@ var MediaContainerElement = class extends ContainerMixin(MediaElement) {
 	};
 };
 
-//#endregion
-//#region ../utils/dist/predicate/predicate.js
-function isNumber(value) {
-	return typeof value === "number";
-}
-function isFunction(value) {
-	return typeof value === "function";
-}
-function isNull(value) {
-	return value === null;
-}
-function isUndefined(value) {
-	return typeof value === "undefined";
-}
-/**
-* Check if a value is an object, excluding null.
-*/
-function isObject(value) {
-	return value !== null && typeof value === "object";
-}
-
 //#endregion
 //#region ../store/dist/dev/core/abort-controller-registry.js
 var AbortControllerRegistry = class {
@@ -1061,6 +1042,15 @@ function isMediaErrorCapable(value) {
 function isMediaTextTrackCapable(value) {
 	return isObject(value) && "textTracks" in value;
 }
+function isMediaRemotePlaybackCapable(value) {
+	return isObject(value) && "remote" in value && isObject(value.remote);
+}
+function isMediaStreamTypeCapable(value) {
+	return isObject(value) && "streamType" in value;
+}
+function isMediaLiveCapable(value) {
+	return isObject(value) && "liveEdgeStart" in value && "targetLiveWindow" in value;
+}
 function isQuerySelectorAllCapable(value) {
 	return isObject(value) && "querySelectorAll" in value && isFunction(value.querySelectorAll);
 }
@@ -1217,6 +1207,24 @@ function getActiveRegions(bindings, type, pointerType) {
 	return regions;
 }
 
+//#endregion
+//#region ../core/dist/dev/dom/presentation/remote-playback.js
+function resolveRemote(media) {
+	const target = media;
+	if (isObject(target.remote) && "state" in target.remote && "prompt" in target.remote) return target.remote;
+}
+function isRemotePlaybackConnected(media) {
+	return resolveRemote(media)?.state === "connected";
+}
+function isRemotePlaybackConnecting(media) {
+	return resolveRemote(media)?.state === "connecting";
+}
+async function requestRemotePlayback(media) {
+	const remote = resolveRemote(media);
+	if (!remote) throw new DOMException("Remote playback not supported", "NotSupportedError");
+	return remote.prompt();
+}
+
 //#endregion
 //#region ../core/dist/dev/dom/store/features/controls.js
 const IDLE_DELAY = 2e3;
@@ -1242,7 +1250,7 @@ const controlsFeature = definePlayerFeature({
 			return;
 		}
 		const computeVisible = (userActive) => {
-			return userActive || media.paused;
+			return userActive || media.paused || isRemotePlaybackConnected(media) || isRemotePlaybackConnecting(media);
 		};
 		let idleTimer;
 		function clearIdle() {
@@ -1298,6 +1306,15 @@ const controlsFeature = definePlayerFeature({
 		listen(media, "play", onPlaybackChange, { signal });
 		listen(media, "pause", onPlaybackChange, { signal });
 		listen(media, "ended", onPlaybackChange, { signal });
+		if (isMediaRemotePlaybackCapable(media)) {
+			const onCastChange = () => {
+				const { userActive } = get();
+				set({ controlsVisible: computeVisible(userActive) });
+			};
+			listen(media.remote, "connect", onCastChange, { signal });
+			listen(media.remote, "connecting", onCastChange, { signal });
+			listen(media.remote, "disconnect", onCastChange, { signal });
+		}
 		signal.addEventListener("abort", clearIdle, { once: true });
 		scheduleIdle();
 	}
@@ -1327,25 +1344,26 @@ const errorFeature = definePlayerFeature({
 function isFullscreenEnabled() {
 	const doc = document;
 	if (doc.fullscreenEnabled || doc.webkitFullscreenEnabled) return true;
-	return isFunction(document.createElement("video").webkitEnterFullscreen);
+	return isFunction(document.createElement("video").webkitSetPresentationMode);
 }
 function getFullscreenElement() {
 	const doc = document;
 	return doc.fullscreenElement ?? doc.webkitFullscreenElement ?? null;
 }
-function isFullscreenElement(container, media) {
-	if (media instanceof HTMLMediaElement) {
-		const video = media;
-		if (video.webkitDisplayingFullscreen && video.webkitPresentationMode === "fullscreen") return true;
-	}
-	const target = container ?? media;
-	if (getFullscreenElement() === target) return true;
-	if (target instanceof Element) try {
-		return target.matches(":fullscreen");
+function matchesFullscreen(element) {
+	if (!(element instanceof Element)) return false;
+	try {
+		return element.matches(":fullscreen");
 	} catch {
 		return false;
 	}
-	return false;
+}
+function isFullscreen(container, media) {
+	if (media.webkitPresentationMode === "fullscreen") return true;
+	const fullscreenElement = getFullscreenElement();
+	if (fullscreenElement && (fullscreenElement === container || fullscreenElement === media)) return true;
+	if (matchesFullscreen(container) || matchesFullscreen(media)) return true;
+	return media.isFullscreen ?? false;
 }
 async function requestFullscreen(container, media) {
 	const doc = document;
@@ -1354,35 +1372,29 @@ async function requestFullscreen(container, media) {
 		if (isFunction(el.requestFullscreen)) return el.requestFullscreen();
 		if (isFunction(el.webkitRequestFullscreen)) return el.webkitRequestFullscreen();
 	}
-	if (media instanceof HTMLMediaElement) {
-		const video = media;
-		if (isFunction(video.webkitEnterFullscreen)) {
-			video.webkitEnterFullscreen();
-			return;
-		}
-		if (isFunction(media.requestFullscreen)) return media.requestFullscreen();
+	const webkitVideo = media;
+	if (isFunction(webkitVideo.webkitSetPresentationMode)) {
+		webkitVideo.webkitSetPresentationMode("fullscreen");
+		return;
 	}
-	throw new DOMException("Fullscreen not supported", "NotSupportedError");
+	const video = media;
+	if (isFunction(video.requestFullscreen)) return video.requestFullscreen();
 }
 async function exitFullscreen(media) {
 	const doc = document;
-	if (media instanceof HTMLMediaElement) {
-		const video = media;
-		if (isFunction(video.webkitExitFullscreen) && video.webkitDisplayingFullscreen) {
-			video.webkitExitFullscreen();
-			return;
-		}
+	const webkitVideo = media;
+	if (webkitVideo.webkitPresentationMode === "fullscreen" && isFunction(webkitVideo.webkitSetPresentationMode)) {
+		webkitVideo.webkitSetPresentationMode("inline");
+		return;
 	}
 	if (isFunction(doc.exitFullscreen)) return doc.exitFullscreen();
 	if (isFunction(doc.webkitExitFullscreen)) return doc.webkitExitFullscreen();
+	const video = media;
+	if (isFunction(video.exitFullscreen)) return video.exitFullscreen();
 }
 
 //#endregion
 //#region ../core/dist/dev/dom/presentation/pip.js
-function resolveMediaTarget(media) {
-	const target = media.target;
-	return target instanceof HTMLMediaElement ? target : media;
-}
 function isPictureInPictureEnabled() {
 	if (document.pictureInPictureEnabled) {
 		const isSafari = /.*Version\/.*Safari\/.*/.test(navigator.userAgent);
@@ -1391,38 +1403,29 @@ function isPictureInPictureEnabled() {
 	}
 	return isFunction(document.createElement("video").webkitSetPresentationMode);
 }
-function isPictureInPictureElement(media) {
-	const target = resolveMediaTarget(media);
-	if (document.pictureInPictureElement === target) return true;
-	if (target instanceof HTMLVideoElement) return target.webkitPresentationMode === "picture-in-picture";
-	return false;
+function isPictureInPicture(media) {
+	if (media.webkitPresentationMode === "picture-in-picture") return true;
+	if (document.pictureInPictureElement === media) return true;
+	return media.isPictureInPicture ?? false;
 }
 async function requestPictureInPicture(media) {
-	const target = resolveMediaTarget(media);
-	if (!(target instanceof HTMLVideoElement)) throw new DOMException("Picture-in-Picture not supported", "NotSupportedError");
-	const video = target;
-	if (isFunction(video.webkitSetPresentationMode)) {
-		video.webkitSetPresentationMode("picture-in-picture");
+	const webkitVideo = media;
+	if (isFunction(webkitVideo.webkitSetPresentationMode)) {
+		webkitVideo.webkitSetPresentationMode("picture-in-picture");
 		return;
 	}
-	if (isFunction(video.requestPictureInPicture)) {
-		await video.requestPictureInPicture();
-		return;
-	}
-	throw new DOMException("Picture-in-Picture not supported", "NotSupportedError");
+	const video = media;
+	if (isFunction(video.requestPictureInPicture)) return video.requestPictureInPicture();
 }
 async function exitPictureInPicture(media) {
-	if (media) {
-		const target = resolveMediaTarget(media);
-		if (target instanceof HTMLVideoElement) {
-			const video = target;
-			if (isFunction(video.webkitSetPresentationMode) && video.webkitPresentationMode === "picture-in-picture") {
-				video.webkitSetPresentationMode("inline");
-				return;
-			}
-		}
+	const webkitVideo = media;
+	if (webkitVideo.webkitPresentationMode === "picture-in-picture" && isFunction(webkitVideo.webkitSetPresentationMode)) {
+		webkitVideo.webkitSetPresentationMode("inline");
+		return;
 	}
 	if (isFunction(document.exitPictureInPicture)) return document.exitPictureInPicture();
+	const video = media;
+	if (isFunction(video.exitPictureInPicture)) return video.exitPictureInPicture();
 }
 
 //#endregion
@@ -1434,7 +1437,7 @@ const fullscreenFeature = definePlayerFeature({
 		fullscreenAvailability: "unavailable",
 		async requestFullscreen() {
 			const { media, container } = target();
-			if (isPictureInPictureElement(media)) await exitPictureInPicture(media);
+			if (isPictureInPicture(media)) await exitPictureInPicture(media);
 			return requestFullscreen(container, media);
 		},
 		async exitFullscreen() {
@@ -1443,15 +1446,15 @@ const fullscreenFeature = definePlayerFeature({
 		},
 		async toggleFullscreen() {
 			const { media, container } = target();
-			if (isFullscreenElement(container, media)) return exitFullscreen(media);
-			if (isPictureInPictureElement(media)) await exitPictureInPicture(media);
+			if (isFullscreen(container, media)) return exitFullscreen(media);
+			if (isPictureInPicture(media)) await exitPictureInPicture(media);
 			return requestFullscreen(container, media);
 		}
 	}),
 	attach({ target, signal, set }) {
 		const { media, container } = target;
 		set({ fullscreenAvailability: isFullscreenEnabled() ? "available" : "unsupported" });
-		const sync = () => set({ fullscreen: isFullscreenElement(container, media) });
+		const sync = () => set({ fullscreen: isFullscreen(container, media) });
 		sync();
 		listen(document, "fullscreenchange", sync, { signal });
 		listen(document, "webkitfullscreenchange", sync, { signal });
@@ -1459,6 +1462,49 @@ const fullscreenFeature = definePlayerFeature({
 	}
 });
 
+//#endregion
+//#region ../core/dist/dev/dom/store/features/live.js
+/**
+* Player feature exposing `liveEdgeStart` and `targetLiveWindow` in store
+* state for media that implements `MediaLiveCapability` (currently
+* `HlsMedia` and its delegates).
+*
+* - `liveEdgeStart` — presentation time marking the start of the Live Edge
+*   Window. Playing at the live edge when `currentTime >= liveEdgeStart`.
+*   `NaN` when the stream isn't live or the value is unknown.
+* - `targetLiveWindow` — `0` for standard latency live, `Infinity` for DVR,
+*   `NaN` for on-demand or unknown.
+*
+* Included by the {@link liveVideoFeatures} and {@link liveAudioFeatures}
+* presets; apps can also compose it into a custom preset.
+*
+* @see https://github.com/video-dev/media-ui-extensions/blob/main/proposals/0007-live-edge.md
+*/
+const liveFeature = definePlayerFeature({
+	name: "live",
+	state: () => ({
+		liveEdgeStart: NaN,
+		targetLiveWindow: NaN
+	}),
+	attach({ target, signal, set }) {
+		const { media } = target;
+		if (!isMediaLiveCapable(media)) return;
+		const sync = () => set({
+			liveEdgeStart: media.liveEdgeStart,
+			targetLiveWindow: media.targetLiveWindow
+		});
+		sync();
+		listen(media, "targetlivewindowchange", sync, { signal });
+		listen(media, "streamtypechange", sync, { signal });
+		listen(media, "loadedmetadata", sync, { signal });
+		listen(media, "canplay", sync, { signal });
+		listen(media, "progress", sync, { signal });
+		listen(media, "durationchange", sync, { signal });
+		listen(media, "timeupdate", sync, { signal });
+		listen(media, "emptied", sync, { signal });
+	}
+});
+
 //#endregion
 //#region ../core/dist/dev/dom/store/features/pip.js
 const pipFeature = definePlayerFeature({
@@ -1468,7 +1514,7 @@ const pipFeature = definePlayerFeature({
 		pipAvailability: "unavailable",
 		async requestPictureInPicture() {
 			const { media, container } = target();
-			if (isFullscreenElement(container, media)) await exitFullscreen();
+			if (isFullscreen(container, media)) await exitFullscreen(media);
 			return requestPictureInPicture(media);
 		},
 		async exitPictureInPicture() {
@@ -1477,15 +1523,15 @@ const pipFeature = definePlayerFeature({
 		},
 		async togglePictureInPicture() {
 			const { media, container } = target();
-			if (isPictureInPictureElement(media)) return exitPictureInPicture(media);
-			if (isFullscreenElement(container, media)) await exitFullscreen();
+			if (isPictureInPicture(media)) return exitPictureInPicture(media);
+			if (isFullscreen(container, media)) await exitFullscreen(media);
 			return requestPictureInPicture(media);
 		}
 	}),
 	attach({ target, signal, set }) {
 		const { media } = target;
 		set({ pipAvailability: isPictureInPictureEnabled() ? "available" : "unsupported" });
-		const sync = () => set({ pip: isPictureInPictureElement(media) });
+		const sync = () => set({ pip: isPictureInPicture(media) });
 		sync();
 		listen(media, "enterpictureinpicture", sync, { signal });
 		listen(media, "leavepictureinpicture", sync, { signal });
@@ -1571,6 +1617,39 @@ const playbackRateFeature = definePlayerFeature({
 	}
 });
 
+//#endregion
+//#region ../core/dist/dev/dom/store/features/remote-playback.js
+const remotePlaybackFeature = definePlayerFeature({
+	name: "remotePlayback",
+	state: ({ target }) => ({
+		remotePlaybackState: "disconnected",
+		remotePlaybackAvailability: "unavailable",
+		async toggleRemotePlayback() {
+			const { media, container } = target();
+			if (isRemotePlaybackConnected(media)) return requestRemotePlayback(media);
+			if (isFullscreen(container, media)) await exitFullscreen(media);
+			return requestRemotePlayback(media);
+		}
+	}),
+	attach({ target, signal, set }) {
+		const { media } = target;
+		if (!isMediaRemotePlaybackCapable(media)) return;
+		const syncState = () => set({ remotePlaybackState: media.remote.state });
+		syncState();
+		listen(media.remote, "connect", syncState, { signal });
+		listen(media.remote, "connecting", syncState, { signal });
+		listen(media.remote, "disconnect", syncState, { signal });
+		media.remote.watchAvailability((available) => {
+			set({ remotePlaybackAvailability: available ? "available" : "unavailable" });
+		}).catch(() => {
+			set({ remotePlaybackAvailability: "unsupported" });
+		});
+		signal.addEventListener("abort", () => {
+			media.remote?.cancelWatchAvailability().catch(() => {});
+		});
+	}
+});
+
 //#endregion
 //#region ../core/dist/dev/dom/store/features/source.js
 const sourceFeature = definePlayerFeature({
@@ -1704,22 +1783,31 @@ const timeFeature = definePlayerFeature({
 	attach({ target, signal, set, get }) {
 		const { media } = target;
 		if (!isMediaSeekCapable(media)) return;
+		const resolveDuration = () => {
+			const { duration } = media;
+			if (duration === Number.POSITIVE_INFINITY && isMediaBufferCapable(media)) {
+				const { seekable } = media;
+				return seekable.length > 0 ? seekable.end(seekable.length - 1) : 0;
+			}
+			return Number.isFinite(duration) ? duration : 0;
+		};
 		const sync = () => set({
 			currentTime: media.currentTime,
-			duration: Number.isFinite(media.duration) ? media.duration : 0,
+			duration: resolveDuration(),
 			seeking: media.seeking
 		});
-		const onTimeUpdate = () => {
+		const syncUnlessSeeking = () => {
 			if (get().seeking) return;
 			sync();
 		};
 		sync();
-		listen(media, "timeupdate", onTimeUpdate, { signal });
+		listen(media, "timeupdate", syncUnlessSeeking, { signal });
 		listen(media, "durationchange", sync, { signal });
 		listen(media, "seeking", sync, { signal });
 		listen(media, "seeked", sync, { signal });
 		listen(media, "loadedmetadata", sync, { signal });
 		listen(media, "emptied", sync, { signal });
+		listen(media, "progress", syncUnlessSeeking, { signal });
 	}
 });
 
@@ -1785,6 +1873,7 @@ const videoFeatures = [
 	bufferFeature,
 	fullscreenFeature,
 	pipFeature,
+	remotePlaybackFeature,
 	controlsFeature,
 	textTrackFeature,
 	errorFeature
@@ -2178,5 +2267,5 @@ function createPlayer(config) {
 }
 
 //#endregion
-export { ContextConsumer as A, isFunction as C, MediaContainerElement as D, isUndefined as E, isEditableTarget as M, isInteractiveActivation as N, MediaElement as O, AbortControllerRegistry as S, isNumber as T, getGestureCoordinator as _, backgroundFeatures as a, noop as b, timeFeature as c, playbackRateFeature as d, playbackFeature as f, controlsFeature as g, errorFeature as h, audioFeatures as i, ReactiveElement as j, ContextProvider as k, textTrackFeature as l, fullscreenFeature as m, PlayerController as n, videoFeatures as o, pipFeature as p, SnapshotController as r, volumeFeature as s, createPlayer as t, sourceFeature as u, bufferFeature as v, isNull as w, throwNoTargetError as x, createState as y };
-//# sourceMappingURL=create-player-Bi6WUwDZ.js.map
+export { MediaElement as A, isMediaStreamTypeCapable as C, throwNoTargetError as D, noop as E, isInteractiveActivation as F, ContextConsumer as M, ReactiveElement as N, AbortControllerRegistry as O, isEditableTarget as P, isMediaSeekCapable as S, createState as T, errorFeature as _, backgroundFeatures as a, bufferFeature as b, timeFeature as c, remotePlaybackFeature as d, playbackRateFeature as f, fullscreenFeature as g, liveFeature as h, audioFeatures as i, ContextProvider as j, MediaContainerElement as k, textTrackFeature as l, pipFeature as m, PlayerController as n, videoFeatures as o, playbackFeature as p, SnapshotController as r, volumeFeature as s, createPlayer as t, sourceFeature as u, controlsFeature as v, definePlayerFeature as w, isMediaBufferCapable as x, getGestureCoordinator as y };
+//# sourceMappingURL=create-player-B-gVAMdr.js.map