contextmenu module and hotkey module

package.json

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

src/DPlayer.js

@@ -16,6 +16,8 @@ import Bezel from './bezel';
 import Controller from './controller';
 import Setting from './setting';
 import Comment from './comment';
+import HotKey from './hotkey';
+import ContextMenu from './contextmenu';
 
 let index = 0;
 const instances = [];
@@ -136,99 +138,9 @@ class DPlayer {
             }
         }
 
-        /**
-         * hot key
-         */
-        const handleKeyDown = (e) => {
-            if (this.focus) {
-                const tag = document.activeElement.tagName.toUpperCase();
-                const editable = document.activeElement.getAttribute('contenteditable');
-                if (tag !== 'INPUT' && tag !== 'TEXTAREA' && editable !== '' && editable !== 'true') {
-                    const event = e || window.event;
-                    let percentage;
-                    switch (event.keyCode) {
-                    case 32:
-                        event.preventDefault();
-                        this.toggle();
-                        break;
-                    case 37:
-                        event.preventDefault();
-                        this.seek(this.video.currentTime - 5);
-                        this.controller.setAutoHide();
-                        break;
-                    case 39:
-                        event.preventDefault();
-                        this.seek(this.video.currentTime + 5);
-                        this.controller.setAutoHide();
-                        break;
-                    case 38:
-                        event.preventDefault();
-                        percentage = this.volume() + 0.1;
-                        this.volume(percentage);
-                        break;
-                    case 40:
-                        event.preventDefault();
-                        percentage = this.volume() - 0.1;
-                        this.volume(percentage);
-                        break;
-                    }
-                }
-            }
-        };
-        if (this.options.hotkey) {
-            document.addEventListener('keydown', handleKeyDown);
-        }
-        document.addEventListener('keydown', (e) => {              // Press ESC to quit web full screen
-            const event = e || window.event;
-            switch (event.keyCode) {
-            case 27:
-                if (this.fullScreen.isFullScreen('web')) {
-                    this.fullScreen.cancel('web');
-                }
-                break;
-            }
-        });
+        this.hotkey = new HotKey(this);
 
-        /**
-         * right key
-         */
-        this.container.addEventListener('contextmenu', (e) => {
-            const event = e || window.event;
-            event.preventDefault();
-
-            this.template.menu.classList.add('dplayer-menu-show');
-
-            const clientRect = this.container.getBoundingClientRect();
-            const menuLeft = event.clientX - clientRect.left;
-            const menuTop = event.clientY - clientRect.top;
-            if (menuLeft + this.template.menu.offsetWidth >= clientRect.width) {
-                this.template.menu.style.right = clientRect.width - menuLeft + 'px';
-                this.template.menu.style.left = 'initial';
-            }
-            else {
-                this.template.menu.style.left = event.clientX - this.container.getBoundingClientRect().left + 'px';
-                this.template.menu.style.right = 'initial';
-            }
-            if (menuTop + this.template.menu.offsetHeight >= clientRect.height) {
-                this.template.menu.style.bottom = clientRect.height - menuTop + 'px';
-                this.template.menu.style.top = 'initial';
-            }
-            else {
-                this.template.menu.style.top = event.clientY - this.container.getBoundingClientRect().top + 'px';
-                this.template.menu.style.bottom = 'initial';
-            }
-
-            this.template.mask.classList.add('dplayer-mask-show');
-
-            this.events.trigger('contextmenu_show');
-
-            this.template.mask.addEventListener('click', () => {
-                this.template.mask.classList.remove('dplayer-mask-show');
-                this.template.menu.classList.remove('dplayer-menu-show');
-
-                this.events.trigger('contextmenu_hide');
-            });
-        });
+        this.contextmenu = new ContextMenu(this);
 
         this.initVideo(this.video, this.quality && this.quality.type || this.options.video.type);
 

src/contextmenu.js

@@ -0,0 +1,52 @@
+class ContextMenu {
+    constructor (player) {
+        this.player = player;
+
+        this.player.container.addEventListener('contextmenu', (e) => {
+            const event = e || window.event;
+            event.preventDefault();
+
+            const clientRect = this.player.container.getBoundingClientRect();
+            this.show(event.clientX - clientRect.left, event.clientY - clientRect.top);
+
+            this.player.template.mask.addEventListener('click', () => {
+                this.hide();
+            });
+        });
+    }
+
+    show (x, y) {
+        this.player.template.menu.classList.add('dplayer-menu-show');
+
+        const clientRect = this.player.container.getBoundingClientRect();
+        if (x + this.player.template.menu.offsetWidth >= clientRect.width) {
+            this.player.template.menu.style.right = clientRect.width - x + 'px';
+            this.player.template.menu.style.left = 'initial';
+        }
+        else {
+            this.player.template.menu.style.left = x + 'px';
+            this.player.template.menu.style.right = 'initial';
+        }
+        if (y + this.player.template.menu.offsetHeight >= clientRect.height) {
+            this.player.template.menu.style.bottom = clientRect.height - y + 'px';
+            this.player.template.menu.style.top = 'initial';
+        }
+        else {
+            this.player.template.menu.style.top = y + 'px';
+            this.player.template.menu.style.bottom = 'initial';
+        }
+
+        this.player.template.mask.classList.add('dplayer-mask-show');
+
+        this.player.events.trigger('contextmenu_show');
+    }
+
+    hide () {
+        this.player.template.mask.classList.remove('dplayer-mask-show');
+        this.player.template.menu.classList.remove('dplayer-menu-show');
+
+        this.player.events.trigger('contextmenu_hide');
+    }
+}
+
+module.exports = ContextMenu;

src/hotkey.js

@@ -0,0 +1,55 @@
+class HotKey {
+    constructor (player) {
+        if (player.options.hotkey) {
+            document.addEventListener('keydown', (e) => {
+                if (player.focus) {
+                    const tag = document.activeElement.tagName.toUpperCase();
+                    const editable = document.activeElement.getAttribute('contenteditable');
+                    if (tag !== 'INPUT' && tag !== 'TEXTAREA' && editable !== '' && editable !== 'true') {
+                        const event = e || window.event;
+                        let percentage;
+                        switch (event.keyCode) {
+                        case 32:
+                            event.preventDefault();
+                            player.toggle();
+                            break;
+                        case 37:
+                            event.preventDefault();
+                            player.seek(player.video.currentTime - 5);
+                            player.controller.setAutoHide();
+                            break;
+                        case 39:
+                            event.preventDefault();
+                            player.seek(player.video.currentTime + 5);
+                            player.controller.setAutoHide();
+                            break;
+                        case 38:
+                            event.preventDefault();
+                            percentage = player.volume() + 0.1;
+                            player.volume(percentage);
+                            break;
+                        case 40:
+                            event.preventDefault();
+                            percentage = player.volume() - 0.1;
+                            player.volume(percentage);
+                            break;
+                        }
+                    }
+                }
+            });
+        }
+
+        document.addEventListener('keydown', (e) => {
+            const event = e || window.event;
+            switch (event.keyCode) {
+            case 27:
+                if (player.fullScreen.isFullScreen('web')) {
+                    player.fullScreen.cancel('web');
+                }
+                break;
+            }
+        });
+    }
+}
+
+module.exports = HotKey;