Added raise hand button back to UI, fixes #40

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'
+			display  : 'flex',
-		},
+			padding  : theme.spacing(1)
-		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,
 			alignItems  : 'center'
 		},
-		indicators :
+		green :
 		{
-			left           : 0,
+			color : 'rgba(0, 153, 0, 1)'
-			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
-			}
 		}
 	});
 
 const ListMe = (props) =>
 {
+	const intl = useIntl();
+
 	const {
+		roomClient,
 		me,
 		settings,
 		classes
@@ -82,26 +53,35 @@ const ListMe = (props) =>
 	const picture = me.picture || EmptyAvatar;
 
 	return (
-		<li className={classes.root}>
+		<div className={classes.root}>
-			<div className={classes.listPeer}>
 			<img alt='My avatar' className={classes.avatar} src={picture} />
 
 			<div className={classes.peerInfo}>
 				{settings.displayName}
 			</div>
+			<IconButton
+				aria-label={intl.formatMessage({
+					id             : 'tooltip.raisedHand',
+					defaultMessage : 'Raise hand'
+				})}
+				className={me.raisedHand ? classes.green : null}
+				disabled={me.raisedHandInProgress}
+				onClick={(e) =>
+				{
+					e.stopPropagation();
 
-				<div className={classes.indicators}>
+					roomClient.setRaisedHand(!me.raisedHand);
-					{ me.raisedHand &&
+				}}
-						<div className={classnames(classes.icon, 'raisedHand')} />
+			>
-					}
+				<PanIcon />
+			</IconButton>
 		</div>
-			</div>
-		</li>
 	);
 };
 
 ListMe.propTypes =
 {
+	roomClient : PropTypes.object.isRequired,
 	me         : appPropTypes.Me.isRequired,
 	settings   : PropTypes.object.isRequired,
 	classes    : PropTypes.object.isRequired
@@ -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)));

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',
+			padding : theme.spacing(1.5)
-			justifyContent : 'flex-start',
-			alignItems     : 'center',
-			transition     : 'opacity 0.3s'
 		},
-		icon :
+		green :
 		{
-			flex               : '0 0 auto',
+			color : 'rgba(0, 153, 0, 1)'
-			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'
 		}
 	});
 
@@ -141,19 +95,9 @@ const ListPeer = (props) =>
 			</div>
 			<div className={classes.indicators}>
 				{ peer.raisedHand &&
-					<div className={
+					<PanIcon className={classes.green} />
-						classnames(
-							classes.icon, 'raisedHand', {
-								on  : peer.raisedHand,
-								off : !peer.raisedHand
-							}
-						)
-					}
-					/>
 				}
 			</div>
