Merge branch 'develop'

Fixes #4

.gitignore

@@ -2,3 +2,4 @@ node_modules
 *.sublime-project
 *.sublime-workspace
 .DS_Store
+aws.json

assets/js/docs.js

@@ -1,15 +0,0 @@
-// ==========================================================================
-// Docs example
-// ==========================================================================
-
-/*global plyr, templates */
-
-// Setup the player
-plyr.setup({
-	debug: 	true,
-	title: 	"Video demo",
-	html: 	templates.controls.render({}),
-	captions: {
-		defaultActive: true
-	}
-});

assets/less/docs/fontface.less

@@ -1,16 +0,0 @@
-@font-face {
-	font-family: "Avenir";
-	src: 	url("../../assets/fonts/AvenirLTStd-Medium.woff2") format("woff2"), 
-			url("../../assets/fonts/AvenirLTStd-Medium.woff") format("woff"), 
-			url("../../assets/fonts/AvenirLTStd-Medium.ttf")  format("truetype");
-	font-style:   normal;
-	font-weight:  400;
-}
-@font-face {
-	font-family: "Avenir";
-	src: 	url("../../assets/fonts/AvenirLTStd-Heavy.woff2") format("woff2"), 
-			url("../../assets/fonts/AvenirLTStd-Heavy.woff") format("woff"), 
-			url("../../assets/fonts/AvenirLTStd-Heavy.ttf")  format("truetype");
-	font-style:   normal;
-	font-weight:  600;
-}

bower.json

@@ -13,8 +13,12 @@
   ],
   "dependencies": {},
   "main": [
-    "dist/css/plyr.css",
-    "dist/js/plyr.js"
+    "dist/plyr.css",
+    "dist/plyr.js",
+    "dist/sprite.svg",
+    "src/less/plyr.less",
+    "src/sass/plyr.sass",
+    "src/js/plyr.js"
   ],
   "ignore": [
     "node_modules",

bundles.json

@@ -1,14 +1,25 @@
 {
-	"less": {
-		"plyr.css": 	["assets/less/plyr.less"],
-		"docs.css": 	["assets/less/docs.less"]
+	"plyr": {
+		"less": {
+			"plyr.css": 	["src/less/plyr.less"]
+		},
+		"sass": {
+			"plyr.css": 	["src/less/plyr.sass"]
+		},
+		"js": {
+			"plyr.js": 		["src/js/plyr.js"]
+		}
 	},
-	"js": {
-		"plyr.js": 		["assets/js/plyr.js"],
-		"docs.js": 		[
-			"assets/js/lib/hogan-3.0.2.mustache.js",
-			"dist/js/templates.js",
-			"assets/js/docs.js"
-		]
+	"docs": {
+		"less": {
+			"docs.css": 	["docs/src/less/docs.less"]
+		},
+		"js": {
+			"docs.js": [
+				"docs/src/js/lib/hogan-3.0.2.mustache.js",
+				"docs/dist/templates.js",
+				"docs/src/js/docs.js"
+			]
+		}
 	}
 }

changelog.md

@@ -0,0 +1,67 @@
+# Changelog
+
+## v1.0.18
+- Added CDN references
+
+## v1.0.17
+- SASS support added (thanks to @brunowego)
+- Docs completely seperated to avoid any confusion
+- New gulp tasks (will add more documentation for this)
+
+## v1.0.16
+- Aria label is now dynamic
+
+## v1.0.15
+- Fix for seek time display in controls
+- More documentation for controls html
+
+## v1.0.14
+- Minor change for bootstrap compatibility
+
+## v1.0.13
+- Minor tweaks
+
+## v1.0.12
+- Handle native events (Issue #34)
+
+## v1.0.11
+- Bug fixes for fullscreen mode
+
+## v1.0.10
+- Bower includes src files now
+- Folder re-arrangement
+
+## v1.0.9
+- Added buffer progress bar
+- Fixed Safari 8 caption track (it needs to be removed from the DOM like in Safari 7)
+- Added validation (it works or it doesn't basically) of the `html` option passed
+
+## v1.0.8
+- Bug fix
+
+## v1.0.7
+- Storing user selected volume in local storage
+
+## v1.0.6
+- Fullscreen fallback for older browsers to use "full window"
+
+## v1.0.5
+- More minor bug fixes and improvements
+
+## v1.0.4
+- Fixed caption legibility issues
+
+## v1.0.3
+- Minor bug fixes
+
+## v1.0.2
+- Added OGG to <audio> example for Firefox
+- Fixed IE11 fullscreen issues
+
+## v1.0.1
+- Bug fixes for IE (as per usual)
+- Added CSS hooks for media type
+- Return instances of Plyr to the element
+
+## v1.0.0
+- Initial release

controls.md

@@ -0,0 +1,81 @@
+# 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! 
+
+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.
+
+## Requirements
+
+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
+
+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
+
+You can of course, just specify vanilla HTML. Here's an example snippet:
+
+```html
+var controls = [
+'<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");
+```

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}*,::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}.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}.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}@font-face{font-family:Avenir;src:url(../../assets/fonts/AvenirLTStd-Medium.woff2) format("woff2"),url(../../assets/fonts/AvenirLTStd-Medium.woff) format("woff"),url(../../assets/fonts/AvenirLTStd-Medium.ttf) format("truetype");font-style:normal;font-weight:400}@font-face{font-family:Avenir;src:url(../../assets/fonts/AvenirLTStd-Heavy.woff2) format("woff2"),url(../../assets/fonts/AvenirLTStd-Heavy.woff) format("woff"),url(../../assets/fonts/AvenirLTStd-Heavy.ttf) format("truetype");font-style:normal;font-weight:600}

dist/js/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("	<progress class=\"player-progress\" 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("	<span class=\"player-controls-playback\">");t.b("\n" + i);t.b("		<button type=\"button\" data-player=\"restart\">");t.b("\n" + i);t.b("			<svg><use xlink:href=\"#icon-refresh\"></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 <span class=\"player-seek-time\">10</span> seconds</span>");t.b("\n" + i);t.b("		</button>");t.b("\n" + i);t.b("		<button type=\"button\" aria-label=\"{aria-label}\" 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\">Fast forward <span class=\"player-seek-time\">10</span> seconds</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\">Time</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-sound\">");t.b("\n" + i);t.b("		<input class=\"inverted sr-only\" id=\"mute{id}\" type=\"checkbox\" data-player=\"mute\">");t.b("\n" + i);t.b("		<label id=\"mute{id}\" for=\"mute{id}\">");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-sound\"></use></svg>");t.b("\n" + i);t.b("			<span class=\"sr-only\">Mute</span>");t.b("\n" + i);t.b("		</label>");t.b("\n");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\" value=\"5\" data-player=\"volume\">");t.b("\n");t.b("\n" + i);t.b("		<input class=\"sr-only\" id=\"captions{id}\" type=\"checkbox\" data-player=\"captions\">");t.b("\n" + i);t.b("		<label for=\"captions{id}\">");t.b("\n" + i);t.b("			<svg><use xlink:href=\"#icon-bubble\"></use></svg>");t.b("\n" + i);t.b("			<span class=\"sr-only\">Captions</span>");t.b("\n" + i);t.b("		</label>");t.b("\n");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-collapse\"></use></svg>");t.b("\n" + i);t.b("			<svg><use xlink:href=\"#icon-expand\"></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/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.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/templates.js

@@ -0,0 +1,2 @@
+    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("		<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-playback\">");t.b("\n" + i);t.b("		<button type=\"button\" data-player=\"restart\">");t.b("\n" + i);t.b("			<svg><use xlink:href=\"#icon-refresh\"></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 <span class=\"player-seek-time\">{seektime}</span> seconds</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\">Fast forward <span class=\"player-seek-time\">{seektime}</span> seconds</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\">Time</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-sound\">");t.b("\n" + i);t.b("		<input class=\"inverted sr-only\" id=\"mute{id}\" type=\"checkbox\" data-player=\"mute\">");t.b("\n" + i);t.b("		<label id=\"mute{id}\" for=\"mute{id}\">");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-sound\"></use></svg>");t.b("\n" + i);t.b("			<span class=\"sr-only\">Mute</span>");t.b("\n" + i);t.b("		</label>");t.b("\n");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\" value=\"5\" data-player=\"volume\">");t.b("\n");t.b("\n" + i);t.b("		<input class=\"sr-only\" id=\"captions{id}\" type=\"checkbox\" data-player=\"captions\">");t.b("\n" + i);t.b("		<label for=\"captions{id}\">");t.b("\n" + i);t.b("			<svg><use xlink:href=\"#icon-bubble\"></use></svg>");t.b("\n" + i);t.b("			<span class=\"sr-only\">Captions</span>");t.b("\n" + i);t.b("		</label>");t.b("\n");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-collapse\"></use></svg>");t.b("\n" + i);t.b("			<svg><use xlink:href=\"#icon-expand\"></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/index.html

@@ -0,0 +1,79 @@
+<!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="//cdn.plyr.io/1.0.17/plyr.css">
+
+		<!-- Docs styles -->
+		<link rel="stylesheet" href="//cdn.plyr.io/1.0.17/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>
+		</header>
+
+		<main>
+			<section class="example-video">
+				<div class="player">
+					<video poster="//cdn.selz.com/plyr/1.0/poster.jpg" controls crossorigin>
+						<!-- Video files -->
+						<source src="//cdn.selz.com/plyr/1.0/movie.mp4" type="video/mp4">
+						<source src="//cdn.selz.com/plyr/1.0/movie.webm" type="video/webm">
+						
+						<!-- Text track file -->
+						<track kind="captions" label="English" srclang="en" src="//cdn.selz.com/plyr/1.0/movie_en_captions.vtt" default>
+						
+						<!-- Fallback for browsers that don't support the <video> element -->
+						<div>
+							<a href="//cdn.selz.com/plyr/1.0/movie.mp4">Download</a>
+						</div>
+					</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="example-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 -->
+						<div>
+							<a href="//cdn.selz.com/plyr/1.0/logistics-96-sample.mp3">Download</a>
+						</div>
+					</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>
+		</main>
+
+		<footer>
+			<p>Used by &hellip;</p>
+			<a href="https://selz.com" target="_blank" class="logo">
+				<img src="https://d33i624pw6jj68.cloudfront.net/static/img/logos/selz.svg" alt="Selz">
+			</a>
+		</footer>
+
+		<!-- 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,"//cdn.plyr.io/1.0.17/sprite.svg");
+		</script>
+
+		<!-- Plyr core script -->
+		<script src="//cdn.plyr.io/1.0.17/plyr.js"></script>
+
+		<!-- Docs script -->
+		<script src="//cdn.plyr.io/1.0.17/docs.js"></script>
+	</body>
+</html>

docs/src/js/docs.js

@@ -0,0 +1,26 @@
+// ==========================================================================
+// Docs example
+// ==========================================================================
+
+/*global plyr, templates */
+
+// Setup the player
+plyr.setup({
+	debug: 	true,
+	title: 	"Video demo",
+	html: 	templates.controls.render({}),
+	captions: {
+		defaultActive: true
+	}
+});
+
+// Google analytics 
+// For demo site (http://plyr.io) only
+if(document.domain === "plyr.io") {
+	(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)
+	})(window,document,"script","//www.google-analytics.com/analytics.js","ga");
+	ga("create", "UA-40881672-11", "auto");
+	ga("send", "pageview");
+}

docs/src/less/docs.less

@@ -3,9 +3,11 @@
 // ==========================================================================
 
 // Reset
-@import "docs/normalize.less";
+@import "lib/normalize.less";
 // Mixins
-@import "docs/mixins.less";
+@import "lib/mixins.less";
+// Fonts - docs only!
+@import "lib/fontface.less";
 
 // Variables
 // ---------------------------------------
@@ -35,7 +37,6 @@ html {
 body {
 	font-family: "Avenir", "Helvetica Neue", Helvetica, Arial, sans-serif;
 	background: #fff;
-	//.font-size(16);
 	line-height: 1.5;
 	text-align: center;
 	color: #6D797F;
@@ -101,6 +102,9 @@ a {
 	&:focus {
 		.tab-focus();
 	}
+	&.logo {
+		border: 0;
+	}
 }
 .btn {
 	display: inline-block;
@@ -111,6 +115,7 @@ a {
 	.font-smoothing(on);
 	font-weight: 600;
 	border-radius: 3px;
+	user-select: none;
 	
 	&:hover,
 	&:focus {
@@ -136,6 +141,11 @@ a {
 	}
 }
 
-// Fonts
-// Last to not block rendering
-@import "docs/fontface.less";
+// Footer
+footer {
+	margin-bottom: @padding-base;
+
+	p {
+		margin-bottom: (@padding-base / 2);
+	}
+}

docs/src/less/lib/fontface.less

@@ -0,0 +1,16 @@
+@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;
+}

docs/src/templates/controls.html

@@ -1,7 +1,12 @@
 <div class="player-controls">
-	<progress class="player-progress" max="100" value="0">
-		<span>0</span>% played
-	</progress>
+	<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>
@@ -9,9 +14,9 @@
 		</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">10</span> seconds</span>
+			<span class="sr-only">Rewind <span class="player-seek-time">{seektime}</span> seconds</span>
 		</button>
-		<button type="button" aria-label="{aria-label}" data-player="play">
+		<button type="button" data-player="play">
 			<svg><use xlink:href="#icon-play"></use></svg>
 			<span class="sr-only">Play</span>
 		</button>
@@ -21,7 +26,7 @@
 		</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">10</span> seconds</span>
+			<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>
@@ -36,7 +41,7 @@
 			<span class="sr-only">Mute</span>
 		</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 class="sr-only" id="captions{id}" type="checkbox" data-player="captions">

gulpfile.js

@@ -10,130 +10,234 @@ var fs 			= require("fs"),
 	concat 		= require("gulp-concat"),
 	uglify 		= require("gulp-uglify"),
 	less 		= require("gulp-less"),
-	minifyCss 	= require("gulp-minify-css"),
-	runSequence = require("run-sequence"),
+	sass 		= require("gulp-sass"),
+	minify 		= require("gulp-minify-css"),
+	run 		= require("run-sequence"),
 	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");
 
-var projectPath = __dirname;
-var paths = {
-    project: 		projectPath,
-
-    // Watch paths
-    watchless: 		path.join(projectPath, "assets/less/**/*"),
-    watchjs: 		path.join(projectPath, "assets/js/**/*"),
-    watchicons: 	path.join(projectPath, "assets/icons/**/*"),
-    watchtemplates: path.join(projectPath, "assets/templates/**/*"),
-
-    // SVG Icons
-   	svg: 			path.join(projectPath, "assets/icons/*.svg"),
-
-    // Output paths
-    js:  			path.join(projectPath, "dist/js/"),
-    css:  			path.join(projectPath, "dist/css/"),
-    icons:  		path.join(projectPath, "dist/svg/")
+var root = __dirname,
+paths = {
+	plyr: {
+		// Source paths
+		src: {
+			less: 		path.join(root, "src/less/**/*"),
+			sass: 		path.join(root, "src/sass/**/*"),
+			js: 		path.join(root, "src/js/**/*"),
+			sprite: 	path.join(root, "src/sprite/*.svg")
+		},
+		// Output paths
+		output: 		path.join(root, "dist/")
+	},
+	docs: {
+		// 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")
+		},
+		// Output paths
+		output: 		path.join(root, "docs/dist/"),
+		// Docs
+		root: 			path.join(root, "docs/")
+	},
+	upload: [path.join(root, "dist/**"), path.join(root, "docs/dist/**")]
 },
 
-// Task names
-taskNames = {    
-	jsAll: 		"js-all",
-    lessBuild: 	"less-",
-    jsBuild: 	"js-",
-    iconBuild: 	"icon-build",
-    templates: 	"templates"
-},
 // Task arrays
-lessBuildTasks 	= [],
-jsBuildTasks 	= [],
+tasks = {    
+	less: 	[],
+	sass: 	[],
+	js:   	[]
+},
 
 // Fetch bundles from JSON
-bundles = loadJSON(path.join(paths.project, "bundles.json"));
+bundles = loadJSON(path.join(root, "bundles.json")),
+package = loadJSON(path.join(root, "package.json"));
 
 // Load json
 function loadJSON(path) {
     return JSON.parse(fs.readFileSync(path));
 }
 
-// Build templates
-gulp.task(taskNames.templates, function () {
-    return gulp
-    	.src(paths.watchtemplates)
-        .pipe(hogan("templates.js", {
-            wrapper: false,
-            templateName: function (file) {
-                return path.basename(file.relative.replace(/\\/g, "-"), path.extname(file.relative));
-            }
-        }))
-        .pipe(gulp.dest(paths.js));
-});
+var build = {
+	js: function (files, bundle) {
+		for (var key in files) {
+			(function(key) {
+				var name = "js-" + key;
+				tasks.js.push(name);
 
-// Process JS 
-for (var key in bundles.js) {
-	(function(key) {
-	    var taskName = taskNames.jsBuild + key;
-	    jsBuildTasks.push(taskName);
+				gulp.task(name, function () {
+					return gulp
+						.src(bundles[bundle].js[key])
+						.pipe(concat(key))
+						.pipe(uglify())
+						.pipe(gulp.dest(paths[bundle].output));
+				});
+			})(key);
+		}
+	},
+	less: function(files, bundle) {
+		for (var key in files) {
+			(function (key) {		
+				var name = "less-" + key;
+				tasks.less.push(name);
 
-	    gulp.task(taskName, function () {
-	        return gulp
-	        	.src(bundles.js[key])
-				.pipe(concat(key))
-	            .pipe(uglify())
-	            .pipe(gulp.dest(paths.js));
-	    });
-	})(key);
-}
+				gulp.task(name, function () {
+					return gulp
+						.src(bundles[bundle].less[key])
+						.pipe(less())
+						.on("error", gutil.log)
+						.pipe(concat(key))
+						.pipe(prefix(["last 2 versions"], { cascade: true }))
+						.pipe(minify())
+						.pipe(gulp.dest(paths[bundle].output));
+				});
+			})(key);
+		}
+	},
+	sass: function(files, bundle) {
+		for (var key in files) {
+			(function (key) {		
+				var name = "sass-" + key;
+				tasks.sass.push(name);
 
-// Process CSS
-for (var key in bundles.less) {
-    (function (key) {		
-	    var taskName = taskNames.lessBuild + key;
-	    lessBuildTasks.push(taskName);
-
-	    gulp.task(taskName, function () {
+				gulp.task(name, function () {
+					return gulp
+						.src(bundles[bundle].sass[key])
+						.pipe(sass())
+						.on("error", gutil.log)
+						.pipe(concat(key))
+						.pipe(prefix(["last 2 versions"], { cascade: true }))
+						.pipe(minify())
+						.pipe(gulp.dest(paths[bundle].output));
+				});
+			})(key);
+		}
+	},
+	sprite: function() {
+		// Process Icons
+		gulp.task("sprite", function () {
 			return gulp
-				.src(bundles.less[key])
-				.pipe(less())
-				.on("error", gutil.log)
-				.pipe(concat(key))
-				.pipe(prefix(["last 2 versions", "> 1%", "ie 9"], { cascade: true }))
-				.pipe(minifyCss())
-				.pipe(gulp.dest(paths.css));
+				.src(paths.plyr.src.sprite)
+				.pipe(svgmin({
+					plugins: [{
+						removeDesc: true
+					}]
+				}))
+		        .pipe(svgstore())
+			    .pipe(gulp.dest(paths.plyr.output));
 		});
-	})(key);
-}
+	},
+	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));
+		});
+	}
+};
 
