@videojs/html 0.1.0-preview.8 → 10.0.0-alpha.11

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

@@ -0,0 +1,123 @@
+import { playerContext } from "../../player/context.js";
+import { MediaElement } from "../media-element.js";
+import { PlayerController } from "../../player/player-controller.js";
+import { sliderContext } from "../slider/context.js";
+import { applyElementProps, applyStateDataAttrs, createSlider, getSliderCSSVars, logMissingFeature, selectVolume } from "@videojs/core/dom";
+import { ContextProvider } from "@videojs/element/context";
+import { SliderDataAttrs, VolumeSliderCore } from "@videojs/core";
+import { applyStyles, isRTL } from "@videojs/utils/dom";
+
+//#region src/ui/volume-slider/volume-slider-element.ts
+var VolumeSliderElement = class extends MediaElement {
+	constructor(..._args) {
+		super(..._args);
+		this.label = VolumeSliderCore.defaultProps.label;
+		this.step = VolumeSliderCore.defaultProps.step;
+		this.largeStep = VolumeSliderCore.defaultProps.largeStep;
+		this.orientation = VolumeSliderCore.defaultProps.orientation;
+		this.disabled = VolumeSliderCore.defaultProps.disabled;
+		this.thumbAlignment = VolumeSliderCore.defaultProps.thumbAlignment;
+	}
+	static {
+		this.tagName = "media-volume-slider";
+	}
+	static {
+		this.properties = {
+			label: { type: String },
+			step: { type: Number },
+			largeStep: {
+				type: Number,
+				attribute: "large-step"
+			},
+			orientation: { type: String },
+			disabled: { type: Boolean },
+			thumbAlignment: {
+				type: String,
+				attribute: "thumb-alignment"
+			}
+		};
+	}
+	#core = new VolumeSliderCore();
+	#provider = new ContextProvider(this, { context: sliderContext });
+	#volumeState = new PlayerController(this, playerContext, selectVolume);
+	#slider = null;
+	#disconnect = null;
+	connectedCallback() {
+		super.connectedCallback();
+		if (this.destroyed) return;
+		this.#disconnect = new AbortController();
+		const signal = this.#disconnect.signal;
+		this.#slider = createSlider({
+			getElement: () => this,
+			getThumbElement: () => this.querySelector("media-slider-thumb"),
+			getOrientation: () => this.orientation,
+			isRTL: () => isRTL(this),
+			isDisabled: () => this.disabled || !this.#volumeState.value,
+			getPercent: () => {
+				const media = this.#volumeState.value;
+				if (!media) return 0;
+				return media.volume * 100;
+			},
+			getStepPercent: () => this.#core.getStepPercent(),
+			getLargeStepPercent: () => this.#core.getLargeStepPercent(),
+			onValueChange: (percent) => {
+				this.#setVolume(percent);
+			},
+			onValueCommit: (percent) => {
+				this.#setVolume(percent);
+			},
+			onDragStart: () => {
+				this.dispatchEvent(new CustomEvent("drag-start", { bubbles: true }));
+			},
+			onDragEnd: () => {
+				this.dispatchEvent(new CustomEvent("drag-end", { bubbles: true }));
+			},
+			adjustPercent: (raw, thumbSize, trackSize) => this.#core.adjustPercentForAlignment(raw, thumbSize, trackSize),
+			onResize: () => this.requestUpdate()
+		});
+		applyElementProps(this, this.#slider.rootProps, { signal });
+		applyStyles(this, this.#slider.rootStyle);
+		this.#slider.input.subscribe(() => this.requestUpdate(), { signal });
+		if (!this.#volumeState.value) logMissingFeature(this.localName, this.#volumeState.displayName);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.#disconnect?.abort();
+		this.#disconnect = null;
+	}
+	destroyCallback() {
+		this.#slider?.destroy();
+		super.destroyCallback();
+	}
+	willUpdate(_changed) {
+		super.willUpdate(_changed);
+		this.#core.setProps(this);
+	}
+	update(_changed) {
+		super.update(_changed);
+		if (!this.#slider) return;
+		const media = this.#volumeState.value;
+		if (!media) return;
+		this.#core.setInput(this.#slider.input.current);
+		this.#core.setMedia(media);
+		const state = this.#core.getState();
+		const cssVars = getSliderCSSVars(this.#slider.adjustForAlignment(state));
+		applyStyles(this, cssVars);
+		applyStateDataAttrs(this, state, SliderDataAttrs);
+		this.#provider.setValue({
+			state,
+			stateAttrMap: SliderDataAttrs,
+			pointerValue: this.#core.valueFromPercent(state.pointerPercent),
+			thumbAttrs: this.#core.getAttrs(state),
+			thumbProps: this.#slider.thumbProps,
+			formatValue: (value) => `${Math.round(value)}%`
+		});
+	}
+	#setVolume(percent) {
+		this.#volumeState.value?.setVolume(this.#core.valueFromPercent(percent) / 100);
+	}
+};
+
+//#endregion
+export { VolumeSliderElement };
+//# sourceMappingURL=volume-slider-element.js.map

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

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

