Fix position calcualtion

package.json

@@ -1,12 +1,12 @@
 {
   "name": "videojs-vtt-thumbnails",
-  "version": "0.0.8",
+  "version": "0.0.9",
   "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",
-  "repository" : {
-    "type" : "git",
-    "url" : "https://github.com/chrisboustead/videojs-vtt-thumbnails.git"
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/chrisboustead/videojs-vtt-thumbnails.git"
   },
   "generator-videojs-plugin": {
     "version": "5.0.3"

src/plugin.js

@@ -68,6 +68,7 @@ class vttThumbnailsPlugin {
   constructor (player, options) {
     this.player = player
     this.options = options
+    this.listenForDurationChange();
     this.initializeThumbnails();
     this.registeredEvents = {};
     return this;
@@ -97,6 +98,12 @@ class vttThumbnailsPlugin {
     delete this.lastStyle;
   }
 
+  listenForDurationChange() {
+    this.player.on('durationchange', () => {
+
+    })
+  }
+
   /**
    * Bootstrap the plugin.
    */
@@ -183,7 +190,7 @@ class vttThumbnailsPlugin {
 
   onBarMousemove (event) {
     this.updateThumbnailStyle(
-      event.clientX - this.progressBar.offsetLeft,
+      event.clientX - (this.progressBar.offsetLeft + this.player.el().offsetLeft),
       this.progressBar.offsetWidth
     )
   }
@@ -209,10 +216,13 @@ class vttThumbnailsPlugin {
     const duration = this.player.duration()
     const time = ((1 - ((width - x) / width))) * duration
     const currentStyle = this.getStyleForTime(time)
+
     if (!currentStyle) {
       return this.hideThumbnailHolder()
     }
+
     const xPos = ((1 - ((width - x) / width))) * width
+
     this.thumbnailHolder.style.transform = 'translateX(' + xPos + 'px)'
     this.thumbnailHolder.style.marginLeft = '-' + (parseInt(currentStyle.width) / 2) + 'px'