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

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

@@ -0,0 +1,46 @@
+import { playerContext } from "../../player/context.js";
+import { PlayerController } from "../../player/controller.js";
+import { PopoverElement } from "../popover/element.js";
+import { VolumePopoverCore, VolumePopoverDataAttrs } from "@videojs/core";
+import { applyElementProps, applyStateDataAttrs, selectVolume } from "@videojs/core/dom";
+//#region src/ui/volume-popover/element.ts
+const unavailableVolume = {
+	volume: 0,
+	muted: false,
+	volumeAvailability: "unsupported",
+	mutedAvailability: "unsupported",
+	setVolume: () => 0,
+	toggleMuted: () => false
+};
+/** A volume-aware popover that keeps its adjacent mute trigger available as a fallback. */
+var VolumePopoverElement = class extends PopoverElement {
+	static {
+		this.tagName = "media-volume-popover";
+	}
+	#core = new VolumePopoverCore();
+	#volume = new PlayerController(this, playerContext, selectVolume);
+	update(changed) {
+		super.update(changed);
+		this.#core.setProps(this);
+		this.#core.setInput({
+			active: this.hasAttribute("data-open"),
+			status: this.hasAttribute("data-starting-style") ? "starting" : this.hasAttribute("data-ending-style") ? "ending" : "idle"
+		});
+		this.#core.setMedia(this.#volume.value ?? unavailableVolume);
+		const state = this.#core.getState();
+		applyStateDataAttrs(this, state, VolumePopoverDataAttrs);
+		this.hidden = state.hidden;
+		if (state.hidden) {
+			this.close();
+			if (this.triggerElement) applyElementProps(this.triggerElement, {
+				"aria-expanded": void 0,
+				"aria-haspopup": void 0,
+				"aria-controls": void 0
+			});
+		}
+	}
+};
+//#endregion
+export { VolumePopoverElement };
+
+//# sourceMappingURL=element.js.map

package/dist/dev/ui/volume-popover/element.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"element.js","names":["#core","#volume"],"sources":["../../../../src/ui/volume-popover/element.ts"],"sourcesContent":["import { VolumePopoverCore, VolumePopoverDataAttrs } from '@videojs/core';\nimport { applyElementProps, applyStateDataAttrs, selectVolume } from '@videojs/core/dom';\nimport type { PropertyValues } from '@videojs/element';\nimport type { MediaVolumeState } from '@videojs/media';\n\nimport { playerContext } from '../../player/context';\nimport { PlayerController } from '../../player/controller';\nimport { PopoverElement } from '../popover/element';\n\nconst unavailableVolume: MediaVolumeState = {\n  volume: 0,\n  muted: false,\n  volumeAvailability: 'unsupported',\n  mutedAvailability: 'unsupported',\n  setVolume: () => 0,\n  toggleMuted: () => false,\n};\n\n/** A volume-aware popover that keeps its adjacent mute trigger available as a fallback. */\nexport class VolumePopoverElement extends PopoverElement {\n  static override readonly tagName = 'media-volume-popover';\n\n  readonly #core = new VolumePopoverCore();\n  readonly #volume = new PlayerController(this, playerContext, selectVolume);\n\n  protected override update(changed: PropertyValues): void {\n    super.update(changed);\n\n    this.#core.setProps(this);\n    this.#core.setInput({\n      active: this.hasAttribute('data-open'),\n      status: this.hasAttribute('data-starting-style')\n        ? 'starting'\n        : this.hasAttribute('data-ending-style')\n          ? 'ending'\n          : 'idle',\n    });\n    this.#core.setMedia(this.#volume.value ?? unavailableVolume);\n\n    const state = this.#core.getState();\n\n    applyStateDataAttrs(this, state, VolumePopoverDataAttrs);\n    this.hidden = state.hidden;\n\n    if (state.hidden) {\n      this.close();\n\n      if (this.triggerElement) {\n        applyElementProps(this.triggerElement, {\n          'aria-expanded': undefined,\n          'aria-haspopup': undefined,\n          'aria-controls': undefined,\n        });\n      }\n    }\n  }\n}\n"],"mappings":";;;;;;AASA,MAAM,oBAAsC;CAC1C,QAAQ;CACR,OAAO;CACP,oBAAoB;CACpB,mBAAmB;CACnB,iBAAiB;CACjB,mBAAmB;AACrB;;AAGA,IAAa,uBAAb,cAA0C,eAAe;;EACpB,KAAA,UAAA;;CAEnC,QAAiB,IAAI,kBAAkB;CACvC,UAAmB,IAAI,iBAAiB,MAAM,eAAe,YAAY;CAEzE,OAA0B,SAA+B;EACvD,MAAM,OAAO,OAAO;EAEpB,KAAKA,MAAM,SAAS,IAAI;EACxB,KAAKA,MAAM,SAAS;GAClB,QAAQ,KAAK,aAAa,WAAW;GACrC,QAAQ,KAAK,aAAa,qBAAqB,IAC3C,aACA,KAAK,aAAa,mBAAmB,IACnC,WACA;EACR,CAAC;EACD,KAAKA,MAAM,SAAS,KAAKC,QAAQ,SAAS,iBAAiB;EAE3D,MAAM,QAAQ,KAAKD,MAAM,SAAS;EAElC,oBAAoB,MAAM,OAAO,sBAAsB;EACvD,KAAK,SAAS,MAAM;EAEpB,IAAI,MAAM,QAAQ;GAChB,KAAK,MAAM;GAEX,IAAI,KAAK,gBACP,kBAAkB,KAAK,gBAAgB;IACrC,iBAAiB,KAAA;IACjB,iBAAiB,KAAA;IACjB,iBAAiB,KAAA;GACnB,CAAC;EAEL;CACF;AACF"}

