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)
-		micState = 'unsupported';
-	else if (!micProducer)
+	let micTip;
+
+	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,6 +150,7 @@ const Sidebar = (props) =>
 				classnames(classes.root, toolbarsVisible ? classes.show : classes.hide)
 			}
 		>
+			<Tooltip title={micTip} placement={smallScreen ? 'top' : 'right'}>
 				<Fab
 					aria-label='Mute mic'
 					className={classes.fab}
@@ -141,6 +169,8 @@ const Sidebar = (props) =>
 						<MicOffIcon />
 					}
 				</Fab>
+			</Tooltip>
+			<Tooltip title={webcamTip} placement={smallScreen ? 'top' : 'right'}>
 				<Fab
 					aria-label='Mute video'
 					className={classes.fab}
@@ -159,6 +189,8 @@ const Sidebar = (props) =>
 						<VideoOffIcon />
 					}
 				</Fab>
+			</Tooltip>
+			<Tooltip title={screenTip} placement={smallScreen ? 'top' : 'right'}>
 				<Fab
 					aria-label='Share screen'
 					className={classes.fab}
@@ -204,7 +236,12 @@ const Sidebar = (props) =>
 						:null
 					}
 				</Fab>
+			</Tooltip>
 
+			<Tooltip
+				title={locked ? 'Unlock room' : 'Lock room'}
+				placement={smallScreen ? 'top' : 'right'}
+			>
 				<Fab
 					aria-label='Room lock'
 					className={classes.fab}
@@ -228,6 +265,7 @@ const Sidebar = (props) =>
 						<LockOpenIcon />
 					}
 				</Fab>
+			</Tooltip>
 
 			{ /* <Fab
 				aria-label='Raise hand'
@@ -240,6 +278,7 @@ const Sidebar = (props) =>
 				<Avatar alt='Hand' src={me.raiseHand ? HandOn : HandOff} />
 			</Fab>  */ }
 
+			<Tooltip title='Leave meeting' placement={smallScreen ? 'top' : 'right'}>
 				<Fab
 					aria-label='Leave meeting'
 					className={classes.fab}
@@ -249,6 +288,7 @@ const Sidebar = (props) =>
 				>
 					<LeaveIcon />
 				</Fab>
+			</Tooltip>
 		</div>
 	);
 };