@videojs/html 10.0.0-alpha.4 → 10.0.0-alpha.6

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

@@ -0,0 +1,163 @@
+import { MediaElement } from "../media-element.js";
+import { applyElementProps, applyStateDataAttrs, createPopover, createTransition, getAnchorNameStyle, getAnchorPositionStyle, resolveOffsets } from "@videojs/core/dom";
+import { SnapshotController } from "@videojs/store/html";
+import { PopoverCore, PopoverDataAttrs } from "@videojs/core";
+import { applyStyles, supportsAnchorPositioning } from "@videojs/utils/dom";
+
+//#region src/ui/popover/popover-element.ts
+var PopoverElement = class extends MediaElement {
+	constructor(..._args) {
+		super(..._args);
+		this.open = PopoverCore.defaultProps.open;
+		this.defaultOpen = PopoverCore.defaultProps.defaultOpen;
+		this.side = PopoverCore.defaultProps.side;
+		this.align = PopoverCore.defaultProps.align;
+		this.modal = PopoverCore.defaultProps.modal;
+		this.closeOnEscape = PopoverCore.defaultProps.closeOnEscape;
+		this.closeOnOutsideClick = PopoverCore.defaultProps.closeOnOutsideClick;
+		this.openOnHover = PopoverCore.defaultProps.openOnHover;
+		this.delay = PopoverCore.defaultProps.delay;
+		this.closeDelay = PopoverCore.defaultProps.closeDelay;
+	}
+	static {
+		this.tagName = "media-popover";
+	}
+	static {
+		this.properties = {
+			open: { type: Boolean },
+			defaultOpen: {
+				type: Boolean,
+				attribute: "default-open"
+			},
+			side: { type: String },
+			align: { type: String },
+			modal: { type: Boolean },
+			closeOnEscape: {
+				type: Boolean,
+				attribute: "close-on-escape"
+			},
+			closeOnOutsideClick: {
+				type: Boolean,
+				attribute: "close-on-outside-click"
+			},
+			openOnHover: {
+				type: Boolean,
+				attribute: "open-on-hover"
+			},
+			delay: { type: Number },
+			closeDelay: {
+				type: Number,
+				attribute: "close-delay"
+			}
+		};
+	}
+	#core = new PopoverCore();
+	#popover = null;
+	#snapshot = null;
+	#disconnect = null;
+	#triggerAbort = null;
+	#currentTrigger = null;
+	connectedCallback() {
+		super.connectedCallback();
+		this.#disconnect = new AbortController();
+		this.#popover = createPopover({
+			transition: createTransition(),
+			onOpenChange: (nextOpen, details) => {
+				this.open = nextOpen;
+				this.dispatchEvent(new CustomEvent("open-change", { detail: {
+					open: nextOpen,
+					...details
+				} }));
+			},
+			closeOnEscape: () => this.closeOnEscape,
+			closeOnOutsideClick: () => this.closeOnOutsideClick,
+			openOnHover: () => this.openOnHover,
+			delay: () => this.delay,
+			closeDelay: () => this.closeDelay
+		});
+		this.#popover.setPopupElement(this);
+		applyElementProps(this, this.#popover.popupProps, { signal: this.#disconnect.signal });
+		if (this.#snapshot) this.#snapshot.track(this.#popover.input);
+		else this.#snapshot = new SnapshotController(this, this.#popover.input);
+	}
+	firstUpdated(changed) {
+		super.firstUpdated(changed);
+		if (this.defaultOpen && !this.open) this.#popover?.open();
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.#cleanupTrigger();
+		this.#popover?.destroy();
+		this.#popover = null;
+		this.#disconnect?.abort();
+		this.#disconnect = null;
+	}
+	willUpdate(changed) {
+		super.willUpdate(changed);
+		this.#core.setProps(this);
+		if (this.#popover && changed.has("open")) {
+			const { active: interactionOpen } = this.#popover.input.current;
+			if (this.open !== interactionOpen) if (this.open) this.#popover.open();
+			else this.#popover.close();
+		}
+	}
+	update(_changed) {
+		super.update(_changed);
+		if (!this.#popover) return;
+		const triggerEl = this.#findTrigger();
+		this.#syncTrigger(triggerEl);
+		const input = this.#popover.input.current;
+		this.#core.setInput(input);
+		const state = this.#core.getState();
+		applyElementProps(this, this.#core.getPopupAttrs(state));
+		applyStateDataAttrs(this, state, PopoverDataAttrs);
+		if (this.#currentTrigger) {
+			applyElementProps(this.#currentTrigger, this.#core.getTriggerAttrs(state, this.id));
+			applyStyles(this.#currentTrigger, getAnchorNameStyle(this.id));
+		}
+		if (!state.open) return;
+		const posOpts = {
+			side: state.side,
+			align: state.align
+		};
+		if (supportsAnchorPositioning()) applyStyles(this, getAnchorPositionStyle(this.id, posOpts));
+		else {
+			const triggerRect = this.#currentTrigger?.getBoundingClientRect();
+			const selfRect = this.getBoundingClientRect();
+			const boundaryRect = document.documentElement.getBoundingClientRect();
+			const offsets = resolveOffsets(this);
+			applyStyles(this, getAnchorPositionStyle(this.id, posOpts, triggerRect, selfRect, boundaryRect, offsets));
+		}
+	}
+	#findTrigger() {
+		if (!this.id) return null;
+		return this.getRootNode().querySelector(`[commandfor="${this.id}"]`);
+	}
+	#syncTrigger(triggerEl) {
+		if (triggerEl === this.#currentTrigger) return;
+		this.#cleanupTrigger();
+		this.#currentTrigger = triggerEl;
+		this.#popover?.setTriggerElement(triggerEl);
+		if (triggerEl && this.#popover) {
+			this.#triggerAbort = new AbortController();
+			applyElementProps(triggerEl, this.#popover.triggerProps, { signal: this.#triggerAbort.signal });
+		}
+	}
+	#cleanupTrigger() {
+		if (this.#currentTrigger) {
+			applyElementProps(this.#currentTrigger, {
+				"aria-expanded": void 0,
+				"aria-haspopup": void 0,
+				"aria-controls": void 0
+			});
+			this.#currentTrigger.style.removeProperty("anchor-name");
+		}
+		this.#triggerAbort?.abort();
+		this.#triggerAbort = null;
+		this.#currentTrigger = null;
+	}
+};
+
+//#endregion
+export { PopoverElement };
+//# sourceMappingURL=popover-element.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"popover-element.js","names":["#core","#disconnect","#popover","#snapshot","#cleanupTrigger","#findTrigger","#syncTrigger","#currentTrigger","#triggerAbort"],"sources":["../../../../src/ui/popover/popover-element.ts"],"sourcesContent":["import { PopoverCore, PopoverDataAttrs, type PopoverInput, type PopoverProps } from '@videojs/core';\nimport {\n  applyElementProps,\n  applyStateDataAttrs,\n  createPopover,\n  createTransition,\n  getAnchorNameStyle,\n  getAnchorPositionStyle,\n  type PopoverApi,\n  type PopoverChangeDetails,\n  resolveOffsets,\n} from '@videojs/core/dom';\nimport type { PropertyDeclarationMap, PropertyValues } from '@videojs/element';\nimport { SnapshotController } from '@videojs/store/html';\nimport { applyStyles, supportsAnchorPositioning } from '@videojs/utils/dom';\n\nimport { MediaElement } from '../media-element';\n\nexport class PopoverElement extends MediaElement {\n  static readonly tagName = 'media-popover';\n\n  static override properties = {\n    open: { type: Boolean },\n    defaultOpen: { type: Boolean, attribute: 'default-open' },\n    side: { type: String },\n    align: { type: String },\n    modal: { type: Boolean },\n    closeOnEscape: { type: Boolean, attribute: 'close-on-escape' },\n    closeOnOutsideClick: { type: Boolean, attribute: 'close-on-outside-click' },\n    openOnHover: { type: Boolean, attribute: 'open-on-hover' },\n    delay: { type: Number },\n    closeDelay: { type: Number, attribute: 'close-delay' },\n  } satisfies PropertyDeclarationMap<keyof PopoverCore.Props>;\n\n  open = PopoverCore.defaultProps.open;\n  defaultOpen = PopoverCore.defaultProps.defaultOpen;\n  side = PopoverCore.defaultProps.side;\n  align = PopoverCore.defaultProps.align;\n  modal: PopoverProps['modal'] = PopoverCore.defaultProps.modal;\n  closeOnEscape = PopoverCore.defaultProps.closeOnEscape;\n  closeOnOutsideClick = PopoverCore.defaultProps.closeOnOutsideClick;\n  openOnHover = PopoverCore.defaultProps.openOnHover;\n  delay = PopoverCore.defaultProps.delay;\n  closeDelay = PopoverCore.defaultProps.closeDelay;\n\n  readonly #core = new PopoverCore();\n  #popover: PopoverApi | null = null;\n  #snapshot: SnapshotController<PopoverInput> | null = null;\n\n  // Cleanup controllers\n  #disconnect: AbortController | null = null;\n  #triggerAbort: AbortController | null = null;\n  #currentTrigger: HTMLElement | null = null;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this.#disconnect = new AbortController();\n\n    this.#popover = createPopover({\n      transition: createTransition(),\n      onOpenChange: (nextOpen: boolean, details: PopoverChangeDetails) => {\n        this.open = nextOpen;\n        this.dispatchEvent(new CustomEvent('open-change', { detail: { open: nextOpen, ...details } }));\n      },\n      closeOnEscape: () => this.closeOnEscape,\n      closeOnOutsideClick: () => this.closeOnOutsideClick,\n      openOnHover: () => this.openOnHover,\n      delay: () => this.delay,\n      closeDelay: () => this.closeDelay,\n    });\n\n    // Register self as the popup element — the element IS the popup.\n    this.#popover.setPopupElement(this);\n\n    // Apply popup event handlers (pointerenter/leave, focusout) to self.\n    applyElementProps(this, this.#popover.popupProps, { signal: this.#disconnect.signal });\n\n    // Subscribe to interaction state for reactive updates.\n    // Reuse the controller across connect/disconnect cycles to avoid\n    // leaking stale controllers in the host's controller set.\n    if (this.#snapshot) {\n      this.#snapshot.track(this.#popover.input);\n    } else {\n      this.#snapshot = new SnapshotController(this, this.#popover.input);\n    }\n  }\n\n  protected override firstUpdated(changed: PropertyValues): void {\n    super.firstUpdated(changed);\n\n    // Uncontrolled mode: open if `defaultOpen` is set. Controlled `open`\n    // is already synced by `willUpdate` on the first render cycle.\n    if (this.defaultOpen && !this.open) {\n      this.#popover?.open();\n    }\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.#cleanupTrigger();\n    this.#popover?.destroy();\n    this.#popover = null;\n    this.#disconnect?.abort();\n    this.#disconnect = null;\n  }\n\n  protected override willUpdate(changed: PropertyValues): void {\n    super.willUpdate(changed);\n    this.#core.setProps(this);\n\n    // Sync controlled open state\n    if (this.#popover && changed.has('open')) {\n      const { active: interactionOpen } = this.#popover.input.current;\n      if (this.open !== interactionOpen) {\n        if (this.open) {\n          this.#popover.open();\n        } else {\n          this.#popover.close();\n        }\n      }\n    }\n  }\n\n  protected override update(_changed: PropertyValues): void {\n    super.update(_changed);\n    if (!this.#popover) return;\n\n    // Discover trigger via commandfor linkage.\n    const triggerEl = this.#findTrigger();\n    this.#syncTrigger(triggerEl);\n\n    // Derive state from core + input.\n    const input = this.#popover.input.current;\n    this.#core.setInput(input);\n    const state = this.#core.getState();\n\n    // Apply popup ARIA and data attributes to self.\n    applyElementProps(this, this.#core.getPopupAttrs(state));\n    applyStateDataAttrs(this, state, PopoverDataAttrs);\n\n    // Apply trigger ARIA and anchor-name to the discovered trigger.\n    if (this.#currentTrigger) {\n      applyElementProps(this.#currentTrigger, this.#core.getTriggerAttrs(state, this.id));\n      applyStyles(this.#currentTrigger, getAnchorNameStyle(this.id));\n    }\n\n    // Skip positioning when closed — no rects to measure.\n    if (!state.open) return;\n\n    // Apply positioning styles to self.\n    const posOpts = { side: state.side, align: state.align };\n\n    if (supportsAnchorPositioning()) {\n      // Native CSS Anchor Positioning — no JS rect measurements needed.\n      applyStyles(this, getAnchorPositionStyle(this.id, posOpts));\n    } else {\n      // JS fallback: measure rects and resolve CSS var offsets.\n      const triggerRect = this.#currentTrigger?.getBoundingClientRect();\n      const selfRect = this.getBoundingClientRect();\n      const boundaryRect = document.documentElement.getBoundingClientRect();\n      const offsets = resolveOffsets(this);\n      applyStyles(this, getAnchorPositionStyle(this.id, posOpts, triggerRect, selfRect, boundaryRect, offsets));\n    }\n  }\n\n  // --- Trigger discovery ---\n\n  #findTrigger(): HTMLElement | null {\n    if (!this.id) return null;\n    const root = this.getRootNode() as Document | ShadowRoot;\n    return root.querySelector<HTMLElement>(`[commandfor=\"${this.id}\"]`);\n  }\n\n  #syncTrigger(triggerEl: HTMLElement | null): void {\n    if (triggerEl === this.#currentTrigger) return;\n\n    this.#cleanupTrigger();\n    this.#currentTrigger = triggerEl;\n    this.#popover?.setTriggerElement(triggerEl);\n\n    if (triggerEl && this.#popover) {\n      this.#triggerAbort = new AbortController();\n      applyElementProps(triggerEl, this.#popover.triggerProps, { signal: this.#triggerAbort.signal });\n    }\n  }\n\n  #cleanupTrigger(): void {\n    if (this.#currentTrigger) {\n      // Remove ARIA attributes and anchor-name style from the old trigger.\n      applyElementProps(this.#currentTrigger, {\n        'aria-expanded': undefined,\n        'aria-haspopup': undefined,\n        'aria-controls': undefined,\n      });\n      this.#currentTrigger.style.removeProperty('anchor-name');\n    }\n\n    this.#triggerAbort?.abort();\n    this.#triggerAbort = null;\n    this.#currentTrigger = null;\n  }\n}\n"],"mappings":"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"}

package/dist/dev/ui/poster/poster-element.d.ts

@@ -1,12 +1,17 @@
-import { MediaElement } from "../media-element.js";
-import { PropertyValues } from "@videojs/element";
+import { PlayerController } from "../../player/player-controller.js";
+import { MediaUIElement } from "../media-ui-element.js";
+import * as _videojs_core_dom0 from "@videojs/core/dom";
+import * as _videojs_core0 from "@videojs/core";
+import { PosterCore } from "@videojs/core";
 
 //#region src/ui/poster/poster-element.d.ts
-declare class PosterElement extends MediaElement {
-  #private;
+declare class PosterElement extends MediaUIElement<PosterCore> {
   static readonly tagName = "media-poster";
-  connectedCallback(): void;
-  protected update(changed: PropertyValues): void;
+  protected readonly core: PosterCore;
+  protected readonly stateAttrMap: {
+    readonly visible: "data-visible";
+  };
+  protected readonly mediaState: PlayerController<_videojs_core_dom0.AnyPlayerStore, _videojs_core0.MediaPlaybackState | undefined>;
 }
 //#endregion
 export { PosterElement };

package/dist/dev/ui/poster/poster-element.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"poster-element.d.ts","names":[],"sources":["../../../../src/ui/poster/poster-element.ts"],"mappings":";;;;cAQa,aAAA,SAAsB,YAAA;EAAA;kBACjB,OAAA;EAKP,iBAAA,CAAA;EAAA,UAQU,MAAA,CAAO,OAAA,EAAS,cAAA;AAAA"}
+{"version":3,"file":"poster-element.d.ts","names":[],"sources":["../../../../src/ui/poster/poster-element.ts"],"mappings":";;;;;;;cAOa,aAAA,SAAsB,cAAA,CAAe,UAAA;EAAA,gBAChC,OAAA;EAAA,mBAEG,IAAA,EAAI,UAAA;EAAA,mBACJ,YAAA;IAAA;;qBACA,UAAA,EAAU,gBAAA,CAFN,kBAAA,CAEM,cAAA,EAAA,cAAA,CAAA,kBAAA;AAAA"}

package/dist/dev/ui/poster/poster-element.js

@@ -1,26 +1,20 @@
 import { playerContext } from "../../player/context.js";
-import { MediaElement } from "../media-element.js";
 import { PlayerController } from "../../player/player-controller.js";
-import { applyStateDataAttrs, logMissingFeature, selectPlayback } from "@videojs/core/dom";
+import { MediaUIElement } from "../media-ui-element.js";
+import { selectPlayback } from "@videojs/core/dom";
 import { PosterCore, PosterDataAttrs } from "@videojs/core";
 
 //#region src/ui/poster/poster-element.ts
-var PosterElement = class PosterElement extends MediaElement {
+var PosterElement = class extends MediaUIElement {
+	constructor(..._args) {
+		super(..._args);
+		this.core = new PosterCore();
+		this.stateAttrMap = PosterDataAttrs;
+		this.mediaState = new PlayerController(this, playerContext, selectPlayback);
+	}
 	static {
 		this.tagName = "media-poster";
 	}
-	#core = new PosterCore();
-	#state = new PlayerController(this, playerContext, selectPlayback);
-	connectedCallback() {
-		super.connectedCallback();
-		if (!this.#state.value) logMissingFeature(PosterElement.tagName, "playback");
-	}
-	update(changed) {
-		super.update(changed);
-		const media = this.#state.value;
-		if (!media) return;
-		applyStateDataAttrs(this, this.#core.getState(media), PosterDataAttrs);
-	}
 };
 
 //#endregion

package/dist/dev/ui/poster/poster-element.js.map

@@ -1 +1 @@
-{"version":3,"file":"poster-element.js","names":["#core","#state"],"sources":["../../../../src/ui/poster/poster-element.ts"],"sourcesContent":["import { PosterCore, PosterDataAttrs } from '@videojs/core';\nimport { applyStateDataAttrs, logMissingFeature, selectPlayback } from '@videojs/core/dom';\nimport type { PropertyValues } from '@videojs/element';\n\nimport { playerContext } from '../../player/context';\nimport { PlayerController } from '../../player/player-controller';\nimport { MediaElement } from '../media-element';\n\nexport class PosterElement extends MediaElement {\n  static readonly tagName = 'media-poster';\n\n  readonly #core = new PosterCore();\n  readonly #state = new PlayerController(this, playerContext, selectPlayback);\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n\n    if (__DEV__ && !this.#state.value) {\n      logMissingFeature(PosterElement.tagName, 'playback');\n    }\n  }\n\n  protected override update(changed: PropertyValues): void {\n    super.update(changed);\n\n    const media = this.#state.value;\n\n    if (!media) {\n      return;\n    }\n\n    applyStateDataAttrs(this, this.#core.getState(media), PosterDataAttrs);\n  }\n}\n"],"mappings":";;;;;;;AAQA,IAAa,gBAAb,MAAa,sBAAsB,aAAa;;iBACpB;;CAE1B,CAASA,OAAQ,IAAI,YAAY;CACjC,CAASC,QAAS,IAAI,iBAAiB,MAAM,eAAe,eAAe;CAE3E,AAAS,oBAA0B;AACjC,QAAM,mBAAmB;AAEzB,MAAe,CAAC,MAAKA,MAAO,MAC1B,mBAAkB,cAAc,SAAS,WAAW;;CAIxD,AAAmB,OAAO,SAA+B;AACvD,QAAM,OAAO,QAAQ;EAErB,MAAM,QAAQ,MAAKA,MAAO;AAE1B,MAAI,CAAC,MACH;AAGF,sBAAoB,MAAM,MAAKD,KAAM,SAAS,MAAM,EAAE,gBAAgB"}
+{"version":3,"file":"poster-element.js","names":[],"sources":["../../../../src/ui/poster/poster-element.ts"],"sourcesContent":["import { PosterCore, PosterDataAttrs } from '@videojs/core';\nimport { selectPlayback } from '@videojs/core/dom';\n\nimport { playerContext } from '../../player/context';\nimport { PlayerController } from '../../player/player-controller';\nimport { MediaUIElement } from '../media-ui-element';\n\nexport class PosterElement extends MediaUIElement<PosterCore> {\n  static readonly tagName = 'media-poster';\n\n  protected readonly core = new PosterCore();\n  protected readonly stateAttrMap = PosterDataAttrs;\n  protected readonly mediaState = new PlayerController(this, playerContext, selectPlayback);\n}\n"],"mappings":";;;;;;;AAOA,IAAa,gBAAb,cAAmC,eAA2B;;;cAGlC,IAAI,YAAY;sBACR;oBACF,IAAI,iBAAiB,MAAM,eAAe,eAAe;;;iBAJ/D"}

package/dist/dev/ui/seek-button/seek-button-element.d.ts

@@ -1,29 +1,21 @@
-import { MediaElement } from "../media-element.js";
-import { PropertyValues } from "@videojs/element";
-import * as _videojs_core0 from "@videojs/core";
+import { PlayerController } from "../../player/player-controller.js";
+import { MediaButtonElement } from "../media-button-element.js";
+import * as _videojs_core_dom0 from "@videojs/core/dom";
+import { PropertyDeclarationMap } from "@videojs/element";
+import { MediaTimeState, SeekButtonCore } from "@videojs/core";
 
 //#region src/ui/seek-button/seek-button-element.d.ts
-declare class SeekButtonElement extends MediaElement {
-  #private;
+declare class SeekButtonElement extends MediaButtonElement<SeekButtonCore> {
   static readonly tagName = "media-seek-button";
-  static properties: {
-    seconds: {
-      type: NumberConstructor;
-    };
-    label: {
-      type: StringConstructor;
-    };
-    disabled: {
-      type: BooleanConstructor;
-    };
-  };
+  static properties: PropertyDeclarationMap;
   seconds: number;
-  label: string | ((state: _videojs_core0.SeekButtonState) => string);
-  disabled: boolean;
-  connectedCallback(): void;
-  disconnectedCallback(): void;
-  protected willUpdate(changed: PropertyValues): void;
-  protected update(changed: PropertyValues): void;
+  protected readonly core: SeekButtonCore;
+  protected readonly stateAttrMap: {
+    readonly seeking: "data-seeking";
+    readonly direction: "data-direction";
+  };
+  protected readonly mediaState: PlayerController<_videojs_core_dom0.AnyPlayerStore, MediaTimeState | undefined>;
+  protected activate(state: MediaTimeState): void;
 }
 //#endregion
 export { SeekButtonElement };

package/dist/dev/ui/seek-button/seek-button-element.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"seek-button-element.d.ts","names":[],"sources":["../../../../src/ui/seek-button/seek-button-element.ts"],"mappings":";;;;;cAQa,iBAAA,SAA0B,YAAA;EAAA;kBACrB,OAAA;EAAA,OAEA,UAAA;;;;;;;;;;;EAMhB,OAAA;EACA,KAAA,aAAK,KAAA,iBAAA,eAAA;EACL,QAAA;EAOS,iBAAA,CAAA;EAiBA,oBAAA,CAAA;EAAA,UAMU,UAAA,CAAW,OAAA,EAAS,cAAA;EAAA,UAKpB,MAAA,CAAO,OAAA,EAAS,cAAA;AAAA"}
+{"version":3,"file":"seek-button-element.d.ts","names":[],"sources":["../../../../src/ui/seek-button/seek-button-element.ts"],"mappings":";;;;;;;cAQa,iBAAA,SAA0B,kBAAA,CAAmB,cAAA;EAAA,gBACxC,OAAA;EAAA,OAEA,UAAA,EAAY,sBAAA;EAK5B,OAAA;EAAA,mBAEmB,IAAA,EAAI,cAAA;EAAA,mBACJ,YAAA;IAAA;;;qBACA,UAAA,EAAU,gBAAA,CAFN,kBAAA,CAEM,cAAA,EAAA,cAAA;EAAA,UAEnB,QAAA,CAAS,KAAA,EAAO,cAAA;AAAA"}

package/dist/dev/ui/seek-button/seek-button-element.js

@@ -1,56 +1,29 @@
 import { playerContext } from "../../player/context.js";
-import { MediaElement } from "../media-element.js";
 import { PlayerController } from "../../player/player-controller.js";
-import { applyElementProps, applyStateDataAttrs, createButton, logMissingFeature, selectTime } from "@videojs/core/dom";
+import { MediaButtonElement } from "../media-button-element.js";
+import { selectTime } from "@videojs/core/dom";
 import { SeekButtonCore, SeekButtonDataAttrs } from "@videojs/core";
 
 //#region src/ui/seek-button/seek-button-element.ts
-var SeekButtonElement = class SeekButtonElement extends MediaElement {
+var SeekButtonElement = class extends MediaButtonElement {
 	constructor(..._args) {
 		super(..._args);
 		this.seconds = SeekButtonCore.defaultProps.seconds;
-		this.label = SeekButtonCore.defaultProps.label;
-		this.disabled = SeekButtonCore.defaultProps.disabled;
+		this.core = new SeekButtonCore();
+		this.stateAttrMap = SeekButtonDataAttrs;
+		this.mediaState = new PlayerController(this, playerContext, selectTime);
 	}
 	static {
 		this.tagName = "media-seek-button";
 	}
 	static {
 		this.properties = {
-			seconds: { type: Number },
-			label: { type: String },
-			disabled: { type: Boolean }
+			...MediaButtonElement.properties,
+			seconds: { type: Number }
 		};
 	}
-	#core = new SeekButtonCore();
-	#state = new PlayerController(this, playerContext, selectTime);
-	#disconnect = null;
-	connectedCallback() {
-		super.connectedCallback();
-		this.#disconnect = new AbortController();
-		const buttonProps = createButton({
-			onActivate: () => this.#core.seek(this.#state.value),
-			isDisabled: () => this.disabled || !this.#state.value
-		});
-		applyElementProps(this, buttonProps, this.#disconnect.signal);
-		if (!this.#state.value) logMissingFeature(SeekButtonElement.tagName, "time");
-	}
-	disconnectedCallback() {
-		super.disconnectedCallback();
-		this.#disconnect?.abort();
-		this.#disconnect = null;
-	}
-	willUpdate(changed) {
-		super.willUpdate(changed);
-		this.#core.setProps(this);
-	}
-	update(changed) {
-		super.update(changed);
-		const media = this.#state.value;
-		if (!media) return;
-		const state = this.#core.getState(media);
-		applyElementProps(this, this.#core.getAttrs(state));
-		applyStateDataAttrs(this, state, SeekButtonDataAttrs);
+	activate(state) {
+		this.core.seek(state);
 	}
 };
 

package/dist/dev/ui/seek-button/seek-button-element.js.map

@@ -1 +1 @@
-{"version":3,"file":"seek-button-element.js","names":["#core","#state","#disconnect"],"sources":["../../../../src/ui/seek-button/seek-button-element.ts"],"sourcesContent":["import { SeekButtonCore, SeekButtonDataAttrs } from '@videojs/core';\nimport { applyElementProps, applyStateDataAttrs, createButton, logMissingFeature, selectTime } from '@videojs/core/dom';\nimport type { PropertyDeclarationMap, PropertyValues } from '@videojs/element';\n\nimport { playerContext } from '../../player/context';\nimport { PlayerController } from '../../player/player-controller';\nimport { MediaElement } from '../media-element';\n\nexport class SeekButtonElement extends MediaElement {\n  static readonly tagName = 'media-seek-button';\n\n  static override properties = {\n    seconds: { type: Number },\n    label: { type: String },\n    disabled: { type: Boolean },\n  } satisfies PropertyDeclarationMap<keyof SeekButtonCore.Props>;\n\n  seconds = SeekButtonCore.defaultProps.seconds;\n  label = SeekButtonCore.defaultProps.label;\n  disabled = SeekButtonCore.defaultProps.disabled;\n\n  readonly #core = new SeekButtonCore();\n  readonly #state = new PlayerController(this, playerContext, selectTime);\n\n  #disconnect: AbortController | null = null;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n\n    this.#disconnect = new AbortController();\n\n    const buttonProps = createButton({\n      onActivate: () => this.#core.seek(this.#state.value!),\n      isDisabled: () => this.disabled || !this.#state.value,\n    });\n\n    applyElementProps(this, buttonProps, this.#disconnect.signal);\n\n    if (__DEV__ && !this.#state.value) {\n      logMissingFeature(SeekButtonElement.tagName, 'time');\n    }\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.#disconnect?.abort();\n    this.#disconnect = null;\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.#state.value;\n\n    if (!media) return;\n\n    const state = this.#core.getState(media);\n    applyElementProps(this, this.#core.getAttrs(state));\n    applyStateDataAttrs(this, state, SeekButtonDataAttrs);\n  }\n}\n"],"mappings":";;;;;;;AAQA,IAAa,oBAAb,MAAa,0BAA0B,aAAa;;;iBASxC,eAAe,aAAa;eAC9B,eAAe,aAAa;kBACzB,eAAe,aAAa;;;iBAVb;;;oBAEG;GAC3B,SAAS,EAAE,MAAM,QAAQ;GACzB,OAAO,EAAE,MAAM,QAAQ;GACvB,UAAU,EAAE,MAAM,SAAS;GAC5B;;CAMD,CAASA,OAAQ,IAAI,gBAAgB;CACrC,CAASC,QAAS,IAAI,iBAAiB,MAAM,eAAe,WAAW;CAEvE,cAAsC;CAEtC,AAAS,oBAA0B;AACjC,QAAM,mBAAmB;AAEzB,QAAKC,aAAc,IAAI,iBAAiB;EAExC,MAAM,cAAc,aAAa;GAC/B,kBAAkB,MAAKF,KAAM,KAAK,MAAKC,MAAO,MAAO;GACrD,kBAAkB,KAAK,YAAY,CAAC,MAAKA,MAAO;GACjD,CAAC;AAEF,oBAAkB,MAAM,aAAa,MAAKC,WAAY,OAAO;AAE7D,MAAe,CAAC,MAAKD,MAAO,MAC1B,mBAAkB,kBAAkB,SAAS,OAAO;;CAIxD,AAAS,uBAA6B;AACpC,QAAM,sBAAsB;AAC5B,QAAKC,YAAa,OAAO;AACzB,QAAKA,aAAc;;CAGrB,AAAmB,WAAW,SAA+B;AAC3D,QAAM,WAAW,QAAQ;AACzB,QAAKF,KAAM,SAAS,KAAK;;CAG3B,AAAmB,OAAO,SAA+B;AACvD,QAAM,OAAO,QAAQ;EAErB,MAAM,QAAQ,MAAKC,MAAO;AAE1B,MAAI,CAAC,MAAO;EAEZ,MAAM,QAAQ,MAAKD,KAAM,SAAS,MAAM;AACxC,oBAAkB,MAAM,MAAKA,KAAM,SAAS,MAAM,CAAC;AACnD,sBAAoB,MAAM,OAAO,oBAAoB"}
+{"version":3,"file":"seek-button-element.js","names":[],"sources":["../../../../src/ui/seek-button/seek-button-element.ts"],"sourcesContent":["import { type MediaTimeState, SeekButtonCore, SeekButtonDataAttrs } from '@videojs/core';\nimport { selectTime } from '@videojs/core/dom';\nimport type { PropertyDeclarationMap } from '@videojs/element';\n\nimport { playerContext } from '../../player/context';\nimport { PlayerController } from '../../player/player-controller';\nimport { MediaButtonElement } from '../media-button-element';\n\nexport class SeekButtonElement extends MediaButtonElement<SeekButtonCore> {\n  static readonly tagName = 'media-seek-button';\n\n  static override properties: PropertyDeclarationMap = {\n    ...MediaButtonElement.properties,\n    seconds: { type: Number },\n  };\n\n  seconds = SeekButtonCore.defaultProps.seconds;\n\n  protected readonly core = new SeekButtonCore();\n  protected readonly stateAttrMap = SeekButtonDataAttrs;\n  protected readonly mediaState = new PlayerController(this, playerContext, selectTime);\n\n  protected activate(state: MediaTimeState): void {\n    this.core.seek(state);\n  }\n}\n"],"mappings":";;;;;;;AAQA,IAAa,oBAAb,cAAuC,mBAAmC;;;iBAQ9D,eAAe,aAAa;cAEZ,IAAI,gBAAgB;sBACZ;oBACF,IAAI,iBAAiB,MAAM,eAAe,WAAW;;;iBAX3D;;;oBAE2B;GACnD,GAAG,mBAAmB;GACtB,SAAS,EAAE,MAAM,QAAQ;GAC1B;;CAQD,AAAU,SAAS,OAA6B;AAC9C,OAAK,KAAK,KAAK,MAAM"}

package/dist/dev/ui/slider/context.d.ts

@@ -0,0 +1,24 @@
+import { SliderThumbProps } from "@videojs/core/dom";
+import { SliderState, StateAttrMap } from "@videojs/core";
+
+//#region src/ui/slider/context.d.ts
+interface SliderContextValue {
+  /** Base slider state — children use this for data attributes and value display. */
+  state: SliderState;
+  /** Maps state keys to `data-*` attribute names for part elements. */
+  stateAttrMap: StateAttrMap<SliderState>;
+  /** Domain value at the current pointer position (e.g., seconds for time, percent for volume). */
+  pointerValue: number;
+  /** ARIA attributes for the thumb element (role, tabindex, aria-value*, etc.). */
+  thumbAttrs: Record<string, string | number | boolean | undefined>;
+  /** Keyboard and focus event handlers for the thumb element. */
+  thumbProps: SliderThumbProps;
+  /** Optional formatter for value display. Receives domain value and value type. */
+  formatValue?: ((value: number, type: 'current' | 'pointer') => string) | undefined;
+}
+declare const sliderContext: {
+  __context__: SliderContextValue;
+};
+//#endregion
+export { SliderContextValue, sliderContext };
+//# sourceMappingURL=context.d.ts.map

package/dist/dev/ui/slider/context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.d.ts","names":[],"sources":["../../../../src/ui/slider/context.ts"],"mappings":";;;;UAIiB,kBAAA;;EAEf,KAAA,EAAO,WAAA;EAF0B;EAIjC,YAAA,EAAc,YAAA,CAAa,WAAA;EAFpB;EAIP,YAAA;EAFc;EAId,UAAA,EAAY,MAAA;EAEA;EAAZ,UAAA,EAAY,gBAAA;EAAgB;EAE5B,WAAA,KAAgB,KAAA,UAAe,IAAA;AAAA;AAAA,cAKpB,aAAA;eAAqE,kBAAA;AAAA"}

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

@@ -0,0 +1,9 @@
+import { createContext } from "@videojs/element/context";
+
+//#region src/ui/slider/context.ts
+const SLIDER_CONTEXT_KEY = Symbol("@videojs/slider");
+const sliderContext = createContext(SLIDER_CONTEXT_KEY);
+
+//#endregion
+export { sliderContext };
+//# sourceMappingURL=context.js.map

package/dist/dev/ui/slider/context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.js","names":[],"sources":["../../../../src/ui/slider/context.ts"],"sourcesContent":["import type { SliderState, StateAttrMap } from '@videojs/core';\nimport type { SliderThumbProps } from '@videojs/core/dom';\nimport { createContext } from '@videojs/element/context';\n\nexport interface SliderContextValue {\n  /** Base slider state — children use this for data attributes and value display. */\n  state: SliderState;\n  /** Maps state keys to `data-*` attribute names for part elements. */\n  stateAttrMap: StateAttrMap<SliderState>;\n  /** Domain value at the current pointer position (e.g., seconds for time, percent for volume). */\n  pointerValue: number;\n  /** ARIA attributes for the thumb element (role, tabindex, aria-value*, etc.). */\n  thumbAttrs: Record<string, string | number | boolean | undefined>;\n  /** Keyboard and focus event handlers for the thumb element. */\n  thumbProps: SliderThumbProps;\n  /** Optional formatter for value display. Receives domain value and value type. */\n  formatValue?: ((value: number, type: 'current' | 'pointer') => string) | undefined;\n}\n\nconst SLIDER_CONTEXT_KEY = Symbol('@videojs/slider');\n\nexport const sliderContext = createContext<SliderContextValue>(SLIDER_CONTEXT_KEY);\n"],"mappings":";;;AAmBA,MAAM,qBAAqB,OAAO,kBAAkB;AAEpD,MAAa,gBAAgB,cAAkC,mBAAmB"}

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

@@ -0,0 +1,15 @@
+import { ContextPartElement } from "../context-part-element.js";
+import { SliderContextValue } from "./context.js";
+import { ContextConsumer } from "@videojs/element/context";
+import { SliderState } from "@videojs/core";
+
+//#region src/ui/slider/slider-buffer-element.d.ts
+declare class SliderBufferElement extends ContextPartElement<SliderState> {
+  static readonly tagName = "media-slider-buffer";
+  protected readonly consumer: ContextConsumer<{
+    __context__: SliderContextValue;
+  }, this>;
+}
+//#endregion
+export { SliderBufferElement };
+//# sourceMappingURL=slider-buffer-element.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"slider-buffer-element.d.ts","names":[],"sources":["../../../../src/ui/slider/slider-buffer-element.ts"],"mappings":";;;;;;cAMa,mBAAA,SAA4B,kBAAA,CAAmB,WAAA;EAAA,gBAC1C,OAAA;EAAA,mBAEG,QAAA,EAAQ,eAAA;iBAH0C,kBAAA;EAAA;AAAA"}

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

@@ -0,0 +1,21 @@
+import { ContextPartElement } from "../context-part-element.js";
+import { sliderContext } from "./context.js";
+import { ContextConsumer } from "@videojs/element/context";
+
+//#region src/ui/slider/slider-buffer-element.ts
+var SliderBufferElement = class extends ContextPartElement {
+	constructor(..._args) {
+		super(..._args);
+		this.consumer = new ContextConsumer(this, {
+			context: sliderContext,
+			subscribe: true
+		});
+	}
+	static {
+		this.tagName = "media-slider-buffer";
+	}
+};
+
+//#endregion
+export { SliderBufferElement };
+//# sourceMappingURL=slider-buffer-element.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"slider-buffer-element.js","names":[],"sources":["../../../../src/ui/slider/slider-buffer-element.ts"],"sourcesContent":["import type { SliderState } from '@videojs/core';\nimport { ContextConsumer } from '@videojs/element/context';\n\nimport { ContextPartElement } from '../context-part-element';\nimport { sliderContext } from './context';\n\nexport class SliderBufferElement extends ContextPartElement<SliderState> {\n  static readonly tagName = 'media-slider-buffer';\n\n  protected readonly consumer = new ContextConsumer(this, { context: sliderContext, subscribe: true });\n}\n"],"mappings":";;;;;AAMA,IAAa,sBAAb,cAAyC,mBAAgC;;;kBAGzC,IAAI,gBAAgB,MAAM;GAAE,SAAS;GAAe,WAAW;GAAM,CAAC;;;iBAF1E"}

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

@@ -0,0 +1,56 @@
+import { MediaElement } from "../media-element.js";
+import { PropertyValues } from "@videojs/element";
+import * as _videojs_core0 from "@videojs/core";
+
+//#region src/ui/slider/slider-element.d.ts
+declare class SliderElement extends MediaElement {
+  #private;
+  static readonly tagName = "media-slider";
+  static properties: {
+    label: {
+      type: StringConstructor;
+    };
+    value: {
+      type: NumberConstructor;
+    };
+    min: {
+      type: NumberConstructor;
+    };
+    max: {
+      type: NumberConstructor;
+    };
+    step: {
+      type: NumberConstructor;
+    };
+    largeStep: {
+      type: NumberConstructor;
+      attribute: string;
+    };
+    orientation: {
+      type: StringConstructor;
+    };
+    disabled: {
+      type: BooleanConstructor;
+    };
+    thumbAlignment: {
+      type: StringConstructor;
+      attribute: string;
+    };
+  };
+  label: string | ((state: _videojs_core0.SliderState) => string);
+  value: number;
+  min: number;
+  max: number;
+  step: number;
+  largeStep: number;
+  orientation: "horizontal" | "vertical";
+  disabled: boolean;
+  thumbAlignment: "center" | "edge";
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+  protected willUpdate(_changed: PropertyValues): void;
+  protected update(_changed: PropertyValues): void;
+}
+//#endregion
+export { SliderElement };
+//# sourceMappingURL=slider-element.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"slider-element.d.ts","names":[],"sources":["../../../../src/ui/slider/slider-element.ts"],"mappings":";;;;;cASa,aAAA,SAAsB,YAAA;EAAA;kBACjB,OAAA;EAAA,OAEA,UAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAYhB,KAAA,aAAK,KAAA,iBAAA,WAAA;EACL,KAAA;EACA,GAAA;EACA,GAAA;EACA,IAAA;EACA,SAAA;EACA,WAAA;EACA,QAAA;EACA,cAAA;EAQS,iBAAA,CAAA;EAsCA,oBAAA,CAAA;EAAA,UAQU,UAAA,CAAW,QAAA,EAAU,cAAA;EAAA,UAKrB,MAAA,CAAO,QAAA,EAAU,cAAA;AAAA"}