package/dist/dev/ui/volume-slider/element.d.ts

@@ -0,0 +1,53 @@
+import { UIElement } from "../ui-element.js";
+import { PropertyValues } from "@videojs/element";
+import { Text } from "@videojs/core/i18n";
+//#region src/ui/volume-slider/element.d.ts
+/**
+ * @fires drag-start - Fired when a pointer drag starts.
+ * @fires drag-end - Fired when a pointer drag ends.
+ */
+declare class VolumeSliderElement extends UIElement {
+  #private;
+  static readonly tagName = "media-volume-slider";
+  static properties: {
+    label: {
+      type: StringConstructor;
+    };
+    step: {
+      type: NumberConstructor;
+    };
+    largeStep: {
+      type: NumberConstructor;
+      attribute: string;
+    };
+    wheelStep: {
+      type: NumberConstructor;
+      attribute: string;
+    };
+    orientation: {
+      type: StringConstructor;
+    };
+    disabled: {
+      type: BooleanConstructor;
+    };
+    thumbAlignment: {
+      type: StringConstructor;
+      attribute: string;
+    };
+  };
+  label: Text | string;
+  step: number;
+  largeStep: number;
+  wheelStep: number;
+  orientation: "horizontal" | "vertical";
+  disabled: boolean;
+  thumbAlignment: "center" | "edge";
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+  destroyCallback(): void;
+  protected willUpdate(_changed: PropertyValues): void;
+  protected update(_changed: PropertyValues): void;
+}
+//#endregion
+export { VolumeSliderElement };
+//# sourceMappingURL=element.d.ts.map

package/dist/dev/ui/volume-slider/element.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"element.d.ts","names":[],"sources":["../../../../src/ui/volume-slider/element.ts"],"mappings":";;;;;;;;cA4Ba,4BAA4B;;kBACvB;SAEA;;MACL,MAAI;;;MACL,MAAI;;;MACC,MAAI;MAAU;;;MACd,MAAI;MAAU;;;MACZ,MAAI;;;MACP,MAAI;;;MACE,MAAI;MAAU;;;EAGlC,OAAO;EACP;EACA;EACA;EACA;EACA;EACA;EAYS;EA2DA;EAOA;YAWU,WAAW,UAAU;YAMrB,OAAO,UAAU"}

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

