From: Chris Fulljames <christianfulljames@gmail.com>
Date: Sun, 13 Jul 2025 17:44:44 +0000 (-0400)
Subject: Refactor song lists to use macro
X-Git-Url: https://littlesong.place/gitweb/?a=commitdiff_plain;h=639ac0eef414abd19a3ab0b72d54b5005829db56;p=littlesongplace.git

Refactor song lists to use macro
---

diff --git a/src/littlesongplace/static/player.js b/src/littlesongplace/static/player.js
index d1da443..e48bfa5 100644
--- a/src/littlesongplace/static/player.js
+++ b/src/littlesongplace/static/player.js
@@ -175,6 +175,58 @@ function songUpdate() {
     document.getElementById("player-total-time").textContent = getTimeString(audio.duration);
 }
 
+// Shown song details when the "..." button is clicked in a song list
+function showSongDetails(event) {
+    var songElement = event.target.closest(".song");
+    var songDetails = songElement.querySelector(".song-details");
+    var detailsToggle = songElement.querySelector(".details-toggle img");
+    if (songDetails.hidden) {
+        // Show details
+        songDetails.hidden = false;
+        detailsToggle.alt = "Hide Details";
+        detailsToggle.className = "lsp_btn_hide02";
+        detailsToggle.src = customImage(document.getElementById("lsp_btn_hide02"), detailsToggle);
+    }
+    else {
+        // Hide details
+        songDetails.hidden = true;
+        detailsToggle.alt = "Show Details";
+        detailsToggle.className = "lsp_btn_show02";
+        detailsToggle.src = customImage(document.getElementById("lsp_btn_show02"), detailsToggle);
+    }
+    return false;
+}
+
+// Shuffle the songs in a song list
+function shuffleSongList(event) {
+    var songList = event.target.closest(".song-list");
+    var songs = songList.querySelector(".song-list-songs");
+    if (event.target.checked) {
+        // Store original list so it can be restored later
+        songList.dataset.original = songs.innerHTML;
+
+        // Shuffle
+        var songElements = [];
+        while (songs.firstElementChild) {
+            songElements.push(songs.lastElementChild);
+            songs.removeChild(songs.lastElementChild);
+        }
+        for (let i = songElements.length - 1; i >= 0; i --) {
+            const j = Math.floor(Math.random() * (i + 1));
+            [songElements[i], songElements[j]] = [songElements[j], songElements[i]];
+        }
+        for (const child of songElements) {
+            songs.appendChild(child);
+        }
+    }
+    else {
+        // Unshuffle
+        if (songList.dataset.original) {
+            songs.innerHTML = songList.dataset.original;
+        }
+    }
+}
+
 // Add event listeners
 var m_firstLoadPlayer = true;
 document.addEventListener("DOMContentLoaded", (event) => {
diff --git a/src/littlesongplace/templates/base.html b/src/littlesongplace/templates/base.html
index e3a3fdc..253763b 100644
--- a/src/littlesongplace/templates/base.html
+++ b/src/littlesongplace/templates/base.html
@@ -4,7 +4,7 @@
         <title>{% block title %}{% endblock %}</title>
         <link rel="stylesheet" href="/static/styles.css?v=5"/>
         <link rel="icon" type="image/x-icon" href="/static/lsp_notes.png?v=1"/>
-        <script src="/static/player.js?v=4"></script>
+        <script src="/static/player.js?v=5"></script>
         <script src="/static/nav.js?v=4"></script>
         <meta name="viewport" content="width=device-width, initial-scale=1">
 
diff --git a/src/littlesongplace/templates/index.html b/src/littlesongplace/templates/index.html
index 587ff5d..1fc7d0c 100644
--- a/src/littlesongplace/templates/index.html
+++ b/src/littlesongplace/templates/index.html
@@ -33,6 +33,7 @@
 </div>
 
 <h2>hot new tunes</h2>
-{% include "song-list.html" %}
+{%- from "song-macros.html" import song_list %}
+{{ song_list(songs, current_user_playlists) }}
 
 {% endblock %}
diff --git a/src/littlesongplace/templates/jam-event.html b/src/littlesongplace/templates/jam-event.html
index 44a3f95..e891a84 100644
--- a/src/littlesongplace/templates/jam-event.html
+++ b/src/littlesongplace/templates/jam-event.html
@@ -52,7 +52,9 @@
     <br/>
     <br/>
     {% if songs %}<p><small>This event has received {{ songs|length }} {% if songs|length > 1 %}entries{% else %}entry{% endif %}</small></p>{% endif %}
-    {% include "song-list.html" %}
+
+    {%- from "song-macros.html" import song_list %}
+    {{ song_list(songs, current_user_playlists) | indent(4) }}
     {%- endif %}
 
     <h2>Comments</h2>
diff --git a/src/littlesongplace/templates/playlist.html b/src/littlesongplace/templates/playlist.html
index f7a8a60..d9b5ad3 100644
--- a/src/littlesongplace/templates/playlist.html
+++ b/src/littlesongplace/templates/playlist.html
@@ -43,7 +43,8 @@ function hidePlaylistEditor() {
 
 {%- endif %}
 
-{% include "song-list.html" %}
+{%- from "song-macros.html" import song_list -%}
+{{ song_list(songs, current_user_playlists) }}
 
 {% if session["userid"] == userid -%}
 <!-- Drag-and-drop playlist editor -->
diff --git a/src/littlesongplace/templates/profile.html b/src/littlesongplace/templates/profile.html
index 21dc231..1e71c9a 100644
--- a/src/littlesongplace/templates/profile.html
+++ b/src/littlesongplace/templates/profile.html
@@ -180,7 +180,8 @@
     {% endif %}
 
     <!-- Song List -->
-    {% include "song-list.html" %}
+    {%- from "song-macros.html" import song_list -%}
+    {{ song_list(songs, current_user_playlists) | indent(4) }}
 </div>
 
 {% endif %}
diff --git a/src/littlesongplace/templates/song-list.html b/src/littlesongplace/templates/song-list.html
deleted file mode 100644
index b333980..0000000
--- a/src/littlesongplace/templates/song-list.html
+++ /dev/null
@@ -1,93 +0,0 @@
-{% from "song-macros.html" import song_info, song_details %}
-
-<div class="song-list">
-    {% if songs|length > 1 %}
-    <div class="song-list-controls">
-        <label><input type="checkbox" name="shuffle" onchange="shuffleSongList(event)">Shuffle</label>
-    </div>
-    {% endif %}
-
-    <div class="song-list-songs">
-        {% for song in songs %}
-        {%- if not (song.hidden and session['userid'] != song.userid) -%}
-        <div class="song" data-song="{{ song.json() }}">
-            <div class="song-main">
-                <div class="song-list-pfp-container">
-                    {%- if song.user_has_pfp %}
-                    <!-- Profile Picture -->
-                    <img class="small-pfp" src="/pfp/{{ song.userid }}" onerror="this.style.display = 'none'" width="32" height="32" />
-                    {%- endif %}
-                </div>
-
-                {{ song_info(song) | indent(12) }}
-
-                <div class="song-buttons">
-                    <!-- Details Button -->
-                    <button onclick="return showDetails(event)" class="song-list-button details-toggle" title="Toggle Details">
-                        <img class="lsp_btn_show02" alt="Show Details">
-                    </button>
-
-                    <!-- Play Button -->
-                    <button onclick="return play(event)" class="song-list-button" title="Play">
-                        <img class="lsp_btn_play02" alt="Play">
-                    </button>
-                </div>
-            </div>
-            {{ song_details(song, current_user_playlists) | indent(8) }}
-        </div>
-        {%- endif -%}
-        {% endfor %}
-    </div>
-</div>
-
-<script>
-function showDetails(event) {
-    var songElement = event.target.closest(".song");
-    var songDetails = songElement.querySelector(".song-details");
-    var detailsToggle = songElement.querySelector(".details-toggle img");
-    if (songDetails.hidden) {
-        // Show details
-        songDetails.hidden = false;
-        detailsToggle.alt = "Hide Details";
-        detailsToggle.className = "lsp_btn_hide02";
-        detailsToggle.src = customImage(document.getElementById("lsp_btn_hide02"), detailsToggle);
-    }
-    else {
-        // Hide details
-        songDetails.hidden = true;
-        detailsToggle.alt = "Show Details";
-        detailsToggle.className = "lsp_btn_show02";
-        detailsToggle.src = customImage(document.getElementById("lsp_btn_show02"), detailsToggle);
-    }
-    return false;
-}
-
-function shuffleSongList(event) {
-    var songList = event.target.closest(".song-list");
-    var songs = songList.querySelector(".song-list-songs");
-    if (event.target.checked) {
-        // Store original list so it can be restored later
-        songList.dataset.original = songs.innerHTML;
-
-        // Shuffle
-        var songElements = [];
-        while (songs.firstElementChild) {
-            songElements.push(songs.lastElementChild);
-            songs.removeChild(songs.lastElementChild);
-        }
-        for (let i = songElements.length - 1; i >= 0; i --) {
-            const j = Math.floor(Math.random() * (i + 1));
-            [songElements[i], songElements[j]] = [songElements[j], songElements[i]];
-        }
-        for (const child of songElements) {
-            songs.appendChild(child);
-        }
-    }
-    else {
-        // Unshuffle
-        if (songList.dataset.original) {
-            songs.innerHTML = songList.dataset.original;
-        }
-    }
-}
-</script>
diff --git a/src/littlesongplace/templates/song-macros.html b/src/littlesongplace/templates/song-macros.html
index d8b604c..0b8ddf8 100644
--- a/src/littlesongplace/templates/song-macros.html
+++ b/src/littlesongplace/templates/song-macros.html
@@ -75,3 +75,48 @@
     {{ comment_thread(song.threadid, session["userid"], song.userid, song.get_comments()) }}
 </div>
 {% endmacro %}
+
+{% macro song_list_entry(song, current_user_playlists) -%}
+{%- if not (song.hidden and session['userid'] != song.userid) -%}
+<div class="song" data-song="{{ song.json() }}">
+    <div class="song-main">
+        <div class="song-list-pfp-container">
+            {%- if song.user_has_pfp %}
+            <!-- Profile Picture -->
+            <img class="small-pfp" src="/pfp/{{ song.userid }}" onerror="this.style.display = 'none'" width="32" height="32" />
+            {%- endif %}
+        </div>
+        {{ song_info(song) | indent(8) }}
+        <div class="song-buttons">
+            <!-- Details Button -->
+            <button onclick="return showSongDetails(event)" class="song-list-button details-toggle" title="Toggle Details">
+                <img class="lsp_btn_show02" alt="Show Details">
+            </button>
+
+            <!-- Play Button -->
+            <button onclick="return play(event)" class="song-list-button" title="Play">
+                <img class="lsp_btn_play02" alt="Play">
+            </button>
+        </div>
+    </div>
+    {{ song_details(song, current_user_playlists) | indent(4) }}
+</div>
+{%- endif -%}
+{%- endmacro %}
+
+{% macro song_list(songs, current_user_playlists) -%}
+<div class="song-list">
+    {% if songs|length > 1 %}
+    <div class="song-list-controls">
+        <label><input type="checkbox" name="shuffle" onchange="shuffleSongList(event)">Shuffle</label>
+    </div>
+    {% endif %}
+
+    <div class="song-list-songs">
+        {% for song in songs -%}
+        {{ song_list_entry(song, current_user_playlists) | indent(8) }}
+        {%- endfor %}
+    </div>
+</div>
+{%- endmacro %}
+
diff --git a/src/littlesongplace/templates/songs-by-tag.html b/src/littlesongplace/templates/songs-by-tag.html
index 7a3e1c5..6e03269 100644
--- a/src/littlesongplace/templates/songs-by-tag.html
+++ b/src/littlesongplace/templates/songs-by-tag.html
@@ -18,6 +18,7 @@
     </div>
 {% endif %}
 
-{% include "song-list.html" %}
+{% from "song-macros.html" import song_list %}
+{{ song_list(songs, current_user_playlists) }}
 
 {% endblock %}