package/package.json

@@ -1,67 +1,116 @@
 {
   "name": "@videojs/html",
   "type": "module",
-  "version": "0.1.0-preview.8",
+  "version": "10.0.0-alpha.11",
   "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/presets/video.d.ts",
+      "development": "./dist/dev/presets/video.js",
+      "default": "./dist/default/presets/video.js"
+    },
+    "./video/*.css": "./dist/default/define/video/*.css",
+    "./video/*": {
+      "types": "./dist/dev/define/video/*.d.ts",
+      "development": "./dist/dev/define/video/*.js",
+      "default": "./dist/default/define/video/*.js"
+    },
+    "./audio": {
+      "types": "./dist/dev/presets/audio.d.ts",
+      "development": "./dist/dev/presets/audio.js",
+      "default": "./dist/default/presets/audio.js"
     },
-    "./store": {
-      "types": "./dist/store.d.ts",
-      "default": "./dist/store.js"
+    "./audio/*.css": "./dist/default/define/audio/*.css",
+    "./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/presets/background.d.ts",
+      "development": "./dist/dev/presets/background.js",
+      "default": "./dist/default/presets/background.js"
     },
-    "./skins/frosted": {
-      "types": "./dist/skins/frosted.d.ts",
-      "default": "./dist/skins/frosted.js"
+    "./background/*.css": "./dist/default/define/background/*.css",
+    "./background/*": {
+      "types": "./dist/dev/define/background/*.d.ts",
+      "development": "./dist/dev/define/background/*.js",
+      "default": "./dist/default/define/background/*.js"
     },
-    "./skins/minimal": {
-      "types": "./dist/skins/minimal.d.ts",
-      "default": "./dist/skins/minimal.js"
+    "./ui/*": {
+      "types": "./dist/dev/define/ui/*.d.ts",
+      "development": "./dist/dev/define/ui/*.js",
+      "default": "./dist/default/define/ui/*.js"
     },
-    "./define/*": {
-      "types": "./dist/define/*.d.ts",
-      "default": "./dist/define/*.js"
+    "./feature/*": {
+      "types": "./dist/dev/define/feature/*.d.ts",
+      "development": "./dist/dev/define/feature/*.js",
+      "default": "./dist/default/define/feature/*.js"
+    },
+    "./media/*": {
+      "types": "./dist/dev/define/media/*.d.ts",
+      "development": "./dist/dev/define/media/*.js",
+      "default": "./dist/default/define/media/*.js"
+    },
+    "./*.css": "./dist/default/define/*.css",
+    "./*": {
+      "types": "./dist/dev/define/*.d.ts",
+      "development": "./dist/dev/define/*.js",
+      "default": "./dist/default/define/*.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.8",
-    "@videojs/icons": "0.1.0-preview.8",
-    "@videojs/utils": "0.1.0-preview.8"
+    "@videojs/core": "10.0.0-alpha.11",
+    "@videojs/element": "10.0.0-alpha.11",
+    "@videojs/store": "10.0.0-alpha.11",
+    "@videojs/utils": "10.0.0-alpha.11",
+    "@videojs/spf": "10.0.0-alpha.11"
   },
   "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",
+    "@videojs/icons": "10.0.0-alpha.11",
+    "@videojs/skins": "10.0.0-alpha.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"
   }
 }

package/dist/button-Bu1mGG-F.js

@@ -1,63 +0,0 @@
-import { namedNodeMapToObject } from "@videojs/utils/dom";
-
-//#region src/elements/button.ts
-function getTemplateHTML(_attrs, _props = {}) {
-	return `
-    <style>
-      /*
-        NOTE: Even though primitives should aim to be "unstyled" in their core definitions, we should
-        still add pointer-events, as this defines functionality. (CJP)
-      */
-      :host {
-        pointer-events: auto;
-      }
-    </style>
-    <slot>
-    </slot>
-  `;
-}
-var ButtonElement = class extends HTMLElement {
-	static {
-		this.shadowRootOptions = { mode: "open" };
-	}
-	static {
-		this.getTemplateHTML = getTemplateHTML;
-	}
-	static {
-		this.observedAttributes = ["commandfor"];
-	}
-	constructor() {
-		super();
-		if (!this.shadowRoot) {
-			this.attachShadow(this.constructor.shadowRootOptions);
-			const attrs = namedNodeMapToObject(this.attributes);
-			const html = this.constructor.getTemplateHTML(attrs);
-			const shadowRoot = this.shadowRoot;
-			shadowRoot.setHTMLUnsafe ? shadowRoot.setHTMLUnsafe(html) : shadowRoot.innerHTML = html;
-		}
-		this.addEventListener("click", this);
-		this.addEventListener("keydown", this);
-	}
-	attributeChangedCallback(name, _oldValue, newValue) {
-		if (name === "commandfor") this.style.setProperty("anchor-name", `--${newValue}`);
-	}
-	handleEvent(event) {
-		const { type } = event;
-		if (type === "keydown") this.#handleKeyDown(event);
-	}
-	#handleKeyDown = (event) => {
-		const { metaKey, altKey, key } = event;
-		if (metaKey || altKey || !["Enter", " "].includes(key)) {
-			this.removeEventListener("keyup", this.#handleKeyUp);
-			return;
-		}
-		this.addEventListener("keyup", this.#handleKeyUp, { once: true });
-	};
-	#handleKeyUp = (_event) => {
-		this.handleEvent({ type: "click" });
-	};
-};
-
-//#endregion
-export { ButtonElement as t };
-//# sourceMappingURL=button-Bu1mGG-F.js.map

package/dist/button-Bu1mGG-F.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"button-Bu1mGG-F.js","names":["#handleKeyDown","#handleKeyUp"],"sources":["../src/elements/button.ts"],"sourcesContent":["import { namedNodeMapToObject } from '@videojs/utils/dom';\n\nexport function getTemplateHTML(\n  this: typeof ButtonElement,\n  _attrs: Record<string, string>,\n  _props: Record<string, any> = {},\n): string {\n  return /* html */ `\n    <style>\n      /*\n        NOTE: Even though primitives should aim to be \"unstyled\" in their core definitions, we should\n        still add pointer-events, as this defines functionality. (CJP)\n      */\n      :host {\n        pointer-events: auto;\n      }\n    </style>\n    <slot>\n    </slot>\n  `;\n}\n\nexport class ButtonElement extends HTMLElement {\n  static shadowRootOptions = {\n    mode: 'open' as ShadowRootMode,\n  };\n\n  static getTemplateHTML: typeof getTemplateHTML = getTemplateHTML;\n\n  static observedAttributes: string[] = ['commandfor'];\n\n  constructor() {\n    super();\n\n    if (!this.shadowRoot) {\n      // Set up the Shadow DOM if not using Declarative Shadow DOM.\n      this.attachShadow((this.constructor as typeof ButtonElement).shadowRootOptions);\n\n      const attrs = namedNodeMapToObject(this.attributes);\n      const html = (this.constructor as typeof ButtonElement).getTemplateHTML(attrs);\n      // From MDN: setHTMLUnsafe should be used instead of ShadowRoot.innerHTML\n      // when a string of HTML may contain declarative shadow roots.\n      const shadowRoot = this.shadowRoot as unknown as ShadowRoot;\n      shadowRoot.setHTMLUnsafe ? shadowRoot.setHTMLUnsafe(html) : (shadowRoot.innerHTML = html);\n    }\n\n    this.addEventListener('click', this);\n    this.addEventListener('keydown', this);\n  }\n\n  attributeChangedCallback(name: string, _oldValue: string, newValue: string): void {\n    if (name === 'commandfor') {\n      this.style.setProperty('anchor-name', `--${newValue}`);\n    }\n  }\n\n  handleEvent(event: Event): void {\n    const { type } = event;\n    if (type === 'keydown') {\n      this.#handleKeyDown(event as KeyboardEvent);\n    }\n  }\n\n  #handleKeyDown = (event: KeyboardEvent): void => {\n    const { metaKey, altKey, key } = event;\n    if (metaKey || altKey || !['Enter', ' '].includes(key)) {\n      this.removeEventListener('keyup', this.#handleKeyUp);\n      return;\n    }\n    this.addEventListener('keyup', this.#handleKeyUp, { once: true });\n  };\n\n  #handleKeyUp = (_event: KeyboardEvent): void => {\n    this.handleEvent({ type: 'click' } as Event);\n  };\n}\n"],"mappings":";;;AAEA,SAAgB,gBAEd,QACA,SAA8B,EAAE,EACxB;AACR,QAAkB;;;;;;;;;;;;;;AAepB,IAAa,gBAAb,cAAmC,YAAY;;2BAClB,EACzB,MAAM,QACP;;;yBAEgD;;;4BAEX,CAAC,aAAa;;CAEpD,cAAc;AACZ,SAAO;AAEP,MAAI,CAAC,KAAK,YAAY;AAEpB,QAAK,aAAc,KAAK,YAAqC,kBAAkB;GAE/E,MAAM,QAAQ,qBAAqB,KAAK,WAAW;GACnD,MAAM,OAAQ,KAAK,YAAqC,gBAAgB,MAAM;GAG9E,MAAM,aAAa,KAAK;AACxB,cAAW,gBAAgB,WAAW,cAAc,KAAK,GAAI,WAAW,YAAY;;AAGtF,OAAK,iBAAiB,SAAS,KAAK;AACpC,OAAK,iBAAiB,WAAW,KAAK;;CAGxC,yBAAyB,MAAc,WAAmB,UAAwB;AAChF,MAAI,SAAS,aACX,MAAK,MAAM,YAAY,eAAe,KAAK,WAAW;;CAI1D,YAAY,OAAoB;EAC9B,MAAM,EAAE,SAAS;AACjB,MAAI,SAAS,UACX,OAAKA,cAAe,MAAuB;;CAI/C,kBAAkB,UAA+B;EAC/C,MAAM,EAAE,SAAS,QAAQ,QAAQ;AACjC,MAAI,WAAW,UAAU,CAAC,CAAC,SAAS,IAAI,CAAC,SAAS,IAAI,EAAE;AACtD,QAAK,oBAAoB,SAAS,MAAKC,YAAa;AACpD;;AAEF,OAAK,iBAAiB,SAAS,MAAKA,aAAc,EAAE,MAAM,MAAM,CAAC;;CAGnE,gBAAgB,WAAgC;AAC9C,OAAK,YAAY,EAAE,MAAM,SAAS,CAAU"}

