@videojs/html 0.1.0-preview.3 → 0.1.0-preview.4

package/dist/button-D1DWjsQu.js

@@ -0,0 +1,57 @@
+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;
+	}
+	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);
+	}
+	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-D1DWjsQu.js.map

package/dist/button-D1DWjsQu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button-D1DWjsQu.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  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  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;;CAEjD,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,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

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

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

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

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

@@ -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 "../media-container-DPnFjmtK.js";
+import "../media-provider-D7P2TLXG.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-DeAN6cjC.js";
+import "../current-time-display-C3qndGf5.js";
+import "../duration-display-JOPp3bdU.js";
+import "../button-D1DWjsQu.js";
+import "../fullscreen-button-CGO2UJjs.js";
+import "../mute-button-vW2sLqqY.js";
+import "../play-button-aVb0g10G.js";
+import "../popover-Dc0hyhwB.js";
+import "../preview-time-display-Dax0FQ2X.js";
+import "../time-slider-CA1GMs6A.js";
+import "../tooltip-54fBUUpb.js";
+import "../volume-slider-guD8gqpi.js";
+import "../media-container-C0MUzkJ_.js";
+import "../media-provider-CyoL0bCx.js";
+import "../custom-element-3bDlB2XO.js";
+import "../media-container-BGEXSi9g.js";
+import "../media-provider-D_GL2_DN.js";
+import "../media-play-button-CLj-hkwn.js";
+import "../media-mute-button-BOVhZ3aP.js";
+import "../media-volume-slider-CKSxmdQv.js";
+import "../media-time-slider-Bp2qnwsW.js";
+import "../media-fullscreen-button-Dcflbt54.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-F4M4Tq4z.js";
+import "../media-tooltip-ClcVafMb.js";

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

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

package/dist/define/media-container.js

@@ -0,0 +1,3 @@
+import "../media-container-C0MUzkJ_.js";
+import "../custom-element-3bDlB2XO.js";
+import "../media-container-BGEXSi9g.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-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

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

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

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

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

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

@@ -0,0 +1,5 @@
+import "../component-factory-DeAN6cjC.js";
+import "../button-D1DWjsQu.js";
+import "../fullscreen-button-CGO2UJjs.js";
+import "../custom-element-3bDlB2XO.js";
+import "../media-fullscreen-button-Dcflbt54.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-DeAN6cjC.js";
+import "../button-D1DWjsQu.js";
+import "../mute-button-vW2sLqqY.js";
+import "../custom-element-3bDlB2XO.js";
+import "../media-mute-button-BOVhZ3aP.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-DeAN6cjC.js";
+import "../button-D1DWjsQu.js";
+import "../play-button-aVb0g10G.js";
+import "../custom-element-3bDlB2XO.js";
+import "../media-play-button-CLj-hkwn.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,3 @@
+import "../popover-Dc0hyhwB.js";
+import "../custom-element-3bDlB2XO.js";
+import "../media-popover-F4M4Tq4z.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-DeAN6cjC.js";
+import "../preview-time-display-Dax0FQ2X.js";
+import "../custom-element-3bDlB2XO.js";
+import "../media-preview-time-display-DAiMgLPX.js";

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

@@ -0,0 +1 @@
+import "../media-provider-D7P2TLXG.js";

package/dist/define/media-provider.js

@@ -0,0 +1,3 @@
+import "../media-provider-CyoL0bCx.js";
+import "../custom-element-3bDlB2XO.js";
+import "../media-provider-D_GL2_DN.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-DeAN6cjC.js";
+import "../time-slider-CA1GMs6A.js";
+import "../custom-element-3bDlB2XO.js";
+import "../media-time-slider-Bp2qnwsW.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,3 @@
+import "../tooltip-54fBUUpb.js";
+import "../custom-element-3bDlB2XO.js";
+import "../media-tooltip-ClcVafMb.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-DeAN6cjC.js";
+import "../volume-slider-guD8gqpi.js";
+import "../custom-element-3bDlB2XO.js";
+import "../media-volume-slider-CKSxmdQv.js";

package/dist/duration-display-JOPp3bdU.js

