/* Based on https://github.com/harbassan/spicetify-galaxy/blob/main/galaxy.js
Credits to harbassan
*/
(function retroblur() {
const YouTubeSVG = ``
if (!(Spicetify.Player.data && Spicetify.Platform)) {
setTimeout(retroblur, 100);
return;
}
console.log("retroblur wallpaper changer running");
Object.keys(localStorage).forEach(item => {
if (item.includes("retroblur:temp")) localStorage.removeItem(item);
});
const config = {}
function parseOptions() {
config.matchWallpaperToTheme = JSON.parse(localStorage.getItem("matchWallpaperToTheme"));
}
parseOptions()
let isDim = false;
function loopOptions(page) {
setBg(startImage);
}
var defImage = `https://github.com/Motschen/Retroblur/blob/main/assets/background_purple.jpg?raw=true`;
console.log(getComputedStyle(document.body).getPropertyValue("--spice-button"))
switch (getComputedStyle(document.body).getPropertyValue("--spice-button")) {
case " #00bbff": {
console.log("setting default wallpaper to water");
defImage = "https://images.unsplash.com/photo-1502933691298-84fc14542831?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80";
break;
}
case " #b0fd68": {
console.log("setting default wallpaper to lush");
defImage = "https://images3.alphacoders.com/356/35627.jpg";
break;
}
case " #ceeb26": {
console.log("setting default wallpaper to sun");
defImage = "https://images.unsplash.com/photo-1516370873344-fb7c61054fa9?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80";
break;
}
case " #ebb726": {
console.log("setting default wallpaper to sunset");
defImage = "https://4kwallpapers.com/images/walls/thumbs_3t/4928.jpg";
break;
}
case " #a10003": {
console.log("setting default wallpaper to mercy");
defImage = "https://images3.alphacoders.com/356/35627.jpg";
break;
}
}
let startImage = localStorage.getItem("retroblur:startupBg") || defImage;
if (config.matchWallpaperToTheme) startImage = defImage;
function setBg(imageData) {
var image = imageData;
if (config.matchWallpaperToTheme) image = defImage;
document.body.style.backgroundImage = "url("+image+")";
console.log("setBG"+image)
}
// input for custom background images
const bannerInput = document.createElement("input");
bannerInput.type = "file";
bannerInput.className = "banner-input";
bannerInput.accept = ["image/jpeg", "image/apng", "image/avif", "image/gif", "image/png", "image/svg+xml", "image/webp"].join(",");
// when user selects a custom background image
bannerInput.onchange = () => {
if (!bannerInput.files.length) return;
const file = bannerInput.files[0];
const reader = new FileReader();
reader.onload = event => {
const result = event.target.result;
try {
localStorage.setItem("retroblur:startupBg", result);
} catch {
Spicetify.showNotification("File too large");
return;
}
document.querySelector("#wallpaper-select img").src = result;
};
reader.readAsDataURL(file);
};
const wallpaperEdit = new Spicetify.Menu.Item(
"Edit Wallpaper",
false,
() => {
const content = document.createElement("div");
content.innerHTML = `
`;
const optionList = document.createElement("div");
function createOption(name, desc, defVal) {
const optionRow = document.createElement("div");
optionRow.classList.add("retroblurOptionRow");
optionRow.innerHTML = `
${desc}
`;
optionRow.setAttribute("name", name);
optionRow.querySelector("button").addEventListener("click", () => {
optionRow.querySelector(".toggle").classList.toggle("enabled");
});
const isEnabled = JSON.parse(localStorage.getItem(name)) ?? defVal;
optionRow.querySelector(".toggle").classList.toggle("enabled", isEnabled);
optionList.append(optionRow);
}
const srcInput = document.createElement("input");
srcInput.type = "text";
srcInput.classList.add("main-playlistEditDetailsModal-textElement", "main-playlistEditDetailsModal-titleInput");
srcInput.id = "src-input";
srcInput.placeholder = "Wallpaper image URL (recommended)";
content.append(srcInput);
createOption("matchWallpaperToTheme", "Match wallpaper to the color scheme", true);
content.append(optionList);
img = content.querySelector("img");
img.src = localStorage.getItem("retroblur:startupBg") || defImage;
const editButton = content.querySelector(".main-editImageButton-image.main-editImageButton-overlay");
editButton.onclick = () => {
bannerInput.click();
};
const removeButton = content.querySelector(".main-playlistEditDetailsModal-imageDropDownButton");
removeButton.onclick = () => {
content.querySelector("img").src = defImage;
};
const saveButton = document.createElement("button");
saveButton.id = "wallpaper-save";
saveButton.innerHTML = "Save";
saveButton.addEventListener("click", () => {
// update changed bg image
startImage = srcInput.value || content.querySelector("img").src;
localStorage.setItem("retroblur:startupBg", startImage);
// save options to local storage
[...optionList.children].forEach(option => {
localStorage.setItem(option.getAttribute("name"), option.querySelector(".toggle").classList.contains("enabled"));
console.log(`retroblur: ${option.getAttribute("name")} set to ${option.querySelector(".toggle").classList.contains("enabled")}`);
});
parseOptions();
loopOptions("/")
});
content.append(saveButton);
const issueButton = document.createElement("a");
issueButton.classList.add("issue-button");
issueButton.innerHTML = "Report Issue";
issueButton.href = "https://github.com/Motschen/Retroblur/issues";
content.append(issueButton);
Spicetify.PopupModal.display({ title: "Retroblur Settings", content: content });
},
YouTubeSVG
).register()
let trackContextMenu = new Spicetify.ContextMenu.Item("Edit Wallpaper", () => {}, true, YouTubeSVG)
trackContextMenu.register()
// startup parse
loopOptions("/");
})();