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 (