@@ -0,0 +1,167 @@
+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 "../slider/context.js";
+import { VolumeSliderCore, VolumeSliderDataAttrs } from "@videojs/core";
+import { applyElementProps, applyStateDataAttrs, createSlider, createWheelStep, getSliderCSSVars, logMissingFeature, selectControls, selectVolume } 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/volume-slider/element.ts
+/**
+* @fires drag-start - Fired when a pointer drag starts.
+* @fires drag-end - Fired when a pointer drag ends.
+*/
+var VolumeSliderElement = class extends UIElement {
+	constructor(..._args) {
+		super(..._args);
+		this.label = "";
+		this.step = VolumeSliderCore.defaultProps.step;
+		this.largeStep = VolumeSliderCore.defaultProps.largeStep;
+		this.wheelStep = VolumeSliderCore.defaultProps.wheelStep;
+		this.orientation = VolumeSliderCore.defaultProps.orientation;
+		this.disabled = VolumeSliderCore.defaultProps.disabled;
+		this.thumbAlignment = VolumeSliderCore.defaultProps.thumbAlignment;
+		this.#core = new VolumeSliderCore();
+		this.#controlsState = new PlayerController(this, playerContext, selectControls);
+		this.#provider = new ContextProvider(this, { context: sliderContext });
+		this.#volumeState = new PlayerController(this, playerContext, selectVolume);
+		this.#i18n = new I18nController(this, i18nContext);
+		this.#slider = null;
+		this.#disconnect = null;
+		this.#releaseControlsLock = null;
+	}
+	static {
+		this.tagName = "media-volume-slider";
+	}
+	static {
+		this.properties = {
+			label: { type: String },
+			step: { type: Number },
+			largeStep: {
+				type: Number,
+				attribute: "large-step"
+			},
+			wheelStep: {
+				type: Number,
+				attribute: "wheel-step"
+			},
+			orientation: { type: String },
+			disabled: { type: Boolean },
+			thumbAlignment: {
+				type: String,
+				attribute: "thumb-alignment"
+			}
+		};
+	}
+	#core;
+	#controlsState;
+	#provider;
+	#volumeState;
+	#i18n;
+	#slider;
+	#disconnect;
+	#releaseControlsLock;
+	connectedCallback() {
+		super.connectedCallback();
+		if (this.destroyed) return;
+		this.#disconnect = new AbortController();
+		const signal = this.#disconnect.signal;
+		const isDisabled = () => {
+			const volume = this.#volumeState.value;
+			return this.disabled || !volume || volume.volumeAvailability !== "available";
+		};
+		const getPercent = () => (this.#volumeState.value?.volume ?? 0) * 100;
+		const getStepPercent = () => this.#core.getStepPercent();
+		const setVolume = (percent) => this.#setVolume(percent);
+		this.#slider = createSlider({
+			getElement: () => this,
+			getThumbElement: () => this.querySelector("media-slider-thumb"),
+			getOrientation: () => this.orientation,
+			isDisabled,
+			getPercent,
+			getStepPercent,
+			getLargeStepPercent: () => this.#core.getLargeStepPercent(),
+			onValueChange: setVolume,
+			onValueCommit: setVolume,
+			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()
+		});
+		const wheelProps = createWheelStep({
+			isDisabled,
+			getPercent,
+			getStepPercent: () => this.#core.getWheelStepPercent(),
+			onValueChange: setVolume
+		});
+		applyElementProps(this, this.#slider.rootProps, { signal });
+		applyElementProps(this, wheelProps, { signal });
+		applyStyles(this, this.#slider.rootStyle);
+		this.#slider.input.subscribe(() => this.requestUpdate(), { signal });
+		if (!this.#volumeState.value) logMissingFeature(this.localName, this.#volumeState.displayName);
+	}
+	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);
+		this.#core.setFormatLocale(this.#i18n.locale);
+	}
+	update(_changed) {
+		super.update(_changed);
+		if (!this.#slider) return;
+		const media = this.#volumeState.value;
+		if (!media) return;
+		this.#core.setInput(this.#slider.input.current);
+		this.#core.setMedia(media);
+		const state = this.#core.getState();
+		const cssVars = getSliderCSSVars(this.#slider.adjustForAlignment(state));
+		const thumbAttrs = this.#core.getAttrs(state);
+		applyStyles(this, cssVars);
+		applyStateDataAttrs(this, state, VolumeSliderDataAttrs);
+		applyElementProps(this, { hidden: state.hidden ? "" : void 0 });
+		this.#provider.setValue({
+			state,
+			stateAttrMap: VolumeSliderDataAttrs,
+			pointerValue: this.#core.valueFromPercent(state.pointerPercent),
+			thumbAttrs: {
+				...thumbAttrs,
+				"aria-label": translateText(thumbAttrs["aria-label"], this.#i18n.value),
+				"aria-valuetext": translateText(thumbAttrs["aria-valuetext"], this.#i18n.value, this.#core.getValueTextParams(state))
+			},
+			thumbProps: this.#slider.thumbProps,
+			formatValue: (value) => `${Math.round(value)}%`
+		});
+	}
+	#setVolume(percent) {
+		this.#volumeState.value?.setVolume(this.#core.valueFromPercent(percent) / 100);
+	}
+};
+//#endregion
+export { VolumeSliderElement };
+
+//# sourceMappingURL=element.js.map

package/dist/dev/ui/volume-slider/element.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"element.js","names":["#core","#controlsState","#provider","#volumeState","#i18n","#disconnect","#setVolume","#slider","#releaseControlsLock","#releaseControlsVisibilityLock"],"sources":["../../../../src/ui/volume-slider/element.ts"],"sourcesContent":["import { VolumeSliderCore, VolumeSliderDataAttrs } from '@videojs/core';\nimport {\n  applyElementProps,\n  applyStateDataAttrs,\n  createSlider,\n  createWheelStep,\n  getSliderCSSVars,\n  logMissingFeature,\n  type SliderApi,\n  selectControls,\n  selectVolume,\n} from '@videojs/core/dom';\nimport { type Text, translateText } from '@videojs/core/i18n';\nimport type { PropertyDeclarationMap, PropertyValues } from '@videojs/element';\nimport { ContextProvider } from '@videojs/element/context';\nimport { applyStyles } from '@videojs/utils/dom';\n\nimport { i18nContext } from '../../i18n/context';\nimport { I18nController } from '../../i18n/controller';\nimport { playerContext } from '../../player/context';\nimport { PlayerController } from '../../player/controller';\nimport { sliderContext } from '../slider/context';\nimport { UIElement } from '../ui-element';\n\n/**\n * @fires drag-start - Fired when a pointer drag starts.\n * @fires drag-end - Fired when a pointer drag ends.\n */\nexport class VolumeSliderElement extends UIElement {\n  static readonly tagName = 'media-volume-slider';\n\n  static override properties = {\n    label: { type: String },\n    step: { type: Number },\n    largeStep: { type: Number, attribute: 'large-step' },\n    wheelStep: { type: Number, attribute: 'wheel-step' },\n    orientation: { type: String },\n    disabled: { type: Boolean },\n    thumbAlignment: { type: String, attribute: 'thumb-alignment' },\n  } satisfies PropertyDeclarationMap<Exclude<keyof VolumeSliderCore.Props, 'value' | 'min' | 'max'>>;\n\n  label: Text | string = '';\n  step = VolumeSliderCore.defaultProps.step;\n  largeStep = VolumeSliderCore.defaultProps.largeStep;\n  wheelStep = VolumeSliderCore.defaultProps.wheelStep;\n  orientation = VolumeSliderCore.defaultProps.orientation;\n  disabled = VolumeSliderCore.defaultProps.disabled;\n  thumbAlignment = VolumeSliderCore.defaultProps.thumbAlignment;\n\n  readonly #core = new VolumeSliderCore();\n  readonly #controlsState = new PlayerController(this, playerContext, selectControls);\n  readonly #provider = new ContextProvider(this, { context: sliderContext });\n  readonly #volumeState = new PlayerController(this, playerContext, selectVolume);\n  readonly #i18n = new I18nController(this, i18nContext);\n\n  #slider: SliderApi | null = null;\n  #disconnect: AbortController | null = null;\n  #releaseControlsLock: (() => void) | null = null;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n\n    if (this.destroyed) return;\n\n    this.#disconnect = new AbortController();\n    const signal = this.#disconnect.signal;\n\n    const isDisabled = () => {\n      const volume = this.#volumeState.value;\n\n      return this.disabled || !volume || volume.volumeAvailability !== 'available';\n    };\n\n    const getPercent = () => (this.#volumeState.value?.volume ?? 0) * 100;\n    const getStepPercent = () => this.#core.getStepPercent();\n    const setVolume = (percent: number) => this.#setVolume(percent);\n\n    this.#slider = createSlider({\n      getElement: () => this,\n      getThumbElement: () => this.querySelector<HTMLElement>('media-slider-thumb'),\n      getOrientation: () => this.orientation,\n      isDisabled,\n      getPercent,\n      getStepPercent,\n      getLargeStepPercent: () => this.#core.getLargeStepPercent(),\n      onValueChange: setVolume,\n      onValueCommit: setVolume,\n      onPressStart: () => {\n        this.#releaseControlsLock ??= this.#controlsState.value?.requestControlsLock() ?? null;\n      },\n      onPressEnd: () => this.#releaseControlsVisibilityLock(),\n      onDragStart: () => {\n        this.dispatchEvent(new CustomEvent('drag-start', { bubbles: true }));\n      },\n      onDragEnd: () => {\n        this.dispatchEvent(new CustomEvent('drag-end', { bubbles: true }));\n      },\n      adjustPercent: (raw, thumbSize, trackSize) => this.#core.adjustPercentForAlignment(raw, thumbSize, trackSize),\n      onResize: () => this.requestUpdate(),\n    });\n\n    const wheelProps = createWheelStep({\n      isDisabled,\n      getPercent,\n      getStepPercent: () => this.#core.getWheelStepPercent(),\n      onValueChange: setVolume,\n    });\n\n    applyElementProps(this, this.#slider.rootProps, { signal });\n    applyElementProps(this, wheelProps, { signal });\n    applyStyles(this, this.#slider.rootStyle);\n    this.#slider.input.subscribe(() => this.requestUpdate(), { signal });\n\n    if (__DEV__ && !this.#volumeState.value) {\n      logMissingFeature(this.localName, this.#volumeState.displayName!);\n    }\n  }\n\n  override disconnectedCallback(): void {\n    this.#releaseControlsVisibilityLock();\n    super.disconnectedCallback();\n    this.#disconnect?.abort();\n    this.#disconnect = null;\n  }\n\n  override destroyCallback(): void {\n    this.#releaseControlsVisibilityLock();\n    this.#slider?.destroy();\n    super.destroyCallback();\n  }\n\n  #releaseControlsVisibilityLock(): void {\n    this.#releaseControlsLock?.();\n    this.#releaseControlsLock = null;\n  }\n\n  protected override willUpdate(_changed: PropertyValues): void {\n    super.willUpdate(_changed);\n    this.#core.setProps(this);\n    this.#core.setFormatLocale(this.#i18n.locale);\n  }\n\n  protected override update(_changed: PropertyValues): void {\n    super.update(_changed);\n\n    if (!this.#slider) return;\n\n    const media = this.#volumeState.value;\n    if (!media) return;\n\n    this.#core.setInput(this.#slider.input.current);\n    this.#core.setMedia(media);\n    const state = this.#core.getState();\n\n    const cssVars = getSliderCSSVars(this.#slider.adjustForAlignment(state));\n    const thumbAttrs = this.#core.getAttrs(state);\n\n    applyStyles(this, cssVars);\n\n    // Apply data attributes to root.\n    applyStateDataAttrs(this, state, VolumeSliderDataAttrs);\n    applyElementProps(this, { hidden: state.hidden ? '' : undefined });\n\n    // Provide context to child elements.\n    this.#provider.setValue({\n      state,\n      stateAttrMap: VolumeSliderDataAttrs,\n      pointerValue: this.#core.valueFromPercent(state.pointerPercent),\n      thumbAttrs: {\n        ...thumbAttrs,\n        'aria-label': translateText(thumbAttrs['aria-label'], this.#i18n.value),\n        'aria-valuetext': translateText(\n          thumbAttrs['aria-valuetext'],\n          this.#i18n.value,\n          this.#core.getValueTextParams(state)\n        ),\n      },\n      thumbProps: this.#slider.thumbProps,\n      formatValue: (value) => `${Math.round(value)}%`,\n    });\n  }\n\n  #setVolume(percent: number): void {\n    const media = this.#volumeState.value;\n\n    media?.setVolume(this.#core.valueFromPercent(percent) / 100);\n  }\n}\n"],"mappings":"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"}

