From bb9a436c2a8b44a9c00d7d3fee24948ce59cedc8 Mon Sep 17 00:00:00 2001
From: Chris Fulljames <christianfulljames@gmail.com>
Date: Sat, 11 Jan 2025 14:20:48 -0500
Subject: [PATCH] Static song queue for all songs on page

---
 main.py                  |  4 ++++
 static/player.js         | 41 +++++++++++++++++++++++++++++++++++-----
 templates/song-list.html |  7 ++-----
 todo.txt                 |  3 ++-
 4 files changed, 44 insertions(+), 11 deletions(-)

diff --git a/main.py b/main.py
index 6643997..e5135f0 100644
--- a/main.py
+++ b/main.py
@@ -1,3 +1,4 @@
+import json
 import os
 import shutil
 import sqlite3
@@ -451,6 +452,9 @@ class Song:
     tags: list[str]
     collaborators: list[str]
 
+    def json(self):
+        return json.dumps(vars(self))
+
     @classmethod
     def by_id(cls, songid):
         songs = cls._from_db("select * from songs where songid = ?", [songid])
diff --git a/static/player.js b/static/player.js
index 50e8e27..2e00662 100644
--- a/static/player.js
+++ b/static/player.js
@@ -1,8 +1,20 @@
+var m_allSongs = [];
+var m_songIndex = 0;
+
 // Play a new song from the list in the player
-function play(userid, songid) {
+function play(event) {
+    var song = event.target.parentElement;
+    m_songIndex = m_allSongs.indexOf(song);
+    playCurrentSong();
+}
+
+function playCurrentSong() {
+    var song = m_allSongs[m_songIndex];
+    var songData = JSON.parse(song.dataset.song);
+
     var audio = document.getElementById("player-audio");
     audio.pause();
-    audio.src = `/song/${userid}/${songid}`;
+    audio.src = `/song/${songData.userid}/${songData.songid}`;
     audio.currentTime = 0;
     audio.play();
 }
@@ -20,16 +32,25 @@ function songPlayPause() {
 
 // Play the next song in the queue
 function songNext() {
-    // TODO
+    m_songIndex = (m_songIndex + 1) % m_allSongs.length;
+    playCurrentSong();
 }
 
 // Play the previous song in the queue
 function songPrevious() {
-    // TODO
+    m_songIndex = m_songIndex - 1;
+    if (m_songIndex < 0) {
+        m_songIndex = m_allSongs.length - 1;
+    }
+    playCurrentSong();
 }
 
 // Convert float seconds to "min:sec"
 function getTimeString(time) {
+    if (isNaN(time))
+    {
+        time = 0.0;
+    }
     var minute = Math.floor(time / 60);
     var second = Math.floor(time % 60);
     var secondStr = second.toString();
@@ -108,14 +129,24 @@ function updateScrubPosition(dot, audio, dotPosition, maxPosition) {
 // Add event listeners
 document.addEventListener("DOMContentLoaded", (event) => {
 
-    // Audio playback position
+    // Audio playback position while playing
     var audio = document.getElementById("player-audio");
     audio.addEventListener("timeupdate", songUpdate);
 
+    // Next song on audio playback end
+    audio.addEventListener("ended", songNext);
+
+    // Audio position scrubbing
     var playerPosition = document.getElementById("player-position");
     playerPosition.addEventListener("mousedown", songScrub);
     playerPosition.addEventListener("mouseup", songScrub);
     playerPosition.addEventListener("mouseleave", songScrub);
     playerPosition.addEventListener("mousemove", songScrub);
+
+    // Song play
+    for (const element of document.getElementsByClassName("song-play-button")) {
+        m_allSongs.push(element.parentElement);
+        element.addEventListener("click", play);
+    }
 });
 
diff --git a/templates/song-list.html b/templates/song-list.html
index c27f46c..27fb38b 100644
--- a/templates/song-list.html
+++ b/templates/song-list.html
@@ -1,5 +1,5 @@
 {% for song in songs %}
-<div class="song">
+<div class="song" data-song="{{ song.json() }}">
     <!-- Song Title -->
     <div class="song-title">{{ song.title }}</div>
 
@@ -14,10 +14,7 @@
     {% endif %}
 
     <!-- Play Button -->
-    <!-- <audio src="/song/{{ song.userid }}/{{ song.songid }}" controls></audio> -->
-    <div class="song-play-button">
-        <a href="javascript:play({{ song.userid }}, {{ song.songid }})">Play</a>
-    </div>
+    <a href="#" class="song-play-button">Play</a>
 
     <!-- Song Description -->
     <div class="song-description">{{ song.description }}</div>
diff --git a/todo.txt b/todo.txt
index 6777e44..8061835 100644
--- a/todo.txt
+++ b/todo.txt
@@ -1,9 +1,10 @@
 - automated tests
 
 - javascript song player:
-    - scrubbing
     - song queue
 
+- limit input length for form fields (back and front end)
+
 - song search
 - admin account(s)
 - logging
-- 
2.39.5