fix(large-video): Resize calculations.

Since the verical filmstrip doesn't set its width explicitly anymore,
calculating the available area for the large video based on the
filmstrip width retrieved from the HTML element was wrong
in the cases when the rendering and cleanup of the filmstrip hasn't
finish yet. For example when switching from tile view to stage view.

modules/UI/UI.js

@@ -166,7 +166,7 @@ UI.start = function() {
     // resizeVideoArea) because the animation is not visible anyway. Plus with
     // the current dom layout, the quality label is part of the video layout and
     // will be seen animating in.
-    VideoLayout.resizeVideoArea(true, false);
+    VideoLayout.resizeVideoArea();
 
     sharedVideoManager = new SharedVideoManager(eventEmitter);
 

modules/UI/etherpad/Etherpad.js

@@ -120,7 +120,7 @@ class Etherpad extends LargeContainer {
 
         if (interfaceConfig.VERTICAL_FILMSTRIP) {
             height = containerHeight - getToolboxHeight();
-            width = containerWidth - Filmstrip.getFilmstripWidth();
+            width = containerWidth - Filmstrip.getVerticalFilmstripWidth();
         } else {
             height = containerHeight - Filmstrip.getFilmstripHeight();
             width = containerWidth;

modules/UI/shared_video/SharedVideo.js

@@ -661,7 +661,7 @@ class SharedVideoContainer extends LargeContainer {
 
         if (interfaceConfig.VERTICAL_FILMSTRIP) {
             height = containerHeight - getToolboxHeight();
-            width = containerWidth - Filmstrip.getFilmstripWidth();
+            width = containerWidth - Filmstrip.getVerticalFilmstripWidth();
         } else {
             height = containerHeight - Filmstrip.getFilmstripHeight();
             width = containerWidth;

modules/UI/videolayout/Filmstrip.js

@@ -1,6 +1,6 @@
 /* global $, APP, interfaceConfig */
 
-import { isFilmstripVisible } from '../../../react/features/filmstrip';
+import { getVerticalFilmstripVisibleAreaWidth, isFilmstripVisible } from '../../../react/features/filmstrip';
 
 const Filmstrip = {
     /**
@@ -19,17 +19,12 @@ const Filmstrip = {
     },
 
     /**
-     * Returns the width of filmstip
-     * @returns {number} width
+     * Returns the width of the vertical filmstip if the filmstrip is visible and 0 otherwise.
+     *
+     * @returns {number} - The width of the vertical filmstip if the filmstrip is visible and 0 otherwise.
      */
-    getFilmstripWidth() {
-        const filmstrip = $('#remoteVideos');
-
-        return isFilmstripVisible(APP.store)
-            ? filmstrip.outerWidth()
-                - parseInt(filmstrip.css('paddingLeft'), 10)
-                - parseInt(filmstrip.css('paddingRight'), 10)
-            : 0;
+    getVerticalFilmstripWidth() {
+        return isFilmstripVisible(APP.store) ? getVerticalFilmstripVisibleAreaWidth() : 0;
     },
 
     /**

modules/UI/videolayout/VideoContainer.js

@@ -46,7 +46,7 @@ function computeDesktopVideoSize( // eslint-disable-line max-params
 
     if (interfaceConfig.VERTICAL_FILMSTRIP) {
         // eslint-disable-next-line no-param-reassign
-        videoSpaceWidth -= Filmstrip.getFilmstripWidth();
+        videoSpaceWidth -= Filmstrip.getVerticalFilmstripWidth();
     } else {
         // eslint-disable-next-line no-param-reassign
         videoSpaceHeight -= Filmstrip.getFilmstripHeight();
@@ -332,7 +332,7 @@ export class VideoContainer extends LargeContainer {
         /* eslint-enable max-params */
         if (this.stream && this.isScreenSharing()) {
             if (interfaceConfig.VERTICAL_FILMSTRIP) {
-                containerWidthToUse -= Filmstrip.getFilmstripWidth();
+                containerWidthToUse -= Filmstrip.getVerticalFilmstripWidth();
             }
 
             return getCameraVideoPosition(width,

modules/UI/videolayout/VideoLayout.js

@@ -542,15 +542,11 @@ const VideoLayout = {
 
     /**
      * Resizes the video area.
-     *
-     * TODO: Remove the "animate" param as it is no longer passed in as true.
-     *
-     * @param forceUpdate indicates that hidden thumbnails will be shown
      */
-    resizeVideoArea(animate = false) {
+    resizeVideoArea() {
         if (largeVideo) {
             largeVideo.updateContainerSize();
-            largeVideo.resize(animate);
+            largeVideo.resize(false);
         }
     },
 

react/features/filmstrip/functions.web.js

@@ -116,3 +116,20 @@ export function calculateThumbnailSizeForTileView({
         width
     };
 }
+
+/**
+ * Returns the width of the visible area (doesn't include the left margin/padding) of the the vertical filmstrip.
+ *
+ * @returns {number} - The width of the vertical filmstrip.
+ */
+export function getVerticalFilmstripVisibleAreaWidth() {
+    // Adding 11px for the 2px right margin, 2px borders on the left and right and 5px right padding.
+    // Also adding 7px for the scrollbar. Note that we are not counting the left margins and paddings because this
+    // function is used for calculating the available space and they are invisible.
+    // TODO: Check if we can remove the left margins and paddings from the CSS.
+    // FIXME: This function is used to calculate the size of the large video, etherpad or shared video. Once everything
+    // is reactified this calculation will need to move to the corresponding components.
+    const filmstripMaxWidth = (interfaceConfig.FILM_STRIP_MAX_HEIGHT || 120) + 18;
+
+    return Math.min(filmstripMaxWidth, window.innerWidth);
+}

react/features/video-layout/middleware.web.js

@@ -74,7 +74,7 @@ MiddlewareRegistry.register(store => next => action => {
         break;
 
     case SET_FILMSTRIP_VISIBLE:
-        VideoLayout.resizeVideoArea(true, false);
+        VideoLayout.resizeVideoArea();
         break;
 
     case TRACK_ADDED: