@videojs/html 0.1.0-preview.10

package/LICENSE

@@ -0,0 +1,20 @@
+   Copyright 2025-present Video.js contributors
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+     http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.
+
+------------------------------------------------------------------
+
+Trademark Notice:
+“Video.js” is a registered trademark of Brightcove Inc.
+The project is maintained independently by the open-source community,
+governed by the Video.js Technical Steering Committee.

package/README.md

@@ -0,0 +1,26 @@
+# @videojs/html
+
+[![package-badge]][package]
+
+> **⚠️ Technical Preview - SUBJECT TO CHANGE** Not recommended for production use.
+
+## Overview
+
+`@videojs/html` is a comprehensive library for building media players with vanilla JavaScript and Web Components. It provides a complete set of UI components, state management, and utilities for creating feature-rich, accessible video and audio players.
+
+## Community
+
+If you need help with anything related to Video.js 10, or if you'd like to casually chat with other
+members:
+
+- [Join Discord Server][discord]
+- [See GitHub Discussions][gh-discussions]
+
+## License
+
+[Apache-2.0](./LICENSE)
+
+[package]: https://www.npmjs.com/package/@videojs/html
+[package-badge]: https://img.shields.io/npm/v/@videojs/html/next?label=@videojs/html@next
+[discord]: https://discord.gg/JBqHh485uF
+[gh-discussions]: https://github.com/videojs/v10/discussions

package/dist/button-Bu1mGG-F.js

@@ -0,0 +1,63 @@
+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

