v1.0.17

Fixes #4

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "plyr",
-  "version": "1.0.15",
+  "version": "1.0.17",
   "description": "A simple HTML5 media player using custom controls",
   "homepage": "http://plyr.io",
   "keywords": [

bundles.json

@@ -1,14 +1,25 @@
 {
-	"less": {
-		"plyr.css": 	["src/less/plyr.less"],
-		"docs.css": 	["src/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": 		["src/js/plyr.js"],
-		"docs.js": 		[
-			"src/js/lib/hogan-3.0.2.mustache.js",
-			"dist/js/templates.js",
-			"src/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/js/templates.js",
+				"docs/src/js/docs.js"
+			]
+		}
 	}
 }

changelog.md

@@ -1,5 +1,13 @@
 # Changelog
 
+## v1.0.7
+- 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

controls.md

@@ -1,16 +1,17 @@
 # Controls HTML
 
-This is the markup that is rendered for controls. It is a seperate option to allow full customisation of markup based on your needs. The default Plyr setup uses a Hogan template, this is to allow for localisation at a later date. If you check `controls.html` in `/src/templates` to get an idea of how the default html works.
+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 two placeholders to your html template:
+You need to add several placeholders to your html template that are replaced when rendering:
 
-- {id} for the dynamically generated ID for the player (for form controls)
-- {aria-label} for the dynamically generated play button label for screen readers
-- {seek-time} for the seek time specified in options for fast forward and rewind
+- `{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. 
 
@@ -18,7 +19,7 @@ Currently all buttons and inputs need to be present for Plyr to work but later w
 
 You can of course, just specify vanilla HTML. Here's an example snippet:
 
-```javascript
+```html
 var controls = [
 '<div class="player-controls">',
 	'<div class="player-progress">',
@@ -31,24 +32,24 @@ var controls = [
 	'</div>',
 	'<span class="player-controls-playback">',
 		'<button type="button" data-player="restart">',
-			'<span class="icon-restart" aria-hidden="true"></span>',
+			'<svg><use xlink:href="#icon-refresh"></use></svg>',
 			'<span class="sr-only">Restart</span>',
 		'</button>',
 		'<button type="button" data-player="rewind">',
-			'<span class="icon-rewind" aria-hidden="true"></span>',
-			'<span class="sr-only">Rewind <span class="player-seek-time">{seek_time}</span> seconds</span>',
+			'<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" aria-label="{aria-label}" data-player="play">',
-			'<span class="icon-play" aria-hidden="true"></span>',
+		'<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">',
-			'<span class="icon-pause" aria-hidden="true"></span>',
+			'<svg><use xlink:href="#icon-pause"></use></svg>',
 			'<span class="sr-only">Pause</span>',
 		'</button>',
 		'<button type="button" data-player="fast-forward">',
-			'<span class="icon-forward" aria-hidden="true"></span>',
-			'<span class="sr-only">Fast forward <span class="player-seek-time">{seek_time}</span> seconds</span>',
+			'<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>',
@@ -58,20 +59,20 @@ var controls = [
 	'<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}">',
-			'<span class="icon-mute icon-muted" aria-hidden="true"></span>',
-			'<span class="icon-volume-up" aria-hidden="true"></span>',
+			'<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>',
+		'<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}">',
-			'<span class="icon-subtitles" aria-hidden="true"></span>',
+			'<svg><use xlink:href="#icon-bubble"></use></svg>',
 			'<span class="sr-only">Captions</span>',
 		'</label>',
 		'<button type="button" data-player="fullscreen">',
-			'<span class="icon-resize-small icon-exit-fullscreen" aria-hidden="true"></span>',
-			'<span class="icon-resize-full" aria-hidden="true"></span>',
+			'<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>',

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}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}@font-face{font-family:Avenir;src:url(../../src/fonts/AvenirLTStd-Medium.woff2) format("woff2"),url(../../src/fonts/AvenirLTStd-Medium.woff) format("woff"),url(../../src/fonts/AvenirLTStd-Medium.ttf) format("truetype");font-style:normal;font-weight:400}@font-face{font-family:Avenir;src:url(../../src/fonts/AvenirLTStd-Heavy.woff2) format("woff2"),url(../../src/fonts/AvenirLTStd-Heavy.woff) format("woff"),url(../../src/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("	<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\">{seek-time}</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\">{seek-time}</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/css/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/js/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="../dist/css/plyr.css">
+
+		<!-- Docs styles -->
+		<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>
+
+		<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,"../dist/sprite.svg");
+		</script>
+
+		<!-- Plyr core script -->
+		<script src="../dist/js/plyr.js"></script>
+
+		<!-- Docs script -->
+		<script src="dist/js/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
 // ---------------------------------------
@@ -146,8 +148,4 @@ footer {
 	p {
 		margin-bottom: (@padding-base / 2);
 	}
-}
-
-// Fonts
-// Last to not block rendering
-@import "docs/fontface.less";
+}

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

@@ -14,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">{seek-time}</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>
@@ -26,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">{seek-time}</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>
@@ -41,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,8 +10,9 @@ 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"),
@@ -19,32 +20,42 @@ var fs 			= require("fs"),
 
 var root = __dirname,
 	paths = {
-    // Watch paths
-    watch: {
-    	less: 		path.join(root, "src/less/**/*"),
-	    js: 		path.join(root, "src/js/**/*"),
-	    sprite: 	path.join(root, "src/sprite/*.svg"),
-	    templates: 	path.join(root, "src/templates/*.html"),
-    },    
-    // Output paths
-    output: {
-		js:  		path.join(root, "dist/js/"),
-		css:  		path.join(root, "dist/css/"),
-		sprite:  	path.join(root, "dist/")
-    }
+	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: {
+			js:  		path.join(root, "dist/js/"),
+			css:  		path.join(root, "dist/css/"),
+			sprite:  	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: {
+			js:  		path.join(root, "docs/dist/js/"),
+			css:  		path.join(root, "docs/dist/css/")
+		}
+	}
 },
 
-// Task names
-taskNames = {    
-	jsAll: 		"js-all",
-    lessBuild: 	"less-",
-    jsBuild: 	"js-",
-    sprite: 	"sprite-build",
-    templates: 	"templates"
-},
 // Task arrays
-lessBuildTasks 	= [],
-jsBuildTasks 	= [],
+tasks = {    
+	less: 	[],
+	sass: 	[],
+	js:   	[]
+},
 
 // Fetch bundles from JSON
 bundles = loadJSON(path.join(root, "bundles.json"));
@@ -54,81 +65,126 @@ function loadJSON(path) {
     return JSON.parse(fs.readFileSync(path));
 }
 
-// Build templates
-gulp.task(taskNames.templates, function () {
-    return gulp
-    	.src(paths.watch.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.output.js));
-});
+var build = {
+	js: function (files, bundle, output) {
+		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(output));
+				});
+			})(key);
+		}
+	},
+	less: function(files, bundle, output) {
+		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.output.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(output));
+				});
+			})(key);
+		}
+	},
+	sass: function(files, bundle, output) {
+		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(output));
+				});
+			})(key);
+		}
+	},
+	sprite: function(source, output) {
+		// 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"], { cascade: true }))
-				.pipe(minifyCss())
-				.pipe(gulp.dest(paths.output.css));
+				.src(source)
+				.pipe(svgmin({
+					plugins: [{
+						removeDesc: true
+					}]
+				}))
+		        .pipe(svgstore())
+			    .pipe(gulp.dest(output));
 		});
-	})(key);
-}
+	},
+	templates: function(source, output) {
+		// Build templates
+		gulp.task("templates", function () {
+			return gulp
+				.src(source)
+				.pipe(hogan("templates.js", {
+					wrapper: false,
+					templateName: function (file) {
+						return path.basename(file.relative.replace(/\\/g, "-"), path.extname(file.relative));
+					}
+				}))
+				.pipe(gulp.dest(output));
+		});
+	}
+};
 
-// Process Icons
-gulp.task(taskNames.sprite, function () {
-	return gulp
-		.src(paths.watch.sprite)
-		.pipe(svgmin({
-			plugins: [{
-				removeDesc: true
-			}]
-		}))
-        .pipe(svgstore())
-	    .pipe(gulp.dest(paths.output.sprite));
-});
+// Plyr core files
+build.js(bundles.plyr.js, "plyr", paths.plyr.output.js);
+build.less(bundles.plyr.less, "plyr", paths.plyr.output.css);
+build.sass(bundles.plyr.sass, "plyr", paths.plyr.output.css);
+build.sprite(paths.plyr.src.sprite, paths.plyr.output.sprite);
+
+// Docs files
+build.templates(paths.docs.src.templates, paths.docs.output.js);
+build.less(bundles.docs.less, "docs", paths.docs.output.css);
+build.js(bundles.docs.js, "docs", paths.docs.output.js);
 
 // Default gulp task
 gulp.task("default", function(){
-	runSequence(taskNames.jsAll, lessBuildTasks.concat(taskNames.sprite, "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.watch.templates, [taskNames.jsAll]);
-    //gulp.watch(paths.watch.js, [taskNames.jsAll]);
-    gulp.watch(paths.watch.less, lessBuildTasks);
-    gulp.watch(paths.watch.sprite, [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");
 });

index.html

@@ -1,84 +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.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>
-
-		<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 -->
-		<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");
-		</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>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "plyr",
-  "version": "1.0.15",
+  "version": "1.0.17",
   "description": "A simple HTML5 media player using custom controls",
   "homepage": "http://plyr.io",
   "main": "gulpfile.js",
@@ -12,6 +12,7 @@
     "gulp-hogan-compile": "^0.4.1",
     "gulp-less": "~1.3.1",
     "gulp-minify-css": "~0.3.6",
+    "gulp-sass": "^1.3.3",
     "gulp-svgmin": "^1.0.0",
     "gulp-svgstore": "^5.0.0",
     "gulp-uglify": "~0.3.1",

readme.md

@@ -30,6 +30,8 @@ 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.
+
 ### Bower
 If bower is your thang, you can grab Plyr using:
 ```
@@ -38,14 +40,14 @@ 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 `/src` in your build to save a request. 
+If you want to use the default css, add the `plyr.css` file from /dist into your head, or even better use `plyr.less` or `plyr.sass` file included in `/src` in your build to save a request. 
 
 ```html
 <link rel="stylesheet" href="dist/css/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>
@@ -144,7 +146,7 @@ plyr.setup({
     <td><code>html</code></td>
     <td>String</td>
     <td><code>&mdash;</code></td>
-    <td>This is **required**. See [controls.md](controls.md) for more info on how the html needs to be structured.</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>
@@ -290,6 +292,7 @@ Fullscreen in Plyr is supported for all browsers that [currently support it](htt
       <td>Safari</td>
       <td>Firefox</td>
       <td>Chrome</td>
+      <td>Opera</td>
       <td>IE9</td>
       <td>IE10+</td>
     </tr>
@@ -299,6 +302,7 @@ Fullscreen in Plyr is supported for all browsers that [currently support it](htt
       <td>✔</td>
       <td>✔</td>
       <td>✔</td>
+      <td>✔</td>
       <td>✖&sup1;</td>
       <td>✔&sup2;</td>
     </tr>
@@ -306,6 +310,7 @@ Fullscreen in Plyr is supported for all browsers that [currently support it](htt
 </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: 

src/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
-	}
-});

src/js/plyr.js

@@ -1,6 +1,6 @@
 // ==========================================================================
 // Plyr
-// plyr.js v1.0.15
+// plyr.js v1.0.17
 // https://github.com/sampotts/plyr
 // ==========================================================================
 // Credits: http://paypal.github.io/accessible-html5-video-player/
@@ -432,11 +432,8 @@
             // Need to do a default?
             var html = config.html;
 
-            // Replace aria label instances
-            html = _replaceAll(html, "{aria-label}", config.playAriaLabel);
-
             // Replace seek time instances
-            html = _replaceAll(html, "{seek-time}", config.seekTime);
+            html = _replaceAll(html, "{seektime}", config.seekTime);
 
             // Replace all id references
             html = _replaceAll(html, "{id}", player.random);
@@ -490,6 +487,18 @@
             }
         }
 
+        // Setup aria attributes
+        function _setupAria() {
+            var label = player.buttons.play.innerText;
+
+            // 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;
+            }
+
+            player.buttons.play.setAttribute("aria-label", label);
+        }
+
         // Setup media
         function _setupMedia() {
             player.media = player.container.querySelectorAll("audio, video")[0];
@@ -1058,14 +1067,6 @@
                 return false;
             }
 
-            // Set up aria-label for Play button with the title option
-            if (typeof(config.title) === "undefined" || !config.title.length) {
-                config.playAriaLabel = "Play";
-            }
-            else {
-                config.playAriaLabel = "Play " + config.title;
-            }
-
             // Setup media
             _setupMedia();
 
@@ -1080,6 +1081,9 @@
                 return false;
             }
 
+            // Set up aria-label for Play button with the title option
+            _setupAria();
+
             // Captions
             _setupCaptions();
 

src/less/docs/fontface.less

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

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>