Minor tweaks

Fixes #34

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

@@ -1,5 +1,6 @@
 {
   "name": "plyr",
+  "version": "1.0.13",
   "description": "A simple HTML5 media player using custom controls",
   "homepage": "http://plyr.io",
   "keywords": [
@@ -14,7 +15,10 @@
   "dependencies": {},
   "main": [
     "dist/css/plyr.css",
-    "dist/js/plyr.js"
+    "dist/js/plyr.js",
+    "dist/sprite.svg",
+    "src/less/plyr.less",
+    "src/js/plyr.js"
   ],
   "ignore": [
     "node_modules",

bundles.json

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

changelog.md

@@ -0,0 +1,49 @@
+# Changelog
+
+## 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

dist/css/docs.css

@@ -1 +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}*,::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}
+/*! 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 +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("	<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: {  }});
+    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\">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: {  }});

gulpfile.js

@@ -17,23 +17,21 @@ var fs 			= require("fs"),
 	svgmin 		= require("gulp-svgmin"),
 	hogan 		= require("gulp-hogan-compile");
 
-var projectPath = __dirname;
+var root = __dirname,
-var paths = {
+	paths = {
-    project: 		projectPath,
-
     // Watch paths
-    watchless: 		path.join(projectPath, "assets/less/**/*"),
+    watch: {
-    watchjs: 		path.join(projectPath, "assets/js/**/*"),
+    	less: 		path.join(root, "src/less/**/*"),
-    watchicons: 	path.join(projectPath, "assets/icons/**/*"),
+	    js: 		path.join(root, "src/js/**/*"),
-    watchtemplates: path.join(projectPath, "assets/templates/**/*"),
+	    sprite: 	path.join(root, "src/sprite/*.svg"),
-
+	    templates: 	path.join(root, "src/templates/*.html"),
-    // SVG Icons
+    },    
-   	svg: 			path.join(projectPath, "assets/icons/*.svg"),
-
     // Output paths
-    js:  			path.join(projectPath, "dist/js/"),
+    output: {
-    css:  			path.join(projectPath, "dist/css/"),
+		js:  		path.join(root, "dist/js/"),
-    icons:  		path.join(projectPath, "dist/svg/")
+		css:  		path.join(root, "dist/css/"),
+		sprite:  	path.join(root, "dist/")
+    }
 },
 
 // Task names
@@ -41,7 +39,7 @@ taskNames = {
 	jsAll: 		"js-all",
     lessBuild: 	"less-",
     jsBuild: 	"js-",
-    iconBuild: 	"icon-build",
+    sprite: 	"sprite-build",
     templates: 	"templates"
 },
 // Task arrays
@@ -49,7 +47,7 @@ lessBuildTasks 	= [],
 jsBuildTasks 	= [],
 
 // Fetch bundles from JSON
-bundles = loadJSON(path.join(paths.project, "bundles.json"));
+bundles = loadJSON(path.join(root, "bundles.json"));
 
 // Load json
 function loadJSON(path) {
@@ -59,14 +57,14 @@ function loadJSON(path) {
 // Build templates
 gulp.task(taskNames.templates, function () {
     return gulp
-    	.src(paths.watchtemplates)
+    	.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.js));
+        .pipe(gulp.dest(paths.output.js));
 });
 
 // Process JS 
@@ -80,7 +78,7 @@ for (var key in bundles.js) {
 	        	.src(bundles.js[key])
 				.pipe(concat(key))
 	            .pipe(uglify())
-	            .pipe(gulp.dest(paths.js));
+	            .pipe(gulp.dest(paths.output.js));
 	    });
 	})(key);
 }
@@ -97,32 +95,29 @@ for (var key in bundles.less) {
 				.pipe(less())
 				.on("error", gutil.log)
 				.pipe(concat(key))
-				.pipe(prefix(["last 2 versions", "> 1%", "ie 9"], { cascade: true }))
+				.pipe(prefix(["last 2 versions"], { cascade: true }))
 				.pipe(minifyCss())
-				.pipe(gulp.dest(paths.css));
+				.pipe(gulp.dest(paths.output.css));
 		});
 	})(key);
 }
 
 // Process Icons
