Add artist to song player and lists

diff --git a/main.py b/main.py
index e5135f079e775a7815f4a914299a29b05c58c8c8..1aeea789f216a26a1d0137ba4afbe872d11817bd 100644 (file)
--- a/main.py
+++ b/main.py
@@ -447,6 +447,7 @@ def gen_key():
 class Song:
     songid: int
     userid: int
+    username: str
     title: str
     description: str
     tags: list[str]
@@ -457,7 +458,7 @@ class Song:
 
     @classmethod
     def by_id(cls, songid):
-        songs = cls._from_db("select * from songs where songid = ?", [songid])
+        songs = cls._from_db("select * from songs inner join users on songs.userid = users.userid where songid = ?", [songid])
         if not songs:
             raise ValueError(f"No song for ID {songid:d}")
 
@@ -465,11 +466,11 @@ class Song:
 
     @classmethod
     def get_all_for_user(cls, userid):
-        return cls._from_db("select * from songs where userid = ? order by created desc", [userid])
+        return cls._from_db("select * from songs inner join users on songs.userid = users.userid where songs.userid = ? order by songs.created desc", [userid])
 
     @classmethod
     def get_all_for_tag(cls, tag):
-        return cls._from_db("select * from song_tags inner join songs on song_tags.songid = songs.songid where tag = ?", [tag])
+        return cls._from_db("select * from song_tags inner join songs on song_tags.songid = songs.songid inner join users on songs.userid = users.userid where tag = ?", [tag])
 
     @classmethod
     def _from_db(cls, query, args=()):
@@ -479,7 +480,7 @@ 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["title"], sd["description"], song_tags, song_collabs))
+            songs.append(cls(sd["songid"], sd["userid"], sd["username"], sd["title"], sd["description"], song_tags, song_collabs))
 
         return songs
 

diff --git a/static/player.js b/static/player.js
index 2e0066205be73905660d428702c9569e8468510e..5fa54e715024306b62f6dfab68411f1c3376094a 100644 (file)
--- a/static/player.js
+++ b/static/player.js
@@ -17,6 +17,17 @@ function playCurrentSong() {
     audio.src = `/song/${songData.userid}/${songData.songid}`;
     audio.currentTime = 0;
     audio.play();
+
+    var title = document.getElementById("player-title");
+    title.textContent = songData.title;
+
+    var separator = document.getElementById("player-info-sep");
+    separator.hidden = false;
+
+    var artist = document.getElementById("player-artist");
+    artist.textContent = songData.username;
+    artist.href = `/users/${songData.username}`;
+    artist.hidden = false;
 }
 
 // Play or pause the current song in the player

