From 78271b102fd4e7544d06a90fc2a5e55792edc42c Mon Sep 17 00:00:00 2001
From: Tony Jin <tjin@box.com>
Date: Tue, 21 Nov 2017 13:24:26 -0800
Subject: [PATCH] Fix: Properly remove transitionend handler

---
 src/lib/viewers/media/Settings.js              | 18 ++++++++++++++----
 .../viewers/media/__tests__/Settings-test.js   |  8 ++++++++
 2 files changed, 22 insertions(+), 4 deletions(-)

diff --git a/src/lib/viewers/media/Settings.js b/src/lib/viewers/media/Settings.js
index e1645e751..80e3adb9c 100644
--- a/src/lib/viewers/media/Settings.js
+++ b/src/lib/viewers/media/Settings.js
@@ -172,6 +172,9 @@ class Settings extends EventEmitter {
         this.containerEl = containerEl;
         this.cache = cache;
 
+        // Bind context for callbacks
+        this.handleTransitionEnd = this.handleTransitionEnd.bind(this);
+
         insertTemplate(this.containerEl, SETTINGS_TEMPLATE, containerEl.querySelector('.bp-media-controls-wrapper'));
         this.settingsEl = this.containerEl.querySelector('.bp-media-settings');
         this.firstMenuItem = this.settingsEl.querySelectorAll('.bp-media-settings-item')[0];
@@ -184,9 +187,7 @@ class Settings extends EventEmitter {
         this.containerEl.classList.add(CLASS_SETTINGS_AUDIOTRACKS_UNAVAILABLE);
 
         // Allow scrollbars after animations end
-        this.settingsEl.addEventListener('transitionend', () => {
-            this.settingsEl.classList.remove('bp-media-settings-in-transition');
-        });
+        this.settingsEl.addEventListener('transitionend', this.handleTransitionEnd);
 
         if (Browser.isMobile()) {
             this.containerEl.classList.add(CLASS_SETTINGS_AUTOPLAY_UNAVAILABLE);
@@ -219,7 +220,7 @@ class Settings extends EventEmitter {
     destroy() {
         if (this.settingsEl) {
             removeActivationListener(this.settingsEl, this.menuEventHandler);
-            this.settingsEl.removeEventListener('transitionend');
+            this.settingsEl.removeEventListener('transitionend', this.handleTransitionEnd);
         }
         document.removeEventListener('click', this.blurHandler);
     }
@@ -437,6 +438,15 @@ class Settings extends EventEmitter {
         }
     }
 
+    /**
+     * Handles transitionend event by removing transition class.
+     *
+     * @return {void}
+     */
+    handleTransitionEnd() {
+        this.settingsEl.classList.remove('bp-media-settings-in-transition');
+    }
+
     /**
      * Returns the selected option in the submenu specified by `type`
      *
diff --git a/src/lib/viewers/media/__tests__/Settings-test.js b/src/lib/viewers/media/__tests__/Settings-test.js
index 190cdcbac..c2d36c7b6 100644
--- a/src/lib/viewers/media/__tests__/Settings-test.js
+++ b/src/lib/viewers/media/__tests__/Settings-test.js
@@ -564,6 +564,14 @@ describe('lib/viewers/media/Settings', () => {
         });
     });
 
+    describe('handleTransitionEnd', () => {
+        it('should remove in transition class', () => {
+            settings.settingsEl.classList.add('bp-media-settings-in-transition');
+            settings.handleTransitionEnd();
+            expect(settings.settingsEl).to.not.have.class('bp-media-settings-in-transition');
+        });
+    });
+
     describe('showSubMenu()', () => {
         it('should show the speed submenu if speed is selected', () => {
             settings.showSubMenu('speed');