React Toolbox

conference.js

@@ -20,7 +20,7 @@ import analytics from './modules/analytics/analytics';
 
 import EventEmitter from "events";
 
-import { showDesktopSharingButton } from './react/features/toolbar';
+import { showDesktopSharingButton } from './react/features/toolbox';
 
 import {
     AVATAR_ID_COMMAND,

modules/UI/UI.js

@@ -29,7 +29,7 @@ import {
 } from '../../react/features/base/media';
 import {
     checkAutoEnableDesktopSharing,
-    dockToolbar,
+    dockToolbox,
     setAudioIconEnabled,
     setToolbarButton,
     setVideoIconEnabled,
@@ -37,8 +37,8 @@ import {
     showEtherpadButton,
     showSharedVideoButton,
     showSIPCallButton,
-    showToolbar
+    showToolbox
-} from '../../react/features/toolbar';
+} from '../../react/features/toolbox';
 
 var EventEmitter = require("events");
 UI.messageHandler = require("./util/MessageHandler");
@@ -202,7 +202,7 @@ UI.setRaisedHandStatus = (participant, raisedHandStatus) => {
  * Sets the local "raised hand" status.
  */
 UI.setLocalRaisedHandStatus
-    = raisedHandStatus => 
+    = raisedHandStatus =>
         VideoLayout.setRaisedHandStatus(
             APP.conference.getMyUserId(),
             raisedHandStatus);
@@ -739,15 +739,11 @@ UI.clickOnVideo = function (videoNumber) {
     videos[videoIndex].click();
 };
 
-//Used by torture
+// Used by torture.
-UI.showToolbar = function (timeout) {
+UI.showToolbar = timeout => APP.store.dispatch(showToolbox(timeout));
-    APP.store.dispatch(showToolbar(timeout));
-};
 
-//Used by torture
+// Used by torture.
-UI.dockToolbar = function (isDock) {
+UI.dockToolbar = dock => APP.store.dispatch(dockToolbox(dock));
-    APP.store.dispatch(dockToolbar(isDock));
-};
 
 /**
  * Updates the avatar for participant.

modules/UI/recording/Recording.js

@@ -21,7 +21,7 @@ import UIUtil from '../util/UIUtil';
 import VideoLayout from '../videolayout/VideoLayout';
 import Feedback from '../feedback/Feedback.js';
 
-import { hideToolbar } from '../../../react/features/toolbar';
+import { hideToolbox } from '../../../react/features/toolbox';
 
 /**
  * The dialog for user input.
@@ -65,7 +65,7 @@ function _requestLiveStreamId() {
                     name="streamId" type="text"
                     data-i18n="[placeholder]dialog.streamKey"
                     autofocus><div style="text-align: right">
-                    <a class="helper-link" target="_new" 
+                    <a class="helper-link" target="_new"
                     href="${interfaceConfig.LIVE_STREAMING_HELP_LINK}">`
                         + streamIdHelp
                         + `</a></div>`,
@@ -264,7 +264,7 @@ var Recording = {
                 APP.conference.getMyUserId(), false);
             VideoLayout.setLocalVideoVisible(false);
             Feedback.enableFeedback(false);
-            APP.store.dispatch(hideToolbar());
+            APP.store.dispatch(hideToolbox());
             APP.UI.messageHandler.enableNotifications(false);
             APP.UI.messageHandler.enablePopups(false);
         }

modules/UI/shared_video/SharedVideo.js

@@ -10,7 +10,7 @@ import LargeContainer from '../videolayout/LargeContainer';
 import SmallVideo from '../videolayout/SmallVideo';
 import FilmStrip from '../videolayout/FilmStrip';
 
-import { dockToolbar, showToolbar } from '../../../react/features/toolbar';
+import { dockToolbox, showToolbox } from '../../../react/features/toolbox';
 
 export const SHARED_VIDEO_CONTAINER_TYPE = "sharedvideo";
 
@@ -579,7 +579,7 @@ class SharedVideoContainer extends LargeContainer {
                 self.bodyBackground = document.body.style.background;
                 document.body.style.background = 'black';
                 this.$iframe.css({opacity: 1});
-                APP.store.dispatch(dockToolbar(true));
+                APP.store.dispatch(dockToolbox(true));
                 resolve();
             });
         });
@@ -587,7 +587,7 @@ class SharedVideoContainer extends LargeContainer {
 
     hide () {
         let self = this;
-        APP.store.dispatch(dockToolbar(false));
+        APP.store.dispatch(dockToolbox(false));
         return new Promise(resolve => {
             this.$iframe.fadeOut(300, () => {
                 document.body.style.background = self.bodyBackground;
@@ -598,7 +598,7 @@ class SharedVideoContainer extends LargeContainer {
     }
 
     onHoverIn () {
-        APP.store.dispatch(showToolbar());
+        APP.store.dispatch(showToolbox());
     }
 
     get id () {

modules/UI/side_pannels/chat/Chat.js

@@ -9,7 +9,7 @@ import UIEvents from '../../../../service/UI/UIEvents';
 
 import { smileys } from './smileys';
 
-import { dockToolbar, setSubject } from '../../../../react/features/toolbar';
+import { dockToolbox, setSubject } from '../../../../react/features/toolbox';
 
 let unreadMessages = 0;
 const sidePanelsContainerId = 'sideToolbarContainer';
@@ -25,9 +25,9 @@ const htmlStr = `
         </div>
 
         <div id="chatconversation"></div>
-        <audio id="chatNotification" src="sounds/incomingMessage.wav" 
+        <audio id="chatNotification" src="sounds/incomingMessage.wav"
             preload="auto"></audio>
-        <textarea id="usermsg" autofocus 
+        <textarea id="usermsg" autofocus
             data-i18n="[placeholder]chat.messagebox"></textarea>
         <div id="smileysarea">
             <div id="smileys" id="toggle_smileys">
@@ -60,7 +60,7 @@ function updateVisualNotification() {
     if (unreadMessages) {
         unreadMsgElement.innerHTML = unreadMessages.toString();
 
-        APP.store.dispatch(dockToolbar(true));
+        APP.store.dispatch(dockToolbox(true));
 
         const chatButtonElement
             = document.getElementById('toolbar_button_chat');
@@ -239,7 +239,7 @@ var Chat = {
                 // Undock the toolbar when the chat is shown and if we're in a
                 // video mode.
                 if (VideoLayout.isLargeVideoVisible()) {
-                    APP.store.dispatch(dockToolbar(false));
+                    APP.store.dispatch(dockToolbox(false));
                 }
 
                 // if we are in conversation mode focus on the text input

react/features/conference/components/Conference.native.js

@@ -6,17 +6,17 @@ import { DialogContainer } from '../../base/dialog';
 import { Container } from '../../base/react';
 import { FilmStrip } from '../../film-strip';
 import { LargeVideo } from '../../large-video';
-import { setToolbarVisible, Toolbar } from '../../toolbar';
+import { setToolboxVisible, Toolbox } from '../../toolbox';
 
 import { styles } from './styles';
 
 /**
- * The timeout in milliseconds after which the toolbar will be hidden.
+ * The timeout in milliseconds after which the Toolbox will be hidden.
  *
  * @private
  * @type {number}
  */
-const _TOOLBAR_TIMEOUT_MS = 5000;
+const _TOOLBOX_TIMEOUT_MS = 5000;
 
 /**
  * The conference page of the mobile (i.e. React Native) application.
@@ -45,21 +45,21 @@ class Conference extends Component {
         _onDisconnect: React.PropTypes.func,
 
         /**
-         * The handler which dispatches the (redux) action setTooblarVisible to
+         * The handler which dispatches the (redux) action setToolboxVisible to
-         * show/hide the toolbar.
+         * show/hide the Toolbox.
          *
          * @private
          * @type {boolean}
          */
-        _setToolbarVisible: React.PropTypes.func,
+        _setToolboxVisible: React.PropTypes.func,
 
         /**
-         * The indicator which determines whether toolbar is visible.
+         * The indicator which determines whether the Toolbox is visible.
          *
          * @private
          * @type {boolean}
          */
-        _toolbarVisible: React.PropTypes.bool
+        _toolboxVisible: React.PropTypes.bool
     };
 
     /**
@@ -73,25 +73,25 @@ class Conference extends Component {
 
         /**
          * The numerical ID of the timeout in milliseconds after which the
-         * toolbar will be hidden. To be used with
+         * Toolbox will be hidden. To be used with
          * {@link WindowTimers#clearTimeout()}.
          *
          * @private
          */
-        this._toolbarTimeout = undefined;
+        this._toolboxTimeout = undefined;
 
         // Bind event handlers so they are only bound once for every instance.
         this._onClick = this._onClick.bind(this);
     }
 
     /**
-     * Inits the toolbar timeout after the component is initially rendered.
+     * Inits the Toolbox timeout after the component is initially rendered.
      *
      * @inheritdoc
      * returns {void}
      */
     componentDidMount() {
-        this._setToolbarTimeout(this.props._toolbarVisible);
+        this._setToolboxTimeout(this.props._toolboxVisible);
     }
 
     /**
@@ -106,13 +106,13 @@ class Conference extends Component {
 
     /**
      * Destroys connection, conference and local tracks when conference screen
-     * is left. Clears {@link #_toolbarTimeout} before the component unmounts.
+     * is left. Clears {@link #_toolboxTimeout} before the component unmounts.
      *
      * @inheritdoc
      * @returns {void}
      */
     componentWillUnmount() {
-        this._clearToolbarTimeout();
+        this._clearToolboxTimeout();
 
         this.props._onDisconnect();
     }
