Only update song list when user clicks play

diff --git a/main.py b/main.py
index 0f685651d6f928902b61b8a38097fdd8bf8ca1e4..1d9dd7746f394ce91556ff20bd1f8f4da505e264 100644 (file)
--- a/main.py
+++ b/main.py
@@ -1004,6 +1004,7 @@ class Song:
     created: str
     tags: list[str]
     collaborators: list[str]
+    user_has_pfp: bool
 
     def json(self):
         return json.dumps(vars(self))
@@ -1023,9 +1024,6 @@ class Song:
 
         return song_comments
 
-    def user_has_pfp(self):
-        return (get_user_images_path(self.userid)/"pfp.jpg").exists()
-
     @classmethod
     def by_id(cls, songid):
         songs = cls._from_db("select * from songs inner join users on songs.userid = users.userid where songid = ?", [songid])
@@ -1073,8 +1071,8 @@ class Song:
             song_tags = [t["tag"] for t in tags[sd["songid"]]]
             song_collabs = [c["name"] for c in collabs[sd["songid"]]]
             created = datetime.fromisoformat(sd["created"]).astimezone().strftime("%Y-%m-%d")
-            songs.append(cls(sd["songid"], sd["userid"], sd["username"], sd["title"], sanitize_user_text(sd["description"]), created, song_tags, song_collabs))
-
+            user_has_pfp = (get_user_images_path(sd["userid"])/"pfp.jpg").exists()
+            songs.append(cls(sd["songid"], sd["userid"], sd["username"], sd["title"], sanitize_user_text(sd["description"]), created, song_tags, song_collabs, user_has_pfp))
         return songs
 
     @classmethod

diff --git a/static/player.js b/static/player.js
index 0dc50b6b92157ee21ddb85e5d3eb8f839946b521..34f0939327c57f0d24ebfdc95b0631b50991f2d6 100644 (file)
--- a/static/player.js
+++ b/static/player.js
@@ -3,11 +3,14 @@ var m_songIndex = 0;
 
 // Play a new song from the list in the player
 function play(event) {
-    var songElement = event.target;
-    while (!songElement.classList.contains("song"))
-    {
-        songElement = songElement.parentElement;
+    var songElement = event.target.closest(".song");
+
+    // Update song queue with songs on current page
+    m_allSongs = [];
+    for (const element of document.getElementsByClassName("song")) {
+        m_allSongs.push(element);
     }
+
     m_songIndex = m_allSongs.indexOf(songElement);
     playCurrentSong();
 }
@@ -26,8 +29,16 @@ function playCurrentSong() {
     audio.play();
 
     var pfp = document.getElementById("player-pfp")
-    pfp.style.display = "inline-block";
-    pfp.src = `/pfp/${songData.userid}`
+    var albumImg;
+    if (songData.user_has_pfp) {
+        pfp.style.display = "inline-block";
+        pfp.src = `/pfp/${songData.userid}`;
+        albumImg = `/pfp/${songData.userid}`;
+    }
+    else {
+        pfp.style.display = "none";
+        albumImg = "/static/lsp_notes.png";
+    }
 
     var title = document.getElementById("player-title");
     title.textContent = songData.title;
@@ -49,7 +60,7 @@ function playCurrentSong() {
             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.classList.add("profile-link");
             link.textContent = collabname;
             collabs.appendChild(link);
         }
@@ -60,16 +71,14 @@ function playCurrentSong() {
         }
     }
 
-    //collabs.textContent = songData.collaborators.join(", ")
-
-
     if ("mediaSession" in navigator) {
         navigator.mediaSession.metadata = new MediaMetadata({
             title: songData.title,
             artist: songData.username,
             album: "Little Song Place",
-            artwork: [{src: "/static/lsp_notes.png"}],
+            artwork: [{src: albumImg}],
         });
+
         navigator.mediaSession.setActionHandler('nexttrack', () => {
             songNext();
         });
@@ -199,10 +208,5 @@ document.addEventListener("DOMContentLoaded", (event) => {
     document.getElementById("volume-slider").oninput = function(event) {
         audio.volume = event.target.value;
     }
-
-    // Song queue
-    for (const element of document.getElementsByClassName("song")) {
-        m_allSongs.push(element);
-    }
 });
 

diff --git a/templates/news.html b/templates/news.html
index 27da4fee4b1078ac8e3d79fdf31e5f97c85708c5..5f6a1962f739a70e785eab74eadc4a017590c3ea 100644 (file)
--- a/templates/news.html
+++ b/templates/news.html
@@ -6,6 +6,12 @@
 
 <h1>Site News</h1>
 
+<h2>2025-02-22 - Continuous Playback</h2>
+The song player now persists between pages as you navigate around the site, so
+the music isn't interrupted when you go to someone's profile or comment on a
+song.  It will continue playing the songs from the original page until you
+click play on a new song.
+
 <h2>2025-02-16 - Playlists</h2>
 <p>
 Do you need specific songs in a specific order?  Have I got the feature for

diff --git a/templates/song-list.html b/templates/song-list.html
index 5581ca95d6a7f675405e59bb8050652b12707d11..5efc46c30fbc06add5c1a7b2b86dbd0106a8a6a3 100644 (file)
--- a/templates/song-list.html
+++ b/templates/song-list.html
@@ -3,7 +3,7 @@
     <div class="song" data-song="{{ song.json() }}">
         <div class="song-main">
             <!-- Profile Picture -->
-            {% if song.user_has_pfp() %}
+            {% if song.user_has_pfp %}
             <img class="small-pfp" src="/pfp/{{ song.userid }}" onerror="this.style.display = 'none'" />
             {% endif %}