better handling of event listeners

This commit is contained in:
Chris Boustead 2017-11-15 16:46:54 -05:00
parent 53fdf0a0fd
commit 6ac730a5fc
2 changed files with 17 additions and 8 deletions

View file

@ -1,6 +1,6 @@
{ {
"name": "videojs-vtt-thumbnails", "name": "videojs-vtt-thumbnails",
"version": "0.0.3", "version": "0.0.4",
"description": "Display thumnails on progress bar hover, driven by external VTT files.", "description": "Display thumnails on progress bar hover, driven by external VTT files.",
"main": "dist/videojs-vtt-thumbnails.cjs.js", "main": "dist/videojs-vtt-thumbnails.cjs.js",
"module": "dist/videojs-vtt-thumbnails.es.js", "module": "dist/videojs-vtt-thumbnails.es.js",

View file

@ -69,6 +69,7 @@ class vttThumbnailsPlugin {
this.player = player this.player = player
this.options = options this.options = options
this.initializeThumbnails(); this.initializeThumbnails();
this.registeredEvents = {};
return this; return this;
} }
@ -83,9 +84,12 @@ class vttThumbnailsPlugin {
} }
resetPlugin() { resetPlugin() {
this.progressBar.removeEventListener('mouseenter',() => { return this.onBarMouseenter() }); this.progressBar.removeEventListener('mouseenter', this.registeredEvents.progressBarMouseEnter);
this.progressBar.removeEventListener('mouseleave',() => { return this.onBarMouseleave() }); this.progressBar.removeEventListener('mouseleave', this.registeredEvents.progressBarMouseLeave);
this.progressBar.removeEventListener('mousemove',this.onBarMousemove); this.progressBar.removeEventListener('mousemove', this.registeredEvents.progressBarMouseMove);
delete this.registeredEvents.progressBarMouseEnter;
delete this.registeredEvents.progressBarMouseLeave;
delete this.registeredEvents.progressBarMouseMove;
delete this.progressBar; delete this.progressBar;
delete this.vttData; delete this.vttData;
delete this.thumbnailHolder; delete this.thumbnailHolder;
@ -156,18 +160,23 @@ class vttThumbnailsPlugin {
this.progressBar.appendChild(thumbHolder) this.progressBar.appendChild(thumbHolder)
this.thumbnailHolder = thumbHolder this.thumbnailHolder = thumbHolder
mouseDisplay.classList.add('vjs-hidden') mouseDisplay.classList.add('vjs-hidden')
this.progressBar.addEventListener('mouseenter', () => { return this.onBarMouseenter() }) this.registeredEvents.progressBarMouseEnter = () => { return this.onBarMouseenter() };
this.progressBar.addEventListener('mouseleave', () => { return this.onBarMouseleave() }) this.registeredEvents.progressBarMouseLeave = () => { return this.onBarMouseleave() };
this.progressBar.addEventListener('mouseenter', this.registeredEvents.progressBarMouseEnter)
this.progressBar.addEventListener('mouseleave', this.registeredEvents.progressBarMouseLeave)
} }
onBarMouseenter () { onBarMouseenter () {
this.mouseMoveCallback = (e) => { this.onBarMousemove(e) } this.mouseMoveCallback = (e) => { this.onBarMousemove(e) }
this.progressBar.addEventListener('mousemove', this.mouseMoveCallback) this.registeredEvents.progressBarMouseMove = this.mouseMoveCallback;
this.progressBar.addEventListener('mousemove', this.registeredEvents.progressBarMouseMove)
this.showThumbnailHolder() this.showThumbnailHolder()
} }
onBarMouseleave () { onBarMouseleave () {
this.progressBar.removeEventListener('mousemove', this.mouseMoveCallback) if(this.registeredEvents.progressBarMouseMove) {
this.progressBar.removeEventListener('mousemove', this.registeredEvents.progressBarMouseMove)
}
this.hideThumbnailHolder() this.hideThumbnailHolder()
} }