Add PFP, collabs to player

diff --git a/static/player.js b/static/player.js
index 81e2d0ed38eb6cfaae3586b82d3457cad6f5ea8b..55544c1578709d15c9322fd8025d4b9889518201 100644 (file)
--- a/static/player.js
+++ b/static/player.js
@@ -25,6 +25,10 @@ function playCurrentSong() {
     audio.currentTime = 0;
     audio.play();
 
+    var pfp = document.getElementById("player-pfp")
+    pfp.style.display = "inline-block";
+    pfp.src = `/pfp/${songData.userid}`
+
     var title = document.getElementById("player-title");
     title.textContent = songData.title;
 
@@ -36,6 +40,29 @@ function playCurrentSong() {
     artist.href = `/users/${songData.username}`;
     artist.hidden = false;
 
+    var collabs = document.getElementById("player-collabs");
+    collabs.textContent = "";
+
+    var collaborators = songData.collaborators;
+    for (i = 0; i < collaborators.length; i ++) {
+        if (collaborators[i].startsWith("@")) {
+            var collabname = collaborators[i].substr(1, collaborators[i].length - 1);
+            var link = document.createElement("a");
+            link.href = `/users/${collabname}`;
+            link.classList.add("profile-link")
+            link.textContent = collabname;
+            collabs.appendChild(link);
+        }
+        else {
+            var name = document.createElement("span");
+            name.textContent = " " + collaborators[i];
+            collabs.appendChild(name);
+        }
+    }
+
+    //collabs.textContent = songData.collaborators.join(", ")
+
+
     if ("mediaSession" in navigator) {
         navigator.mediaSession.metadata = new MediaMetadata({
             title: songData.title,

diff --git a/templates/base.html b/templates/base.html
index 070fa60a1deefedbb80931a4afa82657a11be572..01647d7cb94ca4ff51e48c83796ea2d867a3c4bd 100644 (file)
--- a/templates/base.html
+++ b/templates/base.html
@@ -80,10 +80,11 @@
         <div class="player-container" id="player-container">
             <div class="player" id="player" hidden>
                 <div class="player-info">
-                    <!-- TODO: Show song title, artist -->
+                    <img id="player-pfp" class="small-pfp" src="" onerror="this.style.display = 'none'">
                     <span id="player-title">Not Playing</span>
                     <span id="player-info-sep" hidden>-</span>
                     <a id="player-artist" class="profile-link" hidden></a>
+                    <span id="player-collabs"></span>
                 </div>
                 <div class="player-controls">
                     <button onclick="songPrevious()" class="player-button">

diff --git a/todo.txt b/todo.txt
index 2c6a49013b78bfb026b22bb44f04a570cfc9e976..180861be1d81061ef5e1ae2f19ae7b9aa77bb603 100644 (file)
--- a/todo.txt
+++ b/todo.txt
@@ -1,6 +1,4 @@
 NOW
-- PFP in song list
-- Additional song info in player (collabs, description, tags, pfp)
 - Dark mode/site color customization
 - YouTube importer
 
@@ -23,6 +21,7 @@ SOON
     - Albums?
 
 LATER
+- Show song info for song in player (description, tags)
 - Song/User Search
 - Song sorter for song lists
 - Song downloads