First working version of lobby.
This commit is contained in:
Håvar Aambø Fosstveit
@@ -1,11 +1,14 @@
|
||||
import React from 'react';
|
||||
import { connect } from 'react-redux';
|
||||
import { withStyles } from '@material-ui/core/styles';
|
||||
import { withRoomContext } from '../RoomContext';
|
||||
import * as stateActions from '../actions/stateActions';
|
||||
import PropTypes from 'prop-types';
|
||||
import Dialog from '@material-ui/core/Dialog';
|
||||
import Typography from '@material-ui/core/Typography';
|
||||
import DialogActions from '@material-ui/core/DialogActions';
|
||||
import Button from '@material-ui/core/Button';
|
||||
import TextField from '@material-ui/core/TextField';
|
||||
|
||||
const styles = (theme) =>
|
||||
({
|
||||
@@ -41,6 +44,8 @@ const styles = (theme) =>
|
||||
|
||||
const JoinDialog = ({
|
||||
roomClient,
|
||||
displayName,
|
||||
changeDisplayName,
|
||||
classes
|
||||
}) =>
|
||||
{
|
||||
@@ -76,6 +81,19 @@ const JoinDialog = ({
|
||||
>
|
||||
Audio and Video
|
||||
</Button>
|
||||
<TextField
|
||||
id='displayname'
|
||||
label='Name'
|
||||
className={classes.textField}
|
||||
value={displayName}
|
||||
onChange={(event) =>
|
||||
{
|
||||
const { value } = event.target;
|
||||
|
||||
changeDisplayName(value);
|
||||
}}
|
||||
margin='normal'
|
||||
/>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
);
|
||||
@@ -83,8 +101,39 @@ const JoinDialog = ({
|
||||
|
||||
JoinDialog.propTypes =
|
||||
{
|
||||
roomClient : PropTypes.any.isRequired,
|
||||
classes : PropTypes.object.isRequired
|
||||
roomClient : PropTypes.any.isRequired,
|
||||
displayName : PropTypes.string.isRequired,
|
||||
changeDisplayName : PropTypes.func.isRequired,
|
||||
classes : PropTypes.object.isRequired
|
||||
};
|
||||
|
||||
export default withRoomContext(withStyles(styles)(JoinDialog));
|
||||
const mapStateToProps = (state) =>
|
||||
{
|
||||
return {
|
||||
displayName : state.settings.displayName
|
||||
};
|
||||
};
|
||||
|
||||
const mapDispatchToProps = (dispatch) =>
|
||||
{
|
||||
return {
|
||||
changeDisplayName : (displayName) =>
|
||||
{
|
||||
dispatch(stateActions.setDisplayName(displayName));
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
export default withRoomContext(connect(
|
||||
mapStateToProps,
|
||||
mapDispatchToProps,
|
||||
null,
|
||||
{
|
||||
areStatesEqual : (next, prev) =>
|
||||
{
|
||||
return (
|
||||
prev.settings.displayName === next.settings.displayName
|
||||
);
|
||||
}
|
||||
}
|
||||
)(withStyles(styles)(JoinDialog)));
|
||||
@@ -3,10 +3,9 @@ import { connect } from 'react-redux';
|
||||
import { withStyles } from '@material-ui/core/styles';
|
||||
import PropTypes from 'prop-types';
|
||||
import classnames from 'classnames';
|
||||
import * as appPropTypes from '../../appPropTypes';
|
||||
import { withRoomContext } from '../../../RoomContext';
|
||||
import EmptyAvatar from '../../../images/avatar-empty.jpeg';
|
||||
import HandIcon from '../../../images/icon-hand-white.svg';
|
||||
import PromoteIcon from '@material-ui/icons/OpenInBrowser';
|
||||
|
||||
const styles = (theme) =>
|
||||
({
|
||||
@@ -18,10 +17,6 @@ const styles = (theme) =>
|
||||
cursor : 'auto',
|
||||
display : 'flex'
|
||||
},
|
||||
listPeer :
|
||||
{
|
||||
display : 'flex'
|
||||
},
|
||||
avatar :
|
||||
{
|
||||
borderRadius : '50%',
|
||||
@@ -36,47 +31,6 @@ const styles = (theme) =>
|
||||
flexGrow : 1,
|
||||
alignItems : 'center'
|
||||
},
|
||||
indicators :
|
||||
{
|
||||
left : 0,
|
||||
top : 0,
|
||||
display : 'flex',
|
||||
flexDirection : 'row',
|
||||
justifyContent : 'flex-start',
|
||||
alignItems : 'center',
|
||||
transition : 'opacity 0.3s'
|
||||
},
|
||||
icon :
|
||||
{
|
||||
flex : '0 0 auto',
|
||||
margin : '0.3rem',
|
||||
borderRadius : 2,
|
||||
backgroundPosition : 'center',
|
||||
backgroundSize : '75%',
|
||||
backgroundRepeat : 'no-repeat',
|
||||
backgroundColor : 'rgba(0, 0, 0, 0.5)',
|
||||
transitionProperty : 'opacity, background-color',
|
||||
transitionDuration : '0.15s',
|
||||
width : 'var(--media-control-button-size)',
|
||||
height : 'var(--media-control-button-size)',
|
||||
opacity : 0.85,
|
||||
'&:hover' :
|
||||
{
|
||||
opacity : 1
|
||||
},
|
||||
'&.on' :
|
||||
{
|
||||
opacity : 1
|
||||
},
|
||||
'&.off' :
|
||||
{
|
||||
opacity : 0.2
|
||||
},
|
||||
'&.raise-hand' :
|
||||
{
|
||||
backgroundImage : `url(${HandIcon})`
|
||||
}
|
||||
},
|
||||
controls :
|
||||
{
|
||||
float : 'right',
|
||||
@@ -101,22 +55,14 @@ const styles = (theme) =>
|
||||
{
|
||||
opacity : 1
|
||||
},
|
||||
'&.unsupported' :
|
||||
{
|
||||
pointerEvents : 'none'
|
||||
},
|
||||
'&.disabled' :
|
||||
{
|
||||
pointerEvents : 'none',
|
||||
backgroundColor : 'var(--media-control-botton-disabled)'
|
||||
},
|
||||
'&.on' :
|
||||
'&.promote' :
|
||||
{
|
||||
backgroundColor : 'var(--media-control-botton-on)'
|
||||
},
|
||||
'&.off' :
|
||||
{
|
||||
backgroundColor : 'var(--media-control-botton-off)'
|
||||
}
|
||||
}
|
||||
});
|
||||
@@ -124,7 +70,7 @@ const styles = (theme) =>
|
||||
const ListLobbyPeer = (props) =>
|
||||
{
|
||||
const {
|
||||
// roomClient,
|
||||
roomClient,
|
||||
peer,
|
||||
classes
|
||||
} = props;
|
||||
@@ -138,64 +84,19 @@ const ListLobbyPeer = (props) =>
|
||||
<div className={classes.peerInfo}>
|
||||
{peer.displayName}
|
||||
</div>
|
||||
<div className={classes.indicators}>
|
||||
{ /* peer.raiseHandState ?
|
||||
<div className={
|
||||
classnames(
|
||||
classes.icon, 'raise-hand', {
|
||||
on : peer.raiseHandState,
|
||||
off : !peer.raiseHandState
|
||||
}
|
||||
)
|
||||
}
|
||||
/>
|
||||
:null
|
||||
*/ }
|
||||
</div>
|
||||
<div className={classes.controls}>
|
||||
{/* { screenConsumer ?
|
||||
<div
|
||||
className={classnames(classes.button, 'screen', {
|
||||
on : screenVisible,
|
||||
off : !screenVisible,
|
||||
disabled : peer.peerScreenInProgress
|
||||
})}
|
||||
onClick={(e) =>
|
||||
{
|
||||
e.stopPropagation();
|
||||
screenVisible ?
|
||||
roomClient.modifyPeerConsumer(peer.id, 'screen', true) :
|
||||
roomClient.modifyPeerConsumer(peer.id, 'screen', false);
|
||||
}}
|
||||
>
|
||||
{ screenVisible ?
|
||||
<ScreenIcon />
|
||||
:
|
||||
<ScreenOffIcon />
|
||||
}
|
||||
</div>
|
||||
:null
|
||||
}
|
||||
<div
|
||||
className={classnames(classes.button, 'mic', {
|
||||
on : micEnabled,
|
||||
off : !micEnabled,
|
||||
disabled : peer.peerAudioInProgress
|
||||
className={classnames(classes.button, 'promote', {
|
||||
disabled : peer.promotionInProgress
|
||||
})}
|
||||
onClick={(e) =>
|
||||
{
|
||||
e.stopPropagation();
|
||||
micEnabled ?
|
||||
roomClient.modifyPeerConsumer(peer.id, 'mic', true) :
|
||||
roomClient.modifyPeerConsumer(peer.id, 'mic', false);
|
||||
roomClient.promoteLobbyPeer(peer.id);
|
||||
}}
|
||||
>
|
||||
{ micEnabled ?
|
||||
<MicIcon />
|
||||
:
|
||||
<MicOffIcon />
|
||||
}
|
||||
</div> */}
|
||||
<PromoteIcon />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
@@ -205,7 +106,7 @@ ListLobbyPeer.propTypes =
|
||||
{
|
||||
roomClient : PropTypes.any.isRequired,
|
||||
advancedMode : PropTypes.bool,
|
||||
peer : appPropTypes.Peer.isRequired,
|
||||
peer : PropTypes.object.isRequired,
|
||||
classes : PropTypes.object.isRequired
|
||||
};
|
||||
|
||||
|
||||
@@ -92,9 +92,9 @@ class ParticipantList extends React.PureComponent
|
||||
</ul>
|
||||
<br />
|
||||
|
||||
{ lobbyPeers ?
|
||||
{ lobbyPeers.length > 0 ?
|
||||
<ul className={classes.list}>
|
||||
<li className={classes.listheader}>Participants in Spotlight:</li>
|
||||
<li className={classes.listheader}>Participants in Lobby:</li>
|
||||
{ lobbyPeers.map((peerId) => (
|
||||
<li
|
||||
key={peerId}
|
||||
@@ -107,6 +107,7 @@ class ParticipantList extends React.PureComponent
|
||||
:null
|
||||
}
|
||||
|
||||
<br />
|
||||
<ul className={classes.list}>
|
||||
<li className={classes.listheader}>Participants in Spotlight:</li>
|
||||
{ spotlightPeers.map((peer) => (
|
||||
|
||||
Reference in New Issue
Block a user