diff --git a/package.json b/package.json
index 0e7baab..7b8fe24 100644
--- a/package.json
+++ b/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"
}
}
diff --git a/src/js/main.js b/src/js/main.js
index dcf1c6e..b1da16f 100644
--- a/src/js/main.js
+++ b/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) {
- return Spicetify.CosmosAsync.get(`hm://album/v1/album-app/album/${uri}/desktop`);
+async function getAlbumRelease(uri) {
+ 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:", ""));
-
- let album_date = new Date(albumInfo.year, (albumInfo.month || 1) - 1, albumInfo.day || 0);
- let recent_date = new Date();
- 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 = '' + Spicetify.Player.data.track.metadata.album_title + "";
-
- nearArtistSpanText = album_link + " • " + album_date;
+ moment.locale(Spicetify.Locale.getLocale());
+ const albumDate = moment(await getAlbumRelease(album_uri.replace("spotify:album:", "")));
+ const albumLink = `${Spicetify.Player.data.track.metadata.album_title}`;
+ albumInfoSpan.innerHTML = `${albumLink} • ${albumDate.format(moment().diff(albumDate, "months") <= 6 ? "MMM YYYY" : "YYYY")}`;
} 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}")`);
}
diff --git a/src/styles/main.scss b/src/styles/main.scss
index d7a5308..4e6ffaf 100644
--- a/src/styles/main.scss
+++ b/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 {