diff --git a/app/src/RoomClient.js b/app/src/RoomClient.js index 3339860..cb53d07 100644 --- a/app/src/RoomClient.js +++ b/app/src/RoomClient.js @@ -171,6 +171,9 @@ export default class RoomClient else this._maxSpotlights = mobileLastN; + if (store.getState().settings.lastN !== this._maxSpotlights) + this._maxSpotlights = store.getState().settings.lastN; + // Manager of spotlight this._spotlights = null; @@ -823,6 +826,14 @@ export default class RoomClient } } + changeMaxSpotlights(maxSpotlights) + { + this._spotlights.maxSpotlights = maxSpotlights; + + store.dispatch( + settingsActions.setLastN(maxSpotlights)); + } + // Updated consumers based on spotlights async updateSpotlights(spotlights) { diff --git a/app/src/Spotlights.js b/app/src/Spotlights.js index c683c34..a680f5e 100644 --- a/app/src/Spotlights.js +++ b/app/src/Spotlights.js @@ -198,4 +198,19 @@ export default class Spotlights extends EventEmitter return true; } + + get maxSpotlights() + { + return this._maxSpotlights; + } + + set maxSpotlights(maxSpotlights) + { + const oldMaxSpotlights = this._maxSpotlights; + + this._maxSpotlights = maxSpotlights; + + if (oldMaxSpotlights !== this._maxSpotlights) + this._spotlightsUpdated(); + } } diff --git a/app/src/actions/settingsActions.js b/app/src/actions/settingsActions.js index 52110c1..c73ce67 100644 --- a/app/src/actions/settingsActions.js +++ b/app/src/actions/settingsActions.js @@ -25,4 +25,15 @@ export const setDisplayName = (displayName) => export const toggleAdvancedMode = () => ({ type : 'TOGGLE_ADVANCED_MODE' + }); + +export const toggleStickyAppBar = () => + ({ + type : 'TOGGLE_STICKY_APPBAR' + }); + +export const setLastN = (lastN) => + ({ + type : 'SET_LAST_N', + payload : { lastN } }); \ No newline at end of file diff --git a/app/src/components/Controls/TopBar.js b/app/src/components/Controls/TopBar.js index 58a379f..6c5d9ac 100644 --- a/app/src/components/Controls/TopBar.js +++ b/app/src/components/Controls/TopBar.js @@ -116,6 +116,7 @@ const TopBar = (props) => roomClient, room, lobbyPeers, + stickyAppBar, myPicture, loggedIn, loginEnabled, @@ -165,7 +166,7 @@ const TopBar = (props) => return ( ({ room : state.room, lobbyPeers : lobbyPeersKeySelector(state), - advancedMode : state.settings.advancedMode, + stickyAppBar : state.settings.stickyAppBar, loggedIn : state.me.loggedIn, loginEnabled : state.me.loginEnabled, myPicture : state.me.picture, @@ -388,6 +390,7 @@ export default withRoomContext(connect( return ( prev.room === next.room && prev.lobbyPeers === next.lobbyPeers && + prev.settings.stickyAppBar === next.settings.stickyAppBar && prev.me.loggedIn === next.me.loggedIn && prev.me.loginEnabled === next.me.loginEnabled && prev.me.picture === next.me.picture && diff --git a/app/src/components/MeetingViews/Democratic.js b/app/src/components/MeetingViews/Democratic.js index e3a61bb..be71389 100644 --- a/app/src/components/MeetingViews/Democratic.js +++ b/app/src/components/MeetingViews/Democratic.js @@ -71,7 +71,7 @@ class Democratic extends React.PureComponent const width = this.peersRef.current.clientWidth - PADDING_H; const height = this.peersRef.current.clientHeight - - (this.props.toolbarsVisible ? PADDING_V : PADDING_H); + (this.props.toolbarsVisible || this.props.stickyAppBar ? PADDING_V : PADDING_H); let x, y, space; @@ -134,6 +134,7 @@ class Democratic extends React.PureComponent spotlightsPeers, spotlightsLength, toolbarsVisible, + stickyAppBar, classes } = this.props; @@ -147,7 +148,7 @@ class Democratic extends React.PureComponent
@@ -186,6 +187,7 @@ Democratic.propTypes = spotlightsLength : PropTypes.number, spotlightsPeers : PropTypes.array.isRequired, toolbarsVisible : PropTypes.bool.isRequired, + stickyAppBar : PropTypes.bool, classes : PropTypes.object.isRequired }; @@ -196,7 +198,8 @@ const mapStateToProps = (state) => boxes : videoBoxesSelector(state), spotlightsPeers : spotlightPeersSelector(state), spotlightsLength : spotlightsLengthSelector(state), - toolbarsVisible : state.room.toolbarsVisible + toolbarsVisible : state.room.toolbarsVisible, + stickyAppBar : state.settings.stickyAppBar }; }; @@ -212,7 +215,8 @@ export default connect( prev.producers === next.producers && prev.consumers === next.consumers && prev.room.spotlights === next.room.spotlights && - prev.room.toolbarsVisible === next.room.toolbarsVisible + prev.room.toolbarsVisible === next.room.toolbarsVisible && + prev.settings.stickyAppBar === next.settings.stickyAppBar ); } } diff --git a/app/src/components/Room.js b/app/src/components/Room.js index 2863962..62d8301 100644 --- a/app/src/components/Room.js +++ b/app/src/components/Room.js @@ -197,9 +197,13 @@ class Room extends React.PureComponent - + { room.lockDialogOpen && + + } - + { room.settingsOpen && + + }
); } diff --git a/app/src/components/Settings/Settings.js b/app/src/components/Settings/Settings.js index 99dca97..aeff7dd 100644 --- a/app/src/components/Settings/Settings.js +++ b/app/src/components/Settings/Settings.js @@ -59,6 +59,7 @@ const Settings = ({ me, settings, onToggleAdvancedMode, + onToggleStickyAppBar, handleCloseSettings, handleChangeMode, classes @@ -296,6 +297,48 @@ const Settings = ({ defaultMessage : 'Advanced mode' })} /> + { settings.advancedMode && + +
+ + + + + + +
+ } + label={intl.formatMessage({ + id : 'settings.stickyAppBar', + defaultMessage : 'Sticky App Bar' + })} + /> +
+ }