package/docs/README.md

@@ -1,6 +1,6 @@
 # @videojs/html documentation
 
-Bundled markdown documentation for `@videojs/html` v10.0.0-rc.1.
+Bundled markdown documentation for `@videojs/html` v10.0.0-rc.2.
 
 Start at [`./llms.txt`](./llms.txt) — it's the structured index of every page in this directory.
 

package/docs/concepts/cdn.md

@@ -7,7 +7,7 @@ Video.js can run straight from `<script>` tags. Our CDN serves `@videojs/html` i
 index.html
 
 ```
-<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0-rc.1/video.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0-rc.2/video.js"></script>
 
 <video-player>
   <video-skin>
@@ -61,8 +61,8 @@ The default presets play through the browser’s own `<video>` and `<audio>`. Ev
 html
 
 ```
-<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0-rc.1/video.js"></script>
-<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0-rc.1/media/hlsjs-video.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0-rc.2/video.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0-rc.2/media/hlsjs-video.js"></script>
 ```
 
 Each path mirrors its npm subpath. Elements with more than one playback engine keep the extra flavors in a directory named for the element, such as `media/mux-video/spf.js`. Load one flavor per page: every flavor claims the same tag name, and the first registration wins.
@@ -74,9 +74,9 @@ Each [extension](./overview.md) is its own bundle under `extensions/`, loaded be
 html
 
 ```
