126 lines
3.5 KiB
JavaScript
126 lines
3.5 KiB
JavaScript
|
import React, { Component } from 'react';
|
||
|
|
||
|
/**
|
||
|
* The list of all browsers supported by the application.
|
||
|
*/
|
||
|
const SUPPORTED_BROWSERS = [
|
||
|
{
|
||
|
link: 'http://google.com/chrome',
|
||
|
name: 'chrome',
|
||
|
title: 'Chrome 44+'
|
||
|
}, {
|
||
|
link: 'http://www.chromium.org/',
|
||
|
name: 'chromium',
|
||
|
title: 'Chromium 44+'
|
||
|
}, {
|
||
|
link: 'http://www.getfirefox.com/',
|
||
|
name: 'firefox',
|
||
|
title: 'Firefox and Iceweasel 40+'
|
||
|
}, {
|
||
|
link: 'http://www.opera.com',
|
||
|
name: 'opera',
|
||
|
title: 'Opera 32+'
|
||
|
}, {
|
||
|
link: 'https://temasys.atlassian.net/wiki/display/TWPP/WebRTC+Plugins',
|
||
|
name: 'ie',
|
||
|
plugin: 'Temasys 0.8.854+',
|
||
|
title: 'IE'
|
||
|
}, {
|
||
|
link: 'https://temasys.atlassian.net/wiki/display/TWPP/WebRTC+Plugins',
|
||
|
name: 'safari',
|
||
|
plugin: 'Temasys 0.8.854+',
|
||
|
title: 'Safari'
|
||
|
}
|
||
|
];
|
||
|
|
||
|
/**
|
||
|
* React component representing unsupported browser page.
|
||
|
*
|
||
|
* @class UnsupportedDesktopBrowser
|
||
|
*/
|
||
|
export default class UnsupportedDesktopBrowser extends Component {
|
||
|
/**
|
||
|
* Renders the component.
|
||
|
*
|
||
|
* @returns {ReactElement}
|
||
|
*/
|
||
|
render() {
|
||
|
const ns = 'unsupported-desktop-browser';
|
||
|
|
||
|
return (
|
||
|
<div className = { `${ns}-wrapper` }>
|
||
|
<div className = { ns }>
|
||
|
<div className = { `${ns}__content` }>
|
||
|
<h2 className = { `${ns}__title` }>
|
||
|
This application is currently only supported by
|
||
|
</h2>
|
||
|
{
|
||
|
this._renderSupportedBrowsers()
|
||
|
}
|
||
|
</div>
|
||
|
</div>
|
||
|
</div>
|
||
|
);
|
||
|
}
|
||
|
|
||
|
/**
|
||
|
* Renders a specific browser supported by the application.
|
||
|
*
|
||
|
* @param {Object} browser - The (information about the) browser supported
|
||
|
* by the application to render.
|
||
|
* @private
|
||
|
* @returns {ReactElement}
|
||
|
*/
|
||
|
_renderSupportedBrowser(browser) {
|
||
|
const { link, name, plugin, title } = browser;
|
||
|
const ns = 'supported-browser';
|
||
|
|
||
|
// Browsers which do not support WebRTC could support the application
|
||
|
// with the Temasys plugin.
|
||
|
const pluginElement
|
||
|
= plugin
|
||
|
? <p className = { `${ns}__text_small` }>{ plugin }</p>
|
||
|
: null;
|
||
|
|
||
|
return (
|
||
|
<div
|
||
|
className = { ns }
|
||
|
key = { name }>
|
||
|
<div className = { `${ns}__text` }>
|
||
|
{
|
||
|
title
|
||
|
}
|
||
|
{
|
||
|
pluginElement
|
||
|
}
|
||
|
</div>
|
||
|
<div className = { `${ns}__tile` }>
|
||
|
<div
|
||
|
className = { `${ns}__logo ${ns}__logo_${name}` } />
|
||
|
<a
|
||
|
className = { `${ns}__link` }
|
||
|
href = { link }>
|
||
|
<div className = { `${ns}__button` }>DOWNLOAD</div>
|
||
|
</a>
|
||
|
</div>
|
||
|
</div>
|
||
|
);
|
||
|
}
|
||
|
|
||
|
/**
|
||
|
* Renders the list of browsers supported by the application.
|
||
|
*
|
||
|
* @private
|
||
|
* @returns {ReactElement}
|
||
|
*/
|
||
|
_renderSupportedBrowsers() {
|
||
|
return (
|
||
|
<div className = 'supported-browser-list'>
|
||
|
{
|
||
|
SUPPORTED_BROWSERS.map(this._renderSupportedBrowser)
|
||
|
}
|
||
|
</div>
|
||
|
);
|
||
|
}
|
||
|
}
|