iOS bug fixes (fixes #213)

changelog.md

@@ -1,5 +1,8 @@
 # Changelog
 
+## v1.6.7
+- Fixes for using `source` API method on iOS
+
 ## v1.6.6
 - Icons cleaned up
 - IE11 button fix for tooltips (fixes #210)

package.json

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

readme.md

@@ -40,7 +40,7 @@ If you have any cool ideas or features, please let me know by [creating an issue
 ## Implementation
 Check `docs/index.html` and `docs/dist/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.6/plyr.js` to `https://cdn.plyr.io/1.6.6/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.7/plyr.js` to `https://cdn.plyr.io/1.6.7/plyr.js`
 
 ### Node Package Manager (NPM)
 
@@ -71,11 +71,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.6/plyr.css">
+<link rel="stylesheet" href="https://cdn.plyr.io/1.6.7/plyr.css">
-<script src="https://cdn.plyr.io/1.6.6/plyr.js"></script>
+<script src="https://cdn.plyr.io/1.6.7/plyr.js"></script>
 ```
 
-You can also access the `sprite.svg` file at `https://cdn.plyr.io/1.6.6/sprite.svg`.
+You can also access the `sprite.svg` file at `https://cdn.plyr.io/1.6.7/sprite.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.
@@ -113,7 +113,7 @@ Using AJAX means you can load the sprite from a different origin. Avoiding the i
 		c.innerHTML = a.responseText;
 		b.insertBefore(c, b.childNodes[0]);
 	};
-})(document, 'https://cdn.plyr.io/1.6.6/sprite.svg');
+})(document, 'https://cdn.plyr.io/1.6.7/sprite.svg');
 </script>
 ```
 
@@ -188,7 +188,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.6/plyr.js"></script>
+<script src="https://cdn.plyr.io/1.6.7/plyr.js"></script>
 <script>plyr.setup();</script>
 ```
 

src/js/plyr.js

@@ -1,6 +1,6 @@
 // ==========================================================================
 // Plyr
-// plyr.js v1.6.6
+// plyr.js v1.6.7
 // https://github.com/selz/plyr
 // License: The MIT License (MIT)
 // ==========================================================================
@@ -2162,6 +2162,10 @@
 
         // Update <progress> elements
         function _updateProgress(event) {
+            if (!plyr.supported.full) {
+                return;
+            }
+
             var progress    = plyr.progress.played,
                 value       = 0,
                 duration    = _getDuration();
@@ -2209,9 +2213,18 @@
 
         // Set <progress> value
         function _setProgress(progress, value) {
+            if (!plyr.supported.full) {
+                return;
+            }
+            
+            // Default to 0
             if (typeof value === 'undefined') {
                 value = 0;
             }
+            // Default to buffer
+            if (typeof progres === 'undefined') {
+                progress = plyr.progress.buffer;
+            }
 
             // One progress element passed
             if (progress instanceof HTMLElement) {
@@ -2471,7 +2484,7 @@
             _updateSeekDisplay();
 
             // Reset buffer progress
-            _setProgress(plyr.progress.buffer);
+            _setProgress();
 
             // Cancel current network requests
             _cancelRequests();

src/less/plyr.less

@@ -364,6 +364,7 @@
 
 // Large play button (video only)
 .plyr__play-large {
+    display: none;
     position: absolute;
     top: 50%;
     left: 50%;
@@ -389,6 +390,9 @@
         outline: 1px dotted fade(@plyr-video-control-color, 50%);
     }
 }
+.plyr .plyr__play-large {
+    display: inline-block;
+}
 .plyr--audio .plyr__play-large {
     display: none;
 }
@@ -481,7 +485,7 @@
 // <progress> element
 .plyr__progress {
     position: relative;
-    display: inline-block;
+    display: none;
     flex: 1;
 
     input[type="range"] {
@@ -504,6 +508,9 @@
         left: 0;
     }
 }
+.plyr .plyr__progress {
+    display: inline-block;
+}
 
 .plyr__progress--buffer,
 .plyr__progress--played,
@@ -636,8 +643,10 @@
 
 // Volume
 // --------------------------------------------------------------
-.plyr .plyr__volume { 
+.plyr__volume {
     display: none;
+}
+.plyr .plyr__volume {
     flex: 1;
     position: relative;
 

src/scss/plyr.scss

@@ -363,6 +363,7 @@
 
 // Large play button (video only)
 .plyr__play-large {
+    display: none;
     position: absolute;
     top: 50%;
     left: 50%;
@@ -388,6 +389,9 @@
         outline: 1px dotted transparentize($plyr-video-control-color, .5);
     }
 }
+.plyr .plyr__play-large {
+    display: inline-block;
+}
 .plyr--audio .plyr__play-large {
     display: none;
 }
@@ -479,8 +483,8 @@
 // --------------------------------------------------------------
 // <progress> element
 .plyr__progress {
+    display: none;
     position: relative;
-    display: inline-block;
     flex: 1;
 
     input[type="range"] {
@@ -503,6 +507,9 @@
         left: 0;
     }
 }
+.plyr .plyr__progress {
+    display: inline-block;
+}
 
 .plyr__progress--buffer,
 .plyr__progress--played,
@@ -635,8 +642,10 @@
 
 // Volume
 // --------------------------------------------------------------
-.plyr .plyr__volume { 
+.plyr__volume {
     display: none;
+}
+.plyr .plyr__volume {
     flex: 1;
     position: relative;