merge and lock dialog

app/src/components/App.js

@@ -0,0 +1,56 @@
+import React from 'react';
+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) =>
+{
+	const {
+		room
+	} = props;
+
+	if (room.lockedOut)
+	{
+		return (
+			<Lobby />
+		);
+	}
+	else if (!room.joined)
+	{
+		return (
+			<JoinDialog />
+		);
+	}
+	else
+	{
+		return (
+			<Room />
+		);
+	}
+}
+
+App.propTypes =
+{
+	room : PropTypes.object.isRequired
+};
+
+const mapStateToProps = (state) =>
+	({
+		room : state.room
+	});
+
+export default connect(
+	mapStateToProps,
+	null,
+	null,
+	{
+		areStatesEqual : (next, prev) =>
+		{
+			return (
+				prev.room === next.room
+			);
+		}
+	}
+)(App);

app/src/components/JoinDialog.js

@@ -14,6 +14,15 @@ const styles = (theme) =>
 	({
 		root :
 		{
+			display              : 'flex',
+			width                : '100%',
+			height               : '100%',
+			backgroundColor      : 'var(--background-color)',
+			backgroundImage      : `url(${window.config.background})`,
+			backgroundAttachment : 'fixed',
+			backgroundPosition   : 'center',
+			backgroundSize       : 'cover',
+			backgroundRepeat     : 'no-repeat'
 		},
 		dialogPaper :
 		{
@@ -50,52 +59,53 @@ const JoinDialog = ({
 }) =>
 {
 	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>
-				<TextField
-					id='displayname'
-					label='Name'
-					className={classes.textField}
-					value={displayName}
-					onChange={(event) =>
-					{
-						const { value } = event.target;
+		<div className={classes.root}>
+			<Dialog
+				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>
+					<TextField
+						id='displayname'
+						label='Name'
+						className={classes.textField}
+						value={displayName}
+						onChange={(event) =>
+						{
+							const { value } = event.target;
 
-						changeDisplayName(value);
-					}}
-					margin='normal'
-				/>
-			</DialogActions>
-		</Dialog>
+							changeDisplayName(value);
+						}}
+						margin='normal'
+					/>
+				</DialogActions>
+			</Dialog>
+		</div>
 	);
 };
 

app/src/components/Lobby.js

@@ -0,0 +1,108 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import { withStyles } from '@material-ui/core/styles';
+import { withRoomContext } from '../RoomContext';
+import * as stateActions from '../actions/stateActions';
+import PropTypes from 'prop-types';
+import Dialog from '@material-ui/core/Dialog';
+import Typography from '@material-ui/core/Typography';
+import Paper from '@material-ui/core/Paper';
+import DialogActions from '@material-ui/core/DialogActions';
+import Button from '@material-ui/core/Button';
+import TextField from '@material-ui/core/TextField';
+
+const styles = (theme) =>
+	({
+		root :
+		{
+			display              : 'flex',
+			width                : '100%',
+			height               : '100%',
+			backgroundColor      : 'var(--background-color)',
+			backgroundImage      : `url(${window.config.background})`,
+			backgroundAttachment : 'fixed',
+			backgroundPosition   : 'center',
+			backgroundSize       : 'cover',
+			backgroundRepeat     : 'no-repeat'
+		},
+		dialogPaper :
+		{
+			width                          : '20vw',
+			padding                        : theme.spacing(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 Lobby = ({
+	roomClient,
+	displayName,
+	changeDisplayName,
+	classes
+}) =>
+{
+	return (
+		<div className={classes.root}>
+			<Paper className={classes.message}>
+				<Typography variant='h2'>This room is locked at the moment, try again later.</Typography>
+			</Paper>
+		</div>
+	);
+};
+
+Lobby.propTypes =
+{
+	roomClient        : PropTypes.any.isRequired,
+	displayName       : PropTypes.string.isRequired,
+	changeDisplayName : PropTypes.func.isRequired,
+	classes           : PropTypes.object.isRequired
+};
+
+const mapStateToProps = (state) =>
+{
+	return {
+		displayName : state.settings.displayName
+	};
+};
+
+const mapDispatchToProps = (dispatch) =>
+{
+	return {
+		changeDisplayName : (displayName) =>
+		{
+			dispatch(stateActions.setDisplayName(displayName));
+		}
+	};
+};
+
+export default withRoomContext(connect(
+	mapStateToProps,
+	mapDispatchToProps,
+	null,
+	{
+		areStatesEqual : (next, prev) =>
+		{
+			return (
+				prev.settings.displayName === next.settings.displayName
+			);
+		}
+	}
+)(withStyles(styles)(Lobby)));

app/src/components/Room.js

@@ -13,7 +13,6 @@ import AppBar from '@material-ui/core/AppBar';
 import Toolbar from '@material-ui/core/Toolbar';
 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 IconButton from '@material-ui/core/IconButton';
 import MenuIcon from '@material-ui/icons/Menu';
@@ -32,10 +31,9 @@ import FullScreenExitIcon from '@material-ui/icons/FullscreenExit';
 import SettingsIcon from '@material-ui/icons/Settings';
 import LockIcon from '@material-ui/icons/Lock';
 import LockOpenIcon from '@material-ui/icons/LockOpen';
+import LockDialog from './AccessControl/LockDialog/LockDialog';
 import Button from '@material-ui/core/Button';
 import Settings from './Settings/Settings';
-import JoinDialog from './JoinDialog';
-import LockDialog from './AccessControl/LockDialog/LockDialog';
 
 const TIMEOUT = 10 * 1000;
 
@@ -279,159 +277,133 @@ class Room extends React.PureComponent
 			democratic : Democratic
 		}[room.mode];
 
-		if (room.lockedOut)
-		{
-			return (
-				<div className={classes.root}>
-					<Paper className={classes.message}>
-						<Typography variant='h2'>This room is locked at the moment, try again later.</Typography>
-					</Paper>
-				</div>
-			);
-		}
-		else if (!room.joined)
-		{
-			return (
-				<div className={classes.root}>
-					<JoinDialog />
-				</div>
-			);
-		}
-		else
-		{
-			return (
-				<div className={classes.root}>
-					<CookieConsent>
-						This website uses cookies to enhance the user experience.
-					</CookieConsent>
+		return (
+			<div className={classes.root}>
+				<CookieConsent>
+					This website uses cookies to enhance the user experience.
+				</CookieConsent>
 
-					<FullScreenView advancedMode={advancedMode} />
+				<FullScreenView advancedMode={advancedMode} />
 
-					<VideoWindow advancedMode={advancedMode} />
+				<VideoWindow advancedMode={advancedMode} />
 
-					<AudioPeers />
+				<AudioPeers />
 
-					<Notifications />
+				<Notifications />
 
-					<CssBaseline />
+				<CssBaseline />
 
-					<AppBar
-						position='fixed'
-						className={room.toolbarsVisible ? classes.show : classes.hide}
-					>
-						<Toolbar>
-							<PulsingBadge
-								color='secondary'
-								badgeContent={unread}
-							>
-								<IconButton
-									color='inherit'
-									aria-label='Open drawer'
-									onClick={() => toggleToolArea()}
-									className={classes.menuButton}
-								>
-									<MenuIcon />
-								</IconButton>
-							</PulsingBadge>
-							{ window.config.logo ?
-								<img alt='Logo' className={classes.logo} src={window.config.logo} />
-								:null
-							}
-							<Typography
-								className={classes.title}
-								variant='h6'
+				<AppBar
+					position='fixed'
+					className={room.toolbarsVisible ? classes.show : classes.hide}
+				>
+					<Toolbar>
+						<PulsingBadge
+							color='secondary'
+							badgeContent={unread}
+						>
+							<IconButton
 								color='inherit'
-								noWrap
+								aria-label='Open drawer'
+								onClick={() => toggleToolArea()}
+								className={classes.menuButton}
 							>
-								{ window.config.title }
-							</Typography>
-							<div className={classes.grow} />
-							<div className={classes.actionButtons}>
-								{ this.fullscreen.fullscreenEnabled ?
-									<IconButton
-										aria-label='Fullscreen'
-										className={classes.actionButton}
-										color='inherit'
-										onClick={this.handleToggleFullscreen}
-									>
-										{ this.state.fullscreen ?
-											<FullScreenExitIcon />
-											:
-											<FullScreenIcon />
-										}
-									</IconButton>
-									:null
-								}
+								<MenuIcon />
+							</IconButton>
+						</PulsingBadge>
+						{ window.config.logo && <img alt='Logo' className={classes.logo} src={window.config.logo} /> }
+						<Typography
+							className={classes.title}
+							variant='h6'
+							color='inherit'
+							noWrap
+						>
+							{ window.config.title }
+						</Typography>
+						<div className={classes.grow} />
+						<div className={classes.actionButtons}>
+							<IconButton
+								aria-label='Lock'
+								color='inherit'
+								onClick={() => setLockDialogOpen(!room.lockDialogOpen)}
+							>
+								{ room.locked ? <LockIcon /> : <LockOpenIcon /> }
+							</IconButton>						
+							{ this.fullscreen.fullscreenEnabled &&
 								<IconButton
-									aria-label='Settings'
+									aria-label='Fullscreen'
 									className={classes.actionButton}
 									color='inherit'
-									onClick={() => setSettingsOpen(!room.settingsOpen)}
+									onClick={this.handleToggleFullscreen}
 								>
-									<SettingsIcon />
+									{ this.state.fullscreen ?
+										<FullScreenExitIcon />
+										:
+										<FullScreenIcon />
+									}
 								</IconButton>
-								<IconButton
-									aria-label='Lock'
-									color='inherit'
-									onClick={() => setLockDialogOpen(!room.lockDialogOpen)}
-								>
-									{ room.locked ? <LockIcon /> : <LockOpenIcon /> }
-								</IconButton>
-								{ loginEnabled ?
-									<IconButton
-										aria-label='Account'
-										className={classes.actionButton}
-										color='inherit'
-										onClick={() => 
-										{
-											loggedIn ? roomClient.logout() : roomClient.login();
-										}}
-									>
-										{ myPicture ?
-											<Avatar src={myPicture} />
-											:
-											<AccountCircle />
-										}
-									</IconButton>
-									:null
-								}
-								<Button
-									aria-label='Leave meeting'
-									className={classes.actionButton}
-									variant='contained'
-									color='secondary'
-									onClick={() => roomClient.close()}
-								>
-									Leave
-								</Button>
-							</div>
-						</Toolbar>
-					</AppBar>
-					<nav>
-						<Hidden implementation='css'>
-							<SwipeableDrawer
-								variant='temporary'
-								anchor={theme.direction === 'rtl' ? 'right' : 'left'}
-								open={toolAreaOpen}
-								onClose={() => toggleToolArea()}
-								onOpen={() => toggleToolArea()}
-								classes={{
-									paper : classes.drawerPaper
-								}}
+							}
+							<IconButton
+								aria-label='Settings'
+								className={classes.actionButton}
+								color='inherit'
+								onClick={() => setSettingsOpen(!room.settingsOpen)}
 							>
-								<MeetingDrawer closeDrawer={toggleToolArea} />
-							</SwipeableDrawer>
-						</Hidden>
-					</nav>
+								<SettingsIcon />
+							</IconButton>
+							{ loginEnabled &&
+								<IconButton
+									aria-label='Account'
+									className={classes.actionButton}
+									color='inherit'
+									onClick={() => 
+									{
+										loggedIn ? roomClient.logout() : roomClient.login();
+									}}
+								>
+									{ myPicture ?
+										<Avatar src={myPicture} />
+										:
+										<AccountCircle />
+									}
+								</IconButton>
+							}
+							<Button
+								aria-label='Leave meeting'
+								className={classes.actionButton}
+								variant='contained'
+								color='secondary'
+								onClick={() => roomClient.close()}
+							>
+								Leave
+							</Button>
+						</div>
+					</Toolbar>
+				</AppBar>
+				<nav>
+					<Hidden implementation='css'>
+						<SwipeableDrawer
+							variant='temporary'
+							anchor={theme.direction === 'rtl' ? 'right' : 'left'}
+							open={toolAreaOpen}
+							onClose={() => toggleToolArea()}
+							onOpen={() => toggleToolArea()}
+							classes={{
+								paper : classes.drawerPaper
+							}}
+						>
+							<MeetingDrawer closeDrawer={toggleToolArea} />
+						</SwipeableDrawer>
+					</Hidden>
+				</nav>
 
-					<View advancedMode={advancedMode} />
+				<View advancedMode={advancedMode} />
 
-					<LockDialog />
+				<LockDialog />
 
-					<Settings />
-				</div>
-			);
-		}
+				<Settings />
+			</div>
+		);
 	}
 }