Fixed layout in Me container when screen-sharing. Made video object-fit contain for screen-sharing.

app/src/components/Containers/Me.js

@@ -2,10 +2,8 @@ import React from 'react';
 import { connect } from 'react-redux';
 import { withRoomContext } from '../../RoomContext';
 import { withStyles } from '@material-ui/core/styles';
-import ReactTooltip from 'react-tooltip';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
-import { getDeviceInfo } from 'mediasoup-client';
 import * as appPropTypes from '../appPropTypes';
 import VideoView from '../VideoContainers/VideoView';
 
@@ -45,72 +43,34 @@ const styles = () =>
 		}
 	});
 
-class Me extends React.PureComponent
+const Me = (props) =>
 {
-	state = {
+	const {
-		controlsVisible : false
+		roomClient,
-	};
+		me,
+		activeSpeaker,
+		style,
+		advancedMode,
+		micProducer,
+		webcamProducer,
+		screenProducer,
+		classes
+	} = props;
 
-	handleMouseOver = () =>
+	const videoVisible = (
-	{
+		Boolean(webcamProducer) &&
-		this.setState({
+		!webcamProducer.locallyPaused &&
-			controlsVisible : true
+		!webcamProducer.remotelyPaused
-		});
+	);
-	};
 
-	handleMouseOut = () =>
+	const screenVisible = (
-	{
+		Boolean(screenProducer) &&
-		this.setState({
+		!screenProducer.locallyPaused &&
-			controlsVisible : false
+		!screenProducer.remotelyPaused
-		});
+	);
-	};
 
-	constructor(props)
+	return (
-	{
+		<React.Fragment>
-		super(props);
-
-		this._mounted = false;
-		this._rootNode = null;
-		this._tooltip = true;
-
-		// TODO: Issue when using react-tooltip in Edge:
-		//   https://github.com/wwayne/react-tooltip/issues/328
-		if (getDeviceInfo().flag === 'msedge')
-			this._tooltip = false;
-	}
-
-	render()
-	{
-		const {
-			roomClient,
-			me,
-			activeSpeaker,
-			style,
-			advancedMode,
-			micProducer,
-			webcamProducer,
-			screenProducer,
-			classes
-		} = this.props;
-
-		const videoVisible = (
-			Boolean(webcamProducer) &&
-			!webcamProducer.locallyPaused &&
-			!webcamProducer.remotelyPaused
-		);
-
-		const screenVisible = (
-			Boolean(screenProducer) &&
-			!screenProducer.locallyPaused &&
-			!screenProducer.remotelyPaused
-		);
-
-		let tip;
-
-		if (!me.displayNameSet)
-			tip = 'Click on your name to change it';
-
-		return (
 			<div
 				className={
 					classnames(
@@ -118,12 +78,6 @@ class Me extends React.PureComponent
 						activeSpeaker ? 'active-speaker' : null
 					)
 				}
-				ref={(node) => (this._rootNode = node)}
-				data-tip={tip}
-				data-tip-disable={!tip}
-				data-type='dark'
-				onMouseOver={this.handleMouseOver}
-				onMouseOut={this.handleMouseOut}
 			>
 				<div className={classnames(classes.viewContainer, 'webcam')} style={style}>
 					<VideoView
@@ -143,53 +97,25 @@ class Me extends React.PureComponent
 						}}
 					/>
 				</div>
-
+			</div>
-				{ screenProducer ?
+			{ screenProducer ?
+				<div className={classes.root}>
 					<div className={classnames(classes.viewContainer, 'screen')} style={style}>
 						<VideoView
 							isMe
 							advancedMode={advancedMode}
+							videoContain
 							videoTrack={screenProducer ? screenProducer.track : null}
 							videoVisible={screenVisible}
 							videoCodec={screenProducer ? screenProducer.codec : null}
 						/>
 					</div>
-					:null
+				</div>
-				}
+				:null
-			</div>
+			}
-		);
+		</React.Fragment>
-	}
+	);
-
+};
-	componentDidMount()
-	{
-		this._mounted = true;
-
-		if (this._tooltip)
-		{
-			setTimeout(() =>
-			{
-				if (!this._mounted || this.props.me.displayNameSet)
-					return;
-
-				ReactTooltip.show(this._rootNode);
-			}, 4000);
-		}
-	}
-
-	componentWillUnmount()
-	{
-		this._mounted = false;
-	}
-
-	componentWillReceiveProps(nextProps)
-	{
-		if (this._tooltip)
-		{
-			if (nextProps.me.displayNameSet)
-				ReactTooltip.hide(this._rootNode);
-		}
-	}
-}
 
 Me.propTypes =
 {

app/src/components/Containers/Peer.js

@@ -59,8 +59,7 @@ const styles = (theme) =>
 			},
 			'&.screen' :
 			{
-				order    : 1,
+				order : 1
-				maxWidth : '50%'
 			}
 		},
 		controls :
@@ -391,6 +390,7 @@ const Peer = (props) =>
 							</div>
 							<VideoView
 								advancedMode={advancedMode}
+								videoContain
 								videoTrack={screenConsumer ? screenConsumer.track : null}
 								videoVisible={screenVisible}
 								videoProfile={screenProfile}

app/src/components/VideoContainers/VideoView.js

@@ -39,6 +39,10 @@ const styles = () =>
 			'&.loading' :
 			{
 				filter : 'blur(5px)'
+			},
+			'&.contain' :
+			{
+				objectFit : 'contain'
 			}
 		},
 		info :
@@ -237,6 +241,7 @@ class VideoView extends React.PureComponent
 			peer,
 			volume,
 			showPeerInfo,
+			videoContain,
 			advancedMode,
 			videoVisible,
 			videoProfile,
@@ -317,7 +322,8 @@ class VideoView extends React.PureComponent
 					className={classnames(classes.video, {
 						hidden  : !videoVisible,
 						'is-me' : isMe,
-						loading : videoProfile === 'none'
+						loading : videoProfile === 'none',
+						contain : videoContain
 					})}
 					autoPlay
 					playsInline
@@ -416,6 +422,7 @@ VideoView.propTypes =
 	peer : PropTypes.oneOfType(
 		[ appPropTypes.Me, appPropTypes.Peer ]),
 	showPeerInfo        : PropTypes.bool,
+	videoContain        : PropTypes.bool,
 	advancedMode        : PropTypes.bool,
 	audioTrack          : PropTypes.any,
 	volume              : PropTypes.number,