Improved plugin syntax, refactoring...

assets/icons/bubble.svg

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generated by IcoMoon.io -->
+<!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>

assets/icons/film.svg

@@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generated by IcoMoon.io -->
-<!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="M17 2h-16c-0.552 0-1 0.448-1 1v12c0 0.552 0.448 1 1 1h16c0.552 0 1-0.448 1-1v-12c0-0.552-0.448-1-1-1zM2 4h2v2h-2v-2zM2 8h2v2h-2v-2zM2 14v-2h2v2h-2zM6 14v-10h6v10h-6zM16 14h-2v-2h2v2zM16 10h-2v-2h2v2zM16 6h-2v-2h2v2z"></path>
-</svg>

assets/icons/muted.svg

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+    <!-- Generator: Sketch 3.2.2 (9983) - http://www.bohemiancoding.com/sketch -->
+    <title>muted</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" sketch:type="MSPage">
+        <g id="sound" sketch:type="MSLayerGroup" transform="translate(0.000000, 2.000000)">
+            <path d="M9.214,0 C9.103,0 8.989,0.032 8.88,0.101 L4.832,2.911 C4.749,2.969 4.65,3 4.549,3 L0.996,3 C0.446,3 1.33226763e-15,3.448 1.33226763e-15,4 L1.33226763e-15,10 C1.33226763e-15,10.552 0.446,11 0.996,11 L4.549,11 C4.651,11 4.749,11.031 4.832,11.089 L8.88,13.899 C8.989,13.968 9.103,14 9.214,14 C9.606,14 9.961,13.6 9.961,13.051 L9.961,0.95 C9.961,0.4 9.606,0.001 9.214,0.001 L9.214,0 Z M7.969,10.834 L5.582,9.177 C5.416,9.062 5.218,8.999 5.016,8.999 L2.491,8.999 C2.216,8.999 1.993,8.775 1.993,8.499 L1.993,5.499 C1.993,5.223 2.216,4.999 2.491,4.999 L5.016,4.999 C5.218,4.999 5.416,4.937 5.582,4.821 L7.969,3.164 L7.969,10.833 L7.969,10.834 Z" id="Shape" sketch:type="MSShapeGroup"></path>
+            <path d="M14.934,6.799 C14.848,5.051 13.42,3.808 12.427,3.15 C11.957,2.838 11.333,3.028 11.102,3.558 L11.064,3.644 C10.876,4.075 11.019,4.583 11.4,4.838 C12.106,5.311 12.986,6.085 13.024,6.903 C13.056,7.579 12.471,8.371 11.361,9.173 C10.963,9.461 10.832,10.012 11.076,10.448 L11.118,10.523 C11.384,10.998 11.984,11.147 12.418,10.835 C14.158,9.584 15.004,8.229 14.934,6.798 L14.934,6.799 Z" id="Shape" sketch:type="MSShapeGroup"></path>
+            <path d="M17.934,6.799 C17.848,5.051 16.42,3.808 15.427,3.15 C14.957,2.838 14.333,3.028 14.102,3.558 L14.064,3.644 C13.876,4.075 14.019,4.583 14.4,4.838 C15.106,5.311 15.986,6.085 16.024,6.903 C16.056,7.579 15.471,8.371 14.361,9.173 C13.963,9.461 13.832,10.012 14.076,10.448 L14.118,10.523 C14.384,10.998 14.984,11.147 15.418,10.835 C17.158,9.584 18.004,8.229 17.934,6.798 L17.934,6.799 Z" id="Shape-2" sketch:type="MSShapeGroup" transform="translate(15.945467, 6.999165) rotate(-180.000000) translate(-15.945467, -6.999165) "></path>
+        </g>
+    </g>
+</svg>

assets/icons/pause.svg

@@ -4,10 +4,10 @@
     <title>pause</title>
     <desc>Created with Sketch.</desc>
     <defs></defs>
