Fix: fullscreen controls not shown in IE11

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"