@videojs/html 10.0.0-beta.9 → 10.0.0-rc.2

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

@@ -0,0 +1 @@
+{"version":3,"file":"element.js","names":["#container"],"sources":["../../../../src/ui/fullscreen-button/element.ts"],"sourcesContent":["import { FullscreenButtonCore, FullscreenButtonDataAttrs } from '@videojs/core';\nimport { type ButtonActivationSource, selectFullscreen, type UIEvent } from '@videojs/core/dom';\nimport { ContextConsumer } from '@videojs/element/context';\nimport type { MediaFullscreenState } from '@videojs/media';\n\nimport { containerContext, playerContext } from '../../player/context';\nimport { PlayerController } from '../../player/controller';\nimport { MediaButtonElement } from '../media-button-element';\n\nexport class FullscreenButtonElement extends MediaButtonElement<FullscreenButtonCore> {\n  static readonly tagName = 'media-fullscreen-button';\n\n  protected readonly core = new FullscreenButtonCore();\n  protected readonly stateAttrMap = FullscreenButtonDataAttrs;\n  protected readonly mediaState = new PlayerController(this, playerContext, selectFullscreen);\n  protected override readonly hotkeyAction = 'toggleFullscreen';\n  readonly #container = new ContextConsumer(this, { context: containerContext, subscribe: true });\n\n  protected activate(state: MediaFullscreenState, _event: UIEvent, source: ButtonActivationSource): Promise<void> {\n    if (source === 'pointer') {\n      this.#container.value?.container?.focus({ preventScroll: true });\n    }\n\n    return this.core.toggle(state);\n  }\n}\n"],"mappings":";;;;;;;AASA,IAAa,0BAAb,cAA6C,mBAAyC;;;EAG1D,KAAA,OAAA,IAAI,qBAAqB;EACjB,KAAA,eAAA;EACF,KAAA,aAAA,IAAI,iBAAiB,MAAM,eAAe,gBAAgB;EAC/C,KAAA,eAAA;EACrB,KAAA,aAAA,IAAI,gBAAgB,MAAM;GAAE,SAAS;GAAkB,WAAW;EAAK,CAAC;;;EANpE,KAAA,UAAA;;CAM1B;CAEA,SAAmB,OAA6B,QAAiB,QAA+C;EAC9G,IAAI,WAAW,WACb,KAAKA,WAAW,OAAO,WAAW,MAAM,EAAE,eAAe,KAAK,CAAC;EAGjE,OAAO,KAAK,KAAK,OAAO,KAAK;CAC/B;AACF"}

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

