From 9414a702027706e5c4470a519b1a247cd2132507 Mon Sep 17 00:00:00 2001
From: Chris Fulljames <christianfulljames@gmail.com>
Date: Wed, 15 Jan 2025 20:18:53 -0500
Subject: [PATCH] Add buttons

---
 main.py                      |   2 +-
 static/littlesongplace01.gif | Bin 3220 -> 3220 bytes
 static/lsp_btn_delete.gif    | Bin 0 -> 172 bytes
 static/lsp_btn_edit.gif      | Bin 0 -> 191 bytes
 static/lsp_btn_hide.gif      | Bin 0 -> 152 bytes
 static/lsp_btn_next.gif      | Bin 0 -> 175 bytes
 static/lsp_btn_pause.gif     | Bin 0 -> 170 bytes
 static/lsp_btn_play.gif      | Bin 0 -> 167 bytes
 static/lsp_btn_prev.gif      | Bin 0 -> 173 bytes
 static/lsp_btn_show.gif      | Bin 0 -> 157 bytes
 static/player.js             |  17 +++++++++++------
 static/styles.css            |  21 +++++++++++++++++++--
 templates/base.html          |  12 +++++++++---
 templates/song-list.html     |  30 +++++++++++++++++++++---------
 14 files changed, 61 insertions(+), 21 deletions(-)
 create mode 100644 static/lsp_btn_delete.gif
 create mode 100644 static/lsp_btn_edit.gif
 create mode 100644 static/lsp_btn_hide.gif
 create mode 100644 static/lsp_btn_next.gif
 create mode 100644 static/lsp_btn_pause.gif
 create mode 100644 static/lsp_btn_play.gif
 create mode 100644 static/lsp_btn_prev.gif
 create mode 100644 static/lsp_btn_show.gif

diff --git a/main.py b/main.py
index 3eeaaef..95efe86 100644
--- a/main.py
+++ b/main.py
@@ -17,7 +17,7 @@ import bleach
 import click
 from bleach.css_sanitizer import CSSSanitizer
 from flask import Flask, render_template, request, redirect, g, session, abort, \
-        send_from_directory, flash
+        send_from_directory, flash, get_flashed_messages
 from werkzeug.utils import secure_filename
 
 DATA_DIR = Path(".")
diff --git a/static/littlesongplace01.gif b/static/littlesongplace01.gif
index d6bb789095924d5d9e829b608cb72b160c453689..a727c95631038f47997eb64cec3fb65ded102593 100644
GIT binary patch
delta 234
zcmbOtIYm;&-P6s&JduG>fngB?2)uYYVP@O1Jq_!7Pam2nW1udv>&`!eQ=Y5$TD(5H
z`+tH)UrOe@4AnI{+w*d@&P!-ts7N_3`Tj@a#^T$I!l-H&sPtUWn4HLD&X}|L9@kdJ
z$$l&%f~ZO!sBlc4z@fy*ym=bS14bcK$%G#qOD1=)1u-&izRk9T5wBLfR&Qej0Q|sh
AI{*Lx

delta 234
zcmbOtIYm;&-P6s&JduG>fngB?2q-C-xN6wEeK~*so`#7s2I>~O?))=2<+*yV#p|=X
z|0ihlrDV>_5M86QJug@5yoB_Hij?D$?|(FJEWXVsjH-5lNY4d{$%#znjBhsI<J!tN
z*^fm;5LL+o5thjlIFuOKH&0`Ez$k<&nec-pWpW2w5F_*E+iXi1@oL3u^)^NTDX(jz

diff --git a/static/lsp_btn_delete.gif b/static/lsp_btn_delete.gif
new file mode 100644
index 0000000000000000000000000000000000000000..a7b9690d837eaf588a205424ae0f086bd7d54052
GIT binary patch
literal 172
zcmZ?wbh9u|6krfwSi}GVFP=`A*|uy?!}{LShrj|LLh(PhpKD04vtxj(k)8oFBS`2c
z3#Sf{p#zc!X=h+omDqJ>U9ye3^HRgtJKk-%t7aw_+;m=Ztr~09E0N`TzNc1J)cG=j
gb&3ErA?Z}Xs<YBb<i$$iIopgSmp}St$jM+0048cQY5)KL

literal 0
HcmV?d00001

