Player now builds, embeds and plays

Author: donato

.jshintignore

@@ -1,2 +1,3 @@
-src/js/utils/jwplayer.underscore.js
-src/js/utils/jwplayer.backbone.js
+src/js/utils/backbone.events.js
+src/js/utils/underscore.js
+src/js/__*/*.js

.jshintrc

@@ -9,7 +9,7 @@
     "devel": true,
 
     // A function can only take max 3 arguments
-    "maxparams": 10,
+    "maxparams": 99,
 
     // Strings use single quotes instead of double
     "quotmark": "single",
@@ -22,5 +22,5 @@
     "unused": true,
 
     // These variables are predefined
-    "predef": ["define", "module", "_"]
+    "predef": ["jwplayer", "define", "module", "_"]
 }

Gruntfile.js

@@ -54,12 +54,8 @@ module.exports = function(grunt) {
                 overwrite: true,
                 replacements:[
                     {
-                        from : /jwplayer\.version = '(.*)'/,
-                        to   : 'jwplayer.version = \'<%= pkg.version %>\''
-                    },
-                    {
-                        from : /jwplayer\.html5\.version = '(.*)'/,
-                        to   : 'jwplayer.html5.version = \'<%= pkg.version %>\''
+                        from : /window.jwplayer\.version = '(.*)'/,
+                        to   : 'window.jwplayer.version = \'<%= pkg.version %>\''
                     }
                 ]
             }
@@ -98,8 +94,8 @@ module.exports = function(grunt) {
                 tasks: ['jshint:all']
             },
             player: {
-                files : '<%= concat.player.src %>',
-                tasks: ['concat:player', 'replace:player', 'uglify:player']
+                files : ['src/js/**/*.js', 'src/js/*.js'],
+                tasks: ['build-js']
             },
             flash: {
                 files : [
@@ -119,11 +115,11 @@ module.exports = function(grunt) {
                 debug:true,
                 entry: {
                     // use prefix since it has reserved values (for example plugins)
-                    jwpacked : './src/js/jwplayer.js'
+                    jwplayer : './src/js/jwplayer.js'
                 },
                 output: {
-                    path: 'built/',
-                    filename: '[name].built.js'
+                    path: 'bin-debug/',
+                    filename: '[name].js'
                 },
                 resolve: {
                     modulesDirectories: [
@@ -226,11 +222,15 @@ module.exports = function(grunt) {
         });
     });
 
+    grunt.registerTask('build-js', [
+        'webpack',
+        'replace',
+        'uglify'
+    ]);
+
     grunt.registerTask('default', [
         'clean',
-        'concat',
-        'replace',
-        'uglify',
+        'build-js',
         'flash:debug',
         'flash:release'
     ]);

src/js/api/api.js

@@ -5,8 +5,9 @@ define([
     'events/events',
     'events/states',
     'utils/helpers',
+    'utils/css',
     'underscore'
-], function(Embed, plugins, Instream, events, states, utils, _) {
+], function(Embed, plugins, Instream, events, states, utils, cssUtils, _) {
     var _instances = [],
         _uniqueIndex = 0;
 
@@ -330,7 +331,7 @@ define([
 
             // If sharing the DOM element, don't reset CSS
             if (!sharedDOM) {
-                utils.clearCss('#' + _this.id);
+                cssUtils.clearCss('#' + _this.id);
             }
 
             var toDestroy = document.getElementById(_this.id);

src/js/controller/model.js

@@ -3,9 +3,11 @@ define([
     'utils/stretching',
     'playlist/playlist',
     'providers/chooseprovider',
+    'underscore',
     'utils/eventdispatcher',
-    'events/events'
-], function(utils, stretchingUtils, Playlist, chooseProvider, eventdispatcher, events) {
+    'events/events',
+    'events/states'
+], function(utils, stretchingUtils, Playlist, chooseProvider, _, eventdispatcher, events, states) {
 
     var Model = function(config, defaultProvider) {
         var _model = this,
@@ -51,7 +53,7 @@ define([
             _model.config = _parseConfig(utils.extend({}, _defaults, _cookies, config));
             utils.extend(_model, {
                 id: config.id,
-                state: events.state.IDLE,
+                state: states.IDLE,
                 duration: -1,
                 position: 0,
                 buffer: 0

src/js/embed/config.js

@@ -6,6 +6,8 @@ define([
 
     var config = function (options) {
 
+        options = options || {};
+
         var config = _.extend({}, {
             fallback: true, // enable download embedder
             width: 480,

src/js/embed/embed.js

@@ -1,14 +1,16 @@
 define([
     'utils/helpers',
+    'utils/css',
     'events/events',
     'utils/scriptloader',
     'playlist/loader',
     'embed/config',
+    'plugins/plugins',
     'controller/player',
     'underscore'
-], function(utils, events, scriptloader, PlaylistLoader, EmbedConfig, Html5Player, _) {
+], function(utils, cssUtils, events, scriptloader, PlaylistLoader, EmbedConfig, plugins, Html5Player, _) {
 
-    jwplayer.vid = document.createElement('video');
+    var _css = cssUtils.css;
 
     var Embed = function(playerApi) {
 
@@ -18,7 +20,7 @@ define([
             _height = _config.height,
             _errorText = 'Error loading player: ',
             _oldContainer = document.getElementById(playerApi.id),
-            _pluginloader = jwplayer.plugins.loadPlugins(playerApi.id, _config.plugins),
+            _pluginloader = plugins.loadPlugins(playerApi.id, _config.plugins),
             _loader,
             _playlistLoading = false,
             _errorOccurred = false,
@@ -111,7 +113,7 @@ define([
                 utils.emptyElement(_container);
 
                 // Volume option is tricky to remove, since it needs to be in the HTML5 player model.
-                var playerConfigCopy = jwplayer.utils.extend({}, pluginConfigCopy);
+                var playerConfigCopy = utils.extend({}, pluginConfigCopy);
                 delete playerConfigCopy.volume;
                 var html5player = new Html5Player(playerConfigCopy);
                 playerApi.setPlayer(html5player, 'html5');
@@ -199,10 +201,10 @@ define([
     }
 
     function _insertCSS() {
-        utils.css('object.jwswf, .jwplayer:focus', {
+        _css('object.jwswf, .jwplayer:focus', {
             outline: 'none'
         });
-        utils.css('.jw-tab-focus:focus', {
+        _css('.jw-tab-focus:focus', {
             outline: 'solid 2px #0B7EF4'
         });
     }
@@ -233,4 +235,4 @@ define([
 
     return Embed;
 
-})(jwplayer);
+});

src/js/jwplayer.js

@@ -1,9 +1,14 @@
-/*global jwplayer:true*/
+if (!window.jwplayer) {
 
-jwplayer.version = 'X.Y.ZZZZ';
-define(['api/api'], function(Api) {
-    window.jwplayer = function() {
-        return Api.selectPlayer.apply(this, arguments);
-    };
-});
+    window.jwplayer = {};
+    window.jwplayer.version = 'X.Y.ZZZZ';
 
+    define(['api/api'], function (Api) {
+        window.jwplayer = function () {
+            return Api.selectPlayer.apply(this, arguments);
+        };
+
+        window.jwplayer.version = 'X.Y.ZZZZ';
+        window.jwplayer.vid = document.createElement('video');
+    });
+}

