@videojs/html 10.0.0-rc.1 → 10.0.0-rc.3

package/dist/default/ui/dialog/popup.js

@@ -0,0 +1,42 @@
+import { dialogContext } from "./context.js";
+import { ContextPartElement } from "../context-part-element.js";
+import { applyElementProps } from "@videojs/core/dom";
+import { ContextConsumer } from "@videojs/element/context";
+//#region src/ui/dialog/popup.ts
+/** Semantic popup that owns focus management and dialog transition completion. */
+var DialogPopupElement = class extends ContextPartElement {
+	constructor(..._args) {
+		super(..._args);
+		this.consumer = new ContextConsumer(this, {
+			context: dialogContext,
+			subscribe: true
+		});
+		this.#dialog = null;
+	}
+	static {
+		this.tagName = "media-dialog-popup";
+	}
+	#dialog;
+	disconnectedCallback() {
+		this.#dialog?.setPopupElement(null);
+		this.#dialog = null;
+		super.disconnectedCallback();
+	}
+	update(changed) {
+		super.update(changed);
+		const ctx = this.consumer.value;
+		if (!ctx) return;
+		if (this.#dialog !== ctx.dialog) {
+			this.#dialog?.setPopupElement(null);
+			this.#dialog = ctx.dialog;
+			this.#dialog.setPopupElement(this);
+		}
+		applyElementProps(this, {
+			id: ctx.popupId,
+			tabIndex: -1,
+			...ctx.popupAttrs
+		});
+	}
+};
+//#endregion
+export { DialogPopupElement };

package/dist/default/ui/dialog/title.js

@@ -0,0 +1,24 @@
+import { dialogContext } from "./context.js";
+import { ContextPartElement } from "../context-part-element.js";
+import { ContextConsumer } from "@videojs/element/context";
+//#region src/ui/dialog/title.ts
+/** Text that labels its owning dialog. The element takes the `id` that the popup's `aria-labelledby` points to. */
+var DialogTitleElement = class extends ContextPartElement {
+	constructor(..._args) {
+		super(..._args);
+		this.consumer = new ContextConsumer(this, {
+			context: dialogContext,
+			subscribe: true
+		});
+	}
+	static {
+		this.tagName = "media-dialog-title";
+	}
+	update(changed) {
+		super.update(changed);
+		const titleId = this.consumer.value?.state.titleId;
+		if (titleId) this.id = titleId;
+	}
+};
+//#endregion
+export { DialogTitleElement };

package/dist/default/ui/error-dialog/element.js

