feat(tile-view) optimize for less margins

- Lower the inter-tile margin to 2px
- Remove the 100px top/bottom margin when the toolbar is hidden

css/filmstrip/_tile_view.scss

         box-sizing: border-box;
         display: flex;
         flex-direction: column;
-        height: calc(100vh - 200px);
+        height: 100vh;
         width: 100vw;
-        margin: 100px 0px;
     }
 
     .filmstrip__videos .videocontainer {
             border: 0;
             box-sizing: border-box;
             display: block;
-            margin: 5px;
+            margin: 2px;
         }
 
         video {

react/features/filmstrip/actions.web.js

  * @param {Object} windowSize - The size of the window.
  * @param {boolean} isChatOpen - Whether the chat panel is displayed, in
  * order to properly compute the tile view size.
+ * @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, isChatOpen: boolean, isToolboxVisible: boolean) {
     const { clientWidth, clientHeight } = windowSize;
+    let 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,
-        clientHeight
+        clientHeight: heightToUse
     });
     const filmstripWidth = dimensions.columns * (TILE_VIEW_SIDE_MARGINS + thumbnailSize.width);
 

react/features/filmstrip/functions.web.js

     clientWidth,
     clientHeight
 }: Object) {
-    // The distance from the top and bottom of the screen, as set by CSS, to
-    // avoid overlapping UI elements.
-    const topBottomPadding = 200;
-
     // 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 - topBottomPadding - verticalMargins;
+    const viewHeight = clientHeight - verticalMargins;
     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

             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(
                         clientHeight,
                         clientWidth
                     },
-                    isOpen
+                    isOpen,
+                    visible
                 )
             );
             break;

react/features/filmstrip/subscriber.web.js

         if (shouldDisplayTileView(state)) {
             const gridDimensions = getTileViewGridDimensions(state);
             const oldGridDimensions = state['features/filmstrip'].tileViewDimensions.gridDimensions;
-            const { clientHeight, clientWidth } = state['features/base/responsive-ui'];
-            const { isOpen } = state['features/chat'];
 
             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(
                         gridDimensions,
                             clientHeight,
                             clientWidth
                         },
-                        isOpen
+                        isOpen,
+                        visible
                     )
                 );
             }
         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(
                         clientHeight,
                         clientWidth
                     },
-                    isOpen
+                    isOpen,
+                    visible
                 )
             );
             break;
         if (shouldDisplayTileView(state)) {
             const gridDimensions = getTileViewGridDimensions(state);
             const { clientHeight, clientWidth } = state['features/base/responsive-ui'];
+            const { visible } = state['features/toolbox'];
+
+            store.dispatch(
+                setTileViewDimensions(
+                    gridDimensions,
+                    {
+                        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(
                         clientHeight,
                         clientWidth
                     },
-                    isChatOpen
+                    isOpen,
+                    visible
                 )
             );
         }