add funtionality for #62

dribbblish-dynamic.js

@@ -365,14 +365,14 @@ function pickCoverColor(img) {
 
 function hookCoverChange(pick) {
     waitForElement([".cover-art-image"], (queries) => {
-        coverListenerInstalled = true
+        coverListenerInstalled = true;
-        if (pick && queries[0].complete && queries[0].naturalHeight !== 0) pickCoverColor(queries[0])
+        if (pick && queries[0].complete && queries[0].naturalHeight !== 0) pickCoverColor(queries[0]);
-        queries[0].addEventListener('load', function() {
+        queries[0].addEventListener("load", function () {
             try {
-                pickCoverColor(queries[0])
+                pickCoverColor(queries[0]);
             } catch (error) {
-                console.log(error)
+                console.error(error);
-                setTimeout(pickCoverColor, 300, queries[0])
+                setTimeout(pickCoverColor, 300, queries[0]);
             }
         });
     });
@@ -382,28 +382,31 @@ hookCoverChange(false);
 
 (function Startup() {
     if (!Spicetify.showNotification) {
-        setTimeout(Startup, 300)
+        setTimeout(Startup, 300);
-        return
+        return;
     }
     // Check latest release
-    fetch('https://api.github.com/repos/JulienMaille/dribbblish-dynamic-theme/releases/latest').then(response => {
+    fetch("https://api.github.com/repos/JulienMaille/dribbblish-dynamic-theme/releases/latest")
-        return response.json()
+        .then((response) => {
-    }).then(data => {
+            return response.json();
+        })
+        .then((data) => {
             if (data.tag_name > current) {
-            upd = document.createElement("div")
+                upd = document.createElement("div");
-            upd.innerText = `Theme UPD v${data.tag_name} avail.`
+                upd.innerText = `Theme UPD v${data.tag_name} avail.`;
-            upd.classList.add("ellipsis-one-line", "main-type-finale")
+                upd.classList.add("ellipsis-one-line", "main-type-finale");
-            upd.setAttribute("title", `Changes: ${data.name}`)
+                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").append(upd);
-            document.querySelector(".main-userWidget-box").classList.add("update-avail")
+                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.")
+        .catch((err) => {
-})()
+            // Do something for an error here
+            console.error(err);
+        });
+})();
 
 /* translucid background cover */
 document.styleSheets[0].insertRule(`

dribbblish.js

@@ -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) {

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 {