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

Clean up styling and use ONE set of controls regardless of platform

auto_join_3.3
Håvar Aambø Fosstveit 2020-04-03 10:02:23 +02:00
parent b5754bbf96
commit 4a273f0cd3
3 changed files with 119 additions and 302 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

244
app/src/components/Containers/Me.js
View File

@ -3,7 +3,6 @@ import { connect } from 'react-redux';
import { meProducersSelector } from '../Selectors'; import { meProducersSelector } from '../Selectors';
import { withRoomContext } from '../../RoomContext'; import { withRoomContext } from '../../RoomContext';
import { withStyles } from '@material-ui/core/styles'; import { withStyles } from '@material-ui/core/styles';
import useMediaQuery from '@material-ui/core/useMediaQuery';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import classnames from 'classnames'; import classnames from 'classnames';
import * as appPropTypes from '../appPropTypes'; import * as appPropTypes from '../appPropTypes';
@ -68,21 +67,16 @@ const styles = (theme) =>
}, },
controls : controls :
{ {
position : 'absolute', position : 'absolute',
width : '100%', width : '100%',
height : '100%', height : '100%',
backgroundColor : 'rgba(0, 0, 0, 0.3)', display : 'flex',
display : 'flex', flexDirection : 'column',
flexDirection : 'column', justifyContent : 'center',
justifyContent : 'center', alignItems : 'flex-end',
alignItems : 'flex-end', padding : theme.spacing(1),
padding : theme.spacing(1), zIndex : 21,
zIndex : 21, '& p' :
opacity : 1,
transition : 'opacity 0.3s',
touchAction : 'none',
pointerEvents : 'none',
'& p' :
{ {
position : 'absolute', position : 'absolute',
float : 'left', float : 'left',
@ -261,8 +255,6 @@ const Me = (props) =>
'margin' : spacing 'margin' : spacing
}; };
const smallScreen = useMediaQuery(theme.breakpoints.down('sm'));
return ( return (
<React.Fragment> <React.Fragment>
<div <div
@ -295,9 +287,9 @@ const Me = (props) =>
}} }}
style={spacingStyle} style={spacingStyle}
> >
<div className={classnames(classes.viewContainer)} style={style}> <div className={classes.viewContainer} style={style}>
<div <div
className={classnames(classes.controls)} className={classes.controls}
onMouseOver={() => setHover(true)} onMouseOver={() => setHover(true)}
onMouseOut={() => setHover(false)} onMouseOut={() => setHover(false)}
onTouchStart={() => onTouchStart={() =>
@ -318,124 +310,126 @@ const Me = (props) =>
}, 2000); }, 2000);
}} }}
> >
<p className={classnames(hover && 'hover')}> <p className={hover && 'hover'}>
<FormattedMessage <FormattedMessage
id='room.me' id='room.me'
defaultMessage='ME' defaultMessage='ME'
/> />
</p> </p>
<div className={classnames(classes.ptt, (micState ==='muted' && me.isSpeaking) ? 'enabled' : null)} > <div className={classnames(
classes.ptt,
(micState === 'muted' && me.isSpeaking) ? 'enabled' : null
)}
>
<FormattedMessage <FormattedMessage
id='me.mutedPTT' id='me.mutedPTT'
defaultMessage='You are muted, hold down SPACE-BAR to talk' defaultMessage='You are muted, hold down SPACE-BAR to talk'
/> />
</div> </div>
{ !me.isMobile && <React.Fragment>
<React.Fragment> <Tooltip title={micTip} placement='left'>
<Tooltip title={micTip} placement={smallScreen ? 'top' : 'left'}> <div>
<div> <Fab
<Fab aria-label={intl.formatMessage({
aria-label={intl.formatMessage({ id : 'device.muteAudio',
id : 'device.muteAudio', defaultMessage : 'Mute audio'
defaultMessage : 'Mute audio' })}
})} className={classes.fab}
className={classes.fab} disabled={!me.canSendMic || me.audioInProgress}
disabled={!me.canSendMic || me.audioInProgress} color={micState === 'on' ? 'default' : 'secondary'}
color={micState === 'on' ? 'default' : 'secondary'} size={smallButtons ? 'small' : 'large'}
size={smallButtons ? 'small' : 'large'} onClick={() =>
onClick={() => {
if (micState === 'off')
roomClient.enableMic();
else if (micState === 'on')
roomClient.muteMic();
else
roomClient.unmuteMic();
}}
>
{ micState === 'on' ?
<MicIcon />
:
<MicOffIcon />
}
</Fab>
</div>
</Tooltip>
<Tooltip title={webcamTip} placement='left'>
<div>
<Fab
aria-label={intl.formatMessage({
id : 'device.startVideo',
defaultMessage : 'Start video'
})}
className={classes.fab}
disabled={!me.canSendWebcam || me.webcamInProgress}
color={webcamState === 'on' ? 'default' : 'secondary'}
size={smallButtons ? 'small' : 'large'}
onClick={() =>
{
webcamState === 'on' ?
roomClient.disableWebcam() :
roomClient.enableWebcam();
}}
>
{ webcamState === 'on' ?
<VideoIcon />
:
<VideoOffIcon />
}
</Fab>
</div>
</Tooltip>
<Tooltip title={screenTip} placement='left'>
<div>
<Fab
aria-label={intl.formatMessage({
id : 'device.startScreenSharing',
defaultMessage : 'Start screen sharing'
})}
className={classes.fab}
disabled={
!canShareScreen ||
!me.canShareScreen ||
me.screenShareInProgress
}
color={screenState === 'on' ? 'primary' : 'default'}
size={smallButtons ? 'small' : 'large'}
onClick={() =>
{
switch (screenState)
{ {
if (micState === 'off') case 'on':
roomClient.enableMic();
else if (micState === 'on')
roomClient.muteMic();
else
roomClient.unmuteMic();
}}
>
{ micState === 'on' ?
<MicIcon />
:
<MicOffIcon />
}
</Fab>
</div>
</Tooltip>
<Tooltip title={webcamTip} placement={smallScreen ? 'top' : 'left'}>
<div>
<Fab
aria-label={intl.formatMessage({
id : 'device.startVideo',
defaultMessage : 'Start video'
})}
className={classes.fab}
disabled={!me.canSendWebcam || me.webcamInProgress}
color={webcamState === 'on' ? 'default' : 'secondary'}
size={smallButtons ? 'small' : 'large'}
onClick={() =>
{
webcamState === 'on' ?
roomClient.disableWebcam() :
roomClient.enableWebcam();
}}
>
{ webcamState === 'on' ?
<VideoIcon />
:
<VideoOffIcon />
}
</Fab>
</div>
</Tooltip>
<Tooltip title={screenTip} placement={smallScreen ? 'top' : 'left'}>
<div>
<Fab
aria-label={intl.formatMessage({
id : 'device.startScreenSharing',
defaultMessage : 'Start screen sharing'
})}
className={classes.fab}
disabled={
!canShareScreen ||
!me.canShareScreen ||
me.screenShareInProgress
}
color={screenState === 'on' ? 'primary' : 'default'}
size={smallButtons ? 'small' : 'large'}
onClick={() =>
{
switch (screenState)
{ {
case 'on': roomClient.disableScreenSharing();
{ break;
roomClient.disableScreenSharing(); }
break; case 'off':
} {
case 'off': roomClient.enableScreenSharing();
{ break;
roomClient.enableScreenSharing(); }
break; default:
} {
default: break;
{
break;
}
} }
}}
>
{ (screenState === 'on' || screenState === 'unsupported') &&
<ScreenOffIcon/>
} }
{ screenState === 'off' && }}
<ScreenIcon/> >
} { (screenState === 'on' || screenState === 'unsupported') &&
</Fab> <ScreenOffIcon/>
</div> }
</Tooltip> { screenState === 'off' &&
</React.Fragment> <ScreenIcon/>
} }
</Fab>
</div>
</Tooltip>
</React.Fragment>
</div> </div>
<VideoView <VideoView
@ -481,9 +475,9 @@ const Me = (props) =>
}} }}
style={spacingStyle} style={spacingStyle}
> >
<div className={classnames(classes.viewContainer)} style={style}> <div className={classes.viewContainer} style={style}>
<div <div
className={classnames(classes.controls, hover && 'hover')} className={classes.controls}
onMouseOver={() => setHover(true)} onMouseOver={() => setHover(true)}
onMouseOut={() => setHover(false)} onMouseOut={() => setHover(false)}
onTouchStart={() => onTouchStart={() =>
@ -505,7 +499,7 @@ const Me = (props) =>
}, 2000); }, 2000);
}} }}
> >
<p> <p className={hover && 'hover'}>
<FormattedMessage <FormattedMessage
id='room.me' id='room.me'
defaultMessage='ME' defaultMessage='ME'