-// Process Icons
-gulp.task(taskNames.iconBuild, function () {
-	return gulp
-		.src(paths.svg)
-		.pipe(svgmin({
-			plugins: [{
-				removeDesc: true
-			}]
-		}))
-        .pipe(svgstore({ 
-        	prefix: 	"icon-",
-        	fileName: 	"sprite.svg"
-        }))
-	    .pipe(gulp.dest(paths.icons));
-});
+// Plyr core files
+build.js(bundles.plyr.js, "plyr");
+build.less(bundles.plyr.less, "plyr");
+build.sass(bundles.plyr.sass, "plyr");
+build.sprite();
+
+// Docs files
+build.templates();
+build.less(bundles.docs.less, "docs");
+build.js(bundles.docs.js, "docs");
 
 // Default gulp task
 gulp.task("default", function(){
-	runSequence(taskNames.jsAll, lessBuildTasks.concat(taskNames.iconBuild, "watch"));
+	run("templates", tasks.js, tasks.less, "sprite");
 });
 
 // Build all JS (inc. templates)
-gulp.task(taskNames.jsAll, function(){
-	runSequence(taskNames.templates, jsBuildTasks);
+gulp.task("js", function(){
+	run("templates", tasks.js);
+});
+
+// Build SASS (for testing, default is LESS)
+gulp.task("sass", function(){
+	run(tasks.sass);
 });
 
 // Watch for file changes
 gulp.task("watch", function () {
-	//gulp.watch(paths.watchtemplates, [taskNames.jsAll]);
-    //gulp.watch(paths.watchjs, [taskNames.jsAll]);
-    gulp.watch(paths.watchless, lessBuildTasks);
-    gulp.watch(paths.watchicons, [taskNames.iconBuild]);
+	// Plyr core
+    gulp.watch(paths.plyr.src.js, tasks.js);
+    gulp.watch(paths.plyr.src.less, tasks.less);
+    gulp.watch(paths.plyr.src.sprite, "sprite");
+
+    // Docs
+    gulp.watch(paths.docs.src.js, tasks.js);
+    gulp.watch(paths.docs.src.less, tasks.less);
+	gulp.watch(paths.docs.src.templates, "js");
+});
+
+// Publish the docs site
+try {
+	var aws = loadJSON(path.join(root, "aws.json"));
+}
+catch (e) { }
+
+var 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");
+
+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));
+});
+
+gulp.task("docs", function () {
+	console.log("Uploading " + version + " docs to " + aws.docs.bucket);
+
+	// Replace versioned files in index.html
+	gulp.src([paths.docs.root + "index.html"])
+		.pipe(replace(cdnpath, aws.cdn.bucket + "/" + version))
+		.pipe(gzip())
+		.pipe(s3(aws.docs, options.docs));
+});
+
+gulp.task("publish", function () {
+	run("templates", tasks.js, tasks.less, "sprite", "cdn", "docs");
 });

