@videojs/html 0.1.0-preview.9 → 10.0.0-alpha.3

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

@@ -0,0 +1,57 @@
+import { playerContext } from "../../player/context.js";
+import { MediaElement } from "../media-element.js";
+import { PlayerController } from "../../player/player-controller.js";
+import { applyElementProps, applyStateDataAttrs, createButton, logMissingFeature, selectPiP } from "@videojs/core/dom";
+import { PiPButtonCore, PiPButtonDataAttrs } from "@videojs/core";
+
+//#region src/ui/pip-button/pip-button-element.ts
+var PiPButtonElement = class PiPButtonElement extends MediaElement {
+	constructor(..._args) {
+		super(..._args);
+		this.label = PiPButtonCore.defaultProps.label;
+		this.disabled = PiPButtonCore.defaultProps.disabled;
+	}
+	static {
+		this.tagName = "media-pip-button";
+	}
+	static {
+		this.properties = {
+			label: { type: String },
+			disabled: { type: Boolean }
+		};
+	}
+	#core = new PiPButtonCore();
+	#state = new PlayerController(this, playerContext, selectPiP);
+	#disconnect = null;
+	connectedCallback() {
+		super.connectedCallback();
+		this.#disconnect = new AbortController();
+		const buttonProps = createButton({
+			onActivate: () => this.#core.toggle(this.#state.value),
+			isDisabled: () => this.disabled || !this.#state.value
+		});
+		applyElementProps(this, buttonProps, this.#disconnect.signal);
+		if (!this.#state.value) logMissingFeature(PiPButtonElement.tagName, "pip");
+	}
+	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, PiPButtonDataAttrs);
+	}
+};
+
+//#endregion
+export { PiPButtonElement };
+//# sourceMappingURL=pip-button-element.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pip-button-element.js","names":["#core","#state","#disconnect"],"sources":["../../../../src/ui/pip-button/pip-button-element.ts"],"sourcesContent":["import { PiPButtonCore, PiPButtonDataAttrs } from '@videojs/core';\nimport { applyElementProps, applyStateDataAttrs, createButton, logMissingFeature, selectPiP } 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 PiPButtonElement extends MediaElement {\n  static readonly tagName = 'media-pip-button';\n\n  static override properties = {\n    label: { type: String },\n    disabled: { type: Boolean },\n  } satisfies PropertyDeclarationMap<keyof PiPButtonCore.Props>;\n\n  label = PiPButtonCore.defaultProps.label;\n  disabled = PiPButtonCore.defaultProps.disabled;\n\n  readonly #core = new PiPButtonCore();\n  readonly #state = new PlayerController(this, playerContext, selectPiP);\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.toggle(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(PiPButtonElement.tagName, 'pip');\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, PiPButtonDataAttrs);\n  }\n}\n"],"mappings":";;;;;;;AAQA,IAAa,mBAAb,MAAa,yBAAyB,aAAa;;;eAQzC,cAAc,aAAa;kBACxB,cAAc,aAAa;;;iBARZ;;;oBAEG;GAC3B,OAAO,EAAE,MAAM,QAAQ;GACvB,UAAU,EAAE,MAAM,SAAS;GAC5B;;CAKD,CAASA,OAAQ,IAAI,eAAe;CACpC,CAASC,QAAS,IAAI,iBAAiB,MAAM,eAAe,UAAU;CAEtE,cAAsC;CAEtC,AAAS,oBAA0B;AACjC,QAAM,mBAAmB;AAEzB,QAAKC,aAAc,IAAI,iBAAiB;EAExC,MAAM,cAAc,aAAa;GAC/B,kBAAkB,MAAKF,KAAM,OAAO,MAAKC,MAAO,MAAO;GACvD,kBAAkB,KAAK,YAAY,CAAC,MAAKA,MAAO;GACjD,CAAC;AAEF,oBAAkB,MAAM,aAAa,MAAKC,WAAY,OAAO;AAE7D,MAAe,CAAC,MAAKD,MAAO,MAC1B,mBAAkB,iBAAiB,SAAS,MAAM;;CAItD,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,mBAAmB"}

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

