Added unsuported browser and plugin required pages

css/unsupported-browser/_unsupported-desktop-browser.scss

@@ -1,132 +1,39 @@
-.supported-browser {
+.unsupported-desktop-browser {
-    color: #929391;
+    @include absoluteAligning();
-    display: inline-block;
-    font-size: 20px;
-    margin: 1em 7px;
-    vertical-align: middle;
-    width: 138px;
-
-    &__button {
-        background-color: #62c82a;
-        border: 1px solid #3c8117;
-        border-radius: 10px;
-        color: #FFFFFF;
-        font-size: 12px;
-        height: 26px;
-        margin: 15px auto 0px auto;
-        padding-top: 13px;
-        text-align: center;
-        width: 115px;
-    }
-
-    &__link {
-        color: #087dba;
-        text-decoration: none;
-
-        &:hover {
-            text-decoration: none;
-        }
-
-        &:active {
-            text-decoration: none;
-        }
-
-        &:focus {
-            text-decoration: none;
-        }
-    }
-
-    &-list
-    {
-        margin: 0 auto;
-    }
-
-    &__logo {
-        margin: 20px auto 0px auto;
-
-        &_chrome {
-            background-image: url('../../images/chrome.png');
-            height: 78px;
-            width: 78px;
-        }
-
-        &_chromium {
-            background-image: url('../../images/chromium.png');
-            height: 78px;
-            width: 77px;
-        }
-
-        &_firefox {
-            background-image: url('../../images/firefox.png');
-            height: 80px;
-            width: 86px;
-        }
-
-        &_opera {
-            background-image: url('../../images/opera.png');
-            height: 78px;
-            width: 73px;
-        }
 
-        &_ie {
+    display: block;
-            background-image: url('../../images/ie.png');
+    text-align: center;
-            height: 78px;
-            width: 80px;
-        }
 
-        &_safari {
+    &__title {
-            background-image: url('../../images/safari.png');
+        color: #fff;
-            height: 79px;
+        font-weight: 300;
-            width: 78px;
+        font-size: 24px;
-        }
+        letter-spacing: 1px;
     }
 
-    &__text
+    &__description {
-    {
+        margin-top: 16px;
-        line-height: 1.2em;
+        color: rgba(255, 255, 255, 0.7);
+        font-weight: 300;
+        font-size: 21px;
+        letter-spacing: 1px;
 
         &_small {
-            font-size: small;
+            @extend .unsupported-desktop-browser__description;
+            font-size: 16px;
         }
     }
 
-    &__tile {
+    &__link {
-        background-color: #e8e8e8;
+        color: $linkFontColor;
-        border: 1px solid #cfcfcf;
+        @include transition(color .1s ease-out);
-        border-radius: 10px;
-        height: 163px;
-        margin-top: 5px;
-        width: 138px;
-    }
-}
-
-.unsupported-desktop-browser {
-    display: block;
-    height: 565px;
-    margin: auto;
-    overflow:hidden;
-    position: absolute;
-    text-align: center;
-    top: 0; left: 0; bottom: 0; right: 0;
-    width:500px;
-
-    &__page {
-        display:inline-block;
-        font-size: 28px;
-        padding-top: 25px;
-        vertical-align:middle;
-    }
 
-    &__title {
+        &:hover {
-        margin: 0 auto;
+            color: $linkHoverFontColor;
-        width: 20em;
+            cursor: pointer;
-    }
+            text-decoration: none;
 
-    &-wrapper {
+            @include transition(color .1s ease-in);
-        background: #fff;
+        }
-        display: block;
-        height: 100%;
-        position: absolute;
-        width: 100%;
     }
 }

react/features/base/connection/actions.web.js

@@ -8,6 +8,8 @@ import UIEvents from '../../../../service/UI/UIEvents';
 
 import { SET_DOMAIN } from './actionTypes';
 
+import { appNavigate } from '../../app';
+
 declare var APP: Object;
 
 const logger = require('jitsi-meet-logger').getLogger(__filename);
@@ -32,6 +34,13 @@ export function connect() {
         // XXX For web based version we use conference initialization logic
         // from the old app (at the moment of writing).
         return APP.conference.init({ roomName: room }).then(() => {
+            // If during the conference initialization was defined that browser
+            // doesn't support WebRTC then we should define which route
+            // to render.
+            if (APP.unsupportedBrowser) {
+                dispatch(appNavigate(room));
+            }
+
             if (APP.logCollector) {
                 // Start the LogCollector's periodic "store logs" task
                 APP.logCollector.start();

react/features/base/util/interceptComponent.js

@@ -1,5 +1,11 @@
+/* global APP */
+
 import { Platform } from '../react';
-import { UnsupportedMobileBrowser } from '../../unsupported-browser';
+import {
+    UnsupportedDesktopBrowser,
+    PluginRequiredBrowser,
+    UnsupportedMobileBrowser
+} from '../../unsupported-browser';
 
 /**
  * Array of rules defining whether we should intercept component to render
@@ -26,6 +32,17 @@ const _RULES = [
         if (OS === 'android' || OS === 'ios') {
             return UnsupportedMobileBrowser;
         }
+    },
+    () => {
+        if (APP.unsupportedBrowser) {
+            const { isOldBrowser } = APP.unsupportedBrowser;
+
+            if (isOldBrowser) {
+                return UnsupportedDesktopBrowser;
+            }
+
+            return PluginRequiredBrowser;
+        }
     }
 ];
 

react/features/conference/components/Conference.web.js

@@ -57,7 +57,7 @@ class Conference extends Component {
      * @inheritdoc
      */
     componentWillUnmount() {
-        this.props.dispatch(disconnect());
+        APP.conference.isJoined() && this.props.dispatch(disconnect());
     }
 
     /**

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';
 
-/**
+import { CHROME, FIREFOX, IE, SAFARI } from './browserLinks';
- * 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.
@@ -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 }>
+                <h2 className = { `${ns}__title` }>
-                    <div className = { `${ns}__content` }>
+                    It looks like you're using a browser we don't support.
-                        <h2 className = { `${ns}__title` }>
+                </h2>
-                            This application is currently only supported by
+                <p className = { `${ns}__description` }>
-                        </h2>
+                    Please try again with&nbsp;
-                        {
-                            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 }>
+                        href = { CHROME } >Chrome</a>,&nbsp;
-                        <div className = { `${ns}__button` }>DOWNLOAD</div>
+                    <a
-                    </a>
+                        className = { `${ns}__link` }
-                </div>
+                        href = { FIREFOX }>Firefox</a>,&nbsp;
-            </div>
+                    <a
-        );
+                        className = { `${ns}__link` }
-    }
+                        href = { SAFARI }>Safari</a> or&nbsp;
-
+                    <a
-    /**
+                        className = { `${ns}__link` }
-     * Renders the list of browsers supported by the application.
+                        href = { IE }>IE</a>.
-     *
+                </p>
-     * @private
-     * @returns {ReactElement}
-     */
-    _renderSupportedBrowsers() {
-        return (
-            <div className = 'supported-browser-list'>
-                {
-                    SUPPORTED_BROWSERS.map(this._renderSupportedBrowser)
-                }
             </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 }