@@ -0,0 +1,120 @@
+import { i18nContext } from "../../i18n/context.js";
+import { I18nController } from "../../i18n/controller.js";
+import { containerContext, playerContext } from "../../player/context.js";
+import { PlayerController } from "../../player/controller.js";
+import { UIElement } from "../ui-element.js";
+import { dialogContext } from "../dialog/context.js";
+import { ErrorDialogCore, ErrorDialogDataAttrs, getErrorDialogDismissText, getErrorDialogTitleText, getErrorDialogUnexpectedText, resolveErrorDialogDescription } from "@videojs/core";
+import { applyStateDataAttrs, createDialog, createTransition, selectError } from "@videojs/core/dom";
+import { ContextConsumer, ContextProvider } from "@videojs/element/context";
+import { translateText } from "@videojs/core/i18n";
+import { SnapshotController } from "@videojs/store/html";
+//#region src/ui/error-dialog/element.ts
+let idCounter = 0;
+function hasAuthoredContent(host) {
+	return Array.from(host.childNodes).some((node) => !!node.textContent?.trim());
+}
+var ErrorDialogElement = class extends UIElement {
+	static {
+		this.tagName = "media-error-dialog";
+	}
+	#core = new ErrorDialogCore();
+	#provider = new ContextProvider(this, { context: dialogContext });
+	#popupId = `vjs-error-dialog-popup-${idCounter++}`;
+	#titleId = `vjs-error-dialog-title-${idCounter++}`;
+	#descriptionId = `vjs-error-dialog-desc-${idCounter++}`;
+	#errorState = new PlayerController(this, playerContext, selectError);
+	#i18n = new I18nController(this, i18nContext);
+	#container = new ContextConsumer(this, {
+		context: containerContext,
+		subscribe: true
+	});
+	#dialog = null;
+	#snapshot = null;
+	#modalitySnapshot = null;
+	#lastError = null;
+	#lastDescription = null;
+	#seenCopyParts = /* @__PURE__ */ new WeakSet();
+	#authoredCopyParts = /* @__PURE__ */ new WeakSet();
+	constructor() {
+		super();
+		this.#core.setTitleId(this.#titleId);
+		this.#core.setDescriptionId(this.#descriptionId);
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		if (this.destroyed) return;
+		this.#dialog = createDialog({
+			transition: createTransition(),
+			onOpenChange: (nextOpen) => {
+				if (!nextOpen) this.#errorState.value?.dismissError();
+			}
+		});
+		if (this.#snapshot) this.#snapshot.track(this.#dialog.input);
+		else this.#snapshot = new SnapshotController(this, this.#dialog.input);
+		if (this.#modalitySnapshot) this.#modalitySnapshot.track(this.#dialog.modality);
+		else this.#modalitySnapshot = new SnapshotController(this, this.#dialog.modality);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.#dialog?.destroy();
+		this.#dialog = null;
+	}
+	willUpdate(_changed) {
+		super.willUpdate(_changed);
+		if (!this.#dialog) return;
+		this.#dialog.setInteractionRoot(this.#container.value?.container ?? null);
+		const errorState = this.#errorState.value;
+		const hasError = Boolean(errorState?.error);
+		const { active: isOpen } = this.#dialog.input.current;
+		if (errorState?.error) this.#lastError = errorState.error;
+		const errorForCopy = errorState?.error ?? (isOpen ? this.#lastError : null);
+		this.#syncDialogCopy(errorForCopy);
+		if (!hasError && !isOpen) {
+			this.#lastError = null;
+			this.#lastDescription = null;
+		}
+		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);
+		this.#core.setDocumentModal(this.#dialog.modality.current.documentModal);
+		const state = this.#core.getState();
+		applyStateDataAttrs(this, state, ErrorDialogDataAttrs);
+		this.#provider.setValue({
+			state,
+			stateAttrMap: ErrorDialogDataAttrs,
+			dialog: this.#dialog,
+			popupId: this.#popupId,
+			popupAttrs: this.#core.getPopupAttrs(state),
+			close: () => this.#dialog?.close()
+		});
+	}
+	#syncDialogCopy(error) {
+		const t = this.#i18n.value;
+		const title = this.querySelector("media-dialog-title");
+		if (title && !this.#hasAuthoredCopy(title)) title.textContent = translateText(getErrorDialogTitleText(), t);
+		const desc = this.querySelector("media-dialog-description");
+		if (desc && !this.#hasAuthoredCopy(desc)) {
+			const description = error ? resolveErrorDialogDescription(error) : null;
+			if (description) this.#lastDescription = description;
+			const copy = description ?? this.#lastDescription;
+			desc.textContent = copy ? translateText(copy, t) : translateText(getErrorDialogUnexpectedText(), t);
+		}
+		const close = this.querySelector("media-dialog-close");
+		if (close && !this.#hasAuthoredCopy(close)) close.textContent = translateText(getErrorDialogDismissText(), t);
+	}
+	#hasAuthoredCopy(el) {
+		if (!this.#seenCopyParts.has(el)) {
+			this.#seenCopyParts.add(el);
+			if (hasAuthoredContent(el)) this.#authoredCopyParts.add(el);
+		}
+		return this.#authoredCopyParts.has(el);
+	}
+};
+//#endregion
+export { ErrorDialogElement };

package/dist/default/ui/fullscreen-button/element.js

