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

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

@@ -0,0 +1,114 @@
+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 };
+
+//# sourceMappingURL=element.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"element.js","names":["#i18n","#defaultContent","#disconnect","#getMedia"],"sources":["../../../../src/ui/live-button/element.ts"],"sourcesContent":["import { LiveButtonCore, LiveButtonDataAttrs, type LiveButtonMediaState } from '@videojs/core';\nimport {\n  applyElementProps,\n  applyStateDataAttrs,\n  createButton,\n  logMissingFeature,\n  selectBuffer,\n  selectLive,\n  selectTime,\n} from '@videojs/core/dom';\nimport { resolveText, type Text, translateText } from '@videojs/core/i18n';\nimport type { PropertyDeclarationMap, PropertyValues } from '@videojs/element';\nimport type { State } from '@videojs/store';\n\nimport { i18nContext } from '../../i18n/context';\nimport { I18nController } from '../../i18n/controller';\nimport { playerContext } from '../../player/context';\nimport { PlayerController } from '../../player/controller';\nimport { UIElement } from '../ui-element';\n\n/**\n * `<media-live-button>` — selects from `live`, `time`, and `buffer` features and composes them into the\n * `LiveButtonMediaState` consumed by `LiveButtonCore`.\n *\n * Doesn't extend `MediaButtonElement` because that base couples a button to a single feature selector; the LiveButton\n * needs three.\n */\nexport class LiveButtonElement extends UIElement {\n  static readonly tagName = 'media-live-button';\n\n  static override properties: PropertyDeclarationMap = {\n    label: { type: String },\n    disabled: { type: Boolean },\n  };\n\n  disabled = false;\n  label: Text | string = '';\n\n  protected readonly core = new LiveButtonCore();\n\n  protected readonly live = new PlayerController(this, playerContext, selectLive);\n  protected readonly time = new PlayerController(this, playerContext, selectTime);\n  protected readonly buffer = new PlayerController(this, playerContext, selectBuffer);\n  readonly #i18n = new I18nController(this, i18nContext);\n\n  get $state(): State<LiveButtonCore.State> {\n    return this.core.state;\n  }\n\n  #defaultContent = false;\n  #disconnect: AbortController | null = null;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n\n    if (this.destroyed) return;\n\n    this.#defaultContent ||= !this.textContent?.trim();\n\n    if (this.#defaultContent) {\n      this.textContent = translateText(LiveButtonCore.defaultText, this.#i18n.value);\n    }\n\n    this.#disconnect = new AbortController();\n\n    const buttonProps = createButton({\n      onActivate: () => {\n        const media = this.#getMedia();\n\n        if (media) this.core.seekToLive(media);\n      },\n      isDisabled: () => this.disabled || !this.#getMedia(),\n    });\n\n    applyElementProps(this, buttonProps, { signal: this.#disconnect.signal });\n\n    if (__DEV__ && !this.#getMedia()) {\n      logMissingFeature(this.localName, this.live.displayName ?? 'live');\n    }\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.#disconnect?.abort();\n    this.#disconnect = null;\n  }\n\n  /** Returns the button's current label derived from media state. */\n  getLabel(): string | undefined {\n    return this.core.state.current.label ? resolveText(this.core.state.current.label) : undefined;\n  }\n\n  /** Resolved label for tooltips and other display surfaces. */\n  getResolvedLabel(): string | undefined {\n    const media = this.#getMedia();\n    if (!media) return undefined;\n\n    const state = this.core.getState();\n\n    return translateText(this.core.getLabel(state), this.#i18n.value);\n  }\n\n  protected override willUpdate(changed: PropertyValues): void {\n    super.willUpdate(changed);\n    this.core.setProps(this);\n  }\n\n  protected override update(changed: PropertyValues): void {\n    super.update(changed);\n\n    if (this.#defaultContent) {\n      this.textContent = translateText(LiveButtonCore.defaultText, this.#i18n.value);\n    }\n\n    const media = this.#getMedia();\n    if (!media) return;\n\n    this.core.setMedia(media);\n    const state = this.core.getState();\n    const attrs = this.core.getAttrs(state);\n\n    applyElementProps(this, {\n      ...attrs,\n      'aria-label': translateText(attrs['aria-label'], this.#i18n.value),\n    });\n    applyStateDataAttrs(this, state, LiveButtonDataAttrs);\n  }\n\n  /**\n   * Compose the LiveButton media state from the three feature slices. Returns `null` when any are missing so the button\n   * stays disabled until all three features are registered on the player.\n   */\n  #getMedia(): LiveButtonMediaState | null {\n    const live = this.live.value;\n    const time = this.time.value;\n    const buffer = this.buffer.value;\n    if (!live || !time || !buffer) return null;\n\n    return {\n      currentTime: time.currentTime,\n      seek: time.seek,\n      seekable: buffer.seekable,\n      liveEdgeStart: live.liveEdgeStart,\n      targetLiveWindow: live.targetLiveWindow,\n    };\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;AA2BA,IAAa,oBAAb,cAAuC,UAAU;;;EAQpC,KAAA,WAAA;EACY,KAAA,QAAA;EAEG,KAAA,OAAA,IAAI,eAAe;EAEnB,KAAA,OAAA,IAAI,iBAAiB,MAAM,eAAe,UAAU;EACpD,KAAA,OAAA,IAAI,iBAAiB,MAAM,eAAe,UAAU;EAClD,KAAA,SAAA,IAAI,iBAAiB,MAAM,eAAe,YAAY;EACjE,KAAA,QAAA,IAAI,eAAe,MAAM,WAAW;EAMnC,KAAA,kBAAA;EACoB,KAAA,cAAA;;;EAtBZ,KAAA,UAAA;;;EAE2B,KAAA,aAAA;GACnD,OAAO,EAAE,MAAM,OAAO;GACtB,UAAU,EAAE,MAAM,QAAQ;EAC5B;;CAUA;CAEA,IAAI,SAAsC;EACxC,OAAO,KAAK,KAAK;CACnB;CAEA;CACA;CAEA,oBAAmC;EACjC,MAAM,kBAAkB;EAExB,IAAI,KAAK,WAAW;EAEpB,KAAKC,oBAAoB,CAAC,KAAK,aAAa,KAAK;EAEjD,IAAI,KAAKA,iBACP,KAAK,cAAc,cAAc,eAAe,aAAa,KAAKD,MAAM,KAAK;EAG/E,KAAKE,cAAc,IAAI,gBAAgB;EAEvC,MAAM,cAAc,aAAa;GAC/B,kBAAkB;IAChB,MAAM,QAAQ,KAAKC,UAAU;IAE7B,IAAI,OAAO,KAAK,KAAK,WAAW,KAAK;GACvC;GACA,kBAAkB,KAAK,YAAY,CAAC,KAAKA,UAAU;EACrD,CAAC;EAED,kBAAkB,MAAM,aAAa,EAAE,QAAQ,KAAKD,YAAY,OAAO,CAAC;CAK1E;CAEA,uBAAsC;EACpC,MAAM,qBAAqB;EAC3B,KAAKA,aAAa,MAAM;EACxB,KAAKA,cAAc;CACrB;;CAGA,WAA+B;EAC7B,OAAO,KAAK,KAAK,MAAM,QAAQ,QAAQ,YAAY,KAAK,KAAK,MAAM,QAAQ,KAAK,IAAI,KAAA;CACtF;;CAGA,mBAAuC;EAErC,IAAI,CADU,KAAKC,UACV,GAAG,OAAO,KAAA;EAEnB,MAAM,QAAQ,KAAK,KAAK,SAAS;EAEjC,OAAO,cAAc,KAAK,KAAK,SAAS,KAAK,GAAG,KAAKH,MAAM,KAAK;CAClE;CAEA,WAA8B,SAA+B;EAC3D,MAAM,WAAW,OAAO;EACxB,KAAK,KAAK,SAAS,IAAI;CACzB;CAEA,OAA0B,SAA+B;EACvD,MAAM,OAAO,OAAO;EAEpB,IAAI,KAAKC,iBACP,KAAK,cAAc,cAAc,eAAe,aAAa,KAAKD,MAAM,KAAK;EAG/E,MAAM,QAAQ,KAAKG,UAAU;EAC7B,IAAI,CAAC,OAAO;EAEZ,KAAK,KAAK,SAAS,KAAK;EACxB,MAAM,QAAQ,KAAK,KAAK,SAAS;EACjC,MAAM,QAAQ,KAAK,KAAK,SAAS,KAAK;EAEtC,kBAAkB,MAAM;GACtB,GAAG;GACH,cAAc,cAAc,MAAM,eAAe,KAAKH,MAAM,KAAK;EACnE,CAAC;EACD,oBAAoB,MAAM,OAAO,mBAAmB;CACtD;;;;;CAMA,YAAyC;EACvC,MAAM,OAAO,KAAK,KAAK;EACvB,MAAM,OAAO,KAAK,KAAK;EACvB,MAAM,SAAS,KAAK,OAAO;EAC3B,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,QAAQ,OAAO;EAEtC,OAAO;GACL,aAAa,KAAK;GAClB,MAAM,KAAK;GACX,UAAU,OAAO;GACjB,eAAe,KAAK;GACpB,kBAAkB,KAAK;EACzB;CACF;AACF"}

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

