Fix button sizes and take care not to overflow container in filmstrip, ref #115

app/src/components/Containers/Me.js

@@ -10,6 +10,7 @@ import { useIntl, FormattedMessage } from 'react-intl';
 import VideoView from '../VideoContainers/VideoView';
 import Volume from './Volume';
 import Fab from '@material-ui/core/Fab';
+import IconButton from '@material-ui/core/IconButton';
 import Tooltip from '@material-ui/core/Tooltip';
 import MicIcon from '@material-ui/icons/Mic';
 import MicOffIcon from '@material-ui/icons/MicOff';
@@ -59,6 +60,19 @@ const styles = (theme) =>
 			margin        : theme.spacing(1),
 			pointerEvents : 'auto'
 		},
+		smallContainer :
+		{
+			backgroundColor : 'rgba(255, 255, 255, 0.9)',
+			margin          : theme.spacing(0.25),
+			padding         : theme.spacing(0.75),
+			boxShadow       : '0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)',
+			pointerEvents   : 'auto',
+			transition      : 'background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,border 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
+			'&:hover'       :
+			{
+				backgroundColor : 'rgba(213, 213, 213, 1)'
+			}
+		},
 		viewContainer :
 		{
 			position : 'relative',
@@ -102,6 +116,10 @@ const styles = (theme) =>
 				'&.hover'  :
 				{
 					opacity : 1
+				},
+				'&.smallContainer' :
+				{
+					fontSize : '3em'
 				}
 			}
 		},
@@ -145,7 +163,7 @@ const Me = (props) =>
 		activeSpeaker,
 		spacing,
 		style,
-		smallButtons,
+		smallContainer,
 		advancedMode,
 		micProducer,
 		webcamProducer,
@@ -300,6 +318,7 @@ const Me = (props) =>
 				style={spacingStyle}
 			>
 				<div className={classes.viewContainer} style={style}>
+					{ !smallContainer &&
 						<div className={classnames(
 							classes.ptt,
 							(micState === 'muted' && me.isSpeaking) ? 'enabled' : null
@@ -310,6 +329,7 @@ const Me = (props) =>
 								defaultMessage='You are muted, hold down SPACE-BAR to talk'
 							/>	
 						</div>
+					}
 					<div
 						className={classnames(
 							classes.controls,
@@ -336,7 +356,12 @@ const Me = (props) =>
 							}, 2000);
 						}}
 					>
-						<p className={hover ? 'hover' : null}>
+						<p className={
+							classnames(
+								hover ? 'hover' : null,
+								smallContainer ? 'smallContainer' : null
+							)}
+						>
 							<FormattedMessage
 								id='room.me'
 								defaultMessage='ME'
@@ -346,6 +371,33 @@ const Me = (props) =>
 						<React.Fragment>
 							<Tooltip title={micTip} placement='left'>
 								<div>
