Merge branch 'feat-help-about' into develop

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,168 @@
+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 { useIntl, 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 Button from '@material-ui/core/Button';
+import Paper from '@material-ui/core/Paper';
+import Tabs from '@material-ui/core/Tabs';
+import Tab from '@material-ui/core/Tab';
+
+const shortcuts=[
+	{ key: 'm', label: 'device.muteAudio', defaultMessage: 'Mute Audio' },
+	{ key: 'v', label: 'device.stopVideo', defaultMessage: 'Mute Video' },
+	{ key: '1', label: 'label.democratic', defaultMessage: 'Democratic View' },
+	{ key: '2', label: 'label.filmstrip', defaultMessage: 'Filmstrip View' },
+	{ key: 'space', label: 'me.mutedPTT', defaultMessage: 'Push SPACE to talk' },
+	{ key: 'a', label: 'label.advanced', defaultMessage: 'Show advanced information' }
+];
+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'
+			},
+			display       : 'flex',
+			flexDirection : 'column'
+		},
+		paper : {
+			padding      : theme.spacing(1),
+			textAlign    : 'center',
+			color        : theme.palette.text.secondary,
+			whiteSpace   : 'nowrap',
+			marginRight  : theme.spacing(3),
+			marginBottom : theme.spacing(1),
+			minWidth     : theme.spacing(8)
+		},
+		shortcuts : {
+			display       : 'flex',
+			flexDirection : 'row',
+			alignItems    : 'center'
+		},
+		tabsHeader :
+		{
+			flexGrow : 1
+		}
+	});
+
+const Help = ({
+	helpOpen,
+	handleCloseHelp,
+	classes
+}) =>
+{
+	const intl = useIntl();
+
+	return (
+		<Dialog
+			open={helpOpen}
+			onClose={() => { handleCloseHelp(false); }}
+			classes={{
+				paper : classes.dialogPaper
+			}}
+		>
+			<DialogTitle id='form-dialog-title'>
+				<FormattedMessage
+					id='room.help'
+					defaultMessage='Help'
+				/>
+			</DialogTitle>
+			<Tabs
+				className={classes.tabsHeader}
+				indicatorColor='primary'
+				textColor='primary'
+				variant='fullWidth'
+			>
+				<Tab
+					label={
+						intl.formatMessage({
+							id             : 'room.shortcutKeys',
+							defaultMessage : 'Shortcut keys'
+						})
+					}
+				/>
+			</Tabs>
+			<DialogContent dividers='true'>				
+				<DialogContentText>
+					{shortcuts.map((value, index) => 
+					{
+						return (
+							<div key={index} className={classes.shortcuts}>
+								<Paper className={classes.paper}>									
+									{value.key}
+								</Paper>
+								<FormattedMessage
+									id={value.label}
+									defaultMessage={value.defaultMessage}
+								/>
+							</div>
+						);
+					})}
+
+				</DialogContentText>
+			</DialogContent>
+			<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             : 'room.help',
+									defaultMessage : 'Help'
+								})}
+							/>
+							<p className={classes.moreAction}>
+								<FormattedMessage
+									id='room.help'
+									defaultMessage='Help'
+								/>
+							</p>
+						</MenuItem>
+						<MenuItem 
+							onClick={() => 
+							{
+								handleMenuClose();
+								setAboutOpen(!room.aboutOpen);
+							}}
+						>
+							<InfoIcon
+								aria-label={intl.formatMessage({
+									id             : 'room.about',
+									defaultMessage : 'About'
+								})}
+							/>
+							<p className={classes.moreAction}>
+								<FormattedMessage
+									id='room.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

@@ -26,6 +26,8 @@ import TopBar from './Controls/TopBar';
 import WakeLock from 'react-wakelock-react16';
 import ExtraVideo from './Controls/ExtraVideo';
 import ButtonControlBar from './Controls/ButtonControlBar';
+import Help from './Controls/Help';
+import About from './Controls/About';
 
 const TIMEOUT = window.config.hideTimeout || 5000;
 
@@ -231,6 +233,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;

app/src/translations/cn.json

@@ -60,6 +60,9 @@
 	"room.loweredHand": null,
 	"room.extraVideo": null,
 	"room.overRoomLimit": null,
+	"room.help": null,
+	"room.about": null,
+	"room.shortcutKeys": null,
 	
 	"me.mutedPTT": null,
 

app/src/translations/cs.json

@@ -59,6 +59,9 @@
 	"room.loweredHand": null,
 	"room.extraVideo": null,
 	"room.overRoomLimit": null,
+	"room.help": null,
+	"room.about": null,
+	"room.shortcutKeys": null,
 
 	"me.mutedPTT": null,
 

app/src/translations/de.json

@@ -60,6 +60,9 @@
 	"room.loweredHand": null,
 	"room.extraVideo": null,
 	"room.overRoomLimit": null,
+	"room.help": null,
+	"room.about": null,
+	"room.shortcutKeys": null,
 
 	"me.mutedPTT": "Du bist stummgeschalted, Halte die SPACE-Taste um zu sprechen",
 

app/src/translations/dk.json

@@ -60,6 +60,9 @@
 	"room.loweredHand": null,
 	"room.extraVideo": null,
 	"room.overRoomLimit": null,
+	"room.help": null,
+	"room.about": null,
+	"room.shortcutKeys": null,
 
 	"me.mutedPTT": null,
 