index.html

@@ -1,77 +0,0 @@
-<!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/css/plyr.css">
-		<link rel="stylesheet" href="dist/css/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>
-		</header>
-
-		<section class="example-video">
-			<div class="player">
-				<video poster="//cdn.sampotts.me/plyr/poster.jpg" controls crossorigin>
-					<!-- Video files -->
-					<source src="//cdn.sampotts.me/plyr/movie.mp4" type="video/mp4">
-					<source src="//cdn.sampotts.me/plyr/movie.webm" type="video/webm">
-					
-					<!-- Text track file -->
-					<track kind="captions" label="English captions" src="//cdn.sampotts.me/plyr/movie_captions.vtt" srclang="en" default>
-					
-					<!-- Fallback for browsers that don't support the <video> element -->
-					<div>
-						<a href="//cdn.sampotts.me/plyr/movie.mp4">Download</a>
-					</div>
-				</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="example-audio">
-			<div class="player">
-				<audio controls>
-					<!-- Audio files -->
-					<source src="//cdn.sampotts.me/plyr/logistics-96-sample.mp3" type="audio/mp3">
-					<source src="//cdn.sampotts.me/plyr/logistics-96-sample.ogg" type="application/ogg">
-					
-					<!-- Fallback for browsers that don't support the <audio> element -->
-					<div>
-						<a href="//cdn.sampotts.me/plyr/logistics-96-sample.mp3">Download</a>
-					</div>
-				</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>
-
-		<!-- Load SVG defs -->
-		<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/svg/sprite.svg");
-		</script>
-
-		<!-- Core player -->
-		<script src="dist/js/plyr.js"></script>
-
-		<!-- Docs setup -->
-		<script src="dist/js/docs.js"></script>
-
-		<!-- GA -->
-		<script>
-		(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)
-		})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
-		ga('create', 'UA-40881672-11', 'auto');
-		ga('send', 'pageview');
-		</script>
-	</body>
-</html>

license.md

@@ -1,27 +1,12 @@
-Copyright (c) 2014, Selz.com
+Copyright (c) 2015, Selz.com
 All rights reserved.
 
-Redistribution and use in source and binary forms, with or without modification,
-are permitted provided that the following conditions are met:
+Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
 
-* Redistributions of source code must retain the above copyright notice, this
-  list of conditions and the following disclaimer.
+1. Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.
 
-* 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.
+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.
 
-* Neither the name of the eBay nor the names of its
-  subsidiaries or affiliates may be used to endorse or promote products derived from
-  this software without specific prior written permission.
+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.
 
-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.
+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.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "plyr",
-  "version": "1.0.0",
+  "version": "1.0.18",
   "description": "A simple HTML5 media player using custom controls",
   "homepage": "http://plyr.io",
   "main": "gulpfile.js",
@@ -9,11 +9,16 @@
     "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-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": "^4.0.1",
+    "gulp-svgstore": "^5.0.0",
     "gulp-uglify": "~0.3.1",
     "gulp-util": "~2.2.20",
     "run-sequence": "^0.3.6"

readme.md

@@ -8,20 +8,30 @@ We wanted a lightweight, accessible and customisable media player that just supp
 
 ## Features
 - **Accessible** - full support for captions and screen readers.
-- **Lightweight** - just 4KB minified and gzipped.
+- **Lightweight** - just 4.8KB 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.
-- **No dependencies** - written in native JS.
+- **Responsive** - any screen size.
+- **No dependencies** - written in vanilla JavaScript.
 - **API** - easy to use API.
 - **Fallback** - if there's no support, the native players are used.
 - **Fullscreen** - options to run the player full browser or the user can toggle fullscreen.
 
+## Changelog
+Check out [the changelog](changelog.md)
+
 ## Planned development
 - Accept a string selector, a node, or a nodelist for the `container` property of `selectors`.
 - Accept a selector for the `html` template property.