@@ -0,0 +1,89 @@
+import { containerContext, playerContext } from "../../player/context.js";
+import { PlayerController } from "../../player/controller.js";
+import { UIElement } from "../ui-element.js";
+import { createDoubleTapGesture, createTapGesture, getGestureActionValue, resolveGestureAction } from "@videojs/core/dom";
+import { ContextConsumer } from "@videojs/element/context";
+//#region src/ui/gesture/element.ts
+var GestureElement = class extends UIElement {
+	constructor(..._args) {
+		super(..._args);
+		this.type = "";
+		this.action = "";
+		this.value = void 0;
+		this.pointer = void 0;
+		this.region = void 0;
+		this.disabled = false;
+		this.#player = new PlayerController(this, playerContext);
+		this.#container = new ContextConsumer(this, {
+			context: containerContext,
+			callback: () => this.requestUpdate(),
+			subscribe: true
+		});
+		this.#cleanup = null;
+	}
+	static {
+		this.tagName = "media-gesture";
+	}
+	static {
+		this.properties = {
+			type: { type: String },
+			action: { type: String },
+			value: { type: Number },
+			pointer: { type: String },
+			region: { type: String },
+			disabled: { type: Boolean }
+		};
+	}
+	#player;
+	#container;
+	#cleanup;
+	connectedCallback() {
+		super.connectedCallback();
+		this.style.display = "none";
+		this.#register();
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.#unregister();
+	}
+	update(changed) {
+		super.update(changed);
+		if (this.isConnected) {
+			this.#unregister();
+			this.#register();
+		}
+	}
+	#register() {
+		const store = this.#player.value;
+		const container = this.#container.value?.container;
+		if (!this.type || !this.action || !store || !container) return;
+		const resolver = resolveGestureAction(this.action);
+		if (!resolver) return;
+		const { value, region } = this;
+		const actionValue = getGestureActionValue(this.action, region, value);
+		const onActivate = (event) => {
+			resolver({
+				store,
+				value: actionValue,
+				event
+			});
+		};
+		const options = {
+			pointer: this.pointer,
+			region,
+			disabled: this.disabled,
+			action: this.action,
+			value: actionValue
+		};
+		if (this.type === "doubletap") this.#cleanup = createDoubleTapGesture(container, onActivate, options);
+		else if (this.type === "tap") this.#cleanup = createTapGesture(container, onActivate, options);
+	}
+	#unregister() {
+		this.#cleanup?.();
+		this.#cleanup = null;
+	}
+};
+//#endregion
+export { GestureElement };
+
+//# sourceMappingURL=element.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"element.js","names":["#player","#container","#register","#unregister","#cleanup"],"sources":["../../../../src/ui/gesture/element.ts"],"sourcesContent":["import type { GestureProps } from '@videojs/core';\nimport {\n  createDoubleTapGesture,\n  createTapGesture,\n  getGestureActionValue,\n  resolveGestureAction,\n} from '@videojs/core/dom';\nimport type { PropertyDeclarationMap, PropertyValues } from '@videojs/element';\nimport { ContextConsumer } from '@videojs/element/context';\n\nimport { containerContext, playerContext } from '../../player/context';\nimport { PlayerController } from '../../player/controller';\nimport { UIElement } from '../ui-element';\n\nexport class GestureElement extends UIElement {\n  static readonly tagName = 'media-gesture';\n\n  static override properties: PropertyDeclarationMap = {\n    type: { type: String },\n    action: { type: String },\n    value: { type: Number },\n    pointer: { type: String },\n    region: { type: String },\n    disabled: { type: Boolean },\n  };\n\n  type: GestureProps['type'] | '' = '';\n  action: GestureProps['action'] = '';\n  value: GestureProps['value'] = undefined;\n  pointer: GestureProps['pointer'] = undefined;\n  region: GestureProps['region'] = undefined;\n  disabled: NonNullable<GestureProps['disabled']> = false;\n\n  readonly #player = new PlayerController(this, playerContext);\n  readonly #container = new ContextConsumer(this, {\n    context: containerContext,\n    callback: () => this.requestUpdate(),\n    subscribe: true,\n  });\n  #cleanup: (() => void) | null = null;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this.style.display = 'none';\n    this.#register();\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.#unregister();\n  }\n\n  protected override update(changed: PropertyValues): void {\n    super.update(changed);\n\n    // Re-register when attributes change.\n    if (this.isConnected) {\n      this.#unregister();\n      this.#register();\n    }\n  }\n\n  #register(): void {\n    const store = this.#player.value;\n    const container = this.#container.value?.container;\n    if (!this.type || !this.action || !store || !container) return;\n\n    const resolver = resolveGestureAction(this.action);\n    if (!resolver) return;\n\n    const { value, region } = this;\n    const actionValue = getGestureActionValue(this.action, region, value);\n\n    const onActivate = (event: PointerEvent) => {\n      resolver({ store, value: actionValue, event });\n    };\n\n    const options = {\n      pointer: this.pointer,\n      region,\n      disabled: this.disabled,\n      action: this.action,\n      value: actionValue,\n    };\n\n    if (this.type === 'doubletap') {\n      this.#cleanup = createDoubleTapGesture(container, onActivate, options);\n    } else if (this.type === 'tap') {\n      this.#cleanup = createTapGesture(container, onActivate, options);\n    }\n  }\n\n  #unregister(): void {\n    this.#cleanup?.();\n    this.#cleanup = null;\n  }\n}\n"],"mappings":";;;;;;AAcA,IAAa,iBAAb,cAAoC,UAAU;;;EAYV,KAAA,OAAA;EACD,KAAA,SAAA;EACF,KAAA,QAAA,KAAA;EACI,KAAA,UAAA,KAAA;EACF,KAAA,SAAA,KAAA;EACiB,KAAA,WAAA;EAE/B,KAAA,UAAA,IAAI,iBAAiB,MAAM,aAAa;EACrC,KAAA,aAAA,IAAI,gBAAgB,MAAM;GAC9C,SAAS;GACT,gBAAgB,KAAK,cAAc;GACnC,WAAW;EACb,CAAC;EAC+B,KAAA,WAAA;;;EAxBN,KAAA,UAAA;;;EAE2B,KAAA,aAAA;GACnD,MAAM,EAAE,MAAM,OAAO;GACrB,QAAQ,EAAE,MAAM,OAAO;GACvB,OAAO,EAAE,MAAM,OAAO;GACtB,SAAS,EAAE,MAAM,OAAO;GACxB,QAAQ,EAAE,MAAM,OAAO;GACvB,UAAU,EAAE,MAAM,QAAQ;EAC5B;;CASA;CACA;CAKA;CAEA,oBAAmC;EACjC,MAAM,kBAAkB;EACxB,KAAK,MAAM,UAAU;EACrB,KAAKE,UAAU;CACjB;CAEA,uBAAsC;EACpC,MAAM,qBAAqB;EAC3B,KAAKC,YAAY;CACnB;CAEA,OAA0B,SAA+B;EACvD,MAAM,OAAO,OAAO;EAGpB,IAAI,KAAK,aAAa;GACpB,KAAKA,YAAY;GACjB,KAAKD,UAAU;EACjB;CACF;CAEA,YAAkB;EAChB,MAAM,QAAQ,KAAKF,QAAQ;EAC3B,MAAM,YAAY,KAAKC,WAAW,OAAO;EACzC,IAAI,CAAC,KAAK,QAAQ,CAAC,KAAK,UAAU,CAAC,SAAS,CAAC,WAAW;EAExD,MAAM,WAAW,qBAAqB,KAAK,MAAM;EACjD,IAAI,CAAC,UAAU;EAEf,MAAM,EAAE,OAAO,WAAW;EAC1B,MAAM,cAAc,sBAAsB,KAAK,QAAQ,QAAQ,KAAK;EAEpE,MAAM,cAAc,UAAwB;GAC1C,SAAS;IAAE;IAAO,OAAO;IAAa;GAAM,CAAC;EAC/C;EAEA,MAAM,UAAU;GACd,SAAS,KAAK;GACd;GACA,UAAU,KAAK;GACf,QAAQ,KAAK;GACb,OAAO;EACT;EAEA,IAAI,KAAK,SAAS,aAChB,KAAKG,WAAW,uBAAuB,WAAW,YAAY,OAAO;OAChE,IAAI,KAAK,SAAS,OACvB,KAAKA,WAAW,iBAAiB,WAAW,YAAY,OAAO;CAEnE;CAEA,cAAoB;EAClB,KAAKA,WAAW;EAChB,KAAKA,WAAW;CAClB;AACF"}

