From 9d385da30bb03269adbdbd0251fa05fdfae2e418 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?H=C3=A5var=20Aamb=C3=B8=20Fosstveit?= <havar@fosstveit.net>
Date: Tue, 25 Jun 2019 15:00:22 +0200
Subject: [PATCH] Fixed flipped video on screen sharing.

---
 app/src/components/Containers/Me.js           | 51 +++++++++----------
 .../components/VideoContainers/VideoView.js   | 10 ++--
 2 files changed, 30 insertions(+), 31 deletions(-)

diff --git a/app/src/components/Containers/Me.js b/app/src/components/Containers/Me.js
index 8800b05..8d3e465 100644
--- a/app/src/components/Containers/Me.js
+++ b/app/src/components/Containers/Me.js
@@ -49,7 +49,8 @@ const styles = (theme) =>
 		},
 		fab :
 		{
-			margin : theme.spacing(1)
+			margin        : theme.spacing(1),
+			pointerEvents : 'auto'
 		},
 		viewContainer :
 		{
@@ -72,6 +73,7 @@ const styles = (theme) =>
 			opacity         : 0,
 			transition      : 'opacity 0.3s',
 			touchAction     : 'none',
+			pointerEvents   : 'none',
 			'&.hover'       :
 			{
 				opacity : 1
@@ -93,15 +95,9 @@ const styles = (theme) =>
 const Me = (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,
 		me,
@@ -236,24 +232,24 @@ const Me = (props) =>
 			>
 				<div className={classnames(classes.viewContainer)} style={style}>
 					<div
-						className={classnames(classes.controls, webcamHover ? 'hover' : null)}
-						onMouseOver={() => setWebcamHover(true)}
-						onMouseOut={() => setWebcamHover(false)}
+						className={classnames(classes.controls, hover ? 'hover' : null)}
+						onMouseOver={() => setHover(true)}
+						onMouseOut={() => setHover(false)}
 						onTouchStart={() =>
 						{
-							if (touchWebcamTimeout)
-								clearTimeout(touchWebcamTimeout);
+							if (touchTimeout)
+								clearTimeout(touchTimeout);
 
-							setWebcamHover(true);
+							setHover(true);
 						}}
 						onTouchEnd={() =>
 						{
-							if (touchWebcamTimeout)
-								clearTimeout(touchWebcamTimeout);
+							if (touchTimeout)
+								clearTimeout(touchTimeout);
 
-							touchWebcamTimeout = setTimeout(() =>
+							touchTimeout = setTimeout(() =>
 							{
-								setWebcamHover(false);
+								setHover(false);
 							}, 2000);
 						}}
 					>
@@ -394,25 +390,25 @@ const Me = (props) =>
 				>
 					<div className={classnames(classes.viewContainer)} style={style}>
 						<div
-							className={classnames(classes.controls, screenHover ? 'hover' : null)}
-							onMouseOver={() => setScreenHover(true)}
-							onMouseOut={() => setScreenHover(false)}
+							className={classnames(classes.controls, hover ? 'hover' : null)}
+							onMouseOver={() => setHover(true)}
+							onMouseOut={() => setHover(false)}
 							onTouchStart={() =>
 							{
-								if (touchScreenTimeout)
-									clearTimeout(touchScreenTimeout);
+								if (touchTimeout)
+									clearTimeout(touchTimeout);
 			
-								setScreenHover(true);
+								setHover(true);
 							}}
 							onTouchEnd={() =>
 							{
 
-								if (touchScreenTimeout)
-									clearTimeout(touchScreenTimeout);
+								if (touchTimeout)
+									clearTimeout(touchTimeout);
 			
-								touchScreenTimeout = setTimeout(() =>
+								touchTimeout = setTimeout(() =>
 								{
-									setScreenHover(false);
+									setHover(false);
 								}, 2000);
 							}}
 						>
@@ -421,6 +417,7 @@ const Me = (props) =>
 						
 						<VideoView
 							isMe
+							isScreen
 							advancedMode={advancedMode}
 							videoContain
 							videoTrack={screenProducer ? screenProducer.track : null}
diff --git a/app/src/components/VideoContainers/VideoView.js b/app/src/components/VideoContainers/VideoView.js
index 6fa1994..ec1719c 100644
--- a/app/src/components/VideoContainers/VideoView.js
+++ b/app/src/components/VideoContainers/VideoView.js
@@ -27,7 +27,7 @@ const styles = (theme) =>
 			transitionProperty : 'opacity',
 			transitionDuration : '.15s',
 			backgroundColor    : 'var(--peer-video-bg-color)',
-			'&.is-me'          :
+			'&.isMe'           :
 			{
 				transform : 'scaleX(-1)'
 			},
@@ -142,6 +142,7 @@ class VideoView extends React.PureComponent
 	{
 		const {
 			isMe,
+			isScreen,
 			peer,
 			displayName,
 			showPeerInfo,
@@ -229,7 +230,7 @@ class VideoView extends React.PureComponent
 					ref='video'
 					className={classnames(classes.video, {
 						hidden  : !videoVisible,
-						'is-me' : isMe,
+						'isMe' : isMe && !isScreen,
 						loading : videoProfile === 'none',
 						contain : videoContain
 					})}
@@ -320,8 +321,9 @@ class VideoView extends React.PureComponent
 
 VideoView.propTypes =
 {
-	isMe : PropTypes.bool,
-	peer : PropTypes.oneOfType(
+	isMe     : PropTypes.bool,
+	isScreen : PropTypes.bool,
+	peer     : PropTypes.oneOfType(
 		[ appPropTypes.Me, appPropTypes.Peer ]),
 	displayName         : PropTypes.string,
 	showPeerInfo        : PropTypes.bool,