Add config flag for tile responsiveness

config.js

@@ -326,6 +326,9 @@ var config = {
     // UI
     //
 
+    // Disables responsive tiles.
+    // disableResponsiveTiles: false,
+
     // Hides lobby button
     // hideLobbyButton: false,
 

react/features/base/config/configWhitelist.js

@@ -89,6 +89,7 @@ export default [
     'disableProfile',
     'disableRemoteControl',
     'disableRemoteMute',
+    'disableResponsiveTiles',
     'disableRtx',
     'disableShortcuts',
     'disableSimulcast',

react/features/filmstrip/actions.web.js

@@ -1,5 +1,6 @@
 // @flow
 
+import { toState } from '../base/redux';
 import { CHAT_SIZE } from '../chat/constants';
 
 import { SET_HORIZONTAL_VIEW_DIMENSIONS, SET_TILE_VIEW_DIMENSIONS } from './actionTypes';
@@ -15,28 +16,30 @@ const TILE_VIEW_SIDE_MARGINS = 20;
  *
  * @param {Object} dimensions - Whether the filmstrip is visible.
  * @param {Object} windowSize - The size of the window.
- * @param {boolean} isChatOpen - Whether the chat panel is displayed, in
+ * @param {Object | Function} stateful - An object or function that can be
- * order to properly compute the tile view size.
+ * resolved to Redux state using the {@code toState} function.
- * @param {boolean} isToolboxVisible - Whether the toolbox is visible, in order
- * to adjust the available size.
  * @returns {{
  *     type: SET_TILE_VIEW_DIMENSIONS,
  *     dimensions: Object
  * }}
  */
-export function setTileViewDimensions(dimensions: Object, windowSize: Object, isChatOpen: boolean) {
+export function setTileViewDimensions(dimensions: Object, windowSize: Object, stateful: Object | Function) {
+    const state = toState(stateful);
     const { clientWidth, clientHeight } = windowSize;
     const heightToUse = clientHeight;
     let widthToUse = clientWidth;
+    const { isOpen } = state['features/chat'];
+    const { disableResponsiveTiles } = state['features/base/config'];
 
-    if (isChatOpen) {
+    if (isOpen) {
         widthToUse -= CHAT_SIZE;
     }
 
     const thumbnailSize = calculateThumbnailSizeForTileView({
         ...dimensions,
         clientWidth: widthToUse,
-        clientHeight: heightToUse
+        clientHeight: heightToUse,
+        disableResponsiveTiles
     });
     const filmstripWidth = dimensions.columns * (TILE_VIEW_SIDE_MARGINS + thumbnailSize.width);
 

react/features/filmstrip/functions.web.js

@@ -140,9 +140,15 @@ export function calculateThumbnailSizeForTileView({
     columns,
     visibleRows,
     clientWidth,
-    clientHeight
+    clientHeight,
+    disableResponsiveTiles
 }: Object) {
-    const aspectRatio = clientWidth < ASPECT_RATIO_BREAKPOINT ? SQUARE_TILE_ASPECT_RATIO : TILE_ASPECT_RATIO;
+    let aspectRatio = TILE_ASPECT_RATIO;
+
+    if (!disableResponsiveTiles && clientWidth < ASPECT_RATIO_BREAKPOINT) {
+        aspectRatio = SQUARE_TILE_ASPECT_RATIO;
+    }
+
     const viewWidth = clientWidth - TILE_VIEW_SIDE_MARGINS;
     const viewHeight = clientHeight - TILE_VIEW_SIDE_MARGINS;
     const initialWidth = viewWidth / columns;

react/features/filmstrip/middleware.web.js

@@ -29,7 +29,6 @@ MiddlewareRegistry.register(store => next => action => {
         case LAYOUTS.TILE_VIEW: {
             const { gridDimensions } = state['features/filmstrip'].tileViewDimensions;
             const { clientHeight, clientWidth } = state['features/base/responsive-ui'];
-            const { isOpen } = state['features/chat'];
 
             store.dispatch(
                 setTileViewDimensions(
@@ -38,7 +37,7 @@ MiddlewareRegistry.register(store => next => action => {
                         clientHeight,
                         clientWidth
                     },
-                    isOpen
+                    store
                 )
             );
             break;

react/features/filmstrip/subscriber.web.js

@@ -29,7 +29,6 @@ StateListenerRegistry.register(
 
             if (!equals(gridDimensions, oldGridDimensions)) {
                 const { clientHeight, clientWidth } = state['features/base/responsive-ui'];
-                const { isOpen } = state['features/chat'];
 
                 store.dispatch(
                     setTileViewDimensions(
@@ -38,7 +37,7 @@ StateListenerRegistry.register(
                             clientHeight,
                             clientWidth
                         },
-                        isOpen
+                        store
                     )
                 );
             }
@@ -56,7 +55,6 @@ StateListenerRegistry.register(
         switch (layout) {
         case LAYOUTS.TILE_VIEW: {
             const { clientHeight, clientWidth } = state['features/base/responsive-ui'];
-            const { isOpen } = state['features/chat'];
 
             store.dispatch(
                 setTileViewDimensions(
@@ -65,7 +63,7 @@ StateListenerRegistry.register(
                         clientHeight,
                         clientWidth
                     },
-                    isOpen
+                    store
                 )
             );
             break;
@@ -126,7 +124,7 @@ StateListenerRegistry.register(
                         clientHeight,
                         clientWidth
                     },
-                    isChatOpen
+                    store
                 )
             );
         }
@@ -190,7 +188,6 @@ StateListenerRegistry.register(
         if (shouldDisplayTileView(state)) {
             const gridDimensions = getTileViewGridDimensions(state);
             const { clientHeight, clientWidth } = state['features/base/responsive-ui'];
-            const { isOpen } = state['features/chat'];
 
             store.dispatch(
                 setTileViewDimensions(
@@ -199,7 +196,7 @@ StateListenerRegistry.register(
                         clientHeight,
                         clientWidth
                     },
-                    isOpen
+                    store
                 )
             );
         }

react/features/video-layout/functions.js

@@ -42,28 +42,32 @@ export function getCurrentLayout(state: Object) {
  */
 export function getMaxColumnCount(state: Object) {
     const configuredMax = interfaceConfig.TILE_VIEW_MAX_COLUMNS || DEFAULT_MAX_COLUMNS;
-    const { clientWidth } = state['features/base/responsive-ui'];
+    const { disableResponsiveTiles } = state['features/base/config'];
-    let availableWidth = clientWidth;
-    const participantCount = getParticipantCount(state);
-    const { isOpen } = state['features/chat'];
 
-    if (isOpen) {
+    if (!disableResponsiveTiles) {
-        availableWidth -= CHAT_SIZE;
+        const { clientWidth } = state['features/base/responsive-ui'];
-    }
+        let availableWidth = clientWidth;
+        const participantCount = getParticipantCount(state);
+        const { isOpen } = state['features/chat'];
 
-    // If there are just two participants in a conference, enforce single-column view for mobile size.
+        if (isOpen) {
-    if (participantCount === 2 && availableWidth < ASPECT_RATIO_BREAKPOINT) {
+            availableWidth -= CHAT_SIZE;
-        return Math.min(1, Math.max(configuredMax, 1));
+        }
-    }
 
-    // Enforce single column view at very small screen widths.
+        // If there are just two participants in a conference, enforce single-column view for mobile size.
-    if (availableWidth < SINGLE_COLUMN_BREAKPOINT) {
+        if (participantCount === 2 && availableWidth < ASPECT_RATIO_BREAKPOINT) {
-        return Math.min(1, Math.max(configuredMax, 1));
+            return Math.min(1, Math.max(configuredMax, 1));
-    }
+        }
 
-    // Enforce two column view below breakpoint.
+        // Enforce single column view at very small screen widths.
-    if (availableWidth < TWO_COLUMN_BREAKPOINT) {
+        if (availableWidth < SINGLE_COLUMN_BREAKPOINT) {
-        return Math.min(2, Math.max(configuredMax, 1));
+            return Math.min(1, Math.max(configuredMax, 1));
+        }
+
+        // Enforce two column view below breakpoint.
+        if (availableWidth < TWO_COLUMN_BREAKPOINT) {
+            return Math.min(2, Math.max(configuredMax, 1));
+        }
     }
 
     return Math.min(Math.max(configuredMax, 1), ABSOLUTE_MAX_COLUMNS);