From 1268afd3f816a19ff6ffedf1cd2aca00c9ccaa53 Mon Sep 17 00:00:00 2001 From: Ilya Daynatovich Date: Thu, 2 Feb 2017 18:01:03 +0200 Subject: [PATCH] Added unsuported browser and plugin required pages --- .../_unsupported-desktop-browser.scss | 145 ++++-------------- react/features/base/connection/actions.web.js | 9 ++ .../features/base/util/interceptComponent.js | 19 ++- .../conference/components/Conference.web.js | 2 +- .../components/PluginRequiredBrowser.js | 44 ++++++ .../components/UnsupportedDesktopBrowser.js | 121 +++------------ .../components/browserLinks.js | 37 +++++ .../unsupported-browser/components/index.js | 1 + 8 files changed, 156 insertions(+), 222 deletions(-) create mode 100644 react/features/unsupported-browser/components/PluginRequiredBrowser.js create mode 100644 react/features/unsupported-browser/components/browserLinks.js diff --git a/css/unsupported-browser/_unsupported-desktop-browser.scss b/css/unsupported-browser/_unsupported-desktop-browser.scss index 720f99aba5..2446acf071 100644 --- a/css/unsupported-browser/_unsupported-desktop-browser.scss +++ b/css/unsupported-browser/_unsupported-desktop-browser.scss @@ -1,132 +1,39 @@ -.supported-browser { - color: #929391; - 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; - } +.unsupported-desktop-browser { + @include absoluteAligning(); - &_ie { - background-image: url('../../images/ie.png'); - height: 78px; - width: 80px; - } + display: block; + text-align: center; - &_safari { - background-image: url('../../images/safari.png'); - height: 79px; - width: 78px; - } + &__title { + color: #fff; + font-weight: 300; + font-size: 24px; + letter-spacing: 1px; } - &__text - { - line-height: 1.2em; + &__description { + margin-top: 16px; + 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 { - background-color: #e8e8e8; - border: 1px solid #cfcfcf; - 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; - } + &__link { + color: $linkFontColor; + @include transition(color .1s ease-out); - &__title { - margin: 0 auto; - width: 20em; - } + &:hover { + color: $linkHoverFontColor; + cursor: pointer; + text-decoration: none; - &-wrapper { - background: #fff; - display: block; - height: 100%; - position: absolute; - width: 100%; + @include transition(color .1s ease-in); + } } } diff --git a/react/features/base/connection/actions.web.js b/react/features/base/connection/actions.web.js index 836952fa20..3082cbaad3 100644 --- a/react/features/base/connection/actions.web.js +++ b/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(); diff --git a/react/features/base/util/interceptComponent.js b/react/features/base/util/interceptComponent.js index 0d79bc2512..beacb02279 100644 --- a/react/features/base/util/interceptComponent.js +++ b/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; + } } ]; diff --git a/react/features/conference/components/Conference.web.js b/react/features/conference/components/Conference.web.js index e9b632fa08..38a6bceeb9 100644 --- a/react/features/conference/components/Conference.web.js +++ b/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()); } /** diff --git a/react/features/unsupported-browser/components/PluginRequiredBrowser.js b/react/features/unsupported-browser/components/PluginRequiredBrowser.js new file mode 100644 index 0000000000..4e06c8080a --- /dev/null +++ b/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 ( +
+

+ Your browser requires a plugin for this conversation. +

+

+ 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  + Chrome,  + Chromium or  + Firefox browsers. +

+
+ ); + } +} + diff --git a/react/features/unsupported-browser/components/UnsupportedDesktopBrowser.js b/react/features/unsupported-browser/components/UnsupportedDesktopBrowser.js index 545c2c2c95..1e264f2b9a 100644 --- a/react/features/unsupported-browser/components/UnsupportedDesktopBrowser.js +++ b/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 ( -
-
-
-

- This application is currently only supported by -

- { - this._renderSupportedBrowsers() - } -
-
-
- ); - } - - /** - * 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 - ?

{ plugin }

- : null; - - return ( -
-
- { - title - } - { - pluginElement - } -
-
-
+
+

+ It looks like you're using a browser we don't support. +

+

+ Please try again with  -

- -
-
- ); - } - - /** - * Renders the list of browsers supported by the application. - * - * @private - * @returns {ReactElement} - */ - _renderSupportedBrowsers() { - return ( -
- { - SUPPORTED_BROWSERS.map(this._renderSupportedBrowser) - } + href = { CHROME } >Chrome,  + Firefox,  + Safari or  + IE. +

); } } + diff --git a/react/features/unsupported-browser/components/browserLinks.js b/react/features/unsupported-browser/components/browserLinks.js new file mode 100644 index 0000000000..ba523fe264 --- /dev/null +++ b/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'; diff --git a/react/features/unsupported-browser/components/index.js b/react/features/unsupported-browser/components/index.js index 84560afef9..a9503dd3a9 100644 --- a/react/features/unsupported-browser/components/index.js +++ b/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 }