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 : fab :
{ {
margin : theme.spacing(1) margin : theme.spacing(1),
pointerEvents : 'auto'
}, },
viewContainer : viewContainer :
{ {
@ -72,6 +73,7 @@ const styles = (theme) =>
opacity : 0, opacity : 0,
transition : 'opacity 0.3s', transition : 'opacity 0.3s',
touchAction : 'none', touchAction : 'none',
pointerEvents : 'none',
'&.hover' : '&.hover' :
{ {
opacity : 1 opacity : 1
@ -93,15 +95,9 @@ const styles = (theme) =>
const Me = (props) => const Me = (props) =>
{ {
const [ hover, setHover ] = useState(false); const [ hover, setHover ] = useState(false);
const [ webcamHover, setWebcamHover ] = useState(false);
const [ screenHover, setScreenHover ] = useState(false);
let touchTimeout = null; let touchTimeout = null;
let touchWebcamTimeout = null;
let touchScreenTimeout = null;
const { const {
roomClient, roomClient,
me, me,
@ -236,24 +232,24 @@ const Me = (props) =>
> >
<div className={classnames(classes.viewContainer)} style={style}> <div className={classnames(classes.viewContainer)} style={style}>
<div <div
className={classnames(classes.controls, webcamHover ? 'hover' : null)} className={classnames(classes.controls, hover ? 'hover' : null)}
onMouseOver={() => setWebcamHover(true)} onMouseOver={() => setHover(true)}
onMouseOut={() => setWebcamHover(false)} onMouseOut={() => setHover(false)}
onTouchStart={() => onTouchStart={() =>
{ {
if (touchWebcamTimeout) if (touchTimeout)
clearTimeout(touchWebcamTimeout); clearTimeout(touchTimeout);
setWebcamHover(true); setHover(true);
}} }}
onTouchEnd={() => onTouchEnd={() =>
{ {
if (touchWebcamTimeout) if (touchTimeout)
clearTimeout(touchWebcamTimeout); clearTimeout(touchTimeout);
touchWebcamTimeout = setTimeout(() => touchTimeout = setTimeout(() =>
{ {
setWebcamHover(false); setHover(false);
}, 2000); }, 2000);
}} }}
> >
@ -394,25 +390,25 @@ const Me = (props) =>
> >
<div className={classnames(classes.viewContainer)} style={style}> <div className={classnames(classes.viewContainer)} style={style}>
<div <div
className={classnames(classes.controls, screenHover ? 'hover' : null)} className={classnames(classes.controls, hover ? 'hover' : null)}
onMouseOver={() => setScreenHover(true)} onMouseOver={() => setHover(true)}
onMouseOut={() => setScreenHover(false)} onMouseOut={() => setHover(false)}
onTouchStart={() => onTouchStart={() =>
{ {
if (touchScreenTimeout) if (touchTimeout)
clearTimeout(touchScreenTimeout); clearTimeout(touchTimeout);
setScreenHover(true); setHover(true);
}} }}
onTouchEnd={() => onTouchEnd={() =>
{ {
if (touchScreenTimeout) if (touchTimeout)
clearTimeout(touchScreenTimeout); clearTimeout(touchTimeout);
touchScreenTimeout = setTimeout(() => touchTimeout = setTimeout(() =>
{ {
setScreenHover(false); setHover(false);
}, 2000); }, 2000);
}} }}
> >
@ -421,6 +417,7 @@ const Me = (props) =>
<VideoView <VideoView
isMe isMe
isScreen
advancedMode={advancedMode} advancedMode={advancedMode}
videoContain videoContain
videoTrack={screenProducer ? screenProducer.track : null} videoTrack={screenProducer ? screenProducer.track : null}

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

@ -27,7 +27,7 @@ const styles = (theme) =>
transitionProperty : 'opacity', transitionProperty : 'opacity',
transitionDuration : '.15s', transitionDuration : '.15s',
backgroundColor : 'var(--peer-video-bg-color)', backgroundColor : 'var(--peer-video-bg-color)',
'&.is-me' : '&.isMe' :
{ {
transform : 'scaleX(-1)' transform : 'scaleX(-1)'
}, },
@ -142,6 +142,7 @@ class VideoView extends React.PureComponent
{ {
const { const {
isMe, isMe,
isScreen,
peer, peer,
displayName, displayName,
showPeerInfo, showPeerInfo,
@ -229,7 +230,7 @@ class VideoView extends React.PureComponent
ref='video' ref='video'
className={classnames(classes.video, { className={classnames(classes.video, {
hidden : !videoVisible, hidden : !videoVisible,
'is-me' : isMe, 'isMe' : isMe && !isScreen,
loading : videoProfile === 'none', loading : videoProfile === 'none',
contain : videoContain contain : videoContain
})} })}
@ -321,6 +322,7 @@ class VideoView extends React.PureComponent
VideoView.propTypes = VideoView.propTypes =
{ {
isMe : PropTypes.bool, isMe : PropTypes.bool,
isScreen : PropTypes.bool,
peer : PropTypes.oneOfType( peer : PropTypes.oneOfType(
[ appPropTypes.Me, appPropTypes.Peer ]), [ appPropTypes.Me, appPropTypes.Peer ]),
displayName : PropTypes.string, displayName : PropTypes.string,