also show spicetify update & fix Info.js

CHANGELOG.md

@@ -11,4 +11,5 @@ Fixed:
 
 Improved:
 - Moved `Hide Ads` into `Main Settings`
-- Added hover tooltips on playlist / folder images. Useful for collapsed sidebar
+- Added hover tooltips on playlist / folder images. Useful for collapsed sidebar
+- Now also shows if a new spicetify-cli update is available (Requires spicetify-cli > 2.7.2)

src/icons/palette.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+    <path fill="currentColor" d="M204.3 5C104.9 24.4 24.8 104.3 5.2 203.4c-37 187 131.7 326.4 258.8 306.7 41.2-6.4 61.4-54.6 42.5-91.7-23.1-45.4 9.9-98.4 60.9-98.4h79.7c35.8 0 64.8-29.6 64.9-65.3C511.5 97.1 368.1-26.9 204.3 5zM96 320c-17.7 0-32-14.3-32-32s14.3-32 32-32 32 14.3 32 32-14.3 32-32 32zm32-128c-17.7 0-32-14.3-32-32s14.3-32 32-32 32 14.3 32 32-14.3 32-32 32zm128-64c-17.7 0-32-14.3-32-32s14.3-32 32-32 32 14.3 32 32-14.3 32-32 32zm128 64c-17.7 0-32-14.3-32-32s14.3-32 32-32 32 14.3 32 32-14.3 32-32 32z"></path>
+</svg>

src/icons/spotify.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512">
+    <path fill="currentColor" d="M248 8C111.1 8 0 119.1 0 256s111.1 248 248 248 248-111.1 248-248S384.9 8 248 8zm100.7 364.9c-4.2 0-6.8-1.3-10.7-3.6-62.4-37.6-135-39.2-206.7-24.5-3.9 1-9 2.6-11.9 2.6-9.7 0-15.8-7.7-15.8-15.8 0-10.3 6.1-15.2 13.6-16.8 81.9-18.1 165.6-16.5 237 26.2 6.1 3.9 9.7 7.4 9.7 16.5s-7.1 15.4-15.2 15.4zm26.9-65.6c-5.2 0-8.7-2.3-12.3-4.2-62.5-37-155.7-51.9-238.6-29.4-4.8 1.3-7.4 2.6-11.9 2.6-10.7 0-19.4-8.7-19.4-19.4s5.2-17.8 15.5-20.7c27.8-7.8 56.2-13.6 97.8-13.6 64.9 0 127.6 16.1 177 45.5 8.1 4.8 11.3 11 11.3 19.7-.1 10.8-8.5 19.5-19.4 19.5zm31-76.2c-5.2 0-8.4-1.3-12.9-3.9-71.2-42.5-198.5-52.7-280.9-29.7-3.6 1-8.1 2.6-12.9 2.6-13.2 0-23.3-10.3-23.3-23.6 0-13.6 8.4-21.3 17.4-23.9 35.2-10.3 74.6-15.2 117.5-15.2 73 0 149.5 15.2 205.4 47.8 7.8 4.5 12.9 10.7 12.9 22.6 0 13.6-11 23.3-23.2 23.3z"></path>
+</svg>

src/js/Info.js

@@ -58,6 +58,7 @@ export default class Info {
         }
 
         this.remove(key);
+        if (info == null) return;
         if (info.text == null && info.icon == null) throw new Error("invalid info");
 
         const elem = document.createElement("div");

src/js/main.js

