- Change "features/chat" to support listening for new chat messages and storing them, removing that logic from conference.js. - Combine chat.scss and side_toolbar_container.css, and remove unused scss files. Chat is the only side panel so the two concepts have been merged. - Remove direct access to the chat feature from non-react and non-redux flows. - Modify the i18n translate function to take in an options object. By default the option "wait" is set to true, but that causes components to mount after the parent has been notified of an update, which means autoscrolling down to the latest rendered messages does not work. With "wait" set to false, the children will mount and then the parent will trigger componentDidUpdate. - Create react components for chat. Chat is the side panel plus the entiren chat feature. ChatInput is a child of Chat and is used for composing messages. ChatMessage displays one message and extends PureComponent to limit re-renders. - Fix a bug where the toolbar was not showing automatically when chat is closed and a new message is received. - Import react-transition-group to time the animation of the side panel showing/hiding and unmounting the Chat component. This gets around the issue of having to control autofocus if the component were always mounted and visibility toggled, but introduces not being able to store previous scroll state (without additional work or re-work).
149 lines
3.7 KiB
JavaScript
149 lines
3.7 KiB
JavaScript
/* @flow */
|
|
|
|
|
|
import {
|
|
clearToolboxTimeout,
|
|
setToolboxTimeout,
|
|
setToolboxTimeoutMS,
|
|
setToolboxVisible
|
|
} from './actions.native';
|
|
import {
|
|
FULL_SCREEN_CHANGED,
|
|
SET_FULL_SCREEN
|
|
} from './actionTypes';
|
|
|
|
declare var interfaceConfig: Object;
|
|
|
|
export * from './actions.native';
|
|
|
|
/**
|
|
* Docks/undocks the Toolbox.
|
|
*
|
|
* @param {boolean} dock - True if dock, false otherwise.
|
|
* @returns {Function}
|
|
*/
|
|
export function dockToolbox(dock: boolean): Function {
|
|
return (dispatch: Dispatch<*>, getState: Function) => {
|
|
if (interfaceConfig.filmStripOnly) {
|
|
return;
|
|
}
|
|
|
|
const { timeoutMS, visible } = getState()['features/toolbox'];
|
|
|
|
if (dock) {
|
|
// First make sure the toolbox is shown.
|
|
visible || dispatch(showToolbox());
|
|
|
|
dispatch(clearToolboxTimeout());
|
|
} else if (visible) {
|
|
dispatch(
|
|
setToolboxTimeout(
|
|
() => dispatch(hideToolbox()),
|
|
timeoutMS));
|
|
} else {
|
|
dispatch(showToolbox());
|
|
}
|
|
};
|
|
}
|
|
|
|
/**
|
|
* 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
|
|
};
|
|
}
|
|
|
|
/**
|
|
* Hides the toolbox.
|
|
*
|
|
* @param {boolean} force - True to force the hiding of the toolbox without
|
|
* caring about the extended toolbar side panels.
|
|
* @returns {Function}
|
|
*/
|
|
export function hideToolbox(force: boolean = false): Function {
|
|
return (dispatch: Dispatch<*>, getState: Function) => {
|
|
const state = getState();
|
|
const {
|
|
alwaysVisible,
|
|
hovered,
|
|
timeoutMS
|
|
} = state['features/toolbox'];
|
|
|
|
if (alwaysVisible) {
|
|
return;
|
|
}
|
|
|
|
dispatch(clearToolboxTimeout());
|
|
|
|
if (!force
|
|
&& (hovered
|
|
|| state['features/invite'].calleeInfoVisible
|
|
|| state['features/chat'].isOpen)) {
|
|
dispatch(
|
|
setToolboxTimeout(
|
|
() => dispatch(hideToolbox()),
|
|
timeoutMS));
|
|
} else {
|
|
dispatch(setToolboxVisible(false));
|
|
}
|
|
};
|
|
}
|
|
|
|
/**
|
|
* 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
|
|
};
|
|
}
|
|
|
|
/**
|
|
* Shows the toolbox for specified timeout.
|
|
*
|
|
* @param {number} timeout - Timeout for showing the toolbox.
|
|
* @returns {Function}
|
|
*/
|
|
export function showToolbox(timeout: number = 0): Object {
|
|
return (dispatch: Dispatch<*>, getState: Function) => {
|
|
const state = getState();
|
|
const {
|
|
alwaysVisible,
|
|
enabled,
|
|
timeoutMS,
|
|
visible
|
|
} = state['features/toolbox'];
|
|
|
|
if (enabled && !visible) {
|
|
dispatch(setToolboxVisible(true));
|
|
|
|
// If the Toolbox is always visible, there's no need for a timeout
|
|
// to toggle its visibility.
|
|
if (!alwaysVisible) {
|
|
dispatch(
|
|
setToolboxTimeout(
|
|
() => dispatch(hideToolbox()),
|
|
timeout || timeoutMS));
|
|
dispatch(setToolboxTimeoutMS(interfaceConfig.TOOLBAR_TIMEOUT));
|
|
}
|
|
}
|
|
};
|
|
}
|