@videojs/html 10.2.0 → 10.3.0

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

@@ -61,14 +61,17 @@ var GestureElement = class extends UIElement {
 		if (!resolver) return;
 		const { value, region } = this;
 		const actionValue = getGestureActionValue(this.action, region, value);
+		let state;
 		const onActivate = (event) => {
 			resolver({
 				store,
+				state,
 				value: actionValue,
 				event
 			});
 		};
 		const options = {
+			onPointerDown: () => state = store.state,
 			pointer: this.pointer,
 			region,
 			disabled: this.disabled,

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

@@ -71,6 +71,7 @@ var MediaButtonElement = class extends UIElement {
 		if (!media) return void 0;
 		this.core.setMedia(media);
 		const state = this.core.getState();
+		if (this.core.getTooltipLabel) return translateText(this.core.getTooltipLabel(state), this.#i18n.value);
 		return translateText(this.core.getLabel(state), this.#i18n.value, this.core.getLabelParams?.(state));
 	}
 	willUpdate(changed) {
@@ -89,9 +90,17 @@ var MediaButtonElement = class extends UIElement {
 		applyElementProps(this, {
 			...attrs,
 			"aria-keyshortcuts": this.#hotkeyRegistry?.aria,
-			...isHideable(state) && { hidden: state.hidden ? "" : void 0 }
+			...isHideable(state) && this.reflectsHidden() && { hidden: state.hidden ? "" : void 0 }
 		});
 		applyStateDataAttrs(this, state, this.stateAttrMap);
+		for (const [name, value] of Object.entries(this.core.getCSSVars?.(state) ?? {})) this.style.setProperty(name, value);
+	}
+	/**
+	* Whether this button writes its core's `hidden` state to the `hidden` attribute. A subclass returns `false` while
+	* another owner, such as a linked menu, manages its visibility.
+	*/
+	reflectsHidden() {
+		return true;
 	}
 	#syncHotkeyShortcut() {
 		const shortcut = this.getShortcut();

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

@@ -8,6 +8,7 @@ var PlaybackRateButtonElement = class extends MediaButtonElement {
 	constructor(..._args) {
 		super(..._args);
 		this.commandfor = void 0;
+		this.rates = void 0;
 		this.core = new PlaybackRateButtonCore();
 		this.stateAttrMap = PlaybackRateButtonDataAttrs;
 		this.mediaState = new PlayerController(this, playerContext, selectPlaybackRate);
@@ -20,7 +21,8 @@ var PlaybackRateButtonElement = class extends MediaButtonElement {
 		this.properties = {
 			label: { type: String },
 			disabled: { type: Boolean },
-			commandfor: { type: String }
+			commandfor: { type: String },
+			rates: { type: String }
 		};
 	}
 	activate(state, event) {
@@ -33,9 +35,12 @@ var PlaybackRateButtonElement = class extends MediaButtonElement {
 	getIsButtonDisabled() {
 		const media = this.mediaState.value;
 		if (super.getIsButtonDisabled()) return true;
-		if (this.commandfor && media && media.playbackRates.length === 0) return true;
+		if (this.commandfor && media && this.core.getRates(media).length === 0) return true;
 		return false;
 	}
+	reflectsHidden() {
+		return !this.commandfor;
+	}
 	willUpdate(changed) {
 		super.willUpdate(changed);
 		if (changed.has("commandfor")) {

package/dist/default/ui/playback-rate-radio-group/element.js

@@ -17,12 +17,17 @@ var PlaybackRateRadioGroupElement = class extends MenuRadioGroupElement {
 	constructor(..._args) {
 		super(..._args);
 		this.disabled = false;
+		this.rates = void 0;
 		this.formatRate = PlaybackRateRadioGroupCore.defaultProps.formatRate;
 		this.#core = new PlaybackRateRadioGroupCore();
 		this.#i18n = new I18nController(this, i18nContext);
 		this.#mediaState = new PlayerController(this, playerContext, selectPlaybackRate);
 		this.#options = new RadioOptionsController(this, {
-			setItemAttributes: (item, option) => item.setAttribute("data-rate", option.value),
+			setItemAttributes: (item, option) => {
+				item.setAttribute("data-rate", option.value);
+				item.toggleAttribute("data-custom", option.custom);
+			},
+			getOptionCacheKey: (option) => option.custom ? "custom" : "",
 			onValueChange: (value) => {
 				const media = this.#mediaState.value;
 				if (media) this.#core.selectValue(media, value);
@@ -35,7 +40,8 @@ var PlaybackRateRadioGroupElement = class extends MenuRadioGroupElement {
 	static {
 		this.properties = {
 			...MenuRadioGroupElement.properties,
-			disabled: { type: Boolean }
+			disabled: { type: Boolean },
+			rates: { type: String }
 		};
 	}
 	#core;
@@ -52,7 +58,8 @@ var PlaybackRateRadioGroupElement = class extends MenuRadioGroupElement {
 		if (media) {
 			this.#core.setProps({
 				formatRate: this.formatRate,
-				disabled: this.disabled
+				disabled: this.disabled,
+				rates: this.rates
 			});
 			this.#core.setMedia(media);
 			state = this.#core.getState();

package/dist/default/ui/radio-options/controller.js

@@ -4,6 +4,7 @@ import { MenuItemIndicatorElement } from "../menu/item-indicator.js";
 import { applyElementProps } from "@videojs/core/dom";
 import { translateText } from "@videojs/core/i18n";
 import { cloneTemplateRoot, getTemplateElement, getTemplateRoot } from "@videojs/utils/dom";
+import { isUndefined } from "@videojs/utils/predicate";
 //#region src/ui/radio-options/controller.ts
 /** Renders normalized options into menu radio items and manages their interaction lifecycle. */
 var RadioOptionsController = class {
@@ -37,14 +38,12 @@ var RadioOptionsController = class {
 		const template = getTemplateElement(this.#host);
 		const templateRoot = template ? getTemplateRoot(template) : null;
 		const itemRoot = templateRoot?.localName === MenuRadioItemElement.tagName ? templateRoot : null;
-		const contentKey = `${state.options.map((option) => `${option.value}:${cacheKey(option.label, option.labelParams)}:${this.#config.getOptionCacheKey?.(option) ?? ""}`).join("|")}::${locale}::${template?.innerHTML ?? ""}`;
+		const contentKey = `${state.options.map((option) => `${option.value}:${cacheKey(option.label, option.labelParams)}:${cacheKey(option.ariaLabel ?? "", option.ariaLabelParams)}:${this.#config.getOptionCacheKey?.(option) ?? ""}`).join("|")}::${locale}::${template?.innerHTML ?? ""}`;
 		if (contentKey !== this.#contentKey || translator !== this.#translator) {
 			this.#contentKey = contentKey;
 			this.#translator = translator;
-			for (const child of [...this.#host.children]) {
-				if (child === template) continue;
-				child.remove();
-			}
+			const staleChildren = [...this.#host.children].filter((child) => child !== template);
+			const focusedValue = this.#getFocusedItem()?.value;
 			const items = state.options.map((option) => {
 				const item = itemRoot ? cloneTemplateRoot(itemRoot, this.#host.ownerDocument) : this.#host.ownerDocument.createElement(MenuRadioItemElement.tagName);
 				item.value = option.value;
@@ -52,9 +51,19 @@ var RadioOptionsController = class {
 				const label = translateText(option.label, translator, option.labelParams);
 				if (this.#config.renderItem) this.#config.renderItem(item, label, option);
 				else this.#setItemLabel(item, label);
+				if (!isUndefined(option.ariaLabel)) item.setAttribute("aria-label", translateText(option.ariaLabel, translator, option.ariaLabelParams));
 				return item;
 			});
 			this.#host.append(...items);
+			const removeStale = () => {
+				for (const child of staleChildren) child.remove();
+			};
+			const replacement = isUndefined(focusedValue) ? void 0 : items.find((item) => item.value === focusedValue) ?? items.find((item) => item.value === state.value);
+			if (replacement) replacement.updateComplete.then(() => {
+				replacement.focus();
+				removeStale();
+			});
+			else removeStale();
 		}
 		const optionsByValue = new Map(state.options.map((option) => [option.value, option]));
 		for (const item of this.#host.querySelectorAll(MenuRadioItemElement.tagName)) {
@@ -69,6 +78,10 @@ var RadioOptionsController = class {
 		const { value } = event.detail;
 		this.#config.onValueChange(value);
 	};
+	#getFocusedItem() {
+		const active = this.#host.getRootNode().activeElement;
+		return active instanceof MenuRadioItemElement && active.parentElement === this.#host ? active : null;
+	}
 	#setItemLabel(item, label) {
 		const labelPart = item.querySelector("[data-part~=\"label\"]");
 		if (labelPart) labelPart.textContent = label;

package/dist/default/version.js

@@ -1,7 +1,7 @@
 //#region src/version.ts
 const readVersion = () => {
 	try {
-		return "10.2.0";
+		return "10.3.0";
 	} catch {}
 	return "UNKNOWN";
 };

package/dist/dev/define/audio/compat-skin.css

@@ -226,7 +226,11 @@ media-container video::-webkit-media-text-track-container {
 
   :where(.media-skin[data-theme="compat"][data-preset="audio"]) .media-dialog-backdrop {
     z-index: 40;
+    transition-property: opacity;
+    transition-duration: .15s;
+    transition-duration: var(--media-duration-slower);
     background-color: #000000bf;
+    transition-timing-function: cubic-bezier(0, 0, .2, 1);
     position: absolute;
     inset: 0;
   }
@@ -235,6 +239,18 @@ media-container video::-webkit-media-text-track-container {
     display: none;
   }
 
+  :where(.media-skin[data-theme="compat"][data-preset="audio"]) .media-dialog-backdrop[data-ending-style] {
+    transition-duration: var(--media-duration);
+  }
+
+  :where(.media-skin[data-theme="compat"][data-preset="audio"]) .media-dialog-backdrop[data-scope="document"] {
+    position: fixed;
+  }
+
+  :where(.media-skin[data-theme="compat"][data-preset="audio"]) .media-dialog-backdrop:is([data-starting-style], [data-ending-style]) {
+    opacity: 0;
+  }
+
   :where(.media-skin[data-theme="compat"][data-preset="audio"]) .media-dialog-close {
     height: calc(var(--media-spacing) * 8);
     width: auto;
@@ -259,8 +275,12 @@ media-container video::-webkit-media-text-track-container {
     background-color: var(--media-popover);
     padding: calc(var(--media-spacing) * 5);
     color: var(--media-popover-foreground);
+    transition-property: opacity, scale;
+    transition-duration: .15s;
+    transition-duration: var(--media-duration-slower);
     border-radius: .5rem;
     outline-style: none;
+    transition-timing-function: cubic-bezier(0, 0, .2, 1);
     display: grid;
     position: absolute;
     top: 50%;
@@ -280,6 +300,15 @@ media-container video::-webkit-media-text-track-container {
     outline-color: var(--media-ring);
   }
 
+  :where(.media-skin[data-theme="compat"][data-preset="audio"]) .media-dialog-popup[data-ending-style] {
+    transition-duration: var(--media-duration);
+  }
+
+  :where(.media-skin[data-theme="compat"][data-preset="audio"]) .media-dialog-popup[data-scope="document"] {
+    max-height: calc(100dvh - 2rem);
+    position: fixed;
+  }
+
   @media (forced-colors: active) {
     :where(.media-skin[data-theme="compat"][data-preset="audio"]) .media-dialog-popup {
       border: 1px solid canvastext;
@@ -292,6 +321,11 @@ media-container video::-webkit-media-text-track-container {
     }
   }
 
+  :where(.media-skin[data-theme="compat"][data-preset="audio"]) .media-dialog-popup:is([data-starting-style], [data-ending-style]) {
+    scale: var(--media-hidden-popup-scale) var(--media-hidden-popup-scale);
+    opacity: 0;
+  }
+
   :where(.media-skin[data-theme="compat"][data-preset="audio"]) .media-dialog-title {
     font-size: 1.125rem;
     font-weight: 700;
@@ -934,7 +968,7 @@ media-container video::-webkit-media-text-track-container {
   :where(.media-skin[data-theme="compat"][data-preset="audio"]) .video-controls-backdrop {
     pointer-events: none;
     z-index: 10;
-    background-image: linear-gradient(to top, #000000b3, #0003, #00000080);
+    background-image: var(--media-controls-gradient);
     position: absolute;
     inset: 0;
   }
@@ -1358,6 +1392,10 @@ media-container video::-webkit-media-text-track-container {
     outline: 2px solid;
   }
 
+  :where(.media-skin[data-theme="compat"][data-preset="audio"]) .media-menu-radio-item[data-custom] {
+    font-style: italic;
+  }
+
   :where(.media-skin[data-theme="compat"][data-preset="audio"]) .media-menu-radio-item[data-highlighted] {
     background-color: var(--media-button-highlight);
   }
@@ -1380,6 +1418,20 @@ media-container video::-webkit-media-text-track-container {
     font-variant-numeric: tabular-nums;
   }
 
+  @supports not (text-fit: shrink) {
+    :where(.media-skin[data-theme="compat"][data-preset="audio"]) .media-playback-rate-button {
+      font-size: min(1em, calc(4em / (var(--media-playback-rate-length, 3) + 1)));
+    }
+  }
+
+  :where(.media-skin[data-theme="compat"][data-preset="audio"]) .media-playback-rate-button-label {
+    text-align: center;
+    white-space: nowrap;
+    text-fit: shrink;
+    width: 80%;
+    min-width: 0;
+  }
+
   :where(.media-skin[data-theme="compat"][data-preset="audio"]) .media-menu-content {
     overscroll-behavior: none;
     max-height: 100%;
@@ -1540,7 +1592,6 @@ media-container video::-webkit-media-text-track-container {
   }
 
   :where(.media-skin[data-theme="compat"][data-preset="audio"]) .media-audio, :where(.media-skin[data-theme="compat"][data-preset="audio"]).media-audio {
-    aspect-ratio: auto;
     background-color: var(--media-background);
     box-shadow: 0 0 #0000,
       0 0 #0000,
@@ -1553,6 +1604,9 @@ media-container video::-webkit-media-text-track-container {
   :where(.media-skin[data-theme="compat"][data-preset="audio"]) .media-container, :where(.media-skin[data-theme="compat"][data-preset="audio"]).media-container {
     border-radius: var(--media-video-border-radius);
     width: 100%;
+    min-width: 0;
+    height: 100%;
+    min-height: 0;
     font-family: var(--media-font-family, "Inter Variable", Inter, ui-sans-serif, system-ui, sans-serif);
     font-size: calc(var(--media-spacing) * 3.25);
     color: var(--media-foreground);
@@ -1582,6 +1636,17 @@ media-container video::-webkit-media-text-track-container {
     outline-style: solid;
     outline-color: var(--media-ring);
   }
+
+  .media-container > slot::slotted(video), :scope.media-container > slot::slotted(video) {
+    border-radius: inherit;
+    object-fit: var(--media-object-fit, contain);
+    object-position: var(--media-object-position, center);
+    width: 100%;
+    max-width: 100%;
+    margin: 0;
+    display: block;
+    height: 100% !important;
+  }
 }
 
 @layer utilities;
@@ -1599,7 +1664,7 @@ media-container video::-webkit-media-text-track-container {
     --media-accent: var(--media-accent-color, color-mix(in oklab, var(--media-default-accent-color) 10%, transparent));
     --media-accent-foreground: var(--media-accent-text-color, currentColor);
     --media-muted: oklch(100% 0 0 / .15);
-    --media-muted-foreground: oklch(100% 0 0 / .65);
+    --media-muted-foreground: color-mix(in oklab, var(--media-foreground) 65%, transparent);
     --media-border: oklch(0% 0 0 / .1);
     --media-ring: oklch(100% 0 0);
     --media-backdrop: oklch(0% 0 0);
@@ -1612,9 +1677,9 @@ media-container video::-webkit-media-text-track-container {
     --media-shadow-current-color: oklch(from currentColor 0 0 0 / clamp(0, calc((l - .5) * .5), .15));
     --media-shadow-subtle-current-color: color-mix(in oklab, var(--media-shadow-current-color) 40%, transparent);
     --media-text-shadow-dialog: 0 1px 0 #00000040;
-    --media-backdrop-filter-surface: blur(16px) saturate(110%);
+    --media-backdrop-filter-surface: blur(16px) saturate(125%);
     --media-backdrop-filter-indicator: blur(8px);
-    --media-backdrop-filter-dialog: blur(16px) saturate(110%);
+    --media-backdrop-filter-dialog: blur(16px) saturate(125%);
     --media-control-corner-shape: round;
     --media-control-radius: 99px;
     --media-control-size: calc(var(--media-spacing) * 9);
@@ -1719,6 +1784,7 @@ media-container video::-webkit-media-text-track-container {
     --media-controls-foreground: var(--media-foreground);
     --media-popover: var(--media-controls);
     --media-popover-foreground: var(--media-foreground);
+    --media-muted: oklch(0% 0 0 / .1);
     --media-surface-border: oklch(0% 0 0 / .05);
     --media-primary: var(--media-accent-color, var(--media-foreground));
     --media-border: oklch(0% 0 0 / .1);
@@ -1737,6 +1803,7 @@ media-container video::-webkit-media-text-track-container {
       --media-foreground: light-dark(oklch(0% 0 0), oklch(100% 0 0));
       --media-controls: light-dark(oklch(100% 0 0 / .5), oklch(0% 0 0 / .4));
       --media-border: light-dark(oklch(0% 0 0 / .1), oklch(100% 0 0 / .1));
+      --media-muted: light-dark(oklch(0% 0 0 / .1), oklch(100% 0 0 / .1));
       --media-default-accent-color: light-dark(oklch(0% 0 0), oklch(100% 0 0));
       --media-default-accent-text-color: light-dark(oklch(100% 0 0), oklch(0% 0 0));
       --media-internal-accent-text-fallback: light-dark(oklch(100% 0 0), oklch(0% 0 0));