web/video.js
1
0
Fork 0
mirror of https://github.com/videojs/video.js.git synced 2025-07-17 01:42:41 +02:00
Code Releases Activity

refactor: Remove method Chaining from videojs (#3860)

Browse Source 
Remove method chaining from videojs. This helps keep the methods consistent especially since play() now returns a Promise in some cases. Also, it can add some performance benefits.

BREAKING CHANGE: player methods no longer return a player instance when called. Fixes #3704.
This commit is contained in:
Brandon Casey
2017-01-18 01:50:22 -05:00
committed by Gary Katsevman
parent 0bba3196d8
commit 8f07f5d57c
9 changed files with 179 additions and 335 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -108,9 +108,8 @@ class ClickableComponent extends Component {
* @param {Element} [el=this.el()] * @param {Element} [el=this.el()]
* Element to set the title on. * Element to set the title on.
* *
* @return {string|ClickableComponent} * @return {string}
* - The control text when getting * - The control text when getting
* - Returns itself when setting; method can be chained.
*/ */
controlText(text, el = this.el()) { controlText(text, el = this.el()) {
if (!text) { if (!text) {
@ -122,8 +121,6 @@ class ClickableComponent extends Component {
this.controlText_ = text; this.controlText_ = text;
this.controlTextEl_.innerHTML = localizedText; this.controlTextEl_.innerHTML = localizedText;
el.setAttribute('title', localizedText); el.setAttribute('title', localizedText);
return this;
} }
/** /**
@ -138,9 +135,6 @@ class ClickableComponent extends Component {
/** /**
* Enable this `Component`s element. * Enable this `Component`s element.
*
* @return {ClickableComponent}
* Returns itself; method can be chained.
*/ */
enable() { enable() {
this.removeClass('vjs-disabled'); this.removeClass('vjs-disabled');
@ -152,14 +146,10 @@ class ClickableComponent extends Component {
this.on('click', this.handleClick); this.on('click', this.handleClick);
this.on('focus', this.handleFocus); this.on('focus', this.handleFocus);
this.on('blur', this.handleBlur); this.on('blur', this.handleBlur);
return this;
} }
/** /**
* Disable this `Component`s element. * Disable this `Component`s element.
*
* @return {ClickableComponent}
* Returns itself; method can be chained.
*/ */
disable() { disable() {
this.addClass('vjs-disabled'); this.addClass('vjs-disabled');
@ -171,7 +161,6 @@ class ClickableComponent extends Component {
this.off('click', this.handleClick); this.off('click', this.handleClick);
this.off('focus', this.handleFocus); this.off('focus', this.handleFocus);
this.off('blur', this.handleBlur); this.off('blur', this.handleBlur);
return this;
} }
/** /**

85
src/js/component.js
View File

@ -573,9 +573,6 @@ class Component {
* The event handler if `first` is a `Component` and `second` is an event name * The event handler if `first` is a `Component` and `second` is an event name
* or an Array of event names. * or an Array of event names.
* *
* @return {Component}
* Returns itself; method can be chained.
*
* @listens Component#dispose * @listens Component#dispose
*/ */
on(first, second, third) { on(first, second, third) {
@ -618,8 +615,6 @@ class Component {
target.on('dispose', cleanRemover); target.on('dispose', cleanRemover);
} }
} }
return this;
} }
/** /**
@ -635,9 +630,6 @@ class Component {
* @param {EventTarget~EventListener} [third] * @param {EventTarget~EventListener} [third]
* The event handler if `first` is a `Component` and `second` is an event name * The event handler if `first` is a `Component` and `second` is an event name
* or an Array of event names. * or an Array of event names.
*
* @return {Component}
* Returns itself; method can be chained.
*/ */
off(first, second, third) { off(first, second, third) {
if (!first || typeof first === 'string' || Array.isArray(first)) { if (!first || typeof first === 'string' || Array.isArray(first)) {
@ -662,8 +654,6 @@ class Component {
target.off('dispose', fn); target.off('dispose', fn);
} }
} }
return this;
} }
/** /**
@ -678,9 +668,6 @@ class Component {
* @param {EventTarget~EventListener} [third] * @param {EventTarget~EventListener} [third]
* The event handler if `first` is a `Component` and `second` is an event name * The event handler if `first` is a `Component` and `second` is an event name
* or an Array of event names. * or an Array of event names.
*
* @return {Component}
* Returns itself; method can be chained.
*/ */
one(first, second, third) { one(first, second, third) {
if (typeof first === 'string' || Array.isArray(first)) { if (typeof first === 'string' || Array.isArray(first)) {
@ -700,8 +687,6 @@ class Component {
this.on(target, type, newFunc); this.on(target, type, newFunc);
} }
return this;
} }
/** /**
@ -713,13 +698,9 @@ class Component {
* *
* @param {Object} [hash] * @param {Object} [hash]
* Data hash to pass along with the event * Data hash to pass along with the event
*
* @return {Component}
* Returns itself; method can be chained.
*/ */
trigger(event, hash) { trigger(event, hash) {
Events.trigger(this.el_, event, hash); Events.trigger(this.el_, event, hash);
return this;
} }
/** /**
@ -731,9 +712,6 @@ class Component {
* *
* @param {boolean} [sync=false] * @param {boolean} [sync=false]
* Execute the listener synchronously if `Component` is ready. * Execute the listener synchronously if `Component` is ready.
*
* @return {Component}
* Returns itself; method can be chained.
*/ */
ready(fn, sync = false) { ready(fn, sync = false) {
if (fn) { if (fn) {
@ -749,7 +727,6 @@ class Component {
this.readyQueue_.push(fn); this.readyQueue_.push(fn);
} }
} }
return this;
} }
/** /**
@ -847,13 +824,9 @@ class Component {
* *
* @param {string} classToAdd * @param {string} classToAdd
* CSS class name to add * CSS class name to add
*
* @return {Component}
* Returns itself; method can be chained.
*/ */
addClass(classToAdd) { addClass(classToAdd) {
Dom.addElClass(this.el_, classToAdd); Dom.addElClass(this.el_, classToAdd);
return this;
} }
/** /**
@ -861,13 +834,9 @@ class Component {
* *
* @param {string} classToRemove * @param {string} classToRemove
* CSS class name to remove * CSS class name to remove
*
* @return {Component}
* Returns itself; method can be chained.
*/ */
removeClass(classToRemove) { removeClass(classToRemove) {
Dom.removeElClass(this.el_, classToRemove); Dom.removeElClass(this.el_, classToRemove);
return this;
} }
/** /**
@ -880,65 +849,45 @@ class Component {
* *
* @param {boolean|Dom~predicate} [predicate] * @param {boolean|Dom~predicate} [predicate]
* An {@link Dom~predicate} function or a boolean * An {@link Dom~predicate} function or a boolean
*
* @return {Component}
* Returns itself; method can be chained.
*/ */
toggleClass(classToToggle, predicate) { toggleClass(classToToggle, predicate) {
Dom.toggleElClass(this.el_, classToToggle, predicate); Dom.toggleElClass(this.el_, classToToggle, predicate);
return this;
} }
/** /**
* Show the `Component`s element if it is hidden by removing the * Show the `Component`s element if it is hidden by removing the
* 'vjs-hidden' class name from it. * 'vjs-hidden' class name from it.
*
* @return {Component}
* Returns itself; method can be chained.
*/ */
show() { show() {
this.removeClass('vjs-hidden'); this.removeClass('vjs-hidden');
return this;
} }
/** /**
* Hide the `Component`s element if it is currently showing by adding the * Hide the `Component`s element if it is currently showing by adding the
* 'vjs-hidden` class name to it. * 'vjs-hidden` class name to it.
*
* @return {Component}
* Returns itself; method can be chained.
*/ */
hide() { hide() {
this.addClass('vjs-hidden'); this.addClass('vjs-hidden');
return this;
} }
/** /**
* Lock a `Component`s element in its visible state by adding the 'vjs-lock-showing' * Lock a `Component`s element in its visible state by adding the 'vjs-lock-showing'
* class name to it. Used during fadeIn/fadeOut. * class name to it. Used during fadeIn/fadeOut.
* *
* @return {Component}
* Returns itself; method can be chained.
*
* @private * @private
*/ */
lockShowing() { lockShowing() {
this.addClass('vjs-lock-showing'); this.addClass('vjs-lock-showing');
return this;
} }
/** /**
* Unlock a `Component`s element from its visible state by removing the 'vjs-lock-showing' * Unlock a `Component`s element from its visible state by removing the 'vjs-lock-showing'
* class name from it. Used during fadeIn/fadeOut. * class name from it. Used during fadeIn/fadeOut.
* *
* @return {Component}
* Returns itself; method can be chained.
*
* @private * @private
*/ */
unlockShowing() { unlockShowing() {
this.removeClass('vjs-lock-showing'); this.removeClass('vjs-lock-showing');
return this;
} }
/** /**
@ -969,14 +918,10 @@ class Component {
* @param {string} value * @param {string} value
* Value to set the attribute to. * Value to set the attribute to.
* *
* @return {Component}
* Returns itself; method can be chained.
*
* @see [DOM API]{@link https://developer.mozilla.org/en-US/docs/Web/API/Element/setAttribute} * @see [DOM API]{@link https://developer.mozilla.org/en-US/docs/Web/API/Element/setAttribute}
*/ */
setAttribute(attribute, value) { setAttribute(attribute, value) {
Dom.setAttribute(this.el_, attribute, value); Dom.setAttribute(this.el_, attribute, value);
return this;
} }
/** /**
@ -985,14 +930,10 @@ class Component {
* @param {string} attribute * @param {string} attribute
* Name of the attribute to remove. * Name of the attribute to remove.
* *
* @return {Component}
* Returns itself; method can be chained.
*
* @see [DOM API]{@link https://developer.mozilla.org/en-US/docs/Web/API/Element/removeAttribute} * @see [DOM API]{@link https://developer.mozilla.org/en-US/docs/Web/API/Element/removeAttribute}
*/ */
removeAttribute(attribute) { removeAttribute(attribute) {
Dom.removeAttribute(this.el_, attribute); Dom.removeAttribute(this.el_, attribute);
return this;
} }
/** /**
@ -1005,10 +946,9 @@ class Component {
* @param {boolean} [skipListeners] * @param {boolean} [skipListeners]
* Skip the resize event trigger * Skip the resize event trigger
* *
* @return {Component|number|string} * @return {number|string}
* - The width when getting, zero if there is no width. Can be a string * The width when getting, zero if there is no width. Can be a string
* postpixed with '%' or 'px'. * postpixed with '%' or 'px'.
* - Returns itself when setting; method can be chained.
*/ */
width(num, skipListeners) { width(num, skipListeners) {
return this.dimension('width', num, skipListeners); return this.dimension('width', num, skipListeners);
@ -1024,10 +964,9 @@ class Component {
* @param {boolean} [skipListeners] * @param {boolean} [skipListeners]
* Skip the resize event trigger * Skip the resize event trigger
* *
* @return {Component|number|string} * @return {number|string}
* - The width when getting, zero if there is no width. Can be a string * The width when getting, zero if there is no width. Can be a string
* postpixed with '%' or 'px'. * postpixed with '%' or 'px'.
* - Returns itself when setting; method can be chained.
*/ */
height(num, skipListeners) { height(num, skipListeners) {
return this.dimension('height', num, skipListeners); return this.dimension('height', num, skipListeners);
@ -1041,13 +980,11 @@ class Component {
* *
* @param {number|string} height * @param {number|string} height
* Height to set the `Component`s element to. * Height to set the `Component`s element to.
*
* @return {Component}
* Returns itself; method can be chained.
*/ */
dimensions(width, height) { dimensions(width, height) {
// Skip resize listeners on width for optimization // Skip resize listeners on width for optimization
return this.width(width, true).height(height); this.width(width, true);
this.height(height);
} }
/** /**
@ -1075,9 +1012,8 @@ class Component {
* @param {boolean} [skipListeners] * @param {boolean} [skipListeners]
* Skip resize event trigger * Skip resize event trigger
* *
* @return {Component} * @return {number}
* - the dimension when getting or 0 if unset * The dimension when getting or 0 if unset
* - Returns itself when setting; method can be chained.
*/ */
dimension(widthOrHeight, num, skipListeners) { dimension(widthOrHeight, num, skipListeners) {
if (num !== undefined) { if (num !== undefined) {
@ -1106,8 +1042,7 @@ class Component {
this.trigger('resize'); this.trigger('resize');
} }
// Return component return;
return this;
} }
// Not setting a value, so getting it // Not setting a value, so getting it

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

@ -245,9 +245,6 @@ class MenuButton extends ClickableComponent {
/** /**
* Disable the `MenuButton`. Don't allow it to be clicked. * Disable the `MenuButton`. Don't allow it to be clicked.
*
* @return {MenuButton}
* Returns itself; method can be chained.
*/ */
disable() { disable() {
// Unpress, but don't force focus on this button // Unpress, but don't force focus on this button
@ -257,19 +254,15 @@ class MenuButton extends ClickableComponent {
this.enabled_ = false; this.enabled_ = false;
return super.disable(); super.disable();
} }
/** /**
* Enable the `MenuButton`. Allow it to be clicked. * Enable the `MenuButton`. Allow it to be clicked.
*
* @return {MenuButton}
* Returns itself; method can be chained.
*/ */
enable() { enable() {
this.enabled_ = true; this.enabled_ = true;
super.enable();
return super.enable();
} }
} }

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

@ -153,20 +153,17 @@ class ModalDialog extends Component {
* *
* @fires ModalDialog#beforemodalopen * @fires ModalDialog#beforemodalopen
* @fires ModalDialog#modalopen * @fires ModalDialog#modalopen
*
* @return {ModalDialog}
* Returns itself; method can be chained.
*/ */
open() { open() {
if (!this.opened_) { if (!this.opened_) {
const player = this.player(); const player = this.player();
/** /**
* Fired just before a `ModalDialog` is opened. * Fired just before a `ModalDialog` is opened.
* *
* @event ModalDialog#beforemodalopen * @event ModalDialog#beforemodalopen
* @type {EventTarget~Event} * @type {EventTarget~Event}
*/ */
this.trigger('beforemodalopen'); this.trigger('beforemodalopen');
this.opened_ = true; this.opened_ = true;
@ -193,15 +190,14 @@ class ModalDialog extends Component {
this.el().setAttribute('aria-hidden', 'false'); this.el().setAttribute('aria-hidden', 'false');
/** /**
* Fired just after a `ModalDialog` is opened. * Fired just after a `ModalDialog` is opened.
* *
* @event ModalDialog#modalopen * @event ModalDialog#modalopen
* @type {EventTarget~Event} * @type {EventTarget~Event}
*/ */
this.trigger('modalopen'); this.trigger('modalopen');
this.hasBeenOpened_ = true; this.hasBeenOpened_ = true;
} }
return this;
} }
/** /**
@ -226,48 +222,45 @@ class ModalDialog extends Component {
* *
* @fires ModalDialog#beforemodalclose * @fires ModalDialog#beforemodalclose
* @fires ModalDialog#modalclose * @fires ModalDialog#modalclose
*
* @return {ModalDialog}
* Returns itself; method can be chained.
*/ */
close() { close() {
if (this.opened_) { if (!this.opened_) {
const player = this.player(); return;
}
/** const player = this.player();
* Fired just before a `ModalDialog` is closed.
* /**
* @event ModalDialog#beforemodalclose * Fired just before a `ModalDialog` is closed.
* @type {EventTarget~Event} *
*/ * @event ModalDialog#beforemodalclose
this.trigger('beforemodalclose'); * @type {EventTarget~Event}
this.opened_ = false; */
this.trigger('beforemodalclose');
if (this.wasPlaying_) { this.opened_ = false;
player.play();
} if (this.wasPlaying_) {
player.play();
if (this.closeable()) { }
this.off(this.el_.ownerDocument, 'keydown', Fn.bind(this, this.handleKeyPress));
} if (this.closeable()) {
this.off(this.el_.ownerDocument, 'keydown', Fn.bind(this, this.handleKeyPress));
player.controls(true); }
this.hide();
this.el().setAttribute('aria-hidden', 'true'); player.controls(true);
this.hide();
/** this.el().setAttribute('aria-hidden', 'true');
* Fired just after a `ModalDialog` is closed.
* /**
* @event ModalDialog#modalclose * Fired just after a `ModalDialog` is closed.
* @type {EventTarget~Event} *
*/ * @event ModalDialog#modalclose
this.trigger('modalclose'); * @type {EventTarget~Event}
*/
if (this.options_.temporary) { this.trigger('modalclose');
this.dispose();
} if (this.options_.temporary) {
this.dispose();
} }
return this;
} }
/** /**
@ -310,12 +303,9 @@ class ModalDialog extends Component {
/** /**
* Fill the modal's content element with the modal's "content" option. * Fill the modal's content element with the modal's "content" option.
* The content element will be emptied before this change takes place. * The content element will be emptied before this change takes place.
*
* @return {ModalDialog}
* Returns itself; method can be chained.
*/ */
fill() { fill() {
return this.fillWith(this.content()); this.fillWith(this.content());
} }
/** /**
@ -325,11 +315,8 @@ class ModalDialog extends Component {
* @fires ModalDialog#beforemodalfill * @fires ModalDialog#beforemodalfill
* @fires ModalDialog#modalfill * @fires ModalDialog#modalfill
* *
* @param {Mixed} [content] * @param {Mixed} [content]
* The same rules apply to this as apply to the `content` option. * The same rules apply to this as apply to the `content` option.
*
* @return {ModalDialog}
* Returns itself; method can be chained.
*/ */
fillWith(content) { fillWith(content) {
const contentEl = this.contentEl(); const contentEl = this.contentEl();
@ -364,8 +351,6 @@ class ModalDialog extends Component {
} else { } else {
parentEl.appendChild(contentEl); parentEl.appendChild(contentEl);
} }
return this;
} }
/** /**
@ -373,9 +358,6 @@ class ModalDialog extends Component {
* *
* @fires ModalDialog#beforemodalempty * @fires ModalDialog#beforemodalempty
* @fires ModalDialog#modalempty * @fires ModalDialog#modalempty
*
* @return {ModalDialog}
* Returns itself; method can be chained.
*/ */
empty() { empty() {
/** /**
@ -394,7 +376,6 @@ class ModalDialog extends Component {
* @type {EventTarget~Event} * @type {EventTarget~Event}
*/ */
this.trigger('modalempty'); this.trigger('modalempty');
return this;
} }
/** /**

179
src/js/player.js
View File

@ -568,7 +568,7 @@ class Player extends Component {
* The value to set the `Player's width to. * The value to set the `Player's width to.
* *
* @return {number} * @return {number}
* The current width of the `Player`. * The current width of the `Player` when getting.
*/ */
width(value) { width(value) {
return this.dimension('width', value); return this.dimension('width', value);
@ -581,7 +581,7 @@ class Player extends Component {
* The value to set the `Player's heigth to. * The value to set the `Player's heigth to.
* *
* @return {number} * @return {number}
* The current heigth of the `Player`. * The current height of the `Player` when getting.
*/ */
height(value) { height(value) {
return this.dimension('height', value); return this.dimension('height', value);
@ -598,9 +598,8 @@ class Player extends Component {
* @param {number} [value] * @param {number} [value]
* Value for dimension specified in the first argument. * Value for dimension specified in the first argument.
* *
* @return {Player|number} * @return {number}
* - Returns itself when setting; method can be chained. * The dimension arguments value when getting (width/height).
* - The dimension arguments value when getting (width/height).
*/ */
dimension(dimension, value) { dimension(dimension, value) {
const privDimension = dimension + '_'; const privDimension = dimension + '_';
@ -617,14 +616,13 @@ class Player extends Component {
if (isNaN(parsedVal)) { if (isNaN(parsedVal)) {
log.error(`Improper value "${value}" supplied for for ${dimension}`); log.error(`Improper value "${value}" supplied for for ${dimension}`);
return this; return;
} }
this[privDimension] = parsedVal; this[privDimension] = parsedVal;
} }
this.updateStyleEl_(); this.updateStyleEl_();
return this;
} }
/** /**
@ -1098,7 +1096,7 @@ class Player extends Component {
this.removeClass('vjs-has-started'); this.removeClass('vjs-has-started');
} }
} }
return this; return;
} }
return !!this.hasStarted_; return !!this.hasStarted_;
} }
@ -1594,7 +1592,6 @@ class Player extends Component {
*/ */
pause() { pause() {
this.techCall_('pause'); this.techCall_('pause');
return this;
} }
/** /**
@ -1617,24 +1614,20 @@ class Player extends Component {
* @param {boolean} [isScrubbing] * @param {boolean} [isScrubbing]
* wether the user is or is not scrubbing * wether the user is or is not scrubbing
* *
* @return {boolean|Player} * @return {boolean}
* A instance of the player that called this function when setting, * The value of scrubbing when getting
* and the value of scrubbing when getting
*/ */
scrubbing(isScrubbing) { scrubbing(isScrubbing) {
if (isScrubbing !== undefined) { if (typeof isScrubbing === 'undefined') {
this.scrubbing_ = !!isScrubbing; return this.scrubbing_;
if (isScrubbing) {
this.addClass('vjs-scrubbing');
} else {
this.removeClass('vjs-scrubbing');
}
return this;
} }
this.scrubbing_ = !!isScrubbing;
return this.scrubbing_; if (isScrubbing) {
this.addClass('vjs-scrubbing');
} else {
this.removeClass('vjs-scrubbing');
}
} }
/** /**
@ -1643,16 +1636,13 @@ class Player extends Component {
* @param {number|string} [seconds] * @param {number|string} [seconds]
* The time to seek to in seconds * The time to seek to in seconds
* *
* @return {Player|number} * @return {number}
* - the current time in seconds when getting * - the current time in seconds when getting
* - a reference to the current player object when setting
*/ */
currentTime(seconds) { currentTime(seconds) {
if (seconds !== undefined) { if (typeof seconds !== 'undefined') {
this.techCall_('setCurrentTime', seconds); this.techCall_('setCurrentTime', seconds);
return;
return this;
} }
// cache last currentTime and return. default to 0 seconds // cache last currentTime and return. default to 0 seconds
@ -1678,10 +1668,8 @@ class Player extends Component {
* @param {number} [seconds] * @param {number} [seconds]
* The duration of the video to set in seconds * The duration of the video to set in seconds
* *
* @return {number|Player} * @return {number}
* - The duration of the video in seconds when getting * - The duration of the video in seconds when getting
* - A reference to the player that called this function
* when setting
*/ */
duration(seconds) { duration(seconds) {
if (seconds === undefined) { if (seconds === undefined) {
@ -1710,8 +1698,6 @@ class Player extends Component {
*/ */
this.trigger('durationchange'); this.trigger('durationchange');
} }
return this;
} }
/** /**
@ -1788,9 +1774,8 @@ class Player extends Component {
* - 1.0 is 100%/full * - 1.0 is 100%/full
* - 0.5 is half volume or 50% * - 0.5 is half volume or 50%
* *
* @return {Player|number} * @return {number}
* a reference to the calling player when setting and the * The current volume as a percent when getting
* current volume as a percent when getting
*/ */
volume(percentAsDecimal) { volume(percentAsDecimal) {
let vol; let vol;
@ -1801,7 +1786,7 @@ class Player extends Component {
this.cache_.volume = vol; this.cache_.volume = vol;
this.techCall_('setVolume', vol); this.techCall_('setVolume', vol);
return this; return;
} }
// Default to 1 when returning current volume. // Default to 1 when returning current volume.
@ -1816,15 +1801,14 @@ class Player extends Component {
* - true to mute * - true to mute
* - false to unmute * - false to unmute
* *
* @return {boolean|Player} * @return {boolean}
* - true if mute is on and getting * - true if mute is on and getting
* - false if mute is off and getting * - false if mute is off and getting
* - A reference to the current player when setting
*/ */
muted(muted) { muted(muted) {
if (muted !== undefined) { if (muted !== undefined) {
this.techCall_('setMuted', muted); this.techCall_('setMuted', muted);
return this; return;
} }
return this.techGet_('muted') || false; return this.techGet_('muted') || false;
} }
@ -1851,15 +1835,14 @@ class Player extends Component {
* @param {boolean} [isFS] * @param {boolean} [isFS]
* Set the players current fullscreen state * Set the players current fullscreen state
* *
* @return {boolean|Player} * @return {boolean}
* - true if fullscreen is on and getting * - true if fullscreen is on and getting
* - false if fullscreen is off and getting * - false if fullscreen is off and getting
* - A reference to the current player when setting
*/ */
isFullscreen(isFS) { isFullscreen(isFS) {
if (isFS !== undefined) { if (isFS !== undefined) {
this.isFullscreen_ = !!isFS; this.isFullscreen_ = !!isFS;
return this; return;
} }
return !!this.isFullscreen_; return !!this.isFullscreen_;
} }
@ -1874,8 +1857,6 @@ class Player extends Component {
* Safari. * Safari.
* *
* @fires Player#fullscreenchange * @fires Player#fullscreenchange
* @return {Player}
* A reference to the current player
*/ */
requestFullscreen() { requestFullscreen() {
const fsApi = FullscreenApi; const fsApi = FullscreenApi;
@ -1921,17 +1902,12 @@ class Player extends Component {
*/ */
this.trigger('fullscreenchange'); this.trigger('fullscreenchange');
} }
return this;
} }
/** /**
* Return the video to its normal size after having been in full screen mode * Return the video to its normal size after having been in full screen mode
* *
* @fires Player#fullscreenchange * @fires Player#fullscreenchange
*
* @return {Player}
* A reference to the current player
*/ */
exitFullscreen() { exitFullscreen() {
const fsApi = FullscreenApi; const fsApi = FullscreenApi;
@ -1951,8 +1927,6 @@ class Player extends Component {
*/ */
this.trigger('fullscreenchange'); this.trigger('fullscreenchange');
} }
return this;
} }
/** /**
@ -2152,9 +2126,8 @@ class Player extends Component {
* @param {Tech~SourceObject|Tech~SourceObject[]} [source] * @param {Tech~SourceObject|Tech~SourceObject[]} [source]
* One SourceObject or an array of SourceObjects * One SourceObject or an array of SourceObjects
* *
* @return {string|Player} * @return {string}
* - The current video source when getting * The current video source when getting
* - The player when setting
*/ */
src(source) { src(source) {
if (source === undefined) { if (source === undefined) {
@ -2218,8 +2191,6 @@ class Player extends Component {
}, true); }, true);
} }
} }
return this;
} }
/** /**
@ -2257,26 +2228,18 @@ class Player extends Component {
/** /**
* Begin loading the src data. * Begin loading the src data.
*
* @return {Player}
* A reference to the player
*/ */
load() { load() {
this.techCall_('load'); this.techCall_('load');
return this;
} }
/** /**
* Reset the player. Loads the first tech in the techOrder, * Reset the player. Loads the first tech in the techOrder,
* and calls `reset` on the tech`. * and calls `reset` on the tech`.
*
* @return {Player}
* A reference to the player
*/ */
reset() { reset() {
this.loadTech_(toTitleCase(this.options_.techOrder[0]), null); this.loadTech_(toTitleCase(this.options_.techOrder[0]), null);
this.techCall_('reset'); this.techCall_('reset');
return this;
} }
/** /**
@ -2344,15 +2307,14 @@ class Player extends Component {
* - true means that we should preload * - true means that we should preload
* - false maens that we should not preload * - false maens that we should not preload
* *
* @return {string|Player} * @return {string}
* - the preload attribute value when getting * The preload attribute value when getting
* - the player when setting
*/ */
preload(value) { preload(value) {
if (value !== undefined) { if (value !== undefined) {
this.techCall_('setPreload', value); this.techCall_('setPreload', value);
this.options_.preload = value; this.options_.preload = value;
return this; return;
} }
return this.techGet_('preload'); return this.techGet_('preload');
} }
@ -2362,17 +2324,16 @@ class Player extends Component {
* *
* @param {boolean} [value] * @param {boolean} [value]
* - true means that we should autoplay * - true means that we should autoplay
* - false maens that we should not autoplay * - false means that we should not autoplay
* *
* @return {string|Player} * @return {string}
* - the current value of autoplay * The current value of autoplay when getting
* - the player when setting
*/ */
autoplay(value) { autoplay(value) {
if (value !== undefined) { if (value !== undefined) {
this.techCall_('setAutoplay', value); this.techCall_('setAutoplay', value);
this.options_.autoplay = value; this.options_.autoplay = value;
return this; return;
} }
return this.techGet_('autoplay', value); return this.techGet_('autoplay', value);
} }
@ -2384,15 +2345,14 @@ class Player extends Component {
* - true means that we should loop the video * - true means that we should loop the video
* - false means that we should not loop the video * - false means that we should not loop the video
* *
* @return {string|Player} * @return {string}
* - the current value of loop when getting * The current value of loop when getting
* - the player when setting
*/ */
loop(value) { loop(value) {
if (value !== undefined) { if (value !== undefined) {
this.techCall_('setLoop', value); this.techCall_('setLoop', value);
this.options_.loop = value; this.options_.loop = value;
return this; return;
} }
return this.techGet_('loop'); return this.techGet_('loop');
} }
@ -2405,9 +2365,8 @@ class Player extends Component {
* @param {string} [src] * @param {string} [src]
* Poster image source URL * Poster image source URL
* *
* @return {string|Player} * @return {string}
* - the current value of poster when getting * The current value of poster when getting
* - the player when setting
*/ */
poster(src) { poster(src) {
if (src === undefined) { if (src === undefined) {
@ -2434,8 +2393,6 @@ class Player extends Component {
* @type {EventTarget~Event} * @type {EventTarget~Event}
*/ */
this.trigger('posterchange'); this.trigger('posterchange');
return this;
} }
/** /**
@ -2468,9 +2425,8 @@ class Player extends Component {
* - true to turn controls on * - true to turn controls on
* - false to turn controls off * - false to turn controls off
* *
* @return {boolean|Player} * @return {boolean}
* - the current value of controls when getting * The current value of controls when getting
* - the player when setting
*/ */
controls(bool) { controls(bool) {
if (bool !== undefined) { if (bool !== undefined) {
@ -2510,7 +2466,7 @@ class Player extends Component {
} }
} }
} }
return this; return;
} }
return !!this.controls_; return !!this.controls_;
} }
@ -2529,9 +2485,8 @@ class Player extends Component {
* - true to turn native controls on * - true to turn native controls on
* - false to turn native controls off * - false to turn native controls off
* *
* @return {boolean|Player} * @return {boolean}
* - the current value of native controls when getting * The current value of native controls when getting
* - the player when setting
*/ */
usingNativeControls(bool) { usingNativeControls(bool) {
if (bool !== undefined) { if (bool !== undefined) {
@ -2562,7 +2517,7 @@ class Player extends Component {
this.trigger('usingcustomcontrols'); this.trigger('usingcustomcontrols');
} }
} }
return this; return;
} }
return !!this.usingNativeControls_; return !!this.usingNativeControls_;
} }
@ -2576,9 +2531,8 @@ class Player extends Component {
* A MediaError or a string/number to be turned * A MediaError or a string/number to be turned
* into a MediaError * into a MediaError
* *
* @return {MediaError|null|Player} * @return {MediaError|null}
* - The current MediaError when getting (or null) * The current MediaError when getting (or null)
* - The player when setting
*/ */
error(err) { error(err) {
if (err === undefined) { if (err === undefined) {
@ -2592,7 +2546,7 @@ class Player extends Component {
if (this.errorDisplay) { if (this.errorDisplay) {
this.errorDisplay.close(); this.errorDisplay.close();
} }
return this; return;
} }
this.error_ = new MediaError(err); this.error_ = new MediaError(err);
@ -2610,7 +2564,7 @@ class Player extends Component {
*/ */
this.trigger('error'); this.trigger('error');
return this; return;
} }
/** /**
@ -2632,9 +2586,9 @@ class Player extends Component {
* @param {boolean} [bool] * @param {boolean} [bool]
* - true if the user is active * - true if the user is active
* - false if the user is inactive * - false if the user is inactive
* @return {boolean|Player} *
* - the current value of userActive when getting * @return {boolean}
* - the player when setting * The current value of userActive when getting
*/ */
userActive(bool) { userActive(bool) {
if (bool !== undefined) { if (bool !== undefined) {
@ -2681,7 +2635,7 @@ class Player extends Component {
this.trigger('userinactive'); this.trigger('userinactive');
} }
} }
return this; return;
} }
return this.userActive_; return this.userActive_;
} }
@ -2782,14 +2736,13 @@ class Player extends Component {
* @param {number} [rate] * @param {number} [rate]
* New playback rate to set. * New playback rate to set.
* *
* @return {number|Player} * @return {number}
* - The current playback rate when getting or 1.0 * The current playback rate when getting or 1.0
* - the player when setting
*/ */
playbackRate(rate) { playbackRate(rate) {
if (rate !== undefined) { if (rate !== undefined) {
this.techCall_('setPlaybackRate', rate); this.techCall_('setPlaybackRate', rate);
return this; return;
} }
if (this.tech_ && this.tech_.featuresPlaybackRate) { if (this.tech_ && this.tech_.featuresPlaybackRate) {
@ -2805,14 +2758,13 @@ class Player extends Component {
* - true signals that this is an audio player * - true signals that this is an audio player
* - false signals that this is not an audio player * - false signals that this is not an audio player
* *
* @return {Player|boolean} * @return {boolean}
* - the current value of isAudio when getting * The current value of isAudio when getting
* - the player if setting
*/ */
isAudio(bool) { isAudio(bool) {
if (bool !== undefined) { if (bool !== undefined) {
this.isAudio_ = !!bool; this.isAudio_ = !!bool;
return this; return;
} }
return !!this.isAudio_; return !!this.isAudio_;
@ -3021,9 +2973,8 @@ class Player extends Component {
* @param {string} [code] * @param {string} [code]
* the language code to set the player to * the language code to set the player to
* *
* @return {string|Player} * @return {string}
* - The current language code when getting * The current language code when getting
* - A reference to the player when setting
*/ */
language(code) { language(code) {
if (code === undefined) { if (code === undefined) {
@ -3031,7 +2982,6 @@ class Player extends Component {
} }
this.language_ = String(code).toLowerCase(); this.language_ = String(code).toLowerCase();
return this;
} }
/** /**
@ -3098,7 +3048,8 @@ class Player extends Component {
this.removeChild(modal); this.removeChild(modal);
}); });
return modal.open(); modal.open();
return modal;
} }
/** /**

7
src/js/slider/slider.js
View File

@ -281,10 +281,9 @@ class Slider extends Component {
* - true if slider is vertical, * - true if slider is vertical,
* - false is horizontal * - false is horizontal
* *
* @return {boolean|Slider} * @return {boolean}
* - true if slider is vertical, and getting * - true if slider is vertical, and getting
* - false is horizontal, and getting * - false if the slider is horizontal, and getting
* - a reference to this object when setting
*/ */
vertical(bool) { vertical(bool) {
if (bool === undefined) { if (bool === undefined) {
@ -298,8 +297,6 @@ class Slider extends Component {
} else { } else {
this.addClass('vjs-slider-horizontal'); this.addClass('vjs-slider-horizontal');
} }
return this;
} }
} }

5
src/js/tech/tech.js
View File

@ -1118,9 +1118,6 @@ Tech.withSourceHandlers = function(_Tech) {
* *
* @param {Tech~SourceObject} source * @param {Tech~SourceObject} source
* A source object with src and type keys * A source object with src and type keys
*
* @return {Tech}
* Returns itself; this method is chainable
*/ */
_Tech.prototype.setSource = function(source) { _Tech.prototype.setSource = function(source) {
let sh = _Tech.selectSourceHandler(source, this.options_); let sh = _Tech.selectSourceHandler(source, this.options_);
@ -1145,8 +1142,6 @@ Tech.withSourceHandlers = function(_Tech) {
this.sourceHandler_ = sh.handleSource(source, this, this.options_); this.sourceHandler_ = sh.handleSource(source, this, this.options_);
this.on('dispose', this.disposeSourceHandler); this.on('dispose', this.disposeSourceHandler);
return this;
}; };
/** /**

4
test/unit/component.test.js
View File

@ -595,13 +595,13 @@ QUnit.test('dimension() should treat NaN and null as zero', function(assert) {
newWidth = comp.dimension('width', null); newWidth = comp.dimension('width', null);
assert.notEqual(newWidth, width, 'new width and old width are not the same'); assert.notEqual(newWidth, width, 'new width and old width are not the same');
assert.equal(newWidth, comp, 'we set a value, so, return value is component'); assert.equal(newWidth, undefined, 'we set a value, so, return value is undefined');
assert.equal(comp.width(), 0, 'the new width is zero'); assert.equal(comp.width(), 0, 'the new width is zero');
const newHeight = comp.dimension('height', NaN); const newHeight = comp.dimension('height', NaN);
assert.notEqual(newHeight, height, 'new height and old height are not the same'); assert.notEqual(newHeight, height, 'new height and old height are not the same');
assert.equal(newHeight, comp, 'we set a value, so, return value is component'); assert.equal(newHeight, undefined, 'we set a value, so, return value is undefined');
assert.equal(comp.height(), 0, 'the new height is zero'); assert.equal(comp.height(), 0, 'the new height is zero');
comp.width(width); comp.width(width);

93
test/unit/modal-dialog.test.js
View File

@ -87,15 +87,6 @@ QUnit.test('should create a close button by default', function(assert) {
assert.strictEqual(btn.el().parentNode, this.el, 'close button is a child of el'); assert.strictEqual(btn.el().parentNode, this.el, 'close button is a child of el');
}); });
QUnit.test('returns `this` for expected methods', function(assert) {
const methods = ['close', 'empty', 'fill', 'fillWith', 'open'];
assert.expect(methods.length);
methods.forEach(function(method) {
assert.strictEqual(this[method](), this, '`' + method + '()` returns `this`');
}, this.modal);
});
QUnit.test('open() triggers events', function(assert) { QUnit.test('open() triggers events', function(assert) {
const modal = this.modal; const modal = this.modal;
const beforeModalOpenSpy = sinon.spy(function() { const beforeModalOpenSpy = sinon.spy(function() {
@ -108,10 +99,9 @@ QUnit.test('open() triggers events', function(assert) {
assert.expect(4); assert.expect(4);
modal. modal.on('beforemodalopen', beforeModalOpenSpy);
on('beforemodalopen', beforeModalOpenSpy). modal.on('modalopen', modalOpenSpy);
on('modalopen', modalOpenSpy). modal.open();
open();
assert.strictEqual(beforeModalOpenSpy.callCount, 1, 'beforemodalopen spy was called'); assert.strictEqual(beforeModalOpenSpy.callCount, 1, 'beforemodalopen spy was called');
assert.strictEqual(modalOpenSpy.callCount, 1, 'modalopen spy was called'); assert.strictEqual(modalOpenSpy.callCount, 1, 'modalopen spy was called');
@ -127,7 +117,9 @@ QUnit.test('open() removes "vjs-hidden" class', function(assert) {
QUnit.test('open() cannot be called on an opened modal', function(assert) { QUnit.test('open() cannot be called on an opened modal', function(assert) {
const spy = sinon.spy(); const spy = sinon.spy();
this.modal.on('modalopen', spy).open().open(); this.modal.on('modalopen', spy);
this.modal.open();
this.modal.open();
assert.expect(1); assert.expect(1);
assert.strictEqual(spy.callCount, 1, 'modal was only opened once'); assert.strictEqual(spy.callCount, 1, 'modal was only opened once');
@ -145,11 +137,10 @@ QUnit.test('close() triggers events', function(assert) {
assert.expect(4); assert.expect(4);
modal. modal.on('beforemodalclose', beforeModalCloseSpy);
on('beforemodalclose', beforeModalCloseSpy). modal.on('modalclose', modalCloseSpy);
on('modalclose', modalCloseSpy). modal.open();
open(). modal.close();
close();
assert.strictEqual(beforeModalCloseSpy.callCount, 1, 'beforemodalclose spy was called'); assert.strictEqual(beforeModalCloseSpy.callCount, 1, 'beforemodalclose spy was called');
assert.strictEqual(modalCloseSpy.callCount, 1, 'modalclose spy was called'); assert.strictEqual(modalCloseSpy.callCount, 1, 'modalclose spy was called');
@ -157,18 +148,21 @@ QUnit.test('close() triggers events', function(assert) {
QUnit.test('close() adds the "vjs-hidden" class', function(assert) { QUnit.test('close() adds the "vjs-hidden" class', function(assert) {
assert.expect(1); assert.expect(1);
this.modal.open().close(); this.modal.open();
this.modal.close();
assert.ok(this.modal.hasClass('vjs-hidden'), 'modal is hidden upon close'); assert.ok(this.modal.hasClass('vjs-hidden'), 'modal is hidden upon close');
}); });
QUnit.test('pressing ESC triggers close(), but only when the modal is opened', function(assert) { QUnit.test('pressing ESC triggers close(), but only when the modal is opened', function(assert) {
const spy = sinon.spy(); const spy = sinon.spy();
this.modal.on('modalclose', spy).handleKeyPress({which: ESC}); this.modal.on('modalclose', spy);
this.modal.handleKeyPress({which: ESC});
assert.expect(2); assert.expect(2);
assert.strictEqual(spy.callCount, 0, 'ESC did not close the closed modal'); assert.strictEqual(spy.callCount, 0, 'ESC did not close the closed modal');
this.modal.open().handleKeyPress({which: ESC}); this.modal.open();
this.modal.handleKeyPress({which: ESC});
assert.strictEqual(spy.callCount, 1, 'ESC closed the now-opened modal'); assert.strictEqual(spy.callCount, 1, 'ESC closed the now-opened modal');
}); });
@ -176,7 +170,9 @@ QUnit.test('close() cannot be called on a closed modal', function(assert) {
const spy = sinon.spy(); const spy = sinon.spy();
this.modal.on('modalclose', spy); this.modal.on('modalclose', spy);
this.modal.open().close().close(); this.modal.open();
this.modal.close();
this.modal.close();
assert.expect(1); assert.expect(1);
assert.strictEqual(spy.callCount, 1, 'modal was only closed once'); assert.strictEqual(spy.callCount, 1, 'modal was only closed once');
@ -227,11 +223,10 @@ QUnit.test('opened()', function(assert) {
this.modal.open(); this.modal.open();
assert.strictEqual(this.modal.opened(), true, 'the modal is open'); assert.strictEqual(this.modal.opened(), true, 'the modal is open');
this.modal. this.modal.close();
close(). this.modal.on('modalopen', openSpy);
on('modalopen', openSpy). this.modal.on('modalclose', closeSpy);
on('modalclose', closeSpy). this.modal.opened(true);
opened(true);
this.modal.opened(true); this.modal.opened(true);
this.modal.opened(false); this.modal.opened(false);
@ -260,10 +255,9 @@ QUnit.test('fillWith()', function(assert) {
contentEl.appendChild(el); contentEl.appendChild(el);
}); });
this.modal. this.modal.on('beforemodalfill', beforeFillSpy);
on('beforemodalfill', beforeFillSpy). this.modal.on('modalfill', fillSpy);
on('modalfill', fillSpy). this.modal.fillWith(children);
fillWith(children);
assert.expect(5 + children.length); assert.expect(5 + children.length);
assert.strictEqual(contentEl.children.length, children.length, 'has the right number of children'); assert.strictEqual(contentEl.children.length, children.length, 'has the right number of children');
@ -282,11 +276,10 @@ QUnit.test('empty()', function(assert) {
const beforeEmptySpy = sinon.spy(); const beforeEmptySpy = sinon.spy();
const emptySpy = sinon.spy(); const emptySpy = sinon.spy();
this.modal. this.modal.fillWith([Dom.createEl(), Dom.createEl()]);
fillWith([Dom.createEl(), Dom.createEl()]). this.modal.on('beforemodalempty', beforeEmptySpy);
on('beforemodalempty', beforeEmptySpy). this.modal.on('modalempty', emptySpy);
on('modalempty', emptySpy). this.modal.empty();
empty();
assert.expect(5); assert.expect(5);
assert.strictEqual(this.modal.contentEl().children.length, 0, 'removed all `contentEl()` children'); assert.strictEqual(this.modal.contentEl().children.length, 0, 'removed all `contentEl()` children');
@ -302,7 +295,8 @@ QUnit.test('closeable()', function(assert) {
assert.expect(8); assert.expect(8);
assert.strictEqual(this.modal.closeable(), true, 'the modal is closed'); assert.strictEqual(this.modal.closeable(), true, 'the modal is closed');
this.modal.open().closeable(false); this.modal.open();
this.modal.closeable(false);
assert.notOk(this.modal.getChild('closeButton'), 'the close button is no longer a child of the modal'); assert.notOk(this.modal.getChild('closeButton'), 'the close button is no longer a child of the modal');
assert.notOk(initialCloseButton.el(), 'the initial close button was disposed'); assert.notOk(initialCloseButton.el(), 'the initial close button was disposed');
@ -312,13 +306,15 @@ QUnit.test('closeable()', function(assert) {
this.modal.close(); this.modal.close();
assert.notOk(this.modal.opened(), 'the modal was closed programmatically'); assert.notOk(this.modal.opened(), 'the modal was closed programmatically');
this.modal.open().closeable(true); this.modal.open();
this.modal.closeable(true);
assert.ok(this.modal.getChild('closeButton'), 'a new close button was created'); assert.ok(this.modal.getChild('closeButton'), 'a new close button was created');
this.modal.getChild('closeButton').trigger('click'); this.modal.getChild('closeButton').trigger('click');
assert.notOk(this.modal.opened(), 'the modal was closed by the new close button'); assert.notOk(this.modal.opened(), 'the modal was closed by the new close button');
this.modal.open().handleKeyPress({which: ESC}); this.modal.open();
this.modal.handleKeyPress({which: ESC});
assert.notOk(this.modal.opened(), 'the modal was closed by the ESC key'); assert.notOk(this.modal.opened(), 'the modal was closed by the ESC key');
}); });
@ -331,7 +327,9 @@ QUnit.test('"content" option (fills on first open() invocation)', function(asser
const spy = sinon.spy(); const spy = sinon.spy();
modal.on('modalfill', spy); modal.on('modalfill', spy);
modal.open().close().open(); modal.open();
modal.close();
modal.open();
assert.expect(3); assert.expect(3);
assert.strictEqual(modal.content(), modal.options_.content, 'has the expected content'); assert.strictEqual(modal.content(), modal.options_.content, 'has the expected content');
@ -347,8 +345,10 @@ QUnit.test('"temporary" option', function(assert) {
temp.on('dispose', tempSpy); temp.on('dispose', tempSpy);
perm.on('dispose', permSpy); perm.on('dispose', permSpy);
temp.open().close(); temp.open();
perm.open().close(); temp.close();
perm.open();
perm.close();
assert.expect(2); assert.expect(2);
assert.strictEqual(tempSpy.callCount, 1, 'temporary modals are disposed'); assert.strictEqual(tempSpy.callCount, 1, 'temporary modals are disposed');
@ -365,7 +365,9 @@ QUnit.test('"fillAlways" option', function(assert) {
const spy = sinon.spy(); const spy = sinon.spy();
modal.on('modalfill', spy); modal.on('modalfill', spy);
modal.open().close().open(); modal.open();
modal.close();
modal.open();
assert.expect(1); assert.expect(1);
assert.strictEqual(spy.callCount, 2, 'the modal was filled on each open call'); assert.strictEqual(spy.callCount, 2, 'the modal was filled on each open call');
@ -393,6 +395,7 @@ QUnit.test('"uncloseable" option', function(assert) {
assert.strictEqual(modal.closeable(), false, 'the modal is uncloseable'); assert.strictEqual(modal.closeable(), false, 'the modal is uncloseable');
assert.notOk(modal.getChild('closeButton'), 'the close button is not present'); assert.notOk(modal.getChild('closeButton'), 'the close button is not present');
modal.open().handleKeyPress({which: ESC}); modal.open();
modal.handleKeyPress({which: ESC});
assert.strictEqual(spy.callCount, 0, 'ESC did not close the modal'); assert.strictEqual(spy.callCount, 0, 'ESC did not close the modal');
}); });