Fixes to layout and buttons on peers

app/src/components/Containers/Peer.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
@@ -18,13 +18,35 @@ import FullScreenIcon from '@material-ui/icons/Fullscreen';
 const styles = (theme) =>
 	({
 		root :
+		{
+			overflow    : 'hidden',
+			flex        : '0 0 auto',
+			margin      : 6,
+			boxShadow   : 'var(--peer-shadow)',
+			border      : 'var(--peer-border)',
+			touchAction : 'none',
+			'&.webcam'  :
+			{
+				order : 2
+			},
+			'&.screen' :
+			{
+				order : 1
+			},
+			'&.hover' :
+			{
+				boxShadow : '0px 1px 3px rgba(0, 0, 0, 0.05) inset, 0px 0px 8px rgba(82, 168, 236, 0.9)'
+			}
+		},
+		peerContainer :
 		{
 			width         : '100%',
 			height        : '100%',
 			display       : 'flex',
 			flexDirection : 'row',
 			flex          : '100 100 auto',
-			position      : 'relative'
+			position      : 'relative',
+			touchAction   : 'none'
 		},
 		fab :
 		{
@@ -58,7 +80,8 @@ const styles = (theme) =>
 			zIndex          : 20,
 			opacity         : 0,
 			transition      : 'opacity 0.3s',
-			'&:hover'       :
+			touchAction     : 'none',
+			'&.hover'       :
 			{
 				opacity : 1
 			}
@@ -111,6 +134,16 @@ const styles = (theme) =>
 
 const Peer = (props) =>
 {
+	const [ hover, setHover ] = useState(false);
+	const [ webcamHover, setWebcamHover ] = useState(false);
+	const [ screenHover, setScreenHover ] = useState(false);
+
+	let touchTimeout = null;
+
+	let touchWebcamTimeout = null;
+
+	let touchScreenTimeout = null;
+
 	const {
 		roomClient,
 		advancedMode,
@@ -157,11 +190,30 @@ const Peer = (props) =>
 	const smallScreen = useMediaQuery(theme.breakpoints.down('sm'));
 
 	return (
+		<React.Fragment>
 			<div
-			className={classnames(classes.root, {
+				className={classnames(classes.root, 'webcam', hover ? 'hover' : null)}
-				screen : screenConsumer
+				onMouseOver={() => setHover(true)}
-			})}
+				onMouseOut={() => setHover(false)}
+				onTouchStart={() =>
+				{
+					if (touchTimeout)
+						clearTimeout(touchTimeout);
+
+					setHover(true);
+				}}
+				onTouchEnd={() =>
+				{
+					if (touchTimeout)
+						clearTimeout(touchTimeout);
+
+					touchTimeout = setTimeout(() =>
+					{
+						setHover(false);
+					}, 2000);
+				}}
 			>
+				<div className={classes.peerContainer}>
 					{ videoVisible && !webcamConsumer.supported ?
 						<div className={classes.incompatibleVideo}>
 							<p>incompatible video</p>
@@ -176,9 +228,28 @@ const Peer = (props) =>
 						:null
 					}
 
-			<div className={classnames(classes.viewContainer, 'webcam')} style={style}>
+					<div className={classnames(classes.viewContainer)} style={style}>
 						<div
-					className={classes.controls}
+							className={classnames(classes.controls, webcamHover ? 'hover' : null)}
+							onMouseOver={() => setWebcamHover(true)}
+							onMouseOut={() => setWebcamHover(false)}
+							onTouchStart={() =>
+							{
+								if (touchWebcamTimeout)
+									clearTimeout(touchWebcamTimeout);
+			
+								setWebcamHover(true);
+							}}
+							onTouchEnd={() =>
+							{
+								if (touchWebcamTimeout)
+									clearTimeout(touchWebcamTimeout);
+			
+								touchWebcamTimeout = setTimeout(() =>
+								{
+									setWebcamHover(false);
+								}, 2000);
+							}}
 						>
 							<Fab
 								aria-label='Mute mic'
@@ -240,11 +311,69 @@ const Peer = (props) =>
 							videoCodec={webcamConsumer ? webcamConsumer.codec : null}
 						/>
 					</div>
+				</div>
+			</div>
 
 			{ screenConsumer ?
-				<div className={classnames(classes.viewContainer, 'screen')} style={style}>
 				<div
-						className={classes.controls}
+					className={classnames(classes.root, 'screen', hover ? 'hover' : null)}
+					onMouseOver={() => setHover(true)}
+					onMouseOut={() => setHover(false)}
+					onTouchStart={() =>
+					{
+						if (touchTimeout)
+							clearTimeout(touchTimeout);
+	
+						setHover(true);
+					}}
+					onTouchEnd={() =>
+					{
+						if (touchTimeout)
+							clearTimeout(touchTimeout);
+	
+						touchTimeout = setTimeout(() =>
+						{
+							setHover(false);
+						}, 2000);
+					}}
+				>
+					<div className={classes.peerContainer}>
+						{ screenVisible && !screenConsumer.supported ?
+							<div className={classes.incompatibleVideo}>
+								<p>incompatible video</p>
+							</div>
+							:null
+						}
+
+						{ !screenVisible ?
+							<div className={classes.pausedVideo}>
+								<p>this video is paused</p>
+							</div>
+							:null
+						}
+						<div className={classnames(classes.viewContainer)} style={style}>
+							<div
+								className={classnames(classes.controls, screenHover ? 'hover' : null)}
+								onMouseOver={() => setScreenHover(true)}
+								onMouseOut={() => setScreenHover(false)}
+								onTouchStart={() =>
+								{
+									if (touchScreenTimeout)
+										clearTimeout(touchScreenTimeout);
+				
+									setScreenHover(true);
+								}}
+								onTouchEnd={() =>
+								{
+
+									if (touchScreenTimeout)
+										clearTimeout(touchScreenTimeout);
+				
+									touchScreenTimeout = setTimeout(() =>
+									{
+										setScreenHover(false);
+									}, 2000);
+								}}
 							>
 								{ !smallScreen ?
 									<Fab
@@ -284,9 +413,11 @@ const Peer = (props) =>
 								screenCodec={screenConsumer ? screenConsumer.codec : null}
 							/>
 						</div>
+					</div>
+				</div>
 				:null
 			}
-		</div>
+		</React.Fragment>
 	);
 };
 

app/src/components/MeetingViews/Democratic.js

@@ -126,7 +126,6 @@ class Democratic extends React.PureComponent
 	{
 		const {
 			advancedMode,
-			activeSpeakerName,
 			amActiveSpeaker,
 			peers,
 			spotlights,
@@ -143,7 +142,7 @@ class Democratic extends React.PureComponent
 		return (
 			<div className={classes.root} ref={this.peersRef}>
 				<div
-					className={classnames(classes.peerContainer, 'me-handle', {
+					className={classnames(classes.peerContainer, {
 						'active-speaker' : amActiveSpeaker
 					})}
 				>
@@ -157,19 +156,12 @@ class Democratic extends React.PureComponent
 					if (spotlights.find((spotlightsElement) => spotlightsElement === peerName))
 					{
 						return (
-							<div
-								key={peerName}
-								className={classnames(classes.peerContainer, {
-									'selected'       : this.props.selectedPeerName === peerName,
-									'active-speaker' : peerName === activeSpeakerName
-								})}
-							>
 							<Peer
+								key={peerName}
 								advancedMode={advancedMode}
 								name={peerName}
 								style={style}
 							/>
-							</div>
 						);
 					}
 					else