@@ -0,0 +1,26 @@
+import { MediaElement } from "../media-element.js";
+import { PropertyValues } from "@videojs/element";
+import * as _videojs_core0 from "@videojs/core";
+
+//#region src/ui/play-button/play-button-element.d.ts
+declare class PlayButtonElement extends MediaElement {
+  #private;
+  static readonly tagName = "media-play-button";
+  static properties: {
+    label: {
+      type: StringConstructor;
+    };
+    disabled: {
+      type: BooleanConstructor;
+    };
+  };
+  label: string | ((state: _videojs_core0.PlayButtonState) => string);
+  disabled: boolean;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+  protected willUpdate(changed: PropertyValues): void;
+  protected update(changed: PropertyValues): void;
+}
+//#endregion
+export { PlayButtonElement };
+//# sourceMappingURL=play-button-element.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"play-button-element.d.ts","names":[],"sources":["../../../../src/ui/play-button/play-button-element.ts"],"mappings":";;;;;cAca,iBAAA,SAA0B,YAAA;EAAA;kBACrB,OAAA;EAAA,OAEA,UAAA;;;;;;;;EAKhB,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"}

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

@@ -0,0 +1,57 @@
+import { playerContext } from "../../player/context.js";
+import { MediaElement } from "../media-element.js";
+import { PlayerController } from "../../player/player-controller.js";
+import { applyElementProps, applyStateDataAttrs, createButton, logMissingFeature, selectPlayback } from "@videojs/core/dom";
+import { PlayButtonCore, PlayButtonDataAttrs } from "@videojs/core";
+
+//#region src/ui/play-button/play-button-element.ts
+var PlayButtonElement = class PlayButtonElement extends MediaElement {
+	constructor(..._args) {
+		super(..._args);
+		this.label = PlayButtonCore.defaultProps.label;
+		this.disabled = PlayButtonCore.defaultProps.disabled;
+	}
+	static {
+		this.tagName = "media-play-button";
+	}
+	static {
+		this.properties = {
+			label: { type: String },
+			disabled: { type: Boolean }
+		};
+	}
+	#core = new PlayButtonCore();
+	#state = new PlayerController(this, playerContext, selectPlayback);
+	#disconnect = null;
+	connectedCallback() {
+		super.connectedCallback();
+		this.#disconnect = new AbortController();
+		const buttonProps = createButton({
+			onActivate: () => this.#core.toggle(this.#state.value),
+			isDisabled: () => this.disabled || !this.#state.value
+		});
+		applyElementProps(this, buttonProps, this.#disconnect.signal);
+		if (!this.#state.value) logMissingFeature(PlayButtonElement.tagName, "playback");
+	}
+	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, PlayButtonDataAttrs);
+	}
+};
+
+//#endregion
+export { PlayButtonElement };
+//# sourceMappingURL=play-button-element.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"play-button-element.js","names":["#core","#state","#disconnect"],"sources":["../../../../src/ui/play-button/play-button-element.ts"],"sourcesContent":["import { PlayButtonCore, PlayButtonDataAttrs } from '@videojs/core';\nimport {\n  applyElementProps,\n  applyStateDataAttrs,\n  createButton,\n  logMissingFeature,\n  selectPlayback,\n} 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 PlayButtonElement extends MediaElement {\n  static readonly tagName = 'media-play-button';\n\n  static override properties = {\n    label: { type: String },\n    disabled: { type: Boolean },\n  } satisfies PropertyDeclarationMap<keyof PlayButtonCore.Props>;\n\n  label = PlayButtonCore.defaultProps.label;\n  disabled = PlayButtonCore.defaultProps.disabled;\n\n  readonly #core = new PlayButtonCore();\n  readonly #state = new PlayerController(this, playerContext, selectPlayback);\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.toggle(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(PlayButtonElement.tagName, 'playback');\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, PlayButtonDataAttrs);\n  }\n}\n"],"mappings":";;;;;;;AAcA,IAAa,oBAAb,MAAa,0BAA0B,aAAa;;;eAQ1C,eAAe,aAAa;kBACzB,eAAe,aAAa;;;iBARb;;;oBAEG;GAC3B,OAAO,EAAE,MAAM,QAAQ;GACvB,UAAU,EAAE,MAAM,SAAS;GAC5B;;CAKD,CAASA,OAAQ,IAAI,gBAAgB;CACrC,CAASC,QAAS,IAAI,iBAAiB,MAAM,eAAe,eAAe;CAE3E,cAAsC;CAEtC,AAAS,oBAA0B;AACjC,QAAM,mBAAmB;AAEzB,QAAKC,aAAc,IAAI,iBAAiB;EAExC,MAAM,cAAc,aAAa;GAC/B,kBAAkB,MAAKF,KAAM,OAAO,MAAKC,MAAO,MAAO;GACvD,kBAAkB,KAAK,YAAY,CAAC,MAAKA,MAAO;GACjD,CAAC;AAEF,oBAAkB,MAAM,aAAa,MAAKC,WAAY,OAAO;AAE7D,MAAe,CAAC,MAAKD,MAAO,MAC1B,mBAAkB,kBAAkB,SAAS,WAAW;;CAI5D,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"}

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

