From 8586b819d447c32a41b0eff8714239e47befc864 Mon Sep 17 00:00:00 2001 From: accraze Date: Sat, 12 Dec 2015 16:18:28 -0800 Subject: [PATCH 1/5] added brightness filter and settings popup gamma/brightness css filter has been added for videos. when a video plays a new settings control appears on the right hand side. this new popupcontains a range input that changes the video's brightness. --- index.css | 53 ++++++++++++++++++++++++++++++++++++++++++++++++++++- index.html | 10 ++++++++++ index.js | 44 ++++++++++++++++++++++++++++++++++++++++++-- 3 files changed, 104 insertions(+), 3 deletions(-) diff --git a/index.css b/index.css index f881f3b..bb046a1 100644 --- a/index.css +++ b/index.css @@ -40,7 +40,8 @@ body, html { background-size: 100%; background-position: -50%; background-repeat: no-repeat; - -webkit-filter: grayscale(100%); + /*-webkit-filter: grayscale(100%);*/ + /*-webkit-filter: blur(13px);*/ } #overlay { @@ -77,6 +78,10 @@ body, html { display: none; } +#popup.chromecast #settings-popup { + display: none; +} + #popup.playlist #playlist-popup { display: block; } @@ -85,6 +90,22 @@ body, html { display: none; } +#popup.playlist #settings-popup { + display: none; +} + +#popup.settings #settings-popup { + display: block; +} + +#popup.settings #chromecast-popup { + display: none; +} + +#popup.settings #playlist-popup { + display: none; +} + #playlist-entries, #chromecast-entries { position: absolute; top: 46px; @@ -103,6 +124,15 @@ body, html { white-space: nowrap; } +/*.brightness { + color: #fff; + font-size: 13px; + padding: 10px 15px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +}*/ + @-webkit-keyframes spin { to { -webkit-transform: rotate(360deg); } } @@ -277,10 +307,15 @@ body:hover #overlay, body:hover .titlebar { #controls-play span:hover .mega-octicon, #player-downloadspeed span:hover .mega-octicon, #controls-fullscreen span:hover .mega-octicon, #controls-playlist span:hover .mega-octicon, +#controls-settings span:hover .mega-octicon, #controls-chromecast span:hover .mega-octicon { color: #31A357; } +#controls-settings span:hover .mega-octicon { + color: #31A357; +} + #controls-chromecast .chromecast { background-image: url('chromecast.png'); background-size: 26px 72px; @@ -368,3 +403,19 @@ body:hover #overlay, body:hover .titlebar { float: left; margin-left: 20px; } + +#controls-settings { + float: right; + /*margin-left: 10px;*/ + margin-right:10px; + /*margin-top: -10px;*/ + /*margin-bottom: 50px;*/ + /*padding-top: 20px;*/ +} + +.brightness { + margin-top: 20px; + margin-left: 10px; + +} + diff --git a/index.html b/index.html index 7cab713..b027587 100644 --- a/index.html +++ b/index.html @@ -21,6 +21,13 @@
Chromecasts
+
+
Settings
+ + +
@@ -42,6 +49,9 @@ ‒‒:‒‒
+
+ +
diff --git a/index.js b/index.js index c359540..ea0d24e 100644 --- a/index.js +++ b/index.js @@ -28,6 +28,28 @@ var argv = minimist(JSON.parse(window.location.toString().split('#')[1]), { boolean: ['follow'] }) + +var FILTER_VALS = {}; +var el = document.querySelector('video'); + +var set = function (filter, value) { + FILTER_VALS[filter] = typeof value == 'number' ? Math.round(value * 10) / 10 : value; + if (value == 0 || (typeof value == 'string' && value.indexOf('0') == 0)) { + delete FILTER_VALS[filter]; + } + render(); +} + +var render = function () { + var vals = []; + Object.keys(FILTER_VALS).sort().forEach(function(key, i) { + vals.push(key + '(' + FILTER_VALS[key] + ')'); + }); + var val = vals.join(' '); + el.style.webkitFilter = val; + document.querySelector('output').textContent = '-webkit-filter: ' + (val ? val : 'none') + ';'; +} + var printError = function (err) { if (err) console.log(err) } @@ -227,6 +249,7 @@ $(document).on('keydown', function (e) { if ($('#controls-playlist').hasClass('selected')) $('#controls-playlist').trigger('click') if ($('#controls-chromecast').hasClass('selected')) $('#controls-chromecast').trigger('click') + if ($('#controls-settings').hasClass('selected')) $('#controls-settings').trigger('click') }) mouseidle($('#idle')[0], 3000, 'hide-cursor') @@ -285,14 +308,15 @@ list.once('update', function () { }) var popupSelected = function () { - return $('#controls-playlist').hasClass('selected') || $('#controls-chromecast').hasClass('selected') + return $('#controls-playlist').hasClass('selected') || $('#controls-chromecast').hasClass('selected') || $('#controls-settings').hasClass('selected') } var closePopup = function (e) { - if (e && (e.target === $('#controls-playlist .mega-octicon')[0] || e.target === $('#controls-chromecast .chromecast')[0])) return + if (e && (e.target === $('#controls-playlist .mega-octicon')[0] || e.target === $('#controls-chromecast .chromecast')[0] || e.target === $('#controls-settings .mega-octicon')[0])) return $('#popup')[0].style.opacity = 0 $('#controls-playlist').removeClass('selected') $('#controls-chromecast').removeClass('selected') + $('#controls-settings').removeClass('selected') } $('#controls').on('click', closePopup) @@ -327,6 +351,19 @@ var updatePopup = function () { } } +$('#controls-settings').on('click', function (e) { + if ($('#controls-settings').hasClass('selected')) { + closePopup() + return + } + + $('#popup')[0].className = 'settings' + $('#controls .controls-main .selected').removeClass('selected') + $('#controls-settings').addClass('selected') + chromecasts.update() + updatePopup() +}) + $('#controls-chromecast').on('click', function (e) { if ($('#controls-chromecast').hasClass('selected')) { closePopup() @@ -639,3 +676,6 @@ $('#controls-volume-slider')[0].setAttribute("value", 0.5) $('#controls-volume-slider')[0].setAttribute("min", 0) $('#controls-volume-slider')[0].setAttribute("max", 1) $('#controls-volume-slider')[0].setAttribute("step", 0.05) + +var debugMenu = require('debug-menu'); +debugMenu.install(); // activate context menu From 4bc62d604b1bed5423b4cfef4457dbf67a47d628 Mon Sep 17 00:00:00 2001 From: accraze Date: Sat, 12 Dec 2015 16:48:37 -0800 Subject: [PATCH 2/5] fixed styling for settings control --- index.css | 14 ++++---------- index.html | 2 +- 2 files changed, 5 insertions(+), 11 deletions(-) diff --git a/index.css b/index.css index bb046a1..55fb3c9 100644 --- a/index.css +++ b/index.css @@ -307,14 +307,10 @@ body:hover #overlay, body:hover .titlebar { #controls-play span:hover .mega-octicon, #player-downloadspeed span:hover .mega-octicon, #controls-fullscreen span:hover .mega-octicon, #controls-playlist span:hover .mega-octicon, -#controls-settings span:hover .mega-octicon, -#controls-chromecast span:hover .mega-octicon { +#controls-chromecast span:hover .mega-octicon, #controls-settings span:hover .mega-octicon { color: #31A357; } -#controls-settings span:hover .mega-octicon { - color: #31A357; -} #controls-chromecast .chromecast { background-image: url('chromecast.png'); @@ -404,13 +400,11 @@ body:hover #overlay, body:hover .titlebar { margin-left: 20px; } + #controls-settings { float: right; - /*margin-left: 10px;*/ - margin-right:10px; - /*margin-top: -10px;*/ - /*margin-bottom: 50px;*/ - /*padding-top: 20px;*/ + margin-right: 10px; + margin-top: 10px !important; } .brightness { diff --git a/index.html b/index.html index b027587..d167c17 100644 --- a/index.html +++ b/index.html @@ -50,7 +50,7 @@
- +
From 5b0b198f39598ff5f6ed94d113bfe91e1e815cd9 Mon Sep 17 00:00:00 2001 From: accraze Date: Sat, 12 Dec 2015 17:00:14 -0800 Subject: [PATCH 3/5] remove debug menu --- index.js | 3 --- 1 file changed, 3 deletions(-) diff --git a/index.js b/index.js index ea0d24e..78af12c 100644 --- a/index.js +++ b/index.js @@ -676,6 +676,3 @@ $('#controls-volume-slider')[0].setAttribute("value", 0.5) $('#controls-volume-slider')[0].setAttribute("min", 0) $('#controls-volume-slider')[0].setAttribute("max", 1) $('#controls-volume-slider')[0].setAttribute("step", 0.05) - -var debugMenu = require('debug-menu'); -debugMenu.install(); // activate context menu From 43d375b63b3b9f5b7f14f4aaff126746ae867695 Mon Sep 17 00:00:00 2001 From: accraze Date: Wed, 16 Dec 2015 22:13:35 -0800 Subject: [PATCH 4/5] resized brightness label --- index.css | 4 ++++ index.js | 3 +++ 2 files changed, 7 insertions(+) diff --git a/index.css b/index.css index 55fb3c9..dd21c87 100644 --- a/index.css +++ b/index.css @@ -413,3 +413,7 @@ body:hover #overlay, body:hover .titlebar { } +#settings-popup span label { + font-size: 15px; +} + diff --git a/index.js b/index.js index 78af12c..0e553ca 100644 --- a/index.js +++ b/index.js @@ -676,3 +676,6 @@ $('#controls-volume-slider')[0].setAttribute("value", 0.5) $('#controls-volume-slider')[0].setAttribute("min", 0) $('#controls-volume-slider')[0].setAttribute("max", 1) $('#controls-volume-slider')[0].setAttribute("step", 0.05) + +var debugMenu = require('debug-menu'); +debugMenu.install(); From cc26032b8f60e1c5ed59de9ec950a34cb7be8eda Mon Sep 17 00:00:00 2001 From: accraze Date: Sun, 27 Dec 2015 13:08:56 -0800 Subject: [PATCH 5/5] added correct slider style to brightness filter --- index.css | 24 ++++++++++++++++++++++++ index.html | 5 +++-- index.js | 27 +++++++++++++++++++++++---- 3 files changed, 50 insertions(+), 6 deletions(-) diff --git a/index.css b/index.css index dd21c87..016d3a2 100644 --- a/index.css +++ b/index.css @@ -413,6 +413,30 @@ body:hover #overlay, body:hover .titlebar { } +#controls-brightness-slider { + -webkit-appearance: none; + background: #727374; + width: 50px; + height: 4px; + border-radius: 0px; + float: right; + margin-top: 12px; + margin-left: 5px; +} + +#controls-brightness-slider::-webkit-slider-thumb { + -webkit-appearance: none; + background-color: #31A357; + opacity: 1.0; + width: 9px; + height: 9px; + border-radius: 4.5px; +} + +#controls-brightness-slider:focus { + outline: none; +} + #settings-popup span label { font-size: 15px; } diff --git a/index.html b/index.html index d167c17..6416eb0 100644 --- a/index.html +++ b/index.html @@ -24,8 +24,9 @@
Settings
-
diff --git a/index.js b/index.js index 0e553ca..0a02489 100644 --- a/index.js +++ b/index.js @@ -47,7 +47,6 @@ var render = function () { }); var val = vals.join(' '); el.style.webkitFilter = val; - document.querySelector('output').textContent = '-webkit-filter: ' + (val ? val : 'none') + ';'; } var printError = function (err) { @@ -212,6 +211,7 @@ $('#controls-timeline').on('mouseout', function (e) { }) var isVolumeSliderClicked = false +var isBrightnessSliderClicked = false function updateAudioVolume(value) { media.volume(value) @@ -241,6 +241,28 @@ $('#controls-volume-slider').on('mouseup', function (e) { isVolumeSliderClicked = false }) +function updateBrightnessSlider(brightness) { + var val = brightness.value * 10; + brightness.style.background = '-webkit-gradient(linear, left top, right top, color-stop(' + val.toString() + '%, #31A357), color-stop(' + val.toString() + '%, #727374))' +} + +$('#controls-brightness-slider').on('mousemove', function (e) { + if (isBrightnessSliderClicked) { + var brightness = $('#controls-brightness-slider')[0] + updateBrightnessSlider(brightness) + } +}) + +$('#controls-brightness-slider').on('mousedown', function (e) { + isBrightnessSliderClicked = true +}) + +$('#controls-brightness-slider').on('mouseup', function (e) { + var brightness = $('#controls-brightness-slider')[0] + updateBrightnessSlider(brightness) + isBrightnessSliderClicked = false +}) + $(document).on('keydown', function (e) { if (e.keyCode === 27 && isFullscreen) return onfullscreentoggle(e) if (e.keyCode === 13 && e.metaKey) return onfullscreentoggle(e) @@ -676,6 +698,3 @@ $('#controls-volume-slider')[0].setAttribute("value", 0.5) $('#controls-volume-slider')[0].setAttribute("min", 0) $('#controls-volume-slider')[0].setAttribute("max", 1) $('#controls-volume-slider')[0].setAttribute("step", 0.05) - -var debugMenu = require('debug-menu'); -debugMenu.install();