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

package/dist/volume-slider-guD8gqpi.js

@@ -0,0 +1,206 @@
+import { t as toConnectedHTMLComponent } from "./component-factory-DeAN6cjC.js";
+import { volumeSliderStateDefinition } from "@videojs/core/store";
+import { setAttributes } from "@videojs/utils/dom";
+import { VolumeSlider } from "@videojs/core";
+
+//#region src/elements/volume-slider.ts
+/**
+* VolumeSlider Root props hook - equivalent to React's useVolumeSliderRootProps
+* Handles element attributes and properties based on state
+*/
+const getVolumeSliderRootProps = (state, element) => {
+	const volumeText = `${Math.round(state.muted ? 0 : state.volume * 100)}%`;
+	return {
+		role: "slider",
+		tabindex: element.getAttribute("tabindex") ?? "0",
+		"data-muted": state.muted.toString(),
+		"data-volume-level": state.volumeLevel,
+		"data-orientation": element.orientation || "horizontal",
+		"aria-label": "Volume",
+		"aria-valuemin": "0",
+		"aria-valuemax": "100",
+		"aria-valuetext": volumeText,
+		"aria-orientation": element.orientation || "horizontal"
+	};
+};
+var VolumeSliderRoot = class extends HTMLElement {
+	constructor(..._args) {
+		super(..._args);
+		this._core = null;
+	}
+	static {
+		this.observedAttributes = ["orientation"];
+	}
+	get volume() {
+		return this._state?.volume;
+	}
+	get muted() {
+		return this._state?.muted ?? false;
+	}
+	get volumeLevel() {
+		return this._state?.volumeLevel ?? "high";
+	}
+	get orientation() {
+		return this.getAttribute("orientation") || "horizontal";
+	}
+	attributeChangedCallback(name, _oldValue, _newValue) {
+		if (name === "orientation" && this._state) this._render(getVolumeSliderRootProps(this._state, this), this._state);
+	}
+	_update(_props, state) {
+		this._state = state;
+		if (state && !this._core) {
+			this._core = new VolumeSlider();
+			this._core.subscribe(() => this._render(getVolumeSliderRootProps(state, this), state));
+			this._core.attach(this);
+			state.core = this._core;
+		}
+		this._core?.setState(state);
+	}
+	_render(props, state) {
+		const coreState = state?.core?.getState();
+		if (!coreState) return;
+		this.style.setProperty("--slider-fill", `${coreState._fillWidth.toFixed(3)}%`);
+		this.style.setProperty("--slider-pointer", `${coreState._pointerWidth.toFixed(3)}%`);
+		props["aria-valuenow"] = coreState._fillWidth.toString();
+		setAttributes(this, props);
+	}
+};
+/**
+* VolumeSlider Track component - Track element that captures pointer events
+*/
+var VolumeSliderTrack = class extends HTMLElement {
+	constructor() {
+		super();
+	}
+	connectedCallback() {
+		const rootElement = this.closest("media-volume-slider");
+		if (rootElement?._state?.core) rootElement._state.core.setState({ _trackElement: this });
+	}
+	_update(props, _state) {
+		setAttributes(this, props);
+		if (props["data-orientation"] === "horizontal") {
+			this.style.width = "100%";
+			this.style.removeProperty("height");
+		} else {
+			this.style.height = "100%";
+			this.style.removeProperty("width");
+		}
+	}
+};
+/**
+* VolumeSlider Progress component - Shows current progress
+*/
+var VolumeSliderIndicatorElement = class extends HTMLElement {
+	constructor() {
+		super();
+		this.style.position = "absolute";
+		this.style.width = "var(--slider-fill, 0%)";
+		this.style.height = "100%";
+	}
+	_update(props, _state) {
+		setAttributes(this, props);
+		if (props["data-orientation"] === "horizontal") {
+			this.style.width = "var(--slider-fill, 0%)";
+			this.style.height = "100%";
+			this.style.top = "0";
+			this.style.removeProperty("bottom");
+		} else {
+			this.style.height = "var(--slider-fill, 0%)";
+			this.style.width = "100%";
+			this.style.bottom = "0";
+			this.style.removeProperty("top");
+		}
+	}
+};
+/**
+* VolumeSlider Thumb component - Draggable thumb element
+*/
+var VolumeSliderThumb = class extends HTMLElement {
+	constructor() {
+		super();
+		this.style.position = "absolute";
+	}
+	_update(props, _state) {
+		setAttributes(this, props);
+		if (props["data-orientation"] === "horizontal") {
+			this.style.left = "var(--slider-fill, 0%)";
+			this.style.top = "50%";
+			this.style.translate = "-50% -50%";
+		} else {
+			this.style.bottom = "var(--slider-fill, 0%)";
+			this.style.left = "50%";
+			this.style.translate = "-50% 50%";
+		}
+	}
+};
+/**
+* VolumeSlider Root state hook - equivalent to React's useVolumeSliderRootState
+* Handles media store state subscription and transformation
+*/
+const useVolumeSliderRootState = {
+	keys: volumeSliderStateDefinition.keys,
+	transform: (rawState, mediaStore) => ({
+		...volumeSliderStateDefinition.stateTransform(rawState),
+		...volumeSliderStateDefinition.createRequestMethods(mediaStore.dispatch),
+		core: null
+	})
+};
+/**
+* VolumeSlider Track props hook
+*/
+const getVolumeSliderTrackProps = (_state, element) => {
+	const rootElement = element.closest("media-volume-slider");
+	return { "data-orientation": rootElement?.orientation || "horizontal" };
+};
+/**
+* VolumeSlider Progress props hook
+*/
+const getVolumeSliderProgressProps = (_state, element) => {
+	const rootElement = element.closest("media-volume-slider");
+	return { "data-orientation": rootElement?.orientation || "horizontal" };
+};
+/**
+* VolumeSlider Thumb props hook
+*/
+const getVolumeSliderThumbProps = (_state, element) => {
+	const rootElement = element.closest("media-volume-slider");
+	return { "data-orientation": rootElement?.orientation || "horizontal" };
+};
+/**
+* Connected VolumeSlider Root component using hook-style architecture
+*/
+const VolumeSliderRootElement = toConnectedHTMLComponent(VolumeSliderRoot, useVolumeSliderRootState, getVolumeSliderRootProps, "VolumeSliderRoot");
+/**
+* Connected VolumeSlider Track component
+*/
+const VolumeSliderTrackElement = toConnectedHTMLComponent(VolumeSliderTrack, {
+	keys: [],
+	transform: () => ({})
+}, getVolumeSliderTrackProps, "VolumeSliderTrack");
+/**
+* Connected VolumeSlider Progress component
+*/
+const VolumeSliderProgressElement = toConnectedHTMLComponent(VolumeSliderIndicatorElement, {
+	keys: [],
+	transform: () => ({})
+}, getVolumeSliderProgressProps, "VolumeSliderProgress");
+/**
+* Connected VolumeSlider Thumb component
+*/
+const VolumeSliderThumbElement = toConnectedHTMLComponent(VolumeSliderThumb, {
+	keys: [],
+	transform: () => ({})
+}, getVolumeSliderThumbProps, "VolumeSliderThumb");
+/**
+* Compound VolumeSlider component object
+*/
+const VolumeSliderElement = Object.assign({}, {
+	Root: VolumeSliderRootElement,
+	Track: VolumeSliderTrackElement,
+	Progress: VolumeSliderProgressElement,
+	Thumb: VolumeSliderThumbElement
+});
+
+//#endregion
+export { VolumeSliderTrackElement as a, VolumeSliderThumbElement as i, VolumeSliderIndicatorElement as n, VolumeSliderRootElement as r, VolumeSliderElement as t };
+//# sourceMappingURL=volume-slider-guD8gqpi.js.map