-			{children}
-			<div className={classes.controls}>
 			{ screenConsumer &&
 				<IconButton
 					aria-label={intl.formatMessage({
@@ -239,7 +183,7 @@ const ListPeer = (props) =>
 					<ExitIcon />
 				</IconButton>
 			}
-			</div>
+			{children}
 		</div>
 	);
 };

app/src/images/icon-hand-black.svg

@@ -1,26 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   version="1.1"
-   id="Layer_1"
-   x="0px"
-   y="0px"
-   viewBox="0 0 96 96"
-   style="enable-background:new 0 0 96 96;"
-   xml:space="preserve">
-   <metadata
-     id="metadata11"><rdf:RDF><cc:Work
-         rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata>
-           <defs
-     id="defs9" />
-  <path
-     style="fill:#000000;stroke-width:0.40677965"
-     d="m 33.894283,77.837288 c -1.428534,-1.845763 -3.909722,-5.220659 -5.513751,-7.499764 -1.60403,-2.279109 -4.323663,-5.940126 -6.043631,-8.135593 -5.698554,-7.273973 -6.224902,-8.044795 -6.226676,-9.118803 -0.0034,-2.075799 2.81181,-4.035355 4.9813,-3.467247 0.50339,0.131819 2.562712,1.72771 4.576272,3.546423 4.238418,3.828283 6.617166,5.658035 7.355654,5.658035 0.82497,0 1.045415,-1.364294 0.567453,-3.511881 C 33.348583,54.219654 31.1088,48.20339 28.613609,41.938983 23.524682,29.162764 23.215312,27.731034 25.178629,26.04226 c 2.443255,-2.101599 4.670178,-1.796504 6.362271,0.87165 0.639176,1.007875 2.666245,5.291978 4.504599,9.520229 1.838354,4.228251 3.773553,8.092718 4.300442,8.587705 l 0.957981,0.899977 0.419226,-1.102646 c 0.255274,-0.671424 0.419225,-6.068014 0.419225,-13.799213 0,-13.896836 -0.0078,-13.84873 2.44517,-15.1172 1.970941,-1.019214 4.2259,-0.789449 5.584354,0.569005 l 1.176852,1.176852 0.483523,11.738402 c 0.490017,11.896027 0.826095,14.522982 1.911266,14.939402 1.906224,0.731486 2.21601,-0.184677 4.465407,-13.206045 1.239206,-7.173539 1.968244,-10.420721 2.462128,-10.966454 1.391158,-1.537215 4.742705,-1.519809 6.295208,0.03269 1.147387,1.147388 1.05469,3.124973 -0.669503,14.283063 -0.818745,5.298489 -1.36667,10.090163 -1.220432,10.67282 0.14596,0.581557 0.724796,1.358395 1.286298,1.726306 0.957759,0.627548 1.073422,0.621575 1.86971,-0.09655 0.466837,-0.421011 1.761787,-2.595985 2.877665,-4.833273 2.564176,-5.141059 3.988466,-6.711864 6.085822,-6.711864 2.769954,0 3.610947,2.927256 2.139316,7.446329 C 78.799497,44.318351 66.752066,77.28024 65.51653,80.481356 65.262041,81.140709 64.18139,81.19322 50.866695,81.19322 H 36.491617 Z"
-     id="path3710"/>
-</svg>

app/src/images/icon-hand-white.svg

@@ -1,26 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   version="1.1"
-   id="Layer_1"
-   x="0px"
-   y="0px"
-   viewBox="0 0 96 96"
-   style="enable-background:new 0 0 96 96;"
-   xml:space="preserve">
-   <metadata
-     id="metadata11"><rdf:RDF><cc:Work
-         rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata>
-           <defs
-     id="defs9" />
-  <path
-     style="fill:#ffffff;stroke-width:0.40677965"
-     d="m 33.894283,77.837288 c -1.428534,-1.845763 -3.909722,-5.220659 -5.513751,-7.499764 -1.60403,-2.279109 -4.323663,-5.940126 -6.043631,-8.135593 -5.698554,-7.273973 -6.224902,-8.044795 -6.226676,-9.118803 -0.0034,-2.075799 2.81181,-4.035355 4.9813,-3.467247 0.50339,0.131819 2.562712,1.72771 4.576272,3.546423 4.238418,3.828283 6.617166,5.658035 7.355654,5.658035 0.82497,0 1.045415,-1.364294 0.567453,-3.511881 C 33.348583,54.219654 31.1088,48.20339 28.613609,41.938983 23.524682,29.162764 23.215312,27.731034 25.178629,26.04226 c 2.443255,-2.101599 4.670178,-1.796504 6.362271,0.87165 0.639176,1.007875 2.666245,5.291978 4.504599,9.520229 1.838354,4.228251 3.773553,8.092718 4.300442,8.587705 l 0.957981,0.899977 0.419226,-1.102646 c 0.255274,-0.671424 0.419225,-6.068014 0.419225,-13.799213 0,-13.896836 -0.0078,-13.84873 2.44517,-15.1172 1.970941,-1.019214 4.2259,-0.789449 5.584354,0.569005 l 1.176852,1.176852 0.483523,11.738402 c 0.490017,11.896027 0.826095,14.522982 1.911266,14.939402 1.906224,0.731486 2.21601,-0.184677 4.465407,-13.206045 1.239206,-7.173539 1.968244,-10.420721 2.462128,-10.966454 1.391158,-1.537215 4.742705,-1.519809 6.295208,0.03269 1.147387,1.147388 1.05469,3.124973 -0.669503,14.283063 -0.818745,5.298489 -1.36667,10.090163 -1.220432,10.67282 0.14596,0.581557 0.724796,1.358395 1.286298,1.726306 0.957759,0.627548 1.073422,0.621575 1.86971,-0.09655 0.466837,-0.421011 1.761787,-2.595985 2.877665,-4.833273 2.564176,-5.141059 3.988466,-6.711864 6.085822,-6.711864 2.769954,0 3.610947,2.927256 2.139316,7.446329 C 78.799497,44.318351 66.752066,77.28024 65.51653,80.481356 65.262041,81.140709 64.18139,81.19322 50.866695,81.19322 H 36.491617 Z"
-     id="path3710"/>
-</svg>

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": "继续",

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",

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",

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",

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": "Συνέχεια",

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",

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",

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",

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",

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",

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",

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",

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",

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",

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",

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",

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": "Продовжити",