videojs-quality-selector/src/js/components/QualitySelector.js

'use strict';

var _ = require('underscore'),
    events = require('../events'),
    qualityOptionFactory = require('./QualityOption'),
    QUALITY_CHANGE_CLASS = 'vjs-quality-changing';

module.exports = function(videojs) {
   var MenuButton = videojs.getComponent('MenuButton'),
       QualityOption = qualityOptionFactory(videojs),
       QualitySelector;

   /**
    * A component for changing video resolutions
    *
    * @class QualitySelector
    * @extends videojs.Button
    */
   QualitySelector = videojs.extend(MenuButton, {

      /**
       * @inheritdoc
       */
      constructor: function(player, options) {
         MenuButton.call(this, player, options);

         // Update interface instantly so the user's change is acknowledged
         player.on(events.QUALITY_REQUESTED, function(event, newSource) {
            this.setSelectedSource(newSource);
            player.addClass(QUALITY_CHANGE_CLASS);

            player.one('loadeddata', function() {
               player.removeClass(QUALITY_CHANGE_CLASS);
            });
         }.bind(this));

         player.on(events.QUALITY_SELECTED, function(event, newSource) {
            // Update the selected source with the source that was actually selected
            this.setSelectedSource(newSource);
         }.bind(this));

         // Since it's possible for the player to get a source before the selector is
         // created, make sure to update once we get a "ready" signal.
         player.one('ready', function() {
            this.selectedSrc = player.src();
            this.update();
         }.bind(this));

         this.controlText('Open quality selector menu');
      },

      /**
       * Updates the source that is selected in the menu
       *
       * @param source {object} player source to display as selected
       */
      setSelectedSource: function(source) {
         var src = (source ? source.src : undefined);

         if (this.selectedSrc !== src) {
            this.selectedSrc = src;
            _.each(this.items, function(item) {
               item.selected(item.source.src === src);
            });
         }
      },

      /**
       * @inheritdoc
       */
      createItems: function() {
         var player = this.player(),
             sources = player.currentSources();

         if (!sources || sources.length < 2) {
            return [];
         }

         return _.map(sources, function(source) {
            return new QualityOption(player, {
               source: source,
               selected: source.src === this.selectedSrc,
            });
         }.bind(this));
      },

      /**
       * @inheritdoc
       */
      buildWrapperCSSClass: function() {
         return 'vjs-quality-selector ' + MenuButton.prototype.buildWrapperCSSClass.call(this);
      },

   });

   videojs.registerComponent('QualitySelector', QualitySelector);

   return QualitySelector;
};