fix(core): prevent exceptions calling isFullscreen on iOS

clappr · Dec 3, 2019 · 7848293 · 7848293
1 parent aff0661
commit 7848293
Show file tree

Hide file tree

Showing 2 changed files with 85 additions and 8 deletions.
diff --git a/src/components/core/core.js b/src/components/core/core.js
@@ -301,7 +301,8 @@ export default class Core extends UIObject {
 
   isFullscreen() {
     // Ensure current instance is in fullscreen mode by checking fullscreen element
-    return Fullscreen.fullscreenElement() === (Browser.isiOS ? this.activeContainer.el : this.el)
+    const el = Browser.isiOS ? this.activeContainer && this.activeContainer.el || this.el : this.el
+    return Fullscreen.fullscreenElement() === el
   }
 
   toggleFullscreen() {

diff --git a/test/components/core_spec.js b/test/components/core_spec.js
@@ -44,6 +44,69 @@ describe('Core', function() {
     })
   })
 
+  describe('#isFullscreen', () => {
+    let fullscreenElementStub
+
+    beforeEach(() => {
+      fullscreenElementStub = sinon.stub(Fullscreen, 'fullscreenElement')
+      const el = document.createElement('div')
+      el.setAttribute('id', 'fakeCoreElement')
+      this.core = new Core({})
+      this.core.el = el
+    })
+
+    afterEach(() => {
+      fullscreenElementStub.restore()
+    })
+
+    it('returns false when there\'s no active fullscreen element', () => {
+      fullscreenElementStub.returns(undefined)
+
+      expect(this.core.isFullscreen()).to.equal(false)
+    })
+
+    it('returns false when the active fullscreen element is not the core element', () => {
+      const el = document.createElement('div')
+      fullscreenElementStub.returns(el)
+
+      expect(this.core.isFullscreen()).to.equal(false)
+    })
+
+    it('returns true if the active fullscreen element is the core element', () => {
+      fullscreenElementStub.returns(this.core.el)
+
+      expect(this.core.isFullscreen()).to.equal(true)
+    })
+
+    describe('on iOS', () => {
+      let browserStub
+
+      beforeEach(() => {
+        browserStub = sinon.stub(Browser, 'isiOS').value(true)
+      })
+
+      afterEach(() => {
+        browserStub.restore()
+      })
+
+      it('returns false if there\'s no active container', () => {
+        fullscreenElementStub.returns(undefined)
+
+        expect(this.core.isFullscreen()).to.equal(false)
+      })
+
+      it('returns false if the fullscreen element is from the active container', () => {
+        const fakeCurrentContainer = document.createElement('div')
+        fakeCurrentContainer.setAttribute('id', 'fakeCurrentContainer')
+        this.core.activeContainer = { el: fakeCurrentContainer }
+
+        fullscreenElementStub.returns(this.core.activeContainer.el)
+
+        expect(this.core.isFullscreen()).to.equal(true)
+      })
+    })
+  })
+
   describe('#toggleFullscreen', () => {
     beforeEach(() => {
       this.core = new Core({})
@@ -61,10 +124,6 @@ describe('Core', function() {
       })
 
       describe('and is not an iOS Browser', () => {
-        beforeEach(() => {
-          sinon.stub(Browser, 'isiOS').value(false)
-        })
-
         it('calls Fullscreen.requestFullscreen with core element', () => {
           this.core.toggleFullscreen()
           expect(fullScreenSpy).to.have.been.calledWith(this.core.el)
@@ -82,8 +141,16 @@ describe('Core', function() {
       })
 
       describe('and is an iOS Browser', () => {
+        let browserStub
+        beforeEach(() => {
+          browserStub = sinon.stub(Browser, 'isiOS').value(true)
+        })
+
+        afterEach(() => {
+          browserStub.restore()
+        })
+
         it('calls Fullscreen.requestFullscreen with currentContainer element', () => {
-          sinon.stub(Browser, 'isiOS').value(true)
           const fakeCurrentContainer = document.createElement('div')
           fakeCurrentContainer.setAttribute('id', 'fakeCurrentContainer')
           this.core.activeContainer = { el: fakeCurrentContainer }
@@ -96,7 +163,6 @@ describe('Core', function() {
     })
 
     describe('when is in fullscreen', () => {
-
       it('calls Fullscreen.cancelFullscreen', () => {
         const spy = sinon.spy(Fullscreen, 'cancelFullscreen')
         sinon.stub(Browser, 'isiOS').value(false)
@@ -120,6 +186,16 @@ describe('Core', function() {
       })
     })
     describe('Multiple instances', () => {
+      let fullscreenElementStub
+
+      beforeEach(() => {
+        fullscreenElementStub = sinon.stub(Fullscreen, 'fullscreenElement')
+      })
+
+      afterEach(() => {
+        fullscreenElementStub.restore()
+      })
+
       it('shouldn\'t toggle one instance fullscreen state when another one stops', () => {
         const newInstance = new Core({})
         const fakeContainer1 = document.createElement('div')
@@ -129,7 +205,7 @@ describe('Core', function() {
         expect(this.core.isFullscreen()).to.equal(false)
         expect(newInstance.isFullscreen()).to.equal(false)
 
-        sinon.stub(Fullscreen, 'fullscreenElement').returns(fakeContainer1)
+        fullscreenElementStub.returns(fakeContainer1)
         expect(this.core.isFullscreen()).to.equal(false)
         expect(newInstance.isFullscreen()).to.equal(true)
       })