app/src/translations/el.json

@@ -60,6 +60,9 @@
 	"room.loweredHand": null,
 	"room.extraVideo": null,
 	"room.overRoomLimit": null,
+	"room.help": null,
+	"room.about": null,
+	"room.shortcutKeys": null,
 
 	"me.mutedPTT": null,
 

app/src/translations/en.json

@@ -60,6 +60,9 @@
 	"room.loweredHand": "{displayName} put their hand down",
 	"room.extraVideo": "Extra video",
 	"room.overRoomLimit": "The room is full, retry after some time.",
+	"room.help": "Help",
+	"room.about": "About",
+	"room.shortcutKeys": "Shortcut Keys",
 
 	"me.mutedPTT": "You are muted, hold down SPACE-BAR to talk",
 

app/src/translations/es.json

@@ -60,6 +60,9 @@
 	"room.loweredHand": null,
 	"room.extraVideo": null,
 	"room.overRoomLimit": null,
+	"room.help": null,
+	"room.about": null,
+	"room.shortcutKeys": null,
 
 	"me.mutedPTT": null,
 

app/src/translations/fr.json

@@ -60,6 +60,9 @@
 	"room.loweredHand": null,
 	"room.extraVideo": null,
 	"room.overRoomLimit": null,
+	"room.help": null,
+	"room.about": null,
+	"room.shortcutKeys": null,
 
 	"me.mutedPTT": null,
 

app/src/translations/hr.json

@@ -60,6 +60,9 @@
 	"room.loweredHand": "{displayName} je spustio ruku",
 	"room.extraVideo": "Dodatni video",
 	"room.overRoomLimit": "Soba je popunjena, pokušajte ponovno kasnije.",
+	"room.help": null,
+	"room.about": null,
+	"room.shortcutKeys": null,
 
 	"me.mutedPTT": "Utišani ste, pritisnite i držite SPACE tipku za razgovor",
 

app/src/translations/hu.json

@@ -60,6 +60,9 @@
 	"room.loweredHand": "{displayName} leeresztette a kezét",
 	"room.extraVideo": "Kiegészítő videó",
 	"room.overRoomLimit": "A konferenciaszoba betelt..",
+	"room.help": "Segítség",
+	"room.about": "Névjegy",
+	"room.shortcutKeys": "Billentyűparancsok",
 
 	"me.mutedPTT": "Némítva vagy, ha beszélnél nyomd le a szóköz billentyűt",
 

app/src/translations/it.json

@@ -60,6 +60,9 @@
 	"room.loweredHand": "{displayName} ha abbassato la mano",
 	"room.extraVideo": "Video extra",
 	"room.overRoomLimit": null,
+	"room.help": null,
+	"room.about": null,
+	"room.shortcutKeys": null,
 
 	"me.mutedPTT": "Sei mutato, tieni premuto SPAZIO per parlare",
 

app/src/translations/lv.json

@@ -59,6 +59,9 @@
 	"room.raisedHand": "{displayName} pacēla roku",
 	"room.loweredHand": "{displayName} nolaida roku",
 	"room.extraVideo": "Papildus video",
+	"room.help": null,
+	"room.about": null,
+	"room.shortcutKeys": null,
 
 	"me.mutedPTT": "Jūs esat noklusināts. Turiet taustiņu SPACE-BAR, lai runātu",
 

app/src/translations/nb.json

@@ -60,6 +60,9 @@
 	"room.loweredHand": "{displayName} tok ned hånden",
 	"room.extraVideo": "Ekstra video",
 	"room.overRoomLimit": "Rommet er fullt, prøv igjen om litt.",
+	"room.help": null,
+	"room.about": null,
+	"room.shortcutKeys": null,
 
 	"me.mutedPTT": "Du er dempet, hold nede SPACE for å snakke",
 

app/src/translations/pl.json

@@ -60,6 +60,9 @@
 	"room.loweredHand": null,
 	"room.extraVideo": null,
 	"room.overRoomLimit": null,
+	"room.help": null,
+	"room.about": null,
+	"room.shortcutKeys": null,
 
 	"me.mutedPTT": null,
 

app/src/translations/pt.json

@@ -60,6 +60,9 @@
 	"room.loweredHand": null,
 	"room.extraVideo": null,
 	"room.overRoomLimit": null,
+	"room.help": null,
+	"room.about": null,
+	"room.shortcutKeys": null,
 
 	"me.mutedPTT": null,
 

app/src/translations/ro.json

@@ -60,6 +60,9 @@
 	"room.loweredHand": null,
 	"room.extraVideo": null,
 	"room.overRoomLimit": null,
+	"room.help": null,
+	"room.about": null,
+	"room.shortcutKeys": null,
 
 	"me.mutedPTT": null,
 

app/src/translations/tr.json

@@ -60,6 +60,9 @@
 	"room.loweredHand": null,
 	"room.extraVideo": null,
 	"room.overRoomLimit": null,
+	"room.help": null,
+	"room.about": null,
+	"room.shortcutKeys": null,
 
 	"me.mutedPTT": null,
 

app/src/translations/uk.json

@@ -60,6 +60,9 @@
 	"room.loweredHand": null,
 	"room.extraVideo": null,
 	"room.overRoomLimit": null,
+	"room.help": null,
+	"room.about": null,
+	"room.shortcutKeys": null,
 
 	"me.mutedPTT": null,