update

static/neutral.svg

@@ -1,5 +1,4 @@
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
 
 <svg
    width="326.09866"

static/no.svg

@@ -1,5 +1,4 @@
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
 
 <svg
    width="466.66666"

static/open.svg

@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+
+<svg
+   width="600.07782"
+   height="600.07782"
+   viewBox="0 0 18.002335 18.002335"
+   fill="none"
+   version="1.1"
+   id="svg1"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs1" />
+  <path
+     d="m 17.002335,1 -8,8 m 8,-8 v 4.5 m 0,-4.5 h -4.5 m 3.5,8.5 v 4.3 c 0,1.1201 0,1.6802 -0.218,2.108 -0.1917,0.3763 -0.4977,0.6823 -0.874,0.874 -0.4278,0.218 -0.9879,0.218 -2.108,0.218 h -8.6 c -1.1201,0 -1.68016,0 -2.10798,-0.218 C 1.718025,16.5903 1.412065,16.2843 1.220325,15.908 1.002335,15.4802 1.002335,14.9201 1.002335,13.8 V 5.2 c 0,-1.1201 0,-1.68016 0.21799,-2.10798 0.19174,-0.37633 0.4977,-0.68229 0.87403,-0.87403 C 2.522175,2 3.082225,2 4.202335,2 h 4.3"
+     stroke="#000000"
+     stroke-width="2"
+     stroke-linecap="round"
+     stroke-linejoin="round"
+     id="path1" />
+</svg>

static/play.svg

@@ -1,5 +1,4 @@
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
 
 <svg
    width="259.76822"

static/site.css

@@ -2,17 +2,31 @@
     box-sizing: border-box;
     margin: 0;
     padding: 0;
+    font-family: sans-serif;
+}
+
+.vote-buttons,
+.cover-container,
+.categories {
     -webkit-user-select: none;
     -ms-user-select: none;
     user-select: none;
 }
 
+
 @media only screen and (min-resolution: 200dpi) {
     body {
         font-size: 3.2vmin;
     }
 }
 
+
+.text {
+    padding: 0.3em;
+    margin-bottom: 0.5em;
+    display: inline-block;
+}
+
 .clear {
     clear: both;
 }
@@ -101,11 +115,12 @@
 .button {
     height: 1.5em;
     width: 3em;
-    display: inline-block;
     text-align: center;
     vertical-align: middle;
     font-size: 1.5em;
     position: relative;
+    float: left;
+    clear: none;
 }
 
 .button img {
@@ -202,6 +217,8 @@
     font-size: 0.7em;
 }
 
+
+
 h1 {
     font-family: sans-serif;
     padding: 0.1em;
@@ -224,20 +241,21 @@ h1 {
 }
 
 #spotify-player {
-    bottom: 0.2em;
-    background-color: blue;
+    bottom: 0.4em;
 }
 
 #close-player {
-    position: absolute;
-    bottom: 320px;
-    right: 0.5em;
-    background-color: rgba(255,255,255,0.9);
+    position: fixed;
+    bottom: calc(360px + 0.2em - 3em);
+    right: 0.7em;
+    background-color: rgba(255, 255, 255, 1);
     width: 3em;
     height: 3em;
     border-radius: 1.5em;
     display: none;
+    cursor: pointer;
 }
+
 #close-player img {
     position: relative;
     left: 50%;

static/stop.svg

@@ -0,0 +1,54 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+
+<svg
+   width="176.76801"
+   height="419.52487"
+   viewBox="0 0 5.3030402 12.585746"
+   fill="none"
+   version="1.1"
+   id="svg1"
+   sodipodi:docname="stop.svg"
+   inkscape:version="1.3.2 (091e20e, 2023-11-25, custom)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview1"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:zoom="1.916407"
+     inkscape:cx="104.36196"
+     inkscape:cy="177.15443"
+     inkscape:window-width="2560"
+     inkscape:window-height="1351"
+     inkscape:window-x="-9"
+     inkscape:window-y="-9"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg1" />
+  <defs
+     id="defs1" />
+  <path
+     d="M 1.0001448,2.2242414 V 10.361541"
+     stroke="#000000"
+     stroke-width="2"
+     stroke-linecap="round"
+     stroke-linejoin="round"
+     id="path1"
+     style="stroke:#000000;stroke-opacity:1"
+     sodipodi:nodetypes="cc" />
+  <path
+     d="m 4.2993174,2.22424 v 8.1373"
+     stroke="#000000"
+     stroke-width="2"
+     stroke-linecap="round"
+     stroke-linejoin="round"
+     id="path1-3"
+     style="stroke:#000000;stroke-opacity:1"
+     sodipodi:nodetypes="cc" />
+</svg>

static/voting_script.js

@@ -143,6 +143,7 @@ $(document).ready(function () {
                 "no_selected": (song.vote == -1) ? "selected" : "",
                 "neutral_selected": (song.vote == 0) ? "selected" : "",
                 "yes_selected": (song.vote == 1) ? "selected" : "",
+                "play_button": (song.yt_id || song.spfy_id) ? "play" : "open",
                 "categories": cats
             })).join('')
 
@@ -175,22 +176,30 @@ window.onSpotifyIframeApiReady = (IFrameAPI) => {
     IFrameAPI.createController(element, options, callback);
   };
 
+function stop() {
+    $("#song-" + is_playing + " .cover-container .overlay img").attr("src", "/static/play.svg");
 
-function play(id) {
     $("#yt-player").css("display", "none");
     $("#spotify-player").css("display", "none");
     $("#close-player").css("display", "none");
     $("#yt-player").html("");
     spotify_embed_controller.pause();
+    is_playing = -1;
+}
 
+function play(id) {
     if (is_playing == id) {
-        is_playing = -1;
+        stop();
     } else {
+        stop();
+
         is_playing = id;
 
+        $("#song-" + id + " .cover-container .overlay img").attr("src", "/static/stop.svg");
+
         song = all_songs[id];
-        yt_id = song.yt_url.split('v=')[1]
-        spotify_id = song.yt_url.split('/track/')[1]
+        yt_id = song.yt_id
+        spotify_id = song.spfy_id
 
         if (yt_id) {
             $("#yt-player").css("display", "flex");
@@ -205,15 +214,9 @@ function play(id) {
             spotify_embed_controller.play();
         }
         else {
-            $("#yt-player").css("display", "none");
-            $("#spotify-player").css("display", "none");
-            $("#yt-player").html("");
-            spotify_embed_controller.pause();
-            window.open(song.yt_url, '_blank').focus();
+            stop();
+            $("#song-" + id + " .cover-container .overlay img").attr("src", "/static/open.svg");
+            window.open(song.url, '_blank').focus();
         }
     }
-}
-
-//<iframe style="border-radius:12px" src="https://open.spotify.com/embed/track/2DS7lDZNFM7safSGNm8vd4?utm_source=generator" width="100%" height="352" frameBorder="0" allowfullscreen="" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" loading="lazy"></iframe>
-
-// https://open.spotify.com/intl-de/track/2DS7lDZNFM7safSGNm8vd4
+}