refactor and simplify button components

collab-project · Jan 14, 2018 · 4649d46 · 4649d46
1 parent 4e3fb12
commit 4649d46
Show file tree

Hide file tree

Showing 4 changed files with 56 additions and 53 deletions.
diff --git a/src/js/controls/camera-button.js b/src/js/controls/camera-button.js
@@ -13,31 +13,34 @@ const Component = videojs.getComponent('Component');
  * @augments videojs.Button
 */
 class CameraButton extends Button {
-
     /**
-     * The constructor function for the class.
+     * Builds the default DOM `className`.
      *
-     * @private
-     * @param {(videojs.Player|Object)} player - Video.js player instance.
-     * @param {Object} options - Player options.
+     * @return {string}
+     *         The DOM `className` for this object.
      */
-    constructor(player, options) {
-        super(player, options);
+    buildCSSClass() {
+        return 'vjs-camera-button vjs-control vjs-button vjs-icon-photo-camera';
+    }
 
-        this.on('click', this.onClick);
-        this.on('tap', this.onClick);
-        this.on(player, 'startRecord', this.onStart);
-        this.on(player, 'stopRecord', this.onStop);
+    /**
+     * Enable the `CameraButton` element so that it can be activated or clicked.
+     */
+    enable() {
+        super.enable();
+
+        this.on(this.player_, 'startRecord', this.onStart);
+        this.on(this.player_, 'stopRecord', this.onStop);
     }
 
     /**
-     * Builds the default DOM `className`.
-     *
-     * @return {string}
-     *         The DOM `className` for this object.
+     * Disable the `CameraButton` element so that it cannot be activated or clicked.
      */
-    buildCSSClass() {
-        return 'vjs-camera-button vjs-control vjs-icon-photo-camera';
+    disable() {
+        super.disable();
+
+        this.off(this.player_, 'startRecord', this.onStart);
+        this.off(this.player_, 'stopRecord', this.onStop);
     }
 
     /**
@@ -50,7 +53,7 @@ class CameraButton extends Button {
      * @listens tap
      * @listens click
      */
-    onClick(event) {
+    handleClick(event) {
         let recorder = this.player_.record();
 
         if (!recorder.isProcessing()) {

diff --git a/src/js/controls/device-button.js b/src/js/controls/device-button.js
@@ -14,30 +14,19 @@ const Component = videojs.getComponent('Component');
 */
 class DeviceButton extends Button {
     /**
-     * The constructor function for the class.
+     * This gets called when this button gets:
      *
-     * @private
-     * @param {(videojs.Player|Object)} player - Video.js player instance.
-     * @param {Object} options - Player options.
-     */
-    constructor(player, options) {
-        super(player, options);
-
-        this.on('click', this.onClick);
-        this.on('tap', this.onClick);
-    }
-
-    /**
-     * This gets called when the button is clicked.
+     * - Clicked (via the `click` event, listening starts in the constructor)
+     * - Tapped (via the `tap` event, listening starts in the constructor)
      *
      * @param {EventTarget~Event} event
-     *        The `tap` or `click` event that caused this function to be
+     *        The `keydown`, `tap`, or `click` event that caused this function to be
      *        called.
      *
      * @listens tap
      * @listens click
      */
-    onClick(event) {
+    handleClick(event) {
         // open device dialog
         this.player_.record().getDevice();
     }

diff --git a/src/js/controls/record-indicator.js b/src/js/controls/record-indicator.js
@@ -22,8 +22,7 @@ class RecordIndicator extends Component {
     constructor(player, options) {
         super(player, options);
 
-        this.on(player, 'startRecord', this.show);
-        this.on(player, 'stopRecord', this.hide);
+        this.enable();
     }
 
     /**
@@ -39,6 +38,14 @@ class RecordIndicator extends Component {
         });
     }
 
+    /**
+     * Enable event handlers.
+     */
+    enable() {
+        this.on(this.player_, 'startRecord', this.show);
+        this.on(this.player_, 'stopRecord', this.hide);
+    }
+
     /**
      * Disable event handlers.
      */

diff --git a/src/js/controls/record-toggle.js b/src/js/controls/record-toggle.js
@@ -14,29 +14,33 @@ const Component = videojs.getComponent('Component');
 */
 class RecordToggle extends Button {
     /**
-     * The constructor function for the class.
+     * Builds the default DOM `className`.
      *
-     * @private
-     * @param {(videojs.Player|Object)} player - Video.js player instance.
-     * @param {Object} options - Player options.
+     * @return {string}
+     *         The DOM `className` for this object.
+     */
+    buildCSSClass() {
+        return 'vjs-record-button vjs-control vjs-button vjs-icon-record-start';
+    }
+
+    /**
+     * Enable the `RecordToggle` element so that it can be activated or clicked.
      */
-    constructor(player, options) {
-        super(player, options);
+    enable() {
+        super.enable();
 
-        this.on('click', this.onClick);
-        this.on('tap', this.onClick);
-        this.on(player, 'startRecord', this.onStart);
-        this.on(player, 'stopRecord', this.onStop);
+        this.on(this.player_, 'startRecord', this.onStart);
+        this.on(this.player_, 'stopRecord', this.onStop);
     }
 
     /**
-     * Builds the default DOM `className`.
-     *
-     * @return {string}
-     *         The DOM `className` for this object.
+     * Disable the `RecordToggle` element so that it cannot be activated or clicked.
      */
-    buildCSSClass() {
-        return 'vjs-record-button vjs-control vjs-icon-record-start';
+    disable() {
+        super.disable();
+
+        this.off(this.player_, 'startRecord', this.onStart);
+        this.off(this.player_, 'stopRecord', this.onStop);
     }
 
     /**
@@ -49,7 +53,7 @@ class RecordToggle extends Button {
      * @listens tap
      * @listens click
      */
-    onClick(event) {
+    handleClick(event) {
         let recorder = this.player_.record();
         if (!recorder.isRecording()) {
             recorder.start();