@@ -0,0 +1 @@
+{"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-vR-5t251.js

@@ -0,0 +1,95 @@
+import { shallowEqual, toCamelCase } from "@videojs/utils";
+import { ConsumerMixin } from "@open-wc/context-protocol";
+import { setAttributes } from "@videojs/utils/dom";
+
+//#region src/utils/component-factory.ts
+let currentCoreInstances = [];
+let currentCoreIndex = 0;
+/**
+* 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 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;
+				mediaStore.subscribe(() => {
+					this.#render();
+					for (const instance of this.#coreInstances) if (!instance.listening) {
+						instance.listening = true;
+						instance.core.subscribe(this.#render);
+					}
+				});
+			} };
+		}
+		static get observedAttributes() {
+			return [...super.observedAttributes ?? []];
+		}
+		#mediaStore;
+		#coreInstances = [];
+		#render = () => {
+			if (!this.#mediaStore) return;
+			currentCoreIndex = 0;
+			currentCoreInstances = this.#coreInstances;
+			const state = stateHook?.(this, this.#mediaStore);
+			const props = propsHook(this, state ?? {});
+			this._update(props, state, this.#mediaStore);
+		};
+		_update(props, state, _mediaStore) {
+			this._state = state;
+			super._update?.(props, state, _mediaStore);
+			setAttributes(this, props);
+		}
+		attributeChangedCallback(name, oldValue, newValue) {
+			super.attributeChangedCallback?.(name, oldValue, newValue);
+			this.#render();
+		}
+		connectedCallback() {
+			super.connectedCallback?.();
+		}
+		disconnectedCallback() {
+			super.disconnectedCallback?.();
+		}
+		handleEvent(event) {
+			super.handleEvent?.(event);
+		}
+	};
+	if (displayName) Object.defineProperty(ConnectedComponent, "name", { value: displayName });
+	return ConnectedComponent;
+}
+function getCoreState(CoreClass, state) {
+	let core = currentCoreInstances[currentCoreIndex]?.core;
+	if (!core) {
+		core = new CoreClass();
+		currentCoreInstances[currentCoreIndex] = {
+			core,
+			listening: false
+		};
+	}
+	currentCoreIndex++;
+	const coreState = core.getState();
+	const oldState = {};
+	for (const key in state) oldState[key] = coreState[key];
+	if (!shallowEqual(oldState, state)) core.setState(state);
+	return core.getState();
+}
+function getPropsFromAttrs(element) {
+	const props = {};
+	for (const attr of element.attributes) {
+		const camelName = toCamelCase(attr.name);
+		props[camelName] = element[camelName];
+	}
+	return props;
+}
+
+//#endregion
+export { getPropsFromAttrs as n, toConnectedHTMLComponent as r, getCoreState as t };
+//# sourceMappingURL=component-factory-vR-5t251.js.map

package/dist/component-factory-vR-5t251.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"component-factory-vR-5t251.js","names":["currentCoreInstances: any[]","currentCoreIndex: number","#mediaStore","#render","#coreInstances","oldState: Record<string, any>","props: Record<string, any>"],"sources":["../src/utils/component-factory.ts"],"sourcesContent":["import type { MediaStore } from '@videojs/core/store';\nimport { ConsumerMixin } from '@open-wc/context-protocol';\nimport { shallowEqual, toCamelCase } from '@videojs/utils';\nimport { setAttributes } from '@videojs/utils/dom';\n\n/**\n * Generic types for HTML component hooks pattern\n * Mirrors the React hooks architecture for consistency\n */\nexport type StateHook<E extends HTMLElement, T = any> = (element: E, mediaStore: MediaStore) => T;\n\nexport type PropsHook<E extends HTMLElement, T = any, P = any> = (element: E, state: T) => P;\n\nexport interface ConnectedComponentConstructor<E extends HTMLElement, State> {\n  new (state: State): E;\n}\n\nlet currentCoreInstances: any[] = [];\n// There might be multiple getCoreState calls in a single state hook\n// which should create a different core instance.\nlet currentCoreIndex: number = 0;\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 displayName - Display name for debugging\n * @returns Connected custom element class with media store integration\n */\nexport function toConnectedHTMLComponent<E extends HTMLElement, State = any>(\n  BaseClass: CustomElementConstructor,\n  stateHook: StateHook<E, State> | undefined,\n  propsHook: PropsHook<E, State>,\n  displayName?: string,\n): ConnectedComponentConstructor<E, 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    _state: State | undefined;\n    #mediaStore: MediaStore | undefined;\n    #coreInstances: { core: any; listening: boolean }[] = [];\n\n    contexts = {\n      mediaStore: (mediaStore: any) => {\n        this.#mediaStore = mediaStore;\n\n        // Subscribe to media store state changes\n        mediaStore.subscribe(() => {\n          this.#render();\n\n          for (const instance of this.#coreInstances) {\n            if (!instance.listening) {\n              instance.listening = true;\n              instance.core.subscribe(this.#render);\n            }\n          }\n        });\n      },\n    };\n\n    #render = (): void => {\n      if (!this.#mediaStore) return;\n\n      currentCoreIndex = 0;\n      currentCoreInstances = this.#coreInstances;\n\n      // Split into two phases: state transformation, then props update\n      const state = stateHook?.(this as unknown as E, this.#mediaStore);\n      const props = propsHook(this as unknown as E, state ?? {} as State);\n      this._update(props, state, this.#mediaStore);\n    };\n\n    _update(props: any, state: State | undefined, _mediaStore: MediaStore): void {\n      this._state = state;\n      // @ts-expect-error any\n      super._update?.(props, state, _mediaStore);\n      setAttributes(this, props);\n    }\n\n    attributeChangedCallback(name: string, oldValue: string, newValue: string): void {\n      super.attributeChangedCallback?.(name, oldValue, newValue);\n      this.#render();\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 as unknown as ConnectedComponentConstructor<E, State>;\n}\n\nexport function getCoreState<T extends {\n  subscribe: (callback: (state: any) => void) => () => void;\n  getState: () => any;\n  setState: (state: any) => void;\n}>(CoreClass: new () => T, state: any): any {\n  let core = currentCoreInstances[currentCoreIndex]?.core as T;\n  if (!core) {\n    core = new CoreClass();\n    currentCoreInstances[currentCoreIndex] = { core, listening: false };\n  }\n\n  currentCoreIndex++;\n\n  const coreState = core.getState();\n  const oldState: Record<string, any> = {};\n  for (const key in state) {\n    oldState[key] = coreState[key];\n  }\n  // Only set the state if it has changed\n  if (!shallowEqual(oldState, state)) {\n    core.setState(state);\n  }\n\n  return core.getState();\n}\n\nexport function getPropsFromAttrs(element: HTMLElement): Record<string, any> {\n  const props: Record<string, any> = {};\n  for (const attr of element.attributes) {\n    const camelName = toCamelCase(attr.name);\n    props[camelName] = element[camelName as keyof typeof element];\n  }\n  return props;\n}\n"],"mappings":";;;;;AAiBA,IAAIA,uBAA8B,EAAE;AAGpC,IAAIC,mBAA2B;;;;;;;;;;;AAY/B,SAAgB,yBACd,WACA,WACA,WACA,aACyC;CACzC,MAAM,qBAAqB,cAAc,cAAc,UAAU,CAAC;;;mBAYrD,EACT,aAAa,eAAoB;AAC/B,UAAKC,aAAc;AAGnB,eAAW,gBAAgB;AACzB,WAAKC,QAAS;AAEd,UAAK,MAAM,YAAY,MAAKC,cAC1B,KAAI,CAAC,SAAS,WAAW;AACvB,eAAS,YAAY;AACrB,eAAS,KAAK,UAAU,MAAKD,OAAQ;;MAGzC;MAEL;;EA3BD,WAAW,qBAA+B;AACxC,UAAO,CAEL,GAAI,MAAM,sBAAsB,EAAE,CACnC;;EAIH;EACA,iBAAsD,EAAE;EAoBxD,gBAAsB;AACpB,OAAI,CAAC,MAAKD,WAAa;AAEvB,sBAAmB;AACnB,0BAAuB,MAAKE;GAG5B,MAAM,QAAQ,YAAY,MAAsB,MAAKF,WAAY;GACjE,MAAM,QAAQ,UAAU,MAAsB,SAAS,EAAE,CAAU;AACnE,QAAK,QAAQ,OAAO,OAAO,MAAKA,WAAY;;EAG9C,QAAQ,OAAY,OAA0B,aAA+B;AAC3E,QAAK,SAAS;AAEd,SAAM,UAAU,OAAO,OAAO,YAAY;AAC1C,iBAAc,MAAM,MAAM;;EAG5B,yBAAyB,MAAc,UAAkB,UAAwB;AAC/E,SAAM,2BAA2B,MAAM,UAAU,SAAS;AAC1D,SAAKC,QAAS;;EAGhB,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;;AAGT,SAAgB,aAIb,WAAwB,OAAiB;CAC1C,IAAI,OAAO,qBAAqB,mBAAmB;AACnD,KAAI,CAAC,MAAM;AACT,SAAO,IAAI,WAAW;AACtB,uBAAqB,oBAAoB;GAAE;GAAM,WAAW;GAAO;;AAGrE;CAEA,MAAM,YAAY,KAAK,UAAU;CACjC,MAAME,WAAgC,EAAE;AACxC,MAAK,MAAM,OAAO,MAChB,UAAS,OAAO,UAAU;AAG5B,KAAI,CAAC,aAAa,UAAU,MAAM,CAChC,MAAK,SAAS,MAAM;AAGtB,QAAO,KAAK,UAAU;;AAGxB,SAAgB,kBAAkB,SAA2C;CAC3E,MAAMC,QAA6B,EAAE;AACrC,MAAK,MAAM,QAAQ,QAAQ,YAAY;EACrC,MAAM,YAAY,YAAY,KAAK,KAAK;AACxC,QAAM,aAAa,QAAQ;;AAE7B,QAAO"}

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

@@ -0,0 +1,36 @@
+import { r as toConnectedHTMLComponent } from "./component-factory-vR-5t251.js";
+import { currentTimeDisplayStateDefinition } from "@videojs/core/store";
+import { formatDisplayTime } from "@videojs/utils";
+
+//#region src/elements/current-time-display.ts
+const getCurrentTimeDisplayState = (_element, mediaStore) => {
+	return { ...currentTimeDisplayStateDefinition.stateTransform(mediaStore.getState()) };
+};
+const getCurrentTimeDisplayProps = (_element, _state) => {
+	return {};
+};
+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 showRemaining() {
+		return this.hasAttribute("show-remaining");
+	}
+	_update(_props, 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 CurrentTimeDisplayElement = toConnectedHTMLComponent(CurrentTimeDisplay, getCurrentTimeDisplayState, getCurrentTimeDisplayProps, "CurrentTimeDisplay");
+
+//#endregion
+export { CurrentTimeDisplayElement as t };
+//# sourceMappingURL=current-time-display-BNvqKqSQ.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"current-time-display-BNvqKqSQ.js","names":["getCurrentTimeDisplayState: StateHook<CurrentTimeDisplay, CurrentTimeDisplayState>","getCurrentTimeDisplayProps: PropsHook<CurrentTimeDisplay, CurrentTimeDisplayState>","CurrentTimeDisplayElement: ConnectedComponentConstructor<CurrentTimeDisplay, 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';\nimport { formatDisplayTime } from '@videojs/utils';\nimport { toConnectedHTMLComponent } from '../utils/component-factory';\n\nexport const getCurrentTimeDisplayState: StateHook<CurrentTimeDisplay, CurrentTimeDisplayState> = (_element, mediaStore) => {\n  return {\n    ...currentTimeDisplayStateDefinition.stateTransform(mediaStore.getState()),\n    // Current time display is read-only, so no request methods needed\n  };\n};\n\nexport const getCurrentTimeDisplayProps: PropsHook<CurrentTimeDisplay, CurrentTimeDisplayState> = (_element, _state) => {\n  return {};\n};\n\nexport class CurrentTimeDisplay extends HTMLElement {\n  static shadowRootOptions = {\n    mode: 'open' as ShadowRootMode,\n  };\n\n  static observedAttributes: string[] = ['show-remaining'];\n\n  constructor() {\n    super();\n\n    if (!this.shadowRoot) {\n      this.attachShadow((this.constructor as typeof CurrentTimeDisplay).shadowRootOptions);\n    }\n  }\n\n  get showRemaining(): boolean {\n    return this.hasAttribute('show-remaining');\n  }\n\n  _update(_props: any, state: CurrentTimeDisplayState): void {\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 CurrentTimeDisplayElement: ConnectedComponentConstructor<CurrentTimeDisplay, CurrentTimeDisplayState> = toConnectedHTMLComponent(\n  CurrentTimeDisplay,\n  getCurrentTimeDisplayState,\n  getCurrentTimeDisplayProps,\n  'CurrentTimeDisplay',\n);\n"],"mappings":";;;;;AAOA,MAAaA,8BAAsF,UAAU,eAAe;AAC1H,QAAO,EACL,GAAG,kCAAkC,eAAe,WAAW,UAAU,CAAC,EAE3E;;AAGH,MAAaC,8BAAsF,UAAU,WAAW;AACtH,QAAO,EAAE;;AAGX,IAAa,qBAAb,cAAwC,YAAY;;2BACvB,EACzB,MAAM,QACP;;;4BAEqC,CAAC,iBAAiB;;CAExD,cAAc;AACZ,SAAO;AAEP,MAAI,CAAC,KAAK,WACR,MAAK,aAAc,KAAK,YAA0C,kBAAkB;;CAIxF,IAAI,gBAAyB;AAC3B,SAAO,KAAK,aAAa,iBAAiB;;CAG5C,QAAQ,QAAa,OAAsC;;EAEzD,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,MAAaC,4BAAwG,yBACnH,oBACA,4BACA,4BACA,qBACD"}

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

@@ -0,0 +1,10 @@
+//#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

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

@@ -0,0 +1,12 @@
+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

@@ -0,0 +1,27 @@
+import "../component-factory-vR-5t251.js";
+import "../current-time-display-BNvqKqSQ.js";
+import "../duration-display-Dtl2RCNd.js";
+import "../button-Bu1mGG-F.js";
+import "../fullscreen-button-CKOv8Ywh.js";
+import "../mute-button-BCN9DDLN.js";
+import "../play-button-DP8VldNs.js";
+import "../popover-ah61j3HR.js";
+import "../preview-time-display-DwLOj4CJ.js";
+import "../time-slider-DBWcZzRe.js";
+import "../tooltip-O0U-gkDS.js";
+import "../volume-slider-cwSYSsFC.js";
+import "../media-container-BOL0PKuG.js";
+import "../video-provider-Bj9JwzDx.js";
+import "../custom-element-3bDlB2XO.js";
+import "../video-provider-HuYjfSUk.js";
+import "../media-container-DwKSOa1h.js";
+import "../media-play-button-Wt6RbYe5.js";
+import "../media-mute-button-DXq-JKvc.js";
+import "../media-volume-slider-DHV-7FOd.js";
+import "../media-time-slider-DFfiWHUh.js";
+import "../media-fullscreen-button-CiG60HOW.js";
+import "../media-duration-display-6KTtxmm3.js";
+import "../media-current-time-display-Cr2LJaRo.js";
+import "../media-preview-time-display-DF6tOv7J.js";
+import "../media-popover-CpbBQOK2.js";
+import "../media-tooltip-RjL5rqLT.js";

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

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

package/dist/define/media-container.js

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

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

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

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

@@ -0,0 +1,4 @@
+import "../component-factory-vR-5t251.js";
+import "../current-time-display-BNvqKqSQ.js";
+import "../custom-element-3bDlB2XO.js";
+import "../media-current-time-display-Cr2LJaRo.js";

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

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

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

@@ -0,0 +1,4 @@
+import "../component-factory-vR-5t251.js";
+import "../duration-display-Dtl2RCNd.js";
+import "../custom-element-3bDlB2XO.js";
+import "../media-duration-display-6KTtxmm3.js";

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

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

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

@@ -0,0 +1,5 @@
+import "../component-factory-vR-5t251.js";
+import "../button-Bu1mGG-F.js";
+import "../fullscreen-button-CKOv8Ywh.js";
+import "../custom-element-3bDlB2XO.js";
+import "../media-fullscreen-button-CiG60HOW.js";

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

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

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

@@ -0,0 +1,5 @@
+import "../component-factory-vR-5t251.js";
+import "../button-Bu1mGG-F.js";
+import "../mute-button-BCN9DDLN.js";
+import "../custom-element-3bDlB2XO.js";
+import "../media-mute-button-DXq-JKvc.js";

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

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

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

@@ -0,0 +1,5 @@
+import "../component-factory-vR-5t251.js";
+import "../button-Bu1mGG-F.js";
+import "../play-button-DP8VldNs.js";
+import "../custom-element-3bDlB2XO.js";
+import "../media-play-button-Wt6RbYe5.js";

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

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

package/dist/define/media-popover.js

@@ -0,0 +1,4 @@
+import "../component-factory-vR-5t251.js";
+import "../popover-ah61j3HR.js";
+import "../custom-element-3bDlB2XO.js";
+import "../media-popover-CpbBQOK2.js";

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

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

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

@@ -0,0 +1,4 @@
+import "../component-factory-vR-5t251.js";
+import "../preview-time-display-DwLOj4CJ.js";
+import "../custom-element-3bDlB2XO.js";
+import "../media-preview-time-display-DF6tOv7J.js";

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

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

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

@@ -0,0 +1,4 @@
+import "../component-factory-vR-5t251.js";
+import "../time-slider-DBWcZzRe.js";
+import "../custom-element-3bDlB2XO.js";
+import "../media-time-slider-DFfiWHUh.js";

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

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

package/dist/define/media-tooltip.js

@@ -0,0 +1,5 @@
+import "../component-factory-vR-5t251.js";
+import "../popover-ah61j3HR.js";
+import "../tooltip-O0U-gkDS.js";
+import "../custom-element-3bDlB2XO.js";
+import "../media-tooltip-RjL5rqLT.js";

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

@@ -0,0 +1 @@
+import "../media-volume-slider-DP47VLVi.js";

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

@@ -0,0 +1,4 @@
+import "../component-factory-vR-5t251.js";
+import "../volume-slider-cwSYSsFC.js";
+import "../custom-element-3bDlB2XO.js";
+import "../media-volume-slider-DHV-7FOd.js";

package/dist/define/video-provider.d.ts

@@ -0,0 +1 @@
+import "../video-provider-nSCfwA7l.js";

package/dist/define/video-provider.js

@@ -0,0 +1,3 @@
+import "../video-provider-Bj9JwzDx.js";
+import "../custom-element-3bDlB2XO.js";
+import "../video-provider-HuYjfSUk.js";

package/dist/duration-display-Dtl2RCNd.js

@@ -0,0 +1,44 @@
+import { r as toConnectedHTMLComponent } from "./component-factory-vR-5t251.js";
+import { durationDisplayStateDefinition } from "@videojs/core/store";
+import { formatDisplayTime } from "@videojs/utils";
+import { namedNodeMapToObject } from "@videojs/utils/dom";
+
+//#region src/elements/duration-display.ts
+function getTemplateHTML(_attrs, _props = {}) {
+	return `
+    <span></span>
+  `;
+}
+var DurationDisplay = class extends HTMLElement {
+	static {
+		this.shadowRootOptions = { mode: "open" };
+	}
+	static {
+		this.getTemplateHTML = getTemplateHTML;
+	}
+	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;
+		}
+	}
+	_update(_props, state) {
+		const spanElement = this.shadowRoot?.querySelector("span");
+		if (spanElement) spanElement.textContent = formatDisplayTime(state.duration);
+	}
+};
+const getDurationDisplayState = (_element, mediaStore) => {
+	return { ...durationDisplayStateDefinition.stateTransform(mediaStore.getState()) };
+};
+const getDurationDisplayProps = (_element, _state) => {
+	return {};
+};
+const DurationDisplayElement = toConnectedHTMLComponent(DurationDisplay, getDurationDisplayState, getDurationDisplayProps, "DurationDisplay");
+
+//#endregion
+export { DurationDisplayElement as t };
+//# sourceMappingURL=duration-display-Dtl2RCNd.js.map

