Merge pull request #344 from havfo/feat-unsupportedbrowser

Detect unsupported browsers, add a dialog

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 (
+		<Dialog
+			open={open}
+			scroll={'body'}
+			classes={{
+				paper : classes.dialogPaper
+			}}
+		>
+			<DialogTitle id='form-dialog-title'>
+				{!webrtcUnavailable &&
+				<FormattedMessage
+					id='unsupportedBrowser.titleUnsupportedBrowser'
+					defaultMessage='Detected unsupported browser!'
+				/>
+				}
+				{webrtcUnavailable &&
+				<FormattedMessage
+					id='unsupportedBrowser.titlewebrtcUnavailable'
+					defaultMessage='Required functionality not availble in your browser!'
+				/>
+				}
+			</DialogTitle>
+			<DialogContent dividers={dividers} >
+				<FormattedMessage
+					id='unsupportedBrowser.bodyText'
+					defaultMessage='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:'
+				/>
+				<Grid container spacing={2} justify='center' alignItems='center'>
+					<Grid item xs={12} md={7}>
+
+						<div className={classes.list}>
+							<List dense={dense}>
+								{supportedBrowsers.map((browser, index) =>
+								{
+									const supportedBrowser = `${browser.vendor} ${browser.name}`;
+									const supportedVersion = `${browser.version}+`;
+
+									return (
+										<ListItem key={index}>
+											<ListItemAvatar>
+												<Avatar>
+													<WebAssetIcon />
+												</Avatar>
+											</ListItemAvatar>
+											<ListItemText
+												primary={supportedBrowser}
+												secondary={supportedVersion}
+											/>
+										</ListItem>
+									);
+								})}
+							</List>
+						</div>
+					</Grid>
+					<Grid item xs={12} md={5} align='center'>
+						<Hidden mdDown>
+							<ErrorIcon className={classes.errorAvatar} color='error'/>
+						</Hidden>
+					</Grid>
+				</Grid>
+			</DialogContent>
+		</Dialog>
+	);
+};
+
+UnsupportedBrowser.propTypes =
+{
+	webrtcUnavailable : PropTypes.bool.isRequired,
+	platform          : PropTypes.string.isRequired,
+	classes           : PropTypes.object.isRequired
+};
+
+export default withStyles(styles)(UnsupportedBrowser);

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(
+			<MuiThemeProvider theme={theme}>
+				<RawIntlProvider value={intl}>
+					<UnsupportedBrowser 
+						webrtcUnavailable={webrtcUnavailable} 
+						platform={device.platform}
+					/>
+				</RawIntlProvider>
+			</MuiThemeProvider>,
+			document.getElementById('multiparty-meeting')
+		);
+		
+		return;
+	}
+
 	store.dispatch(
 		meActions.setMe({
 			peerId,

app/src/translations/cn.json

@@ -191,5 +191,9 @@
 	"moderator.muteAudio": null,
 	"moderator.muteVideo": null,
 	"moderator.muteScreenSharing": null,
-	"moderator.stopScreenSharing": null
+	"moderator.stopScreenSharing": null,
+
+	"unsupportedBrowser.titleUnsupportedBrowser": null,
+	"unsupportedBrowser.titlewebrtcUnavailable": null,
+	"unsupportedBrowser.bodyText": null
 }

app/src/translations/cs.json

@@ -190,5 +190,9 @@
 	"moderator.muteAudio": null,
 	"moderator.muteVideo": null,
 	"moderator.muteScreenSharing": null,
-	"moderator.stopScreenSharing": null
+	"moderator.stopScreenSharing": null,
+
+	"unsupportedBrowser.titleUnsupportedBrowser": null,
+	"unsupportedBrowser.titlewebrtcUnavailable": null,
+	"unsupportedBrowser.bodyText": null
 }

app/src/translations/de.json

@@ -191,5 +191,9 @@
 	"moderator.muteAudio": "Moderator hat dich stummgeschaltet",
 	"moderator.muteVideo": "Moderator hat dein Video gestoppt",
 	"moderator.muteScreenSharing": null,
-	"moderator.stopScreenSharing": null
+	"moderator.stopScreenSharing": null,
+
+	"unsupportedBrowser.titleUnsupportedBrowser": null,
+	"unsupportedBrowser.titlewebrtcUnavailable": null,
+	"unsupportedBrowser.bodyText": null
 }

