diff --git a/app/src/components/Controls/ButtonControlBar.js b/app/src/components/Controls/ButtonControlBar.js index 5128db8..2080603 100644 --- a/app/src/components/Controls/ButtonControlBar.js +++ b/app/src/components/Controls/ButtonControlBar.js @@ -54,6 +54,31 @@ const styles = (theme) => { opacity : 0, transition : 'opacity .5s' + }, + move : + { + left : '30vw', + top : '50%', + transform : 'translate(0%, -50%)', + flexDirection : 'column', + justifyContent : 'center', + alignItems : 'center', + [theme.breakpoints.down('lg')] : + { + left : '40vw' + }, + [theme.breakpoints.down('md')] : + { + left : '50vw' + }, + [theme.breakpoints.down('sm')] : + { + left : '70vw' + }, + [theme.breakpoints.down('xs')] : + { + left : '90vw' + } } }); @@ -65,6 +90,8 @@ const ButtonControlBar = (props) => roomClient, toolbarsVisible, hiddenControls, + drawerOverlayed, + toolAreaOpen, me, micProducer, webcamProducer, @@ -177,7 +204,11 @@ const ButtonControlBar = (props) => classes.root, hiddenControls ? (toolbarsVisible ? classes.show : classes.hide) : - classes.show) + classes.show, + toolAreaOpen && + (me.browser.platform !== 'mobile' && !drawerOverlayed) ? + classes.move : null + ) } > @@ -270,6 +301,8 @@ ButtonControlBar.propTypes = roomClient : PropTypes.any.isRequired, toolbarsVisible : PropTypes.bool.isRequired, hiddenControls : PropTypes.bool.isRequired, + drawerOverlayed : PropTypes.bool.isRequired, + toolAreaOpen : PropTypes.bool.isRequired, me : appPropTypes.Me.isRequired, micProducer : appPropTypes.Producer, webcamProducer : appPropTypes.Producer, @@ -282,6 +315,8 @@ const mapStateToProps = (state) => ({ toolbarsVisible : state.room.toolbarsVisible, hiddenControls : state.settings.hiddenControls, + drawerOverlayed : state.settings.drawerOverlayed, + toolAreaOpen : state.toolarea.toolAreaOpen, ...meProducersSelector(state), me : state.me }); @@ -296,6 +331,8 @@ export default withRoomContext(connect( return ( prev.room.toolbarsVisible === next.room.toolbarsVisible && prev.settings.hiddenControls === next.settings.hiddenControls && + prev.settings.drawerOverlayed === next.settings.drawerOverlayed && + prev.toolarea.toolAreaOpen === next.toolarea.toolAreaOpen && prev.producers === next.producers && prev.me === next.me );