videojs-hls-quality-selector/cjs/plugin.js

Adds a quality selector menu for HLS sources played in videojs.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));
var _video = _interopRequireDefault(require("video.js"));
var _package = require("../package.json");
var _ConcreteButton = _interopRequireDefault(require("./ConcreteButton"));
var _ConcreteMenuItem = _interopRequireDefault(require("./ConcreteMenuItem"));
var Plugin = _video.default.getPlugin('plugin');

// Default options for the plugin.
var defaults = {};

/**
 * An advanced Video.js plugin. For more information on the API
 *
 * See: https://blog.videojs.com/feature-spotlight-advanced-plugins/
 */
var HlsQualitySelector = /*#__PURE__*/function (_Plugin) {
  (0, _inheritsLoose2.default)(HlsQualitySelector, _Plugin);
  /**
   * Create a HlsQualitySelector plugin instance.
   *
   * @param  {Player} player
   *         A Video.js Player instance.
   *
   * @param  {Object} [options]
   *         An optional options object.
   *
   *         While not a core part of the Video.js plugin architecture, a
   *         second argument of options is a convenient way to accept inputs
   *         from your plugin's caller.
   */
  function HlsQualitySelector(player, options) {
    var _this;
    // the parent class will add player under this.player
    _this = _Plugin.call(this, player) || this;
    _this.options = _video.default.obj.merge(defaults, options);
    _this.player.ready(function () {
      // If there is quality levels plugin and the HLS tech exists then continue.
      if (_this.player.qualityLevels) {
        _this.player.addClass('vjs-hls-quality-selector');
        // Create the quality button.
        _this.createQualityButton();
        _this.bindPlayerEvents();
      }
    });
    return _this;
  }

  /**
   * Binds listener for quality level changes.
   */
  var _proto = HlsQualitySelector.prototype;
  _proto.bindPlayerEvents = function bindPlayerEvents() {
    this.player.qualityLevels().on('addqualitylevel', this.onAddQualityLevel.bind(this));
  }

  /**
   * Adds the quality menu button to the player control bar.
   */;
  _proto.createQualityButton = function createQualityButton() {
    var player = this.player;
    this._qualityButton = new _ConcreteButton.default(player);
    var placementIndex = player.controlBar.children().length - 2;
    var concreteButtonInstance = player.controlBar.addChild(this._qualityButton, {
      componentClass: 'qualitySelector'
    }, this.options.placementIndex || placementIndex);
    concreteButtonInstance.addClass('vjs-quality-selector');
    if (!this.options.displayCurrentQuality) {
      var icon = " " + (this.options.vjsIconClass || 'vjs-icon-hd');
      concreteButtonInstance.menuButton_.$('.vjs-icon-placeholder').className += icon;
    } else {
      this.setButtonInnerText(player.localize('Auto'));
    }
    concreteButtonInstance.removeClass('vjs-hidden');
  }

  /**
   *Set inner button text.
   *
   * @param {string} text - the text to display in the button.
   */;
  _proto.setButtonInnerText = function setButtonInnerText(text) {
    this._qualityButton.menuButton_.$('.vjs-icon-placeholder').innerHTML = text;
  }

  /**
   * Builds individual quality menu items.
   *
   * @param {Object} item - Individual quality menu item.
   * @return {ConcreteMenuItem} - Menu item
   */;
  _proto.getQualityMenuItem = function getQualityMenuItem(item) {
    var player = this.player;
    return new _ConcreteMenuItem.default(player, item, this._qualityButton, this);
  }

  /**
   * Executed when a quality level is added from HLS playlist.
   */;
  _proto.onAddQualityLevel = function onAddQualityLevel() {
    var _this2 = this;
    var player = this.player;
    var qualityList = player.qualityLevels();
    var levels = qualityList.levels_ || [];
    var levelItems = [];
    var _loop = function _loop() {
      var _levels$i = levels[i],
        width = _levels$i.width,
        height = _levels$i.height;
      var pixels = width > height ? height : width;
      if (!pixels) {
        return 1; // continue
      }
      if (!levelItems.filter(function (_existingItem) {
        return _existingItem.item && _existingItem.item.value === pixels;
      }).length) {
        var levelItem = _this2.getQualityMenuItem.call(_this2, {
          label: pixels + 'p',
          value: pixels
        });
        levelItems.push(levelItem);
      }
    };
    for (var i = 0; i < levels.length; ++i) {
      if (_loop()) continue;
    }
    levelItems.sort(function (current, next) {
      if (typeof current !== 'object' || typeof next !== 'object') {
        return -1;
      }
      if (current.item.value < next.item.value) {
        return -1;
      }
      if (current.item.value > next.item.value) {
        return 1;
      }
      return 0;
    });
    levelItems.push(this.getQualityMenuItem.call(this, {
      label: this.player.localize('Auto'),
      value: 'auto',
      selected: true
    }));
    if (this._qualityButton) {
      this._qualityButton.createItems = function () {
        return levelItems;
      };
      this._qualityButton.update();
    }
  }

  /**
   * Sets quality (based on media short side)
   *
   * @param {number} quality - A number representing HLS playlist.
   */;
  _proto.setQuality = function setQuality(quality) {
    var qualityList = this.player.qualityLevels();

    // Set quality on plugin
    this._currentQuality = quality;
    if (this.options.displayCurrentQuality) {
      this.setButtonInnerText(quality === 'auto' ? this.player.localize('Auto') : quality + "p");
    }
    for (var i = 0; i < qualityList.length; ++i) {
      var _qualityList$i = qualityList[i],
        width = _qualityList$i.width,
        height = _qualityList$i.height;
      var pixels = width > height ? height : width;
      qualityList[i].enabled = pixels === quality || quality === 'auto';
    }
    this._qualityButton.unpressButton();
  }

  /**
   * Return the current set quality or 'auto'
   *
   * @return {string} the currently set quality
   */;
  _proto.getCurrentQuality = function getCurrentQuality() {
    return this._currentQuality || 'auto';
  };
  return HlsQualitySelector;
}(Plugin); // Include the version number.
HlsQualitySelector.VERSION = _package.version;

// Register the plugin with video.js.
_video.default.registerPlugin('hlsQualitySelector', HlsQualitySelector);
var _default = exports.default = HlsQualitySelector;
module.exports = exports.default;