Add shotcuts to help and add labels

app/src/components/Controls/Help.js

@@ -4,13 +4,26 @@ 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 { 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 :
@@ -31,7 +44,27 @@ const styles = (theme) =>
 			[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
 		}
 	});
 
@@ -41,6 +74,8 @@ const Help = ({
 	classes
 }) =>
 {
+	const intl = useIntl();
+
 	return (
 		<Dialog
 			open={helpOpen}
@@ -55,6 +90,40 @@ const 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
@@ -96,4 +165,4 @@ export default withRoomContext(connect(
 			);
 		}
 	}
-)(withStyles(styles)(Help)));
+)(withStyles(styles)(Help)));

app/src/components/Controls/TopBar.js

@@ -496,13 +496,13 @@ const TopBar = (props) =>
 						>
 							<HelpIcon
 								aria-label={intl.formatMessage({
-									id             : 'label.help',
+									id             : 'room.help',
 									defaultMessage : 'Help'
 								})}
 							/>
 							<p className={classes.moreAction}>
 								<FormattedMessage
-									id='label.help'
+									id='room.help'
 									defaultMessage='Help'
 								/>
 							</p>
@@ -516,13 +516,13 @@ const TopBar = (props) =>
 						>
 							<InfoIcon
 								aria-label={intl.formatMessage({
-									id             : 'label.about',
+									id             : 'room.about',
 									defaultMessage : 'About'
 								})}
 							/>
 							<p className={classes.moreAction}>
 								<FormattedMessage
-									id='label.about'
+									id='room.about'
 									defaultMessage='About'
 								/>
 							</p>

app/src/translations/cn.json

@@ -60,7 +60,10 @@
 	"room.loweredHand": null,
 	"room.extraVideo": null,
 	"room.overRoomLimit": null,
-
+	"room.help": null,
+	"room.about": null,
+	"room.shortcutKeys": null,
+	
 	"me.mutedPTT": null,
 
 	"roles.gotRole": 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,7 +60,10 @@
 	"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",
 
 	"roles.gotRole": "Hai ottenuto il ruolo: {role}",

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,