Clippy update

Plus some refactors of the templates and styling

playlist/templates/Vote.html

@@ -5,7 +5,77 @@ Stemmen
 {% endblock %}
 
 {% block main-content %}
-  <div hx-get="{% url 'vote-track' %}" hx-trigger="load">
-    Laden...
+{% if track %}
+<div id="vote-box" hx-target="body">
+  {% if error %}<div class="error">{{ error }}</div>{% endif %}
+  <div id="embed"></div>
+  <div id="album">
+    {% if track.album.image_url %}
+      <img src="{{track.album.image_url}}" />
+    {% else %}
+      <img src="https://kagi.com/proxy/windows-95-logo-png-1.png?c=xjdP8sWN58YWflc6NcGN5ZvzREJyOwtrou-TSsaXxcx37J0VVJbSeycOcAptMJEUpzzvqmbKQ3JRuSmPN8HCK43OxjkRe_cQvncxVzlCblc%3D" />
+    {% endif %}
+    <h1>{{track.name}}</h1>
+    <h2>{{track.artist}}</h2>
   </div>
+  <input id="seek" type="range" min="0" step="0.1" max="100" value="0" />
+  <button id="playpause">⏵️</button>
+
+  <div
+    id="vote-buttons"
+    hx-vals='{"spotify_id": "{{ track.id }}"}'
+    style="margin-top:10px;"
+    >
+    <fieldset>
+      <legend>Dit vind ik een leuk nummer!</legend>
+      <button
+        hx-vals='{"vote": "2"}'
+        hx-post="{% url 'vote' %}"
+      >Helemaal mee eens</button>
+      <button
+        hx-vals='{"vote": "1"}'
+        hx-post="{% url 'vote' %}"
+      >Mee eens</button>
+      <button
+        hx-vals='{"vote": "0"}'
+        hx-post="{% url 'vote' %}"
+      >Neutraal</button>
+      <button
+        hx-vals='{"vote": "-1"}'
+        hx-post="{% url 'vote' %}"
+      >Niet mee eens</button>
+      <button
+        hx-vals='{"vote": "-2"}'
+        hx-post="{% url 'vote' %}"
+      >Helemaal niet mee eens</button>
+    </fieldset>
+  </div>
+</div>
+<script>
+  window.onSpotifyIframeApiReady = (IFrameAPI) => {
+    let element = document.getElementById('embed');
+    let options = {
+      uri: 'spotify:track:{{track.id}}'
+    };
+    const callback = (EmbedController) => {
+        document.getElementById("playpause").addEventListener('click', () => {
+          EmbedController.togglePlay()
+        });
+        EmbedController.addListener('playback_update', e => {
+          document.getElementById('seek').value = `${parseInt(e.data.position) / parseInt(e.data.duration) * 100}`;
+        })
+      };
+      IFrameAPI.createController(element, options, callback);
+  };
+</script>
+{% else %}
+<p hx-boost="true">
+  Je hebt niets meer om te stemmen. Lekker bezig!
+  <a href="{% url 'nominate' %}">Nomineer zelf iets</a>, als je nog quota hebt.
+</p>
+{% endif %}
 {% endblock %}
+
+{% block clippy %}
+  {% include "Clippy.html" with body=track.banter img="img/draakje/draakje-headphones3.gif" %}
+{% endblock %}