diff --git a/static/lsp_btn_edit.gif b/static/lsp_btn_edit.gif
new file mode 100644
index 0000000000000000000000000000000000000000..c3d599fda192f3b6ffc1b696c5a5ccfcbeb20e5a
GIT binary patch
literal 191
zcmZ?wbh9u|6krfwSi}GVFP=`A*|uy?!}{LShrj|LLh(PhpKD04vtxj(k)8oFBS`2c
z3#Sf{p#zc!X=h;8m)Ld3%HWWBM5*JtQ``5*YBZg7$-Opp<;>^XHtbxqF~c?_<k4!M
z%`+lCT>CB2evk!hh6qqQk{P;4X54;q=D}B2|Kqg}%8D|#P1DpmtgIch#PxYq_r?A5
M(ob-k2{Bj$044cCW&i*H

literal 0
HcmV?d00001

diff --git a/static/lsp_btn_hide.gif b/static/lsp_btn_hide.gif
new file mode 100644
index 0000000000000000000000000000000000000000..6760fa38f9a956426f2b7c93f033cc85279c287a
GIT binary patch
literal 152
zcmZ?wbh9u|6krfwSi}GVFP=`A*|uy?!}{LShrj|LLh(PhpKD04vtxj(k)8oFBS`2c
z3#Sf{p#zc!X=h-Tme_UYpTQ~5)zTK(Yu!HFzE&GQqckmJZO-d$oM81LK&43PrI6Kc
VJ0EM%A%AV^?4|2+POC9k0|1XdE*Ss-

literal 0
HcmV?d00001

diff --git a/static/lsp_btn_next.gif b/static/lsp_btn_next.gif
new file mode 100644
index 0000000000000000000000000000000000000000..ecff72cc72b91e0edd5e4d6137a88c70a8c80ffd
GIT binary patch
literal 175
zcmZ?wbh9u|6krfwSi}GVFP=`A*|uy?!}{LShrj|LLh(PhpKD04vtxj(k)8oFBS`2c
z3#Sf{p#zc!X=h+olh}3VpTQ<WmC!GCb2mSByy_d8Q5Ms=XvVH-xz=VYzwH#$d0R6d
nqE!T_3%Ay}+Y1~;!&IxvX6*9QyWMc>dDMy}?`tM7FjxZsbg4Nd

literal 0
HcmV?d00001

diff --git a/static/lsp_btn_pause.gif b/static/lsp_btn_pause.gif
new file mode 100644
index 0000000000000000000000000000000000000000..4dce963d9eaa78663a4e412e292c26af6354691d
GIT binary patch
literal 170
zcmZ?wbh9u|6krfwSi}GVFP=`A*|uy?!}{LShrj|LLh(PhpKD04vtxj(k)8oFBS`2c
z3#Sf{p#zc!X=h+ok=S+TpTRyyQP~f-taiSO_+WYe#uS;COP6Qt6z*xw%J8aKr_Bl0
cC<4@jq){1%#^+L#7Kt|B*1lV@Pldr60FjM282|tP

literal 0
HcmV?d00001

diff --git a/static/lsp_btn_play.gif b/static/lsp_btn_play.gif
new file mode 100644
index 0000000000000000000000000000000000000000..7e5d1de0da0d8f1f1a7707d233acbc44003adcc3
GIT binary patch
literal 167
zcmZ?wbh9u|6krfwSi}GVFP=`A*|uy?!}{LShrj|LLh(PhpKD04vtxj(k)8oFBS`2c
z3#Sf{p#zc!X=h+ome_UYUmlOd(<P^(Y<}0pF7Ui+VYIAsS;}E2t)+=KUGMLh4ACb7
k)Pkf>5lP<~(>V#@rH`B@o!M#nDtwpFwAi9tYfc7h0IMG~Pyhe`

literal 0
HcmV?d00001

diff --git a/static/lsp_btn_prev.gif b/static/lsp_btn_prev.gif
new file mode 100644
index 0000000000000000000000000000000000000000..9de19de591eddfb1efc95ba1624e2fd34a0a9ded
GIT binary patch
literal 173
zcmZ?wbh9u|6krfwSi}GVFP=`A*|uy?!}{LShrj|LLh(PhpKD04vtxj(k)8oFBS`2c
z3#Sf{p#zc!X=h+omDqLXpTQ<WmC)}O=RALQ^%H9-N1tk1-I`Y$S2ORv<>owh$@>~6
juuc)6CVV<;BP_x)BIhkAUv*Zx<RhE&mL>12nHa1Aga|rI

literal 0
HcmV?d00001

diff --git a/static/lsp_btn_show.gif b/static/lsp_btn_show.gif
new file mode 100644
index 0000000000000000000000000000000000000000..901b52afb0256646322beb5affa6f1db0ac25359
GIT binary patch
literal 157
zcmZ?wbh9u|6krfwSi}GVFP=`A*|uy?!}{LShrj|LLh(PhpKD04vtxj(k)8oFBS`2c
z3#Sf{p#zc!X=h-TmDqLXpTQ~5*V4&}b3^aN?_gE*?7Dk$ZP@F5A7(>zhyWGi(jj^;
WUaX2SqDy{x)!e813jU}uSOWlq0WaqO

literal 0
HcmV?d00001

diff --git a/static/player.js b/static/player.js
index b9fbc95..75b639b 100644
--- a/static/player.js
+++ b/static/player.js
@@ -3,8 +3,13 @@ var m_songIndex = 0;
 
 // Play a new song from the list in the player
 function play(event) {
-    var song = event.target.parentElement.parentElement.parentElement;
-    m_songIndex = m_allSongs.indexOf(song);
+    var songElement = event.target;
+    while (!songElement.classList.contains("song"))
+    {
+        songElement = songElement.parentElement;
+        console.log(songElement);
+    }
+    m_songIndex = m_allSongs.indexOf(songElement);
     playCurrentSong();
 }
 
