Version bump

Broken progress bar styling IE10

changelog.md

@@ -1,5 +1,13 @@
 # Changelog
 
+## v1.6.4
+- Bug fix for undefined progress bar
+
+## v1.6.3
+- Seek back to 0 for all media on ended
+- Check for HTML5 video on ended reload
+- Update to docs for `showPosterOnEnd` option
+
 ## v1.6.2
 - Fix for tooltip displaying when duration is not set (fixes #177)
 - `showPosterOnEnd` option to show poster when HTML5 video ended (fixes #59)

gulpfile.js

@@ -214,7 +214,7 @@ options = {
 
 // If aws is setup
 if("cdn" in aws) {
-    var regex       = "(\\d+\\.)?(\\d+\\.)?(\\*|\\d+)",
+    var regex       = "(?:0|[1-9][0-9]*)\\.(?:0|[1-9][0-9]*)\.(?:0|[1-9][0-9]*)(?:-[\\da-z\\-]+(?:\.[\\da-z\\-]+)*)?(?:\\+[\\da-z\\-]+(?:\.[\\da-z\\-]+)*)?",
     cdnpath         = new RegExp(aws.cdn.bucket + "\/" + regex, "gi"),
     semver          = new RegExp("v" + regex, "gi"),
     localpath       = new RegExp("(\.\.\/)?dist", "gi");

package.json

@@ -1,6 +1,6 @@
 {
   "name": "plyr",
-  "version": "1.6.2",
+  "version": "1.6.5",
   "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.2/plyr.js` to `https://cdn.plyr.io/1.6.2/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.5/plyr.js` to `https://cdn.plyr.io/1.6.5/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.2/plyr.css">
-<script src="https://cdn.plyr.io/1.6.2/plyr.js"></script>
+<link rel="stylesheet" href="https://cdn.plyr.io/1.6.5/plyr.css">
+<script src="https://cdn.plyr.io/1.6.5/plyr.js"></script>
 ```
 
-You can also access the `sprite.svg` file at `https://cdn.plyr.io/1.6.2/sprite.svg`.
+You can also access the `sprite.svg` file at `https://cdn.plyr.io/1.6.5/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.2/sprite.svg');
+})(document, 'https://cdn.plyr.io/1.6.5/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.2/plyr.js"></script>
+<script src="https://cdn.plyr.io/1.6.5/plyr.js"></script>
 <script>plyr.setup();</script>
 ```
 
@@ -305,6 +305,12 @@ Options must be passed as an object to the `setup()` method as above or as JSON
     <td><code>true</code></td>
     <td>Hide video controls automatically after 2s of no mouse or focus movement, on control element blur (tab out), on playback start or entering fullscreen. As soon as the mouse is moved, a control element is focused or playback is paused, the controls reappear instantly.</td>
   </tr>
+  <tr>
+    <td><code>showPosterOnEnd</code></td>
+    <td>Boolean</td>
+    <td><code>false</code></td>
+    <td>This will restore and *reload* HTML5 video once playback is complete. Note: depending on the browser caching, this may result in the video downloading again (or parts of it). Use with caution.</td>
+  </tr>
   <tr>
     <td><code>tooltips</code></td>
     <td>Object</td>

src/js/plyr.js

@@ -1,6 +1,6 @@
 // ==========================================================================
 // Plyr
-// plyr.js v1.6.2
+// plyr.js v1.6.5
 // https://github.com/selz/plyr
 // License: The MIT License (MIT)
 // ==========================================================================
@@ -2218,7 +2218,7 @@
                 progress.value = value;
             }
             // Object of progress + text element
-            else {
+            else if (progress) {
                 if (progress.bar) {
                     progress.bar.value = value;
                 }
@@ -2765,11 +2765,14 @@
                 // Reset UI
                 _checkPlaying();
 
-                // Show poster on end
-                if(config.showPosterOnEnd) {
-                    // Seek to 0
-                    _seek(0);
+                // Seek to 0
+                _seek(0);
 
+                // Reset duration display
+                _displayDuration();
+
+                // Show poster on end
+                if(plyr.type === 'video' && config.showPosterOnEnd) {
                     // Re-load media
                     plyr.media.load();
                 }

src/less/plyr.less

@@ -76,9 +76,6 @@
         &::-moz-range-thumb {
             .plyr-range-thumb();
         }
-        &::-moz-focus-outer {
-            border: 0;
-        }
         
         // Microsoft
         &::-ms-track {
@@ -445,17 +442,16 @@
     transform-origin: 50% 100%;
     transition: transform .2s .1s ease, opacity .2s .1s ease;
 
-    // Arrows
     &::before {
+        // Arrows
         content: '';
         position: absolute;
         width: 0;
         height: 0;
         left: 50%;
         transform: translateX(-50%);
-    }
-    // The background triangle
-    &::before {
+    
+        // The background triangle
         bottom: -@plyr-tooltip-arrow-size;
         border-right: @plyr-tooltip-arrow-size solid transparent;
         border-top: @plyr-tooltip-arrow-size solid @plyr-tooltip-bg;
@@ -478,6 +474,7 @@
 // <progress> element
 .plyr__progress {
     position: relative;
+    display: inline-block;
     flex: 1;
 
     input[type="range"] {
@@ -632,6 +629,7 @@
 // --------------------------------------------------------------
 .plyr .plyr__volume { 
     display: none;
+    flex: 1;
     position: relative;
 
     input[type="range"] {

src/scss/plyr.scss

@@ -76,9 +76,6 @@
         &::-moz-range-thumb {
             @include plyr-range-thumb();
         }
-        &::-moz-focus-outer {
-            border: 0;
-        }
         
         // Microsoft
         &::-ms-track {
@@ -445,17 +442,16 @@
     transform-origin: 50% 100%;
     transition: transform .2s .1s ease, opacity .2s .1s ease;
 
-    // Arrows
     &::before {
+        // Arrows
         content: '';
         position: absolute;
         width: 0;
         height: 0;
         left: 50%;
         transform: translateX(-50%);
-    }
-    // The background triangle
-    &::before {
+    
+        // The background triangle
         bottom: -$plyr-tooltip-arrow-size;
         border-right: $plyr-tooltip-arrow-size solid transparent;
         border-top: $plyr-tooltip-arrow-size solid $plyr-tooltip-bg;
@@ -478,6 +474,7 @@
 // <progress> element
 .plyr__progress {
     position: relative;
+    display: inline-block;
     flex: 1;
 
     input[type="range"] {
@@ -632,6 +629,7 @@
 // --------------------------------------------------------------
 .plyr .plyr__volume { 
     display: none;
+    flex: 1;
     position: relative;
 
     input[type="range"] {