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 5dd9d93f..d5748806 100644 --- a/src/js/listeners.js +++ b/src/js/listeners.js @@ -549,12 +549,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', ); diff --git a/src/sass/components/progress.scss b/src/sass/components/progress.scss index 7490ee17..60994f99 100644 --- a/src/sass/components/progress.scss +++ b/src/sass/components/progress.scss @@ -6,10 +6,15 @@ display: flex; flex: 1; position: relative; + margin-right: $plyr-range-thumb-height; + left: $plyr-range-thumb-height / 2; input[type='range'] { position: relative; z-index: 2; + // Offset the range thumb in order to be able to calculate the relative progress (#954) + width: calc(100% + #{$plyr-range-thumb-height}) !important; + margin: 0 -#{$plyr-range-thumb-height / 2} !important; } // Seek tooltip to show time