package/dist/component-factory-DeAN6cjC.js

@@ -1,47 +0,0 @@
-import { ConsumerMixin } from "@open-wc/context-protocol";
-
-//#region src/utils/component-factory.ts
-/**
-* Generic factory function to create connected HTML components using hooks pattern.
-* Provides equivalent functionality to React's toConnectedComponent but for custom elements.
-*
-* @param BaseClass - Base custom element class to extend
-* @param stateHook - Hook that defines state keys and transformation logic
-* @param propsHook - Hook that handles element attributes and properties based on state
-* @param eventsHook - Hook that defines event handling logic
-* @param displayName - Display name for debugging
-* @returns Connected custom element class with media store integration
-*/
-function toConnectedHTMLComponent(BaseClass, stateHook, propsHook, displayName) {
-	const ConnectedComponent = class extends ConsumerMixin(BaseClass) {
-		constructor(..._args) {
-			super(..._args);
-			this.contexts = { mediaStore: (mediaStore) => {
-				this._mediaStore = mediaStore;
-				this._mediaStore.subscribeKeys(stateHook.keys, (rawState) => {
-					const state = stateHook.transform(rawState, mediaStore);
-					const props = propsHook(state ?? {}, this);
-					this._update(props, state, mediaStore);
-				});
-			} };
-		}
-		static get observedAttributes() {
-			return [...super.observedAttributes ?? []];
-		}
-		connectedCallback() {
-			super.connectedCallback?.();
-		}
-		disconnectedCallback() {
-			super.disconnectedCallback?.();
-		}
-		handleEvent(event) {
-			super.handleEvent?.(event);
-		}
-	};
-	if (displayName) Object.defineProperty(ConnectedComponent, "name", { value: displayName });
-	return ConnectedComponent;
-}
-
-//#endregion
-export { toConnectedHTMLComponent as t };
-//# sourceMappingURL=component-factory-DeAN6cjC.js.map