+									{ smallContainer ?
+										<IconButton
+											aria-label={intl.formatMessage({
+												id             : 'device.muteAudio',
+												defaultMessage : 'Mute audio'
+											})}
+											className={classes.smallContainer}
+											disabled={!me.canSendMic || me.audioInProgress}
+											color={micState === 'on' ? 'primary' : 'secondary'}
+											size='small'
+											onClick={() =>
+											{
+												if (micState === 'off')
+													roomClient.enableMic();
+												else if (micState === 'on')
+													roomClient.muteMic();
+												else
+													roomClient.unmuteMic();
+											}}
+										>
+											{ micState === 'on' ?
+												<MicIcon />
+												:
+												<MicOffIcon />
+											}
+										</IconButton>
+										:
 										<Fab
 											aria-label={intl.formatMessage({
 												id             : 'device.muteAudio',
@@ -354,7 +406,7 @@ const Me = (props) =>
 											className={classes.fab}
 											disabled={!me.canSendMic || me.audioInProgress}
 											color={micState === 'on' ? 'default' : 'secondary'}
-										size={smallButtons ? 'small' : 'large'}
+											size='large'
 											onClick={() =>
 											{
 												if (micState === 'off')
@@ -371,10 +423,35 @@ const Me = (props) =>
 												<MicOffIcon />
 											}
 										</Fab>
+									}
 								</div>
 							</Tooltip>
 							<Tooltip title={webcamTip} placement='left'>
 								<div>
+									{ smallContainer ?
+										<IconButton
+											aria-label={intl.formatMessage({
+												id             : 'device.startVideo',
+												defaultMessage : 'Start video'
+											})}
+											className={classes.smallContainer}
+											disabled={!me.canSendWebcam || me.webcamInProgress}
+											color={webcamState === 'on' ? 'primary' : 'secondary'}
+											size='small'
+											onClick={() =>
+											{
+												webcamState === 'on' ?
+													roomClient.disableWebcam() :
+													roomClient.enableWebcam();
+											}}
+										>
+											{ webcamState === 'on' ?
+												<VideoIcon />
+												:
+												<VideoOffIcon />
+											}
+										</IconButton>
+										:
 										<Fab
 											aria-label={intl.formatMessage({
 												id             : 'device.startVideo',
@@ -383,7 +460,7 @@ const Me = (props) =>
 											className={classes.fab}
 											disabled={!me.canSendWebcam || me.webcamInProgress}
 											color={webcamState === 'on' ? 'default' : 'secondary'}
-										size={smallButtons ? 'small' : 'large'}
+											size='large'
 											onClick={() =>
 											{
 												webcamState === 'on' ?
@@ -397,11 +474,56 @@ const Me = (props) =>
 												<VideoOffIcon />
 											}
 										</Fab>
+									}
 								</div>
 							</Tooltip>
 							{ me.browser.platform !== 'mobile' &&
 								<Tooltip title={screenTip} placement='left'>
 									<div>
+										{ smallContainer ?
+											<IconButton
+												aria-label={intl.formatMessage({
+													id             : 'device.startScreenSharing',
+													defaultMessage : 'Start screen sharing'
+												})}
+												className={classes.smallContainer}
+												disabled={
+													!canShareScreen ||
+													!me.canShareScreen ||
+													me.screenShareInProgress
+												}
+												color='primary'
+												size='small'
+												onClick={() =>
+												{
+													switch (screenState)
+													{
+														case 'on':
+														{
+															roomClient.disableScreenSharing();
+															break;
+														}
+														case 'off':
+														{
+															roomClient.enableScreenSharing();
+															break;
+														}
+														default:
+														{
+															break;
+														}
+													}
+												}}
+											>
+												{ (screenState === 'on' || screenState === 'unsupported') &&
+													<ScreenOffIcon/>
+												}
+												{ screenState === 'off' &&
+													<ScreenIcon/>
+												}
+
+											</IconButton>
+											:
 											<Fab
 												aria-label={intl.formatMessage({
 													id             : 'device.startScreenSharing',
@@ -414,7 +536,7 @@ const Me = (props) =>
 													me.screenShareInProgress
 												}
 												color={screenState === 'on' ? 'primary' : 'default'}
-											size={smallButtons ? 'small' : 'large'}
+												size='large'
 												onClick={() =>
 												{
 													switch (screenState)
@@ -443,6 +565,7 @@ const Me = (props) =>
 													<ScreenIcon/>
 												}
 											</Fab>
+										}
 									</div>
 								</Tooltip>
 							}
@@ -537,6 +660,25 @@ const Me = (props) =>
 
 								<Tooltip title={webcamTip} placement='left'>
 									<div>
+										{ smallContainer ?
+											<IconButton
+												aria-label={intl.formatMessage({
+													id             : 'device.stopVideo',
+													defaultMessage : 'Stop video'
+												})}
+												className={classes.smallContainer}
+												disabled={!me.canSendWebcam || me.webcamInProgress}
+												size='small'
+												color='primary'
+												onClick={() =>
+												{
+													roomClient.disableExtraVideo(producer.id);
+												}}
+											>
+												<VideoIcon />
+
+											</IconButton>
+											:
 											<Fab
 												aria-label={intl.formatMessage({
 													id             : 'device.stopVideo',
@@ -544,7 +686,7 @@ const Me = (props) =>
 												})}
 												className={classes.fab}
 												disabled={!me.canSendWebcam || me.webcamInProgress}
-											size={smallButtons ? 'small' : 'large'}
+												size={smallContainer ? 'small' : 'large'}
 												onClick={() =>
 												{
 													roomClient.disableExtraVideo(producer.id);
@@ -552,6 +694,7 @@ const Me = (props) =>
 											>
 												<VideoIcon />
 											</Fab>
+										}
 									</div>
 								</Tooltip>
 							</div>
@@ -663,7 +806,7 @@ Me.propTypes =
 	extraVideoProducers : PropTypes.arrayOf(appPropTypes.Producer),
 	spacing             : PropTypes.number,
 	style               : PropTypes.object,
-	smallButtons        : PropTypes.bool,
+	smallContainer      : PropTypes.bool,
 	canShareScreen      : PropTypes.bool.isRequired,
 	classes             : PropTypes.object.isRequired,
 	theme               : PropTypes.object.isRequired

app/src/components/Containers/Peer.js

@@ -12,6 +12,7 @@ import { useIntl, FormattedMessage } from 'react-intl';
 import VideoView from '../VideoContainers/VideoView';
 import Tooltip from '@material-ui/core/Tooltip';
 import Fab from '@material-ui/core/Fab';
+import IconButton from '@material-ui/core/IconButton';
 import VolumeUpIcon from '@material-ui/icons/VolumeUp';
 import VolumeOffIcon from '@material-ui/icons/VolumeOff';
 import NewWindowIcon from '@material-ui/icons/OpenInNew';
@@ -59,6 +60,19 @@ const styles = (theme) =>
 		{
 			margin : theme.spacing(1)
 		},
+		smallContainer :
+		{
+			backgroundColor : 'rgba(255, 255, 255, 0.9)',
+			margin          : theme.spacing(0.25),
+			padding         : theme.spacing(0.75),
+			boxShadow       : '0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)',
+			pointerEvents   : 'auto',
+			transition      : 'background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,border 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
+			'&:hover'       :
+			{
+				backgroundColor : 'rgba(213, 213, 213, 1)'
+			}
+		},
 		viewContainer :
 		{
 			position : 'relative',
@@ -130,7 +144,7 @@ const Peer = (props) =>
 		toggleConsumerWindow,
 		spacing,
 		style,
-		smallButtons,
+		smallContainer,
 		windowConsumer,
 		classes,
 		theme
@@ -236,6 +250,30 @@ const Peer = (props) =>
 							placement={smallScreen ? 'top' : 'left'}
 						>
 							<div>
+								{ smallContainer ?
+									<IconButton
+										aria-label={intl.formatMessage({
+											id             : 'device.muteAudio',
+											defaultMessage : 'Mute audio'
+										})}
+										className={classes.smallContainer}
+										disabled={!micConsumer}
+										color='primary'
+										size='small'
+										onClick={() =>
+										{
+											micEnabled ?
+												roomClient.modifyPeerConsumer(peer.id, 'mic', true) :
+												roomClient.modifyPeerConsumer(peer.id, 'mic', false);
+										}}
+									>
+										{ micEnabled ?
+											<VolumeUpIcon />
+											:
+											<VolumeOffIcon />
+										}
+									</IconButton>
+									:
 									<Fab
 										aria-label={intl.formatMessage({
 											id             : 'device.muteAudio',
@@ -244,7 +282,7 @@ const Peer = (props) =>
 										className={classes.fab}
 										disabled={!micConsumer}
 										color={micEnabled ? 'default' : 'secondary'}
-									size={smallButtons ? 'small' : 'large'}
+										size='large'
 										onClick={() =>
 										{
 											micEnabled ?
@@ -258,6 +296,7 @@ const Peer = (props) =>
 											<VolumeOffIcon />
 										}
 									</Fab>
+								}
 							</div>
 						</Tooltip>
 
@@ -270,6 +309,27 @@ const Peer = (props) =>
 								placement={smallScreen ? 'top' : 'left'}
 							>
 								<div>
+									{ smallContainer ?
+										<IconButton
+											aria-label={intl.formatMessage({
+												id             : 'label.newWindow',
+												defaultMessage : 'New window'
+											})}
+											className={classes.smallContainer}
+											disabled={
+												!videoVisible ||
+												(windowConsumer === webcamConsumer.id)
+											}
+											size='small'
+											color='primary'
+											onClick={() =>
+											{
+												toggleConsumerWindow(webcamConsumer);
+											}}
+										>
+											<NewWindowIcon />
+										</IconButton>
+										:
 										<Fab
 											aria-label={intl.formatMessage({
 												id             : 'label.newWindow',
@@ -280,7 +340,7 @@ const Peer = (props) =>
 												!videoVisible ||
 												(windowConsumer === webcamConsumer.id)
 											}
-										size={smallButtons ? 'small' : 'large'}
+											size='large'
 											onClick={() =>
 											{
 												toggleConsumerWindow(webcamConsumer);
@@ -288,6 +348,7 @@ const Peer = (props) =>
 										>
 											<NewWindowIcon />
 										</Fab>
+									}
 								</div>
 							</Tooltip>
 						}
@@ -300,6 +361,24 @@ const Peer = (props) =>
 							placement={smallScreen ? 'top' : 'left'}
 						>
 							<div>
+								{ smallContainer ?
+									<IconButton
+										aria-label={intl.formatMessage({
+											id             : 'label.fullscreen',
+											defaultMessage : 'Fullscreen'
+										})}
+										className={classes.smallContainer}
+										disabled={!videoVisible}
+										size='small'
+										color='primary'
+										onClick={() =>
+										{
+											toggleConsumerFullscreen(webcamConsumer);
+										}}
+									>
+										<FullScreenIcon />
+									</IconButton>
+									:
 									<Fab
 										aria-label={intl.formatMessage({
 											id             : 'label.fullscreen',
@@ -307,7 +386,7 @@ const Peer = (props) =>
 										})}
 										className={classes.fab}
 										disabled={!videoVisible}
-									size={smallButtons ? 'small' : 'large'}
+										size='large'
 										onClick={() =>
 										{
 											toggleConsumerFullscreen(webcamConsumer);
@@ -315,6 +394,7 @@ const Peer = (props) =>
 									>
 										<FullScreenIcon />
 									</Fab>
+								}
 							</div>
 						</Tooltip>
 					</div>
@@ -428,6 +508,27 @@ const Peer = (props) =>
 										placement={smallScreen ? 'top' : 'left'}
 									>
 										<div>
+											{ smallContainer ?
+												<IconButton
+													aria-label={intl.formatMessage({
+														id             : 'label.newWindow',
+														defaultMessage : 'New window'
+													})}
+													className={classes.smallContainer}
+													disabled={
+														!videoVisible ||
+														(windowConsumer === consumer.id)
+													}
+													size='small'
+													color='primary'
+													onClick={() =>
+													{
+														toggleConsumerWindow(consumer);
+													}}
+												>
+													<NewWindowIcon />
+												</IconButton>
+												:
 												<Fab
 													aria-label={intl.formatMessage({
 														id             : 'label.newWindow',
@@ -438,7 +539,7 @@ const Peer = (props) =>
 														!videoVisible ||
 														(windowConsumer === consumer.id)
 													}
-												size={smallButtons ? 'small' : 'large'}
+													size='large'
 													onClick={() =>
 													{
 														toggleConsumerWindow(consumer);
@@ -446,6 +547,7 @@ const Peer = (props) =>
 												>
 													<NewWindowIcon />
 												</Fab>
+											}
 										</div>
 									</Tooltip>
 								}
@@ -458,6 +560,24 @@ const Peer = (props) =>
 									placement={smallScreen ? 'top' : 'left'}
 								>
 									<div>
+										{ smallContainer ?
+											<IconButton
+												aria-label={intl.formatMessage({
+													id             : 'label.fullscreen',
+													defaultMessage : 'Fullscreen'
+												})}
+												className={classes.smallContainer}
+												disabled={!videoVisible}
+												size='small'
+												color='primary'
+												onClick={() =>
+												{
+													toggleConsumerFullscreen(consumer);
+												}}
+											>
+												<FullScreenIcon />
+											</IconButton>
+											:
 											<Fab
 												aria-label={intl.formatMessage({
 													id             : 'label.fullscreen',
@@ -465,7 +585,7 @@ const Peer = (props) =>
 												})}
 												className={classes.fab}
 												disabled={!videoVisible}
-											size={smallButtons ? 'small' : 'large'}
+												size='large'
 												onClick={() =>
 												{
 													toggleConsumerFullscreen(consumer);
@@ -473,6 +593,7 @@ const Peer = (props) =>
 											>
 												<FullScreenIcon />
 											</Fab>
+										}
 									</div>
 								</Tooltip>
 							</div>
@@ -584,7 +705,7 @@ const Peer = (props) =>
 												!screenVisible ||
 												(windowConsumer === screenConsumer.id)
 											}
-											size={smallButtons ? 'small' : 'large'}
+											size={smallContainer ? 'small' : 'large'}
 											onClick={() =>
 											{
 												toggleConsumerWindow(screenConsumer);
@@ -611,7 +732,7 @@ const Peer = (props) =>
 										})}
 										className={classes.fab}
 										disabled={!screenVisible}
-										size={smallButtons ? 'small' : 'large'}
+										size={smallContainer ? 'small' : 'large'}
 										onClick={() =>
 										{
 											toggleConsumerFullscreen(screenConsumer);
@@ -670,7 +791,7 @@ Peer.propTypes =
 	browser                  : PropTypes.object.isRequired,
 	spacing                  : PropTypes.number,
 	style                    : PropTypes.object,
-	smallButtons             : PropTypes.bool,
+	smallContainer           : PropTypes.bool,
 	toggleConsumerFullscreen : PropTypes.func.isRequired,
 	toggleConsumerWindow     : PropTypes.func.isRequired,
 	classes                  : PropTypes.object.isRequired,

app/src/components/MeetingViews/Filmstrip.js

@@ -49,7 +49,7 @@ const styles = () =>
 			},
 			'&.active' :
 			{
-				opacity : '0.6'
+				borderColor : 'var(--selected-peer-border-color)'
 			}
 		},
 		hiddenToolBar :
@@ -279,7 +279,7 @@ class Filmstrip extends React.PureComponent
 								<Me
 									advancedMode={advancedMode}
 									style={peerStyle}
-									smallButtons
+									smallContainer
 								/>
 							</div>
 						</Grid>
@@ -302,7 +302,7 @@ class Filmstrip extends React.PureComponent
 												advancedMode={advancedMode}
 												id={peerId}
 												style={peerStyle}
-												smallButtons
+												smallContainer
 											/>
 										</div>
 									</Grid>