Removed Hogan from Docs (Fixes #128)

Fix typo

bundles.json

@@ -16,11 +16,9 @@
         },
         "js": {
             "docs.js": [
-                "docs/src/js/lib/hogan-3.0.2.mustache.js",
                 "docs/src/js/lib/classlist.js",
-                "docs/dist/templates.js",
                 "docs/src/js/docs.js"
             ]
         }
     }
-}
+}

changelog.md

@@ -1,5 +1,17 @@
 # Changelog
 
+# v1.3.5
+- Fixed bug with API use on basic supported browsers
+
+# v1.3.4
+- Code cleanup by @calvintam236
+
+# v1.3.3
+- Removed captions being read by screen readers
+
+# v1.3.2
+- Voiceover fix for captions
+
 # v1.3.1 
 - ARIA improvements for captions being read
 

controls.md

@@ -1,10 +1,10 @@
 # Controls
 
-This is the markup that is rendered for the Plyr controls. You can use the default controls or provide a customized version of markup based on your needs. 
+This is the markup that is rendered for the Plyr controls. You can use the default controls or provide a customized version of markup based on your needs.
 
 ## Internationalization using default controls
 
-You can provide an `i18n` object as one of your options when initialising the plugin which we be used when rendering the controls. 
+You can provide an `i18n` object as one of your options when initialising the plugin which we be used when rendering the controls.
 
 ### Example
 
@@ -30,16 +30,16 @@ Note: `{seektime}` will be replaced with your configured seek time or the defaul
 
 ## Using custom HTML
 
-The example on [plyr.io](http://plyr.io) setup uses a Hogan template. Check out `controls.html` in `/src/templates` to get an idea of how the default html is structured.
+You can specify the HTML for the controls using the `html` option.
 
-The classes and data attributes used in your template should match the `selectors` option. 
+The classes and data attributes used in your template should match the `selectors` option.
 
 You need to add several placeholders to your html template that are replaced when rendering:
 
 - `{id}` - the dynamically generated ID for the player (for form controls)
 - `{seektime}` - the seek time specified in options for fast forward and rewind
 
-You can include only the controls you need when specifying custom html. 
+You can include only the controls you need when specifying custom html.
 
 ### Example
 
@@ -88,14 +88,14 @@ This is an example `html` option with all controls.
         "</span>",
     "</span>",
     "<span class='player-controls-right'>",
-        "<button type="button" data-player="mute">",
+        "<button type='button' data-player='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>",
         "</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">",
+        "<button type='button' data-player='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>",
@@ -107,4 +107,4 @@ This is an example `html` option with all controls.
         "</button>",
     "</span>",
 "</div>"].join("\n");
-```
+```

docs/dist/templates.js

@@ -1,2 +0,0 @@
-    var templates = {};
-    templates['controls'] = new Hogan.Template({code: function (c,p,i) { var t=this;t.b(i=i||"");t.b("<div class=\"player-controls\">");t.b("\n" + i);t.b("    <div class=\"player-progress\">");t.b("\n" + i);t.b("        <label for=\"seek{id}\" class=\"sr-only\">Seek</label>");t.b("\n" + i);t.b("        <input id=\"seek{id}\" class=\"player-progress-seek\" type=\"range\" min=\"0\" max=\"100\" step=\"0.5\" value=\"0\" data-player=\"seek\">");t.b("\n" + i);t.b("        <progress class=\"player-progress-played\" max=\"100\" value=\"0\">");t.b("\n" + i);t.b("            <span>0</span>% played");t.b("\n" + i);t.b("        </progress>");t.b("\n" + i);t.b("        <progress class=\"player-progress-buffer\" max=\"100\" value=\"0\">");t.b("\n" + i);t.b("            <span>0</span>% buffered");t.b("\n" + i);t.b("        </progress>");t.b("\n" + i);t.b("    </div>");t.b("\n" + i);t.b("    <span class=\"player-controls-left\">");t.b("\n" + i);t.b("        <button type=\"button\" data-player=\"restart\">");t.b("\n" + i);t.b("            <svg><use xlink:href=\"#icon-restart\"></use></svg>");t.b("\n" + i);t.b("            <span class=\"sr-only\">Restart</span>");t.b("\n" + i);t.b("        </button>");t.b("\n" + i);t.b("        <button type=\"button\" data-player=\"rewind\">");t.b("\n" + i);t.b("            <svg><use xlink:href=\"#icon-rewind\"></use></svg>");t.b("\n" + i);t.b("            <span class=\"sr-only\">Rewind {seektime} secs</span>");t.b("\n" + i);t.b("        </button>");t.b("\n" + i);t.b("        <button type=\"button\" data-player=\"play\">");t.b("\n" + i);t.b("            <svg><use xlink:href=\"#icon-play\"></use></svg>");t.b("\n" + i);t.b("            <span class=\"sr-only\">Play</span>");t.b("\n" + i);t.b("        </button>");t.b("\n" + i);t.b("        <button type=\"button\" data-player=\"pause\">");t.b("\n" + i);t.b("            <svg><use xlink:href=\"#icon-pause\"></use></svg>");t.b("\n" + i);t.b("            <span class=\"sr-only\">Pause</span>");t.b("\n" + i);t.b("        </button>");t.b("\n" + i);t.b("        <button type=\"button\" data-player=\"fast-forward\">");t.b("\n" + i);t.b("            <svg><use xlink:href=\"#icon-fast-forward\"></use></svg>");t.b("\n" + i);t.b("            <span class=\"sr-only\">Forward {seektime} secs</span>");t.b("\n" + i);t.b("        </button>");t.b("\n" + i);t.b("        <span class=\"player-time\">");t.b("\n" + i);t.b("            <span class=\"sr-only\">Current time</span>");t.b("\n" + i);t.b("            <span class=\"player-current-time\">00:00</span>");t.b("\n" + i);t.b("        </span>");t.b("\n" + i);t.b("        <span class=\"player-time\">");t.b("\n" + i);t.b("            <span class=\"sr-only\">Duration</span>");t.b("\n" + i);t.b("            <span class=\"player-duration\">00:00</span>");t.b("\n" + i);t.b("        </span>");t.b("\n" + i);t.b("    </span>");t.b("\n" + i);t.b("    <span class=\"player-controls-right\">");t.b("\n" + i);t.b("        <button type=\"button\" data-player=\"mute\">");t.b("\n" + i);t.b("            <svg class=\"icon-muted\"><use xlink:href=\"#icon-muted\"></use></svg>");t.b("\n" + i);t.b("            <svg><use xlink:href=\"#icon-volume\"></use></svg>");t.b("\n" + i);t.b("            <span class=\"sr-only\">Toggle Mute</span>");t.b("\n" + i);t.b("        </button>");t.b("\n" + i);t.b("        <label for=\"volume{id}\" class=\"sr-only\">Volume</label>");t.b("\n" + i);t.b("        <input id=\"volume{id}\" class=\"player-volume\" type=\"range\" min=\"0\" max=\"10\" step=\"0.5\" value=\"0\" data-player=\"volume\">");t.b("\n" + i);t.b("        <button type=\"button\" data-player=\"captions\">");t.b("\n" + i);t.b("            <svg class=\"icon-captions-on\"><use xlink:href=\"#icon-captions-on\"></use></svg>");t.b("\n" + i);t.b("            <svg><use xlink:href=\"#icon-captions-off\"></use></svg>");t.b("\n" + i);t.b("            <span class=\"sr-only\">Toggle Captions</span>");t.b("\n" + i);t.b("        </button>");t.b("\n" + i);t.b("        <button type=\"button\" data-player=\"fullscreen\">");t.b("\n" + i);t.b("            <svg class=\"icon-exit-fullscreen\"><use xlink:href=\"#icon-exit-fullscreen\"></use></svg>");t.b("\n" + i);t.b("            <svg><use xlink:href=\"#icon-enter-fullscreen\"></use></svg>");t.b("\n" + i);t.b("            <span class=\"sr-only\">Toggle Fullscreen</span>");t.b("\n" + i);t.b("        </button>");t.b("\n" + i);t.b("    </span>");t.b("\n" + i);t.b("</div>");return t.fl(); },partials: {}, subs: {  }});

docs/error.html

@@ -6,7 +6,7 @@
         <meta name="viewport" content="width=device-width, initial-scale=1">
 
         <!-- Docs styles -->
-        <link rel="stylesheet" href="//cdn.plyr.io/1.3.1/docs.css">
+        <link rel="stylesheet" href="//cdn.plyr.io/1.3.7/docs.css">
     </head>
     <body>
         <main>

docs/index.html

@@ -8,24 +8,26 @@
         <meta name="viewport" content="width=device-width, initial-scale=1">
 
         <!-- Styles -->
-        <link rel="stylesheet" href="https://cdn.plyr.io/1.3.1/plyr.css?3">
+        <link rel="stylesheet" href="https://cdn.plyr.io/1.3.7/plyr.css">
 
         <!-- Docs styles -->
-        <link rel="stylesheet" href="https://cdn.plyr.io/1.3.1/docs.css?1">
+        <link rel="stylesheet" href="https://cdn.plyr.io/1.3.7/docs.css">
     </head>
     <body>
         <header>
             <h1>Plyr</h1>
-            <p>A simple HTML5 media player with custom controls and WebVTT captions by <a href="https://twitter.com/sam_potts" target="_blank">@sam_potts</a></p>
+            <p>A simple HTML5 media player with custom controls and WebVTT captions by <a href="https://twitter.com/sam_potts" target="_blank">@sam_potts</a> from <a href="https://twitter.com/selz" target="_blank">@selz</a></p>
             <nav>
                 <ul>
                     <li>
-                        <a href="https://github.com/selz/plyr" target="_blank" class="btn btn-primary">Download on GitHub</a>
-                        <span class="btn-count js-stargazers-count">&hellip;</span>
+                        <a href="https://github.com/selz/plyr" target="_blank" class="btn btn-primary" data-shr-network="github">
+                            <svg class="icon"><use xlink:href="#shr-github"/></svg>Download on GitHub
+                        </a>
                     </li>
                     <li>
-                        <a href="https://twitter.com/intent/tweet?text=A+simple+HTML5+media+player+with+custom+controls+and+WebVTT+captions.&url=http%3A%2F%2Fplyr.io&via=Sam_Potts" target="_blank" class="btn js-popup" data-window-height="250" data-window-width="500">Tweet</a>
-                        <span class="btn-count js-tweet-count">&hellip;</span>
+                        <a href="https://twitter.com/intent/tweet?text=A+simple+HTML5+media+player+with+custom+controls+and+WebVTT+captions.&url=http%3A%2F%2Fplyr.io&via=Sam_Potts" target="_blank" class="btn btn-twitter" data-shr-network="twitter">
+                            <svg class="icon"><use xlink:href="#shr-twitter"/></svg>Tweet
+                        </a>
                     </li>
                 </ul>
             </nav>
@@ -42,14 +44,14 @@
             <div class="panels">
                 <section class="panel example-video active" id="video">
                     <div class="player">
-                        <video poster="https://cdn.plyr.io/static/poster.jpg" controls crossorigin>
+                        <video poster="poster.jpg" controls crossorigin>
                             <!-- Video files -->
                             <source src="https://cdn.selz.com/plyr/1.0/movie.mp4" type="video/mp4">
                             <source src="https://cdn.selz.com/plyr/1.0/movie.webm" type="video/webm">
-                            
+
                             <!-- Text track file -->
-                            <track kind="captions" label="English" srclang="en" src="https://cdn.selz.com/plyr/1.0/en.vtt" default>
-                            
+                            <track kind="captions" label="English" srclang="en" src="https://cdn.selz.com/plyr/1.0/example_captions_en.vtt" default>
+
                             <!-- Fallback for browsers that don't support the <video> element -->
                             <a href="https://cdn.selz.com/plyr/1.0/movie.mp4">Download</a>
                         </video>
@@ -68,7 +70,7 @@
                             <!-- Audio files -->
                             <source src="//cdn.selz.com/plyr/1.0/logistics-96-sample.mp3" type="audio/mp3">
                             <source src="//cdn.selz.com/plyr/1.0/logistics-96-sample.ogg" type="audio/ogg">
-                            
+
                             <!-- Fallback for browsers that don't support the <audio> element -->
                             <a href="//cdn.selz.com/plyr/1.0/logistics-96-sample.mp3">Download</a>
                         </audio>
@@ -81,29 +83,48 @@
         <!-- Load SVG defs -->
         <!-- You should bundle all SVG/Icons into one file using a build tool such as gulp and svg store -->
         <script>
-        (function(d, u){
-            var a = new XMLHttpRequest(),
-                b = d.body;
+        (function() {
+            [
+                "https://cdn.shr.one/0.1.9/sprite.svg",
+                "https://cdn.plyr.io/1.3.7/sprite.svg"
+            ]
+            .forEach(function(u) {
+                var x = new XMLHttpRequest(),
+                    b = document.body;
 
-            // Check for CORS support
-            // If you're loading from same domain, you can remove the if statement
-            if("withCredentials" in a) {
-                a.open("GET", u, true);
-                a.send();
-                a.onload = function(){
-                    var c = d.createElement("div");
+                // Check for CORS support
+                // If you're loading from same domain, you can remove the if statement
+                // XHR for Chrome/Firefox/Opera/Safari
+                if ("withCredentials" in x) {
+                    x.open("GET", u, true);
+                }
+                // XDomainRequest for older IE
+                else if (typeof XDomainRequest != "undefined") {
+                    x = new XDomainRequest();
+                    x.open("GET", u);
+                }
+                else {
+                    return;
+                }
+
+                x.send();
+                x.onload = function() {
+                    var c = document.createElement("div");
                     c.setAttribute("hidden", "");
-                    c.innerHTML = a.responseText;
+                    c.innerHTML = x.responseText;
                     b.insertBefore(c, b.childNodes[0]);
                 }
-            }
-        })(document, "https://cdn.plyr.io/1.3.1/sprite.svg");
+            });
+        })();
         </script>
 
         <!-- Plyr core script -->
-        <script src="https://cdn.plyr.io/1.3.1/plyr.js?1"></script>
+        <script src="https://cdn.plyr.io/1.3.7/plyr.js"></script>
+
+        <!-- Shr core script -->
+        <script src="https://cdn.shr.one/0.1.9/shr.js"></script>
 
         <!-- Docs script -->
-        <script src="https://cdn.plyr.io/1.3.1/docs.js?1"></script>
+        <script src="https://cdn.plyr.io/1.3.7/docs.js"></script>
     </body>
 </html>

docs/index.master.html

@@ -0,0 +1,130 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8" />
+        <title>Plyr - A simple HTML5 media player</title>
+        <meta name="description" content="A simple HTML5 media player with custom controls and WebVTT captions.">
+        <meta name="author" content="Sam Potts">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+
+        <!-- Styles -->
+        <link rel="stylesheet" href="../dist/plyr.css">
+
+        <!-- Docs styles -->
+        <link rel="stylesheet" href="dist/docs.css">
+    </head>
+    <body>
+        <header>
+            <h1>Plyr</h1>
+            <p>A simple HTML5 media player with custom controls and WebVTT captions by <a href="https://twitter.com/sam_potts" target="_blank">@sam_potts</a> from <a href="https://twitter.com/selz" target="_blank">@selz</a></p>
+            <nav>
+                <ul>
+                    <li>
+                        <a href="https://github.com/selz/plyr" target="_blank" class="btn btn-primary" data-shr-network="github">
+                            <svg class="icon"><use xlink:href="#shr-github"/></svg>Download on GitHub
+                        </a>
+                    </li>
+                    <li>
+                        <a href="https://twitter.com/intent/tweet?text=A+simple+HTML5+media+player+with+custom+controls+and+WebVTT+captions.&url=http%3A%2F%2Fplyr.io&via=Sam_Potts" target="_blank" class="btn btn-twitter" data-shr-network="twitter">
+                            <svg class="icon"><use xlink:href="#shr-twitter"/></svg>Tweet
+                        </a>
+                    </li>
+                </ul>
+            </nav>
+        </header>
+
+        <main role="main" id="main">
+            <nav class="btn-bar nav-panel">
+                <ul>
+                    <li><a href="#video" class="btn active btn-small">Video</a></li>
+                    <li><a href="#youtube" class="btn btn-small">YouTube</a></li>
+                    <li><a href="#audio" class="btn btn-small">Audio</a></li>
+                </ul>
+            </nav>
+            <div class="panels">
+                <section class="panel example-video active" id="video">
+                    <div class="player">
+                        <video poster="poster.jpg" controls crossorigin>
+                            <!-- Video files -->
+                            <source src="https://cdn.selz.com/plyr/1.0/movie.mp4" type="video/mp4">
+                            <source src="https://cdn.selz.com/plyr/1.0/movie.webm" type="video/webm">
+
+                            <!-- Text track file -->
+                            <track kind="captions" label="English" srclang="en" src="https://cdn.selz.com/plyr/1.0/example_captions_en.vtt" default>
+
+                            <!-- Fallback for browsers that don't support the <video> element -->
+                            <a href="https://cdn.selz.com/plyr/1.0/movie.mp4">Download</a>
+                        </video>
+                    </div>
+                    <small>Big Buck Bunny. More info can be found at <a href="https://peach.blender.org" target="_blank">peach.blender.org</a>.</small>
+                </section>
+                <section class="panel example-video" id="youtube">
+                    <div class="player">
+                        <div data-video-id="Au87oAJ2jeE" data-type="youtube"></div>
+                    </div>
+                    <small>Envato's "Made By" interview of <a href="https://www.youtube.com/watch?v=Au87oAJ2jeE" target="_blank">Dan Cederholm</a> from <a href="https://dribbble.com" target="_blank">Dribbble</a>.</small>
+                </section>
+                <section class="panel example-audio" id="audio">
+                    <div class="player">
+                        <audio controls>
+                            <!-- Audio files -->
+                            <source src="//cdn.selz.com/plyr/1.0/logistics-96-sample.mp3" type="audio/mp3">
+                            <source src="//cdn.selz.com/plyr/1.0/logistics-96-sample.ogg" type="audio/ogg">
+
+                            <!-- Fallback for browsers that don't support the <audio> element -->
+                            <a href="//cdn.selz.com/plyr/1.0/logistics-96-sample.mp3">Download</a>
+                        </audio>
+                    </div>
+                    <small>"96" by Logistics, which can be purchased from <a href="https://www.hospitalrecords.com/shop/artist/logistics" target="_blank">Hospital Records</a>.</small>
+                </section>
+            </div>
+        </main>
+
+        <!-- Load SVG defs -->
+        <!-- You should bundle all SVG/Icons into one file using a build tool such as gulp and svg store -->
+        <script>
+        (function() {
+            [
+                "https://cdn.shr.one/0.1.9/sprite.svg",
+                "../dist/sprite.svg"
+            ]
+            .forEach(function(u) {
+                var x = new XMLHttpRequest(),
+                    b = document.body;
+
+                // Check for CORS support
+                // If you're loading from same domain, you can remove the if statement
+                // XHR for Chrome/Firefox/Opera/Safari
+                if ("withCredentials" in x) {
+                    x.open("GET", u, true);
+                }
+                // XDomainRequest for older IE
+                else if (typeof XDomainRequest != "undefined") {
+                    x = new XDomainRequest();
+                    x.open("GET", u);
+                }
+                else {
+                    return;
+                }
+
+                x.send();
+                x.onload = function() {
+                    var c = document.createElement("div");
+                    c.setAttribute("hidden", "");
+                    c.innerHTML = x.responseText;
+                    b.insertBefore(c, b.childNodes[0]);
+                }
+            });
+        })();
+        </script>
+
+        <!-- Plyr core script -->
+        <script src="../src/js/plyr.js"></script>
+
+        <!-- Shr core script -->
+        <script src="https://cdn.shr.one/0.1.9/shr.js"></script>
+
+        <!-- Docs script -->
+        <script src="dist/docs.js"></script>
+    </body>
+</html>

docs/src/js/docs.js

@@ -2,14 +2,13 @@
 // Docs example
 // ==========================================================================
 
-/*global plyr, templates */
+/*global plyr, shr*/
 
 // Setup the player
 plyr.setup({
 	debug: 	true,
 	volume: 9,
 	title: 	"Video demo",
-	html: 	templates.controls.render({}),
 	tooltips: true,
 	captions: {
 		defaultActive: true
@@ -31,118 +30,15 @@ plyr.setup({
 	}
 });
 
+// Setup shr
+shr.setup({
+	count: {
+		classname: "btn-count"
+	}
+});
+
 // General functions
-(function() { 
-	// Popup
-	function popup(event) {
-		// Prevent the link opening
-		if(event.target.nodeName.toLowerCase() == "a") {
-			if(event.preventDefault) { 
-				event.preventDefault();
-			}
-			else {
-				event.returnValue = false;
-			}
-		}
-
-		var link 	= event.target,
-			url		= link.href,
-			width 	= link.getAttribute("data-window-width") || 600,
-			height 	= link.getAttribute("data-window-height") || 600,
-			name 	= link.getAttribute("data-window-name") || "popup";
-
-		// If window exists, just focus it
-		if(window["window-"+name] && !window["window-"+name].closed) {
-			window["window-"+name].focus();
-		}
-		else {
-			// Get position
-			var left = window.screenLeft !== undefined ? window.screenLeft : screen.left;
-			var top = window.screenTop !== undefined ? window.screenTop : screen.top;
-
-			// Open in the centre of the screen
-			var x = (screen.width / 2) - (width / 2) + left,
-				y = (screen.height / 2) - (height / 2) + top;
-
-			// Open that window
-			window["window-"+name] = window.open(url, name, "top=" + y +",left="+ x +",width=" + width + ",height=" + height);
-
-			// Focus new window
-			window["window-"+name].focus();
-		}
-	}
-
-	// Trigger popups
-	document.querySelector(".js-popup").addEventListener("click", popup);
-
-	// Get JSONP
-	function getJSONP(url, callback) {
-	    var name = "jsonp_callback_" + Math.round(100000 * Math.random());
-
-	    // Cleanup to prevent memory leaks and hit original callback
-	    window[name] = function(data) {
-	        delete window[name];
-	        document.body.removeChild(script);
-	        callback(data);
-	    };
-
-	    // Create a faux script
-	    var script = document.createElement("script");
-	    script.setAttribute("src", url + (url.indexOf("?") >= 0 ? "&" : "?") + "callback=" + name);
-
-	    // Inject to the body
-	    document.body.appendChild(script);
-	}
-
-	// Get star count
-	var storageSupported = ("sessionStorage" in window),
-		selectors = {
-			github: 	".js-stargazers-count",
-			twitter: 	".js-tweet-count"
-		};
-
-	// Display the count next to the button
-	function displayCount(selector, count) {
-		document.querySelector(selector).innerHTML = count;
-	}
-
-	// Add star
-	function formatGitHubCount(count) {
-		return "★ " + count;
-	}
-
-	// Check if it's in session storage first
-	if(storageSupported && "github_stargazers" in window.sessionStorage) {
-		displayCount(selectors.github, formatGitHubCount(window.sessionStorage.github_stargazers));
-	}
-	else {
-		getJSONP("https://api.github.com/repos/selz/plyr?access_token=a46ac653210ba6a6be44260c29c333470c3fbbf5", function (json) {
-			if (json && typeof json.data.stargazers_count !== "undefined") {
-				// Update UI 
-				displayCount(selectors.github, formatGitHubCount(json.data.stargazers_count));
-
-				// Store in session storage
-				window.sessionStorage.github_stargazers = json.data.stargazers_count;
-			}
-		});
-	}
-
-	// Get tweet count
-	if(storageSupported && "tweets" in window.sessionStorage) {
-		displayCount(selectors.twitter, window.sessionStorage.tweets);
-	}
-	else {
-		getJSONP("https://cdn.api.twitter.com/1/urls/count.json?url=plyr.io", function (json) {
-			if (json && typeof json.count !== "undefined") {
-				// Update UI 
-				displayCount(selectors.twitter, json.count);
-
-				// Store in session storage
-				window.sessionStorage.tweets = json.count;
-			}
-		});
-	}
-
+(function() {
 	// Tabs
 	var tabs = document.querySelectorAll(".nav-panel a"),
 		panels = document.querySelectorAll(".panels > .panel"),
@@ -171,7 +67,7 @@ plyr.setup({
 	}
 })();
 
-// Google analytics 
+// Google analytics
 // For demo site (http://[www.]plyr.io) only
 if(document.domain.indexOf("plyr.io") > -1) {
 	(function(i,s,o,g,r,a,m){i.GoogleAnalyticsObject=r;i[r]=i[r]||function(){
@@ -180,4 +76,4 @@ if(document.domain.indexOf("plyr.io") > -1) {
 	})(window,document,"script","//www.google-analytics.com/analytics.js","ga");
 	ga("create", "UA-40881672-11", "auto");
 	ga("send", "pageview");
-}
+}

docs/src/js/lib/hogan-3.0.2.mustache.js

@@ -1,802 +0,0 @@
-/*!
- *  Copyright 2011 Twitter, Inc.
- *  Licensed under the Apache License, Version 2.0 (the "License");
- *  you may not use this file except in compliance with the License.
- *  You may obtain a copy of the License at
- *
- *  http://www.apache.org/licenses/LICENSE-2.0
- *
- *  Unless required by applicable law or agreed to in writing, software
- *  distributed under the License is distributed on an "AS IS" BASIS,
- *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- *  See the License for the specific language governing permissions and
- *  limitations under the License.
- */
-
-// A wrapper for compatibility with Mustache.js, quirks and all
-
-
-
-var Hogan = {};
-
-(function (Hogan) {
-  Hogan.Template = function (codeObj, text, compiler, options) {
-    codeObj = codeObj || {};
-    this.r = codeObj.code || this.r;
-    this.c = compiler;
-    this.options = options || {};
-    this.text = text || '';
-    this.partials = codeObj.partials || {};
-    this.subs = codeObj.subs || {};
-    this.buf = '';
-  }
-
-  Hogan.Template.prototype = {
-    // render: replaced by generated code.
-    r: function (context, partials, indent) { return ''; },
-
-    // variable escaping
-    v: hoganEscape,
-
-    // triple stache
-    t: coerceToString,
-
-    render: function render(context, partials, indent) {
-      return this.ri([context], partials || {}, indent);
-    },
-
-    // render internal -- a hook for overrides that catches partials too
-    ri: function (context, partials, indent) {
-      return this.r(context, partials, indent);
-    },
-
-    // ensurePartial
-    ep: function(symbol, partials) {
-      var partial = this.partials[symbol];
-
-      // check to see that if we've instantiated this partial before
-      var template = partials[partial.name];
-      if (partial.instance && partial.base == template) {
-        return partial.instance;
-      }
-
-      if (typeof template == 'string') {
-        if (!this.c) {
-          throw new Error("No compiler available.");
-        }
-        template = this.c.compile(template, this.options);
-      }
-
-      if (!template) {
-        return null;
-      }
-
-      // We use this to check whether the partials dictionary has changed
-      this.partials[symbol].base = template;
-
-      if (partial.subs) {
-        // Make sure we consider parent template now
-        if (!partials.stackText) partials.stackText = {};
-        for (key in partial.subs) {
-          if (!partials.stackText[key]) {
-            partials.stackText[key] = (this.activeSub !== undefined && partials.stackText[this.activeSub]) ? partials.stackText[this.activeSub] : this.text;
-          }
-        }
-        template = createSpecializedPartial(template, partial.subs, partial.partials,
-          this.stackSubs, this.stackPartials, partials.stackText);
-      }
-      this.partials[symbol].instance = template;
-
-      return template;
-    },
-
-    // tries to find a partial in the current scope and render it
-    rp: function(symbol, context, partials, indent) {
-      var partial = this.ep(symbol, partials);
-      if (!partial) {
-        return '';
-      }
-
-      return partial.ri(context, partials, indent);
-    },
-
-    // render a section
-    rs: function(context, partials, section) {
-      var tail = context[context.length - 1];
-
-      if (!isArray(tail)) {
-        section(context, partials, this);
-        return;
-      }
-
-      for (var i = 0; i < tail.length; i++) {
-        context.push(tail[i]);
-        section(context, partials, this);
-        context.pop();
-      }
-    },
-
-    // maybe start a section
-    s: function(val, ctx, partials, inverted, start, end, tags) {
-      var pass;
-
-      if (isArray(val) && val.length === 0) {
-        return false;
-      }
-
-      if (typeof val == 'function') {
-        val = this.ms(val, ctx, partials, inverted, start, end, tags);
-      }
-
-      pass = !!val;
-
-      if (!inverted && pass && ctx) {
-        ctx.push((typeof val == 'object') ? val : ctx[ctx.length - 1]);
-      }
-
-      return pass;
-    },
-
-    // find values with dotted names
-    d: function(key, ctx, partials, returnFound) {
-      var found,
-          names = key.split('.'),
-          val = this.f(names[0], ctx, partials, returnFound),
-          doModelGet = this.options.modelGet,
-          cx = null;
-
-      if (key === '.' && isArray(ctx[ctx.length - 2])) {
-        val = ctx[ctx.length - 1];
-      } else {
-        for (var i = 1; i < names.length; i++) {
-          found = findInScope(names[i], val, doModelGet);
-          if (found !== undefined) {
-            cx = val;
-            val = found;
-          } else {
-            val = '';
-          }
-        }
-      }
-
-      if (returnFound && !val) {
-        return false;
-      }
-
-      if (!returnFound && typeof val == 'function') {
-        ctx.push(cx);
-        val = this.mv(val, ctx, partials);
-        ctx.pop();
-      }
-
-      return val;
-    },
-
-    // find values with normal names
-    f: function(key, ctx, partials, returnFound) {
-      var val = false,
-          v = null,
-          found = false,
-          doModelGet = this.options.modelGet;
-
-      for (var i = ctx.length - 1; i >= 0; i--) {
-        v = ctx[i];
-        val = findInScope(key, v, doModelGet);
-        if (val !== undefined) {
-          found = true;
-          break;
-        }
-      }
-
-      if (!found) {
-        return (returnFound) ? false : "";
-      }
-
-      if (!returnFound && typeof val == 'function') {
-        val = this.mv(val, ctx, partials);
-      }
-
-      return val;
-    },
-
-    // higher order templates
-    ls: function(func, cx, partials, text, tags) {
-      var oldTags = this.options.delimiters;
-
-      this.options.delimiters = tags;
-      this.b(this.ct(coerceToString(func.call(cx, text)), cx, partials));
-      this.options.delimiters = oldTags;
-
-      return false;
-    },
-
-    // compile text
-    ct: function(text, cx, partials) {
-      if (this.options.disableLambda) {
-        throw new Error('Lambda features disabled.');
-      }
-      return this.c.compile(text, this.options).render(cx, partials);
-    },
-
-    // template result buffering
-    b: function(s) { this.buf += s; },
-
-    fl: function() { var r = this.buf; this.buf = ''; return r; },
-
-    // method replace section
-    ms: function(func, ctx, partials, inverted, start, end, tags) {
-      var textSource,
-          cx = ctx[ctx.length - 1],
-          result = func.call(cx);
-
-      if (typeof result == 'function') {
-        if (inverted) {
-          return true;
-        } else {
-          textSource = (this.activeSub && this.subsText && this.subsText[this.activeSub]) ? this.subsText[this.activeSub] : this.text;
-          return this.ls(result, cx, partials, textSource.substring(start, end), tags);
-        }
-      }
-
-      return result;
-    },
-
-    // method replace variable
-    mv: function(func, ctx, partials) {
-      var cx = ctx[ctx.length - 1];
-      var result = func.call(cx);
-
-      if (typeof result == 'function') {
-        return this.ct(coerceToString(result.call(cx)), cx, partials);
-      }
-
-      return result;
-    },
-
-    sub: function(name, context, partials, indent) {
-      var f = this.subs[name];
-      if (f) {
-        this.activeSub = name;
-        f(context, partials, this, indent);
-        this.activeSub = false;
-      }
-    }
-
-  };
-
-  //Find a key in an object
-  function findInScope(key, scope, doModelGet) {
-    var val;
-
-    if (scope && typeof scope == 'object') {
-
-      if (scope[key] !== undefined) {
-        val = scope[key];
-
-      // try lookup with get for backbone or similar model data
-      } else if (doModelGet && scope.get && typeof scope.get == 'function') {
-        val = scope.get(key);
-      }
-    }
-
-    return val;
-  }
-
-  function createSpecializedPartial(instance, subs, partials, stackSubs, stackPartials, stackText) {
-    function PartialTemplate() {};
-    PartialTemplate.prototype = instance;
-    function Substitutions() {};
-    Substitutions.prototype = instance.subs;
-    var key;
-    var partial = new PartialTemplate();
-    partial.subs = new Substitutions();
-    partial.subsText = {};  //hehe. substext.
-    partial.buf = '';
-
-    stackSubs = stackSubs || {};
-    partial.stackSubs = stackSubs;
-    partial.subsText = stackText;
-    for (key in subs) {
-      if (!stackSubs[key]) stackSubs[key] = subs[key];
-    }
-    for (key in stackSubs) {
-      partial.subs[key] = stackSubs[key];
-    }
-
-    stackPartials = stackPartials || {};
-    partial.stackPartials = stackPartials;
-    for (key in partials) {
-      if (!stackPartials[key]) stackPartials[key] = partials[key];
-    }
-    for (key in stackPartials) {
-      partial.partials[key] = stackPartials[key];
-    }
-
-    return partial;
-  }
-
-  var rAmp = /&/g,
-      rLt = /</g,
-      rGt = />/g,
-      rApos = /\'/g,
-      rQuot = /\"/g,
-      hChars = /[&<>\"\']/;
-
-  function coerceToString(val) {
-    return String((val === null || val === undefined) ? '' : val);
-  }
-
-  function hoganEscape(str) {
-    str = coerceToString(str);
-    return hChars.test(str) ?
-      str
-        .replace(rAmp, '&amp;')
-        .replace(rLt, '&lt;')
-        .replace(rGt, '&gt;')
-        .replace(rApos, '&#39;')
-        .replace(rQuot, '&quot;') :
-      str;
-  }
-
-  var isArray = Array.isArray || function(a) {
-    return Object.prototype.toString.call(a) === '[object Array]';
-  };
-
-})(typeof exports !== 'undefined' ? exports : Hogan);
-
-
-
-(function (Hogan) {
-  // Setup regex  assignments
-  // remove whitespace according to Mustache spec
-  var rIsWhitespace = /\S/,
-      rQuot = /\"/g,
-      rNewline =  /\n/g,
-      rCr = /\r/g,
-      rSlash = /\\/g,
-      rLineSep = /\u2028/,
-      rParagraphSep = /\u2029/;
-
-  Hogan.tags = {
-    '#': 1, '^': 2, '<': 3, '$': 4,
-    '/': 5, '!': 6, '>': 7, '=': 8, '_v': 9,
-    '{': 10, '&': 11, '_t': 12
-  };
-
-  Hogan.scan = function scan(text, delimiters) {
-    var len = text.length,
-        IN_TEXT = 0,
-        IN_TAG_TYPE = 1,
-        IN_TAG = 2,
-        state = IN_TEXT,
-        tagType = null,
-        tag = null,
-        buf = '',
-        tokens = [],
-        seenTag = false,
-        i = 0,
-        lineStart = 0,
-        otag = '{{',
-        ctag = '}}';
-
-    function addBuf() {
-      if (buf.length > 0) {
-        tokens.push({tag: '_t', text: new String(buf)});
-        buf = '';
-      }
-    }
-
-    function lineIsWhitespace() {
-      var isAllWhitespace = true;
-      for (var j = lineStart; j < tokens.length; j++) {
-        isAllWhitespace =
-          (Hogan.tags[tokens[j].tag] < Hogan.tags['_v']) ||
-          (tokens[j].tag == '_t' && tokens[j].text.match(rIsWhitespace) === null);
-        if (!isAllWhitespace) {
-          return false;
-        }
-      }
-
-      return isAllWhitespace;
-    }
-
-    function filterLine(haveSeenTag, noNewLine) {
-      addBuf();
-
-      if (haveSeenTag && lineIsWhitespace()) {
-        for (var j = lineStart, next; j < tokens.length; j++) {
-          if (tokens[j].text) {
-            if ((next = tokens[j+1]) && next.tag == '>') {
-              // set indent to token value
-              next.indent = tokens[j].text.toString()
-            }
-            tokens.splice(j, 1);
-          }
-        }
-      } else if (!noNewLine) {
-        tokens.push({tag:'\n'});
-      }
-
-      seenTag = false;
-      lineStart = tokens.length;
-    }
-
-    function changeDelimiters(text, index) {
-      var close = '=' + ctag,
-          closeIndex = text.indexOf(close, index),
-          delimiters = trim(
-            text.substring(text.indexOf('=', index) + 1, closeIndex)
-          ).split(' ');
-
-      otag = delimiters[0];
-      ctag = delimiters[delimiters.length - 1];
-
-      return closeIndex + close.length - 1;
-    }
-
-    if (delimiters) {
-      delimiters = delimiters.split(' ');
-      otag = delimiters[0];
-      ctag = delimiters[1];
-    }
-
-    for (i = 0; i < len; i++) {
-      if (state == IN_TEXT) {
-        if (tagChange(otag, text, i)) {
-          --i;
-          addBuf();
-          state = IN_TAG_TYPE;
-        } else {
-          if (text.charAt(i) == '\n') {
-            filterLine(seenTag);
-          } else {
-            buf += text.charAt(i);
-          }
-        }
-      } else if (state == IN_TAG_TYPE) {
-        i += otag.length - 1;
-        tag = Hogan.tags[text.charAt(i + 1)];
-        tagType = tag ? text.charAt(i + 1) : '_v';
-        if (tagType == '=') {
-          i = changeDelimiters(text, i);
-          state = IN_TEXT;
-        } else {
-          if (tag) {
-            i++;
-          }
-          state = IN_TAG;
-        }
-        seenTag = i;
-      } else {
-        if (tagChange(ctag, text, i)) {
-          tokens.push({tag: tagType, n: trim(buf), otag: otag, ctag: ctag,
-                       i: (tagType == '/') ? seenTag - otag.length : i + ctag.length});
-          buf = '';
-          i += ctag.length - 1;
-          state = IN_TEXT;
-          if (tagType == '{') {
-            if (ctag == '}}') {
-              i++;
-            } else {
-              cleanTripleStache(tokens[tokens.length - 1]);
-            }
-          }
-        } else {
-          buf += text.charAt(i);
-        }
-      }
-    }
-
-    filterLine(seenTag, true);
-
-    return tokens;
-  }
-
-  function cleanTripleStache(token) {
-    if (token.n.substr(token.n.length - 1) === '}') {
-      token.n = token.n.substring(0, token.n.length - 1);
-    }
-  }
-
-  function trim(s) {
-    if (s.trim) {
-      return s.trim();
-    }
-
-    return s.replace(/^\s*|\s*$/g, '');
-  }
-
-  function tagChange(tag, text, index) {
-    if (text.charAt(index) != tag.charAt(0)) {
-      return false;
-    }
-
-    for (var i = 1, l = tag.length; i < l; i++) {
-      if (text.charAt(index + i) != tag.charAt(i)) {
-        return false;
-      }
-    }
-
-    return true;
-  }
-
-  // the tags allowed inside super templates
-  var allowedInSuper = {'_t': true, '\n': true, '$': true, '/': true};
-
-  function buildTree(tokens, kind, stack, customTags) {
-    var instructions = [],
-        opener = null,
-        tail = null,
-        token = null;
-
-    tail = stack[stack.length - 1];
-
-    while (tokens.length > 0) {
-      token = tokens.shift();
-
-      if (tail && tail.tag == '<' && !(token.tag in allowedInSuper)) {
-        throw new Error('Illegal content in < super tag.');
-      }
-
-      if (Hogan.tags[token.tag] <= Hogan.tags['$'] || isOpener(token, customTags)) {
-        stack.push(token);
-        token.nodes = buildTree(tokens, token.tag, stack, customTags);
-      } else if (token.tag == '/') {
-        if (stack.length === 0) {
-          throw new Error('Closing tag without opener: /' + token.n);
-        }
-        opener = stack.pop();
-        if (token.n != opener.n && !isCloser(token.n, opener.n, customTags)) {
-          throw new Error('Nesting error: ' + opener.n + ' vs. ' + token.n);
-        }
-        opener.end = token.i;
-        return instructions;
-      } else if (token.tag == '\n') {
-        token.last = (tokens.length == 0) || (tokens[0].tag == '\n');
-      }
-
-      instructions.push(token);
-    }
-
-    if (stack.length > 0) {
-      throw new Error('missing closing tag: ' + stack.pop().n);
-    }
-
-    return instructions;
-  }
-
-  function isOpener(token, tags) {
-    for (var i = 0, l = tags.length; i < l; i++) {
-      if (tags[i].o == token.n) {
-        token.tag = '#';
-        return true;
-      }
-    }
-  }
-
-  function isCloser(close, open, tags) {
-    for (var i = 0, l = tags.length; i < l; i++) {
-      if (tags[i].c == close && tags[i].o == open) {
-        return true;
-      }
-    }
-  }
-
-  function stringifySubstitutions(obj) {
-    var items = [];
-    for (var key in obj) {
-      items.push('"' + esc(key) + '": function(c,p,t,i) {' + obj[key] + '}');
-    }
-    return "{ " + items.join(",") + " }";
-  }
-
-  function stringifyPartials(codeObj) {
-    var partials = [];
-    for (var key in codeObj.partials) {
-      partials.push('"' + esc(key) + '":{name:"' + esc(codeObj.partials[key].name) + '", ' + stringifyPartials(codeObj.partials[key]) + "}");
-    }
-    return "partials: {" + partials.join(",") + "}, subs: " + stringifySubstitutions(codeObj.subs);
-  }
-
-  Hogan.stringify = function(codeObj, text, options) {
-    return "{code: function (c,p,i) { " + Hogan.wrapMain(codeObj.code) + " }," + stringifyPartials(codeObj) +  "}";
-  }
-
-  var serialNo = 0;
-  Hogan.generate = function(tree, text, options) {
-    serialNo = 0;
-    var context = { code: '', subs: {}, partials: {} };
-    Hogan.walk(tree, context);
-
-    if (options.asString) {
-      return this.stringify(context, text, options);
-    }
-
-    return this.makeTemplate(context, text, options);
-  }
-
-  Hogan.wrapMain = function(code) {
-    return 'var t=this;t.b(i=i||"");' + code + 'return t.fl();';
-  }
-
-  Hogan.template = Hogan.Template;
-
-  Hogan.makeTemplate = function(codeObj, text, options) {
-    var template = this.makePartials(codeObj);
-    template.code = new Function('c', 'p', 'i', this.wrapMain(codeObj.code));
-    return new this.template(template, text, this, options);
-  }
-
-  Hogan.makePartials = function(codeObj) {
-    var key, template = {subs: {}, partials: codeObj.partials, name: codeObj.name};
-    for (key in template.partials) {
-      template.partials[key] = this.makePartials(template.partials[key]);
-    }
-    for (key in codeObj.subs) {
-      template.subs[key] = new Function('c', 'p', 't', 'i', codeObj.subs[key]);
-    }
-    return template;
-  }
-
-  function esc(s) {
-    return s.replace(rSlash, '\\\\')
-            .replace(rQuot, '\\\"')
-            .replace(rNewline, '\\n')
-            .replace(rCr, '\\r')
-            .replace(rLineSep, '\\u2028')
-            .replace(rParagraphSep, '\\u2029');
-  }
-
-  function chooseMethod(s) {
-    return (~s.indexOf('.')) ? 'd' : 'f';
-  }
-
-  function createPartial(node, context) {
-    var prefix = "<" + (context.prefix || "");
-    var sym = prefix + node.n + serialNo++;
-    context.partials[sym] = {name: node.n, partials: {}};
-    context.code += 't.b(t.rp("' +  esc(sym) + '",c,p,"' + (node.indent || '') + '"));';
-    return sym;
-  }
-
-  Hogan.codegen = {
-    '#': function(node, context) {
-      context.code += 'if(t.s(t.' + chooseMethod(node.n) + '("' + esc(node.n) + '",c,p,1),' +
-                      'c,p,0,' + node.i + ',' + node.end + ',"' + node.otag + " " + node.ctag + '")){' +
-                      't.rs(c,p,' + 'function(c,p,t){';
-      Hogan.walk(node.nodes, context);
-      context.code += '});c.pop();}';
-    },
-
-    '^': function(node, context) {
-      context.code += 'if(!t.s(t.' + chooseMethod(node.n) + '("' + esc(node.n) + '",c,p,1),c,p,1,0,0,"")){';
-      Hogan.walk(node.nodes, context);
-      context.code += '};';
-    },
-
-    '>': createPartial,
-    '<': function(node, context) {
-      var ctx = {partials: {}, code: '', subs: {}, inPartial: true};
-      Hogan.walk(node.nodes, ctx);
-      var template = context.partials[createPartial(node, context)];
-      template.subs = ctx.subs;
-      template.partials = ctx.partials;
-    },
-
-    '$': function(node, context) {
-      var ctx = {subs: {}, code: '', partials: context.partials, prefix: node.n};
-      Hogan.walk(node.nodes, ctx);
-      context.subs[node.n] = ctx.code;
-      if (!context.inPartial) {
-        context.code += 't.sub("' + esc(node.n) + '",c,p,i);';
-      }
-    },
-
-    '\n': function(node, context) {
-      context.code += write('"\\n"' + (node.last ? '' : ' + i'));
-    },
-
-    '_v': function(node, context) {
-      context.code += 't.b(t.v(t.' + chooseMethod(node.n) + '("' + esc(node.n) + '",c,p,0)));';
-    },
-
-    '_t': function(node, context) {
-      context.code += write('"' + esc(node.text) + '"');
-    },
-
-    '{': tripleStache,
-
-    '&': tripleStache
-  }
-
-  function tripleStache(node, context) {
-    context.code += 't.b(t.t(t.' + chooseMethod(node.n) + '("' + esc(node.n) + '",c,p,0)));';
-  }
-
-  function write(s) {
-    return 't.b(' + s + ');';
-  }
-
-  Hogan.walk = function(nodelist, context) {
-    var func;
-    for (var i = 0, l = nodelist.length; i < l; i++) {
-      func = Hogan.codegen[nodelist[i].tag];
-      func && func(nodelist[i], context);
-    }
-    return context;
-  }
-
-  Hogan.parse = function(tokens, text, options) {
-    options = options || {};
-    return buildTree(tokens, '', [], options.sectionTags || []);
-  }
-
-  Hogan.cache = {};
-
-  Hogan.cacheKey = function(text, options) {
-    return [text, !!options.asString, !!options.disableLambda, options.delimiters, !!options.modelGet].join('||');
-  }
-
-  Hogan.compile = function(text, options) {
-    options = options || {};
-    var key = Hogan.cacheKey(text, options);
-    var template = this.cache[key];
-
-    if (template) {
-      var partials = template.partials;
-      for (var name in partials) {
-        delete partials[name].instance;
-      }
-      return template;
-    }
-
-    template = this.generate(this.parse(this.scan(text, options.delimiters), text, options), text, options);
-    return this.cache[key] = template;
-  }
-})(typeof exports !== 'undefined' ? exports : Hogan);
-
-
-var Mustache = (function (Hogan) {
-
-  // Mustache.js has non-spec partial context behavior
-  function mustachePartial(name, context, partials, indent) {
-    var partialScope = this.f(name, context, partials, 0);
-    var cx = context;
-    if (partialScope) {
-      cx = cx.concat(partialScope);
-    }
-
-    return Hogan.Template.prototype.rp.call(this, name, cx, partials, indent);
-  }
-
-  var HoganTemplateWrapper = function(renderFunc, text, compiler){
-    this.rp = mustachePartial;
-    Hogan.Template.call(this, renderFunc, text, compiler);
-  };
-  HoganTemplateWrapper.prototype = Hogan.Template.prototype;
-
-  // Add a wrapper for Hogan's generate method. Mustache and Hogan keep
-  // separate caches, and Mustache returns wrapped templates.
-  var wrapper;
-  var HoganWrapper = function(){
-    this.cache = {};
-    this.generate = function(code, text, options) {
-      return new HoganTemplateWrapper(new Function('c', 'p', 'i', code), text, wrapper);
-    }
-  };
-  HoganWrapper.prototype = Hogan;
-  wrapper = new HoganWrapper();
-
-  return {
-    to_html: function(text, data, partials, sendFun) {
-      var template = wrapper.compile(text);
-      var result = template.render(data, partials);
-      if (!sendFun) {
-        return result;
-      }
-
-      sendFun(result);
-    }
-  }
-
-})(Hogan);

docs/src/less/components/buttons.less

@@ -67,6 +67,10 @@ nav {
 		box-shadow: inset 0 1px 1px rgba(0,0,0, .2);
 		position: relative;
 		z-index: 1;
+
+		.icon {
+			color: inherit;
+		}
 	}
 
 	@media (min-width: 560px) {
@@ -74,7 +78,7 @@ nav {
 	}
 }
 
-// Shared 
+// Shared
 .btn,
 .btn-count {
 	display: inline-block;
@@ -84,7 +88,7 @@ nav {
 	user-select: none;
 }
 
-// Buttons 
+// Buttons
 .btn {
 	padding: (@padding-base / 2) @padding-base;
 	background: @body-background;
@@ -92,14 +96,23 @@ nav {
 	box-shadow: inset 0 1px 0 #fff, 0 1px 1px rgba(0,0,0, .05);
 	text-shadow: 0 1px 1px #fff;
 	color: @gray;
+	transition: background .3s ease, border .3s ease, color .3s ease;
 
 	&:hover,
 	&:focus {
-		background-color: #fff;
-		border-color: darken(@gray-light, 5%);
-		color: @link-color;
+		border-color: darken(@gray-light, 8%);
+		color: @gray;
 		outline: 0;
 	}
+	&-youtube .icon {
+		color: @color-youtube;
+	}
+	&-vimeo .icon {
+		color: @color-vimeo;
+	}
+	&-twitter .icon {
+		color: @color-twitter;
+	}
 }
 .btn-primary {
 	background-image: linear-gradient(@link-color, darken(@link-color, 3%));
@@ -108,7 +121,7 @@ nav {
 	box-shadow: 0 1px 1px rgba(0,0,0, .15);
 	text-shadow: 0 1px 1px rgba(0,0,0, .1);
 	color: #fff;
-	
+
 	&:hover,
 	&:focus {
 		color: #fff;
@@ -123,8 +136,8 @@ nav {
 // Count bubble
 .btn-count {
 	position: relative;
-	margin-left: 6px;
-	padding: ((@padding-base / 2) - 1px);
+	margin-left: (@padding-base / 2);
+	padding: (@padding-base / 2) (@padding-base * .75);
 	background: #fff;
 	border: 1px solid @gray-light;
 
@@ -143,4 +156,4 @@ nav {
 		border-width: 1px 0 0 1px;
 		transform: rotate(-45deg) translate(-50%, -50%);
 	}
-}
+}

docs/src/less/components/icons.less

@@ -0,0 +1,22 @@
+// ==========================================================================
+// Icons
+// ==========================================================================
+
+// Base size icon styles
+.icon {
+	fill: currentColor;
+	width: @icon-size;
+	height: @icon-size;
+	vertical-align: -3px;
+}
+
+// Within elements
+a svg,
+button svg,
+label svg {
+	pointer-events: none;
+}
+a .icon,
+.btn .icon {
+	margin-right: (@padding-base / 2);
+}

docs/src/less/components/type.less

@@ -26,17 +26,24 @@ small {
     padding: 0 (@padding-base / 2);
     .font-size(14);
 }
+ul
+li {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+}
 
 // Links
 a {
     text-decoration: none;
     color: @link-color;
-    border-bottom: 1px solid currentColor;
-    transition: background .3s ease, color .3s ease;
+    border-bottom: 1px dotted currentColor;
+    transition: background .3s ease, color .3s ease, border .3s ease;
 
     &:hover,
     &:focus {
         color: @gray-dark;
+        border-bottom-color: rgba(0,0,0,0);
     }
     &:focus {
         .tab-focus();
@@ -44,4 +51,11 @@ a {
     &.logo {
         border: 0;
     }
-}
+}
+
+.color-vimeo {
+    color: @color-vimeo;
+}
+.color-youtube {
+    color: @color-youtube;
+}

docs/src/less/docs.less

@@ -14,21 +14,14 @@
 // Animation
 @import "lib/animation.less";
 
-// Base layout
-@import "components/base.less";
-
 // Type
 @import "lib/fontface.less";
 @import "components/type.less";
 
-// Buttons
+// Components
+@import "components/base.less";
+@import "components/icons.less";
 @import "components/buttons.less";
-
-// Panels
 @import "components/panels.less";
-
-// Error
 @import "components/error.less";
-
-// Examples
-@import "components/examples.less";
+@import "components/examples.less";

docs/src/less/variables.less

@@ -10,6 +10,11 @@
 @gray-lighter:              #dbe3e8;
 @off-white:                 #f2f5f7;
 
+// Brands
+@color-twitter:             #4BAAF4;
+@color-youtube:             #cc181e;
+@color-vimeo:               #19b7ed;
+
 // Base
 @body-background: 			@off-white;
 
@@ -18,6 +23,9 @@
 @padding-base:              20px;
 @arrow-size:                8px;
 
+// Icons
+@icon-size: 				18px;
+
 // Breakpoints
 @screen-sm:                 480px;
 @screen-md:                 768px;
@@ -27,4 +35,4 @@
 
 // Examples
 @example-width-audio: 		520px;
-@example-width-video: 		1200px;
+@example-width-video: 		1200px;

docs/src/templates/controls.html

@@ -1,61 +0,0 @@
-<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">
-            <span>0</span>% played
-        </progress>
-        <progress class="player-progress-buffer" max="100" value="0">
-            <span>0</span>% buffered
-        </progress>
-    </div>
-    <span class="player-controls-left">
-        <button type="button" data-player="restart">
-            <svg><use xlink:href="#icon-restart"></use></svg>
-            <span class="sr-only">Restart</span>
-        </button>
-        <button type="button" data-player="rewind">
-            <svg><use xlink:href="#icon-rewind"></use></svg>
-            <span class="sr-only">Rewind {seektime} secs</span>
-        </button>
-        <button type="button" data-player="play">
-            <svg><use xlink:href="#icon-play"></use></svg>
-            <span class="sr-only">Play</span>
-        </button>
-        <button type="button" data-player="pause">
-            <svg><use xlink:href="#icon-pause"></use></svg>
-            <span class="sr-only">Pause</span>
-        </button>
-        <button type="button" data-player="fast-forward">
-            <svg><use xlink:href="#icon-fast-forward"></use></svg>
-            <span class="sr-only">Forward {seektime} secs</span>
-        </button>
-        <span class="player-time">
-            <span class="sr-only">Current time</span>
-            <span class="player-current-time">00:00</span>
-        </span>
-        <span class="player-time">
-            <span class="sr-only">Duration</span>
-            <span class="player-duration">00:00</span>
-        </span>
-    </span>
-    <span class="player-controls-right">
-        <button type="button" data-player="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>
-        </button>
-        <label for="volume{id}" class="sr-only">Volume</label>
-        <input id="volume{id}" class="player-volume" type="range" min="0" max="10" step="0.5" value="0" data-player="volume">
-        <button type="button" data-player="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>
-        </button>
-        <button type="button" data-player="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>
-        </button>
-    </span>
-</div>

gulpfile.js

@@ -17,7 +17,6 @@ var fs          = require("fs"),
     prefix      = require("gulp-autoprefixer"),
     svgstore    = require("gulp-svgstore"),
     svgmin      = require("gulp-svgmin"),
-    hogan       = require("gulp-hogan-compile"),
     rename      = require("gulp-rename"),
     s3          = require("gulp-s3"),
     gzip        = require("gulp-gzip"),
@@ -42,8 +41,7 @@ paths = {
         // Source paths
         src: {
             less:       path.join(root, "docs/src/less/**/*"),
-            js:         path.join(root, "docs/src/js/**/*"),
-            templates:  path.join(root, "docs/src/templates/*.html")
+            js:         path.join(root, "docs/src/js/**/*")
         },
         // Output paths
         output:         path.join(root, "docs/dist/"),
@@ -54,7 +52,7 @@ paths = {
 },
 
 // Task arrays
-tasks = {    
+tasks = {
     less:   [],
     sass:   [],
     js:     []
@@ -66,7 +64,12 @@ package = loadJSON(path.join(root, "package.json"));
 
 // Load json
 function loadJSON(path) {
-    return JSON.parse(fs.readFileSync(path));
+    try {
+        return JSON.parse(fs.readFileSync(path));
+    }
+    catch(err) {
+        return {};
+    }
 }
 
 var build = {
@@ -88,7 +91,7 @@ var build = {
     },
     less: function(files, bundle) {
         for (var key in files) {
-            (function (key) {       
+            (function (key) {
                 var name = "less-" + key;
                 tasks.less.push(name);
 
@@ -107,7 +110,7 @@ var build = {
     },
     sass: function(files, bundle) {
         for (var key in files) {
-            (function (key) {       
+            (function (key) {
                 var name = "sass-" + key;
                 tasks.sass.push(name);
 
@@ -137,20 +140,6 @@ var build = {
                 .pipe(svgstore())
                 .pipe(gulp.dest(paths.plyr.output));
         });
-    },
-    templates: function() {
-        // Build templates
-        gulp.task("templates", function () {
-            return gulp
-                .src(paths.docs.src.templates)
-                .pipe(hogan("templates.js", {
-                    wrapper: false,
-                    templateName: function (file) {
-                        return path.basename(file.relative.replace(/\\/g, "-"), path.extname(file.relative));
-                    }
-                }))
-                .pipe(gulp.dest(paths.docs.output));
-        });
     }
 };
 
@@ -161,13 +150,12 @@ build.sass(bundles.plyr.sass, "plyr");
 build.sprite();
 
 // Docs files
-build.templates();
 build.less(bundles.docs.less, "docs");
 build.js(bundles.docs.js, "docs");
 
-// Build all JS (inc. templates)
+// Build all JS
 gulp.task("js", function(){
-    run("templates", tasks.js);
+    run(tasks.js);
 });
 
 // Build SASS (for testing, default is LESS)
@@ -185,12 +173,11 @@ gulp.task("watch", function () {
     // Docs
     gulp.watch(paths.docs.src.js, tasks.js);
     gulp.watch(paths.docs.src.less, tasks.less);
-    gulp.watch(paths.docs.src.templates, ["js"]);
 });
 
 // Default gulp task
 gulp.task("default", function(){
-    run("templates", tasks.js, tasks.less, "sprite", "watch");
+    run(tasks.js, tasks.less, "sprite", "watch");
 });
 
 // Publish a version to CDN and docs
@@ -215,14 +202,18 @@ options = {
         },
         gzippedOnly: true
     }
-},
-cdnpath = new RegExp(aws.cdn.bucket + "\/(\\d+\\.)?(\\d+\\.)?(\\*|\\d+)","gi");
+};
+
+// If aws is setup
+if("cdn" in aws) {
+    var cdnpath = new RegExp(aws.cdn.bucket + "\/(\\d+\\.)?(\\d+\\.)?(\\*|\\d+)","gi");
+}
 
 // Publish version to CDN bucket
 gulp.task("cdn", function () {
     console.log("Uploading " + version + " to " + aws.cdn.bucket);
 
-    // Upload to CDN 
+    // Upload to CDN
     gulp.src(paths.upload)
         .pipe(size({
             showFiles: true,
@@ -270,7 +261,7 @@ gulp.task("open", function () {
         }));
 });
 
-// Do everything 
+// Do everything
 gulp.task("publish", function () {
-    run("templates", tasks.js, tasks.less, "sprite", "cdn", "docs");
-});
+    run(tasks.js, tasks.less, "sprite", "cdn", "docs");
+});

package.json

@@ -1,29 +1,28 @@
 {
   "name": "plyr",
-  "version": "1.3.1",
+  "version": "1.3.7",
   "description": "A simple HTML5 media player using custom controls",
   "homepage": "http://plyr.io",
   "main": "gulpfile.js",
   "dependencies": {},
   "devDependencies": {
     "gulp": "^3.8.6",
-    "gulp-autoprefixer": "^0.0.8",
+    "gulp-autoprefixer": "^3.1.0",
     "gulp-concat": "^2.3.3",
     "gulp-gzip": "^1.0.0",
-    "gulp-hogan-compile": "^0.4.1",
-    "gulp-less": "^1.3.1",
-    "gulp-minify-css": "^0.3.6",
-    "gulp-open": "^0.3.2",
+    "gulp-less": "^3.0.5",
+    "gulp-minify-css": "^1.2.1",
+    "gulp-open": "^1.0.0",
     "gulp-rename": "^1.2.0",
     "gulp-replace": "^0.5.3",
     "gulp-s3": "^0.3.0",
-    "gulp-sass": "^1.3.3",
-    "gulp-size": "^1.2.1",
+    "gulp-sass": "^2.1.0",
+    "gulp-size": "^2.0.0",
     "gulp-svgmin": "^1.0.0",
     "gulp-svgstore": "^5.0.0",
-    "gulp-uglify": "^0.3.1",
-    "gulp-util": "^2.2.20",
-    "run-sequence": "^0.3.6"
+    "gulp-uglify": "^1.5.1",
+    "gulp-util": "^3.0.7",
+    "run-sequence": "^1.1.5"
   },
   "scripts": {
     "preinstall": "npm install -g gulp"

readme.md

@@ -1,7 +1,7 @@
 # Plyr
 A simple, accessible HTML5 media player. 
 
-[Checkout the demo](http://plyr.io)
+Checkout the [demo](http://plyr.io).
 
 [![Image of Plyr](https://cdn.plyr.io/static/plyr.jpg)](http://plyr.io)
 
@@ -24,23 +24,23 @@ We wanted a lightweight, accessible and customisable media player that just supp
 Oh and yes, it works with Bootstrap. 
 
 ## Changelog
-Check out [the changelog](changelog.md)
+Check out the [changelog](changelog.md).
 
-## Planned development
-- Playlists
-- ~~YouTube~~ and Vimeo support
+## Planned Development
+- Vimeo support
 - Playback speed
+- Playlists
 - Multiple language captions (with selection)
 - Audio captions
 ... and whatever else has been raised in [issues](https://github.com/Selz/plyr/issues)
 
-If you have any cool ideas or features, please let me know by [creating an issue](https://github.com/Selz/plyr/issues/new) or of course, forking and sending a pull request.
+If you have any cool ideas or features, please let me know by [creating an issue](https://github.com/Selz/plyr/issues/new) or, of course, forking and sending a pull request.
 
 ## 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.3.1/plyr.js` to `https://cdn.plyr.io/1.3.1/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.3.7/plyr.js` to `https://cdn.plyr.io/1.3.7/plyr.js`
 
 ### Bower
 If bower is your thang, you can grab Plyr using:
@@ -60,14 +60,14 @@ 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.3.1/plyr.css">
-<script src="https://cdn.plyr.io/1.3.1/plyr.js"></script>
+<link rel="stylesheet" href="https://cdn.plyr.io/1.3.7/plyr.css">
+<script src="https://cdn.plyr.io/1.3.7/plyr.js"></script>
 ```
 
-You can also access the `sprite.svg` file at `https://cdn.plyr.io/1.3.1/sprite.svg`.
+You can also access the `sprite.svg` file at `https://cdn.plyr.io/1.3.7/sprite.svg`.
 
 ### CSS
-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. 
+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. 
 
 ```html
 <link rel="stylesheet" href="dist/plyr.css">

src/sass/plyr.scss

@@ -19,9 +19,9 @@ $font-size-small:           14px !default;
 $font-size-base:            16px !default;
 
 // Captions
-$font-size-captions-base:   ceil(@font-size-base * 1.25) !default;
-$font-size-captions-medium: ceil(@font-size-base * 1.5) !default;
-$font-size-captions-large:  (@font-size-base * 2) !default;
+$font-size-captions-base:   ceil($font-size-base * 1.25) !default;
+$font-size-captions-medium: ceil($font-size-base * 1.5) !default;
+$font-size-captions-large:  ($font-size-base * 2) !default;
 
 // Controls
 $control-spacing:           10px !default;
@@ -211,7 +211,7 @@ $bp-captions-large:         768px !default; // When captions jump to the larger
             display: none;
         }
 
-        @media (min-width: @bp-captions-large) {
+        @media (min-width: $bp-captions-large) {
             font-size: $font-size-captions-medium;
         }
     }