diff --git a/dribbblish-dynamic.js b/dribbblish-dynamic.js index e675867..54a5409 100644 --- a/dribbblish-dynamic.js +++ b/dribbblish-dynamic.js @@ -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(` diff --git a/dribbblish.js b/dribbblish.js index 19b035c..d3efb30 100644 --- a/dribbblish.js +++ b/dribbblish.js @@ -66,7 +66,7 @@ class ConfigMenu { elem.setAttribute("type", options.type); elem.innerHTML = /* html */ `

${options.name}

- + @@ -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) { diff --git a/user.css b/user.css index 80ddd0e..db53229 100644 --- a/user.css +++ b/user.css @@ -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 {