#77 Close fullscreen using the control fix (#81)

Author: mderrick

src/DefaultPlayer/DefaultPlayer.js

@@ -5,10 +5,10 @@ import {
     setVolume,
     showTrack,
     toggleTracks,
-    fullscreen,
     toggleMute,
     togglePause,
     setCurrentTime,
+    toggleFullscreen,
     getPercentagePlayed,
     getPercentageBuffered
 } from './../video/api';
@@ -134,7 +134,7 @@ export default videoConnect(
         }
     }),
     (videoEl, state) => ({
-        onFullscreenClick: () => fullscreen(videoEl.parentElement),
+        onFullscreenClick: () => toggleFullscreen(videoEl.parentElement),
         onVolumeClick: () => toggleMute(videoEl, state),
         onCaptionsClick: () => toggleTracks(state),
         onPlayPauseClick: () => togglePause(videoEl, state),

src/video/api.js

@@ -40,15 +40,26 @@ export const toggleMute = (videoEl, { volume, muted }) => {
     }
 };
 
-export const fullscreen = (videoEl) => {
-    if (videoEl.requestFullscreen) {
-        videoEl.requestFullscreen();
-    } else if (videoEl.msRequestFullscreen) {
-        videoEl.msRequestFullscreen();
-    } else if (videoEl.mozRequestFullScreen) {
-        videoEl.mozRequestFullScreen();
-    } else if (videoEl.webkitRequestFullscreen) {
-        videoEl.webkitRequestFullscreen();
+export const toggleFullscreen = (videoEl) => {
+    videoEl.requestFullScreen =
+        videoEl.requestFullscreen
+        || videoEl.msRequestFullscreen
+        || videoEl.mozRequestFullScreen
+        || videoEl.webkitRequestFullscreen;
+    document.exitFullscreen =
+        document.exitFullscreen
+        || document.msExitFullscreen
+        || document.mozCancelFullScreen
+        || document.webkitExitFullscreen;
+    const fullscreenElement =
+        document.fullscreenElement
+        || document.msFullscreenElement
+        || document.mozFullScreenElement
+        || document.webkitFullscreenElement;
+    if (fullscreenElement === videoEl) {
+        document.exitFullscreen();
+    } else {
+        videoEl.requestFullScreen();
     }
 };
 

src/video/api.test.js

@@ -4,11 +4,11 @@ import {
     setVolume,
     showTrack,
     toggleMute,
-    fullscreen,
     hideTracks,
     togglePause,
     toggleTracks,
     setCurrentTime,
+    toggleFullscreen,
     getPercentagePlayed
 } from './api';
 
@@ -119,29 +119,72 @@ describe('api', () => {
         });
     });
 
-    describe('fullscreen', () => {
-        it('requestsFullscreen', () => {
-            videoElMock.requestFullscreen = jest.fn();
-            fullscreen(videoElMock);
-            expect(videoElMock.requestFullscreen).toHaveBeenCalled();
-        });
+    describe('toggleFullscreen', () => {
+        describe('going fullscreen', () => {
+            it('requestsFullscreen', () => {
+                videoElMock.requestFullscreen = jest.fn();
+                toggleFullscreen(videoElMock);
+                expect(videoElMock.requestFullscreen).toHaveBeenCalled();
+            });
 
-        it('requestsFullscreen for ms', () => {
-            videoElMock.msRequestFullscreen = jest.fn();
-            fullscreen(videoElMock);
-            expect(videoElMock.msRequestFullscreen).toHaveBeenCalled();
-        });
+            it('requestsFullscreen for ms', () => {
+                videoElMock.msRequestFullscreen = jest.fn();
+                toggleFullscreen(videoElMock);
+                expect(videoElMock.msRequestFullscreen).toHaveBeenCalled();
+            });
 
-        it('requestsFullscreen for moz', () => {
-            videoElMock.mozRequestFullScreen = jest.fn();
-            fullscreen(videoElMock);
-            expect(videoElMock.mozRequestFullScreen).toHaveBeenCalled();
+            it('requestsFullscreen for moz', () => {
+                videoElMock.mozRequestFullScreen = jest.fn();
+                toggleFullscreen(videoElMock);
+                expect(videoElMock.mozRequestFullScreen).toHaveBeenCalled();
+            });
+
+            it('requestsFullscreen for webkit', () => {
+                videoElMock.webkitRequestFullscreen = jest.fn();
+                toggleFullscreen(videoElMock);
+                expect(videoElMock.webkitRequestFullscreen).toHaveBeenCalled();
+            });
         });
 
-        it('requestsFullscreen for webkit', () => {
-            videoElMock.webkitRequestFullscreen = jest.fn();
-            fullscreen(videoElMock);
-            expect(videoElMock.webkitRequestFullscreen).toHaveBeenCalled();
+        describe('exiting fullscreen', () => {
+            beforeEach(() => {
+                document.exitFullscreen = undefined;
+                document.msExitFullscreen = undefined;
+                document.mozCancelFullScreen = undefined;
+                document.webkitExitFullscreen = undefined;
+                document.fullscreenElement = undefined;
+                document.msFullscreenElement = undefined;
+                document.mozFullScreenElement = undefined;
+                document.webkitFullscreenElement = undefined;
+            });
+
+            it('exitFullscreen', () => {
+                document.fullscreenElement = videoElMock;
+                document.exitFullscreen = jest.fn();
+                toggleFullscreen(videoElMock);
+                expect(document.exitFullscreen).toHaveBeenCalled();
+            });
+
+            it('exitFullscreen for ms', () => {
+                document.msFullscreenElement = videoElMock;
+                document.msExitFullscreen = jest.fn();
+                toggleFullscreen(videoElMock);
+                expect(document.msExitFullscreen).toHaveBeenCalled();
+            });
+
+            it('exitFullscreen for moz', () => {
+                document.mozFullScreenElement = videoElMock;
+                document.mozCancelFullScreen = jest.fn();
+                toggleFullscreen(videoElMock);
+                expect(document.mozCancelFullScreen).toHaveBeenCalled();
+            });
+
+            it('exitFullscreen for webkit', () => {
+                document.webkitFullscreenElement = videoElMock;
+                document.webkitExitFullscreen = jest.fn();
+                toggleFullscreen(videoElMock);
+                expect(document.webkitExitFullscreen).toHaveBeenCalled();
+            });
         });
     });