diff --git a/src/js/contextmenu.js b/src/js/contextmenu.js index bac2443..9514ef3 100644 --- a/src/js/contextmenu.js +++ b/src/js/contextmenu.js @@ -12,22 +12,23 @@ class ContextMenu { } }); - this.player.container.addEventListener('contextmenu', (e) => { + this.contextmenuHandler = (e) => { + const event = e || window.event; + event.preventDefault(); + if (this.shown) { this.hide(); return; } - 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(); }); - }); + }; + this.player.container.addEventListener('contextmenu', this.contextmenuHandler); } show(x, y) { @@ -62,6 +63,10 @@ class ContextMenu { this.shown = false; this.player.events.trigger('contextmenu_hide'); } + + destroy() { + this.player.container.removeEventListener('contextmenu', this.contextmenuHandler); + } } export default ContextMenu; diff --git a/src/js/controller.js b/src/js/controller.js index 3b0f34f..06b8cc1 100644 --- a/src/js/controller.js +++ b/src/js/controller.js @@ -13,18 +13,11 @@ class Controller { this.autoHideTimer = 0; if (!utils.isMobile) { - this.player.container.addEventListener('mousemove', () => { - this.setAutoHide(); - }); - this.player.container.addEventListener('click', () => { - this.setAutoHide(); - }); - this.player.on('play', () => { - this.setAutoHide(); - }); - this.player.on('pause', () => { - this.setAutoHide(); - }); + this.setAutoHideHandler = this.setAutoHide.bind(this); + this.player.container.addEventListener('mousemove', this.setAutoHideHandler); + this.player.container.addEventListener('click', this.setAutoHideHandler); + this.player.on('play', this.setAutoHideHandler); + this.player.on('pause', this.setAutoHideHandler); } this.initPlayButton(); @@ -420,6 +413,10 @@ class Controller { } destroy() { + if (!utils.isMobile) { + this.player.container.removeEventListener('mousemove', this.setAutoHideHandler); + this.player.container.removeEventListener('click', this.setAutoHideHandler); + } clearTimeout(this.autoHideTimer); } } diff --git a/src/js/danmaku.js b/src/js/danmaku.js index 8701a3c..fb71ad0 100644 --- a/src/js/danmaku.js +++ b/src/js/danmaku.js @@ -309,13 +309,7 @@ class Danmaku { } htmlEncode(str) { - return str - .replace(/&/g, '&') - .replace(//g, '>') - .replace(/"/g, '"') - .replace(/'/g, ''') - .replace(/\//g, '/'); + return str.replace(/&/g, '&').replace(//g, '>').replace(/"/g, '"').replace(/'/g, ''').replace(/\//g, '/'); } resize() { diff --git a/src/js/fullscreen.js b/src/js/fullscreen.js index 4c8c126..ce76ce0 100644 --- a/src/js/fullscreen.js +++ b/src/js/fullscreen.js @@ -12,7 +12,7 @@ class FullScreen { utils.setScrollPosition(this.lastScrollPosition); }); - const fullscreenchange = () => { + this.fullscreenchange = () => { this.player.resize(); if (this.isFullScreen('browser')) { this.player.events.trigger('fullscreen'); @@ -21,7 +21,7 @@ class FullScreen { this.player.events.trigger('fullscreen_cancel'); } }; - const docfullscreenchange = () => { + this.docfullscreenchange = () => { const fullEle = document.fullscreenElement || document.mozFullScreenElement || document.msFullscreenElement; if (fullEle && fullEle !== this.player.container) { return; @@ -35,13 +35,13 @@ class FullScreen { } }; if (/Firefox/.test(navigator.userAgent)) { - document.addEventListener('mozfullscreenchange', docfullscreenchange); - document.addEventListener('fullscreenchange', docfullscreenchange); + document.addEventListener('mozfullscreenchange', this.docfullscreenchange); + document.addEventListener('fullscreenchange', this.docfullscreenchange); } else { - this.player.container.addEventListener('fullscreenchange', fullscreenchange); - this.player.container.addEventListener('webkitfullscreenchange', fullscreenchange); - document.addEventListener('msfullscreenchange', docfullscreenchange); - document.addEventListener('MSFullscreenChange', docfullscreenchange); + this.player.container.addEventListener('fullscreenchange', this.fullscreenchange); + this.player.container.addEventListener('webkitfullscreenchange', this.fullscreenchange); + document.addEventListener('msfullscreenchange', this.docfullscreenchange); + document.addEventListener('MSFullscreenChange', this.docfullscreenchange); } } @@ -122,6 +122,18 @@ class FullScreen { this.request(type); } } + + destroy() { + if (/Firefox/.test(navigator.userAgent)) { + document.removeEventListener('mozfullscreenchange', this.docfullscreenchange); + document.removeEventListener('fullscreenchange', this.docfullscreenchange); + } else { + this.player.container.removeEventListener('fullscreenchange', this.fullscreenchange); + this.player.container.removeEventListener('webkitfullscreenchange', this.fullscreenchange); + document.removeEventListener('msfullscreenchange', this.docfullscreenchange); + document.removeEventListener('MSFullscreenChange', this.docfullscreenchange); + } + } } export default FullScreen; diff --git a/src/js/hotkey.js b/src/js/hotkey.js index e383a5a..f77c111 100644 --- a/src/js/hotkey.js +++ b/src/js/hotkey.js @@ -1,60 +1,74 @@ 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(); - if (player.options.live) { - break; - } - player.seek(player.video.currentTime - 5); - player.controller.setAutoHide(); - break; - case 39: - event.preventDefault(); - if (player.options.live) { - break; - } - 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; - } - } - } - }); + this.player = player; + this.doHotKeyHandler = this.doHotKey.bind(this); + this.cancelFullScreenHandler = this.cancelFullScreen.bind(this); + if (this.player.options.hotkey) { + document.addEventListener('keydown', this.doHotKeyHandler); } - document.addEventListener('keydown', (e) => { - const event = e || window.event; - switch (event.keyCode) { - case 27: - if (player.fullScreen.isFullScreen('web')) { - player.fullScreen.cancel('web'); - } - break; + document.addEventListener('keydown', this.cancelFullScreenHandler); + } + + doHotKey(e) { + if (this.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(); + this.player.toggle(); + break; + case 37: + event.preventDefault(); + if (this.player.options.live) { + break; + } + this.player.seek(this.player.video.currentTime - 5); + this.player.controller.setAutoHide(); + break; + case 39: + event.preventDefault(); + if (this.player.options.live) { + break; + } + this.player.seek(this.player.video.currentTime + 5); + this.player.controller.setAutoHide(); + break; + case 38: + event.preventDefault(); + percentage = this.player.volume() + 0.1; + this.player.volume(percentage); + break; + case 40: + event.preventDefault(); + percentage = this.player.volume() - 0.1; + this.player.volume(percentage); + break; + } } - }); + } + } + + cancelFullScreen(e) { + const event = e || window.event; + switch (event.keyCode) { + case 27: + if (this.player.fullScreen.isFullScreen('web')) { + this.player.fullScreen.cancel('web'); + } + break; + } + } + + destroy() { + if (this.player.options.hotkey) { + document.removeEventListener('keydown', this.doHotKeyHandler); + } + document.removeEventListener('keydown', this.cancelFullScreenHandler); } } diff --git a/src/js/player.js b/src/js/player.js index e21ec57..a66bdd5 100644 --- a/src/js/player.js +++ b/src/js/player.js @@ -118,21 +118,14 @@ class DPlayer { this.setting = new Setting(this); this.plugins = {}; - - document.addEventListener( - 'click', - () => { - this.focus = false; - }, - true - ); - this.container.addEventListener( - 'click', - () => { - this.focus = true; - }, - true - ); + this.docClickFun = () => { + this.focus = false; + }; + this.containerClickFun = () => { + this.focus = true; + }; + document.addEventListener('click', this.docClickFun, true); + this.container.addEventListener('click', this.containerClickFun, true); this.paused = true; @@ -632,6 +625,11 @@ class DPlayer { destroy() { instances.splice(instances.indexOf(this), 1); this.pause(); + document.removeEventListener('click', this.docClickFun, true); + this.container.removeEventListener('click', this.containerClickFun, true); + this.fullScreen.destroy(); + this.hotkey.destroy(); + this.contextmenu.destroy(); this.controller.destroy(); this.timer.destroy(); this.video.src = ''; diff --git a/src/js/timer.js b/src/js/timer.js index bef0432..02f1469 100644 --- a/src/js/timer.js +++ b/src/js/timer.js @@ -8,7 +8,7 @@ class Timer { window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || - function(callback) { + function (callback) { window.setTimeout(callback, 1000 / 60); })();