mirror of
https://github.com/Motschen/Retroblur.git
synced 2025-12-13 03:25:09 +01:00
Add JavaScript based wallpaper changer
This is entirely optional, but allows easy changing of wallpapers without editing the css. Thanks to @harbassan for letting me use parts of their code (https://github.com/harbassan/spicetify-galaxy/issues/28)
This commit is contained in:
Motschen
@@ -42,7 +42,7 @@ notification = 1a181e
|
||||
notification-error = fb7c7c
|
||||
misc = 0c0e14
|
||||
|
||||
[summer]
|
||||
[lush]
|
||||
text = ffffff
|
||||
subtext = 68fdab
|
||||
main = 0c0e14
|
||||
|
||||
@@ -1,8 +1,22 @@
|
||||
{
|
||||
"name": "Retroblur",
|
||||
"description": "Theme with a background, blur, animations, gradients and reflections.",
|
||||
"preview": "preview/dream.jpg",
|
||||
"usercss": "user.css",
|
||||
"schemes": "color.ini",
|
||||
"readme": "README.md"
|
||||
}
|
||||
[
|
||||
{
|
||||
"name": "Retroblur",
|
||||
"description": "Theme with a background, blur, animations, gradients and reflections.",
|
||||
"preview": "preview/dream.jpg",
|
||||
"usercss": "user.css",
|
||||
"schemes": "color.ini",
|
||||
"include": ["https://raw.githubusercontent.com/Motschen/Retroblur/fresh/theme.js"],
|
||||
"tags": ["retro", "blur", "animations", "gradients"],
|
||||
"readme": "README.md"
|
||||
},
|
||||
{
|
||||
"name": "Retroblur Classic",
|
||||
"description": "Theme with a background, blur, animations and reflections.",
|
||||
"preview": "preview/playlist.png",
|
||||
"usercss": "user.css",
|
||||
"schemes": "color.ini",
|
||||
"readme": "README.md",
|
||||
"tags": ["retro", "blur", "animations"],
|
||||
"branch": "main"
|
||||
}
|
||||
]
|
||||
188
theme.js
Normal file
188
theme.js
Normal file
@@ -0,0 +1,188 @@
|
||||
/* Based on https://github.com/harbassan/spicetify-galaxy/blob/main/galaxy.js
|
||||
Credits to harbassan
|
||||
*/
|
||||
(function retroblur() {
|
||||
const YouTubeSVG = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><g fill="gray"><rect width="14.3" height="3.7" x=".8" y="11.5" ry=".1"/><rect width="5" height="5.6" x="-9.6" y="8.2" rx="0" ry=".1" transform="matrix(.63163 -.77527 .80715 .59035 0 0)"/><rect width="4.5" height="4.6" x="-1.3" y="13.1" rx="0" ry=".1" transform="matrix(.9021 -.43155 .62218 .78288 0 0)"/></g><g fill="#fff"><rect width="16" height="1.6" ry=".8"/><rect width="16" height="1.6" y="14.4" ry=".8"/><rect width="1.5" height="15.9" y=".1" ry=".8"/><rect width="1.7" height="15.9" x="14.3" ry=".8"/><ellipse cx="11.2" cy="4.4" rx="1.8" ry="1.9"/><rect width="2.7" height=".5" x="6.3" y="4.2" ry=".2"/><rect width="2.7" height=".5" x="4.9" y="7.1" ry=".2" transform="rotate(-14)"/><rect width="2.1" height=".5" x="6.6" y="-11.3" ry=".2" transform="rotate(90)"/><rect width="2.7" height=".5" x="7.1" y=".1" ry=".2" transform="rotate(18)"/><rect width="2.7" height=".5" x="-4.6" y="11.6" ry=".2" transform="rotate(-67)"/><rect width="2.7" height=".5" x="10" y="-9.6" ry=".2" transform="rotate(70)"/><rect width="2.7" height=".5" x=".1" y="10.5" ry=".2" transform="rotate(-43)"/></g></svg>`
|
||||
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 = `
|
||||
<div class="main-playlistEditDetailsModal-albumCover" id="wallpaper-select">
|
||||
<div class="main-entityHeader-image" draggable="false">
|
||||
<img aria-hidden="false" draggable="false" loading="eager" class="main-image-image main-entityHeader-image main-entityHeader-shadow"></div>
|
||||
<div class="main-playlistEditDetailsModal-imageChangeButton">
|
||||
<div class="main-editImage-buttonContainer">
|
||||
<button class="main-editImageButton-image main-editImageButton-overlay" aria-haspopup="true" type="button">
|
||||
<div class="main-editImageButton-icon icon">
|
||||
<svg role="img" height="48" width="48" aria-hidden="true" viewBox="0 0 24 24" class="Svg-sc-1bi12j5-0 EQkJl"><path d="M17.318 1.975a3.329 3.329 0 114.707 4.707L8.451 20.256c-.49.49-1.082.867-1.735 1.103L2.34 22.94a1 1 0 01-1.28-1.28l1.581-4.376a4.726 4.726 0 011.103-1.735L17.318 1.975zm3.293 1.414a1.329 1.329 0 00-1.88 0L5.159 16.963c-.283.283-.5.624-.636 1l-.857 2.372 2.371-.857a2.726 2.726 0 001.001-.636L20.611 5.268a1.329 1.329 0 000-1.879z"></path></svg><span class="Type__TypeElement-goli3j-0 gAmaez main-editImageButton-copy">Choose photo</span></div></button></div></div><div class="main-playlistEditDetailsModal-imageDropDownContainer"><button class="main-playlistEditDetailsModal-imageDropDownButton" type="button"><svg role="img" height="16" width="16" viewBox="0 0 16 16" class="Svg-sc-1bi12j5-0 EQkJl"><path d="M1.47 1.47a.75.75 0 011.06 0L8 6.94l5.47-5.47a.75.75 0 111.06 1.06L9.06 8l5.47 5.47a.75.75 0 11-1.06 1.06L8 9.06l-5.47 5.47a.75.75 0 01-1.06-1.06L6.94 8 1.47 2.53a.75.75 0 010-1.06z"></path></svg><span class="hidden-visually">Edit photo</span></button></div></div>`;
|
||||
|
||||
const optionList = document.createElement("div");
|
||||
|
||||
function createOption(name, desc, defVal) {
|
||||
const optionRow = document.createElement("div");
|
||||
optionRow.classList.add("retroblurOptionRow");
|
||||
optionRow.innerHTML = `
|
||||
<span class="retroblurOptionDesc">${desc}</span>
|
||||
<button class="retroblurOptionToggle">
|
||||
<span class="toggleWrapper">
|
||||
<span class="toggle"></span>
|
||||
</span>
|
||||
</button>`;
|
||||
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("/");
|
||||
})();
|
||||
121
user.css
121
user.css
@@ -13,11 +13,11 @@
|
||||
-> Here are some cartoon wallpapers that suit their theme well:
|
||||
Bridge (Dream): https://github.com/Motschen/Retroblur/blob/fresh/assets/background_purple.jpg?raw=true
|
||||
Bridge (Mercy): https://github.com/Motschen/Retroblur/blob/fresh/assets/background_red.jpg?raw=true
|
||||
Bridge (Summer): https://github.com/Motschen/Retroblur/blob/fresh/assets/background_green.jpg?raw=true
|
||||
Bridge (Lush): https://github.com/Motschen/Retroblur/blob/fresh/assets/background_green.jpg?raw=true
|
||||
Bridge (Sun): https://github.com/Motschen/Retroblur/blob/fresh/assets/background_yellow.jpg?raw=true
|
||||
Bridge (Water: https://github.com/Motschen/Retroblur/blob/fresh/assets/background_blue.jpg?raw=true
|
||||
Bridge Wallpaper Source: https://wallpapercave.com/wp/wp5003466.jpg
|
||||
Forest (Summer): https://i.imgur.com/hnpaDeR.jpg
|
||||
Forest (Lush): https://i.imgur.com/hnpaDeR.jpg
|
||||
|
||||
-> Here are some real life wallpapers that suit their theme well:
|
||||
Beach (Sun): https://wallpapercave.com/wp/wp5922621.jpg
|
||||
@@ -27,7 +27,7 @@
|
||||
Source: https://4kwallpapers.com/flowers/red-flower-red-rose-10670.html
|
||||
Evening Clouds (Sunset): https://4kwallpapers.com/images/walls/thumbs_3t/4928.jpg
|
||||
Source: https://4kwallpapers.com/nature/sunset-mountain-range-silhouette-landscape-orange-sky-4928.html
|
||||
Waterfalls (Summer): https://images3.alphacoders.com/356/35627.jpg
|
||||
Waterfalls (Lush): https://images3.alphacoders.com/356/35627.jpg
|
||||
Source: https://wall.alphacoders.com/big.php?i=35627
|
||||
Surfing (Sun): https://images.unsplash.com/photo-1516370873344-fb7c61054fa9?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80
|
||||
Source: https://unsplash.com/de/fotos/xarhNpLSHTk
|
||||
@@ -37,7 +37,7 @@
|
||||
body {
|
||||
/* Set the wallpaper link below */
|
||||
/* vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv */
|
||||
background-image: url("https://github.com/Motschen/Retroblur/blob/fresh/assets/background_purple.jpg?raw=true") !important;
|
||||
background-image: linear-gradient(left, #000000, #000000);
|
||||
/* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ */
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100%;
|
||||
@@ -594,8 +594,9 @@ path[d="M23 0C10.298 0 0 10.297 0 23c0 12.702 10.298 23 23 23 12.703 0 23-10.298
|
||||
} */
|
||||
/* modals */
|
||||
.main-trackCreditsModal-container, .main-aboutRecsModal-container, .main-playlistEditDetailsModal-container, .profile-userEditDetails-container, .artist-artistAbout-modal {
|
||||
|
||||
background-color: rgba(30, 30, 30, 0.4);
|
||||
border-radius: var(--border-radius-1) !important;
|
||||
backdrop-filter: blur(14px);
|
||||
}
|
||||
.main-playlistEditDetailsModal-titleInput, .main-playlistEditDetailsModal-descriptionTextarea, .main-playlistEditDetailsModal-titleInput:focus, .main-playlistEditDetailsModal-descriptionTextarea:focus, .playlist-inlineSearchBox-filterInput {
|
||||
background-color: rgba(30, 30, 30, 0.4) !important;
|
||||
@@ -902,6 +903,7 @@ CANVAS!!!
|
||||
background-size: 200% 200%;
|
||||
animation: gradientFade 3s linear infinite alternate;
|
||||
}
|
||||
#wallpaper-save,
|
||||
.ButtonInner-lg-iconOnly,
|
||||
.playlist-item__img.folder,
|
||||
.main-rootlist-rootlistItemLinkActive, .main-rootlist-rootlistItemLinkActive:hover, .VBBDTqhWgM6gWFAMJSUV, .VBBDTqhWgM6gWFAMJSUV:hover,
|
||||
@@ -912,6 +914,7 @@ CANVAS!!!
|
||||
background-size: 200% 200% !important;
|
||||
animation: gradientFade 3s ease infinite alternate;
|
||||
}
|
||||
#wallpaper-save:hover,
|
||||
.main-rootlist-rootlistItemLinkActive, .main-rootlist-rootlistItemLinkActive:hover, .VBBDTqhWgM6gWFAMJSUV, .VBBDTqhWgM6gWFAMJSUV:hover,
|
||||
.ac0df040748287f39652cc42e3b762ba-scss._926f2bd73c2ddb23fb86b430a2f48707-scss, .main-collectionLinkButton-selected, .main-collectionLinkButton-collectionLinkButton.active,
|
||||
.main-navBar-navBarLinkActive, .main-navBar-navBarLinkActive:hover, .main-navBar-navBarLinkActive:active, .main-navBar-navBarLinkActive:focus {
|
||||
@@ -984,4 +987,112 @@ CANVAS!!!
|
||||
.Button-sm-16-buttonTertiary-iconOnly-useBrowserDefaultFocusStyle, .main-shuffleButton-button.main-shuffleButton-active,
|
||||
.control-button {
|
||||
color: var(--spice-subtext) !important;
|
||||
}
|
||||
/*
|
||||
-------------------
|
||||
HOME POPUP
|
||||
-------------------
|
||||
*/
|
||||
#wallpaper-select {
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
div[aria-label="Retroblur Settings"] .main-trackCreditsModal-mainSection {
|
||||
overflow-y: hidden;
|
||||
padding: 24px;
|
||||
}
|
||||
.main-trackCreditsModal-container {
|
||||
max-height: 620px;
|
||||
}
|
||||
.main-trackCreditsModal-originalCredits {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
.main-userWidget-dropDownMenu li.main-contextMenu-menuItem > div {
|
||||
left: calc(225px + 185px) !important;
|
||||
width: 225px;
|
||||
}
|
||||
.retroblurOptionRow {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: initial;
|
||||
}
|
||||
button.retroblurOptionToggle {
|
||||
display: flex;
|
||||
background-color: transparent;
|
||||
border: hidden;
|
||||
}
|
||||
span.toggleWrapper {
|
||||
width: 42px;
|
||||
height: 24px;
|
||||
background-color: var(--spice-button);
|
||||
border-radius: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
span.toggleWrapper:disabled {
|
||||
background-color: gray;
|
||||
}
|
||||
span.toggle {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 10px;
|
||||
background-color: black;
|
||||
margin-left: 2px;
|
||||
}
|
||||
span.toggle.enabled {
|
||||
margin-left: 20px;
|
||||
}
|
||||
#src-input {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
#wallpaper-save {
|
||||
margin-top: 15px;
|
||||
box-sizing: border-box;
|
||||
font-family: var(--font-family, spotify-circular),Helvetica,Arial,sans-serif;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
font-size: 1rem;
|
||||
line-height: 1.5rem;
|
||||
font-weight: 700;
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
border-radius: 500px;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
text-transform: none;
|
||||
touch-action: manipulation;
|
||||
transition-duration: 33ms;
|
||||
transition-property: background-color,border-color,color,box-shadow,filter,transform;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
user-select: none;
|
||||
vertical-align: middle;
|
||||
transform: translate3d(0,0,0);
|
||||
padding: 0;
|
||||
min-inline-size: 0px;
|
||||
align-self: center;
|
||||
position: relative;
|
||||
border-radius: 500px;
|
||||
font-size: inherit;
|
||||
padding-block: 12px;
|
||||
padding-inline: 32px;
|
||||
color: black;
|
||||
background-color: var(--spice-button);
|
||||
}
|
||||
/* report issue link */
|
||||
.issue-button {
|
||||
display: initial;
|
||||
vertical-align: -webkit-baseline-middle;
|
||||
font-size: 0.8em;
|
||||
width: fit-content;
|
||||
margin-left: 210px;
|
||||
}
|
||||
#wallpaper-select > div.main-playlistEditDetailsModal-imageDropDownContainer > button > svg,
|
||||
#wallpaper-select > div.main-playlistEditDetailsModal-imageChangeButton > div > button > div {
|
||||
fill: var(--spice-text)
|
||||
}
|
||||
#wallpaper-select > div.main-playlistEditDetailsModal-imageChangeButton > div > button {
|
||||
border-radius: 10px;
|
||||
}
|
||||
Reference in New Issue
Block a user