fullscreen module; web fullscreen event

demo/index.html

@@ -117,7 +117,7 @@
                 'quality_start', 'quality_end',
                 'destroy',
                 'resize',
-                'fullscreen', 'fullscreen_cancel'
+                'fullscreen', 'fullscreen_cancel', 'webfullscreen', 'webfullscreen_cancel'
             ];
             var eventsEle = document.getElementById('events');
             for (let i = 0; i < events.length; i++) {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "dplayer",
-  "version": "1.9.0",
+  "version": "1.9.1",
   "description": "Wow, such a lovely HTML5 danmaku video player",
   "main": "dist/DPlayer.min.js",
   "style": "dist/DPlayer.min.css",

src/DPlayer.js

@@ -8,6 +8,7 @@ import html from './html';
 import Danmaku from './danmaku';
 import Thumbnails from './thumbnails';
 import Events from './events';
+import FullScreen from './fullscreen';
 
 let index = 0;
 
@@ -599,61 +600,16 @@ class DPlayer {
 
         commentSendIcon.addEventListener('click', sendComment);
 
+        this.fullScreen = new FullScreen(this);
 
-        /**
-         * full screen
-         */
-        this.element.addEventListener('fullscreenchange', () => {
-            this.resize();
-        });
-        this.element.addEventListener('mozfullscreenchange', () => {
-            this.resize();
-        });
-        this.element.addEventListener('webkitfullscreenchange', () => {
-            this.resize();
-        });
         // browser full screen
         this.element.getElementsByClassName('dplayer-full-icon')[0].addEventListener('click', () => {
-            if (!document.fullscreenElement && !document.mozFullScreenElement && !document.webkitFullscreenElement) {
-                if (this.element.requestFullscreen) {
-                    this.element.requestFullscreen();
-                }
-                else if (this.element.mozRequestFullScreen) {
-                    this.element.mozRequestFullScreen();
-                }
-                else if (this.element.webkitRequestFullscreen) {
-                    this.element.webkitRequestFullscreen();
-                }
-                else if (this.video.webkitEnterFullscreen) {   // Safari for iOS
-                    this.video.webkitEnterFullscreen();
-                }
-
-                this.events.trigger('fullscreen');
-            }
-            else {
-                if (document.cancelFullScreen) {
-                    document.cancelFullScreen();
-                }
-                else if (document.mozCancelFullScreen) {
-                    document.mozCancelFullScreen();
-                }
-                else if (document.webkitCancelFullScreen) {
-                    document.webkitCancelFullScreen();
-                }
-
-                this.events.trigger('fullscreen_cancel');
-            }
-            this.resize();
+            this.fullScreen.toggle('browser');
         });
+
         // web full screen
         this.element.getElementsByClassName('dplayer-full-in-icon')[0].addEventListener('click', () => {
-            if (this.element.classList.contains('dplayer-fulled')) {
-                this.element.classList.remove('dplayer-fulled');
-            }
-            else {
-                this.element.classList.add('dplayer-fulled');
-                this.resize();
-            }
+            this.fullScreen.toggle('web');
         });
 
         /**
@@ -702,9 +658,8 @@ class DPlayer {
             const event = e || window.event;
             switch (event.keyCode) {
             case 27:
-                if (this.element.classList.contains('dplayer-fulled')) {
-                    this.element.classList.remove('dplayer-fulled');
-                    this.resize();
+                if (this.fullScreen.isFullScreen('web')) {
+                    this.fullScreen.cancel('web');
                 }
                 break;
             }

src/events.js

@@ -18,7 +18,7 @@ class Events {
             'quality_start', 'quality_end',
             'destroy',
             'resize',
-            'fullscreen', 'fullscreen_cancel'
+            'fullscreen', 'fullscreen_cancel', 'webfullscreen', 'webfullscreen_cancel'
         ];
     }
 

src/fullscreen.js

@@ -0,0 +1,88 @@
+class FullScreen {
+    constructor (player) {
+        this.player = player;
+
+        this.player.events.on('webfullscreen', () => {
+            this.player.resize();
+        });
+        this.player.events.on('webfullscreen_cancel', () => {
+            this.player.resize();
+        });
+
+        const fullscreenchange = () => {
+            this.player.resize();
+            if (this.isFullScreen('browser')) {
+                this.player.events.trigger('fullscreen');
+            }
+            else {
+                this.player.events.trigger('fullscreen_cancel');
+            }
+        };
+        this.player.element.addEventListener('fullscreenchange', fullscreenchange);
+        this.player.element.addEventListener('mozfullscreenchange', fullscreenchange);
+        this.player.element.addEventListener('webkitfullscreenchange', fullscreenchange);
+    }
+
+    isFullScreen (type = 'browser') {
+        switch (type) {
+        case 'browser':
+            return document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement;
+        case 'web':
+            return this.player.element.classList.contains('dplayer-fulled');
+        }
+    }
+
+    request (type = 'browser') {
+        switch (type) {
+        case 'browser':
+            if (this.player.element.requestFullscreen) {
+                this.player.element.requestFullscreen();
+            }
+            else if (this.player.element.mozRequestFullScreen) {
+                this.player.element.mozRequestFullScreen();
+            }
+            else if (this.player.element.webkitRequestFullscreen) {
+                this.player.element.webkitRequestFullscreen();
+            }
+            else if (this.player.video.webkitEnterFullscreen) {   // Safari for iOS
+                this.player.video.webkitEnterFullscreen();
+            }
+            break;
+        case 'web':
+            this.player.element.classList.add('dplayer-fulled');
+            this.player.events.trigger('webfullscreen');
+            break;
+        }
+    }
+
+    cancel (type = 'browser') {
+        switch (type) {
+        case 'browser':
+            if (document.cancelFullScreen) {
+                document.cancelFullScreen();
+            }
+            else if (document.mozCancelFullScreen) {
+                document.mozCancelFullScreen();
+            }
+            else if (document.webkitCancelFullScreen) {
+                document.webkitCancelFullScreen();
+            }
+            break;
+        case 'web':
+            this.player.element.classList.remove('dplayer-fulled');
+            this.player.events.trigger('webfullscreen_cancel');
+            break;
+        }
+    }
+
+    toggle (type = 'browser') {
+        if (this.isFullScreen(type)) {
+            this.cancel(type);
+        }
+        else {
+            this.request(type);
+        }
+    }
+}
+
+module.exports = FullScreen;