/**
 * @Datei volume-bar.js
 * /
import Slider from '../../slider/slider.js';
importiere Komponente aus '../../component.js';
import * as Dom from '../../utils/dom.js';
import clamp from '../../utils/clamp.js';
importiere {IS_IOS, IS_ANDROID} aus '../../utils/browser.js';

// Erforderliche Kinder
importieren './volume-level.js';
importieren './mouse-volume-level-display.js';

/**
 * Die Leiste, die den Lautstärkepegel enthält und auf die Sie klicken können, um den Pegel einzustellen
 *
 * @extends Schieberegler
 * /
class VolumeBar extends Slider {

  /**
   * Erzeugt eine Instanz dieser Klasse.
   *
   * @param {Player} Spieler
   *        Der `Player`, dem diese Klasse zugeordnet werden soll.
   *
   * @param {Object} [Optionen]
   *        Der Schlüssel/Wertspeicher der Playeroptionen.
   * /
  constructor(spieler, optionen) {
    super(Spieler, Optionen);
    this.on('slideractive', (e) => this.updateLastVolume_(e));
    this.on(player, 'volumechange', (e) => this.updateARIAAttributes(e));
    player.ready(() => this.updateARIAAttributes());
  }

  /**
   * Das DOM-Element der Komponente erstellen
   *
   * @return {Element}
   *         Das Element, das erstellt wurde.
   * /
  createEl() {
    return super.createEl('div', {
      className: 'vjs-volume-bar vjs-slider-bar'
    }, {
      aria-label': this.localize('Lautstärkepegel'),
      aria-live': 'höflich'
    });
  }

  /**
   * Maus auf der Lautstärkeleiste nach unten bewegen
   *
   * @param {EventTarget~Event} event
   *        Das "Mousedown"-Ereignis, das diesen Vorgang ausgelöst hat.
   *
   * @listens mousedown
   * /
  handleMouseDown(event) {
    if (!Dom.isSingleLeftClick(event)) {
      rückkehr;
    }

    super.handleMouseDown(event);
  }

  /**
   * Behandelt Bewegungsereignisse auf der {@link VolumeMenuButton}.
   *
   * @param {EventTarget~Event} event
   *        Das Ereignis, das diese Funktion ausgelöst hat.
   *
   * @listens mousemove
   * /
  handleMouseMove(event) {
    const mouseVolumeLevelDisplay = this.getChild('mouseVolumeLevelDisplay');

    if (mouseVolumeLevelDisplay) {
      const volumeBarEl = this.el();
      const volumeBarRect = Dom.getBoundingClientRect(volumeBarEl);
      const vertical = this.vertical();
      let volumeBarPoint = Dom.getPointerPosition(volumeBarEl, event);

      volumeBarPoint = vertikal ? volumeBarPoint.y : volumeBarPoint.x;
      // Der Standard-Skin hat eine Lücke auf beiden Seiten des `VolumeBar`. Dies bedeutet
      // dass es möglich ist, dieses Verhalten außerhalb der Grenzen von
      // der `Volumenbalken`. Damit ist sichergestellt, dass wir uns jederzeit daran halten.
      volumeBarPoint = clamp(volumeBarPoint, 0, 1);

      mouseVolumeLevelDisplay.update(volumeBarRect, volumeBarPoint, vertical);
    }

    if (!Dom.isSingleLeftClick(event)) {
      rückkehr;
    }

    this.checkMuted();
    this.player_.volume(this.calculateDistance(event));
  }

  /**
   * Wenn der Player stummgeschaltet ist, schalten Sie ihn wieder ein.
   * /
  checkMuted() {
    if (this.player_.muted()) {
      this.player_.muted(false);
    }
  }

  /**
   * Prozent der Lautstärke abrufen
   *
   * @return {number}
   *         Lautstärkepegel in Prozent als Dezimalzahl.
   * /
  getPercent() {
    if (this.player_.muted()) {
      0 zurückgeben;
    }
    return this.player_.volume();
  }

  /**
   * Lautstärkepegel für Tastaturbenutzer erhöhen
   * /
  stepForward() {
    this.checkMuted();
    this.player_.volume(this.player_.volume() + 0.1);
  }

  /**
   * Verringern der Lautstärke für Tastaturbenutzer
   * /
  stepBack() {
    this.checkMuted();
    this.player_.volume(this.player_.volume() - 0.1);
  }

  /**
   * ARIA-Zugänglichkeitsattribute aktualisieren
   *
   * @param {EventTarget~Event} [event]
   *        Das Ereignis `Volumenänderung`, das die Ausführung dieser Funktion verursacht hat.
   *
   * @listens Player#Lautstärkeänderung
   * /
  updateARIAAttributes(event) {
    const ariaValue = this.player_.muted() ? 0 : this.volumeAsPercentage_();

    this.el_.setAttribute('aria-valuenow', ariaValue);
    this.el_.setAttribute('aria-valuetext', ariaValue + '%');
  }

  /**
   * Gibt den aktuellen Wert der Lautstärke des Players in Prozent zurück
   *
   * @privat
   * /
  volumeAsPercentage_() {
    return Math.round(this.player_.volume() * 100);
  }

  /**
   * Wenn der Benutzer beginnt, den Lautstärkebalken zu ziehen, speichern Sie die Lautstärke und warten Sie auf
   * das Ende des Widerstandes. Wenn das Ziehen endet, wenn die Lautstärke auf Null gesetzt wurde,
   * lastVolume auf das gespeicherte Volumen setzen.
   *
   * @listens slideractive
   * @privat
   * /
  updateLastVolume_() {
    const volumeBeforeDrag = this.player_.volume();

    this.one('sliderinactive', () => {
      if (this.player_.volume() === 0) {
        this.player_.lastVolume_(volumeBeforeDrag);
      }
    });
  }

}

/**
 * Vorgegebene Optionen für den `VolumeBar`
 *
 * @Typ {Objekt}
 * @privat
 * /
VolumeBar.prototype.options_ = {
  kinder: [
    'volumeLevel'
  ],
  barName: 'volumeLevel'
};

// MouseVolumeLevelDisplay-Tooltip sollte einem Player auf mobilen Geräten nicht hinzugefügt werden
if (!IS_IOS && !IS_ANDROID) {
  VolumeBar.prototype.options_.children.splice(0, 0, 'mouseVolumeLevelDisplay');
}

/**
 * Ruft das Aktualisierungsereignis für diesen Schieberegler auf, wenn dieses Ereignis beim Player eintritt.
 *
 * @Typ {String}
 * /
VolumeBar.prototype.playerEvent = 'volumechange';

Component.registerComponent('VolumeBar', VolumeBar);
standard VolumeBar exportieren;