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,16 +318,18 @@ const Me = (props) =>
 				style={spacingStyle}
 			>
 				<div className={classes.viewContainer} style={style}>
-					<div className={classnames(
-						classes.ptt,
-						(micState === 'muted' && me.isSpeaking) ? 'enabled' : null
-					)}
-					>
-						<FormattedMessage
-							id='me.mutedPTT'
-							defaultMessage='You are muted, hold down SPACE-BAR to talk'
-						/>	
-					</div>
+					{ !smallContainer &&
+						<div className={classnames(
+							classes.ptt,
+							(micState === 'muted' && me.isSpeaking) ? 'enabled' : null
+						)}
+						>
+							<FormattedMessage
+								id='me.mutedPTT'
+								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,103 +371,201 @@ const Me = (props) =>
 						<React.Fragment>
 							<Tooltip title={micTip} placement='left'>
 								<div>
-									<Fab
-										aria-label={intl.formatMessage({
-											id             : 'device.muteAudio',
-											defaultMessage : 'Mute audio'
-										})}
-										className={classes.fab}
-										disabled={!me.canSendMic || me.audioInProgress}
-										color={micState === 'on' ? 'default' : 'secondary'}
-										size={smallButtons ? 'small' : 'large'}
-										onClick={() =>
-										{
-											if (micState === 'off')
-												roomClient.enableMic();
-											else if (micState === 'on')
-												roomClient.muteMic();
-											else
-												roomClient.unmuteMic();
-										}}
-									>
-										{ micState === 'on' ?
-											<MicIcon />
-											:
-											<MicOffIcon />
-										}
-									</Fab>
+									{ 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',
+												defaultMessage : 'Mute audio'
+											})}
+											className={classes.fab}
+											disabled={!me.canSendMic || me.audioInProgress}
+											color={micState === 'on' ? 'default' : 'secondary'}
+											size='large'
+											onClick={() =>
+											{
+												if (micState === 'off')
+													roomClient.enableMic();
+												else if (micState === 'on')
+													roomClient.muteMic();
+												else
+													roomClient.unmuteMic();
+											}}
+										>
+											{ micState === 'on' ?
+												<MicIcon />
+												:
+												<MicOffIcon />
+											}
+										</Fab>
+									}
 								</div>
 							</Tooltip>
 							<Tooltip title={webcamTip} placement='left'>
 								<div>
