From 1e2d88cd5d0410f484b16890cf038980e90fef83 Mon Sep 17 00:00:00 2001 From: Lyubo Marinov Date: Sat, 1 Apr 2017 00:52:40 -0500 Subject: [PATCH] React Toolbox --- conference.js | 2 +- modules/UI/UI.js | 20 ++-- modules/UI/recording/Recording.js | 6 +- modules/UI/shared_video/SharedVideo.js | 8 +- modules/UI/side_pannels/chat/Chat.js | 10 +- .../components/Conference.native.js | 85 +++++++------- .../conference/components/Conference.web.js | 4 +- .../film-strip/components/FilmStrip.js | 4 +- react/features/toolbar/actionTypes.js | 98 ---------------- react/features/toolbar/components/index.js | 1 - react/features/toolbar/middleware.js | 39 ------- react/features/toolbox/actionTypes.js | 95 +++++++++++++++ .../{toolbar => toolbox}/actions.native.js | 109 +++++++++--------- .../{toolbar => toolbox}/actions.web.js | 83 ++++++------- .../components/AbstractToolbarButton.js | 0 .../{toolbar => toolbox}/components/Notice.js | 0 .../components/PrimaryToolbar.web.js | 12 +- .../components/SecondaryToolbar.web.js | 11 +- .../components/Toolbar.web.js} | 11 +- .../components/ToolbarButton.native.js | 0 .../components/ToolbarButton.web.js | 0 .../components/Toolbox.native.js} | 10 +- .../components/Toolbox.web.js} | 53 ++++----- react/features/toolbox/components/index.js | 1 + .../{toolbar => toolbox}/components/styles.js | 5 +- .../defaultToolbarButtons.js | 40 +++---- .../{toolbar => toolbox}/functions.js | 42 +++---- react/features/{toolbar => toolbox}/index.js | 0 react/features/toolbox/middleware.js | 39 +++++++ .../features/{toolbar => toolbox}/reducer.js | 82 +++++++------ 30 files changed, 431 insertions(+), 439 deletions(-) delete mode 100644 react/features/toolbar/actionTypes.js delete mode 100644 react/features/toolbar/components/index.js delete mode 100644 react/features/toolbar/middleware.js create mode 100644 react/features/toolbox/actionTypes.js rename react/features/{toolbar => toolbox}/actions.native.js (68%) rename react/features/{toolbar => toolbox}/actions.web.js (77%) rename react/features/{toolbar => toolbox}/components/AbstractToolbarButton.js (100%) rename react/features/{toolbar => toolbox}/components/Notice.js (100%) rename react/features/{toolbar => toolbox}/components/PrimaryToolbar.web.js (96%) rename react/features/{toolbar => toolbox}/components/SecondaryToolbar.web.js (97%) rename react/features/{toolbar/components/BaseToolbar.web.js => toolbox/components/Toolbar.web.js} (94%) rename react/features/{toolbar => toolbox}/components/ToolbarButton.native.js (100%) rename react/features/{toolbar => toolbox}/components/ToolbarButton.web.js (100%) rename react/features/{toolbar/components/Toolbar.native.js => toolbox/components/Toolbox.native.js} (97%) rename react/features/{toolbar/components/Toolbar.web.js => toolbox/components/Toolbox.web.js} (76%) create mode 100644 react/features/toolbox/components/index.js rename react/features/{toolbar => toolbox}/components/styles.js (94%) rename react/features/{toolbar => toolbox}/defaultToolbarButtons.js (90%) rename react/features/{toolbar => toolbox}/functions.js (88%) rename react/features/{toolbar => toolbox}/index.js (100%) create mode 100644 react/features/toolbox/middleware.js rename react/features/{toolbar => toolbox}/reducer.js (66%) diff --git a/conference.js b/conference.js index 2ecdb1bdf..8b025b474 100644 --- a/conference.js +++ b/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, diff --git a/modules/UI/UI.js b/modules/UI/UI.js index 3a13d2e56..bc4cb47b1 100644 --- a/modules/UI/UI.js +++ b/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 -} from '../../react/features/toolbar'; + showToolbox +} 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 -UI.showToolbar = function (timeout) { - APP.store.dispatch(showToolbar(timeout)); -}; +// Used by torture. +UI.showToolbar = timeout => APP.store.dispatch(showToolbox(timeout)); -//Used by torture -UI.dockToolbar = function (isDock) { - APP.store.dispatch(dockToolbar(isDock)); -}; +// Used by torture. +UI.dockToolbar = dock => APP.store.dispatch(dockToolbox(dock)); /** * Updates the avatar for participant. diff --git a/modules/UI/recording/Recording.js b/modules/UI/recording/Recording.js index bc5b706da..952810d4d 100644 --- a/modules/UI/recording/Recording.js +++ b/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>
- ` + streamIdHelp + `
`, @@ -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); } diff --git a/modules/UI/shared_video/SharedVideo.js b/modules/UI/shared_video/SharedVideo.js index be52957b0..074a20996 100644 --- a/modules/UI/shared_video/SharedVideo.js +++ b/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 () { diff --git a/modules/UI/side_pannels/chat/Chat.js b/modules/UI/side_pannels/chat/Chat.js index 872f8eb34..7126baf83 100644 --- a/modules/UI/side_pannels/chat/Chat.js +++ b/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 = `
- -
@@ -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 diff --git a/react/features/conference/components/Conference.native.js b/react/features/conference/components/Conference.native.js index 89ff89979..9fe5bf8b2 100644 --- a/react/features/conference/components/Conference.native.js +++ b/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 - * show/hide the toolbar. + * The handler which dispatches the (redux) action setToolboxVisible to + * 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 { - + @@ -141,46 +141,45 @@ class Conference extends Component { } /** - * Clears {@link #_toolbarTimeout} if any. + * Clears {@link #_toolboxTimeout} if any. * * @private * @returns {void} */ - _clearToolbarTimeout() { - if (this._toolbarTimeout) { - clearTimeout(this._toolbarTimeout); - this._toolbarTimeout = undefined; + _clearToolboxTimeout() { + if (this._toolboxTimeout) { + clearTimeout(this._toolboxTimeout); + this._toolboxTimeout = undefined; } } /** - * Changes the value of the toolbarVisible state, thus allowing us to - * 'switch' between toolbar and filmstrip views and change the visibility of - * the above. + * Changes the value of the toolboxVisible state, thus allowing us to switch + * between Toolbox and FilmStrip and change their visibility. * * @private * @returns {void} */ _onClick() { - const toolbarVisible = !this.props._toolbarVisible; + const toolboxVisible = !this.props._toolboxVisible; - this.props._setToolbarVisible(toolbarVisible); - this._setToolbarTimeout(toolbarVisible); + this.props._setToolboxVisible(toolboxVisible); + this._setToolboxTimeout(toolboxVisible); } /** - * Triggers the default toolbar timeout. + * Triggers the default Toolbox timeout. * - * @param {boolean} toolbarVisible - Indicates if the toolbar is currently - * visible. + * @param {boolean} toolboxVisible - Indicates whether the Toolbox is + * currently visible. * @private * @returns {void} */ - _setToolbarTimeout(toolbarVisible) { - this._clearToolbarTimeout(); - if (toolbarVisible) { - this._toolbarTimeout - = setTimeout(this._onClick, _TOOLBAR_TIMEOUT_MS); + _setToolboxTimeout(toolboxVisible) { + this._clearToolboxTimeout(); + if (toolboxVisible) { + this._toolboxTimeout + = 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 - * visible. + * @param {boolean} visible - True to show the Toolbox or false to hide + * it. * @returns {Object} Dispatched action. * @private */ - _setToolbarVisible(isVisible: boolean) { - return dispatch(setToolbarVisible(isVisible)); + _setToolboxVisible(visible: boolean) { + 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 }; } diff --git a/react/features/conference/components/Conference.web.js b/react/features/conference/components/Conference.web.js index 35150a2a5..bba582c80 100644 --- a/react/features/conference/components/Conference.web.js +++ b/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 (
- +
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 {