feat(filmstrip) Add config for disabling vertical filmstrip (#13752)

config.js

@@ -1572,6 +1572,8 @@ var config = {
     // disableFilmstripAutohiding: false,
 
     // filmstrip: {
+    //     // Disable the vertical/horizonal filmstrip.
+    //     disabled: false,
     //     // Disables user resizable filmstrip. Also, allows configuration of the filmstrip
     //     // (width, tiles aspect ratios) through the interfaceConfig options.
     //     disableResizable: false,

react/features/base/config/configType.ts

@@ -401,6 +401,7 @@ export interface IConfig {
         disableResizable?: boolean;
         disableStageFilmstrip?: boolean;
         disableTopPanel?: boolean;
+        disabled?: boolean;
         minParticipantCountForTopPanel?: number;
     };
     firefox_fake_device?: string;

react/features/conference/components/web/Conference.tsx

@@ -15,6 +15,7 @@ import Chat from '../../../chat/components/web/Chat';
 import MainFilmstrip from '../../../filmstrip/components/web/MainFilmstrip';
 import ScreenshareFilmstrip from '../../../filmstrip/components/web/ScreenshareFilmstrip';
 import StageFilmstrip from '../../../filmstrip/components/web/StageFilmstrip';
+import { isFilmstripDisabled } from '../../../filmstrip/functions.web';
 import CalleeInfoContainer from '../../../invite/components/callee-info/CalleeInfoContainer';
 import LargeVideo from '../../../large-video/components/LargeVideo.web';
 import LobbyScreen from '../../../lobby/components/web/LobbyScreen';
@@ -63,6 +64,11 @@ interface IProps extends AbstractProps, WithTranslation {
      */
     _backgroundAlpha?: number;
 
+    /**
+     * Whether the vertical/horizonal filmstrip is disabled.
+     */
+    _filmstripDisabled: boolean;
+
     /**
      * Are any overlays visible?
      */
@@ -199,12 +205,14 @@ class Conference extends AbstractConference<IProps, any> {
      */
     render() {
         const {
+            _filmstripDisabled,
             _isAnyOverlayVisible,
             _layoutClassName,
             _notificationsVisible,
             _overflowDrawer,
             _showLobby,
             _showPrejoin,
+            _shouldDisplayTileView,
             t
         } = this.props;
 
@@ -230,7 +238,7 @@ class Conference extends AbstractConference<IProps, any> {
                             _showPrejoin || _showLobby || (<>
                                 <StageFilmstrip />
                                 <ScreenshareFilmstrip />
-                                <MainFilmstrip />
+                                { (!_filmstripDisabled || _shouldDisplayTileView) && <MainFilmstrip /> }
                             </>)
                         }
                     </div>
@@ -396,6 +404,7 @@ function _mapStateToProps(state: IReduxState) {
     return {
         ...abstractMapStateToProps(state),
         _backgroundAlpha: backgroundAlpha,
+        _filmstripDisabled: isFilmstripDisabled(state),
         _isAnyOverlayVisible: Boolean(getOverlayToRender(state)),
         _layoutClassName: LAYOUT_CLASSNAMES[getCurrentLayout(state) ?? ''],
         _mouseMoveCallbackInterval: mouseMoveCallbackInterval,

react/features/filmstrip/functions.web.ts

@@ -763,6 +763,18 @@ export function isStageFilmstripEnabled(state: IReduxState) {
     return Boolean(!filmstrip?.disableStageFilmstrip && interfaceConfig.VERTICAL_FILMSTRIP);
 }
 
+/**
+ * Whether the vertical/horizontal filmstrip is disabled.
+ *
+ * @param {Object} state - Redux state.
+ * @returns {boolean}
+ */
+export function isFilmstripDisabled(state: IReduxState) {
+    const { filmstrip } = state['features/base/config'];
+
+    return Boolean(filmstrip?.disabled);
+}
+
 /**
  * Gets the thumbnail type by filmstrip type.
  *