ref(Filmstrip): Optimize resizes. (#4992)

* ref(Filmstrip): Optimize resizes.

* fix(thumbnails): resize.

* fix(thumbnails): Issue with height 0, width 0.

* doc(Filmstrip): Improve JSDoc.

css/_utils.scss

@@ -31,13 +31,6 @@
     display: inline-block !important;
 }
 
-/**
-* Shows as a list item
-**/
-.show-list-item {
-    display: list-item !important;
-}
-
 /**
  * Shows a flex element.
  */

css/_videolayout_default.scss

@@ -173,7 +173,9 @@
     &__hoverOverlay {
         background: rgba(0,0,0,.6);
         border-radius: $borderRadius;
-        position: relative;
+        position: absolute;
+        top: 0px;
+        left: 0px;
         width: 100%;
         height: 100%;
         visibility: hidden;
@@ -526,13 +528,16 @@
     display: flex;
     justify-content: center;
     height: 50%;
-    overflow: hidden;
     width: auto;
+    overflow: hidden;
 
     .userAvatar {
         height: 100%;
         object-fit: cover;
         width: 100%;
+        top: 0px;
+        left: 0px;
+        position: absolute;
     }
 }
 
@@ -555,6 +560,9 @@
 }
 
 .sharedVideoAvatar {
+    position: absolute;
+    left: 0px;
+    top: 0px;
     height: 100%;
     width: 100%;
     object-fit: cover;

css/filmstrip/_horizontal_filmstrip.scss

@@ -55,6 +55,7 @@
         &#filmstripLocalVideo {
             align-self: flex-end;
             display: block;
+            margin-bottom: 8px;
         }
 
         &.hidden {
@@ -108,6 +109,7 @@
              */
             padding: 1px 0;
             overflow-y: hidden;
+            overflow-x: scroll;
         }
     }
 

css/filmstrip/_small_video.scss

@@ -1,5 +1,5 @@
 .filmstrip__videos .videocontainer {
-    display: none;
+    display: inline-block;
     position: relative;
     background-size: contain;
     border: $thumbnailVideoBorder solid transparent;

css/filmstrip/_vertical_filmstrip.scss

@@ -25,6 +25,7 @@
     display: flex;
     flex-direction: column-reverse;
     height: 100%;
+    width: 100%;
     padding: ($desktopAppDragBarHeight - 5px) 5px 10px;
     /**
      * fixed positioning is necessary for remote menus and tooltips to pop
@@ -48,7 +49,6 @@
     .filmstrip__videos {
         @extend %align-right;
         bottom: 0;
-        overflow: visible !important;
         padding: 0;
         position:relative;
         right: 0;
@@ -67,6 +67,7 @@
             border: $thumbnailsBorder solid transparent;
             padding-left: 0;
             transition: right 2s;
+            width: 100%;
         }
     }
 
@@ -80,6 +81,16 @@
         flex-direction: column-reverse;
         height: auto;
         justify-content: flex-start;
+
+        #filmstripLocalVideoThumbnail {
+            width: calc(100% - 15px);
+
+            .videocontainer {
+                height: 0px;
+                width: 100%;
+    }
+        }
+
     }
 
     /**
@@ -96,18 +107,21 @@
 
         display: flex;
         flex: 1;
-        flex-direction: column;
+        flex-direction: column-reverse;
         height: auto;
-        justify-content: flex-end;
+        overflow-x: hidden;
+        overflow-y: scroll;
 
         #filmstripRemoteVideosContainer {
+            @include minHWAutoFix();
             flex-direction: column-reverse;
-            /**
-             * Add padding as a hack for Firefox not to show scrollbars when
-             * unnecessary.
-             */
-            padding: 1px 0;
-            overflow-x: hidden;
+            overflow: visible;
+            width: calc(100% - 8px); // 8px for margin + border of the thumbnails
+
+            .videocontainer {
+                height: 0px;
+                width: 100%;
+            }
         }
     }
 
@@ -160,9 +174,24 @@
     }
 }
 
+/**
+ * FF does not include the scroll width when calculating the size of the content. That's why we need to include
+ * ourselves the width of the scroll so that the remote videos are aligned with the local one.
+ */
+@mixin filmstripSizeWithoutScroll {
+    .vertical-filmstrip {
+        #remoteVideos #filmstripRemoteVideos {
+            #filmstripRemoteVideosContainer {
+                width: calc(100% - 15px) // 8 px - margins + border of the thumbnails; 7px - for the scroll
+            }
+        }
+    }
+}
+
 /** Firefox detection hack **/
 @-moz-document url-prefix() {
     @include undoColumnReverseVideos();
+    @include filmstripSizeWithoutScroll();
 }
 
 /** Edge detection hack **/

css/filmstrip/_vertical_filmstrip_overrides.scss

@@ -56,6 +56,10 @@
         transform: translate3d(0, 0, 0);
     }
 
+    .indicator-icon-container {
+        display: inline-block;
+    }
+
     .indicator-container {
         float: none;
     }

modules/UI/UI.js

@@ -11,7 +11,6 @@ import EtherpadManager from './etherpad/Etherpad';
 import SharedVideoManager from './shared_video/SharedVideo';
 
 import VideoLayout from './videolayout/VideoLayout';
-import Filmstrip from './videolayout/Filmstrip';
 
 import { getLocalParticipant } from '../../react/features/base/participants';
 import { toggleChat } from '../../react/features/chat';
@@ -158,8 +157,6 @@ UI.start = function() {
     // Set the defaults for prompt dialogs.
     $.prompt.setDefaults({ persistent: false });
 
-    Filmstrip.init(eventEmitter);
-
     VideoLayout.init(eventEmitter);
     if (!interfaceConfig.filmStripOnly) {
         VideoLayout.initLargeVideo();
@@ -202,7 +199,7 @@ UI.bindEvents = () => {
      *
      */
     function onResize() {
-        VideoLayout.resizeVideoArea();
+        VideoLayout.onResize();
     }
 
     // Resize and reposition videos in full screen mode.
@@ -353,12 +350,6 @@ UI.toggleFilmstrip = function() {
     APP.store.dispatch(setFilmstripVisible(!visible));
 };
 
-/**
- * Checks if the filmstrip is currently visible or not.
- * @returns {true} if the filmstrip is currently visible, and false otherwise.
- */
-UI.isFilmstripVisible = () => Filmstrip.isFilmstripVisible();
-
 /**
  * Toggles the visibility of the chat panel.
  */

modules/UI/shared_video/SharedVideoThumb.js

@@ -17,17 +17,16 @@ export default class SharedVideoThumb extends SmallVideo {
     constructor(participant, videoType, VideoLayout) {
         super(VideoLayout);
         this.id = participant.id;
-
+        this.isLocal = false;
         this.url = participant.id;
         this.setVideoType(videoType);
         this.videoSpanId = 'sharedVideoContainer';
         this.container = this.createContainer(this.videoSpanId);
         this.$container = $(this.container);
-
+        this._setThumbnailSize();
         this.bindHoverHandler();
         this.isVideoMuted = true;
         this.updateDisplayName();
-
         this.container.onclick = this._onContainerClick;
     }