@@ -0,0 +1,13 @@
+import { MediaElement } from "../media-element.js";
+import { PropertyValues } from "@videojs/element";
+
+//#region src/ui/poster/poster-element.d.ts
+declare class PosterElement extends MediaElement {
+  #private;
+  static readonly tagName = "media-poster";
+  connectedCallback(): void;
+  protected update(changed: PropertyValues): void;
+}
+//#endregion
+export { PosterElement };
+//# sourceMappingURL=poster-element.d.ts.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,28 @@
+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 { PosterCore, PosterDataAttrs } from "@videojs/core";
+
+//#region src/ui/poster/poster-element.ts
+var PosterElement = class PosterElement extends MediaElement {
+	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
+export { PosterElement };
+//# sourceMappingURL=poster-element.js.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,30 @@
+import { MediaElement } from "../media-element.js";
+import { PropertyValues } from "@videojs/element";
+import * as _videojs_core0 from "@videojs/core";
+
+//#region src/ui/seek-button/seek-button-element.d.ts
+declare class SeekButtonElement extends MediaElement {
+  #private;
+  static readonly tagName = "media-seek-button";
+  static properties: {
+    seconds: {
+      type: NumberConstructor;
+    };
+    label: {
+      type: StringConstructor;
+    };
+    disabled: {
+      type: BooleanConstructor;
+    };
+  };
+  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;
+}
+//#endregion
+export { SeekButtonElement };
+//# sourceMappingURL=seek-button-element.d.ts.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,59 @@
+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 { SeekButtonCore, SeekButtonDataAttrs } from "@videojs/core";
+
+//#region src/ui/seek-button/seek-button-element.ts
+var SeekButtonElement = class SeekButtonElement extends MediaElement {
+	constructor(..._args) {
+		super(..._args);
+		this.seconds = SeekButtonCore.defaultProps.seconds;
+		this.label = SeekButtonCore.defaultProps.label;
+		this.disabled = SeekButtonCore.defaultProps.disabled;
+	}
+	static {
+		this.tagName = "media-seek-button";
+	}
+	static {
+		this.properties = {
+			seconds: { type: Number },
+			label: { type: String },
+			disabled: { type: Boolean }
+		};
+	}
+	#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);
+	}
+};
+
+//#endregion
+export { SeekButtonElement };
+//# sourceMappingURL=seek-button-element.js.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,32 @@
+import { MediaElement } from "../media-element.js";
+import { PropertyValues } from "@videojs/element";
+import * as _videojs_core0 from "@videojs/core";
+import { TimeType } from "@videojs/core";
+
+//#region src/ui/time/time-element.d.ts
+declare class TimeElement extends MediaElement {
+  #private;
+  static readonly tagName = "media-time";
+  static properties: {
+    type: {
+      type: StringConstructor;
+    };
+    negativeSign: {
+      type: StringConstructor;
+      attribute: string;
+    };
+    label: {
+      type: StringConstructor;
+    };
+  };
+  type: TimeType;
+  negativeSign: string;
+  label: string | ((state: _videojs_core0.TimeState) => string);
+  constructor();
+  connectedCallback(): void;
+  protected willUpdate(changed: PropertyValues): void;
+  protected update(changed: PropertyValues): void;
+}
+//#endregion
+export { TimeElement };
+//# sourceMappingURL=time-element.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"time-element.d.ts","names":[],"sources":["../../../../src/ui/time/time-element.ts"],"mappings":";;;;;;cAQa,WAAA,SAAoB,YAAA;EAAA;kBACf,OAAA;EAAA,OAEA,UAAA;;;;;;;;;;;;EAMhB,IAAA,EAAM,QAAA;EACN,YAAA;EACA,KAAA,aAAK,KAAA,EAFS,cAAA,CAET,SAAA;;EAaI,iBAAA,CAAA;EAAA,UAQU,UAAA,CAAW,OAAA,EAAS,cAAA;EAAA,UAKpB,MAAA,CAAO,OAAA,EAAS,cAAA;AAAA"}

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