172
app/src/components/Controls/MobileControls.js
View File

@ -1,172 +0,0 @@
import React from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { meProducersSelector } from '../Selectors';
import { withStyles } from '@material-ui/core/styles';
import * as appPropTypes from '../appPropTypes';
import { withRoomContext } from '../../RoomContext';
import Fab from '@material-ui/core/Fab';
import Tooltip from '@material-ui/core/Tooltip';
import MicIcon from '@material-ui/icons/Mic';
import MicOffIcon from '@material-ui/icons/MicOff';
import VideoIcon from '@material-ui/icons/Videocam';
import VideoOffIcon from '@material-ui/icons/VideocamOff';
const styles = (theme) =>
({
root :
{
position : 'fixed',
zIndex : 500,
display : 'flex',
flexDirection : 'row',
bottom : '0.5em',
left : '50%',
transform : 'translate(-50%, -0%)'
},
fab :
{
margin : theme.spacing(1)
}
});
const MobileControls = (props) =>
{
const {
roomClient,
me,
micProducer,
webcamProducer,
classes
} = props;
let micState;
let micTip;
if (!me.canSendMic)
{
micState = 'unsupported';
micTip = 'Audio unsupported';
}
else if (!micProducer)
{
micState = 'off';
micTip = 'Activate audio';
}
else if (!micProducer.locallyPaused && !micProducer.remotelyPaused)
{
micState = 'on';
micTip = 'Mute audio';
}
else
{
micState = 'muted';
micTip = 'Unmute audio';
}
let webcamState;
let webcamTip;
if (!me.canSendWebcam)
{
webcamState = 'unsupported';
webcamTip = 'Video unsupported';
}
else if (webcamProducer)
{
webcamState = 'on';
webcamTip = 'Stop video';
}
else
{
webcamState = 'off';
webcamTip = 'Start video';
}
return (
<div className={classes.root}>
<Tooltip title={micTip} placement='top'>
<div>
<Fab
aria-label='Mute mic'
className={classes.fab}
disabled={!me.canSendMic || me.audioInProgress}
color={micState === 'on' ? 'default' : 'secondary'}
size='large'
onClick={() =>
{
if (micState === 'off')
roomClient.enableMic();
else if (micState === 'on')
roomClient.muteMic();
else
roomClient.unmuteMic();
}}
>
{ micState === 'on' ?
<MicIcon />
:
<MicOffIcon />
}
</Fab>
</div>
</Tooltip>
<Tooltip title={webcamTip} placement='top'>
<div>
<Fab
aria-label='Mute video'
className={classes.fab}
disabled={!me.canSendWebcam || me.webcamInProgress}
color={webcamState === 'on' ? 'default' : 'secondary'}
size='large'
onClick={() =>
{
webcamState === 'on' ?
roomClient.disableWebcam() :
roomClient.enableWebcam();
}}
>
{ webcamState === 'on' ?
<VideoIcon />
:
<VideoOffIcon />
}
</Fab>
</div>
</Tooltip>
</div>
);
};
MobileControls.propTypes =
{
roomClient : PropTypes.any.isRequired,
me : appPropTypes.Me.isRequired,
micProducer : appPropTypes.Producer,
webcamProducer : appPropTypes.Producer,
classes : PropTypes.object.isRequired,
theme : PropTypes.object.isRequired
};
const mapStateToProps = (state) =>
({
...meProducersSelector(state),
me : state.me
});
export default withRoomContext(connect(
mapStateToProps,
null,
null,
{
areStatesEqual : (next, prev) =>
{
return (
prev.producers === next.producers &&
prev.me === next.me
);
}
}
)(withStyles(styles, { withTheme: true })(MobileControls)));

5
app/src/components/Room.js
View File

@ -23,7 +23,6 @@ import VideoWindow from './VideoWindow/VideoWindow';
import LockDialog from './AccessControl/LockDialog/LockDialog'; import LockDialog from './AccessControl/LockDialog/LockDialog';
import Settings from './Settings/Settings'; import Settings from './Settings/Settings';
import TopBar from './Controls/TopBar'; import TopBar from './Controls/TopBar';
import MobileControls from './Controls/MobileControls';
const TIMEOUT = 5 * 1000; const TIMEOUT = 5 * 1000;
@ -206,10 +205,6 @@ class Room extends React.PureComponent
<View advancedMode={advancedMode} /> <View advancedMode={advancedMode} />
{ isMobile &&
<MobileControls />
}
{ room.lockDialogOpen && { room.lockDialogOpen &&
<LockDialog /> <LockDialog />
} }