@videojs/html 10.0.0-beta.11 → 10.0.0-beta.12

package/cdn/{volume-slider-D7BOdSDF.js → volume-slider-BEXiB6_j.js}

@@ -1,7 +1,5 @@
-import { B as applyStyles, C as getAnchorPositionStyle, D as createButton, E as createPopover, F as selectTime, H as tryShowPopover, I as selectVolume, M as selectPlayback, N as selectPlaybackRate, O as selectBuffer, P as selectTextTrack, S as getAnchorNameStyle, T as resolveOffsets, U as supportsAnchorPositioning, V as tryHidePopover, W as createState, _ as getSliderPreviewStyle, a as MediaElement, b as clamp, c as ContextConsumer, d as applyElementProps, f as createTransition, g as getSliderCSSVars, h as ThumbnailCore, i as MediaContainerElement, l as applyStateDataAttrs, m as createThumbnail, n as PlayerController, p as createTooltip, r as SnapshotController, s as ContextProvider, u as logMissingFeature, v as getTimeSliderCSSVars, w as getPopupPositionRect, x as roundToStep, y as createSlider } from "./create-player-AcfnN3li.js";
-import { i as isNumber, o as isUndefined, t as isFunction } from "./predicate-BG-dj_kF.js";
-import { i as createContext, r as playerContext } from "./context-Be8C5kVd.js";
-import { t as safeDefine } from "./safe-define-B8lHgj_K.js";
+import { C as getAnchorPositionStyle, D as createButton, E as createPopover, F as selectPlaybackRate, G as supportsAnchorPositioning, H as applyStyles, I as selectTextTrack, J as isNumber, K as createState, L as selectTime, O as createAlertDialog, P as selectPlayback, R as selectVolume, S as getAnchorNameStyle, T as resolveOffsets, U as tryHidePopover, W as tryShowPopover, Y as isUndefined, _ as getSliderPreviewStyle, a as MediaElement, b as clamp, c as ContextConsumer, d as applyElementProps, f as createTransition, g as getSliderCSSVars, h as ThumbnailCore, i as MediaContainerElement, j as selectError, k as selectBuffer, l as applyStateDataAttrs, m as createThumbnail, n as PlayerController, p as createTooltip, q as isFunction, r as SnapshotController, s as ContextProvider, u as logMissingFeature, v as getTimeSliderCSSVars, w as getPopupPositionRect, x as roundToStep, y as createSlider } from "./create-player-BoPlCSNw.js";
+import { a as createContext, i as playerContext, t as safeDefine } from "./safe-define-D26LrTu4.js";
 
 //#region ../utils/dist/object/defaults.js
 /**
@@ -41,14 +39,33 @@ var shared_default = "media-tooltip-group {\n  display: contents;\n}\n\n/* Fixes
 //#region src/define/skin-mixin.ts
 const STYLES_ID = "__media-styles";
 function ensureRootStyles() {
-	if (document.getElementById(STYLES_ID)) return;
-	const style = document.createElement("style");
+	const doc = globalThis.document;
+	if (!doc || doc.getElementById(STYLES_ID)) return;
+	const style = doc.createElement("style");
 	style.id = STYLES_ID;
 	style.textContent = base_default;
-	document.head.appendChild(style);
+	doc.head.appendChild(style);
 }
-const sharedSheet = new CSSStyleSheet();
-sharedSheet.replaceSync(shared_default);
+function isConstructableStyleSheet(value) {
+	return typeof globalThis.CSSStyleSheet !== "undefined" && value instanceof globalThis.CSSStyleSheet;
+}
+function getStyleText(style) {
+	if (typeof style === "string") return style;
+	return Array.from(style.cssRules).map((rule) => rule.cssText).join("\n");
+}
+function applyShadowStyles(shadowRoot, styles) {
+	if (styles.every(isConstructableStyleSheet) && "adoptedStyleSheets" in shadowRoot) {
+		shadowRoot.adoptedStyleSheets = styles;
+		return;
+	}
+	const doc = shadowRoot.ownerDocument;
+	for (const styleText of styles.map(getStyleText)) {
+		const style = doc.createElement("style");
+		style.textContent = styleText;
+		shadowRoot.appendChild(style);
+	}
+}
+const sharedSheet = createStyles(shared_default);
 /**
 * Mixin for skin elements that renders the template from a static
 * `getTemplateHTML` method into a shadow root. Native `<slot>` elements
@@ -68,18 +85,19 @@ function SkinMixin(BaseClass) {
 			if (!this.shadowRoot) {
 				const ctor = this.constructor;
 				this.attachShadow(ctor.shadowRootOptions);
+				if (ctor.getTemplateHTML) this.shadowRoot.innerHTML = ctor.getTemplateHTML();
 				const sheets = [sharedSheet];
 				if (ctor.styles) sheets.push(ctor.styles);
-				this.shadowRoot.adoptedStyleSheets = sheets;
-				if (ctor.getTemplateHTML) this.shadowRoot.innerHTML = ctor.getTemplateHTML();
+				applyShadowStyles(this.shadowRoot, sheets);
 			}
 		}
 	}
 	return SkinElement;
 }
-/** Create a shared `CSSStyleSheet` from a CSS string. */
+/** Create a constructable stylesheet when available, otherwise return raw CSS. */
 function createStyles(css) {
-	const sheet = new CSSStyleSheet();
+	if (typeof globalThis.CSSStyleSheet === "undefined") return css;
+	const sheet = new globalThis.CSSStyleSheet();
 	sheet.replaceSync(css);
 	return sheet;
 }