@@ -0,0 +1,49 @@
+import { t as toConnectedHTMLComponent } from "./component-factory-DeAN6cjC.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;
+		}
+	}
+	get duration() {
+		return this._state?.duration ?? 0;
+	}
+	_update(_props, state) {
+		this._state = state;
+		const spanElement = this.shadowRoot?.querySelector("span");
+		if (spanElement) spanElement.textContent = formatDisplayTime(state.duration);
+	}
+};
+const useDurationDisplayState = {
+	keys: [...durationDisplayStateDefinition.keys],
+	transform: (rawState, _mediaStore) => ({ ...durationDisplayStateDefinition.stateTransform(rawState) })
+};
+const getDurationDisplayProps = (_state, _element) => {
+	return {};
+};
+const DurationDisplayElement = toConnectedHTMLComponent(DurationDisplay, useDurationDisplayState, getDurationDisplayProps, "DurationDisplay");
+
+//#endregion
+export { DurationDisplayElement as t };
+//# sourceMappingURL=duration-display-JOPp3bdU.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"duration-display-JOPp3bdU.js","names":["useDurationDisplayState: StateHook<{\n  duration: number | undefined;\n}>","getDurationDisplayProps: PropsHook<{\n  duration: number | undefined;\n}>","DurationDisplayElement: ConnectedComponentConstructor<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  _state:\n    | {\n      duration: number | undefined;\n    }\n    | undefined;\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  get duration(): number {\n    return this._state?.duration ?? 0;\n  }\n\n  _update(_props: any, state: any): void {\n    this._state = state;\n\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 useDurationDisplayState: StateHook<{\n  duration: number | undefined;\n}> = {\n  keys: [...durationDisplayStateDefinition.keys],\n  transform: (rawState, _mediaStore) => ({\n    ...durationDisplayStateDefinition.stateTransform(rawState),\n    // Duration display is read-only, so no request methods needed\n  }),\n};\n\nexport const getDurationDisplayProps: PropsHook<{\n  duration: number | undefined;\n}> = (_state, _element) => {\n  const baseProps: Record<string, any> = {};\n  return baseProps;\n};\n\nexport const DurationDisplayElement: ConnectedComponentConstructor<DurationDisplayState> = toConnectedHTMLComponent(\n  DurationDisplay,\n  useDurationDisplayState,\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;;CAQjD,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,IAAI,WAAmB;AACrB,SAAO,KAAK,QAAQ,YAAY;;CAGlC,QAAQ,QAAa,OAAkB;AACrC,OAAK,SAAS;EAGd,MAAM,cAAc,KAAK,YAAY,cAAc,OAAO;AAC1D,MAAI,YACF,aAAY,cAAc,kBAAkB,MAAM,SAAS;;;AAKjE,MAAaA,0BAER;CACH,MAAM,CAAC,GAAG,+BAA+B,KAAK;CAC9C,YAAY,UAAU,iBAAiB,EACrC,GAAG,+BAA+B,eAAe,SAAS,EAE3D;CACF;AAED,MAAaC,2BAEP,QAAQ,aAAa;AAEzB,QADuC,EAAE;;AAI3C,MAAaC,yBAA8E,yBACzF,iBACA,yBACA,yBACA,kBACD"}

package/dist/fullscreen-button-CGO2UJjs.js

