Added some tooltips

app/src/components/Controls/Sidebar.js

@@ -7,6 +7,7 @@ import classnames from 'classnames';
 import * as appPropTypes from '../appPropTypes';
 import { withRoomContext } from '../../RoomContext';
 import Fab from '@material-ui/core/Fab';
+import Tooltip from '@material-ui/core/Tooltip';
 // import Avatar from '@material-ui/core/Avatar';
 import MicIcon from '@material-ui/icons/Mic';
 import MicOffIcon from '@material-ui/icons/MicOff';
@@ -78,41 +79,67 @@ const Sidebar = (props) =>
 
 	let micState;
 
-	if (!me.canSendMic)
+	let micTip;
-		micState = 'unsupported';
+
-	else if (!micProducer)
+	if (!me.canSendMic || !micProducer)
+	{
 		micState = 'unsupported';
+		micTip = 'Audio unsupported';
+	}
 	else if (!micProducer.locallyPaused && !micProducer.remotelyPaused)
+	{
 		micState = 'on';
+		micTip = 'Mute audio';
+	}
 	else
+	{
 		micState = 'off';
+		micTip = 'Unmute audio';
+	}
 
 	let webcamState;
 
+	let webcamTip;
+
 	if (!me.canSendWebcam)
+	{
 		webcamState = 'unsupported';
+		webcamTip = 'Video unsupported';
+	}
 	else if (webcamProducer)
+	{
 		webcamState = 'on';
+		webcamTip = 'Stop video';
+	}
 	else
+	{
 		webcamState = 'off';
+		webcamTip = 'Start video';
+	}
 
 	let screenState;
 
+	let screenTip;
+
 	if (me.needExtension)
 	{
 		screenState = 'need-extension';
+		screenTip = 'Install screen sharing extension';
 	}
 	else if (!me.canShareScreen)
 	{
 		screenState = 'unsupported';
+		screenTip = 'Screen sharing not supported';
 	}
 	else if (screenProducer)
 	{
 		screenState = 'on';
+		screenTip = 'Stop screen sharing';
 	}
 	else
 	{
 		screenState = 'off';
+		screenTip = 'Start screen sharing';
 	}
 
 	const smallScreen = useMediaQuery(theme.breakpoints.down('sm'));
@@ -123,111 +150,122 @@ const Sidebar = (props) =>
 				classnames(classes.root, toolbarsVisible ? classes.show : classes.hide)
 			}
 		>