@@ -0,0 +1,30 @@
+import { containerContext, playerContext } from "../../player/context.js";
+import { PlayerController } from "../../player/controller.js";
+import { MediaButtonElement } from "../media-button-element.js";
+import { FullscreenButtonCore, FullscreenButtonDataAttrs } from "@videojs/core";
+import { selectFullscreen } from "@videojs/core/dom";
+import { ContextConsumer } from "@videojs/element/context";
+//#region src/ui/fullscreen-button/element.ts
+var FullscreenButtonElement = class extends MediaButtonElement {
+	constructor(..._args) {
+		super(..._args);
+		this.core = new FullscreenButtonCore();
+		this.stateAttrMap = FullscreenButtonDataAttrs;
+		this.mediaState = new PlayerController(this, playerContext, selectFullscreen);
+		this.hotkeyAction = "toggleFullscreen";
+		this.#container = new ContextConsumer(this, {
+			context: containerContext,
+			subscribe: true
+		});
+	}
+	static {
+		this.tagName = "media-fullscreen-button";
+	}
+	#container;
+	activate(state, _event, source) {
+		if (source === "pointer") this.#container.value?.container?.focus({ preventScroll: true });
+		return this.core.toggle(state);
+	}
+};
+//#endregion
+export { FullscreenButtonElement };

package/dist/default/ui/gesture/element.js

@@ -0,0 +1,87 @@
+import { containerContext, playerContext } from "../../player/context.js";
+import { PlayerController } from "../../player/controller.js";
+import { UIElement } from "../ui-element.js";
+import { createDoubleTapGesture, createTapGesture, getGestureActionValue, resolveGestureAction } from "@videojs/core/dom";
+import { ContextConsumer } from "@videojs/element/context";
+//#region src/ui/gesture/element.ts
+var GestureElement = class extends UIElement {
+	constructor(..._args) {
+		super(..._args);
+		this.type = "";
+		this.action = "";
+		this.value = void 0;
+		this.pointer = void 0;
+		this.region = void 0;
+		this.disabled = false;
+		this.#player = new PlayerController(this, playerContext);
+		this.#container = new ContextConsumer(this, {
+			context: containerContext,
+			callback: () => this.requestUpdate(),
+			subscribe: true
+		});
+		this.#cleanup = null;
+	}
+	static {
+		this.tagName = "media-gesture";
+	}
+	static {
+		this.properties = {
+			type: { type: String },
+			action: { type: String },
+			value: { type: Number },
+			pointer: { type: String },
+			region: { type: String },
+			disabled: { type: Boolean }
+		};
+	}
+	#player;
+	#container;
+	#cleanup;
+	connectedCallback() {
+		super.connectedCallback();
+		this.style.display = "none";
+		this.#register();
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.#unregister();
+	}
+	update(changed) {
+		super.update(changed);
+		if (this.isConnected) {
+			this.#unregister();
+			this.#register();
+		}
+	}
+	#register() {
+		const store = this.#player.value;
+		const container = this.#container.value?.container;
+		if (!this.type || !this.action || !store || !container) return;
+		const resolver = resolveGestureAction(this.action);
+		if (!resolver) return;
+		const { value, region } = this;
+		const actionValue = getGestureActionValue(this.action, region, value);
+		const onActivate = (event) => {
+			resolver({
+				store,
+				value: actionValue,
+				event
+			});
+		};
+		const options = {
+			pointer: this.pointer,
+			region,
+			disabled: this.disabled,
+			action: this.action,
+			value: actionValue
+		};
+		if (this.type === "doubletap") this.#cleanup = createDoubleTapGesture(container, onActivate, options);
+		else if (this.type === "tap") this.#cleanup = createTapGesture(container, onActivate, options);
+	}
+	#unregister() {
+		this.#cleanup?.();
+		this.#cleanup = null;
+	}
+};
+//#endregion
+export { GestureElement };

package/dist/default/ui/hotkey/aria-key-shortcuts-controller.js

@@ -62,5 +62,3 @@ var AriaKeyShortcutsController = class {
 };
 //#endregion
 export { AriaKeyShortcutsController };
