From 48102493013c4e40232d3c5c253017cf79cd4344 Mon Sep 17 00:00:00 2001 From: Lyubomir Marinov Date: Thu, 15 Dec 2016 21:00:06 -0600 Subject: [PATCH] Simplify. Comply w/ coding style. --- modules/UI/welcome_page/WelcomePage.js | 6 +- .../welcome/components/AbstractWelcomePage.js | 135 +++---- .../welcome/components/WelcomePage.web.js | 350 +++++++++--------- 3 files changed, 244 insertions(+), 247 deletions(-) diff --git a/modules/UI/welcome_page/WelcomePage.js b/modules/UI/welcome_page/WelcomePage.js index 5a244c902..6777ff23a 100644 --- a/modules/UI/welcome_page/WelcomePage.js +++ b/modules/UI/welcome_page/WelcomePage.js @@ -13,10 +13,8 @@ function enterRoom() { } function setupWelcomePage() { - /* - * XXX: We left only going to conference page here because transitions via - * React Router isn't implemented yet. - */ + // XXX: We left only going to conference page here because transitions via + // React Router isn't implemented yet. $("#enter_room_button").click(function() { enterRoom(); diff --git a/react/features/welcome/components/AbstractWelcomePage.js b/react/features/welcome/components/AbstractWelcomePage.js index b65d45b92..e8e2b312b 100644 --- a/react/features/welcome/components/AbstractWelcomePage.js +++ b/react/features/welcome/components/AbstractWelcomePage.js @@ -36,31 +36,30 @@ export class AbstractWelcomePage extends Component { * Save room name into component's local state. * * @type {Object} + * @property {number|null} animateTimeoutId - Identificator for + * letter animation timeout. + * @property {string} generatedRoomname - Automatically generated + * room name. * @property {string} room - Room name. * @property {string} roomPlaceholder - Room placeholder * that's used as a placeholder for input. - * @property {string} generatedRoomname - Automatically generated - * room name. - * @property {number|null} animateTimeoutId - Identificator for - * letter animation timeout. * @property {nubmer|null} updateTimeoutId - Identificator for * updating generated room name. */ this.state = { + animateTimeoutId: null, + generatedRoomname: '', room: '', roomPlaceholder: '', - generatedRoomname: '', - animateTimeoutId: null, updateTimeoutId: null }; // Bind event handlers so they are only bound once for every instance. - const roomnameChanging = this._animateRoomnameChanging.bind(this); - + this._animateRoomnameChanging + = this._animateRoomnameChanging.bind(this); this._onJoin = this._onJoin.bind(this); this._onRoomChange = this._onRoomChange.bind(this); this._updateRoomname = this._updateRoomname.bind(this); - this._animateRoomnameChanging = roomnameChanging.bind(this); } /** @@ -74,20 +73,48 @@ export class AbstractWelcomePage extends Component { } /** - * This method is executed when method will be unmounted from DOM. - * - * @inheritdoc - */ + * This method is executed when method will be unmounted from DOM. + * + * @inheritdoc + */ componentWillUnmount() { this._clearTimeouts(); } /** - * Method that clears timeouts for animations and updates of room name. - * - * @private - * @returns {void} - */ + * Animates the changing of the room name. + * + * @param {string} word - The part of room name that should be added to + * placeholder. + * @private + * @returns {void} + */ + _animateRoomnameChanging(word) { + let animateTimeoutId = null; + const roomPlaceholder = this.state.roomPlaceholder + word.substr(0, 1); + + if (word.length > 1) { + animateTimeoutId + = setTimeout( + () => { + this._animateRoomnameChanging( + word.substring(1, word.length)); + }, + 70); + } + + this.setState({ + animateTimeoutId, + roomPlaceholder + }); + } + + /** + * Method that clears timeouts for animations and updates of room name. + * + * @private + * @returns {void} + */ _clearTimeouts() { clearTimeout(this.state.animateTimeoutId); clearTimeout(this.state.updateTimeoutId); @@ -105,50 +132,6 @@ export class AbstractWelcomePage extends Component { return !isRoomValid(this.state.room); } - /** - * Method triggering generation of new room name and - * initiating animation of its changing. - * - * @protected - * @returns {void} - */ - _updateRoomname() { - const generatedRoomname = generateRoomWithoutSeparator(); - const roomPlaceholder = ''; - const updateTimeoutId = setTimeout(this._updateRoomname, 10000); - - this._clearTimeouts(); - this.setState({ - updateTimeoutId, - generatedRoomname, - roomPlaceholder - }, () => this._animateRoomnameChanging(generatedRoomname)); - } - - /** - * Method animating changing room name. - * - * @param {string} word - The part of room name that should - * be added to placeholder. - * @private - * @returns {void} - */ - _animateRoomnameChanging(word) { - const roomPlaceholder = this.state.roomPlaceholder + word.substr(0, 1); - let animateTimeoutId = null; - - if (word.length > 1) { - animateTimeoutId = setTimeout(() => { - this._animateRoomnameChanging(word.substring(1, word.length)); - }, 70); - } - - this.setState({ - animateTimeoutId, - roomPlaceholder - }); - } - /** * Handles joining. Either by clicking on 'Join' button * or by pressing 'Enter' in room name input field. @@ -157,12 +140,10 @@ export class AbstractWelcomePage extends Component { * @returns {void} */ _onJoin() { - const { room, generatedRoomname } = this.state; + const room = this.state.room || this.state.generatedRoomname; - if (room && room.length) { + if (room) { this.props.dispatch(appNavigate(room)); - } else { - this.props.dispatch(appNavigate(generatedRoomname)); } } @@ -189,6 +170,28 @@ export class AbstractWelcomePage extends Component { ); } + + /** + * Triggers the generation of a new room name and initiates an animation of + * its changing. + * + * @protected + * @returns {void} + */ + _updateRoomname() { + const generatedRoomname = generateRoomWithoutSeparator(); + const roomPlaceholder = ''; + const updateTimeoutId = setTimeout(this._updateRoomname, 10000); + + this._clearTimeouts(); + this.setState( + { + generatedRoomname, + roomPlaceholder, + updateTimeoutId + }, + () => this._animateRoomnameChanging(generatedRoomname)); + } } /** diff --git a/react/features/welcome/components/WelcomePage.web.js b/react/features/welcome/components/WelcomePage.web.js index 62f481b40..4eaa2daac 100644 --- a/react/features/welcome/components/WelcomePage.web.js +++ b/react/features/welcome/components/WelcomePage.web.js @@ -1,113 +1,59 @@ -/* global interfaceConfig, APP */ +/* global APP, interfaceConfig */ import React from 'react'; import { connect } from 'react-redux'; -import { - AbstractWelcomePage, - mapStateToProps -} from './AbstractWelcomePage'; +import { Conference } from '../../conference'; -const RIGHT_WATERMARK_STYLES = { +import { AbstractWelcomePage, mapStateToProps } from './AbstractWelcomePage'; + +/** + * The CSS style of the element with CSS class rightwatermark. + */ +const RIGHT_WATERMARK_STYLE = { backgroundImage: 'url(images/rightwatermark.png)' }; -import { Conference } from '../../conference'; +/* eslint-disable require-jsdoc */ /** - * The web container rendering the welcome page. + * The Web container rendering the welcome page. + * + * @extends AbstractWelcomePage */ class WelcomePage extends AbstractWelcomePage { +/* eslint-enable require-jsdoc */ + /** - * Constructor function of WelcomePage. - * - * @param {Object} props - Props to be set. - **/ + * Initializes a new WelcomePage instance. + * + * @param {Object} props - The read-only properties with which the new + * instance is to be initialized. + */ constructor(props) { super(props); + this._initState(); // Bind event handlers so they are only bound once for every instance. - const onToggleDisableWelcome = this._onToggleDisableWelcomePage; - - this._onRoomChange = this._onRoomChange.bind(this); + this._onDisableWelcomeChange = this._onDisableWelcomeChange.bind(this); this._onKeyDown = this._onKeyDown.bind(this); - this._setInput = this._setInput.bind(this); - this._onUpdateRoomname = this._onUpdateRoomname.bind(this); - this._onToggleDisableWelcomePage = onToggleDisableWelcome.bind(this); + this._onRoomChange = this._onRoomChange.bind(this); } /** - * Method that initializes state of the component. - * - * @returns {void} - **/ - _initState() { - const showPoweredBy = interfaceConfig.SHOW_POWERED_BY; - const generateRoomnames - = interfaceConfig.GENERATE_ROOMNAMES_ON_WELCOME_PAGE; - const enableWelcomePage = true; - const showJitsiWatermark = interfaceConfig.SHOW_JITSI_WATERMARK; - const showBrandWatermark = interfaceConfig.SHOW_BRAND_WATERMARK; - let jitsiWatermarkLink = ''; - let brandWatermarkLink = ''; - - if (showJitsiWatermark) { - jitsiWatermarkLink = interfaceConfig.JITSI_WATERMARK_LINK; - } - - if (showBrandWatermark) { - brandWatermarkLink = interfaceConfig.BRAND_WATERMARK_LINK; - } - - this.state = Object.assign({}, this.state, { - showPoweredBy, - generateRoomnames, - showJitsiWatermark, - showBrandWatermark, - jitsiWatermarkLink, - brandWatermarkLink, - enableWelcomePage - }); - } - - /** - * Returns the domain name. - * - * @private - * @returns {string} Domain name. - **/ - _getDomain() { - return `${window.location.protocol}//${window.location.host}/`; - } - - /** - * This method is executed when comonent is mounted. - * - * @inheritdoc - */ + * This method is executed when comonent is mounted. + * + * @inheritdoc + * @returns {void} + */ componentDidMount() { if (this.state.generateRoomnames) { this._updateRoomname(); } } - /** - * Handles toggling disable welcome page checkbox - * - * @returns {void} - **/ - _onToggleDisableWelcomePage() { - const shouldEnable = this.state.enableWelcomePage; - - this.setState({ - enableWelcomePage: !shouldEnable - }, () => { - APP.settings.setWelcomePageEnabled(this.state.enableWelcomePage); - }); - } - /** * Implements React's {@link Component#render()}. * @@ -137,14 +83,116 @@ class WelcomePage extends AbstractWelcomePage { } /** - * Sets input element as property of class. - * - * @param {HTMLInputElement} input - input element to be set. - * @returns {void} - * @private - **/ - _setInput(input) { - this.roomNameInput = input; + * Returns the domain name. + * + * @private + * @returns {string} Domain name. + */ + _getDomain() { + return `${window.location.protocol}//${window.location.host}/`; + } + + /** + * Method that initializes state of the component. + * + * @returns {void} + */ + _initState() { + const showBrandWatermark = interfaceConfig.SHOW_BRAND_WATERMARK; + const showJitsiWatermark = interfaceConfig.SHOW_JITSI_WATERMARK; + + this.state = { + ...this.state, + brandWatermarkLink: + showBrandWatermark ? interfaceConfig.BRAND_WATERMARK_LINK : '', + enableWelcomePage: true, + generateRoomnames: + interfaceConfig.GENERATE_ROOMNAMES_ON_WELCOME_PAGE, + jitsiWatermarkLink: + showJitsiWatermark ? interfaceConfig.JITSI_WATERMARK_LINK : '', + showBrandWatermark, + showJitsiWatermark, + showPoweredBy: interfaceConfig.SHOW_POWERED_BY + }; + } + + /** + * Handles change event of the checkbox which allows specifying + * whether the WelcomePage is disabled. + * + * @param {Event} event - The (HTML) Event which details the change such as + * the EventTarget. + * @returns {void} + */ + _onDisableWelcomeChange(event) { + this.setState({ + enableWelcomePage: !event.target.value + }, () => { + APP.settings.setWelcomePageEnabled(this.state.enableWelcomePage); + }); + } + + /** + * Overrides the super in order to prevent the dispatching of the Redux + * action SET_ROOM. + * + * @override + * @protected + * @returns {null} + */ + _onJoin() { + // Don't call the super implementation and thus prevent the dispatching + // of the Redux action SET_ROOM. + } + + /** + * Handles 'keydown' event to initiate joining the room when the + * 'Enter/Return' button is pressed. + * + * @param {Event} event - Key down event object. + * @private + * @returns {void} + */ + _onKeyDown(event) { + if (event.keyCode === /* Enter */ 13) { + this._onJoin(); + } + } + + /** + * Overrides the super to account for the differences in the argument types + * provided by HTML and React Native text inputs. + * + * @inheritdoc + * @override + * @param {Event} event - The (HTML) Event which details the change such as + * the EventTarget. + * @protected + */ + _onRoomChange(event) { + super._onRoomChange(event.target.value); + } + + /** + * Method that returns brand watermark element if it is enabled. + * + * @private + * @returns {ReactElement|null} Watermark element or null. + */ + _renderBrandWatermark() { + if (this.state.showBrandWatermark) { + return ( + +
+ + ); + } + + return null; } /** @@ -196,6 +244,8 @@ class WelcomePage extends AbstractWelcomePage { ); } +/* eslint-disable require-jsdoc */ + /** * Renders the header part of this WelcomePage. * @@ -203,32 +253,46 @@ class WelcomePage extends AbstractWelcomePage { * @returns {ReactElement|null} */ _renderHeader() { + +/* eslint-enable require-jsdoc */ + return (
- { this._renderJitsiWatermark() } - { this._renderBrandWatermark() } - { this._renderPoweredBy() } + { + this._renderJitsiWatermark() + } + { + this._renderBrandWatermark() + } + { + this._renderPoweredBy() + }
-
- { this._getDomain() } +
+ { + this._getDomain() + }
+ + { /* eslint-disable react/jsx-handler-names */ }
+ onClick = { this._updateRoomname } /> + { /* eslint-enable react/jsx-handler-names */ } +