Clean up styling and use ONE set of controls regardless of platform

app/src/components/Containers/Me.js

@@ -3,7 +3,6 @@ import { connect } from 'react-redux';
 import { meProducersSelector } from '../Selectors';
 import { withRoomContext } from '../../RoomContext';
 import { withStyles } from '@material-ui/core/styles';
-import useMediaQuery from '@material-ui/core/useMediaQuery';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import * as appPropTypes from '../appPropTypes';
@@ -71,17 +70,12 @@ const styles = (theme) =>
 			position       : 'absolute',
 			width          : '100%',
 			height         : '100%',
-			backgroundColor : 'rgba(0, 0, 0, 0.3)',
 			display        : 'flex',
 			flexDirection  : 'column',
 			justifyContent : 'center',
 			alignItems     : 'flex-end',
 			padding        : theme.spacing(1),
 			zIndex         : 21,
-			opacity         : 1,
-			transition      : 'opacity 0.3s',
-			touchAction     : 'none',
-			pointerEvents   : 'none',
 			'& p'          :
 			{
 				position   : 'absolute',
@@ -261,8 +255,6 @@ const Me = (props) =>
 		'margin' : spacing
 	};
 
-	const smallScreen = useMediaQuery(theme.breakpoints.down('sm'));
-
 	return (
 		<React.Fragment>
 			<div
@@ -295,9 +287,9 @@ const Me = (props) =>
 				}}
 				style={spacingStyle}
 			>
-				<div className={classnames(classes.viewContainer)} style={style}>
+				<div className={classes.viewContainer} style={style}>
 					<div
-						className={classnames(classes.controls)}  
+						className={classes.controls}  
 						onMouseOver={() => setHover(true)}
 						onMouseOut={() => setHover(false)}
 						onTouchStart={() =>
@@ -318,23 +310,26 @@ const Me = (props) =>
 							}, 2000);
 						}}
 					>
-						<p className={classnames(hover && 'hover')}>
+						<p className={hover && 'hover'}>
 							<FormattedMessage
 								id='room.me'
 								defaultMessage='ME'
 							/>
 						</p>
 
-						<div className={classnames(classes.ptt, (micState ==='muted' && me.isSpeaking) ? 'enabled' : null)} >
+						<div className={classnames(
+							classes.ptt,
+							(micState === 'muted' && me.isSpeaking) ? 'enabled' : null
+						)}
+						>
 							<FormattedMessage
 								id='me.mutedPTT'
 								defaultMessage='You are muted, hold down SPACE-BAR to talk'
 							/>	
 						</div>
 
