import { playerContext } from "../../player/context.js";
import { MediaElement } from "../media-element.js";
import { PlayerController } from "../../player/player-controller.js";
import { sliderContext } from "../slider/context.js";
import { applyElementProps, applyStateDataAttrs, createSlider, getSliderCSSVars, logMissingFeature, selectVolume } from "@videojs/core/dom";
import { ContextProvider } from "@videojs/element/context";
import { SliderDataAttrs, VolumeSliderCore } from "@videojs/core";
import { applyStyles, isRTL } from "@videojs/utils/dom";

//#region src/ui/volume-slider/volume-slider-element.ts
var VolumeSliderElement = class extends MediaElement {
	constructor(..._args) {
		super(..._args);
		this.label = VolumeSliderCore.defaultProps.label;
		this.step = VolumeSliderCore.defaultProps.step;
		this.largeStep = VolumeSliderCore.defaultProps.largeStep;
		this.orientation = VolumeSliderCore.defaultProps.orientation;
		this.disabled = VolumeSliderCore.defaultProps.disabled;
		this.thumbAlignment = VolumeSliderCore.defaultProps.thumbAlignment;
	}
	static {
		this.tagName = "media-volume-slider";
	}
	static {
		this.properties = {
			label: { type: String },
			step: { type: Number },
			largeStep: {
				type: Number,
				attribute: "large-step"
			},
			orientation: { type: String },
			disabled: { type: Boolean },
			thumbAlignment: {
				type: String,
				attribute: "thumb-alignment"
			}
		};
	}
	#core = new VolumeSliderCore();
	#provider = new ContextProvider(this, { context: sliderContext });
	#volumeState = new PlayerController(this, playerContext, selectVolume);
	#slider = null;
	#disconnect = null;
	connectedCallback() {
		super.connectedCallback();
		if (this.destroyed) return;
		this.#disconnect = new AbortController();
		const signal = this.#disconnect.signal;
		this.#slider = createSlider({
			getElement: () => this,
			getThumbElement: () => this.querySelector("media-slider-thumb"),
			getOrientation: () => this.orientation,
			isRTL: () => isRTL(this),
			isDisabled: () => this.disabled || !this.#volumeState.value,
			getPercent: () => {
				const media = this.#volumeState.value;
				if (!media) return 0;
				return media.volume * 100;
			},
			getStepPercent: () => this.#core.getStepPercent(),
			getLargeStepPercent: () => this.#core.getLargeStepPercent(),
			onValueChange: (percent) => {
				this.#setVolume(percent);
			},
			onValueCommit: (percent) => {
				this.#setVolume(percent);
			},
			onDragStart: () => {
				this.dispatchEvent(new CustomEvent("drag-start", { bubbles: true }));
			},
			onDragEnd: () => {
				this.dispatchEvent(new CustomEvent("drag-end", { bubbles: true }));
			},
			adjustPercent: (raw, thumbSize, trackSize) => this.#core.adjustPercentForAlignment(raw, thumbSize, trackSize),
			onResize: () => this.requestUpdate()
		});
		applyElementProps(this, this.#slider.rootProps, { signal });
		applyStyles(this, this.#slider.rootStyle);
		this.#slider.input.subscribe(() => this.requestUpdate(), { signal });
		if (!this.#volumeState.value) logMissingFeature(this.localName, this.#volumeState.displayName);
	}
	disconnectedCallback() {
		super.disconnectedCallback();
		this.#disconnect?.abort();
		this.#disconnect = null;
	}
	destroyCallback() {
		this.#slider?.destroy();
		super.destroyCallback();
	}
	willUpdate(_changed) {
		super.willUpdate(_changed);
		this.#core.setProps(this);
	}
	update(_changed) {
		super.update(_changed);
		if (!this.#slider) return;
		const media = this.#volumeState.value;
		if (!media) return;
		this.#core.setInput(this.#slider.input.current);
		this.#core.setMedia(media);
		const state = this.#core.getState();
		const cssVars = getSliderCSSVars(this.#slider.adjustForAlignment(state));
		applyStyles(this, cssVars);
		applyStateDataAttrs(this, state, SliderDataAttrs);
		this.#provider.setValue({
			state,
			stateAttrMap: SliderDataAttrs,
			pointerValue: this.#core.valueFromPercent(state.pointerPercent),
			thumbAttrs: this.#core.getAttrs(state),
			thumbProps: this.#slider.thumbProps,
			formatValue: (value) => `${Math.round(value)}%`
		});
	}
	#setVolume(percent) {
		this.#volumeState.value?.setVolume(this.#core.valueFromPercent(percent) / 100);
	}
};

//#endregion
export { VolumeSliderElement };
//# sourceMappingURL=volume-slider-element.js.map