Added unsuported browser and plugin required pages

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

@@ -0,0 +1,44 @@
+import React, { Component } from 'react';
+
+import { CHROME, CHROMIUM, FIREFOX } from './browserLinks';
+
+/**
+ * React component representing plugin installation required page.
+ *
+ * @class PluginRequiredBrowser
+ */
+export default class PluginRequiredBrowser extends Component {
+
+    /**
+     * Renders the component.
+     *
+     * @returns {ReactElement}
+     */
+    render() {
+        const ns = 'unsupported-desktop-browser';
+
+        return (
+            <div className = { ns }>
+                <h2 className = { `${ns}__title` }>
+                    Your browser requires a plugin for this conversation.
+                </h2>
+                <p className = { `${ns}__description_small` }>
+                    Once you install the plugin, it will be possible for you
+                    to have your conversation here. For best experience,
+                    however, we strongly recommend that you do that using
+                    the&nbsp;
+                    <a
+                        className = { `${ns}__link` }
+                        href = { CHROME }>Chrome</a>,&nbsp;
+                    <a
+                        className = { `${ns}__link` }
+                        href = { CHROMIUM }>Chromium</a> or&nbsp;
+                    <a
+                        className = { `${ns}__link` }
+                        href = { FIREFOX }>Firefox</a> browsers.
+                </p>
+            </div>
+        );
+    }
+}
+

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

@@ -1,37 +1,6 @@
 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'
-    }
-];
+import { CHROME, FIREFOX, IE, SAFARI } from './browserLinks';
 
 /**
  * React component representing unsupported browser page.
@@ -39,6 +8,7 @@ const SUPPORTED_BROWSERS = [
  * @class UnsupportedDesktopBrowser
  */
 export default class UnsupportedDesktopBrowser extends Component {
+
     /**
      * Renders the component.
      *
@@ -48,78 +18,27 @@ export default class UnsupportedDesktopBrowser extends Component {
         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}` } />
+            <div className = { ns }>
+                <h2 className = { `${ns}__title` }>
+                    It looks like you're using a browser we don't support.
+                </h2>
+                <p className = { `${ns}__description` }>
+                    Please try again with&nbsp;
                     <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)
-                }
+                        href = { CHROME } >Chrome</a>,&nbsp;
+                    <a
+                        className = { `${ns}__link` }
+                        href = { FIREFOX }>Firefox</a>,&nbsp;
+                    <a
+                        className = { `${ns}__link` }
+                        href = { SAFARI }>Safari</a> or&nbsp;
+                    <a
+                        className = { `${ns}__link` }
+                        href = { IE }>IE</a>.
+                </p>
             </div>
         );
     }
 }
+

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

@@ -0,0 +1,37 @@
+/* @flow */
+
+/**
+ * The URL at which Google Chrome is available for download.
+ *
+ * @type {string}
+ */
+export const CHROME = 'http://google.com/chrome';
+
+/**
+ * The URL at which Chromium is available for download.
+ *
+ * @type {string}
+ */
+export const CHROMIUM = 'http://www.chromium.org/';
+
+/**
+ * The URL at which Mozilla Firefox is available for download.
+ *
+ * @type {string}
+ */
+export const FIREFOX = 'http://www.getfirefox.com/';
+
+/**
+ * The URL at which Microsoft Internet Explorer is available for download.
+ *
+ * @type {string}
+ */
+export const IE
+    = 'https://www.microsoft.com/en-us/download/internet-explorer.aspx';
+
+/**
+ * The URL at which Safari is available for download.
+ *
+ * @type {string}
+ */
+export const SAFARI = 'https://support.apple.com/downloads/safari';

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

@@ -1,3 +1,4 @@
+export { default as PluginRequiredBrowser } from './PluginRequiredBrowser';
 export { default as UnsupportedDesktopBrowser }
     from './UnsupportedDesktopBrowser';
 export { default as UnsupportedMobileBrowser }