@videojs/html 0.1.0-preview.8 → 0.1.0-preview.9

package/dist/{component-factory-DeAN6cjC.js → component-factory-C0cl1nrL.js}

@@ -1,6 +1,8 @@
 import { ConsumerMixin } from "@open-wc/context-protocol";
 
 //#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.
@@ -16,12 +18,23 @@ function toConnectedHTMLComponent(BaseClass, stateHook, propsHook, displayName)
 	const ConnectedComponent = class extends ConsumerMixin(BaseClass) {
 		constructor(..._args) {
 			super(..._args);
+			this._coreInstances = [];
 			this.contexts = { mediaStore: (mediaStore) => {
 				this._mediaStore = mediaStore;
-				this._mediaStore.subscribeKeys(stateHook.keys, (rawState) => {
-					const state = stateHook.transform(rawState, mediaStore);
+				this._mediaStore.subscribe(() => {
+					currentCoreIndex = 0;
+					currentCoreInstances = this._coreInstances;
+					const state = stateHook?.(mediaStore) ?? mediaStore.getState();
 					const props = propsHook(state ?? {}, this);
 					this._update(props, state, mediaStore);
+					for (const instance of currentCoreInstances) if (!instance.listening) {
+						instance.listening = true;
+						instance.core.subscribe(() => {
+							const state$1 = instance.core.getState();
+							const props$1 = propsHook(state$1 ?? {}, this);
+							this._update(props$1, state$1, mediaStore);
+						});
+					}
 				});
 			} };
 		}
@@ -41,7 +54,20 @@ function toConnectedHTMLComponent(BaseClass, stateHook, propsHook, displayName)
 	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++;
+	core.setState(state);
+	return core.getState();
+}
 
 //#endregion
-export { toConnectedHTMLComponent as t };
-//# sourceMappingURL=component-factory-DeAN6cjC.js.map
+export { toConnectedHTMLComponent as n, getCoreState as t };
+//# sourceMappingURL=component-factory-C0cl1nrL.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"component-factory-C0cl1nrL.js","names":["currentCoreInstances: any[]","currentCoreIndex: number","state","props"],"sources":["../src/utils/component-factory.ts"],"sourcesContent":["import type { MediaStore } from '@videojs/core/store';\nimport { 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 type StateHook<T = any> = (mediaStore: MediaStore) => T;\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\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 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> | undefined,\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    _coreInstances = [];\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.subscribe(() => {\n          currentCoreIndex = 0;\n          currentCoreInstances = this._coreInstances;\n\n          // Phase 1: Transform raw media store state (state concern)\n          const state = stateHook?.(mediaStore) ?? mediaStore.getState();\n          // Phase 2: Update element attributes/properties (props concern)\n          const props = propsHook(state ?? {} as State, this);\n\n          // @ts-expect-error any\n          this._update(props, state, mediaStore);\n\n          for (const instance of currentCoreInstances) {\n            if (!instance.listening) {\n              instance.listening = true;\n              instance.core.subscribe(() => {\n                const state = instance.core.getState();\n                const props = propsHook(state ?? {} as State, this);\n                // @ts-expect-error any\n                this._update(props, state, mediaStore);\n              });\n            }\n          }\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\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  core.setState(state);\n  return core.getState();\n}\n"],"mappings":";;;AAeA,IAAIA,uBAA8B,EAAE;AAGpC,IAAIC,mBAA2B;;;;;;;;;;;;AAa/B,SAAgB,yBACd,WACA,WACA,WACA,aACsC;CACtC,MAAM,qBAAqB,cAAc,cAAc,UAAU,CAAC;;;yBAS/C,EAAE;mBAER,EACT,aAAa,eAAoB;AAC/B,SAAK,cAAc;AAInB,SAAK,YAAY,gBAAgB;AAC/B,wBAAmB;AACnB,4BAAuB,KAAK;KAG5B,MAAM,QAAQ,YAAY,WAAW,IAAI,WAAW,UAAU;KAE9D,MAAM,QAAQ,UAAU,SAAS,EAAE,EAAW,KAAK;AAGnD,UAAK,QAAQ,OAAO,OAAO,WAAW;AAEtC,UAAK,MAAM,YAAY,qBACrB,KAAI,CAAC,SAAS,WAAW;AACvB,eAAS,YAAY;AACrB,eAAS,KAAK,gBAAgB;OAC5B,MAAMC,UAAQ,SAAS,KAAK,UAAU;OACtC,MAAMC,UAAQ,UAAUD,WAAS,EAAE,EAAW,KAAK;AAEnD,YAAK,QAAQC,SAAOD,SAAO,WAAW;QACtC;;MAGN;MAEL;;EAzCD,WAAW,qBAA+B;AACxC,UAAO,CAEL,GAAI,MAAM,sBAAsB,EAAE,CACnC;;EAuCH,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;AAEA,MAAK,SAAS,MAAM;AACpB,QAAO,KAAK,UAAU"}

package/dist/{current-time-display-C3qndGf5.js → current-time-display-DpoDrQu9.js}

@@ -1,4 +1,4 @@
-import { t as toConnectedHTMLComponent } from "./component-factory-DeAN6cjC.js";
+import { n as toConnectedHTMLComponent } from "./component-factory-C0cl1nrL.js";
 import { currentTimeDisplayStateDefinition } from "@videojs/core/store";
 import { formatDisplayTime } from "@videojs/utils";
 
@@ -33,15 +33,14 @@ var CurrentTimeDisplay = class extends HTMLElement {
 		if (this.shadowRoot) this.shadowRoot.textContent = timeLabel;
 	}
 };
-const useCurrentTimeDisplayState = {
-	keys: [...currentTimeDisplayStateDefinition.keys],
-	transform: (rawState, _mediaStore) => ({ ...currentTimeDisplayStateDefinition.stateTransform(rawState) })
-};
+function getCurrentTimeDisplayState(mediaStore) {
+	return { ...currentTimeDisplayStateDefinition.stateTransform(mediaStore.getState()) };
+}
 const getCurrentTimeDisplayProps = (_state, _element) => {
 	return {};
 };
-const CurrentTimeDisplayElement = toConnectedHTMLComponent(CurrentTimeDisplay, useCurrentTimeDisplayState, getCurrentTimeDisplayProps, "CurrentTimeDisplay");
+const CurrentTimeDisplayElement = toConnectedHTMLComponent(CurrentTimeDisplay, getCurrentTimeDisplayState, getCurrentTimeDisplayProps, "CurrentTimeDisplay");
 
 //#endregion
 export { CurrentTimeDisplayElement as t };
-//# sourceMappingURL=current-time-display-C3qndGf5.js.map
+//# sourceMappingURL=current-time-display-DpoDrQu9.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"current-time-display-DpoDrQu9.js","names":["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, MediaStore } from '@videojs/core/store';\nimport type { ConnectedComponentConstructor, PropsHook } 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 function getCurrentTimeDisplayState(mediaStore: MediaStore): {\n  currentTime: number | undefined;\n  duration: number | undefined;\n} {\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<{\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  getCurrentTimeDisplayState,\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,SAAgB,2BAA2B,YAGzC;AACA,QAAO,EACL,GAAG,kCAAkC,eAAe,WAAW,UAAU,CAAC,EAE3E;;AAGH,MAAaA,8BAGP,QAAQ,aAAa;AAEzB,QADuC,EAAE;;AAI3C,MAAaC,4BAAoF,yBAC/F,oBACA,4BACA,4BACA,qBACD"}

package/dist/define/index.js

@@ -1,27 +1,27 @@
-import "../component-factory-DeAN6cjC.js";
-import "../current-time-display-C3qndGf5.js";
-import "../duration-display-JOPp3bdU.js";
+import "../component-factory-C0cl1nrL.js";
+import "../current-time-display-DpoDrQu9.js";
+import "../duration-display-BFRQmaOz.js";
 import "../button-Bu1mGG-F.js";
-import "../fullscreen-button-C1nq8yP-.js";
-import "../mute-button-BSDoCZs3.js";
-import "../play-button-gaqIKsrv.js";
+import "../fullscreen-button-B0R9K3GV.js";
+import "../mute-button-C7XQB6iK.js";
+import "../play-button-DFbxwrrq.js";
 import "../popover-BUCVOjnO.js";
-import "../preview-time-display-Dax0FQ2X.js";
-import "../time-slider-DKamO_2Q.js";
+import "../preview-time-display-CtA58pCS.js";
+import "../time-slider-DHpKPCI1.js";
 import "../tooltip-B-glki2f.js";
-import "../volume-slider-CbFzCHX4.js";
+import "../volume-slider-CUyfwehe.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-play-button-CDBZrhmx.js";
+import "../media-mute-button-Uy18NpPx.js";
+import "../media-volume-slider-BB6GhrzS.js";
+import "../media-time-slider-BOdJr4QE.js";
+import "../media-fullscreen-button-DDQ6EdLz.js";
+import "../media-duration-display-tzVLafRm.js";
+import "../media-current-time-display-DVCqNt7c.js";
+import "../media-preview-time-display-ufqXiNXg.js";
 import "../media-popover-Cw9d_Bh3.js";
 import "../media-tooltip-CMRN_X4D.js";

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,4 +1,4 @@
-import "../component-factory-DeAN6cjC.js";
-import "../volume-slider-CbFzCHX4.js";
+import "../component-factory-C0cl1nrL.js";
+import "../volume-slider-CUyfwehe.js";
 import "../custom-element-3bDlB2XO.js";
-import "../media-volume-slider-B-n6b3Y8.js";
+import "../media-volume-slider-BB6GhrzS.js";

package/dist/{duration-display-JOPp3bdU.js → duration-display-BFRQmaOz.js}

@@ -1,4 +1,4 @@
-import { t as toConnectedHTMLComponent } from "./component-factory-DeAN6cjC.js";
+import { n as toConnectedHTMLComponent } from "./component-factory-C0cl1nrL.js";
 import { durationDisplayStateDefinition } from "@videojs/core/store";
 import { formatDisplayTime } from "@videojs/utils";
 import { namedNodeMapToObject } from "@videojs/utils/dom";
@@ -35,15 +35,14 @@ var DurationDisplay = class extends HTMLElement {
 		if (spanElement) spanElement.textContent = formatDisplayTime(state.duration);
 	}
 };