package/dist/component-factory-DeAN6cjC.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"component-factory-DeAN6cjC.js","names":[],"sources":["../src/utils/component-factory.ts"],"sourcesContent":["import { ConsumerMixin } from '@open-wc/context-protocol';\n\n/**\n * Generic types for HTML component hooks pattern\n * Mirrors the React hooks architecture for consistency\n */\nexport interface StateHook<T = any> {\n  keys: string[];\n  transform: (rawState: any, mediaStore: any) => T;\n}\n\nexport type PropsHook<T = any, P = any> = (state: T, element: HTMLElement) => P;\n\nexport interface ConnectedComponentConstructor<State> {\n  new (state: State): HTMLElement;\n}\n\n/**\n * Generic factory function to create connected HTML components using hooks pattern.\n * Provides equivalent functionality to React's toConnectedComponent but for custom elements.\n *\n * @param BaseClass - Base custom element class to extend\n * @param stateHook - Hook that defines state keys and transformation logic\n * @param propsHook - Hook that handles element attributes and properties based on state\n * @param eventsHook - Hook that defines event handling logic\n * @param displayName - Display name for debugging\n * @returns Connected custom element class with media store integration\n */\nexport function toConnectedHTMLComponent<State = any>(\n  BaseClass: CustomElementConstructor,\n  stateHook: StateHook<State>,\n  propsHook: PropsHook<State>,\n  displayName?: string,\n): ConnectedComponentConstructor<State> {\n  const ConnectedComponent = class extends ConsumerMixin(BaseClass) {\n    static get observedAttributes(): string[] {\n      return [\n        // @ts-expect-error ts(2339)\n        ...(super.observedAttributes ?? []),\n      ];\n    }\n\n    _mediaStore: any;\n\n    contexts = {\n      mediaStore: (mediaStore: any) => {\n        this._mediaStore = mediaStore;\n\n        // Subscribe to media store state changes\n        // Split into two phases: state transformation, then props update\n        this._mediaStore.subscribeKeys(stateHook.keys, (rawState: any) => {\n          // Phase 1: Transform raw media store state (state concern)\n          const state = stateHook.transform(rawState, mediaStore);\n\n          // Phase 2: Update element attributes/properties (props concern)\n          const props = propsHook(state ?? {} as State, this);\n          // @ts-expect-error any\n          this._update(props, state, mediaStore);\n        });\n      },\n    };\n\n    connectedCallback(): void {\n      super.connectedCallback?.();\n    }\n\n    disconnectedCallback(): void {\n      super.disconnectedCallback?.();\n    }\n\n    handleEvent(event: CustomEvent): void {\n      // @ts-expect-error any\n      super.handleEvent?.(event);\n    }\n  };\n\n  // Set display name for debugging and dev tools\n  if (displayName) {\n    Object.defineProperty(ConnectedComponent, 'name', { value: displayName });\n  }\n\n  return ConnectedComponent;\n}\n"],"mappings":";;;;;;;;;;;;;;AA4BA,SAAgB,yBACd,WACA,WACA,WACA,aACsC;CACtC,MAAM,qBAAqB,cAAc,cAAc,UAAU,CAAC;;;mBAUrD,EACT,aAAa,eAAoB;AAC/B,SAAK,cAAc;AAInB,SAAK,YAAY,cAAc,UAAU,OAAO,aAAkB;KAEhE,MAAM,QAAQ,UAAU,UAAU,UAAU,WAAW;KAGvD,MAAM,QAAQ,UAAU,SAAS,EAAE,EAAW,KAAK;AAEnD,UAAK,QAAQ,OAAO,OAAO,WAAW;MACtC;MAEL;;EAzBD,WAAW,qBAA+B;AACxC,UAAO,CAEL,GAAI,MAAM,sBAAsB,EAAE,CACnC;;EAuBH,oBAA0B;AACxB,SAAM,qBAAqB;;EAG7B,uBAA6B;AAC3B,SAAM,wBAAwB;;EAGhC,YAAY,OAA0B;AAEpC,SAAM,cAAc,MAAM;;;AAK9B,KAAI,YACF,QAAO,eAAe,oBAAoB,QAAQ,EAAE,OAAO,aAAa,CAAC;AAG3E,QAAO"}