diff --git a/static/styles.css b/static/styles.css
index 2b05f7b8b18b1c4c52911c041604ad755eea0bf6..287956a82fbaa50d3768b2dd684813684e3492a2 100644 (file)
--- a/static/styles.css
+++ b/static/styles.css
@@ -7,18 +7,32 @@ div.song {
 /* Song Player */
 div.player {
     position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 100px;
+    border: 3px solid #000;
+    background: #fff;
+}
+
+div.player-info {
+    height: 50%;
     display: flex;
     flex-direction: row;
     flex-wrap: nowrap;
     justify-content: center;
     align-items: center;
     gap: 10px;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    height: 50px;
-    border: 3px solid #000;
-    background: #fff;
+}
+
+div.player-controls {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    justify-content: center;
+    align-items: center;
+    gap: 10px;
+    height: 50%;
 }
 
 a.player-button {

diff --git a/templates/base.html b/templates/base.html
index e42ae1422923963598b54fd8be37f513dafe0adc..0e55125a7ba152d75ebca125a73b4cc288eb1b62 100644 (file)
--- a/templates/base.html
+++ b/templates/base.html
@@ -4,6 +4,7 @@
         <title>{% block title %} Base {% endblock %}</title>
         <link rel="stylesheet" href="/static/styles.css">
         <script src="/static/player.js"></script>
+        <meta name="viewport" content="width=device-width, initial-scale=1">
     </head>
     <body>
         <!-- Navbar -->
@@ -37,19 +38,26 @@
 
         <!-- Song Player -->
         <div class="player">
-            <a href="javascript:songPrevious()" class="player-button">&lt;&lt;</a>
-            <a href="javascript:songPlayPause()" class="player-button">&gt;</a>
-            <a href="javascript:songNext()" class="player-button">&gt;&gt;</a>
-            <div id="player-position">
-                <span id="player-position-bar"></span>
-                <span id="player-position-dot"></span>
+            <div class="player-info">
+                <!-- TODO: Show song title, artist -->
+                <span id="player-title">Not Playing</span>
+                <span id="player-info-sep" hidden>-</span>
+                <a id="player-artist" hidden></span>
+            </div>
+            <div class="player-controls">
+                <a href="javascript:songPrevious()" class="player-button">&lt;&lt;</a>
+                <a href="javascript:songPlayPause()" class="player-button">&gt;</a>
+                <a href="javascript:songNext()" class="player-button">&gt;&gt;</a>
+                <div id="player-position">
+                    <span id="player-position-bar"></span>
+                    <span id="player-position-dot"></span>
+                </div>
+                <span class="player-time" id="player-current-time">0:00</span>
+                <span class="player-time-sep">/</span>
+                <span class="player-time" id="player-total-time">0:00</span>
+                <audio id="player-audio"></audio>
+                <!-- TODO: Volume control -->
             </div>
-            <span class="player-time" id="player-current-time">0:00</span>
-            <span class="player-time-sep">/</span>
-            <span class="player-time" id="player-total-time">0:00</span>
-            <audio id="player-audio"></audio>
-            <!-- TODO: Show song title, artist -->
-            <!-- TODO: Volume control -->
         </div>
     </body>
 </html>

diff --git a/templates/song-list.html b/templates/song-list.html
index 27fb38b9ebd9864b228fe06e4b0d5e6e5eeb9d36..114d72624a64ec8a56d20eb441e8a1a74a5c1b24 100644 (file)
--- a/templates/song-list.html
+++ b/templates/song-list.html
@@ -3,6 +3,9 @@
     <!-- Song Title -->
     <div class="song-title">{{ song.title }}</div>
 
+    <!-- Song Artist -->
+    <a href="/users/{{ song.username }}" class="song-username">{{ song.username }}</a>
+
     <!-- Owner-Specific Buttons (Edit/Delete) -->
     {% if session["userid"] == song.userid %}
     <div class="song-edit-button">

diff --git a/todo.txt b/todo.txt
index 80618358f71b5418736db7ccaea5754515b14044..2e5cbb1a7a63de25b83e95b6fa938357a4356fe7 100644 (file)
--- a/todo.txt
+++ b/todo.txt
@@ -1,7 +1,34 @@
-- automated tests
+PRIORITIES??
+- Player: Show song/artist
+- Player: Use session storage to continue song after load
+- Song List: Show/Hide Details
+- Song List: Show details when song plays, hide after
+- Mobile browser support
+- CSS/Design
+- AJAX pages so songs can play without glitching during navigation
+- Automated Tests
+- RELEASE IT
+- Play Queue:
+    - Add songs
+    - View songs in queue
+    - Remove songs
+    - Reorder songs
+    - Automatically use songs on page when queue ends
+- Playlists:
+    - Create
+    - Play
+    - Remove song
+    - Reorder songs
+    - Delete
+    - Pin to profile
+    - Albums?
+- Comments:
+    - Leave comment
+    - Delete comment
+    - Notifications
+- Song Search
+
 
-- javascript song player:
-    - song queue
 
 - limit input length for form fields (back and front end)
 
@@ -9,7 +36,6 @@
 - admin account(s)
 - logging
 
-- css/design
 
 - playlists
 - homepage activity log