Add buttons

diff --git a/main.py b/main.py
index 3eeaaef06b5b7a5d73e6f7347cf4cea3cdb91173..95efe86fb2f8f4693d549d113c030d2ef490b4ff 100644 (file)
--- 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 (file)
Binary files a/static/littlesongplace01.gif and b/static/littlesongplace01.gif differ

diff --git a/static/lsp_btn_delete.gif b/static/lsp_btn_delete.gif
new file mode 100644 (file)
index 0000000..a7b9690
Binary files /dev/null and b/static/lsp_btn_delete.gif differ

diff --git a/static/lsp_btn_edit.gif b/static/lsp_btn_edit.gif
new file mode 100644 (file)
index 0000000..c3d599f
Binary files /dev/null and b/static/lsp_btn_edit.gif differ

diff --git a/static/lsp_btn_hide.gif b/static/lsp_btn_hide.gif
new file mode 100644 (file)
index 0000000..6760fa3
Binary files /dev/null and b/static/lsp_btn_hide.gif differ

diff --git a/static/lsp_btn_next.gif b/static/lsp_btn_next.gif
new file mode 100644 (file)
index 0000000..ecff72c
Binary files /dev/null and b/static/lsp_btn_next.gif differ

diff --git a/static/lsp_btn_pause.gif b/static/lsp_btn_pause.gif
new file mode 100644 (file)
index 0000000..4dce963
Binary files /dev/null and b/static/lsp_btn_pause.gif differ

diff --git a/static/lsp_btn_play.gif b/static/lsp_btn_play.gif
new file mode 100644 (file)
index 0000000..7e5d1de
Binary files /dev/null and b/static/lsp_btn_play.gif differ

diff --git a/static/lsp_btn_prev.gif b/static/lsp_btn_prev.gif
new file mode 100644 (file)
index 0000000..9de19de
Binary files /dev/null and b/static/lsp_btn_prev.gif differ

diff --git a/static/lsp_btn_show.gif b/static/lsp_btn_show.gif
new file mode 100644 (file)
index 0000000..901b52a
Binary files /dev/null and b/static/lsp_btn_show.gif differ

diff --git a/static/player.js b/static/player.js
index b9fbc951844fb677c981445f5cca26115b62b60d..75b639bf5440635a64581cd03c09916ab1fbc76c 100644 (file)
--- 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 4beab5cf42737a8870a6ea1cc2506b46c864c8d2..3309e4ae4dfc5f89dad48efce26ada4e1100a13f 100644 (file)
--- 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 c0d9b4ae5eab1697f3883368430fab487e94c0b7..0fbfaf90bd6cc9d9b87ba9a9ed060df00f005864 100644 (file)
--- 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 af59a11e392d3891fa13d1318bfb0808859be3f8..8e89af1e1c7a1b4fc3686cbbe8b2fcf763d3e33c 100644 (file)
--- 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>