package/dist/current-time-display-C3qndGf5.js

@@ -1,47 +0,0 @@
-import { t as toConnectedHTMLComponent } from "./component-factory-DeAN6cjC.js";
-import { currentTimeDisplayStateDefinition } from "@videojs/core/store";
-import { formatDisplayTime } from "@videojs/utils";
-
-//#region src/elements/current-time-display.ts
-var CurrentTimeDisplay = class extends HTMLElement {
-	static {
-		this.shadowRootOptions = { mode: "open" };
-	}
-	static {
-		this.observedAttributes = ["show-remaining"];
-	}
-	constructor() {
-		super();
-		if (!this.shadowRoot) this.attachShadow(this.constructor.shadowRootOptions);
-	}
-	get currentTime() {
-		return this._state?.currentTime ?? 0;
-	}
-	get duration() {
-		return this._state?.duration ?? 0;
-	}
-	get showRemaining() {
-		return this.hasAttribute("show-remaining");
-	}
-	attributeChangedCallback(name, _oldValue, _newValue) {
-		if (name === "show-remaining" && this._state) this._update({}, this._state);
-	}
-	_update(_props, state) {
-		this._state = state;
-		/** @TODO Should this live here or elsewhere? (CJP) */
-		const timeLabel = this.showRemaining && state.duration != null && state.currentTime != null ? formatDisplayTime(-(state.duration - state.currentTime)) : formatDisplayTime(state.currentTime);
-		if (this.shadowRoot) this.shadowRoot.textContent = timeLabel;
-	}
-};
-const useCurrentTimeDisplayState = {
-	keys: [...currentTimeDisplayStateDefinition.keys],
-	transform: (rawState, _mediaStore) => ({ ...currentTimeDisplayStateDefinition.stateTransform(rawState) })
-};
-const getCurrentTimeDisplayProps = (_state, _element) => {
-	return {};
-};
-const CurrentTimeDisplayElement = toConnectedHTMLComponent(CurrentTimeDisplay, useCurrentTimeDisplayState, getCurrentTimeDisplayProps, "CurrentTimeDisplay");
-
-//#endregion
-export { CurrentTimeDisplayElement as t };
-//# sourceMappingURL=current-time-display-C3qndGf5.js.map