package/dist/volume-slider-guD8gqpi.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"volume-slider-guD8gqpi.js","names":["getVolumeSliderRootProps: PropsHook<{\n  volume: number;\n  muted: boolean;\n  volumeLevel: string;\n  requestVolumeChange: (volume: number) => void;\n  core: CoreVolumeSlider | null;\n}>","CoreVolumeSlider","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>","VolumeSliderProgressElement: ConnectedComponentConstructor<any>","VolumeSliderThumbElement: ConnectedComponentConstructor<any>"],"sources":["../src/elements/volume-slider.ts"],"sourcesContent":["import type { ConnectedComponentConstructor, PropsHook, StateHook } from '../utils/component-factory';\n\nimport { VolumeSlider as CoreVolumeSlider } from '@videojs/core';\nimport { volumeSliderStateDefinition } from '@videojs/core/store';\n\nimport { setAttributes } from '@videojs/utils/dom';\nimport { toConnectedHTMLComponent } from '../utils/component-factory';\n\n/**\n * VolumeSlider Root props hook - equivalent to React's useVolumeSliderRootProps\n * Handles element attributes and properties based on state\n */\nexport const getVolumeSliderRootProps: PropsHook<{\n  volume: number;\n  muted: boolean;\n  volumeLevel: string;\n  requestVolumeChange: (volume: number) => void;\n  core: CoreVolumeSlider | null;\n}> = (state, element) => {\n  const volumeText = `${Math.round(state.muted ? 0 : state.volume * 100)}%`;\n\n  const baseProps: Record<string, any> = {\n    role: 'slider',\n    tabindex: element.getAttribute('tabindex') ?? '0',\n    'data-muted': state.muted.toString(),\n    'data-volume-level': state.volumeLevel,\n    'data-orientation': (element as any).orientation || 'horizontal',\n    'aria-label': 'Volume',\n    'aria-valuemin': '0',\n    'aria-valuemax': '100',\n    'aria-valuetext': volumeText,\n    'aria-orientation': (element as any).orientation || 'horizontal',\n  };\n\n  return baseProps;\n};\n\n/**\n * VolumeSlider Root component - Main container with pointer event handling\n */\ninterface VolumeSliderRootState {\n  volume: number;\n  muted: boolean;\n  volumeLevel: string;\n  requestVolumeChange: (volume: number) => void;\n  core: CoreVolumeSlider | null;\n}\n\nexport class VolumeSliderRoot extends HTMLElement {\n  static readonly observedAttributes: readonly string[] = ['orientation'];\n\n  _state: VolumeSliderRootState | undefined;\n  _core: CoreVolumeSlider | null = null;\n\n  get volume(): number | undefined {\n    return this._state?.volume;\n  }\n\n  get muted(): boolean {\n    return this._state?.muted ?? false;\n  }\n\n  get volumeLevel(): string {\n    return this._state?.volumeLevel ?? 'high';\n  }\n\n  get orientation(): 'horizontal' | 'vertical' {\n    return (this.getAttribute('orientation') as 'horizontal' | 'vertical') || 'horizontal';\n  }\n\n  attributeChangedCallback(name: string, _oldValue: string | null, _newValue: string | null): void {\n    if (name === 'orientation' && this._state) {\n      this._render(getVolumeSliderRootProps(this._state, this), this._state);\n    }\n  }\n\n  _update(_props: any, state: any): void {\n    this._state = state;\n\n    if (state && !this._core) {\n      this._core = new CoreVolumeSlider();\n      this._core.subscribe(() => this._render(getVolumeSliderRootProps(state, this), state));\n      this._core.attach(this);\n      state.core = this._core;\n    }\n\n    this._core?.setState(state);\n  }\n\n  _render(props: any, state: any): void {\n    const coreState = state?.core?.getState();\n    if (!coreState) return;\n\n    this.style.setProperty('--slider-fill', `${coreState._fillWidth.toFixed(3)}%`);\n    this.style.setProperty('--slider-pointer', `${coreState._pointerWidth.toFixed(3)}%`);\n\n    props['aria-valuenow'] = coreState._fillWidth.toString();\n\n    setAttributes(this, props);\n  }\n}\n\n/**\n * VolumeSlider Track component - Track element that captures pointer events\n */\nexport class VolumeSliderTrack extends HTMLElement {\n  constructor() {\n    super();\n  }\n\n  connectedCallback(): void {\n    // Set this element as the track element in the core VolumeSlider\n    const rootElement = this.closest('media-volume-slider') as any;\n    if (rootElement?._state?.core) {\n      rootElement._state.core.setState({ _trackElement: this });\n    }\n  }\n\n  _update(props: any, _state: any): void {\n    setAttributes(this, props);\n\n    if (props['data-orientation'] === 'horizontal') {\n      this.style.width = '100%';\n      this.style.removeProperty('height');\n    } else {\n      this.style.height = '100%';\n      this.style.removeProperty('width');\n    }\n  }\n}\n\n/**\n * VolumeSlider Progress component - Shows current progress\n */\nexport class VolumeSliderIndicatorElement extends HTMLElement {\n  constructor() {\n    super();\n    this.style.position = 'absolute';\n    this.style.width = 'var(--slider-fill, 0%)';\n    this.style.height = '100%';\n  }\n\n  _update(props: any, _state: any): void {\n    setAttributes(this, props);\n\n    if (props['data-orientation'] === 'horizontal') {\n      this.style.width = 'var(--slider-fill, 0%)';\n      this.style.height = '100%';\n      this.style.top = '0';\n      this.style.removeProperty('bottom');\n    } else {\n      this.style.height = 'var(--slider-fill, 0%)';\n      this.style.width = '100%';\n      this.style.bottom = '0';\n      this.style.removeProperty('top');\n    }\n  }\n}\n\n/**\n * VolumeSlider Thumb component - Draggable thumb element\n */\nexport class VolumeSliderThumb extends HTMLElement {\n  constructor() {\n    super();\n    this.style.position = 'absolute';\n  }\n\n  _update(props: any, _state: any): void {\n    setAttributes(this, props);\n\n    // Set appropriate positioning based on orientation\n    if (props['data-orientation'] === 'horizontal') {\n      this.style.left = 'var(--slider-fill, 0%)';\n      this.style.top = '50%';\n      this.style.translate = '-50% -50%';\n    } else {\n      this.style.bottom = 'var(--slider-fill, 0%)';\n      this.style.left = '50%';\n      this.style.translate = '-50% 50%';\n    }\n  }\n}\n\n/**\n * VolumeSlider Root state hook - equivalent to React's useVolumeSliderRootState\n * Handles media store state subscription and transformation\n */\nexport const useVolumeSliderRootState: StateHook<{\n  volume: number;\n  muted: boolean;\n  volumeLevel: string;\n  requestVolumeChange: (volume: number) => void;\n  core: CoreVolumeSlider | null;\n}> = {\n  keys: volumeSliderStateDefinition.keys,\n  transform: (rawState, mediaStore) => ({\n    ...volumeSliderStateDefinition.stateTransform(rawState),\n    ...volumeSliderStateDefinition.createRequestMethods(mediaStore.dispatch),\n    core: null,\n  }),\n};\n\n/**\n * VolumeSlider Track props hook\n */\nexport const getVolumeSliderTrackProps: PropsHook<Record<string, never>> = (_state, element) => {\n  const rootElement = element.closest('media-volume-slider') as any;\n  return {\n    'data-orientation': rootElement?.orientation || 'horizontal',\n  };\n};\n\n/**\n * VolumeSlider Progress props hook\n */\nexport const getVolumeSliderProgressProps: PropsHook<Record<string, never>> = (_state, element) => {\n  const rootElement = element.closest('media-volume-slider') as any;\n  return {\n    'data-orientation': rootElement?.orientation || 'horizontal',\n  };\n};\n\n/**\n * VolumeSlider Thumb props hook\n */\nexport const getVolumeSliderThumbProps: PropsHook<Record<string, never>> = (_state, element) => {\n  const rootElement = element.closest('media-volume-slider') as any;\n  return {\n    'data-orientation': rootElement?.orientation || 'horizontal',\n  };\n};\n\n/**\n * Connected VolumeSlider Root component using hook-style architecture\n */\nexport const VolumeSliderRootElement: ConnectedComponentConstructor<{\n  volume: number;\n  muted: boolean;\n  volumeLevel: string;\n  requestVolumeChange: (volume: number) => void;\n  core: CoreVolumeSlider | null;\n}> = toConnectedHTMLComponent(VolumeSliderRoot, useVolumeSliderRootState, getVolumeSliderRootProps, 'VolumeSliderRoot');\n\n/**\n * Connected VolumeSlider Track component\n */\nexport const VolumeSliderTrackElement: ConnectedComponentConstructor<any> = toConnectedHTMLComponent(\n  VolumeSliderTrack,\n  { keys: [], transform: () => ({}) },\n  getVolumeSliderTrackProps,\n  'VolumeSliderTrack',\n);\n\n/**\n * Connected VolumeSlider Progress component\n */\nexport const VolumeSliderProgressElement: ConnectedComponentConstructor<any> = toConnectedHTMLComponent(\n  VolumeSliderIndicatorElement,\n  { keys: [], transform: () => ({}) },\n  getVolumeSliderProgressProps,\n  'VolumeSliderProgress',\n);\n\n/**\n * Connected VolumeSlider Thumb component\n */\nexport const VolumeSliderThumbElement: ConnectedComponentConstructor<any> = toConnectedHTMLComponent(\n  VolumeSliderThumb,\n  { keys: [], transform: () => ({}) },\n  getVolumeSliderThumbProps,\n  'VolumeSliderThumb',\n);\n\n/**\n * Compound VolumeSlider component object\n */\nexport const VolumeSliderElement = Object.assign(\n  {},\n  {\n    Root: VolumeSliderRootElement,\n    Track: VolumeSliderTrackElement,\n    Progress: VolumeSliderProgressElement,\n    Thumb: VolumeSliderThumbElement,\n  },\n) as {\n  Root: typeof VolumeSliderRootElement;\n  Track: typeof VolumeSliderTrackElement;\n  Progress: typeof VolumeSliderProgressElement;\n  Thumb: typeof VolumeSliderThumbElement;\n};\n"],"mappings":";;;;;;;;;;AAYA,MAAaA,4BAMP,OAAO,YAAY;CACvB,MAAM,aAAa,GAAG,KAAK,MAAM,MAAM,QAAQ,IAAI,MAAM,SAAS,IAAI,CAAC;AAevE,QAbuC;EACrC,MAAM;EACN,UAAU,QAAQ,aAAa,WAAW,IAAI;EAC9C,cAAc,MAAM,MAAM,UAAU;EACpC,qBAAqB,MAAM;EAC3B,oBAAqB,QAAgB,eAAe;EACpD,cAAc;EACd,iBAAiB;EACjB,iBAAiB;EACjB,kBAAkB;EAClB,oBAAqB,QAAgB,eAAe;EACrD;;AAgBH,IAAa,mBAAb,cAAsC,YAAY;;;eAIf;;;4BAHuB,CAAC,cAAc;;CAKvE,IAAI,SAA6B;AAC/B,SAAO,KAAK,QAAQ;;CAGtB,IAAI,QAAiB;AACnB,SAAO,KAAK,QAAQ,SAAS;;CAG/B,IAAI,cAAsB;AACxB,SAAO,KAAK,QAAQ,eAAe;;CAGrC,IAAI,cAAyC;AAC3C,SAAQ,KAAK,aAAa,cAAc,IAAkC;;CAG5E,yBAAyB,MAAc,WAA0B,WAAgC;AAC/F,MAAI,SAAS,iBAAiB,KAAK,OACjC,MAAK,QAAQ,yBAAyB,KAAK,QAAQ,KAAK,EAAE,KAAK,OAAO;;CAI1E,QAAQ,QAAa,OAAkB;AACrC,OAAK,SAAS;AAEd,MAAI,SAAS,CAAC,KAAK,OAAO;AACxB,QAAK,QAAQ,IAAIC,cAAkB;AACnC,QAAK,MAAM,gBAAgB,KAAK,QAAQ,yBAAyB,OAAO,KAAK,EAAE,MAAM,CAAC;AACtF,QAAK,MAAM,OAAO,KAAK;AACvB,SAAM,OAAO,KAAK;;AAGpB,OAAK,OAAO,SAAS,MAAM;;CAG7B,QAAQ,OAAY,OAAkB;EACpC,MAAM,YAAY,OAAO,MAAM,UAAU;AACzC,MAAI,CAAC,UAAW;AAEhB,OAAK,MAAM,YAAY,iBAAiB,GAAG,UAAU,WAAW,QAAQ,EAAE,CAAC,GAAG;AAC9E,OAAK,MAAM,YAAY,oBAAoB,GAAG,UAAU,cAAc,QAAQ,EAAE,CAAC,GAAG;AAEpF,QAAM,mBAAmB,UAAU,WAAW,UAAU;AAExD,gBAAc,MAAM,MAAM;;;;;;AAO9B,IAAa,oBAAb,cAAuC,YAAY;CACjD,cAAc;AACZ,SAAO;;CAGT,oBAA0B;EAExB,MAAM,cAAc,KAAK,QAAQ,sBAAsB;AACvD,MAAI,aAAa,QAAQ,KACvB,aAAY,OAAO,KAAK,SAAS,EAAE,eAAe,MAAM,CAAC;;CAI7D,QAAQ,OAAY,QAAmB;AACrC,gBAAc,MAAM,MAAM;AAE1B,MAAI,MAAM,wBAAwB,cAAc;AAC9C,QAAK,MAAM,QAAQ;AACnB,QAAK,MAAM,eAAe,SAAS;SAC9B;AACL,QAAK,MAAM,SAAS;AACpB,QAAK,MAAM,eAAe,QAAQ;;;;;;;AAQxC,IAAa,+BAAb,cAAkD,YAAY;CAC5D,cAAc;AACZ,SAAO;AACP,OAAK,MAAM,WAAW;AACtB,OAAK,MAAM,QAAQ;AACnB,OAAK,MAAM,SAAS;;CAGtB,QAAQ,OAAY,QAAmB;AACrC,gBAAc,MAAM,MAAM;AAE1B,MAAI,MAAM,wBAAwB,cAAc;AAC9C,QAAK,MAAM,QAAQ;AACnB,QAAK,MAAM,SAAS;AACpB,QAAK,MAAM,MAAM;AACjB,QAAK,MAAM,eAAe,SAAS;SAC9B;AACL,QAAK,MAAM,SAAS;AACpB,QAAK,MAAM,QAAQ;AACnB,QAAK,MAAM,SAAS;AACpB,QAAK,MAAM,eAAe,MAAM;;;;;;;AAQtC,IAAa,oBAAb,cAAuC,YAAY;CACjD,cAAc;AACZ,SAAO;AACP,OAAK,MAAM,WAAW;;CAGxB,QAAQ,OAAY,QAAmB;AACrC,gBAAc,MAAM,MAAM;AAG1B,MAAI,MAAM,wBAAwB,cAAc;AAC9C,QAAK,MAAM,OAAO;AAClB,QAAK,MAAM,MAAM;AACjB,QAAK,MAAM,YAAY;SAClB;AACL,QAAK,MAAM,SAAS;AACpB,QAAK,MAAM,OAAO;AAClB,QAAK,MAAM,YAAY;;;;;;;;AAS7B,MAAaC,2BAMR;CACH,MAAM,4BAA4B;CAClC,YAAY,UAAU,gBAAgB;EACpC,GAAG,4BAA4B,eAAe,SAAS;EACvD,GAAG,4BAA4B,qBAAqB,WAAW,SAAS;EACxE,MAAM;EACP;CACF;;;;AAKD,MAAaC,6BAA+D,QAAQ,YAAY;CAC9F,MAAM,cAAc,QAAQ,QAAQ,sBAAsB;AAC1D,QAAO,EACL,oBAAoB,aAAa,eAAe,cACjD;;;;;AAMH,MAAaC,gCAAkE,QAAQ,YAAY;CACjG,MAAM,cAAc,QAAQ,QAAQ,sBAAsB;AAC1D,QAAO,EACL,oBAAoB,aAAa,eAAe,cACjD;;;;;AAMH,MAAaC,6BAA+D,QAAQ,YAAY;CAC9F,MAAM,cAAc,QAAQ,QAAQ,sBAAsB;AAC1D,QAAO,EACL,oBAAoB,aAAa,eAAe,cACjD;;;;;AAMH,MAAaC,0BAMR,yBAAyB,kBAAkB,0BAA0B,0BAA0B,mBAAmB;;;;AAKvH,MAAaC,2BAA+D,yBAC1E,mBACA;CAAE,MAAM,EAAE;CAAE,kBAAkB,EAAE;CAAG,EACnC,2BACA,oBACD;;;;AAKD,MAAaC,8BAAkE,yBAC7E,8BACA;CAAE,MAAM,EAAE;CAAE,kBAAkB,EAAE;CAAG,EACnC,8BACA,uBACD;;;;AAKD,MAAaC,2BAA+D,yBAC1E,mBACA;CAAE,MAAM,EAAE;CAAE,kBAAkB,EAAE;CAAG,EACnC,2BACA,oBACD;;;;AAKD,MAAa,sBAAsB,OAAO,OACxC,EAAE,EACF;CACE,MAAM;CACN,OAAO;CACP,UAAU;CACV,OAAO;CACR,CACF"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@videojs/html",
   "type": "module",