@@ -97,6 +115,55 @@ function getTransitionFlags(status) {
 	};
 }
 
+//#endregion
+//#region ../core/dist/dev/core/ui/alert-dialog/alert-dialog-core.js
+var AlertDialogCore = class {
+	static defaultProps = {
+		open: false,
+		defaultOpen: false
+	};
+	/** Accept props for API consistency. Props are consumed by platform layers. */
+	setProps(_props) {}
+	#input = null;
+	#titleId = void 0;
+	#descriptionId = void 0;
+	setInput(input) {
+		this.#input = input;
+	}
+	setTitleId(id) {
+		this.#titleId = id;
+	}
+	setDescriptionId(id) {
+		this.#descriptionId = id;
+	}
+	getState() {
+		const input = this.#input;
+		return {
+			open: input.active,
+			status: input.status,
+			titleId: this.#titleId,
+			descriptionId: this.#descriptionId,
+			...getTransitionFlags(input.status)
+		};
+	}
+	getAttrs(state) {
+		return {
+			role: "alertdialog",
+			"aria-modal": "true",
+			"aria-labelledby": state.titleId,
+			"aria-describedby": state.descriptionId
+		};
+	}
+};
+
+//#endregion
+//#region ../core/dist/dev/core/ui/alert-dialog/alert-dialog-data-attrs.js
+const AlertDialogDataAttrs = {
+	open: "data-open",
+	transitionStarting: "data-starting-style",
+	transitionEnding: "data-ending-style"
+};
+
 //#endregion
 //#region ../core/dist/dev/core/ui/buffering-indicator/buffering-indicator-core.js
 var BufferingIndicatorCore = class BufferingIndicatorCore {
@@ -208,6 +275,13 @@ const ControlsDataAttrs = {
 	userActive: "data-user-active"
 };
 
+//#endregion
+//#region ../core/dist/dev/core/ui/error-dialog/error-dialog-core.js
+/** Error-dialog core: an alert dialog whose open state is driven by media error state. */
+var ErrorDialogCore = class extends AlertDialogCore {
+	setProps() {}
+};
+
 //#endregion
 //#region ../core/dist/dev/core/ui/fullscreen-button/fullscreen-button-core.js
 var FullscreenButtonCore = class FullscreenButtonCore {
@@ -1243,6 +1317,50 @@ var MediaButtonElement = class extends MediaElement {
 	}
 };
 
+//#endregion
+//#region src/ui/alert-dialog/context.ts
+const ALERT_DIALOG_CONTEXT_KEY = Symbol("@videojs/alert-dialog");
+const alertDialogContext = createContext(ALERT_DIALOG_CONTEXT_KEY);
+
+//#endregion
+//#region src/ui/alert-dialog/alert-dialog-close-element.ts
+var AlertDialogCloseElement = class extends MediaElement {
+	constructor(..._args) {
+		super(..._args);
+		this.disabled = false;
+	}
+	static {
+		this.tagName = "media-alert-dialog-close";
+	}
+	static {
+		this.properties = { disabled: { type: Boolean } };
+	}
+	#ctx = new ContextConsumer(this, {
+		context: alertDialogContext,
+		subscribe: true
+	});
+	#disconnect = null;
+	connectedCallback() {
+		super.connectedCallback();
+		this.#disconnect = new AbortController();
+		const buttonProps = createButton({
+			onActivate: () => this.#ctx.value?.close(),
+			isDisabled: () => this.disabled
+		});
+		applyElementProps(this, buttonProps, { signal: this.#disconnect.signal });
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.#disconnect?.abort();
+		this.#disconnect = null;
+	}
+	update(_changed) {
+		super.update(_changed);
+		const ctx = this.#ctx.value;
+		if (ctx) applyStateDataAttrs(this, ctx.state, ctx.stateAttrMap);
+	}
+};
+
 //#endregion
 //#region src/ui/context-part-element.ts
 /**
@@ -1266,6 +1384,119 @@ var ContextPartElement = class extends MediaElement {
 	}
 };
 
+//#endregion
+//#region src/ui/alert-dialog/alert-dialog-description-element.ts
+var AlertDialogDescriptionElement = class extends ContextPartElement {
+	constructor(..._args) {
+		super(..._args);
+		this.consumer = new ContextConsumer(this, {
+			context: alertDialogContext,
+			subscribe: true
+		});
+	}
+	static {
+		this.tagName = "media-alert-dialog-description";
+	}
+	update(changed) {
+		super.update(changed);
+		const descriptionId = this.consumer.value?.state.descriptionId;
+		if (descriptionId) this.id = descriptionId;
+	}
+};
+
+//#endregion
+//#region src/ui/alert-dialog/alert-dialog-title-element.ts
+var AlertDialogTitleElement = class extends ContextPartElement {
+	constructor(..._args) {
+		super(..._args);
+		this.consumer = new ContextConsumer(this, {
+			context: alertDialogContext,
+			subscribe: true
+		});
+	}
+	static {
+		this.tagName = "media-alert-dialog-title";
+	}
+	update(changed) {
+		super.update(changed);
+		const titleId = this.consumer.value?.state.titleId;
+		if (titleId) this.id = titleId;
+	}
+};
+
+//#endregion
+//#region src/ui/error-dialog/error-dialog-element.ts
+const FALLBACK_MESSAGE = "An error occurred. Please try again.";
+let idCounter = 0;
+var ErrorDialogElement = class extends MediaElement {
+	static {
+		this.tagName = "media-error-dialog";
+	}
+	#core = new ErrorDialogCore();
+	#provider = new ContextProvider(this, { context: alertDialogContext });
+	#titleId = `vjs-error-dialog-title-${idCounter++}`;
+	#descriptionId = `vjs-error-dialog-desc-${idCounter++}`;
+	#errorState = new PlayerController(this, playerContext, selectError);
+	#dialog = null;
+	#snapshot = null;
+	#lastErrorMessage = null;
+	constructor() {
+		super();
+		this.#core.setTitleId(this.#titleId);
+		this.#core.setDescriptionId(this.#descriptionId);
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		this.#dialog = createAlertDialog({
+			transition: createTransition(),
+			onOpenChange: (nextOpen) => {
+				if (!nextOpen) this.#errorState.value?.dismissError();
+			}
+		});
+		this.#dialog.setElement(this);
+		if (this.#snapshot) this.#snapshot.track(this.#dialog.input);
+		else this.#snapshot = new SnapshotController(this, this.#dialog.input);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.#dialog?.destroy();
+		this.#dialog = null;
+	}
+	willUpdate(_changed) {
+		super.willUpdate(_changed);
+		if (!this.#dialog) return;
+		const errorState = this.#errorState.value;
+		const hasError = Boolean(errorState?.error);
+		const { active: isOpen } = this.#dialog.input.current;
+		if (errorState?.error) this.#lastErrorMessage = errorState.error.message?.trim() || null;
+		const desc = this.querySelector("media-alert-dialog-description");
+		if (desc) desc.textContent = this.#lastErrorMessage ?? FALLBACK_MESSAGE;
+		if (hasError && !isOpen) this.#dialog.open();
+		else if (!hasError && isOpen) this.#dialog.close();
+	}
+	update(_changed) {
+		super.update(_changed);
+		if (!this.#dialog) return;
+		const input = this.#dialog.input.current;
+		this.#core.setInput(input);
+		const state = this.#core.getState();
+		applyElementProps(this, this.#core.getAttrs(state));
+		applyStateDataAttrs(this, state, AlertDialogDataAttrs);
+		this.#provider.setValue({
+			state,
+			stateAttrMap: AlertDialogDataAttrs,
+			close: () => this.#dialog?.close()
+		});
+	}
+};
+
+//#endregion
+//#region src/define/ui/error-dialog.ts
+safeDefine(ErrorDialogElement);
+safeDefine(AlertDialogCloseElement);
+safeDefine(AlertDialogDescriptionElement);
+safeDefine(AlertDialogTitleElement);
+
 //#endregion
 //#region src/ui/mute-button/mute-button-element.ts
 var MuteButtonElement = class extends MediaButtonElement {
@@ -2456,4 +2687,4 @@ safeDefine(SliderValueElement);
 
 //#endregion
 export { PiPButtonDataAttrs as a, FullscreenButtonCore as c, CaptionsButtonDataAttrs as d, CaptionsButtonCore as f, createStyles as g, SkinMixin as h, PosterCore as i, ControlsDataAttrs as l, BufferingIndicatorCore as m, MediaButtonElement as n, PiPButtonCore as o, BufferingIndicatorDataAttrs as p, PosterDataAttrs as r, FullscreenButtonDataAttrs as s, ContextPartElement as t, ControlsCore as u };
-//# sourceMappingURL=volume-slider-D7BOdSDF.js.map
+//# sourceMappingURL=volume-slider-BEXiB6_j.js.map