feat(core): change ios fullscreen toggle to use the playback element

clappr · Dec 6, 2019 · dc2f7d7 · dc2f7d7
1 parent 18630d3
commit dc2f7d7
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 16 deletions.
diff --git a/src/components/core/core.js b/src/components/core/core.js
@@ -305,9 +305,6 @@ export default class Core extends UIObject {
 
     if (!fullscreenElement) return false
 
-    if (Browser.isiOS)
-      return fullscreenElement === (this.activeContainer && this.activeContainer.el || this.el)
-
     const playbackEl = this.activePlayback && this.activePlayback.el
     return (fullscreenElement === this.el) || (fullscreenElement === playbackEl)
   }
@@ -317,7 +314,9 @@ export default class Core extends UIObject {
       Fullscreen.cancelFullscreen()
       !Browser.isiOS && this.$el.removeClass('fullscreen nocursor')
     } else {
-      Fullscreen.requestFullscreen(Browser.isiOS ? this.activeContainer.el : this.el)
+      const fullscreenEl = Browser.isiOS ? this.activePlayback && this.activePlayback.el : this.el
+      if (!fullscreenEl) return
+      Fullscreen.requestFullscreen(fullscreenEl)
       !Browser.isiOS && this.$el.addClass('fullscreen')
     }
   }

diff --git a/test/components/core_spec.js b/test/components/core_spec.js
@@ -98,18 +98,19 @@ describe('Core', function() {
         browserStub.restore()
       })
 
-      it('returns false if there\'s no active container', () => {
-        fullscreenElementStub.returns(undefined)
+      it('returns false if there\'s no active playback', () => {
+        this.core.activeContainer = 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 }
+      it('returns true if the fullscreen element is from the active playback', () => {
+        const el = document.createElement('div')
+        el.setAttribute('id', 'fakePlayback')
+        const playback = { el }
+        this.core.activeContainer = { playback }
 
-        fullscreenElementStub.returns(this.core.activeContainer.el)
+        fullscreenElementStub.returns(el)
 
         expect(this.core.isFullscreen()).to.equal(true)
       })
@@ -159,14 +160,15 @@ describe('Core', function() {
           browserStub.restore()
         })
 
-        it('calls Fullscreen.requestFullscreen with currentContainer element', () => {
-          const fakeCurrentContainer = document.createElement('div')
-          fakeCurrentContainer.setAttribute('id', 'fakeCurrentContainer')
-          this.core.activeContainer = { el: fakeCurrentContainer }
+        it('calls Fullscreen.requestFullscreen with activePlayback element', () => {
+          const el = document.createElement('div')
+          el.setAttribute('id', 'fakePlayback')
+          const playback = { el }
+          this.core.activeContainer = { playback }
 
           this.core.toggleFullscreen()
 
-          expect(fullScreenSpy).to.have.been.calledWith(this.core.activeContainer.el)
+          expect(fullScreenSpy).to.have.been.calledWith(el)
         })
       })
     })