-  "version": "0.1.0-preview.3",
+  "version": "0.1.0-preview.4",
   "description": "HTML library for building media players",
   "license": "Apache-2.0",
   "keywords": [
@@ -32,6 +32,10 @@
     "./skins/minimal": {
       "types": "./dist/skins/minimal.d.ts",
       "default": "./dist/skins/minimal.js"
+    },
+    "./define/*": {
+      "types": "./dist/define/*.d.ts",
+      "default": "./dist/define/*.js"
     }
   },
   "main": "dist/index.js",
@@ -44,9 +48,9 @@
     "@floating-ui/core": "^1.6.13",
     "@floating-ui/dom": "^1.6.13",
     "@open-wc/context-protocol": "^0.0.9",
-    "@videojs/core": "0.1.0-preview.3",
-    "@videojs/icons": "0.1.0-preview.3",
-    "@videojs/utils": "0.1.0-preview.3"
+    "@videojs/icons": "0.1.0-preview.4",
+    "@videojs/core": "0.1.0-preview.4",
+    "@videojs/utils": "0.1.0-preview.4"
   },
   "devDependencies": {
     "tsdown": "^0.15.9",

package/dist/chunk-Bp6m_JJh.js

@@ -1,13 +0,0 @@
-//#region rolldown:runtime
-var __defProp = Object.defineProperty;
-var __export = (all) => {
-	let target = {};
-	for (var name in all) __defProp(target, name, {
-		get: all[name],
-		enumerable: true
-	});
-	return target;
-};
-
-//#endregion
-export { __export as t };

package/dist/icons-eJws_3Te.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"icons-eJws_3Te.js","names":["getTemplateHTML","getTemplateHTML","getTemplateHTML","getTemplateHTML","getTemplateHTML","getTemplateHTML","getTemplateHTML","getTemplateHTML","getTemplateHTML"],"sources":["../src/icons/media-chrome-icon.ts","../src/icons/media-fullscreen-enter-alt-icon.ts","../src/icons/media-fullscreen-enter-icon.ts","../src/icons/media-fullscreen-exit-alt-icon.ts","../src/icons/media-fullscreen-exit-icon.ts","../src/icons/media-pause-icon.ts","../src/icons/media-play-icon.ts","../src/icons/media-volume-high-icon.ts","../src/icons/media-volume-low-icon.ts","../src/icons/media-volume-off-icon.ts"],"sourcesContent":["export function getTemplateHTML() {\n  return /* html */ `\n    <style>\n      :host {\n        display: inline-block;\n      }\n      svg {\n        fill: currentColor;\n      }\n    </style>\n  `;\n}\n\nexport class MediaChromeIcon extends HTMLElement {\n  static shadowRootOptions = { mode: 'open' as ShadowRootMode };\n  static getTemplateHTML: () => string = getTemplateHTML;\n\n  constructor() {\n    super();\n\n    if (!this.shadowRoot) {\n      this.attachShadow((this.constructor as typeof MediaChromeIcon).shadowRootOptions);\n      this.shadowRoot!.innerHTML = (this.constructor as typeof MediaChromeIcon).getTemplateHTML();\n    }\n  }\n}\n","import { SVG_ICONS } from '@videojs/icons';\n\nimport { MediaChromeIcon } from './media-chrome-icon';\n\nexport function getTemplateHTML() {\n  return /* html */ `\n    ${MediaChromeIcon.getTemplateHTML()}\n    <style>\n      :host {\n        display: var(--media-fullscreen-enter-icon-display, inline-flex);\n      }\n    </style>\n    ${SVG_ICONS.fullscreenEnterAlt}\n  `;\n}\n\nexport class MediaFullscreenEnterAltIcon extends MediaChromeIcon {\n  static getTemplateHTML: () => string = getTemplateHTML;\n}\n\ncustomElements.define('media-fullscreen-enter-alt-icon', MediaFullscreenEnterAltIcon);\n","import { SVG_ICONS } from '@videojs/icons';\n\nimport { MediaChromeIcon } from './media-chrome-icon';\n\nexport function getTemplateHTML() {\n  return /* html */ `\n    ${MediaChromeIcon.getTemplateHTML()}\n    <style>\n      :host {\n        display: var(--media-fullscreen-enter-icon-display, inline-flex);\n      }\n    </style>\n    ${SVG_ICONS.fullscreenEnter}\n  `;\n}\n\nexport class MediaFullscreenEnterIcon extends MediaChromeIcon {\n  static getTemplateHTML: () => string = getTemplateHTML;\n}\n\ncustomElements.define('media-fullscreen-enter-icon', MediaFullscreenEnterIcon);\n","import { SVG_ICONS } from '@videojs/icons';\n\nimport { MediaChromeIcon } from './media-chrome-icon';\n\nexport function getTemplateHTML() {\n  return /* html */ `\n    ${MediaChromeIcon.getTemplateHTML()}\n    <style>\n      :host {\n        display: var(--media-fullscreen-exit-icon-display, inline-flex);\n      }\n    </style>\n    ${SVG_ICONS.fullscreenExitAlt}\n  `;\n}\n\nexport class MediaFullscreenExitAltIcon extends MediaChromeIcon {\n  static getTemplateHTML: () => string = getTemplateHTML;\n}\n\ncustomElements.define('media-fullscreen-exit-alt-icon', MediaFullscreenExitAltIcon);\n","import { SVG_ICONS } from '@videojs/icons';\n\nimport { MediaChromeIcon } from './media-chrome-icon';\n\nexport function getTemplateHTML() {\n  return /* html */ `\n    ${MediaChromeIcon.getTemplateHTML()}\n    <style>\n      :host {\n        display: var(--media-fullscreen-exit-icon-display, inline-flex);\n      }\n    </style>\n    ${SVG_ICONS.fullscreenExit}\n  `;\n}\n\nexport class MediaFullscreenExitIcon extends MediaChromeIcon {\n  static getTemplateHTML: () => string = getTemplateHTML;\n}\n\ncustomElements.define('media-fullscreen-exit-icon', MediaFullscreenExitIcon);\n","import { SVG_ICONS } from '@videojs/icons';\n\nimport { MediaChromeIcon } from './media-chrome-icon';\n\nexport function getTemplateHTML() {\n  return /* html */ `\n    ${MediaChromeIcon.getTemplateHTML()}\n    ${SVG_ICONS.pause}\n  `;\n}\n\nexport class MediaPauseIcon extends MediaChromeIcon {\n  static getTemplateHTML: () => string = getTemplateHTML;\n}\n\ncustomElements.define('media-pause-icon', MediaPauseIcon);\n","import { SVG_ICONS } from '@videojs/icons';\n\nimport { MediaChromeIcon } from './media-chrome-icon';\n\nexport function getTemplateHTML() {\n  return /* html */ `\n    ${MediaChromeIcon.getTemplateHTML()}\n    <style>\n      :host {\n        display: var(--media-play-icon-display, inline-flex);\n      }\n    </style>\n    ${SVG_ICONS.play}\n  `;\n}\n\nexport class MediaPlayIcon extends MediaChromeIcon {\n  static getTemplateHTML: () => string = getTemplateHTML;\n}\n\ncustomElements.define('media-play-icon', MediaPlayIcon);\n","import { SVG_ICONS } from '@videojs/icons';\n\nimport { MediaChromeIcon } from './media-chrome-icon';\n\nexport function getTemplateHTML() {\n  return /* html */ `\n    ${MediaChromeIcon.getTemplateHTML()}\n    <style>\n      :host {\n        display: var(--media-play-icon-display, inline-flex);\n      }\n    </style>\n    ${SVG_ICONS.volumeHigh}\n  `;\n}\n\nexport class MediaVolumeHighIcon extends MediaChromeIcon {\n  static getTemplateHTML: () => string = getTemplateHTML;\n}\n\ncustomElements.define('media-volume-high-icon', MediaVolumeHighIcon);\n","import { SVG_ICONS } from '@videojs/icons';\n\nimport { MediaChromeIcon } from './media-chrome-icon';\n\nexport function getTemplateHTML() {\n  return /* html */ `\n    ${MediaChromeIcon.getTemplateHTML()}\n    <style>\n      :host {\n        display: var(--media-play-icon-display, inline-flex);\n      }\n    </style>\n    ${SVG_ICONS.volumeLow}\n  `;\n}\n\nexport class MediaVolumeLowIcon extends MediaChromeIcon {\n  static getTemplateHTML: () => string = getTemplateHTML;\n}\n\ncustomElements.define('media-volume-low-icon', MediaVolumeLowIcon);\n","import { SVG_ICONS } from '@videojs/icons';\n\nimport { MediaChromeIcon } from './media-chrome-icon';\n\nexport function getTemplateHTML() {\n  return /* html */ `\n    ${MediaChromeIcon.getTemplateHTML()}\n    <style>\n      :host {\n        display: var(--media-play-icon-display, inline-flex);\n      }\n    </style>\n    ${SVG_ICONS.volumeOff}\n  `;\n}\n\nexport class MediaVolumeOffIcon extends MediaChromeIcon {\n  static getTemplateHTML: () => string = getTemplateHTML;\n}\n\ncustomElements.define('media-volume-off-icon', MediaVolumeOffIcon);\n"],"mappings":";;;;AAAA,SAAgBA,oBAAkB;AAChC,QAAkB;;;;;;;;;;;AAYpB,IAAa,kBAAb,cAAqC,YAAY;;2BACpB,EAAE,MAAM,QAA0B;;;yBACtBA;;CAEvC,cAAc;AACZ,SAAO;AAEP,MAAI,CAAC,KAAK,YAAY;AACpB,QAAK,aAAc,KAAK,YAAuC,kBAAkB;AACjF,QAAK,WAAY,YAAa,KAAK,YAAuC,iBAAiB;;;;;;;;;;;AClBjG,SAAgBC,oBAAkB;AAChC,QAAkB;MACd,gBAAgB,iBAAiB,CAAC;;;;;;MAMlC,UAAU,mBAAmB;;;AAInC,IAAa,8BAAb,cAAiD,gBAAgB;;yBACxBA;;;AAGzC,eAAe,OAAO,mCAAmC,4BAA4B;;;;;;;;AChBrF,SAAgBC,oBAAkB;AAChC,QAAkB;MACd,gBAAgB,iBAAiB,CAAC;;;;;;MAMlC,UAAU,gBAAgB;;;AAIhC,IAAa,2BAAb,cAA8C,gBAAgB;;yBACrBA;;;AAGzC,eAAe,OAAO,+BAA+B,yBAAyB;;;;;;;;AChB9E,SAAgBC,oBAAkB;AAChC,QAAkB;MACd,gBAAgB,iBAAiB,CAAC;;;;;;MAMlC,UAAU,kBAAkB;;;AAIlC,IAAa,6BAAb,cAAgD,gBAAgB;;yBACvBA;;;AAGzC,eAAe,OAAO,kCAAkC,2BAA2B;;;;;;;;AChBnF,SAAgBC,oBAAkB;AAChC,QAAkB;MACd,gBAAgB,iBAAiB,CAAC;;;;;;MAMlC,UAAU,eAAe;;;AAI/B,IAAa,0BAAb,cAA6C,gBAAgB;;yBACpBA;;;AAGzC,eAAe,OAAO,8BAA8B,wBAAwB;;;;;;;;AChB5E,SAAgBC,oBAAkB;AAChC,QAAkB;MACd,gBAAgB,iBAAiB,CAAC;MAClC,UAAU,MAAM;;;AAItB,IAAa,iBAAb,cAAoC,gBAAgB;;yBACXA;;;AAGzC,eAAe,OAAO,oBAAoB,eAAe;;;;;;;;ACXzD,SAAgBC,oBAAkB;AAChC,QAAkB;MACd,gBAAgB,iBAAiB,CAAC;;;;;;MAMlC,UAAU,KAAK;;;AAIrB,IAAa,gBAAb,cAAmC,gBAAgB;;yBACVA;;;AAGzC,eAAe,OAAO,mBAAmB,cAAc;;;;;;;;AChBvD,SAAgBC,oBAAkB;AAChC,QAAkB;MACd,gBAAgB,iBAAiB,CAAC;;;;;;MAMlC,UAAU,WAAW;;;AAI3B,IAAa,sBAAb,cAAyC,gBAAgB;;yBAChBA;;;AAGzC,eAAe,OAAO,0BAA0B,oBAAoB;;;;;;;;AChBpE,SAAgBC,oBAAkB;AAChC,QAAkB;MACd,gBAAgB,iBAAiB,CAAC;;;;;;MAMlC,UAAU,UAAU;;;AAI1B,IAAa,qBAAb,cAAwC,gBAAgB;;yBACfA;;;AAGzC,eAAe,OAAO,yBAAyB,mBAAmB;;;;;;;;AChBlE,SAAgB,kBAAkB;AAChC,QAAkB;MACd,gBAAgB,iBAAiB,CAAC;;;;;;MAMlC,UAAU,UAAU;;;AAI1B,IAAa,qBAAb,cAAwC,gBAAgB;;yBACf;;;AAGzC,eAAe,OAAO,yBAAyB,mBAAmB"}

