From 5345a77092c2c9f9a07df5ddc7fc61408f6284e7 Mon Sep 17 00:00:00 2001 From: Horatiu Muresan <39557534+horymury@users.noreply.github.com> Date: Thu, 10 Aug 2023 16:31:32 +0300 Subject: [PATCH] chore(tileview) Add config for disabling tileview (#13692) - show fixed number of toolbar buttons in toolbar (including custom buttons) instead of sending to overflow menu --- config.js | 2 ++ react/features/base/config/configType.ts | 1 + react/features/base/ui/constants.web.ts | 1 + react/features/filmstrip/functions.any.ts | 14 +++++++++++++- react/features/toolbox/components/web/Toolbox.tsx | 7 ++----- react/features/video-layout/actions.any.ts | 11 ++++++++--- react/features/video-layout/functions.any.ts | 8 +++++++- 7 files changed, 34 insertions(+), 10 deletions(-) diff --git a/config.js b/config.js index 5ddf66c98b..3d1d857c1c 100644 --- a/config.js +++ b/config.js @@ -1594,6 +1594,8 @@ var config = { // Tile view related config options. // tileView: { + // // Whether tileview should be disabled. + // disabled: false, // // The optimal number of tiles that are going to be shown in tile view. Depending on the screen size it may // // not be possible to show the exact number of participants specified here. // numberOfVisibleTiles: 25, diff --git a/react/features/base/config/configType.ts b/react/features/base/config/configType.ts index b3a6f18d04..a59aaabb90 100644 --- a/react/features/base/config/configType.ts +++ b/react/features/base/config/configType.ts @@ -573,6 +573,7 @@ export interface IConfig { testMode?: boolean; }; tileView?: { + disabled?: boolean; numberOfVisibleTiles?: number; }; tokenAuthUrl?: string; diff --git a/react/features/base/ui/constants.web.ts b/react/features/base/ui/constants.web.ts index 303f022446..6d3709b8c9 100644 --- a/react/features/base/ui/constants.web.ts +++ b/react/features/base/ui/constants.web.ts @@ -260,6 +260,7 @@ export const commonStyles = (theme: Theme) => { padding: 6, textAlign: 'center' as const, pointerEvents: 'all' as const, + display: 'flex', boxShadow: '0px 2px 8px 4px rgba(0, 0, 0, 0.25), 0px 0px 0px 1px rgba(0, 0, 0, 0.15)', '& > div': { diff --git a/react/features/filmstrip/functions.any.ts b/react/features/filmstrip/functions.any.ts index 364f335961..1a3cb9e233 100644 --- a/react/features/filmstrip/functions.any.ts +++ b/react/features/filmstrip/functions.any.ts @@ -1,4 +1,4 @@ -import { IStore } from '../app/types'; +import { IReduxState, IStore } from '../app/types'; import { getActiveSpeakersToBeDisplayed, getVirtualScreenshareParticipantOwnerId @@ -95,3 +95,15 @@ export function updateRemoteParticipantsOnLeave(store: IStore, participantId: st reorderedParticipants.delete(participantId) && store.dispatch(setRemoteParticipants(Array.from(reorderedParticipants))); } + +/** + * Returns whether tileview is completely disabled. + * + * @param {IReduxState} state - Redux state. + * @returns {boolean} - Whether tileview is completely disabled. + */ +export function isTileViewModeDisabled(state: IReduxState) { + const { tileView = {} } = state['features/base/config']; + + return tileView.disabled; +} diff --git a/react/features/toolbox/components/web/Toolbox.tsx b/react/features/toolbox/components/web/Toolbox.tsx index 3ba1723d2e..e8f4e814d6 100644 --- a/react/features/toolbox/components/web/Toolbox.tsx +++ b/react/features/toolbox/components/web/Toolbox.tsx @@ -290,7 +290,7 @@ const Toolbox = ({ setButtonsNotifyClickMode(buttons); const isHangupVisible = isToolbarButtonEnabled('hangup', _toolbarButtons); - let { order } = THRESHOLDS.find(({ width }) => _clientWidth > width) + const { order } = THRESHOLDS.find(({ width }) => _clientWidth > width) || THRESHOLDS[THRESHOLDS.length - 1]; const keys = Object.keys(buttons); @@ -302,11 +302,8 @@ const Toolbox = ({ !_jwtDisabledButtons.includes(key) && (isToolbarButtonEnabled(key, _toolbarButtons) || isToolbarButtonEnabled(alias, _toolbarButtons)) ); - const filteredKeys = filtered.map(button => button.key); - order = order.filter(key => filteredKeys.includes(buttons[key as keyof typeof buttons].key)); - - let sliceIndex = order.length + 2; + let sliceIndex = _overflowDrawer ? order.length + 2 : order.length + 1; if (isHangupVisible) { sliceIndex -= 1; diff --git a/react/features/video-layout/actions.any.ts b/react/features/video-layout/actions.any.ts index 5b3c5a77d2..b236890de4 100644 --- a/react/features/video-layout/actions.any.ts +++ b/react/features/video-layout/actions.any.ts @@ -1,4 +1,5 @@ import { IStore } from '../app/types'; +import { isTileViewModeDisabled } from '../filmstrip/functions.any'; import { SET_TILE_VIEW, @@ -34,9 +35,13 @@ export function virtualScreenshareParticipantsUpdated(participantIds: Array { + const tileViewDisabled = isTileViewModeDisabled(getState()); + + !tileViewDisabled && dispatch({ + type: SET_TILE_VIEW, + enabled + }); }; } diff --git a/react/features/video-layout/functions.any.ts b/react/features/video-layout/functions.any.ts index 90d926ea6b..ed392735e9 100644 --- a/react/features/video-layout/functions.any.ts +++ b/react/features/video-layout/functions.any.ts @@ -4,7 +4,7 @@ import { getFeatureFlag } from '../base/flags/functions'; import { pinParticipant } from '../base/participants/actions'; import { getParticipantCount, getPinnedParticipant } from '../base/participants/functions'; import { FakeParticipant } from '../base/participants/types'; -import { isStageFilmstripAvailable } from '../filmstrip/functions'; +import { isStageFilmstripAvailable, isTileViewModeDisabled } from '../filmstrip/functions'; import { isVideoPlaying } from '../shared-video/functions'; import { VIDEO_QUALITY_LEVELS } from '../video-quality/constants'; import { getReceiverVideoQualityLevel } from '../video-quality/functions'; @@ -60,6 +60,12 @@ export function getCurrentLayout(state: IReduxState) { * @returns {boolean} True if tile view should be displayed. */ export function shouldDisplayTileView(state: IReduxState) { + const tileViewDisabled = isTileViewModeDisabled(state); + + if (tileViewDisabled) { + return false; + } + const { tileViewEnabled } = state['features/video-layout'] ?? {}; if (tileViewEnabled !== undefined) {