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

@@ -1593,6 +1593,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,

react/features/base/config/configType.ts

@@ -577,6 +577,7 @@ export interface IConfig {
         testMode?: boolean;
     };
     tileView?: {
+        disabled?: boolean;
         numberOfVisibleTiles?: number;
     };
     tokenAuthUrl?: string;

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': {

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;
+}

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;

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<stri
  * }}
  */
 export function setTileView(enabled?: boolean) {
-    return {
-        type: SET_TILE_VIEW,
-        enabled
+    return (dispatch: IStore['dispatch'], getState: IStore['getState']) => {
+        const tileViewDisabled = isTileViewModeDisabled(getState());
+
+        !tileViewDisabled && dispatch({
+            type: SET_TILE_VIEW,
+            enabled
+        });
     };
 }
 

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) {