package/dist/current-time-display-C3qndGf5.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"current-time-display-C3qndGf5.js","names":["useCurrentTimeDisplayState: StateHook<{\n  currentTime: number | undefined;\n  duration: number | undefined;\n}>","getCurrentTimeDisplayProps: PropsHook<{\n  currentTime: number | undefined;\n  duration: number | undefined;\n}>","CurrentTimeDisplayElement: ConnectedComponentConstructor<CurrentTimeDisplayState>"],"sources":["../src/elements/current-time-display.ts"],"sourcesContent":["import type { CurrentTimeDisplayState } from '@videojs/core/store';\nimport type { ConnectedComponentConstructor, PropsHook, StateHook } from '../utils/component-factory';\n\nimport { currentTimeDisplayStateDefinition } from '@videojs/core/store';\n\nimport { formatDisplayTime } from '@videojs/utils';\nimport { toConnectedHTMLComponent } from '../utils/component-factory';\n\nexport class CurrentTimeDisplay extends HTMLElement {\n  static shadowRootOptions = {\n    mode: 'open' as ShadowRootMode,\n  };\n\n  static observedAttributes: string[] = ['show-remaining'];\n\n  _state:\n    | {\n      currentTime: number | undefined;\n      duration: number | undefined;\n    }\n    | undefined;\n\n  constructor() {\n    super();\n\n    if (!this.shadowRoot) {\n      this.attachShadow((this.constructor as typeof CurrentTimeDisplay).shadowRootOptions);\n    }\n  }\n\n  get currentTime(): number {\n    return this._state?.currentTime ?? 0;\n  }\n\n  get duration(): number {\n    return this._state?.duration ?? 0;\n  }\n\n  get showRemaining(): boolean {\n    return this.hasAttribute('show-remaining');\n  }\n\n  attributeChangedCallback(name: string, _oldValue: string | null, _newValue: string | null): void {\n    if (name === 'show-remaining' && this._state) {\n      // Re-render with current state when show-remaining attribute changes\n      this._update({}, this._state);\n    }\n  }\n\n  _update(_props: any, state: any): void {\n    this._state = state;\n\n    /** @TODO Should this live here or elsewhere? (CJP) */\n    const timeLabel\n      = this.showRemaining && state.duration != null && state.currentTime != null\n        ? formatDisplayTime(-(state.duration - state.currentTime))\n        : formatDisplayTime(state.currentTime);\n\n    if (this.shadowRoot) {\n      this.shadowRoot.textContent = timeLabel;\n    }\n  }\n}\n\nexport const useCurrentTimeDisplayState: StateHook<{\n  currentTime: number | undefined;\n  duration: number | undefined;\n}> = {\n  keys: [...currentTimeDisplayStateDefinition.keys],\n  transform: (rawState, _mediaStore) => ({\n    ...currentTimeDisplayStateDefinition.stateTransform(rawState),\n    // Current time display is read-only, so no request methods needed\n  }),\n};\n\nexport const getCurrentTimeDisplayProps: PropsHook<{\n  currentTime: number | undefined;\n  duration: number | undefined;\n}> = (_state, _element) => {\n  const baseProps: Record<string, any> = {};\n  return baseProps;\n};\n\nexport const CurrentTimeDisplayElement: ConnectedComponentConstructor<CurrentTimeDisplayState> = toConnectedHTMLComponent(\n  CurrentTimeDisplay,\n  useCurrentTimeDisplayState,\n  getCurrentTimeDisplayProps,\n  'CurrentTimeDisplay',\n);\n"],"mappings":";;;;;AAQA,IAAa,qBAAb,cAAwC,YAAY;;2BACvB,EACzB,MAAM,QACP;;;4BAEqC,CAAC,iBAAiB;;CASxD,cAAc;AACZ,SAAO;AAEP,MAAI,CAAC,KAAK,WACR,MAAK,aAAc,KAAK,YAA0C,kBAAkB;;CAIxF,IAAI,cAAsB;AACxB,SAAO,KAAK,QAAQ,eAAe;;CAGrC,IAAI,WAAmB;AACrB,SAAO,KAAK,QAAQ,YAAY;;CAGlC,IAAI,gBAAyB;AAC3B,SAAO,KAAK,aAAa,iBAAiB;;CAG5C,yBAAyB,MAAc,WAA0B,WAAgC;AAC/F,MAAI,SAAS,oBAAoB,KAAK,OAEpC,MAAK,QAAQ,EAAE,EAAE,KAAK,OAAO;;CAIjC,QAAQ,QAAa,OAAkB;AACrC,OAAK,SAAS;;EAGd,MAAM,YACF,KAAK,iBAAiB,MAAM,YAAY,QAAQ,MAAM,eAAe,OACnE,kBAAkB,EAAE,MAAM,WAAW,MAAM,aAAa,GACxD,kBAAkB,MAAM,YAAY;AAE1C,MAAI,KAAK,WACP,MAAK,WAAW,cAAc;;;AAKpC,MAAaA,6BAGR;CACH,MAAM,CAAC,GAAG,kCAAkC,KAAK;CACjD,YAAY,UAAU,iBAAiB,EACrC,GAAG,kCAAkC,eAAe,SAAS,EAE9D;CACF;AAED,MAAaC,8BAGP,QAAQ,aAAa;AAEzB,QADuC,EAAE;;AAI3C,MAAaC,4BAAoF,yBAC/F,oBACA,4BACA,4BACA,qBACD"}

