DeforaNetworks/jitsi-meet
3
0
Fork 0
Code Releases Activity

Added unsuported browser and plugin required pages

Browse Source
This commit is contained in:
Ilya Daynatovich
2017-02-27 21:50:20 -06:00
committed by Lyubo Marinov
parent c1b9b7a623
commit 1268afd3f8
8 changed files with 159 additions and 225 deletions
Download Patch File Download Diff File Expand all files Collapse all files
react/features/base/connection/actions.web.js
+9
View File
@@ -8,6 +8,8 @@ import UIEvents from '../../../../service/UI/UIEvents';
import { SET_DOMAIN } from './actionTypes';
import { appNavigate } from '../../app';
declare var APP: Object;
const logger = require('jitsi-meet-logger').getLogger(__filename);
@@ -32,6 +34,13 @@ export function connect() {
// XXX For web based version we use conference initialization logic
// from the old app (at the moment of writing).
return APP.conference.init({ roomName: room }).then(() => {
// If during the conference initialization was defined that browser
// doesn't support WebRTC then we should define which route
// to render.
if (APP.unsupportedBrowser) {
dispatch(appNavigate(room));
}
if (APP.logCollector) {
// Start the LogCollector's periodic "store logs" task
APP.logCollector.start();
react/features/base/util/interceptComponent.js
+18 -1
View File
@@ -1,5 +1,11 @@
/* global APP */
import { Platform } from '../react';
import { UnsupportedMobileBrowser } from '../../unsupported-browser';
import {
UnsupportedDesktopBrowser,
PluginRequiredBrowser,
UnsupportedMobileBrowser
} from '../../unsupported-browser';
/**
* Array of rules defining whether we should intercept component to render
@@ -26,6 +32,17 @@ const _RULES = [
if (OS === 'android' || OS === 'ios') {
return UnsupportedMobileBrowser;
}
},
() => {
if (APP.unsupportedBrowser) {
const { isOldBrowser } = APP.unsupportedBrowser;
if (isOldBrowser) {
return UnsupportedDesktopBrowser;
}
return PluginRequiredBrowser;
}
}
];
react/features/conference/components/Conference.web.js
+1 -1
View File
@@ -57,7 +57,7 @@ class Conference extends Component {
* @inheritdoc
*/
componentWillUnmount() {
this.props.dispatch(disconnect());
APP.conference.isJoined() && this.props.dispatch(disconnect());
}
/**
react/features/unsupported-browser/components/PluginRequiredBrowser.js
+44
View File
@@ -0,0 +1,44 @@
import React, { Component } from 'react';
import { CHROME, CHROMIUM, FIREFOX } from './browserLinks';
/**
* React component representing plugin installation required page.
*
* @class PluginRequiredBrowser
*/
export default class PluginRequiredBrowser extends Component {
/**
* Renders the component.
*
* @returns {ReactElement}
*/
render() {
const ns = 'unsupported-desktop-browser';
return (
<div className = { ns }>
<h2 className = { `${ns}__title` }>
Your browser requires a plugin for this conversation.
</h2>
<p className = { `${ns}__description_small` }>
Once you install the plugin, it will be possible for you
to have your conversation here. For best experience,
however, we strongly recommend that you do that using
the&nbsp;
<a
className = { `${ns}__link` }
href = { CHROME }>Chrome</a>,&nbsp;
<a
className = { `${ns}__link` }
href = { CHROMIUM }>Chromium</a> or&nbsp;
<a
className = { `${ns}__link` }
href = { FIREFOX }>Firefox</a> browsers.
</p>
</div>
);
}
}
react/features/unsupported-browser/components/UnsupportedDesktopBrowser.js
+20 -101
View File
@@ -1,37 +1,6 @@
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'
}
];
import { CHROME, FIREFOX, IE, SAFARI } from './browserLinks';
/**
* React component representing unsupported browser page.
@@ -39,6 +8,7 @@ const SUPPORTED_BROWSERS = [
* @class UnsupportedDesktopBrowser
*/
export default class UnsupportedDesktopBrowser extends Component {
/**
* Renders the component.
*
@@ -48,78 +18,27 @@ export default class UnsupportedDesktopBrowser extends Component {
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}` } />
<div className = { ns }>
<h2 className = { `${ns}__title` }>
It looks like you're using a browser we don't support.
</h2>
<p className = { `${ns}__description` }>
Please try again with&nbsp;
<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)
}
href = { CHROME } >Chrome</a>,&nbsp;
<a
className = { `${ns}__link` }
href = { FIREFOX }>Firefox</a>,&nbsp;
<a
className = { `${ns}__link` }
href = { SAFARI }>Safari</a> or&nbsp;
<a
className = { `${ns}__link` }
href = { IE }>IE</a>.
</p>
</div>
);
}
}
react/features/unsupported-browser/components/browserLinks.js
+37
View File
@@ -0,0 +1,37 @@
/* @flow */
/**
* The URL at which Google Chrome is available for download.
*
* @type {string}
*/
export const CHROME = 'http://google.com/chrome';
/**
* The URL at which Chromium is available for download.
*
* @type {string}
*/
export const CHROMIUM = 'http://www.chromium.org/';
/**
* The URL at which Mozilla Firefox is available for download.
*
* @type {string}
*/
export const FIREFOX = 'http://www.getfirefox.com/';
/**
* The URL at which Microsoft Internet Explorer is available for download.
*
* @type {string}
*/
export const IE
= 'https://www.microsoft.com/en-us/download/internet-explorer.aspx';
/**
* The URL at which Safari is available for download.
*
* @type {string}
*/
export const SAFARI = 'https://support.apple.com/downloads/safari';
react/features/unsupported-browser/components/index.js
+1
View File
@@ -1,3 +1,4 @@
export { default as PluginRequiredBrowser } from './PluginRequiredBrowser';
export { default as UnsupportedDesktopBrowser }
from './UnsupportedDesktopBrowser';
export { default as UnsupportedMobileBrowser }