package/dist/duration-display-Dtl2RCNd.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"duration-display-Dtl2RCNd.js","names":["getDurationDisplayState: StateHook<DurationDisplay, DurationDisplayState>","getDurationDisplayProps: PropsHook<DurationDisplay, DurationDisplayState>","DurationDisplayElement: ConnectedComponentConstructor<DurationDisplay, DurationDisplayState>"],"sources":["../src/elements/duration-display.ts"],"sourcesContent":["import type { DurationDisplayState } from '@videojs/core/store';\nimport type { ConnectedComponentConstructor, PropsHook, StateHook } from '../utils/component-factory';\n\nimport { durationDisplayStateDefinition } from '@videojs/core/store';\n\nimport { formatDisplayTime } from '@videojs/utils';\nimport { namedNodeMapToObject } from '@videojs/utils/dom';\nimport { toConnectedHTMLComponent } from '../utils/component-factory';\n\nexport function getTemplateHTML(\n  this: typeof DurationDisplay,\n  _attrs: Record<string, string>,\n  _props: Record<string, any> = {},\n) {\n  return /* html */ `\n    <span></span>\n  `;\n}\n\nexport class DurationDisplay extends HTMLElement {\n  static shadowRootOptions = {\n    mode: 'open' as ShadowRootMode,\n  };\n\n  static getTemplateHTML: typeof getTemplateHTML = getTemplateHTML;\n\n  constructor() {\n    super();\n\n    if (!this.shadowRoot) {\n      this.attachShadow((this.constructor as typeof DurationDisplay).shadowRootOptions);\n\n      const attrs = namedNodeMapToObject(this.attributes);\n      const html = (this.constructor as typeof DurationDisplay).getTemplateHTML(attrs);\n      const shadowRoot = this.shadowRoot as unknown as ShadowRoot;\n      shadowRoot.setHTMLUnsafe ? shadowRoot.setHTMLUnsafe(html) : (shadowRoot.innerHTML = html);\n    }\n  }\n\n  _update(_props: any, state: DurationDisplayState): void {\n    // Update the span content with formatted duration\n    const spanElement = this.shadowRoot?.querySelector('span') as HTMLElement;\n    if (spanElement) {\n      spanElement.textContent = formatDisplayTime(state.duration);\n    }\n  }\n}\n\nexport const getDurationDisplayState: StateHook<DurationDisplay, DurationDisplayState> = (_element, mediaStore) => {\n  return {\n    ...durationDisplayStateDefinition.stateTransform(mediaStore.getState()),\n    // Duration display is read-only, so no request methods needed\n  };\n};\n\nexport const getDurationDisplayProps: PropsHook<DurationDisplay, DurationDisplayState> = (_element, _state) => {\n  return {};\n};\n\nexport const DurationDisplayElement: ConnectedComponentConstructor<DurationDisplay, DurationDisplayState> = toConnectedHTMLComponent(\n  DurationDisplay,\n  getDurationDisplayState,\n  getDurationDisplayProps,\n  'DurationDisplay',\n);\n"],"mappings":";;;;;;AASA,SAAgB,gBAEd,QACA,SAA8B,EAAE,EAChC;AACA,QAAkB;;;;AAKpB,IAAa,kBAAb,cAAqC,YAAY;;2BACpB,EACzB,MAAM,QACP;;;yBAEgD;;CAEjD,cAAc;AACZ,SAAO;AAEP,MAAI,CAAC,KAAK,YAAY;AACpB,QAAK,aAAc,KAAK,YAAuC,kBAAkB;GAEjF,MAAM,QAAQ,qBAAqB,KAAK,WAAW;GACnD,MAAM,OAAQ,KAAK,YAAuC,gBAAgB,MAAM;GAChF,MAAM,aAAa,KAAK;AACxB,cAAW,gBAAgB,WAAW,cAAc,KAAK,GAAI,WAAW,YAAY;;;CAIxF,QAAQ,QAAa,OAAmC;EAEtD,MAAM,cAAc,KAAK,YAAY,cAAc,OAAO;AAC1D,MAAI,YACF,aAAY,cAAc,kBAAkB,MAAM,SAAS;;;AAKjE,MAAaA,2BAA6E,UAAU,eAAe;AACjH,QAAO,EACL,GAAG,+BAA+B,eAAe,WAAW,UAAU,CAAC,EAExE;;AAGH,MAAaC,2BAA6E,UAAU,WAAW;AAC7G,QAAO,EAAE;;AAGX,MAAaC,yBAA+F,yBAC1G,iBACA,yBACA,yBACA,kBACD"}