-
-//# sourceMappingURL=aria-key-shortcuts-controller.js.map

package/dist/default/ui/hotkey/element.js

@@ -0,0 +1,83 @@
+import { containerContext, playerContext } from "../../player/context.js";
+import { PlayerController } from "../../player/controller.js";
+import { UIElement } from "../ui-element.js";
+import { createHotkey, isHotkeyToggleAction, resolveHotkeyAction } from "@videojs/core/dom";
+import { ContextConsumer } from "@videojs/element/context";
+//#region src/ui/hotkey/element.ts
+var HotkeyElement = class extends UIElement {
+	constructor(..._args) {
+		super(..._args);
+		this.keys = "";
+		this.action = "";
+		this.value = void 0;
+		this.disabled = false;
+		this.target = "player";
+		this.#player = new PlayerController(this, playerContext);
+		this.#container = new ContextConsumer(this, {
+			context: containerContext,
+			callback: () => this.requestUpdate(),
+			subscribe: true
+		});
+		this.#cleanup = null;
+	}
+	static {
+		this.tagName = "media-hotkey";
+	}
+	static {
+		this.properties = {
+			keys: { type: String },
+			action: { type: String },
+			value: { type: Number },
+			disabled: { type: Boolean },
+			target: { type: String }
+		};
+	}
+	#player;
+	#container;
+	#cleanup;
+	connectedCallback() {
+		super.connectedCallback();
+		this.style.display = "none";
+		this.#register();
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.#unregister();
+	}
+	update(changed) {
+		super.update(changed);
+		if (this.isConnected) {
+			this.#unregister();
+			this.#register();
+		}
+	}
+	#register() {
+		const store = this.#player.value;
+		const container = this.#container.value?.container;
+		if (!this.keys || !this.action || !store || !container) return;
+		const resolver = resolveHotkeyAction(this.action);
+		if (!resolver) return;
+		const { value, action } = this;
+		this.#cleanup = createHotkey(container, {
+			keys: this.keys,
+			action,
+			value,
+			target: this.target,
+			disabled: this.disabled,
+			repeatable: !isHotkeyToggleAction(action),
+			onActivate: (_event, key) => {
+				resolver({
+					store,
+					key,
+					value
+				});
+			}
+		});
+	}
+	#unregister() {
+		this.#cleanup?.();
+		this.#cleanup = null;
+	}
+};
+//#endregion
+export { HotkeyElement };

package/dist/default/ui/input-indicator/element.js

