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 ( +
+ 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. +
+{ plugin }
- : null; - - return ( -
+ Please try again with
-