From: Chris Fulljames <christianfulljames@gmail.com>
Date: Sat, 22 Feb 2025 23:56:08 +0000 (-0500)
Subject: Visual updates on home page/player
X-Git-Url: https://littlesong.place/gitweb/?a=commitdiff_plain;h=1bda368f12e380d6ac29bd208fdab92ed6025c1b;p=littlesongplace.git

Visual updates on home page/player
---

diff --git a/main.py b/main.py
index c146379..77a777a 100644
--- a/main.py
+++ b/main.py
@@ -2,6 +2,7 @@ import base64
 import json
 import logging
 import os
+import random
 import shutil
 import sqlite3
 import subprocess
@@ -62,9 +63,29 @@ if "DATA_DIR" in os.environ:
 
 @app.route("/")
 def index():
-    users = [row["username"] for row in query_db("select username from users order by username asc")]
+    users = query_db("select * from users order by username asc")
+    users = [dict(row) for row in users]
+    for user in users:
+        user["has_pfp"] = user_has_pfp(user["userid"])
+        user["bgcolor"] = user["bgcolor"] or BGCOLOR
+        user["fgcolor"] = user["fgcolor"] or FGCOLOR
+        user["accolor"] = user["accolor"] or ACCOLOR
+
+    titles = [
+            ("Little Song Place", 2.0),
+            ("Lumpy Space Princess", 0.2),
+            ("Language Server Protocol", 0.1),
+            ("Liskov Substitution Principle", 0.1),
+            ("Louisiana State Police", 0.1),
+            ("Local Strategic Partnership", 0.1),
+            ("Light Switch Plate", 0.1),
+            ("Lightest Supersymmetric Particle", 0.1),
+    ]
+    titles, weights = zip(*titles)
+    title = random.choices(titles, weights)[0]
+
     songs = Song.get_latest(50)
-    return render_template("index.html", users=users, songs=songs)
+    return render_template("index.html", users=users, songs=songs, page_title=title)
 
 @app.get("/signup")
 def signup_get():
@@ -182,7 +203,7 @@ def users_profile(profile_username):
             accolor=profile_data["accolor"] or ACCOLOR,
             playlists=plist_data,
             songs=songs,
-            user_has_pfp=(get_user_images_path(profile_userid)/"pfp.jpg").exists(),
+            user_has_pfp=user_has_pfp(profile_userid),
             is_profile_song_list=True)
 
 @app.post("/edit-profile")
@@ -926,6 +947,9 @@ def get_current_user_playlists():
 
     return plist_data
 
+def user_has_pfp(userid):
+    return (get_user_images_path(userid)/"pfp.jpg").exists()
+
 @app.context_processor
 def inject_global_vars():
     return dict(
@@ -1069,8 +1093,8 @@ class Song:
             song_tags = [t["tag"] for t in tags[sd["songid"]] if t["tag"]]
             song_collabs = [c["name"] for c in collabs[sd["songid"]] if c["name"]]
             created = datetime.fromisoformat(sd["created"]).astimezone().strftime("%Y-%m-%d")
-            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))
+            has_pfp = user_has_pfp(sd["userid"])
+            songs.append(cls(sd["songid"], sd["userid"], sd["username"], sd["title"], sanitize_user_text(sd["description"]), created, song_tags, song_collabs, has_pfp))
         return songs
 
     @classmethod
diff --git a/static/player.js b/static/player.js
index 34f0939..cdee152 100644
--- a/static/player.js
+++ b/static/player.js
@@ -42,6 +42,7 @@ function playCurrentSong() {
 
     var title = document.getElementById("player-title");
     title.textContent = songData.title;
+    title.href = `/song/${songData.userid}/${songData.songid}?action=view`;
 
     var separator = document.getElementById("player-info-sep");
     separator.hidden = false;
diff --git a/static/styles.css b/static/styles.css
index bf0eef1..cc48dc6 100644
--- a/static/styles.css
+++ b/static/styles.css
@@ -103,11 +103,31 @@ div.page-header {
 
 .profile-link {
     font-weight: bold;
+    text-decoration: none;
     /* color: var(--purple); */
 }
 
+.user-list {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px;
+}
+
 .user-list-entry {
-    padding: 5px;
+    background: var(--yellow);
+    border-radius: 10px;
+    box-shadow: 0px 0px 5px 0px;
+    height: 48px;
+
+    display: flex;
+    align-items: center;
+    text-decoration: none;
+}
+
+.user-list-entry span {
+    line-height: 32px;
+    padding: 10px;
+    font-weight: bold;
 }
 
 /* Sliders (e.g. volume) */
@@ -308,6 +328,10 @@ div.song-info {
     }
 }
 
+.song-title a {
+    text-decoration: none;
+}
+
 div.song-buttons {
     display: flex;
     gap: 10px;
@@ -403,6 +427,10 @@ div.player-info {
     /*padding: 0px 10px;*/
 }
 
+#player-title {
+    text-decoration: none;
+}
+
 .player-volume {
     display: flex;
     flex-direction: row;
diff --git a/templates/base.html b/templates/base.html
index 2189ea0..e940141 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -66,7 +66,7 @@
             <div class="player" id="player" hidden>
                 <div class="player-info">
                     <img id="player-pfp" class="small-pfp" src="" onerror="this.style.display = 'none'">
-                    <span id="player-title">Not Playing</span>
+                    <a id="player-title">Not Playing</a>
                     <span id="player-info-sep" hidden>-</span>
                     <a id="player-artist" class="profile-link" hidden></a>
                     <span id="player-collabs"></span>
diff --git a/templates/index.html b/templates/index.html
index 461c44a..6a0875c 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -1,6 +1,6 @@
 {% extends "base.html" %}
 
-{% block title %}Little Song Place{% endblock %}
+{% block title %}{{ page_title }}{% endblock %}
 
 {% block body %}
 
@@ -19,10 +19,16 @@ better, I'm open to any thoughts or feedback you have!  Just send me
 <h2>Profiles</h2>
 <p>Check out the music of the fine folks below!{% if not session["userid"] %}  If you create an account, you'll show up here too.{% endif %}</p>
 
-{% for user in users %}
-<a href="/users/{{ user }}" class="profile-link user-list-entry">{{ user }}</a>
-
-{% endfor %}
+<div class="user-list">
+    {% for user in users %}
+    <a href="/users/{{ user['username'] }}" class="user-list-entry" style="--yellow:{{ user['bgcolor'] }};--black:{{ user['fgcolor'] }};--purple:{{ user['accolor'] }};">
+        {% if user['has_pfp'] -%}
+        <img class="small-pfp" src="/pfp/{{ user['userid'] }}" />
+        {%- endif %}
+        <span>{{ user['username'] }}</span>
+    </a>
+    {% endfor %}
+</div>
 
 <h2>Recently Uploaded Songs</h2>
 <p>Listen to all the newest tunes!</p>
diff --git a/templates/news.html b/templates/news.html
index 5f6a196..185b802 100644
--- a/templates/news.html
+++ b/templates/news.html
@@ -6,11 +6,17 @@
 
 <h1>Site News</h1>
 
-<h2>2025-02-22 - Continuous Playback</h2>
+<h2>2025-02-22 - Musical Continuity</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.
+song!  It will continue playing the songs from the original page until you
+click the play button on a new song.
+<ul>
+    <li>Persistent audio player</li>
+    <li>Profile links on the home page now use profile colors</li>
+    <li>General visual cleanup for song lists</li>
+    <li>You can now click the song title in the player to go to the song page</li>
+</ul>
 
 <h2>2025-02-16 - Playlists</h2>
 <p>