Minor bug fix for clicking video to play/pause after source change

changelog.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## v1.5.4
+- Minor bug fix for clicking video to play/pause after source change
+
+## v1.5.3
+- Minor bug fix for occasional display of 0:00 as the media duration
+
 ## v1.5.2
 - `handlers` option renamed to `listeners`
 - Added event listeners for all types to the plyr container (playback, fullscreen, captions etc - see docs)

controls.md

@@ -46,64 +46,64 @@ You can include only the controls you need when specifying custom html.
 This is an example `html` option with all controls.
 
 ```javascript
-["<div class='player-controls'>",
-    "<div class='player-progress'>",
-        "<label for='seek{id}' class='sr-only'>Seek</label>",
-        "<input id='seek{id}' class='player-progress-seek' type='range' min='0' max='100' step='0.5' value='0' data-player='seek'>",
-        "<progress class='player-progress-played' max='100' value='0'>",
+["<div class='plyr__controls'>",
+    "<div class='plyr__progress'>",
+        "<label for='seek{id}' class='plyr__sr-only'>Seek</label>",
+        "<input id='seek{id}' class='plyr__progress--seek' type='range' min='0' max='100' step='0.5' value='0' data-plyr='seek'>",
+        "<progress class='plyr__progress--played' max='100' value='0'>",
             "<span>0</span>% played",
         "</progress>",
-        "<progress class='player-progress-buffer' max='100' value='0'>",
+        "<progress class='plyr__progress--buffer' max='100' value='0'>",
             "<span>0</span>% buffered",
         "</progress>",
     "</div>",
-    "<span class='player-controls-left'>",
-        "<button type='button' data-player='restart'>",
+    "<span class='plyr__controls--left'>",
+        "<button type='button' data-plyr='restart'>",
             "<svg><use xlink:href='#icon-restart'></use></svg>",
-            "<span class='sr-only'>Restart</span>",
+            "<span class='plyr__sr-only'>Restart</span>",
         "</button>",
-        "<button type='button' data-player='rewind'>",
+        "<button type='button' data-plyr='rewind'>",
             "<svg><use xlink:href='#icon-rewind'></use></svg>",
-            "<span class='sr-only'>Rewind {seektime} secs</span>",
+            "<span class='plyr__sr-only'>Rewind {seektime} secs</span>",
         "</button>",
-        "<button type='button' data-player='play'>",
+        "<button type='button' data-plyr='play'>",
             "<svg><use xlink:href='#icon-play'></use></svg>",
-            "<span class='sr-only'>Play</span>",
+            "<span class='plyr__sr-only'>Play</span>",
         "</button>",
-        "<button type='button' data-player='pause'>",
+        "<button type='button' data-plyr='pause'>",
             "<svg><use xlink:href='#icon-pause'></use></svg>",
-            "<span class='sr-only'>Pause</span>",
+            "<span class='plyr__sr-only'>Pause</span>",
         "</button>",
-        "<button type='button' data-player='fast-forward'>",
+        "<button type='button' data-plyr='fast-forward'>",
             "<svg><use xlink:href='#icon-fast-forward'></use></svg>",
-            "<span class='sr-only'>Forward {seektime} secs</span>",
+            "<span class='plyr__sr-only'>Forward {seektime} secs</span>",
         "</button>",
-        "<span class='player-time'>",
+        "<span class='plyr__time'>",
             "<span class='sr-only'>Current time</span>",
-            "<span class='player-current-time'>00:00</span>",
+            "<span class='plyr__current-time'>00:00</span>",
         "</span>",
-        "<span class='player-time'>",
+        "<span class='plyr__time'>",
             "<span class='sr-only'>Duration</span>",
-            "<span class='player-duration'>00:00</span>",
+            "<span class='plyr__duration'>00:00</span>",
         "</span>",
     "</span>",
-    "<span class='player-controls-right'>",
-        "<button type='button' data-player='mute'>",
+    "<span class='plyr__controls--right'>",
+        "<button type='button' data-plyr='mute'>",
             "<svg class='icon-muted'><use xlink:href='#icon-muted'></use></svg>",
             "<svg><use xlink:href='#icon-volume'></use></svg>",
-            "<span class='sr-only'>Toggle Mute</span>",
+            "<span class='plyr__sr-only'>Toggle Mute</span>",
         "</button>",
-        "<label for='volume{id}' class='sr-only'>Volume</label>",
-        "<input id='volume{id}' class='player-volume' type='range' min='0' max='10' value='5' data-player='volume'>",
-        "<button type='button' data-player='captions'>",
-            "<svg class='icon-captions-on'><use xlink:href='#icon-captions-on'></use></svg>",
+        "<label for='volume{id}' class='plyr__sr-only'>Volume</label>",
+        "<input id='volume{id}' class='plyr__volume' type='range' min='0' max='10' value='5' data-plyr='volume'>",
+        "<button type='button' data-plyr='captions'>",
+            "<svg class='icon--captions-on'><use xlink:href='#icon-captions-on'></use></svg>",
             "<svg><use xlink:href='#icon-captions-off'></use></svg>",
-            "<span class='sr-only'>Toggle Captions</span>",
+            "<span class='plyr__sr-only'>Toggle Captions</span>",
         "</button>",
-        "<button type='button' data-player='fullscreen'>",
-            "<svg class='icon-exit-fullscreen'><use xlink:href='#icon-exit-fullscreen'></use></svg>",
+        "<button type='button' data-plyr='fullscreen'>",
+            "<svg class='icon--exit-fullscreen'><use xlink:href='#icon-exit-fullscreen'></use></svg>",
             "<svg><use xlink:href='#icon-enter-fullscreen'></use></svg>",
-            "<span class='sr-only'>Toggle Fullscreen</span>",
+            "<span class='plyr__sr-only'>Toggle Fullscreen</span>",
         "</button>",
     "</span>",
 "</div>"].join("\n");

package.json

@@ -1,6 +1,6 @@
 {
   "name": "plyr",
-  "version": "1.5.3",
+  "version": "1.5.4",
   "description": "A simple HTML5 media player using custom controls",
   "homepage": "http://plyr.io",
   "main": "gulpfile.js",

readme.md

@@ -40,7 +40,7 @@ If you have any cool ideas or features, please let me know by [creating an issue
 
 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.5.3/plyr.js` to `https://cdn.plyr.io/1.5.3/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.5.4/plyr.js` to `https://cdn.plyr.io/1.5.4/plyr.js`
 
 ### Bower
 If bower is your thang, you can grab Plyr using:
@@ -60,11 +60,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.5.3/plyr.css">
-<script src="https://cdn.plyr.io/1.5.3/plyr.js"></script>
+<link rel="stylesheet" href="https://cdn.plyr.io/1.5.4/plyr.css">
+<script src="https://cdn.plyr.io/1.5.4/plyr.js"></script>
 ```
 
-You can also access the `sprite.svg` file at `https://cdn.plyr.io/1.5.3/sprite.svg`.
+You can also access the `sprite.svg` file at `https://cdn.plyr.io/1.5.4/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.sass` file included in `/src` in your build to save a request.
@@ -162,7 +162,7 @@ More info on CORS here:
 Here's an example of a default setup:
 
 ```html
-<script src="https://cdn.plyr.io/1.5.3/plyr.js"></script>
+<script src="https://cdn.plyr.io/1.5.4/plyr.js"></script>
 <script>plyr.setup();</script>
 ```
 

src/js/plyr.js

@@ -2320,22 +2320,6 @@
 
             // Captions
             _on(plyr.buttons.captions, 'click', _toggleCaptions);
-
-            // Click video
-            if (plyr.type === 'video' && config.click) {
-                _on(plyr.videoContainer, 'click', function() {
-                    if (plyr.media.paused) {
-                        _play();
-                    }
-                    else if (plyr.media.ended) {
-                        _seek();
-                        _play();
-                    }
-                    else {
-                        _pause();
-                    }
-                });
-            }
         }
 
         // Listen for media events
@@ -2372,6 +2356,22 @@
             // Loading
             _on(plyr.media, 'waiting canplay seeked', _checkLoading);
 
+            // Click video
+            if (plyr.type === 'video' && config.click) {
+                _on(plyr.videoContainer, 'click', function() {
+                    if (plyr.media.paused) {
+                        _play();
+                    }
+                    else if (plyr.media.ended) {
+                        _seek();
+                        _play();
+                    }
+                    else {
+                        _pause();
+                    }
+                });
+            }
+
             // Proxy events to container
             _on(plyr.media, config.events.join(' '), function(event) {
                 _triggerEvent(plyr.container, event.type);
@@ -2680,7 +2680,7 @@
 }));
 
 // Custom event polyfill
-//
+// https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent
 (function () {
     function CustomEvent (event, params) {
         params = params || { bubbles: false, cancelable: false, detail: undefined };