-<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0-rc.1/video.js"></script>
-<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0-rc.1/media/mux-video.js"></script>
-<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0-rc.1/extensions/mux-data.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0-rc.2/video.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0-rc.2/media/mux-video.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0-rc.2/extensions/mux-data.js"></script>
 ```
 
 As with media, each path mirrors its npm subpath: `extensions/mux-data.js` registers the element that `@videojs/html/extensions/mux-data` does.
@@ -88,8 +88,8 @@ English ships inside the skin bundles. Each other locale is a bundle under `loca
 html
 
 ```
-<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0-rc.1/locales/es.js"></script>
-<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0-rc.1/video.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0-rc.2/locales/es.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0-rc.2/video.js"></script>
 ```
 
 One bundle exists per locale pack, plus bare-language aliases such as `pt`. For custom strings, see [Internationalize the player](../how-to/internationalize-the-player.md).

package/docs/how-to/installation.md

@@ -59,7 +59,7 @@ yarn
 bun
 
 ```
-<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0-rc.1/video.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0-rc.2/video.js"></script>
 ```
 
 ```

package/docs/how-to/internationalize-the-player.md

@@ -196,8 +196,8 @@ CDN locale modules call `registerI18n` on import. Pin every URL to the same vers
 html
 
 ```
-<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0-rc.1/locales/es.js"></script>
-<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0-rc.1/video.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0-rc.2/locales/es.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0-rc.2/video.js"></script>
 ```
 
 For custom strings, import `registerI18n` from the version-pinned `i18n.js` that matches your player script. The player’s chunks import that exact URL, so a different or unversioned URL loads a second copy of the module with its own registry, and your strings never reach the player. Load your module before the player script so the strings are registered when the elements upgrade:
@@ -205,7 +205,7 @@ For custom strings, import `registerI18n` from the version-pinned `i18n.js` that
 my-locale.js
 
 ```
