web/video.js
1
0
Fork 0
mirror of https://github.com/videojs/video.js.git synced 2025-03-05 15:16:06 +02:00
Code Releases Activity

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

Browse Source
This commit is contained in:
Gary Katsevman 2021-03-24 15:38:27 -04:00 committed by GitHub
parent b2edfd24ac
commit 17a61474d0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
31 changed files with 220 additions and 169 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/js/big-play-button.js
View File

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

17
src/js/clickable-component.js
View File

@ -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_);
}
/**

2
src/js/control-bar/fullscreen-toggle.js
View File

@ -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();

2
src/js/control-bar/live-display.js
View File

@ -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));
}
/**

2
src/js/control-bar/mute-toggle.js
View File

@ -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));
}
/**

4
src/js/control-bar/picture-in-picture-toggle.js
View File

@ -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();

8
src/js/control-bar/play-toggle.js
View File

@ -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));
}
}

4
src/js/control-bar/playback-rate-menu/playback-rate-menu-button.js
View File

@ -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));
}
/**

2
src/js/control-bar/playback-rate-menu/playback-rate-menu-item.js
View File

@ -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));
}
/**

2
src/js/control-bar/progress-control/load-progress-bar.js
View File

@ -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));
}
/**

14
src/js/control-bar/progress-control/progress-control.js
View File

@ -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_);
}
/**

11
src/js/control-bar/progress-control/seek-bar.js
View File

@ -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.

5
src/js/control-bar/seek-to-live.js
View File

@ -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;

8
src/js/control-bar/time-controls/duration-display.js
View File

@ -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);
}
/**

2
src/js/control-bar/time-controls/remaining-time-display.js
View File

@ -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));
}
/**

2
src/js/control-bar/time-controls/time-display.js
View File

@ -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_();
}

4
src/js/control-bar/volume-control/volume-bar.js
View File

@ -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());
}

15
src/js/control-bar/volume-control/volume-control.js
View File

@ -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_);
}
/**

20
src/js/control-bar/volume-panel.js
View File

@ -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_);
}
/**

2
src/js/error-display.js
View File

@ -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));
}
/**

37
src/js/live-tracker.js
View File

@ -44,9 +44,16 @@ class LiveTracker extends Component {
super(player, options_);
this.handleVisibilityChange_ = (e) => this.handleVisibilityChange(e);
this.trackLiveHandler_ = () => this.trackLive_();
this.handlePlay_ = (e) => this.handlePlay(e);
this.handleFirstTimeupdate_ = (e) => this.handleFirstTimeupdate(e);
this.handleSeeked_ = (e) => this.handleSeeked(e);
this.seekToLiveEdge_ = (e) => this.seekToLiveEdge(e);
this.reset_();
this.on(this.player_, 'durationchange', this.handleDurationchange);
this.on(this.player_, 'durationchange', (e) => this.handleDurationchange(e));
// we should try to toggle tracking on canplay as native playback engines, like Safari
// may not have the proper values for things like seekableEnd until then
this.one(this.player_, 'canplay', () => this.toggleTracking());
@ -55,7 +62,7 @@ class LiveTracker extends Component {
// also, tracking when the document is hidden can
// cause the CPU to spike and eventually crash the page on IE11.
if (browser.IE_VERSION && 'hidden' in document && 'visibilityState' in document) {
this.on(document, 'visibilitychange', this.handleVisibilityChange);
this.on(document, 'visibilitychange', this.handleVisibilityChange_);
}
}
@ -155,16 +162,16 @@ class LiveTracker extends Component {
this.timeupdateSeen_ = this.player_.hasStarted();
}
this.trackingInterval_ = this.setInterval(this.trackLive_, Fn.UPDATE_REFRESH_INTERVAL);
this.trackingInterval_ = this.setInterval(this.trackLiveHandler_, Fn.UPDATE_REFRESH_INTERVAL);
this.trackLive_();
this.on(this.player_, ['play', 'pause'], this.trackLive_);
this.on(this.player_, ['play', 'pause'], this.trackLiveHandler_);
if (!this.timeupdateSeen_) {
this.one(this.player_, 'play', this.handlePlay);
this.one(this.player_, 'timeupdate', this.handleFirstTimeupdate);
this.one(this.player_, 'play', this.handlePlay_);
this.one(this.player_, 'timeupdate', this.handleFirstTimeupdate_);
} else {
this.on(this.player_, 'seeked', this.handleSeeked);
this.on(this.player_, 'seeked', this.handleSeeked_);
}
}
@ -174,7 +181,7 @@ class LiveTracker extends Component {
*/
handleFirstTimeupdate() {
this.timeupdateSeen_ = true;
this.on(this.player_, 'seeked', this.handleSeeked);
this.on(this.player_, 'seeked', this.handleSeeked_);
}
/**
@ -194,7 +201,7 @@ class LiveTracker extends Component {
* right to the live edge.
*/
handlePlay() {
this.one(this.player_, 'timeupdate', this.seekToLiveEdge);
this.one(this.player_, 'timeupdate', this.seekToLiveEdge_);
}
/**
@ -213,11 +220,11 @@ class LiveTracker extends Component {
this.clearInterval(this.trackingInterval_);
this.trackingInterval_ = null;
this.off(this.player_, ['play', 'pause'], this.trackLive_);
this.off(this.player_, 'seeked', this.handleSeeked);
this.off(this.player_, 'play', this.handlePlay);
this.off(this.player_, 'timeupdate', this.handleFirstTimeupdate);
this.off(this.player_, 'timeupdate', this.seekToLiveEdge);
this.off(this.player_, ['play', 'pause'], this.trackLiveHandler_);
this.off(this.player_, 'seeked', this.handleSeeked_);
this.off(this.player_, 'play', this.handlePlay_);
this.off(this.player_, 'timeupdate', this.handleFirstTimeupdate_);
this.off(this.player_, 'timeupdate', this.seekToLiveEdge_);
}
/**
@ -378,7 +385,7 @@ class LiveTracker extends Component {
* Dispose of liveTracker
*/
dispose() {
this.off(document, 'visibilitychange', this.handleVisibilityChange);
this.off(document, 'visibilitychange', this.handleVisibilityChange_);
this.stopTracking();
super.dispose();
}

