Bug fixes and improvements

Fixed typos

.gitignore

@@ -2,3 +2,5 @@ node_modules
 *.sublime-project
 *.sublime-workspace
 .DS_Store
+aws.json
+docs/index.dev.html

bower.json

@@ -1,6 +1,5 @@
 {
   "name": "plyr",
-  "version": "1.0.17",
   "description": "A simple HTML5 media player using custom controls",
   "homepage": "http://plyr.io",
   "keywords": [
@@ -14,10 +13,11 @@
   ],
   "dependencies": {},
   "main": [
-    "dist/css/plyr.css",
+    "dist/plyr.css",
-    "dist/js/plyr.js",
+    "dist/plyr.js",
     "dist/sprite.svg",
     "src/less/plyr.less",
+    "src/sass/plyr.sass",
     "src/js/plyr.js"
   ],
   "ignore": [
@@ -29,5 +29,5 @@
     "type": "git",
     "url": "git://github.com/selz/plyr.git"
   },
-  "license": "BSD"
+  "license": "MIT"
 }

bundles.json

@@ -17,7 +17,7 @@
 		"js": {
 			"docs.js": [
 				"docs/src/js/lib/hogan-3.0.2.mustache.js",
-				"docs/dist/js/templates.js",
+				"docs/dist/templates.js",
 				"docs/src/js/docs.js"
 			]
 		}

changelog.md

@@ -1,8 +1,20 @@
 # Changelog
 
