refactor: move seekbar event handler bindings into a function (videojs#5097)

guided1 · gkatsev · commit 1069e7f0334a · 2018-04-19T12:00:33.000-04:00
Makes it easier to extend the seekbar and change the default event handlers. If you extend the seekbar component you can choose to override setEventHandlers_ or keep it default. If you do override setEventHandlers_ and call super() in the constructor, you get your own event handlers + the functionality provided by Slider.
diff --git a/src/js/control-bar/progress-control/seek-bar.js b/src/js/control-bar/progress-control/seek-bar.js
@@ -38,17 +38,25 @@ class SeekBar extends Slider {
    */
   constructor(player, options) {
     super(player, options);
+    this.setEventHandlers_();
+  }
 
+  /**
+   * Sets the event handlers
+   *
+   * @private
+   */
+  setEventHandlers_() {
     this.update = Fn.throttle(Fn.bind(this, this.update), UPDATE_REFRESH_INTERVAL);
 
-    this.on(player, 'timeupdate', this.update);
-    this.on(player, 'ended', this.handleEnded);
+    this.on(this.player_, 'timeupdate', this.update);
+    this.on(this.player_, 'ended', this.handleEnded);
 
     // when playing, let's ensure we smoothly update the play progress bar
     // via an interval
     this.updateInterval = null;
 
-    this.on(player, ['playing'], () => {
+    this.on(this.player_, ['playing'], () => {
       this.clearInterval(this.updateInterval);
 
       this.updateInterval = this.setInterval(() =>{
@@ -58,11 +66,11 @@ class SeekBar extends Slider {
       }, UPDATE_REFRESH_INTERVAL);
     });
 
-    this.on(player, ['ended', 'pause', 'waiting'], () => {
+    this.on(this.player_, ['ended', 'pause', 'waiting'], () => {
       this.clearInterval(this.updateInterval);
     });
 
-    this.on(player, ['timeupdate', 'ended'], this.update);
+    this.on(this.player_, ['timeupdate', 'ended'], this.update);
   }
 
   /**
