diff --git a/app/src/components/Controls/Sidebar.js b/app/src/components/Controls/Sidebar.js
index d163552..7319f35 100644
--- a/app/src/components/Controls/Sidebar.js
+++ b/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,111 +150,122 @@ const Sidebar = (props) =>
classnames(classes.root, toolbarsVisible ? classes.show : classes.hide)
}
>
-
- {
- micState === 'on' ?
- roomClient.muteMic() :
- roomClient.unmuteMic();
- }}
- >
- { micState === 'on' ?
-
- :
-
- }
-
-
- {
- webcamState === 'on' ?
- roomClient.disableWebcam() :
- roomClient.enableWebcam();
- }}
- >
- { webcamState === 'on' ?
-
- :
-
- }
-
-
- {
- switch (screenState)
+
+
{
- case 'on':
- {
- roomClient.disableScreenSharing();
- break;
- }
- case 'off':
- {
- roomClient.enableScreenSharing();
- break;
- }
- case 'need-extension':
- {
- roomClient.installExtension();
- break;
- }
- default:
- {
- break;
- }
+ micState === 'on' ?
+ roomClient.muteMic() :
+ roomClient.unmuteMic();
+ }}
+ >
+ { micState === 'on' ?
+
+ :
+
}
- }}
- >
- { screenState === 'on' || screenState === 'unsupported' ?
-
- :null
- }
- { screenState === 'off' ?
-
- :null
- }
- { screenState === 'need-extension' ?
-
- :null
- }
-
+
+
+
+
+ {
+ webcamState === 'on' ?
+ roomClient.disableWebcam() :
+ roomClient.enableWebcam();
+ }}
+ >
+ { webcamState === 'on' ?
+
+ :
+
+ }
+
+
+
+
+ {
+ switch (screenState)
+ {
+ case 'on':
+ {
+ roomClient.disableScreenSharing();
+ break;
+ }
+ case 'off':
+ {
+ roomClient.enableScreenSharing();
+ break;
+ }
+ case 'need-extension':
+ {
+ roomClient.installExtension();
+ break;
+ }
+ default:
+ {
+ break;
+ }
+ }
+ }}
+ >
+ { screenState === 'on' || screenState === 'unsupported' ?
+
+ :null
+ }
+ { screenState === 'off' ?
+
+ :null
+ }
+ { screenState === 'need-extension' ?
+
+ :null
+ }
+
+
-
- {
- if (locked)
- {
- roomClient.unlockRoom();
- }
- else
- {
- roomClient.lockRoom();
- }
- }}
+
- { locked ?
-
- :
-
- }
-
+
+ {
+ if (locked)
+ {
+ roomClient.unlockRoom();
+ }
+ else
+ {
+ roomClient.lockRoom();
+ }
+ }}
+ >
+ { locked ?
+
+ :
+
+ }
+
+
{ /*
*/ }
- roomClient.close()}
- >
-
-
+
+ roomClient.close()}
+ >
+
+
+
);
};