update music api to listenbrainz

static/css/bases/base.css

@@ -40,6 +40,8 @@
     --smileos2-box: url(/static/content/smileos/SmileOS_2_Box.webp) 17 3 3 fill / 51px 9px 9px;
     --smileos2-font: 'Ultrafont2';
     --smileos2-emphasis: #FF4343;
+    --line-height: normal;
+    --header-line-height: normal;
 }
 
 body {
@@ -48,6 +50,7 @@ body {
     color: var(--text-color);
     font-size: var(--font-size);
     font-family: var(--font-family);
+    line-height: var(--line-height);
     display: grid;
     grid-template-columns: auto auto;
     grid-template-rows: 1fr;
@@ -58,6 +61,10 @@ body {
     width: 940px;
 }
 
+h1, h2, h3, h4, h5, h6 {
+    line-height: var(--header-line-height);
+}
+
 #sidebar {
     grid-area: sidebar;
     display: flex;

static/css/index.css

@@ -43,7 +43,7 @@
     transform: scale(1.1) rotate(-5deg);
 }
 
-#spotify {
+#listenbrainz {
     background-image: none;
     backdrop-filter: blur(2px) brightness(0.6);
     border: var(--secondary-background-color) 2px solid;
@@ -58,8 +58,8 @@
     flex-direction: column;
 }
 
-#spotify-title {
-    font-size: 1.5rem;
+#listenbrainz-title {
+    font-size: 1.2rem;
     font-weight: 900;
     margin: 0;
     padding: 0;
@@ -67,15 +67,29 @@
     color: white;
 }
 
-#spotify-artist {
+#listenbrainz-artist {
     color: white;
-    font-size: 1rem;
+    font-size: 0.7rem;
     font-weight: 900;
     margin: 0;
     padding: 0;
     mix-blend-mode: difference;
 }
 
+#listenbrainz-live {
+    color: white;
+    font-size: 0.6rem;
+    font-weight: 900;
+    margin: 0;
+    padding: 0;
+    margin-top: auto;
+    margin-left: auto;
+    background-color: gray;
+    border-radius: 30px;
+    padding: 2px 6px;
+    font-family: var(--ultrafont-font);
+}
+
 #button-collection {
     display: flex;
     flex-direction: row;

static/js/base.js

