Added dialog before joining room.

app/src/components/JoinDialog.js

@@ -0,0 +1,90 @@
+import React from 'react';
+import { withStyles } from '@material-ui/core/styles';
+import { withRoomContext } from '../RoomContext';
+import PropTypes from 'prop-types';
+import Dialog from '@material-ui/core/Dialog';
+import Typography from '@material-ui/core/Typography';
+import DialogActions from '@material-ui/core/DialogActions';
+import Button from '@material-ui/core/Button';
+
+const styles = (theme) =>
+	({
+		root :
+		{
+		},
+		dialogPaper :
+		{
+			width                          : '20vw',
+			padding                        : theme.spacing.unit * 2,
+			[theme.breakpoints.down('lg')] :
+			{
+				width : '30vw'
+			},
+			[theme.breakpoints.down('md')] :
+			{
+				width : '40vw'
+			},
+			[theme.breakpoints.down('sm')] :
+			{
+				width : '60vw'
+			},
+			[theme.breakpoints.down('xs')] :
+			{
+				width : '80vw'
+			}
+		},
+		logo :
+		{
+			display : 'block'
+		}
+	});
+
+const JoinDialog = ({
+	roomClient,
+	classes
+}) =>
+{
+	return (
+		<Dialog
+			className={classes.root}
+			open
+			classes={{
+				paper : classes.dialogPaper
+			}}
+		>
+			{ window.config.logo ?
+				<img alt='Logo' className={classes.logo} src={window.config.logo} />
+				:null
+			}
+			<Typography variant='subtitle1'>You are about to join a meeting, how would you like to join?</Typography>
+			<DialogActions>
+				<Button
+					onClick={() =>
+					{
+						roomClient.join({ joinVideo: false });
+					}}
+					variant='contained'
+				>
+					Audio only
+				</Button>
+				<Button
+					onClick={() =>
+					{
+						roomClient.join({ joinVideo: true });
+					}}
+					variant='contained'
+				>
+					Audio and Video
+				</Button>
+			</DialogActions>
+		</Dialog>
+	);
+};
+
+JoinDialog.propTypes =
+{
+	roomClient : PropTypes.any.isRequired,
+	classes    : PropTypes.object.isRequired
+};
+
+export default withRoomContext(withStyles(styles)(JoinDialog));

app/src/components/Room.js

@@ -15,7 +15,6 @@ import SwipeableDrawer from '@material-ui/core/SwipeableDrawer';
 import Hidden from '@material-ui/core/Hidden';
 import Paper from '@material-ui/core/Paper';
 import Typography from '@material-ui/core/Typography';
-import Button from '@material-ui/core/Button';
 import IconButton from '@material-ui/core/IconButton';
 import MenuIcon from '@material-ui/icons/Menu';
 import Avatar from '@material-ui/core/Avatar';
@@ -33,6 +32,7 @@ import FullScreenIcon from '@material-ui/icons/Fullscreen';
 import FullScreenExitIcon from '@material-ui/icons/FullscreenExit';
 import SettingsIcon from '@material-ui/icons/Settings';
 import Settings from './Settings/Settings';
+import JoinDialog from './JoinDialog';
 
 const TIMEOUT = 10 * 1000;
 
@@ -176,10 +176,6 @@ class Room extends React.PureComponent
 
 	componentDidMount()
 	{
-		const { roomClient } = this.props;
-
-		roomClient.join();
-
 		if (this.fullscreen.fullscreenEnabled)
 		{
 			this.fullscreen.addEventListener('fullscreenchange', this.handleFullscreenChange);
@@ -242,29 +238,7 @@ class Room extends React.PureComponent
 			democratic : Democratic
 		}[room.mode];
 
-		if (room.audioSuspended)
-		{
-			return (
-				<div className={classes.root}>
-					<Paper className={classes.message}>
-						<Typography variant='h2'>
-							This webpage required sound and video to play, please click to allow.
-						</Typography>
-						<Button
-							variant='contained'
-							onClick={() =>
-							{
-								roomClient.notify('Joining.');
-								roomClient.resumeAudio();
-							}}
-						>
-							Allow
-						</Button>
-					</Paper>
-				</div>
-			);
-		}
-		else if (room.lockedOut)
+		if (room.lockedOut)
 		{
 			return (
 				<div className={classes.root}>
@@ -274,6 +248,10 @@ class Room extends React.PureComponent
 				</div>
 			);
 		}
+		else if (!room.joined)
+		{
+			return (<JoinDialog />);
+		}
 		else
 		{
 			return (