Jshint tweaks, changelog

.jshintrc

@@ -8,11 +8,11 @@
     "node"          : false,
     "rhino"         : false,
     "couch"         : false,
-    "wsh"           : true,   // Windows Scripting Host.
+    "wsh"           : false,   // Windows Scripting Host.
     "jquery"        : false,
 
     // Development.
-    "debug"         : false,  // Allow debugger statements e.g. browser breakpoints.
+    "debug"         : true,  // Allow debugger statements e.g. browser breakpoints.
     "devel"         : true,   // Allow developments statements e.g. `console.log();`.
 
     // ECMAScript 5.
@@ -25,7 +25,7 @@
     "bitwise"       : false,  // Prohibit bitwise operators (&, |, ^, etc.).
     "boss"          : false,  // Tolerate assignments inside if, for & while. Usually conditions & loops are for comparison, not assignments.
     "curly"         : true,   // Require {} for every new block or scope.
-    "eqeqeq"        : false,  // Require triple equals i.e. `===`.
+    "eqeqeq"        : true,  // Require triple equals i.e. `===`.
     "eqnull"        : false,  // Tolerate use of `== null`.
     "evil"          : false,  // Tolerate use of `eval`.
     "expr"          : false,  // Tolerate `ExpressionStatement` as Programs.

changelog.md

@@ -1,5 +1,31 @@
 # Changelog
 
