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

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

@@ -0,0 +1,155 @@
+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 { sliderContext } from "./context.js";
+import { SliderCore, SliderDataAttrs } from "@videojs/core";
+import { applyElementProps, applyStateDataAttrs, createSlider, getSliderCSSVars, selectControls } from "@videojs/core/dom";
+import { ContextProvider } from "@videojs/element/context";
+import { translateText } from "@videojs/core/i18n";
+import { applyStyles } from "@videojs/utils/dom";
+//#region src/ui/slider/element.ts
+/**
+* @fires value-change - Fired while the slider value changes during an interaction.
+* @fires value-commit - Fired when an interaction commits the slider value.
+* @fires drag-start - Fired when a pointer drag starts.
+* @fires drag-end - Fired when a pointer drag ends.
+*/
+var SliderElement = class extends UIElement {
+	constructor(..._args) {
+		super(..._args);
+		this.label = "";
+		this.value = SliderCore.defaultProps.value;
+		this.min = SliderCore.defaultProps.min;
+		this.max = SliderCore.defaultProps.max;
+		this.step = SliderCore.defaultProps.step;
+		this.largeStep = SliderCore.defaultProps.largeStep;
+		this.orientation = SliderCore.defaultProps.orientation;
+		this.disabled = SliderCore.defaultProps.disabled;
+		this.thumbAlignment = SliderCore.defaultProps.thumbAlignment;
+		this.#core = new SliderCore();
+		this.#controlsState = new PlayerController(this, playerContext, selectControls);
+		this.#i18n = new I18nController(this, i18nContext);
+		this.#provider = new ContextProvider(this, { context: sliderContext });
+		this.#slider = null;
+		this.#disconnect = null;
+		this.#releaseControlsLock = null;
+	}
+	static {
+		this.tagName = "media-slider";
+	}
+	static {
+		this.properties = {
+			label: { type: String },
+			value: { type: Number },
+			min: { type: Number },
+			max: { type: Number },
+			step: { type: Number },
+			largeStep: {
+				type: Number,
+				attribute: "large-step"
+			},
+			orientation: { type: String },
+			disabled: { type: Boolean },
+			thumbAlignment: {
+				type: String,
+				attribute: "thumb-alignment"
+			}
+		};
+	}
+	#core;
+	#controlsState;
+	#i18n;
+	#provider;
+	#slider;
+	#disconnect;
+	#releaseControlsLock;
+	connectedCallback() {
+		super.connectedCallback();
+		if (this.destroyed) return;
+		this.#disconnect = new AbortController();
+		const signal = this.#disconnect.signal;
+		this.#slider = createSlider({
+			getElement: () => this,
+			getThumbElement: () => this.querySelector("media-slider-thumb"),
+			getOrientation: () => this.orientation,
+			isDisabled: () => this.disabled,
+			getPercent: () => this.#core.percentFromValue(this.value),
+			getStepPercent: () => this.#core.getStepPercent(),
+			getLargeStepPercent: () => this.#core.getLargeStepPercent(),
+			onValueChange: (percent) => {
+				this.value = this.#core.valueFromPercent(percent);
+				this.dispatchEvent(new CustomEvent("value-change", {
+					detail: { value: this.value },
+					bubbles: true
+				}));
+			},
+			onValueCommit: (percent) => {
+				this.value = this.#core.valueFromPercent(percent);
+				this.dispatchEvent(new CustomEvent("value-commit", {
+					detail: { value: this.value },
+					bubbles: true
+				}));
+			},
+			onPressStart: () => {
+				this.#releaseControlsLock ??= this.#controlsState.value?.requestControlsLock() ?? null;
+			},
+			onPressEnd: () => this.#releaseControlsVisibilityLock(),
+			onDragStart: () => {
+				this.dispatchEvent(new CustomEvent("drag-start", { bubbles: true }));
+			},
+			onDragEnd: () => {
+				this.dispatchEvent(new CustomEvent("drag-end", { bubbles: true }));
+			},
+			adjustPercent: (raw, thumbSize, trackSize) => this.#core.adjustPercentForAlignment(raw, thumbSize, trackSize),
+			onResize: () => this.requestUpdate()
+		});
+		applyElementProps(this, this.#slider.rootProps, { signal });
+		applyStyles(this, this.#slider.rootStyle);
+		this.#slider.input.subscribe(() => this.requestUpdate(), { signal });
+	}
+	disconnectedCallback() {
+		this.#releaseControlsVisibilityLock();
+		super.disconnectedCallback();
+		this.#disconnect?.abort();
+		this.#disconnect = null;
+	}
+	destroyCallback() {
+		this.#releaseControlsVisibilityLock();
+		this.#slider?.destroy();
+		super.destroyCallback();
+	}
+	#releaseControlsVisibilityLock() {
+		this.#releaseControlsLock?.();
+		this.#releaseControlsLock = null;
+	}
+	willUpdate(_changed) {
+		super.willUpdate(_changed);
+		this.#core.setProps(this);
+	}
+	update(_changed) {
+		super.update(_changed);
+		if (!this.#slider) return;
+		this.#core.setInput(this.#slider.input.current);
+		const state = this.#core.getSliderState(this.value);
+		const cssVars = getSliderCSSVars(this.#slider.adjustForAlignment(state));
+		applyStyles(this, cssVars);
+		applyStateDataAttrs(this, state, SliderDataAttrs);
+		this.#provider.setValue({
+			state,
+			stateAttrMap: SliderDataAttrs,
+			pointerValue: this.#core.valueFromPercent(state.pointerPercent),
+			thumbAttrs: (() => {
+				const attrs = this.#core.getAttrs(state);
+				return {
+					...attrs,
+					"aria-label": translateText(attrs["aria-label"], this.#i18n.value)
+				};
+			})(),
+			thumbProps: this.#slider.thumbProps
+		});
+	}
+};
+//#endregion
+export { SliderElement };