package/dist/index-AcYRyuAY.d.ts

@@ -1,76 +0,0 @@
-import { t as __export } from "./chunk-Bp6m_JJh.js";
-
-//#region src/icons/media-chrome-icon.d.ts
-declare class MediaChromeIcon extends HTMLElement {
-  static shadowRootOptions: {
-    mode: ShadowRootMode;
-  };
-  static getTemplateHTML: () => string;
-  constructor();
-}
-declare namespace media_fullscreen_enter_alt_icon_d_exports {
-  export { MediaFullscreenEnterAltIcon, getTemplateHTML$8 as getTemplateHTML };
-}
-declare function getTemplateHTML$8(): string;
-declare class MediaFullscreenEnterAltIcon extends MediaChromeIcon {
-  static getTemplateHTML: () => string;
-}
-declare namespace media_fullscreen_enter_icon_d_exports {
-  export { MediaFullscreenEnterIcon, getTemplateHTML$7 as getTemplateHTML };
-}
-declare function getTemplateHTML$7(): string;
-declare class MediaFullscreenEnterIcon extends MediaChromeIcon {
-  static getTemplateHTML: () => string;
-}
-declare namespace media_fullscreen_exit_alt_icon_d_exports {
-  export { MediaFullscreenExitAltIcon, getTemplateHTML$6 as getTemplateHTML };
-}
-declare function getTemplateHTML$6(): string;
-declare class MediaFullscreenExitAltIcon extends MediaChromeIcon {
-  static getTemplateHTML: () => string;
-}
-declare namespace media_fullscreen_exit_icon_d_exports {
-  export { MediaFullscreenExitIcon, getTemplateHTML$5 as getTemplateHTML };
-}
-declare function getTemplateHTML$5(): string;
-declare class MediaFullscreenExitIcon extends MediaChromeIcon {
-  static getTemplateHTML: () => string;
-}
-declare namespace media_pause_icon_d_exports {
-  export { MediaPauseIcon, getTemplateHTML$4 as getTemplateHTML };
-}
-declare function getTemplateHTML$4(): string;
-declare class MediaPauseIcon extends MediaChromeIcon {
-  static getTemplateHTML: () => string;
-}
-declare namespace media_play_icon_d_exports {
-  export { MediaPlayIcon, getTemplateHTML$3 as getTemplateHTML };
-}
-declare function getTemplateHTML$3(): string;
-declare class MediaPlayIcon extends MediaChromeIcon {
-  static getTemplateHTML: () => string;
-}
-declare namespace media_volume_high_icon_d_exports {
-  export { MediaVolumeHighIcon, getTemplateHTML$2 as getTemplateHTML };
-}
-declare function getTemplateHTML$2(): string;
-declare class MediaVolumeHighIcon extends MediaChromeIcon {
-  static getTemplateHTML: () => string;
-}
-declare namespace media_volume_low_icon_d_exports {
-  export { MediaVolumeLowIcon, getTemplateHTML$1 as getTemplateHTML };
-}
-declare function getTemplateHTML$1(): string;
-declare class MediaVolumeLowIcon extends MediaChromeIcon {
-  static getTemplateHTML: () => string;
-}
-declare namespace media_volume_off_icon_d_exports {
-  export { MediaVolumeOffIcon, getTemplateHTML };
-}
-declare function getTemplateHTML(): string;
-declare class MediaVolumeOffIcon extends MediaChromeIcon {
-  static getTemplateHTML: () => string;
-}
-//#endregion
-export { media_pause_icon_d_exports as a, media_fullscreen_enter_icon_d_exports as c, media_play_icon_d_exports as i, media_fullscreen_enter_alt_icon_d_exports as l, media_volume_low_icon_d_exports as n, media_fullscreen_exit_icon_d_exports as o, media_volume_high_icon_d_exports as r, media_fullscreen_exit_alt_icon_d_exports as s, media_volume_off_icon_d_exports as t };
-//# sourceMappingURL=index-AcYRyuAY.d.ts.map

