workaround for #73 and fix some playbar colors

package.json

@@ -14,6 +14,7 @@
     "dependencies": {
         "chroma-js": "^2.1.2",
         "jquery": "^3.6.0",
+        "moment": "^2.29.1",
         "node-vibrant": "3.1.4"
     }
 }

src/js/main.js

@@ -1,6 +1,7 @@
 import * as Vibrant from "node-vibrant";
 import chroma from "chroma-js";
 import $ from "jquery";
+import moment from "moment";
 
 import ConfigMenu from "./ConfigMenu";
 
@@ -341,8 +342,9 @@ function copyToClipboard(text) {
 }
 
 /* js */
-function getAlbumInfo(uri) {
+async function getAlbumRelease(uri) {
-    return Spicetify.CosmosAsync.get(`hm://album/v1/album-app/album/${uri}/desktop`);
+    const info = await Spicetify.CosmosAsync.get(`hm://album/v1/album-app/album/${uri}/desktop`);
+    return { year: info.year, month: (info.month ?? 1) - 1, day: info.day ?? 0 };
 }
 
 function isLight(hex) {
@@ -538,10 +540,10 @@ function updateColors(textColHex, sideColHex, checkDarkMode = true) {
     if (checkDarkMode) checkDarkLightMode([textColHex, sideColHex]);
 }
 
-let nearArtistSpan;
-let nearArtistSpanText = "";
 let coverListenerInstalled = false;
 async function songchange() {
+    if (!document.querySelector(".main-trackInfo-container")) return setTimeout(songchange, 300);
+
     try {
         // warning popup
         if (Spicetify.Platform.PlatformData.client_version_triple < "1.1.68") Spicetify.showNotification(`Your version of Spotify ${Spicetify.Platform.PlatformData.client_version_triple}) is un-supported`);
@@ -549,6 +551,14 @@ async function songchange() {
         console.error(err);
     }
 
+    if (!document.getElementById("main-trackInfo-year")) {
+        const el = document.createElement("div");
+        el.id = "main-trackInfo-year";
+        el.classList.add("main-trackInfo-release", "ellipsis-one-line", "main-type-finale");
+        document.querySelector(".main-trackInfo-container").append(el);
+    }
+    const albumInfoSpan = document.getElementById("main-trackInfo-year");
+
     let album_uri = Spicetify.Player.data.track.metadata.album_uri;
     let bgImage = Spicetify.Player.data.track.metadata.image_url;
     if (bgImage === undefined) {
@@ -560,25 +570,20 @@ async function songchange() {
     if (!coverListenerInstalled) hookCoverChange(true);
 
     if (album_uri !== undefined && !album_uri.includes("spotify:show")) {
-        const albumInfo = await getAlbumInfo(album_uri.replace("spotify:album:", ""));
+        moment.locale(Spicetify.Locale.getLocale());
-
+        const albumDate = moment(await getAlbumRelease(album_uri.replace("spotify:album:", "")));
-        let album_date = new Date(albumInfo.year, (albumInfo.month || 1) - 1, albumInfo.day || 0);
+        const albumLink = `<a title="${Spicetify.Player.data.track.metadata.album_title}" href="${album_uri}" data-uri="${album_uri}" data-interaction-target="album-name" class="tl-cell__content">${Spicetify.Player.data.track.metadata.album_title}</a>`;
-        let recent_date = new Date();
+        albumInfoSpan.innerHTML = `${albumLink} • ${albumDate.format(moment().diff(albumDate, "months") <= 6 ? "MMM YYYY" : "YYYY")}`;
-        recent_date.setMonth(recent_date.getMonth() - 6);
-        album_date = album_date.toLocaleString("default", album_date > recent_date ? { year: "numeric", month: "short" } : { year: "numeric" });
-        let album_link = '<a title="' + Spicetify.Player.data.track.metadata.album_title + '" href="' + album_uri + '" data-uri="' + album_uri + '" data-interaction-target="album-name" class="tl-cell__content">' + Spicetify.Player.data.track.metadata.album_title + "</a>";
-
-        nearArtistSpanText = album_link + " • " + album_date;
     } else if (Spicetify.Player.data.track.uri.includes("spotify:episode")) {
         // podcast
         bgImage = bgImage.replace("spotify:image:", "https://i.scdn.co/image/");
-        nearArtistSpanText = Spicetify.Player.data.track.metadata.album_title;
+        albumInfoSpan.innerHTML = Spicetify.Player.data.track.metadata.album_title;
     } else if (Spicetify.Player.data.track.metadata.is_local == "true") {
         // local file
-        nearArtistSpanText = Spicetify.Player.data.track.metadata.album_title;
+        albumInfoSpan.innerHTML = Spicetify.Player.data.track.metadata.album_title;
     } else if (Spicetify.Player.data.track.provider == "ad") {
         // ad
-        nearArtistSpanText = "advertisement";
+        albumInfoSpan.innerHTML = "Advertisement";
         coverListenerInstalled = false;
         return;
     } else {
@@ -587,18 +592,6 @@ async function songchange() {
         setTimeout(songchange, 200);
     }
 
-    if (document.querySelector("#main-trackInfo-year") === null) {
-        waitForElement([".main-trackInfo-container"], (queries) => {
-            nearArtistSpan = document.createElement("div");
-            nearArtistSpan.id = "main-trackInfo-year";
-            nearArtistSpan.classList.add("main-trackInfo-artists", "ellipsis-one-line", "main-type-finale");
-            nearArtistSpan.innerHTML = nearArtistSpanText;
-            queries[0].append(nearArtistSpan);
-        });
-    } else {
-        nearArtistSpan.innerHTML = nearArtistSpanText;
-    }
-
     $("html").css("--image-url", `url("${bgImage}")`);
 }
 

src/styles/main.scss

@@ -676,6 +676,10 @@ input:hover:not([disabled]):not(:active) ~ .x-toggle-indicatorWrapper {
     font-weight: 500;
 }
 
+.main-trackInfo-release > a {
+    color: var(--spice-subtext);
+}
+
 .main-topBar-topbarContent .main-playButton-PlayButton {
     --size: 35px !important;
 }
@@ -859,10 +863,24 @@ li.GlueDropTarget {
     flex: 1;
     width: auto;
     min-width: unset !important;
+
+    & span {
+        display: block !important;
+        color: var(--spice-subtext);
+    }
 }
 
 .main-nowPlayingWidget-nowPlaying {
     justify-content: center;
+
+    // Workaround for #73 (https://github.com/JulienMaille/dribbblish-dynamic-theme/issues/73)
+    & button {
+        color: var(--spice-subtext);
+
+        &:hover {
+            color: var(--spice-text);
+        }
+    }
 }
 
 .player-controls {