improved joinDialog

app/src/components/App.js

@@ -3,7 +3,6 @@ import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
 import Room from './Room';
 import JoinDialog from './JoinDialog';
-import Lobby from './Lobby';
 
 const App = (props) =>
 {
@@ -11,13 +10,7 @@ const App = (props) =>
 		room
 	} = props;
 
-	if (room.inLobby)
+	if (!room.joined)
-	{
-		return (
-			<Lobby />
-		);
-	}
-	else if (!room.joined)
 	{
 		return (
 			<JoinDialog />

app/src/components/JoinDialog.js

@@ -5,10 +5,15 @@ import { withRoomContext } from '../RoomContext';
 import * as stateActions from '../actions/stateActions';
 import PropTypes from 'prop-types';
 import Dialog from '@material-ui/core/Dialog';
+import DialogTitle from '@material-ui/core/DialogTitle';
+import IconButton from '@material-ui/core/IconButton';
+import AccountCircle from '@material-ui/icons/AccountCircle';
+import Avatar from '@material-ui/core/Avatar';
 import Typography from '@material-ui/core/Typography';
 import DialogActions from '@material-ui/core/DialogActions';
 import Button from '@material-ui/core/Button';
 import TextField from '@material-ui/core/TextField';
+import CookieConsent from 'react-cookie-consent';
 
 const styles = (theme) =>
 	({
@@ -45,16 +50,35 @@ const styles = (theme) =>
 				width : '80vw'
 			}
 		},
+		title :
+		{
+			position   : 'relative',
+			alignItems : 'center',
+			display    : 'flex',
+			marginLeft : 0
+		},
+		actionButtons :
+		{
+			right    : 0,
+			position : 'absolute'
+		},
 		logo :
 		{
 			display : 'block'
+		},
+		green :
+		{
+			color : 'rgba(0,255,0,1)'
 		}
 	});
 
 const JoinDialog = ({
 	roomClient,
+	room,
 	displayName,
 	loginEnabled,
+	loggedIn,
+	myPicture,
 	changeDisplayName,
 	classes
 }) =>
@@ -85,17 +109,48 @@ const JoinDialog = ({
 					paper : classes.dialogPaper
 				}}
 			>
+				<DialogTitle disableTypography className={classes.title}> 
+					{ window.config.logo && <img alt='Logo' className={classes.logo} src={window.config.logo} /> }
+					<div className={classes.title}>
+						<Typography variant='h4'>
+							{ window.config.title } 
+						</Typography>
+					</div>
+					<div className={classes.grow} />
+					<div className={classes.actionButtons}>
+						{ loginEnabled &&
+							<IconButton
+								aria-label='Account'
+								className={classes.actionButton}
+								color='inherit'
+								onClick={() => 
+								{
+									loggedIn ? roomClient.logout() : roomClient.login();
+								}}
+							>
+								{ myPicture ?
+									<Avatar src={myPicture} />
+									:
+									<AccountCircle />
+								}
+							</IconButton>
+						}
+					</div>
+				</DialogTitle>
 				{ window.config.logo &&
 					<img alt='Logo' className={classes.logo} src={window.config.logo} />
 				}
-				<Typography variant='h2' align='center'>
-					Welcome
-				</Typography>
 				<Typography variant='h6'>
 					You are about to join a meeting.
-					Set the name that others will see,
-					and choose how you want to join?
 				</Typography>
+				<Typography variant='h5'>
+					<center> Room ID: { room.name } </center>
+				</Typography>
+				<Typography variant='h6'>
+					Set your name for participation,
+					and choose how you want to join:
+				</Typography>
+
 				<TextField
 					id='displayname'
 					label='Your name'
@@ -112,43 +167,44 @@ const JoinDialog = ({
 					{
 						if (displayName === '')
 							changeDisplayName('Guest');
+						if (room.inLobby) roomClient.changeDisplayName(displayName);
 					}}
 					margin='normal'
 				/>
-				<DialogActions>
+
-					{ loginEnabled &&
+				{ !room.inLobby ?
+					<DialogActions>
 						<Button
 							onClick={() =>
 							{
-								roomClient.login();
+								roomClient.join({ joinVideo: false });
 							}}
 							variant='contained'
 							color='secondary'
 						>
-							Sign in
+							Audio only
 						</Button>
-					}
+						<Button
-					<Button
+							onClick={() =>
-						onClick={() =>
+							{
-						{
+								roomClient.join({ joinVideo: true });
-							roomClient.join({ joinVideo: false });
+							}}
-						}}
+							variant='contained'
-						variant='contained'
+							color='secondary'
-						color='secondary'
+						>
-					>
+							Audio and Video
-						Audio only
+						</Button>
-					</Button>
+					</DialogActions>
-					<Button
+					: 
-						onClick={() =>
+					<Typography variant='h6'>
-						{
+						<div className={classes.green}> Ok, you are ready</div> 
-							roomClient.join({ joinVideo: true });
+						The room is looked - hang on until somebody lets you in ...
-						}}
+					</Typography>
-						variant='contained'
+				}
-						color='secondary'
+
-					>
+				<CookieConsent>
-						Audio and Video
+					This website uses cookies to enhance the user experience.
-					</Button>
+				</CookieConsent>
-				</DialogActions>
 			</Dialog>
 		</div>
 	);
@@ -157,8 +213,11 @@ const JoinDialog = ({
 JoinDialog.propTypes =
 {
 	roomClient        : PropTypes.any.isRequired,
+	room              : PropTypes.object.isRequired,
 	displayName       : PropTypes.string.isRequired,
 	loginEnabled      : PropTypes.bool.isRequired,
+	loggedIn          : PropTypes.bool.isRequired,
+	myPicture         : PropTypes.string,
 	changeDisplayName : PropTypes.func.isRequired,
 	classes           : PropTypes.object.isRequired
 };
@@ -166,8 +225,11 @@ JoinDialog.propTypes =
 const mapStateToProps = (state) =>
 {
 	return {
+		room         : state.room,
 		displayName  : state.settings.displayName,
-		loginEnabled : state.me.loginEnabled
+		loginEnabled : state.me.loginEnabled,
+		loggedIn     : state.me.loggedIn,
+		myPicture    : state.me.picture
 	};
 };
 
@@ -189,8 +251,11 @@ export default withRoomContext(connect(
 		areStatesEqual : (next, prev) =>
 		{
 			return (
+				prev.room.inLobby === next.room.inLobby &&
 				prev.settings.displayName === next.settings.displayName &&
-				prev.me.loginEnabled === next.me.loginEnabled
+				prev.me.loginEnabled === next.me.loginEnabled &&
+				prev.me.loggedIn === next.me.loggedIn &&
+				prev.me.picture === next.me.picture
 			);
 		}
 	}