@@ -0,0 +1,68 @@
+import { playerContext } from "../../player/context.js";
+import { MediaElement } from "../media-element.js";
+import { PlayerController } from "../../player/player-controller.js";
+import { applyElementProps, applyStateDataAttrs, logMissingFeature, selectTime } from "@videojs/core/dom";
+import { TimeCore, TimeDataAttrs } from "@videojs/core";
+
+//#region src/ui/time/time-element.ts
+var TimeElement = class TimeElement extends MediaElement {
+	static {
+		this.tagName = "media-time";
+	}
+	static {
+		this.properties = {
+			type: { type: String },
+			negativeSign: {
+				type: String,
+				attribute: "negative-sign"
+			},
+			label: { type: String }
+		};
+	}
+	#core = new TimeCore();
+	#state = new PlayerController(this, playerContext, selectTime);
+	#signSpan = document.createElement("span");
+	#textNode = document.createTextNode("");
+	constructor() {
+		super();
+		this.type = TimeCore.defaultProps.type;
+		this.negativeSign = TimeCore.defaultProps.negativeSign;
+		this.label = TimeCore.defaultProps.label;
+		this.#signSpan.setAttribute("aria-hidden", "true");
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		if (!this.#state.value) logMissingFeature(TimeElement.tagName, "time");
+	}
+	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);
+		if (state.negative) {
+			this.#signSpan.textContent = this.negativeSign;
+			this.#textNode.textContent = state.text;
+			if (!this.#signSpan.parentNode) {
+				this.textContent = "";
+				this.appendChild(this.#signSpan);
+				this.appendChild(this.#textNode);
+			}
+		} else {
+			if (this.#signSpan.parentNode) {
+				this.#signSpan.remove();
+				this.#textNode.remove();
+			}
+			this.textContent = state.text;
+		}
+		applyElementProps(this, this.#core.getAttrs(state));
+		applyStateDataAttrs(this, state, TimeDataAttrs);
+	}
+};
+
+//#endregion
+export { TimeElement };
+//# sourceMappingURL=time-element.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"time-element.js","names":["#core","#state","#signSpan","#textNode"],"sources":["../../../../src/ui/time/time-element.ts"],"sourcesContent":["import { TimeCore, TimeDataAttrs, type TimeType } from '@videojs/core';\nimport { applyElementProps, applyStateDataAttrs, 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 TimeElement extends MediaElement {\n  static readonly tagName = 'media-time';\n\n  static override properties = {\n    type: { type: String },\n    negativeSign: { type: String, attribute: 'negative-sign' },\n    label: { type: String },\n  } satisfies PropertyDeclarationMap<keyof TimeCore.Props>;\n\n  type: TimeType = TimeCore.defaultProps.type;\n  negativeSign = TimeCore.defaultProps.negativeSign;\n  label = TimeCore.defaultProps.label;\n\n  readonly #core = new TimeCore();\n  readonly #state = new PlayerController(this, playerContext, selectTime);\n\n  readonly #signSpan = document.createElement('span');\n  readonly #textNode = document.createTextNode('');\n\n  constructor() {\n    super();\n    this.#signSpan.setAttribute('aria-hidden', 'true');\n  }\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n\n    if (__DEV__ && !this.#state.value) {\n      logMissingFeature(TimeElement.tagName, 'time');\n    }\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\n    if (state.negative) {\n      this.#signSpan.textContent = this.negativeSign;\n      this.#textNode.textContent = state.text;\n\n      // Append elements if not already in DOM\n      if (!this.#signSpan.parentNode) {\n        this.textContent = '';\n        this.appendChild(this.#signSpan);\n        this.appendChild(this.#textNode);\n      }\n    } else {\n      // Remove sign span if present, use direct text\n      if (this.#signSpan.parentNode) {\n        this.#signSpan.remove();\n        this.#textNode.remove();\n      }\n      this.textContent = state.text;\n    }\n\n    applyElementProps(this, this.#core.getAttrs(state));\n    applyStateDataAttrs(this, state, TimeDataAttrs);\n  }\n}\n"],"mappings":";;;;;;;AAQA,IAAa,cAAb,MAAa,oBAAoB,aAAa;;iBAClB;;;oBAEG;GAC3B,MAAM,EAAE,MAAM,QAAQ;GACtB,cAAc;IAAE,MAAM;IAAQ,WAAW;IAAiB;GAC1D,OAAO,EAAE,MAAM,QAAQ;GACxB;;CAMD,CAASA,OAAQ,IAAI,UAAU;CAC/B,CAASC,QAAS,IAAI,iBAAiB,MAAM,eAAe,WAAW;CAEvE,CAASC,WAAY,SAAS,cAAc,OAAO;CACnD,CAASC,WAAY,SAAS,eAAe,GAAG;CAEhD,cAAc;AACZ,SAAO;cAXQ,SAAS,aAAa;sBACxB,SAAS,aAAa;eAC7B,SAAS,aAAa;AAU5B,QAAKD,SAAU,aAAa,eAAe,OAAO;;CAGpD,AAAS,oBAA0B;AACjC,QAAM,mBAAmB;AAEzB,MAAe,CAAC,MAAKD,MAAO,MAC1B,mBAAkB,YAAY,SAAS,OAAO;;CAIlD,AAAmB,WAAW,SAA+B;AAC3D,QAAM,WAAW,QAAQ;AACzB,QAAKD,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;AAExC,MAAI,MAAM,UAAU;AAClB,SAAKE,SAAU,cAAc,KAAK;AAClC,SAAKC,SAAU,cAAc,MAAM;AAGnC,OAAI,CAAC,MAAKD,SAAU,YAAY;AAC9B,SAAK,cAAc;AACnB,SAAK,YAAY,MAAKA,SAAU;AAChC,SAAK,YAAY,MAAKC,SAAU;;SAE7B;AAEL,OAAI,MAAKD,SAAU,YAAY;AAC7B,UAAKA,SAAU,QAAQ;AACvB,UAAKC,SAAU,QAAQ;;AAEzB,QAAK,cAAc,MAAM;;AAG3B,oBAAkB,MAAM,MAAKH,KAAM,SAAS,MAAM,CAAC;AACnD,sBAAoB,MAAM,OAAO,cAAc"}

package/dist/dev/ui/time/time-group-element.d.ts

@@ -0,0 +1,9 @@
+import { MediaElement } from "../media-element.js";
+
+//#region src/ui/time/time-group-element.d.ts
+declare class TimeGroupElement extends MediaElement {
+  static readonly tagName = "media-time-group";
+}
+//#endregion
+export { TimeGroupElement };
+//# sourceMappingURL=time-group-element.d.ts.map

package/dist/dev/ui/time/time-group-element.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"time-group-element.d.ts","names":[],"sources":["../../../../src/ui/time/time-group-element.ts"],"mappings":";;;cAEa,gBAAA,SAAyB,YAAA;EAAA,gBACpB,OAAA;AAAA"}

package/dist/dev/ui/time/time-group-element.js

@@ -0,0 +1,12 @@
+import { MediaElement } from "../media-element.js";
+
+//#region src/ui/time/time-group-element.ts
+var TimeGroupElement = class extends MediaElement {
+	static {
+		this.tagName = "media-time-group";
+	}
+};
+
+//#endregion
+export { TimeGroupElement };
+//# sourceMappingURL=time-group-element.js.map

package/dist/dev/ui/time/time-group-element.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"time-group-element.js","names":[],"sources":["../../../../src/ui/time/time-group-element.ts"],"sourcesContent":["import { MediaElement } from '../media-element';\n\nexport class TimeGroupElement extends MediaElement {\n  static readonly tagName = 'media-time-group';\n\n  // Future: Could provide context for hoursDisplay to children via Lit context\n}\n"],"mappings":";;;AAEA,IAAa,mBAAb,cAAsC,aAAa;;iBACvB"}

