jiti-meet/react/features/toolbox/actions.web.js

241 lines
6.2 KiB
JavaScript
Raw Normal View History

2019-03-19 15:42:25 +00:00
// @flow
2017-02-16 23:02:40 +00:00
2019-03-19 15:42:25 +00:00
import type { Dispatch } from 'redux';
import { overwriteConfig } from '../base/config';
2020-05-20 10:57:03 +00:00
import {
CLEAR_TOOLBOX_TIMEOUT,
2020-05-20 10:57:03 +00:00
FULL_SCREEN_CHANGED,
SET_FULL_SCREEN,
SET_OVERFLOW_DRAWER,
SET_OVERFLOW_MENU_VISIBLE,
SET_TOOLBAR_HOVERED,
SET_TOOLBOX_TIMEOUT
2020-05-20 10:57:03 +00:00
} from './actionTypes';
import { setToolboxVisible } from './actions';
import { getToolbarTimeout } from './functions';
2017-02-16 23:02:40 +00:00
export * from './actions.any';
2017-02-16 23:02:40 +00:00
/**
2017-04-01 05:52:40 +00:00
* Docks/undocks the Toolbox.
2017-02-16 23:02:40 +00:00
*
* @param {boolean} dock - True if dock, false otherwise.
* @returns {Function}
*/
2017-04-01 05:52:40 +00:00
export function dockToolbox(dock: boolean): Function {
2019-03-19 15:42:25 +00:00
return (dispatch: Dispatch<any>, getState: Function) => {
const state = getState();
const { visible } = state['features/toolbox'];
const toolbarTimeout = getToolbarTimeout(state);
2017-02-16 23:02:40 +00:00
if (dock) {
2017-04-01 05:52:40 +00:00
// First make sure the toolbox is shown.
visible || dispatch(showToolbox());
2017-02-16 23:02:40 +00:00
2017-04-01 05:52:40 +00:00
dispatch(clearToolboxTimeout());
2017-02-16 23:02:40 +00:00
} else if (visible) {
dispatch(
2017-04-01 05:52:40 +00:00
setToolboxTimeout(
() => dispatch(hideToolbox()),
toolbarTimeout));
2017-02-16 23:02:40 +00:00
} else {
2017-04-01 05:52:40 +00:00
dispatch(showToolbox());
2017-02-16 23:02:40 +00:00
}
};
}
/**
* Signals that full screen mode has been entered or exited.
*
* @param {boolean} fullScreen - Whether or not full screen mode is currently
* enabled.
* @returns {{
* type: FULL_SCREEN_CHANGED,
* fullScreen: boolean
* }}
*/
export function fullScreenChanged(fullScreen: boolean) {
return {
type: FULL_SCREEN_CHANGED,
fullScreen
};
}
2017-02-16 23:02:40 +00:00
/**
2017-04-01 05:52:40 +00:00
* Hides the toolbox.
2017-02-16 23:02:40 +00:00
*
2017-04-01 05:52:40 +00:00
* @param {boolean} force - True to force the hiding of the toolbox without
2017-02-16 23:02:40 +00:00
* caring about the extended toolbar side panels.
* @returns {Function}
*/
2017-04-01 05:52:40 +00:00
export function hideToolbox(force: boolean = false): Function {
2019-03-19 15:42:25 +00:00
return (dispatch: Dispatch<any>, getState: Function) => {
2017-02-16 23:02:40 +00:00
const state = getState();
const { toolbarConfig: { alwaysVisible } } = state['features/base/config'];
const { hovered } = state['features/toolbox'];
const toolbarTimeout = getToolbarTimeout(state);
2017-02-16 23:02:40 +00:00
if (alwaysVisible) {
return;
}
2017-04-01 05:52:40 +00:00
dispatch(clearToolboxTimeout());
2017-02-16 23:02:40 +00:00
const focusSelector = '.toolbox-content-items:focus-within,.filmstrip:focus-within,.remotevideomenu:hover';
2017-02-16 23:02:40 +00:00
if (!force
&& (hovered
2018-06-26 22:56:22 +00:00
|| state['features/invite'].calleeInfoVisible
|| state['features/chat'].isOpen
|| document.querySelector(focusSelector))) {
2017-02-16 23:02:40 +00:00
dispatch(
2017-04-01 05:52:40 +00:00
setToolboxTimeout(
() => dispatch(hideToolbox()),
toolbarTimeout));
2017-02-16 23:02:40 +00:00
} else {
2017-04-01 05:52:40 +00:00
dispatch(setToolboxVisible(false));
2017-02-16 23:02:40 +00:00
}
};
}
/**
* Signals a request to enter or exit full screen mode.
*
* @param {boolean} fullScreen - True to enter full screen mode, false to exit.
* @returns {{
* type: SET_FULL_SCREEN,
* fullScreen: boolean
* }}
*/
export function setFullScreen(fullScreen: boolean) {
return {
type: SET_FULL_SCREEN,
fullScreen
};
}
2017-02-16 23:02:40 +00:00
/**
2017-04-01 05:52:40 +00:00
* Shows the toolbox for specified timeout.
2017-02-16 23:02:40 +00:00
*
2017-04-01 05:52:40 +00:00
* @param {number} timeout - Timeout for showing the toolbox.
2017-02-16 23:02:40 +00:00
* @returns {Function}
*/
2017-04-01 05:52:40 +00:00
export function showToolbox(timeout: number = 0): Object {
2019-03-19 15:42:25 +00:00
return (dispatch: Dispatch<any>, getState: Function) => {
2017-02-16 23:02:40 +00:00
const state = getState();
const {
toolbarConfig: { initialTimeout, alwaysVisible },
toolbarConfig
} = state['features/base/config'];
const toolbarTimeout = getToolbarTimeout(state);
const {
enabled,
visible
} = state['features/toolbox'];
2017-02-16 23:02:40 +00:00
if (enabled && !visible) {
2017-04-01 05:52:40 +00:00
dispatch(setToolboxVisible(true));
// If the Toolbox is always visible, there's no need for a timeout
// to toggle its visibility.
if (!alwaysVisible) {
if (typeof initialTimeout === 'number') {
// reset `initialTimeout` once it is consumed once
dispatch(overwriteConfig({ toolbarConfig: {
...toolbarConfig,
initialTimeout: null
} }));
}
dispatch(
setToolboxTimeout(
() => dispatch(hideToolbox()),
timeout || initialTimeout || toolbarTimeout));
}
2017-02-16 23:02:40 +00:00
}
};
}
/**
* Signals a request to display overflow as drawer.
*
* @param {boolean} displayAsDrawer - True to display overflow as drawer, false to preserve original behaviour.
* @returns {{
* type: SET_OVERFLOW_DRAWER,
* displayAsDrawer: boolean
* }}
*/
export function setOverflowDrawer(displayAsDrawer: boolean) {
return {
type: SET_OVERFLOW_DRAWER,
displayAsDrawer
};
}
/**
* Signals that toolbox timeout should be cleared.
*
* @returns {{
* type: CLEAR_TOOLBOX_TIMEOUT
* }}
*/
export function clearToolboxTimeout(): Object {
return {
type: CLEAR_TOOLBOX_TIMEOUT
};
}
/**
* Shows/hides the overflow menu.
*
* @param {boolean} visible - True to show it or false to hide it.
* @returns {{
* type: SET_OVERFLOW_MENU_VISIBLE,
* visible: boolean
* }}
*/
export function setOverflowMenuVisible(visible: boolean): Object {
return {
type: SET_OVERFLOW_MENU_VISIBLE,
visible
};
}
/**
* Signals that toolbar is hovered value should be changed.
*
* @param {boolean} hovered - Flag showing whether toolbar is hovered.
* @returns {{
* type: SET_TOOLBAR_HOVERED,
* hovered: boolean
* }}
*/
export function setToolbarHovered(hovered: boolean): Object {
return {
type: SET_TOOLBAR_HOVERED,
hovered
};
}
/**
* Dispatches an action which sets new timeout and clears the previous one.
*
* @param {Function} handler - Function to be invoked after the timeout.
* @param {number} timeoutMS - Delay.
* @returns {{
* type: SET_TOOLBOX_TIMEOUT,
* handler: Function,
* timeoutMS: number
* }}
*/
export function setToolboxTimeout(handler: Function, timeoutMS: number): Object {
return {
type: SET_TOOLBOX_TIMEOUT,
handler,
timeoutMS
};
}