package/dist/fullscreen-button-CKOv8Ywh.js

@@ -0,0 +1,40 @@
+import { r as toConnectedHTMLComponent } from "./component-factory-vR-5t251.js";
+import { t as ButtonElement } from "./button-Bu1mGG-F.js";
+import { fullscreenButtonStateDefinition } from "@videojs/core/store";
+import { memoize } from "@videojs/utils";
+
+//#region src/elements/fullscreen-button.ts
+const fullscreenButtonCreateRequestMethods = memoize(fullscreenButtonStateDefinition.createRequestMethods);
+/**
+* FullscreenButton state hook - equivalent to React's useFullscreenButtonState
+* Handles media store state subscription and transformation
+*/
+const getFullscreenButtonState = (_element, mediaStore) => {
+	return {
+		...fullscreenButtonStateDefinition.stateTransform(mediaStore.getState()),
+		...fullscreenButtonCreateRequestMethods(mediaStore.dispatch)
+	};
+};
+const getFullscreenButtonProps = (_element, state) => {
+	return {
+		"data-fullscreen": state.fullscreen,
+		role: "button",
+		tabindex: "0",
+		"aria-label": state.fullscreen ? "exit fullscreen" : "enter fullscreen",
+		"data-tooltip": state.fullscreen ? "Exit Fullscreen" : "Enter Fullscreen"
+	};
+};
+var FullscreenButton = class extends ButtonElement {
+	handleEvent(event) {
+		super.handleEvent(event);
+		const { type } = event;
+		const state = this._state;
+		if (state && type === "click") if (state.fullscreen) state.requestExitFullscreen();
+		else state.requestEnterFullscreen();
+	}
+};
+const FullscreenButtonElement = toConnectedHTMLComponent(FullscreenButton, getFullscreenButtonState, getFullscreenButtonProps, "FullscreenButton");
+
+//#endregion
+export { FullscreenButtonElement as t };
+//# sourceMappingURL=fullscreen-button-CKOv8Ywh.js.map

