Small fixes and requireSignIn now working.

app/src/RoomClient.js

@@ -1116,7 +1116,6 @@ export default class RoomClient
 
 		this._spotlights = new Spotlights(this._maxSpotlights, this._signalingSocket);
 
-		store.dispatch(stateActions.toggleJoined());
 		store.dispatch(stateActions.setRoomState('connecting'));
 
 		this._signalingSocket.on('connect', () =>
@@ -1294,6 +1293,8 @@ export default class RoomClient
 			{
 				case 'enteredLobby':
 				{
+					store.dispatch(stateActions.setInLobby(true));
+
 					const { displayName } = store.getState().settings;
 
 					await this.sendRequest('changeDisplayName', { displayName });
@@ -1302,18 +1303,14 @@ export default class RoomClient
 
 				case 'roomReady':
 				{
+					store.dispatch(stateActions.toggleJoined());
+					store.dispatch(stateActions.setInLobby(false));
+
 					await this._joinRoom({ joinVideo });
 
 					break;
 				}
 
-				case 'roomLocked':
-				{
-					store.dispatch(stateActions.setRoomLockedOut());
-
-					break;
-				}
-
 				case 'lockRoom':
 				{
 					store.dispatch(

app/src/actions/stateActions.js

@@ -36,10 +36,11 @@ export const setRoomUnLocked = () =>
 	};
 };
 
-export const setRoomLockedOut = () =>
+export const setInLobby = (inLobby) =>
 {
 	return {
-		type : 'SET_ROOM_LOCKED_OUT'
+		type    : 'SET_IN_LOBBY',
+		payload : { inLobby }
 	};
 };
 

app/src/components/AccessControl/LockDialog/LockDialog.js

@@ -164,7 +164,6 @@ const mapStateToProps = (state) =>
 	return {
 		room       : state.room,
 		lobbyPeers : lobbyPeersKeySelector(state)
-
 	};
 };
 

app/src/components/App.js

@@ -11,7 +11,7 @@ const App = (props) =>
 		room
 	} = props;
 
-	if (room.lockedOut)
+	if (room.inLobby)
 	{
 		return (
 			<Lobby />

app/src/components/JoinDialog.js

@@ -59,8 +59,6 @@ const JoinDialog = ({
 	classes
 }) =>
 {
-	const [ localDisplayName, setLocalDisplayName ] = useState(displayName);
-
 	const handleKeyDown = (event) =>
 	{
 		const { key } = event;
@@ -70,10 +68,8 @@ const JoinDialog = ({
 			case 'Enter':
 			case 'Escape':
 			{
-				if (localDisplayName !== '') // Don't allow empty displayName
+				if (displayName === '')
-					changeDisplayName(localDisplayName);
+					changeDisplayName('Guest');
-				else
-					setLocalDisplayName(displayName);
 				break;
 			}
 			default:
@@ -104,18 +100,18 @@ const JoinDialog = ({
 					id='displayname'
 					label='Your name'
 					className={classes.textField}
-					value={localDisplayName}
+					value={displayName}
 					onChange={(event) =>
 					{
 						const { value } = event.target;
 
-						setLocalDisplayName(value);
+						changeDisplayName(value);
 					}}
 					onKeyDown={handleKeyDown}
 					onBlur={() =>
 					{
-						if (localDisplayName !== displayName)
+						if (displayName === '')
-							changeDisplayName(localDisplayName);
+							changeDisplayName('Guest');
 					}}
 					margin='normal'
 				/>
@@ -193,7 +189,8 @@ export default withRoomContext(connect(
 		areStatesEqual : (next, prev) =>
 		{
 			return (
-				prev.settings.displayName === next.settings.displayName
+				prev.settings.displayName === next.settings.displayName &&
+				prev.me.loginEnabled === next.me.loginEnabled
 			);
 		}
 	}

app/src/components/Lobby.js

@@ -1,11 +1,14 @@
-import React from 'react';
+import React, { useState } 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) =>
 	({
@@ -49,27 +52,104 @@ const styles = (theme) =>
 	});
 
 const Lobby = ({
+	roomClient,
+	url,
+	displayName,
+	loginEnabled,
+	changeDisplayName,
 	classes
 }) =>
 {
+	const handleKeyDown = (event) =>
+	{
+		const { key } = event;
+
+		switch (key)
+		{
+			case 'Enter':
+			case 'Escape':
+			{
+				if (displayName === '')
+					changeDisplayName('Guest');
+				break;
+			}
+			default:
+				break;
+		}
+	};
+
 	return (
 		<div className={classes.root}>
-			<Paper className={classes.message}>
+			<Dialog
-				<Typography variant='h2'>This room is locked at the moment, try again later.</Typography>
+				open
-			</Paper>
+				classes={{
+					paper : classes.dialogPaper
+				}}
+			>
+				{ window.config.logo &&
+					<img alt='Logo' className={classes.logo} src={window.config.logo} />
+				}
+				<Typography variant='h2' align='center'>
+					Virtual lobby
+				</Typography>
+				<Typography variant='h6'>
+					You are currently in the virtual lobby of: {url}
+					Please wait for someone to let you in.
+				</Typography>
+				<TextField
+					id='displayname'
+					label='Your name'
+					className={classes.textField}
+					value={displayName}
+					onChange={(event) =>
+					{
+						const { value } = event.target;
+
+						changeDisplayName(value);
+					}}
+					onKeyDown={handleKeyDown}
+					onBlur={() =>
+					{
+						if (displayName === '')
+							changeDisplayName('Guest');
+					}}
+					margin='normal'
+				/>
+				<DialogActions>
+					{ loginEnabled &&
+						<Button
+							onClick={() =>
+							{
+								roomClient.login();
+							}}
+							variant='contained'
+							color='secondary'
+						>
+							Sign in
+						</Button>
+					}
+				</DialogActions>
+			</Dialog>
 		</div>
 	);
 };
 
 Lobby.propTypes =
 {
-	classes : PropTypes.object.isRequired
+	roomClient        : PropTypes.any.isRequired,
+	url               : PropTypes.string.isRequired,
+	displayName       : PropTypes.string.isRequired,
+	loginEnabled      : PropTypes.string.isRequired,
+	changeDisplayName : PropTypes.func.isRequired,
+	classes           : PropTypes.object.isRequired
 };
 
 const mapStateToProps = (state) =>
 {
 	return {
-		displayName : state.settings.displayName
+		url          : state.room.url,
+		displayName  : state.settings.displayName,
+		loginEnabled : state.me.loginEnabled
 	};
 };
 
@@ -91,7 +171,9 @@ export default withRoomContext(connect(
 		areStatesEqual : (next, prev) =>
 		{
 			return (
-				prev.settings.displayName === next.settings.displayName
+				prev.room.url === next.room.url &&
+				prev.settings.displayName === next.settings.displayName &&
+				prev.me.loginEnabled === next.me.loginEnabled
 			);
 		}
 	}

app/src/components/Room.js

@@ -1,6 +1,9 @@
 import React from 'react';
 import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
+import {
+	lobbyPeersKeySelector
+} from './Selectors';
 import * as appPropTypes from './appPropTypes';
 import { withRoomContext } from '../RoomContext';
 import { withStyles } from '@material-ui/core/styles';
@@ -29,8 +32,7 @@ import VideoWindow from './VideoWindow/VideoWindow';
 import FullScreenIcon from '@material-ui/icons/Fullscreen';
 import FullScreenExitIcon from '@material-ui/icons/FullscreenExit';
 import SettingsIcon from '@material-ui/icons/Settings';
-import LockIcon from '@material-ui/icons/Lock';
+import SecurityIcon from '@material-ui/icons/Security';
-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';
@@ -258,6 +260,7 @@ class Room extends React.PureComponent
 		const {
 			roomClient,
 			room,
+			lobbyPeers,
 			advancedMode,
 			myPicture,
 			loggedIn,
@@ -327,7 +330,12 @@ class Room extends React.PureComponent
 								color='inherit'
 								onClick={() => setLockDialogOpen(!room.lockDialogOpen)}
 							>
-								{ room.locked ? <LockIcon /> : <LockOpenIcon /> }
+								<PulsingBadge
+									color='secondary'
+									badgeContent={lobbyPeers.length}
+								>
+									<SecurityIcon />
+								</PulsingBadge>
 							</IconButton>						
 							{ this.fullscreen.fullscreenEnabled &&
 								<IconButton
@@ -411,6 +419,7 @@ Room.propTypes =
 {
 	roomClient         : PropTypes.object.isRequired,
 	room               : appPropTypes.Room.isRequired,
+	lobbyPeers         : PropTypes.array,
 	advancedMode       : PropTypes.bool.isRequired,
 	myPicture          : PropTypes.string,
 	loggedIn           : PropTypes.bool.isRequired,
@@ -428,6 +437,7 @@ Room.propTypes =
 const mapStateToProps = (state) =>
 	({
 		room         : state.room,
+		lobbyPeers   : lobbyPeersKeySelector(state),
 		advancedMode : state.settings.advancedMode,
 		loggedIn     : state.me.loggedIn,
 		loginEnabled : state.me.loginEnabled,
@@ -466,6 +476,7 @@ export default withRoomContext(connect(
 		{
 			return (
 				prev.room === next.room &&
+				prev.lobbyPeers === next.lobbyPeers &&
 				prev.me.loggedIn === next.me.loggedIn &&
 				prev.me.loginEnabled === next.me.loginEnabled &&
 				prev.settings.picture === next.settings.picture &&

app/src/index.js

@@ -19,7 +19,7 @@ import * as serviceWorker from './serviceWorker';
 
 import './index.css';
 
-if (process.env.NODE_ENV !== 'production')
+if (process.env.REACT_APP_DEBUG === '*')
 {
 	debug.enable('* -engine* -socket* -RIE* *WARN* *ERROR*');
 }

app/src/reducers/room.js

@@ -3,7 +3,7 @@ const initialState =
 	url                : null,
 	state              : 'new', // new/connecting/connected/disconnected/closed,
 	locked             : false,
-	lockedOut          : false,
+	enteredLobby       : false,
 	accessCode         : '', // access code to the room if locked and joinByAccessCode == true
 	joinByAccessCode   : true, // if true: accessCode is a possibility to open the room
 	activeSpeakerId    : null,
@@ -51,9 +51,11 @@ const room = (state = initialState, action) =>
 			return { ...state, locked: false };
 		}
 
-		case 'SET_ROOM_LOCKED_OUT':
+		case 'SET_IN_LOBBY':
 		{
-			return { ...state, lockedOut: true };
+			const { inLobby } = action.payload;
+
+			return { ...state, inLobby };
 		}
 
 		case 'SET_ACCESS_CODE':