diff --git a/src/js/button.js b/src/js/button.js index 21c3814582..5549470883 100644 --- a/src/js/button.js +++ b/src/js/button.js @@ -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 4995ed8dd8..edaee5b149 100644 --- a/src/js/component.js +++ b/src/js/component.js @@ -59,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; @@ -206,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; } @@ -303,16 +306,22 @@ class Component { * @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 = {}; } @@ -518,20 +527,18 @@ class Component { * @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 @@ -542,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 @@ -587,15 +594,13 @@ class 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 @@ -632,17 +637,15 @@ class 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); }; @@ -921,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) { @@ -953,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 @@ -976,7 +977,7 @@ 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 @@ -1013,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, @@ -1033,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); @@ -1060,7 +1060,7 @@ class Component { this.clearTimeout(timeoutId); }; - disposeFn.guid = 'vjs-timeout-'+ timeoutId; + disposeFn.guid = `vjs-timeout-${timeoutId}`; this.on('dispose', disposeFn); @@ -1077,7 +1077,7 @@ class Component { clearTimeout(timeoutId); var disposeFn = function(){}; - disposeFn.guid = 'vjs-timeout-'+ timeoutId; + disposeFn.guid = `vjs-timeout-${timeoutId}`; this.off('dispose', disposeFn); @@ -1099,7 +1099,7 @@ class Component { this.clearInterval(intervalId); }; - disposeFn.guid = 'vjs-interval-'+ intervalId; + disposeFn.guid = `vjs-interval-${intervalId}`; this.on('dispose', disposeFn); @@ -1115,7 +1115,7 @@ class Component { clearInterval(intervalId); var disposeFn = function(){}; - disposeFn.guid = 'vjs-interval-'+ intervalId; + disposeFn.guid = `vjs-interval-${intervalId}`; this.off('dispose', disposeFn); @@ -1137,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/current-time-display.js b/src/js/control-bar/current-time-display.js index b1b80ceca6..1fd2b5bd46 100644 --- a/src/js/control-bar/current-time-display.js +++ b/src/js/control-bar/current-time-display.js @@ -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/duration-display.js index fade594693..97585b66ed 100644 --- a/src/js/control-bar/duration-display.js +++ b/src/js/control-bar/duration-display.js @@ -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/fullscreen-toggle.js b/src/js/control-bar/fullscreen-toggle.js index 2e07ae0866..80d8bec2b5 100644 --- a/src/js/control-bar/fullscreen-toggle.js +++ b/src/js/control-bar/fullscreen-toggle.js @@ -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 c26131f83f..cdebc0dc6f 100644 --- a/src/js/control-bar/live-display.js +++ b/src/js/control-bar/live-display.js @@ -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 5633630bd3..49a81e3d55 100644 --- a/src/js/control-bar/mute-toggle.js +++ b/src/js/control-bar/mute-toggle.js @@ -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 673f0782b5..9b8509f3f0 100644 --- a/src/js/control-bar/play-toggle.js +++ b/src/js/control-bar/play-toggle.js @@ -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/progress-control/load-progress-bar.js b/src/js/control-bar/progress-control/load-progress-bar.js index a278d52c02..48298f519a 100644 --- a/src/js/control-bar/progress-control/load-progress-bar.js +++ b/src/js/control-bar/progress-control/load-progress-bar.js @@ -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%` }); } 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 2281da167a..aaf656befd 100644 --- a/src/js/control-bar/progress-control/play-progress-bar.js +++ b/src/js/control-bar/progress-control/play-progress-bar.js @@ -12,7 +12,7 @@ class PlayProgressBar extends Component { createEl() { return super.createEl('div', { className: 'vjs-play-progress', - innerHTML: '' + this.localize('Progress') + ': 0%' + innerHTML: `${this.localize('Progress')}: 0%` }); } diff --git a/src/js/control-bar/progress-control/seek-handle.js b/src/js/control-bar/progress-control/seek-handle.js index 562964a48c..5fc57835fe 100644 --- a/src/js/control-bar/progress-control/seek-handle.js +++ b/src/js/control-bar/progress-control/seek-handle.js @@ -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())}`; } } diff --git a/src/js/control-bar/remaining-time-display.js b/src/js/control-bar/remaining-time-display.js index d3842aefbf..bc054e7899 100644 --- a/src/js/control-bar/remaining-time-display.js +++ b/src/js/control-bar/remaining-time-display.js @@ -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/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 b4d3c1d016..93cb76877d 100644 --- a/src/js/core-object.js +++ b/src/js/core-object.js @@ -69,8 +69,7 @@ var CoreObject = function(){}; * @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 diff --git a/src/js/core.js b/src/js/core.js index 689c402944..8774f14fcc 100644 --- a/src/js/core.js +++ b/src/js/core.js @@ -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/lib.js b/src/js/lib.js index 69d2a9aade..ebcff95ca1 100644 --- a/src/js/lib.js +++ b/src/js/lib.js @@ -11,10 +11,7 @@ let hasOwnProp = Object.prototype.hasOwnProperty; * @return {Element} * @private */ -var createEl = function(tagName, properties){ - tagName = tagName || 'div'; - properties = properties || {}; - +var createEl = function(tagName='div', properties={}){ let el = document.createElement(tagName); obj.each(properties, function(propName, val){ @@ -483,7 +480,8 @@ var getComputedDimension = function(el, strCssRule){ } else if(el.currentStyle){ // IE8 Width/Height support - strValue = el['client'+strCssRule.substr(0,1).toUpperCase() + strCssRule.substr(1)] + 'px'; + let upperCasedRule = strCssRule.substr(0,1).toUpperCase() + strCssRule.substr(1); + strValue = el[`client${upperCasedRule}`] + 'px'; } return strValue; }; @@ -533,14 +531,12 @@ var el = function(id){ * @return {String} Time formatted as H:MM:SS or M:SS * @private */ -var formatTime = function(seconds, guide) { - // Default to using seconds as guide - guide = guide || seconds; - var s = Math.floor(seconds % 60), - m = Math.floor(seconds / 60 % 60), - h = Math.floor(seconds / 3600), - gm = Math.floor(guide / 60 % 60), - gh = Math.floor(guide / 3600); +var formatTime = function(seconds, guide=seconds) { + let s = Math.floor(seconds % 60); + let m = Math.floor(seconds / 60 % 60); + let h = Math.floor(seconds / 3600); + const gm = Math.floor(guide / 60 % 60); + const gh = Math.floor(guide / 3600); // handle invalid times if (isNaN(seconds) || seconds === Infinity) { @@ -587,8 +583,7 @@ var trim = function(str){ * @return {Number} Rounded number * @private */ -var round = function(num, dec) { - if (!dec) { dec = 0; } +var round = function(num, dec=0) { return Math.round(num*Math.pow(10,dec))/Math.pow(10,dec); }; @@ -645,7 +640,7 @@ var getAbsoluteURL = function(url){ if (!url.match(/^https?:\/\//)) { // Convert to absolute URL. Flash hosted off-site needs an absolute URL. url = createEl('div', { - innerHTML: 'x' + 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;'); diff --git a/src/js/menu/menu-button.js b/src/js/menu/menu-button.js index 42f10089e6..d1868ee522 100644 --- a/src/js/menu/menu-button.js +++ b/src/js/menu/menu-button.js @@ -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 diff --git a/src/js/player.js b/src/js/player.js index 6737ac38cd..5e53423bf5 100644 --- a/src/js/player.js +++ b/src/js/player.js @@ -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 @@ -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); @@ -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); @@ -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; } diff --git a/src/js/poster-image.js b/src/js/poster-image.js index 8182830fb3..c13116dd26 100644 --- a/src/js/poster-image.js +++ b/src/js/poster-image.js @@ -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 6cf06edeb6..07b33a68dd 100644 --- a/src/js/slider/slider-handle.js +++ b/src/js/slider/slider-handle.js @@ -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 0345aa4d26..761f8089b3 100644 --- a/src/js/slider/slider.js +++ b/src/js/slider/slider.js @@ -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.js b/src/js/tech/flash.js index e0cc040fd5..605c795bcf 100644 --- a/src/js/tech/flash.js +++ b/src/js/tech/flash.js @@ -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 ''; } @@ -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 7108ffcff5..739be2dbed 100644 --- a/src/js/tech/html5.js +++ b/src/js/tech/html5.js @@ -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']; @@ -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 ''; diff --git a/src/js/tech/tech.js b/src/js/tech/tech.js index 00d695a0b2..fbc76fe91c 100644 --- a/src/js/tech/tech.js +++ b/src/js/tech/tech.js @@ -18,8 +18,7 @@ import document from 'global/document'; */ 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': {} } });