diff --git a/app/src/actions/roomActions.js b/app/src/actions/roomActions.js index b90bf1b..7c44835 100644 --- a/app/src/actions/roomActions.js +++ b/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', diff --git a/app/src/components/Controls/About.js b/app/src/components/Controls/About.js new file mode 100644 index 0000000..d361a8c --- /dev/null +++ b/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 ( + handleCloseAbout(false)} + classes={{ + paper : classes.dialogPaper + }} + > + + + + + + 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.
+
+ 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. + + + https://edumeet.org + + + + { window.config.logo && Logo } + + + + ); +}; + +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))); \ No newline at end of file diff --git a/app/src/components/Controls/Help.js b/app/src/components/Controls/Help.js new file mode 100644 index 0000000..3091ec4 --- /dev/null +++ b/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 ( + { handleCloseHelp(false); }} + classes={{ + paper : classes.dialogPaper + }} + > + + + + + + + + + {shortcuts.map((value, index) => + { + return ( +
+ + {value.key} + + +
+ ); + })} + + + + + + + + ); +}; + +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))); diff --git a/app/src/components/Controls/TopBar.js b/app/src/components/Controls/TopBar.js index 6422788..43ee13f 100644 --- a/app/src/components/Controls/TopBar.js +++ b/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) => />

+ + { + handleMenuClose(); + setHelpOpen(!room.helpOpen); + }} + > + +

+ +

+ + + { + handleMenuClose(); + setAboutOpen(!room.aboutOpen); + }} + > + +

+ +

+ } @@ -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)); diff --git a/app/src/components/Room.js b/app/src/components/Room.js index b6027ba..d021132 100644 --- a/app/src/components/Room.js +++ b/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 && } + { room.helpOpen && + + } + { room.aboutOpen && + + } + ); } diff --git a/app/src/reducers/room.js b/app/src/reducers/room.js index 6d47d42..1a4b99e 100644 --- a/app/src/reducers/room.js +++ b/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; diff --git a/app/src/translations/cn.json b/app/src/translations/cn.json index 7da15eb..df97372 100644 --- a/app/src/translations/cn.json +++ b/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, diff --git a/app/src/translations/cs.json b/app/src/translations/cs.json index ee859d2..f73144e 100644 --- a/app/src/translations/cs.json +++ b/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, diff --git a/app/src/translations/de.json b/app/src/translations/de.json index 428d104..d141ae9 100644 --- a/app/src/translations/de.json +++ b/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", diff --git a/app/src/translations/dk.json b/app/src/translations/dk.json index c74026f..a0bc95f 100644 --- a/app/src/translations/dk.json +++ b/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, diff --git a/app/src/translations/el.json b/app/src/translations/el.json index 10047cf..c21ef1d 100644 --- a/app/src/translations/el.json +++ b/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, diff --git a/app/src/translations/en.json b/app/src/translations/en.json index 475acd2..4b33dbd 100644 --- a/app/src/translations/en.json +++ b/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", diff --git a/app/src/translations/es.json b/app/src/translations/es.json index 6c757cd..9bf9744 100644 --- a/app/src/translations/es.json +++ b/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, diff --git a/app/src/translations/fr.json b/app/src/translations/fr.json index 73493f5..2b74da9 100644 --- a/app/src/translations/fr.json +++ b/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, diff --git a/app/src/translations/hr.json b/app/src/translations/hr.json index 22db8fa..9d55c44 100644 --- a/app/src/translations/hr.json +++ b/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", diff --git a/app/src/translations/hu.json b/app/src/translations/hu.json index 8c68590..1b2db12 100644 --- a/app/src/translations/hu.json +++ b/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", diff --git a/app/src/translations/it.json b/app/src/translations/it.json index ba849d9..8ce1764 100644 --- a/app/src/translations/it.json +++ b/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}", diff --git a/app/src/translations/lv.json b/app/src/translations/lv.json index 6d4e97b..5a39315 100644 --- a/app/src/translations/lv.json +++ b/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", diff --git a/app/src/translations/nb.json b/app/src/translations/nb.json index ea9b0b8..139341a 100644 --- a/app/src/translations/nb.json +++ b/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", diff --git a/app/src/translations/pl.json b/app/src/translations/pl.json index 859a29f..4c8f28a 100644 --- a/app/src/translations/pl.json +++ b/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, diff --git a/app/src/translations/pt.json b/app/src/translations/pt.json index 7faed7c..df2bf73 100644 --- a/app/src/translations/pt.json +++ b/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, diff --git a/app/src/translations/ro.json b/app/src/translations/ro.json index 3188e91..fe7fb50 100644 --- a/app/src/translations/ro.json +++ b/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, diff --git a/app/src/translations/tr.json b/app/src/translations/tr.json index aa6a8cb..4a105d4 100644 --- a/app/src/translations/tr.json +++ b/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, diff --git a/app/src/translations/uk.json b/app/src/translations/uk.json index 4932fc4..71ead8e 100644 --- a/app/src/translations/uk.json +++ b/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,