Some fixes mentioned in the PR

This commit is contained in:
Ilya Daynatovich 2017-02-16 14:00:54 -06:00 committed by Lyubo Marinov
parent 631e853b40
commit 60b14e9b45
5 changed files with 102 additions and 48 deletions

View File

@ -7,6 +7,10 @@ if (userAgent.match(/Android/i)) {
OS = 'android';
} else if (userAgent.match(/iP(ad|hone|od)/i)) {
OS = 'ios';
} else if (userAgent.match(/windows/i)) {
OS = 'windows';
} else if (userAgent.match(/mac/i)) {
OS = 'mac';
}
/**

View File

@ -2,6 +2,8 @@
import React, { Component } from 'react';
import UnsupportedMobileBrowserStyle from './UnsupportedMobileBrowserStyle';
declare var interfaceConfig: Object;
/**
@ -22,12 +24,13 @@ export default class NoMobileApp extends Component {
return (
<div className = { ns }>
<h2 className = { `${ns}__title` }>
Video chat isn't available in the mobile apps
Video chat isn't available on mobile
</h2>
<p className = { `${ns}__description` }>
Video chat isn't available on mobile
Please use {interfaceConfig.APP_NAME} on
Desktop to join calls.
</p>
<UnsupportedMobileBrowserStyle />
</div>
);
}

View File

@ -2,8 +2,17 @@
import React, { Component } from 'react';
import { Platform } from '../../base/react';
import { CHROME, FIREFOX, IE, SAFARI } from './browserLinks';
/**
* Describes styles namespace for this component.
*
* @type {string}
*/
const NS = 'unsupported-desktop-browser';
/**
* React component representing unsupported browser page.
*
@ -16,31 +25,60 @@ export default class UnsupportedDesktopBrowser extends Component {
* @returns {ReactElement}
*/
render() {
const ns = 'unsupported-desktop-browser';
const nsLink = `${ns}__link`;
return (
<div className = { ns }>
<h2 className = { `${ns}__title` }>
<div className = { NS }>
<h2 className = { `${NS}__title` }>
It looks like you're using a browser we don't support.
</h2>
<p className = { `${ns}__description` }>
<p className = { `${NS}__description` }>
Please try again with the latest version of&nbsp;
<a
className = { nsLink }
className = { `${NS}__link` }
href = { CHROME } >Chrome</a>,&nbsp;
<a
className = { nsLink }
href = { FIREFOX }>Firefox</a>,&nbsp;
<a
className = { nsLink }
href = { SAFARI }>Safari</a> or&nbsp;
<a
className = { nsLink }
href = { IE }>IE</a>.
className = { `${NS}__link` }
href = { FIREFOX }>Firefox</a> or&nbsp;
{ this._showSafariLinkIfRequired() }
{ this._showIELinkIfRequired() }.
</p>
</div>
);
}
/**
* Depending on the platform returns the link to IE browser.
*
* @returns {ReactElement|null}
* @private
*/
_showIELinkIfRequired() {
if (Platform.OS === 'windows') {
return (
<a
className = { `${NS}__link` }
href = { IE }>IE</a>
);
}
return null;
}
/**
* Depending on the platform returns the link to Safari browser.
*
* @returns {ReactElement|null}
* @private
*/
_showSafariLinkIfRequired() {
if (Platform.OS === 'mac') {
return (
<a
className = { `${NS}__link` }
href = { SAFARI }>Safari</a>
);
}
return null;
}
}

View File

@ -5,6 +5,8 @@ import { connect } from 'react-redux';
import { Platform } from '../../base/react';
import UnsupportedMobileBrowserStyle from './UnsupportedMobileBrowserStyle';
/**
* The map of platforms to URLs at which the mobile app for the associated
* platform is available for download.
@ -101,40 +103,10 @@ class UnsupportedMobileBrowser extends Component {
</button>
</a>
</div>
{
this._renderStyle()
}
<UnsupportedMobileBrowserStyle />
</div>
);
}
/**
* Renders an HTML style element with CSS specific to
* this UnsupportedMobileBrowser.
*
* @private
* @returns {ReactElement}
*/
_renderStyle() {
// Temasys provide lib-jitsi-meet/modules/RTC/adapter.screenshare.js
// which detects whether the browser supports WebRTC. If the browser
// does not support WebRTC, it displays an alert in the form of a yellow
// bar at the top of the page. The alert notifies the user that the
// browser does not support WebRTC and, if Temasys provide a plugin for
// the browser, the alert contains a button to initiate installing the
// browser. When Temasys do not provide a plugin for the browser, we do
// not want the alert on the unsupported-browser page because the
// notification about the lack of WebRTC support is the whole point of
// the unsupported-browser page.
return (
<style type = 'text/css'>
{
'iframe[name="adapterjs-alert"] { display: none; }'
}
</style>
);
}
}
/**

View File

@ -0,0 +1,37 @@
import React, { Component } from 'react';
/**
* React component that represents HTML style element with CSS specific to
* unsupported mobile browser components.
*
* @private
* @returns {ReactElement}
*/
export default class UnsupportedMobileBrowserStyle extends Component {
/**
* Implements React's {@link Component#render()}.
*
* @inheritdoc
* @returns {ReactElement}
*/
render() {
// Temasys provide lib-jitsi-meet/modules/RTC/adapter.screenshare.js
// which detects whether the browser supports WebRTC. If the browser
// does not support WebRTC, it displays an alert in the form of a yellow
// bar at the top of the page. The alert notifies the user that the
// browser does not support WebRTC and, if Temasys provide a plugin for
// the browser, the alert contains a button to initiate installing the
// browser. When Temasys do not provide a plugin for the browser, we do
// not want the alert on the unsupported-browser page because the
// notification about the lack of WebRTC support is the whole point of
// the unsupported-browser page.
return (
<style type = 'text/css'>
{
'iframe[name="adapterjs-alert"] { display: none; }'
}
</style>
);
}
}