package/dist/dev/ui/time/time-separator-element.d.ts

@@ -0,0 +1,10 @@
+import { MediaElement } from "../media-element.js";
+
+//#region src/ui/time/time-separator-element.d.ts
+declare class TimeSeparatorElement extends MediaElement {
+  static readonly tagName = "media-time-separator";
+  connectedCallback(): void;
+}
+//#endregion
+export { TimeSeparatorElement };
+//# sourceMappingURL=time-separator-element.d.ts.map

package/dist/dev/ui/time/time-separator-element.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"time-separator-element.d.ts","names":[],"sources":["../../../../src/ui/time/time-separator-element.ts"],"mappings":";;;cAEa,oBAAA,SAA6B,YAAA;EAAA,gBACxB,OAAA;EAEP,iBAAA,CAAA;AAAA"}

package/dist/dev/ui/time/time-separator-element.js

@@ -0,0 +1,17 @@
+import { MediaElement } from "../media-element.js";
+
+//#region src/ui/time/time-separator-element.ts
+var TimeSeparatorElement = class extends MediaElement {
+	static {
+		this.tagName = "media-time-separator";
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		this.setAttribute("aria-hidden", "true");
+		if (!this.textContent?.trim()) this.textContent = "/";
+	}
+};
+
+//#endregion
+export { TimeSeparatorElement };
+//# sourceMappingURL=time-separator-element.js.map