package/dist/fullscreen-button-CKOv8Ywh.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fullscreen-button-CKOv8Ywh.js","names":["getFullscreenButtonState: StateHook<FullscreenButton, FullscreenButtonStateWithMethods>","getFullscreenButtonProps: PropsHook<FullscreenButton, FullscreenButtonStateWithMethods>","FullscreenButtonElement: ConnectedComponentConstructor<FullscreenButton, FullscreenButtonStateWithMethods>"],"sources":["../src/elements/fullscreen-button.ts"],"sourcesContent":["import type { FullscreenButtonState } from '@videojs/core/store';\nimport type { Prettify } from '../types';\nimport type { ConnectedComponentConstructor, PropsHook, StateHook } from '../utils/component-factory';\n\nimport { fullscreenButtonStateDefinition } from '@videojs/core/store';\n\nimport { memoize } from '@videojs/utils';\nimport { toConnectedHTMLComponent } from '../utils/component-factory';\nimport { ButtonElement } from './button';\n\ntype FullscreenButtonStateWithMethods = Prettify<FullscreenButtonState & ReturnType<typeof fullscreenButtonStateDefinition.createRequestMethods>>;\n\nconst fullscreenButtonCreateRequestMethods = memoize(fullscreenButtonStateDefinition.createRequestMethods);\n\n/**\n * FullscreenButton state hook - equivalent to React's useFullscreenButtonState\n * Handles media store state subscription and transformation\n */\nexport const getFullscreenButtonState: StateHook<FullscreenButton, FullscreenButtonStateWithMethods> = (_element, mediaStore) => {\n  return {\n    ...fullscreenButtonStateDefinition.stateTransform(mediaStore.getState()),\n    ...fullscreenButtonCreateRequestMethods(mediaStore.dispatch),\n  };\n};\n\nexport const getFullscreenButtonProps: PropsHook<FullscreenButton, FullscreenButtonStateWithMethods> = (_element, state) => {\n  const baseProps: Record<string, any> = {\n    /** data attributes/props */\n    'data-fullscreen': state.fullscreen,\n    /** @TODO Need another state provider in core for i18n (CJP) */\n    /** aria attributes/props */\n    role: 'button',\n    tabindex: '0',\n    'aria-label': state.fullscreen ? 'exit fullscreen' : 'enter fullscreen',\n    /** tooltip */\n    'data-tooltip': state.fullscreen ? 'Exit Fullscreen' : 'Enter Fullscreen',\n    /** @TODO Figure out how we want to handle attr overrides (e.g. aria-label) (CJP) */\n    /** external props spread last to allow for overriding */\n    // ...props,\n  };\n  return baseProps;\n};\n\nexport class FullscreenButton extends ButtonElement {\n  _state: FullscreenButtonStateWithMethods | undefined;\n\n  handleEvent(event: Event): void {\n    super.handleEvent(event);\n\n    const { type } = event;\n    const state = this._state;\n    if (state && type === 'click') {\n      if (state.fullscreen) {\n        state.requestExitFullscreen();\n      } else {\n        state.requestEnterFullscreen();\n      }\n    }\n  }\n}\n\nexport const FullscreenButtonElement: ConnectedComponentConstructor<FullscreenButton, FullscreenButtonStateWithMethods> = toConnectedHTMLComponent(\n  FullscreenButton,\n  getFullscreenButtonState,\n  getFullscreenButtonProps,\n  'FullscreenButton',\n);\n"],"mappings":";;;;;;AAYA,MAAM,uCAAuC,QAAQ,gCAAgC,qBAAqB;;;;;AAM1G,MAAaA,4BAA2F,UAAU,eAAe;AAC/H,QAAO;EACL,GAAG,gCAAgC,eAAe,WAAW,UAAU,CAAC;EACxE,GAAG,qCAAqC,WAAW,SAAS;EAC7D;;AAGH,MAAaC,4BAA2F,UAAU,UAAU;AAe1H,QAduC;EAErC,mBAAmB,MAAM;EAGzB,MAAM;EACN,UAAU;EACV,cAAc,MAAM,aAAa,oBAAoB;EAErD,gBAAgB,MAAM,aAAa,oBAAoB;EAIxD;;AAIH,IAAa,mBAAb,cAAsC,cAAc;CAGlD,YAAY,OAAoB;AAC9B,QAAM,YAAY,MAAM;EAExB,MAAM,EAAE,SAAS;EACjB,MAAM,QAAQ,KAAK;AACnB,MAAI,SAAS,SAAS,QACpB,KAAI,MAAM,WACR,OAAM,uBAAuB;MAE7B,OAAM,wBAAwB;;;AAMtC,MAAaC,0BAA6G,yBACxH,kBACA,0BACA,0BACA,mBACD"}