/**
 * @Datei volume-control.js
 * /
importiere Komponente aus '../component.js';
importiere {isPlain} von '../utils/obj';
import * as Events aus '../utils/events.js';
import keycode from 'keycode';
dokument aus 'global/document' importieren;

// Erforderliche Kinder
importieren './volume-control/volume-control.js';
importieren './mute-toggle.js';

/**
 * Eine Komponente, die den MuteToggle und das VolumeControl enthält, so dass
 * sie können zusammenarbeiten.
 *
 * @erweitert Komponente
 * /
class VolumePanel extends Component {

  /**
   * Erzeugt eine Instanz dieser Klasse.
   *
   * @param {Player} Spieler
   *        Der `Player`, dem diese Klasse zugeordnet werden soll.
   *
   * @param {Object} [options={}]
   *        Der Schlüssel/Wertspeicher der Playeroptionen.
   * /
  constructor(player, options = {}) {
    if (typeof options.inline !== 'undefined') {
      options.inline = options.inline;
    } else {
      options.inline = true;
    }

    // Übergabe der Inline-Option an das VolumeControl als vertikales if
    // die Lautstärkeregelung ist eingeschaltet.
    if (typeof options.volumeControl === 'undefined' || isPlain(options.volumeControl)) {
      options.volumeControl = options.volumeControl || {};
      options.volumeControl.vertical = !options.inline;
    }

    super(Spieler, Optionen);

    // dieser Handler wird von den folgenden Maushandler-Methoden verwendet
    this.handleKeyPressHandler_ = (e) => this.handleKeyPress(e);

    this.on(player, ['loadstart'], (e) => this.volumePanelState_(e));
    this.on(this.muteToggle, 'keyup', (e) => this.handleKeyPress(e));
    this.on(this.volumeControl, 'keyup', (e) => this.handleVolumeControlKeyUp(e));
    this.on('keydown', (e) => this.handleKeyPress(e));
    this.on('mouseover', (e) => this.handleMouseOver(e));
    this.on('mouseout', (e) => this.handleMouseOut(e));

    // während der Schieberegler aktiv ist (die Maus wurde gedrückt und
    // wird gezogen) wollen wir den VolumeBar nicht ausblenden
    this.on(this.volumeControl, ['slideractive'], this.sliderActive_);

    this.on(this.volumeControl, ['sliderinactive'], this.sliderInactive_);
  }

  /**
   * Hinzufügen der Klasse vjs-slider-active zum VolumePanel
   *
   * @listens VolumeControl#slideractive
   * @privat
   * /
  sliderActive_() {
    this.addClass('vjs-slider-active');
  }

  /**
   * Entfernt die Klasse vjs-slider-active aus dem VolumePanel
   *
   * @listens VolumeControl#sliderinactive
   * @privat
   * /
  sliderInactive_() {
    this.removeClass('vjs-slider-active');
  }

  /**
   * Fügt vjs-hidden oder vjs-mute-toggle-only zum VolumePanel hinzu
   * abhängig vom Zustand von MuteToggle und VolumeControl
   *
   * @listens Player#loadstart
   * @privat
   * /
  volumePanelState_() {
    // Lautstärkeregler ausblenden, wenn weder Lautstärkeregler noch Stummschalter
    // werden angezeigt
    if (this.volumeControl.hasClass('vjs-hidden') && this.muteToggle.hasClass('vjs-hidden')) {
      this.addClass('vjs-hidden');
    }

    // Wenn nur die Stummschaltfunktion sichtbar ist, wollen wir nicht
    // Lautstärkeregler erweitert sich, wenn er mit dem Mauszeiger bewegt wird oder aktiv ist
    if (this.volumeControl.hasClass('vjs-hidden') && !this.muteToggle.hasClass('vjs-hidden')) {
      this.addClass('vjs-mute-toggle-only');
    }
  }

  /**
   * Das DOM-Element der Komponente erstellen
   *
   * @return {Element}
   *         Das Element, das erstellt wurde.
   * /
  createEl() {
    let orientationClass = 'vjs-volume-panel-horizontal';

    if (!this.options_.inline) {
      orientationClass = 'vjs-volume-panel-vertical';
    }

    return super.createEl('div', {
      className: `vjs-volume-panel vjs-control ${orientationClass}`
    });
  }

  /**
   * Beseitigen Sie das `Volumen-Panel` und alle untergeordneten Komponenten.
   * /
  dispose() {
    this.handleMouseOut();
    super.dispose();
  }

  /**
   * Verarbeitet `Keyup'-Ereignisse auf dem `VolumeControl`, sucht nach ESC, das schließt
   * das Lautstärkefeld und setzt den Fokus auf "MuteToggle".
   *
   * @param {EventTarget~Event} event
   *        Das "keyup"-Ereignis, das zum Aufruf dieser Funktion geführt hat.
   *
   * @listens keyup
   * /
  handleVolumeControlKeyUp(event) {
    if (keycode.isEventKey(event, 'Esc')) {
      this.muteToggle.focus();
    }
  }

  /**
   * Diese Funktion wird aufgerufen, wenn ein "VolumePanel" über ein "Mouseover"-Ereignis den Schwebezustand erreicht.
   * Schaltet das Lauschen auf das Ereignis "Mouseover" ein. Wenn sie passieren, dann
   * ruft `this.handleMouseOver` auf.
   *
   * @param {EventTarget~Event} event
   *        Das `mouseover'-Ereignis, das den Aufruf dieser Funktion verursacht hat.
   *
   * @listens mouseover
   * /
  handleMouseOver(event) {
    this.addClass('vjs-hover');
    Events.on(document, 'keyup', this.handleKeyPressHandler_);
  }

  /**
   * Diese Funktion wird aufgerufen, wenn ein "VolumePanel" über ein "Mouseout"-Ereignis den Schwebezustand erreicht.
   * Schaltet das Abhören des Ereignisses `Mouseout` ein. Wenn sie passieren, dann
   * ruft `this.handleMouseOut` auf.
   *
   * @param {EventTarget~Event} event
   *        Das `Mouseout'-Ereignis, das den Aufruf dieser Funktion verursacht hat.
   *
   * @listens mouseout
   * /
  handleMouseOut(event) {
    this.removeClass('vjs-hover');
    Events.off(document, 'keyup', this.handleKeyPressHandler_);
  }

  /**
   * Behandelt das "keyup"-Ereignis auf dem Dokument oder das "keydown"-Ereignis auf dem "VolumePanel",
   * suche nach ESC, das die "Lautstärkeregelung" ausblendet.
   *
   * @param {EventTarget~Event} event
   *        Der Tastendruck, der dieses Ereignis ausgelöst hat.
   *
   * @listens keydown | keyup
   * /
  handleKeyPress(event) {
    if (keycode.isEventKey(event, 'Esc')) {
      this.handleMouseOut();
    }
  }
}

/**
 * Standardoptionen für das `VolumeControl`
 *
 * @Typ {Objekt}
 * @privat
 * /
VolumePanel.prototype.options_ = {
  kinder: [
    muteToggle',
    'volumeControl'
  ]
};

Component.registerComponent('VolumePanel', VolumePanel);
standard-VolumePanel exportieren;