@aidenlx/player/dist-prod/ui/volume-slider/VolumeSliderElement.js

Headless web components that make integrating media on the a web a breeze.

import {
  __decorateClass
} from "../../chunks/chunk.LNH2V2XS.js";
import { eventListener, round, setAttributeIfEmpty } from "@vidstack/foundation";
import { property } from "lit/decorators.js";
import { mediaStoreSubscription } from "../../media";
import { SliderElement } from "../slider";
class VolumeSliderElement extends SliderElement {
  constructor() {
    super();
    this.value = 100;
    this._handleSliderValueChange = eventListener(this, "vds-slider-value-change", this._changeVolume.bind(this));
    this._handleSliderDragValueChange = eventListener(this, "vds-slider-drag-value-change", this._changeVolume.bind(this));
    mediaStoreSubscription(this, "volume", ($volume) => {
      this.value = $volume * 100;
    });
  }
  connectedCallback() {
    super.connectedCallback();
    setAttributeIfEmpty(this, "aria-label", "Media volume");
  }
  get min() {
    return 0;
  }
  set min(_) {
  }
  get max() {
    return 100;
  }
  set max(_) {
  }
  _changeVolume(event) {
    const newVolume = event.detail;
    const mediaVolume = round(newVolume / 100, 3);
    this._mediaRemote.changeVolume(mediaVolume, event);
  }
}
__decorateClass([
  property({ attribute: false })
], VolumeSliderElement.prototype, "min", 1);
__decorateClass([
  property({ attribute: false })
], VolumeSliderElement.prototype, "max", 1);
__decorateClass([
  property({ attribute: false, state: true })
], VolumeSliderElement.prototype, "value", 2);
export {
  VolumeSliderElement
};