refactor: Use ES6 classes instead of videojs.extend

src/js/components/QualityOption.js

@@ -10,12 +10,12 @@ module.exports = function(videojs) {
     * @class QualityOption
     * @extends videojs.MenuItem
     */
-   return videojs.extend(MenuItem, {
+   return class QualityOption extends MenuItem {
 
       /**
        * @inheritdoc
        */
-      constructor: function(player, options) {
+      constructor(player, options) {
          var source = options.source;
 
          if (!_.isObject(source)) {
@@ -27,18 +27,17 @@ module.exports = function(videojs) {
             label: source.label,
          }, options);
 
-         MenuItem.call(this, player, options);
+         super(player, options);
 
          this.source = source;
-      },
+      }
 
       /**
        * @inheritdoc
        */
-      handleClick: function(event) {
-         MenuItem.prototype.handleClick.call(this, event);
+      handleClick(event) {
+         super.handleClick(event);
          this.player().trigger(events.QUALITY_REQUESTED, this.source);
-      },
-
-   });
+      }
+   };
 };

src/js/components/QualitySelector.js

@@ -5,22 +5,21 @@ var _ = require('underscore'),
 
 module.exports = function(videojs) {
    var MenuButton = videojs.getComponent('MenuButton'),
-       QualityOption = qualityOptionFactory(videojs),
-       QualitySelector;
+       QualityOption = qualityOptionFactory(videojs);
 
    /**
     * A component for changing video resolutions
     *
     * @class QualitySelector
     * @extends videojs.Button
     */
-   QualitySelector = videojs.extend(MenuButton, {
+   class QualitySelector extends MenuButton {
 
       /**
        * @inheritdoc
        */
-      constructor: function(player, options) {
-         MenuButton.call(this, player, options);
+      constructor(player, options) {
+         super(player, options);
 
          // Update interface instantly so the user's change is acknowledged
          player.on(events.QUALITY_REQUESTED, function(event, newSource) {
@@ -50,14 +49,14 @@ module.exports = function(videojs) {
          }.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) {
+      setSelectedSource(source) {
          var src = (source ? source.src : undefined);
 
          if (this.selectedSrc !== src) {
@@ -66,12 +65,12 @@ module.exports = function(videojs) {
                item.selected(item.source.src === src);
             });
          }
-      },
+      }
 
       /**
        * @inheritdoc
        */
-      createItems: function() {
+      createItems() {
          var player = this.player(),
              sources = player.currentSources();
 
@@ -85,16 +84,15 @@ module.exports = function(videojs) {
                selected: source.src === this.selectedSrc,
             });
          }.bind(this));
-      },
+      }
 
       /**
        * @inheritdoc
        */
-      buildWrapperCSSClass: function() {
-         return 'vjs-quality-selector ' + MenuButton.prototype.buildWrapperCSSClass.call(this);
-      },
-
-   });
+      buildWrapperCSSClass() {
+         return 'vjs-quality-selector ' + super.buildWrapperCSSClass();
+      }
+   }
 
    videojs.registerComponent('QualitySelector', QualitySelector);