package/dist/index-AcYRyuAY.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index-AcYRyuAY.d.ts","names":[],"sources":["../src/icons/media-chrome-icon.ts","../src/icons/media-fullscreen-enter-alt-icon.ts","../src/icons/media-fullscreen-enter-icon.ts","../src/icons/media-fullscreen-exit-alt-icon.ts","../src/icons/media-fullscreen-exit-icon.ts","../src/icons/media-pause-icon.ts","../src/icons/media-play-icon.ts","../src/icons/media-volume-high-icon.ts","../src/icons/media-volume-low-icon.ts","../src/icons/media-volume-off-icon.ts"],"sourcesContent":[],"mappings":";;;cAaa,eAAA,SAAwB,WAAA;;IAArC,IAAa,EACkC,cADlC;;;;;;;;iBCTG,iBAAA,CAAA;cAYH,2BAAA,SAAoC,eAAA;EDHjD,OAAa,eAAA,EAAA,GAAA,GAAA,MACkC;;;;;iBEV/B,iBAAA,CAAA;cAYH,wBAAA,SAAiC,eAAA;EFH9C,OAAa,eAAA,EAAA,GAAA,GAAA,MACkC;;;;;iBGV/B,iBAAA,CAAA;cAYH,0BAAA,SAAmC,eAAA;EHHhD,OAAa,eAAA,EAAA,GAAA,GAAA,MACkC;;;;;iBIV/B,iBAAA,CAAA;cAYH,uBAAA,SAAgC,eAAA;EJH7C,OAAa,eAAA,EAAA,GAAA,GAAA,MACkC;;;;;iBKV/B,iBAAA,CAAA;cAOH,cAAA,SAAuB,eAAA;ELEpC,OAAa,eAAA,EAAA,GAAA,GAAA,MACkC;;;;;iBMV/B,iBAAA,CAAA;cAYH,aAAA,SAAsB,eAAA;ENHnC,OAAa,eAAA,EAAA,GAAA,GAAA,MACkC;;;;;iBOV/B,iBAAA,CAAA;cAYH,mBAAA,SAA4B,eAAA;EPHzC,OAAa,eAAA,EAAA,GAAA,GAAA,MACkC;;;;;iBQV/B,iBAAA,CAAA;cAYH,kBAAA,SAA2B,eAAA;ERHxC,OAAa,eAAA,EAAA,GAAA,GAAA,MACkC;;;;;iBSV/B,eAAA,CAAA;cAYH,kBAAA,SAA2B,eAAA;ETHxC,OAAa,eAAA,EAAA,GAAA,GAAA,MACkC"}