src/js/playlist/playlist.js

@@ -1,5 +1,11 @@
-define(['utils/helpers', 'utils/strings', 'utils/extensionmap', 'playlist/item', 'underscore'],
-function(utils, strings, extensionmap, PlaylistItem, _) {
+define([
+        'providers/chooseprovider',
+        'utils/helpers',
+        'utils/strings',
+        'utils/extensionmap',
+        'playlist/item',
+        'underscore'
+], function(chooseProvider, utils, strings, extensionmap, PlaylistItem, _) {
 
     var Playlist = function (playlist) {
         var _playlist = [];
@@ -49,7 +55,7 @@ function(utils, strings, extensionmap, PlaylistItem, _) {
 
         // If type not included, we infer it from extension
         if (!type) {
-            var extension = utils.extension(file);
+            var extension = strings.extension(file);
             type = extensionmap.extType(extension);
         }
 
@@ -76,7 +82,7 @@ function(utils, strings, extensionmap, PlaylistItem, _) {
                 source.androidhls = true;
             }
 
-            if (jwplayer.html5.chooseProvider(source)) {
+            if (chooseProvider(source)) {
                 // We want sources of all the same type since they may be of different quality levels
                 selectedType = selectedType || source.type;
 

src/js/plugins/loader.js

@@ -1,4 +1,11 @@
-define(['plugins/utils', 'utils/helpers', 'events/events', 'underscore', 'utils/scriptloader'], function(pluginUtils, helpers, events, _, scriptloader) {
+define([
+    'plugins/utils',
+    'utils/helpers',
+    'events/events',
+    'underscore',
+    'utils/eventdispatcher',
+    'utils/scriptloader'
+], function(pluginUtils, helpers, events, _, eventdispatcher, scriptloader) {
 
     var _foreach = helpers.foreach;
 
@@ -9,7 +16,7 @@ define(['plugins/utils', 'utils/helpers', 'events/events', 'underscore', 'utils/
             _pluginCount = _.size(_config),
             _pluginLoaded,
             _destroyed = false,
-            _eventDispatcher = new events.eventdispatcher();
+            _eventDispatcher = new eventdispatcher();
 
 
         _.extend(this, _eventDispatcher);

src/js/providers/html5.js

@@ -1,12 +1,15 @@
 define([
+    'utils/css',
     'utils/helpers',
     'utils/extensionmap',
+    'utils/strings',
+    'utils/stretching',
     'underscore',
     'events/events',
     'events/states',
     'utils/eventdispatcher',
     'providers/default'
-], function(utils, extensionmap, _, events, states, eventdispatcher, DefaultProvider) {
+], function(cssUtils, utils, extensionmap, strings, stretchUtils, _, events, states, eventdispatcher, DefaultProvider) {
 
     var clearInterval = window.clearInterval,
         _isIE = utils.isMSIE(),
@@ -649,20 +652,20 @@ define([
                 // the pause event to be fired. This causes audio files to 
                 // become unplayable. Hence the video tag is always kept 
                 // visible on Android devices.
-                utils.css.style(_container, {
+                cssUtils.style(_container, {
                     visibility: 'visible',
                     opacity: 1
                 });
             } else {
-                utils.css.style(_container, {
+                cssUtils.style(_container, {
                     visibility: '',
                     opacity: 0
                 });
             }
         };
 
         this.resize = function(width, height, stretching) {
-            return utils.stretch(stretching,
+            return stretchUtils.stretch(stretching,
                 _videotag,
                 width, height,
                 _videotag.videoWidth, _videotag.videoHeight);
@@ -768,7 +771,7 @@ define([
             return false;
         }
 
-        var extension = utils.extension(file);
+        var extension = strings.extension(file);
         type = type || extensionmap.extType(extension);
 
         // HLS not sufficiently supported on Android devices; should fail over automatically.

src/js/utils/css.js

@@ -95,7 +95,10 @@ define([
         _updateStyleAttributes(cssRules, styles);
 
         if (_cssBlock !== null && !immediate) {
-            elements.__cssRules = _.extend(elements.__cssRules, cssRules);
+            if (!elements.__cssRules) {
+                elements.__cssRules = {};
+            }
+            _.extend(elements.__cssRules, cssRules);
             if (_.indexOf(_cssBlock.elements, elements) < 0) {
                 _cssBlock.elements.push(elements);
             }
@@ -275,7 +278,7 @@ define([
         if (typeof element === 'string') {
             _css(element, style);
         } else {
-            _css.style(element, style);
+            _style(element, style);
         }
     };
 

src/js/utils/eventdispatcher.js

@@ -1,10 +1,10 @@
-define(['underscore'], function(_) {
+define(['utils/backbone.events', 'underscore'], function(Events, _) {
 
     var GLOBAL_EVENT = 'GLOBAL_EVENT';
 
     var eventdispatcher = function (_id, _debug) {
 
-        var obj = _.extend({}, jwplayer.utils.Events);
+        var obj = _.extend({}, Events);
 
         /** Clears all event listeners **/
         this.resetEventListeners = obj.off;

src/js/utils/helpers.js

@@ -1,6 +1,6 @@
 define(['utils/strings', 'events/events', 'underscore'], function(strings, Events, _) {
 
-    var _version = jwplayer.version;
+    var _version = window.jwplayer.version;
 
     /*jshint maxparams:5*/
     var utils = {};
@@ -717,7 +717,7 @@ define(['utils/strings', 'events/events', 'underscore'], function(strings, Event
             top: 0,
             bottom: 0
         };
-        if (!element || !DOCUMENT.body.contains(element)) {
+        if (!element || !document.body.contains(element)) {
             return bounds;
         }
         if (element.getBoundingClientRect) {

src/js/utils/stretching.js

@@ -1,4 +1,4 @@
-define(['utils/css'], function(utils) {
+define(['utils/css'], function(cssUtils) {
     /*jshint maxparams:6*/
 
     /** Stretching options **/
@@ -27,7 +27,7 @@ define(['utils/css'], function(utils) {
             }
             value = 'translate(' + xoffset + 'px, ' + yoffset + 'px)';
         }
-        utils.transform(domelement, value);
+        cssUtils.transform(domelement, value);
     };
 
     /**
@@ -123,12 +123,12 @@ define(['utils/css'], function(utils) {
                 }
                 style.width = elementWidth;
                 style.height = elementHeight;
-                utils.scale(domelement, xscale, yscale, 0, 0);
+                scale(domelement, xscale, yscale, 0, 0);
             } else {
                 scale = false;
-                utils.transform(domelement);
+                cssUtils.transform(domelement);
             }
-            utils.css.style(domelement, style);
+            cssUtils.style(domelement, style);
         } else {
             domelement.className = domelement.className.replace(/\s*jw(none|exactfit|uniform|fill)/g, '') +
                 ' ' + stretchClass;