package/dist/default/ui/slider/fill.js

@@ -0,0 +1,18 @@
+import { ContextPartElement } from "../context-part-element.js";
+import { sliderContext } from "./context.js";
+import { ContextConsumer } from "@videojs/element/context";
+//#region src/ui/slider/fill.ts
+var SliderFillElement = class extends ContextPartElement {
+	constructor(..._args) {
+		super(..._args);
+		this.consumer = new ContextConsumer(this, {
+			context: sliderContext,
+			subscribe: true
+		});
+	}
+	static {
+		this.tagName = "media-slider-fill";
+	}
+};
+//#endregion
+export { SliderFillElement };

package/dist/default/ui/slider/preview.js

@@ -0,0 +1,50 @@
+import { UIElement } from "../ui-element.js";
+import { sliderContext } from "./context.js";
+import { applyStateDataAttrs, getSliderPreviewStyle } from "@videojs/core/dom";
+import { ContextConsumer } from "@videojs/element/context";
+import { applyStyles, observeResize } from "@videojs/utils/dom";
+//#region src/ui/slider/preview.ts
+var SliderPreviewElement = class extends UIElement {
+	constructor(..._args) {
+		super(..._args);
+		this.overflow = "clamp";
+		this.#ctx = new ContextConsumer(this, {
+			context: sliderContext,
+			subscribe: true
+		});
+		this.#stopObservingResize = null;
+		this.#width = 0;
+	}
+	static {
+		this.tagName = "media-slider-preview";
+	}
+	static {
+		this.properties = { overflow: { type: String } };
+	}
+	#ctx;
+	#stopObservingResize;
+	#width;
+	connectedCallback() {
+		super.connectedCallback();
+		this.#stopObservingResize = observeResize(this, ([entry]) => {
+			this.#width = entry.contentRect.width;
+			this.#applyPosition();
+		});
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.#stopObservingResize?.();
+		this.#stopObservingResize = null;
+	}
+	#applyPosition() {
+		applyStyles(this, getSliderPreviewStyle(this.#width, this.overflow));
+	}
+	update(_changed) {
+		super.update(_changed);
+		const ctx = this.#ctx.value;
+		if (ctx) applyStateDataAttrs(this, ctx.state, ctx.stateAttrMap);
+		this.#applyPosition();
+	}
+};
+//#endregion
+export { SliderPreviewElement };

package/dist/default/ui/slider/thumb.js

@@ -0,0 +1,40 @@
+import { UIElement } from "../ui-element.js";
+import { sliderContext } from "./context.js";
+import { applyElementProps, applyStateDataAttrs } from "@videojs/core/dom";
+import { ContextConsumer } from "@videojs/element/context";
+//#region src/ui/slider/thumb.ts
+var SliderThumbElement = class extends UIElement {
+	static {
+		this.tagName = "media-slider-thumb";
+	}
+	#ctx = new ContextConsumer(this, {
+		context: sliderContext,
+		subscribe: true
+	});
+	#disconnect = null;
+	#thumbPropsApplied = false;
+	connectedCallback() {
+		super.connectedCallback();
+		this.#disconnect = new AbortController();
+		this.#thumbPropsApplied = false;
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.#disconnect?.abort();
+		this.#disconnect = null;
+		this.#thumbPropsApplied = false;
+	}
+	update(_changed) {
+		super.update(_changed);
+		const ctx = this.#ctx.value;
+		if (!ctx) return;
+		if (!this.#thumbPropsApplied && this.#disconnect) {
+			applyElementProps(this, ctx.thumbProps, { signal: this.#disconnect.signal });
+			this.#thumbPropsApplied = true;
+		}
+		applyElementProps(this, ctx.thumbAttrs);
+		applyStateDataAttrs(this, ctx.state, ctx.stateAttrMap);
+	}
+};
+//#endregion
+export { SliderThumbElement };

package/dist/default/ui/slider/thumbnail.js

@@ -0,0 +1,24 @@
+import { sliderContext } from "./context.js";
+import { ThumbnailElement } from "../thumbnail/element.js";
+import { ContextConsumer } from "@videojs/element/context";
+//#region src/ui/slider/thumbnail.ts
+/**
+* `<media-thumbnail>` whose `time` follows the slider pointer. Left empty, it draws an image of its own; supply an
+* `<img>` child to compose overlays or loading indicators beside the image it controls.
+*/
+var SliderThumbnailElement = class extends ThumbnailElement {
+	static {
+		this.tagName = "media-slider-thumbnail";
+	}
+	#ctx = new ContextConsumer(this, {
+		context: sliderContext,
+		subscribe: true
+	});
+	update(changed) {
+		const ctx = this.#ctx.value;
+		if (ctx) this.time = ctx.pointerValue;
+		super.update(changed);
+	}
+};
+//#endregion
+export { SliderThumbnailElement };

