Add tooltips to participant list, fixes #299

app/src/components/MeetingDrawer/ParticipantList/ListMe.js

@@ -6,6 +6,7 @@ import PropTypes from 'prop-types';
 import * as appPropTypes from '../../appPropTypes';
 import { useIntl } from 'react-intl';
 import IconButton from '@material-ui/core/IconButton';
+import Tooltip from '@material-ui/core/Tooltip';
 import PanIcon from '@material-ui/icons/PanTool';
 import EmptyAvatar from '../../../images/avatar-empty.jpeg';
 
@@ -58,23 +59,31 @@ const ListMe = (props) =>
 			<div className={classes.peerInfo}>
 				{settings.displayName}
 			</div>
-			<IconButton
+			<Tooltip
-				aria-label={intl.formatMessage({
+				title={intl.formatMessage({
 					id             : 'tooltip.raisedHand',
 					defaultMessage : 'Raise hand'
 				})}
-				className={me.raisedHand ? classes.green : null}
+				placement='bottom'
-				disabled={me.raisedHandInProgress}
-				color='primary'
-				onClick={(e) =>
-				{
-					e.stopPropagation();
-
-					roomClient.setRaisedHand(!me.raisedHand);
-				}}
 			>
-				<PanIcon />
+				<IconButton
-			</IconButton>
+					aria-label={intl.formatMessage({
+						id             : 'tooltip.raisedHand',
+						defaultMessage : 'Raise hand'
+					})}
+					className={me.raisedHand ? classes.green : null}
+					disabled={me.raisedHandInProgress}
+					color='primary'
+					onClick={(e) =>
+					{
+						e.stopPropagation();
+
+						roomClient.setRaisedHand(!me.raisedHand);
+					}}
+				>
+					<PanIcon />
+				</IconButton>
+			</Tooltip>
 		</div>
 	);
 };

app/src/components/MeetingDrawer/ParticipantList/ListPeer.js

@@ -7,6 +7,7 @@ import * as appPropTypes from '../../appPropTypes';
 import { withRoomContext } from '../../../RoomContext';
 import { useIntl } from 'react-intl';
 import IconButton from '@material-ui/core/IconButton';
+import Tooltip from '@material-ui/core/Tooltip';
 import VideocamIcon from '@material-ui/icons/Videocam';
 import VideocamOffIcon from '@material-ui/icons/VideocamOff';
 import VolumeUpIcon from '@material-ui/icons/VolumeUp';
@@ -99,90 +100,122 @@ const ListPeer = (props) =>
 				}
 			</div>
 			{ screenConsumer &&
-				<IconButton
+				<Tooltip
-					aria-label={intl.formatMessage({
+					title={intl.formatMessage({
 						id             : 'tooltip.muteScreenSharing',
 						defaultMessage : 'Mute participant share'
 					})}
-					color={screenVisible ? 'primary' : 'secondary'}
+					placement='bottom'
-					disabled={peer.peerScreenInProgress}
-					onClick={(e) =>
-					{
-						e.stopPropagation();
-
-						screenVisible ?
-							roomClient.modifyPeerConsumer(peer.id, 'screen', true) :
-							roomClient.modifyPeerConsumer(peer.id, 'screen', false);
-					}}
 				>
-					{ screenVisible ?
+					<IconButton
-						<ScreenIcon />
+						aria-label={intl.formatMessage({
-						:
+							id             : 'tooltip.muteScreenSharing',
-						<ScreenOffIcon />
+							defaultMessage : 'Mute participant share'
-					}
+						})}
-				</IconButton>
+						color={screenVisible ? 'primary' : 'secondary'}
+						disabled={peer.peerScreenInProgress}
+						onClick={(e) =>
+						{
+							e.stopPropagation();
+
+							screenVisible ?
+								roomClient.modifyPeerConsumer(peer.id, 'screen', true) :
+								roomClient.modifyPeerConsumer(peer.id, 'screen', false);
+						}}
+					>
+						{ screenVisible ?
+							<ScreenIcon />
+							:
+							<ScreenOffIcon />
+						}
+					</IconButton>
+				</Tooltip>
 			}
-			<IconButton
+			<Tooltip
-				aria-label={intl.formatMessage({
+				title={intl.formatMessage({
 					id             : 'tooltip.muteParticipantVideo',
 					defaultMessage : 'Mute participant video'
 				})}
-				color={webcamEnabled ? 'primary' : 'secondary'}
+				placement='bottom'
-				disabled={peer.peerVideoInProgress}
-				onClick={(e) =>
-				{
-					e.stopPropagation();
-
-					webcamEnabled ?
-						roomClient.modifyPeerConsumer(peer.id, 'webcam', true) :
-						roomClient.modifyPeerConsumer(peer.id, 'webcam', false);
-				}}
 			>
-				{ webcamEnabled ?
-					<VideocamIcon />
-					:
-					<VideocamOffIcon />
-				}
-			</IconButton>
-			<IconButton
-				aria-label={intl.formatMessage({
-					id             : 'tooltip.muteParticipant',
-					defaultMessage : 'Mute participant'
-				})}
-				color={micEnabled ? 'primary' : 'secondary'}
-				disabled={peer.peerAudioInProgress}
-				onClick={(e) =>
-				{
-					e.stopPropagation();
-
-					micEnabled ?
-						roomClient.modifyPeerConsumer(peer.id, 'mic', true) :
-						roomClient.modifyPeerConsumer(peer.id, 'mic', false);
-				}}
-			>
-				{ micEnabled ?
-					<VolumeUpIcon />
-					:
-					<VolumeOffIcon />
-				}
-			</IconButton>
-			{ isModerator &&
 				<IconButton
 					aria-label={intl.formatMessage({
-						id             : 'tooltip.kickParticipant',
+						id             : 'tooltip.muteParticipantVideo',
-						defaultMessage : 'Kick out participant'
+						defaultMessage : 'Mute participant video'
 					})}
-					disabled={peer.peerKickInProgress}
+					color={webcamEnabled ? 'primary' : 'secondary'}
-					color='secondary'
+					disabled={peer.peerVideoInProgress}
 					onClick={(e) =>
 					{
 						e.stopPropagation();
 
-						roomClient.kickPeer(peer.id);
+						webcamEnabled ?
+							roomClient.modifyPeerConsumer(peer.id, 'webcam', true) :
+							roomClient.modifyPeerConsumer(peer.id, 'webcam', false);
 					}}
 				>
-					<ExitIcon />
+					{ webcamEnabled ?
+						<VideocamIcon />
+						:
+						<VideocamOffIcon />
+					}
 				</IconButton>
+			</Tooltip>
+			<Tooltip
+				title={intl.formatMessage({
+					id             : 'tooltip.muteParticipant',
+					defaultMessage : 'Mute participant'
+				})}
+				placement='bottom'
+			>
+				<IconButton
+					aria-label={intl.formatMessage({
+						id             : 'tooltip.muteParticipant',
+						defaultMessage : 'Mute participant'
+					})}
+					color={micEnabled ? 'primary' : 'secondary'}
+					disabled={peer.peerAudioInProgress}
+					onClick={(e) =>
+					{
+						e.stopPropagation();
+
+						micEnabled ?
+							roomClient.modifyPeerConsumer(peer.id, 'mic', true) :
+							roomClient.modifyPeerConsumer(peer.id, 'mic', false);
+					}}
+				>
+					{ micEnabled ?
+						<VolumeUpIcon />
+						:
+						<VolumeOffIcon />
+					}
+				</IconButton>
+			</Tooltip>
+			{ isModerator &&
+				<Tooltip
+					title={intl.formatMessage({
+						id             : 'tooltip.kickParticipant',
+						defaultMessage : 'Kick out participant'
+					})}
+					placement='bottom'
+				>
+					<IconButton
+						aria-label={intl.formatMessage({
+							id             : 'tooltip.kickParticipant',
+							defaultMessage : 'Kick out participant'
+						})}
+						disabled={peer.peerKickInProgress}
+						color='secondary'
+						onClick={(e) =>
+						{
+							e.stopPropagation();
+
+							roomClient.kickPeer(peer.id);
+						}}
+					>
+						<ExitIcon />
+					</IconButton>
+				</Tooltip>
 			}
 			{children}
 		</div>

app/src/translations/cn.json

@@ -80,6 +80,7 @@
 	"tooltip.muteParticipant": null,
 	"tooltip.muteParticipantVideo": null,
 	"tooltip.raisedHand": null,
+	"tooltip.muteScreenSharing": null,
 
 	"label.roomName": "房间名称",
 	"label.chooseRoomButton": "继续",

app/src/translations/cs.json

@@ -79,6 +79,7 @@
 	"tooltip.muteParticipant": null,
 	"tooltip.muteParticipantVideo": null,
 	"tooltip.raisedHand": null,
+	"tooltip.muteScreenSharing": null,
 
 	"label.roomName": "Jméno místnosti",
 	"label.chooseRoomButton": "Pokračovat",

app/src/translations/de.json

@@ -80,6 +80,7 @@
 	"tooltip.muteParticipant": null,
 	"tooltip.muteParticipantVideo": null,
 	"tooltip.raisedHand": null,
+	"tooltip.muteScreenSharing": null,
 
 	"label.roomName": "Name des Raums",
 	"label.chooseRoomButton": "Weiter",

app/src/translations/dk.json

@@ -80,6 +80,7 @@
 	"tooltip.muteParticipant": null,
 	"tooltip.muteParticipantVideo": null,
 	"tooltip.raisedHand": null,
+	"tooltip.muteScreenSharing": null,
 
 	"label.roomName": "Værelsesnavn",
 	"label.chooseRoomButton": "Fortsæt",

app/src/translations/el.json

@@ -80,6 +80,7 @@
 	"tooltip.muteParticipant": null,
 	"tooltip.muteParticipantVideo": null,
 	"tooltip.raisedHand": null,
+	"tooltip.muteScreenSharing": null,
 
 	"label.roomName": "Όνομα δωματίου",
 	"label.chooseRoomButton": "Συνέχεια",

app/src/translations/en.json

@@ -80,6 +80,7 @@
 	"tooltip.muteParticipant": "Mute participant",
 	"tooltip.muteParticipantVideo": "Mute participant video",
 	"tooltip.raisedHand": "Raise hand",
+	"tooltip.muteScreenSharing": "Mute participant share",
 
 	"label.roomName": "Room name",
 	"label.chooseRoomButton": "Continue",

app/src/translations/es.json

@@ -80,6 +80,7 @@
 	"tooltip.muteParticipant": null,
 	"tooltip.muteParticipantVideo": null,
 	"tooltip.raisedHand": null,
+	"tooltip.muteScreenSharing": null,
 
 	"label.roomName": "Nombre de la sala",
 	"label.chooseRoomButton": "Continuar",

app/src/translations/fr.json

@@ -80,6 +80,7 @@
 	"tooltip.muteParticipant": null,
 	"tooltip.muteParticipantVideo": null,
 	"tooltip.raisedHand": null,
+	"tooltip.muteScreenSharing": null,
 
 	"label.roomName": "Nom de la salle",
 	"label.chooseRoomButton": "Continuer",

app/src/translations/hr.json

@@ -80,6 +80,7 @@
 	"tooltip.muteParticipant": "Utišaj sudionika",
 	"tooltip.muteParticipantVideo": "Ne primaj video sudionika",
 	"tooltip.raisedHand": "Podigni ruku",
+	"tooltip.muteScreenSharing": null,
 
 	"label.roomName": "Naziv sobe",
 	"label.chooseRoomButton": "Nastavi",

app/src/translations/hu.json

@@ -80,6 +80,7 @@
 	"tooltip.muteParticipant": "Résztvevő némítása",
 	"tooltip.muteParticipantVideo": "Résztvevő video némítása",
 	"tooltip.raisedHand": "Jelentkezés",
+	"tooltip.muteScreenSharing": null,
 
 	"label.roomName": "Konferencia",
 	"label.chooseRoomButton": "Tovább",

app/src/translations/it.json

@@ -79,6 +79,7 @@
 	"tooltip.muteParticipant": "Muta partecipante",
 	"tooltip.muteParticipantVideo": "Ferma video partecipante",
 	"tooltip.raisedHand": "Mano alzata",
+	"tooltip.muteScreenSharing": null,
 
 	"label.roomName": "Nome della stanza",
 	"label.chooseRoomButton": "Continua",

app/src/translations/lv.json

@@ -79,6 +79,7 @@
 	"tooltip.muteParticipant": "Noklusināt dalībnieku",
 	"tooltip.muteParticipantVideo": "Atslēgt dalībnieka video",
 	"tooltip.raisedHand": "Pacelt roku",
+	"tooltip.muteScreenSharing": null,
 
 	"label.roomName": "Sapulces telpas nosaukums (ID)",
 	"label.chooseRoomButton": "Turpināt",

app/src/translations/nb.json

@@ -80,6 +80,7 @@
 	"tooltip.muteParticipant": "Demp deltaker",
 	"tooltip.muteParticipantVideo": "Demp deltakervideo",
 	"tooltip.raisedHand": "Rekk opp hånden",
+	"tooltip.muteScreenSharing": "Demp deltaker skjermdeling",
 
 	"label.roomName": "Møtenavn",
 	"label.chooseRoomButton": "Fortsett",

app/src/translations/pl.json

@@ -80,6 +80,7 @@
 	"tooltip.muteParticipant": null,
 	"tooltip.muteParticipantVideo": null,
 	"tooltip.raisedHand": null,
+	"tooltip.muteScreenSharing": null,
 
 	"label.roomName": "Nazwa konferencji",
 	"label.chooseRoomButton": "Kontynuuj",

app/src/translations/pt.json

@@ -80,6 +80,7 @@
 	"tooltip.muteParticipant": null,
 	"tooltip.muteParticipantVideo": null,
 	"tooltip.raisedHand": null,
+	"tooltip.muteScreenSharing": null,
 
 	"label.roomName": "Nome da sala",
 	"label.chooseRoomButton": "Continuar",

app/src/translations/ro.json

@@ -80,6 +80,7 @@
 	"tooltip.muteParticipant": null,
 	"tooltip.muteParticipantVideo": null,
 	"tooltip.raisedHand": null,
+	"tooltip.muteScreenSharing": null,
 
 	"label.roomName": "Numele camerei",
 	"label.chooseRoomButton": "Continuare",

app/src/translations/tr.json

@@ -80,6 +80,7 @@
 	"tooltip.muteParticipant": null,
 	"tooltip.muteParticipantVideo": null,
 	"tooltip.raisedHand": null,
+	"tooltip.muteScreenSharing": null,
 
 	"label.roomName": "Oda adı",
 	"label.chooseRoomButton": "Devam",

app/src/translations/uk.json

@@ -80,6 +80,7 @@
 	"tooltip.muteParticipant": null,
 	"tooltip.muteParticipantVideo": null,
 	"tooltip.raisedHand": null,
+	"tooltip.muteScreenSharing": null,
 
 	"label.roomName": "Назва кімнати",
 	"label.chooseRoomButton": "Продовжити",