From f8537dde6b548b7e0fc361e94d2acbe49db4e35c Mon Sep 17 00:00:00 2001
From: Leonard Kim <leonard.h.kim@gmail.com>
Date: Tue, 10 Apr 2018 12:47:27 -0700
Subject: [PATCH] fix(filmstrip): set SmallVideo styles instead of using
 animate

jquery animate during animations sets an element's overflow to
hidden and then back to the overflow declared before the start
of the animation. If multiple animations are fired, then the
overflow could be set to hidden permanently. No calls
to Filmstrip#resizeThumbnails have animate set to true, so the
animate call is not even needed.
---
 modules/UI/videolayout/Filmstrip.js | 32 ++++++++++++++---------------
 1 file changed, 15 insertions(+), 17 deletions(-)

diff --git a/modules/UI/videolayout/Filmstrip.js b/modules/UI/videolayout/Filmstrip.js
index e3364fc35..abf18ef71 100644
--- a/modules/UI/videolayout/Filmstrip.js
+++ b/modules/UI/videolayout/Filmstrip.js
@@ -450,25 +450,23 @@ const Filmstrip = {
 
             if (thumbs.localThumb) {
                 // eslint-disable-next-line no-shadow
-                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));
-                }));
+                thumbs.localThumb.css({
+                    display: 'inline-block',
+                    height: `${local.thumbHeight}px`,
+                    'min-height': `${local.thumbHeight}px`,
+                    'min-width': `${local.thumbWidth}px`,
+                    width: `${local.thumbWidth}px`
+                });
             }
+
             if (thumbs.remoteThumbs) {
-                // eslint-disable-next-line no-shadow
-                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));
-                }));
+                thumbs.remoteThumbs.css({
+                    display: 'inline-block',
+                    height: `${remote.thumbHeight}px`,
+                    'min-height': `${remote.thumbHeight}px`,
+                    'min-width': `${remote.thumbWidth}px`,
+                    width: `${remote.thumbWidth}px`
+                });
             }
             // eslint-disable-next-line no-shadow
             promises.push(new Promise(resolve => {