package/dist/custom-element-3bDlB2XO.js

@@ -1,10 +0,0 @@
-//#region src/utils/custom-element.ts
-function defineCustomElement(tagName, ctor) {
-	if (typeof window === "undefined") return;
-	if (window.customElements.get(tagName)) return;
-	window.customElements.define(tagName, ctor);
-}
-
-//#endregion
-export { defineCustomElement as t };
-//# sourceMappingURL=custom-element-3bDlB2XO.js.map

package/dist/custom-element-3bDlB2XO.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"custom-element-3bDlB2XO.js","names":[],"sources":["../src/utils/custom-element.ts"],"sourcesContent":["export function defineCustomElement(tagName: string, ctor: CustomElementConstructor): void {\n  if (typeof window === 'undefined') return;\n\n  if (window.customElements.get(tagName)) return;\n\n  window.customElements.define(tagName, ctor);\n}\n"],"mappings":";AAAA,SAAgB,oBAAoB,SAAiB,MAAsC;AACzF,KAAI,OAAO,WAAW,YAAa;AAEnC,KAAI,OAAO,eAAe,IAAI,QAAQ,CAAE;AAExC,QAAO,eAAe,OAAO,SAAS,KAAK"}

package/dist/define/index.d.ts

@@ -1,12 +0,0 @@
-import "../video-provider-nSCfwA7l.js";
-import "../media-container-ChS9lZvf.js";
-import "../media-play-button-oq8yDlxe.js";
-import "../media-mute-button-NVJF2EEW.js";
-import "../media-volume-slider-DP47VLVi.js";
-import "../media-time-slider-DvMnfYXZ.js";
-import "../media-fullscreen-button-BgUK3lgu.js";
-import "../media-duration-display-qvm6YX-q.js";
-import "../media-current-time-display-Cd0rPAuj.js";
-import "../media-preview-time-display-4YX5Rics.js";
-import "../media-popover-BtJmPv0E.js";
-import "../media-tooltip-BqV17mdM.js";

package/dist/define/index.js

@@ -1,27 +0,0 @@
-import "../component-factory-DeAN6cjC.js";
-import "../current-time-display-C3qndGf5.js";
-import "../duration-display-JOPp3bdU.js";
-import "../button-Bu1mGG-F.js";
-import "../fullscreen-button-C1nq8yP-.js";
-import "../mute-button-BSDoCZs3.js";
-import "../play-button-gaqIKsrv.js";
-import "../popover-BUCVOjnO.js";
-import "../preview-time-display-Dax0FQ2X.js";
-import "../time-slider-DKamO_2Q.js";
-import "../tooltip-B-glki2f.js";
-import "../volume-slider-CbFzCHX4.js";
-import "../media-container-BOL0PKuG.js";
-import "../video-provider-BKDqoKFf.js";
-import "../custom-element-3bDlB2XO.js";
-import "../video-provider-BPPI5e47.js";
-import "../media-container-DwKSOa1h.js";
-import "../media-play-button-DhSK0JQk.js";
-import "../media-mute-button-CHHISH91.js";
-import "../media-volume-slider-B-n6b3Y8.js";
-import "../media-time-slider-SuxR3Rep.js";
-import "../media-fullscreen-button-CIpcLhtU.js";
-import "../media-duration-display-BLMr7VHo.js";
-import "../media-current-time-display-B-4Cp845.js";
-import "../media-preview-time-display-DAiMgLPX.js";
-import "../media-popover-Cw9d_Bh3.js";
-import "../media-tooltip-CMRN_X4D.js";

