dan/dribbblish-dynamic-theme
1
0
Fork 0
mirror of https://github.com/danbulant/dribbblish-dynamic-theme synced 2026-05-24 12:35:05 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

add funtionality for #62

Browse source
This commit is contained in:
Send_Nukez 2021-10-10 04:50:26 +02:00
parent 1ecc7c6b89
commit 13aba2b6c4
3 changed files with 69 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

55
dribbblish-dynamic.js
View file

@ -365,14 +365,14 @@ function pickCoverColor(img) {
function hookCoverChange(pick) {
waitForElement([".cover-art-image"], (queries) => {
coverListenerInstalled = true
if (pick && queries[0].complete && queries[0].naturalHeight !== 0) pickCoverColor(queries[0])
queries[0].addEventListener('load', function() {
coverListenerInstalled = true;
if (pick && queries[0].complete && queries[0].naturalHeight !== 0) pickCoverColor(queries[0]);
queries[0].addEventListener("load", function () {
try {
pickCoverColor(queries[0])
pickCoverColor(queries[0]);
} catch (error) {
console.log(error)
setTimeout(pickCoverColor, 300, queries[0])
console.error(error);
setTimeout(pickCoverColor, 300, queries[0]);
}
});
});
@ -382,28 +382,31 @@ hookCoverChange(false);
(function Startup() {
if (!Spicetify.showNotification) {
setTimeout(Startup, 300)
return
setTimeout(Startup, 300);
return;
}
// Check latest release
fetch('https://api.github.com/repos/JulienMaille/dribbblish-dynamic-theme/releases/latest').then(response => {
return response.json()
}).then(data => {
if (data.tag_name > current) {
upd = document.createElement("div")
upd.innerText = `Theme UPD v${data.tag_name} avail.`
upd.classList.add("ellipsis-one-line", "main-type-finale")
upd.setAttribute("title", `Changes: ${data.name}`)
upd.style.setProperty("color", "var(--spice-button-active)");
document.querySelector(".main-userWidget-box").append(upd)
document.querySelector(".main-userWidget-box").classList.add("update-avail")
new Spicetify.Menu.Item("Update Dribbblish", false, () => window.open("https://github.com/JulienMaille/dribbblish-dynamic-theme/blob/main/README.md#install--update", "_blank")).register();
}
}).catch(err => {
// Do something for an error here
})
Spicetify.showNotification("Applied system " + (systemDark ? "dark" : "light") + " theme.")
})()
fetch("https://api.github.com/repos/JulienMaille/dribbblish-dynamic-theme/releases/latest")
.then((response) => {
return response.json();
})
.then((data) => {
if (data.tag_name > current) {
upd = document.createElement("div");
upd.innerText = `Theme UPD v${data.tag_name} avail.`;
upd.classList.add("ellipsis-one-line", "main-type-finale");
upd.setAttribute("title", `Changes: ${data.name}`);
upd.style.setProperty("color", "var(--spice-button-active)");
document.querySelector(".main-userWidget-box").append(upd);
document.querySelector(".main-userWidget-box").classList.add("update-avail");
new Spicetify.Menu.Item("Update Dribbblish", false, () => window.open("https://github.com/JulienMaille/dribbblish-dynamic-theme/blob/main/README.md#install--update", "_blank")).register();
}
})
.catch((err) => {
// Do something for an error here
console.error(err);
});
})();
/* translucid background cover */
document.styleSheets[0].insertRule(`

21
dribbblish.js
View file

@ -66,7 +66,7 @@ class ConfigMenu {
elem.setAttribute("type", options.type);
elem.innerHTML = /* html */ `
<h2 class="x-settings-title main-type-cello${!options.description ? " no-desc" : ""}" as="h2">${options.name}</h2>
<label class="main-type-mesto" as="label" for="dribbblish-config-input-${options.key}" style="color: var(--spice-subtext);">${options.description}</label>
<label class="main-type-mesto" as="label" for="dribbblish-config-input-${options.key}">${options.description}</label>
<label class="x-toggle-wrapper x-settings-secondColumn">
${options.input}
</label>
@ -336,6 +336,25 @@ waitForElement(["#main"], () => {
}
}
});
DribbblishShared.config.register({
type: "select",
data: ["Dribbblish", "Spotify"],
key: "playerControlsStyle",
name: "Player Controls Style",
description: "Style of the Player Controls. Selecting Spotify basically changes Play / Pause back to the center",
defaultValue: 0,
onChange: (val) => {
switch (val) {
case 0:
document.getElementById("main").setAttribute("player-controls", "dribbblish");
break;
case 1:
document.getElementById("main").setAttribute("player-controls", "spotify");
break;
}
}
});
});
function waitForElement(els, func, timeout = 100) {

21
user.css
View file

@ -836,7 +836,8 @@ li.GlueDropTarget {
#dribbblish-config .dribbblish-config-container {
z-index: 1;
position: relative;
max-width: 80%;
min-width: 400px;
max-width: 30%;
background-color: rgba(var(--spice-rgb-main), 0.9);
backdrop-filter: blur(3px);
padding: 20px 15px;
@ -897,6 +898,7 @@ li.GlueDropTarget {
#dribbblish-config .dribbblish-config-item > .main-type-mesto {
grid-area: description;
height: min-content;
color: var(--spice-subtext);
}
#dribbblish-config .dribbblish-config-item > .x-settings-secondColumn {
@ -957,6 +959,23 @@ li.GlueDropTarget {
color: var(--spice-button);
}
/* Spotify style player bar */
#main[player-controls=spotify] .main-nowPlayingBar-left {
order: 0;
}
#main[player-controls=spotify] .main-nowPlayingBar-center {
order: 1;
}
#main[player-controls=spotify] .main-nowPlayingWidget-nowPlaying {
justify-content: left;
}
#main[player-controls=spotify] .player-controls {
justify-content: center;
}
/** Main container */
.contentSpacing,
.artist-artistDiscography-headerContainer {