package/dist/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","names":[],"sources":["../src/index.ts"],"sourcesContent":["export { CurrentTimeDisplay } from './components/media-current-time-display';\nexport { DurationDisplay } from './components/media-duration-display';\nexport { FullscreenButton } from './components/media-fullscreen-button';\nexport { MuteButton } from './components/media-mute-button';\nexport { PlayButton } from './components/media-play-button';\nexport { Popover } from './components/media-popover';\nexport { TimeSlider } from './components/media-time-slider';\nexport { Tooltip } from './components/media-tooltip';\nexport { VolumeSlider } from './components/media-volume-slider';\nexport { MediaContainer } from './media/media-container';\nexport { MediaProvider } from './media/media-provider';\nexport { MediaSkin } from './media/media-skin';\n\nexport function defineVjsPlayer(): void {\n  /** @TODO - Reimplement me (at least as a POC) (CJP) */\n  // defineVideoProvider();\n  // defineVideoDefaultSkin();\n  // <video> is native, no need to define\n}\n"],"mappings":";;;AAaA,SAAgB,kBAAwB"}

package/dist/media-preview-time-display-C7jpAct6.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"media-preview-time-display-C7jpAct6.js","names":["usePreviewTimeDisplayState: StateHook<{\n  previewTime: number | undefined;\n}>","getPreviewTimeDisplayProps: PropsHook<{\n  previewTime: number | undefined;\n}>","PreviewTimeDisplay: ConnectedComponentConstructor<PreviewTimeDisplayState>"],"sources":["../src/components/media-preview-time-display.ts"],"sourcesContent":["import type { PreviewTimeDisplayState } from '@videojs/core/store';\nimport type { ConnectedComponentConstructor, PropsHook, StateHook } from '../utils/component-factory';\n\nimport { previewTimeDisplayStateDefinition } from '@videojs/core/store';\n\nimport { formatDisplayTime } from '@videojs/utils';\nimport { toConnectedHTMLComponent } from '../utils/component-factory';\n\nexport class PreviewTimeDisplayBase extends HTMLElement {\n  static shadowRootOptions = {\n    mode: 'open' as ShadowRootMode,\n  };\n\n  static observedAttributes: string[] = ['show-remaining'];\n\n  _state:\n    | {\n      previewTime: number | undefined;\n    }\n    | undefined;\n\n  constructor() {\n    super();\n\n    if (!this.shadowRoot) {\n      this.attachShadow((this.constructor as typeof PreviewTimeDisplayBase).shadowRootOptions);\n    }\n  }\n\n  get previewTime(): number {\n    return this._state?.previewTime ?? 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 = formatDisplayTime(state.previewTime);\n\n    if (this.shadowRoot) {\n      this.shadowRoot.textContent = timeLabel;\n    }\n  }\n}\n\nexport const usePreviewTimeDisplayState: StateHook<{\n  previewTime: number | undefined;\n}> = {\n  keys: [...previewTimeDisplayStateDefinition.keys],\n  transform: (rawState, _mediaStore) => ({\n    ...previewTimeDisplayStateDefinition.stateTransform(rawState),\n    // Preview time display is read-only, so no request methods needed\n  }),\n};\n\nexport const getPreviewTimeDisplayProps: PropsHook<{\n  previewTime: number | undefined;\n}> = (_state, _element) => {\n  const baseProps: Record<string, any> = {};\n  return baseProps;\n};\n\nexport const PreviewTimeDisplay: ConnectedComponentConstructor<PreviewTimeDisplayState> = toConnectedHTMLComponent(\n  PreviewTimeDisplayBase,\n  usePreviewTimeDisplayState,\n  getPreviewTimeDisplayProps,\n  'PreviewTimeDisplay',\n);\n\n// Register the custom element\nif (!globalThis.customElements.get('preview-time-display')) {\n  globalThis.customElements.define('preview-time-display', PreviewTimeDisplay);\n}\n\nexport default PreviewTimeDisplay;\n"],"mappings":";;;;;AAQA,IAAa,yBAAb,cAA4C,YAAY;;2BAC3B,EACzB,MAAM,QACP;;;4BAEqC,CAAC,iBAAiB;;CAQxD,cAAc;AACZ,SAAO;AAEP,MAAI,CAAC,KAAK,WACR,MAAK,aAAc,KAAK,YAA8C,kBAAkB;;CAI5F,IAAI,cAAsB;AACxB,SAAO,KAAK,QAAQ,eAAe;;CAGrC,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,YAAY,kBAAkB,MAAM,YAAY;AAEtD,MAAI,KAAK,WACP,MAAK,WAAW,cAAc;;;AAKpC,MAAaA,6BAER;CACH,MAAM,CAAC,GAAG,kCAAkC,KAAK;CACjD,YAAY,UAAU,iBAAiB,EACrC,GAAG,kCAAkC,eAAe,SAAS,EAE9D;CACF;AAED,MAAaC,8BAEP,QAAQ,aAAa;AAEzB,QADuC,EAAE;;AAI3C,MAAaC,qBAA6E,yBACxF,wBACA,4BACA,4BACA,qBACD;AAGD,IAAI,CAAC,WAAW,eAAe,IAAI,uBAAuB,CACxD,YAAW,eAAe,OAAO,wBAAwB,mBAAmB"}

