diff --git a/.travis.yml b/.travis.yml index f88fb55fbb..8532b27da2 100644 --- a/.travis.yml +++ b/.travis.yml @@ -1,6 +1,6 @@ language: node_js node_js: - - 0.10 + - "iojs" before_script: - if [ "${TRAVIS_PULL_REQUEST}" = "false" ]; then curl https://gist.githubusercontent.com/santiycr/5139565/raw/sauce_connect_setup.sh | bash; fi before_install: diff --git a/CHANGELOG.md b/CHANGELOG.md index 6c5350f129..255ed31ca1 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -10,6 +10,7 @@ CHANGELOG * @dn5 Added new translations (Bosnian, Serbian, Croatian) ([view](https://github.com/videojs/video.js/pull/1897)) * @mmcc (and others) converted the whole project to use ES6, Babel and Browserify ([view](https://github.com/videojs/video.js/pull/1976)) * @heff converted all classes to use ES6 classes ([view](https://github.com/videojs/video.js/pull/1993)) +* @mmcc added ES6 default args and template strings ([view](https://github.com/videojs/video.js/pull/2015)) -------------------- diff --git a/src/js/big-play-button.js b/src/js/big-play-button.js index 982c82751d..2bd1e97ce4 100644 --- a/src/js/big-play-button.js +++ b/src/js/big-play-button.js @@ -5,7 +5,7 @@ import Button from './button'; /** * Initial play button. Shows before the video has played. The hiding of the * big play button is done via CSS and player states. - * @param {vjs.Player|Object} player + * @param {Player|Object} player * @param {Object=} options * @class * @constructor diff --git a/src/js/button.js b/src/js/button.js index dda2f7fd92..5549470883 100644 --- a/src/js/button.js +++ b/src/js/button.js @@ -7,7 +7,7 @@ import document from 'global/document'; ================================================================================ */ /** * Base class for all buttons - * @param {vjs.Player|Object} player + * @param {Player|Object} player * @param {Object=} options * @class * @constructor @@ -56,7 +56,7 @@ class Button extends Component { buildCSSClass() { // TODO: Change vjs-control to vjs-button? - return 'vjs-control ' + super.buildCSSClass(); + return `vjs-control ${super.buildCSSClass()}`; } // Click - Override with specific functionality for button diff --git a/src/js/component.js b/src/js/component.js index 2694a2fc64..edaee5b149 100644 --- a/src/js/component.js +++ b/src/js/component.js @@ -35,7 +35,6 @@ import window from 'global/window'; * @param {Object=} options * @class * @constructor - * @extends vjs.CoreObject */ class Component { @@ -60,7 +59,8 @@ class Component { // If there was no ID from the options, generate one if (!this.id_) { // Don't require the player ID function in the case of mock players - this.id_ = ((player.id && player.id()) || 'no_player') + '_component_' + Lib.guid++; + let id = player.id && player.id() || 'no_player'; + this.id_ = `${id}_component_${Lib.guid++}`; } this.name_ = options['name'] || null; @@ -131,7 +131,7 @@ class Component { /** * Return the component's player * - * @return {vjs.Player} + * @return {Player} */ player() { return this.player_; @@ -141,7 +141,7 @@ class Component { * Deep merge of options objects * * Whenever a property is an object on both options objects - * the two properties will be merged using vjs.obj.deepMerge. + * the two properties will be merged using Lib.obj.deepMerge. * * This is used for merging options for child components. We * want it to be easy to override individual options on a child @@ -207,11 +207,13 @@ class Component { } localize(string){ - var lang = this.player_.language(), - languages = this.player_.languages(); + let lang = this.player_.language(); + let languages = this.player_.languages(); + if (languages && languages[lang] && languages[lang][string]) { return languages[lang][string]; } + return string; } @@ -261,7 +263,7 @@ class Component { /** * Returns a child component with the provided ID * - * @return {vjs.Component} + * @return {Component} */ getChildById(id){ return this.childIndex_[id]; @@ -270,7 +272,7 @@ class Component { /** * Returns a child component with the provided name * - * @return {vjs.Component} + * @return {Component} */ getChild(name){ return this.childNameIndex_[name]; @@ -299,21 +301,27 @@ class Component { * } * }); * - * @param {String|vjs.Component} child The class name or instance of a child to add + * @param {String|Component} child The class name or instance of a child to add * @param {Object=} options Options, including options to be passed to children of the child. - * @return {vjs.Component} The child component (created by this process if a string was used) + * @return {Component} The child component (created by this process if a string was used) * @suppress {accessControls|checkRegExp|checkTypes|checkVars|const|constantProperty|deprecated|duplicate|es5Strict|fileoverviewTags|globalThis|invalidCasts|missingProperties|nonStandardJsDocs|strictModuleDepCheck|undefinedNames|undefinedVars|unknownDefines|uselessCode|visibility} */ - addChild(child, options){ + addChild(child, options={}){ let component; let componentName; // If child is a string, create nt with options if (typeof child === 'string') { - let componentName = child; + componentName = child; + + // Options can also be specified as a boolean, so convert to an empty object if false. + if (!options) { + options = {}; + } - // Make sure options is at least an empty object to protect against errors - if (!options || options === true) { + // Same as above, but true is deprecated so show a warning. + if (options === true) { + Lib.log.warn('Initializing a child component with `true` is deprecated. Children should be defined in an array when possible, but if necessary use an object instead of `true`.'); options = {}; } @@ -326,8 +334,6 @@ class Component { // Create a new object & element for this controls set // If there's no .player_, this is a player - // Closure Compiler throws an 'incomplete alias' warning if we use the vjs variable directly. - // Every class should be exported, so this should never be a problem here. let componentClass = Component.getComponent(componentClassName); component = new componentClass(this.player_ || this, options); @@ -365,7 +371,7 @@ class Component { * Remove a child component from this component's list of children, and the * child component's element from this component's element * - * @param {vjs.Component} component Component to remove + * @param {Component} component Component to remove */ removeChild(component){ if (typeof component === 'string') { @@ -443,7 +449,7 @@ class Component { } // Allow for disabling default components - // e.g. vjs.options['children']['posterImage'] = false + // e.g. options['children']['posterImage'] = false if (opts === false) return; // Create and add the child component. @@ -505,36 +511,34 @@ class Component { * myComponent.on(otherElement, 'eventName', myFunc); * myComponent.on(otherComponent, 'eventName', myFunc); * - * The benefit of using this over `vjs.on(otherElement, 'eventName', myFunc)` + * The benefit of using this over `VjsEvents.on(otherElement, 'eventName', myFunc)` * and `otherComponent.on('eventName', myFunc)` is that this way the listeners * will be automatically cleaned up when either component is disposed. * It will also bind myComponent as the context of myFunc. * * **NOTE**: When using this on elements in the page other than window * and document (both permanent), if you remove the element from the DOM - * you need to call `vjs.trigger(el, 'dispose')` on it to clean up + * you need to call `myComponent.trigger(el, 'dispose')` on it to clean up * references to it and allow the browser to garbage collect it. * - * @param {String|vjs.Component} first The event type or other component + * @param {String|Component} first The event type or other component * @param {Function|String} second The event handler or event type * @param {Function} third The event handler - * @return {vjs.Component} self + * @return {Component} self */ on(first, second, third){ - var target, type, fn, removeOnDispose, cleanRemover, thisComponent; - if (typeof first === 'string' || Lib.obj.isArray(first)) { Events.on(this.el_, first, Lib.bind(this, second)); // Targeting another component or element } else { - target = first; - type = second; - fn = Lib.bind(this, third); - thisComponent = this; + const target = first; + const type = second; + const fn = Lib.bind(this, third); + const thisComponent = this; // When this component is disposed, remove the listener from the other component - removeOnDispose = function(){ + const removeOnDispose = function(){ thisComponent.off(target, type, fn); }; // Use the same function ID so we can remove it later it using the ID @@ -545,7 +549,7 @@ class Component { // If the other component is disposed first we need to clean the reference // to the other component in this component's removeOnDispose listener // Otherwise we create a memory leak. - cleanRemover = function(){ + const cleanRemover = function(){ thisComponent.off('dispose', removeOnDispose); }; // Add the same function ID so we can easily remove it later @@ -558,7 +562,7 @@ class Component { Events.on(target, 'dispose', cleanRemover); // Should be a component - // Not using `instanceof vjs.Component` because it makes mock players difficult + // Not using `instanceof Component` because it makes mock players difficult } else if (typeof first.on === 'function') { // Add the listener to the other component target.on(type, fn); @@ -584,21 +588,19 @@ class Component { * myComponent.off(otherElement, 'eventType', myFunc); * myComponent.off(otherComponent, 'eventType', myFunc); * - * @param {String=|vjs.Component} first The event type or other component + * @param {String=|Component} first The event type or other component * @param {Function=|String} second The listener function or event type * @param {Function=} third The listener for other component - * @return {vjs.Component} + * @return {Component} */ off(first, second, third){ - var target, otherComponent, type, fn, otherEl; - if (!first || typeof first === 'string' || Lib.obj.isArray(first)) { Events.off(this.el_, first, second); } else { - target = first; - type = second; + const target = first; + const type = second; // Ensure there's at least a guid, even if the function hasn't been used - fn = Lib.bind(this, third); + const fn = Lib.bind(this, third); // Remove the dispose listener on this component, // which was given the same guid as the event listener @@ -629,23 +631,21 @@ class Component { * myComponent.one(otherElement, 'eventName', myFunc); * myComponent.one(otherComponent, 'eventName', myFunc); * - * @param {String|vjs.Component} first The event type or other component + * @param {String|Component} first The event type or other component * @param {Function|String} second The listener function or event type * @param {Function=} third The listener function for other component - * @return {vjs.Component} + * @return {Component} */ one(first, second, third) { - var target, type, fn, thisComponent, newFunc; - if (typeof first === 'string' || Lib.obj.isArray(first)) { Events.one(this.el_, first, Lib.bind(this, second)); } else { - target = first; - type = second; - fn = Lib.bind(this, third); - thisComponent = this; + const target = first; + const type = second; + const fn = Lib.bind(this, third); + const thisComponent = this; - newFunc = function(){ + const newFunc = function(){ thisComponent.off(target, type, newFunc); fn.apply(this, arguments); }; @@ -665,7 +665,7 @@ class Component { * myComponent.trigger({'type':'eventName'}); * * @param {Event|Object|String} event A string (the type) or an event object with a type attribute - * @return {vjs.Component} self + * @return {Component} self */ trigger(event){ Events.trigger(this.el_, event); @@ -679,7 +679,7 @@ class Component { * it will trigger the function immediately. * * @param {Function} fn Ready listener - * @return {vjs.Component} + * @return {Component} */ ready(fn){ if (fn) { @@ -696,7 +696,7 @@ class Component { /** * Trigger the ready listeners * - * @return {vjs.Component} + * @return {Component} */ triggerReady(){ this.isReady_ = true; @@ -721,7 +721,7 @@ class Component { * Check if a component's element has a CSS class name * * @param {String} classToCheck Classname to check - * @return {vjs.Component} + * @return {Component} */ hasClass(classToCheck){ return Lib.hasClass(this.el_, classToCheck); @@ -731,7 +731,7 @@ class Component { * Add a CSS class name to the component's element * * @param {String} classToAdd Classname to add - * @return {vjs.Component} + * @return {Component} */ addClass(classToAdd){ Lib.addClass(this.el_, classToAdd); @@ -742,7 +742,7 @@ class Component { * Remove a CSS class name from the component's element * * @param {String} classToRemove Classname to remove - * @return {vjs.Component} + * @return {Component} */ removeClass(classToRemove){ Lib.removeClass(this.el_, classToRemove); @@ -752,7 +752,7 @@ class Component { /** * Show the component element if hidden * - * @return {vjs.Component} + * @return {Component} */ show(){ this.removeClass('vjs-hidden'); @@ -762,7 +762,7 @@ class Component { /** * Hide the component element if currently showing * - * @return {vjs.Component} + * @return {Component} */ hide(){ this.addClass('vjs-hidden'); @@ -773,7 +773,7 @@ class Component { * Lock an item in its visible state * To be used with fadeIn/fadeOut. * - * @return {vjs.Component} + * @return {Component} * @private */ lockShowing(){ @@ -785,7 +785,7 @@ class Component { * Unlock an item to be hidden * To be used with fadeIn/fadeOut. * - * @return {vjs.Component} + * @return {Component} * @private */ unlockShowing(){ @@ -803,7 +803,7 @@ class Component { * * @param {Number|String=} num Optional width number * @param {Boolean} skipListeners Skip the 'resize' event trigger - * @return {vjs.Component} This component, when setting the width + * @return {Component} This component, when setting the width * @return {Number|String} The width, when getting */ width(num, skipListeners){ @@ -820,7 +820,7 @@ class Component { * * @param {Number|String=} num New component height * @param {Boolean=} skipListeners Skip the resize event trigger - * @return {vjs.Component} This component, when setting the height + * @return {Component} This component, when setting the height * @return {Number|String} The height, when getting */ height(num, skipListeners){ @@ -832,7 +832,7 @@ class Component { * * @param {Number|String} width * @param {Number|String} height - * @return {vjs.Component} The component + * @return {Component} The component */ dimensions(width, height){ // Skip resize listeners on width for optimization @@ -853,7 +853,7 @@ class Component { * @param {String} widthOrHeight 'width' or 'height' * @param {Number|String=} num New dimension * @param {Boolean=} skipListeners Skip resize event trigger - * @return {vjs.Component} The component if a dimension was set + * @return {Component} The component if a dimension was set * @return {Number|String} The dimension if nothing was set * @private */ @@ -902,7 +902,7 @@ class Component { // Only difference is if the element is hidden it will return // the percent value (e.g. '100%'') // instead of zero like offsetWidth returns. - // var val = vjs.getComputedStyleValue(this.el_, widthOrHeight); + // var val = Lib.getComputedStyleValue(this.el_, widthOrHeight); // var pxIndex = val.indexOf('px'); // if (pxIndex !== -1) { @@ -924,20 +924,18 @@ class Component { * @private */ emitTapEvents(){ - var touchStart, firstTouch, touchTime, couldBeTap, noTap, - xdiff, ydiff, touchDistance, tapMovementThreshold, touchTimeThreshold; - // Track the start time so we can determine how long the touch lasted - touchStart = 0; - firstTouch = null; + let touchStart = 0; + let firstTouch = null; // Maximum movement allowed during a touch event to still be considered a tap // Other popular libs use anywhere from 2 (hammer.js) to 15, so 10 seems like a nice, round number. - tapMovementThreshold = 10; + const tapMovementThreshold = 10; // The maximum length a touch can be while still being considered a tap - touchTimeThreshold = 200; + const touchTimeThreshold = 200; + let couldBeTap; this.on('touchstart', function(event) { // If more than one finger, don't consider treating this as a click if (event.touches.length === 1) { @@ -956,16 +954,16 @@ class Component { } else if (firstTouch) { // Some devices will throw touchmoves for all but the slightest of taps. // So, if we moved only a small distance, this could still be a tap - xdiff = event.touches[0].pageX - firstTouch.pageX; - ydiff = event.touches[0].pageY - firstTouch.pageY; - touchDistance = Math.sqrt(xdiff * xdiff + ydiff * ydiff); + const xdiff = event.touches[0].pageX - firstTouch.pageX; + const ydiff = event.touches[0].pageY - firstTouch.pageY; + const touchDistance = Math.sqrt(xdiff * xdiff + ydiff * ydiff); if (touchDistance > tapMovementThreshold) { couldBeTap = false; } } }); - noTap = function(){ + const noTap = function(){ couldBeTap = false; }; // TODO: Listen to the original target. http://youtu.be/DujfpXOKUp8?t=13m8s @@ -979,14 +977,14 @@ class Component { // Proceed only if the touchmove/leave/cancel event didn't happen if (couldBeTap === true) { // Measure how long the touch lasted - touchTime = new Date().getTime() - touchStart; + const touchTime = new Date().getTime() - touchStart; // Make sure the touch was less than the threshold to be considered a tap if (touchTime < touchTimeThreshold) { event.preventDefault(); // Don't let browser turn this into a click this.trigger('tap'); // It may be good to copy the touchend event object and change the // type to tap, if the other event properties aren't exact after - // vjs.fixEvent runs (e.g. event.target) + // Lib.fixEvent runs (e.g. event.target) } } }); @@ -1016,16 +1014,15 @@ class Component { * want touch events to act differently. */ enableTouchActivity() { - var report, touchHolding, touchEnd; - // Don't continue if the root player doesn't support reporting user activity if (!this.player().reportUserActivity) { return; } // listener for reporting that the user is active - report = Lib.bind(this.player(), this.player().reportUserActivity); + const report = Lib.bind(this.player(), this.player().reportUserActivity); + let touchHolding; this.on('touchstart', function() { report(); // For as long as the they are touching the device or have their mouse down, @@ -1036,7 +1033,7 @@ class Component { touchHolding = this.setInterval(report, 250); }); - touchEnd = function(event) { + const touchEnd = function(event) { report(); // stop the interval that maintains activity if the touch is holding this.clearInterval(touchHolding); @@ -1063,7 +1060,7 @@ class Component { this.clearTimeout(timeoutId); }; - disposeFn.guid = 'vjs-timeout-'+ timeoutId; + disposeFn.guid = `vjs-timeout-${timeoutId}`; this.on('dispose', disposeFn); @@ -1080,7 +1077,7 @@ class Component { clearTimeout(timeoutId); var disposeFn = function(){}; - disposeFn.guid = 'vjs-timeout-'+ timeoutId; + disposeFn.guid = `vjs-timeout-${timeoutId}`; this.off('dispose', disposeFn); @@ -1102,7 +1099,7 @@ class Component { this.clearInterval(intervalId); }; - disposeFn.guid = 'vjs-interval-'+ intervalId; + disposeFn.guid = `vjs-interval-${intervalId}`; this.on('dispose', disposeFn); @@ -1118,7 +1115,7 @@ class Component { clearInterval(intervalId); var disposeFn = function(){}; - disposeFn.guid = 'vjs-interval-'+ intervalId; + disposeFn.guid = `vjs-interval-${intervalId}`; this.off('dispose', disposeFn); @@ -1140,7 +1137,7 @@ class Component { } if (window && window.videojs && window.videojs[name]) { - Lib.log.warn('The '+name+' component was added to the videojs object when it should be registered using videojs.registerComponent(name, component)'); + Lib.log.warn(`The ${name} component was added to the videojs object when it should be registered using videojs.registerComponent(name, component)`); return window.videojs[name]; } } diff --git a/src/js/control-bar/control-bar.js b/src/js/control-bar/control-bar.js index 80f41f1ff0..e7a59a7002 100644 --- a/src/js/control-bar/control-bar.js +++ b/src/js/control-bar/control-bar.js @@ -3,10 +3,10 @@ import * as Lib from '../lib.js'; // Required children import PlayToggle from './play-toggle.js'; -import CurrentTimeDisplay from './current-time-display.js'; -import DurationDisplay from './duration-display.js'; -import TimeDivider from './time-divider.js'; -import RemainingTimeDisplay from './remaining-time-display.js'; +import CurrentTimeDisplay from './time-controls/current-time-display.js'; +import DurationDisplay from './time-controls/duration-display.js'; +import TimeDivider from './time-controls/time-divider.js'; +import RemainingTimeDisplay from './time-controls/remaining-time-display.js'; import LiveDisplay from './live-display.js'; import ProgressControl from './progress-control/progress-control.js'; import FullscreenToggle from './fullscreen-toggle.js'; @@ -20,11 +20,11 @@ import PlaybackRateMenuButton from './playback-rate-menu/playback-rate-menu-butt /** * Container of main controls - * @param {vjs.Player|Object} player + * @param {Player|Object} player * @param {Object=} options * @class * @constructor - * @extends vjs.Component + * @extends Component */ class ControlBar extends Component { createEl() { @@ -56,4 +56,4 @@ ControlBar.prototype.options_ = { }; Component.registerComponent('ControlBar', ControlBar); -export default ControlBar; \ No newline at end of file +export default ControlBar; diff --git a/src/js/control-bar/fullscreen-toggle.js b/src/js/control-bar/fullscreen-toggle.js index 6a63276fa8..80d8bec2b5 100644 --- a/src/js/control-bar/fullscreen-toggle.js +++ b/src/js/control-bar/fullscreen-toggle.js @@ -2,7 +2,7 @@ import Button from '../button'; /** * Toggle fullscreen video - * @param {vjs.Player|Object} player + * @param {Player|Object} player * @param {Object=} options * @class * @extends vjs.Button @@ -10,7 +10,7 @@ import Button from '../button'; class FullscreenToggle extends Button { buildCSSClass() { - return 'vjs-fullscreen-control ' + super.buildCSSClass(); + return `vjs-fullscreen-control ${super.buildCSSClass()}`; } onClick() { diff --git a/src/js/control-bar/live-display.js b/src/js/control-bar/live-display.js index 46a85ea624..cdebc0dc6f 100644 --- a/src/js/control-bar/live-display.js +++ b/src/js/control-bar/live-display.js @@ -4,7 +4,7 @@ import * as Lib from '../lib'; /** * Displays the live indicator * TODO - Future make it click to snap to live - * @param {vjs.Player|Object} player + * @param {Player|Object} player * @param {Object=} options * @constructor */ @@ -17,7 +17,7 @@ class LiveDisplay extends Component { this.contentEl_ = Lib.createEl('div', { className: 'vjs-live-display', - innerHTML: '' + this.localize('Stream Type') + '' + this.localize('LIVE'), + innerHTML: `${this.localize('Stream Type')}${this.localize('LIVE')}`, 'aria-live': 'off' }); diff --git a/src/js/control-bar/mute-toggle.js b/src/js/control-bar/mute-toggle.js index b49dbb91f0..6f4db29651 100644 --- a/src/js/control-bar/mute-toggle.js +++ b/src/js/control-bar/mute-toggle.js @@ -5,7 +5,7 @@ import * as Lib from '../lib'; /** * A button component for muting the audio * - * @param {vjs.Player|Object} player + * @param {Player|Object} player * @param {Object=} options * @constructor */ @@ -33,7 +33,7 @@ class MuteToggle extends Button { createEl() { return super.createEl('div', { className: 'vjs-mute-control vjs-control', - innerHTML: '
' + this.localize('Mute') + '
' + innerHTML: `
${this.localize('Mute')}
` }); } @@ -64,9 +64,9 @@ class MuteToggle extends Button { /* TODO improve muted icon classes */ for (var i = 0; i < 4; i++) { - Lib.removeClass(this.el_, 'vjs-vol-'+i); + Lib.removeClass(this.el_, `vjs-vol-${i}`); } - Lib.addClass(this.el_, 'vjs-vol-'+level); + Lib.addClass(this.el_, `vjs-vol-${level}`); } } diff --git a/src/js/control-bar/play-toggle.js b/src/js/control-bar/play-toggle.js index 796c123918..9b8509f3f0 100644 --- a/src/js/control-bar/play-toggle.js +++ b/src/js/control-bar/play-toggle.js @@ -3,7 +3,7 @@ import * as Lib from '../lib'; /** * Button to toggle between play and pause - * @param {vjs.Player|Object} player + * @param {Player|Object} player * @param {Object=} options * @class * @constructor @@ -18,7 +18,7 @@ class PlayToggle extends Button { } buildCSSClass() { - return 'vjs-play-control ' + super.buildCSSClass(); + return `vjs-play-control ${super.buildCSSClass()}`; } // OnClick - Toggle between play and pause diff --git a/src/js/control-bar/playback-rate-menu/playback-rate-menu-button.js b/src/js/control-bar/playback-rate-menu/playback-rate-menu-button.js index 3802e91494..6831054db5 100644 --- a/src/js/control-bar/playback-rate-menu/playback-rate-menu-button.js +++ b/src/js/control-bar/playback-rate-menu/playback-rate-menu-button.js @@ -6,7 +6,7 @@ import * as Lib from '../../lib.js'; /** * The component for controlling the playback rate * - * @param {vjs.Player|Object} player + * @param {Player|Object} player * @param {Object=} options * @constructor */ diff --git a/src/js/control-bar/progress-control/load-progress-bar.js b/src/js/control-bar/progress-control/load-progress-bar.js index 589c2003e5..48298f519a 100644 --- a/src/js/control-bar/progress-control/load-progress-bar.js +++ b/src/js/control-bar/progress-control/load-progress-bar.js @@ -4,7 +4,7 @@ import * as Lib from '../../lib.js'; /** * Shows load progress * - * @param {vjs.Player|Object} player + * @param {Player|Object} player * @param {Object=} options * @constructor */ @@ -18,7 +18,7 @@ class LoadProgressBar extends Component { createEl() { return super.createEl('div', { className: 'vjs-load-progress', - innerHTML: '' + this.localize('Loaded') + ': 0%' + innerHTML: `${this.localize('Loaded')}: 0%` }); } @@ -61,4 +61,4 @@ class LoadProgressBar extends Component { } Component.registerComponent('LoadProgressBar', LoadProgressBar); -export default LoadProgressBar; \ No newline at end of file +export default LoadProgressBar; diff --git a/src/js/control-bar/progress-control/play-progress-bar.js b/src/js/control-bar/progress-control/play-progress-bar.js index f78c7a3859..aaf656befd 100644 --- a/src/js/control-bar/progress-control/play-progress-bar.js +++ b/src/js/control-bar/progress-control/play-progress-bar.js @@ -3,7 +3,7 @@ import Component from '../../component.js'; /** * Shows play progress * - * @param {vjs.Player|Object} player + * @param {Player|Object} player * @param {Object=} options * @constructor */ @@ -12,11 +12,11 @@ class PlayProgressBar extends Component { createEl() { return super.createEl('div', { className: 'vjs-play-progress', - innerHTML: '' + this.localize('Progress') + ': 0%' + innerHTML: `${this.localize('Progress')}: 0%` }); } } Component.registerComponent('PlayProgressBar', PlayProgressBar); -export default PlayProgressBar; \ No newline at end of file +export default PlayProgressBar; diff --git a/src/js/control-bar/progress-control/progress-control.js b/src/js/control-bar/progress-control/progress-control.js index 7afe41e234..1834d60bca 100644 --- a/src/js/control-bar/progress-control/progress-control.js +++ b/src/js/control-bar/progress-control/progress-control.js @@ -5,7 +5,7 @@ import SeekBar from './seek-bar.js'; * The Progress Control component contains the seek bar, load progress, * and play progress * - * @param {vjs.Player|Object} player + * @param {Player|Object} player * @param {Object=} options * @constructor */ diff --git a/src/js/control-bar/progress-control/seek-bar.js b/src/js/control-bar/progress-control/seek-bar.js index 6fcfed8732..e6f5b0edb9 100644 --- a/src/js/control-bar/progress-control/seek-bar.js +++ b/src/js/control-bar/progress-control/seek-bar.js @@ -7,7 +7,7 @@ import * as Lib from '../../lib.js'; /** * Seek Bar and holder for the progress bars * - * @param {vjs.Player|Object} player + * @param {Player|Object} player * @param {Object=} options * @constructor */ diff --git a/src/js/control-bar/progress-control/seek-handle.js b/src/js/control-bar/progress-control/seek-handle.js index ff7c4ae3e6..5fc57835fe 100644 --- a/src/js/control-bar/progress-control/seek-handle.js +++ b/src/js/control-bar/progress-control/seek-handle.js @@ -5,7 +5,7 @@ import * as Lib from '../../lib.js'; * The Seek Handle shows the current position of the playhead during playback, * and can be dragged to adjust the playhead. * - * @param {vjs.Player|Object} player + * @param {Player|Object} player * @param {Object=} options * @constructor */ @@ -26,7 +26,7 @@ class SeekHandle extends SliderHandle { updateContent() { let time = (this.player_.scrubbing) ? this.player_.getCache().currentTime : this.player_.currentTime(); - this.el_.innerHTML = '' + Lib.formatTime(time, this.player_.duration()) + ''; + this.el_.innerHTML = `${Lib.formatTime(time, this.player_.duration())}`; } } @@ -40,4 +40,4 @@ class SeekHandle extends SliderHandle { SeekHandle.prototype.defaultValue = '00:00'; SliderHandle.registerComponent('SeekHandle', SeekHandle); -export default SeekHandle; \ No newline at end of file +export default SeekHandle; diff --git a/src/js/control-bar/current-time-display.js b/src/js/control-bar/time-controls/current-time-display.js similarity index 75% rename from src/js/control-bar/current-time-display.js rename to src/js/control-bar/time-controls/current-time-display.js index 72786f31ac..7f8c0c1d1c 100644 --- a/src/js/control-bar/current-time-display.js +++ b/src/js/control-bar/time-controls/current-time-display.js @@ -1,9 +1,9 @@ -import Component from '../component.js'; -import * as Lib from '../lib.js'; +import Component from '../../component.js'; +import * as Lib from '../../lib.js'; /** * Displays the current time - * @param {vjs.Player|Object} player + * @param {Player|Object} player * @param {Object=} options * @constructor */ @@ -33,7 +33,9 @@ class CurrentTimeDisplay extends Component { updateContent() { // Allows for smooth scrubbing, when player can't keep up. let time = (this.player_.scrubbing) ? this.player_.getCache().currentTime : this.player_.currentTime(); - this.contentEl_.innerHTML = '' + this.localize('Current Time') + ' ' + Lib.formatTime(time, this.player_.duration()); + let localizedText = this.localize('Current Time'); + let formattedTime = Lib.formatTime(time, this.player_.duration()); + this.contentEl_.innerHTML = `${localizedText} ${formattedTime}`; } } diff --git a/src/js/control-bar/duration-display.js b/src/js/control-bar/time-controls/duration-display.js similarity index 68% rename from src/js/control-bar/duration-display.js rename to src/js/control-bar/time-controls/duration-display.js index ade6b7b2c4..4f8a443d1c 100644 --- a/src/js/control-bar/duration-display.js +++ b/src/js/control-bar/time-controls/duration-display.js @@ -1,9 +1,9 @@ -import Component from '../component.js'; -import * as Lib from '../lib.js'; +import Component from '../../component.js'; +import * as Lib from '../../lib.js'; /** * Displays the duration - * @param {vjs.Player|Object} player + * @param {Player|Object} player * @param {Object=} options * @constructor */ @@ -27,7 +27,7 @@ class DurationDisplay extends Component { this.contentEl_ = Lib.createEl('div', { className: 'vjs-duration-display', - innerHTML: '' + this.localize('Duration Time') + ' ' + '0:00', // label the duration time for screen reader users + innerHTML: `${this.localize('Duration Time')} 0:00`, // label the duration time for screen reader users 'aria-live': 'off' // tell screen readers not to automatically read the time as it changes }); @@ -38,7 +38,9 @@ class DurationDisplay extends Component { updateContent() { let duration = this.player_.duration(); if (duration) { - this.contentEl_.innerHTML = '' + this.localize('Duration Time') + ' ' + Lib.formatTime(duration); // label the duration time for screen reader users + let localizedText = this.localize('Duration Time'); + let formattedTime = Lib.formatTime(duration); + this.contentEl_.innerHTML = `${localizedText} ${formattedTime}`; // label the duration time for screen reader users } } diff --git a/src/js/control-bar/remaining-time-display.js b/src/js/control-bar/time-controls/remaining-time-display.js similarity index 70% rename from src/js/control-bar/remaining-time-display.js rename to src/js/control-bar/time-controls/remaining-time-display.js index d3842aefbf..12e5f06305 100644 --- a/src/js/control-bar/remaining-time-display.js +++ b/src/js/control-bar/time-controls/remaining-time-display.js @@ -1,5 +1,5 @@ -import Component from '../component.js'; -import * as Lib from '../lib'; +import Component from '../../component.js'; +import * as Lib from '../../lib'; /** * Displays the time left in the video @@ -22,7 +22,7 @@ class RemainingTimeDisplay extends Component { this.contentEl_ = Lib.createEl('div', { className: 'vjs-remaining-time-display', - innerHTML: '' + this.localize('Remaining Time') + ' ' + '-0:00', // label the remaining time for screen reader users + innerHTML: `${this.localize('Remaining Time')} -0:00`, // label the remaining time for screen reader users 'aria-live': 'off' // tell screen readers not to automatically read the time as it changes }); @@ -32,7 +32,9 @@ class RemainingTimeDisplay extends Component { updateContent() { if (this.player_.duration()) { - this.contentEl_.innerHTML = '' + this.localize('Remaining Time') + ' ' + '-'+ Lib.formatTime(this.player_.remainingTime()); + const localizedText = this.localize('Remaining Time'); + const formattedTime = Lib.formatTime(this.player_.remainingTime()); + this.contentEl_.innerHTML = `${localizedText} -${formattedTime}`; } // Allows for smooth scrubbing, when player can't keep up. diff --git a/src/js/control-bar/time-divider.js b/src/js/control-bar/time-controls/time-divider.js similarity index 79% rename from src/js/control-bar/time-divider.js rename to src/js/control-bar/time-controls/time-divider.js index e3c4996f4a..b23857a647 100644 --- a/src/js/control-bar/time-divider.js +++ b/src/js/control-bar/time-controls/time-divider.js @@ -1,11 +1,11 @@ -import Component from '../component.js'; +import Component from '../../component.js'; /** * The separator between the current time and duration * * Can be hidden if it's not needed in the design. * - * @param {vjs.Player|Object} player + * @param {Player|Object} player * @param {Object=} options * @constructor */ @@ -21,4 +21,4 @@ class TimeDivider extends Component { } Component.registerComponent('TimeDivider', TimeDivider); -export default TimeDivider; \ No newline at end of file +export default TimeDivider; diff --git a/src/js/control-bar/volume-control/volume-bar.js b/src/js/control-bar/volume-control/volume-bar.js index b12d154727..fcdad11260 100644 --- a/src/js/control-bar/volume-control/volume-bar.js +++ b/src/js/control-bar/volume-control/volume-bar.js @@ -8,7 +8,7 @@ import VolumeLevel from './volume-level.js'; /** * The bar that contains the volume level and can be clicked on to adjust the level * - * @param {vjs.Player|Object} player + * @param {Player|Object} player * @param {Object=} options * @constructor */ diff --git a/src/js/control-bar/volume-control/volume-control.js b/src/js/control-bar/volume-control/volume-control.js index bfcd2cb39f..de507925c2 100644 --- a/src/js/control-bar/volume-control/volume-control.js +++ b/src/js/control-bar/volume-control/volume-control.js @@ -7,7 +7,7 @@ import VolumeBar from './volume-bar.js'; /** * The component for controlling the volume level * - * @param {vjs.Player|Object} player + * @param {Player|Object} player * @param {Object=} options * @constructor */ diff --git a/src/js/control-bar/volume-control/volume-handle.js b/src/js/control-bar/volume-control/volume-handle.js index 9382574fbd..7dbd612764 100644 --- a/src/js/control-bar/volume-control/volume-handle.js +++ b/src/js/control-bar/volume-control/volume-handle.js @@ -3,7 +3,7 @@ import SliderHandle from '../../slider/slider-handle.js'; /** * The volume handle can be dragged to adjust the volume level * - * @param {vjs.Player|Object} player + * @param {Player|Object} player * @param {Object=} options * @constructor */ @@ -21,4 +21,4 @@ class VolumeHandle extends SliderHandle { VolumeHandle.prototype.defaultValue = '00:00'; SliderHandle.registerComponent('VolumeHandle', VolumeHandle); -export default VolumeHandle; \ No newline at end of file +export default VolumeHandle; diff --git a/src/js/control-bar/volume-control/volume-level.js b/src/js/control-bar/volume-control/volume-level.js index de25e95d32..8de8f92105 100644 --- a/src/js/control-bar/volume-control/volume-level.js +++ b/src/js/control-bar/volume-control/volume-level.js @@ -3,7 +3,7 @@ import Component from '../../component.js'; /** * Shows volume level * - * @param {vjs.Player|Object} player + * @param {Player|Object} player * @param {Object=} options * @constructor */ @@ -19,4 +19,4 @@ class VolumeLevel extends Component { } Component.registerComponent('VolumeLevel', VolumeLevel); -export default VolumeLevel; \ No newline at end of file +export default VolumeLevel; diff --git a/src/js/control-bar/volume-menu-button.js b/src/js/control-bar/volume-menu-button.js index 3d67b2dcb7..bc96e43af7 100644 --- a/src/js/control-bar/volume-menu-button.js +++ b/src/js/control-bar/volume-menu-button.js @@ -54,7 +54,7 @@ class VolumeMenuButton extends MenuButton { createEl() { return super.createEl('div', { className: 'vjs-volume-menu-button vjs-menu-button vjs-control', - innerHTML: '
' + this.localize('Mute') + '
' + innerHTML: `
${this.localize('Mute')}
` }); } diff --git a/src/js/core-object.js b/src/js/core-object.js index 0e942efc1c..93cb76877d 100644 --- a/src/js/core-object.js +++ b/src/js/core-object.js @@ -66,11 +66,10 @@ var CoreObject = function(){}; * * @param {Object} props Functions and properties to be applied to the * new object's prototype - * @return {vjs.CoreObject} An object that inherits from CoreObject + * @return {CoreObject} An object that inherits from CoreObject * @this {*} */ -CoreObject.extend = function(props){ - props = props || {}; +CoreObject.extend = function(props={}){ // Set up the constructor using the supplied init method // or using the init of the parent object // Make sure to check the unobfuscated version for external libs @@ -114,7 +113,7 @@ CoreObject.extend = function(props){ * * var myAnimal = Animal.create(); * - * @return {vjs.CoreObject} An instance of a CoreObject subclass + * @return {CoreObject} An instance of a CoreObject subclass * @this {*} */ CoreObject.create = function(){ diff --git a/src/js/core.js b/src/js/core.js index ae1d9e6638..8774f14fcc 100644 --- a/src/js/core.js +++ b/src/js/core.js @@ -23,7 +23,7 @@ import document from 'global/document'; * @param {String|Element} id Video element or video element ID * @param {Object=} options Optional options object for config/settings * @param {Function=} ready Optional ready callback - * @return {vjs.Player} A player instance + * @return {Player} A player instance * @namespace */ var videojs = function(id, options, ready){ @@ -43,7 +43,7 @@ var videojs = function(id, options, ready){ // If options or ready funtion are passed, warn if (options) { - Lib.log.warn('Player "' + id + '" is already initialised. Options will not be applied.'); + Lib.log.warn(`Player "${id}" is already initialised. Options will not be applied.`); } if (ready) { @@ -88,14 +88,14 @@ videojs['VERSION'] = '__VERSION__'; // Set CDN Version of swf // The added (+) blocks the replace from changing this _VERSION_NO_PATCH_ string if (videojs.CDN_VERSION !== '__VERSION_'+'NO_PATCH__') { - Options['flash']['swf'] = videojs.ACCESS_PROTOCOL + 'vjs.zencdn.net/'+videojs.CDN_VERSION+'/video-js.swf'; + Options['flash']['swf'] = `${videojs.ACCESS_PROTOCOL}vjs.zencdn.net/${videojs.CDN_VERSION}/video-js.swf`; } /** * Utility function for adding languages to the default options. Useful for * amending multiple language support at runtime. * - * Example: vjs.addLanguage('es', {'Hello':'Hola'}); + * Example: videojs.addLanguage('es', {'Hello':'Hola'}); * * @param {String} code The language code or dictionary property * @param {Object} data The data values to be translated diff --git a/src/js/error-display.js b/src/js/error-display.js index 597fcfdbfa..bfb3c24e84 100644 --- a/src/js/error-display.js +++ b/src/js/error-display.js @@ -3,7 +3,7 @@ import * as Lib from './lib'; /** * Display that an error has occurred making the video unplayable - * @param {vjs.Player|Object} player + * @param {Player|Object} player * @param {Object=} options * @constructor */ diff --git a/src/js/event-emitter.js b/src/js/event-emitter.js index 1a33353a7a..581951b8a7 100644 --- a/src/js/event-emitter.js +++ b/src/js/event-emitter.js @@ -6,7 +6,7 @@ var EventEmitter = function() {}; EventEmitter.prototype.allowedEvents_ = {}; EventEmitter.prototype.on = function(type, fn) { - // Remove the addEventListener alias before calling vjs.on + // Remove the addEventListener alias before calling Events.on // so we don't get into an infinite type loop let ael = this.addEventListener; this.addEventListener = Function.prototype; diff --git a/src/js/events.js b/src/js/events.js index 814d6476cf..810b1782d6 100644 --- a/src/js/events.js +++ b/src/js/events.js @@ -325,25 +325,6 @@ var trigger = function(elem, event) { // Inform the triggerer if the default was prevented by returning false return !event.defaultPrevented; - /* Original version of js ninja events wasn't complete. - * We've since updated to the latest version, but keeping this around - * for now just in case. - */ - // // Added in addition to book. Book code was broke. - // event = typeof event === 'object' ? - // event[vjs.expando] ? - // event : - // new vjs.Event(type, event) : - // new vjs.Event(type); - - // event.type = type; - // if (handler) { - // handler.call(elem, event); - // } - - // // Clean up the event in case it is being reused - // event.result = undefined; - // event.target = elem; }; /** diff --git a/src/js/fullscreen-api.js b/src/js/fullscreen-api.js index 84976c1074..c1de7332b2 100644 --- a/src/js/fullscreen-api.js +++ b/src/js/fullscreen-api.js @@ -5,7 +5,6 @@ import document from 'global/document'; * @type {Object|undefined} * @private */ -// vjs.browser.fullscreenAPI; let FullscreenApi = {}; // browser API methods @@ -71,7 +70,6 @@ for (let i = 0; i < apiMap.length; i++) { } // map the browser API names to the spec API names -// or leave vjs.browser.fullscreenAPI undefined if (browserApi) { for (let i=0; ix' + innerHTML: `x` }).firstChild.href; } @@ -670,7 +665,7 @@ var parseUrl = function(url) { let div; if (addToBody) { div = createEl('div'); - div.innerHTML = ''; + div.innerHTML = ``; a = div.firstChild; // prevent the div from affecting layout div.setAttribute('style', 'display:none; position:absolute;'); @@ -712,7 +707,7 @@ function _logType(type, args){ // convert args to an array to get array functions let argsArray = Array.prototype.slice.call(args); // if there's no console then don't try to output messages - // they will still be stored in vjs.log.history + // they will still be stored in Lib.log.history // Was setting these once outside of this function, but containing them // in the function makes it easier to test cases where console doesn't exist let noop = function(){}; diff --git a/src/js/loading-spinner.js b/src/js/loading-spinner.js index 3f70b084f0..aee2cb9c0c 100644 --- a/src/js/loading-spinner.js +++ b/src/js/loading-spinner.js @@ -4,7 +4,7 @@ import Component from './component'; ================================================================================ */ /** * Loading spinner for waiting events - * @param {vjs.Player|Object} player + * @param {Player|Object} player * @param {Object=} options * @class * @constructor diff --git a/src/js/menu/menu-button.js b/src/js/menu/menu-button.js index 5442c84f3e..d1868ee522 100644 --- a/src/js/menu/menu-button.js +++ b/src/js/menu/menu-button.js @@ -4,7 +4,7 @@ import * as Lib from '../lib.js'; /** * A button class with a popup menu - * @param {vjs.Player|Object} player + * @param {Player|Object} player * @param {Object=} options * @constructor */ @@ -75,7 +75,7 @@ class MenuButton extends Button { /** @inheritDoc */ buildCSSClass() { - return this.className + ' vjs-menu-button ' + super.buildCSSClass(); + return `${this.className} vjs-menu-button ${super.buildCSSClass()}`; } // Focus - Add keyboard functionality to element @@ -138,4 +138,4 @@ class MenuButton extends Button { } Button.registerComponent('MenuButton', MenuButton); -export default MenuButton; \ No newline at end of file +export default MenuButton; diff --git a/src/js/menu/menu-item.js b/src/js/menu/menu-item.js index c583755253..41273ca0d6 100644 --- a/src/js/menu/menu-item.js +++ b/src/js/menu/menu-item.js @@ -4,7 +4,7 @@ import * as Lib from '../lib.js'; /** * The component for a menu item. `
  • ` * - * @param {vjs.Player|Object} player + * @param {Player|Object} player * @param {Object=} options * @class * @constructor @@ -48,4 +48,4 @@ class MenuItem extends Button { } Button.registerComponent('MenuItem', MenuItem); -export default MenuItem; \ No newline at end of file +export default MenuItem; diff --git a/src/js/menu/menu.js b/src/js/menu/menu.js index 041789db66..c9665ec06f 100644 --- a/src/js/menu/menu.js +++ b/src/js/menu/menu.js @@ -8,7 +8,7 @@ import * as Events from '../events.js'; * The Menu component is used to build pop up menus, including subtitle and * captions selection menus. * - * @param {vjs.Player|Object} player + * @param {Player|Object} player * @param {Object=} options * @class * @constructor diff --git a/src/js/options.js b/src/js/options.js index c47b533b56..a19efe95bc 100644 --- a/src/js/options.js +++ b/src/js/options.js @@ -3,8 +3,8 @@ import window from 'global/window'; let navigator = window.navigator; /** - * Global Player instance options, surfaced from vjs.Player.prototype.options_ - * vjs.options = vjs.Player.prototype.options_ + * Global Player instance options, surfaced from Player.prototype.options_ + * options = Player.prototype.options_ * All options should use string keys so they avoid * renaming by closure compiler * @type {Object} diff --git a/src/js/player.js b/src/js/player.js index 8aefa7cabc..5e53423bf5 100644 --- a/src/js/player.js +++ b/src/js/player.js @@ -21,7 +21,7 @@ import TextTrackSettings from './tracks/text-track-settings.js'; import Html5 from './tech/html5.js'; /** - * An instance of the `vjs.Player` class is created when any of the Video.js setup methods are used to initialize a video. + * An instance of the `Player` class is created when any of the Video.js setup methods are used to initialize a video. * * ```js * var myPlayer = videojs('example_video_1'); @@ -38,7 +38,7 @@ import Html5 from './tech/html5.js'; * After an instance has been created it can be accessed globally using `Video('example_video_1')`. * * @class - * @extends vjs.Component + * @extends Component */ class Player extends Component { @@ -53,7 +53,7 @@ class Player extends Component { */ constructor(tag, options, ready){ // Make sure tag ID exists - tag.id = tag.id || 'vjs_video_' + Lib.guid++; + tag.id = tag.id || `vjs_video_${Lib.guid++}`; // Set Options // The options argument overrides options set in the video tag @@ -120,7 +120,7 @@ class Player extends Component { // TODO: Make this smarter. Toggle user state between touching/mousing // using events, since devices can have both touch and mouse events. - // if (vjs.TOUCH_ENABLED) { + // if (Lib.TOUCH_ENABLED) { // this.addClass('vjs-touch-enabled'); // } @@ -200,7 +200,7 @@ class Player extends Component { this.width(this.options_['width'], true); // (true) Skip resize listener on load this.height(this.options_['height'], true); - // vjs.insertFirst seems to cause the networkState to flicker from 3 to 2, so + // Lib.insertFirst seems to cause the networkState to flicker from 3 to 2, so // keep track of the original for later so we can know if the source originally failed tag.initNetworkState_ = tag.networkState; @@ -500,11 +500,11 @@ class Player extends Component { } catch(e) { // When building additional tech libs, an expected method may not be defined yet if (this.tech[method] === undefined) { - Lib.log('Video.js: ' + method + ' method not defined for '+this.techName+' playback technology.', e); + Lib.log(`Video.js: ${method} method not defined for ${this.techName} playback technology.`, e); } else { // When a method isn't available on the object it throws a TypeError if (e.name == 'TypeError') { - Lib.log('Video.js: ' + method + ' unavailable on '+this.techName+' playback technology element.', e); + Lib.log(`Video.js: ${method} unavailable on ${this.techName} playback technology element.`, e); this.tech.isReady_ = false; } else { Lib.log(e); @@ -522,7 +522,7 @@ class Player extends Component { * * myPlayer.play(); * - * @return {vjs.Player} self + * @return {Player} self */ play() { this.techCall('play'); @@ -534,7 +534,7 @@ class Player extends Component { * * myPlayer.pause(); * - * @return {vjs.Player} self + * @return {Player} self */ pause() { this.techCall('pause'); @@ -565,7 +565,7 @@ class Player extends Component { * * @param {Number|String=} seconds The time to seek to * @return {Number} The time in seconds, when not setting - * @return {vjs.Player} self, when the current time is set + * @return {Player} self, when the current time is set */ currentTime(seconds) { if (seconds !== undefined) { @@ -723,7 +723,7 @@ class Player extends Component { * * @param {Number} percentAsDecimal The new volume as a decimal percent * @return {Number} The current volume, when getting - * @return {vjs.Player} self, when setting + * @return {Player} self, when setting */ volume(percentAsDecimal) { let vol; @@ -753,7 +753,7 @@ class Player extends Component { * * @param {Boolean=} muted True to mute, false to unmute * @return {Boolean} True if mute is on, false if not, when getting - * @return {vjs.Player} self, when setting mute + * @return {Player} self, when setting mute */ muted(muted) { if (muted !== undefined) { @@ -784,7 +784,7 @@ class Player extends Component { * * @param {Boolean=} isFS Update the player's fullscreen state * @return {Boolean} true if fullscreen, false if not - * @return {vjs.Player} self, when setting + * @return {Player} self, when setting */ isFullscreen(isFS) { if (isFS !== undefined) { @@ -815,7 +815,7 @@ class Player extends Component { * This includes most mobile devices (iOS, Android) and older versions of * Safari. * - * @return {vjs.Player} self + * @return {Player} self */ requestFullscreen() { var fsApi = FullscreenApi; @@ -872,7 +872,7 @@ class Player extends Component { * * myPlayer.exitFullscreen(); * - * @return {vjs.Player} self + * @return {Player} self */ exitFullscreen() { var fsApi = FullscreenApi; @@ -952,7 +952,7 @@ class Player extends Component { // Check if the current tech is defined before continuing if (!tech) { - Lib.log.error('The "' + techName + '" tech is undefined. Skipped browser support check for that tech.'); + Lib.log.error(`The "${techName}" tech is undefined. Skipped browser support check for that tech.`); continue; } @@ -1005,13 +1005,9 @@ class Player extends Component { * @return {String} The current video source when getting * @return {String} The player when setting */ - src(source) { + src(source=this.techGet('src')) { let currentTech = Component.getComponent(this.techName); - if (source === undefined) { - return this.techGet('src'); - } - // case: Array of source objects to choose from and pick the best to play if (Lib.obj.isArray(source)) { this.sourceList_(source); @@ -1090,7 +1086,7 @@ class Player extends Component { /** * Begin loading the src data. - * @return {vjs.Player} Returns the player + * @return {Player} Returns the player */ load() { this.techCall('load'); @@ -1119,7 +1115,7 @@ class Player extends Component { /** * Get or set the preload attribute. * @return {String} The preload attribute value when getting - * @return {vjs.Player} Returns the player when setting + * @return {Player} Returns the player when setting */ preload(value) { if (value !== undefined) { @@ -1133,7 +1129,7 @@ class Player extends Component { /** * Get or set the autoplay attribute. * @return {String} The autoplay attribute value when getting - * @return {vjs.Player} Returns the player when setting + * @return {Player} Returns the player when setting */ autoplay(value) { if (value !== undefined) { @@ -1147,7 +1143,7 @@ class Player extends Component { /** * Get or set the loop attribute on the video element. * @return {String} The loop attribute value when getting - * @return {vjs.Player} Returns the player when setting + * @return {Player} Returns the player when setting */ loop(value) { if (value !== undefined) { @@ -1171,7 +1167,7 @@ class Player extends Component { * * @param {String=} [src] Poster image source URL * @return {String} poster URL when getting - * @return {vjs.Player} self when setting + * @return {Player} self when setting */ poster(src) { if (src === undefined) { @@ -1231,7 +1227,7 @@ class Player extends Component { * if it can support native controls** * * @param {Boolean} bool True signals that native controls are on - * @return {vjs.Player} Returns the player + * @return {Player} Returns the player * @private */ usingNativeControls(bool) { @@ -1247,7 +1243,7 @@ class Player extends Component { * player is using the native device controls * * @event usingnativecontrols - * @memberof vjs.Player + * @memberof Player * @instance * @private */ @@ -1259,7 +1255,7 @@ class Player extends Component { * player is using the custom HTML controls * * @event usingcustomcontrols - * @memberof vjs.Player + * @memberof Player * @instance * @private */ @@ -1274,8 +1270,8 @@ class Player extends Component { /** * Set or get the current MediaError * @param {*} err A MediaError or a String/Number to be turned into a MediaError - * @return {vjs.MediaError|null} when getting - * @return {vjs.Player} when setting + * @return {MediaError|null} when getting + * @return {Player} when setting */ error(err) { if (err === undefined) { @@ -1304,7 +1300,7 @@ class Player extends Component { // log the name of the error type and any message // ie8 just logs "[object object]" if you just log the error object - Lib.log.error('(CODE:'+this.error_.code+' '+MediaError.errorTypes[this.error_.code]+')', this.error_.message, this.error_); + Lib.log.error(`(CODE:${this.error_.code} ${MediaError.errorTypes[this.error_.code]})`, this.error_.message, this.error_); return this; } @@ -1473,7 +1469,7 @@ class Player extends Component { * * @param {Boolean} bool True signals that this is an audio player. * @return {Boolean} Returns true if player is audio, false if not when getting - * @return {vjs.Player} Returns the player if setting + * @return {Player} Returns the player if setting * @private */ isAudio(bool) { @@ -1597,7 +1593,7 @@ class Player extends Component { * The player's language code * @param {String} languageCode The locale string * @return {String} The locale string when getting - * @return {vjs.Player} self, when setting + * @return {Player} self, when setting */ language(languageCode) { if (languageCode === undefined) { @@ -1661,9 +1657,9 @@ class Player extends Component { Player.players = {}; /** - * Player instance options, surfaced using vjs.options - * vjs.options = vjs.Player.prototype.options_ - * Make changes in vjs.options, not here. + * Player instance options, surfaced using options + * options = Player.prototype.options_ + * Make changes in options, not here. * All options should use string keys so they avoid * renaming by closure compiler * @type {Object} diff --git a/src/js/poster-image.js b/src/js/poster-image.js index 0415e4565c..c13116dd26 100644 --- a/src/js/poster-image.js +++ b/src/js/poster-image.js @@ -6,7 +6,7 @@ import * as Lib from './lib'; /** * The component that handles showing the poster image. * - * @param {vjs.Player|Object} player + * @param {Player|Object} player * @param {Object=} options * @constructor */ @@ -79,7 +79,7 @@ class PosterImage extends Button { // Any falsey values should stay as an empty string, otherwise // this will throw an extra error if (url) { - backgroundImage = 'url("' + url + '")'; + backgroundImage = `url("${url}")`; } this.el_.style.backgroundImage = backgroundImage; diff --git a/src/js/slider/slider-handle.js b/src/js/slider/slider-handle.js index edde4f5c9e..07b33a68dd 100644 --- a/src/js/slider/slider-handle.js +++ b/src/js/slider/slider-handle.js @@ -4,7 +4,7 @@ import * as Lib from '../lib.js'; /** * SeekBar Behavior includes play progress bar, and seek handle * Needed so it can determine seek position based on handle position/size - * @param {vjs.Player|Object} player + * @param {Player|Object} player * @param {Object=} options * @constructor */ @@ -16,7 +16,7 @@ class SliderHandle extends Component { // Add the slider element class to all sub classes props.className = props.className + ' vjs-slider-handle'; props = Lib.obj.merge({ - innerHTML: ''+(this.defaultValue || 0)+'' + innerHTML: `${this.defaultValue || 0}` }, props); return super.createEl('div', props); diff --git a/src/js/slider/slider.js b/src/js/slider/slider.js index 39ddad4f30..761f8089b3 100644 --- a/src/js/slider/slider.js +++ b/src/js/slider/slider.js @@ -7,7 +7,7 @@ import document from 'global/document'; /** * The base functionality for sliders like the volume bar and seek bar * - * @param {vjs.Player|Object} player + * @param {Player|Object} player * @param {Object=} options * @constructor */ @@ -33,8 +33,7 @@ class Slider extends Component { this.on(player, this.playerEvent, this.update); } - createEl(type, props) { - props = props || {}; + createEl(type, props={}) { // Add the slider element class to all sub classes props.className = props.className + ' vjs-slider'; props = Lib.obj.merge({ diff --git a/src/js/tech/flash-rtmp.js b/src/js/tech/flash-rtmp.js index a821fff756..9f333cf9f6 100644 --- a/src/js/tech/flash-rtmp.js +++ b/src/js/tech/flash-rtmp.js @@ -74,7 +74,7 @@ function FlashRtmpDecorator(Flash) { * Adaptive source handlers will have more complicated workflows before passing * video data to the video element * @param {Object} source The source object - * @param {vjs.Flash} tech The instance of the Flash tech + * @param {Flash} tech The instance of the Flash tech */ Flash.rtmpSourceHandler.handleSource = function(source, tech){ let srcParts = Flash.streamToParts(source.src); diff --git a/src/js/tech/flash.js b/src/js/tech/flash.js index 8821618bcb..605c795bcf 100644 --- a/src/js/tech/flash.js +++ b/src/js/tech/flash.js @@ -14,7 +14,7 @@ let navigator = window.navigator; /** * Flash Media Controller - Wrapper for fallback SWF API * - * @param {vjs.Player} player + * @param {Player} player * @param {Object=} options * @param {Function=} ready * @constructor @@ -221,7 +221,7 @@ Tech.withSourceHandlers(Flash); * The default native source handler. * This simply passes the source to the video element. Nothing fancy. * @param {Object} source The source object - * @param {vjs.Flash} tech The instance of the Flash tech + * @param {Flash} tech The instance of the Flash tech */ Flash.nativeSourceHandler = {}; @@ -236,7 +236,7 @@ Flash.nativeSourceHandler.canHandleSource = function(source){ function guessMimeType(src) { var ext = Lib.getFileExtension(src); if (ext) { - return 'video/' + ext; + return `video/${ext}`; } return ''; } @@ -260,7 +260,7 @@ Flash.nativeSourceHandler.canHandleSource = function(source){ * Adaptive source handlers will have more complicated workflows before passing * video data to the video element * @param {Object} source The source object - * @param {vjs.Flash} tech The instance of the Flash tech + * @param {Flash} tech The instance of the Flash tech */ Flash.nativeSourceHandler.handleSource = function(source, tech){ tech.setSrc(source.src); @@ -379,7 +379,7 @@ Flash.getEmbedCode = function(swf, flashVars, params, attributes){ // Convert flash vars to string if (flashVars) { Lib.obj.each(flashVars, function(key, val){ - flashVarsString += (key + '=' + val + '&'); + flashVarsString += `${key}=${val}&`; }); } @@ -393,7 +393,7 @@ Flash.getEmbedCode = function(swf, flashVars, params, attributes){ // Create param tags string Lib.obj.each(params, function(key, val){ - paramsString += ''; + paramsString += ``; }); attributes = Lib.obj.merge({ @@ -408,10 +408,10 @@ Flash.getEmbedCode = function(swf, flashVars, params, attributes){ // Create Attributes string Lib.obj.each(attributes, function(key, val){ - attrsString += (key + '="' + val + '" '); + attrsString += `${key}="${val}" `; }); - return objTag + attrsString + '>' + paramsString + ''; + return `${objTag}${attrsString}>${paramsString}`; }; // Run Flash through the RTMP decorator diff --git a/src/js/tech/html5.js b/src/js/tech/html5.js index 8d32bd37b2..739be2dbed 100644 --- a/src/js/tech/html5.js +++ b/src/js/tech/html5.js @@ -10,7 +10,7 @@ import document from 'global/document'; /** * HTML5 Media Controller - Wrapper for HTML5 Media API - * @param {vjs.Player|Object} player + * @param {Player|Object} player * @param {Object=} options * @param {Function=} ready * @constructor @@ -362,13 +362,12 @@ class Html5 extends Tech { return this.el_.addTextTrack(kind, label, language); } - addRemoteTextTrack(options) { + addRemoteTextTrack(options={}) { if (!this['featuresNativeTextTracks']) { return super.addRemoteTextTrack(options); } var track = document.createElement('track'); - options = options || {}; if (options['kind']) { track['kind'] = options['kind']; @@ -460,7 +459,7 @@ Tech.withSourceHandlers(Html5); * The default native source handler. * This simply passes the source to the video element. Nothing fancy. * @param {Object} source The source object - * @param {vjs.Html5} tech The instance of the HTML5 tech + * @param {Html5} tech The instance of the HTML5 tech */ Html5.nativeSourceHandler = {}; @@ -489,7 +488,7 @@ Html5.nativeSourceHandler.canHandleSource = function(source){ // If no type, fall back to checking 'video/[EXTENSION]' ext = Lib.getFileExtension(source.src); - return canPlayType('video/'+ext); + return canPlayType(`video/${ext}`); } return ''; @@ -500,7 +499,7 @@ Html5.nativeSourceHandler.canHandleSource = function(source){ * Adaptive source handlers will have more complicated workflows before passing * video data to the video element * @param {Object} source The source object - * @param {vjs.Html5} tech The instance of the Html5 tech + * @param {Html5} tech The instance of the Html5 tech */ Html5.nativeSourceHandler.handleSource = function(source, tech){ tech.setSrc(source.src); diff --git a/src/js/tech/tech.js b/src/js/tech/tech.js index edc7cd8778..fbc76fe91c 100644 --- a/src/js/tech/tech.js +++ b/src/js/tech/tech.js @@ -12,14 +12,13 @@ import document from 'global/document'; /** * Base class for media (HTML5 Video, Flash) controllers - * @param {vjs.Player|Object} player Central player instance + * @param {Player|Object} player Central player instance * @param {Object=} options Options object * @constructor */ class Tech extends Component { - constructor(player, options, ready){ - options = options || {}; + constructor(player, options={}, ready=function(){}){ // we don't want the tech to report user activity automatically. // This is done manually in addControlsListeners options.reportTouchActivity = false; @@ -386,11 +385,9 @@ class Tech extends Component { */ Tech.prototype.textTracks_; -var createTrackHelper = function(self, kind, label, language, options) { +var createTrackHelper = function(self, kind, label, language, options={}) { let tracks = self.textTracks(); - options = options || {}; - options['kind'] = kind; if (label) { options['label'] = label; diff --git a/src/js/tracks/text-track-display.js b/src/js/tracks/text-track-display.js index f2dcbddbbd..7ca83acabf 100644 --- a/src/js/tracks/text-track-display.js +++ b/src/js/tracks/text-track-display.js @@ -136,13 +136,13 @@ class TextTrackDisplay extends Component { } if (overrides.edgeStyle) { if (overrides.edgeStyle === 'dropshadow') { - cueDiv.firstChild.style.textShadow = '2px 2px 3px ' + darkGray + ', 2px 2px 4px ' + darkGray + ', 2px 2px 5px ' + darkGray; + cueDiv.firstChild.style.textShadow = `2px 2px 3px ${darkGray}, 2px 2px 4px ${darkGray}, 2px 2px 5px ${darkGray}`; } else if (overrides.edgeStyle === 'raised') { - cueDiv.firstChild.style.textShadow = '1px 1px ' + darkGray + ', 2px 2px ' + darkGray + ', 3px 3px ' + darkGray; + cueDiv.firstChild.style.textShadow = `1px 1px ${darkGray}, 2px 2px ${darkGray}, 3px 3px ${darkGray}`; } else if (overrides.edgeStyle === 'depressed') { - cueDiv.firstChild.style.textShadow = '1px 1px ' + lightGray + ', 0 1px ' + lightGray + ', -1px -1px ' + darkGray + ', 0 -1px ' + darkGray; + cueDiv.firstChild.style.textShadow = `1px 1px ${lightGray}, 0 1px ${lightGray}, -1px -1px ${darkGray}, 0 -1px ${darkGray}`; } else if (overrides.edgeStyle === 'uniform') { - cueDiv.firstChild.style.textShadow = '0 0 4px ' + darkGray + ', 0 0 4px ' + darkGray + ', 0 0 4px ' + darkGray + ', 0 0 4px ' + darkGray; + cueDiv.firstChild.style.textShadow = `0 0 4px ${darkGray}, 0 0 4px ${darkGray}, 0 0 4px ${darkGray}, 0 0 4px ${darkGray}`; } } if (overrides.fontPercent && overrides.fontPercent !== 1) { diff --git a/src/js/tracks/text-track-settings.js b/src/js/tracks/text-track-settings.js index fed7111bb4..d5ac0db56d 100644 --- a/src/js/tracks/text-track-settings.js +++ b/src/js/tracks/text-track-settings.js @@ -168,118 +168,120 @@ function setSelectedOption(target, value) { } function captionOptionsMenuTemplate() { - return '
    ' + - '
    ' + - '
    ' + - '' + - '' + - '' + - '' + - '' + - '
    ' + // vjs-fg-color - '
    ' + - '' + - '' + - '' + - '' + - '' + - '
    ' + // vjs-bg-color - '
    ' + - '' + - '' + - '' + - '' + - '' + - '
    ' + // vjs-window-color - '
    ' + // vjs-tracksettings - '
    ' + - '
    ' + - '' + - '' + - '
    ' + // vjs-font-percent - '
    ' + - '' + - '' + - '
    ' + // vjs-edge-style - '
    ' + - '' + - '' + - '
    ' + // vjs-font-family - '
    ' + - '
    ' + - '
    ' + - '' + - '' + - '
    '; + let template = `
    +
    +
    + + + + + +
    +
    + + + + + +
    +
    + + + + + +
    +
    +
    +
    + + +
    +
    + + +
    +
    + + +
    +
    +
    +
    + + +
    `; + + return template; } export default TextTrackSettings; diff --git a/src/js/tracks/text-track.js b/src/js/tracks/text-track.js index 25c9741008..f89d250a49 100644 --- a/src/js/tracks/text-track.js +++ b/src/js/tracks/text-track.js @@ -28,9 +28,7 @@ import XHR from '../xhr.js'; * attribute EventHandler oncuechange; * }; */ -let TextTrack = function(options) { - options = options || {}; - +let TextTrack = function(options={}) { if (!options['player']) { throw new Error('A player was not provided.'); } diff --git a/test/unit/component.js b/test/unit/component.js index 82b0016214..e5b53f481b 100644 --- a/test/unit/component.js +++ b/test/unit/component.js @@ -41,7 +41,7 @@ test('should add a child component', function(){ test('should init child components from options', function(){ var comp = new Component(getFakePlayer(), { children: { - 'component': true + 'component': {} } });