package/dist/default/ui/slider/track.js

@@ -0,0 +1,18 @@
+import { ContextPartElement } from "../context-part-element.js";
+import { sliderContext } from "./context.js";
+import { ContextConsumer } from "@videojs/element/context";
+//#region src/ui/slider/track.ts
+var SliderTrackElement = class extends ContextPartElement {
+	constructor(..._args) {
+		super(..._args);
+		this.consumer = new ContextConsumer(this, {
+			context: sliderContext,
+			subscribe: true
+		});
+	}
+	static {
+		this.tagName = "media-slider-track";
+	}
+};
+//#endregion
+export { SliderTrackElement };

package/dist/default/ui/slider/value.js

@@ -0,0 +1,37 @@
+import { UIElement } from "../ui-element.js";
+import { sliderContext } from "./context.js";
+import { applyStateDataAttrs } from "@videojs/core/dom";
+import { ContextConsumer } from "@videojs/element/context";
+//#region src/ui/slider/value.ts
+/** Writes the formatted current or pointer slider value into its own text content, replacing any children. */
+var SliderValueElement = class extends UIElement {
+	constructor(..._args) {
+		super(..._args);
+		this.type = "current";
+		this.#ctx = new ContextConsumer(this, {
+			context: sliderContext,
+			subscribe: true
+		});
+	}
+	static {
+		this.tagName = "media-slider-value";
+	}
+	static {
+		this.properties = { type: { type: String } };
+	}
+	#ctx;
+	connectedCallback() {
+		super.connectedCallback();
+		this.setAttribute("aria-live", "off");
+	}
+	update(_changed) {
+		super.update(_changed);
+		const ctx = this.#ctx.value;
+		if (!ctx) return;
+		const value = this.type === "pointer" ? ctx.pointerValue : ctx.state.value;
+		this.textContent = ctx.formatValue ? ctx.formatValue(value, this.type) : String(Math.round(value));
+		applyStateDataAttrs(this, ctx.state, ctx.stateAttrMap);
+	}
+};
+//#endregion
+export { SliderValueElement };

package/dist/default/ui/status-announcer/element.js

