React Toolbox

This commit is contained in:
Lyubo Marinov 2017-04-01 00:52:40 -05:00
parent da4425b5c0
commit 1e2d88cd5d
30 changed files with 431 additions and 439 deletions

View File

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

View File

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

View File

@ -21,7 +21,7 @@ import UIUtil from '../util/UIUtil';
import VideoLayout from '../videolayout/VideoLayout'; import VideoLayout from '../videolayout/VideoLayout';
import Feedback from '../feedback/Feedback.js'; import Feedback from '../feedback/Feedback.js';
import { hideToolbar } from '../../../react/features/toolbar'; import { hideToolbox } from '../../../react/features/toolbox';
/** /**
* The dialog for user input. * The dialog for user input.
@ -264,7 +264,7 @@ var Recording = {
APP.conference.getMyUserId(), false); APP.conference.getMyUserId(), false);
VideoLayout.setLocalVideoVisible(false); VideoLayout.setLocalVideoVisible(false);
Feedback.enableFeedback(false); Feedback.enableFeedback(false);
APP.store.dispatch(hideToolbar()); APP.store.dispatch(hideToolbox());
APP.UI.messageHandler.enableNotifications(false); APP.UI.messageHandler.enableNotifications(false);
APP.UI.messageHandler.enablePopups(false); APP.UI.messageHandler.enablePopups(false);
} }

View File

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

View File

@ -9,7 +9,7 @@ import UIEvents from '../../../../service/UI/UIEvents';
import { smileys } from './smileys'; import { smileys } from './smileys';
import { dockToolbar, setSubject } from '../../../../react/features/toolbar'; import { dockToolbox, setSubject } from '../../../../react/features/toolbox';
let unreadMessages = 0; let unreadMessages = 0;
const sidePanelsContainerId = 'sideToolbarContainer'; const sidePanelsContainerId = 'sideToolbarContainer';
@ -60,7 +60,7 @@ function updateVisualNotification() {
if (unreadMessages) { if (unreadMessages) {
unreadMsgElement.innerHTML = unreadMessages.toString(); unreadMsgElement.innerHTML = unreadMessages.toString();
APP.store.dispatch(dockToolbar(true)); APP.store.dispatch(dockToolbox(true));
const chatButtonElement const chatButtonElement
= document.getElementById('toolbar_button_chat'); = 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 // Undock the toolbar when the chat is shown and if we're in a
// video mode. // video mode.
if (VideoLayout.isLargeVideoVisible()) { if (VideoLayout.isLargeVideoVisible()) {
APP.store.dispatch(dockToolbar(false)); APP.store.dispatch(dockToolbox(false));
} }
// if we are in conversation mode focus on the text input // if we are in conversation mode focus on the text input

View File

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

View File

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

View File

@ -132,7 +132,7 @@ function _mapStateToProps(state) {
* @private * @private
* @type {boolean} * @type {boolean}
*/ */
_visible: !state['features/toolbar'].visible _visible: !state['features/toolbox'].visible
}; };
} }

View File

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

View File

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

View File

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

View File

@ -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');

View File