@@ -0,0 +1,114 @@
+import { containerContext, playerContext } from "../../player/context.js";
+import { PlayerController } from "../../player/controller.js";
+import { UIElement } from "../ui-element.js";
+import { getRenderedIndicatorState, isIndicatorPresent } from "@videojs/core";
+import { getIndicatorVisibilityCoordinator, getMediaSnapshot, subscribeToInputActions } from "@videojs/core/dom";
+import { ContextConsumer } from "@videojs/element/context";
+//#region src/ui/input-indicator/element.ts
+var InputIndicatorElement = class extends UIElement {
+	constructor(..._args) {
+		super(..._args);
+		this.player = new PlayerController(this, playerContext);
+		this.container = new ContextConsumer(this, {
+			context: containerContext,
+			callback: () => this.#reconnect(),
+			subscribe: true
+		});
+		this.#disconnect = null;
+		this.#inputActionUnsubscribe = null;
+		this.#visibilityUnsubscribe = null;
+		this.#visibilityHandle = null;
+		this.#lastGeneration = 0;
+		this.#snapshot = null;
+	}
+	get options() {
+		return {};
+	}
+	#disconnect;
+	#inputActionUnsubscribe;
+	#visibilityUnsubscribe;
+	#visibilityHandle;
+	#lastGeneration;
+	#snapshot;
+	#getVisibilityHandle() {
+		return this.#visibilityHandle ??= { close: () => this.core.close() };
+	}
+	#payloadSnapshot() {
+		return this.#snapshot ?? this.core.state.current;
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		if (this.destroyed) return;
+		this.#snapshot = this.core.state.current;
+		this.#disconnect = new AbortController();
+		this.core.state.subscribe(() => this.requestUpdate(), { signal: this.#disconnect.signal });
+		this.transition.state.subscribe(() => this.requestUpdate(), { signal: this.#disconnect.signal });
+		this.hidden = true;
+		this.#reconnect();
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.#inputActionUnsubscribe?.();
+		this.#visibilityUnsubscribe?.();
+		this.#inputActionUnsubscribe = null;
+		this.#visibilityUnsubscribe = null;
+		this.#disconnect?.abort();
+		this.#disconnect = null;
+	}
+	destroyCallback() {
+		this.#inputActionUnsubscribe?.();
+		this.#visibilityUnsubscribe?.();
+		this.core.destroy();
+		this.transition.destroy();
+		this.liveIndicator.remove();
+		super.destroyCallback();
+	}
+	willUpdate(changed) {
+		super.willUpdate(changed);
+		this.syncCoreProps();
+	}
+	update(changed) {
+		super.update(changed);
+		this.#syncTransition();
+		const currentState = this.core.state.current;
+		const transitionState = this.transition.state.current;
+		if (!isIndicatorPresent(currentState, transitionState)) {
+			this.liveIndicator.remove();
+			return;
+		}
+		const state = getRenderedIndicatorState(currentState, this.#payloadSnapshot(), transitionState);
+		this.liveIndicator.render(state);
+	}
+	#syncTransition() {
+		const currentState = this.core.state.current;
+		if (currentState.open) {
+			this.#snapshot = currentState;
+			if (this.#lastGeneration !== currentState.generation) {
+				this.#lastGeneration = currentState.generation;
+				const transitionState = this.transition.state.current;
+				if (!transitionState.active || this.options.replayOnUpdate !== false) this.transition.open(this.liveIndicator.element);
+				else if (transitionState.status === "ending") this.transition.cancel();
+			}
+			return;
+		}
+		const { active, status } = this.transition.state.current;
+		if (active && status !== "ending") this.transition.close(this.liveIndicator.element);
+	}
+	#reconnect() {
+		if (!this.container) return;
+		this.#inputActionUnsubscribe?.();
+		this.#visibilityUnsubscribe?.();
+		this.#inputActionUnsubscribe = null;
+		this.#visibilityUnsubscribe = null;
+		const container = this.container.value?.container;
+		if (!container) return;
+		const visibility = getIndicatorVisibilityCoordinator(container);
+		const visibilityHandle = this.#getVisibilityHandle();
+		this.#visibilityUnsubscribe = visibility.register(visibilityHandle);
+		this.#inputActionUnsubscribe = subscribeToInputActions(container, (event) => {
+			if (this.core.processEvent(event, getMediaSnapshot(this.player.value))) visibility.show(visibilityHandle);
+		});
+	}
+};
+//#endregion
+export { InputIndicatorElement };

package/dist/default/ui/input-indicator/live-indicator.js

@@ -28,5 +28,3 @@ var LiveIndicator = class {
 };
 //#endregion
 export { LiveIndicator };
-
-//# sourceMappingURL=live-indicator.js.map

package/dist/default/ui/live-button/element.js

