Use user colors for songs and playlists

diff --git a/main.py b/main.py
index 93e5c52be290e57c67b34e8d4866075383f981ce..d848c8f3e77d32266dc21bbdb57d101db1e49e25 100644 (file)
--- a/main.py
+++ b/main.py
@@ -513,10 +513,15 @@ def song(userid, songid):
             song = Song.by_id(songid)
             if song.userid != userid:
                 abort(404)
-
+            
+            user_data = query_db("select * from users where userid = ?", [userid], one=True)
             return render_template(
                     "song.html",
-                    song_list=render_template("song-list.html", songs=[song]), song=song)
+                    song_list=render_template("song-list.html", songs=[song]),
+                    song=song,
+                    user_bgcolor=user_data["bgcolor"],
+                    user_fgcolor=user_data["fgcolor"],
+                    user_accolor=user_data["accolor"])
         except ValueError:
             abort(404)
     else:
@@ -860,6 +865,9 @@ def playlists(playlistid):
             private=plist_data["private"],
             userid=plist_data["userid"],
             username=plist_data["username"],
+            user_bgcolor=plist_data["bgcolor"],
+            user_fgcolor=plist_data["fgcolor"],
+            user_accolor=plist_data["accolor"],
             songs=songs,
             song_list=render_template("song-list.html", songs=songs))
 

diff --git a/templates/playlist.html b/templates/playlist.html
index 2a8088d738bc433a2235db89eb165236f2d545c9..90ef05fb2318d4b68711a7842b1500b5fca8cf78 100644 (file)
--- a/templates/playlist.html
+++ b/templates/playlist.html
@@ -2,6 +2,20 @@
 
 {% block title %}{{ name }}{% endblock %}
 
+{% block head -%}
+<meta property="og:title" content="{{ name }}" />
+<meta property="og:description" content="Playlist by {{ username }}" />
+<script>
+    // Apply user colors
+    document.addEventListener("DOMContentLoaded", (event) => {
+        var rootStyle = document.documentElement.style;
+        {% if user_bgcolor %} rootStyle.setProperty("--yellow", "{{ user_bgcolor }}"); {% endif %}
+        {% if user_fgcolor %} rootStyle.setProperty("--black", "{{ user_fgcolor }}"); {% endif %}
+        {% if user_accolor %} rootStyle.setProperty("--purple", "{{ user_accolor }}"); {% endif %}
+    });
+</script>
+{%- endblock %}
+
 {% block body -%}
 
 <h1>{{ name }}</h1>

diff --git a/templates/song.html b/templates/song.html
index d993b91d7350852e464a9e11cd3247cefa662917..65012ad79aedc3955cf4d4c40ee9d6b2ad45ae2f 100644 (file)
--- a/templates/song.html
+++ b/templates/song.html
@@ -3,6 +3,15 @@
 {% block head %}
 <meta property="og:title" content="{{ song.title }}" />
 <meta property="og:description" content="Song by {{ song.username }}" />
+<script>
+    // Apply user colors
+    document.addEventListener("DOMContentLoaded", (event) => {
+        var rootStyle = document.documentElement.style;
+        {% if user_bgcolor %} rootStyle.setProperty("--yellow", "{{ user_bgcolor }}"); {% endif %}
+        {% if user_fgcolor %} rootStyle.setProperty("--black", "{{ user_fgcolor }}"); {% endif %}
+        {% if user_accolor %} rootStyle.setProperty("--purple", "{{ user_accolor }}"); {% endif %}
+    });
+</script>
 {% endblock %}
 
 {% block title %}{{ song.title }}{% endblock %}