-## v1.0.7
+## v1.0.20
+- Default controls included (Fixes #45)
+- Volume changes on `input` as well as `change` (Fixes #43)
+- Fix for undefined Play text
+- License changed to MIT
+
+## v1.0.19
+- Fixed firefox fullscreen issue (#38)
+
+## v1.0.18
+- Added CDN references
+
+## v1.0.17
 - SASS support added (thanks to @brunowego)
-- Docs completely seperated to avoid any confusion
+- Docs completely separated to avoid any confusion
 - New gulp tasks (will add more documentation for this)
 
 ## v1.0.16

controls.md

@@ -1,8 +1,8 @@
 # Controls HTML
 
-This is the markup that is rendered for the Plyr controls. The reason it's a seperate option is to allow full customization of markup based on your needs. It's a pet hate of other libraries that use `<a href="#">` or `<span>`s as buttons! 
+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. 
 
-The default Plyr setup uses a Hogan template. The reason being to allow for localization at a later date. Check out `controls.html` in `/src/templates` to get an idea of how the default html is structured. Alternatively just use the vanilla HTML below.
+The demo Plyr setup uses a Hogan template. This purely to allow for localization at a later date. Check out `controls.html` in `/src/templates` to get an idea of how the default html is structured. Alternatively check out the `plyr.js` source.
 
 ## Requirements
 
@@ -15,67 +15,65 @@ You need to add several placeholders to your html template that are replaced whe
 
 Currently all buttons and inputs need to be present for Plyr to work but later we'll make it more dynamic so if you omit a button or input, it'll still work. 
 
-## Vanilla HTML template
+## Default
 
-You can of course, just specify vanilla HTML. Here's an example snippet:
+This is the default `html` option from `plyr.js`.
 
-```html
+```javascript
-var controls = [
+["<div class='player-controls'>",
-'<div class="player-controls">',
+    "<div class='player-progress'>",
-	'<div class="player-progress">',
+        "<progress class='player-progress-played' max='100' value='0'>",
-		'<progress class="player-progress-played" max="100" value="0">',
+            "<span>0</span>% played",
-			'<span>0</span>% played',
+        "</progress>",
-		'</progress>',
+        "<progress class='player-progress-buffer' max='100' value='0'>",
-		'<progress class="player-progress-buffer" max="100" value="0">',
+            "<span>0</span>% buffered",
-			'<span>0</span>% buffered',
+        "</progress>",
-		'</progress>',
+    "</div>",
-	'</div>',
+    "<span class='player-controls-playback'>",
-	'<span class="player-controls-playback">',
+        "<button type='button' data-player='restart'>",
-		'<button type="button" data-player="restart">',
+            "<svg><use xlink:href='#icon-refresh'></use></svg>",
-			'<svg><use xlink:href="#icon-refresh"></use></svg>',
+            "<span class='sr-only'>Restart</span>",
-			'<span class="sr-only">Restart</span>',
+        "</button>",
-		'</button>',
+        "<button type='button' data-player='rewind'>",
-		'<button type="button" data-player="rewind">',
+            "<svg><use xlink:href='#icon-rewind'></use></svg>",
-			'<svg><use xlink:href="#icon-rewind"></use></svg>',
+            "<span class='sr-only'>Rewind <span class='player-seek-time'>{seektime}</span> seconds</span>",
-			'<span class="sr-only">Rewind <span class="player-seek-time">{seektime}</span> seconds</span>',
+        "</button>",
-		'</button>',
+        "<button type='button' data-player='play'>",
-		'<button type="button" data-player="play">',
+            "<svg><use xlink:href='#icon-play'></use></svg>",
-			'<svg><use xlink:href="#icon-play"></use></svg>',
+            "<span class='sr-only'>Play</span>",
-			'<span class="sr-only">Play</span>',
+        "</button>",
-		'</button>',
+        "<button type='button' data-player='pause'>",
-		'<button type="button" data-player="pause">',
+            "<svg><use xlink:href='#icon-pause'></use></svg>",
-			'<svg><use xlink:href="#icon-pause"></use></svg>',
+            "<span class='sr-only'>Pause</span>",
-			'<span class="sr-only">Pause</span>',
+        "</button>",
-		'</button>',
+        "<button type='button' data-player='fast-forward'>",
-		'<button type="button" data-player="fast-forward">',
+            "<svg><use xlink:href='#icon-fast-forward'></use></svg>",
-			'<svg><use xlink:href="#icon-fast-forward"></use></svg>',
+            "<span class='sr-only'>Fast forward <span class='player-seek-time'>{seektime}</span> seconds</span>",
-			'<span class="sr-only">Fast forward <span class="player-seek-time">{seektime}</span> seconds</span>',
+        "</button>",
-		'</button>',
+        "<span class='player-time'>",
-		'<span class="player-time">',
+            "<span class='sr-only'>Time</span>",
-			'<span class="sr-only">Time</span>',
+            "<span class='player-duration'>00:00</span>",
-			'<span class="player-duration">00:00</span>',
+        "</span>",
-		'</span>',
+    "</span>",
-	'</span>',
+    "<span class='player-controls-sound'>",
-	'<span class="player-controls-sound">',
+        "<input class='inverted sr-only' id='mute{id}' type='checkbox' data-player='mute'>",
-		'<input class="inverted sr-only" id="mute{id}" type="checkbox" data-player="mute">',
+        "<label id='mute{id}' for='mute{id}'>",
-		'<label id="mute{id}" for="mute{id}">',
+            "<svg class='icon-muted'><use xlink:href='#icon-muted'></use></svg>",
-			'<svg class="icon-muted"><use xlink:href="#icon-muted"></use></svg>',
+            "<svg><use xlink:href='#icon-sound'></use></svg>",
-			'<svg><use xlink:href="#icon-sound"></use></svg>',
+            "<span class='sr-only'>Mute</span>",
-			'<span class="sr-only">Mute</span>',
+        "</label>",
-		'</label>',
+        "<label for='volume{id}' class='sr-only'>Volume</label>",
-		'<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'>",
-		'<input id="volume{id}" class="player-volume" type="range" min="0" max="10" value="5" data-player="volume">',
+        "<input class='sr-only' id='captions{id}' type='checkbox' data-player='captions'>",
-		'<input class="sr-only" id="captions{id}" type="checkbox" data-player="captions">',
+        "<label for='captions{id}'>",
-		'<label for="captions{id}">',
+            "<svg><use xlink:href='#icon-bubble'></use></svg>",
-			'<svg><use xlink:href="#icon-bubble"></use></svg>',
+            "<span class='sr-only'>Captions</span>",
-			'<span class="sr-only">Captions</span>',
+        "</label>",
-		'</label>',
+        "<button type='button' data-player='fullscreen'>",
-		'<button type="button" data-player="fullscreen">',
+            "<svg class='icon-exit-fullscreen'><use xlink:href='#icon-collapse'></use></svg>",
-			'<svg class="icon-exit-fullscreen"><use xlink:href="#icon-collapse"></use></svg>',
+            "<svg><use xlink:href='#icon-expand'></use></svg>",
-			'<svg><use xlink:href="#icon-expand"></use></svg>',
+            "<span class='sr-only'>Toggle fullscreen</span>",
-			'<span class="sr-only">Toggle fullscreen</span>',
+        "</button>",
-		'</button>',
+    "</span>",
-	'</span>',
+"</div>"].join("\n");
-'</div>'
-].join("\n");
 ```

docs/dist/css/docs.css

@@ -1 +0,0 @@
-/*! normalize.css v2.1.3 | MIT License | git.io/normalize */article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,video{display:inline-block}audio:not([controls]){display:none;height:0}[hidden],template{display:none}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}a{background:0 0}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}hr{box-sizing:content-box;height:0}mark{background:#ff0;color:#000}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em}pre{white-space:pre-wrap}q{quotes:"\201C" "\201D" "\2018" "\2019"}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:0}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0}button,input{line-height:normal}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=search]{-webkit-appearance:textfield;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0}@font-face{font-family:Avenir;src:url(//cdn.sampotts.me/plyr/fonts/AvenirLTStd-Medium.woff2) format("woff2"),url(//cdn.sampotts.me/plyr/fonts/AvenirLTStd-Medium.woff) format("woff"),url(//cdn.sampotts.me/plyr/fonts/AvenirLTStd-Medium.ttf) format("truetype");font-style:normal;font-weight:400}@font-face{font-family:Avenir;src:url(//cdn.sampotts.me/plyr/fonts/AvenirLTStd-Heavy.woff2) format("woff2"),url(//cdn.sampotts.me/plyr/fonts/AvenirLTStd-Heavy.woff) format("woff"),url(//cdn.sampotts.me/plyr/fonts/AvenirLTStd-Heavy.ttf) format("truetype");font-style:normal;font-weight:600}*,::after,::before{box-sizing:border-box}body{font-family:Avenir,"Helvetica Neue",Helvetica,Arial,sans-serif;background:#fff;line-height:1.5;text-align:center;color:#6D797F}h1,h2{letter-spacing:-.025em;color:#2E3C44;margin:0 0 10px;line-height:1.2;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}h1{font-size:64px;font-size:4rem;color:#3498DB}p,small{margin:0 0 20px}small{display:block;padding:0 10px;font-size:14px;font-size:.9rem}header{padding:20px;margin-bottom:20px}header p{font-size:18px;font-size:1.1rem}@media (min-width:560px){header{padding-top:60px;padding-bottom:60px}}section{padding-bottom:20px}@media (min-width:560px){section{padding-bottom:40px}}a{text-decoration:none;color:#3498db;border-bottom:1px solid currentColor;transition:all .3s ease}a:focus,a:hover{color:#000}a:focus{outline:#343f4a dotted thin;outline-offset:1px}a.logo{border:0}.btn{display:inline-block;padding:10px 30px;background:#3498db;border:0;color:#fff;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-weight:600;border-radius:3px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.btn:focus,.btn:hover{color:#fff;background:#258cd1}.example-audio .player{max-width:480px}.example-video .player{max-width:1200px}.example-audio .player,.example-video .player{margin:0 auto 20px}.example-audio .player-fullscreen,.example-audio .player.fullscreen-active,.example-video .player-fullscreen,.example-video .player.fullscreen-active{max-width:none}footer{margin-bottom:20px}footer p{margin-bottom:10px}

docs/dist/docs.css

@@ -0,0 +1 @@
+/*! normalize.css v2.1.3 | MIT License | git.io/normalize */article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,video{display:inline-block}audio:not([controls]){display:none;height:0}[hidden],template{display:none}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}a{background:0 0}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}hr{box-sizing:content-box;height:0}mark{background:#ff0;color:#000}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em}pre{white-space:pre-wrap}q{quotes:"\201C" "\201D" "\2018" "\2019"}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:0}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0}button,input{line-height:normal}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=search]{-webkit-appearance:textfield;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0}@font-face{font-family:Avenir;src:url(//cdn.plyr.io/fonts/avenir-medium.woff2) format("woff2"),url(//cdn.plyr.io/fonts/avenir-medium.woff) format("woff"),url(//cdn.plyr.io/fonts/avenir-medium.ttf) format("truetype");font-style:normal;font-weight:400}@font-face{font-family:Avenir;src:url(//cdn.plyr.io/fonts/avenir-bold.woff2) format("woff2"),url(//cdn.plyr.io/fonts/avenir-bold.woff) format("woff"),url(//cdn.plyr.io/fonts/avenir-bold.ttf) format("truetype");font-style:normal;font-weight:600}*,::after,::before{box-sizing:border-box}body{font-family:Avenir,"Helvetica Neue",Helvetica,Arial,sans-serif;background:#fff;line-height:1.5;text-align:center;color:#6D797F}.error body,html.error{height:100%}.error body{width:100%;display:table;table-layout:fixed}.error main{display:table-cell;width:100%;vertical-align:middle}h1,h2{letter-spacing:-.025em;color:#2E3C44;margin:0 0 10px;line-height:1.2;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}h1{font-size:64px;font-size:4rem;color:#3498DB}p,small{margin:0 0 20px}small{display:block;padding:0 10px;font-size:14px;font-size:.9rem}header{padding:20px;margin-bottom:20px}header p{font-size:18px;font-size:1.1rem}@media (min-width:560px){header{padding-top:60px;padding-bottom:60px}}section{padding-bottom:20px}@media (min-width:560px){section{padding-bottom:40px}}a{text-decoration:none;color:#3498db;border-bottom:1px solid currentColor;transition:all .3s ease}a:focus,a:hover{color:#000}a:focus{outline:#343f4a dotted thin;outline-offset:1px}a.logo{border:0}.btn{display:inline-block;padding:10px 30px;background:#3498db;border:0;color:#fff;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-weight:600;border-radius:3px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.btn:focus,.btn:hover{color:#fff;background:#258cd1}.example-audio .player{max-width:480px}.example-video .player{max-width:1200px}.example-audio .player,.example-video .player{margin:0 auto 20px}.example-audio .player-fullscreen,.example-audio .player.fullscreen-active,.example-video .player-fullscreen,.example-video .player.fullscreen-active{max-width:none}footer{margin-bottom:20px}footer p{margin-bottom:10px}

docs/error.html

@@ -0,0 +1,18 @@
+<!doctype html>
+<html lang="en" class="error">
+	<head>
+		<meta charset="utf-8" />
+		<title>Doh. Looks like something went wrong.</title>
+		<meta name="viewport" content="width=device-width, initial-scale=1">
+
+		<!-- Docs styles -->
+		<link rel="stylesheet" href="//cdn.plyr.io/1.0.20/docs.css">
+	</head>
+	<body>
+		<main>
+			<h1>Doh.</h1>
+			<p>Looks like something went wrong.</p>
+			<a href="http://plyr.io" class="btn">Back to plyr.io</a>
+		</main>
+	</body>
+</html>

docs/index.html

@@ -8,16 +8,16 @@
 		<meta name="viewport" content="width=device-width, initial-scale=1">
 
 		<!-- Styles -->
-		<link rel="stylesheet" href="../dist/css/plyr.css">
+		<link rel="stylesheet" href="//cdn.plyr.io/1.0.20/plyr.css">
 
 		<!-- Docs styles -->
-		<link rel="stylesheet" href="dist/css/docs.css">
+		<link rel="stylesheet" href="//cdn.plyr.io/1.0.20/docs.css">
 	</head>
 	<body>
 		<header>
 			<h1>Plyr</h1>
 			<p>A simple HTML5 media player with custom controls and WebVTT captions.</p>
-			<a href="https://github.com/selz/plyr" target="_blank" class="btn">Download on Github</a>
+			<a href="https://github.com/selz/plyr" target="_blank" class="btn">Download on GitHub</a>
 		</header>
 
 		<main>
@@ -67,13 +67,13 @@
 		<!-- 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,p){var a=new XMLHttpRequest(),b=d.body;a.open("GET",p,!0);a.send();a.onload=function(){var c=d.createElement("div");c.style.display="none";c.innerHTML=a.responseText;b.insertBefore(c,b.childNodes[0])}})(document,"../dist/sprite.svg");
+		(function(d,p){var a=new XMLHttpRequest(),b=d.body;a.open("GET",p,!0);a.send();a.onload=function(){var c=d.createElement("div");c.style.display="none";c.innerHTML=a.responseText;b.insertBefore(c,b.childNodes[0])}})(document,"//cdn.plyr.io/1.0.20/sprite.svg");
 		</script>
 
 		<!-- Plyr core script -->
-		<script src="../dist/js/plyr.js"></script>
+		<script src="//cdn.plyr.io/1.0.20/plyr.js"></script>
 
 		<!-- Docs script -->
-		<script src="dist/js/docs.js"></script>
+		<script src="//cdn.plyr.io/1.0.20/docs.js"></script>
 	</body>
 </html>

docs/src/js/docs.js

@@ -15,8 +15,8 @@ plyr.setup({
 });
 
 // Google analytics 
-// For demo site (http://plyr.io) only
+// For demo site (http://[www.]plyr.io) only
-if(document.domain === "plyr.io") {
+if(document.domain.indexOf("plyr.io") > -1) {
 	(function(i,s,o,g,r,a,m){i.GoogleAnalyticsObject=r;i[r]=i[r]||function(){
 	(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
 	m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)

docs/src/less/docs.less

@@ -31,9 +31,6 @@
 }
 
 // Base
-html {
-	//font-size: 62.5%;
-}
 body {
 	font-family: "Avenir", "Helvetica Neue", Helvetica, Arial, sans-serif;
 	background: #fff;
@@ -42,6 +39,22 @@ body {
 	color: #6D797F;
 }
 
+// Error page
+html.error,
+.error body {
+	height: 100%;
+}
+.error body {
+	width: 100%;
+	display: table;
+	table-layout: fixed;
+}
+.error main {
+	display: table-cell;
+	width: 100%;
+	vertical-align: middle;
+}
+
 // Type
 h1,
 h2 {

docs/src/less/lib/fontface.less

@@ -1,16 +1,16 @@
 @font-face {
 	font-family: "Avenir";
-	src: 	url("//cdn.sampotts.me/plyr/fonts/AvenirLTStd-Medium.woff2") format("woff2"), 
+	src: 	url("//cdn.plyr.io/fonts/avenir-medium.woff2") format("woff2"), 
-			url("//cdn.sampotts.me/plyr/fonts/AvenirLTStd-Medium.woff") format("woff"), 
+			url("//cdn.plyr.io/fonts/avenir-medium.woff") format("woff"), 
-			url("//cdn.sampotts.me/plyr/fonts/AvenirLTStd-Medium.ttf")  format("truetype");
+			url("//cdn.plyr.io/fonts/avenir-medium.ttf")  format("truetype");
 	font-style:   normal;
 	font-weight:  400;
 }
 @font-face {
 	font-family: "Avenir";
-	src: 	url("//cdn.sampotts.me/plyr/fonts/AvenirLTStd-Heavy.woff2") format("woff2"), 
+	src: 	url("//cdn.plyr.io/fonts/avenir-bold.woff2") format("woff2"), 
-			url("//cdn.sampotts.me/plyr/fonts/AvenirLTStd-Heavy.woff") format("woff"), 
+			url("//cdn.plyr.io/fonts/avenir-bold.woff") format("woff"), 
-			url("//cdn.sampotts.me/plyr/fonts/AvenirLTStd-Heavy.ttf")  format("truetype");
+			url("//cdn.plyr.io/fonts/avenir-bold.ttf")  format("truetype");
 	font-style:   normal;
 	font-weight:  600;
 }

gulpfile.js

@@ -2,6 +2,7 @@
 // Gulp build script
 // ==========================================================================
 /*global require, __dirname*/
+/*jshint -W079 */
 
 var fs 			= require("fs"),
 	path 		= require("path"),
@@ -16,10 +17,15 @@ var fs 			= require("fs"),
 	prefix 		= require("gulp-autoprefixer"),
 	svgstore 	= require("gulp-svgstore"),
 	svgmin 		= require("gulp-svgmin"),
-	hogan 		= require("gulp-hogan-compile");
+	hogan 		= require("gulp-hogan-compile"),
+	rename 		= require("gulp-rename"),
+	s3 			= require("gulp-s3"),
+	gzip 		= require("gulp-gzip"),
+	replace  	= require("gulp-replace"),
+	open 		= require("gulp-open");
 
 var root = __dirname,
-	paths = {
+paths = {
 	plyr: {
 		// Source paths
 		src: {
@@ -29,11 +35,7 @@ var root = __dirname,
 			sprite: 	path.join(root, "src/sprite/*.svg")
 		},
 		// Output paths
-		output: {
+		output: 		path.join(root, "dist/")
-			js:  		path.join(root, "dist/js/"),
-			css:  		path.join(root, "dist/css/"),
-			sprite:  	path.join(root, "dist/")
-		}
 	},
 	docs: {
 		// Source paths
@@ -43,11 +45,11 @@ var root = __dirname,
 			templates: 	path.join(root, "docs/src/templates/*.html")
 		},
 		// Output paths
-		output: {
+		output: 		path.join(root, "docs/dist/"),
-			js:  		path.join(root, "docs/dist/js/"),
+		// Docs
-			css:  		path.join(root, "docs/dist/css/")
+		root: 			path.join(root, "docs/")
-		}
+	},
-	}
+	upload: [path.join(root, "dist/**"), path.join(root, "docs/dist/**")]
 },
 
 // Task arrays
@@ -58,7 +60,8 @@ tasks = {
 },
 
 // Fetch bundles from JSON
-bundles = loadJSON(path.join(root, "bundles.json"));
+bundles = loadJSON(path.join(root, "bundles.json")),
+package = loadJSON(path.join(root, "package.json"));
 
 // Load json
 function loadJSON(path) {
@@ -66,7 +69,7 @@ function loadJSON(path) {
 }
 
 var build = {
-	js: function (files, bundle, output) {
+	js: function (files, bundle) {
 		for (var key in files) {
 			(function(key) {
 				var name = "js-" + key;
@@ -77,12 +80,12 @@ var build = {
 						.src(bundles[bundle].js[key])
 						.pipe(concat(key))
 						.pipe(uglify())
-						.pipe(gulp.dest(output));
+						.pipe(gulp.dest(paths[bundle].output));
 				});
 			})(key);
 		}
 	},
-	less: function(files, bundle, output) {
+	less: function(files, bundle) {
 		for (var key in files) {
 			(function (key) {		
 				var name = "less-" + key;
@@ -96,12 +99,12 @@ var build = {
 						.pipe(concat(key))
 						.pipe(prefix(["last 2 versions"], { cascade: true }))
 						.pipe(minify())
-						.pipe(gulp.dest(output));
+						.pipe(gulp.dest(paths[bundle].output));
 				});
 			})(key);
 		}
 	},
-	sass: function(files, bundle, output) {
+	sass: function(files, bundle) {
 		for (var key in files) {
 			(function (key) {		
 				var name = "sass-" + key;
@@ -115,51 +118,51 @@ var build = {
 						.pipe(concat(key))
 						.pipe(prefix(["last 2 versions"], { cascade: true }))
 						.pipe(minify())
-						.pipe(gulp.dest(output));
+						.pipe(gulp.dest(paths[bundle].output));
 				});
 			})(key);
 		}
 	},
-	sprite: function(source, output) {
+	sprite: function() {
 		// Process Icons
 		gulp.task("sprite", function () {
 			return gulp
-				.src(source)
+				.src(paths.plyr.src.sprite)
 				.pipe(svgmin({
 					plugins: [{
 						removeDesc: true
 					}]
 				}))
 		        .pipe(svgstore())
-			    .pipe(gulp.dest(output));
+			    .pipe(gulp.dest(paths.plyr.output));
 		});
 	},
-	templates: function(source, output) {
+	templates: function() {
 		// Build templates
 		gulp.task("templates", function () {
 			return gulp
-				.src(source)
+				.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(output));
+				.pipe(gulp.dest(paths.docs.output));
 		});
 	}
 };
 
 // Plyr core files
-build.js(bundles.plyr.js, "plyr", paths.plyr.output.js);
+build.js(bundles.plyr.js, "plyr");
-build.less(bundles.plyr.less, "plyr", paths.plyr.output.css);
+build.less(bundles.plyr.less, "plyr");
-build.sass(bundles.plyr.sass, "plyr", paths.plyr.output.css);
+build.sass(bundles.plyr.sass, "plyr");
-build.sprite(paths.plyr.src.sprite, paths.plyr.output.sprite);
+build.sprite();
 
 // Docs files
-build.templates(paths.docs.src.templates, paths.docs.output.js);
+build.templates();
-build.less(bundles.docs.less, "docs", paths.docs.output.css);
+build.less(bundles.docs.less, "docs");
-build.js(bundles.docs.js, "docs", paths.docs.output.js);
+build.js(bundles.docs.js, "docs");
 
 // Default gulp task
 gulp.task("default", function(){
@@ -187,4 +190,77 @@ gulp.task("watch", function () {
     gulp.watch(paths.docs.src.js, tasks.js);
     gulp.watch(paths.docs.src.less, tasks.less);
 	gulp.watch(paths.docs.src.templates, "js");
+});
+
+// Publish a version to CDN and docs
+// --------------------------------------------
+
+// Some options
+var aws = loadJSON(path.join(root, "aws.json")),
+version = package.version,
+maxAge 	= 31536000, // seconds 1 year
+options = {
+	cdn: {
+		headers: {
+			"Cache-Control": "max-age=" + maxAge + ", no-transform, public",
+			"Vary": "Accept-Encoding"
+		},
+		gzippedOnly: true
+	},
+	docs: {
+		headers: {
+			"Cache-Control": "public, must-revalidate, proxy-revalidate, max-age=0",
+			"Vary": "Accept-Encoding"
+		},
+		gzippedOnly: true
+	}
+},
+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 
+	gulp.src(paths.upload)
+		.pipe(rename(function (path) {
+		    path.dirname = path.dirname.replace(".", version);
+		}))
+		.pipe(gzip())
+		.pipe(s3(aws.cdn, options.cdn));
+});
+
+// Publish to Docs bucket
+gulp.task("docs", function () {
+	console.log("Uploading " + version + " docs to " + aws.docs.bucket);
+
+	// Replace versioned files in *.html
+	gulp.src([paths.docs.root + "*.html"])
+		.pipe(replace(cdnpath, aws.cdn.bucket + "/" + version))
+		.pipe(gulp.dest(paths.docs.root))
+		.pipe(gzip())
+		.pipe(s3(aws.docs, options.docs));
+
+	// Upload error.html to cdn using docs options
+	gulp.src([paths.docs.root + "error.html"])
+		.pipe(gzip())
+		.pipe(s3(aws.cdn, options.docs));
+});
+
+// Open the docs site to check it's sweet
+gulp.task("open", function () {
+	console.log("Opening " + aws.docs.bucket + "...");
+
+	// A file must be specified or gulp will skip the task
+	// Doesn't matter which file since we set the URL above
+	// Weird, I know...
+	gulp.src([paths.docs.root + "index.html"])
+		.pipe(open("", {
+			url: "http://" + aws.docs.bucket
+		}));
+});
+
+// Do everything 
+gulp.task("publish", function () {
+	run("templates", tasks.js, tasks.less, "sprite", "cdn", "docs", "open");
 });

license.md

@@ -1,12 +1,21 @@
-Copyright (c) 2015, Selz.com
+The MIT License (MIT)
-All rights reserved.
 
-Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
+Copyright (c) 2015 Selz.com
 
-1. Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
 
-2. Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
 
-3. Neither the name of the copyright holder nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission.
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "plyr",
-  "version": "1.0.17",
+  "version": "1.0.20",
   "description": "A simple HTML5 media player using custom controls",
   "homepage": "http://plyr.io",
   "main": "gulpfile.js",
@@ -9,9 +9,14 @@
     "gulp": "~3.8.6",
     "gulp-autoprefixer": "^0.0.8",
     "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-rename": "^1.2.0",
+    "gulp-replace": "^0.5.3",
+    "gulp-s3": "^0.3.0",
     "gulp-sass": "^1.3.3",
     "gulp-svgmin": "^1.0.0",
     "gulp-svgstore": "^5.0.0",
@@ -34,5 +39,5 @@
   "authors": [
     "Sam Potts <me@sampotts.me>"
   ],
-  "license": "BSD"
+  "license": "MIT"
 }

readme.md

@@ -3,19 +3,21 @@ A simple, accessible HTML5 media player.
 
 [Checkout the demo](http://plyr.io)
 
+[![Image of Plyr](https://cdn.plyr.io/static/plyr.png)](http://plyr.io)
+
 ## Why?
 We wanted a lightweight, accessible and customisable media player that just supports *modern* browsers. Sure, there are many other players out there but we wanted to keep things simple, using the right elements for the job. 
 
 ## Features
 - **Accessible** - full support for captions and screen readers.
-- **Lightweight** - just 4.8KB minified and gzipped.
+- **Lightweight** - just 5.3KB minified and gzipped.
 - **Customisable** - make the player look how you want with the markup you want.
-- **Semantic** - uses HTML5 form inputs for volume (range) and progress element for playback progress.
+- **Semantic** - uses the *right* elements. `<input type="range">` for volume and `<progress>` for progress and well, `<button>`s for buttons. There's no `<span>` or `<a href="#">` button hacks.
-- **Responsive** - any screen size.
+- **Responsive** - as you'd expect these days.
-- **No dependencies** - written in vanilla JavaScript.
+- **Audio & Video** - support for both formats.
-- **API** - easy to use API.
+- **API** - toggle playback, volume, seeking, and more.
-- **Fallback** - if there's no support, the native players are used.
+- **Fullscreen** - supports native fullscreen with fallback to "full window" modes.
-- **Fullscreen** - options to run the player full browser or the user can toggle fullscreen.
+- **No dependencies** - written in vanilla JavaScript, no jQuery required.
 
 ## Changelog
 Check out [the changelog](changelog.md)
@@ -30,7 +32,7 @@ If you have any cool ideas or features, please let me know by [creating an issue
 
 ## Implementation
 
-Check `docs/index.html` and `docs/dist/js/docs.js` for an example setup.
+Check `docs/index.html` and `docs/dist/docs.js` for an example setup.
 
 ### Bower
 If bower is your thang, you can grab Plyr using:
@@ -39,11 +41,21 @@ bower install plyr
 ```
 More info on setting up dependencies can be found in the [Bower Docs](http://bower.io/docs/creating-packages/#maintaining-dependencies)
 
+### CDN 
+If you want to use our CDN, you can use the following. HTTPS (SSL) is supported.
+
+```html
+<link rel="stylesheet" href="//cdn.plyr.io/1.0.19/plyr.css">
+<script src="//cdn.plyr.io/1.0.19/plyr.js"></script>
+```
+
+You can also access the `sprite.svg` file at `//cdn.plyr.io/1.0.19/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. 
 
 ```html
-<link rel="stylesheet" href="dist/css/plyr.css">
+<link rel="stylesheet" href="dist/plyr.css">
 ```
 
 ### SVG
@@ -62,7 +74,7 @@ The SVG sprite for the controls icons is loaded in by AJAX to help with performa
 		c.innerHTML=a.responseText;
 		b.insertBefore(c,b.childNodes[0])
 	}
-})(document,"dist/svg/sprite.svg");
+})(document,"dist/sprite.svg");
 </script>
 ```
 More info on SVG sprites here:
@@ -116,16 +128,18 @@ More info on CORS here:
 Much of the behaviour of the player is configurable when initialising the library. Below is an example of a default instance.
 
 ```html
-<script src="dist/js/plyr.js"></script>
+<script src="dist/plyr.js"></script>
 <script>
 plyr.setup({
-	html: **your controls html**
+	*options*
 });
 </script>
 ```
 
 #### Options
 
+You can pass the following options to the setup method.
+
 <table class="table" width="100%">
 <thead>
   <tr>
@@ -145,8 +159,8 @@ plyr.setup({
   <tr>
     <td><code>html</code></td>
     <td>String</td>
-    <td><code>&mdash;</code></td>
+    <td><code><a href="controls.md">See controls.md</a></code></td>
-    <td>This is **required**. See <a href="controls.md">controls.md</a> for more info on how the html needs to be structured.</td>
+    <td>See <a href="controls.md">controls.md</a> for more info on how the html needs to be structured.</td>
   </tr>
   <tr>
     <td><code>debug</code></td>
@@ -164,7 +178,7 @@ plyr.setup({
     <td><code>volume</code></td>
     <td>Number</td>
     <td><code>5</code></td>
-    <td>A number, between 1 and 10, representing the inital volume of the player.</td>
+    <td>A number, between 1 and 10, representing the initial volume of the player.</td>
   </tr>
   <tr>
     <td><code>click</code></td>
@@ -252,7 +266,7 @@ Here's a list of the methods supported:
   <tr>
     <td><code>setVolume</code></td>
     <td>Number</td>
-    <td>Sets the player voume to the provided parameter. The value should be between 0 (muted) and 10 (loudest). If no parameter is provided, the default volume is used (5). Values over 10 are ignored.</td>
+    <td>Sets the player volume to the provided parameter. The value should be between 0 (muted) and 10 (loudest). If no parameter is provided, the default volume is used (5). Values over 10 are ignored.</td>
   </tr>
   <tr>
     <td><code>toggleMute</code></td>
@@ -323,7 +337,7 @@ If a User Agent is disabled but supports `<video>` and `<audio>` natively, it wi
 Any unsupported browsers will display links to download the media if the correct html is used.
 
 ## Issues
-If you find anything weird with Plyr, please let us know using the Github issues tracker.
+If you find anything weird with Plyr, please let us know using the GitHub issues tracker.
 
 ## Author
 Plyr is developed by Sam Potts ([@sam_potts](https://twitter.com/sam_potts)) ([sampotts.me](http://sampotts.me))
@@ -348,4 +362,4 @@ Also these links helped created Plyr:
 - [Styling the `<progress>` element - hongkiat.com](http://www.hongkiat.com/blog/html5-progress-bar/)
 
 ## Copyright and License
-Copyright 2014, Selz.com under [the BSD license](license.md).
+[The MIT license](license.md).

src/js/plyr.js

@@ -1,7 +1,8 @@
 // ==========================================================================
 // Plyr
-// plyr.js v1.0.17
+// plyr.js v1.0.20
 // https://github.com/sampotts/plyr
+// License: The MIT License (MIT)
 // ==========================================================================
 // Credits: http://paypal.github.io/accessible-html5-video-player/
 // ==========================================================================
@@ -67,7 +68,65 @@
         },
         storage: {
             enabled:            true
-        }
+        },
+        html: (function() {
+                return ["<div class='player-controls'>",
+                "<div class='player-progress'>",
+                    "<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-playback'>",
+                    "<button type='button' data-player='restart'>",
+                        "<svg><use xlink:href='#icon-refresh'></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 <span class='player-seek-time'>{seektime}</span> seconds</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'>Fast forward <span class='player-seek-time'>{seektime}</span> seconds</span>",
+                    "</button>",
+                    "<span class='player-time'>",
+                        "<span class='sr-only'>Time</span>",
+                        "<span class='player-duration'>00:00</span>",
+                    "</span>",
+                "</span>",
+                "<span class='player-controls-sound'>",
+                    "<input class='inverted sr-only' id='mute{id}' type='checkbox' data-player='mute'>",
+                    "<label id='mute{id}' for='mute{id}'>",
+                        "<svg class='icon-muted'><use xlink:href='#icon-muted'></use></svg>",
+                        "<svg><use xlink:href='#icon-sound'></use></svg>",
+                        "<span class='sr-only'>Mute</span>",
+                    "</label>",
+                    "<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'>",
+                    "<input class='sr-only' id='captions{id}' type='checkbox' data-player='captions'>",
+                    "<label for='captions{id}'>",
+                        "<svg><use xlink:href='#icon-bubble'></use></svg>",
+                        "<span class='sr-only'>Captions</span>",
+                    "</label>",
+                    "<button type='button' data-player='fullscreen'>",
+                        "<svg class='icon-exit-fullscreen'><use xlink:href='#icon-collapse'></use></svg>",
+                        "<svg><use xlink:href='#icon-expand'></use></svg>",
+                        "<span class='sr-only'>Toggle fullscreen</span>",
+                    "</button>",
+                "</span>",
+            "</div>"].join("\n");
+        })()
     };
 
     // Debugging
@@ -489,11 +548,11 @@
 
         // Setup aria attributes
         function _setupAria() {
-            var label = player.buttons.play.innerText;
+            var label = player.buttons.play.innerText || "Play";
 
             // If there's a media title set, use that for the label
             if (typeof(config.title) !== "undefined" && config.title.length) {
-                label = player.buttons.play.innerText + ", " + config.title;
+                label += ", " + config.title;
             }
 
             player.buttons.play.setAttribute("aria-label", label);
@@ -795,12 +854,12 @@
         }
 
         // Toggle fullscreen
-        function _toggleFullscreen() {
+        function _toggleFullscreen(event) {
             // Check for native support
             var nativeSupport = fullscreen.supportsFullScreen;
 
             // If it's a fullscreen change event, it's probably a native close
-            if(event.type === fullscreen.fullScreenEventName) {
+            if(event && event.type === fullscreen.fullScreenEventName) {
                 config.fullscreen.active = fullscreen.isFullScreen();
             }
             // If there's native support, use it
@@ -974,8 +1033,9 @@
             // Fast forward
             _on(player.buttons.forward, "click", _forward);
 
-            // Get the HTML5 range input element and append audio volume adjustment on change
+            // Get the HTML5 range input element and append audio volume adjustment on change/input
-            _on(player.volume, "change", function() {
+            // IE10 doesn't support the "input" event so they have to wait for change
+            _on(player.volume, "change input", function() {
                 _setVolume(this.value);
             });
 

src/less/plyr.less

@@ -306,7 +306,7 @@
 
 	// Volume control
 	// <input[type='range']> element
-	// Specificty is for bootstrap compatibility
+	// Specificity is for bootstrap compatibility
 	&-volume[type=range] {
 		display: inline-block;
 		vertical-align: middle;

src/sass/plyr.scss

@@ -312,7 +312,7 @@ $bp-captions-large: 		768px; // When captions jump to the larger font size
 
 	// Volume control
 	// <input[type='range']> element
-	// Specificty is for bootstrap compatibility
+	// Specificity is for bootstrap compatibility
 	&-volume[type=range] {
 		vertical-align: middle;
 		-webkit-appearance: none;