package/dist/default/ui/hotkey/aria-key-shortcuts-controller.js

@@ -0,0 +1,66 @@
+import { containerContext } from "../../player/context.js";
+import { getHotkeyCoordinator } from "@videojs/core/dom";
+import { ContextConsumer } from "@videojs/element/context";
+//#region src/ui/hotkey/aria-key-shortcuts-controller.ts
+/** Provides hotkey shortcut metadata for a given hotkey action name. */
+var AriaKeyShortcutsController = class {
+	#host;
+	#action;
+	#getValue;
+	#container;
+	#unsubscribe = null;
+	/**
+	* @param host - Host element whose nearest player container supplies hotkey registrations.
+	* @param action - Registered hotkey action to look up.
+	* @param options - Optional value resolver for value-dependent shortcuts.
+	*/
+	constructor(host, action, options = {}) {
+		this.#host = host;
+		this.#action = action;
+		this.#getValue = options.value;
+		this.#container = new ContextConsumer(host, {
+			context: containerContext,
+			callback: (ctx) => this.#connect(ctx?.container),
+			subscribe: true
+		});
+		host.addController(this);
+	}
+	get value() {
+		return this.aria;
+	}
+	get aria() {
+		return this.details.aria;
+	}
+	get shortcut() {
+		return this.details.shortcut;
+	}
+	get details() {
+		const container = this.#container.value?.container;
+		if (!container) return {};
+		return getHotkeyCoordinator(container).getShortcut(this.#action, this.#getValue?.());
+	}
+	hostConnected() {
+		this.#connect(this.#container.value?.container);
+	}
+	hostDisconnected() {
+		this.#disconnect();
+	}
+	#connect(container) {
+		this.#disconnect();
+		if (!container) return;
+		const coordinator = getHotkeyCoordinator(container);
+		const notify = () => {
+			this.#host.requestUpdate();
+		};
+		this.#unsubscribe = coordinator.subscribeShortcutChanges(notify);
+		notify();
+	}
+	#disconnect() {
+		this.#unsubscribe?.();
+		this.#unsubscribe = null;
+	}
+};
+//#endregion
+export { AriaKeyShortcutsController };
+
+//# sourceMappingURL=aria-key-shortcuts-controller.js.map

