From 871a6b4b89b45d1e91eb0a875cd8195d6da5f754 Mon Sep 17 00:00:00 2001
From: Daniel DeMicco <ddemicco@box.com>
Date: Fri, 12 Jan 2018 17:39:23 -0800
Subject: [PATCH 1/2] Fix: fullscreen controls not shown in IE11

---
 package.json                    | 1 +
 src/lib/Fullscreen.js           | 9 +++++----
 src/lib/viewers/media/Dash.scss | 8 --------
 yarn.lock                       | 4 ++++
 4 files changed, 10 insertions(+), 12 deletions(-)

diff --git a/package.json b/package.json
index 841479744..08fb69996 100644
--- a/package.json
+++ b/package.json
@@ -43,6 +43,7 @@
     "fetch-mock": "^5.13.1",
     "fetch-mock-forwarder": "^1.0.0",
     "file-loader": "^1.1.5",
+    "fscreen": "^1.0.2",
     "husky": "^0.14.3",
     "i18n-webpack-plugin": "^1.0.0",
     "jsuri": "^1.3.1",
diff --git a/src/lib/Fullscreen.js b/src/lib/Fullscreen.js
index e44739709..03abd44d9 100644
--- a/src/lib/Fullscreen.js
+++ b/src/lib/Fullscreen.js
@@ -1,4 +1,6 @@
 import EventEmitter from 'events';
+import fscreen from 'fscreen';
+
 import { CLASS_FULLSCREEN } from './constants';
 
 class Fullscreen extends EventEmitter {
@@ -10,10 +12,9 @@ class Fullscreen extends EventEmitter {
     constructor() {
         super();
 
-        document.addEventListener('webkitfullscreenchange', this.fullscreenchangeHandler);
-        document.addEventListener('mozfullscreenchange', this.fullscreenchangeHandler);
-        document.addEventListener('MSFullscreenChange', this.fullscreenchangeHandler);
-        document.addEventListener('fullscreenchange', this.fullscreenchangeHandler);
+        // as of now (1/12/18) fullscreenchange is not universally adopted, fscreen will
+        // detect and add the appropriate vendor prefixed event
+        fscreen.addEventListener('fullscreenchange', this.fullscreenchangeHandler);
     }
 
     /**
diff --git a/src/lib/viewers/media/Dash.scss b/src/lib/viewers/media/Dash.scss
index c9aefd932..af6d2c7cd 100644
--- a/src/lib/viewers/media/Dash.scss
+++ b/src/lib/viewers/media/Dash.scss
@@ -25,14 +25,6 @@
     }
 }
 
-.bp-is-fullscreen {
-    .bp-media-dash {
-        .bp-media-container {
-            width: 100%;
-        }
-    }
-}
-
 .bp-media-filmstrip-container {
     border: 1px solid $sunset-grey;
     bottom: 60px;
diff --git a/yarn.lock b/yarn.lock
index 7bd4c9375..3711587eb 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3300,6 +3300,10 @@ fs.realpath@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
 
+fscreen@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/fscreen/-/fscreen-1.0.2.tgz#c4c51d96d819d75a19d728e0df445f9be9bb984f"
+
 fsevents@^1.0.0:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-1.1.2.tgz#3282b713fb3ad80ede0e9fcf4611b5aa6fc033f4"

From 28a0474a14cb927438f8f558db864c95697c99db Mon Sep 17 00:00:00 2001
From: Daniel DeMicco <ddemicco@box.com>
Date: Tue, 16 Jan 2018 13:57:21 -0800
Subject: [PATCH 2/2] Fix: Add UT for Fullscreen.js fullscreenchange

Slight refactor of Fullscreen.js to have separate methods for binding and unbinding events for testing purposes as spies werent working. Also added destroy function as events werent being unbound.
---
 src/lib/Fullscreen.js                | 33 ++++++++++++++++++++++++++++
 src/lib/__tests__/Fullscreen-test.js | 11 ++++++++++
 src/lib/viewers/BaseViewer.js        |  2 +-
 3 files changed, 45 insertions(+), 1 deletion(-)

diff --git a/src/lib/Fullscreen.js b/src/lib/Fullscreen.js
index 03abd44d9..50c918124 100644
--- a/src/lib/Fullscreen.js
+++ b/src/lib/Fullscreen.js
@@ -12,11 +12,44 @@ class Fullscreen extends EventEmitter {
     constructor() {
         super();
 
+        this.bindDOMListeners();
+    }
+
+    /**
+     * Binds DOM listeners for Fullscreen.
+     *
+     * @protected
+     * @return {void}
+     */
+    bindDOMListeners() {
         // as of now (1/12/18) fullscreenchange is not universally adopted, fscreen will
         // detect and add the appropriate vendor prefixed event
         fscreen.addEventListener('fullscreenchange', this.fullscreenchangeHandler);
     }
 
+    /**
+     * Binds DOM listeners for Fullscreen.
+     *
+     * @protected
+     * @return {void}
+     */
+    unbindDOMListeners() {
+        // as of now (1/12/18) fullscreenchange is not universally adopted, fscreen will
+        // detect and add the appropriate vendor prefixed event
+        fscreen.removeEventListener('fullscreenchange', this.fullscreenchangeHandler);
+    }
+
+    /**
+     * [destructor]
+     *
+     * @protected
+     * @return {void}
+     */
+    destroy() {
+        this.unbindDOMListeners();
+        this.removeAllListeners();
+    }
+
     /**
      * Returns true if the browser supports fullscreen natively
      *
diff --git a/src/lib/__tests__/Fullscreen-test.js b/src/lib/__tests__/Fullscreen-test.js
index 8430ac586..ce7aba131 100644
--- a/src/lib/__tests__/Fullscreen-test.js
+++ b/src/lib/__tests__/Fullscreen-test.js
@@ -77,6 +77,17 @@ describe('lib/Fullscreen', () => {
 
             expect(fullscreen.emit).to.have.been.calledWith('exit');
         });
+
+        it('should be called only once when the fullscreenchange event is emitted', () => {
+            const spy = sandbox.spy(fullscreen, 'fullscreenchangeHandler');
+            //rebind the dom listeners to use the spy
+            fullscreen.bindDOMListeners();
+
+            const event = new Event('webkitfullscreenchange');
+
+            window.document.dispatchEvent(event);
+            expect(spy).to.be.called.once;
+        });
     });
 
     describe('toggle()', () => {
diff --git a/src/lib/viewers/BaseViewer.js b/src/lib/viewers/BaseViewer.js
index 5558cf0c2..496914dae 100644
--- a/src/lib/viewers/BaseViewer.js
+++ b/src/lib/viewers/BaseViewer.js
@@ -196,7 +196,7 @@ class BaseViewer extends EventEmitter {
             });
         }
 
-        fullscreen.removeAllListeners();
+        fullscreen.destroy();
         document.defaultView.removeEventListener('resize', this.debouncedResizeHandler);
         this.removeAllListeners();