From 7c3213caebf7f2645ba0bc4a2f5e552e20f37788 Mon Sep 17 00:00:00 2001 From: "Gerard L. Petersen" Date: Thu, 19 Apr 2018 17:00:33 +0100 Subject: [PATCH] refactor: move seekbar event handler bindings into a function (#5097) 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. --- .../control-bar/progress-control/seek-bar.js | 18 +++++++++++++----- 1 file changed, 13 insertions(+), 5 deletions(-) diff --git a/src/js/control-bar/progress-control/seek-bar.js b/src/js/control-bar/progress-control/seek-bar.js index 7c9e077141..13f7ccbd51 100644 --- 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); } /**