Make filmstrip indicators to resize dynamically

css/_variables.scss

@@ -13,8 +13,8 @@ $hangupFontSize: 2em;
 $defaultToolbarSize: 50px;
 
 // Video layout.
-$thumbnailToolbarHeight: 22px;
-$thumbnailIndicatorBorder: 0px;
+$thumbnailToolbarHeight: 3em;
+$thumbnailIndicatorBorder: 0;
 $thumbnailIndicatorSize: $thumbnailToolbarHeight;
 $thumbnailVideoMargin: 2px;
 

css/_videolayout_default.scss

@@ -47,7 +47,76 @@
     top: 0;
     padding: $toolbarPadding;
     padding-bottom: 0;
-    height: $thumbnailIndicatorSize + $toolbarPadding;
+
+    span.indicator {
+        position: relative;
+        font-size: 8px;
+        text-align: center;
+        line-height: $thumbnailToolbarHeight;
+        display: none;
+        padding: 0;
+        margin-right: em(5, 8);
+        float: left;
+        @include circle($thumbnailIndicatorSize);
+        box-sizing: border-box;
+        z-index: 3;
+        background: $dominantSpeakerBg;
+        color: $thumbnailPictogramColor;
+        border: $thumbnailIndicatorBorder solid $thumbnailPictogramColor;
+
+        &:last-child {
+            margin-right: 0;
+        }
+
+        .indicatoricon {
+            position: absolute;
+            top: 50%;
+            left: 0;
+            @include transform(translateY(-50%));
+            width: $thumbnailIndicatorSize - 2 * $thumbnailIndicatorBorder;
+            height: $thumbnailIndicatorSize - 2 * $thumbnailIndicatorBorder;
+            line-height: $thumbnailIndicatorSize - 2 * $thumbnailIndicatorBorder;
+        }
+
+        .connection {
+            position: relative;
+            margin: 0 auto;
+            width: 12px;
+            height: 8px;
+
+            &_empty
+            {
+                @include topLeft();
+                max-width: 12px;
+                width: 12px;
+                color: #8B8B8B;/*#FFFFFF*/
+                overflow: hidden;
+            }
+
+            &_lost
+            {
+                @include topLeft();
+                max-width: 12px;
+                width: 12px;
+                color: #8B8B8B;
+                overflow: visible;
+            }
+
+            &_full
+            {
+                @include topLeft();
+                max-width: 12px;
+                width: 12px;
+                color: #FFFFFF;/*#15A1ED*/
+                overflow: hidden;
+            }
+        }
+
+        .icon-connection,
+        .icon-connection-lost {
+            font-size: 1em;
+        }
+    }
 }
 
 .videocontainer__hoverOverlay {
@@ -217,72 +286,6 @@
   background: $connectionIndicatorBg;
 }
 