-import { registerI18n } from 'https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0-rc.1/i18n.js';
+import { registerI18n } from 'https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0-rc.2/i18n.js';
 
 registerI18n('es', { buttons: { play: 'Reproducir', pause: 'Pausa' } });
 ```
@@ -214,7 +214,7 @@ html
 
 ```
 <script type="module" src="/my-locale.js"></script>
-<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0-rc.1/video.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0-rc.2/video.js"></script>
 ```
 
 ### Switch locale at runtime

package/docs/how-to/migrate-from-media-chrome.md

@@ -102,7 +102,7 @@ Choose an audio player and audio skin rather than toggling at runtime.
 
 `media-controls` (built in)
 
-Controls auto-hide after inactivity automatically. The delay is currently fixed; see [Known gaps](#known-gaps).
+Controls auto-hide after inactivity automatically. `autohide="-1"` becomes `visibility="always"` on `media-controls`; the delay is currently fixed, see [Known gaps](#known-gaps).
 
 `fullscreenelement`
 
@@ -387,7 +387,7 @@ The Media Chrome habit of scripting the media element directly still works, unch
 
 These Media Chrome features have no direct equivalent yet. Several can be approximated; see [Workarounds](#workarounds).
 
-*   No configurable `autohide` delay or disable switch (`autohide="-1"`), and no `autohideovercontrols` ([#1728](https://github.com/videojs/v10/issues/1728))
+*   No configurable `autohide` delay and no `autohideovercontrols` ([#1728](https://github.com/videojs/v10/issues/1728)). Disabling autohide (`autohide="-1"`) is covered by `visibility="always"` on `media-controls`; see [Workarounds](#workarounds).
 *   No `defaultduration` placeholder before the media loads ([#1729](https://github.com/videojs/v10/issues/1729))
 *   Volume and muted preferences are not persisted across sessions, so Media Chrome’s `novolumepref` and `nomutedpref` opt-outs have nothing to opt out of ([#944](https://github.com/videojs/v10/issues/944)). Video.js can choose an initial subtitle track from the locale, but it does not yet remember the viewer’s later language choice ([#1786](https://github.com/videojs/v10/issues/1786)).
 *   No `breakpoints` or container-breakpoint attributes; use CSS container queries instead
@@ -401,7 +401,7 @@ Chapters themselves do work. Add a default `<track kind="chapters">` and the pac
 
 ### Disable autohide (`autohide="-1"`)
 
-Packaged skins don’t expose an autohide switch. Install the closest skin’s source and remove its hidden-control styles. That’s safer than overriding internal selectors in a skin you don’t own.
+Set `visibility="always"` on `media-controls` (or `Controls.Root` in React) and the controls stay visible regardless of activity. Packaged skins don’t expose that attribute; to keep a preset skin’s look, [eject the skin](./customize-skins.md#eject-and-edit-a-skin) and set it on the skin’s controls element rather than overriding internal selectors in a skin you don’t own.
 
 ### Breakpoints
 

package/docs/how-to/migrate-from-mux-player.md

@@ -66,9 +66,9 @@ From the CDN, load the video [preset](../concepts/presets.md), the Mux media, an
 html
 
 ```
-<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0-rc.1/video.js"></script>
-<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0-rc.1/media/mux-video.js"></script>
-<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0-rc.1/extensions/mux-data.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0-rc.2/video.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0-rc.2/media/mux-video.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0-rc.2/extensions/mux-data.js"></script>
 
 <video-player content-title="Test VOD">
   <video-skin style="aspect-ratio: 16 / 9">
@@ -474,8 +474,8 @@ Register the live preset and Mux media. From the CDN:
 html
 
 ```
-<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0-rc.1/live-video.js"></script>
-<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0-rc.1/media/mux-video.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0-rc.2/live-video.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0-rc.2/media/mux-video.js"></script>
 
 <live-video-player>
   <live-video-skin>
@@ -677,7 +677,7 @@ Ordered roughly by how many migrations they’ll touch.
 
 *   Two skins, against Mux Player’s five themes, and no runtime theme switch. That’s a deliberate trade, fewer looks you can eject, but it’s a real difference if you shipped `theme="classic"`.
 *   Lazy loading (`loading="viewport|page"`) has no equivalent.
-*   The controls auto-hide delay isn’t configurable, and there’s no disabled state for the controls ([#1728](https://github.com/videojs/v10/issues/1728)).
+*   The controls auto-hide delay isn’t configurable ([#1728](https://github.com/videojs/v10/issues/1728)). Always-visible controls are available through `visibility="always"` on the controls component in a custom or ejected skin.
 *   Nothing persists between sessions: volume, captions language, speed, quality. That’s out of scope for GA ([#944](https://github.com/videojs/v10/issues/944)). Default subtitle language is tracked at [#1423](https://github.com/videojs/v10/issues/1423), though Mux users can set `source.playback.defaultSubtitlesLang` and let the HLS playlist decide.
 *   Smaller conveniences without homes yet: debug mode ([#1406](https://github.com/videojs/v10/issues/1406)) and autoplay with a muted fallback ([#1039](https://github.com/videojs/v10/issues/1039)). Unmuting from zero volume already restores a sensible level, so Mux Player’s smart-unmute behavior carries over.
 

package/docs/how-to/migrate-from-plyr.md

@@ -50,7 +50,7 @@ The easiest path is the CDN:
 html
 
 ```
