diff --git a/app/src/components/Containers/Me.js b/app/src/components/Containers/Me.js index 5e8e0dc..68ca46d 100644 --- a/app/src/components/Containers/Me.js +++ b/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} >
-
- -
+ { !smallContainer && +
+ +
+ }
}, 2000); }} > -

+

- - { - if (micState === 'off') - roomClient.enableMic(); - else if (micState === 'on') - roomClient.muteMic(); - else - roomClient.unmuteMic(); - }} - > - { micState === 'on' ? - - : - - } - + { smallContainer ? + + { + if (micState === 'off') + roomClient.enableMic(); + else if (micState === 'on') + roomClient.muteMic(); + else + roomClient.unmuteMic(); + }} + > + { micState === 'on' ? + + : + + } + + : + + { + if (micState === 'off') + roomClient.enableMic(); + else if (micState === 'on') + roomClient.muteMic(); + else + roomClient.unmuteMic(); + }} + > + { micState === 'on' ? + + : + + } + + }
- - { - webcamState === 'on' ? - roomClient.disableWebcam() : - roomClient.enableWebcam(); - }} - > - { webcamState === 'on' ? - - : - - } - + { smallContainer ? + + { + webcamState === 'on' ? + roomClient.disableWebcam() : + roomClient.enableWebcam(); + }} + > + { webcamState === 'on' ? + + : + + } + + : + + { + webcamState === 'on' ? + roomClient.disableWebcam() : + roomClient.enableWebcam(); + }} + > + { webcamState === 'on' ? + + : + + } + + }
{ me.browser.platform !== 'mobile' &&
- - { - switch (screenState) - { - case 'on': - { - roomClient.disableScreenSharing(); - break; - } - case 'off': - { - roomClient.enableScreenSharing(); - break; - } - default: - { - break; - } + { smallContainer ? + - { (screenState === 'on' || screenState === 'unsupported') && - - } - { screenState === 'off' && - - } - + color='primary' + size='small' + onClick={() => + { + switch (screenState) + { + case 'on': + { + roomClient.disableScreenSharing(); + break; + } + case 'off': + { + roomClient.enableScreenSharing(); + break; + } + default: + { + break; + } + } + }} + > + { (screenState === 'on' || screenState === 'unsupported') && + + } + { screenState === 'off' && + + } + + + : + + { + switch (screenState) + { + case 'on': + { + roomClient.disableScreenSharing(); + break; + } + case 'off': + { + roomClient.enableScreenSharing(); + break; + } + default: + { + break; + } + } + }} + > + { (screenState === 'on' || screenState === 'unsupported') && + + } + { screenState === 'off' && + + } + + }
} @@ -537,21 +660,41 @@ const Me = (props) =>
- - { - roomClient.disableExtraVideo(producer.id); - }} - > - - + { smallContainer ? + + { + roomClient.disableExtraVideo(producer.id); + }} + > + + + + : + + { + roomClient.disableExtraVideo(producer.id); + }} + > + + + }
@@ -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 diff --git a/app/src/components/Containers/Peer.js b/app/src/components/Containers/Peer.js index 3e6e776..2715c64 100644 --- a/app/src/components/Containers/Peer.js +++ b/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'} >
- - { - micEnabled ? - roomClient.modifyPeerConsumer(peer.id, 'mic', true) : - roomClient.modifyPeerConsumer(peer.id, 'mic', false); - }} - > - { micEnabled ? - - : - - } - + { smallContainer ? + + { + micEnabled ? + roomClient.modifyPeerConsumer(peer.id, 'mic', true) : + roomClient.modifyPeerConsumer(peer.id, 'mic', false); + }} + > + { micEnabled ? + + : + + } + + : + + { + micEnabled ? + roomClient.modifyPeerConsumer(peer.id, 'mic', true) : + roomClient.modifyPeerConsumer(peer.id, 'mic', false); + }} + > + { micEnabled ? + + : + + } + + }
@@ -270,24 +309,46 @@ const Peer = (props) => placement={smallScreen ? 'top' : 'left'} >
- - { - toggleConsumerWindow(webcamConsumer); - }} - > - - + { smallContainer ? + + { + toggleConsumerWindow(webcamConsumer); + }} + > + + + : + + { + toggleConsumerWindow(webcamConsumer); + }} + > + + + }
} @@ -300,21 +361,40 @@ const Peer = (props) => placement={smallScreen ? 'top' : 'left'} >
- - { - toggleConsumerFullscreen(webcamConsumer); - }} - > - - + { smallContainer ? + + { + toggleConsumerFullscreen(webcamConsumer); + }} + > + + + : + + { + toggleConsumerFullscreen(webcamConsumer); + }} + > + + + }
@@ -428,24 +508,46 @@ const Peer = (props) => placement={smallScreen ? 'top' : 'left'} >
- - { - toggleConsumerWindow(consumer); - }} - > - - + { smallContainer ? + + { + toggleConsumerWindow(consumer); + }} + > + + + : + + { + toggleConsumerWindow(consumer); + }} + > + + + }
} @@ -458,21 +560,40 @@ const Peer = (props) => placement={smallScreen ? 'top' : 'left'} >
- - { - toggleConsumerFullscreen(consumer); - }} - > - - + { smallContainer ? + + { + toggleConsumerFullscreen(consumer); + }} + > + + + : + + { + toggleConsumerFullscreen(consumer); + }} + > + + + }
@@ -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, diff --git a/app/src/components/MeetingViews/Filmstrip.js b/app/src/components/MeetingViews/Filmstrip.js index f78e5b5..a1a3cbe 100644 --- a/app/src/components/MeetingViews/Filmstrip.js +++ b/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 @@ -302,7 +302,7 @@ class Filmstrip extends React.PureComponent advancedMode={advancedMode} id={peerId} style={peerStyle} - smallButtons + smallContainer />