Fix aligning of indicator icon; Update logic for dynamically change of thumb indicators via font-size

css/_mixins.scss

@@ -63,7 +63,7 @@
   top: 50%;
   left: 50%;
   position: absolute;
-  @include transform(translate(-50%, -50%))
+  @include transform(translate(-50%, -50%));
 }
 
 /**

css/_videolayout_default.scss

@@ -68,33 +68,24 @@
             }
 
             .indicatoricon {
-                position: absolute;
+                @include absoluteAligning();
-                top: 50%;
-                left: 0;
-                @include transform(translateY(-50%));
-                width: 100%;
             }
 
             .connection {
                 position: relative;
+                display: inline-block;
                 margin: 0 auto;
-                width: 12px;
+                left: 0;
-                height: 8px;
+                @include transform(translate(0, -50%));
 
                 &_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;
                 }
@@ -102,8 +93,6 @@
                 &_full
                 {
                     @include topLeft();
-                    max-width: 12px;
-                    width: 12px;
                     color: #FFFFFF;/*#15A1ED*/
                     overflow: hidden;
                 }
@@ -116,26 +105,6 @@
         }
     }
 
-    &_small {
-        span.indicator {
-            font-size: 5px;
-
-            .connection {
-                height: 5px;
-            }
-        }
-    }
-
-    &_medium {
-        span.indicator {
-            font-size: 6px;
-
-            .connection {
-                height: 6px;
-            }
-        }
-    }
-
     &__hoverOverlay {
         position: relative;
         width: 100%;

modules/UI/util/UIUtil.js

@@ -27,6 +27,25 @@ const SHOW_CLASSES = {
     'list-item': 'show-list-item'
 };
 
+/**
+ * Contains sizes of thumbnails
+ * @type {{SMALL: number, MEDIUM: number}}
+ */
+const ThumbnailSizes = {
+    SMALL: 60,
+    MEDIUM: 80
+};
+
+/**
+ * Contains font sizes for thumbnail indicators
+ * @type {{SMALL: number, MEDIUM: number}}
+ */
+const IndicatorFontSizes = {
+    SMALL: 5,
+    MEDIUM: 6,
+    NORMAL: 8
+};
+
 /**
  * Created by hristo on 12/22/14.
  */
@@ -463,6 +482,7 @@ const SHOW_CLASSES = {
 
         if (indicators.length <= 0) {
             indicatorSpan = document.createElement('span');
+
             indicatorSpan.className = 'indicator';
             indicatorSpan.id = indicatorId;
 
@@ -475,6 +495,8 @@ const SHOW_CLASSES = {
                 APP.translation.translateElement($(indicatorSpan));
             }
 
+            this._resizeIndicator(indicatorSpan);
+
             document.getElementById(videoSpanId)
                 .querySelector('.videocontainer__toptoolbar')
                 .appendChild(indicatorSpan);
@@ -483,6 +505,37 @@ const SHOW_CLASSES = {
         }
 
         return indicatorSpan;
+    },
+
+    /**
+     * Resizing indicator element passing via argument
+     * according to the current thumbnail size
+     * @param {HTMLElement} indicator - indicator element
+     * @private
+     */
+    _resizeIndicator(indicator) {
+        let height = $('#localVideoContainer').height();
+        let fontSize = this.getIndicatorFontSize(height);
+        $(indicator).css('font-size', fontSize);
+    },
+
+    /**
+     * Returns font size for indicators according to current
+     * height of thumbnail
+     * @param {Number} - height - current height of thumbnail
+     * @returns {Number} - font size for current height
+     */
+    getIndicatorFontSize(height) {
+        const { SMALL, MEDIUM } = ThumbnailSizes;
+        let fontSize = IndicatorFontSizes.NORMAL;
+
+        if (height <= SMALL) {
+            fontSize = IndicatorFontSizes.SMALL;
+        } else if (height > SMALL && height <= MEDIUM) {
+            fontSize = IndicatorFontSizes.MEDIUM;
+        }
+
+        return fontSize;
     }
 };
 

modules/UI/videolayout/FilmStrip.js

@@ -3,15 +3,6 @@
 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 = {
     /**
      *
@@ -402,7 +393,14 @@ const FilmStrip = {
                 }, this._getAnimateOptions(animate, resolve));
             }));
 
-            this._setThumbnailsClasses(remote.thumbHeight);
+            promises.push(new Promise(() => {
+                let { localThumb } = this.getThumbs();
+                let height = localThumb.height();
+                let fontSize = UIUtil.getIndicatorFontSize(height);
+                this.filmStrip.find('.indicator').animate({
+                    fontSize
+                }, this._getAnimateOptions(animate, resolve));
+            }));
 
             if (!animate) {
                 resolve();
@@ -427,35 +425,6 @@ const FilmStrip = {
         };
     },
 
-    /**
-     * Set thumbnail classes according to the current size of thumbnail
-     * @param height
-     * @private
-     */
-    _setThumbnailsClasses(height) {
-        const { SMALL, MEDIUM } = ThumbnailSizes;
-        const { localThumb, remoteThumbs } = this.getThumbs();
-        let smallClass = 'videocontainer_small';
-        let mediumClass = 'videocontainer_medium';
-        let className = '';
-
-        if (height <= SMALL) {
-            className = smallClass;
-        } else if (height > SMALL && height <= MEDIUM) {
-            className = mediumClass;
-        }
-
-        localThumb
-            .removeClass(`${smallClass} ${mediumClass}`)
-            .addClass(className);
-
-        if (remoteThumbs) {
-            remoteThumbs
-                .removeClass(`${smallClass} ${mediumClass}`)
-                .addClass(className);
-        }
-    },
-
     /**
      * Returns thumbnails of the filmstrip
      * @param only_visible