Massive change. Changed to react-scripts (webpack) for building. Changed to material-ui where applicable. Changed to CSS-in-JS.

2019-03-29 14:12:13 +01:00
parent 36944a9ea7
commit 0449d6ff20
185 changed files with 4564 additions and 6442 deletions
@@ -0,0 +1,124 @@
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import { withStyles } from '@material-ui/core/styles';
+import * as stateActions from '../../actions/stateActions';
+import BuddyImage from '../../images/buddy.svg';
+
+const styles = () =>
+	({
+		root :
+		{
+			width              : '12vmin',
+			height             : '9vmin',
+			position           : 'absolute',
+			bottom             : '3%',
+			right              : '3%',
+			color              : 'rgba(170, 170, 170, 1)',
+			cursor             : 'pointer',
+			backgroundImage    : `url(${BuddyImage})`,
+			backgroundColor    : 'rgba(42, 75, 88, 1)',
+			backgroundPosition : 'bottom',
+			backgroundSize     : 'auto 85%',
+			backgroundRepeat   : 'no-repeat',
+			border             : 'var(--peer-border)',
+			boxShadow          : 'var(--peer-shadow)',
+			textAlign          : 'center',
+			verticalAlign      : 'middle',
+			lineHeight         : '1.8vmin',
+			fontSize           : '1.7vmin',
+			fontWeight         : 'bolder',
+			animation          : 'none',
+			'&.pulse' :
+			{
+				animation : 'pulse 0.5s'
+			}
+		},
+		'@keyframes pulse' :
+		{
+			'0%' :
+			{
+				transform : 'scale3d(1, 1, 1)'
+			},
+			'50%' :
+			{
+				transform : 'scale3d(1.2, 1.2, 1.2)'
+			},
+			'100%' :
+			{
+				transform : 'scale3d(1, 1, 1)'
+			}
+		}
+	});
+
+class HiddenPeers extends Component
+{
+	constructor(props)
+	{
+		super(props);
+		this.state = { className: '' };
+	}
+
+	componentDidUpdate(prevProps)
+	{
+		const { hiddenPeersCount } = this.props;
+
+		if (hiddenPeersCount !== prevProps.hiddenPeersCount)
+		{
+			// eslint-disable-next-line react/no-did-update-set-state
+			this.setState({ className: 'pulse' }, () =>
+			{
+				if (this.timeout)
+				{
+					clearTimeout(this.timeout);
+				}
+
+				this.timeout = setTimeout(() =>
+				{
+					this.setState({ className: '' });
+				}, 500);
+			});
+		}
+	}
+
+	render()
+	{
+		const {
+			hiddenPeersCount,
+			openUsersTab,
+			classes
+		} = this.props;
+
+		return (
+			<div className={classnames(classes.root, this.state.className)} onClick={() => openUsersTab()}>
+				<p>+{hiddenPeersCount} <br /> participant
+					{(hiddenPeersCount === 1) ? null : 's'}
+				</p>
+			</div>
+		);
+	}
+}
+
+HiddenPeers.propTypes =
+{
+	hiddenPeersCount : PropTypes.number,
+	openUsersTab     : PropTypes.func.isRequired,
+	classes          : PropTypes.object.isRequired
+};
+
+const mapDispatchToProps = (dispatch) =>
+{
+	return {
+		openUsersTab : () =>
+		{
+			dispatch(stateActions.openToolArea());
+			dispatch(stateActions.setToolTab('users'));
+		}
+	};
+};
+
+export default connect(
+	null,
+	mapDispatchToProps
+)(withStyles(styles)(HiddenPeers));