-.videocontainer__toptoolbar span.indicator {
-    position: relative;
-    font-size: 8pt;
-    text-align: center;
-    line-height: $thumbnailToolbarHeight;
-    display: none;
-    padding: 0;
-    margin-right: 5px;
-    float: left;
-    @include circle($thumbnailIndicatorSize);
-    box-sizing: border-box;
-    z-index: 3;
-    background: $dominantSpeakerBg;
-    color: $thumbnailPictogramColor;
-    border: $thumbnailIndicatorBorder solid $thumbnailPictogramColor;
-
-    .indicatoricon {
-        position: absolute;
-        top: 50%;
-        left: 0;
-        @include transform(translateY(-50%));
-        width: $thumbnailIndicatorSize - 2 * $thumbnailIndicatorBorder;
-        height: $thumbnailIndicatorSize - 2 * $thumbnailIndicatorBorder;
-        line-height: $thumbnailIndicatorSize - 2 * $thumbnailIndicatorBorder;
-    }
-
-    .connection {
-        position: relative;
-        margin: 0 auto;
-        width: 12px;
-        height: 8px;
-
-        &_empty
-        {
-            @include topLeft();
-            max-width: 12px;
-            width: 12px;
-            color: #8B8B8B;/*#FFFFFF*/
-            overflow: hidden;
-        }
-
-        &_lost
-        {
-            @include topLeft();
-            max-width: 12px;
-            width: 12px;
-            color: #8B8B8B;
-            overflow: visible;
-        }
-
-        &_full
-        {
-            @include topLeft();
-            max-width: 12px;
-            width: 12px;
-            color: #FFFFFF;/*#15A1ED*/
-            overflow: hidden;
-        }
-    }
-
-    .icon-connection,
-    .icon-connection-lost {
-        font-size: 6pt;
-    }
-}
-
 .remotevideomenu
 {
     display: inline-block;
@@ -400,8 +403,10 @@
 
 .userAvatar {
     @include maxSize(60px);
-    @include circle(50%);
     @include absoluteAligning();
+    border-radius: 50%;
+    height: 50%;
+    width: auto;
 }
 
 .sharedVideoAvatar {

modules/UI/videolayout/FilmStrip.js

@@ -3,6 +3,15 @@
 import UIEvents from "../../../service/UI/UIEvents";
 import UIUtil from "../util/UIUtil";
 
+/**
+ * Contains sizes of thumbnails
+ * @type {{SMALL: number, MEDIUM: number}}
+ */
+const ThumbnailSizes = {
+    SMALL: 60,
+    MEDIUM: 80
+};
+
 const FilmStrip = {
     /**
      *
@@ -368,39 +377,82 @@ const FilmStrip = {
 
         return new Promise(resolve => {
             let thumbs = this.getThumbs(!forceUpdate);
-            if(thumbs.localThumb)
-                thumbs.localThumb.animate({
-                    height: local.thumbHeight,
-                    width: local.thumbWidth
-                }, {
-                    queue: false,
-                    duration: animate ? 500 : 0,
-                    complete:  resolve
-                });
-            if(thumbs.remoteThumbs)
-                thumbs.remoteThumbs.animate({
-                    height: remote.thumbHeight,
-                    width: remote.thumbWidth
-                }, {
-                    queue: false,
-                    duration: animate ? 500 : 0,
-                    complete:  resolve
-                });
-
-            this.filmStrip.animate({
-                // adds 2 px because of small video 1px border
-                height: remote.thumbHeight + 2
-            }, {
-                queue: false,
-                duration: animate ? 500 : 0
-            });
+            let promises = [];
+
+            if(thumbs.localThumb) {
+                promises.push(new Promise((resolve) => {
+                    thumbs.localThumb.animate({
+                        height: local.thumbHeight,
+                        width: local.thumbWidth
+                    }, this._getAnimateOptions(animate, resolve));
+                }));
+            }
+            if(thumbs.remoteThumbs) {
+                promises.push(new Promise((resolve) => {
+                    thumbs.remoteThumbs.animate({
+                        height: remote.thumbHeight,
+                        width: remote.thumbWidth
+                    }, this._getAnimateOptions(animate, resolve));
+                }));
+            }
+            promises.push(new Promise((resolve) => {
+                this.filmStrip.animate({
+                    // adds 2 px because of small video 1px border
+                    height: remote.thumbHeight + 2
+                }, this._getAnimateOptions(animate, resolve));
+            }));
+            promises.push(new Promise((resolve) => {
+                let fontSize = this._getIndicatorFontSize(remote.thumbHeight);
+                this.filmStrip.find('.indicator').animate({
+                    fontSize
+                }, this._getAnimateOptions(animate, resolve));
+            }));
 
             if (!animate) {
                 resolve();
             }
+
+            Promise.all(promises).then(resolve);
         });
     },
 
+    /**
+     * Helper method. Returns options for jQuery animation
+     * @param animate {Boolean} - animation flag
+     * @param cb {Function} - complete callback
+     * @returns {Object} - animation options object
+     * @private
+     */
+    _getAnimateOptions(animate, cb = $.noop) {
+        return {
+            queue: false,
+            duration: animate ? 500 : 0,
+            complete: cb
+        };
+    },
+
+    /**
+     * Returns font size for indicators according to current
+     * height of thumbnail
+     * @param height
+     * @returns {Number} - font size for current height
+     * @private
+     */
+    _getIndicatorFontSize(height) {
+        const { SMALL, MEDIUM } = ThumbnailSizes;
+        let fontSize;
+
+        if (height <= SMALL) {
+            fontSize = 5;
+        } else if (height > SMALL && height <= MEDIUM) {
+            fontSize = 6;
+        } else {
+            fontSize = 8;
+        }
+
+        return fontSize;
+    },
+
     /**
      * Returns thumbnails of the filmstrip
      * @param only_visible