Comply w/ coding style

react/features/unsupported-browser/components/UnsupportedBrowserPage.js

@@ -1,119 +0,0 @@
-import React, { Component } from 'react';
-
-/**
- * Array of all supported browsers.
- */
-const SUPPORTED_BROWSERS = [
-    {
-        link: 'http://google.com/chrome',
-        name: 'chrome',
-        plugin: false,
-        title: 'Chrome 44+'
-    }, {
-        link: 'http://www.chromium.org/',
-        name: 'chromium',
-        plugin: false,
-        title: 'Chromium 44+'
-    }, {
-        link: 'http://www.opera.com',
-        name: 'opera',
-        plugin: false,
-        title: 'Opera 32+'
-    }, {
-        link: 'http://www.getfirefox.com/',
-        name: 'firefox',
-        plugin: false,
-        title: 'Firefox and Iceweasel 40+'
-    }, {
-        link: 'https://temasys.atlassian.net/wiki/display/TWPP/WebRTC+Plugins',
-        name: 'ie',
-        plugin: 'Temasys 0.8.854+',
-        title: 'IE'
-    }, {
-        link: 'https://temasys.atlassian.net/wiki/display/TWPP/WebRTC+Plugins',
-        name: 'safari',
-        plugin: 'Temasys 0.8.854+',
-        title: 'Safari'
-    }
-];
-
-/**
- * React component representing unsupported browser page.
- *
- * @class UnsupportedBrowserPage
- */
-export default class UnsupportedBrowserPage extends Component {
-    /**
-     * Renders the component.
-     *
-     * @returns {ReactElement}
-     */
-    render() {
-        return (
-            <div className = 'unsupported-browser-wrapper'>
-                <div className = 'unsupported-browser'>
-                    <div className = 'unsupported-browser__content'>
-                        <h2 className = 'unsupported-browser__title'>
-                            This application is currently only supported by
-                        </h2>
-                        { this._getSupportedBrowsersLayout() }
-                    </div>
-                </div>
-            </div>
-        );
-    }
-
-    /**
-     * Generates layout for the list of supported browsers.
-     *
-     * @returns {ReactElement}
-     * @private
-     */
-    _getSupportedBrowsersLayout() {
-        return (
-            <div className = 'browser-list'>
-                { SUPPORTED_BROWSERS.map(this._getSupportedBrowser) }
-            </div>
-        );
-    }
-
-    /**
-     * Method that generated layout for supported browser object.
-     *
-     * @param {Object} browser - Object containing information about supported
-     * browser.
-     * @returns {ReactElement}
-     * @private
-     */
-    _getSupportedBrowser(browser) {
-        let pluginHtml = null;
-        const logoClassName = `browser__logo browser__logo_${browser.name}`;
-
-        // Browsers not supporting WebRTC could support application
-        // with Temasys plugin installed.
-        if (browser.plugin) {
-            const className = 'browser__text_small';
-
-            pluginHtml = <p className = { className }>({ browser.plugin })</p>;
-        }
-
-        return (
-            <div
-                className = 'browser'
-                key = { browser.name }>
-                <div className = 'browser__text'>
-                    { browser.title }
-                    { pluginHtml }
-                </div>
-                <div className = 'browser__tile'>
-                    <div className = { logoClassName } />
-                    <a
-                        className = 'browser__link'
-                        href = { browser.link }>
-                        <div className = 'browser__button'>DOWNLOAD</div>
-                    </a>
-                </div>
-            </div>
-        );
-    }
-}

react/features/unsupported-browser/components/UnsupportedDesktopBrowser.js

