ES6 Classes

package.json

@@ -27,7 +27,7 @@
     "global": "^4.3.0"
   },
   "devDependencies": {
-    "babelify": "^5.0.4",
+    "babelify": "^6.0.1",
     "blanket": "^1.1.6",
     "browserify-istanbul": "^0.2.1",
     "browserify-versionify": "^1.0.4",

src/js/big-play-button.js

@@ -1,4 +1,3 @@
-import Component from './component';
 import Button from './button';
 
 /* Big Play Button
@@ -11,20 +10,21 @@ import Button from './button';
  * @class
  * @constructor
  */
-var BigPlayButton = Button.extend();
+class BigPlayButton extends Button {
 
-Component.registerComponent('BigPlayButton', BigPlayButton);
+  createEl() {
+    return super.createEl('div', {
+      className: 'vjs-big-play-button',
+      innerHTML: '<span aria-hidden="true"></span>',
+      'aria-label': 'play video'
+    });
+  }
 
-BigPlayButton.prototype.createEl = function(){
-  return Button.prototype.createEl.call(this, 'div', {
-    className: 'vjs-big-play-button',
-    innerHTML: '<span aria-hidden="true"></span>',
-    'aria-label': 'play video'
-  });
-};
+  onClick() {
+    this.player_.play();
+  }
 
-BigPlayButton.prototype.onClick = function(){
-  this.player_.play();
-};
+}
 
+Button.registerComponent('BigPlayButton', BigPlayButton);
 export default BigPlayButton;

src/js/button.js

@@ -12,13 +12,10 @@ import document from 'global/document';
  * @class
  * @constructor
  */
-var Button = Component.extend({
-  /**
-   * @constructor
-   * @inheritDoc
-   */
-  init: function(player, options){
-    Component.call(this, player, options);
+class Button extends Component {
+
+  constructor(player, options) {
+    super(player, options);
 
     this.emitTapEvents();
 
@@ -27,64 +24,65 @@ var Button = Component.extend({
     this.on('focus', this.onFocus);
     this.on('blur', this.onBlur);
   }
-});
-
-Component.registerComponent('Button', Button);
 
-Button.prototype.createEl = function(type, props){
-  // Add standard Aria and Tabindex info
-  props = Lib.obj.merge({
-    className: this.buildCSSClass(),
-    'role': 'button',
-    'aria-live': 'polite', // let the screen reader user know that the text of the button may change
-    tabIndex: 0
-  }, props);
-
-  let el = Component.prototype.createEl.call(this, type, props);
-
-  // if innerHTML hasn't been overridden (bigPlayButton), add content elements
-  if (!props.innerHTML) {
-    this.contentEl_ = Lib.createEl('div', {
-      className: 'vjs-control-content'
-    });
-
-    this.controlText_ = Lib.createEl('span', {
-      className: 'vjs-control-text',
-      innerHTML: this.localize(this.buttonText) || 'Need Text'
-    });
-
-    this.contentEl_.appendChild(this.controlText_);
-    el.appendChild(this.contentEl_);
+  createEl(type, props) {
+    // Add standard Aria and Tabindex info
+    props = Lib.obj.merge({
+      className: this.buildCSSClass(),
+      'role': 'button',
+      'aria-live': 'polite', // let the screen reader user know that the text of the button may change
+      tabIndex: 0
+    }, props);
+
+    let el = super.createEl(type, props);
+
+    // if innerHTML hasn't been overridden (bigPlayButton), add content elements
+    if (!props.innerHTML) {
+      this.contentEl_ = Lib.createEl('div', {
+        className: 'vjs-control-content'
+      });
+
+      this.controlText_ = Lib.createEl('span', {
+        className: 'vjs-control-text',
+        innerHTML: this.localize(this.buttonText) || 'Need Text'
+      });
+
+      this.contentEl_.appendChild(this.controlText_);
+      el.appendChild(this.contentEl_);
+    }
+
+    return el;
   }
 
-  return el;
-};
-
-Button.prototype.buildCSSClass = function(){
-  // TODO: Change vjs-control to vjs-button?
-  return 'vjs-control ' + Component.prototype.buildCSSClass.call(this);
-};
+  buildCSSClass() {
+    // TODO: Change vjs-control to vjs-button?
+    return 'vjs-control ' + super.buildCSSClass();
+  }
 
   // Click - Override with specific functionality for button
-Button.prototype.onClick = function(){};
+  onClick() {}
 
   // Focus - Add keyboard functionality to element
-Button.prototype.onFocus = function(){
-  Events.on(document, 'keydown', Lib.bind(this, this.onKeyPress));
-};
+  onFocus() {
+    Events.on(document, 'keydown', Lib.bind(this, this.onKeyPress));
+  }
 
   // KeyPress (document level) - Trigger click when keys are pressed
-Button.prototype.onKeyPress = function(event){
-  // Check for space bar (32) or enter (13) keys
-  if (event.which == 32 || event.which == 13) {
-    event.preventDefault();
-    this.onClick();
+  onKeyPress(event) {
+    // Check for space bar (32) or enter (13) keys
+    if (event.which == 32 || event.which == 13) {
+      event.preventDefault();
+      this.onClick();
+    }
+  }
+
+  // Blur - Remove keyboard triggers
+  onBlur() {
+    Events.off(document, 'keydown', Lib.bind(this, this.onKeyPress));
   }
-};
 
-// Blur - Remove keyboard triggers
-Button.prototype.onBlur = function(){
-  Events.off(document, 'keydown', Lib.bind(this, this.onKeyPress));
-};
+}
 
+
+Component.registerComponent('Button', Button);
 export default Button;