diff --git a/app/src/components/Containers/Me.js b/app/src/components/Containers/Me.js index 09eb2d6..bbf7400 100644 --- a/app/src/components/Containers/Me.js +++ b/app/src/components/Containers/Me.js @@ -3,7 +3,6 @@ import { connect } from 'react-redux'; import { meProducersSelector } from '../Selectors'; import { withRoomContext } from '../../RoomContext'; import { withStyles } from '@material-ui/core/styles'; -import useMediaQuery from '@material-ui/core/useMediaQuery'; import PropTypes from 'prop-types'; import classnames from 'classnames'; import * as appPropTypes from '../appPropTypes'; @@ -68,21 +67,16 @@ const styles = (theme) => }, controls : { - position : 'absolute', - width : '100%', - height : '100%', - backgroundColor : 'rgba(0, 0, 0, 0.3)', - display : 'flex', - flexDirection : 'column', - justifyContent : 'center', - alignItems : 'flex-end', - padding : theme.spacing(1), - zIndex : 21, - opacity : 1, - transition : 'opacity 0.3s', - touchAction : 'none', - pointerEvents : 'none', - '& p' : + position : 'absolute', + width : '100%', + height : '100%', + display : 'flex', + flexDirection : 'column', + justifyContent : 'center', + alignItems : 'flex-end', + padding : theme.spacing(1), + zIndex : 21, + '& p' : { position : 'absolute', float : 'left', @@ -261,8 +255,6 @@ const Me = (props) => 'margin' : spacing }; - const smallScreen = useMediaQuery(theme.breakpoints.down('sm')); - return (
}} style={spacingStyle} > -
+
setHover(true)} onMouseOut={() => setHover(false)} onTouchStart={() => @@ -318,124 +310,126 @@ const Me = (props) => }, 2000); }} > -

+

-
+
- { !me.isMobile && - - -
- + + +
+ + { + if (micState === 'off') + roomClient.enableMic(); + else if (micState === 'on') + roomClient.muteMic(); + else + roomClient.unmuteMic(); + }} + > + { micState === 'on' ? + + : + + } + +
+
+ +
+ + { + webcamState === 'on' ? + roomClient.disableWebcam() : + roomClient.enableWebcam(); + }} + > + { webcamState === 'on' ? + + : + + } + +
+
+ +
+ + { + switch (screenState) { - if (micState === 'off') - roomClient.enableMic(); - else if (micState === 'on') - roomClient.muteMic(); - else - roomClient.unmuteMic(); - }} - > - { micState === 'on' ? - - : - - } - -
-
- -
- - { - webcamState === 'on' ? - roomClient.disableWebcam() : - roomClient.enableWebcam(); - }} - > - { webcamState === 'on' ? - - : - - } - -
-
- -
- - { - switch (screenState) + case 'on': { - case 'on': - { - roomClient.disableScreenSharing(); - break; - } - case 'off': - { - roomClient.enableScreenSharing(); - break; - } - default: - { - break; - } + roomClient.disableScreenSharing(); + break; + } + case 'off': + { + roomClient.enableScreenSharing(); + break; + } + default: + { + break; } - }} - > - { (screenState === 'on' || screenState === 'unsupported') && - } - { screenState === 'off' && - - } - -
-
-
- } + }} + > + { (screenState === 'on' || screenState === 'unsupported') && + + } + { screenState === 'off' && + + } +
+
+
+
}} style={spacingStyle} > -
+
setHover(true)} onMouseOut={() => setHover(false)} onTouchStart={() => @@ -505,7 +499,7 @@ const Me = (props) => }, 2000); }} > -

+

- ({ - root : - { - position : 'fixed', - zIndex : 500, - display : 'flex', - flexDirection : 'row', - bottom : '0.5em', - left : '50%', - transform : 'translate(-50%, -0%)' - }, - fab : - { - margin : theme.spacing(1) - } - }); - -const MobileControls = (props) => -{ - const { - roomClient, - me, - micProducer, - webcamProducer, - classes - } = props; - - let micState; - - let micTip; - - if (!me.canSendMic) - { - micState = 'unsupported'; - micTip = 'Audio unsupported'; - } - else if (!micProducer) - { - micState = 'off'; - micTip = 'Activate audio'; - } - else if (!micProducer.locallyPaused && !micProducer.remotelyPaused) - { - micState = 'on'; - micTip = 'Mute audio'; - } - else - { - micState = 'muted'; - 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'; - } - - return ( -

- -
- - { - if (micState === 'off') - roomClient.enableMic(); - else if (micState === 'on') - roomClient.muteMic(); - else - roomClient.unmuteMic(); - }} - > - { micState === 'on' ? - - : - - } - -
-
- -
- - { - webcamState === 'on' ? - roomClient.disableWebcam() : - roomClient.enableWebcam(); - }} - > - { webcamState === 'on' ? - - : - - } - -
-
-
- ); -}; - -MobileControls.propTypes = -{ - roomClient : PropTypes.any.isRequired, - me : appPropTypes.Me.isRequired, - micProducer : appPropTypes.Producer, - webcamProducer : appPropTypes.Producer, - classes : PropTypes.object.isRequired, - theme : PropTypes.object.isRequired -}; - -const mapStateToProps = (state) => - ({ - ...meProducersSelector(state), - me : state.me - }); - -export default withRoomContext(connect( - mapStateToProps, - null, - null, - { - areStatesEqual : (next, prev) => - { - return ( - prev.producers === next.producers && - prev.me === next.me - ); - } - } -)(withStyles(styles, { withTheme: true })(MobileControls))); \ No newline at end of file diff --git a/app/src/components/Room.js b/app/src/components/Room.js index aef3987..a9c8a00 100644 --- a/app/src/components/Room.js +++ b/app/src/components/Room.js @@ -23,7 +23,6 @@ import VideoWindow from './VideoWindow/VideoWindow'; import LockDialog from './AccessControl/LockDialog/LockDialog'; import Settings from './Settings/Settings'; import TopBar from './Controls/TopBar'; -import MobileControls from './Controls/MobileControls'; const TIMEOUT = 5 * 1000; @@ -206,10 +205,6 @@ class Room extends React.PureComponent - { isMobile && - - } - { room.lockDialogOpen && }