Moved Me window into view with other Peer containers.

app/src/components/Containers/Me.js

@@ -9,10 +9,6 @@ import { getDeviceInfo } from 'mediasoup-client';
 import * as appPropTypes from '../appPropTypes';
 import PeerView from '../VideoContainers/PeerView';
 import ScreenView from '../VideoContainers/ScreenView';
-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 = () =>
 	({
@@ -36,53 +32,6 @@ const styles = () =>
 			{
 				order : 1
 			}
-		},
-		controls :
-		{
-			position      : 'absolute',
-			right         : 0,
-			top           : 0,
-			display       : 'flex',
-			flexDirection : 'row',
-			padding       : '0.4vmin',
-			zIndex        : 20,
-			opacity       : 0,
-			transition    : 'opacity 0.3s',
-			'&.visible'   :
-			{
-				opacity : 1
-			}
-		},
-		button :
-		{
-			flex            : '0 0 auto',
-			margin          : '0.2vmin',
-			borderRadius    : 2,
-			opacity         : 0.85,
-			width           : 'var(--media-control-button-size)',
-			height          : 'var(--media-control-button-size)',
-			backgroundColor : 'var(--media-control-button-color)',
-			'&:hover'       :
-			{
-				opacity : 1
-			},
-			'&.unsupported' :
-			{
-				pointerEvents : 'none'
-			},
-			'&.disabled' :
-			{
-				pointerEvents   : 'none',
-				backgroundColor : 'var(--media-control-botton-disabled)'
-			},
-			'&.on' :
-			{
-				backgroundColor : 'var(--media-control-botton-on)'
-			},
-			'&.off' :
-			{
-				backgroundColor : 'var(--media-control-botton-off)'
-			}
 		}
 	});
 
