Removed sidebar. Moved buttons to me-view and top-bar. Added text hint on me-view.
Håvar Aambø Fosstveit
parent
66b922d0b3
commit
9acf0056ac
|
|
@ -1,19 +1,27 @@
|
|||
import React from 'react';
|
||||
import React, { useState } from 'react';
|
||||
import { connect } from 'react-redux';
|
||||
import { meProducersSelector } from '../Selectors';
|
||||
import { withRoomContext } from '../../RoomContext';
|
||||
import { withStyles } from '@material-ui/core/styles';
|
||||
import { unstable_useMediaQuery as useMediaQuery } from '@material-ui/core/useMediaQuery';
|
||||
import PropTypes from 'prop-types';
|
||||
import classnames from 'classnames';
|
||||
import * as appPropTypes from '../appPropTypes';
|
||||
import VideoView from '../VideoContainers/VideoView';
|
||||
import Volume from './Volume';
|
||||
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';
|
||||
import ScreenIcon from '@material-ui/icons/ScreenShare';
|
||||
import ScreenOffIcon from '@material-ui/icons/StopScreenShare';
|
||||
|
||||
const styles = () =>
|
||||
const styles = (theme) =>
|
||||
({
|
||||
root :
|
||||
{
|
||||
flexDirection : 'row',
|
||||
flex : '0 0 auto',
|
||||
boxShadow : 'var(--peer-shadow)',
|
||||
border : 'var(--peer-border)',
|
||||
|
|
@ -22,27 +30,78 @@ const styles = () =>
|
|||
backgroundPosition : 'bottom',
|
||||
backgroundSize : 'auto 85%',
|
||||
backgroundRepeat : 'no-repeat',
|
||||
'&.webcam' :
|
||||
{
|
||||
order : 1
|
||||
},
|
||||
'&.screen' :
|
||||
{
|
||||
order : 2
|
||||
},
|
||||
'&.hover' :
|
||||
{
|
||||
boxShadow : '0px 1px 3px rgba(0, 0, 0, 0.05) inset, 0px 0px 8px rgba(82, 168, 236, 0.9)'
|
||||
},
|
||||
'&.active-speaker' :
|
||||
{
|
||||
borderColor : 'var(--active-speaker-border-color)'
|
||||
}
|
||||
},
|
||||
fab :
|
||||
{
|
||||
margin : theme.spacing.unit
|
||||
},
|
||||
viewContainer :
|
||||
{
|
||||
position : 'relative',
|
||||
'&.webcam' :
|
||||
{
|
||||
order : 2
|
||||
width : '100%',
|
||||
height : '100%'
|
||||
},
|
||||
'&.screen' :
|
||||
controls :
|
||||
{
|
||||
order : 1
|
||||
position : 'absolute',
|
||||
width : '100%',
|
||||
height : '100%',
|
||||
backgroundColor : 'rgba(0, 0, 0, 0.3)',
|
||||
display : 'flex',
|
||||
flexDirection : 'column',
|
||||
justifyContent : 'center',
|
||||
alignItems : 'flex-end',
|
||||
padding : '0.4vmin',
|
||||
zIndex : 21,
|
||||
opacity : 0,
|
||||
transition : 'opacity 0.3s',
|
||||
touchAction : 'none',
|
||||
'&.hover' :
|
||||
{
|
||||
opacity : 1
|
||||
},
|
||||
'& p' :
|
||||
{
|
||||
position : 'absolute',
|
||||
float : 'left',
|
||||
top : '50%',
|
||||
left : '50%',
|
||||
transform : 'translate(-50%, -50%)',
|
||||
color : 'rgba(255, 255, 255, 1)',
|
||||
fontSize : '7em',
|
||||
margin : 0
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
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,
|
||||
|
|
@ -54,7 +113,8 @@ const Me = (props) =>
|
|||
micProducer,
|
||||
webcamProducer,
|
||||
screenProducer,
|
||||
classes
|
||||
classes,
|
||||
theme
|
||||
} = props;
|
||||
|
||||
const videoVisible = (
|
||||
|
|
@ -69,23 +129,222 @@ const Me = (props) =>
|
|||
!screenProducer.remotelyPaused
|
||||
);
|
||||
|
||||
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';
|
||||
}
|
||||
|
||||
let screenState;
|
||||
|
||||
let screenTip;
|
||||
|
||||
if (!me.canShareScreen)
|
||||
{
|
||||
screenState = 'unsupported';
|
||||
screenTip = 'Screen sharing not supported';
|
||||
}
|
||||
else if (screenProducer)
|
||||
{
|
||||
screenState = 'on';
|
||||
screenTip = 'Stop screen sharing';
|
||||
}
|
||||
else
|
||||
{
|
||||
screenState = 'off';
|
||||
screenTip = 'Start screen sharing';
|
||||
}
|
||||
|
||||
const spacingStyle =
|
||||
{
|
||||
'margin' : spacing
|
||||
};
|
||||
|
||||
const smallScreen = useMediaQuery(theme.breakpoints.down('sm'));
|
||||
|
||||
return (
|
||||
<React.Fragment>
|
||||
<div
|
||||
className={
|
||||
classnames(
|
||||
classes.root,
|
||||
'webcam',
|
||||
hover ? 'hover' : null,
|
||||
activeSpeaker ? 'active-speaker' : null
|
||||
)
|
||||
}
|
||||
onMouseOver={() => setHover(true)}
|
||||
onMouseOut={() => setHover(false)}
|
||||
onTouchStart={() =>
|
||||
{
|
||||
if (touchTimeout)
|
||||
clearTimeout(touchTimeout);
|
||||
|
||||
setHover(true);
|
||||
}}
|
||||
onTouchEnd={() =>
|
||||
{
|
||||
if (touchTimeout)
|
||||
clearTimeout(touchTimeout);
|
||||
|
||||
touchTimeout = setTimeout(() =>
|
||||
{
|
||||
setHover(false);
|
||||
}, 2000);
|
||||
}}
|
||||
style={spacingStyle}
|
||||
>
|
||||
<div className={classnames(classes.viewContainer, 'webcam')} style={style}>
|
||||
<div className={classnames(classes.viewContainer)} style={style}>
|
||||
<div
|
||||
className={classnames(classes.controls, webcamHover ? 'hover' : null)}
|
||||
onMouseOver={() => setWebcamHover(true)}
|
||||
onMouseOut={() => setWebcamHover(false)}
|
||||
onTouchStart={() =>
|
||||
{
|
||||
if (touchWebcamTimeout)
|
||||
clearTimeout(touchWebcamTimeout);
|
||||
|
||||
setWebcamHover(true);
|
||||
}}
|
||||
onTouchEnd={() =>
|
||||
{
|
||||
if (touchWebcamTimeout)
|
||||
clearTimeout(touchWebcamTimeout);
|
||||
|
||||
touchWebcamTimeout = setTimeout(() =>
|
||||
{
|
||||
setWebcamHover(false);
|
||||
}, 2000);
|
||||
}}
|
||||
>
|
||||
<p>ME</p>
|
||||
<Tooltip title={micTip} placement={smallScreen ? 'top' : 'right'}>
|
||||
<div>
|
||||
<Fab
|
||||
aria-label='Mute mic'
|
||||
className={classes.fab}
|
||||
disabled={!me.canSendMic || me.audioInProgress}
|
||||
color={micState === 'on' ? 'default' : 'secondary'}
|
||||
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={smallScreen ? 'top' : 'right'}>
|
||||
<div>
|
||||
<Fab
|
||||
aria-label='Mute video'
|
||||
className={classes.fab}
|
||||
disabled={!me.canSendWebcam || me.webcamInProgress}
|
||||
color={webcamState === 'on' ? 'default' : 'secondary'}
|
||||
onClick={() =>
|
||||
{
|
||||
webcamState === 'on' ?
|
||||
roomClient.disableWebcam() :
|
||||
roomClient.enableWebcam();
|
||||
}}
|
||||
>
|
||||
{ webcamState === 'on' ?
|
||||
<VideoIcon />
|
||||
:
|
||||
<VideoOffIcon />
|
||||
}
|
||||
</Fab>
|
||||
</div>
|
||||
</Tooltip>
|
||||
<Tooltip title={screenTip} placement={smallScreen ? 'top' : 'right'}>
|
||||
<div>
|
||||
<Fab
|
||||
aria-label='Share screen'
|
||||
className={classes.fab}
|
||||
disabled={!me.canShareScreen || me.screenShareInProgress}
|
||||
color={screenState === 'on' ? 'primary' : 'default'}
|
||||
onClick={() =>
|
||||
{
|
||||
switch (screenState)
|
||||
{
|
||||
case 'on':
|
||||
{
|
||||
roomClient.disableScreenSharing();
|
||||
break;
|
||||
}
|
||||
case 'off':
|
||||
{
|
||||
roomClient.enableScreenSharing();
|
||||
break;
|
||||
}
|
||||
default:
|
||||
{
|
||||
break;
|
||||
}
|
||||
}
|
||||
}}
|
||||
>
|
||||
{ screenState === 'on' || screenState === 'unsupported' ?
|
||||
<ScreenOffIcon/>
|
||||
:null
|
||||
}
|
||||
{ screenState === 'off' ?
|
||||
<ScreenIcon/>
|
||||
:null
|
||||
}
|
||||
</Fab>
|
||||
</div>
|
||||
</Tooltip>
|
||||
</div>
|
||||
|
||||
<VideoView
|
||||
isMe
|
||||
advancedMode={advancedMode}
|
||||
|
|
@ -106,8 +365,56 @@ const Me = (props) =>
|
|||
</div>
|
||||
</div>
|
||||
{ screenProducer ?
|
||||
<div className={classes.root}>
|
||||
<div className={classnames(classes.viewContainer, 'screen')} style={style}>
|
||||
<div
|
||||
className={classnames(classes.root, 'screen', hover ? 'hover' : null)}
|
||||
onMouseOver={() => setHover(true)}
|
||||
onMouseOut={() => setHover(false)}
|
||||
onTouchStart={() =>
|
||||
{
|
||||
if (touchTimeout)
|
||||
clearTimeout(touchTimeout);
|
||||
|
||||
setHover(true);
|
||||
}}
|
||||
onTouchEnd={() =>
|
||||
{
|
||||
if (touchTimeout)
|
||||
clearTimeout(touchTimeout);
|
||||
|
||||
touchTimeout = setTimeout(() =>
|
||||
{
|
||||
setHover(false);
|
||||
}, 2000);
|
||||
}}
|
||||
style={spacingStyle}
|
||||
>
|
||||
<div className={classnames(classes.viewContainer)} style={style}>
|
||||
<div
|
||||
className={classnames(classes.controls, screenHover ? 'hover' : null)}
|
||||
onMouseOver={() => setScreenHover(true)}
|
||||
onMouseOut={() => setScreenHover(false)}
|
||||
onTouchStart={() =>
|
||||
{
|
||||
if (touchScreenTimeout)
|
||||
clearTimeout(touchScreenTimeout);
|
||||
|
||||
setScreenHover(true);
|
||||
}}
|
||||
onTouchEnd={() =>
|
||||
{
|
||||
|
||||
if (touchScreenTimeout)
|
||||
clearTimeout(touchScreenTimeout);
|
||||
|
||||
touchScreenTimeout = setTimeout(() =>
|
||||
{
|
||||
setScreenHover(false);
|
||||
}, 2000);
|
||||
}}
|
||||
>
|
||||
<p>ME</p>
|
||||
</div>
|
||||
|
||||
<VideoView
|
||||
isMe
|
||||
advancedMode={advancedMode}
|
||||
|
|
@ -136,7 +443,8 @@ Me.propTypes =
|
|||
screenProducer : appPropTypes.Producer,
|
||||
spacing : PropTypes.number,
|
||||
style : PropTypes.object,
|
||||
classes : PropTypes.object.isRequired
|
||||
classes : PropTypes.object.isRequired,
|
||||
theme : PropTypes.object.isRequired
|
||||
};
|
||||
|
||||
const mapStateToProps = (state) =>
|
||||
|
|
@ -164,4 +472,4 @@ export default withRoomContext(connect(
|
|||
);
|
||||
}
|
||||
}
|
||||
)(withStyles(styles)(Me)));
|
||||
)(withStyles(styles, { withTheme: true })(Me)));
|
||||
|
|
|
|||
|
|
@ -31,11 +31,11 @@ const styles = (theme) =>
|
|||
backgroundRepeat : 'no-repeat',
|
||||
'&.webcam' :
|
||||
{
|
||||
order : 2
|
||||
order : 4
|
||||
},
|
||||
'&.screen' :
|
||||
{
|
||||
order : 1
|
||||
order : 3
|
||||
},
|
||||
'&.hover' :
|
||||
{
|
||||
|
|
@ -54,15 +54,7 @@ const styles = (theme) =>
|
|||
{
|
||||
position : 'relative',
|
||||
width : '100%',
|
||||
height : '100%',
|
||||
'&.webcam' :
|
||||
{
|
||||
order : 2
|
||||
},
|
||||
'&.screen' :
|
||||
{
|
||||
order : 1
|
||||
}
|
||||
height : '100%'
|
||||
},
|
||||
controls :
|
||||
{
|
||||
|
|
|
|||
|
|
@ -1,331 +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 { unstable_useMediaQuery as useMediaQuery } from '@material-ui/core/useMediaQuery';
|
||||
import classnames from 'classnames';
|
||||
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';
|
||||
import ScreenIcon from '@material-ui/icons/ScreenShare';
|
||||
import ScreenOffIcon from '@material-ui/icons/StopScreenShare';
|
||||
import LockIcon from '@material-ui/icons/Lock';
|
||||
import LockOpenIcon from '@material-ui/icons/LockOpen';
|
||||
import LeaveIcon from '@material-ui/icons/Cancel';
|
||||
|
||||
const styles = (theme) =>
|
||||
({
|
||||
root :
|
||||
{
|
||||
position : 'fixed',
|
||||
zIndex : 500,
|
||||
display : 'flex',
|
||||
[theme.breakpoints.up('md')] :
|
||||
{
|
||||
top : '50%',
|
||||
transform : 'translate(0%, -50%)',
|
||||
flexDirection : 'column',
|
||||
justifyContent : 'center',
|
||||
alignItems : 'center',
|
||||
left : '1.0em',
|
||||
width : '2.6em'
|
||||
},
|
||||
[theme.breakpoints.down('sm')] :
|
||||
{
|
||||
flexDirection : 'row',
|
||||
bottom : '0.5em',
|
||||
left : '50%',
|
||||
transform : 'translate(-50%, -0%)'
|
||||
}
|
||||
},
|
||||
fab :
|
||||
{
|
||||
margin : theme.spacing.unit
|
||||
},
|
||||
show :
|
||||
{
|
||||
opacity : 1,
|
||||
transition : 'opacity .5s'
|
||||
},
|
||||
hide :
|
||||
{
|
||||
opacity : 0,
|
||||
transition : 'opacity .5s'
|
||||
}
|
||||
});
|
||||
|
||||
const Sidebar = (props) =>
|
||||
{
|
||||
const {
|
||||
roomClient,
|
||||
toolbarsVisible,
|
||||
me,
|
||||
micProducer,
|
||||
webcamProducer,
|
||||
screenProducer,
|
||||
locked,
|
||||
classes,
|
||||
theme
|
||||
} = 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';
|
||||
}
|
||||
|
||||
let screenState;
|
||||
|
||||
let screenTip;
|
||||
|
||||
if (!me.canShareScreen)
|
||||
{
|
||||
screenState = 'unsupported';
|
||||
screenTip = 'Screen sharing not supported';
|
||||
}
|
||||
else if (screenProducer)
|
||||
{
|
||||
screenState = 'on';
|
||||
screenTip = 'Stop screen sharing';
|
||||
}
|
||||
else
|
||||
{
|
||||
screenState = 'off';
|
||||
screenTip = 'Start screen sharing';
|
||||
}
|
||||
|
||||
const smallScreen = useMediaQuery(theme.breakpoints.down('sm'));
|
||||
|
||||
return (
|
||||
<div
|
||||
className={
|
||||
classnames(classes.root, toolbarsVisible ? classes.show : classes.hide)
|
||||
}
|
||||
>
|
||||
<Tooltip title={micTip} placement={smallScreen ? 'top' : 'right'}>
|
||||
<div>
|
||||
<Fab
|
||||
aria-label='Mute mic'
|
||||
className={classes.fab}
|
||||
disabled={!me.canSendMic || me.audioInProgress}
|
||||
color={micState === 'on' ? 'default' : 'secondary'}
|
||||
size={smallScreen ? 'large' : 'medium'}
|
||||
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={smallScreen ? 'top' : 'right'}>
|
||||
<div>
|
||||
<Fab
|
||||
aria-label='Mute video'
|
||||
className={classes.fab}
|
||||
disabled={!me.canSendWebcam || me.webcamInProgress}
|
||||
color={webcamState === 'on' ? 'default' : 'secondary'}
|
||||
size={smallScreen ? 'large' : 'medium'}
|
||||
onClick={() =>
|
||||
{
|
||||
webcamState === 'on' ?
|
||||
roomClient.disableWebcam() :
|
||||
roomClient.enableWebcam();
|
||||
}}
|
||||
>
|
||||
{ webcamState === 'on' ?
|
||||
<VideoIcon />
|
||||
:
|
||||
<VideoOffIcon />
|
||||
}
|
||||
</Fab>
|
||||
</div>
|
||||
</Tooltip>
|
||||
<Tooltip title={screenTip} placement={smallScreen ? 'top' : 'right'}>
|
||||
<div>
|
||||
<Fab
|
||||
aria-label='Share screen'
|
||||
className={classes.fab}
|
||||
disabled={!me.canShareScreen || me.screenShareInProgress}
|
||||
color={screenState === 'on' ? 'primary' : 'default'}
|
||||
size={smallScreen ? 'large' : 'medium'}
|
||||
onClick={() =>
|
||||
{
|
||||
switch (screenState)
|
||||
{
|
||||
case 'on':
|
||||
{
|
||||
roomClient.disableScreenSharing();
|
||||
break;
|
||||
}
|
||||
case 'off':
|
||||
{
|
||||
roomClient.enableScreenSharing();
|
||||
break;
|
||||
}
|
||||
default:
|
||||
{
|
||||
break;
|
||||
}
|
||||
}
|
||||
}}
|
||||
>
|
||||
{ screenState === 'on' || screenState === 'unsupported' ?
|
||||
<ScreenOffIcon/>
|
||||
:null
|
||||
}
|
||||
{ screenState === 'off' ?
|
||||
<ScreenIcon/>
|
||||
:null
|
||||
}
|
||||
</Fab>
|
||||
</div>
|
||||
</Tooltip>
|
||||
|
||||
<Tooltip
|
||||
title={locked ? 'Unlock room' : 'Lock room'}
|
||||
placement={smallScreen ? 'top' : 'right'}
|
||||
>
|
||||
<Fab
|
||||
aria-label='Room lock'
|
||||
className={classes.fab}
|
||||
color={locked ? 'primary' : 'default'}
|
||||
size={smallScreen ? 'large' : 'medium'}
|
||||
onClick={() =>
|
||||
{
|
||||
if (locked)
|
||||
{
|
||||
roomClient.unlockRoom();
|
||||
}
|
||||
else
|
||||
{
|
||||
roomClient.lockRoom();
|
||||
}
|
||||
}}
|
||||
>
|
||||
{ locked ?
|
||||
<LockIcon />
|
||||
:
|
||||
<LockOpenIcon />
|
||||
}
|
||||
</Fab>
|
||||
</Tooltip>
|
||||
|
||||
{ /* <Fab
|
||||
aria-label='Raise hand'
|
||||
className={classes.fab}
|
||||
disabled={me.raiseHandInProgress}
|
||||
color={me.raiseHand ? 'primary' : 'default'}
|
||||
size='large'
|
||||
onClick={() => roomClient.sendRaiseHandState(!me.raiseHand)}
|
||||
>
|
||||
<Avatar alt='Hand' src={me.raiseHand ? HandOn : HandOff} />
|
||||
</Fab> */ }
|
||||
|
||||
<Tooltip title='Leave meeting' placement={smallScreen ? 'top' : 'right'}>
|
||||
<Fab
|
||||
aria-label='Leave meeting'
|
||||
className={classes.fab}
|
||||
color='secondary'
|
||||
size={smallScreen ? 'large' : 'medium'}
|
||||
onClick={() => roomClient.close()}
|
||||
>
|
||||
<LeaveIcon />
|
||||
</Fab>
|
||||
</Tooltip>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
Sidebar.propTypes =
|
||||
{
|
||||
roomClient : PropTypes.any.isRequired,
|
||||
toolbarsVisible : PropTypes.bool.isRequired,
|
||||
me : appPropTypes.Me.isRequired,
|
||||
micProducer : appPropTypes.Producer,
|
||||
webcamProducer : appPropTypes.Producer,
|
||||
screenProducer : appPropTypes.Producer,
|
||||
locked : PropTypes.bool.isRequired,
|
||||
classes : PropTypes.object.isRequired,
|
||||
theme : PropTypes.object.isRequired
|
||||
};
|
||||
|
||||
const mapStateToProps = (state) =>
|
||||
({
|
||||
toolbarsVisible : state.room.toolbarsVisible,
|
||||
...meProducersSelector(state),
|
||||
me : state.me,
|
||||
locked : state.room.locked
|
||||
});
|
||||
|
||||
export default withRoomContext(connect(
|
||||
mapStateToProps,
|
||||
null,
|
||||
null,
|
||||
{
|
||||
areStatesEqual : (next, prev) =>
|
||||
{
|
||||
return (
|
||||
prev.room.toolbarsVisible === next.room.toolbarsVisible &&
|
||||
prev.room.locked === next.room.locked &&
|
||||
prev.producers === next.producers &&
|
||||
prev.me === next.me
|
||||
);
|
||||
}
|
||||
}
|
||||
)(withStyles(styles, { withTheme: true })(Sidebar)));
|
||||
|
|
@ -27,10 +27,12 @@ import Filmstrip from './MeetingViews/Filmstrip';
|
|||
import AudioPeers from './PeerAudio/AudioPeers';
|
||||
import FullScreenView from './VideoContainers/FullScreenView';
|
||||
import VideoWindow from './VideoWindow/VideoWindow';
|
||||
import Sidebar from './Controls/Sidebar';
|
||||
import FullScreenIcon from '@material-ui/icons/Fullscreen';
|
||||
import FullScreenExitIcon from '@material-ui/icons/FullscreenExit';
|
||||
import SettingsIcon from '@material-ui/icons/Settings';
|
||||
import LockIcon from '@material-ui/icons/Lock';
|
||||
import LockOpenIcon from '@material-ui/icons/LockOpen';
|
||||
import LeaveIcon from '@material-ui/icons/Cancel';
|
||||
import Settings from './Settings/Settings';
|
||||
import JoinDialog from './JoinDialog';
|
||||
|
||||
|
|
@ -306,6 +308,34 @@ class Room extends React.PureComponent
|
|||
</Typography>
|
||||
<div className={classes.grow} />
|
||||
<div className={classes.actionButtons}>
|
||||
<IconButton
|
||||
aria-label='Leave meeting'
|
||||
color='secondary'
|
||||
onClick={() => roomClient.close()}
|
||||
>
|
||||
<LeaveIcon />
|
||||
</IconButton>
|
||||
<IconButton
|
||||
aria-label='Lock room'
|
||||
color='inherit'
|
||||
onClick={() =>
|
||||
{
|
||||
if (room.locked)
|
||||
{
|
||||
roomClient.unlockRoom();
|
||||
}
|
||||
else
|
||||
{
|
||||
roomClient.lockRoom();
|
||||
}
|
||||
}}
|
||||
>
|
||||
{ room.locked ?
|
||||
<LockIcon />
|
||||
:
|
||||
<LockOpenIcon />
|
||||
}
|
||||
</IconButton>
|
||||
{ this.fullscreen.fullscreenEnabled ?
|
||||
<IconButton
|
||||
aria-label='Fullscreen'
|
||||
|
|
@ -366,8 +396,6 @@ class Room extends React.PureComponent
|
|||
|
||||
<View advancedMode={advancedMode} />
|
||||
|
||||
<Sidebar />
|
||||
|
||||
<Settings />
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
Loading…
Reference in New Issue