-<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0-rc.1/video-minimal.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0-rc.2/video-minimal.js"></script>
 
 <video-player poster="/path/to/poster.jpg">
   <video-minimal-skin>
@@ -90,7 +90,7 @@ Replace `<video>` with `<hls-video>`. If you’re using the CDN, add an addition
 html
 
 ```
-<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0-rc.1/media/hls-video.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0-rc.2/media/hls-video.js"></script>
 ```
 
 For a package-manager installation, install SPF and add its façade import:
@@ -118,7 +118,7 @@ Replace `<video>` with `<dash-video>`. If you’re using the CDN, add an additio
 html
 
 ```
-<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0-rc.1/media/dash-video.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0-rc.2/media/dash-video.js"></script>
 ```
 
 For a package-manager installation, install dash.js and add its façade import:
@@ -195,7 +195,7 @@ html
 
 ```
 <script type="module">
-  import { registerI18n } from 'https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0-rc.1/i18n.js';
+  import { registerI18n } from 'https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0-rc.2/i18n.js';
 
   registerI18n('en', {
     buttons: {
@@ -208,7 +208,7 @@ html
   });
 </script>
 
-<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0-rc.1/video-minimal.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0-rc.2/video-minimal.js"></script>
 
 <video-player>
   <video-minimal-skin>
@@ -255,7 +255,7 @@ Set `aspect-ratio` in CSS on the skin component.
 
 `hideControls`
 
-Preset skins auto-hide controls based on activity. The delay is currently not configurable.
+Preset skins auto-hide controls based on activity. `hideControls: false` maps to `visibility="always"` on the controls component in a custom or ejected skin; the delay is currently not configurable.
 
 `clickToPlay`
 
@@ -402,5 +402,5 @@ For changes to controls, layout, or icons, eject the skin into your project. Its
 *   Plyr’s full-window fullscreen fallback has no matching Video.js feature. This was designed as a fallback when the Fullscreen API wasn’t supported, but given [browser support for fullscreen is around 96%](https://caniuse.com/fullscreen), it’s unlikely to be required.
 *   Plain MP4 source arrays with `size` metadata do not automatically create a quality menu. Use Mux, HLS, or DASH for adaptive quality when possible. A simpler source-driven quality menu may be considered later.
 *   Preset skins segment the time slider and show chapter titles when the media includes a default `<track kind="chapters">`. Dedicated cue-point APIs are not complete yet; see [#1442](https://github.com/videojs/v10/issues/1442).
-*   The controls auto-hide delay and disabled state are not configurable yet ([#1728](https://github.com/videojs/v10/issues/1728)).
+*   The controls auto-hide delay is not configurable yet ([#1728](https://github.com/videojs/v10/issues/1728)). Disabling auto-hide is possible with `visibility="always"` on the controls component, but not from a preset skin’s attributes.
 *   Native controls are not automatically removed when custom controls load; see [#1160](https://github.com/videojs/v10/issues/1160).

package/docs/how-to/migrate-from-video-js-8.md

@@ -67,7 +67,7 @@ v10 ships web components, so the migration keeps its declarative feel. One scrip
 html
 
 ```
-<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0-rc.1/video.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0-rc.2/video.js"></script>
 
 <video-player poster="/poster.jpg">
   <video-skin class="aspect-video">
