From 4649d462c1d1cce4f7a19f72eea5963eee4bd4ac Mon Sep 17 00:00:00 2001 From: Thijs Triemstra Date: Sun, 14 Jan 2018 22:42:38 +0100 Subject: [PATCH] refactor and simplify button components --- src/js/controls/camera-button.js | 39 ++++++++++++++++------------- src/js/controls/device-button.js | 21 ++++------------ src/js/controls/record-indicator.js | 11 ++++++-- src/js/controls/record-toggle.js | 38 +++++++++++++++------------- 4 files changed, 56 insertions(+), 53 deletions(-) diff --git a/src/js/controls/camera-button.js b/src/js/controls/camera-button.js index 14f7fe3e..4135b822 100644 --- 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 index ddf7ad98..b8ff2741 100644 --- 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 index 22cd8371..84a0951f 100644 --- 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 index d388388a..5e0264bc 100644 --- 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();