Fix: Fix fullscreen icon for video (#456)

box · Oct 31, 2017 · ef5614a · ef5614a
1 parent fa7855e
commit ef5614a
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 18 deletions.
diff --git a/src/lib/viewers/media/MediaControls.js b/src/lib/viewers/media/MediaControls.js
@@ -133,7 +133,8 @@ class MediaControls extends EventEmitter {
         }
 
         if (fullscreen) {
-            fullscreen.removeListener('exit', this.setFullscreenLabel);
+            fullscreen.removeListener('exit', this.toggleFullscreenIcon);
+            fullscreen.removeListener('enter', this.toggleFullscreenIcon);
         }
 
         this.wrapperEl = undefined;
@@ -342,20 +343,22 @@ class MediaControls extends EventEmitter {
     toggleFullscreen() {
         this.show();
         this.emit('togglefullscreen');
-        this.setFullscreenLabel();
     }
 
     /**
-     * sets the fullscreen label once fullscreen mode has been exited.
+     * sets the fullscreen icon and associated label when changing fullscreen mode.
      *
      * @private
      * @return {void}
      */
-    setFullscreenLabel() {
-        const fullscreenTitle = fullscreen.isFullscreen(this.containerEl)
-            ? __('exit_fullscreen')
-            : __('enter_fullscreen');
-        this.setLabel(this.fullscreenButtonEl, fullscreenTitle);
+    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');
+        }
     }
 
     /**
@@ -573,7 +576,8 @@ class MediaControls extends EventEmitter {
         addActivationListener(this.settingsButtonEl, this.toggleSettingsHandler);
         addActivationListener(this.subtitlesButtonEl, this.toggleSubtitlesHandler);
 
-        fullscreen.addListener('exit', this.setFullscreenLabel);
+        fullscreen.addListener('exit', this.toggleFullscreenIcon);
+        fullscreen.addListener('enter', this.toggleFullscreenIcon);
     }
 
     /**

diff --git a/src/lib/viewers/media/MediaControls.scss b/src/lib/viewers/media/MediaControls.scss
@@ -140,6 +140,12 @@
     }
 }
 
+.bp-is-fullscreen {
+    .bp-media-fullscreen-icon .bp-exit-fullscreen-icon {
+        display: inline-block;
+    }
+}
+
 .bp-media-fullscreen-icon {
     position: absolute;
     right: 10px;

diff --git a/src/lib/viewers/media/__tests__/MediaControls-test.js b/src/lib/viewers/media/__tests__/MediaControls-test.js
@@ -415,21 +415,15 @@ describe('lib/viewers/media/MediaControls', () => {
     describe('toggleFullscreen()', () => {
         beforeEach(() => {
             stubs.emit = sandbox.stub(mediaControls, 'emit');
-            stubs.setFullscreenLabel = sandbox.stub(mediaControls, 'setFullscreenLabel');
         });
 
         it('should emit a togglefullscreen message', () => {
             mediaControls.toggleFullscreen();
             expect(stubs.emit).to.be.calledWith('togglefullscreen');
         });
-
-        it('should set the fullscreen label', () => {
-            mediaControls.toggleFullscreen();
-            expect(stubs.setFullscreenLabel).to.be.called;
-        });
     });
 
-    describe('setFullscreenLabel()', () => {
+    describe('toggleFullscreenIcon()', () => {
         beforeEach(() => {
             stubs.isFullscreen = sandbox.stub(fullscreen, 'isFullscreen');
             stubs.setLabel = sandbox.stub(mediaControls, 'setLabel');
@@ -438,15 +432,17 @@ describe('lib/viewers/media/MediaControls', () => {
         it('should set the label to exit fullscreen if in fullscreen', () => {
             stubs.isFullscreen.returns(true);
 
-            mediaControls.setFullscreenLabel();
+            mediaControls.toggleFullscreenIcon();
             expect(stubs.setLabel).to.be.calledWith(mediaControls.fullscreenButtonEl, __('exit_fullscreen'));
+            expect(mediaControls.containerEl.classList.contains('bp-is-fullscreen')).to.be.true;
         });
 
         it('should set the label to enter fullscreen if it\'s not fullscreen', () => {
             stubs.isFullscreen.returns(false);
 
-            mediaControls.setFullscreenLabel();
+            mediaControls.toggleFullscreenIcon();
             expect(stubs.setLabel).to.be.calledWith(mediaControls.fullscreenButtonEl, __('enter_fullscreen'));
+            expect(mediaControls.containerEl.classList.contains('bp-is-fullscreen')).to.be.false;
         });
     });