@@ -0,0 +1,48 @@
+import { t as toConnectedHTMLComponent } from "./component-factory-DeAN6cjC.js";
+import { t as ButtonElement } from "./button-D1DWjsQu.js";
+import { fullscreenButtonStateDefinition } from "@videojs/core/store";
+import { setAttributes } from "@videojs/utils/dom";
+
+//#region src/elements/fullscreen-button.ts
+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();
+	}
+	get fullscreen() {
+		return this._state?.fullscreen ?? false;
+	}
+	_update(props, state, _mediaStore) {
+		this._state = state;
+		/** @TODO Follow up with React vs. W.C. data-* attributes discrepancies (CJP)  */
+		setAttributes(this, props);
+	}
+};
+/**
+* FullscreenButton state hook - equivalent to React's useFullscreenButtonState
+* Handles media store state subscription and transformation
+*/
+const getFullscreenButtonState = {
+	keys: fullscreenButtonStateDefinition.keys,
+	transform: (rawState, mediaStore) => ({
+		...fullscreenButtonStateDefinition.stateTransform(rawState),
+		...fullscreenButtonStateDefinition.createRequestMethods(mediaStore.dispatch)
+	})
+};
+const getFullscreenButtonProps = (state, _element) => {
+	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"
+	};
+};
+const FullscreenButtonElement = toConnectedHTMLComponent(FullscreenButton, getFullscreenButtonState, getFullscreenButtonProps, "FullscreenButton");
+
+//#endregion
+export { FullscreenButtonElement as t };
+//# sourceMappingURL=fullscreen-button-CGO2UJjs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"fullscreen-button-CGO2UJjs.js","names":["getFullscreenButtonState: StateHook<{ fullscreen: boolean }>","getFullscreenButtonProps: PropsHook<{ fullscreen: boolean }>","FullscreenButtonElement: ConnectedComponentConstructor<FullscreenButtonState>"],"sources":["../src/elements/fullscreen-button.ts"],"sourcesContent":["import type { FullscreenButtonState } from '@videojs/core/store';\nimport type { ConnectedComponentConstructor, PropsHook, StateHook } from '../utils/component-factory';\n\nimport { fullscreenButtonStateDefinition } from '@videojs/core/store';\n\nimport { setAttributes } from '@videojs/utils/dom';\nimport { toConnectedHTMLComponent } from '../utils/component-factory';\nimport { ButtonElement } from './button';\n\nexport class FullscreenButton extends ButtonElement {\n  _state:\n    | {\n      fullscreen: boolean;\n      requestEnterFullscreen: () => void;\n      requestExitFullscreen: () => void;\n    }\n    | 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  get fullscreen(): boolean {\n    return this._state?.fullscreen ?? false;\n  }\n\n  _update(props: any, state: any, _mediaStore?: any): void {\n    this._state = state;\n    /** @TODO Follow up with React vs. W.C. data-* attributes discrepancies (CJP)  */\n    setAttributes(this, props);\n  }\n}\n\n/**\n * FullscreenButton state hook - equivalent to React's useFullscreenButtonState\n * Handles media store state subscription and transformation\n */\nexport const getFullscreenButtonState: StateHook<{ fullscreen: boolean }> = {\n  keys: fullscreenButtonStateDefinition.keys,\n  transform: (rawState, mediaStore) => ({\n    ...fullscreenButtonStateDefinition.stateTransform(rawState),\n    ...fullscreenButtonStateDefinition.createRequestMethods(mediaStore.dispatch),\n  }),\n};\n\nexport const getFullscreenButtonProps: PropsHook<{ fullscreen: boolean }> = (state, _element) => {\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\n  return baseProps;\n};\n\nexport const FullscreenButtonElement: ConnectedComponentConstructor<FullscreenButtonState> = toConnectedHTMLComponent(\n  FullscreenButton,\n  getFullscreenButtonState,\n  getFullscreenButtonProps,\n  'FullscreenButton',\n);\n"],"mappings":";;;;;;AASA,IAAa,mBAAb,cAAsC,cAAc;CASlD,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;;CAKpC,IAAI,aAAsB;AACxB,SAAO,KAAK,QAAQ,cAAc;;CAGpC,QAAQ,OAAY,OAAY,aAAyB;AACvD,OAAK,SAAS;;AAEd,gBAAc,MAAM,MAAM;;;;;;;AAQ9B,MAAaA,2BAA+D;CAC1E,MAAM,gCAAgC;CACtC,YAAY,UAAU,gBAAgB;EACpC,GAAG,gCAAgC,eAAe,SAAS;EAC3D,GAAG,gCAAgC,qBAAqB,WAAW,SAAS;EAC7E;CACF;AAED,MAAaC,4BAAgE,OAAO,aAAa;AAgB/F,QAfuC;EAErC,mBAAmB,MAAM;EAGzB,MAAM;EACN,UAAU;EACV,cAAc,MAAM,aAAa,oBAAoB;EAErD,gBAAgB,MAAM,aAAa,oBAAoB;EAIxD;;AAKH,MAAaC,0BAAgF,yBAC3F,kBACA,0BACA,0BACA,mBACD"}