Updated a lot of components to PureComponents. Better performance.

app/package.json

@@ -24,7 +24,6 @@
 		"react-draggable": "^3.2.1",
 		"react-redux": "^6.0.1",
 		"react-scripts": "2.1.8",
-		"react-swipeable-views": "^0.13.1",
 		"react-tooltip": "^3.10.0",
 		"redux": "^4.0.1",
 		"redux-logger": "^3.0.6",

app/src/components/Containers/HiddenPeers.js

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React from 'react';
 import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
@@ -52,7 +52,7 @@ const styles = () =>
 		}
 	});
 
-class HiddenPeers extends Component
+class HiddenPeers extends React.PureComponent
 {
 	constructor(props)
 	{

app/src/components/Containers/Me.js

@@ -86,7 +86,7 @@ const styles = () =>
 		}
 	});
 
-class Me extends React.Component
+class Me extends React.PureComponent
 {
 	state = {
 		controlsVisible : false

app/src/components/Containers/Peer.js

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React from 'react';
 import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
@@ -136,7 +136,7 @@ const styles = () =>
 		}
 	});
 
-class Peer extends Component
+class Peer extends React.PureComponent
 {
 	state = {
 		controlsVisible : false

app/src/components/Controls/Sidebar.js

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { withStyles } from '@material-ui/core/styles';
@@ -37,7 +37,7 @@ const styles = (theme) =>
 		}
 	});
 
-class Sidebar extends Component
+class Sidebar extends React.PureComponent
 {
 	render()
 	{

app/src/components/MeetingDrawer/Chat/ChatInput.js

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React from 'react';
 import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
 import { withStyles } from '@material-ui/core/styles';
@@ -28,7 +28,7 @@ const styles = (theme) =>
 		}
 	});
 
-class ChatInput extends Component
+class ChatInput extends React.PureComponent
 {
 	constructor(props)
 	{

app/src/components/MeetingDrawer/Chat/MessageList.js

@@ -18,7 +18,7 @@ const styles = (theme) =>
 		}
 	});
 
-class MessageList extends React.Component
+class MessageList extends React.PureComponent
 {
 	componentDidMount()
 	{
@@ -31,6 +31,13 @@ class MessageList extends React.Component
 			+ this.node.offsetHeight === this.node.scrollHeight;
 	}
 
+	shouldComponentUpdate(nextProps)
+	{
+		if (nextProps.chatmessages.length !== this.props.chatmessages.length)
+			return true;
+		return false;
+	}
+
 	componentDidUpdate(prevProps, prevState, shouldScroll)
 	{
 		if (shouldScroll)

app/src/components/MeetingDrawer/FileSharing/File.js

@@ -1,4 +1,4 @@
-import React, { Component, Fragment } from 'react';
+import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { withRoomContext } from '../../../RoomContext';
@@ -49,7 +49,7 @@ const styles = (theme) =>
 		}
 	});
 
-class File extends Component
+class File extends React.PureComponent
 {
 	render()
 	{

app/src/components/MeetingDrawer/FileSharing/FileList.js

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { withStyles } from '@material-ui/core/styles';
@@ -17,7 +17,7 @@ const styles = (theme) =>
 		}
 	});
 
-class FileList extends Component
+class FileList extends React.PureComponent
 {
 	componentDidMount()
 	{

app/src/components/MeetingDrawer/FileSharing/FileSharing.js

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { withStyles } from '@material-ui/core/styles';
@@ -26,7 +26,7 @@ const styles = (theme) =>
 		}
 	});
 
-class FileSharing extends Component
+class FileSharing extends React.PureComponent
 {
 	constructor(props)
 	{

app/src/components/MeetingDrawer/MeetingDrawer.js

@@ -30,7 +30,7 @@ const styles = (theme) =>
 		}
 	});
 
-class MeetingDrawer extends React.Component
+class MeetingDrawer extends React.PureComponent
 {
 	handleChange = (event, value) =>
 	{

app/src/components/MeetingDrawer/ParticipantList/ParticipantList.js

@@ -45,7 +45,7 @@ const styles = (theme) =>
 		}
 	});
 
-class ParticipantList extends React.Component
+class ParticipantList extends React.PureComponent
 {
 	componentDidMount()
 	{

app/src/components/MeetingViews/Democratic.js

@@ -45,7 +45,7 @@ const styles = (theme) =>
 		}
 	});
 
-class Democratic extends React.Component
+class Democratic extends React.PureComponent
 {
 	constructor(props)
 	{

app/src/components/MeetingViews/Filmstrip.js

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import ResizeObserver from 'resize-observer-polyfill';
 import { connect } from 'react-redux';
@@ -87,7 +87,7 @@ const styles = (theme) =>
 		}
 	});
 
-class Filmstrip extends Component
+class Filmstrip extends React.PureComponent
 {
 	constructor(props)
 	{

app/src/components/PeerAudio/PeerAudio.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-export default class PeerAudio extends React.Component
+export default class PeerAudio extends React.PureComponent
 {
 	constructor(props)
 	{

app/src/components/Room.js

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React from 'react';
 import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
 import * as appPropTypes from './appPropTypes';
@@ -116,7 +116,7 @@ const styles = (theme) =>
 		}
 	});
 
-class Room extends Component
+class Room extends React.PureComponent
 {
 	constructor(props)
 	{

app/src/components/VideoContainers/FullView.js

@@ -37,7 +37,7 @@ const styles = () =>
 		}
 	});
 
-class FullView extends React.Component
+class FullView extends React.PureComponent
 {
 	constructor(props)
 	{

app/src/components/VideoContainers/PeerView.js

@@ -210,7 +210,7 @@ const styles = (theme) =>
 		}
 	});
 
-class PeerView extends React.Component
+class PeerView extends React.PureComponent
 {
 	constructor(props)
 	{

app/src/components/VideoContainers/ScreenView.js

@@ -83,7 +83,7 @@ const styles = () =>
 		}
 	});
 
-class ScreenView extends React.Component
+class ScreenView extends React.PureComponent
 {
 	constructor(props)
 	{

app/src/index.css

@@ -1,5 +1,5 @@
 :root {
-	--background: url('./images/background.svg');
+	--background: url('./images/background.jpg');
 	--background-color: rgba(114, 119, 143, 1.0);
 
 	--circle-button-color: rgba(255, 255, 255, 0.3);