abhisheksliam · abhisheksliam · Jul 18, 2017 · Jul 18, 2017 · Jul 18, 2017
diff --git a/src/index.html b/src/index.html
@@ -4,21 +4,24 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
     <title></title>
-    <meta name="description" content="">
+    <meta name="description" content="Hls Js Custom Controls">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="css/style.css">
 </head>
 
 <body>
     <!--video player-->
     <div id="player">
-        <video id="video" data-src="https://video-dev.github.io/streams/x36xhzz/x36xhzz.m3u8"></video>
+        <video id="video" data-src="https://video-dev.github.io/streams/x36xhzz/x36xhzz.m3u8" poster="data:image/gif,AAAA"></video>
         <!--player controls-->
         <div id="video-controls" class="controls display-control">
             <button id="playpause" type="button" data-state="play">Play/Pause</button>
 
             <button id="mute" type="button" data-state="mute">Mute/Unmute</button>
-            <select id="quality" class="quality btn-settings">Quality</select>
+            <div class="dropdown">
+              <button id="quality-btn" class="dropbtn btn-settings"></button>
+              <div id="quality" class="dropdown-content"></div>
+            </div>
 
             <div class="progress">
                 <progress id="progress" value="0" min="0">
@@ -34,4 +37,4 @@
     <script src="js/main.js"></script>
 </body>
 
-</html>
+</html>
diff --git a/src/js/custom.controls.js b/src/js/custom.controls.js
@@ -84,26 +84,60 @@
 
 	function initVideoQualityOptions(hls) {
 
+		var qualityBtn = document.getElementById('quality-btn');
 		var quality = document.getElementById('quality');
 
-		// update current selection, because quality is auto by default
-		quality.addEventListener('focus', function (event) {
-			this.selectedIndex = hls.currentLevel;
-		});
-
-		// update selection on manual change
-		quality.addEventListener('change', function (event) {
-			var q_level = parseInt(this.value);
-			hls.currentLevel = q_level;
+		qualityBtn.addEventListener('click', function (event) {
+			makeActive();
+			quality.classList.toggle("show");
 		});
 
 		//Create and append the options
 		var qualities = hls.levels;
 		for (var i = 0; i < qualities.length; i++) {
-			var option = document.createElement("option");
-			option.value = i;
-			option.text = qualities[i].name + ' p';
-			quality.appendChild(option);
+			var q = document.createElement("a");
+			q.setAttribute("data-value", i);
+			q.setAttribute("class", "quality");
+			q.text = qualities[i].name + 'p';
+			quality.appendChild(q);
 		}
+
+		// update dropdown selection
+		var elems = document.querySelectorAll('#quality a');
+
+		function makeActive(UserSelectionEvent) {
+		    for (var i = 0; i < elems.length; i++)
+				{
+					if(!UserSelectionEvent && i == hls.currentLevel) {
+						elems[i].classList.add('active');
+					} else{
+						elems[i].classList.remove('active');
+					}
+				}
+				if(UserSelectionEvent){
+					var q_level = parseInt(this.getAttribute('data-value'));
+					hls.currentLevel = q_level;
+					this.classList.add('active');
+				}
+		};
+
+		for (var i = 0; i < elems.length; i++)
+		    elems[i].addEventListener('mousedown', makeActive);
+
+		// hide dd if click elsewhere
+		window.onclick = function(event) {
+			if (!event.target.matches('.dropbtn')) {
+
+				var dropdowns = document.getElementsByClassName("dropdown-content");
+				var i;
+				for (i = 0; i < dropdowns.length; i++) {
+					var openDropdown = dropdowns[i];
+					if (openDropdown.classList.contains('show')) {
+						openDropdown.classList.remove('show');
+					}
+				}
+			}
+		};
+
 	};
 })();
diff --git a/src/less/page.less b/src/less/page.less
@@ -9,11 +9,12 @@ html {
 		width: 100%;
 	}
 }
+
 body {
 	position: relative;
 	margin: 0;
 	padding: 0;
-  	
+
 	width: 100%;
 	height: 100%;
 

diff --git a/src/less/player.less b/src/less/player.less
@@ -8,8 +8,11 @@
 
 @small-screen-below: 568px;
 
-// icons / backgrounds
+@font-size-large: 10px;
+@font-size-small: 6px;
+
 
+// icons / backgrounds
 	@pause-icon: 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4nICAnaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkJz48c3ZnIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDgwMCA4MDAiIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDgwMCA4MDAiIHhtbDpzcGFjZT0icHJlc2VydmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxnIGlkPSJMYXllcl8xIj48cGF0aCBkPSJNNzcxLjksNDAwYzAsMjA1LjMtMTY2LjYsMzcxLjktMzcxLjksMzcxLjlTMjguMSw2MDUuMywyOC4xLDQwMFMxOTQuNywyOC4xLDQwMCwyOC4xICAgUzc3MS45LDE5NC43LDc3MS45LDQwMHoiIGZpbGw9IiM0REI2QUMiLz48L2c+PGcgaWQ9IkxheWVyXzIiPjxnPjxsaW5lIGZpbGw9Im5vbmUiIHN0cm9rZT0iI0ZGRkZGRiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHN0cm9rZS13aWR0aD0iMTYiIHgxPSIzMjMuMyIgeDI9IjMyMy4zIiB5MT0iMjM1LjkiIHkyPSI1NjQuMSIvPjxsaW5lIGZpbGw9Im5vbmUiIHN0cm9rZT0iI0ZGRkZGRiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHN0cm9rZS13aWR0aD0iMTYiIHgxPSIzMjMuMyIgeDI9IjU1MC40IiB5MT0iMjM1LjkiIHkyPSI0MDAiLz48bGluZSBmaWxsPSJub25lIiBzdHJva2U9IiNGRkZGRkYiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBzdHJva2Utd2lkdGg9IjE2IiB4MT0iNTUwLjQiIHgyPSIzMjMuMyIgeTE9IjQwMCIgeTI9IjU2NC4xIi8+PC9nPjwvZz48L3N2Zz4=';
 	@play-icon: 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4nICAnaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkJz48c3ZnIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDUxMiA1MTIiIGlkPSJMYXllcl8xIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiB4bWw6c3BhY2U9InByZXNlcnZlIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48bGluZWFyR3JhZGllbnQgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIGlkPSJTVkdJRF8xXyIgeDE9IjI1NiIgeDI9IjI1NiIgeTE9IjUxMiIgeTI9Ii05LjA5NDk0N2UtMDEzIj48c3RvcCBvZmZzZXQ9IjAiIHN0eWxlPSJzdG9wLWNvbG9yOiNGODU3QTYiLz48c3RvcCBvZmZzZXQ9IjEiIHN0eWxlPSJzdG9wLWNvbG9yOiNGRjU4NTgiLz48L2xpbmVhckdyYWRpZW50PjxjaXJjbGUgY3g9IjI1NiIgY3k9IjI1NiIgZmlsbD0idXJsKCNTVkdJRF8xXykiIHI9IjI1NiIvPjxnPjxwYXRoIGQ9Ik0yMTMuMiwxMjloLTU5LjFjLTkuMiwwLTE2LjYsNy41LTE2LjYsMTYuNnYyMjAuN2MwLDkuMiw3LjUsMTYuNiwxNi42LDE2LjZoNTkuMWM5LjIsMCwxNi42LTcuNSwxNi42LTE2LjYgICBWMTQ1LjdDMjI5LjksMTM2LjUsMjIyLjQsMTI5LDIxMy4yLDEyOXogTTIxNy40LDM2Ni4zYzAsMi4zLTEuOSw0LjItNC4yLDQuMmgtNTkuMWMtMi4zLDAtNC4yLTEuOS00LjItNC4yVjE0NS43ICAgYzAtMi4zLDEuOS00LjIsNC4yLTQuMmg1OS4xYzIuMywwLDQuMiwxLjksNC4yLDQuMlYzNjYuM3oiIGZpbGw9IiNGRkZGRkYiLz48cGF0aCBkPSJNMzU3LjgsMTI5aC01OS4xYy05LjIsMC0xNi42LDcuNS0xNi42LDE2LjZ2MjIwLjdjMCw5LjIsNy41LDE2LjYsMTYuNiwxNi42aDU5LjFjOS4yLDAsMTYuNi03LjUsMTYuNi0xNi42ICAgVjE0NS43QzM3NC41LDEzNi41LDM2NywxMjksMzU3LjgsMTI5eiBNMzYyLDM2Ni4zYzAsMi4zLTEuOSw0LjItNC4yLDQuMmgtNTkuMWMtMi4zLDAtNC4yLTEuOS00LjItNC4yVjE0NS43ICAgYzAtMi4zLDEuOS00LjIsNC4yLTQuMmg1OS4xYzIuMywwLDQuMiwxLjksNC4yLDQuMlYzNjYuM3oiIGZpbGw9IiNGRkZGRkYiLz48L2c+PC9zdmc+';
 	@volume-icon: 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgaWQ9IkxheWVyXzEiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDEyOCAxMjg7IiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAxMjggMTI4IiB4bWw6c3BhY2U9InByZXNlcnZlIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48c3R5bGUgdHlwZT0idGV4dC9jc3MiPgoJLnN0MHtmaWxsOiNGRkZGRkY7fQo8L3N0eWxlPjxnPjxjaXJjbGUgY3g9IjY0IiBjeT0iNjQiIHI9IjY0Ii8+PC9nPjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik02MC41LDM4TDM4LDUySDI4Yy0yLjIsMC00LDEuOC00LDR2MTZjMCwyLjIsMS44LDQsNCw0aDEwbDIyLjUsMTRjMC42LDAuNSwxLjUsMCwxLjUtMC44VjM4LjggIEM2MiwzOC4xLDYxLjIsMzcuNiw2MC41LDM4eiIvPjxnPjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik04Ny43LDk2LjhsLTEuMy0xLjVjLTAuNC0wLjQtMC4zLTEsMC4xLTEuNEM5NS4xLDg2LjMsMTAwLDc1LjUsMTAwLDY0YzAtMTEuOC01LjEtMjIuOS0xNC4xLTMwLjUgICBjLTAuMi0wLjEtMC41LTAuNC0wLjktMC43cy0wLjUtMC45LTAuMi0xLjNsMS4xLTEuN2MwLjMtMC41LDEtMC42LDEuNC0wLjJjMC41LDAuNCwxLDAuOCwxLDAuOEM5OC4zLDM4LjgsMTA0LDUxLDEwNCw2NCAgIGMwLDEyLjYtNS40LDI0LjYtMTQuOCwzM0M4OC43LDk3LjMsODguMSw5Ny4zLDg3LjcsOTYuOHoiLz48L2c+PGc+PHBhdGggY2xhc3M9InN0MCIgZD0iTTc5LjEsODguM2wtMS4yLTEuNmMtMC4zLTAuNC0wLjMtMSwwLjItMS40Qzg0LjQsODAsODgsNzIuMyw4OCw2NHMtMy42LTE2LTEwLTIxLjNjLTAuNC0wLjMtMC41LTEtMC4yLTEuNCAgIGwxLjItMS42YzAuMy0wLjQsMS0wLjUsMS40LTAuMkM4Ny44LDQ1LjcsOTIsNTQuNSw5Miw2NHMtNC4yLDE4LjMtMTEuNSwyNC40QzgwLjEsODguOCw3OS41LDg4LjcsNzkuMSw4OC4zeiIvPjwvZz48Zz48cGF0aCBjbGFzcz0ic3QwIiBkPSJNNjkuNiw3OC4yYy0wLjQtMC40LTAuMy0xLjEsMC4xLTEuNGM0LTMuMSw2LjMtNy44LDYuMy0xMi43YzAtNS4xLTIuMy05LjgtNi4zLTEyLjdjLTAuNC0wLjMtMC41LTEtMC4yLTEuNCAgIGwxLjMtMS41YzAuMy0wLjQsMC45LTAuNSwxLjQtMC4yQzc3LjEsNTEuOCw4MCw1Ny43LDgwLDY0YzAsNi4xLTIuOSwxMS45LTcuNywxNS44Yy0wLjQsMC4zLTEsMC4zLTEuNC0wLjFMNjkuNiw3OC4yeiIvPjwvZz48L3N2Zz4=';
@@ -27,6 +30,18 @@ video {
     position: relative;
     width: 100%;
     float: left;
+
+		background:repeating-linear-gradient(
+							  to right,
+							  #f6ba52,
+							  #f6ba52 10px,
+							  #ffd180 10px,
+							  #ffd180 20px
+							);
+		-webkit-background-size:cover;
+		-moz-background-size:cover;
+		-o-background-size:cover;
+		background-size:cover;
 }
 
 .controls {
@@ -41,7 +56,7 @@ video {
 	z-index: 999;
 	float: left;
 
-	button, select{
+	button, .dropbtn{
 		text-align: center;
 		overflow: hidden;
 		white-space: nowrap;
@@ -56,10 +71,14 @@ video {
 		-moz-appearance: none;
 
 		&:focus {
-            outline: none;
+      outline: none;
 		}
 	}
 
+	button::-moz-focus-inner {
+	  border: 0;
+	}
+
 	button[data-state="play"], button[data-state="pause"] {
 		.button-size-responsive(@large-button-playpause, @small-button-playpause);
 		position:absolute;
@@ -73,29 +92,49 @@ video {
 	button[data-state="mute"], button[data-state="unmute"] {
 		.button-size-responsive();
 		.button-side-relative(2.5);
-	
+
 		position:absolute;
 		&:hover {
 			.scale-button(1.5);
 		}
 	}
 
-	.quality {
-		position:absolute;
+	// settings dropdown butto
+	.dropbtn {
 		.button-size-responsive();
-		.button-side-relative();
-		.select-options-responsive();
+		position:absolute;
 		&:hover {
-			option {
-				display: block;
-			}
 			.scale-button(1.5);
 		}
-		option {
-			display: none;
+	}
+
+	.dropdown {
+		position: absolute;
+		display: inline-block;
+		.button-side-relative();
+	}
+
+	.dropdown-content {
+		display: none;
+		position: absolute;
+		background-color: black;
+		overflow: auto;
+		z-index: 1;
+		.dropdown-content-responsive();
+
+		a {
+			color:white;
+			padding: 0.8em 1em;
+			text-decoration: none;
+			display: block;
+			cursor: pointer;
+
+			&:hover {background-color: #f1f1f1; color:black;}
 		}
 	}
 
+.show {display:block;}
+
 	// video progress
 	.progress {
 		margin: 0;
@@ -134,10 +173,12 @@ video {
 	background:transparent;
 }
 
+.show {display:block;}
+
+.active {background: green;}
 
 // mixin to scale / size buttons
 .scale-button (@scale: 1) {
-
 	// scale only above @small-screen-below
 	@media only screen and (min-width : @small-screen-below) {
 			-webkit-transition: all 200ms ease-in;
@@ -173,13 +214,14 @@ video {
 	}
 }
 
+.dropdown-content-responsive(){
+    right: -(@large-button-common*0.8);
+    font-size: (@font-size-large);
+    top: (@large-button-common*0.5);
 
-.select-options-responsive(@size-big: 16px, @size-small: 10px) {
-	font-size: @size-big;
-	padding: (0.2*@size-big);
 	@media (max-width : @small-screen-below) {
-	font-size: @size-small;
-	padding: (0.2*@size-small);
+		right: -(@small-button-common*0.8);
+		font-size: (@font-size-small);
+		top: (@small-button-common*0.5);
 	}
 }
-