package/dist/media-skin-D44BfH6y.d.ts

@@ -1,182 +0,0 @@
-import { CurrentTimeDisplayState, DurationDisplayState, FullscreenButtonState, MediaStore, MuteButtonState, PlayButtonState } from "@videojs/core/store";
-import { Constructor, CustomElement } from "@open-wc/context-protocol";
-import { Placement } from "@floating-ui/dom";
-import { TimeSlider, VolumeSlider } from "@videojs/core";
-
-//#region src/utils/component-factory.d.ts
-
-interface ConnectedComponentConstructor<State> {
-  new (state: State): HTMLElement;
-}
-//#endregion
-//#region src/components/media-current-time-display.d.ts
-
-declare const CurrentTimeDisplay: ConnectedComponentConstructor<CurrentTimeDisplayState>;
-//#endregion
-//#region src/components/media-duration-display.d.ts
-
-declare const DurationDisplay: ConnectedComponentConstructor<DurationDisplayState>;
-//#endregion
-//#region src/components/media-fullscreen-button.d.ts
-
-declare const FullscreenButton: ConnectedComponentConstructor<FullscreenButtonState>;
-//#endregion
-//#region src/components/media-mute-button.d.ts
-
-declare const MuteButton: ConnectedComponentConstructor<MuteButtonState>;
-//#endregion
-//#region src/components/media-play-button.d.ts
-declare const PlayButton: ConnectedComponentConstructor<PlayButtonState>;
-//#endregion
-//#region src/components/media-popover.d.ts
-declare class Popover extends HTMLElement {
-  #private;
-  connectedCallback(): void;
-  disconnectedCallback(): void;
-  handleEvent(event: Event): void;
-  static get observedAttributes(): string[];
-  get openOnHover(): boolean;
-  get delay(): number;
-  get closeDelay(): number;
-  get side(): Placement;
-  get sideOffset(): number;
-}
-//#endregion
-//#region src/components/media-time-slider.d.ts
-
-declare const TimeSliderRoot: ConnectedComponentConstructor<{
-  currentTime: number;
-  duration: number;
-  requestSeek: (time: number) => void;
-  core: TimeSlider | null;
-}>;
-declare const TimeSliderTrack: ConnectedComponentConstructor<any>;
-declare const TimeSliderProgress: ConnectedComponentConstructor<any>;
-declare const TimeSliderPointer: ConnectedComponentConstructor<any>;
-declare const TimeSliderThumb: ConnectedComponentConstructor<any>;
-declare const TimeSlider$1: {
-  Root: typeof TimeSliderRoot;
-  Track: typeof TimeSliderTrack;
-  Progress: typeof TimeSliderProgress;
-  Pointer: typeof TimeSliderPointer;
-  Thumb: typeof TimeSliderThumb;
-};
-//#endregion
-//#region src/components/media-tooltip.d.ts
-declare class MediaTooltipRoot extends HTMLElement {
-  #private;
-  constructor();
-  handleEvent(event: Event): void;
-  connectedCallback(): void;
-  disconnectedCallback(): void;
-  static get observedAttributes(): string[];
-  get delay(): number;
-  get closeDelay(): number;
-  get trackCursorAxis(): "x" | "y" | "both" | undefined;
-}
-declare class MediaTooltipTrigger extends HTMLElement {
-  connectedCallback(): void;
-}
-declare class MediaTooltipPortal extends HTMLElement {
-  #private;
-  connectedCallback(): void;
-  disconnectedCallback(): void;
-  querySelector(selector: string): HTMLElement | null;
-}
-declare class MediaTooltipPositioner extends HTMLElement {
-  connectedCallback(): void;
-  get side(): Placement;
-  get sideOffset(): number;
-  get collisionPadding(): number;
-}
-declare class MediaTooltipPopup extends HTMLElement {
-  connectedCallback(): void;
-}
-declare class MediaTooltipArrow extends HTMLElement {
-  connectedCallback(): void;
-}
-declare const Tooltip: {
-  Root: typeof MediaTooltipRoot;
-  Trigger: typeof MediaTooltipTrigger;
-  Portal: typeof MediaTooltipPortal;
-  Positioner: typeof MediaTooltipPositioner;
-  Popup: typeof MediaTooltipPopup;
-  Arrow: typeof MediaTooltipArrow;
-};
-//#endregion
-//#region src/components/media-volume-slider.d.ts
-
-/**
-* Connected VolumeSlider Root component using hook-style architecture
-*/
-declare const VolumeSliderRoot: ConnectedComponentConstructor<{
-  volume: number;
-  muted: boolean;
-  volumeLevel: string;
-  requestVolumeChange: (volume: number) => void;
-  core: VolumeSlider | null;
-}>;
-/**
-* Connected VolumeSlider Track component
-*/
-declare const VolumeSliderTrack: ConnectedComponentConstructor<any>;
-/**
-* Connected VolumeSlider Progress component
-*/
-declare const VolumeSliderProgress: ConnectedComponentConstructor<any>;
-/**
-* Connected VolumeSlider Thumb component
-*/
-declare const VolumeSliderThumb: ConnectedComponentConstructor<any>;
-/**
-* Compound VolumeSlider component object
-*/
-declare const VolumeSlider$1: {
-  Root: typeof VolumeSliderRoot;
-  Track: typeof VolumeSliderTrack;
-  Progress: typeof VolumeSliderProgress;
-  Thumb: typeof VolumeSliderThumb;
-};
-//#endregion
-//#region src/media/media-container.d.ts
-declare const CustomElementConsumer: Constructor<CustomElement>;
-declare class MediaContainer extends CustomElementConsumer {
-  static shadowRootOptions: {
-    mode: ShadowRootMode;
-  };
-  static getTemplateHTML: () => string;
-  _mediaStore: any;
-  _mediaSlot: HTMLSlotElement;
-  _paused: boolean;
-  contexts: {
-    mediaStore: (mediaStore: any) => void;
-  };
-  constructor();
-  connectedCallback(): void;
-  disconnectedCallback(): void;
-  _registerContainerStateOwner: () => void;
-  _unregisterContainerStateOwner: () => void;
-  _handleMediaSlotChange: () => void;
-  _handleClick: (event: Event) => void;
-  _subscribeToPlayState: () => void;
-}
-//#endregion
-//#region src/media/media-provider.d.ts
-declare const ProviderHTMLElement: Constructor<CustomElement>;
-declare class MediaProvider extends ProviderHTMLElement {
-  contexts: {
-    mediaStore: () => MediaStore;
-  };
-}
-//#endregion
-//#region src/media/media-skin.d.ts
-declare class MediaSkin extends HTMLElement {
-  static shadowRootOptions: {
-    mode: ShadowRootMode;
-  };
-  static getTemplateHTML: () => string;
-  constructor();
-}
-//#endregion
-export { Tooltip as a, PlayButton as c, DurationDisplay as d, CurrentTimeDisplay as f, VolumeSlider$1 as i, MuteButton as l, MediaProvider as n, TimeSlider$1 as o, MediaContainer as r, Popover as s, MediaSkin as t, FullscreenButton as u };
-//# sourceMappingURL=media-skin-D44BfH6y.d.ts.map

