Merge pull request #958 from friday/954

Fix the seek tooltip time difference from seek time

2 files changed, 20 insertions, 2 deletions

diff --git a/src/js/controls.js b/src/js/controls.js
index 8a160864..3f720925 100644
--- a/src/js/controls.js
+++ b/src/js/controls.js
@@ -539,7 +539,7 @@ const controls = {
 
         // Calculate percentage
         let percent = 0;
-        const clientRect = this.elements.inputs.seek.getBoundingClientRect();
+        const clientRect = this.elements.progress.getBoundingClientRect();
         const visible = `${this.config.classNames.tooltip}--visible`;
 
         const toggle = toggle => {
diff --git a/src/js/listeners.js b/src/js/listeners.js
index 167bee3c..e95c5e44 100644
--- a/src/js/listeners.js
+++ b/src/js/listeners.js
@@ -529,12 +529,30 @@ class Listeners {
             }
         });
 
+        // Set range input alternative "value", which matches the tooltip time (#954)
+        on(
+            this.player.elements.inputs.seek,
+            'mousedown mousemove',
+            event => {
+                const clientRect = this.player.elements.progress.getBoundingClientRect();
+                const percent = 100 / clientRect.width * (event.pageX - clientRect.left);
+                event.currentTarget.setAttribute('seekNext', percent);
+            }
+        );
+
         // Seek
         on(
             this.player.elements.inputs.seek,
             inputEvent,
             event => {
-                this.player.currentTime = event.target.value / event.target.max * this.player.duration;
+                const seek = event.currentTarget;
+                // If it exists, use seekNext instead of "value" for consistency with tooltip time (#954)
+                let seekTo = seek.getAttribute('seekNext');
+                if (utils.is.empty(seekTo)) {
+                    seekTo = seek.value;
+                }
+                seek.removeAttribute('seekNext');
+                this.player.currentTime = seekTo / seek.max * this.player.duration;
             },
             'seek',
         );