haskal
/
jiti-meet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Added unsuported browser and plugin required pages

This commit is contained in:
Ilya Daynatovich 2017-02-02 18:01:03 +02:00 committed by Lyubo Marinov
parent c1b9b7a623
commit 1268afd3f8
8 changed files with 159 additions and 225 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

147
css/unsupported-browser/_unsupported-desktop-browser.scss
View File

@ -1,132 +1,39 @@
.supported-browser {
color: #929391;
display: inline-block;
font-size: 20px;
margin: 1em 7px;
vertical-align: middle;
width: 138px;
.unsupported-desktop-browser {
@include absoluteAligning();
&__button {
background-color: #62c82a;
border: 1px solid #3c8117;
border-radius: 10px;
color: #FFFFFF;
font-size: 12px;
height: 26px;
margin: 15px auto 0px auto;
padding-top: 13px;
display: block;
text-align: center;
width: 115px;
&__title {
color: #fff;
font-weight: 300;
font-size: 24px;
letter-spacing: 1px;
}
&__description {
margin-top: 16px;
color: rgba(255, 255, 255, 0.7);
font-weight: 300;
font-size: 21px;
letter-spacing: 1px;
&_small {
@extend .unsupported-desktop-browser__description;
font-size: 16px;
}
}
&__link {
color: #087dba;
text-decoration: none;
color: $linkFontColor;
@include transition(color .1s ease-out);
&:hover {
color: $linkHoverFontColor;
cursor: pointer;
text-decoration: none;
}
&:active {
text-decoration: none;
@include transition(color .1s ease-in);
}
&:focus {
text-decoration: none;
}
}
&-list
{
margin: 0 auto;
}
&__logo {
margin: 20px auto 0px auto;
&_chrome {
background-image: url('../../images/chrome.png');
height: 78px;
width: 78px;
}
&_chromium {
background-image: url('../../images/chromium.png');
height: 78px;
width: 77px;
}
&_firefox {
background-image: url('../../images/firefox.png');
height: 80px;
width: 86px;
}
&_opera {
background-image: url('../../images/opera.png');
height: 78px;
width: 73px;
}
&_ie {
background-image: url('../../images/ie.png');
height: 78px;
width: 80px;
}
&_safari {
background-image: url('../../images/safari.png');
height: 79px;
width: 78px;
}
}
&__text
{
line-height: 1.2em;
&_small {
font-size: small;
}
}
&__tile {
background-color: #e8e8e8;
border: 1px solid #cfcfcf;
border-radius: 10px;
height: 163px;
margin-top: 5px;
width: 138px;
}
}
.unsupported-desktop-browser {
display: block;
height: 565px;
margin: auto;
overflow:hidden;
position: absolute;
text-align: center;
top: 0; left: 0; bottom: 0; right: 0;
width:500px;
&__page {
display:inline-block;
font-size: 28px;
padding-top: 25px;
vertical-align:middle;
}
&__title {
margin: 0 auto;
width: 20em;
}
&-wrapper {
background: #fff;
display: block;
height: 100%;
position: absolute;
width: 100%;
}
}

9
react/features/base/connection/actions.web.js
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();

19
react/features/base/util/interceptComponent.js
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;
}
}
];

2
react/features/conference/components/Conference.web.js
View File

@ -57,7 +57,7 @@ class Conference extends Component {
* @inheritdoc
*/
componentWillUnmount() {
this.props.dispatch(disconnect());
APP.conference.isJoined() && this.props.dispatch(disconnect());
}
/**

44
react/features/unsupported-browser/components/PluginRequiredBrowser.js Normal file
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>
);
}
}

115
react/features/unsupported-browser/components/UnsupportedDesktopBrowser.js
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
It looks like you're using a browser we don't support.
</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}` } />
<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>
);
}
}

37
react/features/unsupported-browser/components/browserLinks.js Normal file
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';

1
react/features/unsupported-browser/components/index.js
View File

@ -1,3 +1,4 @@
export { default as PluginRequiredBrowser } from './PluginRequiredBrowser';
export { default as UnsupportedDesktopBrowser }
from './UnsupportedDesktopBrowser';
export { default as UnsupportedMobileBrowser }