From acc41e6d0b4e7f47059c560226a625d84e9d4537 Mon Sep 17 00:00:00 2001 From: Guus der Kinderen Date: Mon, 16 Apr 2018 17:06:11 +0200 Subject: [PATCH] feat(toolbar): add 'always-visibile' config option The visibility of the toolbar can be toggled by interacting with the main screen. This change allows the toolbar to be configured to be 'always visible'. This voids the 'toggle' functionality. --- config.js | 1 - interface_config.js | 1 + react/features/base/config/functions.js | 1 - .../components/Conference.native.js | 27 +++++++++++++++-- .../conference/components/Conference.web.js | 25 ++++------------ .../toolbox/components/native/Toolbox.js | 4 +-- react/features/toolbox/reducer.js | 30 ++++++++++++++----- 7 files changed, 55 insertions(+), 34 deletions(-) diff --git a/config.js b/config.js index d685642875..45be4437fd 100644 --- a/config.js +++ b/config.js @@ -341,7 +341,6 @@ var config = { // List of undocumented settings used in jitsi-meet /** - alwaysVisibleToolbar autoRecord autoRecordToken debug diff --git a/interface_config.js b/interface_config.js index b997f775bd..2fd8c6c964 100644 --- a/interface_config.js +++ b/interface_config.js @@ -13,6 +13,7 @@ var interfaceConfig = { DESKTOP_SHARING_BUTTON_DISABLED_TOOLTIP: null, INITIAL_TOOLBAR_TIMEOUT: 20000, TOOLBAR_TIMEOUT: 4000, + TOOLBAR_ALWAYS_VISIBLE: false, DEFAULT_REMOTE_DISPLAY_NAME: 'Fellow Jitster', DEFAULT_LOCAL_DISPLAY_NAME: 'me', SHOW_JITSI_WATERMARK: true, diff --git a/react/features/base/config/functions.js b/react/features/base/config/functions.js index 038da50c38..6f101082cb 100644 --- a/react/features/base/config/functions.js +++ b/react/features/base/config/functions.js @@ -20,7 +20,6 @@ const WHITELISTED_KEYS = [ '_peerConnStatusOutOfLastNTimeout', '_peerConnStatusRtcMuteTimeout', 'abTesting', - 'alwaysVisibleToolbar', 'autoRecord', 'autoRecordToken', 'avgRtpStatsN', diff --git a/react/features/conference/components/Conference.native.js b/react/features/conference/components/Conference.native.js index 9ea184ecc3..3a77607754 100644 --- a/react/features/conference/components/Conference.native.js +++ b/react/features/conference/components/Conference.native.js @@ -90,7 +90,14 @@ type Props = { * * @private */ - _toolboxVisible: boolean + _toolboxVisible: boolean, + + /** + * The indicator which determines whether the Toolbox is always visible. + * + * @private + */ + _toolboxAlwaysVisible: boolean }; /** @@ -278,6 +285,10 @@ class Conference extends Component { * @returns {void} */ _onClick() { + if (this.props._toolboxAlwaysVisible) { + return; + } + const toolboxVisible = !this.props._toolboxVisible; this.props._setToolboxVisible(toolboxVisible); @@ -384,13 +395,15 @@ function _mapDispatchToProps(dispatch) { * _connecting: boolean, * _participantCount: number, * _reducedUI: boolean, - * _toolboxVisible: boolean + * _toolboxVisible: boolean, + * _toolboxAlwaysVisible: boolean * }} */ function _mapStateToProps(state) { const { connecting, connection } = state['features/base/connection']; const { conference, joining, leaving } = state['features/base/conference']; const { reducedUI } = state['features/base/responsive-ui']; + const { alwaysVisible, visible } = state['features/toolbox']; // XXX There is a window of time between the successful establishment of the // XMPP connection and the subsequent commencement of joining the MUC during @@ -439,7 +452,15 @@ function _mapStateToProps(state) { * @private * @type {boolean} */ - _toolboxVisible: state['features/toolbox'].visible + _toolboxVisible: visible, + + /** + * The indicator which determines whether the Toolbox is always visible. + * + * @private + * @type {boolean} + */ + _toolboxAlwaysVisible: alwaysVisible }; } diff --git a/react/features/conference/components/Conference.web.js b/react/features/conference/components/Conference.web.js index 5f467add10..83475cf933 100644 --- a/react/features/conference/components/Conference.web.js +++ b/react/features/conference/components/Conference.web.js @@ -43,11 +43,6 @@ const FULL_SCREEN_EVENTS = [ */ type Props = { - /** - * Whether the toolbar should stay visible or be able to autohide. - */ - _alwaysVisibleToolbar: boolean, - /** * Whether the local participant is recording the conference. */ @@ -105,13 +100,14 @@ class Conference extends Component { FULL_SCREEN_EVENTS.forEach(name => document.addEventListener(name, this._onFullScreenChange)); - const { _alwaysVisibleToolbar, dispatch, t } = this.props; + const { dispatch, t } = this.props; dispatch(connect()); + maybeShowSuboptimalExperienceNotification(dispatch, t); - dispatch(setToolboxAlwaysVisible( - _alwaysVisibleToolbar || interfaceConfig.filmStripOnly)); + interfaceConfig.filmStripOnly + && dispatch(setToolboxAlwaysVisible(true)); } /** @@ -208,24 +204,13 @@ class Conference extends Component { * @param {Object} state - The Redux state. * @private * @returns {{ - * _alwaysVisibleToolbar: boolean, * _iAmRecorder: boolean * }} */ function _mapStateToProps(state) { - const { - alwaysVisibleToolbar, - iAmRecorder - } = state['features/base/config']; + const { iAmRecorder } = state['features/base/config']; return { - /** - * Whether the toolbar should stay visible or be able to autohide. - * - * @private - */ - _alwaysVisibleToolbar: alwaysVisibleToolbar, - /** * Whether the local participant is recording the conference. * diff --git a/react/features/toolbox/components/native/Toolbox.js b/react/features/toolbox/components/native/Toolbox.js index 04dc704059..19e49179d1 100644 --- a/react/features/toolbox/components/native/Toolbox.js +++ b/react/features/toolbox/components/native/Toolbox.js @@ -237,10 +237,10 @@ class Toolbox extends Component { * }} */ function _mapStateToProps(state: Object): Object { - const { enabled, visible } = state['features/toolbox']; + const { alwaysVisible, enabled, visible } = state['features/toolbox']; return { - _visible: enabled && visible + _visible: enabled && (alwaysVisible || visible) }; } diff --git a/react/features/toolbox/reducer.js b/react/features/toolbox/reducer.js index ab981fca7b..9faf6f337a 100644 --- a/react/features/toolbox/reducer.js +++ b/react/features/toolbox/reducer.js @@ -31,22 +31,37 @@ declare var interfaceConfig: Object; * }} */ function _getInitialState() { + // Does the toolbar eventually fade out, or is it always visible? + let alwaysVisible = false; + + // Toolbar (initial) visibility. + let visible = false; + // Default toolbox timeout for mobile app. let timeoutMS = 5000; - if (typeof interfaceConfig !== 'undefined' - && interfaceConfig.INITIAL_TOOLBAR_TIMEOUT) { - timeoutMS = interfaceConfig.INITIAL_TOOLBAR_TIMEOUT; + if (typeof interfaceConfig !== 'undefined') { + if (interfaceConfig.INITIAL_TOOLBAR_TIMEOUT) { + timeoutMS = interfaceConfig.INITIAL_TOOLBAR_TIMEOUT; + } + if (typeof interfaceConfig.TOOLBAR_ALWAYS_VISIBLE !== 'undefined') { + alwaysVisible = interfaceConfig.TOOLBAR_ALWAYS_VISIBLE; + } + } + + // When the toolbar is always visible, it must initially be visible too. + if (alwaysVisible === true) { + visible = true; } return { /** * The indicator which determines whether the Toolbox should always be - * visible. + * visible. When false, the toolbar will fade out after timeoutMS. * * @type {boolean} */ - alwaysVisible: false, + alwaysVisible, /** * The indicator which determines whether the Toolbox is enabled. @@ -91,7 +106,7 @@ function _getInitialState() { * * @type {boolean} */ - visible: false + visible }; } @@ -126,7 +141,8 @@ ReducerRegistry.register( case SET_TOOLBOX_ALWAYS_VISIBLE: return { ...state, - alwaysVisible: action.alwaysVisible + alwaysVisible: action.alwaysVisible, + visible: action.alwaysVisible === true ? true : state.visible }; case SET_TOOLBOX_ENABLED: