Updates the unsupported mobile browser page.
This commit is contained in:
damencho
yanas
parent
b74b29e8a0
commit
67ac0e8b8a
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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 */
|
||||
|
|
|
|||
|
|
@ -126,11 +126,9 @@
|
|||
"raiseHand": "Raise / Lower your hand"
|
||||
},
|
||||
"unsupportedBrowser": {
|
||||
"appInstalled": "or if you already have it<br /><strong>then</strong>",
|
||||
"appNotInstalled": "You need <strong>__app__</strong> 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",
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
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 (
|
||||
<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] }>
|
||||
<button className = { downloadButtonClassName }>
|
||||
{ t(`${_TNS}.downloadApp`) }
|
||||
<a href = { this.state.joinURL }>
|
||||
<button className = { openAppButtonClassName }>
|
||||
{ t(`${_TNS}.openApp`,
|
||||
{ app: appName }) }
|
||||
</button>
|
||||
</a>
|
||||
<p className = { `${_SNS}__text ${_SNS}__text_small` }>
|
||||
{ translateToHTML(t, `${_TNS}.appInstalled`) }
|
||||
</p>
|
||||
<a href = { this.state.joinURL }>
|
||||
<a href = { _URLS[Platform.OS] }>
|
||||
<button className = { `${_SNS}__button` }>
|
||||
{ t(`${_TNS}.${this.state.joinText}`) }
|
||||
{ t(`${_TNS}.downloadApp`) }
|
||||
</button>
|
||||
</a>
|
||||
</div>
|
||||
|
|
@ -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);
|
||||
|
|
|
|||
Loading…
Reference in New Issue