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

package/dist/volume-slider-CbFzCHX4.js

@@ -1,206 +0,0 @@
-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 VolumeSliderIndicator = 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 VolumeSliderIndicatorElement = toConnectedHTMLComponent(VolumeSliderIndicator, {
-	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,
-	Indicator: VolumeSliderIndicatorElement,
-	Thumb: VolumeSliderThumbElement
-});
-
-//#endregion
-export { VolumeSliderTrackElement as a, VolumeSliderThumbElement as i, VolumeSliderIndicatorElement as n, VolumeSliderRootElement as r, VolumeSliderElement as t };
-//# sourceMappingURL=volume-slider-CbFzCHX4.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"volume-slider-CbFzCHX4.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>","VolumeSliderIndicatorElement: 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 VolumeSliderIndicator 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 VolumeSliderIndicatorElement: ConnectedComponentConstructor<any> = toConnectedHTMLComponent(\n  VolumeSliderIndicator,\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    Indicator: VolumeSliderIndicatorElement,\n    Thumb: VolumeSliderThumbElement,\n  },\n) as {\n  Root: typeof VolumeSliderRootElement;\n  Track: typeof VolumeSliderTrackElement;\n  Indicator: typeof VolumeSliderIndicatorElement;\n  Thumb: typeof VolumeSliderThumbElement;\n};\n"],"mappings":"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"}