package/dist/media-skin-D44BfH6y.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"media-skin-D44BfH6y.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}>","CurrentTimeDisplay: ConnectedComponentConstructor<CurrentTimeDisplayState>","useDurationDisplayState: StateHook<{\n  duration: number | undefined;\n}>","getDurationDisplayProps: PropsHook<{\n  duration: number | undefined;\n}>","DurationDisplay: ConnectedComponentConstructor<DurationDisplayState>","getFullscreenButtonState: StateHook<{ fullscreen: boolean }>","getFullscreenButtonProps: PropsHook<{ fullscreen: boolean }>","FullscreenButton: ConnectedComponentConstructor<FullscreenButtonState>","getMuteButtonState: StateHook<{\n  muted: boolean;\n  volumeLevel: string;\n}>","getMuteButtonProps: PropsHook<{\n  muted: boolean;\n  volumeLevel: string;\n}>","MuteButton: ConnectedComponentConstructor<MuteButtonState>","getPlayButtonState: StateHook<{ paused: boolean }>","getPlayButtonProps: PropsHook<{ paused: boolean }>","PlayButton: ConnectedComponentConstructor<PlayButtonState>","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>>","TimeSliderRoot: ConnectedComponentConstructor<{\n  currentTime: number;\n  duration: number;\n  requestSeek: (time: number) => void;\n  core: CoreTimeSlider | null;\n}>","TimeSliderTrack: ConnectedComponentConstructor<any>","TimeSliderProgress: ConnectedComponentConstructor<any>","TimeSliderPointer: ConnectedComponentConstructor<any>","TimeSliderThumb: ConnectedComponentConstructor<any>","Tooltip: {\n  Root: typeof MediaTooltipRoot;\n  Trigger: typeof MediaTooltipTrigger;\n  Portal: typeof MediaTooltipPortal;\n  Positioner: typeof MediaTooltipPositioner;\n  Popup: typeof MediaTooltipPopup;\n  Arrow: typeof MediaTooltipArrow;\n}","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>>","VolumeSliderRoot: ConnectedComponentConstructor<{\n  volume: number;\n  muted: boolean;\n  volumeLevel: string;\n  requestVolumeChange: (volume: number) => void;\n  core: CoreVolumeSlider | null;\n}>","VolumeSliderTrack: ConnectedComponentConstructor<any>","VolumeSliderProgress: ConnectedComponentConstructor<any>","VolumeSliderThumb: ConnectedComponentConstructor<any>","CustomElementConsumer: Constructor<CustomElement>","ProviderHTMLElement: Constructor<CustomElement>"],"sources":["../src/utils/component-factory.ts","../src/components/media-current-time-display.ts","../src/components/media-duration-display.ts","../src/components/media-fullscreen-button.ts","../src/components/media-mute-button.ts","../src/components/media-play-button.ts","../src/components/media-popover.ts","../src/components/media-time-slider.ts","../src/components/media-tooltip.ts","../src/components/media-volume-slider.ts","../src/media/media-container.ts","../src/media/media-provider.ts","../src/media/media-skin.ts"],"sourcesContent":[],"mappings":";;;;;;;UAaiB;cACH,QAAQ;AE+DtB;;;;AGbac,cJmBAZ,kBInB0C,EJmBtB,6BInBR,CJmBsC,uBInBtC,CAAA;;;;cHaZG,iBAAiB,8BAA8B;;;;cCH/CG,kBAAkB,8BAA8B;;;;cCWhDG,YAAY,8BAA8B;;;cCrB1CG,YAAY,8BAA8B;;;cChDjD,OAAA,SAAgB,WAAA;;;;qBAmCD;ENtCrB,WAAiB,kBAAA,CAAA,CAAA,EAAA,MAAA,EAAA;;;;ECsEjB,IAAaZ,IAAAA,CAAAA,CAAAA,EKMC,SLNDA;;;;;;AOmRA,cDvHAmB,cCuHA,EDvHgB,6BCuHe,CAAA;EA2B5C,WAAa,EAAA,MAAA;EAMb,QAAa,EAAA,MAAA;EA8Bb,WAAaK,EAAAA,CAAAA,IAAAA,EAAAA,MAAAA,EAAAA,GAAAA,IAAAA;EACE,IAAA,EDnLP,UCmLO,GAAA,IAAA;CACG,CAAA;AACD,cDlLJJ,eCkLI,EDlLa,6BCkLb,CAAA,GAAA,CAAA;AACI,cD5KRC,kBC4KQ,ED5KY,6BC4KZ,CAAA,GAAA,CAAA;AACL,cDtKHC,iBCsKG,EDtKgB,6BCsKhB,CAAA,GAAA,CAAA;AACA,cDhKHC,eCgKG,EDhKc,6BCgKd,CAAA,GAAA,CAAA;AAAA,cDzJH,YCyJG,EAAA;eD/ID;gBACC;mBACG;EElDnB,OAAaO,EAAAA,OFmDK,iBEnDLA;EAWb,KAAaC,EAAAA,OFyCG,eEzCgB;AAUhC,CAAA;;;cD3Pa,gBAAA,SAAyB,WAAA;;;qBAkBjB;;ERXrB,oBAAiB,CAAA,CAAA,EAAA,IAAA;;;;ECsEjB,IAAa/B,eAAAA,CAAAA,CAAAA,EAAAA,GAAkD,GAAA,GAAA,GAAA,MAAA,GAAA,SAAA;;cOmLlD,mBAAA,SAA4B,WAAA;;ANzLzC;cMuOa,kBAAA,SAA2B,WAAA;;;EL1OxC,oBAAaM,CAAAA,CAAgD,EAAA,IAAA;mCKsP1B;;cAsCtB,sBAAA,SAA+B,WAAA;EJjR5C,iBAAuD,CAAA,CAAA,EAAA,IAAA;cI+RzC;;;AHpTd;cGiUa,iBAAA,SAA0B,WAAA;;;AFjXjC,cEuXO,iBAAA,SAA0B,WAAA,CFvXjC;EAmCe,iBAAA,CAAA,CAAA,EAAA,IAAA;;AAnCC,cEqZTkB,OFrZS,EAAA;EAAA,IAAA,EAAA,OEsZP,gBFtZO;kBEuZJ;iBACD;qBACI;ED1LrB,KAAaL,EAAAA,OC2LG,iBD3LHA;EAOb,KAAaC,EAAAA,OCqLG,iBDrLc;AAO9B,CAAA;;;;;;;AG9OMc,cD6NOJ,gBC7N4B,ED6NV,6BC7NF,CAAA;EAE7B,MAAa,EAAA,MAAA;EACkC,KAAA,EAAA,OAAA;EAIjC,WAAA,EAAA,MAAA;EAmDW,mBAAA,EAAA,CAAA,MAAA,EAAA,MAAA,EAAA,GAAA,IAAA;EAxDW,IAAA,EDgO5B,YChO4B,GAAA,IAAA;CAAA,CAAA;;;;ACX9BK,cFiPOJ,iBEjP0B,EFiPP,6BEjPL,CAAA,GAAA,CAAA;AAE3B;;;cFyPaC,sBAAsB;AGhPnC;;;cH0PaC,mBAAmB;;;;cAUnB;eASE;gBACC;mBACG;gBACH;;;;cClRVC,uBAAuB,YAAY;cAE5B,cAAA,SAAuB,qBAAA;;UACW;EVL/C,CAAA;;;cUSc;ET6Dd,OAAalC,EAAAA,OAAAA;;;;ECNb,WAAaG,CAAAA;;;;ECHb,8BAA6D,EAAA,GAAA,GAAA,IAAA;;wBODpC;;ANYzB;;;cO/EMgC,qBAAqB,YAAY;cAE1B,aAAA,SAAsB,mBAAA;;sBAEf;EXGpB,CAAA;;;;cYIa,SAAA,SAAkB,WAAA;;UACgB;;;EZL/C,WAAiB,CAAA"}