Small tweaks

1 files changed, 47 insertions, 0 deletions

diff --git a/src/js/controls.js b/src/js/controls.js
index 1e10f2f2..c95c6197 100644
--- a/src/js/controls.js
+++ b/src/js/controls.js
@@ -4,6 +4,7 @@
 
 import support from './support';
 import utils from './utils';
+import ui from './ui';
 
 const controls = {
     // Webkit polyfill for lower fill range
@@ -300,6 +301,52 @@ const controls = {
         return container;
     },
 
+    // Update hover tooltip for seeking
+    updateSeekTooltip(event) {
+        // Bail if setting not true
+        if (
+            !this.config.tooltips.seek ||
+            !utils.is.htmlElement(this.elements.inputs.seek) ||
+            !utils.is.htmlElement(this.elements.display.seekTooltip) ||
+            this.duration === 0
+        ) {
+            return;
+        }
+
+        // Calculate percentage
+        let percent = 0;
+        const clientRect = this.elements.inputs.seek.getBoundingClientRect();
+        const visible = `${this.config.classNames.tooltip}--visible`;
+
+        // Determine percentage, if already visible
+        if (utils.is.event(event)) {
+            percent = 100 / clientRect.width * (event.pageX - clientRect.left);
+        } else if (utils.hasClass(this.elements.display.seekTooltip, visible)) {
+            percent = this.elements.display.seekTooltip.style.left.replace('%', '');
+        } else {
+            return;
+        }
+
+        // Set bounds
+        if (percent < 0) {
+            percent = 0;
+        } else if (percent > 100) {
+            percent = 100;
+        }
+
+        // Display the time a click would seek to
+        ui.updateTimeDisplay.call(this, this.duration / 100 * percent, this.elements.display.seekTooltip);
+
+        // Set position
+        this.elements.display.seekTooltip.style.left = `${percent}%`;
+
+        // Show/hide the tooltip
+        // If the event is a moues in/out and percentage is inside bounds
+        if (utils.is.event(event) && ['mouseenter', 'mouseleave'].includes(event.type)) {
+            utils.toggleClass(this.elements.display.seekTooltip, visible, event.type === 'mouseenter');
+        }
+    },
+
     // Hide/show a tab
     toggleTab(setting, toggle) {
         const tab = this.elements.settings.tabs[setting];