Add video effects
// ==UserScript==
// @name TesterTV_YouTube_Effects
// @namespace https://greasyfork.org/ru/scripts/482237-testertv-youtube-effects
// @version 2023.12.16
// @description Add video effects
// @license GPL version 3 or any later version
// @author TesterTV
// @match https://www.youtube.com/*
// @match https://m.youtube.com/*
// @match https://music.youtube.com/*
// @grant GM_openInTab
// ==/UserScript==
//********************************************************************************************************************
//*** Start Video Effects Function ***
//********************************************************************************************************************
setInterval(function() {
if (window.location.href !== "https://www.youtube.com" && window.location.href !== "https://www.youtube.com/" && window.location.href !== "https://m.youtube.com/" && window.location.href !== "https://m.youtube.com" && window.location.href !== "https://music.youtube.com/" && window.location.href !== "https://music.youtube.com") {
// Check if the page contains an element with id "ButtonEffects"
if (!document.getElementById("ButtonEffects")) {
// If the element isn't found, start the effects script
YoutubeEffects();
}
}
}, 1000);
function YoutubeEffects() {
// Check if current window isn't an iframe
var isInIframe = window === window.top;
if (isInIframe) {
//********************************************************************************************************************
//*** Video Effects Button 🎞️🎛️ ***
//********************************************************************************************************************
//************************
//*** ButtonEffects 🎞️🎛️ ***
//************************
// Create a new button element
const ButtonEffects = document.createElement('button');
ButtonEffects.id = 'ButtonEffects';
ButtonEffects.style.position = 'relative';
ButtonEffects.textContent = '🎛️';
ButtonEffects.style.fontSize = '20px';
ButtonEffects.style.background = 'none';
ButtonEffects.style.border = "3px solid rgba(0, 0, 0, 0)";
ButtonEffects.style.color = 'white';
ButtonEffects.style.margin = '0px 10px 0';
ButtonEffects.style.height= '34px';
ButtonEffects.style.width= '36px';
ButtonEffects.style.borderRadius = '5%';
ButtonEffects.style.left = '10px';
ButtonEffects.style.display = 'flex';
ButtonEffects.style.justifyContent = 'center';
ButtonEffects.style.alignItems = 'center';
// Insert the container into the YouTube player controls
var ControlsRight = document.querySelector('.ytp-right-controls');
ControlsRight.style.position = 'relative';
ControlsRight.style.display = 'flex';
ControlsRight.style.alignItems = 'center';
ControlsRight.insertBefore(ButtonEffects, ControlsRight.firstChild);
//********************************************************************************************************************
//*** Video Effects 🎛️ ***
//********************************************************************************************************************
// Add click event listener to the button...
ButtonEffects.addEventListener("click", function(event) {
//***********************
//*** Video Blur 💧🎚️ ***
//***********************
// Create the BlurSlider element
var BlurSlider = document.createElement('input');
BlurSlider.id = 'BlurSlider';
BlurSlider.type = 'range';
BlurSlider.min = '0';
BlurSlider.max = '50';
BlurSlider.step = '1';
BlurSlider.value = '0';
BlurSlider.style.width = '200px';
BlurSlider.style.margin = '-11px 5px 0';
BlurSlider.style.marginLeft = '52px';
// Change blur sliders
BlurSlider.style.background = '#74e3ff';
BlurSlider.style.border = 'none';
BlurSlider.style.height = '5px';
BlurSlider.style.outline = 'none';
BlurSlider.style.appearance = 'none';
BlurSlider.style.webkitAppearance = 'none';
BlurSlider.style.mozAppearance = 'none';
BlurSlider.style.msAppearance = 'none';
BlurSlider.style.webkitSliderThumb = '-webkit-slider-thumb';
BlurSlider.style.mozSliderThumb = '-moz-slider-thumb';
BlurSlider.style.msSliderThumb = '-ms-slider-thumb';
BlurSlider.style.sliderThumb = 'slider-thumb';
//*****************************
//*** Video Brightness ☀️🎚️ ***
//*****************************
// Create the BrightnessSlider element
var BrightnessSlider = document.createElement('input');
BrightnessSlider.id = 'BrightnessSlider';
BrightnessSlider.type = 'range';
BrightnessSlider.min = '0';
BrightnessSlider.max = '200';
BrightnessSlider.step = '1';
BrightnessSlider.value = '100';
BrightnessSlider.style.width = '200px';
BrightnessSlider.style.margin = '-11px 5px 0';
BrightnessSlider.style.marginLeft = '7px';
// Change brightness sliders
BrightnessSlider.style.background = '#74e3ff';
BrightnessSlider.style.border = 'none';
BrightnessSlider.style.height = '5px';
BrightnessSlider.style.outline = 'none';
BrightnessSlider.style.appearance = 'none';
BrightnessSlider.style.webkitAppearance = 'none';
BrightnessSlider.style.mozAppearance = 'none';
BrightnessSlider.style.msAppearance = 'none';
BrightnessSlider.style.webkitSliderThumb = '-webkit-slider-thumb';
BrightnessSlider.style.mozSliderThumb = '-moz-slider-thumb';
BrightnessSlider.style.msSliderThumb = '-ms-slider-thumb';
BrightnessSlider.style.sliderThumb = 'slider-thumb';
//***************************
//*** Video Contrast 🌓🎚️ ***
//***************************
// Create the ContrastSlider element
var ContrastSlider = document.createElement('input');
ContrastSlider.id = 'ContrastSlider';
ContrastSlider.type = 'range';
ContrastSlider.min = '0';
ContrastSlider.max = '200';
ContrastSlider.step = '1';
ContrastSlider.value = '100';
ContrastSlider.style.width = '200px';
ContrastSlider.style.margin = '-11px 5px 0';
ContrastSlider.style.marginLeft = '18px';
// Change contrast sliders
ContrastSlider.style.background = '#74e3ff';
ContrastSlider.style.border = 'none';
ContrastSlider.style.height = '5px';
ContrastSlider.style.outline = 'none';
ContrastSlider.style.appearance = 'none';
ContrastSlider.style.webkitAppearance = 'none';
ContrastSlider.style.mozAppearance = 'none';
ContrastSlider.style.msAppearance = 'none';
ContrastSlider.style.webkitSliderThumb = '-webkit-slider-thumb';
ContrastSlider.style.mozSliderThumb = '-moz-slider-thumb';
ContrastSlider.style.msSliderThumb = '-ms-slider-thumb';
ContrastSlider.style.sliderThumb = 'slider-thumb';
//****************************
//*** Video Grayscale ⚪️🎚️ ***
//****************************
// Create the GrayscaleSlider element
var GrayscaleSlider = document.createElement('input');
GrayscaleSlider.id = 'GrayscaleSlider';
GrayscaleSlider.type = 'range';
GrayscaleSlider.min = '0';
GrayscaleSlider.max = '100';
GrayscaleSlider.step = '1';
GrayscaleSlider.value = '0';
GrayscaleSlider.style.width = '200px';
GrayscaleSlider.style.margin = '-11px 5px 0';
GrayscaleSlider.style.marginLeft = '13px';
// Change grayscale sliders
GrayscaleSlider.style.background = '#74e3ff';
GrayscaleSlider.style.border = 'none';
GrayscaleSlider.style.height = '5px';
GrayscaleSlider.style.outline = 'none';
GrayscaleSlider.style.appearance = 'none';
GrayscaleSlider.style.webkitAppearance = 'none';
GrayscaleSlider.style.mozAppearance = 'none';
GrayscaleSlider.style.msAppearance = 'none';
GrayscaleSlider.style.webkitSliderThumb = '-webkit-slider-thumb';
GrayscaleSlider.style.mozSliderThumb = '-moz-slider-thumb';
GrayscaleSlider.style.msSliderThumb = '-ms-slider-thumb';
GrayscaleSlider.style.sliderThumb = 'slider-thumb';
//*******************************
//*** Video Hue Ratation 👩🎨🎚️ ***
//*******************************
// Create the Hue_RotationSlider element
var Hue_RotationSlider = document.createElement('input');
Hue_RotationSlider.id = 'Hue_RotationSlider';
Hue_RotationSlider.type = 'range';
Hue_RotationSlider.min = '0';
Hue_RotationSlider.max = '360';
Hue_RotationSlider.step = '1';
Hue_RotationSlider.value = '0';
Hue_RotationSlider.style.width = '200px';
Hue_RotationSlider.style.margin = '-11px 5px 0';
Hue_RotationSlider.style.marginLeft = '4px';
// Change Hue_Rotation sliders
Hue_RotationSlider.style.background = '#74e3ff';
Hue_RotationSlider.style.border = 'none';
Hue_RotationSlider.style.height = '5px';
Hue_RotationSlider.style.outline = 'none';
Hue_RotationSlider.style.appearance = 'none';
Hue_RotationSlider.style.webkitAppearance = 'none';
Hue_RotationSlider.style.mozAppearance = 'none';
Hue_RotationSlider.style.msAppearance = 'none';
Hue_RotationSlider.style.webkitSliderThumb = '-webkit-slider-thumb';
Hue_RotationSlider.style.mozSliderThumb = '-moz-slider-thumb';
Hue_RotationSlider.style.msSliderThumb = '-ms-slider-thumb';
Hue_RotationSlider.style.sliderThumb = 'slider-thumb';
//*********************************
//*** Video Color Invetion 🩻🎚️ ***
//*********************************
// Create the Color_InvertionSlider element
var Color_InvertionSlider = document.createElement('input');
Color_InvertionSlider.id = 'Color_InvertionSlider';
Color_InvertionSlider.type = 'range';
Color_InvertionSlider.min = '0';
Color_InvertionSlider.max = '100';
Color_InvertionSlider.step = '1';
Color_InvertionSlider.value = '0';
Color_InvertionSlider.style.width = '200px';
Color_InvertionSlider.style.margin = '-11px 5px 0';
Color_InvertionSlider.style.marginLeft = '1px';
// Change Color_Invertion sliders
Color_InvertionSlider.style.background = '#74e3ff';
Color_InvertionSlider.style.border = 'none';
Color_InvertionSlider.style.height = '5px';
Color_InvertionSlider.style.outline = 'none';
Color_InvertionSlider.style.appearance = 'none';
Color_InvertionSlider.style.webkitAppearance = 'none';
Color_InvertionSlider.style.mozAppearance = 'none';
Color_InvertionSlider.style.msAppearance = 'none';
Color_InvertionSlider.style.webkitSliderThumb = '-webkit-slider-thumb';
Color_InvertionSlider.style.mozSliderThumb = '-moz-slider-thumb';
Color_InvertionSlider.style.msSliderThumb = '-ms-slider-thumb';
Color_InvertionSlider.style.sliderThumb = 'slider-thumb';
//***************************
//*** Video Saturate 💦🎚️ ***
//***************************
// Create the SaturateSlider element
var SaturateSlider = document.createElement('input');
SaturateSlider.id = 'SaturateSlider';
SaturateSlider.type = 'range';
SaturateSlider.min = '0';
SaturateSlider.max = '200';
SaturateSlider.step = '1';
SaturateSlider.value = '100';
SaturateSlider.style.width = '200px';
SaturateSlider.style.margin = '-11px 5px 0';
SaturateSlider.style.marginLeft = '10px';
// Change Saturate sliders
SaturateSlider.style.background = '#74e3ff';
SaturateSlider.style.border = 'none';
SaturateSlider.style.height = '5px';
SaturateSlider.style.outline = 'none';
SaturateSlider.style.appearance = 'none';
SaturateSlider.style.webkitAppearance = 'none';
SaturateSlider.style.mozAppearance = 'none';
SaturateSlider.style.msAppearance = 'none';
SaturateSlider.style.webkitSliderThumb = '-webkit-slider-thumb';
SaturateSlider.style.mozSliderThumb = '-moz-slider-thumb';
SaturateSlider.style.msSliderThumb = '-ms-slider-thumb';
SaturateSlider.style.sliderThumb = 'slider-thumb';
//************************
//*** Video Sepia 🌅🎚️ ***
//************************
// Create the SepiaSlider element
var SepiaSlider = document.createElement('input');
SepiaSlider.id = 'SepiaSlider';
SepiaSlider.type = 'range';
SepiaSlider.min = '0';
SepiaSlider.max = '100';
SepiaSlider.step = '1';
SepiaSlider.value = '0';
SepiaSlider.style.width = '200px';
SepiaSlider.style.margin = '-11px 5px 0';
SepiaSlider.style.marginLeft = '41px';
// Change Sepia sliders
SepiaSlider.style.background = '#74e3ff';
SepiaSlider.style.border = 'none';
SepiaSlider.style.height = '5px';
SepiaSlider.style.outline = 'none';
SepiaSlider.style.appearance = 'none';
SepiaSlider.style.webkitAppearance = 'none';
SepiaSlider.style.mozAppearance = 'none';
SepiaSlider.style.msAppearance = 'none';
SepiaSlider.style.webkitSliderThumb = '-webkit-slider-thumb';
SepiaSlider.style.mozSliderThumb = '-moz-slider-thumb';
SepiaSlider.style.msSliderThumb = '-ms-slider-thumb';
SepiaSlider.style.sliderThumb = 'slider-thumb';
//***************************
//*** Video Rotation 🔄🎚️ ***
//***************************
// Create the Video_RotationSlider element
var Video_RotationSlider = document.createElement('input');
Video_RotationSlider.id = 'Video_RotationSlider';
Video_RotationSlider.type = 'range';
Video_RotationSlider.min = '0';
Video_RotationSlider.max = '360';
Video_RotationSlider.step = '1';
Video_RotationSlider.value = '0';
Video_RotationSlider.style.width = '200px';
Video_RotationSlider.style.margin = '-11px 5px 0';
Video_RotationSlider.style.marginLeft = '22px';
// Change Video_Rotation sliders
Video_RotationSlider.style.background = '#74e3ff';
Video_RotationSlider.style.border = 'none';
Video_RotationSlider.style.height = '5px';
Video_RotationSlider.style.outline = 'none';
Video_RotationSlider.style.appearance = 'none';
Video_RotationSlider.style.webkitAppearance = 'none';
Video_RotationSlider.style.mozAppearance = 'none';
Video_RotationSlider.style.msAppearance = 'none';
Video_RotationSlider.style.webkitSliderThumb = '-webkit-slider-thumb';
Video_RotationSlider.style.mozSliderThumb = '-moz-slider-thumb';
Video_RotationSlider.style.msSliderThumb = '-ms-slider-thumb';
Video_RotationSlider.style.sliderThumb = 'slider-thumb';
//***************************
//*** Video TranslateX ↔️🎚️ ***
//***************************
// Create the Video_TranslateXSlider element
var Video_TranslateXSlider = document.createElement('input');
Video_TranslateXSlider.id = 'Video_TranslateXSlider';
Video_TranslateXSlider.type = 'range';
Video_TranslateXSlider.min = '-7680';
Video_TranslateXSlider.max = '7680';
Video_TranslateXSlider.step = '1';
Video_TranslateXSlider.value = '0';
Video_TranslateXSlider.style.width = '200px';
Video_TranslateXSlider.style.margin = '-11px 5px 0';
Video_TranslateXSlider.style.marginLeft = '7px';
// Change Video_TranslateX sliders
Video_TranslateXSlider.style.background = '#74e3ff';
Video_TranslateXSlider.style.border = 'none';
Video_TranslateXSlider.style.height = '5px';
Video_TranslateXSlider.style.outline = 'none';
Video_TranslateXSlider.style.appearance = 'none';
Video_TranslateXSlider.style.webkitAppearance = 'none';
Video_TranslateXSlider.style.mozAppearance = 'none';
Video_TranslateXSlider.style.msAppearance = 'none';
Video_TranslateXSlider.style.webkitSliderThumb = '-webkit-slider-thumb';
Video_TranslateXSlider.style.mozSliderThumb = '-moz-slider-thumb';
Video_TranslateXSlider.style.msSliderThumb = '-ms-slider-thumb';
Video_TranslateXSlider.style.sliderThumb = 'slider-thumb';
//***************************
//*** Video TranslateY ↕️🎚️ ***
//***************************
// Create the Video_TranslateYSlider element
var Video_TranslateYSlider = document.createElement('input');
Video_TranslateYSlider.id = 'Video_TranslateYSlider';
Video_TranslateYSlider.type = 'range';
Video_TranslateYSlider.min = '-4320';
Video_TranslateYSlider.max = '4320';
Video_TranslateYSlider.step = '1';
Video_TranslateYSlider.value = '0';
Video_TranslateYSlider.style.width = '200px';
Video_TranslateYSlider.style.margin = '-11px 5px 0';
Video_TranslateYSlider.style.marginLeft = '7px';
// Change Video_TranslateY sliders
Video_TranslateYSlider.style.background = '#74e3ff';
Video_TranslateYSlider.style.border = 'none';
Video_TranslateYSlider.style.height = '5px';
Video_TranslateYSlider.style.outline = 'none';
Video_TranslateYSlider.style.appearance = 'none';
Video_TranslateYSlider.style.webkitAppearance = 'none';
Video_TranslateYSlider.style.mozAppearance = 'none';
Video_TranslateYSlider.style.msAppearance = 'none';
Video_TranslateYSlider.style.webkitSliderThumb = '-webkit-slider-thumb';
Video_TranslateYSlider.style.mozSliderThumb = '-moz-slider-thumb';
Video_TranslateYSlider.style.msSliderThumb = '-ms-slider-thumb';
Video_TranslateYSlider.style.sliderThumb = 'slider-thumb';
//************************
//*** Video Scale 🔎🎚️ ***
//************************
// Create the Video_ScaleSlider element
var Video_ScaleSlider = document.createElement('input');
Video_ScaleSlider.id = 'Video_ScaleSlider';
Video_ScaleSlider.type = 'range';
Video_ScaleSlider.min = '1';
Video_ScaleSlider.max = '10';
Video_ScaleSlider.step = '0.1';
Video_ScaleSlider.value = '1';
Video_ScaleSlider.style.width = '200px';
Video_ScaleSlider.style.margin = '-11px 5px 0';
Video_ScaleSlider.style.marginLeft = '42px';
// Change Video_Scale sliders
Video_ScaleSlider.style.background = '#74e3ff';
Video_ScaleSlider.style.border = 'none';
Video_ScaleSlider.style.height = '5px';
Video_ScaleSlider.style.outline = 'none';
Video_ScaleSlider.style.appearance = 'none';
Video_ScaleSlider.style.webkitAppearance = 'none';
Video_ScaleSlider.style.mozAppearance = 'none';
Video_ScaleSlider.style.msAppearance = 'none';
Video_ScaleSlider.style.webkitSliderThumb = '-webkit-slider-thumb';
Video_ScaleSlider.style.mozSliderThumb = '-moz-slider-thumb';
Video_ScaleSlider.style.msSliderThumb = '-ms-slider-thumb';
Video_ScaleSlider.style.sliderThumb = 'slider-thumb';
//**************************
//*** Video ScaleX ◀️▶️🎚️ ***
//**************************
// Create the Video_ScaleXSlider element
var Video_ScaleXSlider = document.createElement('input');
Video_ScaleXSlider.id = 'Video_ScaleXSlider';
Video_ScaleXSlider.type = 'range';
Video_ScaleXSlider.min = '-1';
Video_ScaleXSlider.max = '10';
Video_ScaleXSlider.step = '0.1';
Video_ScaleXSlider.value = '1';
Video_ScaleXSlider.style.width = '200px';
Video_ScaleXSlider.style.margin = '-11px 5px 0';
Video_ScaleXSlider.style.marginLeft = '32px';
// Change Video_ScaleX sliders
Video_ScaleXSlider.style.background = '#74e3ff';
Video_ScaleXSlider.style.border = 'none';
Video_ScaleXSlider.style.height = '5px';
Video_ScaleXSlider.style.outline = 'none';
Video_ScaleXSlider.style.appearance = 'none';
Video_ScaleXSlider.style.webkitAppearance = 'none';
Video_ScaleXSlider.style.mozAppearance = 'none';
Video_ScaleXSlider.style.msAppearance = 'none';
Video_ScaleXSlider.style.webkitSliderThumb = '-webkit-slider-thumb';
Video_ScaleXSlider.style.mozSliderThumb = '-moz-slider-thumb';
Video_ScaleXSlider.style.msSliderThumb = '-ms-slider-thumb';
Video_ScaleXSlider.style.sliderThumb = 'slider-thumb';
//**************************
//*** Video ScaleY 🔼🔽🎚️ ***
//**************************
// Create the Video_ScaleYSlider element
var Video_ScaleYSlider = document.createElement('input');
Video_ScaleYSlider.id = 'Video_ScaleYSlider';
Video_ScaleYSlider.type = 'range';
Video_ScaleYSlider.min = '-1';
Video_ScaleYSlider.max = '10';
Video_ScaleYSlider.step = '0.1';
Video_ScaleYSlider.value = '1';
Video_ScaleYSlider.style.width = '200px';
Video_ScaleYSlider.style.margin = '-11px 5px 0';
Video_ScaleYSlider.style.marginLeft = '32px';
// Change Video_ScaleY sliders
Video_ScaleYSlider.style.background = '#74e3ff';
Video_ScaleYSlider.style.border = 'none';
Video_ScaleYSlider.style.height = '5px';
Video_ScaleYSlider.style.outline = 'none';
Video_ScaleYSlider.style.appearance = 'none';
Video_ScaleYSlider.style.webkitAppearance = 'none';
Video_ScaleYSlider.style.mozAppearance = 'none';
Video_ScaleYSlider.style.msAppearance = 'none';
Video_ScaleYSlider.style.webkitSliderThumb = '-webkit-slider-thumb';
Video_ScaleYSlider.style.mozSliderThumb = '-moz-slider-thumb';
Video_ScaleYSlider.style.msSliderThumb = '-ms-slider-thumb';
Video_ScaleYSlider.style.sliderThumb = 'slider-thumb';
//*****************
//*** Labels 🎚️ ***
//*****************
// Create labels
var LabelEffects0 = document.createElement('label');
LabelEffects0.innerHTML = 'Effects';
LabelEffects0.style.color = 'white';
LabelEffects0.style.fontWeight = 'bold';
LabelEffects0.style.textDecoration = 'underline';
LabelEffects0.style.fontSize = '20px';
var LabelEffects1 = document.createElement('label');
LabelEffects1.innerHTML = 'Blur:';
LabelEffects1.style.color = 'white';
LabelEffects1.style.fontSize = '15px';
var LabelEffects2 = document.createElement('label');
LabelEffects2.innerHTML = 'Brightness:';
LabelEffects2.style.color = 'white';
LabelEffects2.style.fontSize = '15px';
var LabelEffects3 = document.createElement('label');
LabelEffects3.innerHTML = 'Contrast: ';
LabelEffects3.style.color = 'white';
LabelEffects3.style.fontSize = '15px';
var LabelEffects4 = document.createElement('label');
LabelEffects4.innerHTML = 'Grayscale:';
LabelEffects4.style.color = 'white';
LabelEffects4.style.fontSize = '15px';
var LabelEffects5 = document.createElement('label');
LabelEffects5.innerHTML = 'Hue Rotate:';
LabelEffects5.style.color = 'white';
LabelEffects5.style.fontSize = '15px';
var LabelEffects6 = document.createElement('label');
LabelEffects6.innerHTML = 'Invert Color:';
LabelEffects6.style.color = 'white';
LabelEffects6.style.fontSize = '15px';
var LabelEffects7 = document.createElement('label');
LabelEffects7.innerHTML = 'Saturation:';
LabelEffects7.style.color = 'white';
LabelEffects7.style.fontSize = '15px';
var LabelEffects8 = document.createElement('label');
LabelEffects8.innerHTML = 'Sepia:';
LabelEffects8.style.color = 'white';
LabelEffects8.style.fontSize = '15px';
var LabelEffects9 = document.createElement('label');
LabelEffects9.innerHTML = 'Rotation:';
LabelEffects9.style.color = 'white';
LabelEffects9.style.fontSize = '15px';
var LabelEffects10 = document.createElement('label');
LabelEffects10.innerHTML = 'TranslateX:';
LabelEffects10.style.color = 'white';
LabelEffects10.style.fontSize = '15px';
var LabelEffects11 = document.createElement('label');
LabelEffects11.innerHTML = 'TranslateY:';
LabelEffects11.style.color = 'white';
LabelEffects11.style.fontSize = '15px';
var LabelEffects12 = document.createElement('label');
LabelEffects12.innerHTML = 'Scale:';
LabelEffects12.style.color = 'white';
LabelEffects12.style.fontSize = '15px';
var LabelEffects13 = document.createElement('label');
LabelEffects13.innerHTML = 'ScaleX:';
LabelEffects13.style.color = 'white';
LabelEffects13.style.fontSize = '15px';
var LabelEffects14 = document.createElement('label');
LabelEffects14.innerHTML = 'ScaleY:';
LabelEffects14.style.color = 'white';
LabelEffects14.style.fontSize = '15px';
//**********************
//*** reset button 🔄 ***
//**********************
// Create button
var ResetEffectsButton = document.createElement('button');
// Button size
ResetEffectsButton.style.position = 'fixed';
ResetEffectsButton.style.width = '180px';
ResetEffectsButton.style.height = '25px';
// Button text
ResetEffectsButton.textContent = 'Reset';
ResetEffectsButton.style.fontSize = '16px';
// Button text style
ResetEffectsButton.style.color = '#303236';
ResetEffectsButton.style.textAlign = 'center';
ResetEffectsButton.addEventListener('click', function() {
BlurSlider.value = '0';
BrightnessSlider.value = '100';
ContrastSlider.value = '100';
GrayscaleSlider.value = '0';
Hue_RotationSlider.value = '0';
Color_InvertionSlider.value = '0';
SaturateSlider.value = '100';
SepiaSlider.value = '0';
Video_RotationSlider.value = '0';
Video_TranslateXSlider.value = '0';
Video_TranslateYSlider.value = '0';
Video_ScaleSlider.value = '1';
Video_ScaleXSlider.value = '1';
Video_ScaleYSlider.value = '1';
const videos = document.querySelectorAll('video');
// Loop through each video and reset effects
videos.forEach(video => {
video.style.filter = 'blur(' + BlurSlider.value + 'px) brightness(' + BrightnessSlider.value + '%) contrast(' + ContrastSlider.value + '%) grayscale(' + GrayscaleSlider.value + '%) hue-rotate(' + Hue_RotationSlider.value + 'deg) invert(' + Color_InvertionSlider.value + '%) saturate(' + SaturateSlider.value + '%) sepia(' + SepiaSlider.value + '%)';
video.style.transform = 'rotate(' + Video_RotationSlider.value + 'deg) translateX(' + Video_TranslateXSlider.value + 'px) translateY(' + Video_TranslateYSlider.value + 'px) scale(' + Video_ScaleSlider.value + ') scaleX(' + Video_ScaleXSlider.value + ') scaleY(' + Video_ScaleYSlider.value + ')';
});
});
ResetEffectsButton.style.backgroundColor = 'white';
ResetEffectsButton.style.border = '1px solid grey';
// Button position in panel
ResetEffectsButton.style.position = 'absolute';
ResetEffectsButton.style.left = '50%';
ResetEffectsButton.style.transform = 'translate(-50%, -50%)';
//*************************
//*** Donation 💳 ***
//*************************
// Create button
var DonationEffectsButton = document.createElement('button');
// Button size
DonationEffectsButton.style.position = 'fixed';
DonationEffectsButton.style.width = '180px';
DonationEffectsButton.style.height = '25px';
// Button text
DonationEffectsButton.textContent = '💳Please support me!🤗';
DonationEffectsButton.style.fontSize = '16px';
// Button text style
DonationEffectsButton.style.color = '#303236';
DonationEffectsButton.style.textAlign = 'center';
// Go to donation webpage
DonationEffectsButton.addEventListener('click', function() {GM_openInTab("https://greasyfork.org/ru/scripts/482237-testertv-youtube-effects");});
DonationEffectsButton.style.backgroundColor = 'white';
DonationEffectsButton.style.border = '1px solid grey';
// Button position in panel
DonationEffectsButton.style.position = 'absolute';
DonationEffectsButton.style.left = '50%';
DonationEffectsButton.style.transform = 'translate(-50%, -50%)';
//****************
//*** Panel 🎚️ ***
//****************
// Create the panel
var EffectsPanel = document.createElement('div');
EffectsPanel.id = 'EffectsPanel';
EffectsPanel.style.position = 'fixed';
EffectsPanel.style.top = '50%';
EffectsPanel.style.left = '50%';
EffectsPanel.style.transform = 'translate(-50%, -50%)';
EffectsPanel.style.backgroundColor = "rgba(0, 0, 0, 0.5)";
EffectsPanel.style.padding = '10px';
EffectsPanel.style.border = '1px solid grey';
EffectsPanel.style.display = 'block';
EffectsPanel.style.zIndex = '9999';
// Append the labels, dropdowns and donation button to the Panel
EffectsPanel.appendChild(LabelEffects0);
EffectsPanel.appendChild(document.createElement('br'));
EffectsPanel.appendChild(document.createElement('br'));
EffectsPanel.appendChild(LabelEffects1);
EffectsPanel.appendChild(BlurSlider);
EffectsPanel.appendChild(document.createElement('br'));
EffectsPanel.appendChild(LabelEffects2);
EffectsPanel.appendChild(BrightnessSlider);
EffectsPanel.appendChild(document.createElement('br'));
EffectsPanel.appendChild(LabelEffects3);
EffectsPanel.appendChild(ContrastSlider);
EffectsPanel.appendChild(document.createElement('br'));
EffectsPanel.appendChild(LabelEffects4);
EffectsPanel.appendChild(GrayscaleSlider);
EffectsPanel.appendChild(document.createElement('br'));
EffectsPanel.appendChild(LabelEffects5);
EffectsPanel.appendChild(Hue_RotationSlider);
EffectsPanel.appendChild(document.createElement('br'));
EffectsPanel.appendChild(LabelEffects6);
EffectsPanel.appendChild(Color_InvertionSlider);
EffectsPanel.appendChild(document.createElement('br'));
EffectsPanel.appendChild(LabelEffects7);
EffectsPanel.appendChild(SaturateSlider);
EffectsPanel.appendChild(document.createElement('br'));
EffectsPanel.appendChild(LabelEffects8);
EffectsPanel.appendChild(SepiaSlider);
EffectsPanel.appendChild(document.createElement('br'));
EffectsPanel.appendChild(document.createElement('br'));
EffectsPanel.appendChild(LabelEffects9);
EffectsPanel.appendChild(Video_RotationSlider);
EffectsPanel.appendChild(document.createElement('br'));
EffectsPanel.appendChild(LabelEffects10);
EffectsPanel.appendChild(Video_TranslateXSlider);
EffectsPanel.appendChild(document.createElement('br'));
EffectsPanel.appendChild(LabelEffects11);
EffectsPanel.appendChild(Video_TranslateYSlider);
EffectsPanel.appendChild(document.createElement('br'));
EffectsPanel.appendChild(LabelEffects12);
EffectsPanel.appendChild(Video_ScaleSlider);
EffectsPanel.appendChild(document.createElement('br'));
EffectsPanel.appendChild(LabelEffects13);
EffectsPanel.appendChild(Video_ScaleXSlider);
EffectsPanel.appendChild(document.createElement('br'));
EffectsPanel.appendChild(LabelEffects14);
EffectsPanel.appendChild(Video_ScaleYSlider);
EffectsPanel.appendChild(document.createElement('br'));
EffectsPanel.appendChild(document.createElement('br'));
EffectsPanel.appendChild(document.createElement('br'));
EffectsPanel.appendChild(ResetEffectsButton);
EffectsPanel.appendChild(document.createElement('br'));
EffectsPanel.appendChild(document.createElement('br'));
EffectsPanel.appendChild(document.createElement('br'));
EffectsPanel.appendChild(DonationEffectsButton);
EffectsPanel.appendChild(document.createElement('br'));
// Append the Panel to the body
document.body.appendChild(EffectsPanel);
//********************************************************************************************************************
//*** Listener event - Effects sliders👂 ***
//********************************************************************************************************************
//*************************************
//*** Video Color mode sliders 🎨🎚️ ***
//*************************************
// Add an event listener to update the effects when either slider value changes
document.addEventListener('input', function(event) {
// Check if the event target is one of the sliders
const sliders = [BlurSlider, BrightnessSlider, ContrastSlider, GrayscaleSlider, Hue_RotationSlider, Color_InvertionSlider, SaturateSlider, SepiaSlider];
if (sliders.includes(event.target)) {
// Select all video elements on the page
const videos = document.querySelectorAll('video');
// Loop through each video and apply the blur and brightness effects
videos.forEach(video => {
video.style.filter = 'blur(' + BlurSlider.value + 'px) brightness(' + BrightnessSlider.value + '%) contrast(' + ContrastSlider.value + '%) grayscale(' + GrayscaleSlider.value + '%) hue-rotate(' + Hue_RotationSlider.value + 'deg) invert(' + Color_InvertionSlider.value + '%) saturate(' + SaturateSlider.value + '%) sepia(' + SepiaSlider.value + '%)';
});
}
});
//*********************************************
//*** Video Transformation mode slider 🔄🎚️ ***
//*********************************************
// Add an event listener to update the effects when either slider value changes
document.addEventListener('input', function(event) {
// Check if the event target is one of the sliders
const sliders = [Video_RotationSlider, Video_TranslateXSlider, Video_TranslateYSlider, Video_ScaleSlider, Video_ScaleXSlider, Video_ScaleYSlider];
if (sliders.includes(event.target)) {
// Select all video elements on the page
const videos = document.querySelectorAll('video');
// Loop through each video and apply the blur and brightness effects
videos.forEach(video => {
video.style.transform = 'rotate(' + Video_RotationSlider.value + 'deg) translateX(' + Video_TranslateXSlider.value + 'px) translateY(' + Video_TranslateYSlider.value + 'px) scale(' + Video_ScaleSlider.value + ') scaleX(' + Video_ScaleXSlider.value + ') scaleY(' + Video_ScaleYSlider.value + ')';
});
}
});
//********************************************************************************************************************
//*** Listener event 👂 ***
//********************************************************************************************************************
//*********************
//*** Hide Panel 👀 ***
//*********************
// Add click event listener to the panel...
EffectsPanel.addEventListener("click", function(event) {
// Stop the event propagation to prevent hiding the panel
event.stopPropagation();
});
// Add click event listener to the document...
document.addEventListener("click", function(event) {
// Check if the clicked element is not the ButtonEffects or the EffectsPanel itself
if (event.target !== ButtonEffects && event.target !== EffectsPanel) {
// Hide the EffectsPanel
EffectsPanel.style.display = 'none';
}
});
});
//********************************************************************************************************************
//*** Listener event - Button click ⏩👂 ***
//********************************************************************************************************************
// Add an event listener to check if the user has pressed the forward button
ButtonEffects.addEventListener("click", function(event) {
ButtonEffects.style.border = "3px solid rgba(255, 0, 0, 0.5)";
if (ButtonEffects) {
setTimeout(function() {
ButtonEffects.style.border = "3px solid rgba(0, 0, 0, 0)";
}, 150);
}
if (ButtonEffects) {
setTimeout(function() {
ButtonEffects.style.border = "3px solid #74e3ff";
}, 150);
}
});
//********************************************************************************************************************
//*** Listener event - Button mouseover ⏩👂 ***
//********************************************************************************************************************
// Add mouseover event listener to the button...
ButtonEffects.addEventListener('mouseover', function(event) {
ButtonEffects.style.border = "3px solid #74e3ff";
});
// Add mouseover event listener to the button...
ButtonEffects.addEventListener('mouseleave', function(event) {
ButtonEffects.style.border = "3px solid rgba(0, 0, 0, 0)";
});
}//window isn't an iframe
}