From 821fc1614c52f0739d6e1dab339c7973380b9b00 Mon Sep 17 00:00:00 2001 From: Abhishek Kumar Date: Tue, 18 Jul 2017 19:36:16 +0530 Subject: [PATCH 1/3] temp quality update --- src/index.html | 26 +++++++++++++++++- src/js/custom.controls.js | 21 +++++++++------ src/less/player.less | 57 ++++++++++++++++++++++++++++----------- 3 files changed, 80 insertions(+), 24 deletions(-) diff --git a/src/index.html b/src/index.html index b813004..32a41af 100644 --- a/src/index.html +++ b/src/index.html @@ -18,7 +18,12 @@ - + +
+ +
+
+
@@ -32,6 +37,25 @@ + \ No newline at end of file diff --git a/src/js/custom.controls.js b/src/js/custom.controls.js index 50f78d6..904f89f 100644 --- a/src/js/custom.controls.js +++ b/src/js/custom.controls.js @@ -84,15 +84,18 @@ 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; - }); + // quality.addEventListener('focus', function (event) { + // this.selectedIndex = hls.currentLevel; + // }); + + //todo: update current selection // update selection on manual change - quality.addEventListener('change', function (event) { + qualityBtn.addEventListener('click', function (event) { var q_level = parseInt(this.value); hls.currentLevel = q_level; }); @@ -100,10 +103,12 @@ //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.value = i; + q.setAttribute("data-value", i); + q.setAttribute("class", "quality"); + q.text = qualities[i].name + 'p'; + quality.appendChild(q); } }; })(); diff --git a/src/less/player.less b/src/less/player.less index 4f23a18..cbb7f1c 100644 --- a/src/less/player.less +++ b/src/less/player.less @@ -8,6 +8,10 @@ @small-screen-below: 568px; +@font-size-large: 10px; +@font-size-small: 6px; + + // icons / backgrounds @pause-icon: 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4nICAnaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkJz48c3ZnIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDgwMCA4MDAiIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDgwMCA4MDAiIHhtbDpzcGFjZT0icHJlc2VydmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxnIGlkPSJMYXllcl8xIj48cGF0aCBkPSJNNzcxLjksNDAwYzAsMjA1LjMtMTY2LjYsMzcxLjktMzcxLjksMzcxLjlTMjguMSw2MDUuMywyOC4xLDQwMFMxOTQuNywyOC4xLDQwMCwyOC4xICAgUzc3MS45LDE5NC43LDc3MS45LDQwMHoiIGZpbGw9IiM0REI2QUMiLz48L2c+PGcgaWQ9IkxheWVyXzIiPjxnPjxsaW5lIGZpbGw9Im5vbmUiIHN0cm9rZT0iI0ZGRkZGRiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHN0cm9rZS13aWR0aD0iMTYiIHgxPSIzMjMuMyIgeDI9IjMyMy4zIiB5MT0iMjM1LjkiIHkyPSI1NjQuMSIvPjxsaW5lIGZpbGw9Im5vbmUiIHN0cm9rZT0iI0ZGRkZGRiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHN0cm9rZS13aWR0aD0iMTYiIHgxPSIzMjMuMyIgeDI9IjU1MC40IiB5MT0iMjM1LjkiIHkyPSI0MDAiLz48bGluZSBmaWxsPSJub25lIiBzdHJva2U9IiNGRkZGRkYiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBzdHJva2Utd2lkdGg9IjE2IiB4MT0iNTUwLjQiIHgyPSIzMjMuMyIgeTE9IjQwMCIgeTI9IjU2NC4xIi8+PC9nPjwvZz48L3N2Zz4='; @@ -41,7 +45,7 @@ video { z-index: 999; float: left; - button, select{ + button, .dropbtn{ text-align: center; overflow: hidden; white-space: nowrap; @@ -80,22 +84,42 @@ video { } } - .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; @@ -173,13 +197,16 @@ 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); } } +.show {display:block;} \ No newline at end of file From 15f3660d9d299678fa6d7149ed92ece5e4357361 Mon Sep 17 00:00:00 2001 From: abhisheksliam Date: Tue, 18 Jul 2017 23:06:45 +0530 Subject: [PATCH 2/3] quality dd update --- src/index.html | 23 ++---------------- src/js/custom.controls.js | 51 ++++++++++++++++++++++++++++++--------- src/less/player.less | 8 +++--- 3 files changed, 46 insertions(+), 36 deletions(-) diff --git a/src/index.html b/src/index.html index 32a41af..3e02444 100644 --- a/src/index.html +++ b/src/index.html @@ -20,7 +20,7 @@
- +
@@ -37,25 +37,6 @@ - - \ No newline at end of file + diff --git a/src/js/custom.controls.js b/src/js/custom.controls.js index 904f89f..e7c1790 100644 --- a/src/js/custom.controls.js +++ b/src/js/custom.controls.js @@ -87,28 +87,57 @@ 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; - // }); - - //todo: update current selection - - // update selection on manual change qualityBtn.addEventListener('click', function (event) { - var q_level = parseInt(this.value); - hls.currentLevel = q_level; + makeActive(); + quality.classList.toggle("show"); }); //Create and append the options var qualities = hls.levels; for (var i = 0; i < qualities.length; i++) { var q = document.createElement("a"); - // q.value = i; 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/player.less b/src/less/player.less index cbb7f1c..cd2a493 100644 --- a/src/less/player.less +++ b/src/less/player.less @@ -77,7 +77,7 @@ video { button[data-state="mute"], button[data-state="unmute"] { .button-size-responsive(); .button-side-relative(2.5); - + position:absolute; &:hover { .scale-button(1.5); @@ -158,10 +158,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; @@ -208,5 +210,3 @@ video { top: (@small-button-common*0.5); } } - -.show {display:block;} \ No newline at end of file From 8451a413674f8661dd4c5f6e5e2a99152e34dfba Mon Sep 17 00:00:00 2001 From: abhisheksliam Date: Tue, 18 Jul 2017 23:45:07 +0530 Subject: [PATCH 3/3] update for quality change control --- src/index.html | 10 ++++------ src/less/page.less | 3 ++- src/less/player.less | 19 +++++++++++++++++-- 3 files changed, 23 insertions(+), 9 deletions(-) diff --git a/src/index.html b/src/index.html index 3e02444..c052e66 100644 --- a/src/index.html +++ b/src/index.html @@ -4,7 +4,7 @@ - + @@ -12,17 +12,15 @@
- +
-
- -
-
+ +
diff --git a/src/less/page.less b/src/less/page.less index 5a310f9..ded5fde 100644 --- 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 index cd2a493..97b530a 100644 --- a/src/less/player.less +++ b/src/less/player.less @@ -13,7 +13,6 @@ // 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='; @@ -31,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 { @@ -60,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;