perf: throttle more timers and use native bind (videojs#6142)

src/js/control-bar/progress-control/mouse-time-display.js

@@ -27,7 +27,7 @@ class MouseTimeDisplay extends Component {
    */
   constructor(player, options) {
     super(player, options);
-    this.update = Fn.throttle(Fn.bind(this, this.update), 25);
+    this.update = Fn.throttle(Fn.bind(this, this.update), Fn.UPDATE_REFRESH_INTERVAL);
   }
 
   /**

src/js/control-bar/progress-control/play-progress-bar.js

@@ -3,6 +3,7 @@
  */
 import Component from '../../component.js';
 import {IS_IOS, IS_ANDROID} from '../../utils/browser.js';
+import * as Fn from '../../utils/fn.js';
 
 import './time-tooltip';
 
@@ -14,6 +15,20 @@ import './time-tooltip';
  */
 class PlayProgressBar extends Component {
 
+  /**
+   * Creates an instance of this class.
+   *
+   * @param {Player} player
+   *        The {@link Player} that this class should be attached to.
+   *
+   * @param {Object} [options]
+   *        The key/value store of player options.
+   */
+  constructor(player, options) {
+    super(player, options);
+    this.update = Fn.throttle(Fn.bind(this, this.update), Fn.UPDATE_REFRESH_INTERVAL);
+  }
+
   /**
    * Create the the DOM element for this class.
    *

src/js/control-bar/progress-control/progress-control.js

@@ -3,7 +3,7 @@
  */
 import Component from '../../component.js';
 import * as Dom from '../../utils/dom.js';
-import {throttle, bind} from '../../utils/fn.js';
+import {bind, throttle, UPDATE_REFRESH_INTERVAL} from '../../utils/fn.js';
 
 import './seek-bar.js';
 
@@ -26,8 +26,8 @@ class ProgressControl extends Component {
    */
   constructor(player, options) {
     super(player, options);
-    this.handleMouseMove = throttle(bind(this, this.handleMouseMove), 25);
-    this.throttledHandleMouseSeek = throttle(bind(this, this.handleMouseSeek), 25);
+    this.handleMouseMove = throttle(bind(this, this.handleMouseMove), UPDATE_REFRESH_INTERVAL);
+    this.throttledHandleMouseSeek = throttle(bind(this, this.handleMouseSeek), UPDATE_REFRESH_INTERVAL);
 
     this.enable();
   }

src/js/control-bar/progress-control/time-tooltip.js

@@ -4,6 +4,7 @@
 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';
 
 /**
  * Time tooltips display a time above the progress bar.
@@ -12,6 +13,20 @@ import formatTime from '../../utils/format-time.js';
  */
 class TimeTooltip extends Component {
 
+  /**
+   * Creates an instance of this class.
+   *
+   * @param {Player} player
+   *        The {@link Player} that this class should be attached to.
+   *
+   * @param {Object} [options]
+   *        The key/value store of player options.
+   */
+  constructor(player, options) {
+    super(player, options);
+    this.update = Fn.throttle(Fn.bind(this, this.update), Fn.UPDATE_REFRESH_INTERVAL);
+  }
+
   /**
    * Create the time tooltip DOM element
    *
@@ -88,7 +103,7 @@ class TimeTooltip extends Component {
   /**
    * Write the time to the tooltip DOM element.
    *
-   * @param {String} content
+   * @param {string} content
    *        The formatted time for the tooltip.
    */
   write(content) {

src/js/control-bar/time-controls/time-display.js

@@ -4,7 +4,7 @@
 import document from 'global/document';
 import Component from '../../component.js';
 import * as Dom from '../../utils/dom.js';
-import {bind, throttle} from '../../utils/fn.js';
+import {bind, throttle, UPDATE_REFRESH_INTERVAL} from '../../utils/fn.js';
 import formatTime from '../../utils/format-time.js';
 
 /**
@@ -25,7 +25,7 @@ class TimeDisplay extends Component {
    */
   constructor(player, options) {
     super(player, options);
-    this.throttledUpdateContent = throttle(bind(this, this.updateContent), 25);
+    this.throttledUpdateContent = throttle(bind(this, this.updateContent), UPDATE_REFRESH_INTERVAL);
     this.on(player, 'timeupdate', this.throttledUpdateContent);
   }
 

src/js/control-bar/volume-control/volume-control.js

@@ -4,7 +4,7 @@
 import Component from '../../component.js';
 import checkVolumeSupport from './check-volume-support';
 import {isPlain} from '../../utils/obj';
-import { throttle, bind } from '../../utils/fn.js';
+import {throttle, bind, UPDATE_REFRESH_INTERVAL} from '../../utils/fn.js';
 
 // Required children
 import './volume-bar.js';
@@ -40,7 +40,7 @@ class VolumeControl extends Component {
     // hide this control if volume support is missing
     checkVolumeSupport(this, player);
 
-    this.throttledHandleMouseMove = throttle(bind(this, this.handleMouseMove), 25);
+    this.throttledHandleMouseMove = throttle(bind(this, this.handleMouseMove), UPDATE_REFRESH_INTERVAL);
 
     this.on('mousedown', this.handleMouseDown);
     this.on('touchstart', this.handleMouseDown);

src/js/slider/slider.js

@@ -59,6 +59,7 @@ class Slider extends Component {
     this.on('keydown', this.handleKeyDown);
     this.on('click', this.handleClick);
 
+    // TODO: deprecated, controlsvisible does not seem to be fired
     this.on(this.player_, 'controlsvisible', this.update);
 
     if (this.playerEvent) {
@@ -262,10 +263,10 @@ class Slider extends Component {
     const style = bar.el().style;
 
     // Set the new bar width or height
-    if (this.vertical()) {
-      style.height = percentage;
-    } else {
-      style.width = percentage;
+    const sizeKey = this.vertical() ? 'height' : 'width';
+
+    if (style[sizeKey] !== percentage) {
+      style[sizeKey] = percentage;
     }
 
     return progress;

src/js/utils/fn.js

@@ -5,6 +5,8 @@
 import { newGUID } from './guid.js';
 import window from 'global/window';
 
+export const UPDATE_REFRESH_INTERVAL = 30;
+
 /**
  * Bind (a.k.a proxy or context). A simple method for changing the context of
  * a function.
@@ -32,9 +34,7 @@ export const bind = function(context, fn, uid) {
   }
 
   // Create the new function that changes the context
-  const bound = function() {
-    return fn.apply(context, arguments);
-  };
+  const bound = fn.bind(context);
 
   // Allow for the ability to individualize this function
   // Needed in the case where multiple objects might share the same prototype