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..50c918124 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,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(); } /** 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(); 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"