-						{ !me.isMobile &&
 						<React.Fragment>
-								<Tooltip title={micTip} placement={smallScreen ? 'top' : 'left'}>
+							<Tooltip title={micTip} placement='left'>
 								<div>
 									<Fab
 										aria-label={intl.formatMessage({
@@ -363,7 +358,7 @@ const Me = (props) =>
 									</Fab>
 								</div>
 							</Tooltip>
-								<Tooltip title={webcamTip} placement={smallScreen ? 'top' : 'left'}>
+							<Tooltip title={webcamTip} placement='left'>
 								<div>
 									<Fab
 										aria-label={intl.formatMessage({
@@ -389,7 +384,7 @@ const Me = (props) =>
 									</Fab>
 								</div>
 							</Tooltip>
-								<Tooltip title={screenTip} placement={smallScreen ? 'top' : 'left'}>
+							<Tooltip title={screenTip} placement='left'>
 								<div>
 									<Fab
 										aria-label={intl.formatMessage({
@@ -435,7 +430,6 @@ const Me = (props) =>
 								</div>
 							</Tooltip>
 						</React.Fragment>
-						}
 					</div>
 
 					<VideoView
@@ -481,9 +475,9 @@ const Me = (props) =>
 					}}
 					style={spacingStyle}
 				>
-					<div className={classnames(classes.viewContainer)} style={style}>
+					<div className={classes.viewContainer} style={style}>
 						<div
-							className={classnames(classes.controls, hover && 'hover')}
+							className={classes.controls}
 							onMouseOver={() => setHover(true)}
 							onMouseOut={() => setHover(false)}
 							onTouchStart={() =>
@@ -505,7 +499,7 @@ const Me = (props) =>
 								}, 2000);
 							}}
 						>
-							<p>
+							<p className={hover && 'hover'}>
 								<FormattedMessage
 									id='room.me'
 									defaultMessage='ME'

app/src/components/Controls/MobileControls.js

@@ -1,172 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { connect } from 'react-redux';
-import { meProducersSelector } from '../Selectors';
-import { withStyles } from '@material-ui/core/styles';
-import * as appPropTypes from '../appPropTypes';
-import { withRoomContext } from '../../RoomContext';
-import Fab from '@material-ui/core/Fab';
-import Tooltip from '@material-ui/core/Tooltip';
-import MicIcon from '@material-ui/icons/Mic';
-import MicOffIcon from '@material-ui/icons/MicOff';
-import VideoIcon from '@material-ui/icons/Videocam';
-import VideoOffIcon from '@material-ui/icons/VideocamOff';
-
-const styles = (theme) =>
-	({
-		root :
-		{
-			position      : 'fixed',
-			zIndex        : 500,
-			display       : 'flex',
-			flexDirection : 'row',
-			bottom        : '0.5em',
-			left          : '50%',
-			transform     : 'translate(-50%, -0%)'
-		},
-		fab :
-		{
-			margin : theme.spacing(1)
-		}
-	});
-
-const MobileControls = (props) =>
-{
-	const {
-		roomClient,
-		me,
-		micProducer,
-		webcamProducer,
-		classes
-	} = props;
-
-	let micState;
-
-	let micTip;
-
-	if (!me.canSendMic)
-	{
-		micState = 'unsupported';
-		micTip = 'Audio unsupported';
-	}
-	else if (!micProducer)
-	{
-		micState = 'off';
-		micTip = 'Activate audio';
-	}
-	else if (!micProducer.locallyPaused && !micProducer.remotelyPaused)
-	{
-		micState = 'on';
-		micTip = 'Mute audio';
-	}
-	else
-	{
-		micState = 'muted';
-		micTip = 'Unmute audio';
-	}
-
-	let webcamState;
-
-	let webcamTip;
-
-	if (!me.canSendWebcam)
-	{
-		webcamState = 'unsupported';
-		webcamTip = 'Video unsupported';
-	}
-	else if (webcamProducer)
-	{
-		webcamState = 'on';
-		webcamTip = 'Stop video';
-	}
-	else
-	{
-		webcamState = 'off';
-		webcamTip = 'Start video';
-	}
-
-	return (
-		<div className={classes.root}>
-			<Tooltip title={micTip} placement='top'>
-				<div>
-					<Fab
-						aria-label='Mute mic'
-						className={classes.fab}
-						disabled={!me.canSendMic || me.audioInProgress}
-						color={micState === 'on' ? 'default' : 'secondary'}
-						size='large'
-						onClick={() =>
-						{
-							if (micState === 'off')
-								roomClient.enableMic();
-							else if (micState === 'on')
-								roomClient.muteMic();
-							else
-								roomClient.unmuteMic();
-						}}
-					>
-						{ micState === 'on' ?
-							<MicIcon />
-							:
-							<MicOffIcon />
-						}
-					</Fab>
-				</div>
-			</Tooltip>
-			<Tooltip title={webcamTip} placement='top'>
-				<div>
-					<Fab
-						aria-label='Mute video'
-						className={classes.fab}
-						disabled={!me.canSendWebcam || me.webcamInProgress}
-						color={webcamState === 'on' ? 'default' : 'secondary'}
-						size='large'
-						onClick={() =>
-						{
-							webcamState === 'on' ?
-								roomClient.disableWebcam() :
-								roomClient.enableWebcam();
-						}}
-					>
-						{ webcamState === 'on' ?
-							<VideoIcon />
-							:
-							<VideoOffIcon />
-						}
-					</Fab>
-				</div>
-			</Tooltip>
-		</div>
-	);
-};
-
-MobileControls.propTypes =
-{
-	roomClient     : PropTypes.any.isRequired,
-	me             : appPropTypes.Me.isRequired,
-	micProducer    : appPropTypes.Producer,
-	webcamProducer : appPropTypes.Producer,
-	classes        : PropTypes.object.isRequired,
-	theme          : PropTypes.object.isRequired
-};
-
-const mapStateToProps = (state) =>
-	({
-		...meProducersSelector(state),
-		me : state.me
-	});
-
-export default withRoomContext(connect(
-	mapStateToProps,
-	null,
-	null,
-	{
-		areStatesEqual : (next, prev) =>
-		{
-			return (
-				prev.producers === next.producers &&
-				prev.me === next.me
-			);
-		}
-	}
-)(withStyles(styles, { withTheme: true })(MobileControls)));

app/src/components/Room.js

@@ -23,7 +23,6 @@ import VideoWindow from './VideoWindow/VideoWindow';
 import LockDialog from './AccessControl/LockDialog/LockDialog';
 import Settings from './Settings/Settings';
 import TopBar from './Controls/TopBar';
-import MobileControls from './Controls/MobileControls';
 
 const TIMEOUT = 5 * 1000;
 
@@ -206,10 +205,6 @@ class Room extends React.PureComponent
 
 				<View advancedMode={advancedMode} />
 
-				{ isMobile &&
-					<MobileControls />
-				}
-
 				{ room.lockDialogOpen &&
 					<LockDialog />
 				}