haskal
/
jiti-meet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
conference.js
View File

@ -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,

20
modules/UI/UI.js
View File

@ -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.

6
modules/UI/recording/Recording.js
View File

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

8
modules/UI/shared_video/SharedVideo.js
View File

@ -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 () {

10
modules/UI/side_pannels/chat/Chat.js
View File

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

85
react/features/conference/components/Conference.native.js
View File

@ -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 {
<LargeVideo />
<Toolbar />
<Toolbox />
<FilmStrip />
<DialogContainer />
@ -141,46 +141,45 @@ class Conference extends Component {
}
/**
* Clears {@link #_toolbarTimeout} if any.
* Clears {@link #_toolboxTimeout} if any.
*
* @private
* @returns {void}
*/
_clearToolbarTimeout() {
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
};
}

4
react/features/conference/components/Conference.web.js
View File

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

4
react/features/film-strip/components/FilmStrip.js
View File

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

98
react/features/toolbar/actionTypes.js
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');

1
react/features/toolbar/components/index.js
View File

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

39
react/features/toolbar/middleware.js
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);
});

95
react/features/toolbox/actionTypes.js Normal file
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');

109
react/features/toolbar/actions.native.js → react/features/toolbox/actions.native.js
View File

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

83
react/features/toolbar/actions.web.js → react/features/toolbox/actions.web.js
View File

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

0
react/features/toolbar/components/AbstractToolbarButton.js → react/features/toolbox/components/AbstractToolbarButton.js
View File

0
react/features/toolbar/components/Notice.js → react/features/toolbox/components/Notice.js
View File

12
react/features/toolbar/components/PrimaryToolbar.web.js → react/features/toolbox/components/PrimaryToolbar.web.js
View File

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

11
react/features/toolbar/components/SecondaryToolbar.web.js → react/features/toolbox/components/SecondaryToolbar.web.js
View File

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

11
react/features/toolbar/components/BaseToolbar.web.js → react/features/toolbox/components/Toolbar.web.js
View File

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

0
react/features/toolbar/components/ToolbarButton.native.js → react/features/toolbox/components/ToolbarButton.native.js
View File

0
react/features/toolbar/components/ToolbarButton.web.js → react/features/toolbox/components/ToolbarButton.web.js
View File

10
react/features/toolbar/components/Toolbar.native.js → react/features/toolbox/components/Toolbox.native.js
View File

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

53
react/features/toolbar/components/Toolbar.web.js → react/features/toolbox/components/Toolbox.web.js
View File

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

1
react/features/toolbox/components/index.js Normal file
View File

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

5
react/features/toolbar/components/styles.js → react/features/toolbox/components/styles.js
View File

@ -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,

40
react/features/toolbar/defaultToolbarButtons.js → react/features/toolbox/defaultToolbarButtons.js
View File

@ -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' ],

42
react/features/toolbar/functions.js → react/features/toolbox/functions.js
View File

@ -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

0
react/features/toolbar/index.js → react/features/toolbox/index.js
View File

39
react/features/toolbox/middleware.js Normal file
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);
});

82
react/features/toolbar/reducer.js → react/features/toolbox/reducer.js
View File

@ -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 {