@@ -1 +1 @@
-{"version":3,"file":"media-button-element.js","names":["#i18n","#hotkeyRegistry","#disconnect","#syncHotkeyShortcut","#lastHotkeyShortcut"],"sources":["../../../src/ui/media-button-element.ts"],"sourcesContent":["import type {\n  ButtonState,\n  InferComponentState,\n  InferMediaState,\n  MediaButtonComponent,\n  StateAttrMap,\n} from '@videojs/core';\nimport {\n  applyElementProps,\n  applyStateDataAttrs,\n  type ButtonActivationSource,\n  createButton,\n  HOTKEY_SHORTCUT_CHANGE_EVENT,\n  logMissingFeature,\n  type UIEvent,\n} from '@videojs/core/dom';\nimport { isText, resolveText, type Text, translateText } from '@videojs/core/i18n';\nimport type { PropertyDeclarationMap, PropertyValues } from '@videojs/element';\nimport type { State } from '@videojs/store';\nimport { isBoolean, isObject } from '@videojs/utils/predicate';\n\nimport { i18nContext } from '../i18n/context';\nimport { I18nController } from '../i18n/controller';\nimport type { PlayerController } from '../player/player-controller';\nimport { AriaKeyShortcutsController } from './hotkey/aria-key-shortcuts-controller';\nimport { UIElement } from './ui-element';\n\ntype LabelParams = Record<string, string | number>;\ntype LabelParamsCore<Core extends MediaButtonComponent> = Core & {\n  getLabelParams?: (state: InferComponentState<Core>) => LabelParams | undefined;\n};\n\nfunction getLabelParams<Core extends MediaButtonComponent>(\n  core: Core,\n  state: InferComponentState<Core>\n): LabelParams | undefined {\n  return (core as LabelParamsCore<Core>).getLabelParams?.(state);\n}\n\n/** Abstract base for HTML custom elements that render a media-control button. */\nexport abstract class MediaButtonElement<Core extends MediaButtonComponent> extends UIElement {\n  static override properties: PropertyDeclarationMap = {\n    label: { type: String },\n    disabled: { type: Boolean },\n  };\n\n  disabled = false;\n  label: Text | string = '';\n\n  protected abstract readonly core: Core;\n  protected abstract readonly stateAttrMap: StateAttrMap<InferComponentState<Core>>;\n  protected abstract readonly mediaState: PlayerController<any, InferMediaState<Core> | undefined>;\n\n  protected abstract activate(\n    state: InferMediaState<Core>,\n    event: UIEvent,\n    source: ButtonActivationSource\n  ): void | Promise<void>;\n\n  protected getIsButtonDisabled(): boolean {\n    return this.disabled || !this.mediaState.value;\n  }\n\n  protected handleActivate(event: UIEvent, source: ButtonActivationSource): void {\n    // `createButton` invokes `onActivate` synchronously from click/keyup\n    // handlers, so any rejection here would be unhandled. Log in dev for\n    // visibility but absorb the failure at this UI boundary.\n    Promise.resolve(this.activate(this.mediaState.value!, event, source)).catch((error) => {\n      if (__DEV__) console.error(`[${this.localName}]`, error);\n    });\n  }\n\n  /** Override to set the hotkey action name for `aria-keyshortcuts`. */\n  protected readonly hotkeyAction: string | undefined = undefined;\n\n  /** Override to match hotkeys that use action values, such as seek steps. */\n  protected get hotkeyValue(): number | undefined {\n    return undefined;\n  }\n\n  get $state(): State<ButtonState> {\n    return this.core.state;\n  }\n\n  #disconnect: AbortController | null = null;\n  #hotkeyRegistry: AriaKeyShortcutsController | null = null;\n  #lastHotkeyShortcut: string | undefined;\n  readonly #i18n = new I18nController(this, i18nContext);\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n\n    if (this.destroyed) return;\n\n    if (this.hotkeyAction && !this.#hotkeyRegistry) {\n      this.#hotkeyRegistry = new AriaKeyShortcutsController(this, this.hotkeyAction, {\n        value: () => this.hotkeyValue,\n      });\n    }\n\n    this.#disconnect = new AbortController();\n\n    const buttonProps = createButton({\n      onActivate: (event, source) => this.handleActivate(event, source),\n      isDisabled: () => this.getIsButtonDisabled(),\n    });\n\n    applyElementProps(this, buttonProps, { signal: this.#disconnect.signal });\n\n    if (__DEV__ && !this.mediaState.value && this.mediaState.displayName) {\n      logMissingFeature(this.localName, this.mediaState.displayName);\n    }\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.#disconnect?.abort();\n    this.#disconnect = null;\n  }\n\n  /** Returns the button's current label derived from media state. */\n  getLabel(): string | undefined {\n    return this.core.state.current.label ? resolveText(this.core.state.current.label) : undefined;\n  }\n\n  getShortcut(): string | undefined {\n    return this.#hotkeyRegistry?.shortcut;\n  }\n\n  /** Resolved label for tooltips and other display surfaces. */\n  getResolvedLabel(): string | undefined {\n    const media = this.mediaState.value;\n    if (!media) return undefined;\n\n    this.core.setMedia(media);\n    const state = this.core.getState() as InferComponentState<Core>;\n\n    return translateText(this.core.getLabel(state), this.#i18n.value, getLabelParams(this.core, state));\n  }\n\n  protected override willUpdate(changed: PropertyValues): void {\n    super.willUpdate(changed);\n    this.core.setProps?.(this);\n  }\n\n  protected override update(changed: PropertyValues): void {\n    super.update(changed);\n\n    const media = this.mediaState.value;\n\n    this.#syncHotkeyShortcut();\n\n    if (!media) return;\n\n    this.core.setMedia(media);\n    const state = this.core.getState() as InferComponentState<Core>;\n    const attrs = (this.core.getAttrs?.(state) ?? {}) as Record<string, unknown>;\n\n    if (isText(attrs['aria-label'])) {\n      attrs['aria-label'] = translateText(attrs['aria-label'], this.#i18n.value, getLabelParams(this.core, state));\n    }\n\n    applyElementProps(this, {\n      ...attrs,\n      'aria-keyshortcuts': this.#hotkeyRegistry?.aria,\n      // A button whose core reports itself hidden takes the real attribute, not\n      // just the data one: `data-hidden` is a styling hook a skin may or may not\n      // act on, where `hidden` removes the control the way the React components\n      // do by rendering nothing.\n      ...(isHideable(state) && { hidden: state.hidden ? '' : undefined }),\n    });\n    applyStateDataAttrs(this, state, this.stateAttrMap);\n  }\n\n  #syncHotkeyShortcut(): void {\n    const shortcut = this.getShortcut();\n    if (shortcut === this.#lastHotkeyShortcut) return;\n\n    this.#lastHotkeyShortcut = shortcut;\n    this.dispatchEvent(new CustomEvent(HOTKEY_SHORTCUT_CHANGE_EVENT));\n  }\n}\n\n/** Whether a button's core reports whether it should be shown at all. */\nfunction isHideable(state: unknown): state is { hidden: boolean } {\n  return isObject(state) && isBoolean((state as { hidden?: unknown }).hidden);\n}\n"],"mappings":"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"}
+{"version":3,"file":"media-button-element.js","names":["#i18n","#hotkeyRegistry","#disconnect","#syncHotkeyShortcut","#lastHotkeyShortcut"],"sources":["../../../src/ui/media-button-element.ts"],"sourcesContent":["import type {\n  ButtonState,\n  InferComponentState,\n  InferMediaState,\n  MediaButtonComponent,\n  StateAttrMap,\n} from '@videojs/core';\nimport {\n  applyElementProps,\n  applyStateDataAttrs,\n  type ButtonActivationSource,\n  createButton,\n  HOTKEY_SHORTCUT_CHANGE_EVENT,\n  logMissingFeature,\n  type UIEvent,\n} from '@videojs/core/dom';\nimport { isText, resolveText, type Text, translateText } from '@videojs/core/i18n';\nimport type { PropertyDeclarationMap, PropertyValues } from '@videojs/element';\nimport type { State } from '@videojs/store';\nimport { isBoolean, isObject } from '@videojs/utils/predicate';\n\nimport { i18nContext } from '../i18n/context';\nimport { I18nController } from '../i18n/controller';\nimport type { PlayerController } from '../player/controller';\nimport { AriaKeyShortcutsController } from './hotkey/aria-key-shortcuts-controller';\nimport { UIElement } from './ui-element';\n\ntype LabelParams = Record<string, string | number>;\ntype LabelParamsCore<Core extends MediaButtonComponent> = Core & {\n  getLabelParams?: (state: InferComponentState<Core>) => LabelParams | undefined;\n};\n\nfunction getLabelParams<Core extends MediaButtonComponent>(\n  core: Core,\n  state: InferComponentState<Core>\n): LabelParams | undefined {\n  return (core as LabelParamsCore<Core>).getLabelParams?.(state);\n}\n\n/** Abstract base for HTML custom elements that render a media-control button. */\nexport abstract class MediaButtonElement<Core extends MediaButtonComponent> extends UIElement {\n  static override properties: PropertyDeclarationMap = {\n    label: { type: String },\n    disabled: { type: Boolean },\n  };\n\n  disabled = false;\n  label: Text | string = '';\n\n  protected abstract readonly core: Core;\n  protected abstract readonly stateAttrMap: StateAttrMap<InferComponentState<Core>>;\n  protected abstract readonly mediaState: PlayerController<any, InferMediaState<Core> | undefined>;\n\n  protected abstract activate(\n    state: InferMediaState<Core>,\n    event: UIEvent,\n    source: ButtonActivationSource\n  ): void | Promise<void>;\n\n  protected getIsButtonDisabled(): boolean {\n    return this.disabled || !this.mediaState.value;\n  }\n\n  protected handleActivate(event: UIEvent, source: ButtonActivationSource): void {\n    // `createButton` invokes `onActivate` synchronously from click/keyup\n    // handlers, so any rejection here would be unhandled. Log in dev for\n    // visibility but absorb the failure at this UI boundary.\n    Promise.resolve(this.activate(this.mediaState.value!, event, source)).catch((error) => {\n      if (__DEV__) console.error(`[${this.localName}]`, error);\n    });\n  }\n\n  /** Override to set the hotkey action name for `aria-keyshortcuts`. */\n  protected readonly hotkeyAction: string | undefined = undefined;\n\n  /** Override to match hotkeys that use action values, such as seek steps. */\n  protected get hotkeyValue(): number | undefined {\n    return undefined;\n  }\n\n  get $state(): State<ButtonState> {\n    return this.core.state;\n  }\n\n  #disconnect: AbortController | null = null;\n  #hotkeyRegistry: AriaKeyShortcutsController | null = null;\n  #lastHotkeyShortcut: string | undefined;\n  readonly #i18n = new I18nController(this, i18nContext);\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n\n    if (this.destroyed) return;\n\n    if (this.hotkeyAction && !this.#hotkeyRegistry) {\n      this.#hotkeyRegistry = new AriaKeyShortcutsController(this, this.hotkeyAction, {\n        value: () => this.hotkeyValue,\n      });\n    }\n\n    this.#disconnect = new AbortController();\n\n    const buttonProps = createButton({\n      onActivate: (event, source) => this.handleActivate(event, source),\n      isDisabled: () => this.getIsButtonDisabled(),\n    });\n\n    applyElementProps(this, buttonProps, { signal: this.#disconnect.signal });\n\n    if (__DEV__ && !this.mediaState.value && this.mediaState.displayName) {\n      logMissingFeature(this.localName, this.mediaState.displayName);\n    }\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.#disconnect?.abort();\n    this.#disconnect = null;\n  }\n\n  /** Returns the button's current label derived from media state. */\n  getLabel(): string | undefined {\n    return this.core.state.current.label ? resolveText(this.core.state.current.label) : undefined;\n  }\n\n  getShortcut(): string | undefined {\n    return this.#hotkeyRegistry?.shortcut;\n  }\n\n  /** Resolved label for tooltips and other display surfaces. */\n  getResolvedLabel(): string | undefined {\n    const media = this.mediaState.value;\n    if (!media) return undefined;\n\n    this.core.setMedia(media);\n    const state = this.core.getState() as InferComponentState<Core>;\n\n    return translateText(this.core.getLabel(state), this.#i18n.value, getLabelParams(this.core, state));\n  }\n\n  protected override willUpdate(changed: PropertyValues): void {\n    super.willUpdate(changed);\n    this.core.setProps?.(this);\n  }\n\n  protected override update(changed: PropertyValues): void {\n    super.update(changed);\n\n    const media = this.mediaState.value;\n\n    this.#syncHotkeyShortcut();\n\n    if (!media) return;\n\n    this.core.setMedia(media);\n    const state = this.core.getState() as InferComponentState<Core>;\n    const attrs = (this.core.getAttrs?.(state) ?? {}) as Record<string, unknown>;\n\n    if (isText(attrs['aria-label'])) {\n      attrs['aria-label'] = translateText(attrs['aria-label'], this.#i18n.value, getLabelParams(this.core, state));\n    }\n\n    applyElementProps(this, {\n      ...attrs,\n      'aria-keyshortcuts': this.#hotkeyRegistry?.aria,\n      // A button whose core reports itself hidden takes the real attribute, not\n      // just the data one: `data-hidden` is a styling hook a skin may or may not\n      // act on, where `hidden` removes the control the way the React components\n      // do by rendering nothing.\n      ...(isHideable(state) && { hidden: state.hidden ? '' : undefined }),\n    });\n    applyStateDataAttrs(this, state, this.stateAttrMap);\n  }\n\n  #syncHotkeyShortcut(): void {\n    const shortcut = this.getShortcut();\n    if (shortcut === this.#lastHotkeyShortcut) return;\n\n    this.#lastHotkeyShortcut = shortcut;\n    this.dispatchEvent(new CustomEvent(HOTKEY_SHORTCUT_CHANGE_EVENT));\n  }\n}\n\n/** Whether a button's core reports whether it should be shown at all. */\nfunction isHideable(state: unknown): state is { hidden: boolean } {\n  return isObject(state) && isBoolean((state as { hidden?: unknown }).hidden);\n}\n"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"media-ui-element.js","names":["#i18n"],"sources":["../../../src/ui/media-ui-element.ts"],"sourcesContent":["import type { InferComponentState, InferMediaState, MediaUIComponent, StateAttrMap } from '@videojs/core';\nimport { applyElementProps, applyStateDataAttrs, logMissingFeature } from '@videojs/core/dom';\nimport { isText, translateText } from '@videojs/core/i18n';\nimport type { PropertyValues } from '@videojs/element';\nimport { isFunction } from '@videojs/utils/predicate';\n\nimport { i18nContext } from '../i18n/context';\nimport { I18nController } from '../i18n/controller';\nimport type { PlayerController } from '../player/player-controller';\nimport { UIElement } from './ui-element';\n\n/** Abstract base for HTML custom elements that display media state with data attributes. */\nexport abstract class MediaUIElement<Core extends MediaUIComponent> extends UIElement {\n  readonly #i18n = new I18nController(this, i18nContext);\n\n  protected abstract readonly core: Core;\n  protected abstract readonly stateAttrMap: StateAttrMap<InferComponentState<Core>>;\n  protected abstract readonly mediaState: PlayerController<any, InferMediaState<Core> | undefined>;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n\n    if (__DEV__ && !this.mediaState.value && this.mediaState.displayName) {\n      logMissingFeature(this.localName, this.mediaState.displayName);\n    }\n  }\n\n  protected override update(changed: PropertyValues): void {\n    super.update(changed);\n\n    const media = this.mediaState.value;\n    if (!media) return;\n\n    this.core.setMedia(media);\n    const state = this.core.getState();\n\n    if (isFunction(this.core.getAttrs)) {\n      const attrs = this.core.getAttrs(state) as Record<string, unknown>;\n\n      if (isText(attrs['aria-label'])) {\n        attrs['aria-label'] = translateText(attrs['aria-label'], this.#i18n.value);\n      }\n\n      applyElementProps(this, attrs);\n    }\n\n    applyStateDataAttrs(this, state, this.stateAttrMap);\n  }\n}\n"],"mappings":";;;;;;;;AAYA,IAAsB,iBAAtB,cAA4E,UAAU;CACpF,QAAiB,IAAI,eAAe,MAAM,WAAW;CAMrD,oBAAmC;EACjC,MAAM,kBAAkB;CAK1B;CAEA,OAA0B,SAA+B;EACvD,MAAM,OAAO,OAAO;EAEpB,MAAM,QAAQ,KAAK,WAAW;EAC9B,IAAI,CAAC,OAAO;EAEZ,KAAK,KAAK,SAAS,KAAK;EACxB,MAAM,QAAQ,KAAK,KAAK,SAAS;EAEjC,IAAI,WAAW,KAAK,KAAK,QAAQ,GAAG;GAClC,MAAM,QAAQ,KAAK,KAAK,SAAS,KAAK;GAEtC,IAAI,OAAO,MAAM,aAAa,GAC5B,MAAM,gBAAgB,cAAc,MAAM,eAAe,KAAKA,MAAM,KAAK;GAG3E,kBAAkB,MAAM,KAAK;EAC/B;EAEA,oBAAoB,MAAM,OAAO,KAAK,YAAY;CACpD;AACF"}
+{"version":3,"file":"media-ui-element.js","names":["#i18n"],"sources":["../../../src/ui/media-ui-element.ts"],"sourcesContent":["import type { InferComponentState, InferMediaState, MediaUIComponent, StateAttrMap } from '@videojs/core';\nimport { applyElementProps, applyStateDataAttrs, logMissingFeature } from '@videojs/core/dom';\nimport { isText, translateText } from '@videojs/core/i18n';\nimport type { PropertyValues } from '@videojs/element';\nimport { isFunction } from '@videojs/utils/predicate';\n\nimport { i18nContext } from '../i18n/context';\nimport { I18nController } from '../i18n/controller';\nimport type { PlayerController } from '../player/controller';\nimport { UIElement } from './ui-element';\n\n/** Abstract base for HTML custom elements that display media state with data attributes. */\nexport abstract class MediaUIElement<Core extends MediaUIComponent> extends UIElement {\n  readonly #i18n = new I18nController(this, i18nContext);\n\n  protected abstract readonly core: Core;\n  protected abstract readonly stateAttrMap: StateAttrMap<InferComponentState<Core>>;\n  protected abstract readonly mediaState: PlayerController<any, InferMediaState<Core> | undefined>;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n\n    if (__DEV__ && !this.mediaState.value && this.mediaState.displayName) {\n      logMissingFeature(this.localName, this.mediaState.displayName);\n    }\n  }\n\n  protected override update(changed: PropertyValues): void {\n    super.update(changed);\n\n    const media = this.mediaState.value;\n    if (!media) return;\n\n    this.core.setMedia(media);\n    const state = this.core.getState();\n\n    if (isFunction(this.core.getAttrs)) {\n      const attrs = this.core.getAttrs(state) as Record<string, unknown>;\n\n      if (isText(attrs['aria-label'])) {\n        attrs['aria-label'] = translateText(attrs['aria-label'], this.#i18n.value);\n      }\n\n      applyElementProps(this, attrs);\n    }\n\n    applyStateDataAttrs(this, state, this.stateAttrMap);\n  }\n}\n"],"mappings":";;;;;;;;AAYA,IAAsB,iBAAtB,cAA4E,UAAU;CACpF,QAAiB,IAAI,eAAe,MAAM,WAAW;CAMrD,oBAAmC;EACjC,MAAM,kBAAkB;CAK1B;CAEA,OAA0B,SAA+B;EACvD,MAAM,OAAO,OAAO;EAEpB,MAAM,QAAQ,KAAK,WAAW;EAC9B,IAAI,CAAC,OAAO;EAEZ,KAAK,KAAK,SAAS,KAAK;EACxB,MAAM,QAAQ,KAAK,KAAK,SAAS;EAEjC,IAAI,WAAW,KAAK,KAAK,QAAQ,GAAG;GAClC,MAAM,QAAQ,KAAK,KAAK,SAAS,KAAK;GAEtC,IAAI,OAAO,MAAM,aAAa,GAC5B,MAAM,gBAAgB,cAAc,MAAM,eAAe,KAAKA,MAAM,KAAK;GAG3E,kBAAkB,MAAM,KAAK;EAC/B;EAEA,oBAAoB,MAAM,OAAO,KAAK,YAAY;CACpD;AACF"}

package/dist/default/ui/menu/checkbox-item.js

@@ -0,0 +1,81 @@
+import { UIElement } from "../ui-element.js";
+import { menuContext } from "./context.js";
+import { applyElementProps } from "@videojs/core/dom";
+import { ContextConsumer } from "@videojs/element/context";
+//#region src/ui/menu/checkbox-item.ts
+/** @fires checked-change - Fired when the checked state changes. */
+var MenuCheckboxItemElement = class extends UIElement {
+	constructor(..._args) {
+		super(..._args);
+		this.checked = false;
+		this.disabled = false;
+		this.#ctx = new ContextConsumer(this, {
+			context: menuContext,
+			subscribe: true
+		});
+		this.#disconnect = null;
+		this.#registered = false;
+		this.#cleanupRegistration = null;
+	}
+	static {
+		this.tagName = "media-menu-checkbox-item";
+	}
+	static {
+		this.properties = {
+			checked: { type: Boolean },
+			disabled: { type: Boolean }
+		};
+	}
+	#ctx;
+	#disconnect;
+	#registered;
+	#cleanupRegistration;
+	connectedCallback() {
+		super.connectedCallback();
+		this.#disconnect = new AbortController();
+		this.#registered = false;
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.#cleanupRegistration?.();
+		this.#cleanupRegistration = null;
+		this.#disconnect?.abort();
+		this.#disconnect = null;
+		this.#registered = false;
+	}
+	update(_changed) {
+		super.update(_changed);
+		const ctx = this.#ctx.value;
+		if (!ctx || !this.#disconnect) return;
+		if (!this.#registered) {
+			this.#registered = true;
+			this.#cleanupRegistration = ctx.menu.registerItem(this);
+			applyElementProps(this, {
+				onClick: () => {
+					if (!this.#ctx.value || this.disabled) return;
+					this.checked = !this.checked;
+					this.dispatchEvent(new CustomEvent("checked-change", {
+						detail: { checked: this.checked },
+						bubbles: true
+					}));
+				},
+				onPointerenter: () => {
+					const currentCtx = this.#ctx.value;
+					if (!this.disabled) currentCtx?.menu.highlight(this, {
+						focus: false,
+						pointer: true
+					});
+				}
+			}, { signal: this.#disconnect.signal });
+		}
+		applyElementProps(this, {
+			role: "menuitemcheckbox",
+			"aria-checked": String(this.checked),
+			"aria-disabled": this.disabled ? "true" : void 0
+		});
+	}
+};
+//#endregion
+export { MenuCheckboxItemElement };
+
+//# sourceMappingURL=checkbox-item.js.map

package/dist/default/ui/menu/checkbox-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox-item.js","names":["#ctx","#disconnect","#registered","#cleanupRegistration"],"sources":["../../../../src/ui/menu/checkbox-item.ts"],"sourcesContent":["import { applyElementProps } from '@videojs/core/dom';\nimport type { PropertyDeclarationMap, PropertyValues } from '@videojs/element';\nimport { ContextConsumer } from '@videojs/element/context';\n\nimport { UIElement } from '../ui-element';\nimport { menuContext } from './context';\n\n/** @fires checked-change - Fired when the checked state changes. */\nexport class MenuCheckboxItemElement extends UIElement {\n  static readonly tagName = 'media-menu-checkbox-item';\n\n  static override properties = {\n    checked: { type: Boolean },\n    disabled: { type: Boolean },\n  } satisfies PropertyDeclarationMap<'checked' | 'disabled'>;\n\n  checked = false;\n  disabled = false;\n\n  readonly #ctx = new ContextConsumer(this, { context: menuContext, subscribe: true });\n\n  #disconnect: AbortController | null = null;\n  #registered = false;\n  #cleanupRegistration: (() => void) | null = null;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this.#disconnect = new AbortController();\n    this.#registered = false;\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.#cleanupRegistration?.();\n    this.#cleanupRegistration = null;\n    this.#disconnect?.abort();\n    this.#disconnect = null;\n    this.#registered = false;\n  }\n\n  protected override update(_changed: PropertyValues): void {\n    super.update(_changed);\n\n    const ctx = this.#ctx.value;\n    if (!ctx || !this.#disconnect) return;\n\n    if (!this.#registered) {\n      this.#registered = true;\n\n      this.#cleanupRegistration = ctx.menu.registerItem(this);\n\n      applyElementProps(\n        this,\n        {\n          onClick: () => {\n            const currentCtx = this.#ctx.value;\n            if (!currentCtx || this.disabled) return;\n\n            this.checked = !this.checked;\n            this.dispatchEvent(new CustomEvent('checked-change', { detail: { checked: this.checked }, bubbles: true }));\n          },\n          onPointerenter: () => {\n            const currentCtx = this.#ctx.value;\n\n            if (!this.disabled) currentCtx?.menu.highlight(this, { focus: false, pointer: true });\n          },\n        },\n        { signal: this.#disconnect.signal }\n      );\n    }\n\n    applyElementProps(this, {\n      role: 'menuitemcheckbox',\n      'aria-checked': String(this.checked),\n      'aria-disabled': this.disabled ? 'true' : undefined,\n    });\n  }\n}\n"],"mappings":";;;;;;AAQA,IAAa,0BAAb,cAA6C,UAAU;;;EAQ3C,KAAA,UAAA;EACC,KAAA,WAAA;EAEK,KAAA,OAAA,IAAI,gBAAgB,MAAM;GAAE,SAAS;GAAa,WAAW;EAAK,CAAC;EAE7C,KAAA,cAAA;EACxB,KAAA,cAAA;EAC8B,KAAA,uBAAA;;;EAdlB,KAAA,UAAA;;;EAEG,KAAA,aAAA;GAC3B,SAAS,EAAE,MAAM,QAAQ;GACzB,UAAU,EAAE,MAAM,QAAQ;EAC5B;;CAKA;CAEA;CACA;CACA;CAEA,oBAAmC;EACjC,MAAM,kBAAkB;EACxB,KAAKC,cAAc,IAAI,gBAAgB;EACvC,KAAKC,cAAc;CACrB;CAEA,uBAAsC;EACpC,MAAM,qBAAqB;EAC3B,KAAKC,uBAAuB;EAC5B,KAAKA,uBAAuB;EAC5B,KAAKF,aAAa,MAAM;EACxB,KAAKA,cAAc;EACnB,KAAKC,cAAc;CACrB;CAEA,OAA0B,UAAgC;EACxD,MAAM,OAAO,QAAQ;EAErB,MAAM,MAAM,KAAKF,KAAK;EACtB,IAAI,CAAC,OAAO,CAAC,KAAKC,aAAa;EAE/B,IAAI,CAAC,KAAKC,aAAa;GACrB,KAAKA,cAAc;GAEnB,KAAKC,uBAAuB,IAAI,KAAK,aAAa,IAAI;GAEtD,kBACE,MACA;IACE,eAAe;KAEb,IAAI,CADe,KAAKH,KAAK,SACV,KAAK,UAAU;KAElC,KAAK,UAAU,CAAC,KAAK;KACrB,KAAK,cAAc,IAAI,YAAY,kBAAkB;MAAE,QAAQ,EAAE,SAAS,KAAK,QAAQ;MAAG,SAAS;KAAK,CAAC,CAAC;IAC5G;IACA,sBAAsB;KACpB,MAAM,aAAa,KAAKA,KAAK;KAE7B,IAAI,CAAC,KAAK,UAAU,YAAY,KAAK,UAAU,MAAM;MAAE,OAAO;MAAO,SAAS;KAAK,CAAC;IACtF;GACF,GACA,EAAE,QAAQ,KAAKC,YAAY,OAAO,CACpC;EACF;EAEA,kBAAkB,MAAM;GACtB,MAAM;GACN,gBAAgB,OAAO,KAAK,OAAO;GACnC,iBAAiB,KAAK,WAAW,SAAS,KAAA;EAC5C,CAAC;CACH;AACF"}

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

@@ -0,0 +1,297 @@
+import { UIElement } from "../ui-element.js";
+import { menuContext } from "./context.js";
+import { MenuContentDataAttrs, MenuCore, resolveMenuOptionState } from "@videojs/core";
+import { applyElementProps, applyStateDataAttrs, createMenu, createTransition, isMenuNavigationKey } from "@videojs/core/dom";
+import { ContextConsumer, ContextProvider } from "@videojs/element/context";
+//#region src/ui/menu/content.ts
+let idCounter = 0;
+/** One accessible menu page. Root and nested pages are sibling children of `<media-menu>`. */
+var MenuContentElement = class MenuContentElement extends UIElement {
+	constructor(..._args) {
+		super(..._args);
+		this.open = false;
+		this.defaultOpen = false;
+		this.#root = new ContextConsumer(this, {
+			context: menuContext,
+			subscribe: true
+		});
+		this.#provider = new ContextProvider(this, { context: menuContext });
+		this.#core = new MenuCore();
+		this.#generatedId = `vjs-menu-content-${idCounter++}`;
+		this.#context = null;
+		this.#menu = null;
+		this.#parentMenu = null;
+		this.#rootMenu = null;
+		this.#ownsMenu = false;
+		this.#disconnect = null;
+		this.#cleanupRegistration = null;
+		this.#cleanupParentRegistration = null;
+		this.#optionStates = /* @__PURE__ */ new Map();
+		this.#optionSource = Symbol("menu");
+		this.#optionState = null;
+		this.#optionParent = null;
+		this.#stateTrigger = null;
+		this.#triggerWasDisabled = false;
+		this.#triggerWasHidden = false;
+		this.#wasActive = false;
+		this.#normalizing = false;
+		this.#handleKeyDown = (event) => {
+			const isNavigationKey = isMenuNavigationKey(event);
+			const defaultPrevented = event.defaultPrevented;
+			this.#menu?.contentProps.onKeyDown(event);
+			if (this.#parentMenu && (event.key === "ArrowLeft" || event.key === "Escape") && !defaultPrevented) {
+				event.preventDefault();
+				this.#menu?.close("escape");
+			}
+			if (event.key !== "Escape" && isNavigationKey) event.stopPropagation();
+		};
+		this.#handleFocusOut = (event) => {
+			this.#menu?.contentProps.onFocusOut(event);
+		};
+		this.#setOptionState = (source, optionState) => {
+			const previous = this.#optionStates.get(source);
+			if (optionState && isSameOptionState(previous, optionState)) return;
+			if (!optionState && !previous) return;
+			if (optionState) this.#optionStates.set(source, optionState);
+			else this.#optionStates.delete(source);
+			this.#optionState = resolveMenuOptionState(this.#optionStates.values());
+			if ((this.#optionState?.disabled || this.#optionState?.hidden) && this.open && this.#parentMenu) this.close("imperative-action");
+			this.#syncOptionState(this.#findTrigger());
+			this.#optionParent?.setOptionState(this.#optionSource, this.#optionState);
+		};
+	}
+	static {
+		this.tagName = "media-menu-content";
+	}
+	static {
+		this.properties = {
+			open: { type: Boolean },
+			defaultOpen: {
+				type: Boolean,
+				attribute: "default-open"
+			}
+		};
+	}
+	#root;
+	#provider;
+	#core;
+	#generatedId;
+	#context;
+	#menu;
+	#parentMenu;
+	#rootMenu;
+	#ownsMenu;
+	#disconnect;
+	#cleanupRegistration;
+	#cleanupParentRegistration;
+	#optionStates;
+	#optionSource;
+	#optionState;
+	#optionParent;
+	#stateTrigger;
+	#triggerWasDisabled;
+	#triggerWasHidden;
+	#wasActive;
+	#normalizing;
+	get context() {
+		return this.#context;
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		if (this.#normalizing) return;
+		this.#disconnect = new AbortController();
+		applyElementProps(this, {
+			onKeyDown: this.#handleKeyDown,
+			onFocusOut: this.#handleFocusOut
+		}, { signal: this.#disconnect.signal });
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		if (this.#normalizing) return;
+		this.#cleanupMenu();
+		this.#disconnect?.abort();
+		this.#disconnect = null;
+	}
+	openMenu(reason = "imperative-action") {
+		this.#menu?.open(reason);
+	}
+	close(reason = "imperative-action") {
+		this.#menu?.close(reason);
+	}
+	willUpdate(changed) {
+		super.willUpdate(changed);
+		if (!this.hasUpdated && this.defaultOpen && !this.open) this.open = true;
+		if (this.#ownsMenu && this.#menu && changed.has("open")) this.#menu.syncOpen(this.open);
+	}
+	update(changed) {
+		super.update(changed);
+		const root = this.#root.value ?? null;
+		if (!root) return;
+		if (!this.id) this.id = this.#generatedId;
+		const trigger = this.#findTrigger();
+		const parentContent = trigger?.closest(MenuContentElement.tagName) ?? null;
+		if (parentContent && !parentContent.context) {
+			this.hidden = true;
+			requestAnimationFrame(() => this.requestUpdate());
+			return;
+		}
+		const parentMenu = parentContent?.context?.menu ?? null;
+		const isSubmenu = parentMenu !== null;
+		if (root.menu !== this.#rootMenu || parentMenu !== this.#parentMenu) {
+			this.#cleanupMenu();
+			this.#rootMenu = root.menu;
+			this.#parentMenu = parentMenu;
+			this.#setupMenu(root, parentMenu);
+		}
+		this.#setOptionParent(parentContent?.context ?? root);
+		const menu = this.#menu;
+		if (!menu) return;
+		const input = menu.input.current;
+		this.#core.setInput({
+			...input,
+			isSubmenu
+		});
+		const state = this.#core.getState();
+		const active = !isSubmenu || state.open || state.status === "ending";
+		applyElementProps(this, {
+			...this.#core.getContentAttrs(),
+			hidden: !active
+		});
+		applyStateDataAttrs(this, state, MenuContentDataAttrs);
+		if (trigger) {
+			menu.setTriggerElement(trigger);
+			applyElementProps(trigger, this.#core.getTriggerAttrs(state, active ? this.id : void 0));
+			this.#syncOptionState(trigger);
+		}
+		if (isSubmenu && active && !this.#wasActive) menu.highlightFirstItem({ preventScroll: true });
+		this.#wasActive = active;
+		this.#context = {
+			core: this.#core,
+			menu,
+			popup: root.popup,
+			state,
+			setOptionState: this.#setOptionState
+		};
+		this.#provider.setValue(this.#context);
+		root.popup.sync();
+		this.#normalize();
+	}
+	#setupMenu(root, parentMenu) {
+		if (parentMenu !== null) {
+			this.#ownsMenu = true;
+			this.#menu = createMenu({
+				transition: createTransition(),
+				onOpenChange: (nextOpen, details) => {
+					if (this.dispatchEvent(new CustomEvent("open-change", {
+						bubbles: true,
+						cancelable: true,
+						composed: true,
+						detail: {
+							open: nextOpen,
+							...details
+						}
+					}))) this.open = nextOpen;
+				},
+				closeOnEscape: () => true,
+				closeOnOutsideClick: () => false
+			});
+			this.#menu.setPopupElement(this);
+			this.#cleanupParentRegistration = parentMenu.registerSubmenu(this.#menu);
+			const signal = this.#disconnect?.signal;
+			if (signal) this.#menu.input.subscribe(() => this.requestUpdate(), { signal });
+			this.#menu.syncOpen(this.open);
+		} else {
+			this.#ownsMenu = false;
+			this.#menu = root.menu;
+		}
+		this.#cleanupRegistration = root.popup.registerContent({
+			menu: this.#menu,
+			parent: parentMenu,
+			element: this
+		});
+	}
+	#cleanupMenu() {
+		this.#cleanupRegistration?.();
+		this.#cleanupRegistration = null;
+		this.#cleanupParentRegistration?.();
+		this.#cleanupParentRegistration = null;
+		this.#setOptionParent(null);
+		this.#clearOptionState();
+		this.#optionStates.clear();
+		this.#optionState = null;
+		if (this.#ownsMenu) this.#menu?.destroy();
+		this.#menu = null;
+		this.#context = null;
+		this.#rootMenu = null;
+		this.#parentMenu = null;
+		this.#ownsMenu = false;
+		this.#wasActive = false;
+	}
+	#findTrigger() {
+		if (!this.id) return null;
+		return [...this.getRootNode().querySelectorAll("[commandfor], media-menu-item")].find((element) => element.getAttribute("commandfor") === this.id || element.commandfor === this.id) ?? null;
+	}
+	/** Keep every page as a direct popup child, including authored nested pages. */
+	#normalize() {
+		const popup = this.closest("media-menu");
+		if (!popup || this.parentElement === popup) return;
+		this.#normalizing = true;
+		popup.append(this);
+		this.#normalizing = false;
+	}
+	#handleKeyDown;
+	#handleFocusOut;
+	#setOptionState;
+	#setOptionParent(parent) {
+		if (parent?.menu === this.#optionParent?.menu) {
+			this.#optionParent = parent;
+			return;
+		}
+		this.#optionParent?.setOptionState(this.#optionSource, null);
+		this.#optionParent = parent;
+		this.#optionParent?.setOptionState(this.#optionSource, this.#optionState);
+	}
+	#syncOptionState(trigger) {
+		if (trigger !== this.#stateTrigger) {
+			this.#clearOptionState();
+			this.#stateTrigger = trigger;
+			this.#triggerWasDisabled = trigger ? isTriggerExplicitlyDisabled(trigger) : false;
+			this.#triggerWasHidden = trigger?.hidden === true;
+		}
+		if (!trigger) return;
+		const disabled = this.#optionState?.disabled || this.#triggerWasDisabled;
+		applyElementProps(trigger, {
+			disabled: disabled || void 0,
+			"aria-disabled": disabled ? "true" : void 0,
+			"data-availability": this.#optionState?.availability,
+			hidden: this.#triggerWasHidden || this.#optionState?.hidden || void 0
+		});
+		const value = trigger.querySelector("[data-part~=\"value\"], [data-part~=\"hint\"]");
+		if (value && value.textContent !== this.#optionState?.value) value.textContent = this.#optionState?.value ?? "";
+	}
+	#clearOptionState() {
+		const trigger = this.#stateTrigger;
+		if (!trigger) return;
+		applyElementProps(trigger, {
+			disabled: this.#triggerWasDisabled || void 0,
+			"aria-disabled": this.#triggerWasDisabled ? "true" : void 0,
+			"data-availability": void 0,
+			hidden: this.#triggerWasHidden || void 0
+		});
+		const value = trigger.querySelector("[data-part~=\"value\"], [data-part~=\"hint\"]");
+		if (value?.textContent) value.textContent = "";
+		this.#stateTrigger = null;
+		this.#triggerWasDisabled = false;
+		this.#triggerWasHidden = false;
+	}
+};
+function isSameOptionState(a, b) {
+	return a?.value === b.value && a.disabled === b.disabled && a.hidden === b.hidden && a.availability === b.availability;
+}
+function isTriggerExplicitlyDisabled(trigger) {
+	return trigger.hasAttribute("disabled") || "disabled" in trigger && trigger.disabled === true;
+}
+//#endregion
+export { MenuContentElement };
+
+//# sourceMappingURL=content.js.map