@@ -8,10 +8,11 @@ import { waitForElement, copyToClipboard, capitalizeFirstLetter, getClosestToNum
 import { default as _Dribbblish } from "./Dribbblish";
 import "./Folders";
 
-import iconArrowDown from "icon/arrow-down";
+import iconPalette from "icon/palette";
 import iconCode from "icon/code";
 import iconWifiSlash from "icon/wifi-slash";
 import iconCog from "icon/cog";
+import iconSpotify from "icon/spotify";
 
 // To expose to external scripts
 const Dribbblish = new _Dribbblish();
@@ -41,16 +42,21 @@ Dribbblish.on("ready", () => {
         description: "Show an icon next to your profile image to open the dribbblish settings",
         defaultValue: true,
         onChange: (val) =>
-            Dribbblish.info[val ? "set" : "remove"]("settings", {
-                icon: iconCog(),
-                color: {
-                    fg: "var(--spice-subtext)",
-                    bg: "rgba(var(--spice-rgb-subtext), calc(0.1 + var(--is_light) * 0.05))"
-                },
-                order: 999,
-                tooltip: "Open Dribbblish Settings",
-                onClick: () => Dribbblish.config.open()
-            })
+            Dribbblish.info.set(
+                "settings",
+                val
+                    ? {
+                          icon: iconCog(),
+                          color: {
+                              fg: "var(--spice-subtext)",
+                              bg: "rgba(var(--spice-rgb-subtext), calc(0.1 + var(--is_light) * 0.05))"
+                          },
+                          order: 999,
+                          tooltip: "Open Dribbblish Settings",
+                          onClick: () => Dribbblish.config.open()
+                      }
+                    : null
+            )
     });
 
     Dribbblish.config.register({
@@ -334,7 +340,7 @@ Dribbblish.on("ready", () => {
         description: `
                 OS: \`${capitalizeFirstLetter(Spicetify.Platform.PlatformData.os_name)} v${Spicetify.Platform.PlatformData.os_version}\`
                 Spotify: \`v${Spicetify.Platform.PlatformData.event_sender_context_information?.client_version_string ?? Spicetify.Platform.PlatformData.client_version_triple}\`
-                Spicetify: \`${Spicetify.version != null ? `v${Spicetify.version}` : "<= v2.7.2"}\`
+                Spicetify: \`${Spicetify.version != null ? `v${Spicetify.version}` : "< v2.7.3"}\`
                 Dribbblish: \`v${process.env.DRIBBBLISH_VERSION}-${process.env.COMMIT_HASH}\`
             `,
         data: "Copy",
@@ -807,9 +813,14 @@ Dribbblish.on("ready", () => {
         fetch("https://api.github.com/repos/JulienMaille/dribbblish-dynamic-theme/releases/latest")
             .then((response) => response.json())
             .then((data) => {
-                const isDev = process.env.DRIBBBLISH_VERSION == "Dev";
-                Dribbblish.info.set("update", isDev || data.tag_name > process.env.DRIBBBLISH_VERSION ? { text: `v${data.tag_name}`, tooltip: "Open Release page to download", icon: iconArrowDown(), onClick: () => window.open("https://github.com/JulienMaille/dribbblish-dynamic-theme/releases/latest", "_blank") } : null);
-                Dribbblish.info.set("dev", isDev ? { tooltip: "Dev build", icon: iconCode() } : null);
+                Dribbblish.info.set("dribbblish-update", data.tag_name > process.env.DRIBBBLISH_VERSION ? { text: `v${data.tag_name}`, tooltip: "Nev Dribbblish version available", icon: iconPalette(), onClick: () => window.open("https://github.com/JulienMaille/dribbblish-dynamic-theme/releases/latest", "_blank") } : null);
+            })
+            .catch(console.error);
+
+        fetch("https://api.github.com/repos/khanhas/spicetify-cli/releases/latest")
+            .then((response) => response.json())
+            .then((data) => {
+                Dribbblish.info.set("spicetify-update", data.tag_name.substring(1) > (Spicetify.version ?? "2.7.2") ? { text: data.tag_name, tooltip: "New Spicetify version available", icon: iconSpotify(), onClick: () => window.open("https://github.com/khanhas/spicetify-cli/releases/latest", "_blank") } : null);
             })
             .catch(console.error);
     }
@@ -817,7 +828,7 @@ Dribbblish.on("ready", () => {
     setInterval(checkForUpdate, 10 * 60 * 1000);
     checkForUpdate();
 
-    // Show "Offline info"
+    // Show "Offline" info
     window.addEventListener("offline", () =>
         Dribbblish.info.set("offline", {
             tooltip: "Offline",
@@ -830,6 +841,10 @@ Dribbblish.on("ready", () => {
         })
     );
     window.addEventListener("online", () => Dribbblish.info.remove("offline"));
+
+    // Show "Dev" info
+    const isDev = process.env.DRIBBBLISH_VERSION == "Dev";
+    Dribbblish.info.set("dev", isDev ? { tooltip: "Dev build", icon: iconCode(), order: 997 } : null);
 });
 
 $("html").css("--warning_message", " ");