SASS fixes, docs changes (fixes #180), 'ready' event

Dynamically set YouTube autoplay from config

changelog.md

@@ -1,5 +1,16 @@
 # Changelog
 
+## v1.5.18
+- Added 'ready' event for initial setup complete or source change occurs
+- Fixed SASS stylesheet references to transparentize
+- Added default font stack to controls 
+- Docs fixes inc controls HTML (fixes #180)
+
+## v1.5.17
+- Expose YouTube and Vimeo API (docs update required) (Fixes #176)
+- Auto set title based on YouTube getVideoData() title property
+- Bug fix for Vimeo API change (Uncaught TypeError: Cannot read property 'value' of undefined) due to a change their end
+
 ## v1.5.16
 - Cancel requests on source change (Fixes #174)
 

controls.md

@@ -81,11 +81,11 @@ var controls = ["<div class='plyr__controls'>",
         "</button>",
         "<span class='plyr__time'>",
             "<span class='plyr__sr-only'>Current time</span>",
-            "<span class='plyr__current-time'>00:00</span>",
+            "<span class='plyr__time--curent'>00:00</span>",
         "</span>",
         "<span class='plyr__time'>",
             "<span class='plyr__sr-only'>Duration</span>",
-            "<span class='plyr__duration'>00:00</span>",
+            "<span class='plyr__time--duration'>00:00</span>",
         "</span>",
     "</span>",
     "<span class='plyr__controls--right'>",

package.json

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

readme.md

@@ -1,9 +1,9 @@
 # Plyr
 A simple, accessible and customizable HTML5, YouTube and Vimeo media player.
 
-[Checkout the demo](http://plyr.io)
+[Checkout the demo](https://plyr.io)
 
-[![Image of Plyr](https://cdn.plyr.io/static/plyr-v1.5.jpg)](http://plyr.io)
+[![Image of Plyr](https://cdn.plyr.io/static/plyr-v1.5.jpg)](https://plyr.io)
 
 ## Why?
 We wanted a lightweight, accessible and customizable media player that supports [*modern*](#browser-support) browsers. Sure, there are many other players out there but we wanted to keep things simple, using the right elements for the job.
@@ -25,7 +25,7 @@ We wanted a lightweight, accessible and customizable media player that supports
 Oh and yes, it works with Bootstrap.
 
 ## Changelog
-Check out the [changelog](changelog.md) to see what's been new with Plyr.
+Check out the [changelog](changelog.md) to see what's new with Plyr.
 
 ## Planned Development
 - Playback speed
@@ -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.16/plyr.js` to `https://cdn.plyr.io/1.5.16/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.18/plyr.js` to `https://cdn.plyr.io/1.5.18/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.16/plyr.css">
-<script src="https://cdn.plyr.io/1.5.16/plyr.js"></script>
+<link rel="stylesheet" href="https://cdn.plyr.io/1.5.18/plyr.css">
+<script src="https://cdn.plyr.io/1.5.18/plyr.js"></script>
 ```
 
-You can also access the `sprite.svg` file at `https://cdn.plyr.io/1.5.16/sprite.svg`.
+You can also access the `sprite.svg` file at `https://cdn.plyr.io/1.5.18/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.16/plyr.js"></script>
+<script src="https://cdn.plyr.io/1.5.18/plyr.js"></script>
 <script>plyr.setup();</script>
 ```
 
@@ -675,7 +675,7 @@ You can listen for events on the element you setup Plyr on. Some events only app
 		<td>Sent when an error occurs.&nbsp; The element's <code>error</code> attribute contains more information.</td>
 	</tr>
 	<tr>
-		<td><code>loadeddata/code></td>
+		<td><code>loadeddata</code></td>
 		<td>✔</td>
 		<td>The first frame of the media has finished loading.</td>
 	</tr>
@@ -759,6 +759,11 @@ You can listen for events on the element you setup Plyr on. Some events only app
 		<td></td>
 		<td>Captions toggled off</td>
 	</tr>
+	<tr>
+		<td><code>ready</code></td>
+		<td></td>
+		<td>Triggered when initial setup is done or a source change has occurred.</td>
+	</tr>
 	</tbody>
 </table>
 
@@ -767,7 +772,7 @@ Details borrowed from: [https://developer.mozilla.org/en-US/docs/Web/Guide/Event
 Here's an example of binding an event listener:
 
 ```javascript
-document.querySelector(".js-plyr").addEventListener("playing", function() {
+document.querySelector(".js-plyr").addEventListener("ready", function() {
   /* Magic happens */
 });
 ```
@@ -842,6 +847,8 @@ Plyr is developed by [@sam_potts](https://twitter.com/sam_potts) / [sampotts.me]
 
 ## Used by
 - [Selz.com](https://selz.com)
+- [koel - A personal music streaming server that works.](http://koel.phanan.net/)
+- [Oscar Radio](http://oscar-radio.xyz/)
 
 Let me know on [Twitter](https://twitter.com/sam_potts) I can add you to the above list. It'd be awesome to see how you're using Plyr :-)
 

src/js/plyr.js

@@ -1,6 +1,6 @@
 // ==========================================================================
 // Plyr
-// plyr.js v1.5.16
+// plyr.js v1.5.18
 // https://github.com/selz/plyr
 // License: The MIT License (MIT)
 // ==========================================================================
@@ -133,7 +133,7 @@
         // URLs
         urls: {
             vimeo: {
-                api:            'https://cdn.plyr.io/froogaloop/1.0.0/plyr.froogaloop.js',
+                api:            'https://cdn.plyr.io/froogaloop/1.0.1/plyr.froogaloop.js',
             },
             youtube: {
                 api:            'https://www.youtube.com/iframe_api'
@@ -1242,7 +1242,7 @@
 
         // Toggle style hook
         function _toggleStyleHook() {
-            _toggleClass(plyr.container, defaults.selectors.container.replace('.', ''), plyr.supported.full);
+            _toggleClass(plyr.container, config.selectors.container.replace('.', ''), plyr.supported.full);
         }
 
         // Toggle native controls
@@ -1420,6 +1420,9 @@
 
             // Set title
             _setTitle(_getElement('iframe'));
+
+            // Store reference to API
+            plyr.container.plyr.embed = plyr.embed;
         }
 
         // Handle YouTube API ready
@@ -1435,7 +1438,7 @@
             plyr.embed = new YT.Player(container.id, {
                 videoId: videoId,
                 playerVars: {
-                    autoplay: 0,
+                    autoplay: plyr.autoplay ? 1 : 0,
                     controls: (plyr.supported.full ? 0 : 1),
                     rel: 0,
                     showinfo: 0,
@@ -1470,6 +1473,9 @@
                         plyr.media.currentTime = instance.getCurrentTime();
                         plyr.media.muted = instance.isMuted();
 
+                        // Set title
+                        config.title = instance.getVideoData().title;
+
                         // Trigger timeupdate
                         _triggerEvent(plyr.media, 'timeupdate');
 
@@ -2225,6 +2231,9 @@
                 _remove(plyr.videoContainer);
             }
 
+            // Remove embed object
+            plyr.embed = null;
+
             // Cancel current network requests
             _cancelRequests();
 
@@ -2326,12 +2335,10 @@
             }
 
             // Set aria title and iframe title
-            if ('title' in source) {
-                config.title = source.title;
-                _setTitle();
-            }
+            config.title = source.title;
+            _setTitle();
 
-            // Reset media object
+            // Reset media objects
             plyr.container.plyr.media = plyr.media;
         }
 
@@ -2723,6 +2730,9 @@
 
             // Display duration
             _displayDuration();
+
+            // Ready event
+            _triggerEvent(plyr.container, 'ready');
         }
 
         // Initialize instance

src/less/plyr.less

@@ -11,7 +11,7 @@
 @plyr-gray-dark:                     #343F4A;
 @plyr-gray:                          #565D64;
 @plyr-gray-light:                    #6B7D86;
-@plyr-gray-lighter:                 #CBD0D3;
+@plyr-gray-lighter:                  #CBD0D3;
 @plyr-off-white:                     #D6DADD;
 
 // Font sizes
@@ -130,6 +130,7 @@
     position: relative;
     max-width: 100%;
     min-width: 290px;
+    font-family: Avenir, "Avenir Next", "Helvetica Neue", "Segoe UI", Helvetica, Arial, sans-serif;
 
     // border-box everything
     // http://paulirish.com/2012/box-sizing-border-box-ftw/

src/sass/plyr.scss

@@ -44,8 +44,8 @@ $plyr-control-bg-hover:              $plyr-blue !default;
 
 // Tooltips
 $plyr-tooltip-bg:                    $plyr-controls-bg !default;
-$plyr-tooltip-border-color:          transparentize(darken($plyr-controls-bg, 75%), .1) !default;
-$plyr-tooltip-arrow-border-color:    transparentize(darken($plyr-controls-bg, 75%), .2) !default;
+$plyr-tooltip-border-color:          transparentize(darken($plyr-controls-bg, 75%), .9) !default;
+$plyr-tooltip-arrow-border-color:    transparentize(darken($plyr-controls-bg, 75%), .8) !default;
 
 $plyr-tooltip-border-width:          1px;
 $plyr-tooltip-shadow:                0 0 5px $plyr-tooltip-border-color, 0 0 0 $plyr-tooltip-border-width $plyr-tooltip-border-color;
@@ -55,11 +55,11 @@ $plyr-tooltip-arrow-size:            6px !default;
 $plyr-tooltip-radius:                3px !default;
 
 // Progress
-$plyr-progress-bg:                   transparentize($plyr-gray, .2) !default;
+$plyr-progress-bg:                   transparentize($plyr-gray, .8) !default;
 $plyr-progress-playing-bg:           $plyr-blue !default;
-$plyr-progress-buffered-bg:          transparentize($plyr-gray, .25) !default;
+$plyr-progress-buffered-bg:          transparentize($plyr-gray, .75) !default;
 $plyr-progress-loading-size:         40px !default;
-$plyr-progress-loading-bg:           transparentize(#000, .15) !default;
+$plyr-progress-loading-bg:           transparentize(#000, .85) !default;
 
 // Volume
 $plyr-volume-track-height:           6px !default;
@@ -130,6 +130,7 @@ $plyr-bp-captions-large:             768px !default; // When captions jump to th
     position: relative;
     max-width: 100%;
     min-width: 290px;
+    font-family: Avenir, "Avenir Next", "Helvetica Neue", "Segoe UI", Helvetica, Arial, sans-serif;
 
     // border-box everything
     // http://paulirish.com/2012/box-sizing-border-box-ftw/
@@ -218,7 +219,7 @@ $plyr-bp-captions-large:             768px !default; // When captions jump to th
         span {
             border-radius: 2px;
             padding: 3px 10px;
-            background: transparentize(#000, .9);
+            background: transparentize(#000, .1);
         }
         span:empty {
             display: none;
@@ -243,7 +244,7 @@ $plyr-bp-captions-large:             768px !default; // When captions jump to th
         background: $plyr-controls-bg;
         line-height: 1;
         text-align: center;
-        box-shadow: 0 1px 1px transparentize($plyr-gray-dark, .2);
+        box-shadow: 0 1px 1px transparentize($plyr-gray-dark, .8);
 
         // Clear floats
         &::after {