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

@@ -341,7 +341,6 @@ var config = {
 
     // List of undocumented settings used in jitsi-meet
     /**
-     alwaysVisibleToolbar
      autoRecord
      autoRecordToken
      debug

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,

react/features/base/config/functions.js

@@ -20,7 +20,6 @@ const WHITELISTED_KEYS = [
     '_peerConnStatusOutOfLastNTimeout',
     '_peerConnStatusRtcMuteTimeout',
     'abTesting',
-    'alwaysVisibleToolbar',
     'autoRecord',
     'autoRecordToken',
     'avgRtpStatsN',

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<Props> {
      * @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
     };
 }
 

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<Props> {
         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<Props> {
  * @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.
          *

react/features/toolbox/components/native/Toolbox.js

@@ -237,10 +237,10 @@ class Toolbox extends Component<Props, State> {
  * }}
  */
 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)
     };
 }
 

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: