Version bump

changelog.md

@@ -1,5 +1,11 @@
 # Changelog
 
+# v1.6.20
+- Fix for multiple sprites being requested (fixes #259)
+
+# v1.6.19
+- Fix for scroll direction issues on volume control (fixes #258)
+
 # v1.6.18
 - Reduced rounding of seek value from 1 decimal point to 4 (fixes #242)
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "plyr",
-  "version": "1.6.18",
+  "version": "1.6.20",
   "description": "A simple, accessible and customizable HTML5, YouTube and Vimeo media player",
   "homepage": "http://plyr.io",
   "main": "src/js/plyr.js",

readme.md

@@ -41,7 +41,7 @@ If you have any cool ideas or features, please let me know by [creating an issue
 ## Implementation
 Check `docs/index.html` and `docs/src/js/docs.js` for an example setup.
 
-**Heads up:** the example `index.html` file needs to be served from a webserver (such as Apache, Nginx, IIS or similar) unless you change the file sources to include http or https. e.g. change `//cdn.plyr.io/1.6.18/plyr.js` to `https://cdn.plyr.io/1.6.18/plyr.js`
+**Heads up:** the example `index.html` file needs to be served from a webserver (such as Apache, Nginx, IIS or similar) unless you change the file sources to include http or https. e.g. change `//cdn.plyr.io/1.6.20/plyr.js` to `https://cdn.plyr.io/1.6.20/plyr.js`
 
 ### npm
 
@@ -72,11 +72,11 @@ More info is on [npm](https://www.npmjs.com/package/ember-cli-plyr) and [GitHub]
 If you want to use our CDN, you can use the following:
 
 ```html
-<link rel="stylesheet" href="https://cdn.plyr.io/1.6.18/plyr.css">
+<link rel="stylesheet" href="https://cdn.plyr.io/1.6.20/plyr.css">
-<script src="https://cdn.plyr.io/1.6.18/plyr.js"></script>
+<script src="https://cdn.plyr.io/1.6.20/plyr.js"></script>
 ```
 
-The SVG sprite/defs file can be found here: `https://cdn.plyr.io/1.6.18/plyr.svg`.
+The SVG sprite/defs file can be found here: `https://cdn.plyr.io/1.6.20/plyr.svg`.
 
 ### CSS & Styling
 If you want to use the default css, add the `plyr.css` file from `/dist` into your head, or even better use `plyr.less` or `plyr.scss` file included in `/src` in your build to save a request.
@@ -164,7 +164,7 @@ Be sure to [validate your caption files](https://quuz.org/webvtt/)
 Here's an example of a default setup:
 
 ```html
-<script src="https://cdn.plyr.io/1.6.18/plyr.js"></script>
+<script src="https://cdn.plyr.io/1.6.20/plyr.js"></script>
 <script>plyr.setup();</script>
 ```
 

src/js/plyr.js

@@ -1,6 +1,6 @@
 // ==========================================================================
 // Plyr
-// plyr.js v1.6.18
+// plyr.js v1.6.20
 // https://github.com/selz/plyr
 // License: The MIT License (MIT)
 // ==========================================================================
@@ -44,7 +44,7 @@
         displayDuration:        true,
         loadSprite:             true,
         iconPrefix:             'plyr',
-        iconUrl:                'https://cdn.plyr.io/1.6.18/plyr.svg',
+        iconUrl:                'https://cdn.plyr.io/1.6.20/plyr.svg',
         clickToPlay:            true,
         hideControls:           true,
         showPosterOnEnd:        false,
@@ -1181,7 +1181,7 @@
                 // Only load external sprite using AJAX
                 if (iconUrl.external) {
                     _log('Loading external SVG sprite');
-                    loadSprite(iconUrl.url);
+                    loadSprite(iconUrl.url, "sprite-plyr");
                 }
                 else {
                     _log('Sprite will be used inline');
@@ -1439,8 +1439,6 @@
                 _setAttributes(vimeo, {
                     'src':                      'https://player.vimeo.com/video/' + mediaId + '?player_id=' + id + '&api=1&badge=0&byline=0&portrait=0&title=0',
                     'id':                       id,
-                    'webkitallowfullscreen':    '',
-                    'mozallowfullscreen':       '',
                     'allowfullscreen':          '',
                     'frameborder':              0
                 });
@@ -2843,14 +2841,28 @@
             _on(plyr.volume.input, 'wheel', function(event) {
                 event.preventDefault();
 
-                // Scroll down to decrease
+                // Detect "natural" scroll - suppored on OS X Safari only
+                // Other browsers on OS X will be inverted until support improves
+                var inverted = event.webkitDirectionInvertedFromDevice;
+
+                // Scroll down (or up on natural) to decrease
                 if (event.deltaY < 0 || event.deltaX > 0) {
-                    _decreaseVolume();
+                    if (inverted) {
+                        _decreaseVolume();
+                    }
+                    else {
+                        _increaseVolume();
+                    }
                 }
 
-                // Scroll up to increase
+                // Scroll up (or down on natural) to increase
                 if (event.deltaY > 0 || event.deltaX < 0) {
-                    _increaseVolume();
+                    if (inverted) {
+                        _increaseVolume();
+                    }
+                    else {
+                        _decreaseVolume();
+                    }
                 }
             });
         }
@@ -3202,9 +3214,14 @@
     }
 
     // Load a sprite
-    function loadSprite(url) {
+    function loadSprite(url, id) {
         var x = new XMLHttpRequest();
 
+        // If the id is set and sprite exists, bail
+        if (typeof id === 'string' && document.querySelector('#' + id) !== null) {
+            return;
+        }
+
         // Check for CORS support
         if ('withCredentials' in x) {
             x.open('GET', url, true);
@@ -3217,6 +3234,9 @@
         x.onload = function() {
             var c = document.createElement('div');
             c.setAttribute('hidden', '');
+            if (typeof id === 'string') {
+                c.setAttribute('id', id);
+            }
             c.innerHTML = x.responseText;
             document.body.insertBefore(c, document.body.childNodes[0]);
         }
@@ -3305,7 +3325,7 @@
 
                 // Bail if not enabled
                 if (!config.enabled) {
-                    return;
+                    return null;
                 }
 
                 // Create new instance

src/less/plyr.less

@@ -178,7 +178,6 @@
     padding-bottom: 56.25%; /* 16:9 */
     height: 0;
     overflow: hidden;
-    border-radius: inherit;
 
     iframe {
         position: absolute;