Add button to leave meeting

app/lib/components/Room.jsx

@@ -11,22 +11,26 @@ import Me from './Me';
 import Peers from './Peers';
 import Notifications from './Notifications';
 
-const Room = (
+class Room extends React.Component
 {
+	render()
+	{
+		const {
 			room,
 			me,
 			amActiveSpeaker,
 			onRoomLinkCopy,
 			onSetAudioMode,
-		onRestartIce
-	}) =>
-{
+			onRestartIce,
+			onLeaveMeeting
+		} = this.props;
+
 		return (
 			<Appear duration={300}>
 				<div data-component='Room'>
 					<Notifications />
 
-				<div className='state'>
+					<div className='state' data-tip='Server status'>
 						<div className={classnames('icon', room.state)} />
 						<p className={classnames('text', room.state)}>{room.state}</p>
 					</div>
@@ -38,6 +42,7 @@ const Room = (
 								className='link'
 								button-href={room.url}
 								button-target='_blank'
+								data-tip='Click to copy room link'
 								data-clipboard-text={room.url}
 								onSuccess={onRoomLinkCopy}
 								onClick={(event) =>
@@ -90,6 +95,13 @@ const Room = (
 							data-type='dark'
 							onClick={() => onRestartIce()}
 						/>
+
+						<div
+							className={classnames('button', 'leave-meeting')}
+							data-tip='Leave meeting'
+							data-type='dark'
+							onClick={() => onLeaveMeeting()}
+						/>
 					</div>
 
 					<ReactTooltip
@@ -100,7 +112,8 @@ const Room = (
 				</div>
 			</Appear>
 		);
-};
+	}
+}
 
 Room.propTypes =
 {
@@ -109,7 +122,8 @@ Room.propTypes =
 	amActiveSpeaker : PropTypes.bool.isRequired,
 	onRoomLinkCopy  : PropTypes.func.isRequired,
 	onSetAudioMode  : PropTypes.func.isRequired,
-	onRestartIce    : PropTypes.func.isRequired
+	onRestartIce    : PropTypes.func.isRequired,
+	onLeaveMeeting  : PropTypes.func.isRequired
 };
 
 const mapStateToProps = (state) =>
@@ -141,6 +155,10 @@ const mapDispatchToProps = (dispatch) =>
 		onRestartIce : () =>
 		{
 			dispatch(requestActions.restartIce());
+		},
+		onLeaveMeeting : () =>
+		{
+			dispatch(requestActions.leaveRoom());
 		}
 	};
 };

app/stylus/components/Room.styl

@@ -191,7 +191,7 @@
 			background-position: center;
 			background-size: 75%;
 			background-repeat: no-repeat;
-			background-color: rgba(#fff, 0.15);
+			background-color: rgba(#fff, 0.3);
 			cursor: pointer;
 			transition-property: opacity, background-color;
 			transition-duration: 0.15s;
@@ -231,6 +231,10 @@
 					background-image: url('/resources/images/icon_restart_ice__black.svg');
 				}
 			}
+
+			&.leave-meeting {
+				background-image: url('/resources/images/leave-meeting.svg');
+			}
 		}
 	}
 }