Merge pull request #1132 from jitsi/calculate-correct-size-for-thumbnails

Calculate correct size for thumbnails

css/_filmstrip.scss

@@ -50,6 +50,7 @@
         position:relative;
         height:196px;
         padding: 0;
+        padding-left: 17px;
         bottom: 0;
         width:auto;
         border: 2px solid transparent;

modules/UI/util/UIUtil.js

@@ -27,9 +27,7 @@ const TOOLTIP_POSITIONS = {
      * Returns the available video width.
      */
     getAvailableVideoWidth: function () {
-        let rightPanelWidth = 0;
-
-        return window.innerWidth - rightPanelWidth;
+        return window.innerWidth;
     },
 
     /**

modules/UI/videolayout/FilmStrip.js

@@ -12,6 +12,7 @@ const FilmStrip = {
     init (eventEmitter) {
         this.iconMenuDownClassName = 'icon-menu-down';
         this.iconMenuUpClassName = 'icon-menu-up';
+        this.filmStripContainerClassName = 'filmstrip';
         this.filmStrip = $('#remoteVideos');
         this.eventEmitter = eventEmitter;
         this._initFilmStripToolbar();
@@ -23,7 +24,8 @@ const FilmStrip = {
      */
     _initFilmStripToolbar() {
         let toolbar = this._generateFilmStripToolbar();
-        let container = document.querySelector('.filmstrip');
+        let className = this.filmStripContainerClassName;
+        let container = document.querySelector(`.${className}`);
 
         UIUtil.prependChild(container, toolbar);
 
@@ -203,6 +205,7 @@ const FilmStrip = {
          */
         let videoAreaAvailableWidth
             = UIUtil.getAvailableVideoWidth()
+            - this._getFilmstripExtraPanelsWidth()
             - UIUtil.parseCssInt(this.filmStrip.css('right'), 10)
             - UIUtil.parseCssInt(this.filmStrip.css('paddingLeft'), 10)
             - UIUtil.parseCssInt(this.filmStrip.css('paddingRight'), 10)
@@ -265,12 +268,35 @@ const FilmStrip = {
     },
 
     /**
-     * Calculate the thumbnail size in order to fit all the thumnails in passed
+     * Traverse all elements inside the filmstrip
+     * and calculates the sum of all of them except
+     * remote videos element. Used for calculation of
+     * available width for video thumbnails.
+     *
+     * @returns {number} calculated width
+     * @private
+     */
+    _getFilmstripExtraPanelsWidth() {
+        let className = this.filmStripContainerClassName;
+        let width = 0;
+        $(`.${className}`)
+            .children()
+            .each(function () {
+                if (this.id !== 'remoteVideos') {
+                    width += $(this).outerWidth();
+                }
+            });
+        return width;
+    },
+
+    /**
+     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
+     * @returns {{localVideo, remoteVideo}}
      */
     calculateThumbnailSizeFromAvailable(availableWidth, availableHeight) {
         /**
@@ -317,10 +343,12 @@ const FilmStrip = {
             (remoteLocalWidthRatio * numberRemoteThumbs + 1), availableHeight *
             interfaceConfig.LOCAL_THUMBNAIL_RATIO);
         const h = lW / interfaceConfig.LOCAL_THUMBNAIL_RATIO;
-        return { localVideo:{
+        return {
+                    localVideo:{
                         thumbWidth: lW,
                         thumbHeight: h
-                    }, remoteVideo: {
+                    },
+                    remoteVideo: {
                         thumbWidth: lW * remoteLocalWidthRatio,
                         thumbHeight: h
                     }