iv-org/videojs-vtt-thumbnails
1
0
Fork 0
mirror of https://github.com/iv-org/videojs-vtt-thumbnails.git synced 2024-06-14 05:02:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

better handling of event listeners

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

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

23
src/plugin.js
View File

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