-const useDurationDisplayState = {
-	keys: [...durationDisplayStateDefinition.keys],
-	transform: (rawState, _mediaStore) => ({ ...durationDisplayStateDefinition.stateTransform(rawState) })
-};
+function getDurationDisplayState(mediaStore) {
+	return { ...durationDisplayStateDefinition.stateTransform(mediaStore.getState()) };
+}
 const getDurationDisplayProps = (_state, _element) => {
 	return {};
 };
-const DurationDisplayElement = toConnectedHTMLComponent(DurationDisplay, useDurationDisplayState, getDurationDisplayProps, "DurationDisplay");
+const DurationDisplayElement = toConnectedHTMLComponent(DurationDisplay, getDurationDisplayState, getDurationDisplayProps, "DurationDisplay");
 
 //#endregion
 export { DurationDisplayElement as t };
-//# sourceMappingURL=duration-display-JOPp3bdU.js.map
+//# sourceMappingURL=duration-display-BFRQmaOz.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"duration-display-BFRQmaOz.js","names":["getDurationDisplayProps: PropsHook<{\n  duration: number | undefined;\n}>","DurationDisplayElement: ConnectedComponentConstructor<DurationDisplayState>"],"sources":["../src/elements/duration-display.ts"],"sourcesContent":["import type { DurationDisplayState, MediaStore } from '@videojs/core/store';\nimport type { ConnectedComponentConstructor, PropsHook } 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 function getDurationDisplayState(mediaStore: MediaStore): {\n  duration: number | undefined;\n} {\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<{\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  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;;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,SAAgB,wBAAwB,YAEtC;AACA,QAAO,EACL,GAAG,+BAA+B,eAAe,WAAW,UAAU,CAAC,EAExE;;AAGH,MAAaA,2BAEP,QAAQ,aAAa;AAEzB,QADuC,EAAE;;AAI3C,MAAaC,yBAA8E,yBACzF,iBACA,yBACA,yBACA,kBACD"}

package/dist/{fullscreen-button-C1nq8yP-.js → fullscreen-button-B0R9K3GV.js}

@@ -1,4 +1,4 @@
-import { t as toConnectedHTMLComponent } from "./component-factory-DeAN6cjC.js";
+import { n as toConnectedHTMLComponent } from "./component-factory-C0cl1nrL.js";
 import { t as ButtonElement } from "./button-Bu1mGG-F.js";
 import { fullscreenButtonStateDefinition } from "@videojs/core/store";
 import { setAttributes } from "@videojs/utils/dom";
@@ -25,13 +25,12 @@ var FullscreenButton = class extends ButtonElement {
 * 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),
