jiti-meet/react/features/toolbox/reducer.js

243 lines
6.1 KiB
JavaScript
Raw Normal View History

// @flow
2017-02-16 23:02:40 +00:00
import { ReducerRegistry } from '../base/redux';
import {
2017-04-01 05:52:40 +00:00
CLEAR_TOOLBOX_TIMEOUT,
SET_DEFAULT_TOOLBOX_BUTTONS,
2017-02-16 23:02:40 +00:00
SET_SUBJECT,
SET_SUBJECT_SLIDE_IN,
SET_TOOLBAR_BUTTON,
SET_TOOLBAR_HOVERED,
SET_TOOLBOX_ALWAYS_VISIBLE,
SET_TOOLBOX_ENABLED,
2017-04-01 05:52:40 +00:00
SET_TOOLBOX_TIMEOUT,
SET_TOOLBOX_TIMEOUT_MS,
SET_TOOLBOX_VISIBLE
2017-02-16 23:02:40 +00:00
} from './actionTypes';
WiP(invite-ui): Initial move of invite UI to invite button (#1950) * WiP(invite-ui): Initial move of invite UI to invite button * Adjusts styling to fit both horizontal and vertical filmstrip * Removes comment and functions not needed * [squash] Addressing various review comments * [squash] Move invite options to a separate config * [squash] Adjust invite button styles until we fix the whole UI theme * [squash] Fix the remote videos scroll * [squash]:Do not show popup menu when 1 option is available * [squash]: Disable the invite button in filmstrip mode * feat(connection-indicator): implement automatic hiding on good connection (#2009) * ref(connection-stats): use PropTypes package * feat(connection-stats): display a summary of the connection quality * feat(connection-indicator): show empty bars for interrupted connection * feat(connection-indicator): change background color based on status * feat(connection-indicator): implement automatic hiding on good connection * fix(connection-indicator): explicitly set font size Currently non-react code will set an icon size on ConnectionIndicator. This doesn't work on initial call join in vertical filmstrip after some changes to support hiding the indicator. The chosen fix is passing in the icon size to mirror what would happe with full filmstrip reactification. * ref(connection-stats): rename statuses * feat(connection-indicator): make hiding behavior configurable The original implementation made the auto hiding of the indicator configured in interfaceConfig. * fix(connection-indicator): readd class expected by torture tests * fix(connection-indicator): change connection quality display styling Bold the connection summary in the stats popover so it stands out. Change the summaries so there are only three--strong, nonoptimal, poor. * fix(connection-indicator): gray background on lost connection * feat(icons): add new gsm bars icon * feat(connection-indicator): use new 3-bar icon * ref(icons): remove icon-connection and icon-connection-lost Both have been replaced by icon-gsm-bars so they are not being referenced anymore. Mobile looks to have connect-lost as a separate icon in font-icons/jitsi.json. * fix(defaultToolbarButtons): Fixes unresolved InfoDialogButton component problem * [squash]: Makes invite button fit the container * [squash]:Addressing invite truncate, remote menu position and comment * [squash]:Fix z-index in horizontal mode, z-index in lonely call * [squash]: Fix filmstripOnly property, remove important from css
2017-10-03 16:30:42 +00:00
import getDefaultButtons from './defaultToolbarButtons';
2017-02-16 23:02:40 +00:00
declare var interfaceConfig: Object;
/**
2017-04-01 05:52:40 +00:00
* Returns initial state for toolbox's part of Redux store.
2017-02-16 23:02:40 +00:00
*
2017-04-01 05:52:40 +00:00
* @private
2017-02-16 23:02:40 +00:00
* @returns {{
2017-04-01 05:52:40 +00:00
* alwaysVisible: boolean,
* hovered: boolean,
2017-02-16 23:02:40 +00:00
* primaryToolbarButtons: Map,
2017-04-01 05:52:40 +00:00
* secondaryToolbarButtons: Map,
* subject: string,
* subjectSlideIn: boolean,
* timeoutID: number,
* timeoutMS: number,
* visible: boolean
2017-02-16 23:02:40 +00:00
* }}
*/
function _getInitialState() {
2017-04-01 05:52:40 +00:00
// Default toolbox timeout for mobile app.
let timeoutMS = 5000;
2017-02-16 23:02:40 +00:00
if (typeof interfaceConfig !== 'undefined'
&& interfaceConfig.INITIAL_TOOLBAR_TIMEOUT) {
2017-04-01 05:52:40 +00:00
timeoutMS = interfaceConfig.INITIAL_TOOLBAR_TIMEOUT;
2017-02-16 23:02:40 +00:00
}
return {
/**
2017-04-01 05:52:40 +00:00
* The indicator which determines whether the Toolbox should always be
* visible.
2017-02-16 23:02:40 +00:00
*
* @type {boolean}
*/
alwaysVisible: false,
/**
* The indicator which determines whether the Toolbox is enabled. For
* example, modules/UI/recording/Recording.js disables the Toolbox.
*
* @type {boolean}
*/
enabled: true,
2017-02-16 23:02:40 +00:00
/**
2017-04-01 05:52:40 +00:00
* The indicator which determines whether a Toolbar in the Toolbox is
* hovered.
2017-02-16 23:02:40 +00:00
*
* @type {boolean}
*/
hovered: false,
/**
* A Map of the default buttons of the PrimaryToolbar.
*
* @type {Map}
*/
primaryToolbarButtons: new Map(),
/**
* A Map of the default buttons of the SecondaryToolbar.
*
* @type {Map}
*/
secondaryToolbarButtons: new Map(),
2017-02-16 23:02:40 +00:00
/**
2017-04-01 05:52:40 +00:00
* The text of the conference subject.
2017-02-16 23:02:40 +00:00
*
* @type {string}
*/
subject: '',
/**
2017-04-01 05:52:40 +00:00
* The indicator which determines whether the subject is sliding in.
2017-02-16 23:02:40 +00:00
*
* @type {boolean}
*/
subjectSlideIn: false,
/**
2017-04-01 05:52:40 +00:00
* A number, non-zero value which identifies the timer created by a call
* to setTimeout() with timeoutMS.
2017-02-16 23:02:40 +00:00
*
* @type {number|null}
*/
2017-04-01 05:52:40 +00:00
timeoutID: null,
2017-02-16 23:02:40 +00:00
/**
2017-04-01 05:52:40 +00:00
* The delay in milliseconds before timeoutID executes (after its
* initialization).
2017-02-16 23:02:40 +00:00
*
* @type {number}
*/
2017-04-01 05:52:40 +00:00
timeoutMS,
2017-02-16 23:02:40 +00:00
/**
2017-04-01 05:52:40 +00:00
* The indicator which determines whether the Toolbox is visible.
2017-02-16 23:02:40 +00:00
*
* @type {boolean}
*/
visible: false
};
}
ReducerRegistry.register(
2017-04-01 05:52:40 +00:00
'features/toolbox',
2017-02-16 23:02:40 +00:00
(state: Object = _getInitialState(), action: Object) => {
switch (action.type) {
2017-04-01 05:52:40 +00:00
case CLEAR_TOOLBOX_TIMEOUT:
2017-02-16 23:02:40 +00:00
return {
...state,
2017-04-01 05:52:40 +00:00
timeoutID: undefined
2017-02-16 23:02:40 +00:00
};
case SET_DEFAULT_TOOLBOX_BUTTONS: {
const { primaryToolbarButtons, secondaryToolbarButtons } = action;
return {
...state,
primaryToolbarButtons,
secondaryToolbarButtons
};
}
2017-02-16 23:02:40 +00:00
case SET_SUBJECT:
return {
...state,
subject: action.subject
};
case SET_SUBJECT_SLIDE_IN:
return {
...state,
subjectSlideIn: action.subjectSlideIn
};
case SET_TOOLBAR_BUTTON:
return _setToolbarButton(state, action);
2017-02-16 23:02:40 +00:00
case SET_TOOLBAR_HOVERED:
return {
...state,
hovered: action.hovered
};
case SET_TOOLBOX_ALWAYS_VISIBLE:
return {
...state,
alwaysVisible: action.alwaysVisible
};
case SET_TOOLBOX_ENABLED:
return {
...state,
enabled: action.enabled
};
2017-04-01 05:52:40 +00:00
case SET_TOOLBOX_TIMEOUT:
2017-02-16 23:02:40 +00:00
return {
...state,
2017-04-01 05:52:40 +00:00
timeoutID: action.timeoutID,
timeoutMS: action.timeoutMS
2017-02-16 23:02:40 +00:00
};
2017-04-01 05:52:40 +00:00
case SET_TOOLBOX_TIMEOUT_MS:
2017-02-16 23:02:40 +00:00
return {
...state,
2017-04-01 05:52:40 +00:00
timeoutMS: action.timeoutMS
2017-02-16 23:02:40 +00:00
};
2017-04-01 05:52:40 +00:00
case SET_TOOLBOX_VISIBLE:
2017-02-16 23:02:40 +00:00
return {
...state,
visible: action.visible
};
}
return state;
});
/**
* Reduces the redux action {@code SET_TOOLBAR_BUTTON} in the feature toolbox.
2017-02-16 23:02:40 +00:00
*
* @param {Object} state - The redux state.
* @param {Object} action - The redux action of type {@code SET_TOOLBAR_BUTTON}.
2017-02-16 23:02:40 +00:00
* @param {Object} action.button - Object describing toolbar button.
* @param {Object} action.buttonName - The name of the button.
* @private
2017-04-01 05:52:40 +00:00
* @returns {Object}
2017-02-16 23:02:40 +00:00
*/
function _setToolbarButton(state, { button, buttonName }): Object {
// XXX getDefaultButtons, defaultToolbarButtons, SET_TOOLBAR_BUTTON are
// abstractions fully implemented on Web only.
const buttons = getDefaultButtons && getDefaultButtons();
const buttonDefinition = buttons && buttons[buttonName];
// We don't need to update if the button shouldn't be displayed
if (!buttonDefinition || !buttonDefinition.isDisplayed()) {
return state;
}
const { primaryToolbarButtons, secondaryToolbarButtons } = state;
2017-02-16 23:02:40 +00:00
let selectedButton = primaryToolbarButtons.get(buttonName);
let place = 'primaryToolbarButtons';
if (!selectedButton) {
selectedButton = secondaryToolbarButtons.get(buttonName);
place = 'secondaryToolbarButtons';
}
selectedButton = {
...selectedButton,
...button
};
const updatedToolbar = state[place].set(buttonName, selectedButton);
return {
...state,
[place]: new Map(updatedToolbar)
};
}