@@ -0,0 +1,112 @@
+import { i18nContext } from "../../i18n/context.js";
+import { I18nController } from "../../i18n/controller.js";
+import { playerContext } from "../../player/context.js";
+import { PlayerController } from "../../player/controller.js";
+import { UIElement } from "../ui-element.js";
+import { LiveButtonCore, LiveButtonDataAttrs } from "@videojs/core";
+import { applyElementProps, applyStateDataAttrs, createButton, selectBuffer, selectLive, selectTime } from "@videojs/core/dom";
+import { resolveText, translateText } from "@videojs/core/i18n";
+//#region src/ui/live-button/element.ts
+/**
+* `<media-live-button>` — selects from `live`, `time`, and `buffer` features and composes them into the
+* `LiveButtonMediaState` consumed by `LiveButtonCore`.
+*
+* Doesn't extend `MediaButtonElement` because that base couples a button to a single feature selector; the LiveButton
+* needs three.
+*/
+var LiveButtonElement = class extends UIElement {
+	constructor(..._args) {
+		super(..._args);
+		this.disabled = false;
+		this.label = "";
+		this.core = new LiveButtonCore();
+		this.live = new PlayerController(this, playerContext, selectLive);
+		this.time = new PlayerController(this, playerContext, selectTime);
+		this.buffer = new PlayerController(this, playerContext, selectBuffer);
+		this.#i18n = new I18nController(this, i18nContext);
+		this.#defaultContent = false;
+		this.#disconnect = null;
+	}
+	static {
+		this.tagName = "media-live-button";
+	}
+	static {
+		this.properties = {
+			label: { type: String },
+			disabled: { type: Boolean }
+		};
+	}
+	#i18n;
+	get $state() {
+		return this.core.state;
+	}
+	#defaultContent;
+	#disconnect;
+	connectedCallback() {
+		super.connectedCallback();
+		if (this.destroyed) return;
+		this.#defaultContent ||= !this.textContent?.trim();
+		if (this.#defaultContent) this.textContent = translateText(LiveButtonCore.defaultText, this.#i18n.value);
+		this.#disconnect = new AbortController();
+		const buttonProps = createButton({
+			onActivate: () => {
+				const media = this.#getMedia();
+				if (media) this.core.seekToLive(media);
+			},
+			isDisabled: () => this.disabled || !this.#getMedia()
+		});
+		applyElementProps(this, buttonProps, { signal: this.#disconnect.signal });
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.#disconnect?.abort();
+		this.#disconnect = null;
+	}
+	/** Returns the button's current label derived from media state. */
+	getLabel() {
+		return this.core.state.current.label ? resolveText(this.core.state.current.label) : void 0;
+	}
+	/** Resolved label for tooltips and other display surfaces. */
+	getResolvedLabel() {
+		if (!this.#getMedia()) return void 0;
+		const state = this.core.getState();
+		return translateText(this.core.getLabel(state), this.#i18n.value);
+	}
+	willUpdate(changed) {
+		super.willUpdate(changed);
+		this.core.setProps(this);
+	}
+	update(changed) {
+		super.update(changed);
+		if (this.#defaultContent) this.textContent = translateText(LiveButtonCore.defaultText, this.#i18n.value);
+		const media = this.#getMedia();
+		if (!media) return;
+		this.core.setMedia(media);
+		const state = this.core.getState();
+		const attrs = this.core.getAttrs(state);
+		applyElementProps(this, {
+			...attrs,
+			"aria-label": translateText(attrs["aria-label"], this.#i18n.value)
+		});
+		applyStateDataAttrs(this, state, LiveButtonDataAttrs);
+	}
+	/**
+	* Compose the LiveButton media state from the three feature slices. Returns `null` when any are missing so the button
+	* stays disabled until all three features are registered on the player.
+	*/
+	#getMedia() {
+		const live = this.live.value;
+		const time = this.time.value;
+		const buffer = this.buffer.value;
+		if (!live || !time || !buffer) return null;
+		return {
+			currentTime: time.currentTime,
+			seek: time.seek,
+			seekable: buffer.seekable,
+			liveEdgeStart: live.liveEdgeStart,
+			targetLiveWindow: live.targetLiveWindow
+		};
+	}
+};
+//#endregion
+export { LiveButtonElement };

package/dist/default/ui/media-button-element.js

@@ -105,5 +105,3 @@ function isHideable(state) {
 }
 //#endregion
 export { MediaButtonElement };
-
-//# sourceMappingURL=media-button-element.js.map

package/dist/default/ui/media-ui-element.js

@@ -27,5 +27,3 @@ var MediaUIElement = class extends UIElement {
 };
 //#endregion
 export { MediaUIElement };
-
-//# sourceMappingURL=media-ui-element.js.map