From 290df59e02eb7d602e1c83e8c1eefaa2bd97fab1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?G=C3=A9rald=20LEBAN?= <gerald.leban0@gmail.com>
Date: Thu, 3 Feb 2022 13:10:56 +0100
Subject: [PATCH 1/2] Add option to display the genre of the current playback

---
 src/js/main.js       | 37 +++++++++++++++++++++++++++++++++++++
 src/styles/main.scss |  6 ++++++
 2 files changed, 43 insertions(+)

diff --git a/src/js/main.js b/src/js/main.js
index 77ec358..41c0280 100644
--- a/src/js/main.js
+++ b/src/js/main.js
@@ -216,6 +216,16 @@ Dribbblish.on("ready", () => {
         onChange: (val) => $("#main").attr("playbar-album-info", val)
     });
 
+    Dribbblish.config.register({
+        area: "Playbar",
+        type: "checkbox",
+        key: "showGenreInfoInPlaybar",
+        name: "Show Genre Info in Playbar",
+        description: "Show genres associated to the current song in the Playbar",
+        defaultValue: true,
+        onChange: (val) => $("#main").attr("playbar-genre-info", val)
+    });
+
     Dribbblish.config.register({
         order: 999,
         type: "select",
@@ -454,6 +464,11 @@ Dribbblish.on("ready", () => {
         return { year: info.year, month: (info.month ?? 1) - 1, day: info.day ?? 1 };
     }
 
+    async function getGenres(uri) {
+        const res = await Spicetify.CosmosAsync.get(`https://api.spotify.com/v1/artists/${uri}`);
+        return res.genres.slice(0, 3)
+    }
+
     function isLight(hex) {
         return chroma(hex).luminance() > 0.5;
     }
@@ -737,7 +752,17 @@ Dribbblish.on("ready", () => {
         }
         const albumInfoSpan = document.getElementById("main-trackInfo-year");
 
+        if (!document.getElementById("main-trackInfo-genre")) {
+            const el = document.createElement("div");
+            el.classList.add("standalone-ellipsis-one-line", "main-type-finale");
+            el.setAttribute("as", "div");
+            el.id = "main-trackInfo-genre";
+            document.querySelector(".main-trackInfo-container").append(el);
+        }
+        const genreInfoSpan = document.getElementById("main-trackInfo-genre");
+
         let album_uri = Spicetify.Player.data.track.metadata.album_uri;
+        let artist_uri = Spicetify.Player.data.track.metadata.artist_uri;
         let bgImage = Spicetify.Player.data.track.metadata.image_url;
         if (bgImage === undefined) {
             bgImage = "/images/tracklist-row-song-fallback.svg";
@@ -755,16 +780,28 @@ Dribbblish.on("ready", () => {
             `;
             const albumDateElem = /* html */ `<span> • <span title="${albumDate.format("L")}">${albumDate.format(moment().diff(albumDate, "months") <= 6 ? "MMM YYYY" : "YYYY")}</span></span>`;
             albumInfoSpan.innerHTML = `${albumLinkElem}${albumDateElem}`;
+
+            const genres = await getGenres(artist_uri.replace("spotify:artist:", ""));
+            genreInfoSpan.innerHTML = `
+                <span>
+                    <span draggable="true">
+                        <span draggable="false" dir="auto">${genres.join(", ")}</span>
+                    </span>
+                </span>
+            `;
         } else if (Spicetify.Player.data.track.uri.includes("spotify:episode")) {
             // podcast
             bgImage = bgImage.replace("spotify:image:", "https://i.scdn.co/image/");
             albumInfoSpan.innerHTML = Spicetify.Player.data.track.metadata.album_title;
+            genreInfoSpan.innerHTML = "";
         } else if (Spicetify.Player.data.track.metadata.is_local == "true") {
             // local file
             albumInfoSpan.innerHTML = Spicetify.Player.data.track.metadata.album_title;
+            genreInfoSpan.innerHTML = "";
         } else if (Spicetify.Player.data.track.provider == "ad") {
             // ad
             albumInfoSpan.innerHTML = "Advertisement";
+            genreInfoSpan.innerHTML = "";
             return;
         } else {
             // When clicking a song from the homepage, songChange is fired with half empty metadata
diff --git a/src/styles/main.scss b/src/styles/main.scss
index 6c490af..bd68fc3 100644
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -668,6 +668,12 @@ html.sidebar-hide-text .GlueDropTarget span {
     }
 }
 
+#main-trackInfo-genre {
+    #main[playbar-genre-info="false"] & {
+        display: none;
+    }
+}
+
 .main-topBar-topbarContent .main-playButton-PlayButton {
     --size: 35px !important;
 }

From c45c5faad04e26bd3e4765a36e6dc6dc2a0b1ace Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?G=C3=A9rald=20LEBAN?= <gerald.leban0@gmail.com>
Date: Thu, 3 Feb 2022 17:01:52 +0100
Subject: [PATCH 2/2] Change description and set default to false

---
 src/js/main.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/js/main.js b/src/js/main.js
index 41c0280..a385ede 100644
--- a/src/js/main.js
+++ b/src/js/main.js
@@ -221,8 +221,8 @@ Dribbblish.on("ready", () => {
         type: "checkbox",
         key: "showGenreInfoInPlaybar",
         name: "Show Genre Info in Playbar",
-        description: "Show genres associated to the current song in the Playbar",
-        defaultValue: true,
+        description: "Show artist's genres in the Playbar",
+        defaultValue: false,
         onChange: (val) => $("#main").attr("playbar-genre-info", val)
     });