Briq
/
multiparty-meeting
7
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Fixed flipped video on screen sharing.

master
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
app/src/components/Containers/Me.js
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}

10
app/src/components/VideoContainers/VideoView.js
View File

@ -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,