@videojs/html 10.0.0-rc.4 → 10.0.0

package/dist/default/presets/live-video/compat-skin.js

@@ -0,0 +1,19 @@
+import { SkinElement } from "../skin.js";
+import { template } from "../../internal/skins/compat-live-video/template.js";
+import compat_skin_default from "../../define/live-video/compat-skin2.js";
+import { createShadowStyle } from "@videojs/utils/dom";
+//#region src/presets/live-video/compat-skin.ts
+/** Packaged compat live-video UI registered as `<live-video-compat-skin>`. */
+var CompatLiveVideoSkinElement = class extends SkinElement {
+	static {
+		this.tagName = "live-video-compat-skin";
+	}
+	static {
+		this.styles = createShadowStyle(compat_skin_default);
+	}
+	static {
+		this.template = template;
+	}
+};
+//#endregion
+export { CompatLiveVideoSkinElement };

package/dist/default/presets/live-video/index.js

@@ -1,5 +1,6 @@
-import { MinimalLiveVideoSkinElement } from "./minimal-skin.js";
+import { CompatLiveVideoSkinElement } from "./compat-skin.js";
+import { NeutralLiveVideoSkinElement } from "./neutral-skin.js";
 import { LiveVideoPlayerElement, PlayerController } from "./player.js";
 import { LiveVideoSkinElement } from "./skin.js";
 import { liveVideoFeatures } from "@videojs/core/dom";
-export { LiveVideoPlayerElement, LiveVideoSkinElement, MinimalLiveVideoSkinElement, PlayerController, liveVideoFeatures };
+export { CompatLiveVideoSkinElement, LiveVideoPlayerElement, LiveVideoSkinElement, NeutralLiveVideoSkinElement, PlayerController, liveVideoFeatures };

package/dist/default/presets/live-video/neutral-skin.js

@@ -0,0 +1,19 @@
+import { SkinElement } from "../skin.js";
+import { template } from "../../internal/skins/neutral-live-video/template.js";
+import neutral_skin_default from "../../define/live-video/neutral-skin2.js";
+import { createShadowStyle } from "@videojs/utils/dom";
+//#region src/presets/live-video/neutral-skin.ts
+/** Packaged Neutral live-video UI registered as `<live-video-neutral-skin>`. */
+var NeutralLiveVideoSkinElement = class extends SkinElement {
+	static {
+		this.tagName = "live-video-neutral-skin";
+	}
+	static {
+		this.styles = createShadowStyle(neutral_skin_default);
+	}
+	static {
+		this.template = template;
+	}
+};
+//#endregion
+export { NeutralLiveVideoSkinElement };

package/dist/default/presets/video/compat-skin.js

@@ -0,0 +1,19 @@
+import { template } from "../../internal/skins/compat-video/template.js";
+import { SkinElement } from "../skin.js";
+import compat_skin_default from "../../define/video/compat-skin2.js";
+import { createShadowStyle } from "@videojs/utils/dom";
+//#region src/presets/video/compat-skin.ts
+/** Packaged compat video UI registered as `<video-compat-skin>`. */
+var CompatVideoSkinElement = class extends SkinElement {
+	static {
+		this.tagName = "video-compat-skin";
+	}
+	static {
+		this.styles = createShadowStyle(compat_skin_default);
+	}
+	static {
+		this.template = template;
+	}
+};
+//#endregion
+export { CompatVideoSkinElement };

package/dist/default/presets/video/index.js

@@ -1,5 +1,6 @@
-import { MinimalVideoSkinElement } from "./minimal-skin.js";
+import { CompatVideoSkinElement } from "./compat-skin.js";
+import { NeutralVideoSkinElement } from "./neutral-skin.js";
 import { PlayerController, VideoPlayerElement } from "./player.js";
 import { VideoSkinElement } from "./skin.js";
 import { videoFeatures } from "@videojs/core/dom";
-export { MinimalVideoSkinElement, PlayerController, VideoPlayerElement, VideoSkinElement, videoFeatures };
+export { CompatVideoSkinElement, NeutralVideoSkinElement, PlayerController, VideoPlayerElement, VideoSkinElement, videoFeatures };

package/dist/default/presets/video/neutral-skin.js

@@ -0,0 +1,19 @@
+import { SkinElement } from "../skin.js";
+import { template } from "../../internal/skins/neutral-video/template.js";
+import neutral_skin_default from "../../define/video/neutral-skin2.js";
+import { createShadowStyle } from "@videojs/utils/dom";
+//#region src/presets/video/neutral-skin.ts
+/** Packaged Neutral video UI registered as `<video-neutral-skin>`. */
+var NeutralVideoSkinElement = class extends SkinElement {
+	static {
+		this.tagName = "video-neutral-skin";
+	}
+	static {
+		this.styles = createShadowStyle(neutral_skin_default);
+	}
+	static {
+		this.template = template;
+	}
+};
+//#endregion
+export { NeutralVideoSkinElement };

