fix(tile-view) reduce margins, take 2

Due to how the filmstrip size if computed I don't think there is a good way to
animate the change in size, so just ignore the toolbar, it will be hidden soon
enough.

css/filmstrip/_tile_view.scss

@@ -109,14 +109,4 @@
     .has-overflow .videocontainer {
         align-self: baseline;
     }
-
-    /**
-     * Firefox flex acts a little differently. To make sure the bottom row of
-     * thumbnails is not overlapped by the horizontal toolbar, margin is added
-     * to the local thumbnail to keep it from the bottom of the screen. It is
-     * assumed the local thumbnail will always be on the bottom row.
-     */
-    .has-overflow #localVideoContainer {
-        margin-bottom: 100px !important;
-    }
 }

react/features/filmstrip/actions.web.js

@@ -6,9 +6,9 @@ import { SET_HORIZONTAL_VIEW_DIMENSIONS, SET_TILE_VIEW_DIMENSIONS } from './acti
 import { calculateThumbnailSizeForHorizontalView, calculateThumbnailSizeForTileView } from './functions';
 
 /**
- * The size of the side margins for each tile as set in CSS.
+ * The size of the side margins for the entire tile view area.
  */
-const TILE_VIEW_SIDE_MARGINS = 10 * 2;
+const TILE_VIEW_SIDE_MARGINS = 20;
 
 /**
  * Sets the dimensions of the tile view grid.
@@ -24,21 +24,15 @@ const TILE_VIEW_SIDE_MARGINS = 10 * 2;
  *     dimensions: Object
  * }}
  */
-export function setTileViewDimensions(
-        dimensions: Object, windowSize: Object, isChatOpen: boolean, isToolboxVisible: boolean) {
+export function setTileViewDimensions(dimensions: Object, windowSize: Object, isChatOpen: boolean) {
     const { clientWidth, clientHeight } = windowSize;
-    let heightToUse = clientHeight;
+    const heightToUse = clientHeight;
     let widthToUse = clientWidth;
 
     if (isChatOpen) {
         widthToUse -= CHAT_SIZE;
     }
 
-    if (isToolboxVisible) {
-        // The distance from the top and bottom of the screen, to avoid overlapping UI elements.
-        heightToUse -= 150;
-    }
-
     const thumbnailSize = calculateThumbnailSizeForTileView({
         ...dimensions,
         clientWidth: widthToUse,

react/features/filmstrip/functions.web.js

@@ -10,6 +10,10 @@ import { TILE_ASPECT_RATIO } from './constants';
 
 declare var interfaceConfig: Object;
 
+// Minimum space to keep between the sides of the tiles and the sides
+// of the window.
+const TILE_VIEW_SIDE_MARGINS = 20;
+
 /**
  * Returns true if the filmstrip on mobile is visible, false otherwise.
  *
@@ -94,13 +98,8 @@ export function calculateThumbnailSizeForTileView({
     clientWidth,
     clientHeight
 }: Object) {
-    // Minimum space to keep between the sides of the tiles and the sides
-    // of the window.
-    const sideMargins = 30 * 2;
-
-    const verticalMargins = visibleRows * 10;
-    const viewWidth = clientWidth - sideMargins;
-    const viewHeight = clientHeight - verticalMargins;
+    const viewWidth = clientWidth - TILE_VIEW_SIDE_MARGINS;
+    const viewHeight = clientHeight - TILE_VIEW_SIDE_MARGINS;
     const initialWidth = viewWidth / columns;
     const aspectRatioHeight = initialWidth / TILE_ASPECT_RATIO;
     const height = Math.floor(Math.min(aspectRatioHeight, viewHeight / visibleRows));

react/features/filmstrip/middleware.web.js

@@ -30,7 +30,6 @@ MiddlewareRegistry.register(store => next => action => {
             const { gridDimensions } = state['features/filmstrip'].tileViewDimensions;
             const { clientHeight, clientWidth } = state['features/base/responsive-ui'];
             const { isOpen } = state['features/chat'];
-            const { visible } = state['features/toolbox'];
 
             store.dispatch(
                 setTileViewDimensions(
@@ -39,8 +38,7 @@ MiddlewareRegistry.register(store => next => action => {
                         clientHeight,
                         clientWidth
                     },
-                    isOpen,
-                    visible
+                    isOpen
                 )
             );
             break;

react/features/filmstrip/subscriber.web.js

@@ -22,7 +22,6 @@ StateListenerRegistry.register(
             if (!equals(gridDimensions, oldGridDimensions)) {
                 const { clientHeight, clientWidth } = state['features/base/responsive-ui'];
                 const { isOpen } = state['features/chat'];
-                const { visible } = state['features/toolbox'];
 
                 store.dispatch(
                     setTileViewDimensions(
@@ -31,8 +30,7 @@ StateListenerRegistry.register(
                             clientHeight,
                             clientWidth
                         },
-                        isOpen,
-                        visible
+                        isOpen
                     )
                 );
             }
@@ -51,7 +49,6 @@ StateListenerRegistry.register(
         case LAYOUTS.TILE_VIEW: {
             const { clientHeight, clientWidth } = state['features/base/responsive-ui'];
             const { isOpen } = state['features/chat'];
-            const { visible } = state['features/toolbox'];
 
             store.dispatch(
                 setTileViewDimensions(
@@ -60,8 +57,7 @@ StateListenerRegistry.register(
                         clientHeight,
                         clientWidth
                     },
-                    isOpen,
-                    visible
+                    isOpen
                 )
             );
             break;
@@ -114,7 +110,6 @@ StateListenerRegistry.register(
         if (shouldDisplayTileView(state)) {
             const gridDimensions = getTileViewGridDimensions(state);
             const { clientHeight, clientWidth } = state['features/base/responsive-ui'];
-            const { visible } = state['features/toolbox'];
 
             store.dispatch(
                 setTileViewDimensions(
@@ -123,35 +118,7 @@ StateListenerRegistry.register(
                         clientHeight,
                         clientWidth
                     },
-                    isChatOpen,
-                    visible
-                )
-            );
-        }
-    });
-
-/**
- * Listens for changes in the chat state to calculate the dimensions of the tile view grid and the tiles.
- */
-StateListenerRegistry.register(
-    /* selector */ state => state['features/toolbox'].visible,
-    /* listener */ (visible, store) => {
-        const state = store.getState();
-
-        if (shouldDisplayTileView(state)) {
-            const gridDimensions = getTileViewGridDimensions(state);
-            const { clientHeight, clientWidth } = state['features/base/responsive-ui'];
-            const { isOpen } = state['features/chat'];
-
-            store.dispatch(
-                setTileViewDimensions(
-                    gridDimensions,
-                    {
-                        clientHeight,
-                        clientWidth
-                    },
-                    isOpen,
-                    visible
+                    isChatOpen
                 )
             );
         }