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);
-});
diff --git a/react/features/toolbox/actionTypes.js b/react/features/toolbox/actionTypes.js
new file mode 100644
index 000000000..54af2bed2
--- /dev/null
+++ b/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');
diff --git a/react/features/toolbar/actions.native.js b/react/features/toolbox/actions.native.js
similarity index 68%
rename from react/features/toolbar/actions.native.js
rename to react/features/toolbox/actions.native.js
index 1d605cec1..828d3ff2c 100644
--- a/react/features/toolbar/actions.native.js
+++ b/react/features/toolbox/actions.native.js
@@ -3,15 +3,15 @@
import type { Dispatch } from 'redux-thunk';
import {
- CLEAR_TOOLBAR_TIMEOUT,
- SET_ALWAYS_VISIBLE_TOOLBAR,
+ CLEAR_TOOLBOX_TIMEOUT,
+ SET_TOOLBOX_ALWAYS_VISIBLE,
SET_SUBJECT,
SET_SUBJECT_SLIDE_IN,
SET_TOOLBAR_BUTTON,
SET_TOOLBAR_HOVERED,
- SET_TOOLBAR_TIMEOUT,
- SET_TOOLBAR_TIMEOUT_NUMBER,
- SET_TOOLBAR_VISIBLE
+ SET_TOOLBOX_TIMEOUT,
+ SET_TOOLBOX_TIMEOUT_MS,
+ 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,
- * alwaysVisible: bool
+ * type: SET_TOOLBOX_ALWAYS_VISIBLE,
+ * 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
- * or disabled.
+ * @param {boolean} enabled - True if the button should be enabled; otherwise,
+ * 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.
- * @returns {Object}
+ * @param {string} subject - Conference subject string.
+ * @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,
- * handler: Function,
- * toolbarTimeout: number
+ * type: SET_TOOLBOX_TIMEOUT,
+ * handler: Function,
+ * timeoutMS: number
* }}
*/
-export function setToolbarTimeout(handler: Function,
- toolbarTimeout: number): Object {
+export function setToolboxTimeout(handler: Function, timeoutMS: number)
+ : 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,
- * toolbarTimeout: number
+ * type: SET_TOOLBOX_TIMEOUT_MS,
+ * timeoutMS: number
* }}
*/
-export function setToolbarTimeoutNumber(toolbarTimeout: number): Object {
+export function setToolboxTimeoutMS(timeoutMS: number): Object {
return {
- type: SET_TOOLBAR_TIMEOUT_NUMBER,
- toolbarTimeout
+ type: SET_TOOLBOX_TIMEOUT_MS,
+ 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
- * or disabled.
+ * @param {boolean} enabled - True if the button should be enabled; otherwise,
+ * 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);
diff --git a/react/features/toolbar/actions.web.js b/react/features/toolbox/actions.web.js
similarity index 77%
rename from react/features/toolbar/actions.web.js
rename to react/features/toolbox/actions.web.js
index a137c74eb..f065074da 100644
--- a/react/features/toolbar/actions.web.js
+++ b/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,
- setAlwaysVisibleToolbar,
+ clearToolboxTimeout,
setSubjectSlideIn,
setToolbarButton,
- setToolbarTimeout,
- setToolbarTimeoutNumber,
- setToolbarVisible,
+ setToolboxTimeout,
+ setToolboxTimeoutMS,
+ 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.
- visible || dispatch(showToolbar());
+ // First make sure the toolbox is shown.
+ visible || dispatch(showToolbox());
- dispatch(clearToolbarTimeout());
+ dispatch(clearToolboxTimeout());
} else if (visible) {
dispatch(
- setToolbarTimeout(
- () => dispatch(hideToolbar()),
- toolbarTimeout));
+ setToolboxTimeout(
+ () => dispatch(hideToolbox()),
+ 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
- } = state['features/toolbar'];
+ timeoutMS
+ } = state['features/toolbox'];
if (alwaysVisible) {
return;
}
- dispatch(clearToolbarTimeout());
+ dispatch(clearToolboxTimeout());
if (!force
&& (hovered
|| APP.UI.isRingOverlayVisible()
|| SideContainerToggler.isVisible())) {
dispatch(
- setToolbarTimeout(
- () => dispatch(hideToolbar()),
- toolbarTimeout));
+ setToolboxTimeout(
+ () => dispatch(hideToolbox()),
+ 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 finalTimeout = timeout || toolbarTimeout;
+ const { timeoutMS, visible } = state['features/toolbox'];
if (!visible) {
- dispatch(setToolbarVisible(true));
+ dispatch(setToolboxVisible(true));
dispatch(setSubjectSlideIn(true));
dispatch(
- setToolbarTimeout(() => dispatch(hideToolbar()), finalTimeout));
- dispatch(setToolbarTimeoutNumber(interfaceConfig.TOOLBAR_TIMEOUT));
+ setToolboxTimeout(
+ () => 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);
diff --git a/react/features/toolbar/components/AbstractToolbarButton.js b/react/features/toolbox/components/AbstractToolbarButton.js
similarity index 100%
rename from react/features/toolbar/components/AbstractToolbarButton.js
rename to react/features/toolbox/components/AbstractToolbarButton.js
diff --git a/react/features/toolbar/components/Notice.js b/react/features/toolbox/components/Notice.js
similarity index 100%
rename from react/features/toolbar/components/Notice.js
rename to react/features/toolbox/components/Notice.js
diff --git a/react/features/toolbar/components/PrimaryToolbar.web.js b/react/features/toolbox/components/PrimaryToolbar.web.js
similarity index 96%
rename from react/features/toolbar/components/PrimaryToolbar.web.js
rename to react/features/toolbox/components/PrimaryToolbar.web.js
index 2058c334a..51dbbded1 100644
--- a/react/features/toolbar/components/PrimaryToolbar.web.js
+++ b/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 (
-
-
+
);
}
}
@@ -239,7 +238,7 @@ function _mapStateToProps(state: Object): Object {
const {
secondaryToolbarButtons,
visible
- } = state['features/toolbar'];
+ } = state['features/toolbox'];
return {
/**
diff --git a/react/features/toolbar/components/BaseToolbar.web.js b/react/features/toolbox/components/Toolbar.web.js
similarity index 94%
rename from react/features/toolbar/components/BaseToolbar.web.js
rename to react/features/toolbox/components/Toolbar.web.js
index ebb356738..7f7bf5b38 100644
--- a/react/features/toolbar/components/BaseToolbar.web.js
+++ b/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);
diff --git a/react/features/toolbar/components/ToolbarButton.native.js b/react/features/toolbox/components/ToolbarButton.native.js
similarity index 100%
rename from react/features/toolbar/components/ToolbarButton.native.js
rename to react/features/toolbox/components/ToolbarButton.native.js
diff --git a/react/features/toolbar/components/ToolbarButton.web.js b/react/features/toolbox/components/ToolbarButton.web.js
similarity index 100%
rename from react/features/toolbar/components/ToolbarButton.web.js
rename to react/features/toolbox/components/ToolbarButton.web.js
diff --git a/react/features/toolbar/components/Toolbar.native.js b/react/features/toolbox/components/Toolbox.native.js
similarity index 97%
rename from react/features/toolbar/components/Toolbar.native.js
rename to react/features/toolbox/components/Toolbox.native.js
index 0cb72a357..9c43dfd9b 100644
--- a/react/features/toolbar/components/Toolbar.native.js
+++ b/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);
diff --git a/react/features/toolbar/components/Toolbar.web.js b/react/features/toolbox/components/Toolbox.web.js
similarity index 76%
rename from react/features/toolbar/components/Toolbar.web.js
rename to react/features/toolbox/components/Toolbox.web.js
index 12865357a..893df14f5 100644
--- a/react/features/toolbar/components/Toolbar.web.js
+++ b/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
- // initialized.
- if (this.props._timeoutId === null) {
+ // The toolbars should not be shown until timeoutID is initialized.
+ 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() {
- dispatch(resetAlwaysVisibleToolbar());
+ _setToolboxAlwaysVisible() {
+ 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
- } = state['features/toolbar'];
+ timeoutID
+ } = 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);
diff --git a/react/features/toolbox/components/index.js b/react/features/toolbox/components/index.js
new file mode 100644
index 000000000..70fb4807a
--- /dev/null
+++ b/react/features/toolbox/components/index.js
@@ -0,0 +1 @@
+export { default as Toolbox } from './Toolbox';
diff --git a/react/features/toolbar/components/styles.js b/react/features/toolbox/components/styles.js
similarity index 94%
rename from react/features/toolbar/components/styles.js
rename to react/features/toolbox/components/styles.js
index 3c4b2778a..862c6a0a9 100644
--- a/react/features/toolbar/components/styles.js
+++ b/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,
diff --git a/react/features/toolbar/defaultToolbarButtons.js b/react/features/toolbox/defaultToolbarButtons.js
similarity index 90%
rename from react/features/toolbar/defaultToolbarButtons.js
rename to react/features/toolbox/defaultToolbarButtons.js
index 161099f0b..35665a0a2 100644
--- a/react/features/toolbar/defaultToolbarButtons.js
+++ b/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
- * initialization in Recording module.
+ * The descriptor of the recording toolbar button. Requires additional
+ * 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' ],
diff --git a/react/features/toolbar/functions.js b/react/features/toolbox/functions.js
similarity index 88%
rename from react/features/toolbar/functions.js
rename to react/features/toolbox/functions.js
index f39646284..cb05158c3 100644
--- a/react/features/toolbar/functions.js
+++ b/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(
- (acc, buttonName) => {
- const button = defaultToolbarButtons[buttonName];
+ toolbarButtons
+ = interfaceConfig.TOOLBAR_BUTTONS.reduce(
+ (acc, buttonName) => {
+ const button = defaultToolbarButtons[buttonName];
- if (button) {
- const place = _getToolbarButtonPlace(buttonName);
+ if (button) {
+ const place = _getToolbarButtonPlace(buttonName);
- button.buttonName = buttonName;
- acc[place].set(buttonName, button);
- }
+ button.buttonName = buttonName;
+ acc[place].set(buttonName, button);
+ }
- return acc;
- }, toolbarButtons);
+ return acc;
+ },
+ toolbarButtons);
}
return toolbarButtons;
}
/**
- * Get place for toolbar button.
- * Now it can be in main toolbar or in extended (left) toolbar.
+ * Get place for toolbar button. Now it can be in the primary Toolbar or in the
+ * secondary Toolbar.
*
* @param {string} btn - Button name.
* @private
diff --git a/react/features/toolbar/index.js b/react/features/toolbox/index.js
similarity index 100%
rename from react/features/toolbar/index.js
rename to react/features/toolbox/index.js
diff --git a/react/features/toolbox/middleware.js b/react/features/toolbox/middleware.js
new file mode 100644
index 000000000..794bea9fa
--- /dev/null
+++ b/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);
+});
diff --git a/react/features/toolbar/reducer.js b/react/features/toolbox/reducer.js
similarity index 66%
rename from react/features/toolbar/reducer.js
rename to react/features/toolbox/reducer.js
index bec9b037b..415e11da0 100644
--- a/react/features/toolbar/reducer.js
+++ b/react/features/toolbox/reducer.js
@@ -3,90 +3,96 @@
import { ReducerRegistry } from '../base/redux';
import {
- CLEAR_TOOLBAR_TIMEOUT,
- SET_ALWAYS_VISIBLE_TOOLBAR,
+ CLEAR_TOOLBOX_TIMEOUT,
+ SET_TOOLBOX_ALWAYS_VISIBLE,
SET_SUBJECT,
SET_SUBJECT_SLIDE_IN,
SET_TOOLBAR_BUTTON,
SET_TOOLBAR_HOVERED,
- SET_TOOLBAR_TIMEOUT,
- SET_TOOLBAR_TIMEOUT_NUMBER,
- SET_TOOLBAR_VISIBLE
+ SET_TOOLBOX_TIMEOUT,
+ SET_TOOLBOX_TIMEOUT_MS,
+ 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.
- let toolbarTimeout = 5000;
+ // Default toolbox timeout for mobile app.
+ 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 {