2018-08-08 18:48:23 +00:00
|
|
|
// @flow
|
2021-06-04 21:11:18 +00:00
|
|
|
import type { Dispatch } from 'redux';
|
2018-08-08 18:48:23 +00:00
|
|
|
|
2021-01-22 10:03:39 +00:00
|
|
|
import { getFeatureFlag, TILE_VIEW_ENABLED } from '../base/flags';
|
2021-06-04 21:11:18 +00:00
|
|
|
import {
|
|
|
|
getPinnedParticipant,
|
|
|
|
getParticipantCount,
|
2021-07-09 12:36:19 +00:00
|
|
|
pinParticipant,
|
|
|
|
getParticipantCountWithFake
|
2021-06-04 21:11:18 +00:00
|
|
|
} from '../base/participants';
|
2021-01-18 10:17:23 +00:00
|
|
|
import {
|
|
|
|
ASPECT_RATIO_BREAKPOINT,
|
|
|
|
DEFAULT_MAX_COLUMNS,
|
|
|
|
ABSOLUTE_MAX_COLUMNS,
|
|
|
|
SINGLE_COLUMN_BREAKPOINT,
|
|
|
|
TWO_COLUMN_BREAKPOINT
|
|
|
|
} from '../filmstrip/constants';
|
2021-03-03 14:37:38 +00:00
|
|
|
import { isVideoPlaying } from '../shared-video/functions';
|
2018-08-08 18:48:23 +00:00
|
|
|
|
2020-05-20 10:57:03 +00:00
|
|
|
import { LAYOUTS } from './constants';
|
|
|
|
|
2018-08-08 18:48:23 +00:00
|
|
|
declare var interfaceConfig: Object;
|
|
|
|
|
2021-06-04 21:11:18 +00:00
|
|
|
/**
|
|
|
|
* A selector for retrieving the current automatic pinning setting.
|
|
|
|
*
|
|
|
|
* @private
|
|
|
|
* @returns {string|undefined} The string "remote-only" is returned if only
|
|
|
|
* remote screen sharing should be automatically pinned, any other truthy value
|
|
|
|
* means automatically pin all screen shares. Falsy means do not automatically
|
|
|
|
* pin any screen shares.
|
|
|
|
*/
|
|
|
|
export function getAutoPinSetting() {
|
|
|
|
return typeof interfaceConfig === 'object'
|
|
|
|
? interfaceConfig.AUTO_PIN_LATEST_SCREEN_SHARE
|
|
|
|
: 'remote-only';
|
|
|
|
}
|
|
|
|
|
2018-08-08 18:48:23 +00:00
|
|
|
/**
|
|
|
|
* Returns the {@code LAYOUTS} constant associated with the layout
|
|
|
|
* the application should currently be in.
|
|
|
|
*
|
|
|
|
* @param {Object} state - The redux state.
|
|
|
|
* @returns {string}
|
|
|
|
*/
|
|
|
|
export function getCurrentLayout(state: Object) {
|
|
|
|
if (shouldDisplayTileView(state)) {
|
|
|
|
return LAYOUTS.TILE_VIEW;
|
|
|
|
} else if (interfaceConfig.VERTICAL_FILMSTRIP) {
|
|
|
|
return LAYOUTS.VERTICAL_FILMSTRIP_VIEW;
|
|
|
|
}
|
|
|
|
|
|
|
|
return LAYOUTS.HORIZONTAL_FILMSTRIP_VIEW;
|
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Returns how many columns should be displayed in tile view. The number
|
2021-01-18 10:17:23 +00:00
|
|
|
* returned will be between 1 and 7, inclusive.
|
2018-08-08 18:48:23 +00:00
|
|
|
*
|
2021-01-18 10:17:23 +00:00
|
|
|
* @param {Object} state - The redux store state.
|
2018-08-08 18:48:23 +00:00
|
|
|
* @returns {number}
|
|
|
|
*/
|
2021-01-18 10:17:23 +00:00
|
|
|
export function getMaxColumnCount(state: Object) {
|
|
|
|
const configuredMax = interfaceConfig.TILE_VIEW_MAX_COLUMNS || DEFAULT_MAX_COLUMNS;
|
2021-01-26 08:33:31 +00:00
|
|
|
const { disableResponsiveTiles } = state['features/base/config'];
|
2021-01-18 10:17:23 +00:00
|
|
|
|
2021-01-26 08:33:31 +00:00
|
|
|
if (!disableResponsiveTiles) {
|
|
|
|
const { clientWidth } = state['features/base/responsive-ui'];
|
|
|
|
const participantCount = getParticipantCount(state);
|
2018-08-08 18:48:23 +00:00
|
|
|
|
2021-01-26 08:33:31 +00:00
|
|
|
// If there are just two participants in a conference, enforce single-column view for mobile size.
|
2021-03-23 12:06:43 +00:00
|
|
|
if (participantCount === 2 && clientWidth < ASPECT_RATIO_BREAKPOINT) {
|
2021-01-26 08:33:31 +00:00
|
|
|
return Math.min(1, Math.max(configuredMax, 1));
|
|
|
|
}
|
|
|
|
|
|
|
|
// Enforce single column view at very small screen widths.
|
2021-03-23 12:06:43 +00:00
|
|
|
if (clientWidth < SINGLE_COLUMN_BREAKPOINT) {
|
2021-01-26 08:33:31 +00:00
|
|
|
return Math.min(1, Math.max(configuredMax, 1));
|
|
|
|
}
|
2021-01-18 10:17:23 +00:00
|
|
|
|
2021-01-26 08:33:31 +00:00
|
|
|
// Enforce two column view below breakpoint.
|
2021-03-23 12:06:43 +00:00
|
|
|
if (clientWidth < TWO_COLUMN_BREAKPOINT) {
|
2021-01-26 08:33:31 +00:00
|
|
|
return Math.min(2, Math.max(configuredMax, 1));
|
|
|
|
}
|
2021-01-18 10:17:23 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
return Math.min(Math.max(configuredMax, 1), ABSOLUTE_MAX_COLUMNS);
|
2018-08-08 18:48:23 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Returns the cell count dimensions for tile view. Tile view tries to uphold
|
|
|
|
* equal count of tiles for height and width, until maxColumn is reached in
|
|
|
|
* which rows will be added but no more columns.
|
|
|
|
*
|
2020-03-06 11:43:00 +00:00
|
|
|
* @param {Object} state - The redux store state.
|
2018-08-08 18:48:23 +00:00
|
|
|
* @returns {Object} An object is return with the desired number of columns,
|
|
|
|
* rows, and visible rows (the rest should overflow) for the tile view layout.
|
|
|
|
*/
|
2021-01-18 10:17:23 +00:00
|
|
|
export function getTileViewGridDimensions(state: Object) {
|
|
|
|
const maxColumns = getMaxColumnCount(state);
|
|
|
|
|
2020-03-06 11:43:00 +00:00
|
|
|
// When in tile view mode, we must discount ourselves (the local participant) because our
|
|
|
|
// tile is not visible.
|
|
|
|
const { iAmRecorder } = state['features/base/config'];
|
2021-07-09 12:36:19 +00:00
|
|
|
const numberOfParticipants = getParticipantCountWithFake(state) - (iAmRecorder ? 1 : 0);
|
2020-03-06 11:43:00 +00:00
|
|
|
|
2020-01-24 16:28:47 +00:00
|
|
|
const columnsToMaintainASquare = Math.ceil(Math.sqrt(numberOfParticipants));
|
2018-08-08 18:48:23 +00:00
|
|
|
const columns = Math.min(columnsToMaintainASquare, maxColumns);
|
2020-01-24 16:28:47 +00:00
|
|
|
const rows = Math.ceil(numberOfParticipants / columns);
|
2021-03-26 20:23:05 +00:00
|
|
|
const minVisibleRows = Math.min(maxColumns, rows);
|
2018-08-08 18:48:23 +00:00
|
|
|
|
|
|
|
return {
|
|
|
|
columns,
|
2021-03-26 20:23:05 +00:00
|
|
|
minVisibleRows,
|
|
|
|
rows
|
2018-08-08 18:48:23 +00:00
|
|
|
};
|
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Selector for determining if the UI layout should be in tile view. Tile view
|
|
|
|
* is determined by more than just having the tile view setting enabled, as
|
|
|
|
* one-on-one calls should not be in tile view, as well as etherpad editing.
|
|
|
|
*
|
|
|
|
* @param {Object} state - The redux state.
|
|
|
|
* @returns {boolean} True if tile view should be displayed.
|
|
|
|
*/
|
|
|
|
export function shouldDisplayTileView(state: Object = {}) {
|
2020-07-23 13:12:25 +00:00
|
|
|
const participantCount = getParticipantCount(state);
|
|
|
|
|
2021-01-22 10:03:39 +00:00
|
|
|
const tileViewEnabledFeatureFlag = getFeatureFlag(state, TILE_VIEW_ENABLED, true);
|
2021-01-07 12:34:22 +00:00
|
|
|
const { disableTileView } = state['features/base/config'];
|
|
|
|
|
2021-01-22 10:03:39 +00:00
|
|
|
if (disableTileView || !tileViewEnabledFeatureFlag) {
|
2021-01-07 12:34:22 +00:00
|
|
|
return false;
|
|
|
|
}
|
|
|
|
|
2020-07-23 13:12:25 +00:00
|
|
|
const { tileViewEnabled } = state['features/video-layout'];
|
|
|
|
|
|
|
|
if (tileViewEnabled !== undefined) {
|
|
|
|
// If the user explicitly requested a view mode, we
|
|
|
|
// do that.
|
|
|
|
return tileViewEnabled;
|
|
|
|
}
|
|
|
|
|
2020-11-13 18:11:30 +00:00
|
|
|
const { iAmRecorder } = state['features/base/config'];
|
|
|
|
|
2020-07-23 13:12:25 +00:00
|
|
|
// None tile view mode is easier to calculate (no need for many negations), so we do
|
|
|
|
// that and negate it only once.
|
|
|
|
const shouldDisplayNormalMode = Boolean(
|
|
|
|
|
|
|
|
// Reasons for normal mode:
|
|
|
|
|
|
|
|
// Editing etherpad
|
|
|
|
state['features/etherpad']?.editing
|
|
|
|
|
|
|
|
// We pinned a participant
|
|
|
|
|| getPinnedParticipant(state)
|
|
|
|
|
|
|
|
// It's a 1-on-1 meeting
|
|
|
|
|| participantCount < 3
|
|
|
|
|
|
|
|
// There is a shared YouTube video in the meeting
|
2021-03-03 14:37:38 +00:00
|
|
|
|| isVideoPlaying(state)
|
2020-11-13 18:11:30 +00:00
|
|
|
|
|
|
|
// We want jibri to use stage view by default
|
|
|
|
|| iAmRecorder
|
2018-08-08 18:48:23 +00:00
|
|
|
);
|
2020-07-23 13:12:25 +00:00
|
|
|
|
|
|
|
return !shouldDisplayNormalMode;
|
2018-08-08 18:48:23 +00:00
|
|
|
}
|
2021-06-04 21:11:18 +00:00
|
|
|
|
|
|
|
/**
|
|
|
|
* Private helper to automatically pin the latest screen share stream or unpin
|
|
|
|
* if there are no more screen share streams.
|
|
|
|
*
|
|
|
|
* @param {Array<string>} screenShares - Array containing the list of all the screen sharing endpoints
|
|
|
|
* before the update was triggered (including the ones that have been removed from redux because of the update).
|
|
|
|
* @param {Store} store - The redux store.
|
|
|
|
* @returns {void}
|
|
|
|
*/
|
|
|
|
export function updateAutoPinnedParticipant(
|
|
|
|
screenShares: Array<string>, { dispatch, getState }: { dispatch: Dispatch<any>, getState: Function }) {
|
|
|
|
const state = getState();
|
|
|
|
const remoteScreenShares = state['features/video-layout'].remoteScreenShares;
|
|
|
|
const pinned = getPinnedParticipant(getState);
|
|
|
|
|
|
|
|
// if the pinned participant is shared video or some other fake participant we want to skip auto-pinning
|
|
|
|
if (pinned?.isFakeParticipant) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
// Unpin the screen share when the screen sharing participant leaves. Switch to tile view if no other
|
|
|
|
// participant was pinned before screen share was auto-pinned, pin the previously pinned participant otherwise.
|
|
|
|
if (!remoteScreenShares?.length) {
|
|
|
|
let participantId = null;
|
|
|
|
|
|
|
|
if (pinned && !screenShares.find(share => share === pinned.id)) {
|
|
|
|
participantId = pinned.id;
|
|
|
|
}
|
|
|
|
dispatch(pinParticipant(participantId));
|
|
|
|
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
const latestScreenShareParticipantId = remoteScreenShares[remoteScreenShares.length - 1];
|
|
|
|
|
|
|
|
if (latestScreenShareParticipantId) {
|
|
|
|
dispatch(pinParticipant(latestScreenShareParticipantId));
|
|
|
|
}
|
|
|
|
}
|