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

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

react/features/filmstrip/actions.web.js

@@ -17,23 +17,32 @@ const TILE_VIEW_SIDE_MARGINS = 10 * 2;
  * @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

@@ -94,17 +94,13 @@ export function calculateThumbnailSizeForTileView({
     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

@@ -30,6 +30,7 @@ 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(
@@ -38,7 +39,8 @@ MiddlewareRegistry.register(store => next => action => {
                         clientHeight,
                         clientWidth
                     },
-                    isOpen
+                    isOpen,
+                    visible
                 )
             );
             break;

react/features/filmstrip/subscriber.web.js

@@ -18,10 +18,12 @@ StateListenerRegistry.register(
         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,
@@ -29,7 +31,8 @@ StateListenerRegistry.register(
                             clientHeight,
                             clientWidth
                         },
-                        isOpen
+                        isOpen,
+                        visible
                     )
                 );
             }
@@ -48,6 +51,7 @@ 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(
@@ -56,7 +60,8 @@ StateListenerRegistry.register(
                         clientHeight,
                         clientWidth
                     },
-                    isOpen
+                    isOpen,
+                    visible
                 )
             );
             break;
@@ -109,6 +114,7 @@ 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(
@@ -117,7 +123,35 @@ StateListenerRegistry.register(
                         clientHeight,
                         clientWidth
                     },
-                    isChatOpen
+                    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
                 )
             );
         }