-gulp.task(taskNames.iconBuild, function () {
+gulp.task(taskNames.sprite, function () {
 	return gulp
-		.src(paths.svg)
+		.src(paths.watch.sprite)
 		.pipe(svgmin({
 			plugins: [{
 				removeDesc: true
 			}]
 		}))
-        .pipe(svgstore({ 
+        .pipe(svgstore())
-        	prefix: 	"icon-",
+	    .pipe(gulp.dest(paths.output.sprite));
-        	fileName: 	"sprite.svg"
-        }))
-	    .pipe(gulp.dest(paths.icons));
 });
 
 // Default gulp task
 gulp.task("default", function(){
-	runSequence(taskNames.jsAll, lessBuildTasks.concat(taskNames.iconBuild, "watch"));
+	runSequence(taskNames.jsAll, lessBuildTasks.concat(taskNames.sprite, "watch"));
 });
 
 // Build all JS (inc. templates)
@@ -132,8 +127,8 @@ gulp.task(taskNames.jsAll, function(){
 
 // Watch for file changes
 gulp.task("watch", function () {
-	//gulp.watch(paths.watchtemplates, [taskNames.jsAll]);
+	//gulp.watch(paths.watch.templates, [taskNames.jsAll]);
-    //gulp.watch(paths.watchjs, [taskNames.jsAll]);
+    //gulp.watch(paths.watch.js, [taskNames.jsAll]);
-    gulp.watch(paths.watchless, lessBuildTasks);
+    gulp.watch(paths.watch.less, lessBuildTasks);
-    gulp.watch(paths.watchicons, [taskNames.iconBuild]);
+    gulp.watch(paths.watch.sprite, [taskNames.iconBuild]);
 });

index.html

@@ -20,17 +20,17 @@
 
 		<section class="example-video">
 			<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.selz.com/plyr/1.0/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.webm" type="video/webm">
 					
 					<!-- Text track file -->
-					<track kind="captions" label="English captions" src="//cdn.sampotts.me/plyr/movie_captions.vtt" srclang="en" default>
+					<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.sampotts.me/plyr/movie.mp4">Download</a>
+						<a href="//cdn.selz.com/plyr/1.0/movie.mp4">Download</a>
 					</div>
 				</video>
 			</div>
@@ -41,21 +41,28 @@
 			<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.sampotts.me/plyr/logistics-96-sample.ogg" type="application/ogg">
+					<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>
 			<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/svg/sprite.svg");
+		(function(d,p){var a=new XMLHttpRequest(),b=d.body;a.open("GET",p,!0);a.send();a.onload=function(){var c=d.createElement("div");c.style.display="none";c.innerHTML=a.responseText;b.insertBefore(c,b.childNodes[0])}})(document,"dist/sprite.svg");
 		</script>
 
 		<!-- Core player -->

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,
+Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
-are permitted provided that the following conditions are met:
 
-* Redistributions of source code must retain the above copyright notice, this
+1. Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.
-  list of conditions and the following disclaimer.
 
-* Redistributions in binary form must reproduce the above copyright notice, this
+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.
-  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
+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.
-  subsidiaries or affiliates 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
+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.
-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.13",
   "description": "A simple HTML5 media player using custom controls",
   "homepage": "http://plyr.io",
   "main": "gulpfile.js",
@@ -13,7 +13,7 @@
     "gulp-less": "~1.3.1",
     "gulp-minify-css": "~0.3.6",
     "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,7 +8,7 @@ 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.
@@ -16,9 +16,15 @@ We wanted a lightweight, accessible and customisable media player that just supp
 - **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)
+
+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
 
@@ -64,19 +70,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.selz.com/plyr/1.0/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.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">
+			<a href="//cdn.selz.com/plyr/1.0/movie.mp4">Download</a>
-				<img src="//cdn.sampotts.me/plyr/poster.jpg" alt="Download">
-			</a>
 		</div>
 	</video>
 </div>
@@ -87,11 +91,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>
@@ -289,15 +294,15 @@ 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))
-
 
 ## 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/docs.less

@@ -35,7 +35,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 +100,9 @@ a {
 	&:focus {
 		.tab-focus();
 	}
+	&.logo {
+		border: 0;
+	}
 }
 .btn {
 	display: inline-block;
@@ -111,6 +113,7 @@ a {
 	.font-smoothing(on);
 	font-weight: 600;
 	border-radius: 3px;
+	user-select: none;
 	
 	&:hover,
 	&:focus {
@@ -136,6 +139,15 @@ a {
 	}
 }
 
+// Footer
+footer {
+	margin-bottom: @padding-base;
+
+	p {
+		margin-bottom: (@padding-base / 2);
+	}
+}
+
 // Fonts
 // Last to not block rendering
 @import "docs/fontface.less";

src/less/docs/fontface.less

@@ -0,0 +1,16 @@
+@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/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-bg: 				lighten(@gray, 10%);
-@progress-value-bg: 		@blue;
+@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 @gray, 
-		1px -1px 0 rgba(red(@gray-dark), green(@gray-dark), blue(@gray-dark), .5), 
+		1px -1px 0 @gray, 
-		-1px 1px 0 rgba(red(@gray-dark), green(@gray-dark), blue(@gray-dark), .5), 
+		-1px 1px 0 @gray, 
-		1px 1px 0 rgba(red(@gray-dark), green(@gray-dark), blue(@gray-dark), .5);
+		1px 1px 0 @gray;
 		text-align: center;
 		.font-smoothing();
 
-		@media (min-width: @bg-captions-large) {
+		@media (min-width: @bp-captions-large) {
-			font-size: 24px;
+			font-size: @font-size-large;
 		}
 	}
 	&.captions-active &-captions {
@@ -206,18 +213,12 @@
 		input:focus + label,
 		button:focus {
 			.tab-focus();
-
+			color: @control-color-focus;
-			svg {
-				fill: #fff;
-			}
 		}
 		button:hover,
 		input + label:hover {
-			background: @control-color-active;
+			background: @control-bg-hover;
-
+			color: @control-color-hover;
-			svg {
-				fill: #fff;
-			}
 		}
 		.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;
+		background: @progress-bg;
-		vertical-align: top;
 
-		&[value] {
+		&-buffer,
-			-webkit-appearance: none;
+		&-played {
-			border: none;
+			position: absolute;
-			background: @progress-bg;
+			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;
+			color: @progress-playing-bg;
-
+		}
-			&::-webkit-progress-bar {
+		&-buffer[value] {
-				background: @progress-bg;
+			color: @progress-buffered-bg;
-			}
-
-			// Inherit from currentColor;
-			&::-webkit-progress-value {
-				background: currentColor;
-			}
-			&::-moz-progress-bar {
-				background: currentColor;
-			}
 		}
 	}
 
@@ -291,7 +310,6 @@
 		vertical-align: middle;
 		-webkit-appearance: none;
 		-moz-appearance: none;
-		//height: 6px;
 		width: 100px;
 		margin: 0 @control-spacing 0 0;
 		padding: 0;		
@@ -358,6 +376,7 @@
 		height: 100%;
 		width: 100%;
 		z-index: 10000000;
+		background: #000;
 
 		.player-video-wrapper {
 			height: 100%;
@@ -370,10 +389,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 +402,15 @@
 			bottom: 0;
 			left: 0;
 			right: 0;
+		}
+	}
 
-			.icon-exit-fullscreen {
+	// When true full screen, show exit fullscreen icon
-				display: block;
+	&.fullscreen-active .icon-exit-fullscreen {
+		display: block;
 
-				& + svg {
+		& + svg {
-					display: none;
+			display: none;
-				}
-			}
 		}
 	}
 

src/templates/controls.html

@@ -1,7 +1,12 @@
 <div class="player-controls">
-	<progress class="player-progress" max="100" value="0">
+	<div class="player-progress">
-		<span>0</span>% played
+		<progress class="player-progress-played" max="100" value="0">
-	</progress>
+			<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>