Use song colors in song lists outside profile

diff --git a/main.py b/main.py
index d777b480209c7fa1c17999c80de123a6411839cf..72ef925201f9afd3daf64048b6ff6e4225161237 100644 (file)
--- a/main.py
+++ b/main.py
@@ -802,6 +802,9 @@ class Song:
     description: str
     tags: list[str]
     collaborators: list[str]
+    fgcolor: str
+    bgcolor: str
+    accolor: str
 
     def json(self):
         return json.dumps(vars(self))
@@ -857,7 +860,18 @@ class Song:
         for sd in songs_data:
             song_tags = [t["tag"] for t in tags[sd["songid"]]]
             song_collabs = [c["name"] for c in collabs[sd["songid"]]]
-            songs.append(cls(sd["songid"], sd["userid"], sd["username"], sd["title"], sanitize_user_text(sd["description"]), song_tags, song_collabs))
+            songs.append(cls(
+                sd["songid"],
+                sd["userid"],
+                sd["username"],
+                sd["title"],
+                sanitize_user_text(sd["description"]),
+                song_tags,
+                song_collabs,
+                sd["fgcolor"],
+                sd["bgcolor"],
+                sd["accolor"],
+            ))
 
         return songs
 

diff --git a/static/player.js b/static/player.js
index 868e8dd0d8942a3b7aa5278f1c0fac122a1fc3df..ab0327e8d9696011f3904884008d64875eecdddb 100644 (file)
--- a/static/player.js
+++ b/static/player.js
@@ -158,13 +158,13 @@ document.addEventListener("DOMContentLoaded", (event) => {
     var button = document.getElementById("play-pause-button");
     audio.addEventListener("play", (event) => {
         button.className = "lsp_btn_pause02";
-        button.src = customImage(document.getElementById("lsp_btn_pause02"));
+        button.src = customImage(document.getElementById("lsp_btn_pause02"), button);
     })
 
     // Show play button when audio is paused
     audio.addEventListener("pause", (event) => {
         button.className = "lsp_btn_play02";
-        button.src = customImage(document.getElementById("lsp_btn_play02"));
+        button.src = customImage(document.getElementById("lsp_btn_play02"), button);
     })
 
     // Audio position scrubbing

diff --git a/static/styles.css b/static/styles.css
index 130bc63a5baf9a3fb61b1b7b9b284b3e80d036dd..2d118ba8aa47f2283a32164a06e60feca9e5b6dc 100644 (file)
--- a/static/styles.css
+++ b/static/styles.css
@@ -244,6 +244,7 @@ div.song-list {
 div.song {
     box-shadow: 0px 0px 5px 0px;
     border-radius: 10px;
+    background-color: var(--yellow);
 }
 
 div.song-main {
@@ -262,6 +263,10 @@ div.song-info {
     margin: 10px;
 }
 
+div.song-info-sep {
+    color: var(--black);
+}
+
 /* Artist on separate line for mobile */
 @media screen and (max-width: 480px) {
     div.song-info {
@@ -293,6 +298,10 @@ div.song-buttons {
     width: 32px;
 }
 
+.collab-name {
+    color: var(--black);
+}
+
 div.song-details {
     display: flex;
     flex-direction: column;

diff --git a/templates/base.html b/templates/base.html
index 693afd35127d61016645ea0d0152cbe65675081b..fe17aee320a813287e5d99ed22b4666641671572 100644 (file)
--- a/templates/base.html
+++ b/templates/base.html
@@ -17,19 +17,19 @@
 
         <script>
 
-            function customImage(element) {
+            function customImage(source, target) {
                 // Customize an image by performing a palette swap on the .gif
                 // file.  The source element must contain a data-img-b64 attribute
                 // containing the base64 representation of a .gif file.  The byte
                 // indexes match .gifs from Aseprite, and may not work for all
                 // .gif files.
 
-                var style = window.getComputedStyle(document.body);
+                var style = window.getComputedStyle(target);
                 var bgcolor = style.getPropertyValue("--yellow");
                 var accolor = style.getPropertyValue("--purple");
 
                 // Convert base64 string to Uint8Array so we can modify it
-                var data = atob(element.dataset.imgB64);
+                var data = atob(source.dataset.imgB64);
                 var bytes = Uint8Array.from(data, c => c.charCodeAt(0));
 
                 // Replace background color palette bytes in gif file
@@ -52,9 +52,9 @@
             function updateImageColors() {
                 // Perform a palette swap on all gifs based on current page colors
 
-                document.querySelectorAll(".img-data").forEach(e => {
-                    document.querySelectorAll(`.${e.id}`).forEach(t => {
-                        t.src = customImage(e);
+                document.querySelectorAll(".img-data").forEach(s => {
+                    document.querySelectorAll(`.${s.id}`).forEach(t => {
+                        t.src = customImage(s, t);
                     });
                 });
             }

diff --git a/templates/song-list.html b/templates/song-list.html
index 7d391763827077dd8feb3cf084b40a1b157ef6e3..43ab39bd6c2933f96e5e66656ea62f1474d9240b 100644 (file)
--- a/templates/song-list.html
+++ b/templates/song-list.html
@@ -1,6 +1,6 @@
 <div class="song-list">
 {% for song in songs %}
-    <div class="song" data-song="{{ song.json() }}">
+<div class="song" style="{% if song.bgcolor %}--yellow: {{ song.bgcolor }};{% endif %} {% if song.fgcolor %}--black: {{ song.fgcolor }};{% endif %} {% if song.accolor %}--purple: {{ song.accolor }};{% endif %}" data-song="{{ song.json() }}">
         <div class="song-main">
             <!-- Profile Picture -->
             <img class="small-pfp" src="/pfp/{{ song.userid }}" onerror="this.style.display = 'none'" />
@@ -161,14 +161,14 @@ function showDetails(event) {
                 child.hidden = false;
                 event.target.alt = "Hide Details";
                 event.target.className = "lsp_btn_hide02";
-                event.target.src = customImage(document.getElementById("lsp_btn_hide02"));
+                event.target.src = customImage(document.getElementById("lsp_btn_hide02"), event.target);
             }
             else {
                 // Hide details
                 child.hidden = true;
                 event.target.alt = "Show Details";
                 event.target.className = "lsp_btn_show02";
-                event.target.src = customImage(document.getElementById("lsp_btn_show02"));
+                event.target.src = customImage(document.getElementById("lsp_btn_show02"), event.target);
             }
         }
     }