fix(resizable-filmstrip): grid view paddings.

config.js

@@ -1302,7 +1302,14 @@ var config = {
     //     // Disables user resizable filmstrip. Also, allows configuration of the filmstrip
     //     // (width, tiles aspect ratios) through the interfaceConfig options.
     //     disableResizable: false,
-    // }
+    // },
+
+    // Tile view related config options.
+    // tileView: {
+    //     // The optimal number of tiles that are going to be shown in tile view. Depending on the screen size it may
+    //     // not be possible to show the exact number of participants specified here.
+    //     numberOfVisibleTiles: 25
+    // },
 
 
     // Specifies whether the chat emoticons are disabled or not

css/filmstrip/_vertical_filmstrip.scss

@@ -117,6 +117,25 @@
         height: calc(100% - calc(#{$newToolbarSizeWithPadding} + #{$scrollHeight}));
     }
 
+    .filmstrip__videos.vertical-view-grid#remoteVideos {
+        align-items: 'center';
+        border: 0px;
+        padding-right: 7px;
+
+        &.has-scroll {
+            padding-right: 0px;
+        }
+
+        .remote-videos > div {
+            left: 0px; // fixes an issue on FF - the div is aligned to the right by default for some reason
+        }
+
+        .videocontainer {
+            border: 0px;
+            margin: 2px;
+        }
+    }
+
     .remote-videos {
         display: flex;
         overscroll-behavior: contain;
@@ -125,10 +144,6 @@
             transition: height .3s ease-in;
         }
 
-        &.vertical-grid-margin > div {
-            margin-right: $scrollHeight;
-        }
-
         & > div {
             position: absolute;
             transition: opacity 1s;

react/features/filmstrip/actions.web.js

@@ -35,10 +35,10 @@ import {
     calculateResponsiveTileViewDimensions,
     calculateThumbnailSizeForHorizontalView,
     calculateThumbnailSizeForVerticalView,
+    getNumberOfPartipantsForTileView,
     isFilmstripResizable,
     showGridInVerticalView
 } from './functions';
-import { getNumberOfPartipantsForTileView } from './functions.web';
 
 export * from './actions.any';
 
@@ -74,7 +74,6 @@ export function setTileViewDimensions() {
                 clientWidth,
                 clientHeight,
                 disableTileEnlargement,
-                isVerticalFilmstrip: false,
                 maxColumns,
                 numberOfParticipants,
                 numberOfVisibleTiles
@@ -146,7 +145,7 @@ export function setVerticalViewDimensions() {
             const thumbnailsTotalHeight = rows * (TILE_VERTICAL_MARGIN + height);
             const hasScroll = clientHeight < thumbnailsTotalHeight;
             const widthOfFilmstrip = (columns * (TILE_HORIZONTAL_MARGIN + width)) + (hasScroll ? SCROLL_SIZE : 0);
-            const filmstripHeight = Math.min(clientHeight, thumbnailsTotalHeight);
+            const filmstripHeight = Math.min(clientHeight - TILE_VIEW_GRID_VERTICAL_MARGIN, thumbnailsTotalHeight);
 
             gridView = {
                 gridDimensions: {
@@ -156,7 +155,8 @@ export function setVerticalViewDimensions() {
                 thumbnailSize: {
                     height,
                     width
-                }
+                },
+                hasScroll
             };
 
             filmstripDimensions = {

react/features/filmstrip/components/web/Filmstrip.js

@@ -320,7 +320,8 @@ class Filmstrip extends PureComponent <Props, State> {
         const filmstrip = (<>
             <div
                 className = { clsx(this.props._videosClassName,
-                    !tileViewActive && !_resizableFilmstrip && 'filmstrip-hover') }
+                    !tileViewActive && !_resizableFilmstrip && 'filmstrip-hover',
+                    _verticalViewGrid && 'vertical-view-grid') }
                 id = 'remoteVideos'>
                 {!_disableSelfView && !_verticalViewGrid && (
                     <div
@@ -822,6 +823,10 @@ function _mapStateToProps(state) {
         if (_verticalViewGrid) {
             gridDimensions = gridView.gridDimensions;
             _thumbnailSize = gridView.thumbnailSize;
+
+            if (gridView.hasScroll) {
+                videosClassName += ' has-scroll';
+            }
         } else {
             _thumbnailSize = remote;
         }

react/features/filmstrip/functions.web.js

@@ -32,6 +32,7 @@ import {
     DISPLAY_VIDEO,
     FILMSTRIP_GRID_BREAKPOINT,
     INDICATORS_TOOLTIP_POSITION,
+    SCROLL_SIZE,
     SQUARE_TILE_ASPECT_RATIO,
     TILE_ASPECT_RATIO,
     TILE_HORIZONTAL_MARGIN,
@@ -295,7 +296,6 @@ export function calculateResponsiveTileViewDimensions({
 }) {
     let height, width;
     let columns, rows;
-
     let dimensions = {
         maxArea: 0
     };
@@ -323,52 +323,31 @@ export function calculateResponsiveTileViewDimensions({
             isVerticalFilmstrip
         });
 
-        // eslint-disable-next-line no-negated-condition
-        if (typeof size !== 'undefined') {
-
+        if (size) {
             const { height: currentHeight, width: currentWidth, minHeightEnforced, maxVisibleRows } = size;
-
-            console.error(`Num col = ${c}, visibleRows=${visibleRows}, hxw=${
-                currentHeight}x${currentWidth}, maxVisibleRows=${maxVisibleRows}`);
             let area = currentHeight * currentWidth * Math.min(c * maxVisibleRows, numberOfParticipants);
+            const currentDimensions = {
+                maxArea: area,
+                height: currentHeight,
+                width: currentWidth,
+                columns: c,
+                rows: r
+            };
 
-            // we have a preference to show more columns if possible, that's why even if the area is equal we
-            // overwrite.
             if (!minHeightEnforced && area > dimensions.maxArea) {
-                dimensions = {
-                    maxArea: area,
-                    height: currentHeight,
-                    width: currentWidth,
-                    columns: c,
-                    rows: r
-                };
-            } else if (minHeightEnforced) {
-                // eslint-disable-next-line max-depth
-                if (area > minHeightEnforcedDimensions.maxArea) {
-                    minHeightEnforcedDimensions = {
-                        maxArea: area,
-                        height: currentHeight,
-                        width: currentWidth,
-                        columns: c,
-                        rows: r
+                dimensions = currentDimensions;
+            } else if (minHeightEnforced && area > minHeightEnforcedDimensions.maxArea) {
+                minHeightEnforcedDimensions = currentDimensions;
+            } else if (minHeightEnforced && maxVisibleRows === 0) {
+                area = currentHeight * currentWidth * Math.min(c, numberOfParticipants);
+
+                if (area > zeroVisibleRowsDimensions.maxArea) {
+                    zeroVisibleRowsDimensions = {
+                        ...currentDimensions,
+                        maxArea: area
                     };
-                } else if (maxVisibleRows === 0) {
-                    area = currentHeight * currentWidth * Math.min(c, numberOfParticipants);
-
-                    // eslint-disable-next-line max-depth
-                    if (area > zeroVisibleRowsDimensions.maxArea) {
-                        zeroVisibleRowsDimensions = {
-                            maxArea: area,
-                            height: currentHeight,
-                            width: currentWidth,
-                            columns: c,
-                            rows: r
-                        };
-                    }
                 }
             }
-        } else {
-            console.error(`Num col = ${c}, visibleRows=${visibleRows} not possible`);
         }
     }
 
@@ -415,7 +394,7 @@ export function calculateThumbnailSizeForTileView({
     const aspectRatio = getTileDefaultAspectRatio(disableResponsiveTiles, disableTileEnlargement, clientWidth);
     const minHeight = getThumbnailMinHeight(clientWidth);
     const viewWidth = clientWidth - (columns * TILE_HORIZONTAL_MARGIN)
-        - (isVerticalFilmstrip ? 0 : TILE_VIEW_GRID_HORIZONTAL_MARGIN);
+        - (isVerticalFilmstrip ? SCROLL_SIZE : TILE_VIEW_GRID_HORIZONTAL_MARGIN);
     const viewHeight = clientHeight - (minVisibleRows * TILE_VERTICAL_MARGIN) - TILE_VIEW_GRID_VERTICAL_MARGIN;
     const initialWidth = viewWidth / columns;
     let initialHeight = viewHeight / minVisibleRows;
@@ -478,6 +457,7 @@ export function calculateThumbnailSizeForTileView({
 
     // else
     // We can't fit that number of columns with the desired min height and aspect ratio.
+    return;
 }
 
 /**