Major cleanup. Moved a lot of CSS variables out too root of CSS for easier styling.

app/lib/RoomClient.js

@@ -365,11 +365,9 @@ export default class RoomClient
 		{
 			if (err)
 			{
-				return this.props.notify({
-					text : 'An error occurred while saving a file'
-				});
+				return this.notify('An error occurred while saving a file');
 			}
-	
+
 			saveAs(blob, file.name);
 		});
 	}
@@ -396,23 +394,27 @@ export default class RoomClient
 		// same file was sent multiple times.
 		if (torrent.progress === 1)
 		{
-
-			store.dispatch(
+			return store.dispatch(
 				stateActions.setFileDone(
 					torrent.magnetURI,
 					torrent.files
 				));
-
-			return;
 		}
 
+		let lastMove = 0;
+
 		torrent.on('download', () =>
 		{
-			store.dispatch(
-				stateActions.setFileProgress(
-					torrent.magnetURI,
-					torrent.progress
-				));
+			if (Date.now() - lastMove > 1000)
+			{
+				store.dispatch(
+					stateActions.setFileProgress(
+						torrent.magnetURI,
+						torrent.progress
+					));
+
+				lastMove = Date.now();
+			}
 		});
 
 		torrent.on('done', () => 

app/lib/components/Containers/HiddenPeers.jsx

@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
-import * as stateActions from '../redux/stateActions';
+import * as stateActions from '../../redux/stateActions';
 
 class HiddenPeers extends Component
 {
@@ -29,7 +29,7 @@ class HiddenPeers extends Component
 				this.timeout = setTimeout(() =>
 				{
 					this.setState({ className: '' });
-				}, 2000);
+				}, 500);
 			});
 		}
 	}
@@ -42,18 +42,11 @@ class HiddenPeers extends Component
 		} = this.props;
 
 		return (
-			<div
-				data-component='HiddenPeers'
-				className={this.state.className}
-				onMouseOver={this.handleMouseOver}
-				onMouseOut={this.handleMouseOut}
-			>
-				<div data-component='HiddenPeersView'>
-					<div className={classnames('view-container', this.state.className)} onClick={() => openUsersTab()}>
-						<p>+{hiddenPeersCount} <br /> participant
-							{(hiddenPeersCount === 1) ? null : 's'}
-						</p>
-					</div>
+			<div data-component='HiddenPeers'>
+				<div className={classnames('view-container', this.state.className)} onClick={() => openUsersTab()}>
+					<p>+{hiddenPeersCount} <br /> participant
+						{(hiddenPeersCount === 1) ? null : 's'}
+					</p>
 				</div>
 			</div>
 		);

app/lib/components/Containers/Me.jsx

