Some fixes mentioned in the PR
This commit is contained in:
parent
631e853b40
commit
60b14e9b45
|
@ -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';
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -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
|
||||
<a
|
||||
className = { nsLink }
|
||||
className = { `${NS}__link` }
|
||||
href = { CHROME } >Chrome</a>,
|
||||
<a
|
||||
className = { nsLink }
|
||||
href = { FIREFOX }>Firefox</a>,
|
||||
<a
|
||||
className = { nsLink }
|
||||
href = { SAFARI }>Safari</a> or
|
||||
<a
|
||||
className = { nsLink }
|
||||
href = { IE }>IE</a>.
|
||||
className = { `${NS}__link` }
|
||||
href = { FIREFOX }>Firefox</a> or
|
||||
{ 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;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
}
|
Loading…
Reference in New Issue