@@ -155,10 +160,10 @@ document.addEventListener("DOMContentLoaded", (event) => {
     playerPosition.addEventListener("mouseleave", songScrub);
     playerPosition.addEventListener("mousemove", songScrub);
 
-    // Song play
-    for (const element of document.getElementsByClassName("song-play-button")) {
-        m_allSongs.push(element.parentElement.parentElement.parentElement);
-        element.addEventListener("click", play);
+    // Song queue
+    for (const element of document.getElementsByClassName("song")) {
+        console.log(element);
+        m_allSongs.push(element);
     }
 });
 
diff --git a/static/styles.css b/static/styles.css
index 4beab5c..3309e4a 100644
--- a/static/styles.css
+++ b/static/styles.css
@@ -1,6 +1,12 @@
 /* General */
+:root {
+    --yellow: #e8e590;
+    --purple: #9986a6;
+}
+
 body {
-    background: #ede99f;
+    background: var(--yellow);
+    color: var(--purple);
 }
 
 div.main {
@@ -22,6 +28,7 @@ div.navbar {
 .filter {
     margin: 5px;
 }
+
 .filter-remove {
     font-size: 12px;
 }
@@ -59,6 +66,11 @@ div.song-buttons {
     align-items: center;
 }
 
+a.song-list-button img {
+    image-rendering: pixelated;
+    width: 24px;
+}
+
 div.song-details {
     display: flex;
     flex-direction: column;
@@ -83,7 +95,7 @@ div.player {
     right: 0;
     height: 100px;
     border: 3px solid #000;
-    background: #fff;
+    background: var(--yellow);
 }
 
 div.player-info {
@@ -110,6 +122,11 @@ a.player-button {
     display: inline-block;
 }
 
+a.player-button img {
+    image-rendering: pixelated;
+    width: 24px;
+}
+
 #player-position {
     display: inline-block;
     position: relative;
diff --git a/templates/base.html b/templates/base.html
index c0d9b4a..0fbfaf9 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -50,9 +50,15 @@
                 <a id="player-artist" hidden></a>
             </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>
+                <a href="javascript:songPrevious()" class="player-button">
+                    <img src="/static/lsp_btn_prev.gif" alt="Previous">
+                </a>
+                <a href="javascript:songPlayPause()" class="player-button">
+                    <img src="/static/lsp_btn_play.gif" alt="Play">
+                </a>
+                <a href="javascript:songNext()" class="player-button">
+                    <img src="/static/lsp_btn_next.gif" alt="Next">
+                </a>
                 <div id="player-position">
                     <span id="player-position-bar"></span>
                     <span id="player-position-dot"></span>
diff --git a/templates/song-list.html b/templates/song-list.html
index af59a11..8e89af1 100644
--- a/templates/song-list.html
+++ b/templates/song-list.html
@@ -26,20 +26,24 @@
             <div class="song-buttons">
 
                 <!-- Details Button -->
-                <a href="#" onclick="showDetails(event)" class="song-details-button">Show Details</a>
+                <a href="#" onclick="return showDetails(event)" class="song-list-button">
+                    <img src="/static/lsp_btn_show.gif" alt="Show Details">
+                </a>
 
                 <!-- Owner-Specific Buttons (Edit/Delete) -->
                 {% if session["userid"] == song.userid %}
-                <div class="song-edit-button">
-                <a href="/edit-song?songid={{ song.songid }}">Edit</a>
-                </div>
-                <div class="song-delete-button">
-                <a href="/delete-song/{{ song.userid }}/{{ song.songid }}" onclick="return confirm(&#34;Are you sure you want to delete this song?&#34;)">Delete</a>
-                </div>
+                <a href="/edit-song?songid={{ song.songid }}" class="song-list-button">
+                    <img src="/static/lsp_btn_edit.gif" alt="Edit">
+                </a>
+                <a href="/delete-song/{{ song.userid }}/{{ song.songid }}" onclick="return confirm(&#34;Are you sure you want to delete this song?&#34;)" class="song-list-button">
+                    <img src="/static/lsp_btn_delete.gif" alt="Delete">
+                </a>
                 {% endif %}
 
                 <!-- Play Button -->
-                <a href="#" class="song-play-button">Play</a>
+                <a href="#" onclick="return play(event)" class="song-list-button">
+                    <img src="/static/lsp_btn_play.gif" alt="Play">
+                </a>
             </div>
         </div>
 
@@ -61,7 +65,14 @@
 
 <script>
 function showDetails(event) {
-    var songElement = event.target.parentElement.parentElement.parentElement;
+    // Find song-main
+    var songElement = event.target;
+    while (!songElement.classList.contains("song"))
+    {
+        songElement = songElement.parentElement;
+        console.log(songElement);
+    }
+
     for (const child of songElement.children) {
         if (child.classList.contains("song-details")) {
             if (child.hidden) {
@@ -76,5 +87,6 @@ function showDetails(event) {
             }
         }
     }
+    return false;
 }
 </script>
-- 
2.39.5