package/dist/default/ui/hotkey/aria-key-shortcuts-controller.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"aria-key-shortcuts-controller.js","names":["#host","#action","#getValue","#container","#connect","#disconnect","#unsubscribe"],"sources":["../../../../src/ui/hotkey/aria-key-shortcuts-controller.ts"],"sourcesContent":["import { getHotkeyCoordinator, type HotkeyShortcutDetails } from '@videojs/core/dom';\nimport type { ReactiveController } from '@videojs/element';\nimport { ContextConsumer } from '@videojs/element/context';\n\nimport type { ContainerContextConsumer } from '../../player/context';\nimport { containerContext } from '../../player/context';\nimport type { PlayerControllerHost } from '../../player/controller';\n\nexport interface AriaKeyShortcutsControllerOptions {\n  value?: (() => number | undefined) | undefined;\n}\n\n/** Provides hotkey shortcut metadata for a given hotkey action name. */\nexport class AriaKeyShortcutsController implements ReactiveController {\n  #host: PlayerControllerHost;\n  #action: string;\n  #getValue: (() => number | undefined) | undefined;\n  #container: ContainerContextConsumer;\n  #unsubscribe: (() => void) | null = null;\n\n  /**\n   * @param host - Host element whose nearest player container supplies hotkey registrations.\n   * @param action - Registered hotkey action to look up.\n   * @param options - Optional value resolver for value-dependent shortcuts.\n   */\n  constructor(host: PlayerControllerHost, action: string, options: AriaKeyShortcutsControllerOptions = {}) {\n    this.#host = host;\n    this.#action = action;\n    this.#getValue = options.value;\n    this.#container = new ContextConsumer(host, {\n      context: containerContext,\n      callback: (ctx) => this.#connect(ctx?.container),\n      subscribe: true,\n    });\n    host.addController(this);\n  }\n\n  get value(): string | undefined {\n    return this.aria;\n  }\n\n  get aria(): string | undefined {\n    return this.details.aria;\n  }\n\n  get shortcut(): string | undefined {\n    return this.details.shortcut;\n  }\n\n  get details(): HotkeyShortcutDetails {\n    const container = this.#container.value?.container;\n    if (!container) return {};\n\n    return getHotkeyCoordinator(container).getShortcut(this.#action, this.#getValue?.());\n  }\n\n  hostConnected(): void {\n    this.#connect(this.#container.value?.container);\n  }\n\n  hostDisconnected(): void {\n    this.#disconnect();\n  }\n\n  #connect(container: HTMLElement | null | undefined): void {\n    this.#disconnect();\n\n    if (!container) return;\n\n    const coordinator = getHotkeyCoordinator(container);\n    const notify = () => {\n      this.#host.requestUpdate();\n    };\n\n    this.#unsubscribe = coordinator.subscribeShortcutChanges(notify);\n    notify();\n  }\n\n  #disconnect(): void {\n    this.#unsubscribe?.();\n    this.#unsubscribe = null;\n  }\n}\n"],"mappings":";;;;;AAaA,IAAa,6BAAb,MAAsE;CACpE;CACA;CACA;CACA;CACA,eAAoC;;;;;;CAOpC,YAAY,MAA4B,QAAgB,UAA6C,CAAC,GAAG;EACvG,KAAKA,QAAQ;EACb,KAAKC,UAAU;EACf,KAAKC,YAAY,QAAQ;EACzB,KAAKC,aAAa,IAAI,gBAAgB,MAAM;GAC1C,SAAS;GACT,WAAW,QAAQ,KAAKC,SAAS,KAAK,SAAS;GAC/C,WAAW;EACb,CAAC;EACD,KAAK,cAAc,IAAI;CACzB;CAEA,IAAI,QAA4B;EAC9B,OAAO,KAAK;CACd;CAEA,IAAI,OAA2B;EAC7B,OAAO,KAAK,QAAQ;CACtB;CAEA,IAAI,WAA+B;EACjC,OAAO,KAAK,QAAQ;CACtB;CAEA,IAAI,UAAiC;EACnC,MAAM,YAAY,KAAKD,WAAW,OAAO;EACzC,IAAI,CAAC,WAAW,OAAO,CAAC;EAExB,OAAO,qBAAqB,SAAS,CAAC,CAAC,YAAY,KAAKF,SAAS,KAAKC,YAAY,CAAC;CACrF;CAEA,gBAAsB;EACpB,KAAKE,SAAS,KAAKD,WAAW,OAAO,SAAS;CAChD;CAEA,mBAAyB;EACvB,KAAKE,YAAY;CACnB;CAEA,SAAS,WAAiD;EACxD,KAAKA,YAAY;EAEjB,IAAI,CAAC,WAAW;EAEhB,MAAM,cAAc,qBAAqB,SAAS;EAClD,MAAM,eAAe;GACnB,KAAKL,MAAM,cAAc;EAC3B;EAEA,KAAKM,eAAe,YAAY,yBAAyB,MAAM;EAC/D,OAAO;CACT;CAEA,cAAoB;EAClB,KAAKA,eAAe;EACpB,KAAKA,eAAe;CACtB;AACF"}

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

@@ -0,0 +1,85 @@
+import { containerContext, playerContext } from "../../player/context.js";
+import { PlayerController } from "../../player/controller.js";
+import { UIElement } from "../ui-element.js";
+import { createHotkey, isHotkeyToggleAction, resolveHotkeyAction } from "@videojs/core/dom";
+import { ContextConsumer } from "@videojs/element/context";
+//#region src/ui/hotkey/element.ts
+var HotkeyElement = class extends UIElement {
+	constructor(..._args) {
+		super(..._args);
+		this.keys = "";
+		this.action = "";
+		this.value = void 0;
+		this.disabled = false;
+		this.target = "player";
+		this.#player = new PlayerController(this, playerContext);
+		this.#container = new ContextConsumer(this, {
+			context: containerContext,
+			callback: () => this.requestUpdate(),
+			subscribe: true
+		});
+		this.#cleanup = null;
+	}
+	static {
+		this.tagName = "media-hotkey";
+	}
+	static {
+		this.properties = {
+			keys: { type: String },
+			action: { type: String },
+			value: { type: Number },
+			disabled: { type: Boolean },
+			target: { type: String }
+		};
+	}
+	#player;
+	#container;
+	#cleanup;
+	connectedCallback() {
+		super.connectedCallback();
+		this.style.display = "none";
+		this.#register();
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.#unregister();
+	}
+	update(changed) {
+		super.update(changed);
+		if (this.isConnected) {
+			this.#unregister();
+			this.#register();
+		}
+	}
+	#register() {
+		const store = this.#player.value;
+		const container = this.#container.value?.container;
+		if (!this.keys || !this.action || !store || !container) return;
+		const resolver = resolveHotkeyAction(this.action);
+		if (!resolver) return;
+		const { value, action } = this;
+		this.#cleanup = createHotkey(container, {
+			keys: this.keys,
+			action,
+			value,
+			target: this.target,
+			disabled: this.disabled,
+			repeatable: !isHotkeyToggleAction(action),
+			onActivate: (_event, key) => {
+				resolver({
+					store,
+					key,
+					value
+				});
+			}
+		});
+	}
+	#unregister() {
+		this.#cleanup?.();
+		this.#cleanup = null;
+	}
+};
+//#endregion
+export { HotkeyElement };
+
+//# sourceMappingURL=element.js.map

