Added login button.

app/lib/RoomClient.js

@@ -125,6 +125,8 @@ export default class RoomClient
 
 	login()
 	{
+		this._dispatch(stateActions.setLoginInProgress(true));
+
 		const url = `/login?roomId=${this._room.roomId}&peerName=${this._peerName}`;
 
 		this._loginWindow = window.open(url, 'loginWindow');
@@ -998,6 +1000,8 @@ export default class RoomClient
 						));
 					}
 					this.closeLoginWindow();
+
+					this._dispatch(stateActions.setLoginInProgress(false));
 					break;
 
 				}

app/lib/components/Room.jsx

@@ -24,9 +24,8 @@ class Room extends React.Component
 			amActiveSpeaker,
 			screenProducer,
 			onRoomLinkCopy,
-			onSetAudioMode,
-			onRestartIce,
 			onToggleSettings,
+			onLogin,
 			onShareScreen,
 			onUnShareScreen,
 			onNeedExtension,
@@ -142,25 +141,6 @@ class Room extends React.Component
 							}}
 						/>
 
-						<div
-							className={classnames('button', 'audio-only', {
-								on       : me.audioOnly,
-								disabled : me.audioOnlyInProgress
-							})}
-							data-tip='Toggle audio only mode'
-							data-type='dark'
-							onClick={() => onSetAudioMode(!me.audioOnly)}
-						/>
-
-						<div
-							className={classnames('button', 'restart-ice', {
-								disabled : me.restartIceInProgress
-							})}
-							data-tip='Restart ICE'
-							data-type='dark'
-							onClick={() => onRestartIce()}
-						/>
-
 						<div
 							className={classnames('button', 'settings', {
 								on  : room.showSettings,
@@ -171,6 +151,15 @@ class Room extends React.Component
 							onClick={() => onToggleSettings()}
 						/>
 
+						<div
+							className={classnames('button', 'login', 'off', {
+								disabled : me.loginInProgress
+							})}
+							data-tip='Login'
+							data-type='dark'
+							onClick={() => onLogin()}
+						/>
+
 						<div
 							className={classnames('button', 'raise-hand', {
 								on       : me.raiseHand,
@@ -211,14 +200,13 @@ Room.propTypes =
 	amActiveSpeaker  : PropTypes.bool.isRequired,
 	screenProducer   : appPropTypes.Producer,
 	onRoomLinkCopy   : PropTypes.func.isRequired,
-	onSetAudioMode   : PropTypes.func.isRequired,
-	onRestartIce     : PropTypes.func.isRequired,
 	onShareScreen    : PropTypes.func.isRequired,
 	onUnShareScreen  : PropTypes.func.isRequired,
 	onNeedExtension  : PropTypes.func.isRequired,
 	onToggleSettings : PropTypes.func.isRequired,
 	onToggleHand     : PropTypes.func.isRequired,
-	onLeaveMeeting   : PropTypes.func.isRequired
+	onLeaveMeeting   : PropTypes.func.isRequired,
+	onLogin          : PropTypes.func.isRequired
 };
 
 const mapStateToProps = (state) =>
@@ -245,17 +233,6 @@ const mapDispatchToProps = (dispatch) =>
 					text : 'Room link copied to the clipboard'
 				}));
 		},
-		onSetAudioMode : (enable) =>
-		{
-			if (enable)
-				dispatch(requestActions.enableAudioOnly());
-			else
-				dispatch(requestActions.disableAudioOnly());
-		},
-		onRestartIce : () =>
-		{
-			dispatch(requestActions.restartIce());
-		},
 		onToggleSettings : () =>
 		{
 			dispatch(stateActions.toggleSettings());
@@ -282,6 +259,10 @@ const mapDispatchToProps = (dispatch) =>
 		onNeedExtension : () =>
 		{
 			dispatch(requestActions.installExtension());
+		},
+		onLogin : () =>
+		{
+			dispatch(requestActions.userLogin());
 		}
 	};
 };

app/lib/redux/reducers/me.js

@@ -15,6 +15,7 @@ const initialState =
 	webcamInProgress      : false,
 	audioInProgress       : false,
 	screenShareInProgress : false,
+	loginInProgress       : false,
 	audioOnly             : false,
 	audioOnlyInProgress   : false,
 	raiseHand             : false,
@@ -96,6 +97,13 @@ const me = (state = initialState, action) =>
 			return { ...state, screenShareInProgress: flag };
 		}
 
+		case 'SET_LOGIN_IN_PROGRESS':
+		{
+			const { flag } = action.payload;
+
+			return { ...state, loginInProgress: flag };
+		}
+
 		case 'SET_DISPLAY_NAME':
 		{
 			let { displayName } = action.payload;

app/lib/redux/requestActions.js

@@ -119,6 +119,13 @@ export const resumePeerVideo = (peerName) =>
 	};
 };
 
+export const userLogin = () =>
+{
+	return {
+		type : 'USER_LOGIN'
+	};
+};
+
 export const raiseHand = () =>
 {
 	return {

app/lib/redux/roomClientMiddleware.js

@@ -156,6 +156,13 @@ export default ({ dispatch, getState }) => (next) =>
 				break;
 			}
 
+			case 'USER_LOGIN':
+			{
+				client.login();
+
+				break;
+			}
+
 			case 'LOWER_HAND':
 			{
 				client.sendRaiseHandState(false);

app/lib/redux/stateActions.js

@@ -134,6 +134,14 @@ export const setMyRaiseHandState = (flag) =>
 	};
 };
 
+export const setLoginInProgress = (flag) =>
+{
+	return {
+		type    : 'SET_LOGIN_IN_PROGRESS',
+		payload : { flag }
+	};
+};
+
 export const toggleSettings = () =>
 {
 	return {

app/resources/images/icon_login_black.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+    <path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/>
+</svg>

app/resources/images/icon_login_white.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+    <path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" fill="#FFFFFF"/>
+</svg>

app/stylus/components/Room.styl

@@ -216,19 +216,9 @@
 				opacity: 0.5;
 			}
 
-			&.audio-only {
+			&.login {
-				background-image: url('/resources/images/icon_audio_only_white.svg');
+				&.off {
-
+					background-image: url('/resources/images/icon_login_white.svg');
-				&.on {
-					background-image: url('/resources/images/icon_audio_only_black.svg');
-				}
-			}
-
-			&.restart-ice {
-				background-image: url('/resources/images/icon_restart_ice_white.svg');
-
-				&.on {
-					background-image: url('/resources/images/icon_restart_ice__black.svg');
 				}
 			}