feat(horizontal-filmstrip): scroll

css/_base.scss

@@ -161,6 +161,7 @@ form {
 ::-webkit-scrollbar {
     background: transparent;
     width: 7px;
+    height: $scrollHeight;
 }
 
 ::-webkit-scrollbar-button {

css/_variables.scss

@@ -37,7 +37,6 @@ $presence-idle: rgb(172, 172, 172);
 /**
  * Toolbar
  */
-$defaultToolbarSize: 50px;
 $newToolbarBackgroundColor: rgba(22, 38, 55, 0.8);
 $newToolbarButtonHoverColor: rgba(255, 255, 255, 0.15);
 $newToolbarButtonToggleColor: rgba(255, 255, 255, 0.2);
@@ -106,6 +105,7 @@ $defaultWatermarkLink: '../images/watermark.png';
 $popoverMenuPadding: 13px;
 $happySoftwareBackground: transparent;
 $desktopAppDragBarHeight: 25px;
+$scrollHeight: 7px;
 
 /**
  * Z-indexes. TODO: Replace this by a function.

css/filmstrip/_horizontal_filmstrip.scss

@@ -13,9 +13,24 @@
     @extend %align-right;
     transition: bottom .3s;
     z-index: $filmstripVideosZ;
+    box-sizing: border-box;
+    width: 100%;
+    position: fixed;
+
+    /*
+     * Firefox sets flex items to min-height: auto and min-width: auto,
+     * preventing flex children from shrinking like they do on other browsers.
+     * Setting min-height and min-width 0 is a workaround for the issue so
+     * Firefox behaves like other browsers.
+     * https://bugzilla.mozilla.org/show_bug.cgi?id=1043520
+     */
+     @mixin minHWAutoFix() {
+        min-height: 0;
+        min-width: 0;
+    }
 
     &.reduce-height {
-        bottom: $newToolbarSizeWithPadding;
+        bottom: calc(#{$newToolbarSizeWithPadding} + #{$scrollHeight});
     }
 
     &__videos {
@@ -29,8 +44,9 @@
 
         &#remoteVideos {
             border: $thumbnailsBorder solid transparent;
-            padding-left: $defaultToolbarSize + 5;
             transition: bottom 2s;
+            flex-grow: 1;
+            @include minHWAutoFix()
         }
 
         /**
@@ -74,4 +90,51 @@
             pointer-events: none;
         }
     }
+
+    #filmstripRemoteVideos {
+        @include minHWAutoFix();
+
+        display: flex;
+        flex: 1;
+        width: auto;
+        justify-content: flex-end;
+        flex-direction: row;
+
+        #filmstripRemoteVideosContainer {
+            flex-direction: row-reverse;
+            /**
+             * Add padding as a hack for Firefox not to show scrollbars when
+             * unnecessary.
+             */
+            padding: 1px 0;
+            overflow-y: hidden;
+        }
+    }
+
+    .videocontainer {
+        margin-bottom: 10px;
+    }
+}
+
+
+/**
+ * Workarounds for Edge and Firefox not handling scrolling properly with
+ * flex-direction: row-reverse.
+ */
+ @mixin undoRowReverseVideos() {
+    .horizontal-filmstrip {
+        #remoteVideos #filmstripRemoteVideos #filmstripRemoteVideosContainer {
+            flex-direction: row;
+        }
+    }
+}
+
+/** Firefox detection hack **/
+@-moz-document url-prefix() {
+    @include undoRowReverseVideos();
+}
+
+/** Edge detection hack **/
+@supports (-ms-ime-align:auto) {
+    @include undoRowReverseVideos();
 }

modules/UI/videolayout/Filmstrip.js