package/dist/default/ui/hotkey/element.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"element.js","names":["#player","#container","#register","#unregister","#cleanup"],"sources":["../../../../src/ui/hotkey/element.ts"],"sourcesContent":["import type { HotkeyProps } from '@videojs/core';\nimport { createHotkey, isHotkeyToggleAction, resolveHotkeyAction } from '@videojs/core/dom';\nimport type { PropertyDeclarationMap, PropertyValues } from '@videojs/element';\nimport { ContextConsumer } from '@videojs/element/context';\n\nimport { containerContext, playerContext } from '../../player/context';\nimport { PlayerController } from '../../player/controller';\nimport { UIElement } from '../ui-element';\n\nexport class HotkeyElement extends UIElement {\n  static readonly tagName = 'media-hotkey';\n\n  static override properties: PropertyDeclarationMap = {\n    keys: { type: String },\n    action: { type: String },\n    value: { type: Number },\n    disabled: { type: Boolean },\n    target: { type: String },\n  };\n\n  keys: HotkeyProps['keys'] = '';\n  action: HotkeyProps['action'] | '' = '';\n  value: HotkeyProps['value'] = undefined;\n  disabled: NonNullable<HotkeyProps['disabled']> = false;\n  target: NonNullable<HotkeyProps['target']> = 'player';\n\n  readonly #player = new PlayerController(this, playerContext);\n  readonly #container = new ContextConsumer(this, {\n    context: containerContext,\n    callback: () => this.requestUpdate(),\n    subscribe: true,\n  });\n  #cleanup: (() => void) | null = null;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this.style.display = 'none';\n    this.#register();\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.#unregister();\n  }\n\n  protected override update(changed: PropertyValues): void {\n    super.update(changed);\n\n    // Re-register when attributes change.\n    if (this.isConnected) {\n      this.#unregister();\n      this.#register();\n    }\n  }\n\n  #register(): void {\n    const store = this.#player.value;\n    const container = this.#container.value?.container;\n    if (!this.keys || !this.action || !store || !container) return;\n\n    const resolver = resolveHotkeyAction(this.action);\n    if (!resolver) return;\n\n    const { value, action } = this;\n\n    this.#cleanup = createHotkey(container, {\n      keys: this.keys,\n      action,\n      value,\n      target: this.target,\n      disabled: this.disabled,\n      repeatable: !isHotkeyToggleAction(action),\n      onActivate: (_event, key) => {\n        resolver({ store, key, value });\n      },\n    });\n  }\n\n  #unregister(): void {\n    this.#cleanup?.();\n    this.#cleanup = null;\n  }\n}\n"],"mappings":";;;;;;AASA,IAAa,gBAAb,cAAmC,UAAU;;;EAWf,KAAA,OAAA;EACS,KAAA,SAAA;EACP,KAAA,QAAA,KAAA;EACmB,KAAA,WAAA;EACJ,KAAA,SAAA;EAE1B,KAAA,UAAA,IAAI,iBAAiB,MAAM,aAAa;EACrC,KAAA,aAAA,IAAI,gBAAgB,MAAM;GAC9C,SAAS;GACT,gBAAgB,KAAK,cAAc;GACnC,WAAW;EACb,CAAC;EAC+B,KAAA,WAAA;;;EAtBN,KAAA,UAAA;;;EAE2B,KAAA,aAAA;GACnD,MAAM,EAAE,MAAM,OAAO;GACrB,QAAQ,EAAE,MAAM,OAAO;GACvB,OAAO,EAAE,MAAM,OAAO;GACtB,UAAU,EAAE,MAAM,QAAQ;GAC1B,QAAQ,EAAE,MAAM,OAAO;EACzB;;CAQA;CACA;CAKA;CAEA,oBAAmC;EACjC,MAAM,kBAAkB;EACxB,KAAK,MAAM,UAAU;EACrB,KAAKE,UAAU;CACjB;CAEA,uBAAsC;EACpC,MAAM,qBAAqB;EAC3B,KAAKC,YAAY;CACnB;CAEA,OAA0B,SAA+B;EACvD,MAAM,OAAO,OAAO;EAGpB,IAAI,KAAK,aAAa;GACpB,KAAKA,YAAY;GACjB,KAAKD,UAAU;EACjB;CACF;CAEA,YAAkB;EAChB,MAAM,QAAQ,KAAKF,QAAQ;EAC3B,MAAM,YAAY,KAAKC,WAAW,OAAO;EACzC,IAAI,CAAC,KAAK,QAAQ,CAAC,KAAK,UAAU,CAAC,SAAS,CAAC,WAAW;EAExD,MAAM,WAAW,oBAAoB,KAAK,MAAM;EAChD,IAAI,CAAC,UAAU;EAEf,MAAM,EAAE,OAAO,WAAW;EAE1B,KAAKG,WAAW,aAAa,WAAW;GACtC,MAAM,KAAK;GACX;GACA;GACA,QAAQ,KAAK;GACb,UAAU,KAAK;GACf,YAAY,CAAC,qBAAqB,MAAM;GACxC,aAAa,QAAQ,QAAQ;IAC3B,SAAS;KAAE;KAAO;KAAK;IAAM,CAAC;GAChC;EACF,CAAC;CACH;CAEA,cAAoB;EAClB,KAAKA,WAAW;EAChB,KAAKA,WAAW;CAClB;AACF"}

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

