// ==UserScript==
// @name Kant C Shit
// @namespace kantcshit
// @version 0.1
// @description Adjust brightness and contrast in YouTube Videos, Vimeo, Netflix, HBO, Prime video, or any other site with a video on it
// @author Adriano Galello
// @homepage https://gdi3d.github.io/change-youtube-videos-brightness/
// @match *://www.youtube.com/watch*
// @icon https://www.google.com/s2/favicons?domain=youtube.com
// @compatible chrome
// @compatible firefox
// @compatible opera
// @compatible safari
// @license MIT
// @downloadURL none
// ==/UserScript==
(function() {
'use strict';
// panel with controls for Brightness, Contrast
// Saturation and Hue using CSS filter property
// https://developer.mozilla.org/en-US/docs/Web/CSS/filter
let html = "
"
// search for video tag inside the html
if(document.getElementsByTagName("video").length == 0) {
alert("Oh no!, couldn't detect video in this page.\r\nIf you think this is an error open a ticket at https://github.com/gdi3d/change-youtube-videos-brightness/issues/new");
throw new Error("No video tag detected!. WTF!!??!")
} else if (document.getElementsByTagName("video").length > 1) {
alert("Mmm, we detected more than one video in this page. I don't know what to do!. If you think this is an error open a ticket at https://github.com/gdi3d/change-youtube-videos-brightness/issues/new");
throw new Error("More than one video tag detected -.-")
}
// create kantcshit panel container
let kantcshit_container = document.createElement("div");
kantcshit_container.id = 'container_kantcshit';
kantcshit_container.innerHTML = html;
document.body.appendChild(kantcshit_container);
// prefix for the controlers
// st_slider, hue_slider, etc...
const controls = ['st', 'hue', 'ct', 'br'];
let vp = document.getElementsByTagName("video")[0];
// set actions to sliders and reset buttons
for (let c of controls) {
let slider = document.getElementById(`${c}_slider`);
let val = document.getElementById(`${c}_val`);
val.innerHTML = slider.value; // Display the default slider value
// sliders value update
slider.oninput = function() {
val.innerHTML = this.value;
switch(c) {
case 'br':
let br_flt = vp.style.filter;
const br_reg = /brightness\(\d*\%\)/
br_flt = br_flt.replace(br_reg, '');
vp.style.filter = `${br_flt} brightness(${this.value}%)`;
break;
case 'st':
let st_flt = vp.style.filter;
const st_reg = /saturate\(\d*\%\)/
st_flt = st_flt.replace(st_reg, '');
vp.style.filter = `${st_flt} saturate(${this.value}%)`;
break;
case 'hue':
let hue_flt = vp.style.filter;
const hue_reg = /hue-rotate\(\d*deg\)/
hue_flt = hue_flt.replace(hue_reg, '');
vp.style.filter = `${hue_flt} hue-rotate(${this.value}deg)`;
break;
case 'ct':
let ct_flt = vp.style.filter;
const ct_reg = /contrast\(\d*\%\)/
ct_flt = ct_flt.replace(ct_reg, '');
vp.style.filter = `${ct_flt} contrast(${this.value}%)`;
break;
}
}
// reset buttons
let r_btn = document.getElementById(`${c}_reset`);
switch(c) {
case 'br':
r_btn.onclick = function(){
vp.style.filter = "brightness(100%)";
slider.value = 100;
slider.dispatchEvent(new Event('input'));
};
break;
case 'st':
r_btn.onclick = function(){
vp.style.filter = "saturate(100%)";
slider.value = 100;
slider.dispatchEvent(new Event('input'));
};
break;
case 'hue':
r_btn.onclick = function(){
vp.style.filter = "hue-rotate(0deg)";
slider.value = 0;
slider.dispatchEvent(new Event('input'));
};
break;
case 'ct':
r_btn.onclick = function(){
vp.style.filter = "contrast(100%)";
slider.value = 100;
slider.dispatchEvent(new Event('input'));
};
break;
}
}
// Close b.deo panel
let ckantcshit = document.getElementById('close_kantcshit');
ckantcshit.onclick = function() {
document.getElementById('panel_kantcshit').style.display = 'none';
}
// open b.deo panel
let okantcshit = document.getElementById('open_kantcshit');
okantcshit.onclick = function() {
document.getElementById('panel_kantcshit').style.display = 'block';
okantcshit.style.display = 'none';
}
// hover to display b.deo top right icon
// that allows the user to open the effect panel
vp.addEventListener('mouseenter', function(){
if(document.getElementById('panel_kantcshit').style.display == 'none') {
document.getElementById('open_kantcshit').style.display = 'block';
}
});
})();