Add help and about modal

app/src/actions/roomActions.js

@@ -70,6 +70,18 @@ export const setExtraVideoOpen = (extraVideoOpen) =>
 		payload : { extraVideoOpen }
 	});
 
+export const setHelpOpen = (helpOpen) =>
+	({
+		type    : 'SET_HELP_OPEN',
+		payload : { helpOpen }
+	});
+
+export const setAboutOpen = (aboutOpen) =>
+	({
+		type    : 'SET_ABOUT_OPEN',
+		payload : { aboutOpen }
+	});
+
 export const setSettingsTab = (tab) =>
 	({
 		type    : 'SET_SETTINGS_TAB',

app/src/components/Controls/About.js

@@ -0,0 +1,133 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import { withStyles } from '@material-ui/core/styles';
+import { withRoomContext } from '../../RoomContext';
+import * as roomActions from '../../actions/roomActions';
+import PropTypes from 'prop-types';
+import { FormattedMessage } from 'react-intl';
+
+import Dialog from '@material-ui/core/Dialog';
+import DialogTitle from '@material-ui/core/DialogTitle';
+import DialogActions from '@material-ui/core/DialogActions';
+import DialogContent from '@material-ui/core/DialogContent';
+import DialogContentText from '@material-ui/core/DialogContentText';
+import Link from '@material-ui/core/Link';
+import Button from '@material-ui/core/Button';
+
+const styles = (theme) =>
+	({
+		dialogPaper :
+		{
+			width                          : '30vw',
+			[theme.breakpoints.down('lg')] :
+			{
+				width : '40vw'
+			},
+			[theme.breakpoints.down('md')] :
+			{
+				width : '50vw'
+			},
+			[theme.breakpoints.down('sm')] :
+			{
+				width : '70vw'
+			},
+			[theme.breakpoints.down('xs')] :
+			{
+				width : '90vw'
+			}
+		},
+		logo :
+		{
+			marginRight : 'auto'
+		},
+		link :
+		{
+			display   : 'block',
+			textAlign : 'center'
+		}
+	});
+
+const About = ({
+	aboutOpen,
+	handleCloseAbout,
+	classes
+}) =>
+{
+	return (
+		<Dialog
+			open={aboutOpen}
+			onClose={() => handleCloseAbout(false)}
+			classes={{
+				paper : classes.dialogPaper
+			}}
+		>
+			<DialogTitle id='form-dialog-title'>
+				<FormattedMessage
+					id='room.about'
+					defaultMessage='About'
+				/>
+			</DialogTitle>
+			<DialogContent dividers='true'>
+				<DialogContentText>
+					Contributions to this work were made on behalf of the GÉANT
+					project, a project that has received funding from the
+					European Union’s Horizon 2020 research and innovation 
+					programme under Grant Agreement No. 731122 (GN4-2). 
+					On behalf of GÉANT project, GÉANT Association is the sole
+					owner of the copyright in all material which was developed 
+					by a member of the GÉANT project.<br />
+					<br />
+					GÉANT Vereniging (Association) is registered with the
+					Chamber of Commerce in Amsterdam with registration number
+					40535155 and operates in the UK as a branch of GÉANT
+					Vereniging. Registered office: Hoekenrode 3, 1102BR
+					Amsterdam, The Netherlands. UK branch address: City House,
+					126-130 Hills Road, Cambridge CB2 1PQ, UK.
+				</DialogContentText>
+				<Link href='https://edumeet.org' target='_blank' rel='noreferrer' color='secondary' variant='h6' className={classes.link}>
+					https://edumeet.org
+				</Link>
+			</DialogContent>
+			<DialogActions>
+				{ window.config.logo && <img alt='Logo' className={classes.logo} src={window.config.logo} /> }
+				<Button onClick={() => { handleCloseAbout(false); }} color='primary'>
+					<FormattedMessage
+						id='label.close'
+						defaultMessage='Close'
+					/>
+				</Button>
+			</DialogActions>
+		</Dialog>		
+	);
+};
+
+About.propTypes =
+{
+	roomClient       : PropTypes.object.isRequired,
+	aboutOpen        : PropTypes.bool.isRequired,
+	handleCloseAbout : PropTypes.func.isRequired, 
+	classes          : PropTypes.object.isRequired
+};
+
+const mapStateToProps = (state) =>
+	({
+		aboutOpen : state.room.aboutOpen
+	});
+
+const mapDispatchToProps = {
+	handleCloseAbout : roomActions.setAboutOpen
+};
+
+export default withRoomContext(connect(
+	mapStateToProps,
+	mapDispatchToProps,
+	null,
+	{
+		areStatesEqual : (next, prev) =>
+		{
+			return (
+				prev.room.aboutOpen === next.room.aboutOpen
+			);
+		}
+	}
+)(withStyles(styles)(About)));

app/src/components/Controls/Help.js

@@ -0,0 +1,99 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import { withStyles } from '@material-ui/core/styles';
+import { withRoomContext } from '../../RoomContext';
+import * as roomActions from '../../actions/roomActions';
+import PropTypes from 'prop-types';
+import { FormattedMessage } from 'react-intl';
+
+import Dialog from '@material-ui/core/Dialog';
+import DialogTitle from '@material-ui/core/DialogTitle';
+import DialogActions from '@material-ui/core/DialogActions';
+import Button from '@material-ui/core/Button';
+
+const styles = (theme) =>
+	({
+		dialogPaper :
+		{
+			width                          : '30vw',
+			[theme.breakpoints.down('lg')] :
+			{
+				width : '40vw'
+			},
+			[theme.breakpoints.down('md')] :
+			{
+				width : '50vw'
+			},
+			[theme.breakpoints.down('sm')] :
+			{
+				width : '70vw'
+			},
+			[theme.breakpoints.down('xs')] :
+			{
+				width : '90vw'
+			}
+		}
+	});
+
+const Help = ({
+	helpOpen,
+	handleCloseHelp,
+	classes
+}) =>
+{
+	return (
+		<Dialog
+			open={helpOpen}
+			onClose={() => { handleCloseHelp(false); }}
+			classes={{
+				paper : classes.dialogPaper
+			}}
+		>
+			<DialogTitle id='form-dialog-title'>
+				<FormattedMessage
+					id='room.help'
+					defaultMessage='Help'
+				/>
+			</DialogTitle>
+			<DialogActions>
+				<Button onClick={() => { handleCloseHelp(false); }} color='primary'>
+					<FormattedMessage
+						id='label.close'
+						defaultMessage='Close'
+					/>
+				</Button>
+			</DialogActions>
+		</Dialog>		
+	);
+};
+
+Help.propTypes =
+{
+	roomClient      : PropTypes.object.isRequired,
+	helpOpen        : PropTypes.bool.isRequired,
+	handleCloseHelp : PropTypes.func.isRequired, 
+	classes         : PropTypes.object.isRequired
+};
+
+const mapStateToProps = (state) =>
+	({
+		helpOpen : state.room.helpOpen
+	});
+
+const mapDispatchToProps = {
+	handleCloseHelp : roomActions.setHelpOpen
+};
+
+export default withRoomContext(connect(
+	mapStateToProps,
+	mapDispatchToProps,
+	null,
+	{
+		areStatesEqual : (next, prev) =>
+		{
+			return (
+				prev.room.helpOpen === next.room.helpOpen
+			);
+		}
+	}
+)(withStyles(styles)(Help)));

app/src/components/Controls/TopBar.js

@@ -36,6 +36,8 @@ import VideoCallIcon from '@material-ui/icons/VideoCall';
 import Button from '@material-ui/core/Button';
 import Tooltip from '@material-ui/core/Tooltip';
 import MoreIcon from '@material-ui/icons/MoreVert';
+import HelpIcon from '@material-ui/icons/Help';
+import InfoIcon from '@material-ui/icons/Info';
 
 const styles = (theme) =>
 	({
@@ -192,6 +194,8 @@ const TopBar = (props) =>
 		onFullscreen,
 		setSettingsOpen,
 		setExtraVideoOpen,
+		setHelpOpen,
+		setAboutOpen,
 		setLockDialogOpen,
 		toggleToolArea,
 		openUsersTab,
@@ -483,6 +487,46 @@ const TopBar = (props) =>
 								/>
 							</p>
 						</MenuItem>
+						<MenuItem 
+							onClick={() => 
+							{
+								handleMenuClose();
+								setHelpOpen(!room.helpOpen);
+							}}
+						>
+							<HelpIcon
+								aria-label={intl.formatMessage({
+									id             : 'label.help',
+									defaultMessage : 'Help'
+								})}
+							/>
+							<p className={classes.moreAction}>
+								<FormattedMessage
+									id='label.help'
+									defaultMessage='Help'
+								/>
+							</p>
+						</MenuItem>
+						<MenuItem 
+							onClick={() => 
+							{
+								handleMenuClose();
+								setAboutOpen(!room.aboutOpen);
+							}}
+						>
+							<InfoIcon
+								aria-label={intl.formatMessage({
+									id             : 'label.about',
+									defaultMessage : 'About'
+								})}
+							/>
+							<p className={classes.moreAction}>
+								<FormattedMessage
+									id='label.about'
+									defaultMessage='About'
+								/>
+							</p>
+						</MenuItem>
 					</Paper>
 				}
 			</Popover>
@@ -694,6 +738,8 @@ TopBar.propTypes =
 	setToolbarsVisible   : PropTypes.func.isRequired,
 	setSettingsOpen      : PropTypes.func.isRequired,
 	setExtraVideoOpen    : PropTypes.func.isRequired,
+	setHelpOpen          : PropTypes.func.isRequired,
+	setAboutOpen         : PropTypes.func.isRequired,
 	setLockDialogOpen    : PropTypes.func.isRequired,
 	toggleToolArea       : PropTypes.func.isRequired,
 	openUsersTab         : PropTypes.func.isRequired,
@@ -741,6 +787,14 @@ const mapDispatchToProps = (dispatch) =>
 		{
 			dispatch(roomActions.setExtraVideoOpen(extraVideoOpen));
 		},
+		setHelpOpen : (helpOpen) =>
+		{
+			dispatch(roomActions.setHelpOpen(helpOpen));
+		},
+		setAboutOpen : (aboutOpen) =>
+		{
+			dispatch(roomActions.setAboutOpen(aboutOpen));
+		},
 		setLockDialogOpen : (lockDialogOpen) =>
 		{
 			dispatch(roomActions.setLockDialogOpen(lockDialogOpen));

app/src/components/Room.js

@@ -25,6 +25,8 @@ import Settings from './Settings/Settings';
 import TopBar from './Controls/TopBar';
 import WakeLock from 'react-wakelock-react16';
 import ExtraVideo from './Controls/ExtraVideo';
+import Help from './Controls/Help';
+import About from './Controls/About';
 
 const TIMEOUT = 5 * 1000;
 
@@ -222,6 +224,13 @@ class Room extends React.PureComponent
 				{ room.extraVideoOpen &&
 					<ExtraVideo />
 				}
+				{ room.helpOpen &&
+					<Help />
+				}
+				{ room.aboutOpen &&
+					<About />
+				}
+
 			</div>
 		);
 	}

app/src/reducers/room.js

@@ -22,6 +22,8 @@ const initialState =
 	spotlights                    : [],
 	settingsOpen                  : false,
 	extraVideoOpen                : false,
+	helpOpen                      : false,
+	aboutOpen                     : false,
 	currentSettingsTab            : 'media', // media, appearence, advanced
 	lockDialogOpen                : false,
 	joined                        : false,
@@ -130,6 +132,20 @@ const room = (state = initialState, action) =>
 			return { ...state, extraVideoOpen };
 		}
 
+		case 'SET_HELP_OPEN':
+		{
+			const { helpOpen } = action.payload;
+
+			return { ...state, helpOpen };
+		}
+
+		case 'SET_ABOUT_OPEN':
+		{
+			const { aboutOpen } = action.payload;
+
+			return { ...state, aboutOpen };
+		}
+			
 		case 'SET_SETTINGS_TAB':
 		{
 			const { tab } = action.payload;