refactor(FilmStrip): calculateThumbnailSizeFromAvailable

interface_config.js

@@ -41,10 +41,6 @@ var interfaceConfig = { // eslint-disable-line no-unused-vars
     RANDOM_AVATAR_URL_PREFIX: false,
     RANDOM_AVATAR_URL_SUFFIX: false,
     FILM_STRIP_MAX_HEIGHT: 120,
-    LOCAL_THUMBNAIL_RATIO_WIDTH: 16,
-    LOCAL_THUMBNAIL_RATIO_HEIGHT: 9,
-    REMOTE_THUMBNAIL_RATIO_WIDTH: 1,
-    REMOTE_THUMBNAIL_RATIO_HEIGHT: 1,
     // Enables feedback star animation.
     ENABLE_FEEDBACK_ANIMATION: false,
     DISABLE_FOCUS_INDICATOR: false,
@@ -52,5 +48,7 @@ var interfaceConfig = { // eslint-disable-line no-unused-vars
     // disables the ringing sound when the RingOverlay is shown.
     DISABLE_RINGING: false,
     AUDIO_LEVEL_PRIMARY_COLOR: "rgba(255,255,255,0.7)",
-    AUDIO_LEVEL_SECONDARY_COLOR: "rgba(255,255,255,0.4)"
+    AUDIO_LEVEL_SECONDARY_COLOR: "rgba(255,255,255,0.4)",
+    LOCAL_THUMBNAIL_RATIO: 16/9, //16:9
+    REMOTE_THUMBNAIL_RATIO: 1, //1:1
 };

modules/UI/videolayout/FilmStrip.js

@@ -72,40 +72,6 @@ const FilmStrip = {
         return this.calculateThumbnailSizeFromAvailable(width, height);
     },
 
-    /**
-     * Normalizes local and remote thumbnail ratios
-     */
-    normalizeThumbnailRatio () {
-        let remoteHeightRatio = interfaceConfig.REMOTE_THUMBNAIL_RATIO_HEIGHT;
-        let remoteWidthRatio = interfaceConfig.REMOTE_THUMBNAIL_RATIO_WIDTH;
-
-        let localHeightRatio = interfaceConfig.LOCAL_THUMBNAIL_RATIO_HEIGHT;
-        let localWidthRatio = interfaceConfig.LOCAL_THUMBNAIL_RATIO_WIDTH;
-
-        let commonHeightRatio = remoteHeightRatio * localHeightRatio;
-
-        let localRatioCoefficient = localWidthRatio / localHeightRatio;
-        let remoteRatioCoefficient = remoteWidthRatio / remoteHeightRatio;
-
-        remoteWidthRatio = commonHeightRatio * remoteRatioCoefficient;
-        remoteHeightRatio = commonHeightRatio;
-
-        localWidthRatio = commonHeightRatio * localRatioCoefficient;
-        localHeightRatio = commonHeightRatio;
-
-        let localRatio = {
-            widthRatio: localWidthRatio,
-            heightRatio: localHeightRatio
-        };
-
-        let remoteRatio = {
-            widthRatio: remoteWidthRatio,
-            heightRatio: remoteHeightRatio
-        };
-
-        return { localRatio, remoteRatio };
-    },
-
     calculateAvailableSize() {
         let availableHeight = interfaceConfig.FILM_STRIP_MAX_HEIGHT;
         let thumbs = this.getThumbs(true);
@@ -181,34 +147,67 @@ const FilmStrip = {
         return { availableWidth, availableHeight };
     },
 
+    /**
+     * Calculate the thumbnail size in order to fit all the thumnails in passed
+     * dimensions.
+     * NOTE: Here we assume that the remote and local thumbnails are with the
+     * same height.
+     * @param {int} availableWidth the maximum width for all thumbnails
+     * @param {int} availableHeight the maximum height for all thumbnails
+     */
     calculateThumbnailSizeFromAvailable(availableWidth, availableHeight) {
-        let { localRatio, remoteRatio } = this.normalizeThumbnailRatio();
-        let { remoteThumbs } = this.getThumbs(true);
-        let remoteProportion = remoteRatio.widthRatio * remoteThumbs.length;
-        let widthProportion = remoteProportion + localRatio.widthRatio;
-
-        let heightUnit = availableHeight / localRatio.heightRatio;
-        let widthUnit = availableWidth / widthProportion;
+        /**
+         * Let:
+         * lW - width of the local thumbnail
+         * rW - width of the remote thumbnail
+         * h - the height of the thumbnails
+         * remoteRatio - width:height for the remote thumbnail
+         * localRatio - width:height for the local thumbnail
+         * numberRemoteThumbs - number of remote thumbnails (we have only one
+         * local thumbnail)
+         *
+         * Since the height for local thumbnail = height for remote thumbnail
+         * and we know the ratio (width:height) for the local and for the
+         * remote thumbnail we can find rW/lW:
+         * rW / remoteRatio = lW / localRatio then -
+         * remoteLocalWidthRatio = rW / lW = remoteRatio / localRatio
+         * and rW = lW * remoteRatio / localRatio = lW * remoteLocalWidthRatio
+         * And the total width for the thumbnails is:
+         * totalWidth = rW * numberRemoteThumbs + lW
+         * = lW * remoteLocalWidthRatio * numberRemoteThumbs + lW =
+         * lW * (remoteLocalWidthRatio * numberRemoteThumbs + 1)
+         * and the h = lW/localRatio
+         *
+         * In order to fit all the thumbails in the area defined by
+         * availableWidth * availableHeight we should check one of the
+         * following options:
+         * 1) if availableHeight == h - totalWidth should be less than
+         * availableWidth
+         * 2) if availableWidth ==  totalWidth - h should be less than
+         * availableHeight
+         *
+         * 1) or 2) will be true and we are going to use it to calculate all
+         * sizes.
+         *
+         * if 1) is true that means that
+         * availableHeight/h > availableWidth/totalWidth otherwise 2) is true
+         */
 
-        if (heightUnit < widthUnit) {
-            widthUnit = heightUnit;
-        }
-        else
-            heightUnit = widthUnit;
-
-        let localVideo = {
-            thumbWidth: widthUnit * localRatio.widthRatio,
-            thumbHeight: heightUnit * localRatio.heightRatio
-        };
-        let remoteVideo = {
-            thumbWidth: widthUnit * remoteRatio.widthRatio,
-            thumbHeight: widthUnit * remoteRatio.heightRatio
-        };
-
-        return {
-            localVideo,
-            remoteVideo
-        };
+        const numberRemoteThumbs = this.getThumbs(true).remoteThumbs.length;
+        const remoteLocalWidthRatio = interfaceConfig.REMOTE_THUMBNAIL_RATIO /
+            interfaceConfig.LOCAL_THUMBNAIL_RATIO;
+        const lW = Math.min(availableWidth /
+            (remoteLocalWidthRatio * numberRemoteThumbs + 1), availableHeight *
+            interfaceConfig.LOCAL_THUMBNAIL_RATIO);
+        const h = lW / interfaceConfig.LOCAL_THUMBNAIL_RATIO;
+        return { localVideo:{
+                        thumbWidth: lW,
+                        thumbHeight: h
+                    }, remoteVideo: {
+                        thumbWidth: lW * remoteLocalWidthRatio,
+                        thumbHeight: h
+                    }
+                };
     },
 
     resizeThumbnails (local, remote,