-			<Fab
+			<Tooltip title={micTip} placement={smallScreen ? 'top' : 'right'}>
-				aria-label='Mute mic'
+				<Fab
-				className={classes.fab}
+					aria-label='Mute mic'
-				color={micState === 'on' ? 'default' : 'secondary'}
+					className={classes.fab}
-				size={smallScreen ? 'large' : 'medium'}
+					color={micState === 'on' ? 'default' : 'secondary'}
-				onClick={() =>
+					size={smallScreen ? 'large' : 'medium'}
-				{
+					onClick={() =>
-					micState === 'on' ?
-						roomClient.muteMic() :
-						roomClient.unmuteMic();
-				}}
-			>
-				{ micState === 'on' ?
-					<MicIcon />
-					:
-					<MicOffIcon />
-				}
-			</Fab>
-			<Fab
-				aria-label='Mute video'
-				className={classes.fab}
-				color={webcamState === 'on' ? 'default' : 'secondary'}
-				size={smallScreen ? 'large' : 'medium'}
-				onClick={() =>
-				{
-					webcamState === 'on' ?
-						roomClient.disableWebcam() :
-						roomClient.enableWebcam();
-				}}
-			>
-				{ webcamState === 'on' ?
-					<VideoIcon />
-					:
-					<VideoOffIcon />
-				}
-			</Fab>
-			<Fab
-				aria-label='Share screen'
-				className={classes.fab}
-				disabled={!me.canShareScreen || me.screenShareInProgress}
-				color={screenState === 'on' ? 'primary' : 'default'}
-				size={smallScreen ? 'large' : 'medium'}
-				onClick={() =>
-				{
-					switch (screenState)
 					{
-						case 'on':
+						micState === 'on' ?
-						{
+							roomClient.muteMic() :
-							roomClient.disableScreenSharing();
+							roomClient.unmuteMic();
-							break;
+					}}
-						}
+				>
-						case 'off':
+					{ micState === 'on' ?
-						{
+						<MicIcon />
-							roomClient.enableScreenSharing();
+						:
-							break;
+						<MicOffIcon />
-						}
-						case 'need-extension':
-						{
-							roomClient.installExtension();
-							break;
-						}
-						default:
-						{
-							break;
-						}
 					}
-				}}
+				</Fab>
-			>
+			</Tooltip>
-				{ screenState === 'on' || screenState === 'unsupported' ?
+			<Tooltip title={webcamTip} placement={smallScreen ? 'top' : 'right'}>
-					<ScreenOffIcon/>
+				<Fab
-					:null
+					aria-label='Mute video'
-				}
+					className={classes.fab}
-				{ screenState === 'off' ?
+					color={webcamState === 'on' ? 'default' : 'secondary'}
-					<ScreenIcon/>
+					size={smallScreen ? 'large' : 'medium'}
-					:null
+					onClick={() =>
-				}
+					{
-				{ screenState === 'need-extension' ?
+						webcamState === 'on' ?
-					<ExtensionIcon/>
+							roomClient.disableWebcam() :
-					:null
+							roomClient.enableWebcam();
-				}
+					}}
-			</Fab>
+				>
+					{ webcamState === 'on' ?
+						<VideoIcon />
+						:
+						<VideoOffIcon />
+					}
+				</Fab>
+			</Tooltip>
+			<Tooltip title={screenTip} placement={smallScreen ? 'top' : 'right'}>
+				<Fab
+					aria-label='Share screen'
+					className={classes.fab}
+					disabled={!me.canShareScreen || me.screenShareInProgress}
+					color={screenState === 'on' ? 'primary' : 'default'}
+					size={smallScreen ? 'large' : 'medium'}
+					onClick={() =>
+					{
+						switch (screenState)
+						{
+							case 'on':
+							{
+								roomClient.disableScreenSharing();
+								break;
+							}
+							case 'off':
+							{
+								roomClient.enableScreenSharing();
+								break;
+							}
+							case 'need-extension':
+							{
+								roomClient.installExtension();
+								break;
+							}
+							default:
+							{
+								break;
+							}
+						}
+					}}
+				>
+					{ screenState === 'on' || screenState === 'unsupported' ?
+						<ScreenOffIcon/>
+						:null
+					}
+					{ screenState === 'off' ?
+						<ScreenIcon/>
+						:null
+					}
+					{ screenState === 'need-extension' ?
+						<ExtensionIcon/>
+						:null
+					}
+				</Fab>
+			</Tooltip>
 
-			<Fab
+			<Tooltip
-				aria-label='Room lock'
+				title={locked ? 'Unlock room' : 'Lock room'}
-				className={classes.fab}
+				placement={smallScreen ? 'top' : 'right'}
-				color={locked ? 'primary' : 'default'}
-				size={smallScreen ? 'large' : 'medium'}
-				onClick={() =>
-				{
-					if (locked)
-					{
-						roomClient.unlockRoom();
-					}
-					else
-					{
-						roomClient.lockRoom();
-					}
-				}}
 			>
-				{ locked ?
+				<Fab
-					<LockIcon />
+					aria-label='Room lock'
-					:
+					className={classes.fab}
-					<LockOpenIcon />
+					color={locked ? 'primary' : 'default'}
-				}
+					size={smallScreen ? 'large' : 'medium'}
-			</Fab>
+					onClick={() =>
+					{
+						if (locked)
+						{
+							roomClient.unlockRoom();
+						}
+						else
+						{
+							roomClient.lockRoom();
+						}
+					}}
+				>
+					{ locked ?
+						<LockIcon />
+						:
+						<LockOpenIcon />
+					}
+				</Fab>
+			</Tooltip>
 
 			{ /* <Fab
 				aria-label='Raise hand'
@@ -240,15 +278,17 @@ const Sidebar = (props) =>
 				<Avatar alt='Hand' src={me.raiseHand ? HandOn : HandOff} />
 			</Fab>  */ }
 
-			<Fab
+			<Tooltip title='Leave meeting' placement={smallScreen ? 'top' : 'right'}>
-				aria-label='Leave meeting'
+				<Fab
-				className={classes.fab}
+					aria-label='Leave meeting'
-				color='secondary'
+					className={classes.fab}
-				size={smallScreen ? 'large' : 'medium'}
+					color='secondary'
-				onClick={() => roomClient.close()}
+					size={smallScreen ? 'large' : 'medium'}
-			>
+					onClick={() => roomClient.close()}
-				<LeaveIcon />
+				>
-			</Fab>
+					<LeaveIcon />
+				</Fab>
+			</Tooltip>
 		</div>
 	);
 };