From 95f95783383a58af5250bcb66155a04971385b75 Mon Sep 17 00:00:00 2001
From: gammelalf <gammelalf@hopfen.space>
Date: Wed, 28 Dec 2022 13:39:48 +0100
Subject: Added some css and svgs

---
 main.go               |  1 +
 web/client.html       | 81 ++++++++++++++++++++++++++-------------------------
 web/static/add.svg    |  9 ++++++
 web/static/client.css | 60 ++++++++++++++++++++++++++++++++++++++
 web/static/pause.svg  | 19 ++++++++++++
 web/static/play.svg   | 20 +++++++++++++
 web/static/stop.svg   | 17 +++++++++++
 7 files changed, 168 insertions(+), 39 deletions(-)
 create mode 100644 web/static/add.svg
 create mode 100644 web/static/client.css
 create mode 100644 web/static/pause.svg
 create mode 100644 web/static/play.svg
 create mode 100644 web/static/stop.svg

diff --git a/main.go b/main.go
index db78154..b68d7ae 100644
--- a/main.go
+++ b/main.go
@@ -209,6 +209,7 @@ func setupRoutes() {
 	http.HandleFunc("/add", addHandler)
 	http.HandleFunc("/playpause", playPauseHandler)
 	http.HandleFunc("/ws", wsEndpoint)
+	http.Handle("/static/", http.FileServer(http.Dir("./web")))
 }
 
 func main() {
diff --git a/web/client.html b/web/client.html
index 34a5b54..2fbc4fd 100644
--- a/web/client.html
+++ b/web/client.html
@@ -5,9 +5,6 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>WRMS</title>
 
-    <style>
-    </style>
-
     <script>
       /*
       @licstart  The following is the entire license notice for the
@@ -36,6 +33,8 @@
     </script>
 
     <script>
+      let PLAY_PAUSE;
+
       const HttpClient = function() {
         function newRequest(callback) {
           const request = new XMLHttpRequest();
@@ -152,16 +151,19 @@
       }
 
       function handlePause() {
-        document.getElementById("ppbutton").innerHTML = 'Play';
+        PLAY_PAUSE.classList.remove("pause");
+        PLAY_PAUSE.classList.add("play");
       }
 
       function handleStop() {
-        document.getElementById("ppbutton").innerHTML = 'Play';
+        PLAY_PAUSE.classList.remove("pause");
+        PLAY_PAUSE.classList.add("play");
         playing = document.getElementById("playing").innerHTML = "";
       }
 
       function handlePlay(currentSong) {
-        document.getElementById("ppbutton").innerHTML = 'Pause';
+        PLAY_PAUSE.classList.remove("play");
+        PLAY_PAUSE.classList.add("pause");
 
         let idx = -1;
         songs.forEach(function(song, index) {
@@ -236,56 +238,57 @@
         if (!response)
           return
 
-        const searchResultsOverlay = document.getElementById("searchResultsOverlay");
-
         const searchResults = document.getElementById("searchResults");
+
         // Clear search Results
         searchResults.innerHTML = "";
+
         for (const song of response.songs) {
-          const listItem = document.createElement("li");
-          listItem.addEventListener("click", function() {
-            addSong(song);
-            searchResultsOverlay.style.display = "none";
-          });
+          const listItem = document.createElement("div");
+          listItem.className = "flex-row";
+
+          listItem.innerHTML = "<button class='icon-button'><img src='static/add.svg' alt='Add'></button>" + formatSong(song) + " <small>(" + song.source + ")</small>";
+          listItem.querySelector("button").addEventListener("click", () => addSong(song));
 
-          listItem.classList.add("searchResult")
-          listItem.innerHTML = formatSong(song) + " <small>(" + song.source + ")</small>";
           searchResults.appendChild(listItem);
         }
-
-        // Show search result overlay
-        searchResultsOverlay.style.display = "block";
       }
 
       window.onload = function() {
-        document.getElementById("ppbutton").addEventListener("click", function() {
+        PLAY_PAUSE = document.getElementById("play-pause");
+        PLAY_PAUSE.addEventListener("click", function() {
           new HttpClient().get("/playpause", console.log);
         });
       }
     </script>
+
+    <link rel="stylesheet" href="static/client.css">
   </head>
 
   <body>
-    <h2>Add your song</h2>
-    <div id="add">
-      <form id="searchForm" onsubmit="return submitSearch()">
-        <label><input id="searchInput" name="pattern" type="text" value="Title/Artist/Album/..."></label>
-        <button id="searchButton">Search</button>
-      </form>
-    </div>
-
-    <div id="searchResultsOverlay" style="display: none;">
-      <ul id="searchResults">
-      </ul>
+    <div class="flex-column">
+      <h2>Currently Playing</h2>
+      <p id='playing'>Nothing</p>
+      <div id='controls'>
+        <button id="play-pause" class="icon-button play">
+          <img src="static/play.svg" alt="Play">
+          <img src="static/pause.svg" alt="Pause">
+        </button>
+      </div>
+
+      <h2>Add your song</h2>
+      <div id="add">
+        <form id="searchForm" onsubmit="return submitSearch()">
+          <label><input id="searchInput" name="pattern" type="text" placeholder="Title/Artist/Album/..."></label>
+          <button id="searchButton">Search</button>
+        </form>
+      </div>
+
+      <div id="searchResults" class="flex-column">
+      </div>
+
+      <h2>Playlist</h2>
+      <ul id='playlist'></ul>
     </div>
-
-    <h2>Playing</h2>
-    <p id='playing'></p>
-    <div id='controls'>
-      <button id="ppbutton">Play</button>
-    </div>
-
-    <h2>Playlist</h2>
-    <ul id='playlist'></ul>
   </body>
 </html>
diff --git a/web/static/add.svg b/web/static/add.svg
new file mode 100644
index 0000000..55d75aa
--- /dev/null
+++ b/web/static/add.svg
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Tools -->
+<svg fill="#000000" height="800px" width="800px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+	 viewBox="0 0 512 512" xml:space="preserve">
+	<path d="M256,0C114.842,0,0,114.842,0,256s114.842,256,256,256s256-114.842,256-256S397.158,0,256,0z M256,482.743 C130.974,482.743,29.257,381.026,29.257,256S130.974,29.257,256,29.257S482.743,130.974,482.743,256S381.026,482.743,256,482.743z"/>
+	<path d="M266.243,416.5c-8.078,0-14.629,6.557-14.629,14.636c0,8.079,6.551,14.629,14.629,14.629s14.629-6.551,14.629-14.629 v-0.013C280.872,423.044,274.321,416.5,266.243,416.5z"/>
+	<path d="M432.599,248.117c-8.078,0-14.629,6.551-14.629,14.629c0,67.634-43.33,126.623-107.82,146.786 c-7.711,2.409-12.007,10.616-9.596,18.327c1.956,6.257,7.728,10.268,13.957,10.268c1.445,0,2.917-0.216,4.37-0.671 c36.419-11.385,69.113-34.578,92.058-65.3c23.741-31.792,36.289-69.625,36.289-109.409 C447.228,254.667,440.677,248.117,432.599,248.117z"/>
+	<path d="m357.6,235.6h-81.2v-81.2c0-11.3-9.1-20.4-20.4-20.4-11.3,0-20.4,9.1-20.4,20.4v81.2h-81.2c-11.3,0-20.4,9.1-20.4,20.4s9.1,20.4 20.4,20.4h81.2v81.2c0,11.3 9.1,20.4 20.4,20.4 11.3,0 20.4-9.1 20.4-20.4v-81.2h81.2c11.3,0 20.4-9.1 20.4-20.4s-9.1-20.4-20.4-20.4z"/>
+</svg>
diff --git a/web/static/client.css b/web/static/client.css
new file mode 100644
index 0000000..c01b307
--- /dev/null
+++ b/web/static/client.css
@@ -0,0 +1,60 @@
+:root {
+    --background: #222222;
+    --primary: white;
+    --secondary: gray;
+    --link: yellow;
+}
+
+html {
+    width: 100%;
+    overflow: hidden;
+}
+
+body {
+    position: fixed;
+    overflow-y: scroll;
+    -webkit-overflow-scrolling: touch;
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    background-color: var(--background);
+    color: var(--primary);
+}
+
+.flex-column {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.flex-row {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+}
+
+.icon-button {
+    --icon-size: 4em;
+    border: none;
+    background-color: transparent;
+}
+.icon-button > img {
+    width: var(--icon-size);
+    height: var(--icon-size);
+    filter: invert(100%);
+}
+
+#play-pause.pause > img:nth-child(1) {
+    display: none;
+}
+#play-pause.play > img:nth-child(2) {
+    display: none;
+}
+
+#searchResults > div > button {
+    --icon-size: 2em;
+}
+#searchResults > div > small {
+    color: var(--secondary);
+    margin-left: 0.5em;
+}
diff --git a/web/static/pause.svg b/web/static/pause.svg
new file mode 100644
index 0000000..6559131
--- /dev/null
+++ b/web/static/pause.svg
@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Tools -->
+<svg fill="#000000" height="800px" width="800px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+	 viewBox="0 0 512 512" xml:space="preserve">
+		<path d="M256,0C114.842,0,0,114.842,0,256s114.842,256,256,256s256-114.842,256-256S397.158,0,256,0z M256,482.743
+			C130.974,482.743,29.257,381.026,29.257,256S130.974,29.257,256,29.257S482.743,130.974,482.743,256S381.026,482.743,256,482.743z"/>
+		<path d="M266.243,416.5c-8.078,0-14.629,6.557-14.629,14.636c0,8.079,6.551,14.629,14.629,14.629s14.629-6.551,14.629-14.629
+			v-0.013C280.872,423.044,274.321,416.5,266.243,416.5z"/>
+		<path d="M432.599,248.117c-8.078,0-14.629,6.551-14.629,14.629c0,67.634-43.33,126.623-107.82,146.786
+			c-7.711,2.409-12.007,10.616-9.596,18.327c1.956,6.257,7.728,10.268,13.957,10.268c1.445,0,2.917-0.216,4.37-0.671
+			c36.419-11.385,69.113-34.578,92.058-65.3c23.741-31.792,36.289-69.625,36.289-109.409
+			C447.228,254.667,440.677,248.117,432.599,248.117z"/>
+		<path d="M225.344,153.6h-57.116c-8.078,0-14.629,6.551-14.629,14.629v175.543c0,8.078,6.551,14.629,14.629,14.629h57.116
+			c8.078,0,14.629-6.551,14.629-14.629V168.229C239.973,160.151,233.422,153.6,225.344,153.6z M210.716,329.143h-27.859V182.857
+			h27.859V329.143z"/>
+		<path d="M340.878,153.6h-57.116c-8.078,0-14.629,6.551-14.629,14.629v175.543c0,8.078,6.551,14.629,14.629,14.629h57.116
+			c8.079,0,14.629-6.551,14.629-14.629V168.229C355.506,160.151,348.956,153.6,340.878,153.6z M326.249,329.143h-27.859V182.857
+			h27.859V329.143z"/>
+</svg>
diff --git a/web/static/play.svg b/web/static/play.svg
new file mode 100644
index 0000000..59855de
--- /dev/null
+++ b/web/static/play.svg
@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Tools -->
+<svg fill="#000000" height="800px" width="800px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+	 viewBox="0 0 512 512" xml:space="preserve">
+
+		<path d="M256,0C114.842,0,0,114.842,0,256s114.842,256,256,256s256-114.842,256-256S397.158,0,256,0z M256,482.743
+			C130.974,482.743,29.257,381.026,29.257,256S130.974,29.257,256,29.257S482.743,130.974,482.743,256S381.026,482.743,256,482.743z"/>
+		<path d="M266.243,416.5c-8.079,0-14.629,6.557-14.629,14.636c0,8.079,6.549,14.629,14.629,14.629s14.629-6.551,14.629-14.629
+			v-0.013C280.872,423.044,274.322,416.5,266.243,416.5z"/>
+		<path d="M432.599,248.117c-8.079,0-14.629,6.551-14.629,14.629c0,67.634-43.33,126.623-107.82,146.785
+			c-7.711,2.411-12.007,10.617-9.598,18.328c1.956,6.257,7.73,10.268,13.959,10.268c1.445,0,2.917-0.217,4.37-0.672
+			c36.421-11.385,69.114-34.578,92.058-65.302c23.741-31.791,36.289-69.625,36.289-109.407
+			C447.228,254.667,440.678,248.117,432.599,248.117z"/>
+		<path d="M366.387,229.945v0.001l-168.05-99.673c-9.484-5.625-20.865-5.723-30.444-0.266c-9.58,5.455-15.299,15.296-15.299,26.32
+			v199.345c0,11.024,5.72,20.865,15.299,26.32c4.71,2.684,9.855,4.023,14.997,4.023c5.315,0,10.626-1.432,15.446-4.291
+			l168.05-99.672c9.292-5.51,14.839-15.249,14.839-26.052C381.226,245.197,375.679,235.457,366.387,229.945z M351.465,256.888
+			L183.413,356.56c-0.206,0.124-0.518,0.307-1.039,0.01c-0.522-0.297-0.522-0.66-0.522-0.898V156.327c0-0.238,0-0.601,0.522-0.898
+			c0.208-0.119,0.382-0.159,0.53-0.159c0.222,0,0.385,0.095,0.509,0.168l168.052,99.673v0.001c0.189,0.111,0.506,0.3,0.506,0.888
+			C351.969,256.587,351.653,256.775,351.465,256.888z"/>
+</svg>
diff --git a/web/static/stop.svg b/web/static/stop.svg
new file mode 100644
index 0000000..76301a5
--- /dev/null
+++ b/web/static/stop.svg
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Tools -->
+<svg fill="#000000" height="800px" width="800px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+	 viewBox="0 0 512 512" xml:space="preserve">
+		<path d="M256,0C114.842,0,0,114.842,0,256s114.842,256,256,256s256-114.842,256-256S397.158,0,256,0z M256,482.743
+			C130.974,482.743,29.257,381.026,29.257,256S130.974,29.257,256,29.257S482.743,130.974,482.743,256S381.026,482.743,256,482.743z
+			"/>
+		<path d="M266.243,416.502c-8.078,0-14.629,6.555-14.629,14.634c0,8.079,6.551,14.629,14.629,14.629s14.629-6.551,14.629-14.629
+			v-0.012C280.872,423.045,274.321,416.502,266.243,416.502z"/>
+		<path d="M432.599,248.117c-8.078,0-14.629,6.551-14.629,14.629c0,67.634-43.33,126.623-107.82,146.786
+			c-7.711,2.409-12.007,10.616-9.596,18.327c1.956,6.257,7.728,10.268,13.957,10.268c1.445,0,2.917-0.216,4.37-0.671
+			c36.419-11.385,69.113-34.578,92.058-65.3c23.741-31.792,36.289-69.625,36.289-109.409
+			C447.228,254.667,440.677,248.117,432.599,248.117z"/>
+		<path d="M343.771,153.6H168.229c-8.078,0-14.629,6.551-14.629,14.629 v175.543c0,8.078,6.551,14.629,14.629,14.629h175.543
+			c8.078,0,14.629-6.551,14.629-14.629V168.229C358.4,160.151,351.849,153.6,343.771,153.6z M329.143,329.143H182.857V182.857
+			h146.286V329.143z"/>
+</svg>
-- 
cgit v1.2.3