improved joinDialog
Stefan Otto
parent
879ea37167
commit
70913c2219
|
|
@ -3,7 +3,6 @@ import { connect } from 'react-redux';
|
|||
import PropTypes from 'prop-types';
|
||||
import Room from './Room';
|
||||
import JoinDialog from './JoinDialog';
|
||||
import Lobby from './Lobby';
|
||||
|
||||
const App = (props) =>
|
||||
{
|
||||
|
|
@ -11,13 +10,7 @@ const App = (props) =>
|
|||
room
|
||||
} = props;
|
||||
|
||||
if (room.inLobby)
|
||||
{
|
||||
return (
|
||||
<Lobby />
|
||||
);
|
||||
}
|
||||
else if (!room.joined)
|
||||
if (!room.joined)
|
||||
{
|
||||
return (
|
||||
<JoinDialog />
|
||||
|
|
|
|||
|
|
@ -5,10 +5,15 @@ import { withRoomContext } from '../RoomContext';
|
|||
import * as stateActions from '../actions/stateActions';
|
||||
import PropTypes from 'prop-types';
|
||||
import Dialog from '@material-ui/core/Dialog';
|
||||
import DialogTitle from '@material-ui/core/DialogTitle';
|
||||
import IconButton from '@material-ui/core/IconButton';
|
||||
import AccountCircle from '@material-ui/icons/AccountCircle';
|
||||
import Avatar from '@material-ui/core/Avatar';
|
||||
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';
|
||||
import CookieConsent from 'react-cookie-consent';
|
||||
|
||||
const styles = (theme) =>
|
||||
({
|
||||
|
|
@ -45,16 +50,35 @@ const styles = (theme) =>
|
|||
width : '80vw'
|
||||
}
|
||||
},
|
||||
title :
|
||||
{
|
||||
position : 'relative',
|
||||
alignItems : 'center',
|
||||
display : 'flex',
|
||||
marginLeft : 0
|
||||
},
|
||||
actionButtons :
|
||||
{
|
||||
right : 0,
|
||||
position : 'absolute'
|
||||
},
|
||||
logo :
|
||||
{
|
||||
display : 'block'
|
||||
},
|
||||
green :
|
||||
{
|
||||
color : 'rgba(0,255,0,1)'
|
||||
}
|
||||
});
|
||||
|
||||
const JoinDialog = ({
|
||||
roomClient,
|
||||
room,
|
||||
displayName,
|
||||
loginEnabled,
|
||||
loggedIn,
|
||||
myPicture,
|
||||
changeDisplayName,
|
||||
classes
|
||||
}) =>
|
||||
|
|
@ -85,17 +109,48 @@ const JoinDialog = ({
|
|||
paper : classes.dialogPaper
|
||||
}}
|
||||
>
|
||||
<DialogTitle disableTypography className={classes.title}>
|
||||
{ window.config.logo && <img alt='Logo' className={classes.logo} src={window.config.logo} /> }
|
||||
<div className={classes.title}>
|
||||
<Typography variant='h4'>
|
||||
{ window.config.title }
|
||||
</Typography>
|
||||
</div>
|
||||
<div className={classes.grow} />
|
||||
<div className={classes.actionButtons}>
|
||||
{ loginEnabled &&
|
||||
<IconButton
|
||||
aria-label='Account'
|
||||
className={classes.actionButton}
|
||||
color='inherit'
|
||||
onClick={() =>
|
||||
{
|
||||
loggedIn ? roomClient.logout() : roomClient.login();
|
||||
}}
|
||||
>
|
||||
{ myPicture ?
|
||||
<Avatar src={myPicture} />
|
||||
:
|
||||
<AccountCircle />
|
||||
}
|
||||
</IconButton>
|
||||
}
|
||||
</div>
|
||||
</DialogTitle>
|
||||
{ window.config.logo &&
|
||||
<img alt='Logo' className={classes.logo} src={window.config.logo} />
|
||||
}
|
||||
<Typography variant='h2' align='center'>
|
||||
Welcome
|
||||
</Typography>
|
||||
<Typography variant='h6'>
|
||||
You are about to join a meeting.
|
||||
Set the name that others will see,
|
||||
and choose how you want to join?
|
||||
</Typography>
|
||||
<Typography variant='h5'>
|
||||
<center> Room ID: { room.name } </center>
|
||||
</Typography>
|
||||
<Typography variant='h6'>
|
||||
Set your name for participation,
|
||||
and choose how you want to join:
|
||||
</Typography>
|
||||
|
||||
<TextField
|
||||
id='displayname'
|
||||
label='Your name'
|
||||
|
|
@ -112,22 +167,13 @@ const JoinDialog = ({
|
|||
{
|
||||
if (displayName === '')
|
||||
changeDisplayName('Guest');
|
||||
if (room.inLobby) roomClient.changeDisplayName(displayName);
|
||||
}}
|
||||
margin='normal'
|
||||
/>
|
||||
|
||||
{ !room.inLobby ?
|
||||
<DialogActions>
|
||||
{ loginEnabled &&
|
||||
<Button
|
||||
onClick={() =>
|
||||
{
|
||||
roomClient.login();
|
||||
}}
|
||||
variant='contained'
|
||||
color='secondary'
|
||||
>
|
||||
Sign in
|
||||
</Button>
|
||||
}
|
||||
<Button
|
||||
onClick={() =>
|
||||
{
|
||||
|
|
@ -149,6 +195,16 @@ const JoinDialog = ({
|
|||
Audio and Video
|
||||
</Button>
|
||||
</DialogActions>
|
||||
:
|
||||
<Typography variant='h6'>
|
||||
<div className={classes.green}> Ok, you are ready</div>
|
||||
The room is looked - hang on until somebody lets you in ...
|
||||
</Typography>
|
||||
}
|
||||
|
||||
<CookieConsent>
|
||||
This website uses cookies to enhance the user experience.
|
||||
</CookieConsent>
|
||||
</Dialog>
|
||||
</div>
|
||||
);
|
||||
|
|
@ -157,8 +213,11 @@ const JoinDialog = ({
|
|||
JoinDialog.propTypes =
|
||||
{
|
||||
roomClient : PropTypes.any.isRequired,
|
||||
room : PropTypes.object.isRequired,
|
||||
displayName : PropTypes.string.isRequired,
|
||||
loginEnabled : PropTypes.bool.isRequired,
|
||||
loggedIn : PropTypes.bool.isRequired,
|
||||
myPicture : PropTypes.string,
|
||||
changeDisplayName : PropTypes.func.isRequired,
|
||||
classes : PropTypes.object.isRequired
|
||||
};
|
||||
|
|
@ -166,8 +225,11 @@ JoinDialog.propTypes =
|
|||
const mapStateToProps = (state) =>
|
||||
{
|
||||
return {
|
||||
room : state.room,
|
||||
displayName : state.settings.displayName,
|
||||
loginEnabled : state.me.loginEnabled
|
||||
loginEnabled : state.me.loginEnabled,
|
||||
loggedIn : state.me.loggedIn,
|
||||
myPicture : state.me.picture
|
||||
};
|
||||
};
|
||||
|
||||
|
|
@ -189,8 +251,11 @@ export default withRoomContext(connect(
|
|||
areStatesEqual : (next, prev) =>
|
||||
{
|
||||
return (
|
||||
prev.room.inLobby === next.room.inLobby &&
|
||||
prev.settings.displayName === next.settings.displayName &&
|
||||
prev.me.loginEnabled === next.me.loginEnabled
|
||||
prev.me.loginEnabled === next.me.loginEnabled &&
|
||||
prev.me.loggedIn === next.me.loggedIn &&
|
||||
prev.me.picture === next.me.picture
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue