Skip to content

Commit

Permalink
resolves #158 (#160)
Browse files Browse the repository at this point in the history 
* improve dependency loading

* Update Spicetify version to 2.27.2

* add to playlist modal color

* fix: filter equalisers

* fix: modla colors -> dialogs
  • Loading branch information
@ohitstom
ohitstom authored Nov 26, 2023
1 parent 9f00d35 commit 6e86f94
Show file tree
Hide file tree
Showing 5 changed files with 147 additions and 88 deletions.
2 changes: 1 addition & 1 deletion Comfy/app.css
View file

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions Comfy/app.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,6 +64,7 @@
// Filtering
.main-trackList-playingIcon,
.view-homeShortcutsGrid-playingIcon,
[src*="equaliser"],
.x-settings-equalizerPanelCanvas {
filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(1181%) hue-rotate(346deg) brightness(101%) contrast(105%) !important;
border-radius: 0 !important;
Expand Down
3 changes: 2 additions & 1 deletion Comfy/assets/_snippets.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,8 @@
--spice-rgb-sidebar: var(--spice-rgb-main);
}
&:has(#main.Comfy-Dark-Modals-Snippet) {
.ABD0FGjBGqGZG33bP7Lc {
.ABD0FGjBGqGZG33bP7Lc,
.main-duplicateTrackModal-container {
background-color: var(--spice-main);
color: var(--spice-text);
}
Expand Down
227 changes: 142 additions & 85 deletions Comfy/theme.script.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ torefactor:
setTimeout(comfy, 10);
return;
}
console.debug("[Comfy-Event]: Dependencies loaded");
console.debug("[Comfy-Event]: Global Dependencies loaded");

// Initialize Config
let config = JSON.parse(localStorage.getItem("comfy:config") || "{}");
Expand Down Expand Up @@ -75,12 +75,16 @@ torefactor:
secondaryImage.className = "secondaryImage";
frame.append(mainImage, secondaryImage);

waitForElement(".under-main-view").then(underMainView => {
console.debug("[Comfy-Event]: Banner Frame Added");
underMainView.appendChild(frame);
});
await waitForDeps(["Spicetify.Platform"], () => Spicetify.Platform.History.listen(updateBanner));
await waitForDeps(["Spicetify.Player"], () => Spicetify.Player.addEventListener("songchange", updateBanner));
waitForDeps(
".under-main-view",
underMainView => {
console.debug("[Comfy-Event]: Banner Frame Added");
underMainView.appendChild(frame);
},
true
);
waitForDeps("Spicetify.Platform", () => Spicetify.Platform.History.listen(updateBanner));
waitForDeps("Spicetify.Player", () => Spicetify.Player.addEventListener("songchange", updateBanner));
updateBanner();

// React components
Expand Down Expand Up @@ -289,9 +293,16 @@ torefactor:

setConfig(name, state);
if (state || !startup) {
console.debug(`[Comfy-Callback]: ${name} =`, state);
document.getElementById("main")?.classList.toggle(name, state);
callback?.(state);
waitForDeps(
"main",
main => {
console.debug(`[Comfy-Callback]: ${name} =`, state);
main.classList.toggle(name, state);
callback?.(state);
},
true,
"getElementById"
);
}
}, [state]);

Expand Down Expand Up @@ -482,9 +493,15 @@ torefactor:
description: "Extra tweaks to complete specific color schemes",
options: ["nord", "mono", "kitty"],
callback: (name, value, options, defaultVal) => {
const main = document.getElementById("main");
main.classList.remove(...options.map(option => `Comfy-${option}-Snippet`));
if (value !== defaultVal) main.classList.add(`Comfy-${value}-Snippet`);
waitForDeps(
"main",
main => {
main.classList.remove(...options.map(option => `Comfy-${option}-Snippet`));
if (value !== defaultVal) main.classList.add(`Comfy-${value}-Snippet`);
},
true,
"getElementById"
);
}
},
{
Expand All @@ -495,9 +512,15 @@ torefactor:
defaultVal: "off",
options: ["off", "normal", "reverse"],
callback: (name, value, options, defaultVal) => {
const main = document.getElementById("main");
main.classList.remove(...options.map(option => `${name}-${option}`));
if (value !== defaultVal) main.classList.add(`${name}-${value}`);
waitForDeps(
"main",
main => {
main.classList.remove(...options.map(option => `${name}-${option}`));
if (value !== defaultVal) main.classList.add(`${name}-${value}`);
},
true,
"getElementById"
);
}
},
{
Expand All @@ -508,28 +531,37 @@ torefactor:
defaultVal: "light",
options: ["light", "dark"],
callback: (name, value, options, defaultVal) => {
const main = document.getElementById("main");
const customXpui = document.getElementById("/xpui.css");

if (value === defaultVal && customXpui) {
customXpui.remove();
main.classList.remove(`Comfy-${name}-Snippet`);
}
waitForDeps(
"main",
main => {
const customXpui = document.getElementById("/xpui.css");

if (value === defaultVal && customXpui) {
customXpui.remove();
main.classList.remove(`Comfy-${name}-Snippet`);
}

if (value !== defaultVal && !customXpui) {
fetch("xpui.css")
.then(res => res.text())
.then(text => {
const result = text.replace(/(\.encore-dark-theme,\.encore-dark-theme)/g, ".GenericModal__overlay .encore-light-theme,$1");

const newStyle = document.createElement("style");
newStyle.textContent = result;
newStyle.id = "/xpui.css";
document.head.appendChild(newStyle);
main.classList.add(`Comfy-${name}-Snippet`);
})
.catch(e => console.error(`[Comfy-Error]: ${name}`, e));
}
if (value !== defaultVal && !customXpui) {
fetch("xpui.css")
.then(res => res.text())
.then(text => {
const result = text.replace(
/(\.encore-dark-theme,\.encore-dark-theme)/g,
".GenericModal__overlay .encore-light-theme,dialog .encore-light-theme,$1"
);

const newStyle = document.createElement("style");
newStyle.textContent = result;
newStyle.id = "/xpui.css";
document.head.appendChild(newStyle);
main.classList.add(`Comfy-${name}-Snippet`);
})
.catch(e => console.error(`[Comfy-Error]: ${name}`, e));
}
},
true,
"getElementById"
);
}
}
]),
Expand All @@ -541,11 +573,12 @@ torefactor:
title: "Application Title",
defaultVal: Spicetify.AppTitle?.get(),
desc: "Change the title of the application, leave blank to reset",
callback: async value => {
await waitForDeps(["Spicetify.Platform.UserAPI"]);
const productState = Spicetify.Platform.UserAPI._product_state || Spicetify.Platform.UserAPI._product_state_service;
await productState.delOverridesValues({ keys: ["name"] });
if (value) await productState.putOverridesValues({ pairs: { name: value } });
callback: value => {
waitForDeps("Spicetify.Platform.UserAPI", async () => {
const productState = Spicetify.Platform.UserAPI._product_state || Spicetify.Platform.UserAPI._product_state_service;
await productState.delOverridesValues({ keys: ["name"] });
if (value) await productState.putOverridesValues({ pairs: { name: value } });
});
}
},
{
Expand Down Expand Up @@ -637,8 +670,15 @@ torefactor:
defaultVal: true,
callback: value => {
if (!value) {
document.getElementById("main").classList.remove("Home-Header-Snippet");
document.documentElement.style.setProperty("--home-header-color", "");
waitForDeps(
"main",
main => {
main.classList.remove("Home-Header-Snippet");
document.documentElement.style.setProperty("--home-header-color", "");
},
true,
"getElementById"
);
}
},
items: [
Expand All @@ -657,13 +697,19 @@ torefactor:
Spicetify.React.createElement("li", null, "rgba (0, 0, 0, 1)")
),
callback: (value, name) => {
const main = document.getElementById("main");
main.classList.remove(name);
document.documentElement.style.setProperty("--home-header-color", "");
if (value !== "") {
document.documentElement.style.setProperty("--home-header-color", value);
main.classList.add(name);
}
waitForDeps(
"main",
main => {
main.classList.remove(name);
document.documentElement.style.setProperty("--home-header-color", "");
if (value !== "") {
document.documentElement.style.setProperty("--home-header-color", value);
main.classList.add(name);
}
},
true,
"getElementById"
);
}
}
]
Expand All @@ -674,12 +720,17 @@ torefactor:
title: "Move Topbar Inside Titlebar",
defaultVal: false,
callback: value => {
const grid = value
? document.querySelector(".Root__top-container")
: document.querySelector(".Root__top-bar") ?? document.querySelector(".Root__main-view");
const topbar = document.querySelector(".main-topBar-container");

grid.insertBefore(topbar, grid.firstChild);
waitForDeps(
[".Root__top-container", ".main-topBar-container"],
async elements => {
const [container, topbar] = elements;
const entryPoint = document.querySelector(".Root__top-bar") ?? document.querySelector(".Root__main-view");
const grid = value ? container : entryPoint;

grid.insertBefore(topbar, grid.firstChild);
},
true
);
}
},
{
Expand Down Expand Up @@ -1042,7 +1093,7 @@ torefactor:
};

// Settings Button + Modal
await waitForDeps(["Spicetify.Topbar.Button"], () => {
waitForDeps("Spicetify.Topbar.Button", () => {
new Spicetify.Topbar.Button(
"Comfy Settings",
`<svg viewBox="0 0 262.394 262.394" style="scale: 0.5; fill: currentcolor"><path d="M245.63,103.39h-9.91c-2.486-9.371-6.197-18.242-10.955-26.432l7.015-7.015c6.546-6.546,6.546-17.159,0-23.705 l-15.621-15.621c-6.546-6.546-17.159-6.546-23.705,0l-7.015,7.015c-8.19-4.758-17.061-8.468-26.432-10.955v-9.914 C159.007,7.505,151.502,0,142.244,0h-22.091c-9.258,0-16.763,7.505-16.763,16.763v9.914c-9.37,2.486-18.242,6.197-26.431,10.954 l-7.016-7.015c-6.546-6.546-17.159-6.546-23.705,0.001L30.618,46.238c-6.546,6.546-6.546,17.159,0,23.705l7.014,7.014 c-4.758,8.19-8.469,17.062-10.955,26.433h-9.914c-9.257,0-16.762,7.505-16.762,16.763v22.09c0,9.258,7.505,16.763,16.762,16.763 h9.914c2.487,9.371,6.198,18.243,10.956,26.433l-7.015,7.015c-6.546,6.546-6.546,17.159,0,23.705l15.621,15.621 c6.546,6.546,17.159,6.546,23.705,0l7.016-7.016c8.189,4.758,17.061,8.469,26.431,10.955v9.913c0,9.258,7.505,16.763,16.763,16.763 h22.091c9.258,0,16.763-7.505,16.763-16.763v-9.913c9.371-2.487,18.242-6.198,26.432-10.956l7.016,7.017 c6.546,6.546,17.159,6.546,23.705,0l15.621-15.621c3.145-3.144,4.91-7.407,4.91-11.853s-1.766-8.709-4.91-11.853l-7.016-7.016 c4.758-8.189,8.468-17.062,10.955-26.432h9.91c9.258,0,16.763-7.505,16.763-16.763v-22.09 C262.393,110.895,254.888,103.39,245.63,103.39z M131.198,191.194c-33.083,0-59.998-26.915-59.998-59.997 c0-33.083,26.915-59.998,59.998-59.998s59.998,26.915,59.998,59.998C191.196,164.279,164.281,191.194,131.198,191.194z"/><path d="M131.198,101.199c-16.541,0-29.998,13.457-29.998,29.998c0,16.54,13.457,29.997,29.998,29.997s29.998-13.457,29.998-29.997 C161.196,114.656,147.739,101.199,131.198,101.199z"/></svg>`,
Expand Down Expand Up @@ -1088,12 +1139,10 @@ torefactor:
);
});

// Preloading settings callbacks
console.debug("[Comfy-Event]: Preloading Settings...");
// Preloading settings
console.debug("[Comfy-Event]: Settings Preload Started");
Spicetify.ReactDOM.render(Spicetify.React.createElement(Content), preloadContainer);

Spicetify.ReactDOM.unmountComponentAtNode(preloadContainer);
console.debug("[Comfy-Event]: Finished Preloading Settings!");

// Functions
function getConfig(key) {
Expand Down Expand Up @@ -1123,44 +1172,52 @@ torefactor:
}
}

function waitForElement(selector) {
return new Promise(resolve => {
const element = document.querySelector(selector);
if (element) resolve(element);
else {
const observer = new MutationObserver(() => {
const updatedElement = document.querySelector(selector);
if (updatedElement) {
observer.disconnect();
resolve(updatedElement);
}
});
observer.observe(document.documentElement, { childList: true, subtree: true });
}
});
}

async function waitForDeps(dependencies, callback) {
async function waitForDeps(dependencies, callback, element = false, elementType = "querySelector", timeout = 5000) {
return new Promise(resolve => {
let allDependenciesLoaded = false;
let startTime = Date.now();

async function checkElements() {
const check = () =>
Array.isArray(dependencies) ? dependencies.every(element => document[elementType](element)) : document[elementType](dependencies);
if (check()) {
callback?.(Array.isArray(dependencies) ? dependencies.map(d => document[elementType](d)) : document[elementType](dependencies));
resolve();
} else {
const observer = new MutationObserver(() => {
if (check()) {
observer.disconnect();
callback?.(Array.isArray(dependencies) ? dependencies.map(d => document[elementType](d)) : document[elementType](dependencies));
resolve();
}
});
observer.observe(document.documentElement, { childList: true, subtree: true });
}
}

async function checkDependencies() {
for (const dependency of dependencies) {
for (const dependency of Array.isArray(dependencies) ? dependencies : [dependencies]) {
if (!eval(dependency)) {
allDependenciesLoaded = false;
setTimeout(checkDependencies, 10);
if (Date.now() - startTime < timeout) {
setTimeout(checkDependencies, 10);
} else {
console.error(`[Comfy-Error]: Dependency Timeout -`, dependencies);
resolve();
}
return;
}
}

if (!allDependenciesLoaded) {
allDependenciesLoaded = true;
if (callback) callback();

callback?.(Array.isArray(dependencies) ? dependencies.map(d => eval(d)) : eval(dependencies));

resolve();
}
}

checkDependencies();
element ? checkElements() : checkDependencies();
});
}

Expand Down
2 changes: 1 addition & 1 deletion README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
</div>
<hr>
<h4> ✅ Supported</h4>
<li>🔥 Spicetify: <code><a href="https://github.com/spicetify/spicetify-cli/releases/tag/v2.27.0">2.27.0</a></code></li>
<li>🔥 Spicetify: <code><a href="https://github.com/spicetify/spicetify-cli/releases/tag/v2.27.2">2.27.2</a></code></li>
<li>🟢 Spotify: <code><a href="https://upgrade.scdn.co/upgrade/client/win32-x86/spotify_installer-1.2.24.756.g7a7fc7f0-1487.exe">1.2.24</a></code></li>
<hr>
</td>
Expand Down

0 comments on commit 6e86f94

Please sign in to comment.