2019-01-30 17:19:40 +00:00
|
|
|
// @flow
|
|
|
|
|
2020-11-04 08:32:06 +00:00
|
|
|
import { hasAvailableDevices } from '../base/devices';
|
2021-01-22 10:03:39 +00:00
|
|
|
import { TOOLBOX_ALWAYS_VISIBLE, getFeatureFlag, TOOLBOX_ENABLED } from '../base/flags';
|
2021-07-09 12:36:19 +00:00
|
|
|
import { getParticipantCountWithFake } from '../base/participants';
|
2019-03-12 17:45:53 +00:00
|
|
|
import { toState } from '../base/redux';
|
2020-11-04 08:32:06 +00:00
|
|
|
import { isLocalVideoTrackDesktop } from '../base/tracks';
|
2019-03-12 17:45:53 +00:00
|
|
|
|
2021-03-22 09:02:57 +00:00
|
|
|
const WIDTH = {
|
|
|
|
FIT_9_ICONS: 560,
|
|
|
|
FIT_8_ICONS: 500,
|
|
|
|
FIT_7_ICONS: 440,
|
|
|
|
FIT_6_ICONS: 380
|
|
|
|
};
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Returns a set of the buttons that are shown in the toolbar
|
|
|
|
* but removed from the overflow menu, based on the width of the screen.
|
|
|
|
*
|
|
|
|
* @param {number} width - The width of the screen.
|
|
|
|
* @returns {Set}
|
|
|
|
*/
|
|
|
|
export function getMovableButtons(width: number): Set<string> {
|
|
|
|
let buttons = [];
|
|
|
|
|
|
|
|
switch (true) {
|
|
|
|
case width >= WIDTH.FIT_9_ICONS: {
|
2021-07-27 14:08:33 +00:00
|
|
|
buttons = [ 'togglecamera', 'chat', 'participantspane', 'raisehand', 'tileview' ];
|
2021-03-22 09:02:57 +00:00
|
|
|
break;
|
|
|
|
}
|
|
|
|
case width >= WIDTH.FIT_8_ICONS: {
|
2021-03-23 07:44:58 +00:00
|
|
|
buttons = [ 'chat', 'togglecamera', 'raisehand', 'tileview' ];
|
2021-03-22 09:02:57 +00:00
|
|
|
break;
|
|
|
|
}
|
|
|
|
|
|
|
|
case width >= WIDTH.FIT_7_ICONS: {
|
2021-03-23 07:44:58 +00:00
|
|
|
buttons = [ 'chat', 'togglecamera', 'raisehand' ];
|
2021-03-22 09:02:57 +00:00
|
|
|
break;
|
|
|
|
}
|
|
|
|
|
|
|
|
case width >= WIDTH.FIT_6_ICONS: {
|
2021-03-23 07:44:58 +00:00
|
|
|
buttons = [ 'chat', 'togglecamera' ];
|
2021-03-22 09:02:57 +00:00
|
|
|
break;
|
|
|
|
}
|
|
|
|
|
|
|
|
default: {
|
|
|
|
buttons = [ 'chat' ];
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
return new Set(buttons);
|
|
|
|
}
|
|
|
|
|
2019-03-12 17:45:53 +00:00
|
|
|
/**
|
|
|
|
* Returns true if the toolbox is visible.
|
|
|
|
*
|
|
|
|
* @param {Object | Function} stateful - A function or object that can be
|
|
|
|
* resolved to Redux state by the function {@code toState}.
|
|
|
|
* @returns {boolean}
|
|
|
|
*/
|
|
|
|
export function isToolboxVisible(stateful: Object | Function) {
|
2019-08-20 13:12:38 +00:00
|
|
|
const state = toState(stateful);
|
2021-09-28 11:52:31 +00:00
|
|
|
const { toolbarConfig } = state['features/base/config'];
|
|
|
|
const { alwaysVisible } = toolbarConfig || {};
|
2021-09-23 14:39:05 +00:00
|
|
|
const { enabled, visible } = state['features/toolbox'];
|
2021-07-09 12:36:19 +00:00
|
|
|
const participantCount = getParticipantCountWithFake(state);
|
2021-01-22 10:03:39 +00:00
|
|
|
const alwaysVisibleFlag = getFeatureFlag(state, TOOLBOX_ALWAYS_VISIBLE, false);
|
|
|
|
const enabledFlag = getFeatureFlag(state, TOOLBOX_ENABLED, true);
|
2019-03-12 17:45:53 +00:00
|
|
|
|
2021-09-23 14:39:05 +00:00
|
|
|
return enabledFlag && enabled
|
|
|
|
&& (alwaysVisible || visible || participantCount === 1 || alwaysVisibleFlag);
|
2019-03-12 17:45:53 +00:00
|
|
|
}
|
2020-11-04 08:32:06 +00:00
|
|
|
|
|
|
|
/**
|
|
|
|
* Indicates if the video mute button is disabled or not.
|
|
|
|
*
|
|
|
|
* @param {string} state - The state from the Redux store.
|
|
|
|
* @returns {boolean}
|
|
|
|
*/
|
|
|
|
export function isVideoMuteButtonDisabled(state: Object) {
|
|
|
|
return !hasAvailableDevices(state, 'videoInput') || isLocalVideoTrackDesktop(state);
|
|
|
|
}
|