From 67ac0e8b8a1a299ca8f6a4d5afc37ee6051273ca Mon Sep 17 00:00:00 2001 From: damencho Date: Mon, 4 Dec 2017 17:16:16 -0600 Subject: [PATCH] Updates the unsupported mobile browser page. --- css/_variables.scss | 4 +- .../_unsupported-mobile-browser.scss | 21 +++--- interface_config.js | 15 ++++ lang/main.json | 8 +-- .../components/UnsupportedMobileBrowser.js | 70 +++++-------------- 5 files changed, 47 insertions(+), 71 deletions(-) diff --git a/css/_variables.scss b/css/_variables.scss index 04eea974ed..d163bd4fa3 100644 --- a/css/_variables.scss +++ b/css/_variables.scss @@ -138,8 +138,8 @@ $formPadding: 16px; /** * Unsupported browser */ -$primaryUnsupportedBrowserButtonBgColor: #17a0db; -$unsupportedBrowserButtonBgColor: #ff9a00; +$primaryUnsupportedBrowserButtonBgColor: #0052CC; +$unsupportedBrowserButtonBgColor: rgba(9, 30, 66, 0.04); $unsupportedBrowserTextColor: #4a4a4a; $unsupportedBrowserTextSmallFontSize: 17px; $unsupportedBrowserTitleColor: #fff; diff --git a/css/unsupported-browser/_unsupported-mobile-browser.scss b/css/unsupported-browser/_unsupported-mobile-browser.scss index 5a5e53458c..ffeb7868db 100644 --- a/css/unsupported-browser/_unsupported-mobile-browser.scss +++ b/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; - margin: 0 auto; + height: 2.2857142857142856em; + line-height: 2.2857142857142856em; + margin: auto auto 9px; max-width: 300px; - width: 98%; - @include border-radius(8px); + width: auto; + @include border-radius(3px); background-color: $unsupportedBrowserButtonBgColor; - font-size: 1.5em; - font-weight: 300; - letter-spacing: 0.5px; - text-shadow: 0px 1px 2px $unsupportedBrowserTextColor; - - // Disable standard button effects. - box-shadow: none; - outline: none; + color: #505F79; &:active { background-color: $unsupportedBrowserButtonBgColor; @@ -60,6 +54,7 @@ &_primary { background-color: $primaryUnsupportedBrowserButtonBgColor; + color: #FFFFFF; &:active { background-color: $primaryUnsupportedBrowserButtonBgColor; diff --git a/interface_config.js b/interface_config.js index ae284a1d93..38fbef8e60 100644 --- a/interface_config.js +++ b/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 */ diff --git a/lang/main.json b/lang/main.json index 1f6ee09497..cf1393e190 100644 --- a/lang/main.json +++ b/lang/main.json @@ -126,11 +126,9 @@ "raiseHand": "Raise / Lower your hand" }, "unsupportedBrowser": { - "appInstalled": "or if you already have it
then", - "appNotInstalled": "You need __app__ to join a conversation on your mobile", - "downloadApp": "Download the App", - "joinConversation": "Join the conversation", - "startConference": "Start a conference" + "appNotInstalled": "Join this meeting with __app__ on your phone.", + "downloadApp": "Download the app", + "openApp": "Continue to __app__" }, "bottomtoolbar": { "chat": "Open / close chat", diff --git a/react/features/unsupported-browser/components/UnsupportedMobileBrowser.js b/react/features/unsupported-browser/components/UnsupportedMobileBrowser.js index fd1dc2eff7..f224097b82 100644 --- a/react/features/unsupported-browser/components/UnsupportedMobileBrowser.js +++ b/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} */ const _URLS = { - android: 'https://play.google.com/store/apps/details?id=org.jitsi.meet', - ios: 'https://itunes.apple.com/us/app/jitsi-meet/id1165103905' + android: interfaceConfig.MOBILE_DOWNLOAD_LINK_ANDROID + || '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 (
@@ -115,20 +108,18 @@ class UnsupportedMobileBrowser extends Component<*, *> { translateToHTML( t, `${_TNS}.appNotInstalled`, - { postProcess: 'resolveAppName' }) + { app: appName }) }

- - -

- { translateToHTML(t, `${_TNS}.appInstalled`) } -

- +
@@ -139,27 +130,4 @@ class UnsupportedMobileBrowser extends Component<*, *> { } } -/** - * 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)); +export default translate(UnsupportedMobileBrowser);