@@ -0,0 +1,88 @@
+import { i18nContext } from "../../i18n/context.js";
+import { I18nController } from "../../i18n/controller.js";
+import { containerContext, playerContext } from "../../player/context.js";
+import { UIElement } from "../ui-element.js";
+import { StatusAnnouncerCore, createStatusAnnouncerLabels } from "@videojs/core";
+import { shouldAnnounceStatusChange, subscribeToStatusAnnouncer } from "@videojs/core/dom";
+import { ContextConsumer } from "@videojs/element/context";
+//#region src/ui/status-announcer/element.ts
+var StatusAnnouncerElement = class extends UIElement {
+	static {
+		this.tagName = "media-status-announcer";
+	}
+	static {
+		this.properties = { closeDelay: {
+			type: Number,
+			attribute: "close-delay"
+		} };
+	}
+	#i18n = new I18nController(this, i18nContext);
+	#core = new StatusAnnouncerCore();
+	#storeUnsubscribe = null;
+	#player = new ContextConsumer(this, {
+		context: playerContext,
+		callback: (store) => this.#reconnect(store),
+		subscribe: true
+	});
+	#container = new ContextConsumer(this, {
+		context: containerContext,
+		subscribe: true
+	});
+	#disconnect = null;
+	#liveText = null;
+	connectedCallback() {
+		super.connectedCallback();
+		if (this.destroyed) return;
+		this.setAttribute("role", "status");
+		this.#ensureLiveText();
+		this.#disconnect = new AbortController();
+		this.#core.state.subscribe(() => this.requestUpdate(), { signal: this.#disconnect.signal });
+		this.#reconnect();
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.#storeUnsubscribe?.();
+		this.#storeUnsubscribe = null;
+		this.#disconnect?.abort();
+		this.#disconnect = null;
+	}
+	destroyCallback() {
+		this.#storeUnsubscribe?.();
+		this.#core.destroy();
+		super.destroyCallback();
+	}
+	willUpdate(changed) {
+		super.willUpdate(changed);
+		this.#core.setProps({
+			closeDelay: this.closeDelay,
+			labels: createStatusAnnouncerLabels(this.#i18n.value, this.#i18n.locale),
+			shouldAnnounce: () => shouldAnnounceStatusChange(this.#container.value?.container)
+		});
+	}
+	update(changed) {
+		super.update(changed);
+		const label = this.#core.state.current.label;
+		const liveText = this.#ensureLiveText();
+		if (label === null) liveText.replaceChildren();
+		else liveText.replaceChildren(document.createTextNode(label));
+	}
+	#reconnect(store = this.#player.value) {
+		this.#storeUnsubscribe?.();
+		this.#storeUnsubscribe = null;
+		if (!store) {
+			this.#core.resetSnapshot();
+			return;
+		}
+		this.#storeUnsubscribe = subscribeToStatusAnnouncer(store, this.#core);
+	}
+	#ensureLiveText() {
+		if (this.#liveText?.isConnected) return this.#liveText;
+		const existing = this.querySelector("[data-status-announcer-content]");
+		this.#liveText = existing ?? document.createElement("span");
+		this.#liveText.setAttribute("data-status-announcer-content", "");
+		if (!existing) this.append(this.#liveText);
+		return this.#liveText;
+	}
+};
+//#endregion
+export { StatusAnnouncerElement };

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

@@ -0,0 +1,59 @@
+import { i18nContext } from "../../i18n/context.js";
+import { I18nController } from "../../i18n/controller.js";
+import { InputIndicatorElement } from "../input-indicator/element.js";
+import { LiveIndicator } from "../input-indicator/live-indicator.js";
+import { StatusIndicatorCore, StatusIndicatorDataAttrs, createInputIndicatorLabels, getStatusIndicatorDisplayValue } from "@videojs/core";
+import { createTransition } from "@videojs/core/dom";
+//#region src/ui/status-indicator/element.ts
+var StatusIndicatorElement = class extends InputIndicatorElement {
+	static {
+		this.tagName = "media-status-indicator";
+	}
+	static {
+		this.properties = {
+			actions: { type: String },
+			closeDelay: {
+				type: Number,
+				attribute: "close-delay"
+			}
+		};
+	}
+	#i18n = new I18nController(this, i18nContext);
+	#core = new StatusIndicatorCore();
+	#transition = createTransition();
+	#liveIndicator = new LiveIndicator({
+		host: this,
+		dataAttrs: StatusIndicatorDataAttrs,
+		render: renderStatusIndicator
+	});
+	#options = { replayOnUpdate: false };
+	get core() {
+		return this.#core;
+	}
+	get transition() {
+		return this.#transition;
+	}
+	get liveIndicator() {
+		return this.#liveIndicator;
+	}
+	get options() {
+		return this.#options;
+	}
+	syncCoreProps() {
+		this.#core.setProps({
+			actions: parseActions(this.actions),
+			closeDelay: this.closeDelay,
+			labels: createInputIndicatorLabels(this.#i18n.value)
+		});
+	}
+};
+function parseActions(actions) {
+	return actions?.split(/[\s,]+/).filter(Boolean);
+}
+function renderStatusIndicator(element, state) {
+	const value = element.querySelector("media-status-indicator-value");
+	if (!value) return;
+	value.textContent = getStatusIndicatorDisplayValue(state);
+}
+//#endregion
+export { StatusIndicatorElement };

package/dist/default/ui/status-indicator/value.js

@@ -0,0 +1,9 @@
+import { UIElement } from "../ui-element.js";
+//#region src/ui/status-indicator/value.ts
+var StatusIndicatorValueElement = class extends UIElement {
+	static {
+		this.tagName = "media-status-indicator-value";
+	}
+};
+//#endregion
+export { StatusIndicatorValueElement };

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

@@ -0,0 +1,12 @@
+import { i18nContext } from "../../i18n/context.js";
+import { createTextMixin } from "../../i18n/text-mixin.js";
+import { ReactiveElement } from "@videojs/element";
+//#region src/ui/text/element.ts
+const I18nTextMixin = createTextMixin({ context: i18nContext });
+var TextElement = class extends I18nTextMixin(ReactiveElement) {
+	static {
+		this.tagName = "media-text";
+	}
+};
+//#endregion
+export { I18nTextMixin, TextElement as MediaTextElement, TextElement };