From d76682b6c807024cdd1cca9ae2c82748573ee3e6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?H=C3=A5var=20Aamb=C3=B8=20Fosstveit?= Date: Sat, 2 May 2020 13:34:19 +0200 Subject: [PATCH] Added raise hand button back to UI, fixes #40 --- .../MeetingDrawer/ParticipantList/ListMe.js | 100 +++----- .../MeetingDrawer/ParticipantList/ListPeer.js | 242 +++++++----------- app/src/images/icon-hand-black.svg | 26 -- app/src/images/icon-hand-white.svg | 26 -- app/src/translations/cn.json | 1 + app/src/translations/cs.json | 1 + app/src/translations/de.json | 1 + app/src/translations/dk.json | 1 + app/src/translations/el.json | 1 + app/src/translations/en.json | 1 + app/src/translations/es.json | 1 + app/src/translations/fr.json | 1 + app/src/translations/hr.json | 1 + app/src/translations/hu.json | 1 + app/src/translations/it.json | 1 + app/src/translations/nb.json | 1 + app/src/translations/pl.json | 1 + app/src/translations/pt.json | 1 + app/src/translations/ro.json | 1 + app/src/translations/tr.json | 1 + app/src/translations/uk.json | 1 + 21 files changed, 150 insertions(+), 261 deletions(-) delete mode 100644 app/src/images/icon-hand-black.svg delete mode 100644 app/src/images/icon-hand-white.svg diff --git a/app/src/components/MeetingDrawer/ParticipantList/ListMe.js b/app/src/components/MeetingDrawer/ParticipantList/ListMe.js index cadfed9..0bc8446 100644 --- a/app/src/components/MeetingDrawer/ParticipantList/ListMe.js +++ b/app/src/components/MeetingDrawer/ParticipantList/ListMe.js @@ -1,79 +1,50 @@ import React from 'react'; import { connect } from 'react-redux'; import { withStyles } from '@material-ui/core/styles'; -import classnames from 'classnames'; +import { withRoomContext } from '../../../RoomContext'; import PropTypes from 'prop-types'; import * as appPropTypes from '../../appPropTypes'; +import { useIntl } from 'react-intl'; +import IconButton from '@material-ui/core/IconButton'; +import PanIcon from '@material-ui/icons/PanTool'; import EmptyAvatar from '../../../images/avatar-empty.jpeg'; -import HandIcon from '../../../images/icon-hand-white.svg'; const styles = (theme) => ({ root : { - padding : theme.spacing(1), width : '100%', overflow : 'hidden', cursor : 'auto', - display : 'flex' - }, - listPeer : - { - display : 'flex' + display : 'flex', + padding : theme.spacing(1) }, avatar : { borderRadius : '50%', - height : '2rem' + height : '2rem', + marginTop : theme.spacing(1) }, peerInfo : { fontSize : '1rem', - border : 'none', display : 'flex', paddingLeft : theme.spacing(1), flexGrow : 1, alignItems : 'center' }, - indicators : + green : { - left : 0, - top : 0, - display : 'flex', - flexDirection : 'row', - justifyContent : 'flex-start', - alignItems : 'center', - transition : 'opacity 0.3s' - }, - icon : - { - flex : '0 0 auto', - margin : '0.3rem', - borderRadius : 2, - backgroundPosition : 'center', - backgroundSize : '75%', - backgroundRepeat : 'no-repeat', - backgroundColor : 'rgba(0, 0, 0, 0.5)', - transitionProperty : 'opacity, background-color', - transitionDuration : '0.15s', - width : 'var(--media-control-button-size)', - height : 'var(--media-control-button-size)', - opacity : 0.85, - '&:hover' : - { - opacity : 1 - }, - '&.raisedHand' : - { - backgroundImage : `url(${HandIcon})`, - opacity : 1 - } + color : 'rgba(0, 153, 0, 1)' } }); const ListMe = (props) => { + const intl = useIntl(); + const { + roomClient, me, settings, classes @@ -82,29 +53,38 @@ const ListMe = (props) => const picture = me.picture || EmptyAvatar; return ( -
  • -
    - My avatar +
    + My avatar -
    - {settings.displayName} -
    - -
    - { me.raisedHand && -
    - } -
    +
    + {settings.displayName}
    -
    • + + { + e.stopPropagation(); + + roomClient.setRaisedHand(!me.raisedHand); + }} + > + + + ); }; ListMe.propTypes = { - me : appPropTypes.Me.isRequired, - settings : PropTypes.object.isRequired, - classes : PropTypes.object.isRequired + roomClient : PropTypes.object.isRequired, + me : appPropTypes.Me.isRequired, + settings : PropTypes.object.isRequired, + classes : PropTypes.object.isRequired }; const mapStateToProps = (state) => ({ @@ -112,7 +92,7 @@ const mapStateToProps = (state) => ({ settings : state.settings }); -export default connect( +export default withRoomContext(connect( mapStateToProps, null, null, @@ -125,4 +105,4 @@ export default connect( ); } } -)(withStyles(styles)(ListMe)); +)(withStyles(styles)(ListMe))); diff --git a/app/src/components/MeetingDrawer/ParticipantList/ListPeer.js b/app/src/components/MeetingDrawer/ParticipantList/ListPeer.js index 7578268..d4b1409 100644 --- a/app/src/components/MeetingDrawer/ParticipantList/ListPeer.js +++ b/app/src/components/MeetingDrawer/ParticipantList/ListPeer.js @@ -3,7 +3,6 @@ import { connect } from 'react-redux'; import { makePeerConsumerSelector } from '../../Selectors'; import { withStyles } from '@material-ui/core/styles'; import PropTypes from 'prop-types'; -import classnames from 'classnames'; import * as appPropTypes from '../../appPropTypes'; import { withRoomContext } from '../../../RoomContext'; import { useIntl } from 'react-intl'; @@ -16,31 +15,26 @@ import ScreenIcon from '@material-ui/icons/ScreenShare'; import ScreenOffIcon from '@material-ui/icons/StopScreenShare'; import ExitIcon from '@material-ui/icons/ExitToApp'; import EmptyAvatar from '../../../images/avatar-empty.jpeg'; -import HandIcon from '../../../images/icon-hand-white.svg'; +import PanIcon from '@material-ui/icons/PanTool'; const styles = (theme) => ({ root : { - padding : theme.spacing(1), width : '100%', overflow : 'hidden', cursor : 'auto', display : 'flex' }, - listPeer : - { - display : 'flex' - }, avatar : { borderRadius : '50%', - height : '2rem' + height : '2rem', + marginTop : theme.spacing(1) }, peerInfo : { fontSize : '1rem', - border : 'none', display : 'flex', paddingLeft : theme.spacing(1), flexGrow : 1, @@ -48,52 +42,12 @@ const styles = (theme) => }, indicators : { - left : 0, - top : 0, - display : 'flex', - flexDirection : 'row', - justifyContent : 'flex-start', - alignItems : 'center', - transition : 'opacity 0.3s' + display : 'flex', + padding : theme.spacing(1.5) }, - icon : + green : { - flex : '0 0 auto', - margin : '0.3rem', - borderRadius : 2, - backgroundPosition : 'center', - backgroundSize : '75%', - backgroundRepeat : 'no-repeat', - backgroundColor : 'rgba(0, 0, 0, 0.5)', - transitionProperty : 'opacity, background-color', - transitionDuration : '0.15s', - width : 'var(--media-control-button-size)', - height : 'var(--media-control-button-size)', - opacity : 0.85, - '&:hover' : - { - opacity : 1 - }, - '&.on' : - { - opacity : 1 - }, - '&.off' : - { - opacity : 0.2 - }, - '&.raisedHand' : - { - backgroundImage : `url(${HandIcon})` - } - }, - controls : - { - float : 'right', - display : 'flex', - flexDirection : 'row', - justifyContent : 'flex-start', - alignItems : 'center' + color : 'rgba(0, 153, 0, 1)' } }); @@ -141,105 +95,95 @@ const ListPeer = (props) =>
    { peer.raisedHand && -
    + }
    + { screenConsumer && + + { + e.stopPropagation(); + + screenVisible ? + roomClient.modifyPeerConsumer(peer.id, 'screen', true) : + roomClient.modifyPeerConsumer(peer.id, 'screen', false); + }} + > + { screenVisible ? + + : + + } + + } + + { + e.stopPropagation(); + + webcamEnabled ? + roomClient.modifyPeerConsumer(peer.id, 'webcam', true) : + roomClient.modifyPeerConsumer(peer.id, 'webcam', false); + }} + > + { webcamEnabled ? + + : + + } + + + { + e.stopPropagation(); + + micEnabled ? + roomClient.modifyPeerConsumer(peer.id, 'mic', true) : + roomClient.modifyPeerConsumer(peer.id, 'mic', false); + }} + > + { micEnabled ? + + : + + } + + { isModerator && + + { + e.stopPropagation(); + + roomClient.kickPeer(peer.id); + }} + > + + + } {children} -
    - { screenConsumer && - - { - e.stopPropagation(); - - screenVisible ? - roomClient.modifyPeerConsumer(peer.id, 'screen', true) : - roomClient.modifyPeerConsumer(peer.id, 'screen', false); - }} - > - { screenVisible ? - - : - - } - - } - - { - e.stopPropagation(); - - webcamEnabled ? - roomClient.modifyPeerConsumer(peer.id, 'webcam', true) : - roomClient.modifyPeerConsumer(peer.id, 'webcam', false); - }} - > - { webcamEnabled ? - - : - - } - - - { - e.stopPropagation(); - - micEnabled ? - roomClient.modifyPeerConsumer(peer.id, 'mic', true) : - roomClient.modifyPeerConsumer(peer.id, 'mic', false); - }} - > - { micEnabled ? - - : - - } - - { isModerator && - - { - e.stopPropagation(); - - roomClient.kickPeer(peer.id); - }} - > - - - } -
    ); }; diff --git a/app/src/images/icon-hand-black.svg b/app/src/images/icon-hand-black.svg deleted file mode 100644 index 8f0f065..0000000 --- a/app/src/images/icon-hand-black.svg +++ /dev/null @@ -1,26 +0,0 @@ - - - - image/svg+xml - - - diff --git a/app/src/images/icon-hand-white.svg b/app/src/images/icon-hand-white.svg deleted file mode 100644 index 0e2f05f..0000000 --- a/app/src/images/icon-hand-white.svg +++ /dev/null @@ -1,26 +0,0 @@ - - - - image/svg+xml - - - diff --git a/app/src/translations/cn.json b/app/src/translations/cn.json index ce6f28b..39c140e 100644 --- a/app/src/translations/cn.json +++ b/app/src/translations/cn.json @@ -75,6 +75,7 @@ "tooltip.kickParticipant": null, "tooltip.muteParticipant": null, "tooltip.muteParticipantVideo": null, + "tooltip.raisedHand": null, "label.roomName": "房间名称", "label.chooseRoomButton": "继续", diff --git a/app/src/translations/cs.json b/app/src/translations/cs.json index 6b4c339..01bb98f 100644 --- a/app/src/translations/cs.json +++ b/app/src/translations/cs.json @@ -74,6 +74,7 @@ "tooltip.kickParticipant": null, "tooltip.muteParticipant": null, "tooltip.muteParticipantVideo": null, + "tooltip.raisedHand": null, "label.roomName": "Jméno místnosti", "label.chooseRoomButton": "Pokračovat", diff --git a/app/src/translations/de.json b/app/src/translations/de.json index e530c7c..54d7e03 100644 --- a/app/src/translations/de.json +++ b/app/src/translations/de.json @@ -75,6 +75,7 @@ "tooltip.kickParticipant": "Teilnehmer rauswerfen", "tooltip.muteParticipant": null, "tooltip.muteParticipantVideo": null, + "tooltip.raisedHand": null, "label.roomName": "Name des Raums", "label.chooseRoomButton": "Weiter", diff --git a/app/src/translations/dk.json b/app/src/translations/dk.json index af8863b..b475816 100644 --- a/app/src/translations/dk.json +++ b/app/src/translations/dk.json @@ -75,6 +75,7 @@ "tooltip.kickParticipant": null, "tooltip.muteParticipant": null, "tooltip.muteParticipantVideo": null, + "tooltip.raisedHand": null, "label.roomName": "Værelsesnavn", "label.chooseRoomButton": "Fortsæt", diff --git a/app/src/translations/el.json b/app/src/translations/el.json index cb3c3f1..8a93b44 100644 --- a/app/src/translations/el.json +++ b/app/src/translations/el.json @@ -75,6 +75,7 @@ "tooltip.kickParticipant": null, "tooltip.muteParticipant": null, "tooltip.muteParticipantVideo": null, + "tooltip.raisedHand": null, "label.roomName": "Όνομα δωματίου", "label.chooseRoomButton": "Συνέχεια", diff --git a/app/src/translations/en.json b/app/src/translations/en.json index 9df2d8c..c2c814f 100644 --- a/app/src/translations/en.json +++ b/app/src/translations/en.json @@ -75,6 +75,7 @@ "tooltip.kickParticipant": "Kick out participant", "tooltip.muteParticipant": "Mute participant", "tooltip.muteParticipantVideo": "Mute participant video", + "tooltip.raisedHand": "Raise hand", "label.roomName": "Room name", "label.chooseRoomButton": "Continue", diff --git a/app/src/translations/es.json b/app/src/translations/es.json index 0974d89..e3cd91f 100644 --- a/app/src/translations/es.json +++ b/app/src/translations/es.json @@ -75,6 +75,7 @@ "tooltip.kickParticipant": null, "tooltip.muteParticipant": null, "tooltip.muteParticipantVideo": null, + "tooltip.raisedHand": null, "label.roomName": "Nombre de la sala", "label.chooseRoomButton": "Continuar", diff --git a/app/src/translations/fr.json b/app/src/translations/fr.json index f51959c..f0f4c03 100644 --- a/app/src/translations/fr.json +++ b/app/src/translations/fr.json @@ -75,6 +75,7 @@ "tooltip.kickParticipant": null, "tooltip.muteParticipant": null, "tooltip.muteParticipantVideo": null, + "tooltip.raisedHand": null, "label.roomName": "Nom de la salle", "label.chooseRoomButton": "Continuer", diff --git a/app/src/translations/hr.json b/app/src/translations/hr.json index 0126080..198e7b9 100644 --- a/app/src/translations/hr.json +++ b/app/src/translations/hr.json @@ -75,6 +75,7 @@ "tooltip.kickParticipant": "Izbaci sudionika", "tooltip.muteParticipant": null, "tooltip.muteParticipantVideo": null, + "tooltip.raisedHand": null, "label.roomName": "Naziv sobe", "label.chooseRoomButton": "Nastavi", diff --git a/app/src/translations/hu.json b/app/src/translations/hu.json index a02ad2c..6e1b8b2 100644 --- a/app/src/translations/hu.json +++ b/app/src/translations/hu.json @@ -75,6 +75,7 @@ "tooltip.kickParticipant": null, "tooltip.muteParticipant": null, "tooltip.muteParticipantVideo": null, + "tooltip.raisedHand": null, "label.roomName": "Konferencia", "label.chooseRoomButton": "Tovább", diff --git a/app/src/translations/it.json b/app/src/translations/it.json index d9abab0..3554a5f 100644 --- a/app/src/translations/it.json +++ b/app/src/translations/it.json @@ -74,6 +74,7 @@ "tooltip.participants": "Mostra partecipanti", "tooltip.muteParticipant": null, "tooltip.muteParticipantVideo": null, + "tooltip.raisedHand": null, "label.roomName": "Nome della stanza", "label.chooseRoomButton": "Continua", diff --git a/app/src/translations/nb.json b/app/src/translations/nb.json index 146bf9e..d164132 100644 --- a/app/src/translations/nb.json +++ b/app/src/translations/nb.json @@ -75,6 +75,7 @@ "tooltip.kickParticipant": "Spark ut deltaker", "tooltip.muteParticipant": "Demp deltaker", "tooltip.muteParticipantVideo": "Demp deltakervideo", + "tooltip.raisedHand": "Rekk opp hånden", "label.roomName": "Møtenavn", "label.chooseRoomButton": "Fortsett", diff --git a/app/src/translations/pl.json b/app/src/translations/pl.json index 97034e1..0f3ff78 100644 --- a/app/src/translations/pl.json +++ b/app/src/translations/pl.json @@ -75,6 +75,7 @@ "tooltip.kickParticipant": null, "tooltip.muteParticipant": null, "tooltip.muteParticipantVideo": null, + "tooltip.raisedHand": null, "label.roomName": "Nazwa konferencji", "label.chooseRoomButton": "Kontynuuj", diff --git a/app/src/translations/pt.json b/app/src/translations/pt.json index 7149910..8ba5f23 100644 --- a/app/src/translations/pt.json +++ b/app/src/translations/pt.json @@ -75,6 +75,7 @@ "tooltip.kickParticipant": null, "tooltip.muteParticipant": null, "tooltip.muteParticipantVideo": null, + "tooltip.raisedHand": null, "label.roomName": "Nome da sala", "label.chooseRoomButton": "Continuar", diff --git a/app/src/translations/ro.json b/app/src/translations/ro.json index 5fce442..d644f14 100644 --- a/app/src/translations/ro.json +++ b/app/src/translations/ro.json @@ -75,6 +75,7 @@ "tooltip.kickParticipant": null, "tooltip.muteParticipant": null, "tooltip.muteParticipantVideo": null, + "tooltip.raisedHand": null, "label.roomName": "Numele camerei", "label.chooseRoomButton": "Continuare", diff --git a/app/src/translations/tr.json b/app/src/translations/tr.json index 835013e..cbca7c8 100644 --- a/app/src/translations/tr.json +++ b/app/src/translations/tr.json @@ -75,6 +75,7 @@ "tooltip.kickParticipant": null, "tooltip.muteParticipant": null, "tooltip.muteParticipantVideo": null, + "tooltip.raisedHand": null, "label.roomName": "Oda adı", "label.chooseRoomButton": "Devam", diff --git a/app/src/translations/uk.json b/app/src/translations/uk.json index f3d6aea..60c569d 100644 --- a/app/src/translations/uk.json +++ b/app/src/translations/uk.json @@ -75,6 +75,7 @@ "tooltip.kickParticipant": null, "tooltip.muteParticipant": null, "tooltip.muteParticipantVideo": null, + "tooltip.raisedHand": null, "label.roomName": "Назва кімнати", "label.chooseRoomButton": "Продовжити",