app/src/translations/dk.json

@@ -191,5 +191,9 @@
 	"moderator.muteAudio": null,
 	"moderator.muteVideo": null,
 	"moderator.muteScreenSharing": null,
-	"moderator.stopScreenSharing": null
+	"moderator.stopScreenSharing": null,
+
+	"unsupportedBrowser.titleUnsupportedBrowser": null,
+	"unsupportedBrowser.titlewebrtcUnavailable": null,
+	"unsupportedBrowser.bodyText": null
 }

app/src/translations/el.json

@@ -191,5 +191,9 @@
 	"moderator.muteAudio": null,
 	"moderator.muteVideo": null,
 	"moderator.muteScreenSharing": null,
-	"moderator.stopScreenSharing": null
+	"moderator.stopScreenSharing": null,
+	
+	"unsupportedBrowser.titleUnsupportedBrowser": null,
+	"unsupportedBrowser.titlewebrtcUnavailable": null,
+	"unsupportedBrowser.bodyText": null
 }

app/src/translations/en.json

@@ -191,5 +191,9 @@
 	"moderator.muteAudio": "Moderator muted your audio",
 	"moderator.muteVideo": "Moderator muted your video",
 	"moderator.muteScreenSharing": "Moderator muted your screen sharing",
-	"moderator.stopScreenSharing": "Moderator stopped your screen sharing"
+	"moderator.stopScreenSharing": "Moderator stopped 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:"
 }

app/src/translations/es.json

@@ -191,5 +191,9 @@
 	"moderator.muteAudio": null,
 	"moderator.muteVideo": null,
 	"moderator.muteScreenSharing": null,
-	"moderator.stopScreenSharing": null
+	"moderator.stopScreenSharing": null,
+
+	"unsupportedBrowser.titleUnsupportedBrowser": null,
+	"unsupportedBrowser.titlewebrtcUnavailable": null,
+	"unsupportedBrowser.bodyText": null
 }

app/src/translations/fr.json

@@ -190,5 +190,9 @@
 	"moderator.muteAudio": null,
 	"moderator.muteVideo": null,
 	"moderator.muteScreenSharing": null,
-	"moderator.stopScreenSharing": null
+	"moderator.stopScreenSharing": null,
+
+	"unsupportedBrowser.titleUnsupportedBrowser": null,
+	"unsupportedBrowser.titlewebrtcUnavailable": null,
+	"unsupportedBrowser.bodyText": null
 }

app/src/translations/hr.json

@@ -191,5 +191,9 @@
 	"moderator.muteAudio": "Moderator je utišao tvoj zvuk",
 	"moderator.muteVideo": "Moderator je zaustavio tvoj video",
 	"moderator.muteScreenSharing": null,
-	"moderator.stopScreenSharing": null
+	"moderator.stopScreenSharing": null,
+
+	"unsupportedBrowser.titleUnsupportedBrowser": null,
+	"unsupportedBrowser.titlewebrtcUnavailable": null,
+	"unsupportedBrowser.bodyText": null
 }

app/src/translations/hu.json

@@ -191,5 +191,9 @@
 	"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 szünetelteti képernyőmegosztásod",
-	"moderator.stopScreenSharing": "A moderátor leállította a képernyőmegosztásod"
+	"moderator.stopScreenSharing": "A moderátor leállította a 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:"
 }

app/src/translations/it.json

@@ -191,5 +191,9 @@
 	"moderator.muteAudio": "Il moderatore ha mutato il tuo audio",
 	"moderator.muteVideo": "Il moderatore ha fermato il tuo video",
 	"moderator.muteScreenSharing": null,
-	"moderator.stopScreenSharing": null
+	"moderator.stopScreenSharing": null,
-}
+
+	"unsupportedBrowser.titleUnsupportedBrowser": null,
+	"unsupportedBrowser.titlewebrtcUnavailable": null,
+	"unsupportedBrowser.bodyText": null
+}

app/src/translations/lv.json

@@ -185,5 +185,9 @@
 	"moderator.muteAudio": "Moderators noklusināja jūsu mikrofonu",
 	"moderator.muteVideo": "Moderators atslēdza jūsu kameru",
 	"moderator.muteScreenSharing": null,
