/**
 * @Datei volume-control.js
 * /
importiere Komponente aus '../../component.js';
import checkVolumeSupport from './check-volume-support';
importiere {isPlain} von '../../utils/obj';
importiere {throttle, bind, UPDATE_REFRESH_INTERVAL} aus '../../utils/fn.js';

// Erforderliche Kinder
importieren './volume-bar.js';

/**
 * Die Komponente zur Steuerung des Lautstärkepegels
 *
 * @erweitert Komponente
 * /
class VolumeControl 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 = {}) {
    options.vertical = options.vertical || false;

    // Übergeben Sie die vertikale Option nach unten an den VolumeBar, wenn
    // Der Lautstärkebalken ist eingeschaltet.
    if (typeof options.volumeBar === 'undefined' || isPlain(options.volumeBar)) {
      options.volumeBar = options.volumeBar || {};
      options.volumeBar.vertical = options.vertical;
    }

    super(Spieler, Optionen);

    // dieses Steuerelement ausblenden, wenn keine Lautstärkeunterstützung vorhanden ist
    checkVolumeSupport(this, player);

    this.throttledHandleMouseMove = throttle(bind(this, this.handleMouseMove), UPDATE_REFRESH_INTERVAL);
    this.handleMouseUpHandler_ = (e) => this.handleMouseUp(e);

    this.on('mousedown', (e) => this.handleMouseDown(e));
    this.on('touchstart', (e) => this.handleMouseDown(e));
    this.on('mousemove', (e) => this.handleMouseMove(e));

    // während der Schieberegler aktiv ist (die Maus wurde gedrückt und
    // gezogen wird) oder im Fokus ist, wollen wir den VolumeBar nicht ausblenden
    this.on(this.volumeBar, ['focus', 'slideractive'], () => {
      this.volumeBar.addClass('vjs-slider-active');
      this.addClass('vjs-slider-active');
      this.trigger('slideractive');
    });

    this.on(this.volumeBar, ['blur', 'sliderinactive'], () => {
      this.volumeBar.removeClass('vjs-slider-active');
      this.removeClass('vjs-slider-active');
      this.trigger('sliderinactive');
    });
  }

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

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

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

  /**
   * Behandelt "Mousedown"- oder "Touchstart"-Ereignisse auf dem "VolumeControl".
   *
   * @param {EventTarget~Event} event
   *        mousedown"- oder "Touchstart"-Ereignis, das diese Funktion ausgelöst hat
   *
   * @listens mousedown
   * @listens touchstart
   * /
  handleMouseDown(event) {
    const doc = this.el_.ownerDocument;

    this.on(doc, 'mousemove', this.throttledHandleMouseMove);
    this.on(doc, 'touchmove', this.throttledHandleMouseMove);
    this.on(doc, 'mouseup', this.handleMouseUpHandler_);
    this.on(doc, 'touchend', this.handleMouseUpHandler_);
  }

  /**
   * Behandelt `Mouseup` oder `Touchend` Ereignisse auf dem `VolumeControl`.
   *
   * @param {EventTarget~Event} event
   *        mouseup"- oder "Touchend"-Ereignis, das diese Funktion ausgelöst hat.
   *
   * @listens berührend
   * @listens mouseup
   * /
  handleMouseUp(event) {
    const doc = this.el_.ownerDocument;

    this.off(doc, 'mousemove', this.throttledHandleMouseMove);
    this.off(doc, 'touchmove', this.throttledHandleMouseMove);
    this.off(doc, 'mouseup', this.handleMouseUpHandler_);
    this.off(doc, 'touchend', this.handleMouseUpHandler_);
  }

  /**
   * Behandelt "Mousedown"- oder "Touchstart"-Ereignisse auf dem "VolumeControl".
   *
   * @param {EventTarget~Event} event
   *        mousedown"- oder "Touchstart"-Ereignis, das diese Funktion ausgelöst hat
   *
   * @listens mousedown
   * @listens touchstart
   * /
  handleMouseMove(event) {
    this.volumeBar.handleMouseMove(event);
  }
}

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

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