Cancel requests on source change (Fixes #174)

changelog.md

@@ -1,5 +1,23 @@
 # Changelog
 
+## v1.5.16
+- Cancel requests on source change (Fixes #174)
+
+## v1.5.15
+- Fix for CustomEvent polyfill and related bug (See #172)
+
+## v1.5.14
+- Volume storage fix (Fixes #171)
+
+## v1.5.13
+- Fix for manual caption rendering
+
+## v1.5.12
+- Added a duration option to pass the duration of the file
+- Added the ability to set options per element by setting a data-plyr attribute on the target elements (this might be useful for the duration option for example)
+- Fixes for Chrome and Safari caption rendering, they now use the default texttrack and cuechange events
+- Firefox bug fix for event not defined
+
 ## v1.5.11
 - iOS embed bug fixes (fixes #166)
 - Hide IE/Edge <input type='range'> tooltip (since we have a styled one) (fixes #160)

gulpfile.js

@@ -214,8 +214,10 @@ options = {
 
 // If aws is setup
 if("cdn" in aws) {
-    var cdnpath = new RegExp(aws.cdn.bucket + "\/(\\d+\\.)?(\\d+\\.)?(\\*|\\d+)","gi"),
-    localpath   = new RegExp("(\.\.\/)?dist", "gi");
+    var regex       = "(\\d+\\.)?(\\d+\\.)?(\\*|\\d+)",
+    cdnpath         = new RegExp(aws.cdn.bucket + "\/" + regex, "gi"),
+    semver          = new RegExp("v" + regex, "gi"),
+    localpath       = new RegExp("(\.\.\/)?dist", "gi");
 }
 
 // Publish version to CDN bucket
@@ -244,6 +246,11 @@ gulp.task("docs", function () {
         .pipe(replace(cdnpath, aws.cdn.bucket + "/" + version))
         .pipe(gulp.dest(root));
 
+    // Replace versioned files in plyr.js
+    gulp.src(path.join(root, "src/js/plyr.js"))
+        .pipe(replace(semver, "v" + version))
+        .pipe(gulp.dest(path.join(root, "src/js/")));
+
     // Replace local file paths with remote paths in docs
     // e.g. "../dist/plyr.js" to "https://cdn.plyr.io/x.x.x/plyr.js"
     gulp.src([paths.docs.root + "*.html"])

package.json

@@ -1,6 +1,6 @@
 {
   "name": "plyr",
-  "version": "1.5.14",
+  "version": "1.5.16",
   "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
 
 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.14/plyr.js` to `https://cdn.plyr.io/1.5.14/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.16/plyr.js` to `https://cdn.plyr.io/1.5.16/plyr.js`
 
 ### Node Package Manager (NPM)
 Using NPM, you can grab Plyr:
@@ -69,11 +69,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.14/plyr.css">
-<script src="https://cdn.plyr.io/1.5.14/plyr.js"></script>
+<link rel="stylesheet" href="https://cdn.plyr.io/1.5.16/plyr.css">
+<script src="https://cdn.plyr.io/1.5.16/plyr.js"></script>
 ```
 
-You can also access the `sprite.svg` file at `https://cdn.plyr.io/1.5.14/sprite.svg`.
+You can also access the `sprite.svg` file at `https://cdn.plyr.io/1.5.16/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.
@@ -175,7 +175,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.5.14/plyr.js"></script>
+<script src="https://cdn.plyr.io/1.5.16/plyr.js"></script>
 <script>plyr.setup();</script>
 ```
 

src/js/plyr.js

@@ -1,6 +1,6 @@
 // ==========================================================================
 // Plyr
-// plyr.js v1.5.3
+// plyr.js v1.5.16
 // https://github.com/selz/plyr
 // License: The MIT License (MIT)
 // ==========================================================================
@@ -2225,6 +2225,9 @@
                 _remove(plyr.videoContainer);
             }
 
+            // Cancel current network requests
+            _cancelRequests();
+
             // Remove the old media
             _remove(plyr.media);
 
@@ -2521,6 +2524,31 @@
             });
         }
 
+        // Cancel current network requests
+        // See https://github.com/Selz/plyr/issues/174
+        function _cancelRequests() {
+            if(!_inArray(config.types.html5, plyr.type)) {
+                return;
+            }
+
+            // Set empty src attribute
+            plyr.media.setAttribute('src', '');
+
+            // Remove child sources
+            var sources = plyr.media.querySelectorAll('source');
+            for (var i = 0; i < sources.length; i++) {
+                _remove(sources[i]);
+            }
+
+            // Load the new empty source
+            // This will cancel existing requests
+            // See https://github.com/Selz/plyr/issues/174
+            plyr.media.load();
+
+            // Debugging
+            _log("Cancelled network requests for old media");
+        }
+
         // Destroy an instance
         // Event listeners are removed when elements are removed
         // http://stackoverflow.com/questions/12528049/if-a-dom-element-is-removed-are-its-listeners-also-removed-from-memory
@@ -2547,7 +2575,7 @@
 
             // If video, we need to remove some more
             if (plyr.type === 'video') {
-                // Remove captions
+                // Remove captions container
                 _remove(_getElement(config.selectors.captions));
 
                 // Remove video wrapper
@@ -2833,16 +2861,18 @@
 // Custom event polyfill
 // https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent
 (function () {
+    if (typeof window.CustomEvent === 'function') {
+        return false;
+    }
+
     function CustomEvent (event, params) {
         params = params || { bubbles: false, cancelable: false, detail: undefined };
         var evt = document.createEvent('CustomEvent');
-        evt.initCustomEvent( event, params.bubbles, params.cancelable, params.detail );
+        evt.initCustomEvent(event, params.bubbles, params.cancelable, params.detail);
         return evt;
     }
 
     CustomEvent.prototype = window.Event.prototype;
 
-    if(!('CustomEvent' in window)) {
-        window.CustomEvent = CustomEvent;
-    }
+    window.CustomEvent = CustomEvent;
 })();