19
src/js/menu/menu-button.js
View File

@ -5,7 +5,6 @@ import Button from '../button.js';
import Component from '../component.js';
import Menu from './menu.js';
import * as Dom from '../utils/dom.js';
import * as Fn from '../utils/fn.js';
import * as Events from '../utils/events.js';
import {toTitleCase} from '../utils/string-cases.js';
import { IS_IOS } from '../utils/browser.js';
@ -48,16 +47,20 @@ class MenuButton extends Component {
this.enabled_ = true;
this.on(this.menuButton_, 'tap', this.handleClick);
this.on(this.menuButton_, 'click', this.handleClick);
this.on(this.menuButton_, 'keydown', this.handleKeyDown);
const handleClick = (e) => this.handleClick(e);
this.handleMenuKeyUp_ = (e) => this.handleMenuKeyUp(e);
this.on(this.menuButton_, 'tap', handleClick);
this.on(this.menuButton_, 'click', handleClick);
this.on(this.menuButton_, 'keydown', (e) => this.handleKeyDown(e));
this.on(this.menuButton_, 'mouseenter', () => {
this.addClass('vjs-hover');
this.menu.show();
Events.on(document, 'keyup', Fn.bind(this, this.handleMenuKeyUp));
Events.on(document, 'keyup', this.handleMenuKeyUp_);
});
this.on('mouseleave', this.handleMouseLeave);
this.on('keydown', this.handleSubmenuKeyDown);
this.on('mouseleave', (e) => this.handleMouseLeave(e));
this.on('keydown', (e) => this.handleSubmenuKeyDown(e));
}
/**
@ -252,7 +255,7 @@ class MenuButton extends Component {
*/
handleMouseLeave(event) {
this.removeClass('vjs-hover');
Events.off(document, 'keyup', Fn.bind(this, this.handleMenuKeyUp));
Events.off(document, 'keyup', this.handleMenuKeyUp_);
}
/**

7
src/js/menu/menu.js
View File

@ -4,7 +4,6 @@
import Component from '../component.js';
import document from 'global/document';
import * as Dom from '../utils/dom.js';
import * as Fn from '../utils/fn.js';
import * as Events from '../utils/events.js';
import keycode from 'keycode';
@ -35,11 +34,11 @@ class Menu extends Component {
this.focusedChild_ = -1;
this.on('keydown', this.handleKeyDown);
this.on('keydown', (e) => this.handleKeyDown(e));
// All the menu item instances share the same blur handler provided by the menu container.
this.boundHandleBlur_ = Fn.bind(this, this.handleBlur);
this.boundHandleTapClick_ = Fn.bind(this, this.handleTapClick);
this.boundHandleBlur_ = (e) => this.handleBlur(e);
this.boundHandleTapClick_ = (e) => this.handleTapClick(e);
}
/**

11
src/js/modal-dialog.js
View File

@ -58,6 +58,9 @@ class ModalDialog extends Component {
*/
constructor(player, options) {
super(player, options);
this.handleKeyDown_ = (e) => this.handleKeyDown(e);
this.close_ = (e) => this.close(e);
this.opened_ = this.hasBeenOpened_ = this.hasBeenFilled_ = false;
this.closeable(!this.options_.uncloseable);
@ -179,7 +182,7 @@ class ModalDialog extends Component {
player.pause();
}
this.on('keydown', this.handleKeyDown);
this.on('keydown', this.handleKeyDown_);
// Hide controls and note if they were enabled.
this.hadControls_ = player.controls();
@ -242,7 +245,7 @@ class ModalDialog extends Component {
player.play();
}
this.off('keydown', this.handleKeyDown);
this.off('keydown', this.handleKeyDown_);
if (this.hadControls_) {
player.controls(true);
@ -289,12 +292,12 @@ class ModalDialog extends Component {
this.contentEl_ = this.el_;
close = this.addChild('closeButton', {controlText: 'Close Modal Dialog'});
this.contentEl_ = temp;
this.on(close, 'close', this.close);
this.on(close, 'close', this.close_);
}
// If this is being made uncloseable and has a close button, remove it.
if (!closeable && close) {
this.off(close, 'close', this.close);
this.off(close, 'close', this.close_);
this.removeChild(close);
close.dispose();
}

95
src/js/player.js
View File

@ -354,6 +354,17 @@ class Player extends Component {
this.boundDocumentFullscreenChange_ = (e) => this.documentFullscreenChange_(e);
this.boundFullWindowOnEscKey_ = (e) => this.fullWindowOnEscKey(e);
this.boundUpdateStyleEl_ = (e) => this.updateStyleEl_(e);
this.boundApplyInitTime_ = (e) => this.applyInitTime_(e);
this.boundUpdateCurrentBreakpoint_ = (e) => this.updateCurrentBreakpoint_(e);
this.boundHandleTechClick_ = (e) => this.handleTechClick_(e);
this.boundHandleTechDoubleClick_ = (e) => this.handleTechDoubleClick_(e);
this.boundHandleTechTouchStart_ = (e) => this.handleTechTouchStart_(e);
this.boundHandleTechTouchMove_ = (e) => this.handleTechTouchMove_(e);
this.boundHandleTechTouchEnd_ = (e) => this.handleTechTouchEnd_(e);
this.boundHandleTechTap_ = (e) => this.handleTechTap_(e);
// default isFullscreen_ to false
this.isFullscreen_ = false;
@ -473,7 +484,7 @@ class Player extends Component {
}
if (this.fluid_) {
this.on(['playerreset', 'resize'], this.updateStyleEl_);
this.on(['playerreset', 'resize'], this.boundUpdateStyleEl_);
}
// We also want to pass the original player options to each component and plugin
// as well so they don't need to reach back into the player for options later.
@ -552,10 +563,10 @@ class Player extends Component {
this.userActive(true);
this.reportUserActivity();
this.one('play', this.listenForUserActivity_);
this.on('stageclick', this.handleStageClick_);
this.on('keydown', this.handleKeyDown);
this.on('languagechange', this.handleLanguagechange);
this.one('play', (e) => this.listenForUserActivity_(e));
this.on('stageclick', (e) => this.handleStageClick_(e));
this.on('keydown', (e) => this.handleKeyDown(e));
this.on('languagechange', (e) => this.handleLanguagechange(e));
this.breakpoints(this.options_.breakpoints);
this.responsive(this.options_.responsive);
@ -912,13 +923,13 @@ class Player extends Component {
this.fluid_ = !!bool;
if (isEvented(this)) {
this.off(['playerreset', 'resize'], this.updateStyleEl_);
this.off(['playerreset', 'resize'], this.boundUpdateStyleEl_);
}
if (bool) {
this.addClass('vjs-fluid');
this.fill(false);
addEventedCallback(this, () => {
this.on(['playerreset', 'resize'], this.updateStyleEl_);
this.on(['playerreset', 'resize'], this.boundUpdateStyleEl_);
});
} else {
this.removeClass('vjs-fluid');
@ -1173,7 +1184,7 @@ class Player extends Component {
// Listen to all HTML5-defined events and trigger them on the player
TECH_EVENTS_RETRIGGER.forEach((event) => {
this.on(this.tech_, event, this[`handleTech${toTitleCase(event)}_`]);
this.on(this.tech_, event, (e) => this[`handleTech${toTitleCase(event)}_`](e));
});
Object.keys(TECH_EVENTS_QUEUE).forEach((event) => {
@ -1189,24 +1200,24 @@ class Player extends Component {
});
});
this.on(this.tech_, 'loadstart', this.handleTechLoadStart_);
this.on(this.tech_, 'sourceset', this.handleTechSourceset_);
this.on(this.tech_, 'waiting', this.handleTechWaiting_);
this.on(this.tech_, 'ended', this.handleTechEnded_);
this.on(this.tech_, 'seeking', this.handleTechSeeking_);
this.on(this.tech_, 'play', this.handleTechPlay_);
this.on(this.tech_, 'firstplay', this.handleTechFirstPlay_);
this.on(this.tech_, 'pause', this.handleTechPause_);
this.on(this.tech_, 'durationchange', this.handleTechDurationChange_);
this.on(this.tech_, 'fullscreenchange', this.handleTechFullscreenChange_);
this.on(this.tech_, 'fullscreenerror', this.handleTechFullscreenError_);
this.on(this.tech_, 'enterpictureinpicture', this.handleTechEnterPictureInPicture_);
this.on(this.tech_, 'leavepictureinpicture', this.handleTechLeavePictureInPicture_);
this.on(this.tech_, 'error', this.handleTechError_);
this.on(this.tech_, 'loadedmetadata', this.updateStyleEl_);
this.on(this.tech_, 'posterchange', this.handleTechPosterChange_);
this.on(this.tech_, 'textdata', this.handleTechTextData_);
this.on(this.tech_, 'ratechange', this.handleTechRateChange_);
this.on(this.tech_, 'loadstart', (e) => this.handleTechLoadStart_(e));
this.on(this.tech_, 'sourceset', (e) => this.handleTechSourceset_(e));
this.on(this.tech_, 'waiting', (e) => this.handleTechWaiting_(e));
this.on(this.tech_, 'ended', (e) => this.handleTechEnded_(e));
this.on(this.tech_, 'seeking', (e) => this.handleTechSeeking_(e));
this.on(this.tech_, 'play', (e) => this.handleTechPlay_(e));
this.on(this.tech_, 'firstplay', (e) => this.handleTechFirstPlay_(e));
this.on(this.tech_, 'pause', (e) => this.handleTechPause_(e));
this.on(this.tech_, 'durationchange', (e) => this.handleTechDurationChange_(e));
this.on(this.tech_, 'fullscreenchange', (e) => this.handleTechFullscreenChange_(e));
this.on(this.tech_, 'fullscreenerror', (e) => this.handleTechFullscreenError_(e));
this.on(this.tech_, 'enterpictureinpicture', (e) => this.handleTechEnterPictureInPicture_(e));
this.on(this.tech_, 'leavepictureinpicture', (e) => this.handleTechLeavePictureInPicture_(e));
this.on(this.tech_, 'error', (e) => this.handleTechError_(e));
this.on(this.tech_, 'posterchange', (e) => this.handleTechPosterChange_(e));
this.on(this.tech_, 'textdata', (e) => this.handleTechTextData_(e));
this.on(this.tech_, 'ratechange', (e) => this.handleTechRateChange_(e));
this.on(this.tech_, 'loadedmetadata', this.boundUpdateStyleEl_);
this.usingNativeControls(this.techGet_('controls'));
@ -1305,19 +1316,19 @@ class Player extends Component {
// http://stackoverflow.com/questions/1444562/javascript-onclick-event-over-flash-object
// TODO: Is this needed for any techs other than Flash?
// Any touch events are set to block the mousedown event from happening
this.on(this.tech_, 'mouseup', this.handleTechClick_);
this.on(this.tech_, 'dblclick', this.handleTechDoubleClick_);
this.on(this.tech_, 'mouseup', this.boundHandleTechClick_);
this.on(this.tech_, 'dblclick', this.boundHandleTechDoubleClick_);
// 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
// activity
this.on(this.tech_, 'touchstart', this.handleTechTouchStart_);
this.on(this.tech_, 'touchmove', this.handleTechTouchMove_);
this.on(this.tech_, 'touchend', this.handleTechTouchEnd_);
this.on(this.tech_, 'touchstart', this.boundHandleTechTouchStart_);
this.on(this.tech_, 'touchmove', this.boundHandleTechTouchMove_);
this.on(this.tech_, 'touchend', this.boundHandleTechTouchEnd_);
// The tap listener needs to come after the touchend listener because the tap
// listener cancels out any reportedUserActivity when setting userActive(false)
this.on(this.tech_, 'tap', this.handleTechTap_);
this.on(this.tech_, 'tap', this.boundHandleTechTap_);
}
/**
@ -1329,12 +1340,12 @@ class Player extends Component {
removeTechControlsListeners_() {
// We don't want to just use `this.off()` because there might be other needed
// listeners added by techs that extend this.
this.off(this.tech_, 'tap', this.handleTechTap_);
this.off(this.tech_, 'touchstart', this.handleTechTouchStart_);
this.off(this.tech_, 'touchmove', this.handleTechTouchMove_);
this.off(this.tech_, 'touchend', this.handleTechTouchEnd_);
this.off(this.tech_, 'mouseup', this.handleTechClick_);
this.off(this.tech_, 'dblclick', this.handleTechDoubleClick_);
this.off(this.tech_, 'tap', this.boundHandleTechTap_);
this.off(this.tech_, 'touchstart', this.boundHandleTechTouchStart_);
this.off(this.tech_, 'touchmove', this.boundHandleTechTouchMove_);
this.off(this.tech_, 'touchend', this.boundHandleTechTouchEnd_);
this.off(this.tech_, 'mouseup', this.boundHandleTechClick_);
this.off(this.tech_, 'dblclick', this.boundHandleTechDoubleClick_);
}
/**
@ -2474,8 +2485,8 @@ class Player extends Component {
}
if (!this.isReady_ || this.changingSrc_ || !this.tech_ || !this.tech_.isReady_) {
this.cache_.initTime = seconds;
this.off('canplay', this.applyInitTime_);
this.one('canplay', this.applyInitTime_);
this.off('canplay', this.boundApplyInitTime_);
this.one('canplay', this.boundApplyInitTime_);
return;
}
this.techCall_('setCurrentTime', seconds);
@ -4584,12 +4595,12 @@ class Player extends Component {
// Start listening for breakpoints and set the initial breakpoint if the
// player is now responsive.
if (value) {
this.on('playerresize', this.updateCurrentBreakpoint_);
this.on('playerresize', this.boundUpdateCurrentBreakpoint_);
this.updateCurrentBreakpoint_();
// Stop listening for breakpoints if the player is no longer responsive.
} else {
this.off('playerresize', this.updateCurrentBreakpoint_);
this.off('playerresize', this.boundUpdateCurrentBreakpoint_);
this.removeCurrentBreakpoint_();
}

3
src/js/plugin.js
View File

@ -4,7 +4,6 @@
import evented from './mixins/evented';
import stateful from './mixins/stateful';
import * as Events from './utils/events';
import * as Fn from './utils/fn';
import log from './utils/log';
import Player from './player';
@ -217,7 +216,7 @@ class Plugin {
// Auto-bind the dispose method so we can use it as a listener and unbind
// it later easily.
this.dispose = Fn.bind(this, this.dispose);
this.dispose = this.dispose.bind(this);
// If the player is disposed, dispose the plugin.
player.on('dispose', this.dispose);

7
src/js/poster-image.js
View File

@ -3,7 +3,6 @@
*/
import ClickableComponent from './clickable-component.js';
import Component from './component.js';
import * as Fn from './utils/fn.js';
import * as Dom from './utils/dom.js';
import {silencePromise} from './utils/promise';
import * as browser from './utils/browser.js';
@ -28,14 +27,16 @@ class PosterImage extends ClickableComponent {
super(player, options);
this.update();
player.on('posterchange', Fn.bind(this, this.update));
this.update_ = (e) => this.update(e);
player.on('posterchange', this.update_);
}
/**
* Clean up and dispose of the `PosterImage`.
*/
dispose() {
this.player().off('posterchange', this.update);
this.player().off('posterchange', this.update_);
super.dispose();
}

49
src/js/slider/slider.js
View File

@ -28,6 +28,13 @@ class Slider extends Component {
constructor(player, options) {
super(player, options);
this.handleMouseDown_ = (e) => this.handleMouseDown(e);
this.handleMouseUp_ = (e) => this.handleMouseUp(e);
this.handleKeyDown_ = (e) => this.handleKeyDown(e);
this.handleClick_ = (e) => this.handleClick(e);
this.handleMouseMove_ = (e) => this.handleMouseMove(e);
this.update_ = (e) => this.update(e);
// Set property names to bar to match with the child Slider class is looking for
this.bar = this.getChild(this.options_.barName);
@ -55,10 +62,10 @@ class Slider extends Component {
return;
}
this.on('mousedown', this.handleMouseDown);
this.on('touchstart', this.handleMouseDown);
this.on('keydown', this.handleKeyDown);
this.on('click', this.handleClick);
this.on('mousedown', this.handleMouseDown_);
this.on('touchstart', this.handleMouseDown_);
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);
@ -82,15 +89,15 @@ class Slider extends Component {
}
const doc = this.bar.el_.ownerDocument;
this.off('mousedown', this.handleMouseDown);
this.off('touchstart', this.handleMouseDown);
this.off('keydown', this.handleKeyDown);
this.off('click', this.handleClick);
this.off(this.player_, 'controlsvisible', this.update);
this.off(doc, 'mousemove', this.handleMouseMove);
this.off(doc, 'mouseup', this.handleMouseUp);
this.off(doc, 'touchmove', this.handleMouseMove);
this.off(doc, 'touchend', this.handleMouseUp);
this.off('mousedown', this.handleMouseDown_);
this.off('touchstart', this.handleMouseDown_);
this.off('keydown', this.handleKeyDown_);
this.off('click', this.handleClick_);
this.off(this.player_, 'controlsvisible', this.update_);
this.off(doc, 'mousemove', this.handleMouseMove_);
this.off(doc, 'mouseup', this.handleMouseUp_);
this.off(doc, 'touchmove', this.handleMouseMove_);
this.off(doc, 'touchend', this.handleMouseUp_);
this.removeAttribute('tabindex');
this.addClass('disabled');
@ -168,10 +175,10 @@ class Slider extends Component {
*/
this.trigger('slideractive');
this.on(doc, 'mousemove', this.handleMouseMove);
this.on(doc, 'mouseup', this.handleMouseUp);
this.on(doc, 'touchmove', this.handleMouseMove);
this.on(doc, 'touchend', this.handleMouseUp);
this.on(doc, 'mousemove', this.handleMouseMove_);
this.on(doc, 'mouseup', this.handleMouseUp_);
this.on(doc, 'touchmove', this.handleMouseMove_);
this.on(doc, 'touchend', this.handleMouseUp_);
this.handleMouseMove(event);
}
@ -215,10 +222,10 @@ class Slider extends Component {
*/
this.trigger('sliderinactive');
this.off(doc, 'mousemove', this.handleMouseMove);
this.off(doc, 'mouseup', this.handleMouseUp);
this.off(doc, 'touchmove', this.handleMouseMove);
this.off(doc, 'touchend', this.handleMouseUp);
this.off(doc, 'mousemove', this.handleMouseMove_);
this.off(doc, 'mouseup', this.handleMouseUp_);
this.off(doc, 'touchmove', this.handleMouseMove_);
this.off(doc, 'touchend', this.handleMouseUp_);
this.update();
}

24
src/js/tech/tech.js
View File

@ -97,6 +97,12 @@ class Tech extends Component {
options.reportTouchActivity = false;
super(null, options, ready);
this.onDurationChange_ = (e) => this.onDurationChange(e);
this.trackProgress_ = (e) => this.trackProgress(e);
this.trackCurrentTime_ = (e) => this.trackCurrentTime(e);
this.stopTrackingCurrentTime_ = (e) => this.stopTrackingCurrentTime(e);
this.disposeSourceHandler_ = (e) => this.disposeSourceHandler(e);
// keep track of whether the current source has played at all to
// implement a very limited played()
this.hasStarted_ = false;
@ -194,12 +200,12 @@ class Tech extends Component {
* @see {@link Tech#trackProgress}
*/
manualProgressOn() {
this.on('durationchange', this.onDurationChange);
this.on('durationchange', this.onDurationChange_);
this.manualProgress = true;
// Trigger progress watching when a source begins loading
this.one('ready', this.trackProgress);
this.one('ready', this.trackProgress_);
}
/**
@ -210,7 +216,7 @@ class Tech extends Component {
this.manualProgress = false;
this.stopTrackingProgress();
this.off('durationchange', this.onDurationChange);
this.off('durationchange', this.onDurationChange_);
}
/**
@ -304,8 +310,8 @@ class Tech extends Component {
manualTimeUpdatesOn() {
this.manualTimeUpdates = true;
this.on('play', this.trackCurrentTime);
this.on('pause', this.stopTrackingCurrentTime);
this.on('play', this.trackCurrentTime_);
this.on('pause', this.stopTrackingCurrentTime_);
}
/**
@ -315,8 +321,8 @@ class Tech extends Component {
manualTimeUpdatesOff() {
this.manualTimeUpdates = false;
this.stopTrackingCurrentTime();
this.off('play', this.trackCurrentTime);
this.off('pause', this.stopTrackingCurrentTime);
this.off('play', this.trackCurrentTime_);
this.off('pause', this.stopTrackingCurrentTime_);
}
/**
@ -1342,14 +1348,14 @@ Tech.withSourceHandlers = function(_Tech) {
// Dispose any existing source handler
this.disposeSourceHandler();
this.off('dispose', this.disposeSourceHandler);
this.off('dispose', this.disposeSourceHandler_);
if (sh !== _Tech.nativeSourceHandler) {
this.currentSource_ = source;
}
this.sourceHandler_ = sh.handleSource(source, this, this.options_);
this.one('dispose', this.disposeSourceHandler);
this.one('dispose', this.disposeSourceHandler_);
};
/**

6
src/js/tracks/text-track-display.js
View File

@ -99,11 +99,11 @@ class TextTrackDisplay extends Component {
constructor(player, options, ready) {
super(player, options, ready);
const updateDisplayHandler = Fn.bind(this, this.updateDisplay);
const updateDisplayHandler = (e) => this.updateDisplay(e);
player.on('loadstart', Fn.bind(this, this.toggleDisplay));
player.on('loadstart', (e) => this.toggleDisplay(e));
player.on('texttrackchange', updateDisplayHandler);
player.on('loadedmetadata', Fn.bind(this, this.preselectTrack));
player.on('loadedmetadata', (e) => this.preselectTrack(e));
// This used to be called during player init, but was causing an error
// if a track should show by default and the display hadn't loaded yet.

3
src/js/tracks/text-track-settings.js
View File

@ -5,7 +5,6 @@ import window from 'global/window';
import Component from '../component';
import ModalDialog from '../modal-dialog';
import {createEl} from '../utils/dom';
import * as Fn from '../utils/fn';
import * as Obj from '../utils/obj';
import log from '../utils/log';
@ -254,7 +253,7 @@ class TextTrackSettings extends ModalDialog {
options.temporary = false;
super(player, options);
this.updateDisplay = Fn.bind(this, this.updateDisplay);
this.updateDisplay = this.updateDisplay.bind(this);
// fill the modal and pretend we have opened it
this.fill();