package/dist/dev/ui/time/time-separator-element.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"time-separator-element.js","names":[],"sources":["../../../../src/ui/time/time-separator-element.ts"],"sourcesContent":["import { MediaElement } from '../media-element';\n\nexport class TimeSeparatorElement extends MediaElement {\n  static readonly tagName = 'media-time-separator';\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n\n    // Set aria-hidden for accessibility\n    this.setAttribute('aria-hidden', 'true');\n\n    // Set default content if empty\n    if (!this.textContent?.trim()) {\n      this.textContent = '/';\n    }\n  }\n}\n"],"mappings":";;;AAEA,IAAa,uBAAb,cAA0C,aAAa;;iBAC3B;;CAE1B,AAAS,oBAA0B;AACjC,QAAM,mBAAmB;AAGzB,OAAK,aAAa,eAAe,OAAO;AAGxC,MAAI,CAAC,KAAK,aAAa,MAAM,CAC3B,MAAK,cAAc"}

package/package.json

@@ -1,67 +1,89 @@
 {
   "name": "@videojs/html",
   "type": "module",
-  "version": "0.1.0-preview.9",
+  "version": "10.0.0-alpha.3",
   "description": "HTML library for building media players",
   "license": "Apache-2.0",
-  "keywords": [
-    "media",
-    "player",
-    "html",
-    "ui",
-    "components",
-    "videojs"
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/videojs/v10",
+    "directory": "packages/html"
+  },
+  "main": "dist/default/index.js",
+  "module": "dist/default/index.js",
+  "types": "dist/dev/index.d.ts",
+  "sideEffects": [
+    "./dist/*/define/**/*.js"
+  ],
+  "files": [
+    "dist"
   ],
   "exports": {
     ".": {
-      "types": "./dist/index.d.ts",
-      "default": "./dist/index.js"
+      "types": "./dist/dev/index.d.ts",
+      "development": "./dist/dev/index.js",
+      "default": "./dist/default/index.js"
+    },
+    "./video/*": {
+      "types": "./dist/dev/define/video/*.d.ts",
+      "development": "./dist/dev/define/video/*.js",
+      "default": "./dist/default/define/video/*.js"
     },
-    "./store": {
-      "types": "./dist/store.d.ts",
-      "default": "./dist/store.js"
+    "./audio/*": {
+      "types": "./dist/dev/define/audio/*.d.ts",
+      "development": "./dist/dev/define/audio/*.js",
+      "default": "./dist/default/define/audio/*.js"
     },
-    "./icons": {
-      "types": "./dist/icons.d.ts",
-      "default": "./dist/icons.js"
+    "./background/*": {
+      "types": "./dist/dev/define/background/*.d.ts",
+      "development": "./dist/dev/define/background/*.js",
+      "default": "./dist/default/define/background/*.js"
     },
-    "./skins/frosted": {
-      "types": "./dist/skins/frosted.d.ts",
-      "default": "./dist/skins/frosted.js"
+    "./ui/*": {
+      "types": "./dist/dev/define/ui/*.d.ts",
+      "development": "./dist/dev/define/ui/*.js",
+      "default": "./dist/default/define/ui/*.js"
     },
-    "./skins/minimal": {
-      "types": "./dist/skins/minimal.d.ts",
-      "default": "./dist/skins/minimal.js"
+    "./feature/*": {
+      "types": "./dist/dev/define/feature/*.d.ts",
+      "development": "./dist/dev/define/feature/*.js",
+      "default": "./dist/default/define/feature/*.js"
     },
-    "./define/*": {
-      "types": "./dist/define/*.d.ts",
-      "default": "./dist/define/*.js"
+    "./media/*": {
+      "types": "./dist/dev/define/media/*.d.ts",
+      "development": "./dist/dev/define/media/*.js",
+      "default": "./dist/default/define/media/*.js"
     }
   },
-  "main": "dist/index.js",
-  "module": "dist/index.js",
-  "types": "dist/index.d.ts",
-  "files": [
-    "dist"
-  ],
   "dependencies": {
-    "@open-wc/context-protocol": "^0.0.9",
-    "@videojs/core": "0.1.0-preview.9",
-    "@videojs/icons": "0.1.0-preview.9",
-    "@videojs/utils": "0.1.0-preview.9"
+    "@videojs/core": "10.0.0-alpha.3",
+    "@videojs/store": "10.0.0-alpha.3",
+    "@videojs/element": "10.0.0-alpha.3",
+    "@videojs/utils": "10.0.0-alpha.3"
   },
   "devDependencies": {
-    "tsdown": "^0.15.9",
-    "typescript": "^5.9.2"
+    "@testing-library/dom": "^10.4.0",
+    "happy-dom": "^18.0.1",
+    "tsdown": "^0.20.3",
+    "typescript": "^5.9.3",
+    "vitest": "^3.2.4"
   },
   "publishConfig": {
     "access": "public"
   },
+  "keywords": [
+    "media",
+    "player",
+    "html",
+    "ui",
+    "components",
+    "videojs"
+  ],
   "scripts": {
     "build": "tsdown",
-    "build:watch": "tsdown --watch --silent",
+    "build:watch": "tsdown --watch ./src --no-clean",
     "dev": "pnpm run build:watch",
-    "test": "echo \"No tests yet\"",
-    "clean": "rm -rf dist"
+    "test": "vitest run",
+    "clean": "rm -rf dist types"
   }
 }