-									<Fab
-										aria-label={intl.formatMessage({
-											id             : 'device.startVideo',
-											defaultMessage : 'Start video'
-										})}
-										className={classes.fab}
-										disabled={!me.canSendWebcam || me.webcamInProgress}
-										color={webcamState === 'on' ? 'default' : 'secondary'}
-										size={smallButtons ? 'small' : 'large'}
-										onClick={() =>
-										{
-											webcamState === 'on' ?
-												roomClient.disableWebcam() :
-												roomClient.enableWebcam();
-										}}
-									>
-										{ webcamState === 'on' ?
-											<VideoIcon />
-											:
-											<VideoOffIcon />
-										}
-									</Fab>
+									{ 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',
+												defaultMessage : 'Start video'
+											})}
+											className={classes.fab}
+											disabled={!me.canSendWebcam || me.webcamInProgress}
+											color={webcamState === 'on' ? 'default' : 'secondary'}
+											size='large'
+											onClick={() =>
+											{
+												webcamState === 'on' ?
+													roomClient.disableWebcam() :
+													roomClient.enableWebcam();
+											}}
+										>
+											{ webcamState === 'on' ?
+												<VideoIcon />
+												:
+												<VideoOffIcon />
+											}
+										</Fab>
+									}
 								</div>
 							</Tooltip>
 							{ me.browser.platform !== 'mobile' &&
 								<Tooltip title={screenTip} placement='left'>
 									<div>
-										<Fab
-											aria-label={intl.formatMessage({
-												id             : 'device.startScreenSharing',
-												defaultMessage : 'Start screen sharing'
-											})}
-											className={classes.fab}
-											disabled={
-												!canShareScreen ||
-												!me.canShareScreen ||
-												me.screenShareInProgress
-											}
-											color={screenState === 'on' ? 'primary' : 'default'}
-											size={smallButtons ? 'small' : 'large'}
-											onClick={() =>
-											{
-												switch (screenState)
-												{
-													case 'on':
-													{
-														roomClient.disableScreenSharing();
-														break;
-													}
-													case 'off':
-													{
-														roomClient.enableScreenSharing();
-														break;
-													}
-													default:
-													{
-														break;
-													}
+										{ smallContainer ?
+											<IconButton
+												aria-label={intl.formatMessage({
+													id             : 'device.startScreenSharing',
+													defaultMessage : 'Start screen sharing'
+												})}
+												className={classes.smallContainer}
+												disabled={
+													!canShareScreen ||
+													!me.canShareScreen ||
+													me.screenShareInProgress
 												}
-											}}
-										>
-											{ (screenState === 'on' || screenState === 'unsupported') &&
-												<ScreenOffIcon/>
-											}
-											{ screenState === 'off' &&
-												<ScreenIcon/>
-											}
-										</Fab>
+												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',
+													defaultMessage : 'Start screen sharing'
+												})}
+												className={classes.fab}
+												disabled={
+													!canShareScreen ||
+													!me.canShareScreen ||
+													me.screenShareInProgress
+												}
+												color={screenState === 'on' ? 'primary' : 'default'}
+												size='large'
+												onClick={() =>
+												{
+													switch (screenState)
+													{
+														case 'on':
+														{
+															roomClient.disableScreenSharing();
+															break;
+														}
+														case 'off':
+														{
+															roomClient.enableScreenSharing();
+															break;
+														}
+														default:
+														{
+															break;
+														}
+													}
+												}}
+											>
+												{ (screenState === 'on' || screenState === 'unsupported') &&
+													<ScreenOffIcon/>
+												}
+												{ screenState === 'off' &&
+													<ScreenIcon/>
+												}
+											</Fab>
+										}
 									</div>
 								</Tooltip>
 							}
@@ -537,21 +660,41 @@ const Me = (props) =>
 
 								<Tooltip title={webcamTip} placement='left'>
 									<div>
-										<Fab
-											aria-label={intl.formatMessage({
-												id             : 'device.stopVideo',
-												defaultMessage : 'Stop video'
-											})}
-											className={classes.fab}
-											disabled={!me.canSendWebcam || me.webcamInProgress}
-											size={smallButtons ? 'small' : 'large'}
-											onClick={() =>
-											{
-												roomClient.disableExtraVideo(producer.id);
-											}}
-										>
-											<VideoIcon />
-										</Fab>
+										{ 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',
+													defaultMessage : 'Stop video'
+												})}
+												className={classes.fab}
+												disabled={!me.canSendWebcam || me.webcamInProgress}
+												size={smallContainer ? 'small' : 'large'}
+												onClick={() =>
+												{
+													roomClient.disableExtraVideo(producer.id);
+												}}
+											>
+												<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,28 +250,53 @@ const Peer = (props) =>
 							placement={smallScreen ? 'top' : 'left'}
 						>
 							<div>
-								<Fab
-									aria-label={intl.formatMessage({
-										id             : 'device.muteAudio',
-										defaultMessage : 'Mute audio'
-									})}
-									className={classes.fab}
-									disabled={!micConsumer}
-									color={micEnabled ? 'default' : 'secondary'}
-									size={smallButtons ? 'small' : 'large'}
-									onClick={() =>
-									{
-										micEnabled ?
-											roomClient.modifyPeerConsumer(peer.id, 'mic', true) :
-											roomClient.modifyPeerConsumer(peer.id, 'mic', false);
-									}}
-								>
-									{ micEnabled ?
-										<VolumeUpIcon />
-										:
-										<VolumeOffIcon />
-									}
-								</Fab>
+								{ 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',
+											defaultMessage : 'Mute audio'
+										})}
+										className={classes.fab}
+										disabled={!micConsumer}
+										color={micEnabled ? 'default' : 'secondary'}
+										size='large'
+										onClick={() =>
+										{
+											micEnabled ?
+												roomClient.modifyPeerConsumer(peer.id, 'mic', true) :
+												roomClient.modifyPeerConsumer(peer.id, 'mic', false);
+										}}
+									>
+										{ micEnabled ?
+											<VolumeUpIcon />
+											:
+											<VolumeOffIcon />
+										}
+									</Fab>
+								}
 							</div>
 						</Tooltip>
 
