diff --git a/src/js/main.js b/src/js/main.js
index 77ec358..f8efa11 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 artist's genres in the Playbar",
+ defaultValue: false,
+ 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 */ ` • ${albumDate.format(moment().diff(albumDate, "months") <= 6 ? "MMM YYYY" : "YYYY")}`;
albumInfoSpan.innerHTML = `${albumLinkElem}${albumDateElem}`;
+
+ const genres = await getGenres(artist_uri.replace("spotify:artist:", ""));
+ genreInfoSpan.innerHTML = `
+
+
+ ${genres.join(", ")}
+
+
+ `;
} 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;
}