From 54166af4d135bbc7d07c6cd4c7a9ba9a775cf7ac Mon Sep 17 00:00:00 2001
From: MrTimscampi <julien.machiels@protonmail.com>
Date: Sun, 26 Jul 2020 18:26:24 +0200
Subject: [PATCH] Add forced reflow of emby-collapse back and request animation
 frame

---
 src/elements/emby-collapse/emby-collapse.js | 68 ++++++++++++---------
 1 file changed, 38 insertions(+), 30 deletions(-)

diff --git a/src/elements/emby-collapse/emby-collapse.js b/src/elements/emby-collapse/emby-collapse.js
index 733333df77..435ae5b67f 100644
--- a/src/elements/emby-collapse/emby-collapse.js
+++ b/src/elements/emby-collapse/emby-collapse.js
@@ -7,43 +7,51 @@ import 'emby-button';
     const EmbyButtonPrototype = Object.create(HTMLDivElement.prototype);
 
     function slideDownToShow(button, elem) {
-
-        elem.classList.remove('hide');
-        elem.classList.add('expanded');
-        elem.style.height = 'auto';
-        var height = elem.offsetHeight + 'px';
-        elem.style.height = height;
-
-        setTimeout(function () {
-            if (elem.classList.contains('expanded')) {
-                elem.classList.remove('hide');
-            } else {
-                elem.classList.add('hide');
-            }
+        requestAnimationFrame(() => {
+            elem.classList.remove('hide');
+            elem.classList.add('expanded');
             elem.style.height = 'auto';
-        }, 300);
+            var height = elem.offsetHeight + 'px';
+            elem.style.height = '0';
+            // trigger reflow
+            // TODO: Find a better way to do this
+            const newHeight = elem.offsetHeight; /* eslint-disable-line no-unused-vars */
+            elem.style.height = height;
 
-        const icon = button.querySelector('.material-icons');
-        icon.classList.add('emby-collapse-expandIconExpanded');
+            setTimeout(function () {
+                if (elem.classList.contains('expanded')) {
+                    elem.classList.remove('hide');
+                } else {
+                    elem.classList.add('hide');
+                }
+                elem.style.height = 'auto';
+            }, 300);
+
+            const icon = button.querySelector('.material-icons');
+            icon.classList.add('emby-collapse-expandIconExpanded');
+        });
     }
 
     function slideUpToHide(button, elem) {
+        requestAnimationFrame(() => {
+            elem.style.height = elem.offsetHeight + 'px';
+            // trigger reflow
+            // TODO: Find a better way to do this
+            const newHeight = elem.offsetHeight; /* eslint-disable-line no-unused-vars */
+            elem.classList.remove('expanded');
+            elem.style.height = '0';
 
-        elem.style.height = elem.offsetHeight + 'px';
+            setTimeout(function () {
+                if (elem.classList.contains('expanded')) {
+                    elem.classList.remove('hide');
+                } else {
+                    elem.classList.add('hide');
+                }
+            }, 300);
 
-        elem.classList.remove('expanded');
-        elem.style.height = '0';
-
-        setTimeout(function () {
-            if (elem.classList.contains('expanded')) {
-                elem.classList.remove('hide');
-            } else {
-                elem.classList.add('hide');
-            }
-        }, 300);
-
-        const icon = button.querySelector('.material-icons');
-        icon.classList.remove('emby-collapse-expandIconExpanded');
+            const icon = button.querySelector('.material-icons');
+            icon.classList.remove('emby-collapse-expandIconExpanded');
+        });
     }
 
     function onButtonClick(e) {