@@ -0,0 +1,116 @@
+import { containerContext, playerContext } from "../../player/context.js";
+import { PlayerController } from "../../player/controller.js";
+import { UIElement } from "../ui-element.js";
+import { getRenderedIndicatorState, isIndicatorPresent } from "@videojs/core";
+import { getIndicatorVisibilityCoordinator, getMediaSnapshot, subscribeToInputActions } from "@videojs/core/dom";
+import { ContextConsumer } from "@videojs/element/context";
+//#region src/ui/input-indicator/element.ts
+var InputIndicatorElement = class extends UIElement {
+	constructor(..._args) {
+		super(..._args);
+		this.player = new PlayerController(this, playerContext);
+		this.container = new ContextConsumer(this, {
+			context: containerContext,
+			callback: () => this.#reconnect(),
+			subscribe: true
+		});
+		this.#disconnect = null;
+		this.#inputActionUnsubscribe = null;
+		this.#visibilityUnsubscribe = null;
+		this.#visibilityHandle = null;
+		this.#lastGeneration = 0;
+		this.#snapshot = null;
+	}
+	get options() {
+		return {};
+	}
+	#disconnect;
+	#inputActionUnsubscribe;
+	#visibilityUnsubscribe;
+	#visibilityHandle;
+	#lastGeneration;
+	#snapshot;
+	#getVisibilityHandle() {
+		return this.#visibilityHandle ??= { close: () => this.core.close() };
+	}
+	#payloadSnapshot() {
+		return this.#snapshot ?? this.core.state.current;
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		if (this.destroyed) return;
+		this.#snapshot = this.core.state.current;
+		this.#disconnect = new AbortController();
+		this.core.state.subscribe(() => this.requestUpdate(), { signal: this.#disconnect.signal });
+		this.transition.state.subscribe(() => this.requestUpdate(), { signal: this.#disconnect.signal });
+		this.hidden = true;
+		this.#reconnect();
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.#inputActionUnsubscribe?.();
+		this.#visibilityUnsubscribe?.();
+		this.#inputActionUnsubscribe = null;
+		this.#visibilityUnsubscribe = null;
+		this.#disconnect?.abort();
+		this.#disconnect = null;
+	}
+	destroyCallback() {
+		this.#inputActionUnsubscribe?.();
+		this.#visibilityUnsubscribe?.();
+		this.core.destroy();
+		this.transition.destroy();
+		this.liveIndicator.remove();
+		super.destroyCallback();
+	}
+	willUpdate(changed) {
+		super.willUpdate(changed);
+		this.syncCoreProps();
+	}
+	update(changed) {
+		super.update(changed);
+		this.#syncTransition();
+		const currentState = this.core.state.current;
+		const transitionState = this.transition.state.current;
+		if (!isIndicatorPresent(currentState, transitionState)) {
+			this.liveIndicator.remove();
+			return;
+		}
+		const state = getRenderedIndicatorState(currentState, this.#payloadSnapshot(), transitionState);
+		this.liveIndicator.render(state);
+	}
+	#syncTransition() {
+		const currentState = this.core.state.current;
+		if (currentState.open) {
+			this.#snapshot = currentState;
+			if (this.#lastGeneration !== currentState.generation) {
+				this.#lastGeneration = currentState.generation;
+				const transitionState = this.transition.state.current;
+				if (!transitionState.active || this.options.replayOnUpdate !== false) this.transition.open(this.liveIndicator.element);
+				else if (transitionState.status === "ending") this.transition.cancel();
+			}
+			return;
+		}
+		const { active, status } = this.transition.state.current;
+		if (active && status !== "ending") this.transition.close(this.liveIndicator.element);
+	}
+	#reconnect() {
+		if (!this.container) return;
+		this.#inputActionUnsubscribe?.();
+		this.#visibilityUnsubscribe?.();
+		this.#inputActionUnsubscribe = null;
+		this.#visibilityUnsubscribe = null;
+		const container = this.container.value?.container;
+		if (!container) return;
+		const visibility = getIndicatorVisibilityCoordinator(container);
+		const visibilityHandle = this.#getVisibilityHandle();
+		this.#visibilityUnsubscribe = visibility.register(visibilityHandle);
+		this.#inputActionUnsubscribe = subscribeToInputActions(container, (event) => {
+			if (this.core.processEvent(event, getMediaSnapshot(this.player.value))) visibility.show(visibilityHandle);
+		});
+	}
+};
+//#endregion
+export { InputIndicatorElement };
+
+//# sourceMappingURL=element.js.map

