diff --git a/config.js b/config.js index d685642875d1..45be4437fdaf 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 b997f775bd01..2fd8c6c964ed 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 038da50c381b..6f101082cb40 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 9ea184ecc33f..3a7760775466 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 5f467add1010..83475cf93311 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 04dc70405902..19e49179d12e 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 ab981fca7b25..9faf6f337ae5 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: