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

Fixes to layout and buttons on peers

master
Håvar Aambø Fosstveit 2019-04-02 09:31:21 +02:00
parent a33e3df783
commit 66375ec8cf
2 changed files with 254 additions and 131 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

365
app/src/components/Containers/Peer.js
View File

@ -1,4 +1,4 @@
import React from 'react'; import React, { useState } from 'react';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import classnames from 'classnames'; import classnames from 'classnames';
@ -18,13 +18,35 @@ import FullScreenIcon from '@material-ui/icons/Fullscreen';
const styles = (theme) => const styles = (theme) =>
({ ({
root : root :
{
overflow : 'hidden',
flex : '0 0 auto',
margin : 6,
boxShadow : 'var(--peer-shadow)',
border : 'var(--peer-border)',
touchAction : 'none',
'&.webcam' :
{
order : 2
},
'&.screen' :
{
order : 1
},
'&.hover' :
{
boxShadow : '0px 1px 3px rgba(0, 0, 0, 0.05) inset, 0px 0px 8px rgba(82, 168, 236, 0.9)'
}
},
peerContainer :
{ {
width : '100%', width : '100%',
height : '100%', height : '100%',
display : 'flex', display : 'flex',
flexDirection : 'row', flexDirection : 'row',
flex : '100 100 auto', flex : '100 100 auto',
position : 'relative' position : 'relative',
touchAction : 'none'
}, },
fab : fab :
{ {
@ -58,7 +80,8 @@ const styles = (theme) =>
zIndex : 20, zIndex : 20,
opacity : 0, opacity : 0,
transition : 'opacity 0.3s', transition : 'opacity 0.3s',
'&:hover' : touchAction : 'none',
'&.hover' :
{ {
opacity : 1 opacity : 1
} }
@ -111,6 +134,16 @@ const styles = (theme) =>
const Peer = (props) => const Peer = (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 { const {
roomClient, roomClient,
advancedMode, advancedMode,
@ -157,136 +190,234 @@ const Peer = (props) =>
const smallScreen = useMediaQuery(theme.breakpoints.down('sm')); const smallScreen = useMediaQuery(theme.breakpoints.down('sm'));
return ( return (
<div <React.Fragment>
className={classnames(classes.root, { <div
screen : screenConsumer className={classnames(classes.root, 'webcam', hover ? 'hover' : null)}
})} onMouseOver={() => setHover(true)}
> onMouseOut={() => setHover(false)}
{ videoVisible && !webcamConsumer.supported ? onTouchStart={() =>
<div className={classes.incompatibleVideo}> {
<p>incompatible video</p> if (touchTimeout)
</div> clearTimeout(touchTimeout);
:null
}
{ !videoVisible ? setHover(true);
<div className={classes.pausedVideo}> }}
<p>this video is paused</p> onTouchEnd={() =>
</div> {
:null if (touchTimeout)
} clearTimeout(touchTimeout);
<div className={classnames(classes.viewContainer, 'webcam')} style={style}> touchTimeout = setTimeout(() =>
<div {
className={classes.controls} setHover(false);
> }, 2000);
<Fab }}
aria-label='Mute mic' >
className={classes.fab} <div className={classes.peerContainer}>
color={micEnabled ? 'default' : 'secondary'} { videoVisible && !webcamConsumer.supported ?
onClick={() => <div className={classes.incompatibleVideo}>
{ <p>incompatible video</p>
micEnabled ? </div>
roomClient.modifyPeerConsumer(peer.name, 'mic', true) :
roomClient.modifyPeerConsumer(peer.name, 'mic', false);
}}
>
{ micEnabled ?
<MicIcon />
:
<MicOffIcon />
}
</Fab>
{ !smallScreen ?
<Fab
aria-label='New window'
className={classes.fab}
disabled={
!videoVisible ||
(windowConsumer === webcamConsumer.id)
}
onClick={() =>
{
toggleConsumerWindow(webcamConsumer);
}}
>
<NewWindowIcon />
</Fab>
:null :null
} }
<Fab { !videoVisible ?
aria-label='Fullscreen' <div className={classes.pausedVideo}>
className={classes.fab} <p>this video is paused</p>
disabled={!videoVisible} </div>
onClick={() => :null
{ }
toggleConsumerFullscreen(webcamConsumer);
}}
>
<FullScreenIcon />
</Fab>
</div>
<PeerView <div className={classnames(classes.viewContainer)} style={style}>
advancedMode={advancedMode} <div
peer={peer} className={classnames(classes.controls, webcamHover ? 'hover' : null)}
volume={micConsumer ? micConsumer.volume : null} onMouseOver={() => setWebcamHover(true)}
videoTrack={webcamConsumer ? webcamConsumer.track : null} onMouseOut={() => setWebcamHover(false)}
videoVisible={videoVisible} onTouchStart={() =>
videoProfile={videoProfile} {
audioCodec={micConsumer ? micConsumer.codec : null} if (touchWebcamTimeout)
videoCodec={webcamConsumer ? webcamConsumer.codec : null} clearTimeout(touchWebcamTimeout);
/>
setWebcamHover(true);
}}
onTouchEnd={() =>
{
if (touchWebcamTimeout)
clearTimeout(touchWebcamTimeout);
touchWebcamTimeout = setTimeout(() =>
{
setWebcamHover(false);
}, 2000);
}}
>
<Fab
aria-label='Mute mic'
className={classes.fab}
color={micEnabled ? 'default' : 'secondary'}
onClick={() =>
{
micEnabled ?
roomClient.modifyPeerConsumer(peer.name, 'mic', true) :
roomClient.modifyPeerConsumer(peer.name, 'mic', false);
}}
>
{ micEnabled ?
<MicIcon />
:
<MicOffIcon />
}
</Fab>
{ !smallScreen ?
<Fab
aria-label='New window'
className={classes.fab}
disabled={
!videoVisible ||
(windowConsumer === webcamConsumer.id)
}
onClick={() =>
{
toggleConsumerWindow(webcamConsumer);
}}
>
<NewWindowIcon />
</Fab>
:null
}
<Fab
aria-label='Fullscreen'
className={classes.fab}
disabled={!videoVisible}
onClick={() =>
{
toggleConsumerFullscreen(webcamConsumer);
}}
>
<FullScreenIcon />
</Fab>
</div>
<PeerView
advancedMode={advancedMode}
peer={peer}
volume={micConsumer ? micConsumer.volume : null}
videoTrack={webcamConsumer ? webcamConsumer.track : null}
videoVisible={videoVisible}
videoProfile={videoProfile}
audioCodec={micConsumer ? micConsumer.codec : null}
videoCodec={webcamConsumer ? webcamConsumer.codec : null}
/>
</div>
</div>
</div> </div>
{ screenConsumer ? { screenConsumer ?
<div className={classnames(classes.viewContainer, 'screen')} style={style}> <div
<div className={classnames(classes.root, 'screen', hover ? 'hover' : null)}
className={classes.controls} onMouseOver={() => setHover(true)}
> onMouseOut={() => setHover(false)}
{ !smallScreen ? onTouchStart={() =>
<Fab {
aria-label='New window' if (touchTimeout)
className={classes.fab} clearTimeout(touchTimeout);
disabled={
!screenVisible || setHover(true);
(windowConsumer === screenConsumer.id) }}
} onTouchEnd={() =>
onClick={() => {
{ if (touchTimeout)
toggleConsumerWindow(screenConsumer); clearTimeout(touchTimeout);
}}
> touchTimeout = setTimeout(() =>
<NewWindowIcon /> {
</Fab> setHover(false);
}, 2000);
}}
>
<div className={classes.peerContainer}>
{ screenVisible && !screenConsumer.supported ?
<div className={classes.incompatibleVideo}>
<p>incompatible video</p>
</div>
:null :null
} }
<Fab { !screenVisible ?
aria-label='Fullscreen' <div className={classes.pausedVideo}>
className={classes.fab} <p>this video is paused</p>
disabled={!screenVisible} </div>
onClick={() => :null
{ }
toggleConsumerFullscreen(screenConsumer); <div className={classnames(classes.viewContainer)} style={style}>
}} <div
> className={classnames(classes.controls, screenHover ? 'hover' : null)}
<FullScreenIcon /> onMouseOver={() => setScreenHover(true)}
</Fab> onMouseOut={() => setScreenHover(false)}
onTouchStart={() =>
{
if (touchScreenTimeout)
clearTimeout(touchScreenTimeout);
setScreenHover(true);
}}
onTouchEnd={() =>
{
if (touchScreenTimeout)
clearTimeout(touchScreenTimeout);
touchScreenTimeout = setTimeout(() =>
{
setScreenHover(false);
}, 2000);
}}
>
{ !smallScreen ?
<Fab
aria-label='New window'
className={classes.fab}
disabled={
!screenVisible ||
(windowConsumer === screenConsumer.id)
}
onClick={() =>
{
toggleConsumerWindow(screenConsumer);
}}
>
<NewWindowIcon />
</Fab>
:null
}
<Fab
aria-label='Fullscreen'
className={classes.fab}
disabled={!screenVisible}
onClick={() =>
{
toggleConsumerFullscreen(screenConsumer);
}}
>
<FullScreenIcon />
</Fab>
</div>
<ScreenView
advancedMode={advancedMode}
screenTrack={screenConsumer ? screenConsumer.track : null}
screenVisible={screenVisible}
screenProfile={screenProfile}
screenCodec={screenConsumer ? screenConsumer.codec : null}
/>
</div>
</div> </div>
<ScreenView
advancedMode={advancedMode}
screenTrack={screenConsumer ? screenConsumer.track : null}
screenVisible={screenVisible}
screenProfile={screenProfile}
screenCodec={screenConsumer ? screenConsumer.codec : null}
/>
</div> </div>
:null :null
} }
</div> </React.Fragment>
); );
}; };

20
app/src/components/MeetingViews/Democratic.js
View File

@ -126,7 +126,6 @@ class Democratic extends React.PureComponent
{ {
const { const {
advancedMode, advancedMode,
activeSpeakerName,
amActiveSpeaker, amActiveSpeaker,
peers, peers,
spotlights, spotlights,
@ -143,7 +142,7 @@ class Democratic extends React.PureComponent
return ( return (
<div className={classes.root} ref={this.peersRef}> <div className={classes.root} ref={this.peersRef}>
<div <div
className={classnames(classes.peerContainer, 'me-handle', { className={classnames(classes.peerContainer, {
'active-speaker' : amActiveSpeaker 'active-speaker' : amActiveSpeaker
})} })}
> >
@ -157,19 +156,12 @@ class Democratic extends React.PureComponent
if (spotlights.find((spotlightsElement) => spotlightsElement === peerName)) if (spotlights.find((spotlightsElement) => spotlightsElement === peerName))
{ {
return ( return (
<div <Peer
key={peerName} key={peerName}
className={classnames(classes.peerContainer, { advancedMode={advancedMode}
'selected' : this.props.selectedPeerName === peerName, name={peerName}
'active-speaker' : peerName === activeSpeakerName style={style}
})} />
>
<Peer
advancedMode={advancedMode}
name={peerName}
style={style}
/>
</div>
); );
} }
else else