From dd2e47834294be862c00b2dcc86c441412e45e25 Mon Sep 17 00:00:00 2001 From: brandonocasey Date: Fri, 2 Aug 2019 15:40:47 -0400 Subject: [PATCH] add clamp helper --- .../progress-control/progress-control.js | 5 +-- .../control-bar/progress-control/seek-bar.js | 34 ++++++------------- .../progress-control/time-tooltip.js | 4 --- src/js/slider/slider.js | 26 ++++++++++---- src/js/utils/clamp.js | 19 +++++++++++ 5 files changed, 51 insertions(+), 37 deletions(-) create mode 100644 src/js/utils/clamp.js diff --git a/src/js/control-bar/progress-control/progress-control.js b/src/js/control-bar/progress-control/progress-control.js index 8b5bdc9f15..63536b1988 100644 --- a/src/js/control-bar/progress-control/progress-control.js +++ b/src/js/control-bar/progress-control/progress-control.js @@ -3,6 +3,7 @@ */ import Component from '../../component.js'; import * as Dom from '../../utils/dom.js'; +import clamp from '../../utils/clamp.js'; import {bind, throttle, UPDATE_REFRESH_INTERVAL} from '../../utils/fn.js'; import './seek-bar.js'; @@ -74,14 +75,14 @@ class ProgressControl extends Component { // The default skin has a gap on either side of the `SeekBar`. This means // that it's possible to trigger this behavior outside the boundaries of // the `SeekBar`. This ensures we stay within it at all times. - seekBarPoint = Math.max(0, Math.min(1, seekBarPoint)); + seekBarPoint = clamp(0, 1, seekBarPoint); if (mouseTimeDisplay) { mouseTimeDisplay.update(seekBarRect, seekBarPoint); } if (playProgressBar) { - playProgressBar.update(seekBarRect, seekBar.percent_); + playProgressBar.update(seekBarRect, seekBar.getProgress()); } } diff --git a/src/js/control-bar/progress-control/seek-bar.js b/src/js/control-bar/progress-control/seek-bar.js index 8ffc3ca5f0..5239e0753b 100644 --- a/src/js/control-bar/progress-control/seek-bar.js +++ b/src/js/control-bar/progress-control/seek-bar.js @@ -124,16 +124,20 @@ class SeekBar extends Slider { * This function updates the play progress bar and accessibility * attributes to whatever is passed in. * - * @param {number} currentTime - * The currentTime value that should be used for accessibility + * @param {EventTarget~Event} [event] + * The `timeupdate` or `ended` event that caused this to run. * - * @param {number} percent - * The percentage as a decimal that the bar should be filled from 0-1. + * @listens Player#timeupdate * - * @private + * @return {number} + * The current percent at a number from 0-1 */ - update_(currentTime, percent) { + update(event) { + const percent = super.update(); + this.requestAnimationFrame(() => { + const currentTime = this.player_.ended() ? + this.player.duration() : this.getCurrentTime_(); const liveTracker = this.player_.liveTracker; let duration = this.player_.duration(); @@ -163,25 +167,7 @@ class SeekBar extends Slider { this.duration_ = duration; } }); - } - - /** - * Update the seek bar's UI. - * - * @param {EventTarget~Event} [event] - * The `timeupdate` or `ended` event that caused this to run. - * - * @listens Player#timeupdate - * - * @return {number} - * The current percent at a number from 0-1 - */ - update(event) { - const percent = super.update(); - const currentTime = this.player_.ended() ? - this.player.duration() : this.getCurrentTime_(); - this.update_(currentTime, percent); return percent; } diff --git a/src/js/control-bar/progress-control/time-tooltip.js b/src/js/control-bar/progress-control/time-tooltip.js index 9da2fb7b7b..e336fdc0b5 100644 --- a/src/js/control-bar/progress-control/time-tooltip.js +++ b/src/js/control-bar/progress-control/time-tooltip.js @@ -5,7 +5,6 @@ import Component from '../../component'; import * as Dom from '../../utils/dom.js'; import formatTime from '../../utils/format-time.js'; import * as Fn from '../../utils/fn.js'; -import * as browser from '../../utils/browser.js'; /** * Time tooltips display a time above the progress bar. @@ -25,9 +24,6 @@ class TimeTooltip extends Component { */ constructor(player, options) { super(player, options); - if (browser.IS_IOS || browser.IS_ANDROID) { - this.hide(); - } this.update = Fn.throttle(Fn.bind(this, this.update), Fn.UPDATE_REFRESH_INTERVAL); } diff --git a/src/js/slider/slider.js b/src/js/slider/slider.js index 61f53d6356..b33e9f9dbf 100644 --- a/src/js/slider/slider.js +++ b/src/js/slider/slider.js @@ -5,6 +5,7 @@ import Component from '../component.js'; import * as Dom from '../utils/dom.js'; import {assign} from '../utils/obj'; import {IS_CHROME} from '../utils/browser.js'; +import clamp from '../utils/clamp.js'; import keycode from 'keycode'; /** @@ -230,7 +231,6 @@ class Slider extends Component { * number from 0 to 1. */ update() { - // In VolumeBar init we have a setTimeout for update that pops and update // to the end of the execution stack. The player is destroyed before then // update will cause an error @@ -241,8 +241,7 @@ class Slider extends Component { // clamp progress between 0 and 1 // and only round to four decimal places, as we round to two below - const percent = Number(this.getPercent()) || 0; - const progress = Math.max(0, Math.min(1, percent)).toFixed(4); + const progress = this.getProgress(); if (progress === this.progress_) { return; @@ -250,15 +249,28 @@ class Slider extends Component { this.progress_ = progress; - // Set the new bar width or height - const sizeKey = this.vertical() ? 'height' : 'width'; + this.requestAnimationFrame(() => { + // Set the new bar width or height + const sizeKey = this.vertical() ? 'height' : 'width'; - // Convert to a percentage for css value - this.bar.el().style[sizeKey] = (progress * 100).toFixed(2) + '%'; + // Convert to a percentage for css value + this.bar.el().style[sizeKey] = (progress * 100).toFixed(2) + '%'; + }); return progress; } + /** + * Get the percentage of the bar that should be filled + * but clamped and rounded. + * + * @return {number} + * percentage filled that the slider is + */ + getProgress() { + return clamp(this.getPercent(), 0, 1).toFixed(4); + } + /** * Calculate distance for slider * diff --git a/src/js/utils/clamp.js b/src/js/utils/clamp.js new file mode 100644 index 0000000000..057a64cd0d --- /dev/null +++ b/src/js/utils/clamp.js @@ -0,0 +1,19 @@ +/** + * Keep a number between a min and a max value + * + * @param {number} number + * The number to clamp + * + * @param {number} min + * The minimum value + * @param {number} max + * The maximum value + * + * @return {number} + * the clamped number + */ +const clamp = function(number, min, max) { + return Math.min(max, Math.max(min, Number(number))); +}; + +export default clamp;