/**
 * @Datei mouse-volume-level-display.js
 * /
importiere Komponente aus '../../component.js';
import * as Fn from '../../utils/fn.js';

importieren './volume-level-tooltip';

/**
 * Die Komponente {@link MouseVolumeLevelDisplay} verfolgt die Mausbewegung über die
 * {@link VolumeControl}. Es zeigt einen Indikator und einen {@link VolumeLevelTooltip}
 * der den Lautstärkepegel angibt, der durch einen bestimmten Punkt in der Tabelle repräsentiert wird
 * {@link VolumeBar}.
 *
 * @erweitert Komponente
 * /
class MouseVolumeLevelDisplay extends Component {

  /**
   * Erzeugt eine Instanz dieser Klasse.
   *
   * @param {Player} Spieler
   *        Der {@link Player}, dem diese Klasse zugeordnet werden soll.
   *
   * @param {Object} [Optionen]
   *        Der Schlüssel/Wertspeicher der Playeroptionen.
   * /
  constructor(spieler, optionen) {
    super(Spieler, Optionen);
    this.update = Fn.throttle(Fn.bind(this, this.update), Fn.UPDATE_REFRESH_INTERVAL);
  }

  /**
   * Erstellen Sie das DOM-Element für diese Klasse.
   *
   * @return {Element}
   *         Das Element, das erstellt wurde.
   * /
  createEl() {
    return super.createEl('div', {
      className: 'vjs-mouse-display'
    });
  }

  /**
   * Erfragt Aktualisierungen seines eigenen DOM sowie des DOM seiner
   * {@link VolumeLevelTooltip} Kind.
   *
   * @param {Object} rangeBarRect
   *        Das `ClientRect` für das Element {@link VolumeBar}.
   *
   * @param {Zahl} rangeBarPoint
   *        Eine Zahl von 0 bis 1, die einen horizontalen/vertikalen Referenzpunkt darstellt
   *        vom linken Rand des {@link VolumeBar}
   *
   * @param {boolean} vertikal
   *        Schiedsrichter in die Position der Lautstärkekontrolle
   *        in der Kontrollleiste{@link VolumeControl}
   *
   * /
  update(rangeBarRect, rangeBarPoint, vertical) {
    const volume = 100 * rangeBarPoint;

    this.getChild('volumeLevelTooltip').updateVolume(rangeBarRect, rangeBarPoint, vertical, volume, () => {
      wenn (vertikal) {
        this.el_.style.bottom = `${rangeBarRect.height * rangeBarPoint}px`;
      } else {
        this.el_.style.left = `${rangeBarRect.width * rangeBarPoint}px`;
      }
    });
  }
}

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

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