package/dist/default/ui/input-indicator/element.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"element.js","names":["#reconnect","#visibilityHandle","#snapshot","#disconnect","#inputActionUnsubscribe","#visibilityUnsubscribe","#syncTransition","#payloadSnapshot","#lastGeneration","#getVisibilityHandle"],"sources":["../../../../src/ui/input-indicator/element.ts"],"sourcesContent":["import {\n  getRenderedIndicatorState,\n  type IndicatorLifecycleState,\n  type IndicatorVisibilityHandle,\n  type InputActionEvent,\n  isIndicatorPresent,\n  type MediaSnapshot,\n} from '@videojs/core';\nimport {\n  getIndicatorVisibilityCoordinator,\n  getMediaSnapshot,\n  subscribeToInputActions,\n  type TransitionApi,\n} from '@videojs/core/dom';\nimport type { PropertyValues } from '@videojs/element';\nimport { ContextConsumer } from '@videojs/element/context';\nimport type { State as StoreState } from '@videojs/store';\n\nimport { containerContext, playerContext } from '../../player/context';\nimport { PlayerController } from '../../player/controller';\nimport { UIElement } from '../ui-element';\nimport type { LiveIndicator } from './live-indicator';\n\n/** Shared imperative API for status / volume / seek indicator cores. */\nexport interface InputIndicatorCoreApi<IndicatorState extends IndicatorLifecycleState> {\n  readonly state: StoreState<IndicatorState>;\n  destroy(): void;\n  close(): void;\n  processEvent(event: InputActionEvent, snapshot: MediaSnapshot): boolean;\n}\n\nexport interface InputIndicatorOptions {\n  replayOnUpdate?: boolean | undefined;\n}\n\nexport abstract class InputIndicatorElement<IndicatorState extends IndicatorLifecycleState> extends UIElement {\n  protected abstract get core(): InputIndicatorCoreApi<IndicatorState>;\n  protected abstract get transition(): TransitionApi;\n  protected abstract get liveIndicator(): LiveIndicator<IndicatorState>;\n  protected get options(): InputIndicatorOptions {\n    return {};\n  }\n\n  protected abstract syncCoreProps(): void;\n\n  protected readonly player = new PlayerController(this, playerContext);\n  protected readonly container = new ContextConsumer(this, {\n    context: containerContext,\n    callback: () => this.#reconnect(),\n    subscribe: true,\n  });\n\n  #disconnect: AbortController | null = null;\n  #inputActionUnsubscribe: (() => void) | null = null;\n  #visibilityUnsubscribe: (() => void) | null = null;\n  #visibilityHandle: IndicatorVisibilityHandle | null = null;\n  #lastGeneration = 0;\n  #snapshot: IndicatorState | null = null;\n\n  #getVisibilityHandle(): IndicatorVisibilityHandle {\n    return (this.#visibilityHandle ??= { close: () => this.core.close() });\n  }\n\n  #payloadSnapshot(): IndicatorState {\n    return this.#snapshot ?? this.core.state.current;\n  }\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n\n    if (this.destroyed) return;\n\n    this.#snapshot = this.core.state.current;\n\n    this.#disconnect = new AbortController();\n    this.core.state.subscribe(() => this.requestUpdate(), { signal: this.#disconnect.signal });\n    this.transition.state.subscribe(() => this.requestUpdate(), { signal: this.#disconnect.signal });\n    this.hidden = true;\n    this.#reconnect();\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.#inputActionUnsubscribe?.();\n    this.#visibilityUnsubscribe?.();\n    this.#inputActionUnsubscribe = null;\n    this.#visibilityUnsubscribe = null;\n    this.#disconnect?.abort();\n    this.#disconnect = null;\n  }\n\n  override destroyCallback(): void {\n    this.#inputActionUnsubscribe?.();\n    this.#visibilityUnsubscribe?.();\n    this.core.destroy();\n    this.transition.destroy();\n    this.liveIndicator.remove();\n    super.destroyCallback();\n  }\n\n  protected override willUpdate(changed: PropertyValues): void {\n    super.willUpdate(changed);\n    this.syncCoreProps();\n  }\n\n  protected override update(changed: PropertyValues): void {\n    super.update(changed);\n    this.#syncTransition();\n\n    const currentState = this.core.state.current;\n    const transitionState = this.transition.state.current;\n    const present = isIndicatorPresent(currentState, transitionState);\n\n    if (!present) {\n      this.liveIndicator.remove();\n      return;\n    }\n\n    const state = getRenderedIndicatorState(currentState, this.#payloadSnapshot(), transitionState);\n\n    this.liveIndicator.render(state);\n  }\n\n  #syncTransition(): void {\n    const currentState = this.core.state.current;\n\n    if (currentState.open) {\n      this.#snapshot = currentState;\n\n      if (this.#lastGeneration !== currentState.generation) {\n        this.#lastGeneration = currentState.generation;\n        const transitionState = this.transition.state.current;\n\n        if (!transitionState.active || this.options.replayOnUpdate !== false) {\n          void this.transition.open(this.liveIndicator.element);\n        } else if (transitionState.status === 'ending') {\n          this.transition.cancel();\n        }\n      }\n\n      return;\n    }\n\n    const { active, status } = this.transition.state.current;\n\n    if (active && status !== 'ending') {\n      void this.transition.close(this.liveIndicator.element);\n    }\n  }\n\n  #reconnect(): void {\n    // Context can resolve before this field assignment completes.\n    if (!this.container) return;\n\n    this.#inputActionUnsubscribe?.();\n    this.#visibilityUnsubscribe?.();\n    this.#inputActionUnsubscribe = null;\n    this.#visibilityUnsubscribe = null;\n\n    const container = this.container.value?.container;\n    if (!container) return;\n\n    const visibility = getIndicatorVisibilityCoordinator(container);\n    const visibilityHandle = this.#getVisibilityHandle();\n\n    this.#visibilityUnsubscribe = visibility.register(visibilityHandle);\n\n    this.#inputActionUnsubscribe = subscribeToInputActions(container, (event) => {\n      if (this.core.processEvent(event, getMediaSnapshot(this.player.value))) {\n        visibility.show(visibilityHandle);\n      }\n    });\n  }\n}\n"],"mappings":"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"}

