From 66375ec8cfa1024d20fcfeec234f2a0c095e2186 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?H=C3=A5var=20Aamb=C3=B8=20Fosstveit?= <havar@fosstveit.net>
Date: Tue, 2 Apr 2019 09:31:21 +0200
Subject: [PATCH] Fixes to layout and buttons on peers

---
 app/src/components/Containers/Peer.js         | 365 ++++++++++++------
 app/src/components/MeetingViews/Democratic.js |  20 +-
 2 files changed, 254 insertions(+), 131 deletions(-)

diff --git a/app/src/components/Containers/Peer.js b/app/src/components/Containers/Peer.js
index 3bb39d4..ec891bd 100644
--- a/app/src/components/Containers/Peer.js
+++ b/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,136 +190,234 @@ const Peer = (props) =>
 	const smallScreen = useMediaQuery(theme.breakpoints.down('sm'));
 
 	return (
-		<div
-			className={classnames(classes.root, {
-				screen : screenConsumer
-			})}
-		>
-			{ videoVisible && !webcamConsumer.supported ?
-				<div className={classes.incompatibleVideo}>
-					<p>incompatible video</p>
-				</div>
-				:null
-			}
+		<React.Fragment>
+			<div
+				className={classnames(classes.root, 'webcam', hover ? 'hover' : null)}
+				onMouseOver={() => setHover(true)}
+				onMouseOut={() => setHover(false)}
+				onTouchStart={() =>
+				{
+					if (touchTimeout)
+						clearTimeout(touchTimeout);
 
-			{ !videoVisible ?
-				<div className={classes.pausedVideo}>
-					<p>this video is paused</p>
-				</div>
-				:null
-			}
+					setHover(true);
+				}}
+				onTouchEnd={() =>
+				{
+					if (touchTimeout)
+						clearTimeout(touchTimeout);
 
-			<div className={classnames(classes.viewContainer, 'webcam')} style={style}>
-				<div
-					className={classes.controls}
-				>
-					<Fab
-						aria-label='Mute mic'
-						className={classes.fab}
-						color={micEnabled ? 'default' : 'secondary'}
-						onClick={() =>
-						{
-							micEnabled ?
-								roomClient.modifyPeerConsumer(peer.name, 'mic', true) :
-								roomClient.modifyPeerConsumer(peer.name, 'mic', false);
-						}}
-					>
-						{ micEnabled ?
-							<MicIcon />
-							:
-							<MicOffIcon />
-						}
-					</Fab>
-
-					{ !smallScreen ?
-						<Fab
-							aria-label='New window'
-							className={classes.fab}
-							disabled={
-								!videoVisible ||
-								(windowConsumer === webcamConsumer.id)
-							}
-							onClick={() =>
-							{
-								toggleConsumerWindow(webcamConsumer);
-							}}
-						>
-							<NewWindowIcon />
-						</Fab>
+					touchTimeout = setTimeout(() =>
+					{
+						setHover(false);
+					}, 2000);
+				}}
+			>
+				<div className={classes.peerContainer}>
+					{ videoVisible && !webcamConsumer.supported ?
+						<div className={classes.incompatibleVideo}>
+							<p>incompatible video</p>
+						</div>
 						:null
 					}
 
-					<Fab
-						aria-label='Fullscreen'
-						className={classes.fab}
-						disabled={!videoVisible}
-						onClick={() =>
-						{
-							toggleConsumerFullscreen(webcamConsumer);
-						}}
-					>
-						<FullScreenIcon />
-					</Fab>
-				</div>
+					{ !videoVisible ?
+						<div className={classes.pausedVideo}>
+							<p>this video is paused</p>
+						</div>
+						:null
+					}
 
-				<PeerView
-					advancedMode={advancedMode}
-					peer={peer}
-					volume={micConsumer ? micConsumer.volume : null}
-					videoTrack={webcamConsumer ? webcamConsumer.track : null}
-					videoVisible={videoVisible}
-					videoProfile={videoProfile}
-					audioCodec={micConsumer ? micConsumer.codec : null}
-					videoCodec={webcamConsumer ? webcamConsumer.codec : null}
-				/>
+					<div className={classnames(classes.viewContainer)} style={style}>
+						<div
+							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'
+								className={classes.fab}
+								color={micEnabled ? 'default' : 'secondary'}
+								onClick={() =>
+								{
+									micEnabled ?
+										roomClient.modifyPeerConsumer(peer.name, 'mic', true) :
+										roomClient.modifyPeerConsumer(peer.name, 'mic', false);
+								}}
+							>
+								{ micEnabled ?
+									<MicIcon />
+									:
+									<MicOffIcon />
+								}
+							</Fab>
+
+							{ !smallScreen ?
+								<Fab
+									aria-label='New window'
+									className={classes.fab}
+									disabled={
+										!videoVisible ||
+										(windowConsumer === webcamConsumer.id)
+									}
+									onClick={() =>
+									{
+										toggleConsumerWindow(webcamConsumer);
+									}}
+								>
+									<NewWindowIcon />
+								</Fab>
+								:null
+							}
+
+							<Fab
+								aria-label='Fullscreen'
+								className={classes.fab}
+								disabled={!videoVisible}
+								onClick={() =>
+								{
+									toggleConsumerFullscreen(webcamConsumer);
+								}}
+							>
+								<FullScreenIcon />
+							</Fab>
+						</div>
+
+						<PeerView
+							advancedMode={advancedMode}
+							peer={peer}
+							volume={micConsumer ? micConsumer.volume : null}
+							videoTrack={webcamConsumer ? webcamConsumer.track : null}
+							videoVisible={videoVisible}
+							videoProfile={videoProfile}
+							audioCodec={micConsumer ? micConsumer.codec : null}
+							videoCodec={webcamConsumer ? webcamConsumer.codec : null}
+						/>
+					</div>
+				</div>
 			</div>
 
 			{ screenConsumer ?
-				<div className={classnames(classes.viewContainer, 'screen')} style={style}>
-					<div
-						className={classes.controls}
-					>
-						{ !smallScreen ?
-							<Fab
-								aria-label='New window'
-								className={classes.fab}
-								disabled={
-									!screenVisible ||
-									(windowConsumer === screenConsumer.id)
-								}
-								onClick={() =>
-								{
-									toggleConsumerWindow(screenConsumer);
-								}}
-							>
-								<NewWindowIcon />
-							</Fab>
+				<div
+					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
 						}
 
-						<Fab
-							aria-label='Fullscreen'
-							className={classes.fab}
-							disabled={!screenVisible}
-							onClick={() =>
-							{
-								toggleConsumerFullscreen(screenConsumer);
-							}}
-						>
-							<FullScreenIcon />
-						</Fab>
+						{ !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
+										aria-label='New window'
+										className={classes.fab}
+										disabled={
+											!screenVisible ||
+											(windowConsumer === screenConsumer.id)
+										}
+										onClick={() =>
+										{
+											toggleConsumerWindow(screenConsumer);
+										}}
+									>
+										<NewWindowIcon />
+									</Fab>
+									:null
+								}
+
+								<Fab
+									aria-label='Fullscreen'
+									className={classes.fab}
+									disabled={!screenVisible}
+									onClick={() =>
+									{
+										toggleConsumerFullscreen(screenConsumer);
+									}}
+								>
+									<FullScreenIcon />
+								</Fab>
+							</div>
+							<ScreenView
+								advancedMode={advancedMode}
+								screenTrack={screenConsumer ? screenConsumer.track : null}
+								screenVisible={screenVisible}
+								screenProfile={screenProfile}
+								screenCodec={screenConsumer ? screenConsumer.codec : null}
+							/>
+						</div>
 					</div>
-					<ScreenView
-						advancedMode={advancedMode}
-						screenTrack={screenConsumer ? screenConsumer.track : null}
-						screenVisible={screenVisible}
-						screenProfile={screenProfile}
-						screenCodec={screenConsumer ? screenConsumer.codec : null}
-					/>
 				</div>
 				:null
 			}
-		</div>
+		</React.Fragment>
 	);
 };
 
diff --git a/app/src/components/MeetingViews/Democratic.js b/app/src/components/MeetingViews/Democratic.js
index 84efee3..9ab7182 100644
--- a/app/src/components/MeetingViews/Democratic.js
+++ b/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
+							<Peer
 								key={peerName}
-								className={classnames(classes.peerContainer, {
-									'selected'       : this.props.selectedPeerName === peerName,
-									'active-speaker' : peerName === activeSpeakerName
-								})}
-							>
-								<Peer
-									advancedMode={advancedMode}
-									name={peerName}
-									style={style}
-								/>
-							</div>
+								advancedMode={advancedMode}
+								name={peerName}
+								style={style}
+							/>
 						);
 					}
 					else