+function getFullscreenButtonState(mediaStore) {
+	return {
+		...fullscreenButtonStateDefinition.stateTransform(mediaStore.getState()),
 		...fullscreenButtonStateDefinition.createRequestMethods(mediaStore.dispatch)
-	})
-};
+	};
+}
 const getFullscreenButtonProps = (state, _element) => {
 	return {
 		"data-fullscreen": state.fullscreen,
@@ -45,4 +44,4 @@ const FullscreenButtonElement = toConnectedHTMLComponent(FullscreenButton, getFu
 
 //#endregion
 export { FullscreenButtonElement as t };
-//# sourceMappingURL=fullscreen-button-C1nq8yP-.js.map
+//# sourceMappingURL=fullscreen-button-B0R9K3GV.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"fullscreen-button-B0R9K3GV.js","names":["getFullscreenButtonProps: PropsHook<{ fullscreen: boolean }>","FullscreenButtonElement: ConnectedComponentConstructor<FullscreenButtonStateWithMethods>"],"sources":["../src/elements/fullscreen-button.ts"],"sourcesContent":["import type { FullscreenButtonState, MediaStore } from '@videojs/core/store';\nimport type { Prettify } from '../types';\nimport type { ConnectedComponentConstructor, PropsHook } 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\ntype FullscreenButtonStateWithMethods = Prettify<FullscreenButtonState & ReturnType<typeof fullscreenButtonStateDefinition.createRequestMethods>>;\n\n/**\n * FullscreenButton state hook - equivalent to React's useFullscreenButtonState\n * Handles media store state subscription and transformation\n */\nexport function getFullscreenButtonState(mediaStore: MediaStore): FullscreenButtonStateWithMethods {\n  return {\n    ...fullscreenButtonStateDefinition.stateTransform(mediaStore.getState()),\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<FullscreenButtonStateWithMethods> = toConnectedHTMLComponent(\n  FullscreenButton,\n  getFullscreenButtonState,\n  getFullscreenButtonProps,\n  'FullscreenButton',\n);\n"],"mappings":";;;;;;AAUA,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;;;;;;;AAU9B,SAAgB,yBAAyB,YAA0D;AACjG,QAAO;EACL,GAAG,gCAAgC,eAAe,WAAW,UAAU,CAAC;EACxE,GAAG,gCAAgC,qBAAqB,WAAW,SAAS;EAC7E;;AAGH,MAAaA,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,0BAA2F,yBACtG,kBACA,0BACA,0BACA,mBACD"}

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import { t as MediaSkinElement } from "./media-skin-Di3vSHvS.js";
-import { CurrentTimeDisplayState, DurationDisplayState, FullscreenButtonState, MediaStore, MuteButtonState, PlayButtonState, PreviewTimeDisplayState } from "@videojs/core/store";
+import { CurrentTimeDisplayState, DurationDisplayState, FullscreenButtonState, MediaStore, MuteButtonState, PlayButtonState, PreviewTimeDisplayState, fullscreenButtonStateDefinition, muteButtonStateDefinition, playButtonStateDefinition } from "@videojs/core/store";
 import { Constructor, CustomElement } from "@open-wc/context-protocol";
 import { TimeSlider, VolumeSlider } from "@videojs/core";
 
@@ -17,16 +17,34 @@ declare const CurrentTimeDisplayElement: ConnectedComponentConstructor<CurrentTi
 
 declare const DurationDisplayElement: ConnectedComponentConstructor<DurationDisplayState>;
 //#endregion
+//#region src/types.d.ts
+declare module '*.css' {
+  const content: string;
+  export default content;
+}
+type Prettify<T> = { [K in keyof T]: T[K] } & {};
+//#endregion
 //#region src/elements/fullscreen-button.d.ts
+type FullscreenButtonStateWithMethods = Prettify<FullscreenButtonState & ReturnType<typeof fullscreenButtonStateDefinition.createRequestMethods>>;
+/**
+* FullscreenButton state hook - equivalent to React's useFullscreenButtonState
+* Handles media store state subscription and transformation
+*/
 
-declare const FullscreenButtonElement: ConnectedComponentConstructor<FullscreenButtonState>;
+declare const FullscreenButtonElement: ConnectedComponentConstructor<FullscreenButtonStateWithMethods>;
 //#endregion
 //#region src/elements/mute-button.d.ts
-
-declare const MuteButtonElement: ConnectedComponentConstructor<MuteButtonState>;
+type MuteButtonStateWithMethods = Prettify<MuteButtonState & ReturnType<typeof muteButtonStateDefinition.createRequestMethods>>;
+declare const MuteButtonElement: ConnectedComponentConstructor<MuteButtonStateWithMethods>;
 //#endregion
 //#region src/elements/play-button.d.ts
-declare const PlayButtonElement: ConnectedComponentConstructor<PlayButtonState>;
+type PlayButtonStateWithMethods = Prettify<PlayButtonState & ReturnType<typeof playButtonStateDefinition.createRequestMethods>>;
+/**
+* PlayButton state hook - equivalent to React's usePlayButtonState
+* Handles media store state subscription and transformation
+*/
+
+declare const PlayButtonElement: ConnectedComponentConstructor<PlayButtonStateWithMethods>;
 //#endregion
 //#region src/elements/popover.d.ts
 type Placement$1 = "top" | "top-start" | "top-end";
@@ -48,13 +66,8 @@ declare class PopoverElement extends HTMLElement {
 declare const PreviewTimeDisplayElement: ConnectedComponentConstructor<PreviewTimeDisplayState>;
 //#endregion
 //#region src/elements/time-slider.d.ts
-
-declare const TimeSliderRootElement: ConnectedComponentConstructor<{
-  currentTime: number;
-  duration: number;
-  requestSeek: (time: number) => void;
-  core: TimeSlider | null;
-}>;
+type TimeSliderState = Prettify<ReturnType<TimeSlider["getState"]>>;
+declare const TimeSliderRootElement: ConnectedComponentConstructor<TimeSliderState>;
 declare const TimeSliderTrackElement: ConnectedComponentConstructor<any>;
 declare const TimeSliderProgressElement: ConnectedComponentConstructor<any>;
 declare const TimeSliderPointerElement: ConnectedComponentConstructor<any>;
@@ -86,32 +99,11 @@ declare class TooltipElement extends HTMLElement {
 }
 //#endregion
 //#region src/elements/volume-slider.d.ts
-
-/**
-* Connected VolumeSlider Root component using hook-style architecture
-*/
-declare const VolumeSliderRootElement: ConnectedComponentConstructor<{
-  volume: number;
-  muted: boolean;
-  volumeLevel: string;
-  requestVolumeChange: (volume: number) => void;
-  core: VolumeSlider | null;
-}>;
-/**
-* Connected VolumeSlider Track component
-*/
+type VolumeSliderState = Prettify<ReturnType<VolumeSlider["getState"]>>;
+declare const VolumeSliderRootElement: ConnectedComponentConstructor<VolumeSliderState>;
 declare const VolumeSliderTrackElement: ConnectedComponentConstructor<any>;
-/**
-* Connected VolumeSlider Progress component
-*/
 declare const VolumeSliderIndicatorElement: ConnectedComponentConstructor<any>;
-/**
-* Connected VolumeSlider Thumb component
-*/
 declare const VolumeSliderThumbElement: ConnectedComponentConstructor<any>;
-/**
-* Compound VolumeSlider component object
-*/
 declare const VolumeSliderElement: {
   Root: typeof VolumeSliderRootElement;
   Track: typeof VolumeSliderTrackElement;

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","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>","useDurationDisplayState: StateHook<{\n  duration: number | undefined;\n}>","getDurationDisplayProps: PropsHook<{\n  duration: number | undefined;\n}>","DurationDisplayElement: ConnectedComponentConstructor<DurationDisplayState>","getFullscreenButtonState: StateHook<{ fullscreen: boolean }>","getFullscreenButtonProps: PropsHook<{ fullscreen: boolean }>","FullscreenButtonElement: ConnectedComponentConstructor<FullscreenButtonState>","getMuteButtonState: StateHook<{\n  muted: boolean;\n  volumeLevel: string;\n}>","getMuteButtonProps: PropsHook<{\n  muted: boolean;\n  volumeLevel: string;\n}>","MuteButtonElement: ConnectedComponentConstructor<MuteButtonState>","getPlayButtonState: StateHook<{ paused: boolean }>","getPlayButtonProps: PropsHook<{ paused: boolean }>","PlayButtonElement: ConnectedComponentConstructor<PlayButtonState>","usePreviewTimeDisplayState: StateHook<{\n  previewTime: number | undefined;\n}>","getPreviewTimeDisplayProps: PropsHook<{\n  previewTime: number | undefined;\n}>","PreviewTimeDisplayElement: ConnectedComponentConstructor<PreviewTimeDisplayState>","getTimeSliderRootProps: PropsHook<{\n  currentTime: number;\n  duration: number;\n  requestSeek: (time: number) => void;\n  core: CoreTimeSlider | null;\n}>","useTimeSliderRootState: StateHook<{\n  currentTime: number;\n  duration: number;\n  requestSeek: (time: number) => void;\n  core: CoreTimeSlider | null;\n}>","getTimeSliderTrackProps: PropsHook<Record<string, never>>","getTimeSliderProgressProps: PropsHook<Record<string, never>>","getTimeSliderPointerProps: PropsHook<Record<string, never>>","getTimeSliderThumbProps: PropsHook<Record<string, never>>","TimeSliderRootElement: ConnectedComponentConstructor<{\n  currentTime: number;\n  duration: number;\n  requestSeek: (time: number) => void;\n  core: CoreTimeSlider | null;\n}>","TimeSliderTrackElement: ConnectedComponentConstructor<any>","TimeSliderProgressElement: ConnectedComponentConstructor<any>","TimeSliderPointerElement: ConnectedComponentConstructor<any>","TimeSliderThumbElement: ConnectedComponentConstructor<any>","getVolumeSliderRootProps: PropsHook<{\n  volume: number;\n  muted: boolean;\n  volumeLevel: string;\n  requestVolumeChange: (volume: number) => void;\n  core: CoreVolumeSlider | null;\n}>","useVolumeSliderRootState: StateHook<{\n  volume: number;\n  muted: boolean;\n  volumeLevel: string;\n  requestVolumeChange: (volume: number) => void;\n  core: CoreVolumeSlider | null;\n}>","getVolumeSliderTrackProps: PropsHook<Record<string, never>>","getVolumeSliderProgressProps: PropsHook<Record<string, never>>","getVolumeSliderThumbProps: PropsHook<Record<string, never>>","VolumeSliderRootElement: ConnectedComponentConstructor<{\n  volume: number;\n  muted: boolean;\n  volumeLevel: string;\n  requestVolumeChange: (volume: number) => void;\n  core: CoreVolumeSlider | null;\n}>","VolumeSliderTrackElement: ConnectedComponentConstructor<any>","VolumeSliderIndicatorElement: ConnectedComponentConstructor<any>","VolumeSliderThumbElement: ConnectedComponentConstructor<any>","CustomElementConsumer: Constructor<CustomElement & HTMLElement>","ProviderHTMLElement: Constructor<CustomElement & HTMLElement>"],"sources":["../src/utils/component-factory.ts","../src/elements/current-time-display.ts","../src/elements/duration-display.ts","../src/elements/fullscreen-button.ts","../src/elements/mute-button.ts","../src/elements/play-button.ts","../src/elements/popover.ts","../src/elements/preview-time-display.ts","../src/elements/time-slider.ts","../src/elements/tooltip.ts","../src/elements/volume-slider.ts","../src/media/media-container.ts","../src/media/video-provider.ts"],"sourcesContent":[],"mappings":";;;;;;;UAaiB;cACH,QAAQ;AE+DtB;;;;AGbac,cJmBAZ,yBInBiD,EJmBtB,6BInBR,CJmBsC,uBInBtC,CAAA;;;;cHanBG,wBAAwB,8BAA8B;;;;cCHtDG,yBAAyB,8BAA8B;;;;cCWvDG,mBAAmB,8BAA8B;;;cCrBjDG,mBAAmB,8BAA8B;;;KC9DzD,WAAA;cAEQ,cAAA,SAAuB,WAAA;;;;;ENSpC,oBAAiB,CAAA,CAAA,EAAA,IAAA;qBM4CI;;;EL0BrB,IAAaZ,UAAAA,CAAAA,CAAAA,EAAAA,MAAAA;cKQC;;;;;AFNDS,cGZAM,yBHYiD,EGZtB,6BHYR,CGZsC,uBHYtC,CAAA;;;;cI4JnBO,uBAAuB;;UCzO/B,EAAA,MAAA;EAEL,WAAa,EAAA,CAAA,IAAA,EAAA,MAAA,EAAA,GAAA,IAAA;EAgEQ,IAAA,ED2Kb,UC3Ka,GAAA,IAAA;CA6BP,CAAA;AA7FsB,cD8OvBC,sBC9OuB,ED8OC,6BC9OD,CAAA,GAAA,CAAA;AAAA,cDqPvBC,yBCrPuB,EDqPI,6BCrPJ,CAAA,GAAA,CAAA;cD4PvBC,0BAA0B;cAO1BC,wBAAwB;cAOxB;EExCb,IAAaM,EAAAA,OFkDE,qBElDFA;EAWb,KAAaC,EAAAA,OFwCG,sBExCuB;EAUvC,QAAaC,EAAAA,OF+BM,yBE/BwB;EAU3C,OAAaC,EAAAA,OFsBK,wBEtBqB;EAUvC,KAAa,EAAA,OFaG,sBEbH;CASE;;;KDtRV,SAAA;cAEQ,cAAA,SAAuB,WAAA;;;;;ETGpC,iBAAiB,CAAA,CAAA,EAAA,IAAA;;qBS6DI;;ERSrB,IAAanC,UAAAA,CAAAA,CAAAA,EAAAA,MAAAA;;cQoBC;;EP1Bd,IAAaG,gBAAAA,CAAAA,CAAAA,EAAAA,MAAsD;;;;;ASzEnD;;;AAOa,cDiOhB6B,uBCjOgB,EDiOS,6BCjOT,CAAA;EAAA,MAAA,EAAA,MAAA;EAE7B,KAAa,EAAA,OAAA;EACkC,WAAA,EAAA,MAAA;EAIjC,mBAAA,EAAA,CAAA,MAAA,EAAA,MAAA,EAAA,GAAA,IAAA;EAmDW,IAAA,ED4KjB,YC5KiB,GAAA,IAAA;CAxDkB,CAAA;;;;cD0O9BC,0BAA0B;AEtPP;;;AAKL,cF2PdC,4BE3Pc,EF2PgB,6BE3PhB,CAAA,GAAA,CAAA;;AAE3B;;cFmQaC,0BAA0B;;;;cAU1B;eASE;gBACC;oBACI;gBACJ;;;;cCtRVC,uBAAuB,YAAY,gBAAgB;cAE5C,qBAAA,SAA8B,qBAAA;;UACI;EXD/C,CAAA;;;cWKc;EViEd,OAAapC,EAAAA,OAAAA;;;;ECNb,WAAaG,CAAAA;;;;ECHb,8BAAoE,EAAA,GAAA,GAAA,IAAA;;wBQL3C;;APgBzB;;;cQ/EMkC,qBAAqB,YAAY,gBAAgB;cAE1C,oBAAA,SAA6B,mBAAA;;sBAEtB;EZGpB,CAAA"}
+{"version":3,"file":"index.d.ts","names":["getCurrentTimeDisplayProps: PropsHook<{\n  currentTime: number | undefined;\n  duration: number | undefined;\n}>","CurrentTimeDisplayElement: ConnectedComponentConstructor<CurrentTimeDisplayState>","getDurationDisplayProps: PropsHook<{\n  duration: number | undefined;\n}>","DurationDisplayElement: ConnectedComponentConstructor<DurationDisplayState>","Prettify","T","K","getFullscreenButtonProps: PropsHook<{ fullscreen: boolean }>","FullscreenButtonElement: ConnectedComponentConstructor<FullscreenButtonStateWithMethods>","getMuteButtonProps: PropsHook<{\n  muted: boolean;\n  volumeLevel: string;\n}>","MuteButtonElement: ConnectedComponentConstructor<MuteButtonStateWithMethods>","getPlayButtonProps: PropsHook<{ paused: boolean }>","PlayButtonElement: ConnectedComponentConstructor<PlayButtonStateWithMethods>","getPreviewTimeDisplayProps: PropsHook<{\n  previewTime: number | undefined;\n}>","PreviewTimeDisplayElement: ConnectedComponentConstructor<PreviewTimeDisplayState>","getTimeSliderRootProps: PropsHook<TimeSliderState>","TimeSliderRootElement: ConnectedComponentConstructor<TimeSliderState>","getTimeSliderTrackProps: PropsHook<Record<string, never>>","TimeSliderTrackElement: ConnectedComponentConstructor<any>","getTimeSliderProgressProps: PropsHook<Record<string, never>>","TimeSliderProgressElement: ConnectedComponentConstructor<any>","getTimeSliderPointerProps: PropsHook<Record<string, never>>","TimeSliderPointerElement: ConnectedComponentConstructor<any>","getTimeSliderThumbProps: PropsHook<Record<string, never>>","TimeSliderThumbElement: ConnectedComponentConstructor<any>","getVolumeSliderRootProps: PropsHook<VolumeSliderState>","VolumeSliderRootElement: ConnectedComponentConstructor<VolumeSliderState>","getVolumeSliderTrackProps: PropsHook<Record<string, never>>","VolumeSliderTrackElement: ConnectedComponentConstructor<any>","getVolumeSliderIndicatorProps: PropsHook<Record<string, never>>","VolumeSliderIndicatorElement: ConnectedComponentConstructor<any>","getVolumeSliderThumbProps: PropsHook<Record<string, never>>","VolumeSliderThumbElement: ConnectedComponentConstructor<any>","CustomElementConsumer: Constructor<CustomElement & HTMLElement>","ProviderHTMLElement: Constructor<CustomElement & HTMLElement>"],"sources":["../src/utils/component-factory.ts","../src/elements/current-time-display.ts","../src/elements/duration-display.ts","../src/types.d.ts","../src/elements/fullscreen-button.ts","../src/elements/mute-button.ts","../src/elements/play-button.ts","../src/elements/popover.ts","../src/elements/preview-time-display.ts","../src/elements/time-slider.ts","../src/elements/tooltip.ts","../src/elements/volume-slider.ts","../src/media/media-container.ts","../src/media/video-provider.ts"],"sourcesContent":["declare module '*.css' {\n  const content: string;\n  export default content;\n}\n\nexport type Prettify<T> = {\n  [K in keyof T]: T[K];\n} & {};\n"],"mappings":";;;;;;;ACkFaC,UDvEI,6BCuEqD,CAAA,KAAA,CAAA,CAAA;cDtExD,QAAQ;;;;;AGNFK,cF4EPL,yBE5EOK,EF4EoB,6BE5EpBA,CF4EkD,uBE5ElDA,CAAAA;;;;cDsEPH,wBAAwB,8BAA8B;;;;;;;KCvEvDC,sBHMK,MGLHC,CHKG,GGLCA,CHKD,CGLGC,CHKH,CAAA;;;KIiCZ,gCAAA,GAAmC,SAAS,wBAAwB,kBAAkB,+BAAA,CAAgC;;;;;;ADtC7GD,cCsEDG,uBDtECH,ECsEwB,6BDtExBA,CCsEsD,gCDtEtDA,CAAAA;;;KE8CT,0BAAA,GAA6B,SAAS,kBAAkB,kBAAkB,yBAAA,CAA0B;AF/C7FD,cE+ECM,iBF/EO,EE+EY,6BF/EZ,CE+E0C,0BF/E1C,CAAA;;;KGiCf,0BAAA,GAA6B,SAAS,kBAAkB,kBAAkB,yBAAA,CAA0B;;;;;;AHhC3FL,cGgEDO,iBHhECP,EGgEkB,6BHhElBA,CGgEgD,0BHhEhDA,CAAAA;;;KIJT,WAAA;cAEQ,cAAA,SAAuB,WAAA;;;;;EPOpC,oBAAiB,CAAA,CAAA,EAAA,IAAA;qBO8CI;;;ENyBrB,IAAaJ,UAAAA,CAAAA,CAAAA,EAAAA,MAAAA;cMSC;;;;;cCnBDa,2BAA2B,8BAA8B;;;KC9DjE,eAAA,GAAkB,SAAS,WAAW;cA6E9BE,uBAAuB,8BAA8B;ANjFhDX,cMuHLa,sBNvHKb,EMuHmB,6BNvHnBA,CAAAA,GAAAA,CAAAA;ACsCb,cK4HQe,yBL5HR,EK4HmC,6BL5HnC,CAAA,GAAA,CAAA;AAgCQZ,cKuIAc,wBLvIuD,EKuI7B,6BLvID,CAAA,GAAA,CAAA;ACxByC,cIuMlEE,sBJvM4F,EIuMpE,6BJvMoE,CAAA,GAAA,CAAA;AAA5C,cIkNhD,iBJlNgD,EAAA;EAA3B,IAAA,EAAA,OI4NnB,qBJ5NmB;EAAA,KAAA,EAAA,OI6NlB,sBJ7NkB;EAgClC,QAAad,EAAAA,OI8LM,yBJ9L2C;kBI+L5C;gBACF;;;;KC5QX,SAAA;cAEQ,cAAA,SAAuB,WAAA;;;;;EVCpC,iBAAiB,CAAA,CAAA,EAAA,IAAA;;qBU+DI;;ETQrB,IAAaT,UAAAA,CAAAA,CAAAA,EAAAA,MAAAA;;cSqBC;;ER3Bd,IAAaE,gBAAAA,CAAAA,CAAAA,EAAAA,MAAsD;;;;KSlE9D,iBAAA,GAAoB,SAAS,WAAW;cAkFhCuB,yBAAyB,8BAA8B;ARtFhDpB,cQ4HPsB,wBR5HOtB,EQ4HmB,6BR5HnBA,CAAAA,GAAAA,CAAAA;ACsC6B,cOiIpCwB,4BPjIoC,EOiIN,6BPjIM,CAAA,GAAA,CAAA;cOyKpCE,0BAA0B;cAW1B;eASE;ONrLV,EAAA,OMsLW,wBNtLX;EAAsC,SAAA,EAAA,OMuLvB,4BNvLuB;EAAoC,KAAA,EAAA,OMwL/D,wBNxLyF;CAA5C;;;cOzCvDC,uBAAuB,YAAY,gBAAgB;cAE5C,qBAAA,SAA8B,qBAAA;;UACI;EZH/C,CAAA;;;cYOc;EXgEd,OAAahC,EAAAA,OAAAA;;;;ECNb,WAAaE,CAAAA;;;;;;wBUPY;;;;;cC/DnB+B,qBAAqB,YAAY,gBAAgB;cAE1C,oBAAA,SAA6B,mBAAA;;sBAEtB;EbCpB,CAAA"}

package/dist/index.js

@@ -1,15 +1,15 @@
-import "./component-factory-DeAN6cjC.js";
-import { t as CurrentTimeDisplayElement } from "./current-time-display-C3qndGf5.js";
-import { t as DurationDisplayElement } from "./duration-display-JOPp3bdU.js";
+import "./component-factory-C0cl1nrL.js";
+import { t as CurrentTimeDisplayElement } from "./current-time-display-DpoDrQu9.js";
+import { t as DurationDisplayElement } from "./duration-display-BFRQmaOz.js";
 import "./button-Bu1mGG-F.js";
-import { t as FullscreenButtonElement } from "./fullscreen-button-C1nq8yP-.js";
-import { t as MuteButtonElement } from "./mute-button-BSDoCZs3.js";
-import { t as PlayButtonElement } from "./play-button-gaqIKsrv.js";
+import { t as FullscreenButtonElement } from "./fullscreen-button-B0R9K3GV.js";
+import { t as MuteButtonElement } from "./mute-button-C7XQB6iK.js";
+import { t as PlayButtonElement } from "./play-button-DFbxwrrq.js";
 import { t as PopoverElement } from "./popover-BUCVOjnO.js";
-import { t as PreviewTimeDisplayElement } from "./preview-time-display-Dax0FQ2X.js";
-import { t as TimeSliderElement } from "./time-slider-DKamO_2Q.js";
+import { t as PreviewTimeDisplayElement } from "./preview-time-display-CtA58pCS.js";
+import { t as TimeSliderElement } from "./time-slider-DHpKPCI1.js";
 import { t as TooltipElement } from "./tooltip-B-glki2f.js";
-import { t as VolumeSliderElement } from "./volume-slider-CbFzCHX4.js";
+import { t as VolumeSliderElement } from "./volume-slider-CUyfwehe.js";
 import { t as MediaContainerElement } from "./media-container-BOL0PKuG.js";
 import { t as MediaSkinElement } from "./media-skin-CxnuHwhu.js";
 import { t as VideoProviderElement } from "./video-provider-BKDqoKFf.js";

package/dist/{media-current-time-display-B-4Cp845.js → media-current-time-display-DVCqNt7c.js}

@@ -1,8 +1,8 @@
-import { t as CurrentTimeDisplayElement } from "./current-time-display-C3qndGf5.js";
+import { t as CurrentTimeDisplayElement } from "./current-time-display-DpoDrQu9.js";
 import { t as defineCustomElement } from "./custom-element-3bDlB2XO.js";
 
 //#region src/define/media-current-time-display.ts
 defineCustomElement("media-current-time-display", CurrentTimeDisplayElement);
 
 //#endregion
-//# sourceMappingURL=media-current-time-display-B-4Cp845.js.map
+//# sourceMappingURL=media-current-time-display-DVCqNt7c.js.map

package/dist/{media-current-time-display-B-4Cp845.js.map → media-current-time-display-DVCqNt7c.js.map}

@@ -1 +1 @@
-{"version":3,"file":"media-current-time-display-B-4Cp845.js","names":[],"sources":["../src/define/media-current-time-display.ts"],"sourcesContent":["import { CurrentTimeDisplayElement } from '@/elements/current-time-display';\nimport { defineCustomElement } from '@/utils/custom-element';\n\ndefineCustomElement('media-current-time-display', CurrentTimeDisplayElement);\n"],"mappings":";;;;AAGA,oBAAoB,8BAA8B,0BAA0B"}
+{"version":3,"file":"media-current-time-display-DVCqNt7c.js","names":[],"sources":["../src/define/media-current-time-display.ts"],"sourcesContent":["import { CurrentTimeDisplayElement } from '@/elements/current-time-display';\nimport { defineCustomElement } from '@/utils/custom-element';\n\ndefineCustomElement('media-current-time-display', CurrentTimeDisplayElement);\n"],"mappings":";;;;AAGA,oBAAoB,8BAA8B,0BAA0B"}

package/dist/{media-duration-display-BLMr7VHo.js → media-duration-display-tzVLafRm.js}

@@ -1,8 +1,8 @@
-import { t as DurationDisplayElement } from "./duration-display-JOPp3bdU.js";
+import { t as DurationDisplayElement } from "./duration-display-BFRQmaOz.js";
 import { t as defineCustomElement } from "./custom-element-3bDlB2XO.js";
 
 //#region src/define/media-duration-display.ts
 defineCustomElement("media-duration-display", DurationDisplayElement);
 
 //#endregion
-//# sourceMappingURL=media-duration-display-BLMr7VHo.js.map
+//# sourceMappingURL=media-duration-display-tzVLafRm.js.map

package/dist/{media-duration-display-BLMr7VHo.js.map → media-duration-display-tzVLafRm.js.map}

@@ -1 +1 @@
-{"version":3,"file":"media-duration-display-BLMr7VHo.js","names":[],"sources":["../src/define/media-duration-display.ts"],"sourcesContent":["import { DurationDisplayElement } from '@/elements/duration-display';\nimport { defineCustomElement } from '@/utils/custom-element';\n\ndefineCustomElement('media-duration-display', DurationDisplayElement);\n"],"mappings":";;;;AAGA,oBAAoB,0BAA0B,uBAAuB"}
+{"version":3,"file":"media-duration-display-tzVLafRm.js","names":[],"sources":["../src/define/media-duration-display.ts"],"sourcesContent":["import { DurationDisplayElement } from '@/elements/duration-display';\nimport { defineCustomElement } from '@/utils/custom-element';\n\ndefineCustomElement('media-duration-display', DurationDisplayElement);\n"],"mappings":";;;;AAGA,oBAAoB,0BAA0B,uBAAuB"}

package/dist/{media-fullscreen-button-CIpcLhtU.js → media-fullscreen-button-DDQ6EdLz.js}

@@ -1,8 +1,8 @@
-import { t as FullscreenButtonElement } from "./fullscreen-button-C1nq8yP-.js";
+import { t as FullscreenButtonElement } from "./fullscreen-button-B0R9K3GV.js";
 import { t as defineCustomElement } from "./custom-element-3bDlB2XO.js";
 
 //#region src/define/media-fullscreen-button.ts
 defineCustomElement("media-fullscreen-button", FullscreenButtonElement);
 
 //#endregion
-//# sourceMappingURL=media-fullscreen-button-CIpcLhtU.js.map
+//# sourceMappingURL=media-fullscreen-button-DDQ6EdLz.js.map

package/dist/{media-fullscreen-button-CIpcLhtU.js.map → media-fullscreen-button-DDQ6EdLz.js.map}

@@ -1 +1 @@
-{"version":3,"file":"media-fullscreen-button-CIpcLhtU.js","names":[],"sources":["../src/define/media-fullscreen-button.ts"],"sourcesContent":["import { FullscreenButtonElement } from '@/elements/fullscreen-button';\nimport { defineCustomElement } from '@/utils/custom-element';\n\ndefineCustomElement('media-fullscreen-button', FullscreenButtonElement);\n"],"mappings":";;;;AAGA,oBAAoB,2BAA2B,wBAAwB"}
+{"version":3,"file":"media-fullscreen-button-DDQ6EdLz.js","names":[],"sources":["../src/define/media-fullscreen-button.ts"],"sourcesContent":["import { FullscreenButtonElement } from '@/elements/fullscreen-button';\nimport { defineCustomElement } from '@/utils/custom-element';\n\ndefineCustomElement('media-fullscreen-button', FullscreenButtonElement);\n"],"mappings":";;;;AAGA,oBAAoB,2BAA2B,wBAAwB"}

package/dist/{media-mute-button-CHHISH91.js → media-mute-button-Uy18NpPx.js}

@@ -1,8 +1,8 @@
-import { t as MuteButtonElement } from "./mute-button-BSDoCZs3.js";
+import { t as MuteButtonElement } from "./mute-button-C7XQB6iK.js";
 import { t as defineCustomElement } from "./custom-element-3bDlB2XO.js";
 
 //#region src/define/media-mute-button.ts
 defineCustomElement("media-mute-button", MuteButtonElement);
 
 //#endregion
-//# sourceMappingURL=media-mute-button-CHHISH91.js.map
+//# sourceMappingURL=media-mute-button-Uy18NpPx.js.map

package/dist/{media-mute-button-CHHISH91.js.map → media-mute-button-Uy18NpPx.js.map}

@@ -1 +1 @@
-{"version":3,"file":"media-mute-button-CHHISH91.js","names":[],"sources":["../src/define/media-mute-button.ts"],"sourcesContent":["import { MuteButtonElement } from '@/elements/mute-button';\nimport { defineCustomElement } from '@/utils/custom-element';\n\ndefineCustomElement('media-mute-button', MuteButtonElement);\n"],"mappings":";;;;AAGA,oBAAoB,qBAAqB,kBAAkB"}
+{"version":3,"file":"media-mute-button-Uy18NpPx.js","names":[],"sources":["../src/define/media-mute-button.ts"],"sourcesContent":["import { MuteButtonElement } from '@/elements/mute-button';\nimport { defineCustomElement } from '@/utils/custom-element';\n\ndefineCustomElement('media-mute-button', MuteButtonElement);\n"],"mappings":";;;;AAGA,oBAAoB,qBAAqB,kBAAkB"}

package/dist/{media-play-button-DhSK0JQk.js → media-play-button-CDBZrhmx.js}

@@ -1,8 +1,8 @@
-import { t as PlayButtonElement } from "./play-button-gaqIKsrv.js";
+import { t as PlayButtonElement } from "./play-button-DFbxwrrq.js";
 import { t as defineCustomElement } from "./custom-element-3bDlB2XO.js";
 
 //#region src/define/media-play-button.ts
 defineCustomElement("media-play-button", PlayButtonElement);
 
 //#endregion
-//# sourceMappingURL=media-play-button-DhSK0JQk.js.map
+//# sourceMappingURL=media-play-button-CDBZrhmx.js.map

package/dist/{media-play-button-DhSK0JQk.js.map → media-play-button-CDBZrhmx.js.map}

@@ -1 +1 @@
-{"version":3,"file":"media-play-button-DhSK0JQk.js","names":[],"sources":["../src/define/media-play-button.ts"],"sourcesContent":["import { PlayButtonElement } from '@/elements/play-button';\nimport { defineCustomElement } from '@/utils/custom-element';\n\ndefineCustomElement('media-play-button', PlayButtonElement);\n"],"mappings":";;;;AAGA,oBAAoB,qBAAqB,kBAAkB"}
+{"version":3,"file":"media-play-button-CDBZrhmx.js","names":[],"sources":["../src/define/media-play-button.ts"],"sourcesContent":["import { PlayButtonElement } from '@/elements/play-button';\nimport { defineCustomElement } from '@/utils/custom-element';\n\ndefineCustomElement('media-play-button', PlayButtonElement);\n"],"mappings":";;;;AAGA,oBAAoB,qBAAqB,kBAAkB"}

package/dist/{media-preview-time-display-DAiMgLPX.js → media-preview-time-display-ufqXiNXg.js}

@@ -1,8 +1,8 @@
-import { t as PreviewTimeDisplayElement } from "./preview-time-display-Dax0FQ2X.js";
+import { t as PreviewTimeDisplayElement } from "./preview-time-display-CtA58pCS.js";
 import { t as defineCustomElement } from "./custom-element-3bDlB2XO.js";
 
 //#region src/define/media-preview-time-display.ts
 defineCustomElement("media-preview-time-display", PreviewTimeDisplayElement);
 
 //#endregion
-//# sourceMappingURL=media-preview-time-display-DAiMgLPX.js.map
+//# sourceMappingURL=media-preview-time-display-ufqXiNXg.js.map

package/dist/{media-preview-time-display-DAiMgLPX.js.map → media-preview-time-display-ufqXiNXg.js.map}

@@ -1 +1 @@
-{"version":3,"file":"media-preview-time-display-DAiMgLPX.js","names":[],"sources":["../src/define/media-preview-time-display.ts"],"sourcesContent":["import { PreviewTimeDisplayElement } from '@/elements/preview-time-display';\nimport { defineCustomElement } from '@/utils/custom-element';\n\ndefineCustomElement('media-preview-time-display', PreviewTimeDisplayElement);\n"],"mappings":";;;;AAGA,oBAAoB,8BAA8B,0BAA0B"}
+{"version":3,"file":"media-preview-time-display-ufqXiNXg.js","names":[],"sources":["../src/define/media-preview-time-display.ts"],"sourcesContent":["import { PreviewTimeDisplayElement } from '@/elements/preview-time-display';\nimport { defineCustomElement } from '@/utils/custom-element';\n\ndefineCustomElement('media-preview-time-display', PreviewTimeDisplayElement);\n"],"mappings":";;;;AAGA,oBAAoB,8BAA8B,0BAA0B"}

package/dist/{media-time-slider-SuxR3Rep.js → media-time-slider-BOdJr4QE.js}

@@ -1,4 +1,4 @@
-import { a as TimeSliderThumbElement, i as TimeSliderRootElement, n as TimeSliderPointerElement, o as TimeSliderTrackElement, r as TimeSliderProgressElement } from "./time-slider-DKamO_2Q.js";
+import { a as TimeSliderThumbElement, i as TimeSliderRootElement, n as TimeSliderPointerElement, o as TimeSliderTrackElement, r as TimeSliderProgressElement } from "./time-slider-DHpKPCI1.js";
 import { t as defineCustomElement } from "./custom-element-3bDlB2XO.js";
 
 //#region src/define/media-time-slider.ts
@@ -9,4 +9,4 @@ defineCustomElement("media-time-slider-pointer", TimeSliderPointerElement);
 defineCustomElement("media-time-slider-thumb", TimeSliderThumbElement);
 
 //#endregion
-//# sourceMappingURL=media-time-slider-SuxR3Rep.js.map
+//# sourceMappingURL=media-time-slider-BOdJr4QE.js.map

package/dist/{media-time-slider-SuxR3Rep.js.map → media-time-slider-BOdJr4QE.js.map}

@@ -1 +1 @@
-{"version":3,"file":"media-time-slider-SuxR3Rep.js","names":[],"sources":["../src/define/media-time-slider.ts"],"sourcesContent":["import { TimeSliderPointerElement, TimeSliderProgressElement, TimeSliderRootElement, TimeSliderThumbElement, TimeSliderTrackElement } from '@/elements/time-slider';\nimport { defineCustomElement } from '@/utils/custom-element';\n\ndefineCustomElement('media-time-slider', TimeSliderRootElement);\ndefineCustomElement('media-time-slider-track', TimeSliderTrackElement);\ndefineCustomElement('media-time-slider-progress', TimeSliderProgressElement);\ndefineCustomElement('media-time-slider-pointer', TimeSliderPointerElement);\ndefineCustomElement('media-time-slider-thumb', TimeSliderThumbElement);\n"],"mappings":";;;;AAGA,oBAAoB,qBAAqB,sBAAsB;AAC/D,oBAAoB,2BAA2B,uBAAuB;AACtE,oBAAoB,8BAA8B,0BAA0B;AAC5E,oBAAoB,6BAA6B,yBAAyB;AAC1E,oBAAoB,2BAA2B,uBAAuB"}
+{"version":3,"file":"media-time-slider-BOdJr4QE.js","names":[],"sources":["../src/define/media-time-slider.ts"],"sourcesContent":["import { TimeSliderPointerElement, TimeSliderProgressElement, TimeSliderRootElement, TimeSliderThumbElement, TimeSliderTrackElement } from '@/elements/time-slider';\nimport { defineCustomElement } from '@/utils/custom-element';\n\ndefineCustomElement('media-time-slider', TimeSliderRootElement);\ndefineCustomElement('media-time-slider-track', TimeSliderTrackElement);\ndefineCustomElement('media-time-slider-progress', TimeSliderProgressElement);\ndefineCustomElement('media-time-slider-pointer', TimeSliderPointerElement);\ndefineCustomElement('media-time-slider-thumb', TimeSliderThumbElement);\n"],"mappings":";;;;AAGA,oBAAoB,qBAAqB,sBAAsB;AAC/D,oBAAoB,2BAA2B,uBAAuB;AACtE,oBAAoB,8BAA8B,0BAA0B;AAC5E,oBAAoB,6BAA6B,yBAAyB;AAC1E,oBAAoB,2BAA2B,uBAAuB"}