@@ -270,24 +309,46 @@ const Peer = (props) =>
 								placement={smallScreen ? 'top' : 'left'}
 							>
 								<div>
-									<Fab
-										aria-label={intl.formatMessage({
-											id             : 'label.newWindow',
-											defaultMessage : 'New window'
-										})}
-										className={classes.fab}
-										disabled={
-											!videoVisible ||
-											(windowConsumer === webcamConsumer.id)
-										}
-										size={smallButtons ? 'small' : 'large'}
-										onClick={() =>
-										{
-											toggleConsumerWindow(webcamConsumer);
-										}}
-									>
-										<NewWindowIcon />
-									</Fab>
+									{ 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',
+												defaultMessage : 'New window'
+											})}
+											className={classes.fab}
+											disabled={
+												!videoVisible ||
+												(windowConsumer === webcamConsumer.id)
+											}
+											size='large'
+											onClick={() =>
+											{
+												toggleConsumerWindow(webcamConsumer);
+											}}
+										>
+											<NewWindowIcon />
+										</Fab>
+									}
 								</div>
 							</Tooltip>
 						}
@@ -300,21 +361,40 @@ const Peer = (props) =>
 							placement={smallScreen ? 'top' : 'left'}
 						>
 							<div>
-								<Fab
-									aria-label={intl.formatMessage({
-										id             : 'label.fullscreen',
-										defaultMessage : 'Fullscreen'
-									})}
-									className={classes.fab}
-									disabled={!videoVisible}
-									size={smallButtons ? 'small' : 'large'}
-									onClick={() =>
-									{
-										toggleConsumerFullscreen(webcamConsumer);
-									}}
-								>
-									<FullScreenIcon />
-								</Fab>
+								{ 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',
+											defaultMessage : 'Fullscreen'
+										})}
+										className={classes.fab}
+										disabled={!videoVisible}
+										size='large'
+										onClick={() =>
+										{
+											toggleConsumerFullscreen(webcamConsumer);
+										}}
+									>
+										<FullScreenIcon />
+									</Fab>
+								}
 							</div>
 						</Tooltip>
 					</div>
@@ -428,24 +508,46 @@ const Peer = (props) =>
 										placement={smallScreen ? 'top' : 'left'}
 									>
 										<div>
-											<Fab
-												aria-label={intl.formatMessage({
-													id             : 'label.newWindow',
-													defaultMessage : 'New window'
-												})}
-												className={classes.fab}
-												disabled={
-													!videoVisible ||
-													(windowConsumer === consumer.id)
-												}
-												size={smallButtons ? 'small' : 'large'}
-												onClick={() =>
-												{
-													toggleConsumerWindow(consumer);
-												}}
-											>
-												<NewWindowIcon />
-											</Fab>
+											{ 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',
+														defaultMessage : 'New window'
+													})}
+													className={classes.fab}
+													disabled={
+														!videoVisible ||
+														(windowConsumer === consumer.id)
+													}
+													size='large'
+													onClick={() =>
+													{
+														toggleConsumerWindow(consumer);
+													}}
+												>
+													<NewWindowIcon />
+												</Fab>
+											}
 										</div>
 									</Tooltip>
 								}
@@ -458,21 +560,40 @@ const Peer = (props) =>
 									placement={smallScreen ? 'top' : 'left'}
 								>
 									<div>
-										<Fab
-											aria-label={intl.formatMessage({
-												id             : 'label.fullscreen',
-												defaultMessage : 'Fullscreen'
-											})}
-											className={classes.fab}
-											disabled={!videoVisible}
-											size={smallButtons ? 'small' : 'large'}
-											onClick={() =>
-											{
-												toggleConsumerFullscreen(consumer);
-											}}
-										>
-											<FullScreenIcon />
-										</Fab>
+										{ 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',
+													defaultMessage : 'Fullscreen'
+												})}
+												className={classes.fab}
+												disabled={!videoVisible}
+												size='large'
+												onClick={() =>
+												{
+													toggleConsumerFullscreen(consumer);
+												}}
+											>
+												<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>