@bc-bbay rename onEvent methods to handleEvent. closes #2093

CHANGELOG.md

@@ -19,6 +19,7 @@ CHANGELOG
 * @heff switched to border-box sizing for all player elements ([view](https://github.com/videojs/video.js/pull/2082))
 * @forbesjo added a vjs-button class to button controls ([view](https://github.com/videojs/video.js/pull/2084))
 * @bc-bbay Load plugins before controls ([view](https://github.com/videojs/video.js/pull/2094))
+* @bc-bbay rename onEvent methods to handleEvent ([view](https://github.com/videojs/video.js/pull/2093))
 
 --------------------
 

src/js/big-play-button.js

@@ -20,7 +20,7 @@ class BigPlayButton extends Button {
     });
   }
 
-  onClick() {
+  handleClick() {
     this.player_.play();
   }
 

src/js/button.js

@@ -19,10 +19,10 @@ class Button extends Component {
 
     this.emitTapEvents();
 
-    this.on('tap', this.onClick);
-    this.on('click', this.onClick);
-    this.on('focus', this.onFocus);
-    this.on('blur', this.onBlur);
+    this.on('tap', this.handleClick);
+    this.on('click', this.handleClick);
+    this.on('focus', this.handleFocus);
+    this.on('blur', this.handleBlur);
   }
 
   createEl(type, props) {
@@ -59,25 +59,25 @@ class Button extends Component {
   }
 
   // Click - Override with specific functionality for button
-  onClick() {}
+  handleClick() {}
 
   // Focus - Add keyboard functionality to element
-  onFocus() {
-    Events.on(document, 'keydown', Lib.bind(this, this.onKeyPress));
+  handleFocus() {
+    Events.on(document, 'keydown', Lib.bind(this, this.handleKeyPress));
   }
 
   // KeyPress (document level) - Trigger click when keys are pressed
-  onKeyPress(event) {
+  handleKeyPress(event) {
     // Check for space bar (32) or enter (13) keys
     if (event.which == 32 || event.which == 13) {
       event.preventDefault();
-      this.onClick();
+      this.handleClick();
     }
   }
 
   // Blur - Remove keyboard triggers
-  onBlur() {
-    Events.off(document, 'keydown', Lib.bind(this, this.onKeyPress));
+  handleBlur() {
+    Events.off(document, 'keydown', Lib.bind(this, this.handleKeyPress));
   }
 
 }

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

@@ -13,7 +13,7 @@ class FullscreenToggle extends Button {
     return `vjs-fullscreen-control ${super.buildCSSClass()}`;
   }
 
-  onClick() {
+  handleClick() {
     if (!this.player_.isFullscreen()) {
       this.player_.requestFullscreen();
       this.controlText_.innerHTML = this.localize('Non-Fullscreen');

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

@@ -41,7 +41,7 @@ class MuteToggle extends Button {
     return `vjs-mute-control ${super.buildCSSClass()}`;
   }
 
-  onClick() {
+  handleClick() {
     this.player_.muted( this.player_.muted() ? false : true );
   }
 

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

@@ -13,16 +13,16 @@ class PlayToggle extends Button {
   constructor(player, options){
     super(player, options);
 
-    this.on(player, 'play', this.onPlay);
-    this.on(player, 'pause', this.onPause);
+    this.on(player, 'play', this.handlePlay);
+    this.on(player, 'pause', this.handlePause);
   }
 
   buildCSSClass() {
     return `vjs-play-control ${super.buildCSSClass()}`;
   }
 
-  // OnClick - Toggle between play and pause
-  onClick() {
+  // handleClick - Toggle between play and pause
+  handleClick() {
     if (this.player_.paused()) {
       this.player_.play();
     } else {
@@ -30,15 +30,15 @@ class PlayToggle extends Button {
     }
   }
 
-  // OnPlay - Add the vjs-playing class to the element so it can change appearance
-  onPlay() {
+  // handlePlay - Add the vjs-playing class to the element so it can change appearance
+  handlePlay() {
     this.removeClass('vjs-paused');
     this.addClass('vjs-playing');
     this.el_.children[0].children[0].innerHTML = this.localize('Pause'); // change the button text to "Pause"
   }
 
-  // OnPause - Add the vjs-paused class to the element so it can change appearance
-  onPause() {
+  // handlePause - Add the vjs-paused class to the element so it can change appearance
+  handlePause() {
     this.removeClass('vjs-playing');
     this.addClass('vjs-paused');
     this.el_.children[0].children[0].innerHTML = this.localize('Play'); // change the button text to "Play"

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

@@ -56,7 +56,7 @@ class PlaybackRateMenuButton extends MenuButton {
     this.el().setAttribute('aria-valuenow', this.player().playbackRate());
   }
 
-  onClick() {
+  handleClick() {
     // select next rate option
     let currentRate = this.player().playbackRate();
     let rates = this.player().options()['playbackRates'];

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

@@ -22,8 +22,8 @@ class PlaybackRateMenuItem extends MenuItem {
     this.on(player, 'ratechange', this.update);
   }
 
-  onClick() {
-    super.onClick();
+  handleClick() {
+    super.handleClick();
     this.player().playbackRate(this.rate);
   }
 
@@ -36,4 +36,4 @@ class PlaybackRateMenuItem extends MenuItem {
 PlaybackRateMenuItem.prototype.contentElType = 'button';
 
 MenuItem.registerComponent('PlaybackRateMenuItem', PlaybackRateMenuItem);
-export default PlaybackRateMenuItem;
+export default PlaybackRateMenuItem;

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

@@ -37,8 +37,8 @@ class SeekBar extends Slider {
     return this.player_.currentTime() / this.player_.duration();
   }
 
-  onMouseDown(event) {
-    super.onMouseDown(event);
+  handleMouseDown(event) {
+    super.handleMouseDown(event);
 
     this.player_.scrubbing(true);
 
@@ -46,7 +46,7 @@ class SeekBar extends Slider {
     this.player_.pause();
   }
 
-  onMouseMove(event) {
+  handleMouseMove(event) {
     let newTime = this.calculateDistance(event) * this.player_.duration();
 
     // Don't let video end while scrubbing.
@@ -56,8 +56,8 @@ class SeekBar extends Slider {
     this.player_.currentTime(newTime);
   }
 
-  onMouseUp(event) {
-    super.onMouseUp(event);
+  handleMouseUp(event) {
+    super.handleMouseUp(event);
 
     this.player_.scrubbing(false);
     if (this.videoWasPlaying) {

src/js/control-bar/text-track-controls/caption-settings-menu-item.js

@@ -15,11 +15,11 @@ class CaptionSettingsMenuItem extends TextTrackMenuItem {
     this.addClass('vjs-texttrack-settings');
   }
 
-  onClick() {
+  handleClick() {
     this.player().getChild('textTrackSettings').show();
   }
 
 }
 
 TextTrackMenuItem.registerComponent('CaptionSettingsMenuItem', CaptionSettingsMenuItem);
-export default CaptionSettingsMenuItem;
+export default CaptionSettingsMenuItem;

src/js/control-bar/text-track-controls/chapters-track-menu-item.js

@@ -21,8 +21,8 @@ class ChaptersTrackMenuItem extends MenuItem {
     track.addEventListener('cuechange', Lib.bind(this, this.update));
   }
 
-  onClick() {
-    super.onClick();
+  handleClick() {
+    super.handleClick();
     this.player_.currentTime(this.cue.startTime);
     this.update(this.cue.startTime);
   }

src/js/control-bar/text-track-controls/text-track-menu-item.js

@@ -58,11 +58,11 @@ class TextTrackMenuItem extends MenuItem {
     }
   }
 
-  onClick(event) {
+  handleClick(event) {
     let kind = this.track['kind'];
     let tracks = this.player_.textTracks();
 
-    super.onClick(event);
+    super.handleClick(event);
 
     if (!tracks) return;
 
@@ -88,4 +88,4 @@ class TextTrackMenuItem extends MenuItem {
 }
 
 MenuItem.registerComponent('TextTrackMenuItem', TextTrackMenuItem);
-export default TextTrackMenuItem;
+export default TextTrackMenuItem;

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

@@ -27,7 +27,7 @@ class VolumeBar extends Slider {
     });
   }
 
-  onMouseMove(event) {
+  handleMouseMove(event) {
     if (this.player_.muted()) {
       this.player_.muted(false);
     }

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

@@ -52,9 +52,9 @@ class VolumeMenuButton extends MenuButton {
     return menu;
   }
 
-  onClick() {
-    MuteToggle.prototype.onClick.call(this);
-    super.onClick();
+  handleClick() {
+    MuteToggle.prototype.handleClick.call(this);
+    super.handleClick();
   }
 
   createEl() {

src/js/menu/menu-button.js

@@ -15,7 +15,7 @@ class MenuButton extends Button {
 
     this.update();
 
-    this.on('keydown', this.onKeyPress);
+    this.on('keydown', this.handleKeyPress);
     this.el_.setAttribute('aria-haspopup', true);
     this.el_.setAttribute('role', 'button');
   }
@@ -82,12 +82,12 @@ class MenuButton extends Button {
   // This function is not needed anymore. Instead, the keyboard functionality is handled by
   // treating the button as triggering a submenu. When the button is pressed, the submenu
   // appears. Pressing the button again makes the submenu disappear.
-  onFocus() {}
+  handleFocus() {}
 
   // Can't turn off list display that we turned on with focus, because list would go away.
-  onBlur() {}
+  handleBlur() {}
 
-  onClick() {
+  handleClick() {
     // When you click the button it adds focus, which will show the menu indefinitely.
     // So we'll remove focus when the mouse leaves the button.
     // Focus is needed for tab navigation.
@@ -102,7 +102,7 @@ class MenuButton extends Button {
     }
   }
 
-  onKeyPress(event) {
+  handleKeyPress(event) {
 
     // Check for space bar (32) or enter (13) keys
     if (event.which == 32 || event.which == 13) {

src/js/menu/menu-item.js

@@ -27,7 +27,7 @@ class MenuItem extends Button {
   /**
    * Handle a click on the menu item, and set it to selected
    */
-  onClick() {
+  handleClick() {
     this.selected(true);
   }
 

src/js/player.js

@@ -230,18 +230,18 @@ class Player extends Component {
     // like component.initEventListeners() that runs between el creation and
     // adding children
     this.el_ = el;
-    this.on('loadstart', this.onLoadStart);
-    this.on('waiting', this.onWaiting);
-    this.on(['canplay', 'canplaythrough', 'playing', 'ended'], this.onWaitEnd);
-    this.on('seeking', this.onSeeking);
-    this.on('seeked', this.onSeeked);
-    this.on('ended', this.onEnded);
-    this.on('play', this.onPlay);
-    this.on('firstplay', this.onFirstPlay);
-    this.on('pause', this.onPause);
-    this.on('progress', this.onProgress);
-    this.on('durationchange', this.onDurationChange);
-    this.on('fullscreenchange', this.onFullscreenChange);
+    this.on('loadstart', this.handleLoadStart);
+    this.on('waiting', this.handleWaiting);
+    this.on(['canplay', 'canplaythrough', 'playing', 'ended'], this.handleWaitEnd);
+    this.on('seeking', this.handleSeeking);
+    this.on('seeked', this.handleSeeked);
+    this.on('ended', this.handleEnded);
+    this.on('play', this.handlePlay);
+    this.on('firstplay', this.handleFirstPlay);
+    this.on('pause', this.handlePause);
+    this.on('progress', this.handleProgress);
+    this.on('durationchange', this.handleDurationChange);
+    this.on('fullscreenchange', this.handleFullscreenChange);
 
     return el;
   }
@@ -304,7 +304,7 @@ class Player extends Component {
    * Fired when the user agent begins looking for media data
    * @event loadstart
    */
-  onLoadStart() {
+  handleLoadStart() {
     // TODO: Update to use `emptied` event instead. See #1277.
 
     this.removeClass('vjs-ended');
@@ -345,7 +345,7 @@ class Player extends Component {
    * Fired whenever the media begins or resumes playback
    * @event play
    */
-  onPlay() {
+  handlePlay() {
     this.removeClass('vjs-ended');
     this.removeClass('vjs-paused');
     this.addClass('vjs-playing');
@@ -359,7 +359,7 @@ class Player extends Component {
    * Fired whenever the media begins waiting
    * @event waiting
    */
-  onWaiting() {
+  handleWaiting() {
     this.addClass('vjs-waiting');
   }
 
@@ -368,7 +368,7 @@ class Player extends Component {
    * which is not consistent between browsers. See #1351
    * @private
    */
-  onWaitEnd() {
+  handleWaitEnd() {
     this.removeClass('vjs-waiting');
   }
 
@@ -376,7 +376,7 @@ class Player extends Component {
    * Fired whenever the player is jumping to a new time
    * @event seeking
    */
-  onSeeking() {
+  handleSeeking() {
     this.addClass('vjs-seeking');
   }
 
@@ -384,7 +384,7 @@ class Player extends Component {
    * Fired when the player has finished jumping to a new time
    * @event seeked
    */
-  onSeeked() {
+  handleSeeked() {
     this.removeClass('vjs-seeking');
   }
 
@@ -397,7 +397,7 @@ class Player extends Component {
    *
    * @event firstplay
    */
-  onFirstPlay() {
+  handleFirstPlay() {
     //If the first starttime attribute is specified
     //then we will start at the given offset in seconds
     if(this.options_['starttime']){
@@ -411,7 +411,7 @@ class Player extends Component {
    * Fired whenever the media has been paused
    * @event pause
    */
-  onPause() {
+  handlePause() {
     this.removeClass('vjs-playing');
     this.addClass('vjs-paused');
   }
@@ -420,7 +420,7 @@ class Player extends Component {
    * Fired while the user agent is downloading media data
    * @event progress
    */
-  onProgress() {
+  handleProgress() {
     // Add custom event for when source is finished downloading.
     if (this.bufferedPercent() == 1) {
       this.trigger('loadedalldata');
@@ -431,7 +431,7 @@ class Player extends Component {
    * Fired when the end of the media resource is reached (currentTime == duration)
    * @event ended
    */
-  onEnded() {
+  handleEnded() {
     this.addClass('vjs-ended');
     if (this.options_['loop']) {
       this.currentTime(0);
@@ -445,7 +445,7 @@ class Player extends Component {
    * Fired when the duration of the media resource is first known or changed
    * @event durationchange
    */
-  onDurationChange() {
+  handleDurationChange() {
     // Allows for caching value instead of asking player each time.
     // We need to get the techGet response and check for a value so we don't
     // accidentally cause the stack to blow up.
@@ -468,7 +468,7 @@ class Player extends Component {
    * Fired when the player switches in or out of fullscreen mode
    * @event fullscreenchange
    */
-  onFullscreenChange() {
+  handleFullscreenChange() {
     if (this.isFullscreen()) {
       this.addClass('vjs-fullscreen');
     } else {
@@ -642,7 +642,7 @@ class Player extends Component {
     }
 
     if (this.cache_.duration === undefined) {
-      this.onDurationChange();
+      this.handleDurationChange();
     }
 
     return this.cache_.duration || 0;
@@ -1403,20 +1403,20 @@ class Player extends Component {
   listenForUserActivity() {
     let mouseInProgress, lastMoveX, lastMoveY;
 
-    let onActivity = Lib.bind(this, this.reportUserActivity);
+    let handleActivity = Lib.bind(this, this.reportUserActivity);
 
-    let onMouseMove = function(e) {
+    let handleMouseMove = function(e) {
       // #1068 - Prevent mousemove spamming
       // Chrome Bug: https://code.google.com/p/chromium/issues/detail?id=366970
       if(e.screenX != lastMoveX || e.screenY != lastMoveY) {
         lastMoveX = e.screenX;
         lastMoveY = e.screenY;
-        onActivity();
+        handleActivity();
       }
     };
 
-    let onMouseDown = function() {
-      onActivity();
+    let handleMouseDown = function() {
+      handleActivity();
       // For as long as the they are touching the device or have their mouse down,
       // we consider them active even if they're not moving their finger or mouse.
       // So we want to continue to update that they are active
@@ -1424,24 +1424,24 @@ class Player extends Component {
       // Setting userActivity=true now and setting the interval to the same time
       // as the activityCheck interval (250) should ensure we never miss the
       // next activityCheck
-      mouseInProgress = this.setInterval(onActivity, 250);
+      mouseInProgress = this.setInterval(handleActivity, 250);
     };
 
-    let onMouseUp = function(event) {
-      onActivity();
+    let handleMouseUp = function(event) {
+      handleActivity();
       // Stop the interval that maintains activity if the mouse/touch is down
       this.clearInterval(mouseInProgress);
     };
 
     // Any mouse movement will be considered user activity
-    this.on('mousedown', onMouseDown);
-    this.on('mousemove', onMouseMove);
-    this.on('mouseup', onMouseUp);
+    this.on('mousedown', handleMouseDown);
+    this.on('mousemove', handleMouseMove);
+    this.on('mouseup', handleMouseUp);
 
     // Listen for keyboard navigation
     // Shouldn't need to use inProgress interval because of key repeat
-    this.on('keydown', onActivity);
-    this.on('keyup', onActivity);
+    this.on('keydown', handleActivity);
+    this.on('keyup', handleActivity);
 
     // Run an interval every 250 milliseconds instead of stuffing everything into
     // the mousemove/touchmove function itself, to prevent performance degradation.
@@ -1708,31 +1708,31 @@ Player.prototype.options_ = Options;
  * Fired when the player has initial duration and dimension information
  * @event loadedmetadata
  */
-Player.prototype.onLoadedMetaData;
+Player.prototype.handleLoadedMetaData;
 
 /**
  * Fired when the player has downloaded data at the current playback position
  * @event loadeddata
  */
-Player.prototype.onLoadedData;
+Player.prototype.handleLoadedData;
 
 /**
  * Fired when the player has finished downloading the source data
  * @event loadedalldata
  */
-Player.prototype.onLoadedAllData;
+Player.prototype.handleLoadedAllData;
 
 /**
  * Fired when the user is active, e.g. moves the mouse over the player
  * @event useractive
  */
-Player.prototype.onUserActive;
+Player.prototype.handleUserActive;
 
 /**
  * Fired when the user is inactive, e.g. a short delay after the last mouse move or control interaction
  * @event userinactive
  */
-Player.prototype.onUserInactive;
+Player.prototype.handleUserInactive;
 
 /**
  * Fired when the current playback position has changed
@@ -1741,19 +1741,19 @@ Player.prototype.onUserInactive;
  * playback technology in use.
  * @event timeupdate
  */
-Player.prototype.onTimeUpdate;
+Player.prototype.handleTimeUpdate;
 
 /**
  * Fired when the volume changes
  * @event volumechange
  */
-Player.prototype.onVolumeChange;
+Player.prototype.handleVolumeChange;
 
 /**
  * Fired when an error occurs
  * @event error
  */
-Player.prototype.onError;
+Player.prototype.handleError;
 
 Player.prototype.flexNotSupported_ = function() {
   var elem = document.createElement('i');

src/js/poster-image.js

@@ -89,7 +89,7 @@ class PosterImage extends Button {
   /**
    * Event handler for clicks on the poster image
    */
-  onClick() {
+  handleClick() {
     // We don't want a click to trigger playback when controls are disabled
     // but CSS should be hiding the poster to prevent that from happening
     if (this.player_.paused()) {

src/js/slider/slider.js

@@ -23,11 +23,11 @@ class Slider extends Component {
     // Set a horizontal or vertical class on the slider depending on the slider type
     this.vertical(!!this.options()['vertical']);
 
-    this.on('mousedown', this.onMouseDown);
-    this.on('touchstart', this.onMouseDown);
-    this.on('focus', this.onFocus);
-    this.on('blur', this.onBlur);
-    this.on('click', this.onClick);
+    this.on('mousedown', this.handleMouseDown);
+    this.on('touchstart', this.handleMouseDown);
+    this.on('focus', this.handleFocus);
+    this.on('blur', this.handleBlur);
+    this.on('click', this.handleClick);
 
     this.on(player, 'controlsvisible', this.update);
     this.on(player, this.playerEvent, this.update);
@@ -47,30 +47,30 @@ class Slider extends Component {
     return super.createEl(type, props);
   }
 
-  onMouseDown(event) {
+  handleMouseDown(event) {
     event.preventDefault();
     Lib.blockTextSelection();
     this.addClass('vjs-sliding');
 
-    this.on(document, 'mousemove', this.onMouseMove);
-    this.on(document, 'mouseup', this.onMouseUp);
-    this.on(document, 'touchmove', this.onMouseMove);
-    this.on(document, 'touchend', this.onMouseUp);
+    this.on(document, 'mousemove', this.handleMouseMove);
+    this.on(document, 'mouseup', this.handleMouseUp);
+    this.on(document, 'touchmove', this.handleMouseMove);
+    this.on(document, 'touchend', this.handleMouseUp);
 
-    this.onMouseMove(event);
+    this.handleMouseMove(event);
   }
 
   // To be overridden by a subclass
-  onMouseMove() {}
+  handleMouseMove() {}
 
-  onMouseUp() {
+  handleMouseUp() {
     Lib.unblockTextSelection();
     this.removeClass('vjs-sliding');
 
-    this.off(document, 'mousemove', this.onMouseMove);
-    this.off(document, 'mouseup', this.onMouseUp);
-    this.off(document, 'touchmove', this.onMouseMove);
-    this.off(document, 'touchend', this.onMouseUp);
+    this.off(document, 'mousemove', this.handleMouseMove);
+    this.off(document, 'mouseup', this.handleMouseUp);
+    this.off(document, 'touchmove', this.handleMouseMove);
+    this.off(document, 'touchend', this.handleMouseUp);
 
     this.update();
   }
@@ -206,11 +206,11 @@ class Slider extends Component {
     }
   }
 
-  onFocus() {
-    this.on(document, 'keydown', this.onKeyPress);
+  handleFocus() {
+    this.on(document, 'keydown', this.handleKeyPress);
   }
 
-  onKeyPress(event) {
+  handleKeyPress(event) {
     if (event.which == 37 || event.which == 40) { // Left and Down Arrows
       event.preventDefault();
       this.stepBack();
@@ -220,8 +220,8 @@ class Slider extends Component {
     }
   }
 
-  onBlur() {
-    this.off(document, 'keydown', this.onKeyPress);
+  handleBlur() {
+    this.off(document, 'keydown', this.handleKeyPress);
   }
 
   /**
@@ -229,7 +229,7 @@ class Slider extends Component {
    *   from bubbling up to parent elements like button menus.
    * @param  {Object} event Event object
    */
-  onClick(event) {
+  handleClick(event) {
     event.stopImmediatePropagation();
     event.preventDefault();
   }

src/js/tech/tech.js

@@ -101,7 +101,7 @@ class Tech extends Component {
     // trigger mousedown/up.
     // http://stackoverflow.com/questions/1444562/javascript-onclick-event-over-flash-object
     // Any touch events are set to block the mousedown event from happening
-    this.on('mousedown', this.onClick);
+    this.on('mousedown', this.handleClick);
 
     // If the controls were hidden we don't want that to change without a tap event
     // so we'll check if the controls were already showing before reporting user
@@ -126,7 +126,7 @@ class Tech extends Component {
 
     // The tap listener needs to come after the touchend listener because the tap
     // listener cancels out any reportedUserActivity when setting userActive(false)
-    this.on('tap', this.onTap);
+    this.on('tap', this.handleTap);
   }
 
   /**
@@ -149,7 +149,7 @@ class Tech extends Component {
   /**
    * Handle a click on the media element. By default will play/pause the media.
    */
-  onClick(event) {
+  handleClick(event) {
     // We're using mousedown to detect clicks thanks to Flash, but mousedown
     // will also be triggered with right-clicks, so we need to prevent that
     if (event.button !== 0) return;
@@ -169,7 +169,7 @@ class Tech extends Component {
    * Handle a tap on the media element. By default it will toggle the user
    * activity state, which hides and shows the controls.
    */
-  onTap() {
+  handleTap() {
     this.player().userActive(!this.player().userActive());
   }
 

test/unit/mediafaker.js

@@ -10,8 +10,8 @@ import Component from '../../src/js/component.js';
  */
 class MediaFaker extends Tech {
 
-  constructor(player, options, onReady){
-    super(player, options, onReady);
+  constructor(player, options, handleReady){
+    super(player, options, handleReady);
     this.triggerReady();
   }
 

test/unit/player.js

@@ -441,7 +441,7 @@ test('should not add multiple first play events despite subsequent loads', funct
     ok(true, 'First play should fire once.');
   });
 
-  // Checking to make sure onLoadStart removes first play listener before adding a new one.
+  // Checking to make sure handleLoadStart removes first play listener before adding a new one.
   player.trigger('loadstart');
   player.trigger('loadstart');
   player.trigger('play');