@@ -132,7 +132,7 @@ class Conference extends Component {
 
                 <LargeVideo />
 
-                <Toolbar />
+                <Toolbox />
                 <FilmStrip />
 
                 <DialogContainer />
@@ -141,46 +141,45 @@ class Conference extends Component {
     }
 
     /**
-     * Clears {@link #_toolbarTimeout} if any.
+     * Clears {@link #_toolboxTimeout} if any.
      *
      * @private
      * @returns {void}
      */
-    _clearToolbarTimeout() {
+    _clearToolboxTimeout() {
-        if (this._toolbarTimeout) {
+        if (this._toolboxTimeout) {
-            clearTimeout(this._toolbarTimeout);
+            clearTimeout(this._toolboxTimeout);
-            this._toolbarTimeout = undefined;
+            this._toolboxTimeout = undefined;
         }
     }
 
     /**
-     * Changes the value of the toolbarVisible state, thus allowing us to
+     * Changes the value of the toolboxVisible state, thus allowing us to switch
-     * 'switch' between toolbar and filmstrip views and change the visibility of
+     * between Toolbox and FilmStrip and change their visibility.
-     * the above.
      *
      * @private
      * @returns {void}
      */
     _onClick() {
-        const toolbarVisible = !this.props._toolbarVisible;
+        const toolboxVisible = !this.props._toolboxVisible;
 
-        this.props._setToolbarVisible(toolbarVisible);
+        this.props._setToolboxVisible(toolboxVisible);
-        this._setToolbarTimeout(toolbarVisible);
+        this._setToolboxTimeout(toolboxVisible);
     }
 
     /**
-     * Triggers the default toolbar timeout.
+     * Triggers the default Toolbox timeout.
      *
-     * @param {boolean} toolbarVisible - Indicates if the toolbar is currently
+     * @param {boolean} toolboxVisible - Indicates whether the Toolbox is
-     * visible.
+     * currently visible.
      * @private
      * @returns {void}
      */
-    _setToolbarTimeout(toolbarVisible) {
+    _setToolboxTimeout(toolboxVisible) {
-        this._clearToolbarTimeout();
+        this._clearToolboxTimeout();
-        if (toolbarVisible) {
+        if (toolboxVisible) {
-            this._toolbarTimeout
+            this._toolboxTimeout
-                = setTimeout(this._onClick, _TOOLBAR_TIMEOUT_MS);
+                = setTimeout(this._onClick, _TOOLBOX_TIMEOUT_MS);
         }
     }
 }
@@ -193,7 +192,7 @@ class Conference extends Component {
  * @returns {{
  *     _onConnect: Function,
  *     _onDisconnect: Function,
- *     _setToolbarVisible: Function
+ *     _setToolboxVisible: Function
  * }}
  */
 function _mapDispatchToProps(dispatch) {
@@ -219,15 +218,15 @@ function _mapDispatchToProps(dispatch) {
         },
 
         /**
-         * Dispatched an action changing visiblity of the toolbar.
+         * Dispatches an action changing the visiblity of the Toolbox.
          *
-         * @param {boolean} isVisible - Flag showing whether toolbar is
+         * @param {boolean} visible - True to show the Toolbox or false to hide
-         * visible.
+         * it.
          * @returns {Object} Dispatched action.
          * @private
          */
-        _setToolbarVisible(isVisible: boolean) {
+        _setToolboxVisible(visible: boolean) {
-            return dispatch(setToolbarVisible(isVisible));
+            return dispatch(setToolboxVisible(visible));
         }
     };
 }
@@ -238,18 +237,18 @@ function _mapDispatchToProps(dispatch) {
  * @param {Object} state - The Redux state.
  * @private
  * @returns {{
- *     _toolbarVisible: boolean
+ *     _toolboxVisible: boolean
  * }}
  */
 function _mapStateToProps(state) {
     return {
         /**
-         * The indicator which determines whether toolbar is visible.
+         * The indicator which determines whether the Toolbox is visible.
          *
          * @private
          * @type {boolean}
          */
-        _toolbarVisible: state['features/toolbar'].visible
+        _toolboxVisible: state['features/toolbox'].visible
     };
 }
 

react/features/conference/components/Conference.web.js

@@ -7,7 +7,7 @@ import { connect, disconnect } from '../../base/connection';
 import { DialogContainer } from '../../base/dialog';
 import { Watermarks } from '../../base/react';
 import { OverlayContainer } from '../../overlay';
-import { Toolbar } from '../../toolbar';
+import { Toolbox } from '../../toolbox';
 import { HideNotificationBarStyle } from '../../unsupported-browser';
 
 declare var $: Function;
@@ -65,7 +65,7 @@ class Conference extends Component {
     render() {
         return (
             <div id = 'videoconference_page'>
-                <Toolbar />
+                <Toolbox />
 
                 <div id = 'videospace'>
                     <div

react/features/film-strip/components/FilmStrip.js

@@ -110,7 +110,7 @@ class FilmStrip extends Component {
  * @returns {{
  *     _participants: Participant[],
  *     _visible: boolean
- *  }}
+ * }}
  */
 function _mapStateToProps(state) {
     return {
@@ -132,7 +132,7 @@ function _mapStateToProps(state) {
          * @private
          * @type {boolean}
          */
-        _visible: !state['features/toolbar'].visible
+        _visible: !state['features/toolbox'].visible
     };
 }
 

react/features/toolbar/actionTypes.js

@@ -1,98 +0,0 @@
-import { Symbol } from '../base/react';
-
-/**
- * The type of the action which signals that toolbar timeout should be changed.
- *
- * {
- *      type: CLEAR_TOOLBAR_TIMEOUT
- * }
- */
-export const CLEAR_TOOLBAR_TIMEOUT = Symbol('CLEAR_TOOLBAR_TIMEOUT');
-
-/**
- * The type of the action which signals that a value for always visible toolbar
- * should be changed.
- *
- * {
- *     type: SET_ALWAYS_VISIBLE_TOOLBAR,
- *     alwaysVisible: boolean
- * }
- */
-export const SET_ALWAYS_VISIBLE_TOOLBAR = Symbol('SET_ALWAYS_VISIBLE_TOOLBAR');
-
-/**
- * The type of the action which signals that a value for conference subject
- * should be changed.
- *
- * {
- *      type: SET_SUBJECT,
- *      subject: string
- * }
- */
-export const SET_SUBJECT = Symbol('SET_SUBJECT');
-
-/**
- * The type of the action which signals that a value of subject slide in should
- * be changed.
- *
- * {
- *     type: SET_SUBJECT_SLIDE_IN,
- *     subjectSlideIn: boolean
- * }
- */
-export const SET_SUBJECT_SLIDE_IN = Symbol('SET_SUBJECT_SLIDE_IN');
-
-/**
- * The type of the action which signals that a value for toolbar button should
- * be changed.
- *
- * {
- *     type: SET_TOOLBAR_BUTTON,
- *     button: Object,
- *     key: string
- * }
- */
-export const SET_TOOLBAR_BUTTON = Symbol('SET_TOOLBAR_BUTTON');
-
-/**
- * The type of the action which signals that toolbar is/isn't being hovered.
- *
- * {
- *     type: SET_TOOLBAR_HOVERED,
- *     hovered: boolean
- * }
- */
-export const SET_TOOLBAR_HOVERED = Symbol('SET_TOOLBAR_HOVERED');
-
-/**
- * The type of the action which signals that new toolbar timeout should be set
- * and the value of toolbar timeout should be changed.
- *
- * {
- *      type: SET_TOOLBAR_TIMEOUT,
- *      handler: Function,
-        toolbarTimeout: number
- * }
- */
-export const SET_TOOLBAR_TIMEOUT = Symbol('SET_TOOLBAR_TIMEOUT');
-
-/**
- * The type of the action which signals that value of toolbar timeout should
- * be changed.
- *
- * {
- *      type: SET_TOOLBAR_TIMEOUT_NUMBER,
- *      toolbarTimeout: number
- * }
- */
-export const SET_TOOLBAR_TIMEOUT_NUMBER = Symbol('SET_TOOLBAR_TIMEOUT');
-
-/**
- * The type of the (redux) action which shows/hides the toolbar.
- *
- * {
- *     type: SET_TOOLBAR_VISIBLE,
- *     visible: boolean
- * }
- */
-export const SET_TOOLBAR_VISIBLE = Symbol('SET_TOOLBAR_VISIBLE');

react/features/toolbar/components/index.js

@@ -1 +0,0 @@
-export { default as Toolbar } from './Toolbar';

react/features/toolbar/middleware.js

@@ -1,39 +0,0 @@
-/* @flow */
-
-import { MiddlewareRegistry } from '../base/redux';
-
-import {
-    CLEAR_TOOLBAR_TIMEOUT,
-    SET_TOOLBAR_TIMEOUT
-} from './actionTypes';
-
-/**
- * Middleware that captures toolbar actions and handle changes in toolbar
- * timeout.
- *
- * @param {Store} store - Redux store.
- * @returns {Function}
- */
-MiddlewareRegistry.register(store => next => action => {
-    switch (action.type) {
-    case CLEAR_TOOLBAR_TIMEOUT: {
-        const { timeoutId } = store.getState()['features/toolbar'];
-
-        clearTimeout(timeoutId);
-        break;
-    }
-
-    case SET_TOOLBAR_TIMEOUT: {
-        const { timeoutId } = store.getState()['features/toolbar'];
-        const { handler, toolbarTimeout } = action;
-
-        clearTimeout(timeoutId);
-        const newTimeoutId = setTimeout(handler, toolbarTimeout);
-
-        action.timeoutId = newTimeoutId;
-        break;
-    }
-    }
-
-    return next(action);
-});

react/features/toolbox/actionTypes.js

@@ -0,0 +1,95 @@
+import { Symbol } from '../base/react';
+
+/**
+ * The type of the action which clears the Toolbox visibility timeout.
+ *
+ * {
+ *     type: CLEAR_TOOLBOX_TIMEOUT
+ * }
+ */
+export const CLEAR_TOOLBOX_TIMEOUT = Symbol('CLEAR_TOOLBOX_TIMEOUT');
+
+/**
+ * The type of the action which sets the permanent visibility of the Toolbox.
+ *
+ * {
+ *     type: SET_TOOLBOX_ALWAYS_VISIBLE,
+ *     alwaysVisible: boolean
+ * }
+ */
+export const SET_TOOLBOX_ALWAYS_VISIBLE = Symbol('SET_TOOLBOX_ALWAYS_VISIBLE');
+
+/**
+ * The type of the action which sets the conference subject.
+ *
+ * {
+ *     type: SET_SUBJECT,
+ *     subject: string
+ * }
+ */
+export const SET_SUBJECT = Symbol('SET_SUBJECT');
+
+/**
+ * The type of the action which sets the subject slide in.
+ *
+ * {
+ *     type: SET_SUBJECT_SLIDE_IN,
+ *     subjectSlideIn: boolean
+ * }
+ */
+export const SET_SUBJECT_SLIDE_IN = Symbol('SET_SUBJECT_SLIDE_IN');
+
+/**
+ * The type of the action which sets the descriptor of a toolbar button.
+ *
+ * {
+ *     type: SET_TOOLBAR_BUTTON,
+ *     button: Object,
+ *     key: string
+ * }
+ */
+export const SET_TOOLBAR_BUTTON = Symbol('SET_TOOLBAR_BUTTON');
+
+/**
+ * The type of the action which sets the indicator which determiens whether a
+ * fToolbar in the Toolbox is hovered.
+ *
+ * {
+ *     type: SET_TOOLBAR_HOVERED,
+ *     hovered: boolean
+ * }
+ */
+export const SET_TOOLBAR_HOVERED = Symbol('SET_TOOLBAR_HOVERED');
+
+/**
+ * The type of the action which sets a new Toolbox visibility timeout and its
+ * delay.
+ *
+ * {
+ *     type: SET_TOOLBOX_TIMEOUT,
+ *     handler: Function,
+ *     timeoutMS: number
+ * }
+ */
+export const SET_TOOLBOX_TIMEOUT = Symbol('SET_TOOLBOX_TIMEOUT');
+
+/**
+ * The type of the action which sets the delay in milliseconds after which
+ * the Toolbox visibility is to be changed.
+ *
+ * {
+ *     type: SET_TOOLBOX_TIMEOUT_MS,
+ *     timeoutMS: number
+ * }
+ */
+export const SET_TOOLBOX_TIMEOUT_MS = Symbol('SET_TOOLBOX_TIMEOUT');
+
+/**
+ * The type of the (redux) action which shows/hides the Toolbox.
+ *
+ * {
+ *     type: SET_TOOLBOX_VISIBLE,
+ *     visible: boolean
+ * }
+ */
+export const SET_TOOLBOX_VISIBLE = Symbol('SET_TOOLBOX_VISIBLE');

react/features/toolbox/actions.native.js

@@ -3,15 +3,15 @@
 import type { Dispatch } from 'redux-thunk';
 
 import {
-    CLEAR_TOOLBAR_TIMEOUT,
+    CLEAR_TOOLBOX_TIMEOUT,
-    SET_ALWAYS_VISIBLE_TOOLBAR,
+    SET_TOOLBOX_ALWAYS_VISIBLE,
     SET_SUBJECT,
     SET_SUBJECT_SLIDE_IN,
     SET_TOOLBAR_BUTTON,
     SET_TOOLBAR_HOVERED,
-    SET_TOOLBAR_TIMEOUT,
+    SET_TOOLBOX_TIMEOUT,
-    SET_TOOLBAR_TIMEOUT_NUMBER,
+    SET_TOOLBOX_TIMEOUT_MS,
-    SET_TOOLBAR_VISIBLE
+    SET_TOOLBOX_VISIBLE
 } from './actionTypes';
 
 /**
@@ -23,7 +23,7 @@ import {
 export function changeLocalRaiseHand(handRaised: boolean): Function {
     return (dispatch: Dispatch<*>, getState: Function) => {
         const state = getState();
-        const { secondaryToolbarButtons } = state['features/toolbar'];
+        const { secondaryToolbarButtons } = state['features/toolbox'];
         const buttonName = 'raisehand';
         const button = secondaryToolbarButtons.get(buttonName);
 
@@ -34,15 +34,15 @@ export function changeLocalRaiseHand(handRaised: boolean): Function {
 }
 
 /**
- * Signals that toolbar timeout should be cleared.
+ * Signals that toolbox timeout should be cleared.
  *
  * @returns {{
- *      type: CLEAR_TOOLBAR_TIMEOUT
+ *     type: CLEAR_TOOLBOX_TIMEOUT
  * }}
  */
-export function clearToolbarTimeout(): Object {
+export function clearToolboxTimeout(): Object {
     return {
-        type: CLEAR_TOOLBAR_TIMEOUT
+        type: CLEAR_TOOLBOX_TIMEOUT
     };
 }
 
@@ -51,22 +51,22 @@ export function clearToolbarTimeout(): Object {
  *
  * @param {boolean} alwaysVisible - Value to be set in redux store.
  * @returns {{
- *     type: SET_ALWAYS_VISIBLE_TOOLBAR,
+ *     type: SET_TOOLBOX_ALWAYS_VISIBLE,
- *     alwaysVisible: bool
+ *     alwaysVisible: boolean
  * }}
  */
-export function setAlwaysVisibleToolbar(alwaysVisible: boolean): Object {
+export function setToolboxAlwaysVisible(alwaysVisible: boolean): Object {
     return {
-        type: SET_ALWAYS_VISIBLE_TOOLBAR,
+        type: SET_TOOLBOX_ALWAYS_VISIBLE,
         alwaysVisible
     };
 }
 
 /**
- * Enables / disables audio toolbar button.
+ * Enables/disables audio toolbar button.
  *
- * @param {boolean} enabled - Indicates if the button should be enabled
+ * @param {boolean} enabled - True if the button should be enabled; otherwise,
- * or disabled.
+ * false.
  * @returns {Function}
  */
 export function setAudioIconEnabled(enabled: boolean = false): Function {
@@ -84,12 +84,12 @@ export function setAudioIconEnabled(enabled: boolean = false): Function {
 }
 
 /**
- *  Signals that value of conference subject should be changed.
+ * Signals that value of conference subject should be changed.
  *
- *  @param {string} subject - Conference subject string.
+ * @param {string} subject - Conference subject string.
- *  @returns {Object}
+ * @returns {Object}
  */
-export function setSubject(subject: string) {
+export function setSubject(subject: string): Object {
     return {
         type: SET_SUBJECT,
         subject
@@ -97,9 +97,10 @@ export function setSubject(subject: string) {
 }
 
 /**
- * Signals that toolbar subject slide in value should be changed.
+ * Signals that toolbox subject slide in value should be changed.
  *
- * @param {boolean} subjectSlideIn - Flag showing whether subject is shown.
+ * @param {boolean} subjectSlideIn - True if the subject is shown; otherwise,
+ * false.
  * @returns {{
  *     type: SET_SUBJECT_SLIDE_IN,
  *     subjectSlideIn: boolean
@@ -119,15 +120,15 @@ export function setSubjectSlideIn(subjectSlideIn: boolean): Object {
  * @param {Object} button - Button object.
  * @returns {{
  *     type: SET_TOOLBAR_BUTTON,
- *     buttonName: string,
+ *     button: Object,
- *     button: Object
+ *     buttonName: string
  * }}
  */
 export function setToolbarButton(buttonName: string, button: Object): Object {
     return {
         type: SET_TOOLBAR_BUTTON,
-        buttonName,
+        button,
-        button
+        buttonName
     };
 }
 
@@ -147,63 +148,67 @@ export function setToolbarHovered(hovered: boolean): Object {
     };
 }
 
+/* eslint-disable flowtype/space-before-type-colon */
+
 /**
  * Dispatches an action which sets new timeout and clears the previous one.
  *
  * @param {Function} handler - Function to be invoked after the timeout.
- * @param {number} toolbarTimeout - Delay.
+ * @param {number} timeoutMS - Delay.
  * @returns {{
- *      type: SET_TOOLBAR_TIMEOUT,
+ *     type: SET_TOOLBOX_TIMEOUT,
- *      handler: Function,
+ *     handler: Function,
- *      toolbarTimeout: number
+ *     timeoutMS: number
  * }}
  */
-export function setToolbarTimeout(handler: Function,
+export function setToolboxTimeout(handler: Function, timeoutMS: number)
-        toolbarTimeout: number): Object {
+      : Object {
     return {
-        type: SET_TOOLBAR_TIMEOUT,
+        type: SET_TOOLBOX_TIMEOUT,
         handler,
-        toolbarTimeout
+        timeoutMS
     };
 }
 
+/* eslint-enable flowtype/space-before-type-colon */
+
 /**
- * Dispatches an action which sets new toolbar timeout value.
+ * Dispatches an action which sets new toolbox timeout value.
  *
- * @param {number} toolbarTimeout - Delay.
+ * @param {number} timeoutMS - Delay.
  * @returns {{
- *      type: SET_TOOLBAR_TIMEOUT_NUMBER,
+ *     type: SET_TOOLBOX_TIMEOUT_MS,
- *      toolbarTimeout: number
+ *     timeoutMS: number
  * }}
  */
-export function setToolbarTimeoutNumber(toolbarTimeout: number): Object {
+export function setToolboxTimeoutMS(timeoutMS: number): Object {
     return {
-        type: SET_TOOLBAR_TIMEOUT_NUMBER,
+        type: SET_TOOLBOX_TIMEOUT_MS,
-        toolbarTimeout
+        timeoutMS
     };
 }
 
 /**
- * Shows/hides the toolbar.
+ * Shows/hides the toolbox.
  *
- * @param {boolean} visible - True to show the toolbar or false to hide it.
+ * @param {boolean} visible - True to show the toolbox or false to hide it.
  * @returns {{
- *     type: SET_TOOLBAR_VISIBLE,
+ *     type: SET_TOOLBOX_VISIBLE,
  *     visible: boolean
  * }}
  */
-export function setToolbarVisible(visible: boolean): Object {
+export function setToolboxVisible(visible: boolean): Object {
     return {
-        type: SET_TOOLBAR_VISIBLE,
+        type: SET_TOOLBOX_VISIBLE,
         visible
     };
 }
 
 /**
- * Enables / disables audio toolbar button.
+ * Enables/disables audio toolbar button.
  *
- * @param {boolean} enabled - Indicates if the button should be enabled
+ * @param {boolean} enabled - True if the button should be enabled; otherwise,
- * or disabled.
+ * false.
  * @returns {Function}
  */
 export function setVideoIconEnabled(enabled: boolean = false): Function {
@@ -243,7 +248,7 @@ export function showEtherpadButton(): Function {
 export function toggleFullScreen(isFullScreen: boolean): Function {
     return (dispatch: Dispatch<*>, getState: Function) => {
         const state = getState();
-        const { primaryToolbarButtons } = state['features/toolbar'];
+        const { primaryToolbarButtons } = state['features/toolbox'];
         const buttonName = 'fullscreen';
         const button = primaryToolbarButtons.get(buttonName);
 
@@ -265,7 +270,7 @@ export function toggleToolbarButton(buttonName: string): Function {
         const {
             primaryToolbarButtons,
             secondaryToolbarButtons
-        } = state['features/toolbar'];
+        } = state['features/toolbox'];
         const button
             = primaryToolbarButtons.get(buttonName)
                 || secondaryToolbarButtons.get(buttonName);

react/features/toolbox/actions.web.js

@@ -7,13 +7,12 @@ import UIEvents from '../../../service/UI/UIEvents';
 import UIUtil from '../../../modules/UI/util/UIUtil';
 
 import {
-    clearToolbarTimeout,
+    clearToolboxTimeout,
-    setAlwaysVisibleToolbar,
     setSubjectSlideIn,
     setToolbarButton,
-    setToolbarTimeout,
+    setToolboxTimeout,
-    setToolbarTimeoutNumber,
+    setToolboxTimeoutMS,
-    setToolbarVisible,
+    setToolboxVisible,
     toggleToolbarButton
 } from './actions.native';
 
@@ -43,86 +42,73 @@ export function checkAutoEnableDesktopSharing(): Function {
 }
 
 /**
- * Docks/undocks toolbar based on its parameter.
+ * Docks/undocks the Toolbox.
  *
  * @param {boolean} dock - True if dock, false otherwise.
  * @returns {Function}
  */
-export function dockToolbar(dock: boolean): Function {
+export function dockToolbox(dock: boolean): Function {
     return (dispatch: Dispatch<*>, getState: Function) => {
         if (interfaceConfig.filmStripOnly) {
             return;
         }
 
         const state = getState();
-        const { toolbarTimeout, visible } = state['features/toolbar'];
+        const { timeoutMS, visible } = state['features/toolbox'];
 
         if (dock) {
-            // First make sure the toolbar is shown.
+            // First make sure the toolbox is shown.
-            visible || dispatch(showToolbar());
+            visible || dispatch(showToolbox());
 
-            dispatch(clearToolbarTimeout());
+            dispatch(clearToolboxTimeout());
         } else if (visible) {
             dispatch(
-                setToolbarTimeout(
+                setToolboxTimeout(
-                    () => dispatch(hideToolbar()),
+                    () => dispatch(hideToolbox()),
-                    toolbarTimeout));
+                    timeoutMS));
         } else {
-            dispatch(showToolbar());
+            dispatch(showToolbox());
         }
     };
 }
 
 /**
- * Hides the toolbar.
+ * Hides the toolbox.
  *
- * @param {boolean} force - True to force the hiding of the toolbar without
+ * @param {boolean} force - True to force the hiding of the toolbox without
  * caring about the extended toolbar side panels.
  * @returns {Function}
  */
-export function hideToolbar(force: boolean = false): Function {
+export function hideToolbox(force: boolean = false): Function {
     return (dispatch: Dispatch<*>, getState: Function) => {
         const state = getState();
         const {
             alwaysVisible,
             hovered,
-            toolbarTimeout
+            timeoutMS
-        } = state['features/toolbar'];
+        } = state['features/toolbox'];
 
         if (alwaysVisible) {
             return;
         }
 
-        dispatch(clearToolbarTimeout());
+        dispatch(clearToolboxTimeout());
 
         if (!force
                 && (hovered
                     || APP.UI.isRingOverlayVisible()
                     || SideContainerToggler.isVisible())) {
             dispatch(
-                setToolbarTimeout(
+                setToolboxTimeout(
-                    () => dispatch(hideToolbar()),
+                    () => dispatch(hideToolbox()),
-                    toolbarTimeout));
+                    timeoutMS));
         } else {
-            dispatch(setToolbarVisible(false));
+            dispatch(setToolboxVisible(false));
             dispatch(setSubjectSlideIn(false));
         }
     };
 }
 
-/**
- * Action that reset always visible toolbar to default state.
- *
- * @returns {Function}
- */
-export function resetAlwaysVisibleToolbar(): Function {
-    return (dispatch: Dispatch<*>) => {
-        const alwaysVisible = config.alwaysVisibleToolbar === true;
-
-        dispatch(setAlwaysVisibleToolbar(alwaysVisible));
-    };
-}
-
 /**
  * Signals that unclickable property of profile button should change its value.
  *
@@ -240,27 +226,28 @@ export function showSIPCallButton(show: boolean): Function {
 }
 
 /**
- * Shows the toolbar for specified timeout.
+ * Shows the toolbox for specified timeout.
  *
- * @param {number} timeout - Timeout for showing the toolbar.
+ * @param {number} timeout - Timeout for showing the toolbox.
  * @returns {Function}
  */
-export function showToolbar(timeout: number = 0): Object {
+export function showToolbox(timeout: number = 0): Object {
     return (dispatch: Dispatch<*>, getState: Function) => {
         if (interfaceConfig.filmStripOnly) {
             return;
         }
 
         const state = getState();
-        const { toolbarTimeout, visible } = state['features/toolbar'];
+        const { timeoutMS, visible } = state['features/toolbox'];
-        const finalTimeout = timeout || toolbarTimeout;
 
         if (!visible) {
-            dispatch(setToolbarVisible(true));
+            dispatch(setToolboxVisible(true));
             dispatch(setSubjectSlideIn(true));
             dispatch(
-                setToolbarTimeout(() => dispatch(hideToolbar()), finalTimeout));
+                setToolboxTimeout(
-            dispatch(setToolbarTimeoutNumber(interfaceConfig.TOOLBAR_TIMEOUT));
+                    () => dispatch(hideToolbox()),
+                    timeout || timeoutMS));
+            dispatch(setToolboxTimeoutMS(interfaceConfig.TOOLBAR_TIMEOUT));
         }
     };
 }
@@ -269,12 +256,12 @@ export function showToolbar(timeout: number = 0): Object {
  * Event handler for side toolbar container toggled event.
  *
  * @param {string} containerId - ID of the container.
- * @returns {void}
+ * @returns {Function}
  */
 export function toggleSideToolbarContainer(containerId: string): Function {
     return (dispatch: Dispatch, getState: Function) => {
         const state = getState();
-        const { secondaryToolbarButtons } = state['features/toolbar'];
+        const { secondaryToolbarButtons } = state['features/toolbox'];
 
         for (const key of secondaryToolbarButtons.keys()) {
             const isButtonEnabled = UIUtil.isButtonEnabled(key);

react/features/toolbox/components/PrimaryToolbar.web.js

@@ -6,7 +6,7 @@ import { connect } from 'react-redux';
 import UIEvents from '../../../../service/UI/UIEvents';
 
 import { showDesktopSharingButton, toggleFullScreen } from '../actions';
-import BaseToolbar from './BaseToolbar';
+import Toolbar from './Toolbar';
 import { getToolbarClassNames } from '../functions';
 
 declare var APP: Object;
@@ -19,7 +19,6 @@ declare var interfaceConfig: Object;
  * @extends Component
  */
 class PrimaryToolbar extends Component {
-
     state: Object;
 
     static propTypes = {
@@ -39,7 +38,7 @@ class PrimaryToolbar extends Component {
         _primaryToolbarButtons: React.PropTypes.instanceOf(Map),
 
         /**
-         * Shows whether toolbar is visible.
+         * Shows whether toolbox is visible.
          */
         _visible: React.PropTypes.bool
     };
@@ -108,7 +107,7 @@ class PrimaryToolbar extends Component {
         const { primaryToolbarClassName } = getToolbarClassNames(this.props);
 
         return (
-            <BaseToolbar
+            <Toolbar
                 buttonHandlers = { buttonHandlers }
                 className = { primaryToolbarClassName }
                 splitterIndex = { splitterIndex }
@@ -164,7 +163,7 @@ function _mapStateToProps(state: Object): Object {
     const {
         primaryToolbarButtons,
         visible
-    } = state['features/toolbar'];
+    } = state['features/toolbox'];
 
     return {
         /**
@@ -176,7 +175,7 @@ function _mapStateToProps(state: Object): Object {
         _primaryToolbarButtons: primaryToolbarButtons,
 
         /**
-         * Shows whether toolbar is visible.
+         * Shows whether toolbox is visible.
          *
          * @protected
          * @type {boolean}
@@ -186,4 +185,3 @@ function _mapStateToProps(state: Object): Object {
 }
 
 export default connect(_mapStateToProps, _mapDispatchToProps)(PrimaryToolbar);
-

react/features/toolbox/components/SecondaryToolbar.web.js

@@ -12,7 +12,7 @@ import {
     showRecordingButton,
     toggleSideToolbarContainer
 } from '../actions';
-import BaseToolbar from './BaseToolbar';
+import Toolbar from './Toolbar';
 import { getToolbarClassNames } from '../functions';
 
 declare var APP: Object;
@@ -25,7 +25,6 @@ declare var config: Object;
  * @extends Component
  */
 class SecondaryToolbar extends Component {
-
     state: Object;
 
     /**
@@ -60,7 +59,7 @@ class SecondaryToolbar extends Component {
         _secondaryToolbarButtons: React.PropTypes.instanceOf(Map),
 
         /**
-         * Shows whether toolbar is visible.
+         * Shows whether toolbox is visible.
          */
         _visible: React.PropTypes.bool
     };
@@ -157,12 +156,12 @@ class SecondaryToolbar extends Component {
         const { secondaryToolbarClassName } = getToolbarClassNames(this.props);
 
         return (
-            <BaseToolbar
+            <Toolbar
                 buttonHandlers = { buttonHandlers }
                 className = { secondaryToolbarClassName }
                 toolbarButtons = { _secondaryToolbarButtons }>
                 <FeedbackButton />
-            </BaseToolbar>
+            </Toolbar>
         );
     }
 }
@@ -239,7 +238,7 @@ function _mapStateToProps(state: Object): Object {
     const {
         secondaryToolbarButtons,
         visible
-    } = state['features/toolbar'];
+    } = state['features/toolbox'];
 
     return {
         /**

react/features/toolbox/components/Toolbar.web.js

@@ -13,13 +13,14 @@ declare var config: Object;
 declare var interfaceConfig: Object;
 
 /**
- * Class implementing Primary Toolbar React component.
+ * Implements a toolbar in React/Web. It is a strip that contains a set of
+ * toolbar items such as buttons. Toolbar is commonly placed inside of a
+ * Toolbox.
  *
- * @class PrimaryToolbar
+ * @class Toolbar
  * @extends Component
  */
-class BaseToolbar extends Component {
+class Toolbar extends Component {
-
     _renderToolbarButton: Function;
 
     /**
@@ -197,4 +198,4 @@ function _mapDispatchToProps(dispatch: Function): Object {
     };
 }
 
-export default connect(null, _mapDispatchToProps)(BaseToolbar);
+export default connect(null, _mapDispatchToProps)(Toolbar);

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

@@ -15,11 +15,11 @@ import { styles } from './styles';
 import ToolbarButton from './ToolbarButton';
 
 /**
- * Implements the conference toolbar on React Native.
+ * Implements the conference toolbox on React Native.
  */
-class Toolbar extends Component {
+class Toolbox extends Component {
     /**
-     * Toolbar component's property types.
+     * Toolbox component's property types.
      *
      * @static
      */
@@ -220,7 +220,7 @@ class Toolbar extends Component {
  * TODO As soon as we have common font sets for web and native, this will no
  * longer be required.
  */
-Object.assign(Toolbar.prototype, {
+Object.assign(Toolbox.prototype, {
     audioIcon: 'microphone',
     audioMutedIcon: 'mic-disabled',
     videoIcon: 'camera',
@@ -293,4 +293,4 @@ function _mapStateToProps(state) {
     };
 }
 
-export default connect(_mapStateToProps, _mapDispatchToProps)(Toolbar);
+export default connect(_mapStateToProps, _mapDispatchToProps)(Toolbox);

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

@@ -5,7 +5,7 @@ import { connect } from 'react-redux';
 
 import UIEvents from '../../../../service/UI/UIEvents';
 
-import { resetAlwaysVisibleToolbar } from '../actions';
+import { setToolboxAlwaysVisible } from '../actions';
 import {
     abstractMapStateToProps,
     showCustomToolbarPopup
@@ -19,10 +19,9 @@ declare var config: Object;
 declare var interfaceConfig: Object;
 
 /**
- * Implements the conference toolbar on React.
+ * Implements the conference toolbox on React/Web.
  */
-class Toolbar extends Component {
+class Toolbox extends Component {
-
     /**
      * App component's property types.
      *
@@ -30,9 +29,9 @@ class Toolbar extends Component {
      */
     static propTypes = {
         /**
-         * Handler dispatching reset always visible toolbar action.
+         * Handler dispatching reset always visible toolbox action.
          */
-        _onResetAlwaysVisibleToolbar: React.PropTypes.func,
+        _setToolboxAlwaysVisible: React.PropTypes.func,
 
         /**
          * Represents conference subject.
@@ -45,21 +44,22 @@ class Toolbar extends Component {
         _subjectSlideIn: React.PropTypes.bool,
 
         /**
-         * Property containing toolbar timeout id.
+         * Property containing toolbox timeout id.
          */
-        _timeoutId: React.PropTypes.number
+        _timeoutID: React.PropTypes.number
     };
 
     /**
-     * Invokes reset always visible toolbar after mounting the component and
+     * Invokes reset always visible toolbox after mounting the component and
      * registers legacy UI listeners.
      *
      * @returns {void}
      */
     componentDidMount(): void {
-        this.props._onResetAlwaysVisibleToolbar();
+        this.props._setToolboxAlwaysVisible();
 
-        APP.UI.addListener(UIEvents.SHOW_CUSTOM_TOOLBAR_BUTTON_POPUP,
+        APP.UI.addListener(
+            UIEvents.SHOW_CUSTOM_TOOLBAR_BUTTON_POPUP,
             showCustomToolbarPopup);
     }
 
@@ -69,7 +69,8 @@ class Toolbar extends Component {
      *  @returns {void}
      */
     componentWillUnmount(): void {
-        APP.UI.removeListener(UIEvents.SHOW_CUSTOM_TOOLBAR_BUTTON_POPUP,
+        APP.UI.removeListener(
+            UIEvents.SHOW_CUSTOM_TOOLBAR_BUTTON_POPUP,
             showCustomToolbarPopup);
     }
 
@@ -94,7 +95,7 @@ class Toolbar extends Component {
     }
 
     /**
-     * Returns React element representing toolbar subject.
+     * Returns React element representing toolbox subject.
      *
      * @returns {ReactElement}
      * @private
@@ -137,9 +138,8 @@ class Toolbar extends Component {
      * @private
      */
     _renderToolbars(): ReactElement<*> | null {
-        // We should not show the toolbars till timeout object will be
+        // The toolbars should not be shown until timeoutID is initialized.
-        // initialized.
+        if (this.props._timeoutID === null) {
-        if (this.props._timeoutId === null) {
             return null;
         }
 
@@ -158,7 +158,7 @@ class Toolbar extends Component {
  *
  * @param {Function} dispatch - Redux action dispatcher.
  * @returns {{
- *      _onResetAlwaysVisibleToolbar: Function
+ *     _setToolboxAlwaysVisible: Function
  * }}
  * @private
  */
@@ -166,18 +166,19 @@ function _mapDispatchToProps(dispatch: Function): Object {
     return {
 
         /**
-         * Dispatches an action resetting always visible toolbar.
+         * Dispatches an action resetting always visible toolbox.
          *
          * @returns {Object} Dispatched action.
          */
-        _onResetAlwaysVisibleToolbar() {
+        _setToolboxAlwaysVisible() {
-            dispatch(resetAlwaysVisibleToolbar());
+            dispatch(
+                setToolboxAlwaysVisible(config.alwaysVisibleToolbar === true));
         }
     };
 }
 
 /**
- * Maps parts of toolbar state to component props.
+ * Maps parts of toolbox state to component props.
  *
  * @param {Object} state - Redux state.
  * @private
@@ -192,8 +193,8 @@ function _mapStateToProps(state: Object): Object {
     const {
         subject,
         subjectSlideIn,
-        timeoutId
+        timeoutID
-    } = state['features/toolbar'];
+    } = state['features/toolbox'];
 
     return {
         ...abstractMapStateToProps(state),
@@ -215,13 +216,13 @@ function _mapStateToProps(state: Object): Object {
         _subjectSlideIn: subjectSlideIn,
 
         /**
-         * Property containing toolbar timeout id.
+         * Property containing toolbox timeout id.
          *
          * @protected
          * @type {number}
          */
-        _timeoutId: timeoutId
+        _timeoutID: timeoutID
     };
 }
 
-export default connect(_mapStateToProps, _mapDispatchToProps)(Toolbar);
+export default connect(_mapStateToProps, _mapDispatchToProps)(Toolbox);

react/features/toolbox/components/index.js

@@ -0,0 +1 @@
+export { default as Toolbox } from './Toolbox';

react/features/toolbox/components/styles.js

@@ -64,7 +64,7 @@ const toolbar = {
 };
 
 /**
- * The (conference) toolbar related styles.
+ * The (conference) Toolbox/Toolbar related styles.
  */
 export const styles = createStyleSheet({
     /**
@@ -116,7 +116,8 @@ export const styles = createStyleSheet({
     },
 
     /**
-     * The style of the root/top-level Container of Toolbar.
+     * The style of the root/top-level Container of Toolbar that contains
+     * toolbars.
      */
     toolbarContainer: {
         bottom: 0,

react/features/toolbox/defaultToolbarButtons.js

@@ -37,11 +37,11 @@ function _showSIPNumberInput() {
 }
 
 /**
- * All toolbar buttons' descriptions.
+ * All toolbar buttons' descriptors.
  */
 export default {
     /**
-     * Object representing camera button.
+     * The descriptor of the camera toolbar button.
      */
     camera: {
         classNames: [ 'button', 'icon-camera' ],
@@ -67,7 +67,7 @@ export default {
     },
 
     /**
-     * The Object representing chat button.
+     * The descriptor of the chat toolbar button.
      */
     chat: {
         classNames: [ 'button', 'icon-chat' ],
@@ -92,16 +92,16 @@ export default {
     },
 
     /**
-     * The object representing contact list button.
+     * The descriptor of the contact list toolbar button.
      */
     contacts: {
         classNames: [ 'button', 'icon-contactList' ],
         enabled: true,
 
-        // XXX: Hotfix to solve race condition between toolbar rendering and
+        // XXX: Hotfix to solve race condition between toolbox rendering and
         // contact list view that updates the number of active participants
         // via jQuery. There is case when contact list view updates number of
-        // participants but toolbar has not been rendered yet. Since this issue
+        // participants but toolbox has not been rendered yet. Since this issue
         // is reproducible only for conferences with the only participant let's
         // use 1 participant as a default value for this badge. Later after
         // reactification of contact list let's use the value of active
@@ -120,7 +120,7 @@ export default {
     },
 
     /**
-     * The object representing desktop sharing button.
+     * The descriptor of the desktop sharing toolbar button.
      */
     desktop: {
         classNames: [ 'button', 'icon-share-desktop' ],
@@ -145,7 +145,7 @@ export default {
     },
 
     /**
-     * The object representing dialpad button.
+     * The descriptor of the dialpad toolbar button.
      */
     dialpad: {
         classNames: [ 'button', 'icon-dialpad' ],
@@ -161,7 +161,7 @@ export default {
     },
 
     /**
-     * The object representing etherpad button.
+     * The descriptor of the etherpad toolbar button.
      */
     etherpad: {
         classNames: [ 'button', 'icon-share-doc' ],
@@ -176,7 +176,7 @@ export default {
     },
 
     /**
-     * The object representing button toggling full screen mode.
+     * The descriptor of the toolbar button which toggles full-screen mode.
      */
     fullscreen: {
         classNames: [ 'button', 'icon-full-screen' ],
@@ -198,7 +198,7 @@ export default {
     },
 
     /**
-     * The object representing hanging the call up button.
+     * The descriptor of the toolbar button which hangs up the call/conference.
      */
     hangup: {
         classNames: [ 'button', 'icon-hangup', 'button_hangup' ],
@@ -212,7 +212,7 @@ export default {
     },
 
     /**
-     * The object representing button showing invite user dialog.
+     * The descriptor of the toolbar button which shows the invite user dialog.
      */
     invite: {
         classNames: [ 'button', 'icon-link' ],
@@ -226,7 +226,7 @@ export default {
     },
 
     /**
-     * The object representing microphone button.
+     * The descriptor of the microphone toolbar button.
      */
     microphone: {
         classNames: [ 'button', 'icon-microphone' ],
@@ -281,7 +281,7 @@ export default {
     },
 
     /**
-     * The object representing profile button.
+     * The descriptor of the profile toolbar button.
      */
     profile: {
         classNames: [ 'button' ],
@@ -299,7 +299,7 @@ export default {
     },
 
     /**
-     * The object representing "Raise hand" button.
+     * The descriptor of the "Raise hand" toolbar button.
      */
     raisehand: {
         classNames: [ 'button', 'icon-raised-hand' ],
@@ -320,8 +320,8 @@ export default {
     },
 
     /**
-     * The object representing recording button. Requires additional
+     * The descriptor of the recording toolbar button. Requires additional
-     * initialization in Recording module.
+     * initialization in the recording module.
      */
     recording: {
         classNames: [ 'button' ],
@@ -334,7 +334,7 @@ export default {
     },
 
     /**
-     * The objecr representing settings button.
+     * The descriptor of the settings toolbar button.
      */
     settings: {
         classNames: [ 'button', 'icon-settings' ],
@@ -349,7 +349,7 @@ export default {
     },
 
     /**
-     * The object representing sharing Youtube video button.
+     * The descriptor of the "Share YouTube video" toolbar button.
      */
     sharedvideo: {
         classNames: [ 'button', 'icon-shared-video' ],
@@ -371,7 +371,7 @@ export default {
     },
 
     /**
-     * The object representing SIP call.
+     * The descriptor of the SIP call toolbar button.
      */
     sip: {
         classNames: [ 'button', 'icon-telephone' ],

react/features/toolbox/functions.js

@@ -8,16 +8,16 @@ import { toggleAudioMuted, toggleVideoMuted } from '../base/media';
 
 import defaultToolbarButtons from './defaultToolbarButtons';
 
-declare var $: Function;
-declare var AJS: Object;
-declare var interfaceConfig: Object;
-
 import type { Dispatch } from 'redux-thunk';
 
 type MapOfAttributes = { [key: string]: * };
 
+declare var $: Function;
+declare var AJS: Object;
+declare var interfaceConfig: Object;
+
 /**
- * Maps actions to React component props.
+ * Maps (redux) actions to React component props.
  *
  * @param {Function} dispatch - Redux action dispatcher.
  * @returns {{
@@ -83,7 +83,7 @@ export function abstractMapDispatchToProps(dispatch: Dispatch<*>): Object {
  */
 export function abstractMapStateToProps(state: Object): Object {
     const media = state['features/base/media'];
-    const { visible } = state['features/toolbar'];
+    const { visible } = state['features/toolbox'];
 
     return {
         /**
@@ -103,7 +103,7 @@ export function abstractMapStateToProps(state: Object): Object {
         _videoMuted: media.video.muted,
 
         /**
-         * Flag showing whether toolbar is visible.
+         * Flag showing whether toolbox is visible.
          *
          * @protected
          * @type {boolean}
@@ -116,7 +116,7 @@ export function abstractMapStateToProps(state: Object): Object {
  * Takes toolbar button props and maps them to HTML attributes to set.
  *
  * @param {Object} props - Props set to the React component.
- * @returns {Object}
+ * @returns {MapOfAttributes}
  */
 export function getButtonAttributesByProps(props: Object): MapOfAttributes {
     const classNames = [ ...props.classNames ];
@@ -156,27 +156,29 @@ export function getDefaultToolbarButtons(): Object {
 
     if (typeof interfaceConfig !== 'undefined'
             && interfaceConfig.TOOLBAR_BUTTONS) {
-        toolbarButtons = interfaceConfig.TOOLBAR_BUTTONS.reduce(
+        toolbarButtons
-            (acc, buttonName) => {
+            = interfaceConfig.TOOLBAR_BUTTONS.reduce(
-                const button = defaultToolbarButtons[buttonName];
+                (acc, buttonName) => {
+                    const button = defaultToolbarButtons[buttonName];
 
-                if (button) {
+                    if (button) {
-                    const place = _getToolbarButtonPlace(buttonName);
+                        const place = _getToolbarButtonPlace(buttonName);
 
-                    button.buttonName = buttonName;
+                        button.buttonName = buttonName;
-                    acc[place].set(buttonName, button);
+                        acc[place].set(buttonName, button);
-                }
+                    }
 
-                return acc;
+                    return acc;
-            }, toolbarButtons);
+                },
+                toolbarButtons);
     }
 
     return toolbarButtons;
 }
 
 /**
- * Get place for toolbar button.
+ * Get place for toolbar button. Now it can be in the primary Toolbar or in the
- * Now it can be in main toolbar or in extended (left) toolbar.
+ * secondary Toolbar.
  *
  * @param {string} btn - Button name.
  * @private

react/features/toolbox/middleware.js

@@ -0,0 +1,39 @@
+/* @flow */
+
+import { MiddlewareRegistry } from '../base/redux';
+
+import {
+    CLEAR_TOOLBOX_TIMEOUT,
+    SET_TOOLBOX_TIMEOUT
+} from './actionTypes';
+
+/**
+ * Middleware which intercepts Toolbox actions to handle changes to the
+ * visibility timeout of the Toolbox.
+ *
+ * @param {Store} store - Redux store.
+ * @returns {Function}
+ */
+MiddlewareRegistry.register(store => next => action => {
+    switch (action.type) {
+    case CLEAR_TOOLBOX_TIMEOUT: {
+        const { timeoutID } = store.getState()['features/toolbox'];
+
+        clearTimeout(timeoutID);
+        break;
+    }
+
+    case SET_TOOLBOX_TIMEOUT: {
+        const { timeoutID } = store.getState()['features/toolbox'];
+        const { handler, timeoutMS } = action;
+
+        clearTimeout(timeoutID);
+        const newTimeoutId = setTimeout(handler, timeoutMS);
+
+        action.timeoutID = newTimeoutId;
+        break;
+    }
+    }
+
+    return next(action);
+});

react/features/toolbox/reducer.js

@@ -3,90 +3,96 @@
 import { ReducerRegistry } from '../base/redux';
 
 import {
-    CLEAR_TOOLBAR_TIMEOUT,
+    CLEAR_TOOLBOX_TIMEOUT,
-    SET_ALWAYS_VISIBLE_TOOLBAR,
+    SET_TOOLBOX_ALWAYS_VISIBLE,
     SET_SUBJECT,
     SET_SUBJECT_SLIDE_IN,
     SET_TOOLBAR_BUTTON,
     SET_TOOLBAR_HOVERED,
-    SET_TOOLBAR_TIMEOUT,
+    SET_TOOLBOX_TIMEOUT,
-    SET_TOOLBAR_TIMEOUT_NUMBER,
+    SET_TOOLBOX_TIMEOUT_MS,
-    SET_TOOLBAR_VISIBLE
+    SET_TOOLBOX_VISIBLE
 } from './actionTypes';
 import { getDefaultToolbarButtons } from './functions';
 
 declare var interfaceConfig: Object;
 
 /**
- * Returns initial state for toolbar's part of Redux store.
+ * Returns initial state for toolbox's part of Redux store.
  *
- * @returns {{
- *     primaryToolbarButtons: Map,
- *     secondaryToolbarButtons: Map
- * }}
  * @private
+ * @returns {{
+ *     alwaysVisible: boolean,
+ *     hovered: boolean,
+ *     primaryToolbarButtons: Map,
+ *     secondaryToolbarButtons: Map,
+ *     subject: string,
+ *     subjectSlideIn: boolean,
+ *     timeoutID: number,
+ *     timeoutMS: number,
+ *     visible: boolean
+ * }}
  */
 function _getInitialState() {
-    // Default toolbar timeout for mobile app.
+    // Default toolbox timeout for mobile app.
-    let toolbarTimeout = 5000;
+    let timeoutMS = 5000;
 
     if (typeof interfaceConfig !== 'undefined'
             && interfaceConfig.INITIAL_TOOLBAR_TIMEOUT) {
-        toolbarTimeout = interfaceConfig.INITIAL_TOOLBAR_TIMEOUT;
+        timeoutMS = interfaceConfig.INITIAL_TOOLBAR_TIMEOUT;
     }
 
     return {
-        /**
-         * Contains default toolbar buttons for primary and secondary toolbars.
-         *
-         * @type {Map}
-         */
         ...getDefaultToolbarButtons(),
 
         /**
-         * Shows whether toolbar is always visible.
+         * The indicator which determines whether the Toolbox should always be
+         * visible.
          *
          * @type {boolean}
          */
         alwaysVisible: false,
 
         /**
-         * Shows whether toolbar is hovered.
+         * The indicator which determines whether a Toolbar in the Toolbox is
+         * hovered.
          *
          * @type {boolean}
          */
         hovered: false,
 
         /**
-         * Contains text of conference subject.
+         * The text of the conference subject.
          *
          * @type {string}
          */
         subject: '',
 
         /**
-         * Shows whether subject is sliding in.
+         * The indicator which determines whether the subject is sliding in.
          *
          * @type {boolean}
          */
         subjectSlideIn: false,
 
         /**
-         * Contains toolbar timeout id.
+         * A number, non-zero value which identifies the timer created by a call
+         * to setTimeout() with timeoutMS.
          *
          * @type {number|null}
          */
-        timeoutId: null,
+        timeoutID: null,
 
         /**
-         * Contains delay of toolbar timeout.
+         * The delay in milliseconds before timeoutID executes (after its
+         * initialization).
          *
          * @type {number}
          */
-        toolbarTimeout,
+        timeoutMS,
 
         /**
-         * Shows whether toolbar is visible.
+         * The indicator which determines whether the Toolbox is visible.
          *
          * @type {boolean}
          */
@@ -95,16 +101,16 @@ function _getInitialState() {
 }
 
 ReducerRegistry.register(
-    'features/toolbar',
+    'features/toolbox',
     (state: Object = _getInitialState(), action: Object) => {
         switch (action.type) {
-        case CLEAR_TOOLBAR_TIMEOUT:
+        case CLEAR_TOOLBOX_TIMEOUT:
             return {
                 ...state,
-                timeoutId: undefined
+                timeoutID: undefined
             };
 
-        case SET_ALWAYS_VISIBLE_TOOLBAR:
+        case SET_TOOLBOX_ALWAYS_VISIBLE:
             return {
                 ...state,
                 alwaysVisible: action.alwaysVisible
@@ -131,20 +137,20 @@ ReducerRegistry.register(
                 hovered: action.hovered
             };
 
-        case SET_TOOLBAR_TIMEOUT:
+        case SET_TOOLBOX_TIMEOUT:
             return {
                 ...state,
-                toolbarTimeout: action.toolbarTimeout,
+                timeoutID: action.timeoutID,
-                timeoutId: action.timeoutId
+                timeoutMS: action.timeoutMS
             };
 
-        case SET_TOOLBAR_TIMEOUT_NUMBER:
+        case SET_TOOLBOX_TIMEOUT_MS:
             return {
                 ...state,
-                toolbarTimeout: action.toolbarTimeout
+                timeoutMS: action.timeoutMS
             };
 
-        case SET_TOOLBAR_VISIBLE:
+        case SET_TOOLBOX_VISIBLE:
             return {
                 ...state,
                 visible: action.visible
@@ -161,8 +167,8 @@ ReducerRegistry.register(
  * @param {Object} action - Dispatched action.
  * @param {Object} action.button - Object describing toolbar button.
  * @param {Object} action.buttonName - The name of the button.
- * @returns {Object}
  * @private
+ * @returns {Object}
  */
 function _setButton(state, { buttonName, button }): Object {
     const {