@@ -0,0 +1,125 @@
+import React, { Component } from 'react';
+
+/**
+ * The list of all browsers supported by the application.
+ */
+const SUPPORTED_BROWSERS = [
+    {
+        link: 'http://google.com/chrome',
+        name: 'chrome',
+        title: 'Chrome 44+'
+    }, {
+        link: 'http://www.chromium.org/',
+        name: 'chromium',
+        title: 'Chromium 44+'
+    }, {
+        link: 'http://www.getfirefox.com/',
+        name: 'firefox',
+        title: 'Firefox and Iceweasel 40+'
+    }, {
+        link: 'http://www.opera.com',
+        name: 'opera',
+        title: 'Opera 32+'
+    }, {
+        link: 'https://temasys.atlassian.net/wiki/display/TWPP/WebRTC+Plugins',
+        name: 'ie',
+        plugin: 'Temasys 0.8.854+',
+        title: 'IE'
+    }, {
+        link: 'https://temasys.atlassian.net/wiki/display/TWPP/WebRTC+Plugins',
+        name: 'safari',
+        plugin: 'Temasys 0.8.854+',
+        title: 'Safari'
+    }
+];
+
+/**
+ * React component representing unsupported browser page.
+ *
+ * @class UnsupportedDesktopBrowser
+ */
+export default class UnsupportedDesktopBrowser extends Component {
+    /**
+     * Renders the component.
+     *
+     * @returns {ReactElement}
+     */
+    render() {
+        const ns = 'unsupported-desktop-browser';
+
+        return (
+            <div className = { `${ns}-wrapper` }>
+                <div className = { ns }>
+                    <div className = { `${ns}__content` }>
+                        <h2 className = { `${ns}__title` }>
+                            This application is currently only supported by
+                        </h2>
+                        {
+                            this._renderSupportedBrowsers()
+                        }
+                    </div>
+                </div>
+            </div>
+        );
+    }
+
+    /**
+     * Renders a specific browser supported by the application.
+     *
+     * @param {Object} browser - The (information about the) browser supported
+     * by the application to render.
+     * @private
+     * @returns {ReactElement}
+     */
+    _renderSupportedBrowser(browser) {
+        const { link, name, plugin, title } = browser;
+        const ns = 'supported-browser';
+
+        // Browsers which do not support WebRTC could support the application
+        // with the Temasys plugin.
+        const pluginElement
+            = plugin
+                ? <p className = { `${ns}__text_small` }>{ plugin }</p>
+                : null;
+
+        return (
+            <div
+                className = { ns }
+                key = { name }>
+                <div className = { `${ns}__text` }>
+                    {
+                        title
+                    }
+                    {
+                        pluginElement
+                    }
+                </div>
+                <div className = { `${ns}__tile` }>
+                    <div
+                        className = { `${ns}__logo ${ns}__logo_${name}` } />
+                    <a
+                        className = { `${ns}__link` }
+                        href = { link }>
+                        <div className = { `${ns}__button` }>DOWNLOAD</div>
+                    </a>
+                </div>
+            </div>
+        );
+    }
+
+    /**
+     * Renders the list of browsers supported by the application.
+     *
+     * @private
+     * @returns {ReactElement}
+     */
+    _renderSupportedBrowsers() {
+        return (
+            <div className = 'supported-browser-list'>
+                {
+                    SUPPORTED_BROWSERS.map(this._renderSupportedBrowser)
+                }
+            </div>
+        );
+    }
+}

react/features/unsupported-browser/components/UnsupportedMobileBrowser.js

@@ -1,9 +1,9 @@
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 
+import { appNavigate } from '../../app';
 import { Platform } from '../../base/react';
 
-import { appNavigate } from '../../app';
 import { mobileBrowserPageIsShown } from '../actions';
 
 /**
@@ -18,12 +18,21 @@ const URLS = {
 /**
  * React component representing mobile browser page.
  *
- * @class MobileBrowserPage
+ * @class UnsupportedMobileBrowser
  */
-class MobileBrowserPage extends Component {
+class UnsupportedMobileBrowser extends Component {
+    /**
+     * Mobile browser page component's property types.
+     *
+     * @static
+     */
+    static propTypes = {
+        dispatch: React.PropTypes.func,
+        room: React.PropTypes.string
+    }
 
     /**
-     * Constructor of MobileBrowserPage component.
+     * Constructor of UnsupportedMobileBrowser component.
      *
      * @param {Object} props - The read-only React Component props with which
      * the new instance is to be initialized.
@@ -35,16 +44,6 @@ class MobileBrowserPage extends Component {
         this._onClickJoin = this._onClickJoin.bind(this);
     }
 
-    /**
-     * Mobile browser page component's property types.
-     *
-     * @static
-     */
-    static propTypes = {
-        dispatch: React.PropTypes.func,
-        room: React.PropTypes.string
-    };
-
     /**
      * React lifecycle method triggered after component is mounted.
      *
@@ -62,13 +61,14 @@ class MobileBrowserPage extends Component {
     componentWillMount() {
         const { room } = this.props;
         let btnText;
-        let link = '';
+        let link;
 
         if (room) {
             btnText = 'Join the conversation';
-            link += room;
+            link = room;
         } else {
             btnText = 'Start a conference';
+            link = '';
         }
 
         this.setState({
@@ -77,38 +77,23 @@ class MobileBrowserPage extends Component {
         });
     }
 
-    /**
-     * Navigates to the next state of the app.
-     *
-     * @returns {void}
-     * @private
-     */
-    _onClickJoin() {
-        const { link } = this.state;
-
-        this.props.dispatch(appNavigate(link));
-    }
-
     /**
      * Renders component.
      *
      * @returns {ReactElement}
      */
     render() {
-        const { btnText } = this.state;
-        const blockPrefix = 'mobile-browser-page';
-        const textClasses = `${blockPrefix}__text ${blockPrefix}__text_small`;
-        let primaryButtonClasses = `${blockPrefix}__button`;
-
-        primaryButtonClasses += ` ${blockPrefix}__button_primary`;
+        const ns = 'unsupported-mobile-browser';
+        const primaryButtonClasses
+            = `${ns}__button ${ns}__button_primary`;
 
         return (
-            <div className = { blockPrefix }>
-                <div className = { `${blockPrefix}__body` }>
+            <div className = { ns }>
+                <div className = { `${ns}__body` }>
                     <img
-                        className = { `${blockPrefix}__logo` }
+                        className = { `${ns}__logo` }
                         src = '/images/logo-blue.svg' />
-                    <p className = { `${blockPrefix}__text` }>
+                    <p className = { `${ns}__text` }>
                         You need <strong>Jitsi Meet</strong> to join a
                         conversation on your mobile
                     </p>
@@ -117,24 +102,37 @@ class MobileBrowserPage extends Component {
                             Download the App
                         </button>
                     </a>
-                    <p className = { textClasses }>
+                    <p className = { `${ns}__text ${ns}__text_small` }>
                         or if you already have it
                         <br />
                         <strong>then</strong>
                     </p>
                     <button
-                        className = 'mobile-browser-page__button'
+                        className = { `${ns}__button` }
                         onClick = { this._onClickJoin }>
-                        { btnText }
+                        {
+                            this.state.btnText
+                        }
                     </button>
                 </div>
             </div>
         );
     }
+
+    /**
+     * Navigates to the next state of the app.
+     *
+     * @private
+     * @returns {void}
+     */
+    _onClickJoin() {
+        this.props.dispatch(appNavigate(this.state.link));
+    }
 }
 
 /**
- * Maps (parts of) the Redux state to the associated MobileBrowserPage's props.
+ * Maps (parts of) the Redux state to the associated UnsupportedMobileBrowser's
+ * props.
  *
  * @param {Object} state - Redux state.
  * @returns {{
@@ -147,4 +145,4 @@ function mapStateToProps(state) {
     };
 }
 
-export default connect(mapStateToProps)(MobileBrowserPage);
+export default connect(mapStateToProps)(UnsupportedMobileBrowser);

react/features/unsupported-browser/components/index.js

@@ -1,2 +1,4 @@
-export { default as MobileBrowserPage } from './MobileBrowserPage';
-export { default as UnsupportedBrowserPage } from './UnsupportedBrowserPage';
+export { default as UnsupportedDesktopBrowser }
+    from './UnsupportedDesktopBrowser';
+export { default as UnsupportedMobileBrowser }
+    from './UnsupportedMobileBrowser';