@@ -240,7 +240,7 @@ no equivalent; see [Known gaps](#known-gaps)
 
 `inactivityTimeout`
 
-not configurable yet ([#1728](https://github.com/videojs/v10/issues/1728))
+delay not configurable yet ([#1728](https://github.com/videojs/v10/issues/1728)); `inactivityTimeout: 0` maps to `visibility="always"` on the controls component
 
 `errorDisplay`, `notSupportedMessage`
 
@@ -313,7 +313,7 @@ For HLS from the CDN:
 html
 
 ```
-<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0-rc.1/media/hls-video.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0-rc.2/media/hls-video.js"></script>
 ```
 
 With a package manager, install SPF and import the HTML registration instead:
@@ -612,7 +612,7 @@ Ordered roughly by how likely each is to block a v8 migration.
 *   Nothing persists between sessions: volume, captions language, speed, quality. That’s out of scope for GA ([#944](https://github.com/videojs/v10/issues/944)). Default subtitle language is tracked at [#1423](https://github.com/videojs/v10/issues/1423).
 *   No VHS-equivalent tuning surface. Engine settings belong to the engine you chose, and the default HLS component deliberately exposes few of them.
 *   Chapters render in the time slider from a `<track kind="chapters">`, and its segments reflect `data-active`. There is no player-level active chapter value or chapter menu, so v8’s chapters menu has no equivalent ([#1873](https://github.com/videojs/v10/issues/1873)). Cue points aren’t implemented ([#1442](https://github.com/videojs/v10/issues/1442)).
-*   The controls auto-hide delay isn’t configurable, so v8’s `inactivityTimeout` has no equivalent ([#1728](https://github.com/videojs/v10/issues/1728)).
+*   The controls auto-hide delay isn’t configurable, so arbitrary `inactivityTimeout` values have no equivalent ([#1728](https://github.com/videojs/v10/issues/1728)). The common `inactivityTimeout: 0` case is covered by `visibility="always"` on the controls component in a custom or ejected skin.
 *   No full-window fullscreen fallback. v8 had one for browsers without the Fullscreen API; [support is around 96%](https://caniuse.com/fullscreen) now.
 *   Multiple `<source>` elements with `size` metadata don’t become a quality menu. Use HLS or DASH for adaptive quality; picking renditions by resolution won’t be added ([#1415](https://github.com/videojs/v10/issues/1415)).
 *   Two skins, and no runtime theme switch.

package/docs/how-to/play-live-streams.md

@@ -64,7 +64,7 @@ Two features describe liveness:
 
 The [time feature](../reference/feature-time.md) adjusts for live playback: `duration` reports the live edge (the end of the seekable range) and keeps growing as the stream continues.
 
-LiveButton reads this state: it renders as an active “go to live” control while playback is behind the edge, seeks to the edge on activation, and goes inactive at the edge.
+LiveButton reads this state: it renders as an active “go to live” control while playback is behind the edge, seeks to the edge on activation, and goes inactive at the edge. Until the media reports a `seekable` range — before metadata loads, or for non-live media — the button is disabled (`data-disabled`) because there is no edge to seek to. Custom live UIs should treat “behind the edge” and “actionable” as separate states.
 
 ## Availability and constraints
 

package/docs/how-to/self-host-the-player.md

@@ -49,7 +49,7 @@ Unpack it into whatever your server treats as static files:
 bash
 
 ```
-VIDEOJS_VERSION=10.0.0-rc.1
+VIDEOJS_VERSION=10.0.0-rc.2
 curl -fLO "https://github.com/videojs/v10/releases/download/@videojs/cdn@${VIDEOJS_VERSION}/videojs-cdn-${VIDEOJS_VERSION}.zip"
 unzip "videojs-cdn-${VIDEOJS_VERSION}.zip" -d public/
 ```
@@ -59,7 +59,7 @@ Then point a script tag at the player you want:
 html
 
 ```
-<script type="module" src="/videojs-cdn-10.0.0-rc.1/video.js"></script>
+<script type="module" src="/videojs-cdn-10.0.0-rc.2/video.js"></script>
 ```
 
 The archive holds the same production bundles the CDN serves, minus sourcemaps and development builds. Every path inside it is relative, so it runs from any origin with no outbound requests. `SHA256SUMS` on the release verifies the download.
@@ -75,17 +75,17 @@ composer.json
       "type": "package",
       "package": {
         "name": "videojs/cdn",
-        "version": "10.0.0-rc.1",
+        "version": "10.0.0-rc.2",
         "type": "drupal-library",
         "dist": {
           "type": "zip",
-          "url": "https://github.com/videojs/v10/releases/download/@videojs/cdn@10.0.0-rc.1/videojs-cdn-10.0.0-rc.1.zip"
+          "url": "https://github.com/videojs/v10/releases/download/@videojs/cdn@10.0.0-rc.2/videojs-cdn-10.0.0-rc.2.zip"
         }
       }
     }
   ],
   "require": {
-    "videojs/cdn": "10.0.0-rc.1"
+    "videojs/cdn": "10.0.0-rc.2"
   }
 }
 ```

package/docs/how-to/show-and-hide-controls.md

@@ -152,7 +152,15 @@ The feature needs the player container for activity tracking; without a containe
 
 ### Always-visible controls
 
-Skip the visibility wiring: render your controls without consuming `controlsVisible`. State still tracks activity for anything else that needs it.
+Set `visibility="always"` on [Controls](../reference/controls.md). The controls stay visible and report the user as active while the feature keeps tracking activity for anything else that needs it. The packaged audio skins use this mode.
+
+html
+
+```
+<media-controls visibility="always">
+  <media-controls-content class="controls">...</media-controls-content>
+</media-controls>
+```
 
 ### Custom show/hide styling