Fixed flipped video on screen sharing.

This commit is contained in:
Håvar Aambø Fosstveit
2019-06-25 15:00:22 +02:00
parent bfe6d14b1a
commit 9d385da30b
2 changed files with 30 additions and 31 deletions
+24 -27
View File
@@ -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}