@@ -124,8 +73,8 @@ class Me extends React.PureComponent
 	{
 		const {
 			roomClient,
-			connected,
 			me,
+			style,
 			advancedMode,
 			micProducer,
 			webcamProducer,
@@ -133,26 +82,6 @@ class Me extends React.PureComponent
 			classes
 		} = this.props;
 
-		let micState;
-
-		if (!me.canSendMic)
-			micState = 'unsupported';
-		else if (!micProducer)
-			micState = 'unsupported';
-		else if (!micProducer.locallyPaused && !micProducer.remotelyPaused)
-			micState = 'on';
-		else
-			micState = 'off';
-
-		let webcamState;
-
-		if (!me.canSendWebcam)
-			webcamState = 'unsupported';
-		else if (webcamProducer)
-			webcamState = 'on';
-		else
-			webcamState = 'off';
-
 		const videoVisible = (
 			Boolean(webcamProducer) &&
 			!webcamProducer.locallyPaused &&
@@ -180,57 +109,7 @@ class Me extends React.PureComponent
 				onMouseOver={this.handleMouseOver}
 				onMouseOut={this.handleMouseOut}
 			>
-				<div className={classnames(classes.viewContainer, 'webcam')}>
-					{ connected ?
-						<div className={classnames(classes.controls, 'visible')}>
-							<div
-								data-tip='keyboard shortcut: &lsquo;m&lsquo;'
-								data-type='dark'
-								data-place='bottom'
-								data-for='me'
-								className={classnames(classes.button, 'mic', micState, {
-									disabled : me.audioInProgress,
-									visible  : micState === 'off' || this.state.controlsVisible
-								})}
-								onClick={() =>
-								{
-									micState === 'on' ?
-										roomClient.muteMic() :
-										roomClient.unmuteMic();
-								}}
-							>
-								{ micState === 'on' ?
-									<MicIcon />
-									:
-									<MicOffIcon />
-								}
-							</div>
-							<ReactTooltip
-								id='me'
-								effect='solid'
-							/>
-							<div
-								className={classnames(classes.button, 'webcam', webcamState, {
-									disabled : me.webcamInProgress,
-									visible  : webcamState === 'off' || this.state.controlsVisible
-								})}
-								onClick={() =>
-								{
-									webcamState === 'on' ?
-										roomClient.disableWebcam() :
-										roomClient.enableWebcam();
-								}}
-							>
-								{ webcamState === 'on' ?
-									<VideoIcon />
-									:
-									<VideoOffIcon />
-								}
-							</div>
-						</div>
-						:null
-					}
-
+				<div className={classnames(classes.viewContainer, 'webcam')} style={style}>
 					<PeerView
 						isMe
 						advancedMode={advancedMode}
@@ -249,7 +128,7 @@ class Me extends React.PureComponent
 				</div>
 
 				{ screenProducer ?
-					<div className={classnames(classes.viewContainer, 'screen')}>
+					<div className={classnames(classes.viewContainer, 'screen')} style={style}>
 						<ScreenView
 							isMe
 							advancedMode={advancedMode}
@@ -304,6 +183,7 @@ Me.propTypes =
 	micProducer    : appPropTypes.Producer,
 	webcamProducer : appPropTypes.Producer,
 	screenProducer : appPropTypes.Producer,
+	style          : PropTypes.object,
 	classes        : PropTypes.object.isRequired
 };
 

app/src/components/Containers/Peer.js

@@ -5,15 +5,17 @@ import classnames from 'classnames';
 import * as appPropTypes from '../appPropTypes';
 import { withRoomContext } from '../../RoomContext';
 import { withStyles } from '@material-ui/core/styles';
+import { unstable_useMediaQuery as useMediaQuery } from '@material-ui/core/useMediaQuery';
 import * as stateActions from '../../actions/stateActions';
 import PeerView from '../VideoContainers/PeerView';
 import ScreenView from '../VideoContainers/ScreenView';
+import Fab from '@material-ui/core/Fab';
 import MicIcon from '@material-ui/icons/Mic';
 import MicOffIcon from '@material-ui/icons/MicOff';
 import NewWindowIcon from '@material-ui/icons/OpenInNew';
 import FullScreenIcon from '@material-ui/icons/Fullscreen';
 
-const styles = () =>
+const styles = (theme) =>
 	({
 		root :
 		{
@@ -24,6 +26,10 @@ const styles = () =>
 			flex          : '100 100 auto',
 			position      : 'relative'
 		},
+		fab :
+		{
+			margin : theme.spacing.unit
+		},
 		viewContainer :
 		{
 			position   : 'relative',
@@ -40,56 +46,23 @@ const styles = () =>
 		},
 		controls :
 		{
-			position       : 'absolute',
-			right          : 0,
-			top            : 0,
-			display        : 'flex',
-			flexDirection  : 'row',
-			justifyContent : 'flex-start',
-			alignItems     : 'center',
-			padding        : '0.4vmin',
-			zIndex         : 20,
-			opacity        : 0,
-			transition     : 'opacity 0.3s',
-			'&.visible'    :
+			position        : 'absolute',
+			width           : '100%',
+			height          : '100%',
+			backgroundColor : 'rgba(0, 0, 0, 0.3)',
+			display         : 'flex',
+			flexDirection   : 'row',
+			justifyContent  : 'center',
+			alignItems      : 'center',
+			padding         : '0.4vmin',
+			zIndex          : 20,
+			opacity         : 0,
+			transition      : 'opacity 0.3s',
+			'&:hover'       :
 			{
 				opacity : 1
 			}
 		},
-		button :
-		{
-			flex               : '0 0 auto',
-			margin             : '0.2vmin',
-			borderRadius       : 2,
-			opacity            : 0.85,
-			width              : 'var(--media-control-button-size)',
-			height             : 'var(--media-control-button-size)',
-			backgroundColor    : 'var(--media-control-button-color)',
-			cursor             : 'pointer',
-			transitionProperty : 'opacity, background-color',
-			transitionDuration : '0.15s',
-			'&:hover'          :
-			{
-				opacity : 1
-			},
-			'&.unsupported' :
-			{
-				pointerEvents : 'none'
-			},
-			'&.disabled' :
-			{
-				pointerEvents   : 'none',
-				backgroundColor : 'var(--media-control-botton-disabled)'
-			},
-			'&.on' :
-			{
-				backgroundColor : 'var(--media-control-botton-on)'
-			},
-			'&.off' :
-			{
-				backgroundColor : 'var(--media-control-botton-off)'
-			}
-		},
 		pausedVideo :
 		{
 			position       : 'absolute',
@@ -136,207 +109,186 @@ const styles = () =>
 		}
 	});
 
-class Peer extends React.PureComponent
+const Peer = (props) =>
 {
-	state = {
-		controlsVisible : false
-	};
+	const {
+		roomClient,
+		advancedMode,
+		peer,
+		micConsumer,
+		webcamConsumer,
+		screenConsumer,
+		toggleConsumerFullscreen,
+		toggleConsumerWindow,
+		style,
+		windowConsumer,
+		classes,
+		theme
+	} = props;
 
-	handleMouseOver = () =>
-	{
-		this.setState({
-			controlsVisible : true
-		});
-	};
+	const micEnabled = (
+		Boolean(micConsumer) &&
+		!micConsumer.locallyPaused &&
+		!micConsumer.remotelyPaused
+	);
 
-	handleMouseOut = () =>
-	{
-		this.setState({
-			controlsVisible : false
-		});
-	};
+	const videoVisible = (
+		Boolean(webcamConsumer) &&
+		!webcamConsumer.locallyPaused &&
+		!webcamConsumer.remotelyPaused
+	);
 
-	render()
-	{
-		const {
-			roomClient,
-			advancedMode,
-			peer,
-			micConsumer,
-			webcamConsumer,
-			screenConsumer,
-			toggleConsumerFullscreen,
-			toggleConsumerWindow,
-			style,
-			windowConsumer,
-			classes
-		} = this.props;
+	const screenVisible = (
+		Boolean(screenConsumer) &&
+		!screenConsumer.locallyPaused &&
+		!screenConsumer.remotelyPaused
+	);
 
-		const micEnabled = (
-			Boolean(micConsumer) &&
-			!micConsumer.locallyPaused &&
-			!micConsumer.remotelyPaused
-		);
+	let videoProfile;
 
-		const videoVisible = (
-			Boolean(webcamConsumer) &&
-			!webcamConsumer.locallyPaused &&
-			!webcamConsumer.remotelyPaused
-		);
+	if (webcamConsumer)
+		videoProfile = webcamConsumer.profile;
 
-		const screenVisible = (
-			Boolean(screenConsumer) &&
-			!screenConsumer.locallyPaused &&
-			!screenConsumer.remotelyPaused
-		);
+	let screenProfile;
 
-		let videoProfile;
+	if (screenConsumer)
+		screenProfile = screenConsumer.profile;
 
-		if (webcamConsumer)
-			videoProfile = webcamConsumer.profile;
+	const smallScreen = useMediaQuery(theme.breakpoints.down('sm'));
 
-		let screenProfile;
+	return (
+		<div
+			className={classnames(classes.root, {
+				screen : screenConsumer
+			})}
+		>
+			{ videoVisible && !webcamConsumer.supported ?
+				<div className={classes.incompatibleVideo}>
+					<p>incompatible video</p>
+				</div>
+				:null
+			}
 
-		if (screenConsumer)
-			screenProfile = screenConsumer.profile;
+			{ !videoVisible ?
+				<div className={classes.pausedVideo}>
+					<p>this video is paused</p>
+				</div>
+				:null
+			}
 
-		return (
-			<div
-				className={classnames(classes.root, {
-					screen : screenConsumer
-				})}
-				onMouseOver={this.handleMouseOver}
-				onMouseOut={this.handleMouseOut}
-			>
-				{ videoVisible && !webcamConsumer.supported ?
-					<div className={classes.incompatibleVideo}>
-						<p>incompatible video</p>
-					</div>
-					:null
-				}
-
-				{ !videoVisible ?
-					<div className={classes.pausedVideo}>
-						<p>this video is paused</p>
-					</div>
-					:null
-				}
-
-				<div className={classnames(classes.viewContainer, 'webcam')} style={style}>
-					<div
-						className={classnames(classes.controls, {
-							visible : this.state.controlsVisible
-						})}
+			<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);
+						}}
 					>
-						<div
-							className={classnames(classes.button, {
-								on       : micEnabled,
-								off      : !micEnabled,
-								disabled : peer.peerAudioInProgress
-							})}
-							onClick={(e) =>
-							{
-								e.stopPropagation();
-								micEnabled ?
-									roomClient.modifyPeerConsumer(peer.name, 'mic', true) :
-									roomClient.modifyPeerConsumer(peer.name, 'mic', false);
-							}}
-						>
-							{ micEnabled ?
-								<MicIcon />
-								:
-								<MicOffIcon />
-							}
-						</div>
+						{ micEnabled ?
+							<MicIcon />
+							:
+							<MicOffIcon />
+						}
+					</Fab>
 
-						<div
-							className={classnames(classes.button, {
-								disabled : !videoVisible ||
-									(windowConsumer === webcamConsumer.id)
-							})}
-							onClick={(e) =>
+					{ !smallScreen ?
+						<Fab
+							aria-label='New window'
+							className={classes.fab}
+							disabled={
+								!videoVisible ||
+								(windowConsumer === webcamConsumer.id)
+							}
+							onClick={() =>
 							{
-								e.stopPropagation();
 								toggleConsumerWindow(webcamConsumer);
 							}}
 						>
 							<NewWindowIcon />
-						</div>
+						</Fab>
+						:null
+					}
 
-						<div
-							className={classnames(classes.button, 'fullscreen', {
-								disabled : !videoVisible
-							})}
-							onClick={(e) =>
-							{
-								e.stopPropagation();
-								toggleConsumerFullscreen(webcamConsumer);
-							}}
-						>
-							<FullScreenIcon />
-						</div>
-					</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}
-					/>
+					<Fab
+						aria-label='Fullscreen'
+						className={classes.fab}
+						disabled={!videoVisible}
+						onClick={() =>
+						{
+							toggleConsumerFullscreen(webcamConsumer);
+						}}
+					>
+						<FullScreenIcon />
+					</Fab>
 				</div>
 
-				{ screenConsumer ?
-					<div className={classnames(classes.viewContainer, 'screen')} style={style}>
-						<div
-							className={classnames(classes.controls, {
-								visible : this.state.controlsVisible
-							})}
-						>
-							<div
-								className={classnames(classes.button, 'newwindow', {
-									disabled : !screenVisible ||
-										(windowConsumer === screenConsumer.id)
-								})}
-								onClick={(e) =>
+				<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>
+
+			{ 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={() =>
 								{
-									e.stopPropagation();
 									toggleConsumerWindow(screenConsumer);
 								}}
 							>
 								<NewWindowIcon />
-							</div>
+							</Fab>
+							:null
+						}
 
-							<div
-								className={classnames(classes.button, 'fullscreen', {
-									disabled : !screenVisible
-								})}
-								onClick={(e) =>
-								{
-									e.stopPropagation();
-									toggleConsumerFullscreen(screenConsumer);
-								}}
-							>
-								<FullScreenIcon />
-							</div>
-						</div>
-						<ScreenView
-							advancedMode={advancedMode}
-							screenTrack={screenConsumer ? screenConsumer.track : null}
-							screenVisible={screenVisible}
-							screenProfile={screenProfile}
-							screenCodec={screenConsumer ? screenConsumer.codec : null}
-						/>
+						<Fab
+							aria-label='Fullscreen'
+							className={classes.fab}
+							disabled={!screenVisible}
+							onClick={() =>
+							{
+								toggleConsumerFullscreen(screenConsumer);
+							}}
+						>
+							<FullScreenIcon />
+						</Fab>
 					</div>
-					:null
-				}
-			</div>
-		);
-	}
-}
+					<ScreenView
+						advancedMode={advancedMode}
+						screenTrack={screenConsumer ? screenConsumer.track : null}
+						screenVisible={screenVisible}
+						screenProfile={screenProfile}
+						screenCodec={screenConsumer ? screenConsumer.codec : null}
+					/>
+				</div>
+				:null
+			}
+		</div>
+	);
+};
 
 Peer.propTypes =
 {
@@ -351,7 +303,8 @@ Peer.propTypes =
 	style                    : PropTypes.object,
 	toggleConsumerFullscreen : PropTypes.func.isRequired,
 	toggleConsumerWindow     : PropTypes.func.isRequired,
-	classes                  : PropTypes.object
+	classes                  : PropTypes.object.isRequired,
+	theme                    : PropTypes.object.isRequired
 };
 
 const mapStateToProps = (state, { name }) =>
@@ -394,4 +347,4 @@ const mapDispatchToProps = (dispatch) =>
 export default withRoomContext(connect(
 	mapStateToProps,
 	mapDispatchToProps
-)(withStyles(styles)(Peer)));
+)(withStyles(styles, { withTheme: true })(Peer)));