From aa13d0005ac530f8fbb86d3178ed8385888c4e1c Mon Sep 17 00:00:00 2001 From: Jared Stoffan Date: Fri, 25 Jan 2019 11:20:31 -0800 Subject: [PATCH] Chore: Improve fullscreen logic to use fscreen for compatibility (#903) --- src/lib/Fullscreen.js | 102 ++++++----- src/lib/__tests__/Fullscreen-test.js | 170 +++++------------- src/lib/viewers/BaseViewer.js | 27 +-- src/lib/viewers/__tests__/BaseViewer-test.js | 28 +-- src/lib/viewers/box3d/Box3DViewer.js | 8 - src/lib/viewers/doc/DocBaseViewer.js | 34 +--- .../doc/__tests__/DocBaseViewer-test.js | 17 +- src/lib/viewers/media/MediaControls.js | 46 ++--- .../media/__tests__/MediaControls-test.js | 4 +- 9 files changed, 159 insertions(+), 277 deletions(-) diff --git a/src/lib/Fullscreen.js b/src/lib/Fullscreen.js index ae4a2c540..8570b5fe2 100644 --- a/src/lib/Fullscreen.js +++ b/src/lib/Fullscreen.js @@ -1,7 +1,6 @@ import EventEmitter from 'events'; import fscreen from 'fscreen'; - -import { CLASS_FULLSCREEN } from './constants'; +import { CLASS_FULLSCREEN, CLASS_FULLSCREEN_UNSUPPORTED } from './constants'; class Fullscreen extends EventEmitter { /** @@ -57,12 +56,7 @@ class Fullscreen extends EventEmitter { * @return {boolean} Fullscreen supported or not */ isSupported() { - return ( - document.fullscreenEnabled || - document.webkitFullscreenEnabled || - document.mozFullScreenEnabled || - document.msFullscreenEnabled - ); + return fscreen.fullscreenEnabled; } /** @@ -73,33 +67,21 @@ class Fullscreen extends EventEmitter { * @return {boolean} In fullscreen or not */ isFullscreen(element) { - let fullscreen; if (this.isSupported()) { - fullscreen = !!( - document.fullscreenElement || - document.mozFullScreenElement || - document.webkitFullscreenElement || - document.msFullscreenElement - ); - } else { - fullscreen = element instanceof HTMLElement && element.classList.contains(CLASS_FULLSCREEN); + return !!fscreen.fullscreenElement; } - return fullscreen; + + return element instanceof HTMLElement && element.classList.contains(CLASS_FULLSCREEN); } /** * Fires events when the fullscreen state changes * * @private - * @param {HTMLElement|Event} el - Fullscreen element * @return {void} */ - fullscreenchangeHandler = (el) => { - let enter = false; - - enter = (this.isSupported() && this.isFullscreen()) || (!this.isSupported() && !this.isFullscreen(el)); - - if (enter) { + fullscreenchangeHandler = () => { + if (this.isFullscreen()) { this.focusFullscreenElement(); this.emit('enter'); } else { @@ -111,6 +93,7 @@ class Fullscreen extends EventEmitter { * Focuses the element * * @private + * @param {HTMLElement} el - fullscreen element * @return {void} */ focusFullscreenElement = () => { @@ -120,37 +103,58 @@ class Fullscreen extends EventEmitter { }; /** - * Toggles fullscreen mode + * Enter fullscreen mode * - * @public * @param {HTMLElement} el - fullscreen element * @return {void} */ - toggle(el) { - const element = el || document.documentElement; + enter(el = document.documentElement) { + if (el instanceof HTMLElement) { + el.classList.add(CLASS_FULLSCREEN); - if (this.isSupported()) { - if (this.isFullscreen()) { - if (document.exitFullscreen) { - document.exitFullscreen(); - } else if (document.msExitFullscreen) { - document.msExitFullscreen(); - } else if (document.mozCancelFullScreen) { - document.mozCancelFullScreen(); - } else if (document.webkitExitFullscreen) { - document.webkitExitFullscreen(); - } - } else if (element.requestFullscreen) { - element.requestFullscreen(Element.ALLOW_KEYBOARD_INPUT); - } else if (element.msRequestFullscreen) { - element.msRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT); - } else if (element.mozRequestFullScreen) { - element.mozRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT); - } else if (element.webkitRequestFullscreen) { - element.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT); + if (!this.isSupported()) { + el.classList.add(CLASS_FULLSCREEN_UNSUPPORTED); } + } + + if (this.isSupported()) { + fscreen.requestFullscreenFunction(el).call(el, Element.ALLOW_KEYBOARD_INPUT); + } else { + this.emit('enter'); + } + } + + /** + * Exit fullscreen mode + * + * @param {HTMLElement} el - fullscreen element + * @return {void} + */ + exit(el = document.documentElement) { + if (el instanceof HTMLElement) { + el.classList.remove(CLASS_FULLSCREEN); + el.classList.remove(CLASS_FULLSCREEN_UNSUPPORTED); + } + + if (this.isSupported()) { + fscreen.exitFullscreen(); + } else { + this.emit('exit'); + } + } + + /** + * Toggle fullscreen mode + * + * @public + * @param {HTMLElement} el - fullscreen element + * @return {void} + */ + toggle(el = document.documentElement) { + if (this.isFullscreen(el)) { + this.exit(el); } else { - this.fullscreenchangeHandler(element); + this.enter(el); } } } diff --git a/src/lib/__tests__/Fullscreen-test.js b/src/lib/__tests__/Fullscreen-test.js index 0b8755293..6c5ae6fb1 100644 --- a/src/lib/__tests__/Fullscreen-test.js +++ b/src/lib/__tests__/Fullscreen-test.js @@ -6,36 +6,29 @@ import { CLASS_FULLSCREEN } from '../constants'; const sandbox = sinon.sandbox.create(); describe('lib/Fullscreen', () => { - afterEach(() => { - sandbox.verifyAndRestore(); + beforeEach(() => { + sandbox.stub(fscreen, 'fullscreenElement').value(document.createElement('div')); }); - const fullscreenEl = document.createElement('div'); - beforeEach(() => { - Object.defineProperty(fscreen, 'fullscreenElement', { - value: fullscreenEl, - writable: true - }); + afterEach(() => { + sandbox.verifyAndRestore(); }); describe('isFullscreen()', () => { it('should return whether document is in fullscreen if true fullscreen is supported', () => { sandbox.stub(fullscreen, 'isSupported').returns(true); - Object.defineProperty(document, 'fullscreenElement', { - value: document.createElement('div'), - writable: true - }); - - expect(fullscreen.isFullscreen({})).to.be.true; + expect(fullscreen.isFullscreen()).to.be.true; - document.fullscreenElement = null; + sandbox.stub(fscreen, 'fullscreenElement').value(null); - expect(fullscreen.isFullscreen({})).to.be.false; + expect(fullscreen.isFullscreen()).to.be.false; }); it('should return whether element has fullscreen class if true fullscreen is not supported', () => { sandbox.stub(fullscreen, 'isSupported').returns(false); + sandbox.stub(fscreen, 'fullscreenElement').value(null); + const element = document.createElement('div'); element.classList.add(CLASS_FULLSCREEN); @@ -65,10 +58,10 @@ describe('lib/Fullscreen', () => { sandbox.stub(fullscreen, 'emit'); sandbox.stub(fullscreen, 'focusFullscreenElement'); - fullscreen.fullscreenchangeHandler({}); + fullscreen.fullscreenchangeHandler(); expect(fullscreen.emit).to.have.been.calledWith('enter'); - expect(fullscreen.focusFullscreenElement.called).to.be.true; + expect(fullscreen.focusFullscreenElement).to.have.been.called; }); it('should emit exit if we are exiting fullscreen and if true fullscreen is supported', () => { @@ -77,163 +70,90 @@ describe('lib/Fullscreen', () => { sandbox.stub(fullscreen, 'emit'); sandbox.stub(fullscreen, 'focusFullscreenElement'); - fullscreen.fullscreenchangeHandler({}); + fullscreen.fullscreenchangeHandler(); expect(fullscreen.emit).to.have.been.calledWith('exit'); - expect(fullscreen.focusFullscreenElement.called).to.be.false; + expect(fullscreen.focusFullscreenElement).not.to.have.been.called; }); it('should emit enter if we are entering fullscreen and if true fullscreen is not supported', () => { sandbox.stub(fullscreen, 'isSupported').returns(false); - sandbox.stub(fullscreen, 'isFullscreen').returns(false); + sandbox.stub(fullscreen, 'isFullscreen').returns(true); sandbox.stub(fullscreen, 'emit'); sandbox.stub(fullscreen, 'focusFullscreenElement'); - fullscreen.fullscreenchangeHandler({}); + fullscreen.fullscreenchangeHandler(); expect(fullscreen.emit).to.have.been.calledWith('enter'); }); it('should emit exit if we are exiting fullscreen and if true fullscreen is not supported', () => { sandbox.stub(fullscreen, 'isSupported').returns(false); - sandbox.stub(fullscreen, 'isFullscreen').returns(true); + sandbox.stub(fullscreen, 'isFullscreen').returns(false); sandbox.stub(fullscreen, 'emit'); - fullscreen.fullscreenchangeHandler({}); + fullscreen.fullscreenchangeHandler(); expect(fullscreen.emit).to.have.been.calledWith('exit'); }); }); - describe('toggle()', () => { - it('should trigger native exitFullscreen handler if in fullscreen and true fullscreen is supported', () => { - sandbox.stub(fullscreen, 'isSupported').returns(true); - sandbox.stub(fullscreen, 'isFullscreen').returns(true); - - const exitStub = sandbox.stub(); - document.exitFullscreen = exitStub; - - fullscreen.toggle({}); - - expect(exitStub).to.have.been.called; - }); - - it('should trigger native msExitFullscreen handler if in fullscreen and true fullscreen is supported', () => { - sandbox.stub(fullscreen, 'isSupported').returns(true); - sandbox.stub(fullscreen, 'isFullscreen').returns(true); - - const exitStub = sandbox.stub(); - document.exitFullscreen = null; - document.msExitFullscreen = exitStub; + describe('enter', () => { + it('should add the fullscreen class', () => { + const element = document.createElement('div'); - fullscreen.toggle({}); + fullscreen.enter(element); - expect(exitStub).to.have.been.called; + expect(element.classList.contains(CLASS_FULLSCREEN)).to.be.true; }); + }); - it('should trigger native mozCancelFullScreen handler if in fullscreen and true fullscreen is supported', () => { - sandbox.stub(fullscreen, 'isSupported').returns(true); - sandbox.stub(fullscreen, 'isFullscreen').returns(true); - - const exitStub = sandbox.stub(); - document.exitFullscreen = null; - document.msExitFullscreen = null; - document.mozCancelFullScreen = exitStub; + describe('exit', () => { + it('should remove the fullscreen class', () => { + const element = document.createElement('div'); + element.classList.add(CLASS_FULLSCREEN); - fullscreen.toggle({}); + fullscreen.enter(element); - expect(exitStub).to.have.been.called; + expect(element.classList.contains(CLASS_FULLSCREEN)).to.be.true; }); + }); - it('should trigger native webkitExitFullscreen handler if in fullscreen and true fullscreen is supported', () => { + describe('toggle()', () => { + it('should trigger native exitFullscreen handler if in fullscreen and true fullscreen is supported', () => { + const exitFullscreen = sinon.stub(); + sandbox.stub(fscreen, 'exitFullscreen').value(exitFullscreen); sandbox.stub(fullscreen, 'isSupported').returns(true); sandbox.stub(fullscreen, 'isFullscreen').returns(true); - const exitStub = sandbox.stub(); - document.exitFullscreen = null; - document.msExitFullscreen = null; - document.mozCancelFullScreen = null; - document.webkitExitFullscreen = exitStub; - fullscreen.toggle({}); - expect(exitStub).to.have.been.called; + expect(exitFullscreen).to.have.been.called; }); it('should trigger native requestFullscreen handler if not in fullscreen and true fullscreen is supported', () => { const element = document.createElement('div'); + const fullscreenStub = sandbox.stub(); + sandbox.stub(fscreen, 'requestFullscreenFunction').returns(fullscreenStub); sandbox.stub(fullscreen, 'isSupported').returns(true); sandbox.stub(fullscreen, 'isFullscreen').returns(false); - const enterStub = sandbox.stub(); - element.requestFullscreen = enterStub; - - fullscreen.toggle(element); - - expect(enterStub).to.have.been.called; - }); - - it('should trigger native msRequestFullscreen handler if not in fullscreen and true fullscreen is supported', () => { - const element = document.createElement('div'); - sandbox.stub(fullscreen, 'isSupported').returns(true); - sandbox.stub(fullscreen, 'isFullscreen').returns(false); - - const enterStub = sandbox.stub(); - element.requestFullscreen = null; - element.msRequestFullscreen = enterStub; - fullscreen.toggle(element); - expect(enterStub).to.have.been.called; - }); - - it('should trigger native mozRequestFullScreen handler if not in fullscreen and true fullscreen is supported', () => { - const element = document.createElement('div'); - sandbox.stub(fullscreen, 'isSupported').returns(true); - sandbox.stub(fullscreen, 'isFullscreen').returns(false); - - const enterStub = sandbox.stub(); - element.requestFullscreen = null; - element.msRequestFullscreen = null; - element.mozRequestFullScreen = enterStub; - - fullscreen.toggle(element); - - expect(enterStub).to.have.been.called; - }); - - it('should trigger native webkitRequestFullscreen handler if not in fullscreen and true fullscreen is supported', () => { - const element = document.createElement('div'); - sandbox.stub(fullscreen, 'isSupported').returns(true); - sandbox.stub(fullscreen, 'isFullscreen').returns(false); - - const enterStub = sandbox.stub(); - element.requestFullscreen = null; - element.msRequestFullscreen = null; - element.mozRequestFullScreen = null; - element.webkitRequestFullscreen = enterStub; - - fullscreen.toggle(element); - - expect(enterStub).to.have.been.called; - }); - - it('should trigger fullscreenchangeHandler if true fullscreen is not supported', () => { - const element = document.createElement('div'); - sandbox.stub(fullscreen, 'isSupported').returns(false); - sandbox.stub(fullscreen, 'fullscreenchangeHandler'); - - fullscreen.toggle(element); - - expect(fullscreen.fullscreenchangeHandler).to.have.been.calledWith(element); + expect(fullscreenStub).to.have.been.calledWith(Element.ALLOW_KEYBOARD_INPUT); }); }); describe('focusFullscreenElement()', () => { it('should focus the element when event is passed in', () => { - sandbox.stub(fullscreenEl, 'focus'); + const element = document.createElement('div'); + sandbox.stub(element, 'focus'); + sandbox.stub(fscreen, 'fullscreenElement').value(element); + + fullscreen.toggle(element); fullscreen.focusFullscreenElement(); - expect(fullscreenEl.focus.called).to.be.true; + + expect(fscreen.fullscreenElement.focus.called).to.be.true; }); }); }); diff --git a/src/lib/viewers/BaseViewer.js b/src/lib/viewers/BaseViewer.js index 8c3b1f5a9..a49c5f878 100644 --- a/src/lib/viewers/BaseViewer.js +++ b/src/lib/viewers/BaseViewer.js @@ -18,8 +18,6 @@ import { replacePlaceholders } from '../util'; import { - CLASS_FULLSCREEN, - CLASS_FULLSCREEN_UNSUPPORTED, CLASS_HIDDEN, CLASS_BOX_PREVIEW_MOBILE, FILE_OPTION_START, @@ -133,11 +131,12 @@ class BaseViewer extends EventEmitter { this.debouncedResizeHandler = this.getResizeHandler().bind(this); this.handleAssetError = this.handleAssetError.bind(this); this.toggleFullscreen = this.toggleFullscreen.bind(this); - this.onFullscreenToggled = this.onFullscreenToggled.bind(this); this.mobileZoomStartHandler = this.mobileZoomStartHandler.bind(this); this.mobileZoomChangeHandler = this.mobileZoomChangeHandler.bind(this); this.mobileZoomEndHandler = this.mobileZoomEndHandler.bind(this); this.handleAnnotatorEvents = this.handleAnnotatorEvents.bind(this); + this.handleFullscreenEnter = this.handleFullscreenEnter.bind(this); + this.handleFullscreenExit = this.handleFullscreenExit.bind(this); this.createAnnotator = this.createAnnotator.bind(this); this.viewerLoadHandler = this.viewerLoadHandler.bind(this); this.initAnnotations = this.initAnnotations.bind(this); @@ -445,9 +444,9 @@ class BaseViewer extends EventEmitter { * @return {void} */ addCommonListeners() { - // Attach common full screen event listeners - fullscreen.addListener('enter', this.onFullscreenToggled); - fullscreen.addListener('exit', this.onFullscreenToggled); + // Attach full screen event listeners + fullscreen.addListener('enter', this.handleFullscreenEnter); + fullscreen.addListener('exit', this.handleFullscreenExit); // Add a resize handler for the window document.defaultView.addEventListener('resize', this.debouncedResizeHandler); @@ -514,16 +513,20 @@ class BaseViewer extends EventEmitter { } /** - * Applies appropriate styles and resizes the document depending on fullscreen state + * Resize the document depending on fullscreen state * * @return {void} */ - onFullscreenToggled() { - this.containerEl.classList.toggle(CLASS_FULLSCREEN); - if (!fullscreen.isSupported()) { - this.containerEl.classList.toggle(CLASS_FULLSCREEN_UNSUPPORTED); - } + handleFullscreenEnter() { + this.resize(); + } + /** + * Resize the document depending on fullscreen state + * + * @return {void} + */ + handleFullscreenExit() { this.resize(); } diff --git a/src/lib/viewers/__tests__/BaseViewer-test.js b/src/lib/viewers/__tests__/BaseViewer-test.js index f3a3d0c2e..35e33bfa0 100644 --- a/src/lib/viewers/__tests__/BaseViewer-test.js +++ b/src/lib/viewers/__tests__/BaseViewer-test.js @@ -8,7 +8,6 @@ import DownloadReachability from '../../DownloadReachability'; import fullscreen from '../../Fullscreen'; import * as util from '../../util'; import * as icons from '../../icons/icons'; -import * as constants from '../../constants'; import { VIEWER_EVENT, LOAD_METRIC, ERROR_CODE } from '../../events'; import Timer from '../../Timer'; @@ -509,31 +508,22 @@ describe('lib/viewers/BaseViewer', () => { }); }); - describe('onFullscreenToggled()', () => { - beforeEach(() => { - base.containerEl = document.createElement('div'); - sandbox.stub(fullscreen, 'isSupported').returns(false); + describe('handleFullscreenEnter()', () => { + it('should resize the viewer', () => { sandbox.stub(base, 'resize'); - }); - it('should toggle the fullscreen class', () => { - base.onFullscreenToggled(); - expect(base.containerEl.classList.contains(constants.CLASS_FULLSCREEN)).to.be.true; + base.handleFullscreenEnter(); - base.onFullscreenToggled(); - expect(base.containerEl.classList.contains(constants.CLASS_FULLSCREEN)).to.be.false; + expect(base.resize).to.be.called; }); + }); - it('should toggle the unsupported class if the browser does not support the fullscreen API', () => { - base.onFullscreenToggled(); - expect(base.containerEl.classList.contains(constants.CLASS_FULLSCREEN_UNSUPPORTED)).to.be.true; + describe('handleFullscreenExit()', () => { + it('should resize the viewer', () => { + sandbox.stub(base, 'resize'); - base.onFullscreenToggled(); - expect(base.containerEl.classList.contains(constants.CLASS_FULLSCREEN_UNSUPPORTED)).to.be.false; - }); + base.handleFullscreenExit(); - it('should resize the viewer', () => { - base.onFullscreenToggled(); expect(base.resize).to.be.called; }); }); diff --git a/src/lib/viewers/box3d/Box3DViewer.js b/src/lib/viewers/box3d/Box3DViewer.js index 0d8279c34..ba4bb5581 100644 --- a/src/lib/viewers/box3d/Box3DViewer.js +++ b/src/lib/viewers/box3d/Box3DViewer.js @@ -1,5 +1,4 @@ import BaseViewer from '../BaseViewer'; -import fullscreen from '../../Fullscreen'; import Box3DControls from './Box3DControls'; import Box3DRenderer from './Box3DRenderer'; import Browser from '../../Browser'; @@ -226,13 +225,6 @@ class Box3DViewer extends BaseViewer { } } - /** - * @inheritdoc - */ - toggleFullscreen() { - fullscreen.toggle(this.containerEl); - } - /** * Handle the loss of the WebGL context by cleaning up the controls and renderer. * diff --git a/src/lib/viewers/doc/DocBaseViewer.js b/src/lib/viewers/doc/DocBaseViewer.js index 4691069da..160984e4f 100644 --- a/src/lib/viewers/doc/DocBaseViewer.js +++ b/src/lib/viewers/doc/DocBaseViewer.js @@ -4,7 +4,6 @@ import Browser from '../../Browser'; import Controls from '../../Controls'; import PageControls from '../../PageControls'; import DocFindBar from './DocFindBar'; -import fullscreen from '../../Fullscreen'; import Popup from '../../Popup'; import RepStatus from '../../RepStatus'; import PreviewError from '../../PreviewError'; @@ -75,8 +74,6 @@ class DocBaseViewer extends BaseViewer { this.pagerenderedHandler = this.pagerenderedHandler.bind(this); this.pagechangeHandler = this.pagechangeHandler.bind(this); this.pagesinitHandler = this.pagesinitHandler.bind(this); - this.enterfullscreenHandler = this.enterfullscreenHandler.bind(this); - this.exitfullscreenHandler = this.exitfullscreenHandler.bind(this); this.throttledScrollHandler = this.getScrollHandler().bind(this); this.pinchToZoomStartHandler = this.pinchToZoomStartHandler.bind(this); this.pinchToZoomChangeHandler = this.pinchToZoomChangeHandler.bind(this); @@ -888,10 +885,6 @@ class DocBaseViewer extends BaseViewer { // Detects scroll so an event can be fired this.docEl.addEventListener('scroll', this.throttledScrollHandler); - // Fullscreen - fullscreen.addListener('enter', this.enterfullscreenHandler); - fullscreen.addListener('exit', this.exitfullscreenHandler); - if (this.hasTouch) { this.docEl.addEventListener('touchstart', this.pinchToZoomStartHandler); this.docEl.addEventListener('touchmove', this.pinchToZoomChangeHandler); @@ -918,9 +911,6 @@ class DocBaseViewer extends BaseViewer { this.docEl.removeEventListener('touchend', this.pinchToZoomEndHandler); } } - - fullscreen.removeListener('enter', this.enterfullscreenHandler); - fullscreen.removeListener('exit', this.exitfullscreenHandler); } /** @@ -1015,28 +1005,16 @@ class DocBaseViewer extends BaseViewer { this.emit('pagefocus', pageNumber); } - /** - * Fullscreen entered handler. Add presentation mode class, set - * presentation mode state, and set zoom to fullscreen zoom. - * - * @private - * @return {void} - */ - enterfullscreenHandler() { + /** @inheritDoc */ + handleFullscreenEnter() { this.pdfViewer.currentScaleValue = 'page-fit'; - this.resize(); + super.handleFullscreenEnter(); } - /** - * Fullscreen exited handler. Remove presentation mode class, set - * presentation mode state, and reset zoom. - * - * @return {void} - * @private - */ - exitfullscreenHandler() { + /** @inheritDoc */ + handleFullscreenExit() { this.pdfViewer.currentScaleValue = 'auto'; - this.resize(); + super.handleFullscreenExit(); } /** diff --git a/src/lib/viewers/doc/__tests__/DocBaseViewer-test.js b/src/lib/viewers/doc/__tests__/DocBaseViewer-test.js index 6265fb1cc..9192c746f 100644 --- a/src/lib/viewers/doc/__tests__/DocBaseViewer-test.js +++ b/src/lib/viewers/doc/__tests__/DocBaseViewer-test.js @@ -1362,9 +1362,6 @@ describe('src/lib/viewers/doc/DocBaseViewer', () => { expect(stubs.addEventListener).to.not.be.calledWith('touchstart', docBase.pinchToZoomStartHandler); expect(stubs.addEventListener).to.not.be.calledWith('touchmove', docBase.pinchToZoomChangeHandler); expect(stubs.addEventListener).to.not.be.calledWith('touchend', docBase.pinchToZoomEndHandler); - - expect(stubs.addListener).to.be.calledWith('enter', docBase.enterfullscreenHandler); - expect(stubs.addListener).to.be.calledWith('exit', docBase.exitfullscreenHandler); }); it('should add the pinch to zoom handler if touch is detected', () => { @@ -1402,12 +1399,6 @@ describe('src/lib/viewers/doc/DocBaseViewer', () => { docBase.docEl = docElTemp; }); - it('should remove the fullscreen listener', () => { - docBase.unbindDOMListeners(); - expect(stubs.removeFullscreenListener).to.be.calledWith('enter', docBase.enterfullscreenHandler); - expect(stubs.removeFullscreenListener).to.be.calledWith('exit', docBase.exitfullscreenHandler); - }); - it('should remove pinch to zoom listeners if the browser has touch', () => { docBase.hasTouch = true; @@ -1547,7 +1538,7 @@ describe('src/lib/viewers/doc/DocBaseViewer', () => { }); }); - describe('enterfullscreenHandler()', () => { + describe('handleFullscreenEnter()', () => { it('should update the scale value, and resize the page', () => { docBase.pdfViewer = { presentationModeState: 'normal', @@ -1555,13 +1546,13 @@ describe('src/lib/viewers/doc/DocBaseViewer', () => { }; const resizeStub = sandbox.stub(docBase, 'resize'); - docBase.enterfullscreenHandler(); + docBase.handleFullscreenEnter(); expect(resizeStub).to.be.called; expect(docBase.pdfViewer.currentScaleValue).to.equal('page-fit'); }); }); - describe('exitfullscreenHandler()', () => { + describe('handleFullscreenExit()', () => { it('should update the scale value, and resize the page', () => { docBase.pdfViewer = { presentationModeState: 'fullscreen', @@ -1569,7 +1560,7 @@ describe('src/lib/viewers/doc/DocBaseViewer', () => { }; const resizeStub = sandbox.stub(docBase, 'resize'); - docBase.exitfullscreenHandler(); + docBase.handleFullscreenExit(); expect(resizeStub).to.be.called; expect(docBase.pdfViewer.currentScaleValue).to.equal('auto'); }); diff --git a/src/lib/viewers/media/MediaControls.js b/src/lib/viewers/media/MediaControls.js index 8cf8c8068..24df5c73a 100644 --- a/src/lib/viewers/media/MediaControls.js +++ b/src/lib/viewers/media/MediaControls.js @@ -72,7 +72,6 @@ class MediaControls extends EventEmitter { this.togglePlay = this.togglePlay.bind(this); this.toggleMute = this.toggleMute.bind(this); this.toggleFullscreen = this.toggleFullscreen.bind(this); - this.toggleFullscreenIcon = this.toggleFullscreenIcon.bind(this); this.toggleSettings = this.toggleSettings.bind(this); this.toggleSubtitles = this.toggleSubtitles.bind(this); this.setFilmstrip = this.setFilmstrip.bind(this); @@ -84,6 +83,8 @@ class MediaControls extends EventEmitter { this.handleAutoplay = this.handleAutoplay.bind(this); this.handleSubtitle = this.handleSubtitle.bind(this); this.handleAudioTrack = this.handleAudioTrack.bind(this); + this.handleFullscreenEnter = this.handleFullscreenEnter.bind(this); + this.handleFullscreenExit = this.handleFullscreenExit.bind(this); this.timeScrubberHandler = this.timeScrubberHandler.bind(this); this.setDuration(this.mediaEl.duration); @@ -158,8 +159,7 @@ class MediaControls extends EventEmitter { } if (fullscreen) { - fullscreen.removeListener('exit', this.toggleFullscreenIcon); - fullscreen.removeListener('enter', this.toggleFullscreenIcon); + fullscreen.destroy(); } this.wrapperEl = undefined; @@ -227,6 +227,26 @@ class MediaControls extends EventEmitter { this.emit('autoplaychange'); } + /** + * Update the fullscreen icon and associated label when entering fullscreen mode. + * + * @return {void} + */ + handleFullscreenEnter() { + this.setLabel(this.fullscreenButtonEl, __('exit_fullscreen')); + this.containerEl.classList.add('bp-is-fullscreen'); + } + + /** + * Update the fullscreen icon and associated label when exiting fullscreen mode. + * + * @return {void} + */ + handleFullscreenExit() { + this.setLabel(this.fullscreenButtonEl, __('enter_fullscreen')); + this.containerEl.classList.remove('bp-is-fullscreen'); + } + /** * Attaches settings menu * @@ -371,22 +391,6 @@ class MediaControls extends EventEmitter { this.emit('togglefullscreen'); } - /** - * sets the fullscreen icon and associated label when changing fullscreen mode. - * - * @private - * @return {void} - */ - toggleFullscreenIcon() { - if (fullscreen.isFullscreen(this.containerEl)) { - this.setLabel(this.fullscreenButtonEl, __('exit_fullscreen')); - this.containerEl.classList.add('bp-is-fullscreen'); - } else { - this.setLabel(this.fullscreenButtonEl, __('enter_fullscreen')); - this.containerEl.classList.remove('bp-is-fullscreen'); - } - } - /** * Toggles settings menu * @@ -602,8 +606,8 @@ class MediaControls extends EventEmitter { addActivationListener(this.settingsButtonEl, this.toggleSettingsHandler); addActivationListener(this.subtitlesButtonEl, this.toggleSubtitlesHandler); - fullscreen.addListener('exit', this.toggleFullscreenIcon); - fullscreen.addListener('enter', this.toggleFullscreenIcon); + fullscreen.addListener('enter', this.handleFullscreenEnter); + fullscreen.addListener('exit', this.handleFullscreenExit); } /** diff --git a/src/lib/viewers/media/__tests__/MediaControls-test.js b/src/lib/viewers/media/__tests__/MediaControls-test.js index 3474e818a..81dd256e0 100644 --- a/src/lib/viewers/media/__tests__/MediaControls-test.js +++ b/src/lib/viewers/media/__tests__/MediaControls-test.js @@ -440,7 +440,7 @@ describe('lib/viewers/media/MediaControls', () => { it('should set the label to exit fullscreen if in fullscreen', () => { stubs.isFullscreen.returns(true); - mediaControls.toggleFullscreenIcon(); + mediaControls.handleFullscreenEnter(); expect(stubs.setLabel).to.be.calledWith(mediaControls.fullscreenButtonEl, __('exit_fullscreen')); expect(mediaControls.containerEl.classList.contains('bp-is-fullscreen')).to.be.true; }); @@ -448,7 +448,7 @@ describe('lib/viewers/media/MediaControls', () => { it('should set the label to enter fullscreen if it\'s not fullscreen', () => { stubs.isFullscreen.returns(false); - mediaControls.toggleFullscreenIcon(); + mediaControls.handleFullscreenExit(); expect(stubs.setLabel).to.be.calledWith(mediaControls.fullscreenButtonEl, __('enter_fullscreen')); expect(mediaControls.containerEl.classList.contains('bp-is-fullscreen')).to.be.false; });