@ -3,15 +3,15 @@
import type { Dispatch } from 'redux-thunk'; import type { Dispatch } from 'redux-thunk';
import { import {
CLEAR_TOOLBAR_TIMEOUT, CLEAR_TOOLBOX_TIMEOUT,
SET_ALWAYS_VISIBLE_TOOLBAR, SET_TOOLBOX_ALWAYS_VISIBLE,
SET_SUBJECT, SET_SUBJECT,
SET_SUBJECT_SLIDE_IN, SET_SUBJECT_SLIDE_IN,
SET_TOOLBAR_BUTTON, SET_TOOLBAR_BUTTON,
SET_TOOLBAR_HOVERED, SET_TOOLBAR_HOVERED,
SET_TOOLBAR_TIMEOUT, SET_TOOLBOX_TIMEOUT,
SET_TOOLBAR_TIMEOUT_NUMBER, SET_TOOLBOX_TIMEOUT_MS,
SET_TOOLBAR_VISIBLE SET_TOOLBOX_VISIBLE
} from './actionTypes'; } from './actionTypes';
/** /**
@ -23,7 +23,7 @@ import {
export function changeLocalRaiseHand(handRaised: boolean): Function { export function changeLocalRaiseHand(handRaised: boolean): Function {
return (dispatch: Dispatch<*>, getState: Function) => { return (dispatch: Dispatch<*>, getState: Function) => {
const state = getState(); const state = getState();
const { secondaryToolbarButtons } = state['features/toolbar']; const { secondaryToolbarButtons } = state['features/toolbox'];
const buttonName = 'raisehand'; const buttonName = 'raisehand';
const button = secondaryToolbarButtons.get(buttonName); 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 {{ * @returns {{
* type: CLEAR_TOOLBAR_TIMEOUT * type: CLEAR_TOOLBOX_TIMEOUT
* }} * }}
*/ */
export function clearToolbarTimeout(): Object { export function clearToolboxTimeout(): Object {
return { return {
type: CLEAR_TOOLBAR_TIMEOUT type: CLEAR_TOOLBOX_TIMEOUT
}; };
} }
@ -51,13 +51,13 @@ export function clearToolbarTimeout(): Object {
* *
* @param {boolean} alwaysVisible - Value to be set in redux store. * @param {boolean} alwaysVisible - Value to be set in redux store.
* @returns {{ * @returns {{
* type: SET_ALWAYS_VISIBLE_TOOLBAR, * type: SET_TOOLBOX_ALWAYS_VISIBLE,
* alwaysVisible: bool * alwaysVisible: boolean
* }} * }}
*/ */
export function setAlwaysVisibleToolbar(alwaysVisible: boolean): Object { export function setToolboxAlwaysVisible(alwaysVisible: boolean): Object {
return { return {
type: SET_ALWAYS_VISIBLE_TOOLBAR, type: SET_TOOLBOX_ALWAYS_VISIBLE,
alwaysVisible alwaysVisible
}; };
} }
@ -65,8 +65,8 @@ export function setAlwaysVisibleToolbar(alwaysVisible: boolean): Object {
/** /**
* Enables/disables audio toolbar button. * Enables/disables audio toolbar button.
* *
* @param {boolean} enabled - Indicates if the button should be enabled * @param {boolean} enabled - True if the button should be enabled; otherwise,
* or disabled. * false.
* @returns {Function} * @returns {Function}
*/ */
export function setAudioIconEnabled(enabled: boolean = false): Function { export function setAudioIconEnabled(enabled: boolean = false): Function {
@ -89,7 +89,7 @@ export function setAudioIconEnabled(enabled: boolean = false): Function {
* @param {string} subject - Conference subject string. * @param {string} subject - Conference subject string.
* @returns {Object} * @returns {Object}
*/ */
export function setSubject(subject: string) { export function setSubject(subject: string): Object {
return { return {
type: SET_SUBJECT, type: SET_SUBJECT,
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 {{ * @returns {{
* type: SET_SUBJECT_SLIDE_IN, * type: SET_SUBJECT_SLIDE_IN,
* subjectSlideIn: boolean * subjectSlideIn: boolean
@ -119,15 +120,15 @@ export function setSubjectSlideIn(subjectSlideIn: boolean): Object {
* @param {Object} button - Button object. * @param {Object} button - Button object.
* @returns {{ * @returns {{
* type: SET_TOOLBAR_BUTTON, * type: SET_TOOLBAR_BUTTON,
* buttonName: string, * button: Object,
* button: Object * buttonName: string
* }} * }}
*/ */
export function setToolbarButton(buttonName: string, button: Object): Object { export function setToolbarButton(buttonName: string, button: Object): Object {
return { return {
type: SET_TOOLBAR_BUTTON, type: SET_TOOLBAR_BUTTON,
buttonName, button,
button buttonName
}; };
} }
@ -147,54 +148,58 @@ 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. * Dispatches an action which sets new timeout and clears the previous one.
* *
* @param {Function} handler - Function to be invoked after the timeout. * @param {Function} handler - Function to be invoked after the timeout.
* @param {number} toolbarTimeout - Delay. * @param {number} timeoutMS - Delay.
* @returns {{ * @returns {{
* type: SET_TOOLBAR_TIMEOUT, * type: SET_TOOLBOX_TIMEOUT,
* handler: Function, * handler: Function,
* toolbarTimeout: number * timeoutMS: number
* }} * }}
*/ */
export function setToolbarTimeout(handler: Function, export function setToolboxTimeout(handler: Function, timeoutMS: number)
toolbarTimeout: number): Object { : Object {
return { return {
type: SET_TOOLBAR_TIMEOUT, type: SET_TOOLBOX_TIMEOUT,
handler, 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 {{ * @returns {{
* type: SET_TOOLBAR_TIMEOUT_NUMBER, * type: SET_TOOLBOX_TIMEOUT_MS,
* toolbarTimeout: number * timeoutMS: number
* }} * }}
*/ */
export function setToolbarTimeoutNumber(toolbarTimeout: number): Object { export function setToolboxTimeoutMS(timeoutMS: number): Object {
return { return {
type: SET_TOOLBAR_TIMEOUT_NUMBER, type: SET_TOOLBOX_TIMEOUT_MS,
toolbarTimeout timeoutMS
}; };
} }
/** /**
* Shows/hides the toolbar. * Shows/hides the toolbox.
* *
* @param {boolean} visible - True to show the toolbar or false to hide it. * @param {boolean} visible - True to show the toolbox or false to hide it.
* @returns {{ * @returns {{
* type: SET_TOOLBAR_VISIBLE, * type: SET_TOOLBOX_VISIBLE,
* visible: boolean * visible: boolean
* }} * }}
*/ */
export function setToolbarVisible(visible: boolean): Object { export function setToolboxVisible(visible: boolean): Object {
return { return {
type: SET_TOOLBAR_VISIBLE, type: SET_TOOLBOX_VISIBLE,
visible visible
}; };
} }
@ -202,8 +207,8 @@ export function setToolbarVisible(visible: boolean): Object {
/** /**
* Enables/disables audio toolbar button. * Enables/disables audio toolbar button.
* *
* @param {boolean} enabled - Indicates if the button should be enabled * @param {boolean} enabled - True if the button should be enabled; otherwise,
* or disabled. * false.
* @returns {Function} * @returns {Function}
*/ */
export function setVideoIconEnabled(enabled: boolean = false): Function { export function setVideoIconEnabled(enabled: boolean = false): Function {
@ -243,7 +248,7 @@ export function showEtherpadButton(): Function {
export function toggleFullScreen(isFullScreen: boolean): Function { export function toggleFullScreen(isFullScreen: boolean): Function {
return (dispatch: Dispatch<*>, getState: Function) => { return (dispatch: Dispatch<*>, getState: Function) => {
const state = getState(); const state = getState();
const { primaryToolbarButtons } = state['features/toolbar']; const { primaryToolbarButtons } = state['features/toolbox'];
const buttonName = 'fullscreen'; const buttonName = 'fullscreen';
const button = primaryToolbarButtons.get(buttonName); const button = primaryToolbarButtons.get(buttonName);
@ -265,7 +270,7 @@ export function toggleToolbarButton(buttonName: string): Function {
const { const {
primaryToolbarButtons, primaryToolbarButtons,
secondaryToolbarButtons secondaryToolbarButtons
} = state['features/toolbar']; } = state['features/toolbox'];
const button const button
= primaryToolbarButtons.get(buttonName) = primaryToolbarButtons.get(buttonName)
|| secondaryToolbarButtons.get(buttonName); || secondaryToolbarButtons.get(buttonName);

View File

@ -7,13 +7,12 @@ import UIEvents from '../../../service/UI/UIEvents';
import UIUtil from '../../../modules/UI/util/UIUtil'; import UIUtil from '../../../modules/UI/util/UIUtil';
import { import {
clearToolbarTimeout, clearToolboxTimeout,
setAlwaysVisibleToolbar,
setSubjectSlideIn, setSubjectSlideIn,
setToolbarButton, setToolbarButton,
setToolbarTimeout, setToolboxTimeout,
setToolbarTimeoutNumber, setToolboxTimeoutMS,
setToolbarVisible, setToolboxVisible,
toggleToolbarButton toggleToolbarButton
} from './actions.native'; } 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. * @param {boolean} dock - True if dock, false otherwise.
* @returns {Function} * @returns {Function}
*/ */
export function dockToolbar(dock: boolean): Function { export function dockToolbox(dock: boolean): Function {
return (dispatch: Dispatch<*>, getState: Function) => { return (dispatch: Dispatch<*>, getState: Function) => {
if (interfaceConfig.filmStripOnly) { if (interfaceConfig.filmStripOnly) {
return; return;
} }
const state = getState(); const state = getState();
const { toolbarTimeout, visible } = state['features/toolbar']; const { timeoutMS, visible } = state['features/toolbox'];
if (dock) { if (dock) {
// First make sure the toolbar is shown. // First make sure the toolbox is shown.
visible || dispatch(showToolbar()); visible || dispatch(showToolbox());
dispatch(clearToolbarTimeout()); dispatch(clearToolboxTimeout());
} else if (visible) { } else if (visible) {
dispatch( dispatch(
setToolbarTimeout( setToolboxTimeout(
() => dispatch(hideToolbar()), () => dispatch(hideToolbox()),
toolbarTimeout)); timeoutMS));
} else { } 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. * caring about the extended toolbar side panels.
* @returns {Function} * @returns {Function}
*/ */
export function hideToolbar(force: boolean = false): Function { export function hideToolbox(force: boolean = false): Function {
return (dispatch: Dispatch<*>, getState: Function) => { return (dispatch: Dispatch<*>, getState: Function) => {
const state = getState(); const state = getState();
const { const {
alwaysVisible, alwaysVisible,
hovered, hovered,
toolbarTimeout timeoutMS
} = state['features/toolbar']; } = state['features/toolbox'];
if (alwaysVisible) { if (alwaysVisible) {
return; return;
} }
dispatch(clearToolbarTimeout()); dispatch(clearToolboxTimeout());
if (!force if (!force
&& (hovered && (hovered
|| APP.UI.isRingOverlayVisible() || APP.UI.isRingOverlayVisible()
|| SideContainerToggler.isVisible())) { || SideContainerToggler.isVisible())) {
dispatch( dispatch(
setToolbarTimeout( setToolboxTimeout(
() => dispatch(hideToolbar()), () => dispatch(hideToolbox()),
toolbarTimeout)); timeoutMS));
} else { } else {
dispatch(setToolbarVisible(false)); dispatch(setToolboxVisible(false));
dispatch(setSubjectSlideIn(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. * 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} * @returns {Function}
*/ */
export function showToolbar(timeout: number = 0): Object { export function showToolbox(timeout: number = 0): Object {
return (dispatch: Dispatch<*>, getState: Function) => { return (dispatch: Dispatch<*>, getState: Function) => {
if (interfaceConfig.filmStripOnly) { if (interfaceConfig.filmStripOnly) {
return; return;
} }
const state = getState(); const state = getState();
const { toolbarTimeout, visible } = state['features/toolbar']; const { timeoutMS, visible } = state['features/toolbox'];
const finalTimeout = timeout || toolbarTimeout;
if (!visible) { if (!visible) {
dispatch(setToolbarVisible(true)); dispatch(setToolboxVisible(true));
dispatch(setSubjectSlideIn(true)); dispatch(setSubjectSlideIn(true));
dispatch( dispatch(
setToolbarTimeout(() => dispatch(hideToolbar()), finalTimeout)); setToolboxTimeout(
dispatch(setToolbarTimeoutNumber(interfaceConfig.TOOLBAR_TIMEOUT)); () => dispatch(hideToolbox()),
timeout || timeoutMS));
dispatch(setToolboxTimeoutMS(interfaceConfig.TOOLBAR_TIMEOUT));
} }
}; };
} }
@ -269,12 +256,12 @@ export function showToolbar(timeout: number = 0): Object {
* Event handler for side toolbar container toggled event. * Event handler for side toolbar container toggled event.
* *
* @param {string} containerId - ID of the container. * @param {string} containerId - ID of the container.
* @returns {void} * @returns {Function}
*/ */
export function toggleSideToolbarContainer(containerId: string): Function { export function toggleSideToolbarContainer(containerId: string): Function {
return (dispatch: Dispatch, getState: Function) => { return (dispatch: Dispatch, getState: Function) => {
const state = getState(); const state = getState();
const { secondaryToolbarButtons } = state['features/toolbar']; const { secondaryToolbarButtons } = state['features/toolbox'];
for (const key of secondaryToolbarButtons.keys()) { for (const key of secondaryToolbarButtons.keys()) {
const isButtonEnabled = UIUtil.isButtonEnabled(key); const isButtonEnabled = UIUtil.isButtonEnabled(key);

View File

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

View File

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

View File

@ -13,13 +13,14 @@ declare var config: Object;
declare var interfaceConfig: 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 * @extends Component
*/ */
class BaseToolbar extends Component { class Toolbar extends Component {
_renderToolbarButton: Function; _renderToolbarButton: Function;
/** /**
@ -197,4 +198,4 @@ function _mapDispatchToProps(dispatch: Function): Object {
}; };
} }
export default connect(null, _mapDispatchToProps)(BaseToolbar); export default connect(null, _mapDispatchToProps)(Toolbar);

View File

@ -15,11 +15,11 @@ import { styles } from './styles';
import ToolbarButton from './ToolbarButton'; 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 * @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 * TODO As soon as we have common font sets for web and native, this will no
* longer be required. * longer be required.
*/ */
Object.assign(Toolbar.prototype, { Object.assign(Toolbox.prototype, {
audioIcon: 'microphone', audioIcon: 'microphone',
audioMutedIcon: 'mic-disabled', audioMutedIcon: 'mic-disabled',
videoIcon: 'camera', videoIcon: 'camera',
@ -293,4 +293,4 @@ function _mapStateToProps(state) {
}; };
} }
export default connect(_mapStateToProps, _mapDispatchToProps)(Toolbar); export default connect(_mapStateToProps, _mapDispatchToProps)(Toolbox);

View File

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

View File

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

View File

@ -64,7 +64,7 @@ const toolbar = {
}; };
/** /**
* The (conference) toolbar related styles. * The (conference) Toolbox/Toolbar related styles.
*/ */
export const styles = createStyleSheet({ 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: { toolbarContainer: {
bottom: 0, bottom: 0,

View File

@ -37,11 +37,11 @@ function _showSIPNumberInput() {
} }
/** /**
* All toolbar buttons' descriptions. * All toolbar buttons' descriptors.
*/ */
export default { export default {
/** /**
* Object representing camera button. * The descriptor of the camera toolbar button.
*/ */
camera: { camera: {
classNames: [ 'button', 'icon-camera' ], classNames: [ 'button', 'icon-camera' ],
@ -67,7 +67,7 @@ export default {
}, },
/** /**
* The Object representing chat button. * The descriptor of the chat toolbar button.
*/ */
chat: { chat: {
classNames: [ 'button', 'icon-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: { contacts: {
classNames: [ 'button', 'icon-contactList' ], classNames: [ 'button', 'icon-contactList' ],
enabled: true, 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 // contact list view that updates the number of active participants
// via jQuery. There is case when contact list view updates number of // 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 // is reproducible only for conferences with the only participant let's
// use 1 participant as a default value for this badge. Later after // use 1 participant as a default value for this badge. Later after
// reactification of contact list let's use the value of active // 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: { desktop: {
classNames: [ 'button', 'icon-share-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: { dialpad: {
classNames: [ 'button', 'icon-dialpad' ], classNames: [ 'button', 'icon-dialpad' ],
@ -161,7 +161,7 @@ export default {
}, },
/** /**
* The object representing etherpad button. * The descriptor of the etherpad toolbar button.
*/ */
etherpad: { etherpad: {
classNames: [ 'button', 'icon-share-doc' ], 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: { fullscreen: {
classNames: [ 'button', 'icon-full-screen' ], 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: { hangup: {
classNames: [ 'button', 'icon-hangup', 'button_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: { invite: {
classNames: [ 'button', 'icon-link' ], classNames: [ 'button', 'icon-link' ],
@ -226,7 +226,7 @@ export default {
}, },
/** /**
* The object representing microphone button. * The descriptor of the microphone toolbar button.
*/ */
microphone: { microphone: {
classNames: [ 'button', 'icon-microphone' ], classNames: [ 'button', 'icon-microphone' ],
@ -281,7 +281,7 @@ export default {
}, },
/** /**
* The object representing profile button. * The descriptor of the profile toolbar button.
*/ */
profile: { profile: {
classNames: [ 'button' ], classNames: [ 'button' ],
@ -299,7 +299,7 @@ export default {
}, },
/** /**
* The object representing "Raise hand" button. * The descriptor of the "Raise hand" toolbar button.
*/ */
raisehand: { raisehand: {
classNames: [ 'button', 'icon-raised-hand' ], classNames: [ 'button', 'icon-raised-hand' ],
@ -320,8 +320,8 @@ export default {
}, },
/** /**
* The object representing recording button. Requires additional * The descriptor of the recording toolbar button. Requires additional
* initialization in Recording module. * initialization in the recording module.
*/ */
recording: { recording: {
classNames: [ 'button' ], classNames: [ 'button' ],
@ -334,7 +334,7 @@ export default {
}, },
/** /**
* The objecr representing settings button. * The descriptor of the settings toolbar button.
*/ */
settings: { settings: {
classNames: [ 'button', 'icon-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: { sharedvideo: {
classNames: [ 'button', 'icon-shared-video' ], 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: { sip: {
classNames: [ 'button', 'icon-telephone' ], classNames: [ 'button', 'icon-telephone' ],

View File

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

View File

@ -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);
});

View File

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