add clamp helper

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());
     }
 
   }

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;
   }
 

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);
   }
 

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,24 +241,36 @@ 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;
     }
 
     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
    *

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;