package/dist/define/media-container.d.ts

@@ -1 +0,0 @@
-import "../media-container-ChS9lZvf.js";

package/dist/define/media-container.js

@@ -1,3 +0,0 @@
-import "../media-container-BOL0PKuG.js";
-import "../custom-element-3bDlB2XO.js";
-import "../media-container-DwKSOa1h.js";

package/dist/define/media-current-time-display.d.ts

@@ -1 +0,0 @@
-import "../media-current-time-display-Cd0rPAuj.js";

package/dist/define/media-current-time-display.js

@@ -1,4 +0,0 @@
-import "../component-factory-DeAN6cjC.js";
-import "../current-time-display-C3qndGf5.js";
-import "../custom-element-3bDlB2XO.js";
-import "../media-current-time-display-B-4Cp845.js";

package/dist/define/media-duration-display.d.ts

@@ -1 +0,0 @@
-import "../media-duration-display-qvm6YX-q.js";

package/dist/define/media-duration-display.js

@@ -1,4 +0,0 @@
-import "../component-factory-DeAN6cjC.js";
-import "../duration-display-JOPp3bdU.js";
-import "../custom-element-3bDlB2XO.js";
-import "../media-duration-display-BLMr7VHo.js";

package/dist/define/media-fullscreen-button.d.ts

@@ -1 +0,0 @@
-import "../media-fullscreen-button-BgUK3lgu.js";

package/dist/define/media-fullscreen-button.js

@@ -1,5 +0,0 @@
-import "../component-factory-DeAN6cjC.js";
-import "../button-Bu1mGG-F.js";
-import "../fullscreen-button-C1nq8yP-.js";
-import "../custom-element-3bDlB2XO.js";
-import "../media-fullscreen-button-CIpcLhtU.js";

package/dist/define/media-mute-button.d.ts

@@ -1 +0,0 @@
-import "../media-mute-button-NVJF2EEW.js";

package/dist/define/media-mute-button.js

@@ -1,5 +0,0 @@
-import "../component-factory-DeAN6cjC.js";
-import "../button-Bu1mGG-F.js";
-import "../mute-button-BSDoCZs3.js";
-import "../custom-element-3bDlB2XO.js";
-import "../media-mute-button-CHHISH91.js";

package/dist/define/media-play-button.d.ts

@@ -1 +0,0 @@
-import "../media-play-button-oq8yDlxe.js";

package/dist/define/media-play-button.js

@@ -1,5 +0,0 @@
-import "../component-factory-DeAN6cjC.js";
-import "../button-Bu1mGG-F.js";
-import "../play-button-gaqIKsrv.js";
-import "../custom-element-3bDlB2XO.js";
-import "../media-play-button-DhSK0JQk.js";

package/dist/define/media-popover.d.ts

@@ -1 +0,0 @@
-import "../media-popover-BtJmPv0E.js";

package/dist/define/media-popover.js

@@ -1,3 +0,0 @@
-import "../popover-BUCVOjnO.js";
-import "../custom-element-3bDlB2XO.js";
-import "../media-popover-Cw9d_Bh3.js";

package/dist/define/media-preview-time-display.d.ts

@@ -1 +0,0 @@
-import "../media-preview-time-display-4YX5Rics.js";

package/dist/define/media-preview-time-display.js

@@ -1,4 +0,0 @@
-import "../component-factory-DeAN6cjC.js";
-import "../preview-time-display-Dax0FQ2X.js";
-import "../custom-element-3bDlB2XO.js";
-import "../media-preview-time-display-DAiMgLPX.js";

package/dist/define/media-time-slider.d.ts

@@ -1 +0,0 @@
-import "../media-time-slider-DvMnfYXZ.js";

package/dist/define/media-time-slider.js

@@ -1,4 +0,0 @@
-import "../component-factory-DeAN6cjC.js";
-import "../time-slider-DKamO_2Q.js";
-import "../custom-element-3bDlB2XO.js";
-import "../media-time-slider-SuxR3Rep.js";

package/dist/define/media-tooltip.d.ts

@@ -1 +0,0 @@
-import "../media-tooltip-BqV17mdM.js";