package/dist/default/store/media-attach-mixin.js

@@ -8,6 +8,7 @@ import { ContextEvent } from "@videojs/element/context";
 * required.
 *
 * @param context - The media context to consume.
+* @internal
 */
 function createMediaAttachMixin(context) {
 	return (BaseClass) => {
@@ -38,6 +39,7 @@ function createMediaAttachMixin(context) {
 		return MediaAttachElement;
 	};
 }
+/** @internal */
 const MediaAttachMixin = createMediaAttachMixin(mediaContext);
 //#endregion
 export { MediaAttachMixin, createMediaAttachMixin };

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

@@ -15,7 +15,7 @@ var AirPlayButtonElement = class extends MediaButtonElement {
 		this.tagName = "media-airplay-button";
 	}
 	activate(state) {
-		this.core.toggle(state);
+		return this.core.toggle(state);
 	}
 };
 //#endregion

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

@@ -32,6 +32,10 @@ var BufferingIndicatorElement = class extends UIElement {
 		this.#disconnect?.abort();
 		this.#disconnect = null;
 	}
+	destroyCallback() {
+		this.#core.destroy();
+		super.destroyCallback();
+	}
 	willUpdate(changed) {
 		super.willUpdate(changed);
 		this.#core.setProps(this);

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

@@ -1,4 +1,5 @@
 import { createContext } from "@videojs/element/context";
+/** @internal */
 const dialogContext = createContext(Symbol("@videojs/dialog"));
 //#endregion
 export { dialogContext };

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

@@ -88,8 +88,10 @@ var DialogElementBase = class extends UIElement {
 		this.#core.setProps(this);
 		if (this.#dialog && changed.has("open")) {
 			const { active: inputOpen } = this.#dialog.input.current;
-			if (this.open !== inputOpen) if (this.open) this.#dialog.open();
-			else this.#dialog.close();
+			if (this.open !== inputOpen) {
+				if (this.open) this.#dialog.open();
+				else this.#dialog.close();
+			}
 		}
 	}
 	update(_changed) {

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

@@ -6,10 +6,11 @@ import { HOTKEY_SHORTCUT_CHANGE_EVENT, applyElementProps, applyStateDataAttrs, c
 import { isText, resolveText, translateText } from "@videojs/core/i18n";
 import { isBoolean, isObject } from "@videojs/utils/predicate";
 //#region src/ui/media-button-element.ts
-function getLabelParams(core, state) {
-	return core.getLabelParams?.(state);
-}
-/** Abstract base for HTML custom elements that render a media-control button. */
+/**
+* Abstract base for HTML custom elements that render a media-control button. `ComponentState` is the state the button
+* reflects to data attributes, and `MediaState` is the player state it reads and acts on. Pass both: a subclass that
+* omits them still compiles, but types `activate(state)` and `mediaState` as the `ButtonState` and `object` defaults.
+*/
 var MediaButtonElement = class extends UIElement {
 	constructor(..._args) {
 		super(..._args);
@@ -70,7 +71,7 @@ var MediaButtonElement = class extends UIElement {
 		if (!media) return void 0;
 		this.core.setMedia(media);
 		const state = this.core.getState();
-		return translateText(this.core.getLabel(state), this.#i18n.value, getLabelParams(this.core, state));
+		return translateText(this.core.getLabel(state), this.#i18n.value, this.core.getLabelParams?.(state));
 	}
 	willUpdate(changed) {
 		super.willUpdate(changed);
@@ -84,7 +85,7 @@ var MediaButtonElement = class extends UIElement {
 		this.core.setMedia(media);
 		const state = this.core.getState();
 		const attrs = this.core.getAttrs?.(state) ?? {};
-		if (isText(attrs["aria-label"])) attrs["aria-label"] = translateText(attrs["aria-label"], this.#i18n.value, getLabelParams(this.core, state));
+		if (isText(attrs["aria-label"])) attrs["aria-label"] = translateText(attrs["aria-label"], this.#i18n.value, this.core.getLabelParams?.(state));
 		applyElementProps(this, {
 			...attrs,
 			"aria-keyshortcuts": this.#hotkeyRegistry?.aria,

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

@@ -5,7 +5,12 @@ import { applyElementProps, applyStateDataAttrs } from "@videojs/core/dom";
 import { isText, translateText } from "@videojs/core/i18n";
 import { isFunction } from "@videojs/utils/predicate";
 //#region src/ui/media-ui-element.ts
-/** Abstract base for HTML custom elements that display media state with data attributes. */
+/**
+* Abstract base for HTML custom elements that display media state with data attributes. `ComponentState` is the state
+* the element reflects to data attributes, and `MediaState` is the player state it reads.
+*
+* @internal
+*/
 var MediaUIElement = class extends UIElement {
 	#i18n = new I18nController(this, i18nContext);
 	connectedCallback() {

package/dist/default/ui/menu/context.js

@@ -3,7 +3,9 @@ import { createContext } from "@videojs/element/context";
 //#region src/ui/menu/context.ts
 const MENU_CONTEXT_KEY = Symbol("@videojs/menu");
 const MENU_GROUP_CONTEXT_KEY = Symbol("@videojs/menu-group");
+/** @internal */
 const menuContext = createContext(MENU_CONTEXT_KEY);
+/** @internal */
 const menuGroupContext = createContext(MENU_GROUP_CONTEXT_KEY);
 //#endregion
 export { menuContext, menuGroupContext, radioGroupContext as menuRadioGroupContext };

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

@@ -16,7 +16,7 @@ var PlayButtonElement = class extends MediaButtonElement {
 		this.tagName = "media-play-button";
 	}
 	activate(state) {
-		this.core.toggle(state);
+		return this.core.toggle(state);
 	}
 };
 //#endregion

package/dist/default/ui/playback-rate-button/element.js

@@ -38,8 +38,10 @@ var PlaybackRateButtonElement = class extends MediaButtonElement {
 	}
 	willUpdate(changed) {
 		super.willUpdate(changed);
-		if (changed.has("commandfor")) if (this.commandfor) this.setAttribute("commandfor", this.commandfor);
-		else this.removeAttribute("commandfor");
+		if (changed.has("commandfor")) {
+			if (this.commandfor) this.setAttribute("commandfor", this.commandfor);
+			else this.removeAttribute("commandfor");
+		}
 	}
 	update(changed) {
 		super.update(changed);

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

@@ -129,8 +129,10 @@ var PopoverElement = class extends UIElement {
 		this.#core.setProps(this);
 		if (this.#popover && changed.has("open")) {
 			const { active: interactionOpen } = this.#popover.input.current;
-			if (this.open !== interactionOpen) if (this.open) this.#popover.open();
-			else this.#popover.close();
+			if (this.open !== interactionOpen) {
+				if (this.open) this.#popover.open();
+				else this.#popover.close();
+			}
 		}
 	}
 	update(_changed) {

package/dist/default/ui/radio-group/context.js

@@ -1,4 +1,5 @@
 import { createContext } from "@videojs/element/context";
+/** @internal */
 const radioGroupContext = createContext(Symbol("@videojs/radio-group"));
 //#endregion
 export { radioGroupContext };

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

@@ -1,3 +1,5 @@
+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 { SeekIndicatorCore, SeekIndicatorDataAttrs, getSeekIndicatorDisplayValue } from "@videojs/core";
@@ -13,6 +15,7 @@ var SeekIndicatorElement = class extends InputIndicatorElement {
 			attribute: "close-delay"
 		} };
 	}
+	#i18n = new I18nController(this, i18nContext);
 	#core = new SeekIndicatorCore();
 	#transition = createTransition();
 	#liveIndicator = new LiveIndicator({
@@ -30,7 +33,10 @@ var SeekIndicatorElement = class extends InputIndicatorElement {
 		return this.#liveIndicator;
 	}
 	syncCoreProps() {
-		this.#core.setProps({ closeDelay: this.closeDelay });
+		this.#core.setProps({
+			closeDelay: this.closeDelay,
+			locale: this.#i18n.locale
+		});
 	}
 };
 function renderSeekIndicator(element, state) {

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

@@ -1,4 +1,5 @@
 import { createContext } from "@videojs/element/context";
+/** @internal */
 const sliderContext = createContext(Symbol("@videojs/slider"));
 //#endregion
 export { sliderContext };

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

@@ -27,6 +27,18 @@ var StatusIndicatorElement = class extends InputIndicatorElement {
 		render: renderStatusIndicator
 	});
 	#options = { replayOnUpdate: false };
+	#deriveCustomStatus;
+	/**
+	* Derives display details for actions without built-in feedback, such as custom hotkey actions. Called only when the
+	* built-in derivation returns `null`. Set as a JavaScript property; it has no attribute.
+	*/
+	get deriveCustomStatus() {
+		return this.#deriveCustomStatus;
+	}
+	set deriveCustomStatus(value) {
+		this.#deriveCustomStatus = value;
+		this.requestUpdate();
+	}
 	get core() {
 		return this.#core;
 	}
@@ -43,7 +55,8 @@ var StatusIndicatorElement = class extends InputIndicatorElement {
 		this.#core.setProps({
 			actions: parseActions(this.actions),
 			closeDelay: this.closeDelay,
-			labels: createInputIndicatorLabels(this.#i18n.value)
+			labels: createInputIndicatorLabels(this.#i18n.value),
+			deriveCustomStatus: this.#deriveCustomStatus
 		});
 	}
 };

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

@@ -2,6 +2,7 @@ import { i18nContext } from "../../i18n/context.js";
 import { createTextMixin } from "../../i18n/text-mixin.js";
 import { ReactiveElement } from "@videojs/element";
 //#region src/ui/text/element.ts
+/** @internal */
 const I18nTextMixin = createTextMixin({ context: i18nContext });
 var TextElement = class extends I18nTextMixin(ReactiveElement) {
 	static {

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

@@ -139,7 +139,8 @@ var ThumbnailElement = class extends UIElement {
 		if (this.#externalThumbnails) this.#thumbnails = this.#externalThumbnails;
 		else if (textTrack !== this.#lastTextTrack) {
 			this.#lastTextTrack = textTrack;
-			this.#thumbnails = textTrack && textTrack.thumbnailCues.length > 0 ? mapCuesToThumbnails(textTrack.thumbnailCues, textTrack.thumbnailTrackSrc ?? void 0) : [];
+			const thumbnailsTrack = textTrack?.thumbnailsTrack;
+			this.#thumbnails = thumbnailsTrack && thumbnailsTrack.cues.length > 0 ? mapCuesToThumbnails(thumbnailsTrack.cues, thumbnailsTrack.src ?? void 0) : [];
 		}
 		const thumbnail = this.#core.findActiveThumbnail(this.#thumbnails, this.time);
 		const img = findComposedElement(this, isHTMLImageElement) ?? this.#fallback;
@@ -171,7 +172,7 @@ var ThumbnailElement = class extends UIElement {
 	* may point at a host that has nothing to do with the media element.
 	*/
 	#inheritedCrossOrigin(textTrack) {
-		return this.#externalThumbnails ? void 0 : textTrack?.thumbnailTrackCrossOrigin;
+		return this.#externalThumbnails ? void 0 : textTrack?.thumbnailsTrack?.crossOrigin;
 	}
 	/** Sync image attributes from element properties, leaving the ones the author put on the image alone. */
 	#applyImageAttributes(img, textTrack) {

package/dist/default/ui/tooltip/context.js

@@ -1,4 +1,5 @@
 import { createContext } from "@videojs/element/context";
+/** @internal */
 const tooltipGroupContext = createContext(Symbol("@videojs/tooltip-group"));
 //#endregion
 export { tooltipGroupContext };

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

@@ -133,8 +133,10 @@ var TooltipElement = class extends UIElement {
 		this.#core.setProps(this);
 		if (this.#tooltip && changed.has("open")) {
 			const { active: interactionOpen } = this.#tooltip.input.current;
-			if (this.open !== interactionOpen) if (this.open) this.#tooltip.open();
-			else this.#tooltip.close();
+			if (this.open !== interactionOpen) {
+				if (this.open) this.#tooltip.open();
+				else this.#tooltip.close();
+			}
 		}
 	}
 	update(_changed) {

package/dist/default/ui/volume-popover/element.js

@@ -10,7 +10,7 @@ const unavailableVolume = {
 	volumeAvailability: "unsupported",
 	mutedAvailability: "unsupported",
 	setVolume: () => 0,
-	toggleMuted: () => false
+	setMuted: () => false
 };
 /** A volume-aware popover that keeps its adjacent mute trigger available as a fallback. */
 var VolumePopoverElement = class extends PopoverElement {

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

@@ -103,7 +103,7 @@ var VolumeSliderElement = class extends UIElement {
 			isDisabled,
 			getPercent,
 			getStepPercent: () => this.#core.getWheelStepPercent(),
-			onValueChange: setVolume
+			onValueChange: (percent) => this.#volumeState.value?.setVolume(this.#core.rawValueFromPercent(percent) / 100)
 		});
 		applyElementProps(this, this.#slider.rootProps, { signal });
 		applyElementProps(this, wheelProps, { signal });

package/dist/default/version.js

@@ -0,0 +1,27 @@
+//#region src/version.ts
+const readVersion = () => {
+	try {
+		return "10.0.0";
+	} catch {}
+	return "UNKNOWN";
+};
+/**
+* Version of the `@videojs/html` build in use, matching the package's published version — for example `'10.0.0-rc.4'`.
+* The string is replaced at build time, so it identifies the exact published build rather than the version range a
+* consumer installed, which makes it useful for bug reports, diagnostics, and analytics.
+*
+* Falls back to `'UNKNOWN'` when the source is consumed without the build-time replacement applied.
+*
+* @example
+*   HTML player
+*   ```ts
+*   import { VERSION } from '@videojs/html';
+*
+*   console.log(VERSION); // '10.0.0-rc.4'
+*   ```
+*
+* @internal
+*/
+const VERSION = readVersion();
+//#endregion
+export { VERSION };