+# v1.9.0
+This version contains several ***breaking changes***:
+
+- `setup()` has been reverted to pre v1.8.0 behaviour; meaning it will return the *instance* rather than the *element*. This is because the reference to the instance is no longer added to the original element (see below).
+- The reference to the `plyr` instance is now added to the media element rather than original container. This is because if a container with multiple children was passed to `setup()` the references to all instances would have been added to the container, creating issues. I would recommend using the return value from `setup()` or the new `get()` method to access the instance.
+- Players will always be wrapped in their own div now - this makes `setup()` and `destroy()` cleaner. This *may* break any custom styling based on DOM position. 
+
+And some other changes and bug fixes:
+
+- New `get()` method on the global plyr object to get all instances inside a container
+- New API methods:
+	- `getOriginal()` to get the original, *unmodified* element plyr was setup on (`<video>`, `<audio>` or empty `<div>` for YouTube and Vimeo)
+	- `getContainer()` to get the players outer wrapper element
+	- `getMedia()` to get the players media element (`<video>`, `<audio>` or empty `<div>` for YouTube and Vimeo)
+	- `getEmbed()` to access the YouTube or Vimeo API directly
+	- `getType()` to get the type of the player
+	- `isReady()` to determine if an instance has completed setup and necessary APIs are loaded (for YouTube / Vimeo)
+	- `on()` to provide an easy way to listen to events
+	- `stop()` to, you guessed it, stop the player
+- `destroy()` now works correctly for YouTube and Vimeo (fixes #272)
+- New `destoryed` event when original element is restored (original element passed as event target)
+- Default volume is now 10 (max) rather than 5
+- Sprite is only loaded once (fixes #259)
+- Fixes for Vimeo post message bugs on source change or destroy (fixes #318)
+- Save caption state in storage (fixes #311)
+
 ## v1.8.12
 - Vimeo keyboard focus fix (Fixes #317)
 - Fix for Vimeo on basic support devices

src/js/plyr.js

@@ -228,7 +228,7 @@
             name = ua.substring(nameOffset,verOffset);
             fullVersion = ua.substring(verOffset + 1);
 
-            if (name.toLowerCase() == name.toUpperCase()) {
+            if (name.toLowerCase() === name.toUpperCase()) {
                 name = navigator.appName;
             }
         }
@@ -268,7 +268,7 @@
         var media = plyr.media;
 
         // Only check video types for video players
-        if (plyr.type == 'video') {
+        if (plyr.type === 'video') {
             // Check type
             switch (mimeType) {
                 case 'video/webm':   return !!(media.canPlayType && media.canPlayType('video/webm; codecs="vp8, vorbis"').replace(/no/, ''));
@@ -278,7 +278,7 @@
         }
 
         // Only check audio types for audio players
-        else if (plyr.type == 'audio') {
+        else if (plyr.type === 'audio') {
             // Check type
             switch (mimeType) {
                 case 'audio/mpeg':   return !!(media.canPlayType && media.canPlayType('audio/mpeg;').replace(/no/, ''));
@@ -305,7 +305,7 @@
 
     // Element exists in an array
     function _inArray(haystack, needle) {
-        return Array.prototype.indexOf && (haystack.indexOf(needle) != -1);
+        return Array.prototype.indexOf && (haystack.indexOf(needle) !== -1);
     }
 
     // Replace all
@@ -437,20 +437,6 @@
         return f.call(element, selector);
     }
 
-    // Bind event
-    function _on(element, events, callback, useCapture) {
-        if (element) {
-            _toggleListener(element, events, callback, true, useCapture);
-        }
-    }
-
-    // Unbind event
-    function _off(element, events, callback, useCapture) {
-        if (element) {
-            _toggleListener(element, events, callback, false, useCapture);
-        }
-    }
-
     // Bind along with custom handler
     function _proxyListener(element, eventName, userListener, defaultListener, useCapture) {
         _on(element, eventName, function(event) {
@@ -487,6 +473,20 @@
         }
     }
 
+    // Bind event
+    function _on(element, events, callback, useCapture) {
+        if (element) {
+            _toggleListener(element, events, callback, true, useCapture);
+        }
+    }
+
+    // Unbind event
+    function _off(element, events, callback, useCapture) {
+        if (element) {
+            _toggleListener(element, events, callback, false, useCapture);
+        }
+    }
+
     // Trigger event
     function _triggerEvent(element, eventName, bubbles, properties) {
         // Bail if no element
@@ -547,7 +547,7 @@
         }
 
         // Return first if specified but nothing to merge
-        if (objects.lenth == 1) {
+        if (objects.length === 1) {
             return objects[0];
         }
 
@@ -582,10 +582,10 @@
             return input !== null && (typeof(input) === 'object' && input.constructor === Array);
         },
         number: function(input) {
-            return input !== null && (typeof(input) === 'number' && !isNaN(input - 0) || (typeof input == 'object' && input.constructor === Number));
+            return input !== null && (typeof(input) === 'number' && !isNaN(input - 0) || (typeof input === 'object' && input.constructor === Number));
         },
         string: function(input) {
-            return input !== null && (typeof input === 'string' || (typeof input == 'object' && input.constructor === String));
+            return input !== null && (typeof input === 'string' || (typeof input === 'object' && input.constructor === String));
         },
         boolean: function(input) {
             return input !== null && typeof input === 'boolean';
@@ -643,7 +643,7 @@
         if (fullscreen.supportsFullScreen) {
             // Yet again Microsoft awesomeness,
             // Sometimes the prefix is 'ms', sometimes 'MS' to keep you on your toes
-            fullscreen.fullScreenEventName = (fullscreen.prefix == 'ms' ? 'MSFullscreenChange' : fullscreen.prefix + 'fullscreenchange');
+            fullscreen.fullScreenEventName = (fullscreen.prefix === 'ms' ? 'MSFullscreenChange' : fullscreen.prefix + 'fullscreenchange');
 
             fullscreen.isFullScreen = function(element) {
                 if (_is.undefined(element)) {
@@ -651,21 +651,21 @@
                 }
                 switch (this.prefix) {
                     case '':
-                        return document.fullscreenElement == element;
+                        return document.fullscreenElement === element;
                     case 'moz':
-                        return document.mozFullScreenElement == element;
+                        return document.mozFullScreenElement === element;
                     default:
-                        return document[this.prefix + 'FullscreenElement'] == element;
+                        return document[this.prefix + 'FullscreenElement'] === element;
                 }
             };
             fullscreen.requestFullScreen = function(element) {
                 if (_is.undefined(element)) {
                     element = document.body;
                 }
-                return (this.prefix === '') ? element.requestFullScreen() : element[this.prefix + (this.prefix == 'ms' ? 'RequestFullscreen' : 'RequestFullScreen')]();
+                return (this.prefix === '') ? element.requestFullScreen() : element[this.prefix + (this.prefix === 'ms' ? 'RequestFullscreen' : 'RequestFullScreen')]();
             };
             fullscreen.cancelFullScreen = function() {
-                return (this.prefix === '') ? document.cancelFullScreen() : document[this.prefix + (this.prefix == 'ms' ? 'ExitFullscreen' : 'CancelFullScreen')]();
+                return (this.prefix === '') ? document.cancelFullScreen() : document[this.prefix + (this.prefix === 'ms' ? 'ExitFullscreen' : 'CancelFullScreen')]();
             };
             fullscreen.element = function() {
                 return (this.prefix === '') ? document.fullscreenElement : document[this.prefix + 'FullscreenElement'];
@@ -676,37 +676,34 @@
     }
 
     // Local storage
-    function _storage() {
+    var _storage = {
-        var storage = {
+        supported: (function() {
-            supported: (function() {
+            if (!('localStorage' in window)) {
-                if (!('localStorage' in window)) {
-                    return false;
-                }
-
-                // Try to use it (it might be disabled, e.g. user is in private/porn mode)
-                // see: https://github.com/Selz/plyr/issues/131
-                try {
-                    // Add test item
-                    window.localStorage.setItem('___test', 'OK');
-
-                    // Get the test item
-                    var result = window.localStorage.getItem('___test');
-
-                    // Clean up
-                    window.localStorage.removeItem('___test');
-
-                    // Check if value matches
-                    return (result === 'OK');
-                }
-                catch (e) {
-                    return false;
-                }
-
                 return false;
-            })()
+            }
-        };
+
-        return storage;
+            // Try to use it (it might be disabled, e.g. user is in private/porn mode)
-    }
+            // see: https://github.com/Selz/plyr/issues/131
+            try {
+                // Add test item
+                window.localStorage.setItem('___test', 'OK');
+
+                // Get the test item
+                var result = window.localStorage.getItem('___test');
+
+                // Clean up
+                window.localStorage.removeItem('___test');
+
+                // Check if value matches
+                return (result === 'OK');
+            }
+            catch (e) {
+                return false;
+            }
+
+            return false;
+        })()
+    };
 
     // Player instance
     function Plyr(media, config) {
@@ -903,7 +900,7 @@
                 return;
             }
 
-            if ((plyr.type != 'audio' || config.fullscreen.allowAudio) && config.fullscreen.enabled) {
+            if ((plyr.type !== 'audio' || config.fullscreen.allowAudio) && config.fullscreen.enabled) {
                 // Check for native support
                 var nativeSupport = fullscreen.supportsFullScreen;
 
@@ -1421,7 +1418,7 @@
             plyr.storage = {};
 
             // Bail if we don't have localStorage support or it's disabled
-            if (!_storage().supported || !config.storage.enabled) {
+            if (!_storage.supported || !config.storage.enabled) {
                 return;
             }
 
@@ -1450,16 +1447,16 @@
 
         // Save a value back to local storage
         function _updateStorage(value) {
-          // Bail if we don't have localStorage support or it's disabled
+            // Bail if we don't have localStorage support or it's disabled
-          if (!_storage().supported || !config.storage.enabled) {
+            if (!_storage.supported || !config.storage.enabled) {
-              return;
+                return;
-          }
+            }
 
-          // Update the working copy of the values
+            // Update the working copy of the values
-          _extend(plyr.storage, value);
+            _extend(plyr.storage, value);
 
-          window.localStorage.setItem(
+            // Update storage
-              config.storage.key, JSON.stringify(plyr.storage));
+            window.localStorage.setItem(config.storage.key, JSON.stringify(plyr.storage));
         }
 
         // Setup media
@@ -2369,7 +2366,7 @@
                         value = _getPercentage(plyr.media.currentTime, duration);
 
                         // Set seek range value only if it's a 'natural' time event
-                        if (event.type == 'timeupdate' && plyr.buttons.seek) {
+                        if (event.type === 'timeupdate' && plyr.buttons.seek) {
                             plyr.buttons.seek.value = value;
                         }
 
@@ -2493,7 +2490,7 @@
             _updateTimeDisplay(plyr.media.currentTime, plyr.currentTime);
 
             // Ignore updates while seeking
-            if (event && event.type == 'timeupdate' && plyr.media.seeking) {
+            if (event && event.type === 'timeupdate' && plyr.media.seeking) {
                 return;
             }
 
@@ -2692,10 +2689,6 @@
             // Cancel current network requests
             _cancelRequests();
 
-            // Destroy instance adn wait for callback
-            // Vimeo throws a wobbly if you don't wait
-            _destroy(setup, false);
-
             // Setup new source
             function setup() {
                 // Remove embed object
@@ -2811,6 +2804,10 @@
                 config.title = source.title;
                 _setTitle();
             }
+
+            // Destroy instance adn wait for callback
+            // Vimeo throws a wobbly if you don't wait
+            _destroy(setup, false);
         }
 
         // Update poster
@@ -2868,7 +2865,7 @@
             function checkFocus() {
                 var focused = document.activeElement;
 
-                if (!focused || focused == document.body) {
+                if (!focused || focused === document.body) {
                     focused = null;
                 }
                 else if (document.querySelector) {
@@ -2891,7 +2888,7 @@
             _on(window, 'keyup', function(event) {
                 var code = (event.keyCode ? event.keyCode : event.which);
 
-                if (code == 9) {
+                if (code === 9) {
                     checkFocus();
                 }
             });
@@ -3341,6 +3338,7 @@
         }
 
         return {
+            getOriginal:        function() { return original; },
             getContainer:       function() { return plyr.container },
             getEmbed:           function() { return plyr.embed; },
             getMedia:           function() { return plyr.media; },
@@ -3379,12 +3377,12 @@
         }
 
         // Create placeholder (to prevent loading twice)
-        var c = document.createElement('div');
+        var container = document.createElement('div');
-        c.setAttribute('hidden', '');
+        container.setAttribute('hidden', '');
         if (_is.string(id)) {
-            c.setAttribute('id', id);
+            container.setAttribute('id', id);
         }
-        document.body.insertBefore(c, document.body.childNodes[0]);
+        document.body.insertBefore(container, document.body.childNodes[0]);
 
         // Check for CORS support
         if ('withCredentials' in x) {
@@ -3396,7 +3394,7 @@
 
         // Inject hidden div with sprite on load
         x.onload = function() {
-            c.innerHTML = x.responseText;
+            container.innerHTML = x.responseText;
         }
 
         x.send();