-    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
-        <g id="pause" sketch:type="MSLayerGroup" transform="translate(3.000000, 3.000000)" stroke="#FFFFFF" stroke-width="2">
-            <rect id="Rectangle-1" sketch:type="MSShapeGroup" x="8" y="0" width="4" height="12" rx="1"></rect>
-            <rect id="Rectangle-2" sketch:type="MSShapeGroup" x="0" y="0" width="4" height="12" rx="1"></rect>
+    <g id="Page-1" stroke="none" stroke-width="1" sketch:type="MSPage">
+        <g id="pause" sketch:type="MSLayerGroup" transform="translate(2.000000, 2.000000)">
+            <path d="M0,2 L0,12 C5.24848613e-17,14 2,14 2,14 L4,14 C4,14 6,14 6,12 C6,11.786438 6,11.572876 6,11 L6,2 C6,3.17446247e-09 4,0 4,0 L2,0 C2,0 0,0 0,2 Z M2,2 L4,2 L4,12 L2,12 L2,2 Z" id="Path-1" sketch:type="MSShapeGroup"></path>
+            <path d="M8,2 L8,12 C8,14 10,14 10,14 L12,14 C12,14 14,14 14,12 C14,11.786438 14,11.572876 14,11 L14,2 C14,3.17446247e-09 12,0 12,0 L10,0 C10,0 8,0 8,2 Z M10,2 L12,2 L12,12 L10,12 L10,2 Z" id="Path-2" sketch:type="MSShapeGroup"></path>
         </g>
     </g>
 </svg>

assets/js/docs.js

@@ -2,16 +2,16 @@
 // Docs example
 // ==========================================================================
 
-/*global InitPxVideo, Mustache, templates */
+/*global simpleMedia, templates */
 
-// Initialize
-var video = new InitPxVideo({
-	"videoId": 				"myvid",
-	"captionsOnDefault": 	true,
-	"seekInterval": 		20,
-	"videoTitle": 			"PayPal Austin promo",
-	"debug": 				true,
-	"html": 				templates.controls.render({})
+// Register a callback
+simpleMedia.on("setup", function() {
+	console.log(this);
 });
 
-console.log(video);
+//execute shout
+simpleMedia.setup({
+	debug: 	true,
+	title: 	"PayPal demo",
+	html: 	templates.controls.render({})
+});

assets/less/simple-media.less

@@ -5,26 +5,21 @@
 // Variables
 // -------------------------------
 // Colors
-@base-color: 		#2E3C44;
-@green: 			#1ABC9C;
-@red:           	#D44334;
-@blue:          	#3498DB;
-
-// Grays
-@gray-dark: 		#343f4a;
-@gray: 				#565d64;
-@gray-light: 		#6f7e86;
-@gray-lighter: 		#859093;
-@gray-lightest: 	#cbd0d3;
-@gray-light-mega: 	#dadfe2;
-@off-white:         #f9fafb;
+@blue:          			#3498DB;
+@gray-dark: 				#343f4a;
+@gray: 						#565d64;
+@gray-light: 				#cbd0d3;
 
 // Controls
-@control-color: 		@gray-lightest;
-@control-color-active: 	@blue;
-@control-color-inactive: @gray;
-@control-spacing: 		10px;
+@controls-bg: 				@gray-dark;
+@control-color: 			@gray-light;
+@control-color-active: 		@blue;
+@control-color-inactive: 	@gray;
+@control-spacing: 			10px;
 
+// Progress
+@progress-bg: 				@gray;
+@progress-value-bg: 		@blue;
 
 // BORDER-BOX ALL THE THINGS! (http://paulirish.com/2012/box-sizing-border-box-ftw/)
 // -------------------------------
@@ -37,6 +32,7 @@
 
 // Utility classes & mixins
 // -------------------------------
+// Screen reader only
 .sr-only {
 	position: absolute !important;
 	clip: rect(1px, 1px, 1px, 1px);
@@ -46,12 +42,6 @@
 	width: 1px !important;
 	overflow: hidden;
 }
-.hide {
-    display: none;
-}
-.show-inline {
-	display: inline-block;
-}
 // Contain floats: nicolasgallagher.com/micro-clearfix-hack/
 .clearfix() {
 	zoom: 1;
@@ -59,6 +49,13 @@
 	&:after { content: ""; display: table; }
 	&:after { clear: both; }
 }
+
+// Tab focus styles
+.tab-focus() {
+	outline: thin dotted #000;
+	outline-offset: 1px;
+}
+
 // Font smoothing
 // ---------------------------------------
 .font-smoothing(@mode: on) when (@mode = on) {
@@ -79,47 +76,21 @@
 	overflow: hidden; // For the controls
 	background: #000;
 
+
 	// For video
 	&-video {
 		position: relative;
 	}
 
-	&:fullscreen {
-		height: 100%;
-		width: 100%;
-
-		&-video {
-			position: absolute;
-			top: 50%;
-			left: 0;
-			right: 0;
-			transform: translateY(-50%);
-		}
-		&-controls {
-			position: absolute;
-			bottom: 0;
-			left: 0;
-			right: 0;
-
-			.icon-exit-fullscreen {
-				display: block;
-
-				& + svg {
-					display: none;
-				}
-			}
-		}
-	}
 	video {
 		width: 100%;
 		height: auto;
 		vertical-align: middle;
 	}
-	svg {
-		width: 18px;
-		height: 18px;
-	}
-	.px-video-captions {
+
+	// Captions
+	&-captions {
+		display: none;
 		position: absolute;
 		bottom: 0;
 		left: 0;
@@ -132,13 +103,26 @@
 		text-align: center;
 		.font-smoothing();
 	}
+	&.captions &-captions {
+		display: block;
+	}
 
+	// Player controls
 	&-controls {
 		.clearfix();
+		.font-smoothing();
 		position: relative;
 		padding: (@control-spacing * 2) @control-spacing @control-spacing;
-		background: @gray-dark;
+		background: @controls-bg;
 		line-height: 1;
+
+		// Layout
+		&-playback {
+			float: left;
+		}
+		&-sound {
+			float: right;
+		}
 		
 		input + label, 
 		button {
@@ -152,6 +136,8 @@
 			cursor: pointer;
 
 			svg {
+				width: 18px;
+				height: 18px;
 				display: block;
 				fill: currentColor;
 				transition: fill .3s ease;
@@ -170,25 +156,28 @@
 			border: 0;
 			background: transparent;
 			overflow: hidden;
-
-			&:focus {
-				outline: 0;
-			}
 		}
 		button:hover,
-		button:focus,
-		label:hover,
-		input:focus + label {
+		label:hover {
 			background: @control-color-active;
 
 			svg {
 				fill: #fff;
 			}
 		}
-		.icon-exit-fullscreen {
+		input:focus + label,
+		button:focus {
+			.tab-focus();
+
+			svg {
+				fill: #fff;
+			}
+		}
+		.icon-exit-fullscreen,
+		.icon-muted {
 			display: none;
 		}
-		.px-video-time {
+		.player-time {
 			display: inline-block;
 			vertical-align: middle;
 			margin-left: @control-spacing;
@@ -198,7 +187,9 @@
 			.font-smoothing();
 		}
 	}
-	progress {
+
+	// Player progress
+	&-progress {
 		position: absolute;
 		top: 0;
 		left: 0;
@@ -211,45 +202,48 @@
 		&[value] {
 			-webkit-appearance: none;
 			border: none;
-			background: @gray;
+			background: @progress-bg;
 			cursor: pointer;
 
 			&::-webkit-progress-bar {
-				background: @gray;
+				background: @progress-bg;
 			}
 
 			// The value
 			&::-webkit-progress-value {
-				background: @control-color-active;
+				background: @progress-value-bg;
 			}
 			&::-moz-progress-bar {
-				background: @control-color-active;
+				background: @progress-value-bg;
 			}
 		}
 	}
-	.play-controls {
-		float: left;
-	}
-	.sound-controls {
-		float: right;
-	}
 
-	&-controls .px-video-pause,
-	&.playing .player-controls .px-video-play {
+	// States
+	&-controls [data-player='pause'],
+	&.playing .player-controls [data-player='play'] {
 		display: none;
 	}
-	&.playing .player-controls .px-video-pause {
+	&.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'] {
+	&-volume {
 		-webkit-appearance: none;
 		height: 6px;
 		width: 100px;
 		margin-right: @control-spacing;
 		background: @gray;
-		outline: 0;
 		border-radius: 10px;
 		
 		&::-moz-range-track {
@@ -274,27 +268,59 @@
 			background: @control-color;
 			border-radius: 100%;
 		}
-		&:focus::-webkit-slider-thumb {
-			background: @control-color-active;
+		&:focus {
+			outline: 0;
+			
+			&::-webkit-slider-thumb {
+				background: @control-color-active;
+			}
+			&::-moz-range-thumb {
+				background: @control-color-active;
+			}
 		}
-		&:focus::-moz-range-thumb {
-			background: @control-color-active;
+	}
+
+	// Full screen mode
+	&:fullscreen {
+		height: 100%;
+		width: 100%;
+
+		.player-video {
+			position: absolute;
+			top: 50%;
+			left: 0;
+			right: 0;
+			transform: translateY(-50%);
+		}
+		.player-controls {
+			position: absolute;
+			bottom: 0;
+			left: 0;
+			right: 0;
+
+			.icon-exit-fullscreen {
+				display: block;
+
+				& + svg {
+					display: none;
+				}
+			}
 		}
 	}
 }
 
 /* fixing display for IE10+ */
 @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
-	.px-video-controls input[type='range'] {
+	.video-controls .player-volume {
 		position: relative;
 		padding: 0;
 		height: 8px;
 		top: -3px;
 	}
-	.px-video-time {
+	.player-time {
 		margin-top: 4px;
 	}
-	.px-video-captions {
+	.player-captions {
 		padding: 8px;
 		min-height: 36px;
 	}

assets/templates/controls.html

@@ -1,54 +1,53 @@
 <div class="player-controls">
-	<progress class="px-video-progress" max="100" value="0"><span>0</span>% played</progress>
+	<progress class="player-progress" max="100" value="0">
+		<span>0</span>% played
+	</progress>
 
-	<div class="play-controls">
-		<button class="px-video-restart" data-player="restart">
+	<div class="player-controls-playback">
+		<button data-player="restart">
 			<svg><use xlink:href="#icon-refresh"></use></svg>
 			<span class="sr-only">Restart</span>
 		</button>
-		<button class="px-video-rewind" data-player="rewind">
+		<button data-player="rewind">
 			<svg><use xlink:href="#icon-rewind"></use></svg>
-			<span class="sr-only">Rewind <span class="px-seconds">10</span> seconds</span>
+			<span class="sr-only">Rewind <span class="player-seek-time">10</span> seconds</span>
 		</button>
-		<button class="px-video-play" aria-label="{aria-label}" data-player="play">
+		<button aria-label="{aria-label}" data-player="play">
 			<svg><use xlink:href="#icon-play"></use></svg>
 			<span class="sr-only">Play</span>
 		</button>
-		<button class="px-video-pause" data-player="pause">
+		<button data-player="pause">
 			<svg><use xlink:href="#icon-pause"></use></svg>
 			<span class="sr-only">Pause</span>
 		</button>
-		<button class="px-video-forward" data-player="fast-forward">
+		<button data-player="fast-forward">
 			<svg><use xlink:href="#icon-fast-forward"></use></svg>
-			<span class="sr-only">Fast forward <span class="px-seconds">10</span> seconds</span>
+			<span class="sr-only">Fast forward <span class="player-seek-time">10</span> seconds</span>
 		</button>
-		<div class="px-video-time">
+		<span class="player-time">
 			<span class="sr-only">Time</span>
-			<span class="px-video-duration">00:00</span>
-		</div>
+			<span class="player-duration">00:00</span>
+		</span>
 	</div>
 
-	<div class="sound-controls">
-		<!--<div class="px-video-mute-btn-container">-->
-			<input class="px-video-mute inverted sr-only" id="btnMute{id}" type="checkbox">
-			<label id="labelMute{id}" for="btnMute{id}">
-				<svg><use xlink:href="#icon-sound"></use></svg>
-				<span class="sr-only">Mute</span>
-			</label>
-		<!--</div>-->
+	<div class="player-controls-sound">
+		<input class="inverted sr-only" id="mute{id}" type="checkbox" data-player="mute">
+		<label id="mute{id}" for="mute{id}">
+			<svg class="icon-muted"><use xlink:href="#icon-muted"></use></svg>
+			<svg><use xlink:href="#icon-sound"></use></svg>
+			<span class="sr-only">Mute</span>
+		</label>
 
 		<label for="volume{id}" class="sr-only">Volume:</label>
-		<input id="volume{id}" class="px-video-volume" type="range" min="0" max="10" value="5">
+		<input id="volume{id}" class="player-volume" type="range" min="0" max="10" value="5" data-player="volume">
 
-		<!--<div class="px-video-captions-btn-container hide">-->
-			<input class="px-video-btnCaptions sr-only" id="btnCaptions{id}" type="checkbox">
-			<label for="btnCaptions{id}">
-				<svg><use xlink:href="#icon-film"></use></svg>
-				<span class="sr-only">Captions</span>
-			</label>
-		<!--</div>-->
+		<input class="sr-only" id="captions{id}" type="checkbox" data-player="captions">
+		<label for="captions{id}">
+			<svg><use xlink:href="#icon-bubble"></use></svg>
+			<span class="sr-only">Captions</span>
+		</label>
 
-		<button class="player-toggle-fullscreen" data-player="toggle-fullscreen">
+		<button data-player="fullscreen">
 			<svg class="icon-exit-fullscreen"><use xlink:href="#icon-collapse"></use></svg>
 			<svg><use xlink:href="#icon-expand"></use></svg>
 			<span class="sr-only">Toggle fullscreen</span>

design/IcoMoon/SVG/bubble.svg

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generated by IcoMoon.io -->
+<!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" fill="#444444"></path>
+</svg>

design/IcoMoon/demo.html

@@ -10,6 +10,10 @@
 <body>
 <svg display="none" width="0" height="0" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 <defs>
+<symbol id="icon-bubble" viewBox="0 0 1024 1024">
+	<title>bubble</title>
+	<path class="path1" d="M512.889 170.667c156.334 0 283.556 127.596 283.556 284.444s-127.221 284.444-282.722 284.459l-3.388-0.208c-3.14-0.222-6.251-0.412-9.388-0.555l-19.111-0.791-208.473 62.485 35.778-141.227-29.388-42.51c-32.974-47.751-50.418-103.653-50.418-161.653 0-156.848 127.195-284.444 283.556-284.444zM512.889 56.889c-219.445 0-397.333 178.292-397.333 398.222 0 84.124 26.167 162.028 70.612 226.32l-72.389 285.68 382.416-114.626c5.584 0.236 11.056 0.848 16.695 0.848 219.445 0 397.333-178.292 397.333-398.222s-177.888-398.222-397.333-398.222v0z"></path>
+</symbol>
 <symbol id="icon-sound" viewBox="0 0 1024 1024">
 	<title>sound</title>
 	<path class="path1" d="M581.056 113.778c-6.332 0-12.779 1.819-19.001 5.764l-230.277 159.847c-4.722 3.292-10.332 5.056-16.11 5.056h-202.112c-31.305 0-56.667 25.472-56.667 56.889v341.333c0 31.417 25.362 56.889 56.667 56.889h202.112c5.778 0 11.388 1.764 16.11 5.056l230.277 159.847c6.222 3.945 12.695 5.764 19.001 5.764 22.277 0 42.5-22.736 42.5-54v-688.43c0-31.278-20.222-54.014-42.5-54.014zM510.222 730.139l-135.78-94.265c-9.472-6.569-20.722-10.1-32.222-10.1h-143.666c-15.666 0-28.334-12.736-28.334-28.444v-170.667c0-15.708 12.667-28.444 28.334-28.444h143.668c11.5 0 22.75-3.527 32.222-10.098l135.778-94.26v436.277z"></path>
@@ -49,6 +53,11 @@
 </header>
 	<div class="clearfix mhl ptl">
 		<h1 class="mvm mtn fgc1">Grid Size: 18</h1>
+		<div class="glyph fs1">
+			<div class="clearfix pbs">
+				<svg class="icon icon-bubble"><use xlink:href="#icon-bubble"></use></svg><span class="mls"> icon-bubble</span>
+			</div>
+		</div>
 		<div class="glyph fs1">
 			<div class="clearfix pbs">
 				<svg class="icon icon-sound"><use xlink:href="#icon-sound"></use></svg><span class="mls"> icon-sound</span>

design/IcoMoon/svgdefs.svg

@@ -1,5 +1,9 @@
 <svg display="none" width="0" height="0" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 <defs>
+<symbol id="icon-bubble" viewBox="0 0 1024 1024">
+	<title>bubble</title>
+	<path class="path1" d="M512.889 170.667c156.334 0 283.556 127.596 283.556 284.444s-127.221 284.444-282.722 284.459l-3.388-0.208c-3.14-0.222-6.251-0.412-9.388-0.555l-19.111-0.791-208.473 62.485 35.778-141.227-29.388-42.51c-32.974-47.751-50.418-103.653-50.418-161.653 0-156.848 127.195-284.444 283.556-284.444zM512.889 56.889c-219.445 0-397.333 178.292-397.333 398.222 0 84.124 26.167 162.028 70.612 226.32l-72.389 285.68 382.416-114.626c5.584 0.236 11.056 0.848 16.695 0.848 219.445 0 397.333-178.292 397.333-398.222s-177.888-398.222-397.333-398.222v0z"></path>
+</symbol>
 <symbol id="icon-sound" viewBox="0 0 1024 1024">
 	<title>sound</title>
 	<path class="path1" d="M581.056 113.778c-6.332 0-12.779 1.819-19.001 5.764l-230.277 159.847c-4.722 3.292-10.332 5.056-16.11 5.056h-202.112c-31.305 0-56.667 25.472-56.667 56.889v341.333c0 31.417 25.362 56.889 56.667 56.889h202.112c5.778 0 11.388 1.764 16.11 5.056l230.277 159.847c6.222 3.945 12.695 5.764 19.001 5.764 22.277 0 42.5-22.736 42.5-54v-688.43c0-31.278-20.222-54.014-42.5-54.014zM510.222 730.139l-135.78-94.265c-9.472-6.569-20.722-10.1-32.222-10.1h-143.666c-15.666 0-28.334-12.736-28.334-28.444v-170.667c0-15.708 12.667-28.444 28.334-28.444h143.668c11.5 0 22.75-3.527 32.222-10.098l135.778-94.26v436.277z"></path>

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=\"px-video-progress\" max=\"100\" value=\"0\"><span>0</span>% played</progress>");t.b("\n");t.b("\n" + i);t.b("	<div class=\"play-controls\">");t.b("\n" + i);t.b("		<button class=\"px-video-restart\" 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 class=\"px-video-rewind\" 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=\"px-seconds\">10</span> seconds</span>");t.b("\n" + i);t.b("		</button>");t.b("\n" + i);t.b("		<button class=\"px-video-play\" 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 class=\"px-video-pause\" 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 class=\"px-video-forward\" 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=\"px-seconds\">10</span> seconds</span>");t.b("\n" + i);t.b("		</button>");t.b("\n" + i);t.b("		<div class=\"px-video-time\">");t.b("\n" + i);t.b("			<span class=\"sr-only\">Time</span>");t.b("\n" + i);t.b("			<span class=\"px-video-duration\">00:00</span>");t.b("\n" + i);t.b("		</div>");t.b("\n" + i);t.b("	</div>");t.b("\n");t.b("\n" + i);t.b("	<div class=\"sound-controls\">");t.b("\n" + i);t.b("		<!--<div class=\"px-video-mute-btn-container\">-->");t.b("\n" + i);t.b("			<input class=\"px-video-mute inverted sr-only\" id=\"btnMute{id}\" type=\"checkbox\">");t.b("\n" + i);t.b("			<label id=\"labelMute{id}\" for=\"btnMute{id}\">");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" + i);t.b("		<!--</div>-->");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=\"px-video-volume\" type=\"range\" min=\"0\" max=\"10\" value=\"5\">");t.b("\n");t.b("\n" + i);t.b("		<!--<div class=\"px-video-captions-btn-container hide\">-->");t.b("\n" + i);t.b("			<input class=\"px-video-btnCaptions sr-only\" id=\"btnCaptions{id}\" type=\"checkbox\">");t.b("\n" + i);t.b("			<label for=\"btnCaptions{id}\">");t.b("\n" + i);t.b("				<svg><use xlink:href=\"#icon-film\"></use></svg>");t.b("\n" + i);t.b("				<span class=\"sr-only\">Captions</span>");t.b("\n" + i);t.b("			</label>");t.b("\n" + i);t.b("		<!--</div>-->");t.b("\n");t.b("\n" + i);t.b("		<button class=\"player-toggle-fullscreen\" data-player=\"toggle-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("	</div>");t.b("\n" + i);t.b("</div>");t.b("\n");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("	<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");t.b("\n" + i);t.b("	<div class=\"player-controls-playback\">");t.b("\n" + i);t.b("		<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 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 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 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 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("	</div>");t.b("\n");t.b("\n" + i);t.b("	<div 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 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("	</div>");t.b("\n" + i);t.b("</div>");t.b("\n");return t.fl(); },partials: {}, subs: {  }});

docs/index.html

@@ -17,9 +17,8 @@
 			<p>A simple HTML5 media player</p>
 		</header>
 
-		<div class="player" id="myvid">
+		<div class="player">
 			<div class="player-video">
-				<div class="px-video-captions"></div>
 				<video width="640" height="360" poster="../media/poster_PayPal_Austin2.jpg" controls>
 					<!-- video files -->
 					<source src="https://www.paypalobjects.com/webstatic/mktg/videos/PayPal_AustinSMB_baseline.mp4" type="video/mp4" />

gulpfile.js

@@ -132,8 +132,8 @@ gulp.task(taskNames.jsAll, function(){
 
 // Watch for file changes
 gulp.task("watch", function () {
-	gulp.watch(paths.watchtemplates, taskNames.jsAll);
-    gulp.watch(paths.watchjs, taskNames.jsAll);
+	//gulp.watch(paths.watchtemplates, [taskNames.jsAll]);
+    //gulp.watch(paths.watchjs, [taskNames.jsAll]);
     gulp.watch(paths.watchless, lessBuildTasks);
-    gulp.watch(paths.watchicons, taskNames.iconBuild);
+    gulp.watch(paths.watchicons, [taskNames.iconBuild]);
 });