@@ -4,10 +4,10 @@ import ReactTooltip from 'react-tooltip';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import { getDeviceInfo } from 'mediasoup-client';
-import * as appPropTypes from './appPropTypes';
-import { withRoomContext } from '../RoomContext';
-import PeerView from './PeerView';
-import ScreenView from './ScreenView';
+import * as appPropTypes from '../appPropTypes';
+import { withRoomContext } from '../../RoomContext';
+import PeerView from '../VideoContainers/PeerView';
+import ScreenView from '../VideoContainers/ScreenView';
 
 class Me extends React.Component
 {

app/lib/components/Containers/Peer.jsx

@@ -2,11 +2,11 @@ import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
-import * as appPropTypes from './appPropTypes';
-import { withRoomContext } from '../RoomContext';
-import * as stateActions from '../redux/stateActions';
-import PeerView from './PeerView';
-import ScreenView from './ScreenView';
+import * as appPropTypes from '../appPropTypes';
+import { withRoomContext } from '../../RoomContext';
+import * as stateActions from '../../redux/stateActions';
+import PeerView from '../VideoContainers/PeerView';
+import ScreenView from '../VideoContainers/ScreenView';
 
 class Peer extends Component
 {
@@ -139,7 +139,9 @@ class Peer extends Component
 						/>
 
 						<div
-							className={classnames('button', 'fullscreen')}
+							className={classnames('button', 'fullscreen', {
+								disabled : !videoVisible
+							})}
 							onClick={(e) =>
 							{
 								e.stopPropagation();
@@ -168,7 +170,10 @@ class Peer extends Component
 							})}
 						>
 							<div
-								className={classnames('button', 'newwindow')}
+								className={classnames('button', 'newwindow', {
+									disabled : !screenVisible ||
+										(windowConsumer === screenConsumer.id)
+								})}
 								onClick={(e) =>
 								{
 									e.stopPropagation();
@@ -177,7 +182,9 @@ class Peer extends Component
 							/>
 
 							<div
-								className={classnames('button', 'fullscreen')}
+								className={classnames('button', 'fullscreen', {
+									disabled : !screenVisible
+								})}
 								onClick={(e) =>
 								{
 									e.stopPropagation();

app/lib/components/Controls/Sidebar.jsx

@@ -2,9 +2,9 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import classnames from 'classnames';
-import * as appPropTypes from './appPropTypes';
-import { withRoomContext } from '../RoomContext';
-import FullScreen from './FullScreen';
+import * as appPropTypes from '../appPropTypes';
+import { withRoomContext } from '../../RoomContext';
+import FullScreen from '../FullScreen';
 
 class Sidebar extends Component
 {

app/lib/components/Layouts/Filmstrip.jsx

@@ -4,9 +4,9 @@ import ResizeObserver from 'resize-observer-polyfill';
 import { connect } from 'react-redux';
 import debounce from 'lodash/debounce';
 import classnames from 'classnames';
-import { withRoomContext } from '../RoomContext';
-import Peer from './Peer';
-import HiddenPeers from './HiddenPeers';
+import { withRoomContext } from '../../RoomContext';
+import Peer from '../Containers/Peer';
+import HiddenPeers from '../Containers/HiddenPeers';
 
 class Filmstrip extends Component
 {

app/lib/components/Layouts/Peers.jsx

@@ -3,9 +3,9 @@ import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import debounce from 'lodash/debounce';
-import { Appear } from './transitions';
-import Peer from './Peer';
-import HiddenPeers from './HiddenPeers';
+import { Appear } from '../transitions';
+import Peer from '../Containers/Peer';
+import HiddenPeers from '../Containers/HiddenPeers';
 import ResizeObserver from 'resize-observer-polyfill';
 
 const RATIO = 1.334;
@@ -129,9 +129,9 @@ class Peers extends React.Component
 					}
 				})}
 				<div className='hidden-peer-container'>
-					<If condition={spotlightsLength < peers.length}>
+					<If condition={spotlightsLength < Object.keys(peers).length}>
 						<HiddenPeers
-							hiddenPeersCount={peers.length-spotlightsLength}
+							hiddenPeersCount={Object.keys(peers).length - spotlightsLength}
 						/>
 					</If>
 				</div>

app/lib/components/Room.jsx

@@ -9,17 +9,17 @@ import * as appPropTypes from './appPropTypes';
 import * as requestActions from '../redux/requestActions';
 import * as stateActions from '../redux/stateActions';
 import { Appear } from './transitions';
-import Me from './Me';
-import Peers from './Peers';
+import Me from './Containers/Me';
+import Peers from './Layouts/Peers';
 import AudioPeers from './PeerAudio/AudioPeers';
 import Notifications from './Notifications';
 import ToolArea from './ToolArea/ToolArea';
-import FullScreenView from './FullScreenView';
+import FullScreenView from './VideoContainers/FullScreenView';
 import VideoWindow from './VideoWindow/VideoWindow';
 import Draggable from 'react-draggable';
 import { idle } from '../utils';
-import Sidebar from './Sidebar';
-import Filmstrip from './Filmstrip';
+import Sidebar from './Controls/Sidebar';
+import Filmstrip from './Layouts/Filmstrip';
 
 // Hide toolbars after 10 seconds of inactivity.
 const TIMEOUT = 10 * 1000;

app/lib/components/ToolArea/Chat/Chat.jsx

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
-import { withRoomContext } from '../../RoomContext';
+import { withRoomContext } from '../../../RoomContext';
 import MessageList from './MessageList';
 
 class Chat extends Component

app/lib/components/ToolArea/Chat/MessageList.jsx

@@ -3,7 +3,7 @@ import { compose } from 'redux';
 import PropTypes from 'prop-types';
 import marked from 'marked';
 import { connect } from 'react-redux';
-import scrollToBottom from './scrollToBottom';
+import scrollToBottom from '../scrollToBottom';
 
 const linkRenderer = new marked.Renderer();
 

app/lib/components/ToolArea/FileSharing/File.jsx

@@ -1,7 +1,7 @@
 import React, { Component, Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
-import { withRoomContext } from '../../RoomContext';
+import { withRoomContext } from '../../../RoomContext';
 import magnet from 'magnet-uri';
 
 const DEFAULT_PICTURE = 'resources/images/avatar-empty.jpeg';

app/lib/components/ToolArea/FileSharing/FileList.jsx

@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import { compose } from 'redux';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
-import scrollToBottom from '../Chat/scrollToBottom';
+import scrollToBottom from '../scrollToBottom';
 import File from './File';
 
 class FileList extends Component

app/lib/components/ToolArea/FileSharing/FileSharing.jsx

@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import classNames from 'classnames';
-import { withRoomContext } from '../../RoomContext';
+import { withRoomContext } from '../../../RoomContext';
 import FileList from './FileList';
 
 class FileSharing extends Component

app/lib/components/ToolArea/ParticipantList/ListMe.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { connect } from 'react-redux';
-import { Me } from '../appPropTypes';
+import { Me } from '../../appPropTypes';
 
 const ListMe = ({ me }) =>
 {

app/lib/components/ToolArea/ParticipantList/ListPeer.jsx

@@ -2,8 +2,8 @@ import React from 'react';
 import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
-import * as appPropTypes from '../appPropTypes';
-import { withRoomContext } from '../../RoomContext';
+import * as appPropTypes from '../../appPropTypes';
+import { withRoomContext } from '../../../RoomContext';
 
 const ListPeer = (props) =>
 {

app/lib/components/ToolArea/ParticipantList/ParticipantList.jsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import { connect } from 'react-redux';
 import classNames from 'classnames';
-import * as appPropTypes from '../appPropTypes';
-import { withRoomContext } from '../../RoomContext';
+import * as appPropTypes from '../../appPropTypes';
+import { withRoomContext } from '../../../RoomContext';
 import PropTypes from 'prop-types';
 import ListPeer from './ListPeer';
 import ListMe from './ListMe';

app/lib/components/ToolArea/Settings/Settings.jsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import { connect } from 'react-redux';
-import * as appPropTypes from './appPropTypes';
-import { withRoomContext } from '../RoomContext';
-import * as stateActions from '../redux/stateActions';
+import * as appPropTypes from '../../appPropTypes';
+import { withRoomContext } from '../../../RoomContext';
+import * as stateActions from '../../../redux/stateActions';
 import PropTypes from 'prop-types';
 import Dropdown from 'react-dropdown';
 import ReactTooltip from 'react-tooltip';
@@ -46,50 +46,48 @@ const Settings = ({
 		audioDevices = [];
 
 	return (
-		<div data-component='Settings'>
-			<div className='settings'>
-				<Dropdown
-					options={webcams}
-					value={findOption(webcams, me.selectedWebcam)}
-					onChange={(webcam) => roomClient.changeWebcam(webcam.value)}
-					placeholder={'Select camera'}
-				/>
+		<div className='settings'>
+			<Dropdown
+				options={webcams}
+				value={findOption(webcams, me.selectedWebcam)}
+				onChange={(webcam) => roomClient.changeWebcam(webcam.value)}
+				placeholder={'Select camera'}
+			/>
 
-				<Dropdown
-					disabled={!me.canChangeAudioDevice}
-					options={audioDevices}
-					value={findOption(audioDevices, me.selectedAudioDevice)}
-					onChange={(device) => roomClient.changeAudioDevice(device.value)}
-					placeholder={audioDevicesText}
+			<Dropdown
+				disabled={!me.canChangeAudioDevice}
+				options={audioDevices}
+				value={findOption(audioDevices, me.selectedAudioDevice)}
+				onChange={(device) => roomClient.changeAudioDevice(device.value)}
+				placeholder={audioDevicesText}
+			/>
+			<ReactTooltip
+				effect='solid'
+			/>
+			<div
+				data-tip='keyboard shortcut: &lsquo;a&lsquo;'
+				data-type='dark'
+				data-place='left'
+			>
+				<input
+					id='room-mode'
+					type='checkbox'
+					checked={room.advancedMode}
+					onChange={onToggleAdvancedMode}
 				/>
-				<ReactTooltip
-					effect='solid'
-				/>
-				<div
-					data-tip='keyboard shortcut: &lsquo;a&lsquo;'
-					data-type='dark'
-					data-place='left'
-				>
-					<input
-						id='room-mode'
-						type='checkbox'
-						checked={room.advancedMode}
-						onChange={onToggleAdvancedMode}
-					/>
-					<label htmlFor='room-mode'>Advanced mode</label>
-				</div>
+				<label htmlFor='room-mode'>Advanced mode</label>
+			</div>
 
-				<div
-					data-tip='keyboard shortcut: type a digit'
-					data-type='dark'
-					data-place='left'
-				>
-					<Dropdown
-						options={modes}
-						value={findOption(modes, room.mode)}
-						onChange={(mode) => handleChangeMode(mode.value)}
-					/>
-				</div>
+			<div
+				data-tip='keyboard shortcut: type a digit'
+				data-type='dark'
+				data-place='left'
+			>
+				<Dropdown
+					options={modes}
+					value={findOption(modes, room.mode)}
+					onChange={(mode) => handleChangeMode(mode.value)}
+				/>
 			</div>
 		</div>
 	);

app/lib/components/ToolArea/ToolArea.jsx

@@ -3,10 +3,10 @@ import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import * as stateActions from '../../redux/stateActions';
-import ParticipantList from '../ParticipantList/ParticipantList';
-import Chat from '../Chat/Chat';
-import Settings from '../Settings';
-import FileSharing from '../FileSharing/FileSharing';
+import ParticipantList from './ParticipantList/ParticipantList';
+import Chat from './Chat/Chat';
+import Settings from './Settings/Settings';
+import FileSharing from './FileSharing/FileSharing';
 import TabHeader from './TabHeader';
 
 class ToolArea extends React.Component

app/lib/components/VideoContainers/FullScreenView.jsx

@@ -2,8 +2,8 @@ import React from 'react';
 import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
-import * as appPropTypes from './appPropTypes';
-import * as stateActions from '../redux/stateActions';
+import * as appPropTypes from '../appPropTypes';
+import * as stateActions from '../../redux/stateActions';
 import FullView from './FullView';
 
 const FullScreenView = (props) =>

app/lib/components/VideoContainers/FullView.jsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
-import Spinner from 'react-spinner';
 
 export default class FullView extends React.Component
 {
@@ -34,12 +33,6 @@ export default class FullView extends React.Component
 					autoPlay
 					muted={Boolean(true)}
 				/>
-
-				<If condition={videoProfile === 'none'}>
-					<div className='spinner-container'>
-						<Spinner />
-					</div>
-				</If>
 			</div>
 		);
 	}

app/lib/components/VideoContainers/PeerView.jsx

@@ -1,9 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
-import Spinner from 'react-spinner';
-import * as appPropTypes from './appPropTypes';
-import EditableInput from './EditableInput';
+import * as appPropTypes from '../appPropTypes';
+import EditableInput from '../Controls/EditableInput';
 
 export default class PeerView extends React.Component
 {
@@ -122,12 +121,6 @@ export default class PeerView extends React.Component
 				<div className='volume-container'>
 					<div className={classnames('bar', `level${volume}`)} />
 				</div>
-
-				<If condition={videoProfile === 'none'}>
-					<div className='spinner-container'>
-						<Spinner />
-					</div>
-				</If>
 			</div>
 		);
 	}

app/lib/components/VideoContainers/ScreenView.jsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
-import Spinner from 'react-spinner';
 
 export default class ScreenView extends React.Component
 {
@@ -68,12 +67,6 @@ export default class ScreenView extends React.Component
 					autoPlay
 					muted={Boolean(true)}
 				/>
-
-				<If condition={screenProfile === 'none'}>
-					<div className='spinner-container'>
-						<Spinner />
-					</div>
-				</If>
 			</div>
 		);
 	}

app/lib/components/VideoWindow/VideoWindow.jsx

@@ -4,7 +4,7 @@ import NewWindow from './NewWindow';
 import PropTypes from 'prop-types';
 import * as appPropTypes from '../appPropTypes';
 import * as stateActions from '../../redux/stateActions';
-import FullView from '../FullView';
+import FullView from '../VideoContainers/FullView';
 
 const VideoWindow = (props) =>
 {