/**
 * @文件音量控制.js
 */
從 '../component.js' 導入組件；
從 '../utils/obj' 導入 {isPlain}；
import * as Events from '../utils/events.js';
從“鍵碼”導入鍵碼；
從“全局/文檔”導入文檔；

// 必需的孩子
導入'./volume-control/volume-control.js';
導入'./mute-toggle.js'；

/**
 * 包含 MuteToggle 和 VolumeControl 的組件，以便
 * 他們可以一起工作。
 *
 * @extends 組件
 */
類 VolumePanel 擴展組件 {

  /**
   * 創建此類的一個實例。
   *
   * @param {Player} 播放器
   * 此類應附加到的 `Player`。
   *
   * @param {對象} [選項={}]
   * 播放器選項的鍵/值存儲。
   */
  構造函數（播放器，選項= {}）{
    if (typeof options.inline !== 'undefined') {
      options.inline = options.inline;
    }其他{
      options.inline = true;
    }

    // 如果垂直，則將內聯選項向下傳遞給 VolumeControl
    // 音量控制開啟。
    if (typeof options.volumeControl === 'undefined' || isPlain(options.volumeControl)) {
      options.volumeControl = options.volumeControl || {};
      options.volumeControl.vertical = !options.inline;
    }

    超級（播放器，選項）；

    // 此處理程序由下面的鼠標處理程序方法使用
    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));

    // 當滑塊處於活動狀態時（鼠標已被按下並
    // 正在拖動）我們不想隱藏 VolumeBar
    this.on(this.volumeControl, ['slideractive'], this.sliderActive_);

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

  /**
   * 將 vjs-slider-active 類添加到 VolumePanel
   *
   * @listens 音量控制#slideractive
   * @私人的
   */
  sliderActive_() {
    this.addClass('vjs-slider-active');
  }

  /**
   * 將 vjs-slider-active 類移除到 VolumePanel
   *
   * @listens VolumeControl#sliderinactive
   * @私人的
   */
  sliderInactive_() {
    this.removeClass('vjs-slider-active');
  }

  /**
   * 添加 vjs-hidden 或 vjs-mute-toggle-only 到 VolumePanel
   * 取決於 MuteToggle 和 VolumeControl 狀態
   *
   * @listens Player#loadstart
   * @私人的
   */
  volumePanelState_() {
    // 如果既沒有音量控制也沒有靜音切換，則隱藏音量面板
    // 被顯示
    if (this.volumeControl.hasClass('vjs-hidden') && this.muteToggle.hasClass('vjs-hidden')) {
      this.addClass('vjs-hidden');
    }

    // 如果只有靜音開關可見，我們不想要
    // 音量面板在懸停或活動時擴展
    if (this.volumeControl.hasClass('vjs-hidden') && !this.muteToggle.hasClass('vjs-hidden')) {
      this.addClass('vjs-mute-toggle-only');
    }
  }

  /**
   * 創建 `Component` 的 DOM 元素
   *
   * @return {元素}
   * 創建的元素。
   */
  創建El() {
    讓 orientationClass = 'vjs-volume-panel-horizontal';

    如果（！this.options_.inline）{
      orientationClass = 'vjs-volume-panel-vertical';
    }

    返回 super.createEl('div', {
      類名：`vjs-volume-panel vjs-control ${orientationClass}`
    }）；
  }

  /**
   * 處理 `volume-panel` 和所有子組件。
   */
  處置（）{
    這個.handleMouseOut();
    super.dispose();
  }

  /**
   * 處理 `VolumeControl` 上的 `keyup` 事件，尋找關閉的 ESC
   * 音量面板並將焦點設置在“MuteToggle”上。
   *
   * @param {EventTarget~Event} 事件
   * 導致調用此函數的 `keyup` 事件。
   *
   * @listens 按鍵
   */
  handleVolumeControlKeyUp（事件）{
    如果 (keycode.isEventKey(event, 'Esc')) {
      this.muteToggle.focus();
    }
  }

  /**
   * 當 `VolumePanel` 通過 `mouseover` 事件懸停時調用。
   * 打開監聽`mouseover` 事件。當它們發生時
   * 調用 `this.handleMouseOver`。
   *
   * @param {EventTarget~Event} 事件
   * 導致調用此函數的 `mouseover` 事件。
   *
   * @listens 鼠標懸停
   */
  handleMouseOver（事件）{
    this.addClass('vjs-懸停');
    Events.on(document, 'keyup', this.handleKeyPressHandler_);
  }

  /**
   * 當 `VolumePanel` 通過 `mouseout` 事件懸停時調用。
   * 打開監聽 `mouseout` 事件。當它們發生時
   * 調用 `this.handleMouseOut`。
   *
   * @param {EventTarget~Event} 事件
   * 導致調用此函數的 `mouseout` 事件。
   *
   * @listens 鼠標移出
   */
  handleMouseOut（事件）{
    this.removeClass('vjs-hover');
    Events.off(文檔, 'keyup', this.handleKeyPressHandler_);
  }

  /**
   * 處理文檔上的 `keyup` 事件或 `VolumePanel` 上的 `keydown` 事件，
   * 尋找隱藏 `VolumeControl` 的 ESC。
   *
   * @param {EventTarget~Event} 事件
   * 觸發此事件的按鍵。
   *
   * @listens 按鍵 |按鍵
   */
  handleKeyPress（事件）{
    如果 (keycode.isEventKey(event, 'Esc')) {
      這個.handleMouseOut();
    }
  }
}

/**
 * `VolumeControl` 的默認選項
 *
 * @type {對象}
 * @私人的
 */
VolumePanel.prototype.options_ = {
  孩子們： [
    '靜音切換',
    '音量控制'
  ]
};

Component.registerComponent('VolumePanel', VolumePanel);
導出默認音量面板；