fix(thumbnail) Update tile resizing constraints (#10645)

disableTileEnlargement config now uses old behaviour (small tiles, not just small video in the tiles)
Update Firefox scrollbar style to match webkit
Show more rows when height allows it instead of stretching a fixed number of rows, but make sure we always try to fill the whole viewport
Added constraints for how narrow portrait tiles can be and how wide landscape tiles can be
Video should cover whole tile in tile view unless disableTileEnlargement is set or video is portrait
Added min height in px for tiles

css/_base.scss

@@ -6,6 +6,10 @@
 * {
     -webkit-user-select: none;
     user-select: none;
+
+    // Firefox only
+    scrollbar-width: thin;
+    scrollbar-color: rgba(0, 0, 0, .5) transparent;
 }
 
 input,

react/features/filmstrip/actions.web.js

@@ -39,7 +39,7 @@ export function setTileViewDimensions(dimensions: Object) {
     return (dispatch: Dispatch<any>, getState: Function) => {
         const state = getState();
         const { clientHeight, clientWidth } = state['features/base/responsive-ui'];
-        const { disableResponsiveTiles } = state['features/base/config'];
+        const { disableResponsiveTiles, disableTileEnlargement } = state['features/base/config'];
         const {
             height,
             width
@@ -47,7 +47,8 @@ export function setTileViewDimensions(dimensions: Object) {
             ...dimensions,
             clientWidth,
             clientHeight,
-            disableResponsiveTiles
+            disableResponsiveTiles,
+            disableTileEnlargement
         });
         const { columns, rows } = dimensions;
         const thumbnailsTotalHeight = rows * (TILE_VERTICAL_MARGIN + height);

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

@@ -469,12 +469,17 @@ class Thumbnail extends Component<Props, State> {
             _isHidden,
             _isScreenSharing,
             _participant,
+            _videoTrack,
             _width,
             horizontalOffset,
             style
         } = this.props;
 
+
         const tileViewActive = _currentLayout === LAYOUTS.TILE_VIEW;
+        const jitsiVideoTrack = _videoTrack?.jitsiTrack;
+        const track = jitsiVideoTrack?.track;
+        const isPortraitVideo = ((track && track.getSettings()?.aspectRatio) || 1) < 1;
 
         let styles: {
             avatar: Object,
@@ -494,7 +499,7 @@ class Thumbnail extends Component<Props, State> {
         }
 
         let videoStyles = null;
-        const doNotStretchVideo = (_height < 320 && tileViewActive)
+        const doNotStretchVideo = (isPortraitVideo && tileViewActive)
             || _disableTileEnlargement
             || _isScreenSharing;
 

react/features/filmstrip/constants.js

@@ -46,6 +46,21 @@ export const TWO_COLUMN_BREAKPOINT = 1000;
  */
 export const ASPECT_RATIO_BREAKPOINT = 500;
 
+/**
+ * Minimum height of tile for small screens.
+ */
+export const TILE_MIN_HEIGHT_SMALL = 150;
+
+/**
+ * Minimum height of tile for large screens.
+ */
+export const TILE_MIN_HEIGHT_LARGE = 200;
+
+/**
+ * Aspect ratio for portrait tiles. (height / width).
+ */
+export const TILE_PORTRAIT_ASPECT_RATIO = 1.3;
+
 /**
  * The default number of columns for tile view.
  */

react/features/filmstrip/functions.web.js

@@ -30,7 +30,10 @@ import {
     TILE_VERTICAL_MARGIN,
     TILE_VIEW_GRID_HORIZONTAL_MARGIN,
     TILE_VIEW_GRID_VERTICAL_MARGIN,
-    VERTICAL_FILMSTRIP_MIN_HORIZONTAL_MARGIN
+    VERTICAL_FILMSTRIP_MIN_HORIZONTAL_MARGIN,
+    TILE_MIN_HEIGHT_LARGE,
+    TILE_MIN_HEIGHT_SMALL,
+    TILE_PORTRAIT_ASPECT_RATIO
 } from './constants';
 
 export * from './functions.any';
@@ -183,7 +186,8 @@ export function calculateThumbnailSizeForTileView({
     rows,
     clientWidth,
     clientHeight,
-    disableResponsiveTiles
+    disableResponsiveTiles,
+    disableTileEnlargement
 }: Object) {
     let aspectRatio = TILE_ASPECT_RATIO;
 
@@ -191,6 +195,7 @@ export function calculateThumbnailSizeForTileView({
         aspectRatio = SQUARE_TILE_ASPECT_RATIO;
     }
 
+    const minHeight = clientWidth < ASPECT_RATIO_BREAKPOINT ? TILE_MIN_HEIGHT_SMALL : TILE_MIN_HEIGHT_LARGE;
     const viewWidth = clientWidth - (columns * TILE_HORIZONTAL_MARGIN) - TILE_VIEW_GRID_HORIZONTAL_MARGIN;
     const viewHeight = clientHeight - (minVisibleRows * TILE_VERTICAL_MARGIN) - TILE_VIEW_GRID_VERTICAL_MARGIN;
     const initialWidth = viewWidth / columns;
@@ -212,13 +217,54 @@ export function calculateThumbnailSizeForTileView({
         // window.
         height = Math.floor(Math.max(Math.min(scrollAspectRatioHeight, initialHeight), noScrollHeight));
         width = Math.floor(aspectRatio * height);
+
+        return {
+            height,
+            width
+        };
     }
 
+    if (disableTileEnlargement) {
+        return {
+            height,
+            width
+        };
+    }
+
+    if (initialHeight > noScrollHeight) {
+        height = Math.max(height, viewHeight / rows, minHeight);
+        width = Math.max(width, initialWidth);
+    } else {
+        height = Math.max(initialHeight, minHeight);
+        width = initialWidth;
+    }
+
+    if (height > width) {
+        const heightFromWidth = TILE_PORTRAIT_ASPECT_RATIO * width;
+
+        if (height > heightFromWidth && heightFromWidth < minHeight) {
+            return {
+                height,
+                width: height / TILE_PORTRAIT_ASPECT_RATIO
+            };
+        }
+
+        return {
+            height: Math.min(height, heightFromWidth),
+            width
+        };
+    } else if (height < width) {
+        return {
+            height,
+            width: Math.min(width, aspectRatio * height)
+        };
+    }
 
     return {
-        height: initialHeight,
-        width: initialWidth
+        height,
+        width
     };
+
 }
 
 /**