+- Multiple language captions (with selection)
+- Localisation of control labels 
+
+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.
+
 ### Bower
 If bower is your thang, you can grab Plyr using:
 ```
@@ -29,15 +39,25 @@ bower install plyr
 ```
 More info on setting up dependencies can be found in the [Bower Docs](http://bower.io/docs/creating-packages/#maintaining-dependencies)
 
-### CSS
-If you want to use the default css, add the css file from /dist into your head, or even better use the less file included in /assets in your build to save a request. 
+### CDN 
+If you want to use our CDN, you can use the following. Currently it's HTTP only. 
 
 ```html
-<link rel="stylesheet" href="/css/plyr.css" />
+<link rel="stylesheet" href="http://cdn.plyr.io/1.0.18/plyr.css">
+<script src="http://cdn.plyr.io/1.0.18/plyr.js"></script>
+```
+
+You can also access the `sprite.svg` file at `http://cdn.plyr.io/1.0.18/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/plyr.css">
 ```
 
 ### SVG
-The SVG sprite for the controls icons is loaded in by AJAX to help with performance. This is best added before the closing `</body>`
+The SVG sprite for the controls icons is loaded in by AJAX to help with performance. This is best added before the closing `</body>`, before any other scripts.
 
 ```html
 <script>
@@ -52,7 +72,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,"/svg/sprite.svg");
+})(document,"dist/sprite.svg");
 </script>
 ```
 More info on SVG sprites here:
@@ -64,19 +84,17 @@ and the AJAX technique here:
 The only extra markup that's needed to use plyr is a `<div>` wrapper. Replace the source, poster and captions with urls for your media.
 ```html
 <div class="player">
-	<video poster="//cdn.sampotts.me/plyr/poster.jpg" controls crossorigin>
+	<video poster="//cdn.selz.com/plyr/1.0/poster.jpg" controls crossorigin>
 		<!-- Video files -->
-		<source src="//cdn.sampotts.me/plyr/movie.mp4" type="video/mp4">
-		<source src="//cdn.sampotts.me/plyr/movie.webm" type="video/webm">
+		<source src="//cdn.selz.com/plyr/1.0/movie.mp4" type="video/mp4">
+		<source src="//cdn.selz.com/plyr/1.0/movie.webm" type="video/webm">
 		
 		<!-- Text track file -->
-		<track kind="captions" label="English captions" src="//cdn.sampotts.me/plyr/movie_captions_en.vtt" srclang="en" default>
+		<track kind="captions" label="English captions" src="//cdn.selz.com/plyr/1.0/movie_captions_en.vtt" srclang="en" default>
 		
 		<!-- Fallback for browsers that don't support the <video> element -->
 		<div>
-			<a href="//cdn.sampotts.me/plyr/movie.mp4">
-				<img src="//cdn.sampotts.me/plyr/poster.jpg" alt="Download">
-			</a>
+			<a href="//cdn.selz.com/plyr/1.0/movie.mp4">Download</a>
 		</div>
 	</video>
 </div>
@@ -87,11 +105,12 @@ And the same for `<audio>`
 <div class="player">
 	<audio controls>
 		<!-- Audio files -->
-		<source src="//cdn.sampotts.me/plyr/logistics-96-sample.mp3" type="audio/mp3">
+		<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 -->
 		<div>
-			<a href="//cdn.sampotts.me/plyr/logistics-96-sample.mp3">Download</a>
+			<a href="//cdn.selz.com/plyr/1.0/logistics-96-sample.mp3">Download</a>
 		</div>
 	</audio>
 </div>
@@ -107,14 +126,15 @@ 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="js/plyr.js"></script>
+<script src="dist/plyr.js"></script>
 <script>
 plyr.setup({
 	html: **your controls html**
 });
 </script>
 ```
-You can pass the following settings:
+
+#### Options
 
 <table class="table" width="100%">
 <thead>
@@ -136,11 +156,7 @@ You can pass the following settings:
     <td><code>html</code></td>
     <td>String</td>
     <td><code>&mdash;</code></td>
-    <td>This is **required**. It is the markup used for the controls. In the demo, we use Hogan templates as we are already using them. You can of course, just specify vanilla html. The only requirement is your selectors should match the `selectors` option below. If you check `controls.html` in `/assets/templates` to get an idea of how the default html works. 
-
-    You need to add two placeholders to your html template:
-    - {id} for the dynamically generated ID for the player (for form controls)
-    - {aria_label} for the dynamically generated play button label for screen readers</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>
   </tr>
   <tr>
     <td><code>debug</code></td>
@@ -149,7 +165,7 @@ You can pass the following settings:
     <td>Display debugging information on what Plyr is doing.</td>
   </tr>
   <tr>
-    <td><code>seekInterval</code></td>
+    <td><code>seekTime</code></td>
     <td>Number</td>
     <td><code>10</code></td>
     <td>The time, in seconds, to seek when a user hits fast forward or rewind.</td>
@@ -170,7 +186,7 @@ You can pass the following settings:
     <td><code>selectors</code></td>
     <td>Object</td>
     <td>&mdash;</td>
-    <td>See `plyr.js` in `/assets` for more info. The only option you might want to change is `player` which is the hook used for Plyr, the default is `.player`.</td>
+    <td>See `plyr.js` in `/src` for more info. The only option you might want to change is `player` which is the hook used for Plyr, the default is `.player`.</td>
   </tr>
   <tr>
     <td><code>classes</code></td>
@@ -188,7 +204,13 @@ You can pass the following settings:
     <td><code>fullscreen</code></td>
     <td>Object</td>
     <td>&mdash;</td>
-    <td>This currently contains one property `enabled` which toggles if fullscreen should be enabled (if the browser supports it). The default value is `true`.</td>
+    <td>This currently contains two properties; `enabled` which toggles if fullscreen should be enabled (if the browser supports it). The default value is `true`. Also an extra property called `fallback` which will enable a 'full window' view for older browsers. The default value is `true`.</td>
+  </tr>
+  <tr>
+    <td><code>storage</code></td>
+    <td>Object</td>
+    <td>&mdash;</td>
+    <td>This currently contains one property `enabled` which toggles if local storage should be enabled (if the browser supports it). The default value is `true`. This enables storing user settings, currently it only stores volume but more will be added later.</td>
   </tr>
  </tbody>
 </table>
@@ -272,12 +294,34 @@ A complete list of events can be found here:
 ## Fullscreen
 Fullscreen in Plyr is supported for all browsers that [currently support it](http://caniuse.com/#feat=fullscreen). If you're using the default CSS, you can also use a "full browser" mode which will use the full browser window by adding the `player-fullscreen` class to your container.
 
-## Support
-- Chrome: full support
-- Safari: full support
-- Firefox: full support
-- Internet Explorer 10, 11: full support
-- Internet Explorer 9: native player used (no support for `<progress>` or `<input type="range">`) 
+## Browser support
+
+<table width="100%" style="text-align: center;">
+  <thead>
+    <tr>
+      <td>Safari</td>
+      <td>Firefox</td>
+      <td>Chrome</td>
+      <td>Opera</td>
+      <td>IE9</td>
+      <td>IE10+</td>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>✔</td>
+      <td>✔</td>
+      <td>✔</td>
+      <td>✔</td>
+      <td>✖&sup1;</td>
+      <td>✔&sup2;</td>
+    </tr>
+  </tbody>
+</table>
+
+&sup1; Native player used (no support for `<progress>` or `<input type="range">`)
+
+&sup2; IE10 has no native fullscreen support, fallback can be used (see options)
 
 The `enabled` option can be used to disable certain User Agents. For example, if you don't want to use Plyr for smartphones, you could use: 
 
@@ -289,15 +333,25 @@ 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 the library, 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
-This was created by Sam Potts ([@sam_potts](https://twitter.com/sam_potts))
+Plyr is developed by Sam Potts ([@sam_potts](https://twitter.com/sam_potts)) ([sampotts.me](http://sampotts.me))
 
+## Mentions
+- [The Changelog](http://thechangelog.com/plyr-simple-html5-media-player-custom-controls-webvtt-captions/)
+- [HTML5 Weekly #177](http://html5weekly.com/issues/177)
+- [Web Design Weekly #174](https://web-design-weekly.com/2015/02/24/web-design-weekly-174/)
+
+## Used by
+- [Selz.com](https://selz.com)
+
+Let me know on [Twitter](https://twitter.com/sam_potts) I can add you to the above list. It'd be awesome to see how you're using Plyr :-) 
 
 ## Useful links and credits
 Credit to the PayPal HTML5 Video player from which Plyr's caption functionality is ported from:
 - [PayPal's Accessible HTML5 Video Player](https://github.com/paypal/accessible-html5-video-player)
+- The icons used in Plyr are [Vicons](https://dribbble.com/shots/1663443-60-Vicons-Free-Icon-Set) plus some ones I made
 
 Also these links helped created Plyr:
 - [Media Events - W3.org](http://www.w3.org/2010/05/video/mediaevents.html)

src/less/plyr.less

@@ -10,16 +10,24 @@
 @gray: 						#565d64;
 @gray-light: 				#cbd0d3;
 
+// Font sizes
+@font-size-small: 			14px;
+@font-size-base: 			16px;
+@font-size-large:           ceil((@font-size-base * 1.5)); 
+
 // Controls
-@controls-bg: 				@gray-dark;
-@control-color: 			@gray-light;
-@control-color-active: 		@blue;
-@control-color-inactive: 	@gray;
 @control-spacing: 			10px;
+@controls-bg: 				@gray-dark;
+@control-bg-hover: 			@blue;
+@control-color: 			@gray-light;
+@control-color-inactive: 	@gray;
+@control-color-focus: 		#fff;
+@control-color-hover: 		#fff;
 
 // Progress
-@progress-bg: 				@gray;
-@progress-value-bg: 		@blue;
+@progress-bg: 				lighten(@gray, 10%);
+@progress-playing-bg: 		@blue;
+@progress-buffered-bg: 		@gray;
 
 // Range
 @range-track-height: 		6px;
@@ -27,11 +35,11 @@
 @range-thumb-height: 		(@range-track-height * 2);
 @range-thumb-width: 		(@range-track-height * 2);
 @range-thumb-bg: 			@control-color;
-@range-thumb-bg-focus: 		@control-color-active;
+@range-thumb-bg-focus: 		@control-bg-hover;
 
 // Breakpoints
 @bp-control-split: 			560px; // When controls split into left/right
-@bg-captions-large: 		768px; // When captions jump to the larger font size
+@bp-captions-large: 		768px; // When captions jump to the larger font size
 
 // Utility classes & mixins
 // -------------------------------
@@ -96,9 +104,8 @@
 	max-width: 100%;
 	min-width: 290px;
 	overflow: hidden; // For the controls
-	background: #000;
 
-	// BORDER-BOX ALL THE THINGS! 
+	// border-box everything
 	// http://paulirish.com/2012/box-sizing-border-box-ftw/
 	&,
 	*,
@@ -127,18 +134,18 @@
 		padding: 20px;
 		min-height: 2.5em;
 		color: #fff;
-		font-size: 16px;
+		font-size: @font-size-base;
 		font-weight: 600;
 		text-shadow: 
-		-1px -1px 0 rgba(red(@gray-dark), green(@gray-dark), blue(@gray-dark), .5), 
-		1px -1px 0 rgba(red(@gray-dark), green(@gray-dark), blue(@gray-dark), .5), 
-		-1px 1px 0 rgba(red(@gray-dark), green(@gray-dark), blue(@gray-dark), .5), 
-		1px 1px 0 rgba(red(@gray-dark), green(@gray-dark), blue(@gray-dark), .5);
+		-1px -1px 0 @gray, 
+		1px -1px 0 @gray, 
+		-1px 1px 0 @gray, 
+		1px 1px 0 @gray;
 		text-align: center;
 		.font-smoothing();
 
-		@media (min-width: @bg-captions-large) {
-			font-size: 24px;
+		@media (min-width: @bp-captions-large) {
+			font-size: @font-size-large;
 		}
 	}
 	&.captions-active &-captions {
@@ -206,18 +213,12 @@
 		input:focus + label,
 		button:focus {
 			.tab-focus();
-
-			svg {
-				fill: #fff;
-			}
+			color: @control-color-focus;
 		}
 		button:hover,
 		input + label:hover {
-			background: @control-color-active;
-
-			svg {
-				fill: #fff;
-			}
+			background: @control-bg-hover;
+			color: @control-color-hover;
 		}
 		.icon-exit-fullscreen,
 		.icon-muted {
@@ -227,9 +228,9 @@
 			display: inline-block;
 			vertical-align: middle;
 			margin-left: @control-spacing;
-			color: #fff;
+			color: @control-color;
 			font-weight: 600;
-			font-size: 14px;
+			font-size: @font-size-small;
 			.font-smoothing();
 		}
 	}
@@ -243,27 +244,45 @@
 		right: 0;
 		width: 100%;
 		height: @control-spacing;
-		margin: 0;
-		vertical-align: top;
-		
-		&[value] {
-			-webkit-appearance: none;
-			border: none;
-			background: @progress-bg;
+		background: @progress-bg;
+
+		&-buffer,
+		&-played {
+			position: absolute;
+			left: 0;
+			top: 0;
+			width: 100%;
+			height: 100%;
+			margin: 0;
+			vertical-align: top;
+			
+			&[value] {
+				-webkit-appearance: none;
+				border: none;
+				background: transparent;
+
+				&::-webkit-progress-bar {
+					background: transparent;
+				}
+
+				// Inherit from currentColor;
+				&::-webkit-progress-value {
+					background: currentColor;
+				}
+				&::-moz-progress-bar {
+					background: currentColor;
+				}
+			}
+		}
+		&-played {
+			z-index: 2;
+		}
+		&-played[value] {
 			cursor: pointer;
-			color: @progress-value-bg;
-
-			&::-webkit-progress-bar {
-				background: @progress-bg;
-			}
-
-			// Inherit from currentColor;
-			&::-webkit-progress-value {
-				background: currentColor;
-			}
-			&::-moz-progress-bar {
-				background: currentColor;
-			}
+			color: @progress-playing-bg;
+		}
+		&-buffer[value] {
+			color: @progress-buffered-bg;
 		}
 	}
 
@@ -287,11 +306,12 @@
 
 	// Volume control
 	// <input[type='range']> element
-	&-volume {
+	// Specificty is for bootstrap compatibility
+	&-volume[type=range] {
+		display: inline-block;
 		vertical-align: middle;
 		-webkit-appearance: none;
 		-moz-appearance: none;
-		//height: 6px;
 		width: 100px;
 		margin: 0 @control-spacing 0 0;
 		padding: 0;		
@@ -358,6 +378,7 @@
 		height: 100%;
 		width: 100%;
 		z-index: 10000000;
+		background: #000;
 
 		.player-video-wrapper {
 			height: 100%;
@@ -370,10 +391,10 @@
 				top: auto;
 				bottom: 90px;
 
-				@media (min-width: @bp-control-split) and (max-width: (@bg-captions-large - 1)) {
+				@media (min-width: @bp-control-split) and (max-width: (@bp-captions-large - 1)) {
 					bottom: 60px;
 				}
-				@media (min-width: @bg-captions-large) {
+				@media (min-width: @bp-captions-large) {
 					bottom: 80px;
 				}
 			}
@@ -383,14 +404,15 @@
 			bottom: 0;
 			left: 0;
 			right: 0;
+		}
+	}
 
-			.icon-exit-fullscreen {
-				display: block;
+	// When true full screen, show exit fullscreen icon
+	&.fullscreen-active .icon-exit-fullscreen {
+		display: block;
 
-				& + svg {
-					display: none;
-				}
-			}
+		& + svg {
+			display: none;
 		}
 	}
 

src/sass/plyr.scss

@@ -0,0 +1,443 @@
+// ==========================================================================
+// HTML5 Media Player
+// ==========================================================================
+
+// Variables
+// -------------------------------
+// Colors
+$blue:          			#3498DB;
+$gray-dark: 				#343f4a;
+$gray: 						#565d64;
+$gray-light: 				#cbd0d3;
+
+// Font sizes
+$font-size-small: 			14px;
+$font-size-base: 			16px;
+$font-size-large:           ceil(($font-size-base * 1.5));
+
+// Controls
+$control-spacing: 			10px;
+$controls-bg: 				$gray-dark;
+$control-bg-hover: 			$blue;
+$control-color: 			$gray-light;
+$control-color-inactive: 	$gray;
+$control-color-focus: 		#fff;
+$control-color-hover: 		#fff;
+
+// Progress
+$progress-bg: 				lighten($gray, 10%);
+$progress-playing-bg: 		$blue;
+$progress-buffered-bg: 		$gray;
+
+// Range
+$range-track-height: 		6px;
+$range-track-bg: 			$gray;
+$range-thumb-height: 		($range-track-height * 2);
+$range-thumb-width: 		($range-track-height * 2);
+$range-thumb-bg: 			$control-color;
+$range-thumb-bg-focus: 		$control-bg-hover;
+
+// Breakpoints
+$bp-control-split: 			560px; // When controls split into left/right
+$bp-captions-large: 		768px; // When captions jump to the larger font size
+
+// Utility classes & mixins
+// -------------------------------
+// Screen reader only
+.sr-only {
+	position: absolute !important;
+	clip: rect(1px, 1px, 1px, 1px);
+	padding: 0 !important;
+	border: 0 !important;
+	height: 1px !important;
+	width: 1px !important;
+	overflow: hidden;
+}
+// Contain floats: nicolasgallagher.com/micro-clearfix-hack/
+@mixin clearfix()
+{
+	zoom: 1;
+	&:before,
+	&:after { content: ""; display: table; }
+	&:after { clear: both; }
+}
+
+// Tab focus styles
+@mixin tab-focus()
+{
+	outline: thin dotted #000;
+	outline-offset: 1px;
+}
+
+// Range styling
+// ---------------------------------------
+@mixin range-thumb()
+{
+	height: $range-thumb-height;
+	width: $range-thumb-width;
+	background: $range-thumb-bg;
+	border: 0;
+	border-radius: ($range-thumb-height / 2);
+	transition: background .3s ease;
+	cursor: ew-resize;
+}
+@mixin range-track()
+{
+	height: $range-track-height;
+	background: $range-track-bg;
+	border: 0;
+	border-radius: ($range-track-height / 2);
+}
+
+// Font smoothing
+// ---------------------------------------
+@mixin font-smoothing($mode: on) when ($mode = on)
+{
+	-moz-osx-font-smoothing: grayscale;
+	-webkit-font-smoothing: antialiased;
+}
+@mixin font-smoothing($mode: on) when ($mode = off)
+{
+	-moz-osx-font-smoothing: auto;
+	-webkit-font-smoothing: subpixel-antialiased;
+}
+
+// Styles
+// -------------------------------
+// Base
+.player {
+	position: relative;
+	max-width: 100%;
+	min-width: 290px;
+	overflow: hidden; // For the controls
+
+	// border-box everything
+	// http://paulirish.com/2012/box-sizing-border-box-ftw/
+	&,
+	*,
+	*::after,
+	*::before {
+		box-sizing: border-box;
+	}
+
+	// For video
+	&-video-wrapper {
+		position: relative;
+	}
+	video {
+		width: 100%;
+		height: auto;
+		vertical-align: middle;
+	}
+
+	// Captions
+	&-captions {
+		display: none;
+		position: absolute;
+		bottom: 0;
+		left: 0;
+		width: 100%;
+		padding: 20px;
+		min-height: 2.5em;
+		color: #fff;
+		font-size: $font-size-base;
+		font-weight: 600;
+		text-shadow:
+		-1px -1px 0 $gray,
+		1px -1px 0 $gray,
+		-1px 1px 0 $gray,
+		1px 1px 0 $gray;
+		text-align: center;
+		@include font-smoothing();
+
+		@media (min-width: $bp-captions-large) {
+			font-size: $font-size-large;
+		}
+	}
+	&.captions-active &-captions {
+		display: block;
+	}
+
+	// Player controls
+	&-controls {
+		@include clearfix();
+		@include font-smoothing();
+		position: relative;
+		padding: ($control-spacing * 2) $control-spacing $control-spacing;
+		background: $controls-bg;
+		line-height: 1;
+		text-align: center;
+
+		// Layout
+		&-sound {
+			display: block;
+			margin: $control-spacing auto 0;
+		}
+		@media (min-width: $bp-control-split) {
+			&-playback {
+				float: left;
+			}
+			&-sound {
+				float: right;
+				margin-top: 0;
+			}
+		}
+
+		input + label,
+		button {
+			display: inline-block;
+			vertical-align: middle;
+			margin: 0 2px;
+			padding: ($control-spacing / 2) $control-spacing;
+
+			transition: background .3s ease;
+			border-radius: 3px;
+			cursor: pointer;
+
+			svg {
+				width: 18px;
+				height: 18px;
+				display: block;
+				fill: currentColor;
+				transition: fill .3s ease;
+			}
+		}
+		input + label,
+		input.inverted:checked + label {
+			color: $control-color-inactive;
+		}
+		button,
+		input.inverted + label,
+		input:checked + label {
+			color: $control-color;
+		}
+		button {
+			border: 0;
+			background: transparent;
+			overflow: hidden;
+		}
+		input:focus + label,
+		button:focus {
+			@include tab-focus();
+			color: $control-color-focus;
+		}
+		button:hover,
+		input + label:hover {
+			background: $control-bg-hover;
+			color: $control-color-hover;
+		}
+		.icon-exit-fullscreen,
+		.icon-muted {
+			display: none;
+		}
+		.player-time {
+			display: inline-block;
+			vertical-align: middle;
+			margin-left: $control-spacing;
+			color: $control-color;
+			font-weight: 600;
+			font-size: $font-size-small;
+			@include font-smoothing();
+		}
+	}
+
+	// Player progress
+	// <progress> element
+	&-progress {
+		position: absolute;
+		top: 0;
+		left: 0;
+		right: 0;
+		width: 100%;
+		height: $control-spacing;
+		background: $progress-bg;
+
+		&-buffer,
+		&-played {
+			position: absolute;
+			left: 0;
+			top: 0;
+			width: 100%;
+			height: 100%;
+			margin: 0;
+			vertical-align: top;
+
+			&[value] {
+				-webkit-appearance: none;
+				border: none;
+				background: transparent;
+
+				&::-webkit-progress-bar {
+					background: transparent;
+				}
+
+				// Inherit from currentColor;
+				&::-webkit-progress-value {
+					background: currentColor;
+				}
+				&::-moz-progress-bar {
+					background: currentColor;
+				}
+			}
+		}
+		&-played {
+			z-index: 2;
+		}
+		&-played[value] {
+			cursor: pointer;
+			color: $progress-playing-bg;
+		}
+		&-buffer[value] {
+			color: $progress-buffered-bg;
+		}
+	}
+
+	// States
+	&-controls [data-player='pause'],
+	&.playing .player-controls [data-player='play'] {
+		display: none;
+	}
+	&.playing .player-controls [data-player='pause'] {
+		display: inline-block;
+	}
+
+	// Muted
+	&.muted .player-controls .icon-muted {
+		display: block;
+
+		& + svg {
+			display: none;
+		}
+	}
+
+	// Volume control
+	// <input[type='range']> element
+	// Specificty is for bootstrap compatibility
+	&-volume[type=range] {
+		vertical-align: middle;
+		-webkit-appearance: none;
+		-moz-appearance: none;
+		width: 100px;
+		margin: 0 $control-spacing 0 0;
+		padding: 0;
+		cursor: pointer;
+		background: none;
+
+		// Webkit
+		&::-webkit-slider-runnable-track {
+			@include range-track();
+		}
+		&::-webkit-slider-thumb {
+			-webkit-appearance: none;
+			margin-top: -(($range-thumb-height - $range-track-height) / 2);
+			@include range-thumb();
+		}
+
+		// Mozilla
+		&::-moz-range-track {
+			@include range-track();
+		}
+		&::-moz-range-thumb {
+			@include range-thumb();
+		}
+
+		// Microsoft
+		&::-ms-track {
+			height: $range-track-height;
+			background: transparent;
+			border-color: transparent;
+			border-width: (($range-thumb-height - $range-track-height) / 2) 0;
+			color: transparent;
+		}
+		&::-ms-fill-lower,
+		&::-ms-fill-upper {
+			@include range-track();
+		}
+		&::-ms-thumb {
+			@include range-thumb();
+		}
+
+		&:focus {
+			outline: 0;
+
+			&::-webkit-slider-thumb {
+				background: $range-thumb-bg-focus;
+			}
+			&::-moz-range-thumb {
+				background: $range-thumb-bg-focus;
+			}
+			&::-ms-thumb {
+				background: $range-thumb-bg-focus;
+			}
+		}
+	}
+
+	// Full screen mode
+	&-fullscreen,
+	&.fullscreen-active {
+		position: fixed;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		height: 100%;
+		width: 100%;
+		z-index: 10000000;
+		background: #000;
+
+		.player-video-wrapper {
+			height: 100%;
+			width: 100%;
+
+			video {
+				height: 100%;
+			}
+			.player-captions {
+				top: auto;
+				bottom: 90px;
+
+				@media (min-width: $bp-control-split) and (max-width: ($bp-captions-large - 1)) {
+					bottom: 60px;
+				}
+				@media (min-width: $bp-captions-large) {
+					bottom: 80px;
+				}
+			}
+		}
+		.player-controls {
+			position: absolute;
+			bottom: 0;
+			left: 0;
+			right: 0;
+		}
+	}
+
+	// When true full screen, show exit fullscreen icon
+	&.fullscreen-active .icon-exit-fullscreen {
+		display: block;
+
+		& + svg {
+			display: none;
+		}
+	}
+
+	// Some options are hidden by default
+	[data-player='captions'],
+	[data-player='captions'] + label,
+	[data-player='fullscreen'],
+	[data-player='fullscreen'] + label {
+		display: none;
+	}
+	&.captions-enabled [data-player='captions'],
+	&.captions-enabled [data-player='captions'] + label,
+	&.fullscreen-enabled [data-player='fullscreen'],
+	&.fullscreen-enabled [data-player='fullscreen'] + label {
+		display: inline-block;
+	}
+
+	// Full browser view hides toggle
+	&-fullscreen [data-player='fullscreen'],
+	&-fullscreen [data-player='fullscreen'] + label {
+		display: none !important;
+	}
+}

src/sprite/icon-bubble.svg

@@ -3,4 +3,4 @@
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="18" height="18" viewBox="0 0 18 18">
 <path d="M9.016 3c2.748 0 4.984 2.243 4.984 5s-2.236 5-4.97 5l-0.060-0.004c-0.055-0.004-0.11-0.007-0.165-0.010l-0.336-0.014-3.665 1.098 0.629-2.483-0.517-0.747c-0.58-0.839-0.886-1.822-0.886-2.842 0-2.757 2.236-5 4.984-5zM9.016 1c-3.857 0-6.984 3.134-6.984 7 0 1.479 0.46 2.848 1.241 3.978l-1.272 5.022 6.722-2.015c0.098 0.004 0.194 0.015 0.293 0.015 3.857 0 6.984-3.134 6.984-7s-3.127-7-6.984-7v0z"></path>
-</svg>
+</svg>