fix(filmstrip) Fix resizable filmstrip (#11025)

Re-calculate tile sizes after config loaded
Make local tile always respect the ratio in interface_config
Merge calculate size for vertical view functions into one function

react/features/filmstrip/actions.web.js

@@ -26,7 +26,6 @@ import {
     calculateThumbnailSizeForHorizontalView,
     calculateThumbnailSizeForTileView,
     calculateThumbnailSizeForVerticalView,
-    calculateThumbnailSizeForResizableVerticalView,
     isFilmstripResizable,
     showGridInVerticalView
 } from './functions';
@@ -128,9 +127,7 @@ export function setVerticalViewDimensions() {
                 width: widthOfFilmstrip
             };
         } else {
-            thumbnails = resizableFilmstrip
-                ? calculateThumbnailSizeForResizableVerticalView(clientWidth, filmstripWidth.current)
-                : calculateThumbnailSizeForVerticalView(clientWidth);
+            thumbnails = calculateThumbnailSizeForVerticalView(clientWidth, filmstripWidth.current, resizableFilmstrip);
         }
 
         dispatch({

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

@@ -562,6 +562,7 @@ class Filmstrip extends PureComponent <Props, State> {
             _filmstripHeight,
             _filmstripWidth,
             _remoteParticipantsLength,
+            _resizableFilmstrip,
             _rows,
             _thumbnailHeight,
             _thumbnailWidth,
@@ -599,7 +600,7 @@ class Filmstrip extends PureComponent <Props, State> {
 
         const props = {
             itemCount: _remoteParticipantsLength,
-            className: 'filmstrip__videos remote-videos height-transition',
+            className: `filmstrip__videos remote-videos ${_resizableFilmstrip ? '' : 'height-transition'}`,
             height: _filmstripHeight,
             itemKey: this._listItemKey,
             itemSize: 0,

react/features/filmstrip/constants.js

@@ -256,6 +256,11 @@ export const INDICATORS_TOOLTIP_POSITION = {
  */
 export const DEFAULT_FILMSTRIP_WIDTH = 120;
 
+/**
+ * The default aspect ratio for the local tile.
+ */
+export const DEFAULT_LOCAL_TILE_ASPECT_RATIO = 16 / 9;
+
 /**
  * The width of the filmstrip at which it no longer goes above the stage view, but it pushes it.
  */

react/features/filmstrip/functions.web.js

@@ -22,6 +22,7 @@ import { getCurrentLayout, LAYOUTS } from '../video-layout';
 import {
     ASPECT_RATIO_BREAKPOINT,
     DEFAULT_FILMSTRIP_WIDTH,
+    DEFAULT_LOCAL_TILE_ASPECT_RATIO,
     DISPLAY_AVATAR,
     DISPLAY_VIDEO,
     FILMSTRIP_GRID_BREAKPOINT,
@@ -161,45 +162,26 @@ export function calculateThumbnailSizeForHorizontalView(clientHeight: number = 0
  * Calculates the size for thumbnails when in vertical view layout.
  *
  * @param {number} clientWidth - The height of the app window.
- * @returns {{local: {height, width}, remote: {height, width}}}
- */
-export function calculateThumbnailSizeForVerticalView(clientWidth: number = 0) {
-    const availableWidth = Math.min(
-        Math.max(clientWidth - VERTICAL_VIEW_HORIZONTAL_MARGIN, 0),
-        interfaceConfig.FILM_STRIP_MAX_HEIGHT || DEFAULT_FILMSTRIP_WIDTH);
-
-    return {
-        local: {
-            height: Math.floor(availableWidth / interfaceConfig.LOCAL_THUMBNAIL_RATIO),
-            width: availableWidth
-        },
-        remote: {
-            height: Math.floor(availableWidth / interfaceConfig.REMOTE_THUMBNAIL_RATIO),
-            width: availableWidth
-        }
-    };
-}
-
-/**
- * Calculates the size for thumbnails when in vertical view layout
- * and the filmstrip is resizable.
- *
- * @param {number} clientWidth - The height of the app window.
  * @param {number} filmstripWidth - The width of the filmstrip.
+ * @param {boolean} isResizable - Whether the filmstrip is resizable or not.
  * @returns {{local: {height, width}, remote: {height, width}}}
  */
-export function calculateThumbnailSizeForResizableVerticalView(clientWidth: number = 0, filmstripWidth: number = 0) {
+export function calculateThumbnailSizeForVerticalView(clientWidth: number = 0,
+        filmstripWidth: number = 0, isResizable = false) {
     const availableWidth = Math.min(
         Math.max(clientWidth - VERTICAL_VIEW_HORIZONTAL_MARGIN, 0),
-        filmstripWidth || DEFAULT_FILMSTRIP_WIDTH);
+        (isResizable ? filmstripWidth : interfaceConfig.FILM_STRIP_MAX_HEIGHT) || DEFAULT_FILMSTRIP_WIDTH);
 
     return {
         local: {
-            height: DEFAULT_FILMSTRIP_WIDTH,
+            height: Math.floor(availableWidth
+                / (interfaceConfig.LOCAL_THUMBNAIL_RATIO || DEFAULT_LOCAL_TILE_ASPECT_RATIO)),
             width: availableWidth
         },
         remote: {
-            height: DEFAULT_FILMSTRIP_WIDTH,
+            height: isResizable
+                ? DEFAULT_FILMSTRIP_WIDTH
+                : Math.floor(availableWidth / interfaceConfig.REMOTE_THUMBNAIL_RATIO),
             width: availableWidth
         }
     };

react/features/filmstrip/subscriber.web.js

@@ -184,3 +184,12 @@ StateListenerRegistry.register(
     /* listener */(_, store) => {
         store.dispatch(setVerticalViewDimensions());
     });
+
+/**
+ * Listens for changes in the filmstrip config to determine the size of the tiles.
+ */
+StateListenerRegistry.register(
+    /* selector */ state => state['features/base/config'].filmstrip?.disableResizable,
+    /* listener */(_, store) => {
+        store.dispatch(setVerticalViewDimensions());
+    });