/**
 * @file volume-bar.js
 */
從'../../slider/slider.js'導入滑塊；
從 '../../component.js' 導入組件；
import * as Dom from '../../utils/dom.js';
從 '../../utils/clamp.js' 導入箝位；
從 '../../utils/browser.js' 導入 {IS_IOS, IS_ANDROID}；

// 必需的孩子
導入“./volume-level.js”；
導入 './mouse-volume-level-display.js';

/**
 * 包含音量級別的欄，可以單擊以調整級別
 *
 * @extends 滑塊
 */
類 VolumeBar 擴展滑塊 {

  /**
   * 創建此類的一個實例。
   *
   * @param {Player} 播放器
   * 此類應附加到的 `Player`。
   *
   * @param {對象} [選項]
   * 播放器選項的鍵/值存儲。
   */
  構造函數（播放器，選項）{
    超級（播放器，選項）；
    this.on('slideractive', (e) => this.updateLastVolume_(e));
    this.on(player, 'volumechange', (e) => this.updateARIAAttributes(e));
    player.ready(() => this.updateARIAAttributes());
  }

  /**
   * 創建 `Component` 的 DOM 元素
   *
   * @return {元素}
   * 創建的元素。
   */
  創建El() {
    返回 super.createEl('div', {
      className: 'vjs-volume-bar vjs-slider-bar'
    }，{
      'aria-label': this.localize('音量級別'),
      'aria-live'：'禮貌'
    }）；
  }

  /**
   * 在音量條上按下鼠標
   *
   * @param {EventTarget~Event} 事件
   * 導致它運行的 `mousedown` 事件。
   *
   * @listens mousedown
   */
  handleMouseDown（事件）{
    如果（！Dom.isSingleLeftClick（事件））{
      返回;
    }

    super.handleMouseDown(事件);
  }

  /**
   * 處理 {@link VolumeMenuButton} 上的移動事件。
   *
   * @param {EventTarget~Event} 事件
   * 導致此函數運行的事件。
   *
   * @listens 鼠標移動
   */
  handleMouseMove（事件）{
    const mouseVolumeLevelDisplay = this.getChild('mouseVolumeLevelDisplay');

    如果（mouseVolumeLevelDisplay）{
      const volumeBarEl = this.el();
      const volumeBarRect = Dom.getBoundingClientRect(volumeBarEl);
      const vertical = this.vertical();
      讓 volumeBarPoint = Dom.getPointerPosition(volumeBarEl, event);

      volumeBarPoint = vertical ? volumeBarPoint.y : volumeBarPoint.x;
      // 默認皮膚在 `VolumeBar` 的兩側都有一個間隙。這意味著
      // 可以在邊界之外觸發此行為
      // `音量條`。這確保我們始終留在其中。
      volumeBarPoint = clamp(volumeBarPoint, 0, 1);

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

    如果（！Dom.isSingleLeftClick（事件））{
      返回;
    }

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

  /**
   * 如果播放器靜音，請取消靜音。
   */
  檢查靜音（）{
    如果 (this.player_.muted()) {
      this.player_.muted(false);
    }
  }

  /**
   * 獲取音量百分比
   *
   * @return {數字}
   * 音量百分比為十進制數。
   */
  getPercent() {
    如果 (this.player_.muted()) {
      返回 0；
    }
    返回 this.player_.volume();
  }

  /**
   * 增加鍵盤用戶的音量
   */
  向前一步（） {
    this.checkMuted();
    this.player_.volume(this.player_.volume() + 0.1);
  }

  /**
   * 降低鍵盤用戶的音量
   */
  退後（） {
    this.checkMuted();
    this.player_.volume(this.player_.volume() - 0.1);
  }

  /**
   * 更新 ARIA 輔助功能屬性
   *
   * @param {EventTarget~Event} [事件]
   * 導致此函數運行的 `volumechange` 事件。
   *
   * @listens Player#volumechange
   */
  更新 ARIAAttributes（事件）{
    const ariaValue = this.player_.muted() ？0 : this.volumeAsPercentage_();

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

  /**
   * 以百分比形式返回播放器音量的當前值
   *
   * @私人的
   */
  volumeAsPercentage_() {
    返回 Math.round(this.player_.volume() * 100);
  }

  /**
   * 當用戶開始拖動 VolumeBar 時，存儲音量並監聽
   * 拖動結束。當拖動結束時，如果音量設置為零，
   * 將 lastVolume 設置為存儲的音量。
   *
   * @listens slideractive
   * @私人的
   */
  updateLastVolume_() {
    const volumeBeforeDrag = this.player_.volume();

    this.one('sliderinactive', () => {
      如果 (this.player_.volume() === 0) {
        this.player_.lastVolume_(volumeBeforeDrag);
      }
    }）；
  }

}

/**
 * `VolumeBar` 的默認選項
 *
 * @type {對象}
 * @私人的
 */
VolumeBar.prototype.options_ = {
  孩子們： [
    '音量級別'
  ]、
  barName: 'volumeLevel'
};

// MouseVolumeLevelDisplay 工具提示不應添加到移動設備上的播放器
如果（！IS_IOS &&！IS_ANDROID）{
  VolumeBar.prototype.options_.children.splice(0, 0, 'mouseVolumeLevelDisplay');
}

/**
 * 當播放器上發生此事件時，調用此 Slider 的更新事件。
 *
 * @type {字符串}
 */
VolumeBar.prototype.playerEvent = 'volumechange';

Component.registerComponent('VolumeBar', VolumeBar);
導出默認音量條；