From 868b91a776c96ac8ef0467f85df9bd2688c7fc46 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?M=C3=A9sz=C3=A1ros=20Mih=C3=A1ly?= Date: Tue, 12 May 2020 11:01:10 +0200 Subject: [PATCH] Detect unsupported browsers, add a dialog --- app/src/components/UnsupportedBrowser.js | 154 +++++++++++++++++++++++ app/src/index.js | 49 +++++++- app/src/translations/cn.json | 6 +- app/src/translations/cs.json | 6 +- app/src/translations/de.json | 6 +- app/src/translations/dk.json | 6 +- app/src/translations/el.json | 6 +- app/src/translations/en.json | 6 +- app/src/translations/es.json | 6 +- app/src/translations/fr.json | 6 +- app/src/translations/hr.json | 6 +- app/src/translations/hu.json | 7 +- app/src/translations/it.json | 9 +- app/src/translations/lv.json | 6 +- app/src/translations/nb.json | 6 +- app/src/translations/pl.json | 6 +- app/src/translations/pt.json | 6 +- app/src/translations/ro.json | 6 +- app/src/translations/tr.json | 6 +- app/src/translations/tw.json | 6 +- app/src/translations/uk.json | 6 +- 21 files changed, 300 insertions(+), 21 deletions(-) create mode 100644 app/src/components/UnsupportedBrowser.js diff --git a/app/src/components/UnsupportedBrowser.js b/app/src/components/UnsupportedBrowser.js new file mode 100644 index 0000000..d328f98 --- /dev/null +++ b/app/src/components/UnsupportedBrowser.js @@ -0,0 +1,154 @@ +import React from 'react'; +import { withStyles } from '@material-ui/core/styles'; +import PropTypes from 'prop-types'; +import { FormattedMessage } from 'react-intl'; + +import Dialog from '@material-ui/core/Dialog'; +import DialogTitle from '@material-ui/core/DialogTitle'; +import DialogContent from '@material-ui/core/DialogContent'; +import Grid from '@material-ui/core/Grid'; +import List from '@material-ui/core/List'; +import ListItem from '@material-ui/core/ListItem'; +import ListItemText from '@material-ui/core/ListItemText'; +import ListItemAvatar from '@material-ui/core/ListItemAvatar'; +import Avatar from '@material-ui/core/Avatar'; +import WebAssetIcon from '@material-ui/icons/WebAsset'; +import ErrorIcon from '@material-ui/icons/Error'; +import Hidden from '@material-ui/core/Hidden'; + +const styles = (theme) => + ({ + dialogPaper : + { + width : '40vw', + [theme.breakpoints.down('lg')] : + { + width : '40vw' + }, + [theme.breakpoints.down('md')] : + { + width : '50vw' + }, + [theme.breakpoints.down('sm')] : + { + width : '70vw' + }, + [theme.breakpoints.down('xs')] : + { + width : '90vw' + } + // display : 'flex', + // flexDirection : 'column' + }, + list : { + backgroundColor : theme.palette.background.paper + }, + errorAvatar : { + width : theme.spacing(20), + height : theme.spacing(20) + } + }); + +const open=true; +const dividers=true; + +let dense=false; + +const supportedBrowsers=[ + { name: 'Chrome/Chromium', version: '74', vendor: 'Google' }, + { name: 'Edge', version: '18', vendor: 'Microsoft' }, + { name: 'Firefox', version: '60', vendor: 'Mozilla' }, + { name: 'Safari', version: '12', vendor: 'Apple' }, + { name: 'Opera', version: '62', vendor: '' }, + // { name: 'Brave', version: '1.5', vendor: '' }, + // { name: 'Vivaldi', version: '3', vendor: '' }, + { name: 'Samsung Internet', version: '11.1.1.52', vendor: '' } +]; + +const UnsupportedBrowser = ({ + platform, + webrtcUnavailable, + classes +}) => +{ + if (platform !== 'desktop') + { + dense=true; + } + + return ( + + + {!webrtcUnavailable && + + } + {webrtcUnavailable && + + } + + + + + + +
+ + {supportedBrowsers.map((browser, index) => + { + const supportedBrowser = `${browser.vendor} ${browser.name}`; + const supportedVersion = `${browser.version}+`; + + return ( + + + + + + + + + ); + })} + +
+ + + + + + + + + + ); +}; + +UnsupportedBrowser.propTypes = +{ + webrtcUnavailable : PropTypes.bool.isRequired, + platform : PropTypes.string.isRequired, + classes : PropTypes.object.isRequired +}; + +export default withStyles(styles)(UnsupportedBrowser); diff --git a/app/src/index.js b/app/src/index.js index c5f333d..e21de44 100644 --- a/app/src/index.js +++ b/app/src/index.js @@ -12,6 +12,7 @@ import RoomClient from './RoomClient'; import RoomContext from './RoomContext'; import deviceInfo from './deviceInfo'; import * as meActions from './actions/meActions'; +import UnsupportedBrowser from './components/UnsupportedBrowser'; import ChooseRoom from './components/ChooseRoom'; import LoadingView from './components/LoadingView'; import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles'; @@ -20,7 +21,7 @@ import { persistor, store } from './store'; import { SnackbarProvider } from 'notistack'; import * as serviceWorker from './serviceWorker'; import { ReactLazyPreload } from './components/ReactLazyPreload'; - +import { detectDevice } from 'mediasoup-client'; // import messagesEnglish from './translations/en'; import messagesNorwegian from './translations/nb'; import messagesGerman from './translations/de'; @@ -138,6 +139,52 @@ function run() // Get current device. const device = deviceInfo(); + let unsupportedBrowser=false; + + let webrtcUnavailable=false; + + if (detectDevice() === undefined) + { + logger.error('Unsupported browser detected by mediasoup client detectDevice! deviceInfo: %o', device); + unsupportedBrowser=true; + } + else + if ( + navigator.mediaDevices === undefined || + navigator.mediaDevices.getUserMedia === undefined || + window.RTCPeerConnection === undefined + ) + { + logger.error('WebRTC is unavialable in your browser! deviceInfo: %o', device); + webrtcUnavailable=true; + } + else + if (device.name === 'safari' && !isNaN(device.version) && parseFloat(device.version) < 12) + { + unsupportedBrowser=true; + } + else + { + logger.debug('Supported Browser! deviceInfo: %o', device); + } + + if (unsupportedBrowser || webrtcUnavailable) + { + render( + + + + + , + document.getElementById('multiparty-meeting') + ); + + return; + } + store.dispatch( meActions.setMe({ peerId, diff --git a/app/src/translations/cn.json b/app/src/translations/cn.json index c5f79e4..2f05967 100644 --- a/app/src/translations/cn.json +++ b/app/src/translations/cn.json @@ -189,5 +189,9 @@ "moderator.clearFiles": null, "moderator.muteAudio": null, "moderator.muteVideo": null, - "moderator.muteScreenSharing": null + "moderator.muteScreenSharing": null, + + "unsupportedBrowser.titleUnsupportedBrowser": null, + "unsupportedBrowser.titlewebrtcUnavailable": null, + "unsupportedBrowser.bodyText": null } \ No newline at end of file diff --git a/app/src/translations/cs.json b/app/src/translations/cs.json index c1ea569..281eba2 100644 --- a/app/src/translations/cs.json +++ b/app/src/translations/cs.json @@ -188,5 +188,9 @@ "moderator.clearFiles": null, "moderator.muteAudio": null, "moderator.muteVideo": null, - "moderator.muteScreenSharing": null + "moderator.muteScreenSharing": null, + + "unsupportedBrowser.titleUnsupportedBrowser": null, + "unsupportedBrowser.titlewebrtcUnavailable": null, + "unsupportedBrowser.bodyText": null } \ No newline at end of file diff --git a/app/src/translations/de.json b/app/src/translations/de.json index 9339d4f..f1d65b1 100644 --- a/app/src/translations/de.json +++ b/app/src/translations/de.json @@ -189,5 +189,9 @@ "moderator.clearFiles": "Moderator hat geteilte Dateiliste gelöscht", "moderator.muteAudio": "Moderator hat dich stummgeschaltet", "moderator.muteVideo": "Moderator hat dein Video gestoppt", - "moderator.muteScreenSharing": null + "moderator.muteScreenSharing": null, + + "unsupportedBrowser.titleUnsupportedBrowser": null, + "unsupportedBrowser.titlewebrtcUnavailable": null, + "unsupportedBrowser.bodyText": null } diff --git a/app/src/translations/dk.json b/app/src/translations/dk.json index edeb619..6e1e3dd 100644 --- a/app/src/translations/dk.json +++ b/app/src/translations/dk.json @@ -189,5 +189,9 @@ "moderator.clearFiles": null, "moderator.muteAudio": null, "moderator.muteVideo": null, - "moderator.muteScreenSharing": null + "moderator.muteScreenSharing": null, + + "unsupportedBrowser.titleUnsupportedBrowser": null, + "unsupportedBrowser.titlewebrtcUnavailable": null, + "unsupportedBrowser.bodyText": null } diff --git a/app/src/translations/el.json b/app/src/translations/el.json index 6807831..f523948 100644 --- a/app/src/translations/el.json +++ b/app/src/translations/el.json @@ -189,5 +189,9 @@ "moderator.clearFiles": null, "moderator.muteAudio": null, "moderator.muteVideo": null, - "moderator.muteScreenSharing": null + "moderator.muteScreenSharing": null, + + "unsupportedBrowser.titleUnsupportedBrowser": null, + "unsupportedBrowser.titlewebrtcUnavailable": null, + "unsupportedBrowser.bodyText": null } \ No newline at end of file diff --git a/app/src/translations/en.json b/app/src/translations/en.json index 30c21d7..b2db17e 100644 --- a/app/src/translations/en.json +++ b/app/src/translations/en.json @@ -189,5 +189,9 @@ "moderator.clearFiles": "Moderator cleared the files", "moderator.muteAudio": "Moderator muted your audio", "moderator.muteVideo": "Moderator muted your video", - "moderator.muteScreenSharing": "Moderator muted your screen sharing" + "moderator.muteScreenSharing": "Moderator muted your screen sharing", + + "unsupportedBrowser.titleUsnsupportedBrowser": "Detected unsupported browser!", + "unsupportedBrowser.titlewebrtcUnavailable": "Required functionality not available in your browser!", + "unsupportedBrowser.bodyText": "This meeting service requires a functionality that is not supported by your browser. Please upgrade, or switch to a different browser, or check your settings. Supported browsers:" } \ No newline at end of file diff --git a/app/src/translations/es.json b/app/src/translations/es.json index 4e0c12a..ce7cd47 100644 --- a/app/src/translations/es.json +++ b/app/src/translations/es.json @@ -189,5 +189,9 @@ "moderator.clearFiles": null, "moderator.muteAudio": null, "moderator.muteVideo": null, - "moderator.muteScreenSharing": null + "moderator.muteScreenSharing": null, + + "unsupportedBrowser.titleUnsupportedBrowser": null, + "unsupportedBrowser.titlewebrtcUnavailable": null, + "unsupportedBrowser.bodyText": null } diff --git a/app/src/translations/fr.json b/app/src/translations/fr.json index 0f2ac0b..76b1238 100644 --- a/app/src/translations/fr.json +++ b/app/src/translations/fr.json @@ -188,5 +188,9 @@ "moderator.clearFiles": null, "moderator.muteAudio": null, "moderator.muteVideo": null, - "moderator.muteScreenSharing": null + "moderator.muteScreenSharing": null, + + "unsupportedBrowser.titleUnsupportedBrowser": null, + "unsupportedBrowser.titlewebrtcUnavailable": null, + "unsupportedBrowser.bodyText": null } diff --git a/app/src/translations/hr.json b/app/src/translations/hr.json index 59873d4..0547b6b 100644 --- a/app/src/translations/hr.json +++ b/app/src/translations/hr.json @@ -189,5 +189,9 @@ "moderator.clearFiles": "Moderator je izbrisao datoteke", "moderator.muteAudio": "Moderator je utišao tvoj zvuk", "moderator.muteVideo": "Moderator je zaustavio tvoj video", - "moderator.muteScreenSharing": null + "moderator.muteScreenSharing": null, + + "unsupportedBrowser.titleUnsupportedBrowser": null, + "unsupportedBrowser.titlewebrtcUnavailable": null, + "unsupportedBrowser.bodyText": null } diff --git a/app/src/translations/hu.json b/app/src/translations/hu.json index 1a2832b..1e41875 100644 --- a/app/src/translations/hu.json +++ b/app/src/translations/hu.json @@ -189,5 +189,10 @@ "moderator.clearFiles": "A moderátor kiürítette a file megosztás történelmet", "moderator.muteAudio": "A moderátor elnémította a hangod", "moderator.muteVideo": "A moderátor elnémította a videód", - "moderator.muteScreenSharing": "A moderátor leállította képernyőmegosztásod" + "moderator.muteScreenSharing": "A moderátor leállította képernyőmegosztásod", + + "unsupportedBrowser.titleUnsupportedBrowser": "A bőngésző verziód sajnos nem támogatott! :-(", + "unsupportedBrowser.titlewebrtcUnavailable": "A böngésződ egy szükséges funkciója nem elérhető!", + "unsupportedBrowser.bodyText": "Kérlek frissítsd a böngésződ, válts másik böngészőre, vagy ellenőrizd a böngésződ beállításait! Támogatott böngészők:" + } diff --git a/app/src/translations/it.json b/app/src/translations/it.json index 02b53e7..9512bba 100644 --- a/app/src/translations/it.json +++ b/app/src/translations/it.json @@ -189,5 +189,10 @@ "moderator.clearFiles": "Il moderatore ha pulito i file", "moderator.muteAudio": "Il moderatore ha mutato il tuo audio", "moderator.muteVideo": "Il moderatore ha fermato il tuo video", - "moderator.muteScreenSharing": null -} \ No newline at end of file + "moderator.muteScreenSharing": null, + + "unsupportedBrowser.titleUnsupportedBrowser": null, + "unsupportedBrowser.titlewebrtcUnavailable": null, + "unsupportedBrowser.bodyText": null +} + diff --git a/app/src/translations/lv.json b/app/src/translations/lv.json index 62ee61e..c71a9e8 100644 --- a/app/src/translations/lv.json +++ b/app/src/translations/lv.json @@ -183,5 +183,9 @@ "moderator.clearFiles": "Moderators notīrīja failus", "moderator.muteAudio": "Moderators noklusināja jūsu mikrofonu", "moderator.muteVideo": "Moderators atslēdza jūsu kameru", - "moderator.muteScreenSharing": null + "moderator.muteScreenSharing": null, + + "unsupportedBrowser.titleUnsupportedBrowser": null, + "unsupportedBrowser.titlewebrtcUnavailable": null, + "unsupportedBrowser.bodyText": null } diff --git a/app/src/translations/nb.json b/app/src/translations/nb.json index 5bafeb6..f98a242 100644 --- a/app/src/translations/nb.json +++ b/app/src/translations/nb.json @@ -189,5 +189,9 @@ "moderator.clearFiles": "Moderator fjernet filer", "moderator.muteAudio": "Moderator mutet lyden din", "moderator.muteVideo": "Moderator mutet videoen din", - "moderator.muteScreenSharing": null + "moderator.muteScreenSharing": null, + + "unsupportedBrowser.titleUnsupportedBrowser": null, + "unsupportedBrowser.titlewebrtcUnavailable": null, + "unsupportedBrowser.bodyText": null } \ No newline at end of file diff --git a/app/src/translations/pl.json b/app/src/translations/pl.json index 7612f99..d63e9d3 100644 --- a/app/src/translations/pl.json +++ b/app/src/translations/pl.json @@ -189,5 +189,9 @@ "moderator.clearFiles": "Moderator wyczyścił pliki", "moderator.muteAudio": "Moderator wyciszył audio", "moderator.muteVideo": "Moderator wyciszył twoje video", - "moderator.muteScreenSharing": null + "moderator.muteScreenSharing": null, + + "unsupportedBrowser.titleUnsupportedBrowser": null, + "unsupportedBrowser.titlewebrtcUnavailable": null, + "unsupportedBrowser.bodyText": null } \ No newline at end of file diff --git a/app/src/translations/pt.json b/app/src/translations/pt.json index a2a3310..a3d3ab9 100644 --- a/app/src/translations/pt.json +++ b/app/src/translations/pt.json @@ -189,5 +189,9 @@ "moderator.clearFiles": null, "moderator.muteAudio": null, "moderator.muteVideo": null, - "moderator.muteScreenSharing": null + "moderator.muteScreenSharing": null, + + "unsupportedBrowser.titleUnsupportedBrowser": null, + "unsupportedBrowser.titlewebrtcUnavailable": null, + "unsupportedBrowser.bodyText": null } diff --git a/app/src/translations/ro.json b/app/src/translations/ro.json index 7161bd4..483f44d 100644 --- a/app/src/translations/ro.json +++ b/app/src/translations/ro.json @@ -189,5 +189,9 @@ "moderator.clearFiles": null, "moderator.muteAudio": null, "moderator.muteVideo": null, - "moderator.muteScreenSharing": null + "moderator.muteScreenSharing": null, + + "unsupportedBrowser.titleUnsupportedBrowser": null, + "unsupportedBrowser.titlewebrtcUnavailable": null, + "unsupportedBrowser.bodyText": null } diff --git a/app/src/translations/tr.json b/app/src/translations/tr.json index 1876bab..110585c 100644 --- a/app/src/translations/tr.json +++ b/app/src/translations/tr.json @@ -181,5 +181,9 @@ "devices.cameraDisconnected": "Kamera bağlı değil", "devices.cameraError": "Kameranıza erişilirken bir hata oluştu", - "moderator.muteScreenSharing": null + "moderator.muteScreenSharing": null, + + "unsupportedBrowser.titleUnsupportedBrowser": null, + "unsupportedBrowser.titlewebrtcUnavailable": null, + "unsupportedBrowser.bodyText": null } diff --git a/app/src/translations/tw.json b/app/src/translations/tw.json index 99c32d7..cc87968 100644 --- a/app/src/translations/tw.json +++ b/app/src/translations/tw.json @@ -188,5 +188,9 @@ "moderator.clearFiles": "管理員清除了所有檔案", "moderator.muteAudio": "您已被管理員靜音", "moderator.muteVideo": "您的視訊已被管理員關閉", - "moderator.muteScreenSharing": null + "moderator.muteScreenSharing": null, + + "unsupportedBrowser.titleUnsupportedBrowser": null, + "unsupportedBrowser.titlewebrtcUnavailable": null, + "unsupportedBrowser.bodyText": null } \ No newline at end of file diff --git a/app/src/translations/uk.json b/app/src/translations/uk.json index 2ee6774..61708e6 100644 --- a/app/src/translations/uk.json +++ b/app/src/translations/uk.json @@ -189,5 +189,9 @@ "moderator.clearFiles": null, "moderator.muteAudio": null, "moderator.muteVideo": null, - "moderator.muteScreenSharing": null + "moderator.muteScreenSharing": null, + + "unsupportedBrowser.titleUnsupportedBrowser": null, + "unsupportedBrowser.titlewebrtcUnavailable": null, + "unsupportedBrowser.bodyText": null } \ No newline at end of file