From aa93a78372724bfd408ca09cafae2d04d4022a3c Mon Sep 17 00:00:00 2001
From: Leonard Kim <leonard.h.kim@gmail.com>
Date: Mon, 4 Dec 2017 14:18:25 -0800
Subject: [PATCH] fix(vertical-filmstrip): allow overflow scrolling on firefox,
 edge, and ie

Using column-reverse prevents proper scrolling on browsers other than Safari
and Chrome. Additionally, Firefox has an issue where flex containers have
dimensions set to auto, preventing resize. So, add hacks to maintain Chrome
and Safari's behavior while allowing for some kind of scrolling on other
browsers.
---
 css/_vertical_filmstrip_overrides.scss | 46 ++++++++++++++++++++++++++
 modules/UI/videolayout/Filmstrip.js    |  4 +++
 2 files changed, 50 insertions(+)

diff --git a/css/_vertical_filmstrip_overrides.scss b/css/_vertical_filmstrip_overrides.scss
index 5cb518a89..8bb7a3c7f 100644
--- a/css/_vertical_filmstrip_overrides.scss
+++ b/css/_vertical_filmstrip_overrides.scss
@@ -2,6 +2,18 @@
  * Override other styles to support vertical filmstrip mode.
  */
 .vertical-filmstrip {
+    /*
+     * 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;
+    }
+
     .filmstrip {
         align-items: flex-end;
         box-sizing: border-box;
@@ -78,6 +90,8 @@
         }
 
         #filmstripRemoteVideos {
+            @include minHWAutoFix();
+
             display: flex;
             flex: 1;
             flex-direction: column;
@@ -115,6 +129,8 @@
         }
 
         #remoteVideos {
+            @include minHWAutoFix();
+
             flex-direction: column;
             flex-grow: 1;
         }
@@ -224,3 +240,33 @@
         }
     }
 }
+
+/**
+ * Workarounds for Edge, IE11, and Firefox not handling scrolling properly
+ * with flex-direction: column-reverse. The remove videos in filmstrip should
+ * start scrolling from the bottom of the filmstrip, but in those browsers the
+ * scrolling won't happen. Per W3C spec, scrolling should happen from the
+ * bottom. As such, use css hacks to get around the css issue, with the intent
+ * being to remove the hacks as the spec is supported.
+ */
+@mixin undoColumnReverseVideos() {
+    #remoteVideos #filmstripRemoteVideos #filmstripRemoteVideosContainer {
+        flex-direction:column;
+    }
+}
+
+/** Firefox detection hack **/
+@-moz-document url-prefix() {
+    @include undoColumnReverseVideos();
+}
+
+/** IE11 detection hack **/
+@media screen and (-ms-high-contrast: active),
+screen and (-ms-high-contrast: none) {
+    @include undoColumnReverseVideos();
+}
+
+/** Edge detection hack **/
+@supports (-ms-ime-align:auto) {
+    @include undoColumnReverseVideos();
+}
diff --git a/modules/UI/videolayout/Filmstrip.js b/modules/UI/videolayout/Filmstrip.js
index 2ec52b131..6bc74981c 100644
--- a/modules/UI/videolayout/Filmstrip.js
+++ b/modules/UI/videolayout/Filmstrip.js
@@ -428,6 +428,8 @@ const Filmstrip = {
                 promises.push(new Promise(resolve => {
                     thumbs.localThumb.animate({
                         height: local.thumbHeight,
+                        'min-height': local.thumbHeight,
+                        'min-width': local.thumbWidth,
                         width: local.thumbWidth
                     }, this._getAnimateOptions(animate, resolve));
                 }));
@@ -437,6 +439,8 @@ const Filmstrip = {
                 promises.push(new Promise(resolve => {
                     thumbs.remoteThumbs.animate({
                         height: remote.thumbHeight,
+                        'min-height': remote.thumbHeight,
+                        'min-width': remote.thumbWidth,
                         width: remote.thumbWidth
                     }, this._getAnimateOptions(animate, resolve));
                 }));