Fix: fullscreen controls not shown in IE11 (#588)

* Fix: fullscreen controls not shown in IE11

* 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.

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",

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,42 @@ 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);
+        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();
     }
 
     /**

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()', () => {

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();
 

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;

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"