Move top AppBar to its own component.
Håvar Aambø Fosstveit
parent
99575f330b
commit
0414aa6b7b
|
|
@ -0,0 +1,329 @@
|
|||
import React from 'react';
|
||||
import { connect } from 'react-redux';
|
||||
import PropTypes from 'prop-types';
|
||||
import {
|
||||
lobbyPeersKeySelector
|
||||
} from '../Selectors';
|
||||
import * as appPropTypes from '../appPropTypes';
|
||||
import { withRoomContext } from '../../RoomContext';
|
||||
import { withStyles } from '@material-ui/core/styles';
|
||||
import * as roomActions from '../../actions/roomActions';
|
||||
import * as toolareaActions from '../../actions/toolareaActions';
|
||||
import AppBar from '@material-ui/core/AppBar';
|
||||
import Toolbar from '@material-ui/core/Toolbar';
|
||||
import Typography from '@material-ui/core/Typography';
|
||||
import IconButton from '@material-ui/core/IconButton';
|
||||
import MenuIcon from '@material-ui/icons/Menu';
|
||||
import Avatar from '@material-ui/core/Avatar';
|
||||
import Badge from '@material-ui/core/Badge';
|
||||
import AccountCircle from '@material-ui/icons/AccountCircle';
|
||||
import FullScreenIcon from '@material-ui/icons/Fullscreen';
|
||||
import FullScreenExitIcon from '@material-ui/icons/FullscreenExit';
|
||||
import SettingsIcon from '@material-ui/icons/Settings';
|
||||
import SecurityIcon from '@material-ui/icons/Security';
|
||||
import LockIcon from '@material-ui/icons/Lock';
|
||||
import LockOpenIcon from '@material-ui/icons/LockOpen';
|
||||
import Button from '@material-ui/core/Button';
|
||||
import Tooltip from '@material-ui/core/Tooltip';
|
||||
|
||||
const styles = (theme) =>
|
||||
({
|
||||
menuButton :
|
||||
{
|
||||
margin : 0,
|
||||
padding : 0
|
||||
},
|
||||
logo :
|
||||
{
|
||||
display : 'none',
|
||||
marginLeft : 20,
|
||||
[theme.breakpoints.up('sm')] :
|
||||
{
|
||||
display : 'block'
|
||||
}
|
||||
},
|
||||
show :
|
||||
{
|
||||
opacity : 1,
|
||||
transition : 'opacity .5s'
|
||||
},
|
||||
hide :
|
||||
{
|
||||
opacity : 0,
|
||||
transition : 'opacity .5s'
|
||||
},
|
||||
grow :
|
||||
{
|
||||
flexGrow : 1
|
||||
},
|
||||
title :
|
||||
{
|
||||
display : 'none',
|
||||
marginLeft : 20,
|
||||
[theme.breakpoints.up('sm')] :
|
||||
{
|
||||
display : 'block'
|
||||
}
|
||||
},
|
||||
actionButtons :
|
||||
{
|
||||
display : 'flex'
|
||||
},
|
||||
actionButton :
|
||||
{
|
||||
margin : theme.spacing(1),
|
||||
padding : 0
|
||||
}
|
||||
});
|
||||
|
||||
const PulsingBadge = withStyles((theme) =>
|
||||
({
|
||||
badge :
|
||||
{
|
||||
backgroundColor : theme.palette.secondary.main,
|
||||
'&::after' :
|
||||
{
|
||||
position : 'absolute',
|
||||
width : '100%',
|
||||
height : '100%',
|
||||
borderRadius : '50%',
|
||||
animation : '$ripple 1.2s infinite ease-in-out',
|
||||
border : `3px solid ${theme.palette.secondary.main}`,
|
||||
content : '""'
|
||||
}
|
||||
},
|
||||
'@keyframes ripple' :
|
||||
{
|
||||
'0%' :
|
||||
{
|
||||
transform : 'scale(.8)',
|
||||
opacity : 1
|
||||
},
|
||||
'100%' :
|
||||
{
|
||||
transform : 'scale(2.4)',
|
||||
opacity : 0
|
||||
}
|
||||
}
|
||||
}))(Badge);
|
||||
|
||||
const TopBar = (props) =>
|
||||
{
|
||||
const {
|
||||
roomClient,
|
||||
room,
|
||||
lobbyPeers,
|
||||
myPicture,
|
||||
loggedIn,
|
||||
loginEnabled,
|
||||
fullscreenEnabled,
|
||||
fullscreen,
|
||||
onFullscreen,
|
||||
setSettingsOpen,
|
||||
setLockDialogOpen,
|
||||
toggleToolArea,
|
||||
unread,
|
||||
classes
|
||||
} = props;
|
||||
|
||||
return (
|
||||
<AppBar
|
||||
position='fixed'
|
||||
className={room.toolbarsVisible ? classes.show : classes.hide}
|
||||
>
|
||||
<Toolbar>
|
||||
<PulsingBadge
|
||||
color='secondary'
|
||||
badgeContent={unread}
|
||||
>
|
||||
<IconButton
|
||||
color='inherit'
|
||||
aria-label='Open drawer'
|
||||
onClick={() => toggleToolArea()}
|
||||
className={classes.menuButton}
|
||||
>
|
||||
<MenuIcon />
|
||||
</IconButton>
|
||||
</PulsingBadge>
|
||||
{ window.config.logo && <img alt='Logo' className={classes.logo} src={window.config.logo} /> }
|
||||
<Typography
|
||||
className={classes.title}
|
||||
variant='h6'
|
||||
color='inherit'
|
||||
noWrap
|
||||
>
|
||||
{ window.config.title }
|
||||
</Typography>
|
||||
<div className={classes.grow} />
|
||||
<div className={classes.actionButtons}>
|
||||
<Tooltip title={`${room.locked ? 'Unlock' : 'Lock'} room`}>
|
||||
<IconButton
|
||||
aria-label='Lock room'
|
||||
className={classes.actionButton}
|
||||
color='inherit'
|
||||
onClick={() =>
|
||||
{
|
||||
if (room.locked)
|
||||
{
|
||||
roomClient.unlockRoom();
|
||||
}
|
||||
else
|
||||
{
|
||||
roomClient.lockRoom();
|
||||
}
|
||||
}}
|
||||
>
|
||||
{ room.locked ?
|
||||
<LockIcon />
|
||||
:
|
||||
<LockOpenIcon />
|
||||
}
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
{ lobbyPeers.length > 0 &&
|
||||
<Tooltip title='Show lobby'>
|
||||
<IconButton
|
||||
aria-label='Lobby'
|
||||
color='inherit'
|
||||
onClick={() => setLockDialogOpen(!room.lockDialogOpen)}
|
||||
>
|
||||
<PulsingBadge
|
||||
color='secondary'
|
||||
badgeContent={lobbyPeers.length}
|
||||
>
|
||||
<SecurityIcon />
|
||||
</PulsingBadge>
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
}
|
||||
{ fullscreenEnabled &&
|
||||
<Tooltip title={`${fullscreen ? 'Leave' : 'Enter'} fullscreen`}>
|
||||
<IconButton
|
||||
aria-label='Fullscreen'
|
||||
className={classes.actionButton}
|
||||
color='inherit'
|
||||
onClick={onFullscreen}
|
||||
>
|
||||
{ fullscreen ?
|
||||
<FullScreenExitIcon />
|
||||
:
|
||||
<FullScreenIcon />
|
||||
}
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
}
|
||||
<Tooltip title='Show settings'>
|
||||
<IconButton
|
||||
aria-label='Settings'
|
||||
className={classes.actionButton}
|
||||
color='inherit'
|
||||
onClick={() => setSettingsOpen(!room.settingsOpen)}
|
||||
>
|
||||
<SettingsIcon />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
{ loginEnabled &&
|
||||
<Tooltip title={`Log ${loggedIn ? 'out' : 'in'}`}>
|
||||
<IconButton
|
||||
aria-label='Account'
|
||||
className={classes.actionButton}
|
||||
color='inherit'
|
||||
onClick={() =>
|
||||
{
|
||||
loggedIn ? roomClient.logout() : roomClient.login();
|
||||
}}
|
||||
>
|
||||
{ myPicture ?
|
||||
<Avatar src={myPicture} />
|
||||
:
|
||||
<AccountCircle />
|
||||
}
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
}
|
||||
<Button
|
||||
aria-label='Leave meeting'
|
||||
className={classes.actionButton}
|
||||
variant='contained'
|
||||
color='secondary'
|
||||
onClick={() => roomClient.close()}
|
||||
>
|
||||
Leave
|
||||
</Button>
|
||||
</div>
|
||||
</Toolbar>
|
||||
</AppBar>
|
||||
);
|
||||
};
|
||||
|
||||
TopBar.propTypes =
|
||||
{
|
||||
roomClient : PropTypes.object.isRequired,
|
||||
room : appPropTypes.Room.isRequired,
|
||||
lobbyPeers : PropTypes.array,
|
||||
myPicture : PropTypes.string,
|
||||
loggedIn : PropTypes.bool.isRequired,
|
||||
loginEnabled : PropTypes.bool.isRequired,
|
||||
fullscreenEnabled : PropTypes.bool,
|
||||
fullscreen : PropTypes.bool,
|
||||
onFullscreen : PropTypes.func.isRequired,
|
||||
setToolbarsVisible : PropTypes.func.isRequired,
|
||||
setSettingsOpen : PropTypes.func.isRequired,
|
||||
setLockDialogOpen : PropTypes.func.isRequired,
|
||||
toggleToolArea : PropTypes.func.isRequired,
|
||||
unread : PropTypes.number.isRequired,
|
||||
classes : PropTypes.object.isRequired,
|
||||
theme : PropTypes.object.isRequired
|
||||
};
|
||||
|
||||
const mapStateToProps = (state) =>
|
||||
({
|
||||
room : state.room,
|
||||
lobbyPeers : lobbyPeersKeySelector(state),
|
||||
advancedMode : state.settings.advancedMode,
|
||||
loggedIn : state.me.loggedIn,
|
||||
loginEnabled : state.me.loginEnabled,
|
||||
myPicture : state.me.picture,
|
||||
unread : state.toolarea.unreadMessages +
|
||||
state.toolarea.unreadFiles
|
||||
});
|
||||
|
||||
const mapDispatchToProps = (dispatch) =>
|
||||
({
|
||||
setToolbarsVisible : (visible) =>
|
||||
{
|
||||
dispatch(roomActions.setToolbarsVisible(visible));
|
||||
},
|
||||
setSettingsOpen : (settingsOpen) =>
|
||||
{
|
||||
dispatch(roomActions.setSettingsOpen({ settingsOpen }));
|
||||
},
|
||||
setLockDialogOpen : (lockDialogOpen) =>
|
||||
{
|
||||
dispatch(roomActions.setLockDialogOpen({ lockDialogOpen }));
|
||||
},
|
||||
toggleToolArea : () =>
|
||||
{
|
||||
dispatch(toolareaActions.toggleToolArea());
|
||||
}
|
||||
});
|
||||
|
||||
export default withRoomContext(connect(
|
||||
mapStateToProps,
|
||||
mapDispatchToProps,
|
||||
null,
|
||||
{
|
||||
areStatesEqual : (next, prev) =>
|
||||
{
|
||||
return (
|
||||
prev.room === next.room &&
|
||||
prev.lobbyPeers === next.lobbyPeers &&
|
||||
prev.me.loggedIn === next.me.loggedIn &&
|
||||
prev.me.loginEnabled === next.me.loginEnabled &&
|
||||
prev.me.picture === next.me.picture &&
|
||||
prev.toolarea.unreadMessages === next.toolarea.unreadMessages &&
|
||||
prev.toolarea.unreadFiles === next.toolarea.unreadFiles
|
||||
);
|
||||
}
|
||||
}
|
||||
)(withStyles(styles, { withTheme: true })(TopBar)));
|
||||
|
|
@ -1,11 +1,7 @@
|
|||
import React from 'react';
|
||||
import { connect } from 'react-redux';
|
||||
import PropTypes from 'prop-types';
|
||||
import {
|
||||
lobbyPeersKeySelector
|
||||
} from './Selectors';
|
||||
import * as appPropTypes from './appPropTypes';
|
||||
import { withRoomContext } from '../RoomContext';
|
||||
import { withStyles } from '@material-ui/core/styles';
|
||||
import * as roomActions from '../actions/roomActions';
|
||||
import * as toolareaActions from '../actions/toolareaActions';
|
||||
|
|
@ -13,16 +9,8 @@ import { idle } from '../utils';
|
|||
import FullScreen from './FullScreen';
|
||||
import CookieConsent from 'react-cookie-consent';
|
||||
import CssBaseline from '@material-ui/core/CssBaseline';
|
||||
import AppBar from '@material-ui/core/AppBar';
|
||||
import Toolbar from '@material-ui/core/Toolbar';
|
||||
import SwipeableDrawer from '@material-ui/core/SwipeableDrawer';
|
||||
import Hidden from '@material-ui/core/Hidden';
|
||||
import Typography from '@material-ui/core/Typography';
|
||||
import IconButton from '@material-ui/core/IconButton';
|
||||
import MenuIcon from '@material-ui/icons/Menu';
|
||||
import Avatar from '@material-ui/core/Avatar';
|
||||
import Badge from '@material-ui/core/Badge';
|
||||
import AccountCircle from '@material-ui/icons/AccountCircle';
|
||||
import Notifications from './Notifications/Notifications';
|
||||
import MeetingDrawer from './MeetingDrawer/MeetingDrawer';
|
||||
import Democratic from './MeetingViews/Democratic';
|
||||
|
|
@ -30,18 +18,11 @@ import Filmstrip from './MeetingViews/Filmstrip';
|
|||
import AudioPeers from './PeerAudio/AudioPeers';
|
||||
import FullScreenView from './VideoContainers/FullScreenView';
|
||||
import VideoWindow from './VideoWindow/VideoWindow';
|
||||
import FullScreenIcon from '@material-ui/icons/Fullscreen';
|
||||
import FullScreenExitIcon from '@material-ui/icons/FullscreenExit';
|
||||
import SettingsIcon from '@material-ui/icons/Settings';
|
||||
import SecurityIcon from '@material-ui/icons/Security';
|
||||
import LockDialog from './AccessControl/LockDialog/LockDialog';
|
||||
import LockIcon from '@material-ui/icons/Lock';
|
||||
import LockOpenIcon from '@material-ui/icons/LockOpen';
|
||||
import Button from '@material-ui/core/Button';
|
||||
import Settings from './Settings/Settings';
|
||||
import Tooltip from '@material-ui/core/Tooltip';
|
||||
import TopBar from './Controls/TopBar';
|
||||
|
||||
const TIMEOUT = 10 * 1000;
|
||||
const TIMEOUT = 5 * 1000;
|
||||
|
||||
const styles = (theme) =>
|
||||
({
|
||||
|
|
@ -57,44 +38,6 @@ const styles = (theme) =>
|
|||
backgroundSize : 'cover',
|
||||
backgroundRepeat : 'no-repeat'
|
||||
},
|
||||
message :
|
||||
{
|
||||
position : 'absolute',
|
||||
display : 'flex',
|
||||
top : '50%',
|
||||
left : '50%',
|
||||
transform : 'translateX(-50%) translateY(-50%)',
|
||||
width : '30vw',
|
||||
padding : theme.spacing(2),
|
||||
flexDirection : 'column',
|
||||
justifyContent : 'center',
|
||||
alignItems : 'center'
|
||||
},
|
||||
menuButton :
|
||||
{
|
||||
margin : 0,
|
||||
padding : 0
|
||||
},
|
||||
logo :
|
||||
{
|
||||
display : 'none',
|
||||
marginLeft : 20,
|
||||
[theme.breakpoints.up('sm')] :
|
||||
{
|
||||
display : 'block'
|
||||
}
|
||||
},
|
||||
show :
|
||||
{
|
||||
opacity : 1,
|
||||
transition : 'opacity .5s'
|
||||
},
|
||||
hide :
|
||||
{
|
||||
opacity : 0,
|
||||
transition : 'opacity .5s'
|
||||
},
|
||||
toolbar : theme.mixins.toolbar,
|
||||
drawerPaper :
|
||||
{
|
||||
width : '30vw',
|
||||
|
|
@ -114,79 +57,9 @@ const styles = (theme) =>
|
|||
{
|
||||
width : '90vw'
|
||||
}
|
||||
},
|
||||
grow :
|
||||
{
|
||||
flexGrow : 1
|
||||
},
|
||||
title :
|
||||
{
|
||||
display : 'none',
|
||||
marginLeft : 20,
|
||||
[theme.breakpoints.up('sm')] :
|
||||
{
|
||||
display : 'block'
|
||||
}
|
||||
},
|
||||
actionButtons :
|
||||
{
|
||||
display : 'flex'
|
||||
},
|
||||
actionButton :
|
||||
{
|
||||
margin : theme.spacing(1),
|
||||
padding : 0
|
||||
},
|
||||
meContainer :
|
||||
{
|
||||
position : 'fixed',
|
||||
zIndex : 110,
|
||||
overflow : 'hidden',
|
||||
boxShadow : 'var(--me-shadow)',
|
||||
transitionProperty : 'border-color',
|
||||
transitionDuration : '0.15s',
|
||||
top : '5em',
|
||||
left : '1em',
|
||||
border : 'var(--me-border)',
|
||||
'&.active-speaker' :
|
||||
{
|
||||
borderColor : 'var(--active-speaker-border-color)'
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
const PulsingBadge = withStyles((theme) =>
|
||||
({
|
||||
badge :
|
||||
{
|
||||
backgroundColor : theme.palette.secondary.main,
|
||||
// boxShadow : `0 0 0 2px ${theme.palette.secondary.main}`,
|
||||
'&::after' :
|
||||
{
|
||||
position : 'absolute',
|
||||
width : '100%',
|
||||
height : '100%',
|
||||
borderRadius : '50%',
|
||||
animation : '$ripple 1.2s infinite ease-in-out',
|
||||
border : `3px solid ${theme.palette.secondary.main}`,
|
||||
content : '""'
|
||||
}
|
||||
},
|
||||
'@keyframes ripple' :
|
||||
{
|
||||
'0%' :
|
||||
{
|
||||
transform : 'scale(.8)',
|
||||
opacity : 1
|
||||
},
|
||||
'100%' :
|
||||
{
|
||||
transform : 'scale(2.4)',
|
||||
opacity : 0
|
||||
}
|
||||
}
|
||||
}))(Badge);
|
||||
|
||||
class Room extends React.PureComponent
|
||||
{
|
||||
constructor(props)
|
||||
|
|
@ -262,18 +135,10 @@ class Room extends React.PureComponent
|
|||
render()
|
||||
{
|
||||
const {
|
||||
roomClient,
|
||||
room,
|
||||
lobbyPeers,
|
||||
advancedMode,
|
||||
myPicture,
|
||||
loggedIn,
|
||||
loginEnabled,
|
||||
setSettingsOpen,
|
||||
setLockDialogOpen,
|
||||
toolAreaOpen,
|
||||
toggleToolArea,
|
||||
unread,
|
||||
classes,
|
||||
theme
|
||||
} = this.props;
|
||||
|
|
@ -300,132 +165,12 @@ class Room extends React.PureComponent
|
|||
|
||||
<CssBaseline />
|
||||
|
||||
<AppBar
|
||||
position='fixed'
|
||||
className={room.toolbarsVisible ? classes.show : classes.hide}
|
||||
>
|
||||
<Toolbar>
|
||||
<PulsingBadge
|
||||
color='secondary'
|
||||
badgeContent={unread}
|
||||
>
|
||||
<IconButton
|
||||
color='inherit'
|
||||
aria-label='Open drawer'
|
||||
onClick={() => toggleToolArea()}
|
||||
className={classes.menuButton}
|
||||
>
|
||||
<MenuIcon />
|
||||
</IconButton>
|
||||
</PulsingBadge>
|
||||
{ window.config.logo && <img alt='Logo' className={classes.logo} src={window.config.logo} /> }
|
||||
<Typography
|
||||
className={classes.title}
|
||||
variant='h6'
|
||||
color='inherit'
|
||||
noWrap
|
||||
>
|
||||
{ window.config.title }
|
||||
</Typography>
|
||||
<div className={classes.grow} />
|
||||
<div className={classes.actionButtons}>
|
||||
<Tooltip title={`${room.locked ? 'Unlock' : 'Lock'} room`}>
|
||||
<IconButton
|
||||
aria-label='Lock room'
|
||||
className={classes.actionButton}
|
||||
color='inherit'
|
||||
onClick={() =>
|
||||
{
|
||||
if (room.locked)
|
||||
{
|
||||
roomClient.unlockRoom();
|
||||
}
|
||||
else
|
||||
{
|
||||
roomClient.lockRoom();
|
||||
}
|
||||
}}
|
||||
>
|
||||
{ room.locked ?
|
||||
<LockIcon />
|
||||
:
|
||||
<LockOpenIcon />
|
||||
}
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
{ lobbyPeers.length > 0 &&
|
||||
<Tooltip title='Show lobby'>
|
||||
<IconButton
|
||||
aria-label='Lobby'
|
||||
color='inherit'
|
||||
onClick={() => setLockDialogOpen(!room.lockDialogOpen)}
|
||||
>
|
||||
<PulsingBadge
|
||||
color='secondary'
|
||||
badgeContent={lobbyPeers.length}
|
||||
>
|
||||
<SecurityIcon />
|
||||
</PulsingBadge>
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
}
|
||||
{ this.fullscreen.fullscreenEnabled &&
|
||||
<Tooltip title={`${this.state.fullscreen ? 'Leave' : 'Enter'} fullscreen`}>
|
||||
<IconButton
|
||||
aria-label='Fullscreen'
|
||||
className={classes.actionButton}
|
||||
color='inherit'
|
||||
onClick={this.handleToggleFullscreen}
|
||||
>
|
||||
{ this.state.fullscreen ?
|
||||
<FullScreenExitIcon />
|
||||
:
|
||||
<FullScreenIcon />
|
||||
}
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
}
|
||||
<Tooltip title='Show settings'>
|
||||
<IconButton
|
||||
aria-label='Settings'
|
||||
className={classes.actionButton}
|
||||
color='inherit'
|
||||
onClick={() => setSettingsOpen(!room.settingsOpen)}
|
||||
>
|
||||
<SettingsIcon />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
{ loginEnabled &&
|
||||
<Tooltip title={`Log ${loggedIn ? 'out' : 'in'}`}>
|
||||
<IconButton
|
||||
aria-label='Account'
|
||||
className={classes.actionButton}
|
||||
color='inherit'
|
||||
onClick={() =>
|
||||
{
|
||||
loggedIn ? roomClient.logout() : roomClient.login();
|
||||
}}
|
||||
>
|
||||
{ myPicture ?
|
||||
<Avatar src={myPicture} />
|
||||
:
|
||||
<AccountCircle />
|
||||
}
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
}
|
||||
<Button
|
||||
aria-label='Leave meeting'
|
||||
className={classes.actionButton}
|
||||
variant='contained'
|
||||
color='secondary'
|
||||
onClick={() => roomClient.close()}
|
||||
>
|
||||
Leave
|
||||
</Button>
|
||||
</div>
|
||||
</Toolbar>
|
||||
</AppBar>
|
||||
<TopBar
|
||||
fullscreenEnabled={this.fullscreen.fullscreenEnabled}
|
||||
fullscreen={this.state.fullscreen}
|
||||
onFullscreen={this.handleToggleFullscreen}
|
||||
/>
|
||||
|
||||
<nav>
|
||||
<Hidden implementation='css'>
|
||||
<SwipeableDrawer
|
||||
|
|
@ -455,19 +200,11 @@ class Room extends React.PureComponent
|
|||
|
||||
Room.propTypes =
|
||||
{
|
||||
roomClient : PropTypes.object.isRequired,
|
||||
room : appPropTypes.Room.isRequired,
|
||||
lobbyPeers : PropTypes.array,
|
||||
advancedMode : PropTypes.bool.isRequired,
|
||||
myPicture : PropTypes.string,
|
||||
loggedIn : PropTypes.bool.isRequired,
|
||||
loginEnabled : PropTypes.bool.isRequired,
|
||||
toolAreaOpen : PropTypes.bool.isRequired,
|
||||
setToolbarsVisible : PropTypes.func.isRequired,
|
||||
setSettingsOpen : PropTypes.func.isRequired,
|
||||
setLockDialogOpen : PropTypes.func.isRequired,
|
||||
toggleToolArea : PropTypes.func.isRequired,
|
||||
unread : PropTypes.number.isRequired,
|
||||
classes : PropTypes.object.isRequired,
|
||||
theme : PropTypes.object.isRequired
|
||||
};
|
||||
|
|
@ -475,14 +212,8 @@ Room.propTypes =
|
|||
const mapStateToProps = (state) =>
|
||||
({
|
||||
room : state.room,
|
||||
lobbyPeers : lobbyPeersKeySelector(state),
|
||||
advancedMode : state.settings.advancedMode,
|
||||
loggedIn : state.me.loggedIn,
|
||||
loginEnabled : state.me.loginEnabled,
|
||||
myPicture : state.me.picture,
|
||||
toolAreaOpen : state.toolarea.toolAreaOpen,
|
||||
unread : state.toolarea.unreadMessages +
|
||||
state.toolarea.unreadFiles
|
||||
toolAreaOpen : state.toolarea.toolAreaOpen
|
||||
});
|
||||
|
||||
const mapDispatchToProps = (dispatch) =>
|
||||
|
|
@ -491,21 +222,13 @@ const mapDispatchToProps = (dispatch) =>
|
|||
{
|
||||
dispatch(roomActions.setToolbarsVisible(visible));
|
||||
},
|
||||
setSettingsOpen : (settingsOpen) =>
|
||||
{
|
||||
dispatch(roomActions.setSettingsOpen({ settingsOpen }));
|
||||
},
|
||||
setLockDialogOpen : (lockDialogOpen) =>
|
||||
{
|
||||
dispatch(roomActions.setLockDialogOpen({ lockDialogOpen }));
|
||||
},
|
||||
toggleToolArea : () =>
|
||||
{
|
||||
dispatch(toolareaActions.toggleToolArea());
|
||||
}
|
||||
});
|
||||
|
||||
export default withRoomContext(connect(
|
||||
export default connect(
|
||||
mapStateToProps,
|
||||
mapDispatchToProps,
|
||||
null,
|
||||
|
|
@ -514,15 +237,8 @@ export default withRoomContext(connect(
|
|||
{
|
||||
return (
|
||||
prev.room === next.room &&
|
||||
prev.lobbyPeers === next.lobbyPeers &&
|
||||
prev.me.loggedIn === next.me.loggedIn &&
|
||||
prev.me.loginEnabled === next.me.loginEnabled &&
|
||||
prev.me.picture === next.me.picture &&
|
||||
prev.toolarea.toolAreaOpen === next.toolarea.toolAreaOpen &&
|
||||
prev.toolarea.unreadMessages === next.toolarea.unreadMessages &&
|
||||
prev.toolarea.unreadFiles === next.toolarea.unreadFiles &&
|
||||
prev.settings.advancedMode === next.settings.advancedMode
|
||||
prev.toolarea.toolAreaOpen === next.toolarea.toolAreaOpen
|
||||
);
|
||||
}
|
||||
}
|
||||
)(withStyles(styles, { withTheme: true })(Room)));
|
||||
)(withStyles(styles, { withTheme: true })(Room));
|
||||
Loading…
Reference in New Issue