Refactor to reduce code length
This hopefully improves performance, big thanks to Daren Liang to helping with the refactor
This commit is contained in:
parent
8927f5dcd0
commit
90b57f5082
280
script.js
280
script.js
@ -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;
|
|
||||||
let bottomDecreaseRed = false;
|
|
||||||
let bottomIncreaseGreen = false;
|
|
||||||
let bottomDecreaseBlue = false;
|
|
||||||
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;
|
|
||||||
|
|
||||||
|
function changeColor() {
|
||||||
|
if (color[currentColor] === (isIncrease ? start.intensity : start.darkness)) {
|
||||||
|
isIncrease = !isIncrease;
|
||||||
|
currentColor = (currentColor + 1) % 3;
|
||||||
} else {
|
} else {
|
||||||
b1++;
|
color[currentColor] += isIncrease ? 1 : -1;
|
||||||
}
|
|
||||||
}
|
|
||||||
//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
|
background.style.background = `linear-gradient(rgb(${color.join(",")}),rgba(${color.map(c => c - difference).join(",")}, 0.5)),var(--background-noise)`;
|
||||||
|
|
||||||
//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
|
function probeBackground() {
|
||||||
/*--- waitForKeyElements(): A utility function, for Greasemonkey scripts,
|
console.log("probing background");
|
||||||
that detects and handles AJAXed content.
|
const interval = setInterval(() => {
|
||||||
|
const newBackground = document.querySelector(selector);
|
||||||
Usage example:
|
if (!newBackground) {
|
||||||
|
return;
|
||||||
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().");
|
|
||||||
}
|
}
|
||||||
|
if (!background) {
|
||||||
IMPORTANT: This function requires your script to have loaded jQuery.
|
background = newBackground;
|
||||||
*/
|
|
||||||
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);
|
|
||||||
}
|
}
|
||||||
});
|
if (!newBackground.isSameNode(background)) {
|
||||||
} else {
|
background = newBackground;
|
||||||
bTargetsFound = false;
|
clearInterval(interval);
|
||||||
|
probeBackground();
|
||||||
}
|
}
|
||||||
|
changeColor();
|
||||||
//--- Get the timer-control variable for this selector.
|
}, probeTimer);
|
||||||
const controlObj = waitForKeyElements.controlObj || {};
|
|
||||||
const controlKey = selectorTxt.replace(/\W/g, "_");
|
|
||||||
let timeControl = controlObj [controlKey];
|
|
||||||
|
|
||||||
//--- Now set or clear the timer as appropriate.
|
|
||||||
if (bTargetsFound && bWaitOnce && timeControl) {
|
|
||||||
//--- The only condition where we need to clear the timer.
|
|
||||||
clearInterval(timeControl);
|
|
||||||
delete controlObj [controlKey]
|
|
||||||
} else {
|
|
||||||
//--- Set a timer, if needed.
|
|
||||||
if (!timeControl) {
|
|
||||||
timeControl = setInterval(function () {
|
|
||||||
waitForKeyElements(selectorTxt,
|
|
||||||
actionFunction,
|
|
||||||
bWaitOnce,
|
|
||||||
iframeSelector
|
|
||||||
);
|
|
||||||
},
|
|
||||||
300
|
|
||||||
);
|
|
||||||
controlObj [controlKey] = timeControl;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
waitForKeyElements.controlObj = controlObj;
|
|
||||||
}
|
}
|
||||||
Loading…
Reference in New Issue
Block a user