Updated material-ui and fixed some layout.
Håvar Aambø Fosstveit
parent
9acf0056ac
commit
f79a452341
|
|
@ -6,8 +6,8 @@
|
|||
"author": "Håvar Aambø Fosstveit <h@fosstveit.net>",
|
||||
"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",
|
||||
|
|
|
|||
|
|
@ -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
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -249,6 +249,7 @@ class Filmstrip extends React.PureComponent
|
|||
<Me
|
||||
advancedMode={advancedMode}
|
||||
style={peerStyle}
|
||||
smallButtons
|
||||
/>
|
||||
</div>
|
||||
</Grid>
|
||||
|
|
@ -271,6 +272,7 @@ class Filmstrip extends React.PureComponent
|
|||
advancedMode={advancedMode}
|
||||
id={peerId}
|
||||
style={peerStyle}
|
||||
smallButtons
|
||||
/>
|
||||
</div>
|
||||
</Grid>
|
||||
|
|
|
|||
|
|
@ -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
|
|||
</Typography>
|
||||
<div className={classes.grow} />
|
||||
<div className={classes.actionButtons}>
|
||||
<IconButton
|
||||
aria-label='Leave meeting'
|
||||
color='secondary'
|
||||
onClick={() => roomClient.close()}
|
||||
>
|
||||
<LeaveIcon />
|
||||
</IconButton>
|
||||
<IconButton
|
||||
aria-label='Lock room'
|
||||
className={classes.actionButton}
|
||||
color='inherit'
|
||||
onClick={() =>
|
||||
{
|
||||
|
|
@ -339,6 +338,7 @@ class Room extends React.PureComponent
|
|||
{ this.fullscreen.fullscreenEnabled ?
|
||||
<IconButton
|
||||
aria-label='Fullscreen'
|
||||
className={classes.actionButton}
|
||||
color='inherit'
|
||||
onClick={this.handleToggleFullscreen}
|
||||
>
|
||||
|
|
@ -352,6 +352,7 @@ class Room extends React.PureComponent
|
|||
}
|
||||
<IconButton
|
||||
aria-label='Settings'
|
||||
className={classes.actionButton}
|
||||
color='inherit'
|
||||
onClick={() => setSettingsOpen(!room.settingsOpen)}
|
||||
>
|
||||
|
|
@ -360,6 +361,7 @@ class Room extends React.PureComponent
|
|||
{ loginEnabled ?
|
||||
<IconButton
|
||||
aria-label='Account'
|
||||
className={classes.actionButton}
|
||||
color='inherit'
|
||||
onClick={() =>
|
||||
{
|
||||
|
|
@ -374,6 +376,15 @@ class Room extends React.PureComponent
|
|||
</IconButton>
|
||||
:null
|
||||
}
|
||||
<Button
|
||||
aria-label='Leave meeting'
|
||||
className={classes.actionButton}
|
||||
variant='contained'
|
||||
color='secondary'
|
||||
onClick={() => roomClient.close()}
|
||||
>
|
||||
Leave
|
||||
</Button>
|
||||
</div>
|
||||
</Toolbar>
|
||||
</AppBar>
|
||||
|
|
|
|||
Loading…
Reference in New Issue