@@ -76,72 +76,32 @@ let last15Chars = "";
 
 document.addEventListener('keydown', function(event) {
     last15Chars += event.key;
-    if (last15Chars.includes("furry")) {
+    if (last15Chars.includes("owo")) {
         console.log("owo, whats this?");
         document.getElementById('furry').style.display = 'block';
         last15Chars = "";
     }
-    if (last15Chars.includes("irken")) {
-        console.log("doom doom doom!");
+    if (last15Chars.includes("doom")) {
+        console.log("Im gonna sing the doom song now");
         document.querySelector(":root").style.setProperty('--font-family', 'Irken');
+        document.querySelector(":root").style.setProperty('--ultrafont-font', 'Irken');
+        document.querySelector(":root").style.setProperty('--smileos2-font', 'Irken');
         document.querySelector(":root").style.setProperty('--title-font', '1.5em');
+        document.querySelector(":root").style.setProperty('--line-height', 'default');
+        document.querySelector(":root").style.setProperty('--header-line-height', 'default');
         last15Chars = "";
     }
-    if (last15Chars.includes("scratch")) {
+    if (last15Chars.includes("kfc")) {
         console.log("space chicken");
         document.querySelector(":root").style.setProperty('--font-family', 'Scratch');
         document.querySelector(":root").style.setProperty('--title-font', '1em');
+        document.querySelector(":root").style.setProperty('--line-height', '120%');
+        document.querySelector(":root").style.setProperty('--header-line-height', '150%');
+        document.querySelector(":root").style.setProperty('--ultrafont-font', 'Scratch');
+        document.querySelector(":root").style.setProperty('--smileos2-font', 'Scratch');
         last15Chars = "";
     }
     while (last15Chars.length >= 15) {
         last15Chars = last15Chars.slice(1);
     }
-});
-
-// Spotify API (now lastfm)
-
-function getSpotify() {
-    fetch('https://api.alfieking.dev/spotify/nowplaying/xz02oolstlvwxqu1pfcua9exz').then(response => {
-        return response.json();
-    }).then(data => {
-        if (data.item == null) {
-            document.getElementById('spotify').style.backgroundImage = "none";
-            document.getElementById('spotify-title').innerHTML = "Spotify is not playing anything";
-            document.getElementById('spotify-artist').innerHTML = ":(";
-            document.getElementById('spotify-link').href = "https://open.spotify.com/";
-            return;
-        }
-        document.getElementById('spotify').style.backgroundImage = "url(" + data.item.album.images[0].url + ")";
-        document.getElementById('spotify-title').innerHTML = data.item.name;
-        document.getElementById('spotify-artist').innerHTML = data.item.artists[0].name;
-        document.getElementById('spotify-link').href = data.item.external_urls.spotify;
-    });
-}
-
-if (document.getElementById('spotify')) {
-    getSpotify();
-    setInterval(getSpotify, 15000);
-}
-
-
-// load buttons
-
-function loadButtons() {
-    fetch('/static/content/buttons/non_link_buttons.txt').then(response => {
-        return response.text();
-    }).then(data => {
-        container = document.getElementById('button-collection');
-        for (let line of data.split('\n')) {
-            if (line == "") {
-                continue;
-            }
-            let img = document.createElement('img');
-            img.src = line;
-            container.appendChild(img);
-        }
-    });
-}
-
-if (document.getElementById('button-collection')) {
-    loadButtons();
-}
+});

static/js/index.js

@@ -0,0 +1,57 @@
+function loadButtons() {
+    fetch('/static/content/buttons/non_link_buttons.txt').then(response => {
+        return response.text();
+    }).then(data => {
+        container = document.getElementById('button-collection');
+        for (let line of data.split('\n')) {
+            if (line == "") {
+                continue;
+            }
+            let img = document.createElement('img');
+            img.src = line;
+            container.appendChild(img);
+        }
+    });
+}
+
+
+function getAlbumArt(songName, artistName) {
+    fetch("/music/metadata?recording_name=" + encodeURIComponent(songName) + "&artist_name=" + encodeURIComponent(artistName)).then(response => response.json()).then(data => {
+        if (Object.keys(data).length > 0) {
+            document.getElementById('listenbrainz').style.backgroundImage = "url(https://coverartarchive.org/release/" + data.release_mbid + "/front)";
+        } else {
+            console.log("No album art found for the given song and artist");
+            document.getElementById('listenbrainz').style.backgroundImage = "url(https://placehold.co/512x512/transparent/777?text=[Insert%20art%20here])";
+        }
+    });    
+}
+
+function getMusic() {
+    fetch("https://api.listenbrainz.org/1/user/acetheking987/playing-now").then(response => response.json()).then(data => {
+        if (data.payload.count != 0) {
+            let song_data =  data.payload.listens[0].track_metadata;
+            getAlbumArt(song_data.track_name, song_data.artist_name);
+            document.getElementById('listenbrainz-title').innerHTML = song_data.track_name;
+            document.getElementById('listenbrainz-artist').innerHTML = song_data.artist_name;
+            document.getElementById('listenbrainz-link').href = "https://listenbrainz.org/user/acetheking987/";
+            document.getElementById('listenbrainz-live').style.backgroundColor = "red";
+            document.getElementById('listenbrainz-live').innerHTML = "Live";
+        } else {
+            fetch("https://api.listenbrainz.org/1/user/acetheking987/listens?count=1").then(response => response.json()).then(data => {
+                if (data.payload.count != 0) {
+                    let song_data =  data.payload.listens[0].track_metadata;
+                    getAlbumArt(song_data.track_name, song_data.artist_name);
+                    document.getElementById('listenbrainz-title').innerHTML = song_data.track_name;
+                    document.getElementById('listenbrainz-artist').innerHTML = song_data.artist_name;
+                    document.getElementById('listenbrainz-link').href = "https://listenbrainz.org/user/acetheking987/";
+                    document.getElementById('listenbrainz-live').style.backgroundColor = "grey";
+                    document.getElementById('listenbrainz-live').innerHTML = "Not Live :<";
+                }
+            });
+        }
+    });
+}
+
+loadButtons();
+getMusic();
+setInterval(getMusic, 15000);