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,210 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import debounce from 'lodash/debounce';
+import { withStyles } from '@material-ui/core/styles';
+import Peer from '../Containers/Peer';
+import HiddenPeers from '../Containers/HiddenPeers';
+import ResizeObserver from 'resize-observer-polyfill';
+
+const RATIO = 1.334;
+const PADDING = 100;
+
+const styles = (theme) =>
+	({
+		root :
+		{
+			width          : '100%',
+			height         : '100%',
+			display        : 'flex',
+			flexDirection  : 'row',
+			flexWrap       : 'wrap',
+			justifyContent : 'center',
+			alignItems     : 'center',
+			alignContent   : 'center',
+			paddingTop     : 70,
+			paddingBottom  : 30
+		},
+		peerContainer :
+		{
+			overflow           : 'hidden',
+			flex               : '0 0 auto',
+			margin             : 6,
+			boxShadow          : 'var(--peer-shadow)',
+			border             : 'var(--peer-border)',
+			transitionProperty : 'border-color',
+			'&.active-speaker' :
+			{
+				borderColor : 'var(--active-speaker-border-color)'
+			},
+			'&.selected' :
+			{
+				borderColor : 'var(--selected-peer-border-color)'
+			}
+		}
+	});
+
+class Democratic extends React.Component
+{
+	constructor(props)
+	{
+		super(props);
+
+		this.state = {
+			peerWidth  : 400,
+			peerHeight : 300
+		};
+
+		this.peersRef = React.createRef();
+	}
+
+	updateDimensions = debounce(() =>
+	{
+		if (!this.peersRef.current)
+		{
+			return;
+		}
+
+		const n = this.props.boxes;
+
+		if (n === 0)
+		{
+			return;
+		}
+
+		const width = this.peersRef.current.clientWidth;
+		const height = this.peersRef.current.clientHeight - PADDING;
+
+		let x, y, space;
+
+		for (let rows = 1; rows < 100; rows = rows + 1)
+		{
+			x = width / Math.ceil(n / rows);
+			y = x / RATIO;
+			if (height < (y * rows))
+			{
+				y = height / rows;
+				x = RATIO * y;
+				break;
+			}
+			space = height - (y * (rows));
+			if (space < y)
+			{
+				break;
+			}
+		}
+		if (Math.ceil(this.state.peerWidth) !== Math.ceil(0.9 * x))
+		{
+			this.setState({
+				peerWidth  : 0.9 * x,
+				peerHeight : 0.9 * y
+			});
+		}
+	}, 200);
+
+	componentDidMount()
+	{
+		window.addEventListener('resize', this.updateDimensions);
+		const observer = new ResizeObserver(this.updateDimensions);
+
+		observer.observe(this.peersRef.current);
+	}
+
+	componentWillUnmount()
+	{
+		window.removeEventListener('resize', this.updateDimensions);
+	}
+
+	componentDidUpdate()
+	{
+		this.updateDimensions();
+	}
+
+	render()
+	{
+		const {
+			advancedMode,
+			activeSpeakerName,
+			peers,
+			spotlights,
+			spotlightsLength,
+			classes
+		} = this.props;
+
+		const style =
+		{
+			'width'  : this.state.peerWidth,
+			'height' : this.state.peerHeight
+		};
+
+		return (
+			<div className={classes.root} ref={this.peersRef}>
+				{ Object.keys(peers).map((peerName) =>
+				{
+					if (spotlights.find((spotlightsElement) => spotlightsElement === peerName))
+					{
+						return (
+							<div
+								key={peerName}
+								className={classnames(classes.peerContainer, {
+									'selected'       : this.props.selectedPeerName === peerName,
+									'active-speaker' : peerName === activeSpeakerName
+								})}
+							>
+								<Peer
+									advancedMode={advancedMode}
+									name={peerName}
+									style={style}
+								/>
+							</div>
+						);
+					}
+					else
+					{
+						return('');
+					}
+				})}
+				{ spotlightsLength < Object.keys(peers).length ?
+					<HiddenPeers
+						hiddenPeersCount={Object.keys(peers).length - spotlightsLength}
+					/>
+					:null
+				}
+			</div>
+		);
+	}
+}
+
+Democratic.propTypes =
+	{
+		advancedMode      : PropTypes.bool,
+		peers             : PropTypes.object.isRequired,
+		boxes             : PropTypes.number,
+		activeSpeakerName : PropTypes.string,
+		selectedPeerName  : PropTypes.string,
+		spotlightsLength  : PropTypes.number,
+		spotlights        : PropTypes.array.isRequired,
+		classes           : PropTypes.object.isRequired
+	};
+
+const mapStateToProps = (state) =>
+{
+	const spotlights = state.room.spotlights;
+	const spotlightsLength = spotlights ? state.room.spotlights.length : 0;
+	const boxes = spotlightsLength + Object.values(state.consumers)
+		.filter((consumer) => consumer.source === 'screen').length;
+
+	return {
+		peers             : state.peers,
+		boxes,
+		activeSpeakerName : state.room.activeSpeakerName,
+		selectedPeerName  : state.room.selectedPeerName,
+		spotlights,
+		spotlightsLength
+	};
+};
+
+export default connect(
+	mapStateToProps
+)(withStyles(styles)(Democratic));