Fix button sizes and take care not to overflow container in filmstrip, ref #115
Håvar Aambø Fosstveit
parent
3f75a6c506
commit
2bb64596b0
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue