Updates the unsupported mobile browser page.

css/_variables.scss

@@ -138,8 +138,8 @@ $formPadding: 16px;
 /**
  * Unsupported browser
  */
-$primaryUnsupportedBrowserButtonBgColor: #17a0db;
+$primaryUnsupportedBrowserButtonBgColor: #0052CC;
-$unsupportedBrowserButtonBgColor: #ff9a00;
+$unsupportedBrowserButtonBgColor: rgba(9, 30, 66, 0.04);
 $unsupportedBrowserTextColor: #4a4a4a;
 $unsupportedBrowserTextSmallFontSize: 17px;
 $unsupportedBrowserTitleColor: #fff;

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

@@ -17,7 +17,7 @@
     }
 
     &__text {
-        font-size: 1.8em;
+        font-size: 1.2em;
         line-height: em(29px, 21px);
         margin-bottom: 0.65em;
 
@@ -39,20 +39,14 @@
 
     &__button {
         border: 0;
-        height: 42px;
+        height: 2.2857142857142856em;
-        margin: 0 auto;
+        line-height: 2.2857142857142856em;
+        margin: auto auto 9px;
         max-width: 300px;
-        width: 98%;
+        width: auto;
-        @include border-radius(8px);
+        @include border-radius(3px);
         background-color: $unsupportedBrowserButtonBgColor;
-        font-size: 1.5em;
+        color: #505F79;
-        font-weight: 300;
-        letter-spacing: 0.5px;
-        text-shadow: 0px 1px 2px $unsupportedBrowserTextColor;
-
-        // Disable standard button effects.
-        box-shadow: none;
-        outline: none;
 
         &:active {
             background-color: $unsupportedBrowserButtonBgColor;
@@ -60,6 +54,7 @@
 
         &_primary {
             background-color: $primaryUnsupportedBrowserButtonBgColor;
+            color: #FFFFFF;
 
             &:active {
                 background-color: $primaryUnsupportedBrowserButtonBgColor;

interface_config.js

@@ -150,6 +150,21 @@ var interfaceConfig = {
      * @type {boolean}
      */
     VIDEO_QUALITY_LABEL_DISABLED: false
+
+    /**
+     * Specify custom URL for downloading android mobile app.
+     */
+    // MOBILE_DOWNLOAD_LINK_ANDROID: 'https://play.google.com/store/apps/details?id=org.jitsi.meet',
+
+    /**
+     * Specify URL for downloading ios mobile app.
+     */
+    // MOBILE_DOWNLOAD_LINK_IOS: 'https://itunes.apple.com/us/app/jitsi-meet/id1165103905',
+
+    /**
+     * Specify mobile app scheme for opening the app from the mobile browser.
+     */
+    // MOBILE_APP_SCHEME: 'org.jitsi.meet'
 };
 
 /* eslint-enable no-unused-vars, no-var, max-len */

lang/main.json

@@ -126,11 +126,9 @@
         "raiseHand": "Raise / Lower your hand"
     },
     "unsupportedBrowser": {
-        "appInstalled": "or if you already have it<br /><strong>then</strong>",
+        "appNotInstalled": "Join this meeting with __app__ on your phone.",
-        "appNotInstalled": "You need <strong>__app__</strong> to join a conversation on your mobile",
+        "downloadApp": "Download the app",
-        "downloadApp": "Download the App",
+        "openApp": "Continue to __app__"
-        "joinConversation": "Join the conversation",
-        "startConference": "Start a conference"
     },
     "bottomtoolbar": {
         "chat": "Open / close chat",

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

@@ -2,13 +2,14 @@
 
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
-import { connect } from 'react-redux';
 
 import { translate, translateToHTML } from '../../base/i18n';
 import { Platform } from '../../base/react';
 
 import HideNotificationBarStyle from './HideNotificationBarStyle';
 
+declare var interfaceConfig: Object;
+
 /**
  * The namespace of the CSS styles of UnsupportedMobileBrowser.
  *
@@ -33,8 +34,10 @@ const _TNS = 'unsupportedBrowser';
  * @type {Array<string>}
  */
 const _URLS = {
-    android: 'https://play.google.com/store/apps/details?id=org.jitsi.meet',
+    android: interfaceConfig.MOBILE_DOWNLOAD_LINK_ANDROID
-    ios: 'https://itunes.apple.com/us/app/jitsi-meet/id1165103905'
+        || 'https://play.google.com/store/apps/details?id=org.jitsi.meet',
+    ios: interfaceConfig.MOBILE_DOWNLOAD_LINK_IOS
+        || 'https://itunes.apple.com/us/app/jitsi-meet/id1165103905'
 };
 
 /**
@@ -51,15 +54,6 @@ class UnsupportedMobileBrowser extends Component<*, *> {
      * @static
      */
     static propTypes = {
-        /**
-         * The name of the conference room to be joined upon clicking the
-         * respective button.
-         *
-         * @private
-         * @type {string}
-         */
-        _room: PropTypes.string,
-
         /**
          * The function to translate human-readable text.
          *
@@ -76,18 +70,15 @@ class UnsupportedMobileBrowser extends Component<*, *> {
      * @inheritdoc
      */
     componentWillMount() {
-        const joinText
-            = this.props._room ? 'joinConversation' : 'startConference';
-
         // If the user installed the app while this Component was displayed
         // (e.g. the user clicked the Download the App button), then we would
         // like to open the current URL in the mobile app. The only way to do it
         // appears to be a link with an app-specific scheme, not a Universal
         // Link.
-        const joinURL = `org.jitsi.meet:${window.location.href}`;
+        const appScheme = interfaceConfig.MOBILE_APP_SCHEME || 'org.jitsi.meet';
+        const joinURL = `${appScheme}:${window.location.href}`;
 
         this.setState({
-            joinText,
             joinURL
         });
     }
@@ -101,8 +92,10 @@ class UnsupportedMobileBrowser extends Component<*, *> {
     render() {
         const { t } = this.props;
 
-        const downloadButtonClassName
+        const openAppButtonClassName
             = `${_SNS}__button ${_SNS}__button_primary`;
+        const appName
+            = interfaceConfig.ADD_PEOPLE_APP_NAME || interfaceConfig.APP_NAME;
 
         return (
             <div className = { _SNS }>
@@ -115,20 +108,18 @@ class UnsupportedMobileBrowser extends Component<*, *> {
                             translateToHTML(
                                 t,
                                 `${_TNS}.appNotInstalled`,
-                                { postProcess: 'resolveAppName' })
+                                { app: appName })
                         }
                     </p>
-                    <a href = { _URLS[Platform.OS] }>
+                    <a href = { this.state.joinURL }>
-                        <button className = { downloadButtonClassName }>
+                        <button className = { openAppButtonClassName }>
-                            { t(`${_TNS}.downloadApp`) }
+                            { t(`${_TNS}.openApp`,
+                                { app: appName }) }
                         </button>
                     </a>
-                    <p className = { `${_SNS}__text ${_SNS}__text_small` }>
+                    <a href = { _URLS[Platform.OS] }>
-                        { translateToHTML(t, `${_TNS}.appInstalled`) }
-                    </p>
-                    <a href = { this.state.joinURL }>
                         <button className = { `${_SNS}__button` }>
-                            { t(`${_TNS}.${this.state.joinText}`) }
+                            { t(`${_TNS}.downloadApp`) }
                         </button>
                     </a>
                 </div>
@@ -139,27 +130,4 @@ class UnsupportedMobileBrowser extends Component<*, *> {
     }
 }
 
-/**
+export default translate(UnsupportedMobileBrowser);
- * Maps (parts of) the Redux state to the associated UnsupportedMobileBrowser's
- * props.
- *
- * @param {Object} state - Redux state.
- * @private
- * @returns {{
- *     _room: string
- * }}
- */
-function _mapStateToProps(state) {
-    return {
-        /**
-         * The name of the conference room to be joined upon clicking the
-         * respective button.
-         *
-         * @private
-         * @type {string}
-         */
-        _room: state['features/base/conference'].room
-    };
-}
-
-export default translate(connect(_mapStateToProps)(UnsupportedMobileBrowser));