Merge branch 'master' into develop

# Conflicts: # dist/plyr.css # dist/plyr.js # src/js/plyr.js # src/less/plyr.less # src/scss/plyr.scss
2017-03-25 11:24:38 +11:00 · 2017-03-25 11:24:38 +11:00 · b083bf4297
commit b083bf4297
parent ebc7ed538a 4957e4d80c
10 changed files with 76 additions and 26 deletions
--- a/.github/issue_template.md
+++ b/.github/issue_template.md
@ -1,3 +1,7 @@
+<!--- 
+Please use this issue template as it makes replicating and fixing the issue easier! 
+--->
+
 - [ ] Issue does not already exist
 - [ ] Issue observed on https://plyr.io

@ -12,6 +16,12 @@
 - Operating System:
 - Version: 

+Players affected:
+- [ ] HTML5 Video
+- [ ] HTML5 Audio
+- [ ] YouTube
+- [ ] Vimeo
+
 ### Steps to reproduce 
 - 

--- a/changelog.md
+++ b/changelog.md
@ -1,5 +1,13 @@
 # Changelog

+## v2.0.12
+- Ability to set custom `blankUrl` for source changes (https://github.com/Selz/plyr/pull/504)
+- Ability to set caption button listener (https://github.com/Selz/plyr/pull/468)
+
+## v2.0.11
+- Fix for `cleanUp` being called twice (thanks to @sebastiancarlsson)
+- Fix for YouTube controls on iPad (fixes #391)
+
 ## v2.0.10
 - Added seek event fixes for Vimeo and YouTube (fixes #409)
 - Added support for embed URLs rather than ID only (fixes #345)
--- a/demo/index.html
+++ b/demo/index.html
@ -67,8 +67,8 @@
                <ul>
                    <li class="plyr__cite plyr__cite--video"><small><a href="http://viewfromabluemoon.com/" target="_blank">View From A Blue Moon</a> &copy; Brainfarm</small></li>
                    <li class="plyr__cite plyr__cite--audio"><small><a href="http://www.kishibashi.com/" target="_blank">Kishi Bashi &ndash; &ldquo;It All Began With A Burst&rdquo;</a> &copy; Kishi Bashi</small></li>
-                    <li class="plyr__cite plyr__cite--youtube"><small><a href="https://www.youtube.com/watch?v=bTqVqk7FSmY" target="_blank">View From A Blue Moon</a> on <span class="color--youtube"><svg class="icon"><use xlink:href="#icon-youtube"/></svg>YouTube</span></small>
-                    <li class="plyr__cite plyr__cite--vimeo"><small><a href="https://vimeo.com/ondemand/viewfromabluemoon4k" target="_blank">View From A Blue Moon</a> on <span class="color--vimeo"><svg class="icon"><use xlink:href="#icon-vimeo"/></svg>Vimeo</span></small>
+                    <li class="plyr__cite plyr__cite--youtube"><small><a href="https://www.youtube.com/watch?v=bTqVqk7FSmY" target="_blank">View From A Blue Moon</a> on <span class="color--youtube"><svg class="icon"><use xlink:href="#icon-youtube"/></svg>YouTube</span></small></li>
+                    <li class="plyr__cite plyr__cite--vimeo"><small><a href="https://vimeo.com/ondemand/viewfromabluemoon4k" target="_blank">View From A Blue Moon</a> on <span class="color--vimeo"><svg class="icon"><use xlink:href="#icon-vimeo"/></svg>Vimeo</span></small></li>
                </ul>
            </section>
        </main>
--- a/dist/plyr.css
+++ b/dist/plyr.css
--- a/dist/plyr.js
+++ b/dist/plyr.js
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
  "name": "plyr",
-  "version": "2.0.10",
+  "version": "2.0.12",
  "description": "A simple, accessible and customizable HTML5, YouTube and Vimeo media player",
  "homepage": "http://plyr.io",
  "main": "src/js/plyr.js",
--- a/readme.md
+++ b/readme.md
@ -1,6 +1,8 @@
 # Plyr
 A simple, accessible and customizable HTML5, YouTube and Vimeo media player.

+[Donate to support Plyr](#donate)
+
 [Checkout the demo](https://plyr.io)

 [![Image of Plyr](https://cdn.selz.com/plyr/plyr_v1.8.9.png)](https://plyr.io)
@ -132,10 +134,10 @@ Include the `plyr.js` script before the closing `</body>` tag and then call `ply
 <script>plyr.setup();</script>
 ```

-If you want to use our CDN for the JavaScript, you can use the following:
+If you want to use our CDN (provided by [Fastly](https://www.fastly.com/)) for the JavaScript, you can use the following:

 ```html
-<script src="https://cdn.plyr.io/2.0.10/plyr.js"></script>
+<script src="https://cdn.plyr.io/2.0.12/plyr.js"></script>
 ```

 ### CSS
@ -145,14 +147,14 @@ Include the `plyr.css` stylsheet into your `<head>`
 <link rel="stylesheet" href="path/to/plyr.css">
 ```

-If you want to use our CDN for the default CSS, you can use the following:
+If you want to use our CDN (provided by [Fastly](https://www.fastly.com/)) for the default CSS, you can use the following:

 ```html
-<link rel="stylesheet" href="https://cdn.plyr.io/2.0.10/plyr.css">
+<link rel="stylesheet" href="https://cdn.plyr.io/2.0.12/plyr.css">
 ```

 ### SVG Sprite
-The SVG sprite is loaded automatically from our CDN. To change this, see the [options](#Options) below. For reference, the CDN hosted SVG sprite can be found at `https://cdn.plyr.io/2.0.10/plyr.svg`.
+The SVG sprite is loaded automatically from our CDN (provided by [Fastly](https://www.fastly.com/)). To change this, see the [options](#options) below. For reference, the CDN hosted SVG sprite can be found at `https://cdn.plyr.io/2.0.12/plyr.svg`.

 ## Advanced

@ -284,6 +286,12 @@ Note the single quotes encapsulating the JSON and double quotes on the object ke
      <td><code>plyr</code></td>
      <td>Specify the id prefix for the icons used in the default controls (e.g. "plyr-play" would be "plyr"). This is to prevent clashes if you're using your own SVG sprite but with the default controls. Most people can ignore this option.</td>
    </tr>
+    <tr>
+      <td><code>blankUrl</code></td>
+      <td>String</td>
+      <td><code>https://cdn.selz.com/plyr/blank.mp4</code></td>
+      <td>Specify a URL or path to a blank video file used to properly cancel network requests. See <a href="https://github.com/Selz/plyr/issues/174">issue #174</a> for more info.</td>
+    </tr>
    <tr>
      <td><code>debug</code></td>
      <td>Boolean</td>
@ -1050,7 +1058,7 @@ Fullscreen in Plyr is supported by all browsers that [currently support it](http

 &sup2; Native player used (no support for `<progress>` or `<input type="range">`) but the API is supported (v1.0.28+)

-&sup3; IE10 has no native fullscreen support, fallback can be used (see options)
+&sup3; IE10 has no native fullscreen support, fallback can be used (see [options](#options))

 The `enabled` option can be used to disable certain User Agents. For example, if you don't want to use Plyr for smartphones, you could use:

@ -1070,6 +1078,10 @@ If you find anything weird with Plyr, please let us know using the GitHub issues
 ## Author
 Plyr is developed by [@sam_potts](https://twitter.com/sam_potts) / [sampotts.me](http://sampotts.me) with help from the awesome [contributors](https://github.com/Selz/plyr/graphs/contributors)

+## Donate
+Plyr costs money to run, not my time - I donate that for free but domains, hosting and more. Any help is appreciated...
+[Donate to support Plyr](https://www.paypal.me/pottsy/20usd)
+
 ## Mentions
 - [ProductHunt](https://www.producthunt.com/tech/plyr)
 - [The Changelog](http://thechangelog.com/plyr-simple-html5-media-player-custom-controls-webvtt-captions/)
@ -1104,5 +1116,10 @@ Also these links helped created Plyr:
 - [Media Events - W3.org](http://www.w3.org/2010/05/video/mediaevents.html)
 - [Styling the `<progress>` element - hongkiat.com](http://www.hongkiat.com/blog/html5-progress-bar/)

+## Thanks
+[![Fastly](https://www.fastly.com/sites/all/themes/custom/fastly2016/logo.png)](https://www.fastly.com/)
+
+Thanks to [Fastly](https://www.fastly.com/) for providing the CDN services. 
+
 ## Copyright and License
 [The MIT license](license.md).
--- a/src/js/plyr.js
+++ b/src/js/plyr.js
@ -3752,7 +3752,7 @@
            }

            // Captions
-            on(plyr.buttons.captions, 'click', toggleCaptions);
+            proxy(plyr.buttons.captions, 'click', config.listeners.captions, toggleCaptions);

            // Settings
            on(plyr.buttons.settings, 'click', function(event) {
--- a/src/less/plyr.less
+++ b/src/less/plyr.less
@ -198,7 +198,11 @@
 .plyr__video-embed {
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;
+    border-radius: inherit;
+    // Require overflow and z-index to force border-radius
    overflow: hidden;
+    z-index: 0;
+

    iframe {
        position: absolute;
@ -208,7 +212,6 @@
        height: 100%;
        border: 0;
        user-select: none;
-        z-index: 1;
    }

    // Vimeo hack
@ -362,6 +365,7 @@
    left: 0;
    right: 0;
    bottom: 0;
+    z-index: 2;
    padding: (@plyr-control-spacing * 5) @plyr-control-spacing @plyr-control-spacing;
    background: linear-gradient(fade(@plyr-video-controls-bg, 0%), fade(@plyr-video-controls-bg, 70%));
    border-bottom-left-radius: inherit;
@ -921,6 +925,10 @@
        height: 100%;
        width: 100%;
    }
+    .plyr__video-embed {
+        // Revert overflow change
+        overflow: visible;
+    }
    .plyr__controls {
        position: absolute;
        bottom: 0;
--- a/src/scss/plyr.scss
+++ b/src/scss/plyr.scss
@ -181,9 +181,12 @@
 .plyr__video-embed {
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;
-    overflow: hidden;
    border-radius: inherit;

+    // Require overflow and z-index to force border-radius
+    overflow: hidden;
+    z-index: 0;
+
    iframe {
        position: absolute;
        top: 0;
@ -741,6 +744,10 @@
        height: 100%;
        width: 100%;
    }
+    .plyr__video-embed {
+        // Revert overflow change
+        overflow: visible;
+    }
    .plyr__controls {
        position: absolute;
        bottom: 0;