@@ -76,10 +76,6 @@ const Filmstrip = {
      * @returns {{availableWidth: number, availableHeight: number}}
      */
     calculateAvailableSize() {
-        const state = APP.store.getState();
-        const currentLayout = getCurrentLayout(state);
-        const isHorizontalFilmstripView = currentLayout === LAYOUTS.HORIZONTAL_FILMSTRIP_VIEW;
-
         /**
          * If the videoAreaAvailableWidth is set we use this one to calculate
          * the filmstrip width, because we're probably in a state where the
@@ -87,70 +83,31 @@ const Filmstrip = {
          */
         const videoAreaAvailableWidth
             = UIUtil.getAvailableVideoWidth()
-            - this._getFilmstripExtraPanelsWidth()
+                - this._getFilmstripExtraPanelsWidth()
-            - UIUtil.parseCssInt(this.filmstrip.css('right'), 10)
+                - UIUtil.parseCssInt(this.filmstrip.css('right'), 10)
-            - UIUtil.parseCssInt(this.filmstrip.css('paddingLeft'), 10)
+                - UIUtil.parseCssInt(this.filmstrip.css('paddingLeft'), 10)
-            - UIUtil.parseCssInt(this.filmstrip.css('paddingRight'), 10)
+                - UIUtil.parseCssInt(this.filmstrip.css('paddingRight'), 10)
-            - UIUtil.parseCssInt(this.filmstrip.css('borderLeftWidth'), 10)
+                - UIUtil.parseCssInt(this.filmstrip.css('borderLeftWidth'), 10)
-            - UIUtil.parseCssInt(this.filmstrip.css('borderRightWidth'), 10)
+                - UIUtil.parseCssInt(this.filmstrip.css('borderRightWidth'), 10)
-            - 5;
+                - 5;
 
-        let availableHeight = interfaceConfig.FILM_STRIP_MAX_HEIGHT;
+        const availableHeight = Math.min(interfaceConfig.FILM_STRIP_MAX_HEIGHT || 120, window.innerHeight - 18);
         let availableWidth = videoAreaAvailableWidth;
-        const thumbs = this.getThumbs(true);
+        const localVideoContainer = $('#localVideoContainer');
 
         // If local thumb is not hidden
-        if (thumbs.localThumb) {
+        if (!localVideoContainer.has('hidden')) {
-            const localVideoContainer = $('#localVideoContainer');
-
             availableWidth = Math.floor(
                 videoAreaAvailableWidth - (
-                    UIUtil.parseCssInt(
+                    UIUtil.parseCssInt(localVideoContainer.css('borderLeftWidth'), 10)
-                        localVideoContainer.css('borderLeftWidth'), 10)
+                    + UIUtil.parseCssInt(localVideoContainer.css('borderRightWidth'), 10)
-                    + UIUtil.parseCssInt(
+                    + UIUtil.parseCssInt(localVideoContainer.css('paddingLeft'), 10)
-                        localVideoContainer.css('borderRightWidth'), 10)
+                    + UIUtil.parseCssInt(localVideoContainer.css('paddingRight'), 10)
-                    + UIUtil.parseCssInt(
+                    + UIUtil.parseCssInt(localVideoContainer.css('marginLeft'), 10)
-                        localVideoContainer.css('paddingLeft'), 10)
+                    + UIUtil.parseCssInt(localVideoContainer.css('marginRight'), 10))
-                    + UIUtil.parseCssInt(
-                        localVideoContainer.css('paddingRight'), 10)
-                    + UIUtil.parseCssInt(
-                        localVideoContainer.css('marginLeft'), 10)
-                    + UIUtil.parseCssInt(
-                        localVideoContainer.css('marginRight'), 10))
             );
         }
 
-        // If the number of videos is 0 or undefined or we're not in horizontal
-        // filmstrip mode we don't need to calculate further any adjustments
-        // to width based on the number of videos present.
-        const numvids = thumbs.remoteThumbs.length;
-
-        if (numvids && isHorizontalFilmstripView) {
-            const remoteVideoContainer = thumbs.remoteThumbs.eq(0);
-
-            availableWidth = Math.floor(
-                videoAreaAvailableWidth - (numvids * (
-                    UIUtil.parseCssInt(
-                        remoteVideoContainer.css('borderLeftWidth'), 10)
-                    + UIUtil.parseCssInt(
-                        remoteVideoContainer.css('borderRightWidth'), 10)
-                    + UIUtil.parseCssInt(
-                        remoteVideoContainer.css('paddingLeft'), 10)
-                    + UIUtil.parseCssInt(
-                        remoteVideoContainer.css('paddingRight'), 10)
-                    + UIUtil.parseCssInt(
-                        remoteVideoContainer.css('marginLeft'), 10)
-                    + UIUtil.parseCssInt(
-                        remoteVideoContainer.css('marginRight'), 10)))
-            );
-        }
-
-        // If the MAX_HEIGHT property hasn't been specified
-        // we have the static value.
-        const maxHeight = Math.min(interfaceConfig.FILM_STRIP_MAX_HEIGHT || 120, availableHeight);
-
-        availableHeight = Math.min(maxHeight, window.innerHeight - 18);
-
         return {
             availableHeight,
             availableWidth
@@ -231,10 +188,8 @@ const Filmstrip = {
          * availableHeight/h > availableWidth/totalWidth otherwise 2) is true
          */
 
-        const remoteThumbsInRow = interfaceConfig.VERTICAL_FILMSTRIP ? 0 : this.getThumbs(true).remoteThumbs.length;
         const remoteLocalWidthRatio = interfaceConfig.REMOTE_THUMBNAIL_RATIO / interfaceConfig.LOCAL_THUMBNAIL_RATIO;
-        const lW = Math.min(availableWidth / ((remoteLocalWidthRatio * remoteThumbsInRow) + 1),
+        const lW = Math.min(availableWidth, availableHeight * interfaceConfig.LOCAL_THUMBNAIL_RATIO);
-            availableHeight * interfaceConfig.LOCAL_THUMBNAIL_RATIO);
         const h = lW / interfaceConfig.LOCAL_THUMBNAIL_RATIO;
 
         const remoteVideoWidth = lW * remoteLocalWidthRatio;
@@ -378,8 +333,8 @@ const Filmstrip = {
             });
         } else if (currentLayout === LAYOUTS.HORIZONTAL_FILMSTRIP_VIEW) {
             this.filmstrip.css({
-                // adds 4 px because of small video 2px border
+                // adds 4 px because of small video 2px border and 10px margin for the scroll
-                height: `${remote.thumbHeight + 4}px`
+                height: `${remote.thumbHeight + 14}px`
             });
         }