Updated layout

css/_variables.scss

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

css/_videolayout_default.scss

@@ -22,110 +22,128 @@
         height: 100%;
         background-color: black;
     }
-}
-
-/**
- * The toolbar of the video thumbnail.
- */
-.videocontainer__toolbar,
-.videocontainer__toptoolbar {
-    position: absolute;
-    left: 0;
-    z-index: 3;
-    width: 100%;
-    box-sizing: border-box; // Includes the padding in the 100% width.
-}
-
-.videocontainer__toolbar {
-    bottom: 0;
-    padding: 0 5px 0 5px;
-    height: $thumbnailToolbarHeight;
-}
-
-.videocontainer__toptoolbar {
-    $toolbarPadding: 5px;
-    top: 0;
-    padding: $toolbarPadding;
-    padding-bottom: 0;
 
-    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;
+    /**
+     * The toolbar of the video thumbnail.
+     */
+    &__toolbar,
+    &__toptoolbar {
+        position: absolute;
+        left: 0;
         z-index: 3;
-        background: $dominantSpeakerBg;
-        color: $thumbnailPictogramColor;
-        border: $thumbnailIndicatorBorder solid $thumbnailPictogramColor;
+        width: 100%;
+        box-sizing: border-box; // Includes the padding in the 100% width.
+    }
 
-        &:last-child {
-            margin-right: 0;
-        }
+    &__toolbar {
+        bottom: 0;
+        padding: 0 5px 0 5px;
+        height: $thumbnailToolbarHeight;
+    }
 
-        .indicatoricon {
-            position: absolute;
-            top: 50%;
-            left: 0;
-            @include transform(translateY(-50%));
-            width: $thumbnailIndicatorSize - 2 * $thumbnailIndicatorBorder;
-            height: $thumbnailIndicatorSize - 2 * $thumbnailIndicatorBorder;
-            line-height: $thumbnailIndicatorSize - 2 * $thumbnailIndicatorBorder;
-        }
+    &__toptoolbar {
+        $toolbarPadding: 5px;
+        top: 0;
+        padding: $toolbarPadding;
+        padding-bottom: 0;
 
-        .connection {
+        span.indicator {
             position: relative;
-            margin: 0 auto;
-            width: 12px;
-            height: 8px;
-
-            &_empty
-            {
-                @include topLeft();
-                max-width: 12px;
-                width: 12px;
-                color: #8B8B8B;/*#FFFFFF*/
-                overflow: hidden;
+            font-size: 8px;
+            text-align: center;
+            line-height: $thumbnailIndicatorSize;
+            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;
             }
 
-            &_lost
-            {
-                @include topLeft();
-                max-width: 12px;
-                width: 12px;
-                color: #8B8B8B;
-                overflow: visible;
+            .indicatoricon {
+                position: absolute;
+                top: 50%;
+                left: 0;
+                @include transform(translateY(-50%));
+                width: 100%;
             }
 
-            &_full
-            {
-                @include topLeft();
-                max-width: 12px;
+            .connection {
+                position: relative;
+                margin: 0 auto;
                 width: 12px;
-                color: #FFFFFF;/*#15A1ED*/
-                overflow: hidden;
+                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;
             }
         }
+    }
+
+    &_small {
+        span.indicator {
+            font-size: 5px;
 
-        .icon-connection,
-        .icon-connection-lost {
-            font-size: 1em;
+            .connection {
+                height: 5px;
+            }
         }
     }
-}
 
-.videocontainer__hoverOverlay {
-    position: relative;
-    width: 100%;
-    height: 100%;
-    visibility: hidden;
-    background: rgba(0,0,0,.6);
-    z-index: 2;
+    &_medium {
+        span.indicator {
+            font-size: 6px;
+
+            .connection {
+                height: 6px;
+            }
+        }
+    }
+
+    &__hoverOverlay {
+        position: relative;
+        width: 100%;
+        height: 100%;
+        visibility: hidden;
+        background: rgba(0,0,0,.6);
+        z-index: 2;
+    }
 }
 
 #localVideoWrapper {

modules/UI/videolayout/FilmStrip.js

@@ -401,12 +401,8 @@ const FilmStrip = {
                     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));
-            }));
+
+            this._setThumbnailsClasses(remote.thumbHeight);
 
             if (!animate) {
                 resolve();
@@ -432,25 +428,32 @@ const FilmStrip = {
     },
 
     /**
-     * Returns font size for indicators according to current
-     * height of thumbnail
+     * Set thumbnail classes according to the current size of thumbnail
      * @param height
-     * @returns {Number} - font size for current height
      * @private
      */
-    _getIndicatorFontSize(height) {
+    _setThumbnailsClasses(height) {
         const { SMALL, MEDIUM } = ThumbnailSizes;
-        let fontSize;
+        const { localThumb, remoteThumbs } = this.getThumbs();
+        let smallClass = 'videocontainer_small';
+        let mediumClass = 'videocontainer_medium';
+        let className = '';
 
         if (height <= SMALL) {
-            fontSize = 5;
+            className = smallClass;
         } else if (height > SMALL && height <= MEDIUM) {
-            fontSize = 6;
-        } else {
-            fontSize = 8;
+            className = mediumClass;
         }
 
-        return fontSize;
+        localThumb
+            .removeClass(`${smallClass} ${mediumClass}`)
+            .addClass(className);
+
+        if (remoteThumbs) {
+            remoteThumbs
+                .removeClass(`${smallClass} ${mediumClass}`)
+                .addClass(className);
+        }
     },
 
     /**