-	"moderator.stopScreenSharing": null
+	"moderator.stopScreenSharing": null,
+
+	"unsupportedBrowser.titleUnsupportedBrowser": null,
+	"unsupportedBrowser.titlewebrtcUnavailable": null,
+	"unsupportedBrowser.bodyText": null
 }

app/src/translations/nb.json

@@ -190,6 +190,10 @@
 	"moderator.clearFiles": "Moderator fjernet filer",
 	"moderator.muteAudio": "Moderator mutet lyden din",
 	"moderator.muteVideo": "Moderator mutet videoen din",
-	"moderator.muteScreenSharing": null	,
+	"moderator.muteScreenSharing": null,
-	"moderator.stopScreenSharing": null
+	"moderator.stopScreenSharing": null,
+	
+	"unsupportedBrowser.titleUnsupportedBrowser": null,
+	"unsupportedBrowser.titlewebrtcUnavailable": null,
+	"unsupportedBrowser.bodyText": null
 }

app/src/translations/pl.json

@@ -191,5 +191,9 @@
 	"moderator.muteAudio": "Moderator wyciszył audio",
 	"moderator.muteVideo": "Moderator wyciszył twoje video",
 	"moderator.muteScreenSharing": null,
-	"moderator.stopScreenSharing": null
+	"moderator.stopScreenSharing": null,
+
+	"unsupportedBrowser.titleUnsupportedBrowser": null,
+	"unsupportedBrowser.titlewebrtcUnavailable": null,
+	"unsupportedBrowser.bodyText": null
 }

app/src/translations/pt.json

@@ -191,5 +191,9 @@
 	"moderator.muteAudio": null,
 	"moderator.muteVideo": null,
 	"moderator.muteScreenSharing": null,
-	"moderator.stopScreenSharing": null
+	"moderator.stopScreenSharing": null,
+
+	"unsupportedBrowser.titleUnsupportedBrowser": null,
+	"unsupportedBrowser.titlewebrtcUnavailable": null,
+	"unsupportedBrowser.bodyText": null
 }

app/src/translations/ro.json

@@ -191,5 +191,9 @@
 	"moderator.muteAudio": null,
 	"moderator.muteVideo": null,
 	"moderator.muteScreenSharing": null,
-	"moderator.stopScreenSharing": null
+	"moderator.stopScreenSharing": null,
+
+	"unsupportedBrowser.titleUnsupportedBrowser": null,
+	"unsupportedBrowser.titlewebrtcUnavailable": null,
+	"unsupportedBrowser.bodyText": null
 }

app/src/translations/tr.json

@@ -182,6 +182,15 @@
 
 	"devices.cameraDisconnected": "Kamera bağlı değil",
 	"devices.cameraError": "Kameranıza erişilirken bir hata oluştu",
+	
+	"moderator.clearChat": null,
+	"moderator.clearFiles": null,
+	"moderator.muteAudio": null,
+	"moderator.muteVideo": null,
 	"moderator.muteScreenSharing": null,
-	"moderator.stopScreenSharing": null
+	"moderator.stopScreenSharing": null,
+
+	"unsupportedBrowser.titleUnsupportedBrowser": null,
+	"unsupportedBrowser.titlewebrtcUnavailable": null,
+	"unsupportedBrowser.bodyText": null
 }

app/src/translations/tw.json

@@ -190,5 +190,9 @@
 	"moderator.muteAudio": "您已被管理員靜音",
 	"moderator.muteVideo": "您的視訊已被管理員關閉",
 	"moderator.muteScreenSharing": null,
-	"moderator.stopScreenSharing": null
+	"moderator.stopScreenSharing": null,
+
+	"unsupportedBrowser.titleUnsupportedBrowser": null,
+	"unsupportedBrowser.titlewebrtcUnavailable": null,
+	"unsupportedBrowser.bodyText": null
 }

app/src/translations/uk.json

@@ -191,5 +191,9 @@
 	"moderator.muteAudio": null,
 	"moderator.muteVideo": null,
 	"moderator.muteScreenSharing": null,
-	"moderator.stopScreenSharing": null
+	"moderator.stopScreenSharing": null,
+	
+	"unsupportedBrowser.titleUnsupportedBrowser": null,
+	"unsupportedBrowser.titlewebrtcUnavailable": null,
+	"unsupportedBrowser.bodyText": null
 }