Various small changes.

app/src/RoomClient.js

@@ -610,61 +610,44 @@ export default class RoomClient
 			const {
 				chatHistory,
 				fileHistory,
-				lastN,
+				lastNHistory,
 				locked,
 				lobbyPeers,
 				accessCode
 			} = await this.sendRequest('serverHistory');
 
-			if (chatHistory.length > 0)
-			{
-				logger.debug('Got chat history');
-				store.dispatch(
-					stateActions.addChatHistory(chatHistory));
-			}
+			(chatHistory.length > 0) && store.dispatch(
+				stateActions.addChatHistory(chatHistory));
 
-			if (fileHistory.length > 0)
-			{
-				logger.debug('Got files history');
+			(fileHistory.length > 0) && store.dispatch(
+				stateActions.addFileHistory(fileHistory));
 
-				store.dispatch(stateActions.addFileHistory(fileHistory));
-			}
-
-			if (lastN.length > 0)
+			if (lastNHistory.length > 0)
 			{
-				logger.debug('Got lastN');
+				logger.debug('Got lastNHistory');
 
 				// Remove our self from list
-				const index = lastN.indexOf(this._peerId);
+				const index = lastNHistory.indexOf(this._peerId);
 
-				lastN.splice(index, 1);
+				lastNHistory.splice(index, 1);
 
-				this._spotlights.addSpeakerList(lastN);
+				this._spotlights.addSpeakerList(lastNHistory);
 			}
 
 			locked ? 
 				store.dispatch(stateActions.setRoomLocked()) :
 				store.dispatch(stateActions.setRoomUnLocked());
 
-			if (lobbyPeers.length > 0)
+			(lobbyPeers.length > 0) && lobbyPeers.forEach((peer) =>
 			{
-				logger.debug('Got lobby peers');
+				store.dispatch(
+					stateActions.addLobbyPeer(peer.peerId));
+				store.dispatch(
+					stateActions.setLobbyPeerDisplayName(peer.displayName));
+			});
 
-				lobbyPeers.forEach((peer) =>
-				{
-					store.dispatch(
-						stateActions.addLobbyPeer(peer.peerId));
-					store.dispatch(
-						stateActions.setLobbyPeerDisplayName(peer.displayName));
-				});
-			}
-
-			if (accessCode != null)
-			{
-				logger.debug('Got accessCode');
-
-				store.dispatch(stateActions.setAccessCode(accessCode))
-			}
+			(accessCode != null) && store.dispatch(
+				stateActions.setAccessCode(accessCode));
 		}
 		catch (error)
 		{

app/src/components/JoinDialog.js

@@ -1,4 +1,4 @@
-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';
@@ -58,6 +58,28 @@ const JoinDialog = ({
 	classes
 }) =>
 {
+	const [ localDisplayName, setLocalDisplayName ] = useState(displayName);
+
+	const handleKeyDown = (event) =>
+	{
+		const { key } = event;
+
+		switch (key)
+		{
+			case 'Enter':
+			case 'Escape':
+			{
+				if (localDisplayName !== '') // Don't allow empty displayName
+					changeDisplayName(localDisplayName);
+				else
+					setLocalDisplayName(displayName);
+				break;
+			}
+			default:
+				break;
+		}
+	};
+
 	return (
 		<div className={classes.root}>
 			<Dialog
@@ -69,21 +91,30 @@ const JoinDialog = ({
 				{ window.config.logo &&
 					<img alt='Logo' className={classes.logo} src={window.config.logo} />
 				}
-				<Typography variant='subtitle1'>
+				<Typography variant='h2' align='center'>
+					Welcome
+				</Typography>
+				<Typography variant='h6'>
 					You are about to join a meeting.
-					Set your name that others will see,
-					and chose how you want to join?
+					Set the name that others will see,
+					and choose how you want to join?
 				</Typography>
 				<TextField
 					id='displayname'
-					label='Name'
+					label='Your name'
 					className={classes.textField}
-					value={displayName}
+					value={localDisplayName}
 					onChange={(event) =>
 					{
 						const { value } = event.target;
 
-						changeDisplayName(value);
+						setLocalDisplayName(value);
+					}}
+					onKeyDown={handleKeyDown}
+					onBlur={() =>
+					{
+						if (localDisplayName !== displayName)
+							changeDisplayName(localDisplayName);
 					}}
 					margin='normal'
 				/>
@@ -94,6 +125,17 @@ const JoinDialog = ({
 							roomClient.join({ joinVideo: false });
 						}}
 						variant='contained'
+						color='secondary'
+					>
+						Sign in
+					</Button>
+					<Button
+						onClick={() =>
+						{
+							roomClient.join({ joinVideo: false });
+						}}
+						variant='contained'
+						color='secondary'
 					>
 						Audio only
 					</Button>
@@ -103,6 +145,7 @@ const JoinDialog = ({
 							roomClient.join({ joinVideo: true });
 						}}
 						variant='contained'
+						color='secondary'
 					>
 						Audio and Video
 					</Button>

app/src/components/PeerAudio/PeerAudio.js

@@ -29,7 +29,8 @@ export default class PeerAudio extends React.PureComponent
 		this._setTrack(audioTrack);
 	}
 
-	componentWillReceiveProps(nextProps)
+	// eslint-disable-next-line camelcase
+	UNSAFE_componentWillReceiveProps(nextProps)
 	{
 		const { audioTrack } = nextProps;
 

app/src/components/VideoContainers/VideoView.js

@@ -221,7 +221,7 @@ class VideoView extends React.PureComponent
 					ref='video'
 					className={classnames(classes.video, {
 						hidden  : !videoVisible,
-						'isMe' : isMe && !isScreen,
+						'isMe'  : isMe && !isScreen,
 						loading : videoProfile === 'none',
 						contain : videoContain
 					})}
@@ -247,7 +247,8 @@ class VideoView extends React.PureComponent
 		clearInterval(this._videoResolutionTimer);
 	}
 
-	componentWillReceiveProps(nextProps)
+	// eslint-disable-next-line camelcase
+	UNSAFE_componentWillReceiveProps(nextProps)
 	{
 		const { videoTrack } = nextProps;