diff --git a/app/src/components/App.js b/app/src/components/App.js index bdcc03d..130faa8 100644 --- a/app/src/components/App.js +++ b/app/src/components/App.js @@ -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 ( - - ); - } - else if (!room.joined) + if (!room.joined) { return ( diff --git a/app/src/components/JoinDialog.js b/app/src/components/JoinDialog.js index 22d47da..faa6d60 100644 --- a/app/src/components/JoinDialog.js +++ b/app/src/components/JoinDialog.js @@ -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 }} > + + { window.config.logo && Logo } +
+ + { window.config.title } + +
+
+
+ { loginEnabled && + + { + loggedIn ? roomClient.logout() : roomClient.login(); + }} + > + { myPicture ? + + : + + } + + } +
+ { window.config.logo && Logo } - - Welcome - You are about to join a meeting. - Set the name that others will see, - and choose how you want to join? + +
Room ID: { room.name }
+
+ + Set your name for participation, + and choose how you want to join: + + - - { loginEnabled && + + { !room.inLobby ? + - } - - - + + + : + +
Ok, you are ready
+ The room is looked - hang on until somebody lets you in ... +
+ } + + + This website uses cookies to enhance the user experience. +
); @@ -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 ); } }