Refactor to reduce code length

This hopefully improves performance, big thanks to Daren Liang to helping with the refactor
This commit is contained in:
Isaac Shoebottom 2022-07-03 01:11:14 -03:00
parent 8927f5dcd0
commit 90b57f5082

292
script.js
View File

@ -1,273 +1,65 @@
// ==UserScript== // ==UserScript==
// @name Spotify Background Changer // @name Spotify Rainbow Background
// @namespace http://tampermonkey.net/ // @namespace http://tampermonkey.net/
// @source https://github.com/Glaceon575/SpotifyBackgroundSwitcher // @source https://github.com/Glaceon575/SpotifyBackgroundSwitcher
// @version 0.0.3 // @version 0.1.0
// @description Changes the background of Spotify playlists and albums in a rainbow pattern // @description Changes the background of Spotify playlists and albums in a rainbow pattern
// @author Isaac Shoebottom // @author Isaac Shoebottom
// @updateURL https://raw.githubusercontent.com/Glaceon575/SpotifyBackgroundSwitcher/master/script.js // @updateURL https://raw.githubusercontent.com/Glaceon575/SpotifyBackgroundSwitcher/master/script.js
// @downloadURL https://raw.githubusercontent.com/Glaceon575/SpotifyBackgroundSwitcher/master/script.js // @downloadURL https://raw.githubusercontent.com/Glaceon575/SpotifyBackgroundSwitcher/master/script.js
// @match https://open.spotify.com/* // @match https://open.spotify.com/*
// @require https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js
// @grant none // @grant none
// ==/UserScript== // ==/UserScript==
"use strict"; "use strict";
waitForKeyElements(".xYgjMpAjE5XT05aRIezb", changeBackground); let background;
const selector = ".gHImFiUWOg93pvTefeAD.xYgjMpAjE5XT05aRIezb";
const timer = 50 //in milliseconds const timer = 33; //in milliseconds
const probeTimer = 500 //in milliseconds, timer for checking for selector
const difference = 60; //delta between the top and bottom
let r1, g1, b1, r2, b2, g2 probeBackground();
let topIntensityCutoff = 235
let topDarknessCutoff = 75
const difference = 60 //delta between the top and bottom const start = {
intensity: 235,
darkness: 75,
};
let bottomIntensityCutoff = topIntensityCutoff - difference // [r, g, b]
let bottomDarknessCutoff = topDarknessCutoff - difference const color = [start.intensity, start.darkness, start.darkness];
let topIncreaseBlue = true; let isIncrease = true;
let topDecreaseRed = false; let currentColor = 2;
let topIncreaseGreen = false;
let topDecreaseBlue = false;
let topIncreaseRed = false;
let topDecreaseGreen = false;
let bottomIncreaseBlue = true; function changeColor() {
let bottomDecreaseRed = false; if (color[currentColor] === (isIncrease ? start.intensity : start.darkness)) {
let bottomIncreaseGreen = false; isIncrease = !isIncrease;
let bottomDecreaseBlue = false; currentColor = (currentColor + 1) % 3;
let bottomIncreaseRed = false;
let bottomDecreaseGreen = false;
function changeBackground() {
const htmlCollection = document.getElementsByClassName("gHImFiUWOg93pvTefeAD xYgjMpAjE5XT05aRIezb");
const bg = htmlCollection[0];
r1 = topIntensityCutoff;
g1 = topDarknessCutoff;
b1 = topDarknessCutoff;
r2 = bottomIntensityCutoff;
g2 = bottomDarknessCutoff;
b2 = bottomDarknessCutoff;
setInterval(changeColor, timer, bg);
}
function changeColor(bg) {
if (!document.hidden) {
// Top Half
//Part 1;
if (topIncreaseBlue) {
if (b1 === topIntensityCutoff) {
topDecreaseRed = true;
topIncreaseBlue = false;
} else {
b1++;
}
}
//Part 2;
else if (topDecreaseRed) {
if (r1 === topDarknessCutoff) {
topIncreaseGreen = true;
topDecreaseRed = false;
} else {
r1--;
}
}
//Part 3
else if (topIncreaseGreen) {
if (g1 === topIntensityCutoff) {
topDecreaseBlue = true;
topIncreaseGreen = false;
} else {
g1++;
}
}
//Part 4
else if (topDecreaseBlue) {
if (b1 === topDarknessCutoff) {
topIncreaseRed = true;
topDecreaseBlue = false;
} else {
b1--;
}
}
//Part 5
else if (topIncreaseRed) {
if (r1 === topIntensityCutoff) {
topDecreaseGreen = true;
topIncreaseRed = false;
} else {
r1++;
}
}
//Part 6
else if (topDecreaseGreen) {
if (g1 === topDarknessCutoff) {
topIncreaseBlue = true;
topDecreaseGreen = false;
} else {
g1--;
}
}
// Bottom Half
//Part 1;
if (bottomIncreaseBlue) {
if (b2 === bottomIntensityCutoff) {
bottomDecreaseRed = true;
bottomIncreaseBlue = false;
} else {
b2++;
}
}
//Part 2;
else if (bottomDecreaseRed) {
if (r2 === bottomDarknessCutoff) {
bottomIncreaseGreen = true;
bottomDecreaseRed = false;
} else {
r2--;
}
}
//Part 3
else if (bottomIncreaseGreen) {
if (g2 === bottomIntensityCutoff) {
bottomDecreaseBlue = true;
bottomIncreaseGreen = false;
} else {
g2++;
}
}
//Part 4
else if (bottomDecreaseBlue) {
if (b2 === bottomDarknessCutoff) {
bottomIncreaseRed = true;
bottomDecreaseBlue = false;
} else {
b2--;
}
}
//Part 5
else if (bottomIncreaseRed) {
if (r2 === bottomIntensityCutoff) {
bottomDecreaseGreen = true;
bottomIncreaseRed = false;
} else {
r2++;
}
}
//Part 6
else if (bottomDecreaseGreen) {
if (g2 === bottomDarknessCutoff) {
bottomIncreaseBlue = true;
bottomDecreaseGreen = false;
} else {
g2--;
}
}
bg.style.background = "linear-gradient(rgb(" + r1 + ", " + g1 + ", " + b1 + "),rgba(" + r2 + ", " + g2 + ", " + b2 + ", 0.5)),var(--background-noise)";
}
}
//waitForKeyElements
/*--- waitForKeyElements(): A utility function, for Greasemonkey scripts,
that detects and handles AJAXed content.
Usage example:
waitForKeyElements (
"div.comments"
, commentCallbackFunction
);
//--- Page-specific function to do what we want when the node is found.
function commentCallbackFunction (jNode) {
jNode.text ("This comment changed by waitForKeyElements().");
}
IMPORTANT: This function requires your script to have loaded jQuery.
*/
function waitForKeyElements(
selectorTxt, /* Required: The jQuery selector string that
specifies the desired element(s). */
actionFunction, /* Required: The code to run when elements are found. It is passed a jNode to the matched
element. */
bWaitOnce, /* Optional: If false, will continue to scan for new elements even after the first match is
found. */
iframeSelector /* Optional: If set, identifies the iframe to search. */
) {
let targetNodes, bTargetsFound;
if (typeof iframeSelector == "undefined")
targetNodes = $(selectorTxt);
else
targetNodes = $(iframeSelector).contents()
.find(selectorTxt);
if (targetNodes && targetNodes.length > 0) {
bTargetsFound = true;
/*--- Found target node(s). Go through each and act if they are new. */
targetNodes.each(function () {
const jThis = $(this);
const alreadyFound = jThis.data('alreadyFound') || false;
if (!alreadyFound) {
//--- Call the payload function.
const cancelFound = actionFunction(jThis);
if (cancelFound)
bTargetsFound = false;
else
jThis.data('alreadyFound', true);
}
});
} else { } else {
bTargetsFound = false; color[currentColor] += isIncrease ? 1 : -1;
} }
//--- Get the timer-control variable for this selector. background.style.background = `linear-gradient(rgb(${color.join(",")}),rgba(${color.map(c => c - difference).join(",")}, 0.5)),var(--background-noise)`;
const controlObj = waitForKeyElements.controlObj || {}; }
const controlKey = selectorTxt.replace(/\W/g, "_");
let timeControl = controlObj [controlKey];
function probeBackground() {
//--- Now set or clear the timer as appropriate. console.log("probing background");
if (bTargetsFound && bWaitOnce && timeControl) { const interval = setInterval(() => {
//--- The only condition where we need to clear the timer. const newBackground = document.querySelector(selector);
clearInterval(timeControl); if (!newBackground) {
delete controlObj [controlKey] return;
} else { }
//--- Set a timer, if needed. if (!background) {
if (!timeControl) { background = newBackground;
timeControl = setInterval(function () { }
waitForKeyElements(selectorTxt, if (!newBackground.isSameNode(background)) {
actionFunction, background = newBackground;
bWaitOnce, clearInterval(interval);
iframeSelector probeBackground();
); }
}, changeColor();
300 }, probeTimer);
);
controlObj [controlKey] = timeControl;
}
}
waitForKeyElements.controlObj = controlObj;
} }