From f79a45234108b05981f46fec2a5883bc5fdce14b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?H=C3=A5var=20Aamb=C3=B8=20Fosstveit?= Date: Tue, 25 Jun 2019 11:38:03 +0200 Subject: [PATCH] Updated material-ui and fixed some layout. --- app/package.json | 4 +-- app/src/components/Containers/Me.js | 7 ++++- app/src/components/Containers/Peer.js | 9 ++++++- app/src/components/MeetingViews/Filmstrip.js | 2 ++ app/src/components/Room.js | 27 ++++++++++++++------ 5 files changed, 37 insertions(+), 12 deletions(-) diff --git a/app/package.json b/app/package.json index b32625c..9db48a7 100644 --- a/app/package.json +++ b/app/package.json @@ -6,8 +6,8 @@ "author": "Håvar Aambø Fosstveit ", "license": "MIT", "dependencies": { - "@material-ui/core": "^3.9.2", - "@material-ui/icons": "^3.0.2", + "@material-ui/core": "^4.1.2", + "@material-ui/icons": "^4.2.1", "bowser": "^2.4.0", "create-torrent": "^3.33.0", "domready": "^1.0.8", diff --git a/app/src/components/Containers/Me.js b/app/src/components/Containers/Me.js index 64bf3ee..cdb2251 100644 --- a/app/src/components/Containers/Me.js +++ b/app/src/components/Containers/Me.js @@ -3,7 +3,7 @@ import { connect } from 'react-redux'; import { meProducersSelector } from '../Selectors'; import { withRoomContext } from '../../RoomContext'; import { withStyles } from '@material-ui/core/styles'; -import { unstable_useMediaQuery as useMediaQuery } from '@material-ui/core/useMediaQuery'; +import useMediaQuery from '@material-ui/core/useMediaQuery'; import PropTypes from 'prop-types'; import classnames from 'classnames'; import * as appPropTypes from '../appPropTypes'; @@ -109,6 +109,7 @@ const Me = (props) => activeSpeaker, spacing, style, + smallButtons, advancedMode, micProducer, webcamProducer, @@ -264,6 +265,7 @@ const Me = (props) => className={classes.fab} disabled={!me.canSendMic || me.audioInProgress} color={micState === 'on' ? 'default' : 'secondary'} + size={smallButtons ? 'small' : 'large'} onClick={() => { if (micState === 'off') @@ -289,6 +291,7 @@ const Me = (props) => className={classes.fab} disabled={!me.canSendWebcam || me.webcamInProgress} color={webcamState === 'on' ? 'default' : 'secondary'} + size={smallButtons ? 'small' : 'large'} onClick={() => { webcamState === 'on' ? @@ -311,6 +314,7 @@ const Me = (props) => className={classes.fab} disabled={!me.canShareScreen || me.screenShareInProgress} color={screenState === 'on' ? 'primary' : 'default'} + size={smallButtons ? 'small' : 'large'} onClick={() => { switch (screenState) @@ -443,6 +447,7 @@ Me.propTypes = screenProducer : appPropTypes.Producer, spacing : PropTypes.number, style : PropTypes.object, + smallButtons : PropTypes.bool, 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 2d3a338..01bc263 100644 --- a/app/src/components/Containers/Peer.js +++ b/app/src/components/Containers/Peer.js @@ -6,7 +6,7 @@ import classnames from 'classnames'; import * as appPropTypes from '../appPropTypes'; import { withRoomContext } from '../../RoomContext'; import { withStyles } from '@material-ui/core/styles'; -import { unstable_useMediaQuery as useMediaQuery } from '@material-ui/core/useMediaQuery'; +import useMediaQuery from '@material-ui/core/useMediaQuery'; import * as stateActions from '../../actions/stateActions'; import VideoView from '../VideoContainers/VideoView'; import Fab from '@material-ui/core/Fab'; @@ -123,6 +123,7 @@ const Peer = (props) => toggleConsumerWindow, spacing, style, + smallButtons, windowConsumer, classes, theme @@ -231,6 +232,7 @@ const Peer = (props) => className={classes.fab} disabled={!micConsumer} color={micEnabled ? 'default' : 'secondary'} + size={smallButtons ? 'small' : 'large'} onClick={() => { micEnabled ? @@ -253,6 +255,7 @@ const Peer = (props) => !videoVisible || (windowConsumer === webcamConsumer.id) } + size={smallButtons ? 'small' : 'large'} onClick={() => { toggleConsumerWindow(webcamConsumer); @@ -267,6 +270,7 @@ const Peer = (props) => aria-label='Fullscreen' className={classes.fab} disabled={!videoVisible} + size={smallButtons ? 'small' : 'large'} onClick={() => { toggleConsumerFullscreen(webcamConsumer); @@ -356,6 +360,7 @@ const Peer = (props) => !screenVisible || (windowConsumer === screenConsumer.id) } + size={smallButtons ? 'small' : 'large'} onClick={() => { toggleConsumerWindow(screenConsumer); @@ -370,6 +375,7 @@ const Peer = (props) => aria-label='Fullscreen' className={classes.fab} disabled={!screenVisible} + size={smallButtons ? 'small' : 'large'} onClick={() => { toggleConsumerFullscreen(screenConsumer); @@ -408,6 +414,7 @@ Peer.propTypes = activeSpeaker : PropTypes.bool, spacing : PropTypes.number, style : PropTypes.object, + smallButtons : 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 2949eff..934db64 100644 --- a/app/src/components/MeetingViews/Filmstrip.js +++ b/app/src/components/MeetingViews/Filmstrip.js @@ -249,6 +249,7 @@ class Filmstrip extends React.PureComponent @@ -271,6 +272,7 @@ class Filmstrip extends React.PureComponent advancedMode={advancedMode} id={peerId} style={peerStyle} + smallButtons /> diff --git a/app/src/components/Room.js b/app/src/components/Room.js index c71897e..6057865 100644 --- a/app/src/components/Room.js +++ b/app/src/components/Room.js @@ -32,7 +32,7 @@ import FullScreenExitIcon from '@material-ui/icons/FullscreenExit'; import SettingsIcon from '@material-ui/icons/Settings'; import LockIcon from '@material-ui/icons/Lock'; import LockOpenIcon from '@material-ui/icons/LockOpen'; -import LeaveIcon from '@material-ui/icons/Cancel'; +import Button from '@material-ui/core/Button'; import Settings from './Settings/Settings'; import JoinDialog from './JoinDialog'; @@ -127,6 +127,11 @@ const styles = (theme) => { display : 'flex' }, + actionButton : + { + margin : theme.spacing.unit, + padding : 0 + }, meContainer : { position : 'fixed', @@ -308,15 +313,9 @@ class Room extends React.PureComponent
- roomClient.close()} - > - - { @@ -339,6 +338,7 @@ class Room extends React.PureComponent { this.fullscreen.fullscreenEnabled ? @@ -352,6 +352,7 @@ class Room extends React.PureComponent } setSettingsOpen(!room.settingsOpen)} > @@ -360,6 +361,7 @@ class Room extends React.PureComponent { loginEnabled ? { @@ -374,6 +376,15 @@ class Room extends React.PureComponent :null } +