perf: wrap prototype methods in handlers in an arrow function (#7060)

src/js/big-play-button.js

@@ -18,7 +18,7 @@ class BigPlayButton extends Button {
 
     this.mouseused_ = false;
 
-    this.on('mousedown', this.handleMouseDown);
+    this.on('mousedown', (e) => this.handleMouseDown(e));
   }
 
   /**

src/js/clickable-component.js

@@ -30,6 +30,11 @@ class ClickableComponent extends Component {
   constructor(player, options) {
     super(player, options);
 
+    this.handleMouseOver_ = (e) => this.handleMouseOver(e);
+    this.handleMouseOut_ = (e) => this.handleMouseOut(e);
+    this.handleClick_ = (e) => this.handleClick(e);
+    this.handleKeyDown_ = (e) => this.handleKeyDown(e);
+
     this.emitTapEvents();
 
     this.enable();
@@ -156,8 +161,8 @@ class ClickableComponent extends Component {
       if (typeof this.tabIndex_ !== 'undefined') {
         this.el_.setAttribute('tabIndex', this.tabIndex_);
       }
-      this.on(['tap', 'click'], this.handleClick);
-      this.on('keydown', this.handleKeyDown);
+      this.on(['tap', 'click'], this.handleClick_);
+      this.on('keydown', this.handleKeyDown_);
     }
   }
 
@@ -171,10 +176,10 @@ class ClickableComponent extends Component {
     if (typeof this.tabIndex_ !== 'undefined') {
       this.el_.removeAttribute('tabIndex');
     }
-    this.off('mouseover', this.handleMouseOver);
-    this.off('mouseout', this.handleMouseOut);
-    this.off(['tap', 'click'], this.handleClick);
-    this.off('keydown', this.handleKeyDown);
+    this.off('mouseover', this.handleMouseOver_);
+    this.off('mouseout', this.handleMouseOut_);
+    this.off(['tap', 'click'], this.handleClick_);
+    this.off('keydown', this.handleKeyDown_);
   }
 
   /**

src/js/control-bar/fullscreen-toggle.js

@@ -23,7 +23,7 @@ class FullscreenToggle extends Button {
    */
   constructor(player, options) {
     super(player, options);
-    this.on(player, 'fullscreenchange', this.handleFullscreenChange);
+    this.on(player, 'fullscreenchange', (e) => this.handleFullscreenChange(e));
 
     if (document[player.fsApi_.fullscreenEnabled] === false) {
       this.disable();

src/js/control-bar/live-display.js

@@ -26,7 +26,7 @@ class LiveDisplay extends Component {
     super(player, options);
 
     this.updateShowing();
-    this.on(this.player(), 'durationchange', this.updateShowing);
+    this.on(this.player(), 'durationchange', (e) => this.updateShowing(e));
   }
 
   /**

src/js/control-bar/mute-toggle.js

@@ -29,7 +29,7 @@ class MuteToggle extends Button {
     // hide this control if volume support is missing
     checkMuteSupport(this, player);
 
-    this.on(player, ['loadstart', 'volumechange'], this.update);
+    this.on(player, ['loadstart', 'volumechange'], (e) => this.update(e));
   }
 
   /**

src/js/control-bar/picture-in-picture-toggle.js

@@ -26,8 +26,8 @@ class PictureInPictureToggle extends Button {
    */
   constructor(player, options) {
     super(player, options);
-    this.on(player, ['enterpictureinpicture', 'leavepictureinpicture'], this.handlePictureInPictureChange);
-    this.on(player, ['disablepictureinpicturechanged', 'loadedmetadata'], this.handlePictureInPictureEnabledChange);
+    this.on(player, ['enterpictureinpicture', 'leavepictureinpicture'], (e) => this.handlePictureInPictureChange(e));
+    this.on(player, ['disablepictureinpicturechanged', 'loadedmetadata'], (e) => this.handlePictureInPictureEnabledChange(e));
 
     // TODO: Deactivate button on player emptied event.
     this.disable();

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

@@ -26,11 +26,11 @@ class PlayToggle extends Button {
     // show or hide replay icon
     options.replay = options.replay === undefined || options.replay;
 
-    this.on(player, 'play', this.handlePlay);
-    this.on(player, 'pause', this.handlePause);
+    this.on(player, 'play', (e) => this.handlePlay(e));
+    this.on(player, 'pause', (e) => this.handlePause(e));
 
     if (options.replay) {
-      this.on(player, 'ended', this.handleEnded);
+      this.on(player, 'ended', (e) => this.handleEnded(e));
     }
   }
 
@@ -128,7 +128,7 @@ class PlayToggle extends Button {
     this.controlText('Replay');
 
     // on the next seek remove the replay button
-    this.one(this.player_, 'seeked', this.handleSeeked);
+    this.one(this.player_, 'seeked', (e) => this.handleSeeked(e));
   }
 }
 

src/js/control-bar/playback-rate-menu/playback-rate-menu-button.js

@@ -29,8 +29,8 @@ class PlaybackRateMenuButton extends MenuButton {
     this.updateVisibility();
     this.updateLabel();
 
-    this.on(player, 'loadstart', this.updateVisibility);
-    this.on(player, 'ratechange', this.updateLabel);
+    this.on(player, 'loadstart', (e) => this.updateVisibility(e));
+    this.on(player, 'ratechange', (e) => this.updateLabel(e));
   }
 
   /**

src/js/control-bar/playback-rate-menu/playback-rate-menu-item.js

@@ -35,7 +35,7 @@ class PlaybackRateMenuItem extends MenuItem {
     this.label = label;
     this.rate = rate;
 
-    this.on(player, 'ratechange', this.update);
+    this.on(player, 'ratechange', (e) => this.update(e));
   }
 
   /**

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

@@ -28,7 +28,7 @@ class LoadProgressBar extends Component {
   constructor(player, options) {
     super(player, options);
     this.partEls_ = [];
-    this.on(player, 'progress', this.update);
+    this.on(player, 'progress', (e) => this.update(e));
   }
 
   /**

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

@@ -30,6 +30,8 @@ class ProgressControl extends Component {
     super(player, options);
     this.handleMouseMove = throttle(bind(this, this.handleMouseMove), UPDATE_REFRESH_INTERVAL);
     this.throttledHandleMouseSeek = throttle(bind(this, this.handleMouseSeek), UPDATE_REFRESH_INTERVAL);
+    this.handleMouseUpHandler_ = (e) => this.handleMouseUp(e);
+    this.handleMouseDownHandler_ = (e) => this.handleMouseDown(e);
 
     this.enable();
   }
@@ -136,7 +138,7 @@ class ProgressControl extends Component {
       return;
     }
 
-    this.off(['mousedown', 'touchstart'], this.handleMouseDown);
+    this.off(['mousedown', 'touchstart'], this.handleMouseDownHandler_);
     this.off(this.el_, 'mousemove', this.handleMouseMove);
 
     this.removeListenersAddedOnMousedownAndTouchstart();
@@ -167,7 +169,7 @@ class ProgressControl extends Component {
       return;
     }
 
-    this.on(['mousedown', 'touchstart'], this.handleMouseDown);
+    this.on(['mousedown', 'touchstart'], this.handleMouseDownHandler_);
     this.on(this.el_, 'mousemove', this.handleMouseMove);
     this.removeClass('disabled');
 
@@ -182,8 +184,8 @@ class ProgressControl extends Component {
 
     this.off(doc, 'mousemove', this.throttledHandleMouseSeek);
     this.off(doc, 'touchmove', this.throttledHandleMouseSeek);
-    this.off(doc, 'mouseup', this.handleMouseUp);
-    this.off(doc, 'touchend', this.handleMouseUp);
+    this.off(doc, 'mouseup', this.handleMouseUpHandler_);
+    this.off(doc, 'touchend', this.handleMouseUpHandler_);
   }
 
   /**
@@ -205,8 +207,8 @@ class ProgressControl extends Component {
 
     this.on(doc, 'mousemove', this.throttledHandleMouseSeek);
     this.on(doc, 'touchmove', this.throttledHandleMouseSeek);
-    this.on(doc, 'mouseup', this.handleMouseUp);
-    this.on(doc, 'touchend', this.handleMouseUp);
+    this.on(doc, 'mouseup', this.handleMouseUpHandler_);
+    this.on(doc, 'touchend', this.handleMouseUpHandler_);
   }
 
   /**

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

@@ -61,9 +61,12 @@ class SeekBar extends Slider {
     // via an interval
     this.updateInterval = null;
 
-    this.on(this.player_, ['playing'], this.enableInterval_);
+    this.enableIntervalHandler_ = (e) => this.enableInterval_(e);
+    this.disableIntervalHandler_ = (e) => this.disableInterval_(e);
 
-    this.on(this.player_, ['ended', 'pause', 'waiting'], this.disableInterval_);
+    this.on(this.player_, ['playing'], this.enableIntervalHandler_);
+
+    this.on(this.player_, ['ended', 'pause', 'waiting'], this.disableIntervalHandler_);
 
     // we don't need to update the play progress if the document is hidden,
     // also, this causes the CPU to spike and eventually crash the page on IE11.
@@ -446,8 +449,8 @@ class SeekBar extends Slider {
       this.on(this.player_.liveTracker, 'liveedgechange', this.update);
     }
 
-    this.off(this.player_, ['playing'], this.enableInterval_);
-    this.off(this.player_, ['ended', 'pause', 'waiting'], this.disableInterval_);
+    this.off(this.player_, ['playing'], this.enableIntervalHandler_);
+    this.off(this.player_, ['ended', 'pause', 'waiting'], this.disableIntervalHandler_);
 
     // we don't need to update the play progress if the document is hidden,
     // also, this causes the CPU to spike and eventually crash the page on IE11.

src/js/control-bar/seek-to-live.js

@@ -27,7 +27,8 @@ class SeekToLive extends Button {
     this.updateLiveEdgeStatus();
 
     if (this.player_.liveTracker) {
-      this.on(this.player_.liveTracker, 'liveedgechange', this.updateLiveEdgeStatus);
+      this.updateLiveEdgeStatusHandler_ = (e) => this.updateLiveEdgeStatus(e);
+      this.on(this.player_.liveTracker, 'liveedgechange', this.updateLiveEdgeStatusHandler_);
     }
   }
 
@@ -84,7 +85,7 @@ class SeekToLive extends Button {
    */
   dispose() {
     if (this.player_.liveTracker) {
-      this.off(this.player_.liveTracker, 'liveedgechange', this.updateLiveEdgeStatus);
+      this.off(this.player_.liveTracker, 'liveedgechange', this.updateLiveEdgeStatusHandler_);
     }
     this.textEl_ = null;
 

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

@@ -23,20 +23,22 @@ class DurationDisplay extends TimeDisplay {
   constructor(player, options) {
     super(player, options);
 
+    const updateContent = (e) => this.updateContent(e);
+
     // we do not want to/need to throttle duration changes,
     // as they should always display the changed duration as
     // it has changed
-    this.on(player, 'durationchange', this.updateContent);
+    this.on(player, 'durationchange', updateContent);
 
     // Listen to loadstart because the player duration is reset when a new media element is loaded,
     // but the durationchange on the user agent will not fire.
     // @see [Spec]{@link https://www.w3.org/TR/2011/WD-html5-20110113/video.html#media-element-load-algorithm}
-    this.on(player, 'loadstart', this.updateContent);
+    this.on(player, 'loadstart', updateContent);
 
     // Also listen for timeupdate (in the parent) and loadedmetadata because removing those
     // listeners could have broken dependent applications/libraries. These
     // can likely be removed for 7.0.
-    this.on(player, 'loadedmetadata', this.updateContent);
+    this.on(player, 'loadedmetadata', updateContent);
   }
 
   /**

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

@@ -23,7 +23,7 @@ class RemainingTimeDisplay extends TimeDisplay {
    */
   constructor(player, options) {
     super(player, options);
-    this.on(player, 'durationchange', this.updateContent);
+    this.on(player, 'durationchange', (e) => this.updateContent(e));
   }
 
   /**

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

@@ -26,7 +26,7 @@ class TimeDisplay extends Component {
   constructor(player, options) {
     super(player, options);
 
-    this.on(player, ['timeupdate', 'ended'], this.updateContent);
+    this.on(player, ['timeupdate', 'ended'], (e) => this.updateContent(e));
     this.updateTextNode_();
   }
 

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

@@ -29,8 +29,8 @@ class VolumeBar extends Slider {
    */
   constructor(player, options) {
     super(player, options);
-    this.on('slideractive', this.updateLastVolume_);
-    this.on(player, 'volumechange', this.updateARIAAttributes);
+    this.on('slideractive', (e) => this.updateLastVolume_(e));
+    this.on(player, 'volumechange', (e) => this.updateARIAAttributes(e));
     player.ready(() => this.updateARIAAttributes());
   }
 

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

@@ -41,10 +41,11 @@ class VolumeControl extends Component {
     checkVolumeSupport(this, player);
 
     this.throttledHandleMouseMove = throttle(bind(this, this.handleMouseMove), UPDATE_REFRESH_INTERVAL);
+    this.handleMouseUpHandler_ = (e) => this.handleMouseUp(e);
 
-    this.on('mousedown', this.handleMouseDown);
-    this.on('touchstart', this.handleMouseDown);
-    this.on('mousemove', this.handleMouseMove);
+    this.on('mousedown', (e) => this.handleMouseDown(e));
+    this.on('touchstart', (e) => this.handleMouseDown(e));
+    this.on('mousemove', (e) => this.handleMouseMove(e));
 
     // while the slider is active (the mouse has been pressed down and
     // is dragging) or in focus we do not want to hide the VolumeBar
@@ -93,8 +94,8 @@ class VolumeControl extends Component {
 
     this.on(doc, 'mousemove', this.throttledHandleMouseMove);
     this.on(doc, 'touchmove', this.throttledHandleMouseMove);
-    this.on(doc, 'mouseup', this.handleMouseUp);
-    this.on(doc, 'touchend', this.handleMouseUp);
+    this.on(doc, 'mouseup', this.handleMouseUpHandler_);
+    this.on(doc, 'touchend', this.handleMouseUpHandler_);
   }
 
   /**
@@ -111,8 +112,8 @@ class VolumeControl extends Component {
 
     this.off(doc, 'mousemove', this.throttledHandleMouseMove);
     this.off(doc, 'touchmove', this.throttledHandleMouseMove);
-    this.off(doc, 'mouseup', this.handleMouseUp);
-    this.off(doc, 'touchend', this.handleMouseUp);
+    this.off(doc, 'mouseup', this.handleMouseUpHandler_);
+    this.off(doc, 'touchend', this.handleMouseUpHandler_);
   }
 
   /**

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

@@ -4,7 +4,6 @@
 import Component from '../component.js';
 import {isPlain} from '../utils/obj';
 import * as Events from '../utils/events.js';
-import * as Fn from '../utils/fn.js';
 import keycode from 'keycode';
 import document from 'global/document';
 
@@ -45,12 +44,15 @@ class VolumePanel extends Component {
 
     super(player, options);
 
-    this.on(player, ['loadstart'], this.volumePanelState_);
-    this.on(this.muteToggle, 'keyup', this.handleKeyPress);
-    this.on(this.volumeControl, 'keyup', this.handleVolumeControlKeyUp);
-    this.on('keydown', this.handleKeyPress);
-    this.on('mouseover', this.handleMouseOver);
-    this.on('mouseout', this.handleMouseOut);
+    // this handler is used by mouse handler methods below
+    this.handleKeyPressHandler_ = (e) => this.handleKeyPress(e);
+
+    this.on(player, ['loadstart'], (e) => this.volumePanelState_(e));
+    this.on(this.muteToggle, 'keyup', (e) => this.handleKeyPress(e));
+    this.on(this.volumeControl, 'keyup', (e) => this.handleVolumeControlKeyUp(e));
+    this.on('keydown', (e) => this.handleKeyPress(e));
+    this.on('mouseover', (e) => this.handleMouseOver(e));
+    this.on('mouseout', (e) => this.handleMouseOut(e));
 
     // while the slider is active (the mouse has been pressed down and
     // is dragging) we do not want to hide the VolumeBar
@@ -153,7 +155,7 @@ class VolumePanel extends Component {
    */
   handleMouseOver(event) {
     this.addClass('vjs-hover');
-    Events.on(document, 'keyup', Fn.bind(this, this.handleKeyPress));
+    Events.on(document, 'keyup', this.handleKeyPressHandler_);
   }
 
   /**
@@ -168,7 +170,7 @@ class VolumePanel extends Component {
    */
   handleMouseOut(event) {
     this.removeClass('vjs-hover');
-    Events.off(document, 'keyup', Fn.bind(this, this.handleKeyPress));
+    Events.off(document, 'keyup', this.handleKeyPressHandler_);
   }
 
   /**

src/js/error-display.js

@@ -23,7 +23,7 @@ class ErrorDisplay extends ModalDialog {
    */
   constructor(player, options) {
     super(player, options);
-    this.on(player, 'error', this.open);
+    this.on(player, 'error', (e) => this.open(e));
   }
 
   /**