package/dist/default/ui/menu/content.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"content.js","names":["#menu","#parentMenu","#optionStates","#optionState","#syncOptionState","#findTrigger","#optionParent","#optionSource","#root","#provider","#core","#generatedId","#context","#normalizing","#disconnect","#handleKeyDown","#handleFocusOut","#cleanupMenu","#ownsMenu","#rootMenu","#setupMenu","#setOptionParent","#wasActive","#setOptionState","#normalize","#cleanupParentRegistration","#cleanupRegistration","#clearOptionState","#stateTrigger","#triggerWasDisabled","#triggerWasHidden"],"sources":["../../../../src/ui/menu/content.ts"],"sourcesContent":["import { MenuContentDataAttrs, MenuCore, type MenuOptionState, resolveMenuOptionState } from '@videojs/core';\nimport {\n  applyElementProps,\n  applyStateDataAttrs,\n  createMenu,\n  createTransition,\n  isMenuNavigationKey,\n  type MenuApi,\n  type MenuChangeDetails,\n  type MenuOpenChangeReason,\n  type UIKeyboardEvent,\n} from '@videojs/core/dom';\nimport type { PropertyDeclarationMap, PropertyValues } from '@videojs/element';\nimport { ContextConsumer, ContextProvider } from '@videojs/element/context';\n\nimport { UIElement } from '../ui-element';\nimport { type MenuContextValue, menuContext } from './context';\nlet idCounter = 0;\n\n/** One accessible menu page. Root and nested pages are sibling children of `<media-menu>`. */\nexport class MenuContentElement extends UIElement {\n  static readonly tagName = 'media-menu-content';\n\n  static override properties = {\n    open: { type: Boolean },\n    defaultOpen: { type: Boolean, attribute: 'default-open' },\n  } satisfies PropertyDeclarationMap<'open' | 'defaultOpen'>;\n\n  open = false;\n  defaultOpen = false;\n\n  readonly #root = new ContextConsumer(this, { context: menuContext, subscribe: true });\n  readonly #provider = new ContextProvider(this, { context: menuContext });\n  readonly #core = new MenuCore();\n  readonly #generatedId = `vjs-menu-content-${idCounter++}`;\n  #context: MenuContextValue | null = null;\n  #menu: MenuApi | null = null;\n  #parentMenu: MenuApi | null = null;\n  #rootMenu: MenuApi | null = null;\n  #ownsMenu = false;\n  #disconnect: AbortController | null = null;\n  #cleanupRegistration: (() => void) | null = null;\n  #cleanupParentRegistration: (() => void) | null = null;\n  readonly #optionStates = new Map<symbol, MenuOptionState>();\n  readonly #optionSource = Symbol('menu');\n  #optionState: MenuOptionState | null = null;\n  #optionParent: MenuContextValue | null = null;\n  #stateTrigger: HTMLElement | null = null;\n  #triggerWasDisabled = false;\n  #triggerWasHidden = false;\n  #wasActive = false;\n  #normalizing = false;\n\n  get context(): MenuContextValue | null {\n    return this.#context;\n  }\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n\n    if (this.#normalizing) return;\n\n    this.#disconnect = new AbortController();\n    applyElementProps(\n      this,\n      { onKeyDown: this.#handleKeyDown, onFocusOut: this.#handleFocusOut },\n      { signal: this.#disconnect.signal }\n    );\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n\n    if (this.#normalizing) return;\n\n    this.#cleanupMenu();\n    this.#disconnect?.abort();\n    this.#disconnect = null;\n  }\n\n  openMenu(reason: MenuOpenChangeReason = 'imperative-action'): void {\n    this.#menu?.open(reason);\n  }\n\n  close(reason: MenuOpenChangeReason = 'imperative-action'): void {\n    this.#menu?.close(reason);\n  }\n\n  protected override willUpdate(changed: PropertyValues): void {\n    super.willUpdate(changed);\n\n    if (!this.hasUpdated && this.defaultOpen && !this.open) this.open = true;\n\n    if (this.#ownsMenu && this.#menu && changed.has('open')) this.#menu.syncOpen(this.open);\n  }\n\n  protected override update(changed: PropertyValues): void {\n    super.update(changed);\n    const root = this.#root.value ?? null;\n    if (!root) return;\n\n    if (!this.id) this.id = this.#generatedId;\n\n    const trigger = this.#findTrigger();\n    const parentContent = trigger?.closest<MenuContentElement>(MenuContentElement.tagName) ?? null;\n\n    if (parentContent && !parentContent.context) {\n      this.hidden = true;\n      requestAnimationFrame(() => this.requestUpdate());\n      return;\n    }\n\n    const parentMenu = parentContent?.context?.menu ?? null;\n    const isSubmenu = parentMenu !== null;\n\n    if (root.menu !== this.#rootMenu || parentMenu !== this.#parentMenu) {\n      this.#cleanupMenu();\n      this.#rootMenu = root.menu;\n      this.#parentMenu = parentMenu;\n      this.#setupMenu(root, parentMenu);\n    }\n\n    this.#setOptionParent(parentContent?.context ?? root);\n\n    const menu = this.#menu;\n    if (!menu) return;\n\n    const input = menu.input.current;\n\n    this.#core.setInput({ ...input, isSubmenu });\n    const state = this.#core.getState();\n    const active = !isSubmenu || state.open || state.status === 'ending';\n\n    applyElementProps(this, {\n      ...this.#core.getContentAttrs(),\n      hidden: !active,\n    });\n    applyStateDataAttrs(this, state, MenuContentDataAttrs);\n\n    if (trigger) {\n      menu.setTriggerElement(trigger);\n      applyElementProps(trigger, this.#core.getTriggerAttrs(state, active ? this.id : undefined));\n      this.#syncOptionState(trigger);\n    }\n\n    if (isSubmenu && active && !this.#wasActive) menu.highlightFirstItem({ preventScroll: true });\n\n    this.#wasActive = active;\n\n    this.#context = {\n      core: this.#core,\n      menu,\n      popup: root.popup,\n      state,\n      setOptionState: this.#setOptionState,\n    };\n    this.#provider.setValue(this.#context);\n    root.popup.sync();\n    this.#normalize();\n  }\n\n  #setupMenu(root: MenuContextValue, parentMenu: MenuApi | null): void {\n    const isSubmenu = parentMenu !== null;\n\n    if (isSubmenu) {\n      this.#ownsMenu = true;\n      this.#menu = createMenu({\n        transition: createTransition(),\n        onOpenChange: (nextOpen: boolean, details: MenuChangeDetails) => {\n          const accepted = this.dispatchEvent(\n            new CustomEvent('open-change', {\n              bubbles: true,\n              cancelable: true,\n              composed: true,\n              detail: { open: nextOpen, ...details },\n            })\n          );\n\n          if (accepted) this.open = nextOpen;\n        },\n        closeOnEscape: () => true,\n        closeOnOutsideClick: () => false,\n      });\n      this.#menu.setPopupElement(this);\n      this.#cleanupParentRegistration = parentMenu.registerSubmenu(this.#menu);\n      const signal = this.#disconnect?.signal;\n\n      if (signal) this.#menu.input.subscribe(() => this.requestUpdate(), { signal });\n\n      this.#menu.syncOpen(this.open);\n    } else {\n      this.#ownsMenu = false;\n      this.#menu = root.menu;\n    }\n\n    this.#cleanupRegistration = root.popup.registerContent({\n      menu: this.#menu,\n      parent: parentMenu,\n      element: this,\n    });\n  }\n\n  #cleanupMenu(): void {\n    this.#cleanupRegistration?.();\n    this.#cleanupRegistration = null;\n    this.#cleanupParentRegistration?.();\n    this.#cleanupParentRegistration = null;\n    this.#setOptionParent(null);\n    this.#clearOptionState();\n    this.#optionStates.clear();\n    this.#optionState = null;\n\n    if (this.#ownsMenu) this.#menu?.destroy();\n\n    this.#menu = null;\n    this.#context = null;\n    this.#rootMenu = null;\n    this.#parentMenu = null;\n    this.#ownsMenu = false;\n    this.#wasActive = false;\n  }\n\n  #findTrigger(): HTMLElement | null {\n    if (!this.id) return null;\n\n    const root = this.getRootNode() as Document | ShadowRoot;\n\n    return (\n      [...root.querySelectorAll<HTMLElement>('[commandfor], media-menu-item')].find(\n        (element) =>\n          element.getAttribute('commandfor') === this.id ||\n          (element as HTMLElement & { commandfor?: string }).commandfor === this.id\n      ) ?? null\n    );\n  }\n\n  /** Keep every page as a direct popup child, including authored nested pages. */\n  #normalize(): void {\n    const popup = this.closest('media-menu');\n    if (!popup || this.parentElement === popup) return;\n\n    this.#normalizing = true;\n    popup.append(this);\n    this.#normalizing = false;\n  }\n\n  #handleKeyDown = (event: UIKeyboardEvent): void => {\n    const isNavigationKey = isMenuNavigationKey(event);\n    const defaultPrevented = event.defaultPrevented;\n\n    this.#menu?.contentProps.onKeyDown(event);\n\n    if (this.#parentMenu && (event.key === 'ArrowLeft' || event.key === 'Escape') && !defaultPrevented) {\n      event.preventDefault();\n      this.#menu?.close('escape');\n    }\n\n    if (event.key !== 'Escape' && isNavigationKey) event.stopPropagation();\n  };\n\n  #handleFocusOut = (event: FocusEvent): void => {\n    this.#menu?.contentProps.onFocusOut(event);\n  };\n\n  #setOptionState = (source: symbol, optionState: MenuOptionState | null): void => {\n    const previous = this.#optionStates.get(source);\n    if (optionState && isSameOptionState(previous, optionState)) return;\n\n    if (!optionState && !previous) return;\n\n    if (optionState) this.#optionStates.set(source, optionState);\n    else this.#optionStates.delete(source);\n\n    this.#optionState = resolveMenuOptionState(this.#optionStates.values());\n\n    if ((this.#optionState?.disabled || this.#optionState?.hidden) && this.open && this.#parentMenu) {\n      this.close('imperative-action');\n    }\n\n    this.#syncOptionState(this.#findTrigger());\n    this.#optionParent?.setOptionState(this.#optionSource, this.#optionState);\n  };\n\n  #setOptionParent(parent: MenuContextValue | null): void {\n    if (parent?.menu === this.#optionParent?.menu) {\n      this.#optionParent = parent;\n      return;\n    }\n\n    this.#optionParent?.setOptionState(this.#optionSource, null);\n    this.#optionParent = parent;\n    this.#optionParent?.setOptionState(this.#optionSource, this.#optionState);\n  }\n\n  #syncOptionState(trigger: HTMLElement | null): void {\n    if (trigger !== this.#stateTrigger) {\n      this.#clearOptionState();\n      this.#stateTrigger = trigger;\n      this.#triggerWasDisabled = trigger ? isTriggerExplicitlyDisabled(trigger) : false;\n      this.#triggerWasHidden = trigger?.hidden === true;\n    }\n\n    if (!trigger) return;\n\n    const disabled = this.#optionState?.disabled || this.#triggerWasDisabled;\n\n    applyElementProps(trigger, {\n      disabled: disabled || undefined,\n      'aria-disabled': disabled ? 'true' : undefined,\n      'data-availability': this.#optionState?.availability,\n      hidden: this.#triggerWasHidden || this.#optionState?.hidden || undefined,\n    });\n    const value = trigger.querySelector<HTMLElement>('[data-part~=\"value\"], [data-part~=\"hint\"]');\n\n    if (value && value.textContent !== this.#optionState?.value) value.textContent = this.#optionState?.value ?? '';\n  }\n\n  #clearOptionState(): void {\n    const trigger = this.#stateTrigger;\n    if (!trigger) return;\n\n    applyElementProps(trigger, {\n      disabled: this.#triggerWasDisabled || undefined,\n      'aria-disabled': this.#triggerWasDisabled ? 'true' : undefined,\n      'data-availability': undefined,\n      hidden: this.#triggerWasHidden || undefined,\n    });\n    const value = trigger.querySelector<HTMLElement>('[data-part~=\"value\"], [data-part~=\"hint\"]');\n\n    if (value?.textContent) value.textContent = '';\n\n    this.#stateTrigger = null;\n    this.#triggerWasDisabled = false;\n    this.#triggerWasHidden = false;\n  }\n}\n\nfunction isSameOptionState(a: MenuOptionState | undefined, b: MenuOptionState): boolean {\n  return (\n    a?.value === b.value && a.disabled === b.disabled && a.hidden === b.hidden && a.availability === b.availability\n  );\n}\n\nfunction isTriggerExplicitlyDisabled(trigger: HTMLElement): boolean {\n  return (\n    trigger.hasAttribute('disabled') ||\n    ('disabled' in trigger && (trigger as HTMLElement & { disabled?: boolean }).disabled === true)\n  );\n}\n"],"mappings":"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"}