package/dist/default/ui/input-indicator/live-indicator.js

@@ -0,0 +1,32 @@
+import { applyStateDataAttrs } from "@videojs/core/dom";
+//#region src/ui/input-indicator/live-indicator.ts
+var LiveIndicator = class {
+	#host;
+	#dataAttrs;
+	#render;
+	constructor(options) {
+		this.#host = options.host;
+		this.#dataAttrs = options.dataAttrs;
+		this.#render = options.render;
+	}
+	get element() {
+		return this.#host;
+	}
+	render(state) {
+		this.#host.hidden = false;
+		applyStateDataAttrs(this.#host, state, this.#dataAttrs);
+		this.#render(this.#host, state);
+		return this.#host;
+	}
+	remove() {
+		this.#host.hidden = true;
+		for (const key in this.#dataAttrs) {
+			const name = this.#dataAttrs[key];
+			if (name) this.#host.removeAttribute(name);
+		}
+	}
+};
+//#endregion
+export { LiveIndicator };
+
+//# sourceMappingURL=live-indicator.js.map

package/dist/default/ui/input-indicator/live-indicator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"live-indicator.js","names":["#host","#dataAttrs","#render"],"sources":["../../../../src/ui/input-indicator/live-indicator.ts"],"sourcesContent":["import type { StateAttrMap } from '@videojs/core';\nimport { applyStateDataAttrs } from '@videojs/core/dom';\n\nexport interface LiveIndicatorOptions<State extends object> {\n  host: HTMLElement;\n  dataAttrs: StateAttrMap<State>;\n  render: (element: HTMLElement, state: State) => void;\n}\n\nexport class LiveIndicator<State extends object> {\n  readonly #host: HTMLElement;\n  readonly #dataAttrs: StateAttrMap<State>;\n  readonly #render: (element: HTMLElement, state: State) => void;\n\n  constructor(options: LiveIndicatorOptions<State>) {\n    this.#host = options.host;\n    this.#dataAttrs = options.dataAttrs;\n    this.#render = options.render;\n  }\n\n  get element(): HTMLElement {\n    return this.#host;\n  }\n\n  render(state: State): HTMLElement {\n    this.#host.hidden = false;\n    applyStateDataAttrs(this.#host, state, this.#dataAttrs);\n    this.#render(this.#host, state);\n\n    return this.#host;\n  }\n\n  remove(): void {\n    this.#host.hidden = true;\n\n    for (const key in this.#dataAttrs) {\n      const name = this.#dataAttrs[key];\n\n      if (name) this.#host.removeAttribute(name);\n    }\n  }\n}\n"],"mappings":";;AASA,IAAa,gBAAb,MAAiD;CAC/C;CACA;CACA;CAEA,YAAY,SAAsC;EAChD,KAAKA,QAAQ,QAAQ;EACrB,KAAKC,aAAa,QAAQ;EAC1B,KAAKC,UAAU,QAAQ;CACzB;CAEA,IAAI,UAAuB;EACzB,OAAO,KAAKF;CACd;CAEA,OAAO,OAA2B;EAChC,KAAKA,MAAM,SAAS;EACpB,oBAAoB,KAAKA,OAAO,OAAO,KAAKC,UAAU;EACtD,KAAKC,QAAQ,KAAKF,OAAO,KAAK;EAE9B,OAAO,KAAKA;CACd;CAEA,SAAe;EACb,KAAKA,MAAM,SAAS;EAEpB,KAAK,MAAM,OAAO,KAAKC,YAAY;GACjC,MAAM,OAAO,KAAKA,WAAW;GAE7B,IAAI,MAAM,KAAKD,MAAM,gBAAgB,IAAI;EAC3C;CACF;AACF"}

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"}