diff --git a/app/src/RoomClient.js b/app/src/RoomClient.js index 47a04af..56cdb1c 100644 --- a/app/src/RoomClient.js +++ b/app/src/RoomClient.js @@ -1116,7 +1116,6 @@ export default class RoomClient this._spotlights = new Spotlights(this._maxSpotlights, this._signalingSocket); - store.dispatch(stateActions.toggleJoined()); store.dispatch(stateActions.setRoomState('connecting')); this._signalingSocket.on('connect', () => @@ -1294,6 +1293,8 @@ export default class RoomClient { case 'enteredLobby': { + store.dispatch(stateActions.setInLobby(true)); + const { displayName } = store.getState().settings; await this.sendRequest('changeDisplayName', { displayName }); @@ -1302,18 +1303,14 @@ export default class RoomClient case 'roomReady': { + store.dispatch(stateActions.toggleJoined()); + store.dispatch(stateActions.setInLobby(false)); + await this._joinRoom({ joinVideo }); break; } - case 'roomLocked': - { - store.dispatch(stateActions.setRoomLockedOut()); - - break; - } - case 'lockRoom': { store.dispatch( diff --git a/app/src/actions/stateActions.js b/app/src/actions/stateActions.js index 1e72125..2d8882e 100644 --- a/app/src/actions/stateActions.js +++ b/app/src/actions/stateActions.js @@ -36,10 +36,11 @@ export const setRoomUnLocked = () => }; }; -export const setRoomLockedOut = () => +export const setInLobby = (inLobby) => { return { - type : 'SET_ROOM_LOCKED_OUT' + type : 'SET_IN_LOBBY', + payload : { inLobby } }; }; diff --git a/app/src/components/AccessControl/LockDialog/LockDialog.js b/app/src/components/AccessControl/LockDialog/LockDialog.js index f5b10ca..b50c076 100644 --- a/app/src/components/AccessControl/LockDialog/LockDialog.js +++ b/app/src/components/AccessControl/LockDialog/LockDialog.js @@ -164,7 +164,6 @@ const mapStateToProps = (state) => return { room : state.room, lobbyPeers : lobbyPeersKeySelector(state) - }; }; diff --git a/app/src/components/App.js b/app/src/components/App.js index ce29f80..bdcc03d 100644 --- a/app/src/components/App.js +++ b/app/src/components/App.js @@ -11,7 +11,7 @@ const App = (props) => room } = props; - if (room.lockedOut) + if (room.inLobby) { return ( diff --git a/app/src/components/JoinDialog.js b/app/src/components/JoinDialog.js index 70a2a94..95095af 100644 --- a/app/src/components/JoinDialog.js +++ b/app/src/components/JoinDialog.js @@ -59,8 +59,6 @@ const JoinDialog = ({ classes }) => { - const [ localDisplayName, setLocalDisplayName ] = useState(displayName); - const handleKeyDown = (event) => { const { key } = event; @@ -70,10 +68,8 @@ const JoinDialog = ({ case 'Enter': case 'Escape': { - if (localDisplayName !== '') // Don't allow empty displayName - changeDisplayName(localDisplayName); - else - setLocalDisplayName(displayName); + if (displayName === '') + changeDisplayName('Guest'); break; } default: @@ -104,18 +100,18 @@ const JoinDialog = ({ id='displayname' label='Your name' className={classes.textField} - value={localDisplayName} + value={displayName} onChange={(event) => { const { value } = event.target; - setLocalDisplayName(value); + changeDisplayName(value); }} onKeyDown={handleKeyDown} onBlur={() => { - if (localDisplayName !== displayName) - changeDisplayName(localDisplayName); + if (displayName === '') + changeDisplayName('Guest'); }} margin='normal' /> @@ -193,7 +189,8 @@ export default withRoomContext(connect( areStatesEqual : (next, prev) => { return ( - prev.settings.displayName === next.settings.displayName + prev.settings.displayName === next.settings.displayName && + prev.me.loginEnabled === next.me.loginEnabled ); } } diff --git a/app/src/components/Lobby.js b/app/src/components/Lobby.js index 915bc43..e374879 100644 --- a/app/src/components/Lobby.js +++ b/app/src/components/Lobby.js @@ -1,11 +1,14 @@ -import React from 'react'; +import React, { useState } 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 Paper from '@material-ui/core/Paper'; +import DialogActions from '@material-ui/core/DialogActions'; +import Button from '@material-ui/core/Button'; +import TextField from '@material-ui/core/TextField'; const styles = (theme) => ({ @@ -49,27 +52,104 @@ const styles = (theme) => }); const Lobby = ({ + roomClient, + url, + displayName, + loginEnabled, + changeDisplayName, classes }) => { + const handleKeyDown = (event) => + { + const { key } = event; + + switch (key) + { + case 'Enter': + case 'Escape': + { + if (displayName === '') + changeDisplayName('Guest'); + break; + } + default: + break; + } + }; + return (
- - This room is locked at the moment, try again later. - + + { window.config.logo && + Logo + } + + Virtual lobby + + + You are currently in the virtual lobby of: {url} + Please wait for someone to let you in. + + + { + const { value } = event.target; + + changeDisplayName(value); + }} + onKeyDown={handleKeyDown} + onBlur={() => + { + if (displayName === '') + changeDisplayName('Guest'); + }} + margin='normal' + /> + + { loginEnabled && + + } + +
); }; Lobby.propTypes = { - classes : PropTypes.object.isRequired + roomClient : PropTypes.any.isRequired, + url : PropTypes.string.isRequired, + displayName : PropTypes.string.isRequired, + loginEnabled : PropTypes.string.isRequired, + changeDisplayName : PropTypes.func.isRequired, + classes : PropTypes.object.isRequired }; const mapStateToProps = (state) => { return { - displayName : state.settings.displayName + url : state.room.url, + displayName : state.settings.displayName, + loginEnabled : state.me.loginEnabled }; }; @@ -91,7 +171,9 @@ export default withRoomContext(connect( areStatesEqual : (next, prev) => { return ( - prev.settings.displayName === next.settings.displayName + prev.room.url === next.room.url && + prev.settings.displayName === next.settings.displayName && + prev.me.loginEnabled === next.me.loginEnabled ); } } diff --git a/app/src/components/Room.js b/app/src/components/Room.js index 71750b1..9590650 100644 --- a/app/src/components/Room.js +++ b/app/src/components/Room.js @@ -1,6 +1,9 @@ import React from 'react'; import { connect } from 'react-redux'; import PropTypes from 'prop-types'; +import { + lobbyPeersKeySelector +} from './Selectors'; import * as appPropTypes from './appPropTypes'; import { withRoomContext } from '../RoomContext'; import { withStyles } from '@material-ui/core/styles'; @@ -29,8 +32,7 @@ import VideoWindow from './VideoWindow/VideoWindow'; 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 SecurityIcon from '@material-ui/icons/Security'; import LockDialog from './AccessControl/LockDialog/LockDialog'; import Button from '@material-ui/core/Button'; import Settings from './Settings/Settings'; @@ -258,6 +260,7 @@ class Room extends React.PureComponent const { roomClient, room, + lobbyPeers, advancedMode, myPicture, loggedIn, @@ -327,7 +330,12 @@ class Room extends React.PureComponent color='inherit' onClick={() => setLockDialogOpen(!room.lockDialogOpen)} > - { room.locked ? : } + + + { this.fullscreen.fullscreenEnabled && ({ room : state.room, + lobbyPeers : lobbyPeersKeySelector(state), advancedMode : state.settings.advancedMode, loggedIn : state.me.loggedIn, loginEnabled : state.me.loginEnabled, @@ -466,6 +476,7 @@ export default withRoomContext(connect( { return ( prev.room === next.room && + prev.lobbyPeers === next.lobbyPeers && prev.me.loggedIn === next.me.loggedIn && prev.me.loginEnabled === next.me.loginEnabled && prev.settings.picture === next.settings.picture && diff --git a/app/src/index.js b/app/src/index.js index e463fbc..3561578 100644 --- a/app/src/index.js +++ b/app/src/index.js @@ -19,7 +19,7 @@ import * as serviceWorker from './serviceWorker'; import './index.css'; -if (process.env.NODE_ENV !== 'production') +if (process.env.REACT_APP_DEBUG === '*') { debug.enable('* -engine* -socket* -RIE* *WARN* *ERROR*'); } diff --git a/app/src/reducers/room.js b/app/src/reducers/room.js index 20a6026..04e8c2e 100644 --- a/app/src/reducers/room.js +++ b/app/src/reducers/room.js @@ -3,7 +3,7 @@ const initialState = url : null, state : 'new', // new/connecting/connected/disconnected/closed, locked : false, - lockedOut : false, + enteredLobby : false, accessCode : '', // access code to the room if locked and joinByAccessCode == true joinByAccessCode : true, // if true: accessCode is a possibility to open the room activeSpeakerId : null, @@ -51,9 +51,11 @@ const room = (state = initialState, action) => return { ...state, locked: false }; } - case 'SET_ROOM_LOCKED_OUT': + case 'SET_IN_LOBBY': { - return { ...state, lockedOut: true }; + const { inLobby } = action.payload; + + return { ...state, inLobby }; } case 'SET_ACCESS_CODE':